C4C Claro Sub

Purpose

• "Frontend"-Theme to be used for all Vendor/Customer interaction

CSSvars

• In custom (to-be-upstreamed) modules use css vars with fallback and module name prefix, e.g. var(--crumbs--xyz, red)
• Define module and theme vars in c4c_claro_sub/css/base/variables.css

Breakpoints

• We can't use @media with css vars
• Suggestions (like in olivero)

/* Breakpoints */
--sm (min-width: 31.25rem); /* 500px */
--md (min-width: 43.75rem); /* 700px */
--lg (min-width: 62.5rem); /* 1000px */
--xl (min-width: 81.25rem); /* 1300px */

/* Navigation related breakpoints */
--nav-md (min-width: 31.25rem); /* 500px */
--nav (min-width: 75rem); /* 1200px */
--max-nav (max-width: 1200px) ;

Technical Debt

Subtheme of claro

• There should not be any significant changes to claro upstream, so we should be fine.

Classes added via icons library with addHeadingClass.js / addStatusClass.js

Currently

We add classes derived from the field value

• Product
  • Value of .field--name-field-c4c-workflow-state
    • Needed in card and full view mode
• Negotiation
  • Value of .field--name-state and .field--name-actionable
    • Needed in card and full view mode To then add icons via css :before { content: "edit_note"; }
  • ⚠️ We would rather use drupal icon api
  • ⚠️ This technique is not mentioned on material icons website, NOT all icons are available

What we need to replace addStatusClass.js

• Product:
  • Add icon based on workflow status value
  • Add workflow status value class to body in case we want to use colored borders (variations!)
• Negotiation:
  • Add icon based on actionable value
  • Add actionable class to body
  • (Add icon based on workflow status value - not sure if needed)

What we need to replace addHeadingClass.js

• Add icon to crumb, with option to show next to heading as well
  • Important because the current page is not shown in crumbs OR only in dropdown
• Product
  • Add product type class to body on /product/x
  • Add body classes to Einsendungen, Depots, Contact, ...
  • => Maybe add classes based on crumb hierachy