3c1293b452bc947272712cb6cbf65107f8b5badf
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / adminpanel.scss
1 //
2 // Admin panel
3 // ===========
4 // Contains all needed styles for the Admin Panel.
5 //
6
7 //
8 // Load Variables
9 //
10 @import "bootstrap/variables";
11 @import "variables/main";
12
13 //
14 // Variables
15 //
16 $adminPanel-zindex: 99990;
17 $adminPanel-zindex-backdrop: 99991;
18 $adminPanel-zindex-bar: 99992;
19 $adminPanel-prefix: '#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel';
20 $adminPanel-bg: $gray-darker;
21 $adminPanel-color: $gray-lighter;
22 $adminPanel-success: #629755;
23 $adminPanel-danger: $brand-danger;
24
25 // Message
26 $adminPanel-message-bg: #fff;
27 $adminPanel-message-padding: 20px;
28 $adminPanel-message-default-border: #cacaca;
29 $adminPanel-message-info-border: #538bb3;
30
31 // Bar
32 $adminPanel-bar-height: 36px;
33 $adminPanel-bar-bg: #424242;
34 $adminPanel-bar-border-color: #383838;
35 $adminPanel-bar-color: #fff;
36 $adminPanel-bar-active-bg: #525252;
37 $adminPanel-bar-hover-bg: #525252;
38
39 // Header
40 $adminPanel-header-height: 36px;
41 $adminPanel-header-bg: #eaeaea;
42 $adminPanel-header-border-color: #dadada;
43 $adminPanel-header-color: #333;
44 $adminPanel-header-active-bg: #fafafa;
45 $adminPanel-header-hover-bg: #e1e1e1;
46
47 // Content
48 $adminPanel-content-padding: 20px;
49 $adminPanel-content-bg: #fafafa;
50 $adminPanel-content-border-color: #dadada;
51 $adminPanel-content-color: #333;
52
53 // Table
54 $adminPanel-table-bg: #fff;
55 $adminPanel-table-border: #e0e0e0;
56 $adminPanel-table-header-bg: #e0e0e0;
57
58 // Card
59 $adminPanel-card-bg: #fff;
60 $adminPanel-card-padding: 20px;
61
62 // Input
63 $adminPanel-input-bg: #fff;
64 $adminPanel-input-border: #dadada;
65 $adminPanel-input-hover-border: #cacaca;
66 $adminPanel-input-border-radius: 2px;
67 $adminPanel-input-vertical-padding: 1.25em;
68 $adminPanel-input-horizontal-padding: 0.75em;
69
70 //
71 // Mixins
72 //
73 @mixin make-col($size, $columns: 12) {
74 flex: 0 0 percentage($size / $columns);
75 max-width: percentage($size / $columns);
76 }
77
78 //
79 // Font Awesome
80 //
81 @font-face {
82 font-family: 'TYPO3FontAwesome';
83 src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=4.6.3');
84 src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('#{$fa-font-path}/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('#{$fa-font-path}/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('#{$fa-font-path}/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('#{$fa-font-path}/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
85 font-weight: normal;
86 font-style: normal;
87 }
88
89 //
90 // Reset
91 //
92 #{$adminPanel-prefix} {
93 z-index: $adminPanel-zindex;
94
95 * {
96 background: none;
97 border: 0;
98 box-shadow: none;
99 box-sizing: border-box;
100 vertical-align: baseline;
101 letter-spacing: normal;
102 width: auto;
103 height: auto;
104 font-family: $font-family-sans-serif;
105 font-size: $font-size-base;
106 font-weight: normal;
107 white-space: normal;
108 margin: 0;
109 padding: 0;
110 }
111
112 *,
113 *:active,
114 *:focus,
115 *:hover {
116 outline: 0;
117 }
118 }
119
120 //
121 // Shared Components
122 //
123 #{$adminPanel-prefix} {
124 @import "component/icon";
125 }
126
127 //
128 // Backdrop
129 //
130 #{$adminPanel-prefix} {
131 .typo3-adminPanel-backdrop {
132 z-index: $adminPanel-zindex-backdrop;
133 content: '';
134 position: fixed;
135 top: 0;
136 left: 0;
137 right: 0;
138 bottom: 0;
139 background-color: rgba(0, 0, 0, 0.5);
140 }
141 }
142
143 //
144 // Message
145 //
146 #{$adminPanel-prefix} {
147 .typo3-adminPanel-message {
148 padding: $adminPanel-message-padding;
149 background-color: $adminPanel-message-bg;
150 border-left: 3px solid $adminPanel-message-default-border;
151 margin-bottom: 1em;
152 box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
153 }
154
155 .typo3-adminPanel-message-info {
156 border-left-color: $adminPanel-message-info-border;
157 }
158 }
159
160 //
161 // Bar
162 //
163 #{$adminPanel-prefix} {
164 .typo3-adminPanel-bar {
165 z-index: $adminPanel-zindex-bar;
166 display: flex;
167 flex-flow: row;
168 justify-content: stretch;
169 position: fixed;
170 bottom: 0;
171 left: auto;
172 right: 0;
173 height: $adminPanel-bar-height + 1px;
174 background-color: $adminPanel-bar-bg;
175 color: $adminPanel-bar-color;
176 border-bottom: 1px solid $adminPanel-bar-border-color;
177 }
178
179 &.typo3-adminPanel-active .typo3-adminPanel-bar {
180 left: 0;
181 }
182
183 @media (min-width: 768px) {
184 .typo3-adminPanel-bar {
185 right: 20px;
186 }
187
188 &.typo3-adminPanel-active .typo3-adminPanel-bar {
189 left: 20px;
190 }
191 }
192 }
193
194 //
195 // Module
196 //
197 #{$adminPanel-prefix} {
198 .typo3-adminPanel-module {
199 display: flex;
200 padding: 0 10px;
201 align-items: center;
202 border-right: 1px solid $adminPanel-bar-border-color;
203 }
204
205 .typo3-adminPanel-module-settings {
206 margin-left: auto;
207 }
208
209 .typo3-adminPanel-module-logo + .typo3-adminPanel-module-toggle {
210 border-left: none;
211 }
212
213 .typo3-adminPanel-module-settings {
214 .typo3-adminPanel-module-trigger-label {
215 display: none;
216
217 @media (min-width: $screen-sm) {
218 display: block;
219 }
220 }
221 }
222
223 .typo3-adminPanel-module-settings,
224 .typo3-adminPanel-module-toggle {
225 border-left: 1px solid $adminPanel-bar-border-color;
226 border-right: none;
227 }
228 }
229
230 //
231 // Module Group
232 //
233 #{$adminPanel-prefix} {
234 .typo3-adminPanel-module-group {
235 width: 100%;
236 overflow: hidden;
237 display: flex;
238 }
239 }
240
241 //
242 // Trigger
243 //
244 #{$adminPanel-prefix} {
245 .typo3-adminPanel-module-trigger {
246 display: flex;
247 align-items: center;
248 padding: 0 10px;
249 margin-left: -10px;
250 margin-right: -10px;
251 font-size: 12px;
252 color: #fff;
253 height: $adminPanel-bar-height;
254
255 > span {
256 white-space: nowrap;
257
258 + span {
259 margin-left: 4px;
260 }
261 }
262 }
263
264 .typo3-adminPanel-module-active .typo3-adminPanel-module-trigger {
265 background-color: $adminPanel-bar-active-bg;
266 }
267
268 [data-typo3-role="typo3-adminPanel-module-trigger"],
269 [data-typo3-role="typo3-adminPanel-trigger"] {
270 cursor: pointer;
271
272 &:focus,
273 &:hover {
274 background-color: $adminPanel-bar-hover-bg;
275 }
276 }
277
278 .typo3-adminPanel-module-trigger-icon {
279 .icon-color {
280 fill: currentColor;
281 }
282
283 .icon-actions-edit-hide {
284 color: $adminPanel-success;
285 }
286
287 .icon-actions-edit-unhide {
288 color: $adminPanel-danger;
289 }
290 }
291
292 .typo3-adminPanel-module-trigger-information {
293 display: none;
294 opacity: 0.5;
295
296 @media (min-width: $screen-sm) {
297 display: block;
298 }
299 }
300 }
301
302 //
303 // Content
304 //
305 #{$adminPanel-prefix} {
306 .typo3-adminPanel-content {
307 display: none;
308 flex-direction: column;
309 position: fixed;
310 bottom: $adminPanel-bar-height + 1;
311 top: 20vh;
312 left: 20px;
313 right: 20px;
314 background-color: $adminPanel-content-bg;
315 color: $adminPanel-content-color;
316 border-bottom: 1px solid $adminPanel-bar-border-color;
317 }
318
319 .typo3-adminPanel-content-main {
320 position: relative;
321 padding: 20px;
322 height: 100%;
323 overflow: auto;
324
325 > *:first-child {
326 margin-top: 0;
327 }
328
329 > *:last-child {
330 margin-bottom: 0;
331 }
332 }
333
334 .typo3-adminPanel-module-active {
335 .typo3-adminPanel-content {
336 display: flex;
337 }
338 }
339 }
340
341 //
342 // Content Header
343 //
344 #{$adminPanel-prefix} {
345 .typo3-adminPanel-content-header {
346 position: relative;
347 display: flex;
348 align-items: center;
349 justify-content: space-between;
350 height: $adminPanel-header-height + 1;
351 flex-shrink: 0;
352 color: $adminPanel-header-color;
353 background-color: $adminPanel-header-bg;
354
355 &:before {
356 content: '';
357 position: absolute;
358 bottom: 0;
359 left: 0;
360 right: 0;
361 height: 1px;
362 background-color: $adminPanel-header-border-color;
363 }
364 }
365
366 .typo3-adminPanel-content-header-item {
367 display: flex;
368 align-items: center;
369 height: $adminPanel-header-height + 1;
370 padding: 0 10px;
371 border-right: 1px solid $adminPanel-header-border-color;
372 border-bottom: 1px solid $adminPanel-header-border-color;
373 }
374
375 a.typo3-adminPanel-content-header-item {
376 color: inherit;
377 text-decoration: none;
378 position: relative;
379
380 &:hover,
381 &:focus {
382 background-color: $adminPanel-header-hover-bg;
383 }
384
385 &.typo3-adminPanel-content-header-item-active {
386 background-color: $adminPanel-header-active-bg;
387
388 &:before {
389 content: '';
390 position: absolute;
391 bottom: -1px;
392 left: 0;
393 right: 0;
394 height: 1px;
395 background-color: $adminPanel-header-active-bg;
396 }
397 }
398 }
399
400 .typo3-adminPanel-content-header-title {
401 position: relative;
402 color: $adminPanel-bar-color;
403 background-color: $adminPanel-bar-bg;
404 border-right: 1px solid $adminPanel-bar-border-color;
405
406 &:before {
407 content: '';
408 position: absolute;
409 bottom: -1px;
410 left: 0;
411 right: 0;
412 height: 1px;
413 background-color: lighten($adminPanel-bar-border-color, 15%);
414 }
415
416 > span + span {
417 margin-left: 4px;
418 }
419 }
420
421 .typo3-adminPanel-content-header-settings,
422 .typo3-adminPanel-content-header-close {
423 cursor: pointer;
424 border-right: 0;
425 border-left: 1px solid $adminPanel-header-border-color;
426 }
427 }
428
429 //
430 // Content Navigation
431 //
432 #{$adminPanel-prefix} {
433 .typo3-adminPanel-content-nav {
434 width: 100%;
435 overflow: hidden;
436 display: flex;
437 }
438 }
439
440 //
441 // Content Settings
442 //
443 #{$adminPanel-prefix} {
444 .typo3-adminPanel-content-settings {
445 flex-shrink: 0;
446 max-height: 50%;
447 overflow-y: auto;
448 display: none;
449 background-color: $adminPanel-content-bg;
450 padding: $adminPanel-content-padding;
451 border-bottom: 1px solid $adminPanel-content-border-color;
452 box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
453
454 &.typo3-adminPanel-content-settings-active {
455 display: block;
456 }
457 }
458
459 .typo3-adminPanel-content-settings,
460 .typo3-adminPanel-content-settings-group {
461 > *:first-child {
462 margin-top: 0;
463 }
464
465 > *:last-child {
466 margin-bottom: 0;
467 }
468 }
469
470 .typo3-adminPanel-content-settings-group + .typo3-adminPanel-content-settings-group {
471 margin-top: $adminPanel-content-padding;
472 padding-top: $adminPanel-content-padding;
473 border-top: 1px solid rgba(0, 0, 0, 0.1);
474 }
475 }
476
477 //
478 // Tabs
479 //
480 #{$adminPanel-prefix} {
481 .typo3-adminPanel-content-panes {
482 position: absolute;
483 top: 0;
484 bottom: 0;
485 left: 0;
486 right: 0;
487 display: flex;
488 }
489
490 .typo3-adminPanel-content-panes-item {
491 display: none;
492 overflow: auto;
493 height: 100%;
494 width: 100%;
495 padding: $adminPanel-content-padding;
496
497 > *:first-child {
498 margin-top: 0;
499 }
500
501 > *:last-child {
502 margin-bottom: 0;
503 }
504 }
505
506 .typo3-adminPanel-content-panes-item-active {
507 display: block;
508 }
509 }
510
511 //
512 // Row
513 //
514 #{$adminPanel-prefix} {
515 .typo3-adminPanel-row {
516 display: flex;
517 flex-wrap: wrap;
518 padding: 0.25em 0;
519 margin-left: -0.75em;
520 margin-right: -0.75em;
521 }
522
523 .typo3-adminPanel-row-header {
524 > * {
525 font-weight: bold;
526 }
527 }
528
529 .typo3-adminPanel-col {
530 padding: 0.25em 0.75em;
531 word-break: break-all;
532 }
533
534 @for $i from 1 through 12 {
535 .typo3-adminPanel-col-#{$i} {
536 @include make-col($i);
537 }
538 }
539
540 @media (max-width: $screen-sm-max) {
541 @for $i from 1 through 12 {
542 .typo3-adminPanel-col-sm-#{$i} {
543 @include make-col($i);
544 }
545 }
546 }
547 }
548
549 //
550 // Text
551 //
552 #{$adminPanel-prefix} {
553 .typo3-adminPanel-headline {
554 font-weight: bold;
555 margin-top: 1.5em;
556 margin-bottom: 0.75em;
557 }
558
559 h1.typo3-adminPanel-headline {
560 font-weight: normal;
561 font-size: 1.75em;
562 }
563
564 h2.typo3-adminPanel-headline {
565 font-weight: normal;
566 font-size: 1.5em;
567 }
568
569 h3.typo3-adminPanel-headline {
570 font-size: 1.35em;
571 }
572
573 h4.typo3-adminPanel-headline {
574 font-size: 1.25em;
575 }
576 }
577
578 //
579 // Table
580 //
581 #{$adminPanel-prefix} {
582 .typo3-adminPanel-table-overflow {
583 display: block;
584 width: 100%;
585 overflow-x: auto;
586 -webkit-overflow-scrolling: touch;
587 -ms-overflow-style: -ms-autohiding-scrollbar;
588 border: 1px solid $adminPanel-table-border;
589 box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
590
591 .typo3-adminPanel-table {
592 border: none;
593 }
594 }
595
596 .typo3-adminPanel-table {
597 width: 100%;
598 max-width: 100%;
599 background-color: $adminPanel-table-bg;
600 display: table;
601 border-collapse: separate;
602 border-spacing: 0;
603 border: 1px solid $adminPanel-table-border;
604
605 thead {
606 tr {
607 background-color: $adminPanel-table-header-bg;
608 }
609
610 th,
611 td {
612 border-top: none;
613 font-family: $font-family-sans-serif;
614 }
615 }
616
617 th {
618 font-weight: bold;
619 text-align: inherit;
620
621 > span {
622 font-weight: bold;
623 }
624 }
625
626 tr {
627 font-family: inherit;
628 }
629
630 th,
631 td {
632 padding: 0.75em;
633 vertical-align: top;
634 border-top: 1px solid #dee2e6;
635 }
636 }
637
638 .typo3-adminPanel-table-debug {
639 tbody {
640 font-family: monospace;
641
642 * {
643 font-family: inherit;
644 }
645
646 td {
647 word-wrap: break-word;
648 }
649 }
650 }
651
652 .typo3-adminPanel-table-cell-key {
653 width: 19%;
654 }
655
656 .typo3-adminPanel-table-cell-nowrap {
657 white-space: nowrap;
658 }
659 }
660
661 //
662 // Cards
663 //
664 #{$adminPanel-prefix} {
665 .typo3-adminPanel-card-group {
666 display: flex;
667 margin: -5px;
668 margin-bottom: 1em;
669 flex-wrap: wrap;
670
671 .typo3-adminPanel-card {
672 margin: 5px;
673 flex-grow: 1;
674 flex-shrink: 0;
675 max-width: 100%;
676 }
677 }
678
679 .typo3-adminPanel-card {
680 background-color: $adminPanel-card-bg;
681 margin-bottom: 1em;
682 box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
683 }
684
685 .typo3-adminPanel-card-header,
686 .typo3-adminPanel-card-body {
687 > *:first-child {
688 margin-top: 0;
689 }
690
691 > *:last-child {
692 margin-bottom: 0;
693 }
694 }
695
696 .typo3-adminPanel-card-header {
697 display: flex;
698 align-items: center;
699 padding: $adminPanel-card-padding;
700 padding-bottom: 0;
701 }
702
703 .typo3-adminPanel-card-header-headline {
704 display: flex;
705 align-items: center;
706 }
707
708 .typo3-adminPanel-card-header-icon {
709 position: relative;
710 height: 1em;
711 width: 1em;
712 opacity: 0.75;
713
714 .icon {
715 position: absolute;
716 top: 50%;
717 left: 50%;
718 transform: translate(-50%, -50%);
719 }
720 }
721
722 .typo3-adminPanel-card-header-text {
723 padding-left: 0.5em;
724 font-size: 1.25em;
725 }
726
727 .typo3-adminPanel-card-body {
728 padding: $adminPanel-card-padding;
729 }
730 }
731
732 //
733 // Dump
734 //
735 #{$adminPanel-prefix} {
736 .typo3-adminPanel-dump {
737 font-family: monospace;
738 word-wrap: break-word;
739 white-space: pre-wrap;
740 position: relative;
741 z-index: 99999;
742 word-break: break-all;
743 }
744
745 .typo3-adminPanel-dump-string {
746 color: #75a75a;
747
748 &:before,
749 &:after {
750 color: #bf6500;
751 content: '"';
752 }
753 }
754
755 .typo3-adminPanel-dump-float,
756 .typo3-adminPanel-dump-integer {
757 color: #538bb3;
758 }
759 }
760
761 //
762 // Form
763 //
764 #{$adminPanel-prefix} {
765 .typo3-adminPanel-form-group {
766 display: block;
767 margin: 1.5em 0;
768 }
769
770 .typo3-adminPanel-form-group-checkbox {
771 + .typo3-adminPanel-form-group-checkbox {
772 margin-top: -0.5em;
773 }
774 }
775 }
776
777 //
778 // Checkbox
779 //
780 #{$adminPanel-prefix} {
781 .typo3-adminPanel-form-checkbox {
782 padding-left: 1.75em;
783 }
784
785 .typo3-adminPanel-form-checkbox-label {
786 position: relative;
787 cursor: pointer;
788
789 &:before {
790 position: absolute;
791 top: 0;
792 left: -1.75em;
793 display: block;
794 width: 1.25em;
795 height: 1.25em;
796 pointer-events: none;
797 content: '';
798 user-select: none;
799 background-color: #dadada;
800 border-radius: $adminPanel-input-border-radius;
801 }
802
803 &:after {
804 position: absolute;
805 top: 0;
806 left: -1.75em;
807 display: block;
808 width: 1.25em;
809 height: 1.25em;
810 content: '';
811 background-repeat: no-repeat;
812 background-position: center center;
813 background-size: 50% 50%;
814 }
815 }
816
817 .typo3-adminPanel-form-checkbox-input {
818 display: none;
819
820 &:checked + .typo3-adminPanel-form-checkbox-label {
821 &:before {
822 background-color: #629755;
823 }
824
825 &:after {
826 background-image: url("data:image/svg+xml;charset=utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/></svg>");
827 }
828 }
829 }
830 }
831
832 //
833 // Select
834 //
835 #{$adminPanel-prefix} {
836 .typo3-adminPanel-form-select {
837 .typo3-adminPanel-form-select-label {
838 margin-bottom: 0.5em;
839 display: block;
840 }
841
842 .typo3-adminPanel-form-select-input {
843 padding: $adminPanel-input-horizontal-padding 3em $adminPanel-input-horizontal-padding $adminPanel-input-vertical-padding;
844 display: block;
845 border-radius: $adminPanel-input-border-radius;
846 border: 1px solid $adminPanel-input-border;
847 background: $adminPanel-input-bg url("data:image/svg+xml;charset=utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#333' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") no-repeat right 0.75em center;
848 background-size: 8px 10px;
849 appearance: none;
850
851 &:hover,
852 &:focus {
853 border: 1px solid $adminPanel-input-hover-border;
854 }
855 }
856 }
857 }
858
859 //
860 // DateTime
861 //
862 #{$adminPanel-prefix} {
863 .typo3-adminPanel-form-datetime {
864 .typo3-adminPanel-form-datetime-label {
865 margin-bottom: 0.5em;
866 display: block;
867 }
868
869 .typo3-adminPanel-form-datetime-input-group {
870 margin: -5px;
871 display: flex;
872 flex-wrap: wrap;
873 }
874
875 .typo3-adminPanel-form-datetime-input {
876 flex-grow: 1;
877 flex-shrink: 0;
878 margin: 5px;
879 display: block;
880 padding: $adminPanel-input-horizontal-padding $adminPanel-input-vertical-padding;
881 border-radius: $adminPanel-input-border-radius;
882 border: 1px solid $adminPanel-input-border;
883 background-color: $adminPanel-input-bg;
884
885 &:hover,
886 &:focus {
887 border: 1px solid $adminPanel-input-hover-border;
888 }
889 }
890 }
891 }
892
893 //
894 // Button
895 //
896 #{$adminPanel-prefix} {
897 .typo3-adminPanel-btn {
898 position: relative;
899 cursor: pointer;
900 color: inherit;
901 text-decoration: none;
902 padding: $adminPanel-input-horizontal-padding $adminPanel-input-vertical-padding;
903 display: inline-block;
904 background-color: rgba(0, 0, 0, 0.1);
905 border: 1px solid $adminPanel-input-border;
906 border-radius: $adminPanel-input-border-radius;
907
908 &:hover,
909 &:focus {
910 z-index: 1;
911 background-color: rgba(0, 0, 0, 0.15);
912 border: 1px solid $adminPanel-input-hover-border;
913 }
914 }
915
916 .typo3-adminPanel-btn-primary {
917 color: #fff;
918 background-color: #538bb3;
919 border: 1px solid darken(#538bb3, 10%);
920
921 &:hover,
922 &:focus {
923 background-color: lighten(#538bb3, 5%);
924 border: 1px solid darken(#538bb3, 15%);
925 }
926 }
927
928 .typo3-adminPanel-btn-group {
929 &:after {
930 content: '';
931 display: table;
932 clear: both;
933 }
934
935 .typo3-adminPanel-btn {
936 border-radius: 0;
937 float: left;
938
939 &:first-child {
940 border-radius: $adminPanel-input-border-radius 0 0 $adminPanel-input-border-radius;
941 }
942
943 &:last-child {
944 border-radius: 0 $adminPanel-input-border-radius $adminPanel-input-border-radius 0;
945 }
946
947 & + .typo3-adminPanel-btn {
948 margin-left: -1px;
949 }
950 }
951 }
952 }