@ccrpc/webmapgl 0.18.6 → 0.18.8

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 (250) hide show
  1. package/dist/cjs/app-globals-62694daf.js.map +1 -1
  2. package/dist/cjs/gl-address-search_52.cjs.entry.js +31 -30
  3. package/dist/cjs/gl-address-search_52.cjs.entry.js.map +1 -1
  4. package/dist/cjs/gl-draw-toolbar.cjs.entry.js +3 -3
  5. package/dist/cjs/gl-draw-toolbar.cjs.entry.js.map +1 -1
  6. package/dist/cjs/gl-facet_5.cjs.entry.js +1 -1
  7. package/dist/cjs/gl-facet_5.cjs.entry.js.map +1 -1
  8. package/dist/cjs/gl-like-button.cjs.entry.js +5 -5
  9. package/dist/cjs/gl-like-button.cjs.entry.js.map +1 -1
  10. package/dist/cjs/index.cjs.js +11 -0
  11. package/dist/cjs/index.cjs.js.map +1 -1
  12. package/dist/collection/components/address-search/address-search.js +4 -4
  13. package/dist/collection/components/address-search/address-search.js.map +1 -1
  14. package/dist/collection/components/app/app.js +1 -1
  15. package/dist/collection/components/app/app.js.map +1 -1
  16. package/dist/collection/components/attribute-values/attribute-values.js +1 -1
  17. package/dist/collection/components/basemaps/basemaps.js +2 -2
  18. package/dist/collection/components/basemaps/basemaps.js.map +1 -1
  19. package/dist/collection/components/download-button/download-button.js +3 -3
  20. package/dist/collection/components/download-button/download-button.js.map +1 -1
  21. package/dist/collection/components/download-list/download-list.js +2 -1
  22. package/dist/collection/components/download-list/download-list.js.map +1 -1
  23. package/dist/collection/components/draw-toolbar/draw-toolbar.js +4 -4
  24. package/dist/collection/components/draw-toolbar/draw-toolbar.js.map +1 -1
  25. package/dist/collection/components/drawer/drawer.js +4 -4
  26. package/dist/collection/components/drawer/drawer.js.map +1 -1
  27. package/dist/collection/components/drawer-toggle/drawer-toggle.js +1 -1
  28. package/dist/collection/components/drawer-toggle/drawer-toggle.js.map +1 -1
  29. package/dist/collection/components/feature-list/feature-list.js +1 -1
  30. package/dist/collection/components/form-page/form-page.js +2 -2
  31. package/dist/collection/components/form-page/form-page.js.map +1 -1
  32. package/dist/collection/components/fullscreen/fullscreen.js +1 -1
  33. package/dist/collection/components/fullscreen/fullscreen.js.map +1 -1
  34. package/dist/collection/components/legend-item/legend-item.js +2 -2
  35. package/dist/collection/components/legend-item/legend-item.js.map +1 -1
  36. package/dist/collection/components/like-button/like-button.js +6 -6
  37. package/dist/collection/components/like-button/like-button.js.map +1 -1
  38. package/dist/collection/components/share/share.js +3 -3
  39. package/dist/collection/components/share/share.js.map +1 -1
  40. package/dist/collection/components/share-button/share-button.js +2 -2
  41. package/dist/collection/components/share-button/share-button.js.map +1 -1
  42. package/dist/collection/components/story-button/story-button.js +4 -4
  43. package/dist/collection/components/story-button/story-button.js.map +1 -1
  44. package/dist/collection/components/style/style.js +3 -3
  45. package/dist/collection/components/table-column-visibility/table-column-visibility.js +1 -1
  46. package/dist/collection/components/table-column-visibility/table-column-visibility.js.map +1 -1
  47. package/dist/collection/components/table-column-visibility-button/table-column-visibility-button.js +3 -3
  48. package/dist/collection/components/table-column-visibility-button/table-column-visibility-button.js.map +1 -1
  49. package/dist/collection/components/table-export-button/table-export-button.js +1 -1
  50. package/dist/collection/components/table-export-button/table-export-button.js.map +1 -1
  51. package/dist/collection/global/webmapgl.js +1 -0
  52. package/dist/collection/global/webmapgl.js.map +1 -1
  53. package/dist/collection/index.js +2 -0
  54. package/dist/collection/index.js.map +1 -0
  55. package/dist/esm/app-globals-755c21e9.js.map +1 -1
  56. package/dist/esm/gl-address-search_52.entry.js +32 -31
  57. package/dist/esm/gl-address-search_52.entry.js.map +1 -1
  58. package/dist/esm/gl-draw-controller.entry.js +1 -1
  59. package/dist/esm/gl-draw-toolbar.entry.js +3 -3
  60. package/dist/esm/gl-draw-toolbar.entry.js.map +1 -1
  61. package/dist/esm/gl-facet_5.entry.js +2 -2
  62. package/dist/esm/gl-facet_5.entry.js.map +1 -1
  63. package/dist/esm/gl-feature-list.entry.js +1 -1
  64. package/dist/esm/gl-like-button.entry.js +6 -6
  65. package/dist/esm/gl-like-button.entry.js.map +1 -1
  66. package/dist/esm/gl-table-export-controller.entry.js +1 -1
  67. package/dist/esm/index.js +2 -1
  68. package/dist/esm/index.js.map +1 -1
  69. package/dist/esm/polyfills/core-js.js +0 -0
  70. package/dist/esm/polyfills/dom.js +0 -0
  71. package/dist/esm/polyfills/es5-html-element.js +0 -0
  72. package/dist/esm/polyfills/index.js +0 -0
  73. package/dist/esm/polyfills/system.js +0 -0
  74. package/dist/esm/{utils-0af5fee1.js → utils-e86257fd.js} +2 -2
  75. package/dist/esm/{utils-0af5fee1.js.map → utils-e86257fd.js.map} +1 -1
  76. package/dist/node_modules/@ionic/core/dist/collection/components/accordion/accordion.ios.css +83 -0
  77. package/dist/node_modules/@ionic/core/dist/collection/components/accordion/accordion.md.css +80 -0
  78. package/dist/node_modules/@ionic/core/dist/collection/components/accordion-group/accordion-group.ios.css +17 -0
  79. package/dist/node_modules/@ionic/core/dist/collection/components/accordion-group/accordion-group.md.css +64 -0
  80. package/dist/node_modules/@ionic/core/dist/collection/components/action-sheet/action-sheet.ios.css +319 -0
  81. package/dist/node_modules/@ionic/core/dist/collection/components/action-sheet/action-sheet.md.css +259 -0
  82. package/dist/node_modules/@ionic/core/dist/collection/components/alert/alert.ios.css +503 -0
  83. package/dist/node_modules/@ionic/core/dist/collection/components/alert/alert.md.css +531 -0
  84. package/dist/node_modules/@ionic/core/dist/collection/components/app/app.css +17 -0
  85. package/dist/node_modules/@ionic/core/dist/collection/components/avatar/avatar.ios.css +22 -0
  86. package/dist/node_modules/@ionic/core/dist/collection/components/avatar/avatar.md.css +22 -0
  87. package/dist/node_modules/@ionic/core/dist/collection/components/back-button/back-button.ios.css +246 -0
  88. package/dist/node_modules/@ionic/core/dist/collection/components/back-button/back-button.md.css +269 -0
  89. package/dist/node_modules/@ionic/core/dist/collection/components/backdrop/backdrop.ios.css +26 -0
  90. package/dist/node_modules/@ionic/core/dist/collection/components/backdrop/backdrop.md.css +26 -0
  91. package/dist/node_modules/@ionic/core/dist/collection/components/badge/badge.ios.css +50 -0
  92. package/dist/node_modules/@ionic/core/dist/collection/components/badge/badge.md.css +54 -0
  93. package/dist/node_modules/@ionic/core/dist/collection/components/breadcrumb/breadcrumb.ios.css +205 -0
  94. package/dist/node_modules/@ionic/core/dist/collection/components/breadcrumb/breadcrumb.md.css +200 -0
  95. package/dist/node_modules/@ionic/core/dist/collection/components/breadcrumbs/breadcrumbs.ios.css +26 -0
  96. package/dist/node_modules/@ionic/core/dist/collection/components/breadcrumbs/breadcrumbs.md.css +25 -0
  97. package/dist/node_modules/@ionic/core/dist/collection/components/button/button.ios.css +431 -0
  98. package/dist/node_modules/@ionic/core/dist/collection/components/button/button.md.css +408 -0
  99. package/dist/node_modules/@ionic/core/dist/collection/components/buttons/buttons.ios.css +114 -0
  100. package/dist/node_modules/@ionic/core/dist/collection/components/buttons/buttons.md.css +134 -0
  101. package/dist/node_modules/@ionic/core/dist/collection/components/card/card.ios.css +93 -0
  102. package/dist/node_modules/@ionic/core/dist/collection/components/card/card.md.css +88 -0
  103. package/dist/node_modules/@ionic/core/dist/collection/components/card-content/card-content.ios.css +53 -0
  104. package/dist/node_modules/@ionic/core/dist/collection/components/card-content/card-content.md.css +55 -0
  105. package/dist/node_modules/@ionic/core/dist/collection/components/card-header/card-header.ios.css +31 -0
  106. package/dist/node_modules/@ionic/core/dist/collection/components/card-header/card-header.md.css +28 -0
  107. package/dist/node_modules/@ionic/core/dist/collection/components/card-subtitle/card-subtitle.ios.css +28 -0
  108. package/dist/node_modules/@ionic/core/dist/collection/components/card-subtitle/card-subtitle.md.css +26 -0
  109. package/dist/node_modules/@ionic/core/dist/collection/components/card-title/card-title.ios.css +27 -0
  110. package/dist/node_modules/@ionic/core/dist/collection/components/card-title/card-title.md.css +27 -0
  111. package/dist/node_modules/@ionic/core/dist/collection/components/checkbox/checkbox.ios.css +310 -0
  112. package/dist/node_modules/@ionic/core/dist/collection/components/checkbox/checkbox.md.css +326 -0
  113. package/dist/node_modules/@ionic/core/dist/collection/components/chip/chip.css +149 -0
  114. package/dist/node_modules/@ionic/core/dist/collection/components/col/col.css +68 -0
  115. package/dist/node_modules/@ionic/core/dist/collection/components/content/content.css +227 -0
  116. package/dist/node_modules/@ionic/core/dist/collection/components/datetime/datetime.ios.css +589 -0
  117. package/dist/node_modules/@ionic/core/dist/collection/components/datetime/datetime.md.css +561 -0
  118. package/dist/node_modules/@ionic/core/dist/collection/components/datetime-button/datetime-button.css +44 -0
  119. package/dist/node_modules/@ionic/core/dist/collection/components/fab/fab.css +98 -0
  120. package/dist/node_modules/@ionic/core/dist/collection/components/fab-button/fab-button.ios.css +312 -0
  121. package/dist/node_modules/@ionic/core/dist/collection/components/fab-button/fab-button.md.css +283 -0
  122. package/dist/node_modules/@ionic/core/dist/collection/components/fab-list/fab-list.css +123 -0
  123. package/dist/node_modules/@ionic/core/dist/collection/components/footer/footer.ios.css +36 -0
  124. package/dist/node_modules/@ionic/core/dist/collection/components/footer/footer.md.css +19 -0
  125. package/dist/node_modules/@ionic/core/dist/collection/components/grid/grid.css +103 -0
  126. package/dist/node_modules/@ionic/core/dist/collection/components/header/header.ios.css +106 -0
  127. package/dist/node_modules/@ionic/core/dist/collection/components/header/header.md.css +23 -0
  128. package/dist/node_modules/@ionic/core/dist/collection/components/img/img.css +12 -0
  129. package/dist/node_modules/@ionic/core/dist/collection/components/infinite-scroll/infinite-scroll.css +8 -0
  130. package/dist/node_modules/@ionic/core/dist/collection/components/infinite-scroll-content/infinite-scroll-content.ios.css +46 -0
  131. package/dist/node_modules/@ionic/core/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css +46 -0
  132. package/dist/node_modules/@ionic/core/dist/collection/components/input/input.ios.css +635 -0
  133. package/dist/node_modules/@ionic/core/dist/collection/components/input/input.md.css +1077 -0
  134. package/dist/node_modules/@ionic/core/dist/collection/components/item/item.ios.css +646 -0
  135. package/dist/node_modules/@ionic/core/dist/collection/components/item/item.md.css +908 -0
  136. package/dist/node_modules/@ionic/core/dist/collection/components/item-divider/item-divider.ios.css +166 -0
  137. package/dist/node_modules/@ionic/core/dist/collection/components/item-divider/item-divider.md.css +232 -0
  138. package/dist/node_modules/@ionic/core/dist/collection/components/item-group/item-group.ios.css +3 -0
  139. package/dist/node_modules/@ionic/core/dist/collection/components/item-group/item-group.md.css +3 -0
  140. package/dist/node_modules/@ionic/core/dist/collection/components/item-option/item-option.ios.css +142 -0
  141. package/dist/node_modules/@ionic/core/dist/collection/components/item-option/item-option.md.css +136 -0
  142. package/dist/node_modules/@ionic/core/dist/collection/components/item-options/item-options.ios.css +121 -0
  143. package/dist/node_modules/@ionic/core/dist/collection/components/item-options/item-options.md.css +118 -0
  144. package/dist/node_modules/@ionic/core/dist/collection/components/item-sliding/item-sliding.css +66 -0
  145. package/dist/node_modules/@ionic/core/dist/collection/components/label/label.ios.css +164 -0
  146. package/dist/node_modules/@ionic/core/dist/collection/components/label/label.md.css +251 -0
  147. package/dist/node_modules/@ionic/core/dist/collection/components/list/list.ios.css +63 -0
  148. package/dist/node_modules/@ionic/core/dist/collection/components/list/list.md.css +104 -0
  149. package/dist/node_modules/@ionic/core/dist/collection/components/list-header/list-header.ios.css +107 -0
  150. package/dist/node_modules/@ionic/core/dist/collection/components/list-header/list-header.md.css +88 -0
  151. package/dist/node_modules/@ionic/core/dist/collection/components/loading/loading.ios.css +95 -0
  152. package/dist/node_modules/@ionic/core/dist/collection/components/loading/loading.md.css +86 -0
  153. package/dist/node_modules/@ionic/core/dist/collection/components/menu/menu.ios.css +167 -0
  154. package/dist/node_modules/@ionic/core/dist/collection/components/menu/menu.md.css +163 -0
  155. package/dist/node_modules/@ionic/core/dist/collection/components/menu-button/menu-button.ios.css +167 -0
  156. package/dist/node_modules/@ionic/core/dist/collection/components/menu-button/menu-button.md.css +170 -0
  157. package/dist/node_modules/@ionic/core/dist/collection/components/menu-toggle/menu-toggle.css +3 -0
  158. package/dist/node_modules/@ionic/core/dist/collection/components/modal/modal.ios.css +247 -0
  159. package/dist/node_modules/@ionic/core/dist/collection/components/modal/modal.md.css +162 -0
  160. package/dist/node_modules/@ionic/core/dist/collection/components/nav/nav.css +10 -0
  161. package/dist/node_modules/@ionic/core/dist/collection/components/note/note.ios.css +16 -0
  162. package/dist/node_modules/@ionic/core/dist/collection/components/note/note.md.css +17 -0
  163. package/dist/node_modules/@ionic/core/dist/collection/components/picker/picker.ios.css +257 -0
  164. package/dist/node_modules/@ionic/core/dist/collection/components/picker/picker.md.css +244 -0
  165. package/dist/node_modules/@ionic/core/dist/collection/components/picker-column/picker-column.ios.css +145 -0
  166. package/dist/node_modules/@ionic/core/dist/collection/components/picker-column/picker-column.md.css +136 -0
  167. package/dist/node_modules/@ionic/core/dist/collection/components/picker-column-internal/picker-column-internal.ios.css +75 -0
  168. package/dist/node_modules/@ionic/core/dist/collection/components/picker-column-internal/picker-column-internal.md.css +78 -0
  169. package/dist/node_modules/@ionic/core/dist/collection/components/picker-internal/picker-internal.ios.css +152 -0
  170. package/dist/node_modules/@ionic/core/dist/collection/components/picker-internal/picker-internal.md.css +148 -0
  171. package/dist/node_modules/@ionic/core/dist/collection/components/popover/popover.ios.css +250 -0
  172. package/dist/node_modules/@ionic/core/dist/collection/components/popover/popover.md.css +157 -0
  173. package/dist/node_modules/@ionic/core/dist/collection/components/progress-bar/progress-bar.ios.css +206 -0
  174. package/dist/node_modules/@ionic/core/dist/collection/components/progress-bar/progress-bar.md.css +206 -0
  175. package/dist/node_modules/@ionic/core/dist/collection/components/radio/radio.ios.css +331 -0
  176. package/dist/node_modules/@ionic/core/dist/collection/components/radio/radio.md.css +354 -0
  177. package/dist/node_modules/@ionic/core/dist/collection/components/range/range.ios.css +469 -0
  178. package/dist/node_modules/@ionic/core/dist/collection/components/range/range.md.css +614 -0
  179. package/dist/node_modules/@ionic/core/dist/collection/components/refresher/refresher.ios.css +211 -0
  180. package/dist/node_modules/@ionic/core/dist/collection/components/refresher/refresher.md.css +206 -0
  181. package/dist/node_modules/@ionic/core/dist/collection/components/reorder/reorder.ios.css +15 -0
  182. package/dist/node_modules/@ionic/core/dist/collection/components/reorder/reorder.md.css +15 -0
  183. package/dist/node_modules/@ionic/core/dist/collection/components/reorder-group/reorder-group.css +34 -0
  184. package/dist/node_modules/@ionic/core/dist/collection/components/ripple-effect/ripple-effect.css +58 -0
  185. package/dist/node_modules/@ionic/core/dist/collection/components/router-link/router-link.css +29 -0
  186. package/dist/node_modules/@ionic/core/dist/collection/components/router-outlet/route-outlet.css +10 -0
  187. package/dist/node_modules/@ionic/core/dist/collection/components/row/row.css +4 -0
  188. package/dist/node_modules/@ionic/core/dist/collection/components/searchbar/searchbar.ios.css +354 -0
  189. package/dist/node_modules/@ionic/core/dist/collection/components/searchbar/searchbar.md.css +339 -0
  190. package/dist/node_modules/@ionic/core/dist/collection/components/segment/segment.ios.css +59 -0
  191. package/dist/node_modules/@ionic/core/dist/collection/components/segment/segment.md.css +49 -0
  192. package/dist/node_modules/@ionic/core/dist/collection/components/segment-button/segment-button.ios.css +410 -0
  193. package/dist/node_modules/@ionic/core/dist/collection/components/segment-button/segment-button.md.css +396 -0
  194. package/dist/node_modules/@ionic/core/dist/collection/components/select/select.ios.css +552 -0
  195. package/dist/node_modules/@ionic/core/dist/collection/components/select/select.md.css +1025 -0
  196. package/dist/node_modules/@ionic/core/dist/collection/components/select-option/select-option.css +3 -0
  197. package/dist/node_modules/@ionic/core/dist/collection/components/select-popover/select-popover.ios.css +14 -0
  198. package/dist/node_modules/@ionic/core/dist/collection/components/select-popover/select-popover.md.css +37 -0
  199. package/dist/node_modules/@ionic/core/dist/collection/components/skeleton-text/skeleton-text.css +53 -0
  200. package/dist/node_modules/@ionic/core/dist/collection/components/spinner/spinner.css +177 -0
  201. package/dist/node_modules/@ionic/core/dist/collection/components/split-pane/split-pane.ios.css +92 -0
  202. package/dist/node_modules/@ionic/core/dist/collection/components/split-pane/split-pane.md.css +92 -0
  203. package/dist/node_modules/@ionic/core/dist/collection/components/tab/tab.css +4 -0
  204. package/dist/node_modules/@ionic/core/dist/collection/components/tab-bar/tab-bar.ios.css +87 -0
  205. package/dist/node_modules/@ionic/core/dist/collection/components/tab-bar/tab-bar.md.css +74 -0
  206. package/dist/node_modules/@ionic/core/dist/collection/components/tab-button/tab-button.ios.css +367 -0
  207. package/dist/node_modules/@ionic/core/dist/collection/components/tab-button/tab-button.md.css +391 -0
  208. package/dist/node_modules/@ionic/core/dist/collection/components/tabs/tabs.css +19 -0
  209. package/dist/node_modules/@ionic/core/dist/collection/components/text/text.css +3 -0
  210. package/dist/node_modules/@ionic/core/dist/collection/components/textarea/textarea.ios.css +693 -0
  211. package/dist/node_modules/@ionic/core/dist/collection/components/textarea/textarea.md.css +1142 -0
  212. package/dist/node_modules/@ionic/core/dist/collection/components/thumbnail/thumbnail.css +21 -0
  213. package/dist/node_modules/@ionic/core/dist/collection/components/title/title.ios.css +119 -0
  214. package/dist/node_modules/@ionic/core/dist/collection/components/title/title.md.css +47 -0
  215. package/dist/node_modules/@ionic/core/dist/collection/components/toast/toast.ios.css +284 -0
  216. package/dist/node_modules/@ionic/core/dist/collection/components/toast/toast.md.css +305 -0
  217. package/dist/node_modules/@ionic/core/dist/collection/components/toggle/toggle.ios.css +455 -0
  218. package/dist/node_modules/@ionic/core/dist/collection/components/toggle/toggle.md.css +400 -0
  219. package/dist/node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.ios.css +161 -0
  220. package/dist/node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.md.css +136 -0
  221. package/dist/node_modules/ionicons/dist/collection/components/icon/icon.css +101 -0
  222. package/dist/types/global/webmapgl.d.ts +1 -0
  223. package/dist/types/index.d.ts +1 -0
  224. package/dist/webmapgl/index.esm.js +1 -1
  225. package/dist/webmapgl/{p-29a0ba94.entry.js → p-10ecfbc1.entry.js} +3 -3
  226. package/dist/webmapgl/p-10ecfbc1.entry.js.map +1 -0
  227. package/dist/webmapgl/{p-d8674de4.js → p-1109414b.js} +2 -2
  228. package/dist/webmapgl/p-41aed25d.entry.js +8 -0
  229. package/dist/webmapgl/p-41aed25d.entry.js.map +1 -0
  230. package/dist/webmapgl/{p-9a52a393.entry.js → p-4bdbedef.entry.js} +2 -2
  231. package/dist/webmapgl/{p-43063806.entry.js → p-60c4d25c.entry.js} +2 -2
  232. package/dist/webmapgl/{p-47516d22.entry.js → p-725281ca.entry.js} +2 -2
  233. package/dist/webmapgl/{p-8d22e12f.entry.js → p-8e93527b.entry.js} +2 -2
  234. package/dist/webmapgl/p-8e93527b.entry.js.map +1 -0
  235. package/dist/webmapgl/p-b3dc2acc.js.map +1 -1
  236. package/dist/webmapgl/{p-96e77bf2.entry.js → p-c61eaf23.entry.js} +2 -2
  237. package/dist/webmapgl/p-c61eaf23.entry.js.map +1 -0
  238. package/dist/webmapgl/webmapgl.css +1 -1
  239. package/dist/webmapgl/webmapgl.esm.js +1 -1
  240. package/package.json +4 -3
  241. package/CHANGELOG.md +0 -234
  242. package/dist/webmapgl/p-29a0ba94.entry.js.map +0 -1
  243. package/dist/webmapgl/p-8d22e12f.entry.js.map +0 -1
  244. package/dist/webmapgl/p-96e77bf2.entry.js.map +0 -1
  245. package/dist/webmapgl/p-99a83939.entry.js +0 -8
  246. package/dist/webmapgl/p-99a83939.entry.js.map +0 -1
  247. /package/dist/webmapgl/{p-d8674de4.js.map → p-1109414b.js.map} +0 -0
  248. /package/dist/webmapgl/{p-9a52a393.entry.js.map → p-4bdbedef.entry.js.map} +0 -0
  249. /package/dist/webmapgl/{p-43063806.entry.js.map → p-60c4d25c.entry.js.map} +0 -0
  250. /package/dist/webmapgl/{p-47516d22.entry.js.map → p-725281ca.entry.js.map} +0 -0
