153 lines
3.5 KiB
SCSS
153 lines
3.5 KiB
SCSS
@import "variables";
|
||
$color-border: #3A33D1;
|
||
$color-border-light: #9D99E8;
|
||
$color-category-header: #4B54DE;
|
||
$color-highlight-header: #4D47D5;
|
||
$color-highlight: #3A33D1;
|
||
$color-selected-text: #272296;
|
||
$color-selected-background: #EBEBFB;
|
||
$color-left-column-bg: #F2F2FF;
|
||
$color-left-column: #4E4726;
|
||
$breakpoint-medium: 568px;
|
||
$breakpoint-large: 768px;;
|
||
|
||
|
||
// Need to add to the readme something along the lines of:
|
||
//
|
||
// The dropdown adapts to screen size. It more or less follows the breakpoints
|
||
// of Bootstrap (need to list them). The code is written mobile-first. The
|
||
// larger the screen size, the more rules we add to overwrite the previous one,
|
||
// moving from one to two column.
|
||
//
|
||
// It is expected that the page layout also follow those breakpoints. The
|
||
// breakpoints are defined as variables in the SCSS, so one can update them.
|
||
|
||
// Main autocomplete wrapper
|
||
.aa-dropdown-menu {
|
||
background-color: #FFF;
|
||
border: 1px solid #333;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
margin: 6px 0 0;
|
||
padding: 4px;
|
||
text-align: left;
|
||
left: -20px !important; // Hardcoded
|
||
right: -320px !important; // Hardcoded
|
||
}
|
||
|
||
// Each suggestion
|
||
.ads-suggestion {
|
||
color: #333;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
border-bottom: 1px solid $color-border;
|
||
}
|
||
|
||
// Main category headers
|
||
.ads-suggestion--category-header {
|
||
display: none;
|
||
background-color: $color-category-header;
|
||
color: white;
|
||
font-weight: 600;
|
||
padding: 5px 10px;
|
||
text-align: left;
|
||
// Only show it when flaggued as "__main"
|
||
.ads-suggestion__main & {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
// Highlight
|
||
.ads-suggestion--highlight {
|
||
padding: 0;
|
||
color: $color-highlight;
|
||
background: none;
|
||
font-weight: 600;
|
||
// Highlight the background in header
|
||
.ads-suggestion--category-header & {
|
||
color: inherit;
|
||
background-color: $color-highlight-header;
|
||
}
|
||
}
|
||
|
||
// Selected suggestion
|
||
.aa-cursor .ads-suggestion--content {
|
||
color: $color-selected-text;
|
||
}
|
||
.aa-cursor .ads-suggestion {
|
||
background: $color-selected-background;
|
||
}
|
||
|
||
// The secondary column is hidden on small screens
|
||
.ads-suggestion--subcategory-column {
|
||
display: none;
|
||
}
|
||
// The text snippet is hidden on small screens
|
||
.ads-suggestion--text {
|
||
display: none;
|
||
}
|
||
|
||
.ads-suggestion--content {
|
||
padding: 3px 5px;
|
||
}
|
||
|
||
.ads-suggestion--subcategory-inline {
|
||
display: inline-block;
|
||
font-weight: bold;
|
||
&:after {
|
||
content: " › ";
|
||
}
|
||
}
|
||
.ads-suggestion--title {
|
||
display: inline;
|
||
}
|
||
|
||
// BREAKPOINT 1:
|
||
// Screen is big enough to display the text snippets
|
||
@media (min-width: $breakpoint-medium) {
|
||
.ads-suggestion--text {
|
||
display: block;
|
||
font-size: .9em;
|
||
padding: 2px 0;
|
||
}
|
||
}
|
||
|
||
// BREAKPOINT 2:
|
||
// Screen is big enough to display results in two columns
|
||
@media (min-width: $breakpoint-large) {
|
||
.ads-suggestion {
|
||
display: table;
|
||
width: 100%;
|
||
border-bottom: 1px solid $color-border-light;
|
||
}
|
||
.ads-suggestion--subcategory-column {
|
||
border-right: 1px solid $color-border-light;
|
||
background: $color-left-column-bg;
|
||
color: $color-left-column;
|
||
display: table-cell;
|
||
overflow: hidden;
|
||
padding: 5px 7px 5px 5px;
|
||
text-align: right;
|
||
text-overflow: ellipsis;
|
||
vertical-align: top;
|
||
|
||
width: 135px; // Hardcoded
|
||
max-width: 135px; // Hardcoded
|
||
min-width: 135px; // Hardcoded
|
||
}
|
||
.ads-suggestion--content {
|
||
display: table-cell;
|
||
padding: 5px 10px;
|
||
}
|
||
.ads-suggestion--subcategory-inline {
|
||
display: none;
|
||
}
|
||
.ads-suggestion--title {
|
||
font-weight: 600;
|
||
}
|
||
.ads-suggestion--text {
|
||
display: block;
|
||
font-weight: normal;
|
||
padding: 2px;
|
||
}
|
||
}
|