Skip to content

Commit e2b3694

Browse files
iArchitSharmaiArchitSharma
authored
Merge pull request #128 from Aniumbott/feat/navigation
New Navigation bar is updated
2 parents 756e34a + c5119ca commit e2b3694

File tree

11 files changed

+460
-312
lines changed

11 files changed

+460
-312
lines changed

‎assets/scss/_navbar_project.scss

Lines changed: 40 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,47 @@
11
.navbar-brand {
22
width: 280.06px;
3-
height: 30px;
4-
3+
height: auto;
54
}
65

7-
.main-nav-items {
8-
margin-top: 0.75rem;
9-
}
6+
.nav-item {
7+
margin-right: 0.75rem;
108

11-
.nav-link-external {
12-
border: 1px solid $primary;
13-
border-radius: 0.25rem;
14-
color: $secondary;
15-
background: transparent;
16-
transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
17-
}
9+
#navbarDropdown {
10+
color: $primary;
11+
&:hover {
12+
color: $secondary;
13+
}
14+
}
1815

19-
.nav-link-external:hover {
20-
border: 1px solid $secondary;
21-
color: $primary;
22-
box-shadow: $light 0 0 5px;
23-
background-color: transparent;
16+
.dropdown-menu {
17+
padding: 0;
18+
transform: translate(-15%, 2.5rem) !important;
19+
border-radius: 0;
20+
.dropdown-item {
21+
height: 5rem;
22+
width: 20rem;
23+
display: flex;
24+
align-items: center;
25+
.logo-container {
26+
height: 2rem;
27+
width: 2rem;
28+
margin: 1rem 0;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
img {
33+
width: 100%;
34+
}
35+
}
36+
span {
37+
margin-left: 1rem;
38+
}
39+
&:hover {
40+
color: $black;
41+
img {
42+
filter: brightness(0) invert(1);
43+
}
44+
}
45+
}
46+
}
2447
}
25-
26-
.nav-link-external:active {
27-
box-shadow: $primary 0 0 5px;
28-
border: 1px solid $secondary;
29-
}

‎assets/scss/_search.scss

Lines changed: 95 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,160 +1,112 @@
11
// Search
22

