fix gutenberg list final

Author: cedric07

src/scss/03-base/_variables-css.scss

@@ -58,6 +58,10 @@
      */
     --wp-admin-bar-height: var(--wp-admin--admin-bar--height, 0rem);
 
+    body:not(.admin-bar) {
+        --wp-admin-bar-height: 0rem; // for wp admin bar hider extension
+    }
+
     /*
      * Alignments breakpoints
      */

src/scss/06-blocks/core/_list.scss

@@ -1,103 +1,108 @@
 // Use the no-list-style class in your theme if you want the basic style
 
-%marker {
-    font-size: var(--paragraph--font-size-default, $font-size-base);
-    font-weight: 400;
-    line-height: var(--paragraph--line-height-default, $line-height-base);
+%marker-ol-default {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1.3;
     color: $color-dark;
 }
 
+%marker-ul-default {
+    position: absolute;
+    top: 7px;
+    left: 0;
+    width: 6px;
+    height: 6px;
+    content: "";
+    background-color: $color-dark;
+    border-radius: 100%;
+
+    @include rtl {
+        right: -15px;
+        left: inherit;
+    }
+}
+
 #{context-selector('.blocks-container', '.is-root-container')} {
+    --offset-item: 30px;
+    --vertical-spaging-item: 16px;
+
     ul,
     ol {
-        &:not([class*="is-style-"]):not([class*="no-list-style"]):not([role="list"]) {
+        &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) {
             font-size: var(--paragraph--font-size-default, $font-size-base);
             line-height: var(--paragraph--line-height-default, $line-height-base);
 
-            li {
-                padding-left: 15px;
-                margin-left: 15px;
-
-                @include rtl {
-                    padding-right: 15px;
-                    padding-left: 0;
-                    margin-right: 15px;
-                    margin-left: 0;
-                }
-            }
-
             ul,
             ol {
-                margin-top: var(--spacing--block-1);
-                margin-bottom: var(--spacing--block-1);
+                margin-top: var(--vertical-spaging-item);
+                margin-bottom: var(--vertical-spaging-item);
             }
         }
     }
 
     ul {
-        &:not([class*="is-style-"]):not([class*="no-list-style"]):not([role="list"]) {
+        &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) {
+            list-style-type: none;
+
             li {
                 position: relative;
-                margin-bottom: calc(.5 * var(--spacing--block-1));
-                list-style-type: disc;
+                padding-left: var(--offset-item);
+                margin-bottom: var(--vertical-spaging-item);
 
-                &::marker {
-                    @extend %marker;
+                @include rtl {
+                    padding-right: var(--offset-item);
+                    padding-left: 0;
+                }
+
+                &::before {
+                    @extend %marker-ul-default;
                 }
             }
 
             ul {
-                margin-top: calc(.5 * var(--spacing--block-1));
-                margin-bottom: calc(.5 * var(--spacing--block-1));
+                margin-top: var(--vertical-spaging-item);
+                margin-bottom: var(--vertical-spaging-item);
             }
         }
     }
 
     ol {
-        &:not([class*="is-style-"]):not([class*="no-list-style"]):not([role="list"]) {
-            list-style: none;
-            counter-reset: section;
+        padding-left: 10px;
 
-            li {
-                position: relative;
-                margin-bottom: calc(.5 * var(--spacing--block-1));
-                counter-increment: section;
+        &:not([class*="no-list-style"]):not([role="list"]) {
+            > li {
+                padding-left: calc(var(--offset-item)  * .5);
+                margin-bottom: var(--vertical-spaging-item);
+                margin-left: calc(var(--offset-item)  * .5);
 
-                &::marker {
-                    @extend %marker;
-                    content: counters(section, "", decimal-leading-zero) " ";
+                @include rtl {
+                    padding-right: calc(var(--offset-item)  * .5);
+                    padding-left: 0;
+                    margin-right: calc(var(--offset-item)  * .5);
+                    margin-left: 0;
+                }
+            }
 
-                    @include rtl {
-                        right: 0;
-                        left: inherit;
-                        transform: translateX(100%);
-                    }
+            li {
+                &::marker {
+                    @extend %marker-ol-default;
                 }
 
                 ol {
-                    margin-top: calc(.5 * var(--spacing--block-1));
-                    margin-bottom: calc(.5 * var(--spacing--block-1));
-                    counter-reset: subsection;
-
-                    li {
-                        counter-increment: subsection;
-
-                        &::marker {
-                            content: counters(subsection, ".", lower-alpha) ". ";
-                        }
-                    }
+                    margin-top: var(--vertical-spaging-item);
+                    margin-bottom: var(--vertical-spaging-item);
                 }
 
                 ul {
-                    margin-top: calc(.5 * var(--spacing--block-1));
-                    margin-bottom: calc(.5 * var(--spacing--block-1));
-                    counter-reset: section;
+                    margin-top: var(--vertical-spaging-item);
+                    margin-bottom: var(--vertical-spaging-item);
 
                     li {
                         padding-top: 0;
 
-                        &::marker {
-                            @extend %marker;
+                        &::before {
+                            @extend %marker-ul-default;
                             transform: translateX(0);
                         }
                     }