Overhauled media queries

New media queries:
* `screen-xs` -> smartphone
* `screen-sm` -> tablet (portrait)
* `screen-sm-down` -> smartphone + tablet (portrait)
* `screen-sm-up` -> tablet (portrait) + tablet (landscape) + desktop
* `screen-md` -> tablet (landscape)
* `screen-md-down` -> smartphone + tablet (portrait) + tablet
(landscape)
* `screen-md-up` -> tablet (landscape) + desktop
* `screen-lg` -> desktop

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 9e3b8a3f199b9cc3bcf2ffe77438a1cfc4c77a10..7c36587097e1cd22e60b532006d7a7f82a349940 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -18,7 +18,7 @@
        top: 0;
        z-index: 300;
        
-       @include large-screen-only {
+       @include screen-lg {
                .pageHeader .layoutBoundary {
                        height: 50px;
                        padding: 10px 10px 10px 0;
@@ -66,7 +66,7 @@
                }
        }
        
-       @include small-screen-only {
+       @include screen-md-down {
                max-width: 100vw;
        }
 }
@@ -88,7 +88,7 @@
        flex: 1 0 auto;
 }
 
-@include large-screen-only {
+@include screen-lg {
        .acpPageMenu .icon, .acpPageSubMenu .icon {
                color: inherit;
        }
@@ -189,7 +189,7 @@
        }
 }
 
