iconButton.scss

TLDR

This file contains SCSS code for styling an icon button. It defines various styles for different button sizes and states.

Classes

IconButton

The IconButton class represents an icon button. It defines the styling for the button, including its size, color, and behavior on different states such as hover and active.

Icon

The Icon class represents an icon within the button. It defines the size and spacing of the icon.

.IconButton {
    cursor: pointer;
    border-radius: 4px;
    flex: 0 0 24px;
    height: 24px;
    width: 24px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 100ms ease-out 0s;
    color: rgba(var(--center-channel-color-rgb), 0.56);

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

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

    &.style--inverted {
        color: rgba(var(--sidebar-text-rgb), 0.64);

        &:hover {
            color: rgba(var(--sidebar-text-rgb), 1);
            background-color: rgba(var(--sidebar-text-rgb), 0.08);
        }

        &:active {
            color: rgba(var(--sidebar-text-rgb), 1);
            background-color: rgba(var(--sidebar-text-rgb), 0.16);
        }
    }

    .Icon {
        height: 24px;
        width: 24px;
        padding: 0;
        margin: 0;
    }

    &.size--large {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        font-size: 31.2px;
    }

    &.size--medium {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    &.size--small {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    &.margin-left {
        margin-left: 5px;
    }
}