From 0c1ac3c88db4d8e591649648214663673cfeb196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 20 Sep 2024 15:05:39 +0200 Subject: [PATCH 1/4] UI: Add component nav-pills base Add flexible nav-pills component base, that can be used in both a horizontal and a vertical layout, the latter qualifying as a sidebar navigation drawer. Part of #94701 --- src/index.html | 73 +++++++++++++++++++++++++++++++++++++ src/styles/_mixins.sass | 1 + src/styles/_navigation.sass | 46 +++++++++++++++++++++++ 3 files changed, 120 insertions(+) diff --git a/src/index.html b/src/index.html index 5bc6570..debad5f 100644 --- a/src/index.html +++ b/src/index.html @@ -253,6 +253,79 @@
+

Navigation pills

+
+
+

Horizontal

+

+ Navigation pills have a horizontal layout by default. +

+
+ + + Home + + + + Profile + +
+ + + Sessions + + + + Authenticated Apps + +
+ + + Password + + + + Delete Account + +
+
+
+

Vertical

+

+ Navigation pills have a vertical layout with the addition of the flex-column class. +

+
+ +

Notifications

diff --git a/src/styles/_mixins.sass b/src/styles/_mixins.sass index cc13bd5..439aad6 100644 --- a/src/styles/_mixins.sass +++ b/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) diff --git a/src/styles/_navigation.sass b/src/styles/_navigation.sass index d0d0f3e..c829cf4 100644 --- a/src/styles/_navigation.sass +++ b/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) -- 2.30.2 From 8c7dc2c225a16542afad77c46fcccf41d6bb4d77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 20 Sep 2024 15:27:04 +0200 Subject: [PATCH 2/4] UI: Add component nav pills items placeholder items Add an extensive list of nav pills items placeholders to help unifying icons usage and items ordering accross projects. Part of #94701 --- src/index.html | 70 +++++++++++++++++++++++++++++++++++--------------- 1 file changed, 49 insertions(+), 21 deletions(-) diff --git a/src/index.html b/src/index.html index debad5f..482ca9b 100644 --- a/src/index.html +++ b/src/index.html @@ -261,31 +261,30 @@ Navigation pills have a horizontal layout by default.

- + Home - + Profile -
- - - Sessions + + + Teams - - - Authenticated Apps + + + Tokens
- - - Password + + + Favourites - - - Delete Account + + + My Presentations
@@ -297,29 +296,58 @@