@finqu/cool 1.1.8 → 1.2.0

package/js/src/toast.js

@@ -546,9 +546,9 @@ if (typeof $ !== 'undefined') {
 
     $.fn[NAME].noConflict = () => {
 
-      $.fn[NAME] = JQUERY_NO_CONFLICT
+      $.fn[NAME] = JQUERY_NO_CONFLICT;
 
-      return Toast._jQueryInterface
+      return Toast._jQueryInterface;
     }
 
     $.fn[NAME].defaults = {

package/js/src/tooltip.js

@@ -78,6 +78,11 @@ class Tooltip extends AbstractUIComponent {
             this.close();
         });
 
+        this.$el.on('destroyed'+'.'+NAME, () => {
+
+            this.close();
+        });
+
         $(window).on('resize', debounce(() => {
 
             if (this.$tooltip) {
@@ -550,9 +555,9 @@ if (typeof $ !== 'undefined') {
 
     $.fn[NAME].noConflict = () => {
 
-        $.fn[NAME] = JQUERY_NO_CONFLICT
+        $.fn[NAME] = JQUERY_NO_CONFLICT;
 
-        return Tooltip._jQueryInterface
+        return Tooltip._jQueryInterface;
     }
 
     $.fn[NAME].defaults = {

package/js/src/util/index.js

@@ -105,6 +105,16 @@ const touchEvents = function () {
 	return result;
 };
 
+$.event.special.destroyed = {
+
+	remove: function(obj) {
+
+		if (obj.handler) {
+			obj.handler();
+		}
+	}
+}
+
 export {
 	debounce,
 	touchEvents,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finqu/cool",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "Finqu UI package",
   "main": "index.js",
   "scripts": {

package/scss/_button-group.scss

@@ -115,6 +115,10 @@
     > .btn-group > .btn {
         margin-bottom: 0;
 
+        &.active {
+            z-index: 3;
+        }
+
         input[type="radio"],
         input[type="checkbox"] {
             position: absolute;

package/scss/_buttons.scss

@@ -47,7 +47,7 @@ html.dom-ready .btn {
 }
 
 .btn-secondary {
-    @include button-variant(color('grey-lightest'), lighten(color('blue-grey'), 60%), color('blue-grey'), color('grey-lighter'), lighten(color('blue-grey'), 55%), $body-color);
+    @include button-variant(color('grey-lightest'), lighten(color('blue-grey'), 60%), color('blue-grey'), color('grey-lighter'), lighten(color('blue-grey'), 55%), $body-color, color('grey-lighter'), lighten(color('blue-grey'), 50%));
 }
 
 .btn-outline-primary {
@@ -55,7 +55,7 @@ html.dom-ready .btn {
 }
 
 .btn-outline-secondary {
-    @include button-outline-variant(lighten(color('blue-grey'), 60%), $body-color, color('grey-lightest'), $body-color);
+    @include button-outline-variant(lighten(color('blue-grey'), 60%), $body-color, color('grey-lightest'), $body-color, $body-color, color('grey-lightest'), theme-color('primary'));
 }
 
 
@@ -101,7 +101,7 @@ html.dom-ready .btn {
 
     &:not(.disabled):not([disabled]):not(.disable-hover) {
         background-color: transparent;
-        transition: all 0.5s ease;
+        transition: opacity 0.5s ease, scale 0.5s ease;
 
         &:before {
             position: absolute;

package/scss/_custom-forms.scss

@@ -18,7 +18,7 @@
         user-select: none;
         cursor: pointer;
 
-        span {
+        > span {
             display: inline-block;
             vertical-align: middle;
 
@@ -62,6 +62,7 @@
             }
 
             &.checkbox-label {
+                width: 100%;
                 padding-left: 8px;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -69,7 +70,7 @@
             }
         }
 
-        &:hover span:first-child {
+        &:hover > span:first-child {
             border-color: color('blue');
         }
     }
@@ -79,7 +80,7 @@
     }
 
     input[type="checkbox"]:checked + label {
-        span {
+        > span {
             &:first-child {
                 background: color('blue');
                 border-color: color('blue');
@@ -100,7 +101,7 @@
 
     input[type="checkbox"]:disabled + label,
     input[type="checkbox"].disabled + label {
-        span {
+        > span {
             &:first-child {
                 cursor: not-allowed;
                 background-color: color('grey-lightest');
@@ -110,7 +111,7 @@
         }
 
         &:hover {
-            span {
+            > span {
                 &:first-child {
                     border: 1px solid #9098A9;
                 }
@@ -131,7 +132,7 @@
         user-select: none;
         cursor: pointer;
 
-        span {
+        > span {
             display: inline-block;
             vertical-align: middle;
 
@@ -175,6 +176,7 @@
             }
 
             &.radio-label {
+                width: 100%;
                 padding-left: 8px;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -182,7 +184,7 @@
             }
         }
 
-        &:hover span:first-child {
+        &:hover > span:first-child {
             border-color: color('blue');
         }
     }
@@ -192,7 +194,7 @@
     }
 
     input[type="radio"]:checked + label {
-        span {
+        > span {
             &:first-child {
                 background: color('blue');
                 border-color: color('blue');
@@ -213,7 +215,7 @@
 
     input[type="radio"]:disabled + label,
     input[type="radio"].disabled + label {
-        span {
+        > span {
             &:first-child {
                 cursor: not-allowed;
                 background-color: color('grey-lightest');
@@ -223,7 +225,7 @@
         }
 
         &:hover {
-            span {
+            > span {
                 &:first-child {
                     border: 1px solid #9098A9;
                 }
@@ -276,8 +278,8 @@
         border-radius: 15px;
         background-color: #79868C;
         margin-bottom: 0;
-        transition: all 0.3s ease-in;
         box-sizing: content-box;
+        transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
 
         &:before {
             content: '';
@@ -291,7 +293,7 @@
             bottom: 0;
             border: 2px solid #79868C;
             border-radius: 15px;
-            transition: all 0.3s ease-in 0s;
+            transition: background-color 0.3s ease-in, border-color 0.3s ease-in, right 0.3s ease-in;
             box-sizing: content-box;
         }
     }

package/scss/_dialog.scss

@@ -57,6 +57,7 @@
                     background-color: transparent;
                     border: 0;
                     opacity: 0.75;
+                    color: color('blue-grey');
 
                     &:hover,
                     &:focus {
@@ -71,6 +72,11 @@
                 flex: 1 1 auto;
                 padding: 16px;
                 overflow-y: auto;
+
+                .content-full-width {
+                    margin-left: -16px;
+                    margin-right: -16px;
+                }
             }
 
             .dialog-footer {
@@ -139,11 +145,16 @@
 }
 
 .dialog-overflow-visible {
-    overflow-x: visible;
-    overflow-y: visible;
+    overflow: visible;
 
-    .dialog-body {
-        overflow-x: visible;
-        overflow-y: visible;
+    .dialog-container {
+
+        .dialog-content {
+            overflow: visible;
+
+            .dialog-body {
+                overflow-y: visible;
+            }
+        }
     }
 }

package/scss/_frame.scss

@@ -95,6 +95,7 @@
 		    .content-inner {
 		    	position: relative;
 		    	margin: 10px 0;
+		    	overflow: visible;
 
 		    	@include media-breakpoint-up(md) {
 					margin: 20px 0;

package/scss/_images.scss

@@ -138,8 +138,48 @@ html.dom-ready {
         }
     }
 
-    // 120x120
+    // 90x90
     &.img-lg {
+        width: 90px;
+        height: 90px;
+        min-width: 90px;
+        text-align: center;
+
+        &.img-placeholder {
+            &:before {
+                width: 15px;
+                height: 15px;
+            }
+        }
+
+        &.img-thumbnail {
+            .icon {
+                width: 25px;
+                height: 25px;
+            }
+        }
+
+        .icon {
+            width: 46px;
+            height: 46px;
+            color: $icon-color;
+        }
+
+        img {
+            vertical-align: middle;
+            max-width: 90px;
+            max-height: 90px;
+
+            &.cover {
+                width: 90px;
+                height: 90px;
+                @include object-fit(cover, 50% 50%);
+            }
+        }
+    }
+
+    // 120x120
+    &.img-xl {
     	width: 120px;
         height: 120px;
         min-width: 120px;
@@ -224,6 +264,10 @@ html.dom-ready {
         background-color: #fafafa;
         color: #bbb;
 
+        &.img-inline {
+            display: inline-flex;
+        }
+
         &:before,
         &:after {
             content: '';

package/scss/_input-group.scss

@@ -26,7 +26,8 @@ html.dom-ready {
         margin-bottom: 0;
 
         + .form-control {
-            margin-left: -$input-border-width;
+            // Add extra 0.5px to border rendering bug on chrome
+            margin-left: calc(-#{$input-border-width + 0.5});
         }
     }
 
@@ -80,23 +81,28 @@ html.dom-ready {
     .input-group-dropdown + .btn,
     .input-group-dropdown + .input-group-text,
     .input-group-dropdown + .input-group-dropdown {
-        margin-left: -$input-border-width;
+        // Add extra 0.5px to border rendering bug on chrome
+        margin-left: calc(-#{$input-border-width + 0.5});
     }
 }
 
 .input-group-prepend {
-    margin-right: -$input-border-width;
+    // Add extra 0.5px to border rendering bug on chrome
+    margin-right: calc(-#{$input-border-width + 0.5});
 
     .input-group-text > span {
-        margin-right: $input-border-width;
+        // Add extra 0.5px to border rendering bug on chrome
+        margin-right: calc(#{$input-border-width + 0.5});
     }
 }
 
 .input-group-append {
-    margin-left: -$input-border-width;
+    // Add extra 0.5px to border rendering bug on chrome
+    margin-left: calc(-#{$input-border-width + 0.5});
 
     .input-group-text > span {
-        margin-left: $input-border-width;
+        // Add extra 0.5px to border rendering bug on chrome
+        margin-left: calc(#{$input-border-width + 0.5});
     }
 }
 

package/scss/_mixins.scss

@@ -9,6 +9,7 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
+@import "mixins/visibility";
 
 
 // Components
@@ -18,6 +19,7 @@
 @import "mixins/nav-divider";
 @import "mixins/caret";
 @import "mixins/forms";
+@import "mixins/notification-variant";
 
 
 // Styling

package/scss/_notification.scss

@@ -0,0 +1,13 @@
+// Notification
+// ---------------------------------------------------------------------------------------------------------------
+
+.notification {
+	border-radius: $border-radius;
+	padding: spacer(3);
+}
+
+@each $color, $value in $theme-colors {
+    .notification-#{$color} {
+        @include notification-variant($value);
+    }
+}

package/scss/_reboot.scss

@@ -276,4 +276,8 @@ label {
     display: inline-block;
     font-size: $label-font-size;
     margin-bottom: $label-margin-bottom;
+
+    &[for] {
+        cursor: pointer;
+    }
 }

package/scss/_section.scss

@@ -29,7 +29,7 @@
         margin-bottom: $section-spacer-mobile;
     }
 
-    &:last-child:not([class^="order-"]),
+    &:not([class*="order-"]):last-child,
     &.last-child {
         margin-bottom: 0;
     }
@@ -588,7 +588,7 @@
             padding-top: 0;
         }
 
-        & + .section-collapse.visible:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+        & + .section-collapse.show:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
             padding-top: 0;
         }
 
@@ -645,6 +645,7 @@
 
             .title {
                 display: flex;
+                flex-direction: column;
             }
 
             .actions {
@@ -682,9 +683,20 @@
         }
 
         &.section-collapse {
+            position: relative;
             transition: padding .35s ease, margin .35s ease;
 
-            &:not(.visible) {
+            .collapse {
+                left: $section-padding;
+                right: $section-padding;
+
+                &.show {
+                    left: auto;
+                    right: auto;
+                }
+            }
+
+            &:not(.show) {
                 margin-top: 0;
                 padding-top: 0;
                 padding-bottom: 0;

package/scss/_select.scss

@@ -11,7 +11,16 @@
     height: $input-height;
     vertical-align: top;
     border-radius: $select-border-radius;
-    -webkit-font-smoothing: subpixel-antialiased;
+
+    &.form-control {
+        border: 0;
+        padding: 0;
+    }
+
+    svg,
+    .icon {
+        pointer-events: none;
+    }
 
     .select {
         position: absolute;

package/scss/_tables.scss

@@ -21,7 +21,8 @@
     .col-img-xs       { width: 24px; }
     .col-img-sm       { width: 32px; }
     .col-img-md       { width: 50px; }
-    .col-img-lg       { width: 120px; }
+    .col-img-lg       { width: 90px; }
+    .col-img-xl       { width: 120px; }
     .col-select       { width: 45px; }
 
     thead,

package/scss/_utilities.scss

@@ -18,4 +18,5 @@
 @import "utilities/sizing";
 @import "utilities/spacing";
 @import "utilities/text";
-@import "utilities/collapse";
+@import "utilities/collapse";
+@import "utilities/visibility";

package/scss/_variables.scss

@@ -392,7 +392,7 @@ $input-bg:                                   color('white') !default;
 $input-disabled-bg:                          color('grey-lighter') !default;
 
 $input-color:                                $body-color !default;
-$input-border-color:                        $border-color !default;
+$input-border-color:                         $border-color !default;
 $input-border-width:                         $input-btn-border-width !default;
 
 $input-border-radius:                        $border-radius !default;
@@ -517,7 +517,7 @@ $table-accent-bg:                            color('grey-lighter') !default;
 $table-link-color:                           $link-color !default;
 $table-link-hover-color:                     $link-hover-color !default;
 
-$table-head-bg:                              transparent !default;
+$table-head-bg:                              color('grey-lightest') !default;
 $table-head-color:                           color('grey-darker') !default;
 
 $table-icon-color:                           color('grey-darker') !default;

package/scss/cool.scss

@@ -33,4 +33,5 @@
 @import "utilities";
 @import "select";
 @import "toast";
-@import "list-group";
+@import "list-group";
+@import "notification";

package/scss/mixins/_notification-variant.scss

@@ -0,0 +1,7 @@
+// Notification
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin notification-variant($color) {
+	background: transparentize($color, 0.95);
+	border: 1px solid $color;
+}

package/scss/mixins/_visibility.scss

@@ -0,0 +1,7 @@
+// Visiblity
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin invisible($visibility) {
+
+	visibility: $visibility !important;
+}

package/scss/utilities/_collapse.scss

@@ -4,7 +4,7 @@
 [data-collapse-indicator] {
     display: inline-block;
 
-    &.visible {
+    &.show {
         > .icon {
             transform: rotate(180deg);
         }
@@ -16,7 +16,7 @@
     visibility: hidden;
     transition: height .35s ease;
 
-    &.visible {
+    &.show {
         position: relative;
         visibility: visible;
         transition: height .35s ease;

package/scss/utilities/_cursor.scss

@@ -7,4 +7,16 @@
 
 .c-pointer {
 	cursor: pointer;
+}
+
+.c-sortable {
+	cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABF0lEQ…%2BX%2BvObByYdEkFh8%2F6qXFrrfeocIk8x2VrNl9A%2F0l7Ib3y%2F5wAAAAAElFTkSuQmCC),move;
+    cursor: -webkit-grab;
+    cursor: grab;
+}
+
+.c-sortable-chosen {
+	cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA8ElEQ…MaIrswx%2FYOXKRSUsXsh8s3Y91rlQK%2FF8IiOx%2B3vxAooqZGlRhljTAAAAAElFTkSuQmCC),move;
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
 }

package/scss/utilities/_visibility.scss

@@ -0,0 +1,10 @@
+// Visiblity
+// ---------------------------------------------------------------------------------------------------------------
+
+.visible {
+	visibility: visible !important;
+}
+
+.invisible {
+	visibility: hidden !important;
+}