Skip to content

Commit 2b5ff82

Browse files
mosaic-promosaic-pro
committed
added navbar custom search form
fixed navbar spacings + presentation
1 parent 5f4851d commit 2b5ff82

10 files changed

Lines changed: 131 additions & 98 deletions

File tree

‎demo/dist/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
ga('create', 'UA-548938-34', 'auto');
1919
</script>
2020
</head>
21-
<body>
21+
<body class="ls-top-navbar">
2222
<app></app>
2323
<script src="build/demo.js"></script>
2424
</body>

‎demo/src/views/demo/index.vue‎

Lines changed: 75 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<button class="navbar-toggler pull-xs-left hidden-md-up" type="button" data-toggle="sidebar" data-target="#sidebar">
66
<span class="material-icons">menu</span>
77
</button>
8-
<a href="index.html" class="navbar-brand">Components</a>
8+
<a href="index.html" class="navbar-brand first-child-md">Components</a>
99
<ul class="nav navbar-nav">
1010
<li class="nav-item">
1111
<a class="nav-link" href="#/">Docs</a>
@@ -686,12 +686,7 @@
686686
<p class="lead">The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It’s easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.</p>
687687
</div>
688688

689-
690-
<div class="card bg-faded">
691-
<div class="card-header">
692-
<h4 class="card-title">Suported content</h4>
693-
</div>
694-
<div class="card-block">
689+
<div class="card">
695690
<nav class="navbar navbar-light bg-white navbar-full">
696691
<a class="navbar-brand" href="#">Navbar</a>
697692
<ul class="nav navbar-nav">
@@ -708,82 +703,93 @@
708703
<a class="nav-link" href="#">About</a>
709704
</li>
710705
</ul>
711-
<form class="form-inline pull-xs-right m-r-1">
712-
<input class="form-control" type="text" placeholder="Search">
713-
<button class="btn btn-primary" type="submit">Search</button>
706+
707+
<!-- Search -->
708+
<form class="form-inline pull-xs-right hidden-sm-down">
709+
<div class="input-group">
710+
<input type="text" class="form-control" placeholder="Search for...">
711+
<span class="input-group-btn">
712+
<button class="btn" type="button"><i class="material-icons">search</i></button>
713+
</span>
714+
</div>
714715
</form>
716+
<!-- // END Search -->
717+
715718
</nav>
719+
<div class="container-fluid">
720+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde odit officia magni error ipsam incidunt odio aut magnam quibusdam voluptatem?</p>
716721
</div>
717722
</div>
718723
<div class="card">
719-
<div class="card-header">
720-
<h4 class="card-title">Color schemes</h4>
721-
</div>
722-
<div class="card-block">
723-
<nav class="navbar navbar-dark bg-inverse">
724-
<a class="navbar-brand" href="#">Navbar</a>
725-
<ul class="nav navbar-nav">
726-
<li class="nav-item active">
727-
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
728-
</li>
729-
<li class="nav-item">
730-
<a class="nav-link" href="#">Features</a>
731-
</li>
732-
<li class="nav-item">
733-
<a class="nav-link" href="#">Pricing</a>
734-
</li>
735-
<li class="nav-item">
736-
<a class="nav-link" href="#">About</a>
737-
</li>
738-
</ul>
739-
<form class="form-inline pull-xs-right">
740-
<input class="form-control" type="text" placeholder="Search">
741-
<button class="btn btn-white" type="submit">Search</button>
742-
</form>
743-
</nav>
744-
<nav class="navbar navbar-dark bg-primary">
724+
<nav class="navbar navbar-dark bg-inverse navbar-full">
725+
745726
<a class="navbar-brand" href="#">Navbar</a>
746727
<ul class="nav navbar-nav">
747-
<li class="nav-item active">
748-
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
749-
</li>
750-
<li class="nav-item">
751-
<a class="nav-link" href="#">Features</a>
752-
</li>
753-
<li class="nav-item">
754-
<a class="nav-link" href="#">Pricing</a>
755-
</li>
756-
<li class="nav-item">
757-
<a class="nav-link" href="#">About</a>
758-
</li>
728+
<li class="nav-item active">
729+
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
730+
</li>
731+
<li class="nav-item">
732+
<a class="nav-link" href="#">Features</a>
733+
</li>
734+
<li class="nav-item">
735+
<a class="nav-link" href="#">Pricing</a>
736+
</li>
737+
<li class="nav-item">
738+
<a class="nav-link" href="#">About</a>
739+
</li>
759740
</ul>
760-
<form class="form-inline pull-xs-right">
761-
<input class="form-control" type="text" placeholder="Search">
762-
<button class="btn btn-white" type="submit">Search</button>
741+
742+
<!-- Search -->
743+
<form class="form-inline pull-xs-right hidden-sm-down">
744+
<div class="input-group">
745+
<input type="text" class="form-control" placeholder="Search">
746+
<span class="input-group-btn">
747+
<button class="btn" type="button"><i class="material-icons">search</i></button>
748+
</span>
749+
</div>
763750
</form>
764-
</nav>
765-
<nav class="navbar navbar-light" style="background-color: #e3f2fd; border-bottom:#e3f2fd">
751+
<!-- // END Search -->
752+
753+
</nav>
754+
<div class="container-fluid">
755+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quo rerum ducimus officia. Nulla earum est cum quisquam quam fugiat.</p>
756+
</div>
757+
</div>
758+
<div class="card">
759+
760+
<nav class="navbar navbar-dark bg-primary navbar-full">
766761
<a class="navbar-brand" href="#">Navbar</a>
767762
<ul class="nav navbar-nav">
768-
<li class="nav-item active">
769-
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
770-
</li>
771-
<li class="nav-item">
772-
<a class="nav-link" href="#">Features</a>
773-
</li>
774-
<li class="nav-item">
775-
<a class="nav-link" href="#">Pricing</a>
776-
</li>
777-
<li class="nav-item">
778-
<a class="nav-link" href="#">About</a>
779-
</li>
763+
<li class="nav-item active">
764+
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
765+
</li>
766+
<li class="nav-item">
767+
<a class="nav-link" href="#">Features</a>
768+
</li>
769+
<li class="nav-item">
770+
<a class="nav-link" href="#">Pricing</a>
771+
</li>
772+
<li class="nav-item">
773+
<a class="nav-link" href="#">About</a>
774+
</li>
780775
</ul>
781-
<form class="form-inline pull-xs-right">
782-
<input class="form-control" type="text" placeholder="Search">
783-
<button class="btn btn-primary" type="submit">Search</button>
776+
777+
<!-- Search -->
778+
<form class="navbar-form form-inline pull-xs-right hidden-sm-down">
779+
<div class="input-group">
780+
<input type="text" class="form-control" placeholder="Search">
781+
<span class="input-group-btn">
782+
<button class="btn" type="button"><i class="material-icons">search</i></button>
783+
</span>
784+
</div>
784785
</form>
786+
<!-- // END Search -->
787+
785788
</nav>
786-
</div>
789+
<div class="container-fluid">
790+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum eos voluptate eaque officia eligendi quod harum cupiditate labore tenetur sit?</p>
791+
</div>
792+
787793
</div>
788794
<div class="page-heading center" id="sidebar-example">
789795
<h2>Sidebar</h2>

