mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
7.3 KiB
301 lines
7.3 KiB
// 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(){}
|
|
|