@sdata/web-vue 1.18.0 → 2.1.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.
Files changed (683) hide show
  1. package/README.md +3 -7
  2. package/dist/sd.css +4083 -2512
  3. package/dist/sd.min.css +1 -1
  4. package/es/_components/feedback-icon.js +1 -1
  5. package/es/_components/icon-hover.js +1 -1
  6. package/es/_components/icon-hover.vue.d.ts +1 -1
  7. package/es/_components/input-label/input-label.d.ts +1 -1
  8. package/es/_components/input-label/style/index.css +27 -27
  9. package/es/_components/picker/input-range.js +1 -1
  10. package/es/_components/picker/input-range.vue.d.ts +2 -2
  11. package/es/_components/picker/input.js +1 -1
  12. package/es/_components/picker/input.vue.d.ts +2 -2
  13. package/es/_components/resize-trigger.js +1 -1
  14. package/es/_components/select-view/select-view.d.ts +3 -3
  15. package/es/_components/select-view/style/index.css +199 -199
  16. package/es/_components/transition/expand-transition.js +1 -1
  17. package/es/_components/virtual-list/virtual-list.js +1 -1
  18. package/es/_components/virtual-list/virtual-list.vue.d.ts +8 -5
  19. package/es/_components/virtual-list/virtual-list.vue_vue_type_script_lang.js +9 -16
  20. package/es/_hooks/use-form-item.d.ts +1 -1
  21. package/es/_hooks/use-scrollbar.d.ts +2 -3
  22. package/es/_hooks/use-scrollbar.js +4 -8
  23. package/es/_hooks/use-size.d.ts +1 -1
  24. package/es/_utils/color.d.ts +9 -0
  25. package/es/_utils/color.js +38 -2
  26. package/es/_utils/date.d.ts +1 -2
  27. package/es/_utils/date.js +74 -25
  28. package/es/_utils/global-config.d.ts +4 -0
  29. package/es/_utils/global-config.js +10 -2
  30. package/es/_utils/omit.js +1 -1
  31. package/es/_utils/responsive-observe.js +1 -1
  32. package/es/_utils/virtual-dropdown.js +1 -1
  33. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/asyncToGenerator.js +1 -1
  34. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/defineProperty.js +1 -1
  35. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/extends.js +1 -1
  36. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/objectDestructuringEmpty.js +1 -1
  37. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/objectSpread2.js +1 -1
  38. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/objectWithoutProperties.js +1 -1
  39. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/objectWithoutPropertiesLoose.js +1 -1
  40. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/toPrimitive.js +1 -1
  41. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/toPropertyKey.js +1 -1
  42. package/es/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/typeof.js +1 -1
  43. package/es/affix/affix.js +1 -1
  44. package/es/affix/affix.vue_vue_type_script_lang.js +1 -1
  45. package/es/alert/alert.js +1 -1
  46. package/es/alert/alert.vue.d.ts +1 -1
  47. package/es/alert/index.d.ts +2 -2
  48. package/es/alert/style/index.css +28 -28
  49. package/es/anchor/anchor-link.js +1 -1
  50. package/es/anchor/anchor.js +1 -1
  51. package/es/anchor/style/index.css +9 -9
  52. package/es/auto-complete/auto-complete.d.ts +3 -3
  53. package/es/auto-complete/auto-complete.js +23 -9
  54. package/es/auto-complete/index.d.ts +9 -9
  55. package/es/auto-complete/style/index.css +3 -3
  56. package/es/avatar/avatar.js +1 -1
  57. package/es/avatar/avatar.vue_vue_type_script_lang.js +1 -1
  58. package/es/avatar/style/index.css +15 -15
  59. package/es/back-top/back-top.js +1 -1
  60. package/es/back-top/style/index.css +4 -4
  61. package/es/badge/badge.d.ts +1 -1
  62. package/es/badge/badge.js +1 -1
  63. package/es/badge/index.d.ts +3 -3
  64. package/es/badge/style/index.css +25 -25
  65. package/es/breadcrumb/style/index.css +12 -12
  66. package/es/button/button-group.js +1 -1
  67. package/es/button/button.js +1 -1
  68. package/es/button/button.vue.d.ts +2 -2
  69. package/es/button/index.d.ts +6 -6
  70. package/es/button/style/index.css +37 -37
  71. package/es/calendar/components/body.js +5 -0
  72. package/es/calendar/components/body.vue.d.ts +100 -0
  73. package/es/calendar/components/body.vue_vue_type_script_setup_true_lang.js +158 -0
  74. package/es/calendar/components/cell.js +5 -0
  75. package/es/calendar/components/cell.vue.d.ts +220 -0
  76. package/es/calendar/components/cell.vue_vue_type_script_setup_true_lang.js +813 -0
  77. package/es/calendar/components/event.js +5 -0
  78. package/es/calendar/components/event.vue.d.ts +73 -0
  79. package/es/calendar/components/event.vue_vue_type_script_setup_true_lang.js +290 -0
  80. package/es/calendar/components/header.js +5 -0
  81. package/es/calendar/components/header.vue.d.ts +34 -0
  82. package/es/calendar/components/header.vue_vue_type_script_setup_true_lang.js +84 -0
  83. package/es/calendar/components/headings-bar.js +5 -0
  84. package/es/calendar/components/headings-bar.vue.d.ts +40 -0
  85. package/es/calendar/components/headings-bar.vue_vue_type_script_setup_true_lang.js +201 -0
  86. package/es/calendar/components/index.js +5 -0
  87. package/es/calendar/components/index.vue.d.ts +616 -0
  88. package/es/calendar/components/index.vue_vue_type_script_setup_true_lang.js +314 -0
  89. package/es/calendar/components/time-column.js +5 -0
  90. package/es/calendar/components/time-column.vue.d.ts +27 -0
  91. package/es/calendar/components/time-column.vue_vue_type_script_setup_true_lang.js +66 -0
  92. package/es/calendar/context.d.ts +16 -0
  93. package/es/calendar/context.js +5 -0
  94. package/es/calendar/core/config.d.ts +126 -0
  95. package/es/calendar/core/config.js +522 -0
  96. package/es/calendar/core/events.d.ts +1 -0
  97. package/es/calendar/core/events.js +921 -0
  98. package/es/calendar/core/i18n.d.ts +1 -0
  99. package/es/calendar/core/i18n.js +72 -0
  100. package/es/calendar/core/index.d.ts +112 -0
  101. package/es/calendar/core/index.js +66 -0
  102. package/es/calendar/core/props-definitions.d.ts +263 -0
  103. package/es/calendar/core/props-definitions.js +70 -0
  104. package/es/calendar/core/view.d.ts +60 -0
  105. package/es/calendar/core/view.js +761 -0
  106. package/es/calendar/default-theme.scss +1012 -0
  107. package/es/calendar/hooks/use-calendar-theme.d.ts +4 -0
  108. package/es/calendar/hooks/use-calendar-theme.js +32 -0
  109. package/es/calendar/index.d.ts +836 -98
  110. package/es/calendar/index.js +3 -3
  111. package/es/calendar/index.scss +331 -0
  112. package/es/calendar/modules/drag-and-drop.d.ts +8 -0
  113. package/es/calendar/modules/drag-and-drop.js +442 -0
  114. package/es/calendar/style/body.scss +51 -0
  115. package/es/calendar/style/cell.scss +153 -0
  116. package/es/calendar/style/css.js +0 -1
  117. package/es/calendar/style/event.scss +69 -0
  118. package/es/calendar/style/header.scss +104 -0
  119. package/es/calendar/style/headings-bar.scss +94 -0
  120. package/es/calendar/style/index.css +1514 -264
  121. package/es/calendar/style/index.d.ts +1 -3
  122. package/es/calendar/style/index.js +0 -1
  123. package/es/calendar/style/index.scss +9 -496
  124. package/es/calendar/style/time-column.scss +109 -0
  125. package/es/calendar/style/token.scss +64 -60
  126. package/es/calendar/utils/conversions.d.ts +3 -0
  127. package/es/calendar/utils/conversions.js +31 -0
  128. package/es/calendar/utils/date.d.ts +26 -0
  129. package/es/calendar/utils/date.js +253 -0
  130. package/es/calendar/utils/special-hours-allow-events.d.ts +28 -0
  131. package/es/calendar/utils/special-hours-allow-events.js +230 -0
  132. package/es/card/card-grid.js +1 -1
  133. package/es/card/style/index.css +16 -16
  134. package/es/carousel/carousel-arrow.js +1 -1
  135. package/es/carousel/carousel-indicator.js +1 -1
  136. package/es/carousel/carousel-indicator.vue.d.ts +1 -1
  137. package/es/carousel/carousel-item.js +1 -1
  138. package/es/carousel/carousel.js +1 -1
  139. package/es/carousel/style/index.css +11 -11
  140. package/es/cascader/cascader-option.d.ts +1 -1
  141. package/es/cascader/cascader-option.js +1 -1
  142. package/es/cascader/cascader-panel.vue.d.ts +1 -1
  143. package/es/cascader/cascader-panel.vue_vue_type_script_setup_true_lang.js +2 -2
  144. package/es/cascader/cascader.vue.d.ts +5 -5
  145. package/es/cascader/cascader.vue_vue_type_script_setup_true_lang.js +5 -5
  146. package/es/cascader/style/index.css +36 -36
  147. package/es/checkbox/checkbox.d.ts +1 -1
  148. package/es/checkbox/index.d.ts +2 -2
  149. package/es/checkbox/style/index.css +18 -18
  150. package/es/collapse/collapse-item.d.ts +1 -1
  151. package/es/collapse/collapse.js +1 -1
  152. package/es/collapse/index.d.ts +1 -1
  153. package/es/collapse/style/index.css +15 -15
  154. package/es/color-picker/color-picker.d.ts +1 -1
  155. package/es/color-picker/color-picker.js +1 -1
  156. package/es/color-picker/index.d.ts +3 -3
  157. package/es/color-picker/palette.js +1 -1
  158. package/es/color-picker/panel.d.ts +1 -1
  159. package/es/color-picker/panel.js +2 -2
  160. package/es/color-picker/style/index.css +13 -13
  161. package/es/color-picker/utils.js +1 -1
  162. package/es/comment/comment.js +2 -2
  163. package/es/comment/style/index.css +5 -5
  164. package/es/components.d.ts +2 -2
  165. package/es/config-provider/config-provider.js +1 -1
  166. package/es/config-provider/config-provider.vue.d.ts +1 -1
  167. package/es/config-provider/context.d.ts +3 -0
  168. package/es/config-provider/index.d.ts +3 -3
  169. package/es/config-provider/theme-provider.vue_vue_type_script_setup_true_lang.js +2 -2
  170. package/es/config-provider/theme.js +1 -1
  171. package/es/copy/copy.vue_vue_type_script_setup_true_lang.js +3 -3
  172. package/es/cropper/cropper.vue_vue_type_script_setup_true_lang.js +3 -3
  173. package/es/cropper/style/index.css +3 -3
  174. package/es/date-picker/hooks/use-range-time-picker-value.js +1 -1
  175. package/es/date-picker/index.d.ts +48 -48
  176. package/es/date-picker/panels/body.js +1 -1
  177. package/es/date-picker/panels/date/index.js +2 -2
  178. package/es/date-picker/panels/date/index.vue.d.ts +6 -6
  179. package/es/date-picker/panels/date/index.vue_vue_type_script_lang.js +1 -1
  180. package/es/date-picker/panels/footer.js +1 -1
  181. package/es/date-picker/panels/footer.vue.d.ts +9 -9
  182. package/es/date-picker/panels/header.js +1 -1
  183. package/es/date-picker/panels/month/index.js +2 -2
  184. package/es/date-picker/panels/quarter/index.js +2 -2
  185. package/es/date-picker/panels/shortcuts.js +1 -1
  186. package/es/date-picker/panels/shortcuts.vue.d.ts +6 -6
  187. package/es/date-picker/panels/week/index.js +1 -1
  188. package/es/date-picker/panels/week/index.vue.d.ts +6 -6
  189. package/es/date-picker/panels/week-list.js +1 -1
  190. package/es/date-picker/panels/year/index.js +2 -2
  191. package/es/date-picker/picker-panel.js +1 -1
  192. package/es/date-picker/picker-panel.vue.d.ts +28 -28
  193. package/es/date-picker/picker.js +2 -2
  194. package/es/date-picker/picker.vue.d.ts +46 -46
  195. package/es/date-picker/picker.vue_vue_type_script_lang.js +1 -1
  196. package/es/date-picker/range-picker-panel.js +1 -1
  197. package/es/date-picker/range-picker-panel.vue.d.ts +29 -29
  198. package/es/date-picker/range-picker-panel.vue_vue_type_script_lang.js +1 -1
  199. package/es/date-picker/range-picker.js +2 -2
  200. package/es/date-picker/range-picker.vue.d.ts +48 -48
  201. package/es/date-picker/range-picker.vue_vue_type_script_lang.js +1 -1
  202. package/es/date-picker/style/index.css +72 -72
  203. package/es/descriptions/descriptions-item.js +1 -1
  204. package/es/descriptions/descriptions.d.ts +2 -2
  205. package/es/descriptions/descriptions.js +1 -1
  206. package/es/descriptions/index.d.ts +6 -6
  207. package/es/descriptions/style/index.css +10 -10
  208. package/es/divider/divider.d.ts +1 -1
  209. package/es/divider/index.d.ts +3 -3
  210. package/es/divider/style/index.css +4 -4
  211. package/es/drawer/drawer.js +9 -2
  212. package/es/drawer/drawer.vue.d.ts +2905 -10
  213. package/es/drawer/drawer.vue_vue_type_script_lang.js +26 -7
  214. package/es/drawer/index.d.ts +6550 -764
  215. package/es/drawer/index.js +2 -2
  216. package/es/drawer/style/index.css +12 -7
  217. package/es/drawer/style/index.scss +6 -0
  218. package/es/dropdown/dropdown-button.js +1 -1
  219. package/es/dropdown/dropdown-button.vue.d.ts +24 -21
  220. package/es/dropdown/dropdown-group.js +1 -1
  221. package/es/dropdown/dropdown-option.js +1 -1
  222. package/es/dropdown/dropdown-option.vue.d.ts +1 -1
  223. package/es/dropdown/dropdown-panel.js +1 -1
  224. package/es/dropdown/dropdown-panel.vue.d.ts +6 -3
  225. package/es/dropdown/dropdown-submenu.js +1 -1
  226. package/es/dropdown/dropdown-submenu.vue.d.ts +18 -15
  227. package/es/dropdown/dropdown.js +1 -1
  228. package/es/dropdown/dropdown.vue.d.ts +16 -13
  229. package/es/dropdown/index.d.ts +78 -66
  230. package/es/dropdown/style/index.css +1 -1
  231. package/es/ellipsis/ellipsis.js +1 -1
  232. package/es/ellipsis/ellipsis.vue.d.ts +24 -24
  233. package/es/ellipsis/ellipsis.vue_vue_type_script_lang.js +2 -2
  234. package/es/ellipsis/index.d.ts +96 -96
  235. package/es/ellipsis/performant-ellipsis.js +1 -1
  236. package/es/ellipsis/performant-ellipsis.vue.d.ts +24 -24
  237. package/es/ellipsis/performant-ellipsis.vue_vue_type_script_lang.js +1 -1
  238. package/es/empty/style/index.css +2 -2
  239. package/es/form/form-item-label.js +1 -1
  240. package/es/form/form-item-label.vue.d.ts +24 -24
  241. package/es/form/form-item-message.js +1 -1
  242. package/es/form/form-item.js +1 -1
  243. package/es/form/form-item.vue.d.ts +29 -29
  244. package/es/form/form-item.vue_vue_type_script_lang.js +3 -3
  245. package/es/form/form.js +1 -1
  246. package/es/form/form.vue.d.ts +1 -1
  247. package/es/form/index.d.ts +35 -35
  248. package/es/form/style/index.css +6 -6
  249. package/es/grid/grid-col.js +1 -1
  250. package/es/grid/grid-col.vue_vue_type_script_lang.js +1 -1
  251. package/es/grid/grid-item.js +1 -1
  252. package/es/grid/grid-item.vue_vue_type_script_lang.js +1 -1
  253. package/es/grid/grid-row.js +1 -1
  254. package/es/grid/grid-row.vue.d.ts +4 -4
  255. package/es/grid/grid.js +1 -1
  256. package/es/grid/index.d.ts +4 -4
  257. package/es/icon/icon-calendar/icon-calendar.js +1 -1
  258. package/es/icon/icon-caret-down/icon-caret-down.js +1 -1
  259. package/es/icon/icon-caret-left/icon-caret-left.js +1 -1
  260. package/es/icon/icon-caret-right/icon-caret-right.js +1 -1
  261. package/es/icon/icon-caret-up/icon-caret-up.js +1 -1
  262. package/es/icon/icon-check/icon-check.js +1 -1
  263. package/es/icon/icon-check-circle-fill/icon-check-circle-fill.js +1 -1
  264. package/es/icon/icon-clock-circle/icon-clock-circle.js +1 -1
  265. package/es/icon/icon-close/icon-close.js +1 -1
  266. package/es/icon/icon-close-circle-fill/icon-close-circle-fill.js +1 -1
  267. package/es/icon/icon-copy/icon-copy.js +1 -1
  268. package/es/icon/icon-delete/icon-delete.js +1 -1
  269. package/es/icon/icon-double-left/icon-double-left.js +1 -1
  270. package/es/icon/icon-double-right/icon-double-right.js +1 -1
  271. package/es/icon/icon-down/icon-down.js +1 -1
  272. package/es/icon/icon-drag-dot/icon-drag-dot.js +1 -1
  273. package/es/icon/icon-drag-dot-vertical/icon-drag-dot-vertical.js +1 -1
  274. package/es/icon/icon-edit/icon-edit.js +1 -1
  275. package/es/icon/icon-empty/icon-empty.js +1 -1
  276. package/es/icon/icon-exclamation/icon-exclamation.js +1 -1
  277. package/es/icon/icon-exclamation-circle-fill/icon-exclamation-circle-fill.js +1 -1
  278. package/es/icon/icon-eye/icon-eye.js +1 -1
  279. package/es/icon/icon-eye-invisible/icon-eye-invisible.js +1 -1
  280. package/es/icon/icon-face-frown-fill/icon-face-frown-fill.js +1 -1
  281. package/es/icon/icon-face-meh-fill/icon-face-meh-fill.js +1 -1
  282. package/es/icon/icon-face-smile-fill/icon-face-smile-fill.js +1 -1
  283. package/es/icon/icon-file/icon-file.js +1 -1
  284. package/es/icon/icon-file-audio/icon-file-audio.js +1 -1
  285. package/es/icon/icon-file-image/icon-file-image.js +1 -1
  286. package/es/icon/icon-file-pdf/icon-file-pdf.js +1 -1
  287. package/es/icon/icon-file-video/icon-file-video.js +1 -1
  288. package/es/icon/icon-filter/icon-filter.js +1 -1
  289. package/es/icon/icon-fullscreen/icon-fullscreen.js +1 -1
  290. package/es/icon/icon-image-close/icon-image-close.js +1 -1
  291. package/es/icon/icon-info/icon-info.js +1 -1
  292. package/es/icon/icon-info-circle-fill/icon-info-circle-fill.js +1 -1
  293. package/es/icon/icon-left/icon-left.js +1 -1
  294. package/es/icon/icon-link/icon-link.js +1 -1
  295. package/es/icon/icon-loading/icon-loading.js +1 -1
  296. package/es/icon/icon-menu-fold/icon-menu-fold.js +1 -1
  297. package/es/icon/icon-menu-unfold/icon-menu-unfold.js +1 -1
  298. package/es/icon/icon-minus/icon-minus.js +1 -1
  299. package/es/icon/icon-more/icon-more.js +1 -1
  300. package/es/icon/icon-oblique-line/icon-oblique-line.js +1 -1
  301. package/es/icon/icon-original-size/icon-original-size.js +1 -1
  302. package/es/icon/icon-pause/icon-pause.js +1 -1
  303. package/es/icon/icon-play-arrow-fill/icon-play-arrow-fill.js +1 -1
  304. package/es/icon/icon-plus/icon-plus.js +1 -1
  305. package/es/icon/icon-question-circle/icon-question-circle.js +1 -1
  306. package/es/icon/icon-right/icon-right.js +1 -1
  307. package/es/icon/icon-rotate-left/icon-rotate-left.js +1 -1
  308. package/es/icon/icon-rotate-right/icon-rotate-right.js +1 -1
  309. package/es/icon/icon-search/icon-search.js +1 -1
  310. package/es/icon/icon-star-fill/icon-star-fill.js +1 -1
  311. package/es/icon/icon-to-top/icon-to-top.js +1 -1
  312. package/es/icon/icon-up/icon-up.js +1 -1
  313. package/es/icon/icon-upload/icon-upload.js +1 -1
  314. package/es/icon/icon-zoom-in/icon-zoom-in.js +1 -1
  315. package/es/icon/icon-zoom-out/icon-zoom-out.js +1 -1
  316. package/es/icon-component/icon.js +1 -1
  317. package/es/icon.js +292 -292
  318. package/es/image/image-footer.js +1 -1
  319. package/es/image/image.js +2 -2
  320. package/es/image/image.vue.d.ts +24 -24
  321. package/es/image/preview-action.d.ts +24 -24
  322. package/es/image/preview-arrow.js +1 -1
  323. package/es/image/preview-group.js +2 -2
  324. package/es/image/preview-group.vue.d.ts +25 -25
  325. package/es/image/preview-toolbar.js +1 -1
  326. package/es/image/preview-toolbar.vue.d.ts +24 -24
  327. package/es/image/preview.js +1 -1
  328. package/es/image/preview.vue.d.ts +24 -24
  329. package/es/image/preview.vue_vue_type_script_lang.js +1 -1
  330. package/es/image/style/index.css +32 -32
  331. package/es/index.css +4083 -2512
  332. package/es/index.d.ts +8 -2
  333. package/es/index.js +11 -10
  334. package/es/index.scss +3 -1
  335. package/es/input/index.d.ts +9 -9
  336. package/es/input/input-group.js +1 -1
  337. package/es/input/input-password.js +1 -1
  338. package/es/input/input-password.vue.d.ts +3 -3
  339. package/es/input/input.d.ts +2 -2
  340. package/es/input/input.js +1 -1
  341. package/es/input/style/index.css +50 -50
  342. package/es/input-number/index.d.ts +6 -6
  343. package/es/input-number/input-number.d.ts +2 -2
  344. package/es/input-number/input-number.js +1 -1
  345. package/es/input-number/style/index.css +16 -16
  346. package/es/input-tag/index.d.ts +6 -6
  347. package/es/input-tag/input-tag.d.ts +2 -2
  348. package/es/input-tag/input-tag.js +1 -1
  349. package/es/input-tag/style/index.css +172 -172
  350. package/es/input-tag/utils.js +1 -1
  351. package/es/json-form/json-form-component.vue_vue_type_script_setup_true_lang.js +3 -3
  352. package/es/json-form/json-form-item.vue_vue_type_script_setup_true_lang.js +3 -3
  353. package/es/json-form/json-form.vue_vue_type_script_setup_true_lang.js +3 -3
  354. package/es/json-form/utils.js +3 -3
  355. package/es/layout/content.js +1 -1
  356. package/es/layout/footer.js +1 -1
  357. package/es/layout/header.vue.d.ts +1 -1
  358. package/es/layout/header.vue_vue_type_script_setup_true_lang.js +2 -2
  359. package/es/layout/index.d.ts +21 -21
  360. package/es/layout/layout.js +1 -1
  361. package/es/layout/sider.js +1 -1
  362. package/es/layout/sider.vue.d.ts +16 -16
  363. package/es/layout/sider.vue_vue_type_script_lang.js +1 -1
  364. package/es/layout/style/index.css +12 -12
  365. package/es/link/index.d.ts +3 -3
  366. package/es/link/link.vue.d.ts +1 -1
  367. package/es/link/link.vue_vue_type_script_setup_true_lang.js +2 -2
  368. package/es/link/style/index.css +23 -23
  369. package/es/list/index.d.ts +9 -9
  370. package/es/list/list-item-meta.js +1 -1
  371. package/es/list/list.d.ts +3 -3
  372. package/es/list/list.js +4 -4
  373. package/es/list/style/index.css +9 -9
  374. package/es/locale/interface.d.ts +6 -0
  375. package/es/locale/lang/ar-eg.js +7 -1
  376. package/es/locale/lang/de-de.js +7 -1
  377. package/es/locale/lang/en-us.js +7 -1
  378. package/es/locale/lang/es-es.js +7 -1
  379. package/es/locale/lang/fr-fr.js +7 -1
  380. package/es/locale/lang/id-id.js +7 -1
  381. package/es/locale/lang/it-it.js +7 -1
  382. package/es/locale/lang/ja-jp.js +7 -1
  383. package/es/locale/lang/km-kh.js +7 -1
  384. package/es/locale/lang/ko-kr.js +7 -1
  385. package/es/locale/lang/ms-my.js +7 -1
  386. package/es/locale/lang/nl-nl.js +7 -1
  387. package/es/locale/lang/pt-pt.js +7 -1
  388. package/es/locale/lang/ru-ru.js +7 -1
  389. package/es/locale/lang/th-th.js +7 -1
  390. package/es/locale/lang/vi-vn.js +7 -1
  391. package/es/locale/lang/zh-cn.js +7 -1
  392. package/es/locale/lang/zh-tw.js +7 -1
  393. package/es/mention/index.d.ts +9 -9
  394. package/es/mention/mention.d.ts +3 -3
  395. package/es/mention/mention.js +24 -10
  396. package/es/menu/base-menu.js +1 -1
  397. package/es/menu/indent.js +1 -1
  398. package/es/menu/item-group.js +1 -1
  399. package/es/menu/item-group.vue.d.ts +48 -48
  400. package/es/menu/item.js +1 -1
  401. package/es/menu/menu.js +1 -1
  402. package/es/menu/style/index.css +62 -62
  403. package/es/menu/sub-menu-inline.js +1 -1
  404. package/es/menu/sub-menu-inline.vue.d.ts +48 -48
  405. package/es/menu/sub-menu-pop.js +1 -1
  406. package/es/menu/sub-menu-pop.vue.d.ts +57 -57
  407. package/es/menu/sub-menu.js +1 -1
  408. package/es/message/index.js +1 -1
  409. package/es/message/message-list.d.ts +1 -1
  410. package/es/message/message.js +1 -1
  411. package/es/message/message.vue.d.ts +1 -1
  412. package/es/message/style/index.css +26 -26
  413. package/es/modal/index.d.ts +6368 -570
  414. package/es/modal/index.js +2 -2
  415. package/es/modal/modal.js +15 -4
  416. package/es/modal/modal.vue.d.ts +2907 -8
  417. package/es/modal/modal.vue_vue_type_script_lang.js +28 -5
  418. package/es/modal/style/index.css +28 -12
  419. package/es/modal/style/index.scss +23 -0
  420. package/es/notification/index.js +1 -1
  421. package/es/notification/notification.js +1 -1
  422. package/es/notification/notification.vue.d.ts +1 -1
  423. package/es/notification/style/index.css +26 -26
  424. package/es/page-header/index.d.ts +2 -2
  425. package/es/page-header/page-header.js +1 -1
  426. package/es/page-header/page-header.vue.d.ts +1 -1
  427. package/es/page-header/style/index.css +6 -6
  428. package/es/pagination/page-item-ellipsis.js +1 -1
  429. package/es/pagination/page-item-step.js +1 -1
  430. package/es/pagination/page-item.js +1 -1
  431. package/es/pagination/page-jumper.js +1 -1
  432. package/es/pagination/page-jumper.vue.d.ts +6 -6
  433. package/es/pagination/page-options.js +1 -1
  434. package/es/pagination/page-options.vue.d.ts +647 -469
  435. package/es/pagination/style/index.css +21 -21
  436. package/es/popconfirm/index.d.ts +33 -33
  437. package/es/popconfirm/popconfirm.js +1 -1
  438. package/es/popconfirm/popconfirm.vue.d.ts +16 -16
  439. package/es/popconfirm/popconfirm.vue_vue_type_script_lang.js +1 -1
  440. package/es/popconfirm/style/index.css +11 -11
  441. package/es/popover/index.d.ts +899 -21
  442. package/es/popover/popover.js +7 -3
  443. package/es/popover/popover.vue.d.ts +451 -10
  444. package/es/popover/popover.vue_vue_type_script_lang.js +15 -3
  445. package/es/popover/style/index.css +7 -7
  446. package/es/popover/style/index.d.ts +1 -0
  447. package/es/progress/circle.js +1 -1
  448. package/es/progress/circle.vue.d.ts +1 -1
  449. package/es/progress/index.d.ts +7 -7
  450. package/es/progress/line.js +1 -1
  451. package/es/progress/line.vue.d.ts +1 -1
  452. package/es/progress/line.vue_vue_type_script_lang.js +1 -1
  453. package/es/progress/progress.js +1 -1
  454. package/es/progress/progress.vue.d.ts +3 -3
  455. package/es/progress/steps.js +1 -1
  456. package/es/progress/style/index.css +32 -32
  457. package/es/qr-code/index.d.ts +294 -0
  458. package/es/qr-code/index.js +10 -0
  459. package/es/qr-code/qr-code-status.js +5 -0
  460. package/es/qr-code/qr-code-status.vue.d.ts +8 -0
  461. package/es/qr-code/qr-code-status.vue_vue_type_script_setup_true_lang.js +30 -0
  462. package/es/qr-code/qr-code.js +5 -0
  463. package/es/qr-code/qr-code.vue.d.ts +167 -0
  464. package/es/qr-code/qr-code.vue_vue_type_script_setup_true_lang.js +313 -0
  465. package/es/qr-code/style/css.js +2 -0
  466. package/es/qr-code/style/index.css +106 -0
  467. package/es/qr-code/style/index.d.ts +2 -0
  468. package/es/qr-code/style/index.js +2 -0
  469. package/es/qr-code/style/index.scss +111 -0
  470. package/es/qr-code/style/token.scss +36 -0
  471. package/es/qr-code/types.d.ts +19 -0
  472. package/es/radio/index.d.ts +5 -5
  473. package/es/radio/radio.d.ts +2 -2
  474. package/es/radio/style/index.css +33 -33
  475. package/es/rate/index.d.ts +3 -3
  476. package/es/rate/rate.d.ts +1 -1
  477. package/es/rate/style/index.css +3 -3
  478. package/es/resize-box/index.d.ts +6 -6
  479. package/es/resize-box/resize-box.js +1 -1
  480. package/es/resize-box/resize-box.vue.d.ts +2 -2
  481. package/es/resize-box/resize-box.vue_vue_type_script_lang.js +1 -1
  482. package/es/resize-box/style/index.css +2 -2
  483. package/es/result/result.js +1 -1
  484. package/es/result/style/index.css +2 -2
  485. package/es/scrollbar/index.d.ts +6 -3
  486. package/es/scrollbar/scrollbar.js +2 -1
  487. package/es/scrollbar/scrollbar.vue.d.ts +2 -1
  488. package/es/scrollbar/scrollbar.vue_vue_type_script_lang.js +52 -2
  489. package/es/scrollbar/style/index.css +13 -13
  490. package/es/sd-vue.js +13 -12
  491. package/es/secret/secret.vue_vue_type_script_setup_true_lang.js +3 -3
  492. package/es/secret/style/index.css +4 -4
  493. package/es/select/context.d.ts +1 -4
  494. package/es/select/hooks/use-options.d.ts +1 -4
  495. package/es/select/hooks/use-options.js +2 -23
  496. package/es/select/hooks/use-select.d.ts +1 -3
  497. package/es/select/hooks/use-select.js +2 -7
  498. package/es/select/index.d.ts +647 -474
  499. package/es/select/index.js +5 -13
  500. package/es/select/interface.d.ts +1 -1
  501. package/es/select/select-dropdown.js +3 -2
  502. package/es/select/select-dropdown.vue.d.ts +56 -54
  503. package/es/select/select-dropdown.vue_vue_type_script_lang.js +2 -3
  504. package/es/select/select.d.ts +260 -18
  505. package/es/select/select.js +44 -23
  506. package/es/select/style/index.css +14 -14
  507. package/es/select/utils.d.ts +1 -1
  508. package/es/select/utils.js +1 -1
  509. package/es/skeleton/line.js +1 -1
  510. package/es/skeleton/shape.js +1 -1
  511. package/es/skeleton/skeleton.js +1 -1
  512. package/es/skeleton/style/index.css +4 -4
  513. package/es/slider/index.d.ts +67 -67
  514. package/es/slider/slider-button.js +1 -1
  515. package/es/slider/slider-button.vue.d.ts +25 -25
  516. package/es/slider/slider-dots.js +1 -1
  517. package/es/slider/slider-input.js +1 -1
  518. package/es/slider/slider-input.vue.d.ts +7 -7
  519. package/es/slider/slider-marks.js +1 -1
  520. package/es/slider/slider-ticks.js +1 -1
  521. package/es/slider/slider.js +1 -1
  522. package/es/slider/slider.vue.d.ts +33 -33
  523. package/es/slider/style/index.css +18 -18
  524. package/es/space/index.d.ts +9 -9
  525. package/es/space/space.d.ts +2 -2
  526. package/es/spin/index.d.ts +1 -0
  527. package/es/spin/style/index.css +9 -9
  528. package/es/split/split.js +1 -1
  529. package/es/split/split.vue_vue_type_script_lang.js +1 -1
  530. package/es/split/style/index.css +2 -2
  531. package/es/statistic/countdown.js +1 -1
  532. package/es/statistic/countdown.vue.d.ts +1 -1
  533. package/es/statistic/countdown.vue_vue_type_script_lang.js +5 -5
  534. package/es/statistic/index.d.ts +1 -1
  535. package/es/statistic/statistic.js +1 -1
  536. package/es/statistic/statistic.vue_vue_type_script_lang.js +2 -2
  537. package/es/statistic/style/index.css +4 -4
  538. package/es/steps/index.d.ts +4 -4
  539. package/es/steps/step.js +1 -1
  540. package/es/steps/step.vue.d.ts +1 -1
  541. package/es/steps/steps.js +1 -1
  542. package/es/steps/steps.vue.d.ts +1 -1
  543. package/es/steps/style/index.css +79 -79
  544. package/es/style/color/colors.scss +1 -1
  545. package/es/style/theme/global.scss +8 -8
  546. package/es/style/theme/index.scss +4 -12
  547. package/es/style/theme/z-index.js +1 -2
  548. package/es/switch/style/index.css +30 -30
  549. package/es/switch/switch.js +1 -1
  550. package/es/switch/switch.vue_vue_type_script_lang.js +1 -1
  551. package/es/table/index.d.ts +14 -14
  552. package/es/table/style/index.css +65 -65
  553. package/es/table/table-operation-td.d.ts +7 -7
  554. package/es/table/table-operation-td.js +1 -1
  555. package/es/table/table-operation-th.js +1 -1
  556. package/es/table/table-td.d.ts +1 -1
  557. package/es/table/table-td.js +1 -1
  558. package/es/table/table-th.d.ts +1 -1
  559. package/es/table/table-th.js +2 -2
  560. package/es/table/table.d.ts +5 -5
  561. package/es/table/table.js +12 -14
  562. package/es/table/utils.js +1 -1
  563. package/es/tabs/index.d.ts +9 -9
  564. package/es/tabs/style/index.css +56 -56
  565. package/es/tabs/tab-pane.js +1 -1
  566. package/es/tabs/tab-pane.vue_vue_type_script_lang.js +1 -1
  567. package/es/tabs/tabs-nav-ink.js +1 -1
  568. package/es/tabs/tabs-nav.d.ts +1 -1
  569. package/es/tabs/tabs-tab.js +1 -1
  570. package/es/tabs/tabs-tab.vue.d.ts +1 -1
  571. package/es/tabs/tabs.d.ts +3 -3
  572. package/es/tag/index.d.ts +66 -29688
  573. package/es/tag/interface.d.ts +2 -0
  574. package/es/tag/style/index.css +134 -134
  575. package/es/tag/style/index.scss +33 -13
  576. package/es/tag/tag.js +2 -64
  577. package/es/tag/tag.vue.d.ts +53 -11936
  578. package/es/tag/tag.vue_vue_type_script_setup_true_lang.js +368 -0
  579. package/es/tag-group/tag-group.vue_vue_type_script_setup_true_lang.js +4 -4
  580. package/es/textarea/index.d.ts +8 -8
  581. package/es/textarea/style/index.css +28 -28
  582. package/es/textarea/textarea.js +1 -1
  583. package/es/textarea/textarea.vue.d.ts +3 -3
  584. package/es/textarea/textarea.vue_vue_type_script_lang.js +1 -1
  585. package/es/time-picker/hooks/use-time-list.js +1 -1
  586. package/es/time-picker/index.d.ts +56 -56
  587. package/es/time-picker/panel.js +1 -1
  588. package/es/time-picker/panel.vue.d.ts +6 -6
  589. package/es/time-picker/range-panel.d.ts +6 -6
  590. package/es/time-picker/range-panel.js +1 -1
  591. package/es/time-picker/style/index.css +11 -11
  592. package/es/time-picker/time-column.js +1 -1
  593. package/es/time-picker/time-picker.js +2 -2
  594. package/es/time-picker/time-picker.vue.d.ts +27 -27
  595. package/es/timeline/item.js +1 -1
  596. package/es/timeline/item.vue_vue_type_script_lang.js +1 -1
  597. package/es/timeline/style/index.css +11 -11
  598. package/es/tooltip/index.d.ts +24 -24
  599. package/es/tooltip/style/index.css +3 -3
  600. package/es/tooltip/tooltip.js +1 -1
  601. package/es/tooltip/tooltip.vue.d.ts +11 -11
  602. package/es/tooltip/tooltip.vue_vue_type_script_lang.js +1 -1
  603. package/es/tour/index.d.ts +664 -0
  604. package/es/tour/index.js +10 -0
  605. package/es/tour/style/css.js +1 -0
  606. package/es/tour/style/index.css +226 -0
  607. package/es/tour/style/index.d.ts +1 -0
  608. package/es/tour/style/index.js +1 -0
  609. package/es/tour/style/index.scss +218 -0
  610. package/es/tour/style/token.scss +27 -0
  611. package/es/tour/tour.js +5 -0
  612. package/es/tour/tour.vue.d.ts +411 -0
  613. package/es/tour/tour.vue_vue_type_script_setup_true_lang.js +1219 -0
  614. package/es/tour/types.d.ts +143 -0
  615. package/es/transfer/index.d.ts +51 -45
  616. package/es/transfer/style/index.css +20 -20
  617. package/es/transfer/transfer-view.js +2 -3
  618. package/es/transfer/transfer-view.vue.d.ts +18 -15
  619. package/es/transfer/transfer-view.vue_vue_type_script_lang.js +1 -1
  620. package/es/transfer/transfer.js +1 -1
  621. package/es/transfer/transfer.vue.d.ts +25 -22
  622. package/es/tree/base-node.js +1 -1
  623. package/es/tree/base-node.vue.d.ts +2 -2
  624. package/es/tree/expand-transition.js +1 -1
  625. package/es/tree/node.js +1 -1
  626. package/es/tree/style/index.css +25 -25
  627. package/es/tree/transition-node-list.js +1 -1
  628. package/es/tree/transition-node-list.vue.d.ts +2 -2
  629. package/es/tree/tree.js +1 -1
  630. package/es/tree/tree.vue.d.ts +12 -9
  631. package/es/tree/tree.vue_vue_type_script_lang.js +2 -2
  632. package/es/tree/utils/tree-data.js +1 -1
  633. package/es/tree-select/hooks/use-selected-state.js +1 -1
  634. package/es/tree-select/panel.js +4 -7
  635. package/es/tree-select/style/index.css +5 -5
  636. package/es/tree-select/tree-select.js +2 -2
  637. package/es/tree-select/tree-select.vue.d.ts +21 -21
  638. package/es/tree-select/tree-select.vue_vue_type_script_lang.js +1 -1
  639. package/es/trigger/index.d.ts +9 -9
  640. package/es/trigger/style/index.css +5 -5
  641. package/es/trigger/trigger.d.ts +3 -3
  642. package/es/trigger/trigger.js +1 -1
  643. package/es/trigger/utils.js +1 -1
  644. package/es/typography/base.d.ts +4 -4
  645. package/es/typography/base.js +1 -1
  646. package/es/typography/edit-content.js +1 -1
  647. package/es/typography/edit-content.vue.d.ts +28 -28
  648. package/es/typography/operations.js +1 -1
  649. package/es/typography/operations.vue.d.ts +24 -24
  650. package/es/typography/style/index.css +22 -22
  651. package/es/typography/typography.js +1 -1
  652. package/es/upload/index.d.ts +6 -6
  653. package/es/upload/style/index.css +51 -51
  654. package/es/upload/upload-button.d.ts +1 -1
  655. package/es/upload/upload.d.ts +2 -2
  656. package/es/upload/upload.js +2 -2
  657. package/es/verification-code/index.d.ts +3 -3
  658. package/es/verification-code/verification-code.d.ts +1 -1
  659. package/es/watermark/hooks/use-mutation-observer.js +1 -1
  660. package/es/watermark/watermark.js +1 -1
  661. package/json/vetur-attributes.json +125 -107
  662. package/json/vetur-tags.json +39 -36
  663. package/json/web-types.json +181 -162
  664. package/package.json +19 -15
  665. package/es/calendar/calendar.d.ts +0 -104
  666. package/es/calendar/calendar.js +0 -207
  667. package/es/calendar/header.d.ts +0 -104
  668. package/es/calendar/header.js +0 -131
  669. package/es/calendar/hooks/useCellClassName.d.ts +0 -19
  670. package/es/calendar/hooks/useCellClassName.js +0 -43
  671. package/es/calendar/month.d.ts +0 -83
  672. package/es/calendar/month.js +0 -149
  673. package/es/calendar/week.d.ts +0 -61
  674. package/es/calendar/week.js +0 -45
  675. package/es/calendar/year.d.ts +0 -69
  676. package/es/calendar/year.js +0 -101
  677. package/es/select/optgroup.js +0 -10
  678. package/es/select/optgroup.vue.d.ts +0 -13
  679. package/es/select/optgroup.vue_vue_type_script_lang.js +0 -23
  680. package/es/select/option.js +0 -51
  681. package/es/select/option.vue.d.ts +0 -299
  682. package/es/select/option.vue_vue_type_script_lang.js +0 -149
  683. package/es/tag/tag.vue_vue_type_script_lang.js +0 -264
