From 03bf48df25e4bb34e861562d138d243d7b268a4c Mon Sep 17 00:00:00 2001 From: Lauri Eskola Date: Mon, 1 Mar 2021 14:27:03 +0200 Subject: [PATCH] Issue #3194350 by mherchel, alexpott, oksana-c, lauriii, jwitkowski79, katannshaw, andrewmacpherson, ressa: Implement new form element designs for Olivero --- core/themes/olivero/css/base/variables.css | 10 +- .../olivero/css/base/variables.pcss.css | 21 +- .../autocomplete-loading.module.css | 122 +-------- .../autocomplete-loading.module.pcss.css | 118 +------- core/themes/olivero/css/components/button.css | 66 +---- .../olivero/css/components/button.pcss.css | 27 +- .../olivero/css/components/cke-dialog.css | 258 +----------------- .../css/components/cke-dialog.pcss.css | 159 +---------- .../themes/olivero/css/components/details.css | 4 +- .../olivero/css/components/details.pcss.css | 4 +- .../olivero/css/components/dropbutton.css | 67 +---- .../css/components/dropbutton.pcss.css | 69 +---- .../olivero/css/components/fieldset.css | 46 ++-- .../olivero/css/components/fieldset.pcss.css | 28 +- .../olivero/css/components/form-boolean.css | 137 ++++------ .../css/components/form-boolean.pcss.css | 97 ++++--- .../olivero/css/components/form-select.css | 215 +++------------ .../css/components/form-select.pcss.css | 166 ++--------- .../olivero/css/components/form-text.css | 189 ++----------- .../olivero/css/components/form-text.pcss.css | 100 ++----- .../olivero/css/components/form-textarea.css | 1 + .../css/components/form-textarea.pcss.css | 1 + core/themes/olivero/css/components/form.css | 4 +- .../olivero/css/components/form.pcss.css | 4 +- .../olivero/css/components/messages.css | 14 +- .../olivero/css/components/messages.pcss.css | 12 +- .../olivero/css/components/progress.css | 2 +- core/themes/olivero/images/chevron-down.svg | 4 +- .../images/select-chevron-bg-default.svg | 3 - .../images/select-chevron-bg-error.svg | 3 - .../images/select-chevron-bg-highlight.svg | 3 - 31 files changed, 335 insertions(+), 1619 deletions(-) delete mode 100644 core/themes/olivero/images/select-chevron-bg-default.svg delete mode 100644 core/themes/olivero/images/select-chevron-bg-error.svg delete mode 100644 core/themes/olivero/images/select-chevron-bg-highlight.svg diff --git a/core/themes/olivero/css/base/variables.css b/core/themes/olivero/css/base/variables.css index 54d0cb811d17..6297dd946bdf 100644 --- a/core/themes/olivero/css/base/variables.css +++ b/core/themes/olivero/css/base/variables.css @@ -54,19 +54,11 @@ /* Width of a grid column at various breakpoints */ - /* Layout helpers */ /* Black */ /* Black 1 */ /* Black 2 */ /* Black 3 */ /* Gray Dark */ /* Gray medium */ /* Gray medium 1 */ /* Gray medium 2 */ /* Black 4 */ /* Gray light */ /* Gray light 1 */ /* Gray light 2 */ /* Blue dark */ /* Blue dark 2 */ /* Blue medium */ /* Blue bright */ /* Blue bright 5 */ /* White */ /* Red */ /* Gold */ /* Green */ - - /* Shadows */ - - /* Radius */ - - /* Outlines */ + /* Layout helpers */ /* Black */ /* Black 1 */ /* Black 2 */ /* Black 3 */ /* Gray Dark */ /* Gray Dark 2 */ /* Gray medium */ /* Gray medium 1 */ /* Gray medium 2 */ /* Black 4 */ /* Gray light */ /* Gray light 1 */ /* Gray light 2 */ /* Blue dark */ /* Blue dark 2 */ /* Blue medium */ /* Blue bright */ /* Blue bright 5 */ /* White */ /* Red */ /* Gold */ /* Green */ /* Header */ /* Width of slide out navigation */ /* Border radius */ - - /* Form */ } diff --git a/core/themes/olivero/css/base/variables.pcss.css b/core/themes/olivero/css/base/variables.pcss.css index 42333e66999e..1e3f15cf89c0 100644 --- a/core/themes/olivero/css/base/variables.pcss.css +++ b/core/themes/olivero/css/base/variables.pcss.css @@ -120,12 +120,14 @@ --color--gray-10: #313637; /* Black 2 */ --color--gray-20: #6e7172; /* Black 3 */ --color--gray-25: #5d7585; /* Gray Dark */ + --color--gray-28: #7d919d; /* Gray Dark 2 */ --color--gray-30: #7e96a7; /* Gray medium */ --color--gray-40: #98abb9; /* Gray medium 1 */ --color--gray-45: #afb8be; /* Gray medium 2 */ --color--gray-50: #9ea0a1; /* Black 4 */ --color--gray-70: #d7e1e8; /* Gray light */ --color--gray-80: #e7edf1; /* Gray light 1 */ + --color--gray-90: #f1f4f7; --color--gray-95: #f7f9fa; /* Gray light 2 */ --color--blue-20: #0d77b5; /* Blue dark */ --color--blue-30: #3d92c4; /* Blue dark 2 */ @@ -137,19 +139,6 @@ --color--gold: #fdca40; /* Gold */ --color--green: #3fa21c; /* Green */ - /* Shadows */ - --shadow-focusable: 0 0 0 2px var(--color--white), 0 0 0 4px var(--color--blue-70), var(--shadow-focusable-smooth); - --shadow-focusable-smooth: 0 0 36px rgba(83, 176, 235, 0.25); - - /* Radius */ - --border-radius-base: 2px; - - /* Outlines */ - --outline--thin: 1px solid transparent; - --outline--thick: 6px dashed transparent; - --outline--base: 2px solid var(--color--blue-70); - --outline-offset: 2px; - /* Header */ --header-height-wide-when-fixed: calc(6 * var(--sp)); @@ -157,9 +146,5 @@ --mobile-nav-width: 500px; /* Border radius */ - --border-radius: 2px; - - /* Form */ - --form-element-border-size-base: 2px; - --form-element-border-size-left: 6px; + --border-radius: 3px; } diff --git a/core/themes/olivero/css/components/autocomplete-loading.module.css b/core/themes/olivero/css/components/autocomplete-loading.module.css index b3053ee38c82..343e54a7cc44 100644 --- a/core/themes/olivero/css/components/autocomplete-loading.module.css +++ b/core/themes/olivero/css/components/autocomplete-loading.module.css @@ -22,85 +22,21 @@ html[dir="rtl"].js .form-autocomplete { } html.js .form-autocomplete { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem, - linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat right 1.125rem center } -html.js .form-autocomplete:hover { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem, - linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -html.js .form-autocomplete:focus { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem, - linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - html.js .form-autocomplete.ui-autocomplete-loading { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem, - linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem center; } -html.js .form-autocomplete.ui-autocomplete-loading:hover { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem, - linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -html.js .form-autocomplete.ui-autocomplete-loading:focus { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem, - linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - html.js[dir="rtl"] .form-autocomplete { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem, - linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat left 1.125rem center } -html.js[dir="rtl"] .form-autocomplete:hover { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem, - linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -html.js[dir="rtl"] .form-autocomplete:focus { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem, - linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem, - linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem center; } -html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading:hover { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem, - linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading:focus { - background: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem, - linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - /* IE11 does not animate inline SVG. */ /* rtl:begin:ignore */ @@ -109,58 +45,12 @@ html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading:focus { _:-ms-fullscreen, html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading { - background: - url("../../images/throbber.gif") no-repeat right 1.125rem top 1rem / 1.125rem 1.125rem, - linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa; -} - -/* stylelint-disable-next-line selector-type-no-unknown */ - -_:-ms-fullscreen, -html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:hover { - background: - url("../../images/throbber.gif") no-repeat right 1.125rem top 1rem / 1.125rem 1.125rem, - linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; -} - -/* stylelint-disable-next-line selector-type-no-unknown */ - -_:-ms-fullscreen, -html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:focus { - background: - url("../../images/throbber.gif") no-repeat right 1.125rem top 1rem / 1.125rem 1.125rem, - linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; + background: url("../../images/throbber.gif") no-repeat right 1.125rem center / 1.125rem 1.125rem; } /* stylelint-disable-next-line selector-type-no-unknown */ _:-ms-fullscreen, html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading { - background: - url("../../images/throbber.gif") no-repeat left 1.125rem top 1rem / 1.125rem 1.125rem, - linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa; + background: url("../../images/throbber.gif") no-repeat left 1.125rem center / 1.125rem 1.125rem; } - -/* stylelint-disable-next-line selector-type-no-unknown */ - -_:-ms-fullscreen, -html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:hover { - background: - url("../../images/throbber.gif") no-repeat left 1.125rem top 1rem / 1.125rem 1.125rem, - linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; -} - -/* stylelint-disable-next-line selector-type-no-unknown */ - -_:-ms-fullscreen, -html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:focus { - background: - url("../../images/throbber.gif") no-repeat left 1.125rem top 1rem / 1.125rem 1.125rem, - linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; -} - -/* rtl:end:ignore */ diff --git a/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css index e104934e4bd6..8769ef6626fc 100644 --- a/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css +++ b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css @@ -11,87 +11,22 @@ --autocomplete-throbber-IE-icon-url: url("../../images/throbber.gif"); --autocomplete-throbber-IE-size: 1.125rem 1.125rem; /* 18 18 */ --autocomplete-icon-right-offset: var(--sp1); - --autocomplete-icon-top-offset: calc(var(--sp1) - var(--form-element-border-size-base)); } html.js .form-autocomplete { padding-inline-end: var(--sp3); - background: - var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); - - &:hover { - background: - var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } - - &:focus { - background: - var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } + background: var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center; &.ui-autocomplete-loading { - background: - var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); - - &:hover { - background: - var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } - - &:focus { - background: - var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } + background: var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center; } } html.js[dir="rtl"] .form-autocomplete { - background: - var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); - - &:hover { - background: - var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } - - &:focus { - background: - var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } + background: var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center; &.ui-autocomplete-loading { - background: - var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); - - &:hover { - background: - var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } - - &:focus { - background: - var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } + background: var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center; } } @@ -100,52 +35,11 @@ html.js[dir="rtl"] .form-autocomplete { /* stylelint-disable-next-line selector-type-no-unknown */ _:-ms-fullscreen, html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading { - background: - var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size), - linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); -} - -/* stylelint-disable-next-line selector-type-no-unknown */ -_:-ms-fullscreen, -html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:hover { - background: - var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); -} - -/* stylelint-disable-next-line selector-type-no-unknown */ -_:-ms-fullscreen, -html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:focus { - background: - var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + background: var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size); } /* stylelint-disable-next-line selector-type-no-unknown */ _:-ms-fullscreen, html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading { - background: - var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size), - linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); + background: var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size); } - -/* stylelint-disable-next-line selector-type-no-unknown */ -_:-ms-fullscreen, -html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:hover { - background: - var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); -} - -/* stylelint-disable-next-line selector-type-no-unknown */ -_:-ms-fullscreen, -html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:focus { - background: - var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); -} -/* rtl:end:ignore */ diff --git a/core/themes/olivero/css/components/button.css b/core/themes/olivero/css/components/button.css index 2f7f18fe1558..00bb35b3c08e 100644 --- a/core/themes/olivero/css/components/button.css +++ b/core/themes/olivero/css/components/button.css @@ -26,22 +26,6 @@ margin-left: 1.125rem } -[dir="ltr"] .button { - padding-left: 1.6875rem -} - -[dir="rtl"] .button { - padding-right: 1.6875rem -} - -[dir="ltr"] .button { - padding-right: 1.6875rem -} - -[dir="rtl"] .button { - padding-left: 1.6875rem -} - .button { display: inline-block; height: 3.375rem; @@ -49,17 +33,18 @@ margin-bottom: 1.125rem; padding-top: 1.125rem; padding-bottom: 1.125rem; + padding-left: 1.6875rem; + padding-right: 1.6875rem; cursor: pointer; text-align: center; text-decoration: none; color: #0d77b5; - border: 2px solid #0d77b5; - border-radius: 2px; + border: solid 2px #0d77b5; + border-radius: 0.1875rem; background-color: #fff; font-family: inherit; - font-size: 0.875rem; + font-size: 1.125rem; font-weight: 700; - line-height: 1.125rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -74,15 +59,13 @@ } .button:focus { - outline: 2px solid #53b0eb; + outline: 2px solid #53b0eb; outline-offset: 2px; - box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25); } .button:active { color: #0d77b5; border-color: #0d77b5; - box-shadow: none; } .button:disabled, @@ -102,22 +85,6 @@ @supports (display: inline-flex) { -[dir="ltr"] .button { - padding-left: 1.6875rem - } - -[dir="rtl"] .button { - padding-right: 1.6875rem - } - -[dir="ltr"] .button { - padding-right: 1.6875rem - } - -[dir="rtl"] .button { - padding-left: 1.6875rem - } - .button { display: inline-flex; align-items: center; @@ -125,6 +92,8 @@ /* Top padding accounts for font not being vertically centered within line-height. */ padding-top: 1px; padding-bottom: 0; + padding-left: 1.6875rem; + padding-right: 1.6875rem; line-height: 1.125rem } } @@ -152,26 +121,13 @@ margin-bottom: 0; } -[dir="ltr"] .button--small { - padding-left: 1.6875rem -} - -[dir="rtl"] .button--small { - padding-right: 1.6875rem -} - -[dir="ltr"] .button--small { - padding-right: 1.6875rem -} - -[dir="rtl"] .button--small { - padding-left: 1.6875rem -} - .button--small { height: 2.8125rem; padding-top: 0.84375rem; padding-bottom: 0.84375rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + font-size: 1rem; } .button--primary { diff --git a/core/themes/olivero/css/components/button.pcss.css b/core/themes/olivero/css/components/button.pcss.css index 718d019e9979..581b168144c0 100644 --- a/core/themes/olivero/css/components/button.pcss.css +++ b/core/themes/olivero/css/components/button.pcss.css @@ -5,10 +5,6 @@ @import "../base/variables.pcss.css"; -:root { - --button-border-width: var(--form-element-border-size-base); -} - .button { display: inline-block; height: var(--sp3); @@ -16,19 +12,17 @@ margin-inline-start: 0; margin-inline-end: var(--sp1); padding-block: calc((var(--sp3) - var(--line-height-s)) / 2); - padding-inline-start: var(--sp1-5); - padding-inline-end: var(--sp1-5); + padding-inline: var(--sp1-5); cursor: pointer; text-align: center; text-decoration: none; color: var(--color--blue-20); - border: var(--button-border-width) solid var(--color--blue-20); - border-radius: var(--border-radius-base); + border: solid 2px var(--color--blue-20); + border-radius: var(--border-radius); background-color: var(--color--white); font-family: inherit; - font-size: var(--font-size-s); + font-size: var(--font-size-l); font-weight: 700; - line-height: var(--line-height-s); appearance: none; -webkit-font-smoothing: antialiased; @@ -40,15 +34,13 @@ } &:focus { - outline: var(--outline--base); - outline-offset: var(--outline-offset); - box-shadow: var(--shadow-focusable); + outline: 2px solid var(--color--blue-70); + outline-offset: 2px; } &:active { color: var(--color--blue-20); border-color: var(--color--blue-20); - box-shadow: none; } &:disabled, @@ -68,8 +60,7 @@ /* Top padding accounts for font not being vertically centered within line-height. */ padding-block: 1px 0; - padding-inline-start: var(--sp1-5); - padding-inline-end: var(--sp1-5); + padding-inline: var(--sp1-5); line-height: var(--line-height-s); } } @@ -84,8 +75,8 @@ .button--small { height: var(--sp2-5); padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2); - padding-inline-start: var(--sp1-5); - padding-inline-end: var(--sp1-5); + padding-inline: var(--sp); + font-size: var(--font-size-base); } .button--primary { diff --git a/core/themes/olivero/css/components/cke-dialog.css b/core/themes/olivero/css/components/cke-dialog.css index 72a5e61de38c..0165559ca46d 100644 --- a/core/themes/olivero/css/components/cke-dialog.css +++ b/core/themes/olivero/css/components/cke-dialog.css @@ -4,258 +4,18 @@ * https://www.drupal.org/node/3084859 * @preserve */ + /** * @file * CKE Dialogs. */ -/** cspell:ignore acke */ -[dir="ltr"] .cke_dialog td,[dir="ltr"] - .cke_dialog th { - padding-left: 0.28125rem; + +select.cke_dialog_ui_input_select { + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto } -[dir="rtl"] .cke_dialog td,[dir="rtl"] - .cke_dialog th { - padding-right: 0.28125rem; -} -[dir="ltr"] .cke_dialog td,[dir="ltr"] - .cke_dialog th { - padding-right: 0.28125rem; -} -[dir="rtl"] .cke_dialog td,[dir="rtl"] - .cke_dialog th { - padding-left: 0.28125rem; -} -.cke_dialog td, - .cke_dialog th { - padding-top: 0.28125rem; - padding-bottom: 0.28125rem; + +select.cke_dialog_ui_input_select::-ms-expand { + display: block; } -[dir="ltr"] .cke_dialog .cke_dialog_ui_hbox_last { - padding-left: 0; -} -[dir="rtl"] .cke_dialog .cke_dialog_ui_hbox_last { - padding-right: 0; -} -[dir="ltr"] .cke_dialog .cke_dialog_ui_hbox_last { - padding-right: 0; -} -[dir="rtl"] .cke_dialog .cke_dialog_ui_hbox_last { - padding-left: 0; -} -.cke_dialog .cke_dialog_ui_hbox_last { - padding-top: 1px; - padding-bottom: 0; - } -.cke_dialog .cke_dialog_contents_body .cke_dialog_ui_text, - .cke_dialog .cke_dialog_contents_body .cke_dialog_ui_select, - .cke_dialog .cke_dialog_contents_body .cke_dialog_ui_hbox_last > a.cke_dialog_ui_button { - margin-top: 0.5625rem; - } -.cke_dialog .cke_dialog_body label + .cke_dialog_ui_labeled_content { - width: 100% !important; /* Override inline width. */ - } -[dir="ltr"] .cke_dialog input.cke_dialog_ui_input_text,[dir="ltr"] - .cke_dialog input.cke_dialog_ui_input_password,[dir="ltr"] - .cke_dialog input.cke_dialog_ui_input_tel,[dir="ltr"] - .cke_dialog textarea.cke_dialog_ui_input_textarea { - padding-left: 1.5rem; -} -[dir="rtl"] .cke_dialog input.cke_dialog_ui_input_text,[dir="rtl"] - .cke_dialog input.cke_dialog_ui_input_password,[dir="rtl"] - .cke_dialog input.cke_dialog_ui_input_tel,[dir="rtl"] - .cke_dialog textarea.cke_dialog_ui_input_textarea { - padding-right: 1.5rem; -} -[dir="ltr"] .cke_dialog input.cke_dialog_ui_input_text,[dir="ltr"] - .cke_dialog input.cke_dialog_ui_input_password,[dir="ltr"] - .cke_dialog input.cke_dialog_ui_input_tel,[dir="ltr"] - .cke_dialog textarea.cke_dialog_ui_input_textarea { - padding-right: 1.25rem; -} -[dir="rtl"] .cke_dialog input.cke_dialog_ui_input_text,[dir="rtl"] - .cke_dialog input.cke_dialog_ui_input_password,[dir="rtl"] - .cke_dialog input.cke_dialog_ui_input_tel,[dir="rtl"] - .cke_dialog textarea.cke_dialog_ui_input_textarea { - padding-left: 1.25rem; -} -.cke_dialog input.cke_dialog_ui_input_text, - .cke_dialog input.cke_dialog_ui_input_password, - .cke_dialog input.cke_dialog_ui_input_tel, - .cke_dialog textarea.cke_dialog_ui_input_textarea { - padding-top: 0.8125rem; - padding-bottom: 0.8125rem; - color: #313637; - border-width: 2px 0 - } -.cke_dialog input.cke_dialog_ui_input_text:hover, .cke_dialog input.cke_dialog_ui_input_password:hover, .cke_dialog input.cke_dialog_ui_input_tel:hover, .cke_dialog textarea.cke_dialog_ui_input_textarea:hover { - border-width: 2px 0; - } -.cke_dialog .cke_dialog_ui_input_select { - display: block - } -[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - margin-left: 0; -} -[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - margin-right: 0; -} -[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - margin-right: 0; -} -[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - margin-left: 0; -} -[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - padding-left: 1.21875rem; -} -[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - padding-right: 1.21875rem; -} -[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - padding-right: 3.65625rem; -} -[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - padding-left: 3.65625rem; -} -.cke_dialog .cke_dialog_ui_input_select select, - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - width: 100% !important; - height: 2.8125rem; - margin-top: 0; - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; - color: #313637; - border: 1px solid transparent; - border-width: 2px 0; - border-style: solid; - border-color: transparent; - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: 2px; /* LTR */ - border-bottom-right-radius: 2px; /* LTR */ - border-bottom-left-radius: 0; /* LTR */ - outline: 1px solid transparent; - background-color: #f7f9fa; - line-height: 2.8125rem - } -.cke_dialog .cke_dialog_ui_input_select select:hover, - .cke_dialog .cke_dialog_ui_input_select select:focus, - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:hover, - .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:focus { - border-color: #53b0eb; - background-image: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e"), - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%2353b0eb' d='M0 0h54v54H0z'/%3e%3c/svg%3e"), - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%2353b0eb' d='M0 0h54v54H0z'/%3e%3c/svg%3e"); - } -.cke_dialog .cke_dialog_ui_input_select select:focus, .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:focus { - outline: 6px dashed transparent; - } -[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons { - margin-left: 0; -} -[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons { - margin-right: 0; -} -[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons { - margin-right: 0.5625rem; -} -[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons { - margin-left: 0.5625rem; -} -.cke_dialog .cke_dialog_footer_buttons { - margin-top: 0.5625rem; - margin-bottom: 0.5625rem - } -[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { - padding-left: 0.28125rem; -} -[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { - padding-right: 0.28125rem; -} -[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { - padding-right: 0.28125rem; -} -[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { - padding-left: 0.28125rem; -} -.cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { - padding-top: 0.28125rem; - padding-bottom: 0.28125rem; - } -[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons a,[dir="ltr"] - .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { - margin-left: 0; -} -[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons a,[dir="rtl"] - .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { - margin-right: 0; -} -[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons a,[dir="ltr"] - .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { - margin-right: 0.28125rem; -} -[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons a,[dir="rtl"] - .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { - margin-left: 0.28125rem; -} -.cke_dialog .cke_dialog_footer_buttons a, - .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { - display: inline-block; - margin-top: 0.28125rem; - margin-bottom: 0.28125rem; - cursor: pointer; - text-align: center; - text-decoration: none; - color: #0d77b5; - border: 2px solid #0d77b5; - border-radius: 2px; - background-color: #fff; - font-family: inherit; - font-size: 0.875rem; - font-weight: 700; - line-height: 1.125rem; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-font-smoothing: antialiased - } -.cke_dialog .cke_dialog_footer_buttons a:hover, - .cke_dialog .cke_dialog_footer_buttons a:focus, - .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:hover, - .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:focus { - text-decoration: none; - color: #2494db; - border-color: #2494db; - } -.cke_dialog .cke_dialog_footer_buttons a:focus, .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:focus { - outline: 2px solid #53b0eb; - outline-offset: 2px; - box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25); - } -.cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok, .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok { - color: #fff; - background-color: #0d77b5 - } -.cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:hover, - .cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus, - .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok:hover, - .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok:focus { - color: #fff; - background-color: #2494db; - } -[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select, - [dir="rtl"] .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - border-top-left-radius: 2px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 2px; - } diff --git a/core/themes/olivero/css/components/cke-dialog.pcss.css b/core/themes/olivero/css/components/cke-dialog.pcss.css index e9382e14a92f..650dd71bbc9e 100644 --- a/core/themes/olivero/css/components/cke-dialog.pcss.css +++ b/core/themes/olivero/css/components/cke-dialog.pcss.css @@ -2,164 +2,11 @@ * @file * CKE Dialogs. */ -/** cspell:ignore acke */ -@import "../base/variables.pcss.css"; +select.cke_dialog_ui_input_select { + appearance: auto; -:root { - --form-element-select-icon: url("../../images/chevron-down.svg"); - --form-element-select-bg: url("../../images/select-chevron-bg-default.svg"); - --form-element-select-bg--highlight: url("../../images/select-chevron-bg-highlight.svg"); -} - -.cke_dialog { - & td, - & th { - padding-block: var(--sp0-25); - padding-inline-start: var(--sp0-25); - padding-inline-end: var(--sp0-25); - } - - & .cke_dialog_ui_hbox_last { - padding-block-start: 1px; - padding-block-end: 0; - padding-inline-start: 0; - padding-inline-end: 0; - } - - & .cke_dialog_contents_body .cke_dialog_ui_text, - & .cke_dialog_contents_body .cke_dialog_ui_select, - & .cke_dialog_contents_body .cke_dialog_ui_hbox_last > a.cke_dialog_ui_button { - margin-block-start: var(--sp0-5); - } - - & .cke_dialog_body label + .cke_dialog_ui_labeled_content { - width: 100% !important; /* Override inline width. */ - } - - & input.cke_dialog_ui_input_text, - & input.cke_dialog_ui_input_password, - & input.cke_dialog_ui_input_tel, - & textarea.cke_dialog_ui_input_textarea { - padding-block: calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2); - padding-inline-start: calc(var(--sp1) + var(--form-element-border-size-left)); - padding-inline-end: calc(var(--sp1) + var(--form-element-border-size-base)); - color: var(--color--gray-10); - border-width: var(--form-element-border-size-base) 0; - - &:hover { - border-width: var(--form-element-border-size-base) 0; - } - } - - & .cke_dialog_ui_input_select { + &::-ms-expand { display: block; - - & select, - & .cke_dialog_ui_input_select { - width: 100% !important; - height: var(--sp2-5); - margin-block: 0; - margin-inline-start: 0; - margin-inline-end: 0; - padding-block: 0; - padding-inline-start: calc(var(--sp0-75) + var(--form-element-border-size-left)); - padding-inline-end: calc(var(--sp2-5) + var(--sp0-75)); - color: var(--color--gray-10); - border: 1px solid transparent; - border-width: var(--form-element-border-size-base) 0; - border-style: solid; - border-color: transparent; - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-left-radius: 0; /* LTR */ - outline: var(--outline--thin); - background-color: var(--color--gray-95); - line-height: var(--sp2-5); - - &:hover, - &:focus { - border-color: var(--color--blue-70); - background-image: - var(--form-element-select-icon), - var(--form-element-select-bg--highlight), - var(--form-element-select-bg--highlight); - } - - &:focus { - outline: var(--outline--thick); - } - } - } - - & .cke_dialog_footer_buttons { - margin-block-start: var(--sp0-5); - margin-block-end: var(--sp0-5); - margin-inline-start: 0; - margin-inline-end: var(--sp0-5); - - & .cke_dialog_ui_hbox_last { - padding-block: var(--sp0-25); - padding-inline-start: var(--sp0-25); - padding-inline-end: var(--sp0-25); - } - - & a, - & .acke_dialog_ui_button { - display: inline-block; - margin-block: var(--sp0-25); - margin-inline-start: 0; - margin-inline-end: var(--sp0-25); - cursor: pointer; - text-align: center; - text-decoration: none; - color: var(--color--blue-20); - border: var(--form-element-border-size-base) solid var(--color--blue-20); - border-radius: var(--border-radius-base); - background-color: var(--color--white); - font-family: inherit; - font-size: var(--font-size-s); - font-weight: 700; - line-height: var(--line-height-s); - appearance: none; - -webkit-font-smoothing: antialiased; - - &:hover, - &:focus { - text-decoration: none; - color: var(--color--blue-50); - border-color: var(--color--blue-50); - } - - &:focus { - outline: var(--outline--base); - outline-offset: var(--outline-offset); - box-shadow: var(--shadow-focusable); - } - - &.cke_dialog_ui_button_ok { - color: var(--color--white); - background-color: var(--color--blue-20); - - &:hover, - &:focus { - color: var(--color--white); - background-color: var(--color--blue-50); - } - } - } - } -} - -[dir="rtl"] .cke_dialog { - & .cke_dialog_ui_input_select { - & select, - & .cke_dialog_ui_input_select { - border-top-left-radius: var(--border-radius-base); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: var(--border-radius-base); - } } } diff --git a/core/themes/olivero/css/components/details.css b/core/themes/olivero/css/components/details.css index dba80397a14f..298d0fa9d66e 100644 --- a/core/themes/olivero/css/components/details.css +++ b/core/themes/olivero/css/components/details.css @@ -16,7 +16,7 @@ margin-bottom: 1.125rem; color: inherit; border: 1px solid #e7edf1; - border-radius: 2px; + border-radius: 0.1875rem; box-shadow: 0 1px 4px #d7e1e8; } @@ -98,7 +98,7 @@ content: ""; pointer-events: none; opacity: 0; - border-radius: 2px; + border-radius: 0.1875rem; box-shadow: inset 0 0 0 2px #53b0eb; } diff --git a/core/themes/olivero/css/components/details.pcss.css b/core/themes/olivero/css/components/details.pcss.css index 1ebc06cf6f8c..ee096ecf519e 100644 --- a/core/themes/olivero/css/components/details.pcss.css +++ b/core/themes/olivero/css/components/details.pcss.css @@ -15,7 +15,7 @@ margin-block: var(--sp1); color: inherit; border: var(--details-border-width) solid var(--color--gray-80); - border-radius: var(--border-radius-base); + border-radius: var(--border-radius); box-shadow: 0 1px 4px var(--color--gray-70); } @@ -67,7 +67,7 @@ content: ""; pointer-events: none; opacity: 0; - border-radius: var(--border-radius-base); + border-radius: var(--border-radius); box-shadow: inset 0 0 0 2px var(--color--blue-70); } diff --git a/core/themes/olivero/css/components/dropbutton.css b/core/themes/olivero/css/components/dropbutton.css index 4b8306b878e3..dee758e29a48 100644 --- a/core/themes/olivero/css/components/dropbutton.css +++ b/core/themes/olivero/css/components/dropbutton.css @@ -10,19 +10,14 @@ * Drop button specific styles. */ -.dropbutton { - border-top-left-radius: 2px; /* LTR */ - border-top-right-radius: 0; /* LTR */ - border-bottom-right-radius: 0; /* LTR */ - border-bottom-left-radius: 2px; /* LTR */ - background-color: #0d77b5; +.dropbutton-widget { + overflow: hidden; + border: solid 1px #fff; + border-radius: 0.1875rem; } -[dir="rtl"] .dropbutton { - border-top-left-radius: 0; - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 0; +.dropbutton { + background-color: #0d77b5; } .js .dropbutton-widget .dropbutton { @@ -54,11 +49,7 @@ padding-top: 0.28125rem; padding-bottom: 0.28125rem; text-decoration: none; - color: #fff; - border-top-left-radius: 2px; /* LTR */ - border-top-right-radius: 0; /* LTR */ - border-bottom-right-radius: 0; /* LTR */ - border-bottom-left-radius: 2px /* LTR */ + color: #fff } .dropbutton-action a:hover { @@ -66,21 +57,17 @@ } .dropbutton-action a:focus { - outline: 2px solid #53b0eb; + outline: 2px solid #53b0eb; outline-offset: 2px; background-color: #2494db; - box-shadow: var(--shadow-focusable-with-outline); } -[dir="rtl"] .dropbutton-action a { - border-top-left-radius: 0; - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 0; +.open .dropbutton-action:not(:last-child) { + border-bottom: solid 1px #fff; } .js .dropbutton-action a:focus { - outline: 2px solid #53b0eb; + outline: 2px solid #53b0eb; } [dir="ltr"] .dropbutton-toggle { @@ -92,10 +79,6 @@ } .dropbutton-toggle { - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: 2px; /* LTR */ - border-bottom-right-radius: 2px; /* LTR */ - border-bottom-left-radius: 0; /* LTR */ background-color: #0d77b5 } @@ -103,32 +86,10 @@ background-color: #2494db; } -.dropbutton-toggle button { - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: 2px; /* LTR */ - border-bottom-right-radius: 2px; /* LTR */ - border-bottom-left-radius: 0 /* LTR */ - } - .dropbutton-toggle button:focus { - outline: 2px solid #53b0eb; - outline-offset: 2px; - background-color: #2494db; - box-shadow: var(--shadow-focusable-with-outline); - } - -[dir="rtl"] .dropbutton-toggle { - border-top-left-radius: 2px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 2px -} - -[dir="rtl"] .dropbutton-toggle button { - border-top-left-radius: 2px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 2px; + outline: solid 2px #53b0eb; + outline-offset: 2px; + background-color: #2494db; } .dropbutton-arrow { diff --git a/core/themes/olivero/css/components/dropbutton.pcss.css b/core/themes/olivero/css/components/dropbutton.pcss.css index 2ed13a7ee469..32a70560df4d 100644 --- a/core/themes/olivero/css/components/dropbutton.pcss.css +++ b/core/themes/olivero/css/components/dropbutton.pcss.css @@ -5,19 +5,14 @@ @import "../base/variables.pcss.css"; -.dropbutton { - border-top-left-radius: var(--border-radius-base); /* LTR */ - border-top-right-radius: 0; /* LTR */ - border-bottom-right-radius: 0; /* LTR */ - border-bottom-left-radius: var(--border-radius-base); /* LTR */ - background-color: var(--color--blue-20); +.dropbutton-widget { + overflow: hidden; + border: solid 1px var(--color--white); + border-radius: var(--border-radius); } -[dir="rtl"] .dropbutton { - border-top-left-radius: 0; - border-top-right-radius: var(--border-radius-base); - border-bottom-right-radius: var(--border-radius-base); - border-bottom-left-radius: 0; +.dropbutton { + background-color: var(--color--blue-20); } .js .dropbutton-widget .dropbutton { @@ -34,73 +29,39 @@ padding-inline-end: var(--sp1); text-decoration: none; color: var(--color--white); - border-top-left-radius: var(--border-radius); /* LTR */ - border-top-right-radius: 0; /* LTR */ - border-bottom-right-radius: 0; /* LTR */ - border-bottom-left-radius: var(--border-radius); /* LTR */ &:hover { background-color: var(--color--blue-50); } &:focus { - outline: var(--outline--base); - outline-offset: var(--outline-offset); + outline: 2px solid var(--color--blue-70); + outline-offset: 2px; background-color: var(--color--blue-50); - box-shadow: var(--shadow-focusable-with-outline); } } } -[dir="rtl"] .dropbutton-action a { - border-top-left-radius: 0; - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - border-bottom-left-radius: 0; +.open .dropbutton-action:not(:last-child) { + border-block-end: solid 1px var(--color--white); } .js .dropbutton-action a:focus { - outline: var(--outline--base); + outline: 2px solid var(--color--blue-70); } .dropbutton-toggle { border-inline-start: 1px solid var(--color--white); - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-left-radius: 0; /* LTR */ background-color: var(--color--blue-20); &:hover { background-color: var(--color--blue-50); } - & button { - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-left-radius: 0; /* LTR */ - - &:focus { - outline: var(--outline--base); - outline-offset: var(--outline-offset); - background-color: var(--color--blue-50); - box-shadow: var(--shadow-focusable-with-outline); - } - } -} - -[dir="rtl"] .dropbutton-toggle { - border-top-left-radius: var(--border-radius-base); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: var(--border-radius-base); - - & button { - border-top-left-radius: var(--border-radius-base); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: var(--border-radius-base); + & button:focus { + outline: solid 2px var(--color--blue-70); + outline-offset: 2px; + background-color: var(--color--blue-50); } } diff --git a/core/themes/olivero/css/components/fieldset.css b/core/themes/olivero/css/components/fieldset.css index f486755228c4..ce2883e86366 100644 --- a/core/themes/olivero/css/components/fieldset.css +++ b/core/themes/olivero/css/components/fieldset.css @@ -49,8 +49,8 @@ padding-top: 0; padding-bottom: 0; color: inherit; - border: 2px solid #7e96a7; - border-radius: 2px; + border: solid 2px #7e96a7; + border-radius: 0.1875rem; background-color: #fff; } @@ -72,24 +72,22 @@ _:-ms-fullscreen, width: 100%; } -[dir="ltr"] .fieldset__legend { - float: left; -} - -[dir="rtl"] .fieldset__legend { - float: right; -} - .fieldset__legend { + float: left; /* Prevent sticking out of top of fieldset. */ width: 100%; - margin-bottom: 1.125rem; color: inherit; + border-top-left-radius: 3px; + border-top-right-radius: 3px; background-color: #7e96a7; font-size: 1.125rem; font-weight: 700; line-height: 1.6875rem } +.fieldset__legend + * { + clear: left; + } + .fieldset__legend .fieldset__label.form-required:after { background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); } @@ -177,31 +175,19 @@ _:-ms-fullscreen, background-position: left top; } -[dir="ltr"] .fieldset__legend--visible ~ .fieldset__wrapper { - padding-left: 1.125rem; +.fieldset__wrapper { + padding: 1.125rem; } -[dir="rtl"] .fieldset__legend--visible ~ .fieldset__wrapper { - padding-right: 1.125rem; -} - -[dir="ltr"] .fieldset__legend--visible ~ .fieldset__wrapper { - padding-right: 1.125rem; -} - -[dir="rtl"] .fieldset__legend--visible ~ .fieldset__wrapper { - padding-left: 1.125rem; -} - -.fieldset__legend--visible ~ .fieldset__wrapper { +.fieldset__legend--invisible ~ .fieldset__wrapper { margin-top: 0; - padding-top: 1.125rem; - padding-bottom: 1.125rem; + padding: 0; } .fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { - border: 2px solid #7e96a7; - border-radius: 2px; + border: solid 2px #7e96a7; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; } [dir="ltr"] .fieldset__wrapper--group { diff --git a/core/themes/olivero/css/components/fieldset.pcss.css b/core/themes/olivero/css/components/fieldset.pcss.css index 20a287c8b2cb..be0bcb62bc17 100644 --- a/core/themes/olivero/css/components/fieldset.pcss.css +++ b/core/themes/olivero/css/components/fieldset.pcss.css @@ -14,8 +14,8 @@ padding-inline-start: 0; padding-inline-end: 0; color: inherit; - border: var(--form-element-border-size-base) solid var(--color--gray-30); - border-radius: var(--border-radius-base); + border: solid 2px var(--color--gray-30); + border-radius: var(--border-radius); background-color: var(--color--white); } @@ -37,15 +37,20 @@ _:-ms-fullscreen, } .fieldset__legend { - float: inline-start; + float: left; /* Prevent sticking out of top of fieldset. */ width: 100%; - margin-block-end: var(--sp1); color: inherit; + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); background-color: var(--color--gray-30); font-size: var(--font-size-l); font-weight: 700; line-height: var(--line-height-base); + & + * { + clear: left; + } + & .fieldset__label { &.form-required { &:after { @@ -111,16 +116,19 @@ _:-ms-fullscreen, background-position: left top; } -.fieldset__legend--visible ~ .fieldset__wrapper { +.fieldset__wrapper { + padding: var(--sp); +} + +.fieldset__legend--invisible ~ .fieldset__wrapper { margin-block-start: 0; - padding-block: var(--sp); - padding-inline-start: var(--sp); - padding-inline-end: var(--sp); + padding: 0; } .fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { - border: var(--form-element-border-size-base) solid var(--color--gray-30); - border-radius: var(--border-radius-base); + border: solid 2px var(--color--gray-30); + border-bottom-right-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); } .fieldset__wrapper--group { diff --git a/core/themes/olivero/css/components/form-boolean.css b/core/themes/olivero/css/components/form-boolean.css index 5a0b394ff5be..a8dcaf6b102e 100644 --- a/core/themes/olivero/css/components/form-boolean.css +++ b/core/themes/olivero/css/components/form-boolean.css @@ -15,10 +15,11 @@ input[type="radio"] { display: inline-block; width: 1.6875rem; height: 1.6875rem; - vertical-align: text-bottom; - border: 2px solid #7e96a7; - border-radius: 2px; - background-color: #f7f9fa; + margin: 0; + vertical-align: middle; + border: 1px solid #7e96a7; + border-radius: 0.1875rem; + background-color: #fff; background-repeat: no-repeat; background-position: 50% 50%; background-size: 1.125rem 1.125rem; @@ -28,14 +29,17 @@ input[type="radio"] { } input[type="checkbox"]:focus, input[type="radio"]:focus { - outline: 6px dashed transparent; - box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25) + border: solid 2px #2494db; + outline: solid 2px #2494db } @supports (outline-style: double) { input[type="checkbox"]:focus, input[type="radio"]:focus { - outline-style: double + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px } } @@ -44,13 +48,30 @@ input[type="checkbox"]:hover, input[type="radio"]:hover { } input[type="checkbox"][disabled], input[type="radio"][disabled] { - opacity: 0.3; + background-color: #f1f4f7 + } + +input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover { + border-color: #7e96a7; + } + +input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked { + border-width: 1px; + } + +input[type="checkbox"]:checked, input[type="radio"]:checked { + border-width: 2px; } input[type="checkbox"].error, input[type="radio"].error { - border-color: #e33f1e; + border: solid 2px #e33f1e } +input[type="checkbox"].error:focus, input[type="radio"].error:focus { + outline-color: #e33f1e; + outline-offset: -2px; + } + input[type="checkbox"], input[type="radio"] { @@ -61,8 +82,20 @@ input[type="checkbox"].error::-ms-check, input[type="radio"].error::-ms-check { border: 1px solid #e33f1e; } +[dir="ltr"] input[type="checkbox"] + label,[dir="ltr"] input[type="radio"] + label { + padding-left: 0.5625rem +} + +[dir="rtl"] input[type="checkbox"] + label,[dir="rtl"] input[type="radio"] + label { + padding-right: 0.5625rem +} + +input[type="checkbox"] + label, input[type="radio"] + label { + display: inline-block; + } + input[type="checkbox"]:checked { - background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232494DB' d='M14.8232 0.176777C14.9209 0.0791457 15.0791 0.0791455 15.1768 0.176777L16.9445 1.94454C17.0422 2.04217 17.0422 2.20047 16.9445 2.2981L6.23744 13.0052C6.13981 13.1028 5.98151 13.1028 5.88388 13.0052L0.176777 7.2981C0.0791456 7.20047 0.0791456 7.04218 0.176777 6.94454L1.94454 5.17678C2.04217 5.07915 2.20047 5.07915 2.2981 5.17678L5.88388 8.76256C5.98151 8.86019 6.13981 8.86019 6.23744 8.76256L14.8232 0.176777Z'/%3E%3C/svg%3E%0A"); + background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E"); } input[type="radio"] { @@ -71,84 +104,22 @@ input[type="radio"] { input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A"); - background-size: 1.0625rem 1.0625rem; + background-size: 1.0625rem; } -[dir="ltr"] .form-type-boolean { - margin-left: 2.25rem -} +input[type="radio"]:focus { + border-width: 2px; + border-color: #2494db; + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px #2494db; + } -[dir="rtl"] .form-type-boolean { - margin-right: 2.25rem -} +input[type="radio"].error:focus { + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px #e33f1e; + } .form-type-boolean { - clear: both -} - -[dir="ltr"] .form-type-boolean input[type="checkbox"],[dir="ltr"] - .form-type-boolean input[type="radio"] { - float: left -} - -[dir="rtl"] .form-type-boolean input[type="checkbox"],[dir="rtl"] - .form-type-boolean input[type="radio"] { - float: right -} - -[dir="ltr"] .form-type-boolean input[type="checkbox"],[dir="ltr"] - .form-type-boolean input[type="radio"] { - margin-left: -2.25rem -} - -[dir="rtl"] .form-type-boolean input[type="checkbox"],[dir="rtl"] - .form-type-boolean input[type="radio"] { - margin-right: -2.25rem -} - -.form-type-boolean input[type="checkbox"], - .form-type-boolean input[type="radio"] { - position: relative; - top: 0.5625rem; - transform: translateY(-50%); - } - -[dir="ltr"] .form-type-boolean.form-no-label { - margin-left: 0 -} - -[dir="rtl"] .form-type-boolean.form-no-label { - margin-right: 0 -} - -.form-type-boolean.form-no-label input[type="checkbox"], - .form-type-boolean.form-no-label input[type="radio"] { - position: static; - float: none; - margin-left: 0; - margin-right: 0; - transform: none; - } - -[dir="ltr"] .form-type-boolean .form-item__description,[dir="ltr"] - .form-type-boolean .form-item--error-message { - margin-left: -2.25rem -} - -[dir="rtl"] .form-type-boolean .form-item__description,[dir="rtl"] - .form-type-boolean .form-item--error-message { - margin-right: -2.25rem -} - -.form-boolean-group .form-type-boolean { margin-top: 1.125rem; margin-bottom: 1.125rem; } - -[dir="ltr"] .container-inline .form-boolean-group .form-type-boolean:not(:last-child) { - margin-right: 1.125rem -} - -[dir="rtl"] .container-inline .form-boolean-group .form-type-boolean:not(:last-child) { - margin-left: 1.125rem -} diff --git a/core/themes/olivero/css/components/form-boolean.pcss.css b/core/themes/olivero/css/components/form-boolean.pcss.css index ef8b96180d15..47ce727a1536 100644 --- a/core/themes/olivero/css/components/form-boolean.pcss.css +++ b/core/themes/olivero/css/components/form-boolean.pcss.css @@ -5,30 +5,30 @@ @import "../base/variables.pcss.css"; -:root { - --form-boolean-radio-icon-size: 17px; -} - input[type="checkbox"], input[type="radio"] { display: inline-block; width: var(--sp1-5); height: var(--sp1-5); - vertical-align: text-bottom; - border: var(--form-element-border-size-base) solid var(--color--gray-30); - border-radius: var(--border-radius-base); - background-color: var(--color--gray-95); + margin: 0; + vertical-align: middle; + border: 1px solid var(--color--gray-30); + border-radius: 3px; + background-color: var(--color--white); background-repeat: no-repeat; background-position: 50% 50%; background-size: var(--sp1) var(--sp1); appearance: none; &:focus { - outline: var(--outline--thick); - box-shadow: var(--shadow-focusable); + border: solid 2px var(--color--blue-50); + outline: solid 2px var(--color--blue-50); @supports (outline-style: double) { + border-width: 1px; + outline-width: 6px; outline-style: double; + outline-offset: -1px; } } @@ -37,22 +37,44 @@ input[type="radio"] { } &[disabled] { - opacity: 0.3; + background-color: var(--color--gray-90); + + &:hover { + border-color: var(--color--gray-30); + } + + &:checked { + border-width: 1px; + } + } + + &:checked { + border-width: 2px; } &.error { - border-color: var(--color--red); + border: solid 2px var(--color--red); + + &:focus { + outline-color: var(--color--red); + outline-offset: -2px; + } } /* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */ &.error::-ms-check { border: 1px solid var(--color--red); } + + & + label { + display: inline-block; + padding-inline-start: var(--sp0-5); + } } input[type="checkbox"] { &:checked { - background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232494DB' d='M14.8232 0.176777C14.9209 0.0791457 15.0791 0.0791455 15.1768 0.176777L16.9445 1.94454C17.0422 2.04217 17.0422 2.20047 16.9445 2.2981L6.23744 13.0052C6.13981 13.1028 5.98151 13.1028 5.88388 13.0052L0.176777 7.2981C0.0791456 7.20047 0.0791456 7.04218 0.176777 6.94454L1.94454 5.17678C2.04217 5.07915 2.20047 5.07915 2.2981 5.17678L5.88388 8.76256C5.98151 8.86019 6.13981 8.86019 6.23744 8.76256L14.8232 0.176777Z'/%3E%3C/svg%3E%0A"); + background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E"); } } @@ -61,45 +83,22 @@ input[type="radio"] { &:checked { background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A"); - background-size: var(--form-boolean-radio-icon-size) var(--form-boolean-radio-icon-size); + background-size: 17px; + } + + &:focus { + border-width: 2px; + border-color: var(--color--blue-50); + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--blue-50); + } + + &.error:focus { + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); } } .form-type-boolean { - clear: both; - margin-inline-start: var(--sp2); - - & input[type="checkbox"], - & input[type="radio"] { - position: relative; - top: var(--sp0-5); - float: inline-start; - margin-inline-start: calc(var(--sp2) * -1); - transform: translateY(-50%); - } - - &.form-no-label { - margin-inline-start: 0; - - & input[type="checkbox"], - & input[type="radio"] { - position: static; - float: none; - margin-inline: 0; - transform: none; - } - } - - & .form-item__description, - & .form-item--error-message { - margin-inline-start: calc(var(--sp2) * -1); - } -} - -.form-boolean-group .form-type-boolean { margin-block: var(--sp1); } - -.container-inline .form-boolean-group .form-type-boolean:not(:last-child) { - margin-inline-end: var(--sp); -} diff --git a/core/themes/olivero/css/components/form-select.css b/core/themes/olivero/css/components/form-select.css index 96a3fa894956..0fa278ff3a6c 100644 --- a/core/themes/olivero/css/components/form-select.css +++ b/core/themes/olivero/css/components/form-select.css @@ -11,19 +11,19 @@ */ [dir="ltr"] select { - padding-left: 1.5rem + padding-left: 1.125rem } [dir="rtl"] select { - padding-right: 1.5rem + padding-right: 1.125rem } [dir="ltr"] select { - padding-right: 4.5rem + padding-right: 3.375rem } [dir="rtl"] select { - padding-left: 4.5rem + padding-left: 3.375rem } select { @@ -31,63 +31,35 @@ select { height: 3.375rem; padding-top: 0; padding-bottom: 0; - color: #313637; - border-width: 2px 0; - border-style: solid; - border-color: transparent; - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: 2px; /* LTR */ - border-bottom-right-radius: 2px; /* LTR */ - border-bottom-left-radius: 0; /* LTR */ - outline: 1px solid transparent; - /* - Couple of notes here: - - The select element is styled with external images so it's visible in Firefox in Windows high contrast - mode. There's a number of browser bugs that limit what we can do including not linear-gradients negating the - entire ruleset. To work around this, we split off the various backgrounds into separate SVG images, and - call them as appropriate. We cannot use the background CSS property because we split off the background-color. - We also cannot use a left border because it angles at the end to blend in with the top and bottom - transparent borders, so we re-use the background SVG image for this. - - @todo - look at inlining some of the SVGs with an eye on CSS filesize. - */ - background-color: #f7f9fa; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%237e96a7' d='M0 0h54v54H0z'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%237e96a7' d='M0 0h54v54H0z'/%3e%3c/svg%3e"); + color: #0d1214; + border: 1px solid #7e96a7; + border-radius: 0.1875rem; + background-color: #fff; + background-image: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e"); background-repeat: no-repeat; - background-position: /* LTR */ - right 18px center, - right 0 top -2px, - left -48px top -2px; + background-position: right 18px center; /* LTR */ font-family: inherit; - font-size: 1rem; - line-height: 3.125rem; + font-size: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none } select:focus { - border-color: #7e96a7; - outline: 6px dashed transparent; - box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25) + border: solid 2px #2494db; + outline: solid 2px #2494db } @supports (outline-style: double) { select:focus { - outline-style: double + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px } } -select:hover { - border-color: #53b0eb; - background-image: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e"), - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%2353b0eb' d='M0 0h54v54H0z'/%3e%3c/svg%3e"), - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%2353b0eb' d='M0 0h54v54H0z'/%3e%3c/svg%3e"); - } - select { /* Disables border of select specifically for ms browser */ @@ -98,145 +70,31 @@ select::-ms-expand { } select[disabled] { - pointer-events: none; - opacity: 0.6; + color: #7e96a7; + background-color: #f1f4f7; } select.error { - border-color: #e33f1e; - background-image: - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e"), - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%23e33f1e' d='M0 0h54v54H0z'/%3e%3c/svg%3e"), - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%23e33f1e' d='M0 0h54v54H0z'/%3e%3c/svg%3e"); + border: solid 2px #e33f1e } -[dir="ltr"] select[multiple] { - padding-left: 0.5625rem -} - -[dir="rtl"] select[multiple] { - padding-right: 0.5625rem -} - -[dir="ltr"] select[multiple] { - padding-right: 0.5625rem -} - -[dir="rtl"] select[multiple] { - padding-left: 0.5625rem -} - -[dir="ltr"] select[multiple] { - border-right: solid 2px transparent -} - -[dir="rtl"] select[multiple] { - border-left: solid 2px transparent -} - -[dir="ltr"] select[multiple] { - border-left: solid 6px #7e96a7 -} - -[dir="rtl"] select[multiple] { - border-right: solid 6px #7e96a7 -} +select.error:focus { + outline-color: #e33f1e; + } select[multiple] { height: auto; - padding-top: 0.5625rem; - padding-bottom: 0.5625rem; - border-top: 0; - border-bottom: 0; + padding: 0.5625rem; background-image: none; - background-repeat: repeat-y; - background-position: left -48px top -2px; /* LTR */ line-height: 1 /* Needed by non-Chromium based MS Edge browsers. */ } -[dir="ltr"] select[multiple] option { - padding-left: 0.5625rem -} - -[dir="rtl"] select[multiple] option { - padding-right: 0.5625rem -} - -[dir="ltr"] select[multiple] option { - padding-right: 0.5625rem -} - -[dir="rtl"] select[multiple] option { - padding-left: 0.5625rem -} - select[multiple] option { - padding-top: 0.5625rem; - padding-bottom: 0.5625rem; + padding: 0.5625rem; } -select[multiple]:focus { - border-color: #7e96a7; - box-shadow: - 0 -2px 0 #7e96a7, - 0 2px 0 #7e96a7, - 0 -2px 0 2px #fff, - 0 2px 0 2px #fff, - 0 -2px 0 4px #53b0eb, - 0 2px 0 4px #53b0eb, - 0 0 36px rgba(83, 176, 235, 0.25); - } - -select[multiple]:hover { - border-color: #53b0eb; - box-shadow: - 0 -2px 0 #53b0eb, - 0 2px 0 #53b0eb; - } - -select[multiple]:focus:hover { - box-shadow: - 0 -2px 0 #53b0eb, - 0 2px 0 #53b0eb, - 0 -2px 0 2px #fff, - 0 2px 0 2px #fff, - 0 -2px 0 4px #53b0eb, - 0 2px 0 4px #53b0eb, - 0 0 36px rgba(83, 176, 235, 0.25); - } - -select[multiple].error { - border-color: #e33f1e; - box-shadow: - 0 -2px 0 #e33f1e, - 0 2px 0 #e33f1e - } - -select[multiple].error:focus { - box-shadow: - 0 -2px 0 #e33f1e, - 0 2px 0 #e33f1e, - 0 -2px 0 2px #fff, - 0 2px 0 2px #fff, - 0 -2px 0 4px #53b0eb, - 0 2px 0 4px #53b0eb, - 0 0 36px rgba(83, 176, 235, 0.25); - } - -[dir="ltr"] select.form-element--small { - padding-left: 1.21875rem; - padding-right: 3.65625rem -} - -[dir="rtl"] select.form-element--small { - padding-right: 1.21875rem; - padding-left: 3.65625rem -} - select.form-element--small { height: 2.8125rem; - background-position: right 13.5px center, right -10px top -2px, left -48px top -2px; /* LTR */ - line-height: 2.5625rem; } select { @@ -247,25 +105,14 @@ select { @media screen and (-ms-high-contrast: active) { select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e") + background-image: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e") } + + select[multiple] { + background-image: none; + } } [dir="rtl"] select { - border-top-left-radius: 2px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 2px; - background-position: - left 18px center, - left 0 top -2px, - right -48px top -2px + background-position: left 18px center; } - -[dir="rtl"] select[multiple] { - background-position: right -48px top -2px; - } - -[dir="rtl"] select.form-element--small { - background-position: left 13.5px center, right -48px top -2px, left -10px top -2px; - } diff --git a/core/themes/olivero/css/components/form-select.pcss.css b/core/themes/olivero/css/components/form-select.pcss.css index b681eaffb02b..00a8c2833cfa 100644 --- a/core/themes/olivero/css/components/form-select.pcss.css +++ b/core/themes/olivero/css/components/form-select.pcss.css @@ -6,187 +6,81 @@ @import "../base/variables.pcss.css"; :root { - --form-element-select-height: var(--sp3); - --form-element-select-height--small: var(--sp2-5); --form-element-select-icon: url("../../images/chevron-down.svg"); - --form-element-select-bg: url("../../images/select-chevron-bg-default.svg"); - --form-element-select-bg--highlight: url("../../images/select-chevron-bg-highlight.svg"); - --form-element-select-bg--error: url("../../images/select-chevron-bg-error.svg"); - --form-element-select-border-size-right: var(--sp3); } select { max-width: 100%; - height: var(--form-element-select-height); + height: var(--sp3); padding-block: 0; - padding-inline-start: calc(var(--sp1) + var(--form-element-border-size-left)); - padding-inline-end: calc(var(--sp1) + var(--form-element-select-border-size-right)); - color: var(--color--gray-10); - border-width: var(--form-element-border-size-base) 0; - border-style: solid; - border-color: transparent; - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-left-radius: 0; /* LTR */ - outline: var(--outline--thin); - /* - Couple of notes here: - - The select element is styled with external images so it's visible in Firefox in Windows high contrast - mode. There's a number of browser bugs that limit what we can do including not linear-gradients negating the - entire ruleset. To work around this, we split off the various backgrounds into separate SVG images, and - call them as appropriate. We cannot use the background CSS property because we split off the background-color. - We also cannot use a left border because it angles at the end to blend in with the top and bottom - transparent borders, so we re-use the background SVG image for this. - - @todo - look at inlining some of the SVGs with an eye on CSS filesize. - */ - background-color: var(--color--gray-95); - background-image: var(--form-element-select-icon), var(--form-element-select-bg), var(--form-element-select-bg); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp3); + color: var(--color--gray-0); + border: 1px solid var(--color--gray-30); + border-radius: var(--border-radius); + background-color: var(--color--white); + background-image: var(--form-element-select-icon); background-repeat: no-repeat; - background-position: /* LTR */ - right var(--sp1) center, - right 0 top calc(-1 * var(--form-element-border-size-base)), - left -48px top calc(-1 * var(--form-element-border-size-base)); + background-position: right var(--sp) center; /* LTR */ font-family: inherit; - font-size: var(--font-size-base); - line-height: calc(var(--form-element-select-height) - 2 * var(--form-element-border-size-base)); + font-size: inherit; appearance: none; &:focus { - border-color: var(--color--gray-30); - outline: var(--outline--thick); - box-shadow: var(--shadow-focusable); + border: solid 2px var(--color--blue-50); + outline: solid 2px var(--color--blue-50); @supports (outline-style: double) { + border-width: 1px; + outline-width: 6px; outline-style: double; + outline-offset: -1px; } } - &:hover { - border-color: var(--color--blue-70); - background-image: - var(--form-element-select-icon), - var(--form-element-select-bg--highlight), - var(--form-element-select-bg--highlight); - } - /* Disables border of select specifically for ms browser */ &::-ms-expand { display: none; } &[disabled] { - pointer-events: none; - opacity: 0.6; + color: var(--color--gray-30); + background-color: var(--color--gray-90); } &.error { - border-color: var(--color--red); - background-image: - var(--form-element-select-icon), - var(--form-element-select-bg--error), - var(--form-element-select-bg--error); + border: solid 2px var(--color--red); + + &:focus { + outline-color: var(--color--red); + } } &[multiple] { height: auto; - padding-block: var(--sp0-5); - padding-inline-start: var(--sp0-5); - padding-inline-end: var(--sp0-5); - border-block-start: 0; - border-inline-end: solid 2px transparent; - border-block-end: 0; - border-inline-start: solid 6px var(--color--gray-30); + padding: var(--sp0-5); background-image: none; - background-repeat: repeat-y; - background-position: left -48px top calc(-1 * var(--form-element-border-size-base)); /* LTR */ line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */ & option { - padding-block: var(--sp0-5); - padding-inline-start: var(--sp0-5); - padding-inline-end: var(--sp0-5); - } - - &:focus { - border-color: var(--color--gray-30); - box-shadow: - 0 -2px 0 var(--color--gray-30), - 0 2px 0 var(--color--gray-30), - 0 -2px 0 2px var(--color--white), - 0 2px 0 2px var(--color--white), - 0 -2px 0 4px var(--color--blue-70), - 0 2px 0 4px var(--color--blue-70), - var(--shadow-focusable-smooth); - } - - &:hover { - border-color: var(--color--blue-70); - box-shadow: - 0 -2px 0 var(--color--blue-70), - 0 2px 0 var(--color--blue-70); - } - - &:focus:hover { - box-shadow: - 0 -2px 0 var(--color--blue-70), - 0 2px 0 var(--color--blue-70), - 0 -2px 0 2px var(--color--white), - 0 2px 0 2px var(--color--white), - 0 -2px 0 4px var(--color--blue-70), - 0 2px 0 4px var(--color--blue-70), - var(--shadow-focusable-smooth); - } - - &.error { - border-color: var(--color--red); - box-shadow: - 0 -2px 0 var(--color--red), - 0 2px 0 var(--color--red); - - &:focus { - box-shadow: - 0 -2px 0 var(--color--red), - 0 2px 0 var(--color--red), - 0 -2px 0 2px var(--color--white), - 0 2px 0 2px var(--color--white), - 0 -2px 0 4px var(--color--blue-70), - 0 2px 0 4px var(--color--blue-70), - var(--shadow-focusable-smooth); - } + padding: var(--sp0-5); } } &.form-element--small { - height: var(--form-element-select-height--small); - padding-inline: calc(var(--sp0-75) + var(--form-element-border-size-left)) calc(var(--form-element-select-height--small) + var(--sp0-75)); - background-position: right var(--sp0-75) center, right -10px top -2px, left -48px top -2px; /* LTR */ - line-height: calc(var(--form-element-select-height--small) - 2 * var(--form-element-border-size-base)); + height: var(--sp2-5); } /* Necessary for IE11 to show chevron. */ @media screen and (-ms-high-contrast: active) { background-image: var(--form-element-select-icon); + + &[multiple] { + background-image: none; + } } } [dir="rtl"] select { - border-top-left-radius: var(--border-radius-base); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: var(--border-radius-base); - background-position: - left var(--sp1) center, - left 0 top calc(-1 * var(--form-element-border-size-base)), - right -48px top calc(-1 * var(--form-element-border-size-base)); - - &[multiple] { - background-position: right -48px top calc(-1 * var(--form-element-border-size-base)); - } - - &.form-element--small { - background-position: left var(--sp0-75) center, right -48px top -2px, left -10px top -2px; - } + background-position: left var(--sp) center; } diff --git a/core/themes/olivero/css/components/form-text.css b/core/themes/olivero/css/components/form-text.css index db347be08321..6972e4e42fbd 100644 --- a/core/themes/olivero/css/components/form-text.css +++ b/core/themes/olivero/css/components/form-text.css @@ -10,78 +10,6 @@ * Text input elements. */ -[dir="ltr"] [type="color"],[dir="ltr"] -[type="date"],[dir="ltr"] -[type="datetime-local"],[dir="ltr"] -[type="email"],[dir="ltr"] -[type="file"],[dir="ltr"] -[type="month"],[dir="ltr"] -[type="number"],[dir="ltr"] -[type="password"],[dir="ltr"] -[type="search"],[dir="ltr"] -[type="tel"],[dir="ltr"] -[type="text"],[dir="ltr"] -[type="time"],[dir="ltr"] -[type="url"],[dir="ltr"] -[type="week"],[dir="ltr"] -textarea { - padding-left: 1.5rem -} - -[dir="rtl"] [type="color"],[dir="rtl"] -[type="date"],[dir="rtl"] -[type="datetime-local"],[dir="rtl"] -[type="email"],[dir="rtl"] -[type="file"],[dir="rtl"] -[type="month"],[dir="rtl"] -[type="number"],[dir="rtl"] -[type="password"],[dir="rtl"] -[type="search"],[dir="rtl"] -[type="tel"],[dir="rtl"] -[type="text"],[dir="rtl"] -[type="time"],[dir="rtl"] -[type="url"],[dir="rtl"] -[type="week"],[dir="rtl"] -textarea { - padding-right: 1.5rem -} - -[dir="ltr"] [type="color"],[dir="ltr"] -[type="date"],[dir="ltr"] -[type="datetime-local"],[dir="ltr"] -[type="email"],[dir="ltr"] -[type="file"],[dir="ltr"] -[type="month"],[dir="ltr"] -[type="number"],[dir="ltr"] -[type="password"],[dir="ltr"] -[type="search"],[dir="ltr"] -[type="tel"],[dir="ltr"] -[type="text"],[dir="ltr"] -[type="time"],[dir="ltr"] -[type="url"],[dir="ltr"] -[type="week"],[dir="ltr"] -textarea { - padding-right: 1.25rem -} - -[dir="rtl"] [type="color"],[dir="rtl"] -[type="date"],[dir="rtl"] -[type="datetime-local"],[dir="rtl"] -[type="email"],[dir="rtl"] -[type="file"],[dir="rtl"] -[type="month"],[dir="rtl"] -[type="number"],[dir="rtl"] -[type="password"],[dir="rtl"] -[type="search"],[dir="rtl"] -[type="tel"],[dir="rtl"] -[type="text"],[dir="rtl"] -[type="time"],[dir="rtl"] -[type="url"],[dir="rtl"] -[type="week"],[dir="rtl"] -textarea { - padding-left: 1.25rem -} - [type="color"], [type="date"], [type="datetime-local"], @@ -99,90 +27,53 @@ textarea { textarea { max-width: 100%; min-height: 3.375rem; - padding-top: 0.8125rem; - padding-bottom: 0.8125rem; - color: #313637; - border-width: 2px 0; - border-style: solid; - border-color: transparent; - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: 2px; /* LTR */ - border-bottom-right-radius: 2px; /* LTR */ - border-bottom-left-radius: 0; /* LTR */ - outline: 1px solid transparent; - background: linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa; /* LTR */ + padding: 0 1.125rem; + color: #0d1214; + border: 1px solid #7e96a7; + border-radius: 0.1875rem; + background-color: #fff; font-family: inherit; - font-size: 1rem; - line-height: 1.5rem; + font-size: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none } [type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus { - border-color: #7e96a7; - outline: 6px dashed transparent; - background: /* LTR */ - linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to left, #7e96a7 2px, transparent 2px, transparent 100%) #f7f9fa; - box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25) + border: solid 2px #2494db; + outline: solid 2px #2494db } @supports (outline-style: double) { [type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus { - outline-style: double + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px } } -[type="color"]:hover, [type="date"]:hover, [type="datetime-local"]:hover, [type="email"]:hover, [type="file"]:hover, [type="month"]:hover, [type="number"]:hover, [type="password"]:hover, [type="search"]:hover, [type="tel"]:hover, [type="text"]:hover, [type="time"]:hover, [type="url"]:hover, [type="week"]:hover, textarea:hover { - border-color: #53b0eb; - background: /* LTR */ - linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - [type="color"]::-ms-clear, [type="date"]::-ms-clear, [type="datetime-local"]::-ms-clear, [type="email"]::-ms-clear, [type="file"]::-ms-clear, [type="month"]::-ms-clear, [type="number"]::-ms-clear, [type="password"]::-ms-clear, [type="search"]::-ms-clear, [type="tel"]::-ms-clear, [type="text"]::-ms-clear, [type="time"]::-ms-clear, [type="url"]::-ms-clear, [type="week"]::-ms-clear, textarea::-ms-clear { display: none; } [type="color"][disabled], [type="date"][disabled], [type="datetime-local"][disabled], [type="email"][disabled], [type="file"][disabled], [type="month"][disabled], [type="number"][disabled], [type="password"][disabled], [type="search"][disabled], [type="tel"][disabled], [type="text"][disabled], [type="time"][disabled], [type="url"][disabled], [type="week"][disabled], textarea[disabled] { color: #7e96a7; - border-color: transparent; - background: linear-gradient(to right, #d7e1e8 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa; /* LTR */ + background-color: #f1f4f7; } [type="color"].error, [type="date"].error, [type="datetime-local"].error, [type="email"].error, [type="file"].error, [type="month"].error, [type="number"].error, [type="password"].error, [type="search"].error, [type="tel"].error, [type="text"].error, [type="time"].error, [type="url"].error, [type="week"].error, textarea.error { - border-color: #e33f1e; - background: /* LTR */ - linear-gradient(to right, #e33f1e 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to left, #e33f1e 2px, transparent 2px, transparent 100%) #f7f9fa + border: solid 2px #e33f1e } [type="color"].error:focus, [type="date"].error:focus, [type="datetime-local"].error:focus, [type="email"].error:focus, [type="file"].error:focus, [type="month"].error:focus, [type="number"].error:focus, [type="password"].error:focus, [type="search"].error:focus, [type="tel"].error:focus, [type="text"].error:focus, [type="time"].error:focus, [type="url"].error:focus, [type="week"].error:focus, textarea.error:focus { - box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25); + outline-color: #e33f1e; + outline-offset: -2px; } -[dir="ltr"] [type="color"].form-element--small,[dir="ltr"] [type="date"].form-element--small,[dir="ltr"] [type="datetime-local"].form-element--small,[dir="ltr"] [type="email"].form-element--small,[dir="ltr"] [type="file"].form-element--small,[dir="ltr"] [type="month"].form-element--small,[dir="ltr"] [type="number"].form-element--small,[dir="ltr"] [type="password"].form-element--small,[dir="ltr"] [type="search"].form-element--small,[dir="ltr"] [type="tel"].form-element--small,[dir="ltr"] [type="text"].form-element--small,[dir="ltr"] [type="time"].form-element--small,[dir="ltr"] [type="url"].form-element--small,[dir="ltr"] [type="week"].form-element--small,[dir="ltr"] textarea.form-element--small { - padding-left: 1.21875rem -} - -[dir="rtl"] [type="color"].form-element--small,[dir="rtl"] [type="date"].form-element--small,[dir="rtl"] [type="datetime-local"].form-element--small,[dir="rtl"] [type="email"].form-element--small,[dir="rtl"] [type="file"].form-element--small,[dir="rtl"] [type="month"].form-element--small,[dir="rtl"] [type="number"].form-element--small,[dir="rtl"] [type="password"].form-element--small,[dir="rtl"] [type="search"].form-element--small,[dir="rtl"] [type="tel"].form-element--small,[dir="rtl"] [type="text"].form-element--small,[dir="rtl"] [type="time"].form-element--small,[dir="rtl"] [type="url"].form-element--small,[dir="rtl"] [type="week"].form-element--small,[dir="rtl"] textarea.form-element--small { - padding-right: 1.21875rem -} - -[dir="ltr"] [type="color"].form-element--small,[dir="ltr"] [type="date"].form-element--small,[dir="ltr"] [type="datetime-local"].form-element--small,[dir="ltr"] [type="email"].form-element--small,[dir="ltr"] [type="file"].form-element--small,[dir="ltr"] [type="month"].form-element--small,[dir="ltr"] [type="number"].form-element--small,[dir="ltr"] [type="password"].form-element--small,[dir="ltr"] [type="search"].form-element--small,[dir="ltr"] [type="tel"].form-element--small,[dir="ltr"] [type="text"].form-element--small,[dir="ltr"] [type="time"].form-element--small,[dir="ltr"] [type="url"].form-element--small,[dir="ltr"] [type="week"].form-element--small,[dir="ltr"] textarea.form-element--small { - padding-right: 0.96875rem -} - -[dir="rtl"] [type="color"].form-element--small,[dir="rtl"] [type="date"].form-element--small,[dir="rtl"] [type="datetime-local"].form-element--small,[dir="rtl"] [type="email"].form-element--small,[dir="rtl"] [type="file"].form-element--small,[dir="rtl"] [type="month"].form-element--small,[dir="rtl"] [type="number"].form-element--small,[dir="rtl"] [type="password"].form-element--small,[dir="rtl"] [type="search"].form-element--small,[dir="rtl"] [type="tel"].form-element--small,[dir="rtl"] [type="text"].form-element--small,[dir="rtl"] [type="time"].form-element--small,[dir="rtl"] [type="url"].form-element--small,[dir="rtl"] [type="week"].form-element--small,[dir="rtl"] textarea.form-element--small { - padding-left: 0.96875rem -} - [type="color"].form-element--small, [type="date"].form-element--small, [type="datetime-local"].form-element--small, [type="email"].form-element--small, [type="file"].form-element--small, [type="month"].form-element--small, [type="number"].form-element--small, [type="password"].form-element--small, [type="search"].form-element--small, [type="tel"].form-element--small, [type="text"].form-element--small, [type="time"].form-element--small, [type="url"].form-element--small, [type="week"].form-element--small, textarea.form-element--small { min-height: 2.8125rem; - padding-top: 0.53125rem; - padding-bottom: 0.53125rem; } [type="date"] { @@ -210,46 +101,8 @@ textarea { padding-bottom: 0; } -[dir="rtl"] [type="color"], - [dir="rtl"] [type="date"], - [dir="rtl"] [type="datetime-local"], - [dir="rtl"] [type="email"], - [dir="rtl"] [type="file"], - [dir="rtl"] [type="month"], - [dir="rtl"] [type="number"], - [dir="rtl"] [type="password"], - [dir="rtl"] [type="search"], - [dir="rtl"] [type="tel"], - [dir="rtl"] [type="text"], - [dir="rtl"] [type="time"], - [dir="rtl"] [type="url"], - [dir="rtl"] [type="week"], - [dir="rtl"] textarea { - border-top-left-radius: 2px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 2px; - background: linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa - } - -[dir="rtl"] [type="color"]:focus, [dir="rtl"] [type="date"]:focus, [dir="rtl"] [type="datetime-local"]:focus, [dir="rtl"] [type="email"]:focus, [dir="rtl"] [type="file"]:focus, [dir="rtl"] [type="month"]:focus, [dir="rtl"] [type="number"]:focus, [dir="rtl"] [type="password"]:focus, [dir="rtl"] [type="search"]:focus, [dir="rtl"] [type="tel"]:focus, [dir="rtl"] [type="text"]:focus, [dir="rtl"] [type="time"]:focus, [dir="rtl"] [type="url"]:focus, [dir="rtl"] [type="week"]:focus, [dir="rtl"] textarea:focus { - background: - linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to right, #7e96a7 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -[dir="rtl"] [type="color"]:hover, [dir="rtl"] [type="date"]:hover, [dir="rtl"] [type="datetime-local"]:hover, [dir="rtl"] [type="email"]:hover, [dir="rtl"] [type="file"]:hover, [dir="rtl"] [type="month"]:hover, [dir="rtl"] [type="number"]:hover, [dir="rtl"] [type="password"]:hover, [dir="rtl"] [type="search"]:hover, [dir="rtl"] [type="tel"]:hover, [dir="rtl"] [type="text"]:hover, [dir="rtl"] [type="time"]:hover, [dir="rtl"] [type="url"]:hover, [dir="rtl"] [type="week"]:hover, [dir="rtl"] textarea:hover { - background: - linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -[dir="rtl"] [type="color"][disabled], [dir="rtl"] [type="date"][disabled], [dir="rtl"] [type="datetime-local"][disabled], [dir="rtl"] [type="email"][disabled], [dir="rtl"] [type="file"][disabled], [dir="rtl"] [type="month"][disabled], [dir="rtl"] [type="number"][disabled], [dir="rtl"] [type="password"][disabled], [dir="rtl"] [type="search"][disabled], [dir="rtl"] [type="tel"][disabled], [dir="rtl"] [type="text"][disabled], [dir="rtl"] [type="time"][disabled], [dir="rtl"] [type="url"][disabled], [dir="rtl"] [type="week"][disabled], [dir="rtl"] textarea[disabled] { - background: linear-gradient(to left, #d7e1e8 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa; - } - -[dir="rtl"] [type="color"].error, [dir="rtl"] [type="date"].error, [dir="rtl"] [type="datetime-local"].error, [dir="rtl"] [type="email"].error, [dir="rtl"] [type="file"].error, [dir="rtl"] [type="month"].error, [dir="rtl"] [type="number"].error, [dir="rtl"] [type="password"].error, [dir="rtl"] [type="search"].error, [dir="rtl"] [type="tel"].error, [dir="rtl"] [type="text"].error, [dir="rtl"] [type="time"].error, [dir="rtl"] [type="url"].error, [dir="rtl"] [type="week"].error, [dir="rtl"] textarea.error { - background: - linear-gradient(to left, #e33f1e 0.375rem, transparent 0.375rem, transparent 100%), - linear-gradient(to right, #e33f1e 2px, transparent 2px, transparent 100%) #f7f9fa; - } +[type="file"] { + height: auto; + padding-top: 0.84375rem; + padding-bottom: 0.84375rem; +} diff --git a/core/themes/olivero/css/components/form-text.pcss.css b/core/themes/olivero/css/components/form-text.pcss.css index ceb3a229df63..d567ae2b6f92 100644 --- a/core/themes/olivero/css/components/form-text.pcss.css +++ b/core/themes/olivero/css/components/form-text.pcss.css @@ -22,70 +22,47 @@ textarea { max-width: 100%; min-height: var(--sp3); - padding-block: calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2); - padding-inline-start: calc(var(--sp1) + var(--form-element-border-size-left)); - padding-inline-end: calc(var(--sp1) + var(--form-element-border-size-base)); - color: var(--color--gray-10); - border-width: var(--form-element-border-size-base) 0; - border-style: solid; - border-color: transparent; - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-right-radius: var(--border-radius-base); /* LTR */ - border-bottom-left-radius: 0; /* LTR */ - outline: var(--outline--thin); - background: linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); /* LTR */ + padding: 0 var(--sp); + color: var(--color--gray-0); + border: 1px solid var(--color--gray-30); + border-radius: var(--border-radius); + background-color: var(--color--white); font-family: inherit; - font-size: var(--font-size-base); - line-height: calc(var(--font-size-base) * 1.5); + font-size: inherit; appearance: none; &:focus { - border-color: var(--color--gray-30); - outline: var(--outline--thick); - background: /* LTR */ - linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - box-shadow: var(--shadow-focusable); + border: solid 2px var(--color--blue-50); + outline: solid 2px var(--color--blue-50); @supports (outline-style: double) { + border-width: 1px; + outline-width: 6px; outline-style: double; + outline-offset: -1px; } } - &:hover { - border-color: var(--color--blue-70); - background: /* LTR */ - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } - &::-ms-clear { display: none; } &[disabled] { color: var(--color--gray-30); - border-color: transparent; - background: linear-gradient(to right, var(--color--gray-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); /* LTR */ + background-color: var(--color--gray-90); } &.error { - border-color: var(--color--red); - background: /* LTR */ - linear-gradient(to right, var(--color--red) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to left, var(--color--red) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + border: solid 2px var(--color--red); &:focus { - box-shadow: var(--shadow-focusable); + outline-color: var(--color--red); + outline-offset: -2px; } } &.form-element--small { min-height: var(--sp2-5); - padding-block: calc((var(--sp2-5) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2); - padding-inline-start: calc(var(--sp0-75) + var(--form-element-border-size-left)); - padding-inline-end: calc(var(--sp0-75) + var(--form-element-border-size-base)); } } @@ -98,48 +75,7 @@ textarea { } } -[dir="rtl"] { - & [type="color"], - & [type="date"], - & [type="datetime-local"], - & [type="email"], - & [type="file"], - & [type="month"], - & [type="number"], - & [type="password"], - & [type="search"], - & [type="tel"], - & [type="text"], - & [type="time"], - & [type="url"], - & [type="week"], - & textarea { - border-top-left-radius: var(--border-radius-base); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: var(--border-radius-base); - background: linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); - - &:focus { - background: - linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } - - &:hover { - background: - linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } - - &[disabled] { - background: linear-gradient(to left, var(--color--gray-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); - } - - &.error { - background: - linear-gradient(to left, var(--color--red) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), - linear-gradient(to right, var(--color--red) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); - } - } +[type="file"] { + height: auto; + padding-block: var(--sp0-75); } diff --git a/core/themes/olivero/css/components/form-textarea.css b/core/themes/olivero/css/components/form-textarea.css index 65128cc52b75..6af8ae07abd7 100644 --- a/core/themes/olivero/css/components/form-textarea.css +++ b/core/themes/olivero/css/components/form-textarea.css @@ -14,4 +14,5 @@ textarea { display: block; width: 100%; min-height: 9rem; + padding: 1.125rem; } diff --git a/core/themes/olivero/css/components/form-textarea.pcss.css b/core/themes/olivero/css/components/form-textarea.pcss.css index 3652c6feedac..89dbf12b4b6e 100644 --- a/core/themes/olivero/css/components/form-textarea.pcss.css +++ b/core/themes/olivero/css/components/form-textarea.pcss.css @@ -9,4 +9,5 @@ textarea { display: block; width: 100%; min-height: var(--sp8); + padding: var(--sp); } diff --git a/core/themes/olivero/css/components/form.css b/core/themes/olivero/css/components/form.css index 152777eda9f3..a2b9e90857c8 100644 --- a/core/themes/olivero/css/components/form.css +++ b/core/themes/olivero/css/components/form.css @@ -58,11 +58,9 @@ tr .form-item, */ .form-item__label { - display: table; + display: block; margin-top: 0.5625rem; margin-bottom: 0.5625rem; - font-size: 1.125rem; - font-weight: 700; } [dir="ltr"] .container-inline .form-item__label { diff --git a/core/themes/olivero/css/components/form.pcss.css b/core/themes/olivero/css/components/form.pcss.css index f9ad65c39f65..bf90baced059 100644 --- a/core/themes/olivero/css/components/form.pcss.css +++ b/core/themes/olivero/css/components/form.pcss.css @@ -42,10 +42,8 @@ tr .form-item, * Form element label. */ .form-item__label { - display: table; + display: block; margin-block: var(--sp0-5); - font-size: var(--font-size-l); - font-weight: 700; } .container-inline .form-item__label { diff --git a/core/themes/olivero/css/components/messages.css b/core/themes/olivero/css/components/messages.css index 90c5b676fb37..e4148fd4fc13 100644 --- a/core/themes/olivero/css/components/messages.css +++ b/core/themes/olivero/css/components/messages.css @@ -195,13 +195,11 @@ appearance: none } -.messages__close::before, - .messages__close::after { +.messages__close:before, + .messages__close:after { position: absolute; - /* stylelint-disable csstools/use-logical */ top: 50%; left: 50%; - /* stylelint-enable csstools/use-logical */ display: block; width: 2.0625rem; height: 2px; @@ -209,11 +207,11 @@ background-color: #7e96a7; } -.messages__close::before { +.messages__close:before { transform: translate(-50%, -50%) rotate(45deg); } -.messages__close::after { +.messages__close:after { transform: translate(-50%, -50%) rotate(-45deg); } @@ -256,11 +254,11 @@ } [dir="ltr"] .js-form-managed-file .messages { - border-left: 6px solid #e33f1e; + border-left: solid 6px #e33f1e; } [dir="rtl"] .js-form-managed-file .messages { - border-right: 6px solid #e33f1e; + border-right: solid 6px #e33f1e; } .js-form-managed-file .messages { diff --git a/core/themes/olivero/css/components/messages.pcss.css b/core/themes/olivero/css/components/messages.pcss.css index f9d5423c41f3..5df84862bec4 100644 --- a/core/themes/olivero/css/components/messages.pcss.css +++ b/core/themes/olivero/css/components/messages.pcss.css @@ -93,13 +93,11 @@ background: none; appearance: none; - &::before, - &::after { + &:before, + &:after { position: absolute; - /* stylelint-disable csstools/use-logical */ top: 50%; left: 50%; - /* stylelint-enable csstools/use-logical */ display: block; width: 33px; height: 2px; @@ -107,11 +105,11 @@ background-color: var(--color--gray-30); } - &::before { + &:before { transform: translate(-50%, -50%) rotate(45deg); } - &::after { + &:after { transform: translate(-50%, -50%) rotate(-45deg); } @@ -158,5 +156,5 @@ .js-form-managed-file .messages { margin-block-end: var(--sp1); - border-inline-start: var(--form-element-border-size-left) solid var(--color--red); + border-inline-start: solid 6px var(--color--red); } diff --git a/core/themes/olivero/css/components/progress.css b/core/themes/olivero/css/components/progress.css index 51384e5a2482..be11dfd575fa 100644 --- a/core/themes/olivero/css/components/progress.css +++ b/core/themes/olivero/css/components/progress.css @@ -14,7 +14,7 @@ overflow: hidden; height: 1.125rem; border: 1px solid #0d77b5; - border-radius: 2px; + border-radius: 0.1875rem; } .progress__bar { diff --git a/core/themes/olivero/images/chevron-down.svg b/core/themes/olivero/images/chevron-down.svg index 08260102beac..108476a4b32f 100644 --- a/core/themes/olivero/images/chevron-down.svg +++ b/core/themes/olivero/images/chevron-down.svg @@ -1,3 +1,3 @@ - - + + diff --git a/core/themes/olivero/images/select-chevron-bg-default.svg b/core/themes/olivero/images/select-chevron-bg-default.svg deleted file mode 100644 index 23e7b897d4b5..000000000000 --- a/core/themes/olivero/images/select-chevron-bg-default.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/core/themes/olivero/images/select-chevron-bg-error.svg b/core/themes/olivero/images/select-chevron-bg-error.svg deleted file mode 100644 index 2e068acccecb..000000000000 --- a/core/themes/olivero/images/select-chevron-bg-error.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/core/themes/olivero/images/select-chevron-bg-highlight.svg b/core/themes/olivero/images/select-chevron-bg-highlight.svg deleted file mode 100644 index 7d9fe154ee52..000000000000 --- a/core/themes/olivero/images/select-chevron-bg-highlight.svg +++ /dev/null @@ -1,3 +0,0 @@ - - -