playbook_ui 14.1.0.pre.alpha.fixaction3547 → 14.1.0.pre.alpha.pbntr373enablekitsforradio3593
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 +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_badge/_badge.scss +9 -0
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +8 -3
- data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +17 -11
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
- data/app/pb_kits/playbook/pb_button/_button.tsx +4 -1
- data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/button.rb +4 -0
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +3 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +20 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +43 -25
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +6 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -2
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +49 -13
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +164 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -7
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +10 -5
- data/app/pb_kits/playbook/pb_radio/_radio.scss +11 -11
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +100 -50
- data/app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx +51 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +132 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +50 -76
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_star_rating/index.js +78 -41
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +17 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +0 -2
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +0 -1
- data/app/pb_kits/playbook/pb_time/_time.tsx +12 -8
- data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
- data/app/pb_kits/playbook/pb_time/time.rb +4 -0
- data/app/pb_kits/playbook/tokens/_container.scss +21 -0
- data/app/pb_kits/playbook/utilities/_min_width.scss +45 -0
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +20 -3
- data/app/pb_kits/playbook/utilities/icons/allicons.tsx +59 -0
- data/app/pb_kits/playbook/utilities/icons/clock.svg +9 -0
- data/app/pb_kits/playbook/utilities/icons/spinner.svg +3 -0
- data/app/pb_kits/playbook/utilities/icons/times.svg +3 -0
- data/dist/chunks/_typeahead-CTLaD81v.js +22 -0
- data/dist/chunks/_weekday_stacked-U-4S3-tB.js +45 -0
- data/dist/chunks/{lib-BE0Z3F7x.js → lib-DErGXNy3.js} +2 -2
- data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-BC6kh7Hu.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +4 -0
- 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/classnames.rb +1 -0
- data/lib/playbook/spacing.rb +31 -2
- data/lib/playbook/version.rb +1 -1
- metadata +32 -9
- data/dist/chunks/_typeahead-D-4y9pbv.js +0 -22
- data/dist/chunks/_weekday_stacked-D5SswkOC.js +0 -45
- /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default.md → _pagination_default_rails.md} +0 -0
@@ -60,7 +60,6 @@ $flag-min-resolution: 192dpi;
|
|
60
60
|
}
|
61
61
|
|
62
62
|
.iti__flag {
|
63
|
-
background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
|
64
63
|
border-radius: 1px;
|
65
64
|
}
|
66
65
|
|
@@ -197,10 +196,4 @@ $flag-min-resolution: 192dpi;
|
|
197
196
|
}
|
198
197
|
}
|
199
198
|
}
|
200
|
-
|
201
|
-
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
|
202
|
-
.iti__flag {
|
203
|
-
background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
|
204
|
-
}
|
205
|
-
}
|
206
199
|
}
|
@@ -21,6 +21,8 @@ import classnames from "classnames";
|
|
21
21
|
import { globalProps, GlobalProps } from "../utilities/globalProps";
|
22
22
|
import { uniqueId } from 'lodash';
|
23
23
|
|
24
|
+
type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
|
25
|
+
|
24
26
|
type PbPopoverProps = {
|
25
27
|
aria?: { [key: string]: string };
|
26
28
|
className?: string;
|
@@ -32,7 +34,7 @@ type PbPopoverProps = {
|
|
32
34
|
reference: PopperReference & any;
|
33
35
|
show?: boolean;
|
34
36
|
shouldClosePopover?: (arg0: boolean) => void;
|
35
|
-
} &
|
37
|
+
} & ModifiedGlobalProps & Omit<PopperProps<any>, 'children'>
|
36
38
|
& { children?: React.ReactChild[] | React.ReactChild }
|
37
39
|
|
38
40
|
// Prop enabled default modifiers here
|
@@ -80,10 +82,13 @@ const Popover = (props: PbPopoverProps) => {
|
|
80
82
|
targetId,
|
81
83
|
} = props;
|
82
84
|
|
85
|
+
const items = globalProps(props).split(' ')
|
86
|
+
const filteredItems = items.filter(item => !item.includes('min_width'))
|
87
|
+
const filteredGlobalProps = filteredItems.join(' ')
|
83
88
|
const popoverSpacing =
|
84
|
-
|
89
|
+
filteredGlobalProps.includes("dark") || !filteredGlobalProps
|
85
90
|
? "p_sm"
|
86
|
-
:
|
91
|
+
: filteredGlobalProps
|
87
92
|
const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
|
88
93
|
const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
|
89
94
|
const widthHeightStyles = () => {
|
@@ -100,7 +105,7 @@ const Popover = (props: PbPopoverProps) => {
|
|
100
105
|
const htmlProps = buildHtmlProps(htmlOptions);
|
101
106
|
const classes = classnames(
|
102
107
|
buildCss("pb_popover_kit"),
|
103
|
-
|
108
|
+
filteredGlobalProps,
|
104
109
|
className
|
105
110
|
);
|
106
111
|
|
@@ -250,4 +255,4 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
|
|
250
255
|
);
|
251
256
|
};
|
252
257
|
|
253
|
-
export default PbReactPopover;
|
258
|
+
export default PbReactPopover;
|
@@ -8,17 +8,17 @@
|
|
8
8
|
display: inline-flex;
|
9
9
|
cursor: pointer;
|
10
10
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
11
|
+
.pb_radio_button{
|
12
|
+
width: 22px;
|
13
|
+
min-width: 22px;
|
14
|
+
height: 22px;
|
15
|
+
box-sizing: border-box;
|
16
|
+
border-radius: 1000px;
|
17
|
+
border: 2px solid $border_light;
|
18
|
+
margin-right: $space_xs;
|
19
|
+
transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
|
20
|
+
}
|
21
|
+
|
22
22
|
@media (hover:hover) {
|
23
23
|
&:hover .pb_radio_button {
|
24
24
|
background-color: $bg_light;
|
@@ -1,28 +1,27 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
import React, { forwardRef } from 'react'
|
1
|
+
import React, { forwardRef, isValidElement, useRef } from 'react'
|
4
2
|
import Body from '../pb_body/_body'
|
3
|
+
import Flex from '../pb_flex/_flex'
|
5
4
|
import classnames from 'classnames'
|
6
5
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
7
6
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
8
7
|
|
9
8
|
type RadioProps = {
|
10
|
-
aria?: {[key: string]: string},
|
9
|
+
aria?: { [key: string]: string },
|
11
10
|
alignment?: string,
|
12
11
|
checked?: boolean,
|
13
12
|
children?: React.ReactChild[] | React.ReactChild,
|
14
13
|
className?: string,
|
15
14
|
dark?: boolean,
|
16
|
-
data?: {[key: string]: string},
|
15
|
+
data?: { [key: string]: string },
|
17
16
|
disabled?: boolean,
|
18
17
|
error?: boolean,
|
19
|
-
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
18
|
+
htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
|
20
19
|
id?: string,
|
21
20
|
label: string,
|
22
21
|
name?: string,
|
23
22
|
value?: string,
|
24
23
|
text?: string,
|
25
|
-
onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
|
24
|
+
onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
|
26
25
|
} & GlobalProps
|
27
26
|
|
28
27
|
const Radio = ({
|
@@ -31,9 +30,9 @@ const Radio = ({
|
|
31
30
|
children,
|
32
31
|
className,
|
33
32
|
dark = false,
|
34
|
-
data = {},
|
35
33
|
disabled = false,
|
36
34
|
error = false,
|
35
|
+
data = {},
|
37
36
|
htmlOptions = {},
|
38
37
|
id,
|
39
38
|
label,
|
@@ -42,52 +41,103 @@ const Radio = ({
|
|
42
41
|
value = 'radio_text',
|
43
42
|
onChange = () => { void 0 },
|
44
43
|
...props
|
45
|
-
}: RadioProps
|
46
|
-
const
|
47
|
-
|
48
|
-
const
|
44
|
+
}: RadioProps ) => {
|
45
|
+
const radioRef = useRef(null);
|
46
|
+
|
47
|
+
const ariaProps = buildAriaProps(aria);
|
48
|
+
const dataProps = buildDataProps(data);
|
49
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
49
50
|
const classes = classnames(
|
50
|
-
buildCss('pb_radio_kit', alignment
|
51
|
-
dark ? 'dark'
|
51
|
+
buildCss('pb_radio_kit', alignment),
|
52
|
+
dark ? 'dark' : null,
|
53
|
+
error ? 'error' : null,
|
52
54
|
globalProps(props),
|
53
|
-
className
|
55
|
+
className
|
56
|
+
);
|
57
|
+
|
58
|
+
const classesCustom = classnames(
|
59
|
+
dark ? 'dark' : null,
|
60
|
+
error ? 'error' : null,
|
61
|
+
globalProps(props),
|
62
|
+
className
|
63
|
+
);
|
64
|
+
|
65
|
+
const isCustomChild = children && isValidElement(children) && children.type !== 'input';
|
54
66
|
|
55
67
|
const displayRadio = (props: RadioProps & any) => {
|
56
|
-
if (children)
|
57
|
-
return (children)
|
58
|
-
else
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
68
|
+
if (isValidElement(children) && children.type === 'input') {
|
69
|
+
return React.cloneElement(children, { ...props, ref: radioRef });
|
70
|
+
} else if (isCustomChild || !children) {
|
71
|
+
return (
|
72
|
+
<input
|
73
|
+
disabled={disabled}
|
74
|
+
id={id}
|
75
|
+
name={name}
|
76
|
+
onChange={onChange}
|
77
|
+
ref={radioRef}
|
78
|
+
text={text}
|
79
|
+
type="radio"
|
80
|
+
value={value}
|
81
|
+
{...props}
|
82
|
+
/>
|
83
|
+
);
|
84
|
+
}
|
85
|
+
};
|
86
|
+
|
87
|
+
const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
|
88
|
+
if (event) {
|
89
|
+
const target = event.target as HTMLElement;
|
90
|
+
if (
|
91
|
+
target.id === 'children-wrapper' ||
|
92
|
+
target.closest('#children-wrapper')
|
93
|
+
) {
|
94
|
+
radioRef.current?.click();
|
95
|
+
}
|
96
|
+
}
|
97
|
+
};
|
72
98
|
|
73
99
|
return (
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
}
|
100
|
+
isCustomChild ? (
|
101
|
+
<Flex
|
102
|
+
{...ariaProps}
|
103
|
+
{...dataProps}
|
104
|
+
{...htmlProps}
|
105
|
+
align='center'
|
106
|
+
className={classesCustom}
|
107
|
+
cursor='pointer'
|
108
|
+
htmlFor={id}
|
109
|
+
htmlOptions={{
|
110
|
+
onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
|
111
|
+
handleContainerClick(event);
|
112
|
+
}) as unknown as () => void
|
113
|
+
}}
|
114
|
+
id="radio-container"
|
115
|
+
>
|
116
|
+
<label className={buildCss('pb_radio_kit', alignment)}>
|
117
|
+
<>{displayRadio(props)}</>
|
118
|
+
<span className="pb_radio_button" />
|
119
|
+
</label>
|
120
|
+
<div id="children-wrapper"> {children} </div>
|
121
|
+
</Flex>
|
122
|
+
) : (
|
123
|
+
<label
|
124
|
+
{...ariaProps}
|
125
|
+
{...dataProps}
|
126
|
+
{...htmlProps}
|
127
|
+
className={classes}
|
128
|
+
htmlFor={id}
|
129
|
+
>
|
130
|
+
<>{displayRadio(props)}</>
|
131
|
+
<span className="pb_radio_button" />
|
132
|
+
<Body
|
133
|
+
dark={dark}
|
134
|
+
status={error ? 'negative' : null}
|
135
|
+
text={label}
|
136
|
+
variant={null}
|
137
|
+
/>
|
138
|
+
</label>
|
139
|
+
)
|
140
|
+
);
|
141
|
+
};
|
92
142
|
|
93
|
-
export default forwardRef(Radio)
|
143
|
+
export default forwardRef(Radio);
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Radio from '../_radio'
|
3
|
+
import Typeahead from '../../pb_typeahead/_typeahead'
|
4
|
+
import Dropdown from '../../pb_dropdown/_dropdown'
|
5
|
+
import Title from '../../pb_title/_title'
|
6
|
+
|
7
|
+
const RadioChildren = (props) => {
|
8
|
+
|
9
|
+
|
10
|
+
const options = [
|
11
|
+
{ label: 'Orange', value: '#FFA500' },
|
12
|
+
{ label: 'Red', value: '#FF0000' },
|
13
|
+
{ label: 'Green', value: '#00FF00' },
|
14
|
+
{ label: 'Blue', value: '#0000FF' },
|
15
|
+
]
|
16
|
+
|
17
|
+
return (
|
18
|
+
<div>
|
19
|
+
<Radio
|
20
|
+
label="Power"
|
21
|
+
name="Group2"
|
22
|
+
tabIndex={0}
|
23
|
+
value="Power"
|
24
|
+
{...props}
|
25
|
+
>
|
26
|
+
<Dropdown options={options}/>
|
27
|
+
</Radio>
|
28
|
+
<br />
|
29
|
+
<Radio
|
30
|
+
defaultChecked={false}
|
31
|
+
label="Nitro"
|
32
|
+
name="Group2"
|
33
|
+
value="Nitro"
|
34
|
+
{...props}
|
35
|
+
>
|
36
|
+
<Typeahead options={options} />
|
37
|
+
</Radio>
|
38
|
+
<br />
|
39
|
+
<Radio
|
40
|
+
defaultChecked={false}
|
41
|
+
label="Google"
|
42
|
+
name="Group2"
|
43
|
+
value="Google"
|
44
|
+
{...props}
|
45
|
+
>
|
46
|
+
<Title text="Custom Typography" />
|
47
|
+
</Radio>
|
48
|
+
</div>
|
49
|
+
)
|
50
|
+
}
|
51
|
+
export default RadioChildren
|
@@ -3,3 +3,4 @@ export { default as RadioCustom } from './_radio_custom.jsx'
|
|
3
3
|
export { default as RadioError } from './_radio_error.jsx'
|
4
4
|
export { default as RadioAlignment } from './_radio_alignment.jsx'
|
5
5
|
export { default as RadioDisabled } from './_radio_disabled.jsx'
|
6
|
+
export { default as RadioChildren } from './_radio_children.jsx'
|
@@ -0,0 +1,132 @@
|
|
1
|
+
@import "../tokens/border_radius";
|
2
|
+
@import "../tokens/colors";
|
3
|
+
@import "../tokens/spacing";
|
4
|
+
@import "../tokens/typography";
|
5
|
+
|
6
|
+
@mixin preview_first_child {
|
7
|
+
:first-child {
|
8
|
+
margin-top: 0;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
@mixin preview_p {
|
13
|
+
margin: 1rem 0 0 0;
|
14
|
+
min-height: 1rem;
|
15
|
+
}
|
16
|
+
|
17
|
+
@mixin preview_code {
|
18
|
+
font-family: monospace;
|
19
|
+
background: $bg_light;
|
20
|
+
padding: 0.1rem 0.3rem;
|
21
|
+
box-shadow: 0 2px 10px $shadow;
|
22
|
+
border-radius: 0.25rem;
|
23
|
+
overflow: hidden;
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin preview_pre_codeblock {
|
27
|
+
display: inline-block;
|
28
|
+
width: 100%;
|
29
|
+
vertical-align: top;
|
30
|
+
font-family: monospace;
|
31
|
+
font-size: 0.9em;
|
32
|
+
padding: 0.5em;
|
33
|
+
overflow-x: auto;
|
34
|
+
background: $bg_dark;
|
35
|
+
padding: $space_sm;
|
36
|
+
border-radius: $border_rad_heaviest;
|
37
|
+
margin: 1.5rem 0 2rem 0;
|
38
|
+
|
39
|
+
code {
|
40
|
+
background: transparent !important;
|
41
|
+
box-shadow: none;
|
42
|
+
border: 0;
|
43
|
+
color: #faf6e4;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
@mixin preview_a {
|
48
|
+
color: $primary;
|
49
|
+
border-bottom: 1px solid $primary;
|
50
|
+
&:hover {
|
51
|
+
color: $text_lt_default;
|
52
|
+
border-bottom: 1px solid $text_lt_default;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
@mixin preview_blockquote {
|
57
|
+
font-size: $font_larger;
|
58
|
+
padding: $space_sm $space_md;
|
59
|
+
font-style: italic;
|
60
|
+
margin: 1rem 0 0 0;
|
61
|
+
p {
|
62
|
+
margin: 0;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
@mixin preview_h1 {
|
67
|
+
font-size: $text_largest;
|
68
|
+
line-height: $text_larger;
|
69
|
+
font-weight: $bolder;
|
70
|
+
letter-spacing: $lspace_tight;
|
71
|
+
margin: 2.1rem 0 0 0;
|
72
|
+
}
|
73
|
+
|
74
|
+
@mixin preview_h2 {
|
75
|
+
font-size: $text_larger;
|
76
|
+
line-height: $text_larger;
|
77
|
+
font-weight: $bolder;
|
78
|
+
letter-spacing: $lspace_tight;
|
79
|
+
margin: 1.9rem 0 0 0;
|
80
|
+
}
|
81
|
+
|
82
|
+
@mixin preview_h3 {
|
83
|
+
font-size: $text_large;
|
84
|
+
line-height: $text_large;
|
85
|
+
font-weight: $bolder;
|
86
|
+
letter-spacing: $lspace_tight;
|
87
|
+
margin: 1.7rem 0 0 0;
|
88
|
+
}
|
89
|
+
|
90
|
+
@mixin preview_smaller_headings {
|
91
|
+
font-size: $text_base;
|
92
|
+
line-height: $text_base;
|
93
|
+
letter-spacing: $lspace_tight;
|
94
|
+
font-weight: $bolder;
|
95
|
+
margin: 1rem 0 0 0;
|
96
|
+
}
|
97
|
+
|
98
|
+
@mixin preview_hr {
|
99
|
+
margin: 2.2rem 0;
|
100
|
+
box-sizing: content-box;
|
101
|
+
overflow: hidden;
|
102
|
+
background: transparent;
|
103
|
+
border-bottom: 1px solid $transparent;
|
104
|
+
height: 1px;
|
105
|
+
padding: 0;
|
106
|
+
background-color: $border_light;
|
107
|
+
border: 0;
|
108
|
+
}
|
109
|
+
|
110
|
+
@mixin preview_ol {
|
111
|
+
margin: 1rem 0 0 0;
|
112
|
+
padding-left: $space_md;
|
113
|
+
list-style: decimal;
|
114
|
+
li {
|
115
|
+
margin: 2px 0;
|
116
|
+
p {
|
117
|
+
margin: 0;
|
118
|
+
}
|
119
|
+
}
|
120
|
+
}
|
121
|
+
|
122
|
+
@mixin preview_ul {
|
123
|
+
list-style-position: disc;
|
124
|
+
margin: 1rem 0 0 0;
|
125
|
+
padding-left: $space_md;
|
126
|
+
li {
|
127
|
+
margin: 2px 0;
|
128
|
+
p {
|
129
|
+
margin: 0;
|
130
|
+
}
|
131
|
+
}
|
132
|
+
}
|
@@ -6,6 +6,7 @@
|
|
6
6
|
@import "../tokens/typography";
|
7
7
|
@import "../tokens/shadows";
|
8
8
|
@import "../tokens/transition";
|
9
|
+
@import "previewer_mixin";
|
9
10
|
|
10
11
|
[class^="pb_rich_text_editor_kit"] {
|
11
12
|
.toolbar_button {
|
@@ -85,109 +86,44 @@
|
|
85
86
|
}
|
86
87
|
|
87
88
|
code {
|
88
|
-
|
89
|
-
background: $bg_light;
|
90
|
-
padding: 0.1rem 0.3rem;
|
91
|
-
margin: 0 5px;
|
92
|
-
box-shadow: 0 2px 10px $shadow;
|
93
|
-
border-radius: 0.25rem;
|
94
|
-
overflow: hidden;
|
95
|
-
font-size: ($text_small - 1px);
|
89
|
+
@include preview_code;
|
96
90
|
}
|
97
91
|
|
98
92
|
pre {
|
99
|
-
|
100
|
-
padding: $space_sm;
|
101
|
-
border-radius: $border_rad_heaviest;
|
102
|
-
margin: 1.5rem 0 2rem 0;
|
103
|
-
code {
|
104
|
-
background: transparent;
|
105
|
-
box-shadow: none;
|
106
|
-
border: 0;
|
107
|
-
color: #faf6e4;
|
108
|
-
}
|
93
|
+
@include preview_pre_codeblock;
|
109
94
|
}
|
110
95
|
a {
|
111
|
-
|
112
|
-
border-bottom: 1px solid $primary;
|
113
|
-
&:hover {
|
114
|
-
color: $text_lt_default;
|
115
|
-
border-bottom: 1px solid $text_lt_default;
|
116
|
-
}
|
96
|
+
@include preview_a;
|
117
97
|
}
|
118
98
|
blockquote {
|
119
|
-
|
120
|
-
padding: $space_sm $space_md;
|
121
|
-
font-style: italic;
|
122
|
-
p {
|
123
|
-
margin: 0;
|
124
|
-
}
|
99
|
+
@include preview_blockquote;
|
125
100
|
}
|
126
101
|
&:focus-visible {
|
127
102
|
outline: unset;
|
128
103
|
@include transition_default;
|
129
104
|
}
|
130
105
|
h1 {
|
131
|
-
|
132
|
-
line-height: $text_larger;
|
133
|
-
font-weight: $bolder;
|
134
|
-
letter-spacing: $lspace_tight;
|
135
|
-
margin: 2.1rem 0 0 0;
|
106
|
+
@include preview_h1;
|
136
107
|
}
|
137
108
|
h2 {
|
138
|
-
|
139
|
-
line-height: $text_larger;
|
140
|
-
font-weight: $bolder;
|
141
|
-
letter-spacing: $lspace_tight;
|
142
|
-
margin: 1.9rem 0 0 0;
|
109
|
+
@include preview_h2;
|
143
110
|
}
|
144
111
|
h3 {
|
145
|
-
|
146
|
-
line-height: $text_large;
|
147
|
-
font-weight: $bolder;
|
148
|
-
letter-spacing: $lspace_tight;
|
149
|
-
margin: 1.7rem 0 0 0;
|
112
|
+
@include preview_h3;
|
150
113
|
}
|
151
114
|
h4,
|
152
115
|
h5,
|
153
116
|
h6 {
|
154
|
-
|
155
|
-
line-height: $text_base;
|
156
|
-
letter-spacing: $lspace_tight;
|
157
|
-
font-weight: $bolder;
|
117
|
+
@include preview_smaller_headings;
|
158
118
|
}
|
159
119
|
hr {
|
160
|
-
|
161
|
-
box-sizing: content-box;
|
162
|
-
overflow: hidden;
|
163
|
-
background: transparent;
|
164
|
-
border-bottom: 1px solid $transparent;
|
165
|
-
height: 1px;
|
166
|
-
padding: 0;
|
167
|
-
background-color: $border_light;
|
168
|
-
border: 0;
|
120
|
+
@include preview_hr;
|
169
121
|
}
|
170
122
|
ol {
|
171
|
-
|
172
|
-
padding-left: $space_md;
|
173
|
-
list-style: decimal;
|
174
|
-
li {
|
175
|
-
margin: 2px 0;
|
176
|
-
p {
|
177
|
-
margin: 0;
|
178
|
-
}
|
179
|
-
}
|
123
|
+
@include preview_ol;
|
180
124
|
}
|
181
125
|
ul {
|
182
|
-
|
183
|
-
margin: 1rem 0 0 0;
|
184
|
-
padding-left: $space_md;
|
185
|
-
li {
|
186
|
-
margin: 2px 0;
|
187
|
-
p {
|
188
|
-
margin: 0;
|
189
|
-
}
|
190
|
-
}
|
126
|
+
@include preview_ul;
|
191
127
|
}
|
192
128
|
}
|
193
129
|
}
|
@@ -233,3 +169,41 @@
|
|
233
169
|
}
|
234
170
|
}
|
235
171
|
}
|
172
|
+
.tiptap-content {
|
173
|
+
@include preview_first_child;
|
174
|
+
a {
|
175
|
+
@include preview_a;
|
176
|
+
}
|
177
|
+
blockquote {
|
178
|
+
@include preview_blockquote;
|
179
|
+
}
|
180
|
+
h1 {
|
181
|
+
@include preview_h1;
|
182
|
+
}
|
183
|
+
h2 {
|
184
|
+
@include preview_h2;
|
185
|
+
}
|
186
|
+
h3 {
|
187
|
+
@include preview_h3;
|
188
|
+
}
|
189
|
+
h4,
|
190
|
+
h5,
|
191
|
+
h6 {
|
192
|
+
@include preview_smaller_headings;
|
193
|
+
}
|
194
|
+
hr {
|
195
|
+
@include preview_hr;
|
196
|
+
}
|
197
|
+
ol {
|
198
|
+
@include preview_ol;
|
199
|
+
}
|
200
|
+
p {
|
201
|
+
@include preview_p;
|
202
|
+
}
|
203
|
+
pre {
|
204
|
+
@include preview_pre_codeblock;
|
205
|
+
}
|
206
|
+
ul {
|
207
|
+
@include preview_ul;
|
208
|
+
}
|
209
|
+
}
|