mirror of
https://github.com/Icinga/icinga-php-library.git
synced 2025-07-02 19:34:30 +02:00
152 lines
2.7 KiB
Plaintext
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;
|
|
}
|
|
}
|