123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- /**
- * @file
- * Fieldset styles.
- */
- @import "../base/variables.pcss.css";
- .fieldset {
- min-width: 0;
- margin: var(--space-m) 0;
- padding: 0;
- color: var(--color-text);
- border: var(--details-border-size) solid var(--details-border-color);
- border-radius: var(--base-border-radius);
- background-color: var(--color-white);
- box-shadow: var(--details-box-shadow);
- }
- .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: var(--space-m);
- color: var(--color-davysgrey);
- font-weight: bold;
- }
- @media screen and (min-width: 48em) {
- .fieldset__legend {
- margin-bottom: var(--space-l);
- }
- }
- .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: calc(var(--space-xs) / 2); /* 4px */
- color: inherit;
- font-size: var(--font-size-s); /* 14px */
- line-height: calc(18rem / 16); /* 18px */
- }
- /* This is used only on install configure form. */
- .fieldset__legend--group {
- text-transform: uppercase;
- color: inherit;
- }
- .fieldset__label {
- display: block;
- padding: var(--space-m);
- line-height: var(--space-m);
- }
- @media screen and (min-width: 48em) {
- .fieldset__label {
- padding-right: var(--space-l);
- padding-left: var(--space-l);
- }
- }
- .fieldset__label--group {
- padding: 0;
- line-height: inherit;
- }
- .fieldset__label.is-disabled {
- color: var(--input--disabled-fg-color);
- }
- .fieldset__label.has-error {
- color: var(--input--error-color);
- }
- .fieldset__description {
- margin-top: calc(6rem / 16); /* 6px */
- margin-bottom: calc(6rem / 16); /* 6px */
- color: var(--input-fg-color--description);
- font-size: var(--font-size-xs); /* ~13px */
- line-height: calc(17rem / 16); /* 17px */
- }
- .fieldset__description.is-disabled {
- color: var(--input--disabled-fg-color);
- }
- /* Error message (Inline form errors). */
- .fieldset__error-message {
- margin-top: calc(6rem / 16); /* 6px */
- margin-bottom: calc(6rem / 16); /* 6px */
- color: var(--input--error-color);
- font-size: var(--font-size-xs); /* ~13px */
- font-weight: normal;
- line-height: calc(17rem / 16); /* 17px */
- }
- .fieldset__wrapper {
- margin: var(--space-m);
- }
- @media screen and (min-width: 48em) {
- .fieldset__wrapper {
- margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
- }
- }
- .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;
- }
|