@finqu/cool 1.2.29 → 1.3.0

package/scss/_buttons.scss

@@ -1,248 +0,0 @@
-// Buttons
-// ---------------------------------------------------------------------------------------------------------------
-
-html.dom-ready .btn {
-    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-}
-
-.btn {
-    display: inline-block;
-    font-family: $btn-font-family;
-    font-weight: $btn-font-weight;
-    line-height: $btn-line-height;
-    color: $body-color;
-    position: relative;
-    border: $btn-border-width solid transparent;
-    background-color: transparent;
-    cursor: pointer;
-    margin: 2px;
-    text-align: center;
-    text-decoration: none;
-    touch-action: manipulation;
-    user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
-    box-sizing: border-box;
-    outline: 0;
-
-    .icon {
-        pointer-events: none;
-    }
-
-    > .icon + * {
-        margin-left: $icon-spacer;
-    }
-
-    .image,
-    span {
-        pointer-events: none;
-    }
-
-    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-}
-
-
-
-// Button icon
-.btn-icon {
-    display: inline-flex;
-    width: $btn-icon-height;
-    height: $btn-icon-height;
-    color: $icon-color;
-    text-align: center;
-    padding-left: 0;
-    padding-right: 0;
-    line-height: 0;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    border-radius: 50%;
-
-    &.btn-sm {
-        width: $btn-icon-height-sm;
-        height: $btn-icon-height-sm;
-    }
-
-    &.btn-lg {
-        width: $btn-icon-height-lg;
-        height: $btn-icon-height-lg;
-    }
-
-    // @include button-outline-variant($border-color: $input-border-color, $color: theme-color('medium'), $hover-background: theme-color('light'), $active-background: theme-color('light'), $enable-shadow: false);
-    &:hover {
-        color: theme-color('dark');
-    }
-
-    &.disabled,
-    &[disabled] {
-        &:hover {
-            color: $icon-color;
-        }
-    }
-
-    &:hover:not(.disabled):not([disabled]):not(.disable-hover) {
-        background-color: transparent;
-
-        &:before {
-            transform: scale3d(1,1,1);
-            opacity: 1;
-        }
-    }
-
-    &:not(.disabled):not([disabled]):not(.disable-hover) {
-        background-color: transparent;
-        transition: opacity 0.5s ease, scale 0.5s ease;
-
-        &:before {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            content: '';
-            transform: scale3d(0,0,0);
-            transition: all;
-            transition-duration: 250ms;
-            background-color: rgba(0,0,0,.1);
-            border-radius: 50%;
-            z-index: 0;
-            opacity: 0;
-        }
-    }
-
-    > .icon {
-        vertical-align: middle;
-        pointer-events: none;
-        margin: 0;
-    }
-
-    .image,
-    span {
-        pointer-events: none;
-    }
-}
-
-.btn-primary {
-    @include button-variant(theme-color('primary'));
-}
-
-.btn-secondary {
-    @include button-variant(white, $border: theme-color('primary'), $hover-background: white, $hover-border: theme-color('primary'), $active-background: $grey-50);
-}
-
-.btn-remove {
-    @include button-variant(theme-color('secondary'), $border: theme-color('secondary'), $color: theme-color('danger'), $hover-color: theme-color('danger'));
-}
-
-.btn-outline-primary {
-    @include button-outline-variant($border-color: theme-color('primary'));
-}
-
-.btn-outline-secondary {
-    @include button-outline-variant($border-color: $grey-100, $color: theme-color('dark'), $hover-background: theme-color('light'), $active-background: color('grey'));
-}
-
-
-// Button link
-.btn-link {
-    display: inline;
-    font-family: inherit;
-    font-weight: $link-font-weight;
-    font-size: inherit;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    color: $link-color;
-    text-align: left;
-    line-height: inherit;
-    border: 0;
-    cursor: pointer;
-    outline: 0;
-
-    &:hover,
-    &.hover,
-    &:focus
-    &.focus {
-        color: $link-hover-color;
-        background: transparent;
-    }
-}
-
-
-// Button text
-.btn-text {
-    display: inline;
-    font-family: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    color: $body-color;
-    text-align: left;
-    border: 0;
-    cursor: pointer;
-    outline: 0;
-}
-
-
-// Button block
-.btn-block {
-    width: 100%;
-    margin-top: 0;
-
-    + .btn-block {
-        margin-top: $btn-block-spacing-y;
-    }
-}
-
-.btn-spinner {
-    span {
-        transition: opacity 0.1s ease 0.2s;
-    }
-
-    .icon {
-        transition: opacity 0.2s ease;
-        opacity: 0;
-        position: absolute;
-        left: 0;
-        right: 0;
-        margin: 0 auto;
-        font-size: 1.5em;
-    }
-
-    &.btn-spinner-active {
-        span {
-            transition: opacity 0.1s ease;
-            opacity: 0
-        }
-
-        .icon {
-            transition: opacity 0.1s ease 0.1s;
-            opacity: 1;
-        }
-    }
-}
-
-// Button brand
-.btn-brand {
-    font-weight: 500;
-    span {
-        position: relative;
-        z-index: 1;
-    }
-}
-
-
-// Button sizes
-.btn-xs {
-    @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs , $btn-line-height-xs, $btn-border-radius-xs);
-}
-
-.btn-sm {
-    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm , $btn-line-height-sm, $btn-border-radius-sm);
-}
-
-.btn-lg {
-    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
-}

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