testio-tailwind 0.1.0 → 0.2.1

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 (380) hide show
  1. package/.circleci/config.yml +217 -0
  2. package/.dockerignore +4 -0
  3. package/.eleventy.js +57 -57
  4. package/Dockerfile +27 -0
  5. package/LICENSE +21 -21
  6. package/README.md +43 -43
  7. package/icon-classes-extractor.js +29 -29
  8. package/index.html +399 -478
  9. package/package.json +66 -66
  10. package/src/_data/navigation.json +44 -44
  11. package/src/_data/site.js +12 -12
  12. package/src/_includes/card_popover.haml +7 -7
  13. package/src/_includes/example-header-customer.pug +99 -99
  14. package/src/_includes/example-header-manager.njk +53 -53
  15. package/src/_includes/example-header-tester.njk +99 -99
  16. package/src/_includes/example-header.njk +50 -50
  17. package/src/_includes/page-with-sidebar-nocode.njk +46 -46
  18. package/src/_includes/page-with-sidebar.njk +46 -46
  19. package/src/_includes/page.njk +38 -38
  20. package/src/_layouts/base.njk +83 -83
  21. package/src/_layouts/email-template.njk +90 -90
  22. package/src/_layouts/page-example-customer.njk +74 -74
  23. package/src/_layouts/page-example-manager.njk +74 -74
  24. package/src/_layouts/page-example-tester.njk +75 -75
  25. package/src/_layouts/page-example.njk +83 -83
  26. package/src/assets/images/Cirro-App-Defaultimage.svg +25 -25
  27. package/src/assets/images/arrow-down.svg +13 -13
  28. package/src/assets/images/arrow-left.svg +13 -13
  29. package/src/assets/images/arrow-right.svg +13 -13
  30. package/src/assets/images/arrow-thick-left.svg +13 -13
  31. package/src/assets/images/arrow-thick-right.svg +13 -13
  32. package/src/assets/images/arrow-up.svg +13 -13
  33. package/src/assets/images/at-sign.svg +12 -12
  34. package/src/assets/images/attachment-fallbackimage.svg +19 -19
  35. package/src/assets/images/attachment.svg +8 -8
  36. package/src/assets/images/bell-smile-xl.svg +18 -18
  37. package/src/assets/images/blocked.svg +7 -7
  38. package/src/assets/images/bug-chat-xl.svg +15 -15
  39. package/src/assets/images/bug-deceased-xl.svg +15 -15
  40. package/src/assets/images/bug-reproduction.svg +14 -14
  41. package/src/assets/images/bug-sad-xl.svg +13 -13
  42. package/src/assets/images/bug-search-xl.svg +18 -18
  43. package/src/assets/images/bug-sleeping-xl.svg +14 -14
  44. package/src/assets/images/bug-smile-xl.svg +9 -9
  45. package/src/assets/images/calendar.svg +15 -15
  46. package/src/assets/images/caret-down-centered.svg +6 -6
  47. package/src/assets/images/caret-down.svg +11 -11
  48. package/src/assets/images/caret-left-centered.svg +6 -6
  49. package/src/assets/images/caret-left.svg +6 -6
  50. package/src/assets/images/caret-right-centered.svg +6 -6
  51. package/src/assets/images/caret-right.svg +6 -6
  52. package/src/assets/images/caret-up-centered.svg +6 -6
  53. package/src/assets/images/caret-up.svg +11 -11
  54. package/src/assets/images/check-circle-filled-white.svg +9 -9
  55. package/src/assets/images/check-circle-filled.svg +12 -12
  56. package/src/assets/images/check-circle.svg +7 -7
  57. package/src/assets/images/check-selectable-items.svg +11 -11
  58. package/src/assets/images/check-thick-outline.svg +11 -11
  59. package/src/assets/images/check-thick.svg +6 -6
  60. package/src/assets/images/check.svg +17 -17
  61. package/src/assets/images/checkbox-background-black.svg +6 -6
  62. package/src/assets/images/checkbox-background-sm.svg +12 -12
  63. package/src/assets/images/checkbox-background-white.svg +6 -6
  64. package/src/assets/images/checkbox-background.svg +6 -6
  65. package/src/assets/images/checkbox-sm-checked.svg +11 -11
  66. package/src/assets/images/circle-empty-white.svg +6 -6
  67. package/src/assets/images/circle-sm-filled.svg +6 -6
  68. package/src/assets/images/clock.svg +12 -12
  69. package/src/assets/images/cross-circle-filled.svg +6 -6
  70. package/src/assets/images/cross-circle.svg +7 -7
  71. package/src/assets/images/cross-thick.svg +15 -15
  72. package/src/assets/images/cross.svg +7 -7
  73. package/src/assets/images/exclamation-circle-filled.svg +11 -11
  74. package/src/assets/images/exclamation-circle.svg +12 -12
  75. package/src/assets/images/feature-check.svg +9 -9
  76. package/src/assets/images/feature-cross.svg +10 -10
  77. package/src/assets/images/feature-draft.svg +14 -14
  78. package/src/assets/images/feature.svg +8 -8
  79. package/src/assets/images/file-image-plus-lg.svg +19 -19
  80. package/src/assets/images/file-image-plus-xl.svg +20 -20
  81. package/src/assets/images/format-bold.svg +11 -11
  82. package/src/assets/images/format-code.svg +12 -12
  83. package/src/assets/images/format-heading.svg +11 -11
  84. package/src/assets/images/format-indent-decrease.svg +11 -11
  85. package/src/assets/images/format-indent-increase.svg +11 -11
  86. package/src/assets/images/format-italic.svg +11 -11
  87. package/src/assets/images/format-link.svg +11 -11
  88. package/src/assets/images/format-list-bulleted.svg +17 -17
  89. package/src/assets/images/format-list-numbered.svg +17 -17
  90. package/src/assets/images/format-mark.svg +13 -13
  91. package/src/assets/images/format-quote.svg +17 -17
  92. package/src/assets/images/format-strikethrough.svg +11 -11
  93. package/src/assets/images/forward.svg +11 -11
  94. package/src/assets/images/google_signin.svg +22 -22
  95. package/src/assets/images/info-circle-cirro.svg +21 -21
  96. package/src/assets/images/info-circle-ux.svg +21 -21
  97. package/src/assets/images/lock.svg +15 -15
  98. package/src/assets/images/logo-mobile-cloud.svg +12 -12
  99. package/src/assets/images/logo-testio/testio_horizontal_black.svg +14 -14
  100. package/src/assets/images/logo-testio/testio_horizontal_icon_black.svg +25 -25
  101. package/src/assets/images/logo-testio/testio_horizontal_icon_purple_black.svg +27 -27
  102. package/src/assets/images/logo-testio/testio_horizontal_icon_purple_white.svg +25 -25
  103. package/src/assets/images/logo-testio/testio_horizontal_icon_white.svg +25 -25
  104. package/src/assets/images/logo-testio/testio_horizontal_purple_black.svg +9 -9
  105. package/src/assets/images/logo-testio/testio_horizontal_purple_white.svg +14 -14
  106. package/src/assets/images/logo-testio/testio_horizontal_purpleteal_black.svg +21 -21
  107. package/src/assets/images/logo-testio/testio_horizontal_purpleteal_white.svg +19 -19
  108. package/src/assets/images/logo-testio/testio_horizontal_teal_black.svg +14 -14
  109. package/src/assets/images/logo-testio/testio_horizontal_teal_white.svg +14 -14
  110. package/src/assets/images/logo-testio/testio_horizontal_tealpurple_black.svg +21 -21
  111. package/src/assets/images/logo-testio/testio_horizontal_tealpurple_white.svg +21 -21
  112. package/src/assets/images/logo-testio/testio_horizontal_white.svg +14 -14
  113. package/src/assets/images/logo-testio/testio_symbol_black_round.svg +11 -11
  114. package/src/assets/images/logo-testio/testio_symbol_purple.svg +15 -15
  115. package/src/assets/images/logo-testio/testio_symbol_purpleteal_round.svg +18 -18
  116. package/src/assets/images/logo-testio/testio_symbol_purpleteal_square.svg +18 -18
  117. package/src/assets/images/logo-testio/testio_symbol_teal.svg +15 -15
  118. package/src/assets/images/logo-testio/testio_symbol_tealpurple_round.svg +18 -18
  119. package/src/assets/images/logo-testio/testio_symbol_tealpurple_square.svg +18 -18
  120. package/src/assets/images/logo-testio/testio_symbol_white_round.svg +11 -11
  121. package/src/assets/images/logo-testio/testio_typo_black.svg +11 -11
  122. package/src/assets/images/logo-testio/testio_typo_white.svg +11 -11
  123. package/src/assets/images/logo-testio/testio_vertical_purpleteal_black.svg +19 -19
  124. package/src/assets/images/logo-testio/testio_vertical_purpleteal_white.svg +19 -19
  125. package/src/assets/images/logo-testio/testio_vertical_tealpurple_black.svg +19 -19
  126. package/src/assets/images/logo-testio/testio_vertical_tealpurple_white.svg +19 -19
  127. package/src/assets/images/message-feedback.svg +10 -10
  128. package/src/assets/images/message-question-filled.svg +6 -6
  129. package/src/assets/images/message-question.svg +8 -8
  130. package/src/assets/images/message.svg +11 -11
  131. package/src/assets/images/question-circle.svg +24 -24
  132. package/src/assets/images/radio-checked-black.svg +5 -5
  133. package/src/assets/images/redo.svg +7 -7
  134. package/src/assets/images/remove.svg +6 -6
  135. package/src/assets/images/search.svg +11 -11
  136. package/src/assets/images/seat.svg +14 -14
  137. package/src/assets/images/section.svg +8 -8
  138. package/src/assets/images/sendmessage.svg +15 -15
  139. package/src/assets/images/speaker.svg +10 -10
  140. package/src/assets/images/test-archived.svg +12 -12
  141. package/src/assets/images/test-automation.svg +8 -8
  142. package/src/assets/images/test-check.svg +9 -9
  143. package/src/assets/images/test-ended.svg +9 -9
  144. package/src/assets/images/test-failed.svg +10 -10
  145. package/src/assets/images/test-initialized.svg +10 -10
  146. package/src/assets/images/test-locked.svg +15 -15
  147. package/src/assets/images/test-plus.svg +11 -11
  148. package/src/assets/images/test-promoted.svg +9 -9
  149. package/src/assets/images/test-running.svg +9 -9
  150. package/src/assets/images/test-stopped.svg +17 -17
  151. package/src/assets/images/test.svg +8 -8
  152. package/src/assets/images/testcase.svg +10 -10
  153. package/src/assets/images/triangle-centered-down.svg +12 -12
  154. package/src/assets/images/triangle-centered-left.svg +12 -12
  155. package/src/assets/images/triangle-centered-right.svg +12 -12
  156. package/src/assets/images/triangle-centered-up.svg +12 -12
  157. package/src/assets/images/triangle-down.svg +5 -5
  158. package/src/assets/images/triangle-up.svg +5 -5
  159. package/src/assets/images/undo.svg +7 -7
  160. package/src/assets/images/verify-exclamation.svg +11 -11
  161. package/src/assets/scripts/app.js +150 -150
  162. package/src/assets/scripts/modules/colors.js +10 -10
  163. package/src/assets/scripts/modules/echarts_area.js +94 -94
  164. package/src/assets/scripts/modules/echarts_donut.js +85 -85
  165. package/src/assets/scripts/modules/echarts_exampledata.js +105 -105
  166. package/src/assets/scripts/modules/echarts_exampleseries.js +146 -146
  167. package/src/assets/scripts/modules/echarts_gauge.js +74 -74
  168. package/src/assets/scripts/modules/echarts_horizontal.js +80 -80
  169. package/src/assets/scripts/modules/echarts_legend.js +12 -12
  170. package/src/assets/scripts/modules/echarts_vertical.js +80 -80
  171. package/src/assets/stylesheets/app.css +77 -76
  172. package/src/assets/stylesheets/components/actionbar.css +41 -41
  173. package/src/assets/stylesheets/components/alerts.css +50 -50
  174. package/src/assets/stylesheets/components/banner_card.css +56 -56
  175. package/src/assets/stylesheets/components/buttons.css +192 -192
  176. package/src/assets/stylesheets/components/cards.css +148 -148
  177. package/src/assets/stylesheets/components/chat.css +265 -265
  178. package/src/assets/stylesheets/components/checkboxes_radiobuttons.css +173 -173
  179. package/src/assets/stylesheets/components/customer/customer_header.css +97 -97
  180. package/src/assets/stylesheets/components/customer/customer_productcards.css +212 -212
  181. package/src/assets/stylesheets/components/customer/customer_sidebar.css +76 -76
  182. package/src/assets/stylesheets/components/devices.css +77 -83
  183. package/src/assets/stylesheets/components/drawer.css +99 -99
  184. package/src/assets/stylesheets/components/dropdown.css +92 -92
  185. package/src/assets/stylesheets/components/emptystate_message.css +41 -41
  186. package/src/assets/stylesheets/components/form_card.css +20 -20
  187. package/src/assets/stylesheets/components/form_grid.css +11 -11
  188. package/src/assets/stylesheets/components/forms.css +106 -106
  189. package/src/assets/stylesheets/components/header.css +220 -220
  190. package/src/assets/stylesheets/components/iconfont.css +3303 -3303
  191. package/src/assets/stylesheets/components/icons.css +142 -142
  192. package/src/assets/stylesheets/components/images.css +27 -27
  193. package/src/assets/stylesheets/components/layout.css +37 -82
  194. package/src/assets/stylesheets/components/list_item.css +285 -281
  195. package/src/assets/stylesheets/components/lists.css +67 -67
  196. package/src/assets/stylesheets/components/loading_spinner.css +104 -104
  197. package/src/assets/stylesheets/components/manager/manager_header.css +50 -50
  198. package/src/assets/stylesheets/components/manager/manager_sidebar.css +76 -76
  199. package/src/assets/stylesheets/components/markdown_trix_styles.css +200 -200
  200. package/src/assets/stylesheets/components/metasidebar.css +56 -56
  201. package/src/assets/stylesheets/components/metrics.css +12 -12
  202. package/src/assets/stylesheets/components/modals.css +105 -105
  203. package/src/assets/stylesheets/components/notifications.css +154 -154
  204. package/src/assets/stylesheets/components/popover.css +120 -120
  205. package/src/assets/stylesheets/components/progress.css +69 -69
  206. package/src/assets/stylesheets/components/radio_tabs.css +59 -59
  207. package/src/assets/stylesheets/components/reset.css +26 -26
  208. package/src/assets/stylesheets/components/resultmodule.css +132 -132
  209. package/src/assets/stylesheets/components/search.css +110 -110
  210. package/src/assets/stylesheets/components/sections.css +97 -97
  211. package/src/assets/stylesheets/components/select.css +50 -50
  212. package/src/assets/stylesheets/components/select2.css +252 -252
  213. package/src/assets/stylesheets/components/selectable_token.css +223 -223
  214. package/src/assets/stylesheets/components/sidebar.css +480 -480
  215. package/src/assets/stylesheets/components/splitview.css +307 -304
  216. package/src/assets/stylesheets/components/tables.css +108 -108
  217. package/src/assets/stylesheets/components/tabs.css +121 -121
  218. package/src/assets/stylesheets/components/tags.css +28 -28
  219. package/src/assets/stylesheets/components/task_issue_item.css +78 -78
  220. package/src/assets/stylesheets/components/test_header.css +167 -0
  221. package/src/assets/stylesheets/components/test_item.css +89 -89
  222. package/src/assets/stylesheets/components/tester/tester_cards.css +143 -143
  223. package/src/assets/stylesheets/components/tester/tester_header.css +37 -37
  224. package/src/assets/stylesheets/components/tester/tester_sidebar.css +92 -92
  225. package/src/assets/stylesheets/components/toggleswitch.css +118 -118
  226. package/src/assets/stylesheets/components/tom_select.css +186 -186
  227. package/src/assets/stylesheets/components/trix_editor.css +174 -174
  228. package/src/assets/stylesheets/components/typography.css +81 -81
  229. package/src/assets/stylesheets/components/uploads.css +194 -194
  230. package/src/assets/stylesheets/components/user_item.css +57 -57
  231. package/src/assets/stylesheets/designsystem-styles.css +81 -81
  232. package/src/assets/stylesheets/postcss.config.js +16 -16
  233. package/src/assets/stylesheets/tailwind.config.js +331 -331
  234. package/src/humans.txt.njk +10 -10
  235. package/src/index.pug +16 -16
  236. package/src/pages/buttons/block.haml +39 -39
  237. package/src/pages/buttons/buttons-lg.haml +20 -20
  238. package/src/pages/buttons/buttons-sm.haml +41 -41
  239. package/src/pages/buttons/buttons-xl.haml +23 -23
  240. package/src/pages/buttons/buttons.haml +58 -58
  241. package/src/pages/buttons/buttons_input.haml +39 -39
  242. package/src/pages/buttons/dropdown-menu.haml +73 -73
  243. package/src/pages/buttons/index.njk +7 -7
  244. package/src/pages/buttons/info_popover.haml +32 -32
  245. package/src/pages/buttons/link-with-icon.haml +13 -13
  246. package/src/pages/buttons/square-buttons.haml +55 -55
  247. package/src/pages/charts/area.haml +215 -215
  248. package/src/pages/charts/bar_horizontal.haml +335 -335
  249. package/src/pages/charts/bar_vertical.haml +391 -391
  250. package/src/pages/charts/donut.haml +269 -269
  251. package/src/pages/charts/gauge.haml +214 -214
  252. package/src/pages/charts/index.njk +6 -6
  253. package/src/pages/ci.pug +8 -8
  254. package/src/pages/colors.pug +147 -147
  255. package/src/pages/components/alerts.haml +31 -31
  256. package/src/pages/components/banner_cards.haml +45 -45
  257. package/src/pages/components/cards.haml +111 -111
  258. package/src/pages/components/cards_customer.haml +487 -487
  259. package/src/pages/components/cards_fixedwidth.haml +135 -135
  260. package/src/pages/components/cards_iconheader.haml +57 -57
  261. package/src/pages/components/cards_tester.haml +159 -159
  262. package/src/pages/components/chat_window.haml +240 -240
  263. package/src/pages/components/comments_bug_preview.haml +29 -29
  264. package/src/pages/components/comments_chatmessages.haml +229 -229
  265. package/src/pages/components/descriptionlist.haml +47 -47
  266. package/src/pages/components/devices.haml +115 -115
  267. package/src/pages/components/drawer.haml +49 -49
  268. package/src/pages/components/drawer_filter.haml +76 -76
  269. package/src/pages/components/emptystate.haml +15 -15
  270. package/src/pages/components/index.njk +6 -6
  271. package/src/pages/components/issue-item.haml +18 -18
  272. package/src/pages/components/listitem_with_footer.haml +208 -208
  273. package/src/pages/components/listitems.haml +136 -136
  274. package/src/pages/components/listitems_badge.haml +36 -36
  275. package/src/pages/components/listitems_collapsable.haml +117 -117
  276. package/src/pages/components/listitems_nested.haml +50 -50
  277. package/src/pages/components/listitems_selectable.haml +59 -59
  278. package/src/pages/components/listitems_white.haml +82 -82
  279. package/src/pages/components/loading_spinner.haml +11 -11
  280. package/src/pages/components/metasidebar.haml +13 -13
  281. package/src/pages/components/modal_details.haml +68 -68
  282. package/src/pages/components/notification_center.haml +48 -48
  283. package/src/pages/components/notifications.haml +42 -42
  284. package/src/pages/components/profilethumb.haml +27 -27
  285. package/src/pages/components/progress.haml +23 -23
  286. package/src/pages/components/resultmodule.haml +150 -150
  287. package/src/pages/components/resultmodule_testcase.haml +125 -125
  288. package/src/pages/components/section_collapsable.haml +24 -24
  289. package/src/pages/components/splitview_item.haml +111 -111
  290. package/src/pages/components/splitview_item_collapsable.haml +65 -65
  291. package/src/pages/components/tables.haml +57 -57
  292. package/src/pages/components/tables_linked.haml +29 -29
  293. package/src/pages/components/tags.haml +12 -12
  294. package/src/pages/components/task_item.haml +33 -33
  295. package/src/pages/components/test_item.haml +119 -119
  296. package/src/pages/components/tester_levels.haml +70 -70
  297. package/src/pages/components/user_item.haml +49 -49
  298. package/src/pages/examples/layout-actionbar.haml +267 -267
  299. package/src/pages/examples/layout-basic.haml +28 -28
  300. package/src/pages/examples/layout-chat.haml +327 -327
  301. package/src/pages/examples/layout-customer.haml +189 -189
  302. package/src/pages/examples/layout-form-sidebar-actionbar-metasidebar.haml +312 -312
  303. package/src/pages/examples/layout-manager.haml +98 -98
  304. package/src/pages/examples/layout-metasidebar.haml +269 -269
  305. package/src/pages/examples/layout-sidebar-actionbar-metasidebar.haml +308 -308
  306. package/src/pages/examples/layout-sidebar-actionbar.haml +308 -308
  307. package/src/pages/examples/layout-sidebar.haml +296 -296
  308. package/src/pages/examples/layout-tester.haml +105 -105
  309. package/src/pages/examples/splitview-testcases.haml +477 -477
  310. package/src/pages/examples/splitview.haml +389 -389
  311. package/src/pages/forms/checkboxes.haml +64 -64
  312. package/src/pages/forms/checkboxes_devices.haml +45 -45
  313. package/src/pages/forms/form-addon.haml +16 -16
  314. package/src/pages/forms/form-card.haml +36 -36
  315. package/src/pages/forms/form-grid.haml +16 -16
  316. package/src/pages/forms/form_grid_narrow.haml +18 -18
  317. package/src/pages/forms/forms.haml +22 -22
  318. package/src/pages/forms/index.njk +6 -6
  319. package/src/pages/forms/radiobuttons.haml +50 -50
  320. package/src/pages/forms/rating_scale.haml +62 -62
  321. package/src/pages/forms/search.haml +71 -71
  322. package/src/pages/forms/select2.haml +72 -72
  323. package/src/pages/forms/select_native.haml +74 -74
  324. package/src/pages/forms/selectable_token.haml +49 -49
  325. package/src/pages/forms/selectable_token_browsers.haml +66 -66
  326. package/src/pages/forms/selectable_token_lg.haml +49 -49
  327. package/src/pages/forms/selectable_token_xl.haml +49 -49
  328. package/src/pages/forms/textarea.haml +24 -24
  329. package/src/pages/forms/toggle-buttons.haml +94 -94
  330. package/src/pages/forms/toggle-switch.haml +31 -31
  331. package/src/pages/forms/tomselect.haml +76 -76
  332. package/src/pages/forms/trix_editor.pug +10 -10
  333. package/src/pages/forms/uploads.pug +101 -101
  334. package/src/pages/icons/bug-icons.haml +75 -75
  335. package/src/pages/icons/index.njk +83 -83
  336. package/src/pages/icons/marketingicons.haml +15 -15
  337. package/src/pages/icons/status-icons.haml +38 -38
  338. package/src/pages/layout/app_layout.haml +27 -27
  339. package/src/pages/layout/index.njk +6 -6
  340. package/src/pages/layout/max_width.haml +49 -49
  341. package/src/pages/layout/spacing.haml +30 -30
  342. package/src/pages/navigation/header-manager.haml +73 -73
  343. package/src/pages/navigation/header-tester.haml +100 -100
  344. package/src/pages/navigation/header.haml +76 -76
  345. package/src/pages/navigation/header_customer.haml +77 -77
  346. package/src/pages/navigation/header_tester_epam.haml +108 -108
  347. package/src/pages/navigation/index.njk +7 -7
  348. package/src/pages/navigation/product_dropdown.haml +65 -65
  349. package/src/pages/navigation/radio_tabs.haml +22 -22
  350. package/src/pages/navigation/sidebar-manager.haml +46 -46
  351. package/src/pages/navigation/sidebar-tester-elements.haml +105 -105
  352. package/src/pages/navigation/sidebar-tester-seatlimitation.haml +108 -108
  353. package/src/pages/navigation/sidebar-tester.haml +75 -75
  354. package/src/pages/navigation/sidebar.haml +46 -46
  355. package/src/pages/navigation/sidebar_collapsables.haml +136 -136
  356. package/src/pages/navigation/sidebar_customer.haml +146 -146
  357. package/src/pages/navigation/tabnavigation.haml +12 -12
  358. package/src/pages/navigation/tabnavigation_actions.haml +21 -21
  359. package/src/pages/navigation/tabnavigation_pills.haml +12 -12
  360. package/src/pages/navigation/test-header-tester.haml +178 -0
  361. package/src/pages/typography/index.njk +7 -7
  362. package/src/pages/typography/link_with_icon.haml +12 -12
  363. package/src/pages/typography/linked_icon.haml +10 -10
  364. package/src/pages/typography/markdown.md +112 -112
  365. package/src/pages/typography/section_header.haml +25 -25
  366. package/src/pages/typography/section_header_actions.haml +59 -59
  367. package/src/pages/typography/text_with_icon.haml +12 -12
  368. package/src/pages/typography/trix_styles.haml +127 -127
  369. package/src/pages/typography/typography.haml +51 -51
  370. package/src/sitemap.xml.njk +13 -13
  371. package/src/static/app.compiled.css +536 -208
  372. package/src/static/app.compiled.css.map +1 -1
  373. package/src/static/browserconfig.xml +9 -9
  374. package/src/static/site.webmanifest +3 -3
  375. package/utils/collections.js +29 -29
  376. package/utils/filters.js +11 -11
  377. package/utils/markdown.js +9 -9
  378. package/utils/shortcodes.js +6 -6
  379. package/utils/transforms.js +19 -19
  380. package/webpack.config.js +24 -24
package/src/pages/forms/rating_scale.haml CHANGED
@@ -1,62 +1,62 @@
1
- ---
2
- tags: forms
3
- title: Rating scale
4
- ---
5
-
6
- .form-grid
7
- .rating-wrapper
8
- .rating-labels
9
- .label-min Minimum
10
- .label-max Maximum
11
- .rating-scale
12
- .selectable-token
13
- %input#rating1{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
14
- %label{for:'rating1'} 1
15
- .selectable-token
16
- %input#rating2{type:'radio', name:'radio-togglegroup1', value:'2'}
17
- %label{for:'rating2'} 2
18
- .selectable-token
19
- %input#rating3{type:'radio', name:'radio-togglegroup1', value:'3'}
20
- %label{for:'rating3'} 3
21
- .selectable-token
22
- %input#rating4{type:'radio', name:'radio-togglegroup1', value:'3'}
23
- %label{for:'rating4'} 4
24
- .selectable-token
25
- %input#rating5{type:'radio', name:'radio-togglegroup1', value:'3'}
26
- %label{for:'rating5'} 5
27
- .rating-wrapper
28
- .rating-labels
29
- .label-min Minimum label with a lot of redundant text showing how things break
30
- .label-max Maximum label with a lot of redundant text showing how things break
31
- .rating-scale
32
- .selectable-token
33
- %input#rating11{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
34
- %label{for:'rating11'} 1
35
- .selectable-token
36
- %input#rating12{type:'radio', name:'radio-togglegroup1', value:'2'}
37
- %label{for:'rating12'} 2
38
- .selectable-token
39
- %input#rating13{type:'radio', name:'radio-togglegroup1', value:'3'}
40
- %label{for:'rating13'} 3
41
- .selectable-token
42
- %input#rating14{type:'radio', name:'radio-togglegroup1', value:'3'}
43
- %label{for:'rating14'} 4
44
- .selectable-token
45
- %input#rating15{type:'radio', name:'radio-togglegroup1', value:'3'}
46
- %label{for:'rating15'} 5
47
- .selectable-token
48
- %input#rating16{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
49
- %label{for:'rating16'} 6
50
- .selectable-token
51
- %input#rating17{type:'radio', name:'radio-togglegroup1', value:'2'}
52
- %label{for:'rating17'} 7
53
- .selectable-token
54
- %input#rating18{type:'radio', name:'radio-togglegroup1', value:'3'}
55
- %label{for:'rating18'} 8
56
- .selectable-token
57
- %input#rating19{type:'radio', name:'radio-togglegroup1', value:'3'}
58
- %label{for:'rating19'} 9
59
- .selectable-token
60
- %input#rating20{type:'radio', name:'radio-togglegroup1', value:'3'}
61
- %label{for:'rating20'} 10
62
-
1
+ ---
2
+ tags: forms
3
+ title: Rating scale
4
+ ---
5
+
6
+ .form-grid
7
+ .rating-wrapper
8
+ .rating-labels
9
+ .label-min Minimum
10
+ .label-max Maximum
11
+ .rating-scale
12
+ .selectable-token
13
+ %input#rating1{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
14
+ %label{for:'rating1'} 1
15
+ .selectable-token
16
+ %input#rating2{type:'radio', name:'radio-togglegroup1', value:'2'}
17
+ %label{for:'rating2'} 2
18
+ .selectable-token
19
+ %input#rating3{type:'radio', name:'radio-togglegroup1', value:'3'}
20
+ %label{for:'rating3'} 3
21
+ .selectable-token
22
+ %input#rating4{type:'radio', name:'radio-togglegroup1', value:'3'}
23
+ %label{for:'rating4'} 4
24
+ .selectable-token
25
+ %input#rating5{type:'radio', name:'radio-togglegroup1', value:'3'}
26
+ %label{for:'rating5'} 5
27
+ .rating-wrapper
28
+ .rating-labels
29
+ .label-min Minimum label with a lot of redundant text showing how things break
30
+ .label-max Maximum label with a lot of redundant text showing how things break
31
+ .rating-scale
32
+ .selectable-token
33
+ %input#rating11{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
34
+ %label{for:'rating11'} 1
35
+ .selectable-token
36
+ %input#rating12{type:'radio', name:'radio-togglegroup1', value:'2'}
37
+ %label{for:'rating12'} 2
38
+ .selectable-token
39
+ %input#rating13{type:'radio', name:'radio-togglegroup1', value:'3'}
40
+ %label{for:'rating13'} 3
41
+ .selectable-token
42
+ %input#rating14{type:'radio', name:'radio-togglegroup1', value:'3'}
43
+ %label{for:'rating14'} 4
44
+ .selectable-token
45
+ %input#rating15{type:'radio', name:'radio-togglegroup1', value:'3'}
46
+ %label{for:'rating15'} 5
47
+ .selectable-token
48
+ %input#rating16{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
49
+ %label{for:'rating16'} 6
50
+ .selectable-token
51
+ %input#rating17{type:'radio', name:'radio-togglegroup1', value:'2'}
52
+ %label{for:'rating17'} 7
53
+ .selectable-token
54
+ %input#rating18{type:'radio', name:'radio-togglegroup1', value:'3'}
55
+ %label{for:'rating18'} 8
56
+ .selectable-token
57
+ %input#rating19{type:'radio', name:'radio-togglegroup1', value:'3'}
58
+ %label{for:'rating19'} 9
59
+ .selectable-token
60
+ %input#rating20{type:'radio', name:'radio-togglegroup1', value:'3'}
61
+ %label{for:'rating20'} 10
62
+
package/src/pages/forms/search.haml CHANGED
@@ -1,71 +1,71 @@
1
- ---
2
- tags: "forms"
3
- title: Search
4
- ---
5
-
6
- .form-grid
7
- .form-group
8
- %label.form-label Search, direct input
9
- %form.form-search.direct-input
10
- %input.form-control{type:'Search', placeholder:"Type to search"}
11
- %button.btn.btn-clear{type:'reset'}
12
- .form-group
13
- %label.form-label Search with submit
14
- %form.form-search
15
- %input.form-control{type:'Search', placeholder:"Search for something"}
16
- %button.btn.btn-clear{type:'reset'}
17
- %button.btn.btn-submit{type:'submit'}
18
- .form-group
19
- %label.form-label Search popover
20
- %details.popover-wrapper.dropright
21
- %summary
22
- .btn.btn-square
23
- .icon.icon-search
24
- .popover-menu.search
25
- %form.form-search.inverted
26
- %input.form-control{type:'Search', placeholder:"Search for something"}
27
- %button.btn.btn-clear{type:'reset'}
28
- %button.btn.btn-submit{type:'submit'}
29
- .form-group
30
- %label.form-label Search popover with result selection
31
- %details.popover-wrapper.dropright
32
- %summary
33
- .btn.btn-square
34
- .icon.icon-search
35
- .popover-menu.search
36
- %form.form-search.inverted
37
- %input.form-control{type:'Search', placeholder:"Search for something"}
38
- %button.btn.btn-clear{type:'reset'}
39
- %button.btn.btn-submit{type:'submit'}
40
- .list-searchresults
41
- %a.issue-item{href:""}
42
- .issue-icon.icon.icon-critical
43
- .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
44
- .issue-info issue info | issue ID | issue type
45
- %a.issue-item{href:""}
46
- .issue-icon.icon.icon-high
47
- .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
48
- .issue-info Cirro | #123321 | High
49
- %a.issue-item{href:""}
50
- .issue-icon.icon.icon-low
51
- .issue-title issue title with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
52
- .issue-info issue info with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
53
- %a.issue-item{href:""}
54
- .issue-icon.icon.icon-bug-reproduction.critical
55
- .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
56
- .issue-info issue info | issue ID | issue type
57
- %a.issue-item{href:""}
58
- .issue-icon.icon.icon-bug-fix-confirmation.high
59
- .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
60
- .issue-info Cirro | #123321 | Bug Fix Confirmation
61
- %a.issue-item{href:""}
62
- .issue-icon.icon.icon-bug-reproduction
63
- .issue-title issue title with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
64
- .issue-info issue info with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
65
- .form-grid.bg-black.p-3.mt-xs
66
- .form-group.inverted
67
- %label.form-label Inverted
68
- %form.form-search.inverted
69
- %input.form-control{type:'Search', placeholder:"Search for something"}
70
- %button.btn.btn-clear{type:'reset'}
71
- %button.btn.btn-submit{type:'submit'}
1
+ ---
2
+ tags: "forms"
3
+ title: Search
4
+ ---
5
+
6
+ .form-grid
7
+ .form-group
8
+ %label.form-label Search, direct input
9
+ %form.form-search.direct-input
10
+ %input.form-control{type:'Search', placeholder:"Type to search"}
11
+ %button.btn.btn-clear{type:'reset'}
12
+ .form-group
13
+ %label.form-label Search with submit
14
+ %form.form-search
15
+ %input.form-control{type:'Search', placeholder:"Search for something"}
16
+ %button.btn.btn-clear{type:'reset'}
17
+ %button.btn.btn-submit{type:'submit'}
18
+ .form-group
19
+ %label.form-label Search popover
20
+ %details.popover-wrapper.dropright
21
+ %summary
22
+ .btn.btn-square
23
+ .icon.icon-search
24
+ .popover-menu.search
25
+ %form.form-search.inverted
26
+ %input.form-control{type:'Search', placeholder:"Search for something"}
27
+ %button.btn.btn-clear{type:'reset'}
28
+ %button.btn.btn-submit{type:'submit'}
29
+ .form-group
30
+ %label.form-label Search popover with result selection
31
+ %details.popover-wrapper.dropright
32
+ %summary
33
+ .btn.btn-square
34
+ .icon.icon-search
35
+ .popover-menu.search
36
+ %form.form-search.inverted
37
+ %input.form-control{type:'Search', placeholder:"Search for something"}
38
+ %button.btn.btn-clear{type:'reset'}
39
+ %button.btn.btn-submit{type:'submit'}
40
+ .list-searchresults
41
+ %a.issue-item{href:""}
42
+ .issue-icon.icon.icon-critical
43
+ .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
44
+ .issue-info issue info | issue ID | issue type
45
+ %a.issue-item{href:""}
46
+ .issue-icon.icon.icon-high
47
+ .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
48
+ .issue-info Cirro | #123321 | High
49
+ %a.issue-item{href:""}
50
+ .issue-icon.icon.icon-low
51
+ .issue-title issue title with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
52
+ .issue-info issue info with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
53
+ %a.issue-item{href:""}
54
+ .issue-icon.icon.icon-bug-reproduction.critical
55
+ .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
56
+ .issue-info issue info | issue ID | issue type
57
+ %a.issue-item{href:""}
58
+ .issue-icon.icon.icon-bug-fix-confirmation.high
59
+ .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
60
+ .issue-info Cirro | #123321 | Bug Fix Confirmation
61
+ %a.issue-item{href:""}
62
+ .issue-icon.icon.icon-bug-reproduction
63
+ .issue-title issue title with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
64
+ .issue-info issue info with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
65
+ .form-grid.bg-black.p-3.mt-xs
66
+ .form-group.inverted
67
+ %label.form-label Inverted
68
+ %form.form-search.inverted
69
+ %input.form-control{type:'Search', placeholder:"Search for something"}
70
+ %button.btn.btn-clear{type:'reset'}
71
+ %button.btn.btn-submit{type:'submit'}
package/src/pages/forms/select2.haml CHANGED
@@ -1,72 +1,72 @@
1
- ---
2
- tags: forms
3
- title: Select2
4
- ---
5
-
6
- %p.mb-heading
7
- %span These selects use the
8
- %a{href:"https://select2.org/"} Select2 Library
9
- %span .
10
- .form-grid.single
11
- .form-group.form-select
12
- %label.form-label Select
13
- %select.select2{placeholder: "Please select"}
14
- %option{value:"Option 1"} Option 1
15
- %option{value:"Option 2"} Option 2
16
- %option{value:"Option 3"} Option 3
17
- %option{value:"Option 4"} ABC
18
- %option{value:"Option 5"} DEF
19
- %option{value:"Option 6"} WHY
20
- %option{value:"Option 7"} XYZ
21
- %p.mt-3 If you have some errors on the field
22
- .form-group.form-select
23
- .field_with_errors
24
- %label.form-label Select
25
- .field_with_errors
26
- %select.select2{placeholder: "Please select"}
27
- %option{value:"Option 1"} Option 1
28
- %option{value:"Option 2"} Option 2
29
- %option{value:"Option 3"} Option 3
30
- %option{value:"Option 4"} ABC
31
- %option{value:"Option 5"} DEF
32
- %option{value:"Option 6"} WHY
33
- %option{value:"Option 7"} XYZ
34
- .form-hint.error
35
- You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
36
- %p.mt-3 Use opt-groups to display hints inside the select
37
- .form-group.form-select
38
- %label.form-label Optgroup select
39
- %select.select2{placeholder: "Please select"}
40
- %optgroup{label: "Optgroup label for categories and such"}
41
- %option Option 1
42
- %option Option 2
43
- %option Option 3
44
- %option ABC
45
- %option DEF
46
- %option WHY
47
- %option XYZ
48
- %p.mt-3 Disabled select example
49
- .form-group.form-select
50
- %label.form-label Disabled
51
- %select.select2{placeholder: "Please select", disabled:"true"}
52
- %option Option 1
53
- %option Option 2
54
- %option Option 3
55
- %option ABC
56
- %option DEF
57
- %option WHY
58
- %option XYZ
59
- %p.mt-3 Multi selects display the selected options as removable tags.
60
- .form-group.multi-select
61
- %label.form-label Select multiple
62
- %select.select2{multiple: 'true', placeholder: "Please select"}
63
- %option Option 1
64
- %option Option 2
65
- %option Option 3
66
- %option Option 4
67
- %option Option 5
68
- %option ABC
69
- %option DEF
70
- %option WHY
71
- %option XYZ
72
-
1
+ ---
2
+ tags: forms
3
+ title: Select2
4
+ ---
5
+
6
+ %p.mb-heading
7
+ %span These selects use the
8
+ %a{href:"https://select2.org/"} Select2 Library
9
+ %span .
10
+ .form-grid.single
11
+ .form-group.form-select
12
+ %label.form-label Select
13
+ %select.select2{placeholder: "Please select"}
14
+ %option{value:"Option 1"} Option 1
15
+ %option{value:"Option 2"} Option 2
16
+ %option{value:"Option 3"} Option 3
17
+ %option{value:"Option 4"} ABC
18
+ %option{value:"Option 5"} DEF
19
+ %option{value:"Option 6"} WHY
20
+ %option{value:"Option 7"} XYZ
21
+ %p.mt-3 If you have some errors on the field
22
+ .form-group.form-select
23
+ .field_with_errors
24
+ %label.form-label Select
25
+ .field_with_errors
26
+ %select.select2{placeholder: "Please select"}
27
+ %option{value:"Option 1"} Option 1
28
+ %option{value:"Option 2"} Option 2
29
+ %option{value:"Option 3"} Option 3
30
+ %option{value:"Option 4"} ABC
31
+ %option{value:"Option 5"} DEF
32
+ %option{value:"Option 6"} WHY
33
+ %option{value:"Option 7"} XYZ
34
+ .form-hint.error
35
+ You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
36
+ %p.mt-3 Use opt-groups to display hints inside the select
37
+ .form-group.form-select
38
+ %label.form-label Optgroup select
39
+ %select.select2{placeholder: "Please select"}
40
+ %optgroup{label: "Optgroup label for categories and such"}
41
+ %option Option 1
42
+ %option Option 2
43
+ %option Option 3
44
+ %option ABC
45
+ %option DEF
46
+ %option WHY
47
+ %option XYZ
48
+ %p.mt-3 Disabled select example
49
+ .form-group.form-select
50
+ %label.form-label Disabled
51
+ %select.select2{placeholder: "Please select", disabled:"true"}
52
+ %option Option 1
53
+ %option Option 2
54
+ %option Option 3
55
+ %option ABC
56
+ %option DEF
57
+ %option WHY
58
+ %option XYZ
59
+ %p.mt-3 Multi selects display the selected options as removable tags.
60
+ .form-group.multi-select
61
+ %label.form-label Select multiple
62
+ %select.select2{multiple: 'true', placeholder: "Please select"}
63
+ %option Option 1
64
+ %option Option 2
65
+ %option Option 3
66
+ %option Option 4
67
+ %option Option 5
68
+ %option ABC
69
+ %option DEF
70
+ %option WHY
71
+ %option XYZ
72
+
package/src/pages/forms/select_native.haml CHANGED
@@ -1,74 +1,74 @@
1
- ---
2
- tags: forms
3
- title: Select native
4
- ---
5
-
6
- %p.mb-heading Styling for native selects. Using our custom themes for the libraries Tom Select or Select2 is prefered.
7
- .form-grid.single
8
- .form-group.form-select-native
9
- %label.form-label Select
10
- .select-wrapper
11
- %select{placeholder: "Please select"}
12
- %option{value: ""} Please select
13
- %option{value:"Option 1"} Option 1
14
- %option{value:"Option 2"} Option 2
15
- %option{value:"Option 3"} Option 3
16
- %option{value:"Option 4"} ABC
17
- %option{value:"Option 5"} DEF
18
- %option{value:"Option 6"} WHY
19
- %option{value:"Option 7"} XYZ
20
- %p.mt-3 If you have some errors on the field
21
- .form-group.form-select-native
22
- .field_with_errors
23
- %label.form-label Select
24
- .field_with_errors
25
- .select-wrapper
26
- %select{placeholder: "Please select"}
27
- %option{value: ""} Please select
28
- %option{value:"Option 1"} Option 1
29
- %option{value:"Option 2"} Option 2
30
- %option{value:"Option 3"} Option 3
31
- %option{value:"Option 4"} ABC
32
- %option{value:"Option 5"} DEF
33
- %option{value:"Option 6"} WHY
34
- %option{value:"Option 7"} XYZ
35
- .form-hint.error
36
- You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
37
- %p.mt-3 Use opt-groups to display hints inside the select
38
- .form-group.form-select-native
39
- %label.form-label Optgroup select
40
- .select-wrapper
41
- %select{placeholder: "Please select"}
42
- %optgroup{label: "Here's a helper text that explains further information about the options of this dropdown"}
43
- %option{value: ""} Please select
44
- %option Option 1
45
- %option Option 2
46
- %option Option 3
47
- %option ABC
48
- %option DEF
49
- %option WHY
50
- %option XYZ
51
- %optgroup{label: "Optgroup label"}
52
- %option{value: ""} Please select
53
- %option Option 1
54
- %option Option 2
55
- %option Option 3
56
- %option ABC
57
- %option DEF
58
- %option WHY
59
- %option XYZ
60
- %p.mt-3 Disabled select example
61
- .form-group.form-select-native
62
- %label.form-label Disabled
63
- .select-wrapper
64
- %select{placeholder: "Please select", disabled:"true"}
65
- %option{value: ""} Please select
66
- %option Option 1
67
- %option Option 2
68
- %option Option 3
69
- %option ABC
70
- %option DEF
71
- %option WHY
72
- %option XYZ
73
-
74
-
1
+ ---
2
+ tags: forms
3
+ title: Select native
4
+ ---
5
+
6
+ %p.mb-heading Styling for native selects. Using our custom themes for the libraries Tom Select or Select2 is prefered.
7
+ .form-grid.single
8
+ .form-group.form-select-native
9
+ %label.form-label Select
10
+ .select-wrapper
11
+ %select{placeholder: "Please select"}
12
+ %option{value: ""} Please select
13
+ %option{value:"Option 1"} Option 1
14
+ %option{value:"Option 2"} Option 2
15
+ %option{value:"Option 3"} Option 3
16
+ %option{value:"Option 4"} ABC
17
+ %option{value:"Option 5"} DEF
18
+ %option{value:"Option 6"} WHY
19
+ %option{value:"Option 7"} XYZ
20
+ %p.mt-3 If you have some errors on the field
21
+ .form-group.form-select-native
22
+ .field_with_errors
23
+ %label.form-label Select
24
+ .field_with_errors
25
+ .select-wrapper
26
+ %select{placeholder: "Please select"}
27
+ %option{value: ""} Please select
28
+ %option{value:"Option 1"} Option 1
29
+ %option{value:"Option 2"} Option 2
30
+ %option{value:"Option 3"} Option 3
31
+ %option{value:"Option 4"} ABC
32
+ %option{value:"Option 5"} DEF
33
+ %option{value:"Option 6"} WHY
34
+ %option{value:"Option 7"} XYZ
35
+ .form-hint.error
36
+ You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
37
+ %p.mt-3 Use opt-groups to display hints inside the select
38
+ .form-group.form-select-native
39
+ %label.form-label Optgroup select
40
+ .select-wrapper
41
+ %select{placeholder: "Please select"}
42
+ %optgroup{label: "Here's a helper text that explains further information about the options of this dropdown"}
43
+ %option{value: ""} Please select
44
+ %option Option 1
45
+ %option Option 2
46
+ %option Option 3
47
+ %option ABC
48
+ %option DEF
49
+ %option WHY
50
+ %option XYZ
51
+ %optgroup{label: "Optgroup label"}
52
+ %option{value: ""} Please select
53
+ %option Option 1
54
+ %option Option 2
55
+ %option Option 3
56
+ %option ABC
57
+ %option DEF
58
+ %option WHY
59
+ %option XYZ
60
+ %p.mt-3 Disabled select example
61
+ .form-group.form-select-native
62
+ %label.form-label Disabled
63
+ .select-wrapper
64
+ %select{placeholder: "Please select", disabled:"true"}
65
+ %option{value: ""} Please select
66
+ %option Option 1
67
+ %option Option 2
68
+ %option Option 3
69
+ %option ABC
70
+ %option DEF
71
+ %option WHY
72
+ %option XYZ
73
+
74
+