@finqu/cool 1.0.0

package/scss/_custom-forms.scss

@@ -0,0 +1,423 @@
+// Custom forms
+// ---------------------------------------------------------------------------------------------------------------
+
+// Animations
+@keyframes wave {
+    50% {transform: scale(.9);}
+}
+
+
+// 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: $border-radius;
+                transform: scale(1);
+                vertical-align: middle;
+                border: 1px solid #9098A9;
+                transition: all .2s ease;
+
+                svg {
+                    position: absolute;
+                    top: 4px;
+                    left: 3px;
+                    fill: none;
+                    stroke: color('white');
+                    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: color('blue');
+                    display: block;
+                    transform: scale(0);
+                    opacity: 1;
+                    border-radius: 50%;
+                }
+            }
+
+            &.checkbox-label {
+                padding-left: 8px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                @include reset-text;
+            }
+        }
+
+        &:hover span:first-child {
+            border-color: color('blue');
+        }
+    }
+
+    input[type="checkbox"] {
+        display: none;
+    }
+
+    input[type="checkbox"]:checked + label {
+        span {
+            &:first-child {
+                background: color('blue');
+                border-color: color('blue');
+                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: color('grey-lightest');
+                border: 1px solid #9098A9;
+                opacity: 0.35;
+            }
+        }
+
+        &:hover {
+            span {
+                &:first-child {
+                    border: 1px solid #9098A9;
+                }
+            }
+        }
+    }
+}
+
+
+// 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: 1px solid #9098A9;
+                transition: all .2s ease;
+
+                svg {
+                    position: absolute;
+                    top: 4px;
+                    left: 3px;
+                    fill: none;
+                    stroke: color('white');
+                    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: color('blue');
+                    display: block;
+                    transform: scale(0);
+                    opacity: 1;
+                    border-radius: 50%;
+                }
+            }
+
+            &.radio-label {
+                padding-left: 8px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                @include reset-text;
+            }
+        }
+
+        &:hover span:first-child {
+            border-color: color('blue');
+        }
+    }
+
+    input[type="radio"] {
+        display: none;
+    }
+
+    input[type="radio"]:checked + label {
+        span {
+            &:first-child {
+                background: color('blue');
+                border-color: color('blue');
+                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: color('grey-lightest');
+                border: 1px solid #9098A9;
+                opacity: 0.35;
+            }
+        }
+
+        &:hover {
+            span {
+                &:first-child {
+                    border: 1px solid #9098A9;
+                }
+            }
+        }
+    }
+}
+
+
+// ON/OFF Switch
+.onoffswitch {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    width: 35px;
+    user-select: none;
+    margin: 0 auto;
+
+    &.inline-switch {
+        margin-left: 0;
+        margin-right: 10px;
+    }
+
+    .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;
+        overflow: hidden;
+        cursor: pointer;
+        height: 15px;
+        padding: 0;
+        line-height: 15px;
+        border: 2px solid #79868C;
+        border-radius: 15px;
+        background-color: #79868C;
+        margin-bottom: 0;
+        transition: all 0.3s ease-in;
+        box-sizing: content-box;
+
+        &:before {
+            content: '';
+            display: block;
+            width: 15px;
+            margin: 0px;
+            background: color('white');
+            position: absolute;
+            top: 0;
+            right: 16px;
+            bottom: 0;
+            border: 2px solid #79868C;
+            border-radius: 15px;
+            transition: all 0.3s ease-in 0s;
+            box-sizing: content-box;
+        }
+    }
+
+    .onoffswitch-checkbox:checked + .onoffswitch-label {
+        background-color: color('green');
+    }
+
+    .onoffswitch-checkbox:checked + .onoffswitch-label,
+    .onoffswitch-checkbox:checked + .onoffswitch-label:before {
+       border-color: color('green');
+    }
+
+    .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 {
+        padding: $input-padding-y-lg $input-padding-x-lg;
+    }
+
+    & > 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;
+    }
+
+    input::-webkit-input-placeholder,
+    input:-ms-input-placeholder,
+    input::-ms-input-placeholder,
+    input::-moz-placeholder,
+    input::placeholder {
+        color: transparent;
+    }
+
+    &.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: color('grey-lighter');
+    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/_dialog.scss

@@ -0,0 +1,149 @@
+// Dialog
+// ---------------------------------------------------------------------------------------------------------------
+
+.dialog {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-dialog;
+    overflow: hidden;
+    outline: 0;
+    -webkit-overflow-scrolling: touch;
+
+    .dialog-container {
+        position: relative;
+        width: auto;
+        margin: 10px;
+        pointer-events: none;
+        @include media-breakpoint-up(sm) {
+            max-width: 600px;
+            margin: 25px auto;
+        }
+
+        .dialog-content {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            pointer-events: auto;
+            position: relative;
+            text-align: left;
+            border: none;
+            border-radius: $border-radius;
+            background-color: color('white');
+            background-clip: padding-box;
+            outline: 0;
+            overflow: auto;
+            box-shadow: 0 30px 40px 0 rgba(34, 44, 54, 0.2), 0 2px 16px 0 rgba(34, 44, 54, 0.09);
+
+            .dialog-header {
+                display: flex;
+                align-items: flex-start;
+                justify-content: space-between;
+                padding: 12px 16px;
+                border-bottom: 1px solid $border-color;
+                @include media-breakpoint-down(md) {
+                    padding: 10px;
+                }
+
+                .dialog-title {
+                    font-size: 20px;
+                    @include text-truncate;
+                }
+
+                button[data-dialog-close] {
+                    font-size: 18px;
+                    background-color: transparent;
+                    border: 0;
+                    opacity: 0.75;
+
+                    &:hover,
+                    &:focus {
+                        opacity: 1;
+                        outline: 0
+                    }
+                }
+            }
+
+            .dialog-body {
+                position: relative;
+                flex: 1 1 auto;
+                padding: 16px;
+                overflow-y: auto;
+            }
+
+            .dialog-footer {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                padding: 12px 16px;
+                border-top: 1px solid $border-color;
+                @include media-breakpoint-down(md) {
+                    padding: 10px;
+                }
+            }
+        }
+    }
+}
+
+
+// Sizes
+.dialog-sm {
+    .dialog-container {
+        @include media-breakpoint-up(sm) {
+            max-width: 300px;
+        }
+    }
+}
+
+.dialog-lg {
+    .dialog-container {
+        @include media-breakpoint-up(sm) {
+            max-width: 800px;
+        }
+    }
+}
+
+
+// Utilities
+.dialog-centered {
+    .dialog-container {
+        display: flex;
+        align-items: center;
+        @include media-breakpoint-up(sm) {
+            min-height: calc(100% - 50px);
+        }
+    }
+}
+
+.dialog-prevent-scroll {
+    overflow: hidden;
+}
+
+.dialog-backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    background-color: color('black');
+    z-index: $zindex-dialog;
+    backface-visibility: hidden;
+    transition: opacity 0.1s;
+}
+
+.has-dialogs .dialog-backdrop {
+    opacity: 0.3;
+}
+
+.dialog-overflow-visible {
+    overflow-x: visible;
+    overflow-y: visible;
+
+    .dialog-body {
+        overflow-x: visible;
+        overflow-y: visible;
+    }
+}