source: resources/assets/sass/responsive.scss@ 582789f

develop
Last change on this file since 582789f was 7304c7f, checked in by beratkjufliju <kufliju@…>, 3 years ago

added user authentication, create & forgot password methods and blades

  • Property mode set to 100644
File size: 8.9 KB
Line 
1@media (max-width: 1200px) {
2 .header .header-toggler {
3 display: block;
4 }
5
6 .chat-app .layout-wrapper .content-wrapper .content-body .content {
7 padding-left: 0 !important;
8 }
9
10 .chat-block {
11 position: relative;
12
13 .chat-content {
14 display: none;
15
16 .chat-header {
17 padding: .5rem 1.5rem;
18 }
19
20 .mobile-chat-close-btn {
21 display: block;
22 }
23
24 &.chat-mobile-open {
25 display: flex;
26 background-color: white;
27 position: absolute;
28 right: 0;
29 left: 0;
30 max-width: 100%;
31 z-index: 2;
32 bottom: 0;
33 }
34 }
35
36 .chat-sidebar {
37 flex: 1;
38 border-right: none;
39 max-width: 100% !important;
40 }
41 }
42
43 .header {
44 margin: 0;
45
46 .header-left {
47 .navigation-toggler {
48 display: block !important;
49 }
50 }
51
52 div:nth-child(2) {
53
54 ul.navbar-nav:first-child {
55 display: none;
56 background: darken(white, 10%);
57 position: fixed;
58 left: 0;
59 right: 0;
60 top: $header-height;
61
62 li {
63 a {
64 color: black;
65 }
66 }
67
68 &.open {
69 display: flex;
70 flex-wrap: wrap;
71 }
72 }
73 }
74
75 .header-search .input-group {
76 background-color: white;
77
78 .btn {
79 color: black
80 }
81
82 input.form-control {
83 &:focus {
84 color: black;
85 }
86
87 &::placeholder {
88 color: #9b9b9b
89 }
90 }
91 }
92
93 .navigation-toggler, .navbar-toggler {
94 a {
95 background: none !important;
96 }
97 }
98
99 .navigation-toggler {
100 display: none !important;
101
102 &.mobile-toggler {
103 display: block !important;
104 }
105 }
106
107 .navigation-toggler a:hover {
108 background: none !important;
109 }
110
111 .dropdown {
112 position: static;
113 }
114
115 .dropdown-menu {
116 right: 1rem !important;
117 top: auto !important;
118 left: 1rem !important;
119 margin-top: 10px;
120 width: auto !important;
121 transform: inherit !important;
122 }
123 }
124
125 .layout-wrapper .content-wrapper .content-body .content {
126 padding-left: 30px;
127 }
128
129 .content-footer {
130 margin-left: 0 !important;
131 }
132
133 .navigation {
134 background-color: white;
135 z-index: 1000;
136 box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .15);
137 left: -80%;
138 top: 0;
139 bottom: 0;
140 opacity: 0;
141 transition: left .2s;
142 position: fixed !important;
143
144 &.open {
145 left: 0;
146 opacity: 1;
147 }
148
149 header.navigation-header {
150 padding-top: 20px;
151 }
152
153 .navigation-icon-menu {
154 margin: 0;
155 border-radius: 0;
156 }
157
158 .navigation-menu-body {
159 padding: 15px 0;
160 }
161 }
162
163 .page-header {
164 padding: 0;
165 margin-top: 0;
166 margin-right: 0;
167 margin-left: 0;
168 }
169
170 .user-page {
171 padding: 20px;
172 height: auto;
173
174 .card {
175 width: auto;
176
177 .card-body {
178 padding: 30px;
179 }
180 }
181 }
182}
183
184@media (max-width: 992px) {
185
186 .app-block {
187 position: relative;
188
189 .app-sidebar-menu-button {
190 display: inline-flex;
191 margin-right: 1rem;
192 }
193
194 .app-sidebar {
195 display: none;
196 position: absolute;
197 left: 0;
198 z-index: 9;
199 flex: 0 0 35%;
200 max-width: 35%;
201 bottom: 0;
202
203 .app-sidebar-menu {
204 overflow: auto;
205 }
206
207 &.show {
208 display: block;
209 }
210
211 & > .card {
212 box-shadow: 3px 0px 15px -10px black;
213 border-top-right-radius: 0;
214 border-bottom-right-radius: 0;
215 }
216 }
217
218 .app-content {
219 flex: 0 0 100%;
220 max-width: 100%;
221
222 .app-action {
223 flex-direction: column-reverse;
224
225 .action-right {
226 margin-left: 0;
227 margin-bottom: 1rem;
228 }
229 }
230
231 .app-detail .card-header {
232 flex-direction: column;
233 align-items: stretch !important;
234
235 .app-detail-action-right {
236 margin-left: 0 !important;
237 margin-top: 1rem;
238 }
239 }
240 }
241 }
242
243 .card {
244 margin-bottom: 1rem;
245
246 .card-body {
247 padding: 1.2rem;
248 }
249 }
250
251}
252
253@media (max-width: 768px) {
254
255 body.form-membership .form-wrapper {
256 width: 90%;
257 margin: 30px auto;
258 }
259
260 body.horizontal-navigation {
261 .horizontal-navigation.open {
262 width: 80%;
263 }
264 }
265
266 .app-block .app-content .app-action .action-right {
267 form {
268 margin-right: 0 !important;
269 }
270
271 .app-pager {
272 display: none !important;
273 }
274 }
275
276 .app-block {
277 .app-sidebar {
278 flex: 0 0 70%;
279 max-width: 70%;
280 }
281 }
282
283 .chat-block {
284 .chat-sidebar {
285 &.border-right {
286 border-right: none !important;
287 }
288 }
289 }
290
291 .toast-top-right {
292 top: 1rem;
293 right: 1rem;
294 }
295
296 .toast-top-left {
297 top: 1rem;
298 left: 1rem;
299 }
300
301 .header {
302 .header-left {
303 width: auto;
304 }
305
306 .page-title {
307 display: none;
308 }
309 }
310
311 footer {
312 padding: 15px 20px;
313
314 .nav {
315 display: none;
316 }
317 }
318
319 .table-responsive-stack tr {
320 -webkit-box-orient: vertical;
321 -webkit-box-direction: normal;
322 -ms-flex-direction: column;
323 flex-direction: column;
324 border-bottom: 3px solid #ccc;
325 display: block;
326 }
327 /* IE9 FIX */
328 .table-responsive-stack td {
329 float: left \9
330 ;
331 width: 100%;
332 }
333
334 .sidebar {
335 & > ul.nav {
336 display: flex;
337
338 li.nav-item {
339 border: none;
340 }
341 }
342 }
343
344 .user-page {
345 padding: 20px;
346 height: auto;
347
348 .card {
349 width: 100%;
350
351 .card-body {
352 padding: 30px;
353 }
354 }
355 }
356
357 .fc {
358 .fc-toolbar {
359 &.fc-header-toolbar {
360 & > div {
361 float: none !important;
362
363 .fc-button-group {
364 float: none !important;
365 }
366
367 &.fc-left {
368 display: flex;
369 justify-content: center;
370 margin-bottom: 15px;
371 }
372
373 &.fc-right {
374 margin-bottom: 5px;
375 }
376 }
377 }
378 }
379 }
380}
381
382@media (max-width: 414px) {
383
384 .nav {
385 display: block;
386 border: none;
387
388 li.nav-item {
389 margin-bottom: 0;
390
391 &:last-child {
392 border: none;
393 }
394
395 a.nav-link {
396 border: none;
397 }
398 }
399 }
400
401 body:not(.semi-dark):not(.dark) {
402 .nav {
403 li.nav-item {
404 border-bottom: 1px solid #ebebeb;
405 }
406 }
407 }
408
409 .navigation header.navigation-header .nav {
410 display: flex;
411 }
412
413 body.dark {
414 .nav {
415 li.nav-item {
416 border-bottom-color: #6d748e;
417 }
418 }
419 }
420
421 .wizard > .steps > ul > li {
422 float: none;
423 width: 100%;
424 margin-bottom: 10px;
425 }
426
427 .wizard > .content {
428 background: none;
429 }
430
431 .wizard > .content > .body {
432 position: static;
433 padding: 0;
434 }
435
436 .dataTables_wrapper {
437 .dataTables_filter {
438 display: block;
439 }
440 }
441
442 .navigation {
443 width: 75%;
444 }
445
446 .page-header {
447 .breadcrumb {
448 display: none;
449 }
450 }
451}
452
453@media (max-width: 375px) {
454 nav.navbar {
455 .navbar-menu {
456 padding-left: 0;
457 }
458 }
459
460 .navigation {
461 width: 85%;
462 }
463
464}
465
466@media (max-width: 544px) {
467 .text-xs-center {
468 text-align: center !important;
469 }
470 .text-xs-left {
471 text-align: left !important;
472 }
473 .text-xs-right {
474 text-align: right !important;
475 }
476}
477
478@media print {
479 .page-header {
480 display: none;
481 }
482}
Note: See TracBrowser for help on using the repository browser.