Page MenuHomeWickedGov Phorge
Files F4112548

Dropdown.less
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

Dropdown.less
View Options

.citizen-dropdown {
.citizen-menu__card {
z-index: @z-index-dropdown;
min-width: 16rem;
max-width: 80vw;
content-visibility: hidden;
transition-timing-function: var( --transition-timing-function-ease-in );
transition-duration: var( --transition-duration-base );
transition-property: transform, content-visibility;
transition-behavior: allow-discrete;
.citizen-menu__card-content {
opacity: 0;
transition-timing-function: var( --transition-timing-function-ease-in );
transition-duration: var( --transition-duration-base );
transition-property: opacity;
}
&:empty {
display: none;
}
}
&-summary {
cursor: pointer;
// Icons have to use span inside label elements
> span:not( .citizen-ui-icon ) {
.mixin-citizen-screen-reader-only;
}
&:hover {
background-color: var( --background-color-button-quiet--hover );
}
&:active {
background-color: var( --background-color-button-quiet--active );
}
// Remove Safari summary marker
&::-webkit-details-marker {
display: none;
}
// Reset hover styles if it is a touch device
// This is dumb but hover:hover overrides active states
@media ( hover: none ) {
&:hover {
background-color: transparent;
}
}
}
&-details {
+ .citizen-menu__card {
position: absolute;
}
&[ open ] {
+ .citizen-menu__card {
content-visibility: visible;
transform: none;
transition-timing-function: var( --transition-timing-function-ease-out );
transition-duration: var( --transition-duration-medium );
.citizen-menu__card-content {
opacity: 1;
transition-delay: var( --transition-delay-menu );
transition-timing-function: var( --transition-timing-function-ease-out );
transition-duration: var( --transition-duration-medium );
}
}
> .citizen-dropdown-summary {
background-color: var( --background-color-button-quiet--active );
&:hover {
background-color: var( --background-color-button-quiet--hover );
}
}
}
}
.citizen-header__end & .citizen-menu__card {
.mixin-citizen-header-card( end );
transform-origin: var( --transform-origin-offset-end ) var( --transform-origin-offset-end );
@media ( min-width: @min-width-breakpoint-desktop ) {
transform-origin: var( --transform-origin-offset-start ) var( --transform-origin-offset-end );
}
}
@media ( max-width: @max-width-breakpoint-tablet ) {
.citizen-menu__card {
max-width: ~'calc( 100vw - var( --space-xs ) * 2 )';
}
// Add dismiss affordnance backdrop
&-details {
&::before {
content: '';
background: var( --background-color-backdrop-light );
opacity: 0;
-webkit-backdrop-filter: blur( 2px );
backdrop-filter: blur( 2px );
transition-timing-function: var( --transition-timing-function-ease );
transition-duration: var( --transition-duration-base );
transition-property: opacity;
}
&[ open ] {
&::before {
position: fixed;
inset: 0;
z-index: @z-index-off-canvas-backdrop;
opacity: 1;
transition-duration: var( --transition-duration-medium );
}
> .citizen-dropdown-summary {
position: relative;
// Slightly higher than the menu so it is not covered by the box shadow
z-index: @z-index-off-canvas + @z-index-stacking-1;
}
+ .citizen-menu__card {
z-index: @z-index-off-canvas;
}
}
}
}
}
@media ( max-width: @max-width-breakpoint-tablet ) {
/* HACK: Disable page from scolling when a dropdown menu is opened */
body:has( .citizen-dropdown-details[ open ] ) {
overflow: hidden;
}
}

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 22:54 (14 h, 42 m ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
c1/45/8a0367010247df0b9db2234289f9
Default Alt Text
Dropdown.less (3 KB)

Event Timeline