New default design
This commit is contained in:
Maxime Locqueville
parent
487de6dbc5
commit
a277a32a58
6 changed files with 735 additions and 234 deletions
|
|
@ -1,38 +0,0 @@
|
|||
/* Bottom border of each suggestion */
|
||||
.algolia-docsearch-suggestion {
|
||||
border-bottom-color: #3A3DD1;
|
||||
}
|
||||
/* Main category headers */
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
background-color: #4B54DE;
|
||||
}
|
||||
/* Highlighted search terms */
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: #3A33D1;
|
||||
}
|
||||
/* Highligted search terms in the main category headers */
|
||||
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
|
||||
background-color: #4D47D5;
|
||||
}
|
||||
/* Currently selected suggestion */
|
||||
.aa-cursor .algolia-docsearch-suggestion--content {
|
||||
color: #272296;
|
||||
}
|
||||
.aa-cursor .algolia-docsearch-suggestion {
|
||||
background: #EBEBFB;
|
||||
}
|
||||
|
||||
/* For bigger screens, when displaying results in two columns */
|
||||
@media (min-width: 768px) {
|
||||
/* Bottom border of each suggestion */
|
||||
.algolia-docsearch-suggestion {
|
||||
border-bottom-color: #7671df;
|
||||
}
|
||||
/* Left column, with secondary category header */
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
border-right-color: #7671df;
|
||||
background-color: #F2F2FF;
|
||||
color: #4E4726;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
<title>Documentation</title>
|
||||
<link rel="stylesheet" type="text/css" href="/stripe.css" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="/docsearch.css" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="/docsearch-styling.css" media="screen" />
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
</head>
|
||||
|
||||
|
|
|
|||
477
src/styles/_dropdown.scss
Normal file
477
src/styles/_dropdown.scss
Normal file
File diff suppressed because one or more lines are too long
208
src/styles/_searchbox.scss
Normal file
208
src/styles/_searchbox.scss
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
|
||||
@function even-px($value) {
|
||||
@if type-of($value) == 'number' {
|
||||
@if (unitless($value)) {
|
||||
$value: $value * 1px;
|
||||
} @else if unit($value) == 'em' {
|
||||
$value: ($value / 1em * 16px);
|
||||
} @else if unit($value) == 'pts' {
|
||||
$value: $value * 1.3333 * 1px;
|
||||
} @else if unit($value) == '%' {
|
||||
$value: $value * 16 / 100% * 1px;
|
||||
};
|
||||
$value: round($value);
|
||||
@if ($value % 2 != 0) {
|
||||
$value: $value + 1;
|
||||
}
|
||||
@return $value;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin searchbox(
|
||||
$font-size: 90%,
|
||||
$input-width: 350px,
|
||||
$input-height: $font-size * 2.4,
|
||||
$border-width: 1px,
|
||||
$border-radius: $input-height / 2,
|
||||
$input-border-color: #ccc,
|
||||
$input-focus-border-color: #1ec9ea,
|
||||
$input-background: #f8f8f8,
|
||||
$input-focus-background: #fff,
|
||||
$placeholder-color: #aaa,
|
||||
$icon: 'sbx-icon-search-1',
|
||||
$icon-size: $input-height / 1.6,
|
||||
$icon-position: left,
|
||||
$icon-color: #888,
|
||||
$icon-background: $input-focus-border-color,
|
||||
$icon-background-opacity: .1,
|
||||
$icon-clear: 'sbx-icon-clear-1',
|
||||
$icon-clear-size: $font-size / 1.1
|
||||
) {
|
||||
.searchbox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: $input-width;
|
||||
height: even-px($input-height)!important;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
visibility: visible!important;
|
||||
|
||||
.algolia-autocomplete{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
transition: box-shadow .4s ease, background .4s ease;
|
||||
border: 0;
|
||||
border-radius: even-px($border-radius);
|
||||
box-shadow: inset 0 0 0 $border-width $input-border-color;
|
||||
background: $input-background !important;
|
||||
padding: 0;
|
||||
padding-right: if($icon-position == 'right', even-px($input-height) + even-px($icon-clear-size) + 8px, even-px($input-height * .8))
|
||||
+ if($icon-background-opacity == 0, 0, even-px($font-size));
|
||||
padding-left: if($icon-position == 'right',
|
||||
even-px($font-size / 2) + even-px($border-radius / 2),
|
||||
even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size * 1.2)));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
font-size: $font-size;
|
||||
appearance: none;
|
||||
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 $border-width $input-focus-border-color;
|
||||
background: $input-focus-background;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $placeholder-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: if($icon-position == 'right', 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius);
|
||||
background-color: rgba($icon-background, $icon-background-opacity);
|
||||
padding: 0;
|
||||
width: even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size / 2));
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
@if $icon-position == 'right' {
|
||||
right: 0;
|
||||
left: inherit;
|
||||
} @else {
|
||||
right: inherit;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Helper for vertical alignement of the icon
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: -4px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: even-px($icon-size);
|
||||
height: even-px($icon-size);
|
||||
vertical-align: middle;
|
||||
fill: $icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__reset {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px;
|
||||
right: if($icon-position == 'right',
|
||||
even-px($input-height) + if($icon-background-opacity == 0, 0 , even-px($font-size)),
|
||||
(even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px);
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
fill: rgba(#000, .5);
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin: 4px;
|
||||
width: even-px($icon-clear-size);
|
||||
height: even-px($icon-clear-size);
|
||||
}
|
||||
}
|
||||
|
||||
&__input:valid ~ &__reset {
|
||||
display: block;
|
||||
animation-name: sbx-reset-in;
|
||||
animation-duration: .15s;
|
||||
}
|
||||
|
||||
@at-root{
|
||||
@keyframes sbx-reset-in {
|
||||
0% {
|
||||
transform: translate3d(-20%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,46 @@
|
|||
$color-border: #3A3A3A;
|
||||
$color-border-light: lighten($color-border, 15%);
|
||||
$color-category-header-background: #3C4658;
|
||||
$color-highlight-header-background: lighten($color-category-header-background, 15%);
|
||||
$color-highlight-text: #0064E1;
|
||||
$color-selected-background: #E7EDF3;
|
||||
$color-selected-text: #0064E1;
|
||||
$color-left-column-bg: #F1F3F5;
|
||||
$color-left-column: #555;
|
||||
// SEARCHBOX
|
||||
$searchbox-config: (
|
||||
input-width: 200px,
|
||||
input-height: 32px,
|
||||
border-width: 1px,
|
||||
border-radius: 16px,
|
||||
input-border-color: #CCCCCC,
|
||||
input-focus-border-color: #AAAAAA,
|
||||
input-background: #FFFFFF,
|
||||
input-focus-background: #FFFFFF,
|
||||
font-size: 12px,
|
||||
placeholder-color: #AAAAAA,
|
||||
icon-size: 14px,
|
||||
icon-position: left,
|
||||
icon-color: #6D7E96,
|
||||
icon-background: #458EE1,
|
||||
icon-background-opacity: 0,
|
||||
icon-clear-size: 8px
|
||||
) !default;
|
||||
|
||||
$breakpoint-medium: 568px;
|
||||
$breakpoint-large: 768px;
|
||||
// DROPDOWN
|
||||
$dropdown-config: (
|
||||
main-color: #458EE1,
|
||||
layout-type: normal,
|
||||
layout-width: normal,
|
||||
layout-alignment: align,
|
||||
background-color: #fff,
|
||||
border-radius: 4,
|
||||
border-width: 1,
|
||||
border-color: #d9d9d9,
|
||||
box-shadow: light,
|
||||
branding-position: bottom,
|
||||
spacing: normal,
|
||||
include-desc: yes,
|
||||
background-category-header: #ffffff,
|
||||
font-size: normal,
|
||||
header-color: #33363D,
|
||||
title-color: #02060C,
|
||||
subtitle-color: #A4A7AE,
|
||||
text-color: #63676D,
|
||||
highlight-color: #3881FF,
|
||||
highlight-opacity: .1,
|
||||
highlight-type: underline
|
||||
) !default;
|
||||
|
||||
$dropdown-min-width-medium: 400px;
|
||||
$dropdown-min-width-large: 600px;
|
||||
$builder-height: 260px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue