icinga-php-library/asset/css/controls.less
2023-03-22 10:00:47 +00:00

152 lines
2.7 KiB
Plaintext

.pagination-control {
li > a {
color: var(--control-color, @control-color);
border-radius: .25em;
}
li > a:hover {
background: var(--control-hover-bg, @control-hover-bg);
}
.previous-page,
.next-page {
padding: .5em .25em;
i {
display: block;
}
i:before {
margin: 0;
}
}
.previous-page > i {
margin-left: -.125em;
}
.next-page > i {
margin-right: -.125em;
}
}
// Style
.control-button {
.appearance(none);
background: none;
border: none;
color: var(--control-color, @control-color);
.rounded-corners();
&:hover, &:focus, &.active {
background-color: var(--control-hover-bg, @control-hover-bg);
text-decoration: none;
}
&.disabled {
color: var(--control-disabled-color, @control-disabled-color);
&:hover {
background: none;
}
}
i.icon:before {
color: inherit;
}
}
// Layout
.control-button {
display: inline-block;
padding: .25em .5em;
> i.icon {
display: inline-flex;
align-items: center;
height: 100%;
}
i.icon:before {
margin-right: 0;
}
}
.sort-control {
display: flex;
justify-content: flex-end;
.form-element {
display: inline-flex;
align-items: baseline;
margin-right: .5em;
label {
margin-right: .5em;
}
}
.control-button {
margin: 0;
}
}
.search-controls {
display: flex;
min-width: 100%;
.search-bar {
flex: 1 1 auto;
& ~ .control-button {
margin-left: .5em;
}
}
}
/**
The default layout of list controls in Icinga Web
┌────────────────────────────────────────────────────────────────┐
│ .pagination-control .limit-control .sort-control │
│ <-------------------- .search-controls ----------------------> │
└────────────────────────────────────────────────────────────────┘
*/
.controls.default-layout {
.box-shadow(0, 0, 0, 1px, @gray-lighter);
z-index: 1; // The content may clip, this ensures the separator is always visible
> .pagination-control {
float: left;
}
> .sort-control,
> .limit-control {
float: right;
}
> .limit-control {
margin-right: .5em;
}
> .search-controls {
clear: both;
}
> :not(:only-child) {
margin-bottom: 0.5em;
}
> .sort-control,
> .search-controls > .control-button:last-child {
margin-right: -.5em;
}
> .search-controls > .search-bar .search-suggestions {
// Suggestions should be kept at a distance from the bottom of the page
margin-bottom: 2.5em;
}
}