spinners, small fixes

Gemfile

@@ -9,3 +9,5 @@ gem "jekyll-random", "~> 0.0.3"
 gem "jekyll-tidy"
 gem "jekyll-timeago"
 gem 'jekyll-redirect-from'
+
+gem "htmlbeautifier", "~> 1.3"

Gemfile.lock

@@ -70,6 +70,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  htmlbeautifier (~> 1.3)
   jekyll (>= 3.8.5)
   jekyll-random (~> 0.0.3)
   jekyll-redirect-from

_config.yml

@@ -106,4 +106,4 @@ docs-menu:
 - title: Getting started
   pages: [index]
 - title: Components
-  pages: [avatars, badges, buttons, carousel, toasts, tooltips, typography]
+  pages: [avatars, badges, buttons, carousel, spinners, toasts, tooltips, typography]

pages/_docs/spinners.md

@@ -0,0 +1,49 @@
+---
+title: Spinners
+---
+
+### Default markup
+
+{% example html %}
+{% include ui/spinner.html %}
+{% endexample %}
+
+
+### Colors
+
+{% example html %}
+{% for color in site.colors %}
+{% assign c = color[0] %}
+{% include ui/spinner.html color=c %}
+{% endfor %}
+{% endexample %}
+
+### Size
+
+{% example html %}
+{% include ui/spinner.html %}
+{% include ui/spinner.html size="sm" %}
+{% endexample %}
+
+### Growing spinner
+
+{% example html %}
+{% include ui/spinner.html type="grow" %}
+{% endexample %}
+
+{% example html %}
+{% for color in site.colors %}
+{% assign c = color[0] %}
+{% include ui/spinner.html color=c type="grow" %}
+{% endfor %}
+{% endexample %}
+
+### Buttons
+
+{% example html wrapper=btn-list %}
+{% include ui/button.html spinner=true text="Button" color="primary" %}
+{% include ui/button.html spinner=true text="Button" color="danger" %}
+{% include ui/button.html spinner=true text="Button" color="warning" %}
+{% include ui/button.html spinner=true color="success" %}
+{% include ui/button.html spinner=true color="secondary" %}
+{% endexample %}

pages/_includes/ui/button.html

@@ -1 +1,4 @@
-{% assign element = include.element | default: 'button' %}<{{ element }}{% if element == 'a' %} href="{{ include.href | default: '#' }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">{% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %}{% if include.label %}<span class="btn-label-icon">{% include ui/icon.html icon=include.label %}</span>{% endif %}{{ include.text }}</{{ element }}>
+{% assign spinner-class = false %}
+{% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
+{% assign element = include.element | default: 'button' %}<{{ element }}{% if element == 'a' %} href="{{ include.href | default: '#' }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">{% if include.spinner %}
+{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}{% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %}{% if include.label %}<span class="btn-label-icon">{% include ui/icon.html icon=include.label %}</span>{% endif %}{{ include.text }}</{{ element }}>

pages/_includes/ui/spinner.html

@@ -0,0 +1,4 @@
+{% assign elem = include.element | default: 'div' %}
+<{{ elem }} class="spinner-{{ include.type | default: 'border' }}{% if include.color %} text-{{ include.color }}{% endif %}{% if include['size'] %} spinner-{{ include.type | default: 'border' }}-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="status">
+   <span class="sr-only">loading...</span>
+</{{ elem }}>

pages/_plugins/jekyll-example.rb

@@ -1,3 +1,5 @@
+require 'htmlbeautifier'
+
 module Jekyll
   module Tags
     class ExampleBlock < Liquid::Block
@@ -21,8 +23,8 @@ module Jekyll
               key, value = opt.split('=')
               # If a quoted list, convert to array
               if value && value.include?("\"")
-                  value.gsub!(/"/, "")
+                value.gsub!(/"/, "")
-                  value = value.split
+                value = value.split
               end
               @options[key.to_sym] = value || true
             end
@@ -35,7 +37,7 @@ Syntax Error in tag 'example' while parsing the following markup:
   #{markup}
 
 Valid syntax: example <lang> [id=foo]
-eos
+          eos
         end
       end
 
@@ -46,9 +48,11 @@ eos
 
         output = case context.registers[:site].highlighter
 
-        when 'rouge'
+                 when 'rouge'
-          render_rouge(code)
+                   render_rouge(code)
-        end
+                 end
+
+        # output = HtmlBeautifier.beautify(output, indent: "\t")
 
         rendered_output = example(code) + add_code_tag(output)
         prefix + rendered_output + suffix
@@ -82,8 +86,8 @@ eos
 
       def add_code_tag(code)
         # Add nested <code> tags to code blocks
-        code = code.sub(/<pre>\n*/,'<pre><code class="language-' + @lang.to_s.gsub("+", "-") + '" data-lang="' + @lang.to_s + '">')
+        code = code.sub(/<pre>\n*/, '<pre><code class="language-' + @lang.to_s.gsub("+", "-") + '" data-lang="' + @lang.to_s + '">')
-        code = code.sub(/\n*<\/pre>/,"</code></pre>")
+        code = code.sub(/\n*<\/pre>/, "</code></pre>")
         code.strip
       end
 
@@ -91,4 +95,4 @@ eos
   end
 end
 
-Liquid::Template.register_tag('example', Jekyll::Tags::ExampleBlock)
+Liquid::Template.register_tag('example', Jekyll::Tags::ExampleBlock)

scss/_variables.scss

@@ -157,6 +157,11 @@ $container-max-widths: (
 //badges
 $badge-font-weight: 600 !default;
 
+//buttons
+$btn-font-weight: 600 !default;
+$btn-font-size: 14px !default;
+$btn-border-radius: 3px !default;
+
 //pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;
@@ -166,6 +171,12 @@ $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted-light, .5) !default;
 
+//spinner
+$spinner-width: 1.5rem !default;
+$spinner-height: 1.5rem !default;
+$spinner-border-width: 2px !default;
+$spinner-border-width-sm: 2px !default;
+
 //toasts
 $toast-border-color: $border-color !default;
 $toast-header-color: $text-muted !default;

scss/layout/_core.scss

@@ -1,6 +1,8 @@
+html {
+  height: 100%;
+}
+
 body {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: none;
   -ms-touch-action: manipulation;
@@ -18,6 +20,14 @@ body *::-webkit-scrollbar {
 body *::-webkit-scrollbar-thumb {
   background: $gray-400;
 }
+
 body *:hover::-webkit-scrollbar-thumb {
   background: $gray-500;
 }
+
+/**
+Remove the cancel buttons in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}

scss/ui/_buttons.scss

@@ -1,12 +1,6 @@
 .btn {
-  font-weight: 500;
-  border-radius: 3px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
-
+  letter-spacing: .03em;
-  &.btn {
-    //color: $full-white;
-    //border-color: rgba(0, 0, 0, .08);
-  }
 }
 
 .btn-avatar {

scss/ui/_spinners.scss

@@ -0,0 +1 @@
+