playbook_ui 5.0.3 → 5.1.0.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (79) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +4 -0
  3. data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
  4. data/app/pb_kits/playbook/pb_popover/_popover.html.erb +2 -2
  5. data/app/pb_kits/playbook/pb_popover/_popover.jsx +3 -3
  6. data/app/pb_kits/playbook/pb_popover/_popover.scss +21 -19
  7. data/app/pb_kits/playbook/pb_popover/index.js +1 -6
  8. data/app/pb_kits/playbook/tokens/index.scss +12 -0
  9. data/lib/playbook/version.rb +1 -1
  10. data/lib/tasks/pb_release.rake +3 -0
  11. metadata +5 -72
  12. data/app/assets/images/clark.jpg +0 -0
  13. data/app/assets/images/giant.jpg +0 -0
  14. data/app/assets/images/pb-caret.svg +0 -1
  15. data/app/assets/images/pb-check.svg +0 -11
  16. data/app/assets/images/pb.logo.svg +0 -28
  17. data/app/controllers/playbook/application_controller.rb +0 -13
  18. data/app/controllers/playbook/guides_controller.rb +0 -11
  19. data/app/controllers/playbook/pages_controller.rb +0 -79
  20. data/app/controllers/playbook/samples_controller.rb +0 -40
  21. data/app/pb_kits/playbook/config/_kit_example.html.erb +0 -9
  22. data/app/pb_kits/playbook/config/_kit_samples_list.html.erb +0 -3
  23. data/app/pb_kits/playbook/config/_kit_ui.html.erb +0 -40
  24. data/app/pb_kits/playbook/config/_pb_kit_api.html.erb +0 -18
  25. data/app/pb_kits/playbook/data/menu.yml +0 -93
  26. data/app/pb_kits/playbook/packs/application.js +0 -55
  27. data/app/pb_kits/playbook/packs/examples.js +0 -174
  28. data/app/pb_kits/playbook/packs/main.scss +0 -12
  29. data/app/pb_kits/playbook/packs/samples.js +0 -19
  30. data/app/pb_kits/playbook/packs/site_styles/_samples.scss +0 -72
  31. data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss +0 -43
  32. data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +0 -135
  33. data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss +0 -9
  34. data/app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss +0 -531
  35. data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss +0 -92
  36. data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss +0 -15
  37. data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +0 -190
  38. data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +0 -18
  39. data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +0 -82
  40. data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss +0 -72
  41. data/app/views/layouts/playbook/_mobile_hamburger.html.erb +0 -2
  42. data/app/views/layouts/playbook/_nav.html.erb +0 -13
  43. data/app/views/layouts/playbook/_sidebar.html.erb +0 -52
  44. data/app/views/layouts/playbook/application.html.slim +0 -22
  45. data/app/views/layouts/playbook/fullscreen.html.slim +0 -10
  46. data/app/views/layouts/playbook/grid.html.slim +0 -10
  47. data/app/views/layouts/playbook/samples.html.erb +0 -18
  48. data/app/views/playbook/guides/create_kit/_file_naming.html.md +0 -2
  49. data/app/views/playbook/guides/create_kit/_generator.html.md +0 -6
  50. data/app/views/playbook/guides/create_kit/_kit_examples.html.md +0 -2
  51. data/app/views/playbook/guides/create_kit/_kit_rails.html.md +0 -2
  52. data/app/views/playbook/guides/create_kit/_kit_react.html.md +0 -2
  53. data/app/views/playbook/guides/create_kit/_layout.html.md +0 -2
  54. data/app/views/playbook/guides/create_kit/_view_objects.html.md +0 -2
  55. data/app/views/playbook/guides/create_kit/_writing_sass.md +0 -10
  56. data/app/views/playbook/guides/create_kit.html.slim +0 -16
  57. data/app/views/playbook/guides/use_nitro/_local.html.md +0 -2
  58. data/app/views/playbook/guides/use_nitro/_nitro_components.html.md +0 -2
  59. data/app/views/playbook/guides/use_nitro/_versions.html.md +0 -2
  60. data/app/views/playbook/guides/use_nitro.html.slim +0 -6
  61. data/app/views/playbook/pages/fullscreen.html.slim +0 -10
  62. data/app/views/playbook/pages/grid.html.slim +0 -2
  63. data/app/views/playbook/pages/home.html.slim +0 -4
  64. data/app/views/playbook/pages/kit_category_show.html.erb +0 -14
  65. data/app/views/playbook/pages/kit_show.html.erb +0 -33
  66. data/app/views/playbook/pages/kits.html.erb +0 -12
  67. data/app/views/playbook/pages/principals/_getting_started.html.md +0 -30
  68. data/app/views/playbook/pages/principles.html.slim +0 -3
  69. data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +0 -17
  70. data/app/views/playbook/pages/tokens.html.slim +0 -15
  71. data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim +0 -15
  72. data/app/views/playbook/pages/utilities.html.slim +0 -116
  73. data/app/views/playbook/samples/dashboards/index.html.erb +0 -81
  74. data/app/views/playbook/samples/dashboards/index.jsx +0 -130
  75. data/app/views/playbook/samples/filter_table/index.html.erb +0 -348
  76. data/app/views/playbook/samples/filter_table/index.jsx +0 -433
  77. data/app/views/playbook/samples/registration/index.html.erb +0 -316
  78. data/app/views/playbook/samples/registration/index.jsx +0 -476
  79. data/app/views/playbook/samples/sample_show.html.erb +0 -36
