mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-25 14:57:31 +00:00
516ef3a1cb
Putting the dropdown content in the details elemenet have been inconsistent. Transition are not working correctly and different browsers are not handling it well. Furthermore, the previous implementation does not allow an always visible state of dropdown content. Fixes: #882
97 lines
2 KiB
Plaintext
97 lines
2 KiB
Plaintext
.citizen-dropdown {
|
|
&-summary {
|
|
cursor: pointer;
|
|
|
|
// Icons have to use span inside label elements
|
|
> span:not( .citizen-ui-icon ) {
|
|
.sr-only;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
|
|
> .citizen-ui-icon::before {
|
|
opacity: var( --opacity-icon-base--hover );
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
|
|
> .citizen-ui-icon::before {
|
|
opacity: var( --opacity-icon-base--selected );
|
|
}
|
|
}
|
|
|
|
// Remove Safari summary marker
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
// Reset hover styles if it is a touch device
|
|
// This is dumb but hover:hover overrides active states
|
|
@media ( hover: none ) {
|
|
&:hover {
|
|
background-color: transparent;
|
|
|
|
.citizen-ui-icon::before {
|
|
opacity: var( --opacity-icon-base );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-details {
|
|
&[ open ] {
|
|
+ .citizen-menu__card {
|
|
transition: var( --transition-menu );
|
|
transition-property: transform;
|
|
transform: none;
|
|
|
|
> * {
|
|
opacity: 1;
|
|
transition: var( --transition-menu );
|
|
transition-property: opacity;
|
|
}
|
|
}
|
|
|
|
> .citizen-dropdown-summary {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
&-details {
|
|
// Dismiss affordnance overlay
|
|
&::before {
|
|
z-index: -1;
|
|
content: '';
|
|
background: var( --background-color-backdrop-light );
|
|
backdrop-filter: blur( 2px );
|
|
opacity: 0;
|
|
}
|
|
|
|
&[ open ]::before {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0; // Needed for menu to work in Safari
|
|
opacity: 1;
|
|
transition: var( --transition-menu );
|
|
transition-property: opacity;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
/* HACK: Disable page from scolling when a dropdown menu is opened */
|
|
body:has( .citizen-dropdown-details[ open ] ) {
|
|
overflow: hidden;
|
|
}
|
|
}
|