diff --git a/docs/app/views/lockup/lockup/unlock.erb b/docs/app/views/lockup/lockup/unlock.erb index 66f9c0cb75..492f7e9a41 100644 --- a/docs/app/views/lockup/lockup/unlock.erb +++ b/docs/app/views/lockup/lockup/unlock.erb @@ -1,4 +1,4 @@ -<%= sage_component SageContainer, { size: "md", html_attributes: { style: "padding-top: 200px;"}} do %> +<%= sage_component SageContainer, { size: "md", html_attributes: { style: "padding-block-start: 200px;"}} do %> <%= image_tag("media/images/sage.svg", width: 100) %>

Sage Design System

SCSS Based Component Library for our applications UI

@@ -13,7 +13,7 @@ <% end %> - <%= form_for :lockup, url: { action: 'unlock' }, html: {style: "padding-top: 50px"} do |form| %> + <%= form_for :lockup, url: { action: 'unlock' }, html: {style: "padding-block-start: 50px"} do |form| %> <% if params[:return_to].present? %> <%= form.hidden_field "return_to", value: params[:return_to] %> <% elsif @return_to.present? %> diff --git a/docs/lib/sage-frontend/stylesheets/docs/_assistant.scss b/docs/lib/sage-frontend/stylesheets/docs/_assistant.scss index 871c9030ab..ca6eb17727 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_assistant.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_assistant.scss @@ -27,7 +27,7 @@ } .sage-theme-switch { - margin-bottom: 0; + margin-block-end: 0; .sage-switch__label { color: sage-color(white); diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index cfaa329f85..0d8dc6ae94 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -11,8 +11,8 @@ // color block groupings .colors { overflow: hidden; - margin-top: sage-spacing(); - margin-bottom: sage-spacing(); + margin-block-start: sage-spacing(); + margin-block-end: sage-spacing(); border-radius: sage-border(radius); } @@ -99,7 +99,7 @@ &::after { content: "#{$hex}"; - padding-left: sage-spacing(xs); + padding-inline-start: sage-spacing(xs); font-weight: sage-font-weight(semibold); text-transform: uppercase; } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_docs_container.scss b/docs/lib/sage-frontend/stylesheets/docs/_docs_container.scss index fb246f3517..f588f3b35a 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_docs_container.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_docs_container.scss @@ -5,8 +5,8 @@ ================================================== */ .docs-container { - margin-top: sage-spacing(); - margin-bottom: sage-spacing(); + margin-block-start: sage-spacing(); + margin-block-end: sage-spacing(); @include sage-panel; } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_example.scss b/docs/lib/sage-frontend/stylesheets/docs/_example.scss index a617551311..e5e1d72cbf 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_example.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_example.scss @@ -62,26 +62,26 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75); } .example__block { - margin-top: sage-spacing(sm); - margin-bottom: sage-spacing(sm); + margin-block-start: sage-spacing(sm); + margin-block-end: sage-spacing(sm); } .example__block--md { - margin-top: sage-spacing(md); - margin-bottom: sage-spacing(md); + margin-block-start: sage-spacing(md); + margin-block-end: sage-spacing(md); } .example__block--lg { - margin-top: sage-spacing(lg); - margin-bottom: sage-spacing(lg); + margin-block-start: sage-spacing(lg); + margin-block-end: sage-spacing(lg); } .example__expand-btn { @include sage-button-style-reset(); position: absolute; z-index: sage-z_index(raised); - bottom: sage-spacing(xs); - left: 0; + inset-block-end: sage-spacing(xs); + inset-inline-start: 0; width: 100%; padding: sage-spacing(xs); color: $-example-code-preview-button-color; @@ -131,8 +131,8 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75); max-height: $-example-code-preview-height; .prettyprint { - margin-bottom: 0; - padding-bottom: sage-spacing(xl); + margin-block-end: 0; + padding-block-end: sage-spacing(xl); } &::before { @@ -140,9 +140,9 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75); display: block; z-index: sage-z-index(default, 100); position: absolute; - left: 0; - right: 0; - bottom: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; height: 100%; background-image: linear-gradient(to bottom, rgba($docs-code-editor-background, 0) 0%, rgba($docs-code-editor-background, 0.9) 100%); transition: map-get($sage-transitions, default); @@ -168,7 +168,7 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75); } .sage-card__header { padding: sage-spacing(); - padding-bottom: sage-spacing(xs); + padding-block-end: sage-spacing(xs); code { background: sage-color(grey, 300); } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss index 64472af66b..14525aeb96 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss @@ -6,7 +6,7 @@ .grid-item { width: 100%; - margin-bottom: sage-spacing(md); + margin-block-end: sage-spacing(md); padding: sage-spacing(xs) sage-spacing(md); text-align: center; background: sage-color(grey, 200); diff --git a/docs/lib/sage-frontend/stylesheets/docs/_home.scss b/docs/lib/sage-frontend/stylesheets/docs/_home.scss index 429a2752a6..2a298aa66c 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_home.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_home.scss @@ -14,7 +14,7 @@ background-color: sage-color(primary, 500); @media (max-width: sage-breakpoint(md-min)) { - padding-bottom: sage-spacing(xl); + padding-block-end: sage-spacing(xl); } .sage-btn--subtle.sage-btn--secondary { @@ -32,8 +32,8 @@ .docs-hero__background { position: absolute; - left: 0; - top: 0; + inset-inline-start: 0; + inset-block-start: 0; width: 100%; height: 100%; object-fit: cover; @@ -44,8 +44,8 @@ } .docs-hero__title { - margin-bottom: sage-spacing(sm); - margin-top: sage-spacing(); + margin-block-end: sage-spacing(sm); + margin-block-start: sage-spacing(); font-size: 4rem; line-height: 1; color: inherit; @@ -64,20 +64,20 @@ } .docs-section__title { - margin-bottom: sage-spacing(2xl); + margin-block-end: sage-spacing(2xl); @media (max-width: sage-breakpoint(md-min)) { - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } } .docs-section__icon { - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } .docs-section__platform-icon { width: rem(48px); - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } .docs-iframe { @@ -90,8 +90,8 @@ content: ""; position: absolute; z-index: sage-z-index(default, 1); - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; height: 100%; width: 100%; backdrop-filter: blur(70px); diff --git a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss index 6891de8ec9..ad1f70e911 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss @@ -9,7 +9,7 @@ flex-direction: column; flex-wrap: wrap; align-items: center; - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); padding: sage-spacing(lg) sage-spacing(sm); text-align: center; background: sage-color(grey, 150); @@ -18,15 +18,15 @@ } .docs-icon-block__label { - margin-top: sage-spacing(xs); - margin-bottom: 0; + margin-block-start: sage-spacing(xs); + margin-block-end: 0; font-size: sage-font-size(body-xs); font-weight: sage-font-weight(semibold); } .docs-icon-inline { - margin-bottom: sage-spacing(sm); + margin-block-end: sage-spacing(sm); padding: sage-spacing(sm); text-align: right; background: sage-color(grey, 150); diff --git a/docs/lib/sage-frontend/stylesheets/docs/_nav.scss b/docs/lib/sage-frontend/stylesheets/docs/_nav.scss index 5104a83d39..19f11e4279 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_nav.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_nav.scss @@ -20,7 +20,7 @@ } .docs-hero & { - margin-bottom: rem(100px); + margin-block-end: rem(100px); } } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_panel.scss b/docs/lib/sage-frontend/stylesheets/docs/_panel.scss index e9be56793c..82ecdf18bb 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_panel.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_panel.scss @@ -11,6 +11,6 @@ } p + p { - margin-top: 1.5rem; + margin-block-start: 1.5rem; } } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss b/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss index b6510fc6d7..bad75e1e1b 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss @@ -10,7 +10,7 @@ $-quick-links-color-background: sage-color(primary, 200); .quick-links { position: sticky; - top: 0; + inset-block-start: 0; overflow: hidden; padding: sage-spacing(2xs) sage-spacing(); background-color: #fff; @@ -29,14 +29,14 @@ $-quick-links-color-background: sage-color(primary, 200); list-style: none; &:not(:last-child) { - margin-bottom: sage-spacing(2xs); + margin-block-end: sage-spacing(2xs); } } .quick-links__link { display: flex; align-items: center; - margin-bottom: rem(2px); + margin-block-end: rem(2px); padding: sage-spacing(2xs) sage-spacing(xs); color: $-quick-links-color-text; border-radius: sage-border(radius); @@ -58,7 +58,7 @@ $-quick-links-color-background: sage-color(primary, 200); } .quick-links__link--secondary { - margin-left: sage-spacing(sm); + margin-inline-start: sage-spacing(sm); } .quick-links__title { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss b/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss index 9862978c69..8d965c00e5 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss @@ -8,8 +8,8 @@ .example__preview & { z-index: sage-z-index(); position: relative; - top: auto; - left: auto; + inset-block-start: auto; + inset-inline-start: auto; transform: none; height: auto; box-shadow: none; diff --git a/docs/lib/sage-frontend/stylesheets/docs/_snippet.scss b/docs/lib/sage-frontend/stylesheets/docs/_snippet.scss index d41ac03793..7bed742619 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_snippet.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_snippet.scss @@ -11,8 +11,8 @@ content: ""; display: block; position: absolute; - right: 0; - top: 0; + inset-inline-end: 0; + inset-block-start: 0; height: 100%; width: sage-spacing(lg); background: linear-gradient( diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss index 37bf5a3dbf..dbdfa70c2e 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss @@ -8,18 +8,18 @@ th { padding: 4px; color: sage-color(grey, 700); - border-bottom: 1px solid sage-color(grey, 300); + border-block-end: 1px solid sage-color(grey, 300); } td { padding: 4px; font-size: sage-font-size(body-xs); vertical-align: middle; - border-bottom: 1px solid sage-color(grey, 200); + border-block-end: 1px solid sage-color(grey, 200); } tfoot td { - padding-top: 12px; + padding-block-start: 12px; border-bottom-color: transparent; } } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss index d4ea6ba477..6162866a3e 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss @@ -9,12 +9,12 @@ align-items: center; flex-wrap: wrap; flex-grow: 1; - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); &__wrapper { display: flex; flex-wrap: wrap; - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } &__icon { @@ -49,7 +49,7 @@ } &__text { - margin-left: sage-spacing(xs); + margin-inline-start: sage-spacing(xs); font-size: sage-font-size(body-sm); font-weight: sage-font-weight(semibold); color: sage-color(grey, 700); @@ -60,6 +60,6 @@ } @media screen and (min-width: sage-breakpoint(xl-min)) { - margin-right: sage-spacing(lg); + margin-inline-end: sage-spacing(lg); } } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss index 5e2d78111e..a08e9d079a 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss @@ -20,21 +20,21 @@ $-status-table-heading-padding: sage-spacing(xs) sage-spacing(sm); tbody { tr { - border-bottom: 0; + border-block-end: 0; } tr:last-child { - border-bottom: 0; + border-block-end: 0; } } th { padding: $-status-table-heading-padding; text-align: center; - border-bottom: $-status-table-border; + border-block-end: $-status-table-border; &:first-child { - padding-left: 0; + padding-inline-start: 0; text-align: left; text-align: inline-start; } @@ -44,7 +44,7 @@ $-status-table-heading-padding: sage-spacing(xs) sage-spacing(sm); padding: $-status-table-cell-padding; vertical-align: middle; text-align: center; - border-bottom: sage-border(); + border-block-end: sage-border(); &:first-child { font-weight: sage-font-weight(semibold); diff --git a/docs/lib/sage-frontend/stylesheets/docs/_table.scss b/docs/lib/sage-frontend/stylesheets/docs/_table.scss index 60899f6e3e..abb0eb7ced 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_table.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_table.scss @@ -6,7 +6,7 @@ .sage-table { .example__preview & { - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } table { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss index b0aa73ae62..3136624d78 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss @@ -14,7 +14,7 @@ code { pre { .sage-type & { padding: rem(8px); - margin-bottom: rem(8px); + margin-block-end: rem(8px); font-size: 0.9rem; } } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_token.scss b/docs/lib/sage-frontend/stylesheets/docs/_token.scss index 9e88f954c9..54dc1a1971 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_token.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_token.scss @@ -8,7 +8,7 @@ width: 100%; border: sage-border(); border-radius: sage-border(radius); - border-bottom: 0; + border-block-end: 0; } .token { @@ -17,7 +17,7 @@ flex-wrap: wrap; padding: sage-spacing(xs) sage-spacing(sm); font-size: sage-font-size(body-sm); - border-bottom: sage-border(); + border-block-end: sage-border(); &::after { max-width: max-content; diff --git a/docs/public/404.html b/docs/public/404.html index 0182e76a41..e8a00ba0ec 100644 --- a/docs/public/404.html +++ b/docs/public/404.html @@ -23,9 +23,9 @@ border-right-color: #999; border-left-color: #999; border-bottom-color: #BBB; - border-top: #B00100 solid 4px; - border-top-left-radius: 9px; - border-top-right-radius: 9px; + border-block-start: #B00100 solid 4px; + border-start-start-radius: 9px; + border-start-end-radius: 9px; background-color: white; padding: 7px 12% 0; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); @@ -45,8 +45,8 @@ border-right-color: #999; border-left-color: #999; border-bottom-color: #999; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; + border-end-start-radius: 4px; + border-end-end-radius: 4px; border-top-color: #DADADA; color: #666; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); diff --git a/docs/public/422.html b/docs/public/422.html index cd54150d57..a376472b34 100644 --- a/docs/public/422.html +++ b/docs/public/422.html @@ -23,9 +23,9 @@ border-right-color: #999; border-left-color: #999; border-bottom-color: #BBB; - border-top: #B00100 solid 4px; - border-top-left-radius: 9px; - border-top-right-radius: 9px; + border-block-start: #B00100 solid 4px; + border-start-start-radius: 9px; + border-start-end-radius: 9px; background-color: white; padding: 7px 12% 0; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); @@ -45,8 +45,8 @@ border-right-color: #999; border-left-color: #999; border-bottom-color: #999; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; + border-end-start-radius: 4px; + border-end-end-radius: 4px; border-top-color: #DADADA; color: #666; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); diff --git a/docs/public/500.html b/docs/public/500.html index 563ac362d8..afef8eadd7 100644 --- a/docs/public/500.html +++ b/docs/public/500.html @@ -23,9 +23,9 @@ border-right-color: #999; border-left-color: #999; border-bottom-color: #BBB; - border-top: #B00100 solid 4px; - border-top-left-radius: 9px; - border-top-right-radius: 9px; + border-block-start: #B00100 solid 4px; + border-start-start-radius: 9px; + border-start-end-radius: 9px; background-color: white; padding: 7px 12% 0; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); @@ -45,8 +45,8 @@ border-right-color: #999; border-left-color: #999; border-bottom-color: #999; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; + border-end-start-radius: 4px; + border-end-end-radius: 4px; border-top-color: #DADADA; color: #666; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index f22894dc2d..7c9187d2d2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -53,13 +53,13 @@ $-alert-border-colors: ( grid-template-areas: "icon copy"; gap: sage-spacing(sm); padding: sage-spacing(); - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); border: 1px solid sage-color(grey, 300); border-radius: sage-border(radius-large); .sage-frame > &, .sage-panel > & { - margin-bottom: 0; + margin-block-end: 0; } &.sage-alert--actions { diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index a8dc43bf7e..82541c6a93 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -68,12 +68,12 @@ $-avatar-group-item-sizes: ( // Documentation-specific styles .sage-avatar-wrapper > & { - margin-right: sage-spacing(); + margin-inline-end: sage-spacing(); } .sage-table td > & { - margin-top: -1 * sage-spacing(2xs); - margin-bottom: -1 * sage-spacing(2xs); + margin-block-start: -1 * sage-spacing(2xs); + margin-block-end: -1 * sage-spacing(2xs); } // Items inside avatar group should be 100% to start @@ -95,45 +95,45 @@ $-avatar-group-item-sizes: ( // Positioning is same for first item is same in all configs &:nth-child(1) { - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; } } .sage-avatar-group--2-up &:nth-child(2) { - bottom: rem(5px); - right: rem(6px); + inset-block-end: rem(5px); + inset-inline-end: rem(6px); } .sage-avatar-group--3-up &, .sage-avatar-group--4-up & { &:nth-child(2) { - bottom: rem(16px); - right: 0; + inset-block-end: rem(16px); + inset-inline-end: 0; } &:nth-child(3) { - bottom: 0; - left: rem(16px); + inset-block-end: 0; + inset-inline-start: rem(16px); } &:nth-child(4) { - top: rem(8px); - right: rem(8px); + inset-block-start: rem(8px); + inset-inline-end: rem(8px); } } } .sage-avatar--centered { - margin-right: auto; - margin-left: auto; + margin-inline-end: auto; + margin-inline-start: auto; } // Documentation-specific styles .sage-avatar-wrapper { display: flex; flex-wrap: wrap; - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } .sage-avatar--tile { @@ -154,8 +154,8 @@ $-avatar-group-item-sizes: ( .sage-avatar__badge { position: absolute; z-index: sage-z-index(default, 3); - bottom: rem(-4px); - right: rem(-4px); + inset-block-end: rem(-4px); + inset-inline-end: rem(-4px); background-color: sage-color(white); border-radius: sage-border(radius-round); border: rem(2px) solid sage-color(white); @@ -228,6 +228,6 @@ $-avatar-group-item-sizes: ( // Documentation-specific styles .sage-avatar-wrapper & { - margin-right: sage-spacing(); + margin-inline-end: sage-spacing(); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_badge.scss b/packages/sage-assets/lib/stylesheets/components/_badge.scss index 96bfd7e440..3859fe2068 100644 --- a/packages/sage-assets/lib/stylesheets/components/_badge.scss +++ b/packages/sage-assets/lib/stylesheets/components/_badge.scss @@ -55,7 +55,7 @@ $-badge-statuses: ( } .sage-dot ~ & { - padding-left: sage-spacing(2xs); + padding-inline-start: sage-spacing(2xs); } .sage-badge--large & { @@ -105,7 +105,7 @@ $-badge-statuses: ( @include sage-focus-outline--update-color(sage-color(purple, 300)); position: static; - padding-right: rem(24px); + padding-inline-end: rem(24px); &::after { border-radius: $-badge-border-radius; @@ -113,11 +113,11 @@ $-badge-statuses: ( } &.sage-badge--large .sage-badge__value { - padding-right: rem(30px); + padding-inline-end: rem(30px); } &.sage-badge--large .sage-badge__decor-icon { - right: rem(10px); + inset-inline-end: rem(10px); } .sage-badge__decor-icon { @@ -125,8 +125,8 @@ $-badge-statuses: ( justify-content: center; align-items: center; position: absolute; - right: rem(8px); - margin-top: rem(1px); + inset-inline-end: rem(8px); + margin-block-start: rem(1px); border-radius: 0 $-badge-border-radius $-badge-border-radius 0; &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index bc052abb89..6bdb0087ab 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -42,8 +42,8 @@ $-banner-el-icon: "before"; align-items: center; justify-content: center; position: fixed; - left: 0; - top: 0; + inset-inline-start: 0; + inset-block-start: 0; z-index: sage-z-index(negative); transform: translateY(-100px); width: 100%; @@ -64,7 +64,7 @@ $-banner-el-icon: "before"; &::#{$-banner-el-icon} { @include sage-icon-base(map-get(map-get($-banner-colors, default), icon, pine)); - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); } } @@ -86,19 +86,19 @@ $-banner-el-icon: "before"; } .sage-banner-wrapper--context-ladera-top { - margin-bottom: $-banner-height-ladera; + margin-block-end: $-banner-height-ladera; } .sage-banner__text { display: inline-flex; - margin-right: auto; + margin-inline-end: auto; color: inherit; } .sage-banner__icon { display: inline-flex; align-self: center; - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); } .sage-banner__link { @@ -111,7 +111,7 @@ $-banner-el-icon: "before"; } .sage-banner__close { - margin-left: sage-spacing(sm); + margin-inline-start: sage-spacing(sm); } .sage-banner__close, diff --git a/packages/sage-assets/lib/stylesheets/components/_billboard.scss b/packages/sage-assets/lib/stylesheets/components/_billboard.scss index 3c50243b36..05d72b2bb4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_billboard.scss +++ b/packages/sage-assets/lib/stylesheets/components/_billboard.scss @@ -26,7 +26,7 @@ $-billboard-title-spacing: sage-spacing(sm); .sage-billboard__title { @extend %t-sage-heading-5; - margin-bottom: $-billboard-title-spacing; + margin-block-end: $-billboard-title-spacing; color: $-billboard-text-color; } diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss index a4d1c3f09a..1ac4c55c09 100644 --- a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss @@ -21,7 +21,7 @@ $-breadcrumb-outline-color: sage-color(purple, 300); align-items: center; .sage-breadcrumbs__link & { - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); } } @@ -76,7 +76,7 @@ $-breadcrumb-outline-color: sage-color(purple, 300); .sage-breadcrumbs--progressbar & { position: relative; - padding-bottom: sage-spacing(2xs); + padding-block-end: sage-spacing(2xs); &:active { color: $-breadcrumb-interactive-color; diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 5e9bd9a688..1a7ec3f13a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -231,8 +231,8 @@ $-btn-loading-min-height: rem(36px); .sage-dropdown__item > & { width: 100%; - padding-top: rem(9px); - padding-bottom: rem(9px); + padding-block-start: rem(9px); + padding-block-end: rem(9px); border-radius: 0; } @@ -245,7 +245,7 @@ $-btn-loading-min-height: rem(36px); } .sage-dropdown__trigger--select & { - height: rem(40px); + min-height: rem(40px); font-family: $-body-font-stack; font-weight: sage-font-weight(medium); border-width: 0; @@ -264,7 +264,7 @@ $-btn-loading-min-height: rem(36px); width: 100%; &::before { - margin-right: 0; + margin-inline-end: 0; } &::after { @@ -273,15 +273,15 @@ $-btn-loading-min-height: rem(36px); } .sage-input-group & { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .sage-badge & { display: flex; justify-content: center; position: absolute; - right: 0; + inset-inline-start: 0; width: $-btn-interactive-badge-icon-size; margin: auto 0; border-radius: 0 sage-border(radius-x-large) sage-border(radius-x-large) 0; @@ -298,11 +298,11 @@ $-btn-loading-min-height: rem(36px); } &:first-child:not(:last-child) { - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); } + & { - margin-left: 0; + margin-inline-start: 0; } &.sage-btn--tag::before { @@ -315,14 +315,14 @@ $-btn-loading-min-height: rem(36px); } .sage-sortable__item-actions & { &:not(:last-child) { - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); } } .sage-input-group & { position: absolute; z-index: sage-z-index(default, 1); - right: rem(1px); + inset-inline-end: rem(1px); bottom: rem(1px); height: rem(38px); background-color: sage-color(white); @@ -332,7 +332,7 @@ $-btn-loading-min-height: rem(36px); @include sage-focus-outline--update-color(transparent); &::before { - margin-right: 0; + margin-inline-end: 0; } &:focus { @@ -348,8 +348,8 @@ $-btn-loading-min-height: rem(36px); .sage-panel-controls__toolbar-btn-group > &:not(.sage-btn--secondary) { position: absolute; - right: 0; - bottom: 0; + inset-inline-start: 0; + inset-block-end: 0; min-height: calc(#{$-btn-toolbar-group-height} + #{rem(2px)}); /* expand to toolbar group height + border offset */ } @@ -364,34 +364,34 @@ $-btn-loading-min-height: rem(36px); } .sage-panel-controls__toolbar-btn-group &:not(:only-child) { - margin-left: rem(-1px); /* offset border overlap of multiple buttons */ + margin-inline-start: rem(-1px); /* offset border overlap of multiple buttons */ } .sage-panel-controls__toolbar-btn-group > &:first-child { - border-top-left-radius: sage-border(radius); - border-bottom-left-radius: sage-border(radius); + border-start-start-radius: sage-border(radius); + border-end-start-radius: sage-border(radius); } .sage-panel-controls__toolbar-btn-group > &:last-child { - border-top-right-radius: sage-border(radius); - border-bottom-right-radius: sage-border(radius); + border-start-end-radius: sage-border(radius); + border-end-end-radius: sage-border(radius); } .sage-toolbar__group > &:first-child, .sage-toolbar__group > .sage-dropdown:first-child .sage-dropdown__trigger > & { - border-top-left-radius: sage-border(radius-medium); - border-bottom-left-radius: sage-border(radius-medium); + border-start-start-radius: sage-border(radius-medium); + border-end-start-radius: sage-border(radius-medium); } .sage-toolbar__group > &:last-child, .sage-toolbar__group > .sage-dropdown:last-child .sage-dropdown__trigger > & { - border-top-right-radius: sage-border(radius-medium); - border-bottom-right-radius: sage-border(radius-medium); + border-start-end-radius: sage-border(radius-medium); + border-end-end-radius: sage-border(radius-medium); } .sage-toolbar__group > .sage-dropdown + &, .sage-toolbar__group > & + & { - margin-left: rem(-1px); /* offset border overlap of multiple buttons */ + margin-inline-start: rem(-1px); /* offset border overlap of multiple buttons */ } .sage-panel-controls__toolbar > &:hover, @@ -412,7 +412,7 @@ $-btn-loading-min-height: rem(36px); .sage-panel-controls__toolbar > &, .sage-panel-controls__pagination > & { &:not(:last-child) { - margin-right: sage-spacing(card); + margin-inline-end: sage-spacing(card); } } @@ -432,28 +432,28 @@ $-btn-loading-min-height: rem(36px); } &.sage-btn--disclosure { - padding-right: calc(1rem + #{$-btn-disclosure-left-padding}); + padding-inline-end: calc(1rem + #{$-btn-disclosure-left-padding}); &::after { @include sage-icon-base(caret-down, md, pine); position: absolute; - right: 1rem; + inset-inline-start: 1rem; } &[class*="icon-only"]::after { @include sage-icon-base(caret-down, xs, pine); - right: $-btn-disclosure-left-padding; + inset-inline-start: $-btn-disclosure-left-padding; font-weight: sage-font-weight(bold); } &[class*="icon-only"].sage-btn--small::after { - right: rem(12px); + inset-inline-start: rem(12px); } &:has(pds-icon) { - padding-right: $-btn-base-padding-inline; + padding-inline-end: $-btn-base-padding-inline; } } @@ -475,7 +475,7 @@ $-btn-loading-min-height: rem(36px); } &::after { - right: 7px; + left: 7px; font-size: 11px; font-weight: sage-font-weight(bold); } @@ -724,14 +724,14 @@ a.sage-btn { width: $-btn-icon-only-standard-size; height: $-btn-icon-only-standard-size; padding: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } // Remove class when Sage Label is fully deprecated in Products .sage-label & { position: absolute; - right: sage-spacing(xs); + inset-inline-start: sage-spacing(xs); } } } @@ -865,6 +865,6 @@ a.sage-btn { } .sage-btn-group--border-top { - padding-top: sage-spacing(lg); - border-top: 1px solid sage-color(grey, 300); + padding-block-start: sage-spacing(lg); + border-block-start: 1px solid sage-color(grey, 300); } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 7071da1a87..1c9c1cf3fe 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -33,12 +33,12 @@ $-sage-card-background: transparent; .sage-card--clear-padding-top, .sage-card--clear-padding-both { - padding-top: 0; + padding-block-start: 0; } .sage-card--clear-padding-bottom, .sage-card--clear-padding-both { - padding-bottom: 0; + padding-block-end: 0; } .sage-card--compact { @@ -141,8 +141,8 @@ $-sage-card-background: transparent; .sage-card__figure--bleed-bottom { width: calc(100% + #{2 * sage-spacing(sm)}); margin: 0 (-1 * sage-spacing(sm)) (-1 * sage-spacing(sm)); - border-top-left-radius: 0; - border-top-right-radius: 0; + border-start-start-radius: 0; + border-start-end-radius: 0; } .sage-card__figure--bleed-sides { @@ -154,8 +154,8 @@ $-sage-card-background: transparent; .sage-card__figure--bleed-top { width: calc(100% + #{2 * sage-spacing(sm)}); margin: (-1 * sage-spacing(sm)) (-1 * sage-spacing(sm)) 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; } .sage-card__figure--wistia { @@ -182,8 +182,8 @@ $-sage-card-background: transparent; .sage-card__header-layout { width: calc(100% + #{2 * sage-spacing(card)}); margin: (-1 * sage-spacing(card)) (-1 * sage-spacing(card)) (-1 * sage-spacing(card)); - border-top-left-radius: sage-border(radius-large); - border-top-right-radius: sage-border(radius-large); + border-start-start-radius: sage-border(radius-large); + border-start-end-radius: sage-border(radius-large); } .sage-card__list { @@ -195,27 +195,27 @@ $-sage-card-background: transparent; .sage-card__list-item { @include sage-grid-card-row(); - margin-bottom: rem(-1px); + margin-block-end: rem(-1px); padding: sage-spacing(xs) sage-spacing(); - border-top: sage-border(default); - border-bottom: sage-border(default); + border-block-start: sage-border(default); + border-block-end: sage-border(default); .sage-card__list--block-space-sm & { - padding-top: sage-spacing(sm); - padding-bottom: sage-spacing(sm); + padding-block-start: sage-spacing(sm); + padding-block-end: sage-spacing(sm); } .sage-card__list:first-child &:first-child { - border-top: transparent; + border-block-start: transparent; } .sage-card__list:last-child &:last-child { - border-bottom: transparent; + border-block-end: transparent; } &:first-child { .sage-card__list--hide-first-border & { - border-top: 0; + border-block-start: 0; } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss index ec73c612ca..0eca9cf669 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss @@ -16,40 +16,40 @@ $-card-highlight-size: rem(12px); .sage-card-highlight--right, .sage-card-highlight--left { - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: $-card-highlight-size; } .sage-card-highlight--right { - right: 0; - border-top-right-radius: $-card-highlight-border-radius; - border-bottom-right-radius: $-card-highlight-border-radius; + inset-inline-end: 0; + border-start-end-radius: $-card-highlight-border-radius; + border-end-end-radius: $-card-highlight-border-radius; } .sage-card-highlight--left { - left: 0; - border-top-left-radius: $-card-highlight-border-radius; - border-bottom-left-radius: $-card-highlight-border-radius; + inset-inline-start: 0; + border-start-start-radius: $-card-highlight-border-radius; + border-end-start-radius: $-card-highlight-border-radius; } .sage-card-highlight--top, .sage-card-highlight--bottom { - right: 0; - left: 0; + inset-inline-end: 0; + inset-inline-start: 0; height: $-card-highlight-size; } .sage-card-highlight--top { - top: 0; - border-top-left-radius: $-card-highlight-border-radius; - border-top-right-radius: $-card-highlight-border-radius; + inset-block-start: 0; + border-start-start-radius: $-card-highlight-border-radius; + border-start-end-radius: $-card-highlight-border-radius; } .sage-card-highlight--bottom { - bottom: 0; - border-bottom-left-radius: $-card-highlight-border-radius; - border-bottom-right-radius: $-card-highlight-border-radius; + inset-block-end: 0; + border-end-start-radius: $-card-highlight-border-radius; + border-end-end-radius: $-card-highlight-border-radius; } @each $-color-name, $-color-sliders in $sage-colors { diff --git a/packages/sage-assets/lib/stylesheets/components/_carousel.scss b/packages/sage-assets/lib/stylesheets/components/_carousel.scss index 372b5d812e..0f406ca823 100644 --- a/packages/sage-assets/lib/stylesheets/components/_carousel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_carousel.scss @@ -54,5 +54,5 @@ $-sage-carousel-inactive-color: sage-color(grey, 500); display: flex; justify-content: center; width: 100%; - margin-top: sage-spacing(sm); + margin-block-start: sage-spacing(sm); } diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss index 405c7f8835..faf2c0e3c9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss +++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss @@ -20,9 +20,9 @@ $-catalogue-item-image-height-mobile: rem(120px); "title aside" "content aside"; padding: sage-spacing() sage-spacing(); - margin-bottom: rem(-1px); - border-top: sage-border(default); - border-bottom: sage-border(default); + margin-block-end: rem(-1px); + border-block-start: sage-border(default); + border-block-end: sage-border(default); > * { min-width: 0; /* to prevent grid blowout */ @@ -33,13 +33,13 @@ $-catalogue-item-image-height-mobile: rem(120px); } &:last-child { - border-bottom: 0; + border-block-end: 0; } .sage-card__list--hide-first-border &, .sage-panel__list--hide-first-border & { &:first-child { - border-top: 0; + border-block-start: 0; } } @@ -101,7 +101,7 @@ $-catalogue-item-image-height-mobile: rem(120px); img { position: absolute; transform: translateY(-50%); - top: 50%; + inset-block-start: 50%; width: 100%; } } @@ -119,7 +119,7 @@ $-catalogue-item-image-height-mobile: rem(120px); flex-flow: row wrap; > :not(:last-child) { - margin-right: sage-spacing(); + margin-inline-end: sage-spacing(); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss b/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss index 5bfa016143..a01ff2c2c5 100644 --- a/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss +++ b/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss @@ -24,12 +24,12 @@ display: block; width: rem(8px); height: rem(8px); - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); border-radius: sage-border(radius); background-color: var(--item-color); } &:not(:last-child) { - margin-right: sage-spacing(); + margin-inline-end: sage-spacing(); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 4d14795dd9..2a8fe56017 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -42,13 +42,13 @@ $-checkbox-focus-outline-color: sage-color(purple, 300); } .sage-list & { - margin-bottom: calc(#{sage-spacing(card)} / 2); + margin-block-end: calc(#{sage-spacing(card)} / 2); } @include sage-form-toggle-parents; .sage-panel-controls__bulk-actions & { - margin-bottom: 0; + margin-block-end: 0; } .sage-panel-controls__bulk-actions > & { @@ -69,13 +69,13 @@ $-checkbox-focus-outline-color: sage-color(purple, 300); border: 1px solid sage-color(grey, 500); &:first-child { - border-top-left-radius: sage-border(radius); - border-bottom-left-radius: sage-border(radius); + border-start-start-radius: sage-border(radius); + border-end-start-radius: sage-border(radius); } &:last-child { - border-top-right-radius: sage-border(radius); - border-bottom-right-radius: sage-border(radius); + border-start-end-radius: sage-border(radius); + border-end-end-radius: sage-border(radius); } &:hover { @@ -92,7 +92,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 300); .sage-sortable &, .sage-toolbar > &, .sage-toolbar__group > & { - margin-bottom: 0; + margin-block-end: 0; } } @@ -125,7 +125,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 300); .sage-panel-controls__bulk-actions--checked & { display: unset; - padding-right: sage-spacing(sm); + padding-block-end: sage-spacing(sm); } } @@ -289,19 +289,19 @@ $-checkbox-focus-outline-color: sage-color(purple, 300); } .sage-checkbox & { - margin-top: rem(2px); + margin-block-start: rem(2px); } &.sage-checkbox, // spcificity that should apply only to `--standalone` variation .sage-panel-controls__bulk-actions-checkbox & { - margin-top: 0; + margin-block-start: 0; } } .sage-checkbox__message { @include sage-form-toggle-message; - margin-left: #{$-checkbox-size + $-checkbox-label-spacing}; - margin-top: rem(2px); + margin-inline-start: #{$-checkbox-size + $-checkbox-label-spacing}; + margin-block-start: rem(2px); .sage-checkbox--error &, .sage-checkbox__input:invalid + & { @@ -315,6 +315,6 @@ $-checkbox-focus-outline-color: sage-color(purple, 300); } .sage-checkbox__custom-content { - margin-left: #{$-checkbox-size + $-checkbox-label-spacing}; - margin-top: rem(2px); + margin-inline-start: #{$-checkbox-size + $-checkbox-label-spacing}; + margin-block-start: rem(2px); } diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index 7cb579aaf6..6608c6d148 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -107,7 +107,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); .sage-tabs--layout-default &:not(:last-child) { @media (max-width: sage-breakpoint(sm-max)) { - margin-bottom: sage-spacing(sm); + margin-block-end: sage-spacing(sm); } } @@ -149,7 +149,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); &.sage-choice--vertical-align-icon-start::#{$-choice-el-icon} { align-self: start; - margin-top: var(--icon-top-offset); + margin-block-start: var(--icon-top-offset); } @@ -166,7 +166,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); height: $-choice-radio-size; min-width: $-choice-radio-size; width: $-choice-radio-size; - margin: 0 sage-spacing(xs) 0 0; + margin-inline: 0 sage-spacing(xs); background-color: $-choice-radio-color-checked-inner; border-radius: sage-border(radius-round); border: sage-border(); @@ -189,7 +189,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); &.sage-choice--vertical-align-icon-start::#{$-choice-el-radio} { align-self: start; - margin-top: var(--icon-top-offset); + margin-block-start: var(--icon-top-offset); } } @@ -214,7 +214,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); overflow: hidden; width: rem(48px); height: rem(48px); - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); border-radius: sage-border(radius-small); > img { @@ -244,13 +244,13 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); .sage-choice__subtext { @extend %t-sage-body-xsmall; - margin-top: sage-spacing(2xs); + margin-block-start: sage-spacing(2xs); color: sage-color(grey, 700); } pds-icon { .sage-choice--vertical-align-icon-start & { align-self: start; - margin-top: var(--icon-top-offset); + margin-block-start: var(--icon-top-offset); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index 7397ea8a29..dfc209681e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -60,12 +60,12 @@ $-copy-text-color-hover: sage-color(grey, 950); flex-flow: row-reverse; align-items: center; max-width: 100%; - padding-right: sage-spacing(2xs); + padding-inline-end: sage-spacing(2xs); &::before { @include sage-icon-base(copy, md, pine); - margin-left: sage-spacing(sm); + margin-inline-start: sage-spacing(sm); color: $-copy-text-color; } diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index 718233514a..fa3ee6f0b5 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -55,7 +55,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card__footer { padding: $-data-card-padding; - border-top: sage-border(); + border-block-start: sage-border(); @each $-color-name, $-values in $-data-card-colors { @if $-color-name == default { @@ -75,7 +75,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card__header { padding: $-data-card-padding; - border-bottom: sage-border(); + border-block-end: sage-border(); @include sage-grid-card-row(); @@ -96,7 +96,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card__header-aside { display: inline-flex; align-self: baseline; - margin-left: auto; + margin-inline-start: auto; } .sage-data-card__title { @@ -109,23 +109,23 @@ $-data-card-padding: sage-spacing(xs); // .sage-data-card-group { - padding-left: 0; + padding-inline-start: 0; list-style: none; @include sage-grid-stack(); .sage-data-card-scroll-container & { gap: sage-spacing(sm); - padding-bottom: sage-spacing(sm); + padding-block-end: sage-spacing(sm); } .sage-data-card-scroll-container &:not(:last-child) { - padding-right: sage-spacing(md); - border-right: 1px solid sage-color(grey, 300); + padding-inline-end: sage-spacing(md); + border-inline-end: 1px solid sage-color(grey, 300); } .sage-data-card-scroll-container &:not(:first-child) { - padding-left: sage-spacing(md); + padding-inline-start: sage-spacing(md); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_description.scss b/packages/sage-assets/lib/stylesheets/components/_description.scss index db1bb6644a..47c077f4f7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_description.scss +++ b/packages/sage-assets/lib/stylesheets/components/_description.scss @@ -28,12 +28,12 @@ $-description-spacing: sage-spacing(sm); width: 100%; &:not(:last-child) { - padding-bottom: sage-spacing(md); - border-bottom: sage-border(); + padding-block-end: sage-spacing(md); + border-block-end: sage-border(); .sage-description--no-dividers & { - padding-bottom: 0; - border-bottom: 0; + padding-block-end: 0; + border-block-end: 0; } } @@ -82,5 +82,5 @@ $-description-spacing: sage-spacing(sm); .sage-description__action { display: block; - margin-top: $-description-spacing; + margin-block-start: $-description-spacing; } diff --git a/packages/sage-assets/lib/stylesheets/components/_dot.scss b/packages/sage-assets/lib/stylesheets/components/_dot.scss index cca3841570..bd250539f8 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dot.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss @@ -31,12 +31,12 @@ $-sage-dot-size--badge: rem(6px); } .sage-badge & { - margin-left: rem(6px); + margin-inline-start: rem(6px); } .sage-badge--large & { - margin-left: rem(12px); - margin-right: rem(-4px); + margin-inline-start: rem(12px); + margin-inline-end: rem(-4px); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_drawer.scss b/packages/sage-assets/lib/stylesheets/components/_drawer.scss index 401728921f..1e4460aa8e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_drawer.scss +++ b/packages/sage-assets/lib/stylesheets/components/_drawer.scss @@ -35,7 +35,7 @@ } .sage-drawer__close { - margin-left: auto; // preserves alignment when only close button is present + margin-inline-start: auto; // preserves alignment when only close button is present } .sage-drawer-compact__input-wrapper { @@ -45,12 +45,12 @@ input { width: 100%; - margin-bottom: 0; + margin-block-end: 0; padding: rem(20px) 1rem; - padding-right: rem(60px); + padding-inline-end: rem(60px); font-size: sage-font-size(body-sm); - border-bottom-left-radius: sage-border(radius-large); - border-bottom-right-radius: sage-border(radius-large); + border-end-start-radius: sage-border(radius-large); + border-end-end-radius: sage-border(radius-large); border: 0; &:focus { @@ -62,7 +62,7 @@ .sage-btn { flex-shrink: 0; position: absolute; - right: sage-spacing(sm); + inset-inline-end: sage-spacing(sm); &:not(.sage-btn--subtle) { padding: sage-spacing(xs); diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 8bc011f8bc..70fe9fbe06 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -57,7 +57,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-panel-controls__toolbar > & { &:not(:last-child) { - margin-right: sage-spacing(panel); + margin-inline-end: sage-spacing(panel); } } @@ -70,19 +70,19 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); border-radius: 0; &:first-child { - border-top-left-radius: sage-border(radius); - border-bottom-left-radius: sage-border(radius); + border-start-start-radius: sage-border(radius); + border-end-start-radius: sage-border(radius); } &:last-child { - border-top-right-radius: sage-border(radius); - border-bottom-right-radius: sage-border(radius); + border-start-end-radius: sage-border(radius); + border-end-end-radius: sage-border(radius); } } .sage-panel-controls__bulk-actions--checked & { &:last-child { - margin-left: rem(-1px); /* offset border overlap of multiple buttons */ + margin-inline-start: rem(-1px); /* offset border overlap of multiple buttons */ } } @@ -116,8 +116,8 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); align-items: center; position: relative; width: 100%; - padding-left: sage-spacing(xs); - padding-right: sage-spacing(xs); + padding-inline-start: sage-spacing(xs); + padding-inline-end: sage-spacing(xs); list-style: none; @extend %t-sage-body; @@ -136,15 +136,15 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); } .sage-dropdown__item--border-before { - padding-top: sage-spacing(xs); - margin-top: sage-spacing(xs); - border-top: 1px solid sage-color(grey, 200); + padding-block-start: sage-spacing(xs); + margin-block-start: sage-spacing(xs); + border-block-start: 1px solid sage-color(grey, 200); } .sage-dropdown__item--border-after { - padding-bottom: sage-spacing(xs); - margin-bottom: sage-spacing(xs); - border-bottom: 1px solid sage-color(grey, 200); + padding-block-end: sage-spacing(xs); + margin-block-end: sage-spacing(xs); + border-block-end: 1px solid sage-color(grey, 200); } .sage-dropdown__item--disabled { @@ -216,8 +216,8 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--with-options > & { max-width: calc(100% - #{$-dropdown-option-menu-size}); - padding-right: sage-spacing(md); - margin-right: -1 * sage-spacing(2xs); + padding-inline-end: sage-spacing(md); + margin-inline-end: -1 * sage-spacing(2xs); } .sage-dropdown__item--disabled &, @@ -267,7 +267,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); flex: 1; .sage-dropdown__item-checkbox + & { - margin-left: sage-spacing(xs); + margin-inline-start: sage-spacing(xs); } } @@ -313,11 +313,11 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); background-attachment: local, local, scroll, scroll; :not(.sage-dropdown--anchor-right) > .sage-dropdown__panel & { - left: 0; + inset-inline-start: 0; } .sage-dropdown--anchor-right > .sage-dropdown__panel & { - right: 0; + inset-inline-start: 0; } .sage-dropdown--small & { @@ -337,7 +337,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); display: none; z-index: sage-z-index(negative); position: absolute; - top: calc(100% + #{sage-spacing(xs)}); + inset-block-start: calc(100% + #{sage-spacing(xs)}); // Temporarily removing animation as it causes // a positioning issue with nested fixed positioned elements // transform: rotate3d(1, 0, 0, -90deg); @@ -352,18 +352,18 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); // In the event that this dropdown is at the bottom of the page, add some margin below // to prevent it from touching the bottom of the viewport/page when it expands - margin-bottom: sage-spacing(); /* stylelint-disable-line order/properties-order */ + margin-block-end: sage-spacing(); /* stylelint-disable-line order/properties-order */ .sage-dropdown--anchor-left & { - left: 0; + inset-inline-start: 0; } .sage-dropdown--anchor-right & { - right: 0; + inset-inline-start: 0; } .sage-dropdown--anchor-center & { - left: 50%; + inset-inline-start: 50%; transform: translateX(-50%); } @@ -410,10 +410,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); display: block; position: fixed; z-index: sage-z-index(default, 90); - top: 0; - right: 0; - bottom: 0; - left: 0; + inset-block-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + inset-inline-start: 0; } } diff --git a/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss b/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss index 72f8966243..83b106b7a4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss @@ -17,19 +17,19 @@ $-dynamic-select-open-arrow: rotate(180deg) scaleX(-1); /* stylelint-disable selector-max-compound-selectors */ .sage-dynamic-select .sage-dynamic-select__data { - bottom: sage-spacing(xs); - left: 50%; + inset-block-end: sage-spacing(xs); + inset-inline-start: 50%; } // empty state // .sage-dynamic-select { position: relative; .select2-container--sage .sage-select__arrow::before { - top: rem(3px); + inset-block-start: rem(3px); } .select2-container--sage .select2-dropdown--below { - margin-top: sage-spacing(xs); + margin-block-start: sage-spacing(xs); } .select2-container--sage .select2-selection--single.sage-select__field { @@ -71,7 +71,7 @@ $-dynamic-select-open-arrow: rotate(180deg) scaleX(-1); // selected state // .sage-dynamic-select.sage-select--value-selected .select2-container--sage { .sage-select__arrow::before { - top: rem(6px); + inset-block-start: rem(6px); } .select2-selection--single.sage-select__field { height: $-dynamic-select-selected-height; diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss index 583dd707f4..065b4142c5 100644 --- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss +++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss @@ -25,8 +25,8 @@ $-empty-state-icon-compact-size: rem(56px); .sage-empty-state--center { position: absolute; - left: 50%; - top: 50%; + inset-inline-start: 50%; + inset-block-start: 50%; transform: translate(-50%, -50%); padding: sage-spacing(); } diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index 754f3ac421..b015c93e90 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -17,13 +17,13 @@ $-expandable-card-padding-xs: sage-spacing(xs); border: 1px solid $-expandable-card-border-color; &:not(:last-child) { - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } .sage-expandable-card__header { padding: sage-spacing(); - padding-bottom: 0; - margin-bottom: -#{sage-spacing(xs)}; + padding-block-end: 0; + margin-block-end: -#{sage-spacing(xs)}; } } } @@ -40,7 +40,7 @@ $-expandable-card-padding-xs: sage-spacing(xs); visibility: visible; overflow: initial; height: auto; - margin-top: sage-spacing(xs); + margin-block-start: sage-spacing(xs); } .sage-accordion & { @@ -48,22 +48,22 @@ $-expandable-card-padding-xs: sage-spacing(xs); } .sage-accordion [aria-expanded="false"] + & { - padding-top: 0; - padding-bottom: 0; + padding-block-start: 0; + padding-block-end: 0; } > :last-child { - margin-bottom: 0; + margin-block-end: 0; } } .sage-expandable-card__body-bordered { - padding-left: $-expandable-card-padding; - padding-right: $-expandable-card-padding; + padding-inline-start: $-expandable-card-padding; + padding-inline-end: $-expandable-card-padding; .sage-expandable-card--expanded & { - padding-top: $-expandable-card-padding; - padding-bottom: $-expandable-card-padding; + padding-block-start: $-expandable-card-padding; + padding-block-end: $-expandable-card-padding; border-radius: $-expandable-card-border-radius; border: 1px solid $-expandable-card-border-color; background: $-expandable-card-bg-color; @@ -77,7 +77,7 @@ $-expandable-card-padding-xs: sage-spacing(xs); pds-icon { justify-content: center; transform: rotateZ(90deg); - margin-right: rem(8px); + margin-inline-end: rem(8px); font-size: rem(8px); transition: transform 0.125s linear; } diff --git a/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss b/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss index 527f57e7a8..b3d6163332 100644 --- a/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss +++ b/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss @@ -73,11 +73,11 @@ $-feature-toggle-image-height-mobile: rem(96px); .sage-feature-toggle__form-item { display: flex; align-items: center; - margin-bottom: sage-spacing(md); + margin-block-end: sage-spacing(md); @media (min-width: sage-breakpoint(sm-min)) { - margin-right: sage-spacing(md); - margin-bottom: 0; + margin-inline-end: sage-spacing(md); + margin-block-end: 0; } &:first-of-type { @@ -85,7 +85,7 @@ $-feature-toggle-image-height-mobile: rem(96px); } &:last-of-type { - margin-right: 0; + margin-inline-end: 0; } } @@ -93,7 +93,7 @@ $-feature-toggle-image-height-mobile: rem(96px); display: flex; flex-wrap: wrap; align-items: center; - margin-top: sage-spacing(xs); + margin-block-start: sage-spacing(xs); } .sage-feature-toggle__aside { @@ -109,15 +109,15 @@ $-feature-toggle-image-height-mobile: rem(96px); .sage-feature-toggle__label { align-self: center; - margin-left: auto; + margin-inline-start: auto; @media (max-width: sage-breakpoint(md-min)) { - margin-left: 0; + margin-inline-start: 0; } } .sage-feature-toggle__link-item { - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); } .sage-feature-toggle__image-link { diff --git a/packages/sage-assets/lib/stylesheets/components/_form_input.scss b/packages/sage-assets/lib/stylesheets/components/_form_input.scss index c823c22f58..bd436ebe5b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_input.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_input.scss @@ -27,20 +27,20 @@ $-input-text-height: sage-font-size(body); .sage-toolbar & { height: auto; width: 100%; - margin-bottom: 0; + margin-block-end: 0; } .sage-toolbar__group & { &:first-child:not(:only-child) .sage-input__field { border-radius: sage-border(radius-medium); - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } &:last-child .sage-input__field { border-radius: sage-border(radius-medium); - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } } @@ -59,7 +59,7 @@ $-input-text-height: sage-font-size(body); .sage-form-field--error { .sage-upload-card & { - margin-top: sage-spacing(sm); + margin-block-start: sage-spacing(sm); } } @@ -89,23 +89,23 @@ $-input-text-height: sage-font-size(body); grid-row: 2 / 3; grid-column: 1 / 2; top: 0; - left: sage-spacing(sm); - padding-right: sage-spacing(2xs); + inset-inline-start: sage-spacing(sm); + padding-inline-end: sage-spacing(2xs); } .sage-input__affix--suffix { grid-row: 2 / 3; grid-column: -1 / -2; top: 0; - right: sage-spacing(sm); - padding-left: sage-spacing(2xs); + inset-inline-end: sage-spacing(sm); + padding-inline-start: sage-spacing(2xs); } .sage-input__label { @include sage-form-field-label; grid-area: label; - margin-bottom: sage-spacing(xs); + margin-block-end: sage-spacing(xs); // input labels within toolbar groups are visually hidden to maintain alignment .sage-toolbar__group & { @@ -125,11 +125,11 @@ $-input-text-height: sage-font-size(body); padding: sage-spacing(xs) sage-spacing(sm); .sage-input--has-icon & { - padding-right: $-input-popover-size; + padding-inline-end: $-input-popover-size; } .sage-input--has-popover & { - padding-right: $-input-popover-size; + padding-inline-end: $-input-popover-size; } .sage-toolbar__group & { diff --git a/packages/sage-assets/lib/stylesheets/components/_form_section.scss b/packages/sage-assets/lib/stylesheets/components/_form_section.scss index 5e183fc481..52cbd2e885 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_section.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_section.scss @@ -6,20 +6,20 @@ .sage-form-section { - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } // TODO: refactor extends following final design of form section .sage-form-section__info { @media (max-width: sage-breakpoint(md-max)) { - margin-bottom: sage-spacing(md); + margin-block-end: sage-spacing(md); } } .sage-form-section__title { - margin-top: rem(12px); - margin-bottom: sage-spacing(md); + margin-block-start: rem(12px); + margin-block-end: sage-spacing(md); } .sage-form-section__subtitle { @@ -47,7 +47,7 @@ flex-direction: column; > :last-child { - margin-bottom: 0; + margin-block-end: 0; } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss index 5de77e99bf..778d1b6436 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_select.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_select.scss @@ -48,7 +48,7 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $- @include sage-form-field-label; grid-area: label; - margin-bottom: $-select-margin-label; + margin-block-end: $-select-margin-label; } .sage-select__arrow { @@ -84,7 +84,8 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $- grid-area: field; position: relative; height: $-select-height; - padding: 0 ($-select-padding-x + $-select-arrow-icon-width + rem(4px)) 0 $-select-padding-x; + padding-block: 0; + padding-inline: $-select-padding-x ($-select-padding-x + $-select-arrow-icon-width + rem(4px)); outline: none; transition: border map-get($sage-transitions, default); cursor: pointer; diff --git a/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss b/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss index b9b76e4468..46bffc2f82 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss @@ -37,7 +37,7 @@ $-textarea-color-default: sage-color(grey, 800); @include sage-form-field-label; grid-area: label; - margin-bottom: $-textarea-label-margin; + margin-block-end: $-textarea-label-margin; } .sage-textarea__field { diff --git a/packages/sage-assets/lib/stylesheets/components/_hero.scss b/packages/sage-assets/lib/stylesheets/components/_hero.scss index 6b264d97ee..f7106a367c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hero.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hero.scss @@ -140,7 +140,7 @@ $-hero-play-icon-background-color: sage-color(white); .sage-hero__artwork-image { position: absolute; - top: 50%; + inset-block-start: 50%; transform: translateY(-50%); width: 100%; diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss index 19b858033b..830c882ffc 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hint.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss @@ -17,7 +17,7 @@ $-hint-background-color: sage-color(grey, 200); .sage-hint__icon { display: flex; - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); } .sage-hint__content { diff --git a/packages/sage-assets/lib/stylesheets/components/_icon.scss b/packages/sage-assets/lib/stylesheets/components/_icon.scss index c4e6cffea5..0404f40612 100644 --- a/packages/sage-assets/lib/stylesheets/components/_icon.scss +++ b/packages/sage-assets/lib/stylesheets/components/_icon.scss @@ -75,7 +75,7 @@ $-icon-beside-type: ( .sage-tab--icon-#{$icon-name}::before { @include sage-icon-base($icon-name, md, pine); - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); } .sage-choice--icon-#{$icon-name}::before { @@ -115,7 +115,7 @@ $-icon-beside-type: ( white-space: nowrap; &::before { - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); @include sage-icon-base($icon-name, md, pine); } @@ -209,3 +209,9 @@ $-icon-beside-type: ( --background-color: #{sage-color-combo($-color, default, background)}; } } + +// flip icons with directional names for RTL - MUST LIVE IN PINE +[dir="rtl"] pds-icon[name*="left"], +[dir="rtl"] pds-icon[name*="right"] { + transform: scale(-1); +} diff --git a/packages/sage-assets/lib/stylesheets/components/_icon_list.scss b/packages/sage-assets/lib/stylesheets/components/_icon_list.scss index c4086a0dd6..ffea29cd90 100644 --- a/packages/sage-assets/lib/stylesheets/components/_icon_list.scss +++ b/packages/sage-assets/lib/stylesheets/components/_icon_list.scss @@ -6,7 +6,7 @@ .sage-icon-list { - padding-left: 0; + padding-inline-start: 0; } .sage-icon-list-item { @@ -14,23 +14,23 @@ list-style: none; &:not(:last-child) { - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } } .sage-icon-list-item__bullet { min-width: rem(20px); - margin-right: sage-spacing(sm); - padding-top: rem(3px); + margin-inline-end: sage-spacing(sm); + padding-block-start: rem(3px); text-align: center; } .sage-icon-list-item__bullet--checkbox { - padding-top: sage-spacing(2xs); + padding-block-start: sage-spacing(2xs); } .sage-icon-list-item__bullet--radio { - padding-top: sage-spacing(2xs); + padding-block-start: sage-spacing(2xs); } .sage-icon-list-item__body { @@ -41,13 +41,13 @@ } > p:not(:last-child) { - margin-bottom: sage-spacing(xs); + margin-block-end: sage-spacing(xs); } } .sage-icon-list-item__label { @extend %t-sage-heading-6; - margin-bottom: sage-spacing(2xs); + margin-block-end: sage-spacing(2xs); } .sage-icon-list-item__label-subtext { @@ -57,6 +57,6 @@ .sage-icon-list-item__title { @extend %t-sage-heading-6; - margin-bottom: sage-spacing(2xs); + margin-block-end: sage-spacing(2xs); } diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss index b2dbc95076..bc03047598 100644 --- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss +++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss @@ -10,7 +10,7 @@ $-indicator-size: rem(6px); .sage-indicator-list { display: flex; align-items: center; - padding-left: 0; + padding-inline-start: 0; } .sage-indicator { @@ -24,13 +24,13 @@ $-indicator-size: rem(6px); } &:not(:last-child) { - margin-right: 8px; + margin-inline-end: 8px; } } .sage-indicator-text { .sage-modal & { - margin-top: sage-spacing(2xs); + margin-block-start: sage-spacing(2xs); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_label.scss b/packages/sage-assets/lib/stylesheets/components/_label.scss index 9054ab9640..ece6131882 100644 --- a/packages/sage-assets/lib/stylesheets/components/_label.scss +++ b/packages/sage-assets/lib/stylesheets/components/_label.scss @@ -89,7 +89,7 @@ $-label-statuses: ( #{$-color-modifier}.sage-label--interactive { &.sage-label--interactive-right-cta-affordance .sage-label__value { - padding-right: $-label-interactive-icon-size-decor; + padding-inline-end: $-label-interactive-icon-size-decor; } .sage-label__value { @@ -125,7 +125,7 @@ $-label-statuses: ( display: flex; justify-content: center; position: absolute; - right: 0; + inset-inline-end: 0; width: $-label-interactive-icon-size-decor; min-height: $-label-interactive-icon-size; margin: auto 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss index ff85c37cca..a59d8b4c5c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_link.scss +++ b/packages/sage-assets/lib/stylesheets/components/_link.scss @@ -157,8 +157,8 @@ $-link-base-styles: ( .sage-link--launch .t-sage--truncate, .sage-type a[target="_blank"]:not(.sage-link--no-launch):not([class*="icon-right-launch"]) .t-sage--truncate { &::after { - margin-left: sage-spacing(2xs); - margin-right: sage-spacing(2xs); + margin-inline-start: sage-spacing(2xs); + margin-inline-end: sage-spacing(2xs); @include sage-icon-base(launch, sm, pine); } } @@ -196,7 +196,7 @@ $-link-base-styles: ( } .sage-page-heading__title & { - margin-left: sage-spacing(xs); + margin-inline-start: sage-spacing(xs); } } @@ -205,14 +205,14 @@ $-link-base-styles: ( align-items: center; &::before { - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); } } .sage-link--help-icon-only { display: inline-flex; align-items: center; - margin-left: sage-spacing(2xs); + margin-inline-start: sage-spacing(2xs); @include sage-focus-outline( $outline-offset-inline: 4px, $outline-offset-block: 4px, diff --git a/packages/sage-assets/lib/stylesheets/components/_lists.scss b/packages/sage-assets/lib/stylesheets/components/_lists.scss index bf1e7c4fbb..e22de8bc7a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_lists.scss +++ b/packages/sage-assets/lib/stylesheets/components/_lists.scss @@ -6,17 +6,17 @@ .sage-list { - padding-left: 0; + padding-inline-start: 0; list-style: none; - + // TODO: These styles interfered with the new List component and should be deprecated. &:not(.sage-list--inline-compact):not(.sage-list--inline-fit-compact):not(.sage-list__item) { - margin-right: -1 * sage-spacing(sm); - margin-left: -1 * sage-spacing(sm); + margin-inline-end: -1 * sage-spacing(sm); + margin-inline-start: -1 * sage-spacing(sm); > li { - margin-right: sage-spacing(sm); - margin-left: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); + margin-inline-start: sage-spacing(sm); } } } @@ -30,11 +30,11 @@ .sage-list--inline-fit, .sage-list--inline-fit-compact { display: flex; - + @media (max-width: 767px) { flex-flow: row wrap; } - + @media (min-width: 768px) { flex-flow: row nowrap; } diff --git a/packages/sage-assets/lib/stylesheets/components/_loader.scss b/packages/sage-assets/lib/stylesheets/components/_loader.scss index bf2994d3a0..0af29f7570 100644 --- a/packages/sage-assets/lib/stylesheets/components/_loader.scss +++ b/packages/sage-assets/lib/stylesheets/components/_loader.scss @@ -30,10 +30,10 @@ $-loader-lower-opacity: 0.4; .sage-btn--is-loading & { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset-block-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + inset-inline-start: 0; margin: auto; } @@ -56,6 +56,12 @@ $-loader-lower-opacity: 0.4; border-radius: sage-border(radius); background-color: $-loader-bar-bg-color; + [dir="rtl"] & { + left: initial; + right: 50%; + transform: translate(50%, -50%); + } + &::before, &::after { content: ""; @@ -89,7 +95,7 @@ $-loader-lower-opacity: 0.4; .sage-loader__spinner--loading-button { width: sage-spacing(sm); height: sage-spacing(sm); - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); } .sage-loader__spinner-path { @@ -133,7 +139,7 @@ $-loader-lower-opacity: 0.4; } .sage-loader__text { - margin-top: sage-spacing(sm); + margin-block-start: sage-spacing(sm); } @keyframes loader-bar { diff --git a/packages/sage-assets/lib/stylesheets/components/_menu_button.scss b/packages/sage-assets/lib/stylesheets/components/_menu_button.scss index 95dac5ec08..fa79e6412e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_menu_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_menu_button.scss @@ -45,8 +45,8 @@ $-menubtn-focus-outline-color: currentColor; position: relative; height: $-menubtn-toggle-size; width: $-menubtn-toggle-size; - margin-right: sage-spacing(); - margin-bottom: 0; + margin-inline-end: sage-spacing(); + margin-block-end: 0; cursor: pointer; &::after { @@ -83,7 +83,7 @@ $-menubtn-focus-outline-color: currentColor; transition: transform 0.2s ease-out, opacity 0.15s ease-in-out; &:not(:first-child) { - margin-top: rem(6px); + margin-block-start: rem(6px); } &:nth-child(1) { diff --git a/packages/sage-assets/lib/stylesheets/components/_modal.scss b/packages/sage-assets/lib/stylesheets/components/_modal.scss index 22e83c2afc..5e7538c8d2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_modal.scss +++ b/packages/sage-assets/lib/stylesheets/components/_modal.scss @@ -117,18 +117,18 @@ $-modal-inner-size: sage-container(md); } @media (min-width: sage-breakpoint(lg-min)) { - margin-top: $-modal-margin-lg; + margin-block-start: $-modal-margin-lg; .sage-drawer & { - margin-top: 0; + margin-block-start: 0; } } @media (min-width: sage-breakpoint(xl-min)) { - margin-top: $-modal-margin-xl; + margin-block-start: $-modal-margin-xl; .sage-drawer & { - margin-top: 0; + margin-block-start: 0; } } @@ -206,8 +206,8 @@ $-modal-inner-size: sage-container(md); .sage-modal--fullscreen & { position: fixed; z-index: sage-z-index(default, 1); - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; margin: 0; padding: sage-spacing(sm) $-modal-padding-x; background-color: sage-color(white); @@ -244,11 +244,11 @@ $-modal-inner-size: sage-container(md); } .sage-modal__header-aside { - margin-left: auto; + margin-inline-start: auto; .sage-modal__header--has-header-actions & { order: -2; /* causes the header-aside area to be first in the visual order */ - margin-left: 0; + margin-inline-start: 0; } } @@ -272,7 +272,7 @@ $-modal-inner-size: sage-container(md); margin: 0; > :first-child { - margin-top: sage-spacing(xs); + margin-block-start: sage-spacing(xs); } } @@ -285,20 +285,20 @@ $-modal-inner-size: sage-container(md); } .sage-drawer--compact & { - margin-left: 0; - margin-right: 0; - padding-left: rem(20px); - padding-right: rem(20px); - padding-bottom: sage-spacing(); - border-bottom: sage-border(default); + margin-inline-start: 0; + margin-inline-end: 0; + padding-inline-start: rem(20px); + padding-inline-end: rem(20px); + padding-block-end: sage-spacing(); + border-block-end: sage-border(default); } > :last-child { - margin-bottom: 0; + margin-block-end: 0; } &:not([class*="sage-modal__content--spacing-"]) p + p { - margin-top: sage-spacing(); + margin-block-start: sage-spacing(); } @include clearfix; @@ -331,7 +331,7 @@ $-modal-inner-size: sage-container(md); } .sage-modal__footer-aside { - margin-right: auto; + margin-inline-end: auto; } @media (prefers-reduced-motion) { diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index aaaee45f44..f401b72b35 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -14,7 +14,7 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__icon { display: inline-flex; - margin-right: $-nav-icon-spacing; + margin-inline-end: $-nav-icon-spacing; } .sage-nav__label { @@ -41,7 +41,7 @@ $-nav-subitem-border-width: rem(2px); display: flex; align-items: center; padding: rem(4px) rem(12px); - margin-bottom: $-nav-icon-spacing; + margin-block-end: $-nav-icon-spacing; text-decoration: none; color: $-nav-color-text; border-radius: sage-border(radius-medium); @@ -73,11 +73,11 @@ $-nav-subitem-border-width: rem(2px); display: inline-block; &:first-child { - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); } &:not(:first-child) { - margin-left: sage-spacing(xs); + margin-inline-start: sage-spacing(xs); } } @@ -106,16 +106,16 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__list--sub-with-icon, .sage-nav__list--sub { > li:not(:last-child) { - margin-bottom: sage-spacing(2xs); + margin-block-end: sage-spacing(2xs); } } .sage-nav__list--sub { - margin-left: sage-spacing(); + margin-inline-start: sage-spacing(); } .sage-nav__list--sub-with-icon { - margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2)); - padding-left: sage-spacing(sm); - border-left: $-nav-subitem-border-width solid sage-color(grey, 300); + margin-inline-start: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2)); + padding-inline-start: sage-spacing(sm); + border-inline-start: $-nav-subitem-border-width solid sage-color(grey, 300); } diff --git a/packages/sage-assets/lib/stylesheets/components/_next_best_action.scss b/packages/sage-assets/lib/stylesheets/components/_next_best_action.scss index 31a7302d4e..9aeee5e2d2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_next_best_action.scss +++ b/packages/sage-assets/lib/stylesheets/components/_next_best_action.scss @@ -52,11 +52,11 @@ $-next-best-action-colors: ( } .sage-next-best-action__title { - margin-bottom: sage-spacing(xs); + margin-block-end: sage-spacing(xs); } .sage-next-best-action__description { - margin-bottom: sage-spacing(sm); + margin-block-end: sage-spacing(sm); } .sage-next-best-action__close { diff --git a/packages/sage-assets/lib/stylesheets/components/_overlay.scss b/packages/sage-assets/lib/stylesheets/components/_overlay.scss index 03389a62ac..a9202d1485 100644 --- a/packages/sage-assets/lib/stylesheets/components/_overlay.scss +++ b/packages/sage-assets/lib/stylesheets/components/_overlay.scss @@ -16,8 +16,8 @@ $-overlay-transition-backdrop-filter: backdrop-filter 0.7s ease-in-out; visibility: hidden; position: absolute; z-index: $-overlay-z-index; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; height: 0; width: 0; background-color: $-overlay-bg-color; diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 2042aa956c..13c09531a5 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -65,7 +65,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: title; gap: sage-spacing(xs); min-width: 0; - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); } .sage-page-heading__title { @@ -75,7 +75,7 @@ $-page-heading-image-height-mobile: rem(120px); .sage-page-heading__intro { grid-area: intro; - margin-top: rem(12px); + margin-block-start: rem(12px); color: sage-color(grey, 800); } @@ -84,28 +84,28 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 300); + background: sage-color(grey, 100); border-radius: sage-border(radius); border: sage-border(); img { position: absolute; transform: translateY(-50%); - top: 50%; + inset-block-start: 50%; width: 100%; } @media (max-width: sage-breakpoint(sm-max)) { - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } @media (min-width: sage-breakpoint(md-min)) { - margin-right: sage-spacing(); + margin-inline-end: sage-spacing(); } } .sage-page-heading__crumbs { grid-area: crumbs; - margin-bottom: sage-spacing(sm); + margin-block-end: sage-spacing(sm); } .sage-page-heading__toolbar { @@ -113,7 +113,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: toolbar; flex-wrap: wrap; gap: sage-spacing(); - margin-top: sage-spacing(); + margin-block-start: sage-spacing(); // NOTE: Icon generation consolidated in `core/_icons.scss` } @@ -130,7 +130,7 @@ $-page-heading-image-height-mobile: rem(120px); @media (max-width: sage-breakpoint(sm-max)) { flex-wrap: wrap; justify-content: flex-start; - margin-top: sage-spacing(sm); + margin-block-start: sage-spacing(sm); } @media (min-width: sage-breakpoint()) { @@ -145,7 +145,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: secondary; justify-content: flex-end; align-items: center; - margin-top: sage-spacing(sm); + margin-block-start: sage-spacing(sm); color: sage-color(grey, 700); font-style: italic; @media (max-width: sage-breakpoint()) { diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss index 695cc76ca9..ddf1ae3865 100644 --- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss +++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss @@ -23,7 +23,7 @@ $-pagination-focus-ring-color: sage-color(purple, 300); flex-grow: 1; .sage-panel-controls__default-controls & { - margin-right: sage-spacing(); + margin-inline-end: sage-spacing(); } } @@ -43,12 +43,12 @@ $-pagination-focus-ring-color: sage-color(purple, 300); display: flex; flex-flow: row wrap; gap: sage-spacing(2xs); - padding-left: 0; + padding-inline-start: 0; list-style-type: none; border-radius: $-pagination-radius; .sage-panel-controls & { - margin-left: auto; + margin-inline-start: auto; } } @@ -61,11 +61,11 @@ $-pagination-focus-ring-color: sage-color(purple, 300); } .sage-panel-controls--show-pagination & { - margin-right: rem(12px); + margin-inline-end: rem(12px); border: 0; &:last-of-type { - margin-right: 0; + margin-inline-end: 0; } } } @@ -102,6 +102,10 @@ $-pagination-focus-ring-color: sage-color(purple, 300); content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'%3E%3Cpath fill-rule='evenodd' d='M11.805.862c.26.26.26.682 0 .943L5.609 8l6.196 6.195a.667.667 0 1 1-.943.943L4.195 8.471a.667.667 0 0 1 0-.942L10.862.862c.26-.26.682-.26.943 0Z'%3E%3C/path%3E%3C/svg%3E"); display: inline-block; color: currentColor; + + [dir="rtl"] & { + transform: rotate(180deg); + } } .sage-pagination__item:last-of-type .sage-pagination__page::before { @@ -109,6 +113,10 @@ $-pagination-focus-ring-color: sage-color(purple, 300); content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'%3E%3Cpath fill-rule='evenodd' d='M4.195.862c.26-.26.683-.26.943 0l6.667 6.667c.26.26.26.682 0 .942l-6.667 6.667a.667.667 0 0 1-.943-.943L10.39 8 4.195 1.805a.667.667 0 0 1 0-.943Z'%3E%3C/path%3E%3C/svg%3E"); display: inline-block; color: currentColor; + + [dir="rtl"] & { + transform: rotate(180deg); + } } .sage-pagination__page-text { @@ -135,13 +143,13 @@ $-pagination-focus-ring-color: sage-color(purple, 300); pointer-events: none; [class*="sage-icon"] { - margin-top: sage-spacing(xs); + margin-block-start: sage-spacing(xs); } } .sage-pagination__count { @extend %t-sage-body; - padding-right: sage-spacing(); + padding-inline-end: sage-spacing(); /* stylelint-disable selector-max-compound-selectors */ .sage-panel-controls--show-pagination .sage-panel-controls__bulk-actions--checked + .sage-panel-controls__toolbar .sage-pagination & { @@ -151,5 +159,5 @@ $-pagination-focus-ring-color: sage-color(purple, 300); } .sage-pagination__count--solo { - padding-right: 0; + padding-inline-end: 0; } diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index be09769dc7..77bea7597e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -21,12 +21,12 @@ .sage-panel--clear-padding-top, .sage-panel--clear-padding-both { - padding-top: 0; + padding-block-start: 0; } .sage-panel--clear-padding-bottom, .sage-panel--clear-padding-both { - padding-bottom: 0; + padding-block-end: 0; } .sage-panel__divider { @@ -101,7 +101,7 @@ color: sage-color(grey, 950); + .sage-panel__subtext { - margin-top: sage-spacing(xs); + margin-block-start: sage-spacing(xs); } } @@ -129,26 +129,26 @@ } .sage-panel__list-item { - margin-bottom: rem(-1px); + margin-block-end: rem(-1px); padding: sage-spacing(sm) sage-spacing(); - border-top: sage-border(default); - border-bottom: sage-border(default); + border-block-start: sage-border(default); + border-block-end: sage-border(default); @include sage-grid-card-row; .sage-panel__list--block-space-xs & { - padding-top: sage-spacing(xs); - padding-bottom: sage-spacing(xs); + padding-block-start: sage-spacing(xs); + padding-block-end: sage-spacing(xs); } .sage-panel__list--block-space-md & { - padding-top: sage-spacing(); - padding-bottom: sage-spacing(); + padding-block-start: sage-spacing(); + padding-block-end: sage-spacing(); } &:first-child { .sage-panel__list--hide-first-border & { - border-top: 0; + border-block-start: 0; } } } @@ -166,7 +166,7 @@ } .sage-panel__stack { - padding-left: 0; + padding-inline-start: 0; @include sage-grid-stack(); } diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss index d4cf57bf16..1bc200265c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss @@ -17,9 +17,9 @@ content: ""; display: block; height: 0; - margin-right: -1 * sage-spacing(panel); - margin-left: -1 * sage-spacing(panel); - border-top: 1px solid sage-color(grey, 300); + margin-inline-end: -1 * sage-spacing(panel); + margin-inline-start: -1 * sage-spacing(panel); + border-block-start: 1px solid sage-color(grey, 300); } .sage-search { @@ -59,7 +59,7 @@ flex: 1; &:not(:last-child) { - margin-right: sage-spacing(panel); + margin-inline-end: sage-spacing(panel); } .sage-panel-controls--show-pagination .sage-panel-controls__toolbar &:last-child { @@ -73,11 +73,11 @@ flex-grow: 1; &:not(:last-child) { - margin-right: sage-spacing(panel); + margin-inline-end: sage-spacing(panel); } .sage-panel-controls--show-pagination .sage-panel-controls__default-controls & { - margin-right: 0; + margin-inline-end: 0; } } @@ -87,10 +87,10 @@ align-items: center; &:not(:last-child) { - margin-right: sage-spacing(panel); + margin-inline-end: sage-spacing(panel); .sage-panel-controls--show-pagination & { - margin-right: 0; + margin-inline-end: 0; } } diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss b/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss index 127b667aef..9e29ec17ef 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss @@ -32,12 +32,12 @@ $-panel-figure-default-background-color: sage-color(grey, 150); .sage-panel__figure--aspect-ratio { position: relative; height: 0; - padding-top: calc(100% / var(--sage-figure-aspect-ratio)); + padding-block-start: calc(100% / var(--sage-figure-aspect-ratio)); img { position: absolute; - top: 50%; - left: 50%; + inset-block-start: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); height: 100%; } @@ -53,7 +53,7 @@ $-panel-figure-default-background-color: sage-color(grey, 150); &.sage-panel__figure--aspect-ratio { img { - top: calc(50% + (#{$-panel-figure-padding} / 2)); + inset-block-start: calc(50% + (#{$-panel-figure-padding} / 2)); } } } @@ -61,10 +61,10 @@ $-panel-figure-default-background-color: sage-color(grey, 150); .sage-panel__figure--bleed-bottom { width: calc(100% + #{2 * $-panel-figure-padding}); margin: 0 (-1 * sage-spacing(lg)) (-1 * sage-spacing(lg)); - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-start-radius: inherit; + border-end-end-radius: inherit; } .sage-panel__figure--bleed-sides { @@ -76,10 +76,10 @@ $-panel-figure-default-background-color: sage-color(grey, 150); .sage-panel__figure--bleed-top { width: calc(100% + #{2 * $-panel-figure-padding}); margin: (-1 * sage-spacing(lg)) (-1 * sage-spacing(lg)) 0; - border-top-left-radius: inherit; - border-top-right-radius: inherit; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-start-start-radius: inherit; + border-start-end-radius: inherit; + border-end-start-radius: 0; + border-end-end-radius: 0; } .sage-panel__figure--wistia { diff --git a/packages/sage-assets/lib/stylesheets/components/_popover.scss b/packages/sage-assets/lib/stylesheets/components/_popover.scss index 3558775b94..4bbc8f2c05 100644 --- a/packages/sage-assets/lib/stylesheets/components/_popover.scss +++ b/packages/sage-assets/lib/stylesheets/components/_popover.scss @@ -64,58 +64,58 @@ $-popover-tooltip-inactive: $-popover-tooltip-width solid transparent; } .sage-popover--top & { - bottom: calc(100% + #{$-popover-panel-offset}); - left: 0; + inset-block-end: calc(100% + #{$-popover-panel-offset}); + inset-inline-start: 0; &::after { left: $-popover-tooltip-offset; top: 100%; transform: translate3d(-50%, 0, 0); - border-left: $-popover-tooltip-inactive; - border-right: $-popover-tooltip-inactive; - border-top: $-popover-tooltip-active; + border-inline-start: $-popover-tooltip-inactive; + border-inline-end: $-popover-tooltip-inactive; + border-block-start: $-popover-tooltip-active; } } .sage-popover--top-right & { - bottom: calc(100% + #{$-popover-panel-offset}); - right: 0; + inset-block-end: calc(100% + #{$-popover-panel-offset}); + inset-inline-end: 0; &::after { right: $-popover-tooltip-offset; top: 100%; transform: translate3d(-50%, 0, 0); - border-left: $-popover-tooltip-inactive; - border-right: $-popover-tooltip-inactive; - border-top: $-popover-tooltip-active; + border-inline-start: $-popover-tooltip-inactive; + border-inline-end: $-popover-tooltip-inactive; + border-block-start: $-popover-tooltip-active; } } .sage-popover--right & { - top: $-popover-tooltip-horizontal-offset; - left: calc(100% + #{$-popover-panel-offset} + #{$-popover-tooltip-width}); + inset-block-start: $-popover-tooltip-horizontal-offset; + inset-inline-start: calc(100% + #{$-popover-panel-offset} + #{$-popover-tooltip-width}); &::after { left: -($-popover-tooltip-width); top: $-popover-tooltip-offset; transform: translate3d(0, -50%, 0); - border-right: $-popover-tooltip-active; - border-top: $-popover-tooltip-inactive; - border-bottom: $-popover-tooltip-inactive; + border-inline-end: $-popover-tooltip-active; + border-block-start: $-popover-tooltip-inactive; + border-block-end: $-popover-tooltip-inactive; } } .sage-popover--bottom & { - top: calc(100% + #{$-popover-panel-offset}); - left: 0; + inset-block-start: calc(100% + #{$-popover-panel-offset}); + inset-inline-start: 0; &::after { left: $-popover-tooltip-offset; bottom: 100%; transform: translate3d(-50%, 0, 0); - border-left: $-popover-tooltip-inactive; - border-right: $-popover-tooltip-inactive; - border-bottom: $-popover-tooltip-active; + border-inline-start: $-popover-tooltip-inactive; + border-inline-end: $-popover-tooltip-inactive; + border-block-end: $-popover-tooltip-active; } } @@ -127,23 +127,23 @@ $-popover-tooltip-inactive: $-popover-tooltip-width solid transparent; right: $-popover-tooltip-offset; bottom: 100%; transform: translate3d(-50%, 0, 0); - border-left: $-popover-tooltip-inactive; - border-right: $-popover-tooltip-inactive; - border-bottom: $-popover-tooltip-active; + border-inline-start: $-popover-tooltip-inactive; + border-inline-end: $-popover-tooltip-inactive; + border-block-end: $-popover-tooltip-active; } } .sage-popover--left & { - top: $-popover-tooltip-horizontal-offset; - right: calc(100% + #{$-popover-panel-offset} + #{$-popover-tooltip-width}); + inset-block-start: $-popover-tooltip-horizontal-offset; + inset-inline-end: calc(100% + #{$-popover-panel-offset} + #{$-popover-tooltip-width}); &::after { right: -($-popover-tooltip-width); top: $-popover-tooltip-offset; transform: translate3d(0, -50%, 0); - border-left: $-popover-tooltip-active; - border-top: $-popover-tooltip-inactive; - border-bottom: $-popover-tooltip-inactive; + border-inline-start: $-popover-tooltip-active; + border-block-start: $-popover-tooltip-inactive; + border-block-end: $-popover-tooltip-inactive; } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss index 80b54a6600..88e99dbb88 100644 --- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss @@ -20,7 +20,7 @@ $-progress-bar-height: sage-spacing(xs); .sage-modal__header & { position: absolute; - bottom: 0; + inset-block-end: 0; width: 100%; } } @@ -47,6 +47,10 @@ $-progress-bar-height: sage-spacing(xs); background-color: var(--progress-bar-value-color, sage-color(mercury, 500)); border-radius: sage-border(radius-small); + [dir="rtl"] & { + transform-origin: center right; + } + .sage-modal__header & { border-radius: 0; } @@ -65,6 +69,6 @@ $-progress-bar-height: sage-spacing(xs); .sage-progress-bar__percent { @extend %t-sage-body-small-semi; - margin-left: rem(12px); + margin-inline-start: rem(12px); } diff --git a/packages/sage-assets/lib/stylesheets/components/_property.scss b/packages/sage-assets/lib/stylesheets/components/_property.scss index 4331fe5f4d..eca25d7fa8 100644 --- a/packages/sage-assets/lib/stylesheets/components/_property.scss +++ b/packages/sage-assets/lib/stylesheets/components/_property.scss @@ -13,12 +13,12 @@ color: sage-color(grey, 800); .sage-property-group &:not(:last-child) { - margin-right: sage-spacing(md); + margin-inline-end: sage-spacing(md); } } .sage-property__icon { - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); &::before { vertical-align: top; diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss index 18587e1b8e..f4c8148548 100644 --- a/packages/sage-assets/lib/stylesheets/components/_radio.scss +++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss @@ -42,7 +42,7 @@ $-radio-focus-outline-color: currentColor; grid-template-columns: min-content 1fr; .sage-list & { - margin-bottom: calc(#{sage-spacing(card)} / 2); + margin-block-end: calc(#{sage-spacing(card)} / 2); } @include sage-form-toggle-parents; @@ -92,7 +92,7 @@ $-radio-focus-outline-color: currentColor; @include sage-form-toggle-label; grid-area: label; - margin-left: 0; + margin-inline-start: 0; .sage-radio--has-border & { color: sage-color(grey, 900); @@ -223,7 +223,7 @@ $-radio-focus-outline-color: currentColor; &:not(.sage-radio--standalone) { .sage-radio--has-border & { - margin-top: 0; + margin-block-start: 0; &:checked + .sage-radio__label::after { box-shadow: sage-border-interactive(selected); @@ -233,7 +233,7 @@ $-radio-focus-outline-color: currentColor; } .sage-sortable & { - margin-top: 0; + margin-block-start: 0; } } diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss index d658fa5a06..dc879fdb97 100644 --- a/packages/sage-assets/lib/stylesheets/components/_search.scss +++ b/packages/sage-assets/lib/stylesheets/components/_search.scss @@ -21,15 +21,15 @@ $-search-icon: "::before"; @include sage-icon-base(search-small, sm, pine); z-index: sage-z-index(default, 2); - margin-left: sage-spacing(sm); - margin-right: -1 * sage-spacing(lg); + margin-inline-start: sage-spacing(sm); + margin-inline-end: -1 * sage-spacing(lg); color: sage-color(grey, 700); transition: map-get($sage-transitions, default); transition-property: color; } .sage-search:not(.sage-search--contained) & { - border-bottom: 1px solid sage-color(grey, 300); + border-block-end: 1px solid sage-color(grey, 300); &:hover { background-color: sage-color(grey, 100); @@ -80,7 +80,7 @@ $-search-icon: "::before"; } .sage-panel-controls__toolbar > &:not(:last-child) { - margin-right: sage-spacing(panel); + margin-inline-end: sage-spacing(panel); } .sage-panel-controls__toolbar .sage-search--contained & { @@ -88,8 +88,8 @@ $-search-icon: "::before"; } .sage-panel-controls__toolbar .sage-search--contained:first-child:not(:only-child) & { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .sage-toolbar &, @@ -102,19 +102,19 @@ $-search-icon: "::before"; .sage-toolbar__group .sage-search--contained:first-child & { border-radius: sage-border(radius-medium); - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .sage-toolbar__group .sage-search--contained:last-child & { border-radius: sage-border(radius-medium); - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .sage-dropdown__panel & { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; } } @@ -125,10 +125,10 @@ $-search-icon: "::before"; .sage-search__label { @include sage-form-field-label; - margin-bottom: sage-spacing(2xs); + margin-block-end: sage-spacing(2xs); .sage-panel-controls__toolbar & { - margin-bottom: 0; + margin-block-end: 0; } } @@ -168,16 +168,16 @@ $-search-icon: "::before"; background-color: sage-color(white); } &:disabled { - padding-left: calc(#{sage-spacing(xl)} - #{sage-spacing(xs)}); - margin-left: calc(#{sage-spacing(lg)} * -1); + padding-inline-start: calc(#{sage-spacing(xl)} - #{sage-spacing(xs)}); + margin-inline-start: calc(#{sage-spacing(lg)} * -1); } } .sage-panel-controls__toolbar &, .sage-toolbar__group &, .sage-search--contained & { - padding-top: sage-spacing(xs); - padding-bottom: sage-spacing(xs); + padding-block-start: sage-spacing(xs); + padding-block-end: sage-spacing(xs); border-radius: inherit; } @@ -185,8 +185,8 @@ $-search-icon: "::before"; .sage-toolbar__group &, .sage-toolbar &, .sage-toolbar__group & { - padding-left: calc(#{sage-spacing(xl)} - #{sage-spacing(xs)}); - margin-left: calc(#{sage-spacing(lg)} * -1); + padding-inline-start: calc(#{sage-spacing(xl)} - #{sage-spacing(xs)}); + margin-inline-start: calc(#{sage-spacing(lg)} * -1); box-shadow: map-get($sage-toolbar-button-borders, default); &:hover { @@ -248,11 +248,11 @@ $-search-icon: "::before"; .sage-search__reset-button { visibility: hidden; position: absolute; - right: 0; + inset-inline-end: 0; z-index: sage-z-index(default, 1); :not(.sage-search--contained) & { - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); } .sage-search--has-text & { diff --git a/packages/sage-assets/lib/stylesheets/components/_sidebar.scss b/packages/sage-assets/lib/stylesheets/components/_sidebar.scss index cd38e77ddb..f92e845c91 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sidebar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sidebar.scss @@ -15,8 +15,8 @@ $-sidebar-top-offset: $sage-assistant-height; flex-direction: column; z-index: sage-z-index(nav); position: fixed; - top: $-sidebar-top-offset; - left: 0; + inset-block-start: $-sidebar-top-offset; + inset-inline-start: 0; transform: translateX(-100%); height: calc(100% - #{$-sidebar-top-offset}); width: sage-sidebar(xl); @@ -63,7 +63,7 @@ $-sidebar-top-offset: $sage-assistant-height; position: absolute; top: calc(-1 * #{sage-spacing(sm)}); left: 0; - right: 0; + inset-inline-end: 0; height: sage-spacing(sm); background: linear-gradient(to top, #{$-sidebar-color-background} 0%, rgba(255, 255, 255, 0) 60%); } diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index 5455b17340..8bdbee9fbb 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -10,7 +10,7 @@ $-sortable-image-height: rem(48px); .sage-sortable { - padding-left: 0; + padding-inline-start: 0; } .sage-sortable__item { @@ -39,21 +39,21 @@ $-sortable-image-height: rem(48px); &.sage-sortable__item--card { padding: sage-spacing(xs) sage-spacing(card); - border-bottom: sage-border(); - border-left: sage-border(); - border-right: sage-border(); + border-block-end: sage-border(); + border-inline-start: sage-border(); + border-inline-end: sage-border(); transition: map-get($sage-transitions, default); transition-property: border-color, box-shadow; &:first-child { - border-top-left-radius: sage-border(radius); - border-top-right-radius: sage-border(radius); - border-top: sage-border(); + border-start-start-radius: sage-border(radius); + border-start-end-radius: sage-border(radius); + border-block-start: sage-border(); } &:last-child { - border-bottom-left-radius: sage-border(radius); - border-bottom-right-radius: sage-border(radius); + border-end-start-radius: sage-border(radius); + border-end-end-radius: sage-border(radius); } } @@ -63,7 +63,7 @@ $-sortable-image-height: rem(48px); @include target-safari { /* stylelint-disable max-nesting-depth */ .sage-card__row { - margin-left: sage-spacing(sm); + margin-inline-start: sage-spacing(sm); } /* stylelint-enable max-nesting-depth */ } @@ -91,7 +91,7 @@ $-sortable-image-height: rem(48px); img { position: absolute; transform: translateY(-50%); - top: 50%; + inset-block-start: 50%; width: 100%; } } @@ -100,7 +100,7 @@ $-sortable-image-height: rem(48px); z-index: sage-z-index(); overflow: hidden; max-width: 100%; - margin-right: auto; + margin-inline-end: auto; } .sage-sortable__item-title { diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss index 9416185f9e..3642da8a08 100644 --- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss +++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss @@ -85,7 +85,7 @@ $-stat-box-image-max-width: rem(48px); .sage-stat-box__title { @extend %t-sage-body-small-med; - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); } [class*="sage-stat-box__title--legend"] { @@ -94,7 +94,7 @@ $-stat-box-image-max-width: rem(48px); display: block; width: rem(8px); height: rem(8px); - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); border-radius: sage-border(radius); background-color: var(--legend-color); } @@ -126,11 +126,11 @@ $-stat-box-image-max-width: rem(48px); .sage-stat-box__timeframe { @extend %t-sage-body-xsmall; - margin-left: sage-spacing(xs); + margin-inline-start: sage-spacing(xs); color: sage-color(grey, 600); } .sage-stat-box__link { @extend %t-sage-body-med; - margin-top: sage-spacing(xs); + margin-block-start: sage-spacing(xs); } diff --git a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss index ad8afc716d..a8319f0e9a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss +++ b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss @@ -33,12 +33,12 @@ .sage-sortable__item & { &:not(:last-child) { - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); } } & + & { - margin-left: sage-spacing(2xs); + margin-inline-start: sage-spacing(2xs); } // NOTE: Icon generation consolidated in `core/_icons.scss` diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index ddaa05baef..4a7f459bce 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -34,7 +34,7 @@ $-switch-toggle-size: rem(16px); color: $-switch-color-default-text; & + & { - margin-top: calc(#{sage-spacing(card)} / -2); + margin-block-start: calc(#{sage-spacing(card)} / -2); } &.sage-switch--has-border { @@ -57,28 +57,28 @@ $-switch-toggle-size: rem(16px); } .sage-list & { - margin-top: 0; - margin-bottom: calc(#{sage-spacing(card)} / 2); + margin-block-start: 0; + margin-block-end: calc(#{sage-spacing(card)} / 2); } @include sage-form-toggle-parents { + .sage-switch { - margin-top: 0; + margin-block-start: 0; } } .sage-feature-toggle & { - margin-bottom: 0; + margin-block-end: 0; } } .sage-switch__message { @include sage-form-toggle-message; - margin-left: ($-switch-width + $-switch-label-left-spacing); + margin-inline-start: ($-switch-width + $-switch-label-left-spacing); .sage-switch--toggle-right & { - margin-left: 0; - padding-left: 0; + margin-inline-start: 0; + padding-inline-start: 0; } } @@ -118,13 +118,13 @@ $-switch-toggle-size: rem(16px); } .sage-switch--has-border & { - margin-left: ($-switch-width + $-switch-label-left-spacing); + margin-inline-start: ($-switch-width + $-switch-label-left-spacing); color: sage-color(grey, 900); font-weight: sage-font-weight(semibold); } .sage-switch--toggle-right & { - margin-left: 0; + margin-inline-start: 0; } } diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss index 5bcbc3fc00..f015cd668b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tab.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss @@ -31,6 +31,10 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); background-color: sage-color(grey, 200); border-radius: sage-border(radius-x-large); @extend %t-sage-body-small-semi; + + &::after { + display: none; + } } @extend %t-sage-body-semi; @@ -72,7 +76,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); } &:last-of-type { - margin-right: 0; + margin-inline-end: 0; } &[aria-disabled="true"], @@ -86,8 +90,8 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); .sage-tabs--with-background & { padding: sage-spacing(xs) sage-spacing(sm) sage-spacing(md); - border-top-left-radius: sage-border(radius-large); - border-top-right-radius: sage-border(radius-large); + border-start-start-radius: sage-border(radius-large); + border-start-end-radius: sage-border(radius-large); background-clip: padding-box; @extend %t-sage-body-xsmall-med; @@ -125,8 +129,8 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); .sage-tabs--with-background &.sage-tab--active { background-color: sage-color(white); - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; &:focus-visible { border-radius: sage-border(radius-small); diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 436872272f..5b3af655b3 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -85,7 +85,7 @@ $-table-avatar-width: rem(32px); left: 0; right: 0; height: 0; - border-bottom: $-table-header-border; + border-block-end: $-table-header-border; } tbody { @@ -128,8 +128,8 @@ $-table-avatar-width: rem(32px); tbody { td, th { - padding-top: $-table-cell-padding-xs; - padding-bottom: $-table-cell-padding-xs; + padding-block-start: $-table-cell-padding-xs; + padding-block-end: $-table-cell-padding-xs; } } } @@ -151,9 +151,9 @@ $-table-avatar-width: rem(32px); transform-origin: center center; height: 0; width: 0; - margin-left: sage-spacing(2xs); - border-left: $-table-sort-indicator-width solid transparent; - border-right: $-table-sort-indicator-width solid transparent; + margin-inline-start: sage-spacing(2xs); + border-inline-start: $-table-sort-indicator-width solid transparent; + border-inline-end: $-table-sort-indicator-width solid transparent; transition: 0.15s ease-out; transition-property: opacity, transform; opacity: 0; @@ -171,7 +171,7 @@ $-table-avatar-width: rem(32px); text-decoration: underline; &::after { - border-top: $-table-sort-indicator-direction solid currentColor; + border-block-start: $-table-sort-indicator-direction solid currentColor; opacity: 1; } } @@ -207,13 +207,13 @@ $-table-avatar-width: rem(32px); position: relative; .sage-panel & { - margin-left: -1 * $-table-cell-padding-panel; - margin-right: -1 * $-table-cell-padding-panel; + margin-inline-start: -1 * $-table-cell-padding-panel; + margin-inline-end: -1 * $-table-cell-padding-panel; } .sage-card & { - margin-left: -1 * $-table-cell-padding-card; - margin-right: -1 * $-table-cell-padding-card; + margin-inline-start: -1 * $-table-cell-padding-card; + margin-inline-end: -1 * $-table-cell-padding-card; } } @@ -228,21 +228,21 @@ $-table-avatar-width: rem(32px); .sage-table-wrapper--reset-above { .sage-panel > & { - margin-top: -1 * sage-spacing(); + margin-block-start: -1 * sage-spacing(); } .sage-card > & { - margin-top: -1 * sage-spacing(sm); + margin-block-start: -1 * sage-spacing(sm); } } .sage-table-wrapper--reset-below { .sage-panel > & { - margin-bottom: -1 * sage-spacing(); + margin-block-end: -1 * sage-spacing(); } .sage-card > & { - margin-bottom: -1 * sage-spacing(sm); + margin-block-end: -1 * sage-spacing(sm); } } @@ -254,8 +254,8 @@ $-table-avatar-width: rem(32px); content: ""; display: block; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; z-index: sage-z-index(default, 1); height: 100%; width: $-table-overflow-indicator-width; @@ -308,7 +308,7 @@ $-table-avatar-width: rem(32px); } .sage-table-cell__body { - margin-top: sage-spacing(2xs); + margin-block-start: sage-spacing(2xs); } .sage-table-cell__link { @@ -332,16 +332,16 @@ $-table-avatar-width: rem(32px); } .sage-table-cell--borders { - border-bottom: sage-border(); + border-block-end: sage-border(); tr:last-child & { - border-bottom: 0; + border-block-end: 0; } } .sage-table-cell__label { .sage-table-cell__block &, .sage-table-cell__link & { - margin-left: 0.5em; + margin-inline-start: 0.5em; } } diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss index 2b250ce8a1..7d44e9d4e2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss @@ -13,7 +13,7 @@ flex-direction: column; @media (max-width: sage-breakpoint(sm-max)) { - margin-bottom: sage-spacing(sm); + margin-block-end: sage-spacing(sm); } @media (min-width: sage-breakpoint(md-min)) { @@ -35,9 +35,9 @@ } .sage-tabs--with-background { - padding-top: sage-spacing(sm); - padding-left: sage-spacing(xs); - padding-right: sage-spacing(xs); + padding-block-start: sage-spacing(sm); + padding-inline-start: sage-spacing(xs); + padding-inline-end: sage-spacing(xs); background-color: sage-color(grey, 200); } @@ -52,7 +52,7 @@ .sage-tabs-divider, .sage-tabs-container > hr { margin: 0; - border-top: 1px solid sage-color(grey, 300); + border-block-start: 1px solid sage-color(grey, 300); } .sage-tabs-pane { diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss index 8d597b22ba..60b274d28d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tag.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss @@ -29,7 +29,7 @@ $-tag-button-icon-mobile-size: rem(24px); } .sage-tag--has-image { - padding-left: sage-spacing(2xs); + padding-inline-start: sage-spacing(2xs); } .sage-tag__image { @@ -43,8 +43,8 @@ $-tag-button-icon-mobile-size: rem(24px); display: inline-flex; width: auto; height: auto; - margin-left: rem(6px); - margin-right: calc(#{sage-spacing(2xs)} * -1); + margin-inline-start: rem(6px); + margin-inline-end: calc(#{sage-spacing(2xs)} * -1); color: $-tag-button-color; &::before { diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss index 0b506862af..733702f03d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toast.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toast.scss @@ -19,22 +19,22 @@ $-toast-bottom-spacing: sage-spacing(xs); @keyframes sage-toast--animate-in-default { from { - margin-bottom: -$-toast-height-default; + margin-block-end: -$-toast-height-default; opacity: 0; } to { - margin-bottom: $-toast-bottom-spacing; + margin-block-end: $-toast-bottom-spacing; opacity: 1; } } @keyframes sage-toast--animate-in-mobile { from { - margin-bottom: -$-toast-height-mobile; + margin-block-end: -$-toast-height-mobile; opacity: 0; } to { - margin-bottom: $-toast-bottom-spacing; + margin-block-end: $-toast-bottom-spacing; opacity: 1; } } @@ -42,22 +42,22 @@ $-toast-bottom-spacing: sage-spacing(xs); .sage-toast-container { display: flex; position: fixed; - right: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-end: 0; flex-direction: column; align-items: flex-end; z-index: sage-z-index(priority); @media #{$-toast-breakpoint-default} { - padding-bottom: $-toast-viewport-spacing-default - $-toast-bottom-spacing; - padding-left: $-toast-viewport-spacing-default; - padding-right: $-toast-viewport-spacing-default; + padding-block-end: $-toast-viewport-spacing-default - $-toast-bottom-spacing; + padding-inline-start: $-toast-viewport-spacing-default; + padding-inline-end: $-toast-viewport-spacing-default; } @media #{$-toast-breakpoint-mobile} { - padding-bottom: $-toast-viewport-spacing-mobile - $-toast-bottom-spacing; - padding-left: $-toast-viewport-spacing-mobile; - padding-right: $-toast-viewport-spacing-mobile; + padding-block-end: $-toast-viewport-spacing-mobile - $-toast-bottom-spacing; + padding-inline-start: $-toast-viewport-spacing-mobile; + padding-inline-end: $-toast-viewport-spacing-mobile; } } @@ -66,9 +66,9 @@ $-toast-bottom-spacing: sage-spacing(xs); position: relative; align-items: center; max-width: $-toast-max-width; - margin-bottom: $-toast-bottom-spacing; - padding-top: sage-spacing(xs); - padding-bottom: sage-spacing(xs); + margin-block-end: $-toast-bottom-spacing; + padding-block-start: sage-spacing(xs); + padding-block-end: sage-spacing(xs); padding: 0 sage-spacing(md); color: sage-color(white); border-radius: sage-border(radius-medium); @@ -80,16 +80,16 @@ $-toast-bottom-spacing: sage-spacing(xs); min-height: $-toast-height-default; width: auto; min-width: rem(350px); - padding-left: sage-spacing(lg); - padding-right: sage-spacing(lg); + padding-inline-start: sage-spacing(lg); + padding-inline-end: sage-spacing(lg); animation-name: sage-toast--animate-in-default; } @media #{$-toast-breakpoint-mobile} { min-height: $-toast-height-mobile; width: fit-content; - padding-left: sage-spacing(xs); - padding-right: sage-spacing(xs); + padding-inline-start: sage-spacing(xs); + padding-inline-end: sage-spacing(xs); animation-name: sage-toast--animate-in-mobile; } @@ -105,7 +105,7 @@ $-toast-bottom-spacing: sage-spacing(xs); .sage-toast__icon { display: inline-flex; - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); color: sage-color(white); } @@ -120,7 +120,7 @@ $-toast-bottom-spacing: sage-spacing(xs); @include truncate(); padding: 0; - margin-right: auto; + margin-inline-end: auto; color: sage-color(white); @extend %t-sage-body-small-semi; @@ -132,7 +132,7 @@ $-toast-bottom-spacing: sage-spacing(xs); display: inline-flex; align-items: center; - margin-left: sage-spacing(sm); + margin-inline-start: sage-spacing(sm); white-space: nowrap; color: sage-color(white); border-radius: sage-border(radius-large); diff --git a/packages/sage-assets/lib/stylesheets/components/_toolbar.scss b/packages/sage-assets/lib/stylesheets/components/_toolbar.scss index 939578e19d..cdedb906ff 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toolbar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toolbar.scss @@ -32,6 +32,6 @@ } &:not(:last-child) { - margin-right: sage-spacing(panel); + margin-inline-end: sage-spacing(panel); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_toolbar_editor.scss b/packages/sage-assets/lib/stylesheets/components/_toolbar_editor.scss index 3584395b55..16d208031e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toolbar_editor.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toolbar_editor.scss @@ -6,7 +6,7 @@ padding-inline: sage-spacing(3xs); + * { - border-left: sage-border(interactive); + border-inline-start: sage-border(interactive); } } @@ -39,10 +39,10 @@ flex: 2 1 auto; flex-grow: 0; /* there is currently an issue with extra space between sections, this will reduce space but will not allow the group to grow on upward resize */ align-items: center; - margin-left: 0; + margin-inline-start: 0; & + & { - border-left: sage-border(interactive); + border-inline-start: sage-border(interactive); } } @@ -51,7 +51,7 @@ } .toolbar-editor__section-list { - padding-left: 0; + padding-inline-start: 0; list-style: none; } @@ -71,7 +71,7 @@ &::before { @media screen and (max-width: 767px) { - margin-right: 0; + margin-inline-end: 0; } @media screen and (min-width: 768px) { display: none; diff --git a/packages/sage-assets/lib/stylesheets/components/_tooltip.scss b/packages/sage-assets/lib/stylesheets/components/_tooltip.scss index 7b58b86522..a9bd15196f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tooltip.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tooltip.scss @@ -54,42 +54,70 @@ $-tooltip-large-maxwidth: rem(320px); left: 50%; top: 100%; transform: translate3d(-50%, 0, 0); - border-left: $-tooltip-arrow-inactive; - border-right: $-tooltip-arrow-inactive; - border-top: $-tooltip-arrow-active; + border-inline-start: $-tooltip-arrow-inactive; + border-inline-end: $-tooltip-arrow-inactive; + border-block-start: $-tooltip-arrow-active; } } .sage-tooltip--bottom { &::after { left: 50%; - bottom: 100%; + right: 100%; transform: translate3d(-50%, 0, 0); - border-left: $-tooltip-arrow-inactive; - border-right: $-tooltip-arrow-inactive; - border-bottom: $-tooltip-arrow-active; + border-inline-start: $-tooltip-arrow-inactive; + border-inline-end: $-tooltip-arrow-inactive; + border-block-end: $-tooltip-arrow-active; + } + + [dir="rtl"] &::after { + right: initial; + top: 0; + transform: translate3d(-50%, -100%, 0); } } .sage-tooltip--left { &::after { left: 100%; - bottom: 50%; + right: 50%; transform: translate3d(0, 50%, 0); - border-top: $-tooltip-arrow-inactive; - border-bottom: $-tooltip-arrow-inactive; - border-left: $-tooltip-arrow-active; + border-block-start: $-tooltip-arrow-inactive; + border-block-end: $-tooltip-arrow-inactive; + border-inline-start: $-tooltip-arrow-active; + + [dir="rtl"] & { + top: 0; + left: 100%; + right: initial; + transform: translate3d(0, 100%, 0); + border-inline-start: none; + border-block-start: $-tooltip-arrow-inactive; + border-block-end: $-tooltip-arrow-inactive; + border-inline-end: $-tooltip-arrow-active; + } } } .sage-tooltip--right { &::after { left: 0; - bottom: 50%; + right: 50%; transform: translate3d(-100%, 50%, 0); - border-top: $-tooltip-arrow-inactive; - border-bottom: $-tooltip-arrow-inactive; - border-right: $-tooltip-arrow-active; + border-block-start: $-tooltip-arrow-inactive; + border-block-end: $-tooltip-arrow-inactive; + border-inline-end: $-tooltip-arrow-active; + + [dir="rtl"] & { + top: 0; + left: initial; + right: 100%; + transform: translate3d(0, 100%, 0); + border-block-start: $-tooltip-arrow-inactive; + border-block-end: $-tooltip-arrow-inactive; + border-inline-start: $-tooltip-arrow-active; + border-inline-end: none; + } } } @@ -97,16 +125,16 @@ $-tooltip-large-maxwidth: rem(320px); color: $-tooltip-light-font-color; background: $-tooltip-light-bg-color; - &.sage-tooltip--top::after { + &.sage-tooltip--block-start::after { border-top-color: $-tooltip-bg-color; } - &.sage-tooltip--bottom::after { + &.sage-tooltip--block-end::after { border-bottom-color: $-tooltip-bg-color; } - &.sage-tooltip--left::after { + &.sage-tooltip--inline-start::after { border-left-color: $-tooltip-bg-color; } - &.sage-tooltip--right::after { + &.sage-tooltip--inline-end::after { border-right-color: $-tooltip-bg-color; } } diff --git a/packages/sage-assets/lib/stylesheets/components/_topbar.scss b/packages/sage-assets/lib/stylesheets/components/_topbar.scss index fe7c5f387b..45fc713d9a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_topbar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_topbar.scss @@ -10,13 +10,13 @@ align-items: center; position: fixed; z-index: sage-z-index(nav); - top: 0; - left: sage-sidebar(); + inset-block-start: 0; + inset-inline-start: sage-sidebar(); height: rem(88px); width: calc(100% - #{sage-sidebar()}); padding: sage-spacing(md) sage-spacing(xl); background-color: sage-color(white); - border-bottom: sage-border(); + border-block-end: sage-border(); } .sage-topbar__right { @@ -27,7 +27,7 @@ @media (max-width: sage-breakpoint(md-max)) { .sage-topbar { - left: 0; + inset-inline-start: 0; width: 100%; } diff --git a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss index a276d8197a..a14693e2e4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss +++ b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss @@ -15,8 +15,8 @@ $-typeahead-item-height: rem(68px); .sage-typeahead__panel { z-index: sage-z-index(raised); position: absolute; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; transform: translateY(#{sage-spacing(2xs)}); overflow-x: hidden; padding: 0; @@ -42,7 +42,7 @@ $-typeahead-item-height: rem(68px); height: $-typeahead-item-height; &:not(:first-child) { - border-top: sage-border(); + border-block-start: sage-border(); } &:hover, @@ -78,13 +78,13 @@ $-typeahead-item-height: rem(68px); } .sage-typeahead__item:first-child &::after { - border-top-left-radius: sage-border(radius); - border-top-right-radius: sage-border(radius); + border-start-start-radius: sage-border(radius); + border-start-end-radius: sage-border(radius); } .sage-typeahead__item:last-child &::after { - border-bottom-left-radius: sage-border(radius); - border-bottom-right-radius: sage-border(radius); + border-end-start-radius: sage-border(radius); + border-end-end-radius: sage-border(radius); } > * { @@ -107,6 +107,6 @@ $-typeahead-item-height: rem(68px); } > * { - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index efdb55caba..eea3b2a34b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -67,13 +67,13 @@ $-upload-card-mobile-breakpoint: 609px; flex-flow: column; align-items: flex-start; max-width: $-upload-card-body-width-stack; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; } } .sage-upload-card__errors { - margin-top: sage-spacing(sm); + margin-block-start: sage-spacing(sm); > p { @extend %t-sage-body-med; @@ -81,7 +81,7 @@ $-upload-card-mobile-breakpoint: 609px; color: $-upload-card-error-color; &:not(:last-child) { - margin-bottom: sage-spacing(2xs); + margin-block-end: sage-spacing(2xs); } } @@ -103,7 +103,7 @@ $-upload-card-mobile-breakpoint: 609px; color: sage-color(grey, 600); .sage-upload-card:not(.sage-uploaded-card--selected) & { - margin-bottom: sage-spacing(2xs); + margin-block-end: sage-spacing(2xs); } } @@ -118,7 +118,7 @@ $-upload-card-mobile-breakpoint: 609px; .sage-upload-card__preview { width: 100%; - margin-right: 0; + margin-inline-end: 0; text-align: center; border-radius: $-upload-card-preview-border-radius; aspect-ratio: var(--sage-upload-card-aspect-ratio-stack); diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss index 22545bc729..e957ce9c89 100644 --- a/packages/sage-assets/lib/stylesheets/core/_typography.scss +++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss @@ -8,8 +8,8 @@ // Font definitions $-heading-font: "GreetStandard", "Inter", -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Ubuntu", sans-serif; $-body-font-stack: "Inter", -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Ubuntu", sans-serif; -$-body-margin-bottom: sage-spacing(xs); -$-headings-margin-bottom: sage-spacing(sm); +$-body-margin-block-end: sage-spacing(xs); +$-headings-margin-block-end: sage-spacing(sm); /// /// Sage responsive font sizes and line heights custom props @@ -110,7 +110,7 @@ body:not(.sage-excluded), > ol:not([class]), > dl:not([class]), > [class*="t-sage-body"] { - @include sage-block-spacing($-body-margin-bottom); + @include sage-block-spacing($-body-margin-block-end); } // Heading-like elements get spacing below as well @@ -123,7 +123,7 @@ body:not(.sage-excluded), > [class*="t-sage-heading-"] { color: map-get($sage-text-colors, heading); - @include sage-block-spacing($-headings-margin-bottom); + @include sage-block-spacing($-headings-margin-block-end); } // Elements with no classes extend related type specs @@ -135,19 +135,19 @@ body:not(.sage-excluded), @extend %t-sage-heading-2; &:not(:first-child) { - margin-top: sage-spacing(lg); + margin-block-start: sage-spacing(lg); } } > .t-sage-heading-2:not(:first-child) { - margin-top: sage-spacing(lg); + margin-block-start: sage-spacing(lg); } > h3:not([class]) { @extend %t-sage-heading-3; &:not(:first-child) { - margin-top: sage-spacing(); + margin-block-start: sage-spacing(); } } @@ -155,7 +155,7 @@ body:not(.sage-excluded), @extend %t-sage-heading-4; &:not(:first-child) { - margin-top: sage-spacing(); + margin-block-start: sage-spacing(); } } @@ -163,7 +163,7 @@ body:not(.sage-excluded), @extend %t-sage-heading-5; &:not(:first-child) { - margin-top: sage-spacing(); + margin-block-start: sage-spacing(); } } @@ -171,7 +171,7 @@ body:not(.sage-excluded), @extend %t-sage-heading-6; &:not(:first-child) { - margin-top: sage-spacing(); + margin-block-start: sage-spacing(); } } @@ -180,7 +180,7 @@ body:not(.sage-excluded), > .t-sage-heading-5, > .t-sage-heading-6 { &:not(:first-child) { - margin-top: sage-spacing(); + margin-block-start: sage-spacing(); } } @@ -201,8 +201,8 @@ body:not(.sage-excluded), } > table:not(:last-child) { - margin-top: sage-spacing(); - margin-bottom: sage-spacing(); + margin-block-start: sage-spacing(); + margin-block-end: sage-spacing(); } } diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss index 5447a35b1d..fbf1afc1f4 100644 --- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss +++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss @@ -11,11 +11,11 @@ /// @param {length} $block-spacing Amount of spacing to apply /// @mixin sage-block-spacing($block-spacing) { - margin-bottom: $block-spacing; + margin-block-end: $block-spacing; &.no-margin-bottom, &:last-child { - margin-bottom: 0; + margin-block-end: 0; } } @@ -82,12 +82,12 @@ @include sage-icon-base($icon-name, md, pine); align-self: center; - margin-left: sage-spacing(xs); + margin-inline-start: sage-spacing(xs); } } .sage-link--icon-right-#{$icon-name}::before { - margin-left: sage-spacing(2xs); + margin-inline-start: sage-spacing(2xs); } } @@ -101,13 +101,13 @@ @include sage-icon-base($icon-name, md, pine); align-self: center; - margin-right: sage-spacing(xs); + margin-inline-end: sage-spacing(xs); padding: var(--icon-block-padding) 0; } } .sage-link--icon-left-#{$icon-name}::before { - margin-right: sage-spacing(2xs); + margin-inline-end: sage-spacing(2xs); } } @@ -128,10 +128,10 @@ /* stylelint-disable max-nesting-depth */ &::before { - margin-right: rem(20px); + margin-inline-end: rem(20px); @media (max-width: sage-breakpoint(sm-max)) { - margin-right: sage-spacing(sm); + margin-inline-end: sage-spacing(sm); } } @@ -142,8 +142,8 @@ &.sage-btn--rich-text, .toolbar-editor &, .toolbar-editor__section & { - margin-left: sage-spacing(3xs); - margin-right: sage-spacing(3xs); + margin-inline-start: sage-spacing(3xs); + margin-inline-end: sage-spacing(3xs); padding: sage-spacing(xs) rem(12px) sage-spacing(xs) sage-spacing(xs); border-radius: 6px; @@ -152,7 +152,7 @@ } &::after { - right: 15px; + inset-inline-end: 15px; font-size: 11px; } } @@ -386,7 +386,7 @@ flex-direction: column; &:not(:last-child) { - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } .sage-frame > &, @@ -398,7 +398,7 @@ .sage-card__row > &, .sage-card__stack > &, .sage-card__block > & { - margin-bottom: 0; + margin-block-end: 0; } } @@ -507,8 +507,8 @@ align-items: center; justify-content: center; position: absolute; - right: 0; - top: 0; + inset-inline-end: 0; + inset-block-start: 0; height: rem(40px); width: rem(40px); } @@ -548,7 +548,7 @@ @mixin sage-form-field-message() { @extend %t-sage-body-small-med; - margin-top: sage-spacing(xs); + margin-block-start: sage-spacing(xs); color: sage-color(grey, 700); .sage-form-field--error & { @@ -558,8 +558,8 @@ @include sage-icon-base(danger, md, pine); position: relative; - top: rem(1px); - padding-right: sage-spacing(xs); + inset-block-start: rem(1px); + padding-inline-end: sage-spacing(xs); } } } @@ -571,7 +571,7 @@ display: flex; flex-flow: row wrap; align-items: flex-start; - margin-bottom: sage-spacing(card); + margin-block-end: sage-spacing(card); } @mixin sage-form-toggle-parents() { @@ -584,7 +584,7 @@ .sage-card__row > &, .sage-card__stack > &, .sage-card__block > & { - margin-bottom: 0; + margin-block-end: 0; @content; } } @@ -602,7 +602,7 @@ display: inline-block; flex: 1; - margin-left: rem(12px); + margin-inline-start: rem(12px); vertical-align: top; cursor: pointer; } diff --git a/packages/sage-assets/lib/stylesheets/global/_document.scss b/packages/sage-assets/lib/stylesheets/global/_document.scss index 9011413c65..7a496e7921 100644 --- a/packages/sage-assets/lib/stylesheets/global/_document.scss +++ b/packages/sage-assets/lib/stylesheets/global/_document.scss @@ -8,6 +8,6 @@ html, body { height: 100%; - margin-bottom: 0; + margin-block-end: 0; scroll-behavior: smooth; } diff --git a/packages/sage-assets/lib/stylesheets/global/_reboot.scss b/packages/sage-assets/lib/stylesheets/global/_reboot.scss index a4a12e8009..4a7490d567 100644 --- a/packages/sage-assets/lib/stylesheets/global/_reboot.scss +++ b/packages/sage-assets/lib/stylesheets/global/_reboot.scss @@ -40,6 +40,10 @@ body { font-weight: 400; line-height: 1.5; /* NOTE: line-height must be '1.5' to avoid conflicts with Ladera */ text-align: left; + + [dir="rtl"] & { + text-align: right; + } } [tabindex="-1"]:focus { @@ -64,20 +68,20 @@ h6, .t-sage-heading-4, .t-sage-heading-5, .t-sage-heading-6 { - margin-top: 0; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; color: sage-color(grey, 950); font-family: "GreetStandard", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif ; } p { - margin-top: 0; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } li { - margin-top: 0; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } dialog { @@ -89,14 +93,14 @@ abbr[data-original-title] { -webkit-text-decoration: underline dotted; text-decoration: underline; text-decoration: underline dotted; - border-bottom: 0; + border-block-end: 0; cursor: help; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { - margin-bottom: 0; + margin-block-end: 0; font-style: normal; line-height: inherit; } @@ -104,15 +108,15 @@ address { ol, ul, dl { - margin-top: 0; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } ol ol, ul ul, ol ul, ul ol { - margin-bottom: 0; + margin-block-end: 0; } dt { @@ -120,8 +124,8 @@ dt { } dd { - margin-bottom: 0; - margin-left: 0; + margin-block-end: 0; + margin-inline-start: 0; } blockquote { @@ -146,11 +150,11 @@ sup { } sub { - bottom: -0.25em; + inset-block-end: -0.25em; } sup { - top: -0.5em; + inset-block-start: -0.5em; } a { @@ -185,8 +189,8 @@ samp { pre { overflow: auto; - margin-top: 0; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } figure { @@ -209,8 +213,8 @@ table { caption { caption-side: bottom; - padding-top: 0.75rem; - padding-bottom: 0.75rem; + padding-block-start: 0.75rem; + padding-block-end: 0.75rem; color: #6c757d; text-align: left; } @@ -221,7 +225,7 @@ th { label { display: inline-block; - margin-bottom: 0; + margin-block-end: 0; } button { @@ -311,7 +315,7 @@ legend { width: 100%; max-width: 100%; padding: 0; - margin-bottom: 0; + margin-block-end: 0; font-size: 1.5rem; line-height: inherit; color: inherit; @@ -378,5 +382,5 @@ a { hr { margin: sage-spacing() 0; border: 0; - border-top: sage-border(); + border-block-start: sage-border(); } diff --git a/packages/sage-assets/lib/stylesheets/layout/_grid.scss b/packages/sage-assets/lib/stylesheets/layout/_grid.scss index f5c588588f..fcc31c3c62 100644 --- a/packages/sage-assets/lib/stylesheets/layout/_grid.scss +++ b/packages/sage-assets/lib/stylesheets/layout/_grid.scss @@ -36,8 +36,8 @@ $-grid-col-gap-inline-padding: calc(#{$-grid-gap} / 2); display: flex; flex-direction: row; flex-wrap: wrap; - margin-left: $-grid-col-gap-inline-margin; - margin-right: $-grid-col-gap-inline-margin; + margin-inline-start: $-grid-col-gap-inline-margin; + margin-inline-end: $-grid-col-gap-inline-margin; } .sage-row { @@ -49,29 +49,29 @@ $-grid-col-gap-inline-padding: calc(#{$-grid-gap} / 2); } .sage-row--stage { - margin-left: $-grid-row-stage-inline-margin; - margin-right: $-grid-row-stage-inline-margin; + margin-inline-start: $-grid-row-stage-inline-margin; + margin-inline-end: $-grid-row-stage-inline-margin; &:not(:last-child) { - margin-bottom: sage-spacing(stage); + margin-block-end: sage-spacing(stage); } } .sage-row--panel { - margin-left: $-grid-row-panel-inline-margin; - margin-right: $-grid-row-panel-inline-margin; + margin-inline-start: $-grid-row-panel-inline-margin; + margin-inline-end: $-grid-row-panel-inline-margin; &:not(:last-child) { - margin-bottom: sage-spacing(panel); + margin-block-end: sage-spacing(panel); } } .sage-row--card { - margin-left: $-grid-row-card-inline-margin; - margin-right: $-grid-row-card-inline-margin; + margin-inline-start: $-grid-row-card-inline-margin; + margin-inline-end: $-grid-row-card-inline-margin; &:not(:last-child) { - margin-bottom: sage-spacing(card); + margin-block-end: sage-spacing(card); } } @@ -153,11 +153,11 @@ $-grid-col-gap-inline-padding: calc(#{$-grid-gap} / 2); } .sage-modal &:first-child { - padding-left: 0; + padding-inline-start: 0; } .sage-modal &:last-child { - padding-right: 0; + padding-inline-end: 0; } } } diff --git a/packages/sage-assets/lib/stylesheets/layout/_page.scss b/packages/sage-assets/lib/stylesheets/layout/_page.scss index 0bfd00a146..5043a099df 100644 --- a/packages/sage-assets/lib/stylesheets/layout/_page.scss +++ b/packages/sage-assets/lib/stylesheets/layout/_page.scss @@ -20,7 +20,7 @@ $-banner-height-offset: map-get($sage-banner-heights, default); .sage-page__icon { height: 60px; - margin-bottom: sage-spacing(); + margin-block-end: sage-spacing(); } .sage-page--has-open-modal { diff --git a/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss b/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss index 48631dc9ca..35511603cb 100644 --- a/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss +++ b/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss @@ -11,6 +11,13 @@ $css-property-map: ( left: inline-start ); +$css-property-map-rtl: ( + top: block-start, + right: inline-start, + bottom: block-end, + left: inline-end +); + @each $-name, $-value in $sage-spacings { $suffix: "-#{$-name}"; @@ -25,9 +32,14 @@ $css-property-map: ( left ) { $css-logical-property: map-get($css-property-map, $-box-side); + $css-logical-property-rtl: map-get($css-property-map-rtl, $-box-side); .sage-spacer-#{$-box-side}#{$suffix} { margin-#{$css-logical-property}: $-value; } + + [dir="rtl"] .sage-spacer-#{$-box-side}#{$suffix} { + margin-#{$css-logical-property-rtl}: $-value; + } } } diff --git a/packages/sage-assets/lib/stylesheets/vendor/_tiny_slider.scss b/packages/sage-assets/lib/stylesheets/vendor/_tiny_slider.scss index 1725275a53..907b49d2ef 100644 --- a/packages/sage-assets/lib/stylesheets/vendor/_tiny_slider.scss +++ b/packages/sage-assets/lib/stylesheets/vendor/_tiny_slider.scss @@ -1,3 +1,3 @@ -.tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active{position:relative;left:auto !important}.tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left} +.tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-inline-end:-100%}.tns-no-calc{position:relative;inset-inline-start:0}.tns-gallery{position:relative;inset-inline-start:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;inset-inline-start:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active{position:relative;inset-inline-start:auto !important}.tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;inset-inline-start:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;inset-inline-end:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left} /*# sourceMappingURL=sourcemaps/tiny-slider.css.map */ diff --git a/packages/sage-assets/lib/stylesheets/vendor/_tinymcev4.scss b/packages/sage-assets/lib/stylesheets/vendor/_tinymcev4.scss index 301360bd64..c88401e380 100644 --- a/packages/sage-assets/lib/stylesheets/vendor/_tinymcev4.scss +++ b/packages/sage-assets/lib/stylesheets/vendor/_tinymcev4.scss @@ -14,7 +14,7 @@ border: unset !important; /* stylelint-disable-line declaration-no-important */ &.mce-toolbar-grp { - border-bottom: sage-border() !important; /* stylelint-disable-line declaration-no-important */ + border-block-end: sage-border() !important; /* stylelint-disable-line declaration-no-important */ } } @@ -24,15 +24,15 @@ .mce-btn.mce-colorbutton button[role="presentation"] { position: relative; - padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */ + padding-inline-end: 0 !important; /* stylelint-disable-line declaration-no-important */ .mce-preview { /* stylelint-disable-line selector-max-compound-selectors */ - top: rem(18px) !important; /* stylelint-disable-line declaration-no-important */ - right: rem(-2px) !important; /* stylelint-disable-line declaration-no-important */ - left: unset !important; /* stylelint-disable-line declaration-no-important */ + inset-block-start: rem(18px) !important; /* stylelint-disable-line declaration-no-important */ + inset-inline-end: rem(-2px) !important; /* stylelint-disable-line declaration-no-important */ + inset-inline-start: unset !important; /* stylelint-disable-line declaration-no-important */ width: rem(13px) !important; /* stylelint-disable-line declaration-no-important */ height: rem(4px) !important; /* stylelint-disable-line declaration-no-important */ - margin-left: unset !important; /* stylelint-disable-line declaration-no-important */ + margin-inline-start: unset !important; /* stylelint-disable-line declaration-no-important */ } } @@ -74,7 +74,7 @@ .mce-ico.mce-i-forecolor::before { @include sage-icon-base(color, md); - margin-top: rem(2px); + margin-block-start: rem(2px); } .mce-ico.mce-i-bullist::before { diff --git a/packages/sage-system/lib/inputaffixes.js b/packages/sage-system/lib/inputaffixes.js index 398d942aaa..5d1f36b6a1 100644 --- a/packages/sage-system/lib/inputaffixes.js +++ b/packages/sage-system/lib/inputaffixes.js @@ -29,14 +29,27 @@ Sage.inputaffixes = (() => { const elLabel = makeLabel(elRoot.dataset.jsInputPrefix, 'prefix'); elRoot.appendChild(elLabel); elRoot.classList.add(prefixRootClass); - elInput.style.paddingLeft = `${elLabel.offsetWidth + inputPaddingOffset}px`; + const parentDir = elRoot.closest("html").getAttribute('dir'); + console.log("parentDir", parentDir); + + if (parentDir === 'rtl') { + elInput.style.paddingRight = `${elLabel.offsetWidth + inputPaddingOffset}px`; + } else { + elInput.style.paddingLeft = `${elLabel.offsetWidth + inputPaddingOffset}px`; + } } if (elRoot.dataset.jsInputSuffix) { const elLabel = makeLabel(elRoot.dataset.jsInputSuffix, 'suffix'); elRoot.appendChild(elLabel); elRoot.classList.add(suffixRootClass); - elInput.style.paddingRight = `${elLabel.offsetWidth + inputPaddingOffset}px`; + const parentDir = elRoot.closest("html").getAttribute('dir'); + + if (parentDir === 'rtl') { + elInput.style.paddingLeft = `${elLabel.offsetWidth + inputPaddingOffset}px`; + } else { + elInput.style.paddingRight = `${elLabel.offsetWidth + inputPaddingOffset}px`; + } } }; diff --git a/packages/sage-system/lib/inputgroup.js b/packages/sage-system/lib/inputgroup.js index b757c08ad3..2538b42dc0 100644 --- a/packages/sage-system/lib/inputgroup.js +++ b/packages/sage-system/lib/inputgroup.js @@ -28,7 +28,13 @@ Sage.inputgroup = (function() { inputGroupBtns.forEach(function(btn) { const parentGroup = btn.closest(".sage-input-group"); const field = parentGroup.querySelector(".sage-input__field"); - field.style.paddingRight = `${btn.offsetWidth + inputPaddingOffset }px`; + const parentDir = btn.closest('html[dir="rtl"]'); + + if (parentDir) { + field.style.paddingLeft = `${btn.offsetWidth + inputPaddingOffset}px`; + } else { + field.style.paddingRight = `${btn.offsetWidth + inputPaddingOffset}px`; + } }); }