From 774c88005e11e9d917ff080269cf735903ddbc3a Mon Sep 17 00:00:00 2001 From: codecalm Date: Wed, 28 Feb 2018 22:14:00 +0100 Subject: [PATCH] styleguide --- _config.yml | 18 +++++++- src/_data/commits.yml | 1 - src/_docs/styleguide.md | 54 +++++++++++++++++++++++ src/assets/scss/_variables.scss | 7 ++- src/assets/scss/dashboard/_colors.scss | 17 +++---- src/assets/scss/dashboard/_type.scss | 19 ++++++-- src/assets/scss/dashboard/_utilities.scss | 4 +- 7 files changed, 102 insertions(+), 18 deletions(-) create mode 100644 src/_docs/styleguide.md diff --git a/_config.yml b/_config.yml index 9ff93a908..d1e3106fb 100644 --- a/_config.yml +++ b/_config.yml @@ -68,7 +68,7 @@ author: docs-menu: - title: Getting started - pages: [index] + pages: [index, styleguide] - title: Components pages: [alerts, avatars, buttons, cards, charts, form-components, tags, typography] @@ -142,6 +142,22 @@ theme-colors: # hex: '#343a40' # name: Dark +color_variants: + - name: 'Default' + suffix: '' + - name: 'Dark' + suffix: -dark + - name: 'Darker' + suffix: -darker + - name: 'Darkest' + suffix: -darkest + - name: 'Light' + suffix: -light + - name: 'Lighter' + suffix: -lighter + - name: 'Lightest' + suffix: -lightest + social-buttons: facebook: icon: fa fa-facebook diff --git a/src/_data/commits.yml b/src/_data/commits.yml index 7bfe365bb..f413c5953 100644 --- a/src/_data/commits.yml +++ b/src/_data/commits.yml @@ -1,4 +1,3 @@ ---- - commiter: name: Earvin Yoakley position: CEO diff --git a/src/_docs/styleguide.md b/src/_docs/styleguide.md new file mode 100644 index 000000000..8471341cb --- /dev/null +++ b/src/_docs/styleguide.md @@ -0,0 +1,54 @@ +--- +title: Styleguide +icon: fe fe-image +description: Welcome to Tabler style guide. If you're new here, have a look through some of the topics on the side. +--- + +### Contextual colors + +A background fill can be applied to a container using one of the `.bg-[color]` classes. + +{% example html %} +{% for color in site.theme-colors %} +
+
+
+ {{ color[1].name }}
+ .bg-{{ color[0] }} +
+
+{% endfor %} +{% endexample %} + +### Other colors + +Instead of using contextual classes you can use ordinary color names. + +{% example html %} +{% for color in site.colors %} +
+
+
+ {{ color[1].name }}
+ .bg-{{ color[0] }} +
+
+{% endfor %} +{% endexample %} + +### Tinting backgrounds + +Translucent background fills to shade an element against a background. You can use one of few suffixes: +`-darkest`, `-darker`, `-dark`, `-lightest`, `-lighter` or `-light`. + +{% example html %} +{% for variant in site.color_variants %} +
+
+
+ {{ variant.name }} blue
+ .bg-blue{{ variant.suffix }} +
+
+{% endfor %} +{% endexample %} diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 468301bd2..ecbc311b7 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -126,7 +126,7 @@ $body-color: $gray-700; // Code $code-font-size: 85%; -$code-color: $gray-600; +$code-color: inherit; $kbd-color: #fff; $kbd-bg: $gray-800; @@ -298,4 +298,7 @@ $badge-font-weight: 600; $flag-icons: ('ad', 'ae', 'af', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-nir', 'gb-sct', 'gb-wls', 'gb', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss', 'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um', 'un', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'ye', 'yt', 'za', 'zm', 'zw'); // Hr -$hr-border-color: $border-color; \ No newline at end of file +$hr-border-color: $border-color; + +// Thumbnails +$thumbnail-bg: #fff \ No newline at end of file diff --git a/src/assets/scss/dashboard/_colors.scss b/src/assets/scss/dashboard/_colors.scss index f9736102c..78f060600 100644 --- a/src/assets/scss/dashboard/_colors.scss +++ b/src/assets/scss/dashboard/_colors.scss @@ -1,11 +1,8 @@ -.colors-list { - display: block; -} - -.colors-list-item { - display: inline-block; - width: 1rem; - height: 1rem; - border-radius: 3px; - vertical-align: middle; +@each $color, $value in $colors { + @include bg-variant(".bg-#{$color}-lightest", mix($value, #fff, 10%)); + @include bg-variant(".bg-#{$color}-lighter", mix($value, #fff, 30%)); + @include bg-variant(".bg-#{$color}-light", mix($value, #fff, 70%)); + @include bg-variant(".bg-#{$color}-dark", mix($value, #000, 80%)); + @include bg-variant(".bg-#{$color}-darker", mix($value, #000, 40%)); + @include bg-variant(".bg-#{$color}-darkest", mix($value, #000, 20%)); } \ No newline at end of file diff --git a/src/assets/scss/dashboard/_type.scss b/src/assets/scss/dashboard/_type.scss index 168cf1620..ee4696a30 100644 --- a/src/assets/scss/dashboard/_type.scss +++ b/src/assets/scss/dashboard/_type.scss @@ -45,6 +45,20 @@ blockquote { } } +code { + background: rgba(0, 0, 0, 0.025); + border: 1px solid rgba(#000, .05); + border-radius: 3px; + padding: 3px; + + pre & { + padding: 0; + border-radius: 0; + border: none; + background: none; + } +} + hr { margin-top: 2rem; margin-bottom: 2rem; @@ -67,16 +81,15 @@ img { max-width: 100%; } - .text-wrap { font-size: 1rem; line-height: 1.66; - >:first-child { + > :first-child { margin-top: 0; } - >:last-child { + > :last-child { margin-bottom: 0; } diff --git a/src/assets/scss/dashboard/_utilities.scss b/src/assets/scss/dashboard/_utilities.scss index 61b916443..b6ec0ec40 100644 --- a/src/assets/scss/dashboard/_utilities.scss +++ b/src/assets/scss/dashboard/_utilities.scss @@ -24,6 +24,8 @@ } } -.o-auto { overflow: auto !important; } +.o-auto { overflow: auto !important; } .o-hidden { overflow: hidden !important; } +.shadow { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; } +.shadow-none { box-shadow: none !important; } \ No newline at end of file