From 34ca2a892793f32e8a18c242814c1613548a8c81 Mon Sep 17 00:00:00 2001 From: David Elisma Date: Mon, 25 May 2020 12:52:13 -0400 Subject: [PATCH 1/3] feat(nav-pills): Initial commit --- working-on/navigation-pills/pills.css | 0 working-on/navigation-pills/pills.html | 0 working-on/navigation-pills/pills.js | 0 working-on/navigation-pills/pills.scss | 0 4 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 working-on/navigation-pills/pills.css create mode 100644 working-on/navigation-pills/pills.html create mode 100644 working-on/navigation-pills/pills.js create mode 100644 working-on/navigation-pills/pills.scss diff --git a/working-on/navigation-pills/pills.css b/working-on/navigation-pills/pills.css new file mode 100644 index 000000000..e69de29bb diff --git a/working-on/navigation-pills/pills.html b/working-on/navigation-pills/pills.html new file mode 100644 index 000000000..e69de29bb diff --git a/working-on/navigation-pills/pills.js b/working-on/navigation-pills/pills.js new file mode 100644 index 000000000..e69de29bb diff --git a/working-on/navigation-pills/pills.scss b/working-on/navigation-pills/pills.scss new file mode 100644 index 000000000..e69de29bb From 4b68d1e3f9bc70093a987843f27f0a7f561eed56 Mon Sep 17 00:00:00 2001 From: David Elisma Date: Mon, 25 May 2020 17:08:06 -0400 Subject: [PATCH 2/3] feat(nav-pills): Update pills.html --- working-on/navigation-pills/pills.html | 286 +++++++++++++++++++++++++ 1 file changed, 286 insertions(+) diff --git a/working-on/navigation-pills/pills.html b/working-on/navigation-pills/pills.html index e69de29bb..7155254dc 100644 --- a/working-on/navigation-pills/pills.html +++ b/working-on/navigation-pills/pills.html @@ -0,0 +1,286 @@ + + + + + + Checklist, checboxes and radio button experimentations - Canada.ca + + + + + + + + +
+ + +
+

Task navigation

+
+

Demo and code

+
+
+

Break up a service or content into sections that each focus on a step or specific answer they need to do before moving to the next step or section.

+
+
+
+
    +
  • Version: 0.1
    • +
  • Updated: May 25, 2020
    • +
+
+
+
+
+
+

Unordered tasks

+

When to use: Use unordered sections when you want to group related tasks that don't necessarily need to be done in sequence.

