angular-ui-grid
Version:
A data grid for Angular
298 lines (269 loc) • 6.38 kB
text/less
@import "./variables";
@import "./elements";
@btnColor: #eee;
@btnBgColor: #dadada;
@btnBorderHoverColor: #adadad;
@btnActiveColor: #8c8c8c;
.ui-grid-pager-panel {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
box-sizing: content-box;
}
.ui-grid-pager-container {
float: left;
}
.ui-grid-pager-control {
padding: 5px 0;
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-right: 10px;
margin-left: 10px;
min-width: 135px;
float: left;
button, span, input {
margin-right: 4px;
}
button {
height: 25px;
min-width: 26px;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background: #f3f3f3;
border: 1px solid #ccc;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: @btnColor;
&:hover {
border-color: @btnBorderHoverColor;
text-decoration: none;
}
&:focus {
border-color: @btnActiveColor;
text-decoration: none;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
&:active {
border-color: @btnBorderHoverColor;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
&:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
&:hover,
&:focus {
background-color: #c8c8c8;
border-color: @btnActiveColor;
}
}
&:hover, &:focus, &:active {
color: @btnColor;
background: @btnBgColor;
}
&[disabled] {
cursor: not-allowed;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
&:hover,
&:focus {
background-color: #f3f3f3;
border-color: #ccc;
}
}
}
input {
display: inline;
height: 26px;
width: 50px;
vertical-align: top;
color: #555555;
background: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
&:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
&[disabled],
&[readonly],
&::-moz-placeholder {
opacity: 1;
}
&::-moz-placeholder,
&:-ms-input-placeholder,
&::-webkit-input-placeholder {
color: #999;
}
&::-ms-expand {
border: 0;
background-color: transparent;
}
&[disabled],
&[readonly] {
background-color: #eeeeee;
}
&[disabled] {
cursor: not-allowed;
}
}
.ui-grid-pager-max-pages-number {
vertical-align: bottom;
> * {
vertical-align: bottom;
}
abbr {
border-bottom: none;
text-decoration: none;
}
}
.first-bar {
width: 10px;
border-left: 2px solid #4d4d4d;
margin-top: -6px;
height: 12px;
margin-left: -3px;
}
.first-bar-rtl {
width: 10px;
border-left: 2px solid #4d4d4d;
margin-top: -6px;
height: 12px;
margin-right: -7px;
}
.first-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 8.7px 5px 0;
border-color: transparent #4d4d4d transparent transparent;
margin-left: 2px;
}
.next-triangle {
margin-left: 1px;
}
.prev-triangle {
margin-left: 0;
}
.last-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 8.7px;
border-color: transparent transparent transparent #4d4d4d;
margin-left: -1px;
}
.last-bar {
width: 10px;
border-left: 2px solid #4d4d4d;
margin-top: -6px;
height: 12px;
margin-left: 1px;
}
.last-bar-rtl {
width: 10px;
border-left: 2px solid #4d4d4d;
margin-top: -6px;
height: 12px;
margin-right: -11px;
}
}
.ui-grid-pager-row-count-picker {
float: left;
padding: 5px 10px;
select {
color: #555555;
background: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
height: 25px;
width: 67px;
display: inline;
vertical-align: middle;
&:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
&[disabled],
&[readonly],
&::-moz-placeholder {
opacity: 1;
}
&::-moz-placeholder,
&:-ms-input-placeholder,
&::-webkit-input-placeholder {
color: #999;
}
&::-ms-expand {
border: 0;
background-color: transparent;
}
&[disabled],
&[readonly] {
background-color: #eeeeee;
}
&[disabled] {
cursor: not-allowed;
}
}
.ui-grid-pager-row-count-label {
margin-top: 3px;
}
}
.ui-grid-pager-count-container {
float: right;
margin-top: 4px;
min-width: 50px;
.ui-grid-pager-count {
margin-right: 10px;
margin-left: 10px;
float: right;
abbr {
border-bottom: none;
text-decoration: none;
}
}
}