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

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

@import 'nib'

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

    .ag-cell
        padding: 2px;

    .ag-cell:focus
        //outline: none;

    .ag-cell-focus
        border: 1px solid darkgrey;

    .ag-cell-no-focus
        border-right: 1px dotted grey;
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        border-bottom: 1px solid transparent;

    .ag-pinned-header
        background: linear-gradient(white, lightgrey);
        border-bottom: 1px solid grey;

    .ag-header-container
        background: linear-gradient(white, lightgrey);
        border-bottom: 1px solid grey;

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

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

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

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

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

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

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

    .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 black;

    .ag-header-icon
        color: maroon;

    .ag-row-selected
        background-color: powderblue !important;

    .ag-body
        .ag-row-odd
            background-color: #f6f6f6;

        .ag-row-even
            background-color: white;

    .ag-floating-top
        .ag-row
            background-color: #f0f0f0;

    .ag-floating-bottom
        .ag-row
            background-color: #f0f0f0;

    .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;

    .ag-body
        background-color: #fafafa;

    .ag-body-viewport {}

    .ag-pinned-cols-viewport {}

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

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

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

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

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

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

    .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-filter-value
        margin-left: 4px;

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

    .ag-paging-panel
        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;

    .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-popup-list .ag-list-item:hover
        background-color: lightblue;

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