Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-61319

Theme Boost: A rule in blocks.css messes up a Font Awesome rule

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.3.4, 3.4, 3.5, 3.6.4, 3.7.1
    • Fix Version/s: 3.6.5, 3.7.1
    • Component/s: Themes
    • Labels:

      Description

      Hi,

      I've encountered the following issue:

      In MDL-58808, there was a change to the blocks.css code and there the Font Awesome styles are extended:
      https://github.com/moodle/moodle/blob/master/theme/boost/scss/moodle/blocks.scss#L229
      https://github.com/moodle/moodle/blob/master/theme/boost/scss/moodle/blocks.scss#L238

      However if you use the class fa-pull-left / -right for a Font Awesome icon this leads to*not adding a margin* to the icon because the resulting CSS code is somehow corrupted:

      .fa.fa-pull-left, .block_settings .block_tree [aria-expanded="true"]:before.fa-pull-left,
      .block_navigation .block_tree [aria-expanded="true"]:before.fa-pull-left,
      .block_settings .block_tree [aria-expanded="false"]:before.fa-pull-left,
      .block_navigation .block_tree [aria-expanded="false"]:before.fa-pull-left {
          margin-right: .3em
      }
       
      .fa.fa-pull-right, .block_settings .block_tree [aria-expanded="true"]:before.fa-pull-right,
      .block_navigation .block_tree [aria-expanded="true"]:before.fa-pull-right,
      .block_settings .block_tree [aria-expanded="false"]:before.fa-pull-right,
      .block_navigation .block_tree [aria-expanded="false"]:before.fa-pull-right {
          margin-left: .3em
      }
      

      If I delete those

      @extend .fa

      rules in the blocks.css file the margin is added again and the CSS code looks correct again:

      .fa.fa-pull-left {
          margin-right: .3em
      }
       
      .fa.fa-pull-right {
          margin-left: .3em
      }
       
      .block_settings .block_tree [aria-expanded="true"], .block_settings .block_tree [aria-expanded="true"].emptybranch,
      .block_settings .block_tree [aria-expanded="false"], .block_navigation .block_tree [aria-expanded="true"],
      .block_navigation .block_tree [aria-expanded="true"].emptybranch,
      .block_navigation .block_tree [aria-expanded="false"] {
          background-image: none
      }
       
      .block_settings .block_tree [aria-expanded="true"]:before, .block_navigation .block_tree [aria-expanded="true"]:before {
          content: "";
          margin-right: 0;
          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;
          width: 16px
      }
       
      .dir-rtl .block_settings .block_tree [aria-expanded="false"]:before,
      .dir-rtl .block_navigation .block_tree [aria-expanded="false"]:before {
          content: ""
      }
       
      .block_navigation .block_tree p.hasicon, .block_settings .block_tree p.hasicon {
          text-indent: -3px
      }
       
      .block_navigation .block_tree p.hasicon .icon, .block_settings .block_tree p.hasicon .icon {
          margin-right: 2px
      }
      

      I really don't have a clue why the extend command messes something up in that case because usually it should only add the rules from .fa, but maybe there goes something wrong with other rules or the compiler messes something up?

      Best, Kathrin

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                8 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  8/Jul/19

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 3 hours, 20 minutes
                  3h 20m