Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

navbar notifications

Browse Source
This commit is contained in:
codecalm
2020-02-19 20:09:45 +01:00
parent becee4bbac
commit 22aa83bf30
5 changed files with 49 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/cards/navbar-notifications.html
+5
View File
@@ -0,0 +1,5 @@
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
</div>
</div>
pages/_includes/layout/navbar-secondary.html
+29 -1
View File
@@ -1,4 +1,4 @@
<nav class="navbar navbar-light navbar-secondary navbar-expand-md" id="navbar-secondary">
<nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
<div class="container">
{% include layout/navbar-logo.html class="d-none-navbar-vertical" %}
@@ -8,6 +8,34 @@
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
{% include ui/icon.html icon="settings" %}
</a>
{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
{% include ui/flag.html flag="us" class="mr-1" %} English
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
<a href="#" class="dropdown-item">{% include ui/flag.html flag="de" class="mr-1" %} German</a>
<a href="#" class="dropdown-item">{% include ui/flag.html flag="pl" class="mr-1" %} Polish</a>
<a href="#" class="dropdown-item">{% include ui/flag.html flag="jp" class="mr-1" %} Japan</a>
<a href="#" class="dropdown-item">{% include ui/flag.html flag="ru" class="mr-1" %} Russian</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
{% include ui/icon.html icon="bell" %}
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
{% include cards/navbar-notifications.html %}
</div>
</li>
<li class="nav-item dropdown pl-2">
{% include ui/avatar.html person-id=1 dropdown=true %}
{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
</li>
scss/_variables.scss
+7 -6
View File
@@ -165,11 +165,11 @@ $spacers: (
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: $spacer * 6,
7: $spacer * 9,
8: $spacer * 12,
4: $spacer * 1.25,
5: $spacer * 1.5,
6: $spacer * 3,
7: $spacer * 6,
8: $spacer * 9,
) !default;
$size-spacers: (
@@ -303,6 +303,7 @@ $dropdown-padding-y: .5rem !default;
$dropdown-link-hover-bg: $hover-bg !default;
$dropdown-link-hover-color: inherit !default;
$dropdown-spacer: 1px !default;
$dropdown-min-width: 12rem !default;
$dropdown-link-active-color: $primary !default;
$dropdown-link-active-bg: $active-bg !default;
@@ -371,7 +372,7 @@ $footer-border-color: $border-color !default;
//$nav-link-padding-y: 1rem !default;
$navbar-padding-y: .75rem !default;
$navbar-nav-link-padding-x: .75rem !default;
$navbar-nav-link-padding-x: .5rem !default;
$navbar-light-color: rgba($body-color, .64) !default;
$navbar-light-active-color: $primary !default;
scss/layout/_navbar.scss
+6 -2
View File
@@ -263,6 +263,7 @@ All navbars
.navbar {
padding-top: 0;
padding-bottom: 0;
min-height: $navbar-height;
@media print {
display: none;
@@ -270,8 +271,11 @@ All navbars
}
.nav-link {
min-height: $navbar-height;
line-height: 1;
min-width: 2rem;
min-height: 2rem;
position: relative;
text-align: center;
}
.nav-link-icon {
@@ -288,7 +292,7 @@ All navbars
@each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
&-#{$breakpoint} {
@include media-breakpoint-up($breakpoint) {
min-height: $navbar-height;
.navbar-nav {
margin-left: (-$navbar-nav-link-padding-x);
scss/ui/_dropdowns.scss
+2 -2
View File
@@ -15,7 +15,7 @@
}
.dropdown-item {
min-width: 12rem;
min-width: $dropdown-min-width;
color: inherit;
display: flex;
align-items: center;
@@ -106,10 +106,10 @@
.dropdown-menu-card {
padding: 0;
border: 0;
>.card {
margin: 0;
border: 0;
box-shadow: none;
}
}