@finqu/cool 1.2.29 → 2.0.2

package/scss/_custom-forms.scss

@@ -1,444 +0,0 @@
-// Custom forms
-// ---------------------------------------------------------------------------------------------------------------
-
-// Animations
-@keyframes wave {
-    50% {transform: scale(.9);}
-}
-
-
-$check-color: theme-color('info');
-$check-border-color: $grey-200;
-$check-border-width: 2px;
-$check-radius: 6px;
-
-// Styled checkbox
-.styled-checkbox {
-    line-height: 0;
-
-    label {
-        display: inline-flex;
-        align-items: center;
-        margin: auto;
-        user-select: none;
-        cursor: pointer;
-
-        > span {
-            display: inline-block;
-            vertical-align: middle;
-
-            &:first-child {
-                position: relative;
-                width: 17px;
-                height: 17px;
-                min-width: 17px;
-                min-height: 17px;
-                border-radius: $check-radius;
-                transform: scale(1);
-                vertical-align: middle;
-                border: $check-border-width solid $check-border-color;
-                transition: all .2s ease;
-
-                svg {
-                    position: absolute;
-                    top: 4px;
-                    left: 3px;
-                    fill: none;
-                    stroke: #ffffff;
-                    stroke-width: 2;
-                    stroke-linecap: round;
-                    stroke-linejoin: round;
-                    stroke-dasharray: 16px;
-                    stroke-dashoffset: 16px;
-                    transition: all .3s ease;
-                    transition-delay: .1s;
-                }
-
-                &:before {
-                    content: '';
-                    width: 100%;
-                    height: 100%;
-                    background: $check-color;
-                    display: block;
-                    transform: scale(0);
-                    opacity: 1;
-                    border-radius: $check-radius;
-                }
-            }
-
-            &.checkbox-label {
-                width: 100%;
-                padding-left: 8px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                @include reset-text;
-            }
-        }
-
-        &:hover > span:first-child {
-            border-color: $check-color;
-        }
-    }
-
-    input[type="checkbox"] {
-        display: none;
-    }
-
-    input[type="checkbox"]:checked + label {
-        > span {
-            &:first-child {
-                background: $check-color;
-                border-color: $check-color;
-                animation: wave .4s ease;
-
-                svg {
-                    stroke-dashoffset: 0;
-                }
-
-                &:before {
-                    transform: scale(3.5);
-                    opacity: 0;
-                    transition: all .6s ease;
-                }
-            }
-        }
-    }
-
-    input[type="checkbox"]:disabled + label,
-    input[type="checkbox"].disabled + label {
-        > span {
-            &:first-child {
-                cursor: not-allowed;
-                background-color: theme-color('light');
-                border: $check-border-width solid $check-border-color;
-                opacity: 0.35;
-            }
-        }
-
-        &:hover {
-            > span {
-                &:first-child {
-                    border: $check-border-width solid $check-border-color;
-                }
-            }
-        }
-    }
-}
-
-
-// Styled radio
-.styled-radio {
-    line-height: 0;
-
-    label {
-        display: inline-flex;
-        align-items: center;
-        margin: auto;
-        user-select: none;
-        cursor: pointer;
-
-        > span {
-            display: inline-block;
-            vertical-align: middle;
-
-            &:first-child {
-                position: relative;
-                width: 17px;
-                height: 17px;
-                min-width: 17px;
-                min-height: 17px;
-                border-radius: 50%;
-                transform: scale(1);
-                vertical-align: middle;
-                border: $check-border-width solid $check-border-color;
-                transition: all .2s ease;
-
-                svg {
-                    position: absolute;
-                    top: 4px;
-                    left: 3px;
-                    fill: none;
-                    stroke: #ffffff;
-                    stroke-width: 2;
-                    stroke-linecap: round;
-                    stroke-linejoin: round;
-                    stroke-dasharray: 16px;
-                    stroke-dashoffset: 16px;
-                    transition: all .3s ease;
-                    transition-delay: .1s;
-                }
-
-                &:before {
-                    content: '';
-                    width: 100%;
-                    height: 100%;
-                    background: $check-color;
-                    display: block;
-                    transform: scale(0);
-                    opacity: 1;
-                    border-radius: 50%;
-                }
-            }
-
-            &.radio-label {
-                width: 100%;
-                padding-left: 8px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                @include reset-text;
-            }
-        }
-
-        &:hover > span:first-child {
-            border-color: $check-color;
-        }
-    }
-
-    input[type="radio"] {
-        display: none;
-    }
-
-    input[type="radio"]:checked + label {
-        > span {
-            &:first-child {
-                background: $check-color;
-                border-color: $check-color;
-                animation: wave .4s ease;
-
-                svg {
-                    stroke-dashoffset: 0;
-                }
-
-                &:before {
-                    transform: scale(3.5);
-                    opacity: 0;
-                    transition: all .6s ease;
-                }
-            }
-        }
-    }
-
-    input[type="radio"]:disabled + label,
-    input[type="radio"].disabled + label {
-        > span {
-            &:first-child {
-                cursor: not-allowed;
-                background-color: theme-color('light');
-                border: $check-border-width solid $check-border-color;
-                opacity: 0.35;
-            }
-        }
-
-        &:hover {
-            > span {
-                &:first-child {
-                    border: $check-border-width solid $check-border-color;
-                }
-            }
-        }
-    }
-}
-
-$onoffswitch-height: 20px;
-
-// ON/OFF Switch
-.onoffswitch {
-    display: inline-flex;
-    vertical-align: middle;
-    position: relative;
-    user-select: none;
-    width: 40px;
-    margin: 0 auto;
-
-    & + label {
-        margin-left: 10px;
-        margin-bottom: 0;
-        flex-basis: 0;
-        flex-grow: 1;
-    }
-
-    .onoffswitch-checkbox {
-        display: none;
-        background: color('red');
-
-        &:disabled {
-            cursor: not-allowed;
-            pointer-events: none;
-
-            & + .onoffswitch-label {
-                opacity: 0.4;
-
-                &:hover {
-                    cursor: not-allowed;
-                }
-            }
-        }
-    }
-
-    .onoffswitch-label {
-        display: block;
-        width: 100%;
-        overflow: hidden;
-        cursor: pointer;
-        height: $onoffswitch-height;
-        padding: 0;
-        line-height: $onoffswitch-height;
-        border: 2px solid $grey-600;
-        border-radius: $onoffswitch-height;
-        background-color: $grey-600;
-        margin-bottom: 0;
-        box-sizing: content-box;
-        transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
-
-        &:before {
-            content: '';
-            display: block;
-            width: $onoffswitch-height;
-            height: $onoffswitch-height;
-            margin: 0px;
-            background: #ffffff;
-            position: absolute;
-            top: 0;
-            right: 16px;
-            bottom: 0;
-            border: 2px solid $grey-600;
-            border-radius: $onoffswitch-height;
-            transition: background-color 0.3s ease-in, border-color 0.3s ease-in, right 0.3s ease-in;
-            box-sizing: content-box;
-        }
-    }
-
-    .onoffswitch-checkbox:checked + .onoffswitch-label {
-        background-color: theme-color('brand');
-    }
-
-    .onoffswitch-checkbox:checked + .onoffswitch-label,
-    .onoffswitch-checkbox:checked + .onoffswitch-label:before {
-       border-color: theme-color('brand');
-    }
-
-    .onoffswitch-checkbox:checked + .onoffswitch-label:before {
-        right: 0px;
-    }
-}
-
-
-// Form label gorup
-.form-label-group {
-    position: relative;
-
-    select {
-        -webkit-appearance: none;
-
-        @-moz-document url-prefix() {
-            text-indent: -2px;
-        }
-    }
-
-    & > input, select, textarea, label,
-    & > .input-group > label {
-        padding: $input-padding-y-lg $input-padding-x-lg;
-    }
-
-    & > label,
-    & > .input-group > label {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: block;
-        width: 100%;
-        margin-bottom: 0;
-        line-height: $input-line-height-lg;
-        color: $input-placeholder-color;
-        border: 1px solid transparent;
-        border-radius: $border-radius;
-        transition: all .1s ease-in-out;
-        pointer-events: none;
-        font-size: $input-font-size-lg;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    input::-webkit-input-placeholder,
-    input:-ms-input-placeholder,
-    input::-ms-input-placeholder,
-    input::-moz-placeholder,
-    input::placeholder {
-        color: transparent;
-    }
-
-    &:not(.label-on-top) .show-when-label-on-top {
-        display: none;
-    }
-
-    &.label-on-top {
-        input, select, textarea {
-            padding-top: calc(#{$input-padding-y-lg} + #{$input-padding-y-lg} * (2 / 3));
-            padding-bottom: calc(#{$input-padding-y-lg} / 3);
-
-            & ~ label {
-                padding-top: calc(#{$input-padding-y-lg} / 3);
-                padding-bottom: calc(#{$input-padding-y-lg} / 3);
-                font-size: $small-font-size;
-                color: $input-placeholder-color;
-            }
-        }
-    }
-
-    input:-webkit-autofill {
-        padding-top: calc(#{$input-padding-y-lg} + #{$input-padding-y-lg} * (2 / 3));
-        padding-bottom: calc(#{$input-padding-y-lg} / 3);
-
-        & ~ label {
-            padding-top: calc(#{$input-padding-y-lg} / 3);
-            padding-bottom: calc(#{$input-padding-y-lg} / 3);
-            font-size: $small-font-size;
-            color: $input-placeholder-color;
-        }
-    }
-}
-
-
-// Fake input
-.fake-input {
-    background: $input-bg;
-    border: 1px solid $border-color;
-    line-height: $input-line-height;
-    border-radius: $border-radius;
-    height: $input-height;
-    padding: $input-padding-y $input-padding-x;
-    font-family: inherit;
-    font-size: $font-size-base;
-    box-sizing: border-box;
-}
-
-
-// Form contorl placeholder
-.form-control-placeholder {
-    display: block;
-    width: 100%;
-    height: $input-height;
-    padding: $input-padding-y $input-padding-x;
-    font-family: $input-font-family;
-    font-size: $input-font-size;
-    line-height: input-line-height;
-    color: $body-color;
-    box-sizing: border-box;
-    &.input-lg {
-        padding: $input-padding-y-lg $input-padding-x-lg;
-        font-size: $input-font-size-lg;
-        height: $input-height-lg;
-        line-height: $input-line-height-lg;
-    }
-    &.input-sm {
-        padding: $input-padding-y-sm $input-padding-x-sm;
-        font-size: $input-font-size-sm;
-        height: $input-height-sm;
-        line-height: $input-line-height-sm;
-    }
-    & + .input-validation {
-        width: 100%;
-        flex: 1;
-    }
-}

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;
-}