Skip to content

Commit 4f843da

Browse files
spektra2147spektra2147
committed
update sidebar
1 parent 80d0095 commit 4f843da

File tree

8 files changed

+623
-153
lines changed

8 files changed

+623
-153
lines changed

‎resources/css/ocify-sidebar.css‎

Lines changed: 169 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,31 @@
1111
}
1212

1313
#wrapper.toggled {
14-
padding-left: 240px;
14+
padding-left: 265px;
1515
overflow: hidden;
1616
}
1717

1818
#sidebar-wrapper {
19+
background: #30426A;
1920
z-index: 1000;
2021
position: fixed;
21-
left: 240px;
22+
left: 265px;
2223
width: 0;
2324
height: 100%;
24-
margin-left: -240px;
25+
margin-left: -265px;
2526
overflow-y: auto;
26-
background: #30426A;
2727
-webkit-transition: all 0.5s ease;
2828
-moz-transition: all 0.5s ease;
2929
-o-transition: all 0.5s ease;
3030
transition: all 0.5s ease;
3131
}
3232

3333
#wrapper.toggled #sidebar-wrapper {
34-
width: 240px;
34+
width: 265px;
3535
}
3636

37+
38+
3739
#page-content-wrapper {
3840
position: absolute;
3941
padding: 15px;
@@ -54,72 +56,140 @@
5456
width: auto;
5557
}
5658

57-
/* Sidebar Styles */
59+
.breadcrumb {
60+
background-color: transparent !important;
61+
}
5862

5963
.sidebar-nav {
6064
position: absolute;
61-
top: 0;
62-
width: 70px;
65+
top: 70px;
66+
width: 265px;
6367
margin: 0;
6468
padding: 0;
65-
background-color: #273759 !important;
6669
list-style: none;
6770
}
6871

72+
.sidebar-nav .sidebar-group.active .sidebar-group-link .title,
73+
.sidebar-nav .sidebar-group.active .sidebar-group-link .icon {
74+
font-weight: 600;
75+
color: #2BBF98;
76+
}
77+
78+
.sidebar-nav .sidebar-addon .sidebar-addon-link {
79+
font-weight: 400;
80+
font-family: 'Poppins';
81+
font-size: 16px;
82+
padding-right:20px;
83+
justify-content: space-between;
84+
}
85+
86+
.sidebar-nav .sidebar-addon.active .sidebar-addon-link {
87+
color: #fff!important;
88+
font-weight: 600;
89+
}
90+
91+
.sidebar-nav .sidebar-sublist {
92+
margin-left: 45px;
93+
}
94+
95+
.sidebar-nav .sidebar-sublist ul {
96+
padding:0;
97+
}
98+
99+
#wrapper.toggled-2 .title,
100+
#wrapper.toggled-2 .navbar-form,
101+
#wrapper.toggled-2 .group-sublist{
102+
display: none;
103+
}
104+
105+
.sidebar-nav .sidebar-addon a {
106+
display: flex;
107+
align-items: center;
108+
}
109+
110+
.sidebar-nav .sidebar-addon i {
111+
font-size: 8px;
112+
margin-right: 10px;
113+
}
114+
115+
.sidebar-nav .sidebar-sublist .sub-item.active {
116+
margin-left: -74px;
117+
padding-left: 74px;
118+
background-color: #2B3C61 !important;
119+
}
120+
121+
.sidebar-nav .sidebar-sublist .sub-item.active a{
122+
color: #BFD3E9 !important;
123+
}
124+
69125
.sidebar-nav .fa-stack {
70126
font-size: 22px;
71127
color: #BFD3E9;
72128
line-height: 39px;
73129
}
74130

75131
.sidebar-nav .sidebar-items {
76-
position: absolute;
77-
width: 170px;
78132
top: 0;
79-
margin-left: 67px;
80133
background-color: transparent !important;
81134
padding-left: 0;
82135
}
83136