33
.td-search {
4-
background: transparent;
5-
position: relative;
6-
width: 100%;
7-
8-
// Search icon
9-
&__icon {
10-
// Vertically center the content.
11-
display: flex;
12-
align-items: center;
13-
height: 100%;
14-
15-
// Position this on the left of the input.
16-
position: absolute;
17-
left: 0.75em;
18-
19-
// Click-through to the underlying input.
20-
pointer-events: none;
21-
22-
&:before {
23-
@extend .fa;
24-
content: fa-content($fa-var-search);
25-
}
26-
27-
// Styling adjustments for the navbar
28-
@at-root {
29-
.td-navbar & {
30-
color: $navbar-dark-color;
31-
}
32-
}
4+
width: auto;
5+
padding: 0;
6+
border-radius: 8px;
7+
border: 1px solid $white;
8+
background: linear-gradient(
9+
96deg,
10+
rgba(217, 224, 226, 0.7) 3.53%,
11+
rgba(217, 224, 226, 0) 398.97%
12+
);
13+
display: flex;
14+
align-content: center;
15+
// background-color: #EBC017;
16+
position: relative;
17+
18+
// Search icon
19+
.td-search__icon {
20+
// Vertically center the content.
21+
color: #fff;
22+
display: flex;
23+
align-items: center;
24+
height: 100%;
25+
26+
// Position this on the left of the input.
27+
position: absolute;
28+
left: 0.75em;
29+
30+
// Click-through to the underlying input.
31+
pointer-events: none;
32+
33+
&:not(:focus) {
34+
color: #000;
3335
}
34-
35-
// Search input element
36-
&__input {
37-
width: 100%;
38-
text-indent: 1.25em;
39-
40-
&:not(:focus) {
41-
background: transparent;
42-
}
43-
44-
&.form-control:focus {
45-
border-color: tint-color($primary, 95%);
46-
box-shadow: 0 0 0 2px tint-color($primary, 40%);
47-
color: inherit;
48-
}
49-
50-
// Styling adjustments for the navbar
51-
@at-root {
52-
.td-navbar & {
53-
border: none;
54-
color: $navbar-dark-color;
55-
56-
@include placeholder {
57-
color: $navbar-dark-color;
58-
}
59-
}
60-
}
36+
&:before {
37+
@extend .fa;
38+
content: fa-content($fa-var-search);
6139
}
62-
63-
// Hide icon on focus
64-
&:focus-within {
65-
.td-search__icon {
66-
display: none;
67-
}
68-
69-
.td-search-input {
70-
text-indent: 0px;
40+
}
41+
42+
// Search input element
43+
&__input {
44+
width: 100%;
45+
text-indent: 1.25em;
46+
line-height: 2rem;
47+
border-radius: 8px;
48+
49+
&:not(:focus) {
50+
background: transparent;
51+
&::placeholder {
52+
color: #000;
7153
}
7254
}
73-
74-
&:not(:focus-within) {
75-
color: $input-placeholder-color;
55+
56+
&.form-control:focus {
57+
box-shadow: 0 0 0 2px tint-color($primary, 40%);
7658
}
77-
}
78-
79-
.td-sidebar .td-search--algolia {
80-
display: block;
81-
padding: 0 0.5rem;
82-
> button {
83-
margin: 0;
84-
width: 100%;
59+
&.form-control:not(:focus) {
60+
color: #000;
8561
}
8662
}
87-
88-
// Offline search
89-
90-
.td-search--offline {
91-
&:focus-within {
92-
// Don't hide the search icon on focus: this gives better UX when user
93-
// explores content of search-results popup and focus is lost.
94-
95-
.td-search__icon {
96-
display: flex;
97-
color: $input-placeholder-color;
98-
}
99-
}
63+
}
64+
65+
.td-sidebar .td-search--algolia {
66+
display: block;
67+
padding: 0 0.5rem;
68+
> button {
69+
margin: 0;
70+
width: 100%;
10071
}
101-
102-
.td-offline-search-results {
103-
max-width: 90%;
104-
105-
.card {
106-
margin-bottom: $spacer * 0.5;
107-
108-
.card-header {
109-
font-weight: bold;
110-
}
111-
}
112-
113-
&__close-button {
114-
// cursor: pointer;
115-
float: right;
116-
117-
&:after {
118-
@extend .fas;
119-
content: fa-content($fa-var-times);
120-
}
72+
}
73+
74+
// Offline search
75+
76+
.td-search--offline {
77+
&:focus-within {
78+
// Don't hide the search icon on focus: this gives better UX when user
79+
// explores content of search-results popup and focus is lost.
80+
81+
.td-search__icon {
82+
display: flex;
83+
color: $input-placeholder-color;
12184
}
12285
}
86+
}
87+
88+
.td-offline-search-results {
89+
max-width: 90%;
12390

124-
.popover-body {
125-
background-color:#2e2e31;
91+
.card {
92+
margin-bottom: $spacer * 0.5;
93+
94+
.card-header {
95+
font-weight: bold;
96+
}
12697
}
12798

128-
// Global Navigation Bar
129-
.td-navbar{
130-
min-height:6rem;
131-
background-color: $body-bg !important;
132-
.navbar-brand {
133-
margin: 1.25rem;
99+
&__close-button {
100+
// cursor: pointer;
101+
float: right;
102+
103+
&:after {
104+
@extend .fas;
105+
content: fa-content($fa-var-times);
134106
}
135-
.td-search {
136-
display:flex;
137-
justify-content: center;
138-
align-content: center;
139-
// background-color: #EBC017;
140-
background-color:#2e2e31;
141-
border-radius: 1rem;
142-
143-
144-
.td-search__input {
145-
width: 100%;
146-
text-indent: 1.25em;
147-
border-radius: 1rem;
148-
}
149-
.td-search__input:not(:focus) {
150-
background: transparent;
151-
border-radius: 1rem; }
152-
.td-search__input.form-control:focus {
153-
color: inherit; }
154-
}
155-
.td-search__input.form-control:focus {
156-
157-
// background-color: #EBC017;
158-
}
159-
160-
}
107+
}
108+
}
109+
110+
.popover-body {
111+
background-color: #2e2e31;
112+
}

0 commit comments

Comments
 (0)