diff options
Diffstat (limited to 'scss/uikit/components/offcanvas.scss')
| -rw-r--r-- | scss/uikit/components/offcanvas.scss | 301 |
1 files changed, 301 insertions, 0 deletions
diff --git a/scss/uikit/components/offcanvas.scss b/scss/uikit/components/offcanvas.scss new file mode 100644 index 00000000..5fc05587 --- /dev/null +++ b/scss/uikit/components/offcanvas.scss @@ -0,0 +1,301 @@ +// Name: Off-canvas +// Description: Component to create an off-canvas sidebar +// +// Component: `uk-offcanvas` +// +// Sub-objects: `uk-offcanvas-bar` +// `uk-offcanvas-container` +// `uk-offcanvas-content` +// `uk-offcanvas-page` +// +// Adopted: `uk-offcanvas-close` +// +// Modifiers: `uk-offcanvas-flip` +// `uk-offcanvas-bar-animation` +// `uk-offcanvas-reveal` +// `uk-offcanvas-overlay` +// `uk-offcanvas-content-animation` +// +// States: `uk-open` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$offcanvas-z-index: $global-z-index !default; + +$offcanvas-bar-width: 270px !default; +$offcanvas-bar-padding-vertical: $global-margin !default; +$offcanvas-bar-padding-horizontal: $global-margin !default; +$offcanvas-bar-background: $global-secondary-background !default; +$offcanvas-bar-color-mode: light !default; + +$offcanvas-bar-width-m: 350px !default; +$offcanvas-bar-padding-vertical-m: $global-medium-gutter !default; +$offcanvas-bar-padding-horizontal-m: $global-medium-gutter !default; + +$offcanvas-close-position: 20px !default; +$offcanvas-close-padding: 5px !default; + +$offcanvas-overlay-background: rgba(0,0,0,0.1) !default; + + +/* ======================================================================== + Component: Off-canvas + ========================================================================== */ + +/* + * 1. Hide by default + * 2. Set position + */ + +.uk-offcanvas { + /* 1 */ + display: none; + /* 2 */ + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: $offcanvas-z-index; +} + +/* + * Flip modifier + */ + +.uk-offcanvas-flip .uk-offcanvas { + right: 0; + left: auto; +} + + +/* Bar + ========================================================================== */ + +/* + * 1. Set position + * 2. Size and style + * 3. Allow scrolling + * 4. Transform + */ + +.uk-offcanvas-bar { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + box-sizing: border-box; + width: $offcanvas-bar-width; + padding: $offcanvas-bar-padding-vertical $offcanvas-bar-padding-horizontal; + background: $offcanvas-bar-background; + /* 3 */ + overflow-y: auto; + -webkit-overflow-scrolling: touch; + /* 4 */ + transform: translateX(-100%); + @if(mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();} +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-offcanvas-bar { + width: $offcanvas-bar-width-m; + padding: $offcanvas-bar-padding-vertical-m $offcanvas-bar-padding-horizontal-m; + } + +} + +// Color Mode +@if ( $offcanvas-bar-color-mode == light ) { .uk-offcanvas-bar { @extend .uk-light !optional;} } +@if ( $offcanvas-bar-color-mode == dark ) { .uk-offcanvas-bar { @extend .uk-dark !optional;} } + +/* Flip modifier */ +.uk-offcanvas-flip .uk-offcanvas-bar { + left: auto; + right: 0; + transform: translateX(100%); +} + +/* + * Open + */ + +.uk-open > .uk-offcanvas-bar { transform: translateX(0); } + +/* + * Slide Animation (Used in slide and push mode) + */ + +.uk-offcanvas-bar-animation { transition: transform 0.3s ease-out; } + +/* + * Reveal Animation + * 1. Set position + * 2. Clip the bar + * 3. Animation + * 4. Reset transform + */ + +.uk-offcanvas-reveal { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + width: 0; + overflow: hidden; + /* 3 */ + transition: width 0.3s ease-out; +} + +.uk-offcanvas-reveal .uk-offcanvas-bar { + /* 4 */ + transform: translateX(0); +} + +.uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width; } + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width-m; } + +} + +/* + * Flip modifier + */ + +.uk-offcanvas-flip .uk-offcanvas-reveal { + right: 0; + left: auto; +} + + +/* Close + * Adopts `uk-close` + ========================================================================== */ + +.uk-offcanvas-close { + position: absolute; + z-index: $offcanvas-z-index; + top: $offcanvas-close-position; + right: $offcanvas-close-position; + padding: $offcanvas-close-padding; + @if(mixin-exists(hook-offcanvas-close)) {@include hook-offcanvas-close();} +} + + +/* Overlay + ========================================================================== */ + +/* + * Overlay the whole page. Needed for the `::before` + * 1. Using `100vw` so no modification is needed when off-canvas is flipped + * 2. Allow for closing with swipe gesture on devices with pointer events. + */ + +.uk-offcanvas-overlay { + /* 1 */ + width: 100vw; + /* 2 */ + touch-action: none; +} + +/* + * 1. Mask the whole page + * 2. Fade-in transition + */ + +.uk-offcanvas-overlay::before { + /* 1 */ + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: $offcanvas-overlay-background; + /* 2 */ + opacity: 0; + transition: opacity 0.15s linear; + @if(mixin-exists(hook-offcanvas-overlay)) {@include hook-offcanvas-overlay();} +} + +.uk-offcanvas-overlay.uk-open::before { opacity: 1; } + + +/* Container + ========================================================================== */ + +/* + * Prevent horizontal scrollbar when the content is slide-out + * Has to be on the `html` element too to make it work on the `body` + */ + +.uk-offcanvas-page, +.uk-offcanvas-container { overflow-x: hidden; } + +/* + * Prevent all scrollbars if overlay is used + */ + +.uk-offcanvas-container-overlay { overflow: hidden; } + + +/* Content + ========================================================================== */ + +/* + * Prepare slide-out animation (Used in reveal and push mode) + * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars + * lose their fixed state and behaves like `absolute` within a transformed container + * Note: JS sets a fixed width and height so the page can slide-out without shrinking + * 1. Smooth scrolling + */ + +.uk-offcanvas-container .uk-offcanvas-content { + position: relative; + left: 0; + transition: left 0.3s ease-out; + /* 1 */ + -webkit-overflow-scrolling: touch; +} + +/* Disable scrolling if overlay mode */ +.uk-offcanvas-overlay .uk-offcanvas-content { overflow-y: hidden; } + +/* + * Activate slide-out animation + */ + +:not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { left: $offcanvas-bar-width; } + +.uk-offcanvas-flip > .uk-offcanvas-content-animation { left: (-$offcanvas-bar-width); } + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + :not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { left: $offcanvas-bar-width-m; } + + .uk-offcanvas-flip > .uk-offcanvas-content-animation { left: (-$offcanvas-bar-width-m); } + +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-offcanvas-misc)) {@include hook-offcanvas-misc();} + +// @mixin hook-offcanvas-bar(){} +// @mixin hook-offcanvas-close(){} +// @mixin hook-offcanvas-overlay(){} +// @mixin hook-offcanvas-misc(){} |