diff --git a/app/styles/_accessibility.scss b/app/styles/_accessibility.scss index a6c4bacd..4bb82e06 100644 --- a/app/styles/_accessibility.scss +++ b/app/styles/_accessibility.scss @@ -1,6 +1,6 @@ .a11y-only { position: absolute; - top: 0; + inset-block-start: 0; z-index: -1; pointer-events: none; opacity: 0 !important; diff --git a/app/styles/_alerts.scss b/app/styles/_alerts.scss index bb9af689..5bfe2300 100644 --- a/app/styles/_alerts.scss +++ b/app/styles/_alerts.scss @@ -65,11 +65,11 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max } &--marg-b12 { - margin-bottom: 1.2rem; + margin-block-end: 1.2rem; } &--no-margin { - margin-bottom: 0; + margin-block-end: 0; } &--margin-none { @@ -254,8 +254,8 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max width: 16px; height:16px; position: absolute; - top:0; - left: 0.3rem; + inset-block-start:0; + inset-inline-start: 0.3rem; line-height: inherit; color: inherit; font-style: normal; @@ -311,7 +311,7 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max & [class^="icon-"], & [class*=" icon-"] { color:inherit; - margin-top: 0.3rem; + margin-block-start: 0.3rem; } &:hover { @@ -384,6 +384,6 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max .sd-alert { box-shadow: none !important; border-radius: unset !important; - margin-bottom: 0; + margin-block-end: 0; } } diff --git a/app/styles/_avatar.scss b/app/styles/_avatar.scss index a0bb29a1..868bf911 100644 --- a/app/styles/_avatar.scss +++ b/app/styles/_avatar.scss @@ -189,7 +189,7 @@ display: block; position: absolute; inset-block-start: 4px; - left: 4px; + inset-inline-start: 4px; background: var(--sd-colour-background__base--00); width: 8px; height: 8px; @@ -205,7 +205,7 @@ .sd-avatar--indicator-admin { inset-block-start: -4px; - left: -6px; + inset-inline-start: -6px; } } @@ -216,7 +216,7 @@ .sd-avatar--indicator-admin { inset-block-start: -4px; - left: -6px; + inset-inline-start: -6px; } } @@ -270,7 +270,7 @@ height: 14px; width: 14px; inset-block-start: 1px; - left: 5px; + inset-inline-start: 5px; } } } diff --git a/app/styles/_badge.scss b/app/styles/_badge.scss index 9afcab30..e078e255 100644 --- a/app/styles/_badge.scss +++ b/app/styles/_badge.scss @@ -82,17 +82,17 @@ $badge-lineheight: 1.1em !default; .badge { position: absolute; - top: -.5rem; - right: -.8rem; + inset-block-start: -.5rem; + inset-inline-end: -.8rem; } + .element-with-badge, + .btn { - margin-left: 1.2rem; + margin-inline-start: 1.2rem; vertical-align: top; } } .btn + .element-with-badge { - margin-left: 1.2rem; + margin-inline-start: 1.2rem; vertical-align: top; } diff --git a/app/styles/_big-icon-font.scss b/app/styles/_big-icon-font.scss index 37215714..38d1fb88 100644 --- a/app/styles/_big-icon-font.scss +++ b/app/styles/_big-icon-font.scss @@ -93,7 +93,7 @@ $sd-big-icon-font: ( add-to-list: "\e61e", text: "\e61f", desk: "\e620", - chevron-left: "\e621", + chevron-inset-inline-start: "\e621", chevron-right: "\e622", dashboard-alt: "\e623", master: "\e624", diff --git a/app/styles/_boxed-list.scss b/app/styles/_boxed-list.scss index e3ee4503..4b4b628c 100644 --- a/app/styles/_boxed-list.scss +++ b/app/styles/_boxed-list.scss @@ -5,7 +5,7 @@ flex-direction: column; align-self: stretch; gap: $sd-base-increment * 1.5; - margin-bottom: $sd-base-increment * 2; + margin-block-end: $sd-base-increment * 2; } .boxed-list--comfortable { @@ -32,8 +32,8 @@ $boxed-list-palette: $sd-basic-palette; width: 4px; height: 100%; position: absolute; - top: 0px; - left: 0px; + inset-block-start: 0px; + inset-inline-start: 0px; background-color: $color; z-index: 1; border-radius: 3px 0 0 3px; @@ -51,7 +51,7 @@ $boxed-list-palette: $sd-basic-palette; &:hover { .boxed-list__slide-in-actions, .boxed-list__actions--slide-in { - padding-left: 0.6rem; + padding-inline-start: 0.6rem; width: auto; max-width: 32px; overflow: visible; @@ -96,7 +96,7 @@ $boxed-list-palette: $sd-basic-palette; .boxed-list__item--comfortable { min-height: 3.2rem; - @include sd-padding('1-5'); + padding: var(--space--1-5); } .boxed-list__item--compact { @@ -106,7 +106,7 @@ $boxed-list-palette: $sd-basic-palette; .boxed-list__item--loose { min-height: 4.8rem; - @include sd-padding('2'); + padding: var(--space--2); } .boxed-list__item-media { @@ -170,7 +170,7 @@ $boxed-list-palette: $sd-basic-palette; flex-direction: row; align-items: center; padding: 0.8rem 0.8rem 0 0.8rem; - margin-top: 0.8rem; + margin-block-start: 0.8rem; } .boxed-list__item-footer--allign-baseline { @@ -178,7 +178,7 @@ $boxed-list-palette: $sd-basic-palette; } .boxed-list__item-content-row + .boxed-list__item-content-row { - margin-top: 0.8rem; + margin-block-start: 0.8rem; } .boxed-list__slide-in-actions, diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss index f02946d5..fdf6c28e 100644 --- a/app/styles/_buttons.scss +++ b/app/styles/_buttons.scss @@ -288,8 +288,8 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px; .btn--expanded { width: 100%; - margin-right: 0; - margin-left: 0; + margin-inline-end: 0; + margin-inline-start: 0; } // Colours @@ -635,47 +635,47 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px; } .button-group__divider--small { - @include sd-margin('0-5', 'x'); + margin-inline: var(--space--0-5); } .button-group__divider--medium { - @include sd-margin('1', 'x'); + margin-inline: var(--space--1); } .button-group__divider--large { - @include sd-margin('1-5', 'x'); + margin-inline: var(--space--1-5); } .button-group__divider--border { - border-left: 1px dotted var(--sd-colour-line--strong); + border-inline-start: 1px dotted var(--sd-colour-line--strong); } .button-group--vertical { .button-group__divider { height: 1px; width: auto; - @include sd-margin('0', 'x'); + margin-inline: var(--space--0); &.button-group__divider--mini { - @include sd-padding('1-5', 'top'); + padding-block-start: var(--space--1-5); } &.button-group__divider--small { - @include sd-margin('0-5', 'y'); + margin-block: var(--space--0-5); } &.button-group__divider--medium { - @include sd-margin('1', 'y'); + margin-block: var(--space--1); } &.button-group__divider--large { - @include sd-margin('1-5', 'y'); + margin-block: var(--space--1-5); } } .button-group__divider--border { - border-left: none; - border-top: 1px dotted var(--sd-colour-line--strong); + border-inline-start: none; + border-block-start: 1px dotted var(--sd-colour-line--strong); } } @@ -754,10 +754,10 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px; .btn__state--loading { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; display: flex; align-items: center; justify-content: center; diff --git a/app/styles/_carousel.scss b/app/styles/_carousel.scss index 645a6bef..9ee66a79 100644 --- a/app/styles/_carousel.scss +++ b/app/styles/_carousel.scss @@ -2,10 +2,10 @@ .sd-carousel { position: fixed; - left: 40px; - right: 40px; - top: 40px; - bottom: 40px; + inset-inline-start: 40px; + inset-inline-end: 40px; + inset-block-start: 40px; + inset-block-end: 40px; align-items: center; flex-direction: row; z-index: 1050; @@ -65,8 +65,8 @@ .sd-carousel__page-header-illustration { position: absolute; - left: 0; - bottom: 0; + inset-inline-start: 0; + inset-block-end: 0; opacity: 0.65; } @@ -81,7 +81,7 @@ color: $white; font-size: 3.2rem; line-height: 1; - top: calc(50% - 1.6rem); + inset-block-start: calc(50% - 1.6rem); } .sd-carousel__page-text { @@ -92,16 +92,16 @@ font-weight: 300; p { - margin-bottom: 1em; + margin-block-end: 1em; &:last-child, &:only-child { - margin-bottom: 0; + margin-block-end: 0; } } h3 { font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif; font-size: 2rem; - margin-bottom: 0.8em; + margin-block-end: 0.8em; font-weight: 700; } } @@ -122,7 +122,7 @@ height: 5.6rem; line-height: 5.6rem; position: absolute; - top: calc(50% - 2.8rem); + inset-block-start: calc(50% - 2.8rem); width: 5.6rem; box-shadow: 0 4px 24px rgba(0,0,0,.20), 0 10px 28px rgba(0,0,0,.35); color: $sd-green; @@ -143,7 +143,7 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; - top:0; + inset-block-start:0; text-align: center; z-index: 2; color: $sd-green; @@ -157,7 +157,7 @@ } .sd-carousel__nav-button--next { - right: -88px; + inset-inline-end: -88px; color: inherit; &::after { @@ -166,7 +166,7 @@ } .sd-carousel__nav-button--prev { - left: -88px; + inset-inline-start: -88px; color: inherit; &::after { @@ -175,7 +175,7 @@ } .sd-carousel__nav-button--end { - right: -88px; + inset-inline-end: -88px; background-color: var(--sd-colour-success); &::after { @@ -193,7 +193,7 @@ } .sd-carousel__page-indication-bar { - bottom: -3.6rem; + inset-block-end: -3.6rem; height: 2.6rem; position: absolute; text-align: center; @@ -221,8 +221,8 @@ z-index: 1045; background: rgba(0,0,0,.45); position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; } diff --git a/app/styles/_content-divider.scss b/app/styles/_content-divider.scss index 596d52fb..fb7fa36b 100644 --- a/app/styles/_content-divider.scss +++ b/app/styles/_content-divider.scss @@ -4,10 +4,10 @@ padding: 0; color: $sd-text; list-style: none; - border-bottom: 0; - border-left: 0; - border-right: 0; - border-top: 1px var(--sd-colour-line--medium); + border-block-end: 0; + border-inline-start: 0; + border-inline-end: 0; + border-block-start: 1px var(--sd-colour-line--medium); border-style: solid; &.sd-content-divider--with-text { @@ -17,10 +17,10 @@ font-size: 16px; white-space: nowrap; text-align: center; - border-top: 0; - border-bottom: 0; - border-left: 0; - border-right: 0; + border-block-start: 0; + border-block-end: 0; + border-inline-start: 0; + border-inline-end: 0; border-top-color: var(--sd-colour-line--medium); border-style: solid; } @@ -58,14 +58,14 @@ &::before, &::after { content: ""; position: relative; - top: 50%; + inset-block-start: 50%; width: 50%; - border-top: 1px transparent; + border-block-start: 1px transparent; border-top-color: transparent; border-top-color: inherit; - border-bottom: 0; - border-left: 0; - border-right: 0; + border-block-end: 0; + border-inline-start: 0; + border-inline-end: 0; transform: translateY(50%); border-style: inherit; } @@ -114,8 +114,8 @@ display: inline-block; //margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5; vertical-align: middle; - border-top: 0; - border-left: 1px var(--sd-colour-line--medium); + border-block-start: 0; + border-inline-start: 1px var(--sd-colour-line--medium); border-style: solid; flex-grow: 0; align-self: stretch; @@ -127,7 +127,7 @@ flex-direction: column; justify-content: center; align-items: center; - border-left: 0; + border-inline-start: 0; .sd-content-divider__inner-text { padding: $sd-base-increment * 0.5 $sd-base-increment * 2; @@ -138,10 +138,10 @@ background-color: transparent; position: relative; height: 50%; - border-left: 1px var(--sd-colour-line--medium); - border-right: 0; - border-bottom: 0; - border-top: 0; + border-inline-start: 1px var(--sd-colour-line--medium); + border-inline-end: 0; + border-block-end: 0; + border-block-start: 0; width: 1px; border-style: solid; } diff --git a/app/styles/_empty-states.scss b/app/styles/_empty-states.scss index 2ea33150..c4d210a1 100644 --- a/app/styles/_empty-states.scss +++ b/app/styles/_empty-states.scss @@ -16,14 +16,14 @@ .content-state__empty-container--absolute { position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-block-end: 0; + inset-inline-end: 0; } .content-state__empty-info { - @include sd-padding('2','x'); + padding-inline: var(--space--2); display: flex; flex-direction: column; align-items: center; @@ -34,7 +34,7 @@ } .content-state__heading { - @include sd-margin('1','bottom'); + margin-block-end: var(--space--1); font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif; font-size: 1.8rem; line-height: 1.4; @@ -58,8 +58,8 @@ } .content-state__image { - @include sd-padding('1','x'); - @include sd-margin('2','bottom'); + padding-inline: var(--space--1); + margin-block-end: var(--space--2); display: block; height: auto; padding: 0; diff --git a/app/styles/_hamburger.scss b/app/styles/_hamburger.scss index cfa4b5c9..9fa960be 100644 --- a/app/styles/_hamburger.scss +++ b/app/styles/_hamburger.scss @@ -43,8 +43,8 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default; .hamburger__inner { display: block; - top: 50%; - margin-top: $hamburger-layer-height / -2; + inset-block-start: 50%; + margin-block-start: $hamburger-layer-height / -2; &, &::before, @@ -66,11 +66,11 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default; } &::before { - top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1; + inset-block-start: ($hamburger-layer-spacing + $hamburger-layer-height) * -1; } &::after { - bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1; + inset-block-end: ($hamburger-layer-spacing + $hamburger-layer-height) * -1; } } @@ -101,14 +101,14 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); &::before { - top: 0; + inset-block-start: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } &::after { - bottom: 0; + inset-block-end: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); @@ -141,14 +141,14 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); &::before { - top: 0; + inset-block-start: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } &::after { - bottom: 0; + inset-block-end: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); diff --git a/app/styles/_helpers.scss b/app/styles/_helpers.scss index e2fd85b3..e6af0eb2 100644 --- a/app/styles/_helpers.scss +++ b/app/styles/_helpers.scss @@ -1,9 +1,9 @@ .pull-left { - float: left; + float: inline-start; } .pull-right { - float: right; + float: inline-end; } .clearfix { @@ -330,7 +330,7 @@ } .sd-object-position--left { - object-position: left; + object-position: inline-start; } .sd-object-position--left-bottom { @@ -406,15 +406,13 @@ $value in $sd-shadowProperties { // } - // WEBKIT SCROLL - ::-webkit-scrollbar { width: 8px; height: 8px; margin: -1px 0; position: fixed; - right: 10px; + inset-inline-end: 10px; } ::-webkit-scrollbar:hover { @@ -434,7 +432,7 @@ $value in $sd-shadowProperties { // HEADINGS .sd-heading-3 { font-size: 1.6rem; - margin-bottom: 1.6rem; + margin-block-end: 1.6rem; } // Deafult text syles based on type of data @@ -455,18 +453,6 @@ time { // TYPOGRAPHY HELPERS // ------------------------------------------------- -// .sd-text { -// color: inherit; -// font-weight: 300; -// line-height: 1.5; -// &--medium { -// font-size: 1.4rem; -// } -// &--large { -// font-size: 1.6rem; -// } -// } - h1, h2, h3, @@ -708,7 +694,7 @@ h6 { font-weight: 500; font-size: 1.2rem; text-transform: uppercase; - margin-right: 1rem; + margin-inline-end: 1rem; } .sd-text__title { @@ -745,17 +731,17 @@ h6 { display: inline-flex; i { - margin-right: 0.3rem; + margin-inline-end: 0.3rem; } } .sd-text-icon+.sd-text-icon { - margin-right: 1rem; + margin-inline-end: 1rem; } .sd-text-icon.sd-text-icon--aligned-r+.sd-text-icon.sd-text-icon--aligned-r { - margin-right: 0; - margin-left: 1rem; + margin-inline-end: 0; + margin-inline-start: 1rem; } // Opacity helpers @@ -803,12 +789,12 @@ h6 { .mt-auto, .sd-margin-t--auto { - margin-top: auto !important; + margin-block-start: auto !important; } .mb-auto, .sd-margin-b--auto { - margin-bottom: auto !important; + margin-block-end: auto !important; } .mlr-auto, @@ -818,111 +804,511 @@ h6 { } .sd-margin-y--auto { - margin-top: auto !important; - margin-bottom: auto !important; + margin-block-start: auto !important; + margin-block-end: auto !important; } .sd-margin--auto { margin: auto !important; } -// Common margin overrides -// $sd-base-increment - default size of the increment is 0.8rem; -// For example: .sd-margin-t--1 {margin-top: 0.8rem}, .sd-padding-l--2 {padding-left: 1.6rem} -$sd-increments: ( - '0': 0, - '0-5': 0.5, - '1': 1, - '1-5': 1.5, - '2': 2, - '3': 3, - '4' : 4, - '5' : 5 -); // Number of increments, genarates new classes eg. .sd-padding-top--4, .sd-margin-top--4 -$sd-sides: ( - top, - right, - bottom, - left, - x, - y -); // It's generating these sides -$sd-properties: ( - padding, - margin -); // It's generating these properties - -@each $incrementName, -$incrementValue in $sd-increments { - @each $property in $sd-properties { - @each $side in $sd-sides { - @if($side ==x) { - .sd-#{$property}-#{$side}--#{$incrementName} { - #{$property}-left: #{$sd-base-increment * $incrementValue} !important; - #{$property}-right: #{$sd-base-increment * $incrementValue} !important; - } - } - - @else if ($side ==y) { - .sd-#{$property}-#{$side}--#{$incrementName} { - #{$property}-top: #{$sd-base-increment * $incrementValue} !important; - #{$property}-bottom: #{$sd-base-increment * $incrementValue} !important; - } - } - - @else { - .sd-#{$property}-#{str-slice($side, 1, 1)}--#{$incrementName} { - #{$property}-#{$side}: #{$sd-base-increment * $incrementValue} !important; - } - } - } - - .sd-#{$property}--#{$incrementName} { - #{$property}: #{$sd-base-increment * $incrementValue} !important; - } - } -} - -// MARGIN AND PADDING MIXINS -// You can create new classes with this syntax: -// .customClass {@include sd-margin('0-5', 'top')} -// Output: -// .customClass { margin-top: 0.8rem !important; } -// if you want the value to be applied to all sides write only the number eg. @include sd-margin('0-5') - - -@mixin sd-spacing($property, $sd-incrementValue, $side) { - @if ($side ==false) { - #{$property}: #{$sd-base-increment * map-get($sd-increments, $sd-incrementValue)}; - } - - @else if ($side ==x) { - #{$property}-left: #{$sd-base-increment * map-get($sd-increments, $sd-incrementValue)}; - #{$property}-right: #{$sd-base-increment * map-get($sd-increments, $sd-incrementValue)}; - } - - @else if ($side ==y) { - #{$property}-top: #{$sd-base-increment * map-get($sd-increments, $sd-incrementValue)}; - #{$property}-bottom: #{$sd-base-increment * map-get($sd-increments, $sd-incrementValue)}; - } - - @else { - #{$property}-#{$side}: #{$sd-base-increment * map-get($sd-increments, $sd-incrementValue)}; - } +// MARGINS ---------------------------------------------- // +// MARGIN (all sides) +.m-0, +.sd-margin--0 { + margin: 0 !important; } - -@mixin sd-margin($sd-incrementValue, $side: false) { - @include sd-spacing('margin', $sd-incrementValue, $side) +.m-0-5, +.sd-margin--0-5 { + margin: calc(0.5 * var(--base-increment)) !important; +} +.m-1, +.sd-margin--1 { + margin: calc(1 * var(--base-increment)) !important; +} +.m-1-5, +.sd-margin--1-5 { + margin: calc(1.5 * var(--base-increment)) !important; +} +.m-2, +.sd-margin--2 { + margin: calc(2 * var(--base-increment)) !important; +} +.m-3, +.sd-margin--3 { + margin: calc(3 * var(--base-increment)) !important; +} +.m-4, +.sd-margin--4 { + margin: calc(4 * var(--base-increment)) !important; +} +.m-5, +.sd-margin--5 { + margin: calc(5 * var(--base-increment)) !important; +} +// MARGIN INLINE START (left) +.ms-0, +.sd-margin-l--0 { + margin-inline-start: 0 !important; +} +.ms-0-5, +.sd-margin-l--0-5 { + margin-inline-start: calc(0.5 * var(--base-increment)) !important; +} +.ms-1, +.sd-margin-l--1 { + margin-inline-start: calc(1 * var(--base-increment)) !important; +} +.ms-1-5, +.sd-margin-l--1-5 { + margin-inline-start: calc(1.5 * var(--base-increment)) !important; +} +.ms-2, +.sd-margin-l--2 { + margin-inline-start: calc(2 * var(--base-increment)) !important; +} +.ms-3, +.sd-margin-l--3 { + margin-inline-start: calc(3 * var(--base-increment)) !important; +} +.ms-4, +.sd-margin-l--4 { + margin-inline-start: calc(4 * var(--base-increment)) !important; +} +.ms-5, +.sd-margin-l--5 { + margin-inline-start: calc(5 * var(--base-increment)) !important; +} +// MARGIN INLINE END (right) +.me-0, +.sd-margin-r--0 { + margin-inline-end: 0 !important; +} +.me-0-5, +.sd-margin-r--0-5 { + margin-inline-end: calc(0.5 * var(--base-increment)) !important; +} +.me-1, +.sd-margin-r--1 { + margin-inline-end: calc(1 * var(--base-increment)) !important; +} +.me-1-5, +.sd-margin-r--1-5 { + margin-inline-end: calc(1.5 * var(--base-increment)) !important; +} +.me-2, +.sd-margin-r--2 { + margin-inline-end: calc(2 * var(--base-increment)) !important; +} +.me-3, +.sd-margin-r--3 { + margin-inline-end: calc(3 * var(--base-increment)) !important; +} +.me-4, +.sd-margin-r--4 { + margin-inline-end: calc(4 * var(--base-increment)) !important; +} +.me-5, +.sd-margin-r--5 { + margin-inline-end: calc(5 * var(--base-increment)) !important; +} +// MARGIN INLINE (x, left and right) +.mx-0, +.sd-margin-x--0 { + margin-inline-start: 0 !important; + margin-inline-end: 0 !important; +} +.mx-0-5, +.sd-margin-r--0-5 { + margin-inline-start: calc(0.5 * var(--base-increment)) !important; + margin-inline-end: calc(0.5 * var(--base-increment)) !important; +} +.mx-1, +.sd-margin-x--1 { + margin-inline-start: calc(1 * var(--base-increment)) !important; + margin-inline-end: calc(1 * var(--base-increment)) !important; +} +.mx-1-5, +.sd-margin-x--1-5 { + margin-inline-start: calc(1.5 * var(--base-increment)) !important; + margin-inline-end: calc(1.5 * var(--base-increment)) !important; +} +.mx-2, +.sd-margin-x--2 { + margin-inline-start: calc(2 * var(--base-increment)) !important; + margin-inline-end: calc(2 * var(--base-increment)) !important; +} +.mx-3, +.sd-margin-x--3 { + margin-inline-start: calc(3 * var(--base-increment)) !important; + margin-inline-end: calc(3 * var(--base-increment)) !important; +} +.mx-4, +.sd-margin-x--4 { + margin-inline-start: calc(4 * var(--base-increment)) !important; + margin-inline-end: calc(4 * var(--base-increment)) !important; +} +.mx-5, +.sd-margin-x--5 { + margin-inline-start: calc(5 * var(--base-increment)) !important; + margin-inline-end: calc(5 * var(--base-increment)) !important; +} +// MARGIN BLOCK START (top) +.mt-0, +.sd-margin-t--0 { + margin-block-start: 0 !important; +} +.mt-0-5, +.sd-margin-t--0-5 { + margin-block-start: calc(0.5 * var(--base-increment)) !important; +} +.mt-1, +.sd-margin-t--1 { + margin-block-start: calc(1 * var(--base-increment)) !important; +} +.mt-1-5, +.sd-margin-t--1-5 { + margin-block-start: calc(1.5 * var(--base-increment)) !important; +} +.mt-2, +.sd-margin-t--2 { + margin-block-start: calc(2 * var(--base-increment)) !important; +} +.mt-3, +.sd-margin-t--3 { + margin-block-start: calc(3 * var(--base-increment)) !important; +} +.mt-4, +.sd-margin-t--4 { + margin-block-start: calc(4 * var(--base-increment)) !important; +} +.mt-5, +.sd-margin-t--5 { + margin-block-start: calc(5 * var(--base-increment)) !important; +} +// MARGIN BLOCK END (bottom) +.mb--0, +.sd-margin-b--0 { + margin-block-end: 0 !important; +} +.mb-0-5, +.sd-margin-b--0-5 { + margin-block-end: calc(0.5 * var(--base-increment)) !important; +} +.mb-1, +.sd-margin-b--1 { + margin-block-end: calc(1 * var(--base-increment)) !important; +} +.mb-1-5, +.sd-margin-b--1-5 { + margin-block-end: calc(1.5 * var(--base-increment)) !important; +} +.mb-2, +.sd-margin-b--2 { + margin-block-end: calc(2 * var(--base-increment)) !important; +} +.mb-3, +.sd-margin-b--3 { + margin-block-end: calc(3 * var(--base-increment)) !important; +} +.mb-4, +.sd-margin-b--4 { + margin-block-end: calc(4 * var(--base-increment)) !important; +} +.mb-5, +.sd-margin-b--5 { + margin-block-end: calc(5 * var(--base-increment)) !important; +} +// MARGIN BLOCK (y, top & bottom) +.my-0, +.sd-margin-y--0 { + margin-block-start: 0 !important; + margin-block-end: 0 !important; +} +.my-0-5, +.sd-margin-y--0-5 { + margin-block-start: calc(0.5 * var(--base-increment)) !important; + margin-block-end: calc(0.5 * var(--base-increment)) !important; +} +.my-1, +.sd-margin-y--1 { + margin-block-start: calc(1 * var(--base-increment)) !important; + margin-block-end: calc(1 * var(--base-increment)) !important; +} +.my-1-5, +.sd-margin-y--1-5 { + margin-block-start: calc(1.5 * var(--base-increment)) !important; + margin-block-end: calc(1.5 * var(--base-increment)) !important; +} +.my-2, +.sd-margin-y--2 { + margin-block-start: calc(2 * var(--base-increment)) !important; + margin-block-end: calc(2 * var(--base-increment)) !important; +} +.my-3, +.sd-margin-y--3 { + margin-block-start: calc(3 * var(--base-increment)) !important; + margin-block-end: calc(3 * var(--base-increment)) !important; +} +.my-4, +.sd-margin-y--4 { + margin-block-start: calc(4 * var(--base-increment)) !important; + margin-block-end: calc(4 * var(--base-increment)) !important; +} +.my-5, +.sd-margin-y--5 { + margin-block-start: calc(5 * var(--base-increment)) !important; + margin-block-end: calc(5 * var(--base-increment)) !important; +} +// PADDINGS ---------------------------------------------- // +// PADDING (all sides) +.p-0, +.sd-padding--0 { + padding: 0 !important; } - -@mixin sd-padding($sd-incrementValue, $side: false) { - @include sd-spacing('padding', $sd-incrementValue, $side) +.p-0-5, +.sd-padding--0-5 { + padding: calc(0.5 * var(--base-increment)) !important; +} +.p-1, +.sd-padding--1 { + padding: calc(1 * var(--base-increment)) !important; +} +.p-1-5, +.sd-padding--1-5 { + padding: calc(1.5 * var(--base-increment)) !important; +} +.p-2, +.sd-padding--2 { + padding: calc(2 * var(--base-increment)) !important; +} +.p-3, +.sd-padding--3 { + padding: calc(3 * var(--base-increment)) !important; +} +.p-4, +.sd-padding--4 { + padding: calc(4 * var(--base-increment)) !important; +} +.p-5, +.sd-padding--5 { + padding: calc(5 * var(--base-increment)) !important; +} +// PADDING INLINE START (left) +.ps-0, +.sd-padding-l--0 { + padding-inline-start: 0 !important; +} +.ps-0-5, +.sd-padding-l--0-5 { + padding-inline-start: calc(0.5 * var(--base-increment)) !important; +} +.ps-1, +.sd-padding-l--1 { + padding-inline-start: calc(1 * var(--base-increment)) !important; +} +.ps-1-5, +.sd-padding-l--1-5 { + padding-inline-start: calc(1.5 * var(--base-increment)) !important; +} +.ps-2, +.sd-padding-l--2 { + padding-inline-start: calc(2 * var(--base-increment)) !important; +} +.ps-3, +.sd-padding-l--3 { + padding-inline-start: calc(3 * var(--base-increment)) !important; +} +.ps-4, +.sd-padding-l--4 { + padding-inline-start: calc(4 * var(--base-increment)) !important; +} +.ps-5, +.sd-padding-l--5 { + padding-inline-start: calc(5 * var(--base-increment)) !important; +} +// PADDING INLINE END (right) +.pe-0, +.sd-padding-r--0 { + padding-inline-end: 0 !important; +} +.pe-0-5, +.sd-padding-r--0-5 { + padding-inline-end: calc(0.5 * var(--base-increment)) !important; +} +.pe-1, +.sd-padding-r--1 { + padding-inline-end: calc(1 * var(--base-increment)) !important; +} +.pe-1-5, +.sd-padding-r--1-5 { + padding-inline-end: calc(1.5 * var(--base-increment)) !important; +} +.pe-2, +.sd-padding-r--2 { + padding-inline-end: calc(2 * var(--base-increment)) !important; +} +.pe-3, +.sd-padding-r--3 { + padding-inline-end: calc(3 * var(--base-increment)) !important; +} +.pe-4, +.sd-padding-r--4 { + padding-inline-end: calc(4 * var(--base-increment)) !important; +} +.pe-5, +.sd-padding-r--5 { + padding-inline-end: calc(5 * var(--base-increment)) !important; +} +// PADDING INLINE (x, left and right) +.px-0, +.sd-padding-x--0 { + padding-inline-start: 0 !important; + padding-inline-end: 0 !important; +} +.px-0-5, +.sd-padding-r--0-5 { + padding-inline-start: calc(0.5 * var(--base-increment)) !important; + padding-inline-end: calc(0.5 * var(--base-increment)) !important; +} +.px-1, +.sd-padding-x--1 { + padding-inline-start: calc(1 * var(--base-increment)) !important; + padding-inline-end: calc(1 * var(--base-increment)) !important; +} +.px-1-5, +.sd-padding-x--1-5 { + padding-inline-start: calc(1.5 * var(--base-increment)) !important; + padding-inline-end: calc(1.5 * var(--base-increment)) !important; +} +.px-2, +.sd-padding-x--2 { + padding-inline-start: calc(2 * var(--base-increment)) !important; + padding-inline-end: calc(2 * var(--base-increment)) !important; +} +.px-3, +.sd-padding-x--3 { + padding-inline-start: calc(3 * var(--base-increment)) !important; + padding-inline-end: calc(3 * var(--base-increment)) !important; +} +.px-4, +.sd-padding-x--4 { + padding-inline-start: calc(4 * var(--base-increment)) !important; + padding-inline-end: calc(4 * var(--base-increment)) !important; +} +.px-5, +.sd-padding-x--5 { + padding-inline-start: calc(5 * var(--base-increment)) !important; + padding-inline-end: calc(5 * var(--base-increment)) !important; +} +// PADDING BLOCK START (top) +.pt-0, +.sd-padding-t--0 { + padding-block-start: 0 !important; +} +.pt-0-5, +.sd-padding-t--0-5 { + padding-block-start: calc(0.5 * var(--base-increment)) !important; +} +.pt-1, +.sd-padding-t--1 { + padding-block-start: calc(1 * var(--base-increment)) !important; +} +.pt-1-5, +.sd-padding-t--1-5 { + padding-block-start: calc(1.5 * var(--base-increment)) !important; +} +.pt-2, +.sd-padding-t--2 { + padding-block-start: calc(2 * var(--base-increment)) !important; +} +.pt-3, +.sd-padding-t--3 { + padding-block-start: calc(3 * var(--base-increment)) !important; +} +.pt-4, +.sd-padding-t--4 { + padding-block-start: calc(4 * var(--base-increment)) !important; +} +.pt-5, +.sd-padding-t--5 { + padding-block-start: calc(5 * var(--base-increment)) !important; +} +// PADDING BLOCK END (bottom) +.pb--0, +.sd-padding-b--0 { + padding-block-end: 0 !important; +} +.pb-0-5, +.sd-padding-b--0-5 { + padding-block-end: calc(0.5 * var(--base-increment)) !important; +} +.pb-1, +.sd-padding-b--1 { + padding-block-end: calc(1 * var(--base-increment)) !important; +} +.pb-1-5, +.sd-padding-b--1-5 { + padding-block-end: calc(1.5 * var(--base-increment)) !important; +} +.pb-2, +.sd-padding-b--2 { + padding-block-end: calc(2 * var(--base-increment)) !important; +} +.pb-3, +.sd-padding-b--3 { + padding-block-end: calc(3 * var(--base-increment)) !important; +} +.pb-4, +.sd-padding-b--4 { + padding-block-end: calc(4 * var(--base-increment)) !important; +} +.pb-5, +.sd-padding-b--5 { + padding-block-end: calc(5 * var(--base-increment)) !important; +} +// PADDING BLOCK (y, top & bottom) +.py-0, +.sd-padding-y--0 { + padding-block-start: 0 !important; + padding-block-end: 0 !important; +} +.py-0-5, +.sd-padding-y--0-5 { + padding-block-start: calc(0.5 * var(--base-increment)) !important; + padding-block-end: calc(0.5 * var(--base-increment)) !important; +} +.py-1, +.sd-padding-y--1 { + padding-block-start: calc(1 * var(--base-increment)) !important; + padding-block-end: calc(1 * var(--base-increment)) !important; +} +.py-1-5, +.sd-padding-y--1-5 { + padding-block-start: calc(1.5 * var(--base-increment)) !important; + padding-block-end: calc(1.5 * var(--base-increment)) !important; +} +.py-2, +.sd-padding-y--2 { + padding-block-start: calc(2 * var(--base-increment)) !important; + padding-block-end: calc(2 * var(--base-increment)) !important; +} +.py-3, +.sd-padding-y--3 { + padding-block-start: calc(3 * var(--base-increment)) !important; + padding-block-end: calc(3 * var(--base-increment)) !important; +} +.py-4, +.sd-padding-y--4 { + padding-block-start: calc(4 * var(--base-increment)) !important; + padding-block-end: calc(4 * var(--base-increment)) !important; +} +.py-5, +.sd-padding-y--5 { + padding-block-start: calc(5 * var(--base-increment)) !important; + padding-block-end: calc(5 * var(--base-increment)) !important; } - -// START: This part should not be used for new stuff, it's only here for older implemetation. -// Once the implemented classes are refactored this should be removed - // padding all (KILL THIS AFTER REFACTORING) .sd-padding-all--0 { padding: 0 !important; @@ -972,6 +1358,7 @@ $incrementValue in $sd-increments { .sd-margin-all--3 { margin: $sd-base-increment * 3 !important; } + // END @@ -983,7 +1370,7 @@ $incrementValue in $sd-increments { .sd-accessibility__screenreader-text { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; font-size: 0.1rem; color: transparent !important; pointer-events: none; diff --git a/app/styles/_loaders.scss b/app/styles/_loaders.scss index f1a21d57..0cef1318 100644 --- a/app/styles/_loaders.scss +++ b/app/styles/_loaders.scss @@ -1,9 +1,9 @@ .sd-loading-overlay { 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; z-index: 3; background-image: url(../img/three-dots.svg); background-repeat: no-repeat; @@ -16,10 +16,10 @@ .sd-loading-overlay--plain { 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; z-index: 10; display: flex; align-items: center; diff --git a/app/styles/_master-desk.scss b/app/styles/_master-desk.scss index 847a4bf5..70c02aed 100644 --- a/app/styles/_master-desk.scss +++ b/app/styles/_master-desk.scss @@ -6,14 +6,14 @@ $board-header-border-color: var(--color-kanban-border); } .sd-board__header { - @include sd-padding('0-5', 'bottom'); + padding-block-end: var(--space--0-5); grid-row: 1/2; position: relative; min-height: 2rem; display: flex; flex-direction: row; align-items: center; - border-bottom: 4px solid $board-header-border-color; + border-block-end: 4px solid $board-header-border-color; } .sd-board__header--clickable { @@ -62,15 +62,15 @@ $board-header-border-color: var(--color-kanban-border); } .sd-board__list-item { - @include sd-padding('1-5', 'x'); - @include sd-padding('1', 'y'); - border-bottom: 1px solid var(--sd-colour-line--light); + padding-inline: var(--space--1-5); + padding-block: var(--space--1); + border-block-end: 1px solid var(--sd-colour-line--light); display: flex; flex-direction: row; align-items: center; &:last-child { - border-bottom: none; + border-block-end: none; } } @@ -100,11 +100,11 @@ $board-header-border-color: var(--color-kanban-border); } .sd-board__list-item-badge { - @include sd-margin('0-5', 'right'); + margin-inline-end: var(--space--0-5); } .sd-board__item-count--large { - @include sd-margin('1', 'right'); + margin-inline-end: var(--space--1); color: var(--color-text-light); font-size: 3.6rem; font-weight: 300; @@ -139,8 +139,8 @@ $board-header-border-color: var(--color-kanban-border); justify-content: center; flex-shrink: 0; flex-grow: 0; - margin-left: auto; - margin-right: - $sd-base-increment/2; + margin-inline-start: auto; + margin-inline-end: - $sd-base-increment/2; } .sd-board__doughnut-chart-number { @@ -184,8 +184,8 @@ $board-header-border-color: var(--color-kanban-border); z-index: 1; pointer-events: none; position: absolute; - top: 1.2rem; - left: 0.8rem; + inset-block-start: 1.2rem; + inset-inline-start: 0.8rem; width: 16px; height: 16px; line-height: 16px; @@ -250,7 +250,7 @@ input.sd-inset-search__input { } .sd-board__subheader { - @include sd-padding('0-5', 'bottom'); + padding-block-end: var(--space--0-5); position: relative; min-height: 2rem; display: flex; @@ -278,7 +278,7 @@ input.sd-inset-search__input { } .sd-list-item-group + .sd-board__subheader { - @include sd-margin('2', 'top'); + margin-block-start: var(--space--2); } .sd-kanban-list { diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss index f8cabaef..e714b9b9 100644 --- a/app/styles/_mixins.scss +++ b/app/styles/_mixins.scss @@ -98,10 +98,10 @@ position: absolute; display: flex; align-items: center; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; z-index: 3; padding: 0 $sd-base-increment * 2; color: $sd-colour-text__base; diff --git a/app/styles/_modals.scss b/app/styles/_modals.scss index a7ba8b47..e3fbb5da 100644 --- a/app/styles/_modals.scss +++ b/app/styles/_modals.scss @@ -48,10 +48,10 @@ $modal-sizes: ( $space-around: 40px ) { position: fixed; - left: $space-around; - right: $space-around; - top: $space-around; - bottom: $space-around; + inset-inline-start: $space-around; + inset-inline-end: $space-around; + inset-block-start: $space-around; + inset-block-end: $space-around; align-items: $align-items; flex-direction: column; overflow: hidden; @@ -77,7 +77,7 @@ $modal-sizes: ( @mixin modal-header() { padding: $modal-padding - $sd-base-increment $modal-padding; - border-bottom: 1px solid $modal-line-color; + border-block-end: 1px solid $modal-line-color; min-height: $modal-header-height; background-color: $modal-bg-color; border-radius: $border-radius__base--large $border-radius__base--large 0 0; @@ -94,7 +94,7 @@ $modal-sizes: ( @include clearfix(); // clear it in case folks use .pull-* classes on buttons padding: $modal-padding - $sd-base-increment $modal-padding; text-align: end; // right align buttons - border-top: 1px solid $modal-line-color; + border-block-start: 1px solid $modal-line-color; min-height: $modal-footer-height; display: flex; align-items: center; @@ -210,7 +210,7 @@ $modal-sizes: ( .modal__body-header { height: 48px; width: 100%; - border-bottom: 1px solid $modal-line-color; + border-block-end: 1px solid $modal-line-color; padding: 0; } @@ -236,7 +236,7 @@ $modal-sizes: ( .modal__body-footer { flex: 0 0 auto; padding: $modal-padding - .8rem $modal-padding; - border-top: 1px solid $modal-line-color; + border-block-start: 1px solid $modal-line-color; text-align: end; min-height: $modal-footer-height; display: flex; @@ -259,7 +259,7 @@ $modal-sizes: ( .modal__footer { &> .btn + .btn { - margin-left: $sd-base-increment; + margin-inline-start: $sd-base-increment; } } @@ -301,7 +301,7 @@ $modal-sizes: ( } .modal__header-buttons--right { - justify-content: right; + justify-content: flex-end; .btn, .dropdown { margin: 0 0 0 1rem; @@ -345,12 +345,12 @@ $modal-sizes: ( font-size: 1.8rem; color: $sd-text; font-weight: 400; - margin-bottom: 2rem; + margin-block-end: 2rem; line-height: 100%; .badge { vertical-align: bottom; - margin-right: 0.6rem; + margin-inline-end: 0.6rem; } } @@ -380,7 +380,7 @@ $modal-sizes: ( .modal__header--flex { .icn-btn { - margin-right: - $sd-base-increment; + margin-inline-end: - $sd-base-increment; } } @@ -411,10 +411,10 @@ $modal-sizes: ( // Background .modal__backdrop { position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset-block-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + inset-inline-start: 0; z-index: $zindexModalBackdrop; background-color: var(--sd-colour-bg--03); @@ -429,7 +429,7 @@ $modal-sizes: ( .modal--fullscreen { .modal__header, .modal__body { - @include sd-padding('3', 'left'); + padding-inline-start: var(--space--3); } .modal__heading { diff --git a/app/styles/_normalize.scss b/app/styles/_normalize.scss index 6b5e1548..cd619c0a 100644 --- a/app/styles/_normalize.scss +++ b/app/styles/_normalize.scss @@ -124,7 +124,7 @@ a:hover { */ abbr[title] { - border-bottom: none; /* 1 */ + border-block-end: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } @@ -198,11 +198,11 @@ sup { } sub { - bottom: -0.25em; + inset-block-end: -0.25em; } sup { - top: -0.5em; + inset-block-start: -0.5em; } /* Embedded content diff --git a/app/styles/_popover.scss b/app/styles/_popover.scss index 276a3ca0..4621746d 100644 --- a/app/styles/_popover.scss +++ b/app/styles/_popover.scss @@ -11,7 +11,7 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 4px; + margin-block-end: 4px; min-height: 20px; } @@ -25,5 +25,5 @@ } .sd-popover__close { - margin-right: -4px; + margin-inline-end: -4px; } diff --git a/app/styles/_publisher-styles.scss b/app/styles/_publisher-styles.scss index fa3e843b..5d2654ea 100644 --- a/app/styles/_publisher-styles.scss +++ b/app/styles/_publisher-styles.scss @@ -56,17 +56,17 @@ padding: .3rem 0; i { - margin-right: .5rem; + margin-inline-end: .5rem; } } .dashboard-thumbnail-block__link { color: $sd-colour-interactive; text-decoration: none; - border-bottom: 1px dotted $sd-colour-interactive; + border-block-end: 1px dotted $sd-colour-interactive; &:hover { - border-bottom: 1px solid $sd-colour-interactive; + border-block-end: 1px solid $sd-colour-interactive; text-decoration: none; color: $sd-colour-interactive; } @@ -74,13 +74,13 @@ // Panel border .panel-border-left { - border-right: 0; - border-left: 2px solid rgba(0, 0, 0, 0.4); + border-inline-end: 0; + border-inline-start: 2px solid rgba(0, 0, 0, 0.4); } .panel-border-right { - border-left: 0; - border-right: 2px solid rgba(0, 0, 0, 0.4); + border-inline-start: 0; + border-inline-end: 2px solid rgba(0, 0, 0, 0.4); } // Overlay block @@ -89,7 +89,7 @@ .sd-overlay-block__overlay-message { display: none; - margin-top: 1rem; + margin-block-start: 1rem; color: $grayText; } @@ -106,10 +106,10 @@ .sd-overlay-block__overlay { 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; display: flex; flex-direction: column; align-items: center; @@ -166,7 +166,7 @@ } + .sd-overlay-block__overlay-action { - margin-left: 2rem; + margin-inline-start: 2rem; } } diff --git a/app/styles/_sd-tag-input.scss b/app/styles/_sd-tag-input.scss index 9aa5cac3..b9d344ca 100644 --- a/app/styles/_sd-tag-input.scss +++ b/app/styles/_sd-tag-input.scss @@ -1,21 +1,21 @@ sd-tag-input { display: block; - padding-bottom: 3rem; + padding-block-end: 3rem; &[data-label] { position: relative; - padding-top: 1rem; + padding-block-start: 1rem; } } // Testing .sd-tag-input { display: block; - padding-bottom: 3rem; + padding-block-end: 3rem; &[data-label] { position: relative; - padding-top: 1rem; + padding-block-start: 1rem; } } // Testing @@ -25,7 +25,7 @@ sd-tag-input { display: inline-block; font-size: 1.1rem; margin: 0; - top:0; + inset-block-start:0; line-height: 100%; color: var(--color-text-light); text-transform: uppercase; @@ -40,8 +40,8 @@ tags-input, .tags-input__host { position: relative; - margin-top: 0.5rem; - margin-bottom: 0; + margin-block-start: 0.5rem; + margin-block-end: 0; height: 100%; &:active { @@ -102,15 +102,15 @@ tags-input, color: var(--color-text); cursor: pointer; transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out; - margin-right: -1rem; - margin-left: 0.8rem; + margin-inline-end: -1rem; + margin-inline-start: 0.8rem; [class^="icon-"], [class*=" icon-"] { color: var(--color-text-light); font-size: 1.6rem; flex-grow: 0; flex-shrink: 0; - margin-left: 1px; + margin-inline-start: 1px; opacity: 0.4; transition: color .1s ease-out, opacity .1s ease-out; } @@ -160,7 +160,7 @@ tags-input, outline: none; margin: 0.2rem; padding: 0; - float: left; + float: inline-start; height: 26px; color: currentColor; background-color: transparent; @@ -190,7 +190,7 @@ tags-input, .tags-input__tags--boxed { background-color: rgba(0, 0, 0, 0.05); - padding-left: 0.4rem; + padding-inline-start: 0.4rem; border-radius: $border-radius__base--x-small; &:hover { @@ -200,7 +200,7 @@ tags-input, &.ng-invalid { .tags-input__tags { - border-bottom: 1px solid $red !important; + border-block-end: 1px solid $red !important; box-shadow: 0 1px 0 $red !important; } } @@ -486,7 +486,7 @@ tags-input, align-items: center; justify-content: center; gap: 4px; - border-bottom: 1px solid var(--sd-colour-line--light); + border-block-end: 1px solid var(--sd-colour-line--light); padding: 4px; } @@ -495,7 +495,7 @@ tags-input, align-items: center; justify-content: center; gap: 4px; - border-bottom: 1px solid var(--sd-colour-line--x-light); + border-block-end: 1px solid var(--sd-colour-line--x-light); padding: 4px; } @@ -625,9 +625,9 @@ tags-input, display: inline-block; margin-inline-end: 1rem; vertical-align: middle; - border-left: 0.4rem solid transparent; - border-right: 0.4rem solid transparent; - border-top: 0.4rem solid var(--color-text); + border-inline-start: 0.4rem solid transparent; + border-inline-end: 0.4rem solid transparent; + border-block-start: 0.4rem solid var(--color-text); pointer-events: none; opacity: 0.4; content: ""; diff --git a/app/styles/_simple-list.scss b/app/styles/_simple-list.scss index 770ab467..5961a21b 100644 --- a/app/styles/_simple-list.scss +++ b/app/styles/_simple-list.scss @@ -56,7 +56,7 @@ $simple-list-border-color: $neutral-border-color; font-size: 1.1rem; line-height: 100%; text-transform: uppercase; - padding-right: 1rem; + padding-inline-end: 1rem; margin: 0; color: inherit; opacity: 0.65; @@ -76,17 +76,17 @@ $simple-list-border-color: $neutral-border-color; .simple-list--dotted { .simple-list__item { padding: 0.8rem 0; - border-bottom: 1px dotted $simple-list-border-color; + border-block-end: 1px dotted $simple-list-border-color; &:first-child { - border-top: 1px dotted $simple-list-border-color; + border-block-start: 1px dotted $simple-list-border-color; } } &.simple-list--no-border-b { .simple-list__item { &:last-child { - border-bottom: none; + border-block-end: none; } } } @@ -94,7 +94,7 @@ $simple-list-border-color: $neutral-border-color; &.simple-list--no-border-t { .simple-list__item { &:first-child { - border-top: none; + border-block-start: none; } } } @@ -117,7 +117,7 @@ $simple-list-border-color: $neutral-border-color; } .simple-list--no-padding-b { - padding-bottom: 0; + padding-block-end: 0; } .simple-list--fixedW-x-small { diff --git a/app/styles/_table-list.scss b/app/styles/_table-list.scss index c771619d..1718d581 100644 --- a/app/styles/_table-list.scss +++ b/app/styles/_table-list.scss @@ -48,7 +48,7 @@ $table-list-palette: $sd-basic-palette; &:hover { .table-list__slide-in-actions, .table-list__actions--slide-in { - padding-left: 0.6rem; + padding-inline-start: 0.6rem; width: auto; max-width: 56px; overflow: visible; @@ -67,7 +67,7 @@ $table-list-palette: $sd-basic-palette; } .table-list__item--margin { - margin-bottom: $sd-base-increment; + margin-block-end: $sd-base-increment; } .table-list__item--selected { diff --git a/app/styles/_tables.scss b/app/styles/_tables.scss index 5476e476..af049566 100644 --- a/app/styles/_tables.scss +++ b/app/styles/_tables.scss @@ -7,26 +7,26 @@ $sd-tableBorderColor: var(--sd-colour-line--medium); width: 100%; border-collapse: separate; border-spacing: 0px; - border-top: 1px solid $sd-tableBorderColor; - border-bottom: 1px solid $sd-tableBorderColor; + border-block-start: 1px solid $sd-tableBorderColor; + border-block-end: 1px solid $sd-tableBorderColor; th, td { padding: 1.2rem 0.8rem; text-align: start; vertical-align: top; - border-bottom: 1px solid $sd-tableBorderColor; + border-block-end: 1px solid $sd-tableBorderColor; font-weight: 500; } tr:last-child { td { - border-bottom: none; + border-block-end: none; } } th { font-weight: 600; - border-bottom: 2px solid $sd-tableBorderColor; + border-block-end: 2px solid $sd-tableBorderColor; } // Bottom align for column headings @@ -82,7 +82,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium); flex-direction: column; span + span { - margin-left: .4rem; + margin-inline-start: .4rem; } } @@ -97,7 +97,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium); .sd-display-table__cell { font-weight: 600; - border-bottom: 2px solid var(--sd-colour-line--light); + border-block-end: 2px solid var(--sd-colour-line--light); } } @@ -112,7 +112,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium); .sd-display-table__cell { display: table-cell; padding: 1.2rem 0.8rem; - border-bottom: 1px solid var(--sd-colour-line--light); + border-block-end: 1px solid var(--sd-colour-line--light); font-weight: 500; text-align: start; @@ -138,7 +138,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium); flex-wrap: nowrap; justify-content: center; padding: 1.2rem 0.8rem; - border-bottom: 1px solid var(--sd-colour-line--light); + border-block-end: 1px solid var(--sd-colour-line--light); font-weight: 500; text-align: start; min-width: 120px; @@ -146,5 +146,5 @@ $sd-tableBorderColor: var(--sd-colour-line--medium); .sd-flex-table--head .sd-flex-table__cell { font-weight: 600; - border-bottom: 2px solid var(--sd-colour-line--light); + border-block-end: 2px solid var(--sd-colour-line--light); } diff --git a/app/styles/_tabs-vertical.scss b/app/styles/_tabs-vertical.scss index 22b5f794..1c7b1cb4 100644 --- a/app/styles/_tabs-vertical.scss +++ b/app/styles/_tabs-vertical.scss @@ -2,7 +2,7 @@ .nav-tabs-vertical { width: 3rem; - border-right: 1px solid var(--sd-colour-line--medium); + border-inline-end: 1px solid var(--sd-colour-line--medium); transition: all .2s ease-out .3s; opacity: 1; } @@ -45,8 +45,8 @@ &:after { content: ""; - float: left; - margin-top: 100%; + float: inline-start; + margin-block-start: 100%; } } diff --git a/app/styles/_tabs.scss b/app/styles/_tabs.scss index 7a80ed4b..605e2a65 100644 --- a/app/styles/_tabs.scss +++ b/app/styles/_tabs.scss @@ -35,7 +35,7 @@ $nav-tab-active-link-border-color: $sd-colour-interactive; // active state bord color: $link-color; background: none; border:0; - border-bottom: 3px solid transparent; + border-block-end: 3px solid transparent; text-decoration: none; &:hover { @@ -70,14 +70,14 @@ $nav-tab-active-link-border-color: $sd-colour-interactive; // active state bord color: $sd-text-light; background: none; border:0; - border-bottom: 3px solid transparent; + border-block-end: 3px solid transparent; text-decoration: none; transition: all 0.2s ease-in-out; span { line-height: 1; display: inline-block; - margin-top: 3px; + margin-block-start: 3px; } &:hover { @@ -124,7 +124,7 @@ $nav-tab-active-link-border-color: $sd-colour-interactive; // active state bord .nav-tabs__pane { .subnav { - margin-top: 1px; + margin-block-start: 1px; } } diff --git a/app/styles/_tag-labels.scss b/app/styles/_tag-labels.scss index d5faa02a..43710240 100644 --- a/app/styles/_tag-labels.scss +++ b/app/styles/_tag-labels.scss @@ -89,7 +89,7 @@ $tag-label-lineheight: 100% !default; font-size: 1.6rem; flex-grow: 0; flex-shrink: 0; - margin-left: 1px; + margin-inline-start: 1px; opacity: 0.4; transition: color .1s ease-out, opacity .1s ease-out; } @@ -142,7 +142,7 @@ $tag-label-lineheight: 100% !default; z-index: 2; display: flex; align-items: center; - @include sd-padding('1', 'x'); + padding-inline: var(--space--1); box-shadow: 0 1px 1px 0 hsla(0, 0%, 0%, 0.12); background-color: var(--sd-colour-bg-translucent--10); } @@ -155,8 +155,8 @@ $tag-label-lineheight: 100% !default; } .sd-search-tags__tag { - margin-left: 2px !important; - margin-right: 2px !important; + margin-inline-start: 2px !important; + margin-inline-end: 2px !important; } } diff --git a/app/styles/_thumb-carousel.scss b/app/styles/_thumb-carousel.scss index 3f7dfe67..f14e4d37 100644 --- a/app/styles/_thumb-carousel.scss +++ b/app/styles/_thumb-carousel.scss @@ -39,7 +39,7 @@ // min-height: 100px; // min-width: 300px; // max-width: 600px; - margin-bottom: 16px; + margin-block-end: 16px; } .sd-thumb-carousel__header { @@ -54,7 +54,7 @@ color: var(--sd-thumb-carousel__colour-txt); opacity: 0.75; @include text-overflow; - padding-left: 16px; + padding-inline-start: 16px; } } @@ -62,16 +62,16 @@ flex-grow: 0; font-size: 1.6rem; font-weight: 600; - margin-right: 8px; + margin-inline-end: 8px; } .sd-thumb-carousel__header-block--r { - margin-left:auto; + margin-inline-start:auto; display: flex; align-items: center; & > * + * { - margin-left: 8px; + margin-inline-start: 8px; } } @@ -88,13 +88,13 @@ } .sd-thumb-carousel__description { - @include sd-padding('2'); + padding: var(--space--2); flex-grow: 0; font-size: 1.4rem; line-height: 150%; opacity: 0.75; font-weight: 400; - padding-top: 2px; + padding-block-start: 2px; } .sd-thumb-carousel__items-content { @@ -223,13 +223,13 @@ } .sd-thumb-carousel__btn--prev, .p-carousel-prev { - left: -16px; - margin-right: -26px; + inset-inline-start: -16px; + margin-inline-end: -26px; } .sd-thumb-carousel__btn--next, .p-carousel-next{ - right: -16px; - margin-left: -26px; + inset-inline-end: -16px; + margin-inline-start: -26px; } .sd-thumb-carousel__cover-image-icon { @@ -242,12 +242,12 @@ border-radius: $border-radius__base--full; color: var(--sd-thumb-carousel__colour-indicator--highlight); position: absolute; - top: 12px; - left: 12px; + inset-block-start: 12px; + inset-inline-start: 12px; z-index: 1; i { color: var(--sd-thumb-carousel__colour-indicator--highlight) !important; - margin-top: -2px; + margin-block-start: -2px; } } diff --git a/app/styles/_toggle-box.scss b/app/styles/_toggle-box.scss index 75918dba..1a411e1e 100644 --- a/app/styles/_toggle-box.scss +++ b/app/styles/_toggle-box.scss @@ -25,7 +25,7 @@ } .toggle-box__header { - margin-bottom: 0; + margin-block-end: 0; } } @@ -41,23 +41,23 @@ } &.toggle-box--marg-b10 { - margin-bottom: 1rem; + margin-block-end: 1rem; } &.toggle-box--margin-none { - margin-bottom: 0; + margin-block-end: 0; } &.toggle-box--margin-small { - margin-bottom: $sd-base-increment * 2; + margin-block-end: $sd-base-increment * 2; } &.toggle-box--margin-normal { - margin-bottom: $sd-base-increment * 3; + margin-block-end: $sd-base-increment * 3; } &.toggle-box--margin-large { - margin-bottom: $sd-base-increment * 4; + margin-block-end: $sd-base-increment * 4; } } @@ -75,7 +75,7 @@ a.toggle-box__header { display: flex; cursor: pointer; - margin-bottom: 1.8rem; + margin-block-end: 1.8rem; align-items: center; text-decoration: none !important; @@ -141,7 +141,7 @@ a.toggle-box__header { i { color: $grayLight; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; vertical-align: text-bottom; } diff --git a/app/styles/_toggle-button.scss b/app/styles/_toggle-button.scss index 5604b3a5..885e4e2f 100644 --- a/app/styles/_toggle-button.scss +++ b/app/styles/_toggle-button.scss @@ -1,5 +1,5 @@ .sd-toggle-button { - @include sd-padding('1-5', 'x'); + padding-inline: var(--space--1-5); @include text-overflow; line-height: 1; border: 1px solid $checkButtonBorderColor; diff --git a/app/styles/_tooltips.scss b/app/styles/_tooltips.scss index dafc637c..4fe6761f 100644 --- a/app/styles/_tooltips.scss +++ b/app/styles/_tooltips.scss @@ -52,68 +52,68 @@ /* FLOW: UP */ &:not([flow])::before, &[flow^="up"]::before { - bottom: 100%; + inset-block-end: 100%; border-bottom-width: 0; border-top-color: var(--sd-colour-background__tooltip); } &:not([flow])::after, &[flow^="up"]::after { - bottom: calc(100% + 5px); + inset-block-end: calc(100% + 5px); } &:not([flow])::before, &:not([flow])::after, &[flow^="up"]::before, &[flow^="up"]::after { - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -.5em); } /* FLOW: DOWN */ &[flow^="down"]::before { - top: 100%; + inset-block-start: 100%; border-top-width: 0; border-bottom-color: var(--sd-colour-background__tooltip); } &[flow^="down"]::after { - top: calc(100% + 5px); + inset-block-start: calc(100% + 5px); } &[flow^="down"]::before, &[flow^="down"]::after { - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, .5em); } /* FLOW: LEFT */ &[flow^="left"]::before { - top: 50%; + inset-block-start: 50%; border-right-width: 0; border-left-color: var(--sd-colour-background__tooltip); - left: calc(0em - 5px); + inset-inline-start: calc(0em - 5px); transform: translate(-.5em, -50%); } &[flow^="left"]::after { - top: 50%; - right: calc(100% + 5px); + inset-block-start: 50%; + inset-inline-end: calc(100% + 5px); transform: translate(-.5em, -50%); } /* FLOW: RIGHT */ &[flow^="right"]::before { - top: 50%; + inset-block-start: 50%; border-left-width: 0; border-right-color: var(--sd-colour-background__tooltip); - right: calc(0em - 5px); + inset-inline-end: calc(0em - 5px); transform: translate(.5em, -50%); } &[flow^="right"]::after { - top: 50%; - left: calc(100% + 5px); + inset-block-start: 50%; + inset-inline-start: calc(100% + 5px); transform: translate(.5em, -50%); } @@ -141,68 +141,68 @@ /* FLOW: UP */ &:not([data-flow])::before, &[data-flow^="up"]::before { - bottom: 100%; + inset-block-end: 100%; border-bottom-width: 0; border-top-color: var(--sd-colour-background__tooltip); } &:not([data-flow])::after, &[data-flow^="up"]::after { - bottom: calc(100% + 5px); + inset-block-end: calc(100% + 5px); } &:not([data-flow])::before, &:not([data-flow])::after, &[data-flow^="up"]::before, &[data-flow^="up"]::after { - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -.5em); } /* FLOW: DOWN */ &[data-flow^="down"]::before { - top: 100%; + inset-block-start: 100%; border-top-width: 0; border-bottom-color: var(--sd-colour-background__tooltip); } &[data-flow^="down"]::after { - top: calc(100% + 5px); + inset-block-start: calc(100% + 5px); } &[data-flow^="down"]::before, &[data-flow^="down"]::after { - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, .5em); } /* FLOW: LEFT */ &[data-flow^="left"]::before { - top: 50%; + inset-block-start: 50%; border-right-width: 0; border-left-color: var(--sd-colour-background__tooltip); - left: calc(0em - 5px); + inset-inline-start: calc(0em - 5px); transform: translate(-.5em, -50%); } &[data-flow^="left"]::after { - top: 50%; - right: calc(100% + 5px); + inset-block-start: 50%; + inset-inline-end: calc(100% + 5px); transform: translate(-.5em, -50%); } /* FLOW: RIGHT */ &[data-flow^="right"]::before { - top: 50%; + inset-block-start: 50%; border-left-width: 0; border-right-color: var(--sd-colour-background__tooltip); - right: calc(0em - 5px); + inset-inline-end: calc(0em - 5px); transform: translate(.5em, -50%); } &[data-flow^="right"]::after { - top: 50%; - left: calc(100% + 5px); + inset-block-start: 50%; + inset-inline-start: calc(100% + 5px); transform: translate(.5em, -50%); } @@ -317,36 +317,36 @@ .p-tooltip-top .p-tooltip-arrow { border-width: var(--tooltip-arrow_border); - bottom: 0; - left: calc(50% - 3px); + inset-block-end: 0; + inset-inline-start: calc(50% - 3px); border-bottom-width: 0; border-top-color: var(--sd-colour-background__tooltip); } .p-tooltip-bottom .p-tooltip-arrow { border-width: var(--tooltip-arrow_border); - top: 0; - left: calc(50% - 3px); + inset-block-start: 0; + inset-inline-start: calc(50% - 3px); border-top-width: 0; border-bottom-color: var(--sd-colour-background__tooltip); } .p-tooltip-right .p-tooltip-arrow { border-width: var(--tooltip-arrow_border); - top: calc(50% - 3px); - left: 0; + inset-block-start: calc(50% - 3px); + inset-inline-start: 0; border-left-width: 0; border-right-color: var(--sd-colour-background__tooltip); } .p-tooltip-left .p-tooltip-arrow { border-width: var(--tooltip-arrow_border); - top: calc(50% - 3px); - right: 0; + inset-block-start: calc(50% - 3px); + inset-inline-end: 0; border-right-width: 0; border-left-color: var(--sd-colour-background__tooltip); } .p-tooltip-right { - margin-left: 8px; + margin-inline-start: 8px; } diff --git a/app/styles/components/_card-item.scss b/app/styles/components/_card-item.scss index 29326240..48b664f3 100644 --- a/app/styles/components/_card-item.scss +++ b/app/styles/components/_card-item.scss @@ -60,9 +60,9 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, &::before { content: ""; position: absolute; - top: 0; - left: 0; - right: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; height: $card-item-top-border-height; background-color: rgba(0,0,0,.2); border-radius: $card-item-default-radius $card-item-default-radius 0 0; @@ -119,8 +119,8 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, .sd-card__actions { position: absolute; - top: 0.4rem; - right:0; + inset-block-start: 0.4rem; + inset-inline-end:0; z-index: 2; } } @@ -135,7 +135,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, // sd-card__heading should go inside sd-card__header .sd-card__heading { - @include sd-padding('1-5', 'x'); + padding-inline: var(--space--1-5); padding-block-start: $card-item-top-border-height; flex-grow: 1; font-size: 1.2rem; @@ -172,7 +172,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, } .sd-card__sub-header { - @include sd-padding('1-5', 'x'); + padding-inline: var(--space--1-5); background-color: hsl(201, 15%, 67%); display: flex; align-items: center; @@ -211,7 +211,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, } .sd-card__btn-group--right { - float: right; + float: inline-end; } .sd-card__thumbnail { @@ -230,7 +230,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, } } .sd-card__content { - @include sd-padding('2'); + padding: var(--space--2); flex-grow: 1; h4 { @@ -244,7 +244,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, } .label { - float: right; + float: inline-end; height: 15px; margin: auto 0; padding: 3px 5px 0; @@ -258,7 +258,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, } .value-label { - float: right; + float: inline-end; font-size: 13px; color: var(--color-text); font-weight: 400; @@ -315,7 +315,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, li, .sd-card__content-list-item { padding: var(--gap--medium); - border-bottom: 1px solid var(--sd-colour-line--light); + border-block-end: 1px solid var(--sd-colour-line--light); .sd-card__content-list-inline-span { display: inline-block; @@ -341,7 +341,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, .sd-card__content-list-item--border-bottom { &:last-child { - border-bottom: 1px solid var(--sd-colour-line--light); + border-block-end: 1px solid var(--sd-colour-line--light); } } @@ -370,7 +370,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, } .button__view-all { - border-bottom: 1px dotted var(--sd-colour-interactive); + border-block-end: 1px dotted var(--sd-colour-interactive); color: var(--sd-colour-interactive); cursor: pointer; } @@ -419,7 +419,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, } .sd-card__footer { - @include sd-padding('1-5', 'x'); + padding-inline: var(--space--1-5); display: flex; flex-direction: row; align-items: center; @@ -440,10 +440,10 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, .sd-card__full-click { position: absolute; - top:0; - bottom:0; - right:0; - left:0; + inset-block-start:0; + inset-block-end:0; + inset-inline-end:0; + inset-inline-start:0; z-index: 2; } @@ -498,8 +498,8 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, height: 5.2rem; width: 5.2rem; position: absolute; - top: 50%; - left: 50%; + inset-block-start: 50%; + inset-inline-start: 50%; margin: -2.6rem 0 0 -2.6rem; line-height: 5.2rem; opacity: 0.5; @@ -513,11 +513,11 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, text-align: center; color: $white; position: absolute; - top: 0; - left: 0; - right: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; margin: 0; - bottom: 0; + inset-block-end: 0; display: flex; align-items: center; justify-content: center; diff --git a/app/styles/components/_list-item.scss b/app/styles/components/_list-item.scss index e16fbe96..a387524b 100644 --- a/app/styles/components/_list-item.scss +++ b/app/styles/components/_list-item.scss @@ -40,10 +40,10 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); &::before { content: ''; 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; z-index: 3; background-image: url(../img/three-dots.svg); background-repeat: no-repeat; @@ -64,9 +64,9 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); &:after { content: ""; position: absolute; - top: 0; - bottom: 0; - right: 20%; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-end: 20%; width: 10rem; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMTE2IiB2aWV3Qm94PSIwIDAgMTE2IDExNiI+PHBhdGggZmlsbD0iIzdCN0I3QiIgZD0iTTU4IDBDMjYgMCAwIDI2IDAgNThzMjYgNTggNTggNTggNTgtMjYgNTgtNThTOTAgMCA1OCAwem0zNy4xIDM4LjhMNDYuMyA4Ny42Yy0uNS41LTEuMi41LTEuNyAwTDE4LjkgNjEuOGMtLjUtLjUtLjUtMS4yIDAtMS43bDguMi04LjJjLjUtLjUgMS4yLS41IDEuNyAwTDQ1IDY4LjFjLjMuMy44LjMgMS4xIDBsMzkuMi0zOS4yYy41LS41IDEuMi0uNSAxLjcgMGw4LjIgOC4yYy40LjUuNCAxLjItLjEgMS43eiIvPjwvc3ZnPg==); background-repeat: no-repeat; @@ -151,8 +151,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); .sd-list-item__dot { content: ''; position: absolute; - top: 6px; - left: 6px; + inset-block-start: 6px; + inset-inline-start: 6px; width: 6px; height: 6px; border-radius: $border-radius__base--full; @@ -179,7 +179,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); display: flex; flex-direction: column; justify-content: center; - border-right: 1px solid $sd-ListItem-column-border; + border-inline-end: 1px solid $sd-ListItem-column-border; padding: 0 $sd-base-increment * 1.5; overflow: hidden; flex-shrink: 0; @@ -198,7 +198,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); } .sd-list-item__column--no-right-padding { - padding-right: 0; + padding-inline-end: 0; } .sd-list-item__column--grow { @@ -215,17 +215,17 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); .sd-list-item__item-type { opacity: 1; - margin-top: -0.2rem; + margin-block-start: -0.2rem; transition: opacity 0.1s linear; } .sd-list-item__checkbox-container { position: absolute; padding: 0 0.8rem; - top: 0; - bottom:0; - left:0; - right:0; + inset-block-start: 0; + inset-block-end:0; + inset-inline-start:0; + inset-inline-end:0; display: flex; flex-direction: column; justify-content: center; @@ -450,13 +450,13 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); } .sd-list-item__location { - padding-left: 1.6rem; + padding-inline-start: 1.6rem; position: relative; &::before { position: absolute; - left: 0; - top:0.1rem; + inset-inline-start: 0; + inset-block-start:0.1rem; font-family: 'sd_icons'; content: "\e602"; display: inline-block; @@ -551,7 +551,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); .sd-list-item-nested { display: flex; flex-direction: column; - //margin-top: .8rem; + //margin-block-start: .8rem; } .sd-list-item-nested__childs { @@ -562,8 +562,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); margin-inline-start: 1rem; .sd-list-item { - margin-top: 0; - border-top: 1px solid var(--sd-colour-line--x-light); + margin-block-start: 0; + border-block-start: 1px solid var(--sd-colour-line--x-light); } } @@ -577,7 +577,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); transition: all ease-in 0.2s; max-height: 0; opacity: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; } } @@ -597,13 +597,13 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); .sd-list-item { + .sd-list-item { - border-top: 1px solid var(--sd-colour-line--x-light); + border-block-start: 1px solid var(--sd-colour-line--x-light); } } .sd-list-item-nested { + .sd-list-item { - border-top: 1px solid var(--sd-colour-line--x-light); + border-block-start: 1px solid var(--sd-colour-line--x-light); } } } @@ -615,7 +615,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); border-radius: var(--b-radius--small); + .sd-list-item { - border-top: none; + border-block-start: none; } .sd-list-item__border { @@ -625,14 +625,14 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); .sd-list-item-nested { + .sd-list-item { - border-top: none; + border-block-start: none; } } .sd-list-item-nested__childs { .sd-list-item { - margin-top: 0; - border-top: 1px solid var(--sd-colour-line--x-light); + margin-block-start: 0; + border-block-start: 1px solid var(--sd-colour-line--x-light); } } } @@ -644,7 +644,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); .sd-list-header { display: flex; height: 2.4rem; - margin-bottom: $sd-base-increment; + margin-block-end: $sd-base-increment; align-items: center; .sd-list-header__name { @@ -662,7 +662,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); &:hover { color: var(--sd-colour-interactive--darken-20); - border-bottom: 1px dotted currentColor; + border-block-end: 1px dotted currentColor; } } } @@ -680,6 +680,6 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light); } .sd-list-header--m-top { - margin-top: 2.4rem; + margin-block-start: 2.4rem; } diff --git a/app/styles/components/_sd-circular-progress.scss b/app/styles/components/_sd-circular-progress.scss index e7bd30f2..66daca49 100644 --- a/app/styles/components/_sd-circular-progress.scss +++ b/app/styles/components/_sd-circular-progress.scss @@ -30,8 +30,8 @@ $circular-progress-stroke-xl: 6; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; - top: 50%; - left: 50%; + inset-block-start: 50%; + inset-inline-start: 50%; font-size: 1.8rem; font-family: arial; color: #666; @@ -72,10 +72,10 @@ $circular-progress-stroke-xl: 6; .progress-done { display: flex; 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; color: $green; border-radius: $border-radius__base--full; box-shadow: inset 0 0 0 0 currentColor; diff --git a/app/styles/components/_sd-collapse-box.scss b/app/styles/components/_sd-collapse-box.scss index ede477c5..3201d094 100644 --- a/app/styles/components/_sd-collapse-box.scss +++ b/app/styles/components/_sd-collapse-box.scss @@ -3,7 +3,7 @@ flex-direction: column; border-radius: $border-radius__base--small; position: relative; - margin-bottom: 1rem; + margin-block-end: 1rem; border: 1px solid var(--sd-colour--shadow-line--m); .sd-collapse-box__header { @@ -16,8 +16,8 @@ .sd-collapse-box__tools { position: absolute; - right: 1rem; - top: 0.8rem; + inset-inline-end: 1rem; + inset-block-start: 0.8rem; z-index: 2; color: var(--color-icon-default); @@ -45,8 +45,8 @@ .sd-collapse-box__tools--flex { position: relative; - right: 0; - top: 0; + inset-inline-end: 0; + inset-block-start: 0; display: flex; flex-direction: row; margin: -1.4rem -1rem; @@ -66,11 +66,11 @@ } .sd-collapse-box__content--border-locked { - border-left: 4px solid $red; + border-inline-start: 4px solid $red; } .sd-collapse-box__content--border-success { - border-left: 4px solid $green; + border-inline-start: 4px solid $green; } .sd-collapse-box__content-block { // place inside .sd-collapse-box__content @@ -79,7 +79,7 @@ } .sd-collapse-box__content-block--top { - margin-top: 2.2rem; + margin-block-start: 2.2rem; } } @@ -100,20 +100,20 @@ } .sd-collapse-box--margin-small { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; } .sd-collapse-box__content, .sd-collapse-box__content-block { .form__row:last-of-type { - padding-bottom: 0; + padding-block-end: 0; } } .sd-collapse-box__sliding-toolbar-wrapper { position: absolute; - top: 0; - left: 0; - right: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; height: 4.6rem; overflow: hidden; border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0; @@ -123,10 +123,10 @@ position: absolute; display: flex; align-items: center; - top: 0; + inset-block-start: 0; height: 4.2rem; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; z-index: 3; padding: 0 16px; color: var(--color-text); diff --git a/app/styles/components/_sd-comment-box.scss b/app/styles/components/_sd-comment-box.scss index a65591f0..b8819134 100644 --- a/app/styles/components/_sd-comment-box.scss +++ b/app/styles/components/_sd-comment-box.scss @@ -1,5 +1,5 @@ .comment-box__reply-item { - border-bottom: 1px solid var(--sd-colour-line--light); + border-block-end: 1px solid var(--sd-colour-line--light); } .comment-box__input { @@ -12,7 +12,7 @@ .comment-box__reply-toolbar { display: none; - padding-top: 1rem; + padding-block-start: 1rem; } .comment-box__reply-toolbar--active { @@ -23,7 +23,7 @@ } .comment-box__button-toolbar { - margin-top: 1.2rem; + margin-block-start: 1.2rem; display: flex; flex-direction: row; align-items: center; @@ -36,5 +36,5 @@ } .comment-box__button-toolbar--small { - margin-top: 0.6rem; + margin-block-start: 0.6rem; } diff --git a/app/styles/components/_sd-dropzone.scss b/app/styles/components/_sd-dropzone.scss index 4be6ad21..f2259c16 100644 --- a/app/styles/components/_sd-dropzone.scss +++ b/app/styles/components/_sd-dropzone.scss @@ -71,7 +71,7 @@ $iconSize-small: 2.4rem; [class^="big-icon--"], [class*=" big-icon--"] { - margin-top: -4px; + margin-block-start: -4px; width: $iconSize-large; height: $iconSize-large; font-size: $iconSize-large; diff --git a/app/styles/components/_sd-editor-popup.scss b/app/styles/components/_sd-editor-popup.scss index d1378a63..0510a5f4 100644 --- a/app/styles/components/_sd-editor-popup.scss +++ b/app/styles/components/_sd-editor-popup.scss @@ -11,11 +11,11 @@ $editor-popup-padding: 1.6rem; } .editor-popup--annotation { - border-top: 3px solid $annotation-color; + border-block-start: 3px solid $annotation-color; } .editor-popup--comment { - border-top: 3px solid $comment-color; + border-block-start: 3px solid $comment-color; } .editor-popup__main { @@ -39,7 +39,7 @@ $editor-popup-padding: 1.6rem; align-items: center; position: relative; padding: $editor-popup-padding; - padding-bottom: 1rem; + padding-block-end: 1rem; } .editor-popup__author-name { @@ -81,7 +81,7 @@ $editor-popup-padding: 1.6rem; position: relative; p + p { - margin-top: 1rem; + margin-block-start: 1rem; } } @@ -90,14 +90,14 @@ $editor-popup-padding: 1.6rem; } .editor-popup__info-bar { - margin-bottom: 0.4rem; + margin-block-end: 0.4rem; } .editor-popup__header + .editor-popup__content-block { - padding-top: 0; + padding-block-start: 0; } .editor-popup__secondary-content { background-color: hsla(214, 13%, 48%, 0.05); - border-top: 1px solid var(--sd-colour-line--light); + border-block-start: 1px solid var(--sd-colour-line--light); } diff --git a/app/styles/components/_sd-grid-item.scss b/app/styles/components/_sd-grid-item.scss index a7455f67..22c829be 100644 --- a/app/styles/components/_sd-grid-item.scss +++ b/app/styles/components/_sd-grid-item.scss @@ -25,10 +25,10 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) &::before { content: ''; 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; z-index: 3; background-image: url(../img/three-dots.svg); background-repeat: no-repeat; @@ -47,8 +47,8 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) .sd-grid-item__actions--top { position: absolute; - top: 0.8rem; - right: 0.5rem; + inset-block-start: 0.8rem; + inset-inline-end: 0.5rem; z-index: 2; } @@ -345,9 +345,9 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) .sd-grid-item__progress { z-index: 2; position: absolute; - bottom: 0; - left: 0; - right: 0; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; height: 0.4rem; background-color: rgba(0, 0, 0, 0.4); } @@ -357,8 +357,8 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) position: absolute; height: 5.6rem; width: 5.6rem; - top: 50%; - margin-top: -2.8rem; + inset-block-start: 50%; + margin-block-start: -2.8rem; border-radius: $border-radius__base--full; background-color: rgba(0, 0, 0, 0.3); padding: 0.2rem; @@ -369,7 +369,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) height: 0.4rem; width: 0%; background-color: $green; - top: 50 + inset-block-start: 50 } .sd-grid-item--element-grow { @@ -425,7 +425,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) .sd-grid-item__footer { padding: 0.4rem 0.2rem; - border-top: 1px solid var(--sd-colour-line--x-light); + border-block-start: 1px solid var(--sd-colour-line--x-light); display: flex; flex-direction: row; align-items: center; @@ -503,10 +503,10 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) .sd-grid-item__full-click { position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-end: 0; + inset-inline-start: 0; z-index: 2; } @@ -580,7 +580,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) font-family: 'sd_icons'; content: "\e605"; position: absolute; - top: 50%; + inset-block-start: 50%; margin: auto; margin-block-start: -2.4rem; font-size: 4.8rem; @@ -684,7 +684,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMTE2IiB2aWV3Qm94PSIwIDAgMTE2IDExNiI+PHBhdGggZmlsbD0iIzdCN0I3QiIgZD0iTTU4IDBDMjYgMCAwIDI2IDAgNThzMjYgNTggNTggNTggNTgtMjYgNTgtNThTOTAgMCA1OCAwem0zNy4xIDM4LjhMNDYuMyA4Ny42Yy0uNS41LTEuMi41LTEuNyAwTDE4LjkgNjEuOGMtLjUtLjUtLjUtMS4yIDAtMS43bDguMi04LjJjLjUtLjUgMS4yLS41IDEuNyAwTDQ1IDY4LjFjLjMuMy44LjMgMS4xIDBsMzkuMi0zOS4yYy41LS41IDEuMi0uNSAxLjcgMGw4LjIgOC4yYy40LjUuNCAxLjItLjEgMS43eiIvPjwvc3ZnPg==) no-repeat; background-size: 9.6rem; background-position: 0 0; - bottom: 0; + inset-block-end: 0; inset-inline-end: 0rem; opacity: 0.14; } @@ -805,8 +805,8 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) .sd-grid-item-header { padding: 4px 0; - margin-bottom: 6px; - border-bottom: 5px solid var(--sd-colour-neutral); + margin-block-end: 6px; + border-block-end: 5px solid var(--sd-colour-neutral); display: flex; } @@ -826,7 +826,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50) color: inherit; span { - border-bottom: 1px dotted var(--sd-colour-interactive); + border-block-end: 1px dotted var(--sd-colour-interactive); } [class^="icon-"], diff --git a/app/styles/components/_sd-loader.scss b/app/styles/components/_sd-loader.scss index 0b4fb396..34c61744 100644 --- a/app/styles/components/_sd-loader.scss +++ b/app/styles/components/_sd-loader.scss @@ -4,10 +4,10 @@ content: ''; display: block; 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; z-index: 99999; background-image: url(../img/three-dots.svg); background-repeat: no-repeat; diff --git a/app/styles/components/_sd-media-carousel.scss b/app/styles/components/_sd-media-carousel.scss index 074a2169..b41df518 100644 --- a/app/styles/components/_sd-media-carousel.scss +++ b/app/styles/components/_sd-media-carousel.scss @@ -81,7 +81,7 @@ height: 3.6rem; line-height: 3.6rem; position: absolute; - top: calc(50% - 6.5rem); + inset-block-start: calc(50% - 6.5rem); width: 3.6rem; box-shadow: 0 0 6px rgba(0,0,0,.25), 0 0 1px 1px rgba(0,0,0,.12); color: $sd-text; @@ -103,7 +103,7 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; - top:0; + inset-block-start:0; text-align: center; z-index: 2; color: inherit; @@ -119,7 +119,7 @@ } .sd-media-carousel__nav-button--next { - right: -18px; + inset-inline-end: -18px; color: inherit; &::after { @@ -128,7 +128,7 @@ } .sd-media-carousel__nav-button--prev { - left: -18px; + inset-inline-start: -18px; color: inherit; &::after { @@ -137,7 +137,7 @@ } .sd-media-carousel__nav-button--next-inner { - right: 0; + inset-inline-end: 0; color: $sd-text; border-radius: $border-radius__base--full 0 0 $border-radius__base--full; box-shadow: none; @@ -148,7 +148,7 @@ } .sd-media-carousel__nav-button--prev-inner { - left: 0; + inset-inline-start: 0; color: $sd-text; border-radius: 0 $border-radius__base--full $border-radius__base--full 0; box-shadow: none; @@ -202,7 +202,7 @@ } .sd-media-carousel__page-indication-bar { - bottom: -3.6rem; + inset-block-end: -3.6rem; height: 2.6rem; position: absolute; text-align: center; diff --git a/app/styles/components/_sd-notification-panel.scss b/app/styles/components/_sd-notification-panel.scss index caa37f3d..68b5681b 100644 --- a/app/styles/components/_sd-notification-panel.scss +++ b/app/styles/components/_sd-notification-panel.scss @@ -25,7 +25,7 @@ grid-row: 1 / 2; grid-column: 1 / 2; height: $nav-height; - border-bottom: 1px solid var(--sd-colour-line--light); + border-block-end: 1px solid var(--sd-colour-line--light); padding-inline: $sd-base-increment * 2 $sd-base-increment; display: flex; flex-direction: row; diff --git a/app/styles/components/_sd-photo-preview.scss b/app/styles/components/_sd-photo-preview.scss index 12b377a2..2cb42b5d 100644 --- a/app/styles/components/_sd-photo-preview.scss +++ b/app/styles/components/_sd-photo-preview.scss @@ -24,15 +24,15 @@ $photo-nav-transition: all 0.2s ease-out; } .sd-photo-preview__thumb-strip--with-controls { - padding-top: 4.8rem; + padding-block-start: 4.8rem; } } .sd-photo-preview__thumb-controls { position: absolute; - top: 0; - left: 0; - right: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; min-height: 4.8rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); z-index: 2; @@ -55,10 +55,10 @@ $photo-nav-transition: all 0.2s ease-out; &::before { content: ''; 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; z-index: 999; background-image: url(../img/three-dots.svg); background-repeat: no-repeat; @@ -105,7 +105,7 @@ $photo-nav-transition: all 0.2s ease-out; width: auto; height: auto; max-height: 100vh; - margin-top: 2rem; + margin-block-start: 2rem; } } @@ -191,9 +191,9 @@ $photo-nav-transition: all 0.2s ease-out; .sd-photo-preview__thumbnail-edit-label { position: absolute; - top: -2.2rem; - left: 0; - right: 0; + inset-block-start: -2.2rem; + inset-inline-start: 0; + inset-inline-end: 0; height: 2rem; text-align: center; opacity: 0.5; @@ -202,10 +202,10 @@ $photo-nav-transition: all 0.2s ease-out; .image-overlay { 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; display: flex; flex-direction: column; justify-content: space-between; @@ -273,7 +273,7 @@ $photo-nav-transition: all 0.2s ease-out; } .image-overlay__button + .image-overlay__button { - margin-left: 0.8rem; + margin-inline-start: 0.8rem; } .sd-photo-preview__video-frames { @@ -332,7 +332,7 @@ $photo-nav-transition: all 0.2s ease-out; height: 5.6rem; line-height: 5.6rem; position: absolute; - top: calc(50% - 2.8rem); + inset-block-start: calc(50% - 2.8rem); width: 5.6rem; box-shadow: 0 4px 24px rgba(0,0,0,.20), 0 10px 28px rgba(0,0,0,.35); color: $white; @@ -356,8 +356,8 @@ $photo-nav-transition: all 0.2s ease-out; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; - top:0; - left:0; + inset-block-start:0; + inset-inline-start:0; text-align: center; z-index: 2; color: $white; @@ -368,8 +368,8 @@ $photo-nav-transition: all 0.2s ease-out; .sd-photo-preview__slide-in-button { position: absolute !important; - top: 2.4rem; - right: 0; + inset-block-start: 2.4rem; + inset-inline-end: 0; z-index: 2; background-color: hsla(0, 0%, 100%, 0.1); height:4.8rem; @@ -406,7 +406,7 @@ $photo-nav-transition: all 0.2s ease-out; } .sd-photo-preview__nav-button--next { - right: 0.8rem; + inset-inline-end: 0.8rem; color: inherit; &::after { @@ -414,7 +414,7 @@ $photo-nav-transition: all 0.2s ease-out; } } .sd-photo-preview__nav-button--prev { - left: 0.8rem; + inset-inline-start: 0.8rem; color: inherit; &::after { @@ -424,10 +424,10 @@ $photo-nav-transition: all 0.2s ease-out; .upload__target { 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; z-index: 0; border: 2px dashed $sd-colour-interactive; background-color: var(--sd-colour-interactive--alpha-10); @@ -437,8 +437,8 @@ $photo-nav-transition: all 0.2s ease-out; margin: 0 auto; max-width: 40rem; position: relative; - top: 50%; - margin-top: -10.6rem; + inset-block-start: 50%; + margin-block-start: -10.6rem; z-index: 1; } @@ -455,7 +455,7 @@ $photo-nav-transition: all 0.2s ease-out; margin: 0 auto; opacity: 0.5; text-align: center; - padding-top: 3rem; + padding-block-start: 3rem; text-align: center; color: var(--color-text-light); font-size: 2.4rem; @@ -473,17 +473,17 @@ $photo-nav-transition: all 0.2s ease-out; &::after, &::before { content: "___________"; position: absolute; - top: -0.5rem; + inset-block-start: -0.5rem; color: inherit; opacity: 0.25; } &::after { - margin-left: 1.5rem; + margin-inline-start: 1.5rem; } &::before { - margin-left: -7.8rem; + margin-inline-start: -7.8rem; } } .upload__info-button { diff --git a/app/styles/components/_sd-searchbar.scss b/app/styles/components/_sd-searchbar.scss index 352d9acf..8f9a1083 100644 --- a/app/styles/components/_sd-searchbar.scss +++ b/app/styles/components/_sd-searchbar.scss @@ -19,20 +19,20 @@ } .sd-searchbar--border-r { - border-right: 1px solid var(--sd-colour-line--x-light); + border-inline-end: 1px solid var(--sd-colour-line--x-light); } .sd-searchbar--border-l { - border-left: 1px solid var(--sd-colour-line--x-light); + border-inline-start: 1px solid var(--sd-colour-line--x-light); } .sd-searchbar--border-l-r { - border-right: 1px solid var(--sd-colour-line--x-light); - border-left: 1px solid var(--sd-colour-line--x-light); + border-inline-end: 1px solid var(--sd-colour-line--x-light); + border-inline-start: 1px solid var(--sd-colour-line--x-light); } .sd-searchbar--border-bottom { - border-bottom: 1px solid var(--sd-colour-line--light); + border-block-end: 1px solid var(--sd-colour-line--light); } .sd-searchbar--small { @@ -89,7 +89,7 @@ background-color: transparent; border: 0; box-shadow: none !important; - padding-right: 1rem; + padding-inline-end: 1rem; height: auto; &::placeholder { @@ -132,7 +132,7 @@ .sd-searchbar--boxed { .sd-searchbar__icon { width: 4rem; - margin-right: 0; + margin-inline-end: 0; } } @@ -225,7 +225,7 @@ margin: 0.5rem 0; letter-spacing: 0.03em; display: block; - margin-top: 8px; + margin-block-start: 8px; .sd-searchbar__message { color: $red; diff --git a/app/styles/components/_sd-toaster.scss b/app/styles/components/_sd-toaster.scss index 1c5c6038..24e1b459 100644 --- a/app/styles/components/_sd-toaster.scss +++ b/app/styles/components/_sd-toaster.scss @@ -26,53 +26,53 @@ $toast-sizes: ( flex-direction: column; align-items: center; position: fixed; - right: 0; - left: 0; + inset-inline-end: 0; + inset-inline-start: 0; z-index: $sd-toast-z-index; overflow: hidden; padding: 0 20px 20px; pointer-events: none; &.sd-toast__container--top { - top: $sd-toast-position-top; - bottom: auto; + inset-block-start: $sd-toast-position-top; + inset-block-end: auto; } &.sd-toast__container--top-left { - top: $sd-toast-position-top; - bottom: auto; + inset-block-start: $sd-toast-position-top; + inset-block-end: auto; align-items: flex-start; } &.sd-toast__container--top-right { - top: $sd-toast-position-top; - bottom: auto; + inset-block-start: $sd-toast-position-top; + inset-block-end: auto; align-items: flex-end; } &.sd-toast__container--bottom { flex-direction: column-reverse; - top: auto; - bottom: 0; + inset-block-start: auto; + inset-block-end: 0; } &.sd-toast__container--bottom-left { flex-direction: column-reverse; - top: auto; - bottom: 0; + inset-block-start: auto; + inset-block-end: 0; align-items: flex-start; } &.sd-toast__container--bottom-right { flex-direction: column-reverse; - top: auto; - bottom: 0; + inset-block-start: auto; + inset-block-end: 0; align-items: flex-end; } } .sd-toast { - @include sd-padding('1-5'); + padding: var(--space--1-5); display: flex; align-items: flex-start; position: relative!important; @@ -117,8 +117,8 @@ $toast-sizes: ( width: 4px; height: 100%; position: absolute; - top: 0px; - left: 0px; + inset-block-start: 0px; + inset-inline-start: 0px; background-color: $color; } @@ -173,20 +173,20 @@ $toast-sizes: ( color: $sd-toast-colour-text; p + p { - margin-top: 0.8rem; + margin-block-start: 0.8rem; } } .sd-toast__message-header { display: flex; flex-direction: row; - margin-bottom: 0.2rem; + margin-block-end: 0.2rem; color: $sd-text; time { font-size: 1.2rem; color: $sd-toast-colour-text; - margin-right: 0.2rem; + margin-inline-end: 0.2rem; } .sd-toast__heading { diff --git a/app/styles/components/_subnav.scss b/app/styles/components/_subnav.scss index f327a08c..fb5a5c87 100644 --- a/app/styles/components/_subnav.scss +++ b/app/styles/components/_subnav.scss @@ -6,7 +6,7 @@ display: flex; height: $subnav-height; background: $subnav-background; - border-bottom: 0px; + border-block-end: 0px; box-shadow: var(--sd-shadow__subnav); z-index: 3; align-items: center; @@ -45,9 +45,9 @@ .subnav--absolute { position: absolute; - top:48px; - left:0; - right:0; + inset-block-start:48px; + inset-inline-start:0; + inset-inline-end:0; } .subnav + .subnav, @@ -101,8 +101,8 @@ .subnav { &.subnav--level2 { position: absolute; - top:0; - left: 0; + inset-block-start:0; + inset-inline-start: 0; z-index: 2; box-shadow: none; } @@ -240,8 +240,8 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- .badge { position: absolute; - top: $sd-base-increment / 2; - right: $sd-base-increment / 2; + inset-block-start: $sd-base-increment / 2; + inset-inline-end: $sd-base-increment / 2; z-index: 1; } } @@ -251,20 +251,20 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- } .sd-navbtn--textual { - @include sd-padding('1', 'x'); + padding-inline: var(--space--1); width: auto; .sd-navbtn__text { - @include sd-margin('0-5', 'x'); + margin-inline: var(--space--0-5); display: inline-flex; font-size: 1.4rem; position: relative; - margin-right: $sd-base-increment / 2; - margin-left: $sd-base-increment; + margin-inline-end: $sd-base-increment / 2; + margin-inline-start: $sd-base-increment; } i { - margin-left: $sd-base-increment / 2; + margin-inline-start: $sd-base-increment / 2; } } @@ -273,7 +273,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- &.sd-navbtn--textual { .sd-navbtn__text { color: currentColor; - padding-right: 16px; + padding-inline-end: 16px; &::after { content: ''; @@ -281,14 +281,14 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- width: 0; height: 0; position: absolute; - top: calc(50% - 2px); - right: 0; + inset-block-start: calc(50% - 2px); + inset-inline-end: 0; vertical-align: middle; - //margin-top: -2px; - margin-left: 8px; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid currentColor; + //margin-block-start: -2px; + margin-inline-start: 8px; + border-inline-start: 4px solid transparent; + border-inline-end: 4px solid transparent; + border-block-start: 4px solid currentColor; opacity: .75; @include transition(all, 0.1s, ease-in); } @@ -364,7 +364,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- } .big-icon--send-to { - margin-left: 0.3rem; + margin-inline-start: 0.3rem; } [class^="icon-"], @@ -456,7 +456,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- } .subnav__stretch-bar { - @include sd-margin('1-5', 'x'); + margin-inline: var(--space--1-5); display: flex; flex-grow: 1; flex-shrink: 1; @@ -469,7 +469,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- } .subnav__content-bar { - @include sd-margin('1-5', 'x'); + margin-inline: var(--space--1-5); display: flex; flex-direction: row; flex-grow: 0; @@ -486,26 +486,26 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- width: 1px; height: $subnav-height; flex-grow: 0; - border-left: 1px solid rgba(0,0,0,.1); + border-inline-start: 1px solid rgba(0,0,0,.1); margin: auto 2rem; } .subnav__spacer--dotted { - border-left: 1px dotted rgba(0,0,0,.3); + border-inline-start: 1px dotted rgba(0,0,0,.3); height: $subnav-height / 2; } .subnav__spacer--no-r-margin { - margin-right: -0.1rem; + margin-inline-end: -0.1rem; } .subnav__spacer--no-l-margin { - margin-left: 0; + margin-inline-start: 0; } .subnav__spacer--no-margin { - margin-left: 0; - margin-right: 0; + margin-inline-start: 0; + margin-inline-end: 0; } .subnav__button-stack { @@ -550,7 +550,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- .subnav__button-stack--right { text-align: end; - padding-right: 2rem; + padding-inline-end: 2rem; } .subnav__button-stack--padded { @@ -628,16 +628,16 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- } .subnav__stretch-bar { - margin-right: 0; + margin-inline-end: 0; } .subnav__spacer { - margin-left: 1.2rem; + margin-inline-start: 1.2rem; } #planning-dropdown { display: none; - margin-left: -1.2rem; + margin-inline-start: -1.2rem; } .dropdown__toggle { @@ -645,11 +645,11 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- position: relative; overflow: hidden; text-overflow: ellipsis; - padding-right: 2.6rem !important; + padding-inline-end: 2.6rem !important; .dropdown__caret { position: absolute; - top: 50%; + inset-block-start: 50%; inset-inline-end: 1rem; } } @@ -667,12 +667,12 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha- .sd-page-content--slide-in--open { .subnav--responsive { .sd-check__wrapper + .sd-check__wrapper { - margin-left: 0.4rem; + margin-inline-start: 0.4rem; } .subnav__stretch-bar { margin: 0 1.2rem; - margin-right: 0; + margin-inline-end: 0; } .subnav__button-stack--padded { diff --git a/app/styles/components/sd-slider.scss b/app/styles/components/sd-slider.scss index aa8157be..0efc0db7 100644 --- a/app/styles/components/sd-slider.scss +++ b/app/styles/components/sd-slider.scss @@ -4,8 +4,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo width: 100%; position: relative; height: 0.2rem; - margin-top: 1.25rem; - margin-bottom: 1.25rem; + margin-block-start: 1.25rem; + margin-block-end: 1.25rem; background-color: rgba(123, 123, 123, 0.5); cursor: pointer; user-select: none; @@ -51,8 +51,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo .sd-slider { position: relative; height: 0.2rem; - margin-top: 1.25rem; - margin-bottom: 2.25rem; + margin-block-start: 1.25rem; + margin-block-end: 2.25rem; background-color: rgba(123, 123, 123, 0.5); cursor: pointer; user-select: none; @@ -62,8 +62,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo .sd-slider__handle { position: absolute; - top: -0.7rem; - left: 0; + inset-block-start: -0.7rem; + inset-inline-start: 0; z-index: 1; display: inline-block; width: 1.6rem; @@ -90,10 +90,10 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo .sd-slider__focus-ring { position: absolute; - top: -1.4rem; - left: 0; + inset-block-start: -1.4rem; + inset-inline-start: 0; z-index: 0; - margin-left: -0.7rem; + margin-inline-start: -0.7rem; display: inline-block; width: 3rem; height: 3rem; @@ -112,8 +112,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo .sd-slider__fill { position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; display: inline-block; max-width: 100%; height: 0.2rem; diff --git a/app/styles/design-tokens/_design-tokens-general.scss b/app/styles/design-tokens/_design-tokens-general.scss index 858daf98..25fc96aa 100644 --- a/app/styles/design-tokens/_design-tokens-general.scss +++ b/app/styles/design-tokens/_design-tokens-general.scss @@ -2,8 +2,20 @@ :root { // GENERAL + --base-increment: 0.8rem; // 8px + --space--0: 0; // 0px + --space--0-5: calc(0.5 * var(--base-increment)); // 4px + --space--1: calc(1 * var(--base-increment)); // 8px + --space--1-5: calc(1.5 * var(--base-increment)); // 12px + --space--2: calc(2 * var(--base-increment)); // 16px + --space--3: calc(3 * var(--base-increment)); // 24px; + --space--4: calc(4 * var(--base-increment)); // 32px; + --space--5: calc(5 * var(--base-increment)); // 40px; + + --gap--none: 0; // 0px --gap--x-small: 0.4rem; // 4px --gap--small: 0.8rem; // 8px + --gap--medium-small: 1.2rem; // 12px --gap--medium: 1.6rem; // 16px --gap--large: 2.4rem; // 24px; --gap--x-large: 3.2rem; // 32px; diff --git a/app/styles/dropdowns/_basic-dropdown.scss b/app/styles/dropdowns/_basic-dropdown.scss index 9bdf824c..7ca1a859 100644 --- a/app/styles/dropdowns/_basic-dropdown.scss +++ b/app/styles/dropdowns/_basic-dropdown.scss @@ -76,9 +76,9 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; vertical-align: middle; margin-block-start: -2px; margin-inline-start: 6px; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid $sd-text; + border-inline-start: 4px solid transparent; + border-inline-end: 4px solid transparent; + border-block-start: 4px solid $sd-text; opacity: .3; content: ""; transition: all 0.1s ease-in; @@ -102,7 +102,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; .dropdown__menu { position: absolute; - top: 100%; + inset-block-start: 100%; inset-inline-start: 0; z-index: $zindexDropdown; display: none; // none by default, but block on "open" of the menu @@ -203,8 +203,8 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; height: $sd-base-increment * 4; border: 1px solid var(--sd-colour-line--light); border-radius: var(--b-radius--small); - padding-right: 5px; - padding-left: 5px; + padding-inline-end: 5px; + padding-inline-start: 5px; transition: all 0.2s ease; color: var(--color-text); background-color: var(--sd-colour-bg__searchbar); @@ -305,7 +305,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; position: relative; color: #747474; padding: .6rem 1.6rem; - margin-bottom: .2rem; + margin-block-end: .2rem; font-size: 1.3rem; text-align: start; } @@ -315,7 +315,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; margin: 0; + .dropdown__menu-info { - margin-left: 4px; + margin-inline-start: 4px; } } } @@ -341,7 +341,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; cursor: pointer; i { - margin-right: 0 !important; + margin-inline-end: 0 !important; } &:hover, &:focus { @@ -351,14 +351,14 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; } } .dropdown__menu-header { - border-bottom: 1px solid var(--color-border-line--light); + border-block-end: 1px solid var(--color-border-line--light); margin-block-end: 0.6rem; } .dropdown__menu-footer { padding: 1rem; margin-block-start: 0.6rem; - border-top: 1px solid var(--color-border-line--light); + border-block-start: 1px solid var(--color-border-line--light); } .dropdown__menu-footer--align-right { @@ -454,16 +454,16 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; // Reverse the caret .dropdown__caret { @include transition(all, 0.2s, eas-in); - border-top: 0; - border-bottom: 4px solid $black; + border-block-start: 0; + border-block-end: 4px solid $black; content: "\2191"; } // Different positioning for bottom up menu .dropdown__menu { - top: auto; - bottom: 100%; - margin-bottom: 4px; + inset-block-start: auto; + inset-block-end: 100%; + margin-block-end: 4px; } &.open { @@ -478,7 +478,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; vertical-align: middle; .dropdown__menu { - top: -2.3rem; + inset-block-start: -2.3rem; inset-inline-start: auto; inset-inline-end: calc(100% + 0.3rem); } @@ -489,7 +489,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; vertical-align: middle; .dropdown__menu { - top: -2.3rem; + inset-block-start: -2.3rem; inset-inline-start: 100%; } } @@ -511,8 +511,8 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; .dropdown--dropright, .dropdown--dropleft { &.dropdown--dropup { .dropdown__menu { - bottom: -2.3rem; - top: auto; + inset-block-end: -2.3rem; + inset-block-start: auto; } } } @@ -594,7 +594,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; border-radius: $dropdownMenuBorderRadius; border:0; z-index: 1; - margin-top: -1px; + margin-block-start: -1px; &:before { display: none; @@ -608,7 +608,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; padding: 0; i { - margin-right: 0; + margin-inline-end: 0; } span { @@ -624,7 +624,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; color: inherit; font-weight: 300; opacity: 0.65; - padding-right: 0.5rem; + padding-inline-end: 0.5rem; letter-spacing: 0.02rem; } @@ -662,7 +662,7 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; .dropdown__toggle--line { border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0; background-color: var(--color-input-bg); - border-bottom: 1px solid var(--color-input-border); + border-block-end: 1px solid var(--color-input-border); &:hover { border-color: var(--color-input-border-hover); @@ -697,8 +697,8 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; .dropdown__toggle { .dropdown__caret { - float: right; - margin-top: 6px; + float: inline-end; + margin-block-start: 6px; } } } @@ -711,12 +711,12 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; overflow-x: hidden; li { - margin-bottom: 4px; + margin-block-end: 4px; } li button { width: 300px !important; - padding-right: 30px; + padding-inline-end: 30px; overflow: hidden; text-overflow: ellipsis; position: relative; @@ -724,8 +724,8 @@ $focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow; i { position: absolute; - right: -5px; - top: 9px; + inset-inline-end: -5px; + inset-block-start: 9px; } &.disabled, &.disabled:hover { diff --git a/app/styles/dropdowns/_input-dropdown.scss b/app/styles/dropdowns/_input-dropdown.scss index 36e7176e..d2355a19 100644 --- a/app/styles/dropdowns/_input-dropdown.scss +++ b/app/styles/dropdowns/_input-dropdown.scss @@ -2,21 +2,21 @@ .dropdown.dropdown--input-addon { position: absolute; - right: 12px; - margin-top: -1px; + inset-inline-end: 12px; + margin-block-start: -1px; > .dropdown__toggle { height: 22px; line-height: 0; padding: 2px 6px; box-shadow: none; - margin-bottom: 2px; + margin-block-end: 2px; background-color: transparent; box-shadow: none; .dropdown__caret { padding: 0px; - margin-left: 0; + margin-inline-start: 0; } } diff --git a/app/styles/dropdowns/_navigation_dropdown.scss b/app/styles/dropdowns/_navigation_dropdown.scss index 23fd72b6..d14b1029 100644 --- a/app/styles/dropdowns/_navigation_dropdown.scss +++ b/app/styles/dropdowns/_navigation_dropdown.scss @@ -32,22 +32,22 @@ .circle { width: 32px; height: 32px; - margin-top: 8px; - margin-left: 0; + margin-block-start: 8px; + margin-inline-start: 0; } } } } .caret { - margin-left: 15px; + margin-inline-start: 15px; } .dropdown__menu { border-radius: 0px; border:0; z-index: 2; - margin-top: -1px; + margin-block-start: -1px; min-width: 200px; box-shadow: $shadow__dropdown--default; padding: 10px 0; @@ -82,11 +82,11 @@ margin: 0; height: 41px; padding: 10px 10px; - border-top: 1px solid #e0e0e0; + border-block-start: 1px solid #e0e0e0; border-radius: 0px; i { - margin-right: 10px; + margin-inline-end: 10px; } &:hover { @@ -111,8 +111,8 @@ width: auto; min-width: 50px; clear: none; - margin-right: 10px; - float: right; + margin-inline-end: 10px; + float: inline-end; } } } diff --git a/app/styles/dropdowns/_other_dropdown.scss b/app/styles/dropdowns/_other_dropdown.scss index 3259143f..ae10272d 100644 --- a/app/styles/dropdowns/_other_dropdown.scss +++ b/app/styles/dropdowns/_other_dropdown.scss @@ -1,7 +1,7 @@ .sd-widget.metadata { .dropdown { - margin-right: -5px; + margin-inline-end: -5px; .dropdown__toggle { display: inline-block; @@ -9,7 +9,7 @@ min-width: 40px; box-sizing: border-box; height: 28px; - margin-top: -5px; + margin-block-start: -5px; border-radius: $border-radius__base--x-small; border: 1px solid #f8f8f8; padding: 4px 10px; @@ -23,7 +23,7 @@ .dropdown__menu { margin: 0; - margin-top: -5px; + margin-block-start: -5px; box-sizing: border-box; border-radius:0; max-width: $tabpane-width - 40px; @@ -53,7 +53,7 @@ .dropdown-nested { position: absolute; - right: 0px; - margin-top: 0px; + inset-inline-end: 0px; + margin-block-start: 0px; } } diff --git a/app/styles/editor/_editor-buttons.scss b/app/styles/editor/_editor-buttons.scss index bf5a4299..cb741603 100644 --- a/app/styles/editor/_editor-buttons.scss +++ b/app/styles/editor/_editor-buttons.scss @@ -53,6 +53,6 @@ $editor-styleButton-size: 3rem; } .Editor3-styleButton--short { - padding-right: 0.2rem; - margin-right: -1rem; + padding-inline-end: 0.2rem; + margin-inline-end: -1rem; } diff --git a/app/styles/editor/_editor-themes.scss b/app/styles/editor/_editor-themes.scss index b3f31a41..ab84c482 100644 --- a/app/styles/editor/_editor-themes.scss +++ b/app/styles/editor/_editor-themes.scss @@ -316,10 +316,10 @@ $body-font-size: ( } .theme-preview__block { - margin-bottom: 1.2rem; + margin-block-end: 1.2rem; &:last-child { - margin-bottom: 0; + margin-block-end: 0; } .sd-checkbox--button-style, @@ -352,8 +352,8 @@ $body-font-size: ( line-height: 140%; color: inherit; font-family: inherit; - border-bottom: 1px dotted var(--sd-editor-colour__main-border); - margin-bottom: 0.8rem; + border-block-end: 1px dotted var(--sd-editor-colour__main-border); + margin-block-end: 0.8rem; padding: 1rem 0 0.5rem; flex-direction: column; justify-content: flex-end; @@ -363,7 +363,7 @@ $body-font-size: ( display: flex; color: inherit; font-family: inherit; - margin-bottom: 0.8rem; + margin-block-end: 0.8rem; padding: 1rem 0 0.5rem; flex-direction: column; } @@ -372,7 +372,7 @@ $body-font-size: ( text-align: end; .sd-check__wrapper+.sd-check__wrapper { - margin-left: 0.2rem; + margin-inline-start: 0.2rem; } } diff --git a/app/styles/form-elements/_autocomplete.scss b/app/styles/form-elements/_autocomplete.scss index b5992b90..b47c75f9 100644 --- a/app/styles/form-elements/_autocomplete.scss +++ b/app/styles/form-elements/_autocomplete.scss @@ -2,7 +2,7 @@ .sd-searchbar, .sd-input--inline-label { .p-autocomplete-panel { - margin-top: 0; + margin-block-start: 0; } } @@ -19,7 +19,7 @@ color: inherit !important; z-index: 1; border-radius: $border-radius__base--full; - right:8px; + inset-inline-end:8px; } } @@ -35,7 +35,7 @@ .sd-input { .p-autocomplete-loader { - margin-top: -1.4rem; + margin-block-start: -1.4rem; &.pi { font-size: 2rem !important; @@ -46,6 +46,6 @@ .sd-input.sd-input--inline-label { .p-autocomplete-loader { - margin-top: -1rem; + margin-block-start: -1rem; } } diff --git a/app/styles/form-elements/_checkbox.scss b/app/styles/form-elements/_checkbox.scss index b6f591f9..b7552394 100644 --- a/app/styles/form-elements/_checkbox.scss +++ b/app/styles/form-elements/_checkbox.scss @@ -37,8 +37,8 @@ $checkButtonBorderRadius: $border-radius__base--small; -moz-osx-font-smoothing: grayscale; color: #fff; position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; transform: scale(0.25, 0.25); } @@ -75,7 +75,7 @@ $checkButtonBorderRadius: $border-radius__base--small; content:' '; position: absolute; background-color: $sd-colour-interactive; - top: 0.2rem; + inset-block-start: 0.2rem; inset-inline-start: 0.2rem; opacity: 0; transition: all 0.1s ease-in; @@ -354,7 +354,7 @@ $checkButtonBorderRadius: $border-radius__base--small; } .sd-check-button { - @include sd-padding('1-5', 'x'); + padding-inline: var(--space--1-5); line-height: 1; border: 1px solid $checkButtonBorderColor; border-radius: $checkButtonBorderRadius; @@ -696,7 +696,7 @@ $checkButtonBorderRadius: $border-radius__base--small; // Superdeks untill they are refactored .toggle-button { - @include sd-padding('1-5', 'x'); + padding-inline: var(--space--1-5); @include text-overflow; line-height: 1; border: 1px solid $checkButtonBorderColor; diff --git a/app/styles/form-elements/_forms-general.scss b/app/styles/form-elements/_forms-general.scss index cc85fbcb..46a134a0 100644 --- a/app/styles/form-elements/_forms-general.scss +++ b/app/styles/form-elements/_forms-general.scss @@ -1,6 +1,6 @@ .form__row { width: 100%; - padding-bottom: 2rem; + padding-block-end: 2rem; } .form__row--flex { @@ -9,34 +9,34 @@ } .form__row--no-padding { - padding-bottom: 0; + padding-block-end: 0; } .form__row--small-padding, .form__row--s-padding { - padding-bottom: 0.8rem; + padding-block-end: 0.8rem; } .form__row--l-padding { - padding-bottom: 3rem; + padding-block-end: 3rem; } .form__row--xl-padding { - padding-bottom: 4rem; + padding-block-end: 4rem; } .form__row--inner { - padding-bottom: 0; - padding-top: 1rem; + padding-block-end: 0; + padding-block-start: 1rem; } .form__row--bordered { padding: 1rem 0; - border-bottom: 1px solid rgba(123, 123, 123, 0.3); + border-block-end: 1px solid rgba(123, 123, 123, 0.3); &:first-child, &:only-child { - border-top: 1px solid rgba(123, 123, 123, 0.3); + border-block-start: 1px solid rgba(123, 123, 123, 0.3); } } @@ -58,7 +58,7 @@ } .sd-line-input+.sd-line-input { - margin-left: 1.2rem; + margin-inline-start: 1.2rem; } // For more complex inline form combinations an additional element that goes inside .form__row--flex container is provided. @@ -68,11 +68,11 @@ margin: 0 0.6rem; &:first-child { - margin-left: 0; + margin-inline-start: 0; } &:last-child { - margin-right: 0; + margin-inline-end: 0; } &:only-child { @@ -91,14 +91,14 @@ label { vertical-align: middle; line-height: 1; - margin-right: 0.6rem; + margin-inline-end: 0.6rem; @include transition(color, 0.15s, ease-in); &.form__row-label.form-label { display: block; width: 100%; - margin-bottom: 1rem; - margin-right: 0; + margin-block-end: 1rem; + margin-inline-end: 0; } } } @@ -109,7 +109,7 @@ .form__block { display: block; - margin-bottom: 1rem; + margin-block-end: 1rem; padding: 2rem; border-radius: $border-radius__base--x-small; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2); @@ -117,7 +117,7 @@ .form__heading { font-size: 1.6rem; - padding-bottom: 1.2rem; + padding-block-end: 1.2rem; line-height: 120%; } @@ -133,7 +133,7 @@ gap: $sd-base-increment * 2; .form__item { - margin-bottom: $sd-base-increment * 2; + margin-block-end: $sd-base-increment * 2; } } @@ -147,31 +147,31 @@ .form__group--mb-0 { .form__item { - margin-bottom: 0; + margin-block-end: 0; } } .form__group--mb-1 { .form__item { - margin-bottom: $sd-base-increment; + margin-block-end: $sd-base-increment; } } .form__group--mb-2 { .form__item { - margin-bottom: $sd-base-increment * 2; + margin-block-end: $sd-base-increment * 2; } } .form__group--mb-3 { .form__item { - margin-bottom: $sd-base-increment * 3; + margin-block-end: $sd-base-increment * 3; } } .form__group--mb-4 { .form__item { - margin-bottom: $sd-base-increment * 4; + margin-block-end: $sd-base-increment * 4; } } @@ -181,41 +181,41 @@ align-items: stretch; .form__item { - margin-bottom: 0 !important; + margin-block-end: 0 !important; } &.form__group--mb-0 { - margin-bottom: 0; + margin-block-end: 0; } &.form__group--mb-1 { - margin-bottom: $sd-base-increment; + margin-block-end: $sd-base-increment; } &.form__group--mb-2 { - margin-bottom: $sd-base-increment * 2; + margin-block-end: $sd-base-increment * 2; } &.form__group--mb-3 { - margin-bottom: $sd-base-increment * 3; + margin-block-end: $sd-base-increment * 3; } &.form__group--mb-4 { - margin-bottom: $sd-base-increment * 4; + margin-block-end: $sd-base-increment * 4; } } .form__header { - margin-bottom: 1rem; + margin-block-end: 1rem; font-size: 1.6rem; } .form__label { - margin-bottom: 0.8rem; + margin-block-end: 0.8rem; } .form__item { @@ -232,7 +232,7 @@ .form__text-block { min-height: $form-input-height; - margin-top: $form-label-height; + margin-block-start: $form-label-height; color: inherit; font-size: 1.3rem; display: inline-flex; @@ -243,7 +243,7 @@ .btn, .icn-btn { - margin-top: $form-label-height; + margin-block-start: $form-label-height; } } @@ -281,14 +281,14 @@ } .form__text-block { - margin-top: 0; + margin-block-start: 0; } .form__item.form__item--auto-width { .btn, .icn-btn { - margin-top: 0; + margin-block-start: 0; } } } @@ -319,7 +319,7 @@ .btn, .icn-btn { flex: 0 0 auto; - margin-top: $form-label-height; + margin-block-start: $form-label-height; } .sd-text { @@ -338,23 +338,23 @@ } .form__group-new--mb-0 { - margin-bottom: 0; + margin-block-end: 0; } .form__group-new--mb-1 { - margin-bottom: $sd-base-increment; + margin-block-end: $sd-base-increment; } .form__group-new--mb-2 { - margin-bottom: $sd-base-increment * 2; + margin-block-end: $sd-base-increment * 2; } .form__group-new--mb-3 { - margin-bottom: $sd-base-increment * 3; + margin-block-end: $sd-base-increment * 3; } .form__group-new--mb-4 { - margin-bottom: $sd-base-increment * 4; + margin-block-end: $sd-base-increment * 4; } .form__group-new--inline-labels { @@ -362,7 +362,7 @@ .btn, .icn-btn, .sd-text { - margin-top: 0; + margin-block-start: 0; } } @@ -371,7 +371,7 @@ .btn, .icn-btn, .sd-text { - margin-top: 0; + margin-block-start: 0; } } @@ -386,7 +386,7 @@ display: inline-block; font-size: 1.6rem; margin: 0; - margin-bottom: $sd-base-increment * 1.5; + margin-block-end: $sd-base-increment * 1.5; line-height: 1; color: var(--color-label-text); //text-transform: uppercase; diff --git a/app/styles/form-elements/_input-preview.scss b/app/styles/form-elements/_input-preview.scss index 4dbeec15..da097ab6 100644 --- a/app/styles/form-elements/_input-preview.scss +++ b/app/styles/form-elements/_input-preview.scss @@ -31,7 +31,7 @@ } .tags-preview__tag-item--border { - border-left: solid; + border-inline-start: solid; border-left-width: 5px; } diff --git a/app/styles/form-elements/_input-wrap.scss b/app/styles/form-elements/_input-wrap.scss index c416327d..373f95c7 100644 --- a/app/styles/form-elements/_input-wrap.scss +++ b/app/styles/form-elements/_input-wrap.scss @@ -1,6 +1,6 @@ .input-wrap { - padding-top: 0; + padding-block-start: 0; margin: 0; display: grid; grid-template-columns: auto 1fr auto; @@ -42,7 +42,7 @@ .form-label { grid-row: 1/2; grid-column: 2/3; - margin-bottom: 0 !important; + margin-block-end: 0 !important; align-items: center; justify-content: flex-start; } @@ -92,7 +92,7 @@ content: "*"; vertical-align: top; font-size: 1.2rem; - padding-left: 0.3rem; + padding-inline-start: 0.3rem; } .sd-input__label.sd-input__label--boxed::after { diff --git a/app/styles/form-elements/_inputs.scss b/app/styles/form-elements/_inputs.scss index c7e53b0e..7586812d 100644 --- a/app/styles/form-elements/_inputs.scss +++ b/app/styles/form-elements/_inputs.scss @@ -5,7 +5,7 @@ width: 100%; color: var(--color-text); border: 0; - border-bottom: 1px solid var(--color-input-border); + border-block-end: 1px solid var(--color-input-border); font-size: 1.4rem; background-color: var(--color-input-bg); transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); @@ -69,7 +69,7 @@ transition: opacity ease 0.2s; justify-self: start; position: relative; - margin-bottom: $sd-base-increment; + margin-block-end: $sd-base-increment; transition: background-color ease 0.2s; } @@ -86,7 +86,7 @@ } .form-label--marg-b10 { - margin-bottom: 10px; + margin-block-end: 10px; } .form-label--block { @@ -102,7 +102,7 @@ vertical-align: top; font-size: 1.2rem; padding-inline-start: 0.3rem; - margin-top: -2px + margin-block-start: -2px } } @@ -176,7 +176,7 @@ .sd-line-input { margin: 0 0 1.8em 0; - padding-top: 1.8rem; + padding-block-start: 1.8rem; position: relative; input, @@ -211,7 +211,7 @@ input[type="file"] { &.sd-line-input__input { height: 3rem; - padding-top: 0.6rem; + padding-block-start: 0.6rem; font-size: 1.3rem; &:focus { @@ -239,7 +239,7 @@ } textarea.sd-line-input__input { - padding-top: 0.6rem; + padding-block-start: 0.6rem; display: block; } @@ -279,7 +279,7 @@ } .sd-line-input__icon-left { - left: 0.2rem; + inset-inline-start: 0.2rem; } &.sd-line-input--indent-l30 { @@ -332,21 +332,21 @@ inset-inline-start: 1px; inset-inline-end: auto; padding-inline-end: 5.5rem; - margin-top: 0.4rem; + margin-block-start: 0.4rem; } .sd-line-input__char-count { position: absolute; inset-inline-end: 1px; inset-inline-start: auto; - margin-top: 0.5rem; + margin-block-start: 0.5rem; font-size: 1.1rem; font-weight: 400; font-style: italic; } .sd-line-input__message { - padding-top: 0.4rem; + padding-block-start: 0.4rem; } &.sd-line-input--invalid { @@ -401,7 +401,7 @@ &.sd-input__input:focus { opacity: 0.5; background-color: var(--color-input-bg); - border-bottom: 1px dotted var(--color-input-border); + border-block-end: 1px dotted var(--color-input-border); cursor: not-allowed !important; box-shadow: none; } @@ -413,7 +413,7 @@ &.sd-line-input__select:focus { opacity: 0.5; background-color: var(--color-input-bg); - border-bottom: 1px dotted var(--color-input-border); + border-block-end: 1px dotted var(--color-input-border); cursor: not-allowed !important; box-shadow: none; } @@ -429,9 +429,9 @@ width: 0; height: 0; vertical-align: middle; - border-left: 0.4rem solid transparent; - border-right: 0.4rem solid transparent; - border-top: 0.4rem solid $sd-text; + border-inline-start: 0.4rem solid transparent; + border-inline-end: 0.4rem solid transparent; + border-block-start: 0.4rem solid $sd-text; opacity: 0.3; content: ""; z-index: 0; @@ -481,11 +481,11 @@ } &.sd-line-input--no-label { - padding-top: 0; + padding-block-start: 0; } &.sd-line-input--no-margin { - margin-bottom: 0; + margin-block-end: 0; } .sd-line-input__plus-btn { @@ -502,7 +502,7 @@ &::before { @include icon-base; - margin-top: 0.2rem; + margin-block-start: 0.2rem; content: "\e629"; color: $white; -webkit-font-smoothing: antialiased; @@ -519,7 +519,7 @@ .sd-line-input--flex-row { display: inline-flex; align-items: center; - border-bottom: 1px solid var(--color-input-border); + border-block-end: 1px solid var(--color-input-border); width: 100%; } @@ -556,7 +556,7 @@ .sd-line-input--label-left, .sd-line-input--label-left-auto { - padding-top: 0; + padding-block-start: 0; margin: 0; display: grid; grid-template-columns: auto 1rem 1fr auto; @@ -564,7 +564,7 @@ grid-gap: 0; .sd-line-input__label { - margin-top: 0.1rem; + margin-block-start: 0.1rem; grid-column: 1/2; grid-row: 1/2; position: static; @@ -607,7 +607,7 @@ } .sd-input__input--invalid { - border-bottom: 1px solid $red; + border-block-end: 1px solid $red; background-color: hsla(357, 79%, 50%, 0.075); &:hover { @@ -625,7 +625,7 @@ .sd-input__input--disabled { opacity: 0.5; background-color: var(--color-input-bg); - border-bottom: 1px dotted var(--color-input-border); + border-block-end: 1px dotted var(--color-input-border); cursor: not-allowed !important; box-shadow: none; @@ -740,7 +740,7 @@ } .sd-input { - padding-top: 0; + padding-block-start: 0; margin: 0; display: grid; grid-template-columns: auto 1fr auto; @@ -774,7 +774,7 @@ input[type="file"] { &.sd-input__input { height: 3rem; - padding-top: 0.6rem; + padding-block-start: 0.6rem; font-size: 1.3rem; &:focus { @@ -814,9 +814,9 @@ height: 0; margin-inline-end: 1rem; vertical-align: middle; - border-left: 0.4rem solid transparent; - border-right: 0.4rem solid transparent; - border-top: 0.4rem solid var(--color-text); + border-inline-start: 0.4rem solid transparent; + border-inline-end: 0.4rem solid transparent; + border-block-start: 0.4rem solid var(--color-text); pointer-events: none; opacity: 0.4; content: ""; @@ -969,7 +969,7 @@ &.sd-input__input:focus { opacity: 0.5; background-color: var(--color-input-bg); - border-bottom: 1px dotted var(--color-input-border); + border-block-end: 1px dotted var(--color-input-border); cursor: not-allowed !important; box-shadow: none; } @@ -981,7 +981,7 @@ &.sd-input__select:focus { opacity: 0.5; background-color: var(--color-input-bg); - border-bottom: 1px dotted var(--color-input-border); + border-block-end: 1px dotted var(--color-input-border); cursor: not-allowed !important; box-shadow: none; } @@ -999,7 +999,7 @@ &.sd-input__duration-input:focus { opacity: 0.5; //background-color: var(--color-input-bg); - //border-bottom: 1px dotted var(--color-input-border); + //border-block-end: 1px dotted var(--color-input-border); cursor: not-allowed !important; box-shadow: none; } @@ -1010,7 +1010,7 @@ &.duration-input:focus { opacity: 0.5; //background-color: var(--color-input-bg); - //border-bottom: 1px dotted var(--color-input-border); + //border-block-end: 1px dotted var(--color-input-border); cursor: not-allowed !important; box-shadow: none; } diff --git a/app/styles/form-elements/_radio.scss b/app/styles/form-elements/_radio.scss index f57bc2cb..18552675 100644 --- a/app/styles/form-elements/_radio.scss +++ b/app/styles/form-elements/_radio.scss @@ -12,7 +12,7 @@ border: 2px solid rgba(0, 0, 0, 0.2); border-radius: $border-radius__base--full; vertical-align: middle; - margin-right: 0.8rem; + margin-inline-end: 0.8rem; &::after { @include opacity(0); @@ -23,8 +23,8 @@ content:' '; position: absolute; background-color: $sd-colour-interactive; - top: 0.2rem; - left: 0.2rem; + inset-block-start: 0.2rem; + inset-inline-start: 0.2rem; transform: scale(0.25, 0.25); } diff --git a/app/styles/form-elements/_select-grid.scss b/app/styles/form-elements/_select-grid.scss index a05c202f..9d550613 100644 --- a/app/styles/form-elements/_select-grid.scss +++ b/app/styles/form-elements/_select-grid.scss @@ -1,6 +1,6 @@ .select-grid__overlay-panel { z-index: 1500 !important; - margin-top: 1px; + margin-block-start: 1px; } .select-grid__panel { @@ -53,7 +53,7 @@ grid-row: 2/3; grid-column: 2/4; background-color: var(--color-input-bg); - border-bottom: 1px solid var(--color-input-border); + border-block-end: 1px solid var(--color-input-border); width: 4rem; } @@ -73,7 +73,7 @@ .form__item--auto-width { .sd-input--grid-select { .btn { - margin-top: 0; + margin-block-start: 0; } } } \ No newline at end of file diff --git a/app/styles/form-elements/_switch.scss b/app/styles/form-elements/_switch.scss index ef394b32..a3fc3ffd 100644 --- a/app/styles/form-elements/_switch.scss +++ b/app/styles/form-elements/_switch.scss @@ -13,9 +13,9 @@ .inner { position:absolute; - left:0.2rem; + inset-inline-start:0.2rem; width:1.4rem; - top:0.2rem; + inset-block-start:0.2rem; height:1.4rem; background: $white; border-radius: $border-radius__base--full; @@ -27,7 +27,7 @@ background: var(--sd-colour-interactive--active); .inner { - left:2.4rem; + inset-inline-start:2.4rem; } } diff --git a/app/styles/grids/_basic-grid.scss b/app/styles/grids/_basic-grid.scss index 171a3210..d1b36a6f 100644 --- a/app/styles/grids/_basic-grid.scss +++ b/app/styles/grids/_basic-grid.scss @@ -175,10 +175,10 @@ $flex-grid-media: ( } .flex-grid.flex-grid--boxed + .flex-grid.flex-grid--boxed { - margin-top: $flex-grid-gap; + margin-block-start: $flex-grid-gap; } .flex-grid.flex-grid--boxed--small + .flex-grid.flex-grid--boxed--small { - margin-top: $flex-grid-gap-small; + margin-block-start: $flex-grid-gap-small; } // Media queries diff --git a/app/styles/grids/_grid-layout.scss b/app/styles/grids/_grid-layout.scss index 94b1bdd6..7ed408e3 100644 --- a/app/styles/grids/_grid-layout.scss +++ b/app/styles/grids/_grid-layout.scss @@ -24,7 +24,7 @@ } .sd-left-nav__group-header { - border-top: 1px solid hsla(0, 0%, 100%, 0.14); + border-block-start: 1px solid hsla(0, 0%, 100%, 0.14); } } @@ -97,22 +97,22 @@ &::after { display: block; - bottom: 0; + inset-block-end: 0; content: ''; width: 4px; position: absolute; z-index: 80; - top: 0; + inset-block-start: 0; } } .sd-page-content__left-tabs::after { - right: -4px; + inset-inline-end: -4px; background-image: linear-gradient(to right, rgba(0, 0, 0, .25) 0, transparent 100%); } .sd-page-content__right-tabs::after { - left: -4px; + inset-inline-start: -4px; background-image: linear-gradient(to left, rgba(0, 0, 0, .25) 0, transparent 100%); } @@ -179,11 +179,11 @@ } .sd-column-box__main-column--left { - border-right: 1px solid var(--sd-colour-line--light); + border-inline-end: 1px solid var(--sd-colour-line--light); } .sd-column-box__main-column--border-right { - border-right: 2px solid var(--sd-colour-line--medium); + border-inline-end: 2px solid var(--sd-colour-line--medium); } .sd-column-box__main-column--flex { @@ -193,7 +193,7 @@ .sd-column-box__main-column-top-bar { padding: 0.8rem 2.4rem; - border-bottom: 1px solid var(--sd-colour-line--x-light); + border-block-end: 1px solid var(--sd-colour-line--x-light); display: flex; flex-direction: row; gap: $sd-base-increment; @@ -210,7 +210,7 @@ transition: all .2s ease-out; display: flex; flex-direction: column; - border-left: 1px solid var(--sd-colour-line--light); + border-inline-start: 1px solid var(--sd-colour-line--light); overflow-x: hidden; position: relative; flex-shrink: 0; @@ -218,12 +218,12 @@ &::before { display: block; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; content: ''; width: 4px; position: absolute; - left: 0; + inset-inline-start: 0; z-index: 80; background-image: linear-gradient(to right, hsla(0, 0%, 0%, 0.12) 0%, transparent 100%); } @@ -250,7 +250,7 @@ .sd-column-box__slide-in-column--closed { width: 0; - border-left: 1px solid transparent; + border-inline-start: 1px solid transparent; overflow: hidden; .sd-column-box__slide-in-column-inner { @@ -285,25 +285,25 @@ color: var(--color-text-light); font-weight: 300; letter-spacing: 0.02em; - margin-right: auto; + margin-inline-end: auto; } .sd-slide-in-panel__heading--marg-b10 { - margin-bottom: 1rem; + margin-block-end: 1rem; } .sd-slide-in-panel__heading--marg-b16 { - margin-bottom: 1.6rem; + margin-block-end: 1.6rem; } .sd-slide-in-panel__heading--marg-b20 { - margin-bottom: 2rem; + margin-block-end: 2rem; } .sd-slide-in-panel__close { z-index: 2; color: var(--color-text-lighter); - margin-right: $sd-base-increment * 1.5; + margin-inline-end: $sd-base-increment * 1.5; } .sd-slide-in-panel__content { @@ -320,7 +320,7 @@ } .sd-slide-in-panel__content-block--first { - padding-top: 3.2rem + padding-block-start: 3.2rem } .sd-slide-in-panel__footer { @@ -338,11 +338,11 @@ &::before { position: absolute; content: ''; - top: -0.4rem; - left: 0; - right: 0; + inset-block-start: -0.4rem; + inset-inline-start: 0; + inset-inline-end: 0; height: 0.4rem; - border-bottom: 1px solid var(--sd-colour--shadow-line); + border-block-end: 1px solid var(--sd-colour--shadow-line); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%); } } @@ -385,15 +385,15 @@ } .sd-page-content__content-block--right::before { - border-left: 3px solid var(--sd-colour__splitter); + border-inline-start: 3px solid var(--sd-colour__splitter); background-image: linear-gradient(to right, rgba(0, 0, 0, .2) 0, transparent 100%); display: block; - bottom: 0; + inset-block-end: 0; content: ''; width: 6px; position: absolute; z-index: 8000; - top: 0; + inset-block-start: 0; } .sd-edit-panel { @@ -414,8 +414,8 @@ // override basic behaviour of the sd-sidebar-menu .sd-sidebar-menu { position: relative; - top: 0; - bottom: auto; + inset-block-start: 0; + inset-block-end: auto; } // Content block width modifiers @@ -445,8 +445,8 @@ $planningEditor-width: 53rem; // override basic behaviour of the sd-sidebar-menu .sd-sidebar-menu { position: relative; - top: 0; - bottom: auto; + inset-block-start: 0; + inset-block-end: auto; } .sd-page-content__content-block--main { @@ -589,7 +589,7 @@ $planningEditor-width: 53rem; .open-preview { .sd-preview-panel { width: 36rem; - border-left: 1px solid rgba(0, 0, 0, 0.25); + border-inline-start: 1px solid rgba(0, 0, 0, 0.25); flex-shrink: 0; .side-panel { @@ -942,14 +942,14 @@ $planningEditor-width: 53rem; display: flex; align-items: center; box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.4); - border-bottom: 1px solid hsla(214, 13%, 60%, 0.08); + border-block-end: 1px solid hsla(214, 13%, 60%, 0.08); } .sd-main-menu__title { font-size: 1.6rem; font-weight: 300; opacity: 0.65; - padding-left: 2.4rem; + padding-inline-start: 2.4rem; } .sd-main-menu__content { @@ -962,12 +962,12 @@ $planningEditor-width: 53rem; align-items: stretch; justify-content: center; box-shadow: 0 -2px 3px hsla(0, 0%, 0%, 0.24); - border-top: 1px solid hsla(214, 13%, 60%, 0.08); + border-block-start: 1px solid hsla(214, 13%, 60%, 0.08); .sd-main-menu__footer-logo { display: flex; align-items: center; - border-top: 1px solid hsla(214, 13%, 60%, 0.08); + border-block-start: 1px solid hsla(214, 13%, 60%, 0.08); background: url(../img/SD-logo.svg) no-repeat center; height: 7.6rem; } @@ -993,7 +993,7 @@ $planningEditor-width: 53rem; padding: 8px 0 8px; opacity: 0.85; height: 3.2rem; - border-top: 1px solid hsla(214, 13%, 60%, 0.08); + border-block-start: 1px solid hsla(214, 13%, 60%, 0.08); background-color: hsla(214, 13%, 6%, 0.24); } } @@ -1086,8 +1086,8 @@ $planningEditor-width: 53rem; .sd-overlay-panel-2 { z-index: 2; position: absolute; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 0; background: var(--sd-colour-panel-bg--100); color: var(--color-text); @@ -1103,12 +1103,12 @@ $planningEditor-width: 53rem; .sd-overlay-panel-2--left { box-shadow: 2px 0px 0px 0px hsl(0, 0%, 40%), 2px 0px 12px 0px hsla(0, 0%, 0%, 0.3); - left: 0; + inset-inline-start: 0; } .sd-overlay-panel-2--right { box-shadow: -2px 0px 0px 0px hsl(0, 0%, 40%), -2px 0px 12px 0px hsla(0, 0%, 0%, 0.3); - right: 0; + inset-inline-end: 0; } .sd-overlay-panel-2--open { @@ -1133,8 +1133,8 @@ $planningEditor-width: 53rem; .sd-authoring-page__publish-container, .sd-main-content-grid__overlay { .sd-overlay-panel { - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; z-index: 100; } } diff --git a/app/styles/grids/_layout-grid.scss b/app/styles/grids/_layout-grid.scss index adebd260..80bb21ff 100644 --- a/app/styles/grids/_layout-grid.scss +++ b/app/styles/grids/_layout-grid.scss @@ -80,26 +80,26 @@ $layout-grid-media: ( } &>.grid { - margin-left: -$layout-grid-gutter; - margin-right: -$layout-grid-gutter; + margin-inline-start: -$layout-grid-gutter; + margin-inline-end: -$layout-grid-gutter; padding: 0; } } &+.grid { - margin-top: 1rem; + margin-block-start: 1rem; } } .grid--padding-fix { - margin-left: -$layout-grid-gutter; - margin-right: -$layout-grid-gutter; + margin-inline-start: -$layout-grid-gutter; + margin-inline-end: -$layout-grid-gutter; padding: 0; } .grid--margin { - margin-top: $layout-grid-gutter; - margin-bottom: $layout-grid-gutter; + margin-block-start: $layout-grid-gutter; + margin-block-end: $layout-grid-gutter; } .grid--wrap { @@ -107,8 +107,8 @@ $layout-grid-media: ( } .grid--boxed { - margin-left: -$layout-grid-gap; - margin-right: -$layout-grid-gap; + margin-inline-start: -$layout-grid-gap; + margin-inline-end: -$layout-grid-gap; .grid__item { margin: $layout-grid-gap; @@ -125,8 +125,8 @@ $layout-grid-media: ( } .grid--boxed-small { - margin-left: -$layout-grid-gap-small; - margin-right: -$layout-grid-gap-small; + margin-inline-start: -$layout-grid-gap-small; + margin-inline-end: -$layout-grid-gap-small; .grid__item { margin: $layout-grid-gap-small; diff --git a/app/styles/grids/_sd-kanban-list.scss b/app/styles/grids/_sd-kanban-list.scss index ce15f790..757d49f3 100644 --- a/app/styles/grids/_sd-kanban-list.scss +++ b/app/styles/grids/_sd-kanban-list.scss @@ -5,19 +5,19 @@ $background-main: $sd-background; flex-direction: row; flex-wrap: nowrap; padding: 1rem; - padding-bottom: 0; + padding-block-end: 0; height: 100%; ::-webkit-scrollbar { - border-left: 4px solid transparent !important; - border-right: 1px solid transparent !important; + border-inline-start: 4px solid transparent !important; + border-inline-end: 1px solid transparent !important; width: 6px !important; background: transparent !important; } ::-webkit-scrollbar-track { background: transparent !important; - border-left: 3px solid transparent !important; + border-inline-start: 3px solid transparent !important; &:hover { background: rgba(0,0,0,.05) !important; @@ -25,7 +25,7 @@ $background-main: $sd-background; } ::-webkit-scrollbar-thumb { - border-left: 3px solid transparent !important; + border-inline-start: 3px solid transparent !important; } } .sd-kanban-list__board { @@ -55,7 +55,7 @@ $background-main: $sd-background; display: flex; flex-direction: row; align-items: center; - border-bottom: 4px solid var(--sd-colour-bg--09); + border-block-end: 4px solid var(--sd-colour-bg--09); padding: 0 0 0.4rem 0; margin: 0 0.1rem; @@ -85,6 +85,6 @@ $background-main: $sd-background; [class*="--dark-ui"], .dark-ui { .sd-kanban-list__board-header { - border-bottom: 4px solid rgba(86, 110, 119, 1) !important; + border-block-end: 4px solid rgba(86, 110, 119, 1) !important; } } diff --git a/app/styles/interface-elements/_side-panel.scss b/app/styles/interface-elements/_side-panel.scss index 7bfe97a1..514468f9 100644 --- a/app/styles/interface-elements/_side-panel.scss +++ b/app/styles/interface-elements/_side-panel.scss @@ -64,7 +64,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); justify-content: flex-end; &>.btn { - margin-left: $sd-base-increment; + margin-inline-start: $sd-base-increment; } } } @@ -102,7 +102,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); color: inherit; .icn-btn { - margin-left: 0.2rem; + margin-inline-start: 0.2rem; } } @@ -151,13 +151,13 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); .side-panel__image-actions { position: absolute; - top: 1.8rem; - right: 0.5rem; + inset-block-start: 1.8rem; + inset-inline-end: 0.5rem; z-index: 2; } .side-panel__content-block { - @include sd-padding('2'); + padding: var(--space--2); .side-panel__heading { padding: 0; @@ -165,13 +165,13 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); } .side-panel__content-block--pad-top-0 { - padding-top: 0; + padding-block-start: 0; } .side-panel__content-block--boxed { padding: 1.6rem; border-radius: $border-radius__base--medium; - margin-bottom: 1rem; + margin-block-end: 1rem; } .side-panel__content-block--pad-small { @@ -210,11 +210,11 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); } .side-panel__content-block--padding-1-5 { - @include sd-padding('1-5'); + padding: var(--space--1-5); } .side-panel__content-block--padding-3 { - @include sd-padding('3'); + padding: var(--space--3); } .side-panel__content-block--space-between { @@ -250,7 +250,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); position: relative; padding: .8rem 2rem; box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2); - margin-bottom: 1rem; + margin-block-end: 1rem; min-height: 40px; //transition: min-height 0.3s 0.3s ease-in; @@ -287,9 +287,9 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); height: 21px; border: 0; padding: 0; - left: 50%; - margin-left: -10.5px; - bottom: -11px; + inset-inline-start: 50%; + margin-inline-start: -10.5px; + inset-block-end: -11px; background-color: #fff; z-index: 3; line-height: 0; @@ -319,7 +319,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); line-height: 140%; font-weight: 300; word-wrap: break-word; - padding-bottom: 1rem; + padding-block-end: 1rem; } // Use only inside cside-panel__content-block--flex for grouping and positioning content @@ -342,10 +342,10 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); // Social media overlay - Superdesk targeted publishing .side-panel__content-block-overlay { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; width: 0; padding: 0 !important; @@ -354,10 +354,10 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); transition: all 0.2s ease-in-out; position: absolute; width: 34rem; - top: 0; - bottom: 0; - right: 0; - left: 34rem; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-end: 0; + inset-inline-start: 34rem; background-color: #222; z-index: 2; } @@ -365,7 +365,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); .side-panel__content-block-overlay--open { .side-panel { - left: 0; + inset-inline-start: 0; opacity: 1; } } @@ -383,10 +383,10 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); transition: all .2s ease-in-out; position: absolute; width: 40rem; - top: 0; - bottom: 0; - right: 0; - left: 40rem; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-end: 0; + inset-inline-start: 40rem; background-color: #222; z-index: 2; } @@ -394,7 +394,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); .side-panel__content-block-overlay-grid--open { .side-panel { - left: 0; + inset-inline-start: 0; opacity: 1; } } @@ -448,11 +448,11 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); &::before { position: absolute; content: ''; - top: -0.4rem; - left: 0; - right: 0; + inset-block-start: -0.4rem; + inset-inline-start: 0; + inset-inline-end: 0; height: 0.4rem; - border-bottom: 1px solid var(--sd-colour--shadow-line); + border-block-end: 1px solid var(--sd-colour--shadow-line); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); } @@ -473,12 +473,12 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); &.side-panel--shadow-left::after, &.side-panel--left::after { display: block; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; content: ''; width: 4px; position: absolute; - right: 0; + inset-inline-end: 0; z-index: 80; background-image: linear-gradient(to left, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 100%); } @@ -486,12 +486,12 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200); &.side-panel--shadow-right::after, &.side-panel--right::after { display: block; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; content: ''; width: 4px; position: absolute; - left: 0; + inset-inline-start: 0; z-index: 80; background-image: linear-gradient(to right, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 100%); } diff --git a/app/styles/layout/_basic-layout.scss b/app/styles/layout/_basic-layout.scss index 438e2faa..256d22c6 100644 --- a/app/styles/layout/_basic-layout.scss +++ b/app/styles/layout/_basic-layout.scss @@ -2,45 +2,45 @@ .sd-page { position: absolute; - top: 48px; - bottom: 0; - left: 0; - right: 0; + inset-block-start: 48px; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; background: #fff; overflow: hidden; } .sd-page__sidebar { position: absolute; - top: 0; - bottom: 0; - left: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; } .sd-page__main-content { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--sd-colour-panel-bg--100); display: flex; flex-direction: column; } .sd-page__main-content--double-left-nav { - left: 400px; + inset-inline-start: 400px; } .sd-page__sidebar { & + .sd-page__main-content { - left: 240px; + inset-inline-start: 240px; } & + .sd-content-navigation-panel { - left: 240px; - top: 0; - bottom: 0; + inset-inline-start: 240px; + inset-block-start: 0; + inset-block-end: 0; position: absolute; } } @@ -48,7 +48,7 @@ .sd-page__header { height:48px; flex-shrink: 0; - border-bottom: 1px solid var(--sd-colour-line--light); + border-block-end: 1px solid var(--sd-colour-line--light); display: flex; flex-direction: row; align-items: center; @@ -105,9 +105,9 @@ .sd-overlay-panel { z-index: 2; position: absolute; - top: $subnav-height; - right: 0; - bottom: 3rem; + inset-block-start: $subnav-height; + inset-inline-end: 0; + inset-block-end: 3rem; width: 0; background-color: $white; color: $sd-text; diff --git a/app/styles/layout/_editor.scss b/app/styles/layout/_editor.scss index 016f247f..e9f71e77 100644 --- a/app/styles/layout/_editor.scss +++ b/app/styles/layout/_editor.scss @@ -76,9 +76,9 @@ opacity: 0; position: absolute; overflow: hidden; - top: 0; + inset-block-start: 0; width: 0; - bottom: 0; + inset-block-end: 0; inset-inline-end: -320px; transition: width 0.2s ease-in-out, opacity 0.2s ease; box-shadow: -2px 0 12px hsla(0, 0%, 0%, 0), -3px 0 0 0px hsla(214, 13%, 60%, 0); @@ -203,7 +203,7 @@ p { font-size: 16px; line-height: 1.5; - margin-bottom: 24px; + margin-block-end: 24px; } } @@ -276,9 +276,9 @@ border: 0; padding: 0 0 4px; inset-inline-start: 50%; - margin-left: -18.5px; + margin-inline-start: -18.5px; margin-block-start: -18.5px; - bottom: -25px; + inset-block-end: -25px; background-color: var(--sd-colour-panel-bg--100); z-index: 3; line-height: 0; @@ -291,8 +291,8 @@ &:hover { height: 32px; - bottom: -32px; - padding-top: 2px; + inset-block-end: -32px; + padding-block-start: 2px; i { opacity: 1; diff --git a/app/styles/layout/_general.scss b/app/styles/layout/_general.scss index 5ef83032..21361383 100644 --- a/app/styles/layout/_general.scss +++ b/app/styles/layout/_general.scss @@ -4,27 +4,27 @@ height: $subnav-height !important; position: relative; margin: 0 20px 0 0; - float: left; + float: inline-start; >.btn { - margin-left: 20px; - margin-top: 10px; + margin-inline-start: 20px; + margin-block-start: 10px; } } .button-stack.right-stack, .button-stack--right { - float: right; + float: inline-end; margin: 0 0 0 5px; .navbtn { - border-left: 1px solid var(--sd-colour-line--x-light) !important; - border-right: 0 !important; + border-inline-start: 1px solid var(--sd-colour-line--x-light) !important; + border-inline-end: 0 !important; } >.btn { - margin-right: 12px; - margin-left: 0; + margin-inline-end: 12px; + margin-inline-start: 0; } } @@ -43,9 +43,9 @@ a.text-link { [class*=" icon-"] { color: currentColor; vertical-align: middle; - margin-right: 0.3rem; + margin-inline-end: 0.3rem; position: relative; - top: -0.2rem; + inset-block-start: -0.2rem; } &.text-link--white { @@ -67,11 +67,11 @@ a.text-link { margin: 0.4rem 0.4rem 0.4rem 0; font-size: 1.4rem; padding: 0 .6rem 0 0; - border-right: 1px dotted var(--sd-colour-line--medium); + border-inline-end: 1px dotted var(--sd-colour-line--medium); &:last-child { - padding-right: 0; - border-right: none; + padding-inline-end: 0; + border-inline-end: none; } } @@ -80,11 +80,11 @@ a.text-link { padding: 0 .8rem 0 0; margin: 0.6rem 0.8rem 0.6rem 0; font-size: 1.4rem; - border-right: 1px dotted var(--sd-colour-line--medium); + border-inline-end: 1px dotted var(--sd-colour-line--medium); &:last-child { - padding-right: 0; - border-right: none; + padding-inline-end: 0; + border-inline-end: none; } } } diff --git a/app/styles/menus/_sd-bottom-tabs.scss b/app/styles/menus/_sd-bottom-tabs.scss index 4b6c923f..0cf3ed0a 100644 --- a/app/styles/menus/_sd-bottom-tabs.scss +++ b/app/styles/menus/_sd-bottom-tabs.scss @@ -48,7 +48,7 @@ } span { - padding-top: 2px; + padding-block-start: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/app/styles/menus/_sd-left-navigation.scss b/app/styles/menus/_sd-left-navigation.scss index 3eb9cced..d8587d51 100644 --- a/app/styles/menus/_sd-left-navigation.scss +++ b/app/styles/menus/_sd-left-navigation.scss @@ -15,7 +15,7 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active); .sd-left-nav { background: $sd-leftNav-bgColor; - border-right: 1px solid $sd-leftNav-borderColor; + border-inline-end: 1px solid $sd-leftNav-borderColor; display: block; width: $sd-leftNav-width; overflow: auto; @@ -24,14 +24,14 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active); .sd-left-nav--absolute { position: absolute; - top: 0; - bottom: 0; - left: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; } .sd-left-nav--default { background: $sd-leftNav-bgColor; - border-right: 1px solid $sd-leftNav-borderColor; + border-inline-end: 1px solid $sd-leftNav-borderColor; } .sd-left-nav--blanc { @@ -113,12 +113,12 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active); padding-block-start: 2.6rem; padding-block-end: 0.9rem; padding-inline: 1.6rem 0; - border-top: 1px solid $sd-leftNav-borderColor; - margin-top: 1rem; + border-block-start: 1px solid $sd-leftNav-borderColor; + margin-block-start: 1rem; } .sd-left-nav__group-header--first, .sd-left-nav__group-header:first-child { border: none; - margin-top: 0; + margin-block-start: 0; } diff --git a/app/styles/menus/_sd-sidebar-menu.scss b/app/styles/menus/_sd-sidebar-menu.scss index b2ca8d6e..f625099c 100644 --- a/app/styles/menus/_sd-sidebar-menu.scss +++ b/app/styles/menus/_sd-sidebar-menu.scss @@ -4,21 +4,21 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20); .sd-sidebar-menu { position: absolute; - bottom: 0; + inset-block-end: 0; width: $sd-sidebarMenu-width; - top: $nav-height; + inset-block-start: $nav-height; background-color: $sd-sidebarMenu-background; z-index: $zindexFixedNavbar - 1; transition: all .3s ease; } .sd-sidebar-menu--left { - left: 0; + inset-inline-start: 0; box-shadow: 2px 0 5px 0 rgba(0, 0, 0, .25); &.main-menu__open { - left: $sd-main-menu-width; - //right: 0; This doesn't seam to have any function; To be tested; + inset-inline-start: $sd-main-menu-width; + //inset-inline-end: 0; This doesn't seam to have any function; To be tested; } } @@ -30,8 +30,8 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20); .sd-sidebar-menu__spacer { width: $sd-sidebarMenu-width / 2; margin: 1.8rem auto; - border-top: 1px dotted var(--sd-colour-line--medium); - border-bottom: 0; + border-block-start: 1px dotted var(--sd-colour-line--medium); + border-block-end: 0; } .sd-sidebar-menu__btn { @@ -76,15 +76,15 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20); .sd-sidebar-menu__main-icon { position: absolute; - top: 0.5rem; - left: 0.5rem; + inset-block-start: 0.5rem; + inset-inline-start: 0.5rem; transition: left 0.2s ease-out; } .sd-sidebar-menu__helper-icon { position: absolute; - top: 0.5rem; - left: 3rem; + inset-block-start: 0.5rem; + inset-inline-start: 3rem; transition: left 0.2s ease-out, transform 0.2s; } @@ -98,11 +98,11 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20); &:hover { .sd-sidebar-menu__main-icon { - left: -3rem; + inset-inline-start: -3rem; } .sd-sidebar-menu__helper-icon { - left: 0.5rem; + inset-inline-start: 0.5rem; } } } @@ -111,16 +111,16 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20); .sd-sidebar-menu__btn--active { .sd-sidebar-menu__helper-icon { transform: rotate(180deg); - left: -3rem; + inset-inline-start: -3rem; } &:hover { .sd-sidebar-menu__main-icon { - left: 4rem; + inset-inline-start: 4rem; } .sd-sidebar-menu__helper-icon { - left: 0.5rem; + inset-inline-start: 0.5rem; } } } @@ -129,8 +129,8 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20); .sd-sidetab-menu { position: absolute; - bottom: 0; - top: 0; + inset-block-end: 0; + inset-block-start: 0; width: $sd-sidebarMenu-width; background-color: $sd-sideTabMenu-background; z-index: 16; @@ -146,7 +146,7 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20); } .sd-sidetab-menu--right { - right: 0; + inset-inline-end: 0; box-shadow: inset 4px 0 5px -3px rgba(0, 0, 0, 0.25); } @@ -212,8 +212,8 @@ i.sd-sidetab-menu__helper-icon { .sd-sidetab-menu__info-label { position: absolute; - top: 0.3rem; - right: 0.3rem; + inset-block-start: 0.3rem; + inset-inline-end: 0.3rem; text-shadow: none; z-index: 3; margin: 0; @@ -235,14 +235,14 @@ i.sd-sidetab-menu__helper-icon { opacity: 0; height: 0.8rem; width: 0.8rem; - left: 2.0rem; + inset-inline-start: 2.0rem; font-size: 8px; i { opacity: 0; height: 0.8rem; width: 0.8rem; - left: 2.0rem; + inset-inline-start: 2.0rem; font-size: 8px; } } @@ -270,7 +270,7 @@ i.sd-sidetab-menu__helper-icon { opacity: 0; //height:0.8rem; //width:0.8rem; - //left: 2.0rem; + //inset-inline-start: 2.0rem; font-size: 8px; i { @@ -278,7 +278,7 @@ i.sd-sidetab-menu__helper-icon { height: 0.8rem !important; width: 0.8rem !important; font-size: 8px !important; - //left: 2.0rem + //inset-inline-start: 2.0rem } } } @@ -318,14 +318,14 @@ i.sd-sidetab-menu__helper-icon { .sd-side-menu__helper-icon, .sd-side-menu__main-icon { position: absolute; - top: 0.5rem; - left: 0.5rem; + inset-block-start: 0.5rem; + inset-inline-start: 0.5rem; } .sd-side-menu__helper-icon { opacity: 0; margin: 0; - left: 0.6rem; + inset-inline-start: 0.6rem; width: 2.4rem; height: 2.4rem; font-size: 2.4rem; @@ -341,8 +341,8 @@ i.sd-sidetab-menu__helper-icon { .sd-side-menu__info-label { position: absolute; - top: 0.3rem; - right: 0.3rem; + inset-block-start: 0.3rem; + inset-inline-end: 0.3rem; text-shadow: none; z-index: 3; margin: 0; @@ -363,7 +363,7 @@ i.sd-sidetab-menu__helper-icon { // opacity: 0; // height:0.8rem; // width:0.8rem; -// left: 2.0rem; +// inset-inline-start: 2.0rem; // font-size: 8px; // } // } @@ -386,7 +386,7 @@ i.sd-sidetab-menu__helper-icon { opacity: 0; height: 0.8rem; width: 0.8rem; - left: 2.0rem; + inset-inline-start: 2.0rem; font-size: 8px; } } @@ -400,7 +400,7 @@ i.sd-sidetab-menu__helper-icon { position: relative; ul { - margin-top: 24px; + margin-block-start: 24px; } } diff --git a/app/styles/menus/_sd-top-menu.scss b/app/styles/menus/_sd-top-menu.scss index 58d9fe2c..45e651b8 100644 --- a/app/styles/menus/_sd-top-menu.scss +++ b/app/styles/menus/_sd-top-menu.scss @@ -4,11 +4,11 @@ $sd-topMenu-background: var(--sd-colour-top-menu); background: $sd-topMenu-background; height: $nav-height; position: absolute; - right: 0; - left: 0; - top: 0; + inset-inline-end: 0; + inset-inline-start: 0; + inset-block-start: 0; z-index: $zindexFixedNavbar; - margin-bottom: 0; + margin-block-end: 0; transition: all 0.3s ease; display: flex; flex-direction: row; @@ -73,14 +73,14 @@ $sd-topMenu-background: var(--sd-colour-top-menu); .label { position: absolute; - top: 3px; - left: 3px; + inset-block-start: 3px; + inset-inline-start: 3px; text-shadow: none; } } .current-user-details--compact { - @include sd-padding('1'); + padding: var(--space--1); display: flex; flex-direction: column; justify-content: center; diff --git a/app/styles/primereact/_pr-autocomplete.scss b/app/styles/primereact/_pr-autocomplete.scss index 10252b14..5b9cb38c 100644 --- a/app/styles/primereact/_pr-autocomplete.scss +++ b/app/styles/primereact/_pr-autocomplete.scss @@ -8,7 +8,7 @@ .p-autocomplete-panel { @include pr-dropdown-panel-base; - margin-top: 16px; + margin-block-start: 16px; padding: 1rem 0; .p-autocomplete-items { diff --git a/app/styles/primereact/_pr-datepicker.scss b/app/styles/primereact/_pr-datepicker.scss index d034592f..8ef72c78 100644 --- a/app/styles/primereact/_pr-datepicker.scss +++ b/app/styles/primereact/_pr-datepicker.scss @@ -1,7 +1,7 @@ .p-datepicker { @include pr-dropdown-panel-base; padding: 12px; - margin-top: 1px; + margin-block-start: 1px; .p-datepicker-title { text-transform: uppercase; @@ -17,7 +17,7 @@ flex-wrap: wrap; padding: .8em 4px; min-height: 32px; - margin-bottom: 8px; + margin-block-end: 8px; .p-datepicker-prev, .p-datepicker-next { @@ -56,7 +56,7 @@ display: flex; justify-content: center; align-items: center; - margin-bottom: 16px; + margin-block-end: 16px; gap: $sd-base-increment; button { @@ -79,7 +79,7 @@ .p-datepicker-year { font-weight: 400; - margin-top: 4px; + margin-block-start: 4px; color: var(--color-text-light); } @@ -120,8 +120,8 @@ height: 32px; border-radius: $border-radius__base--x-small; font-weight: normal; - margin-left: 4px; - margin-right: 4px; + margin-inline-start: 4px; + margin-inline-end: 4px; transition: $sd-transition__menu-item; } @@ -133,8 +133,8 @@ height: 24px; text-align: center; font-weight: normal; - margin-left: 4px; - margin-right: 4px; + margin-inline-start: 4px; + margin-inline-end: 4px; } // selected date style @@ -177,7 +177,7 @@ .p-calendar-icon { pointer-events: none; } - border-bottom: 1px dotted var(--color-input-border); + border-block-end: 1px dotted var(--color-input-border); background-color: var(--color-input-bg); } } @@ -199,7 +199,7 @@ [class^="icon-"], [class*=" icon-"] { color: var(--color-text); - margin-top: -2px; + margin-block-start: -2px; opacity: 0.75; } @@ -214,7 +214,7 @@ } .p-datepicker-calendar { - margin-bottom: 8px; + margin-block-end: 8px; } .p-datepicker-today > span { diff --git a/app/styles/primereact/_pr-dialog.scss b/app/styles/primereact/_pr-dialog.scss index ac1e5a28..0e3f0080 100644 --- a/app/styles/primereact/_pr-dialog.scss +++ b/app/styles/primereact/_pr-dialog.scss @@ -7,8 +7,8 @@ .p-dialog-mask { position: fixed; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; width: 100%; height: 100%; display: none; @@ -216,7 +216,7 @@ } .p-dialog .p-dialog-header { - border-bottom: 0 none; + border-block-end: 0 none; background: transparent; position: relative; z-index: 1012; @@ -227,7 +227,7 @@ } .p-dialog .p-dialog-header .p-dialog-title { - @include sd-padding('2', 'right'); + padding-inline-end: var(--space--2); font-size: 1.8rem; font-weight: 300; line-height: 27px; @@ -241,7 +241,7 @@ background: transparent; border-radius: $border-radius__base--full; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - margin-right: 0; + margin-inline-end: 0; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -256,7 +256,7 @@ } .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { - margin-right: 0; + margin-inline-end: 0; } .p-dialog .p-dialog-content { @@ -269,7 +269,7 @@ } .p-dialog .p-dialog-footer { - border-top: 0 none; + border-block-start: 0 none; background-color: transparent; padding: 0.8rem 1.6rem; text-align: end; diff --git a/app/styles/primereact/_pr-dropdown.scss b/app/styles/primereact/_pr-dropdown.scss index cf521326..5eab86f7 100644 --- a/app/styles/primereact/_pr-dropdown.scss +++ b/app/styles/primereact/_pr-dropdown.scss @@ -127,7 +127,7 @@ font-size: 1.6rem; flex-grow: 0; flex-shrink: 0; - margin-left: 1px; + margin-inline-start: 1px; opacity: 0.4; transition: color .1s ease-out, opacity .1s ease-out; diff --git a/app/styles/primereact/_pr-general.scss b/app/styles/primereact/_pr-general.scss index d3358c61..234443d7 100644 --- a/app/styles/primereact/_pr-general.scss +++ b/app/styles/primereact/_pr-general.scss @@ -37,7 +37,7 @@ display: inline-flex; align-items: center; min-height: $height-input--default; - border-bottom: 1px solid var(--color-input-border); + border-block-end: 1px solid var(--color-input-border); background-color: var(--color-input-bg); font-size: 1.4rem; transition: border linear 0.2s, box-shadow linear 0.2s; diff --git a/app/styles/primereact/_pr-menu.scss b/app/styles/primereact/_pr-menu.scss index 17d51825..25d0f7e1 100644 --- a/app/styles/primereact/_pr-menu.scss +++ b/app/styles/primereact/_pr-menu.scss @@ -1,7 +1,7 @@ .p-tieredmenu { &, .p-submenu-list { - padding-top: $sd-base-increment; - padding-bottom: $sd-base-increment; + padding-block-start: $sd-base-increment; + padding-block-end: $sd-base-increment; background-color: var(--color-dropdown-menu-Bg); box-shadow: $shadow__dropdown--default; border-radius: $border-radius__base--small; @@ -31,7 +31,7 @@ } .p-menuitem-icon { - margin-right: 0.8rem; + margin-inline-end: 0.8rem; color: var(--color-icon-default); } } diff --git a/app/styles/primereact/_pr-skeleton.scss b/app/styles/primereact/_pr-skeleton.scss index 6e722356..b7737328 100644 --- a/app/styles/primereact/_pr-skeleton.scss +++ b/app/styles/primereact/_pr-skeleton.scss @@ -8,10 +8,10 @@ content: ""; animation: p-skeleton-animation 1.2s infinite; height: 100%; - left: 0; + inset-inline-start: 0; position: absolute; - right: 0; - top: 0; + inset-inline-end: 0; + inset-block-start: 0; transform: translateX(-100%); z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); diff --git a/app/styles/primereact/_pr-tag-input.scss b/app/styles/primereact/_pr-tag-input.scss index c30cb297..365697f5 100644 --- a/app/styles/primereact/_pr-tag-input.scss +++ b/app/styles/primereact/_pr-tag-input.scss @@ -10,7 +10,7 @@ background: $tag-label-BG-default; color: currentColor; padding: 5px; - border-left: 20px; + border-inline-start: 20px; border-radius: 30px; &.selected { @@ -51,7 +51,7 @@ .tags-input__padding-disabled { span { - padding-left: 0; + padding-inline-start: 0; padding-inline: 4px; } } diff --git a/examples/pages/playgrounds/react-playgrounds/TestGround.tsx b/examples/pages/playgrounds/react-playgrounds/TestGround.tsx index 4dbcc300..ad319549 100644 --- a/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +++ b/examples/pages/playgrounds/react-playgrounds/TestGround.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as Components from './components/Index'; -import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew} from '../../../../app-typescript/index'; +import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading} from '../../../../app-typescript/index'; import { Carousel } from '../../../../app-typescript/index'; import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel'; @@ -91,10 +91,31 @@ export class TestGround extends React.Component { +
+ + Curabitur blandit tempus porttitor. + + Praesent commodo cursus magna, vel scelerisque nisl consectetur et... + + +