buttons

_config.yml

@@ -62,30 +62,74 @@ jekyll_tidy:
   ignore_env: development
 
 colors:
-  blue: '#467fcf'
-  azure: '#45aaf2'
-  indigo: '#6574cd'
-  purple: '#a55eea'
-  pink: '#f66d9b'
-  red: '#e74c3c'
-  orange: '#fd9644'
-  yellow: '#f1c40f'
-  lime: '#7bd235'
-  green: '#5eba00'
-  teal: '#2bcbba'
-  cyan: '#17a2b8'
-  gray: '#868e96'
-  gray-dark: '#343a40'
+  blue: 
+    hex: '#467fcf'
+    name: Blue
+  azure: 
+    hex: '#45aaf2'
+    name: Azure
+  indigo: 
+    hex: '#6574cd'
+    name: Indigo
+  purple: 
+    hex: '#a55eea'
+    name: Purple
+  pink: 
+    hex: '#f66d9b'
+    name: Pink
+  red: 
+    hex: '#e74c3c'
+    name: Red
+  orange: 
+    hex: '#fd9644'
+    name: Orange
+  yellow: 
+    hex: '#f1c40f'
+    name: Yellow
+  lime: 
+    hex: '#7bd235'
+    name: Lime
+  green: 
+    hex: '#5eba00'
+    name: Green
+  teal: 
+    hex: '#2bcbba'
+    name: Teal
+  cyan: 
+    hex: '#17a2b8'
+    name: Cyan
+  gray: 
+    hex: '#868e96'
+    name: Gray
+  gray-dark: 
+    hex: '#343a40'
+    name: Dark gray
 
 theme-colors:
-  primary: '#467fcf'
-  secondary: '#868e96'
-  success: '#38c172'
-  info: '#17a2b8'
-  warning: '#f8b700'
-  danger: '#f90049'
-  light: '#f8f9fa'
-  dark: '#343a40'
+  primary: 
+    hex: '#467fcf'
+    name: Primary
+  secondary: 
+    hex: '#868e96'
+    name: Secondary
+  success: 
+    hex: '#38c172'
+    name: Success
+  info: 
+    hex: '#17a2b8'
+    name: Info
+  warning: 
+    hex: '#f8b700'
+    name: Warning
+  danger: 
+    hex: '#f90049'
+    name: Danger
+  light: 
+    hex: '#f8f9fa'
+    name: Light
+  dark: 
+    hex: '#343a40'
+    name: Dark
 
 button-types:
   primary: 'Primary'

_docs/buttons.md

@@ -29,6 +29,16 @@ Use any of the available button classes to quickly create a styled button . We p
 <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-types %}
+<a href="#" class="btn btn-{{ button[0] }} disabled">{{ button[1] }}</a>
+{% endfor %}
+{% endexample %}
+
 
 ### Color variations
 
@@ -36,7 +46,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[0] }}</a>
+<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a>
 {% endfor %}
 {% endexample %}
 

assets/css/dashboard.css

@@ -519,7 +519,7 @@ samp {
 }
 
 code {
-  font-size: 87.5%;
+  font-size: 85%;
   color: #868e96;
   word-break: break-word;
 }
@@ -530,7 +530,7 @@ a > code {
 
 kbd {
   padding: 0.2rem 0.4rem;
-  font-size: 87.5%;
+  font-size: 85%;
   color: #fff;
   background-color: #343a40;
   border-radius: 3px;
@@ -544,7 +544,7 @@ kbd kbd {
 
 pre {
   display: block;
-  font-size: 87.5%;
+  font-size: 85%;
   color: #212529;
 }
 

assets/js/dashboard.js

@@ -27,7 +27,10 @@ require.config({
 });
 
 window.tabler = {
-    colors: {{ site.colors | jsonify | lstrip }}
+    colors: {
+        {% for color in site.colors %}"{{ color[0] }}": "{{ color[1].hex }}"{% unless forloop.last %},{% endunless %}
+        {% endfor %}
+    }
 };
 
 require(['core']);
\ No newline at end of file

assets/scss/_variables.scss

@@ -125,7 +125,7 @@ $body-bg: #f5f7fb;
 $body-color: $gray-700;
 
 // Code
-$code-font-size: 87.5%;
+$code-font-size: 85%;
 $code-color: $gray-600;
 
 $kbd-color: #fff;