mirror of
https://github.com/fleetdm/fleet
synced 2026-05-17 14:08:25 +00:00
## 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>
91 lines
1.3 KiB
SCSS
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;
|
|
}
|
|
}
|
|
}
|