Bläddra i källkod

enhanced .text-sm support via body & fixed card-text float error

REJack 5 år sedan
förälder
incheckning
d8904dd346

+ 6 - 1
build/scss/_brand.scss

@@ -16,6 +16,10 @@
     text-decoration: none;
   }
 
+  .text-sm & {
+    font-size: inherit;
+  }
+
   [class*='sidebar-dark'] & {
     border-bottom: 1px solid lighten($dark, 10%);
     color: rgba($white, .8);
@@ -50,7 +54,8 @@
     width: auto;
   }
 
-  &.text-sm {
+  &.text-sm,
+  .text-sm & {
     .brand-image {
       height: 29px;
       margin-bottom: -.25rem;

+ 26 - 5
build/scss/_cards.scss

@@ -93,8 +93,8 @@ html.maximized-card {
 .card-header {
   background-color: transparent;
   border-bottom: 1px solid $card-border-color;
-  position: relative;
   padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
+  position: relative;
 
   @if $enable-rounded {
     @include border-top-radius($border-radius);
@@ -106,7 +106,13 @@ html.maximized-card {
 
   > .card-tools {
     float: right;
-    margin-right: -$card-spacer-x/2;
+    margin-right: -$card-spacer-x / 2;
+
+    .nav,
+    .pagination {
+      margin-bottom: -$card-spacer-y / 2;
+      margin-top: -$card-spacer-y / 2;
+    }
 
     [data-toggle='tooltip'] {
       position: relative;
@@ -121,6 +127,11 @@ html.maximized-card {
   margin: 0;
 }
 
+.card-text {
+  clear: both;
+}
+
+
 // Box Tools Buttons
 .btn-tool {
   background: transparent;
@@ -140,12 +151,22 @@ html.maximized-card {
   }
 }
 
+.text-sm {
+  .card-title {
+    font-size: $card-title-font-size-sm;
+  }
+
+  .nav-link {
+    padding: $card-nav-link-padding-sm-y $card-nav-link-padding-sm-x; 
+  }
+}
+
 // Box Body
 .card-body {
   // @include border-radius-sides(0, 0, $border-radius, $border-radius);
-  .no-header & {
-    // @include border-top-radius($border-radius);
-  }
+  // .no-header & {
+  //   @include border-top-radius($border-radius);
+  // }
 
   // Tables within the box body
   > .table {

+ 43 - 0
build/scss/_layout.scss

@@ -51,6 +51,16 @@ body,
     }
   }
 
+  .layout-navbar-fixed.layout-fixed.text-sm & {
+    .control-sidebar {
+      top: $main-header-height-sm;
+    }
+
+    .sidebar {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
   .layout-navbar-fixed.sidebar-collapse & {
     .brand-link {
       height: $main-header-height;
@@ -62,6 +72,12 @@ body,
     }
   }
 
+  .layout-navbar-fixed.sidebar-collapse.text-sm & {
+    .brand-link {
+      height: $main-header-height-sm;
+    }
+  }
+
   .layout-navbar-fixed & {
     .control-sidebar {
       top: 0;
@@ -117,6 +133,12 @@ body,
     }
   }
 
+  .layout-navbar-fixed.text-sm & {
+    .content-wrapper {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
   .layout-navbar-not-fixed & {
     .brand-link {
       position: static;
@@ -147,6 +169,7 @@ body,
           top: $main-header-height;
         }
 
+        .text-sm & .main-header ~ .control-sidebar,
         .main-header.text-sm ~ .control-sidebar {
           top: $main-header-height-sm;
         }
@@ -155,11 +178,22 @@ body,
           margin-top: $main-header-height;
         }
 
+        .text-sm & .brand-link ~ .sidebar,
         .brand-link.text-sm ~ .sidebar {
           margin-top: $main-header-height-sm;
         }
       }
 
+      .layout#{$infix}-navbar-fixed.layout-fixed.text-sm & {
+        .control-sidebar {
+          top: $main-header-height-sm;
+        }
+
+        .sidebar {
+          margin-top: $main-header-height-sm;
+        }
+      }
+
       .layout#{$infix}-navbar-fixed & {
         .control-sidebar {
           top: 0;
@@ -177,6 +211,7 @@ body,
             transition: width $transition-speed $transition-fn;
             width: $sidebar-mini-width;
 
+            .text-sm &,
             &.text-sm {
               height: $main-header-height-sm;
             }
@@ -214,6 +249,7 @@ body,
           margin-top: $main-header-height;
         }
 
+        .text-sm & .main-header ~ .content-wrapper,
         .main-header.text-sm ~ .content-wrapper {
           margin-top: $main-header-height-sm;
         }
@@ -227,6 +263,12 @@ body,
         }
       }
 
+      .layout#{$infix}-navbar-fixed.text-sm & {
+        .content-wrapper {
+          margin-top: $main-header-height-sm;
+        }
+      }
+
       .layout#{$infix}-navbar-not-fixed & {
         .brand-link {
           position: static;
@@ -439,6 +481,7 @@ body,
   color: lighten($gray-700, 25%);
   padding: $main-footer-padding;
 
+  .text-sm &,
   &.text-sm {
     padding: $main-footer-padding * .812;
   }

+ 1 - 0
build/scss/_main-header.scss

@@ -11,6 +11,7 @@
     position: relative;
   }
 
+  .text-sm &,
   &.text-sm {
     .nav-link {
       height: $nav-link-sm-height;

+ 4 - 0
build/scss/_variables.scss

@@ -136,7 +136,11 @@ $card-border-color: $gray-100 !default;
 $card-dark-border-color: lighten($gray-900, 10%) !default;
 $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
 $card-title-font-size: 1.1rem;
+$card-title-font-size-sm: 1rem;
 $card-title-font-weight: $font-weight-normal;
+$card-nav-link-padding-sm-y: .4rem;
+$card-nav-link-padding-sm-x: .8rem;
+
 
 // PROGRESS BARS
 // --------------------------------------------------------