button components, small typo fixes

Gemfile

@@ -1,7 +1,6 @@
 source "https://rubygems.org"
 
 gem "jekyll"
-gem "liquid-c"
 
 group :jekyll_plugins do
   gem "jekyll-random"

_config.yml

@@ -70,46 +70,43 @@ defaults:
 colors:
   blue:
     hex: '#206bc4'
-    name: Blue
+    title: Blue
   azure:
     hex: '#45aaf2'
-    name: Azure
+    title: Azure
   indigo:
     hex: '#6574cd'
-    name: Indigo
+    title: Indigo
   purple:
     hex: '#a55eea'
-    name: Purple
+    title: Purple
   pink:
     hex: '#f66d9b'
-    name: Pink
+    title: Pink
   red:
     hex: '#fa4654'
-    name: Red
+    title: Red
   orange:
     hex: '#fd9644'
-    name: Orange
+    title: Orange
   yellow:
     hex: '#f1c40f'
-    name: Yellow
+    title: Yellow
   lime:
     hex: '#7bd235'
-    name: Lime
+    title: Lime
   green:
     hex: '#5eba00'
-    name: Green
+    title: Green
   teal:
     hex: '#2bcbba'
-    name: Teal
+    title: Teal
   cyan:
     hex: '#17a2b8'
-    name: Cyan
+    title: Cyan
   gray:
     hex: '#868e96'
-    name: Gray
+    title: Gray
-  dark:
-    hex: '#354051'
-    name: Dark
 
 variants:
   - name: success
@@ -121,63 +118,84 @@ variants:
   - name: danger
     icon: x-octagon
 
-button_variants:
+button-variants:
-  - name: primary
+  primary:
+    class: primary
     title: Primary
-  - name: secondary
+  secondary:
+    class: secondary
     title: Secondary
-  - name: success
+  success:
+    class: success
     title: Success
-  - name: info
+  warning:
-    title: Info
+    class: warning
-  - name: warning
     title: Warning
-  - name: danger
+  danger:
+    class: danger
     title: Danger
-  - name: dark
+  info:
+    class: info
+    title: Info
+  light:
+    class: light
+    title: Light
+  dark:
+    class: dark
     title: Dark
+  link:
+    class: link
+    title: Link
+
+button-states:
+  - class:
+    title: Normal
+  - class: active
+    title: Active state
+  - class: disabled
+    title: Disabled
 
 socials:
-  - name: facebook
+  facebook:
     icon: brand/facebook
     title: Facebook
-  - name: twitter
+  twitter:
     icon: brand/twitter
     title: Twitter
-  - name: google
+  google:
     icon: brand/google
     title: Google
-  - name: youtube
+  youtube:
     icon: brand/youtube
     title: Youtube
-  - name: vimeo
+  vimeo:
     icon: brand/vimeo
     title: Vimeo
-  - name: dribbble
+  dribbble:
     icon: brand/dribbble
     title: Dribbble
-  - name: github
+  github:
     icon: brand/github
     title: Github
-  - name: instagram
+  instagram:
     icon: brand/instagram
     title: Instagram
-  - name: pinterest
+  pinterest:
     icon: brand/pinterest
     title: Pinterest
-  - name: vk
+  vk:
     icon: brand/vk
     title: VK
-  - name: rss
+  rss:
     icon: brand/rss
     title: RSS
-  - name: flickr
+  flickr:
     icon: brand/flickr
     title: Flickr
-  - name: bitbucket
+  bitbucket:
     icon: brand/bitbucket
     title: Bitbucker
-  - name: tabler
+  tabler:
     icon: brand/tabler
     title: Tabler
 

package.json

@@ -4,7 +4,7 @@
   "version_short": "0.9",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
-    "start": "npm-run-all clean css-main js-compile-standalone --parallel watch-html browsersync watch",
+    "start": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch",
     "build": "npm-run-all clean html-build css js assets-copy",
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",
@@ -99,7 +99,7 @@
     "@fullcalendar/timegrid": "4.3.0",
     "apexcharts": "3.10.1",
     "autosize": "4.0.2",
-    "bootstrap": "twbs/bootstrap#d7203ba",
+    "bootstrap": "twbs/bootstrap#76fd85b",
     "fullcalendar": "3.10.1",
     "imask": "5.2.1",
     "jquery": "3.4.1",

