@finqu/cool 1.2.28 → 1.3.0

package/scss/cool-grid.scss

@@ -1,29 +0,0 @@
-/*!
- * Cool UI - Grid (https://finqu.fi)
- * Copyright 2020 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

@@ -1,11 +0,0 @@
-/*!
- * Cool UI - Reboot (https://finqu.fi)
- * Copyright 2020 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

@@ -1,37 +0,0 @@
-/*!
- * Cool UI (https://finqu.fi)
- * Copyright 2020 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";
-@import "notification";

package/scss/mixins/_alert-variant.scss

@@ -1,25 +0,0 @@
-// Alert variant
-// ---------------------------------------------------------------------------------------------------------------
-
-@mixin alert-variant($color) {
-    border-top-color: $color;
-    background-color: fade-out($color, 0.9);
-
-    .alert-icon {
-        border: 1px solid $color;
-        box-shadow: 0 0 0 0.2em fade-out($color, 0.7);
-
-        .icon {
-            color: $color;
-        }
-    }
-}
-
-@mixin alert-icon-variant($color) {
-    border: 1px solid $color;
-    box-shadow: 0 0 0 0.2em fade-out($color, 0.7);
-
-    .icon {
-        color: $color;
-    }
-}

package/scss/mixins/_aspect-ratio.scss

@@ -1,29 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-// 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

@@ -1,36 +0,0 @@
-// Badge variant
-// ---------------------------------------------------------------------------------------------------------------
-@mixin badge-variant($color, $background: mix($color, white, 10%)) {
-    border-color: $color;
-    background-color: $background;
-	color: color-yiq($background);
-
-    .alert-icon {
-        border: 1px solid $color;
-		box-shadow: 0 0 0 0.2em fade-out($color, 0.7);
-
-        .icon {
-            color: $color;
-        }
-    }
-}
-
-@mixin badge-outline-variant($color) {
-	border-color: $color;
-	background: transparent;
-
-	@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/_breakpoints.scss

@@ -1,102 +0,0 @@
-// 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

@@ -1,104 +0,0 @@
-// 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

@@ -1,80 +0,0 @@
-// 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

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

package/scss/mixins/_float.scss

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

package/scss/mixins/_forms.scss

@@ -1,67 +0,0 @@
-// 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;
-			}
-		}
-	}
-
-	.input-group {
-		.was-validated &:#{$state},
-		&.is-#{$state} {
-
-			.form-control,
-		    .input-group-text,
-		    .input-dropdown {
-				border-color: $color;
-		    }
-
-			~ .#{$state}-feedback {
-				display: block;
-			}
-		}
-	}
-}

package/scss/mixins/_gradients.scss

@@ -1,40 +0,0 @@
-// 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

@@ -1,72 +0,0 @@
-// 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);
-                    }
-                }
-            }
-        }
-    }
-}