@appscode/design-system 2.0.98 → 2.0.100
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 +8 -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", $gray-hue, $gray-saturation, 10, 90, 10);
|
|
42
|
+
|
|
43
|
+
@include generate-color-classes("bg", "gray", $gray-hue, $gray-saturation, 10, 90, 10);
|
|
44
|
+
|
|
45
|
+
@include generate-color-classes("text", "gray", $gray-hue, $gray-saturation, 5, 5, 1);
|
|
46
|
+
|
|
47
|
+
@include generate-color-classes("bg", "gray", $gray-hue, $gray-saturation, 5, 5, 1);
|
|
48
|
+
|
|
49
|
+
@include generate-color-classes("text", "gray", $gray-hue, $gray-saturation, 93, 97, 2);
|
|
50
|
+
|
|
51
|
+
@include generate-color-classes("bg", "gray", $gray-hue, $gray-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 {
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
&:hover {
|
|
114
|
-
background-color: $secondary-light-
|
|
114
|
+
background-color: $secondary-light-gray;
|
|
115
115
|
color: $ac-secondary;
|
|
116
116
|
}
|
|
117
117
|
|
|
@@ -119,11 +119,11 @@
|
|
|
119
119
|
background-color: $white-100;
|
|
120
120
|
color: $ac-secondary;
|
|
121
121
|
&:hover {
|
|
122
|
-
background-color: $primary-light-
|
|
122
|
+
background-color: $primary-light-gray;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
&:after {
|
|
126
|
-
background-color: $secondary-light-
|
|
126
|
+
background-color: $secondary-light-gray;
|
|
127
127
|
color: $ac-secondary;
|
|
128
128
|
}
|
|
129
129
|
}
|
|
@@ -449,6 +449,11 @@ li {
|
|
|
449
449
|
.multiselect__option {
|
|
450
450
|
font-size: 13px;
|
|
451
451
|
color: $color-heading;
|
|
452
|
+
&:has(input[type="checkbox"]) {
|
|
453
|
+
label {
|
|
454
|
+
left: 24px;
|
|
455
|
+
}
|
|
456
|
+
}
|
|
452
457
|
}
|
|
453
458
|
}
|
|
454
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 {
|