cirrus-ui/src/components/tags.scss

A lightweight UI framework written in SCSS

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

@if should-generate-classes($TAGS) {

$TAG_PADDING_DIFF: 0.125;
$TAG_BASE_PADDING_X: 0.5; // .5rem;
$TAG_BASE_PADDING_Y: 0.5; // .5rem;

/* TAGS */
.tag {
    $padding_x: #{$TAG_BASE_PADDING_X + 1 * $TAG_PADDING_DIFF};
    $padding_y: #{$TAG_BASE_PADDING_Y + 1 * $TAG_PADDING_DIFF};

    align-items: center;
    background-color: fill('light');
    border-radius: 0.25rem;
    color: currentColor;
    display: inline-flex;
    height: 2em;
    line-height: 1.5;
    font-size: $font-size-s;
    padding: #{$padding_y}rem #{$padding_x}rem;
    white-space: nowrap;

    $multiplier: 0;
    @each $name, $size in $tag-font-sizes {
        &.tag--#{$name} {
            $padding_x: #{$TAG_BASE_PADDING_X + $multiplier * $TAG_PADDING_DIFF};
            $padding_y: #{$TAG_BASE_PADDING_Y + $multiplier * $TAG_PADDING_DIFF};

            font-size: $size;
            padding: #{$padding_y}rem #{$padding_x}rem;
            $multiplier: $multiplier + 1;
        }
    }

    &.tag--rounded {
        border-radius: 290486px;
    }

    /* Delete button for tag */
    &.tag__delete {
        aspect-ratio: 1/1;
        background-color: rgba(10, 10, 10, 0.2);
        border-radius: 290486px;
        cursor: pointer;
        pointer-events: auto;
        display: inline-block;
        height: auto;
        position: relative;
        width: auto;
    }

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

    /* Draw the delete button */
    &.tag__delete::before,
    &.tag__delete::after {
        background-color: fill('light');
        content: '';
        display: block;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
        transform-origin: center center;
    }

    &.tag__delete::before {
        height: 1px;
        width: 50%;
    }

    &.tag__delete::after {
        height: 50%;
        width: 1px;
    }

    &.tag__delete {
        margin-left: 0.25rem;
        margin-right: -0.125rem;
    }

    /* TAG THEMES */
    &.tag--white {
        background-color: #fff;
        color: fill('dark');
    }

    &.tag--black {
        background-color: #000;
        color: #fff;
    }

    &.tag--primary {
        background-color: fill('primary');
        color: #fff;
    }

    @each $color, $value in $control-themes {
        &.tag--#{$color} {
            background-color: map.get($value, bg);
            color: #fff;

            &.tag__close-btn:hover {
                background-color: darken($color: map.get($value, bg), $amount: 5%);
            }

            &.tag__close-btn:active {
                background-color: darken($color: map.get($value, bg), $amount: 10%);
            }
        }
    }

    /* Tag close button */
    &.tag__close-btn {
        cursor: pointer;
        position: relative;
        width: 2em;

        &::before,
        &::after {
            background-color: currentColor;
            content: '';
            display: block;
            left: 50%;
            top: 50%;
            position: absolute;
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
            transform-origin: center center;
        }

        &::before {
            height: 1px;
            width: 50%;
        }

        &::after {
            height: 50%;
            width: 1px;
        }
    }
}

/* TAG CONTAINER */
.tag-container {
    /* Add margin in between tag containers */
    &:not(:last-child) {
        margin-bottom: 1rem;
    }

    /* Used for grouping tags together */
    &.group-tags {
        --tag-first-border-radius: 0.25rem 0 0 0.25rem;
        --tag-last-border-radius: 0 0.25rem 0.25rem 0;
        align-items: center;
        display: flex;
        flex-wrap: wrap;

        .tag {
            margin-right: 0 !important;

            &:first-child {
                border-radius: var(--tag-first-border-radius);
            }

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

            &:last-child {
                border-radius: var(--tag-last-border-radius);
            }
        }

        // Round first and last tag in the grouped tags
        &.group-tags--rounded {
            --tag-first-border-radius: 290486px 0 0 290486px;
            --tag-last-border-radius: 0 290486px 290486px 0;
        }
    }

    /* Tag positioning */
    &.tag-container--centered {
        justify-content: center;

        .tag {
            margin: 0 0.25rem;
        }
    }

    &.tag-container--right {
        justify-content: flex-end;

        .tag:not(:first-child) {
            margin-left: 0.5rem;
        }

        .tag:not(:last-child) {
            margin-right: 0;
        }
    }

    .tag {
        margin-bottom: 0.5rem;

        &:not(:last-child) {
            margin-right: 0.5rem;
        }
    }
}

/* MISC */
a.tag:hover {
    text-decoration: underline;
}
}