Initial commit

[editorial.git] / assets / main / sass / layout / _wrapper.scss

diff --git a/assets/main/sass/layout/_wrapper.scss b/assets/main/sass/layout/_wrapper.scss
new file mode 100644 (file)
index 0000000..f4862de
--- /dev/null
+++ b/assets/main/sass/layout/_wrapper.scss
@@ -0,0 +1,64 @@
+///
+/// Massively by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Wrapper */
+
+       #wrapper {
+               @include vendor('transition', 'opacity #{_duration(menu)} ease');
+               position: relative;
+               z-index: 1;
+               overflow: hidden;
+
+               > .bg {
+                       position: absolute;
+                       top: 0;
+                       left: 0;
+                       width: 100%;
+                       height: 100%;
+                       background-color:               _palette(wrapper-bg);
+                       background-image:               url('../../images/overlay.png'),        linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),        url('../../images/bg.jpg');
+                       background-size:                auto,                                                           auto,                                                                                                           100% auto;
+                       background-position:    center,                                                         center,                                                                                                         top center;
+                       background-repeat:              repeat,                                                         no-repeat,                                                                                                      no-repeat;
+                       background-attachment:  scroll,                                                         scroll,                                                                                                         scroll;
+                       z-index: -1;
+
+                       &.fixed {
+                               position: fixed;
+                               width: 100vw;
+                               height: 100vh;
+                       }
+               }
+
+               &.fade-in {
+                       &:before {
+                               @include vendor('pointer-events', 'none');
+                               @include vendor('transition', 'opacity 1s ease-in-out');
+                               @include vendor('transition-delay', '0.75s');
+                               background: _palette(invert, bg);
+                               content: '';
+                               display: block;
+                               height: 100%;
+                               left: 0;
+                               opacity: 0;
+                               position: fixed;
+                               top: 0;
+                               width: 100%;
+                       }
+
+                       body.is-preload & {
+                               &:before {
+                                       opacity: 1;
+                               }
+                       }
+               }
+
+               @include orientation(portrait) {
+                       > .bg {
+                               background-size:        auto,                                                           auto,                                                                                                           auto 175%;
+                       }
+               }
+       }