kanbanCard.scss

TLDR

This file contains the styling for the KanbanCard component in a Kanban project.

Classes

KanbanCard

This class contains the CSS properties and styling for the KanbanCard component. It includes the following properties:

• flex
• position
• display
• flex-direction
• align-items
• overflow-wrap
• border-radius
• margin-bottom
• padding
• box-shadow
• cursor
• color
• transition

The KanbanCard class also includes selectors for different states of the component, such as hover and selected. It also defines additional styling for child elements within the KanbanCard component, such as .optionsMenu, .octo-tooltip, .octo-propertyvalue, .octo-icontitle, etc.

.KanbanCard {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-wrap: anywhere;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 12px 16px;
    box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
        rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;

    cursor: pointer;
    color: rgb(var(--center-channel-color-rgb));

    transition: background 100ms ease-out 0s;

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

        .optionsMenu {
            display: block;
        }
    }

    &.selected {
        background-color: rgba(90, 200, 255, 0.2);
    }

    .optionsMenu {
        background: rgb(var(--center-channel-bg-rgb));
        display: none;
        position: absolute;
        right: 12px;

        &.show {
            display: block;
        }
    }

    .octo-tooltip {
        display: flex;
        max-width: 100%;
    }

    .octo-propertyvalue {
        input[value=''] {
            display: none;
        }

        .Label.empty {
            display: block;
            padding: 0;
            margin: 0;
        }
    }

    .octo-icontitle {
        flex: 1 1 auto;
        font-weight: 600;
        line-height: 20px;
        margin-bottom: 8px;

        .octo-icon {
            font-size: 16px;
            margin-right: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
        }

        .octo-titletext {
            display: -webkit-box; // stylelint-disable-line
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 100px;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical; // stylelint-disable-line
        }
    }
}