mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Update SCSS to use logical properties (#2537)
This commit is contained in:
Paweł Kuna
GitHub
5
.changeset/funny-kings-double.md
Normal file
5
.changeset/funny-kings-double.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Update SCSS to use logical properties
|
||||
@@ -14,13 +14,13 @@
|
||||
width: $caret-width;
|
||||
height: $caret-width;
|
||||
border-bottom: 1px var(--#{$prefix}border-style);
|
||||
border-left: 1px var(--#{$prefix}border-style);
|
||||
margin-right: 0.1em;
|
||||
border-inline-start: 1px var(--#{$prefix}border-style);
|
||||
margin-inline-end: 0.1em;
|
||||
|
||||
@if $direction != 'left' {
|
||||
margin-left: $caret-spacing;
|
||||
margin-inline-start: $caret-spacing;
|
||||
} @else {
|
||||
margin-right: $caret-spacing;
|
||||
margin-inline-end: $caret-spacing;
|
||||
}
|
||||
|
||||
@if $direction == down {
|
||||
|
||||
@@ -12,7 +12,7 @@ $utilities: (
|
||||
),
|
||||
'margin-x': (
|
||||
responsive: true,
|
||||
property: margin-right margin-left,
|
||||
property: margin-inline-end margin-inline-start,
|
||||
class: mx,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
@@ -30,7 +30,7 @@ $utilities: (
|
||||
),
|
||||
'margin-end': (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
property: margin-inline-end,
|
||||
class: me,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
@@ -42,7 +42,7 @@ $utilities: (
|
||||
),
|
||||
'margin-start': (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
property: margin-inline-start,
|
||||
class: ms,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
@@ -55,7 +55,7 @@ $utilities: (
|
||||
),
|
||||
'negative-margin-x': (
|
||||
responsive: true,
|
||||
property: margin-right margin-left,
|
||||
property: margin-inline-end margin-inline-start,
|
||||
class: mx,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
@@ -73,7 +73,7 @@ $utilities: (
|
||||
),
|
||||
'negative-margin-end': (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
property: margin-inline-end,
|
||||
class: me,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
@@ -85,7 +85,7 @@ $utilities: (
|
||||
),
|
||||
'negative-margin-start': (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
property: margin-inline-start,
|
||||
class: ms,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
@@ -98,7 +98,7 @@ $utilities: (
|
||||
),
|
||||
'padding-x': (
|
||||
responsive: true,
|
||||
property: padding-right padding-left,
|
||||
property: padding-inline-end padding-inline-start,
|
||||
class: px,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
@@ -116,7 +116,7 @@ $utilities: (
|
||||
),
|
||||
'padding-end': (
|
||||
responsive: true,
|
||||
property: padding-right,
|
||||
property: padding-inline-end,
|
||||
class: pe,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
@@ -128,7 +128,7 @@ $utilities: (
|
||||
),
|
||||
'padding-start': (
|
||||
responsive: true,
|
||||
property: padding-left,
|
||||
property: padding-inline-start,
|
||||
class: ps,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
|
||||
@@ -164,7 +164,7 @@ $utilities: (
|
||||
),
|
||||
'border-end': (
|
||||
class: border-end,
|
||||
property: border-right,
|
||||
property: border-inline-end,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-bottom': (
|
||||
@@ -173,12 +173,12 @@ $utilities: (
|
||||
),
|
||||
'border-start': (
|
||||
class: border-start,
|
||||
property: border-left,
|
||||
property: border-inline-start,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-x': (
|
||||
class: border-x,
|
||||
property: border-left border-right,
|
||||
property: border-inline-start border-inline-end,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-y': (
|
||||
|
||||
@@ -33,9 +33,9 @@
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
}
|
||||
@@ -74,16 +74,16 @@
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
@@ -119,10 +119,10 @@
|
||||
content: '';
|
||||
}
|
||||
|
||||
> * {
|
||||
>* {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -61,8 +61,8 @@ body {
|
||||
}
|
||||
|
||||
> .navbar:first-child {
|
||||
border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,12 +11,12 @@
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
|
||||
.nav-link {
|
||||
padding: 0.5rem calc(#{$container-padding-x} / 2);
|
||||
justify-content: flex-start;
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
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;
|
||||
|
||||
&.disabled {
|
||||
@@ -54,22 +54,22 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem);
|
||||
padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle:after {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.nav-item.active:after {
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 3px;
|
||||
right: auto;
|
||||
border-inline-start-width: 3px;
|
||||
inset-inline-end: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -118,7 +118,7 @@ Navbar
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
@@ -151,8 +151,8 @@ Navbar
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: -0.25rem;
|
||||
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
|
||||
border-bottom-width: 2px;
|
||||
@@ -171,7 +171,7 @@ Navbar
|
||||
&.navbar-vertical {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-left: $sidebar-width;
|
||||
margin-inline-start: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -179,8 +179,8 @@ Navbar
|
||||
&.navbar-vertical.navbar-end {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-left: 0;
|
||||
margin-right: $sidebar-width;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -235,7 +235,7 @@ Navbar toggler
|
||||
border-radius: inherit;
|
||||
background: inherit;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
@include transition(inherit);
|
||||
}
|
||||
|
||||
@@ -313,18 +313,18 @@ Navbar vertical
|
||||
width: $sidebar-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-fixed;
|
||||
align-items: flex-start;
|
||||
align-items: start;
|
||||
overflow-y: scroll;
|
||||
padding: 0;
|
||||
@include transition(transform $transition-time);
|
||||
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
left: auto;
|
||||
right: 0;
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@@ -351,23 +351,23 @@ Navbar vertical
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
min-height: 100%;
|
||||
justify-content: flex-start;
|
||||
justify-content: start;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
~ .page {
|
||||
padding-left: $sidebar-width;
|
||||
padding-inline-start: $sidebar-width;
|
||||
|
||||
[class^='container'] {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
padding-inline-start: 1.5rem;
|
||||
padding-inline-end: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right ~ .page,
|
||||
&.navbar-end ~ .page {
|
||||
padding-left: 0;
|
||||
padding-right: $sidebar-width;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: $sidebar-width;
|
||||
}
|
||||
|
||||
@include navbar-vertical-nav;
|
||||
@@ -384,8 +384,8 @@ Navbar vertical
|
||||
height: $navbar-overlap-height;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
box-shadow: inherit;
|
||||
|
||||
@@ -67,8 +67,8 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
background-image: $overlay-gradient;
|
||||
}
|
||||
@@ -110,7 +110,7 @@
|
||||
svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,8 +139,8 @@
|
||||
.page-cover-img {
|
||||
position: absolute;
|
||||
top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
left: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
inset-inline-start: 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));
|
||||
pointer-events: none;
|
||||
filter: blur(var(--#{$prefix}page-cover-blur));
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
height: 100%;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-left: calc(100vw - 100%);
|
||||
margin-right: 0;
|
||||
margin-inline-start: calc(100vw - 100%);
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
.browser-dots {
|
||||
margin-right: 3rem;
|
||||
margin-inline-end: 3rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
.browser-dot {
|
||||
margin-right: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
width: 0.75rem;
|
||||
min-width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
|
||||
@@ -60,10 +60,10 @@ $pricing-card-width: 22rem;
|
||||
.pricing-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
transform: translateY(-50%);
|
||||
vertical-align: bottom;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -86,7 +86,7 @@ $pricing-card-width: 22rem;
|
||||
.pricing-price-currency {
|
||||
font-size: $h2-font-size;
|
||||
line-height: 1.5;
|
||||
margin-right: 0.25rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
@@ -96,14 +96,14 @@ $pricing-card-width: 22rem;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-secondary;
|
||||
align-self: center;
|
||||
margin-left: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.pricing-features {
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
|
||||
> li:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
color: var(--#{$prefix}accordion-btn-color);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
overflow-anchor: none;
|
||||
@@ -79,8 +79,8 @@
|
||||
display: flex;
|
||||
line-height: 1;
|
||||
transition: $transition-time transform;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: 0;
|
||||
color: var(--#{$prefix}secondary);
|
||||
width: var(--#{$prefix}accordion-btn-toggle-width);
|
||||
height: var(--#{$prefix}accordion-btn-toggle-width);
|
||||
@@ -141,8 +141,8 @@
|
||||
|
||||
.accordion-flush {
|
||||
> .accordion-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-inline-end: 0;
|
||||
border-inline-start: 0;
|
||||
@include border-radius(0);
|
||||
|
||||
&:first-child {
|
||||
@@ -172,6 +172,6 @@
|
||||
.accordion-inverted {
|
||||
.accordion-button-toggle {
|
||||
order: -1;
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,12 +61,12 @@
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: 3rem; //todo: use variable
|
||||
padding-inline-end: 3rem; //todo: use variable
|
||||
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
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;
|
||||
padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
border-radius: $border-radius-pill;
|
||||
box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
|
||||
@@ -96,7 +96,7 @@
|
||||
--#{$prefix}list-gap: 0;
|
||||
|
||||
.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:
|
||||
var(--#{$prefix}avatar-box-shadow),
|
||||
0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
|
||||
@@ -147,7 +147,7 @@
|
||||
width: var(--#{$prefix}avatar-brand-size);
|
||||
height: var(--#{$prefix}avatar-brand-size);
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
inset-inline-end: -2px;
|
||||
bottom: -2px;
|
||||
z-index: 1000;
|
||||
background: var(--#{$prefix}bg-surface);
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
.badge-notification {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
inset-inline-end: 0 !important;
|
||||
transform: translate(50%, -50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -60,11 +60,11 @@
|
||||
}
|
||||
|
||||
& + & {
|
||||
padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
float: inline-start;
|
||||
padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
color: var(--#{$prefix}breadcrumb-divider-color);
|
||||
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
|
||||
/*rtl:raw:
|
||||
|
||||
@@ -171,8 +171,8 @@
|
||||
// Button shapes
|
||||
//
|
||||
.btn-pill {
|
||||
padding-right: 1.5em;
|
||||
padding-left: 1.5em;
|
||||
padding-inline-end: 1.5em;
|
||||
padding-inline-start: 1.5em;
|
||||
border-radius: 10rem;
|
||||
|
||||
&[class*='btn-icon'] {
|
||||
@@ -189,8 +189,8 @@
|
||||
//
|
||||
.btn-icon,
|
||||
.btn-action {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
|
||||
.icon {
|
||||
margin: calc(-1 * var(--#{$prefix}btn-padding-x));
|
||||
@@ -214,7 +214,7 @@
|
||||
position: fixed;
|
||||
z-index: $zindex-fixed;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
inset-inline-start: 1rem;
|
||||
box-shadow: var(--#{$prefix}shadow-dropdown);
|
||||
|
||||
@include media-print {
|
||||
@@ -240,13 +240,13 @@
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
|
||||
border-right-color: transparent;
|
||||
border-inline-end-color: transparent;
|
||||
border-radius: $border-radius-pill;
|
||||
color: var(--#{$prefix}btn-color);
|
||||
position: absolute;
|
||||
width: 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);
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
justify-content: start;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
@@ -77,8 +77,8 @@
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 1.4rem;
|
||||
content: '';
|
||||
background: rgba(var(--#{$prefix}primary-rgb), 0.1);
|
||||
@@ -95,10 +95,10 @@
|
||||
}
|
||||
|
||||
&.range-start:before {
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.range-end:before {
|
||||
right: 50%;
|
||||
inset-inline-end: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,11 +34,11 @@
|
||||
--#{$prefix}stamp-size: 7rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
width: calc(var(--#{$prefix}stamp-size) * 1);
|
||||
height: calc(var(--#{$prefix}stamp-size) * 1);
|
||||
max-height: 100%;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-start-end-radius: $border-radius;
|
||||
opacity: $card-stamp-opacity;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
@@ -59,7 +59,7 @@
|
||||
height: calc(var(--#{$prefix}stamp-size) * 1);
|
||||
position: relative;
|
||||
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);
|
||||
transform: rotate(10deg);
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
.card-img-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--#{$prefix}card-stacked-offset));
|
||||
right: var(--#{$prefix}card-stacked-offset);
|
||||
left: var(--#{$prefix}card-stacked-offset);
|
||||
inset-inline-end: var(--#{$prefix}card-stacked-offset);
|
||||
inset-inline-start: var(--#{$prefix}card-stacked-offset);
|
||||
height: var(--#{$prefix}card-stacked-offset);
|
||||
content: '';
|
||||
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
|
||||
@@ -155,9 +155,9 @@ Stacked card
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
content: '';
|
||||
background: rgba($dark, 0.48);
|
||||
}
|
||||
@@ -176,7 +176,7 @@ Stacked card
|
||||
|
||||
.card-actions {
|
||||
margin: -0.5rem -0.5rem -0.5rem auto;
|
||||
padding-left: 0.5rem;
|
||||
padding-inline-start: 0.5rem;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
@@ -359,15 +359,15 @@ Card optinos
|
||||
*/
|
||||
.card-options {
|
||||
top: 1.5rem;
|
||||
right: 0.75rem;
|
||||
inset-inline-end: 0.75rem;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.card-options-link {
|
||||
display: inline-block;
|
||||
min-width: 1rem;
|
||||
margin-left: 0.25rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
color: var(--#{$prefix}secondary);
|
||||
}
|
||||
|
||||
@@ -377,15 +377,15 @@ Card status
|
||||
.card-status-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
height: $card-status-size;
|
||||
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
|
||||
}
|
||||
|
||||
.card-status-start {
|
||||
position: absolute;
|
||||
right: auto;
|
||||
inset-inline-end: auto;
|
||||
bottom: 0;
|
||||
width: $card-status-size;
|
||||
height: 100%;
|
||||
@@ -411,13 +411,13 @@ Card table
|
||||
td,
|
||||
th {
|
||||
&:first-child {
|
||||
padding-left: $card-spacer-x;
|
||||
border-left: 0;
|
||||
padding-inline-start: $card-spacer-x;
|
||||
border-inline-start: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $card-spacer-x;
|
||||
border-right: 0;
|
||||
padding-inline-end: $card-spacer-x;
|
||||
border-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -428,11 +428,11 @@ Card table
|
||||
&:last-child {
|
||||
tr: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 {
|
||||
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 {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
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));
|
||||
}
|
||||
@@ -517,10 +517,10 @@ Card list group
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
padding-right: $card-spacer-x;
|
||||
padding-left: $card-spacer-x;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
padding-inline-end: $card-spacer-x;
|
||||
padding-inline-start: $card-spacer-x;
|
||||
border-inline-end: 0;
|
||||
border-inline-start: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:last-child {
|
||||
@@ -561,18 +561,18 @@ Card list group
|
||||
.nav-item {
|
||||
&:not(:first-child) {
|
||||
.nav-link {
|
||||
border-top-left-radius: 0;
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
.nav-link {
|
||||
border-top-right-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+ .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 {
|
||||
border-bottom-left-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) .nav-link {
|
||||
border-bottom-right-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border-bottom-left-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
.nav-tabs + .tab-content .card {
|
||||
border-bottom-left-radius: var(--#{$prefix}card-border-radius);
|
||||
border-top-left-radius: 0;
|
||||
border-end-start-radius: var(--#{$prefix}card-border-radius);
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
}
|
||||
|
||||
.carousel-indicators-vertical {
|
||||
left: auto;
|
||||
inset-inline-start: auto;
|
||||
top: 0;
|
||||
margin: 0 1rem 0 0;
|
||||
flex-direction: column;
|
||||
@@ -12,8 +12,8 @@
|
||||
width: $carousel-indicator-height;
|
||||
height: $carousel-indicator-width;
|
||||
border: 0;
|
||||
border-left: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
|
||||
border-right: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
|
||||
border-inline-start: $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 {
|
||||
background: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
height: 90%;
|
||||
background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
|
||||
|
||||
@@ -45,9 +45,9 @@ Chart sparkline
|
||||
.chart-sparkline-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
left: 0.75rem;
|
||||
inset-inline-start: 0.75rem;
|
||||
display: block;
|
||||
background: inherit;
|
||||
width: 14px;
|
||||
@@ -90,8 +90,8 @@
|
||||
|
||||
&.dropdown-menu-end {
|
||||
&:before {
|
||||
right: 0.75rem;
|
||||
left: auto;
|
||||
inset-inline-end: 0.75rem;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -99,12 +99,12 @@
|
||||
.dropend {
|
||||
> .dropdown-menu {
|
||||
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
|
||||
margin-left: -0.25rem;
|
||||
margin-inline-start: -0.25rem;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&:after {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,14 +15,14 @@ Form label
|
||||
&.required {
|
||||
&:after {
|
||||
content: '*';
|
||||
margin-left: 0.25rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-label-description {
|
||||
float: right;
|
||||
float: inline-end;
|
||||
font-weight: var(--#{$prefix}font-weight-normal);
|
||||
color: $form-secondary-color;
|
||||
}
|
||||
@@ -196,11 +196,11 @@ Input group
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 0;
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: 0;
|
||||
border-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -210,13 +210,13 @@ Input group
|
||||
@include transition($input-transition);
|
||||
|
||||
&:first-child {
|
||||
padding-right: 0;
|
||||
border-right: 0;
|
||||
padding-inline-end: 0;
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
padding-inline-start: 0;
|
||||
border-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -225,8 +225,8 @@ Input group
|
||||
Upload files
|
||||
*/
|
||||
.form-file-button {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
margin-inline-start: 0;
|
||||
border-inline-start: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -19,13 +19,13 @@
|
||||
|
||||
@each $name, $value in (0: 0, sm: 0.375rem, md: 1.5rem, lg: 3rem) {
|
||||
.row-#{$name} {
|
||||
margin-right: calc(-1 * $value);
|
||||
margin-left: calc(-1 * $value);
|
||||
margin-inline-end: calc(-1 * $value);
|
||||
margin-inline-start: calc(-1 * $value);
|
||||
|
||||
> .col,
|
||||
> [class*='col-'] {
|
||||
padding-right: $value;
|
||||
padding-left: $value;
|
||||
padding-inline-end: $value;
|
||||
padding-inline-start: $value;
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -106,15 +106,15 @@
|
||||
|
||||
.divide-x#{$name-prefixed} {
|
||||
> :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) {
|
||||
padding-left: $size !important;
|
||||
padding-inline-start: $size !important;
|
||||
}
|
||||
|
||||
> :not(template):not(:last-child) {
|
||||
padding-right: $size !important;
|
||||
padding-inline-end: $size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.list-group {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.list-group-header {
|
||||
@@ -26,8 +26,8 @@
|
||||
|
||||
.list-group-item.active {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
border-left-color: $component-active-bg;
|
||||
border-left-width: $border-width-wide;
|
||||
border-inline-start-color: $component-active-bg;
|
||||
border-inline-start-width: $border-width-wide;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
@@ -110,7 +110,7 @@ Inline list
|
||||
}
|
||||
|
||||
.list-inline-item:not(:last-child) {
|
||||
margin-right: auto;
|
||||
margin-inline-end: auto;
|
||||
margin-inline-end: $list-inline-padding;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,14 +9,14 @@
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
border: 1px var(--#{$prefix}border-style);
|
||||
border-color: transparent;
|
||||
border-top-color: currentColor;
|
||||
border-left-color: currentColor;
|
||||
border-inline-start-color: currentColor;
|
||||
|
||||
border-radius: $border-radius-pill;
|
||||
animation: rotate-360 0.6s linear;
|
||||
@@ -33,8 +33,8 @@ Dimmer
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
> .btn-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
width: $modal-header-height;
|
||||
height: $modal-header-height;
|
||||
margin: 0;
|
||||
@@ -27,8 +27,8 @@
|
||||
.modal-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
height: $modal-status-size;
|
||||
background: var(--#{$prefix}secondary);
|
||||
border-radius: $modal-content-border-radius $modal-content-border-radius 0 0;
|
||||
|
||||
@@ -10,9 +10,9 @@
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-left: 1.25rem;
|
||||
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
padding-left: 0.5rem;
|
||||
margin-inline-start: 1.25rem;
|
||||
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
@@ -34,13 +34,13 @@
|
||||
|
||||
.nav-item {
|
||||
+ .nav-item {
|
||||
margin-left: $nav-bordered-margin-x;
|
||||
margin-inline-start: $nav-bordered-margin-x;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
|
||||
border: 0;
|
||||
border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
|
||||
@@ -75,7 +75,7 @@
|
||||
}
|
||||
|
||||
.nav-link-toggle {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
padding: 0 0.25rem;
|
||||
@include transition(transform $transition-time);
|
||||
@include caret();
|
||||
@@ -92,7 +92,7 @@
|
||||
.nav-link-icon {
|
||||
width: $nav-link-icon-size;
|
||||
height: $nav-link-icon-size;
|
||||
margin-right: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
color: $nav-link-icon-color;
|
||||
|
||||
svg {
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
}
|
||||
|
||||
.page-text {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-inline-start: 0.5rem;
|
||||
padding-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
@@ -30,12 +30,12 @@
|
||||
&.page-prev,
|
||||
&.page-next {
|
||||
flex: 0 0 50%;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
&.page-next {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
margin-inline-start: auto;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
right: 100%;
|
||||
left: -35%;
|
||||
inset-inline-end: 100%;
|
||||
inset-inline-start: -35%;
|
||||
}
|
||||
|
||||
100%,
|
||||
60% {
|
||||
right: -90%;
|
||||
left: 100%;
|
||||
inset-inline-end: -90%;
|
||||
inset-inline-start: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ Progress bar
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
content: '';
|
||||
background-color: inherit;
|
||||
will-change: left, right;
|
||||
@@ -99,9 +99,9 @@ Progressbg
|
||||
.progressbg-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
@@ -110,8 +110,8 @@ Progressbg
|
||||
|
||||
.progressbg-value {
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
margin-left: auto;
|
||||
padding-left: 2rem;
|
||||
margin-inline-start: auto;
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
--#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: calc(-1 * var(--#{$prefix}ribbon-margin));
|
||||
inset-inline-end: calc(-1 * var(--#{$prefix}ribbon-margin));
|
||||
z-index: 1;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: $card-ribbon-font-size;
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@@ -34,7 +34,7 @@
|
||||
border: calc(var(--#{$prefix}ribbon-margin) * 0.5) var(--#{$prefix}border-style);
|
||||
border-color: inherit;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-inline-end-color: transparent;
|
||||
}
|
||||
|
||||
@if $enable-extra-colors {
|
||||
@@ -58,44 +58,44 @@
|
||||
|
||||
.ribbon-top {
|
||||
top: calc(-1 * var(--#{$prefix}ribbon-margin));
|
||||
right: 0.75rem;
|
||||
inset-inline-end: 0.75rem;
|
||||
width: 2rem;
|
||||
padding: 0.5rem 0;
|
||||
border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
inset-inline-end: 100%;
|
||||
bottom: auto;
|
||||
border-color: inherit;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-inline-start-color: transparent;
|
||||
}
|
||||
|
||||
&.ribbon-start {
|
||||
right: auto;
|
||||
left: 0.75rem;
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 0.75rem;
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
inset-inline-end: 100%;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ribbon-start {
|
||||
right: auto;
|
||||
left: calc(-1 * var(--#{$prefix}ribbon-margin));
|
||||
inset-inline-end: auto;
|
||||
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);
|
||||
|
||||
&:before {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
border-color: inherit;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-inline-start-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -105,47 +105,47 @@
|
||||
}
|
||||
|
||||
.ribbon-bookmark {
|
||||
padding-left: 0.25rem;
|
||||
padding-inline-start: 0.25rem;
|
||||
border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
inset-inline-end: 100%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
border: 1rem var(--#{$prefix}border-style);
|
||||
border-color: inherit;
|
||||
border-right-width: 0;
|
||||
border-left-color: transparent;
|
||||
border-left-width: 0.5rem;
|
||||
border-inline-end-width: 0;
|
||||
border-inline-start-color: transparent;
|
||||
border-inline-start-width: 0.5rem;
|
||||
}
|
||||
|
||||
&.ribbon-left {
|
||||
padding-right: 0.5rem;
|
||||
padding-inline-end: 0.5rem;
|
||||
|
||||
&:after {
|
||||
right: auto;
|
||||
left: 100%;
|
||||
border-right-color: transparent;
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 100%;
|
||||
border-inline-end-color: transparent;
|
||||
|
||||
border-right-width: 0.5rem;
|
||||
border-left-width: 0;
|
||||
border-inline-end-width: 0.5rem;
|
||||
border-inline-start-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-top {
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0;
|
||||
|
||||
&:after {
|
||||
top: 100%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
border-color: inherit;
|
||||
border-width: 1rem;
|
||||
border-top-width: 0;
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
.nav-link {
|
||||
justify-content: flex-start;
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
font-size: $h5-font-size;
|
||||
|
||||
.star:not(:first-child) {
|
||||
margin-left: 0.25rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
.status-indicator-circle {
|
||||
--#{$prefix}status-circle-size: 0.75rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
top: 50%;
|
||||
margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
|
||||
width: var(--#{$prefix}status-circle-size);
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
&:not(:last-child):after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
width: 100%;
|
||||
content: '';
|
||||
transform: translateY(-50%);
|
||||
@@ -67,7 +67,7 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
z-index: 1;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
@@ -126,9 +126,9 @@
|
||||
}
|
||||
|
||||
.step-item {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
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;
|
||||
|
||||
&:not(:first-child) {
|
||||
@@ -137,7 +137,7 @@
|
||||
|
||||
&:before {
|
||||
top: var(--#{$prefix}steps-dot-offset);
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
@@ -147,7 +147,7 @@
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
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);
|
||||
height: calc(100% + 1rem);
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
.switch-icon-b {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -125,7 +125,7 @@ Table sort
|
||||
vertical-align: bottom;
|
||||
mask-image: $table-sort-bg-image;
|
||||
background: currentColor;
|
||||
margin-left: 0.25rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
&.asc:after {
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
gap: 0.5rem;
|
||||
|
||||
.btn-close {
|
||||
margin-right: -0.25rem;
|
||||
margin-left: -0.125rem;
|
||||
margin-inline-end: -0.25rem;
|
||||
margin-inline-start: -0.125rem;
|
||||
padding: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
@@ -24,7 +24,7 @@
|
||||
--#{$prefix}badge-font-size: #{$h6-font-size};
|
||||
--#{$prefix}badge-padding-x: 0.25rem;
|
||||
--#{$prefix}badge-padding-y: 0.125rem;
|
||||
margin-right: -0.25rem;
|
||||
margin-inline-end: -0.25rem;
|
||||
}
|
||||
|
||||
.tag-avatar,
|
||||
@@ -32,12 +32,12 @@
|
||||
.tag-payment,
|
||||
.tag-icon,
|
||||
.tag-check {
|
||||
margin-left: -0.25rem;
|
||||
margin-inline-start: -0.25rem;
|
||||
}
|
||||
|
||||
.tag-icon {
|
||||
color: var(--#{$prefix}secondary);
|
||||
margin-right: -0.125rem;
|
||||
margin-inline-end: -0.125rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
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));
|
||||
width: var(--#{$prefix}border-width);
|
||||
background-color: var(--#{$prefix}border-color);
|
||||
@@ -44,7 +44,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@ b {
|
||||
|
||||
blockquote {
|
||||
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 {
|
||||
margin-bottom: 1rem;
|
||||
@@ -91,7 +91,7 @@ blockquote {
|
||||
|
||||
cite {
|
||||
display: block;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
|
||||
&:before {
|
||||
content: '— ';
|
||||
@@ -101,7 +101,7 @@ blockquote {
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5rem;
|
||||
padding-inline-start: 1.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
@@ -163,7 +163,7 @@ img {
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -258,7 +258,7 @@ Mentions
|
||||
|
||||
.mention-count {
|
||||
color: var(--#{$prefix}secondary);
|
||||
margin-left: calc(8em / 12);
|
||||
margin-inline-start: calc(8em / 12);
|
||||
}
|
||||
|
||||
$text-variants: (
|
||||
@@ -279,10 +279,10 @@ $text-variants: (
|
||||
.steps {
|
||||
--#{$prefix}steps-padding: 2rem;
|
||||
--#{$prefix}steps-item-size: 1.5rem;
|
||||
margin-left: 1rem;
|
||||
padding-left: var(--#{$prefix}steps-padding);
|
||||
margin-inline-start: 1rem;
|
||||
padding-inline-start: var(--#{$prefix}steps-padding);
|
||||
counter-reset: step;
|
||||
border-left: 1px solid var(--#{$prefix}border-color);
|
||||
border-inline-start: 1px solid var(--#{$prefix}border-color);
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h3 {
|
||||
@@ -297,7 +297,7 @@ $text-variants: (
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
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);
|
||||
height: var(--#{$prefix}steps-item-size);
|
||||
text-align: center;
|
||||
|
||||
@@ -37,7 +37,7 @@ Form check
|
||||
&.required {
|
||||
&:after {
|
||||
content: '*';
|
||||
margin-left: 0.25rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
@@ -69,14 +69,14 @@ Form switch
|
||||
}
|
||||
|
||||
.form-switch-lg {
|
||||
padding-left: 3.5rem;
|
||||
padding-inline-start: 3.5rem;
|
||||
min-height: 1.5rem;
|
||||
|
||||
.form-check-input {
|
||||
height: 1.5rem;
|
||||
width: 2.75rem;
|
||||
background-size: 1.5rem;
|
||||
margin-left: -3.5rem;
|
||||
margin-inline-start: -3.5rem;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
|
||||
@@ -27,7 +27,7 @@ Color Input
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
|
||||
@@ -6,12 +6,12 @@ Icon input
|
||||
|
||||
.form-control:not(:last-child),
|
||||
.form-select:not(:last-child) {
|
||||
padding-right: 2.5rem;
|
||||
padding-inline-end: 2.5rem;
|
||||
}
|
||||
|
||||
.form-control:not(:first-child),
|
||||
.form-select:not(:last-child) {
|
||||
padding-left: 2.5rem;
|
||||
padding-inline-start: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ Icon input
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -31,7 +31,7 @@ Icon input
|
||||
font-size: 1.2em;
|
||||
|
||||
&:last-child {
|
||||
right: 0;
|
||||
left: auto;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ Image check
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
left: 0.25rem;
|
||||
inset-inline-start: 0.25rem;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: $form-check-input-width;
|
||||
@@ -74,13 +74,13 @@ Image check
|
||||
@include transition(opacity $transition-time);
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
|
||||
border-top-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
|
||||
border-start-start-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
|
||||
border-start-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
|
||||
border-bottom-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
|
||||
border-end-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
|
||||
border-end-start-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
|
||||
}
|
||||
|
||||
.form-imagecheck:hover &,
|
||||
|
||||
@@ -24,7 +24,7 @@ Select group
|
||||
.form-selectgroup-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -92,7 +92,7 @@ Select group
|
||||
.form-selectgroup-check-floated {
|
||||
position: absolute;
|
||||
top: $input-btn-padding-y;
|
||||
right: $input-btn-padding-y;
|
||||
inset-inline-end: $input-btn-padding-y;
|
||||
}
|
||||
|
||||
.form-selectgroup-input:checked + .form-selectgroup-label {
|
||||
@@ -117,7 +117,7 @@ Alternate version of form select group
|
||||
*/
|
||||
.form-selectgroup-boxes {
|
||||
.form-selectgroup-label {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
padding: $card-spacer-x $card-spacer-y;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -142,7 +142,7 @@ Select group
|
||||
*/
|
||||
.form-selectgroup-pills {
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
align-items: start;
|
||||
|
||||
.form-selectgroup-item {
|
||||
flex-grow: 0;
|
||||
|
||||
@@ -24,17 +24,17 @@ Hr text
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
margin-right: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
margin-left: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0;
|
||||
padding-inline-end: 0.5rem;
|
||||
padding-inline-start: 0;
|
||||
color: var(--#{$prefix}secondary);
|
||||
}
|
||||
|
||||
@@ -45,8 +45,8 @@ Hr text
|
||||
}
|
||||
|
||||
& > *:first-child {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-inline-end: 0.5rem;
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,8 +61,8 @@ Hr text
|
||||
}
|
||||
|
||||
& > *:first-child {
|
||||
padding-right: 0;
|
||||
padding-left: 0.5rem;
|
||||
padding-inline-end: 0;
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
6
core/scss/vendor/_coloris.scss
vendored
6
core/scss/vendor/_coloris.scss
vendored
@@ -53,8 +53,8 @@ input.clr-color {
|
||||
button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
left: 6px;
|
||||
right: auto;
|
||||
inset-inline-start: 6px;
|
||||
inset-inline-end: auto;
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
|
||||
&:after {
|
||||
@@ -67,6 +67,6 @@ input.clr-color {
|
||||
}
|
||||
|
||||
input {
|
||||
padding-left: 2.5rem;
|
||||
padding-inline-start: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
2
core/scss/vendor/_nouislider.scss
vendored
2
core/scss/vendor/_nouislider.scss
vendored
@@ -34,7 +34,7 @@
|
||||
width: $form-range-thumb-width;
|
||||
height: $form-range-thumb-height;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user