playbook_ui 8.3.0.pre.alpha1 → 9.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Rakefile +1 -18
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -3
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +7 -0
- data/app/pb_kits/playbook/pb_form/docs/_description.md +2 -6
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -4
- data/app/pb_kits/playbook/pb_form/docs/example.yml +2 -4
- data/app/pb_kits/playbook/pb_form/form.rb +14 -20
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +18 -55
- data/app/pb_kits/playbook/pb_select/_select.scss +2 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +3 -16
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +2 -8
- data/app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss +9 -4
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +6 -18
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +1 -1
- data/lib/playbook.rb +4 -1
- data/lib/playbook/forms.rb +3 -0
- data/lib/playbook/forms/builder.rb +31 -0
- data/{app/pb_kits/playbook/pb_form/form_builder → lib/playbook/forms/builder}/action_area.rb +2 -2
- data/lib/playbook/forms/builder/checkbox_field.rb +32 -0
- data/lib/playbook/forms/builder/collection_select_field.rb +19 -0
- data/lib/playbook/forms/builder/date_picker_field.rb +37 -0
- data/{app/pb_kits/playbook/pb_form/form_builder → lib/playbook/forms/builder}/form_field_builder.rb +2 -2
- data/lib/playbook/forms/builder/select_field.rb +19 -0
- data/lib/playbook/forms/builder/typeahead_field.rb +12 -0
- data/lib/playbook/pb_forms_helper.rb +41 -0
- data/lib/playbook/pb_kit_helper.rb +2 -0
- data/lib/playbook/props/base.rb +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +22 -33
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +0 -60
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +0 -61
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.md +0 -1
- data/app/pb_kits/playbook/pb_form/form_builder.rb +0 -31
- data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb +0 -34
- data/app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb +0 -21
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +0 -39
- data/app/pb_kits/playbook/pb_form/form_builder/select_field.rb +0 -21
- data/app/pb_kits/playbook/pb_form/form_builder/typeahead_field.rb +0 -14
- data/app/pb_kits/playbook/pb_form/form_with.html.erb +0 -11
- data/app/pb_kits/playbook/pb_form/form_with.rb +0 -41
- data/app/pb_kits/playbook/pb_form/simple_form.html.erb +0 -11
- data/app/pb_kits/playbook/pb_form/simple_form.rb +0 -67
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 13859d3f8d731118151f55f115ddddc05fe056a20f5166cd74d373ac333d56c5
|
4
|
+
data.tar.gz: 7bbbc053d7fe78a2f0052440b42e78d8a4cca82013cc0ae11166c1d75521b693
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ba648346b0802233d2dba4a4bd932b0bfe039ee63667afc90efbef0f00a3d09671866783c6a8ace55e84f2ba6430ecd230f30241aa328a7d925db8cdeef684ef
|
7
|
+
data.tar.gz: ded1c063a8f3b196bae5e4af2cc446411392dba688ec444b0e885fb03c0cf4703f7984d7e0a09722c345613e25033afbc92f447baa7ba9b93c265998d7503a8b
|
data/Rakefile
CHANGED
@@ -4,29 +4,12 @@ rescue LoadError
|
|
4
4
|
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
5
5
|
end
|
6
6
|
|
7
|
-
require 'rdoc/task'
|
8
|
-
|
9
|
-
RDoc::Task.new(:rdoc) do |rdoc|
|
10
|
-
rdoc.rdoc_dir = 'rdoc'
|
11
|
-
rdoc.title = 'Playbook'
|
12
|
-
rdoc.options << '--line-numbers'
|
13
|
-
rdoc.rdoc_files.include('README.md')
|
14
|
-
rdoc.rdoc_files.include('lib/**/*.rb')
|
15
|
-
end
|
16
|
-
|
17
7
|
APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
|
18
8
|
load 'rails/tasks/engine.rake'
|
19
|
-
|
20
9
|
load 'rails/tasks/statistics.rake'
|
21
10
|
|
22
11
|
require 'bundler/gem_tasks'
|
23
12
|
|
24
|
-
|
25
|
-
|
26
|
-
Rake::TestTask.new(:test) do |t|
|
27
|
-
t.libs << 'test'
|
28
|
-
t.pattern = 'spec/**/*_spec.rb'
|
29
|
-
t.verbose = false
|
30
|
-
end
|
13
|
+
Dir["private/tasks/*.rake"].each(&method(:load))
|
31
14
|
|
32
15
|
task default: :test
|
@@ -48,7 +48,6 @@ $avatar-sizes: (
|
|
48
48
|
line-height: $size;
|
49
49
|
text-transform: uppercase;
|
50
50
|
position: relative;
|
51
|
-
z-index: 0;
|
52
51
|
}
|
53
52
|
|
54
53
|
img {
|
@@ -57,7 +56,6 @@ $avatar-sizes: (
|
|
57
56
|
position: absolute;
|
58
57
|
top: 0;
|
59
58
|
left: 0;
|
60
|
-
z-index: 1;
|
61
59
|
border-radius: $border-rad-mega;
|
62
60
|
object-fit: cover;
|
63
61
|
display: block;
|
@@ -69,7 +67,6 @@ $avatar-sizes: (
|
|
69
67
|
top: 0;
|
70
68
|
bottom: auto;
|
71
69
|
left: auto;
|
72
|
-
z-index: 500;
|
73
70
|
|
74
71
|
&.size_xs {
|
75
72
|
right: -4px;
|
@@ -1,10 +1,6 @@
|
|
1
|
-
The `form` kit provides consumers with a convenient, consistently styled `<form>` wrapper.
|
1
|
+
The `form` kit provides consumers with a convenient, consistently styled `<form>` wrapper.
|
2
2
|
|
3
3
|
### Form Helpers
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
**Note:** It is suggested to use `form_with` for newer or more progressive Rails applications and `simple_form` for older legacy forms where simple_form is already implemented and a complete overhaul might not make sense.
|
8
|
-
|
9
|
-
This kit does make use of other kits such as text_input, select and typeahead to name a few. Doing so provides UI consistency within forms and makes adding a form to your page easier.
|
5
|
+
This kit uses rails `form_with` with our custom builder to render forms using other kits such as text_input, select, and typeahead to name a few. Doing so provides UI consistency within forms and makes adding a form to your page easier.
|
10
6
|
|
@@ -13,7 +13,7 @@
|
|
13
13
|
]
|
14
14
|
%>
|
15
15
|
|
16
|
-
<%=
|
16
|
+
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
17
17
|
<%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
|
18
18
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
19
19
|
<%= form.telephone_field :example_phone_field, props: { label: true } %>
|
@@ -13,10 +13,7 @@
|
|
13
13
|
]
|
14
14
|
%>
|
15
15
|
|
16
|
-
<%=
|
17
|
-
scope: :example, method: :get, url: "",
|
18
|
-
validate: true
|
19
|
-
}) do |form| %>
|
16
|
+
<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
|
20
17
|
<%= form.text_field :example_text_field, props: { label: true, required: true } %>
|
21
18
|
<%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
|
22
19
|
<%= form.email_field :example_email_field, props: { label: true, required: true } %>
|
@@ -1,7 +1,5 @@
|
|
1
1
|
examples:
|
2
2
|
|
3
3
|
rails:
|
4
|
-
- form_form_with: Default
|
5
|
-
- form_form_with_validate: Default
|
6
|
-
- form_simple_form: Default (Simple Form)
|
7
|
-
- form_simple_form_validate: Default (Simple Form) + Validation
|
4
|
+
- form_form_with: Default
|
5
|
+
- form_form_with_validate: Default + Validation
|
@@ -3,33 +3,27 @@
|
|
3
3
|
module Playbook
|
4
4
|
module PbForm
|
5
5
|
class Form < ::Playbook::KitBase
|
6
|
-
prop :form_system,
|
7
|
-
|
8
|
-
|
9
|
-
|
6
|
+
prop :form_system, deprecated: "Playbook only supports form_with and this prop is ignored",
|
7
|
+
type: Playbook::Props::Base
|
8
|
+
prop :form_system_options, deprecated: "Use options instead",
|
9
|
+
type: Playbook::Props::Base
|
10
|
+
prop :options, type: Playbook::Props::Base
|
10
11
|
prop :validate, type: Playbook::Props::Boolean, default: false
|
11
12
|
|
12
|
-
def form_system_options
|
13
|
-
form_options = prop(:form_system_options)
|
14
|
-
if form_options.is_a?(::Array)
|
15
|
-
model, options = *form_options
|
16
|
-
(options || {}).merge(model: model)
|
17
|
-
else
|
18
|
-
form_options
|
19
|
-
end
|
20
|
-
end
|
21
|
-
|
22
13
|
def render_in(view_context, &block)
|
23
|
-
|
14
|
+
view_context.pb_form_with(form_options, &block)
|
24
15
|
end
|
25
16
|
|
26
17
|
private
|
27
18
|
|
28
|
-
def
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
19
|
+
def form_options
|
20
|
+
{
|
21
|
+
id: id,
|
22
|
+
aria: aria,
|
23
|
+
class: classname,
|
24
|
+
data: data,
|
25
|
+
validate: validate,
|
26
|
+
}.merge(prop(:options) || prop(:form_system_options) || { })
|
33
27
|
end
|
34
28
|
end
|
35
29
|
end
|
@@ -9,7 +9,6 @@
|
|
9
9
|
@import "./trix_styles";
|
10
10
|
|
11
11
|
|
12
|
-
|
13
12
|
.trix-content pre {
|
14
13
|
display: inline-block;
|
15
14
|
width: 100%;
|
@@ -22,15 +21,11 @@
|
|
22
21
|
color: black !important;
|
23
22
|
overflow-x: auto;
|
24
23
|
}
|
25
|
-
|
26
|
-
|
27
24
|
[class^=pb_rich_text_editor_kit] {
|
28
|
-
|
29
25
|
// Disables File Attatchment Button in Toolbar
|
30
26
|
trix-toolbar [data-trix-button-group="file-tools"] {
|
31
27
|
display: none;
|
32
28
|
}
|
33
|
-
|
34
29
|
// Simple Mode (shows only BOLD & ITALIC)
|
35
30
|
&.simple {
|
36
31
|
[data-trix-button-group="history-tools"] {
|
@@ -51,7 +46,6 @@
|
|
51
46
|
display: none;
|
52
47
|
}
|
53
48
|
}
|
54
|
-
|
55
49
|
// Focused Styles for Border Radius
|
56
50
|
&.focus-editor-targets {
|
57
51
|
trix-toolbar {
|
@@ -62,20 +56,26 @@
|
|
62
56
|
border-top-right-radius: $border_rad_heavier !important;
|
63
57
|
}
|
64
58
|
}
|
65
|
-
&:focus-within
|
59
|
+
&:focus-within,
|
60
|
+
&:focus,&:not(:focus),&:not(:focus-within) {
|
61
|
+
.trix-button-row, trix-editor {
|
62
|
+
@include transition_default;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
&:focus-within,
|
66
|
+
&:focus{
|
66
67
|
.trix-button-row, trix-editor {
|
67
68
|
background-color: $focus_input_light;
|
68
69
|
border-color: $primary;
|
69
70
|
}
|
70
71
|
}
|
71
|
-
.trix-dialog.trix-dialog--link{
|
72
|
+
.trix-dialog.trix-dialog--link {
|
72
73
|
background-color: $white ;
|
73
74
|
border: 1px solid $border_light;
|
74
75
|
box-shadow: none;
|
75
76
|
margin-top: $space_sm;
|
76
77
|
margin-left: $space_sm;
|
77
78
|
}
|
78
|
-
|
79
79
|
&.sticky {
|
80
80
|
trix-toolbar {
|
81
81
|
position: sticky;
|
@@ -83,17 +83,12 @@
|
|
83
83
|
z-index: 1;
|
84
84
|
}
|
85
85
|
}
|
86
|
-
|
87
|
-
|
88
86
|
trix-editor {
|
89
|
-
// background-color: $focus_input_light;
|
90
87
|
@include pb_textarea_light;
|
91
88
|
border-top-left-radius: 0;
|
92
89
|
border-top-right-radius: 0;
|
93
90
|
}
|
94
|
-
|
95
91
|
trix-toolbar {
|
96
|
-
|
97
92
|
.trix-button--icon {
|
98
93
|
height: $space_lg;
|
99
94
|
width: $space_lg;
|
@@ -110,100 +105,73 @@
|
|
110
105
|
padding: $space_xs / 2;
|
111
106
|
border-top-left-radius: $border_rad_heavier;
|
112
107
|
border-top-right-radius: $border_rad_heavier;
|
113
|
-
|
114
108
|
.trix-button-group {
|
115
109
|
margin-bottom: 0 !important;
|
116
110
|
border: none !important;
|
117
|
-
|
118
111
|
.trix-button {
|
119
112
|
border: none;
|
120
|
-
|
121
113
|
&.trix-active {
|
122
114
|
background: $bg_light;
|
123
115
|
}
|
124
116
|
}
|
125
117
|
}
|
126
118
|
}
|
127
|
-
|
128
|
-
button.trix-button.trix-button--icon.trix-button{
|
119
|
+
button.trix-button.trix-button--icon.trix-button {
|
129
120
|
&:hover{
|
130
121
|
background-color: rgba($border_light, 0.50);
|
131
122
|
}
|
132
123
|
}
|
133
124
|
}
|
134
|
-
|
135
|
-
|
136
|
-
|
137
125
|
// Trix doesn't provide customization to their icons.
|
138
126
|
// https://github.com/basecamp/trix/issues/464#issuecomment-564683997
|
139
|
-
|
140
127
|
&[class*=dark] {
|
141
|
-
|
142
128
|
// Dark SVG Icon Styles
|
143
129
|
.trix-button--icon-bold::before {
|
144
130
|
background-image: url("data:image/svg+xml,%3Csvg width='11px' height='14px' viewBox='0 0 11 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-19.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M20.6,16.79 C21.565,16.115 22.25,15.025 22.25,14 C22.25,11.745 20.505,10 18.25,10 L12,10 L12,24 L19.04,24 C21.135,24 22.75,22.3 22.75,20.21 C22.75,18.69 21.885,17.395 20.6,16.79 Z M15,12.5 L18,12.5 C18.83,12.5 19.5,13.17 19.5,14 C19.5,14.83 18.83,15.5 18,15.5 L15,15.5 L15,12.5 L15,12.5 Z M18.5,21.5 L15,21.5 L15,18.5 L18.5,18.5 C19.33,18.5 20,19.17 20,20 C20,20.83 19.33,21.5 18.5,21.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
145
131
|
}
|
146
|
-
|
147
132
|
.trix-button--icon-italic::before {
|
148
133
|
background-image: url("data:image/svg+xml,%3Csvg width='12px' height='14px' viewBox='0 0 12 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-52.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpolygon id='Shape' points='49 10 49 13 51.215 13 47.785 21 45 21 45 24 53 24 53 21 50.785 21 54.215 13 57 13 57 10'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
149
134
|
}
|
150
|
-
|
151
135
|
.trix-button--icon-strike::before {
|
152
136
|
background-image: url("data:image/svg+xml,%3Csvg width='18px' height='15px' viewBox='0 0 18 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-83.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M90.938,19.2 C90.979,19.439 91,19.69 91,19.954 C91,20.823 90.753,21.594 90.259,22.268 C89.765,22.942 89.052,23.466 88.121,23.84 C87.19,24.213 86.098,24.4 84.845,24.4 C83.799,24.4 82.9219,24.335 82.2129,24.204 C81.5039,24.073 80.7663,23.844 80,23.519 L80,23.519 L80,20.146 C80.8092,20.517 81.6507,20.806 82.5244,21.013 C83.398,21.221 84.2,21.325 84.931,21.325 C85.561,21.325 86.023,21.227 86.316,21.032 C86.61,20.838 86.757,20.587 86.757,20.28 C86.757,20.089 86.698,19.921 86.58,19.777 C86.461,19.634 86.272,19.488 86.01,19.341 C85.944,19.304 85.85,19.257 85.728,19.2 L85.728,19.2 Z M94,16.2 L94,18.2 L76,18.2 L76,16.2 L94,16.2 Z M86.026,10 C87.652,10 89.31,10.3353 91,11.006 L89.7,13.9281 C88.232,13.3277 86.965,13.0275 85.897,13.0275 C85.346,13.0275 84.945,13.1138 84.694,13.2862 C84.444,13.4587 84.318,13.6727 84.318,13.9281 C84.318,14.2028 84.478,14.4487 84.796,14.6659 C84.975,14.7877 85.326,14.9657 85.848,15.2 L80.2303,15.2 C80.1484,14.8642 80.1074,14.4978 80.1074,14.1006 C80.1074,12.8104 80.6338,11.8044 81.6865,11.0826 C82.7393,10.3609 84.186,10 86.026,10 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
153
137
|
}
|
154
|
-
|
155
138
|
.trix-button--icon-link::before {
|
156
139
|
background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-117.000000, -15.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M120.695234,15.0178906 C122.367547,16.6902031 122.367547,19.4110156 120.695234,21.0833281 L117.320234,24.4583281 C116.510234,25.2683281 115.433047,25.7143906 114.287234,25.7143906 C113.141422,25.7143906 112.064234,25.2683281 111.254234,24.4583281 C109.581922,22.7860156 109.581922,20.0652031 111.254234,18.3928906 L113.178729,16.4902344 C113.535917,16.1330469 114.114729,16.1330469 114.471354,16.4902344 C114.827979,16.8474219 114.828542,17.4256719 114.471354,17.7828594 L112.546859,19.6855156 C111.587234,20.6451406 111.587234,22.2060781 112.546859,23.1657031 C113.011484,23.6303281 113.629672,23.8862656 114.287234,23.8862656 C114.944797,23.8862656 115.562422,23.6303281 116.027609,23.1657031 L119.402609,19.7907031 C120.362234,18.8310781 120.362234,17.2701406 119.402609,16.3105156 C119.045422,15.9533281 119.045422,15.3750781 119.402609,15.0178906 C119.759797,14.6607031 120.338047,14.6607031 120.695234,15.0178906 Z M123.287234,8 C124.433047,8 125.509672,8.4460625 126.320234,9.2560625 C127.992547,10.928375 127.992547,13.6491875 126.320234,15.3215 L124.358055,17.0365667 C124.000867,17.3937542 123.422617,17.3937542 123.06543,17.0365667 C122.708242,16.6793792 122.708242,16.1011292 123.06543,15.7439417 L125.027609,14.028875 C125.987234,13.06925 125.987234,11.5083125 125.027609,10.5486875 C124.562984,10.0840625 123.944797,9.828125 123.287234,9.828125 C122.629672,9.828125 122.012047,10.0840625 121.546859,10.5486875 L118.171859,13.9236875 C117.212234,14.8833125 117.212234,16.44425 118.171859,17.403875 C118.529047,17.7610625 118.529047,18.3393125 118.171859,18.6965 C117.993547,18.8748125 117.759547,18.96425 117.525547,18.96425 C117.291547,18.96425 117.057547,18.8748125 116.879234,18.6965 C115.206922,17.0241875 115.206922,14.303375 116.879234,12.6310625 L120.254234,9.2560625 C121.064234,8.4460625 122.141422,8 123.287234,8 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
157
140
|
}
|
158
|
-
|
159
141
|
.trix-button--icon-heading-1::before {
|
160
142
|
background-image: url("data:image/svg+xml,%3Csvg width='19px' height='15px' viewBox='0 0 19 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-171.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling2' transform='translate(163.000000, 7.000000)'%3E%3Cpath d='M17,15.016 L17,18.016 L14,18.016 L14,25 L11,25 L11,18.016 L8,18.016 L8,15.016 L17,15.016 L17,15.016 Z M13.968,10 L26.999,10 L26.999,13 L21.983,13 L21.983,25 L18.983,25 L18.983,13 L13.967,13 L13.967,10 L13.968,10 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
161
143
|
}
|
162
|
-
|
163
144
|
.trix-button--icon-quote::before {
|
164
145
|
background-image: url("data:image/svg+xml,%3Csvg width='14px' height='10px' viewBox='0 0 14 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-207.000000, -19.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling2' transform='translate(163.000000, 7.000000)'%3E%3Cpath d='M45,22 L48,22 L50,18 L50,12 L44,12 L44,18 L47,18 L45,22 Z M53,22 L56,22 L58,18 L58,12 L52,12 L52,18 L55,18 L53,22 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
165
146
|
}
|
166
|
-
|
167
147
|
.trix-button--icon-code::before {
|
168
148
|
background-image: url("data:image/svg+xml,%3Csvg width='18px' height='10px' viewBox='0 0 18 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-239.000000, -19.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling2' transform='translate(163.000000, 7.000000)'%3E%3Cpath d='M91.17,16.585 L88,19.755 L89.415,21.17 L94,16.585 L89.415,12 L88,13.415 L91.17,16.585 Z M78.83,16.585 L82,13.415 L80.585,12 L76,16.585 L80.585,21.17 L82,19.755 L78.83,16.585 L78.83,16.585 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
169
149
|
}
|
170
|
-
|
171
150
|
.trix-button--icon-bullet-list::before {
|
172
151
|
background-image: url("data:image/svg+xml,%3Csvg width='20px' height='16px' viewBox='0 0 20 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-272.000000, -16.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling2' transform='translate(163.000000, 7.000000)'%3E%3Cpath d='M111,9 C109.8933,9 109,9.8933 109,11 C109,12.1067 109.8933,13 111,13 C112.1067,13 113,12.1067 113,11 C113,9.8933 112.1067,9 111,9 Z M111,15 C109.8933,15 109,15.893 109,17 C109,18.107 109.8933,19 111,19 C112.1067,19 113,18.107 113,17 C113,15.893 112.1067,15 111,15 Z M111,21 C109.8933,21 109,21.893 109,23 C109,24.107 109.8933,25 111,25 C112.1067,25 113,24.107 113,23 C113,21.893 112.1067,21 111,21 Z M115,24 L129,24 L129,22 L115,22 L115,24 Z M115,18 L129,18 L129,16 L115,16 L115,18 Z M115,10 L115,12 L129,12 L129,10 L115,10 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
173
152
|
}
|
174
|
-
|
175
153
|
.trix-button--icon-number-list::before {
|
176
154
|
background-image: url("data:image/svg+xml,%3Csvg width='19px' height='16px' viewBox='0 0 19 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-307.000000, -16.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling2' transform='translate(163.000000, 7.000000)'%3E%3Cpath d='M144,22 L146,22 L146,22.5 L145,22.5 L145,23.5 L146,23.5 L146,24 L144,24 L144,25 L147,25 L147,21 L144,21 L144,22 Z M145,13 L146,13 L146,9 L144,9 L144,10 L145,10 L145,13 Z M144,16 L145.8,16 L144,18.1 L144,19 L147,19 L147,18 L145.2,18 L147,15.9 L147,15 L144,15 L144,16 Z M149,10 L149,12 L163,12 L163,10 L149,10 Z M149,24 L163,24 L163,22 L149,22 L149,24 Z M149,18 L163,18 L163,16 L149,16 L149,18 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
177
155
|
}
|
178
|
-
|
179
156
|
.trix-button--icon-decrease-nesting-level::before {
|
180
157
|
background-image: url("data:image/svg+xml,%3Csvg width='21px' height='14px' viewBox='0 0 21 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-340.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling2' transform='translate(163.000000, 7.000000)'%3E%3Cpath d='M179,24 L198,24 L198,22 L179,22 L179,24 L179,24 Z M186,18 L198,18 L198,16 L186,16 L186,18 L186,18 Z M177.707107,17.7426407 L180.535534,20.5710678 L181.949747,19.1568542 L179.828427,17.0355339 L181.949747,14.9142136 L180.535534,13.5 L177,17.0355339 L177.707107,17.7426407 Z M179,10 L179,12 L198,12 L198,10 L179,10 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
181
158
|
}
|
182
|
-
|
183
159
|
.trix-button--icon-increase-nesting-level::before {
|
184
160
|
background-image: url("data:image/svg+xml,%3Csvg width='21px' height='14px' viewBox='0 0 21 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-374.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling2' transform='translate(163.000000, 7.000000)'%3E%3Cpath d='M213,24 L232,24 L232,22 L213,22 L213,24 L213,24 Z M220,18 L232,18 L232,16 L220,16 L220,18 L220,18 Z M213.12132,17.0355339 L211,19.1568542 L212.414214,20.5710678 L215.949747,17.0355339 L215.242641,16.3284271 L212.414214,13.5 L211,14.9142136 L213.12132,17.0355339 Z M213,10 L213,12 L232,12 L232,10 L213,10 Z' id='Shape-Copy'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
185
161
|
}
|
186
|
-
|
187
162
|
.trix-button--icon-attach::before {
|
188
163
|
background-image: url("data:image/svg+xml,%3Csvg width='11px' height='22px' viewBox='0 0 11 22' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Rich-Text/Dark/Field-Only/Default' transform='translate(-385.000000, -139.000000)' fill='%23ABAFC2' fill-rule='nonzero'%3E%3Cg id='For-Future' transform='translate(338.000000, 139.000000)'%3E%3Cpath d='M56.5,5 L56.5,16.5 C56.5,18.71 54.71,20.5 52.5,20.5 C50.29,20.5 48.5,18.71 48.5,16.5 L48.5,4 C48.5,2.62 49.62,1.5 51,1.5 C52.38,1.5 53.5,2.62 53.5,4 L53.5,14.5 C53.5,15.05 53.055,15.5 52.5,15.5 C51.945,15.5 51.5,15.05 51.5,14.5 L51.5,5 L50,5 L50,14.5 C50,15.88 51.12,17 52.5,17 C53.88,17 55,15.88 55,14.5 L55,4 C55,1.79 53.21,0 51,0 C48.79,0 47,1.79 47,4 L47,16.5 C47,19.54 49.465,22 52.5,22 C55.535,22 58,19.54 58,16.5 L58,5 L56.5,5 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
189
164
|
}
|
190
|
-
|
191
165
|
.trix-button--icon-undo::before {
|
192
166
|
background-image: url("data:image/svg+xml,%3Csvg width='21px' height='9px' viewBox='0 0 21 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-666.000000, -20.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Undo/Redo' transform='translate(659.000000, 7.000000)'%3E%3Cpath d='M17.5,14 C14.855,14 12.445,14.985 10.6,16.6 L7,13 L7,22 L16,22 L12.385,18.385 C13.77,17.22 15.545,16.5 17.5,16.5 C21.045,16.5 24.045,18.805 25.095,22 L27.46,21.22 C26.085,17.03 22.15,14 17.5,14 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
193
167
|
}
|
194
|
-
|
195
168
|
.trix-button--icon-redo::before {
|
196
169
|
background-image: url("data:image/svg+xml,%3Csvg width='21px' height='9px' viewBox='0 0 21 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-700.000000, -20.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Undo/Redo' transform='translate(659.000000, 7.000000)'%3E%3Cpath d='M57.855,16.6 C56.015,14.985 53.605,14 50.96,14 C46.31,14 42.375,17.03 41,21.22 L43.365,22 C44.415,18.805 47.415,16.5 50.96,16.5 C52.915,16.5 54.69,17.22 56.075,18.385 L52.46,22 L61.46,22 L61.46,13 L57.855,16.6 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
197
170
|
}
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
171
|
// Dark Mode Placeholder
|
203
172
|
trix-editor:empty:not(:focus)::before {
|
204
173
|
color: $focus_input_dark;
|
205
174
|
}
|
206
|
-
|
207
175
|
trix-editor {
|
208
176
|
background-color: rgba($white, 0.1);
|
209
177
|
border-color: rgba($white, 0.15);
|
@@ -211,51 +179,46 @@
|
|
211
179
|
border-top-right-radius: 0;
|
212
180
|
color: $text_dk_default;
|
213
181
|
}
|
214
|
-
|
215
182
|
trix-toolbar {
|
216
183
|
.trix-button-row {
|
217
184
|
background-color: rgba($white, 0.1);
|
218
185
|
border: 1px solid rgba($white, 0.15);
|
219
186
|
border-bottom: 0;
|
220
187
|
}
|
221
|
-
.trix-active{
|
188
|
+
.trix-active {
|
222
189
|
background: $active_dark !important;
|
223
190
|
}
|
224
191
|
button.trix-button.trix-button--icon.trix-button{
|
225
|
-
&:hover{
|
192
|
+
&:hover {
|
226
193
|
background-color: rgba($white, 0.15);
|
227
194
|
}
|
228
|
-
&:focus{
|
195
|
+
&:focus {
|
229
196
|
background-color: $active_dark !important;
|
230
197
|
}
|
231
198
|
}
|
232
|
-
&:focus{
|
233
|
-
border-color
|
199
|
+
&:focus {
|
200
|
+
border-color: $active_dark;
|
234
201
|
}
|
235
|
-
|
236
202
|
}
|
237
|
-
|
238
|
-
&:focus-within{
|
203
|
+
&:focus-within {
|
239
204
|
.trix-button-row, trix-editor {
|
240
205
|
background-color: rgba($white, 0.03);
|
241
206
|
border-color: $active_dark !important;
|
242
207
|
}
|
243
208
|
}
|
244
|
-
|
245
209
|
&.error {
|
246
210
|
trix-editor {
|
247
211
|
border-color: $error_dark;
|
248
212
|
}
|
249
213
|
}
|
250
|
-
|
251
|
-
.trix-dialog.trix-dialog--link.trix-active{
|
214
|
+
.trix-dialog.trix-dialog--link.trix-active {
|
252
215
|
background-color: tint($bg_dark, 10%) !important;
|
253
216
|
border: 1px solid rgba($white, 0.1);
|
254
217
|
box-shadow: none;
|
255
218
|
margin-top: $space_sm;
|
256
219
|
margin-left: $space_sm;
|
257
220
|
}
|
258
|
-
.trix-button--dialog{
|
221
|
+
.trix-button--dialog {
|
259
222
|
color: $white;
|
260
223
|
}
|
261
224
|
}
|
@@ -19,6 +19,7 @@
|
|
19
19
|
white-space: nowrap;
|
20
20
|
overflow: hidden;
|
21
21
|
text-overflow: ellipsis;
|
22
|
+
max-height: 45px;
|
22
23
|
@media (hover:hover) {
|
23
24
|
&:hover, &:active, &:focus {
|
24
25
|
background-color: $focus_input_light;
|
@@ -26,6 +27,7 @@
|
|
26
27
|
}
|
27
28
|
&:focus{
|
28
29
|
border-color: $primary;
|
30
|
+
@include transition_default;
|
29
31
|
}
|
30
32
|
&:disabled ~ .pb_select_kit_caret {
|
31
33
|
opacity: 0.5;
|
@@ -68,7 +70,6 @@
|
|
68
70
|
@include pb_textarea_dark;
|
69
71
|
@include pb_body_light_dark;
|
70
72
|
background: none;
|
71
|
-
|
72
73
|
background-color: rgba($white,.10);
|
73
74
|
box-shadow: inset 0 -11px 20px rgba($white, 0.05);
|
74
75
|
text-shadow: 0 0 0 $text_dk_default;
|
@@ -8,47 +8,40 @@
|
|
8
8
|
margin-bottom: $space_xs;
|
9
9
|
display: block;
|
10
10
|
}
|
11
|
-
|
12
11
|
.text_input_wrapper {
|
13
12
|
margin-bottom: $space_sm;
|
14
13
|
display: block;
|
15
|
-
|
16
14
|
input::placeholder,
|
17
15
|
.text_input .placeholder {
|
18
16
|
@include pb_body_light;
|
19
17
|
}
|
20
|
-
|
21
18
|
input,
|
22
19
|
.text_input {
|
20
|
+
max-height: 45px;
|
23
21
|
@include pb_textarea_light;
|
24
22
|
overflow: hidden;
|
25
23
|
}
|
26
|
-
|
27
24
|
input:hover,
|
28
25
|
.text_input:hover{
|
29
26
|
background-color: rgba($focus_input_light,$opacity_5);
|
30
27
|
}
|
31
|
-
|
32
28
|
input:focus,
|
33
29
|
.text_input:focus,
|
34
30
|
input:-webkit-autofill:focus,
|
35
31
|
.text_input:-webkit-autofill:focus {
|
36
32
|
@include pb_textarea_focus;
|
33
|
+
@include transition_default;
|
37
34
|
border-color: $primary;
|
38
|
-
-
|
39
|
-
transition: background-color 5000s ease-in-out 0s;
|
35
|
+
background-color: rgba($focus_input_light,$opacity_5);
|
40
36
|
}
|
41
37
|
}
|
42
|
-
|
43
38
|
&.dark {
|
44
39
|
.text_input_wrapper {
|
45
40
|
margin-bottom: 1rem;
|
46
|
-
|
47
41
|
input::placeholder,
|
48
42
|
.text_input .placeholder {
|
49
43
|
@include pb_body_light_dark;
|
50
44
|
}
|
51
|
-
|
52
45
|
input, .text_input {
|
53
46
|
@include pb_textarea_dark;
|
54
47
|
@include pb_body_dark;
|
@@ -56,23 +49,18 @@
|
|
56
49
|
background-color: rgba($white,$opacity_1);
|
57
50
|
border-color: rgba($white, 0.15);
|
58
51
|
}
|
59
|
-
|
60
52
|
input:hover,
|
61
53
|
.text_input:hover{
|
62
54
|
background-color: rgba($white, 0.15);
|
63
55
|
}
|
64
|
-
|
65
56
|
input:focus,
|
66
57
|
.text_input:focus,
|
67
58
|
input:-webkit-autofill:focus,
|
68
59
|
.text_input:-webkit-autofill:focus {
|
69
60
|
border-color: $active_dark;
|
70
61
|
background-color: rgba($white, 0.025);
|
71
|
-
-webkit-box-shadow: none;
|
72
|
-
|
73
62
|
}
|
74
63
|
}
|
75
|
-
|
76
64
|
&.error {
|
77
65
|
.text_input_wrapper {
|
78
66
|
input, .text_input {
|
@@ -81,7 +69,6 @@
|
|
81
69
|
}
|
82
70
|
}
|
83
71
|
}
|
84
|
-
|
85
72
|
&.error {
|
86
73
|
.text_input_wrapper {
|
87
74
|
[class*=pb_body_kit] {
|