Skip to content
Snippets Groups Projects
Unverified Commit 4b9c19c9 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3259929 by mherchel, andy-blum: Olivero: Refactor dropbutton CSS to make use of modern CSS

parent 1544b1de
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
core/themes/olivero/css/components/dropbutton.css
+ 70
− 77
View file @ 4b9c19c9
......@@ -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
}
core/themes/olivero/css/components/dropbutton.pcss.css
+ 69
− 69
View file @ 4b9c19c9
......@@ -3,34 +3,37 @@
* Dropbutton styles.
*/
@import "../base/media-queries.pcss.css";
:root {
.dropbutton-wrapper {
--dropbutton--height: var(--sp1-5);
--dropbutton--bg-color: var(--color--gray-90);
--dropbutton--border-color: var(--color--primary-40);
}
.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));
--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. */
&.open {
position: relative;
z-index: 100; /* Ensure this appears above all other dropbuttons. */
filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
}
}
.dropbutton-widget {
position: relative;
width: 200px;
width: max-content;
height: var(--dropbutton--height);
padding-inline-end: var(--dropbutton--height);
border-radius: var(--border-radius);
border-radius: var(--dropbutton--border-radius);
@supports (width: max-content) {
width: max-content;
@nest .dropbutton-single & {
padding-inline-end: 0;
}
}
.dropbutton-single .dropbutton-widget {
padding-inline-end: 0;
@nest .dropbutton-wrapper.open & {
border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0;
}
}
.dropbutton {
......@@ -39,9 +42,10 @@
margin-inline-start: 0;
padding-inline-start: 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. */
.dropbutton-toggle button {
position: absolute;
top: 0;
......@@ -55,10 +59,10 @@
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);
&:focus {
outline: solid 2px var(--dropbutton--border-color);
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -2px;
}
......@@ -68,21 +72,31 @@
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);
@nest .dropbutton-wrapper.open & {
transform: translateY(25%) rotate(225deg);
}
}
}
[dir="rtl"] .dropbutton-toggle button {
border-radius: var(--border-radius) 0 0 var(--border-radius);
&:dir(rtl) {
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
}
}
/* This is the first <li> element in the list of actions. */
.dropbutton-action {
&:first-child {
margin-inline-end: 2px;
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) {
border: solid 1px transparent;
border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
}
}
& a {
......@@ -91,67 +105,53 @@
margin-bottom: -2px; /* Account for borders. */
padding: 0 9px;
text-decoration: none;
color: var(--color-text-neutral-medium);
color: var(--dropbutton--text-color);
font-weight: 600;
&:focus {
border: solid 2px var(--dropbutton--border-color);
outline: 0;
/* Negate specific IE rules. */
@supports (outline-offset: -2px) {
border: 0;
outline: solid 2px var(--dropbutton--border-color);
outline-offset: -1px; /* Overlap parent container by 1px. */
}
&:hover {
color: inherit;
}
}
}
.dropbutton-single .dropbutton-action {
&:first-child {
border-right: solid 1px transparent; /* LTR */
border-radius: var(--border-radius);
&:focus {
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -1px; /* Overlap parent container by 1px. */
}
}
& a {
justify-content: center;
}
}
/* Special rules if there is only one action. */
@nest .dropbutton-single & {
&:first-child {
border-right: solid 1px transparent; /* LTR */
border-radius: var(--dropbutton--border-radius);
[dir="rtl"] {
& .dropbutton-action:first-child {
border: solid 1px transparent;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
&:dir(rtl) {
border: solid 1px transparent;
}
}
& .dropbutton-single .dropbutton-action:first-child {
border: solid 1px transparent;
& 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);
&:last-child {
border-bottom: 1px solid var(--dropbutton--bg-color);
}
}
.dropbutton-wrapper.open {
& .dropbutton-toggle button:before {
transform: translateY(25%) rotate(225deg);
border-bottom: 1px solid var(--dropbutton--active-bg-color);
}
& .dropbutton-widget {
border-radius: var(--border-radius) var(--border-radius) 0 0;
& a:hover {
color: var(--dropbutton--text-hover-color);
}
& .secondary-action {
@nest .dropbutton-wrapper.open & {
visibility: visible;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment