fieldset.css

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

Fieldset styles.

File

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

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