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:
    • Testing Instructions:
      Hide
      • Login as Admin
      • Navigate to Site Administration > Appearance > Themes > Theme Selector
      • Choose Classic as your default theme
      • Browse to any page that shows the Settings + Navigation block
      • Verify the down arrow / right arrow for each of the navigation items looks unchanged
      Show
      Login as Admin Navigate to Site Administration > Appearance > Themes > Theme Selector Choose Classic as your default theme Browse to any page that shows the Settings + Navigation block Verify the down arrow / right arrow for each of the navigation items looks unchanged
    • Affected Branches:
      MOODLE_33_STABLE, MOODLE_34_STABLE, MOODLE_35_STABLE, MOODLE_36_STABLE, MOODLE_37_STABLE
    • Fixed Branches:
      MOODLE_36_STABLE, MOODLE_37_STABLE
    • Pull from Repository:
    • Pull 3.7 Branch:
    • Pull Master Branch:
      MDL-61319-master

      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

              Assignee:
              basbrands Bas Brands
              Reporter:
              kosswa Kathrin Osswald
              Peer reviewer:
              Luca Bösch
              Integrator:
              Andrew Nicols
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Bas Brands
              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