mdc.floating-label.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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-floating-label {
  9. position: absolute;
  10. /* @noflip */
  11. /*rtl:ignore*/
  12. left: 0;
  13. /* @noflip */
  14. /*rtl:ignore*/
  15. -webkit-transform-origin: left top;
  16. /* @noflip */
  17. /*rtl:ignore*/
  18. transform-origin: left top;
  19. line-height: 1.15rem;
  20. text-align: left;
  21. text-overflow: ellipsis;
  22. white-space: nowrap;
  23. cursor: text;
  24. overflow: hidden;
  25. /* @alternate */
  26. will-change: transform;
  27. }
  28. [dir=rtl] .mdc-floating-label, .mdc-floating-label[dir=rtl] {
  29. /*rtl:begin:ignore*/
  30. /* @noflip */
  31. /*rtl:ignore*/
  32. right: 0;
  33. /* @noflip */
  34. /*rtl:ignore*/
  35. left: auto;
  36. /* @noflip */
  37. /*rtl:ignore*/
  38. -webkit-transform-origin: right top;
  39. /* @noflip */
  40. /*rtl:ignore*/
  41. transform-origin: right top;
  42. /* @noflip */
  43. /*rtl:ignore*/
  44. text-align: right;
  45. /*rtl:end:ignore*/
  46. }
  47. .mdc-floating-label--float-above {
  48. cursor: auto;
  49. }
  50. .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after {
  51. /* @noflip */
  52. /*rtl:ignore*/
  53. margin-left: 1px;
  54. /* @noflip */
  55. /*rtl:ignore*/
  56. margin-right: 0px;
  57. content: "*";
  58. }
  59. [dir=rtl] .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker), .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)[dir=rtl] {
  60. /*rtl:begin:ignore*/
  61. /*rtl:end:ignore*/
  62. }
  63. [dir=rtl] .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after, .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)[dir=rtl]::after {
  64. /* @noflip */
  65. /*rtl:ignore*/
  66. margin-left: 0;
  67. /* @noflip */
  68. /*rtl:ignore*/
  69. margin-right: 1px;
  70. }
  71. .mdc-floating-label {
  72. -moz-osx-font-smoothing: grayscale;
  73. -webkit-font-smoothing: antialiased;
  74. font-family: Roboto, sans-serif;
  75. /* @alternate */
  76. font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
  77. font-size: 1rem;
  78. /* @alternate */
  79. font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
  80. font-weight: 400;
  81. /* @alternate */
  82. font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
  83. letter-spacing: 0.009375em;
  84. /* @alternate */
  85. letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
  86. text-decoration: inherit;
  87. /* @alternate */
  88. -webkit-text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
  89. text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
  90. text-transform: inherit;
  91. /* @alternate */
  92. text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
  93. transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  94. transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  95. transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  96. }
  97. .mdc-floating-label--float-above {
  98. -webkit-transform: translateY(-106%) scale(0.75);
  99. transform: translateY(-106%) scale(0.75);
  100. }
  101. .mdc-floating-label--shake {
  102. -webkit-animation: mdc-floating-label-shake-float-above-standard 250ms 1;
  103. animation: mdc-floating-label-shake-float-above-standard 250ms 1;
  104. }
  105. @-webkit-keyframes mdc-floating-label-shake-float-above-standard {
  106. 0% {
  107. /* @noflip */
  108. /*rtl:ignore*/
  109. -webkit-transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  110. transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  111. }
  112. 33% {
  113. -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
  114. animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
  115. /* @noflip */
  116. /*rtl:ignore*/
  117. -webkit-transform: translateX(calc(4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  118. transform: translateX(calc(4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  119. }
  120. 66% {
  121. -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
  122. animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
  123. /* @noflip */
  124. /*rtl:ignore*/
  125. -webkit-transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  126. transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  127. }
  128. 100% {
  129. /* @noflip */
  130. /*rtl:ignore*/
  131. -webkit-transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  132. transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  133. }
  134. }
  135. @keyframes mdc-floating-label-shake-float-above-standard {
  136. 0% {
  137. /* @noflip */
  138. /*rtl:ignore*/
  139. -webkit-transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  140. transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  141. }
  142. 33% {
  143. -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
  144. animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
  145. /* @noflip */
  146. /*rtl:ignore*/
  147. -webkit-transform: translateX(calc(4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  148. transform: translateX(calc(4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  149. }
  150. 66% {
  151. -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
  152. animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
  153. /* @noflip */
  154. /*rtl:ignore*/
  155. -webkit-transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  156. transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  157. }
  158. 100% {
  159. /* @noflip */
  160. /*rtl:ignore*/
  161. -webkit-transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  162. transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75);
  163. }
  164. }
  165. /*# sourceMappingURL=mdc.floating-label.css.map*/