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;