angular-ui-grid
Version:
A data grid for Angular
92 lines (80 loc) • 1.86 kB
text/less
@import (reference) 'variables.less';
@import (reference) 'elements.less';
.ui-grid-menu-button {
z-index: 2;
position: absolute;
right: 0;
top: 0;
background: @headerBackgroundColor;
border: 0;
border-left: @gridBorderWidth solid @borderColor;
border-bottom: @gridBorderWidth solid @borderColor;
cursor: pointer;
height: 32px;
font-weight: normal;
}
.ui-grid-menu-button .ui-grid-icon-container {
margin-top: 5px;
margin-left: 2px;
}
.ui-grid-menu-button .ui-grid-menu {
right: 0;
.ui-grid-menu-mid {
overflow: scroll;
}
}
.ui-grid-menu {
overflow: hidden;
max-width: 320px;
z-index: 2; // So it shows up over grid canvas
position: absolute;
right: 100%;
padding: 0 10px 20px 10px;
cursor: pointer;
box-sizing: border-box;
}
.ui-grid-menu-item {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-grid-menu .ui-grid-menu-inner {
background: @menuBackgroundColor;
border: @gridBorderWidth solid @borderColor;
position: relative;
white-space: nowrap;
.rounded(@gridBorderRadius);
}
.ui-grid-menu .ui-grid-menu-inner ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
padding: 0;
.ui-grid-menu-item {
color: @menuTextColor;
min-width: 100%;
padding: 8px;
text-align: left;
background: transparent;
border: none;
cursor: default;
}
button.ui-grid-menu-item {
cursor: pointer;
// Show a shadow when hovering over a menu item
&:hover,
&:focus {
background-color: @menuHoverColor;
}
&.ui-grid-menu-item-active {
background-color: @menuSelectedColor;
}
}
}
// Show a bottom border on all but the last menu item
li:not(:last-child) > .ui-grid-menu-item {
border-bottom: @gridBorderWidth solid @borderColor;
}
}