@finqu/cool 1.0.0

package/scss/cool-grid.scss

@@ -0,0 +1,29 @@
+/*!
+ * Cool UI - Grid v1.0.0 (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)
+ */
+
+html {
+	box-sizing: border-box;
+	-ms-overflow-style: scrollbar;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+@import "functions";
+@import "variables";
+
+@import "mixins/breakpoints";
+@import "mixins/grid-framework";
+@import "mixins/grid";
+
+@import "grid";
+@import "utilities/display";
+@import "utilities/flex";
+@import "utilities/spacing";

package/scss/cool-reboot.scss

@@ -0,0 +1,11 @@
+/*!
+ * Cool UI - Reboot v1.0.0 (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)
+ */
+
+@import "functions";
+@import "variables";
+@import "mixins";
+@import "reboot";

package/scss/cool.scss

@@ -0,0 +1,36 @@
+/*!
+ * Cool UI v1.0.0 (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)
+ */
+
+@import "functions";
+@import "variables";
+@import "mixins";
+@import "root";
+@import "reboot";
+@import "frame";
+@import "navbar";
+@import "type";
+@import "images";
+@import "grid";
+@import "button-group";
+@import "input-group";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "dropdown";
+@import "custom-forms";
+@import "tabs";
+@import "pagination";
+@import "badge";
+@import "alert";
+@import "tooltip";
+@import "popover";
+@import "dialog";
+@import "section";
+@import "utilities";
+@import "select";
+@import "toast";
+@import "list-group";

package/scss/mixins/_alert-variant.scss

@@ -0,0 +1,40 @@
+// Alert variant
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin alert-variant($color) {
+
+	border-color: $color;
+
+    & > .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;
+        }
+    }
+
+    &.alert-fill-bg {
+        & > .alert-icon {
+            color: color-yiq($color);
+            &:after {
+                background-color: $color;
+            }
+        }
+
+        & > .alert-content-container {
+            background-color: $color;
+            color: color-yiq($color);
+
+            & > .alert-content > strong {
+                color: color-yiq($color);
+            }
+        }
+    }
+}

package/scss/mixins/_aspect-ratio.scss

@@ -0,0 +1,29 @@
+// Aspect ratio
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin aspect-ratio($width, $height) {
+
+    position: relative;
+
+    &:before {
+        display: block;
+        content: '';
+        width: 100%;
+        padding-top: ($height / $width) * 100%;
+    }
+
+    > .content {
+        position: absolute;
+        padding:10px;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        span:before{
+            content: '';
+        }
+        span:after{
+            content: '';
+        }
+    }
+}

package/scss/mixins/_background-variant.scss

@@ -0,0 +1,25 @@
+// Background variant
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin bg-variant($parent, $color) {
+
+	#{$parent} {
+		background-color: $color !important;
+	}
+
+	a#{$parent},
+	button#{$parent} {
+
+		&:hover,
+		&:focus {
+			background-color: darken($color, 10%) !important;
+		}
+	}
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+
+	#{$parent} {
+		background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+	}
+}

package/scss/mixins/_badge-variant.scss

@@ -0,0 +1,13 @@
+// Badge variant
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin badge-variant($color) {
+
+	background: $color;
+    color: color-yiq($color);
+}
+
+@mixin badge-outline-variant($color) {
+
+	border: 1px solid $color;
+}

package/scss/mixins/_breakpoints.scss

@@ -0,0 +1,102 @@
+// Breakpoints
+// ---------------------------------------------------------------------------------------------------------------
+
+// Name of the next breakpoint, or null for the last breakpoint.
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+
+    $n: index($breakpoint-names, $name);
+
+    @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+
+    $min: map-get($breakpoints, $name);
+
+    @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+
+    $next: breakpoint-next($name, $breakpoints);
+
+    @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+
+    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+
+    $min: breakpoint-min($name, $breakpoints);
+
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+
+    $max: breakpoint-max($name, $breakpoints);
+
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+// Media that spans multiple breakpoint widths.
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+
+    $min: breakpoint-min($lower, $breakpoints);
+    $max: breakpoint-max($upper, $breakpoints);
+
+    @if $min != null and $max != null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if $max == null {
+        @include media-breakpoint-up($lower, $breakpoints) {
+            @content;
+        }
+    } @else if $min == null {
+        @include media-breakpoint-down($upper, $breakpoints) {
+            @content;
+        }
+    }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+
+    $min: breakpoint-min($name, $breakpoints);
+    $max: breakpoint-max($name, $breakpoints);
+
+    @if $min != null and $max != null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if $max == null {
+        @include media-breakpoint-up($name, $breakpoints) {
+            @content;
+        }
+    } @else if $min == null {
+        @include media-breakpoint-down($name, $breakpoints) {
+            @content;
+        }
+    }
+}

