From 722c7c63e09f3c0b6a40faae8480a248a532c205 Mon Sep 17 00:00:00 2001
From: Cristina Chumillas <ckrina@1206650.no-reply.drupal.org>
Date: Fri, 15 Dec 2023 13:12:42 +0100
Subject: [PATCH] Issue #3303547 by Gauravvvv, starshaped, kostyashupenko,
_utsavsharma, Aditya4478, andy-blum, shivam-kumar, Sakthivel M, smustgrave,
nod_, sasanikolic: Refactor Claro's dropbutton stylesheet
---
.../claro/css/components/dropbutton.css | 39 +--
.../claro/css/components/dropbutton.pcss.css | 298 +++++++++---------
2 files changed, 155 insertions(+), 182 deletions(-)
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 52be1d38024f..b0ecdfdfad93 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -46,13 +46,8 @@
.form-actions .dropbutton-wrapper,
.field-actions .dropbutton-wrapper {
- margin: var(--space-xs) var(--space-m) var(--space-xs) 0;
-}
-
-[dir="rtl"] .form-actions .dropbutton-wrapper,
-[dir="rtl"] .field-actions .dropbutton-wrapper {
- margin-right: 0;
- margin-left: var(--space-m);
+ margin-block: var(--space-xs);
+ margin-inline: var(--space-m) 0;
}
.dropbutton-widget {
@@ -71,17 +66,10 @@
.dropbutton {
display: block;
overflow: visible;
- margin: 0;
- list-style: none;
-}
-
-[dir="rtl"] .dropbutton {
- margin: 0;
-}
-
-.dropbutton {
min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
height: var(--dropbutton-toggle-size);
+ margin: 0;
+ list-style: none;
}
.dropbutton-widget {
@@ -108,7 +96,7 @@
white-space: nowrap;
}
-[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type {
+[dir="rtl"] :is(.dropbutton--multiple .dropbutton__item:first-of-type) {
margin-right: 0;
margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
@@ -120,7 +108,7 @@
white-space: nowrap;
}
-[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
+[dir="rtl"] :is(.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type) {
margin-right: 0;
margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
@@ -130,7 +118,7 @@
white-space: nowrap;
}
-[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
+[dir="rtl"] :is(.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type) {
margin-right: 0;
margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
@@ -195,7 +183,7 @@
transform: translate(50%, -50%) rotate(180deg);
}
-[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
+[dir="rtl"] :is(.dropbutton-wrapper.open .dropbutton__toggle::before) {
transform: translate(50%, -50%) rotate(-180deg);
}
@@ -225,11 +213,10 @@
height: 0.5625rem;
margin-top: calc(0.5625rem / (2 * -1.41429));
transform: translate(50%, -50%) rotate(135deg); /* LTR */
- border: 0.125rem solid;
border-width: 0.125rem 0.125rem 0 0;
+ border-style: solid;
background: none;
}
-
.dropbutton-wrapper.open .dropbutton__toggle::before {
margin-top: calc(0.5625rem / (2 * 1.41429));
transform: translate(50%, -50%) rotate(315deg);
@@ -279,15 +266,13 @@
}
.dropbutton--multiple .dropbutton__item:first-of-type > * {
- padding-right: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
- padding-left: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
+ padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
}
/* Variants */
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
- padding-top: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
- padding-bottom: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
+ padding-block: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
font-size: var(--dropbutton-small-font-size);
line-height: var(--dropbutton-small-line-height);
}
@@ -370,7 +355,7 @@
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
-.dropbutton__item:first-of-type ~ .dropbutton__item ~ .dropbutton__item {
+:is(.dropbutton__item:first-of-type ~ .dropbutton__item) ~ .dropbutton__item {
border-top: 0;
}
diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css
index ca2c0ee43837..f9d89610ce47 100644
--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -39,21 +39,16 @@
.form-actions .dropbutton-wrapper,
.field-actions .dropbutton-wrapper {
- margin: var(--space-xs) var(--space-m) var(--space-xs) 0;
-}
-[dir="rtl"] .form-actions .dropbutton-wrapper,
-[dir="rtl"] .field-actions .dropbutton-wrapper {
- margin-right: 0;
- margin-left: var(--space-m);
+ margin-block: var(--space-xs);
+ margin-inline: var(--space-m) 0;
}
.dropbutton-widget {
position: relative;
flex: 1 1 auto;
-}
-
-.js .dropbutton-wrapper.open .dropbutton-widget {
- z-index: var(--dropbutton-widget-z-index);
+ .js .dropbutton-wrapper.open & {
+ z-index: var(--dropbutton-widget-z-index);
+ }
}
/**
@@ -62,16 +57,10 @@
.dropbutton {
display: block;
overflow: visible;
- margin: 0;
- list-style: none;
-}
-[dir="rtl"] .dropbutton {
- margin: 0;
-}
-
-.dropbutton {
min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
height: var(--dropbutton-toggle-size);
+ margin: 0;
+ list-style: none;
}
.dropbutton-widget {
@@ -94,29 +83,29 @@
.dropbutton--multiple .dropbutton__item:first-of-type {
margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
white-space: nowrap;
-}
-[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type {
- margin-right: 0;
- margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
+ [dir="rtl"] & {
+ margin-right: 0;
+ margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
+ }
}
/* First dropbutton list item variants */
.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
white-space: nowrap;
-}
-[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
- margin-right: 0;
- margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
+ [dir="rtl"] & {
+ margin-right: 0;
+ margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
+ }
}
.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
white-space: nowrap;
-}
-[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
- margin-right: 0;
- margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
+ [dir="rtl"] & {
+ margin-right: 0;
+ margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
+ }
}
/**
@@ -136,46 +125,44 @@
background: var(--button-bg-color);
font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
appearance: none;
-}
-[dir="rtl"] .dropbutton__toggle {
- right: auto;
- left: 0;
- border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);
-}
-
-.dropbutton__toggle::before {
- position: absolute;
- top: 50%;
- right: 50%;
- width: 0.875rem;
- height: 0.5625rem;
- content: "";
- transform: translate(50%, -50%) rotate(0);
- background: url(../../images/icons/000f33/chevron-down.svg) no-repeat center;
- background-size: contain;
-}
-
-/* Toggler states. */
-.dropbutton__toggle:hover {
- color: var(--button-fg-color);
- background-color: var(--button--hover-bg-color);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-}
+ [dir="rtl"] & {
+ right: auto;
+ left: 0;
+ border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);
+ }
+ &::before {
+ position: absolute;
+ top: 50%;
+ right: 50%;
+ width: 0.875rem;
+ height: 0.5625rem;
+ content: "";
+ transform: translate(50%, -50%) rotate(0);
+ background: url(../../images/icons/000f33/chevron-down.svg) no-repeat center;
+ background-size: contain;
+ }
-.dropbutton__toggle:focus {
- z-index: 2;
+ /* Toggler states. */
+ &:hover {
+ color: var(--button-fg-color);
+ background-color: var(--button--hover-bg-color);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+ }
+ &:focus {
+ z-index: 2;
+ }
+ &:active {
+ color: var(--button-fg-color);
+ background-color: var(--button--active-bg-color);
+ }
}
-.dropbutton__toggle:active {
- color: var(--button-fg-color);
- background-color: var(--button--active-bg-color);
-}
.dropbutton-wrapper.open .dropbutton__toggle::before {
transform: translate(50%, -50%) rotate(180deg);
-}
-[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
- transform: translate(50%, -50%) rotate(-180deg);
+ [dir="rtl"] & {
+ transform: translate(50%, -50%) rotate(-180deg);
+ }
}
/* Toggler variants */
@@ -202,17 +189,16 @@
height: 0.5625rem;
margin-top: calc(0.5625rem / (2 * -1.41429));
transform: translate(50%, -50%) rotate(135deg); /* LTR */
- border: 0.125rem solid;
border-width: 0.125rem 0.125rem 0 0;
+ border-style: solid;
background: none;
- }
-
- .dropbutton-wrapper.open .dropbutton__toggle::before {
- margin-top: calc(0.5625rem / (2 * 1.41429));
- transform: translate(50%, -50%) rotate(315deg);
- }
- [dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
- transform: translate(50%, -50%) rotate(-45deg);
+ .dropbutton-wrapper.open & {
+ margin-top: calc(0.5625rem / (2 * 1.41429));
+ transform: translate(50%, -50%) rotate(315deg);
+ }
+ [dir="rtl"] .dropbutton-wrapper.open & {
+ transform: translate(50%, -50%) rotate(-45deg);
+ }
}
/* Variants */
@@ -234,79 +220,80 @@
*
* Duplicates base button styles.
*/
-.dropbutton__item:first-of-type > * {
- display: inline-block;
- margin: 0;
- padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
- cursor: pointer;
- text-align: center;
- text-decoration: none;
- color: var(--button-fg-color);
- border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
- border-radius: var(--button-border-radius-size);
- background-color: var(--button-bg-color);
- font-size: var(--dropbutton-font-size);
- font-weight: 700;
- line-height: var(--dropbutton-line-height);
- appearance: none;
- -webkit-font-smoothing: antialiased;
-}
-.dropbutton--multiple .dropbutton__item:first-of-type > * {
- padding-right: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
- padding-left: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
-}
+.dropbutton__item:first-of-type {
+ & > * {
+ display: inline-block;
+ margin: 0;
+ padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ color: var(--button-fg-color);
+ border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
+ border-radius: var(--button-border-radius-size);
+ background-color: var(--button-bg-color);
+ font-size: var(--dropbutton-font-size);
+ font-weight: 700;
+ line-height: var(--dropbutton-line-height);
+ appearance: none;
+ -webkit-font-smoothing: antialiased;
+ }
-/* Variants */
-.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
- padding-top: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
- padding-bottom: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
- font-size: var(--dropbutton-small-font-size);
- line-height: var(--dropbutton-small-line-height);
-}
+ .dropbutton--multiple & > * {
+ padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
+ }
-.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
- padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
- padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
- font-size: var(--dropbutton-extrasmall-font-size);
- line-height: var(--dropbutton-extrasmall-line-height);
-}
+ /* Variants */
+ .no-touchevents .dropbutton--small & > * {
+ padding-block: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
+ font-size: var(--dropbutton-small-font-size);
+ line-height: var(--dropbutton-small-line-height);
+ }
-.dropbutton__item:first-of-type > *:hover,
-.dropbutton__item:first-of-type > .button:hover {
- text-decoration: none;
- color: var(--button-fg-color);
- background-color: var(--button--hover-bg-color);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-}
+ .no-touchevents .dropbutton--extrasmall & > * {
+ padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
+ padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
+ font-size: var(--dropbutton-extrasmall-font-size);
+ line-height: var(--dropbutton-extrasmall-line-height);
+ }
-.dropbutton__item:first-of-type > *:focus:hover,
-.dropbutton__item:first-of-type > .button:focus:hover {
- box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
-}
+ & > *:hover,
+ & > .button:hover {
+ text-decoration: none;
+ color: var(--button-fg-color);
+ background-color: var(--button--hover-bg-color);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+ }
-.dropbutton__item:first-of-type > *:focus {
- text-decoration: none;
-}
+ & > *:focus:hover,
+ & > .button:focus:hover {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+ }
-.dropbutton__item:first-of-type > *:active {
- color: var(--button-fg-color);
- background-color: var(--button--active-bg-color);
-}
+ & > *:focus {
+ text-decoration: none;
+ }
-.dropbutton--multiple .dropbutton__item:first-of-type > * {
- position: relative;
- z-index: 3;
-}
+ & > *:active {
+ color: var(--button-fg-color);
+ background-color: var(--button--active-bg-color);
+ }
-.dropbutton--multiple .dropbutton__item:first-of-type > *:focus {
- z-index: 2;
-}
+ .dropbutton--multiple & > * {
+ position: relative;
+ z-index: 3;
+ }
-.dropbutton--multiple .dropbutton__item:first-of-type > * {
- border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
-}
-[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type > * {
- border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
+ .dropbutton--multiple & > *:focus {
+ z-index: 2;
+ }
+
+ .dropbutton--multiple & > * {
+ border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
+ }
+ [dir="rtl"] .dropbutton--multiple & > * {
+ border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
+ }
}
.dropbutton > .dropbutton__item > a,
@@ -333,10 +320,9 @@
border: var(--dropbutton-border-size) solid var(--color-gray-200);
border-bottom: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
-}
-
-.dropbutton__item:first-of-type ~ .dropbutton__item ~ .dropbutton__item {
- border-top: 0;
+ & ~ .dropbutton__item {
+ border-top: 0;
+ }
}
.dropbutton__item ~ .dropbutton__item:last-child {
@@ -390,21 +376,23 @@
}
/* States. */
-.dropbutton__item > *:focus {
- position: relative;
- z-index: 3;
-}
+.dropbutton__item{
+ & > *:focus {
+ position: relative;
+ z-index: 3;
+ }
-.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
- color: var(--color-text);
- background: var(--color-gray-050);
-}
+ &:first-of-type ~ & > *:hover {
+ color: var(--color-text);
+ background: var(--color-gray-050);
+ }
-.dropbutton__item > .button:not(:focus) {
- box-shadow: none;
-}
+ & > .button:not(:focus) {
+ box-shadow: none;
+ }
-.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
- border-color: var(--color-focus) !important; /* 1 */
- box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus);
+ &:first-of-type ~ & > *:focus {
+ border-color: var(--color-focus) !important; /* 1 */
+ box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus);
+ }
}
--
GitLab