diff --git a/core/themes/olivero/css/components/dropbutton.pcss.css b/core/themes/olivero/css/components/dropbutton.pcss.css index 331a2c6a69..b4c26c8f9d 100644 --- a/core/themes/olivero/css/components/dropbutton.pcss.css +++ b/core/themes/olivero/css/components/dropbutton.pcss.css @@ -6,18 +6,12 @@ @import "../base/variables.pcss.css"; .dropbutton { - 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 */ + border-radius: var(--border-radius) 0 0 var(--border-radius); /* LTR */ background-color: var(--color--blue-20); } [dir="rtl"] .dropbutton { - border-top-left-radius: 0; - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - border-bottom-left-radius: 0; + border-radius: 0 var(--border-radius) var(--border-radius) 0; } .js .dropbutton-widget .dropbutton { @@ -34,10 +28,7 @@ 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 */ + border-radius: var(--border-radius) 0 0 var(--border-radius); /* LTR */ &:hover { background-color: var(--color--blue-50); @@ -52,10 +43,7 @@ } [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; + border-radius: 0 var(--border-radius) var(--border-radius) 0; } .js .dropbutton-action a:focus { @@ -64,10 +52,7 @@ .dropbutton-toggle { border-inline-start: 1px solid var(--color--white); - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: var(--border-radius); /* LTR */ - border-bottom-right-radius: var(--border-radius); /* LTR */ - border-bottom-left-radius: 0; /* LTR */ + border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ background-color: var(--color--blue-20); &:hover { @@ -75,10 +60,7 @@ } & button { - border-top-left-radius: 0; /* LTR */ - border-top-right-radius: var(--border-radius); /* LTR */ - border-bottom-right-radius: var(--border-radius); /* LTR */ - border-bottom-left-radius: 0; /* LTR */ + border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ &:focus { outline: solid 2px var(--color--blue-70); @@ -89,16 +71,10 @@ } [dir="rtl"] .dropbutton-toggle { - border-top-left-radius: var(--border-radius); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: var(--border-radius); + border-radius: var(--border-radius) 0 0 var(--border-radius); & button { - border-top-left-radius: var(--border-radius); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: var(--border-radius); + border-radius: var(--border-radius) 0 0 var(--border-radius); } } diff --git a/core/themes/olivero/css/components/form-select.pcss.css b/core/themes/olivero/css/components/form-select.pcss.css index c2c51eefae..02a98613b4 100644 --- a/core/themes/olivero/css/components/form-select.pcss.css +++ b/core/themes/olivero/css/components/form-select.pcss.css @@ -21,7 +21,7 @@ select { background-color: var(--color--white); background-image: var(--form-element-select-icon); background-repeat: no-repeat; - background-position: right var(--sp) center; + background-position: right var(--sp) center; /* LTR */ font-family: inherit; font-size: inherit; appearance: none; @@ -74,6 +74,10 @@ select { /* Necessary for IE11 to show chevron. */ @media screen and (-ms-high-contrast: active) { background-image: var(--form-element-select-icon); + + &[multiple] { + background-image: none; + } } } diff --git a/core/themes/olivero/css/components/form-text.pcss.css b/core/themes/olivero/css/components/form-text.pcss.css index ee46c95aea..d567ae2b6f 100644 --- a/core/themes/olivero/css/components/form-text.pcss.css +++ b/core/themes/olivero/css/components/form-text.pcss.css @@ -25,7 +25,7 @@ textarea { padding: 0 var(--sp); color: var(--color--gray-0); border: 1px solid var(--color--gray-30); - border-radius: 3px; + border-radius: var(--border-radius); background-color: var(--color--white); font-family: inherit; font-size: inherit; diff --git a/core/themes/olivero/css/components/messages.pcss.css b/core/themes/olivero/css/components/messages.pcss.css index 9b5c8b6970..5df84862be 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); }