playbook_ui 13.32.0.pre.alpha.PLAY14143255 → 13.32.0.pre.alpha.PLAY14143260

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +123 -0
  3. data/app/pb_kits/playbook/_reset.scss +42 -0
  4. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +3 -3
  5. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +0 -2
  6. data/app/pb_kits/playbook/pb_badge/_badge.scss +2 -2
  7. data/app/pb_kits/playbook/pb_body/_body.scss +1 -1
  8. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx +0 -2
  9. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +1 -1
  10. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx +0 -2
  11. data/app/pb_kits/playbook/pb_card/_card.scss +1 -1
  12. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +3 -3
  13. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +1 -1
  14. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +2 -4
  15. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +4 -4
  16. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss +4 -4
  17. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx +0 -2
  18. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +0 -1
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +0 -1
  20. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -1
  21. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +0 -1
  22. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +0 -1
  23. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +0 -1
  24. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx +0 -1
  25. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +0 -1
  26. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +5 -5
  27. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +0 -1
  28. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +2 -2
  29. data/app/pb_kits/playbook/pb_label_value/_label_value.scss +1 -1
  30. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx +0 -2
  31. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +0 -2
  32. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +0 -1
  33. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +0 -1
  34. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +0 -1
  35. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +0 -1
  36. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +0 -1
  37. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +0 -1
  38. data/app/pb_kits/playbook/pb_message/_message.tsx +0 -2
  39. data/app/pb_kits/playbook/pb_message/_message_mixins.scss +1 -1
  40. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +1 -1
  41. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +0 -2
  42. data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss +3 -3
  43. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +0 -2
  44. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +2 -1
  45. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +0 -1
  46. data/app/pb_kits/playbook/pb_pill/_pill.scss +2 -2
  47. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +2 -2
  48. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +2 -2
  49. data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
  50. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
  51. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +0 -2
  52. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +0 -1
  53. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
  54. data/app/pb_kits/playbook/pb_textarea/_textarea.scss +1 -1
  55. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +4 -4
  56. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +2 -2
  57. data/app/pb_kits/playbook/pb_title_count/_title_count.tsx +0 -1
  58. data/app/pb_kits/playbook/pb_toggle/_toggle.scss +5 -5
  59. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx +0 -2
  60. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx +0 -2
  61. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +0 -2
  62. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +0 -2
  63. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx +0 -2
  64. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +0 -2
  65. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +0 -2
  66. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +0 -2
  67. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +0 -2
  68. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +0 -2
  69. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +0 -2
  70. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx +0 -2
  71. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx +0 -2
  72. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +0 -2
  73. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +0 -2
  74. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx +0 -2
  75. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx +0 -2
  76. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +0 -1
  77. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -2
  78. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +0 -2
  79. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +0 -2
  80. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -2
  81. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +2 -3
  82. data/app/pb_kits/playbook/tokens/exports/_colors.module.scss +1 -1
  83. data/app/pb_kits/playbook/utilities/_hover.scss +4 -4
  84. data/dist/playbook.css +1291 -0
  85. data/lib/playbook/version.rb +1 -1
  86. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d50a91e4b078d50790bfb291d8f9faa62fd0bae9ee1ef72763fcd724df7fef67
4
- data.tar.gz: 062b362013b0872a0911052dcf67da78846051ed9ae2b6752322a8acee047abf
3
+ metadata.gz: fee01f07cee2241aebd6b605a7d87d7201aff3de3e009c3f2c68795b747b57e1
4
+ data.tar.gz: 5dd68db37205e90e7f15f86074157cc446de9f3ab2798c61d2bf0df2cda12bb4
5
5
  SHA512:
