sass.n2o.components.EditableCell.scss Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of n2o-react

The newest version!

.editable-cell-empty {
    width: 100%;
    min-width: 100px;
    background-color: $white;
    border: $input-select-border;
}

.editable-cell-empty:hover {
    background-color: #fff;
    transition: 0.3s;
}

.table-hover tbody tr:hover,
.table-hover .table-active:hover {
    .editable-cell-empty {
        background-color: #fff;
    }
}

.n2o-editable-cell {
    .n2o-editable-cell-text {
        span::before {
            content: "\a0";
        }

        span::after {
            content: "\a0";
        }
    }

    .form-control:focus {
        border-color: #163851;
        box-shadow: none;
        padding: 1px 0 2px 2px;
    }

    min-width: 100px;
    width: 100%;
    max-width: max-content;
    text-align: left;

    &:hover {
        color: #263238;
        background-color: #fff;
        outline: 0;
        box-shadow: 0 0 0 1px #263238;
        border: none;
        cursor: text;
        transition: 0.3s;
    }

    .n2o-input-select .n2o-input-container {
        min-height: $input-select-editable-cell-min-height;

        input {
            padding: 0;
        }
    }
}

.n2o-editable-cell:focus {
    outline: 0;
}

.n2o-editable-cell-control > div,
.n2o-advanced-table-edit-control,
.n2o-editable-cell-control .n2o-calendar-button {
    height: 100%;
    padding: 0;
}

.n2o-editable-cell-control {
    .n2o-advanced-table-edit-control {
        padding-left: 0.75rem !important;
    }
}