2020-06-07 19:54:42 +00:00
|
|
|
//
|
|
|
|
// Citizen - Search styles
|
|
|
|
// https://starcitizen.tools
|
|
|
|
//
|
|
|
|
|
|
|
|
@import '../variables.less';
|
|
|
|
@import '../mixins.less';
|
|
|
|
|
|
|
|
#typeahead-suggestions {
|
|
|
|
position: absolute;
|
2020-06-09 02:36:45 +00:00
|
|
|
z-index: 90;
|
2021-01-11 16:45:52 +00:00
|
|
|
top: 38px;
|
2020-06-07 19:54:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.suggestions-dropdown {
|
2021-01-11 16:45:52 +00:00
|
|
|
display: flex; // Needed to show margin
|
2020-06-08 23:12:03 +00:00
|
|
|
width: @search-bar-width;
|
2020-06-07 19:54:42 +00:00
|
|
|
max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
|
2020-06-08 05:14:17 +00:00
|
|
|
flex-direction: column;
|
2021-01-11 16:45:52 +00:00
|
|
|
padding-top: 4px;
|
2021-01-12 20:46:40 +00:00
|
|
|
background: var( --background-color-dp-08 );
|
2020-06-08 20:26:51 +00:00
|
|
|
border-radius: 0 0 @border-radius-large @border-radius-large;
|
2020-06-08 05:13:24 +00:00
|
|
|
.boxshadow(4);
|
2020-06-07 19:54:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.suggestion {
|
|
|
|
&-link {
|
2020-06-08 05:13:24 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2021-01-11 16:45:52 +00:00
|
|
|
padding: 8px 20px;
|
2020-06-07 19:54:42 +00:00
|
|
|
|
|
|
|
&.active {
|
2021-01-12 22:03:52 +00:00
|
|
|
background-color: var( --background-color-primary--hover );
|
2021-01-12 20:46:40 +00:00
|
|
|
|
|
|
|
&:active {
|
2021-01-12 22:03:52 +00:00
|
|
|
background-color: var( --background-color-primary--active );
|
2020-06-07 19:54:42 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-08 05:13:24 +00:00
|
|
|
&-text {
|
2020-06-08 05:22:33 +00:00
|
|
|
margin-left: 15px;
|
2020-06-08 05:13:24 +00:00
|
|
|
}
|
|
|
|
|
2020-06-07 19:54:42 +00:00
|
|
|
&-title {
|
2020-06-08 05:22:33 +00:00
|
|
|
display: inline-block; // so that the margin does not occupy space
|
2021-01-11 16:45:52 +00:00
|
|
|
margin: 0 0 0.78rem * @content-scaling 0;
|
2021-01-12 20:46:40 +00:00
|
|
|
color: var( --color-base );
|
2020-06-07 22:34:12 +00:00
|
|
|
font-size: @content-h6-size;
|
2020-06-07 19:54:42 +00:00
|
|
|
line-height: 1.872rem * @content-scaling;
|
|
|
|
}
|
|
|
|
|
|
|
|
&-highlight {
|
2021-01-12 20:46:40 +00:00
|
|
|
color: var( --color-base--subtle );
|
2020-06-07 19:54:42 +00:00
|
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
&-description {
|
|
|
|
margin: 0;
|
2021-01-12 20:46:40 +00:00
|
|
|
color: var( --color-base--subtle );
|
2021-03-09 18:13:49 +00:00
|
|
|
font-family: var( --font-family-base );
|
2020-06-07 22:34:12 +00:00
|
|
|
font-size: @content-caption-size;
|
2020-06-07 19:54:42 +00:00
|
|
|
line-height: 1.43rem * @content-scaling;
|
|
|
|
}
|
|
|
|
|
|
|
|
&-thumbnail {
|
2020-06-08 05:13:24 +00:00
|
|
|
width: 70px;
|
2020-06-08 05:22:33 +00:00
|
|
|
min-width: 70px; // so it won't be squeezed by the content text
|
2020-06-08 05:13:24 +00:00
|
|
|
height: 60px;
|
2021-01-12 20:46:40 +00:00
|
|
|
background-color: var( --background-color-framed );
|
2020-06-07 19:54:42 +00:00
|
|
|
background-position: center center;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: cover;
|
2021-01-11 16:45:52 +00:00
|
|
|
border-radius: @border-radius-small;
|
2020-06-07 19:54:42 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-08 05:13:24 +00:00
|
|
|
#suggestion {
|
|
|
|
&-link {
|
|
|
|
&-first {
|
|
|
|
margin-top: 8px;
|
|
|
|
}
|
2020-06-08 04:27:25 +00:00
|
|
|
|
2020-06-08 05:13:24 +00:00
|
|
|
&-last {
|
|
|
|
margin-bottom: 8px;
|
|
|
|
}
|
2020-06-08 04:27:25 +00:00
|
|
|
}
|
2020-06-08 05:14:17 +00:00
|
|
|
|
2020-06-08 05:13:24 +00:00
|
|
|
&-special {
|
2021-01-11 16:45:52 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-06-08 05:13:24 +00:00
|
|
|
padding: 1rem;
|
2021-01-12 20:46:40 +00:00
|
|
|
border-top: 1px solid var( --border-color-base );
|
2020-06-08 20:26:51 +00:00
|
|
|
border-radius: 0 0 @border-radius-large @border-radius-large;
|
2021-01-12 20:46:40 +00:00
|
|
|
color: var( --color-base );
|
2020-06-07 22:34:12 +00:00
|
|
|
|
2020-06-08 05:13:24 +00:00
|
|
|
&-icon {
|
|
|
|
width: 20px;
|
2020-06-09 01:00:27 +00:00
|
|
|
min-width: 20px;
|
2020-06-08 05:13:24 +00:00
|
|
|
height: 20px;
|
2021-01-11 16:45:52 +00:00
|
|
|
margin: 0 14px 0 10px;
|
2020-06-08 05:13:24 +00:00
|
|
|
background-repeat: no-repeat;
|
|
|
|
}
|
2020-06-07 22:34:12 +00:00
|
|
|
|
2020-06-08 05:13:24 +00:00
|
|
|
&-text {
|
2021-01-11 16:45:52 +00:00
|
|
|
overflow: hidden;
|
2020-06-08 05:13:24 +00:00
|
|
|
padding: 5px 0; // make it looks more center aligned
|
2021-03-09 18:13:49 +00:00
|
|
|
font-family: var( --font-family-base );
|
2021-01-11 16:45:52 +00:00
|
|
|
font-size: @content-caption-size;
|
2020-06-08 05:13:24 +00:00
|
|
|
font-weight: bold;
|
2020-06-09 01:00:27 +00:00
|
|
|
text-overflow: ellipsis; // handle overflow
|
2020-06-08 05:13:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
2021-01-12 20:46:40 +00:00
|
|
|
background-color: var( --background-color-primary );
|
2020-06-08 05:13:24 +00:00
|
|
|
}
|
2020-06-07 22:34:12 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-07 19:54:42 +00:00
|
|
|
/* using element selector to override default anchor styles */
|
|
|
|
a.suggestion-link:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
// RTL tweaks
|
|
|
|
.rtl {
|
|
|
|
#searchform {
|
|
|
|
right: unset;
|
2021-01-11 16:45:52 +00:00
|
|
|
left: @icon-box-size + @margin-side + @icon-padding;
|
2020-06-07 19:54:42 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-16 19:23:15 +00:00
|
|
|
/**
|
|
|
|
* Loading indicator for search widget
|
|
|
|
* Based on Vector
|
|
|
|
*
|
|
|
|
* By adding a class on the parent search form
|
|
|
|
* <div id="searchform" class="search-form__loader"></div>
|
|
|
|
* A pseudo element is added via ':after' that adds the loading indicator.
|
|
|
|
*
|
|
|
|
* After appearing for more than a second, a progress-bar animation appears
|
|
|
|
* above the loading indicator.
|
|
|
|
*
|
|
|
|
**/
|
|
|
|
#searchform.search-form__loading:after {
|
|
|
|
position: absolute;
|
2021-01-11 16:45:52 +00:00
|
|
|
z-index: 999;
|
2020-10-16 19:23:15 +00:00
|
|
|
top: 100%;
|
2021-01-11 16:45:52 +00:00
|
|
|
// Position loader below the input.
|
|
|
|
display: block;
|
|
|
|
overflow: hidden;
|
2020-10-16 19:23:15 +00:00
|
|
|
width: 100%;
|
|
|
|
// Hide text in case it extends beyond the input.
|
|
|
|
height: @search-loader-progress-bar-height;
|
2021-01-11 16:45:52 +00:00
|
|
|
// Ensure it doesn't extend beyond the input.
|
|
|
|
box-sizing: border-box;
|
|
|
|
// Overlay the form
|
|
|
|
margin-top: -@search-loader-progress-bar-height;
|
2020-10-16 19:23:15 +00:00
|
|
|
// Animates the progress-bar.
|
|
|
|
animation: search-loader-progress-bar
|
|
|
|
/* duration */ 1200ms
|
|
|
|
/* timing function */ linear
|
|
|
|
/* delay */ 1000ms
|
|
|
|
/* iteration count */ infinite
|
|
|
|
/* fill direction */ alternate;
|
2021-01-11 16:45:52 +00:00
|
|
|
// Add a progress-bar to the loading indicator,
|
|
|
|
// but only show it animating after 1 second of loading.
|
2021-01-12 20:46:40 +00:00
|
|
|
background: /*image*/ linear-gradient( 90deg, var( --color-primary ) 0%, var( --color-primary ) 100% )
|
2021-01-11 16:45:52 +00:00
|
|
|
/* position / size*/ -10% 0 ~'/' 0 @search-loader-progress-bar-height
|
|
|
|
/* repeat */ no-repeat,transparent;
|
|
|
|
// Align style with the form
|
|
|
|
border-radius: 0 0 @border-radius-large @border-radius-large;
|
|
|
|
// Placeholder text
|
|
|
|
content: 'loading';
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
2020-10-16 19:23:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes search-loader-progress-bar {
|
|
|
|
0% {
|
|
|
|
background-position: -10% 0;
|
2021-01-11 16:45:52 +00:00
|
|
|
background-size: 0 @search-loader-progress-bar-height;
|
2020-10-16 19:23:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
30% {
|
|
|
|
background-position: -10% 0;
|
2021-01-11 16:45:52 +00:00
|
|
|
background-size: 30% @search-loader-progress-bar-height;
|
2020-10-16 19:23:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
70% {
|
|
|
|
background-position: 110% 0;
|
2021-01-11 16:45:52 +00:00
|
|
|
background-size: 30% @search-loader-progress-bar-height;
|
2020-10-16 19:23:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
background-position: 110% 0;
|
2021-01-11 16:45:52 +00:00
|
|
|
background-size: 0 @search-loader-progress-bar-height;
|
2020-10-16 19:23:15 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-08 23:12:03 +00:00
|
|
|
@media only screen and ( max-width: @search-bar-width ) {
|
2020-06-07 19:54:42 +00:00
|
|
|
.suggestions-dropdown {
|
|
|
|
position: fixed;
|
|
|
|
left: 0;
|
|
|
|
max-width: 100vw;
|
|
|
|
}
|
|
|
|
}
|