cirrus-ui/src/base/font.scss

A lightweight UI framework written in SCSS

@use 'sass:map';

@use '../src/internal/generator_v2';
@use '../src/internal' as *;

/* FONT */

/* Constants */

/* Headers */
@each $class, $property-map in $font-heading-sizes {
    #{$class} {
        @include explode-properties(map.get($property-map, 'sm-above'));
        font-family: map.get($map: $font-families, $key: primary);
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 1rem;
    }
}

/* Headlines (for larger titles) */
@each $class, $property-map in $font-headline-sizes {
    .#{$class} {
        @include explode-properties(map.get($property-map, 'sm-above'));
        letter-spacing: 0.05rem;
    }
}

/* Regular text sizes */
@each $class, $property-map in $font-text-sizes {
    .text-#{$class} {
        @include explode-properties($property-map);
    }
}

p,
article,
blockquote {
    font-size: $font-size-m;
    line-height: 2;
    margin-bottom: 1rem;
}

p.lead {
    font-size: 1.2rem;
}

blockquote {
    background-color: fill('gray', '000');
    border-left: 5px solid fill('gray', '200');
    border-radius: 3px;
    margin-bottom: 1rem;
    padding: 1rem 2rem;

    &.text--large {
        font-size: 1.15rem;
    }

    p {
        margin: 0;
    }
}

cite {
    opacity: 0.7;
}

mark,
.mark {
    padding: 0.2em;
    background-color: #f0e8c4;
}

.font-primary {
    font-family: map.get($map: $font-families, $key: primary);
}

.font-alt,
.font-secondary {
    font-family: map.get($map: $font-families, $key: secondary);
}

.content {
    @for $index from 1 through 6 {
        h#{$index} {
            line-height: 1.125em;
            margin: 1rem 0;
        }
    }
}

/* Deprecated 0.8.0 */
// .title {
//     font-weight: bold;
// }

// .title:not(:last-child),
// .subtitle:not(:last-child) {
//     margin-bottom: 1rem;
// }

// .title + .subtitle {
//     /* Make the subtitlte closer to the title */
//     margin-top: -0.75rem;
// }

/* Use default line-height for these texts and when line-height-inherit is specified */
.card-tile p,
.card-tile article,
.card-tile blockquote {
    line-height: inherit;
}

/* Weights */
@each $weight, $value in $font-weights {
    .font-#{$weight} {
        font-weight: $value;
    }
}

/* Text Transformations */
@each $name, $transformation in $font-transforms {
    .#{$name} {
        text-transform: $transformation;
    }
}

@include generator_v2.utility(
    $base-class-name: 'font-style',
    $class-value-pairs: generator_v2.class-value-to-property-map($font-styles, font-style),
    $variants: (),
    $class-prefix: '',
    $override: '!important'
);

.rtl {
    direction: rtl;
}

/* Font Awesome */
.icon {
    /* Usually used in spans */
    display: inline-block;
    /* font-size: 21px; Allow font sizes for icons to be overwritten */
    /* line-height: 1.5rem; Allow line height to be inherited or overwritten */
    text-align: center;
    width: 1.5rem;
    vertical-align: baseline;

    &.x-small {
        margin: 0.55rem 0 0 0.1rem;
    }

    &.small {
        margin: 0.95rem 0 0 0.1rem;
    }

    .fa-wrapper {
        font-size: inherit;
    }
}

.info {
    display: block;
    font-size: var(--font-size-s);
    margin-top: 0.25rem;
    color: fill('gray', '600');

    &.inline {
        /* Keeps the extra info inline */
        display: inline-block;
        margin-left: 0.5rem;
    }
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* Other text elements */
abbr[title] {
    border-bottom: 0.1rem dotted;
    cursor: help;
    text-decoration: none;
}

kbd {
    background-color: var(--cirrus-fg);
    border-radius: 0.2rem;
    color: #fff;
    display: inline-block;
    line-height: 1;
    padding: 0.5rem;
    vertical-align: baseline;
}

/* Letter spacing */
@if should-generate-classes($LETTER-SPACING) {
    @include generator_v2.utility(
        $base-class-name: 'tracking',
        $class-value-pairs: generator_v2.class-value-to-property-map($font-letter-spacing, letter-spacing),
        $variants: get-pseudo-variants($LETTER-SPACING),
        $class-prefix: '',
        $override: '!important'
    );
}

/* Line height */
@if should-generate-classes($LINE-HEIGHT) {
    @include generator_v2.utility(
        $base-class-name: 'leading',
        $class-value-pairs: generator_v2.class-value-to-property-map($font-line-heights, line-height),
        $variants: get-pseudo-variants($LINE-HEIGHT),
        $class-prefix: '',
        $override: '!important'
    );
}

/* MOBILE */

@include screen-below($xs) {
    @each $class, $property-map in $font-heading-sizes {
        #{$class} {
            @include explode-properties(map.get($property-map, 'default'));
        }
    }

    /* Headlines (for larger titles) */
    @each $class, $property-map in $font-headline-sizes {
        .#{$class} {
            @include explode-properties(map.get($property-map, 'default'));
        }
    }

    // Deprecated 0.8.0, leads to unexpected behavior to users
    // p,
    // article,
    // blockquote {
    //     margin: 1rem 0;
    // }
}