Uploaded image for project: 'Moodle app'
  1. Moodle app
  2. MOBILE-4127

Derivated CSS variables cannot be overriden properly by Remote Themes

    XMLWordPrintable

Details

    • Bug
    • Status: Tested
    • Minor
    • Resolution: Unresolved
    • 4.0.0
    • None
    • Remote CSS
    • Hide

      After this update, the following Remote CSS should customize the app toolbar properly (including derivated variables such as buttons background).

      html {
          --core-header-toolbar-background: red;
      }
      

      Before marking this issue as tested, we should also make sure that the documentation and upgrade guides have been updated.

      Show
      After this update, the following Remote CSS should customize the app toolbar properly (including derivated variables such as buttons background). html { --core-header-toolbar- background : red ; } Before marking this issue as tested, we should also make sure that the documentation and upgrade guides have been updated.
    • MOODLE_400_STABLE
    • Moodle App 4.1.0

    Description

      There are some CSS variables, like --core-header-buttons-background, which definition is derivated from other variables (in this case, --core-header-toolbar-background).

      Given that variables are defined under the :root selector, this means that to properly customize variables, the same scope needs to be used or the relationship not be respected properly for children elements. In our case, this is a problem because we're recommending customizing variables using the body tag.

      However, updating the documentation does not completely solve the problem, because there are some situations that require using classes in the body tag (for example, targeting specific app versions).

      Keeping that in mind, we'll probably need to:

      • Update the documentation to reflect proper usage of selectors.
      • Move contextual classes to the html tag, or declare variables in the body tag.
      • If classes are moved to the html tag, we should set up a deprecation policy for body classes (document in the migration guides, etc.).

      Attachments

        Issue Links

          Activity

            People

              noeldemartin Noel De Martin
              noeldemartin Noel De Martin
              Pau Ferrer Pau Ferrer
              Pau Ferrer Pau Ferrer
              Dani Palou Dani Palou
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated: