snice 2.1.4 → 2.2.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 (370) hide show
  1. package/dist/components/accordion/snice-accordion-item.d.ts +25 -0
  2. package/dist/components/accordion/snice-accordion-item.js +255 -0
  3. package/dist/components/accordion/snice-accordion-item.js.map +1 -0
  4. package/dist/components/accordion/snice-accordion.d.ts +28 -0
  5. package/dist/components/accordion/snice-accordion.js +206 -0
  6. package/dist/components/accordion/snice-accordion.js.map +1 -0
  7. package/dist/components/accordion/snice-accordion.types.d.ts +29 -0
  8. package/dist/components/alert/snice-alert.d.ts +26 -0
  9. package/dist/components/alert/snice-alert.js +180 -0
  10. package/dist/components/alert/snice-alert.js.map +1 -0
  11. package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts} +8 -9
  12. package/dist/components/avatar/snice-avatar.d.ts +24 -0
  13. package/dist/components/avatar/snice-avatar.js +180 -0
  14. package/dist/components/avatar/snice-avatar.js.map +1 -0
  15. package/dist/components/avatar/snice-avatar.types.d.ts +12 -0
  16. package/dist/components/badge/snice-badge.d.ts +25 -0
  17. package/dist/components/badge/snice-badge.js +169 -0
  18. package/dist/components/badge/snice-badge.js.map +1 -0
  19. package/{components/badge/snice-badge.types.ts → dist/components/badge/snice-badge.types.d.ts} +11 -12
  20. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +27 -0
  21. package/dist/components/breadcrumbs/snice-breadcrumbs.js +214 -0
  22. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +1 -0
  23. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +23 -0
  24. package/dist/components/breadcrumbs/snice-crumb.d.ts +9 -0
  25. package/dist/components/breadcrumbs/snice-crumb.js +63 -0
  26. package/dist/components/breadcrumbs/snice-crumb.js.map +1 -0
  27. package/dist/components/button/snice-button.d.ts +32 -0
  28. package/dist/components/button/snice-button.js +232 -0
  29. package/dist/components/button/snice-button.js.map +1 -0
  30. package/dist/components/button/snice-button.types.d.ts +23 -0
  31. package/dist/components/card/snice-card.d.ts +19 -0
  32. package/dist/components/card/snice-card.js +136 -0
  33. package/dist/components/card/snice-card.js.map +1 -0
  34. package/{components/card/snice-card.types.ts → dist/components/card/snice-card.types.d.ts} +6 -7
  35. package/dist/components/checkbox/snice-checkbox.d.ts +34 -0
  36. package/dist/components/checkbox/snice-checkbox.js +286 -0
  37. package/dist/components/checkbox/snice-checkbox.js.map +1 -0
  38. package/dist/components/checkbox/snice-checkbox.types.d.ts +20 -0
  39. package/dist/components/chip/snice-chip.d.ts +28 -0
  40. package/dist/components/chip/snice-chip.js +199 -0
  41. package/dist/components/chip/snice-chip.js.map +1 -0
  42. package/dist/components/chip/snice-chip.types.d.ts +14 -0
  43. package/dist/components/date-picker/snice-date-picker.d.ts +82 -0
  44. package/dist/components/date-picker/snice-date-picker.js +847 -0
  45. package/dist/components/date-picker/snice-date-picker.js.map +1 -0
  46. package/dist/components/date-picker/snice-date-picker.types.d.ts +71 -0
  47. package/dist/components/divider/snice-divider.d.ts +17 -0
  48. package/dist/components/divider/snice-divider.js +122 -0
  49. package/dist/components/divider/snice-divider.js.map +1 -0
  50. package/{components/divider/snice-divider.types.ts → dist/components/divider/snice-divider.types.d.ts} +9 -10
  51. package/dist/components/drawer/snice-drawer.d.ts +37 -0
  52. package/dist/components/drawer/snice-drawer.js +337 -0
  53. package/dist/components/drawer/snice-drawer.js.map +1 -0
  54. package/dist/components/drawer/snice-drawer.types.d.ts +16 -0
  55. package/dist/components/input/snice-input.d.ts +65 -0
  56. package/dist/components/input/snice-input.js +567 -0
  57. package/dist/components/input/snice-input.js.map +1 -0
  58. package/dist/components/input/snice-input.types.d.ts +53 -0
  59. package/dist/components/layout/snice-layout-blog.d.ts +4 -0
  60. package/dist/components/layout/snice-layout-blog.js +67 -0
  61. package/dist/components/layout/snice-layout-blog.js.map +1 -0
  62. package/dist/components/layout/snice-layout-card.d.ts +6 -0
  63. package/dist/components/layout/snice-layout-card.js +64 -0
  64. package/dist/components/layout/snice-layout-card.js.map +1 -0
  65. package/dist/components/layout/snice-layout-centered.d.ts +5 -0
  66. package/dist/components/layout/snice-layout-centered.js +48 -0
  67. package/dist/components/layout/snice-layout-centered.js.map +1 -0
  68. package/dist/components/layout/snice-layout-dashboard.d.ts +4 -0
  69. package/dist/components/layout/snice-layout-dashboard.js +64 -0
  70. package/dist/components/layout/snice-layout-dashboard.js.map +1 -0
  71. package/dist/components/layout/snice-layout-fullscreen.d.ts +5 -0
  72. package/dist/components/layout/snice-layout-fullscreen.js +60 -0
  73. package/dist/components/layout/snice-layout-fullscreen.js.map +1 -0
  74. package/dist/components/layout/snice-layout-landing.d.ts +4 -0
  75. package/dist/components/layout/snice-layout-landing.js +66 -0
  76. package/dist/components/layout/snice-layout-landing.js.map +1 -0
  77. package/dist/components/layout/snice-layout-minimal.d.ts +4 -0
  78. package/dist/components/layout/snice-layout-minimal.js +38 -0
  79. package/dist/components/layout/snice-layout-minimal.js.map +1 -0
  80. package/dist/components/layout/snice-layout-sidebar.d.ts +5 -0
  81. package/dist/components/layout/snice-layout-sidebar.js +74 -0
  82. package/dist/components/layout/snice-layout-sidebar.js.map +1 -0
  83. package/dist/components/layout/snice-layout-split.d.ts +6 -0
  84. package/dist/components/layout/snice-layout-split.js +58 -0
  85. package/dist/components/layout/snice-layout-split.js.map +1 -0
  86. package/dist/components/layout/snice-layout.d.ts +4 -0
  87. package/dist/components/layout/snice-layout.js +54 -0
  88. package/dist/components/layout/snice-layout.js.map +1 -0
  89. package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts} +1 -3
  90. package/dist/components/login/snice-login.d.ts +44 -0
  91. package/dist/components/login/snice-login.js +382 -0
  92. package/dist/components/login/snice-login.js.map +1 -0
  93. package/dist/components/login/snice-login.types.d.ts +26 -0
  94. package/dist/components/modal/snice-modal.d.ts +32 -0
  95. package/dist/components/modal/snice-modal.js +280 -0
  96. package/dist/components/modal/snice-modal.js.map +1 -0
  97. package/dist/components/modal/snice-modal.types.d.ts +18 -0
  98. package/dist/components/pagination/snice-pagination.d.ts +26 -0
  99. package/dist/components/pagination/snice-pagination.js +373 -0
  100. package/dist/components/pagination/snice-pagination.js.map +1 -0
  101. package/dist/components/pagination/snice-pagination.types.d.ts +18 -0
  102. package/dist/components/progress/snice-progress.d.ts +35 -0
  103. package/dist/components/progress/snice-progress.js +305 -0
  104. package/dist/components/progress/snice-progress.js.map +1 -0
  105. package/dist/components/progress/snice-progress.types.d.ts +18 -0
  106. package/dist/components/radio/snice-radio.d.ts +33 -0
  107. package/dist/components/radio/snice-radio.js +279 -0
  108. package/dist/components/radio/snice-radio.js.map +1 -0
  109. package/dist/components/radio/snice-radio.types.d.ts +19 -0
  110. package/dist/components/select/snice-option.d.ts +17 -0
  111. package/dist/components/select/snice-option.js +88 -0
  112. package/dist/components/select/snice-option.js.map +1 -0
  113. package/{components/select/snice-option.types.ts → dist/components/select/snice-option.types.d.ts} +8 -8
  114. package/dist/components/select/snice-select.d.ts +89 -0
  115. package/dist/components/select/snice-select.js +864 -0
  116. package/dist/components/select/snice-select.js.map +1 -0
  117. package/dist/components/select/snice-select.types.d.ts +49 -0
  118. package/dist/components/skeleton/snice-skeleton.d.ts +16 -0
  119. package/dist/components/skeleton/snice-skeleton.js +166 -0
  120. package/dist/components/skeleton/snice-skeleton.js.map +1 -0
  121. package/{components/skeleton/snice-skeleton.types.ts → dist/components/skeleton/snice-skeleton.types.d.ts} +7 -8
  122. package/dist/components/snice-cell-C8aBfN72.js +4 -0
  123. package/dist/components/snice-cell-C8aBfN72.js.map +1 -0
  124. package/dist/components/switch/snice-switch.d.ts +38 -0
  125. package/dist/components/switch/snice-switch.js +305 -0
  126. package/dist/components/switch/snice-switch.js.map +1 -0
  127. package/dist/components/switch/snice-switch.types.d.ts +21 -0
  128. package/dist/components/symbols.d.ts +1 -0
  129. package/dist/components/symbols.js +22 -0
  130. package/dist/components/symbols.js.map +1 -0
  131. package/dist/components/table/snice-cell-boolean.d.ts +21 -0
  132. package/dist/components/table/snice-cell-boolean.js +164 -0
  133. package/dist/components/table/snice-cell-boolean.js.map +1 -0
  134. package/dist/components/table/snice-cell-date.d.ts +24 -0
  135. package/dist/components/table/snice-cell-date.js +253 -0
  136. package/dist/components/table/snice-cell-date.js.map +1 -0
  137. package/dist/components/table/snice-cell-duration.d.ts +16 -0
  138. package/dist/components/table/snice-cell-duration.js +130 -0
  139. package/dist/components/table/snice-cell-duration.js.map +1 -0
  140. package/dist/components/table/snice-cell-filesize.d.ts +16 -0
  141. package/dist/components/table/snice-cell-filesize.js +126 -0
  142. package/dist/components/table/snice-cell-filesize.js.map +1 -0
  143. package/dist/components/table/snice-cell-number.d.ts +23 -0
  144. package/dist/components/table/snice-cell-number.js +215 -0
  145. package/dist/components/table/snice-cell-number.js.map +1 -0
  146. package/dist/components/table/snice-cell-progress.d.ts +17 -0
  147. package/dist/components/table/snice-cell-progress.js +121 -0
  148. package/dist/components/table/snice-cell-progress.js.map +1 -0
  149. package/dist/components/table/snice-cell-rating.d.ts +17 -0
  150. package/dist/components/table/snice-cell-rating.js +120 -0
  151. package/dist/components/table/snice-cell-rating.js.map +1 -0
  152. package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
  153. package/dist/components/table/snice-cell-sparkline.js +306 -0
  154. package/dist/components/table/snice-cell-sparkline.js.map +1 -0
  155. package/dist/components/table/snice-cell-text.d.ts +19 -0
  156. package/dist/components/table/snice-cell-text.js +161 -0
  157. package/dist/components/table/snice-cell-text.js.map +1 -0
  158. package/dist/components/table/snice-cell.d.ts +32 -0
  159. package/dist/components/table/snice-cell.js +458 -0
  160. package/dist/components/table/snice-cell.js.map +1 -0
  161. package/dist/components/table/snice-column.d.ts +62 -0
  162. package/dist/components/table/snice-column.js +506 -0
  163. package/dist/components/table/snice-column.js.map +1 -0
  164. package/dist/components/table/snice-header.d.ts +33 -0
  165. package/dist/components/table/snice-header.js +289 -0
  166. package/dist/components/table/snice-header.js.map +1 -0
  167. package/dist/components/table/snice-progress.d.ts +10 -0
  168. package/dist/components/table/snice-progress.js +105 -0
  169. package/dist/components/table/snice-progress.js.map +1 -0
  170. package/dist/components/table/snice-rating.d.ts +9 -0
  171. package/dist/components/table/snice-rating.js +81 -0
  172. package/dist/components/table/snice-rating.js.map +1 -0
  173. package/dist/components/table/snice-row.d.ts +43 -0
  174. package/dist/components/table/snice-row.js +353 -0
  175. package/dist/components/table/snice-row.js.map +1 -0
  176. package/dist/components/table/snice-table.d.ts +69 -0
  177. package/dist/components/table/snice-table.js +792 -0
  178. package/dist/components/table/snice-table.js.map +1 -0
  179. package/dist/components/table/snice-table.types.d.ts +137 -0
  180. package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
  181. package/dist/components/tabs/snice-tab-panel.js +87 -0
  182. package/dist/components/tabs/snice-tab-panel.js.map +1 -0
  183. package/dist/components/tabs/snice-tab.d.ts +13 -0
  184. package/dist/components/tabs/snice-tab.js +98 -0
  185. package/dist/components/tabs/snice-tab.js.map +1 -0
  186. package/dist/components/tabs/snice-tabs.d.ts +34 -0
  187. package/dist/components/tabs/snice-tabs.js +375 -0
  188. package/dist/components/tabs/snice-tabs.js.map +1 -0
  189. package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
  190. package/dist/components/toast/snice-toast-container.d.ts +25 -0
  191. package/dist/components/toast/snice-toast-container.js +252 -0
  192. package/dist/components/toast/snice-toast-container.js.map +1 -0
  193. package/dist/components/toast/snice-toast.d.ts +23 -0
  194. package/dist/components/toast/snice-toast.js +321 -0
  195. package/dist/components/toast/snice-toast.js.map +1 -0
  196. package/dist/components/toast/snice-toast.types.d.ts +30 -0
  197. package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
  198. package/dist/components/tooltip/snice-tooltip.js +644 -0
  199. package/dist/components/tooltip/snice-tooltip.js.map +1 -0
  200. package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
  201. package/dist/components/transitions.d.ts +11 -0
  202. package/dist/components/transitions.js +72 -0
  203. package/dist/components/transitions.js.map +1 -0
  204. package/dist/index.cjs +16 -20
  205. package/dist/index.cjs.map +1 -1
  206. package/dist/index.cjs.min.map +1 -1
  207. package/dist/index.esm.js +16 -20
  208. package/dist/index.esm.js.map +1 -1
  209. package/dist/index.esm.min.js +3 -3
  210. package/dist/index.esm.min.js.map +1 -1
  211. package/dist/index.iife.js +16 -20
  212. package/dist/index.iife.js.map +1 -1
  213. package/dist/index.iife.min.js +3 -3
  214. package/dist/index.iife.min.js.map +1 -1
  215. package/dist/symbols.esm.js +1 -1
  216. package/dist/transitions.esm.js +1 -1
  217. package/package.json +10 -6
  218. package/components/accordion/demo.html +0 -403
  219. package/components/accordion/snice-accordion-item.css +0 -85
  220. package/components/accordion/snice-accordion-item.ts +0 -226
  221. package/components/accordion/snice-accordion.css +0 -31
  222. package/components/accordion/snice-accordion.ts +0 -182
  223. package/components/accordion/snice-accordion.types.ts +0 -32
  224. package/components/alert/demo.html +0 -445
  225. package/components/alert/snice-alert.css +0 -195
  226. package/components/alert/snice-alert.ts +0 -141
  227. package/components/avatar/demo.html +0 -598
  228. package/components/avatar/snice-avatar.css +0 -131
  229. package/components/avatar/snice-avatar.ts +0 -136
  230. package/components/avatar/snice-avatar.types.ts +0 -13
  231. package/components/badge/demo.html +0 -523
  232. package/components/badge/snice-badge.css +0 -161
  233. package/components/badge/snice-badge.ts +0 -117
  234. package/components/breadcrumbs/demo.html +0 -404
  235. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  236. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  237. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  238. package/components/breadcrumbs/snice-crumb.ts +0 -26
  239. package/components/button/demo.html +0 -42
  240. package/components/button/snice-button.css +0 -230
  241. package/components/button/snice-button.ts +0 -169
  242. package/components/button/snice-button.types.ts +0 -25
  243. package/components/card/demo.html +0 -525
  244. package/components/card/snice-card.css +0 -140
  245. package/components/card/snice-card.ts +0 -102
  246. package/components/checkbox/demo.html +0 -253
  247. package/components/checkbox/snice-checkbox.css +0 -164
  248. package/components/checkbox/snice-checkbox.ts +0 -223
  249. package/components/checkbox/snice-checkbox.types.ts +0 -22
  250. package/components/chip/demo.html +0 -383
  251. package/components/chip/snice-chip.css +0 -195
  252. package/components/chip/snice-chip.ts +0 -139
  253. package/components/chip/snice-chip.types.ts +0 -15
  254. package/components/date-picker/README.md +0 -233
  255. package/components/date-picker/demo.html +0 -191
  256. package/components/date-picker/snice-date-picker.css +0 -330
  257. package/components/date-picker/snice-date-picker.ts +0 -777
  258. package/components/date-picker/snice-date-picker.types.ts +0 -83
  259. package/components/divider/demo.html +0 -233
  260. package/components/divider/snice-divider.css +0 -155
  261. package/components/divider/snice-divider.ts +0 -69
  262. package/components/drawer/demo.html +0 -328
  263. package/components/drawer/snice-drawer.css +0 -476
  264. package/components/drawer/snice-drawer.ts +0 -287
  265. package/components/drawer/snice-drawer.types.ts +0 -17
  266. package/components/global.d.ts +0 -14
  267. package/components/input/demo.html +0 -303
  268. package/components/input/snice-input.css +0 -257
  269. package/components/input/snice-input.ts +0 -442
  270. package/components/input/snice-input.types.ts +0 -59
  271. package/components/input/test.html +0 -77
  272. package/components/layout/README.md +0 -260
  273. package/components/layout/demo.html +0 -538
  274. package/components/layout/snice-layout-blog.css +0 -129
  275. package/components/layout/snice-layout-blog.ts +0 -48
  276. package/components/layout/snice-layout-card.css +0 -104
  277. package/components/layout/snice-layout-card.ts +0 -35
  278. package/components/layout/snice-layout-centered.css +0 -51
  279. package/components/layout/snice-layout-centered.ts +0 -22
  280. package/components/layout/snice-layout-dashboard.css +0 -98
  281. package/components/layout/snice-layout-dashboard.ts +0 -45
  282. package/components/layout/snice-layout-fullscreen.css +0 -72
  283. package/components/layout/snice-layout-fullscreen.ts +0 -34
  284. package/components/layout/snice-layout-landing.css +0 -92
  285. package/components/layout/snice-layout-landing.ts +0 -47
  286. package/components/layout/snice-layout-minimal.css +0 -16
  287. package/components/layout/snice-layout-minimal.ts +0 -19
  288. package/components/layout/snice-layout-sidebar.css +0 -117
  289. package/components/layout/snice-layout-sidebar.ts +0 -48
  290. package/components/layout/snice-layout-split.css +0 -103
  291. package/components/layout/snice-layout-split.ts +0 -29
  292. package/components/layout/snice-layout.css +0 -72
  293. package/components/layout/snice-layout.ts +0 -35
  294. package/components/login/demo-auth-controller.ts +0 -185
  295. package/components/login/demo.html +0 -470
  296. package/components/login/snice-login.css +0 -204
  297. package/components/login/snice-login.ts +0 -326
  298. package/components/login/snice-login.types.ts +0 -29
  299. package/components/modal/demo.html +0 -291
  300. package/components/modal/snice-modal.css +0 -203
  301. package/components/modal/snice-modal.ts +0 -233
  302. package/components/modal/snice-modal.types.ts +0 -21
  303. package/components/pagination/demo.html +0 -395
  304. package/components/pagination/snice-pagination.ts +0 -333
  305. package/components/pagination/snice-pagination.types.ts +0 -21
  306. package/components/progress/demo.html +0 -510
  307. package/components/progress/snice-progress.css +0 -267
  308. package/components/progress/snice-progress.ts +0 -247
  309. package/components/progress/snice-progress.types.ts +0 -19
  310. package/components/radio/demo.html +0 -287
  311. package/components/radio/snice-radio.css +0 -171
  312. package/components/radio/snice-radio.ts +0 -218
  313. package/components/radio/snice-radio.types.ts +0 -21
  314. package/components/select/demo.html +0 -511
  315. package/components/select/snice-option.ts +0 -52
  316. package/components/select/snice-select.css +0 -392
  317. package/components/select/snice-select.ts +0 -796
  318. package/components/select/snice-select.types.ts +0 -55
  319. package/components/skeleton/demo.html +0 -514
  320. package/components/skeleton/snice-skeleton.css +0 -109
  321. package/components/skeleton/snice-skeleton.ts +0 -126
  322. package/components/switch/demo.html +0 -284
  323. package/components/switch/snice-switch.css +0 -221
  324. package/components/switch/snice-switch.ts +0 -229
  325. package/components/switch/snice-switch.types.ts +0 -23
  326. package/components/symbols.ts +0 -23
  327. package/components/table/demo-table-controller.ts +0 -100
  328. package/components/table/demo.html +0 -480
  329. package/components/table/snice-cell-boolean.ts +0 -112
  330. package/components/table/snice-cell-date.ts +0 -210
  331. package/components/table/snice-cell-duration.ts +0 -91
  332. package/components/table/snice-cell-filesize.ts +0 -90
  333. package/components/table/snice-cell-number.ts +0 -165
  334. package/components/table/snice-cell-progress.ts +0 -83
  335. package/components/table/snice-cell-rating.ts +0 -82
  336. package/components/table/snice-cell-sparkline.ts +0 -253
  337. package/components/table/snice-cell-text.ts +0 -125
  338. package/components/table/snice-cell.css +0 -296
  339. package/components/table/snice-cell.ts +0 -473
  340. package/components/table/snice-column.ts +0 -353
  341. package/components/table/snice-header.css +0 -243
  342. package/components/table/snice-header.ts +0 -261
  343. package/components/table/snice-progress.ts +0 -66
  344. package/components/table/snice-rating.ts +0 -45
  345. package/components/table/snice-row.css +0 -255
  346. package/components/table/snice-row.ts +0 -331
  347. package/components/table/snice-table.css +0 -241
  348. package/components/table/snice-table.ts +0 -737
  349. package/components/table/snice-table.types.ts +0 -158
  350. package/components/tabs/demo.html +0 -487
  351. package/components/tabs/snice-tab-panel.css +0 -264
  352. package/components/tabs/snice-tab-panel.ts +0 -47
  353. package/components/tabs/snice-tab.css +0 -96
  354. package/components/tabs/snice-tab.ts +0 -65
  355. package/components/tabs/snice-tabs.css +0 -189
  356. package/components/tabs/snice-tabs.ts +0 -332
  357. package/components/tabs/snice-tabs.types.ts +0 -28
  358. package/components/theme/theme.css +0 -234
  359. package/components/toast/demo.html +0 -329
  360. package/components/toast/snice-toast-container.ts +0 -256
  361. package/components/toast/snice-toast.css +0 -213
  362. package/components/toast/snice-toast.ts +0 -276
  363. package/components/toast/snice-toast.types.ts +0 -35
  364. package/components/tooltip/demo.html +0 -350
  365. package/components/tooltip/snice-tooltip-portal.css +0 -79
  366. package/components/tooltip/snice-tooltip.css +0 -117
  367. package/components/tooltip/snice-tooltip.ts +0 -612
  368. package/components/tooltip/snice-tooltip.types.ts +0 -32
  369. package/components/transitions.ts +0 -94
  370. package/components/tsconfig.json +0 -18
package/components/login/demo.html DELETED
@@ -1,470 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Snice Login Component Demo</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
11
- margin: 0;
12
- padding: var(--snice-spacing-xl, 2rem);
13
- background: var(--snice-color-background-secondary, rgb(250 250 250));
14
- color: var(--snice-color-text, rgb(23 23 23));
15
- min-height: 100vh;
16
- }
17
-
18
- .demo-container {
19
- max-width: 1200px;
20
- margin: 0 auto;
21
- }
22
-
23
- .demo-header {
24
- text-align: center;
25
- margin-bottom: var(--snice-spacing-3xl, 4rem);
26
- }
27
-
28
- .demo-header h1 {
29
- color: var(--snice-color-text, rgb(23 23 23));
30
- margin-bottom: var(--snice-spacing-xs, 0.5rem);
31
- font-size: var(--snice-font-size-3xl, 1.875rem);
32
- font-weight: var(--snice-font-weight-bold, 700);
33
- }
34
-
35
- .demo-header p {
36
- color: var(--snice-color-text-secondary, rgb(82 82 82));
37
- font-size: var(--snice-font-size-lg, 1.125rem);
38
- }
39
-
40
- .demo-grid {
41
- display: grid;
42
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
43
- gap: var(--snice-spacing-xl, 2rem);
44
- margin-bottom: var(--snice-spacing-3xl, 4rem);
45
- }
46
-
47
- .demo-card {
48
- background: var(--snice-color-background, rgb(255 255 255));
49
- border-radius: var(--snice-border-radius-lg, 0.5rem);
50
- border: 1px solid var(--snice-color-border, rgb(226 226 226));
51
- padding: var(--snice-spacing-xl, 2rem);
52
- box-shadow: var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
53
- }
54
-
55
- .demo-card h3 {
56
- margin: 0 0 var(--snice-spacing-md, 1rem) 0;
57
- color: var(--snice-color-text, rgb(23 23 23));
58
- font-size: var(--snice-font-size-xl, 1.25rem);
59
- font-weight: var(--snice-font-weight-semibold, 600);
60
- }
61
-
62
- .demo-card p {
63
- margin: 0 0 var(--snice-spacing-lg, 1.5rem) 0;
64
- color: var(--snice-color-text-secondary, rgb(82 82 82));
65
- font-size: var(--snice-font-size-sm, 0.875rem);
66
- }
67
-
68
- .demo-controls {
69
- background: var(--snice-color-background, rgb(255 255 255));
70
- border-radius: var(--snice-border-radius-lg, 0.5rem);
71
- border: 1px solid var(--snice-color-border, rgb(226 226 226));
72
- padding: var(--snice-spacing-xl, 2rem);
73
- box-shadow: var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
74
- margin-bottom: var(--snice-spacing-xl, 2rem);
75
- }
76
-
77
- .demo-controls h3 {
78
- margin: 0 0 var(--snice-spacing-md, 1rem) 0;
79
- color: var(--snice-color-text, rgb(23 23 23));
80
- font-size: var(--snice-font-size-xl, 1.25rem);
81
- font-weight: var(--snice-font-weight-semibold, 600);
82
- }
83
-
84
- .controls-grid {
85
- display: grid;
86
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
87
- gap: var(--snice-spacing-md, 1rem);
88
- }
89
-
90
- .control-group {
91
- display: flex;
92
- flex-direction: column;
93
- gap: var(--snice-spacing-xs, 0.5rem);
94
- }
95
-
96
- .control-group label {
97
- font-size: var(--snice-font-size-sm, 0.875rem);
98
- font-weight: var(--snice-font-weight-medium, 500);
99
- color: var(--snice-color-text, rgb(23 23 23));
100
- }
101
-
102
- .control-group select,
103
- .control-group input[type="text"] {
104
- padding: var(--snice-spacing-sm, 0.75rem);
105
- border: 1px solid var(--snice-color-border, rgb(226 226 226));
106
- border-radius: var(--snice-border-radius-md, 0.25rem);
107
- font-size: var(--snice-font-size-sm, 0.875rem);
108
- font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
109
- background: var(--snice-color-background, rgb(255 255 255));
110
- color: var(--snice-color-text, rgb(23 23 23));
111
- transition: border-color var(--snice-transition-fast, 150ms) ease;
112
- }
113
-
114
- .control-group select:focus,
115
- .control-group input[type="text"]:focus {
116
- outline: none;
117
- border-color: var(--snice-color-border-focus, rgb(59 130 246));
118
- box-shadow: 0 0 0 var(--snice-focus-ring-width, 2px) var(--snice-focus-ring-color, rgb(59 130 246 / 0.5));
119
- }
120
-
121
- .control-group button {
122
- padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);
123
- background: var(--snice-color-primary, rgb(37 99 235));
124
- color: var(--snice-color-text-inverse, rgb(250 250 250));
125
- border: 1px solid var(--snice-color-primary, rgb(37 99 235));
126
- border-radius: var(--snice-border-radius-md, 0.25rem);
127
- cursor: pointer;
128
- font-size: var(--snice-font-size-sm, 0.875rem);
129
- font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
130
- font-weight: var(--snice-font-weight-medium, 500);
131
- transition: background-color var(--snice-transition-fast, 150ms) ease;
132
- }
133
-
134
- .control-group button:hover {
135
- background: var(--snice-color-primary-hover, rgb(29 78 216));
136
- border-color: var(--snice-color-primary-hover, rgb(29 78 216));
137
- }
138
-
139
- .demo-events {
140
- background: var(--snice-color-background, rgb(255 255 255));
141
- border-radius: var(--snice-border-radius-lg, 0.5rem);
142
- border: 1px solid var(--snice-color-border, rgb(226 226 226));
143
- padding: var(--snice-spacing-xl, 2rem);
144
- box-shadow: var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
145
- }
146
-
147
- .demo-events h3 {
148
- margin: 0 0 var(--snice-spacing-md, 1rem) 0;
149
- color: var(--snice-color-text, rgb(23 23 23));
150
- font-size: var(--snice-font-size-xl, 1.25rem);
151
- font-weight: var(--snice-font-weight-semibold, 600);
152
- }
153
-
154
- .event-log {
155
- background: var(--snice-color-background-secondary, rgb(250 250 250));
156
- border: 1px solid var(--snice-color-border, rgb(226 226 226));
157
- border-radius: var(--snice-border-radius-md, 0.25rem);
158
- padding: var(--snice-spacing-md, 1rem);
159
- max-height: 300px;
160
- overflow-y: auto;
161
- font-family: var(--snice-font-family-mono, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace);
162
- font-size: var(--snice-font-size-xs, 0.75rem);
163
- }
164
-
165
- .event-entry {
166
- margin-bottom: var(--snice-spacing-xs, 0.5rem);
167
- padding: var(--snice-spacing-2xs, 0.25rem);
168
- border-radius: var(--snice-border-radius-sm, 0.125rem);
169
- }
170
-
171
- .event-success {
172
- background: rgb(var(--snice-color-green-100, 220 252 231));
173
- color: rgb(var(--snice-color-green-800, 22 101 52));
174
- }
175
-
176
- .event-error {
177
- background: rgb(var(--snice-color-red-100, 254 226 226));
178
- color: rgb(var(--snice-color-red-800, 153 27 27));
179
- }
180
-
181
- .event-info {
182
- background: rgb(var(--snice-color-blue-100, 219 234 254));
183
- color: rgb(var(--snice-color-blue-800, 30 64 175));
184
- }
185
-
186
- /* Custom styling for login components */
187
- snice-login[slot="footer"] {
188
- text-align: center;
189
- color: var(--snice-color-text-secondary, rgb(82 82 82));
190
- font-size: var(--snice-font-size-sm, 0.875rem);
191
- }
192
-
193
- .footer-text {
194
- margin: var(--snice-spacing-xs, 0.5rem) 0;
195
- }
196
-
197
- .footer-link {
198
- color: var(--snice-color-primary, rgb(37 99 235));
199
- text-decoration: none;
200
- transition: color var(--snice-transition-fast, 150ms) ease;
201
- }
202
-
203
- .footer-link:hover {
204
- color: var(--snice-color-primary-hover, rgb(29 78 216));
205
- text-decoration: underline;
206
- }
207
-
208
- @media (max-width: 768px) {
209
- .demo-grid {
210
- grid-template-columns: 1fr;
211
- }
212
-
213
- .controls-grid {
214
- grid-template-columns: 1fr;
215
- }
216
- }
217
- </style>
218
- </head>
219
- <body>
220
- <div class="demo-container">
221
- <div class="demo-header">
222
- <h1>Snice Login Component Demo</h1>
223
- <p>Interactive examples showcasing different variants, sizes, and configurations</p>
224
- </div>
225
-
226
- <div class="demo-controls">
227
- <h3>Interactive Controls</h3>
228
- <div class="controls-grid">
229
- <div class="control-group">
230
- <label for="variant-select">Variant</label>
231
- <select id="variant-select">
232
- <option value="default">Default</option>
233
- <option value="card" selected>Card</option>
234
- <option value="minimal">Minimal</option>
235
- </select>
236
- </div>
237
-
238
- <div class="control-group">
239
- <label for="size-select">Size</label>
240
- <select id="size-select">
241
- <option value="small">Small</option>
242
- <option value="medium" selected>Medium</option>
243
- <option value="large">Large</option>
244
- </select>
245
- </div>
246
-
247
- <div class="control-group">
248
- <label for="title-input">Title</label>
249
- <input type="text" id="title-input" value="Welcome Back" />
250
- </div>
251
-
252
- <div class="control-group">
253
- <label for="action-text-input">Action Text</label>
254
- <input type="text" id="action-text-input" value="Sign In" />
255
- </div>
256
-
257
- <div class="control-group">
258
- <label>
259
- <input type="checkbox" id="show-remember" checked /> Show Remember Me
260
- </label>
261
- </div>
262
-
263
- <div class="control-group">
264
- <label>
265
- <input type="checkbox" id="show-forgot" checked /> Show Forgot Password
266
- </label>
267
- </div>
268
-
269
- <div class="control-group">
270
- <label>
271
- <input type="checkbox" id="disabled-toggle" /> Disabled
272
- </label>
273
- </div>
274
-
275
- <div class="control-group">
276
- <button id="simulate-error">Simulate Error</button>
277
- </div>
278
-
279
- <div class="control-group">
280
- <button id="clear-log">Clear Event Log</button>
281
- </div>
282
- </div>
283
- </div>
284
-
285
- <div class="demo-grid">
286
- <!-- Interactive Login -->
287
- <div class="demo-card">
288
- <h3>Interactive Login</h3>
289
- <p>Use the controls above to modify this login component in real-time.</p>
290
-
291
- <snice-login
292
- id="interactive-login"
293
- variant="card"
294
- size="medium"
295
- title="Welcome Back"
296
- action-text="Sign In"
297
- show-remember-me
298
- show-forgot-password
299
- controller="demo-auth-controller">
300
-
301
- <p slot="subtitle">Please sign in to your account</p>
302
-
303
- <div slot="footer">
304
- <p class="footer-text">Don't have an account?</p>
305
- <a href="#" class="footer-link">Sign up here</a>
306
- </div>
307
- </snice-login>
308
- </div>
309
-
310
- <!-- Card Variant Examples -->
311
- <div class="demo-card">
312
- <h3>Card Variant (Large)</h3>
313
- <p>Login form presented in a card layout with shadow and border.</p>
314
-
315
- <snice-login
316
- variant="card"
317
- size="large"
318
- title="Admin Portal"
319
- action-text="Access Portal"
320
- controller="demo-auth-controller">
321
-
322
- <p slot="subtitle">Administrator access required</p>
323
- </snice-login>
324
- </div>
325
-
326
- <!-- Minimal Variant -->
327
- <div class="demo-card">
328
- <h3>Minimal Variant</h3>
329
- <p>Clean, borderless login form perfect for embedding.</p>
330
-
331
- <snice-login
332
- variant="minimal"
333
- size="small"
334
- title="Quick Sign In"
335
- action-text="Continue"
336
- show-forgot-password="false"
337
- controller="demo-auth-controller">
338
-
339
- <p slot="subtitle">Enter your credentials</p>
340
- </snice-login>
341
- </div>
342
-
343
- <!-- Default Variant -->
344
- <div class="demo-card">
345
- <h3>Default Variant</h3>
346
- <p>Standard login form without additional styling.</p>
347
-
348
- <snice-login
349
- variant="default"
350
- size="medium"
351
- title="User Login"
352
- action-text="Log In"
353
- show-remember-me="false"
354
- controller="demo-auth-controller">
355
-
356
- <div slot="footer">
357
- <p class="footer-text">Test credentials: demo / password</p>
358
- </div>
359
- </snice-login>
360
- </div>
361
- </div>
362
-
363
- <div class="demo-events">
364
- <h3>Event Log</h3>
365
- <div id="event-log" class="event-log">
366
- <div class="event-entry event-info">
367
- <strong>[INFO]</strong> Demo loaded. Try logging in with username: "demo" and password: "password"
368
- </div>
369
- </div>
370
- </div>
371
- </div>
372
-
373
- <!-- Import the components -->
374
- <script type="module">
375
- // Import the controller first, then the login component
376
- import './demo-auth-controller.ts';
377
- import './snice-login.ts';
378
-
379
- // Get references to interactive elements
380
- const interactiveLogin = document.getElementById('interactive-login');
381
- const variantSelect = document.getElementById('variant-select');
382
- const sizeSelect = document.getElementById('size-select');
383
- const titleInput = document.getElementById('title-input');
384
- const actionTextInput = document.getElementById('action-text-input');
385
- const showRememberCheckbox = document.getElementById('show-remember');
386
- const showForgotCheckbox = document.getElementById('show-forgot');
387
- const disabledToggle = document.getElementById('disabled-toggle');
388
- const simulateErrorBtn = document.getElementById('simulate-error');
389
- const clearLogBtn = document.getElementById('clear-log');
390
- const eventLog = document.getElementById('event-log');
391
-
392
- // Update interactive login component
393
- function updateInteractiveLogin() {
394
- interactiveLogin.variant = variantSelect.value;
395
- interactiveLogin.size = sizeSelect.value;
396
- interactiveLogin.title = titleInput.value;
397
- interactiveLogin.actionText = actionTextInput.value;
398
- interactiveLogin.showRememberMe = showRememberCheckbox.checked;
399
- interactiveLogin.showForgotPassword = showForgotCheckbox.checked;
400
- interactiveLogin.disabled = disabledToggle.checked;
401
- }
402
-
403
- // Add event listeners for controls
404
- variantSelect.addEventListener('change', updateInteractiveLogin);
405
- sizeSelect.addEventListener('change', updateInteractiveLogin);
406
- titleInput.addEventListener('input', updateInteractiveLogin);
407
- actionTextInput.addEventListener('input', updateInteractiveLogin);
408
- showRememberCheckbox.addEventListener('change', updateInteractiveLogin);
409
- showForgotCheckbox.addEventListener('change', updateInteractiveLogin);
410
- disabledToggle.addEventListener('change', updateInteractiveLogin);
411
-
412
- // Simulate error
413
- simulateErrorBtn.addEventListener('click', () => {
414
- interactiveLogin.setError('Invalid credentials. Please try again.');
415
- logEvent('error', 'Simulated error set on interactive login component');
416
- });
417
-
418
- // Clear event log
419
- clearLogBtn.addEventListener('click', () => {
420
- eventLog.innerHTML = '<div class="event-entry event-info"><strong>[INFO]</strong> Event log cleared</div>';
421
- });
422
-
423
- // Event logging function
424
- function logEvent(type, message, data = null) {
425
- const timestamp = new Date().toLocaleTimeString();
426
- const entry = document.createElement('div');
427
- entry.className = `event-entry event-${type}`;
428
-
429
- let logMessage = `<strong>[${timestamp}]</strong> ${message}`;
430
- if (data) {
431
- logMessage += `<br><em>${JSON.stringify(data, null, 2)}</em>`;
432
- }
433
-
434
- entry.innerHTML = logMessage;
435
- eventLog.appendChild(entry);
436
- eventLog.scrollTop = eventLog.scrollHeight;
437
- }
438
-
439
- // Listen for login events on all login components
440
- document.addEventListener('@snice/login-attempt', (event) => {
441
- logEvent('info', 'Login attempt started', event.detail);
442
- });
443
-
444
- document.addEventListener('@snice/login-success', (event) => {
445
- logEvent('success', 'Login successful!', event.detail);
446
- });
447
-
448
- document.addEventListener('@snice/login-error', (event) => {
449
- logEvent('error', 'Login failed', event.detail);
450
- });
451
-
452
- document.addEventListener('@snice/login-forgot-password', (event) => {
453
- logEvent('info', 'Forgot password clicked', event.detail);
454
- });
455
-
456
- // Demo-specific events
457
- document.addEventListener('demo-auth-response', (event) => {
458
- const { success, user, error } = event.detail;
459
- if (success) {
460
- logEvent('success', `Authentication successful for user: ${user.username}`, event.detail);
461
- } else {
462
- logEvent('error', `Authentication failed: ${error}`, event.detail);
463
- }
464
- });
465
-
466
- // Initialize
467
- logEvent('info', 'Demo initialized. All login components are ready.');
468
- </script>
469
- </body>
470
- </html>
package/components/login/snice-login.css DELETED
@@ -1,204 +0,0 @@
1
- /* Login Component */
2
- :host {
3
- display: block;
4
- font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
5
- }
6
-
7
- .login {
8
- max-width: 24rem; /* 384px */
9
- margin: 0 auto;
10
- }
11
-
12
- .login--card {
13
- background: var(--snice-color-background-element, rgb(252 251 249));
14
- border: 1px solid var(--snice-color-border, rgb(226 226 226));
15
- border-radius: var(--snice-border-radius-lg, 0.5rem);
16
- padding: var(--snice-spacing-xl, 2rem);
17
- box-shadow: var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
18
- }
19
-
20
- .login--minimal {
21
- background: transparent;
22
- border: none;
23
- padding: 0;
24
- box-shadow: none;
25
- }
26
-
27
- .login--small {
28
- max-width: 20rem; /* 320px */
29
- }
30
-
31
- .login--large {
32
- max-width: 28rem; /* 448px */
33
- }
34
-
35
- .login__header {
36
- text-align: center;
37
- margin-bottom: var(--snice-spacing-xl, 2rem);
38
- }
39
-
40
- .login__title {
41
- margin: 0 0 var(--snice-spacing-xs, 0.5rem) 0;
42
- font-size: var(--snice-font-size-2xl, 1.5rem);
43
- font-weight: var(--snice-font-weight-bold, 700);
44
- color: var(--snice-color-text, rgb(23 23 23));
45
- }
46
-
47
- .login__subtitle {
48
- margin: 0;
49
- font-size: var(--snice-font-size-sm, 0.875rem);
50
- color: var(--snice-color-text-secondary, rgb(82 82 82));
51
- }
52
-
53
- .login__form {
54
- display: flex;
55
- flex-direction: column;
56
- gap: var(--snice-spacing-md, 1rem);
57
- }
58
-
59
- .login__field {
60
- display: flex;
61
- flex-direction: column;
62
- gap: var(--snice-spacing-2xs, 0.25rem);
63
- }
64
-
65
- .login__label {
66
- font-size: var(--snice-font-size-sm, 0.875rem);
67
- font-weight: var(--snice-font-weight-medium, 500);
68
- color: var(--snice-color-text, rgb(23 23 23));
69
- }
70
-
71
- .login__input {
72
- padding: var(--snice-spacing-sm, 0.75rem);
73
- border: 1px solid var(--snice-color-border, rgb(226 226 226));
74
- border-radius: var(--snice-border-radius-md, 0.25rem);
75
- font-size: var(--snice-font-size-md, 1rem);
76
- font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
77
- transition: border-color var(--snice-transition-fast, 150ms) ease;
78
- background: var(--snice-color-background, rgb(255 255 255));
79
- color: var(--snice-color-text, rgb(23 23 23));
80
- }
81
-
82
- .login__input:focus {
83
- outline: none;
84
- border-color: var(--snice-color-border-focus, rgb(59 130 246));
85
- box-shadow: 0 0 0 var(--snice-focus-ring-width, 2px) var(--snice-focus-ring-color, rgb(59 130 246 / 0.5));
86
- }
87
-
88
- .login__input:disabled {
89
- background: var(--snice-color-background-secondary, rgb(250 250 250));
90
- color: var(--snice-color-text-tertiary, rgb(115 115 115));
91
- cursor: not-allowed;
92
- }
93
-
94
- .login__input--error {
95
- border-color: var(--snice-color-danger, rgb(220 38 38));
96
- }
97
-
98
- .login__input--error:focus {
99
- border-color: var(--snice-color-danger, rgb(220 38 38));
100
- box-shadow: 0 0 0 var(--snice-focus-ring-width, 2px) rgb(239 68 68 / 0.2);
101
- }
102
-
103
- .login__options {
104
- display: flex;
105
- justify-content: space-between;
106
- align-items: center;
107
- margin: var(--snice-spacing-xs, 0.5rem) 0;
108
- }
109
-
110
- .login__remember {
111
- display: flex;
112
- align-items: center;
113
- gap: var(--snice-spacing-xs, 0.5rem);
114
- font-size: var(--snice-font-size-sm, 0.875rem);
115
- color: var(--snice-color-text-secondary, rgb(82 82 82));
116
- }
117
-
118
- .login__checkbox {
119
- margin: 0;
120
- }
121
-
122
- .login__forgot {
123
- font-size: var(--snice-font-size-sm, 0.875rem);
124
- color: var(--snice-color-primary, rgb(37 99 235));
125
- text-decoration: none;
126
- transition: color var(--snice-transition-fast, 150ms) ease;
127
- }
128
-
129
- .login__forgot:hover {
130
- color: var(--snice-color-primary-hover, rgb(29 78 216));
131
- text-decoration: underline;
132
- }
133
-
134
-
135
-
136
- .login__footer {
137
- text-align: center;
138
- margin-top: var(--snice-spacing-lg, 1.5rem);
139
- }
140
-
141
- .login__footer ::slotted(*) {
142
- font-size: var(--snice-font-size-sm, 0.875rem);
143
- color: var(--snice-color-text-secondary, rgb(82 82 82));
144
- }
145
-
146
- .login__footer ::slotted(a) {
147
- color: var(--snice-color-primary, rgb(37 99 235));
148
- text-decoration: none;
149
- }
150
-
151
- .login__footer ::slotted(a:hover) {
152
- text-decoration: underline;
153
- }
154
-
155
- /* Size variants */
156
- .login--small .login__title {
157
- font-size: 1.25rem; /* 20px */
158
- }
159
-
160
- .login--small .login__input,
161
- .login--small .login__button {
162
- padding: 0.625rem; /* 10px */
163
- font-size: 0.875rem; /* 14px */
164
- }
165
-
166
- .login--small .login__button {
167
- min-height: 2.5rem; /* 40px */
168
- }
169
-
170
- .login--large .login__title {
171
- font-size: 1.875rem; /* 30px */
172
- }
173
-
174
- .login--large .login__input,
175
- .login--large .login__button {
176
- padding: 1rem; /* 16px */
177
- font-size: 1.125rem; /* 18px */
178
- }
179
-
180
- .login--large .login__button {
181
- min-height: 3.5rem; /* 56px */
182
- }
183
-
184
- [hidden] {
185
- display: none;
186
- }
187
-
188
- snice-alert {
189
- margin-top: var(--snice-spacing-md, 1rem);
190
- }
191
-
192
- /* Mobile responsive */
193
- @media (max-width: 640px) {
194
- .login {
195
- max-width: none;
196
- margin: 0;
197
- }
198
-
199
- .login--card {
200
- border-radius: 0;
201
- border-left: none;
202
- border-right: none;
203
- }
204
- }