You are here

Home » API reference » Drupal 10

field.css in Drupal 10

Same filename in this branch
  1. 10 core/themes/starterkit_theme/css/components/field.css
  2. 10 core/themes/classy/css/components/field.css
  3. 10 core/themes/olivero/css/components/field.css
  4. 10 core/themes/bartik/css/components/field.css
  5. 10 core/themes/claro/css/classy/components/field.css
  6. 10 core/themes/seven/css/classy/components/field.css
  7. 10 core/themes/bartik/css/classy/components/field.css
  8. 10 core/profiles/demo_umami/themes/umami/css/classy/components/field.css
  9. 10 core/profiles/demo_umami/themes/umami/css/components/fields/field.css
Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/field.css

Visual styles for fields.

File

core/themes/olivero/css/components/field.css
View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Visual styles for fields.

  11.  */

  12. 

  13. /*

  14.  * Media query breakpoints.

  15.  * Processed by postcss/postcss-custom-media.

  16.  */

  17. 

  18. /* Navigation related breakpoints */

  19. 

  20. /* Grid related breakpoints */

  21. 

  22. /* Grid shifts from 6 to 14 columns. */

  23. 

  24. /* Width of the entire grid maxes out. */

  25. 

  26. .field:not(:last-child) {

  27.   margin-bottom: var(--sp2);

  28. }

  29. 

  30. .node--view-mode-teaser .field {

  31.   margin-bottom: var(--sp)

  32. }

  33. 

  34. .node--view-mode-teaser .field:last-child {

  35.     margin-bottom: 0;

  36.   }

  37. 

  38. @media (min-width: 62.5rem) {

  39. 

  40. .node--view-mode-teaser .field {

  41.     margin-bottom: var(--sp2)

  42. }

  43.   }

  44. 

  45. .field__label {

  46.   font-weight: bold;

  47. }

  48. 

  49. [dir="ltr"] .field--label-inline .field__label,[dir="ltr"] 

  50. .field--label-inline .field__items {

  51.   float: left;

  52. }

  53. 

  54. [dir="rtl"] .field--label-inline .field__label,[dir="rtl"] 

  55. .field--label-inline .field__items {

  56.   float: right;

  57. }

  58. 

  59. [dir="ltr"] .field--label-inline .field__label,[dir="ltr"] 

  60. .field--label-inline > .field__item,[dir="ltr"] 

  61. .field--label-inline .field__items {

  62.   padding-right: 0.5em;

  63. }

  64. 

  65. [dir="rtl"] .field--label-inline .field__label,[dir="rtl"] 

  66. .field--label-inline > .field__item,[dir="rtl"] 

  67. .field--label-inline .field__items {

  68.   padding-left: 0.5em;

  69. }

  70. 

  71. .field--label-inline .field__label::after {

  72.   content: ":";

  73. }