diff --git a/docs/src/_includes/header.pug b/docs/src/_includes/header.pug index b992e9e7..be2616a4 100644 --- a/docs/src/_includes/header.pug +++ b/docs/src/_includes/header.pug @@ -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 diff --git a/docs/src/_includes/newsletter-form.pug b/docs/src/_includes/newsletter-form.pug new file mode 100644 index 00000000..587f1b88 --- /dev/null +++ b/docs/src/_includes/newsletter-form.pug @@ -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 diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug index eaa36454..fe79475a 100644 --- a/docs/src/_layouts/homepage.pug +++ b/docs/src/_layouts/homepage.pug @@ -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) diff --git a/docs/src/_layouts/two-columns.pug b/docs/src/_layouts/two-columns.pug index 74580510..97b47b5d 100644 --- a/docs/src/_layouts/two-columns.pug +++ b/docs/src/_layouts/two-columns.pug @@ -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 diff --git a/docs/src/_styles/components.css b/docs/src/_styles/components.css index 46275771..7198fe91 100644 --- a/docs/src/_styles/components.css +++ b/docs/src/_styles/components.css @@ -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); + } +} diff --git a/docs/src/_styles/docs.css b/docs/src/_styles/docs.css new file mode 100644 index 00000000..bc179d47 --- /dev/null +++ b/docs/src/_styles/docs.css @@ -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; +} diff --git a/docs/src/_styles/docsearch.css b/docs/src/_styles/docsearch.css index 6eee63aa..c05fef1c 100644 --- a/docs/src/_styles/docsearch.css +++ b/docs/src/_styles/docsearch.css @@ -20,6 +20,6 @@ /* Dropdown menu */ /* purgecss start ignore */ .ds-dropdown-menu { - @apply w-100; + //@apply w-100; } /* purgecss end ignore */ diff --git a/docs/src/assets/angular-icon.svg b/docs/src/assets/community/angular-icon.svg similarity index 100% rename from docs/src/assets/angular-icon.svg rename to docs/src/assets/community/angular-icon.svg diff --git a/docs/src/assets/community-logo.svg b/docs/src/assets/community/community-logo.svg similarity index 100% rename from docs/src/assets/community-logo.svg rename to docs/src/assets/community/community-logo.svg diff --git a/docs/src/assets/instantsearch-icon.svg b/docs/src/assets/community/instantsearch-icon.svg similarity index 100% rename from docs/src/assets/instantsearch-icon.svg rename to docs/src/assets/community/instantsearch-icon.svg diff --git a/docs/src/assets/jekyll-icon.svg b/docs/src/assets/community/jekyll-icon.svg similarity index 100% rename from docs/src/assets/jekyll-icon.svg rename to docs/src/assets/community/jekyll-icon.svg diff --git a/docs/src/assets/react-icon.svg b/docs/src/assets/community/react-icon.svg similarity index 100% rename from docs/src/assets/react-icon.svg rename to docs/src/assets/community/react-icon.svg diff --git a/docs/src/assets/vue-icon.svg b/docs/src/assets/community/vue-icon.svg similarity index 100% rename from docs/src/assets/vue-icon.svg rename to docs/src/assets/community/vue-icon.svg diff --git a/docs/src/assets/docsearch-avatar.png b/docs/src/assets/docsearch-avatar.png new file mode 100644 index 00000000..4054e441 Binary files /dev/null and b/docs/src/assets/docsearch-avatar.png differ diff --git a/docs/src/assets/arrow-separator.svg b/docs/src/assets/icons/arrow-separator.svg similarity index 100% rename from docs/src/assets/arrow-separator.svg rename to docs/src/assets/icons/arrow-separator.svg diff --git a/docs/src/assets/icons/close.svg b/docs/src/assets/icons/close.svg new file mode 100644 index 00000000..55b02fbe --- /dev/null +++ b/docs/src/assets/icons/close.svg @@ -0,0 +1,10 @@ + + + + UI/icons/dark/close + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/src/assets/github-logo.svg b/docs/src/assets/icons/github.svg similarity index 100% rename from docs/src/assets/github-logo.svg rename to docs/src/assets/icons/github.svg diff --git a/docs/src/assets/magnifying-glass.svg b/docs/src/assets/icons/magnifying-glass.svg similarity index 100% rename from docs/src/assets/magnifying-glass.svg rename to docs/src/assets/icons/magnifying-glass.svg diff --git a/docs/src/assets/icons/menu.svg b/docs/src/assets/icons/menu.svg new file mode 100644 index 00000000..eb627a93 --- /dev/null +++ b/docs/src/assets/icons/menu.svg @@ -0,0 +1,10 @@ + + + + UI/icons/dark/menu + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/src/js/main.js b/docs/src/js/main.js index 87c3b512..d9294cd4 100644 --- a/docs/src/js/main.js +++ b/docs/src/js/main.js @@ -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, -}); diff --git a/docs/src/style.css b/docs/src/style.css index 4cc5ff12..5a2fde94 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -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); - } -}