@appscode/design-system 2.0.19-alpha.1 → 2.0.19-alpha.3

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 (8) hide show
  1. package/package.json +1 -1
  2. package/vue-components/styles/components/_ac-select-box.scss +42 -42
  3. package/vue-components/styles/components/_add-card.scss +60 -60
  4. package/vue-components/styles/components/_all.scss +32 -1
  5. package/vue-components/styles/components/_card-body-wrapper.scss +48 -48
  6. package/vue-components/styles/components/_direct-deploy.scss +63 -63
  7. package/vue-components/styles/components/_input.scss +5 -11
  8. package/vue-components/styles/components/_app-drawer.scss +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "2.0.19-alpha.1",
3
+ "version": "2.0.19-alpha.3",
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/components/_ac-select-box.scss CHANGED
@@ -1,49 +1,49 @@
1
- .ac-select-box {
2
- select {
3
- background-color: $info-light;
4
- border: 1px solid $primary-10;
5
- font-size: 13px;
6
- height: 42px;
7
- padding-left: 20px;
1
+ // .ac-select-box {
2
+ // select {
3
+ // background-color: $info-light;
4
+ // border: 1px solid $primary-10;
5
+ // font-size: 13px;
6
+ // height: 42px;
7
+ // padding-left: 20px;
8
8
 
9
- option {
10
- box-shadow: $ac-shadow-1;
11
- }
9
+ // option {
10
+ // box-shadow: $ac-shadow-1;
11
+ // }
12
12
 
13
- &:hover {
14
- border: 1px solid $black-80;
15
- }
13
+ // &:hover {
14
+ // border: 1px solid $black-80;
15
+ // }
16
16
 
17
- &:focus {
18
- outline: none;
19
- box-shadow: none;
20
- border: 1px solid $primary;
21
- }
22
- }
17
+ // &:focus {
18
+ // outline: none;
19
+ // box-shadow: none;
20
+ // border: 1px solid $primary;
21
+ // }
22
+ // }
23
23
 
24
- &.is-small {
25
- select {
26
- height: 36px;
27
- padding-left: 15px;
28
- }
24
+ // &.is-small {
25
+ // select {
26
+ // height: 36px;
27
+ // padding-left: 15px;
28
+ // }
29
29
 
30
- &.select:not(.is-multiple):not(.is-loading)::after {
31
- top: 50%;
32
- margin-top: 0px;
33
- }
34
- }
30
+ // &.select:not(.is-multiple):not(.is-loading)::after {
31
+ // top: 50%;
32
+ // margin-top: 0px;
33
+ // }
34
+ // }
35
35
 
36
- &.select:not(.is-multiple):not(.is-loading)::after {
37
- border-color: $primary-10;
38
- }
39
- }
36
+ // &.select:not(.is-multiple):not(.is-loading)::after {
37
+ // border-color: $primary-10;
38
+ // }
39
+ // }
40
40
 
41
- .is-dark-theme {
42
- .select {
43
- select {
44
- background-color: $black-80;
45
- color: $white-100;
46
- border: 1px solid $primary-90;
47
- }
48
- }
49
- }
41
+ // .is-dark-theme {
42
+ // .select {
43
+ // select {
44
+ // background-color: $black-80;
45
+ // color: $white-100;
46
+ // border: 1px solid $primary-90;
47
+ // }
48
+ // }
49
+ // }
package/vue-components/styles/components/_add-card.scss CHANGED
@@ -1,70 +1,70 @@
1
- .add-card-form {
2
- .card-title {
3
- display: grid;
4
- grid-template-columns: 46px auto;
5
- align-items: center;
1
+ // .add-card-form {
2
+ // .card-title {
3
+ // display: grid;
4
+ // grid-template-columns: 46px auto;
5
+ // align-items: center;
6
6
 
7
- .back-button {
8
- border: none;
9
- height: 46px;
10
- width: 46px;
11
- background-color: $white-100;
12
- border-radius: 4px 0 0 0;
13
- font-size: 16px;
14
- }
7
+ // .back-button {
8
+ // border: none;
9
+ // height: 46px;
10
+ // width: 46px;
11
+ // background-color: $white-100;
12
+ // border-radius: 4px 0 0 0;
13
+ // font-size: 16px;
14
+ // }
15
15
 
16
- h4 {
17
- font-weight: 600;
18
- font-size: 25px;
19
- line-height: 29px;
20
- color: $primary-5;
21
- margin-left: 20px;
22
- }
23
- }
16
+ // h4 {
17
+ // font-weight: 600;
18
+ // font-size: 25px;
19
+ // line-height: 29px;
20
+ // color: $primary-5;
21
+ // margin-left: 20px;
22
+ // }
23
+ // }
24
24
 
25
- .card-body {
26
- background-color: $white-100;
27
- padding: 20px;
25
+ // .card-body {
26
+ // background-color: $white-100;
27
+ // padding: 20px;
28
28
 
29
- .card-information {
30
- // display: grid;
31
- // grid-template-columns: 50% 17% 17% 17%;
32
- grid-gap: 20px;
33
- }
29
+ // .card-information {
30
+ // // display: grid;
31
+ // // grid-template-columns: 50% 17% 17% 17%;
32
+ // grid-gap: 20px;
33
+ // }
34
34
 
35
- .more-details {
36
- cursor: pointer;
37
- }
38
- }
39
- }
35
+ // .more-details {
36
+ // cursor: pointer;
37
+ // }
38
+ // }
39
+ // }
40
40
 
41
- /****************************************
42
- Responsive Classes
43
- *****************************************/
44
- // Extra small devices (portrait phones, less than 576px)
45
- @media (max-width: 575.98px) {
46
- }
41
+ // /****************************************
42
+ // Responsive Classes
43
+ // *****************************************/
44
+ // // Extra small devices (portrait phones, less than 576px)
45
+ // @media (max-width: 575.98px) {
46
+ // }
47
47
 
48
- // Small devices (landscape phones, 576px and up)
49
- @media (min-width: 576px) and (max-width: 767.98px) {
50
- }
48
+ // // Small devices (landscape phones, 576px and up)
49
+ // @media (min-width: 576px) and (max-width: 767.98px) {
50
+ // }
51
51
 
52
- // Medium devices (tablets, 768px and up)
53
- @media (min-width: 768px) and (max-width: 991.98px) {
54
- }
52
+ // // Medium devices (tablets, 768px and up)
53
+ // @media (min-width: 768px) and (max-width: 991.98px) {
54
+ // }
55
55
 
56
- // Large devices (desktops, 992px and up)
57
- @media (min-width: 992px) and (max-width: 1199.98px) {
58
- }
56
+ // // Large devices (desktops, 992px and up)
57
+ // @media (min-width: 992px) and (max-width: 1199.98px) {
58
+ // }
59
59
 
60
- // Extra large devices (large desktops, 1200px and up)
61
- @media (min-width: 1200px) {
62
- .add-card-form {
63
- .card-title {
64
- h4 {
65
- font-size: 20px;
66
- line-height: 24px;
67
- }
68
- }
69
- }
70
- }
60
+ // // Extra large devices (large desktops, 1200px and up)
61
+ // @media (min-width: 1200px) {
62
+ // .add-card-form {
63
+ // .card-title {
64
+ // h4 {
65
+ // font-size: 20px;
66
+ // line-height: 24px;
67
+ // }
68
+ // }
69
+ // }
70
+ // }
package/vue-components/styles/components/_all.scss CHANGED
@@ -8,9 +8,40 @@
8
8
 
9
9
  // @import "tabs";
10
10
  @import "navbar";
11
+ @import "left-sidebar";
12
+ @import "button";
11
13
  @import "terminal";
14
+ @import "ac-drag";
15
+ @import "accordion";
16
+ @import "dropdown";
17
+ @import "getkeeper";
18
+ @import "go-to-top";
19
+ @import "graph";
20
+ @import "image-upload";
21
+ @import "input-card";
22
+ @import "input";
23
+ @import "menu-content";
24
+ @import "modal";
25
+ @import "monaco-editor";
26
+ @import "multi-select";
12
27
  @import "multi-select";
28
+ @import "options";
29
+ @import "payment-card";
30
+ @import "preloader";
31
+ @import "preview-modal";
32
+ // @import "progress-bar";W
13
33
  @import "report";
14
- @import "getkeeper";
34
+ @import "subscription-card";
35
+ @import "table-of-content";
36
+ @import "table";
37
+ @import "tabs";
38
+ @import "terminal";
39
+ @import "tfa";
40
+ @import "transitions";
41
+
42
+ // @import "pricing-table";
43
+ // @import "overview-info";
44
+ // @import "overview-page"
45
+ // @import "nested-list";
15
46
  @import "ui-builder/ui-builder";
16
47
  @import "ui-builder/vue-open-api";
package/vue-components/styles/components/_card-body-wrapper.scss CHANGED
@@ -1,54 +1,54 @@
1
- .card-body-wrapper {
2
- background-color: $white-100;
3
- border-radius: 4px;
4
- box-shadow: none;
1
+ // .card-body-wrapper {
2
+ // background-color: $white-100;
3
+ // border-radius: 4px;
4
+ // box-shadow: none;
5
5
 
6
- .card-header {
7
- background-color: $info-light;
8
- border-radius: 4px 4px 0px 0px;
9
- padding: 10px 20px;
10
- box-shadow: none;
6
+ // .card-header {
7
+ // background-color: $info-light;
8
+ // border-radius: 4px 4px 0px 0px;
9
+ // padding: 10px 20px;
10
+ // box-shadow: none;
11
11
 
12
- .left-content {
13
- p {
14
- font-weight: 500;
15
- font-size: 14px;
16
- line-height: 16px;
17
- color: $primary-5;
12
+ // .left-content {
13
+ // p {
14
+ // font-weight: 500;
15
+ // font-size: 14px;
16
+ // line-height: 16px;
17
+ // color: $primary-5;
18
18
 
19
- .require {
20
- color: #ff0000;
21
- }
19
+ // .require {
20
+ // color: #ff0000;
21
+ // }
22
22
 
23
- &.description {
24
- font-weight: normal;
25
- font-size: 14px;
26
- line-height: 16px;
27
- color: $primary-20;
28
- margin-top: 10px;
29
- }
30
- }
31
- }
23
+ // &.description {
24
+ // font-weight: normal;
25
+ // font-size: 14px;
26
+ // line-height: 16px;
27
+ // color: $primary-20;
28
+ // margin-top: 10px;
29
+ // }
30
+ // }
31
+ // }
32
32
 
33
- .right-content {
34
- .button {
35
- font-size: 12px;
36
- font-weight: normal;
37
- letter-spacing: 0;
38
- }
39
- }
40
- }
33
+ // .right-content {
34
+ // .button {
35
+ // font-size: 12px;
36
+ // font-weight: normal;
37
+ // letter-spacing: 0;
38
+ // }
39
+ // }
40
+ // }
41
41
 
42
- .card-content {
43
- p {
44
- &.cluster-title {
45
- font-weight: normal;
46
- font-size: 14px;
47
- line-height: 16px;
48
- color: $black-40;
49
- margin-top: 30px;
50
- margin-bottom: 10px;
51
- }
52
- }
53
- }
54
- }
42
+ // .card-content {
43
+ // p {
44
+ // &.cluster-title {
45
+ // font-weight: normal;
46
+ // font-size: 14px;
47
+ // line-height: 16px;
48
+ // color: $black-40;
49
+ // margin-top: 30px;
50
+ // margin-bottom: 10px;
51
+ // }
52
+ // }
53
+ // }
54
+ // }
package/vue-components/styles/components/_direct-deploy.scss CHANGED
@@ -1,69 +1,69 @@
1
- .direct-deploy {
2
- h5 {
3
- font-weight: 500;
4
- font-size: 18px;
5
- line-height: 21px;
6
- color: $primary-5;
7
- margin-bottom: 10px;
8
- .fa {
9
- color: $primary;
10
- }
11
- }
1
+ // .direct-deploy {
2
+ // h5 {
3
+ // font-weight: 500;
4
+ // font-size: 18px;
5
+ // line-height: 21px;
6
+ // color: $primary-5;
7
+ // margin-bottom: 10px;
8
+ // .fa {
9
+ // color: $primary;
10
+ // }
11
+ // }
12
12
 
13
- p {
14
- font-size: 14px;
15
- line-height: 160%;
16
- color: $primary-5;
17
- margin-bottom: 20px;
18
- }
13
+ // p {
14
+ // font-size: 14px;
15
+ // line-height: 160%;
16
+ // color: $primary-5;
17
+ // margin-bottom: 20px;
18
+ // }
19
19
 
20
- .check-permission {
21
- font-weight: normal;
22
- font-size: 14px;
23
- line-height: 16px;
24
- color: $primary-5;
25
- }
20
+ // .check-permission {
21
+ // font-weight: normal;
22
+ // font-size: 14px;
23
+ // line-height: 16px;
24
+ // color: $primary-5;
25
+ // }
26
26
 
27
- .button {
28
- margin: 10px 0;
29
- }
27
+ // .button {
28
+ // margin: 10px 0;
29
+ // }
30
30
 
31
- .msg {
32
- font-size: 12px;
33
- line-height: 14px;
34
- color: $primary-20;
35
- }
36
- .buttons {
37
- &.is-gray {
38
- .button {
39
- &.ac-primary {
40
- background-color: $info-light;
41
- }
42
- }
43
- }
44
- }
45
- }
31
+ // .msg {
32
+ // font-size: 12px;
33
+ // line-height: 14px;
34
+ // color: $primary-20;
35
+ // }
36
+ // .buttons {
37
+ // &.is-gray {
38
+ // .button {
39
+ // &.ac-primary {
40
+ // background-color: $info-light;
41
+ // }
42
+ // }
43
+ // }
44
+ // }
45
+ // }
46
46
 
