fleet/frontend/components/MainContent/_styles.scss

32 lines
781 B
SCSS

.main-content {
padding: $pad-xlarge;
background-color: $core-white;
flex-grow: 1;
// overflow: auto allows for horizontal scrolling
// of the main-content when there is a banner. (e.g. sandbox mode)
// Without it the main content pushes the banner off the page.
overflow: auto;
> :not(.main-content--animation-disabled) {
animation: fade-in 250ms ease-out;
}
&__warning-banner {
margin-bottom: $pad-large;
// TODO: figure out if sticky styling is needed?
position: sticky; // Needed for settings page scroll
z-index: 4; // Needed for settings page scroll
}
}
@media (max-width: ($break-xs - 1)) {
.main-content {
padding: $pad-large;
}
}
@media (max-width: ($break-mobile-md - 1)) {
.main-content {
padding: 20px;
}
}