@skewedaspect/sleekspace-ui 0.9.1 → 0.10.0
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/dist/components/Accordion/context.d.ts +4 -0
- package/dist/components/Autocomplete/SkAutocomplete.vue.d.ts +87 -0
- package/dist/components/Autocomplete/SkAutocompleteEmpty.vue.d.ts +17 -0
- package/dist/components/Autocomplete/SkAutocompleteGroup.vue.d.ts +17 -0
- package/dist/components/Autocomplete/SkAutocompleteGroupLabel.vue.d.ts +17 -0
- package/dist/components/Autocomplete/SkAutocompleteItem.vue.d.ts +39 -0
- package/dist/components/Autocomplete/SkAutocompleteSeparator.vue.d.ts +2 -0
- package/dist/components/Autocomplete/index.d.ts +7 -0
- package/dist/components/Autocomplete/types.d.ts +3 -0
- package/dist/components/Breadcrumbs/context.d.ts +4 -0
- package/dist/components/Button/SkButton.vue.d.ts +8 -1
- package/dist/components/Button/types.d.ts +2 -0
- package/dist/components/Card/SkCard.vue.d.ts +1 -1
- package/dist/components/ContextMenu/context.d.ts +3 -0
- package/dist/components/Dropdown/SkDropdown.vue.d.ts +1 -1
- package/dist/components/Dropdown/context.d.ts +3 -0
- package/dist/components/Field/SkField.vue.d.ts +7 -6
- package/dist/components/Input/SkInput.vue.d.ts +9 -2
- package/dist/components/Input/types.d.ts +2 -0
- package/dist/components/InputGroup/SkInputGroup.vue.d.ts +23 -0
- package/dist/components/InputGroup/SkInputGroupAddon.vue.d.ts +33 -0
- package/dist/components/InputGroup/types.d.ts +13 -0
- package/dist/components/NumberInput/SkNumberInput.vue.d.ts +7 -1
- package/dist/components/NumberInput/types.d.ts +2 -0
- package/dist/components/Pagination/context.d.ts +5 -0
- package/dist/components/Panel/SkPanel.vue.d.ts +1 -1
- package/dist/components/Panel/types.d.ts +2 -1
- package/dist/components/Radio/context.d.ts +4 -0
- package/dist/components/Select/SkSelect.vue.d.ts +7 -1
- package/dist/components/Select/types.d.ts +2 -0
- package/dist/components/Sidebar/SkSidebar.vue.d.ts +1 -1
- package/dist/components/Tabs/context.d.ts +6 -0
- package/dist/components/Textarea/SkTextarea.vue.d.ts +1 -1
- package/dist/components/Tooltip/SkTooltip.vue.d.ts +1 -1
- package/dist/composables/injectionKeys.d.ts +9 -0
- package/dist/global.d.ts +4 -0
- package/dist/index.d.ts +18 -0
- package/dist/sleekspace-ui.css +831 -277
- package/dist/sleekspace-ui.es.js +3693 -2514
- package/dist/sleekspace-ui.umd.js +3700 -2513
- package/dist/static/components/alert.d.ts +2 -1
- package/dist/static/components/avatar.d.ts +2 -1
- package/dist/static/components/breadcrumbs.d.ts +2 -1
- package/dist/static/components/button.d.ts +4 -2
- package/dist/static/components/card.d.ts +2 -1
- package/dist/static/components/checkbox.d.ts +2 -1
- package/dist/static/components/colorPicker.d.ts +2 -1
- package/dist/static/components/divider.d.ts +2 -1
- package/dist/static/components/dropdown.d.ts +2 -1
- package/dist/static/components/field.d.ts +2 -1
- package/dist/static/components/group.d.ts +2 -1
- package/dist/static/components/input.d.ts +4 -2
- package/dist/static/components/inputGroup.d.ts +8 -0
- package/dist/static/components/inputGroupAddon.d.ts +7 -0
- package/dist/static/components/navBar.d.ts +2 -1
- package/dist/static/components/numberInput.d.ts +4 -2
- package/dist/static/components/page.d.ts +2 -1
- package/dist/static/components/pagination.d.ts +2 -1
- package/dist/static/components/panel.d.ts +2 -1
- package/dist/static/components/progress.d.ts +2 -1
- package/dist/static/components/radio.d.ts +2 -1
- package/dist/static/components/select.d.ts +4 -2
- package/dist/static/components/sidebar.d.ts +2 -1
- package/dist/static/components/skeleton.d.ts +2 -1
- package/dist/static/components/slider.d.ts +2 -1
- package/dist/static/components/spinner.d.ts +2 -1
- package/dist/static/components/switchInput.d.ts +2 -1
- package/dist/static/components/table.d.ts +2 -1
- package/dist/static/components/tag.d.ts +2 -1
- package/dist/static/components/tagsInput.d.ts +2 -1
- package/dist/static/components/textarea.d.ts +2 -1
- package/dist/static/components/toolbar.d.ts +2 -1
- package/dist/static/components/tooltip.d.ts +2 -1
- package/dist/static/h.d.ts +2 -0
- package/dist/static/index.cjs.js +1 -1
- package/dist/static/index.d.ts +6 -0
- package/dist/static/index.es.js +366 -216
- package/dist/static/render.d.ts +2 -1
- package/dist/static/stringH.d.ts +2 -0
- package/dist/static/types.d.ts +5 -0
- package/dist/tailwind.css +222 -0
- package/dist/tokens.css +0 -223
- package/dist/types/corners.d.ts +1 -0
- package/llms-full.txt +14 -9
- package/package.json +6 -3
- package/src/components/Accordion/SkAccordion.vue +5 -2
- package/src/components/Accordion/SkAccordionItem.vue +7 -4
- package/src/components/Accordion/context.ts +23 -0
- package/src/components/Autocomplete/SkAutocomplete.test.ts +83 -0
- package/src/components/Autocomplete/SkAutocomplete.vue +305 -0
- package/src/components/Autocomplete/SkAutocompleteEmpty.vue +39 -0
- package/src/components/Autocomplete/SkAutocompleteGroup.vue +46 -0
- package/src/components/Autocomplete/SkAutocompleteGroupLabel.vue +39 -0
- package/src/components/Autocomplete/SkAutocompleteItem.vue +85 -0
- package/src/components/Autocomplete/SkAutocompleteSeparator.vue +39 -0
- package/src/components/Autocomplete/index.ts +13 -0
- package/src/components/Autocomplete/types.ts +10 -0
- package/src/components/Breadcrumbs/SkBreadcrumbItem.vue +8 -3
- package/src/components/Breadcrumbs/SkBreadcrumbSeparator.vue +8 -2
- package/src/components/Breadcrumbs/SkBreadcrumbs.vue +5 -2
- package/src/components/Breadcrumbs/context.ts +20 -0
- package/src/components/Button/SkButton.vue +46 -6
- package/src/components/Button/types.ts +6 -0
- package/src/components/ColorPicker/SkColorPicker.vue +27 -5
- package/src/components/ContextMenu/SkContextMenu.vue +4 -1
- package/src/components/ContextMenu/SkContextMenuSubmenu.vue +5 -2
- package/src/components/ContextMenu/context.ts +17 -0
- package/src/components/Dropdown/SkDropdown.vue +2 -1
- package/src/components/Dropdown/SkDropdownSubmenu.vue +4 -3
- package/src/components/Dropdown/context.ts +16 -0
- package/src/components/Field/SkField.test.ts +88 -0
- package/src/components/Field/SkField.vue +15 -7
- package/src/components/Input/SkInput.test.ts +61 -0
- package/src/components/Input/SkInput.vue +42 -7
- package/src/components/Input/types.ts +2 -0
- package/src/components/InputGroup/SkInputGroup.test.ts +171 -0
- package/src/components/InputGroup/SkInputGroup.vue +131 -0
- package/src/components/InputGroup/SkInputGroupAddon.test.ts +104 -0
- package/src/components/InputGroup/SkInputGroupAddon.vue +107 -0
- package/src/components/InputGroup/types.ts +27 -0
- package/src/components/Listbox/SkListbox.vue +27 -6
- package/src/components/NumberInput/SkNumberInput.vue +39 -7
- package/src/components/NumberInput/types.ts +2 -0
- package/src/components/Pagination/SkPagination.vue +6 -3
- package/src/components/Pagination/SkPaginationItem.vue +8 -5
- package/src/components/Pagination/context.ts +19 -0
- package/src/components/Panel/types.ts +3 -2
- package/src/components/Radio/SkRadio.vue +6 -3
- package/src/components/Radio/SkRadioGroup.vue +4 -2
- package/src/components/Radio/context.ts +17 -0
- package/src/components/Select/SkSelect.vue +39 -7
- package/src/components/Select/types.ts +2 -0
- package/src/components/Tabs/SkTab.vue +4 -2
- package/src/components/Tabs/SkTabList.vue +4 -2
- package/src/components/Tabs/SkTabs.vue +5 -3
- package/src/components/Tabs/context.ts +19 -0
- package/src/components/TagsInput/SkTagsInput.vue +28 -7
- package/src/components/Textarea/SkTextarea.vue +27 -6
- package/src/composables/injectionKeys.ts +52 -0
- package/src/index.ts +28 -0
- package/src/static/__tests__/parity.test.ts +2 -1
- package/src/static/__tests__/parityHarness.ts +5 -2
- package/src/static/components/__tests__/helpers.test.ts +191 -99
- package/src/static/components/alert.ts +12 -11
- package/src/static/components/avatar.ts +15 -16
- package/src/static/components/breadcrumbs.ts +3 -2
- package/src/static/components/button.ts +23 -27
- package/src/static/components/card.ts +3 -2
- package/src/static/components/checkbox.ts +11 -14
- package/src/static/components/colorPicker.ts +7 -9
- package/src/static/components/divider.ts +4 -3
- package/src/static/components/dropdown.ts +15 -6
- package/src/static/components/field.ts +32 -15
- package/src/static/components/group.ts +3 -2
- package/src/static/components/input.ts +20 -15
- package/src/static/components/inputGroup.ts +30 -0
- package/src/static/components/inputGroupAddon.ts +29 -0
- package/src/static/components/navBar.ts +30 -17
- package/src/static/components/numberInput.ts +17 -17
- package/src/static/components/page.ts +3 -2
- package/src/static/components/pagination.ts +3 -2
- package/src/static/components/panel.ts +3 -2
- package/src/static/components/progress.ts +3 -2
- package/src/static/components/radio.ts +14 -20
- package/src/static/components/select.ts +18 -15
- package/src/static/components/sidebar.ts +9 -13
- package/src/static/components/skeleton.ts +7 -10
- package/src/static/components/slider.ts +7 -9
- package/src/static/components/spinner.ts +22 -22
- package/src/static/components/switchInput.ts +12 -14
- package/src/static/components/table.ts +8 -10
- package/src/static/components/tag.ts +17 -11
- package/src/static/components/tagsInput.ts +3 -3
- package/src/static/components/textarea.ts +8 -13
- package/src/static/components/toolbar.ts +7 -10
- package/src/static/components/tooltip.ts +3 -2
- package/src/static/generated/defaults.ts +24 -9
- package/src/static/generated/propTypes.ts +18 -2
- package/src/static/h.ts +16 -0
- package/src/static/index.ts +8 -0
- package/src/static/render.test.ts +14 -10
- package/src/static/render.ts +33 -18
- package/src/static/specs.test.ts +1 -0
- package/src/static/specs.ts +22 -2
- package/src/static/stringH.ts +104 -0
- package/src/static/types.ts +25 -0
- package/src/styles/components/_autocomplete.scss +498 -0
- package/src/styles/components/_button.scss +55 -6
- package/src/styles/components/_index.scss +2 -0
- package/src/styles/components/_input-group.scss +292 -0
- package/src/styles/components/_input.scss +57 -9
- package/src/styles/components/_number-input.scss +84 -18
- package/src/styles/components/_select.scss +56 -9
- package/src/styles/mixins/_cut-border.scss +83 -0
- package/src/styles/tailwind.scss +262 -0
- package/src/styles/tokens.scss +8 -255
- package/src/types/corners.ts +10 -0
- package/src/utils/slots.test.ts +89 -0
- package/src/utils/slots.ts +6 -1
- package/web-types.json +382 -12
package/dist/sleekspace-ui.css
CHANGED
|
@@ -1149,228 +1149,6 @@
|
|
|
1149
1149
|
);
|
|
1150
1150
|
}
|
|
1151
1151
|
|
|
1152
|
-
@theme inline {
|
|
1153
|
-
/* Semantic Colors (theme-aware - change based on SkTheme) */
|
|
1154
|
-
/* Each semantic color gets a full shade range using oklch lightness modifications */
|
|
1155
|
-
/* Neutral */
|
|
1156
|
-
--color-sk-neutral: var(--sk-neutral-base);
|
|
1157
|
-
--color-sk-neutral-text: var(--sk-neutral-text);
|
|
1158
|
-
--color-sk-neutral-5: oklch(from var(--sk-neutral-base) 0.95 c h);
|
|
1159
|
-
--color-sk-neutral-10: oklch(from var(--sk-neutral-base) 0.90 c h);
|
|
1160
|
-
--color-sk-neutral-20: oklch(from var(--sk-neutral-base) 0.85 c h);
|
|
1161
|
-
--color-sk-neutral-30: oklch(from var(--sk-neutral-base) 0.80 c h);
|
|
1162
|
-
--color-sk-neutral-40: oklch(from var(--sk-neutral-base) 0.75 c h);
|
|
1163
|
-
--color-sk-neutral-50: var(--sk-neutral-base);
|
|
1164
|
-
--color-sk-neutral-60: oklch(from var(--sk-neutral-base) calc(l * 0.85) c h);
|
|
1165
|
-
--color-sk-neutral-70: oklch(from var(--sk-neutral-base) calc(l * 0.70) c h);
|
|
1166
|
-
--color-sk-neutral-80: oklch(from var(--sk-neutral-base) calc(l * 0.55) c h);
|
|
1167
|
-
--color-sk-neutral-90: oklch(from var(--sk-neutral-base) calc(l * 0.40) c h);
|
|
1168
|
-
--color-sk-neutral-95: oklch(from var(--sk-neutral-base) calc(l * 0.25) c h);
|
|
1169
|
-
/* Primary */
|
|
1170
|
-
--color-sk-primary: var(--sk-primary-base);
|
|
1171
|
-
--color-sk-primary-text: var(--sk-primary-text);
|
|
1172
|
-
--color-sk-primary-5: oklch(from var(--sk-primary-base) 0.95 c h);
|
|
1173
|
-
--color-sk-primary-10: oklch(from var(--sk-primary-base) 0.90 c h);
|
|
1174
|
-
--color-sk-primary-20: oklch(from var(--sk-primary-base) 0.85 c h);
|
|
1175
|
-
--color-sk-primary-30: oklch(from var(--sk-primary-base) 0.80 c h);
|
|
1176
|
-
--color-sk-primary-40: oklch(from var(--sk-primary-base) 0.75 c h);
|
|
1177
|
-
--color-sk-primary-50: var(--sk-primary-base);
|
|
1178
|
-
--color-sk-primary-60: oklch(from var(--sk-primary-base) calc(l * 0.85) c h);
|
|
1179
|
-
--color-sk-primary-70: oklch(from var(--sk-primary-base) calc(l * 0.70) c h);
|
|
1180
|
-
--color-sk-primary-80: oklch(from var(--sk-primary-base) calc(l * 0.55) c h);
|
|
1181
|
-
--color-sk-primary-90: oklch(from var(--sk-primary-base) calc(l * 0.40) c h);
|
|
1182
|
-
--color-sk-primary-95: oklch(from var(--sk-primary-base) calc(l * 0.25) c h);
|
|
1183
|
-
/* Accent */
|
|
1184
|
-
--color-sk-accent: var(--sk-accent-base);
|
|
1185
|
-
--color-sk-accent-text: var(--sk-accent-text);
|
|
1186
|
-
--color-sk-accent-5: oklch(from var(--sk-accent-base) 0.95 c h);
|
|
1187
|
-
--color-sk-accent-10: oklch(from var(--sk-accent-base) 0.90 c h);
|
|
1188
|
-
--color-sk-accent-20: oklch(from var(--sk-accent-base) 0.85 c h);
|
|
1189
|
-
--color-sk-accent-30: oklch(from var(--sk-accent-base) 0.80 c h);
|
|
1190
|
-
--color-sk-accent-40: oklch(from var(--sk-accent-base) 0.75 c h);
|
|
1191
|
-
--color-sk-accent-50: var(--sk-accent-base);
|
|
1192
|
-
--color-sk-accent-60: oklch(from var(--sk-accent-base) calc(l * 0.85) c h);
|
|
1193
|
-
--color-sk-accent-70: oklch(from var(--sk-accent-base) calc(l * 0.70) c h);
|
|
1194
|
-
--color-sk-accent-80: oklch(from var(--sk-accent-base) calc(l * 0.55) c h);
|
|
1195
|
-
--color-sk-accent-90: oklch(from var(--sk-accent-base) calc(l * 0.40) c h);
|
|
1196
|
-
--color-sk-accent-95: oklch(from var(--sk-accent-base) calc(l * 0.25) c h);
|
|
1197
|
-
/* Info */
|
|
1198
|
-
--color-sk-info: var(--sk-info-base);
|
|
1199
|
-
--color-sk-info-text: var(--sk-info-text);
|
|
1200
|
-
--color-sk-info-5: oklch(from var(--sk-info-base) 0.95 c h);
|
|
1201
|
-
--color-sk-info-10: oklch(from var(--sk-info-base) 0.90 c h);
|
|
1202
|
-
--color-sk-info-20: oklch(from var(--sk-info-base) 0.85 c h);
|
|
1203
|
-
--color-sk-info-30: oklch(from var(--sk-info-base) 0.80 c h);
|
|
1204
|
-
--color-sk-info-40: oklch(from var(--sk-info-base) 0.75 c h);
|
|
1205
|
-
--color-sk-info-50: var(--sk-info-base);
|
|
1206
|
-
--color-sk-info-60: oklch(from var(--sk-info-base) calc(l * 0.85) c h);
|
|
1207
|
-
--color-sk-info-70: oklch(from var(--sk-info-base) calc(l * 0.70) c h);
|
|
1208
|
-
--color-sk-info-80: oklch(from var(--sk-info-base) calc(l * 0.55) c h);
|
|
1209
|
-
--color-sk-info-90: oklch(from var(--sk-info-base) calc(l * 0.40) c h);
|
|
1210
|
-
--color-sk-info-95: oklch(from var(--sk-info-base) calc(l * 0.25) c h);
|
|
1211
|
-
/* Success */
|
|
1212
|
-
--color-sk-success: var(--sk-success-base);
|
|
1213
|
-
--color-sk-success-text: var(--sk-success-text);
|
|
1214
|
-
--color-sk-success-5: oklch(from var(--sk-success-base) 0.95 c h);
|
|
1215
|
-
--color-sk-success-10: oklch(from var(--sk-success-base) 0.90 c h);
|
|
1216
|
-
--color-sk-success-20: oklch(from var(--sk-success-base) 0.85 c h);
|
|
1217
|
-
--color-sk-success-30: oklch(from var(--sk-success-base) 0.80 c h);
|
|
1218
|
-
--color-sk-success-40: oklch(from var(--sk-success-base) 0.75 c h);
|
|
1219
|
-
--color-sk-success-50: var(--sk-success-base);
|
|
1220
|
-
--color-sk-success-60: oklch(from var(--sk-success-base) calc(l * 0.85) c h);
|
|
1221
|
-
--color-sk-success-70: oklch(from var(--sk-success-base) calc(l * 0.70) c h);
|
|
1222
|
-
--color-sk-success-80: oklch(from var(--sk-success-base) calc(l * 0.55) c h);
|
|
1223
|
-
--color-sk-success-90: oklch(from var(--sk-success-base) calc(l * 0.40) c h);
|
|
1224
|
-
--color-sk-success-95: oklch(from var(--sk-success-base) calc(l * 0.25) c h);
|
|
1225
|
-
/* Warning */
|
|
1226
|
-
--color-sk-warning: var(--sk-warning-base);
|
|
1227
|
-
--color-sk-warning-text: var(--sk-warning-text);
|
|
1228
|
-
--color-sk-warning-5: oklch(from var(--sk-warning-base) 0.95 c h);
|
|
1229
|
-
--color-sk-warning-10: oklch(from var(--sk-warning-base) 0.90 c h);
|
|
1230
|
-
--color-sk-warning-20: oklch(from var(--sk-warning-base) 0.85 c h);
|
|
1231
|
-
--color-sk-warning-30: oklch(from var(--sk-warning-base) 0.80 c h);
|
|
1232
|
-
--color-sk-warning-40: oklch(from var(--sk-warning-base) 0.75 c h);
|
|
1233
|
-
--color-sk-warning-50: var(--sk-warning-base);
|
|
1234
|
-
--color-sk-warning-60: oklch(from var(--sk-warning-base) calc(l * 0.85) c h);
|
|
1235
|
-
--color-sk-warning-70: oklch(from var(--sk-warning-base) calc(l * 0.70) c h);
|
|
1236
|
-
--color-sk-warning-80: oklch(from var(--sk-warning-base) calc(l * 0.55) c h);
|
|
1237
|
-
--color-sk-warning-90: oklch(from var(--sk-warning-base) calc(l * 0.40) c h);
|
|
1238
|
-
--color-sk-warning-95: oklch(from var(--sk-warning-base) calc(l * 0.25) c h);
|
|
1239
|
-
/* Danger */
|
|
1240
|
-
--color-sk-danger: var(--sk-danger-base);
|
|
1241
|
-
--color-sk-danger-text: var(--sk-danger-text);
|
|
1242
|
-
--color-sk-danger-5: oklch(from var(--sk-danger-base) 0.95 c h);
|
|
1243
|
-
--color-sk-danger-10: oklch(from var(--sk-danger-base) 0.90 c h);
|
|
1244
|
-
--color-sk-danger-20: oklch(from var(--sk-danger-base) 0.85 c h);
|
|
1245
|
-
--color-sk-danger-30: oklch(from var(--sk-danger-base) 0.80 c h);
|
|
1246
|
-
--color-sk-danger-40: oklch(from var(--sk-danger-base) 0.75 c h);
|
|
1247
|
-
--color-sk-danger-50: var(--sk-danger-base);
|
|
1248
|
-
--color-sk-danger-60: oklch(from var(--sk-danger-base) calc(l * 0.85) c h);
|
|
1249
|
-
--color-sk-danger-70: oklch(from var(--sk-danger-base) calc(l * 0.70) c h);
|
|
1250
|
-
--color-sk-danger-80: oklch(from var(--sk-danger-base) calc(l * 0.55) c h);
|
|
1251
|
-
--color-sk-danger-90: oklch(from var(--sk-danger-base) calc(l * 0.40) c h);
|
|
1252
|
-
--color-sk-danger-95: oklch(from var(--sk-danger-base) calc(l * 0.25) c h);
|
|
1253
|
-
/* Color Palette - Gray */
|
|
1254
|
-
--color-sk-gray-5: var(--sk-color-gray-05);
|
|
1255
|
-
--color-sk-gray-10: var(--sk-color-gray-10);
|
|
1256
|
-
--color-sk-gray-20: var(--sk-color-gray-20);
|
|
1257
|
-
--color-sk-gray-30: var(--sk-color-gray-30);
|
|
1258
|
-
--color-sk-gray-40: var(--sk-color-gray-40);
|
|
1259
|
-
--color-sk-gray-50: var(--sk-color-gray-50);
|
|
1260
|
-
--color-sk-gray-60: var(--sk-color-gray-60);
|
|
1261
|
-
--color-sk-gray-70: var(--sk-color-gray-70);
|
|
1262
|
-
--color-sk-gray-80: var(--sk-color-gray-80);
|
|
1263
|
-
--color-sk-gray-90: var(--sk-color-gray-90);
|
|
1264
|
-
--color-sk-gray-95: var(--sk-color-gray-95);
|
|
1265
|
-
/* Color Palette - Blue */
|
|
1266
|
-
--color-sk-blue-5: var(--sk-color-blue-05);
|
|
1267
|
-
--color-sk-blue-10: var(--sk-color-blue-10);
|
|
1268
|
-
--color-sk-blue-20: var(--sk-color-blue-20);
|
|
1269
|
-
--color-sk-blue-30: var(--sk-color-blue-30);
|
|
1270
|
-
--color-sk-blue-40: var(--sk-color-blue-40);
|
|
1271
|
-
--color-sk-blue-50: var(--sk-color-blue-50);
|
|
1272
|
-
--color-sk-blue-60: var(--sk-color-blue-60);
|
|
1273
|
-
--color-sk-blue-70: var(--sk-color-blue-70);
|
|
1274
|
-
--color-sk-blue-80: var(--sk-color-blue-80);
|
|
1275
|
-
--color-sk-blue-90: var(--sk-color-blue-90);
|
|
1276
|
-
--color-sk-blue-95: var(--sk-color-blue-95);
|
|
1277
|
-
/* Color Palette - Red */
|
|
1278
|
-
--color-sk-red-5: var(--sk-color-red-05);
|
|
1279
|
-
--color-sk-red-10: var(--sk-color-red-10);
|
|
1280
|
-
--color-sk-red-20: var(--sk-color-red-20);
|
|
1281
|
-
--color-sk-red-30: var(--sk-color-red-30);
|
|
1282
|
-
--color-sk-red-40: var(--sk-color-red-40);
|
|
1283
|
-
--color-sk-red-50: var(--sk-color-red-50);
|
|
1284
|
-
--color-sk-red-60: var(--sk-color-red-60);
|
|
1285
|
-
--color-sk-red-70: var(--sk-color-red-70);
|
|
1286
|
-
--color-sk-red-80: var(--sk-color-red-80);
|
|
1287
|
-
--color-sk-red-90: var(--sk-color-red-90);
|
|
1288
|
-
--color-sk-red-95: var(--sk-color-red-95);
|
|
1289
|
-
/* Color Palette - Orange */
|
|
1290
|
-
--color-sk-orange-5: var(--sk-color-orange-05);
|
|
1291
|
-
--color-sk-orange-10: var(--sk-color-orange-10);
|
|
1292
|
-
--color-sk-orange-20: var(--sk-color-orange-20);
|
|
1293
|
-
--color-sk-orange-30: var(--sk-color-orange-30);
|
|
1294
|
-
--color-sk-orange-40: var(--sk-color-orange-40);
|
|
1295
|
-
--color-sk-orange-50: var(--sk-color-orange-50);
|
|
1296
|
-
--color-sk-orange-60: var(--sk-color-orange-60);
|
|
1297
|
-
--color-sk-orange-70: var(--sk-color-orange-70);
|
|
1298
|
-
--color-sk-orange-80: var(--sk-color-orange-80);
|
|
1299
|
-
--color-sk-orange-90: var(--sk-color-orange-90);
|
|
1300
|
-
--color-sk-orange-95: var(--sk-color-orange-95);
|
|
1301
|
-
/* Color Palette - Yellow */
|
|
1302
|
-
--color-sk-yellow-5: var(--sk-color-yellow-05);
|
|
1303
|
-
--color-sk-yellow-10: var(--sk-color-yellow-10);
|
|
1304
|
-
--color-sk-yellow-20: var(--sk-color-yellow-20);
|
|
1305
|
-
--color-sk-yellow-30: var(--sk-color-yellow-30);
|
|
1306
|
-
--color-sk-yellow-40: var(--sk-color-yellow-40);
|
|
1307
|
-
--color-sk-yellow-50: var(--sk-color-yellow-50);
|
|
1308
|
-
--color-sk-yellow-60: var(--sk-color-yellow-60);
|
|
1309
|
-
--color-sk-yellow-70: var(--sk-color-yellow-70);
|
|
1310
|
-
--color-sk-yellow-80: var(--sk-color-yellow-80);
|
|
1311
|
-
--color-sk-yellow-90: var(--sk-color-yellow-90);
|
|
1312
|
-
--color-sk-yellow-95: var(--sk-color-yellow-95);
|
|
1313
|
-
/* Color Palette - Green */
|
|
1314
|
-
--color-sk-green-5: var(--sk-color-green-05);
|
|
1315
|
-
--color-sk-green-10: var(--sk-color-green-10);
|
|
1316
|
-
--color-sk-green-20: var(--sk-color-green-20);
|
|
1317
|
-
--color-sk-green-30: var(--sk-color-green-30);
|
|
1318
|
-
--color-sk-green-40: var(--sk-color-green-40);
|
|
1319
|
-
--color-sk-green-50: var(--sk-color-green-50);
|
|
1320
|
-
--color-sk-green-60: var(--sk-color-green-60);
|
|
1321
|
-
--color-sk-green-70: var(--sk-color-green-70);
|
|
1322
|
-
--color-sk-green-80: var(--sk-color-green-80);
|
|
1323
|
-
--color-sk-green-90: var(--sk-color-green-90);
|
|
1324
|
-
--color-sk-green-95: var(--sk-color-green-95);
|
|
1325
|
-
/* Color Palette - Mint */
|
|
1326
|
-
--color-sk-mint-5: var(--sk-color-mint-05);
|
|
1327
|
-
--color-sk-mint-10: var(--sk-color-mint-10);
|
|
1328
|
-
--color-sk-mint-20: var(--sk-color-mint-20);
|
|
1329
|
-
--color-sk-mint-30: var(--sk-color-mint-30);
|
|
1330
|
-
--color-sk-mint-40: var(--sk-color-mint-40);
|
|
1331
|
-
--color-sk-mint-50: var(--sk-color-mint-50);
|
|
1332
|
-
--color-sk-mint-60: var(--sk-color-mint-60);
|
|
1333
|
-
--color-sk-mint-70: var(--sk-color-mint-70);
|
|
1334
|
-
--color-sk-mint-80: var(--sk-color-mint-80);
|
|
1335
|
-
--color-sk-mint-90: var(--sk-color-mint-90);
|
|
1336
|
-
--color-sk-mint-95: var(--sk-color-mint-95);
|
|
1337
|
-
/* Color Palette - Cyan */
|
|
1338
|
-
--color-sk-cyan-5: var(--sk-color-cyan-05);
|
|
1339
|
-
--color-sk-cyan-10: var(--sk-color-cyan-10);
|
|
1340
|
-
--color-sk-cyan-20: var(--sk-color-cyan-20);
|
|
1341
|
-
--color-sk-cyan-30: var(--sk-color-cyan-30);
|
|
1342
|
-
--color-sk-cyan-40: var(--sk-color-cyan-40);
|
|
1343
|
-
--color-sk-cyan-50: var(--sk-color-cyan-50);
|
|
1344
|
-
--color-sk-cyan-60: var(--sk-color-cyan-60);
|
|
1345
|
-
--color-sk-cyan-70: var(--sk-color-cyan-70);
|
|
1346
|
-
--color-sk-cyan-80: var(--sk-color-cyan-80);
|
|
1347
|
-
--color-sk-cyan-90: var(--sk-color-cyan-90);
|
|
1348
|
-
--color-sk-cyan-95: var(--sk-color-cyan-95);
|
|
1349
|
-
/* Color Palette - Purple */
|
|
1350
|
-
--color-sk-purple-5: var(--sk-color-purple-05);
|
|
1351
|
-
--color-sk-purple-10: var(--sk-color-purple-10);
|
|
1352
|
-
--color-sk-purple-20: var(--sk-color-purple-20);
|
|
1353
|
-
--color-sk-purple-30: var(--sk-color-purple-30);
|
|
1354
|
-
--color-sk-purple-40: var(--sk-color-purple-40);
|
|
1355
|
-
--color-sk-purple-50: var(--sk-color-purple-50);
|
|
1356
|
-
--color-sk-purple-60: var(--sk-color-purple-60);
|
|
1357
|
-
--color-sk-purple-70: var(--sk-color-purple-70);
|
|
1358
|
-
--color-sk-purple-80: var(--sk-color-purple-80);
|
|
1359
|
-
--color-sk-purple-90: var(--sk-color-purple-90);
|
|
1360
|
-
--color-sk-purple-95: var(--sk-color-purple-95);
|
|
1361
|
-
/* Color Palette - Pink */
|
|
1362
|
-
--color-sk-pink-5: var(--sk-color-pink-05);
|
|
1363
|
-
--color-sk-pink-10: var(--sk-color-pink-10);
|
|
1364
|
-
--color-sk-pink-20: var(--sk-color-pink-20);
|
|
1365
|
-
--color-sk-pink-30: var(--sk-color-pink-30);
|
|
1366
|
-
--color-sk-pink-40: var(--sk-color-pink-40);
|
|
1367
|
-
--color-sk-pink-50: var(--sk-color-pink-50);
|
|
1368
|
-
--color-sk-pink-60: var(--sk-color-pink-60);
|
|
1369
|
-
--color-sk-pink-70: var(--sk-color-pink-70);
|
|
1370
|
-
--color-sk-pink-80: var(--sk-color-pink-80);
|
|
1371
|
-
--color-sk-pink-90: var(--sk-color-pink-90);
|
|
1372
|
-
--color-sk-pink-95: var(--sk-color-pink-95);
|
|
1373
|
-
}
|
|
1374
1152
|
@layer base {
|
|
1375
1153
|
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
|
1376
1154
|
/*
|
|
@@ -2361,6 +2139,392 @@
|
|
|
2361
2139
|
color: var(--sk-alert-fg);
|
|
2362
2140
|
border-color: var(--sk-alert-border-color);
|
|
2363
2141
|
}
|
|
2142
|
+
.sk-autocomplete {
|
|
2143
|
+
--sk-autocomplete-color-base: var(--sk-neutral-base);
|
|
2144
|
+
--sk-autocomplete-fg: var(--sk-neutral-text);
|
|
2145
|
+
position: relative;
|
|
2146
|
+
display: inline-flex;
|
|
2147
|
+
width: 100%;
|
|
2148
|
+
}
|
|
2149
|
+
.sk-autocomplete.sk-sm {
|
|
2150
|
+
--sk-autocomplete-cut: 0.4rem;
|
|
2151
|
+
}
|
|
2152
|
+
.sk-autocomplete.sk-md {
|
|
2153
|
+
--sk-autocomplete-cut: 0.5rem;
|
|
2154
|
+
}
|
|
2155
|
+
.sk-autocomplete.sk-lg {
|
|
2156
|
+
--sk-autocomplete-cut: 0.6rem;
|
|
2157
|
+
}
|
|
2158
|
+
.sk-autocomplete.sk-xl {
|
|
2159
|
+
--sk-autocomplete-cut: 0.7rem;
|
|
2160
|
+
}
|
|
2161
|
+
.sk-autocomplete.sk-neutral {
|
|
2162
|
+
--sk-autocomplete-color-base: var(--sk-neutral-base);
|
|
2163
|
+
--sk-autocomplete-fg: var(--sk-neutral-text);
|
|
2164
|
+
}
|
|
2165
|
+
.sk-autocomplete.sk-primary {
|
|
2166
|
+
--sk-autocomplete-color-base: var(--sk-primary-base);
|
|
2167
|
+
--sk-autocomplete-fg: var(--sk-primary-text);
|
|
2168
|
+
}
|
|
2169
|
+
.sk-autocomplete.sk-accent {
|
|
2170
|
+
--sk-autocomplete-color-base: var(--sk-accent-base);
|
|
2171
|
+
--sk-autocomplete-fg: var(--sk-accent-text);
|
|
2172
|
+
}
|
|
2173
|
+
.sk-autocomplete.sk-info {
|
|
2174
|
+
--sk-autocomplete-color-base: var(--sk-info-base);
|
|
2175
|
+
--sk-autocomplete-fg: var(--sk-info-text);
|
|
2176
|
+
}
|
|
2177
|
+
.sk-autocomplete.sk-success {
|
|
2178
|
+
--sk-autocomplete-color-base: var(--sk-success-base);
|
|
2179
|
+
--sk-autocomplete-fg: var(--sk-success-text);
|
|
2180
|
+
}
|
|
2181
|
+
.sk-autocomplete.sk-warning {
|
|
2182
|
+
--sk-autocomplete-color-base: var(--sk-warning-base);
|
|
2183
|
+
--sk-autocomplete-fg: var(--sk-warning-text);
|
|
2184
|
+
}
|
|
2185
|
+
.sk-autocomplete.sk-danger {
|
|
2186
|
+
--sk-autocomplete-color-base: var(--sk-danger-base);
|
|
2187
|
+
--sk-autocomplete-fg: var(--sk-danger-text);
|
|
2188
|
+
}
|
|
2189
|
+
.sk-autocomplete.sk-neon-blue {
|
|
2190
|
+
--sk-autocomplete-color-base: var(--sk-neon-blue-base);
|
|
2191
|
+
--sk-autocomplete-fg: var(--sk-neon-blue-text);
|
|
2192
|
+
}
|
|
2193
|
+
.sk-autocomplete.sk-neon-purple {
|
|
2194
|
+
--sk-autocomplete-color-base: var(--sk-neon-purple-base);
|
|
2195
|
+
--sk-autocomplete-fg: var(--sk-neon-purple-text);
|
|
2196
|
+
}
|
|
2197
|
+
.sk-autocomplete.sk-neon-orange {
|
|
2198
|
+
--sk-autocomplete-color-base: var(--sk-neon-orange-base);
|
|
2199
|
+
--sk-autocomplete-fg: var(--sk-neon-orange-text);
|
|
2200
|
+
}
|
|
2201
|
+
.sk-autocomplete.sk-neon-green {
|
|
2202
|
+
--sk-autocomplete-color-base: var(--sk-neon-green-base);
|
|
2203
|
+
--sk-autocomplete-fg: var(--sk-neon-green-text);
|
|
2204
|
+
}
|
|
2205
|
+
.sk-autocomplete.sk-neon-mint {
|
|
2206
|
+
--sk-autocomplete-color-base: var(--sk-neon-mint-base);
|
|
2207
|
+
--sk-autocomplete-fg: var(--sk-neon-mint-text);
|
|
2208
|
+
}
|
|
2209
|
+
.sk-autocomplete.sk-neon-pink {
|
|
2210
|
+
--sk-autocomplete-color-base: var(--sk-neon-pink-base);
|
|
2211
|
+
--sk-autocomplete-fg: var(--sk-neon-pink-text);
|
|
2212
|
+
}
|
|
2213
|
+
.sk-autocomplete.sk-yellow {
|
|
2214
|
+
--sk-autocomplete-color-base: var(--sk-yellow-base);
|
|
2215
|
+
--sk-autocomplete-fg: var(--sk-yellow-text);
|
|
2216
|
+
}
|
|
2217
|
+
.sk-autocomplete.sk-red {
|
|
2218
|
+
--sk-autocomplete-color-base: var(--sk-red-base);
|
|
2219
|
+
--sk-autocomplete-fg: var(--sk-red-text);
|
|
2220
|
+
}
|
|
2221
|
+
.sk-autocomplete-anchor {
|
|
2222
|
+
display: flex;
|
|
2223
|
+
align-items: center;
|
|
2224
|
+
width: 100%;
|
|
2225
|
+
position: relative;
|
|
2226
|
+
}
|
|
2227
|
+
@supports (corner-shape: bevel) {
|
|
2228
|
+
.sk-autocomplete-anchor {
|
|
2229
|
+
border: var(--sk-border-width-thin) solid var(--sk-autocomplete-color-base);
|
|
2230
|
+
border-top-left-radius: 0;
|
|
2231
|
+
border-top-right-radius: var(--sk-autocomplete-cut);
|
|
2232
|
+
border-bottom-right-radius: 0;
|
|
2233
|
+
border-bottom-left-radius: 0;
|
|
2234
|
+
corner-shape: bevel;
|
|
2235
|
+
}
|
|
2236
|
+
}
|
|
2237
|
+
@supports not (corner-shape: bevel) {
|
|
2238
|
+
.sk-autocomplete-anchor {
|
|
2239
|
+
border: none;
|
|
2240
|
+
clip-path: polygon(0% 0%, calc(100% - var(--sk-autocomplete-cut)) 0%, 100% var(--sk-autocomplete-cut), 100% 100%, 0% 100%);
|
|
2241
|
+
}
|
|
2242
|
+
.sk-autocomplete-anchor::before {
|
|
2243
|
+
content: "";
|
|
2244
|
+
position: absolute;
|
|
2245
|
+
top: 0;
|
|
2246
|
+
left: 0;
|
|
2247
|
+
right: 0;
|
|
2248
|
+
bottom: 0;
|
|
2249
|
+
background-color: var(--sk-autocomplete-color-base);
|
|
2250
|
+
z-index: -1;
|
|
2251
|
+
clip-path: polygon(0% 0%, calc(100% - var(--sk-autocomplete-cut)) 0%, 100% var(--sk-autocomplete-cut), 100% 100%, 0% 100%, 0% 0%, var(--sk-border-width-thin) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(var(--sk-autocomplete-cut) + var(--sk-border-width-thin)), calc(100% - var(--sk-autocomplete-cut) - var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) var(--sk-border-width-thin));
|
|
2252
|
+
}
|
|
2253
|
+
}
|
|
2254
|
+
.sk-autocomplete-anchor {
|
|
2255
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-autocomplete-color-base) 75%, transparent 25%), #000 65%);
|
|
2256
|
+
transition-property: background, border-color;
|
|
2257
|
+
transition-duration: var(--sk-transition-duration-base);
|
|
2258
|
+
}
|
|
2259
|
+
.sk-autocomplete-anchor:focus-within {
|
|
2260
|
+
border-color: color-mix(in oklch, var(--sk-autocomplete-color-base), white 35%);
|
|
2261
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-autocomplete-color-base) 75%, transparent 25%), #000 25%);
|
|
2262
|
+
}
|
|
2263
|
+
.sk-autocomplete-anchor:hover:not(:has(input:disabled)) {
|
|
2264
|
+
border-color: color-mix(in oklch, var(--sk-autocomplete-color-base), white 20%);
|
|
2265
|
+
}
|
|
2266
|
+
.sk-autocomplete-anchor:has(input:disabled) {
|
|
2267
|
+
opacity: 0.5;
|
|
2268
|
+
cursor: not-allowed;
|
|
2269
|
+
}
|
|
2270
|
+
.sk-autocomplete-input {
|
|
2271
|
+
flex: 1;
|
|
2272
|
+
background: transparent;
|
|
2273
|
+
border: none;
|
|
2274
|
+
color: var(--sk-autocomplete-fg);
|
|
2275
|
+
font-family: var(--sk-font-family-base);
|
|
2276
|
+
outline: none;
|
|
2277
|
+
cursor: text;
|
|
2278
|
+
}
|
|
2279
|
+
.sk-autocomplete.sk-sm .sk-autocomplete-input {
|
|
2280
|
+
height: 2rem;
|
|
2281
|
+
padding: 0 var(--sk-space-sm);
|
|
2282
|
+
font-size: 0.875rem;
|
|
2283
|
+
}
|
|
2284
|
+
.sk-autocomplete.sk-md .sk-autocomplete-input {
|
|
2285
|
+
height: 2.5rem;
|
|
2286
|
+
padding: 0 var(--sk-space-md);
|
|
2287
|
+
font-size: 1rem;
|
|
2288
|
+
}
|
|
2289
|
+
.sk-autocomplete.sk-lg .sk-autocomplete-input {
|
|
2290
|
+
height: 3rem;
|
|
2291
|
+
padding: 0 var(--sk-space-md);
|
|
2292
|
+
font-size: 1.125rem;
|
|
2293
|
+
}
|
|
2294
|
+
.sk-autocomplete.sk-xl .sk-autocomplete-input {
|
|
2295
|
+
height: 3.5rem;
|
|
2296
|
+
padding: 0 var(--sk-space-md);
|
|
2297
|
+
font-size: 1.25rem;
|
|
2298
|
+
}
|
|
2299
|
+
.sk-autocomplete-input::placeholder {
|
|
2300
|
+
color: color-mix(in oklch, var(--sk-autocomplete-fg), transparent 50%);
|
|
2301
|
+
}
|
|
2302
|
+
.sk-autocomplete-input:disabled {
|
|
2303
|
+
cursor: not-allowed;
|
|
2304
|
+
}
|
|
2305
|
+
.sk-autocomplete-cancel {
|
|
2306
|
+
display: flex;
|
|
2307
|
+
align-items: center;
|
|
2308
|
+
justify-content: center;
|
|
2309
|
+
padding: 0 var(--sk-space-xs);
|
|
2310
|
+
background: transparent;
|
|
2311
|
+
border: none;
|
|
2312
|
+
color: var(--sk-autocomplete-fg);
|
|
2313
|
+
cursor: pointer;
|
|
2314
|
+
flex-shrink: 0;
|
|
2315
|
+
opacity: 0.65;
|
|
2316
|
+
transition: opacity var(--sk-transition-duration-base);
|
|
2317
|
+
}
|
|
2318
|
+
.sk-autocomplete-cancel:hover {
|
|
2319
|
+
opacity: 1;
|
|
2320
|
+
}
|
|
2321
|
+
.sk-autocomplete-cancel:focus-visible {
|
|
2322
|
+
outline: var(--sk-border-width-base) solid var(--sk-autocomplete-color-base);
|
|
2323
|
+
outline-offset: 2px;
|
|
2324
|
+
}
|
|
2325
|
+
.sk-autocomplete-trigger {
|
|
2326
|
+
display: flex;
|
|
2327
|
+
align-items: center;
|
|
2328
|
+
justify-content: center;
|
|
2329
|
+
padding: 0 var(--sk-space-sm);
|
|
2330
|
+
background: transparent;
|
|
2331
|
+
border: none;
|
|
2332
|
+
color: var(--sk-autocomplete-fg);
|
|
2333
|
+
cursor: pointer;
|
|
2334
|
+
flex-shrink: 0;
|
|
2335
|
+
}
|
|
2336
|
+
.sk-autocomplete-trigger:hover {
|
|
2337
|
+
opacity: 0.8;
|
|
2338
|
+
}
|
|
2339
|
+
.sk-autocomplete-content {
|
|
2340
|
+
--sk-autocomplete-color-base: var(--sk-neutral-base);
|
|
2341
|
+
--sk-autocomplete-fg: var(--sk-neutral-text);
|
|
2342
|
+
position: relative;
|
|
2343
|
+
min-width: var(--reka-autocomplete-trigger-width);
|
|
2344
|
+
max-height: 20rem;
|
|
2345
|
+
overflow: auto;
|
|
2346
|
+
padding: var(--sk-space-xs);
|
|
2347
|
+
z-index: var(--sk-z-dropdown);
|
|
2348
|
+
}
|
|
2349
|
+
@supports (corner-shape: bevel) {
|
|
2350
|
+
.sk-autocomplete-content {
|
|
2351
|
+
border: var(--sk-border-width-thin) solid var(--sk-autocomplete-color-base);
|
|
2352
|
+
border-top-left-radius: 0.625rem;
|
|
2353
|
+
border-top-right-radius: 0;
|
|
2354
|
+
border-bottom-right-radius: 0;
|
|
2355
|
+
border-bottom-left-radius: 0;
|
|
2356
|
+
corner-shape: bevel;
|
|
2357
|
+
}
|
|
2358
|
+
}
|
|
2359
|
+
@supports not (corner-shape: bevel) {
|
|
2360
|
+
.sk-autocomplete-content {
|
|
2361
|
+
border: none;
|
|
2362
|
+
clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem);
|
|
2363
|
+
}
|
|
2364
|
+
.sk-autocomplete-content::before {
|
|
2365
|
+
content: "";
|
|
2366
|
+
position: absolute;
|
|
2367
|
+
top: 0;
|
|
2368
|
+
left: 0;
|
|
2369
|
+
right: 0;
|
|
2370
|
+
bottom: 0;
|
|
2371
|
+
background-color: var(--sk-autocomplete-color-base);
|
|
2372
|
+
z-index: -1;
|
|
2373
|
+
clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem, 0.625rem 0%, calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.625rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
2374
|
+
}
|
|
2375
|
+
}
|
|
2376
|
+
.sk-autocomplete-content {
|
|
2377
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-autocomplete-color-base) 95%, transparent 5%), #000 46.25%);
|
|
2378
|
+
color: var(--sk-autocomplete-fg);
|
|
2379
|
+
box-shadow: var(--sk-shadow-lg);
|
|
2380
|
+
}
|
|
2381
|
+
.sk-autocomplete-content.sk-neutral {
|
|
2382
|
+
--sk-autocomplete-color-base: var(--sk-neutral-base);
|
|
2383
|
+
--sk-autocomplete-fg: var(--sk-neutral-text);
|
|
2384
|
+
}
|
|
2385
|
+
.sk-autocomplete-content.sk-primary {
|
|
2386
|
+
--sk-autocomplete-color-base: var(--sk-primary-base);
|
|
2387
|
+
--sk-autocomplete-fg: var(--sk-primary-text);
|
|
2388
|
+
}
|
|
2389
|
+
.sk-autocomplete-content.sk-accent {
|
|
2390
|
+
--sk-autocomplete-color-base: var(--sk-accent-base);
|
|
2391
|
+
--sk-autocomplete-fg: var(--sk-accent-text);
|
|
2392
|
+
}
|
|
2393
|
+
.sk-autocomplete-content.sk-info {
|
|
2394
|
+
--sk-autocomplete-color-base: var(--sk-info-base);
|
|
2395
|
+
--sk-autocomplete-fg: var(--sk-info-text);
|
|
2396
|
+
}
|
|
2397
|
+
.sk-autocomplete-content.sk-success {
|
|
2398
|
+
--sk-autocomplete-color-base: var(--sk-success-base);
|
|
2399
|
+
--sk-autocomplete-fg: var(--sk-success-text);
|
|
2400
|
+
}
|
|
2401
|
+
.sk-autocomplete-content.sk-warning {
|
|
2402
|
+
--sk-autocomplete-color-base: var(--sk-warning-base);
|
|
2403
|
+
--sk-autocomplete-fg: var(--sk-warning-text);
|
|
2404
|
+
}
|
|
2405
|
+
.sk-autocomplete-content.sk-danger {
|
|
2406
|
+
--sk-autocomplete-color-base: var(--sk-danger-base);
|
|
2407
|
+
--sk-autocomplete-fg: var(--sk-danger-text);
|
|
2408
|
+
}
|
|
2409
|
+
.sk-autocomplete-content.sk-neon-blue {
|
|
2410
|
+
--sk-autocomplete-color-base: var(--sk-neon-blue-base);
|
|
2411
|
+
--sk-autocomplete-fg: var(--sk-neon-blue-text);
|
|
2412
|
+
}
|
|
2413
|
+
.sk-autocomplete-content.sk-neon-purple {
|
|
2414
|
+
--sk-autocomplete-color-base: var(--sk-neon-purple-base);
|
|
2415
|
+
--sk-autocomplete-fg: var(--sk-neon-purple-text);
|
|
2416
|
+
}
|
|
2417
|
+
.sk-autocomplete-content.sk-neon-orange {
|
|
2418
|
+
--sk-autocomplete-color-base: var(--sk-neon-orange-base);
|
|
2419
|
+
--sk-autocomplete-fg: var(--sk-neon-orange-text);
|
|
2420
|
+
}
|
|
2421
|
+
.sk-autocomplete-content.sk-neon-green {
|
|
2422
|
+
--sk-autocomplete-color-base: var(--sk-neon-green-base);
|
|
2423
|
+
--sk-autocomplete-fg: var(--sk-neon-green-text);
|
|
2424
|
+
}
|
|
2425
|
+
.sk-autocomplete-content.sk-neon-mint {
|
|
2426
|
+
--sk-autocomplete-color-base: var(--sk-neon-mint-base);
|
|
2427
|
+
--sk-autocomplete-fg: var(--sk-neon-mint-text);
|
|
2428
|
+
}
|
|
2429
|
+
.sk-autocomplete-content.sk-neon-pink {
|
|
2430
|
+
--sk-autocomplete-color-base: var(--sk-neon-pink-base);
|
|
2431
|
+
--sk-autocomplete-fg: var(--sk-neon-pink-text);
|
|
2432
|
+
}
|
|
2433
|
+
.sk-autocomplete-content.sk-yellow {
|
|
2434
|
+
--sk-autocomplete-color-base: var(--sk-yellow-base);
|
|
2435
|
+
--sk-autocomplete-fg: var(--sk-yellow-text);
|
|
2436
|
+
}
|
|
2437
|
+
.sk-autocomplete-content.sk-red {
|
|
2438
|
+
--sk-autocomplete-color-base: var(--sk-red-base);
|
|
2439
|
+
--sk-autocomplete-fg: var(--sk-red-text);
|
|
2440
|
+
}
|
|
2441
|
+
.sk-autocomplete-item {
|
|
2442
|
+
position: relative;
|
|
2443
|
+
display: flex;
|
|
2444
|
+
align-items: center;
|
|
2445
|
+
gap: var(--sk-space-md);
|
|
2446
|
+
padding: var(--sk-space-xs) var(--sk-space-md);
|
|
2447
|
+
cursor: pointer;
|
|
2448
|
+
color: color-mix(in oklch, var(--sk-autocomplete-fg), black 15%);
|
|
2449
|
+
font-size: 0.875rem;
|
|
2450
|
+
outline: none;
|
|
2451
|
+
user-select: none;
|
|
2452
|
+
}
|
|
2453
|
+
@media (pointer: coarse) {
|
|
2454
|
+
.sk-autocomplete-item {
|
|
2455
|
+
min-height: 44px;
|
|
2456
|
+
}
|
|
2457
|
+
}
|
|
2458
|
+
@supports (corner-shape: bevel) {
|
|
2459
|
+
.sk-autocomplete-item {
|
|
2460
|
+
border: var(--sk-border-width-thin) solid transparent;
|
|
2461
|
+
border-top-left-radius: 0.5rem;
|
|
2462
|
+
border-top-right-radius: 0;
|
|
2463
|
+
border-bottom-right-radius: 0.5rem;
|
|
2464
|
+
border-bottom-left-radius: 0;
|
|
2465
|
+
corner-shape: bevel;
|
|
2466
|
+
}
|
|
2467
|
+
}
|
|
2468
|
+
@supports not (corner-shape: bevel) {
|
|
2469
|
+
.sk-autocomplete-item {
|
|
2470
|
+
border: none;
|
|
2471
|
+
clip-path: polygon(0.5rem 0%, 100% 0%, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0% 100%, 0% 0.5rem);
|
|
2472
|
+
}
|
|
2473
|
+
.sk-autocomplete-item::before {
|
|
2474
|
+
content: "";
|
|
2475
|
+
position: absolute;
|
|
2476
|
+
top: 0;
|
|
2477
|
+
left: 0;
|
|
2478
|
+
right: 0;
|
|
2479
|
+
bottom: 0;
|
|
2480
|
+
background-color: transparent;
|
|
2481
|
+
z-index: -1;
|
|
2482
|
+
clip-path: polygon(0.5rem 0%, 100% 0%, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0% 100%, 0% 0.5rem, 0.5rem 0%, calc(0.5rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.5rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - 0.5rem - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - 0.5rem - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.5rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
2483
|
+
}
|
|
2484
|
+
}
|
|
2485
|
+
.sk-autocomplete-item {
|
|
2486
|
+
transition-property: background, color;
|
|
2487
|
+
transition-duration: var(--sk-transition-duration-base);
|
|
2488
|
+
}
|
|
2489
|
+
.sk-autocomplete-item:hover:not([data-disabled]) {
|
|
2490
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-autocomplete-color-base), black 30%), transparent 10%);
|
|
2491
|
+
color: var(--sk-autocomplete-fg);
|
|
2492
|
+
transition-duration: var(--sk-transition-duration-fast);
|
|
2493
|
+
}
|
|
2494
|
+
.sk-autocomplete-item[data-highlighted] {
|
|
2495
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-autocomplete-color-base), black 30%), transparent 10%);
|
|
2496
|
+
color: var(--sk-autocomplete-fg);
|
|
2497
|
+
outline: none;
|
|
2498
|
+
}
|
|
2499
|
+
.sk-autocomplete-item[data-disabled] {
|
|
2500
|
+
opacity: 0.5;
|
|
2501
|
+
cursor: not-allowed;
|
|
2502
|
+
}
|
|
2503
|
+
.sk-autocomplete-separator {
|
|
2504
|
+
height: 1px;
|
|
2505
|
+
margin: var(--sk-space-xs) 0;
|
|
2506
|
+
background: color-mix(in oklch, var(--sk-autocomplete-color-base), transparent 70%);
|
|
2507
|
+
}
|
|
2508
|
+
.sk-autocomplete-empty {
|
|
2509
|
+
padding: var(--sk-space-md);
|
|
2510
|
+
text-align: center;
|
|
2511
|
+
color: color-mix(in oklch, var(--sk-autocomplete-fg), transparent 40%);
|
|
2512
|
+
font-size: 0.875rem;
|
|
2513
|
+
font-style: italic;
|
|
2514
|
+
}
|
|
2515
|
+
.sk-autocomplete-group {
|
|
2516
|
+
display: block;
|
|
2517
|
+
}
|
|
2518
|
+
.sk-autocomplete-group-label {
|
|
2519
|
+
display: block;
|
|
2520
|
+
padding: var(--sk-space-xs) var(--sk-space-md);
|
|
2521
|
+
font-size: 0.75rem;
|
|
2522
|
+
font-weight: 600;
|
|
2523
|
+
text-transform: uppercase;
|
|
2524
|
+
letter-spacing: 0.05em;
|
|
2525
|
+
color: color-mix(in oklch, var(--sk-autocomplete-fg), transparent 35%);
|
|
2526
|
+
user-select: none;
|
|
2527
|
+
}
|
|
2364
2528
|
.sk-avatar,
|
|
2365
2529
|
sk-avatar {
|
|
2366
2530
|
--sk-avatar-color-base: var(--sk-neutral-base);
|
|
@@ -2718,6 +2882,10 @@
|
|
|
2718
2882
|
--sk-button-bg-active: color-mix(in oklch, var(--sk-button-bg) 85%, black 15%);
|
|
2719
2883
|
--sk-button-border-base: var(--sk-button-color-base);
|
|
2720
2884
|
--sk-button-border-hover: color-mix(in oklch, var(--sk-button-color-base), white 12.68%);
|
|
2885
|
+
--sk-button-cut-tl: 0px;
|
|
2886
|
+
--sk-button-cut-tr: 0px;
|
|
2887
|
+
--sk-button-cut-br: 0px;
|
|
2888
|
+
--sk-button-cut-bl: 0px;
|
|
2721
2889
|
--sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
|
|
2722
2890
|
--sk-button-current-padding-x: var(--sk-button-padding-base);
|
|
2723
2891
|
--sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
|
|
@@ -5496,6 +5664,30 @@
|
|
|
5496
5664
|
background-color: var(--sk-button-bg);
|
|
5497
5665
|
color: var(--sk-button-text);
|
|
5498
5666
|
}
|
|
5667
|
+
.sk-button:where(:not([class*=sk-cut-])) {
|
|
5668
|
+
--sk-button-cut-tl: var(--sk-button-current-cut-size);
|
|
5669
|
+
--sk-button-cut-br: var(--sk-button-current-cut-size);
|
|
5670
|
+
}
|
|
5671
|
+
sk-button:where(:not([corners])) {
|
|
5672
|
+
--sk-button-cut-tl: var(--sk-button-current-cut-size);
|
|
5673
|
+
--sk-button-cut-br: var(--sk-button-current-cut-size);
|
|
5674
|
+
}
|
|
5675
|
+
.sk-button.sk-cut-top-left,
|
|
5676
|
+
sk-button[corners~=top-left] {
|
|
5677
|
+
--sk-button-cut-tl: var(--sk-button-current-cut-size);
|
|
5678
|
+
}
|
|
5679
|
+
.sk-button.sk-cut-top-right,
|
|
5680
|
+
sk-button[corners~=top-right] {
|
|
5681
|
+
--sk-button-cut-tr: var(--sk-button-current-cut-size);
|
|
5682
|
+
}
|
|
5683
|
+
.sk-button.sk-cut-bottom-right,
|
|
5684
|
+
sk-button[corners~=bottom-right] {
|
|
5685
|
+
--sk-button-cut-br: var(--sk-button-current-cut-size);
|
|
5686
|
+
}
|
|
5687
|
+
.sk-button.sk-cut-bottom-left,
|
|
5688
|
+
sk-button[corners~=bottom-left] {
|
|
5689
|
+
--sk-button-cut-bl: var(--sk-button-current-cut-size);
|
|
5690
|
+
}
|
|
5499
5691
|
.sk-button-chrome {
|
|
5500
5692
|
position: relative;
|
|
5501
5693
|
display: inline-flex;
|
|
@@ -5508,25 +5700,23 @@
|
|
|
5508
5700
|
font-weight: var(--sk-button-font-weight);
|
|
5509
5701
|
font-size: var(--sk-button-current-font-size);
|
|
5510
5702
|
line-height: var(--sk-button-line-height);
|
|
5511
|
-
border-width: var(--sk-button-border-width);
|
|
5512
|
-
border-style: solid;
|
|
5513
5703
|
flex-shrink: 0;
|
|
5514
5704
|
box-sizing: border-box;
|
|
5515
5705
|
}
|
|
5516
5706
|
@supports (corner-shape: bevel) {
|
|
5517
5707
|
.sk-button-chrome {
|
|
5518
5708
|
border: var(--sk-button-border-width) solid var(--sk-button-border-color);
|
|
5519
|
-
border-top-left-radius: var(--sk-button-
|
|
5520
|
-
border-top-right-radius:
|
|
5521
|
-
border-bottom-right-radius: var(--sk-button-
|
|
5522
|
-
border-bottom-left-radius:
|
|
5709
|
+
border-top-left-radius: var(--sk-button-cut-tl);
|
|
5710
|
+
border-top-right-radius: var(--sk-button-cut-tr);
|
|
5711
|
+
border-bottom-right-radius: var(--sk-button-cut-br);
|
|
5712
|
+
border-bottom-left-radius: var(--sk-button-cut-bl);
|
|
5523
5713
|
corner-shape: bevel;
|
|
5524
5714
|
}
|
|
5525
5715
|
}
|
|
5526
5716
|
@supports not (corner-shape: bevel) {
|
|
5527
5717
|
.sk-button-chrome {
|
|
5528
5718
|
border: none;
|
|
5529
|
-
clip-path: polygon(var(--sk-button-
|
|
5719
|
+
clip-path: polygon(var(--sk-button-cut-tl) 0, calc(100% - var(--sk-button-cut-tr)) 0, 100% var(--sk-button-cut-tr), 100% calc(100% - var(--sk-button-cut-br)), calc(100% - var(--sk-button-cut-br)) 100%, var(--sk-button-cut-bl) 100%, 0 calc(100% - var(--sk-button-cut-bl)), 0 var(--sk-button-cut-tl));
|
|
5530
5720
|
}
|
|
5531
5721
|
.sk-button-chrome::before {
|
|
5532
5722
|
content: "";
|
|
@@ -5537,7 +5727,7 @@
|
|
|
5537
5727
|
bottom: 0;
|
|
5538
5728
|
background-color: var(--sk-button-border-color);
|
|
5539
5729
|
z-index: -1;
|
|
5540
|
-
clip-path: polygon(var(--sk-button-
|
|
5730
|
+
clip-path: polygon(var(--sk-button-cut-tl) 0, calc(100% - var(--sk-button-cut-tr)) 0, 100% var(--sk-button-cut-tr), 100% calc(100% - var(--sk-button-cut-br)), calc(100% - var(--sk-button-cut-br)) 100%, var(--sk-button-cut-bl) 100%, 0 calc(100% - var(--sk-button-cut-bl)), 0 var(--sk-button-cut-tl), var(--sk-button-cut-tl) 0, calc(var(--sk-button-cut-tl) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-tl) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-cut-bl) - var(--sk-button-border-width)), calc(var(--sk-button-cut-bl) + var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-br) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-br) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(var(--sk-button-cut-tr) + var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-tr) - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-tl) + var(--sk-button-border-width)) var(--sk-button-border-width));
|
|
5541
5731
|
}
|
|
5542
5732
|
}
|
|
5543
5733
|
@supports (corner-shape: bevel) {
|
|
@@ -7224,6 +7414,10 @@
|
|
|
7224
7414
|
--sk-input-color-base: var(--sk-neutral-base);
|
|
7225
7415
|
--sk-input-fg: var(--sk-neutral-text);
|
|
7226
7416
|
--sk-input-cut: 0.5rem;
|
|
7417
|
+
--sk-input-cut-tl: 0px;
|
|
7418
|
+
--sk-input-cut-tr: 0px;
|
|
7419
|
+
--sk-input-cut-br: 0px;
|
|
7420
|
+
--sk-input-cut-bl: 0px;
|
|
7227
7421
|
position: relative;
|
|
7228
7422
|
display: block;
|
|
7229
7423
|
width: 100%;
|
|
@@ -7232,18 +7426,18 @@
|
|
|
7232
7426
|
}
|
|
7233
7427
|
@supports (corner-shape: bevel) {
|
|
7234
7428
|
.sk-input {
|
|
7235
|
-
border:
|
|
7236
|
-
border-top-left-radius:
|
|
7237
|
-
border-top-right-radius: var(--sk-input-cut);
|
|
7238
|
-
border-bottom-right-radius:
|
|
7239
|
-
border-bottom-left-radius:
|
|
7429
|
+
border: var(--sk-border-width-thin) solid var(--sk-input-color-base);
|
|
7430
|
+
border-top-left-radius: var(--sk-input-cut-tl);
|
|
7431
|
+
border-top-right-radius: var(--sk-input-cut-tr);
|
|
7432
|
+
border-bottom-right-radius: var(--sk-input-cut-br);
|
|
7433
|
+
border-bottom-left-radius: var(--sk-input-cut-bl);
|
|
7240
7434
|
corner-shape: bevel;
|
|
7241
7435
|
}
|
|
7242
7436
|
}
|
|
7243
7437
|
@supports not (corner-shape: bevel) {
|
|
7244
7438
|
.sk-input {
|
|
7245
7439
|
border: none;
|
|
7246
|
-
clip-path: polygon(
|
|
7440
|
+
clip-path: polygon(var(--sk-input-cut-tl) 0, calc(100% - var(--sk-input-cut-tr)) 0, 100% var(--sk-input-cut-tr), 100% calc(100% - var(--sk-input-cut-br)), calc(100% - var(--sk-input-cut-br)) 100%, var(--sk-input-cut-bl) 100%, 0 calc(100% - var(--sk-input-cut-bl)), 0 var(--sk-input-cut-tl));
|
|
7247
7441
|
}
|
|
7248
7442
|
.sk-input::before {
|
|
7249
7443
|
content: "";
|
|
@@ -7252,15 +7446,14 @@
|
|
|
7252
7446
|
left: 0;
|
|
7253
7447
|
right: 0;
|
|
7254
7448
|
bottom: 0;
|
|
7255
|
-
background-color:
|
|
7449
|
+
background-color: var(--sk-input-color-base);
|
|
7256
7450
|
z-index: -1;
|
|
7257
|
-
clip-path: polygon(
|
|
7451
|
+
clip-path: polygon(var(--sk-input-cut-tl) 0, calc(100% - var(--sk-input-cut-tr)) 0, 100% var(--sk-input-cut-tr), 100% calc(100% - var(--sk-input-cut-br)), calc(100% - var(--sk-input-cut-br)) 100%, var(--sk-input-cut-bl) 100%, 0 calc(100% - var(--sk-input-cut-bl)), 0 var(--sk-input-cut-tl), var(--sk-input-cut-tl) 0, calc(var(--sk-input-cut-tl) + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(var(--sk-input-cut-tl) + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-input-cut-bl) - var(--sk-border-width-thin)), calc(var(--sk-input-cut-bl) + var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-input-cut-br) - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-input-cut-br) - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(var(--sk-input-cut-tr) + var(--sk-border-width-thin)), calc(100% - var(--sk-input-cut-tr) - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(var(--sk-input-cut-tl) + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
7258
7452
|
}
|
|
7259
7453
|
}
|
|
7260
7454
|
.sk-input {
|
|
7261
7455
|
background: color-mix(in oklch, color-mix(in oklch, var(--sk-input-color-base) 75%, transparent 25%), #000 65%);
|
|
7262
7456
|
color: var(--sk-input-fg);
|
|
7263
|
-
border: var(--sk-border-width-thin) solid var(--sk-input-color-base);
|
|
7264
7457
|
transition-property: background, color, border-color, box-shadow;
|
|
7265
7458
|
transition-duration: var(--sk-transition-duration-base);
|
|
7266
7459
|
}
|
|
@@ -7268,31 +7461,31 @@
|
|
|
7268
7461
|
height: 2.5rem;
|
|
7269
7462
|
padding: 0 var(--sk-space-md);
|
|
7270
7463
|
font-size: 1rem;
|
|
7271
|
-
--sk-input-cut: 0.
|
|
7464
|
+
--sk-input-cut: 0.625rem;
|
|
7272
7465
|
}
|
|
7273
7466
|
.sk-input.sk-sm, .sk-input.sk-size-sm {
|
|
7274
7467
|
height: 2rem;
|
|
7275
7468
|
padding: 0 var(--sk-space-sm);
|
|
7276
7469
|
font-size: 0.875rem;
|
|
7277
|
-
--sk-input-cut: 0.
|
|
7470
|
+
--sk-input-cut: 0.5rem;
|
|
7278
7471
|
}
|
|
7279
7472
|
.sk-input.sk-md, .sk-input.sk-size-md {
|
|
7280
7473
|
height: 2.5rem;
|
|
7281
7474
|
padding: 0 var(--sk-space-md);
|
|
7282
7475
|
font-size: 1rem;
|
|
7283
|
-
--sk-input-cut: 0.
|
|
7476
|
+
--sk-input-cut: 0.625rem;
|
|
7284
7477
|
}
|
|
7285
7478
|
.sk-input.sk-lg, .sk-input.sk-size-lg {
|
|
7286
7479
|
height: 3rem;
|
|
7287
7480
|
padding: 0 var(--sk-space-md);
|
|
7288
7481
|
font-size: 1.125rem;
|
|
7289
|
-
--sk-input-cut: 0.
|
|
7482
|
+
--sk-input-cut: 0.75rem;
|
|
7290
7483
|
}
|
|
7291
7484
|
.sk-input.sk-xl, .sk-input.sk-size-xl {
|
|
7292
7485
|
height: 3.5rem;
|
|
7293
7486
|
padding: 0 var(--sk-space-md);
|
|
7294
7487
|
font-size: 1.25rem;
|
|
7295
|
-
--sk-input-cut: 0.
|
|
7488
|
+
--sk-input-cut: 0.875rem;
|
|
7296
7489
|
}
|
|
7297
7490
|
.sk-input:focus {
|
|
7298
7491
|
outline: none;
|
|
@@ -7400,10 +7593,290 @@
|
|
|
7400
7593
|
.sk-input[type=search]::-webkit-search-cancel-button:hover {
|
|
7401
7594
|
opacity: 1;
|
|
7402
7595
|
}
|
|
7596
|
+
.sk-input:where(:not([class*=sk-cut-])) {
|
|
7597
|
+
--sk-input-cut-tr: var(--sk-input-cut);
|
|
7598
|
+
}
|
|
7599
|
+
sk-input:where(:not([corners])) {
|
|
7600
|
+
--sk-input-cut-tr: var(--sk-input-cut);
|
|
7601
|
+
}
|
|
7602
|
+
.sk-input.sk-cut-top-left,
|
|
7603
|
+
sk-input[corners~=top-left] {
|
|
7604
|
+
--sk-input-cut-tl: var(--sk-input-cut);
|
|
7605
|
+
}
|
|
7606
|
+
.sk-input.sk-cut-top-right,
|
|
7607
|
+
sk-input[corners~=top-right] {
|
|
7608
|
+
--sk-input-cut-tr: var(--sk-input-cut);
|
|
7609
|
+
}
|
|
7610
|
+
.sk-input.sk-cut-bottom-right,
|
|
7611
|
+
sk-input[corners~=bottom-right] {
|
|
7612
|
+
--sk-input-cut-br: var(--sk-input-cut);
|
|
7613
|
+
}
|
|
7614
|
+
.sk-input.sk-cut-bottom-left,
|
|
7615
|
+
sk-input[corners~=bottom-left] {
|
|
7616
|
+
--sk-input-cut-bl: var(--sk-input-cut);
|
|
7617
|
+
}
|
|
7403
7618
|
.sk-input:where(:not(.sk-neutral):not(.sk-primary):not(.sk-accent):not(.sk-info):not(.sk-success):not(.sk-warning):not(.sk-danger):not(.sk-boulder):not(.sk-neon-blue):not(.sk-light-blue):not(.sk-neon-orange):not(.sk-neon-purple):not(.sk-neon-green):not(.sk-neon-mint):not(.sk-neon-pink):not(.sk-yellow):not(.sk-red)) {
|
|
7404
7619
|
--sk-input-color-base: var(--sk-neutral-base);
|
|
7405
7620
|
--sk-input-fg: var(--sk-neutral-text);
|
|
7406
7621
|
}
|
|
7622
|
+
.sk-input-group,
|
|
7623
|
+
sk-input-group {
|
|
7624
|
+
--sk-input-group-color-base: var(--sk-neutral-base);
|
|
7625
|
+
--sk-input-group-fg: var(--sk-neutral-text);
|
|
7626
|
+
--sk-input-group-addon-cut: 0.625rem;
|
|
7627
|
+
display: flex;
|
|
7628
|
+
align-items: stretch;
|
|
7629
|
+
width: 100%;
|
|
7630
|
+
box-sizing: border-box;
|
|
7631
|
+
position: relative;
|
|
7632
|
+
}
|
|
7633
|
+
.sk-input-group > .sk-input,
|
|
7634
|
+
.sk-input-group > .sk-select,
|
|
7635
|
+
.sk-input-group > .sk-number-input-wrapper,
|
|
7636
|
+
sk-input-group > .sk-input,
|
|
7637
|
+
sk-input-group > .sk-select,
|
|
7638
|
+
sk-input-group > .sk-number-input-wrapper {
|
|
7639
|
+
flex: 1 1 0;
|
|
7640
|
+
min-width: 0;
|
|
7641
|
+
}
|
|
7642
|
+
.sk-input-group > .sk-button,
|
|
7643
|
+
.sk-input-group > .sk-input-group-addon,
|
|
7644
|
+
sk-input-group > .sk-button,
|
|
7645
|
+
sk-input-group > .sk-input-group-addon {
|
|
7646
|
+
flex: 0 0 auto;
|
|
7647
|
+
}
|
|
7648
|
+
.sk-input-group > .sk-input,
|
|
7649
|
+
.sk-input-group > .sk-button,
|
|
7650
|
+
.sk-input-group > .sk-select,
|
|
7651
|
+
.sk-input-group > .sk-number-input-wrapper,
|
|
7652
|
+
.sk-input-group > .sk-input-group-addon,
|
|
7653
|
+
sk-input-group > .sk-input,
|
|
7654
|
+
sk-input-group > .sk-button,
|
|
7655
|
+
sk-input-group > .sk-select,
|
|
7656
|
+
sk-input-group > .sk-number-input-wrapper,
|
|
7657
|
+
sk-input-group > .sk-input-group-addon {
|
|
7658
|
+
--sk-input-cut-tl: 0px;
|
|
7659
|
+
--sk-input-cut-tr: 0px;
|
|
7660
|
+
--sk-input-cut-br: 0px;
|
|
7661
|
+
--sk-input-cut-bl: 0px;
|
|
7662
|
+
--sk-button-cut-tl: 0px;
|
|
7663
|
+
--sk-button-cut-tr: 0px;
|
|
7664
|
+
--sk-button-cut-br: 0px;
|
|
7665
|
+
--sk-button-cut-bl: 0px;
|
|
7666
|
+
--sk-select-cut-tl: 0px;
|
|
7667
|
+
--sk-select-cut-tr: 0px;
|
|
7668
|
+
--sk-select-cut-br: 0px;
|
|
7669
|
+
--sk-select-cut-bl: 0px;
|
|
7670
|
+
--sk-number-input-cut-tl: 0px;
|
|
7671
|
+
--sk-number-input-cut-tr: 0px;
|
|
7672
|
+
--sk-number-input-cut-br: 0px;
|
|
7673
|
+
--sk-number-input-cut-bl: 0px;
|
|
7674
|
+
--sk-input-group-addon-cut-tl: 0px;
|
|
7675
|
+
--sk-input-group-addon-cut-tr: 0px;
|
|
7676
|
+
--sk-input-group-addon-cut-br: 0px;
|
|
7677
|
+
--sk-input-group-addon-cut-bl: 0px;
|
|
7678
|
+
}
|
|
7679
|
+
.sk-input-group > .sk-input:not(:first-child),
|
|
7680
|
+
.sk-input-group > .sk-button:not(:first-child),
|
|
7681
|
+
.sk-input-group > .sk-select:not(:first-child),
|
|
7682
|
+
.sk-input-group > .sk-number-input-wrapper:not(:first-child),
|
|
7683
|
+
.sk-input-group > .sk-input-group-addon:not(:first-child),
|
|
7684
|
+
sk-input-group > .sk-input:not(:first-child),
|
|
7685
|
+
sk-input-group > .sk-button:not(:first-child),
|
|
7686
|
+
sk-input-group > .sk-select:not(:first-child),
|
|
7687
|
+
sk-input-group > .sk-number-input-wrapper:not(:first-child),
|
|
7688
|
+
sk-input-group > .sk-input-group-addon:not(:first-child) {
|
|
7689
|
+
margin-left: -1px;
|
|
7690
|
+
}
|
|
7691
|
+
.sk-input-group.sk-cut-top-left > :first-child,
|
|
7692
|
+
sk-input-group[corners~=top-left] > :first-child {
|
|
7693
|
+
--sk-input-cut-tl: var(--sk-input-cut);
|
|
7694
|
+
--sk-button-cut-tl: var(--sk-button-current-cut-size);
|
|
7695
|
+
--sk-select-cut-tl: var(--sk-select-cut);
|
|
7696
|
+
--sk-number-input-cut-tl: var(--sk-number-input-cut);
|
|
7697
|
+
--sk-input-group-addon-cut-tl: var(--sk-input-group-addon-cut);
|
|
7698
|
+
}
|
|
7699
|
+
.sk-input-group.sk-cut-bottom-left > :first-child,
|
|
7700
|
+
sk-input-group[corners~=bottom-left] > :first-child {
|
|
7701
|
+
--sk-input-cut-bl: var(--sk-input-cut);
|
|
7702
|
+
--sk-button-cut-bl: var(--sk-button-current-cut-size);
|
|
7703
|
+
--sk-select-cut-bl: var(--sk-select-cut);
|
|
7704
|
+
--sk-number-input-cut-bl: var(--sk-number-input-cut);
|
|
7705
|
+
--sk-input-group-addon-cut-bl: var(--sk-input-group-addon-cut);
|
|
7706
|
+
}
|
|
7707
|
+
.sk-input-group.sk-cut-top-right > :last-child,
|
|
7708
|
+
sk-input-group[corners~=top-right] > :last-child {
|
|
7709
|
+
--sk-input-cut-tr: var(--sk-input-cut);
|
|
7710
|
+
--sk-button-cut-tr: var(--sk-button-current-cut-size);
|
|
7711
|
+
--sk-select-cut-tr: var(--sk-select-cut);
|
|
7712
|
+
--sk-number-input-cut-tr: var(--sk-number-input-cut);
|
|
7713
|
+
--sk-input-group-addon-cut-tr: var(--sk-input-group-addon-cut);
|
|
7714
|
+
}
|
|
7715
|
+
.sk-input-group.sk-cut-bottom-right > :last-child,
|
|
7716
|
+
sk-input-group[corners~=bottom-right] > :last-child {
|
|
7717
|
+
--sk-input-cut-br: var(--sk-input-cut);
|
|
7718
|
+
--sk-button-cut-br: var(--sk-button-current-cut-size);
|
|
7719
|
+
--sk-select-cut-br: var(--sk-select-cut);
|
|
7720
|
+
--sk-number-input-cut-br: var(--sk-number-input-cut);
|
|
7721
|
+
--sk-input-group-addon-cut-br: var(--sk-input-group-addon-cut);
|
|
7722
|
+
}
|
|
7723
|
+
.sk-input-group:where(:not([class*=sk-cut-])) > :first-child {
|
|
7724
|
+
--sk-input-cut-tl: var(--sk-input-cut);
|
|
7725
|
+
--sk-button-cut-tl: var(--sk-button-current-cut-size);
|
|
7726
|
+
--sk-select-cut-tl: var(--sk-select-cut);
|
|
7727
|
+
--sk-number-input-cut-tl: var(--sk-number-input-cut);
|
|
7728
|
+
--sk-input-group-addon-cut-tl: var(--sk-input-group-addon-cut);
|
|
7729
|
+
}
|
|
7730
|
+
.sk-input-group:where(:not([class*=sk-cut-])) > :last-child {
|
|
7731
|
+
--sk-input-cut-br: var(--sk-input-cut);
|
|
7732
|
+
--sk-button-cut-br: var(--sk-button-current-cut-size);
|
|
7733
|
+
--sk-select-cut-br: var(--sk-select-cut);
|
|
7734
|
+
--sk-number-input-cut-br: var(--sk-number-input-cut);
|
|
7735
|
+
--sk-input-group-addon-cut-br: var(--sk-input-group-addon-cut);
|
|
7736
|
+
}
|
|
7737
|
+
sk-input-group:where(:not([corners])) > :first-child {
|
|
7738
|
+
--sk-input-cut-tl: var(--sk-input-cut);
|
|
7739
|
+
--sk-button-cut-tl: var(--sk-button-current-cut-size);
|
|
7740
|
+
--sk-select-cut-tl: var(--sk-select-cut);
|
|
7741
|
+
--sk-number-input-cut-tl: var(--sk-number-input-cut);
|
|
7742
|
+
--sk-input-group-addon-cut-tl: var(--sk-input-group-addon-cut);
|
|
7743
|
+
}
|
|
7744
|
+
sk-input-group:where(:not([corners])) > :last-child {
|
|
7745
|
+
--sk-input-cut-br: var(--sk-input-cut);
|
|
7746
|
+
--sk-button-cut-br: var(--sk-button-current-cut-size);
|
|
7747
|
+
--sk-select-cut-br: var(--sk-select-cut);
|
|
7748
|
+
--sk-number-input-cut-br: var(--sk-number-input-cut);
|
|
7749
|
+
--sk-input-group-addon-cut-br: var(--sk-input-group-addon-cut);
|
|
7750
|
+
}
|
|
7751
|
+
.sk-input-group-addon,
|
|
7752
|
+
sk-input-group-addon {
|
|
7753
|
+
--sk-input-group-addon-color-base: var(--sk-neutral-base);
|
|
7754
|
+
--sk-input-group-addon-fg: var(--sk-neutral-text);
|
|
7755
|
+
--sk-input-group-addon-cut: 0.625rem;
|
|
7756
|
+
--sk-input-group-addon-cut-tl: 0px;
|
|
7757
|
+
--sk-input-group-addon-cut-tr: 0px;
|
|
7758
|
+
--sk-input-group-addon-cut-br: 0px;
|
|
7759
|
+
--sk-input-group-addon-cut-bl: 0px;
|
|
7760
|
+
display: inline-flex;
|
|
7761
|
+
align-items: center;
|
|
7762
|
+
justify-content: center;
|
|
7763
|
+
box-sizing: border-box;
|
|
7764
|
+
position: relative;
|
|
7765
|
+
flex-shrink: 0;
|
|
7766
|
+
font-family: var(--sk-font-family-base);
|
|
7767
|
+
color: var(--sk-input-group-addon-fg);
|
|
7768
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-input-group-addon-color-base) 75%, transparent 25%), #000 65%);
|
|
7769
|
+
user-select: none;
|
|
7770
|
+
}
|
|
7771
|
+
@supports (corner-shape: bevel) {
|
|
7772
|
+
.sk-input-group-addon,
|
|
7773
|
+
sk-input-group-addon {
|
|
7774
|
+
border: var(--sk-border-width-thin) solid var(--sk-input-group-addon-color-base);
|
|
7775
|
+
border-top-left-radius: var(--sk-input-group-addon-cut-tl);
|
|
7776
|
+
border-top-right-radius: var(--sk-input-group-addon-cut-tr);
|
|
7777
|
+
border-bottom-right-radius: var(--sk-input-group-addon-cut-br);
|
|
7778
|
+
border-bottom-left-radius: var(--sk-input-group-addon-cut-bl);
|
|
7779
|
+
corner-shape: bevel;
|
|
7780
|
+
}
|
|
7781
|
+
}
|
|
7782
|
+
@supports not (corner-shape: bevel) {
|
|
7783
|
+
.sk-input-group-addon,
|
|
7784
|
+
sk-input-group-addon {
|
|
7785
|
+
border: none;
|
|
7786
|
+
clip-path: polygon(var(--sk-input-group-addon-cut-tl) 0, calc(100% - var(--sk-input-group-addon-cut-tr)) 0, 100% var(--sk-input-group-addon-cut-tr), 100% calc(100% - var(--sk-input-group-addon-cut-br)), calc(100% - var(--sk-input-group-addon-cut-br)) 100%, var(--sk-input-group-addon-cut-bl) 100%, 0 calc(100% - var(--sk-input-group-addon-cut-bl)), 0 var(--sk-input-group-addon-cut-tl));
|
|
7787
|
+
}
|
|
7788
|
+
.sk-input-group-addon::before,
|
|
7789
|
+
sk-input-group-addon::before {
|
|
7790
|
+
content: "";
|
|
7791
|
+
position: absolute;
|
|
7792
|
+
top: 0;
|
|
7793
|
+
left: 0;
|
|
7794
|
+
right: 0;
|
|
7795
|
+
bottom: 0;
|
|
7796
|
+
background-color: var(--sk-input-group-addon-color-base);
|
|
7797
|
+
z-index: -1;
|
|
7798
|
+
clip-path: polygon(var(--sk-input-group-addon-cut-tl) 0, calc(100% - var(--sk-input-group-addon-cut-tr)) 0, 100% var(--sk-input-group-addon-cut-tr), 100% calc(100% - var(--sk-input-group-addon-cut-br)), calc(100% - var(--sk-input-group-addon-cut-br)) 100%, var(--sk-input-group-addon-cut-bl) 100%, 0 calc(100% - var(--sk-input-group-addon-cut-bl)), 0 var(--sk-input-group-addon-cut-tl), var(--sk-input-group-addon-cut-tl) 0, calc(var(--sk-input-group-addon-cut-tl) + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(var(--sk-input-group-addon-cut-tl) + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-input-group-addon-cut-bl) - var(--sk-border-width-thin)), calc(var(--sk-input-group-addon-cut-bl) + var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-input-group-addon-cut-br) - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-input-group-addon-cut-br) - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(var(--sk-input-group-addon-cut-tr) + var(--sk-border-width-thin)), calc(100% - var(--sk-input-group-addon-cut-tr) - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(var(--sk-input-group-addon-cut-tl) + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
7799
|
+
}
|
|
7800
|
+
}
|
|
7801
|
+
.sk-input-group-addon.sk-sm,
|
|
7802
|
+
.sk-input-group-addon.sk-size-sm,
|
|
7803
|
+
sk-input-group-addon[size=sm] {
|
|
7804
|
+
height: 2rem;
|
|
7805
|
+
padding: 0 var(--sk-space-sm);
|
|
7806
|
+
font-size: 0.875rem;
|
|
7807
|
+
--sk-input-group-addon-cut: 0.5rem;
|
|
7808
|
+
}
|
|
7809
|
+
.sk-input-group-addon.sk-md,
|
|
7810
|
+
.sk-input-group-addon.sk-size-md,
|
|
7811
|
+
sk-input-group-addon[size=md] {
|
|
7812
|
+
height: 2.5rem;
|
|
7813
|
+
padding: 0 var(--sk-space-md);
|
|
7814
|
+
font-size: 1rem;
|
|
7815
|
+
--sk-input-group-addon-cut: 0.625rem;
|
|
7816
|
+
}
|
|
7817
|
+
.sk-input-group-addon.sk-lg,
|
|
7818
|
+
.sk-input-group-addon.sk-size-lg,
|
|
7819
|
+
sk-input-group-addon[size=lg] {
|
|
7820
|
+
height: 3rem;
|
|
7821
|
+
padding: 0 var(--sk-space-md);
|
|
7822
|
+
font-size: 1.125rem;
|
|
7823
|
+
--sk-input-group-addon-cut: 0.75rem;
|
|
7824
|
+
}
|
|
7825
|
+
.sk-input-group-addon.sk-xl,
|
|
7826
|
+
.sk-input-group-addon.sk-size-xl,
|
|
7827
|
+
sk-input-group-addon[size=xl] {
|
|
7828
|
+
height: 3.5rem;
|
|
7829
|
+
padding: 0 var(--sk-space-md);
|
|
7830
|
+
font-size: 1.25rem;
|
|
7831
|
+
--sk-input-group-addon-cut: 0.875rem;
|
|
7832
|
+
}
|
|
7833
|
+
.sk-input-group-addon.sk-neutral,
|
|
7834
|
+
sk-input-group-addon[kind=neutral] {
|
|
7835
|
+
--sk-input-group-addon-color-base: var(--sk-neutral-base);
|
|
7836
|
+
--sk-input-group-addon-fg: var(--sk-neutral-text);
|
|
7837
|
+
}
|
|
7838
|
+
.sk-input-group-addon.sk-primary,
|
|
7839
|
+
sk-input-group-addon[kind=primary] {
|
|
7840
|
+
--sk-input-group-addon-color-base: var(--sk-primary-base);
|
|
7841
|
+
--sk-input-group-addon-fg: var(--sk-primary-text);
|
|
7842
|
+
}
|
|
7843
|
+
.sk-input-group-addon.sk-accent,
|
|
7844
|
+
sk-input-group-addon[kind=accent] {
|
|
7845
|
+
--sk-input-group-addon-color-base: var(--sk-accent-base);
|
|
7846
|
+
--sk-input-group-addon-fg: var(--sk-accent-text);
|
|
7847
|
+
}
|
|
7848
|
+
.sk-input-group-addon.sk-info,
|
|
7849
|
+
sk-input-group-addon[kind=info] {
|
|
7850
|
+
--sk-input-group-addon-color-base: var(--sk-info-base);
|
|
7851
|
+
--sk-input-group-addon-fg: var(--sk-info-text);
|
|
7852
|
+
}
|
|
7853
|
+
.sk-input-group-addon.sk-success,
|
|
7854
|
+
sk-input-group-addon[kind=success] {
|
|
7855
|
+
--sk-input-group-addon-color-base: var(--sk-success-base);
|
|
7856
|
+
--sk-input-group-addon-fg: var(--sk-success-text);
|
|
7857
|
+
}
|
|
7858
|
+
.sk-input-group-addon.sk-warning,
|
|
7859
|
+
sk-input-group-addon[kind=warning] {
|
|
7860
|
+
--sk-input-group-addon-color-base: var(--sk-warning-base);
|
|
7861
|
+
--sk-input-group-addon-fg: var(--sk-warning-text);
|
|
7862
|
+
}
|
|
7863
|
+
.sk-input-group-addon.sk-danger,
|
|
7864
|
+
sk-input-group-addon[kind=danger] {
|
|
7865
|
+
--sk-input-group-addon-color-base: var(--sk-danger-base);
|
|
7866
|
+
--sk-input-group-addon-fg: var(--sk-danger-text);
|
|
7867
|
+
}
|
|
7868
|
+
.sk-input-group-addon:where(:not([class*=sk-size-])) {
|
|
7869
|
+
height: 2.5rem;
|
|
7870
|
+
padding: 0 var(--sk-space-md);
|
|
7871
|
+
font-size: 1rem;
|
|
7872
|
+
--sk-input-group-addon-cut: 0.625rem;
|
|
7873
|
+
}
|
|
7874
|
+
sk-input-group-addon:where(:not([size])) {
|
|
7875
|
+
height: 2.5rem;
|
|
7876
|
+
padding: 0 var(--sk-space-md);
|
|
7877
|
+
font-size: 1rem;
|
|
7878
|
+
--sk-input-group-addon-cut: 0.625rem;
|
|
7879
|
+
}
|
|
7407
7880
|
.sk-listbox {
|
|
7408
7881
|
--sk-listbox-color-base: var(--sk-neutral-base);
|
|
7409
7882
|
--sk-listbox-fg: var(--sk-neutral-text);
|
|
@@ -8642,7 +9115,11 @@
|
|
|
8642
9115
|
--sk-number-input-font-size: 1rem;
|
|
8643
9116
|
--sk-number-input-stepper-width: 2rem;
|
|
8644
9117
|
--sk-number-input-stepper-icon: 1rem;
|
|
8645
|
-
--sk-number-input-cut: 0.
|
|
9118
|
+
--sk-number-input-cut: 0.625rem;
|
|
9119
|
+
--sk-number-input-cut-tl: 0px;
|
|
9120
|
+
--sk-number-input-cut-tr: 0px;
|
|
9121
|
+
--sk-number-input-cut-br: 0px;
|
|
9122
|
+
--sk-number-input-cut-bl: 0px;
|
|
8646
9123
|
position: relative;
|
|
8647
9124
|
display: flex;
|
|
8648
9125
|
width: 100%;
|
|
@@ -8717,7 +9194,7 @@
|
|
|
8717
9194
|
--sk-number-input-font-size: 1rem;
|
|
8718
9195
|
--sk-number-input-stepper-width: 2rem;
|
|
8719
9196
|
--sk-number-input-stepper-icon: 1rem;
|
|
8720
|
-
--sk-number-input-cut: 0.
|
|
9197
|
+
--sk-number-input-cut: 0.625rem;
|
|
8721
9198
|
}
|
|
8722
9199
|
.sk-number-input-wrapper.sk-sm, .sk-number-input-wrapper.sk-size-sm {
|
|
8723
9200
|
--sk-number-input-height: 2rem;
|
|
@@ -8725,7 +9202,7 @@
|
|
|
8725
9202
|
--sk-number-input-font-size: 0.875rem;
|
|
8726
9203
|
--sk-number-input-stepper-width: 1.5rem;
|
|
8727
9204
|
--sk-number-input-stepper-icon: 0.75rem;
|
|
8728
|
-
--sk-number-input-cut: 0.
|
|
9205
|
+
--sk-number-input-cut: 0.5rem;
|
|
8729
9206
|
}
|
|
8730
9207
|
.sk-number-input-wrapper.sk-md, .sk-number-input-wrapper.sk-size-md {
|
|
8731
9208
|
--sk-number-input-height: 2.5rem;
|
|
@@ -8733,7 +9210,7 @@
|
|
|
8733
9210
|
--sk-number-input-font-size: 1rem;
|
|
8734
9211
|
--sk-number-input-stepper-width: 2rem;
|
|
8735
9212
|
--sk-number-input-stepper-icon: 1rem;
|
|
8736
|
-
--sk-number-input-cut: 0.
|
|
9213
|
+
--sk-number-input-cut: 0.625rem;
|
|
8737
9214
|
}
|
|
8738
9215
|
.sk-number-input-wrapper.sk-lg, .sk-number-input-wrapper.sk-size-lg {
|
|
8739
9216
|
--sk-number-input-height: 3rem;
|
|
@@ -8741,7 +9218,7 @@
|
|
|
8741
9218
|
--sk-number-input-font-size: 1.125rem;
|
|
8742
9219
|
--sk-number-input-stepper-width: 2.25rem;
|
|
8743
9220
|
--sk-number-input-stepper-icon: 1.125rem;
|
|
8744
|
-
--sk-number-input-cut: 0.
|
|
9221
|
+
--sk-number-input-cut: 0.75rem;
|
|
8745
9222
|
}
|
|
8746
9223
|
.sk-number-input-wrapper.sk-xl, .sk-number-input-wrapper.sk-size-xl {
|
|
8747
9224
|
--sk-number-input-height: 3.5rem;
|
|
@@ -8749,7 +9226,7 @@
|
|
|
8749
9226
|
--sk-number-input-font-size: 1.25rem;
|
|
8750
9227
|
--sk-number-input-stepper-width: 2.5rem;
|
|
8751
9228
|
--sk-number-input-stepper-icon: 1.25rem;
|
|
8752
|
-
--sk-number-input-cut: 0.
|
|
9229
|
+
--sk-number-input-cut: 0.875rem;
|
|
8753
9230
|
}
|
|
8754
9231
|
.sk-number-input {
|
|
8755
9232
|
display: flex;
|
|
@@ -8760,18 +9237,18 @@
|
|
|
8760
9237
|
}
|
|
8761
9238
|
@supports (corner-shape: bevel) {
|
|
8762
9239
|
.sk-number-input {
|
|
8763
|
-
border:
|
|
8764
|
-
border-top-left-radius:
|
|
8765
|
-
border-top-right-radius: var(--sk-number-input-cut);
|
|
8766
|
-
border-bottom-right-radius:
|
|
8767
|
-
border-bottom-left-radius:
|
|
9240
|
+
border: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
|
|
9241
|
+
border-top-left-radius: var(--sk-number-input-cut-tl);
|
|
9242
|
+
border-top-right-radius: var(--sk-number-input-cut-tr);
|
|
9243
|
+
border-bottom-right-radius: var(--sk-number-input-cut-br);
|
|
9244
|
+
border-bottom-left-radius: var(--sk-number-input-cut-bl);
|
|
8768
9245
|
corner-shape: bevel;
|
|
8769
9246
|
}
|
|
8770
9247
|
}
|
|
8771
9248
|
@supports not (corner-shape: bevel) {
|
|
8772
9249
|
.sk-number-input {
|
|
8773
9250
|
border: none;
|
|
8774
|
-
clip-path: polygon(
|
|
9251
|
+
clip-path: polygon(var(--sk-number-input-cut-tl) 0, calc(100% - var(--sk-number-input-cut-tr)) 0, 100% var(--sk-number-input-cut-tr), 100% calc(100% - var(--sk-number-input-cut-br)), calc(100% - var(--sk-number-input-cut-br)) 100%, var(--sk-number-input-cut-bl) 100%, 0 calc(100% - var(--sk-number-input-cut-bl)), 0 var(--sk-number-input-cut-tl));
|
|
8775
9252
|
}
|
|
8776
9253
|
.sk-number-input::before {
|
|
8777
9254
|
content: "";
|
|
@@ -8780,14 +9257,13 @@
|
|
|
8780
9257
|
left: 0;
|
|
8781
9258
|
right: 0;
|
|
8782
9259
|
bottom: 0;
|
|
8783
|
-
background-color:
|
|
9260
|
+
background-color: var(--sk-number-input-color-base);
|
|
8784
9261
|
z-index: -1;
|
|
8785
|
-
clip-path: polygon(
|
|
9262
|
+
clip-path: polygon(var(--sk-number-input-cut-tl) 0, calc(100% - var(--sk-number-input-cut-tr)) 0, 100% var(--sk-number-input-cut-tr), 100% calc(100% - var(--sk-number-input-cut-br)), calc(100% - var(--sk-number-input-cut-br)) 100%, var(--sk-number-input-cut-bl) 100%, 0 calc(100% - var(--sk-number-input-cut-bl)), 0 var(--sk-number-input-cut-tl), var(--sk-number-input-cut-tl) 0, calc(var(--sk-number-input-cut-tl) + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(var(--sk-number-input-cut-tl) + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-number-input-cut-bl) - var(--sk-border-width-thin)), calc(var(--sk-number-input-cut-bl) + var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-number-input-cut-br) - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-number-input-cut-br) - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(var(--sk-number-input-cut-tr) + var(--sk-border-width-thin)), calc(100% - var(--sk-number-input-cut-tr) - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(var(--sk-number-input-cut-tl) + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
8786
9263
|
}
|
|
8787
9264
|
}
|
|
8788
9265
|
.sk-number-input {
|
|
8789
9266
|
background: color-mix(in oklch, color-mix(in oklch, var(--sk-number-input-color-base) 75%, transparent 25%), #000 65%);
|
|
8790
|
-
border: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
|
|
8791
9267
|
transition-property: background, color, border-color, box-shadow;
|
|
8792
9268
|
transition-duration: var(--sk-transition-duration-base);
|
|
8793
9269
|
}
|
|
@@ -8870,17 +9346,17 @@
|
|
|
8870
9346
|
@supports (corner-shape: bevel) {
|
|
8871
9347
|
.sk-number-input-increment {
|
|
8872
9348
|
border: 0 solid transparent;
|
|
8873
|
-
border-top-left-radius:
|
|
8874
|
-
border-top-right-radius: var(--sk-number-input-cut);
|
|
8875
|
-
border-bottom-right-radius:
|
|
8876
|
-
border-bottom-left-radius:
|
|
9349
|
+
border-top-left-radius: 0px;
|
|
9350
|
+
border-top-right-radius: var(--sk-number-input-cut-tr);
|
|
9351
|
+
border-bottom-right-radius: 0px;
|
|
9352
|
+
border-bottom-left-radius: 0px;
|
|
8877
9353
|
corner-shape: bevel;
|
|
8878
9354
|
}
|
|
8879
9355
|
}
|
|
8880
9356
|
@supports not (corner-shape: bevel) {
|
|
8881
9357
|
.sk-number-input-increment {
|
|
8882
9358
|
border: none;
|
|
8883
|
-
clip-path: polygon(
|
|
9359
|
+
clip-path: polygon(0px 0, calc(100% - var(--sk-number-input-cut-tr)) 0, 100% var(--sk-number-input-cut-tr), 100% calc(100% - 0px), calc(100% - 0px) 100%, 0px 100%, 0 calc(100% - 0px), 0 0px);
|
|
8884
9360
|
}
|
|
8885
9361
|
.sk-number-input-increment::before {
|
|
8886
9362
|
content: "";
|
|
@@ -8891,12 +9367,64 @@
|
|
|
8891
9367
|
bottom: 0;
|
|
8892
9368
|
background-color: transparent;
|
|
8893
9369
|
z-index: -1;
|
|
8894
|
-
clip-path: polygon(
|
|
9370
|
+
clip-path: polygon(0px 0, calc(100% - var(--sk-number-input-cut-tr)) 0, 100% var(--sk-number-input-cut-tr), 100% calc(100% - 0px), calc(100% - 0px) 100%, 0px 100%, 0 calc(100% - 0px), 0 0px, 0px 0, calc(0px + 0) 0, 0 calc(0px + 0), 0 calc(100% - 0px - 0), calc(0px + 0) calc(100% - 0), calc(100% - 0px - 0) calc(100% - 0), calc(100% - 0) calc(100% - 0px - 0), calc(100% - 0) calc(var(--sk-number-input-cut-tr) + 0), calc(100% - var(--sk-number-input-cut-tr) - 0) 0, calc(0px + 0) 0);
|
|
8895
9371
|
}
|
|
8896
9372
|
}
|
|
8897
9373
|
.sk-number-input-increment {
|
|
8898
9374
|
border-bottom: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
|
|
8899
9375
|
}
|
|
9376
|
+
.sk-number-input-decrement {
|
|
9377
|
+
position: relative;
|
|
9378
|
+
}
|
|
9379
|
+
@supports (corner-shape: bevel) {
|
|
9380
|
+
.sk-number-input-decrement {
|
|
9381
|
+
border: 0 solid transparent;
|
|
9382
|
+
border-top-left-radius: 0px;
|
|
9383
|
+
border-top-right-radius: 0px;
|
|
9384
|
+
border-bottom-right-radius: var(--sk-number-input-cut-br);
|
|
9385
|
+
border-bottom-left-radius: 0px;
|
|
9386
|
+
corner-shape: bevel;
|
|
9387
|
+
}
|
|
9388
|
+
}
|
|
9389
|
+
@supports not (corner-shape: bevel) {
|
|
9390
|
+
.sk-number-input-decrement {
|
|
9391
|
+
border: none;
|
|
9392
|
+
clip-path: polygon(0px 0, calc(100% - 0px) 0, 100% 0px, 100% calc(100% - var(--sk-number-input-cut-br)), calc(100% - var(--sk-number-input-cut-br)) 100%, 0px 100%, 0 calc(100% - 0px), 0 0px);
|
|
9393
|
+
}
|
|
9394
|
+
.sk-number-input-decrement::before {
|
|
9395
|
+
content: "";
|
|
9396
|
+
position: absolute;
|
|
9397
|
+
top: 0;
|
|
9398
|
+
left: 0;
|
|
9399
|
+
right: 0;
|
|
9400
|
+
bottom: 0;
|
|
9401
|
+
background-color: transparent;
|
|
9402
|
+
z-index: -1;
|
|
9403
|
+
clip-path: polygon(0px 0, calc(100% - 0px) 0, 100% 0px, 100% calc(100% - var(--sk-number-input-cut-br)), calc(100% - var(--sk-number-input-cut-br)) 100%, 0px 100%, 0 calc(100% - 0px), 0 0px, 0px 0, calc(0px + 0) 0, 0 calc(0px + 0), 0 calc(100% - 0px - 0), calc(0px + 0) calc(100% - 0), calc(100% - var(--sk-number-input-cut-br) - 0) calc(100% - 0), calc(100% - 0) calc(100% - var(--sk-number-input-cut-br) - 0), calc(100% - 0) calc(0px + 0), calc(100% - 0px - 0) 0, calc(0px + 0) 0);
|
|
9404
|
+
}
|
|
9405
|
+
}
|
|
9406
|
+
.sk-number-input-wrapper:where(:not([class*=sk-cut-])) {
|
|
9407
|
+
--sk-number-input-cut-tr: var(--sk-number-input-cut);
|
|
9408
|
+
}
|
|
9409
|
+
sk-number-input-wrapper:where(:not([corners])) {
|
|
9410
|
+
--sk-number-input-cut-tr: var(--sk-number-input-cut);
|
|
9411
|
+
}
|
|
9412
|
+
.sk-number-input-wrapper.sk-cut-top-left,
|
|
9413
|
+
sk-number-input-wrapper[corners~=top-left] {
|
|
9414
|
+
--sk-number-input-cut-tl: var(--sk-number-input-cut);
|
|
9415
|
+
}
|
|
9416
|
+
.sk-number-input-wrapper.sk-cut-top-right,
|
|
9417
|
+
sk-number-input-wrapper[corners~=top-right] {
|
|
9418
|
+
--sk-number-input-cut-tr: var(--sk-number-input-cut);
|
|
9419
|
+
}
|
|
9420
|
+
.sk-number-input-wrapper.sk-cut-bottom-right,
|
|
9421
|
+
sk-number-input-wrapper[corners~=bottom-right] {
|
|
9422
|
+
--sk-number-input-cut-br: var(--sk-number-input-cut);
|
|
9423
|
+
}
|
|
9424
|
+
.sk-number-input-wrapper.sk-cut-bottom-left,
|
|
9425
|
+
sk-number-input-wrapper[corners~=bottom-left] {
|
|
9426
|
+
--sk-number-input-cut-bl: var(--sk-number-input-cut);
|
|
9427
|
+
}
|
|
8900
9428
|
.sk-number-input-wrapper:where(:not(.sk-neutral):not(.sk-primary):not(.sk-accent):not(.sk-info):not(.sk-success):not(.sk-warning):not(.sk-danger):not(.sk-boulder):not(.sk-neon-blue):not(.sk-light-blue):not(.sk-neon-orange):not(.sk-neon-purple):not(.sk-neon-green):not(.sk-neon-mint):not(.sk-neon-pink):not(.sk-yellow):not(.sk-red)) {
|
|
8901
9429
|
--sk-number-input-color-base: var(--sk-neutral-base);
|
|
8902
9430
|
--sk-number-input-fg: var(--sk-neutral-text);
|
|
@@ -10752,24 +11280,28 @@
|
|
|
10752
11280
|
.sk-select {
|
|
10753
11281
|
--sk-select-color-base: var(--sk-neutral-base);
|
|
10754
11282
|
--sk-select-fg: var(--sk-neutral-text);
|
|
11283
|
+
--sk-select-cut-tl: 0px;
|
|
11284
|
+
--sk-select-cut-tr: 0px;
|
|
11285
|
+
--sk-select-cut-br: 0px;
|
|
11286
|
+
--sk-select-cut-bl: 0px;
|
|
10755
11287
|
position: relative;
|
|
10756
11288
|
display: inline-flex;
|
|
10757
11289
|
width: 100%;
|
|
10758
11290
|
}
|
|
10759
11291
|
.sk-select:where(:not([class*=sk-size-])) {
|
|
10760
|
-
--sk-select-cut: 0.
|
|
11292
|
+
--sk-select-cut: 0.625rem;
|
|
10761
11293
|
}
|
|
10762
11294
|
.sk-select.sk-sm, .sk-select.sk-size-sm {
|
|
10763
|
-
--sk-select-cut: 0.
|
|
11295
|
+
--sk-select-cut: 0.5rem;
|
|
10764
11296
|
}
|
|
10765
11297
|
.sk-select.sk-md, .sk-select.sk-size-md {
|
|
10766
|
-
--sk-select-cut: 0.
|
|
11298
|
+
--sk-select-cut: 0.625rem;
|
|
10767
11299
|
}
|
|
10768
11300
|
.sk-select.sk-lg, .sk-select.sk-size-lg {
|
|
10769
|
-
--sk-select-cut: 0.
|
|
11301
|
+
--sk-select-cut: 0.75rem;
|
|
10770
11302
|
}
|
|
10771
11303
|
.sk-select.sk-xl, .sk-select.sk-size-xl {
|
|
10772
|
-
--sk-select-cut: 0.
|
|
11304
|
+
--sk-select-cut: 0.875rem;
|
|
10773
11305
|
}
|
|
10774
11306
|
.sk-select.sk-neutral {
|
|
10775
11307
|
--sk-select-color-base: var(--sk-neutral-base);
|
|
@@ -10844,17 +11376,17 @@
|
|
|
10844
11376
|
@supports (corner-shape: bevel) {
|
|
10845
11377
|
.sk-select-trigger {
|
|
10846
11378
|
border: var(--sk-border-width-thin) solid var(--sk-select-color-base);
|
|
10847
|
-
border-top-left-radius:
|
|
10848
|
-
border-top-right-radius: var(--sk-select-cut);
|
|
10849
|
-
border-bottom-right-radius:
|
|
10850
|
-
border-bottom-left-radius:
|
|
11379
|
+
border-top-left-radius: var(--sk-select-cut-tl);
|
|
11380
|
+
border-top-right-radius: var(--sk-select-cut-tr);
|
|
11381
|
+
border-bottom-right-radius: var(--sk-select-cut-br);
|
|
11382
|
+
border-bottom-left-radius: var(--sk-select-cut-bl);
|
|
10851
11383
|
corner-shape: bevel;
|
|
10852
11384
|
}
|
|
10853
11385
|
}
|
|
10854
11386
|
@supports not (corner-shape: bevel) {
|
|
10855
11387
|
.sk-select-trigger {
|
|
10856
11388
|
border: none;
|
|
10857
|
-
clip-path: polygon(
|
|
11389
|
+
clip-path: polygon(var(--sk-select-cut-tl) 0, calc(100% - var(--sk-select-cut-tr)) 0, 100% var(--sk-select-cut-tr), 100% calc(100% - var(--sk-select-cut-br)), calc(100% - var(--sk-select-cut-br)) 100%, var(--sk-select-cut-bl) 100%, 0 calc(100% - var(--sk-select-cut-bl)), 0 var(--sk-select-cut-tl));
|
|
10858
11390
|
}
|
|
10859
11391
|
.sk-select-trigger::before {
|
|
10860
11392
|
content: "";
|
|
@@ -10865,7 +11397,7 @@
|
|
|
10865
11397
|
bottom: 0;
|
|
10866
11398
|
background-color: var(--sk-select-color-base);
|
|
10867
11399
|
z-index: -1;
|
|
10868
|
-
clip-path: polygon(
|
|
11400
|
+
clip-path: polygon(var(--sk-select-cut-tl) 0, calc(100% - var(--sk-select-cut-tr)) 0, 100% var(--sk-select-cut-tr), 100% calc(100% - var(--sk-select-cut-br)), calc(100% - var(--sk-select-cut-br)) 100%, var(--sk-select-cut-bl) 100%, 0 calc(100% - var(--sk-select-cut-bl)), 0 var(--sk-select-cut-tl), var(--sk-select-cut-tl) 0, calc(var(--sk-select-cut-tl) + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(var(--sk-select-cut-tl) + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-select-cut-bl) - var(--sk-border-width-thin)), calc(var(--sk-select-cut-bl) + var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-select-cut-br) - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-select-cut-br) - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(var(--sk-select-cut-tr) + var(--sk-border-width-thin)), calc(100% - var(--sk-select-cut-tr) - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(var(--sk-select-cut-tl) + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
10869
11401
|
}
|
|
10870
11402
|
}
|
|
10871
11403
|
.sk-select-trigger {
|
|
@@ -11087,6 +11619,28 @@
|
|
|
11087
11619
|
margin: var(--sk-space-xs) 0;
|
|
11088
11620
|
background: color-mix(in oklch, var(--sk-menu-color-base), transparent 70%);
|
|
11089
11621
|
}
|
|
11622
|
+
.sk-select:where(:not([class*=sk-cut-])) {
|
|
11623
|
+
--sk-select-cut-tr: var(--sk-select-cut);
|
|
11624
|
+
}
|
|
11625
|
+
sk-select:where(:not([corners])) {
|
|
11626
|
+
--sk-select-cut-tr: var(--sk-select-cut);
|
|
11627
|
+
}
|
|
11628
|
+
.sk-select.sk-cut-top-left,
|
|
11629
|
+
sk-select[corners~=top-left] {
|
|
11630
|
+
--sk-select-cut-tl: var(--sk-select-cut);
|
|
11631
|
+
}
|
|
11632
|
+
.sk-select.sk-cut-top-right,
|
|
11633
|
+
sk-select[corners~=top-right] {
|
|
11634
|
+
--sk-select-cut-tr: var(--sk-select-cut);
|
|
11635
|
+
}
|
|
11636
|
+
.sk-select.sk-cut-bottom-right,
|
|
11637
|
+
sk-select[corners~=bottom-right] {
|
|
11638
|
+
--sk-select-cut-br: var(--sk-select-cut);
|
|
11639
|
+
}
|
|
11640
|
+
.sk-select.sk-cut-bottom-left,
|
|
11641
|
+
sk-select[corners~=bottom-left] {
|
|
11642
|
+
--sk-select-cut-bl: var(--sk-select-cut);
|
|
11643
|
+
}
|
|
11090
11644
|
.sk-select:where(:not(.sk-neutral):not(.sk-primary):not(.sk-accent):not(.sk-info):not(.sk-success):not(.sk-warning):not(.sk-danger):not(.sk-boulder):not(.sk-neon-blue):not(.sk-light-blue):not(.sk-neon-orange):not(.sk-neon-purple):not(.sk-neon-green):not(.sk-neon-mint):not(.sk-neon-pink):not(.sk-yellow):not(.sk-red)) {
|
|
11091
11645
|
--sk-select-color-base: var(--sk-neutral-base);
|
|
11092
11646
|
--sk-select-fg: var(--sk-neutral-text);
|
|
@@ -18016,7 +18570,7 @@ kbd.sk-neutral {
|
|
|
18016
18570
|
@layer reset, tokens, base, components, utilities;.sk-panel[data-v-3d4b2da6]::after {
|
|
18017
18571
|
display: var(--a6c4a7d4);
|
|
18018
18572
|
}.vuelor-picker-root{--color-vuelor-primary: #0d99ff;--color-vuelor-surface: #ffffff;--color-vuelor-border: #e6e6e6;--color-vuelor-shadow-inner: #0000001a;--color-vuelor-input-bg: #f5f5f5;--color-vuelor-button-bg--hover: #0000000d;--opacity-vuelor-disabled: .5;--shadow-vuelor-card: 0 .125rem .3125rem 0 #00000026, 0 .625rem 1rem 0 #0000001f, 0 0 .03125rem 0 #0000001f;--shadow-vuelor-thumb: 0 0 .03125rem rgba(0, 0, 0, .18), 0 .1875rem .5rem rgba(0, 0, 0, .1), 0 .0625rem .1875rem rgba(0, 0, 0, .1);--shadow-vuelor-inner: inset 0 0 0 .0625rem var(--color-vuelor-shadow-inner);width:15rem;background-color:var(--color-vuelor-surface);border-radius:.8125rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-vuelor-card)}.vuelor-picker-eye-dropper{padding:.25rem;border-radius:.3125rem}.vuelor-picker-eye-dropper:hover:not(:disabled){background-color:var(--color-vuelor-button-bg--hover)}.vuelor-picker-eye-dropper:disabled{opacity:var(--opacity-vuelor-disabled);background-color:transparent;cursor:not-allowed}.vuelor-picker-eye-dropper:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-shared-thumb{display:block;width:1rem;height:1rem;border-radius:9999rem;border-width:.25rem;border-style:solid;border-color:var(--color-vuelor-surface);box-shadow:var(--shadow-vuelor-thumb)}.vuelor-picker-shared-thumb:focus{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-canvas-root{position:relative;width:100%;height:13rem;touch-action:none;border-radius:.3125rem;box-shadow:var(--shadow-vuelor-inner)}.vuelor-picker-canvas-root[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-slider-root{position:relative;height:1rem;width:100%;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.vuelor-picker-slider-root[data-orientation=vertical]{height:auto;width:1rem;flex-direction:column}.vuelor-picker-slider-root[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-slider-track{position:relative;height:1rem;width:100%;flex-grow:1;border-radius:9999rem;box-shadow:var(--shadow-vuelor-inner)}.vuelor-picker-slider-track[data-orientation=vertical]{height:100%;width:1rem}.vuelor-picker-input-group{width:100%;display:flex;gap:.0625rem;border-radius:.3125rem;outline-style:solid;outline-width:0;outline-color:var(--color-vuelor-border)}.vuelor-picker-input-group:hover:not([data-disabled]){outline-width:.0625rem}.vuelor-picker-input-group:focus-within{outline-width:.0625rem;outline-color:var(--color-vuelor-primary)}.vuelor-picker-input-group[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled);outline:none}.vuelor-picker-input-item{display:flex;flex:1 1 0%;align-items:center;padding-left:.25rem;padding-right:.25rem;gap:.25rem;background-color:var(--color-vuelor-input-bg)}.vuelor-picker-input-item[data-before],.vuelor-picker-input-item[data-alpha-input]{flex-grow:0}.vuelor-picker-input-item:first-child{border-top-left-radius:.3125rem;border-bottom-left-radius:.3125rem}.vuelor-picker-input-item:last-child{border-top-right-radius:.3125rem;border-bottom-right-radius:.3125rem}.vuelor-picker-input-label{-webkit-user-select:none;user-select:none;color:#000;font-size:.6875rem;opacity:.4}.vuelor-picker-input-field{width:100%;height:1.5rem;min-width:1.25rem;font-size:.6875rem;background:transparent;border:none}.vuelor-picker-input-field:focus{outline:none}.vuelor-picker-swatch-root{position:relative;flex-grow:0;height:1rem;width:1rem;border-radius:20%;overflow:hidden}.vuelor-picker-swatch-root:disabled{opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-swatch-root:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-swatch-alpha{position:absolute;top:0;right:0;height:100%;width:50%}
|
|
18019
|
-
.vuelor-picker-root[data-v-
|
|
18573
|
+
.vuelor-picker-root[data-v-7266a0b5] {
|
|
18020
18574
|
width: 100%;
|
|
18021
18575
|
background: transparent;
|
|
18022
18576
|
border-radius: 0;
|