mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-30 00:55:25 +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.
126 lines
2.3 KiB
Plaintext
126 lines
2.3 KiB
Plaintext
/* TODO: Use SVG animtation to replace CSS icons */
|
|
.citizen-search {
|
|
.citizen-menu__dropdownButton {
|
|
.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-menu__dropdown[ open ] {
|
|
.citizen-menu__dropdownButton {
|
|
.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-menu__dropdownButton:hover {
|
|
.citizen-ui-icon > span {
|
|
&:first-child {
|
|
left: 0.125rem;
|
|
}
|
|
|
|
&:nth-child( 2 ) {
|
|
margin-left: -0.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|