@nomios/web-uikit/dist/components/button/Button.css

Nomios' living web UIKit

/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

/* ==========================================================================
  Fonts
  ========================================================================== */

/* ==========================================================================
  All typography variants

  $unit - Either em or rem
  ========================================================================== */

.button {
    position: relative;
    min-width: 12rem;
    height: 5rem;
    overflow: hidden;
    padding: 0;
    border: none;
    background: transparent;
    white-space: nowrap;
    transition-property: opacity, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease-out
}

.button:enabled {
        cursor: pointer;
    }

.button.fullWidth {
        width: 100%;
    }

.button .textBlock {
        position: relative;
        font-family: "IbmPlexMono", monospace;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: calc(2.4em / 1.6);
        height: 100%;
        padding: 0 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: border-color, color, background-color;
        transition-duration: 0.2s;
        transition-timing-function: ease-out
    }

.button .textBlock .text {
            position: relative;
            width: 100%;
            z-index: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.button .textBlock .progressBar {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
        }

.button.primary .textBlock {
            background-color: #4b453d;
            color: #fff;
        }

.button.primary:enabled:active .textBlock {
                background-color: #2c2823;
            }

.button.primary:enabled:focus:not(:hover) .textBlock {
                background-color: #2c2823;
            }

.button.primary:enabled:hover:not(:active) .textBlock {
                background-color: rgba(75, 69, 61, 0.8);
            }

.button.primary:disabled .textBlock {
            background-color: rgba(75, 69, 61, 0.2);
        }

.button.secondary .textBlock {
            border: 0.1rem solid #4b453d;
            background-color: transparent;
            color: #000
        }

.button.secondary .textBlock .progressBar {
                top: -1px;
                right: -1px;
                bottom: -1px;
                left: -1px;
            }

.button.secondary:enabled:active {
                box-shadow: inset 0 0 0 0.2rem #4b453d
            }

.button.secondary:enabled:focus:not(:hover) {
                box-shadow: inset 0 0 0 0.2rem #4b453d
            }

.button.secondary:enabled:active .textBlock {
                    border-color: #4b453d;
                }

.button.secondary:enabled:focus:not(:hover) .textBlock {
                    border-color: #4b453d;
                }

.button.secondary:enabled:hover:not(:active) .textBlock {
                border-color: rgba(75, 69, 61, 0.6);
                color: rgba(0, 0, 0, 0.8);
            }

.button.secondary:disabled {
            opacity: 0.3;
        }

.button.tertiary .textBlock {
            border: 0.1rem solid #fff;
            background-color: transparent;
            color: #fff
        }

.button.tertiary .textBlock .progressBar {
                top: -1px;
                right: -1px;
                bottom: -1px;
                left: -1px;
            }

.button.tertiary:enabled:active {
                box-shadow: inset 0 0 0 0.2rem #fff
            }

.button.tertiary:enabled:focus:not(:hover) {
                box-shadow: inset 0 0 0 0.2rem #fff
            }

.button.tertiary:enabled:active .textBlock {
                    border-color: rgba(255, 255, 255, 0.6);
                }

.button.tertiary:enabled:focus:not(:hover) .textBlock {
                    border-color: rgba(255, 255, 255, 0.6);
                }

.button.tertiary:enabled:hover:not(:active) .textBlock {
                border-color: rgba(255, 255, 255, 0.6);
                color: rgba(255, 255, 255, 0.8);
            }

.button.tertiary:disabled .textBlock {
            border-color: rgba(255, 255, 255, 0.3);
            color: rgba(255, 255, 255, 0.5);
        }

.button.negative .textBlock {
            background-color: #fff;
            color: #4b453d;
        }

.button.negative:enabled:active {
                box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, 0.3);
            }

.button.negative:enabled:focus:not(:hover) {
                box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, 0.3);
            }

.button.negative:enabled:hover:not(:active) .textBlock {
                background-color: rgba(255, 255, 255, 0.6);
            }

.button.negative:disabled .textBlock {
            background-color: rgba(255, 255, 255, 0.2);
            color: rgba(75, 69, 61, 0.5);
        }

.button {

    /* ==========================================================================
      Text + feedback
      ========================================================================== */
}

.button .textBlock {
        z-index: 1;
    }

.button .successBlock {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        transform: translateY(100%);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.2s ease-out;
    }

.button .errorBlock {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        transform: translateY(100%);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.2s ease-out;
    }

.button.success .successBlock,
    .button.error .errorBlock {
        transform: translateY(0);
    }

.button {

    /* Primary & Secondary */
}

.button.primary.progressVisible .textBlock {
        background-color: rgba(75, 69, 61, 0.2);
        color: #fff;
    }

.button.secondary.progressVisible .textBlock {
        background-color: rgba(75, 69, 61, 0.2);
        color: #fff;
    }

.button.secondary.loading,
        .button.secondary.success,
        .button.secondary.error {
            opacity: 1;
        }

.button.secondary.progressVisible .textBlock {
            border-color: transparent;
        }

.button.primary .textBlock .progressBar {
            background-color: rgba(75, 69, 61, 0.2);
        }

.button.secondary .textBlock .progressBar {
            background-color: rgba(75, 69, 61, 0.2);
        }

.button.primary .successBlock {
            background-color: #44b880
        }

.button.secondary .successBlock {
            background-color: #44b880
        }

.button.primary .successBlock .checkmark svg path {
                stroke: #fff;
            }

.button.secondary .successBlock .checkmark svg path {
                stroke: #fff;
            }

.button.primary .errorBlock {
            background-color: #d0021b
        }

.button.secondary .errorBlock {
            background-color: #d0021b
        }

.button.primary .errorBlock .crossmark svg path {
                stroke: #fff;
            }

.button.secondary .errorBlock .crossmark svg path {
                stroke: #fff;
            }

.button {

    /* Tertiary & Negative */
}

.button.tertiary.progressVisible .textBlock {
            border-color: transparent;
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

.button.negative.progressVisible .textBlock {
            border-color: transparent;
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

.button.tertiary .textBlock .progressBar {
            background-color: rgba(255, 255, 255, 0.2);
        }

.button.negative .textBlock .progressBar {
            background-color: rgba(255, 255, 255, 0.2);
        }

.button.tertiary .successBlock {
            background-color: #fff
        }

.button.negative .successBlock {
            background-color: #fff
        }

.button.tertiary .successBlock .checkmark svg path {
                stroke: #44b880;
            }

.button.negative .successBlock .checkmark svg path {
                stroke: #44b880;
            }

.button.tertiary .errorBlock {
            background-color: #fff
        }

.button.negative .errorBlock {
            background-color: #fff
        }

.button.tertiary .errorBlock .crossmark svg path {
                stroke: #d0021b;
            }

.button.negative .errorBlock .crossmark svg path {
                stroke: #d0021b;
            }

.button {

    /* ==========================================================================
      Feedback icons
      ========================================================================== */
}

.button .checkmark,
    .button .crossmark {
        font-size: 2rem;
        stroke-dasharray: 20;
        stroke-dashoffset: 20;
    }

.button .checkmark {
        transition: stroke-dashoffset 0.2s linear 0.2s;
    }

.button .crossmark svg path:nth-of-type(1) {
            transition: stroke-dashoffset 0.1s linear 0.3s;
        }

.button .crossmark svg path:nth-of-type(2) {
            transition: stroke-dashoffset 0.1s linear 0.2s;
        }

.button.success .checkmark {
        stroke-dashoffset: 0;
    }

.button.error .crossmark {
        stroke-dashoffset: 0;
    }