Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 21:00:15 +04:00
Code Issues Projects Releases Wiki Activity

Refactor badge styles, remove Bootstrap styles (#2169)

Browse Source
This commit is contained in:
Paweł Kuna
2025-02-19 02:20:25 +01:00
committed by GitHub
parent b0a62b7cf5
commit 378fba89f5
9 changed files with 246 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/twelve-garlics-battle.md
+6
View File
@@ -0,0 +1,6 @@
---
"@tabler/core": patch
"preview": patch
---
Refactor badge styles, remove Bootstrap styles
core/scss/_bootstrap-components.scss
-1
View File
@@ -17,7 +17,6 @@
@import "bootstrap/scss/accordion"; @import "bootstrap/scss/accordion";
@import "bootstrap/scss/breadcrumb"; @import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination"; @import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert"; @import "bootstrap/scss/alert";
@import "bootstrap/scss/progress"; @import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group"; @import "bootstrap/scss/list-group";
core/scss/_variables.scss
+11 -7
View File
@@ -97,7 +97,9 @@ $h5-line-height: 1rem !default;
$h6-font-size: 0.625rem !default; $h6-font-size: 0.625rem !default;
$h6-line-height: 1rem !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: ( $font-sizes: (
1: $h1-font-size, 1: $h1-font-size,
@@ -309,7 +311,7 @@ $icon-color: var(--#{$prefix}gray-400) !default;
// Code // Code
$code-color: var(--#{$prefix}gray-600) !default; $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-line-height: 1.25rem !default;
$code-bg: var(--#{$prefix}bg-surface-secondary) !default; $code-bg: var(--#{$prefix}bg-surface-secondary) !default;
@@ -553,13 +555,15 @@ $breadcrumb-variants: (
) !default; ) !default;
// Badges // 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-line-height: $code-line-height !default;
$badge-font-weight: var(--#{$prefix}font-weight-medium) !default; $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
$badge-padding-y: 0.25em !default; $badge-padding-y: 0.25em !default;
$badge-padding-x: 0.5em !default; $badge-padding-x: 0.5em !default;
$badge-empty-size: 0.5rem !default; $badge-empty-size: 10px !default;
$badge-color: var(--#{$prefix}gray-500) !default; $badge-color: var(--#{$prefix}secondary) !default;
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default; $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
// Buttons // Buttons
@@ -605,8 +609,8 @@ $btn-box-shadow: var(--#{$prefix}box-shadow-input) !default;
// Cards // Cards
$card-title-spacer-y: 1.25rem !default; $card-title-spacer-y: 1.25rem !default;
$card-box-shadow: var(--#{$prefix}shadow-card) !default; $card-box-shadow: var(--#{$prefix}box-shadow-card) !default;
$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default; $card-hover-box-shadow: var(--#{$prefix}box-shadow-card-hover) !default;
$card-bg: var(--#{$prefix}bg-surface) !default; $card-bg: var(--#{$prefix}bg-surface) !default;
$card-bg-hover: $white !default; $card-bg-hover: $white !default;
core/scss/ui/_badges.scss
+47 -13
View File
@@ -1,36 +1,46 @@
.badge { .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; justify-content: center;
align-items: center; align-items: center;
gap: .25rem;
background: $badge-bg-color; background: $badge-bg-color;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent; border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
min-width: 1.25rem; border-radius: var(--#{$prefix}badge-border-radius);
font-weight: $headings-font-weight; min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
letter-spacing: .04em; letter-spacing: 0.04em;
vertical-align: bottom; vertical-align: bottom;
line-height: var(--#{$prefix}badge-line-height);
@at-root a#{&} { @at-root a#{&} {
color: $card-bg; color: $card-bg;
} }
.avatar {
box-sizing: content-box;
width: 1.25rem;
height: 1.25rem;
margin: 0 .5rem 0 -.5rem;
}
.icon { .icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
font-size: 1rem; font-size: var(--#{$prefix}badge-icon-size);
stroke-width: 2; stroke-width: 2;
} }
} }
.badge:empty, .badge:empty,
.badge-empty { .badge-dot {
display: inline-block; display: inline-block;
width: $badge-empty-size; width: $badge-empty-size;
height: $badge-empty-size; height: $badge-empty-size;
@@ -76,4 +86,28 @@
.badge-blink { .badge-blink {
animation: blink 2s infinite; 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;
} }
core/scss/ui/_buttons.scss
+3 -8
View File
@@ -20,6 +20,7 @@
justify-content: center; justify-content: center;
white-space: nowrap; white-space: nowrap;
box-shadow: var(--#{$prefix}btn-box-shadow); box-shadow: var(--#{$prefix}btn-box-shadow);
position: relative;
.icon { .icon {
width: var(--#{$prefix}btn-icon-size); width: var(--#{$prefix}btn-icon-size);
@@ -224,6 +225,7 @@
// Action button // Action button
// //
.btn-action { .btn-action {
--#{$prefix}border-color: transparent;
padding: 0; padding: 0;
border: 0; border: 0;
color: var(--#{$prefix}secondary); color: var(--#{$prefix}secondary);
@@ -234,6 +236,7 @@
justify-content: center; justify-content: center;
border-radius: var(--#{$prefix}border-radius); border-radius: var(--#{$prefix}border-radius);
background: transparent; background: transparent;
box-shadow: none;
&:after { &:after {
content: none; content: none;
@@ -253,14 +256,6 @@
&.show { &.show {
color: var(--#{$prefix}primary); color: var(--#{$prefix}primary);
} }
.icon {
margin: 0;
width: 1.25rem;
height: 1.25rem;
font-size: 1.25rem;
stroke-width: 1;
}
} }
.btn-actions { .btn-actions {
core/scss/ui/_dropdowns.scss
+1
View File
@@ -19,6 +19,7 @@
align-items: center; align-items: center;
margin: 0; margin: 0;
line-height: $line-height-base; line-height: $line-height-base;
gap: .5rem;
} }
.dropdown-item-icon { .dropdown-item-icon {
preview/eleventy.config.mjs
+4
View File
@@ -522,6 +522,10 @@ export default function (eleventyConfig) {
return string.split(' ').map(word => word.charAt(0)).join(''); 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) { eleventyConfig.addFilter("size", function (elem) {
if (elem instanceof Object) { if (elem instanceof Object) {
return Object.keys(elem).length; return Object.keys(elem).length;
preview/pages/_includes/ui/tag.html
+1 -1
View File
@@ -10,7 +10,7 @@
{% elsif include.payment %} {% elsif include.payment %}
{% include "ui/payment.html" provider=include.payment size="xxs" class="tag-payment" %} {% include "ui/payment.html" provider=include.payment size="xxs" class="tag-payment" %}
{% elsif include.status %} {% 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.legend %}
<span class="legend bg-{{ include.legend }}"></span> <span class="legend bg-{{ include.legend }}"></span>
{% elsif include.checkbox %} {% elsif include.checkbox %}
preview/pages/badges.html
+173 -90
View File
@@ -6,94 +6,177 @@ layout: default
permalink: badges.html 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" %}
<div class="row row-cards"> <div class="row row-cards">
<div class="col-4"> <div class="col-4">
<div class="card"> <div class="row row-cards">
<div class="card-body"> <div class="col-12">
<h1>Example heading <span class="badge">New</span></h1> <div class="card">
<h2>Example heading <span class="badge">New</span></h2> <div class="card-body">
<h3>Example heading <span class="badge">New</span></h3> <h1>Example heading <span class="badge">New</span></h1>
<h4>Example heading <span class="badge">New</span></h4> <h2>Example heading <span class="badge">New</span></h2>
<h5>Example heading <span class="badge">New</span></h5> <h3>Example heading <span class="badge">New</span></h3>
<h6>Example heading <span class="badge">New</span></h6> <h4>Example heading <span class="badge">New</span></h4>
</div> <h5>Example heading <span class="badge">New</span></h5>
</div> <h6>Example heading <span class="badge">New</span></h6>
</div> </div>
<div class="col-8"> </div>
<div class="row row-cards"> </div>
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="badges-list"> <h3 class="card-title">Badge sizes</h3>
{% for color in site.colors %}
<span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg">{{ color[1].title }}</span> <div class="space-y">
{% endfor %} {% assign sizes = "sm,md,lg" | split: "," %} {% for size in sizes %}
</div> <div class="badges-list">
</div> <span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">Default</span>
</div> <span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">{% include "ui/icon.html" icon="check" %} Left icon</span>
</div> <span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">Right icon{% include "ui/icon.html" icon="arrow-right" %}</span>
<div class="col-12"> <span class="badge badge-icononly{% if size != 'md' %} badge-{{ size }}{% endif %}"
<div class="card"> >{% include "ui/icon.html" icon="star" type="filled" %}</span
<div class="card-body"> >
<div class="badges-list"> </div>
{% for color in site.colors %} {% endfor %}
<span class="badge bg-{{ color[0] }}-lt">{{ color[1].title }}</span> </div>
{% endfor %} </div>
</div> </div>
</div> </div>
</div> <div class="col-12">
</div> <div class="card">
<div class="col-12"> <div class="card-body">
<div class="card"> <h3 class="card-title">Positioned badges</h3>
<div class="card-body">
<div class="badges-list"> <div class="btn-list">
{% for color in site.colors %} <button type="button" class="btn">Notifications <span class="badge text-bg-secondary ms-2">4</span></button>
<span class="badge badge-outline text-{{ color[0] }}">{{ color[1].title }}</span>
{% endfor %} <button type="button" class="btn">
</div> Inbox
</div> <span class="badge bg-red badge-notification text-red-fg">
</div> 9+
</div> <span class="visually-hidden">unread messages</span>
</div> </span>
</div> </button>
<div class="col-sm-6 col-lg-3">
{% include "ui/dropdown-menu.html" show=true badge=true arrow=true %} <button type="button" class="btn">
</div> Profile
<div class="col-sm-6 col-lg-9"> <span class="badge badge-dot bg-red badge-notification"></span>
<div class="row row-cards"> </button>
<div class="col-12">
<div class="card"> <button type="button" class="btn">
<div class="card-body"> Settings
<div class="btn-list"> <span class="badge badge-dot bg-red badge-notification badge-blink"></span>
{% for color in site.colors %} </button>
<button class="btn">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg ms-2">{{ forloop.index }}</span></button>
{% endfor %} <button type="button" class="btn btn-icon">
</div> {% include "ui/icon.html" icon="bell" %}
</div> <span class="badge badge-dot bg-red badge-notification badge-blink"></span>
</div> </button>
</div>
<div class="col-12"> <button type="button" class="btn btn-icon btn-action">
<div class="card"> {% include "ui/icon.html" icon="bell" %}
<div class="card-body"> <span class="badge badge-dot bg-red badge-notification"></span>
<div class="btn-list"> </button>
{% for color in site.colors %} </div>
<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg badge-notification badge-pill">{{ forloop.index }}</span></button> </div>
{% endfor %} </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="col-8">
<div class="col-12"> <div class="row row-cards">
<div class="card"> <div class="col-12">
<div class="card-body"> <div class="card">
<div class="btn-list"> <div class="card-body">
{% for color in site.colors %} <h3 class="card-title">Basic badges</h3>
<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} badge-notification badge-blink"></span></button> <div class="badges-list">
{% endfor %} {% for color in colors %}
</div> <span class="badge bg-{{ color }} text-{{ color }}-fg">{{ color | uc_first }}</span>
</div> {% endfor %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="col-12">
<div class="card">
<div class="card-body">
<h3 class="card-title">Light badges</h3>
<div class="badges-list">
{% for color in colors %}
<span class="badge bg-{{ color }}-lt">{{ color | uc_first }}</span>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h3 class="card-title">Outline badges</h3>
<div class="badges-list">
{% for color in colors %}
<span class="badge badge-outline text-{{ color }}">{{ color | uc_first }}</span>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h3 class="card-title">Badges with icons</h3>
<div class="badges-list">
{% for color in colors %}
<span class="badge bg-{{ color }} text-{{ color }}-fg"> {% include "ui/icon.html" icon="star" type="filled" %} {{ color | uc_first }} </span>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">{% include "ui/dropdown-menu.html" show=true badge=true arrow=true %}</div>
<div class="col-sm-6 col-lg-9">
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="btn-list">
{% for color in colors %}
<button class="btn">{{ color | uc_first }} badge <span class="badge bg-{{ color }} text-{{ color }}-fg ms-2">{{ forloop.index }}</span></button>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="btn-list">
{% for color in colors %}
<button class="btn position-relative">
{{ color | uc_first }} badge <span class="badge bg-{{ color }} text-{{ color }}-fg badge-notification badge-pill">{{ forloop.index }}</span>
</button>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="btn-list">
{% for color in colors %}
<button class="btn position-relative">
{{ color | uc_first }} badge <span class="badge bg-{{ color }} badge-notification badge-blink"></span>
</button>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>