Page MenuHomeWickedGov Phorge
Files F5970531

Search.less
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

Search.less
View Options

@width-search-bar: 800px;
@position-offset-y-desktop: 3.5rem; /* Sync with search button position */
.citizen-search {
--width-search-bar: @width-search-bar;
--height-search-bar: 2.75rem;
@media ( min-width: @min-width-breakpoint-desktop ) {
--height-search-bar: 3rem;
}
.citizen-menu__card {
--size-icon: 1rem;
top: 0;
right: 0;
left: 0;
width: var( --width-search-bar );
max-width: ~'calc(100vw - var( --padding-page ) )';
max-height: var( --header-card-maxheight );
margin-inline: auto;
transform-origin: center var( --transform-origin-offset-start );
@media ( min-width: @min-width-breakpoint-desktop ) {
top: @position-offset-y-desktop;
max-height: ~'calc( 100vh - ( var( --space-xs ) + @{position-offset-y-desktop} ) * 2 )';
}
}
/* So that JS can find the DOM element for the keyboard shortcut */
&.citizen-dropdown .citizen-menu__card {
content-visibility: visible;
}
.citizen-dropdown-details {
+ .citizen-menu__card {
position: fixed;
}
&[ open ] + .citizen-menu__card > .citizen-search__form {
transition: none; /* Do not animate typeahead since it looks weird */
}
}
&__formButton,
&__formIcon {
display: grid;
place-content: center;
/* Sync with left icons (--size-icon + --space-sm * 2) and typeahead */
width: ~'calc( 1.25rem + var( --space-sm ) * 2 )';
height: var( --height-search-bar );
}
&__formButton {
color: var( --color-base );
cursor: pointer;
border-radius: var( --border-radius-base );
.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 );
}
}
}
&__random {
.citizen-ui-icon::before {
transition-property: opacity, transform;
}
&:hover {
.citizen-ui-icon::before {
transform: rotate( 30deg );
}
}
}
&__form,
&__footer {
position: sticky;
z-index: @z-index-stacking-1;
.mixin-citizen-frosted-glass-simple;
}
&__form {
top: 0;
display: flex;
height: 100%;
overflow: hidden;
font-size: var( --font-size-small );
// HACK: Target mobile Safari only to prevent auto zooming the input field
@supports (-webkit-touch-callout: none) {
font-size: 1rem;
}
@media ( min-width: @min-width-breakpoint-desktop ) {
font-size: var( --font-size-medium );
}
/**
* Loading indicator for searchbox
* See common/progressbar.less
**/
&.citizen-loading::after {
position: absolute;
bottom: 0;
}
}
&__footer {
bottom: 0;
display: flex;
gap: var( --space-lg );
align-items: center;
justify-content: space-between;
min-height: 2.5rem;
padding: 0 var( --space-md );
overflow: hidden;
color: var( --color-subtle );
white-space: nowrap;
border-top: 1px solid var( --border-color-base );
.mixin-citizen-font-styles( 'small' );
&-start,
&-end {
display: flex;
gap: var( --space-md );
align-items: center;
}
}
}
#searchInput {
flex-grow: 1;
padding: 0;
font-size: inherit;
appearance: none;
background: transparent; // Cancel default background
border: 0; // Cancel default border
&: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 {
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;
}
}
}

File Metadata

Mime Type
text/plain
Expires
Sat, Oct 3, 14:33 (9 h, 1 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
fe/72/aa272ed4e7145a305792374b216b
Default Alt Text
Search.less (3 KB)

Event Timeline