assets/fonts/fontutti.svg

@@ -244,6 +244,8 @@
 
 <glyph glyph-name="users-alt" unicode="&#xe876;" d="M860 533q0-108-77-184t-184-76-184 76-76 184 76 183 184 77 184-77 77-183z m286-183q0-54-38-92t-93-38-92 38-38 92 38 92 92 38 93-38 38-92z m-131-161q80 0 131-34t52-79q0-22-53-40t-130-17q-42 0-82 6 0-2 0-7t1-7q0-41-96-72t-239-32q-150 0-242 32t-92 72q0 3 1 8t0 7q-50-7-83-7-82 0-132 17t-51 40q0 45 50 79t133 34q98 0 151-50 99 81 265 81t265-81q52 50 151 50z m-702 161q0-54-38-92t-92-38-93 38-37 92 37 92 93 38q53 0 91-38t39-92z" horiz-adv-x="1198" />
 
+<glyph glyph-name="asterisk" unicode="&#xe877;" d="M827 264q26-14 33-43t-7-55l-35-61q-15-26-44-33t-54 7l-149 85v-171q0-29-21-50t-50-22h-71q-29 0-51 22t-21 50v171l-148-85q-26-15-55-7t-43 33l-36 61q-14 26-7 55t34 43l148 86-148 86q-26 14-34 43t7 55l36 61q15 26 43 33t55-7l148-85v171q0 29 21 50t51 22h71q29 0 50-22t21-50v-171l149 85q26 15 54 7t44-33l35-61q15-26 7-55t-33-43l-148-86z" horiz-adv-x="928.6" />
+
 <glyph glyph-name="tv" unicode="&#xe8b2;" d="M167 600c-69 0-125-56-125-125l0-458c0-69 56-125 125-125l666 0c69 0 125 56 125 125l0 458c0 69-56 125-125 125l-666 0z m0-83l666 0c24 0 42-18 42-42l0-458c0-24-18-42-42-42l-666 0c-24 0-42 18-42 42l0 458c0 24 18 42 42 42z m126 291a42 42 0 0 1-31-12 42 42 0 0 1 0-59l209-208a42 42 0 0 1 59 0l208 208a42 42 0 0 1 0 59 42 42 0 0 1-59 0l-179-179-179 179a42 42 0 0 1-28 12z" horiz-adv-x="1000" />
 
 <glyph glyph-name="blender" unicode="&#xe8b7;" d="M642 288a145 145 0 0 0 53 103 176 176 0 0 0 113 40c44 0 84-15 114-40a146 146 0 0 0 52-103c3-42-14-82-44-111a174 174 0 0 0-122-48 174 174 0 0 0-122 48 143 143 0 0 0-44 111z m-265-83c0-16 5-48 13-72a378 378 0 0 1 82-141c39-44 87-78 143-103 58-26 122-39 188-39 65 0 129 13 187 40a425 425 0 0 1 143 103c38 42 66 90 82 141a358 358 0 0 1-39 301 398 398 0 0 1-96 104l-384 296-1 1a86 86 0 0 1-95 0c-28-20-32-53-7-73l161-131-489 0h-1c-40 0-79-27-87-60-8-34 20-63 62-63v0l247 0-442-339-2-1c-41-32-55-85-29-119 27-34 84-34 126 0l241 197s-3-26-3-42z m620-90a272 272 0 0 0-194-79c-76 0-145 28-195 79a232 232 0 0 0-53 83 220 220 0 0 0 14 181c15 26 35 50 59 70a276 276 0 0 0 174 61c65 0 126-21 175-61a240 240 0 0 0 59-70 220 220 0 0 0-39-264z" horiz-adv-x="1231" />

src/index.html

@@ -253,6 +253,107 @@
     </div>
 
     <div class="container">