@@ -0,0 +1,312 @@
1
+ :host {
2
+ /**
3
+ * @prop --background: Background of the button
4
+ * @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
5
+ * @prop --background-activated-opacity: Opacity of the button background when pressed
6
+ * @prop --background-focused: Background of the button when focused with the tab key
7
+ * @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
8
+ * @prop --background-hover: Background of the button on hover
9
+ * @prop --background-hover-opacity: Opacity of the button background on hover
10
+ *
11
+ * @prop --color: Text color of the button
12
+ * @prop --color-activated: Text color of the button when pressed
13
+ * @prop --color-focused: Text color of the button when focused with the tab key
14
+ * @prop --color-hover: Text color of the button on hover
15
+ *
16
+ * @prop --transition: Transition of the button
17
+ *
18
+ * @prop --close-icon-font-size: Font size of the close icon
19
+ *
20
+ * @prop --border-radius: Border radius of the button
21
+ * @prop --border-width: Border width of the button
22
+ * @prop --border-style: Border style of the button
23
+ * @prop --border-color: Border color of the button
24
+ *
25
+ * @prop --ripple-color: Color of the button ripple effect
26
+ *
27
+ * @prop --box-shadow: Box shadow of the button
28
+ *
29
+ * @prop --padding-top: Top padding of the button
30
+ * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
31
+ * @prop --padding-bottom: Bottom padding of the button
32
+ * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
33
+ */
34
+ --color-activated: var(--color);
35
+ --color-focused: var(--color);
36
+ --color-hover: var(--color);
37
+ --background-hover: var(--ion-color-primary-contrast, #fff);
38
+ --background-hover-opacity: .08;
39
+ --transition: background-color, opacity 100ms linear;
40
+ --ripple-color: currentColor;
41
+ --border-radius: 50%;
42
+ --border-width: 0;
43
+ --border-style: none;
44
+ --border-color: initial;
45
+ --padding-top: 0;
46
+ --padding-end: 0;
47
+ --padding-bottom: 0;
48
+ --padding-start: 0;
49
+ margin-left: 0;
50
+ margin-right: 0;
51
+ margin-top: 0;
52
+ margin-bottom: 0;
53
+ display: block;
54
+ width: 56px;
55
+ height: 56px;
56
+ font-size: 14px;
57
+ text-align: center;
58
+ text-overflow: ellipsis;
59
+ text-transform: none;
60
+ white-space: nowrap;
61
+ font-kerning: none;
62
+ }
63
+
64
+ .button-native {
65
+ border-radius: var(--border-radius);
66
+ -webkit-padding-start: var(--padding-start);
67
+ padding-inline-start: var(--padding-start);
68
+ -webkit-padding-end: var(--padding-end);
69
+ padding-inline-end: var(--padding-end);
70
+ padding-top: var(--padding-top);
71
+ padding-bottom: var(--padding-bottom);
72
+ font-family: inherit;
73
+ font-size: inherit;
74
+ font-style: inherit;
75
+ font-weight: inherit;
76
+ letter-spacing: inherit;
77
+ text-decoration: inherit;
78
+ text-indent: inherit;
79
+ text-overflow: inherit;
80
+ text-transform: inherit;
81
+ text-align: inherit;
82
+ white-space: inherit;
83
+ color: inherit;
84
+ display: block;
85
+ position: relative;
86
+ width: 100%;
87
+ height: 100%;
88
+ transform: var(--transform);
89
+ transition: var(--transition);
90
+ border-width: var(--border-width);
91
+ border-style: var(--border-style);
92
+ border-color: var(--border-color);
93
+ outline: none;
94
+ background: var(--background);
95
+ background-clip: padding-box;
96
+ color: var(--color);
97
+ box-shadow: var(--box-shadow);
98
+ contain: strict;
99
+ cursor: pointer;
100
+ overflow: hidden;
101
+ z-index: 0;
102
+ appearance: none;
103
+ box-sizing: border-box;
104
+ }
105
+
106
+ ::slotted(ion-icon) {
107
+ line-height: 1;
108
+ }
109
+
110
+ .button-native::after {
111
+ left: 0;
112
+ right: 0;
113
+ top: 0;
114
+ bottom: 0;
115
+ position: absolute;
116
+ content: "";
117
+ opacity: 0;
118
+ }
119
+
120
+ .button-inner {
121
+ left: 0;
122
+ right: 0;
123
+ top: 0;
124
+ display: flex;
125
+ position: absolute;
126
+ flex-flow: row nowrap;
127
+ flex-shrink: 0;
128
+ align-items: center;
129
+ justify-content: center;
130
+ height: 100%;
131
+ transition: all ease-in-out 300ms;
132
+ transition-property: transform, opacity;
133
+ z-index: 1;
134
+ }
135
+
136
+ :host(.fab-button-disabled) {
137
+ cursor: default;
138
+ opacity: 0.5;
139
+ pointer-events: none;
140
+ }
141
+
142
+ @media (any-hover: hover) {
143
+ :host(:hover) .button-native {
144
+ color: var(--color-hover);
145
+ }
146
+ :host(:hover) .button-native::after {
147
+ background: var(--background-hover);
148
+ opacity: var(--background-hover-opacity);
149
+ }
150
+ }
151
+ :host(.ion-focused) .button-native {
152
+ color: var(--color-focused);
153
+ }
154
+ :host(.ion-focused) .button-native::after {
155
+ background: var(--background-focused);
156
+ opacity: var(--background-focused-opacity);
157
+ }
158
+
159
+ :host(.ion-activated) .button-native {
160
+ color: var(--color-activated);
161
+ }
162
+ :host(.ion-activated) .button-native::after {
163
+ background: var(--background-activated);
164
+ opacity: var(--background-activated-opacity);
165
+ }
166
+
167
+ ::slotted(ion-icon) {
168
+ line-height: 1;
169
+ }
170
+
171
+ :host(.fab-button-small) {
172
+ -webkit-margin-start: 8px;
173
+ margin-inline-start: 8px;
174
+ -webkit-margin-end: 8px;
175
+ margin-inline-end: 8px;
176
+ margin-top: 8px;
177
+ margin-bottom: 8px;
178
+ width: 40px;
179
+ height: 40px;
180
+ }
181
+
182
+ .close-icon {
183
+ -webkit-margin-start: auto;
184
+ margin-inline-start: auto;
185
+ -webkit-margin-end: auto;
186
+ margin-inline-end: auto;
187
+ margin-top: 0;
188
+ margin-bottom: 0;
189
+ left: 0;
190
+ right: 0;
191
+ top: 0;
192
+ position: absolute;
193
+ height: 100%;
194
+ transform: scale(0.4) rotateZ(-45deg);
195
+ transition: all ease-in-out 300ms;
196
+ transition-property: transform, opacity;
197
+ font-size: var(--close-icon-font-size);
198
+ opacity: 0;
199
+ z-index: 1;
200
+ }
201
+
202
+ :host(.fab-button-close-active) .close-icon {
203
+ transform: scale(1) rotateZ(0deg);
204
+ opacity: 1;
205
+ }
206
+
207
+ :host(.fab-button-close-active) .button-inner {
208
+ transform: scale(0.4) rotateZ(45deg);
209
+ opacity: 0;
210
+ }
211
+
212
+ ion-ripple-effect {
213
+ color: var(--ripple-color);
214
+ }
215
+
216
+ @supports (backdrop-filter: blur(0)) {
217
+ :host(.fab-button-translucent) .button-native {
218
+ backdrop-filter: var(--backdrop-filter);
219
+ }
220
+ }
221
+ :host(.ion-color) .button-native {
222
+ background: var(--ion-color-base);
223
+ color: var(--ion-color-contrast);
224
+ }
225
+
226
+ :host {
227
+ --background: var(--ion-color-primary, #3880ff);
228
+ --background-activated: var(--ion-color-primary-shade, #3171e0);
229
+ --background-focused: var(--ion-color-primary-shade, #3171e0);
230
+ --background-hover: var(--ion-color-primary-tint, #4c8dff);
231
+ --background-activated-opacity: 1;
232
+ --background-focused-opacity: 1;
233
+ --background-hover-opacity: 1;
234
+ --color: var(--ion-color-primary-contrast, #fff);
235
+ --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
236
+ --transition: 0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59);
237
+ --close-icon-font-size: 28px;
238
+ }
239
+
240
+ :host(.ion-activated) {
241
+ --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
242
+ --transform: scale(1.1);
243
+ --transition: 0.2s transform ease-out;
244
+ }
245
+
246
+ ::slotted(ion-icon) {
247
+ font-size: 28px;
248
+ }
249
+
250
+ :host(.fab-button-in-list) {
251
+ --background: var(--ion-color-light, #f4f5f8);
252
+ --background-activated: var(--ion-color-light-shade, #d7d8da);
253
+ --background-focused: var(--background-activated);
254
+ --background-hover: var(--ion-color-light-tint, #f5f6f9);
255
+ --color: var(--ion-color-light-contrast, #000);
256
+ --color-activated: var(--ion-color-light-contrast, #000);
257
+ --color-focused: var(--color-activated);
258
+ --transition: transform 200ms ease 10ms, opacity 200ms ease 10ms;
259
+ }
260
+
261
+ :host(.fab-button-in-list) ::slotted(ion-icon) {
262
+ font-size: 18px;
263
+ }
264
+
265
+ :host(.ion-color.ion-focused) .button-native::after {
266
+ background: var(--ion-color-shade);
267
+ }
268
+
269
+ :host(.ion-color.ion-focused) .button-native,
270
+ :host(.ion-color.ion-activated) .button-native {
271
+ color: var(--ion-color-contrast);
272
+ }
273
+ :host(.ion-color.ion-focused) .button-native::after,
274
+ :host(.ion-color.ion-activated) .button-native::after {
275
+ background: var(--ion-color-shade);
276
+ }
277
+
278
+ @media (any-hover: hover) {
279
+ :host(.ion-color:hover) .button-native {
280
+ color: var(--ion-color-contrast);
281
+ }
282
+ :host(.ion-color:hover) .button-native::after {
283
+ background: var(--ion-color-tint);
284
+ }
285
+ }
286
+ @supports (backdrop-filter: blur(0)) {
287
+ :host(.fab-button-translucent) {
288
+ --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);
289
+ --background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);
290
+ --background-focused: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);
291
+ --backdrop-filter: saturate(180%) blur(20px);
292
+ }
293
+ :host(.fab-button-translucent-in-list) {
294
+ --background: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);
295
+ --background-hover: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);
296
+ --background-focused: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82);
297
+ }
298
+ }
299
+ @supports (backdrop-filter: blur(0)) {
300
+ @media (any-hover: hover) {
301
+ :host(.fab-button-translucent.ion-color:hover) .button-native {
302
+ background: rgba(var(--ion-color-base-rgb), 0.8);
303
+ }
304
+ }
305
+ :host(.ion-color.fab-button-translucent) .button-native {
306
+ background: rgba(var(--ion-color-base-rgb), 0.9);
307
+ }
308
+ :host(.ion-color.ion-focused.fab-button-translucent) .button-native,
309
+ :host(.ion-color.ion-activated.fab-button-translucent) .button-native {
310
+ background: var(--ion-color-base);
311
+ }
312
+ }
@@ -0,0 +1,283 @@
1
+ :host {
2
+ /**
3
+ * @prop --background: Background of the button
4
+ * @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
5
+ * @prop --background-activated-opacity: Opacity of the button background when pressed
6
+ * @prop --background-focused: Background of the button when focused with the tab key
7
+ * @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
8
+ * @prop --background-hover: Background of the button on hover
9
+ * @prop --background-hover-opacity: Opacity of the button background on hover
10
+ *
11
+ * @prop --color: Text color of the button
12
+ * @prop --color-activated: Text color of the button when pressed
13
+ * @prop --color-focused: Text color of the button when focused with the tab key
14
+ * @prop --color-hover: Text color of the button on hover
15
+ *
16
+ * @prop --transition: Transition of the button
17
+ *
18
+ * @prop --close-icon-font-size: Font size of the close icon
19
+ *
20
+ * @prop --border-radius: Border radius of the button
21
+ * @prop --border-width: Border width of the button
22
+ * @prop --border-style: Border style of the button
23
+ * @prop --border-color: Border color of the button
24
+ *
25
+ * @prop --ripple-color: Color of the button ripple effect
26
+ *
27
+ * @prop --box-shadow: Box shadow of the button
28
+ *
29
+ * @prop --padding-top: Top padding of the button
30
+ * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
31
+ * @prop --padding-bottom: Bottom padding of the button
32
+ * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
33
+ */
34
+ --color-activated: var(--color);
35
+ --color-focused: var(--color);
36
+ --color-hover: var(--color);
37
+ --background-hover: var(--ion-color-primary-contrast, #fff);
38
+ --background-hover-opacity: .08;
39
+ --transition: background-color, opacity 100ms linear;
40
+ --ripple-color: currentColor;
41
+ --border-radius: 50%;
42
+ --border-width: 0;
43
+ --border-style: none;
44
+ --border-color: initial;
45
+ --padding-top: 0;
46
+ --padding-end: 0;
47
+ --padding-bottom: 0;
48
+ --padding-start: 0;
49
+ margin-left: 0;
50
+ margin-right: 0;
51
+ margin-top: 0;
52
+ margin-bottom: 0;
53
+ display: block;
54
+ width: 56px;
55
+ height: 56px;
56
+ font-size: 14px;
57
+ text-align: center;
58
+ text-overflow: ellipsis;
59
+ text-transform: none;
60
+ white-space: nowrap;
61
+ font-kerning: none;
62
+ }
63
+
64
+ .button-native {
65
+ border-radius: var(--border-radius);
66
+ -webkit-padding-start: var(--padding-start);
67
+ padding-inline-start: var(--padding-start);
68
+ -webkit-padding-end: var(--padding-end);
69
+ padding-inline-end: var(--padding-end);
70
+ padding-top: var(--padding-top);
71
+ padding-bottom: var(--padding-bottom);
72
+ font-family: inherit;
73
+ font-size: inherit;
74
+ font-style: inherit;
75
+ font-weight: inherit;
76
+ letter-spacing: inherit;
77
+ text-decoration: inherit;
78
+ text-indent: inherit;
79
+ text-overflow: inherit;
80
+ text-transform: inherit;
81
+ text-align: inherit;
82
+ white-space: inherit;
83
+ color: inherit;
84
+ display: block;
85
+ position: relative;
86
+ width: 100%;
87
+ height: 100%;
88
+ transform: var(--transform);
89
+ transition: var(--transition);
90
+ border-width: var(--border-width);
91
+ border-style: var(--border-style);
92
+ border-color: var(--border-color);
93
+ outline: none;
94
+ background: var(--background);
95
+ background-clip: padding-box;
96
+ color: var(--color);
97
+ box-shadow: var(--box-shadow);
98
+ contain: strict;
99
+ cursor: pointer;
100
+ overflow: hidden;
101
+ z-index: 0;
102
+ appearance: none;
103
+ box-sizing: border-box;
104
+ }
105
+
106
+ ::slotted(ion-icon) {
107
+ line-height: 1;
108
+ }
109
+
110
+ .button-native::after {
111
+ left: 0;
112
+ right: 0;
113
+ top: 0;
114
+ bottom: 0;
115
+ position: absolute;
116
+ content: "";
117
+ opacity: 0;
118
+ }
119
+
120
+ .button-inner {
121
+ left: 0;
122
+ right: 0;
123
+ top: 0;
124
+ display: flex;
125
+ position: absolute;
126
+ flex-flow: row nowrap;
127
+ flex-shrink: 0;
128
+ align-items: center;
129
+ justify-content: center;
130
+ height: 100%;
131
+ transition: all ease-in-out 300ms;
132
+ transition-property: transform, opacity;
133
+ z-index: 1;
134
+ }
135
+
136
+ :host(.fab-button-disabled) {
137
+ cursor: default;
138
+ opacity: 0.5;
139
+ pointer-events: none;
140
+ }
141
+
142
+ @media (any-hover: hover) {
143
+ :host(:hover) .button-native {
144
+ color: var(--color-hover);
145
+ }
146
+ :host(:hover) .button-native::after {
147
+ background: var(--background-hover);
148
+ opacity: var(--background-hover-opacity);
149
+ }
150
+ }
151
+ :host(.ion-focused) .button-native {
152
+ color: var(--color-focused);
153
+ }
154
+ :host(.ion-focused) .button-native::after {
155
+ background: var(--background-focused);
156
+ opacity: var(--background-focused-opacity);
157
+ }
158
+
159
+ :host(.ion-activated) .button-native {
160
+ color: var(--color-activated);
161
+ }
162
+ :host(.ion-activated) .button-native::after {
163
+ background: var(--background-activated);
164
+ opacity: var(--background-activated-opacity);
165
+ }
166
+
167
+ ::slotted(ion-icon) {
168
+ line-height: 1;
169
+ }
170
+
171
+ :host(.fab-button-small) {
172
+ -webkit-margin-start: 8px;
173
+ margin-inline-start: 8px;
174
+ -webkit-margin-end: 8px;
175
+ margin-inline-end: 8px;
176
+ margin-top: 8px;
177
+ margin-bottom: 8px;
178
+ width: 40px;
179
+ height: 40px;
180
+ }
181
+
182
+ .close-icon {
183
+ -webkit-margin-start: auto;
184
+ margin-inline-start: auto;
185
+ -webkit-margin-end: auto;
186
+ margin-inline-end: auto;
187
+ margin-top: 0;
188
+ margin-bottom: 0;
189
+ left: 0;
190
+ right: 0;
191
+ top: 0;
192
+ position: absolute;
193
+ height: 100%;
194
+ transform: scale(0.4) rotateZ(-45deg);
195
+ transition: all ease-in-out 300ms;
196
+ transition-property: transform, opacity;
197
+ font-size: var(--close-icon-font-size);
198
+ opacity: 0;
199
+ z-index: 1;
200
+ }
201
+
202
+ :host(.fab-button-close-active) .close-icon {
203
+ transform: scale(1) rotateZ(0deg);
204
+ opacity: 1;
205
+ }
206
+
207
+ :host(.fab-button-close-active) .button-inner {
208
+ transform: scale(0.4) rotateZ(45deg);
209
+ opacity: 0;
210
+ }
211
+
212
+ ion-ripple-effect {
213
+ color: var(--ripple-color);
214
+ }
215
+
216
+ @supports (backdrop-filter: blur(0)) {
217
+ :host(.fab-button-translucent) .button-native {
218
+ backdrop-filter: var(--backdrop-filter);
219
+ }
220
+ }
221
+ :host(.ion-color) .button-native {
222
+ background: var(--ion-color-base);
223
+ color: var(--ion-color-contrast);
224
+ }
225
+
226
+ :host {
227
+ --background: var(--ion-color-primary, #3880ff);
228
+ --background-activated: transparent;
229
+ --background-focused: currentColor;
230
+ --background-hover: currentColor;
231
+ --background-activated-opacity: 0;
232
+ --background-focused-opacity: .24;
233
+ --background-hover-opacity: .08;
234
+ --color: var(--ion-color-primary-contrast, #fff);
235
+ --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
236
+ --transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
237
+ --close-icon-font-size: 24px;
238
+ }
239
+
240
+ :host(.ion-activated) {
241
+ --box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12);
242
+ }
243
+
244
+ ::slotted(ion-icon) {
245
+ font-size: 24px;
246
+ }
247
+
248
+ :host(.fab-button-in-list) {
249
+ --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
250
+ --color-activated: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
251
+ --color-focused: var(--color-activated);
252
+ --background: var(--ion-color-light, #f4f5f8);
253
+ --background-activated: transparent;
254
+ --background-focused: var(--ion-color-light-shade, #d7d8da);
255
+ --background-hover: var(--ion-color-light-tint, #f5f6f9);
256
+ }
257
+
258
+ :host(.fab-button-in-list) ::slotted(ion-icon) {
259
+ font-size: 18px;
260
+ }
261
+
262
+ :host(.ion-color.ion-focused) .button-native {
263
+ color: var(--ion-color-contrast);
264
+ }
265
+ :host(.ion-color.ion-focused) .button-native::after {
266
+ background: var(--ion-color-contrast);
267
+ }
268
+
269
+ :host(.ion-color.ion-activated) .button-native {
270
+ color: var(--ion-color-contrast);
271
+ }
272
+ :host(.ion-color.ion-activated) .button-native::after {
273
+ background: transparent;
274
+ }
275
+
276
+ @media (any-hover: hover) {
277
+ :host(.ion-color:hover) .button-native {
278
+ color: var(--ion-color-contrast);
279
+ }
280
+ :host(.ion-color:hover) .button-native::after {
281
+ background: var(--ion-color-contrast);
282
+ }
283
+ }
@@ -0,0 +1,123 @@
1
+ :host {
2
+ margin-left: 0;
3
+ margin-right: 0;
4
+ margin-top: 66px;
5
+ margin-bottom: 66px;
6
+ display: none;
7
+ position: absolute;
8
+ top: 0;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ min-width: 56px;
12
+ min-height: 56px;
13
+ }
14
+
15
+ :host(.fab-list-active) {
16
+ display: flex;
17
+ }
18
+
19
+ ::slotted(.fab-button-in-list) {
20
+ margin-left: 0;
21
+ margin-right: 0;
22
+ margin-top: 8px;
23
+ margin-bottom: 8px;
24
+ width: 40px;
25
+ height: 40px;
26
+ transform: scale(0);
27
+ opacity: 0;
28
+ visibility: hidden;
29
+ }
30
+
31
+ :host(.fab-list-side-top) ::slotted(.fab-button-in-list),
32
+ :host(.fab-list-side-bottom) ::slotted(.fab-button-in-list) {
33
+ margin-left: 0;
34
+ margin-right: 0;
35
+ margin-top: 5px;
36
+ margin-bottom: 5px;
37
+ }
38
+
39
+ :host(.fab-list-side-start) ::slotted(.fab-button-in-list),
40
+ :host(.fab-list-side-end) ::slotted(.fab-button-in-list) {
41
+ -webkit-margin-start: 5px;
42
+ margin-inline-start: 5px;
43
+ -webkit-margin-end: 5px;
44
+ margin-inline-end: 5px;
45
+ margin-top: 0;
46
+ margin-bottom: 0;
47
+ }
48
+
49
+ ::slotted(.fab-button-in-list.fab-button-show) {
50
+ transform: scale(1);
51
+ opacity: 1;
52
+ visibility: visible;
53
+ }
54
+
55
+ :host(.fab-list-side-top) {
56
+ top: auto;
57
+ bottom: 0;
58
+ flex-direction: column-reverse;
59
+ }
60
+
61
+ :host(.fab-list-side-start) {
62
+ -webkit-margin-start: 66px;
63
+ margin-inline-start: 66px;
64
+ -webkit-margin-end: 66px;
65
+ margin-inline-end: 66px;
66
+ margin-top: 0;
67
+ margin-bottom: 0;
68
+ flex-direction: row-reverse;
69
+ }
70
+ @supports (inset-inline-start: 0) {
71
+ :host(.fab-list-side-start) {
72
+ inset-inline-end: 0;
73
+ }
74
+ }
75
+ @supports not (inset-inline-start: 0) {
76
+ :host(.fab-list-side-start) {
77
+ right: 0;
78
+ }
79
+ :host-context([dir=rtl]):host(.fab-list-side-start), :host-context([dir=rtl]).fab-list-side-start {
80
+ left: unset;
81
+ right: unset;
82
+ left: 0;
83
+ }
84
+ @supports selector(:dir(rtl)) {
85
+ :host(.fab-list-side-start):dir(rtl) {
86
+ left: unset;
87
+ right: unset;
88
+ left: 0;
89
+ }
90
+ }
91
+ }
92
+
93
+ :host(.fab-list-side-end) {
94
+ -webkit-margin-start: 66px;
95
+ margin-inline-start: 66px;
96
+ -webkit-margin-end: 66px;
97
+ margin-inline-end: 66px;
98
+ margin-top: 0;
99
+ margin-bottom: 0;
100
+ flex-direction: row;
101
+ }
102
+ @supports (inset-inline-start: 0) {
103
+ :host(.fab-list-side-end) {
104
+ inset-inline-start: 0;
105
+ }
106
+ }
107
+ @supports not (inset-inline-start: 0) {
108
+ :host(.fab-list-side-end) {
109
+ left: 0;
110
+ }
111
+ :host-context([dir=rtl]):host(.fab-list-side-end), :host-context([dir=rtl]).fab-list-side-end {
112
+ left: unset;
113
+ right: unset;
114
+ right: 0;
115
+ }
116
+ @supports selector(:dir(rtl)) {
117
+ :host(.fab-list-side-end):dir(rtl) {
118
+ left: unset;
119
+ right: unset;
120
+ right: 0;
121
+ }
122
+ }
123
+ }