Skip to content

Commit 1ba4c77

Browse files
fatihalpfatihalp
authored
Merge pull request #22 from openclassify/vedatakdgn
submenu new design
2 parents 80d0095 + 7ce7d46 commit 1ba4c77

File tree

8 files changed

+276
-152
lines changed

8 files changed

+276
-152
lines changed

‎resources/css/ocify-sidebar.css‎

Lines changed: 182 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,153 @@
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.in .sub-item.active {
116+
margin-left: -74px;
117+
padding-left: 74px;
118+
background-color: #2B3C61 !important;
119+
-webkit-transition: all 700ms ease;
120+
-moz-transition: all 700ms ease;
121+
-o-transition: all 700ms ease;
122+
transition: all 700ms ease;
123+
}
124+
125+
.sidebar-nav .sidebar-sublist .sub-item.active a{
126+
color: #BFD3E9 !important;
127+
}
128+
69129
.sidebar-nav .fa-stack {
70130
font-size: 22px;
71131
color: #BFD3E9;
72132
line-height: 39px;
73133
}
74134

75135
.sidebar-nav .sidebar-items {
76-
position: absolute;
77-
width: 170px;
78136
top: 0;
79-
margin-left: 67px;
80137
background-color: transparent !important;
81138
padding-left: 0;
82139
}
83140

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

88-
.sidebar-nav .sidebar-icon {
89-
text-align: center;
90-
float: left;
91-
font-size: 22px;
92-
width: 70px;
154+
.sidebar-nav .sidebar-group .sidebar-group-link span:not(.icon){
155+
align-items: center;
156+
display: flex;
157+
}
158+
159+
.sidebar-nav .sidebar-group .sidebar-group-link span .icon{
160+
padding-top: 3px;
93161
}
94162

95-
.sidebar-nav .sidebar-title {
96-
padding-left: 20px;
163+
.sidebar-nav .sidebar-group .sidebar-group-link .chevron {
164+
font-size: 13px;
165+
}
166+
167+
.sidebar-nav .sidebar-group .sidebar-group-link .title,
168+
.sidebar-nav .sidebar-group .sidebar-group-link .icon {
97169
font-size: 18px;
170+
color: #BFD3E9;
98171
font-weight: 400;
99172
}
100173

174+
.sidebar-nav .sidebar-group .sidebar-group-link .icon {
175+
width: 40px;
176+
height: 40px;
177+
display: inline-block;
178+
text-align: center;
179+
}
180+
181+
.sidebar-nav .sidebar-group .group-sublist {
182+
margin-left: 29px;
183+
}
184+
101185
.sidebar-nav .sidebar-title.active {
102186
color: #BFD3E9 !important;
103187
}
104188

105189
.sidebar-nav li {
106190
line-height: 40px;
107191
height: auto;
108-
display: flex;
109192
}
110193

111-
.sidebar-nav .sidebar-main.active {
112-
background-color: #30426A !important;
113-
border-left: 3px solid #4eb6a2 !important;
114-
padding-right: 3px;
115-
}
194+
/*.sidebar-nav .sidebar-main.active {*/
195+
/* background: initial !important;*/
196+
/* border-left: 3px solid #4eb6a2 !important;*/
197+
/* padding-right: 3px;*/
198+
/*}*/
116199

117200
.sidebar-nav li a {
118201
display: block;
202+
color: #7285A5 !important;
119203
cursor: pointer;
120204
text-decoration: none;
121-
color: #788BAA !important;
122-
background-color: transparent !important;
205+
padding-left: 15px;
123206
}
124207

125208
.sidebar-nav li a:active,
@@ -147,10 +230,6 @@
147230
}
148231

149232
@media (min-width: 768px) {
150-
.top-bar {
151-
width: calc(100% - 240px) !important;
152-
}
153-
154233
.web-sidebar-btn {
155234
display: inline-block !important;
156235
}
@@ -160,34 +239,51 @@
160239
}
161240

162241
#wrapper {
163-
padding-left: 240px;
242+
padding-left: 265px;
164243
}
165244

