@appscode/design-system 1.1.0-beta.19 → 1.1.0-beta.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.
@@ -339,12 +339,12 @@ hr {
339
339
  background-color: transparent;
340
340
  }
341
341
 
342
- .is-danger {
343
- font-size: 12px;
344
- line-height: 22px;
345
- color: $danger;
346
- text-align: left;
347
- }
342
+ // .is-danger {
343
+ // font-size: 12px;
344
+ // line-height: 22px;
345
+ // color: $danger;
346
+ // text-align: left;
347
+ // }
348
348
 
349
349
  p.is-danger {
350
350
  color: $danger;
@@ -1,17 +1,13 @@
1
- @import "ac-terminal";
2
1
  // @import "ac-alert-box";
3
2
  // @import "ac-accordion";
4
3
  // @import "buttons";
5
4
  // @import "breadcumb";
6
- @import "ac-card";
7
5
  // @import "ac-multi-select";
8
6
  // @import "ac-code-highlight";
9
7
  // @import "navbar";
10
8
  // @import "app-drawer";
11
9
  // @import "ac-drag";
12
10
  // @import "left-sidebar-menu";
13
- @import "ac-input";
14
- @import "ac-report";
15
11
  // @import "ac-content-layout";
16
12
  // @import "ac-table";
17
13
  // @import "ac-tabs";
@@ -27,7 +23,12 @@
27
23
  // @import "go-to-top";
28
24
  // @import "ac-toaster/ac-toasted";
29
25
  // @import "preview-modal";
30
- @import "wizard";
31
26
  // @import "bbum/all";
27
+ // @import "wizard";
28
+
29
+ @import "terminal";
30
+ @import "input-card";
31
+ @import "input";
32
+ @import "report";
32
33
  @import "ui-builder/ui-builder";
33
34
  @import "ui-builder/vue-open-api";
@@ -0,0 +1,232 @@
1
+ // card select
2
+ .card-select {
3
+ height: 94px;
4
+ padding: 10px;
5
+ background-color: $white-100;
6
+ border: 1px solid $primary-90;
7
+ box-sizing: border-box;
8
+ border-radius: 4px;
9
+ transition: 0.3s ease-in-out;
10
+ position: relative;
11
+ z-index: 1;
12
+ width: 250px;
13
+
14
+ &.is-active-require-field {
15
+ &:after {
16
+ content: "";
17
+ position: absolute;
18
+ width: 100%;
19
+ height: 100%;
20
+ background-color: $ac-black;
21
+ top: 0;
22
+ left: 0;
23
+ z-index: 1;
24
+ opacity: 0.6;
25
+ border-radius: 4px;
26
+ }
27
+
28
+ .r-dropdown-item {
29
+ opacity: 1;
30
+ visibility: visible;
31
+ }
32
+ }
33
+
34
+ &.is-singleline {
35
+ height: auto;
36
+ padding: 0;
37
+ border: none;
38
+ background-color: transparent;
39
+ width: auto;
40
+ margin-bottom: 0;
41
+
42
+ label {
43
+ font-weight: 400 !important;
44
+ }
45
+
46
+ &:hover {
47
+ box-shadow: none;
48
+ border: none;
49
+
50
+ label {
51
+ color: $primary !important;
52
+ }
53
+ }
54
+
55
+ .ac-single-radio,
56
+ .ac-single-checkbox {
57
+ label {
58
+ font-size: 13px;
59
+ line-height: 20px;
60
+ color: $primary-5;
61
+ padding-left: 25px !important;
62
+ }
63
+ }
64
+
65
+ &.is-disabled {
66
+ background-color: transparent;
67
+
68
+ label {
69
+ color: $primary-10;
70
+ cursor: not-allowed;
71
+ }
72
+ }
73
+
74
+ .ac-single-radio .is-checkradio[type="radio"]:checked+label {
75
+ color: $primary;
76
+ }
77
+
78
+ .ac-single-radio {
79
+ margin-bottom: 0;
80
+ }
81
+ }
82
+
83
+ &.is-disabled {
84
+ background-color: $white-100-lighter;
85
+ cursor: not-allowed;
86
+ opacity: 0.8;
87
+
88
+ &:hover {
89
+ border-color: transparent;
90
+ box-shadow: none;
91
+ }
92
+ }
93
+
94
+ &:hover {
95
+ box-shadow: 0px 8px 50px rgba(0, 0, 0, 0.2);
96
+ border: 1px solid transparent;
97
+ }
98
+
99
+ &.is-selected {
100
+ border: 1px solid $primary;
101
+ }
102
+
103
+ &:last-child {
104
+ margin-right: 0;
105
+ }
106
+
107
+ // inline more button Start
108
+ .more-option {
109
+ position: relative;
110
+ z-index: 1;
111
+
112
+ .btn-more-option {
113
+ background-color: #e4e4e4;
114
+ height: 16px;
115
+ width: 30px;
116
+ border: none;
117
+ border-radius: 3px;
118
+ padding: 0;
119
+ cursor: pointer;
120
+ margin-left: 5px;
121
+ display: inline-flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ transform: translate(0px, -2px);
125
+
126
+ span {
127
+ display: inline-flex;
128
+ width: 4px;
129
+ height: 4px;
130
+ border-radius: 50%;
131
+ background-color: #b1b1b1;
132
+ margin-right: 2px;
133
+
134
+ &:last-child {
135
+ margin-right: 0;
136
+ }
137
+ }
138
+ }
139
+ }
140
+
141
+ .r-dropdown-item {
142
+ position: absolute;
143
+ z-index: 2;
144
+ right: 10px;
145
+ top: 10px;
146
+ background-color: $white-100;
147
+ box-shadow: $ac-shadow-2;
148
+ display: inline-block;
149
+ border-radius: 4px;
150
+ padding: 5px 15px;
151
+ width: 200px;
152
+ opacity: 0;
153
+ visibility: hidden;
154
+ transition: 0.3s ease-in-out;
155
+
156
+ button.close-icon {
157
+ position: absolute;
158
+ right: -5px;
159
+ top: -5px;
160
+ border: 1px solid $black-80;
161
+ font-size: 10px;
162
+ height: 25px;
163
+ width: 25px;
164
+ text-align: center;
165
+ background-color: $white-100;
166
+ border-radius: 50%;
167
+ cursor: pointer;
168
+ color: $danger;
169
+ transition: 0.3s ease-in-out;
170
+ display: block;
171
+
172
+ &:hover {
173
+ color: $white-100;
174
+ background-color: $danger;
175
+ border: 1px solid $danger;
176
+ }
177
+ }
178
+
179
+ li {
180
+ display: inline-block;
181
+
182
+ a {
183
+ display: block;
184
+ padding: 5px 10px 5px 0;
185
+ color: $primary-20;
186
+ font-size: 11px;
187
+ text-decoration: underline;
188
+ font-weight: 400;
189
+
190
+ &:hover {
191
+ color: $primary;
192
+ }
193
+ }
194
+ }
195
+ }
196
+
197
+ // inline more button end
198
+ .ac-single-radio,
199
+ .ac-single-checkbox {
200
+ margin-bottom: 10px;
201
+
202
+ &:last-child {
203
+ margin-bottom: 0;
204
+ }
205
+
206
+ label {
207
+ font-family: $font-heading;
208
+ font-style: normal;
209
+ font-weight: 500;
210
+ font-size: 13px;
211
+ line-height: 24px;
212
+ color: $primary-5;
213
+ }
214
+ }
215
+
216
+ p {
217
+ font-family: $font-paragraph;
218
+ font-style: normal;
219
+ font-weight: normal;
220
+ font-size: 13px;
221
+ line-height: 140%;
222
+ color: $primary-10;
223
+
224
+ &.is-warning {
225
+ color: $danger;
226
+ }
227
+
228
+ a {
229
+ text-decoration: underline;
230
+ }
231
+ }
232
+ }
@@ -898,4 +898,50 @@
898
898
  .ac-search:focus {
899
899
  width: 200px !important;
900
900
  padding-right: 10px;
901
+ }
902
+
903
+ // check radio
904
+
905
+ .ac-single-radio {
906
+ .is-checkradio[type="radio"]+label {
907
+ padding-left: 25px;
908
+
909
+ &:before {
910
+ width: 16px;
911
+ height: 16px;
912
+ top: 4px;
913
+ background: transparent;
914
+ }
915
+
916
+ &:after {
917
+ width: 16px;
918
+ height: 16px;
919
+ top: 4px;
920
+ }
921
+ }
922
+ }
923
+
924
+ .is-checkradio[type="radio"]+label::after,
925
+ .is-checkradio[type="radio"]+label:after {
926
+ background: $primary;
927
+ }
928
+
929
+ .is-checkradio[type="checkbox"]:checked+label::before,
930
+ .is-checkradio[type="checkbox"]:checked+label:before,
931
+ .is-checkradio[type="radio"]:checked+label::before,
932
+ .is-checkradio[type="radio"]:checked+label:before {
933
+ border: 0.2rem solid $primary;
934
+ }
935
+
936
+ .is-checkradio[type="checkbox"]:hover:not([disabled])+label::before,
937
+ .is-checkradio[type="checkbox"]:hover:not([disabled])+label:before,
938
+ .is-checkradio[type="radio"]:hover:not([disabled])+label::before,
939
+ .is-checkradio[type="radio"]:hover:not([disabled])+label:before {
940
+ border-color: $primary-30 !important;
941
+ }
942
+
943
+ .is-checkradio[type="checkbox"]+label::after,
944
+ .is-checkradio[type="checkbox"]+label:after {
945
+ border-width: 0.2rem;
946
+ border-color: $primary;
901
947
  }
@@ -111,285 +111,7 @@
111
111
  // key-value-button end
112
112
 
113
113
  // select card start
114
- .card-select {
115
- height: 94px;
116
- padding: 10px;
117
- background-color: $white-100;
118
- border: 1px solid $primary-90;
119
- box-sizing: border-box;
120
- border-radius: 4px;
121
- transition: 0.3s ease-in-out;
122
- position: relative;
123
- z-index: 1;
124
- width: 250px;
125
-
126
- &.is-active-require-field {
127
- &:after {
128
- content: "";
129
- position: absolute;
130
- width: 100%;
131
- height: 100%;
132
- background-color: $ac-black;
133
- top: 0;
134
- left: 0;
135
- z-index: 1;
136
- opacity: 0.6;
137
- border-radius: 4px;
138
- }
139
-
140
- .r-dropdown-item {
141
- opacity: 1;
142
- visibility: visible;
143
- }
144
- }
145
-
146
- // &:last-child {
147
- // margin-bottom: 0;
148
- // }
149
-
150
- &.is-singleline {
151
- height: auto;
152
- padding: 0;
153
- border: none;
154
- background-color: transparent;
155
- width: auto;
156
- margin-bottom: 0;
157
-
158
- label {
159
- font-weight: 400 !important;
160
- }
161
-
162
- &:hover {
163
- box-shadow: none;
164
- border: none;
165
-
166
- label {
167
- color: $primary !important;
168
- }
169
- }
170
-
171
- .ac-single-radio,
172
- .ac-single-checkbox {
173
- label {
174
- font-size: 13px;
175
- line-height: 20px;
176
- color: $primary-5;
177
- padding-left: 25px !important;
178
- }
179
-
180
- .is-checkradio[type="checkbox"].ac-checkbox+label::before,
181
- .is-checkradio[type="radio"]+label:before,
182
- .is-checkradio[type="radio"]+label:after {
183
- width: 16px;
184
- height: 16px;
185
- top: 3px;
186
- }
187
-
188
- .is-checkradio[type="checkbox"].ac-checkbox+label::after {
189
- left: 5px;
190
- }
191
- }
192
-
193
- &.is-disabled {
194
- background-color: transparent;
195
-
196
- label {
197
- color: $primary-10;
198
- cursor: not-allowed;
199
- }
200
- }
201
-
202
- .ac-single-radio .is-checkradio[type="radio"]:checked+label {
203
- color: $primary;
204
- }
205
-
206
- .ac-single-radio {
207
- margin-bottom: 0;
208
- }
209
- }
210
-
211
- &.is-disabled {
212
- background-color: $white-100-lighter;
213
- cursor: not-allowed;
214
- opacity: 0.8;
215
-
216
- &:hover {
217
- border-color: transparent;
218
- box-shadow: none;
219
- }
220
- }
221
-
222
- &:hover {
223
- box-shadow: 0px 8px 50px rgba(0, 0, 0, 0.2);
224
- border: 1px solid transparent;
225
- }
226
-
227
- &.is-selected {
228
- border: 1px solid $primary;
229
- }
230
-
231
- &:last-child {
232
- margin-right: 0;
233
- }
234
-
235
- // inline more button Start
236
- .more-option {
237
- position: relative;
238
- z-index: 1;
239
-
240
- .btn-more-option {
241
- background-color: #e4e4e4;
242
- height: 16px;
243
- width: 30px;
244
- border: none;
245
- border-radius: 3px;
246
- padding: 0;
247
- cursor: pointer;
248
- margin-left: 5px;
249
- display: inline-flex;
250
- align-items: center;
251
- justify-content: center;
252
- transform: translate(0px, -2px);
253
-
254
- span {
255
- display: inline-flex;
256
- width: 4px;
257
- height: 4px;
258
- border-radius: 50%;
259
- background-color: #b1b1b1;
260
- margin-right: 2px;
261
-
262
- &:last-child {
263
- margin-right: 0;
264
- }
265
- }
266
- }
267
- }
268
-
269
- .r-dropdown-item {
270
- position: absolute;
271
- z-index: 2;
272
- right: 10px;
273
- top: 10px;
274
- background-color: $white-100;
275
- box-shadow: $ac-shadow-2;
276
- display: inline-block;
277
- border-radius: 4px;
278
- padding: 5px 15px;
279
- width: 200px;
280
- opacity: 0;
281
- visibility: hidden;
282
- transition: 0.3s ease-in-out;
283
-
284
- button.close-icon {
285
- position: absolute;
286
- right: -5px;
287
- top: -5px;
288
- border: 1px solid $black-80;
289
- font-size: 10px;
290
- height: 25px;
291
- width: 25px;
292
- text-align: center;
293
- background-color: $white-100;
294
- border-radius: 50%;
295
- cursor: pointer;
296
- color: $danger;
297
- transition: 0.3s ease-in-out;
298
- display: block;
299
-
300
- &:hover {
301
- color: $white-100;
302
- background-color: $danger;
303
- border: 1px solid $danger;
304
- }
305
- }
306
-
307
- li {
308
- display: inline-block;
309
-
310
- a {
311
- display: block;
312
- padding: 5px 10px 5px 0;
313
- color: $primary-20;
314
- font-size: 11px;
315
- text-decoration: underline;
316
- font-weight: 400;
317
-
318
- &:hover {
319
- color: $primary;
320
- }
321
- }
322
- }
323
- }
324
-
325
- // inline more button end
326
- .ac-single-radio,
327
- .ac-single-checkbox {
328
- margin-bottom: 10px;
329
-
330
- &:last-child {
331
- margin-bottom: 0;
332
- }
333
-
334
- label {
335
- font-family: $font-heading;
336
- font-style: normal;
337
- font-weight: 500;
338
- font-size: 13px;
339
- line-height: 24px;
340
- color: $primary-5;
341
- }
342
- }
343
-
344
- p {
345
- font-family: $font-paragraph;
346
- font-style: normal;
347
- font-weight: normal;
348
- font-size: 13px;
349
- line-height: 140%;
350
- color: $primary-10;
351
-
352
- &.is-warning {
353
- color: $danger;
354
- }
355
-
356
- a {
357
- text-decoration: underline;
358
- }
359
- }
360
-
361
- .ac-single-radio {
362
- .is-checkradio[type="radio"]+label {
363
- padding-left: 25px;
364
-
365
- &:before {
366
- width: 16px;
367
- height: 16px;
368
- top: 4px;
369
- background: $primary;
370
- }
371
-
372
- &:after {
373
- width: 16px;
374
- height: 16px;
375
- top: 4px;
376
- }
377
- }
378
- }
379
-
380
- .ac-single-checkbox {
381
- .is-checkradio[type="checkbox"] {
382
- &.ac-checkbox+label {
383
- font-family: $font-heading;
384
- font-style: normal;
385
- font-weight: 500;
386
- font-size: 13px;
387
- line-height: 20px;
388
- color: $primary-5;
389
- }
390
- }
391
- }
392
- }
114
+
393
115
 
394
116
  // select card end
395
117
 
@@ -213,13 +213,13 @@
213
213
  }
