@appscode/design-system 2.0.22 → 2.0.23-alpha.2

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.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/vue-components/styles/base/utilities/_global.scss +15 -61
  3. package/vue-components/styles/components/_all.scss +1 -0
  4. package/vue-components/styles/components/editor/_filtered-file-editor.scss +1 -1
  5. package/vue-components/styles/components/select-box/_multi-select.scss +5 -5
  6. package/vue-components/styles/components/sidebar-tabs/_all.scss +2 -0
  7. package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs-layout.scss +16 -0
  8. package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss +195 -0
  9. package/vue-components/styles/components/ui-builder/_ui-builder.scss +112 -93
  10. package/vue-components/styles/components/ui-builder/_vue-open-api.scss +1 -47
  11. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue +1 -197
  12. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue +1 -16
  13. package/vue-components/v3/tabs/EditorTabs.vue +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "2.0.22",
3
+ "version": "2.0.23-alpha.2",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/styles/base/utilities/_global.scss CHANGED
@@ -763,66 +763,20 @@ $border_color_4: transparent transparent #585d6e transparent;
763
763
 
764
764
  // Status css
765
765
  // ac-footer sticky end
766
-
767
- // terminal scss end
768
- .is-dark-theme {
769
- a {
770
- &:hover {
771
- color: #485fc7;
772
- }
766
+ .information-center {
767
+ min-height: calc(100vh - 0px);
768
+ padding: 20px;
769
+ border-left: 1px solid hsl(208, 77%, 90%);
770
+ width: 330px;
771
+ margin-left: auto;
772
+ position: fixed;
773
+ right: 0;
774
+ background: #fff;
775
+ top: 0;
776
+ z-index: 9999;
777
+ box-shadow: -3px 2px 10px 3px rgba(0, 0, 0, 0.1);
778
+
779
+ .info-title {
780
+ display: flex;
773
781
  }
774
782
  }
775
-
776
- /****************************************
777
- Responsive Classes
778
- *****************************************/
779
-
780
- // Extra small devices (portrait phones, less than 576px)
781
- @media (max-width: 575.98px) {
782
- // .responsive-only {
783
- // display: block;
784
- // }
785
-
786
- // .ac-system-body {
787
- // grid-gap: 15px;
788
- // grid-template-columns: 70px calc(100% - 100px);
789
-
790
- // .ac-system-content {
791
- // &.mr-20 {
792
- // margin-right: 0 !important;
793
- // }
794
- // }
795
- // }
796
- }
797
-
798
- // Small devices (landscape phones, 576px and up)
799
- @media (min-width: 576px) and (max-width: 767.98px) {
800
- }
801
-
802
- // Medium devices (tablets, 768px and up)
803
- @media (min-width: 768px) and (max-width: 991.98px) {
804
- // .ac-system-body {
805
- // grid-gap: 15px;
806
- // grid-template-columns: 240px calc(100% - 255px);
807
- // }
808
- }
809
-
810
- // Large devices (desktops, 992px and up)
811
- @media (min-width: 992px) and (max-width: 1199.98px) {
812
- // .ac-system-body {
813
- // grid-gap: 0px;
814
- // grid-template-columns: 240px calc(100% - 260px);
815
- // }
816
- }
817
-
818
- // Extra large devices (large desktops, 1200px and up)
819
- @media (min-width: 1200px) {
820
- }
821
-
822
- // FHD devices
823
- @media (min-width: 1408px) and (max-width: 1600) {
824
- // .ac-system-body {
825
- // grid-gap: 0px;
826
- // grid-template-columns: 240px calc(100% - 260px);
827
- // }
828
- }
package/vue-components/styles/components/_all.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  @import "header/all";
8
8
  @import "select-box/all";
9
9
  @import "sidebar/all";
10
+ @import "sidebar-tabs/all";
10
11
 
11
12
  @import "button";
12
13
  @import "terminal";
package/vue-components/styles/components/editor/_filtered-file-editor.scss CHANGED
@@ -23,7 +23,7 @@
23
23
  // }
24
24
 
25
25
  .ac-preview {
26
- padding-inline: 20px;
26
+ // padding-inline: 20px;
27
27
  // position: fixed;
28
28
  // width: calc(100% - 90px);
29
29
  // height: 100%;
package/vue-components/styles/components/select-box/_multi-select.scss CHANGED
@@ -407,9 +407,9 @@
407
407
  }
408
408
 
409
409
  label {
410
- font-size: 16px;
411
- left: 20px;
412
- top: 11px;
410
+ font-size: 13px;
411
+ left: 15px;
412
+ top: 8px;
413
413
  cursor: text;
414
414
  color: $primary-10;
415
415
  position: absolute;
@@ -426,10 +426,10 @@
426
426
 
427
427
  &.show-label {
428
428
  top: -10px;
429
- left: 15px;
429
+ left: 10px;
430
430
  padding: 0 5px;
431
431
  font-size: 13px;
432
- color: $black-5;
432
+ color: $black-40;
433
433
 
434
434
  &::after {
435
435
  background-color: $white-100;
package/vue-components/styles/components/sidebar-tabs/_all.scss ADDED
@@ -0,0 +1,2 @@
1
+ @import "./sidebar-tabs";
2
+ @import "./sidebar-tabs-layout";
package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs-layout.scss ADDED
@@ -0,0 +1,16 @@
1
+ .sidebar-tabs-layout {
2
+ .sidebar-tabs-wrapper {
3
+ position: fixed;
4
+ background-color: $white-100;
5
+ }
6
+ .pl-220 {
7
+ padding-left: 220px;
8
+ }
9
+ .content-wrapper {
10
+ padding-bottom: 40px;
11
+ width: 100%;
12
+ &:has(.form-footer) {
13
+ padding-bottom: 0;
14
+ }
15
+ }
16
+ }
package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss ADDED
@@ -0,0 +1,195 @@
1
+ .sidebar-tabs {
2
+ width: 220px;
3
+ border-right: 1px solid $primary-95;
4
+ padding: 8px;
5
+ height: calc(100vh - 50px);
6
+ ul {
7
+ li {
8
+ a {
9
+ display: flex;
10
+ align-items: center;
11
+ color: $primary-10;
12
+ position: relative;
13
+ z-index: 1;
14
+ padding: 8px 16px;
15
+ font-weight: 500;
16
+ transition: 0.3s ease-in-out;
17
+ align-items: center;
18
+ justify-content: space-between;
19
+
20
+ &:after {
21
+ position: absolute;
22
+ content: "";
23
+ left: 0;
24
+ top: 0;
25
+ width: 100%;
26
+ height: 100%;
27
+ background-color: $primary-95;
28
+ border-radius: 4px;
29
+ z-index: -1;
30
+ opacity: 0;
31
+ visibility: hidden;
32
+ transition: 0.3s ease-in-out;
33
+ }
34
+ &:hover {
35
+ color: $primary;
36
+
37
+ &:after {
38
+ opacity: 1;
39
+ visibility: visible;
40
+ background-color: $primary-97;
41
+ }
42
+ }
43
+ &.is-active {
44
+ color: $primary;
45
+ &:hover {
46
+ &::after {
47
+ background-color: $primary-90;
48
+ }
49
+ }
50
+ &:after {
51
+ opacity: 1;
52
+ visibility: visible;
53
+ }
54
+ &.is-danger {
55
+ color: $danger;
56
+ &:hover {
57
+ &::after {
58
+ background-color: $red-90;
59
+ }
60
+ }
61
+ &:after {
62
+ opacity: 1;
63
+ visibility: visible;
64
+ background-color: $red-95;
65
+ }
66
+ }
67
+ &.is-success {
68
+ color: $success;
69
+ &:hover {
70
+ &::after {
71
+ background-color: $green-90;
72
+ }
73
+ }
74
+ &:after {
75
+ opacity: 1;
76
+ visibility: visible;
77
+ background-color: $green-95;
78
+ }
79
+ }
80
+ &.is-warning {
81
+ color: $warning;
82
+ &:hover {
83
+ &::after {
84
+ background-color: $yellow-90;
85
+ }
86
+ }
87
+ &:after {
88
+ opacity: 1;
89
+ visibility: visible;
90
+ background-color: $yellow-95;
91
+ }
92
+ }
93
+ }
94
+ &.is-danger {
95
+ color: $danger;
96
+ &:hover {
97
+ &::after {
98
+ background-color: $red-90;
99
+ }
100
+ }
101
+ &:after {
102
+ opacity: 1;
103
+ visibility: visible;
104
+ background-color: transparent;
105
+ }
106
+ }
107
+ &.is-success {
108
+ color: $success;
109
+ &:hover {
110
+ &::after {
111
+ background-color: $green-90;
112
+ }
113
+ }
114
+ &:after {
115
+ opacity: 1;
116
+ visibility: visible;
117
+ background-color: transparent;
118
+ }
119
+ }
120
+ &.is-warning {
121
+ color: $warning;
122
+ &:hover {
123
+ &::after {
124
+ background-color: $yellow-90;
125
+ }
126
+ }
127
+ &:after {
128
+ opacity: 1;
129
+ visibility: visible;
130
+ background-color: transparent;
131
+ }
132
+ }
133
+ }
134
+ &.is-open {
135
+ transition: 0.3s ease-in-out;
136
+ ul {
137
+ max-height: 250px;
138
+ }
139
+ }
140
+ ul {
141
+ margin-left: 20px;
142
+ position: relative;
143
+ z-index: 1;
144
+ max-height: 0;
145
+ transition: 0.3s ease-in-out !important;
146
+ overflow: hidden;
147
+ &:after {
148
+ position: absolute;
149
+ content: "";
150
+ left: 4px;
151
+ top: 0;
152
+ width: 1px;
153
+ height: calc(100% - 10px);
154
+ background-color: $primary-90;
155
+ }
156
+ li {
157
+ a {
158
+ &:after {
159
+ left: -8px;
160
+ opacity: 0 !important;
161
+ visibility: hidden !important;
162
+ }
163
+ &::before {
164
+ position: absolute;
165
+ content: "";
166
+ left: 0;
167
+ top: 50%;
168
+ margin-top: -4px;
169
+ width: 8px;
170
+ height: 8px;
171
+ border-radius: 50%;
172
+ background-color: $primary;
173
+ transition: 0.3s ease-in-out;
174
+ opacity: 0;
175
+ visibility: hidden;
176
+ }
177
+ &:hover:not(&.is-active) {
178
+ &::before {
179
+ opacity: 1;
180
+ visibility: visible;
181
+ background-color: $primary-80;
182
+ }
183
+ }
184
+ &.is-active {
185
+ &::before {
186
+ opacity: 1;
187
+ visibility: visible;
188
+ }
189
+ }
190
+ }
191
+ }
192
+ }
193
+ }
194
+ }
195
+ }
package/vue-components/styles/components/ui-builder/_ui-builder.scss CHANGED
@@ -144,64 +144,66 @@
144
144
  }
145
145
  }
146
146
 
147
- .is-visibility-hidden {
148
- visibility: hidden !important;
149
- height: 0 !important;
150
- opacity: 0 !important;
147
+ .footer-bottom-fixed {
148
+ position: fixed!important;
149
+ bottom: 8px!important;
150
+ width: calc(100% - 280px);
151
+ border-top: 1px solid $primary-90;
152
+ padding-top: 8px;
153
+ margin-left: -20px;
154
+ margin-right: -20px;
155
+ padding-inline: 20px;
151
156
  }
152
157
 
153
158
  // nested elements end
154
159
 
155
- .table-wrapper {
156
- overflow-x: auto;
160
+ // .table-wrapper {
161
+ // overflow-x: auto;
157
162
 
158
- .table-inner {
159
- min-width: 630px;
163
+ // .table-inner {
164
+ // min-width: 630px;
160
165
 
161
- .thead {
162
- background-color: $primary-90;
166
+ // .thead {
167
+ // background-color: $primary-90;
163
168
 
164
- .tr {
165
- .th {
166
- font-weight: 600;
167
- }
168
-
169
- border-top: 1px solid var(--ac-white-light);
170
- border-bottom: 1px solid var(--ac-white-light);
171
- }
172
- }
169
+ // .tr {
170
+ // .th {
171
+ // font-weight: 600;
172
+ // }
173
+ // }
174
+ // }
173
175
 
174
- .thead,
175
- .tbody {
176
- .tr {
177
- display: flex;
178
- flex-wrap: nowrap;
179
- align-items: center;
180
- justify-content: space-between;
181
-
182
- .th,
183
- .td {
184
- width: 20%;
185
- font-size: 13px;
186
- min-width: 150px;
187
- padding: 6px 20px;
188
- }
189
- }
190
- }
176
+ // .thead,
177
+ // .tbody {
178
+ // .tr {
179
+ // display: flex;
180
+ // flex-wrap: nowrap;
181
+ // align-items: center;
182
+ // justify-content: space-between;
183
+
184
+ // .th,
185
+ // .td {
186
+ // width: 20%;
187
+ // font-size: 13px;
188
+ // min-width: 150px;
189
+ // padding: 6px 20px;
190
+ // }
191
+ // }
192
+ // }
191
193
 
192
- .tbody {
193
- .tr {
194
- border-bottom: 1px solid $primary-90;
195
- }
196
- }
197
- }
194
+ // .tbody {
195
+ // .tr {
196
+ // border-bottom: 1px solid $primary-90;
197
+ // }
198
+ // }
199
+ // }
198
200
 
199
- .is-selected {
200
- border: 1px solid $primary;
201
- border-bottom: 1px solid $primary !important;
202
- border-radius: 4px;
203
- }
204
- }
201
+ // .is-selected {
202
+ // border: 1px solid $primary;
203
+ // border-bottom: 1px solid $primary !important;
204
+ // border-radius: 4px;
205
+ // }
206
+ // }
205
207
 
206
208
  .is-collapsed {
207
209
  &.ac-nested-elements::before,
@@ -216,16 +218,16 @@
216
218
  gap: 16px;
217
219
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
218
220
  }
219
- .table {
220
- tr {
221
- &.is-selected {
222
- background-color: $primary-97;
223
- strong {
224
- color: $primary;
225
- }
226
- }
227
- }
228
- }
221
+ // .table {
222
+ // tr {
223
+ // &.is-selected {
224
+ // background-color: $primary-97;
225
+ // strong {
226
+ // color: $primary;
227
+ // }
228
+ // }
229
+ // }
230
+ // }
229
231
  // dark theme start
230
232
  // .is-dark-theme {
231
233
  // .nested-body {
@@ -369,24 +371,57 @@
369
371
  }
370
372
  }
371
373
 
372
- // buttons
373
- .button {
374
- &.ac-button {
375
- &.is-medium {
376
- font-size: 1rem;
377
- height: 36px;
378
- &.is-square {
379
- width: 36px;
380
- align-items: center;
381
- justify-content: center;
374
+ .up-down-buttons {
375
+ border-radius: 4px;
376
+ overflow: hidden;
377
+ position: relative;
378
+ z-index: 1;
379
+ max-width: 36px;
380
+ margin-bottom: 0 !important;
381
+ button {
382
+ width: 36px;
383
+ height: 18px;
384
+ cursor: pointer;
385
+ border: none;
386
+ color: $primary;
387
+ background-color: $primary-90;
388
+ transition: 0.3s ease-in-out;
389
+ &:hover {
390
+ background-color: $primary-80;
391
+ }
392
+ &.is-primary {
393
+ background-color: $primary;
394
+ color: $white-100;
395
+ &:hover {
396
+ background-color: $primary-30;
382
397
  }
383
398
  }
384
- &.is-tinny {
385
- height: 24px;
386
- padding: 0 8px;
399
+ .icon {
400
+ margin: 0;
401
+ padding: 0;
402
+ width: auto;
403
+ height: auto;
387
404
  }
388
405
  }
389
406
  }
407
+ // buttons
408
+ // .button {
409
+ // &.ac-button {
410
+ // &.is-medium {
411
+ // font-size: 1rem;
412
+ // height: 36px;
413
+ // &.is-square {
414
+ // width: 36px;
415
+ // align-items: center;
416
+ // justify-content: center;
417
+ // }
418
+ // }
419
+ // &.is-tinny {
420
+ // height: 24px;
421
+ // padding: 0 8px;
422
+ // }
423
+ // }
424
+ // }
390
425
 
391
426
  // .button[disabled] {
392
427
  // &.is-ghost {
@@ -399,26 +434,10 @@ span.is-error {
399
434
  color: $danger;
400
435
  font-weight: 400;
401
436
  }
402
-
403
- /****************************************
404
- Responsive Classes
405
- *****************************************/
406
- // Extra small devices (portrait phones, less than 576px)
407
- @media (max-width: 575.98px) {
408
- }
409
-
410
- // Small devices (landscape phones, 576px and up)
411
- @media (min-width: 576px) and (max-width: 767.98px) {
412
- }
413
-
414
- // Medium devices (tablets, 768px and up)
415
- @media (min-width: 768px) and (max-width: 991.98px) {
416
- }
417
-
418
- // Large devices (desktops, 992px and up)
419
- @media (min-width: 992px) and (max-width: 1199.98px) {
420
- }
421
-
422
- // Extra large devices (large desktops, 1200px and up)
423
- @media (min-width: 1200px) {
437
+ .circle-list-shape {
438
+ width: 6px;
439
+ height: 6px;
440
+ background-color: $black-40;
441
+ display: flex;
442
+ border-radius: 50%;
424
443
  }
package/vue-components/styles/components/ui-builder/_vue-open-api.scss CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  .form-left-item {
7
7
  margin-right: 16px;
8
- width: calc(100% - 104px);
8
+ width: calc(100% - 108px);
9
9
  }
10
10
  }
11
11
  }
@@ -518,57 +518,11 @@
518
518
  }
519
519
  }
520
520
 
521
- input,
522
- .ac-card,
523
- textarea {
524
- background-color: $white-100;
525
- color: $primary-10;
526
- height: 45px;
527
- font-weight: 400;
528
- width: 100%;
529
- border-radius: 4px;
530
- border: 1px solid $primary-80;
531
- padding: 8px 16px;
532
- font-size: 13px;
533
-
534
- &:hover {
535
- border-color: $black-70;
536
- }
537
-
538
- &.bg-white {
539
- background-color: $white-100;
540
- }
541
-
542
- &.StripeElement--focus {
543
- border: 1px solid $primary;
544
- }
545
-
546
- &:focus {
547
- border: 1px solid $primary;
548
- outline: none;
549
- background-color: $white-100;
550
- }
551
-
552
- &[type="password"] {
553
- padding-right: 40px;
554
- }
555
-
556
- &[type="search"] {
557
- padding-left: 30px;
558
- }
559
-
560
- transition: background-color 0.3s ease-in-out;
561
- }
562
-
563
521
  .ac-card {
564
522
  height: 36px;
565
523
  padding: 10px 20px;
566
524
  }
567
525
 
568
- textarea {
569
- height: 55px;
570
- }
571
-
572
526
  b.isRequired {
573
527
  color: $danger;
574
528
  font-size: 13px;
package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue CHANGED
@@ -5,200 +5,4 @@
5
5
  </div>
6
6
  </template>
7
7
 
8
- <style lang="scss">
9
- .sidebar-tabs {
10
- width: 220px;
11
- border-right: 1px solid $primary-95;
12
- padding: 8px;
13
- height: calc(100vh - 50px);
14
- ul {
15
- li {
16
- a {
17
- display: flex;
18
- align-items: center;
19
- color: $primary-10;
20
- position: relative;
21
- z-index: 1;
22
- padding: 8px 16px;
23
- font-weight: 500;
24
- transition: 0.3s ease-in-out;
25
- align-items: center;
26
- justify-content: space-between;
27
-
28
- &:after {
29
- position: absolute;
30
- content: "";
31
- left: 0;
32
- top: 0;
33
- width: 100%;
34
- height: 100%;
35
- background-color: $primary-95;
36
- border-radius: 4px;
37
- z-index: -1;
38
- opacity: 0;
39
- visibility: hidden;
40
- transition: 0.3s ease-in-out;
41
- }
42
- &:hover {
43
- color: $primary;
44
-
45
- &:after {
46
- opacity: 1;
47
- visibility: visible;
48
- background-color: $primary-97;
49
- }
50
- }
51
- &.is-active {
52
- color: $primary;
53
- &:hover {
54
- &::after {
55
- background-color: $primary-90;
56
- }
57
- }
58
- &:after {
59
- opacity: 1;
60
- visibility: visible;
61
- }
62
- &.is-danger {
63
- color: $danger;
64
- &:hover {
65
- &::after {
66
- background-color: $red-90;
67
- }
68
- }
69
- &:after {
70
- opacity: 1;
71
- visibility: visible;
72
- background-color: $red-95;
73
- }
74
- }
75
- &.is-success {
76
- color: $success;
77
- &:hover {
78
- &::after {
79
- background-color: $green-90;
80
- }
81
- }
82
- &:after {
83
- opacity: 1;
84
- visibility: visible;
85
- background-color: $green-95;
86
- }
87
- }
88
- &.is-warning {
89
- color: $warning;
90
- &:hover {
91
- &::after {
92
- background-color: $yellow-90;
93
- }
94
- }
95
- &:after {
96
- opacity: 1;
97
- visibility: visible;
98
- background-color: $yellow-95;
99
- }
100
- }
101
- }
102
- &.is-danger {
103
- color: $danger;
104
- &:hover {
105
- &::after {
106
- background-color: $red-90;
107
- }
108
- }
109
- &:after {
110
- opacity: 1;
111
- visibility: visible;
112
- background-color: transparent;
113
- }
114
- }
115
- &.is-success {
116
- color: $success;
117
- &:hover {
118
- &::after {
119
- background-color: $green-90;
120
- }
121
- }
122
- &:after {
123
- opacity: 1;
124
- visibility: visible;
125
- background-color: transparent;
126
- }
127
- }
128
- &.is-warning {
129
- color: $warning;
130
- &:hover {
131
- &::after {
132
- background-color: $yellow-90;
133
- }
134
- }
135
- &:after {
136
- opacity: 1;
137
- visibility: visible;
138
- background-color: transparent;
139
- }
140
- }
141
- }
142
- &.is-open {
143
- transition: 0.3s ease-in-out;
144
- ul {
145
- max-height: 250px;
146
- }
147
- }
148
- ul {
149
- margin-left: 20px;
150
- position: relative;
151
- z-index: 1;
152
- max-height: 0;
153
- transition: 0.3s ease-in-out !important;
154
- overflow: hidden;
155
- &:after {
156
- position: absolute;
157
- content: "";
158
- left: 4px;
159
- top: 0;
160
- width: 1px;
161
- height: calc(100% - 10px);
162
- background-color: $primary-90;
163
- }
164
- li {
165
- a {
166
- &:after {
167
- left: -8px;
168
- opacity: 0 !important;
169
- visibility: hidden !important;
170
- }
171
- &::before {
172
- position: absolute;
173
- content: "";
174
- left: 0;
175
- top: 50%;
176
- margin-top: -4px;
177
- width: 8px;
178
- height: 8px;
179
- border-radius: 50%;
180
- background-color: $primary;
181
- transition: 0.3s ease-in-out;
182
- opacity: 0;
183
- visibility: hidden;
184
- }
185
- &:hover:not(&.is-active) {
186
- &::before {
187
- opacity: 1;
188
- visibility: visible;
189
- background-color: $primary-80;
190
- }
191
- }
192
- &.is-active {
193
- &::before {
194
- opacity: 1;
195
- visibility: visible;
196
- }
197
- }
198
- }
199
- }
200
- }
201
- }
202
- }
203
- }
204
- </style>
8
+ <style lang="scss"></style>
package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue CHANGED
@@ -26,19 +26,4 @@ withDefaults(defineProps<Props>(), {
26
26
  </div>
27
27
  </template>
28
28
 
29
- <style lang="scss" scoped>
30
- .sidebar-tabs-wrapper {
31
- position: fixed;
32
- background-color: $white-100;
33
- }
34
- .pl-220 {
35
- padding-left: 220px;
36
- }
37
- .content-wrapper {
38
- padding-bottom: 40px;
39
- width: 100%;
40
- &:has(.form-footer) {
41
- padding-bottom: 0;
42
- }
43
- }
44
- </style>
29
+ <style lang="scss" scoped></style>
package/vue-components/v3/tabs/EditorTabs.vue CHANGED
@@ -17,7 +17,7 @@ defineEmits(["tabchange"]);
17
17
  </script>
18
18
 
19
19
  <template>
20
- <tabs-body class="mt-10">
20
+ <tabs-body>
21
21
  <tabs class="is-line">
22
22
  <tab-item :is-active="activeTab === 'edit'">
23
23
  <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>