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 SCSS to use logical properties (#2537)

Browse Source
This commit is contained in:
Paweł Kuna
2025-11-23 22:05:45 +01:00
committed by GitHub
parent 14ed4693a5
commit 0106d6b7d2
48 changed files with 288 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/funny-kings-double.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Update SCSS to use logical properties

8
core/scss/_bootstrap-override.scss
View File

@@ -14,13 +14,13 @@
width: $caret-width; width: $caret-width;
height: $caret-width; height: $caret-width;
border-bottom: 1px var(--#{$prefix}border-style); border-bottom: 1px var(--#{$prefix}border-style);
border-left: 1px var(--#{$prefix}border-style); border-inline-start: 1px var(--#{$prefix}border-style);
margin-right: 0.1em; margin-inline-end: 0.1em;
@if $direction != 'left' { @if $direction != 'left' {
margin-left: $caret-spacing; margin-inline-start: $caret-spacing;
} @else { } @else {
margin-right: $caret-spacing; margin-inline-end: $caret-spacing;
} }
@if $direction == down { @if $direction == down {

18
core/scss/_utilities-marketing.scss
View File

@@ -12,7 +12,7 @@ $utilities: (
), ),
'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: $spacers-extra, values: $spacers-extra,
), ),
@@ -30,7 +30,7 @@ $utilities: (
), ),
'margin-end': ( 'margin-end': (
responsive: true, responsive: true,
property: margin-right, property: margin-inline-end,
class: me, class: me,
values: $spacers-extra, values: $spacers-extra,
), ),
@@ -42,7 +42,7 @@ $utilities: (
), ),
'margin-start': ( 'margin-start': (
responsive: true, responsive: true,
property: margin-left, property: margin-inline-start,
class: ms, class: ms,
values: $spacers-extra, values: $spacers-extra,
), ),
@@ -55,7 +55,7 @@ $utilities: (
), ),
'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-extra, values: $negative-spacers-extra,
), ),
@@ -73,7 +73,7 @@ $utilities: (
), ),
'negative-margin-end': ( 'negative-margin-end': (
responsive: true, responsive: true,
property: margin-right, property: margin-inline-end,
class: me, class: me,
values: $negative-spacers-extra, values: $negative-spacers-extra,
), ),
@@ -85,7 +85,7 @@ $utilities: (
), ),
'negative-margin-start': ( 'negative-margin-start': (
responsive: true, responsive: true,
property: margin-left, property: margin-inline-start,
class: ms, class: ms,
values: $negative-spacers-extra, values: $negative-spacers-extra,
), ),
@@ -98,7 +98,7 @@ $utilities: (
), ),
'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-extra, values: $spacers-extra,
), ),
@@ -116,7 +116,7 @@ $utilities: (
), ),
'padding-end': ( 'padding-end': (
responsive: true, responsive: true,
property: padding-right, property: padding-inline-end,
class: pe, class: pe,
values: $spacers-extra, values: $spacers-extra,
), ),
@@ -128,7 +128,7 @@ $utilities: (
), ),
'padding-start': ( 'padding-start': (
responsive: true, responsive: true,
property: padding-left, property: padding-inline-start,
class: ps, class: ps,
values: $spacers-extra, values: $spacers-extra,
), ),

6
core/scss/_utilities.scss
View File

@@ -164,7 +164,7 @@ $utilities: (
), ),
'border-end': ( 'border-end': (
class: border-end, class: border-end,
property: border-right, property: border-inline-end,
values: $border-values, values: $border-values,
), ),
'border-bottom': ( 'border-bottom': (
@@ -173,12 +173,12 @@ $utilities: (
), ),
'border-start': ( 'border-start': (
class: border-start, class: border-start,
property: border-left, property: border-inline-start,
values: $border-values, values: $border-values,
), ),
'border-x': ( 'border-x': (
class: border-x, class: border-x,
property: border-left border-right, property: border-inline-start border-inline-end,
values: $border-values, values: $border-values,
), ),
'border-y': ( 'border-y': (

16
core/scss/helpers/_index.scss
View File

@@ -33,9 +33,9 @@
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
z-index: 1; z-index: 1;
content: ''; content: '';
} }
@@ -74,16 +74,16 @@
.fixed-top { .fixed-top {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
left: 0; inset-inline-start: 0;
z-index: $zindex-fixed; z-index: $zindex-fixed;
} }
.fixed-bottom { .fixed-bottom {
position: fixed; position: fixed;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
z-index: $zindex-fixed; z-index: $zindex-fixed;
} }
@@ -119,10 +119,10 @@
content: ''; content: '';
} }
> * { >* {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

4
core/scss/layout/_core.scss
View File

@@ -61,8 +61,8 @@ body {
} }
> .navbar:first-child { > .navbar:first-child {
border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius); border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius); border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
} }
} }
} }

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