84-
.sidebar-nav .sidebar-items li.active {
85-
background-color: #273759 !important;
137+
.sidebar-nav .sidebar-group .sidebar-group-link {
138+
text-align: left;
139+
float: left;
140+
font-size: 18px;
141+
font-weight: 400;
142+
font-family: 'Poppins';
143+
width: 265px;
144+
justify-content: space-between;
145+
display: flex;
146+
padding-right: 26px;
147+
align-items: center;
86148
}
87149

88-
.sidebar-nav .sidebar-icon {
89-
text-align: center;
90-
float: left;
91-
font-size: 22px;
92-
width: 70px;
150+
.sidebar-nav .sidebar-group .sidebar-group-link .chevron {
151+
font-size: 13px;
93152
}
94153

95-
.sidebar-nav .sidebar-title {
96-
padding-left: 20px;
154+
.sidebar-nav .sidebar-group .sidebar-group-link .title,
155+
.sidebar-nav .sidebar-group .sidebar-group-link .icon {
97156
font-size: 18px;
157+
color: #BFD3E9;
98158
font-weight: 400;
99159
}
100160

161+
.sidebar-nav .sidebar-group .sidebar-group-link .icon {
162+
width: 40px;
163+
height: 40px;
164+
display: inline-block;
165+
text-align: center;
166+
}
167+
168+
.sidebar-nav .sidebar-group .group-sublist {
169+
margin-left: 29px;
170+
}
171+
101172
.sidebar-nav .sidebar-title.active {
102173
color: #BFD3E9 !important;
103174
}
104175

105176
.sidebar-nav li {
106177
line-height: 40px;
107178
height: auto;
108-
display: flex;
109179
}
110180

111-
.sidebar-nav .sidebar-main.active {
112-
background-color: #30426A !important;
113-
border-left: 3px solid #4eb6a2 !important;
114-
padding-right: 3px;
115-
}
181+
/*.sidebar-nav .sidebar-main.active {*/
182+
/* background: initial !important;*/
183+
/* border-left: 3px solid #4eb6a2 !important;*/
184+
/* padding-right: 3px;*/
185+
/*}*/
116186

117187
.sidebar-nav li a {
118188
display: block;
189+
color: #7285A5 !important;
119190
cursor: pointer;
120191
text-decoration: none;
121-
color: #788BAA !important;
122-
background-color: transparent !important;
192+
padding-left: 15px;
123193
}
124194

125195
.sidebar-nav li a:active,
@@ -147,10 +217,6 @@
147217
}
148218

149219
@media (min-width: 768px) {
150-
.top-bar {
151-
width: calc(100% - 240px) !important;
152-
}
153-
154220
.web-sidebar-btn {
155221
display: inline-block !important;
156222
}
@@ -160,34 +226,51 @@
160226
}
161227

162228
#wrapper {
163-
padding-left: 240px;
229+
padding-left: 265px;
164230
}
165231

166232
.fixed-brand {
167-
width: 240px;
233+
width: 265px;
168234
}
169235

170236
#wrapper.toggled {
171237
padding-left: 0;
172238
}
173239

174240
#sidebar-wrapper {
175-
width: 240px;
241+
width: 265px;
176242
}
177243

178244
#wrapper.toggled #sidebar-wrapper {
179-
width: 240px;
245+
width: 265px;
180246
}
181247

182-
#wrapper.toggled-2 #sidebar-wrapper {
248+
#wrapper .logo-bar-table {
249+
width: 265px;
250+
}
251+
252+
#wrapper.toggled-2 #sidebar-wrapper,
253+
#wrapper.toggled-2 .logo-bar{
183254
width: 70px;
184255
}
185256

