Skip to content
Snippets Groups Projects

Issue #3238915: Refactor (if feasible) uses of the jQuery ready function to use VanillaJS

Closed Issue #3238915: Refactor (if feasible) uses of the jQuery ready function to use VanillaJS
issue/drupal-3238915:3238915-refactor-if-feasible into 9.3.x
Closed Harumi Jang requested to merge issue/drupal-3238915:3238915-refactor-if-feasible into 9.3.x
Viewing commit 4b9c19c9
Show latest version
2 files
+ 139
− 146
Compare changes
  • Side-by-side
  • Inline
Files
2
core/themes/olivero/css/components/dropbutton.css
+ 70
− 77
@@ -10,30 +10,22 @@
* Dropbutton styles.
*/
/*
* Media query breakpoints.
* Processed by postcss/postcss-custom-media.
*/
/* Navigation related breakpoints */
/* Grid related breakpoints */
/* Grid shifts from 6 to 14 columns. */
/* Width of the entire grid maxes out. */
:root {
.dropbutton-wrapper {
--dropbutton--height: var(--sp1-5);
--dropbutton--bg-color: var(--color--gray-90);
--dropbutton--border-color: var(--color--primary-40);
--dropbutton--secondary-bg-color: var(--color--white);
--dropbutton--active-bg-color: var(--color--gray-90);
--dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
--dropbutton--border-radius: var(--border-radius);
--dropbutton--font-size: var(--font-size-s);
--dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
--dropbutton--text-hover-color: var(--color-text-primary-medium) /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
}
.dropbutton-wrapper.open {
position: relative;
z-index: 100; /* Ensure this appears above all other dropbuttons. */
filter: drop-shadow(0 2px 2px var(--dropbutton--bg-color));
}
position: relative;
z-index: 100; /* Ensure this appears above all other dropbuttons. */
filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
}
[dir="ltr"] .dropbutton-widget {
padding-right: var(--dropbutton--height);
@@ -45,24 +37,21 @@
.dropbutton-widget {
position: relative;
width: 12.5rem;
width: max-content;
height: var(--dropbutton--height);
border-radius: var(--border-radius)
border-radius: var(--dropbutton--border-radius)
}
@supports (width: max-content) {
.dropbutton-widget {
width: max-content
}
}
[dir="ltr"] .dropbutton-single .dropbutton-widget {
padding-right: 0;
padding-right: 0;
}
[dir="rtl"] .dropbutton-single .dropbutton-widget {
padding-left: 0;
padding-left: 0;
}
.dropbutton-wrapper.open .dropbutton-widget {
border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0
}
[dir="ltr"] .dropbutton {
@@ -86,9 +75,11 @@
margin-top: 0;
margin-bottom: 0;
list-style: none;
font-size: var(--font-size-s);
font-size: var(--dropbutton--font-size);
}
/* This is the button that expands/collapses the secondary options. */
[dir="ltr"] .dropbutton-toggle button {
right: 0;
}
@@ -109,11 +100,11 @@
cursor: pointer;
border-color: transparent;
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
background: var(--dropbutton--bg-color)
background: var(--dropbutton--active-bg-color)
}
.dropbutton-toggle button:focus {
outline: solid 2px var(--dropbutton--border-color);
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -2px;
}
@@ -123,13 +114,19 @@
height: var(--sp0-5);
content: "";
transform: translateY(-25%) rotate(45deg);
border-right: solid 2px var(--dropbutton--border-color);
border-bottom: solid 2px var(--dropbutton--border-color);
border-right: solid 2px var(--dropbutton--outline-color);
border-bottom: solid 2px var(--dropbutton--outline-color)
}
.dropbutton-wrapper.open .dropbutton-toggle button:before {
transform: translateY(25%) rotate(225deg)
}
[dir="rtl"] .dropbutton-toggle button {
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
}
/* This is the first <li> element in the list of actions. */
[dir="ltr"] .dropbutton-action:first-child {
margin-right: 2px;
@@ -141,74 +138,70 @@
.dropbutton-action:first-child {
border: solid 1px transparent;
border-radius: var(--border-radius) 0 0 var(--border-radius); /* LTR */
background: var(--dropbutton--bg-color);
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
background: var(--dropbutton--active-bg-color)
}
[dir="rtl"] .dropbutton-action:first-child {
border: solid 1px transparent;
border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
}
.dropbutton-action a {
display: flex;
align-items: center;
margin-bottom: -2px; /* Account for borders. */
padding: 0 0.5625rem;
text-decoration: none;
color: var(--color-text-neutral-medium);
color: var(--dropbutton--text-color);
font-weight: 600
}
.dropbutton-action a:focus {
border: solid 2px var(--dropbutton--border-color);
outline: 0
/* Negate specific IE rules. */
.dropbutton-action a:hover {
color: inherit;
}
@supports (outline-offset: -2px) {
.dropbutton-action a:focus {
border: 0;
outline: solid 2px var(--dropbutton--border-color);
outline-offset: -1px /* Overlap parent container by 1px. */
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -1px; /* Overlap parent container by 1px. */
}
}
.dropbutton-single .dropbutton-action:first-child {
border-right: solid 1px transparent; /* LTR */
border-radius: var(--border-radius);
}
.dropbutton-action {
.dropbutton-single .dropbutton-action a {
justify-content: center;
}
/* Special rules if there is only one action. */
}
[dir="rtl"] .dropbutton-action:first-child {
border: solid 1px transparent;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.dropbutton-single .dropbutton-action:first-child {
border-right: solid 1px transparent; /* LTR */
border-radius: var(--dropbutton--border-radius)
}
[dir="rtl"] .dropbutton-single .dropbutton-action:first-child {
border: solid 1px transparent;
}
border: solid 1px transparent;
}
.dropbutton-single .dropbutton-action a {
justify-content: center;
}
/* These are the <li> elements other than the first. */
.secondary-action {
visibility: hidden;
width: calc(100% + var(--dropbutton--height));
border-right: 1px solid var(--dropbutton--bg-color);
border-left: 1px solid var(--dropbutton--bg-color);
background: var(--color--white)
border-right: 1px solid var(--dropbutton--active-bg-color);
border-left: 1px solid var(--dropbutton--active-bg-color);
background: var(--dropbutton--secondary-bg-color)
}
.secondary-action:last-child {
border-bottom: 1px solid var(--dropbutton--bg-color);
border-bottom: 1px solid var(--dropbutton--active-bg-color);
}
.dropbutton-wrapper.open .dropbutton-toggle button:before {
transform: translateY(25%) rotate(225deg);
}
.dropbutton-wrapper.open .dropbutton-widget {
border-radius: var(--border-radius) var(--border-radius) 0 0;
.secondary-action a:hover {
color: var(--dropbutton--text-hover-color);
}
.dropbutton-wrapper.open .secondary-action {
visibility: visible;
}
visibility: visible
}