From 7b9466f62505182e4faadc64b1caaff3bc664941 Mon Sep 17 00:00:00 2001
From: ines <ines@ines.io>
Date: Wed, 17 May 2017 12:03:11 +0200
Subject: [PATCH] Add mixins and styles for quickstart widget

---
 website/_includes/_mixins-base.jade           | 38 +++++++++
 .../assets/css/_components/_quickstart.sass   | 83 +++++++++++++++++++
 website/assets/css/style.sass                 |  1 +
 3 files changed, 122 insertions(+)
 create mode 100644 website/assets/css/_components/_quickstart.sass

diff --git a/website/_includes/_mixins-base.jade b/website/_includes/_mixins-base.jade
index 94b1bfd84..e75ef36c8 100644
--- a/website/_includes/_mixins-base.jade
+++ b/website/_includes/_mixins-base.jade
@@ -86,6 +86,44 @@ mixin permalink(id)
         block
 
 
+//- Quickstart widget
+    quickstart.js with manual markup, inspired by PyTorch's "Getting started"
+    groups - [object] option groups, uses global variable QUICKSTART
+    headline - [string] optional text to be rendered as widget headline
+
+mixin quickstart(groups, headline)
+    .c-quickstart.o-block#qs
+        .c-quickstart__content
+            if headline
+                +h(2)=headline
+            for group in groups
+                .c-quickstart__group.u-text-small(data-qs-group=group.id)
+                    .c-quickstart__legend=group.title
+                    .c-quickstart__fields
+                        for option in group.options
+                            input.c-quickstart__input(class="c-quickstart__input--" + (group.multiple ? "check" : "radio") type=group.multiple ? "checkbox" : "radio" name=group.id id=option.id value=option.id checked=option.checked)
+                            label.c-quickstart__label(for=option.id)=option.title
+                                if option.meta
+                                    |  #[span.c-quickstart__label__meta (#{option.meta})]
+                                if option.help
+                                    |  #[+help(option.help).c-quickstart__label__meta]
+
+        pre.c-code-block
+            code.c-code-block__content.c-quickstart__code(data-qs-results="")
+                block
+
+
+//- Quickstart code item
+    data [object] - Rendering conditions (keyed by option group ID, value: option)
+
+mixin qs(data)
+    - args = {}
+    for value, setting in data
+        - args['data-qs-' + setting] = value
+    span.c-quickstart__line&attributes(args)
+        block
+
+
 //- Terminal-style code window
     label - [string] title displayed in top bar of terminal window
 
diff --git a/website/assets/css/_components/_quickstart.sass b/website/assets/css/_components/_quickstart.sass
new file mode 100644
index 000000000..f9972db70
--- /dev/null
+++ b/website/assets/css/_components/_quickstart.sass
@@ -0,0 +1,83 @@
+//- 💫 CSS > COMPONENTS > QUICKSTART
+
+.c-quickstart
+    border: 1px solid $color-subtle
+    border-radius: 2px
+    display: none
+    background: $color-subtle-light
+
+.c-quickstart__content
+    padding: 2rem 3rem
+
+.c-quickstart__input
+    display: none
+
+.c-quickstart__label
+    cursor: pointer
+    background: $color-back
+    border: 1px solid $color-subtle
+    border-radius: 2px
+    display: inline-block
+    padding: 0.75rem 1.25rem
+    margin: 0 0.5rem 0.5rem 0
+    font-weight: bold
+
+    &:hover
+        background: lighten($color-theme-light, 5)
+
+    .c-quickstart__input--radio:checked + &
+        color: $color-back
+        border-color: $color-theme
+        background: $color-theme
+
+    .c-quickstart__input--check + &:before
+        content: ""
+        background: $color-back
+        display: inline-block
+        width: 20px
+        height: 20px
+        position: relative
+        bottom: 0.2rem
+        border: 1px solid $color-subtle
+        vertical-align: middle
+        margin-right: 1rem
+        cursor: pointer
+        border-radius: 50%
+
+    .c-quickstart__input--check:checked + &:before
+        background: $color-theme url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+)
+        background-size: contain
+        border-color: $color-theme
+
+.c-quickstart__label__meta
+    font-weight: normal
+    color: $color-subtle-dark
+
+.c-quickstart__group
+    @include breakpoint(min, md)
+        display: flex
+        flex-flow: row nowrap
+
+    &:not(:last-child)
+        margin-bottom: 1rem
+
+.c-quickstart__fields
+    flex: 100%
+
+.c-quickstart__legend
+    color: $color-subtle-dark
+    margin-right: 2rem
+    padding-top: 0.75rem
+    flex: 1 1 35%
+    font-weight: bold
+
+.c-quickstart__line
+    display: block
+
+    &:before
+        color: $color-theme
+        margin-right: 1em
+        content: "$"
+
+.c-quickstart__code
+    font-size: 1.6rem
diff --git a/website/assets/css/style.sass b/website/assets/css/style.sass
index 259d563c3..eaf7cdf70 100644
--- a/website/assets/css/style.sass
+++ b/website/assets/css/style.sass
@@ -32,4 +32,5 @@ $theme: blue !default
 @import _components/navigation
 @import _components/sidebar
 @import _components/tables
+@import _components/quickstart
 @import _components/tooltips