Skip to content
Snippets Groups Projects
device.scss 2.27 KiB
Newer Older
  • Learn to ignore specific revisions
  • @import "/src/shared/style/colors.scss";
    
    .device-table {
        & thead {
            font-size: 0.9em;
        }
    
        & tr:hover > td {
            background-color: map-get($theme-colors, "primary-hover");
            cursor: pointer;
        }
    
        & tr.active > td {
            background-color: lighten(map-get($theme-colors, primary), 5%) !important;
            color: map-get($theme-colors, "black") !important;
        }
    
        & tr > td {
            color: map-get($theme-colors, "dark") !important;
        }
    
        & tr:nth-child(2n + 1) > td {
            background-color: lighten(map-get($theme-colors, primary), 38%);
        }
    }
    
    .border-right {
        $border-padding: 2em;
    
        border-right: 1px solid lighten(map-get($theme-colors, dark), 35%);
        padding-right: $border-padding;
    
        & ~ div {
            padding-left: $border-padding;
        }
    }
    
    .tab-links {
        font-size: 1.5em;
        text-decoration: none;
        color: map-get($theme-colors, dark);
    
        &:hover {
            color: lighten(map-get($theme-colors, primary), 10%);
        }
    
        &:focus {
            border: none !important;
            color: lighten(map-get($theme-colors, primary), 10%);
        }
    
        &.active {
            color: map-get($theme-colors, primary);
            font-weight: 500;
            text-decoration: underline;
        }
    }
    .transitions {
        $transition-duration-hover: 0.1s;
        $transition-duration-change: 0.2s;
        transition:
            --startOpacity $transition-duration-hover ease-in-out,
            --startPosition $transition-duration-hover ease-in-out;
    }
    
    @property --startOpacity {
        syntax: "<number>";
        initial-value: 0.35;
        inherits: false;
    }
    
    @property --startPosition {
        syntax: "<percentage>";
        initial-value: 10%;
        inherits: false;
    }
    
    .bg-gradient-fade {
        $primary-color: map-get($theme-colors, "primary");
        background: linear-gradient(
            to bottom,
            rgba($primary-color, var(--startOpacity)) var(--startPosition),
            rgba($primary-color, 0.1) 100%
        );
    
        &:hover {
            --startOpacity: 0.4;
            --startPosition: 30%;
        }
    }
    
    .disabled-hover:hover {
        $primary-color: rgba(map-get($theme-colors, "dark"), 0.1);
        background: linear-gradient(to bottom, rgb(223, 223, 223) 1%, white 100%);
    }
    
    
    .device-row:hover .icons {
        color: map-get($theme-colors, "black") !important;
        opacity: 100%;
        transition: gap 0.3s;
        gap: 0.7em;
    }