Skip to content

Commit

Permalink
Merge pull request #811 from fritzSF/develop
Browse files Browse the repository at this point in the history
[SDUF-96] RTL improvements: Replace physical properties and values…
  • Loading branch information
fritzSF authored Nov 2, 2023
2 parents 82fa8eb + 6e4a910 commit 94ee658
Show file tree
Hide file tree
Showing 85 changed files with 1,474 additions and 18,140 deletions.
2 changes: 1 addition & 1 deletion app/styles/_accessibility.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.a11y-only {
position: absolute;
top: 0;
inset-block-start: 0;
z-index: -1;
pointer-events: none;
opacity: 0 !important;
Expand Down
12 changes: 6 additions & 6 deletions app/styles/_alerts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
8 changes: 4 additions & 4 deletions app/styles/_avatar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -205,7 +205,7 @@

.sd-avatar--indicator-admin {
inset-block-start: -4px;
left: -6px;
inset-inline-start: -6px;
}
}

Expand All @@ -216,7 +216,7 @@

.sd-avatar--indicator-admin {
inset-block-start: -4px;
left: -6px;
inset-inline-start: -6px;
}
}

Expand Down Expand Up @@ -270,7 +270,7 @@
height: 14px;
width: 14px;
inset-block-start: 1px;
left: 5px;
inset-inline-start: 5px;
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions app/styles/_badge.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion app/styles/_big-icon-font.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 8 additions & 8 deletions app/styles/_boxed-list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -170,15 +170,15 @@ $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 {
align-items: baseline;
}

.boxed-list__item-content-row + .boxed-list__item-content-row {
margin-top: 0.8rem;
margin-block-start: 0.8rem;
}

.boxed-list__slide-in-actions,
Expand Down
34 changes: 17 additions & 17 deletions app/styles/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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;
Expand Down
40 changes: 20 additions & 20 deletions app/styles/_carousel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand All @@ -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 {
Expand All @@ -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;
}
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -157,7 +157,7 @@
}

.sd-carousel__nav-button--next {
right: -88px;
inset-inline-end: -88px;
color: inherit;

&::after {
Expand All @@ -166,7 +166,7 @@
}

.sd-carousel__nav-button--prev {
left: -88px;
inset-inline-start: -88px;
color: inherit;

&::after {
Expand All @@ -175,7 +175,7 @@
}

.sd-carousel__nav-button--end {
right: -88px;
inset-inline-end: -88px;
background-color: var(--sd-colour-success);

&::after {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Loading

0 comments on commit 94ee658

Please sign in to comment.