6
- metadata.gz: f88b31a383f68bcf7e2bb1edc96a07484e3b7fb9e5b822c0f2a6839ecbd7f5d7ca036a2a6e43abe920ecf7f623655f64eef1a63dbe18caa97b37d1665dea0468
7
- data.tar.gz: 99cbaaabf426091c8953e0ff1ab84de798629d114dd1a2d69f0be733d91a455bddebe5ec3e0a2a7d99390eac038fe3baf414df0bd56a4dc133a403a7b13ca34d
6
+ metadata.gz: '01085972521787fdcbf1b3c708cd93ef4e203cd7a6ab7c6e17ae2a484a8c44487bcd3de28f3bf2e9a1d420c68462693a64230cc9d60498366234a2764efacd1f'
7
+ data.tar.gz: aa0d8830c214851dae0322bbbf7d762caf12940340d6fd805e0f896353236bf1d8c1f98307d6354c3ade7a8a24e9e73aa2fb7e1b171e81d6c8d259eed4f183a0
@@ -0,0 +1,123 @@
1
+ @import 'kits/pb_advanced_table/advanced_table';
2
+ @import 'kits/pb_avatar/avatar';
3
+ @import 'kits/pb_avatar_action_button/avatar_action_button';
4
+ @import 'kits/pb_background/background';
5
+ @import 'kits/pb_badge/badge';
6
+ @import 'kits/pb_bar_graph/bar_graph';
7
+ @import 'kits/pb_body/body';
8
+ @import 'kits/pb_bread_crumbs/bread_crumbs';
9
+ @import 'kits/pb_button/button';
10
+ @import 'kits/pb_button_toolbar/button_toolbar';
11
+ @import 'kits/pb_caption/caption';
12
+ @import 'kits/pb_card/card';
13
+ @import 'kits/pb_checkbox/checkbox';
14
+ @import 'kits/pb_circle_chart/circle_chart';
15
+ @import 'kits/pb_circle_icon_button/circle_icon_button';
16
+ @import 'kits/pb_collapsible/collapsible';
17
+ @import 'kits/pb_contact/contact';
18
+ @import 'kits/pb_currency/currency';
19
+ @import 'kits/pb_dashboard_value/dashboard_value';
20
+ @import 'kits/pb_date/date';
21
+ @import 'kits/pb_date_picker/date_picker';
22
+ @import 'kits/pb_date_range_inline/date_range_inline';
23
+ @import 'kits/pb_date_range_stacked/date_range_stacked';
24
+ @import 'kits/pb_date_stacked/date_stacked';
25
+ @import 'kits/pb_date_time/date_time';
26
+ @import 'kits/pb_date_time_stacked/date_time_stacked';
27
+ @import 'kits/pb_date_year_stacked/date_year_stacked';
28
+ @import 'kits/pb_detail/detail';
29
+ @import 'kits/pb_dialog/dialog';
30
+ @import 'kits/pb_distribution_bar/distribution_bar';
31
+ @import 'kits/pb_draggable/draggable';
32
+ @import 'kits/pb_dropdown/dropdown';
33
+ @import 'kits/pb_file_upload/file_upload';
34
+ @import 'kits/pb_filter/filter';
35
+ @import 'kits/pb_fixed_confirmation_toast/fixed_confirmation_toast';
36
+ @import 'kits/pb_flex/flex';
37
+ @import 'kits/pb_form/form';
38
+ @import 'kits/pb_form_group/form_group';
39
+ @import 'kits/pb_form_pill/form_pill';
40
+ @import 'kits/pb_gauge/gauge';
41
+ @import 'kits/pb_hashtag/hashtag';
42
+ @import 'kits/pb_highlight/highlight';
43
+ @import 'kits/pb_home_address_street/home_address_street';
44
+ @import 'kits/pb_icon/icon';
45
+ @import 'kits/pb_icon_circle/icon_circle';
46
+ @import 'kits/pb_icon_stat_value/icon_stat_value';
47
+ @import 'kits/pb_icon_value/icon_value';
48
+ @import 'kits/pb_image/image';
49
+ @import 'kits/pb_label_pill/label_pill';
50
+ @import 'kits/pb_label_value/label_value';
51
+ @import 'kits/pb_layout/layout';
52
+ @import 'kits/pb_legend/legend';
53
+ @import 'kits/pb_lightbox/lightbox';
54
+ @import 'kits/pb_line_graph/line_graph';
55
+ @import 'kits/pb_list/list';
56
+ @import 'kits/pb_loading_inline/loading_inline';
57
+ @import 'kits/pb_map/map';
58
+ @import 'kits/pb_map/pb_map_button_mixin';
59
+ @import 'kits/pb_message/message';
60
+ @import 'kits/pb_multi_level_select/multi_level_select';
61
+ @import 'kits/pb_multiple_users/multiple_users';
62
+ @import 'kits/pb_multiple_users_stacked/multiple_users_stacked';
63
+ @import 'kits/pb_nav/nav';
64
+ @import 'kits/pb_online_status/online_status';
65
+ @import 'kits/pb_overlay/overlay';
66
+ @import 'kits/pb_pagination/pagination';
67
+ @import 'kits/pb_passphrase/passphrase';
68
+ @import 'kits/pb_person/person';
69
+ @import 'kits/pb_person_contact/person_contact';
70
+ @import 'kits/pb_phone_number_input/phone_number_input';
71
+ @import 'kits/pb_pill/pill';
72
+ @import 'kits/pb_popover/popover';
73
+ @import 'kits/pb_progress_pills/progress_pills';
74
+ @import 'kits/pb_progress_simple/progress_simple';
75
+ @import 'kits/pb_progress_step/progress_step';
76
+ @import 'kits/pb_radio/radio';
77
+ @import 'kits/pb_rich_text_editor/rich_text_editor';
78
+ @import 'kits/pb_section_separator/section_separator';
79
+ @import 'kits/pb_select/select';
80
+ @import 'kits/pb_selectable_card/selectable_card';
81
+ @import 'kits/pb_selectable_card_icon/selectable_card_icon';
82
+ @import 'kits/pb_selectable_icon/selectable_icon';
83
+ @import 'kits/pb_selectable_list/selectable_list';
84
+ @import 'kits/pb_source/source';
85
+ @import 'kits/pb_star_rating/star_rating';
86
+ @import 'kits/pb_stat_change/stat_change';
87
+ @import 'kits/pb_stat_value/stat_value';
88
+ @import 'kits/pb_table/table';
89
+ @import 'kits/pb_text_input/text_input';
90
+ @import 'kits/pb_textarea/textarea';
91
+ @import 'kits/pb_time/time';
92
+ @import 'kits/pb_time_range_inline/time_range_inline';
93
+ @import 'kits/pb_time_stacked/time_stacked';
94
+ @import 'kits/pb_timeline/timeline';
95
+ @import 'kits/pb_timestamp/timestamp';
96
+ @import 'kits/pb_title/title';
97
+ @import 'kits/pb_title_count/title_count';
98
+ @import 'kits/pb_title_detail/title_detail';
99
+ @import 'kits/pb_toggle/toggle';
100
+ @import 'kits/pb_tooltip/tooltip';
101
+ @import 'kits/pb_treemap_chart/treemap_chart';
102
+ @import 'kits/pb_typeahead/typeahead';
103
+ @import 'kits/pb_user/user';
104
+ @import 'kits/pb_user_badge/user_badge';
105
+ @import 'kits/pb_walkthrough/walkthrough';
106
+ @import 'kits/pb_weekday_stacked/weekday_stacked';
107
+ @import 'utilities/mixins';
108
+ @import 'utilities/spacing';
109
+ @import 'utilities/cursor';
110
+ @import 'utilities/max_width';
111
+ @import 'utilities/positioning';
112
+ @import 'utilities/number_spacing';
113
+ @import 'utilities/shadow';
114
+ @import 'utilities/line_height';
115
+ @import 'utilities/display';
116
+ @import 'utilities/flexbox';
117
+ @import 'utilities/focus';
118
+ @import 'utilities/border_radius';
119
+ @import 'utilities/hover';
120
+ @import 'utilities/text_align';
121
+ @import 'utilities/overflow';
122
+ @import 'utilities/truncate';
123
+ @import 'utilities/vertical_align';
@@ -0,0 +1,42 @@
1
+ @import "tokens/typography";
2
+ @import "tokens/colors";
3
+
4
+ * {
5
+ box-sizing: border-box;
6
+ margin: 0;
7
+ padding: 0;
8
+ &:before,
9
+ &:after {
10
+ box-sizing: border-box;
11
+ }
12
+ }
13
+
14
+ html {
15
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
16
+ height: 100vh;
17
+ overflow-x: hidden;
18
+ }
19
+
20
+ body {
21
+ font-family: $font_family_base;
22
+ font-size: $font_base;
23
+ line-height: 1.5;
24
+ background-color: $bg-light;
25
+ height: 100%;
26
+ letter-spacing: $lspace_normal;
27
+ font-weight: $regular;
28
+ font-style: normal;
29
+ text-rendering: optimizeLegibility;
30
+ -moz-font-feature-settings: "liga" on;
31
+ color: $charcoal;
32
+ margin: 0 !important;
33
+ padding: 0 !important;
34
+ box-sizing: border-box;
35
+ min-height: 100vh;
36
+ padding: 50px; // REMOVE AFTER STYLED
37
+ }
38
+
39
+ a {
40
+ text-decoration: none;
41
+ color: $primary;
42
+ }
@@ -35,8 +35,8 @@
35
35
  &[class*=_#{$name}] {
36
36
 
37
37
  $avatar_size: map-get($avatar-sizes, $name);
38
- $icon_size: $avatar_size / 2;
39
- $border_size: $icon_size / 10;
38
+ $icon_size: calc($avatar_size / 2);
39
+ $border_size: calc($icon_size / 10);
40
40
 
41
41
  position: relative;
42
42
  width: $avatar_size * 1.25;
@@ -59,7 +59,7 @@
59
59
  left: $icon_size * 1.5;
60
60
  }
