From c94fb32c7a3c28b18a27460aa2447eeec1fac1de Mon Sep 17 00:00:00 2001 From: Pascal Szewczyk Date: Mon, 18 Jul 2016 23:23:54 +0200 Subject: uikit added --- css/components/slideshow.css | 144 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100755 css/components/slideshow.css (limited to 'css/components/slideshow.css') diff --git a/css/components/slideshow.css b/css/components/slideshow.css new file mode 100755 index 0000000..ce3d4f2 --- /dev/null +++ b/css/components/slideshow.css @@ -0,0 +1,144 @@ +/*! UIkit 2.26.4 | 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-in { + -webkit-animation: uk-fade 0.5s linear; + animation: uk-fade 0.5s linear; +} +.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; +} -- cgit v1.2.3