mirror of
https://github.com/status-im/consul.git
synced 2025-01-09 21:35:52 +00:00
3ae91e064c
Adds a 'status' for the filtering/searching in the UI, without this its not super clear that you are filtering a recordset due to the menu selections being hidden once closed. You can also use the pills in this status view to delete individual filters.
98 lines
2.4 KiB
SCSS
98 lines
2.4 KiB
SCSS
@import 'layouts/index';
|
|
|
|
.app-view {
|
|
margin-top: 50px;
|
|
}
|
|
@media #{$--lt-spacious-page-header} {
|
|
html:not(.with-breadcrumbs) .app-view {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
/* all forms have a margin below the header */
|
|
html[data-route$='create'] .app-view > header + div > *:first-child,
|
|
html[data-route$='edit'] .app-view > header + div > *:first-child {
|
|
margin-top: 1.8em;
|
|
}
|
|
/* most tabs have margin after the tab bar, unless the tab has a filter bar */
|
|
/* if it is a filter bar and the thing after the filter bar is a p then it also */
|
|
/* needs a top margun :S */
|
|
%app-view-content .tab-section > *:first-child:not(.filter-bar):not(table),
|
|
%app-view-content .tab-section > .search-bar + p,
|
|
%app-view-content .tab-section .consul-health-check-list {
|
|
margin-top: 1.25em;
|
|
}
|
|
.consul-upstream-instance-list,
|
|
.consul-lock-session-list {
|
|
margin-top: 0 !important;
|
|
}
|
|
/* turn off top borders for things flush up to a filter bar */
|
|
html[data-route='dc.services.index'] .consul-service-list ul,
|
|
.consul-nspace-list ul,
|
|
.consul-service-instance-list ul,
|
|
.consul-node-list ul,
|
|
.consul-lock-session-list ul,
|
|
.consul-role-list ul,
|
|
.consul-policy-list ul,
|
|
.consul-token-list ul {
|
|
border-top-width: 0 !important;
|
|
}
|
|
.notice + .consul-token-list ul {
|
|
border-top-width: 1px !important;
|
|
}
|
|
|
|
// TODO: This shouldn't be done here, decide the best way to do this
|
|
// %main-decoration ? %main-skin ? %content-skin ?
|
|
// it includes layouts of components, but not layout of itself?
|
|
// %main-components? What about %app-view-content
|
|
main,
|
|
%modal-window {
|
|
@extend %main-content;
|
|
}
|
|
html.template-with-vertical-menu,
|
|
html.template-with-vertical-menu body {
|
|
overflow: hidden;
|
|
}
|
|
html:not(.has-nspaces) [class*='nspace-'] {
|
|
display: none;
|
|
}
|
|
#wrapper {
|
|
@extend %viewport-container;
|
|
}
|
|
#wrapper {
|
|
@extend %with-sticky-footer;
|
|
}
|
|
main {
|
|
@extend %with-sticky-footer-content;
|
|
position: relative;
|
|
}
|
|
main,
|
|
#wrapper > footer {
|
|
@extend %content-container;
|
|
}
|
|
html[data-route$='create'] main,
|
|
html[data-route$='edit'] main {
|
|
@extend %content-container-restricted;
|
|
}
|
|
|
|
@media #{$--lt-spacious-page-header} {
|
|
.actions button.copy-btn {
|
|
margin-top: -56px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
%main-content p:not(:last-child) {
|
|
margin-bottom: 1em;
|
|
}
|
|
/* TODO: keep margin below forms, move elsewhere? */
|
|
%main-content form:not(.filter-bar),
|
|
%main-content form + div .with-confirmation {
|
|
margin-bottom: 2em;
|
|
}
|
|
@media #{$--lt-wide-form} {
|
|
main form [type='reset'] {
|
|
float: right;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|