mediawiki-skins-Citizen/resources/skins.citizen.search/skins.citizen.search.less
2022-08-01 01:45:32 -04:00

118 lines
2.1 KiB
Plaintext

@import '../variables.less';
@import '../mixins.less';
.citizen-typeahead {
position: absolute;
top: 100%;
overflow: auto;
width: 100%;
max-height: ~'calc( 100vh - var( --height-header ) )';
box-sizing: border-box;
padding-top: 0.75rem;
margin-top: -0.75rem;
//border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
.citizen-card;
.citizen-card-hide( 50% 0, Y, false );
// Well this won't be loaded before .citizen-animation-ready anyways
.citizen-card-transition();
&-suggestion {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
&__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 );
font-weight: 500;
}
&__redirect {
margin-left: 0.25rem;
color: var( --color-base );
font-size: 0.8125rem;
}
&__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: 0.8125rem;
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: 0.75rem;
padding-left: 0.75rem;
color: var( --color-base );
}
picture {
width: 100%;
max-width: 70px;
margin-right: 0.75rem;
img,
source {
width: inherit;
height: inherit;
}
}
&--expanded {
.citizen-card-show( false );
}
}