浏览代码

fix: list formatting multiline with fancy bullets (#1406)

* Fix list formatting multiline with fancy bullets

In kinda response to: https://github.com/Requarks/wiki/pull/1283 
Solves the problem with the list having issues with p elements and with multi lines but keeping the fancy css bullets.
Tested on Chrome, Firefox, Opera and Edge.

* remove important

* fix: bullet symbol for RTL

Co-authored-by: Nicolas Giard <github@ngpixel.com>
Aitor Rosell Torralba 5 年之前
父节点
当前提交
429c2673ca
共有 1 个文件被更改,包括 24 次插入4 次删除
  1. 24 4
      client/themes/default/scss/app.scss

+ 24 - 4
client/themes/default/scss/app.scss

@@ -312,8 +312,8 @@
   // ---------------------------------
 
   ol, ul {
-    padding: 1rem 0 0 1rem;
-    list-style-position: outside;
+	  padding: 1rem 0 0 0;
+     list-style-position: inside;
 
     @at-root .is-rtl & {
       padding-left: 0;
@@ -472,8 +472,28 @@
     }
   }
 
-  ul {
-    list-style: square outside;
+ul {
+    list-style: none;
+    width: 100%;
+    > li::before {
+      content: '\25b8';
+      color: mc('grey', '600');
+      display: inline-block;
+      width: 1.35rem;
+      
+      @at-root .is-rtl & {
+        content: '\25C0' ;
+      }
+    }
+    > li {
+      display:flex;
+      flex-wrap: wrap;
+      > p {
+        display:inline-block;
+        vertical-align:top;
+        padding-top:0;
+      }
+  }
   }
 
   // ---------------------------------