Skip to content
Snippets Groups Projects
Verified Commit e9778b8e authored by Alex Pott's avatar Alex Pott
Browse files

Issue #3274080 by mherchel, andy-blum, lauriii: Olivero's mobile menu... 

Issue #3274080 by mherchel, andy-blum, lauriii: Olivero's mobile menu experience doesn't properly adapt to forced colors

(cherry picked from commit ab69d9ae)
parent 20d4f846
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 91 additions and 22 deletions
core/misc/cspell/dictionary.txt
+ 1
− 0
View file @ e9778b8e
......@@ -166,6 +166,7 @@ bundleless
bundlenode
buttonpane
buttonset
buttontext
buytaert
cacheability
cacheable
......
core/themes/olivero/css/components/header-navigation.css
+ 32
− 3
View file @ e9778b8e
......@@ -40,8 +40,10 @@
top: 0;
visibility: hidden;
overflow: auto;
/* Ensure that header nav not use additional space and force
system branding block text to unnecessarily wrap. */
/**
* Ensure that header nav not use additional space and force system branding
* block text to unnecessarily wrap.
*/
flex-basis: 0;
flex-grow: 1; /* Necessary for IE11. */
width: 100%;
......@@ -49,7 +51,13 @@
height: 100%;
padding-top: 0;
padding-bottom: 1.125rem;
border-top: solid #fff 54px; /* Create room for the "close" button. */
/**
* Create room for the "close" button. We cannot use margin because The
* mobile navigation needs to slide beneath the button, but we also cannot
* use padding because that would enable the button to scroll out of the
* viewport on short screens.
*/
border-top: solid #fff 54px;
background-color: #fff;
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1)
}
......@@ -98,6 +106,20 @@
}
}
.header-nav {
/*
* Ensure top border has the same color as the background when in forced colors.
*/
}
@media (forced-colors: active) {
.header-nav {
border-top-color: canvas
}
}
/*
* Only apply transition styles when JS is loaded. This
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
......@@ -259,6 +281,13 @@ body.is-always-mobile-nav .header-nav {
background: #0d77b5
}
@media (forced-colors: active) {
.header-nav-overlay {
background: canvastext
}
}
.is-overlay-active .header-nav-overlay {
display: block
}
core/themes/olivero/css/components/header-navigation.pcss.css
+ 22
− 3
View file @ e9778b8e
......@@ -12,8 +12,10 @@
inset-inline-start: 100%;
visibility: hidden;
overflow: auto;
/* Ensure that header nav not use additional space and force
system branding block text to unnecessarily wrap. */
/**
* Ensure that header nav not use additional space and force system branding
* block text to unnecessarily wrap.
*/
flex-basis: 0;
flex-grow: 1; /* Necessary for IE11. */
width: 100%;
......@@ -22,7 +24,13 @@
padding-block: 0 var(--sp);
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
border-block-start: solid var(--color--white) var(--sp3); /* Create room for the "close" button. */
/**
* Create room for the "close" button. We cannot use margin because The
* mobile navigation needs to slide beneath the button, but we also cannot
* use padding because that would enable the button to scroll out of the
* viewport on short screens.
*/
border-block-start: solid var(--color--white) var(--sp3);
background-color: var(--color--white);
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
......@@ -48,6 +56,13 @@
@media (--lg) {
grid-column: 5 / 14;
}
/*
* Ensure top border has the same color as the background when in forced colors.
*/
@media (forced-colors: active) {
border-top-color: canvas;
}
}
/*
......@@ -151,6 +166,10 @@ body.is-always-mobile-nav {
opacity: 0.2;
background: var(--color--blue-20);
@media (forced-colors: active) {
background: canvastext;
}
@nest .is-overlay-active & {
display: block;
}
......
core/themes/olivero/css/components/header-search-narrow.css
+ 13
− 0
View file @ e9778b8e
......@@ -205,6 +205,19 @@
border-top: solid 5px #2494db;
}
@media (forced-colors: active) {
.block-search-narrow .search-form__submit .icon--search {
background: buttontext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center
}
}
.block-search-narrow .search-form__submit:focus {
outline: solid 4px transparent;
outline-offset: -4px;
......
core/themes/olivero/css/components/header-search-narrow.pcss.css
+ 7
− 0
View file @ e9778b8e
......@@ -113,6 +113,13 @@
transform-origin: left; /* LTR */
border-block-start: solid 5px var(--color--blue-50);
}
@media (forced-colors: active) {
background: buttontext;
mask-image: url("../../images/search--white.svg");
mask-repeat: no-repeat;
mask-position: center;
}
}
&:focus {
......
core/themes/olivero/css/components/navigation/nav-button-mobile.css
+ 8
− 8
View file @ e9778b8e
......@@ -122,8 +122,8 @@
position: relative;
display: block;
width: 2.25rem;
height: 0.1875rem;
background-color: #2494db
height: 0;
border-top: solid 3px #2494db
}
[dir="ltr"] .mobile-nav-button__icon:before {
......@@ -136,12 +136,12 @@
.mobile-nav-button__icon:before {
position: absolute;
top: -0.5rem;
top: -0.6875rem;
width: 100%;
height: 0.1875rem;
height: 0;
content: "";
transition: all 0.2s;
background-color: #2494db;
border-top: solid 3px #2494db;
}
[dir="ltr"] .mobile-nav-button__icon:after {
......@@ -157,14 +157,14 @@
top: auto;
bottom: -0.5rem;
width: 100%;
height: 0.1875rem;
height: 0;
content: "";
transition: all 0.2s;
background-color: #2494db;
border-top: solid 3px #2494db;
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
background-color: transparent
border-top: 0
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:before {
......
core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css
+ 8
− 8
View file @ e9778b8e
......@@ -65,18 +65,18 @@
position: relative;
display: block;
width: var(--sp2);
height: 3px;
background-color: var(--color--blue-50);
height: 0;
border-top: solid 3px var(--color--blue-50);
&:before {
position: absolute;
inset-block-start: -8px;
inset-block-start: -11px;
inset-inline-start: 0;
width: 100%;
height: 3px;
height: 0;
content: "";
transition: all 0.2s;
background-color: var(--color--blue-50);
border-top: solid 3px var(--color--blue-50);
}
&:after {
......@@ -84,15 +84,15 @@
inset-block: auto -8px;
inset-inline-start: 0;
width: 100%;
height: 3px;
height: 0;
content: "";
transition: all 0.2s;
background-color: var(--color--blue-50);
border-top: solid 3px var(--color--blue-50);
}
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
background-color: transparent;
border-top: 0;
&:before {
inset-block-start: 0;
......
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