ractive-ez-table/themes/theme.less

Ractive Ez UI Table

.ez-table {
    border: 1px solid @vColorLight;
    background: @vColorFront;

    .head {
        border-bottom: 1px solid @vColorMain;
        font-weight: bold;

        & > .ez-table-row {
            padding: @vSpacingSmall 0;

            & > .content { margin-left: @vSpacingMedium + @vSpacingSmall; }
            & > .ez-table-cell { cursor: pointer; }
        }
    }

    .body {
        .ez-table-row {
            border-bottom: 1px solid @vColorLight;

            &:not(.ez-selected):hover {
                background: lighten(@vColorLight, @vModTiny);
            }

            &.ez-selected {
                background: lighten(@vColorMain, @vModMedium);
                color: @vColorFront;
            }

            &.ez-dragtarget {
                background: darken(@vColorLight, @vModSmall);
            }
        }
    }

    .ez-table-row {
        align-items: center;
    }

    .ez-table-group {
        align-items: center;

        & > .label {
            display: flex;
            align-items: center;
            padding: 0 @vSpacingSmall;
            background: @vColorLight;
        }

        & > .content {
            margin-left: @vSpacingMedium + @vSpacingSmall;
        }
    }

    .ez-table-cell {
        padding: 0 @vSpacingSmall;
    }
}

.ez-table-controls {
    padding: @vSpacingSmall;
    background: @vColorLight;

    .ez-table-group-control {
        border: 1px solid @vColorLight;
        background: @vColorMain;
        color: @vColorFront;
        padding: @vSpacingTiny @vSpacingSmall;
        margin-right: @vSpacingTiny;
        cursor: pointer;

        button {
            color: inherit;
            background: inherit;
            border: 0;
            cursor: inherit;
        }
    }

    .details {
        padding-top: @vSpacingSmall;

        .columns {
            .column {
                padding: @vSpacingTiny @vSpacingSmall;
            }
        }

    }
}