diff --git a/core/themes/olivero/css/base/variables.css b/core/themes/olivero/css/base/variables.css
index 54d0cb811d17f19fe2a1becad88222a3fdc5fff1..6297dd946bdf0cc7bd9a9fe5213d1d095bc82051 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 42333e66999e9a2880dfb4cb83390bcb73211e9f..1e3f15cf89c06cd95dd3fe90be362b06d666b994 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 b3053ee38c82e61e2ec7d0593db5af42dd57ebf9..343e54a7cc44c55a6b43dafb8669ae8ffb3280a4 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;
-}
-
-/* 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;
+ background: url("../../images/throbber.gif") no-repeat left 1.125rem center / 1.125rem 1.125rem;
}
-
-/* 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 e104934e4bd6947bfeea83b41a5681a33efdd008..8769ef6626fcac6d97a73aa137d20c2e7b640cde 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);
-}
-
-/* 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);
+ background: var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);
}
-/* rtl:end:ignore */
diff --git a/core/themes/olivero/css/components/button.css b/core/themes/olivero/css/components/button.css
index 2f7f18fe1558dec8f81ebb822feb08d402dc639d..00bb35b3c08efd7a4c1dbede0471fef1475e43b7 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 718d019e9979486154d1807bc062a702d744b679..581b168144c07bae412cb058a01be37a0a5abd1f 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 72a5e61de38c355a689abbe196547ccd9dac5db6..0165559ca46d3a497c8dca1a0bbe7cab2328dec8 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;
-}
-[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;
- }
-[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
+
+select.cke_dialog_ui_input_select {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto
+}
+
+select.cke_dialog_ui_input_select::-ms-expand {
+ display: block;
}
-[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 e9382e14a92f43e6996a932bb9f5f32665566c7f..650dd71bbc9eb3dd690919b2a453b4dcbc82df31 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 dba80397a14f56a396d5e8a14613af26f46d4345..298d0fa9d66e1327c973c6f6ef80c0d5551eec29 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 1ebc06cf6f8c1283ceaa9c96ec2b65331d7422b5..ee096ecf519ee28ca3d39e5c952f68b58d6a30fd 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 4b8306b878e3cb8495ad838ed16cb9422f6f276d..dee758e29a4805c6b8d007b72f3f3b5212c7c99a 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 2ed13a7ee46903c09fd9c6b83fec0f0700f12d59..32a70560df4db602901cf1d9c6c0b8a09cac3ba2 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 f486755228c4334a8e98dd7eaea8a778e7ad8c29..ce2883e86366368950429a44ccbc3bc65f464007 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;
-}
-
-[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__wrapper {
+ padding: 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 20a287c8b2cba4ef66c0001f56975e34ad46a9de..be0bcb62bc17cc13d73903db6913956716249c14 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 5a0b394ff5be06ecc548f3e73813fb5dbdd1a8f0..a8dcaf6b102ede46c78ff02936e99ebe81a4d53f 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
-}
-
-[dir="rtl"] .form-type-boolean {
- margin-right: 2.25rem
-}
-
-.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%);
+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="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
-}
+input[type="radio"].error:focus {
+ outline-color: transparent;
+ box-shadow: 0 0 0 2px white, 0 0 0 4px #e33f1e;
+ }
-.form-boolean-group .form-type-boolean {
+.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 ef8b96180d15ad3b37f16ab3a75bfd499e6c1bbb..47ce727a15362bff1f4b250dda2a56f70aef2e22 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);
- }
-}
-
-.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%);
+ background-size: 17px;
}
- &.form-no-label {
- margin-inline-start: 0;
-
- & input[type="checkbox"],
- & input[type="radio"] {
- position: static;
- float: none;
- margin-inline: 0;
- transform: none;
- }
+ &: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);
}
- & .form-item__description,
- & .form-item--error-message {
- margin-inline-start: calc(var(--sp2) * -1);
+ &.error:focus {
+ outline-color: transparent;
+ box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
}
}
-.form-boolean-group .form-type-boolean {
+.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 96a3fa894956414b464a863b6c4a80f58106c466..0fa278ff3a6c9557fe17d76b064c62d87020c005 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;
- }
-
-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
+ padding: 0.5625rem;
}
-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 b681eaffb02b25f0a1c4c8c3c4f5443581f72bd9..00a8c2833cfa26ad794b04192801e173a1fcdc83 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 db347be083210f2673d8a325ed2329206563100e..6972e4e42fbd94e20c14ea06aae67179119491ba 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 ceb3a229df638ccd1c9fe8df4ef4902b6b2ebd74..d567ae2b6f92e17565fe879f8baeeeb8b9eb1920 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 65128cc52b75a7bb370e3e449a11ad97eb16a20d..6af8ae07abd786f45063a648273350c90da62b0d 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 3652c6feedac242aa97d568d1653e8c171f8c9e1..89dbf12b4b6e076b1a19c7bb01d41958fc2f3a03 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 152777eda9f3a558acc1fd2359727c0f2d75ccd6..a2b9e90857c8dd81647eae31f27598fb05bd2161 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 f9ad65c39f65a343f8071a8a18ce33876f08a173..bf90baced0593fd1c4fa2e1a2c1303a057cdd29b 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 90c5b676fb374273bcaac6d3cb2eb88c48441dc3..e4148fd4fc13c93977a5a008a55eb75afa2fa9a6 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 f9d5423c41f33cfa2e8f7e8b7ccc4f70a1f744d5..5df84862bec455f5af1642a48eb5f4f5a5053feb 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 51384e5a24823546a1002d02535a8c6706a98d4d..be11dfd575fa8580e76cc20a1b074b2ecdf9dd2e 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 08260102beac84c79a667d931a18de2e04acd54f..108476a4b32f3f38f06ff2e2c401ea91e281599a 100644
--- a/core/themes/olivero/images/chevron-down.svg
+++ b/core/themes/olivero/images/chevron-down.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10.5" viewBox="0 0 18 10.5">
- <path fill="#fff" 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"/>
+<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path 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="#5D7585"/>
</svg>
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 23e7b897d4b5b740ee571e4c0b7238aa62f0c2eb..0000000000000000000000000000000000000000
--- a/core/themes/olivero/images/select-chevron-bg-default.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
- <path fill="#7e96a7" d="M0 0h54v54H0z"/>
-</svg>
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 2e068acccecbcd5450175324852d7c5d3b5cdffb..0000000000000000000000000000000000000000
--- a/core/themes/olivero/images/select-chevron-bg-error.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
- <path fill="#e33f1e" d="M0 0h54v54H0z"/>
-</svg>
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 7d9fe154ee52f292151ea192905da1ec8cf4404e..0000000000000000000000000000000000000000
--- a/core/themes/olivero/images/select-chevron-bg-highlight.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
- <path fill="#53b0eb" d="M0 0h54v54H0z"/>
-</svg>