// vf-sidebar @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} * Build time: #{map-get($componentInfo, 'buildTimeStamp')} */ @import 'vf-sidebar.variables.scss'; // You need to add this Sass file to ./components/vf-componenet-rollup/index.scss // @import 'vf-sidebar/vf-sidebar.scss'; .vf-sidebar { overflow: hidden; } .vf-sidebar > * { display: flex; flex-wrap: wrap; margin: calc(var(--vf-sidebar-spacing, #{space(400)}) / 2 * -1); } .vf-sidebar > * > * { flex-grow: 1; margin: calc(var(--vf-sidebar-spacing, #{space(400)}) / 2); } .vf-sidebar--end > * > :first-child { flex-basis: 0; flex-grow: 999; min-width: calc(var(--vf-sidebar-main-width, 50%) - var(--vf-sidebar-spacing, #{space(400)}) ); } .vf-sidebar--start > * > :last-child { flex-basis: 0; flex-grow: 999; min-width: calc(var(--vf-sidebar-main-width, 50%) - var(--vf-sidebar-spacing, #{space(400)}) ); } .vf-sidebar--400 { --vf-sidebar-spacing: #{space(400)}; } .vf-sidebar--600 { --vf-sidebar-spacing: #{space(600)}; } .vf-sidebar--800 { --vf-sidebar-spacing: #{space(800)}; }