From ecf1357f117acfdcb1b173b5935a9d4b26243ca7 Mon Sep 17 00:00:00 2001 From: Romain Emery Date: Wed, 1 Feb 2023 14:48:29 +0100 Subject: [PATCH] fix(list): fix nested bullet position - FRONT-3847 (#2745) Co-authored-by: planctus --- .../components/ordered-list/_ordered-list.scss | 1 + .../components/unordered-list/_unordered-list.scss | 2 ++ src/presets/ec/src/ec-default-print.scss | 13 +++++++++++-- src/presets/ec/src/ec-default.scss | 13 +++++++++++-- src/presets/eu/src/eu-default-print.scss | 13 +++++++++++-- src/presets/eu/src/eu-default.scss | 13 +++++++++++-- 6 files changed, 47 insertions(+), 8 deletions(-) diff --git a/src/implementations/vanilla/components/ordered-list/_ordered-list.scss b/src/implementations/vanilla/components/ordered-list/_ordered-list.scss index b45b49c0bde..44e31096811 100644 --- a/src/implementations/vanilla/components/ordered-list/_ordered-list.scss +++ b/src/implementations/vanilla/components/ordered-list/_ordered-list.scss @@ -18,6 +18,7 @@ $_text-color: null !default; } .ecl-ordered-list .ecl-ordered-list, +.ecl-ordered-list .ecl-unordered-list, %ecl-ordered-list--nested { margin-top: map.get(theme.$spacing, 'xs'); padding-inline-start: map.get(theme.$spacing, 'l'); diff --git a/src/implementations/vanilla/components/unordered-list/_unordered-list.scss b/src/implementations/vanilla/components/unordered-list/_unordered-list.scss index 276ff575455..0d86d9a9472 100644 --- a/src/implementations/vanilla/components/unordered-list/_unordered-list.scss +++ b/src/implementations/vanilla/components/unordered-list/_unordered-list.scss @@ -13,11 +13,13 @@ $_divider-color: null !default; %ecl-unordered-list { color: $_text-color; font: map.get(theme.$font-prolonged, 'm'); + list-style-position: outside; margin: 0; padding-inline-start: map.get(theme.$spacing, 's'); } .ecl-unordered-list .ecl-unordered-list, +.ecl-unordered-list .ecl-ordered-list, %ecl-unordered-list--nested { margin-top: map.get(theme.$spacing, 'xs'); padding-inline-start: map.get(theme.$spacing, 's'); diff --git a/src/presets/ec/src/ec-default-print.scss b/src/presets/ec/src/ec-default-print.scss index 0140ad2c191..81fa6358e73 100644 --- a/src/presets/ec/src/ec-default-print.scss +++ b/src/presets/ec/src/ec-default-print.scss @@ -64,7 +64,9 @@ } .ecl ul ul:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), -.ecl ul ul:is([class*='ecl-u-']) { +.ecl ul ul:is([class*='ecl-u-']), +.ecl ul ol:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), +.ecl ul ol:is([class*='ecl-u-']) { @extend %ecl-unordered-list--nested; } @@ -73,13 +75,20 @@ @extend %ecl-unordered-list__item; } +.ecl ul ol li:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), +.ecl ul ol li:is([class*='ecl-u-']) { + margin-inline-start: 0; +} + .ecl ol:not([class*='ecl-'], [class*='wt-']), .ecl ol:is([class*='ecl-u-']) { @extend %ecl-ordered-list; } .ecl ol ol:not([class*='ecl-'], [class*='wt-']), -.ecl ol ol:is([class*='ecl-u-']) { +.ecl ol ol:is([class*='ecl-u-']), +.ecl ol ul:not([class*='ecl-'], [class*='wt-']), +.ecl ol ul:is([class*='ecl-u-']) { @extend %ecl-ordered-list--nested; } diff --git a/src/presets/ec/src/ec-default.scss b/src/presets/ec/src/ec-default.scss index f9d6f856b31..a5a6b03a5a7 100644 --- a/src/presets/ec/src/ec-default.scss +++ b/src/presets/ec/src/ec-default.scss @@ -64,7 +64,9 @@ } .ecl ul ul:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), -.ecl ul ul:is([class*='ecl-u-']) { +.ecl ul ul:is([class*='ecl-u-']), +.ecl ul ol:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), +.ecl ul ol:is([class*='ecl-u-']) { @extend %ecl-unordered-list--nested; } @@ -73,13 +75,20 @@ @extend %ecl-unordered-list__item; } +.ecl ul ol li:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), +.ecl ul ol li:is([class*='ecl-u-']) { + margin-inline-start: 0; +} + .ecl ol:not([class*='ecl-'], [class*='wt-']), .ecl ol:is([class*='ecl-u-']) { @extend %ecl-ordered-list; } .ecl ol ol:not([class*='ecl-'], [class*='wt-']), -.ecl ol ol:is([class*='ecl-u-']) { +.ecl ol ol:is([class*='ecl-u-']), +.ecl ol ul:not([class*='ecl-'], [class*='wt-']), +.ecl ol ul:is([class*='ecl-u-']) { @extend %ecl-ordered-list--nested; } diff --git a/src/presets/eu/src/eu-default-print.scss b/src/presets/eu/src/eu-default-print.scss index 40853998316..50bce22d07c 100644 --- a/src/presets/eu/src/eu-default-print.scss +++ b/src/presets/eu/src/eu-default-print.scss @@ -64,7 +64,9 @@ } .ecl ul ul:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), -.ecl ul ul:is([class*='ecl-u-']) { +.ecl ul ul:is([class*='ecl-u-']), +.ecl ul ol:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), +.ecl ul ol:is([class*='ecl-u-']) { @extend %ecl-unordered-list--nested; } @@ -73,13 +75,20 @@ @extend %ecl-unordered-list__item; } +.ecl ul ol li:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), +.ecl ul ol li:is([class*='ecl-u-']) { + margin-inline-start: 0; +} + .ecl ol:not([class*='ecl-'], [class*='wt-']), .ecl ol:is([class*='ecl-u-']) { @extend %ecl-ordered-list; } .ecl ol ol:not([class*='ecl-'], [class*='wt-']), -.ecl ol ol:is([class*='ecl-u-']) { +.ecl ol ol:is([class*='ecl-u-']), +.ecl ol ul:not([class*='ecl-'], [class*='wt-']), +.ecl ol ul:is([class*='ecl-u-']) { @extend %ecl-ordered-list--nested; } diff --git a/src/presets/eu/src/eu-default.scss b/src/presets/eu/src/eu-default.scss index 83dd5944ca7..7aa900bf869 100644 --- a/src/presets/eu/src/eu-default.scss +++ b/src/presets/eu/src/eu-default.scss @@ -64,7 +64,9 @@ } .ecl ul ul:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), -.ecl ul ul:is([class*='ecl-u-']) { +.ecl ul ul:is([class*='ecl-u-']), +.ecl ul ol:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), +.ecl ul ol:is([class*='ecl-u-']) { @extend %ecl-unordered-list--nested; } @@ -73,13 +75,20 @@ @extend %ecl-unordered-list__item; } +.ecl ul ol li:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']), +.ecl ul ol li:is([class*='ecl-u-']) { + margin-inline-start: 0; +} + .ecl ol:not([class*='ecl-'], [class*='wt-']), .ecl ol:is([class*='ecl-u-']) { @extend %ecl-ordered-list; } .ecl ol ol:not([class*='ecl-'], [class*='wt-']), -.ecl ol ol:is([class*='ecl-u-']) { +.ecl ol ol:is([class*='ecl-u-']), +.ecl ol ul:not([class*='ecl-'], [class*='wt-']), +.ecl ol ul:is([class*='ecl-u-']) { @extend %ecl-ordered-list--nested; }