61
61
  &[class*=_left] [class^=pb_avatar_kit] {
62
- padding-left: $icon_size / 2;
62
+ padding-left: calc($icon_size / 2);
63
63
  }
64
64
  }
65
65
  }
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -11,7 +11,7 @@
11
11
  align-items: center;
12
12
  justify-content: center;
13
13
  border-radius: $border_rad_light;
14
- padding: 0 $space_xs/2;
14
+ padding: 0 calc($space_xs/2);
15
15
  border-width: 1px;
16
16
  border-style: solid;
17
17
  border-color: $card_light;
@@ -34,7 +34,7 @@
34
34
  height: $pb_badge_height;
35
35
  min-height: $pb_badge_height;
36
36
  min-width: $pb_badge_height;
37
- border-radius: $pb_badge_height / 2;
37
+ border-radius: calc($pb_badge_height / 2);
38
38
  }
39
39
 
40
40
  &[class*=_notification] {
@@ -4,7 +4,7 @@
4
4
  [class^=pb_body_kit]{
5
5
  @include pb_body($text_lt_default);
6
6
  @each $color_name, $color_value in $pb_body_colors {
7
- &[class*=_#{$color_name}] {
7
+ &[class*=_#{"" + $color_name}] {
8
8
  @include pb_body($color_value);
9
9
  }
10
10
  @each $status_name, $status_value in $pb_body_status {
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { globalProps, domSafeProps } from '../utilities/globalProps'
@@ -9,7 +9,7 @@
9
9
  display: inline-flex;
10
10
  align-items: center;
11
11
  justify-content: center;
12
- padding: 0 $space_xs/2;
12
+ padding: 0 calc($space_xs/2);
13
13
 
14
14
  svg {
15
15
  margin-right: 8px;
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -30,7 +30,7 @@
30
30
  border: 0;
31
31
  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
32
32
  @each $color_name, $color_value in $pb_card_header_colors {
33
- &[class*=_#{$color_name}] {
33
+ &[class*=_#{"" + $color_name}] {
34
34
  @include pb_card_header_color($color_value);
35
35
  color: lightenText($color_value);
36
36
  }
@@ -1,11 +1,11 @@
1
1
  @import "../pb_button/button";
2
2
  @import "../pb_button/button_mixins";
3
3
 
4
- $pb_button_styles: [
4
+ $pb_button_styles: (
5
5
  "primary",
6
6
  "secondary",
7
7
  "link",
8
- ];
8
+ );
9
9
 
10
10
  @mixin pb_circle_icon_button {
11
11
  position: relative;
@@ -16,7 +16,7 @@ $pb_button_styles: [
16
16
  flex-grow: 0;
17
17
  width: $pb_button_size;
18
18
  height: $pb_button_size;
19
- border-radius: $pb_button_size/2;
19
+ border-radius: calc($pb_button_size/2);
20
20
  line-height: $pb_button_size;
21
21
  flex-basis: $pb_button_size;
22
22
  min-width: $pb_button_size;
@@ -41,7 +41,7 @@
41
41
  &.error {
42
42
  .date_picker_input_wrapper {
43
43
  [class*=pb_body_kit] {
44
- margin-top: $space_xs / 2;
44
+ margin-top: calc($space_xs / 2);
45
45
  }
46
46
 
47
47
  input,
@@ -1,15 +1,13 @@
1
1
  @media (min-width: 500px) {
2
2
  .flatpickr-calendar {
3
3
  padding: $space_xs;
4
- // width: 323.88px;
5
4
  }
6
5
  .dayContainer {
7
6
  width: 315.88px
8
7
  }
9
8
  .flatpickr-months {
10
- margin-left: $space_xs / 4;
11
- margin-top: $space_xs / 3;
12
- // width: 323.88px;
9
+ margin-left: calc($space_xs / 4);
10
+ margin-top: calc($space_xs / 3);
13
11
  }
14
12
  }
15
13
  @media (max-width: 499px) {
@@ -21,14 +21,14 @@
21
21
  display: flex;
22
22
  align-items: center;
23
23
  [class*=pb_date_range_inline_arrow] {
24
- margin-left: $space_xs/2;
25
- margin-right: $space_xs/2;
24
+ margin-left: calc($space_xs/2);
25
+ margin-right: calc($space_xs/2);
26
26
  }
27
27
  [class*=pb_date_range_inline_timezone] {
28
- margin-left: $space_xs/2;
28
+ margin-left: calc($space_xs/2);
29
29
  }
30
30
  [class*=pb_date_range_inline_icon] {
31
- margin-right: $space_xs/2;
31
+ margin-right: calc($space_xs/2);
32
32
  }
33
33
  }
34
34
  }
@@ -1,11 +1,11 @@
1
1
  [class^=pb_date_time_stacked] {
2
2
 
3
3
  [class^=padding_month] {
4
- padding-bottom: ($space_xs + 2) !important;
4
+ padding-bottom: calc($space_xs + 2px) !important;
5
5
  }
6
6
 
7
7
  [class^=padding_day] {
8
- padding-bottom: ($space_xs + 2) !important;
8
+ padding-bottom: calc($space_xs + 2px) !important;
9
9
  }
10
10
 
11
11
  &[class*=_dark] {
@@ -19,7 +19,7 @@
19
19
 
20
20
  }
21
21
  .date-time-padding {
22
- padding-right: ($space_xs / 2);
23
- padding-left: ($space_xs / 2);
22
+ padding-right: calc($space_xs / 2);
23
+ padding-left: calc($space_xs / 2);
24
24
  }
25
25
 
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React, { useState } from 'react'
4
2
  import { Button, Dialog, Flex } from 'playbook-ui'
5
3
 
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
 
3
2
  import React, { useState } from 'react'
4
3
  import { Button, Dialog, Flex } from 'playbook-ui'
@@ -1,5 +1,4 @@
1
1
  /* eslint-disable react/jsx-handler-names */
2
- /* @flow */
3
2
 
4
3
  import React, { useState } from "react"
5
4
  import { Button, Dialog, Flex } from "playbook-ui"
@@ -115,7 +115,7 @@
115
115
 
116
116
  &.error {
117
117
  [class*=pb_body_kit] {
118
- margin-top: $space_xs / 2;
118
+ margin-top: calc($space_xs / 2);
119
119
  }
120
120
 
121
121
  [class*="dropdown_trigger_wrapper"] {
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
 
3
2
  import React, { useState } from 'react'
4
3
  import {
@@ -1,5 +1,4 @@
1
1
  /* eslint-disable react/no-multi-comp */
2
- /* @flow */
3
2
 
4
3
  import React, { useState } from "react";
5
4
  import { FileUpload, List, ListItem } from "playbook-ui";
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
 
3
2
  import React, { useState } from 'react'
4
3
  import {
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
 
3
2
  import React, { useState } from 'react'
4
3
  import {
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  /* eslint-disable react/no-multi-comp */
3
2
 
4
3
  import React, { useState } from 'react'
@@ -15,9 +15,9 @@ $form_pill_colors: (
15
15
  display: inline-flex;
16
16
  justify-content: center;
17
17
  align-items: center;
18
- padding: 0 $space-sm/3;
18
+ padding: 0 calc($space-sm/3);
19
19
  height: $pb_form_pill_height;
20
- border-radius: $pb_form_pill_height/2;
20
+ border-radius: calc($pb_form_pill_height/2);
21
21
  margin-bottom: 2px;
22
22
  margin-top: 2px;
23
23
  cursor: pointer;
@@ -34,12 +34,12 @@ $form_pill_colors: (
34
34
  #{$selector}_text {
35
35
  color: $color_value;
36
36
  padding-left: $space-sm;
37
- padding-right: $space-sm/4;
37
+ padding-right: calc($space-sm/4);
38
38
  }
39
39
  #{$selector}_close {
40
40
  color: $color_value;
41
- padding-left: $space-sm/2;
42
- padding-right: $space-sm/4;
41
+ padding-left: calc($space-sm/2);
42
+ padding-right: calc($space-sm/4);
43
43
  display: flex;
44
44
  align-items: center;
45
45
  height: 100%;
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  import React from 'react'
3
2
  import classnames from 'classnames'
4
3
  import Title from '../pb_title/_title'
@@ -54,7 +54,7 @@ $pb_icon_circle_sizes: (
54
54
  &[class*=_size_#{$name}] {
55
55
  width: $size;
56
56
  height: $size;
57
- border-radius: $size/2;
57
+ border-radius: calc($size/2);
58
58
  background: $silver;
59
59
  color: $text_lt_light;
60
60
  font-size: $size * 0.38;
@@ -68,7 +68,7 @@ $pb_icon_circle_sizes: (
68
68
  }
69
69
 
70
70
  @each $color_name, $color_value in $colors {
71
- &[class*=_#{$color_name}] {
71
+ &[class*=_#{"" + $color_name}] {
72
72
  color: $color_value;
73
73
  background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
74
74
  &.dark {
@@ -2,6 +2,6 @@
2
2
 
3
3
  [class^=pb_label_value_kit] {
4
4
  [class^=pb_caption_kit] {
5
- margin-bottom: $space-xs/1.5;
5
+ margin-bottom: calc($space-xs/1.5);
6
6
  }
7
7
  }
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import { noop } from 'lodash'
5
3
  import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import { noop } from 'lodash'
4
2
  import React, { useState } from 'react'
5
3
  import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
@@ -1,5 +1,4 @@
1
1
  /* eslint-disable react/no-multi-comp */
2
- /* @flow */
3
2
  import React, { useContext } from "react";
4
3
  import classnames from "classnames";
5
4
  import {
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  /* eslint-disable jsx-control-statements/jsx-use-if-tag */
3
2
  import React, { useState } from 'react'
4
3
  import { Flex, Image } from 'playbook-ui'
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  /* eslint-disable jsx-control-statements/jsx-use-if-tag */
3
2
  import React, { useState } from 'react'
4
3
  import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  /* eslint-disable jsx-control-statements/jsx-use-if-tag */
3
2
  import React, { useState } from "react";
4
3
  import { Flex, Image, Title, Pill } from "playbook-ui";
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  /* eslint-disable jsx-control-statements/jsx-use-if-tag */
3
2
  import React, { useState } from 'react'
4
3
  import { Flex, Image } from 'playbook-ui'
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  /* eslint-disable jsx-control-statements/jsx-use-if-tag */
3
2
  import React, { useState } from 'react'
4
3
  import { Flex, Image } from 'playbook-ui'
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  .message_text {
20
- margin: 0 0 $space-xs/2;
20
+ margin: 0 0 calc($space-xs/2);
21
21
  }
22
22
 
23
23
  .message_title {
@@ -18,7 +18,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
18
18
  justify-content: center;
19
19
  width: $pb_multiple_users_size;
20
20
  height: $pb_multiple_users_size;
21
- border-radius: ($pb_multiple_users_size/2) + 2;
21
+ border-radius: calc($pb_multiple_users_size/2) + 2;
22
22
  background: tint($primary, 90%);
23
23
  border: $pb_multiple_users_border_size solid $white;
24
24
  color: $primary;
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -21,14 +21,14 @@
21
21
  }
22
22
 
23
23
  .passphrase-label {
24
- margin-right: ($space_xs/2);
24
+ margin-right: calc($space_xs/2);
25
25
  }
26
26
 
27
27
  .passphrase-text-input-wrapper {
28
28
  position: relative;
29
29
 
30
30
  .pb_text_input_kit_label {
31
- margin-bottom: ($space_xs/2);
31
+ margin-bottom: calc($space_xs/2);
32
32
  }
33
33
 
34
34
  .passphrase-text-input input {
@@ -57,7 +57,7 @@
57
57
  }
58
58
 
59
59
  .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
60
- margin-bottom: ($space_xs/2);
60
+ margin-bottom: calc($space_xs/2);
61
61
 
62
62
  &.progress-empty-input {
63
63
  visibility: hidden;
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React, { useCallback, useMemo, useState } from "react"
4
2
  import classnames from "classnames"
5
3
 
@@ -1,3 +1,4 @@
1
+ @import "intl-tel-input/build/css/intlTelInput.css";
1
2
  @import "../tokens/colors";
2
3
 
3
4
  $transform-rotate-deg: 135deg;
@@ -100,7 +101,7 @@ $flag-min-resolution: 192dpi;
100
101
  }
101
102
 
102
103
  .iti__arrow.iti__arrow--up::before {
103
- transform: rotate(-($transform-rotate-deg/3));
104
+ transform: rotate(-(calc($transform-rotate-deg/3)));
104
105
  top: $space_xs + 4px;
105
106
  color: $primary_action;
106
107
  }
@@ -2,7 +2,6 @@ import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } f
2
2
  import classnames from 'classnames'
3
3
 
4
4
  import intlTelInput from 'intl-tel-input'
5
- import 'intl-tel-input/build/css/intlTelInput.css'
6
5
  import 'intl-tel-input/build/js/utils.js'
7
6
 
8
7
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -9,9 +9,9 @@ $pb_pill_height: 22px;
9
9
  display: inline-flex;
10
10
  justify-content: center;
11
11
  align-items: center;
12
- padding: 0 $space-sm/1.8;
12
+ padding: 0 calc($space-sm/1.8);
13
13
  height: $pb_pill_height;
14
- border-radius: $pb_pill_height/2;
14
+ border-radius: calc($pb_pill_height/2);
15
15
  white-space: nowrap;
16
16
 
17
17
  &[class*=lowercase] {