playbook_ui 12.13.0 → 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown457

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.scss +2 -3
  3. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  4. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +22 -35
  5. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +34 -37
  6. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +27 -44
  7. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +21 -33
  8. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +7 -7
  9. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +6 -8
  10. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +26 -0
  11. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +105 -95
  12. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -1
  14. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +43 -0
  15. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +16 -3
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx +43 -0
  17. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -0
  18. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb +8 -0
  19. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx +18 -0
  20. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +3 -0
  21. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  22. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.ts +166 -0
  23. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +56 -0
  24. data/app/pb_kits/playbook/pb_layout/_layout.tsx +6 -1
  25. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb +4 -4
  26. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +5 -5
  27. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -3
  28. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +3 -3
  29. data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -5
  30. data/app/pb_kits/playbook/pb_nav/_nav.tsx +2 -2
  31. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  32. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +23 -9
  33. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb +6 -6
  34. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +6 -6
  35. data/app/pb_kits/playbook/tokens/_colors.scss +55 -15
  36. data/app/pb_kits/playbook/tokens/_positioning.scss +13 -0
  37. data/app/pb_kits/playbook/utilities/_colors.scss +7 -13
  38. data/app/pb_kits/playbook/utilities/_positioning.scss +20 -0
  39. data/app/pb_kits/playbook/utilities/globalProps.ts +11 -2
  40. data/lib/playbook/classnames.rb +1 -0
  41. data/lib/playbook/kit_base.rb +2 -0
  42. data/lib/playbook/position.rb +33 -0
  43. data/lib/playbook/version.rb +2 -2
  44. metadata +14 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a8ab799be2c717401ccd987c55ab580b5ad66ad4180ff3590e679aa9f8b20e1b
4
- data.tar.gz: 1061a9d85bf0cc5c7ef7731a9747eb29ff51e9151bd51e6f5401daec9c66429f
3
+ metadata.gz: 7f8208a14e5c15e8c393a68f57267ab77dfcb112e76ab6624b323520ee24110f
4
+ data.tar.gz: 644200e7aba10dfa8636622d05203dd2fa26b74bcee471fd05d848edb53ad428
5
5
  SHA512:
6
- metadata.gz: 2a058d2ba141e6f0867018940f66dbdbd2be9ebc77d921e83d54a9f0113f037e4c356c38b1e050e3e5d6a4a58262095707dd54f3929fcafefea53e4e2b023026
7
- data.tar.gz: 6bcbc50017600ac0915e86ce76c1b5a55cbc2cbda223f9e883121851382b146609a53dfe148ca11110629cd766bb8aa935c27edca1a773c46aaefdc89d374076
6
+ metadata.gz: 9ae9ad4954a065d536856caf8f8cfbecb68885dec8674e06dd8f80c7c7abe3e2346cca288aee7792e49165658720d23da9402867d74702157f9024716ae82e08
7
+ data.tar.gz: 3f88105477044a5db447ac93a924aa43e84112df2bb17a347bb0b372e78bedcaf1723069921aeb4bf359e3552806a48f8fe6cee7c66c895e6016a39c817f31e3
@@ -1,4 +1,5 @@
1
1
  @import "card_mixin";
2
+ @import "../utilities/colors";
2
3
 
3
4
  [class^=pb_card_kit] {
4
5
  @include pb_card;
@@ -29,9 +30,7 @@
29
30
  @each $color_name, $color_value in $pb_card_header_colors {
30
31
  &[class*=_#{$color_name}] {
31
32
  @include pb_card_header_color($color_value);
32
- [class^=pb_body_kit] {
33
- color: lightenText($color_value);
34
- }
33
+ color: lightenText($color_value);
35
34
  }
36
35
  }
37
36
  &[class*=_white] {
@@ -15,7 +15,7 @@ module Playbook
15
15
  values: %w[xs sm md lg xl none rounded],
16
16
  default: "md"
17
17
  prop :background, type: Playbook::Props::Enum,
18
- values: %w[white light dark windows siding doors solar roofing gutters insulation none],
18
+ values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
19
19
  default: "none"
20
20
 
21
21
  def classname
@@ -1,57 +1,44 @@
1
- <%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4 }) %>
1
+ <%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
2
2
 
3
- <br>
4
-
5
- <%= pb_rails("card", props: { background: "dark", dark: true }) do %>
3
+ <%= pb_rails("card", props: { background: "dark", dark: true, margin_bottom: "sm" }) do %>
6
4
  <%= pb_rails("body", props: {
7
5
  text: "Dark",
8
- color: "lighter"
6
+ dark: true
9
7
  }) %>
10
8
  <% end %>
11
9
 
12
- <br>
13
-
14
- <%= pb_rails("card") do %>
10
+ <%= pb_rails("card", props: { margin_bottom: "sm" }) do %>
15
11
  <%= pb_rails("body", props: {
16
- text: "White"
12
+ text: "White / Default"
17
13
  }) %>
18
14
  <% end %>
19
15
 
20
- <br>
21
-
22
- <%= pb_rails("card", props: { background: "light" }) do %>
16
+ <%= pb_rails("card", props: { background: "light", margin_bottom: "sm" }) do %>
23
17
  <%= pb_rails("body", props: {
24
- text: "Light"
25
- }) %>
18
+ text: "Light",
19
+ dark: false
20
+ }) %>
26
21
  <% end %>
27
22
 
28
- <br>
29
-
30
- <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
31
-
32
- <br>
23
+ <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
33
24
 
34
- <%= pb_rails("card", props: { background: "windows", dark: true }) do %>
25
+ <%= pb_rails("card", props: { background: "product_1_background", dark: true, margin_bottom: "sm" }) do %>
35
26
  <%= pb_rails("body", props: {
36
- text: "Windows",
37
- color: "lighter"
38
- }) %>
27
+ text: "Product 1 Background",
28
+ dark: true
29
+ }) %>
39
30
  <% end %>
40
31
 
41
- <br>
42
-
43
- <%= pb_rails("card", props: { background: "siding" }) do %>
32
+ <%= pb_rails("card", props: { background: "product_7_highlight", margin_bottom: "sm" }) do %>
44
33
  <%= pb_rails("body", props: {
45
- text: "Siding"
46
- }) %>
34
+ text: "Product 7 Highlight",
35
+ dark: true
36
+ }) %>
47
37
  <% end %>
48
38
 
49
- <br>
50
-
51
- <%= pb_rails("card", props: { background: "doors" }) do %>
39
+ <%= pb_rails("card", props: { background: "product_2_background", margin_bottom: "sm" }) do %>
52
40
  <%= pb_rails("body", props: {
53
- text: "Doors"
54
- }) %>
41
+ text: "Product 2 Highlight",
42
+ dark: true
43
+ }) %>
55
44
  <% end %>
56
-
57
- <br>
@@ -8,91 +8,88 @@ const CardBackground = (props) => {
8
8
  <div>
9
9
  <Title
10
10
  {...props}
11
+ marginBottom="sm"
11
12
  size={4}
12
13
  tag="h4"
13
14
  text="Card Colors"
14
15
  />
15
-
16
- <br />
17
-
18
16
  <Card
19
17
  background="dark"
20
18
  dark
19
+ marginBottom="sm"
21
20
  {...props}
22
21
  >
23
22
  <Body
24
- color="lighter"
23
+ dark
25
24
  text="Dark"
26
- {...props}
27
25
  />
28
26
  </Card>
29
27
 
30
- <br />
31
-
32
- <Card>
28
+ <Card
29
+ marginBottom="sm"
30
+ {...props}
31
+ >
33
32
  <Body
34
- text="White"
33
+ text="White / Default"
34
+ {...props}
35
35
  />
36
36
  </Card>
37
37
 
38
- <br />
39
38
 
40
39
  <Card
41
40
  background="light"
41
+ marginBottom="sm"
42
42
  {...props}
43
43
  >
44
- <Body
45
- text="Light"
46
- />
44
+ <Body text="Light" />
47
45
  </Card>
48
46
 
49
- <br />
50
-
47
+
51
48
  <Title
52
49
  {...props}
50
+ marginBottom="sm"
53
51
  size={4}
54
52
  tag="h4"
55
53
  text="Product Colors"
56
54
  />
57
55
 
58
- <br />
59
-
60
56
  <Card
61
- background="windows"
57
+ background="product_1_background"
58
+ marginBottom="sm"
62
59
  {...props}
63
- >
60
+ >
64
61
  <Body
65
- color="lighter"
66
- text="Windows"
67
- {...props}
62
+ dark
63
+ text="Product 1 Background"
68
64
  />
69
65
  </Card>
70
66
 
71
- <br />
67
+
72
68
 
73
- <Card
74
- background="siding"
75
- {...props}
76
- >
77
- <Body
78
- text="Siding"
79
- {...props}
80
- />
69
+ <Card
70
+ background="product_7_highlight"
71
+ marginBottom="sm"
72
+ {...props} >
73
+ <Body
74
+ dark
75
+ text="Product 7 Highlight"
76
+ />
81
77
  </Card>
82
78
 
83
- <br />
79
+
84
80
 
85
- <Card
86
- background="doors"
81
+ <Card
82
+ background="product_2_highlight"
83
+ marginBottom="sm"
87
84
  {...props}
88
85
  >
89
86
  <Body
90
- text="Doors"
91
- {...props}
87
+ dark
88
+ text="Product 2 Highlight"
92
89
  />
93
90
  </Card>
94
91
 
95
- <br />
92
+
96
93
  </div>
97
94
  )
98
95
  }
@@ -1,74 +1,57 @@
1
- <%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4 }) %>
1
+ <%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
2
2
 
3
- <br>
4
-
5
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
6
- <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
7
- <%= pb_rails("body", props: { text: "category_1", dark: true }) %>
8
- <% end %>
9
- <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
10
- Body
11
- <% end %>
3
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
4
+ <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
5
+ <%= pb_rails("body", props: { text: "Category 1", dark: true }) %>
12
6
  <% end %>
13
-
14
- <br>
15
-
16
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
17
- <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_2" }) do %>
18
- <%= pb_rails("body", props: { text: "category_2", dark: true }) %>
19
-
20
- <% end %>
21
- <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
22
- Body
23
- <% end %>
7
+ <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
8
+ Category 1
24
9
  <% end %>
10
+ <% end %>
25
11
 
26
- <br>
27
-
28
- <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
12
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
13
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_3" }) do %>
14
+ <%= pb_rails("body", props: { text: "Category 3", dark: false }) %>
15
+ <% end %>
16
+ <%= pb_rails("card/card_body", props: { padding: "md", }) do %>
17
+ Body
18
+ <% end %>
19
+ <% end %>
29
20
 
30
- <br>
21
+ <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
31
22
 
32
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
33
- <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "siding" }) do %>
34
- <%= pb_rails("body", props: { text: "Siding", dark: true }) %>
23
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
24
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_2_background" }) do %>
25
+ <%= pb_rails("body", props: { text: "Product 2 Background", dark: true }) %>
35
26
  <% end %>
36
27
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
37
28
  Body
38
29
  <% end %>
39
30
  <% end %>
40
31
 
41
- <br>
42
-
43
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
44
- <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "gutters" }) do %>
45
- <%= pb_rails("body", props: { text: "Gutters", dark: true }) %>
32
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
33
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_6_background" }) do %>
34
+ <%= pb_rails("body", props: { text: "Product 6 Background", dark: true }) %>
46
35
  <% end %>
47
36
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
48
37
  Body
49
38
  <% end %>
50
39
  <% end %>
51
40
 
52
- <br>
41
+ <%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
53
42
 
54
- <%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4 }) %>
55
-
56
- <br>
57
-
58
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
43
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
59
44
  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "white" }) do %>
60
- <%= pb_rails("body", props: { text: "White" }) %>
45
+ <%= pb_rails("body", props: { text: "White", dark: false }) %>
61
46
  <% end %>
62
47
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
63
48
  Body
64
49
  <% end %>
65
50
  <% end %>
66
51
 
67
- <br>
68
-
69
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
52
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
70
53
  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
71
- <%= pb_rails("body", props: { text: "Dark" }) %>
54
+ <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
72
55
  <% end %>
73
56
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
74
57
  Body
@@ -9,21 +9,21 @@ const CardHeader = (props) => {
9
9
  <div>
10
10
  <Title
11
11
  {...props}
12
+ marginBottom='sm'
12
13
  size={4}
13
14
  tag="h4"
14
15
  text="Category Colors"
15
16
  />
16
17
 
17
- <br />
18
-
19
18
  <Card
20
19
  {...props}
20
+ marginBottom='sm'
21
21
  padding="none"
22
22
  >
23
- <Card.Header>
23
+ <Card.Header headerColor="category_1" >
24
24
  <Body
25
- {...props}
26
- text="category_1"
25
+ dark
26
+ text="Category 1"
27
27
  />
28
28
  </Card.Header>
29
29
  <Card.Body>
@@ -34,19 +34,15 @@ const CardHeader = (props) => {
34
34
  </Card.Body>
35
35
  </Card>
36
36
 
37
- <br />
38
-
39
37
  <Card
40
38
  {...props}
39
+ marginBottom='sm'
41
40
  padding="none"
42
41
  >
43
42
  <Card.Header
44
- headerColor="category_2"
43
+ headerColor="category_3"
45
44
  >
46
- <Body
47
- {...props}
48
- text="category_2"
49
- />
45
+ <Body text="Category 3" />
50
46
  </Card.Header>
51
47
  <Card.Body
52
48
  padding="md"
@@ -58,27 +54,27 @@ const CardHeader = (props) => {
58
54
  </Card.Body>
59
55
  </Card>
60
56
 
61
- <br />
62
57
 
63
58
  <Title
64
59
  {...props}
60
+ marginBottom='sm'
65
61
  size={4}
66
62
  tag="h4"
67
63
  text="Product Colors"
68
64
  />
69
65
 
70
- <br />
71
-
72
66
  <Card
73
67
  {...props}
68
+ marginBottom='sm'
74
69
  padding="none"
75
70
  >
76
71
  <Card.Header
77
- headerColor="siding"
72
+ headerColor="product_2_background"
78
73
  >
79
74
  <Body
80
75
  {...props}
81
- text="Siding"
76
+ dark
77
+ text="Product 2 Background"
82
78
  />
83
79
  </Card.Header>
84
80
  <Card.Body>
@@ -89,18 +85,16 @@ const CardHeader = (props) => {
89
85
  </Card.Body>
90
86
  </Card>
91
87
 
92
- <br />
93
-
94
88
  <Card
95
89
  {...props}
90
+ marginBottom='sm'
96
91
  padding="none"
97
92
  >
98
- <Card.Header
99
- headerColor="gutters"
100
- >
93
+ <Card.Header headerColor="product_6_background" >
101
94
  <Body
102
95
  {...props}
103
- text="Gutters"
96
+ dark
97
+ text="Product 6 Background"
104
98
  />
105
99
  </Card.Header>
106
100
  <Card.Body>
@@ -111,28 +105,24 @@ const CardHeader = (props) => {
111
105
  </Card.Body>
112
106
  </Card>
113
107
 
114
- <br />
115
108
 
116
109
  <Title
117
110
  {...props}
111
+ marginBottom='sm'
118
112
  size={4}
119
113
  tag="h4"
120
114
  text="Background Colors"
121
115
  />
122
116
 
123
- <br />
124
-
125
117
  <Card
126
118
  {...props}
119
+ marginBottom='sm'
127
120
  padding="none"
128
121
  >
129
122
  <Card.Header
130
123
  headerColor="white"
131
124
  >
132
- <Body
133
- {...props}
134
- text="White"
135
- />
125
+ <Body text="White" />
136
126
  </Card.Header>
137
127
  <Card.Body>
138
128
  <Body
@@ -142,8 +132,6 @@ const CardHeader = (props) => {
142
132
  </Card.Body>
143
133
  </Card>
144
134
 
145
- <br />
146
-
147
135
  <Card
148
136
  {...props}
149
137
  padding="none"
@@ -152,7 +140,7 @@ const CardHeader = (props) => {
152
140
  headerColor="dark"
153
141
  >
154
142
  <Body
155
- {...props}
143
+ dark
156
144
  text="Dark"
157
145
  />
158
146
  </Card.Header>
@@ -1,9 +1,9 @@
1
- <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
2
- Card content
1
+ <%= pb_rails("card", props: {highlight: {position: "side", color:"product_6_highlight"}, margin_bottom: "sm"}) do %>
2
+ Side Position & Product 6 Highlight Color
3
3
  <% end %>
4
-
5
- <br>
6
-
7
- <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}}) do %>
8
- Card content
4
+ <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
5
+ Top Position & Warning Color
9
6
  <% end %>
7
+ <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
8
+ Side Position & Category 2 Color
9
+ <% end %>
@@ -7,27 +7,25 @@ const CardHighlight = (props) => {
7
7
  <div>
8
8
  <Card
9
9
  {...props}
10
- highlight={{ position: 'side', color: 'windows' }}
10
+ highlight={{ position: 'side', color: 'product_6_highlight' }}
11
+ marginBottom="sm"
11
12
  >
12
- {'Card content'}
13
+ {'Side Position & Product 6 Highlight Color'}
13
14
  </Card>
14
15
 
15
- <br />
16
-
17
16
  <Card
18
17
  {...props}
19
18
  highlight={{ position: 'top', color: 'warning' }}
19
+ marginBottom="sm"
20
20
  >
21
- {'Card content'}
21
+ {'Top Position & Warning Color'}
22
22
  </Card>
23
23
 
24
- <br />
25
-
26
24
  <Card
27
25
  {...props}
28
26
  highlight={{ position: 'side', color: 'category_2' }}
29
27
  >
30
- {'Card content'}
28
+ {'Side Position & Category 2 Color'}
31
29
  </Card>
32
30
  </div>
33
31
  )
@@ -6,6 +6,7 @@
6
6
  @import "./sass_partials/month_and_year_styles";
7
7
  @import "./sass_partials/time_selection_styles";
8
8
  @import "./sass_partials/input_styles";
9
+ @import "./sass_partials/quick_pick_styles";
9
10
 
10
11
  [class^=pb_date_picker_kit] {
11
12
  .input_wrapper {
@@ -26,7 +27,32 @@
26
27
  @include transition_default;
27
28
  border-color: $primary;
28
29
  }
30
+ .add-on-card {
31
+ border-color: $primary;
32
+ }
33
+ }
34
+
35
+ @media (hover: hover) {
36
+ &:hover {
37
+ .add-on-card {
38
+ cursor: pointer;
39
+ background-color: rgba($focus_input_light,$opacity_5);
40
+ }
41
+ }
42
+ }
43
+ .text_input_wrapper_add_on .add-on-icon {
44
+ color: $text_lt_light
29
45
  }
46
+
47
+ .text_input_wrapper_add_on .add-on-right .text_input{
48
+ cursor: pointer;
49
+ }
50
+
51
+ }
52
+
53
+
54
+ .pb_popover_reference_wrapper {
55
+ display: unset !important
30
56
  }
31
57
 
32
58
  .flatpickr-calendar {