cirrus-ui/src/base/default.scss

A lightweight UI framework written in SCSS

/* BASE STYLING + RESET FOR CIRRUS */
@use 'sass:map';
@use '../src/internal' as *;

:root {
    /* v1 Colors */
    --cirrus-fg: #{$cirrus-fg};
    --cirrus-bg: #{$cirrus-bg};

    --cirrus-select-bg: #{$cirrus-select-bg};

    --cirrus-code-bg: rgba(#{hex-to-rgb($cirrus-primary-light)}, 1);
    --cirrus-code-fg: #{$cirrus-code-fg};

    --cirrus-form-group-bg: rgba(#{hex-to-rgb($cirrus-light-gray)}, 1);
    --cirrus-form-group-fg: rgba(#{hex-to-rgb($cirrus-dark-gray)}, 1);

    --toast-primary-bg: #{$toast-primary-bg};

    --animation-duration: #{$animation-duration};
    --focus-opacity: #{$focus-opacity};

    --font-size-xs: #{$font-size-xs};
    --font-size-s: #{$font-size-s};
    --font-size-m: #{$font-size-m};
    --font-size-l: #{$font-size-l};
    --font-size-xl: #{$font-size-xl};

    // Global var defaults
    --bg-opacity: 1;
    --color-opacity: 1;
    --border-opacity: 1;
}

$generate-reset: should-generate-classes($RESET);

@if $generate-reset {
    /* RESET */
    /* Box Sizing */
    *,
    *::before,
    *::after {
        /* Prevent setting borders from increasing the size of an element */
        box-sizing: border-box;
        // Set defaults for border so they would show up when utils are used
        border: 0 solid currentColor;
        text-rendering: optimizeLegibility;
        -webkit-tap-highlight-color: transparent;
    }

    /* Remove default margin and padding */
    html,
    body,
    p,
    ol,
    ul,
    li,
    dl,
    dt,
    dd,
    blockquote,
    figure,
    fieldset,
    legend,
    textarea,
    pre,
    iframe,
    hr,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        padding: 0;
    }

    /* Allow % styles to work on page */
    html,
    body {
        border: none;
        height: 100%;
    }

    /* Nunito Sans for the font */
    body {
        line-height: 1.8; /* Globally adjust line height */
        font-size: 1rem;
        font-weight: 400;
        font-family: map.get($map: $font-families, $key: secondary);
        color: var(--cirrus-fg);
    }

    /* Remove bullets from unordered lists */
    ul {
        list-style: none;
    }

    /* Setting up embedded content */
    audio,
    canvas,
    iframe,
    img,
    embed,
    object,
    svg,
    video {
        display: block;
        max-width: 100%;
        height: auto;
    }

    iframe {
        outline: 0;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    /* Page sections set to block */
    article,
    aside,
    figure,
    footer,
    header,
    hgroup,
    section {
        display: block;
    }

    // Inputs must inherit font
    button,
    input,
    optgroup,
    select,
    textarea {
        margin: 0;
        font-family: inherit;
        font-size: inherit;
    }

    /* Base styling for labels */
    label {
        display: inline-block;
    }

    /* Base styling for fieldsets */
    fieldset {
        padding: 1rem;

        legend {
            font-weight: bold;
        }
    }

    /* Hidden elements must not show */
    [hidden] {
        display: none !important;
    }

    /* Selection Color */
    ::selection {
        background-color: var(--cirrus-select-bg);
    }

    /* When focusing any element */
    :focus {
        outline: 5px auto Highlight;
        outline: 5px auto -webkit-focus-ring-color;
    }

    /* Remove all animations based on preference */
    @media (prefers-reduced-motion: reduce) {
        html:focus-within {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}