diff --git a/core/themes/olivero/css/base/variables.css b/core/themes/olivero/css/base/variables.css index 54d0cb81..f82905cf 100644 --- a/core/themes/olivero/css/base/variables.css +++ b/core/themes/olivero/css/base/variables.css @@ -54,7 +54,7 @@ /* 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 */ + /* 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 */ /* Shadows */ diff --git a/core/themes/olivero/css/base/variables.pcss.css b/core/themes/olivero/css/base/variables.pcss.css index 42333e66..7c2ba13d 100644 --- a/core/themes/olivero/css/base/variables.pcss.css +++ b/core/themes/olivero/css/base/variables.pcss.css @@ -120,6 +120,7 @@ --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 */ diff --git a/core/themes/olivero/css/components/button.css b/core/themes/olivero/css/components/button.css index 2f7f18fe..f1f40df1 100644 --- a/core/themes/olivero/css/components/button.css +++ b/core/themes/olivero/css/components/button.css @@ -57,9 +57,9 @@ border-radius: 2px; background-color: #fff; font-family: inherit; - font-size: 0.875rem; + font-size: 1.125rem; font-weight: 700; - line-height: 1.125rem; + line-height: var(--line-height-l); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/core/themes/olivero/css/components/button.pcss.css b/core/themes/olivero/css/components/button.pcss.css index 718d019e..6ff5b2dc 100644 --- a/core/themes/olivero/css/components/button.pcss.css +++ b/core/themes/olivero/css/components/button.pcss.css @@ -26,9 +26,9 @@ border-radius: var(--border-radius-base); 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); + line-height: var(--line-height-l); appearance: none; -webkit-font-smoothing: antialiased; diff --git a/core/themes/olivero/css/components/form-boolean.css b/core/themes/olivero/css/components/form-boolean.css index 5a0b394f..f9a2b69f 100644 --- a/core/themes/olivero/css/components/form-boolean.css +++ b/core/themes/olivero/css/components/form-boolean.css @@ -16,9 +16,9 @@ input[type="radio"] { width: 1.6875rem; height: 1.6875rem; vertical-align: text-bottom; - border: 2px solid #7e96a7; - border-radius: 2px; - background-color: #f7f9fa; + 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 +28,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 +47,22 @@ 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"]: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"] { @@ -71,7 +83,19 @@ 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; + } + +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; + } + +input[type="radio"].error:focus { + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px #e33f1e; } [dir="ltr"] .form-type-boolean { diff --git a/core/themes/olivero/css/components/form-boolean.pcss.css b/core/themes/olivero/css/components/form-boolean.pcss.css index ef8b9618..31337e3a 100644 --- a/core/themes/olivero/css/components/form-boolean.pcss.css +++ b/core/themes/olivero/css/components/form-boolean.pcss.css @@ -5,30 +5,29 @@ @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); + 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,11 +36,20 @@ input[type="radio"] { } &[disabled] { - opacity: 0.3; + background-color: #F1F4F7; + } + + &: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 */ @@ -61,7 +69,19 @@ input[type="radio"] { &:checked { background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A"); - background-size: var(--form-boolean-radio-icon-size) var(--form-boolean-radio-icon-size); + background-size: 17px; + } + + &:focus { + border-width: 2px; + border-color: var(--color--blue-50); + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--blue-50); + } + + &.error:focus { + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); } } diff --git a/core/themes/olivero/css/components/form-select.css b/core/themes/olivero/css/components/form-select.css index 96a3fa89..b1371d73 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,34 @@ 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-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; 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,76 +69,56 @@ 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 -} +select.error:focus { + outline-color: #e33f1e; + } [dir="ltr"] select[multiple] { - border-right: solid 2px transparent + padding-left: 0 } [dir="rtl"] select[multiple] { - border-left: solid 2px transparent + padding-right: 0 } [dir="ltr"] select[multiple] { - border-left: solid 6px #7e96a7 + padding-right: 0 } [dir="rtl"] select[multiple] { - border-right: solid 6px #7e96a7 + padding-left: 0 } select[multiple] { height: auto; padding-top: 0.5625rem; padding-bottom: 0.5625rem; - border-top: 0; - border-bottom: 0; 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 + padding-left: 1.125rem } [dir="rtl"] select[multiple] option { - padding-right: 0.5625rem + padding-right: 1.125rem } [dir="ltr"] select[multiple] option { - padding-right: 0.5625rem + padding-right: 1.125rem } [dir="rtl"] select[multiple] option { - padding-left: 0.5625rem + padding-left: 1.125rem } select[multiple] option { @@ -175,68 +126,8 @@ select[multiple] option { 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 - } - -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 +138,10 @@ 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") } } [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 b681eaff..228fcd2a 100644 --- a/core/themes/olivero/css/components/form-select.pcss.css +++ b/core/themes/olivero/css/components/form-select.pcss.css @@ -9,161 +9,71 @@ --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); 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: 3px; + 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; 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: #F1F4F7; } &.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-inline-start: 0; + padding-inline-end: 0; 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-inline-start: var(--sp); + padding-inline-end: var(--sp); } } &.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)); } /* Necessary for IE11 to show chevron. */ @@ -173,20 +83,5 @@ select { } [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 db347be0..e5a920b4 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,52 @@ 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; 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 +100,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 ceb3a229..a16ebc04 100644 --- a/core/themes/olivero/css/components/form-text.pcss.css +++ b/core/themes/olivero/css/components/form-text.pcss.css @@ -22,70 +22,46 @@ 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: 3px; 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: #F1F4F7; } &.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 +74,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 65128cc5..6af8ae07 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 3652c6fe..89dbf12b 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 152777ed..a2b9e908 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 f9ad65c3..bf90bace 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/images/chevron-down.svg b/core/themes/olivero/images/chevron-down.svg index 08260102..108476a4 100644 --- a/core/themes/olivero/images/chevron-down.svg +++ b/core/themes/olivero/images/chevron-down.svg @@ -1,3 +1,3 @@ - - + +