@finqu/cool 1.1.9 → 1.2.3

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.9",
+  "version": "1.2.3",
   "description": "Finqu UI package",
   "main": "index.js",
   "scripts": {
@@ -40,32 +40,32 @@
   "homepage": "https://finqu.fi",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
-    "@babel/preset-env": "^7.3.1",
-    "autoprefixer": "^9.4.7",
-    "babel-eslint": "^10.0.1",
-    "babel-plugin-istanbul": "^5.1.0",
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "autoprefixer": "^9.7.1",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-istanbul": "^5.2.0",
     "broken-link-checker": "^0.7.8",
-    "bundlesize": "^0.17.1",
-    "clean-css-cli": "^4.2.1",
-    "cross-env": "^5.2.0",
+    "bundlesize": "^0.17.2",
+    "clean-css-cli": "^4.3.0",
+    "cross-env": "^5.2.1",
     "eslint": "^5.13.0",
     "find-unused-sass-variables": "^0.3.2",
-    "glob": "^7.1.3",
-    "jquery": "^3.3.1",
-    "node-sass": "^4.11.0",
-    "nodemon": "^1.18.9",
+    "glob": "^7.1.6",
+    "jquery": "^3.4.1",
+    "node-sass": "^4.13.0",
+    "nodemon": "^1.19.4",
     "npm-run-all": "^4.1.5",
-    "postcss-cli": "^6.1.1",
-    "rollup": "^1.1.2",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
+    "postcss-cli": "^6.1.3",
+    "rollup": "^1.26.3",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-node-resolve": "^4.2.4",
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",
     "terser": "^3.17.0",
-    "uglify-js": "^3.4.9"
+    "uglify-js": "^3.6.8"
   }
 }

package/scss/_alert.scss

@@ -1,118 +1,115 @@
 // Alert
 // ---------------------------------------------------------------------------------------------------------------
 
