playbook_ui 14.7.0.pre.rc.14 → 14.7.0.pre.rc.15
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/utilities/_hover.scss +46 -43
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +6 -1
- data/dist/chunks/{_typeahead-BJrdFWHc.js → _typeahead-5m7Pr_Rh.js} +1 -1
- data/dist/chunks/{_weekday_stacked-DJWwxF-6.js → _weekday_stacked-BygKGkw1.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/hover.rb +4 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9ead2739f2ece3a4b124bb7ac2c649dcbcae4a409537858436102330423de0b4
|
|
4
|
+
data.tar.gz: 564d3bad3fc73207a78f0769e68091814a96b0243a7b7b7df3c94ff53823749d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4734dc234a5df0435907440a2436b4c45089ec31ec337e33a394645ba10117eef66a0b0f8359b09dd5203fbe0e7108fac841fde5ee012f1df3b087bb22f40652
|
|
7
|
+
data.tar.gz: 1f265cddcd9db6e5362845f4fadb7d07922c31e78271f14c8ca756a9e770f1e5db3aef11bb3d1b1731fc4f85e2726684558cae347de11ea9abab24f6dcf9d8fa
|
|
@@ -1,51 +1,54 @@
|
|
|
1
1
|
@import "../tokens/exports/scale.module";
|
|
2
2
|
|
|
3
|
-
@mixin hover-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
.hover_color_#{"" + $name}:hover {
|
|
10
|
-
color: $color !important;
|
|
11
|
-
transition: color $transition-speed ease;
|
|
12
|
-
}
|
|
3
|
+
@mixin hover-scale-classes($scales-list) {
|
|
4
|
+
@each $name, $scale in $scales-list {
|
|
5
|
+
.hover_#{"" + $name}:hover,
|
|
6
|
+
.group_hover:hover .group_hover.hover_#{"" + $name} {
|
|
7
|
+
transform: $scale;
|
|
8
|
+
transition: transform $transition-speed ease;
|
|
13
9
|
}
|
|
14
10
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@mixin hover-shadow-classes($shadows-list) {
|
|
14
|
+
@each $name, $shadow in $shadows-list {
|
|
15
|
+
.hover_#{"" + $name}:hover,
|
|
16
|
+
.group_hover:hover .group_hover.hover_#{"" + $name} {
|
|
17
|
+
box-shadow: $shadow;
|
|
18
|
+
transition: box-shadow $transition-speed ease;
|
|
22
19
|
}
|
|
23
20
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin hover-color-classes($colors-list) {
|
|
24
|
+
@each $name, $color in $colors-list {
|
|
25
|
+
.hover_background_#{"" + $name}:hover,
|
|
26
|
+
.group_hover:hover .group_hover.hover_background_#{"" + $name} {
|
|
27
|
+
background-color: $color !important;
|
|
28
|
+
transition: background-color $transition-speed ease;
|
|
29
|
+
}
|
|
30
|
+
.hover_color_#{"" + $name}:hover,
|
|
31
|
+
.group_hover:hover .group_hover.hover_color_#{"" + $name} {
|
|
32
|
+
color: $color !important;
|
|
33
|
+
transition: color $transition-speed ease;
|
|
31
34
|
}
|
|
32
35
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@include hover-scale-classes($scales);
|
|
39
|
+
@include hover-shadow-classes($box_shadows);
|
|
40
|
+
@include hover-color-classes($product_colors);
|
|
41
|
+
@include hover-color-classes($status_colors);
|
|
42
|
+
@include hover-color-classes($data_colors);
|
|
43
|
+
@include hover-color-classes($shadow_colors);
|
|
44
|
+
@include hover-color-classes($colors);
|
|
45
|
+
@include hover-color-classes($interface_colors);
|
|
46
|
+
@include hover-color-classes($main_colors);
|
|
47
|
+
@include hover-color-classes($background_colors);
|
|
48
|
+
@include hover-color-classes($card_colors);
|
|
49
|
+
@include hover-color-classes($active_colors);
|
|
50
|
+
@include hover-color-classes($action_colors);
|
|
51
|
+
@include hover-color-classes($hover_colors);
|
|
52
|
+
@include hover-color-classes($border_colors);
|
|
53
|
+
@include hover-color-classes($text_colors);
|
|
54
|
+
@include hover-color-classes($category_colors);
|
|
@@ -66,6 +66,10 @@ type Hover = Shadow & {
|
|
|
66
66
|
scale?: "sm" | "md" | "lg"
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
type GroupHover = {
|
|
70
|
+
groupHover?: boolean,
|
|
71
|
+
}
|
|
72
|
+
|
|
69
73
|
type JustifyContent = {
|
|
70
74
|
justifyContent?: Alignment & Space
|
|
71
75
|
}
|
|
@@ -175,7 +179,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
|
|
|
175
179
|
BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
|
|
176
180
|
FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
|
|
177
181
|
LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
|
|
178
|
-
Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
|
|
182
|
+
Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & GroupHover & { hover?: string } & Top & Right & Bottom & Left;
|
|
179
183
|
|
|
180
184
|
const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
|
|
181
185
|
const keys: string[] = Object.keys(prop)
|
|
@@ -209,6 +213,7 @@ const filterClassName = (value: string): string => {
|
|
|
209
213
|
// Prop categories
|
|
210
214
|
const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
|
|
211
215
|
|
|
216
|
+
groupHoverProps: ({ groupHover }: GroupHover ) => groupHover ? 'group_hover ' : '',
|
|
212
217
|
hoverProps: ({ hover }: { hover?: Hover }) => {
|
|
213
218
|
let css = '';
|
|
214
219
|
if (!hover) return css;
|