8000 Update class names from left, right to start, end by codecalm · Pull Request #2402 · tabler/tabler · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Update class names from left, right to start, end #2402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: dev
Choose a base branch
from
Open

Update class names from left, right to start, end #2402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
7e22d66
Update class names from left, right to start, end
codecalm May 22, 2025
afdde9d
Create blue-spoons-sleep.md
codecalm May 22, 2025
08e4919
Add conditional loading of banner script in development environment
codecalm May 26, 2025
8db1c08
feat: add banner script loading for preview environment
codecalm May 26, 2025
57afd0b
feat: add data attribute to banner script for preview environment
codecalm May 26, 2025
c914ecf
feat: add shx dependency to core, docs, and preview packages
codecalm May 26, 2025
a0377f9
fix: remove shx dependency from core, docs, and preview packages
codecalm May 26, 2025
c2cb3d3
fix: remove shx dependency from importers in pnpm-lock.yaml
codecalm May 26, 2025
1b0f820
fix: update banner script loading condition to production environment
codecalm May 26, 2025
545defc
fix: restore shx dependency in package.json and pnpm-lock.yaml
codecalm May 26, 2025
5c2bb88
Merge branch 'main' of https://github.com/tabler/tabler into dev-righ…
codecalm May 27, 2025
232bfd8
fix: update class names for consistency
codecalm May 27, 2025
dc57b6f
Merge branch 'dev-right-to-end' of https://github.com/tabler/tabler i…
codecalm May 27, 2025
3a571a5
fix: update navbar alignment classes and card status attributes for c…
codecalm May 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/blue-spoons-sleep.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---

Update class names from `*-left`, `*-right` to `*-start`, `*-end`
12 changes: 8 additions & 4 deletions core/scss/layout/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand All @@ -172,7 +173,8 @@ Navbar
}
}

&.navbar-vertical.navbar-right {
&.navbar-vertical.navbar-right,
&.navbar-vertical.navbar-end {
~ .navbar,
~ .page-wrapper {
margin-left: 0;
Expand Down Expand Up @@ -322,7 +324,8 @@ Navbar vertical
overflow-y: scroll;
padding: 0;

&.navbar-right {
&.navbar-right,
&.navbar-end {
left: auto;
right: 0;
}
Expand Down Expand Up @@ -364,7 +367,8 @@ Navbar vertical
}
}

&.navbar-right ~ .page {
&.navbar-right ~ .page,
&.navbar-end ~ .page {
padding-left: 0;
padding-right: $sidebar-width;
}
Expand Down
3 changes: 2 additions & 1 deletion core/scss/ui/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
6 changes: 4 additions & 2 deletions core/scss/ui/_cards.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
8 changes: 6 additions & 2 deletions core/scss/ui/_switch-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
.switc F438 h-icon-slide-down {
overflow: hidden;

Expand Down Expand Up @@ -150,7 +152,8 @@
}
}

.switch-icon-slide-left {
.switch-icon-slide-left,
.switch-icon-slide-start {
.switch-icon-a {
transform: translateX(0);
}
Expand All @@ -170,7 +173,8 @@
}
}

.switch-icon-slide-right {
.switch-icon-slide-right,
.switch-icon-slide-end {
.switch-icon-a {
transform: translateX(0);
}
Expand Down
12 changes: 6 additions & 6 deletions docs/content/ui/components/badges.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand Down
2 changes: 1 addition & 1 deletion docs/content/ui/components/switch-icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ You can also add a fancy animation to add variety to your button. See demo below
</svg>
</span>
</button>
<button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
<button class="switch-icon switch-icon-slide-end" data-bs-toggle="switch-icon">
<span class="switch-icon-a text-secondary">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
"start": "pnpm dev"
},
"packageManager": "pnpm@10.11.0",
"dependencies": {
"shx": "^0.4.0"
},
"devDependencies": {
"@argos-ci/playwright": "^5.0.3",
"@changesets/changelog-github": "^0.5.1",
Expand Down Expand Up @@ -43,7 +46,6 @@
"rtlcss": "^4.3.0",
"sass": "1.71.0",
"shelljs": "^0.10.0",
"shx": "^0.4.0",
"terser": "^5.39.2",
"turbo": "^2.5.3"
}
Expand Down
Loading
0