+.alert-icon {
+    border-radius: 50% 50%;
+    width: 0.9em;
+    height: 0.9em;
+    border: 1px solid theme-color('primary');
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    position: relative;
+    z-index: 2;
+    background: white;
+    box-shadow: 0 0 0 0.2em fade-out(theme-color('primary'), 0.7);
+
+    .icon {
+        font-size: 0.5em;
+        color: theme-color('primary');
+    }
+}
+
+// Alert variants
+@each $color, $value in $theme-colors {
+    .alert-icon-#{$color} {
+        @include alert-icon-variant($value);
+    }
+}
+
 .alert {
     display: flex;
     flex-direction: row;
     position: relative;
-    border-left: 6px solid #fafafa;
-    border-radius: 3px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 2px #cccccc, 0 0 0 1px #eeeeee;
+    border-radius: $border-radius;
+    margin-bottom: $section-spacer;
+    box-shadow: $section-box-shadow;
     width: 100%;
     overflow: hidden;
-    align-items: center;
     box-sizing: border-box;
     position: relative;
+    padding: 0;
+    border-top: 2px solid theme-color('primary');
+    background-color: fade-out(theme-color('primary'), 0.9);
+
     @include media-breakpoint-down(sm) {
-        margin-bottom: 10px;
+        margin-bottom: $section-spacer-mobile;
     }
 
-    &:hover {
-        .alert-selector {
-            color: $link-hover-color;
+    // Icon
+    .alert-icon {
+        width: 28px;
+        height: 28px;
+        margin-top: $section-padding;
+        margin-left: $section-padding;
+        margin-right: $section-padding / 2;
+        margin-bottom: $section-padding;
+        flex-shrink: 0;
+        flex-grow: 0;
+
+        .icon {
+            font-size: 14px;
         }
     }
 
 
-    // Sizes
-    &.alert-sm {
-        & > .alert-content-container {
-            padding: 10px;
-            font-size: 80%;
-        }
-    }
+    // Content
+    .alert-content-container {
+        padding: $section-padding;
+        box-sizing: border-box;
 
-    &.alert-lg {
-        & > .alert-icon {
-            padding-left: 25px;
-            font-size: 22px;
-            &:after {
-                width: 47px;
-            }
+        .alert-content {
         }
 
-        & > .alert-content-container {
-            padding: 25px;
+        .alert-action {
+            margin-top: $section-padding;
         }
     }
 
-
-    // Icon
     .alert-icon {
-        color: $icon-color;
-        padding-left: 15px;
-        margin-left: -6px;
-        z-index: 1;
-        box-sizing: border-box;
-        font-size: 20px;
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            z-index: -1;
-            width: 34px;
-            background: #fafafa;
+        & + .alert-content-container {
+            .alert-content {
+                margin-top: 7px;
+            }
         }
     }
 
-
-    // Content
-    .alert-content-container {
-        display: flex;
-        align-items: center;
-        background: #fafafa;
-        flex: 1;
-        padding: 15px;
-        box-sizing: border-box;
-        @include media-breakpoint-down(sm) {
-            flex-wrap: wrap;
+    &.alert-sm {
+        .alert-icon {
+            width: 18px;
+            height: 18px;
+            margin-top: $section-padding / 2;
+            margin-left: $section-padding / 2;
+            margin-right: $section-padding / 4;
+            margin-bottom: $section-padding / 2;
         }
 
-        .alert-content {
-            flex: 1;
-            @include media-breakpoint-down(sm) {
-                flex: 0 1 auto
-            }
-            & + .alert-action {
-                margin-left: 15px;
-                @include media-breakpoint-down(sm) {
-                    margin-top: 15px;
-                    margin-left: 0;
-                }
+        .alert-content-container {
+            padding: $section-padding / 2;
+
+            .alert-action {
+                margin-top: $section-padding / 2;
             }
         }
-    }
 
-    // Alert selector
-    .alert-selector {
-        text-align: right;
-        margin-right: 15px;
-        width: 30px;
-        font-size: 22px;
-
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            z-index: -1;
-            width: 30px;
-            background: #fafafa;
-            padding-left: 15px;
+        .alert-icon {
+            & + .alert-content-container {
+                .alert-content {
+                    margin-top: 0;
+                }
+            }
         }
     }
 }

package/scss/_badge.scss

@@ -1,35 +1,29 @@
 // Badge
 // ---------------------------------------------------------------------------------------------------------------
-
 .badge {
     display: inline-block;
-    font-size: $badge-font-size;
-    font-weight: $badge-font-weight;
-    padding: $badge-padding-y $badge-padding-x;
-    line-height: $badge-line-height;
-    border-radius: $badge-border-radius;
-    border: none;
+    vertical-align: middle;
+    flex-direction: row;
+    position: relative;
+    border-radius: $border-radius;
+    padding: 0.2em 0.5em;
+    overflow: hidden;
     box-sizing: border-box;
-    margin: 2px;
-    text-align: center;
-    text-decoration: none;
+    position: relative;
+    border: 1px solid theme-color('primary');
+    background-color: fade-out(theme-color('primary'), 0.9);
     touch-action: manipulation;
+    text-decoration: none;
     user-select: none;
-    vertical-align: middle;
     white-space: nowrap;
+    color: theme-color('primary');
 
-    &.badge-xs {
-        font-size: $badge-xs-font-size;
-        font-weight: $badge-xs-font-weight;
-        padding: $badge-xs-padding-y $badge-xs-padding-x;
-        line-height: $badge-xs-line-height;
-    }
+    .alert-icon {
+        margin: -0.1em 0.4em 0 0;
 
-    &.badge-sm {
-        font-size: $badge-sm-font-size;
-        font-weight: $badge-sm-font-weight;
-        padding: $badge-sm-padding-y $badge-sm-padding-x;
-        line-height: $badge-sm-line-height;
+        .icon {
+            color: theme-color('primary');
+        }
     }
 }
 

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

@@ -49,6 +49,7 @@
 
                 .dialog-title {
                     font-size: 20px;
+                    width: 100%;
                     @include text-truncate;
                 }
 
@@ -57,6 +58,7 @@
                     background-color: transparent;
                     border: 0;
                     opacity: 0.75;
+                    color: color('blue-grey');
 
                     &:hover,
                     &:focus {
@@ -71,6 +73,11 @@
                 flex: 1 1 auto;
                 padding: 16px;
                 overflow-y: auto;
+
+                .content-full-width {
+                    margin-left: -16px;
+                    margin-right: -16px;
+                }
             }
 
             .dialog-footer {
@@ -139,11 +146,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/_dropdown.scss

@@ -140,10 +140,7 @@
     &:active {
         color: $dropdown-link-active-color;
         text-decoration: none;
-
-        .icon {
-            color: $dropdown-link-active-bg
-        }
+        @include gradient-bg($dropdown-link-active-bg);
     }
 
     &.disabled,

package/scss/_frame.scss

@@ -94,7 +94,8 @@
 
 		    .content-inner {
 		    	position: relative;
-		    	margin: 10px 0;
+		    	margin: 20px 0;
+		    	overflow: visible;
 
 		    	@include media-breakpoint-up(md) {
 					margin: 20px 0;
@@ -104,7 +105,7 @@
 		    .content-header {
 				position: relative;
 				width: 100%;
-				margin: 10px 0;
+				margin: 20px 0;
 
 				& + .content-inner {
 					margin-top: 0;
@@ -131,6 +132,16 @@
 
 				.content-header-secondary-actions {
 					font-size: 0;
+
+					&.has-content {
+						margin-top: 20px;
+						margin-bottom: 20px;
+
+						@include media-breakpoint-up(md) {
+							margin-top: 10px;
+							margin-bottom: 0;
+						}
+					}
 				}
 			}
 		}
@@ -491,7 +502,7 @@
 	.content-header {
 		position: relative;
 		width: 100%;
-		margin: 10px 0;
+		margin: 20px 0;
 
 		@include media-breakpoint-up(md) {
 			margin: 20px 0;
@@ -518,6 +529,16 @@
 
 		.content-header-secondary-actions {
 			font-size: 0;
+
+			&.has-content {
+				margin-top: 20px;
+				margin-bottom: 20px;
+
+				@include media-breakpoint-up(md) {
+					margin-top: 10px;
+					margin-bottom: 0;
+				}
+			}
 		}
 	}
 }

package/scss/_functions.scss

@@ -111,4 +111,14 @@
 
 	@warn "Unknown `#{$key}` in $theme-colors.";
 	@return null;
+}
+
+// Strip unit
+@function strip-unit($number) {
+
+	@if type-of($number) == 'number' and not unitless($number) {
+		@return $number / ($number * 0 + 1);
+	}
+
+	@return $number;
 }