@finqu/cool 1.2.29 → 2.0.2

package/scss/_buttons.scss

@@ -1,248 +1,304 @@
-// 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;
-}
+@use "variables" as *;
+/* Buttons ========================================================================== */
+
+@mixin cool-buttons {
+    .btn {
+        display: var(--cool-btn-display, inline-flex);
+        font-family: var(--cool-btn-font-family);
+        font-weight: var(--cool-btn-font-weight);
+        font-size: var(--cool-btn-font-size);
+        line-height: var(--cool-btn-line-height);
+        color: var(--cool-btn-color, var(--cool-body-color));
+        background-color: var(--cool-btn-bg, transparent);
+        border-width: var(--cool-btn-border-width);
+        border-style: solid;
+        border-color: var(--cool-btn-border-color, transparent);
+        border-radius: var(--cool-btn-border-radius);
+        cursor: var(--cool-btn-cursor);
+        padding: var(--cool-btn-padding-y) var(--cool-btn-padding-x);
+        transition: var(--cool-btn-transition);
+        width: var(--cool-btn-width, auto);
+        height: var(--cool-btn-height, auto);
+        text-align: var(--cool-btn-text-align, center);
+        justify-content: var(--cool-btn-text-align, center);
+        text-transform: var(--cool-btn-text-transform, none);
+        text-decoration: var(--cool-btn-text-decoration, none);
+        align-items: center;
+        touch-action: manipulation;
+        user-select: none;
+        vertical-align: middle;
+        white-space: nowrap;
+        box-sizing: border-box;
+        position: relative;
+        margin: 0;
+        outline: 0;
 
-.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;
+        > span + .icon {
+            margin-left: var(--cool-icon-spacer);
+        }
 
-    .icon {
-        pointer-events: none;
-    }
+        &:has(.icon + *) > .icon {
+            margin-right: var(--cool-icon-spacer);
+        }
 
-    > .icon + * {
-        margin-left: $icon-spacer;
-    }
+        .icon,
+        .image,
+        span {
+            pointer-events: none;
+        }
 
-    .image,
-    span {
-        pointer-events: none;
-    }
+        &:hover,
+        &.hover,
+        &:focus,
+        &.focus {
+            color: var(--cool-btn-hover-color, var(--cool-btn-color, var(--cool-body-color)));
+            background-color: var(--cool-btn-hover-bg, var(--cool-btn-bg, transparent));
+            border-color: var(--cool-btn-hover-border-color, var(--cool-btn-border-color, transparent));
+            text-decoration: var(--cool-btn-hover-text-decoration, none);
+        }
 
-    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-}
+        &:active,
+        &.active {
+            color: var(--cool-btn-active-color, var(--cool-btn-hover-color, var(--cool-btn-color)));
+            background-color: var(--cool-btn-active-bg, var(--cool-btn-hover-bg, var(--cool-btn-bg, transparent)));
+            border-color: var(
+                --cool-btn-active-border-color,
+                var(--cool-btn-hover-border-color, var(--cool-btn-border-color, transparent))
+            );
+            text-decoration: var(--cool-btn-hover-text-decoration, none);
+        }
 
+        &:disabled,
+        &.disabled {
+            color: var(--cool-btn-disabled-color, var(--cool-btn-color, currentColor));
+            opacity: 0.65;
+            pointer-events: none;
+            text-decoration: none;
 
+            &:hover {
+                color: var(--cool-btn-disabled-color, var(--cool-btn-color, currentColor));
+            }
+        }
 
-// 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%;
+        &.text-left,
+        &.text-start {
+            --cool-btn-text-align: left;
+        }
 
-    &.btn-sm {
-        width: $btn-icon-height-sm;
-        height: $btn-icon-height-sm;
-    }
+        &.text-center {
+            --cool-btn-text-align: center;
+        }
 
-    &.btn-lg {
-        width: $btn-icon-height-lg;
-        height: $btn-icon-height-lg;
+        &.text-right,
+        &.text-end {
+            --cool-btn-text-align: left;
+        }
     }
 
-    // @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');
+    .btn-primary {
+        --cool-btn-bg: var(--cool-theme-color-primary);
+        --cool-btn-color: var(--cool-theme-foreground-color-primary);
+        --cool-btn-border-color: var(--cool-theme-color-primary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-primary) 80%, transparent);
     }
 
