// TODO: Make it clear that these are for the drawer
@each $breakpoint in map-keys($grid-breakpoints) {
$width: map-get($drawer-widths, $breakpoint);
@include media-breakpoint-up($breakpoint) {
/// Utility that makes your page (ex. body)
/// play nicely together with the side drawer. Use it
/// to pad your element to the left, so there's room for the drawer.
///
/// @example html - HTML Usage
/// ...
.push-#{$breakpoint}-left {
padding-left: $width !important;
}
/// Utility that makes your page (ex. body)
/// play nicely together with the side drawer. Use it
/// to pad your element to the right, so there's room for the drawer.
///
/// @example html - HTML Usage
/// ...
.push-#{$breakpoint}-right {
padding-right: $width !important;
}
}
@include media-breakpoint-up($breakpoint) {
/// Utility that makes your absolutely positioned (ex. sticky)
/// elements play nicely together with the side drawer. Use it
/// to push the absolute element by the drawers width on the left side.
///
/// @example html - HTML Usage
///
.push-absolute-#{$breakpoint}-left {
right: 0 !important;
left: $width !important;
width: auto !important;
}
/// Utility that makes your absolutely positioned (ex. sticky)
/// elements play nicely together with the side drawer. Use it
/// to push the absolute element by the drawers width on the right side.
///
/// @example html - HTML Usage
///
.push-absolute-#{$breakpoint}-right {
right: $width !important;
left: 0 !important;
width: auto !important;
}
}
}