@finqu/cool 1.2.27 → 1.2.29

package/scss/_tables.scss

@@ -61,32 +61,41 @@
         th {
             display: table-cell;
             vertical-align: middle;
-            line-height: 18px;
-            background-color: transparent;
-            border-bottom: 1px solid $table-border-color;
+            font-family: $table-th-font-family;
+            line-height: $table-th-line-height;
+            background-color: $table-th-bg;
+            border-bottom: $border-width solid $table-border-color;
             color: $table-head-color;
-            font-size: 12px;
-            font-weight: 400;
-            padding: 12px 15px;
+            font-size: $table-th-font-size;
+            font-weight: $table-th-font-weight;
+            padding: $table-th-padding-mobile;
             word-break: normal;
             box-sizing: content-box;
+
+            @include media-breakpoint-up(sm) {
+                padding: $table-th-padding;
+            }
         }
 
         .td,
         td {
             display: table-cell;
             vertical-align: middle;
-            line-height: 18px;
+            line-height: $table-td-line-height;
             background: $table-bg;
-            border-top: 1px solid $table-border-color;
+            border-top: $border-width solid $table-border-color;
             color: $table-color;
-            padding: 15px 15px;
+            padding: $table-td-padding-mobile;
             box-sizing: content-box;
 
             @include media-breakpoint-down(sm) {
                 word-break: break-word;
             }
 
+            @include media-breakpoint-up(sm) {
+                padding: $table-td-padding;
+            }
+
             .span {
                 vertical-align: middle;
             }
@@ -192,9 +201,9 @@
 .table-bordered {
     .td,
     td {
-        border-left: 1px solid $table-border-color;
+        border-left: $border-width solid $table-border-color;
         &:last-child {
-            border-right: 1px solid $table-border-color;
+            border-right: $border-width solid $table-border-color;
         }
     }
 }
@@ -217,13 +226,13 @@
 // Sortable
 .table-sortable {
     li {
-        margin-top: -1px;
+        margin-top: -$border-width;
         cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABF0lEQ…%2BX%2BvObByYdEkFh8%2F6qXFrrfeocIk8x2VrNl9A%2F0l7Ib3y%2F5wAAAAAElFTkSuQmCC),move;
         cursor: -webkit-grab;
         cursor: grab;
 
         &.root {
-            margin-top: 1px;
+            margin-top: $border-width;
         }
 
         &.ui-sortable-helper,
@@ -237,7 +246,7 @@
         &.ui-state-highlight {
             height: 75px;
             width: 100%;
-            background: color('grey-lighter');
+            background: $grey-100;
             border-radius: $border-radius;
         }
     }
@@ -271,9 +280,9 @@
             position: relative;
             display: table;
             width: 100%;
-            outline: 1px solid $table-border-color;
-            outline-offset: -1px;
-            background-color: color('white');
+            outline: $border-width solid $table-border-color;
+            outline-offset: -$border-width;
+            background-color: #ffffff;
 
             > tr,
             > .tr {
@@ -335,12 +344,12 @@
         &:first-child {
             .td,
             td {
-                padding-top: 10px;
+                padding: $table-th-padding-sm;
             }
         }
         .td,
         td {
-            padding: 5px 15px;
+            padding: $table-td-padding-sm;
         }
     }
 }
