Skip to content

Commit 3e4cafd

Browse files
wrappixelwrappixel
committed
hooks
1 parent bab127d commit 3e4cafd

File tree

18 files changed

+12881
-8423
lines changed

18 files changed

+12881
-8423
lines changed

‎package.json‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,32 @@
66
"dependencies": {
77
"bootstrap": "4.1.3",
88
"history": "4.7.2",
9-
"node-sass": "4.6.1",
10-
"node-sass-chokidar": "1.3.3",
11-
"npm-run-all": "4.1.3",
12-
"react": "16.4.2",
13-
"react-dom": "16.4.2",
9+
"node-sass": "^4.12.0",
10+
"react": "^16.8.3",
11+
"react-dom": "^16.8.3",
1412
"react-chartjs-2": "^2.7.4",
1513
"react-perfect-scrollbar": "1.2.0",
1614
"react-router-dom": "4.2.2",
17-
"react-scripts": "1.1.5",
18-
"react-chartjs-2": "^2.7.4",
15+
"react-scripts": "^3.4.1",
1916
"chart.js": "2.7.2",
2017
"reactstrap": "6.4.0"
2118
},
2219
"scripts": {
23-
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
24-
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
25-
"start-js": "react-scripts start",
26-
"start": "npm-run-all -p watch-css start-js",
27-
"build": "npm run build-css && react-scripts build",
28-
"test": "react-scripts test --env=jsdom",
20+
"start": "react-scripts start",
21+
"build": "react-scripts build",
22+
"test": "react-scripts test",
2923
"eject": "react-scripts eject"
24+
},
25+
"browserslist": {
26+
"production": [
27+
">0.2%",
28+
"not dead",
29+
"not op_mini all"
30+
],
31+
"development": [
32+
"last 1 chrome version",
33+
"last 1 firefox version",
34+
"last 1 safari version"
35+
]
3036
}
31-
}
37+
}

‎src/assets/scss/all/custom/core/topbar/_topbar.scss‎

Lines changed: 168 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,202 @@
11
// Top bar scss
22

