516 lines
12 KiB
SCSS
516 lines
12 KiB
SCSS
// Detect lightness
|
|
@function detectLightness($color) {
|
|
@if (lightness($color) > 60) {
|
|
@return mix($color, #000, 90%);
|
|
} @else {
|
|
@return mix($color, #fff, 90%);
|
|
}
|
|
}
|
|
|
|
// Spacing
|
|
@function spacing($type) {
|
|
@if $type == 'compact' {
|
|
@return 12px;
|
|
}
|
|
@if $type == 'spacious' {
|
|
@return 22px;
|
|
} @else {
|
|
@return 16px;
|
|
}
|
|
}
|
|
|
|
// Description
|
|
@function desc($display) {
|
|
@if $display == false {
|
|
@return none;
|
|
} @else {
|
|
@return block;
|
|
}
|
|
}
|
|
|
|
// Layout type
|
|
@mixin layout-width($type) {
|
|
@if $type == 'small' {
|
|
max-width: 500px;
|
|
min-width: 400px;
|
|
}
|
|
@if $type == 'normal' {
|
|
max-width: 600px;
|
|
min-width: 500px;
|
|
}
|
|
@if $type == 'large' {
|
|
max-width: 800px;
|
|
min-width: 600px;
|
|
}
|
|
@if $type == 'full' {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Alignment type
|
|
@mixin alignment-type($type) {
|
|
@if $type == 'left' {
|
|
left: 0 !important;
|
|
right: inherit !important;
|
|
}
|
|
@if $type == 'right' {
|
|
right: 0 !important;
|
|
left: inherit !important;
|
|
}
|
|
@if $type == 'center' {
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
margin: auto !important;
|
|
}
|
|
}
|
|
|
|
// Mixin - Shadow type
|
|
@mixin shadow-type($type) {
|
|
@if $type == 'light' {
|
|
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
@if $type == 'heavy' {
|
|
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),
|
|
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
}
|
|
}
|
|
|
|
// Mixin - highlight
|
|
@function set-highlight($highlight, $color) {
|
|
@if $highlight == 1 and lightness($color) < 60 {
|
|
@return mix(#fff, $color, 90%);
|
|
} @else {
|
|
@return darken(detectLightness($color), 30%);
|
|
}
|
|
}
|
|
|
|
@mixin dropdown(
|
|
$main-color: #458ee1,
|
|
$layout-width: normal,
|
|
$layout-type: normal,
|
|
$layout-alignment: 'align',
|
|
$background-color: #ffffff,
|
|
$border-radius: 4,
|
|
$border-width: 1,
|
|
$border-color: #d9d9d9,
|
|
$box-shadow: light,
|
|
$branding-position: bottom,
|
|
$font-size: normal,
|
|
$header-color: #33363d,
|
|
$title-color: #02060c,
|
|
$subtitle-color: #a4a7ae,
|
|
$text-color: #63676d,
|
|
$highlight-color: #3881ff,
|
|
$spacing: normal,
|
|
$include-desc: true,
|
|
$background-category-header: #ffffff,
|
|
$highlight-opacity: 0.1,
|
|
$highlight-type: 'underline',
|
|
$code-background: #ebebeb,
|
|
$responsive-breakpoint: 768px
|
|
) {
|
|
$header-size: 1em;
|
|
$title-size: 0.9em;
|
|
$text-size: 0.85em;
|
|
$subtitle-size: 0.9em;
|
|
$padding: spacing($spacing);
|
|
|
|
@if $font-size == 'small' {
|
|
$header-size: 0.95em;
|
|
$title-size: 0.8em;
|
|
$text-size: 0.75em;
|
|
$subtitle-size: 0.8em;
|
|
} @else if $font-size == 'large' {
|
|
$header-size: 1.1em;
|
|
$title-size: 1em;
|
|
$text-size: 0.9em;
|
|
$subtitle-size: 1em;
|
|
}
|
|
|
|
.algolia-autocomplete {
|
|
&.algolia-autocomplete-right .ds-dropdown-menu {
|
|
@include alignment-type(right);
|
|
&:before {
|
|
right: 48px;
|
|
}
|
|
}
|
|
&.algolia-autocomplete-left .ds-dropdown-menu {
|
|
@include alignment-type(left);
|
|
&:before {
|
|
left: 48px;
|
|
}
|
|
}
|
|
|
|
// Dropdown wrapper
|
|
.ds-dropdown-menu {
|
|
position: relative;
|
|
top: -6px;
|
|
border-radius: $border-radius + px;
|
|
margin: 6px 0 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
height: auto;
|
|
position: relative;
|
|
background: transparent;
|
|
border: none;
|
|
z-index: 999;
|
|
@include layout-width($layout-width);
|
|
@include shadow-type($box-shadow);
|
|
|
|
// Arrow
|
|
&:before {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
width: 14px;
|
|
height: 14px;
|
|
background: $background-color;
|
|
z-index: 1000;
|
|
top: -7px;
|
|
border-top: $border-width + px solid $border-color;
|
|
border-right: $border-width + px solid $border-color;
|
|
transform: rotate(-45deg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.ds-suggestions {
|
|
position: relative;
|
|
z-index: 1000;
|
|
margin-top: $padding/2;
|
|
& a:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.ds-suggestion {
|
|
cursor: pointer;
|
|
|
|
&.ds-cursor {
|
|
.algolia-docsearch-suggestion.suggestion-layout-simple {
|
|
background-color: rgba($main-color, 0.05);
|
|
}
|
|
|
|
.algolia-docsearch-suggestion:not(.suggestion-layout-simple) {
|
|
.algolia-docsearch-suggestion--content {
|
|
background-color: rgba($main-color, 0.05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^='ds-dataset-'] {
|
|
position: relative;
|
|
border: solid $border-width + px $border-color;
|
|
background: $background-color;
|
|
border-radius: $border-radius + px;
|
|
overflow: auto;
|
|
padding: 0 $padding/2 $padding/2;
|
|
}
|
|
|
|
// Inner-grid setup
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
// Each suggestion item is wrapped
|
|
.algolia-docsearch-suggestion {
|
|
display: block;
|
|
position: relative;
|
|
padding: 0 $padding/2;
|
|
background: $background-color;
|
|
color: $title-color;
|
|
overflow: hidden;
|
|
|
|
@if $highlight-type == basic {
|
|
&--highlight {
|
|
color: $main-color;
|
|
background-color: rgba($main-color, $highlight-opacity);
|
|
}
|
|
} @else {
|
|
&--highlight {
|
|
color: set-highlight($highlight-opacity, $main-color);
|
|
background: rgba(mix($main-color, #fff, 60%), $highlight-opacity);
|
|
padding: 0.1em 0.05em;
|
|
}
|
|
|
|
&--category-header
|
|
.algolia-docsearch-suggestion--category-header-lvl0
|
|
.algolia-docsearch-suggestion--highlight,
|
|
&--category-header
|
|
.algolia-docsearch-suggestion--category-header-lvl1
|
|
.algolia-docsearch-suggestion--highlight {
|
|
padding: 0 0 1px;
|
|
background: inherit;
|
|
box-shadow: inset 0 -2px 0 0 rgba($main-color, 0.8);
|
|
color: inherit;
|
|
}
|
|
|
|
&--text .algolia-docsearch-suggestion--highlight {
|
|
padding: 0 0 1px;
|
|
background: inherit;
|
|
box-shadow: inset 0 -2px 0 0 rgba($main-color, 0.8);
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
&--content {
|
|
display: block;
|
|
float: right;
|
|
width: 70%;
|
|
position: relative;
|
|
padding: $padding/3 0 $padding/3 $padding/1.5;
|
|
cursor: pointer;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 1px;
|
|
background: #ddd;
|
|
left: -1px;
|
|
}
|
|
}
|
|
|
|
&--category-header {
|
|
position: relative;
|
|
border-bottom: 1px solid #ddd;
|
|
display: none;
|
|
margin-top: $padding/2;
|
|
padding: $padding/4 0;
|
|
font-size: $header-size;
|
|
color: $header-color;
|
|
}
|
|
|
|
&--wrapper {
|
|
width: 100%;
|
|
float: left;
|
|
padding: $padding/2 0 0 0;
|
|
}
|
|
|
|
&--subcategory-column {
|
|
float: left;
|
|
width: 30%;
|
|
padding-left: 0;
|
|
text-align: right;
|
|
position: relative;
|
|
padding: $padding/3 $padding/1.5;
|
|
color: $subtitle-color;
|
|
font-size: $subtitle-size;
|
|
word-wrap: break-word;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 1px;
|
|
background: #ddd;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
&--subcategory-inline {
|
|
display: none;
|
|
}
|
|
|
|
&--title {
|
|
margin-bottom: $padding/4;
|
|
color: $title-color;
|
|
font-size: $title-size;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&--text {
|
|
display: desc($include-desc);
|
|
line-height: 1.2em;
|
|
font-size: $text-size;
|
|
color: $text-color;
|
|
}
|
|
|
|
&--no-results {
|
|
width: 100%;
|
|
padding: $padding/2 0;
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
code {
|
|
padding: 1px 5px;
|
|
font-size: 90%;
|
|
border: none;
|
|
color: #222222;
|
|
background-color: $code-background;
|
|
border-radius: 3px;
|
|
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
<<<<<<< HEAD
|
|
=======
|
|
.algolia-docsearch-suggestion--highlight {
|
|
background: none;
|
|
}
|
|
>>>>>>> master
|
|
}
|
|
|
|
// Rules to display categories and subcategories
|
|
&.algolia-docsearch-suggestion__main
|
|
.algolia-docsearch-suggestion--category-header {
|
|
display: block;
|
|
}
|
|
|
|
&.algolia-docsearch-suggestion__secondary {
|
|
display: block;
|
|
}
|
|
|
|
@media all and (min-width: #{$responsive-breakpoint}) {
|
|
.algolia-docsearch-suggestion--subcategory-column {
|
|
display: block;
|
|
}
|
|
}
|
|
@media all and (max-width: #{$responsive-breakpoint}) {
|
|
.algolia-docsearch-suggestion--subcategory-column {
|
|
display: inline-block;
|
|
width: auto;
|
|
text-align: left;
|
|
float: left;
|
|
padding: 0;
|
|
|
|
color: #02060c;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
opacity: 0.5;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
&:after {
|
|
content: '|';
|
|
}
|
|
}
|
|
.algolia-docsearch-suggestion--content {
|
|
display: inline-block;
|
|
width: auto;
|
|
text-align: left;
|
|
float: left;
|
|
padding: 0;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//Simple layout (no column)
|
|
.suggestion-layout-simple {
|
|
&.algolia-docsearch-suggestion {
|
|
border-bottom: solid 1px #eee;
|
|
padding: $padding/2;
|
|
margin: 0;
|
|
}
|
|
|
|
.algolia-docsearch-suggestion {
|
|
&--content {
|
|
width: 100%;
|
|
padding: 0;
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&--category-header {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block;
|
|
width: 100%;
|
|
border: none;
|
|
|
|
&-lvl0 {
|
|
opacity: 0.6;
|
|
font-size: $text-size;
|
|
}
|
|
|
|
&-lvl1 {
|
|
opacity: 0.6;
|
|
font-size: $text-size;
|
|
|
|
&::before {
|
|
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 20 38" xmlns="http://www.w3.org/2000/svg"><path d="M1.49 4.31l14 16.126.002-2.624-14 16.074-1.314 1.51 3.017 2.626 1.313-1.508 14-16.075 1.142-1.313-1.14-1.313-14-16.125L3.2.18.18 2.8l1.31 1.51z" fill-rule="evenodd" fill="%231D3657" /></svg>');
|
|
content: '';
|
|
width: 10px;
|
|
height: 10px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--wrapper {
|
|
width: 100%;
|
|
float: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
&--duplicate-content,
|
|
&--subcategory-inline {
|
|
display: none !important;
|
|
}
|
|
|
|
&--title {
|
|
margin: 0;
|
|
color: $main-color;
|
|
font-size: $title-size;
|
|
font-weight: normal;
|
|
|
|
&::before {
|
|
content: '#';
|
|
font-weight: bold;
|
|
color: $main-color;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
&--text {
|
|
margin: $padding/4 0 0;
|
|
display: desc($include-desc);
|
|
line-height: 1.4em;
|
|
padding: $padding/3 $padding/2;
|
|
background: #f8f8f8;
|
|
font-size: $text-size;
|
|
opacity: 0.8;
|
|
|
|
.algolia-docsearch-suggestion--highlight {
|
|
color: darken($text-color, 15%);
|
|
font-weight: bold;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// powered by
|
|
.algolia-docsearch-footer {
|
|
width: 30%;
|
|
height: 25px;
|
|
z-index: 2000;
|
|
margin-top: $padding/1.5;
|
|
float: right;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
|
|
&--logo {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|