infrastructure/web-assets
1
4
Fork 3
Code Issues 3 Pull Requests 1 Projects Releases 41 Wiki Activity

UI: Add nav pills component #94703

Merged
Márton Lente merged 4 commits from component-nav-pills into v2 2024-09-26 12:16:56 +02:00
Conversation 0 Commits 4 Files Changed 9 +152 -1
9 changed files with 152 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/fontutti.eot
View File

Binary file not shown.

2
assets/fonts/fontutti.svg
View File

@ -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" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 74 KiB

BIN
assets/fonts/fontutti.ttf
View File

Binary file not shown.

BIN
assets/fonts/fontutti.woff
View File

Binary file not shown.

BIN
assets/fonts/fontutti.woff2
View File

Binary file not shown.

101
src/index.html
View File

@ -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>

3
src/styles/_font_fontutti.scss
View File

@ -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'; } /* '' */

1
src/styles/_mixins.sass
View File

@ -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)

46
src/styles/_navigation.sass
View File

@ -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)