@nl-rvo/css-sidebar-layout/dist/index.min.css

Sidebar layout CSS component

@media (min-width:780px){.rvo-sidebar-layout{display:grid;grid-template-columns:240px 1fr}}@media (min-width:1080px){.rvo-sidebar-layout{grid-template-columns:288px 1fr}}@media (min-width:780px){.rvo-sidebar-layout__container:has(.rvo-sidebar-layout__sidebar--bg){background:linear-gradient(90deg,var(--rvo-sidebar-layout-sidebar-background-color) 50%,var(--rvo-sidebar-layout-content-background-color) 50%)}}.rvo-sidebar-layout__container:has(.rvo-sidebar-layout__sidebar--bg) .rvo-sidebar-layout__content{background:var(--rvo-color-wit)}@media (min-width:780px){.rvo-sidebar-layout__container--right:has(.rvo-sidebar-layout__sidebar--bg){background:linear-gradient(-90deg,var(--rvo-sidebar-layout-sidebar-background-color) 50%,var(--rvo-sidebar-layout-content-background-color) 50%)}}.rvo-sidebar-layout__content,.rvo-sidebar-layout__sidebar{padding-block-end:var(--rvo-sidebar-layout-sm-padding-block-end);padding-block-start:var(--rvo-sidebar-layout-sm-padding-block-start);padding-inline-end:var(--rvo-sidebar-layout-sm-padding-inline-end);padding-inline-start:var(--rvo-sidebar-layout-sm-padding-inline-start)}@media (min-width:780px){.rvo-sidebar-layout__content,.rvo-sidebar-layout__sidebar{padding-block-end:var(--rvo-sidebar-layout-md-padding-block-end);padding-block-start:var(--rvo-sidebar-layout-md-padding-block-start);padding-inline-end:var(--rvo-sidebar-layout-md-padding-inline-end);padding-inline-start:var(--rvo-sidebar-layout-md-padding-inline-start)}}@media (min-width:1080px){.rvo-sidebar-layout__content,.rvo-sidebar-layout__sidebar{padding-block-end:var(--rvo-sidebar-layout-lg-padding-block-end);padding-block-start:var(--rvo-sidebar-layout-lg-padding-block-start);padding-inline-end:var(--rvo-sidebar-layout-lg-padding-inline-end);padding-inline-start:var(--rvo-sidebar-layout-lg-padding-inline-start)}}.rvo-sidebar-layout__sidebar{display:none}@media (min-width:780px){.rvo-sidebar-layout__sidebar{display:block}}.rvo-sidebar-layout__sidebar.rvo-sidebar-layout__sidebar--bg{background-color:var(--rvo-sidebar-layout-sidebar-background-color)}@media (min-width:780px){.rvo-sidebar-layout--right{display:grid;grid-template-columns:1fr 240px}}@media (min-width:1080px){.rvo-sidebar-layout--right{grid-template-columns:1fr 288px}}.rvo-sidebar-layout--right .rvo-sidebar-layout__sidebar{order:1}