33
.topbar {
4-
position: relative;
5-
z-index: 50;
6-
@extend %topbar-shadow;
7-
background: $topbar;
8-
height: $topbar-height;
9-
.navbar-collapse {
10-
padding: 0px 10px 0 0;
11-
}
12-
.top-navbar {
13-
min-height: $topbar-height;
14-
padding: 0px;
15-
.dropdown-toggle::after {
16-
display: none;
4+
position: relative;
5+
z-index: 50;
6+
@extend %topbar-shadow;
7+
background: $topbar;
8+
height: $topbar-height;
9+
10+
.navbar-collapse {
11+
padding: 0px 10px 0 0;
1712
}
18-
.navbar-header {
19-
line-height: $topbar-navlink-height;
20-
.navbar-brand {
21-
display: flex;
22-
align-items: center;
23-
margin: 0px;
24-
padding: $topbar-navbrand-padding;
25-
.dark-logo {
26-
display: none;
13+
14+
.top-navbar {
15+
min-height: $topbar-height;
16+
padding: 0px;
17+
18+
.dropdown-toggle::after {
19+
display: none;
20+
}
21+
22+
.navbar-header {
23+
line-height: $topbar-navlink-height;
24+
25+
.navbar-brand {
26+
display: flex;
27+
align-items: center;
28+
margin: 0px;
29+
padding: $topbar-navbrand-padding;
30+
31+
.dark-logo {
32+
display: none;
33+
}
34+
35+
.logo-icon {
36+
margin-right: 5px;
37+
}
38+
}
2739
}
28-
.logo-icon {
29-
margin-right: 5px;
40+
41+
.navbar-nav>.nav-item>.nav-link {
42+
padding: $topbar-navlink-padding;
43+
font-size: $topbar-navlink-font-size;
44+
line-height: $topbar-navlink-height;
45+
height: $topbar-navlink-height;
46+
}
47+
48+
.navbar-nav>.nav-item {
49+
transition: 0.2s ease-in;
50+
51+
&:hover {
52+
background: $transparent-dark-bg;
53+
}
3054
}
31-
}
3255
}
33-
.navbar-nav > .nav-item > .nav-link {
34-
padding: $topbar-navlink-padding;
35-
font-size: $topbar-navlink-font-size;
36-
line-height: $topbar-navlink-height;
37-
height: $topbar-navlink-height;
56+
57+
.user-dd,
58+
.mailbox {
59+
min-width: 280px;
3860
}
39-
.navbar-nav > .nav-item {
40-
transition: 0.2s ease-in;
41-
&:hover {
42-
background: $transparent-dark-bg;
43-
}
61+
62+
.nav-toggler,
63+
.topbartoggler {
64+
color: $theme-light;
65+
padding: 0 15px;
66+
border: 0;
4467
}
45-
}
46-
.user-dd,
47-
.mailbox {
48-
min-width: 280px;
49-
}
50-
.nav-toggler,
51-
.topbartoggler {
52-
color: $theme-light;
53-
padding: 0 15px;
54-
}
5568
}
5669

5770
.search-box {
58-
.app-search {
59-
z-index: 110;
60-
width: 100%;
61-
top: -1px;
62-
box-shadow: $shadow;
63-
display: none;
64-
left: 0px;
65-
.form-control {
66-
padding: 32px 40px 32px 23px;
67-
@extend %square;
68-
transition: $transitions;
69-
&:focus {
70-
border-color: transparent;
71-
}
72-
}
73-
.srh-btn {
74-
position: absolute;
75-
top: 23px;
76-
cursor: pointer;
77-
right: 20px;
71+
.app-search {
72+
z-index: 110;
73+
width: 100%;
74+
top: -1px;
75+
box-shadow: $shadow;
76+
display: none;
77+
left: 0px;
78+
79+
.form-control {
80+
padding: 32px 40px 32px 23px;
81+
@extend %square;
82+
transition: $transitions;
83+
84+
&:focus {
85+
border-color: transparent;
86+
}
87+
}
88+
89+
.srh-btn {
90+
position: absolute;
91+
top: 23px;
92+
cursor: pointer;
93+
right: 20px;
94+
border: 0;
95+
}
7896
}
79-
}
8097
}
8198

8299
/*******************
83100
Megamenu
84101
******************/
85102
.topbar {
86-
.mega-dropdown {
87-
position: static;
88-
.dropdown-menu {
89-
padding: 30px;
90-
@extend %square;
91-
width: 100%;
92-
max-height: 480px;
93-
overflow: auto;
103+
.mega-dropdown {
104+
position: static;
105+
106+
.dropdown-menu {
107+
padding: 30px;
108+
@extend %square;
109+
width: 100%;
110+
max-height: 480px;
111+
overflow: auto;
112+
}
94113
}
95-
}
96114
}
115+
97116
/*******************
98117
Designed dropdown
99118
******************/
100119
.topbar {
101-
.dropdown-menu {
102-
padding-top: 0px;
103-
border: 0px;
104-
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1);
105-
.with-arrow {
106-
position: absolute;
107-
height: 10px;
108-
overflow: hidden;
109-
width: 40px;
110-
top: -10px;
111-
> span {
112-
@extend %rotate45;
113-
background-color: $white;
114-
width: 15px;
115-
height: 15px;
116-
top: 3px;
117-
left: 15px;
118-
position: absolute;
119-
content: '';
120-
-moz-border-radius: 6px 0 0 0;
121-
border-radius: 6px 0 0 0;
122-
/*box-shadow:-3px -3px 8px rgba(0, 0, 0, 0.1); */
123-
}
124-
}
125-
&.dropdown-menu-right {
126-
.with-arrow {
127-
right: 0px;
128-
> span {
129-
right: 20px;
130-
left: auto;
120+
.dropdown-menu {
121+
padding-top: 0px;
122+
border: 0px;
123+
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1);
124+
125+
.with-arrow {
126+
position: absolute;
127+
height: 10px;
128+
overflow: hidden;
129+
width: 40px;
130+
top: -10px;
131+
132+
>span {
133+
@extend %rotate45;
134+
background-color: $white;
135+
width: 15px;
136+
height: 15px;
137+
top: 3px;
138+
left: 15px;
139+
position: absolute;
140+
content: '';
141+
-moz-border-radius: 6px 0 0 0;
142+
border-radius: 6px 0 0 0;
143+
/*box-shadow:-3px -3px 8px rgba(0, 0, 0, 0.1); */
144+
}
145+
}
146+
147+
&.dropdown-menu-right {
148+
.with-arrow {
149+
right: 0px;
150+
151+
>span {
152+
right: 20px;
153+
left: auto;
154+
}
155+
}
131156
}
132-
}
133157
}
134-
}
135158
}
159+
136160
/*******************
137161
Topbar Responsive
138162
******************/
139163

140164
@media (max-width: 767px) {
141-
.topbar .top-navbar {
142-
.navbar-collapse.show,
143-
.navbar-collapse.collapsing {
144-
display: block;
145-
width: 100%;
146-
border-top: 1px solid $border-color;
147-
}
148-
.navbar-nav {
149-
flex-direction: row;
150-
.dropdown {
151-
position: static;
152-
}
153-
}
154-
.navbar-nav > .nav-item > .nav-link {
155-
padding: 0 10px;
156-
}
157-
.navbar-header {
158-
display: flex;
159-
align-items: center;
160-
width: 100%;
161-
justify-content: space-between;
162-
}
163-
.dropdown-menu {
164-
position: absolute;
165-
width: 100%;
166-
.with-arrow {
167-
display: none;
168-
}
165+
.topbar .top-navbar {
166+
167+
.navbar-collapse.show,
168+
.navbar-collapse.collapsing {
169+
display: block;
170+
width: 100%;
171+
border-top: 1px solid $border-color;
172+
}
173+
174+
.navbar-nav {
175+
flex-direction: row;
176+
177+
.dropdown {
178+
position: static;
179+
}
180+
}
181+
182+
.navbar-nav>.nav-item>.nav-link {
183+
padding: 0 10px;
184+
}
185+
186+
.navbar-header {
187+
display: flex;
188+
align-items: center;
189+
width: 100%;
190+
justify-content: space-between;
191+
}
192+
193+
.dropdown-menu {
194+
position: absolute;
195+
width: 100%;
196+
197+
.with-arrow {
198+
display: none;
199+
}
200+
}
169201
}
170-
}
171-
}
202+
}

0 commit comments

Comments
 (0)