waveterm/frontend/app/mixins.scss

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0

@mixin ellipsis() {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin border-radius-mixin() {
    &.border-radius-2 {
        border-radius: 4px;
    }
    &.border-radius-3 {
        border-radius: 3px;
    }
    &.border-radius-4 {
        border-radius: 4px;
    }
    &.border-radius-5 {
        border-radius: 5px;
    }
    &.border-radius-6 {
        border-radius: 6px;
    }
    &.border-radius-7 {
        border-radius: 7px;
    }
    &.border-radius-8 {
        border-radius: 8px;
    }
    &.border-radius-9 {
        border-radius: 9px;
    }
    &.border-radius-10 {
        border-radius: 10px;
    }
}

@mixin vertical-padding-mixin() {
    &.vertical-padding-0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    &.vertical-padding-1 {
        padding-top: 1px;
        padding-bottom: 1px;
    }
    &.vertical-padding-2 {
        padding-top: 2px;
        padding-bottom: 2px;
    }
    &.vertical-padding-3 {
        padding-top: 3px;
        padding-bottom: 3px;
    }
    &.vertical-padding-4 {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    &.vertical-padding-5 {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    &.vertical-padding-6 {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    &.vertical-padding-7 {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    &.vertical-padding-8 {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    &.vertical-padding-9 {
        padding-top: 9px;
        padding-bottom: 9px;
    }
    &.vertical-padding-10 {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@mixin horizontal-padding-mixin() {
    &.horizontal-padding-0 {
        padding-left: 0px;
        padding-right: 0px;
    }
    &.horizontal-padding-1 {
        padding-left: 1px;
        padding-right: 1px;
    }
    &.horizontal-padding-2 {
        padding-left: 2px;
        padding-right: 2px;
    }
    &.horizontal-padding-3 {
        padding-left: 3px;
        padding-right: 3px;
    }
    &.horizontal-padding-4 {
        padding-left: 4px;
        padding-right: 4px;
    }
    &.horizontal-padding-5 {
        padding-left: 5px;
        padding-right: 5px;
    }
    &.horizontal-padding-6 {
        padding-left: 6px;
        padding-right: 6px;
    }
    &.horizontal-padding-7 {
        padding-left: 7px;
        padding-right: 7px;
    }
    &.horizontal-padding-8 {
        padding-left: 8px;
        padding-right: 8px;
    }
    &.horizontal-padding-9 {
        padding-left: 9px;
        padding-right: 9px;
    }
    &.horizontal-padding-10 {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@mixin font-size-mixin() {
    &.font-size-10 {
        font-size: 10px;
    }
    &.font-size-11 {
        font-size: 11px;
    }
    &.font-size-12 {
        font-size: 12px;
    }
    &.font-size-13 {
        font-size: 13px;
    }
    &.font-size-14 {
        font-size: 14px;
    }
    &.font-size-15 {
        font-size: 15px;
    }
    &.font-size-16 {
        font-size: 16px;
    }
    &.font-size-17 {
        font-size: 17px;
    }
    &.font-size-18 {
        font-size: 18px;
    }
    &.font-size-19 {
        font-size: 19px;
    }
    &.font-size-20 {
        font-size: 20px;
    }
    &.font-size-21 {
        font-size: 21px;
    }
    &.font-size-22 {
        font-size: 22px;
    }
    &.font-size-23 {
        font-size: 23px;
    }
    &.font-size-24 {
        font-size: 24px;
    }
    &.font-size-25 {
        font-size: 25px;
    }
    &.font-size-26 {
        font-size: 26px;
    }
}

@mixin font-weight-mixin() {
    &.font-weight-100 {
        font-weight: 100;
    }
    &.font-weight-200 {
        font-weight: 200;
    }
    &.font-weight-300 {
        font-weight: 300;
    }
    &.font-weight-400 {
        font-weight: 400;
    }
    &.font-weight-500 {
        font-weight: 500;
    }
    &.font-weight-600 {
        font-weight: 600;
    }
    &.font-weight-700 {
        font-weight: 700;
    }
}

@mixin avatar-dims-mixin() {
    &.size-xs {
        width: 20px;
        height: 20px;
        font-size: 7px; // 18px * (20 / 50)

        .status-indicator {
            width: 5px; // scaled indicator size
            height: 5px;
        }
    }

    &.size-sm {
        width: 30px;
        height: 30px;
        font-size: 11px; // 18px * (30 / 50)

        .status-indicator {
            width: 7px;
            height: 7px;
        }
    }

    &.size-md {
        width: 40px;
        height: 40px;
        font-size: 14px; // 18px * (40 / 50)

        .status-indicator {
            width: 9px;
            height: 9px;
        }
    }

    &.size-lg {
        width: 45px;
        height: 45px;
        font-size: 16px; // 18px * (45 / 50)

        .status-indicator {
            width: 10px;
            height: 10px;
        }
    }

    &.size-xl {
        width: 50px;
        height: 50px;
        font-size: 18px; // base size

        .status-indicator {
            width: 12px;
            height: 12px;
        }
    }
}