@@ -391,7 +400,7 @@
 
                 &:hover {
                     background: color('blue');
-                    color: color('white');
+                    color: #ffffff;
 
                     .dropdown-menu {
                         display: block;
@@ -400,7 +409,7 @@
 
                 .dropdown-menu {
                     background: $section-bg;
-                    border: 1px solid $border-color;
+                    border: $border-width solid $border-color;
                     box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
                     clear: left;
                     display: none;
@@ -441,7 +450,7 @@
         .bulk-actions-header {
             display: block;
             z-index: 1002;
-            border-bottom: 1px solid $table-border-color;
+            border-bottom: $border-width solid $table-border-color;
 
             .input-group-sm {
                 .bulk-actions-count {
@@ -461,6 +470,7 @@
         background: $table-bg;
         box-sizing: border-box;
         left: 0;
+        font-family: $font-family-sans-serif;
 
         .input-group-dropdown {
             border: $input-border-width solid $input-group-addon-border-color;
@@ -536,7 +546,7 @@
 
 // Responsive
 .table-responsive {
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(sm) {
         overflow: hidden;
         table-layout: auto;
 
@@ -591,16 +601,17 @@
             > tr {
                 display: block;
                 margin-bottom: 15px;
-                box-sizing: border-box;;
+                box-sizing: border-box;
                 margin-top: 0;
-                border-right: 1px solid $table-border-color;
-                border-bottom: 1px solid $table-border-color;
-                border-left: 1px solid $table-border-color;
+                border-right: $border-width solid $table-border-color;
+                border-bottom: $border-width solid $table-border-color;
+                border-left: $border-width solid $table-border-color;
+                border-radius: $border-radius;
 
                 &:first-child {
                     > .td,
                     > td {
-                        border-top: 1px solid $table-border-color;
+                        border-top: $border-width solid $table-border-color;
                         border-left: none;
                         border-right: none;
                         border-bottom: none;
@@ -616,7 +627,7 @@
                     display: flex;
                     text-align: left !important;
                     min-height: 0;
-                    border-top: 1px solid $table-border-color;
+                    border-top: $border-width solid $table-border-color;
                     border-left: none;
                     border-right: none;
                     border-bottom: none;
@@ -628,6 +639,7 @@
                     align-items: center;
                     font-size: 85%;
                     line-height: 16px;
+                    border-radius: 0 0 $border-radius $border-radius;
 
                     [type="checkbox"]:not(.onoffswitch-checkbox) {
                         margin: 0 auto 0 0;
@@ -655,15 +667,11 @@
                         padding: 0;
                     }
 
-                    &.no-wrap-mobile {
-                        display: flex !important;
-                        flex-wrap: nowrap;
-                    }
-
                     &:first-of-type:not(.d-none),
                     &:first-of-type:not(.d-sm-none),
                     &:first-of-type:not(.d-md-none) {
-                        background: darken($section-bg, 5%);
+                        background: $grey-50;
+                        border-radius: $border-radius $border-radius 0 0;
                     }
 
                     &:first-of-type.d-none + td:not(.default-bg-mobile),
@@ -672,7 +680,8 @@
                     &:first-of-type.d-sm-none + .td:not(.default-bg-mobile),
                     &:first-of-type.d-md-none + td:not(.default-bg-mobile),
                     &:first-of-type.d-md-none + .td:not(.default-bg-mobile) {
-                        background: darken($section-bg, 5%);
+                        background: $grey-50;
+                        border-radius: $border-radius $border-radius 0 0;
                     }
 
                     &.has-bg-mobile {
@@ -709,6 +718,16 @@
                     p {
                         width: 100%;
                     }
+
+                    &.no-wrap-mobile {
+                        display: flex !important;
+                        flex-wrap: nowrap;
+
+                        .heading:not(.d-none):not(.d-sm-none):not(.d-md-none),
+                        &[data-heading]:not(.col-select):before {
+                            width: 50%;
+                        }
+                    }
                 }
             }
         }

package/scss/_tabs.scss

@@ -3,13 +3,11 @@
 
 .tabs {
     margin: 0 0 20px 0;
-    padding: 16px;
+    padding: $section-padding 0;
     width: 100%;
     box-sizing: border-box;
     font-size: 0;
     display: flex;
-    box-shadow: 0 1px 2px #cccccc, 0 0 0 1px #eeeeee;
-    background-color: color('white');
     align-items: flex-end;
     border-radius: $border-radius;
 
@@ -19,34 +17,28 @@
         display: inline-block;
         list-style: none;
         user-select: none;
-        font-size: $font-size-base;
-        margin: 0;
+        font-size: $font-size-lg;
+        margin: 0 spacer(2) 0 0;
         text-align: center;
-        border-bottom: 1px solid $border-color;
-        background: color('white');
         overflow: hidden;
-        flex-grow: 1;
+        flex-grow: 0;
 
         &:hover {
             > span,
             > a {
-                color: color('grey-darkest');
-                border-color: color('grey-dark');
+                color: theme-color('dark');
+                border-color: theme-color('dark');
             }
         }
 
         &.active {
             > span,
             > a {
-                color: color('grey-darkest');
-                border-color: color('blue');
+                color: theme-color('primary');
+                border-color: theme-color('primary');
             }
         }
 
-        &:not(:last-child) {
-            margin-right: -1px;
-        }
-
         > a,
         > span {
             color: $tabs-text-color;
@@ -57,15 +49,21 @@
             box-sizing: border-box;
             overflow: hidden;
             text-overflow: ellipsis;
-            color: color('grey-darker');
-            border-bottom: 3px solid transparent;
-            padding: 10px 16px 7px 16px;
+            color: theme-color('medium');
+            padding: 0 0 spacer(2) 0;
+            font-family: $font-family-title;
+            font-weight: 600;
+
+            @include media-breakpoint-up(md) {
+                border-bottom: 3px solid transparent;
+            }
         }
     }
 }
 
 .tab-toggler {
     display: none;
+
     @include media-breakpoint-down(sm) {
         display: block;
     }
@@ -91,6 +89,11 @@
 
 @include media-breakpoint-down(sm) {
 
+    .tabs-container {
+        margin-left: -5px;
+        margin-right: -5px;
+    }
+
     .tabs {
         display: flex;
         flex-direction: row;
@@ -106,21 +109,21 @@
         box-sizing: border-box;
         margin-bottom: 10px;
 
-        span {
-            height: 40px;
-        }
-
         > li,
         > div {
             display: none;
             flex: 1 0 100%;
             border-radius: $border-radius;
             border: 0;
-            height: 40px;
             text-align: center;
             max-width: 100%;
             text-align: left;
 
+            > a,
+            > span {
+                padding: 10px;
+            }
+
             &.active {
                 display: block;
                 overflow: hidden;
@@ -129,7 +132,7 @@
             }
 
             &:hover:not(.active) {
-                background-color: color('grey-lightest');
+                background-color: theme-color('light');
                 > a {
                     border-color: transparent;
                 }
@@ -155,7 +158,7 @@
 
         .icon {
             margin-right: 15px;
-            color: color('grey-darkest');
+            color: theme-color('dark');
         }
     }
 

package/scss/_type.scss

@@ -82,7 +82,6 @@ h6, .h6 {
 small,
 .small {
     font-size: $small-font-size;
-    font-weight: $font-weight-normal;
 }
 
 .font-weight-light {
@@ -105,6 +104,15 @@ small,
     font-weight: $font-weight-bolder;
 }
 
+.sub-heading {
+    font-family: $section-subheader-font-family;
+    font-size: $section-subheader-font-size;
+    font-weight: $section-subheader-font-weight;
+    color: $section-subheader-color;
+    background: $section-subheader-bg;
+    border-radius: $border-radius;
+    padding: $section-padding * 1.5 0 $section-padding / 1.5 0;
+}
 
 // Hr
 hr {