mediawiki-skins-Citizen/resources/skins.citizen.search/skins.citizen.search.less
2022-05-02 21:36:59 -04:00

117 lines
2 KiB
Plaintext

@import '../variables.less';
@import '../mixins.less';
.citizen-typeahead {
position: absolute;
z-index: 101;
top: 100%;
overflow: auto;
width: 100%;
max-height: ~'calc( 100vh - var( --height-header ) )';
box-sizing: border-box;
padding-top: 12px;
margin-top: -12px;
//border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
.citizen-card;
.citizen-card-hide( 50% 0, Y );
// Well this won't be loaded before .citizen-animation-ready anyways
.citizen-card-transition();
&-suggestion {
padding-top: 6px;
padding-bottom: 6px;
opacity: 0;
&__thumbnail {
overflow: hidden;
height: 60px;
background-color: #eaecf0;
border-radius: var( --border-radius--medium );
img,
source {
object-fit: cover;
}
}
&__text {
overflow: hidden;
white-space: nowrap;
}
&__title {
color: var( --color-base--emphasized );
font-weight: 700;
&__highlight {
color: var( --color-base--subtle );
}
}
&__description {
margin-top: 0.1rem;
color: var( --color-base--subtle );
font-size: @content-caption-size;
}
&__title,
&__description {
overflow: hidden;
text-overflow: ellipsis;
}
}
&-footer {
padding-top: var( --border-radius--large );
padding-bottom: var( --border-radius--large );
border-top: 1px solid var( --border-color-base );
border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
font-size: @content-monospace-size;
font-weight: 450;
&__icon {
height: var( --size-icon );
}
&__text {
strong {
color: var( --color-base--emphasized );
}
}
}
&-option {
&--active {
background-color: var( --background-color-primary--hover );
}
}
a {
display: flex;
align-items: center;
padding-right: 12px;
padding-left: 12px;
color: var( --color-base );
}
picture {
width: 100%;
max-width: 70px;
margin-right: 12px;
img,
source {
width: inherit;
height: inherit;
}
}
&--expanded {
.citizen-card-show( false );
.citizen-typeahead-suggestion {
.citizen-card-content-show;
}
}
}