playbook_ui 13.13.0.pre.alpha.play900startratingasinput1657 → 13.13.0.pre.alpha.play10221678
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_date_picker/_date_picker.tsx +3 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +11 -10
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.html.erb +29 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.md +7 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.html.erb +28 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +69 -3
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +53 -105
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +62 -179
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb +8 -6
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +6 -19
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb +1 -3
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +5 -22
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +5 -12
- data/app/pb_kits/playbook/pb_star_rating/docs/index.js +0 -8
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +26 -48
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +6 -82
- data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +34 -34
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/version.rb +1 -1
- metadata +8 -15
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.html.erb +0 -2
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.jsx +0 -25
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb +0 -3
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx +0 -31
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb +0 -6
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx +0 -58
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb +0 -16
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx +0 -60
- data/app/pb_kits/playbook/pb_star_rating/stars/primary_star.svg +0 -3
- data/app/pb_kits/playbook/pb_star_rating/stars/star_outline.svg +0 -3
- data/app/pb_kits/playbook/pb_star_rating/stars/subtle_dark_star.svg +0 -3
- data/app/pb_kits/playbook/pb_star_rating/stars/subtle_star.svg +0 -3
- data/app/pb_kits/playbook/pb_star_rating/stars/yellow_star.svg +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 930c0e3d2587afad1b9ea3d50a4a80e37c9c2772ef0a9b12eb6499831bbbcbb5
|
4
|
+
data.tar.gz: 9d8fe14193b9826133a1b47709975b5165aa54b44437feae9aa5eaa244879cfe
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: cd5afb9fe7f8b9b3fcf226049a50ce83df67baddceb0bd22ccbbea5d8db2ec661390be9f7b5e9229da84fcddd4dba909167728b849a9d91215343577b8f9a16e
|
7
|
+
data.tar.gz: 271d69aee52700ec882a56a7f48fe02b6cac9b2d83a3ea3e0c465b75a6dfc501356c0ee080a3f6fb2a178f1697ee05e38c6737c393a0ea73f414037902a9addf
|
@@ -13,6 +13,7 @@ type DatePickerProps = {
|
|
13
13
|
allowInput?: boolean,
|
14
14
|
aria?: { [key: string]: string },
|
15
15
|
className?: string,
|
16
|
+
customQuickPickDates: { override: boolean, dates: any[] },
|
16
17
|
dark?: boolean,
|
17
18
|
data?: { [key: string]: string },
|
18
19
|
defaultDate?: string,
|
@@ -56,6 +57,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
56
57
|
allowInput = false,
|
57
58
|
aria = {},
|
58
59
|
className,
|
60
|
+
customQuickPickDates,
|
59
61
|
dark = false,
|
60
62
|
data = {},
|
61
63
|
defaultDate = '',
|
@@ -104,6 +106,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
104
106
|
useEffect(() => {
|
105
107
|
datePickerHelper({
|
106
108
|
allowInput,
|
109
|
+
customQuickPickDates,
|
107
110
|
defaultDate,
|
108
111
|
disableDate,
|
109
112
|
disableRange,
|
@@ -5,6 +5,8 @@ module Playbook
|
|
5
5
|
class DatePicker < Playbook::KitBase
|
6
6
|
prop :allow_input, type: Playbook::Props::Boolean,
|
7
7
|
default: false
|
8
|
+
prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
|
9
|
+
default: {}
|
8
10
|
prop :dark, type: Playbook::Props::Boolean,
|
9
11
|
default: false
|
10
12
|
prop :default_date, type: Playbook::Props::String,
|
@@ -79,6 +81,7 @@ module Playbook
|
|
79
81
|
def date_picker_config
|
80
82
|
{
|
81
83
|
allowInput: allow_input,
|
84
|
+
customQuickPickDates: custom_quick_pick_dates,
|
82
85
|
defaultDate: default_date,
|
83
86
|
disableDate: disable_date,
|
84
87
|
disableRange: disable_range,
|
@@ -11,6 +11,7 @@ const getPositionElement = (element: string | Element) => {
|
|
11
11
|
|
12
12
|
type DatePickerConfig = {
|
13
13
|
closeOnSelect?: boolean,
|
14
|
+
customQuickPickDates: { override: boolean, dates: any[] },
|
14
15
|
disableDate?: number[],
|
15
16
|
disableRange?: number[],
|
16
17
|
disableWeekdays?: number[],
|
@@ -34,6 +35,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
34
35
|
const {
|
35
36
|
allowInput,
|
36
37
|
closeOnSelect = true,
|
38
|
+
customQuickPickDates = { override: true, dates: [] },
|
37
39
|
defaultDate,
|
38
40
|
disableDate,
|
39
41
|
disableRange,
|
@@ -121,27 +123,26 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
121
123
|
}
|
122
124
|
}
|
123
125
|
|
124
|
-
const setPlugins = (thisRangesEndToday: boolean) => {
|
126
|
+
const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
|
125
127
|
const pluginList = []
|
126
|
-
|
128
|
+
|
127
129
|
// month and week selection
|
128
130
|
if (selectionType === "month" || plugins.length > 0) {
|
129
131
|
pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
|
130
132
|
} else if ( selectionType === "week") {
|
131
133
|
pluginList.push(weekSelect())
|
132
|
-
|
134
|
+
|
133
135
|
} else if (selectionType === "quickpick") {
|
134
|
-
|
135
|
-
|
136
|
+
//------- QUICKPICK VARIANT PLUGIN -------------//
|
137
|
+
pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
|
136
138
|
}
|
137
|
-
|
139
|
+
|
138
140
|
// time selection
|
139
141
|
if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
|
140
|
-
|
141
|
-
|
142
|
+
|
142
143
|
return pluginList
|
143
144
|
}
|
144
|
-
|
145
|
+
|
145
146
|
const getDateFormat = () => {
|
146
147
|
return enableTime ? `${format} ${timeFormat}` : format
|
147
148
|
}
|
@@ -181,7 +182,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
181
182
|
onYearChange: [() => {
|
182
183
|
yearChangeHook()
|
183
184
|
}],
|
184
|
-
plugins: setPlugins(thisRangesEndToday),
|
185
|
+
plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
|
185
186
|
position,
|
186
187
|
positionElement: getPositionElement(positionElement),
|
187
188
|
prevArrow: '<i class="far fa-angle-left"></i>',
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
allow_input: true,
|
3
|
+
custom_quick_pick_dates: {
|
4
|
+
dates: [
|
5
|
+
# Allow Playbook to handle the logic...
|
6
|
+
{
|
7
|
+
label: "Last 15 months",
|
8
|
+
value: {
|
9
|
+
timePeriod: "months",
|
10
|
+
amount: 15,
|
11
|
+
},
|
12
|
+
},
|
13
|
+
# Or, be explicit with an exact date range for more control...
|
14
|
+
{
|
15
|
+
label: "First Week of June 2022",
|
16
|
+
value: ["06/01/2022", "06/07/2022"],
|
17
|
+
},
|
18
|
+
],
|
19
|
+
},
|
20
|
+
end_date_id: "quick-pick-end-date",
|
21
|
+
end_date_name: "quick-pick-end-date",
|
22
|
+
mode: "range",
|
23
|
+
picker_id: "date-picker-quick-pick-custom",
|
24
|
+
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
25
|
+
selection_type: "quickpick",
|
26
|
+
start_date_id: "quick-pick-start-date",
|
27
|
+
start_date_name: "quick-pick-start-date"
|
28
|
+
}) %>
|
29
|
+
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import DatePicker from "../_date_picker"
|
3
|
+
|
4
|
+
const DatePickerQuickPickCustom = (props) => (
|
5
|
+
<>
|
6
|
+
<DatePicker
|
7
|
+
allowInput
|
8
|
+
customQuickPickDates={{
|
9
|
+
dates: [
|
10
|
+
// Allow Playbook to handle the logic...
|
11
|
+
{
|
12
|
+
label: "Last 15 months",
|
13
|
+
value: {
|
14
|
+
timePeriod: "months",
|
15
|
+
amount: 15,
|
16
|
+
},
|
17
|
+
},
|
18
|
+
// Or, be explicit with an exact date range for more control...
|
19
|
+
{
|
20
|
+
label: "First Week of June 2022",
|
21
|
+
value: ["06/01/2022", "06/07/2022"],
|
22
|
+
},
|
23
|
+
],
|
24
|
+
}}
|
25
|
+
mode='range'
|
26
|
+
pickerId='date-picker-quick-pick-custom-override'
|
27
|
+
placeholder='mm/dd/yyyy to mm/dd/yyyy'
|
28
|
+
selectionType='quickpick'
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
</>
|
32
|
+
)
|
33
|
+
|
34
|
+
export default DatePickerQuickPickCustom
|
@@ -0,0 +1,7 @@
|
|
1
|
+
The customQuickPickDates/custom_quick_pick_dates prop allows for the user/dev to define their own quick pick dates.
|
2
|
+
The prop accepts an object with two key/value pairs: dates & override (separate doc example below).
|
3
|
+
|
4
|
+
The dates property accepts an array of objects. Each object in the array has label and value properties. The label is what will be displayed in the UI of the dropdown menu. The value property is just the date that is going to be passed to the datepicker. The value property can be an array of two strings that represent a range, allowing for the dev to be extremely specific. Additionally, the dates array allows for a clean, simple API under that automatically converts dates in a common vernacular.
|
5
|
+
|
6
|
+
The timePeriod property accepts "days", "weeks", "months", "quarters" or "years", representing past time periods.
|
7
|
+
The amount property accepts any number.
|
data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.html.erb
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
allow_input: true,
|
3
|
+
custom_quick_pick_dates: {
|
4
|
+
override: false,
|
5
|
+
dates: [
|
6
|
+
{
|
7
|
+
label: "Last 15 months",
|
8
|
+
value: {
|
9
|
+
timePeriod: "months",
|
10
|
+
amount: 15,
|
11
|
+
},
|
12
|
+
},
|
13
|
+
{
|
14
|
+
label: "First Week of June 2022",
|
15
|
+
value: ["06/01/2022", "06/07/2022"],
|
16
|
+
},
|
17
|
+
],
|
18
|
+
},
|
19
|
+
end_date_id: "quick-pick-end-date",
|
20
|
+
end_date_name: "quick-pick-end-date",
|
21
|
+
mode: "range",
|
22
|
+
picker_id: "date-picker-quick-pick-override",
|
23
|
+
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
24
|
+
selection_type: "quickpick",
|
25
|
+
start_date_id: "quick-pick-start-date",
|
26
|
+
start_date_name: "quick-pick-start-date"
|
27
|
+
}) %>
|
28
|
+
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import DatePicker from "../_date_picker"
|
3
|
+
|
4
|
+
const DatePickerQuickPickCustomOverride = (props) => (
|
5
|
+
<>
|
6
|
+
<DatePicker
|
7
|
+
allowInput
|
8
|
+
customQuickPickDates={{
|
9
|
+
override: false,
|
10
|
+
dates: [
|
11
|
+
{
|
12
|
+
label: "Last 15 months",
|
13
|
+
value: {
|
14
|
+
timePeriod: "months",
|
15
|
+
amount: 15,
|
16
|
+
},
|
17
|
+
},
|
18
|
+
{
|
19
|
+
label: "First Week of June 2022",
|
20
|
+
value: ["06/01/2022", "06/07/2022"],
|
21
|
+
},
|
22
|
+
],
|
23
|
+
}}
|
24
|
+
marginTop='lg'
|
25
|
+
mode='range'
|
26
|
+
pickerId='date-picker-quick-pick-custom'
|
27
|
+
placeholder='mm/dd/yyyy to mm/dd/yyyy'
|
28
|
+
selectionType='quickpick'
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
</>
|
32
|
+
)
|
33
|
+
|
34
|
+
export default DatePickerQuickPickCustomOverride
|
@@ -0,0 +1 @@
|
|
1
|
+
The customQuickPickDates/custom_quick_pick_dates prop allows for an override boolean. The override allows for the user to completely override the quick pick dates that ship with the component. Default of `override` is set to true. If you would like to simply append your dates to the default quick pick dates, set this prop to false explicitly.
|
@@ -10,6 +10,8 @@ examples:
|
|
10
10
|
- date_picker_range: Range
|
11
11
|
- date_picker_quick_pick_rails: Range (Quick Pick)
|
12
12
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
13
|
+
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
14
|
+
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
13
15
|
- date_picker_format: Format
|
14
16
|
- date_picker_disabled: Disabled Dates
|
15
17
|
- date_picker_min_max: Min Max
|
@@ -37,6 +39,8 @@ examples:
|
|
37
39
|
- date_picker_range: Range
|
38
40
|
- date_picker_quick_pick_react: Range (Quick Pick)
|
39
41
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
42
|
+
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
43
|
+
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
40
44
|
- date_picker_format: Format
|
41
45
|
- date_picker_disabled: Disabled Dates
|
42
46
|
- date_picker_min_max: Min Max
|
@@ -22,3 +22,5 @@ export { default as DatePickerAllowInput } from './_date_picker_allow_input'
|
|
22
22
|
export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
|
23
23
|
export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
|
24
24
|
export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
25
|
+
export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
|
26
|
+
export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
|
@@ -19,9 +19,14 @@ type pluginDataType = {
|
|
19
19
|
rangesButtons: [] | any,
|
20
20
|
}
|
21
21
|
|
22
|
+
type customQuickPickDatesType = {
|
23
|
+
override: boolean,
|
24
|
+
dates: { label: string, value: string[] | { timePeriod: string, amount: number } }[],
|
25
|
+
}
|
26
|
+
|
22
27
|
let activeLabel = ""
|
23
28
|
|
24
|
-
const quickPickPlugin = (thisRangesEndToday: boolean) => {
|
29
|
+
const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined) => {
|
25
30
|
return function (fp: FpTypes & any): any {
|
26
31
|
const today = new Date()
|
27
32
|
const yesterday = DateTime.getYesterdayDate(new Date())
|
@@ -46,8 +51,38 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
|
|
46
51
|
const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date())
|
47
52
|
const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date())
|
48
53
|
|
49
|
-
|
50
|
-
|
54
|
+
const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
|
55
|
+
const endDate = new Date();
|
56
|
+
let startDate = new Date();
|
57
|
+
|
58
|
+
switch (timePeriod) {
|
59
|
+
case 'days':
|
60
|
+
startDate.setDate(endDate.getDate() - amount);
|
61
|
+
break;
|
62
|
+
case 'weeks':
|
63
|
+
startDate.setDate(endDate.getDate() - (amount * 7));
|
64
|
+
break;
|
65
|
+
case 'months':
|
66
|
+
startDate.setMonth(endDate.getMonth() - amount);
|
67
|
+
break;
|
68
|
+
case 'quarters':
|
69
|
+
startDate.setMonth(endDate.getMonth() - (amount * 3));
|
70
|
+
break;
|
71
|
+
case 'years':
|
72
|
+
startDate.setFullYear(endDate.getFullYear() - amount);
|
73
|
+
break;
|
74
|
+
default:
|
75
|
+
throw new Error('Invalid time period');
|
76
|
+
}
|
77
|
+
return [startDate, endDate];
|
78
|
+
};
|
79
|
+
|
80
|
+
|
81
|
+
type rangesType = {
|
82
|
+
[key: string]: Date[]
|
83
|
+
};
|
84
|
+
|
85
|
+
let ranges: rangesType = {
|
51
86
|
'Today': [today, today],
|
52
87
|
'Yesterday': [yesterday, yesterday],
|
53
88
|
'This week': [thisWeekStartDate, thisWeekEndDate],
|
@@ -58,16 +93,47 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
|
|
58
93
|
'Last month': [lastMonthStartDate, lastMonthEndDate],
|
59
94
|
'Last quarter': [lastQuarterStartDate, lastQuarterEndDate],
|
60
95
|
'Last year': [lastYearStartDate, lastYearEndDate]
|
96
|
+
};
|
97
|
+
|
98
|
+
|
99
|
+
if (customQuickPickDates && Object.keys(customQuickPickDates).length !== 0) {
|
100
|
+
if (customQuickPickDates.dates.length && customQuickPickDates.override === false) {
|
101
|
+
customQuickPickDates.dates.forEach((item) => {
|
102
|
+
if (Array.isArray(item.value)) {
|
103
|
+
ranges[item.label] = item.value.map((dateStr: string) => new Date(dateStr));
|
104
|
+
} else {
|
105
|
+
ranges[item.label] = calculateDateRange(
|
106
|
+
item.value.timePeriod,
|
107
|
+
item.value.amount
|
108
|
+
)
|
109
|
+
}
|
110
|
+
})
|
111
|
+
} else if(customQuickPickDates.dates.length && customQuickPickDates.override !== false) {
|
112
|
+
ranges = {}
|
113
|
+
customQuickPickDates.dates.forEach((item) => {
|
114
|
+
if (Array.isArray(item.value)) {
|
115
|
+
ranges[item.label] = item.value.map((dateStr: string) => new Date(dateStr));
|
116
|
+
} else {
|
117
|
+
ranges[item.label] = calculateDateRange(
|
118
|
+
item.value.timePeriod,
|
119
|
+
item.value.amount
|
120
|
+
)
|
121
|
+
}
|
122
|
+
})
|
123
|
+
}
|
61
124
|
}
|
62
125
|
|
126
|
+
|
63
127
|
// creating the ul element for the nav dropdown and giving it classnames
|
64
128
|
const rangesNav = document.createElement('ul');
|
65
129
|
|
130
|
+
|
66
131
|
// creating the pluginData object that will hold the properties of this plugin
|
67
132
|
const pluginData: pluginDataType = {
|
68
133
|
ranges: ranges,
|
69
134
|
rangesNav: rangesNav,
|
70
135
|
rangesButtons: [],
|
136
|
+
|
71
137
|
};
|
72
138
|
|
73
139
|
/**
|
@@ -2,113 +2,61 @@
|
|
2
2
|
@import "../tokens/opacity";
|
3
3
|
@import "../tokens/spacing";
|
4
4
|
|
5
|
+
$pb_star_rating_number_width: 30px;
|
6
|
+
$pb_star_rating_wrapper_width: 90px;
|
7
|
+
$pb_star_rating_height: 26px;
|
5
8
|
|
6
|
-
[class
|
7
|
-
|
8
|
-
|
9
|
+
[class^=pb_star_rating_kit] {
|
10
|
+
position: relative;
|
11
|
+
display: inline-flex;
|
9
12
|
justify-content: flex-start;
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
outline_empty_star_dark: (color: transparent),
|
58
|
-
outline_empty_star_light: (color: transparent)
|
59
|
-
);
|
60
|
-
|
61
|
-
@each $class, $styles in $star-styles {
|
62
|
-
.#{$class} {
|
63
|
-
@each $property, $value in $styles {
|
64
|
-
#{$property}: $value;
|
65
|
-
}
|
66
|
-
}
|
67
|
-
}
|
68
|
-
|
69
|
-
|
70
|
-
$star-styles: (
|
71
|
-
pb_star_react_xs: (font-size: $text_small, ),
|
72
|
-
pb_star_react_sm: (font-size: $text_base, ),
|
73
|
-
pb_star_react_md: (font-size: 24px, ),
|
74
|
-
pb_star_react_lg: (font-size: 48px, )
|
75
|
-
);
|
76
|
-
|
77
|
-
@each $class, $styles in $star-styles {
|
78
|
-
.#{$class} {
|
79
|
-
@each $property, $value in $styles {
|
80
|
-
#{$property}: $value;
|
81
|
-
}
|
82
|
-
}
|
83
|
-
}
|
84
|
-
|
85
|
-
$star-styles: (
|
86
|
-
pb_star_xs: (font-size: $text_small, width: 1em, margin-right: 4px),
|
87
|
-
pb_star_sm: (font-size: $text_base, width: 1em, margin-right: 4px),
|
88
|
-
pb_star_md: (font-size: 24px, width: 1em, margin-right: 6px),
|
89
|
-
pb_star_lg: (font-size: 48px, width: 1em, margin-right: 12px)
|
90
|
-
);
|
91
|
-
|
92
|
-
@each $class, $styles in $star-styles {
|
93
|
-
.#{$class} {
|
94
|
-
@each $property, $value in $styles {
|
95
|
-
#{$property}: $value;
|
96
|
-
}
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
$star-padding: (
|
101
|
-
pb_star_padding_xs: (margin-right: 4px),
|
102
|
-
pb_star_padding_sm: (margin-right: 4px),
|
103
|
-
pb_star_padding_md: (margin-right: 6px),
|
104
|
-
pb_star_padding_lg: (margin-right: 12px)
|
105
|
-
);
|
106
|
-
|
107
|
-
@each $class, $styles in $star-padding {
|
108
|
-
.#{$class} {
|
109
|
-
@each $property, $value in $styles {
|
110
|
-
#{$property}: $value;
|
111
|
-
}
|
13
|
+
align-items: flex-start;
|
14
|
+
|
15
|
+
.pb_star_rating_number {
|
16
|
+
flex-shrink: 0;
|
17
|
+
flex-grow: 0;
|
18
|
+
flex-basis: $pb_star_rating_number_width;
|
19
|
+
width: $pb_star_rating_number_width;
|
20
|
+
min-height: $pb_star_rating_height;
|
21
|
+
padding: 0 $space-xs 0;
|
22
|
+
color: $text_lt_light;
|
23
|
+
font-size: $text-small;
|
24
|
+
display: flex;
|
25
|
+
justify-content: center;
|
26
|
+
align-items: center;
|
27
|
+
}
|
28
|
+
|
29
|
+
.pb_star_rating_wrapper {
|
30
|
+
position: relative;
|
31
|
+
width: $pb_star_rating_wrapper_width;
|
32
|
+
flex-basis: $pb_star_rating_wrapper_width;
|
33
|
+
flex-shrink: 0;
|
34
|
+
flex-grow: 1;
|
35
|
+
min-height: $pb_star_rating_height;
|
36
|
+
|
37
|
+
.pb_star_rating_highlight {
|
38
|
+
display: flex;
|
39
|
+
position: absolute;
|
40
|
+
top: 5px;
|
41
|
+
left: 0;
|
42
|
+
z-index: 5;
|
43
|
+
color: $yellow;
|
44
|
+
line-height: $pb_star_rating_height;
|
45
|
+
}
|
46
|
+
.pb_star_rating_base {
|
47
|
+
display: flex;
|
48
|
+
position: absolute;
|
49
|
+
top: 5px;
|
50
|
+
left: 0;
|
51
|
+
z-index: 0;
|
52
|
+
color: rgba($slate, $opacity-4);
|
53
|
+
line-height: $pb_star_rating_height;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
&[class*=_hide_rating] {
|
58
|
+
.pb_star_rating_number {
|
59
|
+
display: none;
|
112
60
|
}
|
113
61
|
}
|
114
62
|
}
|