48 lines
1022 B
SCSS
48 lines
1022 B
SCSS
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
@use '../../variables/sizing';
|
|
@use '../../variables/media';
|
|
@use '../../utilities/type';
|
|
|
|
@use 'brand';
|
|
@use 'nav';
|
|
@use 'utilities';
|
|
@use 'dropdown';
|
|
|
|
.rose-header {
|
|
--box-shadow-light: none;
|
|
--box-shadow-dark: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1);
|
|
--box-shadow: var(--box-shadow-light);
|
|
|
|
.ember-application.rose-theme-light & {
|
|
--box-shadow: var(--box-shadow-light);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--box-shadow: var(--box-shadow-dark);
|
|
}
|
|
|
|
.ember-application.rose-theme-dark & {
|
|
--box-shadow: var(--box-shadow-dark);
|
|
}
|
|
|
|
display: grid;
|
|
grid-template-areas: 'brand nav utilities';
|
|
grid-template-columns: 0.01fr auto 1fr;
|
|
background: var(--black);
|
|
box-shadow: var(--box-shadow);
|
|
}
|
|
|
|
@media (width <= (media.width(small))) {
|
|
.rose-header {
|
|
grid-template-columns: 1fr 3fr;
|
|
grid-template-areas:
|
|
'brand utilities'
|
|
'nav nav';
|
|
padding-bottom: 0;
|
|
}
|
|
}
|