@@ -1,531 +0,0 @@
1
- @import "../../../tokens/colors";
2
-
3
- .pb--codeCopy {
4
- .highlight {
5
- margin: 20px 0;
6
- }
7
- .highlight .hll {
8
- background-color: #404040
9
- }
10
- .highlight {
11
- background: #193f5d;
12
- color: #d0d0d0
13
- }
14
- .highlight .c {
15
- color: #999999;
16
- font-style: italic
17
- }
18
- /* Comment */
19
- .highlight .err {
20
- color: #a61717;
21
- background-color: #e3d2d2
22
- }
23
- /* Error */
24
- .highlight .esc {
25
- color: #d0d0d0
26
- }
27
- /* Escape */
28
- .highlight .g {
29
- color: #d0d0d0
30
- }
31
- /* Generic */
32
- .highlight .k {
33
- color: #6ab825;
34
- font-weight: bold
35
- }
36
- /* Keyword */
37
- .highlight .l {
38
- color: #d0d0d0
39
- }
40
- /* Literal */
41
- .highlight .n {
42
- color: #d0d0d0
43
- }
44
- /* Name */
45
- .highlight .o {
46
- color: #d0d0d0
47
- }
48
- /* Operator */
49
- .highlight .x {
50
- color: #d0d0d0
51
- }
52
- /* Other */
53
- .highlight .p {
54
- color: #d0d0d0
55
- }
56
- /* Punctuation */
57
- .highlight .ch {
58
- color: #999999;
59
- font-style: italic
60
- }
61
- /* Comment.Hashbang */
62
- .highlight .cm {
63
- color: #999999;
64
- font-style: italic
65
- }
66
- /* Comment.Multiline */
67
- .highlight .cp {
68
- color: #5bb3ff;
69
- font-weight: bold
70
- }
71
- /* Comment.Preproc */
72
- .highlight .cpf {
73
- color: #999999;
74
- font-style: italic
75
- }
76
- /* Comment.PreprocFile */
77
- .highlight .c1 {
78
- color: #999999;
79
- font-style: italic
80
- }
81
- /* Comment.Single */
82
- .highlight .cs {
83
- color: #e50808;
84
- font-weight: bold;
85
- background-color: #520000
86
- }
87
- /* Comment.Special */
88
- .highlight .gd {
89
- color: #d22323
90
- }
91
- /* Generic.Deleted */
92
- .highlight .ge {
93
- color: #d0d0d0;
94
- font-style: italic
95
- }
96
- /* Generic.Emph */
97
- .highlight .gr {
98
- color: #d22323
99
- }
100
- /* Generic.Error */
101
- .highlight .gh {
102
- color: #ffffff;
103
- font-weight: bold
104
- }
105
- /* Generic.Heading */
106
- .highlight .gi {
107
- color: #589819
108
- }
109
- /* Generic.Inserted */
110
- .highlight .go {
111
- color: #cccccc
112
- }
113
- /* Generic.Output */
114
- .highlight .gp {
115
- color: #aaaaaa
116
- }
117
- /* Generic.Prompt */
118
- .highlight .gs {
119
- color: #d0d0d0;
120
- font-weight: bold
121
- }
122
- /* Generic.Strong */
123
- .highlight .gu {
124
- color: #ffffff;
125
- text-decoration: underline
126
- }
127
- /* Generic.Subheading */
128
- .highlight .gt {
129
- color: #d22323
130
- }
131
- /* Generic.Traceback */
132
- .highlight .kc {
133
- color: #6ab825;
134
- font-weight: bold
135
- }
136
- /* Keyword.Constant */
137
- .highlight .kd {
138
- color: #6ab825;
139
- font-weight: bold
140
- }
141
- /* Keyword.Declaration */
142
- .highlight .kn {
143
- color: #6ab825;
144
- font-weight: bold
145
- }
146
- /* Keyword.Namespace */
147
- .highlight .kp {
148
- color: #6ab825
149
- }
150
- /* Keyword.Pseudo */
151
- .highlight .kr {
152
- color: #6ab825;
153
- font-weight: bold
154
- }
155
- /* Keyword.Reserved */
156
- .highlight .kt {
157
- color: #6ab825;
158
- font-weight: bold
159
- }
160
- /* Keyword.Type */
161
- .highlight .ld {
162
- color: #d0d0d0
163
- }
164
- /* Literal.Date */
165
- .highlight .m {
166
- color: #3677a9
167
- }
168
- /* Literal.Number */
169
- .highlight .s {
170
- color: #f5cf49
171
- }
172
- /* Literal.String */
173
- .highlight .na {
174
- color: #bbbbbb
175
- }
176
- /* Name.Attribute */
177
- .highlight .nb {
178
- color: #24909d
179
- }
180
- /* Name.Builtin */
181
- .highlight .nc {
182
- color: #64a3f7;
183
- text-decoration: underline
184
- }
185
- /* Name.Class */
186
- .highlight .no {
187
- color: #40ffff
188
- }
189
- /* Name.Constant */
190
- .highlight .nd {
191
- color: #ffa500
192
- }
193
- /* Name.Decorator */
194
- .highlight .ni {
195
- color: #d0d0d0
196
- }
197
- /* Name.Entity */
198
- .highlight .ne {
199
- color: #bbbbbb
200
- }
201
- /* Name.Exception */
202
- .highlight .nf {
203
- color: #64a3f7
204
- }
205
- /* Name.Function */
206
- .highlight .nl {
207
- color: #d0d0d0
208
- }
209
- /* Name.Label */
210
- .highlight .nn {
211
- color: #64a3f7;
212
- text-decoration: underline
213
- }
214
- /* Name.Namespace */
215
- .highlight .nx {
216
- color: #d0d0d0
217
- }
218
- /* Name.Other */
219
- .highlight .py {
220
- color: #d0d0d0
221
- }
222
- /* Name.Property */
223
- .highlight .nt {
224
- color: #6ab825;
225
- font-weight: bold
226
- }
227
- /* Name.Tag */
228
- .highlight .nv {
229
- color: #40ffff
230
- }
231
- /* Name.Variable */
232
- .highlight .ow {
233
- color: #6ab825;
234
- font-weight: bold
235
- }
236
- /* Operator.Word */
237
- .highlight .w {
238
- color: #666666
239
- }
240
- /* Text.Whitespace */
241
- .highlight .mb {
242
- color: #3677a9
243
- }
244
- /* Literal.Number.Bin */
245
- .highlight .mf {
246
- color: #3677a9
247
- }
248
- /* Literal.Number.Float */
249
- .highlight .mh {
250
- color: #3677a9
251
- }
252
- /* Literal.Number.Hex */
253
- .highlight .mi {
254
- color: #3677a9
255
- }
256
- /* Literal.Number.Integer */
257
- .highlight .mo {
258
- color: #3677a9
259
- }
260
- /* Literal.Number.Oct */
261
- .highlight .sa {
262
- color: #f5cf49
263
- }
264
- /* Literal.String.Affix */
265
- .highlight .sb {
266
- color: #f5cf49
267
- }
268
- /* Literal.String.Backtick */
269
- .highlight .sc {
270
- color: #f5cf49
271
- }
272
- /* Literal.String.Char */
273
- .highlight .dl {
274
- color: #f5cf49
275
- }
276
- /* Literal.String.Delimiter */
277
- .highlight .sd {
278
- color: #f5cf49
279
- }
280
- /* Literal.String.Doc */
281
- .highlight .s2 {
282
- color: #f5cf49
283
- }
284
- /* Literal.String.Double */
285
- .highlight .se {
286
- color: #f5cf49
287
- }
288
- /* Literal.String.Escape */
289
- .highlight .sh {
290
- color: #f5cf49
291
- }
292
- /* Literal.String.Heredoc */
293
- .highlight .si {
294
- color: #f5cf49
295
- }
296
- /* Literal.String.Interpol */
297
- .highlight .sx {
298
- color: #ffa500
299
- }
300
- /* Literal.String.Other */
301
- .highlight .sr {
302
- color: #f5cf49
303
- }
304
- /* Literal.String.Regex */
305
- .highlight .s1 {
306
- color: #f5cf49
307
- }
308
- /* Literal.String.Single */
309
- .highlight .ss {
310
- color: #f5cf49
311
- }
312
- /* Literal.String.Symbol */
313
- .highlight .bp {
314
- color: #24909d
315
- }
316
- /* Name.Builtin.Pseudo */
317
- .highlight .fm {
318
- color: #64a3f7
319
- }
320
- /* Name.Function.Magic */
321
- .highlight .vc {
322
- color: #40ffff
323
- }
324
- /* Name.Variable.Class */
325
- .highlight .vg {
326
- color: #40ffff
327
- }
328
- /* Name.Variable.Global */
329
- .highlight .vi {
330
- color: #40ffff
331
- }
332
- /* Name.Variable.Instance */
333
- .highlight .vm {
334
- color: #40ffff
335
- }
336
- /* Name.Variable.Magic */
337
- .highlight .il {
338
- color: #3677a9
339
- }
340
- /* Literal.Number.Integer.Long */
341
- .highlight table pre {
342
- margin: 0;
343
- }
344
- .highlight {
345
- color: #faf6e4;
346
- background-color: transparent; /*charcoal*/
347
- }
348
- .highlight .gl {
349
- color: #dee5e7;
350
- background-color: #4e5d62;
351
- }
352
- .highlight .c,
353
- .highlight .cd,
354
- .highlight .cm,
355
- .highlight .c1,
356
- .highlight .cs {
357
- color: #6c8b9f;
358
- font-style: italic;
359
- }
360
- .highlight .cp {
361
- color: #b2fd6d;
362
- font-weight: bold;
363
- font-style: italic;
364
- }
365
- .highlight .err {
366
- color: #fefeec;
367
- background-color: #cc0000;
368
- }
369
- .highlight .gr {
370
- color: #fefeec;
371
- background-color: #cc0000;
372
- }
373
- .highlight .k,
374
- .highlight .kd,
375
- .highlight .kv {
376
- color: #f6dd62;
377
- font-weight: bold;
378
- }
379
- .highlight .o,
380
- .highlight .ow {
381
- color: #4df4ff;
382
- }
383
- .highlight .p,
384
- .highlight .pi {
385
- color: #4df4ff;
386
- }
387
- .highlight .gd {
388
- color: #cc0000;
389
- }
390
- .highlight .gi {
391
- color: #b2fd6d;
392
- }
393
- .highlight .ge {
394
- font-style: italic;
395
- }
396
- .highlight .gs {
397
- font-weight: bold;
398
- }
399
- .highlight .gt {
400
- color: #dee5e7;
401
- background-color: #4e5d62;
402
- }
403
- .highlight .kc {
404
- color: #f696db;
405
- font-weight: bold;
406
- }
407
- .highlight .kn {
408
- color: #ffb000;
409
- font-weight: bold;
410
- }
411
- .highlight .kp {
412
- color: #ffb000;
413
- font-weight: bold;
414
- }
415
- .highlight .kr {
416
- color: #ffb000;
417
- font-weight: bold;
418
- }
419
- .highlight .gh {
420
- color: #ffb000;
421
- font-weight: bold;
422
- }
423
- .highlight .gu {
424
- color: #ffb000;
425
- font-weight: bold;
426
- }
427
- .highlight .kt {
428
- color: #b2fd6d;
429
- font-weight: bold;
430
- }
431
- .highlight .no {
432
- color: #b2fd6d;
433
- font-weight: bold;
434
- }
435
- .highlight .nc {
436
- color: #b2fd6d;
437
- font-weight: bold;
438
- }
439
- .highlight .nd {
440
- color: #b2fd6d;
441
- font-weight: bold;
442
- }
443
- .highlight .nn {
444
- color: #b2fd6d;
445
- font-weight: bold;
446
- }
447
- .highlight .bp {
448
- color: #b2fd6d;
449
- font-weight: bold;
450
- }
451
- .highlight .ne {
452
- color: #b2fd6d;
453
- font-weight: bold;
454
- }
455
- .highlight .nl {
456
- color: #ffb000;
457
- font-weight: bold;
458
- }
459
- .highlight .nt {
460
- color: #ffb000;
461
- font-weight: bold;
462
- }
463
- .highlight .m,
464
- .highlight .mf,
465
- .highlight .mh,
466
- .highlight .mi,
467
- .highlight .il,
468
- .highlight .mo,
469
- .highlight .mb,
470
- .highlight .mx {
471
- color: #f696db;
472
- font-weight: bold;
473
- }
474
- .highlight .ld {
475
- color: #f696db;
476
- font-weight: bold;
477
- }
478
- .highlight .ss {
479
- color: #f696db;
480
- font-weight: bold;
481
- }
482
- .highlight .s,
483
- .highlight .sb,
484
- .highlight .sd,
485
- .highlight .s2,
486
- .highlight .sh,
487
- .highlight .sx,
488
- .highlight .sr,
489
- .highlight .s1 {
490
- color: #fff0a6;
491
- font-weight: bold;
492
- }
493
- .highlight .se {
494
- color: #4df4ff;
495
- font-weight: bold;
496
- }
497
- .highlight .sc {
498
- color: #4df4ff;
499
- font-weight: bold;
500
- }
501
- .highlight .si {
502
- color: #4df4ff;
503
- font-weight: bold;
504
- }
505
- .highlight .nb {
506
- font-weight: bold;
507
- }
508
- .highlight .ni {
509
- color: #999999;
510
- font-weight: bold;
511
- }
512
- .highlight .w {
513
- color: #BBBBBB;
514
- }
515
- .highlight .nf {
516
- color: #a8e1fe;
517
- }
518
- .highlight .py {
519
- color: #a8e1fe;
520
- }
521
- .highlight .na {
522
- color: #a8e1fe;
523
- }
524
- .highlight .nv,
525
- .highlight .vc,
526
- .highlight .vg,
527
- .highlight .vi {
528
- color: #a8e1fe;
529
- font-weight: bold;
530
- }
531
- }
@@ -1,92 +0,0 @@
1
- @import "../../../tokens/colors";
2
-
3
- // Only used for our documentation site.
4
- // Creates color classes for color utilities.
5
- @mixin doc-color($colors-list) {
6
- @each $name, $color in $colors-list {
7
- .pb--color_#{$name} {
8
- background-color: $color !important;
9
- }
10
- }
11
- }
12
- @include doc-color($colors);
13
- @include doc-color($interface_colors);
14
- @include doc-color($main_colors);
15
- @include doc-color($background_colors);
16
- @include doc-color($card_colors);
17
- @include doc-color($active_colors);
18
- @include doc-color($action_colors);
19
- @include doc-color($hover_colors);
20
- @include doc-color($border_colors);
21
- @include doc-color($shadow_colors);
22
- @include doc-color($text_colors);
23
- @include doc-color($data_colors);
24
- @include doc-color($status_colors);
25
- @include doc-color($product_colors);
26
- @include doc-color($category_colors);
27
-
28
- .pb--color_bg_gradient {
29
- background: $gradient_start;
30
- background: -moz-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
31
- background: -webkit-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
32
- background: linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%);
33
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient_start}', endColorstr='#{$gradient_end}',GradientType=1 );
34
- }
35
-
36
- ul {
37
- &.pb--utlities-color {
38
- list-style: none;
39
- display: flex;
40
- justify-content: flex-start;
41
- align-items: center;
42
- margin: 5px 0 20px 0;
43
- background: white;
44
- border-radius: 4px;
45
- border: 1px solid $border-light;
46
- padding: 10px;
47
- flex-wrap: wrap;
48
-
49
- li {
50
- border-radius: 4px;
51
- margin: 10px 5px;
52
- position: relative;
53
-
54
- & > div {
55
- width: 80px;
56
- height: 80px;
57
- border-radius: 40px;
58
- margin: 20px 15px 45px;
59
- position: relative;
60
- }
61
- &::before {
62
- content: attr(data-name);
63
- width: 100%;
64
- position: absolute;
65
- top: 105px;
66
- left: 0;
67
- text-align: center;
68
- font-size: 14px;
69
- font-weight: 600;
70
- }
71
- &::after {
72
- content: attr(data-variable);
73
- width: 100%;
74
- position: absolute;
75
- top: 124px;
76
- left: 0;
77
- text-align: center;
78
- font-size: 12px;
79
- opacity: 0.7;
80
- }
81
-
82
- &.dark {
83
- background: $bg_dark;
84
- color: $white;
85
- }
86
-
87
- &:first-child {
88
- margin-left: 0;
89
- }
90
- }
91
- }
92
- }
@@ -1,15 +0,0 @@
1
- .flex-doc-example {
2
- overflow: auto;
3
- [class^=pb_flex_kit] {
4
- background: #F3F7FB;
5
- }
6
- .flex-item, [class^=pb_flex_item_kit] {
7
- background: #E4E8F0;
8
- min-width: 30px;
9
- min-height: 30px;
10
- color: #242B42;
11
- }
12
- .tall {
13
- min-height: 200px;
14
- }
15
- }