1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | @import '../../globals/scss/vars';
|
13 | @import '../../globals/scss/typography';
|
14 | @import '../../globals/scss/css--reset';
|
15 | @import '../../globals/scss/helper-mixins';
|
16 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
17 | @import '../form/form';
|
18 |
|
19 |
|
20 |
|
21 |
|
22 | @mixin text-area {
|
23 | .#{$prefix}--text-area {
|
24 | @include reset;
|
25 | @include type-style('body-long-01');
|
26 | @include focus-outline('reset');
|
27 |
|
28 | width: 100%;
|
29 | min-width: 10rem;
|
30 | height: 100%;
|
31 | min-height: rem(40px);
|
32 | padding: rem(11px) $carbon--spacing-05;
|
33 | color: $text-01;
|
34 | background-color: $field-01;
|
35 | border: none;
|
36 | border-bottom: 1px solid $ui-04;
|
37 | transition: background-color $duration--fast-01 motion(standard, productive),
|
38 | outline $duration--fast-01 motion(standard, productive);
|
39 | resize: vertical;
|
40 | }
|
41 |
|
42 | .#{$prefix}--text-area:focus,
|
43 | .#{$prefix}--text-area:active {
|
44 | @include focus-outline('outline');
|
45 | }
|
46 |
|
47 | .#{$prefix}--text-area::placeholder {
|
48 | @include placeholder-colors;
|
49 | @include type-style('body-long-01');
|
50 | }
|
51 |
|
52 | .#{$prefix}--text-area--light {
|
53 | background-color: $field-02;
|
54 | }
|
55 |
|
56 | .#{$prefix}--text-area--invalid {
|
57 | padding-right: $carbon--spacing-08;
|
58 | }
|
59 |
|
60 | .#{$prefix}--text-area__wrapper {
|
61 | position: relative;
|
62 | display: flex;
|
63 | width: 100%;
|
64 | }
|
65 |
|
66 | .#{$prefix}--text-area__invalid-icon {
|
67 | position: absolute;
|
68 | top: $carbon--spacing-04;
|
69 | right: $carbon--spacing-05;
|
70 | fill: $support-01;
|
71 | }
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | .#{$prefix}--text-area:disabled {
|
77 | color: $disabled-02;
|
78 | background-color: $disabled-background-color;
|
79 | border-bottom: 1px solid transparent;
|
80 | outline: none;
|
81 | cursor: not-allowed;
|
82 | }
|
83 |
|
84 | .#{$prefix}--text-area:disabled::placeholder {
|
85 | color: $disabled-02;
|
86 | }
|
87 |
|
88 | .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
|
89 | background-color: $field-02;
|
90 | }
|
91 |
|
92 |
|
93 | #{$prefix}--text-area.#{$prefix}--skeleton {
|
94 | @include skeleton;
|
95 |
|
96 | height: rem(100px);
|
97 |
|
98 | &::placeholder {
|
99 | color: transparent;
|
100 | }
|
101 | }
|
102 | }
|
103 |
|
104 | @include exports('text-area') {
|
105 | @include text-area;
|
106 | }
|