@appscode/design-system 1.0.43-alpha.19 → 1.0.43-alpha.20

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/base/utilities/_default.scss +26 -1
  2. package/base/utilities/_initial-variables.scss +1 -3
  3. package/base/utilities/_typography.scss +2 -2
  4. package/base/utilities/dark-theme.scss +18 -17
  5. package/components/_ac-alert-box.scss +4 -4
  6. package/components/_ac-tabs.scss +9 -0
  7. package/components/_left-sidebar-menu.scss +103 -0
  8. package/components/_navbar.scss +1 -1
  9. package/components/_overview-info.scss +1 -1
  10. package/components/_subscription-card.scss +1 -1
  11. package/components/ac-toaster/_ac-toasted.scss +1 -1
  12. package/components/bbum/_user-profile.scss +93 -91
  13. package/package.json +1 -1
package/base/utilities/_default.scss CHANGED
@@ -28,7 +28,7 @@
28
28
  .inner-header {
29
29
  position: sticky;
30
30
  top: 100px;
31
- background-color: #fff;
31
+ background-color: $ac-white;
32
32
  z-index: 997;
33
33
  }
34
34
  .ac-system-content {
@@ -701,6 +701,31 @@ $border_color_4: transparent transparent #585d6e transparent;
701
701
  // Status css
702
702
  // ac-footer sticky end
703
703
 
704
+ // terminal scss start
705
+ .ac-terminal {
706
+ padding: 3px;
707
+ position: fixed;
708
+ bottom: 0px;
709
+ height: 300px;
710
+ width: 100%;
711
+ background-color: $ac-white;
712
+ border: 1px solid var(--ac-white-light);
713
+
714
+ color: $ac-white;
715
+ z-index: 999;
716
+
717
+ .terminal-body {
718
+ font-family: "Inconsolata", monospace;
719
+ background-color: $ac-color-value;
720
+ height: 100%;
721
+ color: $ac-white;
722
+ strong {
723
+ color: $ac-white;
724
+ }
725
+ }
726
+ }
727
+ // terminal scss end
728
+
704
729
  /****************************************
705
730
  Responsive Classes
706
731
  *****************************************/
package/base/utilities/_initial-variables.scss CHANGED
@@ -1,7 +1,5 @@
1
1
  // Typography
2
- @import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
3
- // font rubik
4
- @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,800&display=swap");
2
+ @import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");
5
3
 
6
4
  $ac-family-heading: "Roboto", sans-serif;
7
5
  $ac-family-paragraph: "Roboto", sans-serif;
package/base/utilities/_typography.scss CHANGED
@@ -1,5 +1,5 @@
1
- body,
2
- html {
1
+ html,
2
+ body {
3
3
  background-color: $ac-bg;
4
4
  font-family: $ac-family-paragraph;
5
5
  font-weight: 400;
package/base/utilities/dark-theme.scss CHANGED
@@ -11,6 +11,7 @@ $dark-bg-light: var(--dark-bg-light);
11
11
  --ac-white-light: #3f3f3f;
12
12
  --ac-white-lighter: #2e323c;
13
13
  --ac-border: #404040;
14
+ --ac-bg-light-gray: #2e323c;
14
15
  --ac-color-value: hsl(
15
16
  var(--font-hsl-hue),
16
17
  var(--font-hsl-saturation),
@@ -21,7 +22,7 @@ $dark-bg-light: var(--dark-bg-light);
21
22
  background-color: $dark-bg;
22
23
 
23
24
  .ac-navbar-area {
24
- background-color: $dark-bg-light;
25
+ background-color: var(--dark-bg-light);
25
26
  --ac-white: #ffffff;
26
27
  --ac-white-lighter: #f1f1f1;
27
28
 
@@ -33,18 +34,18 @@ $dark-bg-light: var(--dark-bg-light);
33
34
  .ac-navbar-menu {
34
35
  .ac-menu-item {
35
36
  .quick-access {
36
- --ac-white: $dark-bg-light;
37
+ --ac-white: var(--dark-bg-light);
37
38
  }
38
39
 
39
40
  .ac-menu-content {
40
- background-color: $dark-bg-light;
41
+ background-color: var(--dark-bg-light);
41
42
 
42
43
  &::after {
43
- --ac-white: $dark-bg-light;
44
+ --ac-white: var(--dark-bg-light);
44
45
  }
45
46
 
46
47
  .user-profile-wrapper {
47
- --ac-white: $dark-bg-light;
48
+ --ac-white: var(--dark-bg-light);
48
49
  }
49
50
  }
50
51
  }
@@ -54,7 +55,7 @@ $dark-bg-light: var(--dark-bg-light);
54
55
 
55
56
  .ac-options {
56
57
  .options-items {
57
- --ac-white: $dark-bg-light;
58
+ --ac-white: var(--dark-bg-light);
58
59
  }
59
60
  }
60
61
 
@@ -77,7 +78,7 @@ $dark-bg-light: var(--dark-bg-light);
77
78
 
78
79
  .nested-body {
79
80
  code {
80
- background-color: $dark-bg-light;
81
+ background-color: var(--dark-bg-light);
81
82
  }
82
83
  }
83
84
 
@@ -94,10 +95,10 @@ $dark-bg-light: var(--dark-bg-light);
94
95
  }
95
96
 
96
97
  .ac-single-card {
97
- background-color: $dark-bg-light;
98
+ background-color: var(--dark-bg-light);
98
99
 
99
100
  &.style-three {
100
- background-color: $dark-bg-light;
101
+ background-color: var(--dark-bg-light);
101
102
  }
102
103
 
103
104
  .ac-card-body {
@@ -111,28 +112,28 @@ $dark-bg-light: var(--dark-bg-light);
111
112
  .information-center-inner {
112
113
  .info-body {
113
114
  .block-list {
114
- background-color: $dark-bg-light;
115
+ background-color: var(--dark-bg-light);
115
116
  }
116
117
  }
117
118
  }
118
119
  }
119
120
 
120
121
  .single-subscription-card {
121
- background-color: $dark-bg-light;
122
+ background-color: var(--dark-bg-light);
122
123
  }
123
124
 
124
125
  .pricing-card-wrpper {
125
126
  &.offer-card {
126
- background-color: $dark-bg-light;
127
+ background-color: var(--dark-bg-light);
127
128
  }
128
129
 
129
130
  .ac-card {
130
- background-color: $dark-bg-light;
131
+ background-color: var(--dark-bg-light);
131
132
  }
132
133
  }
133
134
 
134
135
  .ac-certificate-info {
135
- --ac-bg-light-gray: $dark-bg-light;
136
+ --ac-bg-light-gray: var(--dark-bg-light);
136
137
  }
137
138
 
138
139
  // multiselect
@@ -141,7 +142,7 @@ $dark-bg-light: var(--dark-bg-light);
141
142
  // --ac-border: #404040;
142
143
  // }
143
144
  .multiselect__content-wrapper {
144
- background-color: $dark-bg-light;
145
+ background-color: var(--dark-bg-light);
145
146
 
146
147
  .multiselect__content .multiselect__element .multiselect__option {
147
148
  color: #b4c0cc;
@@ -149,12 +150,12 @@ $dark-bg-light: var(--dark-bg-light);
149
150
 
150
151
  .multiselect__option--group {
151
152
  color: #b4c0cc;
152
- background-color: $dark-bg-light;
153
+ background-color: var(--dark-bg-light);
153
154
  }
154
155
 
155
156
  .multiselect__option--selected {
156
157
  color: #b4c0cc;
157
- background-color: $dark-bg-light;
158
+ background-color: var(--dark-bg-light);
158
159
  }
159
160
  }
160
161
  }
package/components/_ac-alert-box.scss CHANGED
@@ -134,7 +134,7 @@ AC Toast
134
134
  margin-bottom: 10px;
135
135
 
136
136
  * {
137
- color: #fff;
137
+ color: $ac-white;
138
138
  }
139
139
 
140
140
  p {
@@ -157,10 +157,10 @@ AC Toast
157
157
 
158
158
  button.close-button {
159
159
  border-radius: 0px;
160
- border-left: 1px solid #fff;
160
+ border-left: 1px solid $ac-white;
161
161
  background-color: transparent;
162
162
  border: none;
163
- color: #fff;
163
+ color: $ac-white;
164
164
  position: absolute;
165
165
  right: 0;
166
166
  top: 0;
@@ -169,7 +169,7 @@ AC Toast
169
169
  width: 30px;
170
170
  z-index: 1;
171
171
  cursor: pointer;
172
- border-left: 1px solid #fff;
172
+ border-left: 1px solid $ac-white;
173
173
  }
174
174
  }
175
175
 
package/components/_ac-tabs.scss CHANGED
@@ -219,6 +219,15 @@
219
219
  }
220
220
  }
221
221
 
222
+ .ac-system-body.bb-user-management {
223
+ .tabs.ac-tabs.is-line {
224
+ margin-left: -20px;
225
+ position: sticky;
226
+ top: 50px;
227
+ z-index: 99;
228
+ background: $ac-white;
229
+ }
230
+ }
222
231
  /****************************************
223
232
  Responsive Classes
224
233
  *****************************************/
package/components/_left-sidebar-menu.scss CHANGED
@@ -354,6 +354,109 @@
354
354
  }
355
355
 
356
356
  // widget menu end
357
+ // cluster switcher start
358
+ .ac-left-sidebar {
359
+ .ac-options.is-right {
360
+ .option-dots {
361
+ transition: 0.3s;
362
+ i.fa {
363
+ &.fa-angle-left {
364
+ font-size: 18px;
365
+ }
366
+ }
367
+ &:active {
368
+ i.fa {
369
+ background-color: $ac-white-lighter;
370
+ width: 25px;
371
+ height: 25px;
372
+ text-align: center;
373
+ line-height: 25px;
374
+ border-radius: 50%;
375
+ }
376
+ }
377
+ &:hover {
378
+ color: #333;
379
+ transform: scale(1.2);
380
+ }
381
+ }
382
+ }
383
+ $ac-cluster-switch-bg: #f4f6f9;
384
+ .is-cluster-logo {
385
+ display: flex;
386
+ align-items: center;
387
+ margin-left: -8px;
388
+ padding: 5px;
389
+ }
390
+ .multiselect {
391
+ height: 50px;
392
+ width: 234px;
393
+ left: 0px;
394
+ top: -5px;
395
+ .multiselect__select {
396
+ height: 50px;
397
+ top: 4px;
398
+ }
399
+ .multiselect__tags {
400
+ border: none !important;
401
+ background-color: $ac-cluster-switch-bg;
402
+ min-height: 54px;
403
+ border-radius: 0;
404
+ .multiselect__placeholder {
405
+ padding-top: 12px !important;
406
+ font-size: 14px;
407
+ }
408
+ .multiselect__input {
409
+ background-color: $ac-cluster-switch-bg !important;
410
+ top: 13px;
411
+ &::placeholder {
412
+ font-size: 12px;
413
+ font-weight: 500;
414
+ }
415
+ }
416
+ }
417
+ .multiselect__single {
418
+ background-color: $ac-cluster-switch-bg !important;
419
+ top: 14px !important;
420
+ img {
421
+ width: 20px;
422
+ margin-right: 8px;
423
+ }
424
+ span {
425
+ span {
426
+ overflow: hidden;
427
+ text-overflow: ellipsis;
428
+ display: -webkit-box;
429
+ line-clamp: 1;
430
+ -webkit-line-clamp: 1;
431
+ box-orient: vertical;
432
+ -webkit-box-orient: vertical;
433
+ }
434
+ }
435
+ }
436
+ }
437
+ .multiselect__content-wrapper {
438
+ .multiselect__content {
439
+ .multiselect__element {
440
+ .multiselect__option {
441
+ display: flex;
442
+ align-items: center;
443
+ font-size: 14px;
444
+ img {
445
+ width: 25px;
446
+ }
447
+ p {
448
+ font-weight: 500;
449
+ }
450
+ .location {
451
+ font-weight: 400;
452
+ opacity: 0.8;
453
+ }
454
+ }
455
+ }
456
+ }
457
+ }
458
+ }
459
+ // cluster switcher end
357
460
  /****************************************
358
461
  Responsive Classes
359
462
  *****************************************/
package/components/_navbar.scss CHANGED
@@ -52,7 +52,7 @@
52
52
  color: $ac-white;
53
53
  font-size: $font-size-small;
54
54
  font-weight: 600;
55
- font-family: raleway;
55
+ font-family: $ac-family-heading;
56
56
  width: 100%;
57
57
  padding-left: 15px;
58
58
 
package/components/_overview-info.scss CHANGED
@@ -70,7 +70,7 @@
70
70
  font-size: 16px;
71
71
  color: #f99a00;
72
72
  font-weight: 500;
73
- font-family: Raleway;
73
+ font-family: $ac-family-heading;
74
74
  }
75
75
  }
76
76
  }