pages/_docs/buttons.md

@@ -22,18 +22,17 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
 Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
 
 {% example html wrapper=btn-list %}
-{% for button in site.button_variants %}
+{% for button in site.button-variants %}
-<a href="#" class="btn btn-{{ button.name }}">{{ button.title }}</a>
+<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].title }}</a>
 {% endfor %}
-<a href="#" class="btn btn-link">Link</a>
 {% endexample %}
 
 ### Disabled buttons
 
 Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. `<a>`s don’t support the disabled attribute, so you must add the `.disabled` class to make it visually appear disabled.
 {% example html wrapper=btn-list %}
-{% for button in site.button_variants %}
+{% for button in site.button-variants %}
-{% include_cached ui/button.html color=button.name text=button.title disabled="true" %}
+{% include_cached ui/button.html color=button.1.class text=button.title disabled=true %}
 {% endfor %}
 
 {% endexample %}
@@ -45,7 +44,7 @@ The classic button, in different colors.
 
 {% example html wrapper=btn-list %}
 {% for button in site.colors %}
-<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a>
+<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].title }}</a>
 {% endfor %}
 {% endexample %}
 
@@ -54,8 +53,8 @@ The classic button, in different colors.
 Add `.btn-square` to button to remove border-radius.
 
 {% example html wrapper=btn-list %}
-{% for button in site.button_variants %}
+{% for button in site.button-variants %}
-{% include_cached ui/button.html text=button.title color=button.name square=true %}
+{% include_cached ui/button.html text=button.title color=button.class square=true %}
 {% endfor %}
 {% endexample %}
 
@@ -64,8 +63,8 @@ Add `.btn-square` to button to remove border-radius.
 Add `.btn-pill` class to any button to make them more rounded.
 
 {% example html wrapper=btn-list %}
-{% for button in site.button_variants %}
+{% for button in site.button-variants %}
-{% include_cached ui/button.html text=button.title color=button.name pill=true %}
+{% include_cached ui/button.html text=button.title color=button.class pill=true %}
 {% endfor %}
 {% endexample %}
 
@@ -74,16 +73,8 @@ Add `.btn-pill` class to any button to make them more rounded.
 In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
 
 {% example html wrapper=btn-list %}
-{% for button in site.button_variants %}
+{% for button in site.button-variants %}
-{% include_cached ui/button.html text=button.title color=button.name outline=true %}
+{% include_cached ui/button.html text=button.title color=button.class outline=true %}
-{% endfor %}
-{% endexample %}
-
-### Button with star
-
-{% example html %}
-{% for button in site.button_variants %}
-  {% include_cached ui/button.html text="Button" label="star" color=button.name class="mr-2" %}
 {% endfor %}
 {% endexample %}
 

pages/_includes/parts/buttons-table.html

@@ -0,0 +1,34 @@
+{% assign prefix = include.prefix | default: 'btn-' %}
+{% assign show-link = include.show-link | default: false %}
+{% assign show-states = include.show-states | default: false %}
+{% assign hide-labels = include.hide-labels | default: false %}
+{% assign variants = include.variants | default: site.button-variants %}
+
+{% for state in site.button-states %}
+   {% if show-states or (state.class != 'active' and state.class != 'disabled') %}
+      <div class="row row-sm align-items-center mb-n3{% unless forloop.first %} mt-3{% endunless %}">
+         {% unless hide-labels %}<div class="col-12 col-xl-2 mb-3 font-weight-semibold">{{ state.title }}</div>{% endunless %}
+         {% for type in variants %}
+            {% if show-link or type[0] != 'link' %}
+               <div class="col-6 col-sm-4 col-md-2 col-xl{% if include.auto-columns %}-auto{% endif %} mb-3">
+                  {% if include.icon == true %}
+                     {% assign icon = type[1].icon %}
+                  {% endif %}
+
+                  {% assign class = prefix | append: type[0] %}
+                  {% if state.class %}
+                     {% assign class = class | append: ' ' | append: state.class %}
+                  {% endif %}
+                  {% if include.class %}
+                     {% assign class = class | append: ' ' | append: include.class %}
+                  {% endif %}
+
+                  {% assign text = type[1].title %}
+
+                  {% include_cached ui/button.html block=true class=class icon=icon icon-only=icon-only text=text %}
+               </div>
+               {% endif %}
+         {% endfor %}
+      </div>
+   {% endif %}
+{% endfor %}

pages/buttons.html

@@ -4,76 +4,75 @@ done: true
 ---
 
 <div class="row">
-   <div class="col-md-6">
+   <div class="col-12">
       <div class="card">
+         <div class="card-header">
+            <h3 class="card-title">Standard Buttons</h3>
+         </div>
          <div class="card-body">
-            <h3 class="card-title">Buttons</h3>
+            {% include parts/buttons-table.html show-link=true show-states=true %}
-
-            <div class="btn-list">
-               {% for color in site.colors %}
-               {% assign c = color[0] %}
-               {% include_cached ui/button.html text="Button" color=c %}
-               {% endfor %}
-            </div>
-         </div>
          </div>
       </div>
 
-   <div class="col-md-6">
       <div class="card">
+         <div class="card-header">
+            <h3 class="card-title">Outline Buttons</h3>
+         </div>
          <div class="card-body">
-            <h3 class="card-title">Outlined buttons</h3>
+            <p>Use <code>.btn-outline-*</code> class for outline buttons.
-
+            </p>
-            <div class="btn-list">
+            {% include parts/buttons-table.html prefix="btn-outline-" show-states=true %}
-               {% for color in site.colors %}
-               {% assign c = color[0] %}
-               {% include_cached ui/button.html text="Button" outline=true color=c %}
-               {% endfor %}
-            </div>
-         </div>
          </div>
       </div>
 
-   <div class="col-md-6">
       <div class="card">
+         <div class="card-header">
+            <h3 class="card-title">Ghost Buttons</h3>
+         </div>
          <div class="card-body">
-            <h3 class="card-title">Buttons with icons</h3>
+            <p>Use <code>.btn-ghost-*</code> class for ghost buttons.
-
+            </p>
-            <div class="btn-list">
+            {% include parts/buttons-table.html prefix="btn-ghost-" show-states=true %}
-               {% for color in site.colors %}
-               {% assign c = color[0] %}
-               {% include_cached ui/button.html text="Button" color=c icon="star" %}
-               {% endfor %}
-            </div>
-         </div>
          </div>
       </div>
 
-   <div class="col-md-6">
       <div class="card">
+         <div class="card-header">
+            <h3 class="card-title">Square Buttons</h3>
+         </div>
          <div class="card-body">
-            <h3 class="card-title">Outlined buttons with icons</h3>
+            <p>Use <code>.btn-square</code> class for square buttons.
-
+            </p>
-            <div class="btn-list">
+            {% include parts/buttons-table.html class="btn-square" %}
-               {% for color in site.colors %}
-               {% assign c = color[0] %}
-               {% include_cached ui/button.html text="Button" outline=true color=c icon-right="star" %}
-               {% endfor %}
-            </div>
-         </div>
          </div>
       </div>
 
-   <div class="col-md-6">
       <div class="card">
-         <div class="card-body">
+         <div class="card-header">
-            <h3 class="card-title">Social buttons</h3>
+            <h3 class="card-title">Pill Buttons</h3>
-
-            <div class="btn-list">
-               {% for social in site.socials %}
-               {% include_cached ui/button.html text=social.title color=social.name icon=social.icon %}
-               {% endfor %}
          </div>
+         <div class="card-body">
+            <p>Use <code>.btn-pill</code> class for pill buttons.
+            </p>
+            {% include parts/buttons-table.html class="btn-pill" %}
+         </div>
+      </div>
+
+      <div class="card">
+         <div class="card-header">
+            <h3 class="card-title">Extra colors</h3>
+         </div>
+         <div class="card-body">
+            {% include parts/buttons-table.html variants=site.colors hide-labels=true icon="star" auto-columns=true %}
+         </div>
+      </div>
+
+      <div class="card">
+         <div class="card-header">
+            <h3 class="card-title">Social colors</h3>
+         </div>
+         <div class="card-body">
+            {% include parts/buttons-table.html variants=site.socials hide-labels=true icon=true auto-columns=true %}
          </div>
       </div>
    </div>

scss/_variables.scss

@@ -33,7 +33,7 @@ $purple: #a55eea !default;
 $pink: #f66d9b !default;
 $red: #fa4654 !default;
 $orange: #ff922b !default;
