@finqu/cool 1.2.0 → 1.2.3

package/scss/_frame.scss

@@ -94,7 +94,7 @@
 
 		    .content-inner {
 		    	position: relative;
-		    	margin: 10px 0;
+		    	margin: 20px 0;
 		    	overflow: visible;
 
 		    	@include media-breakpoint-up(md) {
@@ -105,7 +105,7 @@
 		    .content-header {
 				position: relative;
 				width: 100%;
-				margin: 10px 0;
+				margin: 20px 0;
 
 				& + .content-inner {
 					margin-top: 0;
@@ -132,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;
+						}
+					}
 				}
 			}
 		}
@@ -492,7 +502,7 @@
 	.content-header {
 		position: relative;
 		width: 100%;
-		margin: 10px 0;
+		margin: 20px 0;
 
 		@include media-breakpoint-up(md) {
 			margin: 20px 0;
@@ -519,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;
 }

package/scss/_images.scss

@@ -281,6 +281,8 @@ html.dom-ready {
             opacity: 1;
             vertical-align: middle;
             transition: opacity 0.4s;
+            width: 30px;
+            height: 30px;
         }
 
         &.has-icon {
@@ -314,6 +316,11 @@ html.dom-ready {
     }
 }
 
+// Showcase
+.img-showcase {
+    box-shadow: 0 10px 20px -15px hsla(0, 0%, 25%, 1);
+    border-radius: 5px;
+}
 
 // Image fluid
 .img-fluid {
@@ -324,7 +331,6 @@ html.dom-ready {
     height: auto;
 }
 
-
 // Image Circle
 .img-circle {
 	border-radius: 50%;

package/scss/_navbar.scss

@@ -210,10 +210,50 @@ html.dom-ready {
 			.img-bordered {
 				border-color: $navbar-color;
 			}
+
+			&.pulse {
+			    position: relative;
+
+			    &:after {
+			        content: " ";
+			        position: absolute;
+			        top: calc(50% - #{$navbar-item-icon-size / 2});
+			        left: calc(50% - #{$navbar-item-icon-size / 2});
+			        display: block;
+			        width: $navbar-item-icon-size;
+			        height: $navbar-item-icon-size;
+			        border-radius: 50%;
+			        cursor: pointer;
+			        box-shadow: 0 0 0 rgba($navbar-pulse-shadow-color, 0.4);
+			        animation: navbar-item-pulse 2s 10;
+			    }
+
+			    &:hover {
+			        animation: none;
+			    }
+			}
+
+			.pulse:hover {
+			    animation: none;
+				}
 		}
 
 		.nav-dropdown {
 			height: 100%;
 		}
 	}
+}
+
+@keyframes navbar-item-pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba($navbar-pulse-shadow-color, 0.4);
+    }
+
+    70% {
+        box-shadow: 0 0 0 10px rgba($navbar-pulse-shadow-color, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba($navbar-pulse-shadow-color, 0);
+    }
 }

package/scss/_section.scss

@@ -44,6 +44,15 @@
         }
     }
 
