Pinafore-Web-Client-Frontend/src/scss/variables.scss

82 lines
1.8 KiB
SCSS

:root {
--warn-color: #e14154; // reddish for warnings/errors
//
// Vertical and horizontal padding for the status-article element (Status.html, Notification.html)
//
--status-pad-v: 10px;
--status-pad-h: 20px;
@media (max-width: 767px) {
--status-pad-h: 10px;
}
@media (max-width: 240px) {
--status-pad-h: 5px;
}
//
// Nav and .main-content offset. This is important for things like the sticky header (ComposeStickyButton.html)
//
--nav-font-size: 1rem;
--nav-indicator-height: 2px;
--nav-border-bottom: 0px;
--nav-icon-pad-v: 15px;
--nav-icon-pad-h: 20px;
--nav-icon-size: 20px;
--nav-total-height: calc(
(var(--nav-icon-pad-v) * 2) +
var(--nav-icon-size) +
var(--nav-indicator-height) +
var(--nav-border-bottom)
);
--main-content-gap-top: 20px;
--main-content-pad-vertical: calc(
var(--nav-total-height) +
var(--main-content-gap-top)
);
--main-content-pad-top: var(--main-content-pad-vertical);
--main-content-pad-bottom: 0px;
--main-margin-bottom: 15px;
--main-border-size: 1px;
@media (max-width: 991px) {
--nav-icon-pad-v: 20px;
--nav-icon-pad-h: 10px;
--nav-icon-size: 25px;
--nav-indicator-height: 3px;
--nav-border-bottom: 0px;
}
@media (max-width: 767px) {
--main-content-gap-top: 0px;
}
@media (max-width: 240px) {
--nav-icon-pad-v: 10px;
--nav-icon-pad-h: 0px;
}
// Used for moving the nav bar to the bottom
--nav-top: 0px;
--nav-bottom: initial;
--toast-gap-bottom: 0px; // used to position the Toast and Snackbar above the bottom nav
--fab-gap-top: var(--nav-total-height); // used to position the FAB (floating action button) below the top nav
//
// focus outline
//
--focus-width: 2px;
@media (max-width: 240px) {
--focus-width: 3px;
}
}