fix(list): fix nested bullet position - FRONT-3847 (#2745)

Co-authored-by: planctus <davidepuntoferrante@gmail.com>
ec-europa · Feb 1, 2023 · ecf1357 · ecf1357
1 parent 789a21d
commit ecf1357
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }