cpd-external/c4c_claro_sub

There is no license information available for the latest version (dev-master) of this package.

dev-master 2026-05-05 22:39 UTC

Unknown License

• Andi

README

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"; }`
  - :warning: We would rather use drupal icon api
  - :warning: 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