field.pcss.css

Same filename in other branches
  1. 9 core/themes/olivero/css/components/field.pcss.css
  2. 11.x core/themes/olivero/css/components/field.pcss.css

Visual styles for fields.

File

core/themes/olivero/css/components/field.pcss.css

View source
  1. /**
  2. * @file
  3. * Visual styles for fields.
  4. */
  5. @import "../base/media-queries.pcss.css";
  6. .field:not(:last-child) {
  7. margin-block-end: var(--sp2);
  8. }
  9. .field__label {
  10. font-weight: bold;
  11. }
  12. .field--label-inline .field__label,
  13. .field--label-inline .field__items {
  14. float: left; /* LTR */
  15. /**
  16. * Chromium and Webkit do not yet support flow relative logical properties,
  17. * such as float: inline-end. However, PostCSS Logical does not compile this
  18. * value, so we accommodate by not using these.
  19. *
  20. * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
  21. * @see https://github.com/csstools/postcss-plugins/issues/632
  22. */
  23. &:dir(rtl) {
  24. float: right;
  25. }
  26. }
  27. .field--label-inline .field__label,
  28. .field--label-inline > .field__item,
  29. .field--label-inline .field__items {
  30. padding-inline-end: 0.5em;
  31. }
  32. .field--label-inline .field__label::after {
  33. content: ":";
  34. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.