-    &.disabled,
-    &[disabled] {
-        &:hover {
-            color: $icon-color;
-        }
+    .btn-secondary {
+        --cool-btn-bg: var(--cool-theme-color-secondary);
+        --cool-btn-color: var(--cool-theme-foreground-color-secondary);
+        --cool-btn-border-color: var(--cool-theme-color-secondary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-secondary) 80%, transparent);
     }
 
-    &:hover:not(.disabled):not([disabled]):not(.disable-hover) {
-        background-color: transparent;
-
-        &:before {
-            transform: scale3d(1,1,1);
-            opacity: 1;
-        }
+    .btn-brand {
+        --cool-btn-bg: var(--cool-theme-color-brand);
+        --cool-btn-color: var(--cool-theme-foreground-color-brand);
+        --cool-btn-border-color: var(--cool-theme-color-brand);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-brand) 80%, transparent);
+        --cool-btn-font-weight: var(--cool-font-weight-bold);
     }
 
-    &: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;
-        }
+    .btn-outline-primary {
+        --cool-btn-bg: color-mix(in oklab, var(--cool-theme-color-primary) 3%, transparent);
+        --cool-btn-color: var(--cool-theme-color-primary);
+        --cool-btn-border-color: var(--cool-theme-color-primary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-primary) 80%, transparent);
+        --cool-btn-hover-color: var(--cool-theme-foreground-color-primary);
     }
 
-    > .icon {
-        vertical-align: middle;
-        pointer-events: none;
-        margin: 0;
+    .btn-outline-secondary {
+        --cool-btn-bg: color-mix(in oklab, var(--cool-theme-color-secondary) 7%, transparent);
+        --cool-btn-color: var(--cool-theme-foreground-color-secondary);
+        --cool-btn-border-color: var(--cool-theme-color-secondary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-secondary) 80%, transparent);
+        --cool-btn-hover-color: var(--cool-theme-foreground-color-secondary);
     }
 
-    .image,
-    span {
-        pointer-events: none;
+    .btn-remove {
+        --cool-btn-bg: var(--cool-theme-color-secondary);
+        --cool-btn-color: var(--cool-theme-foreground-color-secondary);
+        --cool-btn-border-color: var(--cool-theme-color-secondary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-danger) 80%, transparent);
+        --cool-btn-hover-color: var(--cool-theme-foreground-color-danger);
+        --cool-btn-hover-border-color: color-mix(in oklab, var(--cool-theme-color-danger) 80%, transparent);
     }
-}
 
-.btn-primary {
-    @include button-variant(theme-color('primary'));
-}
+    .btn-action {
+        --cool-btn-bg: var(--cool-theme-color-success);
+        --cool-btn-color: var(--cool-theme-foreground-color-success);
+        --cool-btn-border-color: var(--cool-theme-color-success);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-success) 80%, transparent);
+        --cool-btn-hover-border-color: color-mix(in oklab, var(--cool-theme-color-success) 80%, transparent);
+        --cool-btn-font-weight: 600;
 
-.btn-secondary {
-    @include button-variant(white, $border: theme-color('primary'), $hover-background: white, $hover-border: theme-color('primary'), $active-background: $grey-50);
-}
+        &:hover {
+            transform: translateY(-1px);
+        }
 
-.btn-remove {
-    @include button-variant(theme-color('secondary'), $border: theme-color('secondary'), $color: theme-color('danger'), $hover-color: theme-color('danger'));
-}
+        &:active {
+            transform: translateY(0);
+        }
+    }
 
-.btn-outline-primary {
-    @include button-outline-variant($border-color: theme-color('primary'));
-}
+    .btn-link {
+        --cool-btn-bg: transparent;
+        --cool-btn-color: var(--cool-link-color);
+        --cool-btn-font-family: inherit;
+        --cool-btn-font-size: inherit;
+        --cool-btn-font-weight: var(--cool-link-font-weight);
+        --cool-btn-line-height: inherit;
+        --cool-btn-padding-y: 0;
+        --cool-btn-padding-x: 0;
+        --cool-btn-text-align: left;
+        --cool-btn-display: inline-flex;
+        --cool-btn-hover-bg: transparent;
+        --cool-btn-hover-color: var(--cool-link-hover-color);
+        --cool-btn-disabled-color: var(--cool-link-disabled-color);
+        --cool-btn-border-width: 0;
+        --cool-btn-text-decoration: none;
+        --cool-btn-hover-text-decoration: var(--cool-link-hover-text-decoration);
+    }
 
-.btn-outline-secondary {
-    @include button-outline-variant($border-color: $grey-100, $color: theme-color('dark'), $hover-background: theme-color('light'), $active-background: color('grey'));
-}
+    .btn-text {
+        --cool-btn-padding-y: 0;
+        --cool-btn-padding-x: 0;
+        --cool-btn-font-family: inherit;
+        --cool-btn-font-size: inherit;
+        --cool-btn-line-height: inherit;
+        --cool-btn-bg: transparent;
+        --cool-btn-color: var(--cool-body-color);
+        --cool-btn-text-align: left;
+        --cool-btn-display: inline;
+        --cool-btn-border-width: 0;
+    }
 
+    .btn-block {
+        width: 100%;
+        margin-top: 0;
 
-// 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;
+        + .btn-block {
+            margin-top: var(--cool-spacing-1);
+        }
     }
-}
 
+    .btn-icon {
+        --cool-btn-width: var(--cool-btn-icon-width);
+        --cool-btn-height: var(--cool-btn-icon-height);
+        --cool-btn-padding-y: 0;
+        --cool-btn-padding-x: 0;
+        --cool-btn-line-height: 0;
+        --cool-btn-text-align: center;
+        flex-shrink: 0;
+
+        @supports (aspect-ratio: 1) {
+            aspect-ratio: 1;
+        }
 
-// 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;
-}
+        &.btn-sm {
+            --cool-btn-width: var(--cool-btn-icon-width-sm);
+            --cool-btn-height: var(--cool-btn-icon-height-sm);
+        }
 
+        &.btn-lg {
+            --cool-btn-width: var(--cool-btn-icon-width-lg);
+            --cool-btn-height: var(--cool-btn-icon-height-lg);
+        }
 
-// Button block
-.btn-block {
-    width: 100%;
-    margin-top: 0;
+        &:not(.btn-primary):not(.btn-secondary):not(.btn-brand):not(.btn-outline-primary):not(
+                .btn-outline-secondary
+            ):not(.btn-remove):not(.btn-action):not(.btn-link):not(.btn-text) {
+            --cool-btn-color: var(--cool-icon-color);
+            --cool-btn-hover-color: var(--cool-theme-color-dark);
+            --cool-link-disabled-color: var(--cool-icon-color);
+            --cool-btn-border-radius: 50%;
+
+            &: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, 0.1);
+                    border-radius: 50%;
+                    z-index: 0;
+                    opacity: 0;
+                }
+            }
+        }
 
-    + .btn-block {
-        margin-top: $btn-block-spacing-y;
+        > .icon {
+            vertical-align: middle;
+            margin: 0;
+        }
     }
-}
 
-.btn-spinner {
-    span {
-        transition: opacity 0.1s ease 0.2s;
+    .btn-xs {
+        --cool-btn-padding-y: var(--cool-btn-padding-y-xs);
+        --cool-btn-padding-x: var(--cool-btn-padding-x-xs);
+        --cool-btn-font-size: var(--cool-btn-font-size-xs);
+        --cool-btn-line-height: var(--cool-btn-line-height-xs);
+        --cool-btn-border-radius: var(--cool-btn-border-radius-xs);
     }
 
-    .icon {
-        transition: opacity 0.2s ease;
-        opacity: 0;
-        position: absolute;
-        left: 0;
-        right: 0;
-        margin: 0 auto;
-        font-size: 1.5em;
+    .btn-sm {
+        --cool-btn-padding-y: var(--cool-btn-padding-y-sm);
+        --cool-btn-padding-x: var(--cool-btn-padding-x-sm);
+        --cool-btn-font-size: var(--cool-btn-font-size-sm);
+        --cool-btn-line-height: var(--cool-btn-line-height-sm);
+        --cool-btn-border-radius: var(--cool-btn-border-radius-sm);
     }
 
-    &.btn-spinner-active {
-        span {
-            transition: opacity 0.1s ease;
-            opacity: 0
-        }
-
-        .icon {
-            transition: opacity 0.1s ease 0.1s;
-            opacity: 1;
-        }
+    .btn-lg {
+        --cool-btn-padding-y: var(--cool-btn-padding-y-lg);
+        --cool-btn-padding-x: var(--cool-btn-padding-x-lg);
+        --cool-btn-font-size: var(--cool-btn-font-size-lg);
+        --cool-btn-line-height: var(--cool-btn-line-height-lg);
+        --cool-btn-border-radius: var(--cool-btn-border-radius-lg);
     }
 }
 
-// Button brand
-.btn-brand {
-    font-weight: 500;
-    span {
-        position: relative;
-        z-index: 1;
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-buttons;
     }
+} @else {
+    @include cool-buttons;
 }
-
-
-// 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);
-}