Skip to content

Commit

Permalink
feat(rtl): right-to-left batch 1 - FRONT-3565 (#2358)
Browse files Browse the repository at this point in the history 
* update components

* update component css

* update size

* fix js and update inpage-nav

Co-authored-by: Alexis Gaillard <a@bypopcorn.com>
  • Loading branch information
@emeryro @papegaill
emeryro and papegaill committed Mar 17, 2022
1 parent 2d2903e commit 8ca874b
Show file tree
Hide file tree
Showing 17 changed files with 111 additions and 79 deletions.
2 changes: 1 addition & 1 deletion .size-limit.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
{
"path": "dist/packages/eu/styles/ecl-eu.css",
"webpack": false,
"limit": "33 KB"
"limit": "34 KB"
},
{
"path": "dist/packages/eu/styles/ecl-eu-print.css",
Expand Down
39 changes: 20 additions & 19 deletions src/implementations/vanilla/components/card/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ $_list-padding: null !default;
background-size: cover;
display: block;
height: auto;
margin-left: $_image-margin;
margin-right: $_image-margin;
margin-inline-start: $_image-margin;
margin-inline-end: $_image-margin;
margin-top: $_image-margin;
width: calc(100% - (2 * #{$_image-margin}));

Expand All @@ -67,18 +67,19 @@ $_list-padding: null !default;
}

.ecl-card__meta-item {
border-right: 1px solid $_meta-color;
margin-right: map.get(theme.$spacing, 'xs');
padding-right: map.get(theme.$spacing, 'xs');
border-inline-end: 1px solid $_meta-color;
display: inline-block;
margin-inline-end: map.get(theme.$spacing, 'xs');
padding-inline-end: map.get(theme.$spacing, 'xs');

&:first-of-type {
text-transform: uppercase;
}

&:last-of-type {
border-right-width: 0;
margin-right: 0;
padding-right: 0;
border-inline-end-width: 0;
margin-inline-end: 0;
padding-inline-end: 0;
}
}

Expand Down Expand Up @@ -107,10 +108,10 @@ $_list-padding: null !default;

.ecl-card__label-item {
margin-bottom: map.get(theme.$spacing, 'm');
margin-right: map.get(theme.$spacing, 'xs');
margin-inline-end: map.get(theme.$spacing, 'xs');

&:last-child {
margin-right: 0;
margin-inline-end: 0;
}
}

Expand All @@ -134,7 +135,7 @@ $_list-padding: null !default;
}

.ecl-card__info-label {
margin-left: map.get(theme.$spacing, 'xs');
margin-inline-start: map.get(theme.$spacing, 'xs');
}

.ecl-card__link-container {
Expand Down Expand Up @@ -163,27 +164,27 @@ $_list-padding: null !default;
flex-wrap: wrap;
list-style: none;
margin-top: map.get(theme.$spacing, 'm');
padding-left: 0;
padding-inline-start: 0;
width: 100%;
}

.ecl-card__tag-item {
margin-right: map.get(theme.$spacing, 'xs');
margin-inline-end: map.get(theme.$spacing, 'xs');

&:last-child {
margin-right: 0;
margin-inline-end: 0;
}
}

.ecl-card__list {
border-top: $_taxonomy-container-border-top;
flex-direction: column;
margin-left: $_list-margin;
margin-right: $_list-margin;
margin-inline-start: $_list-margin;
margin-inline-end: $_list-margin;
margin-top: map.get(theme.$spacing, 'm');
max-width: 100%;
padding-left: $_list-padding;
padding-right: $_list-padding;
padding-inline-start: $_list-padding;
padding-inline-end: $_list-padding;
padding-top: map.get(theme.$spacing, 'm');

/* stylelint-disable plugin/selector-bem-pattern */
Expand All @@ -192,7 +193,7 @@ $_list-padding: null !default;
}

.ecl-description-list__definition {
margin-left: 0;
margin-inline-start: 0;
margin-top: map.get(theme.$spacing, 'xs');
width: auto;
}
Expand Down
14 changes: 7 additions & 7 deletions src/implementations/vanilla/components/card/card-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,15 @@
display: inline-flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0;
padding-inline-start: 0;
width: 100%;
}

.ecl-card__label-item {
margin-right: map.get(theme.$spacing-print, 'xs');
margin-inline-end: map.get(theme.$spacing-print, 'xs');

&:last-child {
margin-right: 0;
margin-inline-end: 0;
}
}

Expand All @@ -82,7 +82,7 @@

.ecl-icon {
display: block;
margin-right: map.get(theme.$spacing-print, 's');
margin-inline-end: map.get(theme.$spacing-print, 's');
}
}

