Browse Source

feat: rework link underlines

REJack 1 year ago
parent
commit
23bdd7642d

+ 6 - 6
src/html/pages/index.astro

@@ -91,7 +91,7 @@ const page = "index";
                       d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">
+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -117,7 +117,7 @@ const page = "index";
                       d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">
+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -143,7 +143,7 @@ const page = "index";
                       d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">
+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -176,7 +176,7 @@ const page = "index";
                       d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">
+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -189,7 +189,7 @@ const page = "index";
             <div class="row">
               <!-- Start col -->
               <div class="col-lg-7 connectedSortable">
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Sales Value</h3>
                   </div>
@@ -510,7 +510,7 @@ const page = "index";
               <!-- Start col -->
               <div class="col-lg-5 connectedSortable">
                 <div
-                  class="card text-white bg-primary bg-gradient border-primary"
+                  class="card mb-4 text-white bg-primary bg-gradient border-primary"
                 >
                   <div class="card-header border-0">
                     <h3 class="card-title">Sales Value</h3>

+ 3 - 3
src/html/pages/index2.astro

@@ -133,7 +133,7 @@ const page = "index2";
             <!--begin::Row-->
             <div class="row">
               <div class="col-md-12">
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h5 class="card-title">Monthly Recap Report</h5>
 
@@ -622,7 +622,7 @@ const page = "index2";
 
                   <div class="col-md-6">
                     <!-- USERS LIST -->
-                    <div class="card">
+                    <div class="card mb-4">
                       <div class="card-header">
                         <h3 class="card-title">Latest Members</h3>
 
@@ -1022,7 +1022,7 @@ const page = "index2";
                 </div>
                 <!-- /.info-box -->
 
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Browser Usage</h3>
 

+ 2 - 2
src/html/pages/index3.astro

@@ -61,7 +61,7 @@ const page = "index3";
             <!--begin::Row-->
             <div class="row">
               <div class="col-lg-6">
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header border-0">
                     <div class="d-flex justify-content-between">
                       <h3 class="card-title">Online Store Visitors</h3>
@@ -224,7 +224,7 @@ const page = "index3";
               </div>
               <!-- /.col-md-6 -->
               <div class="col-lg-6">
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header border-0">
                     <div class="d-flex justify-content-between">
                       <h3 class="card-title">Sales</h3>

+ 4 - 4
src/html/pages/widgets/small-box.astro

@@ -76,7 +76,7 @@ const page = "small-box";
                       d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">
+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -101,7 +101,7 @@ const page = "small-box";
                       d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">
+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -126,7 +126,7 @@ const page = "small-box";
                       d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">
+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -158,7 +158,7 @@ const page = "small-box";
                       d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">
+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>

+ 1 - 9
src/scss/_app-sidebar.scss

@@ -35,10 +35,7 @@
   .brand-link {
     display: flex;
     align-items: center;
-
-    &:hover {
-      text-decoration: none;
-    }
+    text-decoration: none;
 
     .brand-image {
       float: left;
@@ -150,11 +147,6 @@
   // All links within the sidebar menu
   a {
     color: var(--#{$lte-prefix}sidebar-color);
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
   }
 
   // All submenus

+ 1 - 1
src/scss/_bootstrap-variables.scss

@@ -455,7 +455,7 @@ $body-emphasis-color:       $black !default;
 // Style anchor elements.
 
 $link-color:                              $primary !default;
-$link-decoration:                         none !default; // adminlte-modified
+$link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
 $link-hover-decoration:                   null !default;

+ 0 - 3
src/scss/_small-box.scss

@@ -23,7 +23,6 @@
     display: block;
     padding: 3px 0;
     text-align: center;
-    text-decoration: none;
     background-color: rgba($black, .07);
 
     &:hover {
@@ -105,8 +104,6 @@
 
   // Small box hover state
   &:hover {
-    text-decoration: none;
-
     // Animate icons on small box hover
     .small-box-icon {
       transform: scale(1.1);