-@include small-screen-only {
+@include screen-md-down {
        .acpPageMenu,
        .acpPageSubMenu {
                display: none;
@@ -199,11 +199,11 @@
 .main {
        flex: 1 1 auto;
        
-       @include large-screen-only {
+       @include screen-lg {
                padding: 40px 0 40px 20px;
        }
        
-       @include small-screen-only {
+       @include screen-md-down {
                padding: 20px 0;
        }
 }

diff --git a/wcfsetup/install/files/style/bootstrap/mixin.scss b/wcfsetup/install/files/style/bootstrap/mixin.scss
index 8b25a43702d975d1f61d86bc6caa6fe87d00978e..8cae7b5508a7dd323153f5fa2408049f4f79038c 100644 (file)
--- a/wcfsetup/install/files/style/bootstrap/mixin.scss
+++ b/wcfsetup/install/files/style/bootstrap/mixin.scss
@@ -63,16 +63,3 @@
        box-shadow: $parameters;
 }
 /** /deprecated */
-
-@mixin small-screen-only() {
-       /* 768px - 1px */
-       @media (max-width: 767px) {
-               @content;
-       }
-}
-
-@mixin large-screen-only() {
-       @media (min-width: 768px) {
-               @content;
-       }
-}

diff --git a/wcfsetup/install/files/style/bootstrap/mixin/font.scss b/wcfsetup/install/files/style/bootstrap/mixin/font.scss
index 85cf6079ee10be62d88cd4f7e910ea07ef89a51c..27dc71699fff3893e9614c110c998a27b39f90b3 100644 (file)
--- a/wcfsetup/install/files/style/bootstrap/mixin/font.scss
+++ b/wcfsetup/install/files/style/bootstrap/mixin/font.scss
@@ -1,11 +1,11 @@
 @mixin wcfFontDefault {
        font-weight: 400;
        
-       @include large-screen-only {
+       @include screen-md-up {
                font-size: $wcfFontSizeDefault;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                font-size: 14px;
        }
 }
@@ -13,11 +13,11 @@
 @mixin wcfFontSmall {
        font-weight: 400;
        
-       @include large-screen-only {
+       @include screen-md-up {
                font-size: $wcfFontSizeSmall;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                font-size: 12px;
        }
 }
@@ -30,11 +30,11 @@
        font-weight: 400;
        line-height: 1.28;
        
-       @include large-screen-only {
+       @include screen-md-up {
                font-size: $wcfFontSizeHeadline;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                font-size: 18px;
        }
 }
@@ -43,11 +43,11 @@
        font-weight: 300;
        line-height: 1.28;
        
-       @include large-screen-only {
+       @include screen-md-up {
                font-size: $wcfFontSizeSection;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                font-size: 20px;
        }
 }
@@ -56,11 +56,11 @@
        font-weight: 300;
        line-height: 1;
        
-       @include large-screen-only {
+       @include screen-md-up {
                font-size: $wcfFontSizeTitle;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                font-size: 23px;
        }
 }

diff --git a/wcfsetup/install/files/style/bootstrap/mixin/mediaQuery.scss b/wcfsetup/install/files/style/bootstrap/mixin/mediaQuery.scss
new file mode 100644 (file)
index 0000000..8587cf9
--- /dev/null
+++ b/wcfsetup/install/files/style/bootstrap/mixin/mediaQuery.scss
@@ -0,0 +1,55 @@
+/* smartphone */
+@mixin screen-xs() {
+       @media (max-width: 544px) {
+               @content;
+       }
+}
+
+/* tablet (portrait) */
+@mixin screen-sm() {
+       @media (min-width: 545px) and (max-width: 768px) {
+               @content;
+       }
+}
+
+/* smartphone + tablet (portrait) */
+@mixin screen-sm-down() {
+       @media (max-width: 768px) {
+               @content;
+       }
+}
+
+/* tablet(portrait) + tablet (landscape) + desktop */
+@mixin screen-sm-up() {
+       @media (min-width: 545px) {
+               @content;
+       }
+}
+
+/* tablet (landscape) */
+@mixin screen-md() {
+       @media (min-width: 769px) and (max-width: 1024px) {
+               @content;
+       }
+}
+
+/* smartphone + tablet (portrait) + tablet (landscape) */
+@mixin screen-md-down() {
+       @media (max-width: 1024px) {
+               @content;
+       }
+}
+
+/* tablet (landscape) + desktop */
+@mixin screen-md-up() {
+       @media (min-width: 1024px) {
+               @content;
+       }
+}
+
+/* desktop */
+@mixin screen-lg() {
+       @media (min-width: 1025px) {
+               @content;
+       }
+}

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index b89ea76592b5f32b7e5abb405dcd2b9239999021..858d1c2e1ac2616dac8a01ac77ac86871fd4a72b 100644 (file)
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -199,21 +199,21 @@
                &:not(.boxBorderless) {
                        background-color: $wcfSidebarBackground;
                        
-                       @include large-screen-only {
-                               padding: 20px;
+                       @include screen-md-down {
+                               padding: 20px 10px;
                                
                                .boxMenu {
-                                       margin-left: -20px;
-                                       margin-right: -20px;
+                                       margin-left: -10px;
+                                       margin-right: -10px;
                                }
                        }
                        
-                       @include small-screen-only {
-                               padding: 20px 10px;
+                       @include screen-lg {
+                               padding: 20px;
                                
                                .boxMenu {
-                                       margin-left: -10px;
-                                       margin-right: -10px;
+                                       margin-left: -20px;
+                                       margin-right: -20px;
                                }
                        }
                }
@@ -364,16 +364,16 @@
                margin-left: -10px;
                margin-right: -10px;
                
-               @include large-screen-only {
+               @include screen-sm-down {
+                       padding: 20px 0;
+               }
+               
+               @include screen-md-up {
                        display: flex;
                        flex-wrap: wrap;
                        margin-bottom: -40px;
                        padding: 40px 0;
                }
-               
-               @include small-screen-only {
-                       padding: 20px 0;
-               }
        }
        
        .box {
@@ -381,7 +381,13 @@
                padding-left: 10px;
                padding-right: 10px;
                
-               @include large-screen-only {
+               @include screen-sm-down {
+                       & + .box {
+                               margin-top: 40px;
+                       }
+               }
+               
+               @include screen-md-up {
                        flex: 0 0 50%;
                        margin-bottom: 40px;
                        
@@ -389,12 +395,6 @@
                                flex-basis: 100%;
                        }
                }
-               
-               @include small-screen-only {
-                       & + .box {
-                               margin-top: 40px;
-                       }
-               }
        }
        
        .boxTitle {

diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index 75b06694ca5ffddd6b7185dfc3882b5e06e0d7f9..cf343a2be379e965355088395f51196b6778ef1c 100644 (file)
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -2,12 +2,12 @@
        position: relative;
        transition: background-color .2s;
        
-       @include large-screen-only {
-               padding: 20px;
+       @include screen-md-down {
+               padding: 10px 0;
        }
        
-       @include small-screen-only {
-               padding: 10px 0;
+       @include screen-lg {
+               padding: 20px;
        }
        
        &:not(:last-child) {
@@ -91,7 +91,16 @@
 }
 
 .containerBoxList {
-       @include large-screen-only {
+       @include screen-sm-down {
+               &.doubleColumned,
+               &.tripleColumned {
+                       > li + li {
+                               margin-top: 10px;
+                       }
+               }
+       }
+       
+       @include screen-md-up {
                &.doubleColumned,
                &.tripleColumned {
                        display: flex;
@@ -125,13 +134,4 @@
                        width: calc(100% / 3);
                }
        }
-       
-       @include small-screen-only {
-               &.doubleColumned,
-               &.tripleColumned {
-                       > li + li {
-                               margin-top: 10px;
-                       }
-               }
-       }
 }

diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index deb4eec596242f5b62418b8a47ba5a6f4e584d35..570339847be9289a9784da57f26a0a6e7ba39633 100644 (file)
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -55,7 +55,23 @@
                color: $wcfContentDimmedText;
        }
        
-       @include large-screen-only {
+       @include screen-md-down {
+               .contentHeaderIcon {
+                       display: none;
+               }
+       }
+       
+       @include screen-sm {
+               .contentHeaderNavigation > ul {
+                       @include inlineList;
+                       
+                       flex-wrap: nowrap;
+                       justify-content: flex-end;
+                       margin-top: 20px;
+               }
+       }
+       
+       @include screen-md-up {
                display: flex;
                
                .contentHeaderIcon {
@@ -78,14 +94,6 @@
                        }
                }
        }
-       
-       @include small-screen-only {
-               .contentHeaderIcon {
-                       display: none;
-               }
-               
-               // TODO: mobile optimization for `.contentHeaderNavigation`
-       }
 }
 
 /* legacy styling for sub headlines (deprecated; use .section > .sectionTitle instead) */
@@ -265,7 +273,25 @@ fieldset {
                margin-top: 30px;
        }
        
-       @include large-screen-only {
+       @include screen-sm-down {
+               ul {
+                       margin-top: 30px;
+                       
+                       > li {
+                               > .button {
+                                       display: block;
+                                       padding: 7px 10px;
+                                       text-align: center;
+                               }
+                       }
+               }
+               
+               > nav:not(.pagination) > ul > li + li {
+                       margin-top: 10px;
+               }
+       }
+       
+       @include screen-md-up {
                align-items: center;
                display: flex;
                
@@ -311,24 +337,6 @@ fieldset {
                        }
                }
        }
-       
-       @include small-screen-only {
-               ul {
-                       margin-top: 30px;
-                       
-                       > li {
-                               > .button {
-                                       display: block;
-                                       padding: 7px 10px;
-                                       text-align: center;
-                               }
-                       }
-               }
-               
-               > nav:not(.pagination) > ul > li + li {
-                       margin-top: 10px;
-               }
-       }
 }
 
 .paginationTop {
@@ -340,7 +348,23 @@ fieldset {
 }
 
 .contentFooter {
-       @include large-screen-only {
+       @include screen-sm-down {
+               > .contentFooterNavigation {
+                       margin-top: 20px;
+                       
+                       .button {
+                               display: block;
+                               padding: 7px 10px;
+                               text-align: center;
+                               
+                               &:not(:first-child) {
+                                       margin-top: 10px;
+                               }
+                       }
+               }
+       }
+       
+       @include screen-md-up {
                display: flex;
                
                > .paginationBottom {
@@ -361,26 +385,10 @@ fieldset {
                        }
                }
        }
-       
-       @include small-screen-only {
-               > .contentFooterNavigation {
-                       margin-top: 20px;
-                       
-                       .button {
-                               display: block;
-                               padding: 7px 10px;
-                               text-align: center;
-                               
-                               &:not(:first-child) {
-                                       margin-top: 10px;
-                               }
-                       }
-               }
-       }
 }
 
 /* content navigation buttons */
-@include small-screen-only {
+@include screen-xs {
        .contentHeader > .contentHeaderNavigation > ul {
                margin-top: 30px;
                
@@ -398,7 +406,7 @@ fieldset {
        }
 }
 
-@include small-screen-only {
+@include screen-sm-down {
        .paginationTop {
                display: none;
                

diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index 8732e33fc25ea361e422bdf11b5358aab46997e1..dbbd043e34c9a94b5255c5f59aaf6b3d1f110b17 100644 (file)
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -109,13 +109,7 @@ select {
                margin-top: 30px;
        }
        
-       @include large-screen-only {
-               > :not(:first-child) {
-                       margin-left: 10px;
-               }
-       }
-       
-       @include small-screen-only {
+       @include screen-xs {
                > .button,
                > button,
                > input {
@@ -128,6 +122,12 @@ select {
                        }
                }
        }
+       
+       @include screen-sm-up {
+               > :not(:first-child) {
+                       margin-left: 10px;
+               }
+       }
 }
 
 .inputAddon {

diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss
index 3aa9cb0de23ad7a3ff2c19167a715d56359ea8d5..58c38075232a32847b3ef3c2d17e3d847b857c5b 100644 (file)
--- a/wcfsetup/install/files/style/layout/global.scss
+++ b/wcfsetup/install/files/style/layout/global.scss
@@ -1,12 +1,12 @@
 .layoutBoundary {
        margin: 0 auto;
        
-       @include small-screen-only {
+       @include screen-md-down {
                padding: 0 10px;
                width: 100%;
        }
        
-       @include large-screen-only {
+       @include screen-lg {
                padding: 0 20px;
                
                @if $useFluidLayout {

diff --git a/wcfsetup/install/files/style/layout/grid.scss b/wcfsetup/install/files/style/layout/grid.scss
index 8a5e9a803486c2844f8a202fd5b6b8815443b807..abbe20068b14488bdd26928dc15b4000bca2fe13 100644 (file)
--- a/wcfsetup/install/files/style/layout/grid.scss
+++ b/wcfsetup/install/files/style/layout/grid.scss
@@ -126,7 +126,7 @@
        margin-left: 100%;
 }
 
-@include large-screen-only {
+@include screen-md-up {
        .col-md-1 {
                flex: 0 0 8.333333%;
        }
@@ -297,7 +297,7 @@
        align-items: flex-end;
 }
 
-@include large-screen-only {
+@include screen-md-up {
        .row-md-top {
                -ms-grid-row-align: flex-start;
                align-items: flex-start;
@@ -324,7 +324,7 @@
        align-self: flex-end;
 }
 
-@include large-screen-only {
+@include screen-md-up {
        .col-md-top {
                align-self: flex-start;
        }

diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index db6e312de5c8751cdef7fc4bf994851325ce066e..cacb670efc525442d4d511228d68071c487c841a 100644 (file)
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -36,11 +36,11 @@ a {
        color: $wcfContentText;
        flex: 1 0 auto;
        
-       @include large-screen-only {
+       @include screen-md-up {
                padding: 60px 0;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                padding: 30px 0;
                width: 100%;
        }
@@ -55,7 +55,7 @@ a {
 }
 
 /* use flex-box to enforce a proper side-by-side layout on desktop */
-@include large-screen-only {
+@include screen-md-up {
        .main > div {
                display: flex;
        }
@@ -105,7 +105,7 @@ a {
    <content>
    <rightSidebar>
 */
-@include small-screen-only {
+@include screen-sm-down {
        .sidebar {
                margin: 0 -10px;
        }

diff --git a/wcfsetup/install/files/style/layout/pageFooter.scss b/wcfsetup/install/files/style/layout/pageFooter.scss
index 5c9194083c72794d7f2852db267282b7036360ac..b30a043f586083e7c8cd3a0afa6aa42bb81da054 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageFooter.scss
+++ b/wcfsetup/install/files/style/layout/pageFooter.scss
@@ -3,11 +3,11 @@
        color: $wcfFooterText;
        flex: 0 0 auto;
        
-       @include large-screen-only {
+       @include screen-md-up {
                padding: 40px 0;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                padding: 20px 0;
        }
        

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 0eb5a5bdd0d36806654f7a8b69ac279ac853bb24..09e4259ea6ae495aad2d5aaba7c22f0e6584cee9 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -15,27 +15,27 @@
 .pageHeader .layoutBoundary {
        display: flex;
        
-       @include large-screen-only {
+       @include screen-md-down {
+               padding: 10px;
+       }
+       
+       @include screen-lg {
                align-items: center;
                flex-wrap: wrap;
                padding-top: 20px;
                padding-bottom: 0;
        }
-       
-       @include small-screen-only {
-               padding: 10px;
-       }
 }
 
 /* LOGO */
 .pageHeaderLogo {
-       .pageHeaderLogoSmall {
-               display: none;
-       }
-       
-       @include large-screen-only {
+       @include screen-lg {
                flex: 0 0 50%;
                margin-bottom: 20px;
+               
+               .pageHeaderLogoSmall {
+                       display: none;
+               }
        }
 }
 
@@ -141,7 +141,7 @@
        }
 }
 
-@include large-screen-only {
+@include screen-lg {
        .pageHeader:not(.sticky) {
                .mainMenu {
                        background-color: $wcfHeaderMenuBackground;
@@ -178,6 +178,7 @@
 
 /* user panel */
 .userPanel {
+       background-color: $wcfHeaderMenuBackground;
        flex: 0 0 auto;
        
        > ul {
@@ -241,7 +242,7 @@
 
 /* SEARCH AREA */
 .pageHeaderSearch {
-       @include large-screen-only {
+       @include screen-lg {
                align-self: flex-start;
                flex: 0 0 50%;
                margin-bottom: 20px;
@@ -331,7 +332,7 @@
        }
 }
 
-@include small-screen-only {
+@include screen-md-down {
        .pageHeaderContainer {
                // touch browser allow to scroll past the page top before they bounce back,
                // but in that case the original background color is visible

diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index 8bd28f7f5c2725a9d935782c4f5fd8f3c3888ef4..64b504a853d78a1ec036ae16f6f0e7db4afe6a89 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -3,7 +3,7 @@
        will-change: transform;
 }
 
-@include large-screen-only {
+@include screen-lg {
        .pageHeaderContainer.stickyPageHeader {
                z-index: 300;
        }
@@ -148,7 +148,7 @@
 // force sticky header on handheld devices, there is no difference when scrolled
 // all the way up and it might flicker when scrolling due to the inconsistent
 // scroll event being fired
-@include small-screen-only {
+@include screen-md-down {
        .pageHeaderContainer {
                height: 50px;
                z-index: 300;

diff --git a/wcfsetup/install/files/style/layout/pageNavigation.scss b/wcfsetup/install/files/style/layout/pageNavigation.scss
index bb1cb83e3a4aff4824de6c67f8cd5f44cb742d8d..e4c6719716c49dfc1bd352133adebb4d1fa95683 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageNavigation.scss
+++ b/wcfsetup/install/files/style/layout/pageNavigation.scss
@@ -1,4 +1,4 @@
-@include large-screen-only {
+@include screen-md-up {
        .pageNavigation {
                background-color: $wcfNavigationBackground;
                color: $wcfNavigationText;
@@ -45,7 +45,7 @@
        }
 }
 
-@include small-screen-only {
+@include screen-sm-down {
        .pageNavigation {
                display: none;
        }

diff --git a/wcfsetup/install/files/style/layout/sidebar.scss b/wcfsetup/install/files/style/layout/sidebar.scss
index 40cf02d7d2cb4b09973f6adb3f41a1006dfaab51..01b9ec2c223f5fe0ef5bf2baf5e2ed6da784657b 100644 (file)
--- a/wcfsetup/install/files/style/layout/sidebar.scss
+++ b/wcfsetup/install/files/style/layout/sidebar.scss
@@ -19,11 +19,11 @@
                > section:not(.box) {
                        background-color: $wcfSidebarBackground;
                        
-                       @include large-screen-only {
+                       @include screen-md-up {
                                padding: 20px;
                        }
                        
-                       @include small-screen-only {
+                       @include screen-sm-down {
                                padding: 20px 10px;
                        }
                        

diff --git a/wcfsetup/install/files/style/ui/alert.scss b/wcfsetup/install/files/style/ui/alert.scss
index 7916dcc014fbf0f4801964097f73264c36b35653..7557977f0caf000375510684e3e1b19183a34272 100644 (file)
--- a/wcfsetup/install/files/style/ui/alert.scss
+++ b/wcfsetup/install/files/style/ui/alert.scss
@@ -5,11 +5,11 @@
        border-left: 5px solid transparent;
        margin-top: 20px;
        
-       @include large-screen-only {
+       @include screen-md-up {
                padding: 10px 20px;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                padding: 10px;
        }
 }

diff --git a/wcfsetup/install/files/style/ui/avatar.scss b/wcfsetup/install/files/style/ui/avatar.scss
index 99da71eef480d8f8744935e3097d9b9299d43d2e..336847134b2f66505fc068474c39ce0542435fd1 100644 (file)
--- a/wcfsetup/install/files/style/ui/avatar.scss
+++ b/wcfsetup/install/files/style/ui/avatar.scss
@@ -14,7 +14,7 @@
                margin-top: 10px;
        }
        
-       @include large-screen-only {
+       @include screen-md-up {
                /* use fixed height to ensure a constant gap between <dl> with and without an image */
                height: 100px;
                
@@ -35,7 +35,7 @@
                }
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                flex-wrap: wrap;
                
                > dt:not(:empty) {

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index db607c30e8cb86925dd8412ac28b97bcc8e386d0..5f646d18bfcc8b6460e6c2ede0aab75bfddcbb92 100644 (file)
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -11,7 +11,7 @@
        will-change: opacity;
        z-index: 399;
        
-       @include large-screen-only {
+       @include screen-md-up {
                padding: 100px 0;
        }
        
@@ -47,14 +47,14 @@
 .dialogContainer {
        z-index: 200;
        
-       @include small-screen-only {
+       @include screen-sm-down {
                left: 0 !important;
                position: fixed;
                right: 0 !important;
                top: 0 !important;
        }
        
-       @include large-screen-only {
+       @include screen-md-up {
                animation: wcfDialogOut .3s;
                animation-fill-mode: forwards;
                box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
@@ -106,11 +106,11 @@
                overflow: auto;
                
                &:not(.dialogContentNoPadding) {
-                       @include small-screen-only {
+                       @include screen-sm-down {
                                padding: 10px;
                        }
                        
-                       @include large-screen-only {
+                       @include screen-md-up {
                                padding: 30px 20px 10px 20px;
                        }
                        

diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss
index 4378d4f3275dfb15ece57ec7dadaabdb947347b8..6a530a0adf322b6f71a710498360e6c01c38304c 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdown.scss
+++ b/wcfsetup/install/files/style/ui/dropdown.scss
@@ -280,13 +280,13 @@
        }
 }
 
-@include large-screen-only {
+@include screen-md-up {
        .dropdownMenu.pageHeaderSearchDropdown {
                transform: translateY(-10px);
        }
 }
 
-@include small-screen-only {
+@include screen-sm-down {
        .dropdownMenu {
                left: 0 !important;
                right: 0 !important;

diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index fa9d750fdc003bccf6fee55200fb086ea5f945cb..328511e99d966d6f51670da54b43039ec730e20f 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -55,7 +55,7 @@
                margin-left: 5px;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                padding: 10px;
        }
 }
@@ -104,7 +104,7 @@
                        overflow: hidden;
                }
                
-               @include small-screen-only {
+               @include screen-sm-down {
                        padding: 10px;
                }
        }
@@ -180,7 +180,7 @@
        }
 }
 
-@include large-screen-only {
+@include screen-md-up {
        .interactiveDropdown {
                min-width: 350px;
        }
@@ -196,7 +196,7 @@
        }
 }
 
-@include small-screen-only {
+@include screen-sm-down {
        .interactiveDropdown {
                bottom: 0;
                display: flex;

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 827d9fc3d4e2ebddac1fe4e00960160235e252f2..d536e7c76bb23a1e06648d695cafe8b6869d599e 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -1,7 +1,7 @@
 .messageList {
        border-bottom: 1px solid $wcfContentBorder;
        
-       @include large-screen-only {
+       @include screen-md-up {
                border-top: 1px solid $wcfContentBorder;
                
                > li {
@@ -13,7 +13,7 @@
                }
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                > li {
                        padding-bottom: 20px;
                }
@@ -48,7 +48,7 @@
 .message {
        display: flex;
        
-       @include small-screen-only {
+       @include screen-sm-down {
                flex-direction: column;
        }
        
@@ -79,7 +79,7 @@
        color: $wcfSidebarText;
        position: relative;
        
-       @include large-screen-only {
+       @include screen-md-up {
                align-self: flex-start;
                border-radius: 3px;
                flex: 0 0 240px;
@@ -91,7 +91,7 @@
                }
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                flex: 0 0 auto;
                margin: 0 -10px;
                padding: 10px;
@@ -162,11 +162,11 @@
                pointer-events: none;
                position: absolute;
                
-               @include large-screen-only {
+               @include screen-md-up {
                        bottom: 0;
                }
                
-               @include small-screen-only {
+               @include screen-sm-down {
                        color: transparent;
                        padding: 0;
                        width: 0;
@@ -223,7 +223,7 @@
        flex: auto;
        flex-direction: column;
        
-       @include small-screen-only {
+       @include screen-sm-down {
                margin-top: 20px;
        }
        
@@ -326,11 +326,11 @@
 }
 
 .messageQuickOptions {
-       @include large-screen-only {
+       @include screen-md-up {
                @include inlineList;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                flex: 0 0 24px;
                height: 1.5em;
                position: relative;
@@ -423,11 +423,11 @@
        }
        
        > .messageFooterButtons {
-               @include large-screen-only {
+               @include screen-md-up {
                        flex: auto;
                }
                
-               @include small-screen-only {
+               @include screen-sm-down {
                        display: none;
                }
        }

diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 702dacd29a3d75b607f93e904d749b352ec21f7c..89aae5839e38130c006ee66ba588d45c529b5c27 100644 (file)
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -191,7 +191,7 @@
 }
 
 /* disable auto zoom in mobile safari */
-@include small-screen-only {
+@include screen-sm-down {
        .redactor-editor + textarea {
                font-size: 16px;
                max-height: 500px;

diff --git a/wcfsetup/install/files/style/ui/tabMenu.scss b/wcfsetup/install/files/style/ui/tabMenu.scss
index 2deb4dc587fdf7f26b83a8a97a9713ad6c4785e3..1b2e00c592b1dd74dfaeb60cb24dfea7ede2b167 100644 (file)
--- a/wcfsetup/install/files/style/ui/tabMenu.scss
+++ b/wcfsetup/install/files/style/ui/tabMenu.scss
@@ -9,7 +9,7 @@
                @include wcfFontSection;
        }
        
-       @include large-screen-only {
+       @include screen-md-up {
                > ul {
                        border-bottom: 1px solid $wcfContentBorderInner;
                        
@@ -44,7 +44,7 @@
                }
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                > ul {
                        border-bottom: 1px solid $wcfContentLink;
                        display: block;

diff --git a/wcfsetup/install/files/style/ui/tabMenuMessage.scss b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
index 096422616616f0e147475b441a0e8ed18daf95ea..e63b5995758fcd828d5b9da8661e029763b9c376 100644 (file)
--- a/wcfsetup/install/files/style/ui/tabMenuMessage.scss
+++ b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
@@ -89,13 +89,13 @@
                                
                                @include userSelectNone;
                                
-                               @include large-screen-only {
+                               @include screen-md-up {
                                        > .icon {
                                                display: none;
                                        }
                                }
                                
-                               @include small-screen-only {
+                               @include screen-sm-down {
                                        > .icon {
                                                display: block;
                                        }

diff --git a/wcfsetup/install/files/style/ui/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss
index 19fa9f9ed180e854f3e8cc9a16463120ac0be5dc..10a4f3094caae542bcdba7cfd91d7014696f2290 100644 (file)
--- a/wcfsetup/install/files/style/ui/tabularBox.scss
+++ b/wcfsetup/install/files/style/ui/tabularBox.scss
@@ -81,7 +81,7 @@
 }
 
 .tabularBox {
-       @include small-screen-only {
+       @include screen-sm-down {
                overflow: auto;
        }
 }

diff --git a/wcfsetup/install/files/style/ui/userLogin.scss b/wcfsetup/install/files/style/ui/userLogin.scss
index 05cdb33e2b017afa72024ed28ed0f3da092a3a59..43a1c7a72e5b5a2d917534beedfa636ec1481fe6 100644 (file)
--- a/wcfsetup/install/files/style/ui/userLogin.scss
+++ b/wcfsetup/install/files/style/ui/userLogin.scss
@@ -60,7 +60,7 @@
                }
        }
        
-       @include large-screen-only {
+       @include screen-md-up {
                -webkit-column-count: 2;
                -moz-column-count: 2;
                column-count: 2;
@@ -93,7 +93,7 @@
        }
 }
 
-@include large-screen-only {
+@include screen-md-up {
        /* full page login: missing margin due to different DOM */
        .contentHeader ~ .loginForm {
                margin-top: 30px;

diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index 09aa65ac8aad49ab4a64944ddcd04f6bf698c6ee..feaea86e2d315f38de5be41e5153e2375b7001c5 100644 (file)
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -10,11 +10,11 @@
           and a clear separation if the images color is close to the surrounding elements */
        box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, .6), inset 0 -10px 10px -10px rgba(0, 0, 0, .6);
        
-       @include large-screen-only {
+       @include screen-md-up {
                height: 200px;
        }
        
-       @include small-screen-only {
+       @include screen-sm-down {
                height: 100px;
        }
 }
@@ -28,7 +28,7 @@
                padding: 0 10px 0 160px;
                position: relative;
                
-               @include small-screen-only {
+               @include screen-sm-down {
                        padding-left: 90px;
                }
        }
@@ -48,7 +48,7 @@
                top: 50%;
                transform: translateY(-50%);
                
-               @include small-screen-only {
+               @include screen-sm-down {
                        .userAvatarImage {
                                height: 64px !important;
                                width: 64px !important;
@@ -72,7 +72,7 @@
        }
        
        .userProfileButtonContainer {
-               @include large-screen-only {
+               @include screen-md-up {
                        display: flex;
                        flex: 0 0 auto;
                        margin-left: 10px;
@@ -142,7 +142,7 @@
                        }
                }
                
-               @include small-screen-only {
+               @include screen-sm-down {
                        display: none;
                }
        }
@@ -163,7 +163,7 @@
        > .layoutBoundary {
                padding: 10px 10px 10px 160px;
                
-               @include small-screen-only {
+               @include screen-sm-down {
                        padding: 20px 10px 10px;
                }
        }