mdc.notched-outline.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  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-notched-outline {
  9. display: flex;
  10. position: absolute;
  11. top: 0;
  12. right: 0;
  13. left: 0;
  14. box-sizing: border-box;
  15. width: 100%;
  16. max-width: 100%;
  17. height: 100%;
  18. /* @noflip */
  19. /*rtl:ignore*/
  20. text-align: left;
  21. pointer-events: none;
  22. }
  23. [dir=rtl] .mdc-notched-outline, .mdc-notched-outline[dir=rtl] {
  24. /*rtl:begin:ignore*/
  25. /* @noflip */
  26. /*rtl:ignore*/
  27. text-align: right;
  28. /*rtl:end:ignore*/
  29. }
  30. .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
  31. box-sizing: border-box;
  32. height: 100%;
  33. pointer-events: none;
  34. }
  35. .mdc-notched-outline__trailing {
  36. flex-grow: 1;
  37. }
  38. .mdc-notched-outline__notch {
  39. flex: 0 0 auto;
  40. width: auto;
  41. }
  42. .mdc-notched-outline .mdc-floating-label {
  43. display: inline-block;
  44. position: relative;
  45. max-width: 100%;
  46. }
  47. .mdc-notched-outline .mdc-floating-label--float-above {
  48. text-overflow: clip;
  49. }
  50. .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
  51. max-width: 133.3333333333%;
  52. }
  53. .mdc-notched-outline--notched .mdc-notched-outline__notch {
  54. /* @noflip */
  55. /*rtl:ignore*/
  56. padding-left: 0;
  57. /* @noflip */
  58. /*rtl:ignore*/
  59. padding-right: 8px;
  60. border-top: none;
  61. }
  62. [dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch, .mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl] {
  63. /*rtl:begin:ignore*/
  64. /* @noflip */
  65. /*rtl:ignore*/
  66. padding-left: 8px;
  67. /* @noflip */
  68. /*rtl:ignore*/
  69. padding-right: 0;
  70. /*rtl:end:ignore*/
  71. }
  72. .mdc-notched-outline--no-label .mdc-notched-outline__notch {
  73. display: none;
  74. }
  75. .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
  76. border-top: 1px solid;
  77. border-bottom: 1px solid;
  78. }
  79. .mdc-notched-outline__leading {
  80. /* @noflip */
  81. /*rtl:ignore*/
  82. border-left: 1px solid;
  83. /* @noflip */
  84. /*rtl:ignore*/
  85. border-right: none;
  86. width: 12px;
  87. }
  88. [dir=rtl] .mdc-notched-outline__leading, .mdc-notched-outline__leading[dir=rtl] {
  89. /*rtl:begin:ignore*/
  90. /* @noflip */
  91. /*rtl:ignore*/
  92. border-left: none;
  93. /* @noflip */
  94. /*rtl:ignore*/
  95. border-right: 1px solid;
  96. /*rtl:end:ignore*/
  97. }
  98. .mdc-notched-outline__trailing {
  99. /* @noflip */
  100. /*rtl:ignore*/
  101. border-left: none;
  102. /* @noflip */
  103. /*rtl:ignore*/
  104. border-right: 1px solid;
  105. }
  106. [dir=rtl] .mdc-notched-outline__trailing, .mdc-notched-outline__trailing[dir=rtl] {
  107. /*rtl:begin:ignore*/
  108. /* @noflip */
  109. /*rtl:ignore*/
  110. border-left: 1px solid;
  111. /* @noflip */
  112. /*rtl:ignore*/
  113. border-right: none;
  114. /*rtl:end:ignore*/
  115. }
  116. .mdc-notched-outline__notch {
  117. max-width: calc(100% - 12px * 2);
  118. }
  119. /*# sourceMappingURL=mdc.notched-outline.css.map*/