Expand Down Expand Up @@ -117,10 +117,10 @@
}

.ecl-card__tag-item {
margin-right: map.get(theme.$spacing-print, 's');
margin-inline-end: map.get(theme.$spacing-print, 's');

&:last-child {
margin-right: 0;
margin-inline-end: 0;
}
}

Expand All @@ -140,7 +140,7 @@
}

.ecl-description-list__definition {
margin-left: 0;
margin-inline-start: 0;
margin-top: map.get(theme.$spacing-print, '2xs');
width: auto;
}
Expand Down
10 changes: 5 additions & 5 deletions src/implementations/vanilla/components/content-item/_content-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ $_border-radius: null !default;
.ecl-content-item__image {
flex-shrink: 0;
margin-bottom: 0;
margin-right: map.get(theme.$spacing, 'xl');
margin-inline-end: map.get(theme.$spacing, 'xl');
}

.ecl-content-item__image--l {
Expand Down Expand Up @@ -109,8 +109,8 @@ $_border-radius: null !default;
}

.ecl-content-item__image {
margin-left: map.get(theme.$spacing, 'xl');
margin-right: 0;
margin-inline-start: map.get(theme.$spacing, 'xl');
margin-inline-end: 0;
}
}
}
Expand All @@ -124,12 +124,12 @@ $_border-radius: null !default;
}

.ecl-content-item__date {
margin-right: map.get(theme.$spacing, 'm');
margin-inline-end: map.get(theme.$spacing, 'm');
}

// stylelint-disable-next-line order/order
@include breakpoints.up('l') {
.ecl-content-item__date {
margin-right: map.get(theme.$spacing, 'xl');
margin-inline-end: map.get(theme.$spacing, 'xl');
}
}
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/content-item/content-item-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

.ecl-content-item__image,
.ecl-content-item__date {
margin-right: map.get(theme.$spacing-print, 'xl');
margin-inline-end: map.get(theme.$spacing-print, 'xl');
}

