playbook_ui 13.32.0.pre.alpha.PLAY14143255 → 13.32.0.pre.alpha.PLAY14143260
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/_playbook.scss +123 -0
- data/app/pb_kits/playbook/_reset.scss +42 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +3 -3
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +0 -2
- data/app/pb_kits/playbook/pb_badge/_badge.scss +2 -2
- data/app/pb_kits/playbook/pb_body/_body.scss +1 -1
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx +0 -2
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +1 -1
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx +0 -2
- data/app/pb_kits/playbook/pb_card/_card.scss +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +3 -3
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +1 -1
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +2 -4
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +4 -4
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss +4 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx +0 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +0 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +0 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +0 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +0 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +0 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx +0 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +0 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +5 -5
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +0 -1
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +2 -2
- data/app/pb_kits/playbook/pb_label_value/_label_value.scss +1 -1
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx +0 -2
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +0 -2
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +0 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +0 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +0 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +0 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +0 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +0 -1
- data/app/pb_kits/playbook/pb_message/_message.tsx +0 -2
- data/app/pb_kits/playbook/pb_message/_message_mixins.scss +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +0 -2
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss +3 -3
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +0 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +2 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +0 -1
- data/app/pb_kits/playbook/pb_pill/_pill.scss +2 -2
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +2 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +2 -2
- data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +0 -2
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +0 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +1 -1
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +4 -4
- data/app/pb_kits/playbook/pb_timeline/_timeline.scss +2 -2
- data/app/pb_kits/playbook/pb_title_count/_title_count.tsx +0 -1
- data/app/pb_kits/playbook/pb_toggle/_toggle.scss +5 -5
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx +0 -2
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx +0 -2
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +0 -2
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +0 -2
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx +0 -2
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +0 -2
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +0 -2
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +0 -2
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +0 -2
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +0 -2
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -2
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +2 -3
- data/app/pb_kits/playbook/tokens/exports/_colors.module.scss +1 -1
- data/app/pb_kits/playbook/utilities/_hover.scss +4 -4
- data/dist/playbook.css +1291 -0
- data/lib/playbook/version.rb +1 -1
- metadata +4 -2
@@ -21,7 +21,7 @@ $pb_progress_simple_height: 4px;
|
|
21
21
|
[class^=pb_progress_simple_kit] {
|
22
22
|
width: 100%;
|
23
23
|
height: $pb_progress_simple_height;
|
24
|
-
border-radius: $pb_progress_simple_height/2;
|
24
|
+
border-radius: calc($pb_progress_simple_height/2);
|
25
25
|
background: rgba($primary, $opacity-1);
|
26
26
|
&[class*=_positive] {
|
27
27
|
.progress_simple_value {
|
@@ -42,7 +42,7 @@ $pb_progress_simple_height: 4px;
|
|
42
42
|
[class^=progress_simple_value] {
|
43
43
|
width: 0%;
|
44
44
|
height: 100%;
|
45
|
-
border-radius: $pb_progress_simple_height/2;
|
45
|
+
border-radius: calc($pb_progress_simple_height/2);
|
46
46
|
background: $primary;
|
47
47
|
}
|
48
48
|
|
@@ -106,7 +106,7 @@
|
|
106
106
|
.trix-button--icon {
|
107
107
|
height: $space_lg;
|
108
108
|
width: $space_lg;
|
109
|
-
margin: $space_xs / 2;
|
109
|
+
margin: calc($space_xs / 2);
|
110
110
|
border-radius: $border_rad_heavier;
|
111
111
|
&::before {
|
112
112
|
background-size: auto;
|
@@ -116,7 +116,7 @@
|
|
116
116
|
background: $white;
|
117
117
|
border: 1px solid #E4E8F0;
|
118
118
|
border-bottom: none;
|
119
|
-
padding: $space_xs / 2;
|
119
|
+
padding: calc($space_xs / 2);
|
120
120
|
border-top-left-radius: $border_rad_heavier;
|
121
121
|
border-top-right-radius: $border_rad_heavier;
|
122
122
|
.trix-button-group {
|
@@ -28,7 +28,7 @@ $pb_selectable_card_border: 2px;
|
|
28
28
|
padding: $space_sm;
|
29
29
|
margin-bottom: $space_sm;
|
30
30
|
cursor: pointer;
|
31
|
-
outline: 1px solid transparent;
|
31
|
+
outline: 1px solid transparent;
|
32
32
|
|
33
33
|
@media (hover:hover) {
|
34
34
|
&:hover {
|
@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
|
|
43
43
|
align-items: center;
|
44
44
|
height: $pb_selectable_card_indicator_size;
|
45
45
|
width: $pb_selectable_card_indicator_size;
|
46
|
-
border-radius: ($pb_selectable_card_indicator_size/2) + ($pb_selectable_card_border/2);
|
46
|
+
border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
|
47
47
|
border-width: $pb_selectable_card_border;
|
48
48
|
border-style: solid;
|
49
49
|
border-color: $white;
|
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
|
|
52
52
|
font-size: $font_smaller;
|
53
53
|
text-align: center;
|
54
54
|
position: absolute;
|
55
|
-
top: -($pb_selectable_card_indicator_size/2);
|
56
|
-
right: -($pb_selectable_card_indicator_size/2);
|
55
|
+
top: -(calc($pb_selectable_card_indicator_size/2));
|
56
|
+
right: -(calc($pb_selectable_card_indicator_size/2));
|
57
57
|
opacity: 0;
|
58
58
|
}
|
59
59
|
}
|
@@ -22,14 +22,14 @@
|
|
22
22
|
display: flex;
|
23
23
|
align-items: center;
|
24
24
|
[class*=pb_time_range_inline_arrow] {
|
25
|
-
margin-left: $space_xs/2;
|
26
|
-
margin-right: $space_xs/2;
|
25
|
+
margin-left: calc($space_xs/2);
|
26
|
+
margin-right: calc($space_xs/2);
|
27
27
|
}
|
28
28
|
[class*=pb_time_range_inline_timezone] {
|
29
|
-
margin-left: $space_xs/2;
|
29
|
+
margin-left: calc($space_xs/2);
|
30
30
|
}
|
31
31
|
[class*=pb_time_range_inline_icon] {
|
32
|
-
margin-right: $space_xs/2;
|
32
|
+
margin-right: calc($space_xs/2);
|
33
33
|
}
|
34
34
|
}
|
35
35
|
}
|
@@ -4,9 +4,9 @@
|
|
4
4
|
@import "../tokens/typography";
|
5
5
|
|
6
6
|
$connector_width: 2px;
|
7
|
-
$icon_margin: $space_xs/2;
|
7
|
+
$icon_margin: calc($space_xs/2);
|
8
8
|
$icon_height: 28px;
|
9
|
-
$height_from_top: $icon_height/2 - $connector_width/2;
|
9
|
+
$height_from_top: calc($icon_height/2) - calc($connector_width/2);
|
10
10
|
|
11
11
|
@mixin pb_timeline_line_solid($width, $height, $margin) {
|
12
12
|
width: $width;
|
@@ -8,7 +8,7 @@ $transition: .2s ease-in-out;
|
|
8
8
|
[class^=pb_toggle_kit] {
|
9
9
|
position: relative;
|
10
10
|
$width: 44px;
|
11
|
-
$height: $width / 2;
|
11
|
+
$height: calc($width / 2);
|
12
12
|
$border_success: 3px solid $color_checkbox_success;
|
13
13
|
$border_default: 3px solid $color_checkbox_default;
|
14
14
|
|
@@ -27,7 +27,7 @@ $transition: .2s ease-in-out;
|
|
27
27
|
&:after {
|
28
28
|
transition: $transition;
|
29
29
|
content: "";
|
30
|
-
width: $width / 2 - 4px;
|
30
|
+
width: calc($width / 2) - 4px;
|
31
31
|
height: $height - 4px;
|
32
32
|
background-color: $color_checkbox_default;
|
33
33
|
border-radius: 50%;
|
@@ -50,7 +50,7 @@ $transition: .2s ease-in-out;
|
|
50
50
|
|
51
51
|
&:disabled + .pb_toggle_control {
|
52
52
|
cursor: not-allowed;
|
53
|
-
opacity: 0.5;
|
53
|
+
opacity: 0.5;
|
54
54
|
border: 3px solid $border_light;
|
55
55
|
background-color: $border_light;
|
56
56
|
|
@@ -68,14 +68,14 @@ $transition: .2s ease-in-out;
|
|
68
68
|
background-color: $color_checkbox_success;
|
69
69
|
|
70
70
|
&:after {
|
71
|
-
left: $width / 2 + 2px;
|
71
|
+
left: calc($width / 2) + 2px;
|
72
72
|
background-color: $white;
|
73
73
|
}
|
74
74
|
}
|
75
75
|
|
76
76
|
&:disabled + .pb_toggle_control {
|
77
77
|
cursor: not-allowed;
|
78
|
-
opacity: 0.5;
|
78
|
+
opacity: 0.5;
|
79
79
|
border: 3px solid $text_lt_light;
|
80
80
|
background-color: $text_lt_light;
|
81
81
|
|
@@ -1,5 +1,3 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
import { globalProps } from '../utilities/globalProps'
|
@@ -8,13 +6,14 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
|
|
8
6
|
import Caption from '../pb_caption/_caption'
|
9
7
|
import Title from '../pb_title/_title'
|
10
8
|
import DateTime from '../pb_kit/dateTime';
|
9
|
+
import { GenericObject } from '../types'
|
11
10
|
|
12
11
|
type WeekdayStackedProps = {
|
13
12
|
align?: "left" | "center" | "right",
|
14
13
|
aria?: {[key:string]:string },
|
15
14
|
className?: string,
|
16
15
|
dark?: boolean,
|
17
|
-
data?:
|
16
|
+
data?: GenericObject,
|
18
17
|
date: Date,
|
19
18
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
20
19
|
id?: string,
|
@@ -2,11 +2,11 @@
|
|
2
2
|
|
3
3
|
@mixin hover-color-classes($colors-list) {
|
4
4
|
@each $name, $color in $colors-list {
|
5
|
-
.hover_background_#{$name}:hover {
|
5
|
+
.hover_background_#{"" + $name}:hover {
|
6
6
|
background-color: $color !important;
|
7
7
|
transition: background-color $transition-speed ease;
|
8
8
|
}
|
9
|
-
.hover_color_#{$name}:hover {
|
9
|
+
.hover_color_#{"" + $name}:hover {
|
10
10
|
color: $color !important;
|
11
11
|
transition: color $transition-speed ease;
|
12
12
|
}
|
@@ -15,7 +15,7 @@
|
|
15
15
|
|
16
16
|
@mixin hover-shadow-classes($shadows-list) {
|
17
17
|
@each $name, $shadow in $shadows-list {
|
18
|
-
.hover_#{$name}:hover {
|
18
|
+
.hover_#{"" + $name}:hover {
|
19
19
|
box-shadow: $shadow;
|
20
20
|
transition: box-shadow $transition-speed ease;
|
21
21
|
}
|
@@ -24,7 +24,7 @@
|
|
24
24
|
|
25
25
|
@mixin hover-scale-classes($scales-list) {
|
26
26
|
@each $name, $scale in $scales-list {
|
27
|
-
.hover_#{$name}:hover {
|
27
|
+
.hover_#{"" + $name}:hover {
|
28
28
|
transform: $scale;
|
29
29
|
transition: transform $transition-speed ease;
|
30
30
|
}
|