package/scss/mixins/_buttons.scss

@@ -0,0 +1,104 @@
+// Buttons
+// ---------------------------------------------------------------------------------------------------------------
+
+// Button default
+@mixin button-variant($background, $border: $background, $color: color-yiq($background), $hover-background: darken($background, 15%), $hover-border: $hover-background, $hover-color: color-yiq(darken($background, 15%)), $active-background: $hover-background, $active-border: $hover-border, $active-color: $hover-color, $enable-shadow: true) {
+
+    border: $btn-border-width solid $border;
+    background: $background;
+    color: $color;
+
+    &.focus,
+    &:focus,
+    &.hover,
+    &:hover {
+        border: $btn-border-width solid $hover-border;
+        background: $hover-background;
+        color: $hover-color;
+
+        @if $enable-shadow {
+            box-shadow: 0 14px 26px -12px rgba(darken($background, 15%), 0.32), 0 4px 23px 0 rgba(darken($background, 15%), 0.06), 0 8px 10px -5px rgba(darken($background, 15%), 0.2);
+        } @else {
+            box-shadow: none;
+        }
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+        border: $btn-border-width solid $active-border;
+        background: $active-background;
+        color: $active-color;
+
+        @if $enable-shadow {
+            box-shadow: 0 14px 26px -12px rgba(darken($background, 15%), 0.32), 0 4px 23px 0 rgba(darken($background, 15%), 0.06), 0 8px 10px -5px rgba(darken($background, 15%), 0.2);
+        } @else {
+            box-shadow: none;
+        }
+    }
+
+    &.disabled,
+    &[disabled] {
+        opacity: 0.35;
+        cursor: not-allowed;
+        &:hover {
+            box-shadow: none;
+            cursor: not-allowed;
+        }
+    }
+}
+
+
+// Button outline
+@mixin button-outline-variant($border-color, $color: $border-color, $hover-background: $border-color, $hover-color: color-yiq($border-color), $active-color: $hover-color, $active-background: $hover-background, $active-border: $border-color, $enable-shadow: true) {
+
+    border: $btn-border-width solid $border-color;
+    color: $color;
+    background: transparent;
+
+    &.focus,
+    &:focus,
+    &.hover,
+    &:hover {
+        background: $hover-background;
+        color: $hover-color;
+
+        @if $enable-shadow {
+            box-shadow: 0 14px 26px -12px rgba(darken($border-color, 15%), 0.32), 0 4px 23px 0 rgba(darken($border-color, 15%), 0.06), 0 8px 10px -5px rgba(darken($border-color, 15%), 0.2);
+        } @else {
+            box-shadow: none;
+        }
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+        border: $btn-border-width solid $active-border;
+        background: $active-background;
+        color: $active-color;
+
+        @if $enable-shadow {
+            box-shadow: 0 14px 26px -12px rgba(darken($border-color, 15%), 0.32), 0 4px 23px 0 rgba(darken($border-color, 15%), 0.06), 0 8px 10px -5px rgba(darken($border-color, 15%), 0.2);
+        } @else {
+            box-shadow: none;
+        }
+    }
+
+    &.disabled,
+    &[disabled] {
+        opacity: 0.35;
+        cursor: not-allowed;
+        &:hover {
+            box-shadow: none;
+            cursor: not-allowed;
+        }
+    }
+}
+
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+
+    padding: $padding-y $padding-x;
+    font-size: $font-size;
+    line-height: $line-height;
+    border-radius: $border-radius;
+}

package/scss/mixins/_caret.scss

