UNPKG

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