ag-grid/src/styles/ag-grid.scss

// if we don't do this, then the width and height of the grid would be ignored,
// as there is no default display for the element ag-grid-a2 (as it's not a natural dom element)
ag-grid-angular {
    display: block;
}

ag-grid-ng2 {
    display: block;
}

ag-grid {
    display: block;
}

ag-grid-polymer {
    display: block;
}

ag-grid-aurelia {
    display: block;
}

.ag-rtl {
    //text-align right
    direction: rtl;
}

.ag-ltr {
    //text-align left
    direction: ltr;
}

.ag-select-agg-func-popup {
    position: absolute;
}

// when we drag the mouse in ag-Grid, this class gets added / removed from the body, so that
// the mouse isn't selecting text when dragging.
.ag-body-no-select {
    user-select: none;
}

.ag-root-wrapper {
    position: relative; // set to relative, so absolute popups appear relative to this
}

.ag-root-wrapper.ag-layout-normal {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ag-root-wrapper-body {
    display: flex;
    flex-direction: row;
}

.ag-layout-normal.ag-root-wrapper-body {
    flex-grow: 1;
    height: 0px;
    min-height: 0px;
}

.ag-root {
    box-sizing: border-box;
    overflow: hidden; // was getting some 'should be there' scrolls, this sorts it out
    position: relative; // set to relative, so absolute popups appear relative to this
    display: inline-block;
    width: 0px;
    min-width: 0px;
    flex: 1;
}

.ag-layout-normal.ag-root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ag-font-style {
    cursor: default;
    user-select: none; // disable user mouse selection
}

.ag-popup-backdrop {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.ag-header {
    box-sizing: border-box;
    //overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: flex;
}

.ag-pinned-left-header {
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    overflow: hidden;
}

.ag-pinned-right-header {
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    overflow: hidden;
}

.ag-header-viewport {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    width: 0px;
    min-width: 0px;
    flex: 1;
}

.ag-header-row {
    position: absolute;
}

.ag-header-container {
    box-sizing: border-box;
    height: 100%;
    position: relative;
    white-space: nowrap;
}

.ag-header-overlay {
    display: block;
    position: absolute;
}

.ag-header-cell {
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    position: absolute;
    vertical-align: bottom;
    //float left // safari doesn't align if we don't float
}

.ag-floating-filter {
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
}

.ag-floating-filter-body {
    height: 20px;
    margin-right: 25px;
}

.ag-floating-filter-full-body {
    height: 20px;
    width: 100%;
}

.ag-floating-filter-input {
    width: 100%;
}

.ag-floating-filter-input:read-only {
    background-color: #eee;
}

.ag-floating-filter-menu {
    position: absolute;
    user-select: none;
}
// the ghost header cell doesn't live inside the grid, it's parent is the body element,
// so we cannot style using standard themes. hence we break the rules, and style it here
.ag-dnd-ghost {
    background: #e5e5e5;
    border: 1px solid black;
    box-sizing: border-box;
    cursor: move;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    padding: 3px;
    position: absolute;
    text-overflow: ellipsis;
    user-select: none;
    //img
    //    vertical-align: middle;
    //    border: 0px;
}

.ag-dnd-ghost-icon {
    display: inline-block;
    float: left;
    padding: 2px;
}

.ag-dnd-ghost-label {
    display: inline-block;
}

.ag-header-group-cell {
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    //float: left // safari doesn't align if we don't float
}
// we needed to have display of table-cell below,
// as with inline-block, the layout messed up in Safari (not problems in the others).
.ag-header-group-cell-label {
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
}

.ag-header-cell-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-header-cell-resize {
    cursor: col-resize;
    height: 100%;
    width: 4px;
}

.ag-ltr .ag-header-cell-resize {
    float: right;
}

.ag-ltr .ag-pinned-right-header .ag-header-cell-resize {
    float: left;
}

.ag-rtl .ag-header-cell-resize {
    float: left;
}

.ag-rtl .ag-pinned-left-header .ag-header-cell-resize {
    float: right;
}

.ag-ltr .ag-header-select-all {
    float: left;
}

.ag-rtl .ag-header-select-all {
    float: right;
}

.ag-header-expand-icon {
    padding-left: 4px;
}

.ag-header-cell-menu-button {
    float: right;
}

.ag-overlay {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.ag-overlay-panel {
    display: table;
    height: 100%;
    pointer-events: none;
    width: 100%;
}

.ag-overlay-wrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.ag-column-panel {
    display: flex;
    overflow-y: auto;
}

.ag-column-panel-center {
    display: flex;
    min-height: 400px;
    flex-direction: column;
    flex-grow: 1;
    overflow-x: hidden;
    max-height: 100vh;
}

// for when auto height is used but there is no row data
.ag-layout-auto-height.ag-body-container {
    min-height: 50px;
}

// for when auto height is used but there is no row data
.ag-layout-auto-height.ag-overlay-no-rows-wrapper {
    padding-top: 30px;
}


.ag-body {
    box-sizing: border-box;
    display: flex;
    position: relative; // needed so rows translate is relative to this container
}

.ag-layout-normal.ag-body {
    flex: 1;
    height: 0px; // that's the min height, 'flex 1' then extends it to take all available space
    min-height: 0px; // min-height needed for firefox
}

// we want the pinned left to always be on the left, and the pinned right
// always to be on the right. hence we do row-reverse for rtl, otherwise having
// RTL applied will reverse the order of the flex layout (and invert what's left and right)
.ag-rtl .ag-body { flex-direction: row-reverse; }
.ag-ltr .ag-body { flex-direction: row; }

.ag-rtl .ag-floating-top { flex-direction: row-reverse; }
.ag-ltr .ag-floating-top { flex-direction: row; }

// we don't want right and left pinned flipped when doing RTL
.ag-ltr .ag-header { flex-direction: row; }
.ag-rtl .ag-header { flex-direction: row-reverse; }

.ag-floating-top {
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
}

.ag-pinned-left-floating-top {
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    position: relative; // otherwise the % width of children is not relative to this element
}

.ag-pinned-right-floating-top {
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    position: relative; // otherwise the % width of children is not relative to this element
}

.ag-floating-top-viewport {
    box-sizing: border-box;
    overflow: hidden;
    width: 0px;
    min-width: 0px;
    flex: 1;
}

.ag-layout-normal.ag-floating-top-viewport {
    height: 100%;
}

.ag-floating-top-container {
    box-sizing: border-box;
    position: relative;
    white-space: nowrap;
}

.ag-floating-bottom {
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
}

.ag-pinned-left-floating-bottom {
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    position: relative; // otherwise the % width of children is not relative to this element
}

.ag-pinned-right-floating-bottom {
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    position: relative; // otherwise the % width of children is not relative to this element
}

.ag-floating-bottom-viewport {
    box-sizing: border-box;
    overflow: hidden;
    flex: 1;
    width: 0px;
    min-width: 0px;
}

.ag-floating-bottom-container {
    box-sizing: border-box;
    position: relative;
    white-space: nowrap;
}

.ag-pinned-left-cols-container {
    display: inline-block;
    position: relative;
}

.ag-pinned-right-cols-viewport {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.ag-pinned-left-cols-viewport {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.ag-pinned-right-cols-container {
    display: inline-block;
    position: relative;
}

.ag-pinned-left-cols-viewport-wrapper {
    height: 100%;
    overflow: hidden;
}

.ag-body-viewport-wrapper {
    height: 100%;
    width: 0px; // mind width, flex grows the center to fit
    min-width: 0px; // width didn't do the trick in firefox, so needed min-width also
    flex: 1;
    overflow: hidden;
}

.ag-body-viewport {
    overflow-x: auto;
    overflow-y: auto; // if we are pinning to the right, overflow y will be hidden
}

.ag-layout-normal.ag-body-viewport {
    height: 100%;
}

.ag-full-width-viewport-wrapper {
    height: 100%;
    width: 100%;
    display: inline-block;
    pointer-events: none;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
}

.ag-full-width-viewport {
    box-sizing: border-box;
    height: 100%;
    // because the full width container is an overlay over the rest of the grid, we cannot
    // have it consume mouse events, otherwise no mouse events would be allowed on the
    // rest of the grid
    pointer-events: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.ag-full-width-container {
    // if we don't put this in, the RHS will overflow into the viewports margin,
    // no idea why, trial and error
    overflow: hidden;
    position: relative;
    width: 100%;
}

.ag-floating-bottom-full-width-container {
    display: inline;
    height: 100%;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.ag-floating-top-full-width-container {
    display: inline;
    height: 100%;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.ag-full-width-row {
    overflow: hidden;
    // turn events back on, as we removed them in the parent
    pointer-events: all;
}

.ag-body-container {
    display: inline-block;
    margin-bottom: -2px;
    position: relative;
}

// for animations, allows rows to slide up and down,
.ag-row-animation .ag-row {
    transition: transform 0.4s, top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
}

.ag-row-no-animation .ag-row {
    transition: background-color 0.1s;
}

.ag-row {
    box-sizing: border-box;
    position: absolute;
    white-space: nowrap;
    width: 100%;
}

.ag-column-moving {
    .ag-cell {
        transition: left 0.2s;
    }

    .ag-header-cell {
        transition: left 0.2s;
    }

    .ag-header-group-cell {
        transition: left 0.2s, width 0.2s;
    }
}

.ag-column-drop {
    box-sizing: border-box;
    width: 100%;
}

.ag-column-drop-vertical {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 50px;
    overflow: hidden;

    .ag-column-drop-list {
        flex-grow: 1;
        height: 20px;
        overflow-x: auto;
    }

    .ag-column-drop-cell {
        display: flex;

        .ag-column-drop-cell-text {
            overflow: hidden;
            flex: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .ag-column-drop-empty-message {
        display: block;
    }

    .ag-column-drop-cell-button {
        line-height: 16px;
    }
}

.ag-ltr .ag-column-drop-vertical .ag-column-drop-cell-button {
    float: right;
}

.ag-rtl .ag-column-drop-vertical .ag-column-drop-cell-button {
    float: left;
}

.ag-column-drop-horizontal {
    white-space: nowrap;
    overflow: hidden;

    .ag-column-drop-cell {
        display: inline-block;
    }

    .ag-column-drop-empty-message {
        display: inline-block;
    }

    .ag-column-drop-list {
        height: 100%;
    }
}

.ag-cell {
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    // this float was needed for layout in safari, without it, when images were used (eg country flags),
    // then the layout was broken
    //float: left
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-cell-with-height {
    height: 100%;
}

// this is used by the animateShowChangeCellRenderer. it is arguable that this belongs in the themes,
// however it is not tied to color, only placement and visiblity, which is behaviour and not style,
// thus belongs here, besides it doesn't change wih the themes
.ag-value-slide-out {
    margin-right: 5px;
    opacity: 1;
    transition: opacity 3s, margin-right 3s; // as value fades, it also moves to the left via the margin setting
    transition-timing-function: linear;
}

.ag-value-slide-out-end {
    margin-right: 10px;
    opacity: 0;
}

.ag-opacity-zero {
    opacity: 0;
}

.ag-cell-edit-input {
    height: 100%;
    width: 100%;
}

.ag-group-cell-entire-row {
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    //position: absolute // took this out because of https://github.com/ag-grid/angular-grid/issues/115
    width: 100%;
}

.ag-footer-cell-entire-row {
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    //position: absolute // took this out because of https://github.com/ag-grid/angular-grid/issues/115
    width: 100%;
}

.ag-popup-editor {
    position: absolute;
    user-select: none;
}

.ag-menu {
    max-height: 100%;
    overflow-y: auto;
    position: absolute;
    user-select: none;
}

.ag-menu-column-select-wrapper {
    height: 300px;
    overflow: auto;
    width: 200px;
}

.ag-menu-list {
    border-collapse: collapse;
    display: table;
}

.ag-menu-option {
    display: table-row;
}

.ag-menu-option-text {
    display: table-cell;
}

.ag-menu-option-shortcut {
    display: table-cell;
}

.ag-menu-option-icon {
    display: table-cell;
}

.ag-menu-option-popup-pointer {
    display: table-cell;
}

.ag-menu-separator {
    display: table-row;
}

.ag-menu-separator-cell {
    display: table-cell;
}

.ag-filter {
}
//z-index: 100

.ag-virtual-list-viewport {
    height: 100%;
    overflow-x: auto;
    width: 100%;
}

.ag-virtual-list-container {
    overflow: hidden;
    position: relative;
}

.ag-rich-select {
    cursor: default;
    outline: none;
}

.ag-rich-select-row {
    white-space: nowrap;
}

.ag-rich-select-list {
    height: 200px;
    width: 200px;
}

.ag-set-filter-list {
    height: 200px;
    width: 200px;
}

.ag-set-filter-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-virtual-list-item {
    position: absolute;
    width: 100%;

    span:empty:not(.ag-icon) {
        border-left: 1px solid transparent;
    }
}

.ag-filter-filter {
    box-sizing: border-box;
    width: 100%;
}

.ag-floating-filter-body {
    input {
        height: 19px;
        margin: 0;
        width: 100%;
    }
}

.ag-floating-filter-full-body {
    input {
        height: 19px;
        margin: 0;
        width: 100%;
    }
}

.ag-filter-select {
    margin: 4px 4px 0 4px;
    width: 110px;
}

.ag-paging-panel {
}

.ag-list-selection {
    cursor: default;
    user-select: none;
}

.ag-column-panel {
    box-sizing: border-box;
    cursor: default;
    user-select: none;
    width: 200px;
}

.ag-column-container {
    flex-grow: 1;
    height: 50px;
    overflow: auto;
}

.ag-column-select-indent {
    display: inline-block;
}

.ag-ltr .ag-column-select-column {
    margin-left: 16px;
}

.ag-rtl .ag-column-select-column {
    margin-right: 16px;
}

.ag-column-select-column,
.ag-column-select-column-group {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-overflow: ellipsis;
    white-space: nowrap;

    .ag-column-select-label,
    .ag-column-select-column-group-label {
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ag-column-drag {
        min-width: 16px;
        flex-grow: 0;
        flex-shrink: 0;
    }
}

.ag-column-select-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ag-tool-panel .ag-column-select-panel {
    flex-grow: 4;
}

.ag-tool-panel-horizontal-resize {
    cursor: col-resize;
    height: 100%;
    position: absolute;
    top: 0;
    width: 5px;
    z-index: 1;
}

.ag-rtl .ag-tool-panel-horizontal-resize {
    float: right;
    transform: translateX(3px);
}

.ag-ltr .ag-tool-panel-horizontal-resize {
    float: left;
    transform: translateX(-3px);
}

.ag-menu-column-select-wrapper .ag-column-select-panel {
    height: 100%;
}

.ag-hidden {
    display: none !important;
}

.ag-visibility-hidden {
    visibility: hidden !important;
}

.ag-faded {
    opacity: 0.3;
}

.ag-width-half {
    display: inline-block;
    width: 50%;
}
//.ag-tool-panel-container
//    user-select: none;
//    cursor: default;
//    width: 200px;
// setting shake class to an item will give it a left ot right animation
// used for the 'left' and 'rigth' arrows when dragging columns and scrolling
.ag-shake-left-to-right {
    animation-direction: alternate;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    animation-name: ag-shake-left-to-right;
}

@keyframes ag-shake-left-to-right {
    from {
        padding-left: 6px;
        padding-right: 2px;
    }

    to {
        padding-left: 2px;
        padding-right: 6px;
    }
}

$icons-path: "./icons/" !default;

@if variable-exists(ag-icons-path) {
    $icons-path: $ag-icons-path;
}

$ag-icons-filter: "initial" !default;

@mixin icon-background($icon) {
    background: transparent url("#{$icons-path}#{$icon}.svg") center no-repeat;
    background-size: 12px 12px;
    filter: $ag-icons-filter;
    height: 12px;
    width: 12px;
}

/* icons are used outside of the grid root (in the ghost) */
$icons: aggregation arrows asc checkbox-checked-readonly checkbox-checked checkbox-indeterminate-readonly checkbox-indeterminate checkbox-unchecked-readonly checkbox-unchecked
    column columns contracted copy cut desc expanded eye-slash eye filter group indeterminate left loading menu minus none not-allowed paste pin pivot plus right small-left
    small-right small-up small-down tick cross tree-open tree-closed tree-indeterminate;

@each $icon in $icons {
    .ag-icon-#{$icon} {
        display: inline-block;

        @include icon-background("#{$icon}");
    }
}

.loading-filter {
    background-color: #e6e6e6;
    height: 100%;
    padding: 5px;
    position: absolute;
    top: 34px;
    width: 100%;
    z-index: 1;
}

.ag-details-row {
    height: 100%;
    width: 100%;
}

.ag-details-grid {
    height: 100%;
    width: 100%;
}

.ag-column-select-header {
    display: flex;
    flex-direction: row;
}

$toolpanel-indent-size: 10px !default;
$row-group-indent-size: 10px !default;

// Default values for themes that do not use the mixins
@for $i from 1 to 50 {
    .ag-ltr .ag-toolpanel-indent-#{$i} {
        padding-left: $i * $toolpanel-indent-size;
    }

    .ag-rtl .ag-toolpanel-indent-#{$i} {
        padding-right: $i * $toolpanel-indent-size;
    }

    .ag-ltr .ag-row-group-indent-#{$i} {
        padding-left: $i * $row-group-indent-size;
    }

    .ag-rtl .ag-row-group-indent-#{$i} {
        padding-right: $i * $row-group-indent-size;
    }
}

.ag-tool-panel {
    display: flex;
    flex-direction: row-reverse;
    box-sizing: border-box;

    .ag-side-buttons {
        width: 20px;

        button {
            display: block;
            transform: rotate(90deg) translateY(-20px);
            transform-origin: left top 0;
            white-space: nowrap;
            outline: none;
        }
    }

    .panel-container {
        width: 180px;
    }

    &.full-width .panel-container {
        width: 200px;
    }
}

.ag-rtl .ag-tool-panel {
    .ag-side-buttons {
        button {
            transform: rotate(-90deg) translatex(20px);
            transform-origin: right bottom 0;
        }
    }
}

.ag-row-inline-editing {
    z-index: 1;
}