@@ -0,0 +1,80 @@
+// Caret
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin caret-reset-after {
+
+	&:after {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		padding-left: $caret-width * .85;
+		content: '';
+		background-repeat: no-repeat;
+		background-position: right;
+		vertical-align: middle;
+		box-sizing: content-box;
+	}
+
+	&:empty:after {
+		padding-left: 0;
+	}
+}
+
+@mixin caret-reset-before {
+
+	&:before {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		padding-right: $caret-width * .85;
+		content: '';
+		background-repeat: no-repeat;
+		background-position: left;
+		vertical-align: middle;
+		box-sizing: content-box;
+	}
+
+	&:empty:before {
+		padding-right: 0;
+	}
+}
+
+@mixin caret-down {
+
+	@include caret-reset-after;
+
+	&:after {
+		// Font Awesome Free fa-angle-down
+    	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48cGF0aCBmaWxsPSIjNzY4NDhGIiBkPSJNMTUxLjUgMzQ3LjhMMy41IDIwMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDE5LjgtMTkuOGM0LjctNC43IDEyLjMtNC43IDE3IDBMMTYwIDI4Mi43bDExOS43LTExOC41YzQuNy00LjcgMTIuMy00LjcgMTcgMGwxOS44IDE5LjhjNC43IDQuNyA0LjcgMTIuMyAwIDE3bC0xNDggMTQ2LjhjLTQuNyA0LjctMTIuMyA0LjctMTcgMHoiPjwvcGF0aD48L3N2Zz4=');
+	}
+}
+
+@mixin caret-up {
+
+	@include caret-reset-after;
+
+	&:after {
+		// Font Awesome Free fa-angle-up
+    	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48cGF0aCBmaWxsPSIjNzY4NDhGIiBkPSJNMTY4LjUgMTY0LjJsMTQ4IDE0Ni44YzQuNyA0LjcgNC43IDEyLjMgMCAxN2wtMTkuOCAxOS44Yy00LjcgNC43LTEyLjMgNC43LTE3IDBMMTYwIDIyOS4zIDQwLjMgMzQ3LjhjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwzLjUgMzI4Yy00LjctNC43LTQuNy0xMi4zIDAtMTdsMTQ4LTE0Ni44YzQuNy00LjcgMTIuMy00LjcgMTcgMHoiPjwvcGF0aD48L3N2Zz4=');
+	}
+}
+
+@mixin caret-right {
+
+	@include caret-reset-after;
+
+	&:after {
+		// Font Awesome Free fa-angle-right
+    	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIgNTEyIj48cGF0aCBmaWxsPSIjNzY4NDhGIiBkPSJNMTg3LjggMjY0LjVMNDEgNDEyLjVjLTQuNyA0LjctMTIuMyA0LjctMTcgMEw0LjIgMzkyLjdjLTQuNy00LjctNC43LTEyLjMgMC0xN0wxMjIuNyAyNTYgNC4yIDEzNi4zYy00LjctNC43LTQuNy0xMi4zIDAtMTdMMjQgOTkuNWM0LjctNC43IDEyLjMtNC43IDE3IDBsMTQ2LjggMTQ4YzQuNyA0LjcgNC43IDEyLjMgMCAxN3oiPjwvcGF0aD48L3N2Zz4=');
+	}
+}
+
+@mixin caret-left {
+
+	@include caret-reset-before;
+
+	&:before {
+		// Font Awesome Free fa-angle-left
+    	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIgNTEyIj48cGF0aCBmaWxsPSIjNzY4NDhGIiBkPSJNNC4yIDI0Ny41TDE1MSA5OS41YzQuNy00LjcgMTIuMy00LjcgMTcgMGwxOS44IDE5LjhjNC43IDQuNyA0LjcgMTIuMyAwIDE3TDY5LjMgMjU2bDExOC41IDExOS43YzQuNyA0LjcgNC43IDEyLjMgMCAxN0wxNjggNDEyLjVjLTQuNyA0LjctMTIuMyA0LjctMTcgMEw0LjIgMjY0LjVjLTQuNy00LjctNC43LTEyLjMgMC0xN3oiPjwvcGF0aD48L3N2Zz4=');
+	}
+}

package/scss/mixins/_clearfix.scss

@@ -0,0 +1,10 @@
+// Clearfix
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin clearfix() {
+	&::after {
+		display: block;
+		clear: both;
+		content: "";
+	}
+}

