generator-craftskeleton/generators/app/templates/_plugins/supertable/resources/css/SuperTableInput.css

Starterkit for Craft CMS 2.x (Multi-Environment Configs with HeartyConfig, Gulp, and Bower for Dependencie-Management) made by interpunkt. ag

/* ==========================================================================
// Super Table Styles
// ========================================================================== */

.superTableContainer {
    position: relative;
}


/* ==========================================================================
// Column-Layout Styles
// ========================================================================== */

table.editable.superTable {
    margin-top: 10px;
}

table.editable.superTable tbody tr td {
    text-align: left;
}

table.editable.superTable tbody tr td > .field > .heading {
    display: none;
}

table.editable.superTable tbody tr td.action {
    background: #ebedef;
}

body.ltr table.editable.superTable tbody tr td:nth-child(2) {
    border-left: none;
}

.superTableColumn table.editable.superTable {
    table-layout: fixed;
}

.superTableColumn table.editable.superTable th.col-header[colspan="2"] {
    width: 29px;
}

.superTableColumn table.editable.superTable tbody tr td.action + td.action {
    padding-left: 4px;
}

/* Tweak the required asterisks a little */
.superTableColumn .col-header .heading-text.required:after {
    margin: -4px 0 0 1px;
}

/* Tweak the info icon a little */
.superTableColumn .col-header .heading-text .info:before {
    margin: 1px 0 0 1px;
}




/* ==========================================================================
// Row-Layout Styles
// ========================================================================== */

.superTableRow {
    margin: 10px 0;
}

.superTableRow table.editable.superTable {
    margin: 0;
    display: block;
}

.superTableRow .rowHeader {
    font-weight: bold;
    vertical-align: top;
    font-size: 11px;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.5);
    border-radius: 3px 3px 0 0;
    padding: 8px 7px !important;
    text-align: left;
    white-space: nowrap;
    background: #f9fafa;

    -webkit-box-shadow: 0 2px 1px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 1px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 1px -2px rgba(0, 0, 0, 0.2);
}

.superTableRow .rowHeader .heading-text {
    min-height: 30px;
    display: block;
}

/* Tweak the required asterisks a little */
.superTableRow .rowHeader .heading-text.required:after {
    margin: -4px 0 0 1px;
}

/* Tweak the info icon a little */
.superTableRow .rowHeader .heading-text .info:before {
    margin: 1px 0 0 1px;
}

.superTableRow .placeholder {
    width: 25px !important;
}

.superTableRow table {
    position: relative;
}

.superTableRow table.editable + .btn.add {
    margin-top: 10px;
    
    display: inline-block;
    padding: 6px 12px;
    border: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;

    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

    color: #29323d;
    background-image: -webkit-linear-gradient(white, #fafafa);
    background-image: -moz-linear-gradient(white, #fafafa);
    background-image: -ms-linear-gradient(white, #fafafa);
    background-image: -o-linear-gradient(white, #fafafa);
    background-image: linear-gradient(white, #fafafa);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.superTableRow tfoot tr {
    right: 0;
    width: 45px;
    position: absolute;
    top: 0;
    height: 100%;
    text-align: center;
    background: #ebedef;
    opacity: 1;

    border-left: 1px solid rgba(0, 0, 0, 0.07);
}

.superTableRow .floating .icon.move:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -17px;
}

.superTableRow .floating .icon.delete:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 3px;
}

/* Special-case for inner Matrix fields for Row Layout. When collapsed, breaks out of the table container */
/* so fix that was some positioning fixes */
.superTableRow .matrixblock.collapsed .titlebar {
    position: relative;
}

.superTableRow .matrixblock.collapsed .preview {
    position: absolute;
}

.superTableRow .matrixblock.collapsed .actions {
    background: #eef0f1;
    right: 0;
    padding-right: 5px;
}





/* ==========================================================================
// Provide special formatting for some third-party field types. Just to make things clean
// ========================================================================== */

.superTableContainer .field .fruitlinkit .fruitlinkit-options,
.superTableContainer .field .fruitlinkit .fruitlinkit-type,
.superTableContainer .field .linkit .linkit-type {
    margin: 7px 0;
}

.superTableContainer .field .fruitlinkit .fruitlinkit-type {
    margin-right: 7px;
}

.superTableContainer .field .fruitlinkit .fruitlinkit-options,
.superTableContainer .field .fruitlinkit .fruitlinkit-type-option,
.superTableContainer .field .fruitlinkit .fruitlinkit-text,
.superTableContainer .field .fruitlinkit .fruitlinkit-target,
.superTableContainer .field .linkit .linkit-type-option,
.superTableContainer .field .linkit .linkit-text,
.superTableContainer .field .linkit .linkit-target {
    margin-bottom: 7px;
}