Merge pull request #530 from red-gate/tick-circle-list

add styles for list--tick-circle
red-gate · May 30, 2024 · 5072796 · 5072796
2 parents 6077165 + 788c0d4
commit 5072796
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 3 deletions.
diff --git a/dist/honeycomb.app.css b/dist/honeycomb.app.css
diff --git a/dist/honeycomb.css b/dist/honeycomb.css
diff --git a/dist/honeycomb.css.cheatsheet.html b/dist/honeycomb.css.cheatsheet.html
@@ -1534,6 +1534,8 @@ <h1>Honeycomb web toolkit class name cheatsheet</h1>
                         <li>.list--tick</li>
                         <li>.list--tick--large</li>
                         <li>.list--tick--large &gt; .list--bullet</li>
+                        <li>.list--tick-circle</li>
+                        <li>.list--tick-circle--large</li>
 
                     </ul>
                     <li>.main-heading</li>

diff --git a/docs/html-patterns/global/lists.htm b/docs/html-patterns/global/lists.htm
@@ -91,6 +91,22 @@ <h2 class="section-heading--honeycomb">Large tick list</h2>
                 <li>Fourth item</li>
             </ul>
 
+            <h2 class="section-heading--honeycomb">Tick circle list</h2>
+            <ul class="list--tick-circle">
+                <li>First item</li>
+                <li>Second item Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae laoreet odio. In tempor risus sed urna tincidunt vulputate. Cras scelerisque, massa nec malesuada dictum, urna metus dictum ante, eu mattis massa neque sed lorem. Sed id elit vel massa fermentum varius ut vitae massa. Nulla facilisi. Nunc nec elit feugiat, varius enim sit amet, pharetra ex. Quisque egestas magna id lacinia aliquet</li>
+                <li>Third item</li>
+                <li>Fourth item</li>
+            </ul>
+
+            <h2 class="section-heading--honeycomb">Large tick circle list</h2>
+            <ul class="list--tick-circle--large">
+                <li>First item</li>
+                <li>Second item Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae laoreet odio. In tempor risus sed urna tincidunt vulputate. Cras scelerisque, massa nec malesuada dictum, urna metus dictum ante, eu mattis massa neque sed lorem. Sed id elit vel massa fermentum varius ut vitae massa. Nulla facilisi. Nunc nec elit feugiat, varius enim sit amet, pharetra ex. Quisque egestas magna id lacinia aliquet</li>
+                <li>Third item</li>
+                <li>Fourth item</li>
+            </ul>
+
             <h2 class="section-heading--honeycomb">Example HTML</h2>
             <p data-height="500" data-theme-id="0" data-slug-hash="KwyWBG" data-default-tab="html" data-user="redgatewebteam" class='codepen'>See the Pen <a href='http://codepen.io/redgatewebteam/pen/KwyWBG/'>Redgate - HTML - Lists - Tick list</a> by Redgate Web Team (<a href='http://codepen.io/redgatewebteam'>@redgatewebteam</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "honeycomb-web-toolkit",
-  "version": "14.3.11",
+  "version": "14.3.12",
   "repository": {
     "type": "git",
     "url": "https://github.com/red-gate/honeycomb-web-toolkit"

diff --git a/src/list/css/objects/_honeycomb.list.objects.list.scss b/src/list/css/objects/_honeycomb.list.objects.list.scss
@@ -186,6 +186,34 @@ li > .list--bare {
     color: red;
 }
 
+/**
+ * Tick circle list
+ *
+*/
+.list--tick-circle {
+    @extend %list--icon;
+
+    & > li {
+        @extend .icon--tick-circle;
+
+        &:before {
+            color: color('red', 'brand');
+        }
+    }
+}
+
+.list--tick-circle--large {
+    @extend %list--icon;
+    @extend %list--icon--large;
+
+    & > li {
+        @extend .icon--tick-circle;
+
+        &:before {
+            color: color('red', 'brand');
+        }
+    }
+}
 
 
 /**