166245
.fixed-brand {
167-
width: 240px;
246+
width: 265px;
168247
}
169248

170249
#wrapper.toggled {
171250
padding-left: 0;
172251
}
173252

174253
#sidebar-wrapper {
175-
width: 240px;
254+
width: 265px;
176255
}
177256

178257
#wrapper.toggled #sidebar-wrapper {
179-
width: 240px;
258+
width: 265px;
259+
}
260+
261+
#wrapper .logo-bar-table {
262+
width: 265px;
180263
}
181264

182-
#wrapper.toggled-2 #sidebar-wrapper {
265+
#wrapper.toggled-2 #sidebar-wrapper,
266+
#wrapper.toggled-2 .logo-bar{
183267
width: 70px;
184268
}
185269

186-
#wrapper.toggled-2 #sidebar-wrapper:hover {
187-
width: 240px;
270+
.logo-bar {
271+
background: #30426A;
272+
z-index: 1000;
273+
position: fixed;
274+
left: 265px;
275+
width: 265px;
276+
height: 100%;
277+
margin-left: -265px;
278+
overflow-y: hidden;
279+
-webkit-transition: all 0.5s ease;
280+
-moz-transition: all 0.5s ease;
281+
-o-transition: all 0.5s ease;
282+
transition: all 0.5s ease;
188283
}
189284

190285

286+
191287
#page-content-wrapper {
192288
padding: 20px;
193289
position: relative;
@@ -200,7 +296,7 @@
200296
#wrapper.toggled #page-content-wrapper {
201297
position: relative;
202298
margin-right: 0;
203-
padding-left: 240px;
299+
padding-left: 265px;
204300
}
205301

206302
#wrapper.toggled-2 #page-content-wrapper {
@@ -220,10 +316,6 @@
220316
}
221317
}
222318

223-
.logo-bar {
224-
height: 61px;
225-
}
226-
227319
.logo-bar .logo-bar-cell {
228320
width: 50px;
229321
padding-top: 8px;
@@ -250,7 +342,20 @@
250342

251343
.top-bar {
252344
height: 61px;
345+
width: calc(100% - 265px);
346+
right: initial;
347+
-webkit-transition: all 0.5s ease;
348+
-moz-transition: all 0.5s ease;
349+
-o-transition: all 0.5s ease;
350+
transition: all 0.5s ease;
351+
}
352+
353+
.wide-top-bar {
253354
width: calc(100% - 70px);
355+
-webkit-transition: all 0.5s ease;
356+
-moz-transition: all 0.5s ease;
357+
-o-transition: all 0.5s ease;
358+
transition: all 0.5s ease;
254359
}
255360

256361
.sidebar-nav .sub-item {
@@ -266,15 +371,42 @@
266371
padding-left: 8px;
267372
}
268373

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-
273374

274375
.sidebar-nav .sub-item .sidebar-title {
275376
padding-left: 0;
276377
}
277378

278379
.nav-stacked .nav-item + .nav-item {
279-
margin-top:0;
380+
margin-top: 0;
381+
}
382+
383+
384+
li.active {
385+
background: initial !important;
386+
color: initial !important;
387+
}
388+
389+
390+
#sidebar-wrapper .navbar-form {
391+
width: 265px;
392+
position: absolute;
393+
display: flex;
394+
justify-content: center;
395+
margin-top: 13px;
396+
border-bottom: 1px solid #3B4C72;
397+
padding-bottom: 10px;
398+
}
399+
400+
#sidebar-wrapper .navbar-form input {
401+
width: 230px;
402+
background-color: rgba(255,255,255,0.2) !important;
403+
}
404+
405+
#sidebar-wrapper .navbar-form button {
406+
position: absolute;
407+
right: 28px;
408+
}
409+
410+
.logo-bar-table {
411+
background-color: #30426a !important;
280412
}

‎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)