package/es/calendar/style/index.css CHANGED
@@ -15,375 +15,1625 @@
15
15
  /******** link *******/
16
16
  /******** radius *******/
17
17
  /********* icon hover *********/
18
+ .sd-calendar--default-theme,
19
+ [class$=-calendar--default-theme] {
20
+ --sd-calendar-primary-color: rgb(var(--sd-primary-6));
21
+ --sd-calendar-primary-sub-color: rgb(var(--sd-primary-5));
22
+ --sd-calendar-primary-extra-color: rgb(var(--sd-primary-4));
23
+ --sd-calendar-secondary-color: var(--sd-color-bg-2);
24
+ --sd-calendar-base-color: var(--sd-color-text-1);
25
+ --sd-calendar-contrast-color: var(--sd-color-white);
26
+ --sd-calendar-border-color: var(--sd-color-neutral-3);
27
+ --sd-calendar-header-color: var(--sd-color-white);
28
+ --sd-calendar-event-color: var(--sd-color-white);
29
+ --sd-calendar-event-border-color: color-mix(in srgb, var(--sd-calendar-base-color) 12%, transparent);
30
+ --sd-calendar-border-radius: var(--sd-border-radius-medium);
31
+ --sd-calendar-height: 500px;
32
+ --sd-calendar-min-cell-size: 1rem;
33
+ }
34
+ .sd-calendar--default-theme.sd-calendar--dark, .sd-calendar--default-theme[class*=-calendar--dark], [sd-theme=dark] .sd-calendar--default-theme,
35
+ [class$=-calendar--default-theme].sd-calendar--dark,
36
+ [class$=-calendar--default-theme][class*=-calendar--dark],
37
+ [sd-theme=dark] [class$=-calendar--default-theme] {
38
+ --sd-calendar-primary-color: color-mix(in srgb, rgb(var(--sd-primary-6)) 78%, #0f172a);
39
+ --sd-calendar-secondary-color: var(--sd-color-fill-2);
40
+ --sd-calendar-base-color: var(--sd-color-white);
41
+ --sd-calendar-contrast-color: var(--sd-color-text-1);
42
+ --sd-calendar-border-color: color-mix(in srgb, var(--sd-calendar-base-color) 16%, transparent);
43
+ --sd-calendar-header-color: var(--sd-calendar-base-color);
44
+ --sd-calendar-event-color: var(--sd-calendar-base-color);
45
+ --sd-calendar-event-border-color: color-mix(in srgb, var(--sd-calendar-base-color) 40%, transparent);
46
+ }
47
+
18
48
  .sd-calendar {
49
+ --sd-calendar-grid-columns: 7;
50
+ --sd-calendar-grid-rows: 6;
51
+ --sd-calendar-weekday-bar-size: 1.7rem;
52
+ --sd-calendar-schedules-bar-size: 1.7rem;
53
+ --sd-calendar-all-day-bar-size: 2rem;
54
+ --sd-calendar-time-cell-size: 50px;
55
+ --sd-calendar-min-cell-size: 0;
56
+ --sd-calendar-min-schedule-size: 0;
57
+ --sd-calendar-transition-duration: 0.25s;
58
+ z-index: 0;
59
+ display: flex;
60
+ flex-direction: column;
61
+ user-select: none;
62
+ }
63
+ .sd-calendar--date-picker {
64
+ --sd-calendar-weekday-bar-size: 1.3rem;
65
+ }
66
+ .sd-calendar--timeless {
67
+ --sd-calendar-all-day-bar-size: 0;
68
+ }
69
+ .sd-calendar,
70
+ .sd-calendar *,
71
+ .sd-calendar ::before,
72
+ .sd-calendar ::after {
19
73
  box-sizing: border-box;
20
- border: 1px solid var(--color-neutral-3);
21
74
  }
22
- .sd-calendar-header {
75
+ .sd-calendar .grow {
76
+ flex-grow: 1;
77
+ }
78
+ .sd-calendar__body-wrap {
79
+ display: flex;
80
+ flex-direction: column;
81
+ flex-grow: 1;
82
+ width: max(var(--sd-calendar-grid-columns) * var(--sd-calendar-min-cell-size, 0px), var(--sd-calendar-grid-columns) * var(--sd-calendar-schedules-count, 0) * var(--sd-calendar-min-schedule-size, 0px), 100%);
83
+ min-width: 0;
84
+ }
85
+ .sd-calendar__scrollable--horizontal .sd-calendar__body-wrap {
86
+ flex-direction: row;
87
+ width: auto;
88
+ height: max(var(--sd-calendar-grid-rows) * var(--sd-calendar-min-cell-size, 0px), var(--sd-calendar-grid-rows) * var(--sd-calendar-schedules-count, 0) * var(--sd-calendar-min-schedule-size, 0px), 100%);
89
+ }
90
+ .sd-calendar__scrollable-wrap {
91
+ position: relative;
23
92
  display: flex;
24
- padding: 24px 24px;
93
+ flex: 1;
94
+ min-height: 1px;
25
95
  }
26
- .sd-calendar-header-left {
96
+ .sd-calendar__scrollable {
27
97
  position: relative;
28
98
  display: flex;
29
99
  flex: 1;
100
+ flex-direction: column;
101
+ }
102
+ .sd-calendar__scrollable--row {
103
+ flex-direction: row;
104
+ }
105
+ .sd-calendar__scrollable--has-week-numbers {
106
+ flex-direction: row;
107
+ }
108
+ .sd-calendar__week-numbers {
109
+ display: flex;
110
+ flex-direction: column;
111
+ padding-top: calc(var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size) + var(--sd-calendar-all-day-bar-size));
112
+ }
113
+ .sd-calendar__week-number {
114
+ display: flex;
115
+ flex-grow: 1;
30
116
  align-items: center;
31
- height: 28px;
32
- line-height: 28px;
117
+ justify-content: center;
118
+ width: 1.4em;
33
119
  }
34
- .sd-calendar-header-right {
120
+ .sd-calendar__schedules-headings {
121
+ display: flex;
122
+ flex-grow: 1;
123
+ }
124
+ .sd-calendar__schedule {
35
125
  position: relative;
36
- height: 28px;
37
- }
38
- .sd-calendar-header-value {
39
- color: var(--color-text-1);
40
- font-weight: 500;
41
- font-size: 20px;
42
- }
43
- .sd-calendar-header-icon {
44
- width: 28px;
45
- height: 28px;
46
- margin-right: 12px;
47
- color: var(--color-text-2);
48
- font-size: 12px;
49
- line-height: 28px;
50
- text-align: center;
51
- background-color: var(--color-bg-5);
52
- border-radius: 50%;
53
- transition: all 0.1s cubic-bezier(0, 0, 1, 1);
54
- user-select: none;
126
+ display: flex;
127
+ flex-basis: 0;
128
+ flex-grow: 1;
129
+ justify-content: center;
130
+ overflow: hidden;
55
131
  }
56
- .sd-calendar-header-icon:not(:first-child) {
57
- margin: 0 12px;
132
+ .sd-calendar__scrollable--day-view .sd-calendar__schedule, .sd-calendar__scrollable--days-view .sd-calendar__schedule, .sd-calendar__scrollable--week-view .sd-calendar__schedule {
133
+ min-width: var(--sd-calendar-min-schedule-size, 0);
58
134
  }
59
- .sd-calendar-header-icon:focus-visible {
60
- box-shadow: 0 0 0 2px var(--color-primary-light-3);
135
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view [data-overlayscrollbars-viewport], .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view [data-overlayscrollbars-viewport], .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view [data-overlayscrollbars-viewport] {
136
+ display: grid;
137
+ grid-template-rows: 0fr 1fr;
138
+ grid-template-columns: auto;
61
139
  }
62
- .sd-calendar-header-icon:not(.sd-calendar-header-icon-hidden) {
63
- cursor: pointer;
140
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__schedules-headings, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__schedules-headings, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__schedules-headings {
141
+ flex-direction: column;
142
+ width: var(--sd-calendar-schedules-bar-size);
64
143
  }
65
- .sd-calendar-header-icon:not(.sd-calendar-header-icon-hidden):hover {
66
- background-color: var(--color-fill-3);
144
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__schedule, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__schedule, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__schedule {
145
+ min-width: 0;
146
+ min-height: var(--sd-calendar-min-schedule-size, 0);
67
147
  }
68
- .sd-calendar .sd-calendar-header-value-year {
69
- width: 100px;
70
- margin-right: 8px;
148
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__time-column, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__time-column, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__time-column {
149
+ flex-direction: row;
150
+ align-self: flex-start;
151
+ padding-top: 0;
152
+ padding-left: calc(var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size) + var(--sd-calendar-all-day-bar-size));
71
153
  }
72
- .sd-calendar .sd-calendar-header-value-month {
73
- width: 76px;
74
- margin-right: 32px;
154
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__time-column-inner, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__time-column-inner, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__time-column-inner {
155
+ flex-direction: row;
75
156
  }
76
- .sd-calendar-month {
77
- width: 100%;
157
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__time-column-inner .sd-calendar__time-cell:first-child, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__time-column-inner .sd-calendar__time-cell:first-child, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__time-column-inner .sd-calendar__time-cell:first-child {
158
+ margin-inline-start: 1.5em;
159
+ margin-block-start: 0;
78
160
  }
79
- .sd-calendar-month-row {
80
- display: flex;
81
- height: 100px;
161
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__all-day-label, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__all-day-label, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__all-day-label {
162
+ width: calc(var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size) + var(--sd-calendar-all-day-bar-size));
163
+ height: 100%;
164
+ margin-top: 0;
165
+ margin-left: calc((var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size) + var(--sd-calendar-all-day-bar-size)) * -1);
166
+ padding-top: 0;
167
+ padding-left: calc(var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size));
82
168
  }
83
- .sd-calendar-month-row .sd-calendar-cell {
169
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__time-cell, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__time-cell, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__time-cell {
170
+ align-items: center;
171
+ width: var(--sd-calendar-time-cell-size);
172
+ height: 100%;
173
+ }
174
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__body, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__body, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__body {
175
+ --sd-calendar-grid-columns: 1;
176
+ --sd-calendar-grid-rows: 7;
177
+ display: grid;
84
178
  flex: 1;
179
+ grid-template-rows: repeat(var(--sd-calendar-grid-rows), 1fr);
180
+ grid-template-columns: repeat(var(--sd-calendar-grid-columns), 1fr);
181
+ width: 100%;
182
+ height: auto;
183
+ }
184
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__weekdays-headings, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__weekdays-headings, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__weekdays-headings {
185
+ flex-direction: column;
186
+ flex-shrink: 0;
187
+ width: var(--sd-calendar-weekday-bar-size);
188
+ }
189
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__all-day, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__all-day, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__all-day {
190
+ flex-direction: column;
191
+ width: var(--sd-calendar-all-day-bar-size);
192
+ height: 100%;
193
+ }
194
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__now-line, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__now-line, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__now-line {
195
+ top: 0;
196
+ left: auto;
197
+ width: 0;
198
+ height: 100%;
199
+ border-top: none;
200
+ border-left: 1px solid;
201
+ }
202
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__cell--has-schedules, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__cell--has-schedules, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__cell--has-schedules {
203
+ flex-direction: column;
204
+ }
205
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__schedule--cell, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__schedule--cell, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__schedule--cell {
206
+ flex-direction: row;
207
+ height: 100%;
208
+ }
209
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__event, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__event, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__event {
210
+ inset: 0 auto;
211
+ width: auto;
212
+ }
213
+
214
+ .sd-calendar-slide-fade--left-enter-active,
215
+ [class*=-calendar-slide-fade--left-enter-active],
216
+ .sd-calendar-slide-fade--left-leave-active,
217
+ [class*=-calendar-slide-fade--left-leave-active],
218
+ .sd-calendar-slide-fade--right-enter-active,
219
+ [class*=-calendar-slide-fade--right-enter-active],
220
+ .sd-calendar-slide-fade--right-leave-active,
221
+ [class*=-calendar-slide-fade--right-leave-active] {
222
+ transition: var(--sd-calendar-transition-duration) ease-in-out;
223
+ }
224
+
225
+ .sd-calendar-slide-fade--left-enter-from,
226
+ .sd-calendar-slide-fade--right-leave-to,
227
+ [class*=-calendar-slide-fade--left-enter-from],
228
+ [class*=-calendar-slide-fade--right-leave-to] {
229
+ transform: translateX(-12px);
230
+ opacity: 0;
231
+ }
232
+
233
+ .sd-calendar-slide-fade--left-leave-to,
234
+ .sd-calendar-slide-fade--right-enter-from,
235
+ [class*=-calendar-slide-fade--left-leave-to],
236
+ [class*=-calendar-slide-fade--right-enter-from] {
237
+ transform: translateX(12px);
238
+ opacity: 0;
239
+ }
240
+
241
+ .sd-calendar-slide-fade--left-enter-active,
242
+ .sd-calendar-slide-fade--right-enter-active,
243
+ .sd-calendar-slide-fade--left-leave-active ~ .sd-calendar-slide-fade--left-leave-active,
244
+ .sd-calendar-slide-fade--right-leave-active ~ .sd-calendar-slide-fade--right-leave-active,
245
+ [class*=-calendar-slide-fade--left-enter-active],
246
+ [class*=-calendar-slide-fade--right-enter-active],
247
+ [class*=-calendar-slide-fade--left-leave-active] ~ [class*=-calendar-slide-fade--left-leave-active],
248
+ [class*=-calendar-slide-fade--right-leave-active] ~ [class*=-calendar-slide-fade--right-leave-active] {
249
+ position: absolute !important;
250
+ inset: 0;
251
+ }
252
+
253
+ .sd-calendar-event-delete-leave-active,
254
+ [class*=-calendar-event-delete-leave-active] {
255
+ transition: 0.15s ease-out;
256
+ }
257
+
258
+ .sd-calendar-event-delete-leave-to,
259
+ [class*=-calendar-event-delete-leave-to] {
260
+ transform: translateY(0.5rem);
261
+ opacity: 0;
262
+ }
263
+
264
+ .sd-calendar-shrink-enter-active,
265
+ .sd-calendar-shrink-leave-active,
266
+ [class*=-calendar-shrink-enter-active],
267
+ [class*=-calendar-shrink-leave-active] {
268
+ transition: transform 0.2s, opacity 0.2s;
269
+ }
270
+
271
+ .sd-calendar-shrink-enter-from,
272
+ .sd-calendar-shrink-leave-to,
273
+ [class*=-calendar-shrink-enter-from],
274
+ [class*=-calendar-shrink-leave-to] {
275
+ opacity: 0;
276
+ }
277
+
278
+ .sd-calendar--default-theme,
279
+ [class$=-calendar--default-theme] {
280
+ position: relative;
281
+ height: var(--sd-calendar-height);
282
+ color: var(--sd-calendar-base-color);
283
+ border-radius: var(--sd-calendar-border-radius);
284
+ }
285
+ .sd-calendar--default-theme.sd-calendar--dragging-event, .sd-calendar--default-theme[class*=-calendar--dragging-event],
286
+ [class$=-calendar--default-theme].sd-calendar--dragging-event,
287
+ [class$=-calendar--default-theme][class*=-calendar--dragging-event] {
288
+ cursor: grabbing;
289
+ }
290
+ .sd-calendar--default-theme.sd-calendar--resizing-event, .sd-calendar--default-theme[class*=-calendar--resizing-event],
291
+ [class$=-calendar--default-theme].sd-calendar--resizing-event,
292
+ [class$=-calendar--default-theme][class*=-calendar--resizing-event] {
293
+ cursor: ns-resize;
294
+ }
295
+ .sd-calendar--default-theme.sd-calendar--horizontal.sd-calendar--resizing-event, .sd-calendar--default-theme[class*=-calendar--horizontal][class*=-calendar--resizing-event],
296
+ [class$=-calendar--default-theme].sd-calendar--horizontal.sd-calendar--resizing-event,
297
+ [class$=-calendar--default-theme][class*=-calendar--horizontal][class*=-calendar--resizing-event] {
298
+ cursor: ew-resize;
299
+ }
300
+ .sd-calendar--default-theme .sd-calendar__header,
301
+ [class$=-calendar--default-theme] .sd-calendar__header {
302
+ color: var(--sd-calendar-header-color);
303
+ border-top-left-radius: var(--sd-calendar-border-radius);
304
+ border-top-right-radius: var(--sd-calendar-border-radius);
305
+ }
306
+ .sd-calendar--default-theme .sd-calendar__views-bar,
307
+ [class$=-calendar--default-theme] .sd-calendar__views-bar {
308
+ background-color: var(--sd-calendar-primary-color);
309
+ }
310
+ .sd-calendar--default-theme .sd-calendar__views-bar,
311
+ .sd-calendar--default-theme .sd-calendar__title-bar,
312
+ [class$=-calendar--default-theme] .sd-calendar__views-bar,
313
+ [class$=-calendar--default-theme] .sd-calendar__title-bar {
314
+ padding-top: 4px;
315
+ padding-bottom: 4px;
316
+ }
317
+ .sd-calendar--default-theme .sd-calendar__title-bar,
318
+ [class$=-calendar--default-theme] .sd-calendar__title-bar {
319
+ position: relative;
320
+ padding-right: 0.6em;
321
+ padding-left: 0.6em;
322
+ background-color: var(--sd-calendar-primary-sub-color);
323
+ }
324
+ .sd-calendar--default-theme .sd-calendar__view-button,
325
+ .sd-calendar--default-theme .sd-calendar__nav,
326
+ .sd-calendar--default-theme button.sd-calendar__title,
327
+ [class$=-calendar--default-theme] .sd-calendar__view-button,
328
+ [class$=-calendar--default-theme] .sd-calendar__nav,
329
+ [class$=-calendar--default-theme] button.sd-calendar__title {
330
+ color: inherit;
331
+ background: none;
332
+ border: none;
333
+ }
334
+ .sd-calendar--default-theme .sd-calendar__view-button:not([disabled]),
335
+ .sd-calendar--default-theme .sd-calendar__nav:not([disabled]),
336
+ .sd-calendar--default-theme button.sd-calendar__title:not([disabled]),
337
+ [class$=-calendar--default-theme] .sd-calendar__view-button:not([disabled]),
338
+ [class$=-calendar--default-theme] .sd-calendar__nav:not([disabled]),
339
+ [class$=-calendar--default-theme] button.sd-calendar__title:not([disabled]) {
340
+ cursor: pointer;
341
+ }
342
+ .sd-calendar--default-theme .sd-calendar__view-button,
343
+ .sd-calendar--default-theme .sd-calendar__nav,
344
+ .sd-calendar--default-theme button.sd-calendar__title,
345
+ .sd-calendar--default-theme .sd-calendar__nav--today,
346
+ [class$=-calendar--default-theme] .sd-calendar__view-button,
347
+ [class$=-calendar--default-theme] .sd-calendar__nav,
348
+ [class$=-calendar--default-theme] button.sd-calendar__title,
349
+ [class$=-calendar--default-theme] .sd-calendar__nav--today {
350
+ align-self: center;
351
+ padding: 2px 12px;
352
+ border: 1px solid transparent;
353
+ border-radius: 4px;
354
+ transition: 0.3s;
355
+ }
356
+ .sd-calendar--default-theme .sd-calendar__view-button:hover,
357
+ .sd-calendar--default-theme .sd-calendar__nav:hover,
358
+ .sd-calendar--default-theme button.sd-calendar__title:hover,
359
+ .sd-calendar--default-theme .sd-calendar__nav--today:hover,
360
+ [class$=-calendar--default-theme] .sd-calendar__view-button:hover,
361
+ [class$=-calendar--default-theme] .sd-calendar__nav:hover,
362
+ [class$=-calendar--default-theme] button.sd-calendar__title:hover,
363
+ [class$=-calendar--default-theme] .sd-calendar__nav--today:hover {
364
+ background-color: color-mix(in srgb, var(--sd-calendar-contrast-color) 12%, transparent);
365
+ }
366
+ .sd-calendar--default-theme .sd-calendar__view-button--active, .sd-calendar--default-theme .sd-calendar__view-button--active:hover,
367
+ .sd-calendar--default-theme .sd-calendar__nav--active,
368
+ .sd-calendar--default-theme .sd-calendar__nav--active:hover,
369
+ .sd-calendar--default-theme button.sd-calendar__title--active,
370
+ .sd-calendar--default-theme button.sd-calendar__title--active:hover,
371
+ .sd-calendar--default-theme .sd-calendar__nav--today--active,
372
+ .sd-calendar--default-theme .sd-calendar__nav--today--active:hover,
373
+ [class$=-calendar--default-theme] .sd-calendar__view-button--active,
374
+ [class$=-calendar--default-theme] .sd-calendar__view-button--active:hover,
375
+ [class$=-calendar--default-theme] .sd-calendar__nav--active,
376
+ [class$=-calendar--default-theme] .sd-calendar__nav--active:hover,
377
+ [class$=-calendar--default-theme] button.sd-calendar__title--active,
378
+ [class$=-calendar--default-theme] button.sd-calendar__title--active:hover,
379
+ [class$=-calendar--default-theme] .sd-calendar__nav--today--active,
380
+ [class$=-calendar--default-theme] .sd-calendar__nav--today--active:hover {
381
+ background-color: color-mix(in srgb, var(--sd-calendar-contrast-color) 25%, transparent);
382
+ }
383
+ .sd-calendar--default-theme .sd-calendar__view-button:active,
384
+ .sd-calendar--default-theme .sd-calendar__nav:active,
385
+ .sd-calendar--default-theme button.sd-calendar__title:active,
386
+ .sd-calendar--default-theme .sd-calendar__nav--today:active,
387
+ [class$=-calendar--default-theme] .sd-calendar__view-button:active,
388
+ [class$=-calendar--default-theme] .sd-calendar__nav:active,
389
+ [class$=-calendar--default-theme] button.sd-calendar__title:active,
390
+ [class$=-calendar--default-theme] .sd-calendar__nav--today:active {
391
+ background-color: color-mix(in srgb, var(--sd-calendar-contrast-color) 25%, transparent);
392
+ }
393
+ .sd-calendar--default-theme .sd-calendar__view-button:focus-visible,
394
+ .sd-calendar--default-theme .sd-calendar__nav:focus-visible,
395
+ .sd-calendar--default-theme button.sd-calendar__title:focus-visible,
396
+ .sd-calendar--default-theme .sd-calendar__nav--today:focus-visible,
397
+ [class$=-calendar--default-theme] .sd-calendar__view-button:focus-visible,
398
+ [class$=-calendar--default-theme] .sd-calendar__nav:focus-visible,
399
+ [class$=-calendar--default-theme] button.sd-calendar__title:focus-visible,
400
+ [class$=-calendar--default-theme] .sd-calendar__nav--today:focus-visible {
401
+ border-color: color-mix(in srgb, var(--sd-calendar-contrast-color) 75%, transparent);
402
+ }
403
+ .sd-calendar--default-theme .sd-calendar__view-button,
404
+ [class$=-calendar--default-theme] .sd-calendar__view-button {
405
+ font-size: 0.9em;
406
+ text-transform: uppercase;
407
+ }
408
+ .sd-calendar--default-theme button.sd-calendar__title,
409
+ [class$=-calendar--default-theme] button.sd-calendar__title {
410
+ line-height: 0.9;
411
+ }
412
+ .sd-calendar--default-theme .sd-calendar__nav--prev,
413
+ .sd-calendar--default-theme .sd-calendar__nav--next,
414
+ [class$=-calendar--default-theme] .sd-calendar__nav--prev,
415
+ [class$=-calendar--default-theme] .sd-calendar__nav--next {
416
+ width: 2em;
417
+ aspect-ratio: 1;
418
+ border-radius: 99em;
419
+ }
420
+ .sd-calendar--default-theme .sd-calendar__nav--prev:dir(rtl),
421
+ .sd-calendar--default-theme .sd-calendar__nav--next:dir(rtl),
422
+ [class$=-calendar--default-theme] .sd-calendar__nav--prev:dir(rtl),
423
+ [class$=-calendar--default-theme] .sd-calendar__nav--next:dir(rtl) {
424
+ transform: rotate(180deg);
425
+ }
426
+ .sd-calendar--default-theme .sd-calendar__nav--today,
427
+ [class$=-calendar--default-theme] .sd-calendar__nav--today {
428
+ margin-right: 3px;
429
+ padding-right: 8px;
430
+ padding-left: 8px;
431
+ font-size: 0.85em;
432
+ }
433
+ .sd-calendar--default-theme .sd-calendar__scrollable-wrap,
434
+ [class$=-calendar--default-theme] .sd-calendar__scrollable-wrap {
435
+ overflow: hidden;
436
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 4%, transparent);
437
+ border: 1px solid var(--sd-calendar-border-color);
438
+ border-top: none;
439
+ border-bottom-right-radius: var(--sd-calendar-border-radius);
440
+ border-bottom-left-radius: var(--sd-calendar-border-radius);
441
+ }
442
+ .sd-calendar--default-theme .sd-calendar__scrollable-wrap:first-child,
443
+ [class$=-calendar--default-theme] .sd-calendar__scrollable-wrap:first-child {
444
+ border-top-left-radius: var(--sd-calendar-border-radius);
445
+ border-top-right-radius: var(--sd-calendar-border-radius);
446
+ }
447
+ .sd-calendar--default-theme .sd-calendar__scrollable [data-overlayscrollbars-viewport],
448
+ [class$=-calendar--default-theme] .sd-calendar__scrollable [data-overlayscrollbars-viewport] {
449
+ display: grid;
450
+ grid-template-columns: 1fr 0fr;
451
+ }
452
+ .sd-calendar--default-theme .sd-calendar__scrollable--no-schedules,
453
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--no-schedules {
454
+ --sd-calendar-schedules-bar-size: 0;
455
+ }
456
+ .sd-calendar--default-theme .sd-calendar__scrollable--day-view,
457
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--day-view {
458
+ --sd-calendar-weekday-bar-size: 0;
459
+ }
460
+ .sd-calendar--default-theme .sd-calendar__scrollable--month-view, .sd-calendar--default-theme .sd-calendar__scrollable--no-all-day-bar,
461
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--month-view,
462
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--no-all-day-bar {
463
+ --sd-calendar-all-day-bar-size: 0;
464
+ }
465
+ .sd-calendar--default-theme .sd-calendar__scrollable--row [data-overlayscrollbars-viewport],
466
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--row [data-overlayscrollbars-viewport] {
467
+ grid-template-columns: 0fr 1fr;
468
+ }
469
+ .sd-calendar--default-theme .sd-calendar__scrollable--year-view [data-overlayscrollbars-viewport], .sd-calendar--default-theme .sd-calendar__scrollable--years-view [data-overlayscrollbars-viewport],
470
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--year-view [data-overlayscrollbars-viewport],
471
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--years-view [data-overlayscrollbars-viewport] {
472
+ overflow: hidden;
473
+ }
474
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal [data-overlayscrollbars-viewport],
475
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal [data-overlayscrollbars-viewport] {
476
+ grid-template-rows: 1fr 0fr;
477
+ grid-template-columns: auto;
478
+ }
479
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--row [data-overlayscrollbars-viewport],
480
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--row [data-overlayscrollbars-viewport] {
481
+ grid-template-rows: 0fr 1fr;
482
+ grid-template-columns: auto;
483
+ }
484
+ .sd-calendar--default-theme .sd-calendar__scrollable--day-view .sd-calendar__body,
485
+ .sd-calendar--default-theme .sd-calendar__scrollable--days-view .sd-calendar__body,
486
+ .sd-calendar--default-theme .sd-calendar__scrollable--week-view .sd-calendar__body,
487
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--day-view .sd-calendar__body,
488
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--days-view .sd-calendar__body,
489
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--week-view .sd-calendar__body {
490
+ max-height: var(--sd-calendar-body-max-height, initial);
491
+ }
492
+ .sd-calendar--default-theme .sd-calendar__week-number small,
493
+ [class$=-calendar--default-theme] .sd-calendar__week-number small {
494
+ display: flex;
495
+ align-items: center;
496
+ justify-content: center;
497
+ width: 1.4em;
498
+ color: color-mix(in srgb, var(--sd-calendar-base-color) 70%, transparent);
499
+ font-size: 0.8em;
500
+ background-color: color-mix(in srgb, var(--sd-calendar-base-color) 8%, transparent);
501
+ border-radius: 4px;
502
+ aspect-ratio: 1;
503
+ }
504
+ .sd-calendar--default-theme .sd-calendar__weekday,
505
+ [class$=-calendar--default-theme] .sd-calendar__weekday {
506
+ display: flex;
507
+ gap: 4px;
508
+ justify-content: center;
509
+ padding: 2px 1px;
85
510
  overflow: hidden;
86
- border-bottom: 1px solid var(--color-neutral-3);
511
+ font-size: 0.95em;
512
+ letter-spacing: -0.03em;
513
+ text-overflow: ellipsis;
514
+ background-color: var(--sd-calendar-secondary-color);
515
+ }
516
+ .sd-calendar--default-theme .sd-calendar__weekday--today,
517
+ [class$=-calendar--default-theme] .sd-calendar__weekday--today {
518
+ font-weight: bold;
519
+ }
520
+ .sd-calendar--default-theme .sd-calendar__weekday-day,
521
+ [class$=-calendar--default-theme] .sd-calendar__weekday-day {
522
+ display: inline-block;
523
+ overflow: hidden;
524
+ text-overflow: ellipsis;
525
+ opacity: 0.8;
87
526
  }
88
- .sd-calendar-month-row:last-child .sd-calendar-cell {
89
- border-bottom: unset;
527
+ .sd-calendar--default-theme .sd-calendar__weekday-date,
528
+ [class$=-calendar--default-theme] .sd-calendar__weekday-date {
529
+ display: inline-flex;
530
+ flex-shrink: 0;
531
+ align-items: center;
532
+ justify-content: center;
533
+ width: 1.7em;
534
+ overflow: hidden;
535
+ font-size: 0.9em;
536
+ line-height: 1;
537
+ letter-spacing: -0.1em;
538
+ text-indent: -0.15em;
539
+ background: color-mix(in srgb, var(--sd-calendar-base-color) 15%, transparent);
540
+ border-radius: 99em;
541
+ aspect-ratio: 1;
542
+ }
543
+ .sd-calendar--default-theme .sd-calendar__weekday--today .sd-calendar__weekday-date,
544
+ [class$=-calendar--default-theme] .sd-calendar__weekday--today .sd-calendar__weekday-date {
545
+ color: var(--sd-calendar-contrast-color);
546
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 80%, transparent);
547
+ }
548
+ .sd-calendar--default-theme.sd-calendar--light, :not([sd-theme]) .sd-calendar--default-theme, [sd-theme=light] .sd-calendar--default-theme .sd-calendar__weekday:not(.sd-calendar__weekday--today) .sd-calendar__weekday-date,
549
+ [class$=-calendar--default-theme].sd-calendar--light,
550
+ :not([sd-theme]) [class$=-calendar--default-theme],
551
+ [sd-theme=light] [class$=-calendar--default-theme] .sd-calendar__weekday:not(.sd-calendar__weekday--today) .sd-calendar__weekday-date {
552
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 20%, transparent);
553
+ }
554
+ .sd-calendar--default-theme .sd-calendar__scrollable--has-schedules .sd-calendar__weekday-date,
555
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--has-schedules .sd-calendar__weekday-date {
556
+ width: 1.5em;
557
+ }
558
+ .sd-calendar--default-theme .sd-calendar__schedule--heading,
559
+ [class$=-calendar--default-theme] .sd-calendar__schedule--heading {
560
+ align-items: center;
561
+ font-size: 12px;
90
562
  }
91
- .sd-calendar-month-cell-body {
92
- box-sizing: border-box;
563
+ .sd-calendar--default-theme .sd-calendar__cell,
564
+ [class$=-calendar--default-theme] .sd-calendar__cell {
565
+ overflow: hidden;
566
+ box-shadow: 0 0 0 0.5px var(--sd-calendar-border-color) inset;
93
567
  }
94
- .sd-calendar-mode-month:not(.sd-calendar-panel) .sd-calendar-cell:not(:last-child) {
95
- border-right: 1px solid var(--color-neutral-3);
568
+ .sd-calendar--default-theme.sd-calendar--lg .sd-calendar__scrollable--month-view .sd-calendar__cell,
569
+ [class$=-calendar--default-theme].sd-calendar--lg .sd-calendar__scrollable--month-view .sd-calendar__cell {
570
+ flex-direction: column;
571
+ align-items: flex-end;
572
+ justify-content: flex-start;
96
573
  }
97
- .sd-calendar-week-list {
574
+ .sd-calendar--default-theme .sd-calendar__cell::before,
575
+ [class$=-calendar--default-theme] .sd-calendar__cell::before {
576
+ position: absolute;
577
+ z-index: -1;
578
+ content: "";
579
+ inset: 0;
580
+ }
581
+ .sd-calendar--default-theme.sd-calendar--light .sd-calendar__cell::before, :not([sd-theme]) .sd-calendar--default-theme .sd-calendar__cell::before, [sd-theme=light] .sd-calendar--default-theme .sd-calendar__cell::before,
582
+ [class$=-calendar--default-theme].sd-calendar--light .sd-calendar__cell::before,
583
+ :not([sd-theme]) [class$=-calendar--default-theme] .sd-calendar__cell::before,
584
+ [sd-theme=light] [class$=-calendar--default-theme] .sd-calendar__cell::before {
585
+ filter: saturate(2);
586
+ }
587
+ .sd-calendar--default-theme .sd-calendar__cell--today::before,
588
+ .sd-calendar--default-theme .sd-calendar__cell--current-month::before,
589
+ .sd-calendar--default-theme .sd-calendar__cell--current-year::before,
590
+ [class$=-calendar--default-theme] .sd-calendar__cell--today::before,
591
+ [class$=-calendar--default-theme] .sd-calendar__cell--current-month::before,
592
+ [class$=-calendar--default-theme] .sd-calendar__cell--current-year::before {
593
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 10%, transparent);
594
+ }
595
+ .sd-calendar--default-theme .sd-calendar__cell--selected::before,
596
+ [class$=-calendar--default-theme] .sd-calendar__cell--selected::before {
597
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 25%, transparent);
598
+ }
599
+ .sd-calendar--default-theme.sd-calendar--light .sd-calendar__cell--today::before,
600
+ .sd-calendar--default-theme.sd-calendar--light .sd-calendar__cell--current-month::before,
601
+ .sd-calendar--default-theme.sd-calendar--light .sd-calendar__cell--current-year::before, :not([sd-theme]) .sd-calendar--default-theme .sd-calendar__cell--today::before,
602
+ :not([sd-theme]) .sd-calendar--default-theme .sd-calendar__cell--current-month::before,
603
+ :not([sd-theme]) .sd-calendar--default-theme .sd-calendar__cell--current-year::before, [sd-theme=light] .sd-calendar--default-theme .sd-calendar__cell--today::before,
604
+ [sd-theme=light] .sd-calendar--default-theme .sd-calendar__cell--current-month::before,
605
+ [sd-theme=light] .sd-calendar--default-theme .sd-calendar__cell--current-year::before,
606
+ [class$=-calendar--default-theme].sd-calendar--light .sd-calendar__cell--today::before,
607
+ [class$=-calendar--default-theme].sd-calendar--light .sd-calendar__cell--current-month::before,
608
+ [class$=-calendar--default-theme].sd-calendar--light .sd-calendar__cell--current-year::before,
609
+ :not([sd-theme]) [class$=-calendar--default-theme] .sd-calendar__cell--today::before,
610
+ :not([sd-theme]) [class$=-calendar--default-theme] .sd-calendar__cell--current-month::before,
611
+ :not([sd-theme]) [class$=-calendar--default-theme] .sd-calendar__cell--current-year::before,
612
+ [sd-theme=light] [class$=-calendar--default-theme] .sd-calendar__cell--today::before,
613
+ [sd-theme=light] [class$=-calendar--default-theme] .sd-calendar__cell--current-month::before,
614
+ [sd-theme=light] [class$=-calendar--default-theme] .sd-calendar__cell--current-year::before {
615
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 5%, transparent);
616
+ }
617
+ .sd-calendar--default-theme.sd-calendar--light .sd-calendar__cell--selected::before, :not([sd-theme]) .sd-calendar--default-theme .sd-calendar__cell--selected::before, [sd-theme=light] .sd-calendar--default-theme .sd-calendar__cell--selected::before,
618
+ [class$=-calendar--default-theme].sd-calendar--light .sd-calendar__cell--selected::before,
619
+ :not([sd-theme]) [class$=-calendar--default-theme] .sd-calendar__cell--selected::before,
620
+ [sd-theme=light] [class$=-calendar--default-theme] .sd-calendar__cell--selected::before {
621
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 10%, transparent);
622
+ }
623
+ .sd-calendar--default-theme .sd-calendar__cell-date,
624
+ [class$=-calendar--default-theme] .sd-calendar__cell-date {
625
+ position: sticky;
626
+ top: 0;
627
+ font-weight: bold;
628
+ }
629
+ .sd-calendar--default-theme .sd-calendar__cell--disabled .sd-calendar__cell-date,
630
+ [class$=-calendar--default-theme] .sd-calendar__cell--disabled .sd-calendar__cell-date {
631
+ opacity: 0.5;
632
+ }
633
+ .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell::before,
634
+ [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell::before {
635
+ display: none;
636
+ }
637
+ .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell-date,
638
+ [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell-date {
98
639
  display: flex;
99
- box-sizing: border-box;
640
+ flex-shrink: 0;
641
+ align-items: center;
642
+ justify-content: center;
643
+ width: 2em;
644
+ margin: 4px;
645
+ padding: 4px;
646
+ overflow: hidden;
647
+ font-size: 13px;
648
+ letter-spacing: -0.5px;
649
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 25%, transparent);
650
+ border-radius: 99em;
651
+ aspect-ratio: 1;
652
+ }
653
+ .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell--today .sd-calendar__cell-date,
654
+ [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell--today .sd-calendar__cell-date {
655
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 60%, transparent);
656
+ }
657
+ .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell--selected .sd-calendar__cell-date,
658
+ [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell--selected .sd-calendar__cell-date {
659
+ background-color: var(--sd-calendar-primary-color);
660
+ }
661
+ .sd-calendar--default-theme.sd-calendar--light:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell-date, :not([sd-theme]) .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell-date, [sd-theme=light] .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell-date,
662
+ [class$=-calendar--default-theme].sd-calendar--light:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell-date,
663
+ :not([sd-theme]) [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell-date,
664
+ [sd-theme=light] [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell-date {
665
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 8%, transparent);
666
+ }
667
+ .sd-calendar--default-theme.sd-calendar--light:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell--today .sd-calendar__cell-date, :not([sd-theme]) .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell--today .sd-calendar__cell-date, [sd-theme=light] .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell--today .sd-calendar__cell-date,
668
+ [class$=-calendar--default-theme].sd-calendar--light:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell--today .sd-calendar__cell-date,
669
+ :not([sd-theme]) [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell--today .sd-calendar__cell-date,
670
+ [sd-theme=light] [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell--today .sd-calendar__cell-date {
671
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 22%, transparent);
672
+ }
673
+ .sd-calendar--default-theme.sd-calendar--light:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell--selected .sd-calendar__cell-date, :not([sd-theme]) .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell--selected .sd-calendar__cell-date, [sd-theme=light] .sd-calendar--default-theme:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell--selected .sd-calendar__cell-date,
674
+ [class$=-calendar--default-theme].sd-calendar--light:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell--selected .sd-calendar__cell-date,
675
+ :not([sd-theme]) [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__cell--selected .sd-calendar__cell-date,
676
+ [sd-theme=light] [class$=-calendar--default-theme]:is(.sd-calendar--sm, .sd-calendar--lg) .sd-calendar__scrollable--month-view .sd-calendar__cell--selected .sd-calendar__cell-date {
677
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 40%, transparent);
678
+ }
679
+ .sd-calendar--default-theme .sd-calendar__cell--out-of-scope .sd-calendar__cell-date,
680
+ [class$=-calendar--default-theme] .sd-calendar__cell--out-of-scope .sd-calendar__cell-date {
681
+ opacity: 0.4;
682
+ }
683
+ .sd-calendar--default-theme .sd-calendar__scrollable--month-view .sd-calendar__cell-events,
684
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--month-view .sd-calendar__cell-events {
685
+ flex-grow: 1;
100
686
  width: 100%;
101
- padding: 0;
102
- border-bottom: 1px solid var(--color-neutral-3);
103
- }
104
- .sd-calendar-week-list-item {
105
- flex: 1;
106
- padding: 20px 16px;
107
- color: #7d7d7f;
108
- text-align: left;
687
+ padding-left: 4px;
688
+ overflow: hidden;
109
689
  }
110
- .sd-calendar-cell .sd-calendar-date {
111
- box-sizing: border-box;
690
+ .sd-calendar--default-theme.sd-calendar--timeless .sd-calendar__cell-events,
691
+ [class$=-calendar--default-theme].sd-calendar--timeless .sd-calendar__cell-events {
692
+ display: flex;
693
+ flex-direction: column;
694
+ gap: 4px;
695
+ align-items: flex-start;
696
+ justify-content: flex-start;
112
697
  width: 100%;
113
698
  height: 100%;
114
- padding: 10px;
115
- cursor: pointer;
699
+ padding: 4px;
700
+ }
701
+ .sd-calendar--default-theme .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--day-view .sd-calendar__cell-events,
702
+ .sd-calendar--default-theme .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--days-view .sd-calendar__cell-events,
703
+ .sd-calendar--default-theme .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--week-view .sd-calendar__cell-events,
704
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--day-view .sd-calendar__cell-events,
705
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--days-view .sd-calendar__cell-events,
706
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--week-view .sd-calendar__cell-events {
707
+ position: absolute;
708
+ inset: 0 8px 0 0;
709
+ }
710
+ .sd-calendar--default-theme .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--day-view .sd-calendar__cell-events:dir(rtl),
711
+ .sd-calendar--default-theme .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--days-view .sd-calendar__cell-events:dir(rtl),
712
+ .sd-calendar--default-theme .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--week-view .sd-calendar__cell-events:dir(rtl),
713
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--day-view .sd-calendar__cell-events:dir(rtl),
714
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--days-view .sd-calendar__cell-events:dir(rtl),
715
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--week-view .sd-calendar__cell-events:dir(rtl) {
716
+ inset: 0 0 0 8px;
717
+ }
718
+ .sd-calendar--default-theme .sd-calendar__all-day .sd-calendar__cell-events,
719
+ [class$=-calendar--default-theme] .sd-calendar__all-day .sd-calendar__cell-events {
720
+ width: 100%;
721
+ inset: 0;
116
722
  }
117
- .sd-calendar-cell .sd-calendar-date-circle {
723
+ .sd-calendar--default-theme .sd-calendar__time-cell,
724
+ [class$=-calendar--default-theme] .sd-calendar__time-cell {
725
+ display: flex;
726
+ justify-content: flex-end;
727
+ min-width: fit-content;
728
+ white-space: nowrap;
729
+ }
730
+ .sd-calendar--default-theme .sd-calendar__time-cell-label,
731
+ [class$=-calendar--default-theme] .sd-calendar__time-cell-label {
732
+ z-index: 1;
733
+ align-self: flex-start;
734
+ width: 98%;
735
+ margin-top: -7.5px;
736
+ padding-right: 2px;
737
+ color: color-mix(in srgb, var(--sd-calendar-base-color) 50%, transparent);
738
+ font-size: 11px;
739
+ letter-spacing: -0.5px;
740
+ background: var(--sd-calendar-secondary-color);
741
+ }
742
+ .sd-calendar--default-theme .sd-calendar__time-cell:nth-child(1) .sd-calendar__time-cell-label,
743
+ [class$=-calendar--default-theme] .sd-calendar__time-cell:nth-child(1) .sd-calendar__time-cell-label {
744
+ margin-top: -1px;
745
+ font-size: 10px;
746
+ background: none;
747
+ }
748
+ .sd-calendar--default-theme .sd-calendar__current-time,
749
+ [class$=-calendar--default-theme] .sd-calendar__current-time {
750
+ z-index: 1;
118
751
  display: flex;
119
752
  align-items: center;
120
753
  justify-content: center;
121
- width: 28px;
122
- height: 28px;
123
- border-radius: 50%;
124
- }
125
- .sd-calendar-date-content {
126
- height: 70px;
127
- overflow-y: auto;
128
- }
129
- .sd-calendar-cell-today .sd-calendar-date-circle {
130
- box-sizing: border-box;
131
- border: 1px solid rgb(var(--primary-6));
754
+ padding: 2px 4px;
755
+ font-size: 10px;
756
+ line-height: 1;
757
+ border-radius: 99em;
758
+ transform: translate(-50%, -50%);
759
+ backdrop-filter: blur(8px);
760
+ pointer-events: none;
761
+ }
762
+ .sd-calendar--default-theme .sd-calendar__event,
763
+ [class$=-calendar--default-theme] .sd-calendar__event {
764
+ z-index: 1;
765
+ display: flex;
766
+ width: 90%;
767
+ color: var(--sd-calendar-event-color);
768
+ line-height: 1;
769
+ background-color: var(--sd-calendar-primary-extra-color);
770
+ border: 1px solid var(--sd-calendar-event-border-color);
771
+ border-radius: 4px;
772
+ }
773
+ .sd-calendar--default-theme .sd-calendar__event--background,
774
+ [class$=-calendar--default-theme] .sd-calendar__event--background {
775
+ z-index: 0;
776
+ width: 100%;
777
+ overflow: visible;
778
+ border: none;
779
+ border-radius: 0;
132
780
  }
133
- .sd-calendar-date-value {
134
- color: var(--color-text-4);
135
- font-weight: 500;
136
- font-size: 16px;
781
+ .sd-calendar--default-theme .sd-calendar__event--cut-top,
782
+ [class$=-calendar--default-theme] .sd-calendar__event--cut-top {
783
+ border-top: none;
784
+ border-top-left-radius: 0;
785
+ border-top-right-radius: 0;
786
+ }
787
+ .sd-calendar--default-theme .sd-calendar__event--cut-bottom,
788
+ [class$=-calendar--default-theme] .sd-calendar__event--cut-bottom {
789
+ border-bottom: none;
790
+ border-bottom-right-radius: 0;
791
+ border-bottom-left-radius: 0;
792
+ }
793
+ .sd-calendar--default-theme .sd-calendar__event--cut-left,
794
+ [class$=-calendar--default-theme] .sd-calendar__event--cut-left {
795
+ border-left: none;
796
+ border-top-left-radius: 0;
797
+ border-bottom-left-radius: 0;
798
+ }
799
+ .sd-calendar--default-theme .sd-calendar__event--cut-right,
800
+ [class$=-calendar--default-theme] .sd-calendar__event--cut-right {
801
+ border-right: none;
802
+ border-top-right-radius: 0;
803
+ border-bottom-right-radius: 0;
804
+ }
805
+ .sd-calendar--default-theme .sd-calendar__event:not(.sd-calendar__event--background):hover,
806
+ [class$=-calendar--default-theme] .sd-calendar__event:not(.sd-calendar__event--background):hover {
807
+ z-index: 3;
808
+ }
809
+ .sd-calendar--default-theme .sd-calendar__event-details,
810
+ [class$=-calendar--default-theme] .sd-calendar__event-details {
811
+ flex-grow: 1;
812
+ padding: 2px;
813
+ overflow: hidden;
814
+ font-size: 12px;
137
815
  }
138
- .sd-calendar-cell-in-view .sd-calendar-date-value {
139
- color: var(--color-text-1);
816
+ .sd-calendar--default-theme .sd-calendar__event-time,
817
+ [class$=-calendar--default-theme] .sd-calendar__event-time {
818
+ font-size: 11px;
819
+ line-height: 1;
820
+ letter-spacing: -0.5px;
821
+ white-space: nowrap;
822
+ }
823
+ .sd-calendar--default-theme .sd-calendar__event-comma,
824
+ [class$=-calendar--default-theme] .sd-calendar__event-comma {
825
+ padding-right: 4px;
826
+ }
827
+ .sd-calendar--default-theme .sd-calendar__event-resizer,
828
+ [class$=-calendar--default-theme] .sd-calendar__event-resizer {
829
+ border-bottom-right-radius: inherit;
830
+ border-bottom-left-radius: inherit;
831
+ inset: auto -1px -1px;
832
+ }
833
+ .sd-calendar--default-theme .sd-calendar__event-delete,
834
+ [class$=-calendar--default-theme] .sd-calendar__event-delete {
835
+ position: absolute;
836
+ top: -5px;
837
+ right: -5px;
838
+ width: 1.5em;
839
+ padding: 2px;
840
+ color: transparent;
841
+ font-size: 0.8em;
842
+ background-color: rgb(var(--sd-danger-6));
843
+ border: 1px solid color-mix(in srgb, var(--sd-calendar-contrast-color) 50%, transparent);
844
+ border-radius: 99em;
845
+ cursor: pointer;
846
+ aspect-ratio: 1;
140
847
  }
141
- .sd-calendar-mode-month .sd-calendar-cell-selected .sd-calendar-date-circle {
142
- box-sizing: border-box;
143
- color: #fff;
144
- background-color: rgb(var(--primary-6));
145
- border: 1px solid rgb(var(--primary-6));
848
+ .sd-calendar--default-theme .sd-calendar__event-delete::before, .sd-calendar--default-theme .sd-calendar__event-delete::after,
849
+ [class$=-calendar--default-theme] .sd-calendar__event-delete::before,
850
+ [class$=-calendar--default-theme] .sd-calendar__event-delete::after {
851
+ position: absolute;
852
+ top: 50%;
853
+ right: 20%;
854
+ left: 20%;
855
+ height: 2px;
856
+ background-color: var(--sd-calendar-event-color);
857
+ border-radius: 99em;
858
+ content: "";
146
859
  }
147
- .sd-calendar-mode-year .sd-calendar-cell-selected .sd-calendar-cell-selected .sd-calendar-date-circle {
148
- box-sizing: border-box;
149
- color: #fff;
150
- background-color: rgb(var(--primary-6));
151
- border: 1px solid rgb(var(--primary-6));
860
+ .sd-calendar--default-theme .sd-calendar__event-delete::before,
861
+ [class$=-calendar--default-theme] .sd-calendar__event-delete::before {
862
+ transform: translateY(-50%) rotate(45deg);
152
863
  }
153
- .sd-calendar-mode-year:not(.sd-calendar-panel) {
154
- min-width: 820px;
864
+ .sd-calendar--default-theme .sd-calendar__event-delete::after,
865
+ [class$=-calendar--default-theme] .sd-calendar__event-delete::after {
866
+ transform: translateY(-50%) rotate(-45deg);
155
867
  }
156
- .sd-calendar-mode-year .sd-calendar-header {
157
- border-bottom: 1px solid var(--color-neutral-3);
868
+ .sd-calendar--default-theme.sd-calendar--timeless .sd-calendar__event,
869
+ [class$=-calendar--default-theme].sd-calendar--timeless .sd-calendar__event {
870
+ position: relative;
871
+ width: 100%;
158
872
  }
159
- .sd-calendar-mode-year .sd-calendar-body {
160
- padding: 12px;
873
+ .sd-calendar--default-theme .sd-calendar__scrollable--month-view .sd-calendar__event,
874
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--month-view .sd-calendar__event {
875
+ width: 100%;
876
+ padding-top: 1px;
877
+ padding-bottom: 1px;
161
878
  }
162
- .sd-calendar-mode-year .sd-calendar-year-row {
879
+ .sd-calendar--default-theme .sd-calendar__scrollable--month-view .sd-calendar__event-details,
880
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--month-view .sd-calendar__event-details {
163
881
  display: flex;
882
+ padding-top: 1px;
883
+ padding-bottom: 1px;
884
+ }
885
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal,
886
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal {
887
+ --sd-calendar-weekday-bar-size: 6rem;
888
+ --sd-calendar-schedules-bar-size: 4rem;
889
+ --sd-calendar-all-day-bar-size: 8rem;
890
+ --sd-calendar-min-cell-size: 20rem;
891
+ }
892
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-schedules,
893
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-schedules {
894
+ --sd-calendar-schedules-bar-size: 0;
895
+ }
896
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view,
897
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view {
898
+ --sd-calendar-weekday-bar-size: 0;
899
+ }
900
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--month-view, .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-all-day-bar,
901
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--month-view,
902
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-all-day-bar {
903
+ --sd-calendar-all-day-bar-size: 0;
904
+ }
905
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__time-column,
906
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__time-column {
907
+ height: 25px;
908
+ border-right: none;
909
+ border-bottom: 0.5px solid var(--sd-calendar-border-color);
910
+ }
911
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__all-day-label,
912
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__all-day-label {
913
+ border-right: 0.5px solid var(--sd-calendar-border-color);
914
+ border-bottom: none;
915
+ }
916
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__time-cell,
917
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__time-cell {
918
+ justify-content: flex-start;
919
+ }
920
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__time-cell::before,
921
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__time-cell::before {
922
+ top: auto;
923
+ bottom: 0;
924
+ left: 0;
925
+ width: 0;
926
+ height: 5px;
927
+ border-top: none;
928
+ border-left: 0.5px solid var(--sd-calendar-border-color);
929
+ }
930
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__time-cell label,
931
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__time-cell label {
932
+ padding: 0;
933
+ line-height: 1;
934
+ transform: translateX(-50%);
164
935
  }
165
- .sd-calendar-year-row > .sd-calendar-cell {
166
- flex: 1;
167
- padding: 20px 8px;
168
- }
169
- .sd-calendar-year-row > .sd-calendar-cell:not(:last-child) {
170
- border-right: 1px solid var(--color-neutral-3);
936
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view.sd-calendar__scrollable--no-schedules .sd-calendar__time-cell:first-child label, .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--has-all-day-bar .sd-calendar__time-cell:not(.sd-calendar__time-cell + .sd-calendar__time-cell) label,
937
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view.sd-calendar__scrollable--no-schedules .sd-calendar__time-cell:first-child label,
938
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--has-all-day-bar .sd-calendar__time-cell:not(.sd-calendar__time-cell + .sd-calendar__time-cell) label {
939
+ display: none;
171
940
  }
172
- .sd-calendar-year-row:not(:last-child) > .sd-calendar-cell {
173
- border-bottom: 1px solid var(--color-neutral-3);
941
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__weekdays-headings,
942
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__weekdays-headings {
943
+ text-align: right;
174
944
  }
175
- .sd-calendar-month-with-days .sd-calendar-month-row {
176
- height: 26px;
945
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__weekday,
946
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__weekday {
947
+ justify-content: flex-end;
948
+ padding: 0 6px;
949
+ box-shadow: 0 0 0 0.5px var(--sd-calendar-border-color) inset;
177
950
  }
178
- .sd-calendar-month-with-days .sd-calendar-cell {
179
- border-bottom: 0;
951
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__all-day-resizer,
952
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__all-day-resizer {
953
+ right: 0;
954
+ bottom: 0;
955
+ width: 1px;
956
+ height: 100%;
957
+ cursor: col-resize;
180
958
  }
181
- .sd-calendar-month-with-days .sd-calendar-month-cell-body {
182
- padding: 0;
959
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__all-day-resizer::before,
960
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__all-day-resizer::before {
961
+ inset: 0 -5px;
183
962
  }
184
- .sd-calendar-month-with-days .sd-calendar-month-title {
185
- padding: 10px 6px;
186
- color: var(--color-text-1);
187
- font-weight: 500;
188
- font-size: 16px;
963
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__now-line,
964
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__now-line {
965
+ z-index: 3;
966
+ border-color: color-mix(in srgb, rgb(var(--sd-danger-6)) 60%, transparent);
189
967
  }
190
- .sd-calendar-month-cell {
968
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__now-line::before,
969
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__now-line::before {
970
+ top: auto;
971
+ bottom: 0;
972
+ left: -6px;
973
+ border-bottom-color: inherit;
974
+ border-left-color: transparent;
975
+ }
976
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__now-line span,
977
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__now-line span {
978
+ left: 2px;
979
+ }
980
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--day-view .sd-calendar__cell-events, .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--days-view .sd-calendar__cell-events, .sd-calendar--default-theme .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--week-view .sd-calendar__cell-events,
981
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--day-view .sd-calendar__cell-events,
982
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--days-view .sd-calendar__cell-events,
983
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--no-schedules.sd-calendar__scrollable--week-view .sd-calendar__cell-events {
984
+ inset: 0 0 8px;
985
+ }
986
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__all-day .sd-calendar__cell-events,
987
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__all-day .sd-calendar__cell-events {
988
+ width: 90%;
989
+ margin: 1px auto 0 1px;
990
+ }
991
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__event,
992
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__event {
993
+ width: auto;
994
+ height: 90%;
995
+ }
996
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__event-resizer,
997
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__event-resizer {
998
+ border-top-right-radius: inherit;
999
+ border-bottom-right-radius: inherit;
1000
+ border-bottom-left-radius: 0;
1001
+ inset: -1px -1px -1px auto;
1002
+ }
1003
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__all-day .sd-calendar__event,
1004
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__all-day .sd-calendar__event {
1005
+ height: auto;
1006
+ }
1007
+ .sd-calendar--default-theme .sd-calendar__scrollable--horizontal .sd-calendar__schedule--heading,
1008
+ [class$=-calendar--default-theme] .sd-calendar__scrollable--horizontal .sd-calendar__schedule--heading {
1009
+ justify-content: flex-end;
1010
+ padding-right: 6px;
1011
+ box-shadow: 0 0 0 0.5px var(--sd-calendar-border-color) inset;
1012
+ }
1013
+ .sd-calendar--default-theme.sd-calendar--sm .sd-calendar__view-button,
1014
+ .sd-calendar--default-theme.sd-calendar--sm .sd-calendar__nav,
1015
+ .sd-calendar--default-theme.sd-calendar--sm .sd-calendar__title button,
1016
+ .sd-calendar--default-theme.sd-calendar--sm .sd-calendar__nav--today,
1017
+ [class$=-calendar--default-theme].sd-calendar--sm .sd-calendar__view-button,
1018
+ [class$=-calendar--default-theme].sd-calendar--sm .sd-calendar__nav,
1019
+ [class$=-calendar--default-theme].sd-calendar--sm .sd-calendar__title button,
1020
+ [class$=-calendar--default-theme].sd-calendar--sm .sd-calendar__nav--today {
1021
+ padding-right: 8px;
1022
+ padding-left: 8px;
1023
+ }
1024
+ .sd-calendar--default-theme.sd-calendar--xs,
1025
+ [class$=-calendar--default-theme].sd-calendar--xs {
1026
+ width: 350px;
1027
+ height: 250px;
1028
+ }
1029
+ .sd-calendar--default-theme.sd-calendar--xs .sd-calendar__view-button,
1030
+ .sd-calendar--default-theme.sd-calendar--xs .sd-calendar__nav,
1031
+ .sd-calendar--default-theme.sd-calendar--xs .sd-calendar__title button,
1032
+ .sd-calendar--default-theme.sd-calendar--xs .sd-calendar__nav--today,
1033
+ [class$=-calendar--default-theme].sd-calendar--xs .sd-calendar__view-button,
1034
+ [class$=-calendar--default-theme].sd-calendar--xs .sd-calendar__nav,
1035
+ [class$=-calendar--default-theme].sd-calendar--xs .sd-calendar__title button,
1036
+ [class$=-calendar--default-theme].sd-calendar--xs .sd-calendar__nav--today {
1037
+ padding-right: 4px;
1038
+ padding-left: 4px;
1039
+ }
1040
+ .sd-calendar--default-theme.sd-calendar--xs .sd-calendar__title,
1041
+ [class$=-calendar--default-theme].sd-calendar--xs .sd-calendar__title {
1042
+ gap: 4px;
1043
+ }
1044
+ .sd-calendar--default-theme.sd-calendar--xs .sd-calendar__title small,
1045
+ [class$=-calendar--default-theme].sd-calendar--xs .sd-calendar__title small {
1046
+ padding-right: 3px;
1047
+ padding-left: 3px;
1048
+ }
1049
+ .sd-calendar--default-theme.sd-calendar--xs .sd-calendar__body,
1050
+ [class$=-calendar--default-theme].sd-calendar--xs .sd-calendar__body {
191
1051
  width: 100%;
1052
+ }
1053
+ .sd-calendar--default-theme.sd-calendar--xs .sd-calendar__scrollable--year-view .sd-calendar__body,
1054
+ .sd-calendar--default-theme.sd-calendar--xs .sd-calendar__scrollable--years-view .sd-calendar__body,
1055
+ [class$=-calendar--default-theme].sd-calendar--xs .sd-calendar__scrollable--year-view .sd-calendar__body,
1056
+ [class$=-calendar--default-theme].sd-calendar--xs .sd-calendar__scrollable--years-view .sd-calendar__body {
1057
+ margin: auto;
1058
+ }
1059
+ .sd-calendar--default-theme.sd-calendar--date-picker,
1060
+ [class$=-calendar--default-theme].sd-calendar--date-picker {
1061
+ width: 210px;
192
1062
  font-size: 12px;
193
1063
  }
194
- .sd-calendar-month-cell .sd-calendar-week-list {
195
- padding: 0;
196
- border-bottom: unset;
1064
+ .sd-calendar--default-theme.sd-calendar--date-picker:has(.sd-calendar__views-bar),
1065
+ [class$=-calendar--default-theme].sd-calendar--date-picker:has(.sd-calendar__views-bar) {
1066
+ height: 260px;
1067
+ }
1068
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__views-bar,
1069
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__title-bar,
1070
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__views-bar,
1071
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__title-bar {
1072
+ height: 2em;
1073
+ padding-top: 2px;
1074
+ padding-bottom: 2px;
1075
+ }
1076
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__title-bar,
1077
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__title-bar {
1078
+ padding-right: 0.3em;
1079
+ padding-left: 0.3em;
1080
+ }
1081
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__nav--today,
1082
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__view-button,
1083
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__nav--today,
1084
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__view-button {
1085
+ font-size: 0.9em;
1086
+ }
1087
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__nav--prev,
1088
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__nav--next,
1089
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__nav--prev,
1090
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__nav--next {
1091
+ width: 1.6em;
1092
+ }
1093
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__nav--prev::before,
1094
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__nav--next::before,
1095
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__nav--prev::before,
1096
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__nav--next::before {
1097
+ padding: 0.22em;
1098
+ }
1099
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__weekday,
1100
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__weekday {
1101
+ font-size: 0.95em;
1102
+ }
1103
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__body,
1104
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__body {
1105
+ gap: 2px;
1106
+ padding: 2px;
1107
+ }
1108
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--year-view .sd-calendar__body,
1109
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--year-view .sd-calendar__body {
1110
+ gap: 0.8em;
1111
+ padding: 0.6em;
1112
+ }
1113
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--month-view .sd-calendar__body,
1114
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--year-view .sd-calendar__body,
1115
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--years-view .sd-calendar__body,
1116
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--month-view .sd-calendar__body,
1117
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--year-view .sd-calendar__body,
1118
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--years-view .sd-calendar__body {
1119
+ align-items: center;
1120
+ }
1121
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__cell,
1122
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__cell {
1123
+ font-weight: bold;
1124
+ font-size: 1em;
1125
+ border-radius: 99em;
1126
+ box-shadow: none;
1127
+ aspect-ratio: 1;
1128
+ }
1129
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--day-view .sd-calendar__cell,
1130
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--days-view .sd-calendar__cell,
1131
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--week-view .sd-calendar__cell,
1132
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--day-view .sd-calendar__cell,
1133
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--days-view .sd-calendar__cell,
1134
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--week-view .sd-calendar__cell {
1135
+ font-weight: normal;
1136
+ border-radius: 0;
1137
+ aspect-ratio: initial;
197
1138
  }
198
- .sd-calendar-month-cell .sd-calendar-week-list-item {
1139
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--years-view .sd-calendar__cell,
1140
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--years-view .sd-calendar__cell {
199
1141
  padding: 6px;
200
- color: #7d7d7f;
201
- text-align: center;
202
1142
  }
203
- .sd-calendar-month-cell .sd-calendar-cell {
204
- text-align: center;
1143
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--month-view .sd-calendar__cell,
1144
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--years-view .sd-calendar__cell,
1145
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--month-view .sd-calendar__cell,
1146
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--years-view .sd-calendar__cell {
1147
+ font-size: 0.9em;
1148
+ }
1149
+ .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__cell-date,
1150
+ [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__cell-date {
1151
+ font-weight: bold;
1152
+ }
1153
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--dark .sd-calendar__cell--today::before, .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--dark .sd-calendar__cell--current-month::before, .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--dark .sd-calendar__cell--current-year::before, [sd-theme=dark] .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__cell--today::before, [sd-theme=dark] .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__cell--current-month::before, [sd-theme=dark] .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__cell--current-year::before,
1154
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--dark .sd-calendar__cell--today::before,
1155
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--dark .sd-calendar__cell--current-month::before,
1156
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--dark .sd-calendar__cell--current-year::before,
1157
+ [sd-theme=dark] [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__cell--today::before,
1158
+ [sd-theme=dark] [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__cell--current-month::before,
1159
+ [sd-theme=dark] [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__cell--current-year::before {
1160
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 50%, transparent);
1161
+ }
1162
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--dark .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before, .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--dark .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before, .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--dark .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before, [sd-theme=dark] .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before, [sd-theme=dark] .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before, [sd-theme=dark] .sd-calendar--default-theme.sd-calendar--date-picker .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before,
1163
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--dark .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1164
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--dark .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1165
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--dark .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before,
1166
+ [sd-theme=dark] [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1167
+ [sd-theme=dark] [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1168
+ [sd-theme=dark] [class$=-calendar--default-theme].sd-calendar--date-picker .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before {
1169
+ background-color: var(--sd-calendar-primary-color);
1170
+ }
1171
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--light .sd-calendar__cell--today::before,
1172
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--light .sd-calendar__cell--current-month::before,
1173
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--light .sd-calendar__cell--current-year::before, .sd-calendar--default-theme.sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar__cell--today::before,
1174
+ .sd-calendar--default-theme.sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar__cell--current-month::before,
1175
+ .sd-calendar--default-theme.sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar__cell--current-year::before,
1176
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--light .sd-calendar__cell--today::before,
1177
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--light .sd-calendar__cell--current-month::before,
1178
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--light .sd-calendar__cell--current-year::before,
1179
+ [class$=-calendar--default-theme].sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar__cell--today::before,
1180
+ [class$=-calendar--default-theme].sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar__cell--current-month::before,
1181
+ [class$=-calendar--default-theme].sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar__cell--current-year::before {
1182
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 12%, transparent);
1183
+ }
1184
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--light .sd-calendar--dark .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1185
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--light .sd-calendar--dark .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1186
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--light .sd-calendar--dark .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before,
1187
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--light [sd-theme=dark] .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1188
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--light [sd-theme=dark] .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1189
+ .sd-calendar--default-theme.sd-calendar--date-picker.sd-calendar--light [sd-theme=dark] .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before, .sd-calendar--default-theme.sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar--dark .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1190
+ .sd-calendar--default-theme.sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar--dark .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1191
+ .sd-calendar--default-theme.sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar--dark .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before,
1192
+ .sd-calendar--default-theme.sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) [sd-theme=dark] .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1193
+ .sd-calendar--default-theme.sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) [sd-theme=dark] .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1194
+ .sd-calendar--default-theme.sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) [sd-theme=dark] .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before,
1195
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--light .sd-calendar--dark .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1196
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--light .sd-calendar--dark .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1197
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--light .sd-calendar--dark .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before,
1198
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--light [sd-theme=dark] .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1199
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--light [sd-theme=dark] .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1200
+ [class$=-calendar--default-theme].sd-calendar--date-picker.sd-calendar--light [sd-theme=dark] .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before,
1201
+ [class$=-calendar--default-theme].sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar--dark .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1202
+ [class$=-calendar--default-theme].sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar--dark .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1203
+ [class$=-calendar--default-theme].sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) .sd-calendar--dark .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before,
1204
+ [class$=-calendar--default-theme].sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) [sd-theme=dark] .sd-calendar__scrollable--month-view .sd-calendar__cell--selected::before,
1205
+ [class$=-calendar--default-theme].sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) [sd-theme=dark] .sd-calendar__scrollable--year-view .sd-calendar__cell--selected::before,
1206
+ [class$=-calendar--default-theme].sd-calendar--date-picker:not([class*="--dark"]):not([sd-theme=dark] *) [sd-theme=dark] .sd-calendar__scrollable--years-view .sd-calendar__cell--selected::before {
1207
+ background-color: color-mix(in srgb, var(--sd-calendar-primary-color) 28%, transparent);
205
1208
  }
206
- .sd-calendar-month-cell .sd-calendar-date {
207
- padding: 2px;
1209
+
1210
+ @media (width <= 500px) {
1211
+ .sd-calendar--default-theme .sd-calendar__view-button,
1212
+ .sd-calendar--default-theme .sd-calendar__nav,
1213
+ .sd-calendar--default-theme button.sd-calendar__title,
1214
+ .sd-calendar--default-theme .sd-calendar__nav--today {
1215
+ padding-right: 6px;
1216
+ padding-left: 6px;
1217
+ }
1218
+ }
1219
+ .sd-calendar__header {
1220
+ position: relative;
1221
+ user-select: none;
208
1222
  }
209
- .sd-calendar-month-cell .sd-calendar-date-value {
210
- font-size: 14px;
1223
+
1224
+ .sd-calendar__views-bar {
1225
+ display: flex;
1226
+ gap: 4px;
1227
+ align-items: center;
1228
+ justify-content: center;
211
1229
  }
212
- .sd-calendar-month-cell .sd-calendar-date-circle {
213
- display: inline-flex;
1230
+
1231
+ .sd-calendar__title-bar {
1232
+ display: flex;
1233
+ }
1234
+
1235
+ .sd-calendar__header .sd-calendar__transition-wrap {
1236
+ position: relative;
1237
+ flex-grow: 1;
1238
+ min-height: 1px;
1239
+ }
1240
+ .sd-calendar__header .sd-calendar__transition-wrap > div {
1241
+ position: absolute;
1242
+ display: flex;
1243
+ flex-grow: 1;
214
1244
  align-items: center;
215
1245
  justify-content: center;
216
- width: 22px;
217
- height: 22px;
218
- border-radius: 50%;
1246
+ white-space: nowrap;
1247
+ inset: 0;
219
1248
  }
220
1249
 
221
- .sd-calendar-panel {
222
- background-color: var(--color-bg-5);
223
- border: 1px solid var(--color-neutral-3);
1250
+ .sd-calendar__title {
1251
+ position: relative;
1252
+ display: flex;
1253
+ gap: 6px;
1254
+ align-items: center;
1255
+ justify-content: center;
1256
+ margin: auto;
1257
+ font-weight: bold;
1258
+ font-size: 1.05em;
1259
+ font-family: inherit;
224
1260
  }
225
- .sd-calendar-panel .sd-calendar-header {
226
- padding: 8px 16px;
227
- border-bottom: 1px solid var(--color-neutral-3);
1261
+ .sd-calendar__title small {
1262
+ display: inline-flex;
1263
+ padding: 2px 6px;
1264
+ font-weight: normal;
1265
+ font-size: 0.8em;
1266
+ background: color-mix(in srgb, var(--sd-calendar-base-color) 15%, transparent);
1267
+ border-radius: 4px;
228
1268
  }
229
- .sd-calendar-panel .sd-calendar-header-value {
230
- flex: 1;
231
- font-size: 14px;
232
- line-height: 24px;
233
- text-align: center;
1269
+
1270
+ .sd-calendar__header nav {
1271
+ background-color: color-mix(in srgb, var(--sd-calendar-contrast-color) 20%, transparent);
234
1272
  }
235
- .sd-calendar-panel .sd-calendar-header-icon {
236
- width: 24px;
237
- height: 24px;
238
- margin-right: 2px;
239
- margin-left: 2px;
240
- line-height: 24px;
1273
+
1274
+ .sd-calendar__nav {
1275
+ position: relative;
1276
+ z-index: 1;
1277
+ display: inline-flex;
1278
+ align-items: center;
1279
+ justify-content: center;
241
1280
  }
242
- .sd-calendar-panel .sd-calendar-body {
243
- padding: 14px 16px;
1281
+ .sd-calendar__nav--today {
1282
+ position: relative;
1283
+ display: flex;
1284
+ align-items: center;
244
1285
  }
245
- .sd-calendar-panel .sd-calendar-month-cell-body {
246
- padding: 0;
1286
+ .sd-calendar__nav--today[disabled] {
1287
+ cursor: default;
247
1288
  }
248
- .sd-calendar-panel .sd-calendar-month-row {
249
- height: unset;
1289
+ .sd-calendar__nav--today.sd-calendar__nav--default {
1290
+ text-transform: uppercase;
250
1291
  }
251
- .sd-calendar-panel .sd-calendar-week-list {
252
- padding: 0;
253
- border-bottom: unset;
1292
+ .sd-calendar__nav--prev.sd-calendar__nav--default::before, .sd-calendar__nav--next.sd-calendar__nav--default::before {
1293
+ padding: 0.25em;
1294
+ border: solid currentcolor;
1295
+ border-width: 0 2px 2px 0;
1296
+ transform: translateX(-1px) rotate(-45deg);
1297
+ content: "";
254
1298
  }
255
- .sd-calendar-panel .sd-calendar-week-list-item {
256
- height: 32px;
257
- padding: 0;
258
- font-weight: 400;
259
- line-height: 32px;
260
- text-align: center;
1299
+ .sd-calendar__nav--prev.sd-calendar__nav--default::before {
1300
+ border-width: 2px 0 0 2px;
1301
+ transform: translateX(1px) rotate(-45deg);
261
1302
  }
262
- .sd-calendar-panel .sd-calendar-cell, .sd-calendar-panel .sd-calendar-year-row .sd-calendar-cell {
263
- box-sizing: border-box;
264
- padding: 2px 0;
265
- text-align: center;
266
- border-right: 0;
267
- border-bottom: 0;
1303
+
1304
+ .sd-calendar__body {
1305
+ position: relative;
1306
+ display: grid;
1307
+ grid-template-rows: repeat(var(--sd-calendar-grid-rows), 1fr);
1308
+ grid-template-columns: repeat(var(--sd-calendar-grid-columns), 1fr);
1309
+ height: 100%;
268
1310
  }
269
- .sd-calendar-panel .sd-calendar-cell .sd-calendar-date {
1311
+
1312
+ .sd-calendar__time-at-cursor {
1313
+ position: absolute;
1314
+ right: 0;
1315
+ left: 0;
1316
+ z-index: 10;
1317
+ border-top: 1px dashed var(--sd-calendar-border-color);
1318
+ pointer-events: none;
1319
+ }
1320
+ .sd-calendar__time-at-cursor label {
1321
+ position: absolute;
1322
+ top: 0;
1323
+ right: 100%;
1324
+ display: block;
1325
+ margin-right: 4px;
1326
+ padding: 0 3px;
1327
+ font-size: 0.7rem;
1328
+ letter-spacing: -0.04em;
1329
+ border-radius: 99em;
1330
+ transform: translateY(-50%);
1331
+ backdrop-filter: blur(10px);
1332
+ }
1333
+ .sd-calendar__scrollable--horizontal .sd-calendar__time-at-cursor {
1334
+ inset: 0 auto;
1335
+ border-top: none;
1336
+ border-left: 1px dashed var(--sd-calendar-border-color);
1337
+ }
1338
+ .sd-calendar__scrollable--horizontal .sd-calendar__time-at-cursor label {
1339
+ inset: auto auto 100% 50%;
1340
+ margin-right: 0;
1341
+ margin-bottom: 4px;
1342
+ transform: translateX(-50%);
1343
+ }
1344
+
1345
+ .sd-calendar__headings {
1346
+ position: sticky;
1347
+ top: 0;
1348
+ z-index: 4;
270
1349
  display: flex;
271
- justify-content: center;
272
- padding: 4px 0;
1350
+ flex-direction: column;
1351
+ flex-shrink: 0;
1352
+ height: calc(var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size) + var(--sd-calendar-all-day-bar-size));
1353
+ white-space: nowrap;
1354
+ background-color: var(--sd-calendar-secondary-color);
1355
+ }
1356
+ .sd-calendar__scrollable--horizontal .sd-calendar__headings {
1357
+ left: 0;
1358
+ flex-direction: row;
1359
+ width: calc(var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size) + var(--sd-calendar-all-day-bar-size));
1360
+ height: 100%;
273
1361
  }
274
- .sd-calendar-panel .sd-calendar-cell .sd-calendar-date-value {
275
- min-width: 24px;
276
- height: 24px;
277
- font-size: 14px;
278
- line-height: 24px;
279
- cursor: pointer;
1362
+
1363
+ .sd-calendar__weekdays-headings {
1364
+ display: flex;
280
1365
  }
281
- .sd-calendar-panel.sd-calendar-mode-year .sd-calendar-cell {
282
- padding: 4px 0;
1366
+
1367
+ .sd-calendar__weekday {
1368
+ flex: 1 1 0;
1369
+ align-items: center;
1370
+ background-color: inherit;
283
1371
  }
284
- .sd-calendar-panel.sd-calendar-mode-year .sd-calendar-cell .sd-calendar-date {
285
- padding: 4px;
1372
+ .sd-calendar__scrollable--day-view .sd-calendar__weekday, .sd-calendar__scrollable--days-view .sd-calendar__weekday, .sd-calendar__scrollable--week-view .sd-calendar__weekday {
1373
+ min-width: var(--sd-calendar-min-cell-size, 0);
1374
+ }
1375
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__weekday, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__weekday, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__weekday {
1376
+ min-width: 0;
1377
+ min-height: var(--sd-calendar-min-cell-size, 0);
1378
+ }
1379
+
1380
+ .sd-calendar__all-day {
1381
+ position: relative;
1382
+ display: flex;
1383
+ flex-grow: 1;
1384
+ height: var(--sd-calendar-all-day-bar-size);
286
1385
  }
287
- .sd-calendar-panel.sd-calendar-mode-year .sd-calendar-cell .sd-calendar-date-value {
1386
+
1387
+ .sd-calendar__all-day-cell {
1388
+ display: flex;
1389
+ flex: 1 1 0;
1390
+ background-color: var(--sd-calendar-secondary-color);
1391
+ }
1392
+
1393
+ .sd-calendar__all-day-resizer {
1394
+ position: absolute;
1395
+ right: 0;
1396
+ bottom: 0;
1397
+ z-index: 10;
288
1398
  width: 100%;
289
- border-radius: 12px;
1399
+ height: 1px;
1400
+ background-color: var(--sd-calendar-secondary-color);
1401
+ cursor: row-resize;
290
1402
  }
291
- .sd-calendar-panel .sd-calendar-cell-selected .sd-calendar-date-value {
292
- color: var(--color-white);
293
- background-color: rgb(var(--primary-6));
294
- border-radius: 50%;
1403
+ .sd-calendar__all-day-resizer:hover {
1404
+ height: 2px;
1405
+ background-color: var(--sd-calendar-primary-color);
295
1406
  }
296
- .sd-calendar-panel .sd-calendar-cell:not(.sd-calendar-cell-selected, .sd-calendar-cell-range-start, .sd-calendar-cell-range-end, .sd-calendar-cell-hover-range-start, .sd-calendar-cell-hover-range-end, .sd-calendar-cell-disabled, .sd-calendar-cell-week) .sd-calendar-date-value:hover {
297
- color: rgb(var(--primary-6));
298
- background-color: var(--color-primary-light-1);
299
- border-radius: 50%;
1407
+ .sd-calendar__all-day-resizer::before {
1408
+ position: absolute;
1409
+ content: "";
1410
+ inset: -5px 0;
300
1411
  }
301
- .sd-calendar-panel.sd-calendar-mode-year .sd-calendar-cell:not(.sd-calendar-cell-selected, .sd-calendar-cell-range-start, .sd-calendar-cell-range-end, .sd-calendar-cell-hover-range-start, .sd-calendar-cell-hover-range-end, .sd-calendar-cell-disabled) .sd-calendar-date-value:hover {
302
- border-radius: 12px;
1412
+
1413
+ .sd-calendar__time-column {
1414
+ position: sticky;
1415
+ top: 0;
1416
+ left: 0;
1417
+ z-index: 5;
1418
+ display: flex;
1419
+ flex-direction: column;
1420
+ align-self: flex-start;
1421
+ padding-top: calc(var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size) + var(--sd-calendar-all-day-bar-size));
1422
+ background-color: var(--sd-calendar-secondary-color);
1423
+ border-right: 0.5px solid var(--sd-calendar-border-color);
303
1424
  }
304
- .sd-calendar-panel .sd-calendar-cell-today {
1425
+
1426
+ .sd-calendar__time-column-inner {
305
1427
  position: relative;
1428
+ display: flex;
1429
+ flex-direction: column;
1430
+ flex-grow: 1;
1431
+ }
1432
+ .sd-calendar__time-column-inner .sd-calendar__time-cell:first-child {
1433
+ margin-block-start: 0.5em;
306
1434
  }
307
- .sd-calendar-panel .sd-calendar-cell-today::after {
1435
+
1436
+ .sd-calendar__all-day-label {
1437
+ position: sticky;
1438
+ top: 0;
1439
+ left: 0;
1440
+ z-index: 1;
1441
+ display: flex;
1442
+ align-items: center;
1443
+ justify-content: center;
1444
+ width: 100%;
1445
+ height: calc(var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size) + var(--sd-calendar-all-day-bar-size));
1446
+ margin-top: calc((var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size) + var(--sd-calendar-all-day-bar-size)) * -1);
1447
+ padding-top: calc(var(--sd-calendar-weekday-bar-size) + var(--sd-calendar-schedules-bar-size));
1448
+ font-size: 0.85em;
1449
+ line-height: 1;
1450
+ background: var(--sd-calendar-secondary-color);
1451
+ border-bottom: 1px solid var(--sd-calendar-border-color);
1452
+ }
1453
+
1454
+ .sd-calendar__time-cell {
1455
+ position: relative;
1456
+ display: flex;
1457
+ flex: 1 0 auto;
1458
+ height: var(--sd-calendar-time-cell-size);
1459
+ font-size: 0.85em;
1460
+ }
1461
+ .sd-calendar__time-cell::before {
308
1462
  position: absolute;
309
- bottom: 0;
310
- left: 50%;
311
- display: block;
312
- width: 4px;
313
- height: 4px;
314
- margin-left: -2px;
315
- background-color: rgb(var(--primary-6));
316
- border-radius: 50%;
1463
+ top: 0.5px;
1464
+ right: 0;
1465
+ width: 5px;
1466
+ border-top: 0.5px solid var(--sd-calendar-border-color);
317
1467
  content: "";
318
1468
  }
319
- .sd-calendar-cell-in-range .sd-calendar-date {
320
- background-color: var(--color-primary-light-1);
1469
+ .sd-calendar__time-cell label {
1470
+ padding-right: 8px;
1471
+ padding-left: 4px;
1472
+ line-height: 0;
1473
+ opacity: 0.5;
321
1474
  }
322
- .sd-calendar-cell-range-start .sd-calendar-date {
323
- border-radius: 16px 0 0 16px;
1475
+ .sd-calendar__scrollable--day-view.sd-calendar__scrollable--no-schedules .sd-calendar__time-cell:first-child label, .sd-calendar__scrollable--has-all-day-bar .sd-calendar__time-cell:not(.sd-calendar__time-cell + .sd-calendar__time-cell) label {
1476
+ margin-top: 0.5em;
1477
+ font-size: 0.9em;
1478
+ opacity: 0.4;
324
1479
  }
325
- .sd-calendar-cell-range-end .sd-calendar-date {
326
- border-radius: 0 16px 16px 0;
1480
+
1481
+ .sd-calendar__current-time {
1482
+ position: absolute;
1483
+ top: 50%;
1484
+ left: 50%;
1485
+ transform: translate(-50%, -50%);
327
1486
  }
328
- .sd-calendar-cell-in-range-near-hover .sd-calendar-date {
329
- border-radius: 0;
1487
+
1488
+ .sd-calendar__cell {
1489
+ position: relative;
1490
+ display: flex;
1491
+ align-items: center;
1492
+ justify-content: center;
1493
+ user-select: none;
330
1494
  }
331
- .sd-calendar-cell-range-start .sd-calendar-date-value, .sd-calendar-cell-range-end .sd-calendar-date-value {
332
- color: var(--color-white);
333
- background-color: rgb(var(--primary-6));
334
- border-radius: 50%;
1495
+ .sd-calendar__scrollable--day-view .sd-calendar__cell, .sd-calendar__scrollable--days-view .sd-calendar__cell, .sd-calendar__scrollable--week-view .sd-calendar__cell {
1496
+ min-width: var(--sd-calendar-min-cell-size, 0);
335
1497
  }
336
- .sd-calendar-cell-hover-in-range .sd-calendar-date {
337
- background-color: var(--color-primary-light-1);
1498
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__cell, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__cell, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__cell {
1499
+ min-width: 0;
1500
+ min-height: var(--sd-calendar-min-cell-size, 0);
338
1501
  }
339
- .sd-calendar-cell-hover-range-start .sd-calendar-date {
340
- border-radius: 16px 0 0 16px;
1502
+ .sd-calendar__scrollable--day-view .sd-calendar__cell--has-schedules, .sd-calendar__scrollable--days-view .sd-calendar__cell--has-schedules, .sd-calendar__scrollable--week-view .sd-calendar__cell--has-schedules {
1503
+ min-width: max(var(--sd-calendar-min-cell-size), var(--sd-calendar-min-schedule-size, 0px) * var(--sd-calendar-schedules-count, 0));
341
1504
  }
342
- .sd-calendar-cell-hover-range-end .sd-calendar-date {
343
- border-radius: 0 16px 16px 0;
1505
+ .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--day-view .sd-calendar__cell--has-schedules, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--days-view .sd-calendar__cell--has-schedules, .sd-calendar__scrollable--horizontal.sd-calendar__scrollable--week-view .sd-calendar__cell--has-schedules {
1506
+ min-width: 0;
1507
+ min-height: max(var(--sd-calendar-min-cell-size), var(--sd-calendar-min-schedule-size, 0px) * var(--sd-calendar-schedules-count, 0));
344
1508
  }
345
- .sd-calendar-cell-hover-range-start .sd-calendar-date-value, .sd-calendar-cell-hover-range-end .sd-calendar-date-value {
346
- color: var(--color-text-1);
347
- background-color: var(--color-primary-light-2);
348
- border-radius: 50%;
1509
+ .sd-calendar__cell--has-schedules {
1510
+ align-items: stretch;
349
1511
  }
350
- .sd-calendar-panel .sd-calendar-cell-disabled > .sd-calendar-date {
351
- background-color: var(--color-fill-1);
352
- cursor: not-allowed;
1512
+ .sd-calendar__cell--out-of-range {
1513
+ opacity: 0.4;
353
1514
  }
354
- .sd-calendar-panel .sd-calendar-cell-disabled > .sd-calendar-date > .sd-calendar-date-value {
355
- color: var(--color-text-4);
356
- background-color: var(--color-fill-1);
1515
+ .sd-calendar__cell--disabled {
357
1516
  cursor: not-allowed;
358
1517
  }
359
- .sd-calendar-panel .sd-calendar-footer-btn-wrapper {
360
- height: 38px;
361
- color: var(--color-text-1);
362
- line-height: 38px;
363
- text-align: center;
364
- border-top: 1px solid var(--color-neutral-3);
365
- cursor: pointer;
1518
+ .sd-calendar--view-has-time .sd-calendar__cell::before {
1519
+ position: absolute;
1520
+ background-image: linear-gradient(0deg, var(--sd-calendar-border-color) 0, transparent 1px var(--sd-calendar-time-cell-size));
1521
+ background-position: 0 1px;
1522
+ background-size: 100% var(--sd-calendar-time-cell-size);
1523
+ content: "";
1524
+ inset: 0;
366
1525
  }
367
- .sd-calendar-rtl {
368
- direction: rtl;
1526
+ .sd-calendar--view-has-time.sd-calendar--horizontal .sd-calendar__cell::before {
1527
+ background-image: linear-gradient(90deg, var(--sd-calendar-border-color) 0, transparent 1px var(--sd-calendar-time-cell-size));
1528
+ background-position: 0 1px;
1529
+ background-size: var(--sd-calendar-time-cell-size) 100%;
369
1530
  }
370
- .sd-calendar-rtl .sd-calendar-header-icon {
371
- margin-right: 0;
372
- margin-left: 12px;
373
- transform: scaleX(-1);
1531
+
1532
+ .sd-calendar__special-hours {
1533
+ position: absolute;
1534
+ right: 0;
1535
+ left: 0;
1536
+ display: flex;
1537
+ flex-direction: column;
1538
+ align-items: center;
1539
+ justify-content: center;
1540
+ pointer-events: none;
374
1541
  }
375
- .sd-calendar-rtl .sd-calendar-week-list-item {
376
- text-align: right;
1542
+ .sd-calendar--horizontal .sd-calendar__special-hours {
1543
+ inset: 0 auto;
1544
+ flex-direction: row;
377
1545
  }
378
- .sd-calendar-rtl.sd-calendar-mode-month:not(.sd-calendar-panel) .sd-calendar-cell:not(:last-child) {
379
- border-right: 0;
380
- border-left: 1px solid var(--color-neutral-3);
1546
+
1547
+ .sd-calendar__now-line {
1548
+ position: absolute;
1549
+ left: 0;
1550
+ z-index: 3;
1551
+ width: 100%;
1552
+ height: 0;
1553
+ border-color: rgba(255, 0, 0, 0.6);
1554
+ border-top: 1px solid;
381
1555
  }
382
- .sd-calendar-rtl .sd-calendar-header-value-year {
383
- margin-right: 0;
384
- margin-left: 8px;
1556
+ .sd-calendar__now-line::before {
1557
+ position: absolute;
1558
+ top: -6px;
1559
+ left: 0;
1560
+ border: 5px solid transparent;
1561
+ border-left-color: inherit;
1562
+ content: "";
385
1563
  }
386
- .sd-calendar-rtl .sd-calendar-header-value-month {
387
- margin-right: 0;
388
- margin-left: 32px;
1564
+ .sd-calendar__now-line span {
1565
+ position: absolute;
1566
+ right: 1px;
1567
+ font-size: 10px;
1568
+ opacity: 0.7;
1569
+ pointer-events: none;
1570
+ }
1571
+
1572
+ .sd-calendar__event-placeholder {
1573
+ position: absolute;
1574
+ right: 0;
1575
+ left: 0;
1576
+ padding-top: 2px;
1577
+ padding-left: 4px;
1578
+ font-size: 11px;
1579
+ line-height: 1;
1580
+ background-color: rgb(35, 181, 181);
1581
+ border-radius: 4px;
1582
+ }
1583
+ .sd-calendar--horizontal .sd-calendar__event-placeholder {
1584
+ inset: 0 auto;
1585
+ }
1586
+
1587
+ .sd-calendar__event {
1588
+ position: absolute;
1589
+ right: 0;
1590
+ left: 0;
1591
+ }
1592
+ .sd-calendar__event--resizing {
1593
+ z-index: 100;
1594
+ }
1595
+ .sd-calendar__event--dragging-ghost {
1596
+ z-index: 100;
1597
+ }
1598
+ .sd-calendar__event--dragging-original {
1599
+ opacity: 0;
1600
+ transition: opacity 0.1s;
1601
+ }
1602
+ .sd-calendar__scrollable--month-view .sd-calendar__event, .sd-calendar__all-day .sd-calendar__event {
1603
+ position: relative;
1604
+ }
1605
+ .sd-calendar__event-resizer {
1606
+ position: absolute;
1607
+ height: 8px;
1608
+ background-color: var(--sd-calendar-contrast-color);
1609
+ cursor: ns-resize;
1610
+ opacity: 0.1;
1611
+ transition: 0.25s;
1612
+ inset: auto 0 0;
1613
+ }
1614
+ .sd-calendar__event-resizer:hover {
1615
+ opacity: 0.25;
1616
+ }
1617
+ .sd-calendar--horizontal .sd-calendar__event-resizer, [class*=-calendar--horizontal] .sd-calendar__event-resizer {
1618
+ width: 8px;
1619
+ height: auto;
1620
+ cursor: ew-resize;
1621
+ inset: 0 0 0 auto;
1622
+ }
1623
+
1624
+ [class*=-calendar-delete-btn-enter-active] {
1625
+ transition: 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1626
+ }
1627
+
1628
+ [class*=-calendar-delete-btn-enter-from] {
1629
+ transform: scale(0) rotate(-90deg);
1630
+ }
1631
+
1632
+ [class*=-calendar-delete-btn-enter-to] {
1633
+ transform: scale(1);
1634
+ }
1635
+
1636
+ [class*=-calendar-delete-btn-leave-active] {
1637
+ transform: scale(0);
1638
+ transition: 0.3s ease-in-out;
389
1639
  }