diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..a9de34df --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Algolia + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 0ba67f69..7d4b3495 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -1,10 +1,33 @@ - +
+

This project is part of

+ +
+ +
Algolia Community
+
+ See More + +
+

 

+
+
+

Build unique search experiences with Algolia

+ + See Why + + + Get Started For Free +
+
+ diff --git a/docs/_includes/header.html b/docs/_includes/header.html index d3277fe4..1d3d7475 100644 --- a/docs/_includes/header.html +++ b/docs/_includes/header.html @@ -1,34 +1,82 @@ -
- -
+ + + + + + + diff --git a/docs/_includes/searchbar.html b/docs/_includes/searchbar.html deleted file mode 100644 index 02069df1..00000000 --- a/docs/_includes/searchbar.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - - diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index a2b89f28..6970bb01 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -54,6 +54,7 @@ {% endif %} + {% if site.env == 'development' %} + {% include marketing.html %} {% contentblock site-footer %} diff --git a/docs/css/_base.scss b/docs/css/_base.scss index 5a1d68bc..f1c5bcae 100644 --- a/docs/css/_base.scss +++ b/docs/css/_base.scss @@ -1,23 +1,46 @@ +// Algolia's UI-Component : +// ------------------------ +// +// VARIABLES +// --------- + +// Breakpoints +$bp-huge: 2000px; +$bp-big: 1440px; +$bp-medium: 960px; +$bp-small: 768px; + +// Dimensions +$max-container-width: 940px; +$navigation-height: 50px; +$margin: 16px; +$anchor-offset: 100px; + + +// Fonts +$font-name: "Raleway"; +$font-fallback: Helvetica Neue, helvetica; +$font-settings: $font-name, $font-fallback; + $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-size-base: 16px; $headings-font-family: "Raleway"; $headings-font-weight: 300; +// Colors +$red-pink: #fb366e; +$steel: #788795; +$black: #0a1724; +$white-75: rgba(white, 0.75); $brand-primary: #1d96c7; -//$code-color: #a3b6cb; - $text-color: rgba(black, 0.75); - -$anchor-offset: 100px; $community-color: #674492; $success-color: #58d158; $gray-light: #f3f3f3; $dark-blue: #0d1d30; $light-blue: lighten($dark-blue, 70%); - $secondary-color: green; -$navbar-height: 50px; diff --git a/docs/css/_docsearch.scss b/docs/css/_docsearch.scss index d3398230..869638af 100644 --- a/docs/css/_docsearch.scss +++ b/docs/css/_docsearch.scss @@ -1,186 +1,7 @@ -$color-border: #EEE; -$color-border-light: lighten($color-border, 15%); -$color-category-header-background: white; -$color-highlight-header-background: lighten($color-category-header-background, 15%); -$color-highlight-text: #0064E1; -$color-selected-background: rgba(#40ADDC,.07); -$color-selected-text: black; -$color-left-column-bg: white; -$color-left-column: #aaa; +@import "docsearch/docsearch", + "docsearch/dropdown", + "docsearch/searchbox"; -$breakpoint-medium: 568px; -$breakpoint-large: 768px; -$dropdown-min-width-medium: 400px; -$dropdown-min-width-large: 600px; - -// Main autocomplete wrapper -.aa-dropdown-menu { - background-color: #FFF; - border: 1px solid #333; - border-radius: 4px; - font-size: 16px; - padding: 4px; - text-align: left; - top: 38px !important; - margin-left: -$dropdown-min-width-medium !important; -} - -// Each suggestion -.algolia-docsearch-suggestion { - color: #333; - cursor: pointer; - overflow: hidden; -} - - // Each sub-suggestion - .algolia-docsearch-suggestion__secondary { - border-top: 1px solid $color-border; - } - -// Main category headers -.algolia-docsearch-suggestion--category-header { - display: none; - border-bottom: solid 1px #ccc; - color: #40ADDC; - font-weight: 600; - padding: 5px 15px; - text-align: left; - font-size: 1.1em; - background-color: white; - // Only show it when flaggued as "__main" - .algolia-docsearch-suggestion__main & { - display: block; - } -} - -// Highlight -.algolia-docsearch-suggestion--highlight { - color: #40ADDC; - background: rgba(#40ADDC,.1); - - // Highlight the background in header - .algolia-docsearch-suggestion--category-header & { - color: inherit; - background: rgba(#40ADDC,.2); - } -} - -// Selected suggestion -.aa-cursor .algolia-docsearch-suggestion--content { - color: $color-selected-text; -} -.aa-cursor .algolia-docsearch-suggestion { - background: $color-selected-background; -} - -// The secondary column is hidden on small screens -.algolia-docsearch-suggestion--subcategory-column { - display: none; - cursor: default; -} -// The text snippet is hidden on small screens -.algolia-docsearch-suggestion--text { - display: none; -} - -.algolia-docsearch-suggestion--content { - padding: 3px 5px; - width: 100%; -} - - .algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content, - .algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content { - border-top: 0; - } - -.algolia-docsearch-suggestion--subcategory-inline { - display: inline-block; - font-weight: 400; - &:after { - content: " › "; - } -} -.algolia-docsearch-suggestion--title { - display: inline; - font-weight: 600; -} - -// Footer -.algolia-docsearch-footer { - border-top: 1px solid $color-border-light; - text-align: right; - font-size: 12px; - padding: 4px 2px 0 0; - color: #333; - - .algolia-docsearch-footer--logo { - display: inline-block !important; - width: 45px; - height: 16px; - text-indent: 101%; - overflow: hidden; - white-space: nowrap; - background-image: url('data:image/png;base64,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'); - background-repeat: no-repeat; - background-size: contain; - vertical-align: middle; - } -} - -.aa-dropdown-menu { - min-width: $dropdown-min-width-large; -} -.algolia-docsearch-suggestion { - display: table; - width: 100%; -} - -.algolia-docsearch-suggestion__secondary { - border-top: 1px solid $color-border-light; -} - -.algolia-docsearch-suggestion--subcategory-column { - border-right: 1px solid $color-border-light; - background: transparent; - color: #999; - display: table-cell; - overflow: hidden; - padding: 5px 7px 5px 10px; - text-align: left; - font-size: 0.9em; - font-family: "Open Sans"; - text-overflow: ellipsis; - vertical-align: top; - border-right: 1px solid #ccc; - - width: 160px; // Hardcoded - max-width: 160px; // Hardcoded - min-width: 160px; // Hardcoded -} - -.algolia-docsearch-suggestion--subcategory-column-text { - display: none; - - .algolia-docsearch-suggestion__secondary & { - display: block; - } -} -.algolia-docsearch-suggestion--content { - display: table-cell; - padding: 5px 10px; -} -.algolia-docsearch-suggestion--subcategory-inline { - display: none; -} -.algolia-docsearch-suggestion--text { - display: block; - font-weight: 400; - font-family: "Open Sans"; - font-size: .8em; - padding: 2px; -} - -.algolia-docsearch-suggestion--wrapper { - margin: 10px; -} +@include searchbox($searchbox-config...); +@include dropdown($dropdown-config...); \ No newline at end of file diff --git a/docs/css/_footer.scss b/docs/css/_footer.scss new file mode 100644 index 00000000..a195722c --- /dev/null +++ b/docs/css/_footer.scss @@ -0,0 +1,341 @@ +.ac-footer { + min-height: 830px; + position: relative; + text-align: center; + color: $white-75; + background-color: #1d3657; + background-image: url("../img/background_footer.svg"); + background-repeat: no-repeat; + background-position: center center; + background-size: 1420px; + font-family: $font-settings; + font-weight: 600; + box-sizing: border-box; + + p { + font-size: 12px; + font-weight: 300; + color: $white-75 + } + + .ac-footer-brand { + max-width: 740px; + max-height: 400px; + width: 70vw; + height: 100%; + position: absolute; + top: 48%; + left: 50%; + transform: translate(-50%,-50%); + + &:hover { + .ac-icon-love-dark { + background: url('../img/icon-heart-light.svg')no-repeat center center / contain + } + } + + .ac-footer-brand-icon { + width: 110px; + margin-top: 20px; + } + + figure { + margin: 20px 0 0; + + .ac-footer-brand-logo { + margin: 0; + width: inherit; + } + + figcaption { + text-indent: -9999px; + color: transparent; + } + } + } + + + .ac-footer-brand p, + .ac-footer-version { + color: #496f92; + text-transform: uppercase; + font-weight: bold; + font-size: 12px; + margin: 0; + font-weight: 600; + float: none; + } + + + .ac-footer-links { + width: 100%; + padding: 1em 0px; + float: left; + + br { + @media (min-width: 960px) { + display: none; + } + } + } + + + .ac-footer-link-item { + font-size: 12px; + color: $red-pink; + font-weight: 400; + margin-left: $margin; + text-decoration: none; + + &:not(:first-of-type):before { + content: '•'; + position: relative; + margin-right: $margin; + color: $white-75; + font-size: 1.2em; + } + } + + + .ac-footer-container { + padding-top: 0px; + padding-bottom: 0px; + } + + + .ac-footer-btn.ac-footer-btn-cta { + max-width: 160px; + margin: 32px auto; + } + + + .ac-footer-version { + position: relative; + float: left; + width: 100%; + top: 620px; + } + + + .ac-footer-actions { + width: 100%; + background: $black; + position: absolute; + bottom: 0; + min-height: $navigation-height; + + p { + display: inline; + line-height: $navigation-height; + padding: 0; + margin:0; + font-size: 14px; + color: $steel; + text-transform: uppercase; + } + + a { + display: inline-block; + margin-left: 0; + + &:nth-child(2) { + margin-left: 32px; + margin-right: $margin; + } + } + } + + + .ac-footer-btn, + [class*="ac-footer-btn-ghost"] { + background: $black; + border: 1px solid mix($black, #fff, 90%); + color: #fff; + height: 40px; + margin: 32px auto; + line-height: 40px; + padding: 0 1em; + display: block; + text-decoration: none; + border-radius: 3px; + text-transform: uppercase; + font-weight: 600; + font-size: 12px; + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1); + transition: background 0.1s ease; + cursor: pointer; + + &:hover, + &:active { + background: $red-pink + } + } + + + [class*="ac-footer-btn-ghost"] { + background: transparent; + border-color: currentColor; + font-weight: bold; + max-width: inherit; + padding: 0 32px; + } + + + .ac-footer-btn-ghost-grey { + color: $steel; + + &:hover { + background: $steel; + border-color: $steel; + color: #fff; + + .ico-triangle { + border-left-color: #fff + } + } + } + + + .ac-footer-btn-ghost-pink { + color: $red-pink; + + &:hover { + background: $red-pink; + border-color: $red-pink; + color: #fff; + } + } + + + .ac-icon { + position: absolute; + left: 0; + right: 0; + width: 20px; + height: 30px; + margin: auto; + } + .ac-icon-love-dark { + background: url('../img/icon-heart-dark.svg')no-repeat center center / contain + } +} + + +/*! On small devices */ +@media (max-width: $bp-medium){ + .ac-footer { + background-size: cover; + background-position: 50% 70px; + + .ac-footer-links { + text-align: center; + + .ac-footer-links:nth-child(2) { + margin-bottom: $margin; + display: block; + } + + .ac-footer-link-item:nth-child(3):before { + display: none; + } + } + + hr { + display: none; + } + + .ac-footer-actions { + width: calc(#{$margin} + 100%); + left: -$margin; + padding-bottom: $margin; + text-align: center; + + p { + font-size: 12px; + float: left; + width: 100%; + text-align: center; + } + + .ac-footer-btn, + a:nth-child(2) { + width: calc(100% - 32px); + max-width: calc(100% - 32px); + margin: 0 auto; + margin-bottom: 8px; + float: none; + position: relative; + left: 8px; + } + } + } +} + +// Footer heartbeat +@keyframes pulse{ + 0% { + box-shadow: 0 0 0 0 rgba($red-pink, 0.4); + } + 70% { + + box-shadow: 0 0 0 30px rgba($red-pink, 0); + } + 100% { + + box-shadow: 0 0 0 0 rgba($red-pink, 0); + } +} + +@keyframes pulseHeart{ + 0% { + transform: scale(1.3) + } + 70% { + + transform: scale(1.15) + } + 100% { + + transform: scale(1) + } +} + +.ac-icon-love-dark { + display: block; + position: relative; + + &:before { + content: ''; + display: block; + width: 8px; + height: 8px; + position: absolute; + top: 45%; + bottom: 0; + left: 50%; + transform: translate(-50%,-50%); + right: 0; + z-index: -1; + border-radius: 100%; + } +} + +.ac-footer-container:hover .ac-icon-love-dark{ + animation: pulseHeart 1s ease infinite; + + &:before { + animation: pulse 1s ease infinite !important; + } +} + + +.ac-icon-triangle { + width: 0; + height: 0; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid $steel; + position: relative; + display: inline-block; + margin-left: 8px; +} \ No newline at end of file diff --git a/docs/css/_header.scss b/docs/css/_header.scss index 9d4b3ae1..a485fe6d 100644 --- a/docs/css/_header.scss +++ b/docs/css/_header.scss @@ -1,82 +1,205 @@ /* HEADER // ------------------------- */ -.site-header { +.ac-nav { + position: fixed; + top: 0; + left: 0; width: 100%; + height: $navigation-height; + padding: 0 16px; + margin: 0; + line-height: $navigation-height; + z-index: 101; + font-family: $font-settings; + box-sizing: border-box; + color: #fff; + background: $black; + font-weight: 400; - .navbar { - border-radius: 0; - border: none; - background-color: #0B1724; - height: 50px; - .navbar-header { - position: relative; - height: 50px; - font-size: 14px; - line-height: 50px; - color: #C7C4C3; + a { + color: #fff; + text-decoration: none; + } - a:hover { - text-decoration: none; - } + .ac-nav-container { + width: 100%; + height: $navigation-height; + margin: auto; + line-height: $navigation-height; + + @media (min-width: $bp-huge){ + max-width: calc(#{$max-container-width} + 260px) } - .navbar-nav > li { - padding: 14px; - font-size: 14px; - font-family: Open Sans; - - &:last-child { - padding-right: 40px; - } + @media (max-width: $bp-big){ + max-width: 100% } + } - .navbar-nav > li > a { - padding: 0 0 4px 0; - } + .ac-nav-brand, + .ac-nav-menu { + max-height: 50px; + } - .navbar-nav > li.active > a { - background-color: transparent; - border-bottom: 2px solid #FF2E6C; - } + .ac-nav-brand { + float: left; + } + .ac-nav-menu { + float: right; + } - .fa-github { - font-size: 1.6em; + .ac-logo { + padding-left: 8px; + font-size: 26px; + font-weight: 100; + vertical-align: sub; + + .ac-logo__lg, + .ac-logo__sm { position: relative; top: -2px; - } - } - - .logo-community { - color: white; - font-size: 26px; - font-weight: 100 !important; - margin-right: 12px; - border-right: #FF2E6C 2px solid; - padding-left: 8px; - - img { - position: relative; - top: -3px; width: 200px; margin-right: 6px; - } + vertical-align: middle; - &:hover, &:active, &:focus { - color: white; + &.ac-logo__sm { + width: 34px; + display: none; + visibility: hidden; + + @media (max-width: 960px){ + display: inline-block; + visibility: visible + } + } + + &.ac-logo__lg { + @media (max-width: 960px){ + display: none; + } + } } } - .project-title { - color: white; - font-size: 1.2em; - font-weight: bold; + .ac-nav-brand-title { position: relative; - top: -4px; + font-size: 1.2em; + font-weight: 400; + vertical-align: middle; + padding-left: 8px; + top: -2px; + } - &:hover, &:active, &:focus { - color: white; + .ac-nav-menu svg { + position: relative; + } + + .ac-nav-searchbox { + float: left; + width: auto; + height: $navigation-height; + + .searchbox { + } + + .searchbox__submit svg { + width: 12px; + height: 12px; + vertical-align: middle; + fill: #fff; + top: -1px; + } + + .searchbox__input { + position: relative; + vertical-align: top; + line-height: 1.2; + font-weight: 500; + background: $black; + } + + .searchbox__input, + .searchbox__submit { + + @media (max-width: 960px) { + display: none; + } } } -} + + .ac-nav-menu-list { + padding: 0; + margin: 0; + float: left; + list-style: none; + max-height: $navigation-height; + + @media (max-width: 960px) { + display: none; + } + + .ac-nav-menu-list-item, + .ac-nav-menu-list-icon { + float: left; + padding: 0 14px; + font-size: 14px; + max-height: $navigation-height; + + &.active { + a { + padding-bottom: 15px; + border-bottom: 2px solid $red-pink; + } + } + + .ac-icon { + height: 50px; + } + } + } + + // Responsive nav + select { + display: none; + visibility: hidden; + position: absolute; + top: 16px; + right: 8px; + + &:not(.device) { + background: linear-gradient(#efefef, #ccc); + color: $black; + } + + @media (max-width: 960px){ + display: inline-block; + visibility: visible; + } + } + + + + .ac-nav-brand-breadcrumb { + display: inline-block; + width: 24px; + height: $navigation-height; + background: url('../img/icon-arrow-pipe.svg')no-repeat center center / 20px 20px; + vertical-align: middle; + margin-top: -4px; + } + + .ac-icon { + display: inline-block; + position: relative; + width: 26px; + height: 36px; + margin: auto; + vertical-align: sub; + + &.ac-icon-github { + background: url('../img/icon-github.svg')no-repeat center center / contain + } + } +} \ No newline at end of file diff --git a/docs/css/docsearch/_docsearch.scss b/docs/css/docsearch/_docsearch.scss new file mode 100644 index 00000000..d64212c3 --- /dev/null +++ b/docs/css/docsearch/_docsearch.scss @@ -0,0 +1,40 @@ +// SEARCHBOX +$searchbox-config: ( + input-width: 200px, + input-height: 36px, + border-width: 2px, + border-radius: 18px, + input-border-color: rgba(#fff,.5), + input-focus-border-color: rgba(#fff,.8), + input-background: #000, + font-size: 12px, + placeholder-color: #777, + icon-size: 18px, + icon-position: left, + icon-color: #fff, + icon-background-opacity: 0, + icon-clear-size: 12px +) !default; + +// DROPDOWN +$dropdown-config: ( + main-color: #458EE1, + layout-type: normal, + layout-alignment: right, + layout-width: 800, + background-color: #fff, + border-radius: 4, + border-width: 1, + border-color: #d9d9d9, + box-shadow: light, + branding-position: bottom, + spacing: compact, + 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 +) !default; diff --git a/docs/css/docsearch/_dropdown.scss b/docs/css/docsearch/_dropdown.scss new file mode 100644 index 00000000..05e12852 --- /dev/null +++ b/docs/css/docsearch/_dropdown.scss @@ -0,0 +1,334 @@ +// 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-type($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%; + } +} + +// Alignement 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 dropdown( + $main-color: #458EE1, + $layout-type: normal, + $layout-alignment: right, + $layout-width: 800, + $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 +){ + + $padding: spacing($spacing); + + $header-size: 1em; + $title-size: .9em; + $text-size: .85em; + $subtitle-size: .9em; + + @if $font-size == 'small' { + $header-size: .95em; + $title-size: .8em; + $text-size: .75em; + $subtitle-size: .8em; + } + + @else if $font-size == 'large' { + $header-size: 1.1em; + $title-size: 1em; + $text-size: .9em; + $subtitle-size: 1em; + } + + .algolia-autocomplete { + display: block; + height: 100%; + } + + // powered by + .algolia-docsearch-footer { + width: 100px; + height: 20px; + z-index: 2000; + margin-top: $padding/2; + float: right; + font-size: 0; + line-height: 0; + &--logo { + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: center; + background-size: 100%; + overflow: hidden; + text-indent: -9000px; + padding: 0!important; + width: 100%; + height: 100%; + display: block; + } + } + + + // Dropdown wrapper + .aa-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; + @include layout-type($layout-type); + @include alignment-type($layout-alignment); + @include shadow-type($box-shadow); + + // Arrow + &:before { + position: absolute; + content: ''; + width: 14px; + height: 14px; + background: $background-color; + z-index: 0; + top: -7px; + border-top: $border-width+px solid $border-color; + border-right: $border-width+px solid $border-color; + transform: rotate(-45deg); + border-radius: 2px; + z-index: 999; + @if $layout-alignment == 'center' { + display: none; + } + @else { + display: block; + #{$layout-alignment}: 48px; + } + } + + .aa-suggestions { + position: relative; + z-index: 1000; + } + + [class^="aa-dataset-"] { + position: relative; + border: solid $border-width+px $border-color; + background: $background-color; + border-radius: $border-radius+px; + overflow: auto; + padding: 0 $padding $padding/2; + } + + // Inner-grid setup + * { + box-sizing: border-box; + } + } + + // Each suggestion item is wrapped + .algolia-docsearch-suggestion { + position: relative; + padding: 0; + background: $background-color; + color: $title-color; + overflow: hidden; + + &--highlight { + color: darken($main-color,10%); + background-color: rgba($main-color,.08); + .algolia-docsearch-suggestion--category-header &{ + color: inherit; + background: inherit; + } + } + + &--content { + display: block; + float: right; + width: 70%; + position: relative; + cursor: pointer; + + @if $padding == 12px { + padding: 0 0 0 $padding/1.5; + } + @else { + padding: $padding/3 0 $padding/3 $padding/1.5; + } + + .aa-cursor &{ + background: rgba(black, .03); + } + + &: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; + padding: $padding/4 0; + font-size: $header-size; + color: $header-color; + + .algolia-docsearch-suggestion__main & { + display: block; + margin-top: $padding/6; + } + } + + &--wrapper { + width: 100%; + float: left; + @if $padding == 12px { + padding: 0; + } + @else { + padding: $padding/2 0 0 0; + } + } + + &--subcategory-column { + float: left; + width: 30%; + display: none; + padding-left: 0; + text-align: right; + position: relative; + color: $subtitle-color; + font-size: $subtitle-size; + word-wrap: break-word; + + @if $padding == 12px { + padding: 0 $padding/1.5; + } + @else { + padding: $padding/3 $padding/1.5; + } + + &:before { + content: ''; + position: absolute; + display: block; + top: 0; + height: 100%; + width: 1px; + background: #ddd; + right: 0; + } + + .algolia-docsearch-suggestion__secondary & { + display: block !important; + } + } + + &--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; + } + } +} diff --git a/docs/css/docsearch/_searchbox.scss b/docs/css/docsearch/_searchbox.scss new file mode 100644 index 00000000..470f9f8b --- /dev/null +++ b/docs/css/docsearch/_searchbox.scss @@ -0,0 +1,213 @@ +@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 != 0px) { + $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: #000, + $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; + height: even-px($input-height)!important; + white-space: nowrap; + box-sizing: border-box; + visibility: visible!important; + vertical-align: middle; + + &__wrapper { + width: 100%; + height: 100%; + } + + &__input { + display: inline-block; + 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; + padding: 0; + width: $input-height; + height: 100%; + vertical-align: middle; + white-space: normal; + font-size: $font-size; + appearance: none; + color: transparent; + + &::-webkit-input-placeholder{ + color: transparent; + } + + &::placeholder{ + color: transparent; + } + + &::-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, + &.filled { + 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%; + outline: 0; + box-shadow: inset 0 0 0 $border-width $input-focus-border-color; + background: $input-focus-background; + color: white; + &::-webkit-input-placeholder{ + color: #777; + } + &::placeholder{ + color: #777; + } + } + } + + &__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)); + line-height: even-px($input-height); + height: 100%; + vertical-align: middle; + text-align: center; + font-size: inherit; + user-select: none; + pointer-events: 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($icon-color, .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; + } + } + } + } +} diff --git a/docs/css/main.scss b/docs/css/main.scss index 6148ebd8..cc34c2dc 100644 --- a/docs/css/main.scss +++ b/docs/css/main.scss @@ -10,6 +10,7 @@ @import "helper"; @import "header"; +@import "footer"; @import "home"; @import "page"; diff --git a/docs/img/background_footer.svg b/docs/img/background_footer.svg new file mode 100644 index 00000000..6277cd39 --- /dev/null +++ b/docs/img/background_footer.svg @@ -0,0 +1,46 @@ + + + + footer copy + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/img/icon-arrow-pipe.svg b/docs/img/icon-arrow-pipe.svg new file mode 100644 index 00000000..cac4d0bf --- /dev/null +++ b/docs/img/icon-arrow-pipe.svg @@ -0,0 +1,10 @@ + + + + Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/img/icon-github.svg b/docs/img/icon-github.svg new file mode 100644 index 00000000..ac68f17a --- /dev/null +++ b/docs/img/icon-github.svg @@ -0,0 +1,10 @@ + + + + Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/img/icon-heart-dark.svg b/docs/img/icon-heart-dark.svg new file mode 100644 index 00000000..d8db7215 --- /dev/null +++ b/docs/img/icon-heart-dark.svg @@ -0,0 +1,10 @@ + + + + Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/img/icon-heart-light.svg b/docs/img/icon-heart-light.svg new file mode 100644 index 00000000..43208861 --- /dev/null +++ b/docs/img/icon-heart-light.svg @@ -0,0 +1,10 @@ + + + + Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/img/icon-search-white.svg b/docs/img/icon-search-white.svg new file mode 100644 index 00000000..841cb334 --- /dev/null +++ b/docs/img/icon-search-white.svg @@ -0,0 +1 @@ +Icons/Search \ No newline at end of file diff --git a/docs/js/responsiveNavigation.js b/docs/js/responsiveNavigation.js new file mode 100644 index 00000000..644ff346 --- /dev/null +++ b/docs/js/responsiveNavigation.js @@ -0,0 +1,25 @@ +function responsiveNavigation() { + let navigation = document.querySelector('.ac-nav'); + let links = navigation.querySelectorAll('a'); + let navigationAsSelect = document.createElement('select'); + + if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { + navigationAsSelect.classList.add('display-on-small', 'device'); + } else { + navigationAsSelect.classList.add('display-on-small'); + } + + for( let i = 0; i { + return window.location = e.target.value; + }); +} +responsiveNavigation(); \ No newline at end of file