-$yellow: #fcc419 !default;
+$yellow: #fab005 !default;
 $lime: #7bd235 !default;
 $green: #5eba00 !default;
 $teal: #2bcbba !default;
@@ -46,7 +46,7 @@ $dark: #354052 !default;
 $primary: $blue !default;
 $secondary: $gray-600 !default;
 $success: $green !default;
-$info: $cyan !default;
+$info: $azure !default;
 $warning: $yellow !default;
 $danger: $red !default;
 $light: $gray-100 !default;
@@ -137,6 +137,9 @@ $h6-font-size: (12rem / 16) !default;
 
 $blockquote-font-size: $h4-font-size !default;
 
+$code-font-size: 80% !default;
+$code-color: $primary !default;
+
 $lead-font-size: $h4-font-size !default;
 $lead-font-weight: 400 !default;
 
@@ -176,9 +179,10 @@ $sizes-percentage: (
 
 
 
-$generate-social-colors: true !default;
+$enable-social-colors: true !default;
-$generate-color-hues: true !default;
+$enable-ghost-buttons: true !default;
-$generate-colors: true !default;
+$enable-color-hues: true !default;
+$enable-extra-colors: true !default;
 
 $enable-gradients: false !default;
 

scss/ui/_buttons.scss

@@ -3,9 +3,8 @@
   align-items: center;
   justify-content: center;
   letter-spacing: .01em;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
 
-  &:not([class^="btn-outline"]):not([class*=" btn-outline"]):not(.btn-secondary) {
+  &:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]):not(.btn-secondary) {
     text-shadow: 1px 1px 0 rgba(0, 0, 0, .05);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
 
@@ -14,6 +13,12 @@
     }
   }
 
+  &:disabled,
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+
   .icon {
     margin: 0 .5em 0 -.25em;
     font-size: 1.2em;
@@ -62,7 +67,7 @@
 }
 
 .btn-secondary {
-  @include button-variant(#fff, $border-color, $text-muted);
+  @include button-variant(#fff, $border-color, $body-color);
 }
 
 .btn-square {
@@ -83,7 +88,15 @@
   }
 }
 
-@if $generate-social-colors {
+@if $enable-ghost-buttons {
+  @each $vendor, $color in $theme-colors {
+    .btn-ghost-#{$vendor} {
+      @include button-variant(transparent, transparent, $color, $color, $color, #fff, $color, $color);
+    }
+  }
+}
+
+@if $enable-social-colors {
   @each $vendor, $color in $social-colors {
     .btn-#{$vendor} {
       @include button-variant($color, $color);
@@ -93,10 +106,9 @@
       @include button-outline-variant($color, $color);
     }
   }
-
 }
 
-@if $generate-colors {
+@if $enable-extra-colors {
   @each $name, $color in $colors {
     .btn-#{$name} {
       @include button-variant($color, $color);

scss/ui/_ribbons.scss

@@ -29,7 +29,7 @@
     border-right-color: transparent;
   }
 
-  @if $generate-colors {
+  @if $enable-extra-colors {
     @each $color, $value in $colors {
       &.bg-#{$color} {
         border-color: $value;

scss/ui/_typo.scss

@@ -52,8 +52,8 @@ blockquote {
 
 code {
   padding: 3px;
-  background: rgba(0, 0, 0, .025);
+  background: rgba($code-color, .03);
-  border: 1px solid rgba(#000, .05);
+  border: 1px solid rgba($code-color, .064);
   border-radius: $border-radius;
 
   pre & {

scss/utils/_colors.scss

@@ -3,7 +3,7 @@
 /**
 COLORS VARIATIONS
  */
-@if $generate-color-hues {
+@if $enable-color-hues {
   @each $color, $value in $colors {
     .bg-#{$color}-lightest { background: mix($value, #fff, 10%); }
     .bg-#{$color}-lighter { background: mix($value, #fff, 30%); }
@@ -17,7 +17,7 @@ COLORS VARIATIONS
 /**
 SOCIAL COLORS
  */
-@if $generate-social-colors {
+@if $enable-social-colors {
   @each $color, $value in $social-colors {
     .bg-#{$color} {
       color: #fff !important;
@@ -31,7 +31,7 @@ SOCIAL COLORS
 }
 
 
-@if $generate-colors {
+@if $enable-extra-colors {
   @each $color, $value in $colors {
     .bg-#{$color} {
       background: $value;