@natec/mef-dev-ui-kit 20.1.21 → 20.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1100 +0,0 @@
1
- @use '../vars.scss' as *;
2
- @use '_mixins.scss' as mix;
3
-
4
- .visible-xlg {
5
- display: none;
6
- }
7
- .hidden-xlg {
8
- display: block;
9
- }
10
-
11
- /*** Large screens ***/
12
- @media (min-width: 1824px) {
13
- .visible-xlg {
14
- display: block !important;
15
- }
16
- .hidden-xlg {
17
- display: none !important;
18
- }
19
-
20
- .quickview-wrapper .tab-content #quickview-notes > .inner {
21
- width: 570px;
22
- }
23
-
24
- .container-fluid {
25
- &.container-fixed-lg {
26
- width: $layout-container-fixed-lg;
27
- margin-right: auto;
28
- margin-left: auto;
29
- }
30
- }
31
- .menu-pin .container-fluid.container-fixed-lg {
32
- width: $layout-container-fixed-lg - $layout-sidepanel-pin-width;
33
- }
34
- /*.visible-xlg {
35
- display: block !important;
36
- }
37
- .hidden-xlg {
38
- display: none !important;
39
- }*/
40
-
41
- .col-xlg-1,
42
- .col-xlg-2,
43
- .col-xlg-3,
44
- .col-xlg-4,
45
- .col-xlg-5,
46
- .col-xlg-6,
47
- .col-xlg-7,
48
- .col-xlg-8,
49
- .col-xlg-9,
50
- .col-xlg-10,
51
- .col-xlg-11 {
52
- // float: left;
53
- min-height: 1px;
54
- padding-left: 15px;
55
- padding-right: 15px;
56
- position: relative;
57
- }
58
- .col-xlg-12 {
59
- // float: left;
60
- min-height: 1px;
61
- padding-left: 15px;
62
- padding-right: 15px;
63
- position: relative;
64
- // width: 100%;
65
- flex: 0 0 100%;
66
- max-width: 100%;
67
- }
68
- .col-xlg-11 {
69
- // width: 91.6667%;
70
- flex: 0 0 91.6667%;
71
- max-width: 91.6667%;
72
- }
73
- .col-xlg-10 {
74
- width: 83.3333%;
75
- flex: 0 0 83.3333%;
76
- max-width: 83.3333%;
77
- }
78
- .col-xlg-9 {
79
- // width: 75%;
80
- flex: 0 0 75%;
81
- max-width: 75%;
82
- }
83
- .col-xlg-8 {
84
- // width: 66.6667%;
85
- flex: 0 0 66.6667%;
86
- max-width: 66.6667%;
87
- }
88
- .col-xlg-7 {
89
- // width: 58.3333%;
90
- flex: 0 0 58.3333%;
91
- max-width: 58.3333%;
92
- }
93
- .col-xlg-6 {
94
- // width: 50%;
95
- flex: 0 0 50%;
96
- max-width: 50%;
97
- }
98
- .col-xlg-5 {
99
- // width: 41.6667%;
100
- flex: 0 0 41.6667%;
101
- max-width: 41.6667%;
102
- }
103
- .col-xlg-4 {
104
- // width: 33.3333%;
105
- flex: 0 0 33.3333%;
106
- max-width: 33.3333%;
107
- }
108
- .col-xlg-3 {
109
- // width: 25%;
110
- flex: 0 0 25%;
111
- max-width: 25%;
112
- }
113
- .col-xlg-2 {
114
- // width: 16.6667%;
115
- flex: 0 0 16.6667%;
116
- max-width: 16.6667%;
117
- }
118
- .col-xlg-1 {
119
- // width: 8.33333%;
120
- flex: 0 0 8.33333%;
121
- max-width: 8.33333%;
122
- }
123
- .col-xlg-pull-12 {
124
- right: 100%;
125
- }
126
- .col-xlg-pull-11 {
127
- right: 91.6667%;
128
- }
129
- .col-xlg-pull-10 {
130
- right: 83.3333%;
131
- }
132
- .col-xlg-pull-9 {
133
- right: 75%;
134
- }
135
- .col-xlg-pull-8 {
136
- right: 66.6667%;
137
- }
138
- .col-xlg-pull-7 {
139
- right: 58.3333%;
140
- }
141
- .col-xlg-pull-6 {
142
- right: 50%;
143
- }
144
- .col-xlg-pull-5 {
145
- right: 41.6667%;
146
- }
147
- .col-xlg-pull-4 {
148
- right: 33.3333%;
149
- }
150
- .col-xlg-pull-3 {
151
- right: 25%;
152
- }
153
- .col-xlg-pull-2 {
154
- right: 16.6667%;
155
- }
156
- .col-xlg-pull-1 {
157
- right: 8.33333%;
158
- }
159
- .col-xlg-pull-0 {
160
- right: 0;
161
- }
162
- .col-xlg-push-12 {
163
- left: 100%;
164
- }
165
- .col-xlg-push-11 {
166
- left: 91.6667%;
167
- }
168
- .col-xlg-push-10 {
169
- left: 83.3333%;
170
- }
171
- .col-xlg-push-9 {
172
- left: 75%;
173
- }
174
- .col-xlg-push-8 {
175
- left: 66.6667%;
176
- }
177
- .col-xlg-push-7 {
178
- left: 58.3333%;
179
- }
180
- .col-xlg-push-6 {
181
- left: 50%;
182
- }
183
- .col-xlg-push-5 {
184
- left: 41.6667%;
185
- }
186
- .col-xlg-push-4 {
187
- left: 33.3333%;
188
- }
189
- .col-xlg-push-3 {
190
- left: 25%;
191
- }
192
- .col-xlg-push-2 {
193
- left: 16.6667%;
194
- }
195
- .col-xlg-push-1 {
196
- left: 8.33333%;
197
- }
198
- .col-xlg-push-0 {
199
- left: 0;
200
- }
201
- .col-xlg-offset-12 {
202
- margin-left: 100%;
203
- }
204
- .col-xlg-offset-11 {
205
- margin-left: 91.6667%;
206
- }
207
- .col-xlg-offset-10 {
208
- margin-left: 83.3333%;
209
- }
210
- .col-xlg-offset-9 {
211
- margin-left: 75%;
212
- }
213
- .col-xlg-offset-8 {
214
- margin-left: 66.6667%;
215
- }
216
- .col-xlg-offset-7 {
217
- margin-left: 58.3333%;
218
- }
219
- .col-xlg-offset-6 {
220
- margin-left: 50%;
221
- }
222
- .col-xlg-offset-5 {
223
- margin-left: 41.6667%;
224
- }
225
- .col-xlg-offset-4 {
226
- margin-left: 33.3333%;
227
- }
228
- .col-xlg-offset-3 {
229
- margin-left: 25%;
230
- }
231
- .col-xlg-offset-2 {
232
- margin-left: 16.6667%;
233
- }
234
- .col-xlg-offset-1 {
235
- margin-left: 8.33333%;
236
- }
237
- .col-xlg-offset-0 {
238
- margin-left: 0;
239
- }
240
- }
241
- /*** Desktops ***/
242
- @media (min-width: 1600px) {
243
- }
244
- /*** Medium Size Screen ***/
245
- @media only screen and (max-width: 1400px) {
246
- .page-sidebar .-inner .sidebar-slide {
247
- .sidebar-menu {
248
- bottom: 50px;
249
- }
250
- .sidebar-widgets {
251
- display: none;
252
- }
253
- }
254
- .footer-widget {
255
- padding: 11px 21px !important;
256
- }
257
- }
258
-
259
- @media only screen and (max-width: 1199px) {
260
- .visible-xl-down {
261
- display: block !important;
262
- }
263
- }
264
-
265
- /*** Desktops & Laptops ***/
266
- @media only screen and (min-width: 980px) {
267
- body {
268
- &.ie9.menu-pin {
269
- .page-sidebar {
270
- transform: none !important;
271
- -webkit-transform: none !important;
272
- -ms-transform: none !important;
273
- }
274
- }
275
- &.menu-pin {
276
- .header .brand {
277
- width: 245px;
278
- }
279
- .page-container {
280
- padding-left: 0px;
281
- .page-content-wrapper {
282
- .content {
283
- padding-left: $layout-sidepanel-pin-width;
284
- }
285
- .footer {
286
- left: $layout-sidepanel-pin-width;
287
- }
288
- }
289
- }
290
- [data-toggle-pin='sidebar'] {
291
- & > i:before {
292
- content: '\f192';
293
- }
294
- }
295
- .page-sidebar {
296
- transform: translate($layout-sidepanel-width - $layout-sidepanel-width-collapsed, 0) !important;
297
- -webkit-transform: translate($layout-sidepanel-width - $layout-sidepanel-width-collapsed, 0) !important;
298
- -ms-transform: translate($layout-sidepanel-width - $layout-sidepanel-width-collapsed, 0) !important;
299
- width: $layout-sidepanel-pin-width;
300
- .sidebar-header .sidebar-header-controls {
301
- transform: translateX(18px);
302
- -webkit-transform: translateX(18px);
303
- }
304
- .menu-items .icon-thumbnail {
305
- transform: translate3d(-14px, 0, 0);
306
- -webkit-transform: -webkit-translate3d(-14px, 0, 0);
307
- }
308
- }
309
- }
310
- &.menu-behind {
311
- .page-sidebar {
312
- z-index: $zIndex-navbar - 1;
313
- }
314
- .header .brand {
315
- width: 200px;
316
- text-align: left;
317
- padding-left: 20px;
318
- }
319
- .header .lang {
320
- text-align: left;
321
- padding-left: 20px;
322
- }
323
- }
324
- &.box-layout {
325
- background-color: $color-white;
326
- & condensed-layout > .container,
327
- & condensed-public-layout > .container,
328
- & simplywhite-layout > .container,
329
- & corporate-layout > .container,
330
- & > .full-height > .container {
331
- height: 100%;
332
- padding: 0;
333
- background-color: $color-master-lightest;
334
- }
335
- .header {
336
- background-color: transparent;
337
- border: 0;
338
- padding: 0;
339
- & > .container {
340
- background-color: #fff;
341
- border-bottom: 1px solid rgba(230, 230, 230, 0.7);
342
- padding: 0 20px 0 0;
343
- height: 100%;
344
- }
345
- }
346
- .page-sidebar {
347
- left: auto;
348
- transform: none !important;
349
- -webkit-transform: none !important;
350
- }
351
- .page-container .page-content-wrapper .footer {
352
- width: auto;
353
- }
354
- }
355
- }
356
-
357
- .header {
358
- .brand {
359
- position: relative;
360
- }
361
- .user-info-wrapper {
362
- .user-details {
363
- .user-name {
364
- font-size: 16px;
365
- }
366
- .user-other {
367
- font-size: 10px;
368
- }
369
- }
370
- .user-pic {
371
- position: relative;
372
- top: -6px;
373
- }
374
- }
375
- }
376
-
377
- .notification-panel {
378
- width: 400px;
379
- }
380
- }
381
- /*** General Small Screen Desktops ***/
382
-
383
- /*** General tablets and phones ***/
384
- @media (max-width: 991px) {
385
- .hidden-lg-down {
386
- display: none !important;
387
- }
388
-
389
- .page-container {
390
- padding-left: 0;
391
- background-color: $color-master-lightest;
392
- }
393
-
394
- .d-flex-lg-down {
395
- display: flex;
396
- }
397
- .justify-between-lg-down {
398
- -webkit-box-pack: justify;
399
- -webkit-justify-content: space-between;
400
- -ms-flex-pack: justify;
401
- justify-content: space-between;
402
- }
403
-
404
- body {
405
- &.sidebar-open {
406
- .page-container {
407
- @include mix.translate3d(250px, 0, 0);
408
- overflow: hidden;
409
- }
410
- .push-on-sidebar-open {
411
- @include mix.translate3d(250px, 0, 0);
412
- overflow: hidden;
413
- }
414
- }
415
- &.box-layout {
416
- & condensed-layout > .container {
417
- padding: 0;
418
- height: 100%;
419
- max-width: 100%;
420
- }
421
- & condensed-public-layout > .container {
422
- padding: 0;
423
- height: 100%;
424
- max-width: 100%;
425
- }
426
- .header {
427
- & > .container {
428
- padding: 0;
429
- .pull-right .sm-action-bar {
430
- right: 0;
431
- }
432
- }
433
- }
434
- }
435
-
436
- &.horizontal-app-menu {
437
- .header {
438
- & > .container {
439
- padding: 0;
440
- }
441
- }
442
- .secondary-sidebar {
443
- margin-left: 0;
444
- }
445
- }
446
- }
447
- .sm-action-bar {
448
- position: absolute;
449
- top: 50%;
450
- transform: translateY(-50%);
451
- z-index: 10;
452
- & > a {
453
- padding: 10px;
454
- display: inline-block;
455
- }
456
- }
457
- .pace .pace-activity {
458
- top: 60px;
459
- }
460
-
461
- .page-container {
462
- padding-left: 0;
463
- // z-index: 100;
464
- position: relative;
465
- transition: transform 0.25s ease;
466
- -webkit-transition: -webkit-transform 0.25s ease;
467
- .page-content-wrapper .content {
468
- overflow-x: clip;
469
- height: auto; // minimizes address bar on scroll
470
- }
471
- }
472
-
473
- .icon-thumbnail {
474
- margin-right: 24px;
475
- }
476
-
477
- .secondary-sidebar {
478
- float: none;
479
- height: auto;
480
- left: 50%;
481
- margin-left: -125px;
482
- padding: 20px;
483
- position: absolute;
484
- right: 0;
485
- top: 60px;
486
- z-index: 9999;
487
- display: none;
488
- border-radius: 10px;
489
- .btn-compose {
490
- display: none;
491
- }
492
- }
493
- .inner-content,
494
- .horizontal-app-menu .inner-content {
495
- margin: 0;
496
- }
497
- .breadcrumb {
498
- padding-left: 15px;
499
- padding-right: 15px;
500
- }
501
- .copyright {
502
- padding-left: 15px;
503
- padding-right: 15px;
504
- }
505
-
506
- // Pages Notification customizations
507
- body > .pgn-wrapper[data-position='top'] {
508
- top: $layout-mobile-header-height;
509
- left: 0;
510
- }
511
- body > .pgn-wrapper[data-position='bottom'] {
512
- left: 0;
513
- }
514
-
515
- body > .pgn-wrapper[data-position$='-left'] {
516
- left: 20px;
517
- right: auto;
518
- }
519
-
520
- .sm-table {
521
- display: table;
522
- width: 100%;
523
- }
524
- .user-profile-wrapper {
525
- position: absolute;
526
- right: 50px;
527
- top: -9px;
528
- }
529
-
530
- .container {
531
- width: 100%;
532
- }
533
-
534
- //Table Block
535
- .table-responsive-block {
536
- table,
537
- thead,
538
- tbody,
539
- th,
540
- td,
541
- tr {
542
- display: block;
543
- }
544
- thead tr {
545
- position: absolute;
546
- top: -9999px;
547
- left: -9999px;
548
- }
549
- tr {
550
- border: 1px solid rgba(230, 230, 230, 0.7);
551
- margin-bottom: 15px;
552
- }
553
- td {
554
- /* Behave like a "row" */
555
- border: none;
556
- border-bottom: 1px solid #eee;
557
- position: relative;
558
- padding-left: 50%;
559
- white-space: normal;
560
- text-align: left;
561
- &:last-child {
562
- border-bottom: 0;
563
- }
564
- &:before {
565
- /* Now like a table header */
566
- position: absolute;
567
- /* Top/left values mimic padding */
568
- top: 6px;
569
- left: 6px;
570
- width: 45%;
571
- padding-right: 10px;
572
- white-space: nowrap;
573
- text-align: left;
574
- font-weight: bold;
575
- }
576
- &:before {
577
- content: attr(data-title);
578
- }
579
- }
580
- }
581
- .kill-pull-md-down {
582
- position: relative;
583
- display: block;
584
- width: inherit;
585
- .toggle-secondary-sidebar {
586
- display: inline-block;
587
- font-size: 18px;
588
- }
589
- }
590
-
591
- //set a min hieght for dropdown tabs
592
- .nav-tabs-header.nav-tabs-linetriangle {
593
- height: 61px;
594
- }
595
-
596
- .overlay {
597
- padding-left: 15px;
598
- }
599
- }
600
-
601
- /* Landscape view of all tablet devices */
602
- @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
603
- .page-sidebar .sidebar-menu .menu-items ul {
604
- -webkit-transform: translateZ(0);
605
- -webkit-backface-visibility: hidden;
606
- -webkit-perspective: 1000;
607
- }
608
- .page-container {
609
- .page-content-wrapper {
610
- .content {
611
- padding-top: $layout-header-height;
612
- }
613
- }
614
- }
615
- body.box-layout condensed-layout > .container {
616
- width: 100%;
617
- max-width: 100%;
618
- }
619
- body.box-layout condensed-public-layout > .container {
620
- width: 100%;
621
- max-width: 100%;
622
- }
623
- .inner-content {
624
- margin-left: 0;
625
- }
626
- .secondary-sidebar {
627
- float: none;
628
- height: auto;
629
- left: 50%;
630
- margin-left: -155px;
631
- padding: 20px;
632
- position: absolute;
633
- right: 0;
634
- top: $layout-header-height;
635
- z-index: 9999;
636
- display: none;
637
- border-radius: 10px;
638
- }
639
- .horizontal-app-menu .secondary-sidebar {
640
- display: inline-block;
641
- position: relative;
642
- top: inherit;
643
- left: inherit;
644
- right: inherit;
645
- padding: 20px 0;
646
- border-radius: 0;
647
- float: left;
648
- height: 100%;
649
- }
650
- .split-details {
651
- margin-left: 0;
652
- }
653
- .toggle-secondary-sidebar {
654
- font-size: 18px;
655
- display: block;
656
- font-size: 18px;
657
- left: 50%;
658
- margin-left: -36px;
659
- position: absolute;
660
- & ~ .brand {
661
- display: none !important;
662
- }
663
- }
664
- //Email Fix
665
- .no-brand {
666
- margin-left: $layout-sidepanel-width-collapsed;
667
- }
668
- }
669
-
670
- /* Portrait - ipad pro*/
671
- @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
672
- .inner-content {
673
- margin-left: 0;
674
- }
675
- }
676
-
677
- // Resolution specific borders
678
- @media (max-width: 991px) {
679
- .sm-b-r,
680
- .sm-b-l,
681
- .sm-b-t,
682
- .sm-b-b {
683
- border-width: 0;
684
- }
685
- .sm-b-r {
686
- border-right-width: 1px;
687
- }
688
- .sm-b-l {
689
- border-left-width: 1px;
690
- }
691
- .sm-b-t {
692
- border-top-width: 1px;
693
- }
694
- .sm-b-b {
695
- border-bottom-width: 1px;
696
- }
697
- .sidebar-menu {
698
- .icon-thumbnail {
699
- margin-right: 15px;
700
- }
701
- }
702
- }
703
-
704
- // Make all columns equal height
705
- // (Not applied for resolutions lowers than mentioned ex:lg,md,sm
706
- // because they stack up)
707
- @media (min-width: 1200px) {
708
- .row-same-height {
709
- overflow: hidden;
710
- & > [class*='col-lg'] {
711
- margin-bottom: -99999px;
712
- padding-bottom: 99999px;
713
- }
714
- }
715
- }
716
-
717
- @media (max-width: 1199px) and (min-width: 992px) {
718
- //@TODO : Old Media Query current BS4 doesnt not allow this.
719
- .visible-md {
720
- display: block !important;
721
- }
722
- }
723
-
724
- @media (min-width: 992px) {
725
- .row-same-height {
726
- overflow: hidden;
727
- & > [class*='col-md'] {
728
- margin-bottom: -99999px;
729
- padding-bottom: 99999px;
730
- }
731
- }
732
- }
733
-
734
- @media (min-width: 768px) {
735
- .row-same-height {
736
- overflow: hidden;
737
- & > [class*='col-sm'] {
738
- margin-bottom: -99999px;
739
- padding-bottom: 99999px;
740
- }
741
- }
742
- .box-layout .container .jumbotron,
743
- .container-fluid .jumbotron {
744
- padding: 0;
745
- }
746
- .d-flex-md-up {
747
- display: flex;
748
- }
749
-
750
- .navbar-toggle {
751
- display: none;
752
- }
753
- .navbar-collapse.collapse {
754
- display: block !important;
755
- height: auto !important;
756
- padding-bottom: 0;
757
- overflow: visible !important;
758
- }
759
- .dataTables_wrapper.form-inline .checkbox input[type='checkbox'],
760
- .form-inline .radio input[type='radio'] {
761
- position: absolute;
762
- }
763
- .justify-end-md-up {
764
- -webkit-box-pack: end;
765
- -webkit-justify-content: flex-end;
766
- -ms-flex-pack: end;
767
- justify-content: flex-end;
768
- }
769
- }
770
-
771
- @media (min-width: 700px) {
772
- .dd {
773
- float: none;
774
- }
775
- }
776
-
777
- /* Portrait view of all tablet devices */
778
- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
779
- .page-sidebar .sidebar-menu .menu-items > li {
780
- & > a {
781
- padding-left: 27px;
782
- }
783
- ul.sub-menu > li {
784
- padding: 0px 27px 0 31px;
785
- }
786
- }
787
-
788
- .icon-thumbnail {
789
- margin-right: 21px;
790
- }
791
- }
792
-
793
- //MD Screen
794
- @media (max-width: 991px) and (min-width: 768px) {
795
- //OLD BS classes Remove later
796
- .visible-sm {
797
- display: block;
798
- }
799
- .hidden-sm {
800
- display: none;
801
- }
802
- .visible-sm-inline-block {
803
- display: inline-block !important;
804
- }
805
- //New Screen Prefix padding and margin
806
- @include mix.generate-paddings-options-prefix('md', 3);
807
- @include mix.generate-margin-options-prefix('md', 3);
808
- }
809
-
810
- @media (max-width: 979px) {
811
- .toggle-secondary-sidebar {
812
- font-size: 18px;
813
- position: static;
814
- display: block;
815
- & ~ .brand {
816
- display: none !important;
817
- }
818
- }
819
-
820
- .secondary-sidebar {
821
- float: none;
822
- height: auto;
823
- left: 50%;
824
- margin-left: -125px;
825
- padding: 20px;
826
- position: absolute;
827
- right: 0;
828
- top: $layout-header-height;
829
- z-index: 9999;
830
- display: none;
831
- border-radius: 10px;
832
- }
833
-
834
- .split-view {
835
- .split-list {
836
- width: 100%;
837
- height: auto;
838
- bottom: 50px;
839
- left: 0;
840
- top: 0;
841
- position: absolute;
842
- z-index: 1000;
843
- float: none;
844
- .item {
845
- padding: 8px;
846
- .inline {
847
- width: 188px;
848
- }
849
- }
850
- }
851
-
852
- .split-details {
853
- margin-left: 0;
854
- width: 100%;
855
-
856
- .email-content-wrapper {
857
- overflow: auto;
858
- padding: 0;
859
- height: calc(100% - 50px);
860
- .email-content {
861
- width: 90%;
862
- }
863
- }
864
- }
865
- }
866
-
867
- .compose-wrapper {
868
- display: block !important;
869
- .btn-compose {
870
- display: block !important;
871
- }
872
- }
873
- }
874
-
875
- @media (max-width: 767px) {
876
- .jumbotron,
877
- .container-fluid {
878
- padding-left: 0;
879
- padding-right: 0;
880
- }
881
-
882
- .page-container .page-content-wrapper .content {
883
- padding-top: $layout-mobile-header-height;
884
- padding-bottom: 100px;
885
- }
886
- .page-sidebar .sidebar-header {
887
- padding: 0 12px;
888
- }
889
-
890
- .page-sidebar .sidebar-menu .menu-items > li {
891
- & > a {
892
- padding-left: 20px;
893
- }
894
- ul.sub-menu > li {
895
- padding: 0px 25px 0 28px;
896
- }
897
- }
898
-
899
- .icon-thumbnail {
900
- margin-right: 20px;
901
- }
902
- .secondary-sidebar {
903
- top: $layout-mobile-header-height;
904
- }
905
- .split-details {
906
- margin-left: 0;
907
- }
908
- .email-composer {
909
- padding-left: 30px;
910
- padding-right: 30px;
911
- }
912
-
913
- .sm-pull-bottom,
914
- .sm-pull-up {
915
- position: relative !important;
916
- }
917
-
918
- //Generate Margin and Paddings.
919
- @include mix.generate-paddings-options-prefix('sm', 10);
920
- @include mix.generate-margin-options-prefix('sm', 10);
921
-
922
- .sm-no-margin {
923
- margin: 0px;
924
- }
925
- .sm-no-padding {
926
- padding: 0px !important;
927
- }
928
- .sm-text-right {
929
- text-align: right !important;
930
- }
931
- .sm-text-left {
932
- text-align: left !important;
933
- }
934
- .sm-text-center {
935
- text-align: center !important;
936
- }
937
- .sm-pull-right {
938
- float: right !important;
939
- }
940
- .sm-pull-left {
941
- float: left !important;
942
- }
943
- .sm-pull-reset {
944
- float: none !important;
945
- }
946
- .sm-block {
947
- display: block;
948
- }
949
-
950
- .sm-image-responsive-height {
951
- width: 100%;
952
- height: auto;
953
- }
954
- .email-composer {
955
- padding-left: 30px;
956
- padding-right: 30px;
957
- }
958
-
959
- .sm-padding-10 {
960
- padding: 10px !important;
961
- }
962
-
963
- .sm-padding-15 {
964
- padding: 15px !important;
965
- }
966
-
967
- .lock-box {
968
- align-items: flex-start;
969
- height: auto;
970
- }
971
- .login-box {
972
- padding-right: 15px;
973
- padding-left: 15px;
974
- }
975
-
976
- .visible-xs-inline-block {
977
- display: inline-block !important;
978
- }
979
-
980
- .sm-padding-10 {
981
- padding: 10px !important;
982
- }
983
-
984
- .lock-box {
985
- align-items: flex-start;
986
- height: auto;
987
- }
988
- .login-box {
989
- padding-right: 15px;
990
- padding-left: 15px;
991
- }
992
- .visible-xs-inline-block {
993
- display: inline-block !important;
994
- }
995
-
996
- .nav-tabs-linetriangle {
997
- &.nav-cust {
998
- flex-direction: column;
999
- }
1000
- li {
1001
- a.active:after,
1002
- a.active:before {
1003
- display: none;
1004
- }
1005
- }
1006
- }
1007
-
1008
- //View Port Heights
1009
- .sm-vh-25 {
1010
- height: 25vh;
1011
- }
1012
- .sm-vh-50 {
1013
- height: 50vh;
1014
- }
1015
- .sm-vh-75 {
1016
- height: 75vh !important;
1017
- }
1018
- .sm-vh-100 {
1019
- height: 100vh;
1020
- }
1021
-
1022
- .horizontal-app-menu {
1023
- .page-container .page-content-wrapper .content pg-container > .container {
1024
- padding-left: 0;
1025
- padding-right: 0;
1026
- }
1027
- }
1028
-
1029
- //Summernote btn-group wrap
1030
- .summernote-wrapper .btn-group {
1031
- -ms-flex-flow: wrap;
1032
- flex-flow: wrap;
1033
- }
1034
- }
1035
-
1036
- /*** Phones ***/
1037
- @media (max-width: 480px) {
1038
- body {
1039
- width: 100%;
1040
- #overlay-search {
1041
- font-size: 48px;
1042
- height: 118px;
1043
- line-height: 46px;
1044
- }
1045
- }
1046
- .page-sidebar .sidebar-header {
1047
- height: $layout-mobile-header-height;
1048
- line-height: $layout-mobile-header-height;
1049
- }
1050
- .panel {
1051
- .panel-heading {
1052
- padding-left: 15px;
1053
- }
1054
- .panel-body {
1055
- padding: 15px;
1056
- padding-top: 0;
1057
- }
1058
- }
1059
- .map-controls {
1060
- left: 10px;
1061
- }
1062
- .register-container {
1063
- height: auto !important;
1064
- }
1065
- }
1066
-
1067
- /*** Retina Display Images **/
1068
- @media only screen and (-webkit-min-device-pixel-ratio: 2),
1069
- only screen and (min--moz-device-pixel-ratio: 2),
1070
- only screen and (-o-min-device-pixel-ratio: 200/100),
1071
- only screen and (min-device-pixel-ratio: 2) {
1072
- .editor-icon {
1073
- background-size: 480px 40px;
1074
- }
1075
- .alert .close {
1076
- background-position: -9px -10px;
1077
- width: 10px;
1078
- height: 9px;
1079
- position: relative;
1080
- opacity: 0.8;
1081
- background-size: 114px 29px;
1082
- }
1083
- }
1084
-
1085
- .hidden {
1086
- display: none !important;
1087
- }
1088
- .visible-sm,
1089
- .visible-xs {
1090
- display: none;
1091
- }
1092
-
1093
- @media (max-width: 767px) {
1094
- .visible-xs {
1095
- display: block;
1096
- }
1097
- .hidden-xs {
1098
- display: none;
1099
- }
1100
- }