Merge pull request #29 from magento-devdocs/master

Merge the list icons to the devdocs-stable branch
commerce-docs · Dec 17, 2018 · edabd81 · edabd81
2 parents 0e79c05 + 0b3633e
commit edabd81
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 1 deletion.
diff --git a/_scss/app.scss b/_scss/app.scss
@@ -37,6 +37,7 @@
 @import 'partials/tooltip';
 @import 'partials/popover';
 @import 'partials/ee-only';
+@import 'partials/list-icons';
 
 .hide {
   display: none;

diff --git a/_scss/partials/_list-icons.scss b/_scss/partials/_list-icons.scss
@@ -0,0 +1,25 @@
+// Custom list icons
+// Assign class name to the list item like this: * {:.fix} This is fixed
+
+li.new, li.fix {
+  list-style: none;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    top: .2em;
+    left: -1.5em;
+  }
+}
+
+li.new::before {
+  background: url(../i/icons/new.svg);
+}
+
+li.fix::before {
+  background: url(../i/icons/fix.svg);
+}
diff --git a/assets/css/app.css b/assets/css/app.css
diff --git a/assets/i/icons/fix.svg b/assets/i/icons/fix.svg
diff --git a/assets/i/icons/new.svg b/assets/i/icons/new.svg
diff --git a/example.md b/example.md
@@ -75,6 +75,11 @@ This is the example of an ordered list in our documentation.
 * Another unordered list item
 * Yet another list item
 
+### With Icons
+
+* {:.new} This list item is a new feature
+* {:.fix} This is a bugfix
+
 ## Images
 
 ![Alt text](http://via.placeholder.com/1000x500)