calculation.scss

TLDR

This file contains the styles for a Calculation component. It defines the styles for the component itself as well as its various states and child elements.

Classes

Calculation

This class represents the Calculation component. It defines the styles for the component and its various states:

• cursor: pointer makes the component clickable.
• .disabled class removes the click cursor when the component is disabled.
• .none class is applied when the component has no content. It sets the opacity to 0 and defines styles for the .calculationLabel child element when the component is in this state.
• .hovered class is applied when the component is being hovered. It sets the opacity to 0.64.
• .menuOpen class is applied when the menu of the component is open. It sets the opacity to 1.

.calculationLabel

This class represents the label element inside the Calculation component. It defines the styles for the label:

• text-transform: uppercase makes the label text display in uppercase.
• font-size: 12px sets the font size to 12 pixels.
• opacity: 0.8 sets the opacity of the label to 0.8.
• margin-right: 8px adds a margin of 8 pixels to the right of the label.
• letter-spacing: 0.8px increases the spacing between characters to 0.8 pixels.

.calculationValue

This class represents the value element inside the Calculation component. It defines the styles for the value:

• top: -1px positions the value element 1 pixel higher than its normal position.
• position: relative sets the position of the value element to relative.
• font-weight: bold makes the value text appear in bold.
• max-height: 100% sets the maximum height of the value element to 100% of its parent container.
• overflow: hidden hides any content that exceeds the height of the value element.
• text-overflow: ellipsis adds ellipsis to the text when it overflows the height of the value element.

.ChevronUpIcon

This class represents an icon element inside the Calculation component. It defines the styles for the icon:

• font-size: 22px sets the font size of the icon to 22 pixels.
• line-height: 14px sets the line height of the icon to 14 pixels.
• padding: 0 removes any padding from the icon element.

.CalculationOptions

This class represents the options element inside the Calculation component. It defines the styles for the options:

• right: 0 positions the options element to the right of its parent container.
• top: 0 positions the options element to the top of its parent container.
• position: absolute sets the position of the options element to absolute.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

.Calculation {
    cursor: pointer;
    transition: opacity 0.1s ease-in;

    &.disabled {
        cursor: unset;
    }

    &.none {
        opacity: 0;

        .calculationLabel {
            text-transform: capitalize;
            letter-spacing: 0;
            font-size: 14px;
            margin-right: 0;
        }

        &.hovered {
            opacity: 0.64;
        }

        &.menuOpen {
            opacity: 1;
        }
    }

    .calculationLabel {
        text-transform: uppercase;
        font-size: 12px;
        opacity: 0.8;
        margin-right: 8px;
        letter-spacing: 0.8px;
    }

    .calculationValue {
        top: -1px;
        position: relative;
        font-weight: bold;
        max-height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ChevronUpIcon {
        font-size: 22px;
        line-height: 14px;
        padding: 0;
    }

    .CalculationOptions {
        right: 0;
        top: 0;
        position: absolute;
    }
}