diff --git a/.changeset/twelve-garlics-battle.md b/.changeset/twelve-garlics-battle.md new file mode 100644 index 000000000..ed1477237 --- /dev/null +++ b/.changeset/twelve-garlics-battle.md @@ -0,0 +1,6 @@ +--- +"@tabler/core": patch +"preview": patch +--- + +Refactor badge styles, remove Bootstrap styles diff --git a/core/scss/_bootstrap-components.scss b/core/scss/_bootstrap-components.scss index 8ef4ed52b..d7fe57f6c 100644 --- a/core/scss/_bootstrap-components.scss +++ b/core/scss/_bootstrap-components.scss @@ -17,7 +17,6 @@ @import "bootstrap/scss/accordion"; @import "bootstrap/scss/breadcrumb"; @import "bootstrap/scss/pagination"; -@import "bootstrap/scss/badge"; @import "bootstrap/scss/alert"; @import "bootstrap/scss/progress"; @import "bootstrap/scss/list-group"; diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 28f8d5edc..2dea1d12f 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -97,7 +97,9 @@ $h5-line-height: 1rem !default; $h6-font-size: 0.625rem !default; $h6-line-height: 1rem !default; -$small-font-size: 85.714285% !default; +$font-size-reative-xs: .71428571em !default; +$font-size-reative-sm: .85714285em !default; +$font-size-reative-md: 1em !default; $font-sizes: ( 1: $h1-font-size, @@ -309,7 +311,7 @@ $icon-color: var(--#{$prefix}gray-400) !default; // Code $code-color: var(--#{$prefix}gray-600) !default; -$code-font-size: $small-font-size !default; +$code-font-size: $font-size-reative-sm !default; $code-line-height: 1.25rem !default; $code-bg: var(--#{$prefix}bg-surface-secondary) !default; @@ -553,13 +555,15 @@ $breadcrumb-variants: ( ) !default; // Badges -$badge-font-size: $code-font-size !default; +$badge-font-size: $font-size-reative-sm !default; +$badge-font-size-sm: $font-size-reative-xs !default; +$badge-font-size-lg: $font-size-reative-md !default; $badge-line-height: $code-line-height !default; $badge-font-weight: var(--#{$prefix}font-weight-medium) !default; $badge-padding-y: 0.25em !default; $badge-padding-x: 0.5em !default; -$badge-empty-size: 0.5rem !default; -$badge-color: var(--#{$prefix}gray-500) !default; +$badge-empty-size: 10px !default; +$badge-color: var(--#{$prefix}secondary) !default; $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default; // Buttons @@ -605,8 +609,8 @@ $btn-box-shadow: var(--#{$prefix}box-shadow-input) !default; // Cards $card-title-spacer-y: 1.25rem !default; -$card-box-shadow: var(--#{$prefix}shadow-card) !default; -$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default; +$card-box-shadow: var(--#{$prefix}box-shadow-card) !default; +$card-hover-box-shadow: var(--#{$prefix}box-shadow-card-hover) !default; $card-bg: var(--#{$prefix}bg-surface) !default; $card-bg-hover: $white !default; diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss index 0a7c02ebb..2799be011 100644 --- a/core/scss/ui/_badges.scss +++ b/core/scss/ui/_badges.scss @@ -1,36 +1,46 @@ .badge { + --#{$prefix}badge-padding-x: #{$badge-padding-x}; + --#{$prefix}badge-padding-y: #{$badge-padding-y}; + --#{$prefix}badge-font-size: #{$badge-font-size}; + --#{$prefix}badge-font-weight: #{$badge-font-weight}; + --#{$prefix}badge-color: #{$badge-color}; + --#{$prefix}badge-border-radius: #{$badge-border-radius}; + --#{$prefix}badge-icon-size: 1em; + --#{$prefix}badge-line-height: 1; + display: inline-flex; + padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); + font-weight: var(--#{$prefix}badge-font-weight); + font-size: var(--#{$prefix}badge-font-size); + color: var(--#{$prefix}badge-color); + text-align: center; + white-space: nowrap; justify-content: center; align-items: center; + gap: .25rem; background: $badge-bg-color; overflow: hidden; user-select: none; border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent; - min-width: 1.25rem; - font-weight: $headings-font-weight; - letter-spacing: .04em; + border-radius: var(--#{$prefix}badge-border-radius); + min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px); + letter-spacing: 0.04em; vertical-align: bottom; + line-height: var(--#{$prefix}badge-line-height); @at-root a#{&} { color: $card-bg; } - .avatar { - box-sizing: content-box; - width: 1.25rem; - height: 1.25rem; - margin: 0 .5rem 0 -.5rem; - } - .icon { width: 1em; height: 1em; - font-size: 1rem; + font-size: var(--#{$prefix}badge-icon-size); stroke-width: 2; } } - .badge:empty, - .badge-empty { +.badge:empty, +.badge-dot { display: inline-block; width: $badge-empty-size; height: $badge-empty-size; @@ -76,4 +86,28 @@ .badge-blink { animation: blink 2s infinite; +} + +// +// Badge sizes +// +.badge-sm { + --#{$prefix}badge-font-size: #{$badge-font-size-sm}; + --#{$prefix}badge-icon-size: 1em; + --#{$prefix}badge-padding-y: 2px; + --#{$prefix}badge-padding-x: 0.25rem; +} + +.badge-lg { + --#{$prefix}badge-font-size: #{$badge-font-size-lg}; + --#{$prefix}badge-icon-size: 1em; + --#{$prefix}badge-padding-y: 0.25rem; + --#{$prefix}badge-padding-x: 0.5rem; +} + +// +// Badge with only icon +// +.badge-icononly { + --#{$prefix}badge-padding-x: 0; } \ No newline at end of file diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index 10b909b63..4f90e1b02 100644 --- a/core/scss/ui/_buttons.scss +++ b/core/scss/ui/_buttons.scss @@ -20,6 +20,7 @@ justify-content: center; white-space: nowrap; box-shadow: var(--#{$prefix}btn-box-shadow); + position: relative; .icon { width: var(--#{$prefix}btn-icon-size); @@ -224,6 +225,7 @@ // Action button // .btn-action { + --#{$prefix}border-color: transparent; padding: 0; border: 0; color: var(--#{$prefix}secondary); @@ -234,6 +236,7 @@ justify-content: center; border-radius: var(--#{$prefix}border-radius); background: transparent; + box-shadow: none; &:after { content: none; @@ -253,14 +256,6 @@ &.show { color: var(--#{$prefix}primary); } - - .icon { - margin: 0; - width: 1.25rem; - height: 1.25rem; - font-size: 1.25rem; - stroke-width: 1; - } } .btn-actions { diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss index 6a4ec8b4b..3b8450e1a 100644 --- a/core/scss/ui/_dropdowns.scss +++ b/core/scss/ui/_dropdowns.scss @@ -19,6 +19,7 @@ align-items: center; margin: 0; line-height: $line-height-base; + gap: .5rem; } .dropdown-item-icon { diff --git a/preview/eleventy.config.mjs b/preview/eleventy.config.mjs index 6cf9a8862..eec19473d 100644 --- a/preview/eleventy.config.mjs +++ b/preview/eleventy.config.mjs @@ -522,6 +522,10 @@ export default function (eleventyConfig) { return string.split(' ').map(word => word.charAt(0)).join(''); }) + eleventyConfig.addFilter("uc_first", function capitalizeFirstLetter(string) { + return string.charAt(0).toUpperCase() + string.slice(1); + }) + eleventyConfig.addFilter("size", function (elem) { if (elem instanceof Object) { return Object.keys(elem).length; diff --git a/preview/pages/_includes/ui/tag.html b/preview/pages/_includes/ui/tag.html index 64632bb66..5e885954f 100644 --- a/preview/pages/_includes/ui/tag.html +++ b/preview/pages/_includes/ui/tag.html @@ -10,7 +10,7 @@ {% elsif include.payment %} {% include "ui/payment.html" provider=include.payment size="xxs" class="tag-payment" %} {% elsif include.status %} - {% include "ui/badge.html" color=include.status class="tag-status badge-empty" text="" %} + {% include "ui/badge.html" color=include.status class="tag-status badge-dot" text="" %} {% elsif include.legend %} {% elsif include.checkbox %} diff --git a/preview/pages/badges.html b/preview/pages/badges.html index b22f6a99a..25070859e 100644 --- a/preview/pages/badges.html +++ b/preview/pages/badges.html @@ -6,94 +6,177 @@ layout: default permalink: badges.html --- +{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {% assign colors = colors | push: color[0] +%} {% endfor %} {% assign colors = colors | push: "dark" | push: "light" %} +
-
-
-
-

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
-
-
-
-
-
-
-
-
-
- {% for color in site.colors %} - {{ color[1].title }} - {% endfor %} -
-
-
-
-
-
-
-
- {% for color in site.colors %} - {{ color[1].title }} - {% endfor %} -
-
-
-
-
-
-
-
- {% for color in site.colors %} - {{ color[1].title }} - {% endfor %} -
-
-
-
-
-
-
- {% include "ui/dropdown-menu.html" show=true badge=true arrow=true %} -
-
-
-
-
-
-
- {% for color in site.colors %} - - {% endfor %} -
-
-
-
-
-
-
-
- {% for color in site.colors %} - - {% endfor %} -
-
-
-
-
-
-
-
- {% for color in site.colors %} - - {% endfor %} -
-
-
-
-
-
-
\ No newline at end of file +
+
+
+
+
+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
+
+
+
+
+
+
+

Badge sizes

+ +
+ {% assign sizes = "sm,md,lg" | split: "," %} {% for size in sizes %} +
+ Default + {% include "ui/icon.html" icon="check" %} Left icon + Right icon{% include "ui/icon.html" icon="arrow-right" %} + {% include "ui/icon.html" icon="star" type="filled" %} +
+ {% endfor %} +
+
+
+
+
+
+
+

Positioned badges

+ +
+ + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+

Basic badges

+
+ {% for color in colors %} + {{ color | uc_first }} + {% endfor %} +
+
+
+
+
+
+
+

Light badges

+
+ {% for color in colors %} + {{ color | uc_first }} + {% endfor %} +
+
+
+
+
+
+
+

Outline badges

+
+ {% for color in colors %} + {{ color | uc_first }} + {% endfor %} +
+
+
+
+
+
+
+

Badges with icons

+
+ {% for color in colors %} + {% include "ui/icon.html" icon="star" type="filled" %} {{ color | uc_first }} + {% endfor %} +
+
+
+
+
+
+
{% include "ui/dropdown-menu.html" show=true badge=true arrow=true %}
+
+
+
+
+
+
+ {% for color in colors %} + + {% endfor %} +
+
+
+
+
+
+
+
+ {% for color in colors %} + + {% endfor %} +
+
+
+
+
+
+
+
+ {% for color in colors %} + + {% endfor %} +
+
+
+
+
+
+