package/scss/mixins/_float.scss

@@ -0,0 +1,14 @@
+// Float
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin float-left {
+	float: left !important;
+}
+
+@mixin float-right {
+	float: right !important;
+}
+
+@mixin float-none {
+	float: none !important;
+}

package/scss/mixins/_forms.scss

@@ -0,0 +1,51 @@
+// Forms
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin form-control-focus {
+
+	&:focus {
+		border-color: $input-focus-border-color;
+		outline: 0;
+	}
+}
+
+@mixin form-validation-state($state, $color) {
+
+	.#{$state}-feedback {
+		display: none;
+		width: 100%;
+		margin-top: $form-feedback-margin-top;
+		font-size: $form-feedback-font-size;
+		color: $color;
+	}
+
+	.form-control {
+		.was-validated &:#{$state},
+		&.is-#{$state} {
+
+			border-color: $color;
+
+			&:focus {
+				border-color: $color;
+			}
+
+			~ .#{$state}-feedback {
+				display: block;
+			}
+		}
+	}
+
+	.form-check-input {
+		.was-validated &:#{$state},
+		&.is-#{$state} {
+
+			~ .form-check-label {
+				color: $color;
+			}
+
+			~ .#{$state}-feedback {
+				display: block;
+			}
+		}
+	}
+}

package/scss/mixins/_gradients.scss

@@ -0,0 +1,40 @@
+// Gradients
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin gradient-bg($color) {
+	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%) {
+	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%) {
+	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) {
+	background-image: linear-gradient($deg, $start-color, $end-color);
+	background-repeat: repeat-x;
+}
+
+@mixin gradient-x-three-colors($start-color: color('blue'), $mid-color: color('grey-pink'), $color-stop: 50%, $end-color: color('red')) {
+	background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+	background-repeat: no-repeat;
+}
+
+@mixin gradient-y-three-colors($start-color: color('blue'), $mid-color: color('pink'), $color-stop: 50%, $end-color: color('red')) {
+	background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+	background-repeat: no-repeat;
+}
+
+@mixin gradient-radial($inner-color: color('grey-darker'), $outer-color: color('grey-darkest')) {
+	background-image: radial-gradient(circle, $inner-color, $outer-color);
+	background-repeat: no-repeat;
+}
+
+@mixin gradient-striped($color: rgba(color('white'), .15), $angle: 45deg) {
+	background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}

package/scss/mixins/_grid-framework.scss

@@ -0,0 +1,72 @@
+// Grid framework
+// ---------------------------------------------------------------------------------------------------------------
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+
+    %grid-column {
+        position: relative;
+        width: 100%;
+        padding-right: $gutter / 2;
+        padding-left: $gutter / 2;
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        // Allow columns to stretch full width below their breakpoints
+        @for $i from 1 through $columns {
+            .col#{$infix}-#{$i} {
+                @extend %grid-column;
+            }
+        }
+        .col#{$infix},
+        .col#{$infix}-auto {
+            @extend %grid-column;
+        }
+
+        @include media-breakpoint-up($breakpoint, $breakpoints) {
+
+            // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+            .col#{$infix} {
+                flex-basis: 0;
+                flex-grow: 1;
+                max-width: 100%;
+            }
+
+            .col#{$infix}-auto {
+                flex: 0 0 auto;
+                width: auto;
+                max-width: 100%; // Reset earlier grid tiers
+            }
+
+            @for $i from 1 through $columns {
+                .col#{$infix}-#{$i} {
+                    @include make-col($i, $columns);
+                }
+            }
+
+            .order#{$infix}-first {
+                order: -1;
+            }
+
+            .order#{$infix}-last {
+                order: $columns + 1;
+            }
+
+            @for $i from 0 through $columns {
+                .order#{$infix}-#{$i} {
+                    order: $i;
+                }
+            }
+
+            // `$columns - 1` because offsetting by the width of an entire row isn't possible
+            @for $i from 0 through ($columns - 1) {
+                @if not ($infix == "" and $i == 0) {
+                    .offset#{$infix}-#{$i} {
+                        @include make-col-offset($i, $columns);
+                    }
+                }
+            }
+        }
+    }
+}