+
+
+ +
+
+
+ HTML +
+
+
+ 
+                  
+<div class="gc-stp-stp">
+  <div class="row">
+    <ul class="toc lst-spcd col-md-12">
+      <li class="col-md-4 col-sm-6">
+        <a class="list-group-item active">1. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6">
+        <a class="list-group-item" href="#">2. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6 clr-lft-sm">
+        <a class="list-group-item" href="#">3. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6 clr-lft-md clr-lft-lg">
+        <a class="list-group-item" href="#">4. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6 clr-lft-sm">
+        <a class="list-group-item" href="#">5. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6">
+        <a class="list-group-item" href="#">6. [Step / section page name]</a>
+      </li>
+    </ul>
+  </div>
+                  
+
+
+
+
+
+
+ CSS +
+
+ 
+                
+.gc-stp-stp {
+  border-bottom: solid 1px #ccc;
+  margin-bottom: 30px;
+  margin-top: 15px;
+}
+
+.toc li {
+  display: inline;
+  font-size: .85em;
+}
+
+.lst-spcd>li {
+  margin-bottom: 10px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+}
+
+.toc li .list-group-item.active,
+.toc li .list-group-item.active:focus,
+.toc li .list-group-item.active:hover {
+  background-color: #26374a;
+  color: #fff;
+  cursor: auto;
+  text-decoration: none;
+  z-index: 2;
+}
+
+.list-group-item.active,
+.list-group-item.active:focus,
+.list-group-item.active:hover {
+  z-index: 2;
+  color: #fff;
+  background-color: #2572b4;
+  border-color: #2572b4;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.list-group-item:first-child {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+                
+
+
+
+
+
+
+

Ordered steps

+

When to use: Use ordered steps when something must be done in a logical sequence.

+ + +
+ HTML +
+
+
+ 
+                  
+
+                  
+
+
+
+
+
+
+ CSS +
+
+ 
+                
+
+                
+
+
+
+
+
+ +
+ + +
+ + + + + + + + \ No newline at end of file From 2697ae99b26e3caf89d917f6f1701276f417af86 Mon Sep 17 00:00:00 2001 From: David Elisma Date: Tue, 26 May 2020 07:32:58 -0400 Subject: [PATCH 3/3] feat(nav-pills): Update pills.html --- working-on/navigation-pills/pills.html | 65 ++++++++++++-------------- 1 file changed, 29 insertions(+), 36 deletions(-) diff --git a/working-on/navigation-pills/pills.html b/working-on/navigation-pills/pills.html index 7155254dc..44a58dc80 100644 --- a/working-on/navigation-pills/pills.html +++ b/working-on/navigation-pills/pills.html @@ -3,7 +3,7 @@ - Checklist, checboxes and radio button experimentations - Canada.ca + Task navigation - Canada.ca @@ -90,33 +90,30 @@

Unordered tasks

- 
-                  
-<div class="gc-stp-stp">
-  <div class="row">
-    <ul class="toc lst-spcd col-md-12">
-      <li class="col-md-4 col-sm-6">
-        <a class="list-group-item active">1. [Step / section page name]</a>
-      </li>
-      <li class="col-md-4 col-sm-6">
-        <a class="list-group-item" href="#">2. [Step / section page name]</a>
-      </li>
-      <li class="col-md-4 col-sm-6 clr-lft-sm">
-        <a class="list-group-item" href="#">3. [Step / section page name]</a>
-      </li>
-      <li class="col-md-4 col-sm-6 clr-lft-md clr-lft-lg">
-        <a class="list-group-item" href="#">4. [Step / section page name]</a>
-      </li>
-      <li class="col-md-4 col-sm-6 clr-lft-sm">
-        <a class="list-group-item" href="#">5. [Step / section page name]</a>
-      </li>
-      <li class="col-md-4 col-sm-6">
-        <a class="list-group-item" href="#">6. [Step / section page name]</a>
-      </li>
-    </ul>
-  </div>
-                  
-
+ 
<div class="gc-stp-stp">
+  <div class="row">
+    <ul class="toc lst-spcd col-md-12">
+      <li class="col-md-4 col-sm-6">
+        <a class="list-group-item active">1. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6">
+        <a class="list-group-item" href="#">2. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6 clr-lft-sm">
+        <a class="list-group-item" href="#">3. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6 clr-lft-md clr-lft-lg">
+        <a class="list-group-item" href="#">4. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6 clr-lft-sm">
+        <a class="list-group-item" href="#">5. [Step / section page name]</a>
+      </li>
+      <li class="col-md-4 col-sm-6">
+        <a class="list-group-item" href="#">6. [Step / section page name]</a>
+      </li>
+    </ul>
+  </div>
+</div>
@@ -125,9 +122,7 @@

Unordered tasks

CSS
- 
-                
-.gc-stp-stp {
+              
.gc-stp-stp {
   border-bottom: solid 1px #ccc;
   margin-bottom: 30px;
   margin-top: 15px;
@@ -184,9 +179,7 @@ 
Unordered tasks

 a:not([href]) {
   color: inherit;
   text-decoration: none;
-}
-                
-              

+}
@@ -211,7 +204,7 @@

Ordered steps

- 
+                
                   
 
                   
@@ -224,7 +217,7 @@ 
Ordered steps

           CSS
           

             

-              
+