@finqu/cool 1.2.27 → 1.2.29

package/scss/_custom-forms.scss

@@ -7,6 +7,11 @@
 }
 
 
+$check-color: theme-color('info');
+$check-border-color: $grey-200;
+$check-border-width: 2px;
+$check-radius: 6px;
+
 // Styled checkbox
 .styled-checkbox {
     line-height: 0;
@@ -28,10 +33,10 @@
                 height: 17px;
                 min-width: 17px;
                 min-height: 17px;
-                border-radius: $border-radius;
+                border-radius: $check-radius;
                 transform: scale(1);
                 vertical-align: middle;
-                border: 1px solid #9098A9;
+                border: $check-border-width solid $check-border-color;
                 transition: all .2s ease;
 
                 svg {
@@ -39,7 +44,7 @@
                     top: 4px;
                     left: 3px;
                     fill: none;
-                    stroke: color('white');
+                    stroke: #ffffff;
                     stroke-width: 2;
                     stroke-linecap: round;
                     stroke-linejoin: round;
@@ -53,11 +58,11 @@
                     content: '';
                     width: 100%;
                     height: 100%;
-                    background: color('blue');
+                    background: $check-color;
                     display: block;
                     transform: scale(0);
                     opacity: 1;
-                    border-radius: 50%;
+                    border-radius: $check-radius;
                 }
             }
 
@@ -71,7 +76,7 @@
         }
 
         &:hover > span:first-child {
-            border-color: color('blue');
+            border-color: $check-color;
         }
     }
 
