pixel-react 1.9.2 → 1.9.4
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.
- package/.yarn/install-state.gz +0 -0
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +2 -0
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/Table/Types.d.ts +8 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/data.d.ts +54 -222
- package/lib/components/TableTree/types.d.ts +0 -6
- package/lib/index.d.ts +15 -2
- package/lib/index.esm.js +21314 -21374
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +21319 -21378
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +55 -0
- package/src/assets/Themes/BaseTheme.scss +17 -6
- package/src/assets/Themes/BlueTheme.scss +12 -0
- package/src/assets/Themes/DarkTheme.scss +20 -6
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/azure.svg +9 -0
- package/src/assets/icons/bitbucket.svg +9 -0
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/github.svg +9 -0
- package/src/assets/icons/gitlab.svg +9 -0
- package/src/assets/icons/jenkins.svg +9 -0
- package/src/assets/icons/jira_logo.svg +9 -0
- package/src/assets/icons/primary_calendar_icon.svg +3 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/slack.svg +9 -0
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Charts/BarChart/BarChart.stories.tsx +2 -1
- package/src/components/Charts/BarChart/BarChart.tsx +6 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +7 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +5 -2
- package/src/components/Charts/MultiRadialChart/types.ts +2 -0
- package/src/components/DatePicker/DatePicker.scss +379 -632
- package/src/components/DatePicker/DatePicker.tsx +130 -98
- package/src/components/DatePicker/Timepicker.tsx +1 -13
- package/src/components/Icon/iconList.ts +16 -0
- package/src/components/Table/Table.scss +44 -11
- package/src/components/Table/Table.stories.tsx +60 -1
- package/src/components/Table/Table.tsx +190 -123
- package/src/components/Table/Types.ts +8 -0
- package/src/components/TableTree/Components/TableBody.tsx +17 -19
- package/src/components/TableTree/Components/TableCell.tsx +4 -7
- package/src/components/TableTree/Components/TableRow.tsx +4 -7
- package/src/components/TableTree/TableTree.stories.tsx +10 -10
- package/src/components/TableTree/TableTree.tsx +1 -1
- package/src/components/TableTree/data.ts +53 -331
- package/src/components/TableTree/types.ts +0 -6
- package/src/components/TextArea/Textarea.scss +24 -6
- package/src/index.ts +3 -1
- package/src/utils/swapArrayItem/dragAndDropUtils.ts +11 -0
- package/lib/1fb4472b34e4fe07.css +0 -1
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/AddVariables/AddVariables.d.ts +0 -5
- package/lib/components/AddVariables/index.d.ts +0 -1
- package/lib/components/AddVariables/types.d.ts +0 -35
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
- package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
- package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
- package/lib/components/Button/Button.stories.d.ts +0 -13
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
- package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
- package/lib/components/Chip/Chip.stories.d.ts +0 -14
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
- package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/ExcelFile/Types.d.ts +0 -129
- package/lib/components/ExcelFile/index.d.ts +0 -1
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -7
- package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
- package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
- package/lib/components/Icon/Icon.stories.d.ts +0 -8
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
- package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
- package/lib/components/NLPInput/type.d.ts +0 -70
- package/lib/components/Paper/Paper.stories.d.ts +0 -11
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -14
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/components/Table/Table.stories.d.ts +0 -13
- package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
- package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
- package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
- package/lib/components/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
- package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
- package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
- package/lib/components/Typography/Typography.stories.d.ts +0 -10
- package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
- package/lib/utils/debounce/debounce.stories.d.ts +0 -6
- package/lib/utils/ffID/ffID.stories.d.ts +0 -6
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -3,23 +3,10 @@
|
|
3
3
|
|
4
4
|
/* Custom date picker styling */
|
5
5
|
.ff-date-picker {
|
6
|
-
// day-picker variable override
|
7
|
-
.rdp-root {
|
8
|
-
--rdp-accent-color: var(--brand-color);
|
9
|
-
--rdp-day-height: 24px;
|
10
|
-
--rdp-day-width: 36px;
|
11
|
-
--rdp-day_button-height: 24px;
|
12
|
-
--rdp-day_button-width: 36px;
|
13
|
-
@include fonts.fontPoppins(12px);
|
14
|
-
--rdp-font-family: 'Poppins', sans-serif;
|
15
|
-
}
|
16
|
-
|
17
6
|
.ff-cursor-pointer {
|
18
7
|
cursor: pointer;
|
19
8
|
}
|
20
9
|
|
21
|
-
position: relative;
|
22
|
-
|
23
10
|
.ff-datepicker-input-container {
|
24
11
|
display: flex;
|
25
12
|
gap: 10px;
|
@@ -60,6 +47,7 @@
|
|
60
47
|
|
61
48
|
.ff-date-input-field {
|
62
49
|
flex: 1;
|
50
|
+
|
63
51
|
.ff-date-input {
|
64
52
|
width: 100%;
|
65
53
|
}
|
@@ -69,6 +57,7 @@
|
|
69
57
|
padding: 0px 4px;
|
70
58
|
margin-left: 8px;
|
71
59
|
line-height: 12px;
|
60
|
+
|
72
61
|
&--danger {
|
73
62
|
color: var(--input-error-text-color);
|
74
63
|
}
|
@@ -77,190 +66,229 @@
|
|
77
66
|
|
78
67
|
.ff-time-input-field {
|
79
68
|
flex: 0 0 120px;
|
69
|
+
|
80
70
|
.ff-time-input {
|
81
71
|
width: 100%;
|
82
72
|
}
|
83
73
|
}
|
84
74
|
}
|
85
|
-
|
75
|
+
}
|
76
|
+
|
77
|
+
.ff-date-picker-container {
|
78
|
+
// day-picker variable override
|
79
|
+
.rdp-root {
|
80
|
+
--rdp-accent-color: var(--brand-color);
|
81
|
+
--rdp-day-height: 24px;
|
82
|
+
--rdp-day-width: 36px;
|
83
|
+
--rdp-day_button-height: 24px;
|
84
|
+
--rdp-day_button-width: 36px;
|
85
|
+
@include fonts.fontPoppins(12px);
|
86
|
+
--rdp-font-family: 'Poppins', sans-serif;
|
87
|
+
}
|
88
|
+
|
89
|
+
display: flex;
|
90
|
+
flex-direction: column;
|
91
|
+
position: fixed;
|
92
|
+
border-radius: 8px;
|
93
|
+
padding: 4px;
|
94
|
+
box-sizing: border-box;
|
95
|
+
background-color: var(--tab-bg-color);
|
96
|
+
box-shadow: 0 0 12px 0 #00000033;
|
97
|
+
gap: 8px;
|
98
|
+
|
99
|
+
.ff-calendar-container {
|
86
100
|
display: flex;
|
87
|
-
|
88
|
-
|
89
|
-
|
101
|
+
align-items: flex-start;
|
102
|
+
gap: 4px;
|
103
|
+
height: 240px;
|
104
|
+
}
|
105
|
+
|
106
|
+
.ff-date-picker-controls {
|
90
107
|
padding: 4px;
|
91
|
-
|
92
|
-
|
93
|
-
box-shadow: 0 0 12px 0 #00000033;
|
108
|
+
display: flex;
|
109
|
+
justify-content: end;
|
94
110
|
gap: 8px;
|
111
|
+
border-top: 1px solid var(--border-color);
|
95
112
|
|
96
|
-
.ff-
|
97
|
-
|
98
|
-
|
99
|
-
gap: 4px;
|
100
|
-
height: 240px;
|
113
|
+
.ff-date-picker-button {
|
114
|
+
font-weight: 600;
|
115
|
+
line-height: 15px;
|
101
116
|
}
|
117
|
+
}
|
118
|
+
}
|
102
119
|
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
120
|
+
.ff-calendar {
|
121
|
+
.ff-calendar-nav-button {
|
122
|
+
margin: 0 5px;
|
123
|
+
border: 1px solid var(--border-color);
|
124
|
+
background-color: var(--toggle-button-bg-color);
|
125
|
+
box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);
|
126
|
+
padding: 0px;
|
127
|
+
border-radius: 30%;
|
128
|
+
cursor: pointer;
|
109
129
|
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
}
|
130
|
+
&:disabled {
|
131
|
+
cursor: auto;
|
132
|
+
opacity: 0.5;
|
114
133
|
}
|
115
134
|
}
|
116
135
|
|
117
|
-
.ff-calendar {
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
padding: 0px;
|
124
|
-
border-radius: 30%;
|
125
|
-
cursor: pointer;
|
136
|
+
.ff-calendar-haeder {
|
137
|
+
display: flex;
|
138
|
+
align-items: center;
|
139
|
+
gap: 5px;
|
140
|
+
color: var(--text-color);
|
141
|
+
}
|
126
142
|
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
143
|
+
.ff-custom-year_grid,
|
144
|
+
.ff-custom-month_grid {
|
145
|
+
width: calc((var(--rdp-day_button-width) + 4px) * 7);
|
146
|
+
display: grid;
|
147
|
+
grid-template-columns: repeat(3, 1fr);
|
148
|
+
gap: 10px;
|
149
|
+
padding: 5px;
|
150
|
+
max-width: 100%;
|
132
151
|
|
133
|
-
.ff-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
152
|
+
.ff-custom-year,
|
153
|
+
.ff-custom-month {
|
154
|
+
padding: 10px 0;
|
155
|
+
text-align: center;
|
156
|
+
cursor: pointer;
|
157
|
+
border-radius: 8px;
|
158
|
+
background-color: var(--disabled-primary-color);
|
139
159
|
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
grid-template-columns: repeat(3, 1fr);
|
145
|
-
gap: 10px;
|
146
|
-
padding: 5px;
|
147
|
-
max-width: 100%;
|
148
|
-
|
149
|
-
.ff-custom-year,
|
150
|
-
.ff-custom-month {
|
151
|
-
padding: 10px 0;
|
152
|
-
text-align: center;
|
153
|
-
cursor: pointer;
|
154
|
-
border-radius: 8px;
|
155
|
-
background-color: #f9f9f9; // color need to be change
|
160
|
+
&--selected {
|
161
|
+
background-color: var(--brand-color);
|
162
|
+
color: var(--primary-button-text-color);
|
163
|
+
}
|
156
164
|
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
}
|
161
|
-
&--disabled {
|
162
|
-
color: var(--text-color-light);
|
163
|
-
cursor: default;
|
165
|
+
&--disabled {
|
166
|
+
color: var(--text-color-light);
|
167
|
+
cursor: default;
|
164
168
|
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
}
|
169
|
+
&.ff-custom-month--selected,
|
170
|
+
&.ff-custom-year--selected {
|
171
|
+
background-color: var(--disable-color);
|
169
172
|
}
|
170
173
|
}
|
171
174
|
}
|
175
|
+
}
|
172
176
|
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
}
|
177
|
+
.rdp-weekdays {
|
178
|
+
th {
|
179
|
+
color: #6f7c8e; // color need to be change
|
180
|
+
font-weight: 400;
|
178
181
|
}
|
182
|
+
}
|
179
183
|
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
+
.rdp-day {
|
185
|
+
padding: 2px;
|
186
|
+
font-weight: 500;
|
187
|
+
}
|
184
188
|
|
185
|
-
|
186
|
-
|
187
|
-
|
189
|
+
.rdp-day_button {
|
190
|
+
border-radius: 4px;
|
191
|
+
padding: 3px 9px;
|
188
192
|
|
189
|
-
|
190
|
-
|
191
|
-
}
|
193
|
+
&:hover {
|
194
|
+
background-color: var(--hover-color);
|
192
195
|
}
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
196
|
+
}
|
197
|
+
|
198
|
+
.rdp-selected {
|
199
|
+
font: inherit;
|
200
|
+
|
201
|
+
.rdp-day_button {
|
202
|
+
background: var(--rdp-accent-color);
|
203
|
+
color: var(--drawer-footer-bg);
|
204
|
+
border: none;
|
200
205
|
}
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
206
|
+
}
|
207
|
+
|
208
|
+
.rdp-today:not(.rdp-outside) {
|
209
|
+
.rdp-day_button {
|
210
|
+
border: 2px solid var(--rdp-accent-color);
|
205
211
|
}
|
206
212
|
}
|
213
|
+
}
|
207
214
|
|
208
|
-
|
215
|
+
// Timepicker css ************************************************************************
|
209
216
|
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
217
|
+
.ff-time-picker-container {
|
218
|
+
position: relative;
|
219
|
+
width: 150px;
|
220
|
+
height: 100%;
|
221
|
+
overflow-y: hidden;
|
222
|
+
border-left: 1px solid #ccc;
|
223
|
+
padding: 10px 5px;
|
224
|
+
box-sizing: border-box;
|
218
225
|
|
219
|
-
|
220
|
-
|
221
|
-
|
226
|
+
&::-webkit-scrollbar {
|
227
|
+
display: none;
|
228
|
+
}
|
222
229
|
|
223
|
-
|
230
|
+
.ff-time-picker-fields {
|
231
|
+
display: flex;
|
232
|
+
height: 14%;
|
233
|
+
width: 100%;
|
234
|
+
margin-bottom: 5px;
|
235
|
+
box-sizing: border-box;
|
236
|
+
|
237
|
+
.ff-time-input-container {
|
224
238
|
display: flex;
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
239
|
+
border: 1px solid var(--border-color);
|
240
|
+
border-right: 0;
|
241
|
+
border-radius: 4px 0 0 4px;
|
242
|
+
width: 55%;
|
243
|
+
position: relative;
|
229
244
|
|
230
|
-
.ff-time-input
|
231
|
-
|
232
|
-
|
233
|
-
|
245
|
+
.ff-time-input {
|
246
|
+
border: none;
|
247
|
+
padding: 5px;
|
248
|
+
width: 100%;
|
249
|
+
text-align: center;
|
234
250
|
border-radius: 4px 0 0 4px;
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
.ff-time-input {
|
239
|
-
border: none;
|
240
|
-
padding: 5px;
|
241
|
-
width: 100%;
|
242
|
-
text-align: center;
|
243
|
-
border-radius: 4px 0 0 4px;
|
244
|
-
font-weight: 400;
|
245
|
-
@extend .fontSm;
|
251
|
+
font-weight: 400;
|
252
|
+
@extend .fontSm;
|
246
253
|
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
}
|
254
|
+
&::placeholder {
|
255
|
+
opacity: 0;
|
256
|
+
line-height: 18px;
|
251
257
|
}
|
258
|
+
}
|
252
259
|
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
260
|
+
.ff-time-input-label {
|
261
|
+
position: absolute;
|
262
|
+
left: 10px;
|
263
|
+
top: 50%;
|
264
|
+
transform: translateY(-50%);
|
265
|
+
transition: 0.2s ease all;
|
266
|
+
color: var(--input-default-label-color);
|
267
|
+
pointer-events: none;
|
268
|
+
}
|
269
|
+
|
270
|
+
&--float .ff-time-input-label {
|
271
|
+
top: 0;
|
272
|
+
left: 5px;
|
273
|
+
color: var(--brand-color);
|
274
|
+
background-color: var(--input-label-bg-color);
|
275
|
+
line-height: 12px;
|
276
|
+
padding: 0 2px;
|
277
|
+
font-size: 8px !important;
|
278
|
+
|
279
|
+
&--danger {
|
280
|
+
color: var(--input-error-text-color);
|
261
281
|
}
|
282
|
+
}
|
262
283
|
|
263
|
-
|
284
|
+
&:hover {
|
285
|
+
border-color: var(--input-hover-border-color);
|
286
|
+
}
|
287
|
+
|
288
|
+
&:focus-within {
|
289
|
+
border-color: var(--brand-color);
|
290
|
+
|
291
|
+
.ff-time-input-label {
|
264
292
|
top: 0;
|
265
293
|
left: 5px;
|
266
294
|
color: var(--brand-color);
|
@@ -274,522 +302,242 @@
|
|
274
302
|
}
|
275
303
|
}
|
276
304
|
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
&:focus-within {
|
282
|
-
border-color: var(--brand-color);
|
283
|
-
|
284
|
-
.ff-time-input-label {
|
285
|
-
top: 0;
|
286
|
-
left: 5px;
|
287
|
-
color: var(--brand-color);
|
288
|
-
background-color: var(--input-label-bg-color);
|
289
|
-
line-height: 12px;
|
290
|
-
padding: 0 2px;
|
291
|
-
font-size: 8px !important;
|
292
|
-
|
293
|
-
&--danger {
|
294
|
-
color: var(--input-error-text-color);
|
295
|
-
}
|
296
|
-
}
|
297
|
-
|
298
|
-
.ff-time-input {
|
299
|
-
&::placeholder {
|
300
|
-
opacity: 1;
|
301
|
-
margin-bottom: 1px;
|
302
|
-
}
|
305
|
+
.ff-time-input {
|
306
|
+
&::placeholder {
|
307
|
+
opacity: 1;
|
308
|
+
margin-bottom: 1px;
|
303
309
|
}
|
304
310
|
}
|
311
|
+
}
|
305
312
|
|
306
|
-
|
307
|
-
|
308
|
-
|
313
|
+
&--danger {
|
314
|
+
border-color: var(--input-error-text-color) !important;
|
315
|
+
}
|
309
316
|
|
310
|
-
|
311
|
-
|
312
|
-
}
|
317
|
+
.ff-time-input:focus {
|
318
|
+
outline: none;
|
313
319
|
}
|
314
|
-
|
315
|
-
|
316
|
-
|
320
|
+
}
|
321
|
+
|
322
|
+
.ff-time-period-container {
|
323
|
+
position: relative;
|
324
|
+
width: 45%;
|
325
|
+
display: flex;
|
326
|
+
border: 1px solid var(--border-color);
|
327
|
+
border-radius: 0 4px 4px 0;
|
328
|
+
|
329
|
+
.ff-time-period-select {
|
317
330
|
display: flex;
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
border-radius: 4px;
|
327
|
-
background-color: white;
|
328
|
-
cursor: pointer;
|
329
|
-
border: none;
|
330
|
-
}
|
331
|
-
&--active {
|
332
|
-
border-color: var(--brand-color) !important;
|
333
|
-
}
|
334
|
-
&:hover {
|
335
|
-
border-color: var(--input-hover-border-color);
|
336
|
-
}
|
331
|
+
align-items: center;
|
332
|
+
padding: 0 5px;
|
333
|
+
width: 100%;
|
334
|
+
border-radius: 4px;
|
335
|
+
background-color: white;
|
336
|
+
cursor: pointer;
|
337
|
+
border: none;
|
338
|
+
}
|
337
339
|
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
fill: var(--default-icon-color);
|
342
|
-
}
|
343
|
-
}
|
344
|
-
margin-left: auto;
|
345
|
-
pointer-events: none;
|
346
|
-
}
|
340
|
+
&--active {
|
341
|
+
border-color: var(--brand-color) !important;
|
342
|
+
}
|
347
343
|
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
fill: var(--brand-color);
|
352
|
-
}
|
353
|
-
}
|
354
|
-
}
|
344
|
+
&:hover {
|
345
|
+
border-color: var(--input-hover-border-color);
|
346
|
+
}
|
355
347
|
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
padding: 0;
|
362
|
-
list-style: none;
|
363
|
-
border: 1px solid var(--ff-select-background-color);
|
364
|
-
border-radius: 4px;
|
365
|
-
background-color: var(--primary-button-text-color);
|
366
|
-
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
348
|
+
.ff-time-period-icon {
|
349
|
+
svg {
|
350
|
+
path {
|
351
|
+
fill: var(--default-icon-color);
|
352
|
+
}
|
367
353
|
}
|
368
354
|
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
border-radius: 4px;
|
373
|
-
cursor: pointer;
|
374
|
-
transition: background-color 0.2s ease;
|
355
|
+
margin-left: auto;
|
356
|
+
pointer-events: none;
|
357
|
+
}
|
375
358
|
|
376
|
-
|
377
|
-
|
359
|
+
&:hover {
|
360
|
+
svg {
|
361
|
+
path {
|
362
|
+
fill: var(--brand-color);
|
378
363
|
}
|
379
364
|
}
|
380
365
|
}
|
381
|
-
}
|
382
|
-
.ff-time-picker-options {
|
383
|
-
height: 86%;
|
384
|
-
overflow-y: auto;
|
385
|
-
padding-right: 5px;
|
386
|
-
|
387
|
-
&::-webkit-scrollbar {
|
388
|
-
width: 4px;
|
389
|
-
height: 12px;
|
390
|
-
|
391
|
-
&-thumb {
|
392
|
-
background-color: var(--ff-select-scroll-thumb-color);
|
393
|
-
border-radius: 4px;
|
394
|
-
}
|
395
366
|
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
367
|
+
.ff-time-period-options {
|
368
|
+
position: absolute;
|
369
|
+
top: 100%;
|
370
|
+
left: 0;
|
371
|
+
z-index: 100;
|
372
|
+
min-width: 60px;
|
373
|
+
margin: 4px 0 0;
|
374
|
+
padding: 0;
|
375
|
+
list-style: none;
|
376
|
+
border: 1px solid var(--ff-select-background-color);
|
377
|
+
border-radius: 4px;
|
378
|
+
background-color: var(--primary-button-text-color);
|
379
|
+
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
400
380
|
}
|
401
381
|
|
402
|
-
.ff-
|
403
|
-
padding:
|
382
|
+
.ff-option-item {
|
383
|
+
padding: 8px;
|
384
|
+
color: var(--text-color);
|
385
|
+
border-radius: 4px;
|
404
386
|
cursor: pointer;
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
387
|
+
transition: background-color 0.2s ease;
|
388
|
+
|
389
|
+
&:hover {
|
390
|
+
background-color: var(--ff-select-option-hover-color);
|
391
|
+
}
|
409
392
|
}
|
410
393
|
}
|
411
394
|
}
|
412
|
-
}
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
// Adding react day picker library node modules css here to get the css style available in platform
|
418
|
-
|
419
|
-
/* Variables declaration */
|
420
|
-
/* prettier-ignore */
|
421
|
-
.rdp-root {
|
422
|
-
--rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
|
423
|
-
--rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
|
424
|
-
--rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
|
425
|
-
|
426
|
-
--rdp-day-font: inherit; /* The font used for the day cells. */
|
427
|
-
--rdp-day-height: 2.75rem; /* The height of the day cells. */
|
428
|
-
--rdp-day-width: 2.75rem; /* The width of the day cells. */
|
429
|
-
|
430
|
-
--rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
|
431
|
-
--rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
|
432
|
-
--rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
|
433
|
-
--rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
|
434
|
-
|
435
|
-
--rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
|
436
|
-
--rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
|
437
|
-
--rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
|
438
|
-
--rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
|
439
|
-
--rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
|
440
|
-
|
441
|
-
--rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
|
442
|
-
|
443
|
-
--rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
|
444
|
-
--rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
|
445
|
-
|
446
|
-
--rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
|
447
|
-
--rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
|
448
|
-
--rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
|
449
|
-
--rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
|
450
|
-
|
451
|
-
--rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
|
452
|
-
--rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
|
453
|
-
--rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
|
454
|
-
--rdp-range_middle-color: inherit;/* The color of the range text. */
|
455
|
-
|
456
|
-
--rdp-range_start-color: white; /* The color of the range text. */
|
457
|
-
--rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
|
458
|
-
--rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
|
459
|
-
|
460
|
-
--rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
|
461
|
-
--rdp-range_end-color: white;/* The color of the range text. */
|
462
|
-
--rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
|
463
|
-
|
464
|
-
--rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
|
465
|
-
--rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
|
466
|
-
--rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */
|
467
|
-
--rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
|
468
|
-
--rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
|
469
|
-
--rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
|
470
|
-
--rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
|
471
|
-
|
472
|
-
--rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
|
473
|
-
--rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
|
474
|
-
--rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
|
475
|
-
--rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
|
476
|
-
|
477
|
-
--rdp-gradient-direction: 90deg;
|
478
|
-
}
|
479
|
-
|
480
|
-
.rdp-root[dir="rtl"] {
|
481
|
-
--rdp-gradient-direction: -90deg;
|
482
|
-
}
|
483
|
-
|
484
|
-
/* Root of the component. */
|
485
|
-
.rdp-root {
|
486
|
-
position: relative; /* Required to position the navigation toolbar. */
|
487
|
-
box-sizing: border-box;
|
488
|
-
}
|
489
|
-
|
490
|
-
.rdp-root * {
|
491
|
-
box-sizing: border-box;
|
492
|
-
}
|
493
|
-
|
494
|
-
.rdp-day {
|
495
|
-
width: var(--rdp-day-width);
|
496
|
-
height: var(--rdp-day-height);
|
497
|
-
font: var(--rdp-day-font);
|
498
|
-
text-align: center;
|
499
|
-
}
|
500
|
-
|
501
|
-
.rdp-day_button {
|
502
|
-
background: none;
|
503
|
-
padding: 0;
|
504
|
-
margin: 0;
|
505
|
-
cursor: pointer;
|
506
|
-
font: inherit;
|
507
|
-
color: inherit;
|
508
|
-
justify-content: center;
|
509
|
-
align-items: center;
|
510
|
-
display: flex;
|
511
|
-
|
512
|
-
width: var(--rdp-day_button-width);
|
513
|
-
height: var(--rdp-day_button-height);
|
514
|
-
border: var(--rdp-day_button-border);
|
515
|
-
border-radius: var(--rdp-day_button-border-radius);
|
516
|
-
}
|
517
|
-
|
518
|
-
.rdp-day_button:disabled {
|
519
|
-
cursor: revert;
|
520
|
-
}
|
521
|
-
|
522
|
-
.rdp-caption_label {
|
523
|
-
z-index: 1;
|
524
|
-
|
525
|
-
position: relative;
|
526
|
-
display: inline-flex;
|
527
|
-
align-items: center;
|
528
|
-
|
529
|
-
white-space: nowrap;
|
530
|
-
border: 0;
|
531
|
-
}
|
532
|
-
|
533
|
-
.rdp-button_next,
|
534
|
-
.rdp-button_previous {
|
535
|
-
border: none;
|
536
|
-
background: none;
|
537
|
-
padding: 0;
|
538
|
-
margin: 0;
|
539
|
-
cursor: pointer;
|
540
|
-
font: inherit;
|
541
|
-
color: inherit;
|
542
|
-
-moz-appearance: none;
|
543
|
-
-webkit-appearance: none;
|
544
|
-
display: inline-flex;
|
545
|
-
align-items: center;
|
546
|
-
justify-content: center;
|
547
|
-
position: relative;
|
548
|
-
appearance: none;
|
549
|
-
|
550
|
-
width: var(--rdp-nav_button-width);
|
551
|
-
height: var(--rdp-nav_button-height);
|
552
|
-
}
|
553
|
-
|
554
|
-
.rdp-button_next:disabled,
|
555
|
-
.rdp-button_previous:disabled {
|
556
|
-
cursor: revert;
|
557
|
-
|
558
|
-
opacity: var(--rdp-nav_button-disabled-opacity);
|
559
|
-
}
|
560
|
-
|
561
|
-
.rdp-chevron {
|
562
|
-
display: inline-block;
|
563
|
-
fill: var(--rdp-accent-color);
|
564
|
-
}
|
565
|
-
|
566
|
-
.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
|
567
|
-
transform: rotate(180deg);
|
568
|
-
}
|
569
395
|
|
570
|
-
.
|
571
|
-
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
.rdp-dropdowns {
|
576
|
-
position: relative;
|
577
|
-
display: inline-flex;
|
578
|
-
align-items: center;
|
579
|
-
gap: var(--rdp-dropdown-gap);
|
580
|
-
}
|
581
|
-
.rdp-dropdown {
|
582
|
-
z-index: 2;
|
583
|
-
|
584
|
-
/* Reset */
|
585
|
-
opacity: 0;
|
586
|
-
appearance: none;
|
587
|
-
position: absolute;
|
588
|
-
inset-block-start: 0;
|
589
|
-
inset-block-end: 0;
|
590
|
-
inset-inline-start: 0;
|
591
|
-
width: 100%;
|
592
|
-
margin: 0;
|
593
|
-
padding: 0;
|
594
|
-
cursor: inherit;
|
595
|
-
border: none;
|
596
|
-
line-height: inherit;
|
597
|
-
}
|
598
|
-
|
599
|
-
.rdp-dropdown_root {
|
600
|
-
position: relative;
|
601
|
-
display: inline-flex;
|
602
|
-
align-items: center;
|
603
|
-
}
|
604
|
-
|
605
|
-
.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
|
606
|
-
opacity: var(--rdp-disabled-opacity);
|
607
|
-
}
|
608
|
-
|
609
|
-
.rdp-month_caption {
|
610
|
-
display: flex;
|
611
|
-
align-content: center;
|
612
|
-
height: var(--rdp-nav-height);
|
613
|
-
font: var(--rdp-month_caption-font);
|
614
|
-
}
|
615
|
-
|
616
|
-
.rdp-months {
|
617
|
-
position: relative;
|
618
|
-
display: flex;
|
619
|
-
flex-wrap: wrap;
|
620
|
-
gap: var(--rdp-months-gap);
|
621
|
-
max-width: fit-content;
|
622
|
-
}
|
396
|
+
.ff-time-picker-options {
|
397
|
+
height: 86%;
|
398
|
+
overflow-y: auto;
|
399
|
+
padding-right: 5px;
|
623
400
|
|
624
|
-
|
625
|
-
|
626
|
-
|
627
|
-
|
628
|
-
.rdp-nav {
|
629
|
-
position: absolute;
|
630
|
-
inset-block-start: 0;
|
631
|
-
inset-inline-end: 0;
|
632
|
-
|
633
|
-
display: flex;
|
634
|
-
align-items: center;
|
635
|
-
|
636
|
-
height: var(--rdp-nav-height);
|
637
|
-
}
|
638
|
-
|
639
|
-
.rdp-weekday {
|
640
|
-
opacity: var(--rdp-weekday-opacity);
|
641
|
-
padding: var(--rdp-weekday-padding);
|
642
|
-
font: var(--rdp-weekday-font);
|
643
|
-
text-align: var(--rdp-weekday-text-align);
|
644
|
-
text-transform: var(--rdp-weekday-text-transform);
|
645
|
-
}
|
646
|
-
|
647
|
-
.rdp-week_number {
|
648
|
-
opacity: var(--rdp-week_number-opacity);
|
649
|
-
font: var(--rdp-week_number-font);
|
650
|
-
height: var(--rdp-week_number-height);
|
651
|
-
width: var(--rdp-week_number-width);
|
652
|
-
border: var(--rdp-week_number-border);
|
653
|
-
border-radius: var(--rdp-week_number-border-radius);
|
654
|
-
text-align: var(--rdp-weeknumber-text-align);
|
655
|
-
}
|
656
|
-
|
657
|
-
/* DAY MODIFIERS */
|
658
|
-
.rdp-today:not(.rdp-outside) {
|
659
|
-
color: var(--rdp-today-color);
|
660
|
-
}
|
661
|
-
|
662
|
-
.rdp-selected {
|
663
|
-
font: var(--rdp-selected-font);
|
664
|
-
}
|
665
|
-
|
666
|
-
.rdp-selected .rdp-day_button {
|
667
|
-
border: var(--rdp-selected-border);
|
668
|
-
}
|
669
|
-
|
670
|
-
.rdp-outside {
|
671
|
-
opacity: var(--rdp-outside-opacity);
|
672
|
-
}
|
673
|
-
|
674
|
-
.rdp-disabled {
|
675
|
-
opacity: var(--rdp-disabled-opacity);
|
676
|
-
}
|
677
|
-
|
678
|
-
.rdp-hidden {
|
679
|
-
visibility: hidden;
|
680
|
-
color: var(--rdp-range_start-color);
|
681
|
-
}
|
682
|
-
|
683
|
-
.rdp-range_start {
|
684
|
-
background: var(--rdp-range_start-background);
|
685
|
-
}
|
686
|
-
|
687
|
-
.rdp-range_start .rdp-day_button {
|
688
|
-
background-color: var(--rdp-range_start-date-background-color);
|
689
|
-
color: var(--rdp-range_start-color);
|
690
|
-
}
|
691
|
-
|
692
|
-
.rdp-range_middle {
|
693
|
-
background-color: var(--rdp-range_middle-background-color);
|
694
|
-
font: var(--rdp-range_middle-font);
|
695
|
-
}
|
696
|
-
|
697
|
-
.rdp-range_middle .rdp-day_button {
|
698
|
-
border-color: transparent;
|
699
|
-
border: unset;
|
700
|
-
border-radius: unset;
|
701
|
-
color: var(--rdp-range_middle-color);
|
702
|
-
}
|
703
|
-
|
704
|
-
.rdp-range_end {
|
705
|
-
background: var(--rdp-range_end-background);
|
706
|
-
color: var(--rdp-range_end-color);
|
707
|
-
}
|
401
|
+
&::-webkit-scrollbar {
|
402
|
+
width: 4px;
|
403
|
+
height: 12px;
|
708
404
|
|
709
|
-
|
710
|
-
|
711
|
-
|
712
|
-
}
|
405
|
+
&-thumb {
|
406
|
+
background-color: var(--ff-select-scroll-thumb-color);
|
407
|
+
border-radius: 4px;
|
408
|
+
}
|
713
409
|
|
714
|
-
|
715
|
-
|
716
|
-
|
410
|
+
&-track {
|
411
|
+
background-color: var(--hover-color); // color need to be change
|
412
|
+
border-radius: 4px;
|
413
|
+
}
|
414
|
+
}
|
717
415
|
|
718
|
-
.
|
719
|
-
|
416
|
+
.ff-time-option {
|
417
|
+
padding: 10px 12px;
|
418
|
+
cursor: pointer;
|
419
|
+
text-align: center;
|
420
|
+
border-radius: 8px;
|
421
|
+
background-color: rgba(249, 249, 249); // color need to be change
|
422
|
+
margin: 10px 0;
|
423
|
+
}
|
424
|
+
}
|
720
425
|
}
|
721
426
|
|
722
|
-
|
723
|
-
// Adding react day picker library node modules css here to get the css style available in platform
|
427
|
+
// Adding react day picker library node modules css here to get the css style available in platform
|
724
428
|
|
725
429
|
/* Variables declaration */
|
726
430
|
/* prettier-ignore */
|
727
431
|
.rdp-root {
|
728
|
-
--rdp-accent-color: blue;
|
729
|
-
|
730
|
-
--rdp-
|
731
|
-
|
732
|
-
--rdp-
|
733
|
-
|
734
|
-
|
735
|
-
|
736
|
-
|
737
|
-
--rdp-
|
738
|
-
|
739
|
-
--rdp-
|
740
|
-
|
741
|
-
|
742
|
-
--rdp-
|
743
|
-
|
744
|
-
--rdp-
|
745
|
-
|
746
|
-
|
747
|
-
|
748
|
-
|
749
|
-
|
750
|
-
|
751
|
-
|
752
|
-
|
753
|
-
--rdp-
|
754
|
-
|
755
|
-
--rdp-
|
756
|
-
|
757
|
-
--rdp-
|
758
|
-
|
759
|
-
--rdp-
|
760
|
-
|
761
|
-
|
762
|
-
--rdp-
|
763
|
-
|
764
|
-
|
765
|
-
|
766
|
-
|
767
|
-
--rdp-
|
768
|
-
|
769
|
-
|
770
|
-
--rdp-
|
771
|
-
|
772
|
-
--rdp-
|
773
|
-
|
774
|
-
--rdp-
|
775
|
-
|
776
|
-
--rdp-
|
777
|
-
|
778
|
-
|
779
|
-
--rdp-
|
780
|
-
|
781
|
-
--rdp-
|
432
|
+
--rdp-accent-color: blue;
|
433
|
+
/* The accent color used for selected days and UI elements. */
|
434
|
+
--rdp-accent-background-color: #f0f0ff;
|
435
|
+
/* The accent background color used for selected days and UI elements. */
|
436
|
+
--rdp-font-family: system-ui;
|
437
|
+
/* The font family used by the calendar. Note that `inherit`does not work here. */
|
438
|
+
|
439
|
+
--rdp-day-font: inherit;
|
440
|
+
/* The font used for the day cells. */
|
441
|
+
--rdp-day-height: 2.75rem;
|
442
|
+
/* The height of the day cells. */
|
443
|
+
--rdp-day-width: 2.75rem;
|
444
|
+
/* The width of the day cells. */
|
445
|
+
|
446
|
+
--rdp-day_button-border-radius: 100%;
|
447
|
+
/* The border radius of the day cells. */
|
448
|
+
--rdp-day_button-border: 2px solid transparent;
|
449
|
+
/* The border of the day cells. */
|
450
|
+
--rdp-day_button-height: var(--rdp-day-height);
|
451
|
+
/* The height of the day cells. */
|
452
|
+
--rdp-day_button-width: var(--rdp-day-width);
|
453
|
+
/* The width of the day cells. */
|
454
|
+
|
455
|
+
--rdp-selected-border: 2px solid var(--rdp-accent-color);
|
456
|
+
/* The border of the selected days. */
|
457
|
+
--rdp-selected-font: bold large var(--rdp-font-family);
|
458
|
+
/* The font of the selected days. */
|
459
|
+
--rdp-disabled-opacity: 0.5;
|
460
|
+
/* The opacity of the disabled days. */
|
461
|
+
--rdp-outside-opacity: 0.75;
|
462
|
+
/* The opacity of the days outside the current month. */
|
463
|
+
--rdp-today-color: var(--rdp-accent-color);
|
464
|
+
/* The color of the today's date. */
|
465
|
+
|
466
|
+
--rdp-dropdown-gap: 0.5rem;
|
467
|
+
/* The gap between the dropdowns used in the month captons. */
|
468
|
+
|
469
|
+
--rdp-month_caption-font: bold larger var(--rdp-font-family);
|
470
|
+
/* The font of the month caption. */
|
471
|
+
--rdp-months-gap: 2rem;
|
472
|
+
/* The gap between the months in the multi-month view. */
|
473
|
+
|
474
|
+
--rdp-nav_button-disabled-opacity: 0.5;
|
475
|
+
/* The opacity of the disabled navigation buttons. */
|
476
|
+
--rdp-nav_button-height: 2.25rem;
|
477
|
+
/* The height of the navigation buttons. */
|
478
|
+
--rdp-nav_button-width: 2.25rem;
|
479
|
+
/* The width of the navigation buttons. */
|
480
|
+
--rdp-nav-height: 2.75rem;
|
481
|
+
/* The height of the navigation bar. */
|
482
|
+
|
483
|
+
--rdp-range_middle-background-color: var(--rdp-accent-background-color);
|
484
|
+
/* The color of the background for days in the middle of a range. */
|
485
|
+
--rdp-range_middle-font: normal medium var(--rdp-font-family);
|
486
|
+
/* The font for days in the middle of a range. */
|
487
|
+
--rdp-range_middle-foreground-color: white;
|
488
|
+
/* The font for days in the middle of a range. */
|
489
|
+
--rdp-range_middle-color: inherit;
|
490
|
+
/* The color of the range text. */
|
491
|
+
|
492
|
+
--rdp-range_start-color: white;
|
493
|
+
/* The color of the range text. */
|
494
|
+
--rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);
|
495
|
+
/* Used for the background of the start of the selected range. */
|
496
|
+
--rdp-range_start-date-background-color: var(--rdp-accent-color);
|
497
|
+
/* The background color of the date when at the start of the selected range. */
|
498
|
+
|
499
|
+
--rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);
|
500
|
+
/* Used for the background of the end of the selected range. */
|
501
|
+
--rdp-range_end-color: white;
|
502
|
+
/* The color of the range text. */
|
503
|
+
--rdp-range_end-date-background-color: var(--rdp-accent-color);
|
504
|
+
/* The background color of the date when at the end of the selected range. */
|
505
|
+
|
506
|
+
--rdp-week_number-border-radius: 100%;
|
507
|
+
/* The border radius of the week number. */
|
508
|
+
--rdp-week_number-border: 2px solid transparent;
|
509
|
+
/* The border of the week number. */
|
510
|
+
--rdp-week_number-font: 400 small var(--rdp-font-family);
|
511
|
+
/* The font of the week number cells. */
|
512
|
+
--rdp-week_number-height: var(--rdp-day-height);
|
513
|
+
/* The height of the week number cells. */
|
514
|
+
--rdp-week_number-opacity: 0.75;
|
515
|
+
/* The opacity of the week number. */
|
516
|
+
--rdp-week_number-width: var(--rdp-day-width);
|
517
|
+
/* The width of the week number cells. */
|
518
|
+
--rdp-weeknumber-text-align: center;
|
519
|
+
/* The text alignment of the weekday cells. */
|
520
|
+
|
521
|
+
--rdp-weekday-font: 500 smaller var(--rdp-font-family);
|
522
|
+
/* The font of the weekday. */
|
523
|
+
--rdp-weekday-opacity: 0.75;
|
524
|
+
/* The opacity of the weekday. */
|
525
|
+
--rdp-weekday-padding: 0.5rem 0rem;
|
526
|
+
/* The padding of the weekday. */
|
527
|
+
--rdp-weekday-text-align: center;
|
528
|
+
/* The text alignment of the weekday cells. */
|
782
529
|
|
783
530
|
--rdp-gradient-direction: 90deg;
|
784
531
|
}
|
785
532
|
|
786
|
-
.rdp-root[dir=
|
533
|
+
.rdp-root[dir='rtl'] {
|
787
534
|
--rdp-gradient-direction: -90deg;
|
788
535
|
}
|
789
536
|
|
790
537
|
/* Root of the component. */
|
791
538
|
.rdp-root {
|
792
|
-
position: relative;
|
539
|
+
position: relative;
|
540
|
+
/* Required to position the navigation toolbar. */
|
793
541
|
box-sizing: border-box;
|
794
542
|
}
|
795
543
|
|
@@ -869,11 +617,11 @@
|
|
869
617
|
fill: var(--rdp-accent-color);
|
870
618
|
}
|
871
619
|
|
872
|
-
.rdp-root[dir=
|
620
|
+
.rdp-root[dir='rtl'] .rdp-nav .rdp-chevron {
|
873
621
|
transform: rotate(180deg);
|
874
622
|
}
|
875
623
|
|
876
|
-
.rdp-root[dir=
|
624
|
+
.rdp-root[dir='rtl'] .rdp-nav .rdp-chevron {
|
877
625
|
transform: rotate(180deg);
|
878
626
|
transform-origin: 50%;
|
879
627
|
}
|
@@ -884,6 +632,7 @@
|
|
884
632
|
align-items: center;
|
885
633
|
gap: var(--rdp-dropdown-gap);
|
886
634
|
}
|
635
|
+
|
887
636
|
.rdp-dropdown {
|
888
637
|
z-index: 2;
|
889
638
|
|
@@ -908,7 +657,7 @@
|
|
908
657
|
align-items: center;
|
909
658
|
}
|
910
659
|
|
911
|
-
.rdp-dropdown_root[data-disabled=
|
660
|
+
.rdp-dropdown_root[data-disabled='true'] .rdp-chevron {
|
912
661
|
opacity: var(--rdp-disabled-opacity);
|
913
662
|
}
|
914
663
|
|
@@ -1024,5 +773,3 @@
|
|
1024
773
|
.rdp-focusable {
|
1025
774
|
cursor: pointer;
|
1026
775
|
}
|
1027
|
-
|
1028
|
-
|