@@ -11,12 +11,12 @@
} }
.navbar-nav { .navbar-nav {
margin-left: 0; margin-inline-start: 0;
margin-right: 0; margin-inline-end: 0;
.nav-link { .nav-link {
padding: 0.5rem calc(#{$container-padding-x} / 2); padding: 0.5rem calc(#{$container-padding-x} / 2);
justify-content: flex-start; justify-content: start;
} }
} }
@@ -38,7 +38,7 @@
min-width: 0; min-width: 0;
display: flex; display: flex;
width: auto; width: auto;
padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem); padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem);
color: inherit; color: inherit;
&.disabled { &.disabled {
@@ -54,22 +54,22 @@
} }
.dropdown-menu .dropdown-item { .dropdown-menu .dropdown-item {
padding-left: add(calc(#{$container-padding-x} / 2), 3.25rem); padding-inline-start: add(calc(#{$container-padding-x} / 2), 3.25rem);
} }
.dropdown-menu .dropdown-menu .dropdown-item { .dropdown-menu .dropdown-menu .dropdown-item {
padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem); padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem);
} }
} }
.dropdown-toggle:after { .dropdown-toggle:after {
margin-left: auto; margin-inline-start: auto;
} }
.nav-item.active:after { .nav-item.active:after {
border-bottom-width: 0; border-bottom-width: 0;
border-left-width: 3px; border-inline-start-width: 3px;
right: auto; inset-inline-end: auto;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
@@ -118,7 +118,7 @@ Navbar
.badge { .badge {
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;
right: 0.5rem; inset-inline-end: 0.5rem;
transform: translate(50%, -50%); transform: translate(50%, -50%);
} }
} }
@@ -151,8 +151,8 @@ Navbar
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: -0.25rem; bottom: -0.25rem;
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color); border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
border-bottom-width: 2px; border-bottom-width: 2px;
@@ -171,7 +171,7 @@ Navbar
&.navbar-vertical { &.navbar-vertical {
~ .navbar, ~ .navbar,
~ .page-wrapper { ~ .page-wrapper {
margin-left: $sidebar-width; margin-inline-start: $sidebar-width;
} }
} }
@@ -179,8 +179,8 @@ Navbar
&.navbar-vertical.navbar-end { &.navbar-vertical.navbar-end {
~ .navbar, ~ .navbar,
~ .page-wrapper { ~ .page-wrapper {
margin-left: 0; margin-inline-start: 0;
margin-right: $sidebar-width; margin-inline-end: $sidebar-width;
} }
} }
} }
@@ -235,7 +235,7 @@ Navbar toggler
border-radius: inherit; border-radius: inherit;
background: inherit; background: inherit;
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
@include transition(inherit); @include transition(inherit);
} }
@@ -313,18 +313,18 @@ Navbar vertical
width: $sidebar-width; width: $sidebar-width;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
z-index: $zindex-fixed; z-index: $zindex-fixed;
align-items: flex-start; align-items: start;
overflow-y: scroll; overflow-y: scroll;
padding: 0; padding: 0;
@include transition(transform $transition-time); @include transition(transform $transition-time);
&.navbar-right, &.navbar-right,
&.navbar-end { &.navbar-end {
left: auto; inset-inline-start: auto;
right: 0; inset-inline-end: 0;
} }
.navbar-brand { .navbar-brand {
@@ -351,23 +351,23 @@ Navbar vertical
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
min-height: 100%; min-height: 100%;
justify-content: flex-start; justify-content: start;
padding: 0; padding: 0;
} }
~ .page { ~ .page {
padding-left: $sidebar-width; padding-inline-start: $sidebar-width;
[class^='container'] { [class^='container'] {
padding-left: 1.5rem; padding-inline-start: 1.5rem;
padding-right: 1.5rem; padding-inline-end: 1.5rem;
} }
} }
&.navbar-right ~ .page, &.navbar-right ~ .page,
&.navbar-end ~ .page { &.navbar-end ~ .page {
padding-left: 0; padding-inline-start: 0;
padding-right: $sidebar-width; padding-inline-end: $sidebar-width;
} }
@include navbar-vertical-nav; @include navbar-vertical-nav;
@@ -384,8 +384,8 @@ Navbar vertical
height: $navbar-overlap-height; height: $navbar-overlap-height;
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
background: inherit; background: inherit;
z-index: -1; z-index: -1;
box-shadow: inherit; box-shadow: inherit;

10
core/scss/layout/_page.scss
View File

