ag-grid/src/styles/theme-dark.styl

Advanced Javascript Datagrid. Supports raw Javascript, AngularJS 1.x, AngularJS 2.0 and Web Components

@import 'nib'

.ag-dark
    .ag-root
        border: 1px solid grey;
        color: #e0e0e0;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

    .ag-cell
        border-right: 1px solid grey;
        padding: 4px;

    .ag-header-container
        background-color: #430000;
        border-bottom: 1px solid grey;

    .ag-pinned-header
        background-color: #430000;
        border-bottom: 1px solid grey;

    .ag-header-cell
        border-right: 1px solid grey;

    .ag-header-cell-label
        padding: 4px 2px 4px 2px ;

    .ag-header-cell-text
        padding: 2px;

    .ag-header-group-cell-label
        font-weight: bold;
        padding: 4px;

    .ag-header-group-cell
        border-right: 1px solid grey;

    .ag-header-group-text
        margin-right: 2px;

    .ag-header-group-cell-with-group
        border-bottom: 1px solid grey;

    .ag-header-cell-menu-button
        padding: 2px;
        margin-top: 4px;
        border: 1px solid transparent;
        border-radius: 3px;
        box-sizing: content-box; /* When using bootstrap, box-sizing was set to 'border-box' */

    .ag-header-cell-menu-button:hover
        border: 1px solid #e0e0e0;

    .ag-header-icon
        stroke: white;
        fill: white;

    .ag-header-expand-icon:hover
        cursor: pointer;

    .ag-row-odd
        background-color: #302E2E;

    .ag-row-even
        background-color: #403E3E;

    .ag-loading-panel
        background-color: rgba(255, 255, 255, 0.5);

    .ag-loading-center
        background-color: #ffffff;
        border: 1px solid darkgray;
        border-radius: 10px;
        padding: 10px;
        color: black;

    .ag-body
        background-color: #ddd;

    .ag-body-viewport {}

    .ag-pinned-cols-viewport {}

    .ag-row-selected
        background-color: #000000;

    .ag-group-cell-entire-row
        background-color: #aaa;
        color: 222;
        padding: 4px;

    .ag-footer-cell-entire-row
        background-color: #aaa;
        color: 222;
        padding: 4px;

    .ag-group-cell
        font-style: italic;

    .ag-group-expand
        padding-right 2px;

    .ag-footer-cell
        font-style: italic;

    .ag-filter
        color: black;

    .ag-filter-checkbox
        position: relative;
        top: 2px;
        left: 2px;

    .ag-filter-header-container
        border-bottom: 1px solid lightgrey;

    .ag-filter-header-container
        border-bottom: 1px solid lightgrey;

    .ag-filter-apply-panel
        border-top: 1px solid lightgrey;
        padding: 2px;

    .ag-filter
        border: 1px solid black;
        background-color: #f0f0f0;

    .ag-selection-checkbox
        margin-left: 4px;

    .ag-paging-panel
        color: black;
        padding: 4px;

    .ag-paging-button
        margin-left: 4px;
        margin-right: 4px;

    .ag-paging-row-summary-panel
        display: inline-block;
        width: 300px;

    .ag-column-not-visible
        opacity: 0.75;
        font-style: italic;

    .ag-not-dragging
        border: 1px solid transparent;

    .ag-drop-target-above
        //border: 1px solid transparent;
        border-top: 5px solid darkgrey;

    .ag-drop-target-below
        //border: 1px solid transparent;
        border-bottom: 5px solid darkgrey;

    .ag-dragging
        border: 1px dotted darkgrey;

    .ag-list-item-selected
        color #f0f0f0;

    .ag-list-item-not-selected
        font-style italic;
        color #a0a0a0;

    .ag-tool-panel-container
        background-color: #eee;
        box-sizing: border-box;
        border: 1px solid darkgrey;
        padding: 4px;

    .ag-list-selection
        background-color: white;
        border: 1px solid darkgrey;
        box-sizing: border-box;

    .ag-visible-icons
        padding-left: 2px;
        padding-right: 2px;