boardTemplateSelectorItem.scss

TLDR

This file contains the SCSS styles for the BoardTemplateSelectorItem component.

Class

BoardTemplateSelectorItem

This class represents the styling for the BoardTemplateSelectorItem component. It includes the following styles:

• cursor: pointer; - Sets the cursor to a pointer.
• transition: all 100ms ease-out 0s; - Defines the transition effect.
• font-weight: 600; - Sets the font weight to 600.
• position: relative; - Sets the position to relative.
• display: flex; - Sets the display to flex.
• align-items: center; - Sets the alignment to center.
• padding: 8px 16px; - Sets the padding to 8px on the top and bottom, and 16px on the left and right.
• margin-bottom: 4px; - Sets the bottom margin to 4px.
• border-radius: var(--default-rad); - Sets the border radius using a variable.
• color: rgba(var(--center-channel-color-rgb), 0.64); - Sets the color using a variable with an alpha transparency of 0.64.
• height: 40px; - Sets the height to 40px.

The class also includes nested styles for .template-name, .template-icon, i, &:hover, and &.active.

.BoardTemplateSelectorItem {
    cursor: pointer;
    transition: all 100ms ease-out 0s;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    margin-bottom: 4px;
    border-radius: var(--default-rad);
    color: rgba(var(--center-channel-color-rgb), 0.64);
    height: 40px;

    .template-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    .template-icon {
        margin-right: 10px;

        i {
            font-size: 16px;
        }
    }

    &:hover {
        background-color: rgba(var(--center-channel-color-rgb), 0.08);
        color: rgba(var(--center-channel-color-rgb), 1);

        .actions {
            display: flex;
        }
    }

    &.active {
        background-color: rgba(var(--button-bg-rgb), 0.08);
        color: rgba(var(--button-bg-rgb), 1);
    }

    .actions {
        position: relative;
        display: none;
        right: -8px;
    }
}