docs responsive + assets/css cleaning
This commit is contained in:
Shipow
Pixelastic
parent
b44e7e5c71
commit
1159c4ab65
21 changed files with 314 additions and 278 deletions
|
|
@ -5,63 +5,67 @@
|
|||
a.cursor-pointer.text-0(href="https://www.algolia.com/", target="_blank")
|
||||
img.h-1.sm_h-1x(src="assets/algolia-logo.svg", alt="Algolia")
|
||||
//- Separator
|
||||
.hidden.sm_flex.fln.flrnw.flc
|
||||
.hidden.sm_flex.fln.flrnw.flc.mr-1
|
||||
.w-1.h-1.sm_w-1x.sm_h-1x.text-telluric.fill-current
|
||||
include ../assets/arrow-separator.svg
|
||||
include ../assets/icons/arrow-separator.svg
|
||||
//- Community logo
|
||||
.hidden.lg_flex.custom-community-link.fln.flcnw.flc.px-0x.relative
|
||||
a.cursor-pointer.text-0(href="https://community.algolia.com/", target="_blank")
|
||||
img.h-1.sm_h-1x.lg_h-2(src="assets/community-logo.svg", alt="Algolia Community")
|
||||
img.h-1.sm_h-1x.lg_h-2(src="assets/community/community-logo.svg", alt="Algolia Community")
|
||||
.custom-community-projects.hidden.sm_block.absolute.z-5.pin-t.mt-3.ml-3.border.border-proton.rounded-auto.bg-white-pure.shadow-1
|
||||
.flex.flrw.pt-0x
|
||||
a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/talksearch/")
|
||||
.fln.bg-teal.rounded-auto.w-2x.h-2x
|
||||
img.w-100(src="assets/talksearch-icon.svg", alt="TalkSearch")
|
||||
img.w-100(src="assets/community/talksearch-icon.svg", alt="TalkSearch")
|
||||
.fla.pl-1.text-solstice.text-2.bold.hover_text-nebula TalkSearch
|
||||
a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/jekyll-algolia/")
|
||||
.fln.bg-purple.rounded-auto.w-2x.h-2x
|
||||
img.w-100(src="assets/jekyll-icon.svg", alt="Jekyll")
|
||||
img.w-100(src="assets/community/jekyll-icon.svg", alt="Jekyll")
|
||||
.fla.pl-1.text-solstice.text-2.bold.hover_text-nebula Jekyll
|
||||
a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/instantsearch.js/")
|
||||
.fln.bg-yellow.rounded-auto.w-2x.h-2x
|
||||
img.w-100(src="assets/instantsearch-icon.svg", alt="InstantSearch")
|
||||
img.w-100(src="assets/community/instantsearch-icon.svg", alt="InstantSearch")
|
||||
.fla.pl-1.text-solstice.text-2.bold.hover_text-nebula InstantSearch
|
||||
a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/react-instantsearch/")
|
||||
.fln.bg-blue.rounded-auto.w-2x.h-2x
|
||||
img.w-100(src="assets/react-icon.svg", alt="React InstantSearch")
|
||||
img.w-100(src="assets/community/react-icon.svg", alt="React InstantSearch")
|
||||
.fla.pl-1.text-solstice.text-2.bold.hover_text-nebula React InstantSearch
|
||||
a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline
|
||||
.fln.bg-green.rounded-auto.w-2x.h-2x(href="https://community.algolia.com/vue-instantsearch/")
|
||||
img.w-100(src="assets/vue-icon.svg", alt="Vue InstantSearch")
|
||||
img.w-100(src="assets/community/vue-icon.svg", alt="Vue InstantSearch")
|
||||
.fla.pl-1.text-solstice.text-2.bold.hover_text-nebula Vue InstantSearch
|
||||
a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/angular-instantsearch/")
|
||||
.fln.bg-red.rounded-auto.w-2x.h-2x.flex.flrnw.flc
|
||||
img.w-80(src="assets/angular-icon.svg", alt="Angular InstantSearch")
|
||||
img.w-80(src="assets/community/angular-icon.svg", alt="Angular InstantSearch")
|
||||
.fla.pl-1.text-solstice.text-2.bold.hover_text-nebula Angular InstantSearch
|
||||
a.fla.flex.flrnw.p-0x.flc.text-solstice.bold.bg-moon.rounded-auto.py-1(href="https://discourse.algolia.com/")
|
||||
|Community forum
|
||||
|
||||
//- Separator
|
||||
.hidden.lg_flex.fln.flrnw.flc
|
||||
.hidden.lg_flex.fln.flrnw.flc.mr-1
|
||||
.w-1.h-1.sm_w-1x.sm_h-1x.text-telluric.fill-current
|
||||
include ../assets/arrow-separator.svg
|
||||
include ../assets/icons/arrow-separator.svg
|
||||
|
||||
//- Project link
|
||||
.flex.fln.flrnw.flc.pl-1.sm_pl-0
|
||||
a.cursor-pointer.uppercase.tracking-poppins.poppins.text-solstice.hover_text-nebula.hover_no-underline(href=site.url)=site.title
|
||||
a.hidden.sm_block.cursor-pointer.uppercase.tracking-poppins.poppins.text-solstice.hover_text-nebula.hover_no-underline(href=site.url)=site.title
|
||||
a.sm_hidden(href=site.url)
|
||||
img(src="assets/docsearch-avatar.png" width=40 alt="DocSearch logo")
|
||||
|
||||
//- Filler
|
||||
.flex.fla.md_hidden
|
||||
//- DocSearch
|
||||
.hidden.md_flex.fla.flrnw.flrcv.flrar.ml-2
|
||||
.flex.fla.flrnw.flrcv.flrar.ml-2.mr-1
|
||||
.w-100.flrnw.flex.flrar
|
||||
.custom-search-wrapper.fln.h-60.w-50.border.border-proton.rounded-auto.relative
|
||||
.custom-search-wrapper.fln.h-60.w-100.rounded-auto.relative
|
||||
label.absolute.pin-left.z-1.w-1.h-100.ml-05.text-solstice.fill-current.cursor-pointer(for="docsearch")
|
||||
include ../assets/magnifying-glass.svg
|
||||
include ../assets/icons/magnifying-glass.svg
|
||||
input.custom-search-input.w-100.h-100.outline-none.text-solstice.pl-2.rounded-auto.bg-moon.focus_bg-transparent#docsearch(placeholder="Search the documentation...")
|
||||
|
||||
//- Links
|
||||
.flex.fln.flrnw.flc.px-2
|
||||
a.cursor-pointer.text-2.text-solstice.hover_text-nebula.hover_no-underline(href="./what-is-docsearch.html") Documentation
|
||||
.flex.fln.flrnw.flc.pr-0x
|
||||
.hidden.sm_flex.justify-start.items-center
|
||||
a.text-2.text-solstice.hover_text-nebula.hover_no-underline.mr-1(href="./what-is-docsearch.html") Documentation
|
||||
a.w-1x.h-1x.text-solstice.fill-current.items-center.hover_text-grey-darker.mr-1(href=site.repo, target="_blank")
|
||||
include ../assets/icons/github.svg
|
||||
|
||||
.sm_hidden
|
||||
a.w-1x.h-1x.text-solstice.fill-current(href=site.repo, target="_blank")
|
||||
include ../assets/github-logo.svg
|
||||
include ../assets/icons/menu.svg
|
||||
|
|
|
|||
7
docs/src/_includes/newsletter-form.pug
Normal file
7
docs/src/_includes/newsletter-form.pug
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.text-5.mb-1 Sign Up to our Newsletter
|
||||
.text-2.mb-2.text-nova Follow project updates and general vector loveliness
|
||||
.max-w-sm.flex.m-auto.mt-1
|
||||
.fla
|
||||
input#newsletter_email.form-control-primary.w-100(name="newsletter_email", placeholder="you@example.org", type="email")
|
||||
.fla.pl-1
|
||||
.button.c-button.w-100 Sign Up
|
||||
|
|
@ -156,7 +156,7 @@ block content
|
|||
.pb-3.text-3.leading-2.text-white.text-center Oh, and did we mention it's FREE? No commitment. No subscription. Everything is on us!
|
||||
include ../_includes/apply-form.pug
|
||||
|
||||
.text-center.p-2.pb-4
|
||||
.text-center.p-2.pb-2
|
||||
p.text-2.mb-2.leading-2 Docsearch 2015-2018 • Designed and built with love by
|
||||
a(href="https://www.algolia.com/")
|
||||
img.align-top.pl-1(src="assets/algolia-logo.svg", alt="search by Algolia", width=110)
|
||||
|
|
@ -172,17 +172,11 @@ block content
|
|||
li.p-1.w-100.md_w-auto.inline-block
|
||||
a(href="https://discourse.algolia.com/tags/docsearch") Community Forum
|
||||
li.p-1.w-100.md_w-auto.inline-block
|
||||
a(href="https://discord.gg/ax4NkP") Discord
|
||||
a(href="https://discord.gg/qqCWs99") Discord
|
||||
|
||||
|
||||
.text-5.mb-1 Sign Up to our Newsletter
|
||||
.text-2.mb-2.text-nova Follow project updates and general vector loveliness
|
||||
.max-w-sm.flex.m-auto.mt-1
|
||||
.fla
|
||||
input#newsletter_email.form-control-primary.w-100(name="newsletter_email", placeholder="you@example.org", type="email")
|
||||
.fla.pl-1
|
||||
.button.c-button.w-100 Sign Up
|
||||
.hide
|
||||
//include ../_includes/newsletter.pug
|
||||
|
||||
.hidden
|
||||
.my-popper
|
||||
.popper__arrow(x-arrow='right')
|
||||
img(src='https://docsearch-shared.netlify.com/docsearch-logo.png', alt='DocSearch', width=200)
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
extends main.pug
|
||||
block content
|
||||
.bgtb-white-pure-moon.pt-3x.pb-3.poppins
|
||||
.max-w-lg.m-auto.text-center
|
||||
.text-6.lg_text-8.uppercase.tracking-poppins.text-solstice.bold=current.title
|
||||
.bgtb-moon-white-pure
|
||||
.flex.flrnw.max-w-lg.m-auto
|
||||
.fla
|
||||
.bgtb-moon-white-pure.px-2
|
||||
.md_flex.max-w-lg.m-auto
|
||||
.navigation-sidebar.hidden.absolute.z-90.top-16.w-full.border-b.md_static.md_bg-transparent.md_w-25.md_block.md_border-0
|
||||
// Adding subsections from markdown
|
||||
.sticky.pin-t.top-3.h-100vh-3.pl-1.lg_pl-2.overflow-y-auto
|
||||
.sticky.pin-t.top-3.h-100vh-3.pl-1.lg_pl-2.overflow-y-auto.pt-3
|
||||
each category in sidebar
|
||||
.category.text-nebula.poppins.uppercase.mt-1=category.title
|
||||
ul.list-reset.pt-05.pb-1.text-2
|
||||
.category.text-nebula.poppins.uppercase=category.title
|
||||
ul.list-reset.pt-05.pb-1.text-1.mb-1
|
||||
each page in category.pages
|
||||
- var isCurrent = current.url === page.url
|
||||
- var additionalClasses = isCurrent ? 'text-nebula' : 'text-solstice'
|
||||
|
|
@ -23,7 +20,12 @@ block content
|
|||
li
|
||||
a.block.py-0x.text-telluric(href=`${page.url}#${heading.anchor}`)=heading.title
|
||||
|
||||
.documentation-content.fln.w-md.text-2.pb-2.pr-1.sm_px-2.overflow-hidden
|
||||
.documentation-content.text-1.pt-2.md_pt-3.max-w-md
|
||||
.block.md_hidden.mb-1
|
||||
a(href="https://community.algolia.com/") DocSearch
|
||||
span >
|
||||
a(href="https://community.algolia.com/documentation") Documentation
|
||||
.text-5.lg_text-6.uppercase.tracking-poppins.text-solstice.bold.mb-2=current.title
|
||||
!=current.content
|
||||
// Include the apply form
|
||||
if current.includeForm
|
||||
|
|
|
|||
|
|
@ -53,3 +53,185 @@
|
|||
.c-card:hover {
|
||||
@apply no-underline;
|
||||
}
|
||||
|
||||
/* Backgrounds */
|
||||
.bg-docsearch-hero {
|
||||
background-image: url('assets/bg-docsearch.svg'), linear-gradient(#fff, #f5f5fa);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center calc(100% - 18px);
|
||||
}
|
||||
|
||||
.bg-analytics {
|
||||
background-image: url('assets/bg-analytics.svg');
|
||||
background-size: 1800px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 450px;
|
||||
}
|
||||
|
||||
.bg-footer {
|
||||
background-image: url('assets/bg-footer.svg');
|
||||
background-color: #FDFDFE;
|
||||
background-size: 1600px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
}
|
||||
|
||||
/* Logo slider (gslide) */
|
||||
.glide__slide {
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
padding: 4px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/* Live Demo */
|
||||
.docsearch-live-demo-input-wrapper {
|
||||
margin-top: 5px;
|
||||
margin-right: 8px;
|
||||
float: right;
|
||||
width: 50%;
|
||||
max-width: 450px;
|
||||
min-width: 250px;
|
||||
|
||||
input, form {
|
||||
box-shadow: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-header-wrapper{
|
||||
height: 42px;
|
||||
background: url("assets/bg-docsearch-live-demo-bootstrap.png") #563E7C no-repeat;
|
||||
background-size: 1200px;
|
||||
background-position: left top;
|
||||
}
|
||||
|
||||
.demo-content-wrapper{
|
||||
height: 400px;
|
||||
background: url("assets/bg-docsearch-live-demo-bootstrap.png") no-repeat;
|
||||
background-size: 1200px;
|
||||
background-position: center -46px;
|
||||
}
|
||||
|
||||
/* Tooltips (popper.js) */
|
||||
.my-popper {
|
||||
padding: 24px;
|
||||
min-width: 350px;
|
||||
max-width: 48%;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 10px 2px #ccc;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 8px 18px 0 rgba(37,44,97,0.15), 0 2px 4px 0 rgba(93,100,148,0.2);
|
||||
z-index: 200;
|
||||
font-size: 14px;
|
||||
color: #8A8AAB;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(#fff, #f5f5fa);
|
||||
border-radius: 2px;
|
||||
border-top: solid 3px #5468ff;
|
||||
}
|
||||
|
||||
.my-popper .popper__arrow{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.my-popper .popper__arrow {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.my-popper[x-placement^="bottom"] {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.my-popper[x-placement^="bottom"] .popper__arrow {
|
||||
border-width: 0 8px 8px 8px;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
top: -8px;
|
||||
left: calc(50% - 8px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.control-label {
|
||||
display: inline-block;
|
||||
margin-bottom: 4px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 4px;
|
||||
border: solid 1px #DBDBE7;
|
||||
padding: 8px 16px;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-control-primary {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 2px 0 0 rgba(255,255,255,0.80), inset 0 2px 9px 0 rgba(93,100,148,0.30);
|
||||
border-radius: 24px;
|
||||
height: 42px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.elevation {
|
||||
background-image: linear-gradient(0deg, #F5F5FA 0%, #FFFFFF 100%);
|
||||
box-shadow: 0 2px 4px 0 rgba(93,100,148,0.20), 0 5px 15px 0 rgba(37,44,97,0.15);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Custom styles */
|
||||
.custom-community-projects {
|
||||
width: 400px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.25s;
|
||||
will-change: opacity;
|
||||
}
|
||||
.custom-community-link:hover .custom-community-projects {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* When we need to show code in action, we often need to show screenshots or
|
||||
* screencasts. This class will still an element to make it look like a browser
|
||||
* window.
|
||||
**/
|
||||
.fake-browser {
|
||||
padding: 24px 1px 1px 1px;
|
||||
@apply bg-grey;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 16px;
|
||||
@apply bg-red;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
box-shadow: 25px 0 0 rgba(58, 178, 189, 0.5),
|
||||
50px 0 0 rgba(236, 139, 99, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
36
docs/src/_styles/docs.css
Normal file
36
docs/src/_styles/docs.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/* Content converted form markdown */
|
||||
.documentation-content {
|
||||
/* Paragraphs */
|
||||
p {
|
||||
@apply .leading-2 my-1;
|
||||
}
|
||||
ul {
|
||||
@apply .leading-2 my-1;
|
||||
}
|
||||
/* Titles */
|
||||
h2 {
|
||||
@apply .text-solstice .text-4 .normal;
|
||||
@apply .mb-1 .mt-2;
|
||||
/* Trick to have heading scroll into view and not being hidden by header */
|
||||
&:before {
|
||||
content: "";
|
||||
@apply hidden .h-3;
|
||||
}
|
||||
&:target:before {
|
||||
@apply block;
|
||||
}
|
||||
.anchor {
|
||||
@apply .hidden;
|
||||
&:after {
|
||||
content: "#";
|
||||
}
|
||||
}
|
||||
&:hover .anchor {
|
||||
@apply .inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-sidebar{
|
||||
min-width: 200px;
|
||||
}
|
||||
|
|
@ -20,6 +20,6 @@
|
|||
/* Dropdown menu */
|
||||
/* purgecss start ignore */
|
||||
.ds-dropdown-menu {
|
||||
@apply w-100;
|
||||
//@apply w-100;
|
||||
}
|
||||
/* purgecss end ignore */
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 305 B After Width: | Height: | Size: 305 B |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 953 B After Width: | Height: | Size: 953 B |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 299 B After Width: | Height: | Size: 299 B |
BIN
docs/src/assets/docsearch-avatar.png
Normal file
BIN
docs/src/assets/docsearch-avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 204 B After Width: | Height: | Size: 204 B |
10
docs/src/assets/icons/close.svg
Normal file
10
docs/src/assets/icons/close.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>UI/icons/dark/close</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="UI/icons/dark/close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M18,15.5013324 L27.5019986,5.99933378 L28.7513324,4.75 L31.25,7.24866757 L30.0006662,8.49800135 L20.4986676,18 L30.0006662,27.5019986 L31.25,28.7513324 L28.7513324,31.25 L27.5019986,30.0006662 L18,20.4986676 L8.49800135,30.0006662 L7.24866757,31.25 L4.75,28.7513324 L5.99933378,27.5019986 L15.5013324,18 L5.99933378,8.49800135 L4.75,7.24866757 L7.24866757,4.75 L8.49800135,5.99933378 L18,15.5013324 Z" id="searchbox/sbx-icon-clear-3" fill="#182359"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 947 B |
|
Before Width: | Height: | Size: 839 B After Width: | Height: | Size: 839 B |
|
Before Width: | Height: | Size: 500 B After Width: | Height: | Size: 500 B |
10
docs/src/assets/icons/menu.svg
Normal file
10
docs/src/assets/icons/menu.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>UI/icons/dark/menu</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="UI/icons/dark/menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M3.5,7.53368421 C3.5,6.41109053 4.06,5.5 4.73941176,5.5 L30.2605882,5.5 C30.9441176,5.5 31.5,6.40295579 31.5,7.53368421 C31.5,8.65627789 30.94,9.56736842 30.2605882,9.56736842 L4.73941176,9.56736842 C4.05588235,9.56736842 3.5,8.66441263 3.5,7.53368421 Z M3.5,17.5 C3.5,16.3774063 4.06,15.4663158 4.73941176,15.4663158 L30.2605882,15.4663158 C30.9441176,15.4663158 31.5,16.3692716 31.5,17.5 C31.5,18.6225937 30.94,19.5336842 30.2605882,19.5336842 L4.73941176,19.5336842 C4.05588235,19.5336842 3.5,18.6307284 3.5,17.5 Z M3.5,27.4663158 C3.5,26.3437221 4.06,25.4326316 4.73941176,25.4326316 L30.2605882,25.4326316 C30.9441176,25.4326316 31.5,26.3355874 31.5,27.4663158 C31.5,28.5889095 30.94,29.5 30.2605882,29.5 L4.73941176,29.5 C4.05588235,29.5 3.5,28.5970442 3.5,27.4663158 Z" id="Shape" fill="#182359" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,4 +1,25 @@
|
|||
/* global Glide, docsearch, Popper */
|
||||
|
||||
window.onload = function() {
|
||||
let i = 0;
|
||||
let txt;
|
||||
let query = '';
|
||||
|
||||
docsearch({
|
||||
apiKey: 'e3082526e1d5f37055241c335ab10f72',
|
||||
indexName: 'talksearch',
|
||||
inputSelector: '.custom-search-input',
|
||||
debug: false,
|
||||
});
|
||||
|
||||
const demoDocsearch = docsearch({
|
||||
apiKey: '5990ad008512000bba2cf951ccf0332f',
|
||||
indexName: 'bootstrap',
|
||||
inputSelector: '.docsearch-live-demo-input',
|
||||
enhancedSearchInput: true,
|
||||
debug: false,
|
||||
});
|
||||
|
||||
const reference = document.querySelector(
|
||||
'.docsearch-live-demo-input-wrapper'
|
||||
);
|
||||
|
|
@ -23,10 +44,6 @@ window.onload = function() {
|
|||
}
|
||||
}
|
||||
|
||||
let i = 0;
|
||||
let txt;
|
||||
let query = '';
|
||||
|
||||
document.querySelectorAll('.ds-sample-query').forEach(el => {
|
||||
el.onclick = function() {
|
||||
txt = el.getAttribute('data-sample');
|
||||
|
|
@ -44,24 +61,11 @@ window.onload = function() {
|
|||
perView: 16,
|
||||
autoplay: 1300,
|
||||
breakpoints: {
|
||||
600: { perView: 4 },
|
||||
400: { perView: 4 },
|
||||
600: { perView: 6 },
|
||||
800: { perView: 8 },
|
||||
1200: { perView: 10 },
|
||||
1000: { perView: 10 },
|
||||
1200: { perView: 12 },
|
||||
},
|
||||
}).mount();
|
||||
};
|
||||
|
||||
docsearch({
|
||||
apiKey: 'e3082526e1d5f37055241c335ab10f72',
|
||||
indexName: 'talksearch',
|
||||
inputSelector: '.custom-search-input',
|
||||
debug: false,
|
||||
});
|
||||
|
||||
var demoDocsearch = docsearch({
|
||||
apiKey: '5990ad008512000bba2cf951ccf0332f',
|
||||
indexName: 'bootstrap',
|
||||
inputSelector: '.docsearch-live-demo-input',
|
||||
enhancedSearchInput: true,
|
||||
debug: false,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,149 +3,9 @@
|
|||
@import "./_styles/components.css";
|
||||
@import "./_styles/fonts.css";
|
||||
@import "./_styles/highlight.css";
|
||||
@import "./_styles/docs.css";
|
||||
@import "./_styles/docsearch.css";
|
||||
|
||||
/* Backgrounds */
|
||||
.bg-docsearch-hero {
|
||||
background-image: url('assets/bg-docsearch.svg'), linear-gradient(#fff, #f5f5fa);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center calc(100% - 18px);
|
||||
}
|
||||
|
||||
.bg-analytics {
|
||||
background-image: url('assets/bg-analytics.svg');
|
||||
background-size: 1800px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 450px;
|
||||
}
|
||||
|
||||
.bg-footer {
|
||||
background-image: url('assets/bg-footer.svg');
|
||||
background-color: #FDFDFE;
|
||||
background-size: 1600px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
}
|
||||
|
||||
/* Logo slider (gslide) */
|
||||
.glide__slide {
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
padding: 4px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/* Live Demo */
|
||||
.docsearch-live-demo-input-wrapper {
|
||||
margin-top: 5px;
|
||||
margin-right: 8px;
|
||||
float: right;
|
||||
width: 50%;
|
||||
max-width: 450px;
|
||||
min-width: 250px;
|
||||
|
||||
input, form {
|
||||
box-shadow: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-header-wrapper{
|
||||
height: 42px;
|
||||
background: url("assets/bg-docsearch-live-demo-bootstrap.png") #563E7C no-repeat;
|
||||
background-size: 1200px;
|
||||
background-position: left top;
|
||||
}
|
||||
|
||||
.demo-content-wrapper{
|
||||
height: 400px;
|
||||
background: url("assets/bg-docsearch-live-demo-bootstrap.png") no-repeat;
|
||||
background-size: 1200px;
|
||||
background-position: center -46px;
|
||||
}
|
||||
|
||||
/* Tooltips (popper.js) */
|
||||
.my-popper {
|
||||
padding: 24px;
|
||||
min-width: 350px;
|
||||
max-width: 48%;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 10px 2px #ccc;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 8px 18px 0 rgba(37,44,97,0.15), 0 2px 4px 0 rgba(93,100,148,0.2);
|
||||
z-index: 200;
|
||||
font-size: 14px;
|
||||
color: #8A8AAB;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(#fff, #f5f5fa);
|
||||
border-radius: 2px;
|
||||
border-top: solid 3px #5468ff;
|
||||
}
|
||||
|
||||
.my-popper .popper__arrow{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.my-popper .popper__arrow {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.my-popper[x-placement^="bottom"] {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.my-popper[x-placement^="bottom"] .popper__arrow {
|
||||
border-width: 0 8px 8px 8px;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
top: -8px;
|
||||
left: calc(50% - 8px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.control-label {
|
||||
display: inline-block;
|
||||
margin-bottom: 4px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 4px;
|
||||
border: solid 1px #DBDBE7;
|
||||
padding: 8px 16px;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-control-primary {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 2px 0 0 rgba(255,255,255,0.80), inset 0 2px 9px 0 rgba(93,100,148,0.30);
|
||||
border-radius: 24px;
|
||||
height: 42px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.elevation {
|
||||
background-image: linear-gradient(0deg, #F5F5FA 0%, #FFFFFF 100%);
|
||||
box-shadow: 0 2px 4px 0 rgba(93,100,148,0.20), 0 5px 15px 0 rgba(37,44,97,0.15);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Antialiasing */
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -173,76 +33,3 @@ code {
|
|||
@apply .rounded-1;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
/* Content converted form markdown */
|
||||
.documentation-content {
|
||||
/* Paragraphs */
|
||||
p {
|
||||
@apply .leading-2 my-1;
|
||||
}
|
||||
ul {
|
||||
@apply .leading-2 my-1;
|
||||
}
|
||||
/* Titles */
|
||||
h2 {
|
||||
@apply .text-solstice .text-5 .normal;
|
||||
@apply .mb-1 .mt-2;
|
||||
/* Trick to have heading scroll into view and not being hidden by header */
|
||||
&:before {
|
||||
content: "";
|
||||
@apply hidden .h-3;
|
||||
}
|
||||
&:target:before {
|
||||
@apply block;
|
||||
}
|
||||
.anchor {
|
||||
@apply .hidden;
|
||||
&:after {
|
||||
content: "#";
|
||||
}
|
||||
}
|
||||
&:hover .anchor {
|
||||
@apply .inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom styles */
|
||||
.custom-community-projects {
|
||||
width: 400px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.25s;
|
||||
will-change: opacity;
|
||||
}
|
||||
.custom-community-link:hover .custom-community-projects {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* When we need to show code in action, we often need to show screenshots or
|
||||
* screencasts. This class will still an element to make it look like a browser
|
||||
* window.
|
||||
**/
|
||||
.fake-browser {
|
||||
padding: 24px 1px 1px 1px;
|
||||
@apply bg-grey;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 16px;
|
||||
@apply bg-red;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
box-shadow: 25px 0 0 rgba(58, 178, 189, 0.5),
|
||||
50px 0 0 rgba(236, 139, 99, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue