@appscode/design-system 2.0.97 → 2.0.99
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.
- package/package.json +1 -1
- package/vue-components/styles/base/utilities/_colors.scss +5 -0
- package/vue-components/styles/base/utilities/_generate-color-classes.scss +26 -0
- package/vue-components/styles/components/_button.scss +33 -5
- package/vue-components/styles/components/_dropdown.scss +1 -1
- package/vue-components/styles/components/_getkeeper.scss +1 -1
- package/vue-components/styles/components/_table.scss +1 -1
- package/vue-components/styles/components/_terminal.scss +1 -1
- package/vue-components/styles/components/cards/_vendor.scss +1 -1
- package/vue-components/styles/components/form-fields/_file-upload.scss +1 -1
- package/vue-components/styles/components/form-fields/_input-card.scss +1 -1
- package/vue-components/styles/components/form-fields/_input.scss +2 -2
- package/vue-components/styles/components/navbar/_menu-content.scss +2 -2
- package/vue-components/styles/components/navbar/_navbar.scss +1 -1
- package/vue-components/styles/components/select-box/_multi-select.scss +9 -3
- package/vue-components/styles/components/sidebar/_left-sidebar.scss +2 -9
- package/vue-components/styles/components/ui-builder/_vue-open-api.scss +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// :root {
|
|
2
2
|
// --theme-mode: light;
|
|
3
3
|
// }
|
|
4
|
+
// IMPORTANT! Update spell grey to gray
|
|
4
5
|
|
|
5
6
|
// white and black
|
|
6
7
|
$white-100: hsl(0, 0%, 100%);
|
|
@@ -29,6 +30,8 @@ $primary-97: hsl($primary-hue, $primary-saturation, 97%);
|
|
|
29
30
|
|
|
30
31
|
$primary-light-grey: hsl($primary-hue, 10%, 96%);
|
|
31
32
|
$primary-dark-grey: hsl($primary-hue, 10%, 10%);
|
|
33
|
+
$primary-light-gray: hsl($primary-hue, 10%, 96%);
|
|
34
|
+
$primary-dark-gray: hsl($primary-hue, 10%, 10%);
|
|
32
35
|
|
|
33
36
|
$secondary-hue: var(--secondary-hue);
|
|
34
37
|
$secondary-saturation: var(--secondary-saturation);
|
|
@@ -50,6 +53,8 @@ $secondary-97: hsl($secondary-hue, $secondary-saturation, 97%);
|
|
|
50
53
|
|
|
51
54
|
$secondary-light-grey: hsl($secondary-hue, 10%, 96%);
|
|
52
55
|
$secondary-dark-grey: hsl($secondary-hue, 10%, 10%);
|
|
56
|
+
$secondary-light-gray: hsl($secondary-hue, 10%, 96%);
|
|
57
|
+
$secondary-dark-gray: hsl($secondary-hue, 10%, 10%);
|
|
53
58
|
|
|
54
59
|
$color-text: hsl($secondary-hue, 10%, 35%);
|
|
55
60
|
$color-heading: hsl($secondary-hue, 10%, 10%);
|
|
@@ -24,6 +24,32 @@
|
|
|
24
24
|
|
|
25
25
|
@include generate-color-classes("bg", "primary", $primary-hue, $primary-saturation, 93, 97, 2);
|
|
26
26
|
|
|
27
|
+
// for secondary classes
|
|
28
|
+
@include generate-color-classes("text", "secondary", $secondary-hue, $secondary-saturation, 10, 90, 10);
|
|
29
|
+
|
|
30
|
+
@include generate-color-classes("bg", "secondary", $secondary-hue, $secondary-saturation, 10, 90, 10);
|
|
31
|
+
|
|
32
|
+
@include generate-color-classes("text", "secondary", $secondary-hue, $secondary-saturation, 5, 5, 1);
|
|
33
|
+
|
|
34
|
+
@include generate-color-classes("bg", "secondary", $secondary-hue, $secondary-saturation, 5, 5, 1);
|
|
35
|
+
|
|
36
|
+
@include generate-color-classes("text", "secondary", $secondary-hue, $secondary-saturation, 93, 97, 2);
|
|
37
|
+
|
|
38
|
+
@include generate-color-classes("bg", "secondary", $secondary-hue, $secondary-saturation, 93, 97, 2);
|
|
39
|
+
|
|
40
|
+
// for gray classes
|
|
41
|
+
@include generate-color-classes("text", "secondary", $secondary-hue, $secondary-saturation, 10, 90, 10);
|
|
42
|
+
|
|
43
|
+
@include generate-color-classes("bg", "secondary", $secondary-hue, $secondary-saturation, 10, 90, 10);
|
|
44
|
+
|
|
45
|
+
@include generate-color-classes("text", "secondary", $secondary-hue, $secondary-saturation, 5, 5, 1);
|
|
46
|
+
|
|
47
|
+
@include generate-color-classes("bg", "secondary", $secondary-hue, $secondary-saturation, 5, 5, 1);
|
|
48
|
+
|
|
49
|
+
@include generate-color-classes("text", "secondary", $secondary-hue, $secondary-saturation, 93, 97, 2);
|
|
50
|
+
|
|
51
|
+
@include generate-color-classes("bg", "secondary", $secondary-hue, $secondary-saturation, 93, 97, 2);
|
|
52
|
+
|
|
27
53
|
// for green classes
|
|
28
54
|
@include generate-color-classes("text", "green", $green-hue, $green-saturation, 10, 90, 10);
|
|
29
55
|
@include generate-color-classes("bg", "green", $green-hue, $green-saturation, 10, 90, 10);
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
&:focus:not(:hover) {
|
|
22
22
|
color: inherit;
|
|
23
23
|
}
|
|
24
|
+
&:disabled:not(.is-outlined) {
|
|
25
|
+
border-color: transparent;
|
|
26
|
+
}
|
|
24
27
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
border-color: $ac-primary;
|
|
28
|
-
}
|
|
29
|
-
&.is-outlined {
|
|
28
|
+
|
|
29
|
+
&.is-outlined:not(.is-light:disabled) {
|
|
30
30
|
border-color: $ac-primary;
|
|
31
31
|
color: $ac-primary;
|
|
32
32
|
background-color: transparent;
|
|
@@ -48,6 +48,31 @@
|
|
|
48
48
|
&:focus:not(:hover) {
|
|
49
49
|
color: inherit;
|
|
50
50
|
}
|
|
51
|
+
&:disabled:not(.is-outlined) {
|
|
52
|
+
border-color: transparent;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
&.is-info {
|
|
57
|
+
&.is-light {
|
|
58
|
+
color: $blue-30;
|
|
59
|
+
&:focus:not(:hover) {
|
|
60
|
+
color: inherit;
|
|
61
|
+
}
|
|
62
|
+
&:disabled:not(.is-outlined) {
|
|
63
|
+
border-color: transparent;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
&.is-danger {
|
|
68
|
+
&.is-light {
|
|
69
|
+
color: $red-30;
|
|
70
|
+
&:focus:not(:hover) {
|
|
71
|
+
color: inherit;
|
|
72
|
+
}
|
|
73
|
+
&:disabled:not(.is-outlined) {
|
|
74
|
+
border-color: transparent;
|
|
75
|
+
}
|
|
51
76
|
}
|
|
52
77
|
}
|
|
53
78
|
|
|
@@ -57,6 +82,9 @@
|
|
|
57
82
|
&:focus:not(:hover) {
|
|
58
83
|
color: inherit;
|
|
59
84
|
}
|
|
85
|
+
&:disabled:not(.is-outlined) {
|
|
86
|
+
border-color: transparent;
|
|
87
|
+
}
|
|
60
88
|
}
|
|
61
89
|
}
|
|
62
90
|
&.is-light {
|
|
@@ -254,7 +254,7 @@
|
|
|
254
254
|
thead {
|
|
255
255
|
tr {
|
|
256
256
|
th {
|
|
257
|
-
background-color: $secondary-light-
|
|
257
|
+
background-color: $secondary-light-gray;
|
|
258
258
|
border-top: 1px solid $color-border-light;
|
|
259
259
|
border-bottom: 1px solid $color-border-light;
|
|
260
260
|
border-right: 1px solid $color-border-light;
|
|
@@ -557,7 +557,7 @@
|
|
|
557
557
|
.file-cta {
|
|
558
558
|
color: $color-heading;
|
|
559
559
|
height: 100%;
|
|
560
|
-
background-color: $secondary-light-
|
|
560
|
+
background-color: $secondary-light-gray;
|
|
561
561
|
}
|
|
562
562
|
&:hover {
|
|
563
563
|
.file-cta,
|
|
@@ -572,7 +572,7 @@
|
|
|
572
572
|
border: 1px dashed $color-border-dark;
|
|
573
573
|
border-radius: 4px;
|
|
574
574
|
&:hover {
|
|
575
|
-
background-color: $secondary-light-
|
|
575
|
+
background-color: $secondary-light-gray;
|
|
576
576
|
border-color: $ac-primary;
|
|
577
577
|
|
|
578
578
|
label {
|
|
@@ -373,7 +373,7 @@
|
|
|
373
373
|
gap: 8px;
|
|
374
374
|
|
|
375
375
|
&:hover {
|
|
376
|
-
background-color: $primary-light-
|
|
376
|
+
background-color: $primary-light-gray;
|
|
377
377
|
color: $ac-secondary;
|
|
378
378
|
}
|
|
379
379
|
}
|
|
@@ -439,7 +439,7 @@
|
|
|
439
439
|
border-bottom: 1px solid $color-border;
|
|
440
440
|
|
|
441
441
|
&:hover {
|
|
442
|
-
background-color: $primary-light-
|
|
442
|
+
background-color: $primary-light-gray !important;
|
|
443
443
|
}
|
|
444
444
|
|
|
445
445
|
span {
|
|
@@ -107,10 +107,11 @@
|
|
|
107
107
|
margin-bottom: -12px;
|
|
108
108
|
padding-top: 12px;
|
|
109
109
|
padding-bottom: 12px;
|
|
110
|
+
width: 100%;
|
|
110
111
|
}
|
|
111
112
|
|
|
112
113
|
&:hover {
|
|
113
|
-
background-color: $secondary-light-
|
|
114
|
+
background-color: $secondary-light-gray;
|
|
114
115
|
color: $ac-secondary;
|
|
115
116
|
}
|
|
116
117
|
|
|
@@ -118,11 +119,11 @@
|
|
|
118
119
|
background-color: $white-100;
|
|
119
120
|
color: $ac-secondary;
|
|
120
121
|
&:hover {
|
|
121
|
-
background-color: $primary-light-
|
|
122
|
+
background-color: $primary-light-gray;
|
|
122
123
|
}
|
|
123
124
|
|
|
124
125
|
&:after {
|
|
125
|
-
background-color: $secondary-light-
|
|
126
|
+
background-color: $secondary-light-gray;
|
|
126
127
|
color: $ac-secondary;
|
|
127
128
|
}
|
|
128
129
|
}
|
|
@@ -448,6 +449,11 @@ li {
|
|
|
448
449
|
.multiselect__option {
|
|
449
450
|
font-size: 13px;
|
|
450
451
|
color: $color-heading;
|
|
452
|
+
&:has(input[type="checkbox"]) {
|
|
453
|
+
label {
|
|
454
|
+
left: 24px;
|
|
455
|
+
}
|
|
456
|
+
}
|
|
451
457
|
}
|
|
452
458
|
}
|
|
453
459
|
.multiselect__option--selected {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.ac-system-left-sidebar {
|
|
2
2
|
&.is-light {
|
|
3
3
|
.ac-left-sidebar-wrapper {
|
|
4
|
-
background-color: $secondary-light-
|
|
4
|
+
background-color: $secondary-light-gray;
|
|
5
5
|
|
|
6
6
|
.ac-left-sidebar {
|
|
7
7
|
.sidebar-header {
|
|
@@ -116,20 +116,13 @@
|
|
|
116
116
|
|
|
117
117
|
strong {
|
|
118
118
|
max-width: calc(100% - 65px);
|
|
119
|
-
|
|
119
|
+
line-break: anywhere;
|
|
120
120
|
white-space: break-spaces;
|
|
121
121
|
display: flex;
|
|
122
122
|
align-items: center;
|
|
123
123
|
overflow: hidden;
|
|
124
124
|
font-weight: 500;
|
|
125
125
|
transition: 0.3s ease-in-out;
|
|
126
|
-
text-overflow: ellipsis;
|
|
127
|
-
display: -webkit-box;
|
|
128
|
-
line-clamp: 1;
|
|
129
|
-
-webkit-line-clamp: 1;
|
|
130
|
-
box-orient: vertical;
|
|
131
|
-
-webkit-box-orient: vertical;
|
|
132
|
-
transition: 0.3s ease-in-out;
|
|
133
126
|
}
|
|
134
127
|
|
|
135
128
|
&.ac-dropdown-button {
|