‎demo/src/views/docs/layout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<nav class="navbar navbar-dark bg-primary navbar-full navbar-fixed-top">
44
<div class="container">
55
<a class="navbar-brand m-r-2" href="#">AdminPlus Lite</a>
6-
<button class="navbar-toggler hidden-md-up pull-xs-right" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-expanded="true">
6+
<button class="navbar-toggler hidden-md-up pull-xs-right last-child-xs" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-expanded="true">
77
<span class="material-icons">menu</span>
88
</button>
99
<div class="collapse navbar-toggleable-xs" id="navbarMenu">

‎src/sass/navbar/_navbar-dark.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
// NAVBAR DARK (colored)
22
.navbar-dark {
3-
.form-inline .input-group {
3+
.form-inline {
44
.form-control {
5+
56
background: rgba(0, 0, 0, .2);
67
color: rgba(255, 255, 255, .5);
7-
&::placeholder {
8-
color: rgba(255, 255, 255, .5);
9-
}
8+
109
&:focus {
1110
background: #fff;
1211
color: rgba(0, 0, 0, .84);
1312
}
1413
}
1514
.form-control:focus + .input-group-btn .btn {
1615
color: rgba(0,0,0, .24);
16+
&:hover {
17+
color: rgba(0,0,0, .84);
18+
}
1719
}
18-
.form-control:focus + .input-group-btn .btn:hover {
19-
color: rgba(0,0,0, .84);
20-
}
20+
2121
.input-group-btn .btn {
2222
background: transparent;
2323
color: rgba(255, 255, 255, .4);

‎src/sass/navbar/components/_brand.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
.navbar-brand {
22
padding-top: 0;
33
padding-bottom: 0;
4-
margin-left: 1rem;
54
font-size: 1.6rem;
65
font-weight: 500;
76
@include media-breakpoint-down(sm) {
87
padding-left: 0;
98
margin-left: 0;
109
}
11-
}
12-
.navbar .container > .navbar-brand {
13-
margin-left: 0;
1410
}

‎src/sass/navbar/components/_core.scss‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,39 @@
11
// Navbar
22
.navbar {
3-
margin-bottom: $grid-gutter-width;
4-
border-bottom: 1px solid rgba(0,0,0, .1);
53
height: $navbar-height;
6-
padding: 0;
74
line-height: $navbar-height;
8-
}
5+
padding-top: 0;
6+
padding-bottom: 0;
7+
margin-bottom: $grid-gutter-width;
8+
border-bottom: 1px solid rgba(0,0,0, .1);
9+
> *:first-child {
10+
margin-left: $grid-gutter-width;
11+
&.container, &.container-fluid {
12+
margin-left:0;
13+
}
14+
}
15+
16+
// BREAKPOINTS
17+
@each $breakpoint in map-keys($grid-breakpoints) {
18+
// specific
19+
@include media-breakpoint-up($breakpoint) {
20+
> .first-child-#{$breakpoint} {
21+
margin-left: $grid-gutter-width;
22+
&.container, &.container-fluid {
23+
margin-left:0;
24+
}
25+
}
26+
.last-child-#{$breakpoint} {
27+
margin-right:0;
28+
padding-right:0;
29+
}
30+
}
31+
}
32+
33+
.container, .container-fluid {
34+
> *:last-child {
35+
margin-right:0;
36+
}
37+
}
38+
}
39+

‎src/sass/navbar/components/_forms.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.navbar .form-inline {
22
line-height: $navbar-height;
33
margin-right: $grid-gutter-width;
4+
margin-top:-1px;
45
.input-group {
56
line-height: 0;
67
border-right-color: transparent;
@@ -10,7 +11,6 @@
1011
padding-right: 50px;
1112
border-radius: 5px;
1213
border-color: transparent;
13-
1414
}
1515
.input-group-btn {
1616
position: absolute;
@@ -23,11 +23,6 @@
2323
&:focus {
2424
outline: none;
2525
}
26-
27-
i.material-icons {
28-
position: relative;
29-
top: -1px;
30-
}
3126
padding-right: 8px;
3227
}
3328
}

‎src/sass/navbar/components/_menu.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.navbar-nav {
2+
margin-right: $grid-gutter-width;
3+
24
.nav-link {
35
padding-top: 0;
46
padding-bottom: 0;
57
}
6-
.navbar > & {
7-
margin-right: 1rem;
8-
}
8+
99
.dropdown-menu {
1010
i.material-icons {
1111
color: $gray-light;

‎src/sass/navbar/components/_toggler.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
.navbar-toggler {
22
outline: none;
33
line-height: $navbar-height;
4-
padding-top: 0;
5-
padding-bottom: 0;
4+
padding: 0 $grid-gutter-width;
5+
66
.material-icons {
77
vertical-align: top;
88
line-height: $navbar-height - 2;
99
}
10+
11+
&:first-child {
12+
margin-left: 0;
13+
}
14+
1015
}

‎src/sass/style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@
1717
@import 'progress';
1818
@import 'tabs';
1919
@import 'sidebar/sidebar';
20-
@import 'navbar/navbar';
20+
@import 'navbar/navbar';

0 commit comments

Comments
 (0)