mdc.snackbar.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
  7. */
  8. .mdc-snackbar__surface {
  9. background-color: #333333;
  10. }
  11. .mdc-snackbar__label {
  12. color: rgba(255, 255, 255, 0.87);
  13. }
  14. .mdc-snackbar__surface {
  15. min-width: 344px;
  16. }
  17. @media (max-width: 480px), (max-width: 344px) {
  18. .mdc-snackbar__surface {
  19. min-width: 100%;
  20. }
  21. }
  22. .mdc-snackbar__surface {
  23. max-width: 672px;
  24. }
  25. .mdc-snackbar__surface {
  26. box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  27. }
  28. .mdc-snackbar__surface {
  29. border-radius: 4px;
  30. /* @alternate */
  31. border-radius: var(--mdc-shape-small, 4px);
  32. }
  33. .mdc-snackbar {
  34. display: none;
  35. position: fixed;
  36. right: 0;
  37. bottom: 0;
  38. left: 0;
  39. align-items: center;
  40. justify-content: center;
  41. box-sizing: border-box;
  42. pointer-events: none;
  43. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  44. }
  45. .mdc-snackbar--opening,
  46. .mdc-snackbar--open,
  47. .mdc-snackbar--closing {
  48. display: flex;
  49. }
  50. .mdc-snackbar--open .mdc-snackbar__label,
  51. .mdc-snackbar--open .mdc-snackbar__actions {
  52. visibility: visible;
  53. }
  54. .mdc-snackbar__surface {
  55. /* @noflip */
  56. /*rtl:ignore*/
  57. padding-left: 0;
  58. /* @noflip */
  59. /*rtl:ignore*/
  60. padding-right: 8px;
  61. display: flex;
  62. align-items: center;
  63. justify-content: flex-start;
  64. box-sizing: border-box;
  65. -webkit-transform: scale(0.8);
  66. transform: scale(0.8);
  67. opacity: 0;
  68. }
  69. .mdc-snackbar__surface::before {
  70. position: absolute;
  71. box-sizing: border-box;
  72. width: 100%;
  73. height: 100%;
  74. top: 0;
  75. /* @noflip */
  76. /*rtl:ignore*/
  77. left: 0;
  78. border: 1px solid transparent;
  79. border-radius: inherit;
  80. content: "";
  81. pointer-events: none;
  82. }
  83. @media screen and (forced-colors: active) {
  84. .mdc-snackbar__surface::before {
  85. border-color: CanvasText;
  86. }
  87. }
  88. [dir=rtl] .mdc-snackbar__surface, .mdc-snackbar__surface[dir=rtl] {
  89. /*rtl:begin:ignore*/
  90. /* @noflip */
  91. /*rtl:ignore*/
  92. padding-left: 8px;
  93. /* @noflip */
  94. /*rtl:ignore*/
  95. padding-right: 0;
  96. /*rtl:end:ignore*/
  97. }
  98. .mdc-snackbar--open .mdc-snackbar__surface {
  99. -webkit-transform: scale(1);
  100. transform: scale(1);
  101. opacity: 1;
  102. pointer-events: auto;
  103. transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
  104. transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
  105. transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
  106. }
  107. .mdc-snackbar--closing .mdc-snackbar__surface {
  108. -webkit-transform: scale(1);
  109. transform: scale(1);
  110. transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1);
  111. }
  112. .mdc-snackbar__label {
  113. /* @noflip */
  114. /*rtl:ignore*/
  115. padding-left: 16px;
  116. /* @noflip */
  117. /*rtl:ignore*/
  118. padding-right: 8px;
  119. width: 100%;
  120. flex-grow: 1;
  121. box-sizing: border-box;
  122. margin: 0;
  123. visibility: hidden;
  124. padding-top: 14px;
  125. padding-bottom: 14px;
  126. }
  127. [dir=rtl] .mdc-snackbar__label, .mdc-snackbar__label[dir=rtl] {
  128. /*rtl:begin:ignore*/
  129. /* @noflip */
  130. /*rtl:ignore*/
  131. padding-left: 8px;
  132. /* @noflip */
  133. /*rtl:ignore*/
  134. padding-right: 16px;
  135. /*rtl:end:ignore*/
  136. }
  137. .mdc-snackbar__label::before {
  138. display: inline;
  139. content: attr(data-mdc-snackbar-label-text);
  140. }
  141. .mdc-snackbar__actions {
  142. display: flex;
  143. flex-shrink: 0;
  144. align-items: center;
  145. box-sizing: border-box;
  146. visibility: hidden;
  147. }
  148. .mdc-snackbar__action + .mdc-snackbar__dismiss {
  149. /* @noflip */
  150. /*rtl:ignore*/
  151. margin-left: 8px;
  152. /* @noflip */
  153. /*rtl:ignore*/
  154. margin-right: 0;
  155. }
  156. [dir=rtl] .mdc-snackbar__action + .mdc-snackbar__dismiss, .mdc-snackbar__action + .mdc-snackbar__dismiss[dir=rtl] {
  157. /*rtl:begin:ignore*/
  158. /* @noflip */
  159. /*rtl:ignore*/
  160. margin-left: 0;
  161. /* @noflip */
  162. /*rtl:ignore*/
  163. margin-right: 8px;
  164. /*rtl:end:ignore*/
  165. }
  166. .mdc-snackbar {
  167. z-index: 8;
  168. margin: 8px;
  169. }
  170. .mdc-snackbar--stacked .mdc-snackbar__label {
  171. /* @noflip */
  172. /*rtl:ignore*/
  173. padding-left: 16px;
  174. /* @noflip */
  175. /*rtl:ignore*/
  176. padding-right: 8px;
  177. padding-bottom: 12px;
  178. }
  179. [dir=rtl] .mdc-snackbar--stacked .mdc-snackbar__label, .mdc-snackbar--stacked .mdc-snackbar__label[dir=rtl] {
  180. /*rtl:begin:ignore*/
  181. /* @noflip */
  182. /*rtl:ignore*/
  183. padding-left: 8px;
  184. /* @noflip */
  185. /*rtl:ignore*/
  186. padding-right: 16px;
  187. /*rtl:end:ignore*/
  188. }
  189. .mdc-snackbar--stacked .mdc-snackbar__surface {
  190. flex-direction: column;
  191. align-items: flex-start;
  192. }
  193. .mdc-snackbar--stacked .mdc-snackbar__actions {
  194. align-self: flex-end;
  195. margin-bottom: 8px;
  196. }
  197. .mdc-snackbar--leading {
  198. justify-content: flex-start;
  199. }
  200. .mdc-snackbar__label {
  201. -moz-osx-font-smoothing: grayscale;
  202. -webkit-font-smoothing: antialiased;
  203. font-family: Roboto, sans-serif;
  204. /* @alternate */
  205. font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
  206. font-size: 0.875rem;
  207. /* @alternate */
  208. font-size: var(--mdc-typography-body2-font-size, 0.875rem);
  209. line-height: 1.25rem;
  210. /* @alternate */
  211. line-height: var(--mdc-typography-body2-line-height, 1.25rem);
  212. font-weight: 400;
  213. /* @alternate */
  214. font-weight: var(--mdc-typography-body2-font-weight, 400);
  215. letter-spacing: 0.0178571429em;
  216. /* @alternate */
  217. letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
  218. text-decoration: inherit;
  219. /* @alternate */
  220. -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
  221. text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
  222. text-transform: inherit;
  223. /* @alternate */
  224. text-transform: var(--mdc-typography-body2-text-transform, inherit);
  225. }
  226. .mdc-snackbar__action:not(:disabled) {
  227. color: #bb86fc;
  228. }
  229. .mdc-snackbar__action .mdc-button__ripple::before, .mdc-snackbar__action .mdc-button__ripple::after {
  230. background-color: #bb86fc;
  231. /* @alternate */
  232. background-color: var(--mdc-ripple-color, #bb86fc);
  233. }
  234. .mdc-snackbar__action:hover .mdc-button__ripple::before, .mdc-snackbar__action.mdc-ripple-surface--hover .mdc-button__ripple::before {
  235. opacity: 0.08;
  236. /* @alternate */
  237. opacity: var(--mdc-ripple-hover-opacity, 0.08);
  238. }
  239. .mdc-snackbar__action.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-snackbar__action:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
  240. transition-duration: 75ms;
  241. opacity: 0.24;
  242. /* @alternate */
  243. opacity: var(--mdc-ripple-focus-opacity, 0.24);
  244. }
  245. .mdc-snackbar__action:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
  246. transition: opacity 150ms linear;
  247. }
  248. .mdc-snackbar__action:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
  249. transition-duration: 75ms;
  250. opacity: 0.24;
  251. /* @alternate */
  252. opacity: var(--mdc-ripple-press-opacity, 0.24);
  253. }
  254. .mdc-snackbar__action.mdc-ripple-upgraded {
  255. --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
  256. }
  257. .mdc-snackbar__dismiss {
  258. color: rgba(255, 255, 255, 0.87);
  259. }
  260. .mdc-snackbar__dismiss .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss .mdc-icon-button__ripple::after {
  261. background-color: rgba(255, 255, 255, 0.87);
  262. /* @alternate */
  263. background-color: var(--mdc-ripple-color, rgba(255, 255, 255, 0.87));
  264. }
  265. .mdc-snackbar__dismiss:hover .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {
  266. opacity: 0.08;
  267. /* @alternate */
  268. opacity: var(--mdc-ripple-hover-opacity, 0.08);
  269. }
  270. .mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {
  271. transition-duration: 75ms;
  272. opacity: 0.24;
  273. /* @alternate */
  274. opacity: var(--mdc-ripple-focus-opacity, 0.24);
  275. }
  276. .mdc-snackbar__dismiss:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {
  277. transition: opacity 150ms linear;
  278. }
  279. .mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {
  280. transition-duration: 75ms;
  281. opacity: 0.24;
  282. /* @alternate */
  283. opacity: var(--mdc-ripple-press-opacity, 0.24);
  284. }
  285. .mdc-snackbar__dismiss.mdc-ripple-upgraded {
  286. --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
  287. }
  288. .mdc-snackbar__dismiss.mdc-snackbar__dismiss {
  289. width: 36px;
  290. height: 36px;
  291. padding: 6px;
  292. font-size: 18px;
  293. }
  294. .mdc-snackbar__dismiss.mdc-snackbar__dismiss .mdc-icon-button__focus-ring {
  295. max-height: 36px;
  296. max-width: 36px;
  297. }
  298. .mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-icon-button--reduced-size .mdc-icon-button__ripple {
  299. width: 36px;
  300. height: 36px;
  301. margin-top: 0px;
  302. margin-bottom: 0px;
  303. margin-right: 0px;
  304. margin-left: 0px;
  305. }
  306. .mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-icon-button--reduced-size .mdc-icon-button__focus-ring {
  307. max-height: 36px;
  308. max-width: 36px;
  309. }
  310. .mdc-snackbar__dismiss.mdc-snackbar__dismiss .mdc-icon-button__touch {
  311. position: absolute;
  312. top: 50%;
  313. height: 36px;
  314. /* @noflip */
  315. /*rtl:ignore*/
  316. left: 50%;
  317. width: 36px;
  318. /* @noflip */
  319. /*rtl:ignore*/
  320. -webkit-transform: translate(-50%, -50%);
  321. transform: translate(-50%, -50%);
  322. }
  323. /*# sourceMappingURL=mdc.snackbar.css.map*/