Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Migrate CSS direction properties to logical properties for improved RTL support (#2773)

Browse Source 
Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
Bartosz-Docodecalmcopilot-swe-agent[bot]
 authored and GitHub committed 2026-08-05 01:58:04 +02:00
1 parent dbe391dc23
commit 7ae422f23a
40 files changed
+241 -196
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/migrate-css-logical-properties.md
+7
View File
@@ -0,0 +1,7 @@
---
"@tabler/core": patch
---
Migrated all physical CSS direction properties to logical properties (`padding-inline`, `margin-inline`, `inset-inline`, `float: inline-start`/`inline-end`, `text-align: start/end`) for improved RTL support and reduced RTL stylesheet generation overhead.
Directional transforms, which have no logical equivalent, now use a `--tblr-dir` direction multiplier (`1` in LTR, `-1` under `[dir="rtl"]`), e.g. `translateX(calc(var(--tblr-dir) * 4px))`. These declarations are identical in `tabler.css` and `tabler.rtl.css` — the flip happens at runtime via the `dir` attribute, so RTL transforms now also work when using plain `tabler.css` with `dir="rtl"`.
core/scss/_props.scss
+11
View File
@@ -3,6 +3,9 @@
:root, :root,
:host { :host {
/** Direction multiplier for physical transforms (1 = LTR, -1 = RTL) */
--#{$prefix}dir: 1;
/** Fonts */ /** Fonts */
--#{$prefix}font-monospace: #{$font-family-monospace}; --#{$prefix}font-monospace: #{$font-family-monospace};
--#{$prefix}font-sans-serif: #{$font-family-sans-serif}; --#{$prefix}font-sans-serif: #{$font-family-sans-serif};
@@ -90,3 +93,11 @@
--#{$prefix}backdrop-blur: #{$backdrop-blur}; --#{$prefix}backdrop-blur: #{$backdrop-blur};
--#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur)); --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
} }
[dir='ltr'] {
--#{$prefix}dir: 1;
}
[dir='rtl'] {
--#{$prefix}dir: -1;
}
core/scss/_utilities.scss
+15 -15
View File
@@ -36,8 +36,8 @@ $utilities: map.merge(
responsive: true, responsive: true,
property: float, property: float,
values: ( values: (
start: left, start: inline-start,
end: right, end: inline-end,
none: none, none: none,
), ),
), ),
@@ -112,12 +112,12 @@ $utilities: map.merge(
values: $position-values, values: $position-values,
), ),
'start': ( 'start': (
property: left, property: inset-inline-start,
class: start, class: start,
values: $position-values, values: $position-values,
), ),
'end': ( 'end': (
property: right, property: inset-inline-end,
class: end, class: end,
values: $position-values, values: $position-values,
), ),
@@ -125,8 +125,8 @@ $utilities: map.merge(
property: transform, property: transform,
class: translate-middle, class: translate-middle,
values: ( values: (
null: translate(-50%, -50%), null: translate(calc(var(--#{$prefix}dir) * -50%), -50%) #{'/*rtl:ignore*/'},
x: translateX(-50%), x: translateX(calc(var(--#{$prefix}dir) * -50%)) #{'/*rtl:ignore*/'},
y: translateY(-50%), y: translateY(-50%),
), ),
), ),
@@ -395,7 +395,7 @@ $utilities: map.merge(
), ),
'margin-x': ( 'margin-x': (
responsive: true, responsive: true,
property: margin-right margin-left, property: margin-inline-end margin-inline-start,
class: mx, class: mx,
values: map.merge( values: map.merge(
$spacers, $spacers,
@@ -428,7 +428,7 @@ $utilities: map.merge(
), ),
'margin-end': ( 'margin-end': (
responsive: true, responsive: true,
property: margin-right, property: margin-inline-end,
class: me, class: me,
values: map.merge( values: map.merge(
$spacers, $spacers,
@@ -450,7 +450,7 @@ $utilities: map.merge(
), ),
'margin-start': ( 'margin-start': (
responsive: true, responsive: true,
property: margin-left, property: margin-inline-start,
class: ms, class: ms,
values: map.merge( values: map.merge(
$spacers, $spacers,
@@ -468,7 +468,7 @@ $utilities: map.merge(
), ),
'negative-margin-x': ( 'negative-margin-x': (
responsive: true, responsive: true,
property: margin-right margin-left, property: margin-inline-end margin-inline-start,
class: mx, class: mx,
values: $negative-spacers, values: $negative-spacers,
), ),
@@ -486,7 +486,7 @@ $utilities: map.merge(
), ),
'negative-margin-end': ( 'negative-margin-end': (
responsive: true, responsive: true,
property: margin-right, property: margin-inline-end,
class: me, class: me,
values: $negative-spacers, values: $negative-spacers,
), ),
@@ -498,7 +498,7 @@ $utilities: map.merge(
), ),
'negative-margin-start': ( 'negative-margin-start': (
responsive: true, responsive: true,
property: margin-left, property: margin-inline-start,
class: ms, class: ms,
values: $negative-spacers, values: $negative-spacers,
), ),
@@ -511,7 +511,7 @@ $utilities: map.merge(
), ),
'padding-x': ( 'padding-x': (
responsive: true, responsive: true,
property: padding-right padding-left, property: padding-inline-end padding-inline-start,
class: px, class: px,
values: $spacers, values: $spacers,
), ),
@@ -529,7 +529,7 @@ $utilities: map.merge(
), ),
'padding-end': ( 'padding-end': (
responsive: true, responsive: true,
property: padding-right, property: padding-inline-end,
class: pe, class: pe,
values: $spacers, values: $spacers,
), ),
@@ -541,7 +541,7 @@ $utilities: map.merge(
), ),
'padding-start': ( 'padding-start': (
responsive: true, responsive: true,
property: padding-left, property: padding-inline-start,
class: ps, class: ps,
values: $spacers, values: $spacers,
), ),
core/scss/_variables.scss
+1 -1
View File
@@ -1957,7 +1957,7 @@ $form-floating-input-padding-t: 1.625rem !default;
$form-floating-input-padding-b: 0.625rem !default; $form-floating-input-padding-b: 0.625rem !default;
$form-floating-label-height: 1.5em !default; $form-floating-label-height: 1.5em !default;
$form-floating-label-opacity: 0.65 !default; $form-floating-label-opacity: 0.65 !default;
$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default; $form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(calc(var(--#{$prefix}dir) * 0.15rem)) #{'/*rtl:ignore*/'} !default;
$form-floating-label-disabled-color: $gray-600 !default; $form-floating-label-disabled-color: $gray-600 !default;
$form-floating-transition: $form-floating-transition:
opacity 0.1s ease-in-out, opacity 0.1s ease-in-out,
core/scss/bootstrap/_button-group.scss
+9 -9
View File
@@ -43,7 +43,7 @@
// Prevent double borders when buttons are next to each other // Prevent double borders when buttons are next to each other
> :not(.btn-check:first-child) + .btn, > :not(.btn-check:first-child) + .btn,
> .btn-group:not(:first-child) { > .btn-group:not(:first-child) {
margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list margin-inline-start: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
} }
// Reset rounded corners // Reset rounded corners
@@ -80,28 +80,28 @@
// //
.dropdown-toggle-split { .dropdown-toggle-split {
padding-right: $btn-padding-x * 0.75; padding-inline-end: $btn-padding-x * 0.75;
padding-left: $btn-padding-x * 0.75; padding-inline-start: $btn-padding-x * 0.75;
&::after, &::after,
.dropup &::after, .dropup &::after,
.dropend &::after { .dropend &::after {
margin-left: 0; margin-inline-start: 0;
} }
.dropstart &::before { .dropstart &::before {
margin-right: 0; margin-inline-end: 0;
} }
} }
.btn-sm + .dropdown-toggle-split { .btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * 0.75; padding-inline-end: $btn-padding-x-sm * 0.75;
padding-left: $btn-padding-x-sm * 0.75; padding-inline-start: $btn-padding-x-sm * 0.75;
} }
.btn-lg + .dropdown-toggle-split { .btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * 0.75; padding-inline-end: $btn-padding-x-lg * 0.75;
padding-left: $btn-padding-x-lg * 0.75; padding-inline-start: $btn-padding-x-lg * 0.75;
} }
// The clickable button for toggling the menu // The clickable button for toggling the menu
core/scss/bootstrap/_card.scss
+10 -13
View File
@@ -41,8 +41,8 @@
@include box-shadow(var(--#{$prefix}card-box-shadow)); @include box-shadow(var(--#{$prefix}card-box-shadow));
> hr { > hr {
margin-right: 0; margin-inline-end: 0;
margin-left: 0; margin-inline-start: 0;
} }
> .list-group { > .list-group {
@@ -97,7 +97,7 @@
} }
+ .card-link { + .card-link {
margin-left: var(--#{$prefix}card-spacer-x); margin-inline-start: var(--#{$prefix}card-spacer-x);
} }
} }
@@ -133,9 +133,9 @@
// //
.card-header-tabs { .card-header-tabs {
margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list margin-inline-end: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list margin-inline-start: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
border-bottom: 0; border-bottom: 0;
.nav-link.active { .nav-link.active {
@@ -145,17 +145,14 @@
} }
.card-header-pills { .card-header-pills {
margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list margin-inline-end: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list margin-inline-start: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
} }
// Card image // Card image
.card-img-overlay { .card-img-overlay {
position: absolute; position: absolute;
top: 0; inset: 0;
right: 0;
bottom: 0;
left: 0;
padding: var(--#{$prefix}card-img-overlay-padding); padding: var(--#{$prefix}card-img-overlay-padding);
@include border-radius(var(--#{$prefix}card-inner-border-radius)); @include border-radius(var(--#{$prefix}card-inner-border-radius));
} }
@@ -197,8 +194,8 @@
margin-bottom: 0; margin-bottom: 0;
+ .card { + .card {
margin-left: 0; margin-inline-start: 0;
border-left: 0; border-inline-start: 0;
} }
// Handle rounded corners // Handle rounded corners
core/scss/bootstrap/_carousel.scss
+14 -14
View File
@@ -31,9 +31,9 @@
.carousel-item { .carousel-item {
position: relative; position: relative;
display: none; display: none;
float: left; float: inline-start;
width: 100%; width: 100%;
margin-right: -100%; margin-inline-end: -100%;
backface-visibility: hidden; backface-visibility: hidden;
@include transition($carousel-transition); @include transition($carousel-transition);
} }
@@ -46,12 +46,14 @@
.carousel-item-next:not(.carousel-item-start), .carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end { .active.carousel-item-end {
transform: translateX(100%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
} }
.carousel-item-prev:not(.carousel-item-end), .carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start { .active.carousel-item-start {
transform: translateX(-100%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
} }
// //
@@ -114,11 +116,11 @@
} }
} }
.carousel-control-prev { .carousel-control-prev {
left: 0; inset-inline-start: 0;
background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); else: null); background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
} }
.carousel-control-next { .carousel-control-next {
right: 0; inset-inline-end: 0;
background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)); else: null); background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
} }
@@ -147,17 +149,16 @@
.carousel-indicators { .carousel-indicators {
position: absolute; position: absolute;
right: 0; inset-inline: 0;
bottom: 0; bottom: 0;
left: 0;
z-index: 2; z-index: 2;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
// Use the .carousel-control's width as margin so we don't overlay those // Use the .carousel-control's width as margin so we don't overlay those
margin-right: $carousel-control-width; margin-inline-end: $carousel-control-width;
margin-bottom: 1rem; margin-bottom: 1rem;
margin-left: $carousel-control-width; margin-inline-start: $carousel-control-width;
[data-bs-target], [data-bs-target],
[data-target] { [data-target] {
@@ -166,8 +167,8 @@
width: $carousel-indicator-width; width: $carousel-indicator-width;
height: $carousel-indicator-height; height: $carousel-indicator-height;
padding: 0; padding: 0;
margin-right: $carousel-indicator-spacer; margin-inline-end: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer; margin-inline-start: $carousel-indicator-spacer;
text-indent: -999px; text-indent: -999px;
cursor: pointer; cursor: pointer;
background-color: var(--#{$prefix}carousel-indicator-active-bg); background-color: var(--#{$prefix}carousel-indicator-active-bg);
@@ -191,9 +192,8 @@
.carousel-caption { .carousel-caption {
position: absolute; position: absolute;
right: (100% - $carousel-caption-width) * 0.5; inset-inline: (100% - $carousel-caption-width) * 0.5;
bottom: $carousel-caption-spacer; bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) * 0.5;
padding-top: $carousel-caption-padding-y; padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y; padding-bottom: $carousel-caption-padding-y;
color: var(--#{$prefix}carousel-caption-color); color: var(--#{$prefix}carousel-caption-color);
core/scss/bootstrap/_dropdown.scss
+12 -12
View File
@@ -58,7 +58,7 @@
margin: 0; // Override default margin of ul margin: 0; // Override default margin of ul
@include font-size(var(--#{$prefix}dropdown-font-size)); @include font-size(var(--#{$prefix}dropdown-font-size));
color: var(--#{$prefix}dropdown-color); color: var(--#{$prefix}dropdown-color);
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none; list-style: none;
background-color: var(--#{$prefix}dropdown-bg); background-color: var(--#{$prefix}dropdown-bg);
background-clip: padding-box; background-clip: padding-box;
@@ -69,7 +69,7 @@
&[data-bs-popper], &[data-bs-popper],
&[data-tblr-popper] { &[data-tblr-popper] {
top: 100%; top: 100%;
left: 0; inset-inline-start: 0;
margin-top: var(--#{$prefix}dropdown-spacer); margin-top: var(--#{$prefix}dropdown-spacer);
} }
@@ -98,8 +98,8 @@
&[data-bs-popper], &[data-bs-popper],
&[data-tblr-popper] { &[data-tblr-popper] {
right: auto; inset-inline-end: auto;
left: 0; inset-inline-start: 0;
} }
} }
@@ -108,8 +108,8 @@
&[data-bs-popper], &[data-bs-popper],
&[data-tblr-popper] { &[data-tblr-popper] {
right: 0; inset-inline-end: 0;
left: auto; inset-inline-start: auto;
} }
} }
} }
@@ -136,10 +136,10 @@
.dropdown-menu[data-bs-popper], .dropdown-menu[data-bs-popper],
.dropdown-menu[data-tblr-popper] { .dropdown-menu[data-tblr-popper] {
top: 0; top: 0;
right: auto; inset-inline-end: auto;
left: 100%; inset-inline-start: 100%;
margin-top: 0; margin-top: 0;
margin-left: var(--#{$prefix}dropdown-spacer); margin-inline-start: var(--#{$prefix}dropdown-spacer);
} }
.dropdown-toggle { .dropdown-toggle {
@@ -154,10 +154,10 @@
.dropdown-menu[data-bs-popper], .dropdown-menu[data-bs-popper],
.dropdown-menu[data-tblr-popper] { .dropdown-menu[data-tblr-popper] {
top: 0; top: 0;
right: 100%; inset-inline-end: 100%;
left: auto; inset-inline-start: auto;
margin-top: 0; margin-top: 0;
margin-right: var(--#{$prefix}dropdown-spacer); margin-inline-end: var(--#{$prefix}dropdown-spacer);
} }
.dropdown-toggle { .dropdown-toggle {
core/scss/bootstrap/_list-group.scss
+4 -4
View File
@@ -31,7 +31,7 @@
flex-direction: column; flex-direction: column;
// No need to set list-style: none; since .list-group-item is block level // No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol padding-inline-start: 0; // reset padding because ul and ol
margin-bottom: 0; margin-bottom: 0;
@include border-radius(var(--#{$prefix}list-group-border-radius)); @include border-radius(var(--#{$prefix}list-group-border-radius));
} }
@@ -149,11 +149,11 @@
+ .list-group-item { + .list-group-item {
border-top-width: var(--#{$prefix}list-group-border-width); border-top-width: var(--#{$prefix}list-group-border-width);
border-left-width: 0; border-inline-start-width: 0;
&.active { &.active {
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
border-left-width: var(--#{$prefix}list-group-border-width); border-inline-start-width: var(--#{$prefix}list-group-border-width);
} }
} }
} }
core/scss/bootstrap/_modal.scss
+5 -5
View File
@@ -36,8 +36,8 @@
// scss-docs-end modal-css-vars // scss-docs-end modal-css-vars
position: fixed; position: fixed;
inset-inline-start: 0;
top: 0; top: 0;
left: 0;
z-index: var(--#{$prefix}modal-zindex); z-index: var(--#{$prefix}modal-zindex);
display: none; display: none;
width: 100%; width: 100%;
@@ -137,9 +137,9 @@
padding: calc(var(--#{$prefix}modal-header-padding-y) * 0.5) calc(var(--#{$prefix}modal-header-padding-x) * 0.5); padding: calc(var(--#{$prefix}modal-header-padding-y) * 0.5) calc(var(--#{$prefix}modal-header-padding-x) * 0.5);
// Split properties to avoid invalid calc() function if value is 0 // Split properties to avoid invalid calc() function if value is 0
margin-top: calc(-0.5 * var(--#{$prefix}modal-header-padding-y)); margin-top: calc(-0.5 * var(--#{$prefix}modal-header-padding-y));
margin-right: calc(-0.5 * var(--#{$prefix}modal-header-padding-x)); margin-inline-end: calc(-0.5 * var(--#{$prefix}modal-header-padding-x));
margin-bottom: calc(-0.5 * var(--#{$prefix}modal-header-padding-y)); margin-bottom: calc(-0.5 * var(--#{$prefix}modal-header-padding-y));
margin-left: auto; margin-inline-start: auto;
} }
} }
@@ -189,8 +189,8 @@
// Automatically set modal's width for larger viewports // Automatically set modal's width for larger viewports
.modal-dialog { .modal-dialog {
max-width: var(--#{$prefix}modal-width); max-width: var(--#{$prefix}modal-width);
margin-right: auto; margin-inline-end: auto;
margin-left: auto; margin-inline-start: auto;
} }
.modal-sm { .modal-sm {
core/scss/bootstrap/_nav.scss
+3 -3
View File
@@ -18,7 +18,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 0; padding-inline-start: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
} }
@@ -135,8 +135,8 @@
gap: var(--#{$prefix}nav-underline-gap); gap: var(--#{$prefix}nav-underline-gap);
.nav-link { .nav-link {
padding-right: 0; padding-inline-end: 0;
padding-left: 0; padding-inline-start: 0;
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent; border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
&:hover, &:hover,
core/scss/bootstrap/_navbar.scss
+4 -4
View File
@@ -68,7 +68,7 @@
.navbar-brand { .navbar-brand {
padding-top: var(--#{$prefix}navbar-brand-padding-y); padding-top: var(--#{$prefix}navbar-brand-padding-y);
padding-bottom: var(--#{$prefix}navbar-brand-padding-y); padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
margin-right: var(--#{$prefix}navbar-brand-margin-end); margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
@include font-size(var(--#{$prefix}navbar-brand-font-size)); @include font-size(var(--#{$prefix}navbar-brand-font-size));
color: var(--#{$prefix}navbar-brand-color); color: var(--#{$prefix}navbar-brand-color);
text-decoration: if(sass($link-decoration == none): null; else: none); text-decoration: if(sass($link-decoration == none): null; else: none);
@@ -98,7 +98,7 @@
display: flex; display: flex;
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
padding-left: 0; padding-inline-start: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
@@ -208,8 +208,8 @@
} }
.nav-link { .nav-link {
padding-right: var(--#{$prefix}navbar-nav-link-padding-x); padding-inline-end: var(--#{$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$prefix}navbar-nav-link-padding-x); padding-inline-start: var(--#{$prefix}navbar-nav-link-padding-x);
} }
} }
core/scss/bootstrap/_offcanvas.scss
+12 -12
View File
@@ -52,24 +52,25 @@
&.offcanvas-start { &.offcanvas-start {
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: var(--#{$prefix}offcanvas-width); width: var(--#{$prefix}offcanvas-width);
border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
transform: translateX(-100%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
} }
&.offcanvas-end { &.offcanvas-end {
top: 0; top: 0;
right: 0; inset-inline-end: 0;
width: var(--#{$prefix}offcanvas-width); width: var(--#{$prefix}offcanvas-width);
border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
transform: translateX(100%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
} }
&.offcanvas-top { &.offcanvas-top {
top: 0; top: 0;
right: 0; inset-inline: 0;
left: 0;
height: var(--#{$prefix}offcanvas-height); height: var(--#{$prefix}offcanvas-height);
max-height: 100%; max-height: 100%;
border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
@@ -77,8 +78,7 @@
} }
&.offcanvas-bottom { &.offcanvas-bottom {
right: 0; inset-inline: 0;
left: 0;
height: var(--#{$prefix}offcanvas-height); height: var(--#{$prefix}offcanvas-height);
max-height: 100%; max-height: 100%;
border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
@@ -133,9 +133,9 @@
padding: calc(var(--#{$prefix}offcanvas-padding-y) * 0.5) calc(var(--#{$prefix}offcanvas-padding-x) * 0.5); padding: calc(var(--#{$prefix}offcanvas-padding-y) * 0.5) calc(var(--#{$prefix}offcanvas-padding-x) * 0.5);
// Split properties to avoid invalid calc() function if value is 0 // Split properties to avoid invalid calc() function if value is 0
margin-top: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y)); margin-top: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y));
margin-right: calc(-0.5 * var(--#{$prefix}offcanvas-padding-x)); margin-inline-end: calc(-0.5 * var(--#{$prefix}offcanvas-padding-x));
margin-bottom: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y)); margin-bottom: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y));
margin-left: auto; margin-inline-start: auto;
} }
} }
core/scss/bootstrap/_pagination.scss
+1 -1
View File
@@ -74,7 +74,7 @@
.page-item { .page-item {
&:not(:first-child) .page-link { &:not(:first-child) .page-link {
margin-left: $pagination-margin-start; margin-inline-start: $pagination-margin-start;
} }
@if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) { @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
core/scss/bootstrap/_popover.scss
+2 -2
View File
@@ -127,10 +127,10 @@
.popover-header::before { .popover-header::before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; inset-inline-start: 50%;
display: block; display: block;
width: var(--#{$prefix}popover-arrow-width); width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(-0.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list margin-inline-start: calc(-0.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
content: ''; content: '';
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg); border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
} }
core/scss/bootstrap/_reboot.scss
+4 -4
View File
@@ -150,7 +150,7 @@ address {
ol, ol,
ul { ul {
padding-left: 2rem; padding-inline-start: 2rem;
} }
ol, ol,
@@ -175,7 +175,7 @@ dt {
dd { dd {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-left: 0; // 1 margin-inline-start: 0; // 1
} }
// Blockquote // Blockquote
@@ -337,7 +337,7 @@ caption {
padding-top: $table-cell-padding-y; padding-top: $table-cell-padding-y;
padding-bottom: $table-cell-padding-y; padding-bottom: $table-cell-padding-y;
color: $table-caption-color; color: $table-caption-color;
text-align: left; text-align: start;
} }
// 1. Removes font-weight bold by inheriting // 1. Removes font-weight bold by inheriting
@@ -480,7 +480,7 @@ fieldset {
// See https://github.com/twbs/bootstrap/issues/29712 // See https://github.com/twbs/bootstrap/issues/29712
legend { legend {
float: left; // 1 float: inline-start; // 1
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: $legend-margin-bottom; margin-bottom: $legend-margin-bottom;
core/scss/bootstrap/_toasts.scss
+2 -2
View File
@@ -64,8 +64,8 @@
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width))); @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
.btn-close { .btn-close {
margin-right: calc(-0.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list margin-inline-end: calc(-0.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: var(--#{$prefix}toast-padding-x); margin-inline-start: var(--#{$prefix}toast-padding-x);
} }
} }
core/scss/bootstrap/_type.scss
+1 -1
View File
@@ -45,7 +45,7 @@
display: inline-block; display: inline-block;
&:not(:last-child) { &:not(:last-child) {
margin-right: $list-inline-padding; margin-inline-end: $list-inline-padding;
} }
} }
core/scss/bootstrap/forms/_floating-labels.scss
+2 -2
View File
@@ -14,7 +14,7 @@
> label { > label {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 2; z-index: 2;
max-width: 100%; max-width: 100%;
height: 100%; // allow textareas height: 100%; // allow textareas
@@ -53,7 +53,7 @@
> .form-select { > .form-select {
padding-top: $form-floating-input-padding-t; padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b; padding-bottom: $form-floating-input-padding-b;
padding-left: $form-floating-padding-x; padding-inline-start: $form-floating-padding-x;
} }
> .form-control:focus, > .form-control:focus,
core/scss/bootstrap/forms/_form-check.scss
+16 -16
View File
@@ -7,24 +7,24 @@
.form-check { .form-check {
display: block; display: block;
min-height: $form-check-min-height; min-height: $form-check-min-height;
padding-left: $form-check-padding-start; padding-inline-start: $form-check-padding-start;
margin-bottom: $form-check-margin-bottom; margin-bottom: $form-check-margin-bottom;
.form-check-input { .form-check-input {
float: left; float: inline-start;
margin-left: $form-check-padding-start * -1; margin-inline-start: $form-check-padding-start * -1;
} }
} }
.form-check-reverse { .form-check-reverse {
padding-right: $form-check-padding-start; padding-inline-end: $form-check-padding-start;
padding-left: 0; padding-inline-start: 0;
text-align: right; text-align: end;
.form-check-input { .form-check-input {
float: right; float: inline-end;
margin-right: $form-check-padding-start * -1; margin-inline-end: $form-check-padding-start * -1;
margin-left: 0; margin-inline-start: 0;
} }
} }
@@ -124,13 +124,13 @@
// //
.form-switch { .form-switch {
padding-left: $form-switch-padding-start; padding-inline-start: $form-switch-padding-start;
.form-check-input { .form-check-input {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)}; --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
width: $form-switch-width; width: $form-switch-width;
margin-left: $form-switch-padding-start * -1; margin-inline-start: $form-switch-padding-start * -1;
background-image: var(--#{$prefix}form-switch-bg); background-image: var(--#{$prefix}form-switch-bg);
background-position: left center; background-position: left center;
@include border-radius($form-switch-border-radius, 0); @include border-radius($form-switch-border-radius, 0);
@@ -152,19 +152,19 @@
} }
&.form-check-reverse { &.form-check-reverse {
padding-right: $form-switch-padding-start; padding-inline-end: $form-switch-padding-start;
padding-left: 0; padding-inline-start: 0;
.form-check-input { .form-check-input {
margin-right: $form-switch-padding-start * -1; margin-inline-end: $form-switch-padding-start * -1;
margin-left: 0; margin-inline-start: 0;
} }
} }
} }
.form-check-inline { .form-check-inline {
display: inline-block; display: inline-block;
margin-right: $form-check-inline-margin-end; margin-inline-end: $form-check-inline-margin-end;
} }
.btn-check { .btn-check {
core/scss/bootstrap/forms/_form-control.scss
+2 -2
View File
@@ -139,8 +139,8 @@
&.form-control-sm, &.form-control-sm,
&.form-control-lg { &.form-control-lg {
padding-right: 0; padding-inline-end: 0;
padding-left: 0; padding-inline-start: 0;
} }
} }
core/scss/bootstrap/forms/_form-select.scss
+3 -3
View File
@@ -40,7 +40,7 @@
&[multiple], &[multiple],
&[size]:not([size='1']) { &[size]:not([size='1']) {
padding-right: $form-select-padding-x; padding-inline-end: $form-select-padding-x;
background-image: none; background-image: none;
} }
@@ -60,7 +60,7 @@
.form-select-sm { .form-select-sm {
padding-top: $form-select-padding-y-sm; padding-top: $form-select-padding-y-sm;
padding-bottom: $form-select-padding-y-sm; padding-bottom: $form-select-padding-y-sm;
padding-left: $form-select-padding-x-sm; padding-inline-start: $form-select-padding-x-sm;
@include font-size($form-select-font-size-sm); @include font-size($form-select-font-size-sm);
@include border-radius($form-select-border-radius-sm); @include border-radius($form-select-border-radius-sm);
} }
@@ -68,7 +68,7 @@
.form-select-lg { .form-select-lg {
padding-top: $form-select-padding-y-lg; padding-top: $form-select-padding-y-lg;
padding-bottom: $form-select-padding-y-lg; padding-bottom: $form-select-padding-y-lg;
padding-left: $form-select-padding-x-lg; padding-inline-start: $form-select-padding-x-lg;
@include font-size($form-select-font-size-lg); @include font-size($form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg); @include border-radius($form-select-border-radius-lg);
} }
core/scss/bootstrap/forms/_input-group.scss
+2 -2
View File
@@ -92,7 +92,7 @@
.input-group-lg > .form-select, .input-group-lg > .form-select,
.input-group-sm > .form-select { .input-group-sm > .form-select {
padding-right: $form-select-padding-x + $form-select-indicator-padding; padding-inline-end: $form-select-padding-x + $form-select-indicator-padding;
} }
// Rounded corners // Rounded corners
@@ -127,7 +127,7 @@
} }
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} { > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list margin-inline-start: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
@include border-start-radius(0); @include border-start-radius(0);
} }
core/scss/layout/_navbar.scss
+2 -1
View File
@@ -122,7 +122,8 @@ Navbar
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;
inset-inline-end: 0.5rem; inset-inline-end: 0.5rem;
transform: translate(50%, -50%); /*rtl:ignore*/
transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
} }
} }
} }
core/scss/mixins/bootstrap/_backdrop.scss
+1 -1
View File
@@ -5,8 +5,8 @@
// Shared between modals and offcanvases // Shared between modals and offcanvases
@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) { @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
position: fixed; position: fixed;
inset-inline-start: 0;
top: 0; top: 0;
left: 0;
z-index: $zindex; z-index: $zindex;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
core/scss/mixins/bootstrap/_caret.scss
+8 -7
View File
@@ -4,29 +4,30 @@
@use 'breakpoints' as *; @use 'breakpoints' as *;
@mixin caret-down($width: $caret-width) { @mixin caret-down($width: $caret-width) {
border-top: $width solid; border-top: $width solid;
border-right: $width solid transparent; border-inline-end: $width solid transparent;
border-bottom: 0; border-bottom: 0;
border-left: $width solid transparent; border-inline-start: $width solid transparent;
} }
@mixin caret-up($width: $caret-width) { @mixin caret-up($width: $caret-width) {
border-top: 0; border-top: 0;
border-right: $width solid transparent; border-inline-end: $width solid transparent;
border-bottom: $width solid; border-bottom: $width solid;
border-left: $width solid transparent; border-inline-start: $width solid transparent;
} }
@mixin caret-end($width: $caret-width) { @mixin caret-end($width: $caret-width) {
border-top: $width solid transparent; border-top: $width solid transparent;
border-right: 0; border-inline-end: 0;
border-bottom: $width solid transparent; border-bottom: $width solid transparent;
border-left: $width solid; border-inline-start: $width solid;
} }
@mixin caret-start($width: $caret-width) { @mixin caret-start($width: $caret-width) {
border-top: $width solid transparent; border-top: $width solid transparent;
border-right: $width solid; border-inline-end: $width solid;
border-bottom: $width solid transparent; border-bottom: $width solid transparent;
border-inline-start: 0;
} }
@mixin caret($direction: down, $width: $caret-width, $spacing: $caret-spacing, $vertical-align: $caret-vertical-align) { @mixin caret($direction: down, $width: $caret-width, $spacing: $caret-spacing, $vertical-align: $caret-vertical-align) {
core/scss/mixins/bootstrap/_container.scss
+4 -4
View File
@@ -8,8 +8,8 @@
--#{$prefix}gutter-x: #{$gutter}; --#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0; --#{$prefix}gutter-y: 0;
width: 100%; width: 100%;
padding-right: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list padding-inline-end: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list padding-inline-start: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
margin-right: auto; margin-inline-end: auto;
margin-left: auto; margin-inline-start: auto;
} }
core/scss/mixins/bootstrap/_forms.scss
+4 -4
View File
@@ -58,7 +58,7 @@
border-color: $border-color; border-color: $border-color;
@if $enable-validation-icons { @if $enable-validation-icons {
padding-right: $input-height-inner; padding-inline-end: $input-height-inner;
background-image: escape-svg($icon); background-image: escape-svg($icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center; background-position: right $input-height-inner-quarter center;
@@ -80,7 +80,7 @@
textarea.form-control { textarea.form-control {
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
@if $enable-validation-icons { @if $enable-validation-icons {
padding-right: $input-height-inner; padding-inline-end: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter; background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
} }
} }
@@ -94,7 +94,7 @@
&:not([multiple]):not([size]), &:not([multiple]):not([size]),
&:not([multiple])[size='1'] { &:not([multiple])[size='1'] {
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
padding-right: $form-select-feedback-icon-padding-end; padding-inline-end: $form-select-feedback-icon-padding-end;
background-position: $form-select-bg-position, $form-select-feedback-icon-position; background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size; background-size: $form-select-bg-size, $form-select-feedback-icon-size;
} }
@@ -138,7 +138,7 @@
} }
.form-check-inline .form-check-input { .form-check-inline .form-check-input {
~ .#{$state}-feedback { ~ .#{$state}-feedback {
margin-left: 0.5em; margin-inline-start: 0.5em;
} }
} }
core/scss/mixins/bootstrap/_grid.scss
+5 -5
View File
@@ -17,8 +17,8 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list margin-inline-end: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list margin-inline-start: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
} }
@mixin make-col-ready() { @mixin make-col-ready() {
@@ -26,8 +26,8 @@
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
padding-right: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list padding-inline-end: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list padding-inline-start: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$prefix}gutter-y); margin-top: var(--#{$prefix}gutter-y);
} }
@@ -48,7 +48,7 @@
@mixin make-col-offset($size, $columns: $grid-columns) { @mixin make-col-offset($size, $columns: $grid-columns) {
$num: divide($size, $columns); $num: divide($size, $columns);
margin-left: if(sass($num == 0): 0; else: math.percentage($num)); margin-inline-start: if(sass($num == 0): 0; else: math.percentage($num));
} }
@mixin row-cols($count) { @mixin row-cols($count) {
core/scss/mixins/bootstrap/_lists.scss
+1 -1
View File
@@ -6,6 +6,6 @@
// Unstyled keeps list items block level, just removes default browser padding and list-style // Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled { @mixin list-unstyled {
padding-left: 0; padding-inline-start: 0;
list-style: none; list-style: none;
} }
core/scss/mixins/bootstrap/_rfs.scss
+25 -5
View File
@@ -314,16 +314,26 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
@include rfs($value, padding-top); @include rfs($value, padding-top);
} }
@mixin padding-inline-end($value) {
@include rfs($value, padding-inline-end);
}
// Deprecated: use padding-inline-end() instead
@mixin padding-right($value) { @mixin padding-right($value) {
@include rfs($value, padding-right); @include padding-inline-end($value);
} }
@mixin padding-bottom($value) { @mixin padding-bottom($value) {
@include rfs($value, padding-bottom); @include rfs($value, padding-bottom);
} }
@mixin padding-inline-start($value) {
@include rfs($value, padding-inline-start);
}
// Deprecated: use padding-inline-start() instead
@mixin padding-left($value) { @mixin padding-left($value) {
@include rfs($value, padding-left); @include padding-inline-start($value);
} }
@mixin margin($value) { @mixin margin($value) {
@@ -334,14 +344,24 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
@include rfs($value, margin-top); @include rfs($value, margin-top);
} }
@mixin margin-inline-end($value) {
@include rfs($value, margin-inline-end);
}
// Deprecated: use margin-inline-end() instead
@mixin margin-right($value) { @mixin margin-right($value) {
@include rfs($value, margin-right); @include margin-inline-end($value);
} }
@mixin margin-bottom($value) { @mixin margin-bottom($value) {
@include rfs($value, margin-bottom); @include rfs($value, margin-bottom);
} }
@mixin margin-left($value) { @mixin margin-inline-start($value) {
@include rfs($value, margin-left); @include rfs($value, margin-inline-start);
}
// Deprecated: use margin-inline-start() instead
@mixin margin-left($value) {
@include margin-inline-start($value);
} }
core/scss/tests/_caret.test.scss
+6 -5
View File
@@ -16,9 +16,9 @@
@include expect() { @include expect() {
.t { .t {
border-top: 0.3em solid; border-top: 0.3em solid;
border-right: 0.3em solid transparent; border-inline-end: 0.3em solid transparent;
border-bottom: 0; border-bottom: 0;
border-left: 0.3em solid transparent; border-inline-start: 0.3em solid transparent;
} }
} }
} }
@@ -34,9 +34,9 @@
@include expect() { @include expect() {
.t { .t {
border-top: 0; border-top: 0;
border-right: 0.3em solid transparent; border-inline-end: 0.3em solid transparent;
border-bottom: 0.3em solid; border-bottom: 0.3em solid;
border-left: 0.3em solid transparent; border-inline-start: 0.3em solid transparent;
} }
} }
} }
@@ -52,8 +52,9 @@
@include expect() { @include expect() {
.t { .t {
border-top: 0.3em solid transparent; border-top: 0.3em solid transparent;
border-right: 0.3em solid; border-inline-end: 0.3em solid;
border-bottom: 0.3em solid transparent; border-bottom: 0.3em solid transparent;
border-inline-start: 0;
} }
} }
} }
core/scss/tests/_generate-utility.test.scss
+15 -11
View File
@@ -68,7 +68,7 @@
@include output() { @include output() {
@include generate-utility( @include generate-utility(
( (
property: margin-right margin-left, property: margin-inline-end margin-inline-start,
class: mx, class: mx,
values: ( values: (
0: 0, 0: 0,
@@ -79,12 +79,12 @@
} }
@include expect() { @include expect() {
.mx-0 { .mx-0 {
margin-right: 0 !important; margin-inline-end: 0 !important;
margin-left: 0 !important; margin-inline-start: 0 !important;
} }
.mx-auto { .mx-auto {
margin-right: auto !important; margin-inline-end: auto !important;
margin-left: auto !important; margin-inline-start: auto !important;
} }
} }
} }
@@ -181,8 +181,9 @@
property: float, property: float,
class: float, class: float,
values: ( values: (
left, start: inline-start,
right, end: inline-end,
none: none,
), ),
), ),
); );
@@ -209,11 +210,14 @@
.d-flex { .d-flex {
display: flex !important; display: flex !important;
} }
.float-left { .float-start {
float: left !important; float: inline-start !important;
} }
.float-right { .float-end {
float: right !important; float: inline-end !important;
}
.float-none {
float: none !important;
} }
// responsive breakpoints: only `d` (responsive: true) is repeated; `float` is not // responsive breakpoints: only `d` (responsive: true) is repeated; `float` is not
core/scss/tests/_grid.test.scss
+6 -6
View File
@@ -67,7 +67,7 @@
} }
@include expect() { @include expect() {
.t { .t {
margin-left: 25%; margin-inline-start: 25%;
} }
} }
} }
@@ -82,7 +82,7 @@
} }
@include expect() { @include expect() {
.t { .t {
margin-left: 0; margin-inline-start: 0;
} }
} }
} }
@@ -122,8 +122,8 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(-1 * var(--tblr-gutter-y)); margin-top: calc(-1 * var(--tblr-gutter-y));
margin-right: calc(-0.5 * var(--tblr-gutter-x)); margin-inline-end: calc(-0.5 * var(--tblr-gutter-x));
margin-left: calc(-0.5 * var(--tblr-gutter-x)); margin-inline-start: calc(-0.5 * var(--tblr-gutter-x));
} }
} }
} }
@@ -143,8 +143,8 @@
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
padding-right: calc(var(--tblr-gutter-x) * 0.5); padding-inline-end: calc(var(--tblr-gutter-x) * 0.5);
padding-left: calc(var(--tblr-gutter-x) * 0.5); padding-inline-start: calc(var(--tblr-gutter-x) * 0.5);
margin-top: var(--tblr-gutter-y); margin-top: var(--tblr-gutter-y);
} }
} }
core/scss/ui/_badges.scss
+2 -1
View File
@@ -83,7 +83,8 @@
position: absolute !important; position: absolute !important;
top: 0 !important; top: 0 !important;
inset-inline-end: 0 !important; inset-inline-end: 0 !important;
transform: translate(50%, -50%); /*rtl:ignore*/
transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
z-index: 1; z-index: 1;
} }
core/scss/ui/_buttons.scss
+4 -2
View File
@@ -315,7 +315,8 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
.icon { .icon {
transform: translateX(4px); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * 4px));
} }
} }
@@ -332,7 +333,8 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
.icon { .icon {
transform: translateX(-4px); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -4px));
} }
} }
} }
core/scss/ui/_cards.scss
+2 -9
View File
@@ -457,22 +457,15 @@ Card table
td, td,
th { th {
&:first-child { &:first-child {
padding-left: $card-spacer-x;
border-left: 0;
border-top-left-radius: var(--#{$prefix}card-border-radius);
}
&:last-child {
padding-right: $card-spacer-x;
border-right: 0;
border-top-right-radius: var(--#{$prefix}card-border-radius);
padding-inline-start: $card-spacer-x; padding-inline-start: $card-spacer-x;
border-inline-start: 0; border-inline-start: 0;
border-start-start-radius: var(--#{$prefix}card-border-radius);
} }
&:last-child { &:last-child {
padding-inline-end: $card-spacer-x; padding-inline-end: $card-spacer-x;
border-inline-end: 0; border-inline-end: 0;
border-start-end-radius: var(--#{$prefix}card-border-radius);
} }
} }
} }
core/scss/ui/_loaders.scss
+2 -1
View File
@@ -56,7 +56,8 @@ Dimmer
@keyframes animated-dots { @keyframes animated-dots {
0% { 0% {
transform: translateX(-100%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
} }
} }
core/scss/ui/_steps.scss
+4 -2
View File
@@ -83,7 +83,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@include border-radius(var(--#{$prefix}border-radius-pill)); @include border-radius(var(--#{$prefix}border-radius-pill));
transform: translateX(-50%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -50%));
color: var(--#{$prefix}white); color: var(--#{$prefix}white);
width: var(--#{$prefix}steps-dot-size); width: var(--#{$prefix}steps-dot-size);
height: var(--#{$prefix}steps-dot-size); height: var(--#{$prefix}steps-dot-size);
@@ -157,7 +158,8 @@
&:after { &:after {
position: absolute; position: absolute;
content: ''; content: '';
transform: translateX(-50%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -50%));
top: var(--#{$prefix}steps-dot-offset); top: var(--#{$prefix}steps-dot-offset);
inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5); inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
width: var(--#{$prefix}steps-border-width); width: var(--#{$prefix}steps-border-width);
core/scss/ui/_switch-icon.scss
+8 -4
View File
@@ -161,12 +161,14 @@
} }
.switch-icon-b { .switch-icon-b {
transform: translateX(100%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
} }
&.active { &.active {
.switch-icon-a { .switch-icon-a {
transform: translateX(-100%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
} }
.switch-icon-b { .switch-icon-b {
@@ -182,12 +184,14 @@
} }
.switch-icon-b { .switch-icon-b {
transform: translateX(-100%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
} }
&.active { &.active {
.switch-icon-a { .switch-icon-a {
transform: translateX(100%); /*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
} }
.switch-icon-b { .switch-icon-b {