mdc.ripple.css 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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. @-webkit-keyframes mdc-ripple-fg-radius-in {
  9. from {
  10. -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  11. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  12. -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  13. transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  14. }
  15. to {
  16. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  17. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  18. }
  19. }
  20. @keyframes mdc-ripple-fg-radius-in {
  21. from {
  22. -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  23. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  24. -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  25. transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  26. }
  27. to {
  28. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  29. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  30. }
  31. }
  32. @-webkit-keyframes mdc-ripple-fg-opacity-in {
  33. from {
  34. -webkit-animation-timing-function: linear;
  35. animation-timing-function: linear;
  36. opacity: 0;
  37. }
  38. to {
  39. opacity: var(--mdc-ripple-fg-opacity, 0);
  40. }
  41. }
  42. @keyframes mdc-ripple-fg-opacity-in {
  43. from {
  44. -webkit-animation-timing-function: linear;
  45. animation-timing-function: linear;
  46. opacity: 0;
  47. }
  48. to {
  49. opacity: var(--mdc-ripple-fg-opacity, 0);
  50. }
  51. }
  52. @-webkit-keyframes mdc-ripple-fg-opacity-out {
  53. from {
  54. -webkit-animation-timing-function: linear;
  55. animation-timing-function: linear;
  56. opacity: var(--mdc-ripple-fg-opacity, 0);
  57. }
  58. to {
  59. opacity: 0;
  60. }
  61. }
  62. @keyframes mdc-ripple-fg-opacity-out {
  63. from {
  64. -webkit-animation-timing-function: linear;
  65. animation-timing-function: linear;
  66. opacity: var(--mdc-ripple-fg-opacity, 0);
  67. }
  68. to {
  69. opacity: 0;
  70. }
  71. }
  72. .mdc-ripple-surface {
  73. --mdc-ripple-fg-size: 0;
  74. --mdc-ripple-left: 0;
  75. --mdc-ripple-top: 0;
  76. --mdc-ripple-fg-scale: 1;
  77. --mdc-ripple-fg-translate-end: 0;
  78. --mdc-ripple-fg-translate-start: 0;
  79. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  80. position: relative;
  81. outline: none;
  82. overflow: hidden;
  83. }
  84. .mdc-ripple-surface::before, .mdc-ripple-surface::after {
  85. position: absolute;
  86. border-radius: 50%;
  87. opacity: 0;
  88. pointer-events: none;
  89. content: "";
  90. }
  91. .mdc-ripple-surface::before {
  92. transition: opacity 15ms linear, background-color 15ms linear;
  93. z-index: 1;
  94. }
  95. .mdc-ripple-surface.mdc-ripple-upgraded::before {
  96. -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
  97. transform: scale(var(--mdc-ripple-fg-scale, 1));
  98. }
  99. .mdc-ripple-surface.mdc-ripple-upgraded::after {
  100. top: 0;
  101. /* @noflip */
  102. left: 0;
  103. -webkit-transform: scale(0);
  104. transform: scale(0);
  105. -webkit-transform-origin: center center;
  106. transform-origin: center center;
  107. }
  108. .mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
  109. top: var(--mdc-ripple-top, 0);
  110. /* @noflip */
  111. left: var(--mdc-ripple-left, 0);
  112. }
  113. .mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
  114. -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
  115. animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
  116. }
  117. .mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
  118. -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
  119. animation: mdc-ripple-fg-opacity-out 150ms;
  120. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  121. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  122. }
  123. .mdc-ripple-surface::before, .mdc-ripple-surface::after {
  124. background-color: #000;
  125. }
  126. .mdc-ripple-surface:hover::before {
  127. opacity: 0.04;
  128. }
  129. .mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
  130. transition-duration: 75ms;
  131. opacity: 0.12;
  132. }
  133. .mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
  134. transition: opacity 150ms linear;
  135. }
  136. .mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
  137. transition-duration: 75ms;
  138. opacity: 0.12;
  139. }
  140. .mdc-ripple-surface.mdc-ripple-upgraded {
  141. --mdc-ripple-fg-opacity: 0.12;
  142. }
  143. .mdc-ripple-surface::before, .mdc-ripple-surface::after {
  144. top: calc(50% - 100%);
  145. /* @noflip */
  146. left: calc(50% - 100%);
  147. width: 200%;
  148. height: 200%;
  149. }
  150. .mdc-ripple-surface.mdc-ripple-upgraded::after {
  151. width: var(--mdc-ripple-fg-size, 100%);
  152. height: var(--mdc-ripple-fg-size, 100%);
  153. }
  154. .mdc-ripple-surface[data-mdc-ripple-is-unbounded] {
  155. overflow: visible;
  156. }
  157. .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after {
  158. top: calc(50% - 50%);
  159. /* @noflip */
  160. left: calc(50% - 50%);
  161. width: 100%;
  162. height: 100%;
  163. }
  164. .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
  165. top: var(--mdc-ripple-top, calc(50% - 50%));
  166. /* @noflip */
  167. left: var(--mdc-ripple-left, calc(50% - 50%));
  168. width: var(--mdc-ripple-fg-size, 100%);
  169. height: var(--mdc-ripple-fg-size, 100%);
  170. }
  171. .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
  172. width: var(--mdc-ripple-fg-size, 100%);
  173. height: var(--mdc-ripple-fg-size, 100%);
  174. }
  175. .mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
  176. background-color: #6200ee;
  177. /* @alternate */
  178. background-color: var(--mdc-theme-primary, #6200ee);
  179. }
  180. .mdc-ripple-surface--primary:hover::before {
  181. opacity: 0.04;
  182. }
  183. .mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before {
  184. transition-duration: 75ms;
  185. opacity: 0.12;
  186. }
  187. .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after {
  188. transition: opacity 150ms linear;
  189. }
  190. .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after {
  191. transition-duration: 75ms;
  192. opacity: 0.12;
  193. }
  194. .mdc-ripple-surface--primary.mdc-ripple-upgraded {
  195. --mdc-ripple-fg-opacity: 0.12;
  196. }
  197. .mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
  198. background-color: #018786;
  199. /* @alternate */
  200. background-color: var(--mdc-theme-secondary, #018786);
  201. }
  202. .mdc-ripple-surface--accent:hover::before {
  203. opacity: 0.04;
  204. }
  205. .mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before {
  206. transition-duration: 75ms;
  207. opacity: 0.12;
  208. }
  209. .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after {
  210. transition: opacity 150ms linear;
  211. }
  212. .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after {
  213. transition-duration: 75ms;
  214. opacity: 0.12;
  215. }
  216. .mdc-ripple-surface--accent.mdc-ripple-upgraded {
  217. --mdc-ripple-fg-opacity: 0.12;
  218. }
  219. /*# sourceMappingURL=mdc.ripple.css.map*/