angular-ui-grid
Version:
A data grid for Angular
251 lines (203 loc) • 4.82 kB
text/less
@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 ;
}
&.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 ;
}
&.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%;
}
}