diff options
Diffstat (limited to 'scss/uikit/components/transition.scss')
| -rw-r--r-- | scss/uikit/components/transition.scss | 145 |
1 files changed, 0 insertions, 145 deletions
diff --git a/scss/uikit/components/transition.scss b/scss/uikit/components/transition.scss deleted file mode 100644 index c9992743..00000000 --- a/scss/uikit/components/transition.scss +++ /dev/null @@ -1,145 +0,0 @@ -// 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(){} |