Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Paweł Kuna
2025-07-07 18:00:21 +02:00
committed by GitHub
parent 2a12f72b28
commit 6c4dd3670d
21 changed files with 56 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/blue-spoons-sleep.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Update class names from `*-left`, `*-right` to `*-start`, `*-end`

12
core/scss/layout/_navbar.scss
View File

@@ -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;
}

3
core/scss/ui/_buttons.scss
View File

@@ -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);
}

6
core/scss/ui/_cards.scss
View File

@@ -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);
}

8
core/scss/ui/_switch-icon.scss
View File

@@ -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);
}

12
docs/content/ui/components/badges.md
View File

@@ -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 %}

2
docs/content/ui/components/switch-icon.md
View File

@@ -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"

10
preview/pages/cards.html
View File

@@ -62,13 +62,13 @@ permalink: cards.html
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-rotate-right">
<div class="card-body">Card rotate right</div>
<div class="card card-rotate-end">
<div class="card-body">Card rotate end</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-rotate-left">
<div class="card-body">Card rotate left</div>
<div class="card card-rotate-start">
<div class="card-body">Card rotate start</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
@@ -127,7 +127,7 @@ permalink: cards.html
{% include "cards/card.html" status-bottom="success" title="Card with bottom status" %}
</div>
<div class="col-md-6 col-lg-3">
{% include "cards/card.html" status-left="primary" title="Card with side status" %}
{% include "cards/card.html" status-start="primary" title="Card with side status" %}
</div>
<div class="col-md-6 col-lg-3">

2
preview/pages/emails.html
View File

@@ -57,7 +57,7 @@ permalink: emails.html
<div class="row g-0">
<div class="col-6">
<div class="p-6 bg-surface-secondary rounded-start">
<img src="" class="img-fluid rounded-left" data-email-image />
<img src="" class="img-fluid rounded-start" data-email-image />
</div>
</div>
<div class="col-6">

4
preview/pages/form-layout.html
View File

@@ -103,7 +103,7 @@ page-libs: [litepicker]
</div>
<div>
{% include "ui/button.html" color="primary" block text="Send Message" icon-right="arrow-right" %}
{% include "ui/button.html" color="primary" block text="Send Message" icon-end="arrow-right" %}
</div>
</div>
</form>
@@ -148,7 +148,7 @@ page-libs: [litepicker]
{% include "ui/form/check.html" title="Remember me" class="m-0" %}
</div>
<div class="col-auto">
{% include "ui/button.html" color="primary" text="Create Account" icon-right="arrow-right" %}
{% include "ui/button.html" color="primary" text="Create Account" icon-end="arrow-right" %}
</div>
</div>
</div>

4
preview/pages/layout-vertical-right.html
View File

@@ -1,8 +1,8 @@
---
page-header: Right vertical layout
page-menu: layout.vertical-right
page-menu: layout.vertical-end
layout-sidebar: true
layout-sidebar-right: true
layout-sidebar-end: true
layout-hide-topbar: true
layout: homepage
permalink: layout-vertical-right.html

4
shared/includes/cards/card.html
View File

@@ -14,8 +14,8 @@
<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
{% elsif include.status-bottom %}
<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
{% elsif include.status-left %}
<div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
{% elsif include.status-start %}
<div class="card-status-start bg-{{ include.status-start | default: 'blue' }}"></div>
{% endif %}
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}

6
shared/includes/cards/profile-timeline.html
View File

@@ -13,7 +13,7 @@
</div>
<div class="flex-fill">
<div>
<small class="float-right text-secondary">4 min</small>
<small class="float-end text-secondary">4 min</small>
<h4>{{ people[4].first_name }} {{ people[4].last_name }}</h4>
</div>
@@ -55,7 +55,7 @@
</div>
<div class="flex-fill">
<div>
<small class="float-right text-secondary">12 min</small>
<small class="float-end text-secondary">12 min</small>
<h4>{{ people[10].first_name }} {{ people[10].last_name }}</h4>
</div>
<div>
@@ -72,7 +72,7 @@
</div>
<div class="flex-fill">
<div>
<small class="float-right text-secondary">34 min</small>
<small class="float-end text-secondary">34 min</small>
<h4>{{ people[14].first_name }} {{ people[14].last_name }}</h4>
</div>

2
shared/includes/cards/small-stats-2.html
View File

@@ -13,7 +13,7 @@
<div class="card" data-color={{color}}>
<div class="card-body">
<div class="float-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
<div class="float-end avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
{% include "ui/icon.html" icon=icon %}
</div>
<div class="text-secondary fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>

2
shared/includes/cards/small-stats.html
View File

@@ -25,7 +25,7 @@
{% include "ui/icon.html" icon=include.small-icon color=include.color class="icon-sm ms-1" %}
{% endif %}
{% if include.description-value %}
<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
<span class="float-end font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
{% endif %}
</div>
<div class="text-secondary">

4
shared/includes/cards/table-users.html
View File

@@ -30,10 +30,10 @@
</td>
<td>
<div class="clearfix">
<div class="float-left">
<div class="float-start">
<strong>{{ percentage }}%</strong>
</div>
<div class="float-right">
<div class="float-end">
<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>

2
shared/includes/layout/sidebar.html
View File

@@ -1,6 +1,6 @@
{% assign breakpoint = include.breakpoint | default: 'lg' %}
<aside class="navbar navbar-vertical{% if include.right %} navbar-right{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
<aside class="navbar navbar-vertical{% if include.end %} navbar-end{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
<div class="container-fluid">
{% include "layout/navbar-toggler.html" target="sidebar-menu" %}

2
shared/includes/marketing/sections/cta.html
View File

@@ -4,7 +4,7 @@
<p class="text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, ipsa? Voluptates sunt, ipsum esse quis obcaecati atque placeat consectetur beatae, tenetur ducimus iure minima expedita recusandae doloribus nam. Pariatur, facilis?</p>
<div class="btn-list justify-content-center mt-6">
{% include "ui/button.html" text="Get started" color="primary" %}
{% include "ui/button.html" text="Learn more" ghost=true icon-right="chevron-right" %}
{% include "ui/button.html" text="Learn more" ghost=true icon-end="chevron-right" %}
</div>
</div>
</section>

2
shared/includes/parts/demo-layout.html
View File

@@ -12,7 +12,7 @@
<div class="h-2 {% if config.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
{% endif %}
</div>
{% if config.sidebar-right %}
{% if config.sidebar-end %}
<div class="{% if config.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if config.sidebar-dark %}bg-dark{% else %}border-start bg-white{% endif %}"></div>
{% endif %}
</div>

2
shared/includes/ui/button.html
View File

@@ -24,6 +24,6 @@
{% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
{% unless include.icon-only %}
{{ include.text | default: "Button" }}{% if include.dots %}<span class="animated-dots"></span>{% endif %}
{% if include.icon-right %}{% include "ui/icon.html" icon=include.icon-right class="icon-right" %}{% endif %}
{% if include.icon-end %}{% include "ui/icon.html" icon=include.icon-end class="icon-end" %}{% endif %}
{% endunless %}
</{{ e }}>

2
shared/layouts/default.html
View File

@@ -7,7 +7,7 @@ layout: base
<div class="page">
{% if layout-sidebar %}
<!-- BEGIN SIDEBAR -->
{% include "layout/sidebar.html" dark=layout-sidebar-dark right=layout-sidebar-right transparent=layout-navbar-transparent breakpoint="lg" %}
{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end transparent=layout-navbar-transparent breakpoint="lg" %}
<!-- END SIDEBAR -->
{% endif %}