From 5160ce05ef3853fb49d05379004f2815d2313feb Mon Sep 17 00:00:00 2001 From: Luis Date: Fri, 2 Jun 2017 09:19:56 +0200 Subject: [PATCH] Sass: reordening modules --- src/scss/_color.scss | 2 +- src/scss/full.scss | 8 +- src/scss/modules/_zoom.scss | 2 +- static/css/webslides.css | 186 ++++++++++++++++++------------------ static/js/webslides.js | 2 +- static/js/webslides.min.js | 2 +- 6 files changed, 101 insertions(+), 101 deletions(-) diff --git a/src/scss/_color.scss b/src/scss/_color.scss index 8a6c72e..d64a427 100644 --- a/src/scss/_color.scss +++ b/src/scss/_color.scss @@ -2,7 +2,7 @@ // sass-lint:disable no-vendor-prefixes /*========================================= -18. Colors +19. Colors =========================================== */ /* -- Disable elastic scrolling/bounce: diff --git a/src/scss/full.scss b/src/scss/full.scss index f979988..e1e11c1 100644 --- a/src/scss/full.scss +++ b/src/scss/full.scss @@ -38,8 +38,8 @@ 15. Longform Elements 16. Safari Bug (flex-wrap) 17. Print - 18. Colors - 19. Slidex index (aka zoom) + 18. Slidex index (aka zoom) + 19. Colors ----------------------------------------------------------------------------------- */ @import 'vars'; @@ -93,6 +93,6 @@ @import 'utils/bugs'; @import 'modules/print'; -@import 'color'; - @import 'modules/zoom'; + +@import 'color'; diff --git a/src/scss/modules/_zoom.scss b/src/scss/modules/_zoom.scss index 24fb134..ec630ee 100644 --- a/src/scss/modules/_zoom.scss +++ b/src/scss/modules/_zoom.scss @@ -1,5 +1,5 @@ /*============================================== -19. Slides Index: Thumbnails navigation gallery +18. Slides Index: Thumbnails navigation gallery ================================================ */ #webslides-zoomed { diff --git a/static/css/webslides.css b/static/css/webslides.css index 9e52639..4cc87ac 100644 --- a/static/css/webslides.css +++ b/static/css/webslides.css @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.3.1 - * Date: 2017-06-01 + * Date: 2017-06-02 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -47,8 +47,8 @@ 15. Longform Elements 16. Safari Bug (flex-wrap) 17. Print - 18. Colors - 19. Slidex index (aka zoom) + 18. Slidex index (aka zoom) + 19. Colors ----------------------------------------------------------------------------------- */ /* ========================================= @@ -2879,8 +2879,97 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap #navigation { display: none; } } +/*============================================== +18. Slides Index: Thumbnails navigation gallery +================================================ */ +#webslides-zoomed { + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + background: transparent; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + min-height: 100vh; + position: relative; + z-index: 2; } + @media (min-width: 1024px) { + #webslides-zoomed > .wrap { + padding-bottom: 12rem; + padding-top: 12rem; + width: 100%; } } + #webslides-zoomed > .wrap > .grid > .column { + -ms-flex-item-align: auto; + align-self: auto; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + width: 25%; } + #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom { + overflow: hidden; + position: relative; + -webkit-transition: .3s; + transition: .3s; } + #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover { + -webkit-transform: scale(1.02); + transform: scale(1.02); + z-index: 2; } + #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer { + background: transparent; + cursor: pointer; + height: 100%; + position: absolute; + width: 100%; } + #webslides-zoomed .column > .wrap-zoom > .slide { + clip: rect(0 auto auto 0); + display: -webkit-box !important; + display: -ms-flexbox !important; + display: flex !important; + left: 0; + position: absolute; + top: 0; + -webkit-transform: scale(0.25) translate(-150%, -150vh); + transform: scale(0.25) translate(-150%, -150vh); } + @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { + #webslides-zoomed .column > .wrap-zoom > .slide { + -webkit-transform: scale(0.5) translate(-50%, -50%); + transform: scale(0.5) translate(-50%, -50%); } } + @media (max-aspect-ratio: 2 / 3) { + #webslides-zoomed .column > .wrap-zoom > .slide { + -webkit-transform: scale(0.5) translate(-50%, -50%); + transform: scale(0.5) translate(-50%, -50%); } } + @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { + #webslides-zoomed #webslides-zoomed .column { + width: 50%; } } + @media (max-aspect-ratio: 2 / 3) { + #webslides-zoomed #webslides-zoomed .column { + width: 100%; } } + +.text-slide-number { + display: inline-block; + margin: .8rem auto; + text-align: center; } + +#webslides.disabled, #webslides.zooming { + position: fixed; + width: 100%; + z-index: 0; } + +#webslides.disabled { + -webkit-filter: blur(10px); + filter: blur(10px); } + /*========================================= -18. Colors +19. Colors =========================================== */ /* -- Disable elastic scrolling/bounce: webslides.js will add .ws-ready automatically. Don't worry :) -- */ @@ -3504,92 +3593,3 @@ footer[role='contentinfo'] { .text-slide-number { color: #abc; } - -/*============================================== -19. Slides Index: Thumbnails navigation gallery -================================================ */ -#webslides-zoomed { - -ms-flex-line-pack: start; - align-content: flex-start; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - background: transparent; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - min-height: 100vh; - position: relative; - z-index: 2; } - @media (min-width: 1024px) { - #webslides-zoomed > .wrap { - padding-bottom: 12rem; - padding-top: 12rem; - width: 100%; } } - #webslides-zoomed > .wrap > .grid > .column { - -ms-flex-item-align: auto; - align-self: auto; - -webkit-box-flex: 0; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; - width: 25%; } - #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom { - overflow: hidden; - position: relative; - -webkit-transition: .3s; - transition: .3s; } - #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover { - -webkit-transform: scale(1.02); - transform: scale(1.02); - z-index: 2; } - #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer { - background: transparent; - cursor: pointer; - height: 100%; - position: absolute; - width: 100%; } - #webslides-zoomed .column > .wrap-zoom > .slide { - clip: rect(0 auto auto 0); - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - left: 0; - position: absolute; - top: 0; - -webkit-transform: scale(0.25) translate(-150%, -150vh); - transform: scale(0.25) translate(-150%, -150vh); } - @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { - #webslides-zoomed .column > .wrap-zoom > .slide { - -webkit-transform: scale(0.5) translate(-50%, -50%); - transform: scale(0.5) translate(-50%, -50%); } } - @media (max-aspect-ratio: 2 / 3) { - #webslides-zoomed .column > .wrap-zoom > .slide { - -webkit-transform: scale(0.5) translate(-50%, -50%); - transform: scale(0.5) translate(-50%, -50%); } } - @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { - #webslides-zoomed #webslides-zoomed .column { - width: 50%; } } - @media (max-aspect-ratio: 2 / 3) { - #webslides-zoomed #webslides-zoomed .column { - width: 100%; } } - -.text-slide-number { - display: inline-block; - margin: .8rem auto; - text-align: center; } - -#webslides.disabled, #webslides.zooming { - position: fixed; - width: 100%; - z-index: 0; } - -#webslides.disabled { - -webkit-filter: blur(10px); - filter: blur(10px); } diff --git a/static/js/webslides.js b/static/js/webslides.js index e91d783..ce9dc72 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.3.1 - * Date: 2017-06-01 + * Date: 2017-06-02 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index aec66f3..f8eb3ca 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.3.1 - * Date: 2017-06-01 + * Date: 2017-06-02 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros