@limetech/lime-elements 35.0.0-next.2 → 35.0.0-next.23

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 (231) hide show
  1. package/dist/cjs/checkbox.template-7f83d0b4.js +41 -0
  2. package/dist/cjs/{component-f7ef9087.js → component-66df95e7.js} +190 -132
  3. package/dist/cjs/{component-f532119f.js → component-67144c1c.js} +47 -3
  4. package/dist/cjs/{component-ed21410d.js → component-ae3bfacf.js} +367 -235
  5. package/dist/cjs/{component-2faaa141.js → component-cf490570.js} +213 -143
  6. package/dist/cjs/{component-10dbdd60.js → component-dd795ff0.js} +7 -5
  7. package/dist/cjs/{index-e63a89d7.js → index-43283636.js} +23 -0
  8. package/dist/cjs/lime-elements.cjs.js +3 -3
  9. package/dist/cjs/limel-badge.cjs.entry.js +3 -3
  10. package/dist/cjs/limel-banner.cjs.entry.js +1 -1
  11. package/dist/cjs/limel-button-group.cjs.entry.js +2 -2
  12. package/dist/cjs/limel-button.cjs.entry.js +2 -2
  13. package/dist/cjs/limel-checkbox.cjs.entry.js +131 -86
  14. package/dist/cjs/limel-chip-set.cjs.entry.js +234 -190
  15. package/dist/cjs/limel-circular-progress.cjs.entry.js +2 -2
  16. package/dist/cjs/limel-code-editor.cjs.entry.js +49 -22
  17. package/dist/cjs/limel-collapsible-section.cjs.entry.js +1 -1
  18. package/dist/cjs/limel-color-picker-palette_2.cjs.entry.js +1 -1
  19. package/dist/cjs/limel-color-picker.cjs.entry.js +1 -1
  20. package/dist/cjs/limel-config.cjs.entry.js +1 -1
  21. package/dist/cjs/limel-date-picker.cjs.entry.js +5 -5
  22. package/dist/cjs/limel-dialog.cjs.entry.js +8 -9
  23. package/dist/cjs/limel-file.cjs.entry.js +5 -5
  24. package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +1 -1
  25. package/dist/cjs/limel-flex-container.cjs.entry.js +5 -1
  26. package/dist/cjs/limel-form.cjs.entry.js +7547 -8994
  27. package/dist/cjs/limel-grid.cjs.entry.js +1 -1
  28. package/dist/cjs/limel-header.cjs.entry.js +1 -1
  29. package/dist/cjs/limel-icon-button.cjs.entry.js +5 -5
  30. package/dist/cjs/limel-icon.cjs.entry.js +1 -1
  31. package/dist/cjs/limel-input-field.cjs.entry.js +6 -6
  32. package/dist/cjs/limel-linear-progress.cjs.entry.js +3 -3
  33. package/dist/cjs/limel-list_3.cjs.entry.js +146 -84
  34. package/dist/cjs/limel-menu-list.cjs.entry.js +85 -69
  35. package/dist/cjs/limel-menu.cjs.entry.js +1 -1
  36. package/dist/cjs/limel-picker.cjs.entry.js +2 -2
  37. package/dist/cjs/limel-popover-surface.cjs.entry.js +2 -2
  38. package/dist/cjs/limel-progress-flow-item.cjs.entry.js +1 -1
  39. package/dist/cjs/limel-progress-flow.cjs.entry.js +1 -1
  40. package/dist/cjs/limel-select.cjs.entry.js +5 -5
  41. package/dist/cjs/limel-slider.cjs.entry.js +33 -6
  42. package/dist/cjs/limel-snackbar.cjs.entry.js +78 -72
  43. package/dist/cjs/limel-spinner.cjs.entry.js +1 -1
  44. package/dist/cjs/limel-switch.cjs.entry.js +497 -201
  45. package/dist/cjs/limel-tab-bar.cjs.entry.js +262 -185
  46. package/dist/cjs/limel-tab-panel.cjs.entry.js +1 -1
  47. package/dist/cjs/limel-table.cjs.entry.js +363 -11
  48. package/dist/cjs/limel-tooltip_2.cjs.entry.js +1 -1
  49. package/dist/cjs/loader.cjs.js +3 -3
  50. package/dist/collection/collection-manifest.json +2 -2
  51. package/dist/collection/components/badge/badge.css +9 -15
  52. package/dist/collection/components/badge/badge.js +2 -2
  53. package/dist/collection/components/button/button.css +333 -145
  54. package/dist/collection/components/button-group/button-group.css +30 -5
  55. package/dist/collection/components/checkbox/checkbox.css +46 -16
  56. package/dist/collection/components/checkbox/checkbox.template.js +22 -20
  57. package/dist/collection/components/chip-set/chip-set.css +367 -34
  58. package/dist/collection/components/circular-progress/circular-progress.css +2 -2
  59. package/dist/collection/components/code-editor/code-editor.css +8 -13
  60. package/dist/collection/components/dialog/dialog.css +153 -109
  61. package/dist/collection/components/flex-container/flex-container.js +10 -0
  62. package/dist/collection/components/form/form.css +5 -1
  63. package/dist/collection/components/form/templates/common.js +4 -1
  64. package/dist/collection/components/icon-button/icon-button.css +116 -59
  65. package/dist/collection/components/icon-button/icon-button.js +1 -0
  66. package/dist/collection/components/input-field/input-field.css +351 -29
  67. package/dist/collection/components/linear-progress/linear-progress.css +14 -2
  68. package/dist/collection/components/list/list.css +912 -89
  69. package/dist/collection/components/list/list.js +13 -6
  70. package/dist/collection/components/menu-list/menu-list.css +912 -89
  71. package/dist/collection/components/menu-surface/menu-surface.css +31 -7
  72. package/dist/collection/components/picker/picker.js +1 -1
  73. package/dist/collection/components/popover-surface/popover-surface.css +1 -0
  74. package/dist/collection/components/select/select.css +430 -20
  75. package/dist/collection/components/select/select.template.js +1 -1
  76. package/dist/collection/components/slider/slider.css +54 -2
  77. package/dist/collection/components/snackbar/snackbar.css +588 -301
  78. package/dist/collection/components/switch/switch.css +592 -222
  79. package/dist/collection/components/switch/switch.js +18 -12
  80. package/dist/collection/components/tab-bar/tab-bar.css +77 -48
  81. package/dist/collection/components/table/columns.js +1 -1
  82. package/dist/collection/components/table/selection.js +111 -0
  83. package/dist/collection/components/table/table-selection.js +125 -0
  84. package/dist/collection/components/table/table.css +134 -38
  85. package/dist/collection/components/table/table.js +212 -7
  86. package/dist/collection/style/functions.scss +3 -1
  87. package/dist/collection/style/internal/lime-theme.scss +30 -31
  88. package/dist/collection/style/internal/lime-typography.scss +55 -56
  89. package/dist/collection/style/internal/shared_input-select-picker.scss +1 -0
  90. package/dist/collection/style/internal/z-index.scss +2 -1
  91. package/dist/esm/checkbox.template-f429c5b6.js +39 -0
  92. package/dist/esm/{component-89e0ce26.js → component-19eb6e2b.js} +7 -5
  93. package/dist/esm/{component-2630c3d7.js → component-288691f3.js} +367 -235
  94. package/dist/esm/{component-d682c974.js → component-410aad5a.js} +44 -4
  95. package/dist/esm/{component-429e92ee.js → component-5b4ac85a.js} +213 -143
  96. package/dist/esm/{component-2eb4e07b.js → component-fffa3419.js} +191 -133
  97. package/dist/esm/{index-2316f345.js → index-4456d4ad.js} +23 -0
  98. package/dist/esm/lime-elements.js +3 -3
  99. package/dist/esm/limel-badge.entry.js +3 -3
  100. package/dist/esm/limel-banner.entry.js +1 -1
  101. package/dist/esm/limel-button-group.entry.js +2 -2
  102. package/dist/esm/limel-button.entry.js +2 -2
  103. package/dist/esm/limel-checkbox.entry.js +132 -87
  104. package/dist/esm/limel-chip-set.entry.js +234 -190
  105. package/dist/esm/limel-circular-progress.entry.js +2 -2
  106. package/dist/esm/limel-code-editor.entry.js +49 -22
  107. package/dist/esm/limel-collapsible-section.entry.js +1 -1
  108. package/dist/esm/limel-color-picker-palette_2.entry.js +1 -1
  109. package/dist/esm/limel-color-picker.entry.js +1 -1
  110. package/dist/esm/limel-config.entry.js +1 -1
  111. package/dist/esm/limel-date-picker.entry.js +5 -5
  112. package/dist/esm/limel-dialog.entry.js +8 -9
  113. package/dist/esm/limel-file.entry.js +5 -5
  114. package/dist/esm/limel-flatpickr-adapter.entry.js +1 -1
  115. package/dist/esm/limel-flex-container.entry.js +5 -1
  116. package/dist/esm/limel-form.entry.js +7550 -8997
  117. package/dist/esm/limel-grid.entry.js +1 -1
  118. package/dist/esm/limel-header.entry.js +1 -1
  119. package/dist/esm/limel-icon-button.entry.js +5 -5
  120. package/dist/esm/limel-icon.entry.js +1 -1
  121. package/dist/esm/limel-input-field.entry.js +6 -6
  122. package/dist/esm/limel-linear-progress.entry.js +4 -4
  123. package/dist/esm/limel-list_3.entry.js +147 -85
  124. package/dist/esm/limel-menu-list.entry.js +86 -70
  125. package/dist/esm/limel-menu.entry.js +1 -1
  126. package/dist/esm/limel-picker.entry.js +2 -2
  127. package/dist/esm/limel-popover-surface.entry.js +2 -2
  128. package/dist/esm/limel-progress-flow-item.entry.js +1 -1
  129. package/dist/esm/limel-progress-flow.entry.js +1 -1
  130. package/dist/esm/limel-select.entry.js +5 -5
  131. package/dist/esm/limel-slider.entry.js +34 -7
  132. package/dist/esm/limel-snackbar.entry.js +78 -72
  133. package/dist/esm/limel-spinner.entry.js +1 -1
  134. package/dist/esm/limel-switch.entry.js +497 -201
  135. package/dist/esm/limel-tab-bar.entry.js +262 -185
  136. package/dist/esm/limel-tab-panel.entry.js +1 -1
  137. package/dist/esm/limel-table.entry.js +363 -11
  138. package/dist/esm/limel-tooltip_2.entry.js +1 -1
  139. package/dist/esm/loader.js +3 -3
  140. package/dist/esm/polyfills/css-shim.js +1 -1
  141. package/dist/esm/{util-71a23335.js → util-f1bde91c.js} +1 -1
  142. package/dist/lime-elements/lime-elements.esm.js +1 -1
  143. package/dist/lime-elements/{p-a4c532a7.entry.js → p-00d485d8.entry.js} +1 -1
  144. package/dist/lime-elements/p-062a9599.entry.js +131 -0
  145. package/dist/lime-elements/{p-597cbe05.entry.js → p-0ea1cbf6.entry.js} +1 -1
  146. package/dist/lime-elements/p-1c284626.js +73 -0
  147. package/dist/lime-elements/{p-a2cf74c1.entry.js → p-255084bd.entry.js} +1 -1
  148. package/dist/lime-elements/{p-e881e98d.entry.js → p-2550ff27.entry.js} +1 -1
  149. package/dist/lime-elements/{p-13f0e4f4.entry.js → p-2a1d6f3d.entry.js} +1 -1
  150. package/dist/lime-elements/{p-31fecf5d.entry.js → p-3bef288b.entry.js} +1 -1
  151. package/dist/lime-elements/{p-58cbe99d.entry.js → p-3f440859.entry.js} +1 -1
  152. package/dist/lime-elements/p-3f5ba6f4.entry.js +1 -0
  153. package/dist/lime-elements/{p-4b5af81b.entry.js → p-41ec08c9.entry.js} +1 -1
  154. package/dist/lime-elements/{p-92146da6.js → p-44f9b6d5.js} +0 -0
  155. package/dist/lime-elements/{p-1fb5340d.entry.js → p-45689f25.entry.js} +1 -1
  156. package/dist/lime-elements/p-47ef0ebb.entry.js +1 -0
  157. package/dist/lime-elements/{p-076bd4dc.js → p-48d4ef20.js} +3 -3
  158. package/dist/lime-elements/p-4e9869f4.entry.js +126 -0
  159. package/dist/lime-elements/{p-6003f817.entry.js → p-549190f6.entry.js} +1 -1
  160. package/dist/lime-elements/p-555f774c.entry.js +82 -0
  161. package/dist/lime-elements/p-63516991.entry.js +1 -0
  162. package/dist/lime-elements/p-68c4e708.entry.js +16 -0
  163. package/dist/lime-elements/p-6acee2e5.entry.js +73 -0
  164. package/dist/lime-elements/p-6fc9a0be.entry.js +59 -0
  165. package/dist/lime-elements/{p-64549ba6.entry.js → p-70a4d004.entry.js} +3 -3
  166. package/dist/lime-elements/{p-468e940e.entry.js → p-75846313.entry.js} +1 -1
  167. package/dist/lime-elements/p-779d1567.entry.js +1 -0
  168. package/dist/lime-elements/p-7d4eb67f.entry.js +1 -0
  169. package/dist/lime-elements/{p-714fde78.entry.js → p-897a7f8a.entry.js} +1 -1
  170. package/dist/lime-elements/{p-fc30b8e3.entry.js → p-8a5ca741.entry.js} +1 -1
  171. package/dist/lime-elements/{p-8a2c1038.entry.js → p-9607b6f9.entry.js} +2 -2
  172. package/dist/lime-elements/p-9caf28bd.entry.js +1 -0
  173. package/dist/lime-elements/{p-152a6d5f.js → p-9faad6eb.js} +1 -1
  174. package/dist/lime-elements/{p-34c7872e.entry.js → p-a35e6b8a.entry.js} +1 -1
  175. package/dist/lime-elements/{p-041ae00c.entry.js → p-b808ba3d.entry.js} +1 -1
  176. package/dist/lime-elements/p-be2bd743.js +1 -0
  177. package/dist/lime-elements/p-be351178.entry.js +37 -0
  178. package/dist/lime-elements/p-c40f5030.entry.js +82 -0
  179. package/dist/lime-elements/p-c4e2eb42.entry.js +1 -0
  180. package/dist/lime-elements/{p-1876a96a.entry.js → p-c5168bda.entry.js} +1 -1
  181. package/dist/lime-elements/p-cbc43682.js +81 -0
  182. package/dist/lime-elements/{p-ace9affc.js → p-d0a7de87.js} +2 -2
  183. package/dist/lime-elements/{p-be56ffab.entry.js → p-d5f17adb.entry.js} +1 -1
  184. package/dist/lime-elements/p-d70f1c00.entry.js +59 -0
  185. package/dist/lime-elements/p-dbd61714.entry.js +1 -0
  186. package/dist/lime-elements/{p-8ad5e143.entry.js → p-dd62c71b.entry.js} +1 -1
  187. package/dist/lime-elements/p-dfba92de.js +126 -0
  188. package/dist/lime-elements/p-e55144ec.entry.js +1 -0
  189. package/dist/lime-elements/{p-dfe0a58b.entry.js → p-e6f39a71.entry.js} +1 -1
  190. package/dist/lime-elements/p-f777d8a3.entry.js +82 -0
  191. package/dist/lime-elements/style/functions.scss +3 -1
  192. package/dist/lime-elements/style/internal/lime-theme.scss +30 -31
  193. package/dist/lime-elements/style/internal/lime-typography.scss +55 -56
  194. package/dist/lime-elements/style/internal/shared_input-select-picker.scss +1 -0
  195. package/dist/lime-elements/style/internal/z-index.scss +2 -1
  196. package/dist/types/components/badge/badge.d.ts +1 -1
  197. package/dist/types/components/flex-container/flex-container.d.ts +7 -0
  198. package/dist/types/components/switch/switch.d.ts +2 -2
  199. package/dist/types/components/table/columns.d.ts +7 -0
  200. package/dist/types/components/table/selection.d.ts +79 -0
  201. package/dist/types/components/table/table-selection.d.ts +57 -0
  202. package/dist/types/components/table/table.d.ts +39 -7
  203. package/dist/types/components/table/table.types.d.ts +13 -0
  204. package/dist/types/components.d.ts +33 -1
  205. package/dist/types/stencil-public-runtime.d.ts +6 -4
  206. package/package.json +20 -20
  207. package/dist/cjs/checkbox.template-50eb8b76.js +0 -39
  208. package/dist/esm/checkbox.template-50f7c07b.js +0 -37
  209. package/dist/lime-elements/p-0ce9165f.entry.js +0 -1
  210. package/dist/lime-elements/p-0fd208f3.entry.js +0 -82
  211. package/dist/lime-elements/p-143705b1.entry.js +0 -1
  212. package/dist/lime-elements/p-250f55be.js +0 -1
  213. package/dist/lime-elements/p-31299106.js +0 -126
  214. package/dist/lime-elements/p-4932c029.entry.js +0 -1
  215. package/dist/lime-elements/p-510bb5a4.entry.js +0 -1
  216. package/dist/lime-elements/p-6215e45e.entry.js +0 -37
  217. package/dist/lime-elements/p-668795a7.js +0 -73
  218. package/dist/lime-elements/p-6cfb45a1.entry.js +0 -1
  219. package/dist/lime-elements/p-7476efe0.entry.js +0 -1
  220. package/dist/lime-elements/p-902347b9.js +0 -81
  221. package/dist/lime-elements/p-90f3e17c.entry.js +0 -37
  222. package/dist/lime-elements/p-96e44a1e.entry.js +0 -82
  223. package/dist/lime-elements/p-a77cbb08.entry.js +0 -1
  224. package/dist/lime-elements/p-b5faa40d.entry.js +0 -59
  225. package/dist/lime-elements/p-bc0dcf01.entry.js +0 -73
  226. package/dist/lime-elements/p-c35874db.entry.js +0 -1
  227. package/dist/lime-elements/p-c8c8a946.entry.js +0 -59
  228. package/dist/lime-elements/p-d2c74396.entry.js +0 -1
  229. package/dist/lime-elements/p-d48ad9f7.entry.js +0 -126
  230. package/dist/lime-elements/p-d93a3b07.entry.js +0 -16
  231. package/dist/lime-elements/p-f2c706b8.entry.js +0 -131
package/dist/collection/components/button/button.css CHANGED
@@ -78,29 +78,6 @@
78
78
  }
79
79
 
80
80
  .mdc-button {
81
- -moz-osx-font-smoothing: grayscale;
82
- -webkit-font-smoothing: antialiased;
83
- font-family: Roboto, sans-serif;
84
- /* @alternate */
85
- font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
86
- font-size: 0.875rem;
87
- /* @alternate */
88
- font-size: var(--mdc-typography-button-font-size, 0.875rem);
89
- line-height: 2.25rem;
90
- /* @alternate */
91
- line-height: var(--mdc-typography-button-line-height, 2.25rem);
92
- font-weight: 500;
93
- /* @alternate */
94
- font-weight: var(--mdc-typography-button-font-weight, 500);
95
- letter-spacing: 0.0892857143em;
96
- /* @alternate */
97
- letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em);
98
- text-decoration: none;
99
- /* @alternate */
100
- text-decoration: var(--mdc-typography-button-text-decoration, none);
101
- text-transform: none;
102
- /* @alternate */
103
- text-transform: var(--mdc-typography-button-text-transform, none);
104
81
  /* @alternate */
105
82
  position: relative;
106
83
  display: inline-flex;
@@ -116,12 +93,14 @@
116
93
  -webkit-appearance: none;
117
94
  overflow: visible;
118
95
  vertical-align: middle;
96
+ background: transparent;
119
97
  }
120
98
  .mdc-button .mdc-elevation-overlay {
121
99
  width: 100%;
122
100
  height: 100%;
123
101
  top: 0;
124
102
  /* @noflip */
103
+ /*rtl:ignore*/
125
104
  left: 0;
126
105
  }
127
106
  .mdc-button::-moz-focus-inner {
@@ -140,87 +119,110 @@
140
119
  }
141
120
  .mdc-button .mdc-button__icon {
142
121
  /* @noflip */
122
+ /*rtl:ignore*/
143
123
  margin-left: 0;
144
124
  /* @noflip */
125
+ /*rtl:ignore*/
145
126
  margin-right: 8px;
146
127
  display: inline-block;
147
- font-size: 1.125rem;
148
- height: 1.125rem;
128
+ position: relative;
149
129
  vertical-align: top;
150
- width: 1.125rem;
151
130
  }
152
131
  [dir=rtl] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir=rtl] {
132
+ /*rtl:begin:ignore*/
153
133
  /* @noflip */
134
+ /*rtl:ignore*/
154
135
  margin-left: 8px;
155
136
  /* @noflip */
137
+ /*rtl:ignore*/
156
138
  margin-right: 0;
139
+ /*rtl:end:ignore*/
140
+ }
141
+
142
+ .mdc-button .mdc-button__label {
143
+ position: relative;
157
144
  }
158
145
  .mdc-button .mdc-button__touch {
159
146
  position: absolute;
160
147
  top: 50%;
161
- right: 0;
162
148
  height: 48px;
163
149
  left: 0;
150
+ right: 0;
164
151
  transform: translateY(-50%);
165
152
  }
166
153
 
167
154
  .mdc-button__label + .mdc-button__icon {
168
155
  /* @noflip */
156
+ /*rtl:ignore*/
169
157
  margin-left: 8px;
170
158
  /* @noflip */
159
+ /*rtl:ignore*/
171
160
  margin-right: 0;
172
161
  }
173
162
  [dir=rtl] .mdc-button__label + .mdc-button__icon, .mdc-button__label + .mdc-button__icon[dir=rtl] {
163
+ /*rtl:begin:ignore*/
174
164
  /* @noflip */
165
+ /*rtl:ignore*/
175
166
  margin-left: 0;
176
167
  /* @noflip */
168
+ /*rtl:ignore*/
177
169
  margin-right: 8px;
170
+ /*rtl:end:ignore*/
178
171
  }
179
172
 
180
173
  svg.mdc-button__icon {
181
174
  fill: currentColor;
182
175
  }
183
176
 
184
- .mdc-button--raised .mdc-button__icon,
185
- .mdc-button--unelevated .mdc-button__icon,
186
- .mdc-button--outlined .mdc-button__icon {
187
- /* @noflip */
188
- margin-left: -4px;
189
- /* @noflip */
190
- margin-right: 8px;
177
+ .mdc-button--touch {
178
+ margin-top: 6px;
179
+ margin-bottom: 6px;
191
180
  }
192
- [dir=rtl] .mdc-button--raised .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir=rtl],
193
- [dir=rtl] .mdc-button--unelevated .mdc-button__icon,
194
- .mdc-button--unelevated .mdc-button__icon[dir=rtl],
195
- [dir=rtl] .mdc-button--outlined .mdc-button__icon,
196
- .mdc-button--outlined .mdc-button__icon[dir=rtl] {
197
- /* @noflip */
198
- margin-left: 8px;
199
- /* @noflip */
200
- margin-right: -4px;
181
+
182
+ .mdc-button {
183
+ -moz-osx-font-smoothing: grayscale;
184
+ -webkit-font-smoothing: antialiased;
185
+ font-family: Roboto, sans-serif;
186
+ /* @alternate */
187
+ font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
188
+ text-decoration: none;
189
+ /* @alternate */
190
+ text-decoration: var(--mdc-typography-button-text-decoration, none);
201
191
  }
202
- .mdc-button--raised .mdc-button__label + .mdc-button__icon,
203
- .mdc-button--unelevated .mdc-button__label + .mdc-button__icon,
204
- .mdc-button--outlined .mdc-button__label + .mdc-button__icon {
205
- /* @noflip */
206
- margin-left: 8px;
207
- /* @noflip */
208
- margin-right: -4px;
192
+
193
+ .mdc-button {
194
+ padding: 0 8px 0 8px;
209
195
  }
210
- [dir=rtl] .mdc-button--raised .mdc-button__label + .mdc-button__icon, .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl],
211
- [dir=rtl] .mdc-button--unelevated .mdc-button__label + .mdc-button__icon,
212
- .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl],
213
- [dir=rtl] .mdc-button--outlined .mdc-button__label + .mdc-button__icon,
214
- .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] {
215
- /* @noflip */
216
- margin-left: -4px;
217
- /* @noflip */
218
- margin-right: 8px;
196
+
197
+ .mdc-button--unelevated {
198
+ transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
199
+ padding: 0 16px 0 16px;
200
+ }
201
+ .mdc-button--unelevated.mdc-button--icon-trailing {
202
+ padding: 0 12px 0 16px;
203
+ }
204
+ .mdc-button--unelevated.mdc-button--icon-leading {
205
+ padding: 0 16px 0 12px;
219
206
  }
220
207
 
221
- .mdc-button--touch {
222
- margin-top: 6px;
223
- margin-bottom: 6px;
208
+ .mdc-button--raised {
209
+ transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
210
+ padding: 0 16px 0 16px;
211
+ }
212
+ .mdc-button--raised.mdc-button--icon-trailing {
213
+ padding: 0 12px 0 16px;
214
+ }
215
+ .mdc-button--raised.mdc-button--icon-leading {
216
+ padding: 0 16px 0 12px;
217
+ }
218
+
219
+ .mdc-button--outlined {
220
+ border-style: solid;
221
+ transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1);
222
+ }
223
+ .mdc-button--outlined .mdc-button__ripple {
224
+ border-style: solid;
225
+ border-color: transparent;
224
226
  }
225
227
 
226
228
  @keyframes mdc-ripple-fg-radius-in {
@@ -285,6 +287,7 @@ svg.mdc-button__icon {
285
287
  .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {
286
288
  top: 0;
287
289
  /* @noflip */
290
+ /*rtl:ignore*/
288
291
  left: 0;
289
292
  transform: scale(0);
290
293
  transform-origin: center center;
@@ -292,6 +295,7 @@ svg.mdc-button__icon {
292
295
  .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after {
293
296
  top: var(--mdc-ripple-top, 0);
294
297
  /* @noflip */
298
+ /*rtl:ignore*/
295
299
  left: var(--mdc-ripple-left, 0);
296
300
  }
297
301
  .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after {
@@ -305,6 +309,7 @@ svg.mdc-button__icon {
305
309
  .mdc-button .mdc-button__ripple::after {
306
310
  top: calc(50% - 100%);
307
311
  /* @noflip */
312
+ /*rtl:ignore*/
308
313
  left: calc(50% - 100%);
309
314
  width: 200%;
310
315
  height: 200%;
@@ -319,127 +324,162 @@ svg.mdc-button__icon {
319
324
  width: 100%;
320
325
  height: 100%;
321
326
  overflow: hidden;
327
+ z-index: 0;
322
328
  }
323
329
  .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple {
324
330
  top: 0;
325
331
  left: 0;
326
332
  }
327
333
 
328
- .mdc-button--raised {
334
+ .mdc-button {
335
+ font-family: Roboto, sans-serif;
329
336
  /* @alternate */
330
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
331
- transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
332
- }
333
- .mdc-button--raised:hover, .mdc-button--raised:focus {
337
+ font-family: var(--mdc-text-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
338
+ font-size: 0.875rem;
334
339
  /* @alternate */
335
- box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
336
- }
337
- .mdc-button--raised:active {
340
+ font-size: var(--mdc-text-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
341
+ letter-spacing: 0.0892857143em;
338
342
  /* @alternate */
339
- box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
340
- }
341
- .mdc-button--raised:disabled {
343
+ letter-spacing: var(--mdc-text-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
344
+ font-weight: 500;
342
345
  /* @alternate */
343
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
344
- }
345
-
346
- .mdc-button--outlined {
347
- border-style: solid;
348
- }
349
-
350
- .mdc-button {
346
+ font-weight: var(--mdc-text-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
347
+ text-transform: none;
348
+ /* @alternate */
349
+ text-transform: var(--mdc-text-button-label-text-transform, var(--mdc-typography-button-text-transform, none));
351
350
  height: 36px;
351
+ /* @alternate */
352
+ height: var(--mdc-text-button-container-height, 36px);
352
353
  border-radius: 4px;
353
354
  /* @alternate */
354
- border-radius: var(--mdc-shape-small, 4px);
355
- padding: 0 8px 0 8px;
356
- }
357
- .mdc-button:not(:disabled) {
358
- background-color: transparent;
359
- }
360
- .mdc-button:disabled {
361
- background-color: transparent;
355
+ border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px));
362
356
  }
363
357
  .mdc-button:not(:disabled) {
364
358
  color: #26a69a;
365
359
  /* @alternate */
366
- color: var(--mdc-theme-primary, #26a69a);
360
+ color: var(--mdc-text-button-label-text-color, var(--mdc-theme-primary, #26a69a));
367
361
  }
368
362
  .mdc-button:disabled {
369
363
  color: rgba(0, 0, 0, 0.38);
364
+ /* @alternate */
365
+ color: var(--mdc-text-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));
370
366
  }
371
- .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after {
367
+ .mdc-button .mdc-button__icon {
368
+ font-size: 1.125rem;
369
+ /* @alternate */
370
+ font-size: var(--mdc-text-button-with-icon-icon-size, 1.125rem);
371
+ width: 1.125rem;
372
+ /* @alternate */
373
+ width: var(--mdc-text-button-with-icon-icon-size, 1.125rem);
374
+ height: 1.125rem;
375
+ /* @alternate */
376
+ height: var(--mdc-text-button-with-icon-icon-size, 1.125rem);
377
+ }
378
+ .mdc-button .mdc-button__ripple::before,
379
+ .mdc-button .mdc-button__ripple::after {
372
380
  background-color: #26a69a;
373
381
  /* @alternate */
374
- background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a));
382
+ background-color: var(--mdc-text-button-hover-state-layer-color, var(--mdc-theme-primary, #26a69a));
375
383
  }
376
384
  .mdc-button:hover .mdc-button__ripple::before, .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before {
377
- opacity: 0.08;
385
+ opacity: 0.04;
378
386
  /* @alternate */
379
- opacity: var(--mdc-ripple-hover-opacity, 0.08);
387
+ opacity: var(--mdc-text-button-hover-state-layer-opacity, 0.04);
380
388
  }
381
389
  .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
382
390
  transition-duration: 75ms;
383
- opacity: 0.24;
391
+ opacity: 0.12;
384
392
  /* @alternate */
385
- opacity: var(--mdc-ripple-focus-opacity, 0.24);
393
+ opacity: var(--mdc-text-button-focus-state-layer-opacity, 0.12);
386
394
  }
387
395
  .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
388
396
  transition: opacity 150ms linear;
389
397
  }
390
398
  .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
391
399
  transition-duration: 75ms;
392
- opacity: 0.24;
400
+ opacity: 0.12;
393
401
  /* @alternate */
394
- opacity: var(--mdc-ripple-press-opacity, 0.24);
402
+ opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12);
395
403
  }
396
404
  .mdc-button.mdc-ripple-upgraded {
397
- --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
405
+ --mdc-ripple-fg-opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12);
398
406
  }
399
407
  .mdc-button .mdc-button__ripple {
400
408
  border-radius: 4px;
401
409
  /* @alternate */
402
- border-radius: var(--mdc-shape-small, 4px);
410
+ border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px));
403
411
  }
404
412
 
405
413
  .mdc-button--unelevated {
406
- padding: 0 16px 0 16px;
414
+ font-family: Roboto, sans-serif;
415
+ /* @alternate */
416
+ font-family: var(--mdc-filled-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
417
+ font-size: 0.875rem;
418
+ /* @alternate */
419
+ font-size: var(--mdc-filled-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
420
+ letter-spacing: 0.0892857143em;
421
+ /* @alternate */
422
+ letter-spacing: var(--mdc-filled-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
423
+ font-weight: 500;
424
+ /* @alternate */
425
+ font-weight: var(--mdc-filled-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
426
+ text-transform: none;
427
+ /* @alternate */
428
+ text-transform: var(--mdc-filled-button-label-text-transform, var(--mdc-typography-button-text-transform, none));
407
429
  height: 36px;
430
+ /* @alternate */
431
+ height: var(--mdc-filled-button-container-height, 36px);
408
432
  border-radius: 4px;
409
433
  /* @alternate */
410
- border-radius: var(--mdc-shape-small, 4px);
434
+ border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px));
411
435
  }
412
436
  .mdc-button--unelevated:not(:disabled) {
413
437
  background-color: #26a69a;
414
438
  /* @alternate */
415
- background-color: var(--mdc-theme-primary, #26a69a);
439
+ background-color: var(--mdc-filled-button-container-color, var(--mdc-theme-primary, #26a69a));
416
440
  }
417
441
  .mdc-button--unelevated:disabled {
418
442
  background-color: rgba(0, 0, 0, 0.12);
443
+ /* @alternate */
444
+ background-color: var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12));
419
445
  }
420
446
  .mdc-button--unelevated:not(:disabled) {
421
447
  color: #fff;
422
448
  /* @alternate */
423
- color: var(--mdc-theme-on-primary, #fff);
449
+ color: var(--mdc-filled-button-label-text-color, var(--mdc-theme-on-primary, #fff));
424
450
  }
425
451
  .mdc-button--unelevated:disabled {
426
452
  color: rgba(0, 0, 0, 0.38);
453
+ /* @alternate */
454
+ color: var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));
455
+ }
456
+ .mdc-button--unelevated .mdc-button__icon {
457
+ font-size: 1.125rem;
458
+ /* @alternate */
459
+ font-size: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);
460
+ width: 1.125rem;
461
+ /* @alternate */
462
+ width: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);
463
+ height: 1.125rem;
464
+ /* @alternate */
465
+ height: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);
427
466
  }
428
- .mdc-button--unelevated .mdc-button__ripple::before, .mdc-button--unelevated .mdc-button__ripple::after {
467
+ .mdc-button--unelevated .mdc-button__ripple::before,
468
+ .mdc-button--unelevated .mdc-button__ripple::after {
429
469
  background-color: #fff;
430
470
  /* @alternate */
431
- background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff));
471
+ background-color: var(--mdc-filled-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff));
432
472
  }
433
473
  .mdc-button--unelevated:hover .mdc-button__ripple::before, .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before {
434
474
  opacity: 0.08;
435
475
  /* @alternate */
436
- opacity: var(--mdc-ripple-hover-opacity, 0.08);
476
+ opacity: var(--mdc-filled-button-hover-state-layer-opacity, 0.08);
437
477
  }
438
478
  .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
439
479
  transition-duration: 75ms;
440
480
  opacity: 0.24;
441
481
  /* @alternate */
442
- opacity: var(--mdc-ripple-focus-opacity, 0.24);
482
+ opacity: var(--mdc-filled-button-focus-state-layer-opacity, 0.24);
443
483
  }
444
484
  .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
445
485
  transition: opacity 150ms linear;
@@ -448,55 +488,91 @@ svg.mdc-button__icon {
448
488
  transition-duration: 75ms;
449
489
  opacity: 0.24;
450
490
  /* @alternate */
451
- opacity: var(--mdc-ripple-press-opacity, 0.24);
491
+ opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24);
452
492
  }
453
493
  .mdc-button--unelevated.mdc-ripple-upgraded {
454
- --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
494
+ --mdc-ripple-fg-opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24);
455
495
  }
456
496
  .mdc-button--unelevated .mdc-button__ripple {
457
497
  border-radius: 4px;
458
498
  /* @alternate */
459
- border-radius: var(--mdc-shape-small, 4px);
499
+ border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px));
460
500
  }
461
501
 
462
502
  .mdc-button--raised {
463
- padding: 0 16px 0 16px;
503
+ font-family: Roboto, sans-serif;
504
+ /* @alternate */
505
+ font-family: var(--mdc-protected-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
506
+ font-size: 0.875rem;
507
+ /* @alternate */
508
+ font-size: var(--mdc-protected-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
509
+ letter-spacing: 0.0892857143em;
510
+ /* @alternate */
511
+ letter-spacing: var(--mdc-protected-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
512
+ font-weight: 500;
513
+ /* @alternate */
514
+ font-weight: var(--mdc-protected-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
515
+ text-transform: none;
516
+ /* @alternate */
517
+ text-transform: var(--mdc-protected-button-label-text-transform, var(--mdc-typography-button-text-transform, none));
464
518
  height: 36px;
519
+ /* @alternate */
520
+ height: var(--mdc-protected-button-container-height, 36px);
465
521
  border-radius: 4px;
466
522
  /* @alternate */
467
- border-radius: var(--mdc-shape-small, 4px);
523
+ border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));
524
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
525
+ /* @alternate */
526
+ box-shadow: var(--mdc-protected-button-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
527
+ --mdc-elevation-box-shadow-for-gss: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
468
528
  }
469
529
  .mdc-button--raised:not(:disabled) {
470
530
  background-color: #26a69a;
471
531
  /* @alternate */
472
- background-color: var(--mdc-theme-primary, #26a69a);
532
+ background-color: var(--mdc-protected-button-container-color, var(--mdc-theme-primary, #26a69a));
473
533
  }
474
534
  .mdc-button--raised:disabled {
475
535
  background-color: rgba(0, 0, 0, 0.12);
536
+ /* @alternate */
537
+ background-color: var(--mdc-protected-button-disabled-container-color, rgba(0, 0, 0, 0.12));
476
538
  }
477
539
  .mdc-button--raised:not(:disabled) {
478
540
  color: #fff;
479
541
  /* @alternate */
480
- color: var(--mdc-theme-on-primary, #fff);
542
+ color: var(--mdc-protected-button-label-text-color, var(--mdc-theme-on-primary, #fff));
481
543
  }
482
544
  .mdc-button--raised:disabled {
483
545
  color: rgba(0, 0, 0, 0.38);
546
+ /* @alternate */
547
+ color: var(--mdc-protected-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));
484
548
  }
485
- .mdc-button--raised .mdc-button__ripple::before, .mdc-button--raised .mdc-button__ripple::after {
549
+ .mdc-button--raised .mdc-button__icon {
550
+ font-size: 1.125rem;
551
+ /* @alternate */
552
+ font-size: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);
553
+ width: 1.125rem;
554
+ /* @alternate */
555
+ width: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);
556
+ height: 1.125rem;
557
+ /* @alternate */
558
+ height: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);
559
+ }
560
+ .mdc-button--raised .mdc-button__ripple::before,
561
+ .mdc-button--raised .mdc-button__ripple::after {
486
562
  background-color: #fff;
487
563
  /* @alternate */
488
- background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff));
564
+ background-color: var(--mdc-protected-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff));
489
565
  }
490
566
  .mdc-button--raised:hover .mdc-button__ripple::before, .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before {
491
567
  opacity: 0.08;
492
568
  /* @alternate */
493
- opacity: var(--mdc-ripple-hover-opacity, 0.08);
569
+ opacity: var(--mdc-protected-button-hover-state-layer-opacity, 0.08);
494
570
  }
495
571
  .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
496
572
  transition-duration: 75ms;
497
573
  opacity: 0.24;
498
574
  /* @alternate */
499
- opacity: var(--mdc-ripple-focus-opacity, 0.24);
575
+ opacity: var(--mdc-protected-button-focus-state-layer-opacity, 0.24);
500
576
  }
501
577
  .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
502
578
  transition: opacity 150ms linear;
@@ -505,86 +581,198 @@ svg.mdc-button__icon {
505
581
  transition-duration: 75ms;
506
582
  opacity: 0.24;
507
583
  /* @alternate */
508
- opacity: var(--mdc-ripple-press-opacity, 0.24);
584
+ opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24);
509
585
  }
510
586
  .mdc-button--raised.mdc-ripple-upgraded {
511
- --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
587
+ --mdc-ripple-fg-opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24);
512
588
  }
513
589
  .mdc-button--raised .mdc-button__ripple {
514
590
  border-radius: 4px;
515
591
  /* @alternate */
516
- border-radius: var(--mdc-shape-small, 4px);
592
+ border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));
593
+ }
594
+ .mdc-button--raised.mdc-ripple-upgraded--background-focused, .mdc-button--raised:not(.mdc-ripple-upgraded):focus {
595
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
596
+ /* @alternate */
597
+ box-shadow: var(--mdc-protected-button-focus-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
598
+ --mdc-elevation-box-shadow-for-gss: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
599
+ }
600
+ .mdc-button--raised:hover {
601
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
602
+ /* @alternate */
603
+ box-shadow: var(--mdc-protected-button-hover-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
604
+ --mdc-elevation-box-shadow-for-gss: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
605
+ }
606
+ .mdc-button--raised:not(:disabled):active {
607
+ box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
608
+ /* @alternate */
609
+ box-shadow: var(--mdc-protected-button-pressed-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
610
+ --mdc-elevation-box-shadow-for-gss: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
611
+ }
612
+ .mdc-button--raised:disabled {
613
+ box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
614
+ /* @alternate */
615
+ box-shadow: var(--mdc-protected-button-disabled-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
616
+ --mdc-elevation-box-shadow-for-gss: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
517
617
  }
518
-
519
618
  .mdc-button--outlined {
619
+ font-family: Roboto, sans-serif;
620
+ /* @alternate */
621
+ font-family: var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
622
+ font-size: 0.875rem;
623
+ /* @alternate */
624
+ font-size: var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
625
+ letter-spacing: 0.0892857143em;
626
+ /* @alternate */
627
+ letter-spacing: var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
628
+ font-weight: 500;
629
+ /* @alternate */
630
+ font-weight: var(--mdc-outlined-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
631
+ text-transform: none;
632
+ /* @alternate */
633
+ text-transform: var(--mdc-outlined-button-label-text-transform, var(--mdc-typography-button-text-transform, none));
520
634
  height: 36px;
635
+ /* @alternate */
636
+ height: var(--mdc-outlined-button-container-height, 36px);
521
637
  border-radius: 4px;
522
638
  /* @alternate */
523
- border-radius: var(--mdc-shape-small, 4px);
639
+ border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));
524
640
  padding: 0 15px 0 15px;
525
641
  border-width: 1px;
526
- }
527
- .mdc-button--outlined:not(:disabled) {
528
- background-color: transparent;
529
- }
530
- .mdc-button--outlined:disabled {
531
- background-color: transparent;
642
+ /* @alternate */
643
+ border-width: var(--mdc-outlined-button-outline-width, 1px);
532
644
  }
533
645
  .mdc-button--outlined:not(:disabled) {
534
646
  color: #26a69a;
535
647
  /* @alternate */
536
- color: var(--mdc-theme-primary, #26a69a);
648
+ color: var(--mdc-outlined-button-label-text-color, var(--mdc-theme-primary, #26a69a));
537
649
  }
538
650
  .mdc-button--outlined:disabled {
539
651
  color: rgba(0, 0, 0, 0.38);
652
+ /* @alternate */
653
+ color: var(--mdc-outlined-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));
654
+ }
655
+ .mdc-button--outlined .mdc-button__icon {
656
+ font-size: 1.125rem;
657
+ /* @alternate */
658
+ font-size: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);
659
+ width: 1.125rem;
660
+ /* @alternate */
661
+ width: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);
662
+ height: 1.125rem;
663
+ /* @alternate */
664
+ height: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);
540
665
  }
541
- .mdc-button--outlined .mdc-button__ripple::before, .mdc-button--outlined .mdc-button__ripple::after {
666
+ .mdc-button--outlined .mdc-button__ripple::before,
667
+ .mdc-button--outlined .mdc-button__ripple::after {
542
668
  background-color: #26a69a;
543
669
  /* @alternate */
544
- background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a));
670
+ background-color: var(--mdc-outlined-button-hover-state-layer-color, var(--mdc-theme-primary, #26a69a));
545
671
  }
546
672
  .mdc-button--outlined:hover .mdc-button__ripple::before, .mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before {
547
- opacity: 0.08;
673
+ opacity: 0.04;
548
674
  /* @alternate */
549
- opacity: var(--mdc-ripple-hover-opacity, 0.08);
675
+ opacity: var(--mdc-outlined-button-hover-state-layer-opacity, 0.04);
550
676
  }
551
677
  .mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
552
678
  transition-duration: 75ms;
553
- opacity: 0.24;
679
+ opacity: 0.12;
554
680
  /* @alternate */
555
- opacity: var(--mdc-ripple-focus-opacity, 0.24);
681
+ opacity: var(--mdc-outlined-button-focus-state-layer-opacity, 0.12);
556
682
  }
557
683
  .mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
558
684
  transition: opacity 150ms linear;
559
685
  }
560
686
  .mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
561
687
  transition-duration: 75ms;
562
- opacity: 0.24;
688
+ opacity: 0.12;
563
689
  /* @alternate */
564
- opacity: var(--mdc-ripple-press-opacity, 0.24);
690
+ opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12);
565
691
  }
566
692
  .mdc-button--outlined.mdc-ripple-upgraded {
567
- --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
693
+ --mdc-ripple-fg-opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12);
568
694
  }
569
695
  .mdc-button--outlined .mdc-button__ripple {
570
696
  border-radius: 4px;
571
697
  /* @alternate */
572
- border-radius: var(--mdc-shape-small, 4px);
698
+ border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));
573
699
  }
574
700
  .mdc-button--outlined:not(:disabled) {
575
701
  border-color: rgba(0, 0, 0, 0.12);
702
+ /* @alternate */
703
+ border-color: var(--mdc-outlined-button-outline-color, rgba(0, 0, 0, 0.12));
576
704
  }
577
705
  .mdc-button--outlined:disabled {
578
706
  border-color: rgba(0, 0, 0, 0.12);
707
+ /* @alternate */
708
+ border-color: var(--mdc-outlined-button-disabled-outline-color, rgba(0, 0, 0, 0.12));
709
+ }
710
+ .mdc-button--outlined.mdc-button--icon-trailing {
711
+ padding: 0 11px 0 15px;
712
+ }
713
+ .mdc-button--outlined.mdc-button--icon-leading {
714
+ padding: 0 15px 0 11px;
579
715
  }
580
716
  .mdc-button--outlined .mdc-button__ripple {
581
- top: -1px;
582
- left: -1px;
583
- border: 1px solid transparent;
717
+ top: calc(-1 * 1px);
718
+ /* @alternate */
719
+ top: calc(-1 * var(--mdc-outlined-button-outline-width, 1px));
720
+ left: calc(-1 * 1px);
721
+ /* @alternate */
722
+ left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px));
723
+ border-width: 1px;
724
+ /* @alternate */
725
+ border-width: var(--mdc-outlined-button-outline-width, 1px);
584
726
  }
585
727
  .mdc-button--outlined .mdc-button__touch {
586
- left: -1px;
728
+ left: calc(-1 * 1px);
729
+ /* @alternate */
730
+ left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px));
587
731
  width: calc(100% + 2 * 1px);
732
+ /* @alternate */
733
+ width: calc(100% + 2 * var(--mdc-outlined-button-outline-width, 1px));
734
+ }
735
+
736
+ .mdc-button--raised .mdc-button__icon,
737
+ .mdc-button--unelevated .mdc-button__icon,
738
+ .mdc-button--outlined .mdc-button__icon {
739
+ /* @noflip */
740
+ /*rtl:ignore*/
741
+ margin-left: -4px;
742
+ /* @noflip */
743
+ /*rtl:ignore*/
744
+ margin-right: 8px;
745
+ }
746
+ [dir=rtl] .mdc-button--raised .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__icon[dir=rtl] {
747
+ /*rtl:begin:ignore*/
748
+ /* @noflip */
749
+ /*rtl:ignore*/
750
+ margin-left: 8px;
751
+ /* @noflip */
752
+ /*rtl:ignore*/
753
+ margin-right: -4px;
754
+ /*rtl:end:ignore*/
755
+ }
756
+
757
+ .mdc-button--raised .mdc-button__label + .mdc-button__icon,
758
+ .mdc-button--unelevated .mdc-button__label + .mdc-button__icon,
759
+ .mdc-button--outlined .mdc-button__label + .mdc-button__icon {
760
+ /* @noflip */
761
+ /*rtl:ignore*/
762
+ margin-left: 8px;
763
+ /* @noflip */
764
+ /*rtl:ignore*/
765
+ margin-right: -4px;
766
+ }
767
+ [dir=rtl] .mdc-button--raised .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__label + .mdc-button__icon, .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] {
768
+ /*rtl:begin:ignore*/
769
+ /* @noflip */
770
+ /*rtl:ignore*/
771
+ margin-left: -4px;
772
+ /* @noflip */
773
+ /*rtl:ignore*/
774
+ margin-right: 8px;
775
+ /*rtl:end:ignore*/
588
776
  }
589
777
 
590
778
  :host {