diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 63674a8fdb..d59b697319 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -4,16 +4,13 @@
-
+
-
+
{{ content }} diff --git a/docs/css/_documentation.sass b/docs/css/_documentation.sass deleted file mode 100644 index 8a15e7c2c9..0000000000 --- a/docs/css/_documentation.sass +++ /dev/null @@ -1,346 +0,0 @@ -// Layout - -// Navigation - -.widget-nav - padding: 0 - padding-left: 15px - font-weight: lighter - background-color: $gray-light - -.documentation-menu - height: 100% - overflow-y: auto - padding: 0 - font-size: 1.2em - font-weight: bold - > ul - line-height: 2em - list-style: none - margin: 0 - padding: 15px 0 - ul ul li:before - content: "" - width: 8px - height: 8px - background-color: $brand-primary - border-radius: 1px - margin-right: 4px - display: inline-block - a - color: #242424 - &:hover - color: $brand-primary - text-decoration: none - ul - font-size: .85em - padding: 0 0 5px 10px - line-height: 1.7em - list-style: none - -// Left panel -.widget-description - padding-right: 0 - -.main-documentation - height: 100% - padding-top: 52px - .description - min-height: 84px - -.shameless-marketing - float: right - width: 43% - color: rgba(white,.75) - .sticker - width: 60px - height: 60px - line-height: 58px - margin: 0 auto - border-radius: 50% - opacity: 0 - animation: arrow 1s ease-in-out - animation-fill-mode: forwards - border: solid 2px rgba(white,.5) - img - position: relative - top: -2px - .sticker-algolia - animation-delay: .5s - img - top: -4px - .sticker-open-source - animation-delay: 1s - .sticker-ux - animation-delay: 1.5s - - -.documentation-content - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - padding: 30px - overflow-y: scroll - font-size: 13px - line-height: 1.8em - color: rgba(0,0,0,0.75) - h1[id], h2[id], h3[id] - clear: both - h1[id], h2[id], h3[id], h4[id], h5[id] // anchorable titles - &:before - content: "" - display: block - height: $anchor-offset - margin: -$anchor-offset 0 0 - a.anchor - display: inline-block - font-size: 0.7em - visibility: hidden - padding-right: 0.2em - margin-top: -0.5em - color: inherit - &:hover, &:active, &:focus - color: inherit - text-decoration: none - &:hover - a.anchor - visibility: visible - - > p, > div[id], > h1, > h2, > h3, > h4, > h5, > .h1, > .h2, > .h3, > .h4, > .h5, > pre, > .highlight, > ul, > .row - margin-right: 50% - max-width: 50% - > p - font-size: 1.15em - > ul - font-size: 1.1em - li - padding-bottom: 6px - > .highlight, > .row .highlight - pre - border: 1px solid #A3B6CB - .o - color: inherit - h2, .h2 - margin-top: 3em - font-size: 2em - font-weight: normal - text-transform: uppercase - clear: both - &:first-child - margin-top: 0 - h3, .h3 - margin: 2em 0 .8em - font-size: 1.7em - font-weight: bold - clear: both - h4, .h4 - border-bottom: dashed 1px #ccc - padding: 0 0 8px - margin: 2em 0 1em 0 - font-size: 1.3em - font-weight: bold - clear: both - > p, > ul - code - background-color: #F3F3F3 - border: 1px solid darken(#F3F3F3,7%) - color: $text-color - font-weight: bold - -.widget-icon - margin: 4px 20px 20px 0 - -.html-container - border: none - color: #A3B6CB - padding: 9.5px - margin: 0 0 10px - background-color: #0A1724 - word-wrap: normal - white-space: pre - overflow-x: scroll - -.widget-container - padding: 50px 40px 40px - border: solid 1px #E4E4E4 - border-radius: 5px - position: relative - overflow-x: hidden - &:after - font-size: 11px - content: "Widget display" - top: 0 - left: 0 - color: #999 - padding: 4px 6px - line-height: 1em - position: absolute - background-color: $gray-light - border: solid 1px #E4E4E4 - border-width: 0 1px 1px 0 - border-radius: 5px 0 3px 0 - -// Code box - -.code-samples - background-color: #172C4F - background: linear-gradient(to bottom, #0a1724 0%,#172c4f 100%) - position: absolute - width: 46% - top: 0 - right: 0 - bottom: 0 - -.code-box - position: relative - width: 43% - float: right - clear: right - .btn-group - position: absolute - right: 0 - top: -3em - .toggle-doc-button - text-align: right - color: $brand-primary - background-color: #0A1724 - border: none - transition: all .2s - &:hover - color: #fff - &:active, &:focus - outline: 0px - &.active - font-weight: bolder - background: #163350 - .copy-btn - display: block - position: absolute - right: 5px - top: 5px - opacity: 0 - font-size: .9em - background-color: rgba($brand-primary,.1) - border: none - text-transform: uppercase - color: rgba(white,.4) - transition: opacity .2s - &:active, &:focus - outline: 0 - &:active - color: white !important - background-color: rgba($brand-primary,.4) - color: #0A1724 - &:hover - .copy-btn - display: block - opacity: 1 - .jsdoc - border: none - color: #A3B6CB - padding: 9.5px - margin: 0 0 10px - background-color: #0A1724 - code - background-color: #0A1724 - .attr-optional code - color: #46AEDA - .attr-required code - color: $success-color - h5 - text-decoration: underline - color: #ddd - pre - background: transparent - border: none - padding: 0 - margin-bottom: 1.5em - table - table-layout: fixed - margin-top: 1em - width: 100% - th - font-size: 11px - font-weight: bold - text-transform: uppercase - border-bottom: solid 1px #758393 - td - padding: 0.5em - border-bottom: solid 1px #162B50 - code - color: white - .attr-legend - padding: 10px - margin: 0 - text-align: right - span - font-size: 10px - color: #58D158 - - -// Widgets -#q input - width: 100% - padding: 2px 3px - -// debug -.debug-widget - position: relative - &.widget-container:after - z-index: 11 - border: none - > [class^=ais-] - padding: 4px - outline: 1px solid #660000 - &:before - content: "." attr(class) - text-align: right - white-space: nowrap - font-size: 12px - font-weight: bold - z-index: 10 - position: absolute - top: 0 - right: 0 - left: 0 - padding: 4px 6px - line-height: 1em - background-color: $gray-light - color: #660000 - [class^=ais-] - cursor: pointer - padding: 4px - &:hover - outline: 1px solid #660000 - &:before - content: "." attr(class) - text-align: right - white-space: nowrap - font-size: 12px - font-weight: bold - z-index: 10 - position: absolute - top: 0 - right: 0 - left: 0 - padding: 4px 6px - line-height: 1em - background-color: $gray-light - color: #660000 - [class^=ais-] - &:hover - outline: 1px solid #990000 - &:before - color: #990000 - [class^=ais-] - &:hover - outline: 1px solid #CC3300 - &:before - color: #CC3300 - [class^=ais-] - &:hover - outline: 1px solid #FF6600 - &:before - color: #FF6600 diff --git a/docs/css/_documentation.scss b/docs/css/_documentation.scss new file mode 100644 index 0000000000..700d06cb90 --- /dev/null +++ b/docs/css/_documentation.scss @@ -0,0 +1,483 @@ +// Layout + +// Navigation +.widget-nav { + padding: 0; + padding-left: 15px; + font-weight: lighter; + background-color: $gray-light; +} + +.documentation-menu { + height: 100%; + overflow-y: auto; + padding: 0; + font-size: 1.2em; + font-weight: bold; + > ul { + line-height: 2em; + list-style: none; + margin: 0; + padding: 15px 0; + ul ul li:before { + content: ""; + width: 8px; + height: 8px; + background-color: $brand-primary; + border-radius: 1px; + margin-right: 4px; + display: inline-block; + } + a { + color: #242424; + &:hover { + color: $brand-primary; + text-decoration: none; + } + } + ul { + font-size: 0.85em; + padding: 0 0 5px 10px; + line-height: 1.7em; + list-style: none; + } + } +} + +// Main Content + +// Left panel +.widget-description { + padding-right: 0; +} + +.main-documentation { + height: 100%; + padding-top: 52px; + .description { + min-height: 84px; + } +} + +.shameless-marketing { + float: right; + width: 43%; + color: rgba(white, 0.75); + .sticker { + width: 60px; + height: 60px; + line-height: 58px; + margin: 0 auto; + border-radius: 50%; + opacity: 0; + animation: arrow 1s ease-in-out; + animation-fill-mode: forwards; + border: solid 2px rgba(white, 0.5); + img { + position: relative; + top: -2px; + } + } + .sticker-algolia { + animation-delay: 0.5s; + img { + top: -4px; + } + } + .sticker-open-source { + animation-delay: 1s; + } + .sticker-ux { + animation-delay: 1.5s; + } +} + +.documentation-content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 30px; + overflow-y: scroll; + font-size: 13px; + line-height: 1.8em; + color: rgba(0, 0, 0, 0.75); + h1[id], h2[id], h3[id] { + clear: both; + } + h1[id], h2[id], h3[id], h4[id], h5[id] { + &:before { + content: ""; + display: block; + height: $anchor-offset; + margin: -$anchor-offset 0 0; + } + a.anchor { + display: inline-block; + font-size: 0.7em; + visibility: hidden; + padding-right: 0.2em; + margin-top: -0.5em; + color: inherit; + &:hover, &:active, &:focus { + color: inherit; + text-decoration: none; + } + } + &:hover { + a.anchor { + visibility: visible; + } + } + } + > p, > div[id], > h1, > h2, > h3, > h4, > h5, > .h1, > .h2, > .h3, > .h4, > .h5, > pre, > .highlight, > ul, > .row { + margin-right: 50%; + max-width: 50%; + } + > p { + font-size: 1.15em; + } + > ul { + font-size: 1.1em; + li { + padding-bottom: 6px; + } + } + > .highlight, > .row .highlight { + pre { + border: 1px solid #a3b6cb; + .o { + color: inherit; + } + } + } + h2, .h2 { + margin-top: 3em; + font-size: 2em; + font-weight: normal; + text-transform: uppercase; + clear: both; + &:first-child { + margin-top: 0; + } + } + h3, .h3 { + margin: 2em 0 0.8em; + font-size: 1.7em; + font-weight: bold; + clear: both; + } + h4, .h4 { + border-bottom: dashed 1px #cccccc; + padding: 0 0 8px; + margin: 2em 0 1em 0; + font-size: 1.3em; + font-weight: bold; + clear: both; + } + > p, > ul { + code { + background-color: #f3f3f3; + border: 1px solid darken(#f3f3f3, 7%); + color: $text-color; + font-weight: bold; + } + } +} + +.widget-icon { + margin: 4px 20px 20px 0; +} + +.html-container { + border: none; + color: #a3b6cb; + padding: 9.5px; + margin: 0 0 10px; + background-color: #0a1724; + word-wrap: normal; + white-space: pre; + overflow-x: scroll; +} + +.widget-container { + padding: 50px 40px 40px; + border: solid 1px #e4e4e4; + border-radius: 5px; + position: relative; + overflow-x: hidden; + &:after { + font-size: 11px; + content: "Widget display"; + top: 0; + left: 0; + color: #999999; + padding: 4px 6px; + line-height: 1em; + position: absolute; + background-color: $gray-light; + border: solid 1px #e4e4e4; + border-width: 0 1px 1px 0; + border-radius: 5px 0 3px 0; + } +} + +// Code box + +.code-samples { + background-color: #172c4f; + background: linear-gradient(to bottom, #0a1724 0%, #172c4f 100%); + position: absolute; + width: 46%; + top: 0; + right: 0; + bottom: 0; +} + +.code-box { + position: relative; + width: 43%; + float: right; + clear: right; + .btn-group { + position: absolute; + right: 0; + top: -3em; + .toggle-doc-button { + text-align: right; + color: $brand-primary; + background-color: #0a1724; + border: none; + &:hover { + color: white; + } + &:active, &:focus { + outline: 0px; + } + &.active { + font-weight: bolder; + background: #163350; + } + } + } + .copy-btn { + display: block; + position: absolute; + right: 5px; + top: 5px; + opacity: 0; + font-size: .9em; + background-color: rgba($brand-primary,.1); + border: none; + text-transform: uppercase; + color: rgba(white,.4); + transition: opacity .2s; + &:active, &:focus { + outline: 0px; + } + &:active { + color: #0a1724; + background-color: $brand-primary; + border-color: #0a1724; + } + } + &:hover { + .copy-btn { + display: block; + opacity: 1; + } + } + .jsdoc { + border: none; + color: #a3b6cb; + padding: 9.5px; + margin: 0 0 10px; + background-color: #0a1724; + code { + background-color: #0a1724; + } + .attr-optional code { + color: #46aeda; + } + .attr-required code { + color: $success-color; + } + h5 { + text-decoration: underline; + color: #dddddd; + } + pre { + background: transparent; + border: none; + padding: 0; + margin-bottom: 1.5em; + } + table { + table-layout: fixed; + margin-top: 1em; + width: 100%; + th { + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + border-bottom: solid 1px #758393; + } + td { + padding: 0.5em; + border-bottom: solid 1px #162b50; + code { + color: white; + } + } + } + .attr-legend { + padding: 10px; + margin: 0; + text-align: right; + span { + font-size: 10px; + color: #58d158; + } + } + } +} + +// Widgets +#q input { + width: 100%; + padding: 2px 3px; +} + +// debug +.debug-widget { + position: relative; + &.widget-container:after { + z-index: 11; + border: none; + } + > [class^=ais-] { + outline: 1px solid #660000; + &:before { + content: "." attr(class); + text-align: right; + white-space: nowrap; + font-size: 11px; + z-index: 10; + position: absolute; + top: 0; + right: 0; + left: 0; + padding: 4px 6px; + line-height: 1em; + background-color: $gray-light; + color: #660000; + } + } + [class^=ais-] { + cursor: pointer; + padding: 4px; + &:hover { + outline: 1px solid #660000; + &:before { + content: "." attr(class); + text-align: right; + white-space: nowrap; + font-size: 11px; + font-size: 12px; + font-weight: bold; + z-index: 10; + position: absolute; + top: 0; + right: 0; + left: 0; + padding: 4px 6px; + line-height: 1em; + background-color: $gray-light; + color: #660000; + } + } + [class^=ais-] { + &:hover { + outline: 1px solid #990000; + &:before { + color: #990000; + } + } + [class^=ais-] { + &:hover { + outline: 1px solid #cc3300; + &:before { + color: #cc3300; + } + } + [class^=ais-] { + &:hover { + outline: 1px solid #ff6600; + &:before { + color: #ff6600; + } + } + } + } + } + } +} + +@media (max-width: $screen-xs-max) { + .main-documentation { + padding: 52px 0 0 0; + .row { + margin: 0; + } + img { + max-width: 100%; + } + code { + word-wrap: break-word; + } + .widget-description { + padding: 0; + } + } + .navbar-nav { + display: none; + } + .documentation-content{ + padding: 20px 0; + p, h1, h2, h3, h4, .h4, div[id], ul { + margin-right: 0; + width: 100%; + max-width: 100%; + } + p, h1, h2, h3 { + padding: 9.5px; + } + } + .code-box { + width: 100%; + background: #172c4f; + margin-bottom: 1em; + .btn-group { + position: static; + } + .copy-btn { + display: none; + visibility: hidden; + } + .btn-group { + .toggle-doc-button{ + background: #163350; + &.active { + background: #0a1724; + } + } + } + .highlight pre { + margin: 0; + } + .jsdoc { + margin: 0; + } + } +} diff --git a/docs/css/main.sass b/docs/css/main.sass deleted file mode 100644 index 785fe12e59..0000000000 --- a/docs/css/main.sass +++ /dev/null @@ -1,16 +0,0 @@ ---- -# this ensures Jekyll reads the file to be transformed into CSS later -# only Main files contain this front matter, not partials. ---- - -@import "base" -@import "bootstrap" -@import "syntax-highlighting" -@import "helper" - -@import "header" -@import "home" -@import "page" -@import "documentation" -@import "footer" - diff --git a/docs/css/main.scss b/docs/css/main.scss new file mode 100644 index 0000000000..57dd80a44d --- /dev/null +++ b/docs/css/main.scss @@ -0,0 +1,15 @@ +--- +# this ensures Jekyll reads the file to be transformed into CSS later +# only Main files contain this front matter, not partials. +--- + +@import "base"; +@import "bootstrap"; +@import "syntax-highlighting"; +@import "helper"; + +@import "header"; +@import "home"; +@import "page"; +@import "documentation"; +@import "footer"; diff --git a/docs/documentation.md b/docs/documentation.md index 6b53529239..005adf2041 100644 --- a/docs/documentation.md +++ b/docs/documentation.md @@ -9,7 +9,7 @@ noFooter: true ## Introduction -
+