mdc.menu.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  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. /* @noflip */
  13. /*rtl:ignore*/
  14. -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  15. transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  16. }
  17. to {
  18. /* @noflip */
  19. /*rtl:ignore*/
  20. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  21. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  22. }
  23. }
  24. @keyframes mdc-ripple-fg-radius-in {
  25. from {
  26. -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  27. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  28. /* @noflip */
  29. /*rtl:ignore*/
  30. -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  31. transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  32. }
  33. to {
  34. /* @noflip */
  35. /*rtl:ignore*/
  36. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  37. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  38. }
  39. }
  40. @-webkit-keyframes mdc-ripple-fg-opacity-in {
  41. from {
  42. -webkit-animation-timing-function: linear;
  43. animation-timing-function: linear;
  44. opacity: 0;
  45. }
  46. to {
  47. opacity: var(--mdc-ripple-fg-opacity, 0);
  48. }
  49. }
  50. @keyframes mdc-ripple-fg-opacity-in {
  51. from {
  52. -webkit-animation-timing-function: linear;
  53. animation-timing-function: linear;
  54. opacity: 0;
  55. }
  56. to {
  57. opacity: var(--mdc-ripple-fg-opacity, 0);
  58. }
  59. }
  60. @-webkit-keyframes mdc-ripple-fg-opacity-out {
  61. from {
  62. -webkit-animation-timing-function: linear;
  63. animation-timing-function: linear;
  64. opacity: var(--mdc-ripple-fg-opacity, 0);
  65. }
  66. to {
  67. opacity: 0;
  68. }
  69. }
  70. @keyframes mdc-ripple-fg-opacity-out {
  71. from {
  72. -webkit-animation-timing-function: linear;
  73. animation-timing-function: linear;
  74. opacity: var(--mdc-ripple-fg-opacity, 0);
  75. }
  76. to {
  77. opacity: 0;
  78. }
  79. }
  80. .mdc-elevation-overlay {
  81. position: absolute;
  82. border-radius: inherit;
  83. pointer-events: none;
  84. opacity: 0;
  85. /* @alternate */
  86. opacity: var(--mdc-elevation-overlay-opacity, 0);
  87. transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
  88. background-color: #fff;
  89. /* @alternate */
  90. background-color: var(--mdc-elevation-overlay-color, #fff);
  91. }
  92. .mdc-menu {
  93. min-width: 112px;
  94. /* @alternate */
  95. min-width: var(--mdc-menu-min-width, 112px);
  96. }
  97. .mdc-menu .mdc-deprecated-list-item__meta {
  98. color: rgba(0, 0, 0, 0.87);
  99. }
  100. .mdc-menu .mdc-deprecated-list-item__graphic {
  101. color: rgba(0, 0, 0, 0.87);
  102. }
  103. .mdc-menu .mdc-menu-item--submenu-open .mdc-deprecated-list-item__ripple::before {
  104. opacity: 0.04;
  105. }
  106. .mdc-menu .mdc-menu-item--submenu-open .mdc-list-item__ripple::before {
  107. opacity: 0.04;
  108. }
  109. .mdc-menu .mdc-deprecated-list {
  110. color: rgba(0, 0, 0, 0.87);
  111. }
  112. .mdc-menu .mdc-deprecated-list,
  113. .mdc-menu .mdc-list {
  114. /* @alternate */
  115. position: relative;
  116. }
  117. .mdc-menu .mdc-deprecated-list .mdc-elevation-overlay,
  118. .mdc-menu .mdc-list .mdc-elevation-overlay {
  119. width: 100%;
  120. height: 100%;
  121. top: 0;
  122. /* @noflip */
  123. /*rtl:ignore*/
  124. left: 0;
  125. }
  126. .mdc-menu .mdc-deprecated-list::before,
  127. .mdc-menu .mdc-list::before {
  128. position: absolute;
  129. box-sizing: border-box;
  130. width: 100%;
  131. height: 100%;
  132. top: 0;
  133. /* @noflip */
  134. /*rtl:ignore*/
  135. left: 0;
  136. border: 1px solid transparent;
  137. border-radius: inherit;
  138. content: "";
  139. pointer-events: none;
  140. }
  141. @media screen and (forced-colors: active) {
  142. .mdc-menu .mdc-deprecated-list::before,
  143. .mdc-menu .mdc-list::before {
  144. border-color: CanvasText;
  145. }
  146. }
  147. .mdc-menu .mdc-deprecated-list-divider {
  148. margin: 8px 0;
  149. }
  150. .mdc-menu .mdc-deprecated-list-item {
  151. -webkit-user-select: none;
  152. -moz-user-select: none;
  153. -ms-user-select: none;
  154. user-select: none;
  155. }
  156. .mdc-menu .mdc-deprecated-list-item--disabled {
  157. cursor: auto;
  158. }
  159. .mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__text,
  160. .mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic {
  161. pointer-events: none;
  162. }
  163. .mdc-menu__selection-group {
  164. padding: 0;
  165. fill: currentColor;
  166. }
  167. .mdc-menu__selection-group .mdc-deprecated-list-item {
  168. /* @noflip */
  169. /*rtl:ignore*/
  170. padding-left: 56px;
  171. /* @noflip */
  172. /*rtl:ignore*/
  173. padding-right: 16px;
  174. }
  175. [dir=rtl] .mdc-menu__selection-group .mdc-deprecated-list-item, .mdc-menu__selection-group .mdc-deprecated-list-item[dir=rtl] {
  176. /*rtl:begin:ignore*/
  177. /* @noflip */
  178. /*rtl:ignore*/
  179. padding-left: 16px;
  180. /* @noflip */
  181. /*rtl:ignore*/
  182. padding-right: 56px;
  183. /*rtl:end:ignore*/
  184. }
  185. .mdc-menu__selection-group .mdc-menu__selection-group-icon {
  186. /* @noflip */
  187. /*rtl:ignore*/
  188. left: 16px;
  189. /* @noflip */
  190. /*rtl:ignore*/
  191. right: initial;
  192. visibility: hidden;
  193. position: absolute;
  194. top: 50%;
  195. -webkit-transform: translateY(-50%);
  196. transform: translateY(-50%);
  197. transition-property: visibility;
  198. transition-delay: 0.075s;
  199. }
  200. [dir=rtl] .mdc-menu__selection-group .mdc-menu__selection-group-icon, .mdc-menu__selection-group .mdc-menu__selection-group-icon[dir=rtl] {
  201. /*rtl:begin:ignore*/
  202. /* @noflip */
  203. /*rtl:ignore*/
  204. left: initial;
  205. /* @noflip */
  206. /*rtl:ignore*/
  207. right: 16px;
  208. /*rtl:end:ignore*/
  209. }
  210. .mdc-menu-item--selected .mdc-menu__selection-group-icon {
  211. display: inline;
  212. visibility: visible;
  213. }
  214. /*# sourceMappingURL=mdc.menu.css.map*/