From 6c4dd3670ddc98e877cde237c523aed773781531 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Mon, 7 Jul 2025 18:00:21 +0200 Subject: [PATCH] Update class names from left, right to start, end (#2402) --- .changeset/blue-spoons-sleep.md | 5 +++++ core/scss/layout/_navbar.scss | 12 ++++++++---- core/scss/ui/_buttons.scss | 3 ++- core/scss/ui/_cards.scss | 6 ++++-- core/scss/ui/_switch-icon.scss | 8 ++++++-- docs/content/ui/components/badges.md | 12 ++++++------ docs/content/ui/components/switch-icon.md | 2 +- preview/pages/cards.html | 10 +++++----- preview/pages/emails.html | 2 +- preview/pages/form-layout.html | 4 ++-- preview/pages/layout-vertical-right.html | 4 ++-- shared/includes/cards/card.html | 4 ++-- shared/includes/cards/profile-timeline.html | 6 +++--- shared/includes/cards/small-stats-2.html | 2 +- shared/includes/cards/small-stats.html | 2 +- shared/includes/cards/table-users.html | 4 ++-- shared/includes/layout/sidebar.html | 2 +- shared/includes/marketing/sections/cta.html | 2 +- shared/includes/parts/demo-layout.html | 2 +- shared/includes/ui/button.html | 2 +- shared/layouts/default.html | 2 +- 21 files changed, 56 insertions(+), 40 deletions(-) create mode 100644 .changeset/blue-spoons-sleep.md diff --git a/.changeset/blue-spoons-sleep.md b/.changeset/blue-spoons-sleep.md new file mode 100644 index 000000000..3934522c1 --- /dev/null +++ b/.changeset/blue-spoons-sleep.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Update class names from `*-left`, `*-right` to `*-start`, `*-end` diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss index 1f98a06a3..42267545e 100644 --- a/core/scss/layout/_navbar.scss +++ b/core/scss/layout/_navbar.scss @@ -160,7 +160,8 @@ Navbar &.navbar-vertical { box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color); - &.navbar-right { + &.navbar-right, + &.navbar-end { box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color); } } @@ -172,7 +173,8 @@ Navbar } } - &.navbar-vertical.navbar-right { + &.navbar-vertical.navbar-right, + &.navbar-vertical.navbar-end { ~ .navbar, ~ .page-wrapper { margin-left: 0; @@ -322,7 +324,8 @@ Navbar vertical overflow-y: scroll; padding: 0; - &.navbar-right { + &.navbar-right, + &.navbar-end { left: auto; right: 0; } @@ -364,7 +367,8 @@ Navbar vertical } } - &.navbar-right ~ .page { + &.navbar-right ~ .page, + &.navbar-end ~ .page { padding-left: 0; padding-right: $sidebar-width; } diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index b0cd070c1..a8808f3e7 100644 --- a/core/scss/ui/_buttons.scss +++ b/core/scss/ui/_buttons.scss @@ -38,7 +38,8 @@ margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4); } - .icon-right { + .icon-right, + .icon-end { margin: 0 calc(var(--#{$prefix}btn-padding-x) / -4) 0 calc(var(--#{$prefix}btn-padding-x) / 2); } diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index 93bab3ee5..84100ecb3 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -215,11 +215,13 @@ Stacked card } // Card rotate -.card-rotate-left { +.card-rotate-left, +.card-rotate-start { transform: rotate(-1.5deg); } -.card-rotate-right { +.card-rotate-right, +.card-rotate-end { transform: rotate(1.5deg); } diff --git a/core/scss/ui/_switch-icon.scss b/core/scss/ui/_switch-icon.scss index 8c5f3b82e..246f94aa7 100644 --- a/core/scss/ui/_switch-icon.scss +++ b/core/scss/ui/_switch-icon.scss @@ -122,7 +122,9 @@ // Slide variant .switch-icon-slide-up, .switch-icon-slide-left, +.switch-icon-slide-start, .switch-icon-slide-right, +.switch-icon-slide-end, .switch-icon-slide-down { overflow: hidden; @@ -150,7 +152,8 @@ } } -.switch-icon-slide-left { +.switch-icon-slide-left, +.switch-icon-slide-start { .switch-icon-a { transform: translateX(0); } @@ -170,7 +173,8 @@ } } -.switch-icon-slide-right { +.switch-icon-slide-right, +.switch-icon-slide-end { .switch-icon-a { transform: translateX(0); } diff --git a/docs/content/ui/components/badges.md b/docs/content/ui/components/badges.md index b677876d9..c3ddbac5b 100644 --- a/docs/content/ui/components/badges.md +++ b/docs/content/ui/components/badges.md @@ -100,12 +100,12 @@ You can use icons in badges to make them more visually appealing. The example be You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges. {% capture html -%} -{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%} -{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%} -{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%} -{% include "ui/badge.html" text="X" icon-right="arrow-right" -%} -{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%} -{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%} +{% include "ui/badge.html" text="Star" icon-end="arrow-right" -%} +{% include "ui/badge.html" text="Heart" icon-end="arrow-right" -%} +{% include "ui/badge.html" text="Check" icon-end="arrow-right" -%} +{% include "ui/badge.html" text="X" icon-end="arrow-right" -%} +{% include "ui/badge.html" text="Plus" icon-end="arrow-right" -%} +{% include "ui/badge.html" text="Minus" icon-end="arrow-right" -%} {%- endcapture %} {% include "docs/example.html" html=html centered %} diff --git a/docs/content/ui/components/switch-icon.md b/docs/content/ui/components/switch-icon.md index f862d7af0..ca5495944 100644 --- a/docs/content/ui/components/switch-icon.md +++ b/docs/content/ui/components/switch-icon.md @@ -175,7 +175,7 @@ You can also add a fancy animation to add variety to your button. See demo below -