Bladeren bron

improve text in scss

Daniel 3 jaren geleden
bovenliggende
commit
a65e7716e2

+ 3 - 3
src/index2.html

@@ -696,7 +696,7 @@
                         <a href="#" class="nav-link">
                           United States of America
                           <span class="float-end text-danger">
-                            <i class="fas fa-arrow-down text-sm"></i>
+                            <i class="fas fa-arrow-down fs-7"></i>
                             12%</span>
                         </a>
                       </li>
@@ -704,7 +704,7 @@
                         <a href="#" class="nav-link">
                           India
                           <span class="float-end text-success">
-                            <i class="fas fa-arrow-up text-sm"></i> 4%
+                            <i class="fas fa-arrow-up fs-7"></i> 4%
                           </span>
                         </a>
                       </li>
@@ -712,7 +712,7 @@
                         <a href="#" class="nav-link">
                           China
                           <span class="float-end text-purple">
-                            <i class="fas fa-arrow-left text-sm"></i> 0%
+                            <i class="fas fa-arrow-left fs-7"></i> 0%
                           </span>
                         </a>
                       </li>

+ 2 - 2
src/index3.html

@@ -39,7 +39,7 @@
                   <div class="card-body">
                     <div class="d-flex">
                       <p class="d-flex flex-column">
-                        <span class="text-bold text-lg">820</span>
+                        <span class="fw-bold text-lg">820</span>
                         <span>Visitors Over Time</span>
                       </p>
                       <p class="ms-auto d-flex flex-column text-end">
@@ -186,7 +186,7 @@
                   <div class="card-body">
                     <div class="d-flex">
                       <p class="d-flex flex-column">
-                        <span class="text-bold text-lg">$18,230.00</span>
+                        <span class="fw-bold text-lg">$18,230.00</span>
                         <span>Sales Over Time</span>
                       </p>
                       <p class="ms-auto d-flex flex-column text-end">

+ 12 - 12
src/partials/dashboard/_topbar.html

@@ -39,10 +39,10 @@
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Brad Diesel
-                  <span class="float-end text-sm text-danger"><i class="fas fa-star"></i></span>
+                  <span class="float-end fs-7 text-danger"><i class="fas fa-star"></i></span>
                 </h3>
-                <p class="text-sm">Call me whenever you can...</p>
-                <p class="text-sm text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7">Call me whenever you can...</p>
+                <p class="fs-7 text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
               </div>
             </div>
             <!-- Message End -->
@@ -57,10 +57,10 @@
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   John Pierce
-                  <span class="float-end text-sm text-muted"><i class="fas fa-star"></i></span>
+                  <span class="float-end fs-7 text-muted"><i class="fas fa-star"></i></span>
                 </h3>
-                <p class="text-sm">I got your message bro</p>
-                <p class="text-sm text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7">I got your message bro</p>
+                <p class="fs-7 text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
               </div>
             </div>
             <!-- Message End -->
@@ -73,10 +73,10 @@
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Nora Silvester
-                  <span class="float-end text-sm text-warning"><i class="fas fa-star"></i></span>
+                  <span class="float-end fs-7 text-warning"><i class="fas fa-star"></i></span>
                 </h3>
-                <p class="text-sm">The subject goes here</p>
-                <p class="text-sm text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7">The subject goes here</p>
+                <p class="fs-7 text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
               </div>
             </div>
             <!-- Message End -->
@@ -96,17 +96,17 @@
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
             <i class="fas fa-envelope me-2"></i> 4 new messages
-            <span class="float-end text-muted text-sm">3 mins</span>
+            <span class="float-end text-muted fs-7">3 mins</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
             <i class="fas fa-users me-2"></i> 8 friend requests
-            <span class="float-end text-muted text-sm">12 hours</span>
+            <span class="float-end text-muted fs-7">12 hours</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
             <i class="fas fa-file me-2"></i> 3 new reports
-            <span class="float-end text-muted text-sm">2 days</span>
+            <span class="float-end text-muted fs-7">2 days</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>

+ 5 - 3
src/scss/_bootstrap-variables.scss

@@ -451,7 +451,8 @@ $h3-font-size:                $font-size-base * 1.75 !default;
 $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
-$h7-font-size:                $font-size-base * .75 !default; // adminlte-modified
+$h7-font-size:                $font-size-sm !default; // adminlte-modified
+$h8-font-size:                $font-size-xs !default; // adminlte-modified
 // scss-docs-end font-variables
 
 // scss-docs-start font-sizes
@@ -462,8 +463,9 @@ $font-sizes: (
   4: $h4-font-size,
   5: $h5-font-size,
   6: $h6-font-size,
-  7: $h7-font-size
-) !default; // adminlte-modified
+  7: $h7-font-size, // adminlte-modified
+  8: $h8-font-size // adminlte-modified
+) !default;
 // scss-docs-end font-sizes
 
 // scss-docs-start headings-variables

+ 1 - 1
src/scss/_cards.scss

@@ -272,7 +272,7 @@ html.maximized-card {
   }
 }
 
-.text-sm {
+.fs-7 {
   .card-title {
     font-size: $lte-card-title-font-size-sm;
   }

+ 1 - 1
src/scss/_dropdown.scss

@@ -12,7 +12,7 @@
 //  }
 //}
 
-.text-sm {
+.fs-7 {
   .dropdown-menu {
     font-size: $font-size-sm !important;
   }

+ 1 - 1
src/scss/_layout-fixed.scss

@@ -44,7 +44,7 @@
     }
   }
 
-  // .layout-fixed.text-sm .wrapper .sidebar {
+  // .layout-fixed.fs-7 .wrapper .sidebar {
   //   // stylelint-disable-next-line
   //   height: calc(100vh - (#{$lte-main-header-height-sm-inner} + #{$lte-main-header-bottom-border-width}));
   // }

+ 2 - 2
src/scss/_main-footer.scss

@@ -10,8 +10,8 @@
   padding: $lte-main-footer-padding;
   width: inherit;
 
-  // .text-sm &,
-  // &.text-sm {
+  // .fs-7 &,
+  // &.fs-7 {
   //   padding: $lte-main-footer-padding-sm;
   // }
 }

+ 0 - 29
src/scss/_text.scss

@@ -2,35 +2,6 @@
 // Component: Text
 //
 
-// text modification
-.text-bold {
-  &,
-  &.table td,
-  &.table th {
-    font-weight: 700;
-  }
-}
-
-.text-xs {
-  font-size: $font-size-xs !important;
-}
-
-.text-sm {
-  font-size: $font-size-sm !important;
-}
-
-.text-md {
-  font-size: $font-size-base !important;
-}
-
-.text-lg {
-  font-size: $font-size-lg !important;
-}
-
-.text-xl {
-  font-size: $font-size-xl !important;
-}
-
 // text color variations
 @each $name, $color in $colors {
   .text-#{$name} {