fieldset.pcss.css

Same filename in this branch
  1. 9 core/themes/olivero/css/components/fieldset.pcss.css
Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/fieldset.pcss.css
  2. 10 core/themes/olivero/css/components/fieldset.pcss.css
  3. 10 core/themes/claro/css/components/fieldset.pcss.css
  4. 11.x core/themes/olivero/css/components/fieldset.pcss.css
  5. 11.x core/themes/claro/css/components/fieldset.pcss.css

Fieldset styles.

File

core/themes/claro/css/components/fieldset.pcss.css

View source
  1. /**
  2. * @file
  3. * Fieldset styles.
  4. */
  5. @import "../base/variables.pcss.css";
  6. .fieldset {
  7. min-width: 0;
  8. margin: var(--space-m) 0;
  9. padding: 0;
  10. color: var(--color-text);
  11. border: var(--details-border-size) solid var(--details-border-color);
  12. border-radius: var(--base-border-radius);
  13. background-color: var(--color-white);
  14. box-shadow: var(--details-box-shadow);
  15. }
  16. .fieldset--group {
  17. color: inherit;
  18. border: 0;
  19. border-radius: 0;
  20. background: none;
  21. box-shadow: none;
  22. }
  23. /* IE workaround. */
  24. /* stylelint-disable-next-line selector-type-no-unknown */
  25. _:-ms-fullscreen,
  26. .fieldset {
  27. display: table;
  28. box-sizing: border-box;
  29. width: 100%;
  30. }
  31. /**
  32. * Fieldset legend.
  33. */
  34. .fieldset__legend {
  35. display: contents; /* For Firefox. */
  36. float: left; /* iOS Safari, Android Chrome, Edge. */
  37. width: 100%; /* iOS Safari, Android Chrome, Edge. */
  38. margin-bottom: var(--space-m);
  39. color: var(--color-gray-800);
  40. font-weight: bold;
  41. }
  42. @media screen and (min-width: 48em) {
  43. .fieldset__legend {
  44. margin-bottom: var(--space-l);
  45. }
  46. }
  47. .fieldset__legend--composite {
  48. float: none;
  49. width: auto;
  50. margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
  51. margin-bottom: calc(var(--space-xs) / 2); /* 4px */
  52. color: inherit;
  53. font-size: var(--font-size-s); /* 14px */
  54. line-height: calc(18rem / 16); /* 18px */
  55. }
  56. /* This is used only on install configure form. */
  57. .fieldset__legend--group {
  58. text-transform: uppercase;
  59. color: inherit;
  60. }
  61. .fieldset__label {
  62. display: block;
  63. padding: var(--space-m);
  64. line-height: var(--space-m);
  65. }
  66. @media screen and (min-width: 48em) {
  67. .fieldset__label {
  68. padding-right: var(--space-l);
  69. padding-left: var(--space-l);
  70. }
  71. }
  72. .fieldset__label--group {
  73. padding: 0;
  74. line-height: inherit;
  75. }
  76. .fieldset__label.is-disabled {
  77. color: var(--input--disabled-fg-color);
  78. }
  79. .fieldset__label.has-error {
  80. color: var(--input--error-color);
  81. }
  82. .fieldset__description {
  83. margin-top: calc(6rem / 16); /* 6px */
  84. margin-bottom: calc(6rem / 16); /* 6px */
  85. color: var(--input-fg-color--description);
  86. font-size: var(--font-size-xs); /* ~13px */
  87. line-height: calc(17rem / 16); /* 17px */
  88. }
  89. .fieldset__description.is-disabled {
  90. color: var(--input--disabled-fg-color);
  91. }
  92. /* Error message (Inline form errors). */
  93. .fieldset__error-message {
  94. margin-top: calc(6rem / 16); /* 6px */
  95. margin-bottom: calc(6rem / 16); /* 6px */
  96. color: var(--input--error-color);
  97. font-size: var(--font-size-xs); /* ~13px */
  98. font-weight: normal;
  99. line-height: calc(17rem / 16); /* 17px */
  100. }
  101. .fieldset__wrapper {
  102. margin: var(--space-m);
  103. }
  104. @media screen and (min-width: 48em) {
  105. .fieldset__wrapper {
  106. margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
  107. }
  108. }
  109. .fieldset__legend--visible ~ .fieldset__wrapper {
  110. margin-top: 0;
  111. }
  112. .fieldset__wrapper--group {
  113. margin: 0;
  114. }
  115. /**
  116. * Remove the unnecessary extra padding of container-inline wrapper if it's used
  117. * inside a fieldset.
  118. */
  119. .fieldset__wrapper > .container-inline {
  120. padding: 0;
  121. }

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