@finqu/cool 1.2.28 → 1.2.29

package/scss/mixins/_alert-variant.scss

@@ -2,24 +2,19 @@
 // ---------------------------------------------------------------------------------------------------------------
 
 @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);
-
-        .icon {
-            color: $color;
-        }
+        @include alert-icon-variant($color);
     }
 }
 
 @mixin alert-icon-variant($color) {
-    border: 1px solid $color;
-    box-shadow: 0 0 0 0.2em fade-out($color, 0.7);
+    border: $border-width solid $color;
+    background-color: $color;
+    color: color-yiq($color);
 
     .icon {
-        color: $color;
+        color: color-yiq($color);
     }
 }

package/scss/mixins/_badge-variant.scss

@@ -1,12 +1,12 @@
 // Badge variant
 // ---------------------------------------------------------------------------------------------------------------
-@mixin badge-variant($color, $background: mix($color, white, 10%)) {
+@mixin badge-variant($color, $background: $color) {
     border-color: $color;
     background-color: $background;
 	color: color-yiq($background);
 
     .alert-icon {
-        border: 1px solid $color;
+        border: $border-width solid $color;
 		box-shadow: 0 0 0 0.2em fade-out($color, 0.7);
 
         .icon {

package/scss/mixins/_gradients.scss

@@ -5,17 +5,17 @@
 	background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
 }
 
-@mixin gradient-x($start-color: color('grey-darker'), $end-color: color('grey-darkest'), $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: theme-color('medium'), $end-color: theme-color('dark'), $start-percent: 0%, $end-percent: 100%) {
 	background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
 	background-repeat: repeat-x;
 }
 
-@mixin gradient-y($start-color: color('grey-darker'), $end-color: color('grey-darkest'), $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-y($start-color: theme-color('medium'), $end-color: theme-color('dark'), $start-percent: 0%, $end-percent: 100%) {
 	background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
 	background-repeat: repeat-x;
 }
 
-@mixin gradient-directional($start-color: color('grey-darker'), $end-color: color('grey-darkest'), $deg: 45deg) {
+@mixin gradient-directional($start-color: theme-color('medium'), $end-color: theme-color('dark'), $deg: 45deg) {
 	background-image: linear-gradient($deg, $start-color, $end-color);
 	background-repeat: repeat-x;
 }
@@ -30,11 +30,11 @@
 	background-repeat: no-repeat;
 }
 
-@mixin gradient-radial($inner-color: color('grey-darker'), $outer-color: color('grey-darkest')) {
+@mixin gradient-radial($inner-color: theme-color('medium'), $outer-color: theme-color('dark')) {
 	background-image: radial-gradient(circle, $inner-color, $outer-color);
 	background-repeat: no-repeat;
 }
 
-@mixin gradient-striped($color: rgba(color('white'), .15), $angle: 45deg) {
+@mixin gradient-striped($color: rgba(#ffffff, .15), $angle: 45deg) {
 	background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 }

package/scss/utilities/_background.scss

@@ -1,9 +1,9 @@
 // Background
 // ---------------------------------------------------------------------------------------------------------------
 
-@each $color, $value in $colors {
-    @include bg-variant(".bg-#{$color}", $value);
-}
+// @each $color, $value in $colors {
+//     @include bg-variant(".bg-#{$color}", $value);
+// }
 
 @each $color, $value in $theme-colors {
     @include bg-gradient-variant(".bg-gradient-#{$color}", $value);

package/scss/utilities/_borders.scss

@@ -92,11 +92,11 @@
 
 
 // Colors
-@each $color, $value in $colors {
-	.border-#{$color} {
-		border-color: $value !important;
-	}
-}
+// @each $color, $value in $colors {
+// 	.border-#{$color} {
+// 		border-color: $value !important;
+// 	}
+// }
 
 @each $color, $value in $theme-colors {
 	.border-#{$color} {

package/scss/utilities/_placeholder.scss

@@ -18,8 +18,8 @@
 			border-radius: 50%;
 			width: 100px;
 			height: 100px;
-			color: color('grey-darker');
-			background-color: color('grey-lighter');
+			color: theme-color('medium');
+			//background-color: $grey-100;
 			padding: 10px;
 			margin: 0 auto;
 			box-sizing: content-box;
@@ -39,7 +39,9 @@
 
 	.placeholder-title {
 		text-align: center;
-		color: color('blue-grey');
+		color: $body-color;
+		font-family: $font-family-title;
+		font-weight: 600;
 
 		& + .placeholder-description {
 			margin-top: 10px;
@@ -53,8 +55,7 @@
 
 	.placeholder-description {
 		text-align: center;
-		font-weight: $font-weight-light;
-		color: color('grey-darker');
+		color: theme-color('medium');
 
 		.description {
 			margin-bottom: 0;

package/scss/utilities/_text.scss

@@ -69,9 +69,9 @@
 }
 
 // Colors
-@each $color, $value in $colors {
-    @include text-emphasis-variant(".text-#{$color}", $value);
-}
+// @each $color, $value in $colors {
+//     @include text-emphasis-variant(".text-#{$color}", $value);
+// }
 
 @each $color, $value in $theme-colors {
     @include text-emphasis-variant(".text-#{$color}", $value);

package/html/dropdown-test.html

@@ -1,200 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-
-	<head>
-		<meta charset="utf-8">
-	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-
-		<title>Finqu UI</title>
-
-		<link rel="dns-prefetch" href="//cdn.finqu.com">
-	    <link rel="dns-prefetch" href="//fonts.gstatic.com">
-
-	    <meta name="application-name" content="Finqu UI">
-	    <meta name="msapplication-TileColor" content="#212529">
-	    <meta name="msapplication-TileImage" content="https://cdn.finqu.com/sites/public/images/favicons/mstile-144x144.png">
-	    <meta name="theme-color" content="#212529">
-
-	    <link rel="apple-touch-icon" sizes="57x57" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-57x57.png">
-	    <link rel="apple-touch-icon" sizes="60x60" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-60x60.png">
-	    <link rel="apple-touch-icon" sizes="72x72" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-72x72.png">
-	    <link rel="apple-touch-icon" sizes="76x76" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-76x76.png">
-	    <link rel="apple-touch-icon" sizes="114x114" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-114x114.png">
-	    <link rel="apple-touch-icon" sizes="120x120" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-120x120.png">
-	    <link rel="apple-touch-icon" sizes="144x144" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-144x144.png">
-	    <link rel="apple-touch-icon" sizes="152x152" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-152x152.png">
-	    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-180x180.png">
-
-	    <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/favicon-16x16.png" sizes="16x16">
-	    <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/favicon-32x32.png" sizes="32x32">
-	    <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/favicon-96x96.png" sizes="96x96">
-	    <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/android-chrome-192x192.png" sizes="192x192">
-
-		<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i" rel="stylesheet">
-		<link rel="stylesheet" href="../dist/css/cool.css">
-		<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
-	</head>
-
-	<body style="overflow: auto">
-
-		<!-- <div style="height: 2000px;"> -->
-
-			<div class="dropdown-test" style="position: fixed; top: 0; left: 0;">
-
-				<div class="dropdown dropleft">
-
-			        <button class="btn btn-primary" type="button" data-toggle="dropdown">
-			            Dropdown (top/left)
-			        </button>
-
-			        <div class="dropdown-menu dropdown-menu-left">
-
-			            <ul class="dropdown-list">
-
-			            	<li class="dropdown-item">Item 1</li>
-			            	<li class="dropdown-item">Item 2</li>
-			            	<li class="dropdown-item">Item 3</li>
-			            	<li class="dropdown-divider"></li>
-			            	<li class="dropdown-item">Item 4</li>
-			            	<li class="dropdown-item">Item 5</li>
-
-			            </ul>
-
-			        </div>
-
-			    </div>
-
-			</div>
-
-			<div class="dropdown-test" style="position: fixed; top: 0; right: 0;">
-
-				<div class="dropdown dropright">
-
-			        <button class="btn btn-primary" type="button" data-toggle="dropdown">
-			            Dropdown (top/right)
-			        </button>
-
-			        <div class="dropdown-menu dropdown-menu-right">
-
-			            <ul class="dropdown-list">
-
-			            	<li class="dropdown-item">Item 1 asfdkhfakj ahsdfkjgads fjgadsjh</li>
-			            	<li class="dropdown-item">Item 2</li>
-			            	<li class="dropdown-item">Item 3</li>
-			            	<li class="dropdown-divider"></li>
-			            	<li class="dropdown-item">Item 4</li>
-			            	<li class="dropdown-item">Item 5</li>
-
-			            </ul>
-
-			        </div>
-
-			    </div>
-
-			</div>
-
-			<div class="dropdown-test" style="position: fixed; bottom: 0; right: 0;">
-
-				<div class="dropdown">
-
-			        <button class="btn btn-primary" type="button" data-toggle="dropdown">
-			            Dropdown (bottom/right)
-			        </button>
-
-			        <div class="dropdown-menu dropdown-menu-right">
-
-			            <ul class="dropdown-list">
-
-			            	<li class="dropdown-item">Item 1</li>
-			            	<li class="dropdown-item">Item 2</li>
-			            	<li class="dropdown-item">Item 3</li>
-			            	<li class="dropdown-divider"></li>
-			            	<li class="dropdown-item">Item 4</li>
-			            	<li class="dropdown-item">Item 5</li>
-
-			            </ul>
-
-			        </div>
-
-			    </div>
-
-			</div>
-
-			<div class="dropdown-test" style="position: fixed; bottom: 0; left: 0;">
-
-				<div class="dropdown dropdown">
-
-			        <button class="btn btn-primary" type="button" data-toggle="dropdown">
-			            Dropdown (bottom/left)
-			        </button>
-
-			        <div class="dropdown-menu dropdown-menu-left">
-
-			            <ul class="dropdown-list">
-
-			            	<li class="dropdown-item">Item 1</li>
-			            	<li class="dropdown-item">Item 2</li>
-			            	<li class="dropdown-item">Item 3</li>
-			            	<li class="dropdown-divider"></li>
-			            	<li class="dropdown-item">Item 4</li>
-			            	<li class="dropdown-item">Item 5</li>
-
-			            </ul>
-
-			        </div>
-
-			    </div>
-
-			</div>
-
-			<div class="dropdown-test" style="margin-top: 200px; margin-left: 200px;">
-
-				<div class="dropdown dropdown">
-
-			        <button class="btn btn-primary" type="button" data-toggle="dropdown">
-			            Dropdown
-			        </button>
-
-			        <div class="dropdown-menu dropdown-menu-left">
-
-			            <ul class="dropdown-list">
-
-			            	<li class="dropdown-item">Item 1</li>
-			            	<li class="dropdown-item">Item 2</li>
-			            	<li class="dropdown-item">Item 3</li>
-			            	<li class="dropdown-divider"></li>
-			            	<li class="dropdown-item">Item 4</li>
-			            	<li class="dropdown-item">Item 5</li>
-
-			            </ul>
-
-			        </div>
-
-			    </div>
-
-			</div>
-
-		<!-- </div> -->
-
-		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-		<script src="../dist/js/cool.js"></script>
-		<script type="text/javascript">
-
-			Cool.initialize({
-				dropdown: {
-					debug: false,
-					onClose: function() {
-						let placements = ['top', 'left', 'right', 'bottom'];
-						let nextPlacement = placements[placements.indexOf(this.placement) + 1] || 'top';
-						this.placement = nextPlacement;
-					}
-				}
-			});
-
-		</script>
-
-	</body>
-
-</html>