UNPKG

angular-ui-grid

Version:

A data grid for Angular

251 lines (203 loc) 4.82 kB
@import (reference) 'variables.less'; @import (reference) 'elements.less'; .ui-grid-top-panel-background { background-color: @headerBackgroundColor; } @topPanelRadius: @gridBorderRadius - @gridBorderWidth; .ui-grid-header { border-bottom: 1px solid @borderColor; box-sizing: border-box; } .ui-grid-top-panel { position: relative; overflow: hidden; // Disable so menus show up font-weight: bold; .ui-grid-top-panel-background; .border-radius(@topPanelRadius, 0, 0, @topPanelRadius); } .ui-grid-header-viewport { overflow: hidden; // Disable so menus show up } .ui-grid-header-canvas { // Clearfix for floating header cells &:before, &:after { content: ""; display: -ms-flexbox; display: flex; line-height: 0; } &:after { clear:both; } } .ui-grid-header-cell-wrapper { position: relative; display: -ms-flexbox; display: flex; box-sizing: border-box; height: 100%; width: 100%; } .ui-grid-header-cell-row { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .ui-grid-header-cell { position: relative; box-sizing: border-box; background-color: inherit; border-right: @gridBorderWidth solid; border-color: @headerVerticalBarColor; &:last-child { border-right: 0; } .user-select(none); // Default to width 0 so header height can calculate right. Otherwise // the header cells will flow onto the next line of the header container // and cause the header height to be calculated as twice the height // it should be. The column widths are calculated dynamically width: 0; .sortable { cursor: pointer; } // Moves the sort priority number closer to the icon .ui-grid-sort-priority-number { margin-left: -8px; } } /* Fixes IE word-wrap if needed on header cells */ .ui-grid-header-cell > div { -ms-flex-basis: 100%; flex-basis: 100%; } // Make vertical bar in header row fill the height of the cell completely .ui-grid-header .ui-grid-vertical-bar { top: 0; bottom: 0; } .ui-grid-column-menu-button { position: absolute; right: @gridBorderWidth; // So it doesn't overlay the vertical bar top: 0; .ui-grid-icon-angle-down { vertical-align: sub; } } .ui-grid-header-cell-last-col { .ui-grid-cell-contents, .ui-grid-filter-container, .ui-grid-column-menu-button, & + .ui-grid-column-resizer.right { margin-right: 13px; } } .ui-grid-render-container-right { .ui-grid-header-cell-last-col { .ui-grid-cell-contents, .ui-grid-filter-container, .ui-grid-column-menu-button, & + .ui-grid-column-resizer.right { margin-right: 28px; } } } .ui-grid-column-menu { position: absolute; } /* Slide up/down animations */ .ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid { &.ng-hide-add, &.ng-hide-remove { .transition(all, 0.04s, linear); display: block !important; } &.ng-hide-add.ng-hide-add-active, &.ng-hide-remove { .transform(translateY(-100%)); } &.ng-hide-add, &.ng-hide-remove.ng-hide-remove-active { .transform(translateY(0)); } } /* Slide up/down animations */ .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid { &.ng-hide-add, &.ng-hide-remove { .transition(all, 0.04s, linear); display: block !important; } &.ng-hide-add.ng-hide-add-active, &.ng-hide-remove { .transform(translateY(-100%)); } &.ng-hide-add, &.ng-hide-remove.ng-hide-remove-active { .transform(translateY(0)); } } .ui-grid-filter-container { padding: 4px 10px; position: relative; .ui-grid-filter-button { position: absolute; top: 0; bottom: 0; right: 0; [class^="ui-grid-icon"] { position: absolute; top: 50%; line-height: 32px; margin-top: -16px; right: 10px; opacity: 0.66; &:hover { opacity: 1; } } } .ui-grid-filter-button-select { position: absolute; top: 0; bottom: 0; right: 0; [class^="ui-grid-icon"] { position: absolute; top: 50%; line-height: 32px; margin-top: -16px; right: 0px; opacity: 0.66; &:hover { opacity: 1; } } } } input[type="text"].ui-grid-filter-input { box-sizing: border-box; padding: 0 18px 0 0; margin: 0; width: 100%; border: @gridBorderWidth solid @borderColor; .border-radius(@gridBorderRadius); &:hover { border: @gridBorderWidth solid @borderColor; } } select.ui-grid-filter-select { padding: 0; margin: 0; border: 0; width: 90%; border: @gridBorderWidth solid @borderColor; .border-radius(@gridBorderRadius); &:hover { border: @gridBorderWidth solid @borderColor; } .ui-grid-filter-cancel-button-hidden & { width: 100%; } }