diff options
Diffstat (limited to 'uikit/static/css/components/slideshow.gradient.css')
-rw-r--r-- | uikit/static/css/components/slideshow.gradient.css | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/uikit/static/css/components/slideshow.gradient.css b/uikit/static/css/components/slideshow.gradient.css new file mode 100644 index 0000000..8b6d69c --- /dev/null +++ b/uikit/static/css/components/slideshow.gradient.css @@ -0,0 +1,140 @@ +/*! UIkit 2.21.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ +/* ======================================================================== + Component: Slideshow + ========================================================================== */ +/* + * 1. Create position context + * 2. Create stacking context to prevent z-index issues with other components + * 3. Set width because child elements are positioned absolute. Height is set via JS + * 4. Reset list style + * 5. Clip child elements + * 6. Deactivate browser history navigation in IE11 + */ +.uk-slideshow { + /* 1 */ + position: relative; + /* 2 */ + z-index: 0; + /* 3 */ + width: 100%; + /* 4 */ + margin: 0; + padding: 0; + list-style: none; + /* 5 */ + overflow: hidden; + /* 6 */ + touch-action: pan-y; +} +/* + * Sub-object item + * 1. Position items above each other + * 2. Expand to parent container width + * 3. Hide by default + */ +.uk-slideshow > li { + /* 1 */ + position: absolute; + top: 0; + left: 0; + /* 2 */ + width: 100%; + /* 3 */ + opacity: 0; +} +/* + * Active + * 1. Stack at first + * 2. Show slide + */ +.uk-slideshow > .uk-active { + /* 1 */ + z-index: 10; + /* 2 */ + opacity: 1; +} +/* + * Hide default images which is only relevant to keep existing proportions + */ +.uk-slideshow > li > img { + visibility: hidden; +} +/* + * Pointer for controls + */ +[data-uk-slideshow-slide] { + cursor: pointer; +} +/* Modifier: `uk-slideshow-fullscreen` + ========================================================================== */ +.uk-slideshow-fullscreen, +.uk-slideshow-fullscreen > li { + height: 100vh; +} +/* Animations + ========================================================================== */ +/* + * Fade + */ +.uk-slideshow-fade-out { + -webkit-animation: uk-fade 0.5s linear reverse; + animation: uk-fade 0.5s linear reverse; +} +/* + * Scroll + */ +.uk-slideshow-scroll-forward-in { + -webkit-animation: uk-slide-right 0.5s ease-in-out; + animation: uk-slide-right 0.5s ease-in-out; +} +.uk-slideshow-scroll-forward-out { + -webkit-animation: uk-slide-left 0.5s ease-in-out reverse; + animation: uk-slide-left 0.5s ease-in-out reverse; +} +.uk-slideshow-scroll-backward-in { + -webkit-animation: uk-slide-left 0.5s ease-in-out; + animation: uk-slide-left 0.5s ease-in-out; +} +.uk-slideshow-scroll-backward-out { + -webkit-animation: uk-slide-right 0.5s ease-in-out reverse; + animation: uk-slide-right 0.5s ease-in-out reverse; +} +/* + * Scale + */ +.uk-slideshow-scale-out { + -webkit-animation: uk-fade-scale-15 0.5s ease-in-out reverse; + animation: uk-fade-scale-15 0.5s ease-in-out reverse; +} +/* + * Swipe + */ +.uk-slideshow-swipe-forward-in { + -webkit-animation: uk-slide-left-33 0.5s ease-in-out; + animation: uk-slide-left-33 0.5s ease-in-out; +} +.uk-slideshow-swipe-forward-out { + -webkit-animation: uk-slide-left 0.5s ease-in-out reverse; + animation: uk-slide-left 0.5s ease-in-out reverse; +} +.uk-slideshow-swipe-backward-in { + -webkit-animation: uk-slide-right-33 0.5s ease-in-out; + animation: uk-slide-right-33 0.5s ease-in-out; +} +.uk-slideshow-swipe-backward-out { + -webkit-animation: uk-slide-right 0.5s ease-in-out reverse; + animation: uk-slide-right 0.5s ease-in-out reverse; +} +.uk-slideshow-swipe-forward-in:before, +.uk-slideshow-swipe-backward-in:before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + background: rgba(0, 0, 0, 0.6); + -webkit-animation: uk-fade 0.5s ease-in-out reverse; + animation: uk-fade 0.5s ease-in-out reverse; +} |