mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-25 14:57:31 +00:00
5d3ecd9edd
This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info.
98 lines
1.8 KiB
Plaintext
98 lines
1.8 KiB
Plaintext
/* TODO: Use SVG animtation to replace CSS icons */
|
|
.citizen-drawer {
|
|
.citizen-menu__dropdownButton {
|
|
.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-menu__dropdown[ open ] {
|
|
.citizen-menu__dropdownButton {
|
|
.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-menu__dropdownButton:hover {
|
|
.citizen-ui-icon > span:first-child {
|
|
transform: translate3d( 50%, 0, 0 );
|
|
}
|
|
}
|
|
}
|