diff --git a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php index 576182ac5c..7a99eb1c69 100644 --- a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php +++ b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php @@ -260,14 +260,12 @@ public function providerTestClassyCopies() { 'filenames' => [ 'css' => [ 'book-navigation.css', - 'container-inline.css', 'exposed-filters.css', 'field.css', 'file.css', 'forum.css', 'icons.css', 'indented.css', - 'inline-form.css', 'item-list.css', 'link.css', 'links.css', diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml index 99397ee0fc..54a4cfabd4 100644 --- a/core/themes/claro/claro.info.yml +++ b/core/themes/claro/claro.info.yml @@ -28,6 +28,7 @@ libraries-override: component: css/components/ajax-progress.module.css: css/components/ajax-progress.module.css css/components/autocomplete-loading.module.css: css/components/autocomplete-loading.module.css + css/components/container-inline.module.css: false css/components/system-status-counter.css: css/components/system-status-counter.css css/components/system-status-report-counters.css: css/components/system-status-report-counters.css css/components/system-status-report-general-info.css: css/components/system-status-report-general-info.css diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml index d4fbca8419..6afdb8c082 100644 --- a/core/themes/claro/claro.libraries.yml +++ b/core/themes/claro/claro.libraries.yml @@ -6,11 +6,9 @@ global-styling: css/base/typography.css: {} css/base/print.css: {} component: - css/classy/components/container-inline.css: {} css/classy/components/exposed-filters.css: {} css/classy/components/field.css: {} css/classy/components/icons.css: {} - css/classy/components/inline-form.css: {} css/classy/components/item-list.css: {} css/classy/components/link.css: {} css/classy/components/links.css: {} @@ -23,7 +21,6 @@ global-styling: css/components/action-link.css: {} css/components/content-header.css: {} css/components/container-inline.css: {} - css/components/container-inline.module.css: {} css/components/breadcrumb.css: {} css/components/button.css: {} css/components/details.css: {} @@ -40,6 +37,7 @@ global-styling: css/components/form--select.css: {} css/components/help.css: {} css/components/image-preview.css: {} + css/components/inline-form.css: {} css/components/menus-and-lists.css: {} css/components/modules-page.css: {} css/components/node.css: {} @@ -48,7 +46,6 @@ global-styling: css/components/skip-link.css: {} css/components/tables.css: {} css/components/table--file-multiple-widget.css: {} - css/components/search-admin-settings.css: {} css/components/tablesort-indicator.css: {} css/components/system-status-report-general-info.css: {} css/components/system-status-report.css: {} diff --git a/core/themes/claro/css/classy/components/container-inline.css b/core/themes/claro/css/classy/components/container-inline.css deleted file mode 100644 index 64b78f683b..0000000000 --- a/core/themes/claro/css/classy/components/container-inline.css +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @file - * Inline items. - */ - -.container-inline label:after, -.container-inline .label:after { - content: ":"; -} -.form-type-radios .container-inline label:after, -.form-type-checkboxes .container-inline label:after { - content: ""; -} -.form-type-radios .container-inline .form-type-radio, -.form-type-checkboxes .container-inline .form-type-checkbox { - margin: 0 1em; -} -.container-inline .form-actions, -.container-inline.form-actions { - margin-top: 0; - margin-bottom: 0; -} diff --git a/core/themes/claro/css/classy/components/inline-form.css b/core/themes/claro/css/classy/components/inline-form.css deleted file mode 100644 index b5201a78c9..0000000000 --- a/core/themes/claro/css/classy/components/inline-form.css +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @file - * Visual styles for inline forms. - */ - -.form--inline .form-item { - float: left; /* LTR */ - margin-right: 0.5em; /* LTR */ -} -[dir="rtl"] .form--inline .form-item { - float: right; - margin-right: 0; - margin-left: 0.5em; -} -/* This is required to win over specificity of [dir="rtl"] .form--inline .form-item */ -[dir="rtl"] .views-filterable-options-controls .form-item { - margin-right: 2%; -} -.form--inline .form-item-separator { - margin-top: 2.3em; - margin-right: 1em; /* LTR */ - margin-left: 0.5em; /* LTR */ -} -[dir="rtl"] .form--inline .form-item-separator { - margin-right: 0.5em; - margin-left: 1em; -} -.form--inline .form-actions { - clear: left; /* LTR */ -} -[dir="rtl"] .form--inline .form-actions { - clear: right; -} diff --git a/core/themes/claro/css/components/container-inline.css b/core/themes/claro/css/components/container-inline.css index d44b07e17a..e4cd08353d 100644 --- a/core/themes/claro/css/components/container-inline.css +++ b/core/themes/claro/css/components/container-inline.css @@ -8,17 +8,65 @@ /** * @file * Inline items. + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * Elements inside a form with the .claro-form-elements-inline class will all be + * styled as inline elements. This eliminates the need to add a wrapper with + * .container-inline to individual form elements. + * The .claro-form-elements-inline class does not adhere to BEM methodology. + * This deviation from BEM was approved as it ensures that elements added to + * admin forms via contrib match the styling of their constituent elements. + * + * @todo revisit the use of .claro-form-elements-inline in + * https://drupal.org/node/3170933 */ -.container-inline .form-radios label:after { - content: ""; +.container-inline div, +.container-inline label { + display: inline-block; } -.container-inline .form-radios .form-type-radio { - margin-right: 1em; +/* Details contents always need to be rendered as block. */ + +.container-inline .details-wrapper { + display: block; +} + +/** + * Textarea and datetime items need to be flex in order to properly position + * labels. + */ + +.container-inline .form-type--textarea, +.container-inline .form-datetime-wrapper, +.claro-form-elements-inline .form-item { + display: flex; + flex-wrap: wrap; +} + +/* Vertically center labels. */ + +.container-inline .form-item__label, +.claro-form-elements-inline .form-item__label { + display: inline-flex; + align-items: center; +} + +/* Textarea labels are top aligned. */ + +.container-inline .form-type--textarea .form-item__label, +.claro-form-elements-inline .form-type--textarea .form-item__label { + align-items: flex-start; } -[dir="rtl"] .container-inline .form-radios .form-type-radio { - margin-right: 0; - margin-left: 1em; +.container-inline .fieldset__description, +.container-inline .form-item__description, +.container-inline .form-item__error-message, +.container-inline .fieldset__error-message, +.claro-form-elements-inline .fieldset__description, +.claro-form-elements-inline .form-item__description, +.claro-form-elements-inline .form-item__error-message, +.claro-form-elements-inline .fieldset__error-message { + display: block; } diff --git a/core/themes/claro/css/components/container-inline.module.css b/core/themes/claro/css/components/container-inline.module.css deleted file mode 100644 index 9d4bbef777..0000000000 --- a/core/themes/claro/css/components/container-inline.module.css +++ /dev/null @@ -1,27 +0,0 @@ -/* - * DO NOT EDIT THIS FILE. - * See the following change record for more information, - * https://www.drupal.org/node/3084859 - * @preserve - */ - -/** - * @file - * Inline items. - */ - -.container-inline div, -.container-inline label { - display: inline-block; -} - -.form-items-inline { - margin-top: -0.125em; /* 2px */ - margin-bottom: -0.125em; -} - -.form-items-inline > .form-item { - display: inline-block; - margin-top: 0.125em; - margin-bottom: 0.125em; -} diff --git a/core/themes/claro/css/components/container-inline.module.pcss.css b/core/themes/claro/css/components/container-inline.module.pcss.css deleted file mode 100644 index 1de39bb552..0000000000 --- a/core/themes/claro/css/components/container-inline.module.pcss.css +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @file - * Inline items. - */ - -.container-inline div, -.container-inline label { - display: inline-block; -} - -.form-items-inline { - margin-top: -0.125em; /* 2px */ - margin-bottom: -0.125em; -} - -.form-items-inline > .form-item { - display: inline-block; - margin-top: 0.125em; - margin-bottom: 0.125em; -} diff --git a/core/themes/claro/css/components/container-inline.pcss.css b/core/themes/claro/css/components/container-inline.pcss.css index 3a4570046f..70a9d94092 100644 --- a/core/themes/claro/css/components/container-inline.pcss.css +++ b/core/themes/claro/css/components/container-inline.pcss.css @@ -1,15 +1,63 @@ /** * @file * Inline items. + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * Elements inside a form with the .claro-form-elements-inline class will all be + * styled as inline elements. This eliminates the need to add a wrapper with + * .container-inline to individual form elements. + * The .claro-form-elements-inline class does not adhere to BEM methodology. + * This deviation from BEM was approved as it ensures that elements added to + * admin forms via contrib match the styling of their constituent elements. + * + * @todo revisit the use of .claro-form-elements-inline in + * https://drupal.org/node/3170933 */ -.container-inline .form-radios label:after { - content: ""; +@import "../base/variables.pcss.css"; + +.container-inline div, +.container-inline label { + display: inline-block; +} + +/* Details contents always need to be rendered as block. */ +.container-inline .details-wrapper { + display: block; } -.container-inline .form-radios .form-type-radio { - margin-right: 1em; + +/** + * Textarea and datetime items need to be flex in order to properly position + * labels. + */ +.container-inline .form-type--textarea, +.container-inline .form-datetime-wrapper, +.claro-form-elements-inline .form-item { + display: flex; + flex-wrap: wrap; } -[dir="rtl"] .container-inline .form-radios .form-type-radio { - margin-right: 0; - margin-left: 1em; + +/* Vertically center labels. */ +.container-inline .form-item__label, +.claro-form-elements-inline .form-item__label { + display: inline-flex; + align-items: center; +} + +/* Textarea labels are top aligned. */ +.container-inline .form-type--textarea .form-item__label, +.claro-form-elements-inline .form-type--textarea .form-item__label { + align-items: flex-start; +} + +.container-inline .fieldset__description, +.container-inline .form-item__description, +.container-inline .form-item__error-message, +.container-inline .fieldset__error-message, +.claro-form-elements-inline .fieldset__description, +.claro-form-elements-inline .form-item__description, +.claro-form-elements-inline .form-item__error-message, +.claro-form-elements-inline .fieldset__error-message { + display: block; } diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css index d3938d2c6f..c88854d9dc 100644 --- a/core/themes/claro/css/components/details.css +++ b/core/themes/claro/css/components/details.css @@ -388,6 +388,20 @@ rgba(0, 0, 0, 0.1); margin: 1rem; } +.container-inline .claro-details__wrapper.claro-details__wrapper > * { + margin-right: 1rem; /* LTR */ +} + +[dir="rtl"] .container-inline .claro-details__wrapper.claro-details__wrapper > * { + margin-right: 0; + margin-left: 1rem; +} + +.container-inline .claro-details__wrapper .button { + margin-top: 0; + margin-bottom: 0; +} + .claro-details__wrapper--accordion, .claro-details__wrapper--accordion-item, .claro-details__wrapper--vertical-tabs-item { diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css index 987cf06472..83081b2dcc 100644 --- a/core/themes/claro/css/components/details.pcss.css +++ b/core/themes/claro/css/components/details.pcss.css @@ -368,6 +368,19 @@ margin: var(--space-m); } +.container-inline .claro-details__wrapper.claro-details__wrapper > * { + margin-right: var(--space-m); /* LTR */ +} +[dir="rtl"] .container-inline .claro-details__wrapper.claro-details__wrapper > * { + margin-right: 0; + margin-left: var(--space-m); +} + +.container-inline .claro-details__wrapper .button { + margin-top: 0; + margin-bottom: 0; +} + .claro-details__wrapper--accordion, .claro-details__wrapper--accordion-item, .claro-details__wrapper--vertical-tabs-item { diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css index 799f5b1fcb..bb9316f983 100644 --- a/core/themes/claro/css/components/form--checkbox-radio--ie.css +++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css @@ -164,3 +164,58 @@ color: transparent; /* IE */ background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%2382828c'/%3e%3c/svg%3e"); } + +/** + * IE11 flex-wrap will not work in several scenarios such as when it is nested + * in another flexbox with flex-wrap enabled. To get around this, IE11 instead + * uses the classic float and clearfix approach. + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * Elements inside a form with the .claro-form-elements-inline class will all be + * styled as inline elements. This eliminates the need to add a wrapper with + * .container-inline to individual form elements. + * The .claro-form-elements-inline class does not adhere to BEM methodology. + * This deviation from BEM was approved as it ensures that elements added to + * admin forms via contrib match the styling of their constituent elements. + * + * @todo revisit the use of .claro-form-elements-inline in + * https://drupal.org/node/3170933 + */ + +@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .container-inline .form-boolean-group, + .claro-form-elements-inline .form-boolean-group { + display: block; + } + .container-inline .form-boolean-group::after, + .claro-form-elements-inline .form-boolean-group::after { + display: table; + clear: both; + content: ""; + } + + .container-inline .form-boolean-group .form-type--boolean, + .claro-form-elements-inline .form-boolean-group .form-type--boolean { + float: left; /* LTR */ + } + [dir="rtl"] .container-inline .form-boolean-group .form-type--boolean, + [dir="rtl"] .claro-form-elements-inline .form-boolean-group .form-type--boolean { + float: right; + } + + .container-inline .form-boolean-group .form-type--boolean { + display: inline; + } + + .container-inline .fieldset__legend--composite, + .claro-form-elements-inline .fieldset__legend--composite { + display: block; + width: 100%; + } + + .fieldset__description, + .fieldset__error-message { + clear: both; + } +} diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css b/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css index 250deb0d5f..16502e1576 100644 --- a/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css +++ b/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css @@ -137,3 +137,57 @@ color: transparent; /* IE */ background-image: url(../../images/icons/82828c/checkmark.svg); } + +/** + * IE11 flex-wrap will not work in several scenarios such as when it is nested + * in another flexbox with flex-wrap enabled. To get around this, IE11 instead + * uses the classic float and clearfix approach. + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * Elements inside a form with the .claro-form-elements-inline class will all be + * styled as inline elements. This eliminates the need to add a wrapper with + * .container-inline to individual form elements. + * The .claro-form-elements-inline class does not adhere to BEM methodology. + * This deviation from BEM was approved as it ensures that elements added to + * admin forms via contrib match the styling of their constituent elements. + * + * @todo revisit the use of .claro-form-elements-inline in + * https://drupal.org/node/3170933 + */ +@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .container-inline .form-boolean-group, + .claro-form-elements-inline .form-boolean-group { + display: block; + } + .container-inline .form-boolean-group::after, + .claro-form-elements-inline .form-boolean-group::after { + display: table; + clear: both; + content: ""; + } + + .container-inline .form-boolean-group .form-type--boolean, + .claro-form-elements-inline .form-boolean-group .form-type--boolean { + float: left; /* LTR */ + } + [dir="rtl"] .container-inline .form-boolean-group .form-type--boolean, + [dir="rtl"] .claro-form-elements-inline .form-boolean-group .form-type--boolean { + float: right; + } + + .container-inline .form-boolean-group .form-type--boolean { + display: inline; + } + + .container-inline .fieldset__legend--composite, + .claro-form-elements-inline .fieldset__legend--composite { + display: block; + width: 100%; + } + + .fieldset__description, + .fieldset__error-message { + clear: both; + } +} diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css index 05084dacea..4954e0d1b5 100644 --- a/core/themes/claro/css/components/form--checkbox-radio.css +++ b/core/themes/claro/css/components/form--checkbox-radio.css @@ -59,6 +59,103 @@ transform: none; } +/** + * Inline styles + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * Elements inside a form with the .claro-form-elements-inline class will all be + * styled as inline elements. This eliminates the need to add a wrapper with + * .container-inline to individual form elements. + * The .claro-form-elements-inline class does not adhere to BEM methodology. + * This deviation from BEM was approved as it ensures that elements added to + * admin forms via contrib match the styling of their constituent elements. + * + * @todo revisit the use of .claro-form-elements-inline in + * https://drupal.org/node/3170933 + */ + +/* Align checkbox and radio inputs with their label */ + +.claro-form-elements-inline .form-item__label.option { + margin-top: 0; +} + +.container-inline .form-type--checkbox .form-item__label { + position: relative; + bottom: 1px; +} + +.container-inline .form-type--radio .form-item__label { + position: relative; + bottom: 2px; +} + +.container-inline .form-boolean-group, +.claro-form-elements-inline .form-boolean-group { + display: flex; + flex-wrap: wrap; +} + +.container-inline .form-type--boolean, +.claro-form-elements-inline .form-type--boolean { + margin-left: 0; + white-space: nowrap; +} + +[dir="rtl"] .container-inline .form-type--boolean, +[dir="rtl"] .claro-form-elements-inline .form-type--boolean { + margin-right: 0; +} + +.container-inline .form-type--boolean .form-boolean, +.claro-form-elements-inline .form-type--boolean .form-boolean { + position: static; + float: none; /* LTR */ + margin-right: 0.5rem; /* LTR */ + margin-left: 0; /* LTR */ + transform: none; +} + +[dir="rtl"] .container-inline .form-type--boolean .form-boolean, +[dir="rtl"] .claro-form-elements-inline .form-type--boolean .form-boolean { + float: none; /* Same as LTR, but needs to be here for specificity. */ + margin-right: 0; + margin-left: 0.5rem; +} + +.container-inline .form-type--boolean .form-boolean { + margin-right: calc(0.5rem - 2px); +} + +[dir="rtl"] .container-inline .form-type--boolean .form-boolean { + margin-right: 0; + margin-left: calc(0.5rem - 2px); +} + +.ui-dialog .container-inline .form-type--checkbox:not(:last-child), +.ui-dialog .container-inline .form-type--radio:not(:last-child) { + margin-right: 1rem; /* LTR */ +} + +[dir="rtl"] .ui-dialog .container-inline .form-type--checkbox:not(:last-child), +[dir="rtl"] .ui-dialog .container-inline .form-type--radio:not(:last-child) { + margin-right: 0; + margin-left: 1rem; +} + +@media screen and (min-width: 601px) { + .container-inline .form-type--boolean:not(:last-child), + .claro-form-elements-inline .form-type--boolean:not(:last-child) { + margin-right: 2rem; /* LTR */ + } + [dir="rtl"] .container-inline .form-type--boolean:not(:last-child), + [dir="rtl"] .claro-form-elements-inline .form-type--boolean:not(:last-child) { + margin-right: 0; + margin-left: 2rem; + } +} + /** * When form items are nested in radios or checkboxes group, reduce the default * space between them. diff --git a/core/themes/claro/css/components/form--checkbox-radio.pcss.css b/core/themes/claro/css/components/form--checkbox-radio.pcss.css index 55a879a084..f41e5af948 100644 --- a/core/themes/claro/css/components/form--checkbox-radio.pcss.css +++ b/core/themes/claro/css/components/form--checkbox-radio.pcss.css @@ -47,6 +47,94 @@ margin-left: 0; transform: none; } +/** + * Inline styles + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * Elements inside a form with the .claro-form-elements-inline class will all be + * styled as inline elements. This eliminates the need to add a wrapper with + * .container-inline to individual form elements. + * The .claro-form-elements-inline class does not adhere to BEM methodology. + * This deviation from BEM was approved as it ensures that elements added to + * admin forms via contrib match the styling of their constituent elements. + * + * @todo revisit the use of .claro-form-elements-inline in + * https://drupal.org/node/3170933 + */ + +/* Align checkbox and radio inputs with their label */ +.claro-form-elements-inline .form-item__label.option { + margin-top: 0; +} +.container-inline .form-type--checkbox .form-item__label { + position: relative; + bottom: 1px; +} +.container-inline .form-type--radio .form-item__label { + position: relative; + bottom: 2px; +} + +.container-inline .form-boolean-group, +.claro-form-elements-inline .form-boolean-group { + display: flex; + flex-wrap: wrap; +} + +.container-inline .form-type--boolean, +.claro-form-elements-inline .form-type--boolean { + margin-left: 0; + white-space: nowrap; +} +[dir="rtl"] .container-inline .form-type--boolean, +[dir="rtl"] .claro-form-elements-inline .form-type--boolean { + margin-right: 0; +} + +.container-inline .form-type--boolean .form-boolean, +.claro-form-elements-inline .form-type--boolean .form-boolean { + position: static; + float: none; /* LTR */ + margin-right: var(--space-xs); /* LTR */ + margin-left: 0; /* LTR */ + transform: none; +} +[dir="rtl"] .container-inline .form-type--boolean .form-boolean, +[dir="rtl"] .claro-form-elements-inline .form-type--boolean .form-boolean { + float: none; /* Same as LTR, but needs to be here for specificity. */ + margin-right: 0; + margin-left: var(--space-xs); +} +.container-inline .form-type--boolean .form-boolean { + margin-right: calc(var(--space-xs) - 2px); +} +[dir="rtl"] .container-inline .form-type--boolean .form-boolean { + margin-right: 0; + margin-left: calc(var(--space-xs) - 2px); +} + +.ui-dialog .container-inline .form-type--checkbox:not(:last-child), +.ui-dialog .container-inline .form-type--radio:not(:last-child) { + margin-right: var(--space-m); /* LTR */ +} +[dir="rtl"] .ui-dialog .container-inline .form-type--checkbox:not(:last-child), +[dir="rtl"] .ui-dialog .container-inline .form-type--radio:not(:last-child) { + margin-right: 0; + margin-left: var(--space-m); +} + +@media screen and (min-width: 601px) { + .container-inline .form-type--boolean:not(:last-child), + .claro-form-elements-inline .form-type--boolean:not(:last-child) { + margin-right: 2rem; /* LTR */ + } + [dir="rtl"] .container-inline .form-type--boolean:not(:last-child), + [dir="rtl"] .claro-form-elements-inline .form-type--boolean:not(:last-child) { + margin-right: 0; + margin-left: 2rem; + } +} /** * When form items are nested in radios or checkboxes group, reduce the default diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css index c99c8b4673..df9be040b0 100644 --- a/core/themes/claro/css/components/form.css +++ b/core/themes/claro/css/components/form.css @@ -8,6 +8,21 @@ /** * @file * Main form and form item styles. + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * Elements inside a form with the .claro-form-elements-inline class will all be + * styled as inline elements. This eliminates the need to add a wrapper with + * .container-inline to individual form elements. + * The .claro-form-elements-inline class does not adhere to BEM methodology. + * This deviation from BEM was approved as it ensures that elements added to + * admin forms via contrib match the styling of their constituent elements. + * + * @todo revisit the use of .claro-form-elements-inline in + * https://drupal.org/node/3170933 */ :-ms-input-placeholder { @@ -45,6 +60,15 @@ tr .form-item, margin-bottom: 0.75rem; } +.container-inline .form-item:not(:last-child) { + margin-right: 1rem; /* LTR */ +} + +[dir="rtl"] .container-inline .form-item:not(:last-child) { + margin-right: 0; + margin-left: 1rem; +} + /** * Form element label. */ @@ -75,6 +99,28 @@ tr .form-item, font-weight: normal; } +.container-inline .form-item__label, +.container-inline .fieldset__legend, +.container-inline .form-textarea-wrapper, +.claro-form-elements-inline .form-item__label, +.claro-form-elements-inline.fieldset__legend, +.claro-form-elements-inline .form-textarea-wrapper, +.search-block-form > .container-inline > h2 { + margin-right: 1rem; /* LTR */ + white-space: nowrap; +} + +[dir="rtl"] .container-inline .form-item__label, +[dir="rtl"] .container-inline .fieldset__legend, +[dir="rtl"] .container-inline .form-textarea-wrapper, +[dir="rtl"] .claro-form-elements-inline .form-item__label, +[dir="rtl"] .claro-form-elements-inline .fieldset__legend, +[dir="rtl"] .claro-form-elements-inline .form-textarea-wrapper, +[dir="rtl"] .search-block-form > .container-inline > h2 { + margin-right: 0; + margin-left: 1rem; +} + /* Label states. */ .form-item__label.has-error { @@ -112,6 +158,23 @@ tr .form-item, line-height: 1.0625rem; /* 17px */ } +.claro-form-elements-inline .fieldset__description, +.claro-form-elements-inline .form-item__description, +.claro-form-elements-inline .form-item__error-message, +.claro-form-elements-inline .fieldset__error-message, +.container-inline .form-type--textarea .fieldset__description, +.container-inline .form-type--textarea .form-item__description, +.container-inline .form-type--textarea .form-item__error-message, +.container-inline .form-type--textarea .fieldset__error-message, +.container-inline .form-datetime-wrapper .fieldset__description, +.container-inline .form-datetime-wrapper .form-item__description, +.container-inline .form-datetime-wrapper .form-item__error-message, +.container-inline .form-datetime-wrapper .fieldset__error-message { + width: 100%; + margin-right: 0; + margin-left: 0; +} + /* Description states. */ .form-item__description.is-disabled { @@ -171,6 +234,13 @@ tr .form-item, align-self: center; } +.container-inline .form-actions .button, +.container-inline .form-actions, +.container-inline.form-actions { + margin-top: 0; + margin-bottom: 0; +} + /** * Password module. * diff --git a/core/themes/claro/css/components/form.pcss.css b/core/themes/claro/css/components/form.pcss.css index 9b7f7ec736..35c6ac172e 100644 --- a/core/themes/claro/css/components/form.pcss.css +++ b/core/themes/claro/css/components/form.pcss.css @@ -1,6 +1,21 @@ /** * @file * Main form and form item styles. + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * + * Note that most rules with .container-inline selectors are accompanied by + * similar rules that use the selector .claro-form-elements-inline. + * Elements inside a form with the .claro-form-elements-inline class will all be + * styled as inline elements. This eliminates the need to add a wrapper with + * .container-inline to individual form elements. + * The .claro-form-elements-inline class does not adhere to BEM methodology. + * This deviation from BEM was approved as it ensures that elements added to + * admin forms via contrib match the styling of their constituent elements. + * + * @todo revisit the use of .claro-form-elements-inline in + * https://drupal.org/node/3170933 */ @import "../base/variables.pcss.css"; @@ -31,6 +46,14 @@ tr .form-item, margin-bottom: var(--space-s); } +.container-inline .form-item:not(:last-child) { + margin-right: var(--space-m); /* LTR */ +} +[dir="rtl"] .container-inline .form-item:not(:last-child) { + margin-right: 0; + margin-left: var(--space-m); +} + /** * Form element label. */ @@ -56,6 +79,28 @@ tr .form-item, display: inline; font-weight: normal; } + +.container-inline .form-item__label, +.container-inline .fieldset__legend, +.container-inline .form-textarea-wrapper, +.claro-form-elements-inline .form-item__label, +.claro-form-elements-inline.fieldset__legend, +.claro-form-elements-inline .form-textarea-wrapper, +.search-block-form > .container-inline > h2 { + margin-right: var(--space-m); /* LTR */ + white-space: nowrap; +} +[dir="rtl"] .container-inline .form-item__label, +[dir="rtl"] .container-inline .fieldset__legend, +[dir="rtl"] .container-inline .form-textarea-wrapper, +[dir="rtl"] .claro-form-elements-inline .form-item__label, +[dir="rtl"] .claro-form-elements-inline .fieldset__legend, +[dir="rtl"] .claro-form-elements-inline .form-textarea-wrapper, +[dir="rtl"] .search-block-form > .container-inline > h2 { + margin-right: 0; + margin-left: var(--space-m); +} + /* Label states. */ .form-item__label.has-error { color: var(--input--error-color); @@ -87,6 +132,24 @@ tr .form-item, font-size: var(--font-size-xs); /* ~13px */ line-height: calc(17rem / 16); /* 17px */ } + +.claro-form-elements-inline .fieldset__description, +.claro-form-elements-inline .form-item__description, +.claro-form-elements-inline .form-item__error-message, +.claro-form-elements-inline .fieldset__error-message, +.container-inline .form-type--textarea .fieldset__description, +.container-inline .form-type--textarea .form-item__description, +.container-inline .form-type--textarea .form-item__error-message, +.container-inline .form-type--textarea .fieldset__error-message, +.container-inline .form-datetime-wrapper .fieldset__description, +.container-inline .form-datetime-wrapper .form-item__description, +.container-inline .form-datetime-wrapper .form-item__error-message, +.container-inline .form-datetime-wrapper .fieldset__error-message { + width: 100%; + margin-right: 0; + margin-left: 0; +} + /* Description states. */ .form-item__description.is-disabled { color: var(--input--disabled-fg-color); @@ -140,6 +203,13 @@ tr .form-item, align-self: center; } +.container-inline .form-actions .button, +.container-inline .form-actions, +.container-inline.form-actions { + margin-top: 0; + margin-bottom: 0; +} + /** * Password module. * diff --git a/core/themes/claro/css/components/search-admin-settings.css b/core/themes/claro/css/components/search-admin-settings.css deleted file mode 100644 index 41e3c6b0aa..0000000000 --- a/core/themes/claro/css/components/search-admin-settings.css +++ /dev/null @@ -1,23 +0,0 @@ -/* - * DO NOT EDIT THIS FILE. - * See the following change record for more information, - * https://www.drupal.org/node/3084859 - * @preserve - */ - -/** - * @file - * Styles for administration pages. - */ - -/** - * Add search page select/submit. - */ - -.search-admin-settings .container-inline { - margin-bottom: 1em; -} - -.search-admin-settings label[for="edit-search-type"] { - display: block; -} diff --git a/core/themes/claro/css/components/search-admin-settings.pcss.css b/core/themes/claro/css/components/search-admin-settings.pcss.css deleted file mode 100644 index cc117e38f4..0000000000 --- a/core/themes/claro/css/components/search-admin-settings.pcss.css +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @file - * Styles for administration pages. - */ - -/** - * Add search page select/submit. - */ -.search-admin-settings .container-inline { - margin-bottom: 1em; -} -.search-admin-settings label[for="edit-search-type"] { - display: block; -} diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css index b3d5e3b07d..747a8670be 100644 --- a/core/themes/claro/css/theme/field-ui.admin.css +++ b/core/themes/claro/css/theme/field-ui.admin.css @@ -80,3 +80,16 @@ .field-plugin-settings-edit-form .plugin-name { font-weight: bold; } + +.form--inline .form-item--separator.form-item--separator { + /* Top margin is the label line-height + label top and bottom margins */ + margin-top: 1.625rem; + margin-right: 0.75rem; /* LTR */ + white-space: nowrap; + line-height: 3; +} + +[dir="rtl"] .form--inline .form-item--separator.form-item--separator { + margin-right: 0; + margin-left: 0.75rem; +} diff --git a/core/themes/claro/css/theme/field-ui.admin.pcss.css b/core/themes/claro/css/theme/field-ui.admin.pcss.css index b989d27cc1..b195b07561 100644 --- a/core/themes/claro/css/theme/field-ui.admin.pcss.css +++ b/core/themes/claro/css/theme/field-ui.admin.pcss.css @@ -65,3 +65,15 @@ .field-plugin-settings-edit-form .plugin-name { font-weight: bold; } + +.form--inline .form-item--separator.form-item--separator { + /* Top margin is the label line-height + label top and bottom margins */ + margin-top: calc(1.125rem + var(--space-xs)); + margin-right: var(--space-s); /* LTR */ + white-space: nowrap; + line-height: 3; +} +[dir="rtl"] .form--inline .form-item--separator.form-item--separator { + margin-right: 0; + margin-left: var(--space-s); +}