mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-26 07:15:37 +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
128 lines
2.6 KiB
Plaintext
128 lines
2.6 KiB
Plaintext
@width-search-bar: 640px;
|
|
|
|
.citizen-search {
|
|
--width-search-bar: @width-search-bar;
|
|
--height-search-bar: 2.75rem;
|
|
|
|
.citizen-menu__card {
|
|
--size-icon: var( --height-search-bar );
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
width: var( --width-search-bar );
|
|
max-width: ~'calc(100vw - var( --padding-page ) )';
|
|
height: var( --height-search-bar );
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
overflow: initial;
|
|
transform-origin: center var( --transform-origin-offset-start );
|
|
contain: none;
|
|
|
|
.citizen-ui-icon {
|
|
&::before {
|
|
background-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__formButton {
|
|
cursor: pointer;
|
|
border-radius: var( --border-radius--small );
|
|
|
|
.citizen-ui-icon::before {
|
|
transition: var( --transition-hover );
|
|
transition-property: opacity;
|
|
}
|
|
|
|
&: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 );
|
|
}
|
|
}
|
|
}
|
|
|
|
&__clear {
|
|
.citizen-ui-icon::before {
|
|
background-size: 0.875rem; // Align with text size
|
|
}
|
|
}
|
|
|
|
&__random {
|
|
.citizen-ui-icon::before {
|
|
transition-property: opacity, transform;
|
|
}
|
|
|
|
&:hover {
|
|
.citizen-ui-icon::before {
|
|
transform: rotate( 30deg );
|
|
}
|
|
}
|
|
}
|
|
|
|
&__form {
|
|
display: flex;
|
|
|
|
/**
|
|
* Loading indicator for searchbox
|
|
* See common/progressbar.less
|
|
**/
|
|
&.citizen-loading::after {
|
|
position: absolute;
|
|
top: 100%;
|
|
}
|
|
}
|
|
|
|
#searchInput {
|
|
flex-grow: 1;
|
|
padding: 0;
|
|
font-size: var( --font-size-small );
|
|
appearance: none;
|
|
background: transparent; // Cancel default background
|
|
border: 0; // Cancel default border
|
|
|
|
// HACK: Target mobile Safari only to prevent auto zooming the input field
|
|
@supports (-webkit-touch-callout: none) {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
// The search suggestion pop-up indicates for focus state
|
|
// border-color: var( --color-progressive );
|
|
// box-shadow: inset 0 0 0 1px var( --color-progressive );
|
|
}
|
|
|
|
// Remove browser native clear all button in search field
|
|
&::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
.citizen-search {
|
|
.citizen-menu__card {
|
|
z-index: 1; // So that overlay does not cover card
|
|
width: auto;
|
|
}
|
|
|
|
// Remove searchbox open animation on mobile
|
|
// But keep suggestion animation
|
|
// So user can get to search instantly
|
|
> .citizen-dropdown[ open ] > .citizen-menu__card {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|