From 7389d5bbca43efc82d1aad84bf94e91e4397f42b Mon Sep 17 00:00:00 2001
From: chomik <codecalm@gmail.com>
Date: Mon, 20 May 2019 23:02:56 +0200
Subject: [PATCH] form helpers

---
 _config.yml                      | 11 -----------
 pages/_data/docs.yml             | 14 ++++++++++++++
 pages/_data/menu.yml             |  2 +-
 pages/_docs/alerts.md            |  8 ++++----
 pages/_docs/avatars.md           |  4 ++--
 pages/_docs/badges.md            | 10 +++++-----
 pages/_docs/form-helpers.md      |  9 +++++++++
 pages/_docs/spinners.md          | 10 +++++-----
 pages/_docs/steps.md             | 10 +++++-----
 pages/_docs/tables.md            |  4 ++--
 pages/_docs/toasts.md            |  2 +-
 pages/_docs/typography.md        | 23 +++++++++++++++++------
 pages/_includes/layout/menu.html |  7 ++++---
 pages/_layouts/docs.html         |  1 +
 pages/_plugins/jekyll-example.rb |  4 ++++
 scss/ui/_inputs.scss             | 28 ++++++++++++++++++++++++++++
 scss/utils/_text.scss            | 12 ++++++++++++
 17 files changed, 114 insertions(+), 45 deletions(-)
 create mode 100644 pages/_data/docs.yml
 create mode 100644 pages/_docs/form-helpers.md

diff --git a/_config.yml b/_config.yml
index 5339f3a63..6f184817e 100644
--- a/_config.yml
+++ b/_config.yml
@@ -111,14 +111,3 @@ socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram
 
 months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-
-docs-menu:
-  intro:
-    title: Getting started
-    pages: [index]
-  components:
-    title: Components
-    pages: [alerts, avatars, badges, buttons, cards, carousel, ribbons, spinners, steps, tabs, toasts, tooltips, typography]
-
-
diff --git a/pages/_data/docs.yml b/pages/_data/docs.yml
new file mode 100644
index 000000000..995959983
--- /dev/null
+++ b/pages/_data/docs.yml
@@ -0,0 +1,14 @@
+- page: alerts
+- page: avatars
+- page: badges
+- page: buttons
+- page: cards
+- page: carousel
+- page: ribbons
+- page: spinners
+- page: steps
+- page: tabs
+- page: toasts
+- page: tooltips
+- page: typography
+- page: form-helpers
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 587ad8662..e87f87ff1 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -20,7 +20,7 @@ level-1:
 docs:
   title: Documentation
   icon: file-text
-  docs: components
+  docs: true
 
 changelog:
   url: changelog.html
diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md
index f1a7c8ab0..e81bd611e 100644
--- a/pages/_docs/alerts.md
+++ b/pages/_docs/alerts.md
@@ -7,7 +7,7 @@ Bootstrap provides an easy way to create predefined alert messages.
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!
@@ -21,7 +21,7 @@ Bootstrap provides an easy way to create predefined alert messages.
 
 Add the `alert-link` class to any links inside the alert box to create "matching colored links":
 
