mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-29 16:45:28 +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
98 lines
1.8 KiB
Plaintext
98 lines
1.8 KiB
Plaintext
/* TODO: Use SVG animtation to replace CSS icons */
|
|
.citizen-drawer {
|
|
.citizen-dropdown-summary {
|
|
> .citizen-ui-icon {
|
|
display: grid;
|
|
place-content: center;
|
|
transition: var( --transition-hover );
|
|
transition-property: transform;
|
|
|
|
> span {
|
|
display: block;
|
|
width: 1.125rem;
|
|
height: 0.125rem;
|
|
margin: 0.09375rem 0;
|
|
background-color: #000;
|
|
filter: var( --filter-invert );
|
|
border-radius: var( --border-radius--large );
|
|
opacity: var( --opacity-icon-base );
|
|
transition: inherit;
|
|
transform-origin: 0.25rem 0;
|
|
|
|
&:first-child {
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
&:nth-child( 2 ) {
|
|
transform-origin: 0 100%;
|
|
}
|
|
}
|
|
|
|
// Since this is a CSS icon, we don't need this
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
> .citizen-ui-icon {
|
|
> span {
|
|
opacity: var( --opacity-icon-base--hover );
|
|
|
|
&:first-child {
|
|
transform: translate3d( -50%, 0, 0 );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
> .citizen-ui-icon {
|
|
> span {
|
|
opacity: var( --opacity-icon-base--selected );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .citizen-dropdown-details[ open ] {
|
|
> .citizen-dropdown-summary {
|
|
> .citizen-ui-icon {
|
|
> span {
|
|
&:first-child {
|
|
opacity: 0;
|
|
/* @noflip */
|
|
transform: rotate( 0deg ) scale( 0.2, 0.2 );
|
|
}
|
|
// Reflect line
|
|
&:nth-child( 2 ) {
|
|
/* @noflip */
|
|
transform: rotate( -45deg ) translate3d( -0.125rem, 0.375rem, 0 );
|
|
}
|
|
|
|
// Hide line
|
|
&:last-child {
|
|
/* @noflip */
|
|
transform: rotate( 45deg ) translate3d( -0.3125rem, -0.4375rem, 0 );
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
> .citizen-ui-icon {
|
|
transform: scale( 0.85 );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// RTL
|
|
.rtl {
|
|
.citizen-drawer .citizen-dropdown-summary:hover {
|
|
> .citizen-ui-icon > span:first-child {
|
|
transform: translate3d( 50%, 0, 0 );
|
|
}
|
|
}
|
|
}
|