@@ -67,8 +67,8 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
background-image: $overlay-gradient; background-image: $overlay-gradient;
} }
@@ -110,7 +110,7 @@
svg { svg {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
margin-right: 0.25rem; margin-inline-end: 0.25rem;
} }
} }
@@ -139,8 +139,8 @@
.page-cover-img { .page-cover-img {
position: absolute; position: absolute;
top: calc(-2 * var(--#{$prefix}page-cover-blur, 0)); top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
left: calc(-2 * var(--#{$prefix}page-cover-blur, 0)); inset-inline-start: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
right: calc(-2 * var(--#{$prefix}page-cover-blur, 0)); inset-inline-end: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0)); bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
pointer-events: none; pointer-events: none;
filter: blur(var(--#{$prefix}page-cover-blur)); filter: blur(var(--#{$prefix}page-cover-blur));

4
core/scss/layout/_root.scss
View File

@@ -4,8 +4,8 @@
height: 100%; height: 100%;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
margin-left: calc(100vw - 100%); margin-inline-start: calc(100vw - 100%);
margin-right: 0; margin-inline-end: 0;
} }
} }

4
core/scss/marketing/_browser.scss
View File

@@ -16,7 +16,7 @@
} }
.browser-dots { .browser-dots {
margin-right: 3rem; margin-inline-end: 3rem;
display: flex; display: flex;
} }
@@ -37,7 +37,7 @@
} }
.browser-dot { .browser-dot {
margin-right: 0.5rem; margin-inline-end: 0.5rem;
width: 0.75rem; width: 0.75rem;
min-width: 0.75rem; min-width: 0.75rem;
height: 0.75rem; height: 0.75rem;

10
core/scss/marketing/_pricing.scss
View File

@@ -60,10 +60,10 @@ $pricing-card-width: 22rem;
.pricing-label { .pricing-label {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
transform: translateY(-50%); transform: translateY(-50%);
vertical-align: bottom; vertical-align: bottom;
right: 0; inset-inline-end: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -86,7 +86,7 @@ $pricing-card-width: 22rem;
.pricing-price-currency { .pricing-price-currency {
font-size: $h2-font-size; font-size: $h2-font-size;
line-height: 1.5; line-height: 1.5;
margin-right: 0.25rem; margin-inline-end: 0.25rem;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
@@ -96,14 +96,14 @@ $pricing-card-width: 22rem;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
color: $text-secondary; color: $text-secondary;
align-self: center; align-self: center;
margin-left: 0.5rem; margin-inline-start: 0.5rem;
} }
.pricing-features { .pricing-features {
margin: 1rem 0 0; margin: 1rem 0 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
text-align: left; text-align: start;
> li:not(:first-child) { > li:not(:first-child) {
margin-top: 0.25rem; margin-top: 0.25rem;

12
core/scss/ui/_accordion.scss
View File

@@ -49,7 +49,7 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
color: var(--#{$prefix}accordion-btn-color); color: var(--#{$prefix}accordion-btn-color);
text-align: left; text-align: start;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
overflow-anchor: none; overflow-anchor: none;
@@ -79,8 +79,8 @@
display: flex; display: flex;
line-height: 1; line-height: 1;
transition: $transition-time transform; transition: $transition-time transform;
margin-left: auto; margin-inline-start: auto;
margin-right: 0; margin-inline-end: 0;
color: var(--#{$prefix}secondary); color: var(--#{$prefix}secondary);
width: var(--#{$prefix}accordion-btn-toggle-width); width: var(--#{$prefix}accordion-btn-toggle-width);
height: var(--#{$prefix}accordion-btn-toggle-width); height: var(--#{$prefix}accordion-btn-toggle-width);
@@ -141,8 +141,8 @@
.accordion-flush { .accordion-flush {
> .accordion-item { > .accordion-item {
border-right: 0; border-inline-end: 0;
border-left: 0; border-inline-start: 0;
@include border-radius(0); @include border-radius(0);
&:first-child { &:first-child {
@@ -172,6 +172,6 @@
.accordion-inverted { .accordion-inverted {
.accordion-button-toggle { .accordion-button-toggle {
order: -1; order: -1;
margin-left: 0; margin-inline-start: 0;
} }
} }

4
core/scss/ui/_alerts.scss
View File

@@ -61,12 +61,12 @@
} }
.alert-dismissible { .alert-dismissible {
padding-right: 3rem; //todo: use variable padding-inline-end: 3rem; //todo: use variable
.btn-close { .btn-close {
position: absolute; position: absolute;
top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px); top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
right: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px); inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
z-index: 1; z-index: 1;
padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x); padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
} }

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

@@ -38,7 +38,7 @@
.badge { .badge {
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg; box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
@@ -96,7 +96,7 @@
--#{$prefix}list-gap: 0; --#{$prefix}list-gap: 0;
.avatar { .avatar {
margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important; margin-inline-end: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
box-shadow: box-shadow:
var(--#{$prefix}avatar-box-shadow), var(--#{$prefix}avatar-box-shadow),
0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -147,7 +147,7 @@
width: var(--#{$prefix}avatar-brand-size); width: var(--#{$prefix}avatar-brand-size);
height: var(--#{$prefix}avatar-brand-size); height: var(--#{$prefix}avatar-brand-size);
position: absolute; position: absolute;
right: -2px; inset-inline-end: -2px;
bottom: -2px; bottom: -2px;
z-index: 1000; z-index: 1000;
background: var(--#{$prefix}bg-surface); background: var(--#{$prefix}bg-surface);

2
core/scss/ui/_badges.scss
View File

@@ -79,7 +79,7 @@
.badge-notification { .badge-notification {
position: absolute !important; position: absolute !important;
top: 0 !important; top: 0 !important;
right: 0 !important; inset-inline-end: 0 !important;
transform: translate(50%, -50%); transform: translate(50%, -50%);
z-index: 1; z-index: 1;
} }

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

@@ -60,11 +60,11 @@
} }
& + & { & + & {
padding-left: var(--#{$prefix}breadcrumb-item-padding-x); padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
&::before { &::before {
float: left; float: inline-start;
padding-right: var(--#{$prefix}breadcrumb-item-padding-x); padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
color: var(--#{$prefix}breadcrumb-divider-color); color: var(--#{$prefix}breadcrumb-divider-color);
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)); content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
/*rtl:raw: /*rtl:raw:

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

@@ -171,8 +171,8 @@
// Button shapes // Button shapes
// //
.btn-pill { .btn-pill {
padding-right: 1.5em; padding-inline-end: 1.5em;
padding-left: 1.5em; padding-inline-start: 1.5em;
border-radius: 10rem; border-radius: 10rem;
&[class*='btn-icon'] { &[class*='btn-icon'] {
@@ -189,8 +189,8 @@
// //
.btn-icon, .btn-icon,
.btn-action { .btn-action {
padding-left: 0; padding-inline-start: 0;
padding-right: 0; padding-inline-end: 0;
.icon { .icon {
margin: calc(-1 * var(--#{$prefix}btn-padding-x)); margin: calc(-1 * var(--#{$prefix}btn-padding-x));
@@ -214,7 +214,7 @@
position: fixed; position: fixed;
z-index: $zindex-fixed; z-index: $zindex-fixed;
bottom: 1rem; bottom: 1rem;
left: 1rem; inset-inline-start: 1rem;
box-shadow: var(--#{$prefix}shadow-dropdown); box-shadow: var(--#{$prefix}shadow-dropdown);
@include media-print { @include media-print {
@@ -240,13 +240,13 @@
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
border: $spinner-border-width var(--#{$prefix}border-style) currentColor; border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
border-right-color: transparent; border-inline-end-color: transparent;
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
color: var(--#{$prefix}btn-color); color: var(--#{$prefix}btn-color);
position: absolute; position: absolute;
width: var(--#{$prefix}btn-icon-size); width: var(--#{$prefix}btn-icon-size);
height: var(--#{$prefix}btn-icon-size); height: var(--#{$prefix}btn-icon-size);
left: calc(50% - var(--#{$prefix}btn-icon-size) / 2); inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
top: calc(50% - var(--#{$prefix}btn-icon-size) / 2); top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
animation: spinner-border 0.75s linear infinite; animation: spinner-border 0.75s linear infinite;
} }

10
core/scss/ui/_calendars.scss
View File

@@ -19,7 +19,7 @@
.calendar-header { .calendar-header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: start;
padding: 0.5rem 0; padding: 0.5rem 0;
} }
@@ -77,8 +77,8 @@
&:before { &:before {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; inset-inline-end: 0;
left: 0; inset-inline-start: 0;
height: 1.4rem; height: 1.4rem;
content: ''; content: '';
background: rgba(var(--#{$prefix}primary-rgb), 0.1); background: rgba(var(--#{$prefix}primary-rgb), 0.1);
@@ -95,10 +95,10 @@
} }
&.range-start:before { &.range-start:before {
left: 50%; inset-inline-start: 50%;
} }
&.range-end:before { &.range-end:before {
right: 50%; inset-inline-end: 50%;
} }
} }

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

@@ -34,11 +34,11 @@
--#{$prefix}stamp-size: 7rem; --#{$prefix}stamp-size: 7rem;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
width: calc(var(--#{$prefix}stamp-size) * 1); width: calc(var(--#{$prefix}stamp-size) * 1);
height: calc(var(--#{$prefix}stamp-size) * 1); height: calc(var(--#{$prefix}stamp-size) * 1);
max-height: 100%; max-height: 100%;
border-top-right-radius: $border-radius; border-start-end-radius: $border-radius;
opacity: $card-stamp-opacity; opacity: $card-stamp-opacity;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
@@ -59,7 +59,7 @@
height: calc(var(--#{$prefix}stamp-size) * 1); height: calc(var(--#{$prefix}stamp-size) * 1);
position: relative; position: relative;
top: calc(var(--#{$prefix}stamp-size) * -0.25); top: calc(var(--#{$prefix}stamp-size) * -0.25);
right: calc(var(--#{$prefix}stamp-size) * -0.25); inset-inline-end: calc(var(--#{$prefix}stamp-size) * -0.25);
font-size: calc(var(--#{$prefix}stamp-size) * 0.75); font-size: calc(var(--#{$prefix}stamp-size) * 0.75);
transform: rotate(10deg); transform: rotate(10deg);
@@ -84,7 +84,7 @@
.card-img-overlay { .card-img-overlay {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: end;
} }
.card-img-overlay-dark { .card-img-overlay-dark {
@@ -123,7 +123,7 @@
} }
& + & { & + & {
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
} }
} }
@@ -137,8 +137,8 @@ Stacked card
&:after { &:after {
position: absolute; position: absolute;
top: calc(-1 * var(--#{$prefix}card-stacked-offset)); top: calc(-1 * var(--#{$prefix}card-stacked-offset));
right: var(--#{$prefix}card-stacked-offset); inset-inline-end: var(--#{$prefix}card-stacked-offset);
left: var(--#{$prefix}card-stacked-offset); inset-inline-start: var(--#{$prefix}card-stacked-offset);
height: var(--#{$prefix}card-stacked-offset); height: var(--#{$prefix}card-stacked-offset);
content: ''; content: '';
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -155,9 +155,9 @@ Stacked card
&:before { &:before {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
content: ''; content: '';
background: rgba($dark, 0.48); background: rgba($dark, 0.48);
} }
@@ -176,7 +176,7 @@ Stacked card
.card-actions { .card-actions {
margin: -0.5rem -0.5rem -0.5rem auto; margin: -0.5rem -0.5rem -0.5rem auto;
padding-left: 0.5rem; padding-inline-start: 0.5rem;
a { a {
text-decoration: none; text-decoration: none;
@@ -359,15 +359,15 @@ Card optinos
*/ */
.card-options { .card-options {
top: 1.5rem; top: 1.5rem;
right: 0.75rem; inset-inline-end: 0.75rem;
display: flex; display: flex;
margin-left: auto; margin-inline-start: auto;
} }
.card-options-link { .card-options-link {
display: inline-block; display: inline-block;
min-width: 1rem; min-width: 1rem;
margin-left: 0.25rem; margin-inline-start: 0.25rem;
color: var(--#{$prefix}secondary); color: var(--#{$prefix}secondary);
} }
@@ -377,15 +377,15 @@ Card status
.card-status-top { .card-status-top {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
left: 0; inset-inline-start: 0;
height: $card-status-size; height: $card-status-size;
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0; border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
} }
.card-status-start { .card-status-start {
position: absolute; position: absolute;
right: auto; inset-inline-end: auto;
bottom: 0; bottom: 0;
width: $card-status-size; width: $card-status-size;
height: 100%; height: 100%;
@@ -411,13 +411,13 @@ Card table
td, td,
th { th {
&:first-child { &:first-child {
padding-left: $card-spacer-x; padding-inline-start: $card-spacer-x;
border-left: 0; border-inline-start: 0;
} }
&:last-child { &:last-child {
padding-right: $card-spacer-x; padding-inline-end: $card-spacer-x;
border-right: 0; border-inline-end: 0;
} }
} }
} }
@@ -428,11 +428,11 @@ Card table
&:last-child { &:last-child {
tr:last-child { tr:last-child {
> *:last-child { > *:last-child {
border-bottom-right-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width)); border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
} }
> *:first-child { > *:first-child {
border-bottom-left-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width)); border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
} }
} }
} }
@@ -502,8 +502,8 @@ Card chart
Card avatar Card avatar
*/ */
.card-avatar { .card-avatar {
margin-left: auto; margin-inline-start: auto;
margin-right: auto; margin-inline-end: auto;
box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5)); margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5));
} }
@@ -517,10 +517,10 @@ Card list group
} }
.list-group-item { .list-group-item {
padding-right: $card-spacer-x; padding-inline-end: $card-spacer-x;
padding-left: $card-spacer-x; padding-inline-start: $card-spacer-x;
border-right: 0; border-inline-end: 0;
border-left: 0; border-inline-start: 0;
border-radius: 0; border-radius: 0;
&:last-child { &:last-child {
@@ -561,18 +561,18 @@ Card list group
.nav-item { .nav-item {
&:not(:first-child) { &:not(:first-child) {
.nav-link { .nav-link {
border-top-left-radius: 0; border-start-start-radius: 0;
} }
} }
&:not(:last-child) { &:not(:last-child) {
.nav-link { .nav-link {
border-top-right-radius: 0; border-start-end-radius: 0;
} }
} }
+ .nav-item { + .nav-item {
margin-left: calc(-1 * #{$card-border-width}); margin-inline-start: calc(-1 * #{$card-border-width});
} }
} }
} }
@@ -598,22 +598,22 @@ Card list group
} }
&:not(:first-child) .nav-link { &:not(:first-child) .nav-link {
border-bottom-left-radius: 0; border-end-start-radius: 0;
} }
&:not(:last-child) .nav-link { &:not(:last-child) .nav-link {
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
} }
} }
.card { .card {
border-bottom-left-radius: 0; border-end-start-radius: 0;
} }
.nav-tabs + .tab-content .card { .nav-tabs + .tab-content .card {
border-bottom-left-radius: var(--#{$prefix}card-border-radius); border-end-start-radius: var(--#{$prefix}card-border-radius);
border-top-left-radius: 0; border-start-start-radius: 0;
} }
} }

10
core/scss/ui/_carousel.scss
View File

@@ -2,7 +2,7 @@
} }
.carousel-indicators-vertical { .carousel-indicators-vertical {
left: auto; inset-inline-start: auto;
top: 0; top: 0;
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
flex-direction: column; flex-direction: column;
@@ -12,8 +12,8 @@
width: $carousel-indicator-height; width: $carousel-indicator-height;
height: $carousel-indicator-width; height: $carousel-indicator-width;
border: 0; border: 0;
border-left: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent; border-inline-start: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
border-right: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent; border-inline-end: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
} }
} }
@@ -59,8 +59,8 @@
.carousel-caption-background { .carousel-caption-background {
background: red; background: red;
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
height: 90%; height: 90%;
background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0)); background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));

4
core/scss/ui/_charts.scss
View File

@@ -45,9 +45,9 @@ Chart sparkline
.chart-sparkline-label { .chart-sparkline-label {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

10
core/scss/ui/_dropdowns.scss
View File

@@ -74,7 +74,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: -0.25rem; top: -0.25rem;
left: 0.75rem; inset-inline-start: 0.75rem;
display: block; display: block;
background: inherit; background: inherit;
width: 14px; width: 14px;
@@ -90,8 +90,8 @@
&.dropdown-menu-end { &.dropdown-menu-end {
&:before { &:before {
right: 0.75rem; inset-inline-end: 0.75rem;
left: auto; inset-inline-start: auto;
} }
} }
} }
@@ -99,12 +99,12 @@
.dropend { .dropend {
> .dropdown-menu { > .dropdown-menu {
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px); margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
margin-left: -0.25rem; margin-inline-start: -0.25rem;
} }
.dropdown-toggle { .dropdown-toggle {
&:after { &:after {
margin-left: auto; margin-inline-start: auto;
} }
} }
} }

20
core/scss/ui/_forms.scss
View File

@@ -15,14 +15,14 @@ Form label
&.required { &.required {
&:after { &:after {
content: '*'; content: '*';
margin-left: 0.25rem; margin-inline-start: 0.25rem;
color: $red; color: $red;
} }
} }
} }
.form-label-description { .form-label-description {
float: right; float: inline-end;
font-weight: var(--#{$prefix}font-weight-normal); font-weight: var(--#{$prefix}font-weight-normal);
color: $form-secondary-color; color: $form-secondary-color;
} }
@@ -196,11 +196,11 @@ Input group
} }
&:not(:last-child) { &:not(:last-child) {
border-right: 0; border-inline-end: 0;
} }
&:not(:first-child) { &:not(:first-child) {
border-left: 0; border-inline-start: 0;
} }
} }
@@ -210,13 +210,13 @@ Input group
@include transition($input-transition); @include transition($input-transition);
&:first-child { &:first-child {
padding-right: 0; padding-inline-end: 0;
border-right: 0; border-inline-end: 0;
} }
&:last-child { &:last-child {
padding-left: 0; padding-inline-start: 0;
border-left: 0; border-inline-start: 0;
} }
} }
} }
@@ -225,8 +225,8 @@ Input group
Upload files Upload files
*/ */
.form-file-button { .form-file-button {
margin-left: 0; margin-inline-start: 0;
border-left: 0; border-inline-start: 0;
} }
/** /**

16
core/scss/ui/_grid.scss
View File

@@ -5,7 +5,7 @@
} }
.col-separator { .col-separator {
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
} }
.container { .container {
@@ -19,13 +19,13 @@
@each $name, $value in (0: 0, sm: 0.375rem, md: 1.5rem, lg: 3rem) { @each $name, $value in (0: 0, sm: 0.375rem, md: 1.5rem, lg: 3rem) {
.row-#{$name} { .row-#{$name} {
margin-right: calc(-1 * $value); margin-inline-end: calc(-1 * $value);
margin-left: calc(-1 * $value); margin-inline-start: calc(-1 * $value);
> .col, > .col,
> [class*='col-'] { > [class*='col-'] {
padding-right: $value; padding-inline-end: $value;
padding-left: $value; padding-inline-start: $value;
} }
.card { .card {
@@ -106,15 +106,15 @@
.divide-x#{$name-prefixed} { .divide-x#{$name-prefixed} {
> :not(template) ~ :not(template) { > :not(template) ~ :not(template) {
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important; border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
} }
> :not(template):not(:first-child) { > :not(template):not(:first-child) {
padding-left: $size !important; padding-inline-start: $size !important;
} }
> :not(template):not(:last-child) { > :not(template):not(:last-child) {
padding-right: $size !important; padding-inline-end: $size !important;
} }
} }
} }

10
core/scss/ui/_lists.scss
View File

@@ -1,6 +1,6 @@
.list-group { .list-group {
margin-left: 0; margin-inline-start: 0;
margin-right: 0; margin-inline-end: 0;
} }
.list-group-header { .list-group-header {
@@ -26,8 +26,8 @@
.list-group-item.active { .list-group-item.active {
background-color: $dropdown-link-hover-bg; background-color: $dropdown-link-hover-bg;
border-left-color: $component-active-bg; border-inline-start-color: $component-active-bg;
border-left-width: $border-width-wide; border-inline-start-width: $border-width-wide;
} }
.list-group-item { .list-group-item {
@@ -110,7 +110,7 @@ Inline list
} }
.list-inline-item:not(:last-child) { .list-inline-item:not(:last-child) {
margin-right: auto; margin-inline-end: auto;
margin-inline-end: $list-inline-padding; margin-inline-end: $list-inline-padding;
} }

8
core/scss/ui/_loaders.scss
View File

@@ -9,14 +9,14 @@
&:after { &:after {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
content: ''; content: '';
border: 1px var(--#{$prefix}border-style); border: 1px var(--#{$prefix}border-style);
border-color: transparent; border-color: transparent;
border-top-color: currentColor; border-top-color: currentColor;
border-left-color: currentColor; border-inline-start-color: currentColor;
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
animation: rotate-360 0.6s linear; animation: rotate-360 0.6s linear;
@@ -33,8 +33,8 @@ Dimmer
.loader { .loader {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; inset-inline-end: 0;
left: 0; inset-inline-start: 0;
display: none; display: none;
margin: 0 auto; margin: 0 auto;
transform: translateY(-50%); transform: translateY(-50%);

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

@@ -3,7 +3,7 @@
> .btn-close { > .btn-close {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
width: $modal-header-height; width: $modal-header-height;
height: $modal-header-height; height: $modal-header-height;
margin: 0; margin: 0;
@@ -27,8 +27,8 @@
.modal-status { .modal-status {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
height: $modal-status-size; height: $modal-status-size;
background: var(--#{$prefix}secondary); background: var(--#{$prefix}secondary);
border-radius: $modal-content-border-radius $modal-content-border-radius 0 0; border-radius: $modal-content-border-radius $modal-content-border-radius 0 0;

16
core/scss/ui/_nav.scss
View File

@@ -10,9 +10,9 @@
} }
.nav { .nav {
margin-left: 1.25rem; margin-inline-start: 1.25rem;
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
padding-left: 0.5rem; padding-inline-start: 0.5rem;
} }
.nav-link.active, .nav-link.active,
@@ -34,13 +34,13 @@
.nav-item { .nav-item {
+ .nav-item { + .nav-item {
margin-left: $nav-bordered-margin-x; margin-inline-start: $nav-bordered-margin-x;
} }
} }
.nav-link { .nav-link {
padding-left: 0; padding-inline-start: 0;
padding-right: 0; padding-inline-end: 0;
margin: 0 0 calc(-1 * #{$nav-bordered-border-width}); margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
border: 0; border: 0;
border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent; border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
@@ -75,7 +75,7 @@
} }
.nav-link-toggle { .nav-link-toggle {
margin-left: auto; margin-inline-start: auto;
padding: 0 0.25rem; padding: 0 0.25rem;
@include transition(transform $transition-time); @include transition(transform $transition-time);
@include caret(); @include caret();
@@ -92,7 +92,7 @@
.nav-link-icon { .nav-link-icon {
width: $nav-link-icon-size; width: $nav-link-icon-size;
height: $nav-link-icon-size; height: $nav-link-icon-size;
margin-right: 0.5rem; margin-inline-end: 0.5rem;
color: $nav-link-icon-color; color: $nav-link-icon-color;
svg { svg {

10
core/scss/ui/_pagination.scss
View File

@@ -20,8 +20,8 @@
} }
.page-text { .page-text {
padding-left: 0.5rem; padding-inline-start: 0.5rem;
padding-right: 0.5rem; padding-inline-end: 0.5rem;
} }
.page-item { .page-item {
@@ -30,12 +30,12 @@
&.page-prev, &.page-prev,
&.page-next { &.page-next {
flex: 0 0 50%; flex: 0 0 50%;
text-align: left; text-align: start;
} }
&.page-next { &.page-next {
margin-left: auto; margin-inline-start: auto;
text-align: right; text-align: end;
} }
} }

18
core/scss/ui/_progress.scss
View File

@@ -1,13 +1,13 @@
@keyframes progress-indeterminate { @keyframes progress-indeterminate {
0% { 0% {
right: 100%; inset-inline-end: 100%;
left: -35%; inset-inline-start: -35%;
} }
100%, 100%,
60% { 60% {
right: -90%; inset-inline-end: -90%;
left: 100%; inset-inline-start: 100%;
} }
} }
@@ -64,7 +64,7 @@ Progress bar
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
content: ''; content: '';
background-color: inherit; background-color: inherit;
will-change: left, right; will-change: left, right;
@@ -99,9 +99,9 @@ Progressbg
.progressbg-progress { .progressbg-progress {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
z-index: 0; z-index: 0;
height: 100%; height: 100%;
background: transparent; background: transparent;
@@ -110,8 +110,8 @@ Progressbg
.progressbg-value { .progressbg-value {
font-weight: var(--#{$prefix}font-weight-medium); font-weight: var(--#{$prefix}font-weight-medium);
margin-left: auto; margin-inline-start: auto;
padding-left: 2rem; padding-inline-start: 2rem;
} }
/** /**

58
core/scss/ui/_ribbons.scss
View File

@@ -5,7 +5,7 @@
--#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius}; --#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
position: absolute; position: absolute;
top: 0.75rem; top: 0.75rem;
right: calc(-1 * var(--#{$prefix}ribbon-margin)); inset-inline-end: calc(-1 * var(--#{$prefix}ribbon-margin));
z-index: 1; z-index: 1;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
font-size: $card-ribbon-font-size; font-size: $card-ribbon-font-size;
@@ -25,7 +25,7 @@
&:before { &:before {
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
bottom: 100%; bottom: 100%;
width: 0; width: 0;
height: 0; height: 0;
@@ -34,7 +34,7 @@
border: calc(var(--#{$prefix}ribbon-margin) * 0.5) var(--#{$prefix}border-style); border: calc(var(--#{$prefix}ribbon-margin) * 0.5) var(--#{$prefix}border-style);
border-color: inherit; border-color: inherit;
border-top-color: transparent; border-top-color: transparent;
border-right-color: transparent; border-inline-end-color: transparent;
} }
@if $enable-extra-colors { @if $enable-extra-colors {
@@ -58,44 +58,44 @@
.ribbon-top { .ribbon-top {
top: calc(-1 * var(--#{$prefix}ribbon-margin)); top: calc(-1 * var(--#{$prefix}ribbon-margin));
right: 0.75rem; inset-inline-end: 0.75rem;
width: 2rem; width: 2rem;
padding: 0.5rem 0; padding: 0.5rem 0;
border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius); border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
&:before { &:before {
top: 0; top: 0;
right: 100%; inset-inline-end: 100%;
bottom: auto; bottom: auto;
border-color: inherit; border-color: inherit;
border-top-color: transparent; border-top-color: transparent;
border-left-color: transparent; border-inline-start-color: transparent;
} }
&.ribbon-start { &.ribbon-start {
right: auto; inset-inline-end: auto;
left: 0.75rem; inset-inline-start: 0.75rem;
&:before { &:before {
top: 0; top: 0;
right: 100%; inset-inline-end: 100%;
left: auto; inset-inline-start: auto;
} }
} }
} }
.ribbon-start { .ribbon-start {
right: auto; inset-inline-end: auto;
left: calc(-1 * var(--#{$prefix}ribbon-margin)); inset-inline-start: calc(-1 * var(--#{$prefix}ribbon-margin));
border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius); border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
&:before { &:before {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
left: 0; inset-inline-start: 0;
border-color: inherit; border-color: inherit;
border-top-color: transparent; border-top-color: transparent;
border-left-color: transparent; border-inline-start-color: transparent;
} }
} }
@@ -105,47 +105,47 @@
} }
.ribbon-bookmark { .ribbon-bookmark {
padding-left: 0.25rem; padding-inline-start: 0.25rem;
border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0; border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0;
&:after { &:after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 100%; inset-inline-end: 100%;
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
content: ''; content: '';
border: 1rem var(--#{$prefix}border-style); border: 1rem var(--#{$prefix}border-style);
border-color: inherit; border-color: inherit;
border-right-width: 0; border-inline-end-width: 0;
border-left-color: transparent; border-inline-start-color: transparent;
border-left-width: 0.5rem; border-inline-start-width: 0.5rem;
} }
&.ribbon-left { &.ribbon-left {
padding-right: 0.5rem; padding-inline-end: 0.5rem;
&:after { &:after {
right: auto; inset-inline-end: auto;
left: 100%; inset-inline-start: 100%;
border-right-color: transparent; border-inline-end-color: transparent;
border-right-width: 0.5rem; border-inline-end-width: 0.5rem;
border-left-width: 0; border-inline-start-width: 0;
} }
} }
&.ribbon-top { &.ribbon-top {
padding-right: 0; padding-inline-end: 0;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
padding-left: 0; padding-inline-start: 0;
border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0; border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0;
&:after { &:after {
top: 100%; top: 100%;
right: 0; inset-inline-end: 0;
left: 0; inset-inline-start: 0;
border-color: inherit; border-color: inherit;
border-width: 1rem; border-width: 1rem;
border-top-width: 0; border-top-width: 0;

2
core/scss/ui/_segmented.scss
View File

@@ -79,7 +79,7 @@
flex-direction: column; flex-direction: column;
.nav-link { .nav-link {
justify-content: flex-start; justify-content: start;
} }
} }

2
core/scss/ui/_stars.scss
View File

@@ -4,6 +4,6 @@
font-size: $h5-font-size; font-size: $h5-font-size;
.star:not(:first-child) { .star:not(:first-child) {
margin-left: 0.25rem; margin-inline-start: 0.25rem;
} }
} }

2
core/scss/ui/_status.scss
View File

@@ -123,7 +123,7 @@
.status-indicator-circle { .status-indicator-circle {
--#{$prefix}status-circle-size: 0.75rem; --#{$prefix}status-circle-size: 0.75rem;
position: absolute; position: absolute;
left: 50%; inset-inline-start: 50%;
top: 50%; top: 50%;
margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2); margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
width: var(--#{$prefix}status-circle-size); width: var(--#{$prefix}status-circle-size);

12
core/scss/ui/_steps.scss
View File

@@ -52,7 +52,7 @@
&:not(:last-child):after { &:not(:last-child):after {
position: absolute; position: absolute;
left: 50%; inset-inline-start: 50%;
width: 100%; width: 100%;
content: ''; content: '';
transform: translateY(-50%); transform: translateY(-50%);
@@ -67,7 +67,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; inset-inline-start: 50%;
z-index: 1; z-index: 1;
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
@@ -126,9 +126,9 @@
} }
.step-item { .step-item {
text-align: left; text-align: start;
padding-top: 0; padding-top: 0;
padding-left: calc(var(--#{$prefix}steps-dot-size) + 1rem); padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + 1rem);
min-height: auto; min-height: auto;
&:not(:first-child) { &:not(:first-child) {
@@ -137,7 +137,7 @@
&:before { &:before {
top: var(--#{$prefix}steps-dot-offset); top: var(--#{$prefix}steps-dot-offset);
left: 0; inset-inline-start: 0;
transform: translate(0, 0); transform: translate(0, 0);
} }
@@ -147,7 +147,7 @@
content: ''; content: '';
transform: translateX(-50%); transform: translateX(-50%);
top: var(--#{$prefix}steps-dot-offset); top: var(--#{$prefix}steps-dot-offset);
left: 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);
height: calc(100% + 1rem); height: calc(100% + 1rem);
} }

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

@@ -39,7 +39,7 @@
.switch-icon-b { .switch-icon-b {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
opacity: 0; opacity: 0;
} }

2
core/scss/ui/_tables.scss
View File

@@ -125,7 +125,7 @@ Table sort
vertical-align: bottom; vertical-align: bottom;
mask-image: $table-sort-bg-image; mask-image: $table-sort-bg-image;
background: currentColor; background: currentColor;
margin-left: 0.25rem; margin-inline-start: 0.25rem;
} }
&.asc:after { &.asc:after {

10
core/scss/ui/_tags.scss
View File

@@ -11,8 +11,8 @@
gap: 0.5rem; gap: 0.5rem;
.btn-close { .btn-close {
margin-right: -0.25rem; margin-inline-end: -0.25rem;
margin-left: -0.125rem; margin-inline-start: -0.125rem;
padding: 0; padding: 0;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@@ -24,7 +24,7 @@
--#{$prefix}badge-font-size: #{$h6-font-size}; --#{$prefix}badge-font-size: #{$h6-font-size};
--#{$prefix}badge-padding-x: 0.25rem; --#{$prefix}badge-padding-x: 0.25rem;
--#{$prefix}badge-padding-y: 0.125rem; --#{$prefix}badge-padding-y: 0.125rem;
margin-right: -0.25rem; margin-inline-end: -0.25rem;
} }
.tag-avatar, .tag-avatar,
@@ -32,12 +32,12 @@
.tag-payment, .tag-payment,
.tag-icon, .tag-icon,
.tag-check { .tag-check {
margin-left: -0.25rem; margin-inline-start: -0.25rem;
} }
.tag-icon { .tag-icon {
color: var(--#{$prefix}secondary); color: var(--#{$prefix}secondary);
margin-right: -0.125rem; margin-inline-end: -0.125rem;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }

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

@@ -21,7 +21,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: var(--#{$prefix}timeline-icon-size); top: var(--#{$prefix}timeline-icon-size);
left: calc(var(--#{$prefix}timeline-icon-size) / 2); inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
bottom: calc(-1 * var(--#{$prefix}page-padding)); bottom: calc(-1 * var(--#{$prefix}page-padding));
width: var(--#{$prefix}border-width); width: var(--#{$prefix}border-width);
background-color: var(--#{$prefix}border-color); background-color: var(--#{$prefix}border-color);
@@ -44,7 +44,7 @@
} }
.timeline-event-card { .timeline-event-card {
margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding)); margin-inline-start: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding));
} }
// //
@@ -56,6 +56,6 @@
} }
.timeline-event-card { .timeline-event-card {
margin-left: 0; margin-inline-start: 0;
} }
} }

18
core/scss/ui/_type.scss
View File

@@ -83,7 +83,7 @@ b {
blockquote { blockquote {
padding: 1rem 1rem 1rem; padding: 1rem 1rem 1rem;
border-left: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color); border-inline-start: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
p { p {
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -91,7 +91,7 @@ blockquote {
cite { cite {
display: block; display: block;
text-align: right; text-align: end;
&:before { &:before {
content: '— '; content: '— ';
@@ -101,7 +101,7 @@ blockquote {
ul, ul,
ol { ol {
padding-left: 1.5rem; padding-inline-start: 1.5rem;
} }
hr { hr {
@@ -163,7 +163,7 @@ img {
} }
.list-unstyled { .list-unstyled {
margin-left: 0; margin-inline-start: 0;
} }
/** /**
@@ -258,7 +258,7 @@ Mentions
.mention-count { .mention-count {
color: var(--#{$prefix}secondary); color: var(--#{$prefix}secondary);
margin-left: calc(8em / 12); margin-inline-start: calc(8em / 12);
} }
$text-variants: ( $text-variants: (
@@ -279,10 +279,10 @@ $text-variants: (
.steps { .steps {
--#{$prefix}steps-padding: 2rem; --#{$prefix}steps-padding: 2rem;
--#{$prefix}steps-item-size: 1.5rem; --#{$prefix}steps-item-size: 1.5rem;
margin-left: 1rem; margin-inline-start: 1rem;
padding-left: var(--#{$prefix}steps-padding); padding-inline-start: var(--#{$prefix}steps-padding);
counter-reset: step; counter-reset: step;
border-left: 1px solid var(--#{$prefix}border-color); border-inline-start: 1px solid var(--#{$prefix}border-color);
margin-bottom: 2rem; margin-bottom: 2rem;
h3 { h3 {
@@ -297,7 +297,7 @@ $text-variants: (
display: inline-block; display: inline-block;
position: absolute; position: absolute;
margin-top: 1px; margin-top: 1px;
margin-left: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2); margin-inline-start: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2);
width: var(--#{$prefix}steps-item-size); width: var(--#{$prefix}steps-item-size);
height: var(--#{$prefix}steps-item-size); height: var(--#{$prefix}steps-item-size);
text-align: center; text-align: center;

6
core/scss/ui/forms/_form-check.scss
View File

@@ -37,7 +37,7 @@ Form check
&.required { &.required {
&:after { &:after {
content: '*'; content: '*';
margin-left: 0.25rem; margin-inline-start: 0.25rem;
color: $red; color: $red;
} }
} }
@@ -69,14 +69,14 @@ Form switch
} }
.form-switch-lg { .form-switch-lg {
padding-left: 3.5rem; padding-inline-start: 3.5rem;
min-height: 1.5rem; min-height: 1.5rem;
.form-check-input { .form-check-input {
height: 1.5rem; height: 1.5rem;
width: 2.75rem; width: 2.75rem;
background-size: 1.5rem; background-size: 1.5rem;
margin-left: -3.5rem; margin-inline-start: -3.5rem;
} }
.form-check-label { .form-check-label {

2
core/scss/ui/forms/_form-colorinput.scss
View File

@@ -27,7 +27,7 @@ Color Input
&:before { &:before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
content: ''; content: '';

10
core/scss/ui/forms/_form-icon.scss
View File

@@ -6,12 +6,12 @@ Icon input
.form-control:not(:last-child), .form-control:not(:last-child),
.form-select:not(:last-child) { .form-select:not(:last-child) {
padding-right: 2.5rem; padding-inline-end: 2.5rem;
} }
.form-control:not(:first-child), .form-control:not(:first-child),
.form-select:not(:last-child) { .form-select:not(:last-child) {
padding-left: 2.5rem; padding-inline-start: 2.5rem;
} }
} }
@@ -19,7 +19,7 @@ Icon input
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
z-index: 10; z-index: 10;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -31,7 +31,7 @@ Icon input
font-size: 1.2em; font-size: 1.2em;
&:last-child { &:last-child {
right: 0; inset-inline-end: 0;
left: auto; inset-inline-start: auto;
} }
} }

10
core/scss/ui/forms/_form-imagecheck.scss
View File

@@ -34,7 +34,7 @@ Image check
&:before { &:before {
position: absolute; position: absolute;
top: 0.25rem; top: 0.25rem;
left: 0.25rem; inset-inline-start: 0.25rem;
z-index: 1; z-index: 1;
display: block; display: block;
width: $form-check-input-width; width: $form-check-input-width;
@@ -74,13 +74,13 @@ Image check
@include transition(opacity $transition-time); @include transition(opacity $transition-time);
&:first-child { &:first-child {
border-top-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px); border-start-start-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
border-top-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px); border-start-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
} }
&:last-child { &:last-child {
border-bottom-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px); border-end-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
border-bottom-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px); border-end-start-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
} }
.form-imagecheck:hover &, .form-imagecheck:hover &,

8
core/scss/ui/forms/_form-selectgroup.scss
View File

@@ -24,7 +24,7 @@ Select group
.form-selectgroup-input { .form-selectgroup-input {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: -1; z-index: -1;
opacity: 0; opacity: 0;
} }
@@ -92,7 +92,7 @@ Select group
.form-selectgroup-check-floated { .form-selectgroup-check-floated {
position: absolute; position: absolute;
top: $input-btn-padding-y; top: $input-btn-padding-y;
right: $input-btn-padding-y; inset-inline-end: $input-btn-padding-y;
} }
.form-selectgroup-input:checked + .form-selectgroup-label { .form-selectgroup-input:checked + .form-selectgroup-label {
@@ -117,7 +117,7 @@ Alternate version of form select group
*/ */
.form-selectgroup-boxes { .form-selectgroup-boxes {
.form-selectgroup-label { .form-selectgroup-label {
text-align: left; text-align: start;
padding: $card-spacer-x $card-spacer-y; padding: $card-spacer-x $card-spacer-y;
color: inherit; color: inherit;
} }
@@ -142,7 +142,7 @@ Select group
*/ */
.form-selectgroup-pills { .form-selectgroup-pills {
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: start;
.form-selectgroup-item { .form-selectgroup-item {
flex-grow: 0; flex-grow: 0;

16
core/scss/ui/typo/_hr.scss
View File

@@ -24,17 +24,17 @@ Hr text
&:before { &:before {
content: ''; content: '';
margin-right: 0.5rem; margin-inline-end: 0.5rem;
} }
&:after { &:after {
content: ''; content: '';
margin-left: 0.5rem; margin-inline-start: 0.5rem;
} }
> *:first-child { > *:first-child {
padding-right: 0.5rem; padding-inline-end: 0.5rem;
padding-left: 0; padding-inline-start: 0;
color: var(--#{$prefix}secondary); color: var(--#{$prefix}secondary);
} }
@@ -45,8 +45,8 @@ Hr text
} }
& > *:first-child { & > *:first-child {
padding-right: 0.5rem; padding-inline-end: 0.5rem;
padding-left: 0.5rem; padding-inline-start: 0.5rem;
} }
} }
@@ -61,8 +61,8 @@ Hr text
} }
& > *:first-child { & > *:first-child {
padding-right: 0; padding-inline-end: 0;
padding-left: 0.5rem; padding-inline-start: 0.5rem;
} }
} }

6
core/scss/vendor/_coloris.scss vendored
View File

@@ -53,8 +53,8 @@ input.clr-color {
button { button {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
left: 6px; inset-inline-start: 6px;
right: auto; inset-inline-end: auto;
border-radius: var(--#{$prefix}border-radius); border-radius: var(--#{$prefix}border-radius);
&:after { &:after {
@@ -67,6 +67,6 @@ input.clr-color {
} }
input { input {
padding-left: 2.5rem; padding-inline-start: 2.5rem;
} }
} }

2
core/scss/vendor/_nouislider.scss vendored
View File

@@ -34,7 +34,7 @@
width: $form-range-thumb-width; width: $form-range-thumb-width;
height: $form-range-thumb-height; height: $form-range-thumb-height;
top: calc($form-range-thumb-height * -0.5); top: calc($form-range-thumb-height * -0.5);
right: calc($form-range-thumb-height * -0.5); inset-inline-end: calc($form-range-thumb-height * -0.5);
margin: 1px 1px 0 0; margin: 1px 1px 0 0;
} }