-{% example html %}
+{% example %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — <a href="#">check it out!</a>
@@ -33,7 +33,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 
 ## Closing Alerts
 
-{% example html %}
+{% example %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!
@@ -44,7 +44,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 
 ## Alerts with icons
 
-{% example html %}
+{% example %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!
diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md
index a0f2f44c8..d36ae94f6 100644
--- a/pages/_docs/avatars.md
+++ b/pages/_docs/avatars.md
@@ -83,7 +83,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 
 ## Avatars list
 
-{% example html %}
+{% example %}
 <div class="avatar-list">
 {% for person in site.data.people limit: 5 offset: 20 %}
   {% include ui/avatar.html person=person %}
@@ -91,7 +91,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 </div>
 {% endexample %}
 
-{% example html %}
+{% example %}
 <div class="avatar-list avatar-list-stacked">
   {% for person in site.data.people limit: 5 offset: 30 %}
   {% include ui/avatar.html person=person element="a" %}
diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md
index 3241ef2ae..058233c9d 100644
--- a/pages/_docs/badges.md
+++ b/pages/_docs/badges.md
@@ -7,7 +7,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <span class="badge text-white bg-{{ color[0] }}">{{ color[0] }}</span>
 {% endfor %}
@@ -15,7 +15,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Pill badges
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <span class="badge badge-pill text-white bg-{{ color[0] }}">{{ forloop.index }}</span>
 {% endfor %}
@@ -24,7 +24,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Soft badges
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
 {% endfor %}
@@ -33,7 +33,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Links
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
 {% endfor %}
@@ -42,7 +42,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Empty badges
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <a href="#" class="badge bg-{{ color[0] }}"></a>
 {% endfor %}
diff --git a/pages/_docs/form-helpers.md b/pages/_docs/form-helpers.md
new file mode 100644
index 000000000..9b380478f
--- /dev/null
+++ b/pages/_docs/form-helpers.md
@@ -0,0 +1,9 @@
+---
+title: Form helpers
+---
+
+## Input help
+
+{% example %}
+<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
+{% endexample %}
diff --git a/pages/_docs/spinners.md b/pages/_docs/spinners.md
index 683184a72..feedbf916 100644
--- a/pages/_docs/spinners.md
+++ b/pages/_docs/spinners.md
@@ -5,14 +5,14 @@ menu: docs.spinners
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% include ui/spinner.html %}
 {% endexample %}
 
 
 ## Colors
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 {% assign c = color[0] %}
 {% include ui/spinner.html color=c %}
@@ -21,18 +21,18 @@ menu: docs.spinners
 
 ## Size
 
-{% example html %}
+{% example %}
 {% include ui/spinner.html %}
 {% include ui/spinner.html size="sm" %}
 {% endexample %}
 
 ## Growing spinner
 
-{% example html %}
+{% example %}
 {% include ui/spinner.html type="grow" %}
 {% endexample %}
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 {% assign c = color[0] %}
 {% include ui/spinner.html color=c type="grow" %}
diff --git a/pages/_docs/steps.md b/pages/_docs/steps.md
index 2f43988f0..5ad605bac 100644
--- a/pages/_docs/steps.md
+++ b/pages/_docs/steps.md
@@ -7,31 +7,31 @@ Steps are progress indicators of a sequence of task steps.
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% include ui/steps.html show-title=true %}
 {% endexample %}
 
 ## Tooltips
 
-{% example html %}
+{% example %}
 {% include ui/steps.html show-title=true show-tooltip=true %}
 {% endexample %}
 
 ## Color
 
-{% example html %}
+{% example %}
 {% include ui/steps.html color="green" show-title=true %}
 {% include ui/steps.html color="red" show-title=true %}
 {% endexample %}
 
 ## Steps without title
 
-{% example html %}
+{% example %}
 {% include ui/steps.html show-tooltip=true %}
 {% endexample %}
 
 ## Steps with numbers
 
-{% example html %}
+{% example %}
 {% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
 {% endexample %}
diff --git a/pages/_docs/tables.md b/pages/_docs/tables.md
index 6cc7e58a6..9e2a2613d 100644
--- a/pages/_docs/tables.md
+++ b/pages/_docs/tables.md
@@ -9,7 +9,7 @@ A basic Bootstrap table has a light padding and only horizontal dividers.
 
 The `.table` class adds basic styling to a table:
 
-{% example html %}
+{% example %}
 {% include ui/table.html %}
 {% endexample %}
 
@@ -17,6 +17,6 @@ The `.table` class adds basic styling to a table:
 
 Prevents table cell content from wrapping to another line.
 
-{% example html %}
+{% example %}
 {% include ui/table.html nowrap=true responsive=true %}
 {% endexample %}
diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md
index ca5118c78..f88b48422 100644
--- a/pages/_docs/toasts.md
+++ b/pages/_docs/toasts.md
@@ -7,6 +7,6 @@ The toast component is like an alert box that is only shown for a couple of seco
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% include ui/toast.html %}
 {% endexample %}
diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md
index 307d2d1ab..c7e562c9f 100644
--- a/pages/_docs/typography.md
+++ b/pages/_docs/typography.md
@@ -8,7 +8,7 @@ description: Documentation and examples for common text utilities to control ali
 
 Easily realign text to components with text alignment classes.
 
-{% example html %}
+{% example %}
 <p class="text-left">Left aligned text on all viewport sizes.</p>
 <p class="text-center">Center aligned text on all viewport sizes.</p>
 <p class="text-right">Right aligned text on all viewport sizes.</p>
@@ -19,7 +19,7 @@ Easily realign text to components with text alignment classes.
 
 Transform text in components with text capitalization classes.
 
-{% example html %}
+{% example %}
 <p class="text-lowercase">Lowercased text.</p>
 <p class="text-uppercase">Uppercased text.</p>
 <p class="text-capitalize">Capitalized text.</p>
@@ -29,7 +29,7 @@ Transform text in components with text capitalization classes.
 
 Utilities for controlling the tracking (letter spacing) of an element.
 
-{% example html %}
+{% example %}
 <p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
 <p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
 <p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
@@ -39,18 +39,29 @@ Utilities for controlling the tracking (letter spacing) of an element.
 
 Utilities for controlling the leading (line height) of an element.
 
-{% example html %}
+{% example %}
 <p class="leading-none">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 <p class="leading-tight">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 <p class="leading-normal">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 <p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 {% endexample %}
 
-## Basic elements
+## Antialiasing
+
+Utilities for controlling the font smoothing of an element.
+
+Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` render without antialiasing.
+
+{% example %}
+<div class="antialiased">Text with antialiasing</div>
+<div class="subpixel-antialiased">Text without antialiasing</div>
+{% endexample %}
+
+## Markdown elements
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.
 
-{% example html %}
+{% example %}
 <div class="markdown">
    <h1>Hello World</h1>
    <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html
index e388f8e00..8817d503a 100644
--- a/pages/_includes/layout/menu.html
+++ b/pages/_includes/layout/menu.html
@@ -19,9 +19,9 @@
          <ul class="nav nav-sm flex-column">
 
             {% if level-1[1].docs %}
-            {% assign docs-key = level-1[1].docs %}
-            {% for doc-slug in site.docs-menu[docs-key].pages %}
-            {% assign doc = site.docs | where: "slug", doc-slug | first %}
+            {% for d in site.data.docs %}
+            {% assign doc = site.docs | where: "slug", d.page | first %}
+            {% if doc %}
             <li class="nav-item">
                <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
                   <span class="nav-link-title">
@@ -33,6 +33,7 @@
                   </span>
                </a>
             </li>
+            {% endif %}
             {% endfor %}
             {% endif %}
 
diff --git a/pages/_layouts/docs.html b/pages/_layouts/docs.html
index c33bd1c18..4cf2febf5 100644
--- a/pages/_layouts/docs.html
+++ b/pages/_layouts/docs.html
@@ -37,5 +37,6 @@ title: Documentation
 <script>
    $(document).ready(function(){
       $('[data-toggle="tooltip"]').tooltip();
+      $('[data-toggle="popover"]').popover();
    });
 </script>
diff --git a/pages/_plugins/jekyll-example.rb b/pages/_plugins/jekyll-example.rb
index e89c52ce0..1d2146175 100644
--- a/pages/_plugins/jekyll-example.rb
+++ b/pages/_plugins/jekyll-example.rb
@@ -14,6 +14,10 @@ module Jekyll
 
       def initialize(tag_name, markup, tokens)
         super
+        if markup.strip == ""
+          markup = 'html'
+        end
+
         if markup.strip =~ SYNTAX
           @lang = $1.downcase
           @options = {}
diff --git a/scss/ui/_inputs.scss b/scss/ui/_inputs.scss
index 924a8679a..2c61c9f12 100644
--- a/scss/ui/_inputs.scss
+++ b/scss/ui/_inputs.scss
@@ -16,6 +16,10 @@ textarea {
 }
 
 .form-control {
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
+  }
+
   &:disabled,
   &.disabled {
     color: $text-muted;
@@ -48,3 +52,27 @@ textarea {
   border: 1px solid $border-color;
 }
 
+/**
+Form help
+ */
+.form-help {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  text-align: center;
+  line-height: 1rem;
+  color: $text-muted;
+  background: $gray-100;
+  border-radius: 50%;
+  font-size: px2rem(12px);
+  transition: .3s background-color, .3s color;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover,
+  &[aria-describedby] {
+    background: $primary;
+    color: #fff;
+  }
+}
diff --git a/scss/utils/_text.scss b/scss/utils/_text.scss
index bfbdf9112..fe4894d46 100644
--- a/scss/utils/_text.scss
+++ b/scss/utils/_text.scss
@@ -45,11 +45,23 @@
 .font-extrabold	{ font-weight: 800 !important; }
 .font-black		{ font-weight: 900 !important; }
 
+
+/**
+Antialiasing
+ */
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+/**
+Markdown
+ */
 .markdown {
   line-height: 1.66;