EZP-30150: Updated UIGuidelines Icons sample (#532)

ibexa · Feb 21, 2019 · faeec9e · faeec9e
1 parent 60cdef5
commit faeec9e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/docs/css/ez-guidelines-icons.css b/docs/css/ez-guidelines-icons.css
@@ -22,6 +22,9 @@
     width: 4em;
     height: 4em;
 }
+.ez-guidelines .ez-icon.ez-icon--dark {
+    fill: #333;
+}
 .ez-guidelines .ez-icon.ez-icon--light {
     fill: #fff;
 }

diff --git a/docs/guidelines/resources/icons.md b/docs/guidelines/resources/icons.md
@@ -52,6 +52,17 @@ code_example]]
 </svg>
 code_example]]
 
+###<div class="mgt-2">Colored icons - dark</div>
+<div class="mgt-minus-3 mgb-5">Add class `ez-icon--dark` to modify the color fill of an icon to the Sass variable defined for white, `$ez-black`.</div>
+<div class="ez-guidelines-icons__colored">
+[[code_example {html}
+<svg class="ez-icon ez-icon--medium ez-icon--dark ez-icon-content-draft">
+    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#content-draft"></use>
+</svg>
+</button>
+code_example]]
+</div>
+
 ###<div class="mgt-2">Colored icons - white</div>
 <div class="mgt-minus-3 mgb-5">Add class `ez-icon--light` to modify the color fill of an icon to the Sass variable defined for white, `$ez-white`.</div>
 <div class="ez-guidelines-icons__colored">