From 5908f54f9facc61a4bf93824115280cfed5df983 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 13 Mar 2016 22:11:41 +0100 Subject: [PATCH] Migrated from `@extend` to `@include` `@extend` has a few downsides that led to this change: - selectors are merged, thus the order in which individual CSS appears in the stylesheet is no longer deterministic - doesn't work with `@media` - creates really huge selectors that negatively impact the work with browser developer tools Using `@include` does increase the raw filesize as the individual CSS properties are now copied rather than referenced: Gzip negates this almost entirely. --- .../lib/system/style/StyleCompiler.class.php | 28 ++------ .../install/files/style/bbcode/quote.scss | 2 +- .../install/files/style/bootstrap/mixin.scss | 8 ++- .../files/style/bootstrap/mixin/box.scss | 13 ++++ .../files/style/bootstrap/mixin/font.scss | 32 +++++++++ .../files/style/bootstrap/mixin/list.scss | 59 +++++++++++++++ wcfsetup/install/files/style/element/dl.scss | 4 +- .../install/files/style/element/list.scss | 42 ++--------- wcfsetup/install/files/style/layout/box.scss | 18 ++--- .../install/files/style/layout/content.scss | 14 ++-- wcfsetup/install/files/style/layout/form.scss | 6 +- .../install/files/style/layout/global.scss | 71 ++----------------- .../install/files/style/layout/layout.scss | 4 +- .../files/style/layout/pageHeader.scss | 4 +- .../install/files/style/layout/sidebar.scss | 2 +- wcfsetup/install/files/style/ui/badge.scss | 2 +- .../install/files/style/ui/breadcrumb.scss | 2 +- wcfsetup/install/files/style/ui/button.scss | 14 ++-- wcfsetup/install/files/style/ui/comment.scss | 2 +- .../install/files/style/ui/datePicker.scss | 2 +- wcfsetup/install/files/style/ui/dialog.scss | 4 +- wcfsetup/install/files/style/ui/dropdown.scss | 4 +- .../files/style/ui/dropdownInteractive.scss | 4 +- wcfsetup/install/files/style/ui/label.scss | 2 +- wcfsetup/install/files/style/ui/media.scss | 4 +- wcfsetup/install/files/style/ui/message.scss | 22 +++--- .../install/files/style/ui/messageGroup.scss | 8 +-- .../install/files/style/ui/pageAction.scss | 2 +- wcfsetup/install/files/style/ui/redactor.scss | 4 +- wcfsetup/install/files/style/ui/tabMenu.scss | 6 +- .../files/style/ui/tabMenuMessage.scss | 10 +-- .../install/files/style/ui/tabularBox.scss | 10 +-- wcfsetup/install/files/style/ui/tooltip.scss | 4 +- 33 files changed, 206 insertions(+), 207 deletions(-) create mode 100644 wcfsetup/install/files/style/bootstrap/mixin/box.scss create mode 100644 wcfsetup/install/files/style/bootstrap/mixin/font.scss create mode 100644 wcfsetup/install/files/style/bootstrap/mixin/list.scss diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php index a6c655a05e..8cacafc4f2 100644 --- a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php +++ b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php @@ -251,6 +251,11 @@ class StyleCompiler extends SingletonFactory { // add mixins $content .= $this->prepareFile(WCF_DIR.'style/bootstrap/mixin.scss'); + // add newer mixins added with WCF 2.2 + foreach (glob(WCF_DIR.'style/bootstrap/mixin/*.scss') as $mixin) { + $content .= $this->prepareFile($mixin); + } + return $content; } @@ -329,29 +334,6 @@ class StyleCompiler extends SingletonFactory { $content = $callback($content); - // compress stylesheet - /*$lines = explode("\n", $content); - $content = $lines[0] . "\n" . $lines[1] . "\n"; - for ($i = 2, $length = count($lines); $i < $length; $i++) { - $line = trim($lines[$i]); - $content .= $line; - - switch (substr($line, -1)) { - case ',': - $content .= ' '; - break; - - case '}': - $content .= "\n"; - break; - } - - if (substr($line, 0, 6) == '@media') { - $content .= "\n"; - } - } - */ - // write stylesheet file_put_contents($filename.'.css', $content); FileUtil::makeWritable($filename.'.css'); diff --git a/wcfsetup/install/files/style/bbcode/quote.scss b/wcfsetup/install/files/style/bbcode/quote.scss index 2a09d13829..1aa6abae72 100644 --- a/wcfsetup/install/files/style/bbcode/quote.scss +++ b/wcfsetup/install/files/style/bbcode/quote.scss @@ -42,5 +42,5 @@ .quoteBoxTitle { flex: 1 auto; - @extend .wcfFontHeadline; + @include wcfFontHeadline; } diff --git a/wcfsetup/install/files/style/bootstrap/mixin.scss b/wcfsetup/install/files/style/bootstrap/mixin.scss index 862713a839..8b25a43702 100644 --- a/wcfsetup/install/files/style/bootstrap/mixin.scss +++ b/wcfsetup/install/files/style/bootstrap/mixin.scss @@ -1,6 +1,6 @@ /* shortcuts */ // clearing floats like a boss h5bp.com/q -.clearfix { +@mixin clearfix { &::before, &::after { display: table; @@ -12,7 +12,11 @@ } } -.userSelectNone { +.clearfix { + @include clearfix; +} + +@mixin userSelectNone { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; diff --git a/wcfsetup/install/files/style/bootstrap/mixin/box.scss b/wcfsetup/install/files/style/bootstrap/mixin/box.scss new file mode 100644 index 0000000000..6f00c42980 --- /dev/null +++ b/wcfsetup/install/files/style/bootstrap/mixin/box.scss @@ -0,0 +1,13 @@ +@mixin box($imageSize, $margin: 0) { + display: flex; + + > :first-child:not(:last-child) { + flex: 0 0 auto; + margin-right: $margin; + } + + > :last-child { + flex: 1; + overflow: hidden; + } +} diff --git a/wcfsetup/install/files/style/bootstrap/mixin/font.scss b/wcfsetup/install/files/style/bootstrap/mixin/font.scss new file mode 100644 index 0000000000..f4741c8137 --- /dev/null +++ b/wcfsetup/install/files/style/bootstrap/mixin/font.scss @@ -0,0 +1,32 @@ +@mixin wcfFontDefault { + font-size: $wcfFontSizeDefault; + font-weight: 400; +} + +@mixin wcfFontSmall { + font-size: $wcfFontSizeSmall; + font-weight: 400; +} + +@mixin wcfFontBold { + font-weight: 600; +} + +@mixin wcfFontHeadline { + font-size: $wcfFontSizeHeadline; + font-weight: 400; +} + +@mixin wcfFontSection { + font-size: $wcfFontSizeSection; + font-weight: 300; +} + +@mixin wcfFontTitle { + font-size: $wcfFontSizeTitle; + font-weight: 300; +} + +@mixin wcfLineHeight { + line-height: $wcfFontLineHeight; +} diff --git a/wcfsetup/install/files/style/bootstrap/mixin/list.scss b/wcfsetup/install/files/style/bootstrap/mixin/list.scss new file mode 100644 index 0000000000..8b18d68aa1 --- /dev/null +++ b/wcfsetup/install/files/style/bootstrap/mixin/list.scss @@ -0,0 +1,59 @@ +@mixin nativeList { + margin: 1em 0 1em 40px; + + ul, + ol { + margin-bottom: 0; + margin-top: 0; + } + + li { + margin: 5px 0; + } +} + +@mixin commaSeparated { + > li { + &:not(:last-child):after { + content: ","; + padding-left: 1px; + } + } +} + +@mixin dotSeparated { + > li { + &:not(:last-child):after { + content: "\00b7"; + margin-left: 5px; + } + } +} + +@mixin inlineList { + display: flex; + flex-wrap: wrap; + + > li { + flex: 0 auto; + + &:not(:last-child) { + margin-right: 5px; + } + + > a { + // @todo: still necessary? + /*display: inline-flex;*/ + } + } + + /* adds a comma after each list item */ + &.commaSeparated { + @include commaSeparated; + } + + /* adds a dot after each list item */ + &.dotSeparated { + @include dotSeparated; + } +} diff --git a/wcfsetup/install/files/style/element/dl.scss b/wcfsetup/install/files/style/element/dl.scss index 38b394c900..8160821302 100644 --- a/wcfsetup/install/files/style/element/dl.scss +++ b/wcfsetup/install/files/style/element/dl.scss @@ -63,7 +63,7 @@ dl { } &.dataList { - @extend .clearfix; + @include clearfix; > dt { clear: right; @@ -121,7 +121,7 @@ dl { text-align: left; white-space: nowrap; - @extend .wcfFontSmall; + @include wcfFontSmall; } > dd { diff --git a/wcfsetup/install/files/style/element/list.scss b/wcfsetup/install/files/style/element/list.scss index 7ac649c551..4d6a04fb41 100644 --- a/wcfsetup/install/files/style/element/list.scss +++ b/wcfsetup/install/files/style/element/list.scss @@ -1,40 +1,6 @@ /* makes an inline-list */ .inlineList { - display: flex; - flex-wrap: wrap; - - > li { - flex: 0 auto; - - &:not(:last-child) { - margin-right: 5px; - } - - > a { - // @todo: still necessary? - /*display: inline-flex;*/ - } - } - - /* adds a comma after each list item */ - &.commaSeparated { - > li { - &:not(:last-child):after { - content: ","; - padding-left: 1px; - } - } - } - - /* adds a dot after each list item */ - &.dotSeparated { - > li { - &:not(:last-child):after { - content: "\00b7"; - margin-left: 5px; - } - } - } + @include inlineList; } /* restores the native styling for lists */ @@ -54,7 +20,7 @@ ol.nativeList { /* tag cloud list */ .tagList { - @extend .inlineList; + @include inlineList; align-items: baseline; } @@ -67,8 +33,8 @@ ol.nativeList { /* legacy styling (deprecated) */ ol.dataList, ul.dataList { - @extend .inlineList; - @extend .wcfFontSmall; + @include inlineList; + @include wcfFontSmall; > li { &:not(:last-child):after { diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss index ead85ebe0a..7361b4905a 100644 --- a/wcfsetup/install/files/style/layout/box.scss +++ b/wcfsetup/install/files/style/layout/box.scss @@ -10,7 +10,7 @@ } .boxTitle { - @extend .wcfFontHeadline; + @include wcfFontHeadline; & + .boxContent { margin-top: 20px; @@ -36,7 +36,7 @@ } .boxTitle { - @extend .wcfFontTitle; + @include wcfFontTitle; } .boxWithImage { @@ -117,7 +117,7 @@ .boxTitle { color: $wcfContentHeadlineText; - @extend .wcfFontSection; + @include wcfFontSection; a { color: $wcfContentHeadlineLink; @@ -129,7 +129,7 @@ } .boxWithImage { - @extend .clearfix; + @include clearfix; .boxTitle, .boxContent { @@ -258,7 +258,7 @@ } .boxWithImage { - @extend .clearfix; + @include clearfix; .boxTitle, .boxContent { @@ -282,7 +282,7 @@ } .boxWithImage { - @extend .clearfix; + @include clearfix; .boxTitle, .boxContent { @@ -293,7 +293,7 @@ .boxTitle { color: $wcfContentHeadlineText; - @extend .wcfFontSection; + @include wcfFontSection; a { color: $wcfContentHeadlineLink; @@ -394,7 +394,7 @@ } .boxWithImage { - @extend .clearfix; + @include clearfix; .boxTitle, .boxContent { @@ -426,7 +426,7 @@ &.boxMenuHasChildren { > .boxMenuLink { - @extend .wcfFontHeadline; + @include wcfFontHeadline; margin-bottom: 10px; } diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss index 9ee411161f..0493d56e4e 100644 --- a/wcfsetup/install/files/style/layout/content.scss +++ b/wcfsetup/install/files/style/layout/content.scss @@ -6,7 +6,7 @@ .contentTitle, > h1 { // deprecated - @extend .wcfFontTitle; + @include wcfFontTitle; .badge { top: -2px; @@ -52,7 +52,7 @@ > h2 { color: $wcfContentHeadlineText; // todo: rename variable - @extend .wcfFontSection; + @include wcfFontSection; a { color: $wcfContentHeadlineLink; // todo: rename variable @@ -85,7 +85,7 @@ .sectionTitle { color: $wcfContentHeadlineText; // todo: rename variable - @extend .wcfFontSection; + @include wcfFontSection; a { color: $wcfContentHeadlineLink; // todo: rename variable @@ -137,7 +137,7 @@ } .sectionTitle { - @extend .wcfFontHeadline; + @include wcfFontHeadline; } > .sectionHeader, @@ -159,7 +159,7 @@ fieldset { padding-bottom: 10px; width: 100%; - @extend .wcfFontSection; + @include wcfFontSection; a { color: $wcfContentHeadlineLink; // todo: rename variable @@ -191,7 +191,7 @@ fieldset { > legend { margin-bottom: 15px; - @extend .wcfFontHeadline; + @include wcfFontHeadline; } } } @@ -199,7 +199,7 @@ fieldset { /* styling for container headlines */ .containerHeadline { > h3 { - @extend .wcfFontHeadline; + @include wcfFontHeadline; > .badge { top: -2px; diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss index e9887e82a0..b77a534e81 100644 --- a/wcfsetup/install/files/style/layout/form.scss +++ b/wcfsetup/install/files/style/layout/form.scss @@ -16,8 +16,8 @@ textarea { // input elements do not inherit font family, size and line-height from body font-family: $wcfFontFamily; - @extend .wcfFontDefault; - @extend .wcfLineHeight; + @include wcfFontDefault; + @include wcfLineHeight; &:focus, &:hover { @@ -71,7 +71,7 @@ textarea { border-width: 1px; width: 100%; - @extend .wcfFontDefault; + @include wcfFontDefault; &[disabled], &[readonly] { diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss index f37c4bcc7f..3aa9cb0de2 100644 --- a/wcfsetup/install/files/style/layout/global.scss +++ b/wcfsetup/install/files/style/layout/global.scss @@ -28,20 +28,6 @@ } /* boxes with an image */ -@mixin box($imageSize, $margin: 0) { - display: flex; - - > :first-child:not(:last-child) { - flex: 0 0 auto; - margin-right: $margin; - } - - > :last-child { - flex: 1; - overflow: hidden; - } -} - .box16 { @include box(16px, 5px); } .box24 { @include box(24px, 8px); } .box32 { @include box(32px, 10px); } @@ -51,45 +37,12 @@ .box128 { @include box(128px, 20px); } .box256 { @include box(256px, 30px); } -.wcfFontDefault { - font-size: $wcfFontSizeDefault; - font-weight: 400; -} - -.wcfFontSmall { - font-size: $wcfFontSizeSmall; - font-weight: 400; -} - -.wcfFontBold { - font-weight: 600; -} - -.wcfFontHeadline { - font-size: $wcfFontSizeHeadline; - font-weight: 400; -} - -.wcfFontSection { - font-size: $wcfFontSizeSection; - font-weight: 300; -} - -.wcfFontTitle { - font-size: $wcfFontSizeTitle; - font-weight: 300; -} - -.wcfLineHeight { - line-height: $wcfFontLineHeight; -} - small, .small { - @extend .wcfFontSmall; + @include wcfFontSmall; } strong { - @extend .wcfFontBold; + @include wcfFontBold; } img { @@ -127,17 +80,7 @@ img { } .nativeList { - margin: 1em 0 1em 40px; - - ul, - ol { - margin-bottom: 0; - margin-top: 0; - } - - li { - margin: 5px 0; - } + @include nativeList; } ul.nativeList { @@ -162,15 +105,15 @@ ol.nativeList { } h1 { - @extend .wcfFontTitle; + @include wcfFontTitle; } h2 { - @extend .wcfFontSection; + @include wcfFontSection; } h3 { - @extend .wcfFontHeadline; + @include wcfFontHeadline; } h1, h2, h3, h4, h5, h6 { @@ -178,7 +121,7 @@ ol.nativeList { } ul, ol { - @extend .nativeList; + @include nativeList; } ul { diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss index d927f4af08..fd89333afe 100644 --- a/wcfsetup/install/files/style/layout/layout.scss +++ b/wcfsetup/install/files/style/layout/layout.scss @@ -5,8 +5,8 @@ html, body { height: 100%; - @extend .wcfLineHeight; - @extend .wcfFontDefault; + @include wcfLineHeight; + @include wcfFontDefault; } body { diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss index cceb90ccb6..d13c5d9b6e 100644 --- a/wcfsetup/install/files/style/layout/pageHeader.scss +++ b/wcfsetup/install/files/style/layout/pageHeader.scss @@ -65,7 +65,7 @@ > li { flex: 0 0 auto; - @extend .wcfFontHeadline; + @include wcfFontHeadline; > a { background-color: $wcfHeaderMenuBackground; @@ -115,7 +115,7 @@ background-clip: padding-box; border-top: 3px solid transparent; - @extend .wcfFontDefault; + @include wcfFontDefault; > li { > a { diff --git a/wcfsetup/install/files/style/layout/sidebar.scss b/wcfsetup/install/files/style/layout/sidebar.scss index fbe5e708b9..994b3151ec 100644 --- a/wcfsetup/install/files/style/layout/sidebar.scss +++ b/wcfsetup/install/files/style/layout/sidebar.scss @@ -32,7 +32,7 @@ margin-bottom: 15px; padding: 0; - @extend .wcfFontHeadline; + @include wcfFontHeadline; > a { color: $wcfSidebarHeadlineLink; diff --git a/wcfsetup/install/files/style/ui/badge.scss b/wcfsetup/install/files/style/ui/badge.scss index f8e90595f7..3b250ccfb1 100644 --- a/wcfsetup/install/files/style/ui/badge.scss +++ b/wcfsetup/install/files/style/ui/badge.scss @@ -11,7 +11,7 @@ a.badge { white-space: nowrap; word-wrap: normal; - @extend .wcfFontSmall; + @include wcfFontSmall; /* colors */ &.badgeUpdate { diff --git a/wcfsetup/install/files/style/ui/breadcrumb.scss b/wcfsetup/install/files/style/ui/breadcrumb.scss index 98113439f4..3f82f8a632 100644 --- a/wcfsetup/install/files/style/ui/breadcrumb.scss +++ b/wcfsetup/install/files/style/ui/breadcrumb.scss @@ -7,7 +7,7 @@ > li { flex: 0 auto; - @extend .wcfFontSmall; + @include wcfFontSmall; &:not(:last-child) { margin-right: 10px; diff --git a/wcfsetup/install/files/style/ui/button.scss b/wcfsetup/install/files/style/ui/button.scss index 1efda01a04..2b2bf7b994 100644 --- a/wcfsetup/install/files/style/ui/button.scss +++ b/wcfsetup/install/files/style/ui/button.scss @@ -14,8 +14,8 @@ a.button { // a.button is required to override link formatting, such as drop-dow // input elements do not inherit font family, size and line-height from body font-family: $wcfFontFamily; - @extend .wcfFontDefault; - @extend .wcfLineHeight; + @include wcfFontDefault; + @include wcfLineHeight; .icon { color: $wcfButtonText; @@ -35,7 +35,7 @@ a.button { // a.button is required to override link formatting, such as drop-dow &.small { padding: 4px 7px; - @extend .wcfFontSmall; + @include wcfFontSmall; } } @@ -97,12 +97,12 @@ a.button.buttonPrimary { // a.button is required to override link formatting, su } .buttonList { - @extend .inlineList; + @include inlineList; &.smallButtons .button { padding: 4px 7px; - @extend .wcfFontSmall; + @include wcfFontSmall; } /* members list */ @@ -122,11 +122,11 @@ a.button.buttonPrimary { // a.button is required to override link formatting, su } .buttonGroupNavigation > ul { - @extend .inlineList; + @include inlineList; } .buttonGroup { - @extend .inlineList; + @include inlineList; > li { &:not(:last-child) { diff --git a/wcfsetup/install/files/style/ui/comment.scss b/wcfsetup/install/files/style/ui/comment.scss index d42a1bba53..c58e3df142 100644 --- a/wcfsetup/install/files/style/ui/comment.scss +++ b/wcfsetup/install/files/style/ui/comment.scss @@ -25,7 +25,7 @@ } .wcfLikeCounter { - @extend .wcfFontSmall; + @include wcfFontSmall; } } diff --git a/wcfsetup/install/files/style/ui/datePicker.scss b/wcfsetup/install/files/style/ui/datePicker.scss index 3400f01a6e..149f329478 100644 --- a/wcfsetup/install/files/style/ui/datePicker.scss +++ b/wcfsetup/install/files/style/ui/datePicker.scss @@ -116,7 +116,7 @@ > span { text-transform: uppercase; - @extend .wcfFontSmall; + @include wcfFontSmall; } } diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss index 03f23c95ea..b518c0acb9 100644 --- a/wcfsetup/install/files/style/ui/dialog.scss +++ b/wcfsetup/install/files/style/ui/dialog.scss @@ -84,7 +84,7 @@ > span { flex: 1 auto; - @extend .wcfFontHeadline; + @include wcfFontHeadline; } > .dialogCloseButton { @@ -160,7 +160,7 @@ margin-top: 30px; .sectionTitle { - @extend .wcfFontHeadline; + @include wcfFontHeadline; } } diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss index 9699e5bbd1..1ecc53e256 100644 --- a/wcfsetup/install/files/style/ui/dropdown.scss +++ b/wcfsetup/install/files/style/ui/dropdown.scss @@ -213,7 +213,7 @@ &.dropdownText { padding: $wcfGapTiny $wcfGapMedium; - @extend .wcfFontSmall; + @include wcfFontSmall; } &.boxFlag { @@ -285,7 +285,7 @@ margin-bottom: 0; > p { - @extend .wcfFontSmall; + @include wcfFontSmall; } } } diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss index 4b8b60ccb2..97bdcf199f 100644 --- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss +++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss @@ -87,7 +87,7 @@ .interactiveDropdownTitle { flex: 1 1 auto; - @extend .wcfFontHeadline; + @include wcfFontHeadline; } .interactiveDropdownLinks { @@ -154,7 +154,7 @@ padding: 20px 10px; text-align: center; - @extend .wcfFontHeadline; + @include wcfFontHeadline; } } diff --git a/wcfsetup/install/files/style/ui/label.scss b/wcfsetup/install/files/style/ui/label.scss index 9abd5ca74c..954223b84d 100644 --- a/wcfsetup/install/files/style/ui/label.scss +++ b/wcfsetup/install/files/style/ui/label.scss @@ -1,7 +1,7 @@ /* #### Labels #### */ /* label list */ .labelList { - @extend .inlineList; + @include inlineList; display: inline-flex; diff --git a/wcfsetup/install/files/style/ui/media.scss b/wcfsetup/install/files/style/ui/media.scss index 1d72e49e6c..9288cde03a 100644 --- a/wcfsetup/install/files/style/ui/media.scss +++ b/wcfsetup/install/files/style/ui/media.scss @@ -12,7 +12,7 @@ #mediaManagerMediaList { font-size: 0; - @extend .clearfix; + @include clearfix; > li { float: left; @@ -90,7 +90,7 @@ padding: $wcfGapSmall; box-sizing: border-box; - @extend .wcfFontSmall; + @include wcfFontSmall; } > .buttonGroupNavigation { diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss index 8f13112d3d..2f08061236 100644 --- a/wcfsetup/install/files/style/ui/message.scss +++ b/wcfsetup/install/files/style/ui/message.scss @@ -135,7 +135,7 @@ } .dataList { - @extend .wcfFontSmall; + @include wcfFontSmall; } .userAvatar { @@ -151,7 +151,7 @@ .username { display: inline-block; - @extend .wcfFontHeadline; + @include wcfFontHeadline; } .badgeOnline { @@ -265,7 +265,7 @@ } .messageTitle { - @extend .wcfFontHeadline; + @include wcfFontHeadline; color: $wcfContentHeadlineText; @@ -279,9 +279,9 @@ } .messageHeaderMetaData { - @extend .inlineList; - @extend .dotSeparated; - @extend .wcfFontSmall; + @include inlineList; + @include dotSeparated; + @include wcfFontSmall; .messagePublicationTime { color: $wcfContentDimmedText; @@ -293,8 +293,8 @@ } .messageStatus { - @extend .inlineList; - @extend .wcfFontSmall; + @include inlineList; + @include wcfFontSmall; .wcfLikeCounter { color: $wcfContentDimmedText; @@ -302,7 +302,7 @@ } .messageQuickOptions { - @extend .inlineList; + @include inlineList; } /* content - body */ @@ -340,7 +340,7 @@ margin-top: 20px; padding: 5px 10px; - @extend .wcfFontSmall; + @include wcfFontSmall; a { color: $wcfContentDimmedLink; @@ -369,7 +369,7 @@ cursor: pointer; flex: 0 0 auto; - @extend .wcfFontSmall; + @include wcfFontSmall; > .icon { color: $wcfContentDimmedText; diff --git a/wcfsetup/install/files/style/ui/messageGroup.scss b/wcfsetup/install/files/style/ui/messageGroup.scss index 9d98a0dddd..7edd92b61a 100644 --- a/wcfsetup/install/files/style/ui/messageGroup.scss +++ b/wcfsetup/install/files/style/ui/messageGroup.scss @@ -125,7 +125,7 @@ white-space: nowrap; > .messageGroupLink { - @extend .wcfFontHeadline; + @include wcfFontHeadline; } > .badge.label { @@ -179,8 +179,8 @@ } /*todo .messageGroupInfo { - @extend .inlineList; - @extend .wcfFontSmall; + @include inlineList; + @include wcfFontSmall; > li:not(:last-child) { margin-right: 5px; @@ -243,7 +243,7 @@ opacity: 0; transition: opacity .2s; - @extend .wcfFontSmall; + @include wcfFontSmall; &:not(:last-child) { margin-right: 5px; diff --git a/wcfsetup/install/files/style/ui/pageAction.scss b/wcfsetup/install/files/style/ui/pageAction.scss index 3330b0efd2..0d944cfcaa 100644 --- a/wcfsetup/install/files/style/ui/pageAction.scss +++ b/wcfsetup/install/files/style/ui/pageAction.scss @@ -20,7 +20,7 @@ right: 20px; z-index: 400; - @extend .inlineList; + @include inlineList; > li { animation: wcfPageActionOut .3s; diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss index 387365f860..d269e622a4 100644 --- a/wcfsetup/install/files/style/ui/redactor.scss +++ b/wcfsetup/install/files/style/ui/redactor.scss @@ -103,7 +103,7 @@ margin-bottom: 10px; padding-right: 20px; - @extend .wcfFontHeadline; + @include wcfFontHeadline; } &::after { @@ -218,7 +218,7 @@ text-align: center; text-decoration: none; - @extend .wcfFontSmall; + @include wcfFontSmall; &.redactor-button-disabled, &.redactor-button-disabled:before, diff --git a/wcfsetup/install/files/style/ui/tabMenu.scss b/wcfsetup/install/files/style/ui/tabMenu.scss index 1b077601a8..171c8fa671 100644 --- a/wcfsetup/install/files/style/ui/tabMenu.scss +++ b/wcfsetup/install/files/style/ui/tabMenu.scss @@ -6,7 +6,7 @@ > ul { border-bottom: 1px solid $wcfContentBorderInner; - @extend .inlineList; + @include inlineList; > li { &:not(:last-child) { @@ -21,7 +21,7 @@ display: block; padding: 5px 0; - @extend .wcfFontSection; + @include wcfFontSection; } } } @@ -51,7 +51,7 @@ position: relative; > ul { - @extend .inlineList; + @include inlineList; > li { &:not(:last-child) { diff --git a/wcfsetup/install/files/style/ui/tabMenuMessage.scss b/wcfsetup/install/files/style/ui/tabMenuMessage.scss index c327133438..043385388e 100644 --- a/wcfsetup/install/files/style/ui/tabMenuMessage.scss +++ b/wcfsetup/install/files/style/ui/tabMenuMessage.scss @@ -23,7 +23,7 @@ padding: 5px 20px; > ul { - @extend .inlineList; + @include inlineList; > li { outline: 0; @@ -40,8 +40,8 @@ display: block; outline: 0; - @extend .userSelectNone; - @extend .wcfFontSmall; + @include userSelectNone; + @include wcfFontSmall; } } } @@ -59,7 +59,7 @@ border: 1px solid $wcfContentBorderInner; border-top-width: 0; - @extend .inlineList; + @include inlineList; > li { border-right: 1px solid $wcfContentBorderInner; @@ -87,7 +87,7 @@ display: block; padding: 10px 20px; - @extend .userSelectNone; + @include userSelectNone; > span.icon { display: none; diff --git a/wcfsetup/install/files/style/ui/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss index ee3662e719..2b999916a2 100644 --- a/wcfsetup/install/files/style/ui/tabularBox.scss +++ b/wcfsetup/install/files/style/ui/tabularBox.scss @@ -44,7 +44,7 @@ .tabularListRowHead > .tabularListColumns > li { color: $wcfTabularBoxHeadline; - @extend .wcfFontHeadline; + @include wcfFontHeadline; > a { color: $wcfTabularBoxHeadline; @@ -89,7 +89,7 @@ > h1, > h2, > h3 { - @extend .wcfFontHeadline; + @include wcfFontHeadline; + small { display: block; @@ -142,7 +142,7 @@ text-align: left; white-space: nowrap; - @extend .wcfFontHeadline; + @include wcfFontHeadline; > a { color: $wcfTabularBoxHeadline; @@ -225,13 +225,13 @@ white-space: nowrap; word-wrap: normal; - @extend .wcfFontSmall; + @include wcfFontSmall; } &.columnURL, &.columnSmallText { text-align: left; - @extend .wcfFontSmall; + @include wcfFontSmall; } } diff --git a/wcfsetup/install/files/style/ui/tooltip.scss b/wcfsetup/install/files/style/ui/tooltip.scss index 55d638bb96..4c544c72be 100644 --- a/wcfsetup/install/files/style/ui/tooltip.scss +++ b/wcfsetup/install/files/style/ui/tooltip.scss @@ -10,7 +10,7 @@ visibility: hidden; z-index: 800; - @extend .wcfFontSmall; + @include wcfFontSmall; > .elementPointer { border-color: $wcfTooltipBackground transparent; @@ -29,4 +29,4 @@ transition-delay: 0s; } -} \ No newline at end of file +} -- 2.20.1