Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-07 11:52:22 +04:00
Code Issues Projects Releases Wiki Activity

dropdown icons, header, topbar

Browse Source
This commit is contained in:
chomik
2019-04-09 22:35:13 +02:00
parent eccaa4f810
commit 317ccdca64
8 changed files with 73 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/layout/header.html
+1 -1
View File
@@ -1,3 +1,3 @@
<header class="header">
{% 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 %}
</header>
pages/_includes/parts/navbar.html
+20 -32
View File
@@ -10,10 +10,10 @@
<a href="{{ site.base }}" class="navbar-brand text-inherit">
{% if include.icon %}<span class="stamp mr-2">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
{% if include.logo %}<img src="./img/tabler.svg" alt="" class="navbar-brand-logo mr-2">{% endif %}
{% if include.title %}<span class="d-inline ml-3">{{ include.title }}</span>{% endif %}
{% if include.logo %}<img src="./img/tabler.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a>
{% if include.plus-left %}
@@ -130,11 +130,11 @@
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
{% if include.user-menu == 1 %}
<span class="mx-2 d-none leading-none d-lg-block text-right">
<small class="d-block mb-1">Hello, Welcome</small>
<span class="text-default">{{ person.full_name }}</span>
</span>
{% include ui/avatar.html src=person.photo %}
{% include ui/avatar.html src=person.photo %}
<span class="ml-2 d-none d-lg-block leading-none">
<span>{{ person.full_name }}</span>
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
{% elsif include.user-menu == 2 %}
<span class="mx-2 d-none leading-none d-lg-block text-right">
<span class="text-default">{{ person.full_name }}</span>
@@ -146,39 +146,27 @@
<span class="btn btn-secondary">{% include ui/avatar.html src=person.photo class="mr-2 btn-avatar" %}{{ person.full_name }}</span>
{% endif %}
</a>
<div class="dropdown-menu dropdown-menu-right pt-0 mt-3">
<div class="row no-gutters mb-2 text-center border-bottom">
<div class="col-4 border-right">
<a href="#" class="py-3 d-block">
{% include ui/icon.html icon="user" %}
</a>
</div>
<div class="col-4 border-right">
<a href="#" class="py-3 d-block">
{% include ui/icon.html icon="mail" %}
</a>
</div>
<div class="col-4">
<a href="#" class="py-3 d-block">
{% include ui/icon.html icon="send" %}
</a>
</div>
</div>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<span>Profile</span>
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
</a>
<a class="dropdown-item" href="#">
<span>Account Settings</span>
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a>
<a class="dropdown-item" href="#">
<span class="badge bg-success text-uppercase">Upgrade</span>
<span>to Pro</span>
<span class="float-right"><span class="badge badge-primary">6</span></span>
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Need help?
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
<a class="dropdown-item" href="#">Sign out</a>
</div>
</li>
{% endif %}
pages/navbar.html
-4
View File
@@ -1,10 +1,6 @@
---
---
<div class="card">
{% include parts/navbar.html title="Dashboard" icon="home" user-menu=1 person=4 notifications=true customize=true fullscreen=true %}
</div>
<div class="card">
{% include parts/navbar.html stamp=true big-menu=true user-menu=2 %}
</div>
scss/_variables.scss
+3 -3
View File
@@ -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;
scss/layout/_header.scss
-2
View File
@@ -1,7 +1,5 @@
.header,
.topnav {
height: 4rem;
color: $text-muted;
background: #fff;
border-bottom: 1px solid $border-color;
}
scss/layout/_navbar.scss
-8
View File
@@ -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 {
scss/ui/_avatars.scss
+2 -2
View File
@@ -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;
scss/ui/_dropdowns.scss
+47
View File
@@ -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;
}