@appscode/design-system 1.1.0-beta.30 → 1.1.0-beta.31

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 (4) hide show
  1. package/components/ui-builder/_ui-builder.scss +30 -2
  2. package/components/ui-builder/_vue-open-api.scss +47 -12
  3. package/package.json +1 -1
  4. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue +26 -2
package/components/ui-builder/_ui-builder.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  .ui-builders-wrapper {
14
- width: 760px;
14
+ width: 800px;
15
15
 
16
16
  h5 {
17
17
  margin-bottom: 10px;
@@ -28,6 +28,10 @@
28
28
  display: grid;
29
29
  grid-template-columns: 1fr 1fr auto;
30
30
  grid-gap: 15px;
31
+
32
+ &.has-close {
33
+ grid-template-columns: 1fr 1fr auto auto;
34
+ }
31
35
  }
32
36
 
33
37
  .key-value-save-check {
@@ -396,8 +400,32 @@
396
400
  }
397
401
  }
398
402
  }
403
+ // buttons
404
+ .button {
405
+ &.ac-button {
406
+ &.is-medium {
407
+ font-size: 1rem;
408
+ height: 36px;
409
+ }
410
+ &.is-tinny {
411
+ height: 24px;
412
+ padding: 0 8px;
413
+ }
414
+ }
415
+ }
416
+
417
+ .button[disabled] {
418
+ &.is-ghost {
419
+ border-color: transparent !important;
420
+ }
421
+ }
422
+
423
+ p.is-error,
424
+ span.is-error {
425
+ color: $danger;
426
+ font-weight: 400;
427
+ }
399
428
 
400
- // dark theme end
401
429
  /****************************************
402
430
  Responsive Classes
403
431
  *****************************************/
package/components/ui-builder/_vue-open-api.scss CHANGED
@@ -65,13 +65,13 @@
65
65
 
66
66
  .vue-form-scema-body {
67
67
  .left-content {
68
- width: 650px;
69
- background-color: $primary-90;
68
+ background-color: $primary-97;
69
+ border-right: 1px solid $primary-90;
70
70
  padding: 30px;
71
+ width: 500px;
71
72
  }
72
73
 
73
74
  .right-content {
74
- width: 100%;
75
75
  margin-top: 30px;
76
76
  }
77
77
  }
@@ -91,7 +91,6 @@
91
91
  }
92
92
 
93
93
  .is-collapsed {
94
-
95
94
  &.ac-nested-elements::before,
96
95
  &.ac-nested-elements::after {
97
96
  display: none;
@@ -137,7 +136,6 @@
137
136
  }
138
137
 
139
138
  &.is-success {
140
-
141
139
  input,
142
140
  .ac-card,
143
141
  textarea {
@@ -150,7 +148,6 @@
150
148
  }
151
149
 
152
150
  &.is-danger {
153
-
154
151
  input,
155
152
  .ac-card,
156
153
  textarea {
@@ -163,7 +160,6 @@
163
160
  }
164
161
 
165
162
  &.is-loading {
166
-
167
163
  input,
168
164
  .ac-card,
169
165
  textarea {
@@ -216,6 +212,10 @@
216
212
  height: 45px;
217
213
  width: 45px;
218
214
  margin-top: 0;
215
+ &:focus {
216
+ outline: none;
217
+ box-shadow: none;
218
+ }
219
219
  }
220
220
  }
221
221
 
@@ -485,10 +485,12 @@
485
485
  transition: 0.3s;
486
486
 
487
487
  &:hover {
488
- background-color: hsla(var(--hsl-hue),
489
- var(--hsl-saturation),
490
- var(--hsl-lightness),
491
- 0.2);
488
+ background-color: hsla(
489
+ var(--hsl-hue),
490
+ var(--hsl-saturation),
491
+ var(--hsl-lightness),
492
+ 0.2
493
+ );
492
494
  color: $primary;
493
495
  }
494
496
  }
@@ -614,4 +616,37 @@
614
616
  width: 200px !important;
615
617
  padding-right: 10px;
616
618
  }
617
- }
619
+ }
620
+
621
+ // button scss
622
+ .button {
623
+ &.ac-button {
624
+ padding: 8px 16px;
625
+ font-weight: 500;
626
+ line-height: 1;
627
+
628
+ &.is-light {
629
+ &.is-loading {
630
+ &::after {
631
+ border-color: transparent transparent #1c1c1c #1c1c1c !important;
632
+ }
633
+ }
634
+ }
635
+ &.is-ghost {
636
+ border-color: transparent !important;
637
+ }
638
+ &.is-square {
639
+ border: 1px solid $primary-95;
640
+ }
641
+ &.is-small {
642
+ padding: 4px 9px;
643
+ }
644
+ &.is-medium {
645
+ font-size: 1rem;
646
+ height: 36px;
647
+ }
648
+ }
649
+ }
650
+ button.is-primary {
651
+ background-color: $primary;
652
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.1.0-beta.30",
3
+ "version": "1.1.0-beta.31",
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/v3/sidebar/sidebar-tabs/SidebarTabs.vue CHANGED
@@ -16,7 +16,7 @@
16
16
  a {
17
17
  display: flex;
18
18
  align-items: center;
19
- color: $black-40;
19
+ color: $primary-10;
20
20
  position: relative;
21
21
  z-index: 1;
22
22
  padding: 8px 16px;
@@ -60,7 +60,31 @@
60
60
  visibility: visible;
61
61
  }
62
62
  }
63
- span {
63
+ &.is-error {
64
+ color: $danger;
65
+ &:hover {
66
+ &::after {
67
+ background-color: $red-90;
68
+ }
69
+ }
70
+ &:after {
71
+ opacity: 1;
72
+ visibility: visible;
73
+ background-color: transparent;
74
+ }
75
+ }
76
+ &.is-success {
77
+ color: $success;
78
+ &:hover {
79
+ &::after {
80
+ background-color: $green-90;
81
+ }
82
+ }
83
+ &:after {
84
+ opacity: 1;
85
+ visibility: visible;
86
+ background-color: transparent;
87
+ }
64
88
  }
65
89
  }
66
90
  &.is-open {