playbook_ui 12.22.0 → 12.23.0.pre.alpha.movemarkdown712
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +0 -2
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +1 -1
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +16 -15
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +87 -83
- data/dist/playbook-rails.js +51 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +1 -2
- metadata +12 -41
- data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +0 -311
- data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -149
- data/lib/playbook/markdown/helper.rb +0 -132
- data/lib/playbook/markdown.rb +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3dbab577256e1152c3136b7d6ff83b1db17ed07b4114856021ce64a3cc0836f5
|
|
4
|
+
data.tar.gz: 5c6f9c88fc36ca8be118f3520ad303614606de1edcad7ccfaf547a8522395195
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 442b43fc50439f08f9aeee14d0d968ab62e73196d888941efb909517a0430a43f848f75302773ac6d6230eaabb5d64dfcf67aa2dbc066b65e7d343b4321013a6
|
|
7
|
+
data.tar.gz: d61d86911c09b4361fda12387bc57fdc888032a19c8f158e467f05664147aed082b0cced93a3139292255faeac2fb6cb97589c20d9e3b4738ea943b189377bc7
|
|
@@ -5,8 +5,6 @@
|
|
|
5
5
|
module Playbook
|
|
6
6
|
module PbDocs
|
|
7
7
|
class KitExample < Playbook::KitBase
|
|
8
|
-
include Playbook::Markdown::Helper
|
|
9
|
-
|
|
10
8
|
prop :kit, type: Playbook::Props::String, required: true
|
|
11
9
|
prop :example_title, type: Playbook::Props::String, required: true
|
|
12
10
|
prop :example_key, type: Playbook::Props::String, required: true
|
|
@@ -9,22 +9,23 @@
|
|
|
9
9
|
<div class="maskContainer">
|
|
10
10
|
<div class="filters">
|
|
11
11
|
<div class="left_gradient"></div>
|
|
12
|
-
<% object.filters
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}) %>
|
|
22
|
-
</div>
|
|
23
|
-
<% else %>
|
|
24
|
-
<div class="filter">
|
|
25
|
-
<%= pb_rails("caption", props: { text: filter[:name]}) %>
|
|
26
|
-
<%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
|
|
12
|
+
<% if object.filters&.none? { |filter| filter[:name].present? } %>
|
|
13
|
+
<div>
|
|
14
|
+
<%= pb_rails("body", props: {
|
|
15
|
+
color: "light",
|
|
16
|
+
padding_left: "xs",
|
|
17
|
+
size: 4,
|
|
18
|
+
tag:"span",
|
|
19
|
+
text: "No Filter Selected"
|
|
20
|
+
}) %>
|
|
27
21
|
</div>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% object.filters&.each do |filter| %>
|
|
24
|
+
<% if filter[:name].present? %>
|
|
25
|
+
<div class="filter">
|
|
26
|
+
<%= pb_rails("caption", props: { text: filter[:name]}) %>
|
|
27
|
+
<%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
|
|
28
|
+
</div>
|
|
28
29
|
<% end %>
|
|
29
30
|
<% end %>
|
|
30
31
|
<div class="right_gradient"></div>
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
@import "../tokens/titles";
|
|
3
3
|
@import "../tokens/colors";
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
[class^=pb_text_input_kit] {
|
|
5
|
+
[class^="pb_text_input_kit"] {
|
|
7
6
|
margin-bottom: $space_sm;
|
|
8
7
|
.pb_text_input_kit_label {
|
|
9
8
|
margin-bottom: $space_xs;
|
|
@@ -22,8 +21,8 @@
|
|
|
22
21
|
overflow: hidden;
|
|
23
22
|
}
|
|
24
23
|
input:hover,
|
|
25
|
-
.text_input:hover{
|
|
26
|
-
background-color: rgba($focus_input_light
|
|
24
|
+
.text_input:hover {
|
|
25
|
+
background-color: rgba($focus_input_light, $opacity_5);
|
|
27
26
|
}
|
|
28
27
|
input:focus,
|
|
29
28
|
.text_input:focus,
|
|
@@ -32,7 +31,7 @@
|
|
|
32
31
|
@include pb_textarea_focus;
|
|
33
32
|
@include transition_default;
|
|
34
33
|
border-color: $primary;
|
|
35
|
-
background-color: rgba($focus_input_light
|
|
34
|
+
background-color: rgba($focus_input_light, $opacity_5);
|
|
36
35
|
}
|
|
37
36
|
}
|
|
38
37
|
&.dark {
|
|
@@ -52,15 +51,16 @@
|
|
|
52
51
|
.text_input .placeholder {
|
|
53
52
|
@include pb_body_light_dark;
|
|
54
53
|
}
|
|
55
|
-
input,
|
|
54
|
+
input,
|
|
55
|
+
.text_input {
|
|
56
56
|
@include pb_textarea_dark;
|
|
57
57
|
@include pb_body_dark;
|
|
58
58
|
overflow: hidden;
|
|
59
|
-
background-color: rgba($white
|
|
59
|
+
background-color: rgba($white, $opacity_1);
|
|
60
60
|
border-color: rgba($white, 0.15);
|
|
61
61
|
}
|
|
62
62
|
input:hover,
|
|
63
|
-
.text_input:hover{
|
|
63
|
+
.text_input:hover {
|
|
64
64
|
background-color: rgba($white, 0.15);
|
|
65
65
|
}
|
|
66
66
|
input:focus,
|
|
@@ -73,7 +73,8 @@
|
|
|
73
73
|
}
|
|
74
74
|
&.error {
|
|
75
75
|
.text_input_wrapper {
|
|
76
|
-
input,
|
|
76
|
+
input,
|
|
77
|
+
.text_input {
|
|
77
78
|
border-color: $error_dark;
|
|
78
79
|
}
|
|
79
80
|
}
|
|
@@ -81,10 +82,11 @@
|
|
|
81
82
|
}
|
|
82
83
|
&.error {
|
|
83
84
|
.text_input_wrapper {
|
|
84
|
-
[class*=pb_body_kit] {
|
|
85
|
+
[class*="pb_body_kit"] {
|
|
85
86
|
margin-top: $space_xs / 2;
|
|
86
87
|
}
|
|
87
|
-
input,
|
|
88
|
+
input,
|
|
89
|
+
.text_input {
|
|
88
90
|
border-color: $error;
|
|
89
91
|
}
|
|
90
92
|
}
|
|
@@ -151,90 +153,92 @@
|
|
|
151
153
|
}
|
|
152
154
|
}
|
|
153
155
|
}
|
|
154
|
-
}
|
|
155
156
|
|
|
156
|
-
.text_input_wrapper_add_on {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
157
|
+
.text_input_wrapper_add_on {
|
|
158
|
+
& > [class^="pb_text_input_kit"]:not(:last-child) {
|
|
159
|
+
.text_input_wrapper_add_on input,
|
|
160
|
+
[class^="pb_text_input_kit"] .text_input_wrapper_add_on .text_input {
|
|
161
|
+
border-bottom-right-radius: 0;
|
|
162
|
+
border-top-right-radius: 0;
|
|
163
|
+
border-right-width: 0;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
.section-separator span {
|
|
167
|
+
padding: 0;
|
|
162
168
|
}
|
|
163
|
-
}
|
|
164
|
-
.section-separator span {
|
|
165
|
-
padding: 0;
|
|
166
|
-
}
|
|
167
169
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
170
|
+
.add-on {
|
|
171
|
+
&-card {
|
|
172
|
+
height: 45px;
|
|
173
|
+
margin: 0;
|
|
174
|
+
padding: 0 !important;
|
|
175
|
+
align-items: center;
|
|
176
|
+
justify-content: center;
|
|
177
|
+
width: 45px;
|
|
178
|
+
}
|
|
179
|
+
&-icon {
|
|
180
|
+
color: $text_lt_lighter;
|
|
181
|
+
}
|
|
182
|
+
&-card-dark {
|
|
183
|
+
background-color: rgba($white, $opacity_1);
|
|
184
|
+
border-color: rgba($white, 0.15);
|
|
185
|
+
}
|
|
186
|
+
&-left {
|
|
187
|
+
.text_input {
|
|
188
|
+
border-top-left-radius: 0;
|
|
189
|
+
border-bottom-left-radius: 0;
|
|
190
|
+
}
|
|
187
191
|
}
|
|
188
|
-
}
|
|
189
192
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
193
|
+
&-right {
|
|
194
|
+
.text_input {
|
|
195
|
+
border-top-right-radius: 0;
|
|
196
|
+
border-bottom-right-radius: 0;
|
|
197
|
+
}
|
|
194
198
|
}
|
|
195
199
|
}
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.card-right-aligned {
|
|
207
|
-
border-top-left-radius: 0;
|
|
208
|
-
border-bottom-left-radius: 0;
|
|
209
|
-
}
|
|
200
|
+
.text_input:focus ~ .add-on-card-dark {
|
|
201
|
+
background-color: $focus_input_dark;
|
|
202
|
+
border-width: 0px;
|
|
203
|
+
}
|
|
204
|
+
.card-left-aligned {
|
|
205
|
+
border-top-right-radius: 0;
|
|
206
|
+
border-bottom-right-radius: 0;
|
|
207
|
+
}
|
|
210
208
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
border-right: 0;
|
|
215
|
-
}
|
|
216
|
-
.text_input {
|
|
217
|
-
border-left: 0;
|
|
218
|
-
padding-left: 16px;
|
|
219
|
-
}
|
|
209
|
+
.card-right-aligned {
|
|
210
|
+
border-top-left-radius: 0;
|
|
211
|
+
border-bottom-left-radius: 0;
|
|
220
212
|
}
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
213
|
+
|
|
214
|
+
.border {
|
|
215
|
+
&_right_off {
|
|
216
|
+
.card-left-aligned {
|
|
217
|
+
border-right: 0;
|
|
218
|
+
}
|
|
219
|
+
.text_input {
|
|
220
|
+
border-left: 0;
|
|
221
|
+
padding-left: 16px;
|
|
222
|
+
}
|
|
224
223
|
}
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
224
|
+
&_left_on {
|
|
225
|
+
.card-right-aligned {
|
|
226
|
+
border-left: 0;
|
|
227
|
+
}
|
|
229
228
|
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
229
|
+
&_right_on {
|
|
230
|
+
.card-left-aligned {
|
|
231
|
+
border-right: 0;
|
|
232
|
+
}
|
|
234
233
|
}
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
234
|
+
&_left_off {
|
|
235
|
+
.card-right-aligned {
|
|
236
|
+
border-left: 0;
|
|
237
|
+
}
|
|
238
|
+
.text_input {
|
|
239
|
+
border-right: 0;
|
|
240
|
+
padding-right: 0;
|
|
241
|
+
}
|
|
238
242
|
}
|
|
239
243
|
}
|
|
240
244
|
}
|