From 760e146c69c2180a0d43aa92fe345167275e52d5 Mon Sep 17 00:00:00 2001 From: emeryro Date: Wed, 6 Apr 2022 09:45:16 +0200 Subject: [PATCH 1/6] update components --- .../news-ticker/news-ticker.html.twig | 4 ++- .../components/accordion/accordion-ec.scss | 4 +-- .../components/accordion/accordion-eu.scss | 28 +++++++++---------- .../components/accordion/accordion-print.scss | 2 +- .../components/blockquote/_blockquote.scss | 25 +++++++++-------- .../components/blockquote/blockquote-ec.scss | 3 +- .../components/blockquote/blockquote-eu.scss | 3 +- .../category-filter/_category-filter.scss | 10 +++---- .../fact-figures/_fact-figures.scss | 16 +++++------ .../language-list/_language-list.scss | 2 +- .../components/message/_message-print.scss | 18 ++++++------ .../vanilla/components/message/_message.scss | 17 ++++++----- .../components/message/message-ec.scss | 3 +- .../components/message/message-eu.scss | 5 ++-- .../components/message/message-print-ec.scss | 3 +- .../components/message/message-print-eu.scss | 5 ++-- .../components/news-ticker/_news-ticker.scss | 10 ++++--- .../components/pagination/_pagination.scss | 14 +++++----- .../components/timeline/_timeline.scss | 24 ++++++++-------- .../vanilla/layout/grid/grid.scss | 8 +++--- .../vanilla/layout/grid/mixins/_grid.scss | 22 +++++++-------- src/presets/rtl/src/rtl.scss | 25 +++++++++++++++++ 22 files changed, 148 insertions(+), 103 deletions(-) diff --git a/src/implementations/twig/components/news-ticker/news-ticker.html.twig b/src/implementations/twig/components/news-ticker/news-ticker.html.twig index 0a0f7f11685..f621aae33a3 100644 --- a/src/implementations/twig/components/news-ticker/news-ticker.html.twig +++ b/src/implementations/twig/components/news-ticker/news-ticker.html.twig @@ -90,7 +90,9 @@ extra_classes: 'ecl-news-ticker__icon', } only %}
- 1 {{ _counter_label }} {{_items|length}} + 1 + {{- ' ' -}}{{- _counter_label }}{{- ' ' -}} + {{_items|length}}
{% include '@ecl/button/button.html.twig' with { diff --git a/src/implementations/vanilla/components/accordion/accordion-ec.scss b/src/implementations/vanilla/components/accordion/accordion-ec.scss index 57ef23000b3..db772186196 100644 --- a/src/implementations/vanilla/components/accordion/accordion-ec.scss +++ b/src/implementations/vanilla/components/accordion/accordion-ec.scss @@ -33,7 +33,7 @@ font-weight: map.get(theme.$font-weight, 'bold'); padding: 0 map.get(theme.$spacing, 'm'); position: relative; - text-align: left; + text-align: start; width: 100%; } @@ -80,7 +80,7 @@ .ecl-accordion__content { color: map.get(theme.$color, 'grey'); font: map.get(theme.$font-prolonged, 'm'); - margin-left: 0; + margin-inline-start: 0; padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm'); } diff --git a/src/implementations/vanilla/components/accordion/accordion-eu.scss b/src/implementations/vanilla/components/accordion/accordion-eu.scss index 3ac7da604f1..d051cf6b32a 100644 --- a/src/implementations/vanilla/components/accordion/accordion-eu.scss +++ b/src/implementations/vanilla/components/accordion/accordion-eu.scss @@ -21,8 +21,8 @@ &:first-child { &::before { background-color: map.get(theme.$color, 'yellow-100'); - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-end-start-radius: 2px; + border-end-end-radius: 2px; content: ''; height: 4px; left: map.get(theme.$spacing, 'l'); @@ -32,28 +32,28 @@ } .ecl-accordion__toggle { - border-top-left-radius: 8px; - border-top-right-radius: 8px; + border-start-start-radius: 8px; + border-start-end-radius: 8px; } } &:last-child { .ecl-accordion__toggle { border-bottom-color: transparent; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + border-end-start-radius: 8px; + border-end-end-radius: 8px; &[aria-expanded='true'] { border-bottom-color: map.get(theme.$color, 'blue-20'); - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; } } .ecl-accordion__content { border-bottom: 0; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + border-end-start-radius: 8px; + border-end-end-radius: 8px; overflow: hidden; } } @@ -73,7 +73,7 @@ font: map.get(theme.$font-prolonged, 'l'); padding: map.get(theme.$spacing, 'l'); position: relative; - text-align: left; + text-align: start; width: 100%; } @@ -105,7 +105,7 @@ display: flex; flex-grow: 0; flex-shrink: 0; - margin-left: map.get(theme.$spacing, 's'); + margin-inline-start: map.get(theme.$spacing, 's'); order: 2; padding: 2px 0; @@ -128,10 +128,10 @@ .ecl-accordion__content { border-bottom: 2px solid map.get(theme.$color, 'blue-20'); - border-left: 4px solid map.get(theme.$color, 'blue'); + border-inline-start: 4px solid map.get(theme.$color, 'blue'); color: map.get(theme.$color, 'grey-80'); font: map.get(theme.$font-prolonged, 'm'); - margin-left: 0; + margin-inline-start: 0; padding: map.get(theme.$spacing, 'l'); } diff --git a/src/implementations/vanilla/components/accordion/accordion-print.scss b/src/implementations/vanilla/components/accordion/accordion-print.scss index ac4a28509c5..52e2618063f 100644 --- a/src/implementations/vanilla/components/accordion/accordion-print.scss +++ b/src/implementations/vanilla/components/accordion/accordion-print.scss @@ -34,7 +34,7 @@ font-family: #{map.get(theme.$font-family-print, 'alt')}; font-weight: map.get(theme.$font-weight-print, 'bold'); padding: 0; - text-align: left; + text-align: start; width: 100%; } diff --git a/src/implementations/vanilla/components/blockquote/_blockquote.scss b/src/implementations/vanilla/components/blockquote/_blockquote.scss index 7ae89a3dc07..751302f274c 100644 --- a/src/implementations/vanilla/components/blockquote/_blockquote.scss +++ b/src/implementations/vanilla/components/blockquote/_blockquote.scss @@ -8,7 +8,8 @@ @use '@ecl/vanilla-layout-grid/mixins/breakpoints'; $_border-width: null !default; -$_border-radius: null !default; +$_border-radius-top-left: null !default; +$_border-radius-bottom-left: null !default; $_border-color: null !default; $_body-font-mobile: null !default; $_body-font-tablet: null !default; @@ -25,11 +26,12 @@ $_text-max-width: 65ch; // Approximately 80 characters with the current font .ecl-blockquote, %ecl-blockquote { - border-left: $_border-width solid $_border-color; - border-radius: $_border-radius; + border-inline-start: $_border-width solid $_border-color; + border-start-start-radius: $_border-radius-top-left; + border-end-start-radius: $_border-radius-bottom-left; margin: 0; padding-bottom: map.get(theme.$spacing, 's'); - padding-left: $_padding-left-mobile; + padding-inline-start: $_padding-left-mobile; padding-top: map.get(theme.$spacing, 's'); } @@ -80,7 +82,7 @@ $_text-max-width: 65ch; // Approximately 80 characters with the current font .ecl-blockquote, %ecl-blockquote { padding-bottom: map.get(theme.$spacing, 'm'); - padding-left: map.get(theme.$spacing, 'l'); + padding-inline-start: map.get(theme.$spacing, 'l'); padding-top: map.get(theme.$spacing, 'm'); } @@ -106,20 +108,21 @@ $_text-max-width: 65ch; // Approximately 80 characters with the current font @include breakpoints.up('l') { .ecl-blockquote, %ecl-blockquote { - border-left: 0; + border-inline-start: 0; display: flex; flex-direction: row-reverse; - justify-content: left; + justify-content: start; padding: 0; } .ecl-blockquote__body, %ecl-blockquote { - border-left: $_border-width solid $_border-color; - border-radius: $_border-radius; + border-inline-start: $_border-width solid $_border-color; + border-start-start-radius: $_border-radius-top-left; + border-end-start-radius: $_border-radius-bottom-left; display: inline-block; padding-bottom: map.get(theme.$spacing, 'm'); - padding-left: map.get(theme.$spacing, 'l'); + padding-inline-start: map.get(theme.$spacing, 'l'); padding-top: map.get(theme.$spacing, 'm'); } @@ -142,7 +145,7 @@ $_text-max-width: 65ch; // Approximately 80 characters with the current font .ecl-blockquote__image, %ecl-blockquote__image { - margin-right: map.get(theme.$spacing, 'l'); + margin-inline-end: map.get(theme.$spacing, 'l'); margin-top: 0; } } diff --git a/src/implementations/vanilla/components/blockquote/blockquote-ec.scss b/src/implementations/vanilla/components/blockquote/blockquote-ec.scss index 2c5a2ec5170..624d87da74d 100644 --- a/src/implementations/vanilla/components/blockquote/blockquote-ec.scss +++ b/src/implementations/vanilla/components/blockquote/blockquote-ec.scss @@ -3,7 +3,8 @@ @use 'blockquote' with ( $_border-width: 10px, $_border-color: map.get(theme.$color, 'yellow-100'), - $_border-radius: 0, + $_border-radius-top-left: 0, + $_border-radius-bottom-left: 0, $_padding-left-mobile: map.get(theme.$spacing, 'l'), $_body-font-mobile: map.get(theme.$font-prolonged, 'm'), $_body-font-tablet: map.get(theme.$font-prolonged, 'm'), diff --git a/src/implementations/vanilla/components/blockquote/blockquote-eu.scss b/src/implementations/vanilla/components/blockquote/blockquote-eu.scss index f7d525186b0..8e19c515342 100644 --- a/src/implementations/vanilla/components/blockquote/blockquote-eu.scss +++ b/src/implementations/vanilla/components/blockquote/blockquote-eu.scss @@ -3,7 +3,8 @@ @use 'blockquote' with ( $_border-width: 8px, $_border-color: map.get(theme.$color, 'blue-100'), - $_border-radius: 4px 0 0 4px, + $_border-radius-top-left: 4px, + $_border-radius-bottom-left: 4px, $_padding-left-mobile: map.get(theme.$spacing, 'm'), $_body-font-mobile: map.get(theme.$font-prolonged, 'l'), $_body-font-tablet: map.get(theme.$font, '2xl'), diff --git a/src/implementations/vanilla/components/category-filter/_category-filter.scss b/src/implementations/vanilla/components/category-filter/_category-filter.scss index ce596197569..001fa9d13d6 100644 --- a/src/implementations/vanilla/components/category-filter/_category-filter.scss +++ b/src/implementations/vanilla/components/category-filter/_category-filter.scss @@ -51,25 +51,25 @@ $_outline-width: 3px !default; &.ecl-category-filter__item--level-2 { justify-content: initial; - padding-left: map.get(theme.$spacing, 'xl'); + padding-inline-start: map.get(theme.$spacing, 'xl'); &.ecl-category-filter__item--has-children { - padding-left: map.get(theme.$spacing, 'xs'); + padding-inline-start: map.get(theme.$spacing, 'xs'); } } &.ecl-category-filter__item--level-3 { justify-content: initial; - padding-left: map.get(theme.$spacing, '3xl'); + padding-inline-start: map.get(theme.$spacing, '3xl'); &.ecl-category-filter__item--has-children { - padding-left: map.get(theme.$spacing, 'l'); + padding-inline-start: map.get(theme.$spacing, 'l'); } } &.ecl-category-filter__item--level-4 { justify-content: initial; - padding-left: map.get(theme.$spacing, '4xl'); + padding-inline-start: map.get(theme.$spacing, '4xl'); } } diff --git a/src/implementations/vanilla/components/fact-figures/_fact-figures.scss b/src/implementations/vanilla/components/fact-figures/_fact-figures.scss index 57f435a2f9d..977b6182e3a 100644 --- a/src/implementations/vanilla/components/fact-figures/_fact-figures.scss +++ b/src/implementations/vanilla/components/fact-figures/_fact-figures.scss @@ -32,16 +32,16 @@ $_view-all-padding-vertical: null !default; .ecl-fact-figures__items { padding-bottom: map.get(theme.$spacing, 'xl'); - padding-left: $_items-padding-horizontal-mobile; - padding-right: $_items-padding-horizontal-mobile; + padding-inline-start: $_items-padding-horizontal-mobile; + padding-inline-end: $_items-padding-horizontal-mobile; padding-top: 0; } .ecl-fact-figures__item { box-sizing: border-box; font: map.get(theme.$font, 'm'); - padding-left: map.get(theme.$spacing, 'm'); - padding-right: map.get(theme.$spacing, 'm'); + padding-inline-start: map.get(theme.$spacing, 'm'); + padding-inline-end: map.get(theme.$spacing, 'm'); padding-top: map.get(theme.$spacing, 'xl'); } @@ -77,8 +77,8 @@ $_view-all-padding-vertical: null !default; .ecl-fact-figures__view-all { border-top: 1px solid $_view-all-border-color; font: map.get(theme.$font, 'm'); - margin-left: $_view-all-margin-horizontal; - margin-right: $_view-all-margin-horizontal; + margin-inline-start: $_view-all-margin-horizontal; + margin-inline-end: $_view-all-margin-horizontal; padding-bottom: $_view-all-padding-vertical; padding-top: $_view-all-padding-vertical; } @@ -88,8 +88,8 @@ $_view-all-padding-vertical: null !default; .ecl-fact-figures__items { display: flex; flex-wrap: wrap; - padding-left: $_items-padding-horizontal-desktop; - padding-right: $_items-padding-horizontal-desktop; + padding-inline-start: $_items-padding-horizontal-desktop; + padding-inline-end: $_items-padding-horizontal-desktop; } .ecl-fact-figures__item { diff --git a/src/implementations/vanilla/components/language-list/_language-list.scss b/src/implementations/vanilla/components/language-list/_language-list.scss index af77d4de43b..9bd1f087bca 100644 --- a/src/implementations/vanilla/components/language-list/_language-list.scss +++ b/src/implementations/vanilla/components/language-list/_language-list.scss @@ -203,7 +203,7 @@ $_padding-list-splash-desktop: null !default; } .ecl-language-list__title-icon { - margin-right: map.get(theme.$spacing, 'm'); + margin-inline-end: map.get(theme.$spacing, 'm'); } /* stylelint-disable-next-line order/order */ diff --git a/src/implementations/vanilla/components/message/_message-print.scss b/src/implementations/vanilla/components/message/_message-print.scss index a0fcb8eeb8b..afe5026ce59 100644 --- a/src/implementations/vanilla/components/message/_message-print.scss +++ b/src/implementations/vanilla/components/message/_message-print.scss @@ -10,7 +10,8 @@ $_background-error: none !default; $_background-info: none !default; $_background-success: none !default; $_background-warning: none !default; -$_border-radius: none !default; +$_border-radius-top-left: none !default; +$_border-radius-bottom-left: none !default; $_border-width: none !default; $_description-color: none !default; $_icon-spacing: none !default; @@ -23,20 +24,21 @@ $_title-font: none !default; $_title-spacing: none !default; .ecl-message { - border-radius: $_border-radius; - border-style: solid; - border-width: $_border-width; + border-inline-start: $_border-width solid; + border-end-start-radius: $_border-radius-bottom-left; + border-start-start-radius: $_border-radius-top-left; display: inline-flex; margin: 0; - padding: map.get(theme.$spacing-print, 'l') - map.get(theme.$spacing-print, 'xs') map.get(theme.$spacing-print, 'l') - map.get(theme.$spacing-print, 'l'); + padding-bottom: map.get(theme.$spacing-print, 'l'); + padding-inline-end: map.get(theme.$spacing-print, 'xs'); + padding-inline-start: map.get(theme.$spacing-print, 'l'); + padding-top: map.get(theme.$spacing-print, 'l'); } .ecl-message__icon { display: block; flex-shrink: 0; - margin-right: $_icon-spacing; + margin-inline-end: $_icon-spacing; } .ecl-message__close { diff --git a/src/implementations/vanilla/components/message/_message.scss b/src/implementations/vanilla/components/message/_message.scss index 0bd927d568c..92e959830b2 100644 --- a/src/implementations/vanilla/components/message/_message.scss +++ b/src/implementations/vanilla/components/message/_message.scss @@ -11,7 +11,8 @@ $_background-error: none !default; $_background-info: none !default; $_background-success: none !default; $_background-warning: none !default; -$_border-radius: none !default; +$_border-radius-top-left: none !default; +$_border-radius-bottom-left: none !default; $_border-width: none !default; $_close-color: map.get(theme.$color, 'blue-100'); $_close-font-weight: none !default; @@ -26,20 +27,22 @@ $_title-font: none !default; $_title-spacing: none !default; .ecl-message { - border-radius: $_border-radius; - border-style: solid; - border-width: $_border-width; + border-inline-start: $_border-width solid; + border-end-start-radius: $_border-radius-bottom-left; + border-start-start-radius: $_border-radius-top-left; box-sizing: border-box; display: flex; margin: 0; - padding: map.get(theme.$spacing, 'l') map.get(theme.$spacing, 'xs') - map.get(theme.$spacing, 'l') map.get(theme.$spacing, 'l'); + padding-bottom: map.get(theme.$spacing, 'l'); + padding-inline-end: map.get(theme.$spacing, 'xs'); + padding-inline-start: map.get(theme.$spacing, 'l'); + padding-top: map.get(theme.$spacing, 'l'); position: relative; } .ecl-message__icon { flex-shrink: 0; - margin-right: $_icon-spacing; + margin-inline-end: $_icon-spacing; } .ecl-message__content { diff --git a/src/implementations/vanilla/components/message/message-ec.scss b/src/implementations/vanilla/components/message/message-ec.scss index cba33cd6b34..fec26574013 100644 --- a/src/implementations/vanilla/components/message/message-ec.scss +++ b/src/implementations/vanilla/components/message/message-ec.scss @@ -5,7 +5,8 @@ $_background-info: map.get(theme.$color, 'white'), $_background-success: map.get(theme.$color, 'white'), $_background-warning: map.get(theme.$color, 'white'), - $_border-radius: 0, + $_border-radius-top-left: 0, + $_border-radius-bottom-left: 0, $_border-width: 2px, $_close-font-weight: map.get(theme.$font-weight, 'bold'), $_description-color: map.get(theme.$color, 'grey-100'), diff --git a/src/implementations/vanilla/components/message/message-eu.scss b/src/implementations/vanilla/components/message/message-eu.scss index 03025be94af..81ce072a37d 100644 --- a/src/implementations/vanilla/components/message/message-eu.scss +++ b/src/implementations/vanilla/components/message/message-eu.scss @@ -5,8 +5,9 @@ $_background-info: map.get(theme.$color, 'blue-5'), $_background-success: map.get(theme.$color, 'green-5'), $_background-warning: map.get(theme.$color, 'orange-5'), - $_border-radius: 4px 0 0 4px, - $_border-width: 0 0 0 4px, + $_border-radius-top-left: 4px, + $_border-radius-bottom-left: 4px, + $_border-width: 4px, $_close-font-weight: map.get(theme.$font-weight, 'normal'), $_description-color: map.get(theme.$color, 'grey-80'), $_icon-error-fill: map.get(theme.$color, 'red-120'), diff --git a/src/implementations/vanilla/components/message/message-print-ec.scss b/src/implementations/vanilla/components/message/message-print-ec.scss index 88dd895fc1e..270448d16a5 100644 --- a/src/implementations/vanilla/components/message/message-print-ec.scss +++ b/src/implementations/vanilla/components/message/message-print-ec.scss @@ -5,7 +5,8 @@ $_background-info: map.get(theme.$color, 'white'), $_background-success: map.get(theme.$color, 'white'), $_background-warning: map.get(theme.$color, 'white'), - $_border-radius: 0, + $_border-radius-top-left: 0, + $_border-radius-bottom-left: 0, $_border-width: 0.5mm, $_description-color: map.get(theme.$color, 'grey-100'), $_icon-spacing: map.get(theme.$spacing-print, 'm'), diff --git a/src/implementations/vanilla/components/message/message-print-eu.scss b/src/implementations/vanilla/components/message/message-print-eu.scss index cab302d0337..a5cf16e2b66 100644 --- a/src/implementations/vanilla/components/message/message-print-eu.scss +++ b/src/implementations/vanilla/components/message/message-print-eu.scss @@ -5,8 +5,9 @@ $_background-info: map.get(theme.$color, 'blue-5'), $_background-success: map.get(theme.$color, 'green-5'), $_background-warning: map.get(theme.$color, 'orange-5'), - $_border-width: 0 0 0 1mm, - $_border-radius: 1mm 0 0 1mm, + $_border-radius-top-left: 1mm, + $_border-radius-bottom-left: 1mm, + $_border-width: 1mm, $_description-color: map.get(theme.$color, 'grey-80'), $_icon-spacing: map.get(theme.$spacing-print, 'xs'), $_icon-error-fill: map.get(theme.$color, 'red-120'), diff --git a/src/implementations/vanilla/components/news-ticker/_news-ticker.scss b/src/implementations/vanilla/components/news-ticker/_news-ticker.scss index e56fcfe7618..3229f8c3c82 100644 --- a/src/implementations/vanilla/components/news-ticker/_news-ticker.scss +++ b/src/implementations/vanilla/components/news-ticker/_news-ticker.scss @@ -45,7 +45,7 @@ $_btn-padding-horizontal: map.get(theme.$spacing, 's') !default; .ecl-news-ticker__content { height: 0; margin: map.get(theme.$spacing, 's'); - margin-left: calc(#{map.get(theme.$spacing, 's')} - 5px); + margin-inline-start: calc(#{map.get(theme.$spacing, 's')} - 5px); overflow: hidden; transition-duration: 0.3s; width: 100%; @@ -69,12 +69,14 @@ $_btn-padding-horizontal: map.get(theme.$spacing, 's') !default; .ecl-news-ticker__counter { color: $_counter-color; + display: inline-flex; flex-grow: 1; font: map.get(theme.$font, 'm'); font-weight: bold; - margin-left: map.get(theme.$spacing, 'l'); - margin-right: map.get(theme.$spacing, 'xs'); - text-align: right; + margin-inline-start: map.get(theme.$spacing, 'l'); + margin-inline-end: map.get(theme.$spacing, 'xs'); + text-align: end; + white-space: pre-wrap; } .ecl-news-ticker__controls { diff --git a/src/implementations/vanilla/components/pagination/_pagination.scss b/src/implementations/vanilla/components/pagination/_pagination.scss index 7eb6cb48128..673246a7a04 100644 --- a/src/implementations/vanilla/components/pagination/_pagination.scss +++ b/src/implementations/vanilla/components/pagination/_pagination.scss @@ -26,8 +26,8 @@ $_current-border-width: null !default; padding-bottom: calc( #{map.get(theme.$spacing, 'm')} - #{map.get(theme.$spacing, '2xs')} ); - padding-left: map.get(theme.$spacing, 'm'); - padding-right: map.get(theme.$spacing, 'm'); + padding-inline-start: map.get(theme.$spacing, 'm'); + padding-inline-end: map.get(theme.$spacing, 'm'); padding-top: calc( #{map.get(theme.$spacing, 'm')} - #{map.get(theme.$spacing, '2xs')} ); @@ -39,7 +39,7 @@ $_current-border-width: null !default; justify-content: space-between; list-style: none; margin: 0; - padding-left: 0; + padding-inline-start: 0; position: relative; } @@ -81,8 +81,8 @@ $_current-border-width: null !default; /* stylelint-disable-next-line order/order */ @include breakpoints.up('m') { .ecl-pagination { - padding-left: 0; - padding-right: 0; + padding-inline-start: 0; + padding-inline-end: 0; } .ecl-pagination__list { @@ -92,12 +92,12 @@ $_current-border-width: null !default; .ecl-pagination__item { display: flex; flex-grow: 0; - margin-right: calc( + margin-inline-end: calc( #{map.get(theme.$spacing, 'l')} - (2 * #{map.get(theme.$spacing, '2xs')}) ); &:last-child { - margin-right: 0; + margin-inline-end: 0; } } diff --git a/src/implementations/vanilla/components/timeline/_timeline.scss b/src/implementations/vanilla/components/timeline/_timeline.scss index 28badde0a22..be3b5d83d00 100644 --- a/src/implementations/vanilla/components/timeline/_timeline.scss +++ b/src/implementations/vanilla/components/timeline/_timeline.scss @@ -42,25 +42,27 @@ $_title-margin: null !default; // Timeline structure .ecl-timeline { list-style: none; - margin: 0 map.get(theme.$spacing, 'l') 0 - ( - map.get(theme.$spacing, 'l') + math.div($_bullet-size, 2) + - $_bullet-border-width - ); + margin-bottom: 0; + margin-inline-end: map.get(theme.$spacing, 'l'); + margin-inline-start: ( + map.get(theme.$spacing, 'l') + math.div($_bullet-size, 2) + + $_bullet-border-width + ); + margin-top: 0; max-width: 633px; - padding-left: 0; + padding-inline-start: 0; } .ecl-timeline__item { padding-bottom: map.get(theme.$spacing, 'l'); - padding-left: map.get(theme.$spacing, 'm') + ($_bullet-size * 0.5) + + padding-inline-start: map.get(theme.$spacing, 'm') + ($_bullet-size * 0.5) + $_bullet-border-width; padding-top: $_item-padding-top; position: relative; // Border &::before { - border-left: $_border-width solid $_border-color; + border-inline-start: $_border-width solid $_border-color; content: ''; height: 100%; left: -($_border-width * 0.5); @@ -88,8 +90,8 @@ $_title-margin: null !default; /* stylelint-disable-next-line order/order */ @include breakpoints.up('s') { .ecl-timeline { - margin-left: $_timeline-margin-left; - margin-right: map.get(theme.$spacing, 'xs'); + margin-inline-start: $_timeline-margin-left; + margin-inline-end: map.get(theme.$spacing, 'xs'); } } @@ -98,7 +100,7 @@ $_title-margin: null !default; padding-top: map.get(theme.$spacing, 'xs'); &::before { - border-left-style: dashed; + border-inline-start-style: dashed; } &::after { diff --git a/src/implementations/vanilla/layout/grid/grid.scss b/src/implementations/vanilla/layout/grid/grid.scss index 83914bd5914..4f64f2aaec7 100644 --- a/src/implementations/vanilla/layout/grid/grid.scss +++ b/src/implementations/vanilla/layout/grid/grid.scss @@ -20,13 +20,13 @@ // Remove the negative margin from default .row, then the horizontal padding // from all immediate children columns (to prevent runaway style inheritance). .ecl-no-gutters { - margin-left: 0; - margin-right: 0; + margin-inline-start: 0; + margin-inline-end: 0; > .ecl-col, > [class*='ecl-col-'] { - padding-left: 0; - padding-right: 0; + padding-inline-start: 0; + padding-inline-end: 0; } } diff --git a/src/implementations/vanilla/layout/grid/mixins/_grid.scss b/src/implementations/vanilla/layout/grid/mixins/_grid.scss index 4a67f2bc7a5..7fb753c5aad 100644 --- a/src/implementations/vanilla/layout/grid/mixins/_grid.scss +++ b/src/implementations/vanilla/layout/grid/mixins/_grid.scss @@ -9,8 +9,8 @@ @mixin ecl-make-container($gutters: theme.$grid-gutter-width) { box-sizing: border-box; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; position: relative; width: 100%; @@ -18,8 +18,8 @@ @include breakpoints.up($breakpoint) { $gutter: map.get($gutters, $breakpoint); - padding-left: ($gutter * 0.5); - padding-right: ($gutter * 0.5); + padding-inline-start: ($gutter * 0.5); + padding-inline-end: ($gutter * 0.5); } } } @@ -42,8 +42,8 @@ @include breakpoints.up($breakpoint) { $gutter: map.get($gutters, $breakpoint); - padding-left: ($gutter * 0.5); - padding-right: ($gutter * 0.5); + padding-inline-start: ($gutter * 0.5); + padding-inline-end: ($gutter * 0.5); } } } @@ -57,8 +57,8 @@ @include breakpoints.up($breakpoint) { $gutter: map.get($gutters, $breakpoint); - margin-left: math.div($gutter, -2); - margin-right: math.div($gutter, -2); + margin-inline-start: math.div($gutter, -2); + margin-inline-end: math.div($gutter, -2); } } } @@ -77,8 +77,8 @@ @include breakpoints.up($breakpoint) { $gutter: map.get($gutters, $breakpoint); - padding-left: ($gutter * 0.5); - padding-right: ($gutter * 0.5); + padding-inline-start: ($gutter * 0.5); + padding-inline-end: ($gutter * 0.5); } } } @@ -94,7 +94,7 @@ } @mixin make-col-offset($size, $columns: map.get($grid, 'columns')) { - margin-left: math.percentage(math.div($size, $columns)); + margin-inline-start: math.percentage(math.div($size, $columns)); } @mixin make-col-push($size, $columns: map.get($grid, 'columns')) { diff --git a/src/presets/rtl/src/rtl.scss b/src/presets/rtl/src/rtl.scss index 806775ffbba..6169655cdcd 100644 --- a/src/presets/rtl/src/rtl.scss +++ b/src/presets/rtl/src/rtl.scss @@ -5,6 +5,12 @@ html { direction: rtl; } +// Accordion +.ecl-accordion__item:first-child::before { + left: auto; + right: map.get(theme.$spacing, 'l'); +} + // Carousel .ecl-carousel__next { left: 0; @@ -16,6 +22,16 @@ html { right: 0; } +// Category filter +.ecl-category-filter__list-item[aria-expanded='true'], +.ecl-category-filter__list-item:hover, +.ecl-category-filter__item--current { + &::before { + left: auto; + right: 0; + } +} + // Datepicker .ecl-datepicker__icon { right: auto; @@ -98,3 +114,12 @@ html { right: 0; transform: rotate(180deg) translateY(50%); } + +// Timeline +.ecl-timeline__item { + transform: scaleX(-1); +} + +.ecl-timeline__tooltip { + transform: scaleX(-1); +} From ff1d1a687bed36be3cd9b1bf25d9b2e6c148ad54 Mon Sep 17 00:00:00 2001 From: emeryro Date: Wed, 6 Apr 2022 11:55:32 +0200 Subject: [PATCH 2/6] update components --- src/presets/rtl/src/rtl.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/presets/rtl/src/rtl.scss b/src/presets/rtl/src/rtl.scss index 6169655cdcd..a8f763f547b 100644 --- a/src/presets/rtl/src/rtl.scss +++ b/src/presets/rtl/src/rtl.scss @@ -116,10 +116,20 @@ html { } // Timeline -.ecl-timeline__item { +.ecl-timeline, +.ecl-timeline__label, +.ecl-timeline__title, +.ecl-timeline__content, +.ecl-timeline__toggle { transform: scaleX(-1); } .ecl-timeline__tooltip { - transform: scaleX(-1); + padding-inline-end: 1.5rem; +} + +.ecl-timeline__item--toggle { + display: flex; + justify-content: end; + padding-inline-end: 1.5rem; } From 86ba7e67878646b25d7b4c643e9310fe3e985a1c Mon Sep 17 00:00:00 2001 From: emeryro Date: Mon, 11 Apr 2022 10:54:00 +0200 Subject: [PATCH 3/6] update --- .../vanilla/components/accordion/accordion-ec.scss | 11 ++++++++--- .../vanilla/components/message/_message-print.scss | 6 +++++- .../vanilla/components/message/_message.scss | 6 +++++- .../vanilla/components/message/message-ec.scss | 7 ++++++- .../vanilla/components/message/message-eu.scss | 7 ++++++- .../vanilla/components/message/message-print-ec.scss | 7 ++++++- .../vanilla/components/message/message-print-eu.scss | 7 ++++++- src/presets/rtl/src/rtl.scss | 7 +++++++ 8 files changed, 49 insertions(+), 9 deletions(-) diff --git a/src/implementations/vanilla/components/accordion/accordion-ec.scss b/src/implementations/vanilla/components/accordion/accordion-ec.scss index db772186196..7ed859b48e2 100644 --- a/src/implementations/vanilla/components/accordion/accordion-ec.scss +++ b/src/implementations/vanilla/components/accordion/accordion-ec.scss @@ -60,8 +60,10 @@ display: flex; flex-grow: 0; flex-shrink: 0; - margin: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm') - map.get(theme.$spacing, 's') 0; + margin-bottom: map.get(theme.$spacing, 's'); + margin-inline-start: 0; + margin-inline-end: map.get(theme.$spacing, 'm'); + margin-top: map.get(theme.$spacing, 's'); } .ecl-accordion__toggle-label { @@ -81,7 +83,10 @@ color: map.get(theme.$color, 'grey'); font: map.get(theme.$font-prolonged, 'm'); margin-inline-start: 0; - padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm'); + padding-bottom: map.get(theme.$spacing, 's'); + padding-inline-end: map.get(theme.$spacing, 'm'); + padding-inline-start: map.get(theme.$spacing, 'm'); + padding-top: map.get(theme.$spacing, 's'); } .no-js .ecl-accordion__content { diff --git a/src/implementations/vanilla/components/message/_message-print.scss b/src/implementations/vanilla/components/message/_message-print.scss index afe5026ce59..389d1c2cb92 100644 --- a/src/implementations/vanilla/components/message/_message-print.scss +++ b/src/implementations/vanilla/components/message/_message-print.scss @@ -24,9 +24,13 @@ $_title-font: none !default; $_title-spacing: none !default; .ecl-message { - border-inline-start: $_border-width solid; + border-bottom-width: map.get($_border-width, 'bottom'); border-end-start-radius: $_border-radius-bottom-left; + border-inline-end-width: map.get($_border-width, 'right'); + border-inline-start-width: map.get($_border-width, 'left'); border-start-start-radius: $_border-radius-top-left; + border-style: solid; + border-top-width: map.get($_border-width, 'top'); display: inline-flex; margin: 0; padding-bottom: map.get(theme.$spacing-print, 'l'); diff --git a/src/implementations/vanilla/components/message/_message.scss b/src/implementations/vanilla/components/message/_message.scss index 92e959830b2..aec2b9ed144 100644 --- a/src/implementations/vanilla/components/message/_message.scss +++ b/src/implementations/vanilla/components/message/_message.scss @@ -27,9 +27,13 @@ $_title-font: none !default; $_title-spacing: none !default; .ecl-message { - border-inline-start: $_border-width solid; + border-bottom-width: map.get($_border-width, 'bottom'); border-end-start-radius: $_border-radius-bottom-left; + border-inline-end-width: map.get($_border-width, 'right'); + border-inline-start-width: map.get($_border-width, 'left'); border-start-start-radius: $_border-radius-top-left; + border-style: solid; + border-top-width: map.get($_border-width, 'top'); box-sizing: border-box; display: flex; margin: 0; diff --git a/src/implementations/vanilla/components/message/message-ec.scss b/src/implementations/vanilla/components/message/message-ec.scss index fec26574013..229a0a6befe 100644 --- a/src/implementations/vanilla/components/message/message-ec.scss +++ b/src/implementations/vanilla/components/message/message-ec.scss @@ -7,7 +7,12 @@ $_background-warning: map.get(theme.$color, 'white'), $_border-radius-top-left: 0, $_border-radius-bottom-left: 0, - $_border-width: 2px, + $_border-width: ( + 'top': 2px, + 'right': 2px, + 'bottom': 2px, + 'left': 2px, + ), $_close-font-weight: map.get(theme.$font-weight, 'bold'), $_description-color: map.get(theme.$color, 'grey-100'), $_icon-error-fill: map.get(theme.$color, 'error'), diff --git a/src/implementations/vanilla/components/message/message-eu.scss b/src/implementations/vanilla/components/message/message-eu.scss index 81ce072a37d..92943c626f3 100644 --- a/src/implementations/vanilla/components/message/message-eu.scss +++ b/src/implementations/vanilla/components/message/message-eu.scss @@ -7,7 +7,12 @@ $_background-warning: map.get(theme.$color, 'orange-5'), $_border-radius-top-left: 4px, $_border-radius-bottom-left: 4px, - $_border-width: 4px, + $_border-width: ( + 'top': 0, + 'right': 0, + 'bottom': 0, + 'left': 4px, + ), $_close-font-weight: map.get(theme.$font-weight, 'normal'), $_description-color: map.get(theme.$color, 'grey-80'), $_icon-error-fill: map.get(theme.$color, 'red-120'), diff --git a/src/implementations/vanilla/components/message/message-print-ec.scss b/src/implementations/vanilla/components/message/message-print-ec.scss index 270448d16a5..373e2e4de0e 100644 --- a/src/implementations/vanilla/components/message/message-print-ec.scss +++ b/src/implementations/vanilla/components/message/message-print-ec.scss @@ -7,7 +7,12 @@ $_background-warning: map.get(theme.$color, 'white'), $_border-radius-top-left: 0, $_border-radius-bottom-left: 0, - $_border-width: 0.5mm, + $_border-width: ( + 'top': 0.5mm, + 'right': 0.5mm, + 'bottom': 0.5mm, + 'left': 0.5mm, + ), $_description-color: map.get(theme.$color, 'grey-100'), $_icon-spacing: map.get(theme.$spacing-print, 'm'), $_icon-error-fill: map.get(theme.$color, 'error'), diff --git a/src/implementations/vanilla/components/message/message-print-eu.scss b/src/implementations/vanilla/components/message/message-print-eu.scss index a5cf16e2b66..cfb191931b6 100644 --- a/src/implementations/vanilla/components/message/message-print-eu.scss +++ b/src/implementations/vanilla/components/message/message-print-eu.scss @@ -7,7 +7,12 @@ $_background-warning: map.get(theme.$color, 'orange-5'), $_border-radius-top-left: 1mm, $_border-radius-bottom-left: 1mm, - $_border-width: 1mm, + $_border-width: ( + 'top': 0, + 'right': 0, + 'bottom': 0, + 'left': 1mm, + ), $_description-color: map.get(theme.$color, 'grey-80'), $_icon-spacing: map.get(theme.$spacing-print, 'xs'), $_icon-error-fill: map.get(theme.$color, 'red-120'), diff --git a/src/presets/rtl/src/rtl.scss b/src/presets/rtl/src/rtl.scss index a8f763f547b..d30827126ab 100644 --- a/src/presets/rtl/src/rtl.scss +++ b/src/presets/rtl/src/rtl.scss @@ -86,6 +86,13 @@ html { right: auto; } +// Skip link +.ecl-skip-link:active, +.ecl-skip-link:focus { + left: auto; + right: map.get(theme.$spacing, 'l'); +} + // Table .ecl-table__arrow { left: auto; From ab9fb0af30023af0cfb5621720f7ae3a447580f5 Mon Sep 17 00:00:00 2001 From: emeryro Date: Mon, 11 Apr 2022 10:57:25 +0200 Subject: [PATCH 4/6] udpate tests --- .../__snapshots__/news-ticker.test.js.snap | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/implementations/twig/components/news-ticker/__snapshots__/news-ticker.test.js.snap b/src/implementations/twig/components/news-ticker/__snapshots__/news-ticker.test.js.snap index 6ae42b42884..897a7f98bc7 100644 --- a/src/implementations/twig/components/news-ticker/__snapshots__/news-ticker.test.js.snap +++ b/src/implementations/twig/components/news-ticker/__snapshots__/news-ticker.test.js.snap @@ -102,8 +102,12 @@ exports[`News ticker Default renders correctly 1`] = ` > 1 - of 6 - + of + + 6 +
1 - of 6 - + of + + 6 +
1 - of 6 - + of + + 6 +
Date: Mon, 11 Apr 2022 15:08:47 +0200 Subject: [PATCH 5/6] fix timeline --- src/presets/rtl/src/rtl.scss | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/presets/rtl/src/rtl.scss b/src/presets/rtl/src/rtl.scss index d30827126ab..235794bfb71 100644 --- a/src/presets/rtl/src/rtl.scss +++ b/src/presets/rtl/src/rtl.scss @@ -131,12 +131,21 @@ html { transform: scaleX(-1); } -.ecl-timeline__tooltip { - padding-inline-end: 1.5rem; +.ecl-timeline__tooltip, +.ecl-timeline__item { + padding-inline-end: map.get(theme.$spacing, 'l'); } .ecl-timeline__item--toggle { display: flex; justify-content: end; - padding-inline-end: 1.5rem; + padding-inline-end: map.get(theme.$spacing, 'l'); +} + +.ecl-timeline__label { + text-align: start; +} + +.ecl-timeline__tooltip::before { + right: map.get(theme.$spacing, 'l'); } From 03195ed5b1f6fb34dd8931ee153b56189693e8a4 Mon Sep 17 00:00:00 2001 From: emeryro Date: Mon, 11 Apr 2022 15:35:12 +0200 Subject: [PATCH 6/6] fix timeline --- src/presets/rtl/src/rtl.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/presets/rtl/src/rtl.scss b/src/presets/rtl/src/rtl.scss index 235794bfb71..e55f813517c 100644 --- a/src/presets/rtl/src/rtl.scss +++ b/src/presets/rtl/src/rtl.scss @@ -147,5 +147,5 @@ html { } .ecl-timeline__tooltip::before { - right: map.get(theme.$spacing, 'l'); + left: map.get(theme.$spacing, 'l'); }