icingaweb2/public/css/icinga/controls.less

160 lines
2.6 KiB
Plaintext

/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
// TODO(el): Rename .filter to .filter-control
// Hide auto sumbit info in controls but keep information for screen readers
.controls .autosubmit-info {
.sr-only();
}
// Backend selection control in user and group list views
.backend-selection {
float: left;
> .control-group {
padding: 0;
> .control-label-group {
text-align: left;
width: auto;
}
}
}
.backend-selection,
.pagination-control,
.selection-info,
.sort-controls-container {
margin-bottom: 0.5em;
}
.backend-selection,
.pagination-control,
.sort-controls-container {
// Select controls may not respect font-size thus leading to improperly vertical alignment w/o big enough line-height
line-height: 2em;
}
.filter {
// Display filter control on a new line
clear: both;
}
.limiter-control > .control-group {
padding: 0;
// Note that the sort-control form does not have padding as it's utilizing different decorators
> .control-label-group {
text-align: left;
padding: 0;
width: 1em;
}
> select {
width: 4.5em;
}
> i {
.sr-only();
}
}
.limiter-control,
.sort-control {
// Display limiter and sort control both on the same line; floating could be used here too to achieve the same
display: inline-block;
}
.pagination-control {
// Display the pagination-control on a new line
clear: both;
float: left;
li {
&.active {
> a,
> a:hover {
border-bottom: 2px solid @icinga-blue;
color: @icinga-blue
}
> a:hover {
background: none;
cursor: default;
text-decoration: none;
}
}
&.disabled {
color: @gray-light;
cursor: no-drop;
}
> a,
> span {
padding: 0 0.5em 0.25em 0.5em;
}
> a:hover {
background-color: @gray-lighter;
text-decoration: none;
}
}
.previous-page {
padding-left: 0;
}
.next-page {
padding-right: 0;
}
}
// Multi-selection info
.selection-info {
float: right;
font-size: @font-size-small;
&:hover {
cursor: help;
}
}
.sort-control {
margin-left: 0.25em;
label {
width: auto;
margin-right: 0.5em;
}
select[name=sort] {
width: 12em;
margin-left: 0;
}
select[name=dir] {
width: 8em;
margin-left: 0;
}
}
.sort-controls-container {
clear: right;
float: right;
> * {
vertical-align: middle;
}
}
.sort-direction-control {
margin-left: 0.25em;
width: 1em;
}
html.no-js .sort-control form {
display: table;
margin-left: auto;
margin-top: 0.25em;
}