calculationRow.scss

TLDR

This file contains SCSS code for styling the CalculationRow and Table components in a web application.

Classes

.CalculationRow

This class is used to style the CalculationRow component. It sets padding, position, height, borders, and background color. It also includes nested styles for the .octo-table-cell and .title classes.

.Table

This class is used to style the Table component. It includes nested styles for the .octo-table-cell.Calculation class, which sets the border and background color for the Calculation cell when it is focused or hovered.

.CalculationRow {
    padding-left: 32px;
    position: sticky;
    bottom: 0;
    height: 44px;
    border-top: solid 1px rgba(var(--body-color), 0.09);
    // To override table's specific border
    border-bottom: 0 !important;
    background-color: rgb(var(--center-channel-bg-rgb));

    .octo-table-cell {
        background-color: rgb(var(--center-channel-bg-rgb));
        align-items: center;
        justify-content: flex-end;
        border: 0;
    }

    .title {
        padding-left: 40px;
    }

    .CalculationOptions {
        width: 100%;
    }
}

.Table {
    .octo-table-cell.Calculation:focus-within {
        border: unset;
        background-color: rgb(var(--center-channel-bg-rgb));
    }

    .octo-table-cell.Calculation:hover {
        background-color: rgb(var(--center-channel-bg-rgb));
    }
}