+      <h2>Navigation pills</h2>
+      <div class="row">
+        <div class="col-12">
+          <h3>Horizontal</h3>
+          <p>
+            Navigation pills have a horizontal layout by default.
+          </p>
+          <div aria-orientation="horizontal" class="mb-4 nav nav-pills" role="tablist">
+            <a class="nav-pills-item active" href="#">
+              <i class="i-home"></i>
+              Home
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-user"></i>
+              Profile
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-users"></i>
+              Teams
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-lock"></i>
+              Tokens
+            </a>
+            <div class="nav-pills-divider"></div>
+            <a class="nav-pills-item " href="#">
+              <i class="i-heart"></i>
+              Favourites
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-layers"></i>
+              My Presentations
+            </a>
+          </div>
+        </div>
+      </div>
+      <h3>Vertical</h3>
+      <p>
+        Navigation pills have a vertical layout with the addition of the <code>flex-column</code> class.
+      </p>
+      <div class="row">
+        <aside class="col-4">
+          <div aria-orientation="vertical" class="flex-column mb-4 nav nav-pills" role="tablist">
+            <a class="nav-pills-item active" href="#">
+              <i class="i-home"></i>
+              Home
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-user"></i>
+              Profile
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-users"></i>
+              Teams
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-lock"></i>
+              Tokens
+            </a>
+            <div class="nav-pills-divider"></div>
+            <a class="nav-pills-item " href="#">
+              <i class="i-heart"></i>
+              Favourites
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-layers"></i>
+              My Presentations
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-tv"></i>
+              My Festival Entries
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-ticket"></i>
+              Tickets
+            </a>
+            <div class="nav-pills-divider"></div>
+            <a class="nav-pills-item " href="#">
+              <i class="i-activity"></i>
+              Sessions
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-link"></i>
+              Authenticated Apps
+            </a>
+            <div class="nav-pills-divider"></div>
+            <a class="nav-pills-item " href="#">
+              <i class="i-shield"></i>
+              Multi-factor Authentication
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-asterisk"></i>
+              Password
+            </a>
+            <a class="nav-pills-item " href="#">
+              <i class="i-trash"></i>
+              Delete Account
+            </a>
+          </div>
+        </aside>
+      </div>
       <h2>Notifications</h2>
       <div class="notifications">
         <button class="btn mb-3">Mark all as read</button>

src/styles/_font_fontutti.scss

@@ -1,4 +1,4 @@
-$font-hash: 'a2ab4950';
+$font-hash: '17c3eeb2';
 
 @font-face {
   font-family: 'fontutti';
@@ -166,6 +166,7 @@ $font-hash: 'a2ab4950';
 .i-wrench:before { content: '\e874'; } /* '' */
 .i-user-alt:before { content: '\e875'; } /* '' */
 .i-users-alt:before { content: '\e876'; } /* '' */
+.i-asterisk:before { content: '\e877'; } /* '' */
 .i-tv:before { content: '\e8b2'; } /* '' */
 .i-blender:before { content: '\e8b7'; } /* '' */
 .i-book-open:before { content: '\e8b8'; } /* '' */

src/styles/_mixins.sass

@@ -79,6 +79,7 @@
     display: block
     content: ' '
 
+// TODO: check if mixins box-shadows are still needed with CSS custom properties box-shadows
 =box-shadow-lg-strong
   box-shadow: var(--box-shadow-card), 0 var(--spacer-1) calc(var(--spacer) * 2) rgba(0, 0, 0, .15)
 

src/styles/_navigation.sass

@@ -572,6 +572,52 @@ body
   span, i, svg
     pointer-events: none
 
+/* Nav pills */
+.nav-pills
+  @extend .box
+
+  +list-unstyled
+  overflow-x: auto
+  padding: .2rem
+
+.nav-pills-divider,
+.nav-pills-item
+  margin: .2rem
+
+.nav-pills-item
+  border-radius: var(--border-radius)
+  line-height: var(--lh-sm)
+  +padding(3, x)
+  +padding(2, y)
+  transition: background-color var(--transition-speed) var(--transition-timing-fast), color var(--transition-speed) var(--transition-timing-fast)
+  user-select: none
+  white-space: nowrap
+
+  &:hover,
+  &.active
+    background-color: var(--color-accent-bg)
+    color: var(--color-accent)
+    text-decoration: none
+
+  i
+    +margin(1, right)
+    +margin(-1, left)
+
+  &.is-admin
+    background-color: var(--admin-color-bg)
+    color: var(--admin-color-text)
+
+    &:hover
+      background-color: var(--admin-color-bg-hover)
+
+  &.active
+    color: var(--color-accent)
+    +fw-bold
+
+.nav-pills-divider
+  border-bottom: var(--border-width) solid var(--border-color)
+  border-right: var(--border-width) solid var(--border-color)
+
 /* Tabs navigation. */
 .tabs
   +border-radius(lg)