feat(docs): new community header / footer (#114)
This commit is contained in:
Lucas Bonomi
Rémy-Christophe Schermesser
parent
2f2508c048
commit
af76d310fb
20 changed files with 1391 additions and 344 deletions
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -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.
|
||||||
|
|
@ -1,10 +1,33 @@
|
||||||
<footer class="site-footer">
|
<section class='ac-footer'>
|
||||||
<p>
|
<div class='ac-footer-container'>
|
||||||
Designed and built with <i class="fa fa-heart"></i> by <a href="https://www.algolia.com/?utm_medium=social-owned&utm_source=documentation+search&utm_campaign=homepage"><img src="{{site.baseurl}}/img/logo-algolia-dark.png" alt="Algolia" height="20"></a>
|
<p class='ac-footer-links'>
|
||||||
</p>
|
Code licensed under
|
||||||
<div class="spacer50"></div>
|
<a class='ac-footer-link-item' href='https://github.com/algolia/docsearch/blob/master/LICENSE'>MIT</a>
|
||||||
<div class="m400 m-l-r-auto">
|
<br>
|
||||||
{% include newsletter-mc.html %}
|
<a class='ac-footer-link-item' href='https://github.com/algolia/docsearch'>Github</a>
|
||||||
|
<a class='ac-footer-link-item' href='https://github.com/algolia/docsearch/issues'>Issues</a>
|
||||||
|
<a class='ac-footer-link-item' href='https://www.algolia.com/policies/privacy'>Privacy policy</a>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="spacer80"></div>
|
<div class='ac-footer-container ac-footer-brand'>
|
||||||
</footer>
|
<p>This project is part of</p>
|
||||||
|
<img class='ac-footer-brand-icon' src='http://res.cloudinary.com/hilnmyskv/image/upload/logo-community.svg'>
|
||||||
|
<figure>
|
||||||
|
<img class='ac-footer-brand-logo' src='http://res.cloudinary.com/hilnmyskv/image/upload/v1463417234/algolia-community_n6tixd.svg'>
|
||||||
|
<figcaption>Algolia Community</figcaption>
|
||||||
|
</figure>
|
||||||
|
<a class='ac-footer-btn ac-footer-btn-cta' href='https://community.algolia.com/'>See More</a>
|
||||||
|
<span class='ac-icon ac-icon-love-dark'></span>
|
||||||
|
</div>
|
||||||
|
<p class='ac-footer-version'> </p>
|
||||||
|
<div class='ac-footer-actions'>
|
||||||
|
<div class='footer-container'>
|
||||||
|
<p>Build unique search experiences with Algolia</p>
|
||||||
|
<a class='ac-footer-btn ac-footer-btn-ghost-grey' href='https://www.algolia.com/why?utm_medium=social-owned&utm_source=places%20website&utm_campaign=homepage&utm_term=why'>
|
||||||
|
See Why
|
||||||
|
<span class='ac-icon-triangle'></span>
|
||||||
|
</a>
|
||||||
|
<a class='ac-footer-btn ac-footer-btn-ghost-pink' href='https://www.algolia.com/users/sign_up?utm_medium=social-owned&utm_source=places%20website&utm_campaign=homepage&utm_term=get_started'>Get Started For Free</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,82 @@
|
||||||
<header class="site-header">
|
<div class='ac-nav'>
|
||||||
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
|
<div class='ac-nav-container'>
|
||||||
<div class="container-fluid">
|
<div class='ac-nav-brand'>
|
||||||
<div class="navbar-header">
|
<a class='ac-logo' href='https://community.algolia.com/' title='Algolia Community'>
|
||||||
<a class="logo-community" href="https://community.algolia.com/">
|
<img alt='Algolia Community' class='ac-logo__lg' src='https://res.cloudinary.com/hilnmyskv/image/upload/logo-community-inline-dark.svg' width='150'>
|
||||||
<img src="https://res.cloudinary.com/hilnmyskv/image/upload/logo-community-inline-dark.svg" width="150" alt="Algolia Community" />
|
<img alt='Algolia Community' class='ac-logo__sm' src='https://res.cloudinary.com/hilnmyskv/image/upload/v1461180081/logo-community-sm.svg'>
|
||||||
</a>
|
</a>
|
||||||
<a class="project-title" href="{{ site.baseurl }}/">
|
<span class='ac-nav-brand-breadcrumb'></span>
|
||||||
DocSearch
|
<a class='ac-nav-brand-title' href='./' title='Home'>DocSearch</a>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
<div class='ac-nav-menu'>
|
||||||
<div class="navbar-collapse collapse">
|
<div class='ac-nav-searchbox'>
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<form class='searchbox' id='docsearch-form' novalidate='novalidate' onsubmit='return false;' style='visibility:hidden;height:0'>
|
||||||
<li class="searchbar-wrapper">
|
<div class='searchbox__wrapper' role='search'>
|
||||||
<div class="navbar-form">
|
<input autocomplete='off' class='searchbox__input' id='docsearch' name='search' placeholder='Search in the doc' required='required' type='search'>
|
||||||
<div class="form-group">
|
<button class='searchbox__submit' title='Submit your search query.' type='submit'>
|
||||||
{% include searchbar.html %}
|
<svg aria-label='Search' role='img'>
|
||||||
</div>
|
<use xlink:href='#sbx-icon-search-13' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||||
</div>
|
</svg>
|
||||||
</li>
|
</button>
|
||||||
{% assign url = page.url %}
|
<button class='searchbox__reset hide' title='Clear the search query.' type='reset'>
|
||||||
{% for link in site.navigation %}
|
<svg aria-label='Reset' role='img'>
|
||||||
<li {% if url == link.url %}class="active"{% endif %}>
|
<use xlink:href='#sbx-icon-clear-3' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||||
<a href="{{ site.baseurl }}{{ link.url }}" title="{{ link.title }}">{{ link.text }}</a>
|
</svg>
|
||||||
</li>
|
</button>
|
||||||
{% endfor %}
|
</input>
|
||||||
<li>
|
</div>
|
||||||
<a class="navbar-github-link" href="//github.com/algolia/docsearch"><i class="fa fa-github"></i></a>
|
</form>
|
||||||
</li>
|
<div class='svg-icons' style='height: 0; width: 0; position: absolute; visibility: hidden'>
|
||||||
</ul>
|
<svg xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<symbol id="sbx-icon-clear-3" viewBox="0 0 40 40"><path d="M16.228 20L1.886 5.657 0 3.772 3.772 0l1.885 1.886L20 16.228 34.343 1.886 36.228 0 40 3.772l-1.886 1.885L23.772 20l14.342 14.343L40 36.228 36.228 40l-1.885-1.886L20 23.772 5.657 38.114 3.772 40 0 36.228l1.886-1.885L16.228 20z" fill-rule="evenodd"/></symbol>
|
||||||
|
<symbol id="sbx-icon-search-13" viewBox="0 0 12 12"><path d="M12 11.077c0-.245-.1-.483-.267-.65L9.26 7.955c.584-.843.894-1.853.894-2.877C10.154 2.272 7.882 0 5.077 0S0 2.272 0 5.077s2.272 5.077 5.077 5.077c1.024 0 2.034-.31 2.877-.894l2.474 2.466c.166.173.404.274.65.274.504 0 .922-.418.922-.923zm-3.692-6c0 1.78-1.45 3.23-3.23 3.23-1.782 0-3.232-1.45-3.232-3.23s1.45-3.23 3.23-3.23c1.782 0 3.232 1.45 3.232 3.23z" fill="#FFF" fill-rule="evenodd" opacity="0.85"/></symbol>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<ul class='ac-nav-menu-list'>
|
||||||
</header>
|
{% assign url = page.url %}
|
||||||
|
{% for link in site.navigation %}
|
||||||
|
<li class='ac-nav-menu-list-item {% if url == link.url %}active{% endif %} '>
|
||||||
|
<a data-path="{{ site.baseurl }}{{ link.url }}" href="{{ site.baseurl }}{{ link.url }}" data-current="{% if url == link.url %}true{% endif %}" title="{{ link.text }}">{{ link.text }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
<li class='ac-nav-menu-list-icon'>
|
||||||
|
<a class='ac-icon' href='https://github.com/algolia/docsearch' title='GitHub repository'>
|
||||||
|
<span class='ac-icon ac-icon-github'></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
$(function(){
|
||||||
|
$('.searchbox .aa-input').on('change', function() {
|
||||||
|
$('.aa-input').addClass('filled');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.searchbox .aa-input').on('blur', function() {
|
||||||
|
if ($(this).val().length === 0){
|
||||||
|
$(this).removeClass('filled');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.searchbox [type="reset"]').on('click', function() {
|
||||||
|
myDocSearch.autocomplete.autocomplete.setVal('');
|
||||||
|
$('.aa-input').focus();
|
||||||
|
$(this).addClass("hide");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
function updateReset() {
|
||||||
|
var searchbox = $('.aa-input');
|
||||||
|
var reset = $('.searchbox [type="reset"]');
|
||||||
|
reset.removeClass("hide");
|
||||||
|
if (searchbox.val().length === 0){
|
||||||
|
reset.addClass("hide");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
|
|
||||||
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">
|
|
||||||
<path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
|
|
||||||
fill-rule="evenodd" />
|
|
||||||
</symbol>
|
|
||||||
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-2" viewBox="0 0 20 20">
|
|
||||||
<path d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z" fill-rule="evenodd" />
|
|
||||||
</symbol>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<form role="search" novalidate="novalidate" class="searchbox sbx-custom">
|
|
||||||
<input onkeyup="updateReset()" type="search" name="search" placeholder="Search in the doc ..." autocomplete="off" required="required" class="sbx-custom__input">
|
|
||||||
<button type="submit" class="sbx-custom__submit">
|
|
||||||
<svg role="img" aria-label="Search">
|
|
||||||
<title>Icon Search</title>
|
|
||||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button type="reset" class="sbx-custom__reset hide">
|
|
||||||
<svg role="img" aria-label="Reset">
|
|
||||||
<title>Icon Reset</title>
|
|
||||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
<!--Js: focus search input after reset-->
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
$(function(){
|
|
||||||
$('.searchbox .aa-input').on('change', function() {
|
|
||||||
$('.aa-input').addClass('filled');
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.searchbox .aa-input').on('blur', function() {
|
|
||||||
if ($(this).val().length === 0){
|
|
||||||
$(this).removeClass('filled');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.searchbox [type="reset"]').on('click', function() {
|
|
||||||
myDocSearch.autocomplete.autocomplete.setVal('');
|
|
||||||
$('.aa-input').focus();
|
|
||||||
$(this).addClass("hide");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
function updateReset() {
|
|
||||||
var searchbox = $('.aa-input');
|
|
||||||
var reset = $('.searchbox [type="reset"]');
|
|
||||||
reset.removeClass("hide");
|
|
||||||
if (searchbox.val().length === 0){
|
|
||||||
reset.addClass("hide");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
Before Width: | Height: | Size: 2.5 KiB |
|
|
@ -54,6 +54,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
|
<script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
|
||||||
|
<script src="{{ "/js/responsiveNavigation.js" | prepend: site.baseurl }}"></script>
|
||||||
|
|
||||||
{% if site.env == 'development' %}
|
{% if site.env == 'development' %}
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -66,13 +67,14 @@
|
||||||
var myDocSearch = docsearch({
|
var myDocSearch = docsearch({
|
||||||
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
|
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
|
||||||
indexName: 'docsearch',
|
indexName: 'docsearch',
|
||||||
inputSelector: '.sbx-custom__input',
|
inputSelector: '.searchbox__input',
|
||||||
autocompleteOptions: {
|
autocompleteOptions: {
|
||||||
debug: false
|
debug: false
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
{% include marketing.html %}
|
{% include marketing.html %}
|
||||||
|
|
||||||
{% contentblock site-footer %}
|
{% contentblock site-footer %}
|
||||||
|
|
|
||||||
|
|
@ -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-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
$font-size-base: 16px;
|
$font-size-base: 16px;
|
||||||
|
|
||||||
$headings-font-family: "Raleway";
|
$headings-font-family: "Raleway";
|
||||||
$headings-font-weight: 300;
|
$headings-font-weight: 300;
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
$red-pink: #fb366e;
|
||||||
|
$steel: #788795;
|
||||||
|
$black: #0a1724;
|
||||||
|
$white-75: rgba(white, 0.75);
|
||||||
$brand-primary: #1d96c7;
|
$brand-primary: #1d96c7;
|
||||||
//$code-color: #a3b6cb;
|
|
||||||
|
|
||||||
$text-color: rgba(black, 0.75);
|
$text-color: rgba(black, 0.75);
|
||||||
|
|
||||||
$anchor-offset: 100px;
|
|
||||||
$community-color: #674492;
|
$community-color: #674492;
|
||||||
$success-color: #58d158;
|
$success-color: #58d158;
|
||||||
$gray-light: #f3f3f3;
|
$gray-light: #f3f3f3;
|
||||||
$dark-blue: #0d1d30;
|
$dark-blue: #0d1d30;
|
||||||
$light-blue: lighten($dark-blue, 70%);
|
$light-blue: lighten($dark-blue, 70%);
|
||||||
|
|
||||||
$secondary-color: green;
|
$secondary-color: green;
|
||||||
|
|
||||||
$navbar-height: 50px;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
341
docs/css/_footer.scss
Normal file
341
docs/css/_footer.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1,82 +1,205 @@
|
||||||
/* HEADER
|
/* HEADER
|
||||||
// ------------------------- */
|
// ------------------------- */
|
||||||
|
|
||||||
.site-header {
|
.ac-nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
width: 100%;
|
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 {
|
a {
|
||||||
position: relative;
|
color: #fff;
|
||||||
height: 50px;
|
text-decoration: none;
|
||||||
font-size: 14px;
|
}
|
||||||
line-height: 50px;
|
|
||||||
color: #C7C4C3;
|
|
||||||
|
|
||||||
a:hover {
|
.ac-nav-container {
|
||||||
text-decoration: none;
|
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 {
|
@media (max-width: $bp-big){
|
||||||
padding: 14px;
|
max-width: 100%
|
||||||
font-size: 14px;
|
|
||||||
font-family: Open Sans;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 40px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-nav > li > a {
|
.ac-nav-brand,
|
||||||
padding: 0 0 4px 0;
|
.ac-nav-menu {
|
||||||
}
|
max-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-nav > li.active > a {
|
.ac-nav-brand {
|
||||||
background-color: transparent;
|
float: left;
|
||||||
border-bottom: 2px solid #FF2E6C;
|
}
|
||||||
}
|
.ac-nav-menu {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
.fa-github {
|
.ac-logo {
|
||||||
font-size: 1.6em;
|
padding-left: 8px;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 100;
|
||||||
|
vertical-align: sub;
|
||||||
|
|
||||||
|
.ac-logo__lg,
|
||||||
|
.ac-logo__sm {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
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;
|
width: 200px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
vertical-align: middle;
|
||||||
|
|
||||||
&:hover, &:active, &:focus {
|
&.ac-logo__sm {
|
||||||
color: white;
|
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 {
|
.ac-nav-brand-title {
|
||||||
color: white;
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: bold;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -4px;
|
font-size: 1.2em;
|
||||||
|
font-weight: 400;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-left: 8px;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover, &:active, &:focus {
|
.ac-nav-menu svg {
|
||||||
color: white;
|
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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
40
docs/css/docsearch/_docsearch.scss
Normal file
40
docs/css/docsearch/_docsearch.scss
Normal file
|
|
@ -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;
|
||||||
334
docs/css/docsearch/_dropdown.scss
Normal file
334
docs/css/docsearch/_dropdown.scss
Normal file
File diff suppressed because one or more lines are too long
213
docs/css/docsearch/_searchbox.scss
Normal file
213
docs/css/docsearch/_searchbox.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
@import "helper";
|
@import "helper";
|
||||||
|
|
||||||
@import "header";
|
@import "header";
|
||||||
|
@import "footer";
|
||||||
|
|
||||||
@import "home";
|
@import "home";
|
||||||
@import "page";
|
@import "page";
|
||||||
|
|
|
||||||
46
docs/img/background_footer.svg
Normal file
46
docs/img/background_footer.svg
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="1440px" height="629px" viewBox="0 0 1440 629" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>footer copy</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs>
|
||||||
|
<radialGradient cx="50.4345703%" cy="40.0212479%" fx="50.4345703%" fy="40.0212479%" r="40.9971646%" id="radialGradient-1">
|
||||||
|
<stop stop-color="#0B1E39" offset="0%"></stop>
|
||||||
|
<stop stop-color="#1D3657" offset="100%"></stop>
|
||||||
|
</radialGradient>
|
||||||
|
<linearGradient x1="67.1397712%" y1="88.5822452%" x2="-15.2286835%" y2="-69.5126771%" id="linearGradient-2">
|
||||||
|
<stop stop-color="#1D3657" offset="0%"></stop>
|
||||||
|
<stop stop-color="#15517B" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
|
||||||
|
<feOffset dx="0" dy="8" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||||
|
<feGaussianBlur stdDeviation="9" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||||
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="footer-copy">
|
||||||
|
<rect id="Rectangle-90" fill="url(#radialGradient-1)" x="0" y="0" width="1440" height="629"></rect>
|
||||||
|
<rect id="Rectangle-89-Copy-13" fill="#1D3657" transform="translate(1035.057089, 189.057089) rotate(-315.000000) translate(-1035.057089, -189.057089) " x="927.53649" y="81.5364902" width="215.041197" height="215.041197"></rect>
|
||||||
|
<path d="M322.008622,89.6227996 L517.8772,89.6227996 L517.8772,285.491378 L322.008622,285.491378 L322.008622,89.6227996 Z" id="Rectangle-89-Copy-7" fill="#1D3657" transform="translate(419.942911, 187.557089) rotate(-315.000000) translate(-419.942911, -187.557089) "></path>
|
||||||
|
<path d="M178.565711,-52.4342892 L374.434289,-52.4342892 L374.434289,143.434289 L178.565711,143.434289 L178.565711,-52.4342892 Z" id="Rectangle-89-Copy-17" fill="#1D3657" transform="translate(276.500000, 45.500000) rotate(-315.000000) translate(-276.500000, -45.500000) "></path>
|
||||||
|
<path d="M308.732603,285.482603 L396.767397,285.482603 L396.767397,373.517397 L308.732603,373.517397 L308.732603,285.482603 Z" id="Rectangle-89-Copy-7" fill="#1D3657" transform="translate(352.750000, 329.500000) rotate(-315.000000) translate(-352.750000, -329.500000) "></path>
|
||||||
|
<path d="M-28.1304336,107.244566 L283.880434,107.244566 L283.880434,419.255434 L-28.1304336,419.255434 L-28.1304336,107.244566 Z" id="Rectangle-89-Copy-7" fill="#1D3657" transform="translate(127.875000, 263.250000) rotate(-315.000000) translate(-127.875000, -263.250000) "></path>
|
||||||
|
<path d="M242.232603,352.232603 L330.267397,352.232603 L330.267397,440.267397 L242.232603,440.267397 L242.232603,352.232603 Z" id="Rectangle-89-Copy-7" fill="#1D3657" transform="translate(286.250000, 396.250000) rotate(-315.000000) translate(-286.250000, -396.250000) "></path>
|
||||||
|
<rect id="Rectangle-89-Copy-9" fill="#1D3657" transform="translate(721.057089, -86.114178) rotate(-315.000000) translate(-721.057089, 86.114178) " x="417.667912" y="-389.503355" width="606.778354" height="606.778354"></rect>
|
||||||
|
<rect id="Rectangle-89-Copy" fill="#1D3657" transform="translate(988.971456, 571.971456) rotate(-315.000000) translate(-988.971456, -571.971456) " x="803.669111" y="381.13336" width="370.604689" height="381.67619"></rect>
|
||||||
|
<rect id="Rectangle-89-Copy-6" fill="#1D3657" transform="translate(447.114178, 458.057089) rotate(-315.000000) translate(-447.114178, -458.057089) " x="339.593579" y="350.53649" width="215.041197" height="215.041197"></rect>
|
||||||
|
<rect id="Rectangle-89-Copy-14" fill="#1D3657" transform="translate(1190.000000, 33.528544) rotate(-315.000000) translate(-1190.000000, -33.528544) " x="1083.56025" y="-72.9112101" width="212.879509" height="212.879509"></rect>
|
||||||
|
<rect id="Rectangle-89-Copy-11" fill="#1D3657" transform="translate(602.442911, 615.442911) rotate(-315.000000) translate(-602.442911, -615.442911) " x="494.649495" y="507.649495" width="215.586832" height="215.586832"></rect>
|
||||||
|
<rect id="Rectangle-89-Copy-10" fill="#1D3657" transform="translate(-85.114178, -14.114178) rotate(-315.000000) translate(85.114178, 14.114178) " x="-275.952273" y="-204.952273" width="381.67619" height="381.67619"></rect>
|
||||||
|
<rect id="Rectangle-89-Copy-8" fill="#1D3657" transform="translate(136.885822, 579.885822) rotate(-315.000000) translate(-136.885822, -579.885822) " x="-53.9522728" y="389.047727" width="381.67619" height="381.67619"></rect>
|
||||||
|
<rect id="Rectangle-89-Copy-2" fill="#1D3657" transform="translate(1308.885822, 344.838095) rotate(-315.000000) translate(-1308.885822, -344.838095) " x="1118.04773" y="154" width="381.67619" height="381.67619"></rect>
|
||||||
|
<rect id="Rectangle-89-Copy-3" fill="#1D3657" transform="translate(1613.885822, 631.838095) rotate(-315.000000) translate(-1613.885822, -631.838095) " x="1423.04773" y="441" width="381.67619" height="381.67619"></rect>
|
||||||
|
<rect id="Rectangle-89" stroke-opacity="0.158571105" stroke="#46AEDA" fill="url(#linearGradient-2)" filter="url(#filter-3)" transform="translate(719.885822, 283.114178) rotate(-315.000000) translate(-719.885822, -283.114178) " x="529.047727" y="92.2760826" width="381.67619" height="381.67619"></rect>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.8 KiB |
10
docs/img/icon-arrow-pipe.svg
Normal file
10
docs/img/icon-arrow-pipe.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="20px" height="38px" viewBox="0 0 20 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Shape</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<polygon id="Shape" fill="#fb366e" points="14.306 19.173 0.178 35.395 3.195 38.022 19.65 19.127 3.2 0.18 0.18 2.8"></polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 595 B |
10
docs/img/icon-github.svg
Normal file
10
docs/img/icon-github.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="40px" height="39px" viewBox="0 0 40 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Shape</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M19.998,0 C8.955,0 0,8.954 0,20 C0,28.837 5.73,36.333 13.678,38.977 C14.678,39.161 15.043,38.544 15.043,38.013 C15.043,37.538 15.026,36.281 15.016,34.613 C9.453,35.82 8.28,31.93 8.28,31.93 C7.37,29.62 6.058,29.005 6.058,29.005 C4.242,27.765 6.195,27.79 6.195,27.79 C8.203,27.93 9.259,29.85 9.259,29.85 C11.042,32.907 13.939,32.024 15.079,31.512 C15.259,30.222 15.777,29.339 16.349,28.839 C11.907,28.334 7.239,26.617 7.239,18.954 C7.239,16.771 8.019,14.984 9.297,13.587 C9.091,13.081 8.404,11.047 9.493,8.294 C9.493,8.294 11.173,7.756 14.993,10.344 C16.624924,9.89926425 18.308563,9.672627 20,9.67 C21.7,9.68 23.41,9.9 25.008,10.345 C28.826,7.757 30.502,8.295 30.502,8.295 C31.592,11.048 30.907,13.082 30.702,13.588 C31.984,14.985 32.757,16.772 32.757,18.955 C32.757,26.638 28.081,28.329 23.627,28.823 C24.343,29.441 24.983,30.661 24.983,32.526 C24.983,35.201 24.958,37.358 24.958,38.013 C24.958,38.549 25.318,39.171 26.334,38.976 C34.274,36.326 40,28.836 40,20 C40,8.955 31.045,0 19.998,0" id="Shape" fill="#FFFFFF"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
10
docs/img/icon-heart-dark.svg
Normal file
10
docs/img/icon-heart-dark.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="36px" height="35px" viewBox="0 0 36 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Shape</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M18,4.02 C16.552,2.25 14.057,0.297 10.103,0.297 C3.373,0.298 0,6.63 0,12.546 C0,22.323 15.135,32.696 16.99,33.982 C17.5972328,34.4039368 18.4027672,34.4039368 19.01,33.982 C20.864,32.695 36,22.322 36,12.546 C36,6.63 32.627,0.298 25.896,0.298 C21.943,0.298 19.448,2.252 18,4.018 L18,4.02 Z" id="Shape" fill="#01122B"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 802 B |
10
docs/img/icon-heart-light.svg
Normal file
10
docs/img/icon-heart-light.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="36px" height="35px" viewBox="0 0 36 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Shape</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M18,4.02 C16.552,2.25 14.057,0.297 10.103,0.297 C3.373,0.298 0,6.63 0,12.546 C0,22.323 15.135,32.696 16.99,33.982 C17.5972328,34.4039368 18.4027672,34.4039368 19.01,33.982 C20.864,32.695 36,22.322 36,12.546 C36,6.63 32.627,0.298 25.896,0.298 C21.943,0.298 19.448,2.252 18,4.018 L18,4.02 Z" id="Shape" fill="#fb366e"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 802 B |
1
docs/img/icon-search-white.svg
Normal file
1
docs/img/icon-search-white.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>Icons/Search</title><path d="M12 11.077c0-.245-.1-.483-.267-.65L9.26 7.955c.584-.843.894-1.853.894-2.877C10.154 2.272 7.882 0 5.077 0S0 2.272 0 5.077s2.272 5.077 5.077 5.077c1.024 0 2.034-.31 2.877-.894l2.474 2.466c.166.173.404.274.65.274.504 0 .922-.418.922-.923zm-3.692-6c0 1.78-1.45 3.23-3.23 3.23-1.782 0-3.232-1.45-3.232-3.23s1.45-3.23 3.23-3.23c1.782 0 3.232 1.45 3.232 3.23z" fill="#FFF" fill-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 512 B |
25
docs/js/responsiveNavigation.js
Normal file
25
docs/js/responsiveNavigation.js
Normal file
|
|
@ -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<links.length; i++ ) {
|
||||||
|
let option = document.createElement('option');
|
||||||
|
option.text = links[i].title;
|
||||||
|
option.value = links[i].href;
|
||||||
|
option.selected = links[i].getAttribute('data-current') === 'true';
|
||||||
|
navigationAsSelect.appendChild(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
navigation.appendChild(navigationAsSelect);
|
||||||
|
navigation.addEventListener('change', (e) => {
|
||||||
|
return window.location = e.target.value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
responsiveNavigation();
|
||||||
Loading…
Reference in a new issue