@finqu/cool 1.0.0

package/less/buttons.less

@@ -0,0 +1,287 @@
+// Buttons
+.btn {
+    position: relative;
+    border: none;
+    border-radius: @border-radius;
+    background-color: transparent;
+    cursor: pointer;
+    display: inline-block;
+    font-family: @font-family-sans-serif;
+    font-weight: @btn-font-weight;
+    font-size: @btn-font-size;
+    line-height: @btn-line-height;
+    padding: @btn-padding-y @btn-padding-x;
+    color: @color-text;
+    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;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    &:not(.btn-icon) > .fa,
+    &:not(.btn-icon) > .fas,
+    &:not(.btn-icon) > .far,
+    &:not(.btn-icon) > .fal,
+    &:not(.btn-icon) > .fab {
+        margin-right: 7px;
+        pointer-events: none;
+    }
+    .image,
+    span {
+        pointer-events: none;
+    }
+    &.hidden {
+        display: none;
+    }
+
+    &.small {
+        font-size: @small-font-size;
+        font-weight: @font-weight-normal;
+    }
+
+    &.smaller {
+        font-size: @smaller-font-size;
+        font-weight: @font-weight-normal;
+    }
+}
+
+// Btn primary
+.btn-primary,
+.btn-create,
+.btn-remove {
+    &:not(.btn-icon) {
+        background-color: @color-btn-primary;
+        color: contrast(@color-btn-primary);
+        &.focus,
+        &:focus,
+        &.hover,
+        &:hover {
+            background-color: desaturate(@color-btn-primary, 15%);
+            color: contrast(@color-btn-primary);
+            box-shadow: 0 14px 26px -12px fade(desaturate(@color-btn-primary, 15%), 42%), 0 4px 23px 0 rgba(0, 0, 0, 0.06), 0 8px 10px -5px fade(desaturate(@color-btn-primary, 15%), 20%);
+        }
+        &.disabled,
+        &[disabled] {
+            opacity: 0.25;
+            cursor: not-allowed;
+            &:hover {
+                box-shadow: none;
+                cursor: not-allowed;
+            }
+        }
+    }
+}
+
+// Btn secondary
+.btn-secondary,
+.btn-outline,
+.btn-discard {
+    &:not(.btn-icon) {
+        border: 1px solid @color-btn-secondary;
+        color: @color-btn-secondary;
+        background-color: transparent;
+        &.focus,
+        &:focus,
+        &.hover,
+        &:hover {
+            background-color: @color-btn-secondary;
+            color: contrast(@color-btn-secondary);
+            box-shadow: 0 14px 26px -12px fade(desaturate(@color-btn-secondary, 15%), 42%), 0 4px 23px 0 rgba(0, 0, 0, 0.06), 0 8px 10px -5px fade(desaturate(@color-btn-secondary, 15%), 20%);
+        }
+        &.disabled,
+        &[disabled] {
+            opacity: 0.25;
+            cursor: not-allowed;
+            &:hover {
+                box-shadow: none;
+                cursor: not-allowed;
+            }
+        }
+    }
+}
+
+.btn-white {
+    &:not(.btn-icon) {
+        border: 1px solid white;
+        background-color: white;
+        &.focus,
+        &:focus,
+        &.hover,
+        &:hover {
+            background-color: white;
+            color: contrast(white);
+            box-shadow: 0 14px 26px -12px fade(desaturate(@color-btn-secondary, 15%), 42%), 0 4px 23px 0 rgba(0, 0, 0, 0.06), 0 8px 10px -5px fade(desaturate(@color-btn-secondary, 15%), 20%);
+        }
+        &.disabled,
+        &[disabled] {
+            opacity: 0.25;
+            cursor: not-allowed;
+            &:hover {
+                box-shadow: none;
+                cursor: not-allowed;
+            }
+        }
+    }
+}
+
+// Btn icon
+.btn-icon {
+    width: @btn-height;
+    height: @btn-height;
+    color: @color-icon;
+    text-align: center;
+    padding-left: 0;
+    padding-right: 0;
+    > .fa,
+    > .fas,
+    > .far,
+    > .fal,
+    > .fab {
+        vertical-align: middle;
+        pointer-events: none;
+    }
+    .image,
+    span {
+        pointer-events: none;
+    }
+    &:hover:not(.disabled):not([disabled]) {
+        color: @color-grey-darkest;
+        &:not(.input-group-addon):not(.disable-hover) {
+            background-color: transparent;
+            &:before {
+                transform: scale3d(1,1,1);
+                opacity: 1;
+            }
+        }
+    }
+    &:not(.input-group-addon):not(.disable-hover) {
+        background-color: transparent;
+        transition: all 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;
+        }
+    }
+}
+
+// Btn link
+.btn-link {
+    display: inline;
+    font-family: @font-family-sans-serif;
+    font-weight: inherit;
+    font-size: inherit;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    color: @color-link;
+    text-align: left;
+    line-height: inherit;
+    border: 0;
+    cursor: pointer;
+    outline: 0;
+    &.hidden {
+        display: none;
+    }
+    &:hover {
+        color: @color-hover;
+        background: transparent;
+    }
+}
+
+// Btn text
+.btn-text {
+    display: inline;
+    font-family: @font-family-sans-serif;
+    font-weight: inherit;
+    font-size: inherit;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    color: @color-text;
+    text-align: left;
+    border: 0;
+    cursor: pointer;
+    outline: 0;
+    &.hidden {
+        display: none;
+    }
+}
+
+// Btn fluid
+.btn-fluid {
+    width: 100%;
+    margin-top: 0;
+}
+
+// Btn brand
+.btn-brand {
+    position: relative;
+    font-weight: 500;
+    span {
+        position: relative;
+        z-index: 1;
+    }
+    &:hover {
+        &:before {
+            content: ' ';
+            display: block;
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            border-radius: @border-radius;
+            background-color: rgba(0,0,0,0.1);
+        }
+    }
+}
+
+// Sizing
+.btn-sm {
+    font-size: @btn-font-size-sm;
+    padding: @btn-padding-y-sm @btn-padding-x-sm;
+    &.btn-icon {
+        width: @btn-height-sm;
+        height: @btn-height-sm;
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+.btn-xs {
+    font-size: @btn-font-size-xs;
+    padding: @btn-padding-y-xs @btn-padding-x-xs;
+    &.btn-icon {
+        width: @btn-height-xs;
+        height: @btn-height-xs;
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+.btn-lg {
+    font-size: @btn-font-size-lg;
+    padding: @btn-padding-y-lg @btn-padding-x-lg;
+    &.btn-icon {
+        width: @btn-height-lg;
+        height: @btn-height-lg;
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

package/less/dialog-noconflict.less

@@ -0,0 +1,174 @@
+// 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;
+        @media (min-width: 576px) {
+            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: #fff;
+            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;
+                @media (max-width: 991.98px) {
+                    padding: 10px;
+                }
+
+                .dialog-title {
+                    font-size: 20px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                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;
+                @media (max-width: 991.98px) {
+                    padding: 10px;
+                }
+            }
+        }
+    }
+}
+
+
+// Dialog loader
+.dialog-loader {
+    .dialog-container {
+        width: 180px;
+        height: 100px;
+        min-height: 160px;
+        text-align: center;
+        margin: 25px auto;
+
+        .dialog-content {
+            .dialog-body {
+                padding: 10px;
+                flex: 0 0 auto;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-align: center;
+            }
+        }
+    }
+}
+
+
+// Sizes
+.dialog-sm {
+    .dialog-container {
+        @media (min-width: 576px) {
+            max-width: 300px;
+        }
+    }
+}
+
+.dialog-lg {
+    .dialog-container {
+        @media (min-width: 576px) {
+            max-width: 800px;
+        }
+    }
+}
+
+
+// Utilities
+.dialog-centered {
+    .dialog-container {
+        display: flex;
+        align-items: center;
+        @media (min-width: 576px) {
+            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: #000;
+    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;
+    }
+}

package/less/dialog.less

@@ -0,0 +1,203 @@
+// Dialog
+@keyframes animate-open {
+    0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }
+    100% { opacity: 1; transform: scale3d(1, 1, 1); }
+}
+
+@keyframes animate-close {
+    0% { opacity: 1; }
+    100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
+}
+
+.fnq {
+    .dialog {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 100000;
+        display: none;
+        overflow: hidden;
+        -webkit-overflow-scrolling: touch;
+        outline: 0;
+        .dialog-container {
+            position: relative;
+            width: auto;
+            margin: 10px;
+            box-sizing: border-box;
+            @media screen and (min-width: 768px) {
+                width: 800px;
+                margin: 30px auto;
+            }
+            .dialog-content {
+                position: relative;
+                text-align: left;
+                border: none;
+                border-radius: @border-radius;
+                background-color: @color-white;
+                background-clip: padding-box;
+                outline: 0;
+                box-sizing: border-box;
+                .dialog-header {
+                    height: 60px;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-shrink: 0;
+                    flex-flow: row;
+                    align-items: center;
+                    padding: 10px 20px;
+                    @media screen and (max-width: 767px) {
+                        padding: 10px;
+                    }
+                    h1 {
+                        flex: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        font-size: 20px;
+                        margin: 0;
+                    }
+                    > .header-item {
+                        flex: 0 0 auto;
+                        &.close {
+                            cursor: pointer;
+                        }
+                    }
+                }
+                .dialog-body {
+                    position: relative;
+                    flex: 2 1 auto;
+                    -webkit-overflow-scrolling: touch;
+                }
+                .dialog-footer {
+                    display: flex;
+                    padding: 0 10px 20px;
+                    justify-content: flex-end;
+                    flex-shrink: 0;
+                    @media screen and (max-width: 767px) {
+                        padding: 10px;
+                        .btn {
+                            font-size: @btn-font-size-sm;
+                            padding: @btn-padding-y-sm @btn-padding-x-sm;
+                            height: 33px;
+                            &.btn-icon {
+                                width: @btn-height-sm;
+                            }
+                        }
+                    }
+                    @media screen and (max-width: 360px) {
+                        .btn {
+                            font-size: @btn-font-size-xs;
+                            padding: @btn-padding-y-xs @btn-padding-x-xs;
+                            height: 27px;
+                            &.btn-icon {
+                                width: @btn-height-xs;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &[open] {
+            animation-duration: 0.3s;
+            animation-fill-mode: forwards;
+            animation-name: animate-open;
+            display: block;
+            overflow-x: hidden;
+            overflow-y: auto;
+            *:focus {
+                outline: none;
+            }
+        }
+        &[closed] {
+            animation-duration: 0.3s;
+            animation-fill-mode: forwards;
+            animation-name: animate-close;
+        }
+        &.overflow-visible {
+            overflow-x: visible;
+            overflow-y: visible;
+            .dialog-body {
+                overflow-x: visible;
+                overflow-y: visible;
+            }
+        }
+        &.gutter {
+            .dialog-body {
+                padding: 0 20px 20px 20px;
+                @media screen and (max-width: 767px) {
+                    padding: 0 10px 10px 10px;
+                }
+            }
+        }
+        &.dialog-small {
+            .dialog-container {
+                max-width: 500px;
+                .dialog-footer {
+                    @media screen and (min-width: 768px) {
+                        .btn {
+                            font-size: @btn-font-size-sm;
+                            padding: @btn-padding-y-sm @btn-padding-x-sm;
+                            height: 33px;
+                            &.btn-icon {
+                                width: @btn-height-sm;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &.dialog-load {
+            .dialog-container {
+                width: 250px;
+                height: 100px;
+                min-height: 160px;
+                text-align: center;
+                .dialog-body {
+                    flex: 0 0 auto;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .finquloader {
+                    margin: 50px 0 20px;
+                }
+            }
+        }
+        &.dialog-save {
+            .dialog-container {
+                width: 200px;
+                height: 40px;
+                min-height: 40px;
+                line-height: 40px;
+                padding: 0 20px;
+                &.bg-green {
+                    background-color: @color-green;
+                }
+                .dialog-content {
+                    background-color: @color-black;
+                    color: @color-white;
+                    text-align: center;
+                }
+            }
+        }
+    }
+
+    // Backdrop
+    .dialog + .backdrop {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: rgba(0, 0, 0, 0.6);
+        opacity: 0;
+        transition: opacity 0.3s;
+        z-index: 99999;
+        backface-visibility: hidden;
+    }
+    .dialog[open] + .backdrop {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}