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

in sass @extend .btn generates a lot of CSS

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_32_STABLE

      Description

      There's a few of uses of "@extend .btn" to override the styles and make something look like a standard Bootstrap button.

      Particularly in this file:

      scss/moodle/grade.scss
      67:            @extend .btn;
      187:                        @extend .btn;
      198:            @extend .btn;

       

      This is fine except the .btn class gets used a lot in Bootstrap, for btns and big buttons and small buttons and buttons inside button groups and so on. And every time it's used, three extra lines of CSS get inserted for the three uses in the grading area, even though they'll probably never be used in those contexts.

      A better solution, which would remove possibly hundreds of lines of CSS, would be to amend the renderer for the grades to output the appropriate ".btn" class in the HTML, so that the standard Bootstrap CSS can style it and delete these extendsions from the Boost theme.

      Other uses of @extend might be worth looking at too, if the target selector is used repeatedly.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                bawjaws David Scotson
                Participants:
                Component watchers:
                Jake Dallimore, Jun Pataleta, Amy Groshek, David Scotson, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón, Bas Brands
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated: