fieldset.css
Same filename in other branches
Fieldset styles.
File
-
core/
themes/ claro/ css/ components/ fieldset.css
View source
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/2815083
- * @preserve
- */
-
- /**
- * @file
- * Fieldset styles.
- */
-
- .fieldset {
- min-width: 0;
- margin: 1rem 0;
- padding: 0;
- color: #222330;
- border: 1px solid rgba(216, 217, 224, 0.8);
- border-radius: 2px;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- }
-
- .fieldset--group {
- color: inherit;
- border: 0;
- border-radius: 0;
- background: none;
- box-shadow: none;
- }
-
- /* IE workaround. */
-
- /* stylelint-disable-next-line selector-type-no-unknown */
-
- _:-ms-fullscreen,
- .fieldset {
- display: table;
- box-sizing: border-box;
- width: 100%;
- }
-
- /**
- * Fieldset legend.
- */
-
- .fieldset__legend {
- display: contents; /* For Firefox. */
- float: left; /* iOS Safari, Android Chrome, Edge. */
- width: 100%; /* iOS Safari, Android Chrome, Edge. */
- margin-bottom: 1rem;
- color: #545560;
- font-weight: bold;
- }
-
- @media screen and (min-width: 48em) {
- .fieldset__legend {
- margin-bottom: 1.5rem;
- }
- }
-
- .fieldset__legend--composite {
- float: none;
- width: auto;
- margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
- margin-bottom: 0.25rem; /* 4px */
- color: inherit;
- font-size: 0.889rem; /* 14px */
- line-height: 1.125rem; /* 18px */
- }
-
- /* This is used only on install configure form. */
-
- .fieldset__legend--group {
- text-transform: uppercase;
- color: inherit;
- }
-
- .fieldset__label {
- display: block;
- padding: 1rem;
- line-height: 1rem;
- }
-
- @media screen and (min-width: 48em) {
- .fieldset__label {
- padding-right: 1.5rem;
- padding-left: 1.5rem;
- }
- }
-
- .fieldset__label--group {
- padding: 0;
- line-height: inherit;
- }
-
- .fieldset__label.is-disabled {
- color: #82828c;
- }
-
- .fieldset__label.has-error {
- color: #d72222;
- }
-
- .fieldset__description {
- margin-top: 0.375rem; /* 6px */
- margin-bottom: 0.375rem; /* 6px */
- color: #545560;
- font-size: 0.79rem; /* ~13px */
- line-height: 1.0625rem; /* 17px */
- }
-
- .fieldset__description.is-disabled {
- color: #82828c;
- }
-
- /* Error message (Inline form errors). */
-
- .fieldset__error-message {
- margin-top: 0.375rem; /* 6px */
- margin-bottom: 0.375rem; /* 6px */
- color: #d72222;
- font-size: 0.79rem; /* ~13px */
- font-weight: normal;
- line-height: 1.0625rem; /* 17px */
- }
-
- .fieldset__wrapper {
- margin: 1rem;
- }
-
- @media screen and (min-width: 48em) {
- .fieldset__wrapper {
- margin: 1.5rem 1.5rem 1.75rem;
- }
- }
-
- .fieldset__legend--visible ~ .fieldset__wrapper {
- margin-top: 0;
- }
-
- .fieldset__wrapper--group {
- margin: 0;
- }
-
- /**
- * Remove the unnecessary extra padding of container-inline wrapper if it's used
- * inside a fieldset.
- */
-
- .fieldset__wrapper > .container-inline {
- padding: 0;
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.