package/components/_subscription-card.scss CHANGED
@@ -50,7 +50,7 @@
50
50
  padding: 0;
51
51
 
52
52
  h5 {
53
- font-family: Raleway;
53
+ font-family: $ac-family-heading;
54
54
  font-style: normal;
55
55
  font-weight: 600;
56
56
  font-size: 14px;
package/components/ac-toaster/_ac-toasted.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  border-radius: 4px !important;
11
11
 
12
12
  * {
13
- color: #fff !important;
13
+ color: $ac-white !important;
14
14
  }
15
15
 
16
16
  p {
package/components/bbum/_user-profile.scss CHANGED
@@ -1,109 +1,111 @@
1
- .user-profile-wrapper {
2
- padding: 20px;
3
- border-right: 1px solid $ac-white-light;
4
- height: calc(100vh - 52px);
5
- position: sticky;
6
- top: 52px;
7
-
8
- .user-profile-photo {
9
- background-color: $ac-white;
10
- border-radius: 4px;
11
- overflow: hidden;
12
- padding: 10px;
13
- position: relative;
14
- z-index: 1;
15
- margin-bottom: 10px;
16
-
17
- .thumbnail {
18
- height: 240px;
19
- background-size: cover;
20
- background-position: center;
21
- background-color: $ac-gray-lightest;
22
- background-repeat: no-repeat;
23
- border-radius: 10px;
24
-
25
- &.profile-1 {
26
- background-image: url("~@appscode/design-system-images/icons/appscode-large-icon.jpg");
27
- }
28
- }
29
-
30
- .setting-button {
31
- position: absolute;
32
- left: 15px;
33
- top: 15px;
34
- font-size: 18px;
35
- color: $ac-white;
36
- background-color: transparent;
37
- border: none;
38
- cursor: pointer;
39
- }
40
- }
41
-
42
- .profile-information {
43
- .profile-top-info {
44
- display: flex;
45
- align-items: center;
46
- justify-content: space-between;
1
+ .ac-system-body.bb-user-management {
2
+ .user-profile-wrapper {
3
+ padding: 20px;
4
+ border-right: 1px solid $ac-white-light;
5
+ height: calc(100vh - 52px);
6
+ position: sticky;
7
+ top: 52px;
8
+
9
+ .user-profile-photo {
10
+ background-color: $ac-white;
11
+ border-radius: 4px;
12
+ overflow: hidden;
13
+ padding: 10px;
14
+ position: relative;
15
+ z-index: 1;
47
16
  margin-bottom: 10px;
48
17
 
49
- h3 {
50
- font-size: 26px;
51
- line-height: 1.4;
18
+ .thumbnail {
19
+ height: 240px;
20
+ background-size: cover;
21
+ background-position: center;
22
+ background-color: $ac-gray-lightest;
23
+ background-repeat: no-repeat;
24
+ border-radius: 10px;
52
25
 
53
- span {
54
- font-size: 14px;
55
- line-height: 1.5;
56
- font-weight: 400;
57
- display: block;
58
- color: $ac-color-value;
26
+ &.profile-1 {
27
+ background-image: url("~@appscode/design-system-images/icons/appscode-large-icon.jpg");
59
28
  }
60
29
  }
61
- }
62
-
63
- .edit-icon {
64
- max-width: 16px;
65
- }
66
-
67
- p {
68
- font-size: 14px;
69
- color: $ac-color-text;
70
- line-height: 160%;
71
- margin-bottom: 20px;
72
- }
73
-
74
- .social-links {
75
- margin-bottom: 20px;
76
30
 
77
- a {
78
- max-width: 26px;
79
- margin-right: 10px;
80
- display: inline-block;
81
-
82
- &:last-child {
83
- margin-right: 0;
84
- }
85
-
86
- img {
87
- width: 100%;
88
- }
31
+ .setting-button {
32
+ position: absolute;
33
+ left: 15px;
34
+ top: 15px;
35
+ font-size: 18px;
36
+ color: $ac-white;
37
+ background-color: transparent;
38
+ border: none;
39
+ cursor: pointer;
89
40
  }
90
41
  }
91
- .website-link {
92
- margin-top: 20px;
93
42
 
94
- a {
95
- color: $ac-primary;
43
+ .profile-information {
44
+ .profile-top-info {
96
45
  display: flex;
97
46
  align-items: center;
47
+ justify-content: space-between;
98
48
  margin-bottom: 10px;
99
- font-size: 13px;
100
- &:last-child {
101
- margin-bottom: 0;
49
+
50
+ h3 {
51
+ font-size: 26px;
52
+ line-height: 1.4;
53
+
54
+ span {
55
+ font-size: 14px;
56
+ line-height: 1.5;
57
+ font-weight: 400;
58
+ display: block;
59
+ color: $ac-color-value;
60
+ }
102
61
  }
62
+ }
63
+
64
+ .edit-icon {
65
+ max-width: 16px;
66
+ }
103
67
 
104
- img {
105
- max-width: 18px;
68
+ p {
69
+ font-size: 14px;
70
+ color: $ac-color-text;
71
+ line-height: 160%;
72
+ margin-bottom: 20px;
73
+ }
74
+
75
+ .social-links {
76
+ margin-bottom: 20px;
77
+
78
+ a {
79
+ max-width: 26px;
106
80
  margin-right: 10px;
81
+ display: inline-block;
82
+
83
+ &:last-child {
84
+ margin-right: 0;
85
+ }
86
+
87
+ img {
88
+ width: 100%;
89
+ }
90
+ }
91
+ }
92
+ .website-link {
93
+ margin-top: 20px;
94
+
95
+ a {
96
+ color: $ac-primary;
97
+ display: flex;
98
+ align-items: center;
99
+ margin-bottom: 10px;
100
+ font-size: 13px;
101
+ &:last-child {
102
+ margin-bottom: 0;
103
+ }
104
+
105
+ img {
106
+ max-width: 18px;
107
+ margin-right: 10px;
108
+ }
107
109
  }
108
110
  }
109
111
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.0.43-alpha.19",
3
+ "version": "1.0.43-alpha.20",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {