playbook_ui 7.0.0.pre.alpha7 → 7.0.0.pre.alpha8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_body/_body.jsx +1 -1
- data/app/pb_kits/playbook/pb_body/_body.scss +17 -1
- data/app/pb_kits/playbook/pb_body/body.rb +1 -1
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +31 -17
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +16 -8
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +12 -6
- data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx +2 -2
- data/app/pb_kits/playbook/pb_date/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_date/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +1 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +5 -2
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb +3 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +7 -5
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +6 -4
- data/app/pb_kits/playbook/pb_nav/_nav.jsx +7 -2
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +18 -14
- data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +9 -4
- data/app/pb_kits/playbook/pb_select/_select.scss +8 -4
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +6 -3
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx +9 -5
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx +9 -5
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss +35 -37
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +15 -12
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +6 -4
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +6 -4
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +4 -2
- data/lib/playbook/version.rb +1 -1
- metadata +1 -2
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +0 -18
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 014be67c9a3cda383a8ea03290e28850b47c64421d34c0dfc361490b151d5afc
|
|
4
|
+
data.tar.gz: b0c744a3b5926836460fe2c157af3bf2d5f9df38448b78fabcce12c3eaf759ab
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f968ccae11009a367fddb1fd9eaadabdce5611f08064f51c95ce2327525a69616164b10a416e91c234dd1fb70ae77ed91ce9643baa619c0770f4f108a6ca8e35
|
|
7
|
+
data.tar.gz: 78dba4411bbad8612dd3aeb5e7a4fd9beed4f839221bc4e0528a38973b46d1fdeb133527d5d1a54878fd1080480fffcddec0d4d389a511bf5adb27bb6e32691e
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@import "./body_mixins";
|
|
2
2
|
|
|
3
3
|
[class^=pb_body_kit]{
|
|
4
|
+
@include pb_body($text_lt_default);
|
|
4
5
|
@each $color_name, $color_value in $pb_body_colors {
|
|
5
6
|
&[class*=_#{$color_name}] {
|
|
6
7
|
@include pb_body($color_value);
|
|
@@ -19,8 +20,23 @@
|
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
@each $status_name, $status_value in $pb_body_status {
|
|
22
|
-
&[class
|
|
23
|
+
&[class*=#{$status_name}] {
|
|
23
24
|
@include pb_body($status_value);
|
|
24
25
|
}
|
|
25
26
|
}
|
|
27
|
+
|
|
28
|
+
&[class*=dark] {
|
|
29
|
+
@include pb_body_dark();
|
|
30
|
+
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
|
|
31
|
+
&[class*=_#{$dark_color_name}][class*=dark]{
|
|
32
|
+
@include pb_body($dark_color_value);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
@each $status_name, $status_value in $pb_body_status {
|
|
36
|
+
&[class*=_#{$status_name}] {
|
|
37
|
+
@include pb_body($status_value);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
26
42
|
}
|
|
@@ -10,7 +10,8 @@ $pb_button_size: 40px;
|
|
|
10
10
|
$pb_button_v_padding: 7px;
|
|
11
11
|
$pb_button_h_padding: 34px;
|
|
12
12
|
$pb_button_hover_darken: 4%;
|
|
13
|
-
$pb_button_border_width:
|
|
13
|
+
$pb_button_border_width: 0px;
|
|
14
|
+
|
|
14
15
|
|
|
15
16
|
@mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
|
|
16
17
|
text-rendering: optimizeLegibility;
|
|
@@ -47,16 +48,17 @@ $pb_button_border_width: 1px;
|
|
|
47
48
|
visibility: visible;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
&:hover {
|
|
51
|
+
&:hover, &:focus {
|
|
51
52
|
outline: none;
|
|
53
|
+
|
|
52
54
|
}
|
|
53
55
|
|
|
54
|
-
&:active
|
|
55
|
-
&:focus {
|
|
56
|
+
&:active {
|
|
56
57
|
outline: none;
|
|
57
58
|
border-width: $pb_button_border_width;
|
|
58
59
|
border-color: darken($bg, $pb_button_hover_darken);
|
|
59
60
|
}
|
|
61
|
+
|
|
60
62
|
};
|
|
61
63
|
|
|
62
64
|
@mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
|
|
@@ -67,8 +69,10 @@ $pb_button_border_width: 1px;
|
|
|
67
69
|
@mixin pb_button_primary {
|
|
68
70
|
@include pb_button;
|
|
69
71
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
+
@media (hover:hover) {
|
|
73
|
+
&:hover {
|
|
74
|
+
@include pb_button_hover;
|
|
75
|
+
}
|
|
72
76
|
}
|
|
73
77
|
}
|
|
74
78
|
|
|
@@ -76,17 +80,21 @@ $pb_button_border_width: 1px;
|
|
|
76
80
|
@mixin pb_button_secondary {
|
|
77
81
|
@include pb_button(rgba($primary_action, 0.05), $primary_action);
|
|
78
82
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
83
|
+
@media (hover:hover) {
|
|
84
|
+
&:hover {
|
|
85
|
+
@include pb_button_hover(rgba($primary_action, $opacity_3));
|
|
86
|
+
}
|
|
87
|
+
}
|
|
82
88
|
}
|
|
83
89
|
|
|
84
90
|
// Link =========================
|
|
85
91
|
@mixin pb_button_link {
|
|
86
92
|
@include pb_button($transparent, $primary_action);
|
|
87
93
|
|
|
88
|
-
|
|
89
|
-
|
|
94
|
+
@media (hover:hover) {
|
|
95
|
+
&:hover {
|
|
96
|
+
@include pb_button_hover($transparent);
|
|
97
|
+
}
|
|
90
98
|
}
|
|
91
99
|
}
|
|
92
100
|
|
|
@@ -120,8 +128,10 @@ $pb_button_border_width: 1px;
|
|
|
120
128
|
@mixin pb_button_primary_dark{
|
|
121
129
|
@include pb_button($primary_action);
|
|
122
130
|
|
|
123
|
-
|
|
124
|
-
|
|
131
|
+
@media (hover:hover) {
|
|
132
|
+
&:hover {
|
|
133
|
+
@include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
|
|
134
|
+
}
|
|
125
135
|
}
|
|
126
136
|
}
|
|
127
137
|
|
|
@@ -129,8 +139,10 @@ $pb_button_border_width: 1px;
|
|
|
129
139
|
@mixin pb_button_secondary_dark{
|
|
130
140
|
@include pb_button(rgba($white, 0.2), $white);
|
|
131
141
|
|
|
132
|
-
|
|
133
|
-
|
|
142
|
+
@media (hover:hover) {
|
|
143
|
+
&:hover {
|
|
144
|
+
@include pb_button_hover(rgba($primary_action, $opacity_2));
|
|
145
|
+
}
|
|
134
146
|
}
|
|
135
147
|
}
|
|
136
148
|
|
|
@@ -138,8 +150,10 @@ $pb_button_border_width: 1px;
|
|
|
138
150
|
@mixin pb_button_link_dark {
|
|
139
151
|
@include pb_button($transparent, $primary_action);
|
|
140
152
|
|
|
141
|
-
|
|
142
|
-
|
|
153
|
+
@media (hover:hover) {
|
|
154
|
+
&:hover {
|
|
155
|
+
@include pb_button_hover($transparent);
|
|
156
|
+
}
|
|
143
157
|
}
|
|
144
158
|
}
|
|
145
159
|
|
|
@@ -13,13 +13,17 @@
|
|
|
13
13
|
& > [class^=pb_button] {
|
|
14
14
|
margin-right: $space-xs;
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
@media (hover:hover) {
|
|
17
|
+
&:hover {
|
|
18
|
+
background-color:darken($royal, 20%);
|
|
19
|
+
}
|
|
18
20
|
}
|
|
19
21
|
|
|
20
22
|
&[class*=secondary] {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
@media (hover:hover) {
|
|
24
|
+
&:hover {
|
|
25
|
+
background-color:rgba($primary_action, $opacity_3)
|
|
26
|
+
}
|
|
23
27
|
}
|
|
24
28
|
}
|
|
25
29
|
|
|
@@ -42,13 +46,17 @@
|
|
|
42
46
|
width: 100%;
|
|
43
47
|
margin-bottom: $space-xs;
|
|
44
48
|
|
|
45
|
-
|
|
46
|
-
|
|
49
|
+
@media (hover:hover) {
|
|
50
|
+
&:hover {
|
|
51
|
+
background-color:darken($royal, 20%);
|
|
52
|
+
}
|
|
47
53
|
}
|
|
48
54
|
|
|
49
55
|
&[class*=secondary] {
|
|
50
|
-
|
|
51
|
-
|
|
56
|
+
@media (hover:hover) {
|
|
57
|
+
&:hover {
|
|
58
|
+
background-color:rgba($primary_action, $opacity_3)
|
|
59
|
+
}
|
|
52
60
|
}
|
|
53
61
|
}
|
|
54
62
|
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
@import "../tokens/colors";
|
|
2
|
+
@import "../tokens/transition";
|
|
2
3
|
$transition: $transition_cubic;
|
|
3
4
|
|
|
4
5
|
[class^=pb_checkbox_kit] {
|
|
5
6
|
display: inline-flex;
|
|
7
|
+
cursor: pointer;
|
|
6
8
|
.pb_checkbox_label {
|
|
7
9
|
padding-left: $space_xs;
|
|
8
10
|
cursor: pointer;
|
|
@@ -15,7 +17,8 @@ $transition: $transition_cubic;
|
|
|
15
17
|
width: 22px;
|
|
16
18
|
border: solid $border_light 2px;
|
|
17
19
|
border-radius: $border_rad_light;
|
|
18
|
-
|
|
20
|
+
transition: background $transition_default ease, border-color $transition_default ease;
|
|
21
|
+
.check_icon {
|
|
19
22
|
opacity: 0;
|
|
20
23
|
position: relative;
|
|
21
24
|
top: -2px;
|
|
@@ -26,9 +29,10 @@ $transition: $transition_cubic;
|
|
|
26
29
|
|
|
27
30
|
}
|
|
28
31
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
+
@media (hover:hover) {
|
|
33
|
+
&:hover input ~ .pb_checkbox_checkmark {
|
|
34
|
+
border-color: $primary_action;
|
|
35
|
+
}
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
input {
|
|
@@ -58,8 +62,10 @@ $transition: $transition_cubic;
|
|
|
58
62
|
border-color: $primary_action;
|
|
59
63
|
}
|
|
60
64
|
|
|
61
|
-
|
|
62
|
-
|
|
65
|
+
@media (hover:hover) {
|
|
66
|
+
&:hover .pb_checkbox_checkmark {
|
|
67
|
+
border-color: $primary_action;
|
|
68
|
+
}
|
|
63
69
|
}
|
|
64
70
|
|
|
65
71
|
&.error {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { Date as FormattedDate } from '../..'
|
|
3
3
|
|
|
4
|
-
const
|
|
4
|
+
const DateDefaultReact = () => {
|
|
5
5
|
return (
|
|
6
6
|
<div>
|
|
7
7
|
<FormattedDate
|
|
@@ -17,4 +17,4 @@ const DateDefault = () => {
|
|
|
17
17
|
)
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
export default
|
|
20
|
+
export default DateDefaultReact
|
|
@@ -3,12 +3,11 @@ examples:
|
|
|
3
3
|
rails:
|
|
4
4
|
- date_default: Default
|
|
5
5
|
- date_timezone: Timezones
|
|
6
|
-
|
|
7
6
|
- date_variants: Variants
|
|
8
7
|
- date_alignment: Alignment
|
|
9
8
|
|
|
10
9
|
react:
|
|
11
|
-
-
|
|
10
|
+
- date_default_react: Default
|
|
12
11
|
- date_variants: Variants
|
|
13
12
|
- date_alignment: Alignment
|
|
14
13
|
|
|
@@ -33,7 +33,7 @@ const FileUpload = (props: FileUploadProps) => {
|
|
|
33
33
|
|
|
34
34
|
return (
|
|
35
35
|
<div
|
|
36
|
-
className={classnames(buildCss('pb_file_upload_kit'
|
|
36
|
+
className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
|
|
37
37
|
{...getRootProps()}
|
|
38
38
|
>
|
|
39
39
|
<Card>
|
|
@@ -18,13 +18,16 @@ $form_pill_colors: (
|
|
|
18
18
|
padding: 0 $space-sm/3;
|
|
19
19
|
height: $pb_form_pill_height;
|
|
20
20
|
border-radius: $pb_form_pill_height/2;
|
|
21
|
+
cursor: pointer;
|
|
21
22
|
@each $color_name, $color_value in $form_pill_colors {
|
|
22
23
|
&[class*=_#{$color_name}] {
|
|
23
24
|
background-color: rgba($color_value, $opacity-1);
|
|
24
25
|
transition: background-color 0.2s ease;
|
|
25
26
|
box-shadow: none;
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
@media (hover:hover) {
|
|
28
|
+
&:hover {
|
|
29
|
+
background-color: rgba($color_value, $opacity-2);
|
|
30
|
+
}
|
|
28
31
|
}
|
|
29
32
|
#{$selector}_text {
|
|
30
33
|
color: $color_value;
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { Icon } from '../../'
|
|
2
|
+
import { Body, Icon } from '../../'
|
|
3
3
|
|
|
4
4
|
const IconDefaultDark = () => {
|
|
5
5
|
return (
|
|
6
6
|
<div>
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
<Body dark>
|
|
8
|
+
<Icon
|
|
9
|
+
fixedWidth
|
|
10
|
+
icon="user"
|
|
11
|
+
/>
|
|
12
|
+
</Body>
|
|
11
13
|
</div>
|
|
12
14
|
)
|
|
13
15
|
}
|
|
@@ -45,11 +45,13 @@ $selector: ".pb_nav_list";
|
|
|
45
45
|
color: $text_lt_default;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
#{$selector}_item_icon,
|
|
51
|
-
#{$selector}_item_text {
|
|
48
|
+
@media (hover:hover) {
|
|
49
|
+
&:hover {
|
|
52
50
|
color: $primary;
|
|
51
|
+
#{$selector}_item_icon,
|
|
52
|
+
#{$selector}_item_text {
|
|
53
|
+
color: $primary;
|
|
54
|
+
}
|
|
53
55
|
}
|
|
54
56
|
}
|
|
55
57
|
}
|
|
@@ -36,8 +36,13 @@ const Nav = (props: NavProps) => {
|
|
|
36
36
|
|
|
37
37
|
const ariaProps = buildAriaProps(aria)
|
|
38
38
|
const dataProps = buildDataProps(data)
|
|
39
|
-
const cardCss = classnames(
|
|
40
|
-
|
|
39
|
+
const cardCss = classnames(
|
|
40
|
+
buildCss('pb_nav_list', variant, orientation, {
|
|
41
|
+
highlight: highlight,
|
|
42
|
+
}),
|
|
43
|
+
className,
|
|
44
|
+
globalProps(props)
|
|
45
|
+
)
|
|
41
46
|
|
|
42
47
|
return (
|
|
43
48
|
<div
|
|
@@ -46,13 +46,15 @@ $selector: ".pb_nav_list";
|
|
|
46
46
|
transition-property: color, border-color, background-color;
|
|
47
47
|
transition-duration: 0.15s;
|
|
48
48
|
transition-timing-function: $bezier;
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
49
|
+
@media (hover:hover) {
|
|
50
|
+
&:hover {
|
|
51
|
+
background-color: rgba($primary, 0.03);
|
|
52
|
+
[class*=_icon] {
|
|
53
|
+
color: $primary;
|
|
54
|
+
}
|
|
55
|
+
[class*=_text] {
|
|
56
|
+
color: $primary;
|
|
57
|
+
}
|
|
56
58
|
}
|
|
57
59
|
}
|
|
58
60
|
[class*=_icon_left] {
|
|
@@ -110,13 +112,15 @@ $selector: ".pb_nav_list";
|
|
|
110
112
|
flex: 1;
|
|
111
113
|
font-weight: $regular;
|
|
112
114
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
115
|
+
@media (hover:hover) {
|
|
116
|
+
&:hover {
|
|
117
|
+
background-color: rgba($primary, 0.03);
|
|
118
|
+
[class*=_icon] {
|
|
119
|
+
color: $primary;
|
|
120
|
+
}
|
|
121
|
+
[class*=_text] {
|
|
122
|
+
color: $primary;
|
|
123
|
+
}
|
|
120
124
|
}
|
|
121
125
|
}
|
|
122
126
|
}
|
|
@@ -5,7 +5,6 @@ const PersonContactWithWrongNumbers = () => {
|
|
|
5
5
|
return (
|
|
6
6
|
<>
|
|
7
7
|
<PersonContact
|
|
8
|
-
key="person-contact-1"
|
|
9
8
|
contacts={[
|
|
10
9
|
{
|
|
11
10
|
contactType: 'email',
|
|
@@ -24,6 +23,7 @@ const PersonContactWithWrongNumbers = () => {
|
|
|
24
23
|
},
|
|
25
24
|
]}
|
|
26
25
|
firstName="Pauline"
|
|
26
|
+
key="person-contact-1"
|
|
27
27
|
lastName="Smith"
|
|
28
28
|
/>
|
|
29
29
|
</>
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
[class^=pb_radio_kit] {
|
|
7
7
|
display: inline-flex;
|
|
8
|
+
cursor: pointer;
|
|
8
9
|
|
|
9
10
|
.pb_radio_button {
|
|
10
11
|
width: 22px;
|
|
@@ -18,8 +19,10 @@
|
|
|
18
19
|
transition-timing-function: $easeIn;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
@media (hover:hover) {
|
|
23
|
+
&:hover .pb_radio_button {
|
|
24
|
+
border-color: $primary_action;
|
|
25
|
+
}
|
|
23
26
|
}
|
|
24
27
|
|
|
25
28
|
input {
|
|
@@ -37,8 +40,10 @@
|
|
|
37
40
|
border: 6px solid $primary;
|
|
38
41
|
}
|
|
39
42
|
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
@media (hover:hover) {
|
|
44
|
+
&:hover .pb_radio_button {
|
|
45
|
+
border-color: $primary_action;
|
|
46
|
+
}
|
|
42
47
|
}
|
|
43
48
|
&.error {
|
|
44
49
|
> .pb_radio_button {
|
|
@@ -12,8 +12,10 @@
|
|
|
12
12
|
cursor: pointer;
|
|
13
13
|
box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
|
|
14
14
|
padding-right: $space_lg;
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
@media (hover:hover) {
|
|
16
|
+
&:hover, &:active, &:focus {
|
|
17
|
+
background-color: $focus_input_light;
|
|
18
|
+
}
|
|
17
19
|
}
|
|
18
20
|
&:disabled ~ .pb_select_kit_caret {
|
|
19
21
|
opacity: 0.5;
|
|
@@ -60,8 +62,10 @@
|
|
|
60
62
|
@include pb_title_dark;
|
|
61
63
|
background: $focus_input_dark;
|
|
62
64
|
box-shadow: inset 0 -11px 20px rgba($white, 0.05);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
+
@media (hover:hover) {
|
|
66
|
+
&:hover, &:active, &:focus {
|
|
67
|
+
background-color: tint($focus_input_dark, 5%);
|
|
68
|
+
}
|
|
65
69
|
}
|
|
66
70
|
text-shadow: 0 0 0 $text_dk_default;
|
|
67
71
|
}
|
|
@@ -18,9 +18,11 @@ $pb_selectable_card_border: 2px;
|
|
|
18
18
|
padding: $space_sm + 1;
|
|
19
19
|
cursor: pointer;
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
@media (hover:hover) {
|
|
22
|
+
&:hover {
|
|
23
|
+
box-shadow: $shadow-deep;
|
|
24
|
+
border-color: $slate;
|
|
25
|
+
}
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
.pb_selectable_card_circle {
|
|
@@ -66,6 +68,7 @@ $pb_selectable_card_border: 2px;
|
|
|
66
68
|
}
|
|
67
69
|
|
|
68
70
|
&.dark {
|
|
71
|
+
color: $white;
|
|
69
72
|
label {
|
|
70
73
|
@include pb_card_dark;
|
|
71
74
|
background: transparent;
|
|
@@ -51,11 +51,15 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
|
|
|
51
51
|
const ariaProps = buildAriaProps(aria)
|
|
52
52
|
const dataProps = buildDataProps(data)
|
|
53
53
|
|
|
54
|
-
const classes = classnames(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
const classes = classnames(
|
|
55
|
+
buildCss('pb_selectable_card_icon_kit', {
|
|
56
|
+
checked: checked,
|
|
57
|
+
disabled: disabled,
|
|
58
|
+
enabled: !disabled,
|
|
59
|
+
}),
|
|
60
|
+
globalProps(props),
|
|
61
|
+
className
|
|
62
|
+
)
|
|
59
63
|
|
|
60
64
|
return (
|
|
61
65
|
<div
|
|
@@ -45,11 +45,15 @@ const SelectableIcon = ({
|
|
|
45
45
|
const ariaProps = buildAriaProps(aria)
|
|
46
46
|
const dataProps = buildDataProps(data)
|
|
47
47
|
|
|
48
|
-
const classes = classnames(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
const classes = classnames(
|
|
49
|
+
buildCss('pb_selectable_icon_kit', {
|
|
50
|
+
checked: checked,
|
|
51
|
+
disabled: disabled,
|
|
52
|
+
enabled: !disabled,
|
|
53
|
+
}),
|
|
54
|
+
globalProps(props),
|
|
55
|
+
className
|
|
56
|
+
)
|
|
53
57
|
|
|
54
58
|
const inputType = multi === false ? 'radio' : 'checkbox'
|
|
55
59
|
|
|
@@ -1,82 +1,80 @@
|
|
|
1
|
+
@import "../tokens/transition";
|
|
2
|
+
|
|
1
3
|
[class^=pb_selectable_icon] {
|
|
2
4
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
+
text-align: center;
|
|
6
|
+
cursor: pointer;
|
|
7
|
+
transition: all $transition_short ease;
|
|
8
|
+
@media (hover:hover) {
|
|
9
|
+
&:hover * {
|
|
10
|
+
transition: all $transition_short ease;
|
|
11
|
+
transform: translateY(-2px);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
5
14
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
transition-timing-function: $easeIn;
|
|
10
|
-
}
|
|
15
|
+
* {
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
}
|
|
11
18
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
19
|
+
h4 {
|
|
20
|
+
margin-top: $space_xs !important;
|
|
21
|
+
user-select: none;
|
|
22
|
+
transition: color $transition_short ease;
|
|
23
|
+
}
|
|
15
24
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
25
|
+
label {
|
|
26
|
+
transition: color $transition_short ease;
|
|
27
|
+
}
|
|
20
28
|
|
|
21
|
-
|
|
29
|
+
&[class*=_disabled] {
|
|
22
30
|
opacity: $opacity_6;
|
|
23
31
|
cursor: not-allowed;
|
|
24
|
-
|
|
25
32
|
* {
|
|
26
|
-
|
|
33
|
+
cursor: not-allowed;
|
|
27
34
|
}
|
|
28
35
|
}
|
|
29
36
|
|
|
30
|
-
|
|
31
|
-
|
|
37
|
+
input[type="checkbox"],
|
|
38
|
+
input[type="radio"] {
|
|
32
39
|
-webkit-appearance: none;
|
|
33
40
|
-moz-appearance: none;
|
|
34
41
|
display: none;
|
|
35
42
|
appearance: none;
|
|
36
|
-
|
|
37
|
-
transition-property: color;
|
|
38
|
-
transition-duration: $transition_short;
|
|
43
|
+
transition: color $transition_short ease;
|
|
39
44
|
|
|
40
45
|
&:checked ~ label * {
|
|
41
|
-
transition
|
|
46
|
+
transition: color $transition_short ease;
|
|
42
47
|
color: $primary;
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
&:not(:checked) ~ label {
|
|
46
|
-
transition
|
|
51
|
+
transition: color $transition_short ease;
|
|
47
52
|
color: $slate;
|
|
48
53
|
|
|
49
|
-
h4 {
|
|
50
|
-
transition-delay: .15s;
|
|
51
|
-
}
|
|
52
54
|
}
|
|
53
55
|
}
|
|
54
56
|
|
|
55
57
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
+
&.dark {
|
|
58
59
|
input[type="checkbox"],
|
|
59
60
|
input[type="radio"] {
|
|
60
61
|
-webkit-appearance: none;
|
|
61
62
|
-moz-appearance: none;
|
|
62
63
|
display: none;
|
|
63
64
|
appearance: none;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
transition-duration: $transition_short;
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
transition: color $transition_short ease;
|
|
66
|
+
|
|
69
67
|
&:checked ~ label * {
|
|
70
|
-
transition
|
|
68
|
+
transition: color $transition_short ease;
|
|
71
69
|
color: $active_dark !important;
|
|
72
70
|
}
|
|
73
71
|
|
|
74
72
|
&:not(:checked) ~ label {
|
|
75
|
-
transition
|
|
73
|
+
transition: color $transition_short ease;
|
|
76
74
|
color: $text_dk_lighter;
|
|
77
75
|
|
|
78
76
|
h4 {
|
|
79
|
-
transition
|
|
77
|
+
transition: color $transition_short ease;
|
|
80
78
|
color: $text_dk_default;
|
|
81
79
|
}
|
|
82
80
|
}
|
|
@@ -19,14 +19,16 @@ $transition-speed: 0.2s;
|
|
|
19
19
|
transition: all $transition-speed ease;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
@media (hover:hover) {
|
|
23
|
+
&:hover {
|
|
24
|
+
box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
td {
|
|
27
|
+
background: $white;
|
|
28
|
+
border-color: darken($border_light, 10%);
|
|
29
|
+
border-top-width: 1px;
|
|
30
|
+
border-top-color: transparent;
|
|
31
|
+
}
|
|
30
32
|
}
|
|
31
33
|
}
|
|
32
34
|
}
|
|
@@ -38,11 +40,12 @@ $transition-speed: 0.2s;
|
|
|
38
40
|
border-top-color: $border_light;
|
|
39
41
|
border-top-width: 1px;
|
|
40
42
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
@media (hover:hover) {
|
|
44
|
+
&:hover {
|
|
45
|
+
td {
|
|
46
|
+
border-top-width: 1px;
|
|
47
|
+
border-top-color: $border_light;
|
|
48
|
+
}
|
|
46
49
|
}
|
|
47
50
|
}
|
|
48
51
|
}
|
|
@@ -42,10 +42,12 @@ $table-dark-card-bg: $bg_dark;
|
|
|
42
42
|
&:not(.no-hover) {
|
|
43
43
|
tbody {
|
|
44
44
|
tr {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
@media (hover:hover) {
|
|
46
|
+
&:hover {
|
|
47
|
+
td {
|
|
48
|
+
border-color: $border_dark !important;
|
|
49
|
+
background: $bg_dark;
|
|
50
|
+
}
|
|
49
51
|
}
|
|
50
52
|
}
|
|
51
53
|
}
|
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: 7.0.0.pre.
|
|
4
|
+
version: 7.0.0.pre.alpha8
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -686,7 +686,6 @@ files:
|
|
|
686
686
|
- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
|
|
687
687
|
- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
|
|
688
688
|
- app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
|
|
689
|
-
- app/pb_kits/playbook/pb_date/docs/_date_default.jsx
|
|
690
689
|
- app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx
|
|
691
690
|
- app/pb_kits/playbook/pb_date/docs/_date_default_react.md
|
|
692
691
|
- app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { Date as FormattedDate } from '../../'
|
|
3
|
-
|
|
4
|
-
const DateDefault = () => {
|
|
5
|
-
return (
|
|
6
|
-
<div>
|
|
7
|
-
<FormattedDate
|
|
8
|
-
date="2012-12-25"
|
|
9
|
-
/>
|
|
10
|
-
|
|
11
|
-
<FormattedDate
|
|
12
|
-
date={new Date()}
|
|
13
|
-
/>
|
|
14
|
-
</div>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export default DateDefault
|