From: Alexander Ebert Date: Tue, 19 Apr 2016 11:49:04 +0000 (+0200) Subject: Overhauled media queries X-Git-Tag: 3.0.0_Beta_1~1849 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=f216765bc74cb6d014c7782f2bceb004031a8eb1;p=GitHub%2FWoltLab%2FWCF.git 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 9e3b8a3f19..7c36587097 100644 --- 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 8b25a43702..8cae7b5508 100644 --- 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 85cf6079ee..27dc71699f 100644 --- 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 index 0000000000..8587cf9415 --- /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 b89ea76592..858d1c2e1a 100644 --- 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 75b06694ca..cf343a2be3 100644 --- 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 deb4eec596..570339847b 100644 --- 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 8732e33fc2..dbbd043e34 100644 --- 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 3aa9cb0de2..58c3807523 100644 --- 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 8a5e9a8034..abbe20068b 100644 --- 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 db6e312de5..cacb670efc 100644 --- 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 { */ -@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 5c9194083c..b30a043f58 100644 --- 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 0eb5a5bdd0..09e4259ea6 100644 --- 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 8bd28f7f5c..64b504a853 100644 --- 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 bb1cb83e3a..e4c6719716 100644 --- 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 40cf02d7d2..01b9ec2c22 100644 --- 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 7916dcc014..7557977f0c 100644 --- 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 99da71eef4..336847134b 100644 --- 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
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 db607c30e8..5f646d18bf 100644 --- 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 4378d4f327..6a530a0adf 100644 --- 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 fa9d750fdc..328511e99d 100644 --- 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 827d9fc3d4..d536e7c76b 100644 --- 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 702dacd29a..89aae5839e 100644 --- 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 2deb4dc587..1b2e00c592 100644 --- 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 0964226166..e63b599575 100644 --- 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 19fa9f9ed1..10a4f3094c 100644 --- 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 05cdb33e2b..43a1c7a72e 100644 --- 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 09aa65ac8a..feaea86e2d 100644 --- 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; } }