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
126 lines
2.3 KiB
Plaintext
126 lines
2.3 KiB
Plaintext
/* TODO: Use SVG animtation to replace CSS icons */
|
|
.citizen-search {
|
|
.citizen-dropdown-summary {
|
|
> .citizen-ui-icon {
|
|
box-sizing: content-box; // Magic
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: var( --transition-hover );
|
|
transition-property: transform;
|
|
|
|
> span {
|
|
position: relative;
|
|
filter: var( --filter-invert );
|
|
border-radius: var( --border-radius--small );
|
|
opacity: var( --opacity-icon-base );
|
|
transition: inherit;
|
|
|
|
&:first-child {
|
|
top: 0.3125rem;
|
|
/* @noflip */
|
|
left: 0.75rem;
|
|
height: 0.5rem;
|
|
transform: rotate( -45deg );
|
|
}
|
|
|
|
&:nth-child( 2 ) {
|
|
width: 0.625rem;
|
|
height: 0.625rem;
|
|
margin-top: -0.3125rem;
|
|
/* @noflip */
|
|
margin-left: -0.125rem;
|
|
border: 0.125rem solid #000;
|
|
border-radius: 100%;
|
|
transform: rotate( -45deg );
|
|
}
|
|
|
|
&:last-child {
|
|
left: -0.4375rem;
|
|
height: 1rem;
|
|
opacity: 0;
|
|
transform: rotate( -135deg );
|
|
}
|
|
|
|
&:first-child,
|
|
&:last-child {
|
|
width: 0.125rem;
|
|
background-color: #000;
|
|
}
|
|
}
|
|
|
|
// Since this is a CSS icon, we don't need this
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
> .citizen-ui-icon {
|
|
> span {
|
|
&:not( :last-child ) {
|
|
opacity: var( --opacity-icon-base--hover );
|
|
}
|
|
|
|
&:first-child {
|
|
height: 0.375rem;
|
|
transform: translate3d( 0.125rem, 0.125rem, 0 ) rotate( -45deg );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
> .citizen-ui-icon {
|
|
> span {
|
|
&:not( :last-child ) {
|
|
opacity: var( --opacity-icon-base--selected );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .citizen-dropdown-details[ open ] {
|
|
> .citizen-dropdown-summary {
|
|
> .citizen-ui-icon {
|
|
> span {
|
|
&:first-child {
|
|
height: 1rem;
|
|
transform: translate3d( -0.3125rem, -0.3125rem, 0 ) rotate( 135deg );
|
|
}
|
|
|
|
&:nth-child( 2 ) {
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:last-child {
|
|
opacity: var( --opacity-icon-base );
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
> .citizen-ui-icon {
|
|
transform: scale( 0.85 );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* @noflip */
|
|
.rtl {
|
|
.citizen-search .citizen-dropdown-summary:hover {
|
|
> .citizen-ui-icon > span {
|
|
&:first-child {
|
|
left: 0.125rem;
|
|
}
|
|
|
|
&:nth-child( 2 ) {
|
|
margin-left: -0.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|