playbook_ui 10.0.1.alpha.railscusticon → 10.0.1.alpha.rtflexfix
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_button/_button.scss +0 -1
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +13 -18
- data/app/pb_kits/playbook/pb_icon/_icon.scss +0 -9
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +7 -13
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -33
- data/lib/playbook/version.rb +1 -1
- metadata +2 -3
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +0 -22
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e5e3db15b69710f1f18b55e24642b90c7dcbc00b2a19d568aeb0d234b59c5e74
|
4
|
+
data.tar.gz: 6af1e23b3f4b42eb24319c3649d0cb308db273289e5e231e6e7cc08abd95ad41
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 59bf90d751af319a439aa23617e8a933a6d14357832a01332f4be1f8f27ee85923a94ea3948ff509cd12c798ad8543f46335d114682adb9e30790434c0738d95
|
7
|
+
data.tar.gz: 6b257eec72921d6030a02c3844c3fec35f3069827c1623dc5bbd9753d14c045cbaf642ec00e6e7002c6aa6bac4f0490fcb898028b82e5f861746bf828c8b8d60
|
@@ -12,17 +12,8 @@ $pb_button_h_padding: 34px;
|
|
12
12
|
$pb_button_hover_darken: 4%;
|
13
13
|
$pb_button_border_width: 0px;
|
14
14
|
|
15
|
-
@mixin pb_button_variant($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
|
16
|
-
background-color: $bg;
|
17
|
-
color: $color;
|
18
|
-
border-color: $border;
|
19
|
-
|
20
|
-
&:active {
|
21
|
-
border-color: darken($bg, $pb_button_hover_darken);
|
22
|
-
}
|
23
|
-
}
|
24
15
|
|
25
|
-
@mixin pb_button {
|
16
|
+
@mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
|
26
17
|
text-rendering: optimizeLegibility;
|
27
18
|
font-size: $font_small;
|
28
19
|
font-weight: $bold;
|
@@ -30,12 +21,15 @@ $pb_button_border_width: 0px;
|
|
30
21
|
vertical-align: middle;
|
31
22
|
text-transform: none;
|
32
23
|
border-width: $pb_button_border_width;
|
24
|
+
border-color: $border;
|
33
25
|
border-style: solid;
|
34
26
|
border-radius: $border_rad_light;
|
35
27
|
min-height: $pb_button_size;
|
36
28
|
line-height: 1.5;
|
37
29
|
padding: $pb_button_v_padding $pb_button_h_padding;
|
38
30
|
cursor: pointer;
|
31
|
+
background-color: $bg;
|
32
|
+
color: $color;
|
39
33
|
outline: none;
|
40
34
|
transition: background $transition_default ease, color $transition_default ease;
|
41
35
|
box-sizing: border-box;
|
@@ -63,6 +57,7 @@ $pb_button_border_width: 0px;
|
|
63
57
|
&:active {
|
64
58
|
outline: none;
|
65
59
|
border-width: $pb_button_border_width;
|
60
|
+
border-color: darken($bg, $pb_button_hover_darken);
|
66
61
|
}
|
67
62
|
|
68
63
|
};
|
@@ -73,7 +68,7 @@ $pb_button_border_width: 0px;
|
|
73
68
|
|
74
69
|
// Primary ======================
|
75
70
|
@mixin pb_button_primary {
|
76
|
-
@include
|
71
|
+
@include pb_button;
|
77
72
|
|
78
73
|
@media (hover:hover) {
|
79
74
|
&:hover {
|
@@ -84,7 +79,7 @@ $pb_button_border_width: 0px;
|
|
84
79
|
|
85
80
|
// Secondary ====================
|
86
81
|
@mixin pb_button_secondary {
|
87
|
-
@include
|
82
|
+
@include pb_button(rgba($primary_action, 0.05), $primary_action);
|
88
83
|
|
89
84
|
@media (hover:hover) {
|
90
85
|
&:hover {
|
@@ -95,7 +90,7 @@ $pb_button_border_width: 0px;
|
|
95
90
|
|
96
91
|
// Link =========================
|
97
92
|
@mixin pb_button_link {
|
98
|
-
@include
|
93
|
+
@include pb_button($transparent, $primary_action);
|
99
94
|
|
100
95
|
@media (hover:hover) {
|
101
96
|
&:hover {
|
@@ -107,7 +102,7 @@ $pb_button_border_width: 0px;
|
|
107
102
|
// Disabled ====================
|
108
103
|
@mixin pb_button_disabled {
|
109
104
|
$disabled_color: rgba($charcoal, $opacity_5);
|
110
|
-
@include
|
105
|
+
@include pb_button(rgba($slate, $opacity_4), $disabled_color);
|
111
106
|
pointer-events: none;
|
112
107
|
}
|
113
108
|
|
@@ -132,7 +127,7 @@ $pb_button_border_width: 0px;
|
|
132
127
|
|
133
128
|
// Dark Primary =================
|
134
129
|
@mixin pb_button_primary_dark{
|
135
|
-
@include
|
130
|
+
@include pb_button($primary_action);
|
136
131
|
|
137
132
|
@media (hover:hover) {
|
138
133
|
&:hover {
|
@@ -143,7 +138,7 @@ $pb_button_border_width: 0px;
|
|
143
138
|
|
144
139
|
// Dark Secondary ==============
|
145
140
|
@mixin pb_button_secondary_dark{
|
146
|
-
@include
|
141
|
+
@include pb_button(rgba($white, 0.2), $white);
|
147
142
|
|
148
143
|
@media (hover:hover) {
|
149
144
|
&:hover {
|
@@ -154,7 +149,7 @@ $pb_button_border_width: 0px;
|
|
154
149
|
|
155
150
|
// Dark Link =============
|
156
151
|
@mixin pb_button_link_dark {
|
157
|
-
@include
|
152
|
+
@include pb_button($transparent, $white);
|
158
153
|
|
159
154
|
@media (hover:hover) {
|
160
155
|
&:hover {
|
@@ -166,6 +161,6 @@ $pb_button_border_width: 0px;
|
|
166
161
|
// Dark Disabled ====================
|
167
162
|
@mixin pb_button_disabled_dark {
|
168
163
|
$disabled_color: rgba($white, $opacity_5);
|
169
|
-
@include
|
164
|
+
@include pb_button(rgba($slate, $opacity_5), $disabled_color);
|
170
165
|
pointer-events: none;
|
171
166
|
}
|
@@ -1,13 +1,7 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
) %>
|
9
|
-
<%= content_tag(:span, nil,
|
10
|
-
aria: { label: "#{object.icon} icon" }.merge(object.aria),
|
11
|
-
hidden: true
|
12
|
-
) %>
|
13
|
-
<% end %>
|
1
|
+
<%= content_tag(:i, nil,
|
2
|
+
id: object.id,
|
3
|
+
data: object.data,
|
4
|
+
class: object.classname ) %>
|
5
|
+
<%= content_tag(:span, nil,
|
6
|
+
aria: { label: "#{object.icon} icon" }.merge(object.aria),
|
7
|
+
hidden: true ) %>
|
@@ -1,7 +1,5 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
require "open-uri"
|
4
|
-
|
5
3
|
module Playbook
|
6
4
|
module PbIcon
|
7
5
|
class Icon < Playbook::KitBase
|
@@ -12,9 +10,7 @@ module Playbook
|
|
12
10
|
prop :flip, type: Playbook::Props::Enum,
|
13
11
|
values: ["horizontal", "vertical", "both", nil],
|
14
12
|
default: nil
|
15
|
-
prop :icon
|
16
|
-
prop :custom_icon, type: Playbook::Props::String,
|
17
|
-
default: nil
|
13
|
+
prop :icon, required: true
|
18
14
|
prop :inverse, type: Playbook::Props::Boolean,
|
19
15
|
default: false
|
20
16
|
prop :list_item, type: Playbook::Props::Boolean,
|
@@ -52,34 +48,6 @@ module Playbook
|
|
52
48
|
)
|
53
49
|
end
|
54
50
|
|
55
|
-
def custom_icon_classname
|
56
|
-
generate_classname(
|
57
|
-
"pb_icon_kit",
|
58
|
-
border_class,
|
59
|
-
fixed_width_class,
|
60
|
-
flip_class,
|
61
|
-
inverse_class,
|
62
|
-
list_item_class,
|
63
|
-
pull_class,
|
64
|
-
pulse_class,
|
65
|
-
rotation_class,
|
66
|
-
size_class,
|
67
|
-
spin_class,
|
68
|
-
separator: " "
|
69
|
-
)
|
70
|
-
end
|
71
|
-
|
72
|
-
def render_svg(path)
|
73
|
-
if File.extname(path) == ".svg"
|
74
|
-
doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
|
75
|
-
svg = doc.at_css "svg"
|
76
|
-
svg["class"] = "pb_custom_icon " + object.custom_icon_classname
|
77
|
-
raw doc
|
78
|
-
else
|
79
|
-
raise("Custom icon must be an svg. Please check your path and file type.")
|
80
|
-
end
|
81
|
-
end
|
82
|
-
|
83
51
|
private
|
84
52
|
|
85
53
|
def border_class
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 10.0.1.alpha.
|
4
|
+
version: 10.0.1.alpha.rtflexfix
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-07-
|
12
|
+
date: 2021-07-08 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1004,7 +1004,6 @@ files:
|
|
1004
1004
|
- app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
|
1005
1005
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
|
1006
1006
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
|
1007
|
-
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
|
1008
1007
|
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
|
1009
1008
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
|
1010
1009
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
|
@@ -1,22 +0,0 @@
|
|
1
|
-
<%# SVG fill color inherited from css color property %>
|
2
|
-
<div class="icon-wrapper" style="color:blue;">
|
3
|
-
|
4
|
-
<p><%= pb_rails("icon", props: { custom_icon: "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg", size: "2x" } ) %></p>
|
5
|
-
<p><%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "3x" } ) %></p>
|
6
|
-
|
7
|
-
<%= pb_rails("icon", props: { flip: "vertical", custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
|
8
|
-
<%= pb_rails("icon", props: { rotation: 90, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
|
9
|
-
<%= pb_rails("icon", props: { spin: true, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
|
10
|
-
<%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "8x" } ) %>
|
11
|
-
|
12
|
-
|
13
|
-
<%# <%= pb_rails("icon", props: { custom_icon: "https://en.wikipedia.org/wiki/Portable_Network_Graphics#/media/File:PNG_transparency_demonstration_1.png", size: "8x" } ) %>
|
14
|
-
|
15
|
-
|
16
|
-
<%= pb_rails("body", props: {
|
17
|
-
text: "Custom icons must be SVGs. They can be locally or remotely
|
18
|
-
sourced and are compatible with other icon props (size, rotation,
|
19
|
-
spin, flip, etc). Their SVG fill colors will be inherited from
|
20
|
-
parent element's css color properties."
|
21
|
-
} ) %>
|
22
|
-
</div>
|