fleet/frontend/layouts/CoreLayout/_styles.scss
Jacob Shandling 48156009fa
Frontend – clean up breakpoints (#12711)
## Improve breakpoint variables to be useful "sm", "md", etc. instead of
the pixel widths they are set to

Also made sure all media queries are using these variables instead of
hard-coded values.

See @lukeheath's previous to-do in `frontend > styles > var >
breakpoints.scss`

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-07-12 15:45:49 -07:00

91 lines
1.3 KiB
SCSS

.app-wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: $ui-off-white;
}
.core-wrapper {
flex-grow: 1;
margin: 0;
padding: 0;
position: relative;
background-color: $core-white;
display: flex;
// App hidden below 768px
@media (max-width: $break-xs - 1px) {
display: none;
}
// App not hidden when printing
@media print {
display: initial;
}
a {
img {
height: 12px;
width: 12px;
margin-left: $pad-xsmall;
}
}
}
.site-nav-container {
background: $core-fleet-black;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 100;
// Nav hidden below 768px;
@media (max-width: $break-xs - 1px) {
display: none;
}
// Nav not hidden when printing
@media print {
display: initial;
}
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 3;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: $pad-medium;
// Overlay below 768px
@media (min-width: $break-xs) {
display: none;
}
// No overlay when printing
@media print {
display: none;
}
img {
width: 160px;
}
&__text {
text-align: center;
h1 {
font-size: $small;
font-weight: $bold;
}
p {
font-size: $xx-small;
}
}
}