Skip to content
Snippets Groups Projects

#3396443 - Removing focus causing issue on mobile menus

Closed #3396443 - Removing focus causing issue on mobile menus
issue/prototype-3396443:3396443-mobile-nav-issue into 5.x
Closed Jennifer Dust requested to merge issue/prototype-3396443:3396443-mobile-nav-issue into 5.x
Compare
and
24 files
+ 139
− 500
Compare changes
  • Side-by-side
  • Inline
Files
24
components/accordion-item/accordion-item.css
+ 9
− 46
@@ -3,16 +3,12 @@
}
.c-accordion-item .c-accordion-item__wrapper {
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
flex-direction: column;
padding: 0;
}
.c-accordion-item .c-accordion-item__header {
-webkit-box-ordinal-group: 2;
order: 1;
order: 1;
width: 100%;
}
.c-accordion-item .c-accordion-item__title {
@@ -23,12 +19,9 @@
padding: 0;
border: none;
background: none;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: start;
justify-content: flex-start;
align-items: center;
justify-content: flex-start;
position: relative;
text-align: left;
border-radius: 0;
@@ -46,62 +39,36 @@
position: absolute;
top: 50%;
left: 50%;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: 0 0;
transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.c-accordion-item .c-accordion-item__button .c-accordion-item__button-icon .plus {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
-ms-transform: rotate(0deg) translate(-50%, -50%);
transform: rotate(0deg) translate(-50%, -50%);
transform: rotate(0deg) translate(-50%, -50%);
opacity: 1;
}
.c-accordion-item .c-accordion-item__button .c-accordion-item__button-icon .minus {
-webkit-transform: rotate(90deg) translate(-50%, -50%);
-ms-transform: rotate(90deg) translate(-50%, -50%);
transform: rotate(90deg) translate(-50%, -50%);
transform: rotate(90deg) translate(-50%, -50%);
opacity: 0;
}
.c-accordion-item .c-accordion-item__button[aria-expanded=true] .c-accordion-item__button-icon .plus {
-webkit-transform: rotate(90deg) translate(-50%, -50%);
-ms-transform: rotate(90deg) translate(-50%, -50%);
transform: rotate(90deg) translate(-50%, -50%);
transform: rotate(90deg) translate(-50%, -50%);
opacity: 0;
-webkit-transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.c-accordion-item .c-accordion-item__button[aria-expanded=true] .c-accordion-item__button-icon .minus {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
-ms-transform: rotate(0deg) translate(-50%, -50%);
transform: rotate(0deg) translate(-50%, -50%);
transform: rotate(0deg) translate(-50%, -50%);
opacity: 1;
-webkit-transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 350ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.c-accordion-item .c-accordion-item__button-text {
margin: 0 0 0 0.75rem;
}
.c-accordion-item .c-accordion-item__content {
-webkit-transition: max-height 850ms cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: max-height 850ms cubic-bezier(0.4, 0, 0.2, 1);
transition: max-height 850ms cubic-bezier(0.4, 0, 0.2, 1);
max-height: 400vh;
}
.c-accordion-item .c-accordion-item__content .c-accordion-item__content-inner-wrapper {
opacity: 1;
-webkit-transition: opacity 750ms cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: opacity 750ms cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 750ms cubic-bezier(0.4, 0, 0.2, 1);
margin: 0.75rem 0 0 0;
margin: 1.25rem 0 0 0;
@@ -109,13 +76,9 @@
.c-accordion-item .c-accordion-item__content[aria-hidden=true] {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 650ms cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: max-height 650ms cubic-bezier(0.4, 0, 0.2, 1);
transition: max-height 650ms cubic-bezier(0.4, 0, 0.2, 1);
}
.c-accordion-item .c-accordion-item__content[aria-hidden=true] .c-accordion-item__content-inner-wrapper {
opacity: 0;
-webkit-transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1);
}
\ No newline at end of file