From 4af9077f26f637bfe254a3f69dbff4be8b967b1b Mon Sep 17 00:00:00 2001 From: Bas Brands Date: Tue, 21 May 2019 17:07:31 +0200 Subject: [PATCH] MDL-61319 themes: prevent using @extend rules for complex classes * the settings and navigation blocks scss extended .fa which caused issues with native fontawesome classes like fa-pull-left. --- theme/boost/scss/moodle/blocks.scss | 6 ++--- theme/boost/style/moodle.css | 34 +++++++++++++++-------------- theme/classic/style/moodle.css | 34 +++++++++++++++-------------- 3 files changed, 39 insertions(+), 35 deletions(-) diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss index 178e38e3b90..95e22b3a739 100644 --- a/theme/boost/scss/moodle/blocks.scss +++ b/theme/boost/scss/moodle/blocks.scss @@ -300,17 +300,17 @@ body.drawer-open-left #region-main.has-blocks { .block_navigation .block_tree [aria-expanded="true"]:before { content: $fa-var-angle-down; margin-right: 0; + @include fa-icon(); font-size: 16px; - @extend .fa; width: 16px; } .block_settings .block_tree [aria-expanded="false"]:before, .block_navigation .block_tree [aria-expanded="false"]:before { content: $fa-var-angle-right; - font-size: 16px; margin-right: 0; - @extend .fa; + @include fa-icon(); + font-size: 16px; width: 16px; } .dir-rtl { diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 3cc2e83466e..fb8a74ab81c 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -10,9 +10,7 @@ * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ -.fa, .block_settings .block_tree [aria-expanded="true"]:before, -.block_navigation .block_tree [aria-expanded="true"]:before, .block_settings .block_tree [aria-expanded="false"]:before, -.block_navigation .block_tree [aria-expanded="false"]:before { +.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; @@ -69,14 +67,10 @@ .fa-pull-right { float: right; } -.fa.fa-pull-left, .block_settings .block_tree .fa-pull-left[aria-expanded="true"]:before, -.block_navigation .block_tree .fa-pull-left[aria-expanded="true"]:before, .block_settings .block_tree .fa-pull-left[aria-expanded="false"]:before, -.block_navigation .block_tree .fa-pull-left[aria-expanded="false"]:before { +.fa.fa-pull-left { margin-right: .3em; } -.fa.fa-pull-right, .block_settings .block_tree .fa-pull-right[aria-expanded="true"]:before, -.block_navigation .block_tree .fa-pull-right[aria-expanded="true"]:before, .block_settings .block_tree .fa-pull-right[aria-expanded="false"]:before, -.block_navigation .block_tree .fa-pull-right[aria-expanded="false"]:before { +.fa.fa-pull-right { margin-left: .3em; } /* Deprecated as of 4.4.0 */ @@ -86,14 +80,10 @@ .pull-left { float: left; } -.fa.pull-left, .block_settings .block_tree .pull-left[aria-expanded="true"]:before, -.block_navigation .block_tree .pull-left[aria-expanded="true"]:before, .block_settings .block_tree .pull-left[aria-expanded="false"]:before, -.block_navigation .block_tree .pull-left[aria-expanded="false"]:before { +.fa.pull-left { margin-right: .3em; } -.fa.pull-right, .block_settings .block_tree .pull-right[aria-expanded="true"]:before, -.block_navigation .block_tree .pull-right[aria-expanded="true"]:before, .block_settings .block_tree .pull-right[aria-expanded="false"]:before, -.block_navigation .block_tree .pull-right[aria-expanded="false"]:before { +.fa.pull-right { margin-left: .3em; } .fa-spin { @@ -11396,14 +11386,26 @@ div.editor_atto_toolbar button .icon { .block_navigation .block_tree [aria-expanded="true"]:before { content: ""; margin-right: 0; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; font-size: 16px; width: 16px; } .block_settings .block_tree [aria-expanded="false"]:before, .block_navigation .block_tree [aria-expanded="false"]:before { content: ""; - font-size: 16px; margin-right: 0; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 16px; width: 16px; } .dir-rtl .block_settings .block_tree [aria-expanded="false"]:before, diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 8fc9102ad82..30f94f4c0ed 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -10,9 +10,7 @@ * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ -.fa, .block_settings .block_tree [aria-expanded="true"]:before, -.block_navigation .block_tree [aria-expanded="true"]:before, .block_settings .block_tree [aria-expanded="false"]:before, -.block_navigation .block_tree [aria-expanded="false"]:before { +.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; @@ -69,14 +67,10 @@ .fa-pull-right { float: right; } -.fa.fa-pull-left, .block_settings .block_tree .fa-pull-left[aria-expanded="true"]:before, -.block_navigation .block_tree .fa-pull-left[aria-expanded="true"]:before, .block_settings .block_tree .fa-pull-left[aria-expanded="false"]:before, -.block_navigation .block_tree .fa-pull-left[aria-expanded="false"]:before { +.fa.fa-pull-left { margin-right: .3em; } -.fa.fa-pull-right, .block_settings .block_tree .fa-pull-right[aria-expanded="true"]:before, -.block_navigation .block_tree .fa-pull-right[aria-expanded="true"]:before, .block_settings .block_tree .fa-pull-right[aria-expanded="false"]:before, -.block_navigation .block_tree .fa-pull-right[aria-expanded="false"]:before { +.fa.fa-pull-right { margin-left: .3em; } /* Deprecated as of 4.4.0 */ @@ -86,14 +80,10 @@ .pull-left { float: left; } -.fa.pull-left, .block_settings .block_tree .pull-left[aria-expanded="true"]:before, -.block_navigation .block_tree .pull-left[aria-expanded="true"]:before, .block_settings .block_tree .pull-left[aria-expanded="false"]:before, -.block_navigation .block_tree .pull-left[aria-expanded="false"]:before { +.fa.pull-left { margin-right: .3em; } -.fa.pull-right, .block_settings .block_tree .pull-right[aria-expanded="true"]:before, -.block_navigation .block_tree .pull-right[aria-expanded="true"]:before, .block_settings .block_tree .pull-right[aria-expanded="false"]:before, -.block_navigation .block_tree .pull-right[aria-expanded="false"]:before { +.fa.pull-right { margin-left: .3em; } .fa-spin { @@ -11638,14 +11628,26 @@ div.editor_atto_toolbar button .icon { .block_navigation .block_tree [aria-expanded="true"]:before { content: ""; margin-right: 0; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; font-size: 16px; width: 16px; } .block_settings .block_tree [aria-expanded="false"]:before, .block_navigation .block_tree [aria-expanded="false"]:before { content: ""; - font-size: 16px; margin-right: 0; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 16px; width: 16px; } .dir-rtl .block_settings .block_tree [aria-expanded="false"]:before,