186-
#wrapper.toggled-2 #sidebar-wrapper:hover {
187-
width: 240px;
257+
.logo-bar {
258+
background: #30426A;
259+
z-index: 1000;
260+
position: fixed;
261+
left: 265px;
262+
width: 265px;
263+
height: 100%;
264+
margin-left: -265px;
265+
overflow-y: hidden;
266+
-webkit-transition: all 0.5s ease;
267+
-moz-transition: all 0.5s ease;
268+
-o-transition: all 0.5s ease;
269+
transition: all 0.5s ease;
188270
}
189271

190272

273+
191274
#page-content-wrapper {
192275
padding: 20px;
193276
position: relative;
@@ -200,7 +283,7 @@
200283
#wrapper.toggled #page-content-wrapper {
201284
position: relative;
202285
margin-right: 0;
203-
padding-left: 240px;
286+
padding-left: 265px;
204287
}
205288

206289
#wrapper.toggled-2 #page-content-wrapper {
@@ -220,10 +303,6 @@
220303
}
221304
}
222305

223-
.logo-bar {
224-
height: 61px;
225-
}
226-
227306
.logo-bar .logo-bar-cell {
228307
width: 50px;
229308
padding-top: 8px;
@@ -250,7 +329,20 @@
250329

251330
.top-bar {
252331
height: 61px;
332+
width: calc(100% - 265px);
333+
right: initial;
334+
-webkit-transition: all 0.5s ease;
335+
-moz-transition: all 0.5s ease;
336+
-o-transition: all 0.5s ease;
337+
transition: all 0.5s ease;
338+
}
339+
340+
.wide-top-bar {
253341
width: calc(100% - 70px);
342+
-webkit-transition: all 0.5s ease;
343+
-moz-transition: all 0.5s ease;
344+
-o-transition: all 0.5s ease;
345+
transition: all 0.5s ease;
254346
}
255347

256348
.sidebar-nav .sub-item {
@@ -266,15 +358,42 @@
266358
padding-left: 8px;
267359
}
268360

269-
.sidebar-nav .nav-item:hover,.sidebar-nav .nav-item:focus,.sidebar-nav .nav-item:active,.sidebar-nav .nav-item:focus-visible {
270-
background: #273759 !important;
271-
}
272-
273361

274362
.sidebar-nav .sub-item .sidebar-title {
275363
padding-left: 0;
276364
}
277365

278366
.nav-stacked .nav-item + .nav-item {
279-
margin-top:0;
367+
margin-top: 0;
368+
}
369+
370+
371+
li.active {
372+
background: initial !important;
373+
color: initial !important;
374+
}
375+
376+
377+
#sidebar-wrapper .navbar-form {
378+
width: 265px;
379+
position: absolute;
380+
display: flex;
381+
justify-content: center;
382+
margin-top: 13px;
383+
border-bottom: 1px solid #3B4C72;
384+
padding-bottom: 10px;
385+
}
386+
387+
#sidebar-wrapper .navbar-form input {
388+
width: 230px;
389+
background-color: rgba(255,255,255,0.2) !important;
390+
}
391+
392+
#sidebar-wrapper .navbar-form button {
393+
position: absolute;
394+
right: 28px;
395+
}
396+
397+
.logo-bar-table {
398+
background-color: #30426a !important;
280399
}

‎resources/css/theme.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ color: {{ setting_value('visiosoft.theme.defaultadmin::primary_color') }} !impor
5353
font-family: 'Poppins';
5454
overflow: visible;
5555
padding-top: 0px;
56-
margin-left: 240px;
56+
margin-left: 265px;
5757
background-size: 55px 100px;
5858
background-repeat: no-repeat;
5959
transition: min-height 100ms;
@@ -170,7 +170,7 @@ color: {{ setting_value('visiosoft.theme.defaultadmin::primary_color') }} !impor
170170
#footer {
171171
padding: 1em 3em;
172172
overflow: hidden;
173-
margin-left: 240px;
173+
margin-left: 265px;
174174
background: #ffffff;
175175
}
176176
#footer ul {

0 commit comments

Comments
 (0)