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.

diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
index a6c655a05e1f1b58c8ffea981091859904acb27f..8cacafc4f2cc5b670119799960371781c1d79021 100644 (file)
--- 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 2a09d138298270a19c260307cc6d37e915dbe4aa..1aa6abae7269e7da3e62d81d9c7aa4ec2b0cb09f 100644 (file)
--- 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 862713a839d3f45bff531db924fe2633cb73880f..8b25a43702d975d1f61d86bc6caa6fe87d00978e 100644 (file)
--- 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 (file)
index 0000000..6f00c42
--- /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 (file)
index 0000000..f4741c8
--- /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 (file)
index 0000000..8b18d68
--- /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 38b394c90094d9e4712f1a2ce6664251cca02fa0..81608213026b06679f9d404e2f5b10cf5ca46657 100644 (file)
--- 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 7ac649c5518676e4bcb7a27ae58c2a3efb9099ea..4d6a04fb41dffff4f85284507ddea54b53b839bc 100644 (file)
--- 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 ead85ebe0af7922d5476b1a0f7f2336ad2d8ffae..7361b4905a32bdf0c344752114aff7f86dce3231 100644 (file)
--- 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 9ee411161f047419d7339b662fff6145d1896f0f..0493d56e4ef6653603afaa74083070e9574bd523 100644 (file)
--- 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 e9887e82a065acdd333f056f31bd481473d44400..b77a534e818033020504f4bdb837b901f2b390b3 100644 (file)
--- 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 f37c4bcc7fc39051957cac891273bdca8d97562d..3aa9cb0de23ad7a3ff2c19167a715d56359ea8d5 100644 (file)
--- 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 d927f4af08853d7d17df87f6bfb226aeb0d8ae05..fd89333afe9563add6255fe90fc702ba1602a91d 100644 (file)
--- 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 cceb90ccb6508b790cf99ba1ec7a6f37f64be248..d13c5d9b6e0af9cada9e48295948f43aec9deb91 100644 (file)
--- 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 fbe5e708b9ccadc40551e8c39d45b079e8008643..994b3151ec014e2c50332d6560c502c7e1abb3c6 100644 (file)
--- 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 f8e90595f79f338265c2822d2bf8ee5b51087bd0..3b250ccfb162643b9af459eb6bfd3918a29637b3 100644 (file)
--- 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 98113439f4c4844a8221fed210f832023709db16..3f82f8a632d3cf544aff8253894bd72b6ae9c499 100644 (file)
--- 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 1efda01a04d5bae2a0efb02b2ac7bffca8733c4f..2b2bf7b994e654d929781832aab491966c6925ae 100644 (file)
--- 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 d42a1bba536bd35d242041da7822afc079125952..c58e3df1421a14108ab92ce250db61a681b953a7 100644 (file)
--- 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 3400f01a6e66e73a8ee25fedc94c7b64cff266d1..149f329478951184fded6d9f03eebeae3132977f 100644 (file)
--- 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 03f23c95ea89d1d12ac0dc03867c42a62a519290..b518c0acb9e3c7e37a1100ac38591b702e8948f0 100644 (file)
--- 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 9699e5bbd156cb84edfabe7c8923ac7f23da4534..1ecc53e256eb6b19d2fc6575205fc93bc8ac1d82 100644 (file)
--- 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 4b8b60ccb2332923307bf31caf40e68642d9cc2c..97bdcf199f7b5203025d906bfd1503791d24832e 100644 (file)
--- 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 9abd5ca74ca13b23a8f1a370016696e9c6f9337f..954223b84d5a7bb97bf2a61c786a4328430b4134 100644 (file)
--- 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 1d72e49e6c53a2f1d014c625eb5f273d91d8b468..9288cde03a6e752e94bfaab630268bb1e5e9f1b4 100644 (file)
--- 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 8f13112d3df70c46acf02f9b6f455f64e67bb219..2f0806123658ea82bf00780165f29bd3a950e762 100644 (file)
--- 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 9d98a0dddd1ed193667e94852f4dc773830c56e5..7edd92b61a36d2731191f0a6858b5bb495e124ad 100644 (file)
--- 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 3330b0efd2f9ea7f62369c902294eec31add7b62..0d944cfcaa4a655a58b3815116e34b08e9a6c271 100644 (file)
--- 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 387365f86026ea0eef29a7a6f7eee7fd542a76f3..d269e622a464a538cda1c335479e8ec61156617c 100644 (file)
--- 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 1b077601a81f778a7badd1d6e35c2600ce886fd9..171c8fa67129f3940368aa35c2b46cb632412b54 100644 (file)
--- 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 c3271334387423af7c295074450c9a4268bbbf65..043385388ed962f9dc5986178b9896ac79b3ee2e 100644 (file)
--- 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 ee3662e7193f84292cd03974567eb6c8366bdf91..2b999916a2e0c577b310f7b6a1d0fff9d86d794d 100644 (file)
--- 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 55d638bb9693b879daacb2fa7cfcbe1fdfe8ae00..4c544c72be7cc527b0b5fd0092168dbe25206e0f 100644 (file)
--- 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
+}