diff --git a/_config.yml b/_config.yml
index c5ce99454..30dbb72e4 100644
--- a/_config.yml
+++ b/_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'
diff --git a/_docs/buttons.md b/_docs/buttons.md
index 95ad6eb01..41bc6c376 100644
--- a/_docs/buttons.md
+++ b/_docs/buttons.md
@@ -29,6 +29,16 @@ Use any of the available button classes to quickly create a styled button . We p
Link
{% endexample %}
+### Disabled buttons
+
+Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. ``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 %}
+{{ button[1] }}
+{% endfor %}
+{% endexample %}
+
### Color variations
@@ -36,7 +46,7 @@ The classic button, in different colors.
{% example html wrapper=btn-list %}
{% for button in site.colors %}
-{{ button[0] }}
+{{ button[1].name }}
{% endfor %}
{% endexample %}
diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css
index 3d9d0c7a1..3425e7d9e 100644
--- a/assets/css/dashboard.css
+++ b/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;
}
diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
index 8daed54fe..2654f9386 100644
--- a/assets/js/dashboard.js
+++ b/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
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 2d891122f..0117d7177 100644
--- a/assets/scss/_variables.scss
+++ b/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;