.ct-sidebar { position: relative; z-index: 1; .widget-title:not(:empty) { display: block; margin-bottom: 20px; } // widgets spacing .ct-widget { color: var(--color); &:not(:last-child) { margin-bottom: var(--sidebar-widgets-spacing, 40px); } } // sticky sidebar &[data-sticky] { @include media-breakpoint-up(lg) { --sticky-offset: calc( var(--sidebar-offset, 50px) + var(--admin-bar, 0px) + var(--headerStickyHeight, 0px) ); position: sticky; top: calc( var(--sidebar-offset, 50px) + var(--admin-bar, 0px) + var(--headerStickyHeight, 0px) * (var(--stickyShrink, 100) / 100) ); } &[data-sticky='top'] { position: fixed; } &[data-sticky='bottom'] { position: absolute; bottom: 0; top: initial; } } } aside { position: relative; // type 2 &[data-type='type-2'] .ct-sidebar { &:not([data-widgets='separated']) { padding: var(--sidebar-inner-spacing, 35px); background: var(--sidebar-background-color, var(--paletteColor8)); border: var(--border); box-shadow: var(--box-shadow); border-radius: var(--borderRadius); } &[data-widgets='separated'] { .ct-widget { padding: var(--sidebar-inner-spacing, 35px); background: var(--sidebar-background-color, var(--paletteColor8)); border: var(--border); box-shadow: var(--box-shadow); border-radius: var(--borderRadius); } } } // type 3 &[data-type='type-3'] { } // type 4 &[data-type='type-4'] { @include media-breakpoint-down(md) { .ct-sidebar { padding: var(--sidebar-inner-spacing, 35px); background: var(--sidebar-background-color, var(--paletteColor8)); } } } } // type 3 & 4 helper @include media-breakpoint-up(lg) { aside[data-type='type-3'], aside[data-type='type-4'] { position: relative; &:after { position: absolute; content: ''; top: var(--sidebar-helper-top, 0); height: var(--sidebar-helper-height, 100%); } } aside[data-type='type-3']:after { border-right: var(--border); } aside[data-type='type-4']:after { background: var(--sidebar-background-color, var(--paletteColor8)); } [data-sidebar='right'] { [data-type='type-3'], [data-type='type-4'] { padding-left: var(--sidebar-inner-spacing, 35px); &:after { left: 0; } } [data-type='type-4'] { &:after { right: calc(-50vw + (5000% / var(--sidebar-width-no-unit, 27))); } } } [data-sidebar='left'] { [data-type='type-3'], [data-type='type-4'] { padding-right: var(--sidebar-inner-spacing, 35px); &:after { right: 0; } } [data-type='type-4'] { &:after { left: calc(-50vw + (5000% / var(--sidebar-width-no-unit, 27))); } } } } // type 3 & 4 @include media-breakpoint-up(lg) { [data-vertical-spacing='top:bottom'] { --sidebar-helper-top: calc(var(--content-vertical-spacing) * -1); --sidebar-helper-height: calc( 100% + var(--content-vertical-spacing) * 2 ); } [data-vertical-spacing='top'] { --sidebar-helper-top: calc(var(--content-vertical-spacing) * -1); } [data-vertical-spacing='top'], [data-vertical-spacing='bottom'] { --sidebar-helper-height: calc(100% + var(--content-vertical-spacing)); } } // safari sticky sidebar helper aside#sidebar [data-sentinel='top'] { width: 100%; height: 1px; position: absolute; top: calc( ( var(--sidebar-offset, 50px) + var(--admin-bar, 0px) + var(--headerStickyHeight, 0px) * (var(--stickyShrink, 100) / 100) ) * -1 ); } aside#sidebar [data-sentinel='bottom'] { width: 100%; height: 1px; position: absolute; bottom: calc( var(--sidebar-height, 0px) + var(--sidebar-offset, 50px) + var(--admin-bar, 0px) + var(--headerStickyHeight, 0px) * (var(--stickyShrink, 100) / 100) ); }