47
- h5 {
48
- &.toc-title {
49
- font-style: normal;
50
- font-weight: 500;
51
- font-size: 16px;
52
- line-height: 19px;
53
- color: $primary-20;
54
- }
55
- }
56
- .is-gray {
57
- .button {
58
- border: none;
59
- background-color: $info-light;
60
- }
61
- }
47
+ // h5 {
48
+ // &.toc-title {
49
+ // font-style: normal;
50
+ // font-weight: 500;
51
+ // font-size: 16px;
52
+ // line-height: 19px;
53
+ // color: $primary-20;
54
+ // }
55
+ // }
56
+ // .is-gray {
57
+ // .button {
58
+ // border: none;
59
+ // background-color: $info-light;
60
+ // }
61
+ // }
62
62
 
63
- .card-content {
64
- &.is-table-of-content {
65
- display: grid;
66
- grid-template-columns: 65% 35%;
67
- grid-gap: 15px;
68
- }
69
- }
63
+ // .card-content {
64
+ // &.is-table-of-content {
65
+ // display: grid;
66
+ // grid-template-columns: 65% 35%;
67
+ // grid-gap: 15px;
68
+ // }
69
+ // }
package/vue-components/styles/components/_input.scss CHANGED
@@ -257,7 +257,6 @@
257
257
  margin-bottom: 0;
258
258
  }
259
259
 
260
-
261
260
  label {
262
261
  font-size: 13px;
263
262
  left: 15px;
@@ -350,12 +349,7 @@
350
349
  transition: 0.3s;
351
350
 
352
351
  &:hover {
353
- background-color: hsla(
354
- var(--hsl-hue),
355
- var(--hsl-saturation),
356
- var(--hsl-lightness),
357
- 0.2
358
- );
352
+ background-color: $primary-20;
359
353
  color: $primary;
360
354
  }
361
355
  }
@@ -376,7 +370,7 @@
376
370
  border: 1px solid $primary-80;
377
371
  background-color: transparent;
378
372
  padding: 10px 15px;
379
- min-height: 50px;
373
+ min-height: 150px;
380
374
 
381
375
  &.bg-white {
382
376
  background-color: transparent;
@@ -403,7 +397,7 @@
403
397
  font-size: 13px;
404
398
 
405
399
  &:hover {
406
- border-color: $black-70;
400
+ border-color: $primary-70;
407
401
  }
408
402
 
409
403
  &.bg-white {
@@ -549,7 +543,7 @@
549
543
  }
550
544
  }
551
545
 
552
- // file upload
546
+ // file upload
553
547
  .file-upload {
554
548
  border: 1px dashed $primary-80;
555
549
  border-radius: 4px;
@@ -591,4 +585,4 @@
591
585
  }
592
586
  }
593
587
  }
594
- }
588
+ }
package/vue-components/styles/components/_app-drawer.scss DELETED
File without changes