date-picker-day.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. /* mixins & extensions */
  2. @keyframes in {
  3. 0% {
  4. opacity: 0;
  5. }
  6. 100% {
  7. opacity: 1;
  8. }
  9. }
  10. @keyframes in-down {
  11. 0% {
  12. opacity: 0;
  13. transform: translate3D(0, -5px, 0);
  14. }
  15. 100% {
  16. opacity: 1;
  17. transform: translate3D(0, 0, 0);
  18. }
  19. }
  20. @keyframes in-up {
  21. 0% {
  22. opacity: 0;
  23. transform: translate3D(0, 5px, 0);
  24. }
  25. 100% {
  26. opacity: 1;
  27. transform: translate3D(0, 0, 0);
  28. }
  29. }
  30. @keyframes in-scale {
  31. 0% {
  32. opacity: 0;
  33. transform: scale3D(0.95, 0.95, 1);
  34. }
  35. 100% {
  36. opacity: 1;
  37. transform: scale3D(1, 1, 1);
  38. }
  39. }
  40. :root {
  41. --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
  42. --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
  43. --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
  44. --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
  45. --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
  46. }
  47. .calcite-animate {
  48. opacity: 0;
  49. animation-fill-mode: both;
  50. animation-duration: var(--calcite-animation-timing);
  51. }
  52. .calcite-animate__in {
  53. animation-name: in;
  54. }
  55. .calcite-animate__in-down {
  56. animation-name: in-down;
  57. }
  58. .calcite-animate__in-up {
  59. animation-name: in-up;
  60. }
  61. .calcite-animate__in-scale {
  62. animation-name: in-scale;
  63. }
  64. @media (prefers-reduced-motion: reduce) {
  65. :root {
  66. --calcite-internal-duration-factor: 0.01;
  67. }
  68. }
  69. /**
  70. * Currently only used in Checkbox.
  71. */
  72. :root {
  73. --calcite-floating-ui-transition: var(--calcite-animation-timing);
  74. }
  75. :host([hidden]) {
  76. display: none;
  77. }
  78. :host([disabled]) {
  79. pointer-events: none;
  80. cursor: default;
  81. -webkit-user-select: none;
  82. user-select: none;
  83. opacity: var(--calcite-ui-opacity-disabled);
  84. }
  85. :host {
  86. display: flex;
  87. min-inline-size: 0px;
  88. cursor: pointer;
  89. justify-content: center;
  90. color: var(--calcite-ui-text-3);
  91. inline-size: 14.2857142857%;
  92. }
  93. :host([disabled]) ::slotted([calcite-hydrated][disabled]),
  94. :host([disabled]) [calcite-hydrated][disabled] {
  95. /* prevent opacity stacking */
  96. opacity: 1;
  97. }
  98. .day-v-wrapper {
  99. flex: 1 1 auto;
  100. }
  101. .day-wrapper {
  102. display: flex;
  103. flex-direction: column;
  104. align-items: center;
  105. }
  106. .day {
  107. display: flex;
  108. align-items: center;
  109. justify-content: center;
  110. border-radius: 9999px;
  111. font-size: var(--calcite-font-size--2);
  112. line-height: 1rem;
  113. line-height: 1;
  114. color: var(--calcite-ui-text-3);
  115. opacity: var(--calcite-ui-opacity-disabled);
  116. outline-color: transparent;
  117. transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
  118. background: none;
  119. box-shadow: 0 0 0 2px transparent;
  120. }
  121. .text {
  122. margin-block: 1px 0px;
  123. margin-inline-start: 0px;
  124. }
  125. :host([scale=s]) .day-v-wrapper {
  126. padding-block: 0.125rem;
  127. }
  128. :host([scale=s]) .day-wrapper {
  129. padding: 0px;
  130. }
  131. :host([scale=s]) .day {
  132. block-size: 27px;
  133. inline-size: 27px;
  134. font-size: var(--calcite-font-size--2);
  135. }
  136. :host([scale=m]) .day-v-wrapper {
  137. padding-block: 0.25rem;
  138. }
  139. :host([scale=m]) .day-wrapper {
  140. padding-inline: 0.25rem;
  141. }
  142. :host([scale=m]) .day {
  143. block-size: 33px;
  144. inline-size: 33px;
  145. font-size: var(--calcite-font-size--1);
  146. }
  147. :host([scale=l]) .day-v-wrapper {
  148. padding-block: 0.25rem;
  149. }
  150. :host([scale=l]) .day-wrapper {
  151. padding-inline: 0.25rem;
  152. }
  153. :host([scale=l]) .day {
  154. block-size: 43px;
  155. inline-size: 43px;
  156. font-size: var(--calcite-font-size-0);
  157. }
  158. :host([current-month]) .day {
  159. opacity: 1;
  160. }
  161. :host(:hover:not([disabled])) .day,
  162. :host([active]:not([range])) .day {
  163. background-color: var(--calcite-ui-foreground-2);
  164. color: var(--calcite-ui-text-1);
  165. }
  166. :host(:focus),
  167. :host([active]) {
  168. outline: 2px solid transparent;
  169. outline-offset: 2px;
  170. }
  171. :host(:focus:not([disabled])) .day {
  172. outline: 2px solid var(--calcite-ui-brand);
  173. outline-offset: 2px;
  174. box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
  175. }
  176. :host([selected]) .day {
  177. font-weight: var(--calcite-font-weight-medium);
  178. background-color: var(--calcite-ui-brand) !important;
  179. color: var(--calcite-ui-foreground-1) !important;
  180. }
  181. :host([range][selected]) .day-wrapper {
  182. background-color: var(--calcite-ui-foreground-current);
  183. }
  184. :host([start-of-range]) .day-wrapper {
  185. border-start-start-radius: 40%;
  186. border-end-start-radius: 40%;
  187. }
  188. :host([end-of-range]) .day-wrapper {
  189. border-start-end-radius: 40%;
  190. border-end-end-radius: 40%;
  191. }
  192. :host([start-of-range]) :not(.calcite--rtl) .day-wrapper {
  193. box-shadow: inset 4px 0 var(--calcite-ui-foreground-1);
  194. }
  195. :host([start-of-range]) .calcite--rtl .day-wrapper {
  196. box-shadow: inset -4px 0 var(--calcite-ui-foreground-1);
  197. }
  198. :host([start-of-range]) .day {
  199. opacity: 1;
  200. }
  201. :host([end-of-range]) :not(.calcite--rtl) .day-wrapper {
  202. box-shadow: inset -4px 0 var(--calcite-ui-foreground-1);
  203. }
  204. :host([end-of-range]) .calcite--rtl .day-wrapper {
  205. box-shadow: inset 4px 0 var(--calcite-ui-foreground-1);
  206. }
  207. :host([end-of-range]) .day {
  208. opacity: 1;
  209. }
  210. :host([start-of-range]:not(:focus)) :not(.calcite--rtl) .day {
  211. box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
  212. }
  213. :host([start-of-range]:not(:focus)) .calcite--rtl .day {
  214. box-shadow: 0 0 0 -2px var(--calcite-ui-foreground-1);
  215. }
  216. :host([end-of-range]:not(:focus)) :not(.calcite--rtl) .day {
  217. box-shadow: 0 0 0 -2px var(--calcite-ui-foreground-1);
  218. }
  219. :host([end-of-range]:not(:focus)) .calcite--rtl .day {
  220. box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
  221. }
  222. :host([start-of-range][scale=l]) :not(.calcite--rtl) .day-wrapper {
  223. box-shadow: inset 8px 0 var(--calcite-ui-foreground-1);
  224. }
  225. :host([start-of-range][scale=l]) .calcite--rtl .day-wrapper {
  226. box-shadow: inset -8px 0 var(--calcite-ui-foreground-1);
  227. }
  228. :host([end-of-range][scale=l]) :not(.calcite--rtl) .day-wrapper {
  229. box-shadow: inset -8px 0 var(--calcite-ui-foreground-1);
  230. }
  231. :host([end-of-range][scale=l]) .calcite--rtl .day-wrapper {
  232. box-shadow: inset 8px 0 var(--calcite-ui-foreground-1);
  233. }
  234. :host([highlighted]) .day-wrapper {
  235. background-color: var(--calcite-ui-foreground-current);
  236. }
  237. :host([highlighted]) .day-wrapper .day {
  238. color: var(--calcite-ui-text-1);
  239. }
  240. :host([highlighted]:not([active]:focus)) .day {
  241. border-radius: 0px;
  242. color: var(--calcite-ui-text-1);
  243. }
  244. :host([range-hover]:not([selected])) .day-wrapper {
  245. background-color: var(--calcite-ui-foreground-2);
  246. }
  247. :host([range-hover]:not([selected])) .day {
  248. border-radius: 0px;
  249. }
  250. :host([start-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper {
  251. background-image: linear-gradient(to left, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
  252. border-radius: 0px;
  253. --tw-shadow: 0 0 #0000;
  254. --tw-shadow-colored: 0 0 #0000;
  255. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  256. }
  257. :host([start-of-range][range-hover]) .calcite--rtl .day-wrapper {
  258. background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
  259. border-radius: 0px;
  260. --tw-shadow: 0 0 #0000;
  261. --tw-shadow-colored: 0 0 #0000;
  262. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  263. }
  264. :host([end-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper {
  265. background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
  266. border-radius: 0px;
  267. --tw-shadow: 0 0 #0000;
  268. --tw-shadow-colored: 0 0 #0000;
  269. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  270. }
  271. :host([end-of-range][range-hover]) .calcite--rtl .day-wrapper {
  272. background-image: linear-gradient(to left, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
  273. border-radius: 0px;
  274. --tw-shadow: 0 0 #0000;
  275. --tw-shadow-colored: 0 0 #0000;
  276. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  277. }
  278. :host(:hover[end-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,
  279. :host(:hover[start-of-range][range-hover]) .calcite--rtl .day-wrapper {
  280. background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));
  281. border-radius: 0px;
  282. --tw-shadow: 0 0 #0000;
  283. --tw-shadow-colored: 0 0 #0000;
  284. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  285. }
  286. :host(:hover[start-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,
  287. :host(:hover[end-of-range][range-hover]) .calcite--rtl .day-wrapper {
  288. background-image: linear-gradient(to left, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));
  289. border-radius: 0px;
  290. --tw-shadow: 0 0 #0000;
  291. --tw-shadow-colored: 0 0 #0000;
  292. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  293. }
  294. :host(:hover[range-hover]:not([selected]).focused--start) :not(.calcite--rtl) .day-wrapper {
  295. background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
  296. }
  297. :host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day-wrapper {
  298. background-image: linear-gradient(to right, var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current));
  299. }
  300. :host(:hover[range-hover]:not([selected]).focused--start) .day {
  301. border-radius: 9999px;
  302. opacity: 1;
  303. box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
  304. }
  305. :host(:hover[range-hover]:not([selected]).focused--end) :not(.calcite--rtl) .day-wrapper {
  306. background-image: linear-gradient(to right, var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current));
  307. }
  308. :host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day-wrapper {
  309. background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
  310. }
  311. :host(:hover[range-hover]:not([selected]).focused--end) .day {
  312. border-radius: 9999px;
  313. opacity: 1;
  314. box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
  315. }
  316. :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) :not(.calcite--rtl) .day-wrapper,
  317. :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day-wrapper {
  318. background-image: linear-gradient(to right, var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
  319. }
  320. :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) :not(.calcite--rtl) .day,
  321. :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day {
  322. border-radius: 9999px;
  323. opacity: 1;
  324. box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
  325. }
  326. :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) :not(.calcite--rtl) .day-wrapper,
  327. :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day-wrapper {
  328. background-image: linear-gradient(to right, var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));
  329. }
  330. :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) :not(.calcite--rtl) .day,
  331. :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day {
  332. border-radius: 9999px;
  333. opacity: 1;
  334. box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
  335. }
  336. :host(:hover[start-of-range].hover--inside-range.focused--end) .day-wrapper,
  337. :host(:hover[end-of-range].hover--inside-range.focused--start) .day-wrapper {
  338. background-image: none;
  339. }
  340. :host([start-of-range].hover--inside-range.focused--end) .day-wrapper,
  341. :host([end-of-range].hover--inside-range.focused--start) .day-wrapper {
  342. background-color: var(--calcite-ui-foreground-2);
  343. }
  344. :host([highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,
  345. :host([range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
  346. :host([highlighted]:first-child) .calcite--rtl .day-wrapper,
  347. :host([range-hover]:first-child) .calcite--rtl .day-wrapper {
  348. box-shadow: inset -4px 0px 0px 0px var(--calcite-ui-foreground-1);
  349. }
  350. :host([highlighted]:first-child) :not(.calcite--rtl) .day-wrapper,
  351. :host([range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,
  352. :host([highlighted]:last-child) .calcite--rtl .day-wrapper,
  353. :host([range-hover]:last-child) .calcite--rtl .day-wrapper {
  354. box-shadow: inset 4px 0px 0px 0px var(--calcite-ui-foreground-1);
  355. }
  356. :host([scale=s][highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,
  357. :host([scale=s][range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
  358. :host([scale=s][highlighted]:first-child) .calcite--rtl .day-wrapper,
  359. :host([scale=s][range-hover]:first-child) .calcite--rtl .day-wrapper {
  360. box-shadow: inset -1px 0px 0px 0px var(--calcite-ui-foreground-1);
  361. }
  362. :host([scale=s][highlighted]:first-child) :not(.calcite--rtl) .day-wrapper,
  363. :host([scale=s][range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,
  364. :host([scale=s][highlighted]:last-child) .calcite--rtl .day-wrapper,
  365. :host([scale=s][range-hover]:last-child) .calcite--rtl .day-wrapper {
  366. box-shadow: inset 1px 0px 0px 0px var(--calcite-ui-foreground-1);
  367. }
  368. :host([scale=l][highlighted]:first-child) :not(.calcite--rtl) .day-wrapper,
  369. :host([scale=l][range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,
  370. :host([scale=l][highlighted]:last-child) .calcite--rtl .day-wrapper,
  371. :host([scale=l][range-hover]:last-child) .calcite--rtl .day-wrapper {
  372. box-shadow: inset 6px 0px 0px 0px var(--calcite-ui-foreground-1);
  373. }
  374. :host([highlighted]:first-child) .day-wrapper,
  375. :host([range-hover]:first-child) .day-wrapper {
  376. border-start-start-radius: 45%;
  377. border-end-start-radius: 45%;
  378. }
  379. :host([highlighted]:last-child) .day-wrapper,
  380. :host([range-hover]:last-child) .day-wrapper {
  381. border-start-end-radius: 45%;
  382. border-end-end-radius: 45%;
  383. }
  384. :host([scale=l][highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,
  385. :host([scale=l][range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
  386. :host([scale=l][highlighted]:first-child) .calcite--rtl .day-wrapper,
  387. :host([scale=l][range-hover]:first-child) .calcite--rtl .day-wrapper {
  388. box-shadow: inset -6px 0px 0px 0px var(--calcite-ui-foreground-1);
  389. }
  390. @media (forced-colors: active) {
  391. :host(:hover:not([disabled])) .day,
  392. :host([active]:not([range])) .day {
  393. border-radius: 0px;
  394. }
  395. :host([selected]) {
  396. outline: 2px solid canvasText;
  397. }
  398. :host([selected]) .day {
  399. border-radius: 0px;
  400. background-color: highlight;
  401. }
  402. :host([range][selected]) .day-wrapper,
  403. :host([highlighted]) .day-wrapper,
  404. :host([range-hover]:not([selected])) .day-wrapper {
  405. background-color: highlight;
  406. }
  407. :host([range][selected][start-of-range]) .day-wrapper,
  408. :host([range][selected][end-of-range]) .day-wrapper {
  409. background-color: canvas;
  410. }
  411. }