@finqu/cool 1.2.29 → 1.3.0

package/scss/_functions.scss

@@ -1,124 +0,0 @@
-// Functions
-// ---------------------------------------------------------------------------------------------------------------
-
-// Ascending
-// Used to evaluate Sass maps like our grid breakpoints.
-@mixin _assert-ascending($map, $map-name) {
-
-	$prev-key: null;
-	$prev-num: null;
-
-	@each $key, $num in $map {
-		@if $prev-num == null or unit($num) == "%" {
-			// Do nothing
-		} @else if not comparable($prev-num, $num) {
-			@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-		} @else if $prev-num >= $num {
-			@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-		}
-		$prev-key: $key;
-		$prev-num: $num;
-	}
-}
-
-
-// Starts at zero
-// Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
-
-	$values: map-values($map);
-	$first-value: nth($values, 1);
-
-	@if $first-value != 0 {
-		@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
-	}
-}
-
-
-// Make spacers
-@function spacer($key) {
-
-	@if map-has-key($spacers, $key) {
-		@return map-get($spacers, $key);
-	}
-
-	@warn "Unknown `#{$key}` in $spacers.";
-	@return null;
-}
-
-
-// Replace `$search` with `$replace` in `$string`
-// Used on our SVG icon backgrounds for custom forms.
-//
-// @author Hugo Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
-
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-
-// Color contrast
-@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
-
-	@if type-of($color) == 'color' {
-
-		$r: red($color);
-		$g: green($color);
-		$b: blue($color);
-
-		$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
-
-		@if ($yiq >= $yiq-contrasted-threshold) {
-			@return $dark;
-		} @else {
-			@return $light;
-		}
-	}
-
-	@warn "`#{$color}` is not a color.";
-	@return null;
-}
-
-
-// // Color
-@function color($key) {
-
-	@if map-has-key($colors, $key) {
-		@return map-get($colors, $key);
-	}
-
-	@warn "Unknown `#{$key}` in $colors.";
-	@return null;
-}
-
-
-// Theme color
-@function theme-color($key) {
-
-	@if map-has-key($theme-colors, $key) {
-		@return map-get($theme-colors, $key);
-	}
-
-	@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/_grid.scss

@@ -1,35 +0,0 @@
-// Grid
-// ---------------------------------------------------------------------------------------------------------------
-
-.container {
-    @include make-container();
-    @include make-container-max-widths();
-}
-
-.container-fluid {
-    @include make-container();
-}
-
-.container-content {
-    position: relative;
-    @include make-container-content();
-}
-
-.row {
-    @include make-row();
-}
-
-// Remove the negative margin from default .row, then the horizontal padding
-// from all immediate children columns (to prevent runaway style inheritance).
-.no-gutters {
-    margin-right: 0;
-    margin-left: 0;
-
-    > .col,
-    > [class*="col-"] {
-        padding-right: 0;
-        padding-left: 0;
-    }
-}
-
-@include make-grid-columns();

package/scss/_images.scss

@@ -1,361 +0,0 @@
-// Images
-// ---------------------------------------------------------------------------------------------------------------
-
-html.dom-ready {
-    .image {
-        &.img-placeholder,
-        &.img-error {
-            transition: background-color 0.4s;
-        }
-    }
-}
-
-.image {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    box-sizing: content-box;
-
-    // 24x24
-    &.img-xs {
-        width: 24px;
-        height: 24px;
-        min-width: 24px;
-        text-align: center;
-
-        &.img-thumbnail {
-            .icon {
-                width: 10px;
-                height: 10px;
-            }
-        }
-
-        .icon {
-            width: 20px;
-            height: 20px;
-            color: $icon-color;
-        }
-
-        img {
-            vertical-align: middle;
-            max-width: 24px;
-            max-height: 24px;
-
-            &.cover {
-                width: 24px;
-                height: 24px;
-                @include object-fit(cover, 50% 50%);
-            }
-        }
-    }
-
-	// 32x32
-    &.img-sm {
-        width: 32px;
-        height: 32px;
-        min-width: 32px;
-        text-align: center;
-
-        &.img-thumbnail {
-            .icon {
-                width: 16px;
-                height: 16px;
-            }
-        }
-
-        .icon {
-            width: 28px;
-            height: 28px;
-            color: $icon-color;
-        }
-
-        img {
-            vertical-align: middle;
-            max-width: 32px;
-            max-height: 32px;
-
-            &.cover {
-                width: 32px;
-                height: 32px;
-                @include object-fit(cover, 50% 50%);
-            }
-        }
-    }
-
-    // 50x50
-    &.img-md {
-    	width: 50px;
-        height: 50px;
-        min-width: 50px;
-        text-align: center;
-
-        &.img-thumbnail {
-            .icon {
-                width: 25px;
-                height: 25px;
-            }
-        }
-
-        .icon {
-            width: 46px;
-            height: 46px;
-            color: $icon-color;
-        }
-
-        img {
-            vertical-align: middle;
-            max-width: 50px;
-            max-height: 50px;
-
-            &.cover {
-                width: 50px;
-                height: 50px;
-                @include object-fit(cover, 50% 50%);
-            }
-        }
-    }
-
-    // 90x90
-    &.img-lg {
-        width: 90px;
-        height: 90px;
-        min-width: 90px;
-        text-align: center;
-
-        &.img-thumbnail {
-            .icon {
-                width: 25px;
-                height: 25px;
-            }
-        }
-
-        .icon {
-            width: 46px;
-            height: 46px;
-            color: $icon-color;
-        }
-
-        img {
-            vertical-align: middle;
-            max-width: 90px;
-            max-height: 90px;
-
-            &.cover {
-                width: 90px;
-                height: 90px;
-                @include object-fit(cover, 50% 50%);
-            }
-        }
-    }
-
-    // 120x120
-    &.img-xl {
-    	width: 120px;
-        height: 120px;
-        min-width: 120px;
-        text-align: center;
-
-        &.img-thumbnail {
-            .icon {
-                width: 60px;
-                height: 60px;
-            }
-        }
-
-        .icon {
-            width: 116px;
-            height: 116px;
-            color: $icon-color;
-        }
-
-        img {
-            vertical-align: middle;
-            max-width: 120px;
-            max-height: 120px;
-
-            &.cover {
-                width: 120px;
-                height: 120px;
-                @include object-fit(cover, 50% 50%);
-            }
-        }
-    }
-
-    // Fluid
-    &.img-fluid {
-        display: inline-flex;
-        width: auto;
-        height: auto;
-        text-align: center;
-
-        .icon {
-            color: $icon-color;
-        }
-
-        img {
-            display: block;
-            max-width: 100%;
-            max-height: none;
-            width: auto;
-            height: auto;
-        }
-    }
-
-    // Inline
-    &.img-inline {
-        display: inline-flex;
-        vertical-align: middle;
-    }
-
-    // Circle
-    &.img-circle {
-        border-radius: 50%;
-
-        img, svg {
-            border-radius: 50%;
-        }
-    }
-
-    // Thumbnail
-    &.img-thumbnail {
-        background-color: $grey-50;
-        border: 2px solid $border-color;
-        border-radius: $border-radius;
-        padding: 2px;
-
-        img, svg {
-            @if $border-radius > 3 {
-                border-radius: $border-radius - 2px;
-            } @else {
-                border-radius: $border-radius;
-            }
-        }
-    }
-
-    // Placeholder
-    &.img-placeholder,
-    &.img-error {
-        background-color: $grey-50;
-        color: theme-color('medium');
-
-        &:before,
-        &:after {
-            content: '';
-        }
-
-        &:before {
-            background-repeat: no-repeat;
-            background-position: center center;
-            // Font Awesome Free fa-image
-            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYmJiYmJiIiBkPSJNNDY0IDY0SDQ4QzIxLjQ5IDY0IDAgODUuNDkgMCAxMTJ2Mjg4YzAgMjYuNTEgMjEuNDkgNDggNDggNDhoNDE2YzI2LjUxIDAgNDgtMjEuNDkgNDgtNDhWMTEyYzAtMjYuNTEtMjEuNDktNDgtNDgtNDh6bS02IDMzNkg1NGE2IDYgMCAwIDEtNi02VjExOGE2IDYgMCAwIDEgNi02aDQwNGE2IDYgMCAwIDEgNiA2djI3NmE2IDYgMCAwIDEtNiA2ek0xMjggMTUyYy0yMi4wOTEgMC00MCAxNy45MDktNDAgNDBzMTcuOTA5IDQwIDQwIDQwIDQwLTE3LjkwOSA0MC00MC0xNy45MDktNDAtNDAtNDB6TTk2IDM1MmgzMjB2LTgwbC04Ny41MTUtODcuNTE1Yy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcxIDBMMTkyIDMwNGwtMzkuNTE1LTM5LjUxNWMtNC42ODYtNC42ODYtMTIuMjg0LTQuNjg2LTE2Ljk3MSAwTDk2IDMwNHY0OHoiPjwvcGF0aD48L3N2Zz4=');
-            opacity: 1;
-            vertical-align: middle;
-            transition: opacity 0.4s;
-            width: 66%;
-            height: 66%;
-        }
-
-        &.has-icon {
-            &:before,
-            &:after {
-                content: none;
-            }
-        }
-
-        &.loaded {
-            background-color: $grey-50;
-
-            &:before,
-            &:after {
-                content: none;
-            }
-
-            &:before {
-                opacity: 0;
-            }
-        }
-
-        img:not(.loaded) {
-            position: absolute;
-        }
-    }
-
-    // Bordered
-    &.img-bordered {
-        border: 1px solid rgba(0,0,0,0.15);
-    }
-}
-
-.image-status-indicator {
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    top: -7px;
-    left: -7px;
-    display: block;
-    //border: 2px solid $grey-50;
-    background-color: theme-color('medium');
-    border-radius: 50%;
-
-    &.image-status-indicator-active {
-        background-color: theme-color('success');
-    }
-
-    &.image-status-indicator-idle {
-        background-color: theme-color('warning');
-    }
-
-    &.image-status-indicator-inactive {
-        background-color: theme-color('danger');
-    }
-
-    &.image-status-indicator-info {
-        background-color: theme-color('info');
-    }
-}
-
-// Showcase
-.img-showcase {
-    box-shadow: 0 10px 20px -15px hsla(0, 0%, 25%, 1);
-    border-radius: 5px;
-}
-
-// Image fluid
-.img-fluid {
-    display: block;
-    max-width: 100%;
-    max-height: none;
-    width: auto;
-    height: auto;
-}
-
-// Image Circle
-.img-circle {
-	border-radius: 50%;
-}
-
-.image-select-container {
-    width: 120px /* img lg */ + (20px * 2) /* padding */ + 4px /* border */;
-    height: 200px;
-    border: 2px solid $border-color;
-    border-radius: $border-radius;
-    position: relative;
-    display: inline-block;
-
-    // Image select
-    .image-select {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 20px;
-
-        [data-image-select-remove] {
-            position: absolute;
-            top: 0;
-            right: 0;
-        }
-    }
-}