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.
145 lines
4.8 KiB
145 lines
4.8 KiB
// Name: Transition
|
|
// Description: Utilities for transitions
|
|
//
|
|
// Component: `uk-transition-*`
|
|
//
|
|
// Modifiers: `uk-transition-fade`
|
|
// `uk-transition-scale-up`
|
|
// `uk-transition-scale-down`
|
|
// `uk-transition-slide-top-*`
|
|
// `uk-transition-slide-bottom-*`
|
|
// `uk-transition-slide-left-*`
|
|
// `uk-transition-slide-right-*`
|
|
// `uk-transition-opaque`
|
|
// `uk-transition-slow`
|
|
//
|
|
// Sub-objects: `uk-transition-toggle`,
|
|
// `uk-transition-active`
|
|
//
|
|
// States: `uk-hover`
|
|
// `uk-active`
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
$transition-duration: 0.3s !default;
|
|
|
|
$transition-scale: 1.1 !default;
|
|
|
|
$transition-slide-small-translate: 10px !default;
|
|
$transition-slide-medium-translate: 50px !default;
|
|
|
|
$transition-slow-duration: 0.7s !default;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Transition
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Using multiple selectors to exclude `uk-transition-toggle`
|
|
* Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform`
|
|
* Just put the transition in an extra `div`
|
|
*/
|
|
|
|
.uk-transition-fade,
|
|
[class*='uk-transition-scale'],
|
|
[class*='uk-transition-slide'] {
|
|
transition: $transition-duration ease-out;
|
|
transition-property: opacity, transform, filter;
|
|
}
|
|
|
|
.uk-transition-toggle:focus { outline: none; }
|
|
|
|
/*
|
|
* Fade
|
|
*/
|
|
|
|
.uk-transition-fade { opacity: 0; }
|
|
|
|
/* Show */
|
|
.uk-transition-toggle:hover [class*='uk-transition-fade'],
|
|
.uk-transition-toggle.uk-hover [class*='uk-transition-fade'],
|
|
.uk-transition-toggle:focus [class*='uk-transition-fade'],
|
|
.uk-transition-active.uk-active [class*='uk-transition-fade'] { opacity: 1; }
|
|
|
|
/*
|
|
* Scale
|
|
* Note: Using `scale3d` for better image rendering
|
|
*/
|
|
|
|
[class*='uk-transition-scale'] { opacity: 0; }
|
|
|
|
.uk-transition-scale-up { transform: scale3d(1,1,1); }
|
|
|
|
.uk-transition-scale-down { transform: scale3d($transition-scale,$transition-scale,1); }
|
|
|
|
/* Show */
|
|
.uk-transition-toggle:hover .uk-transition-scale-up,
|
|
.uk-transition-toggle.uk-hover .uk-transition-scale-up,
|
|
.uk-transition-toggle:focus .uk-transition-scale-up,
|
|
.uk-transition-active.uk-active .uk-transition-scale-up {
|
|
opacity: 1;
|
|
transform: scale3d($transition-scale,$transition-scale,1);
|
|
}
|
|
|
|
.uk-transition-toggle:hover .uk-transition-scale-down,
|
|
.uk-transition-toggle.uk-hover .uk-transition-scale-down,
|
|
.uk-transition-toggle:focus .uk-transition-scale-down,
|
|
.uk-transition-active.uk-active .uk-transition-scale-down {
|
|
opacity: 1;
|
|
transform: scale3d(1,1,1);
|
|
}
|
|
|
|
/*
|
|
* Slide
|
|
*/
|
|
|
|
[class*='uk-transition-slide'] { opacity: 0; }
|
|
|
|
.uk-transition-slide-top { transform: translateY(-100%); }
|
|
.uk-transition-slide-bottom { transform: translateY(100%); }
|
|
.uk-transition-slide-left { transform: translateX(-100%); }
|
|
.uk-transition-slide-right { transform: translateX(100%); }
|
|
|
|
.uk-transition-slide-top-small { transform: translateY(-$transition-slide-small-translate); }
|
|
.uk-transition-slide-bottom-small { transform: translateY($transition-slide-small-translate); }
|
|
.uk-transition-slide-left-small { transform: translateX(-$transition-slide-small-translate); }
|
|
.uk-transition-slide-right-small { transform: translateX($transition-slide-small-translate); }
|
|
|
|
.uk-transition-slide-top-medium { transform: translateY(-$transition-slide-medium-translate); }
|
|
.uk-transition-slide-bottom-medium { transform: translateY($transition-slide-medium-translate); }
|
|
.uk-transition-slide-left-medium { transform: translateX(-$transition-slide-medium-translate); }
|
|
.uk-transition-slide-right-medium { transform: translateX($transition-slide-medium-translate); }
|
|
|
|
/* Show */
|
|
.uk-transition-toggle:hover [class*='uk-transition-slide'],
|
|
.uk-transition-toggle.uk-hover [class*='uk-transition-slide'],
|
|
.uk-transition-toggle:focus [class*='uk-transition-slide'],
|
|
.uk-transition-active.uk-active [class*='uk-transition-slide'] {
|
|
opacity: 1;
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
|
|
|
|
/* Opacity modifier
|
|
========================================================================== */
|
|
|
|
.uk-transition-opaque { opacity: 1; }
|
|
|
|
|
|
/* Duration modifiers
|
|
========================================================================== */
|
|
|
|
.uk-transition-slow { transition-duration: $transition-slow-duration; }
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
@if(mixin-exists(hook-transition-misc)) {@include hook-transition-misc();}
|
|
|
|
// @mixin hook-transition-misc(){}
|
|
|