@@ -82,8 +87,8 @@
     input[type="checkbox"]:checked + label {
         > span {
             &:first-child {
-                background: color('blue');
-                border-color: color('blue');
+                background: $check-color;
+                border-color: $check-color;
                 animation: wave .4s ease;
 
                 svg {
@@ -104,8 +109,8 @@
         > span {
             &:first-child {
                 cursor: not-allowed;
-                background-color: color('grey-lightest');
-                border: 1px solid #9098A9;
+                background-color: theme-color('light');
+                border: $check-border-width solid $check-border-color;
                 opacity: 0.35;
             }
         }
@@ -113,7 +118,7 @@
         &:hover {
             > span {
                 &:first-child {
-                    border: 1px solid #9098A9;
+                    border: $check-border-width solid $check-border-color;
                 }
             }
         }
@@ -145,7 +150,7 @@
                 border-radius: 50%;
                 transform: scale(1);
                 vertical-align: middle;
-                border: 1px solid #9098A9;
+                border: $check-border-width solid $check-border-color;
                 transition: all .2s ease;
 
                 svg {
@@ -153,7 +158,7 @@
                     top: 4px;
                     left: 3px;
                     fill: none;
-                    stroke: color('white');
+                    stroke: #ffffff;
                     stroke-width: 2;
                     stroke-linecap: round;
                     stroke-linejoin: round;
@@ -167,7 +172,7 @@
                     content: '';
                     width: 100%;
                     height: 100%;
-                    background: color('blue');
+                    background: $check-color;
                     display: block;
                     transform: scale(0);
                     opacity: 1;
@@ -185,7 +190,7 @@
         }
 
         &:hover > span:first-child {
-            border-color: color('blue');
+            border-color: $check-color;
         }
     }
 
@@ -196,8 +201,8 @@
     input[type="radio"]:checked + label {
         > span {
             &:first-child {
-                background: color('blue');
-                border-color: color('blue');
+                background: $check-color;
+                border-color: $check-color;
                 animation: wave .4s ease;
 
                 svg {
@@ -218,8 +223,8 @@
         > span {
             &:first-child {
                 cursor: not-allowed;
-                background-color: color('grey-lightest');
-                border: 1px solid #9098A9;
+                background-color: theme-color('light');
+                border: $check-border-width solid $check-border-color;
                 opacity: 0.35;
             }
         }
@@ -227,13 +232,14 @@
         &:hover {
             > span {
                 &:first-child {
-                    border: 1px solid #9098A9;
+                    border: $check-border-width solid $check-border-color;
                 }
             }
         }
     }
 }
 
+$onoffswitch-height: 20px;
 
 // ON/OFF Switch
 .onoffswitch {
@@ -241,7 +247,7 @@
     vertical-align: middle;
     position: relative;
     user-select: none;
-    width: 35px;
+    width: 40px;
     margin: 0 auto;
 
     & + label {
@@ -274,12 +280,12 @@
         width: 100%;
         overflow: hidden;
         cursor: pointer;
-        height: 15px;
+        height: $onoffswitch-height;
         padding: 0;
-        line-height: 15px;
-        border: 2px solid #79868C;
-        border-radius: 15px;
-        background-color: #79868C;
+        line-height: $onoffswitch-height;
+        border: 2px solid $grey-600;
+        border-radius: $onoffswitch-height;
+        background-color: $grey-600;
         margin-bottom: 0;
         box-sizing: content-box;
         transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
@@ -287,28 +293,28 @@
         &:before {
             content: '';
             display: block;
-            width: 15px;
-            height: 15px;
+            width: $onoffswitch-height;
+            height: $onoffswitch-height;
             margin: 0px;
-            background: color('white');
+            background: #ffffff;
             position: absolute;
             top: 0;
             right: 16px;
             bottom: 0;
-            border: 2px solid #79868C;
-            border-radius: 15px;
+            border: 2px solid $grey-600;
+            border-radius: $onoffswitch-height;
             transition: background-color 0.3s ease-in, border-color 0.3s ease-in, right 0.3s ease-in;
             box-sizing: content-box;
         }
     }
 
     .onoffswitch-checkbox:checked + .onoffswitch-label {
-        background-color: color('green');
+        background-color: theme-color('brand');
     }
 
     .onoffswitch-checkbox:checked + .onoffswitch-label,
     .onoffswitch-checkbox:checked + .onoffswitch-label:before {
-       border-color: color('green');
+       border-color: theme-color('brand');
     }
 
     .onoffswitch-checkbox:checked + .onoffswitch-label:before {
@@ -329,11 +335,13 @@
         }
     }
 
-    & > input, select, textarea, label {
+    & > input, select, textarea, label,
+    & > .input-group > label {
         padding: $input-padding-y-lg $input-padding-x-lg;
     }
 
-    & > label {
+    & > label,
+    & > .input-group > label {
         position: absolute;
         top: 0;
         left: 0;
@@ -347,6 +355,9 @@
         transition: all .1s ease-in-out;
         pointer-events: none;
         font-size: $input-font-size-lg;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
     }
 
     input::-webkit-input-placeholder,
@@ -357,6 +368,10 @@
         color: transparent;
     }
 
+    &:not(.label-on-top) .show-when-label-on-top {
+        display: none;
+    }
+
     &.label-on-top {
         input, select, textarea {
             padding-top: calc(#{$input-padding-y-lg} + #{$input-padding-y-lg} * (2 / 3));
@@ -387,7 +402,7 @@
 
 // Fake input
 .fake-input {
-    background: color('grey-lighter');
+    background: $input-bg;
     border: 1px solid $border-color;
     line-height: $input-line-height;
     border-radius: $border-radius;

package/scss/_dialog.scss

@@ -31,7 +31,7 @@
             text-align: left;
             border: none;
             border-radius: $border-radius;
-            background-color: color('white');
+            background-color: #ffffff;
             background-clip: padding-box;
             outline: 0;
             overflow: auto;
@@ -41,15 +41,14 @@
                 display: flex;
                 align-items: flex-start;
                 justify-content: space-between;
-                padding: 12px 16px;
-                border-bottom: 1px solid $border-color;
-                @include media-breakpoint-down(md) {
-                    padding: 10px;
-                }
+                padding: $dialog-padding-y $dialog-padding-x;
+                border-bottom: $dialog-border-width solid $border-color;
 
                 .dialog-title {
                     font-size: 20px;
                     width: 100%;
+                    font-family: $dialog-title-font-family;
+                    font-weight: $dialog-title-font-weight;
                     @include text-truncate;
                 }
 
@@ -58,7 +57,7 @@
                     background-color: transparent;
                     border: 0;
                     opacity: 0.75;
-                    color: color('blue-grey');
+                    color: $body-color;
 
                     &:hover,
                     &:focus {
@@ -71,23 +70,23 @@
             .dialog-body {
                 position: relative;
                 flex: 1 1 auto;
-                padding: 16px;
+                padding: $dialog-padding-y $dialog-padding-x;
                 overflow-y: auto;
 
                 .content-full-width {
-                    margin-left: -16px;
-                    margin-right: -16px;
+                    margin-left: -$dialog-padding-x;
+                    margin-right: -$dialog-padding-x;
                 }
             }
 
             .dialog-footer {
                 display: flex;
                 align-items: center;
-                justify-content: flex-end;
-                padding: 12px 16px;
-                border-top: 1px solid $border-color;
-                @include media-breakpoint-down(md) {
-                    padding: 10px;
+                padding: $dialog-padding-y $dialog-padding-x;
+                border-top: $dialog-border-width solid $border-color;
+
+                .spacer {
+                    flex: 1;
                 }
             }
         }
@@ -135,7 +134,7 @@
     left: 0;
     right: 0;
     opacity: 0;
-    background-color: color('black');
+    background-color: #000000;
     z-index: $zindex-dialog;
     backface-visibility: hidden;
     transition: opacity 0.1s;

package/scss/_dropdown.scss

@@ -45,6 +45,7 @@
     overflow: hidden;
     box-shadow: $dropdown-box-shadow;
     border-radius: $dropdown-border-radius;
+    font-family: $font-family-sans-serif;
 
     // IE11 fix for flexboxes
     @media all and (-ms-high-contrast:none) {
@@ -131,6 +132,7 @@
     border: 0;
     box-sizing: border-box;
     appearance: none;
+    font-family: $font-family-sans-serif;
 
     &:hover,
     &:focus {

package/scss/_forms.scss

@@ -38,6 +38,7 @@ html.dom-ready .form-control {
     &[readonly] {
         background-color: $input-disabled-bg;
         opacity: 1;
+        color: $input-disabled-color;
     }
 }
 
@@ -163,7 +164,7 @@ textarea.form-control {
     margin-left: -$form-check-input-gutter;
 
     &:disabled ~ .form-check-label {
-        color: color('grey-dark')
+        color: theme-color('medium')
     }
 }