214
214
 
215
215
  // dark theme start
216
- .is-dark-theme {
217
- .nested-body {
218
- code {
219
- background-color: var(--dark-bg-light);
220
- }
221
- }
222
- }
216
+ // .is-dark-theme {
217
+ // .nested-body {
218
+ // code {
219
+ // background-color: var(--dark-bg-light);
220
+ // }
221
+ // }
222
+ // }
223
223
 
224
224
  //For resource input from
225
225
  .resource-input {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.1.0-beta.19",
3
+ "version": "1.1.0-beta.20",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
@@ -54,8 +54,10 @@ const createBreadcrumbs = () => {
54
54
  pathReplaceWithParam(element.path)
55
55
  );
56
56
 
57
- //Removing the last duplicate value from the listpaths array
58
- listPaths.pop();
57
+ // If there is duplicate value in arrays last element remove it
58
+ const length = listPaths.length;
59
+ if (length > 1 && listPaths[length - 1] === listPaths[length - 2])
60
+ listPaths.pop();
59
61
 
60
62
  //Createing the breadcrumb name
61
63
  const listName = createList(listPaths);
@@ -72,6 +72,10 @@ const handleClick = (e: Event) => {
72
72
  &.is-small {
73
73
  padding: 4px 9px;
74
74
  }
75
+ &.is-medium {
76
+ font-size: 1rem;
77
+ height: 36px;
78
+ }
75
79
  }
76
80
  }
77
81
  button.is-primary {
@@ -351,7 +351,7 @@ onUpdated(() => {
351
351
  color: $ac-black;
352
352
  transition: 0.3s ease-in-out;
353
353
  .tag {
354
- background-color: $primary-50;
354
+ background-color: $primary;
355
355
  }
356
356
  &:hover {
357
357
  background-color: $primary-95 !important;
@@ -77,7 +77,7 @@ const toggleCollapse = () => {
77
77
  >
78
78
  <table-cell v-if="collapsible">
79
79
  <collapsible-button
80
- modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
80
+ modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7 p-0"
81
81
  :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
82
82
  @click.stop="toggleCollapse"
83
83
  />
@@ -102,7 +102,7 @@ const toggleCollapse = () => {
102
102
  >
103
103
  <table-cell v-if="collapsible">
104
104
  <collapsible-button
105
- modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
105
+ modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7 p-0"
106
106
  :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
107
107
  @click.stop="toggleCollapse"
108
108
  />
File without changes
File without changes