diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme index 5d735acb6b..3d89113d90 100644 --- a/core/themes/claro/claro.theme +++ b/core/themes/claro/claro.theme @@ -679,11 +679,21 @@ function claro_form_views_exposed_form_alter(&$form, FormStateInterface $form_st $view = $form_state->getStorage()['view']; $view_title = $view->getTitle(); + // Use small form elements. + $form['#attributes']['class'][] = 'form--small'; + // Add a label so screenreaders can identify the purpose of the exposed form // without having to scan content that appears further down the page. $form['#attributes']['aria-label'] = t('Filter the contents of the %view_title view', ['%view_title' => $view_title]); } +/** + * Implements hook_form_FORM_ID_alter() for views_exposed_form. + */ +function claro_form_block_admin_display_form_alter(&$form, FormStateInterface $form_state) { + $form['#attributes']['class'][] = 'form--extrasmall'; +} + /** * Implements hook_preprocess_form_element(). */ @@ -760,10 +770,6 @@ function claro_preprocess_select(&$variables) { $variables['attributes']['class'][] = $variables['element']['#multiple'] ? 'form-element--type-select-multiple' : 'form-element--type-select'; - - if (in_array('block-region-select', $variables['attributes']['class'])) { - $variables['attributes']['class'][] = 'form-element--extrasmall'; - } } /** diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css index 92f9c7fb95..c448f15ecc 100644 --- a/core/themes/claro/css/base/elements.css +++ b/core/themes/claro/css/base/elements.css @@ -29,7 +29,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css index 2e42193f1b..3f8dea6f32 100644 --- a/core/themes/claro/css/base/off-canvas.theme.css +++ b/core/themes/claro/css/base/off-canvas.theme.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css index 69dc17481c..1850bc49de 100644 --- a/core/themes/claro/css/base/variables.css +++ b/core/themes/claro/css/base/variables.css @@ -24,7 +24,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css index c0987bb801..bc145aaacb 100644 --- a/core/themes/claro/css/base/variables.pcss.css +++ b/core/themes/claro/css/base/variables.pcss.css @@ -98,14 +98,21 @@ --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */ --input-border-size: 1px; /* (1/16)em ~ 1px */ --input--error-border-size: 2px; - --input-padding-vertical: calc(var(--space-s) - var(--input-border-size)); + --input-min-height: var(--space-xl); /* 48px */ + --input-padding-vertical: calc((var(--input-min-height) - var(--input-line-height) - (var(--input-border-size) * 2)) / 2); --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size)); --input-font-size: var(--font-size-base); - --input-line-height: var(--space-l); - --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size)); - --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size)); - --input--extrasmall-font-size: var(--font-size-s); - --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */ + --input-line-height: calc(var(--input-font-size) * 1.5); /* 150% */ + --input-min-height--small: 2rem; /* 32px */ + --input-padding-vertical--small: calc((var(--input-min-height--small) - var(--input-line-height--small) - (var(--input-border-size) * 2)) / 2); + --input-padding-horizontal--small: var(--input-padding-horizontal); + --input-font-size--small: var(--font-size-s); + --input-line-height--small: calc(var(--font-size-s) * 1.5); /* 150 % */ + --input-min-height--extrasmall: var(--space-l); /* 24px */ + --input-padding-vertical--extrasmall: calc((var(--input-min-height--extrasmall) - var(--input-line-height--extrasmall) - (var(--input-border-size) * 2)) / 2); + --input-padding-horizontal--extrasmall: calc(var(--space-xs) - var(--input-border-size)); + --input-font-size--extrasmall: var(--font-size-xs); + --input-line-height--extrasmall: calc(var(--input-font-size--extrasmall) * 1.5); /* 150% */ --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */ --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */ /* diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css index 80d41e2d0b..e66cb54399 100644 --- a/core/themes/claro/css/components/accordion.css +++ b/core/themes/claro/css/components/accordion.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css index f573a6684e..6122a92580 100644 --- a/core/themes/claro/css/components/action-link.css +++ b/core/themes/claro/css/components/action-link.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ @@ -111,14 +111,16 @@ /* Small variant. */ -.no-touchevents .action-link--small { +.no-touchevents .action-link--small, +.no-touchevents .form--small .action-link { padding: 0.375rem 0.75rem; font-size: 0.889rem; } /* Extra small variant. */ -.no-touchevents .action-link--extrasmall { +.no-touchevents .action-link--extrasmall, +.no-touchevents .form--extrasmall .action-link { padding: 0 0.5rem; font-size: 0.889rem; } diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css index c281c0e600..64ebf398c1 100644 --- a/core/themes/claro/css/components/action-link.pcss.css +++ b/core/themes/claro/css/components/action-link.pcss.css @@ -54,13 +54,15 @@ } /* Small variant. */ -.no-touchevents .action-link--small { +.no-touchevents .action-link--small, +.no-touchevents .form--small .action-link { padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s); font-size: var(--font-size-s); } /* Extra small variant. */ -.no-touchevents .action-link--extrasmall { +.no-touchevents .action-link--extrasmall, +.no-touchevents .form--extrasmall .action-link { padding: 0 var(--space-xs); font-size: var(--font-size-s); } diff --git a/core/themes/claro/css/components/ajax-progress.module.css b/core/themes/claro/css/components/ajax-progress.module.css index 707ff3cd8f..e18a11d4d5 100644 --- a/core/themes/claro/css/components/ajax-progress.module.css +++ b/core/themes/claro/css/components/ajax-progress.module.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css index f4e79323ca..e0c39ef055 100644 --- a/core/themes/claro/css/components/autocomplete-loading.module.css +++ b/core/themes/claro/css/components/autocomplete-loading.module.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ @@ -79,9 +79,22 @@ */ .js .form-autocomplete { - background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.31.073C2.999-.128-1.275 5.676.481 10.687c1.376 5.131 8.184 7.51 12.448 4.33.382-.457.662.323.991.517l4.374 4.376 1.656-1.654-5.091-5.092C18.151 9.107 16.207 2.341 11.277.63A8.193 8.193 0 008.31.073zm-.001 2.342c3.796-.145 6.844 4.001 5.589 7.58-.985 3.665-5.846 5.361-8.895 3.101-3.211-2.024-3.392-7.168-.331-9.414a5.858 5.858 0 013.637-1.267z' fill='%23868686'/%3e%3c/svg%3e"); background-repeat: no-repeat; - background-position: 100% 50%; + background-position: calc(100% - 1rem + 1px) 50%; /* LTR */ + background-size: calc(1rem + 2px) 100%; +} + +.js .form--small .form-autocomplete, +.js .form-autocomplete.form-element--small { + background-position: calc(100% - 0.5rem - 2px) 50%; /* LTR */ + background-size: calc(0.75rem + 2px) 100%; +} + +.js .form--extrasmall .form-autocomplete, +.js .form-autocomplete.form-element--extrasmall { + background-position: calc(100% - 0.5rem - 2px) 50%; + background-size: 0.75rem 100%; } .js .form-autocomplete::-ms-clear { @@ -89,8 +102,18 @@ } .js[dir="rtl"] .form-autocomplete { - background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e"); - background-position: 0 50%; + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.699.102c5.307-.201 9.574 5.598 7.819 10.605-1.377 5.126-8.178 7.503-12.438 4.326-.381-.457-.662.323-.989.516l-4.374 4.373-1.653-1.655 5.086-5.085C1.864 9.127 3.807 2.368 8.732.659a8.2 8.2 0 012.967-.557zm0 2.339c-3.792-.144-6.84 3.999-5.586 7.575.983 3.662 5.839 5.355 8.886 3.097 3.209-2.022 3.391-7.161.334-9.405a5.862 5.862 0 00-3.634-1.267z' fill='%23868686'/%3e%3c/svg%3e"); + background-position: calc(1rem - 1px) 50%; +} + +.js[dir="rtl"] .form--small .form-autocomplete, +.js[dir="rtl"] .form-autocomplete.form-element--small { + background-position: calc(0.5rem - 2px) 50%; +} + +.js[dir="rtl"] .form--extrasmall .form-autocomplete, +.js[dir="rtl"] .form-autocomplete.form-element--extrasmall { + background-position: calc(0.5rem - 2px) 50%; } .js .form-autocomplete.is-autocompleting { @@ -149,3 +172,14 @@ _:-ms-fullscreen, .js .is-autocompleting + .claro-autocomplete__message { display: block; } + +@media screen and (max-width: 600px) { + /** + * Under 600px, all form element widths are 100%, so it is not necessary to + * have `.claro-autocomplete` disply as inline-block. Setting it to block + * ensures the autocomplete input will assume the same width as other fields. + */ + .claro-autocomplete { + display: block; + } +} diff --git a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css index fc81d5ce43..916194fc77 100644 --- a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css +++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css @@ -26,17 +26,42 @@ * feedback would be a usability/accessibility issue as well. */ +:root { + --autocomplete-background-width: calc(var(--space-m) + (var(--input-border-size) * 2)); + --autocomplete-background-width--small: calc(var(--space-s) + (var(--input-border-size) * 2)); + --autocomplete-background-width--extrasmall: var(--space-s); +} + .js .form-autocomplete { background-image: url(../../images/icons/868686/magnifier.svg); background-repeat: no-repeat; - background-position: 100% 50%; + background-position: calc(100% - var(--input-padding-horizontal)) 50%; /* LTR */ + background-size: var(--autocomplete-background-width) 100%; +} +.js .form--small .form-autocomplete, +.js .form-autocomplete.form-element--small { + background-position: calc(100% - var(--space-xs) - (var(--input-border-size) * 2)) 50%; /* LTR */ + background-size: var(--autocomplete-background-width--small) 100%; +} +.js .form--extrasmall .form-autocomplete, +.js .form-autocomplete.form-element--extrasmall { + background-position: calc(100% - var(--space-xs) - (var(--input-border-size) * 2)) 50%; + background-size: var(--autocomplete-background-width--extrasmall) 100%; } .js .form-autocomplete::-ms-clear { display: none; } .js[dir="rtl"] .form-autocomplete { background-image: url(../../images/icons/868686/magnifier-rtl.svg); - background-position: 0 50%; + background-position: var(--input-padding-horizontal) 50%; +} +.js[dir="rtl"] .form--small .form-autocomplete, +.js[dir="rtl"] .form-autocomplete.form-element--small { + background-position: calc(var(--space-xs) - (var(--input-border-size) * 2)) 50%; +} +.js[dir="rtl"] .form--extrasmall .form-autocomplete, +.js[dir="rtl"] .form-autocomplete.form-element--extrasmall { + background-position: calc(var(--space-xs) - (var(--input-border-size) * 2)) 50%; } .js .form-autocomplete.is-autocompleting { background-image: url(../../images/icons/004adc/spinner.svg); @@ -84,3 +109,14 @@ _:-ms-fullscreen, .js .is-autocompleting + .claro-autocomplete__message { display: block; } + +@media screen and (max-width: 600px) { + /** + * Under 600px, all form element widths are 100%, so it is not necessary to + * have `.claro-autocomplete` disply as inline-block. Setting it to block + * ensures the autocomplete input will assume the same width as other fields. + */ + .claro-autocomplete { + display: block; + } +} diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css index 70a7ae25ef..4b1f2cfac0 100644 --- a/core/themes/claro/css/components/breadcrumb.css +++ b/core/themes/claro/css/components/breadcrumb.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css index ffe9155cb5..e5825d42d2 100644 --- a/core/themes/claro/css/components/button.css +++ b/core/themes/claro/css/components/button.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ @@ -123,24 +123,33 @@ background-color: #adaeb3; } -/* Common styles for small buttons */ +/** + * On touch devices, extrasmall receives small styling in order to provide + * adequate target height. + */ -.no-touchevents .button--small { +.button--small, +.form--small .button, +.touchevents .button--extrasmall, +.touchevents .form--extrasmall .button { margin: 0.75rem 0.5rem 0.75rem 0; /* LTR */ padding: calc(0.5rem - 1px) calc(1rem - 1px); /* 1 */ font-size: 0.79rem; } -/* Common styles for extra small buttons */ - -.no-touchevents .button--extrasmall { +.no-touchevents .button--extrasmall, +.no-touchevents .form--extrasmall .button { margin: 0.5rem 0.5rem 0.5rem 0; /* LTR */ padding: calc(0.25rem - 1px) calc(0.75rem - 1px); /* 1 */ font-size: 0.79rem; } -[dir="rtl"].no-touchevents .button--small, -[dir="rtl"].no-touchevents .button--extrasmall { +[dir="rtl"] .button--small, +[dir="rtl"] .form--small .button, +[dir="rtl"].touchevents .button--extrasmall, +[dir="rtl"].touchevents .form--extrasmall .button, +[dir="rtl"].no-touchevents .button--extrasmall, +[dir="rtl"].no-touchevents .form--extrasmall .button { margin-right: 0; margin-left: 0.5rem; } diff --git a/core/themes/claro/css/components/button.pcss.css b/core/themes/claro/css/components/button.pcss.css index f1f95222bd..5daab97b86 100644 --- a/core/themes/claro/css/components/button.pcss.css +++ b/core/themes/claro/css/components/button.pcss.css @@ -67,21 +67,30 @@ background-color: var(--button--active-bg-color); } -/* Common styles for small buttons */ -.no-touchevents .button--small { +/** + * On touch devices, extrasmall receives small styling in order to provide + * adequate target height. + */ +.button--small, +.form--small .button, +.touchevents .button--extrasmall, +.touchevents .form--extrasmall .button { margin: var(--space-s) var(--space-xs) var(--space-s) 0; /* LTR */ padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */ font-size: var(--font-size-xs); } - -/* Common styles for extra small buttons */ -.no-touchevents .button--extrasmall { +.no-touchevents .button--extrasmall, +.no-touchevents .form--extrasmall .button { margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */ padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */ font-size: var(--font-size-xs); } -[dir="rtl"].no-touchevents .button--small, -[dir="rtl"].no-touchevents .button--extrasmall { +[dir="rtl"] .button--small, +[dir="rtl"] .form--small .button, +[dir="rtl"].touchevents .button--extrasmall, +[dir="rtl"].touchevents .form--extrasmall .button, +[dir="rtl"].no-touchevents .button--extrasmall, +[dir="rtl"].no-touchevents .form--extrasmall .button { margin-right: 0; margin-left: var(--space-xs); } diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css index 28024590d2..475e1080c3 100644 --- a/core/themes/claro/css/components/card.css +++ b/core/themes/claro/css/components/card.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/content-header.css b/core/themes/claro/css/components/content-header.css index 0e30ab77cf..09769bb467 100644 --- a/core/themes/claro/css/components/content-header.css +++ b/core/themes/claro/css/components/content-header.css @@ -29,7 +29,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css index 434a55c0e8..f39ed1b8f6 100644 --- a/core/themes/claro/css/components/details.css +++ b/core/themes/claro/css/components/details.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css index 0b7708e77d..93d5105472 100644 --- a/core/themes/claro/css/components/dialog.css +++ b/core/themes/claro/css/components/dialog.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css index 2bcd2dedbb..502d8cbc65 100644 --- a/core/themes/claro/css/components/divider.css +++ b/core/themes/claro/css/components/divider.css @@ -29,7 +29,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css index 18678113b7..3a3c174963 100644 --- a/core/themes/claro/css/components/dropbutton.css +++ b/core/themes/claro/css/components/dropbutton.css @@ -34,7 +34,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css index 0a66978711..b4a7eb0736 100644 --- a/core/themes/claro/css/components/entity-meta.css +++ b/core/themes/claro/css/components/entity-meta.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css index 5fcf6d4dea..4dbcf27cfb 100644 --- a/core/themes/claro/css/components/fieldset.css +++ b/core/themes/claro/css/components/fieldset.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css index d060f2c89c..dfdae78328 100644 --- a/core/themes/claro/css/components/file.css +++ b/core/themes/claro/css/components/file.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ 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 464aa0cd5b..889b0beaa4 100644 --- a/core/themes/claro/css/components/form--checkbox-radio--ie.css +++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css index 874ed5d57a..9556c8c845 100644 --- a/core/themes/claro/css/components/form--checkbox-radio.css +++ b/core/themes/claro/css/components/form--checkbox-radio.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/form--field-multiple.css b/core/themes/claro/css/components/form--field-multiple.css index 4ca64d7205..634bb16c27 100644 --- a/core/themes/claro/css/components/form--field-multiple.css +++ b/core/themes/claro/css/components/form--field-multiple.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/form--managed-file.css b/core/themes/claro/css/components/form--managed-file.css index dd4b30f98f..4b6c7ba2d9 100644 --- a/core/themes/claro/css/components/form--managed-file.css +++ b/core/themes/claro/css/components/form--managed-file.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css index aed9c2bec1..0c80a8931d 100644 --- a/core/themes/claro/css/components/form--password-confirm.css +++ b/core/themes/claro/css/components/form--password-confirm.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/form--select.css b/core/themes/claro/css/components/form--select.css index 063e96077c..89ada98d50 100644 --- a/core/themes/claro/css/components/form--select.css +++ b/core/themes/claro/css/components/form--select.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ @@ -57,30 +57,56 @@ */ } +:root { /* SVG background image has width:14px height:9px. 9 / 14 = .642 */ +} + .form-element--type-select { - padding-right: calc(2rem - 1px); + padding-right: calc(3rem - 2px); /* LTR */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e"); background-repeat: no-repeat; - background-position: 100% 50%; - background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */ + background-position: calc(100% - 1rem + 1px) calc(50% + 1px); /* LTR */ + background-size: 1rem 0.642rem; } [dir="rtl"] .form-element--type-select { padding-right: calc(1rem - 1px); - padding-left: calc(2rem - 1px); - background-position: 0 50%; + padding-left: calc(3rem - 2px); + background-position: calc(1rem - 1px) calc(50% + 1px); +} + +/** + * On touch devices, extrasmall receives small styling in order to provide + * adequate target height. + */ + +.form--small .form-element--type-select, +.form-element--type-select.form-element--small, +.touchevents .form--extrasmall .form-element--type-select, +.touchevents .form-element--type-select.form-element--extrasmall { + padding-right: calc(2.75rem - 2px); /* LTR */ + background-size: 0.75rem 0.4815rem; +} + +[dir="rtl"] .form-element--type-select.form-element--small, +[dir="rtl"] .form--small .form-element--type-select, +[dir="rtl"].touchevents .form-element--type-select.form-element--extrasmall, +[dir="rtl"].touchevents .form--extrasmall .form-element--type-select { + padding-right: calc(1rem - 1px); + padding-left: calc(2.75rem - 2px); } -.no-touchevents .form-element--type-select.form-element--extrasmall, -.no-touchevents .form-element--type-select[name$="][_weight]"] { - padding-right: calc(1.5rem - 1px); - background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */ +.no-touchevents .form--extrasmall .form-element--type-select, +.no-touchevents .form-element--type-select.form-element--extrasmall { + padding-right: calc(1.75rem - 2px); /* LTR */ + background-position: calc(100% - 0.5rem + 1px) 50%; /* LTR */ + background-size: 0.75rem 0.4815rem; } -[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall, -[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] { +[dir="rtl"].no-touchevents .form--extrasmall .form-element--type-select, +[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall { padding-right: calc(0.5rem - 1px); - padding-left: calc(1.5rem - 1px); + padding-left: calc(1.75rem - 2px); + background-position: calc(0.5rem - 1px) 50%; } .form-element--type-select::-ms-expand { diff --git a/core/themes/claro/css/components/form--select.pcss.css b/core/themes/claro/css/components/form--select.pcss.css index 70433a81dd..219e1eaf65 100644 --- a/core/themes/claro/css/components/form--select.pcss.css +++ b/core/themes/claro/css/components/form--select.pcss.css @@ -5,28 +5,59 @@ @import "../base/variables.pcss.css"; +:root { + --select-background-image-height-width-ratio: 0.642; /* SVG background image has width:14px height:9px. 9 / 14 = .642 */ + --select-background-image-width: var(--space-m); + --select-background-image-height: calc(var(--select-background-image-width) * var(--select-background-image-height-width-ratio)); + --select-background-image-width--small: var(--space-s); + --select-background-image-height--small: calc(var(--select-background-image-width--small) * var(--select-background-image-height-width-ratio)); + --select-background-image-width--extrasmall: var(--space-s); + --select-background-image-height--extrasmall: calc(var(--select-background-image-width--small) * var(--select-background-image-height-width-ratio)); +} + .form-element--type-select { - padding-right: calc(2rem - var(--input-border-size)); + padding-right: calc(var(--select-background-image-width) + (var(--input-padding-horizontal) * 2)); /* LTR */ background-image: url(../../images/icons/545560/chevron-down.svg); background-repeat: no-repeat; - background-position: 100% 50%; - background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */ + background-position: calc(100% - var(--input-padding-horizontal)) calc(50% + var(--input-border-size)); /* LTR */ + background-size: var(--select-background-image-width) var(--select-background-image-height); } [dir="rtl"] .form-element--type-select { - padding-right: calc(1rem - var(--input-border-size)); - padding-left: calc(2rem - var(--input-border-size)); - background-position: 0 50%; + padding-right: var(--input-padding-horizontal); + padding-left: calc(var(--select-background-image-width) + (var(--input-padding-horizontal) * 2)); + background-position: var(--input-padding-horizontal) calc(50% + var(--input-border-size)); +} + +/** + * On touch devices, extrasmall receives small styling in order to provide + * adequate target height. + */ +.form--small .form-element--type-select, +.form-element--type-select.form-element--small, +.touchevents .form--extrasmall .form-element--type-select, +.touchevents .form-element--type-select.form-element--extrasmall { + padding-right: calc(var(--select-background-image-width--small) + (var(--input-padding-horizontal) * 2)); /* LTR */ + background-size: var(--select-background-image-width--small) var(--select-background-image-height--small); +} +[dir="rtl"] .form-element--type-select.form-element--small, +[dir="rtl"] .form--small .form-element--type-select, +[dir="rtl"].touchevents .form-element--type-select.form-element--extrasmall, +[dir="rtl"].touchevents .form--extrasmall .form-element--type-select { + padding-right: var(--input-padding-horizontal); + padding-left: calc(var(--select-background-image-width--small) + (var(--input-padding-horizontal) * 2)); } -.no-touchevents .form-element--type-select.form-element--extrasmall, -.no-touchevents .form-element--type-select[name$="][_weight]"] { - padding-right: calc(1.5rem - var(--input-border-size)); - background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */ -} -[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall, -[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] { - padding-right: calc(0.5rem - var(--input-border-size)); - padding-left: calc(1.5rem - var(--input-border-size)); +.no-touchevents .form--extrasmall .form-element--type-select, +.no-touchevents .form-element--type-select.form-element--extrasmall { + padding-right: calc(var(--select-background-image-width--extrasmall) + (var(--input-padding-horizontal--extrasmall) * 2)); /* LTR */ + background-position: calc(100% - var(--input-padding-horizontal--extrasmall)) 50%; /* LTR */ + background-size: var(--select-background-image-width--extrasmall) var(--select-background-image-height--extrasmall); +} +[dir="rtl"].no-touchevents .form--extrasmall .form-element--type-select, +[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall { + padding-right: var(--input-padding-horizontal--extrasmall); + padding-left: calc(var(--select-background-image-width--extrasmall) + (var(--input-padding-horizontal--extrasmall) * 2)); + background-position: var(--input-padding-horizontal--extrasmall) 50%; } .form-element--type-select::-ms-expand { diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css index a4ec1ca5e4..513b1cd85d 100644 --- a/core/themes/claro/css/components/form--text.css +++ b/core/themes/claro/css/components/form--text.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ @@ -60,8 +60,8 @@ .form-element { box-sizing: border-box; max-width: 100%; - min-height: 3rem; /* iOS. */ - padding: calc(0.75rem - 1px) calc(1rem - 1px); + min-height: 3rem; + padding: calc((1.5rem - 2px)/2) calc(1rem - 1px); color: #222330; border: 1px solid #8e929c; border-radius: 0.125rem; @@ -73,12 +73,27 @@ appearance: none; /* Being able to control inner box shadow on iOS. */ } -.no-touchevents .form-element--extrasmall, -.no-touchevents .form-element[name$="][_weight]"] { - min-height: 1.5rem; /* iOS. */ - padding: calc(0.15rem - 1px) calc(0.5rem - 1px); +/** + * On touch devices, extrasmall receives small styling in order to provide + * adequate target height. + */ + +.form--small .form-element, +.form-element--small, +.touchevents .form--extrasmall .form-element, +.touchevents .form-element--extrasmall { + min-height: 2rem; + padding: calc((0.6665rem - 2px)/2) calc(1rem - 1px); font-size: 0.889rem; - line-height: 1.2rem; + line-height: 1.3335rem; +} + +.no-touchevents .form--extrasmall .form-element, +.no-touchevents .form-element--extrasmall { + min-height: 1.5rem; /* iOS. */ + padding: calc((0.315rem - 2px)/2) calc(0.5rem - 1px); + font-size: 0.79rem; + line-height: 1.185rem; } /** diff --git a/core/themes/claro/css/components/form--text.pcss.css b/core/themes/claro/css/components/form--text.pcss.css index d6d09b6f88..281ba8096a 100644 --- a/core/themes/claro/css/components/form--text.pcss.css +++ b/core/themes/claro/css/components/form--text.pcss.css @@ -8,7 +8,7 @@ .form-element { box-sizing: border-box; max-width: 100%; - min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */ + min-height: var(--input-min-height); padding: var(--input-padding-vertical) var(--input-padding-horizontal); color: var(--input-fg-color); border: var(--input-border-size) solid var(--input-border-color); @@ -19,12 +19,26 @@ appearance: none; /* Being able to control inner box shadow on iOS. */ } -.no-touchevents .form-element--extrasmall, -.no-touchevents .form-element[name$="][_weight]"] { - min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */ - padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal); - font-size: var(--input--extrasmall-font-size); - line-height: var(--input--extrasmall-line-height); +/** + * On touch devices, extrasmall receives small styling in order to provide + * adequate target height. + */ +.form--small .form-element, +.form-element--small, +.touchevents .form--extrasmall .form-element, +.touchevents .form-element--extrasmall { + min-height: var(--input-min-height--small); + padding: var(--input-padding-vertical--small) var(--input-padding-horizontal--small); + font-size: var(--input-font-size--small); + line-height: var(--input-line-height--small); +} + +.no-touchevents .form--extrasmall .form-element, +.no-touchevents .form-element--extrasmall { + min-height: var(--input-min-height--extrasmall); /* iOS. */ + padding: var(--input-padding-vertical--extrasmall) var(--input-padding-horizontal--extrasmall); + font-size: var(--input-font-size--extrasmall); + line-height: var(--input-line-height--extrasmall); } /** diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css index 0638d300a4..c4539fbb41 100644 --- a/core/themes/claro/css/components/form.css +++ b/core/themes/claro/css/components/form.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css index ff2c2d66b8..c33d5e0f7e 100644 --- a/core/themes/claro/css/components/image-preview.css +++ b/core/themes/claro/css/components/image-preview.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css index ba7ff2623d..ebd9dd0c17 100644 --- a/core/themes/claro/css/components/jquery.ui/theme.css +++ b/core/themes/claro/css/components/jquery.ui/theme.css @@ -31,7 +31,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/media-library.ui.css b/core/themes/claro/css/components/media-library.ui.css index 20a038df8e..b2142d0b81 100644 --- a/core/themes/claro/css/components/media-library.ui.css +++ b/core/themes/claro/css/components/media-library.ui.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css index 6cb9cd9c1d..e7543f01d1 100644 --- a/core/themes/claro/css/components/messages.css +++ b/core/themes/claro/css/components/messages.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/page-title.css index 31699cc219..49ff928595 100644 --- a/core/themes/claro/css/components/page-title.css +++ b/core/themes/claro/css/components/page-title.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css index 785eaab110..c415dd670d 100644 --- a/core/themes/claro/css/components/pager.css +++ b/core/themes/claro/css/components/pager.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css index 6dc9a7549e..1e2749d344 100644 --- a/core/themes/claro/css/components/progress.css +++ b/core/themes/claro/css/components/progress.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css index f9384c830c..b0ba17da97 100644 --- a/core/themes/claro/css/components/shortcut.css +++ b/core/themes/claro/css/components/shortcut.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/system-admin--admin-list.css b/core/themes/claro/css/components/system-admin--admin-list.css index bd2a7ea079..ce66384737 100644 --- a/core/themes/claro/css/components/system-admin--admin-list.css +++ b/core/themes/claro/css/components/system-admin--admin-list.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css index d45b4d95b5..37c7063414 100644 --- a/core/themes/claro/css/components/system-admin--panel.css +++ b/core/themes/claro/css/components/system-admin--panel.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css index b7f88d3d85..75bb804453 100644 --- a/core/themes/claro/css/components/table--file-multiple-widget.css +++ b/core/themes/claro/css/components/table--file-multiple-widget.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css index 39ae18e2c6..d4c8a375a3 100644 --- a/core/themes/claro/css/components/tabledrag.css +++ b/core/themes/claro/css/components/tabledrag.css @@ -34,7 +34,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css index b59d94772e..1c618d8591 100644 --- a/core/themes/claro/css/components/tables.css +++ b/core/themes/claro/css/components/tables.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/tableselect.css b/core/themes/claro/css/components/tableselect.css index f335a9dbfe..c158c52be4 100644 --- a/core/themes/claro/css/components/tableselect.css +++ b/core/themes/claro/css/components/tableselect.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css index c2d5233156..3fa8c5ee5d 100644 --- a/core/themes/claro/css/components/tabs.css +++ b/core/themes/claro/css/components/tabs.css @@ -29,7 +29,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css index 7e939da826..f138aa2d10 100644 --- a/core/themes/claro/css/components/vertical-tabs.css +++ b/core/themes/claro/css/components/vertical-tabs.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css index 71fffe4879..485131ea29 100644 --- a/core/themes/claro/css/components/views-exposed-form.css +++ b/core/themes/claro/css/components/views-exposed-form.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ @@ -105,8 +105,15 @@ rgba(0, 0, 0, 0.1); margin-left: 1rem; } -.views-exposed-form__item--actions.views-exposed-form__item--actions .button { - margin-bottom: 0; +.views-exposed-form__item--actions.views-exposed-form__item--actions { + margin: 0; + padding: 0; +} + +.views-exposed-form__item--actions.views-exposed-form__item--actions .button, +.form--small .views-exposed-form__item--actions.views-exposed-form__item--actions .button, +.form--extrasmall .views-exposed-form__item--actions.views-exposed-form__item--actions .button { + margin-bottom: 1px; } .views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child { @@ -116,3 +123,13 @@ rgba(0, 0, 0, 0.1); [dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child { margin-left: 0; } + +/** + * If touch events are active, the button will be taller than other inputs in + * the form. Setting the width to 100% ensures it is on its own line so the + * button's height difference does not appear incongruous. + */ + +.touchevents .views-exposed-form__item--actions { + width: 100%; +} diff --git a/core/themes/claro/css/components/views-exposed-form.pcss.css b/core/themes/claro/css/components/views-exposed-form.pcss.css index 994163730d..3062149ea8 100644 --- a/core/themes/claro/css/components/views-exposed-form.pcss.css +++ b/core/themes/claro/css/components/views-exposed-form.pcss.css @@ -48,8 +48,14 @@ margin-left: var(--space-m); } -.views-exposed-form__item--actions.views-exposed-form__item--actions .button { - margin-bottom: 0; +.views-exposed-form__item--actions.views-exposed-form__item--actions { + margin: 0; + padding: 0; +} +.views-exposed-form__item--actions.views-exposed-form__item--actions .button, +.form--small .views-exposed-form__item--actions.views-exposed-form__item--actions .button, +.form--extrasmall .views-exposed-form__item--actions.views-exposed-form__item--actions .button { + margin-bottom: var(--input-border-size); } .views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child { @@ -58,3 +64,12 @@ [dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child { margin-left: 0; } + +/** + * If touch events are active, the button will be taller than other inputs in + * the form. Setting the width to 100% ensures it is on its own line so the + * button's height difference does not appear incongruous. + */ +.touchevents .views-exposed-form__item--actions { + width: 100%; +} diff --git a/core/themes/claro/css/layout/breadcrumb.css b/core/themes/claro/css/layout/breadcrumb.css index 520a8969f9..5fdde4942a 100644 --- a/core/themes/claro/css/layout/breadcrumb.css +++ b/core/themes/claro/css/layout/breadcrumb.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/layout/card-list.css b/core/themes/claro/css/layout/card-list.css index 5da854a642..6a02772934 100644 --- a/core/themes/claro/css/layout/card-list.css +++ b/core/themes/claro/css/layout/card-list.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/layout/local-actions.css b/core/themes/claro/css/layout/local-actions.css index 18a6051ed0..7f418212b1 100644 --- a/core/themes/claro/css/layout/local-actions.css +++ b/core/themes/claro/css/layout/local-actions.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css index 8492379c06..cb2dcab067 100644 --- a/core/themes/claro/css/layout/node-add.css +++ b/core/themes/claro/css/layout/node-add.css @@ -29,7 +29,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/theme/ckeditor-dialog.css b/core/themes/claro/css/theme/ckeditor-dialog.css index e6b3f894ce..04fdcffe2e 100644 --- a/core/themes/claro/css/theme/ckeditor-dialog.css +++ b/core/themes/claro/css/theme/ckeditor-dialog.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css index 0bc8a385a4..160e60a06d 100644 --- a/core/themes/claro/css/theme/ckeditor-editor.css +++ b/core/themes/claro/css/theme/ckeditor-editor.css @@ -28,7 +28,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/theme/ckeditor-frame.css b/core/themes/claro/css/theme/ckeditor-frame.css index e02957cc42..5523a3a29b 100644 --- a/core/themes/claro/css/theme/ckeditor-frame.css +++ b/core/themes/claro/css/theme/ckeditor-frame.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css index a4d6f428a8..cb595ed8b0 100644 --- a/core/themes/claro/css/theme/field-ui.admin.css +++ b/core/themes/claro/css/theme/field-ui.admin.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css index b198bafe7f..ec2d38edf5 100644 --- a/core/themes/claro/css/theme/filter.theme.css +++ b/core/themes/claro/css/theme/filter.theme.css @@ -30,7 +30,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css index 0074497dbc..098dffe06a 100644 --- a/core/themes/claro/css/theme/views_ui.admin.theme.css +++ b/core/themes/claro/css/theme/views_ui.admin.theme.css @@ -32,7 +32,7 @@ */ /* * Inputs. - */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ + */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ diff --git a/core/themes/claro/images/icons/868686/magnifier-rtl.svg b/core/themes/claro/images/icons/868686/magnifier-rtl.svg index 7e28872c08..df27ff04ed 100644 --- a/core/themes/claro/images/icons/868686/magnifier-rtl.svg +++ b/core/themes/claro/images/icons/868686/magnifier-rtl.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/core/themes/claro/images/icons/868686/magnifier.svg b/core/themes/claro/images/icons/868686/magnifier.svg index 4e6f92b7cf..165b68b53b 100644 --- a/core/themes/claro/images/icons/868686/magnifier.svg +++ b/core/themes/claro/images/icons/868686/magnifier.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/core/themes/claro/src/ClaroPreRender.php b/core/themes/claro/src/ClaroPreRender.php index d702543451..25fe5198e7 100644 --- a/core/themes/claro/src/ClaroPreRender.php +++ b/core/themes/claro/src/ClaroPreRender.php @@ -17,7 +17,6 @@ class ClaroPreRender implements TrustedCallbackInterface { */ public static function managedFile($element) { if (!empty($element['remove_button']) && is_array($element['remove_button'])) { - $element['remove_button']['#attributes']['class'][] = 'button--extrasmall'; $element['remove_button']['#attributes']['class'][] = 'remove-button'; } diff --git a/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig b/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig index 9dece3f595..122a0bfef0 100644 --- a/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig +++ b/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig @@ -14,7 +14,9 @@ #}
- {{ table }} +
+ {{ table }} +
{{ element }}