+    // Hover
+    &.section-hover {
+        transition: box-shadow 0.1s linear;
+
+        &:hover {
+            box-shadow: $section-hover-box-shadow;
+        }
+    }
+
     // Guide
     &.section-guide {
         &:not(.show-more) {
@@ -685,6 +694,11 @@
         &.section-collapse {
             position: relative;
             transition: padding .35s ease, margin .35s ease;
+            overflow: hidden;
+
+            &.show {
+                overflow: visible;
+            }
 
             .collapse {
                 left: $section-padding;

package/scss/_type.scss

@@ -11,16 +11,40 @@ h1, h2, h3, h4, h5, h6,
     color: $headings-color;
 }
 
-h1, .h1 { font-size: $h1-font-size; }
-h2, .h2 { font-size: $h2-font-size; }
-h3, .h3 { font-size: $h3-font-size; }
-h4, .h4 { font-size: $h4-font-size; }
-h5, .h5 { font-size: $h5-font-size; }
-h6, .h6 { font-size: $h6-font-size; }
+h1, .h1 {
+    font-size: $h1-font-size;
+    @include text-truncate-generate($font-size: $h1-font-size, $line-height: $headings-line-height);
+}
+
+h2, .h2 {
+    font-size: $h2-font-size;
+    @include text-truncate-generate($font-size: $h2-font-size, $line-height: $headings-line-height);
+}
+
+h3, .h3 {
+    font-size: $h3-font-size;
+    @include text-truncate-generate($font-size: $h3-font-size, $line-height: $headings-line-height);
+}
+
+h4, .h4 {
+    font-size: $h4-font-size;
+    @include text-truncate-generate($font-size: $h4-font-size, $line-height: $headings-line-height);
+}
+
+h5, .h5 {
+    font-size: $h5-font-size;
+    @include text-truncate-generate($font-size: $h5-font-size, $line-height: $headings-line-height);
+}
+
+h6, .h6 {
+    font-size: $h6-font-size;
+    @include text-truncate-generate($font-size: $h6-font-size, $line-height: $headings-line-height);
+}
 
 .lead {
     font-size: $lead-font-size;
     font-weight: $lead-font-weight;
+    @include text-truncate-generate($font-size: $lead-font-size);
 }
 
 
@@ -29,21 +53,28 @@ h6, .h6 { font-size: $h6-font-size; }
     font-size: $display1-size;
     font-weight: $display1-weight;
     line-height: $display-line-height;
+    @include text-truncate-generate($font-size: $display1-size, $line-height: $display-line-height);
 }
+
 .display-2 {
     font-size: $display2-size;
     font-weight: $display2-weight;
     line-height: $display-line-height;
+    @include text-truncate-generate($font-size: $display2-size, $line-height: $display-line-height);
 }
+
 .display-3 {
     font-size: $display3-size;
     font-weight: $display3-weight;
     line-height: $display-line-height;
+    @include text-truncate-generate($font-size: $display3-size, $line-height: $display-line-height);
 }
+
 .display-4 {
     font-size: $display4-size;
     font-weight: $display4-weight;
     line-height: $display-line-height;
+    @include text-truncate-generate($font-size: $display4-size, $line-height: $display-line-height);
 }
 
 

package/scss/_variables.scss

@@ -195,7 +195,7 @@ $navbar-item-min-width:                      45px;
 $navbar-item-padding-x:                      8px;
 $navbar-item-font-size:                      14px;
 $navbar-item-icon-size:                      20px;
-
+$navbar-pulse-shadow-color: 				 lighten($navbar-color, 10%);
 
 // Frame
 $frame-enable:                               true !default;
@@ -291,7 +291,7 @@ $display3-weight:                            300 !default;
 $display4-weight:                            300 !default;
 $display-line-height:                        $headings-line-height !default;
 
-$lead-font-size:                             calc(#{$font-size-base * 1.25}) !default;
+$lead-font-size:                             $font-size-base * 1.25 !default;
 $lead-font-weight:                           300 !default;
 
 $small-font-size:                            80% !default;
@@ -593,7 +593,7 @@ $dropdown-link-hover-color:                  darken(color('grey-darkest'), 5%) !
 $dropdown-link-hover-bg:                     color('grey-lightest') !default;
 
 $dropdown-link-active-color:                 color('grey-darkest') !default;
-$dropdown-link-active-bg:                    color('blue') !default;
+$dropdown-link-active-bg:                    color('blue-light') !default;
 
 $dropdown-link-disabled-color:               color('grey-darker') !default;
 
@@ -634,6 +634,7 @@ $section-padding:                            spacer(3) !default;
 $section-bg:                                 color('white') !default;
 $section-color:                              $body-color !default;
 $section-box-shadow:                         0 1px 2px #cccccc, 0 0 0 1px #eeeeee !default;
+$section-hover-box-shadow:                   0 1px 4px #cccccc, 0 0 0 1px #dddddd !default;
 $section-divider-color:                      color('grey-light') !default;
 
 $section-header-font-family:                 $font-family-base !default;

package/scss/cool-grid.scss

@@ -1,5 +1,5 @@
 /*!
- * Cool UI - Grid v1.0.0 (https://finqu.fi)
+ * Cool UI - Grid v1.2.3 (https://finqu.fi)
  * Copyright 2019 Finqu Oy.
  * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
  * Forked from Bootstrap, licensed MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

package/scss/cool-reboot.scss

@@ -1,5 +1,5 @@
 /*!
- * Cool UI - Reboot v1.0.0 (https://finqu.fi)
+ * Cool UI - Reboot v1.2.3 (https://finqu.fi)
  * Copyright 2019 Finqu Oy.
  * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
  * Forked from Bootstrap, licensed MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

package/scss/cool.scss

@@ -1,5 +1,5 @@
 /*!
- * Cool UI v1.0.0 (https://finqu.fi)
+ * Cool UI v1.2.3 (https://finqu.fi)
  * Copyright 2019 Finqu Oy.
  * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
  * Forked from Bootstrap, licensed MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

package/scss/mixins/_alert-variant.scss

@@ -2,39 +2,24 @@
 // ---------------------------------------------------------------------------------------------------------------
 
 @mixin alert-variant($color) {
+    border-top-color: $color;
+    background-color: fade-out($color, 0.9);
 
-	border-color: $color;
+    .alert-icon {
+        border: 1px solid $color;
+        box-shadow: 0 0 0 0.2em fade-out($color, 0.7);
 
-    & > .alert-content-container > .alert-content > strong {
-        color: $color;
-    }
-
-    &:not(.alert-fill-bg) > .alert-icon {
-        padding: 0 15px;
-        width: 55px;
-        color: color-yiq($color);
-
-        &:after {
-            width: 49px;
-            background-color: $color;
+        .icon {
+            color: $color;
         }
     }
+}
 
-    &.alert-fill-bg {
-        & > .alert-icon {
-            color: color-yiq($color);
-            &:after {
-                background-color: $color;
-            }
-        }
-
-        & > .alert-content-container {
-            background-color: $color;
-            color: color-yiq($color);
+@mixin alert-icon-variant($color) {
+    border: 1px solid $color;
+    box-shadow: 0 0 0 0.2em fade-out($color, 0.7);
 
-            & > .alert-content > strong {
-                color: color-yiq($color);
-            }
-        }
+    .icon {
+        color: $color;
     }
 }

package/scss/mixins/_badge-variant.scss

@@ -1,14 +1,36 @@
 // Badge variant
 // ---------------------------------------------------------------------------------------------------------------
+@mixin badge-variant($color, $background: mix($color, white, 10%)) {
+    border-color: $color;
+    background-color: $background;
+	color: color-yiq($background);
 
-@mixin badge-variant($color) {
+    .alert-icon {
+        border: 1px solid $color;
+		box-shadow: 0 0 0 0.2em fade-out($color, 0.7);
 
-	background: $color;
-    color: color-yiq($color);
-    border: 1px solid $color;
+        .icon {
+            color: $color;
+        }
+    }
 }
 
 @mixin badge-outline-variant($color) {
+	border-color: $color;
+	background: transparent;
 
-	border: 1px solid $color;
+	@if lightness($color) > 80 {
+		color: $grey-500;
+	} @else {
+		color: $color;
+	}
+
+	.alert-icon {
+        border: 1px solid $color;
+		box-shadow: 0 0 0 0.2em fade-out($color, 0.7);
+
+        .icon {
+            color: $color;
+        }
+    }
 }

package/scss/mixins/_text-truncate.scss

@@ -1,8 +1,81 @@
 // Text truncate
 // ---------------------------------------------------------------------------------------------------------------
 
-@mixin text-truncate {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+@mixin text-truncate-adjust($lines: 1, $font-size: $font-size-base, $line-height: $line-height-base, $fixed-height: false) {
+
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: $lines;
+
+    @if $fixed-height {
+		height: floor($font-size * $line-height) * $lines;
+    }
+
+    &.text-truncate-fixed {
+    	height: floor($font-size * $line-height) * $lines;
+    }
+
+	&:after {
+		width: floor($font-size * $line-height) * 4;
+		height: floor($font-size * $line-height);
+	}
+
+	& small,
+    &.small {
+
+    	@if $fixed-height {
+			height: floor($font-size * strip-unit($small-font-size) / 100 * $line-height) * $lines;
+	    }
+
+	    &.text-truncate-fixed {
+	    	height: floor($font-size * strip-unit($small-font-size) / 100 * $line-height) * $lines;
+	    }
+
+		&:after {
+			width: floor($font-size * strip-unit($small-font-size) / 100 * $line-height) * 4;
+			height: floor($font-size * strip-unit($small-font-size) / 100 * $line-height);
+		}
+    }
+}
+
+@mixin text-truncate-generate($font-size: $font-size-base, $line-height: $line-height-base, $fixed-height: false) {
+
+	& {
+		@include text-truncate-adjust(1);
+
+		&.text-truncate-lines-2 {
+	        @include text-truncate-adjust(2);
+	    }
+
+	    &.text-truncate-lines-3 {
+	        @include text-truncate-adjust(3);
+	    }
+
+	    &.text-truncate-lines-4 {
+	        @include text-truncate-adjust(4);
+	    }
+
+	    &.text-truncate-lines-5 {
+	        @include text-truncate-adjust(5);
+	    }
+	}
+}
+
+@mixin text-truncate($font-size: $font-size-base, $line-height: $line-height-base, $fixed-height: false) {
+
+	display: -webkit-box !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    position: relative !important;
+
+    &:after {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        content: '';
+        max-height: 100%;
+        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
+        pointer-events: none;
+    }
+
+    @include text-truncate-generate($font-size, $line-height, $fixed-height);
 }

package/scss/utilities/_cursor.scss

@@ -2,11 +2,11 @@
 // ---------------------------------------------------------------------------------------------------------------
 
 .c-default {
-	cursor: default;
+	cursor: default !important;
 }
 
 .c-pointer {
-	cursor: pointer;
+	cursor: pointer !important;
 }
 
 .c-sortable {

package/scss/utilities/_text.scss

@@ -42,7 +42,6 @@
     }
 }
 
-
 // Transform
 .text-lowercase {
     text-transform: lowercase !important;
@@ -60,7 +59,6 @@
     text-transform: none !important;
 }
 
-
 // Decoration
 .text-underline {
     text-decoration: underline !important;
@@ -79,6 +77,10 @@
     @include text-emphasis-variant(".text-#{$color}", $value);
 }
 
+// Truncate
+.text-truncate {
+    @include text-truncate();
+}
 
 // Misc
 .text-hide {