Refactor Claro's views-exposed-form stylesheet

Created on 11 January 2023, almost 2 years ago
Updated 21 April 2023, over 1 year ago

Problem/Motivation

This is a child of ๐ŸŒฑ [META] Update Claro CSS with new coding standards Active and part of ๐ŸŒฑ [PLAN] Drupal CSS Modernization Initiative Active .

Steps to reproduce

The stylesheet at https://git.drupalcode.org/project/drupal/-/blob/10.0.x/core/themes/clar... needs to be refactored to make use of modern CSS and Drupal core's PostCSS tooling.

@todo: Add clear testing instructions to test this manually on the UI.

Proposed resolution

  • Use CSS Logical Properties where appropriate.
  • Use CSS nesting where appropriate.
  • Use existing variables (variables.pcss.css) where appropriate. Follow the proposed Drupal CSS coding standards to name the variables.
    • Add a comment when there's a value where there is not a variable like font-size: 1.23rem; /* @todo One off value. */
    • When possible, set variables at the root of the component and then map them to global theme variables:
      .entity-meta {
                --entity-meta-title-font-size: var(--font-size-h5);
      
                ... more style
              }
      
              .entity-meta__title {
                font-size: var(--entity-meta-title-font-size);
              }

Out of scope

  • Changing CSS classes
  • Drupal 9 patches

User interface changes

None. There should be no visual differences.
Please post before/after screenshots and make sure they look the same.

๐Ÿ“Œ Task
Status

Fixed

Version

10.1 โœจ

Component
Claro  โ†’

Last updated 1 day ago

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States Stockfoot

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024