cirrus-ui/src/components/button.scss

A lightweight UI framework written in SCSS

@use 'sass:map';
@use '../src/internal' as *;

/* Render the x in the close button */
@mixin btn-close-x($height, $width) {
    background-color: var(--cirrus-bg);
    content: '';
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform-origin: center center;
    height: $height;
    width: $width;
}

@if should-generate-classes($BUTTON) {
    /* BUTTONS */

    /* Button styling */
    /* Un-themed */

    #{$button-selectors},
    a.btn {
        line-height: 2rem;
        overflow: hidden;
        padding: 0.5rem 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        cursor: pointer;
        text-align: center;
        transition: all var(--animation-duration);
        background-color: rgba(var(--btn-color), var(--bg-opacity));
        border-color: rgba(var(--btn-border-color), var(--color-opacity));
        color: rgba(var(--btn-fg), var(--color-opacity));
        font-size: $font-size-xs;
        font-weight: inherit; // Reset button if used in <a> tag
        letter-spacing: 0.03rem;
        text-transform: uppercase;
        font-family: map.get($map: $font-families, $key: primary);
        min-width: 2rem;
        user-select: none;
        margin-bottom: 1rem;
        outline: none;
        --btn-color: #{hex-to-rgb(fill('gray', '000'))};
        --btn-fg: #{hex-to-rgb(fill('gray', '700'))};
        --btn-border-color: #{hex-to-rgb(fill('gray', '200'))};
        --btn-hover-color: #{hex-to-rgb(fill('gray', '100'))};

        /* Base States */
        &:hover {
            background-color: rgba(var(--btn-hover-color), var(--bg-opacity));
            transition: all var(--animation-duration);
            color: rgba(var(--btn-fg), var(--color-opacity));
        }

        &:active {
            transition: var(--animation-duration) ease;
        }

        &:focus {
            outline: none;

            &:not([disabled]):not(.btn--disabled) {
                box-shadow: var(--btn-shadow);
            }
        }

        &:disabled,
        &.btn--disabled {
            cursor: not-allowed;
            opacity: 0.5;

            &:active {
                pointer-events: none;
            }
        }

        &.outline {
            --btn-color: transparent;

            &:hover {
                --btn-color: #{hex-to-rgb(fill('gray', '200'))};
            }
        }

        /* Loading Button*/
        /* Make the loading circle, if present, white when button is active */
        &.loading:active::after {
            border-radius: 50%;
            border-right-color: transparent;
            border-top-color: transparent;
            transition: var(--animation-duration) ease;
        }

        /* Animated Button */
        &.btn-animated {
            transition: calc(var(--animation-duration) / 2) ease;

            &:active {
                transform: scale(0.95);
                transition: calc(var(--animation-duration) / 2) ease;
            }
        }

        /* Close Button */
        &.btn-close {
            background-color: rgba(10, 10, 10, 0.2);
            border: none;
            border-radius: 290486px;
            cursor: pointer;
            display: inline-block;
            flex-grow: 0;
            flex-shrink: 0;
            font-size: 0;
            height: 20px;
            margin: 0;
            outline: 0;
            position: relative;
            vertical-align: top;
            width: 20px;
            padding: 0;
            min-width: 20px;

            &:hover {
                background-color: rgba(10, 10, 10, 0.3);
            }

            &::before {
                @include btn-close-x(2px, 50%);
            }

            &::after {
                @include btn-close-x(50%, 2px);
            }
        }

        /* BUTTON STYLES */
        /* Regular */
        &.btn-transparent {
            --btn-color: transparent;
            --btn-fg: #{hex-to-rgb(fill('dark'))};
            --btn-border-color: transparent;
            --btn-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5);
            --btn-hover-color: 0, 0, 0;

            &:hover {
                --bg-opacity: 0.1;
            }
            &.outline {
                --btn-fg: #{hex-to-rgb(fill('dark'))};
            }
        }

        &.btn-light {
            --btn-color: #{hex-to-rgb(fill('light'))};
            --btn-fg: #{hex-to-rgb(fill('dark'))};
            --btn-border-color: #{hex-to-rgb(fill('light'))};
            --btn-shadow: 0 0 0 0.2rem #{transparentize(fill('light'), 0.5)};
            --btn-hover-color: #{hex-to-rgb(darken(fill('light'), 10%))};
        }

        &.btn-black {
            --btn-color: 0, 0, 0;
            --btn-fg: #{hex-to-rgb(fill('light'))};
            --btn-border-color: 0, 0, 0;
            --btn-shadow: 0 0 0 0.2rem #{transparentize(fill('dark'), 0.5)};
            --btn-hover-color: 0, 0, 0;
        }
        
        @each $color, $value in $control-themes {
            &.btn-#{$color} {
                --btn-color: #{hex-to-rgb(map.get($value, bg))};
                --btn-fg: #{hex-to-rgb(map.get($value, fg))};
                --btn-border-color: #{hex-to-rgb(map.get($value, bg))};
                --btn-shadow: 0 0 0 0.2rem #{transparentize(map.get($value, bg), 0.5)};
                --btn-hover-color: #{hex-to-rgb(darken(map.get($value, bg), 10%))};
            }
        }

        @each $size, $property-map in $button-sizes {
            &.btn--#{$size} {
                @include explode-properties($property-map);
            }
        }

        /* GLYPHS */
        .fa-wrapper {
            // /* Override default behavior of aligning font awesome icons to the top */ FontAwesome no longer does this, no need for override
            // vertical-align: baseline;

            &.pad-right {
                margin-right: 0.4rem;
            }

            &.pad-left {
                margin-left: 0.4rem;
            }
        }

        /* Alternatives to pad-left and pad-right */
        span:first-child {
            margin-right: 0.2rem;
        }

        span:last-child {
            margin-left: 0.2rem;
        }
    }

    /* Links as Buttons */
    a.btn {
        display: inline-flex;
    }

    [class^='btn-']:not(.btn-container):not(.btn-close),
    [class*=' btn-']:not(.btn-container):not(.btn-close) {
        background-color: rgba(var(--btn-color), var(--bg-opacity));
        border: 1px solid rgba(var(--btn-border-color), var(--color-opacity));
        color: rgba(var(--btn-fg), var(--color-opacity));
        transition: all var(--animation-duration);

        &:hover {
            background-color: rgba(var(--btn-hover-color), var(--bg-opacity));
            border-color: rgba(var(--btn-border-color), var(--color-opacity));
            transition: all var(--animation-duration);
        }

        /* Outline Variants */
        &.outline {
            background-color: transparent;
            color: rgba(var(--btn-color), var(--color-opacity));

            &:hover {
                background-color: rgba(var(--btn-hover-color), var(--bg-opacity));
                color: rgba(var(--btn-fg), var(--color-opacity));
                transition: all var(--animation-duration);
            }

            &.btn-transparent {
                color: #{hex-to-rgb(fill('gray', '700'))} !important;
            }
        }
    }

    /* Make the loader white so it is visible */
    .loading.btn-accent:after {
        border: 2px solid #fff;
        border-right-color: transparent;
        border-top-color: transparent;
    }

    /* BUTTON GROUPS */
    /* Will group buttons with components in a single component */

    .btn-group {
        display: inline-flex;

        #{$button-selectors} {
            flex: 1 0 auto;
            margin: 0;

            &:first-child:not(:last-child) {
                /* Style the first child in group > 1 buttons */
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            &:last-child:not(:first-child) {
                /* Style the last child in group > 1 buttons */
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                margin-left: -1px;
            }

            &:not(:first-child):not(:last-child) {
                /* Style button in middle of group */
                border-radius: 0; /* Remove roundness from center buttons */
                margin-left: -1px;
            }

            @include elevate-on-focus();
        }

        &.btn-group-fill {
            /* Makes the button group fill the width and proportion the buttons to fill the space */
            display: flex;

            #{$button-selectors} {
                flex: 1 0; /* Make the buttons fill the available width and proportion themselves */
            }

            &:focus {
                z-index: 1;
            }
        }
    }

    @include screen-below($sm) {
        .btn-group {
            display: flex;
            flex-direction: column;

            #{$button-selectors} {
                margin-bottom: -1px;

                &:first-child:not(:last-child) {
                    border-radius: 0.25rem 0.25rem 0 0;
                }

                &:not(:first-child):not(:last-child) {
                    margin-left: 0;
                }

                &:last-child:not(:first-child) {
                    border-radius: 0 0 0.25rem 0.25rem;
                    margin-left: 0;
                }
            }
        }
    }
}