.ecl-content-item .ecl-card__label-container {
Expand Down
8 changes: 4 additions & 4 deletions src/implementations/vanilla/components/inpage-navigation/_inpage-navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $_outline: null !default;
display: none;
padding: map.get($_trigger, 'padding');
position: relative;
text-align: left;
text-align: start;
width: 100%;

/* stylelint-disable-next-line order/order */
Expand Down Expand Up @@ -144,7 +144,7 @@ $_outline: null !default;
/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
background-color: map.get($_item, 'background', 'l');
border-left: $_active-link-border-width solid transparent;
border-inline-start: $_active-link-border-width solid transparent;
border-top: map.get($_item, 'separator', 'l');
color: map.get($_item, 'color', 'l');
font: map.get(theme.$font-prolonged, 'm');
Expand Down Expand Up @@ -186,7 +186,7 @@ $_outline: null !default;
/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
background-color: map.get($_item, 'background-active', 'l');
border-left-color: map.get(theme.$color, 'blue-100');
border-inline-start-color: map.get(theme.$color, 'blue-100');
color: map.get($_item, 'color-active', 'l');
}
}
Expand All @@ -204,7 +204,7 @@ $_outline: null !default;
/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
background-color: map.get(theme.$color, 'grey-10');
border-left-color: map.get(theme.$color, 'blue-100');
border-inline-start-color: map.get(theme.$color, 'blue-100');
color: map.get(theme.$color, 'grey-100');
}
}
Expand Down
4 changes: 3 additions & 1 deletion src/implementations/vanilla/components/inpage-navigation/inpage-navigation-ec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,9 @@ $toggle-width: calc(
map.get(theme.$color, 'blue-100') $toggle-width
),
'padding': calc(#{map.get(theme.$spacing, 's')} - #{$outline-width})
calc(#{$toggle-width} - #{$outline-width})
calc(
#{$toggle-width} + #{map.get(theme.$spacing, 'm')} - #{$outline-width}
)
calc(#{map.get(theme.$spacing, 's')} - #{$outline-width})
calc(#{map.get(theme.$spacing, 'm')} - #{$outline-width}),
'separator': 1px solid map.get(theme.$color, 'blue-120'),
Expand Down
4 changes: 3 additions & 1 deletion src/implementations/vanilla/components/inpage-navigation/inpage-navigation-eu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ $toggle-width: calc(
$_trigger: (
'background': map.get(theme.$color, 'blue-100'),
'padding': calc(#{map.get(theme.$spacing, 's')} - #{$outline-width})
calc(#{$toggle-width} - #{$outline-width})
calc(
#{$toggle-width} + #{map.get(theme.$spacing, 'm')} - #{$outline-width}
)
calc(#{map.get(theme.$spacing, 's')} - #{$outline-width})
calc(#{map.get(theme.$spacing, 's')} - #{$outline-width}),
'separator': none,
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/link/_link-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ $_negative-color: null !default;
.ecl-link::after {
content: '(' attr(href) ')';
font-style: italic;
margin-left: map.get(theme.$spacing-print, '2xs');
margin-inline-start: map.get(theme.$spacing-print, '2xs');
text-decoration: underline;
}

Expand Down
4 changes: 2 additions & 2 deletions src/implementations/vanilla/components/link/_link.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,11 @@ $_negative: null !default;
}

.ecl-link--icon-before .ecl-link__icon {
margin-right: map.get(theme.$spacing, 'xs');
margin-inline-end: map.get(theme.$spacing, 'xs');
}

.ecl-link--icon-after .ecl-link__icon {
margin-left: map.get(theme.$spacing, 'xs');
margin-inline-start: map.get(theme.$spacing, 'xs');
}

/**
Expand Down
4 changes: 2 additions & 2 deletions src/implementations/vanilla/components/list-illustration/_list-illustration-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ $_background-color: null !default;
}

.ecl-list-illustration__icon {
margin-right: map.get(theme.$spacing-print, 's');
margin-inline-end: map.get(theme.$spacing-print, 's');
}

// Vertical list
Expand All @@ -52,7 +52,7 @@ $_background-color: null !default;
}

.ecl-list-illustration__icon {
margin-right: map.get(theme.$spacing-print, 'xl');
margin-inline-end: map.get(theme.$spacing-print, 'xl');
}

.ecl-list-illustration__title-container {
Expand Down
6 changes: 3 additions & 3 deletions src/implementations/vanilla/components/list-illustration/_list-illustration.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ $_background-color: null !default;

.ecl-list-illustration__icon {
flex-shrink: 0;
margin-right: map.get(theme.$spacing, 's');
margin-inline-end: map.get(theme.$spacing, 's');
}

// Zebra
Expand Down Expand Up @@ -97,7 +97,7 @@ $_background-color: null !default;

.ecl-list-illustration__image {
margin-bottom: 0;
margin-right: map.get(theme.$spacing, 'xl');
margin-inline-end: map.get(theme.$spacing, 'xl');

&:not(.ecl-list-illustration__image--square) {
width: 15.875rem;
Expand All @@ -120,7 +120,7 @@ $_background-color: null !default;
}

.ecl-list-illustration__image {
margin-right: 0;
margin-inline-end: 0;
margin-bottom: map.get(theme.$spacing, 'm');
}

Expand Down
Loading

1 comment on commit 8ca874b

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v3--europa-component-library.netlify.app

Please sign in to comment.