Panels are frames that slide in from the top, left, bottom, or right of the screen and appear over the interface. Grid blocks can also transform into panels, allowing you to hide content off-canvas on smaller screens.
Use these mixins to write a panel with a custom class.
.custom-panel {
// Extend the panel selector to get basic structural styles
@extend %panel-base;
// Use the layout mixin to set the position and sizing
@include panel-layout(
$position: left, // Can be top, right, bottom, or left
$size: default, // Can be any unit, or "default" to use the settings variables
$shadow: 0 4px 10px black // The shadow will be auto-adjusted based on the position of the panel
);
// Use the style mixin to define visual styles
@include panel-style(
$padding: 1rem,
$background: #fff
);
&.fixed {
// Add position: fixed to anchor the panel to the window instead of the panel's parent
position: fixed;
}
}
Sass Variables
You can customize Panels with these variables in the _settings.scss file: