mirror of https://github.com/hashicorp/consul
144 lines
3.5 KiB
SCSS
144 lines
3.5 KiB
SCSS
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
@import 'layouts/index';
|
|
|
|
/* position main app-view when there are/aren't breadcrumbs */
|
|
.app-view {
|
|
margin-top: 50px;
|
|
}
|
|
@media #{$--lt-spacious-page-header} {
|
|
html:not(.with-breadcrumbs) .app-view {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
/**/
|
|
|
|
/* transition the initial brand-loader out */
|
|
html body > .brand-loader {
|
|
@extend %transition-pushover;
|
|
transition-property: transform, opacity;
|
|
transform: translate(0, 0);
|
|
opacity: 1;
|
|
}
|
|
html[data-state]:not(.ember-loading) body > .brand-loader {
|
|
@extend %animation-pushover, %animation-remove-from-flow;
|
|
opacity: 0;
|
|
}
|
|
@media #{$--sidebar-open} {
|
|
html[data-state] body > .brand-loader {
|
|
transform: translate(calc(var(--chrome-width) / 2), 0);
|
|
}
|
|
}
|
|
/**/
|
|
|
|
/* hide the Consul::Loader/spinning loader when idle/hide content when loading */
|
|
html.ember-loading .view-loader,
|
|
html[data-state='idle'] .view-loader {
|
|
display: none;
|
|
}
|
|
.outlet[data-state='loading'] {
|
|
display: none;
|
|
}
|
|
/**/
|
|
|
|
/* 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,
|
|
%app-view-content .container {
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
%list-after-secondary-nav {
|
|
margin-top: 0 !important;
|
|
}
|
|
%list-after-secondary-nav ul {
|
|
border-top-width: 0 !important;
|
|
}
|
|
%list-after-filter-bar {
|
|
border-top-width: 0 !important;
|
|
}
|
|
|
|
.consul-upstream-instance-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-role-list ul,
|
|
.consul-policy-list ul,
|
|
.consul-token-list ul,
|
|
.consul-peer-list ul,
|
|
.consul-auth-method-list ul {
|
|
@extend %list-after-filter-bar;
|
|
}
|
|
|
|
// 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:not(.has-nspaces) [class*='nspace-'] {
|
|
display: none;
|
|
}
|
|
html:not(.has-partitions) [class*='partition-'] {
|
|
display: none;
|
|
}
|
|
#wrapper {
|
|
@extend %viewport-container;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
main {
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
main,
|
|
#wrapper > footer {
|
|
@extend %content-container;
|
|
}
|
|
html[data-route$='create'] main,
|
|
html[data-route$='edit'] main {
|
|
@extend %content-container-restricted;
|
|
}
|
|
html:not([data-route$='index']):not([data-route$='instances']) main {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|