angular-ui-grid
Version:
A data grid for Angular
87 lines (69 loc) • 1.89 kB
text/less
@import (reference) 'variables.less';
@import (reference) 'elements.less';
.ui-grid {
border: @gridBorderWidth solid @borderColor;
box-sizing: content-box; // If bootstrap (or another included library) makes the default sizing on element "border-box", then calculations get messed up
.rounded(@gridBorderRadius);
.transform(translateZ(0));
}
.ui-grid-vertical-bar {
position: absolute;
right: 0;
width: 0;
}
.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar, .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
width: @gridBorderWidth;
}
.ui-grid-scrollbar-placeholder{
background-color: transparent;
}
.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar {
background-color: @headerVerticalBarColor;
}
.ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
background-color: @verticalBarColor;
}
.ui-grid-header-cell:last-child .ui-grid-vertical-bar {
right: -1px; // TODO(c0bra): Should this be grid width? Test column resizing with custom grid border width
width: @gridBorderWidth;
background-color: @headerVerticalBarColor;
}
.ui-grid-clearfix {
&:before, &:after {
content: "";
display: table;
}
&:after {
clear:both;
}
}
.ui-grid-invisible {
visibility: hidden;
}
// Wraps the contents inside the grid directive with a relatively-positioned element so that all absolute elements are positioned relative to the grid, and not the page
.ui-grid-contents-wrapper {
position: relative;
height: 100%;
width: 100%;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
.ui-grid-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.ui-grid-icon-button {
background-color: transparent;
border: none;
padding: 0;
}
.clickable {
cursor: pointer;
}