From 317ccdca64eee53b1b3093c6d3d31b9c38101ec9 Mon Sep 17 00:00:00 2001 From: chomik Date: Tue, 9 Apr 2019 22:35:13 +0200 Subject: [PATCH] dropdown icons, header, topbar --- pages/_includes/layout/header.html | 2 +- pages/_includes/parts/navbar.html | 52 ++++++++++++------------------ pages/navbar.html | 4 --- scss/_variables.scss | 6 ++-- scss/layout/_header.scss | 2 -- scss/layout/_navbar.scss | 8 ----- scss/ui/_avatars.scss | 4 +-- scss/ui/_dropdowns.scss | 47 +++++++++++++++++++++++++++ 8 files changed, 73 insertions(+), 52 deletions(-) diff --git a/pages/_includes/layout/header.html b/pages/_includes/layout/header.html index 7551aa710..dfb5c25ed 100644 --- a/pages/_includes/layout/header.html +++ b/pages/_includes/layout/header.html @@ -1,3 +1,3 @@
- {% include parts/navbar.html logo=true user-menu=1 person=4 notifications=true customize=true fullscreen=true dark=false %} + {% include parts/navbar.html logo=true user-menu=1 person=5 dark=false %}
diff --git a/pages/_includes/parts/navbar.html b/pages/_includes/parts/navbar.html index de0237ab3..e1490b390 100644 --- a/pages/_includes/parts/navbar.html +++ b/pages/_includes/parts/navbar.html @@ -10,10 +10,10 @@ - {% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %} + {% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %} {% if include.stamp %}UI{% endif %} - {% if include.logo %}{% endif %} - {% if include.title %}{{ include.title }}{% endif %} + {% if include.logo %}{% endif %} + {% if include.title %}{{ include.title }}{% endif %} {% if include.plus-left %} @@ -130,11 +130,11 @@ {% if include.user-menu == 1 %} - - Hello, Welcome - {{ person.full_name }} - - {% include ui/avatar.html src=person.photo %} + {% include ui/avatar.html src=person.photo %} + + {{ person.full_name }} + Administrator + {% elsif include.user-menu == 2 %} {{ person.full_name }} @@ -146,39 +146,27 @@ {% include ui/avatar.html src=person.photo class="mr-2 btn-avatar" %}{{ person.full_name }} {% endif %} -
-
-
- - {% include ui/icon.html icon="user" %} - -
-
- - {% include ui/icon.html icon="mail" %} - -
-
- - {% include ui/icon.html icon="send" %} - -
-
+
- Profile + {% include ui/icon.html icon="user" class="dropdown-icon" %} Profile - Account Settings + {% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings - Upgrade - to Pro + 6 + {% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox + + + {% include ui/icon.html icon="send" class="dropdown-icon" %} Message
- Need help? + {% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help? + + + {% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out - Sign out
{% endif %} diff --git a/pages/navbar.html b/pages/navbar.html index 2f11ecf53..017eedc7b 100644 --- a/pages/navbar.html +++ b/pages/navbar.html @@ -1,10 +1,6 @@ --- --- -
- {% include parts/navbar.html title="Dashboard" icon="home" user-menu=1 person=4 notifications=true customize=true fullscreen=true %} -
-
{% include parts/navbar.html stamp=true big-menu=true user-menu=2 %}
diff --git a/scss/_variables.scss b/scss/_variables.scss index b2c5345be..897d89874 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -47,7 +47,7 @@ $white: #fff !default; $body-bg: #f5f7fb !default; $text-color: #495057 !default; -$text-muted: #778ca2 !default; +$text-muted: #9aa0ac !default; $text-muted-light: #adb5bd !default; $border-color: rgba(0, 40, 100, .12) !default; @@ -98,7 +98,7 @@ $colors: ( $avatar-sizes: ( ("xs", 1.25rem, 1rem), - ("sm", 2rem, 1rem), + ("sm", 1.5rem, 1rem), ("md", 2.5rem, 1rem), ("lg", 3.75rem, 1.25rem), ("xl", 5rem, 2rem) @@ -115,7 +115,7 @@ $h2-font-size: 1.625rem !default; $h3-font-size: 1.25rem !default; $h4-font-size: 1.125rem !default; $h5-font-size: $font-size-base !default; -$h6-font-size: .75rem !default; +$h6-font-size: .8125rem !default; $ribbon-margin: .25rem !default; diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss index 432754284..470dc1b0c 100644 --- a/scss/layout/_header.scss +++ b/scss/layout/_header.scss @@ -1,7 +1,5 @@ .header, .topnav { - height: 4rem; - color: $text-muted; background: #fff; border-bottom: 1px solid $border-color; } diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index 762c3f709..eda8fa172 100644 --- a/scss/layout/_navbar.scss +++ b/scss/layout/_navbar.scss @@ -23,14 +23,6 @@ margin: -.75rem 0; line-height: 2.75rem; } - - .dropdown-menu { - margin-top: 0; - } - - @at-root .bg-white & .nav-item.active { - color: #137eff; - } } .navbar-brand { diff --git a/scss/ui/_avatars.scss b/scss/ui/_avatars.scss index e369b8412..449f7a0a2 100644 --- a/scss/ui/_avatars.scss +++ b/scss/ui/_avatars.scss @@ -1,8 +1,8 @@ .avatar { position: relative; display: inline-block; - width: 2.5rem; - height: 2.5rem; + width: 2rem; + height: 2rem; font-size: .875rem; font-weight: 400; line-height: 2.5rem; diff --git a/scss/ui/_dropdowns.scss b/scss/ui/_dropdowns.scss index bd19b4c9f..fa0e780e3 100644 --- a/scss/ui/_dropdowns.scss +++ b/scss/ui/_dropdowns.scss @@ -6,4 +6,51 @@ .dropdown-menu { box-shadow: $box-shadow; + min-width: 12rem; +} + +.dropdown-menu-arrow { + margin-top: .5rem; + + &:before { + position: absolute; + top: -6px; + left: 12px; + display: inline-block; + border-right: 5px solid transparent; + border-bottom: 5px solid $border-color; + border-left: 5px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; + } + + &:after { + position: absolute; + top: -5px; + left: 12px; + display: inline-block; + border-right: 5px solid transparent; + border-bottom: 5px solid #fff; + border-left: 5px solid transparent; + content: ''; + } + + &.dropdown-menu-right { + &:before, + &:after { + left: auto; + right: 12px; + } + } +} + +.dropdown-icon { + color: $text-muted; + margin-right: .5rem; + margin-left: -.5rem; + width: 1em; + display: inline-block; + text-align: center; + vertical-align: -1px; + stroke-width: 1.75px; }