adata-ui 0.1.86 → 0.1.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/adata-ui.common.js +13 -6
- package/dist/adata-ui.common.js.map +1 -1
- package/dist/adata-ui.css +1 -1
- package/dist/adata-ui.umd.js +13 -6
- package/dist/adata-ui.umd.js.map +1 -1
- package/dist/adata-ui.umd.min.js +1 -1
- package/dist/adata-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/_text_field.scss +28 -26
- package/src/components/TextArea/TextArea.vue +11 -4
package/package.json
CHANGED
|
@@ -56,13 +56,14 @@
|
|
|
56
56
|
&__field {
|
|
57
57
|
position: relative;
|
|
58
58
|
overflow: hidden;
|
|
59
|
-
@media(max-width: 1025px) {
|
|
59
|
+
@media (max-width: 1025px) {
|
|
60
60
|
width: 100%;
|
|
61
61
|
display: flex;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
&__input,
|
|
65
|
+
&__input,
|
|
66
|
+
&__textarea textarea {
|
|
66
67
|
background: #ffffff;
|
|
67
68
|
border: 0.5px solid #c4c4c4;
|
|
68
69
|
box-sizing: border-box;
|
|
@@ -70,10 +71,10 @@
|
|
|
70
71
|
width: 100%;
|
|
71
72
|
height: 40px;
|
|
72
73
|
font-size: 14px;
|
|
73
|
-
color: #
|
|
74
|
+
color: #1a2030;
|
|
74
75
|
padding: 19px 40px 5px 16px;
|
|
75
76
|
transition: 0.3s all;
|
|
76
|
-
@media(max-width: 1025px) {
|
|
77
|
+
@media (max-width: 1025px) {
|
|
77
78
|
padding: 19px 36px 7px 12px;
|
|
78
79
|
height: 40px;
|
|
79
80
|
font-size: 12px;
|
|
@@ -85,29 +86,24 @@
|
|
|
85
86
|
&:not(:-webkit-autofill):valid ~ #{$self}__label {
|
|
86
87
|
top: 12px;
|
|
87
88
|
font-size: 10px;
|
|
88
|
-
color: #
|
|
89
|
+
color: #71757a;
|
|
89
90
|
text-overflow: inherit;
|
|
90
91
|
width: 100%;
|
|
91
|
-
@media(max-width: 1025px) {
|
|
92
|
+
@media (max-width: 1025px) {
|
|
92
93
|
font-size: 8px;
|
|
93
94
|
}
|
|
94
95
|
}
|
|
95
96
|
&:hover {
|
|
96
|
-
border: 0.5px solid #
|
|
97
|
+
border: 0.5px solid #2c3e50;
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
&:focus {
|
|
100
|
-
border: 0.5px solid #
|
|
101
|
+
border: 0.5px solid #2c3e50;
|
|
101
102
|
}
|
|
102
103
|
|
|
103
104
|
&::placeholder {
|
|
104
105
|
font-size: 12px;
|
|
105
106
|
}
|
|
106
|
-
|
|
107
|
-
&.error {
|
|
108
|
-
border: 1px solid #FF2E43;
|
|
109
|
-
background: #ff2e431f;
|
|
110
|
-
}
|
|
111
107
|
}
|
|
112
108
|
|
|
113
109
|
&__textarea {
|
|
@@ -118,14 +114,25 @@
|
|
|
118
114
|
justify-content: flex-end;
|
|
119
115
|
position: relative;
|
|
120
116
|
overflow: hidden;
|
|
121
|
-
|
|
122
|
-
border:
|
|
117
|
+
&--error {
|
|
118
|
+
border: none;
|
|
119
|
+
border: 0.5px solid #ff2e43;
|
|
120
|
+
background: #ff2e431f;
|
|
121
|
+
textarea {
|
|
122
|
+
background: transparent;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
&:focus,
|
|
126
|
+
&:hover {
|
|
127
|
+
border: 0.5px solid #2c3e50;
|
|
123
128
|
}
|
|
124
129
|
textarea {
|
|
125
130
|
border: none;
|
|
126
131
|
height: 92px;
|
|
127
132
|
padding: 0 40px 5px 16px;
|
|
128
|
-
|
|
133
|
+
resize: none;
|
|
134
|
+
&:focus,
|
|
135
|
+
&:hover {
|
|
129
136
|
border: none;
|
|
130
137
|
}
|
|
131
138
|
}
|
|
@@ -144,21 +151,16 @@
|
|
|
144
151
|
overflow: hidden;
|
|
145
152
|
line-height: 40px;
|
|
146
153
|
transition: 0.3s;
|
|
147
|
-
color: #
|
|
154
|
+
color: #71757a;
|
|
148
155
|
font-size: 14px;
|
|
149
|
-
@media(max-width: 1025px) {
|
|
156
|
+
@media (max-width: 1025px) {
|
|
150
157
|
left: 12px;
|
|
151
158
|
font-size: 14px;
|
|
152
159
|
line-height: 16px;
|
|
153
|
-
color: #
|
|
160
|
+
color: #71757a;
|
|
154
161
|
}
|
|
155
162
|
}
|
|
156
163
|
|
|
157
|
-
&__textarea {
|
|
158
|
-
min-height: 120px;
|
|
159
|
-
resize: none;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
164
|
&__textarea + label {
|
|
163
165
|
top: 20px;
|
|
164
166
|
}
|
|
@@ -183,7 +185,7 @@
|
|
|
183
185
|
}
|
|
184
186
|
|
|
185
187
|
&__required {
|
|
186
|
-
color: #
|
|
188
|
+
color: #ff2e43;
|
|
187
189
|
}
|
|
188
190
|
|
|
189
191
|
&__options {
|
|
@@ -211,7 +213,7 @@
|
|
|
211
213
|
color: #71757a;
|
|
212
214
|
transition: 0.3s all;
|
|
213
215
|
cursor: pointer;
|
|
214
|
-
@media(max-width: 1025px) {
|
|
216
|
+
@media (max-width: 1025px) {
|
|
215
217
|
font-size: 12px;
|
|
216
218
|
}
|
|
217
219
|
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="adt-text-
|
|
2
|
+
<div class="adt-text-block__wrapper">
|
|
3
|
+
<div
|
|
4
|
+
class="adt-text-block__textarea"
|
|
5
|
+
:class="{ 'adt-text-block__textarea--error': !!errorText }"
|
|
6
|
+
>
|
|
3
7
|
<textarea
|
|
4
8
|
ref="textarea"
|
|
5
9
|
:type="type"
|
|
@@ -8,9 +12,11 @@
|
|
|
8
12
|
required
|
|
9
13
|
@input="$emit('input', $event.target.value)"
|
|
10
14
|
@keyup.enter="enterPressed"
|
|
11
|
-
:class="{ error: !!errorText }"
|
|
12
15
|
/>
|
|
13
|
-
<label
|
|
16
|
+
<label
|
|
17
|
+
class="adt-text-block__label"
|
|
18
|
+
:class="{ 'adt-text-block--ellipsis': isEllipsis }"
|
|
19
|
+
>
|
|
14
20
|
{{ label }}
|
|
15
21
|
<span v-if="required" class="adt-text-block__required">*</span>
|
|
16
22
|
</label>
|
|
@@ -34,6 +40,7 @@
|
|
|
34
40
|
stroke-linejoin="round"
|
|
35
41
|
></path>
|
|
36
42
|
</svg>
|
|
43
|
+
</div>
|
|
37
44
|
</div>
|
|
38
45
|
<div class="adt-text-block__error" v-if="!!errorText">
|
|
39
46
|
<svg
|
|
@@ -95,7 +102,7 @@ export default {
|
|
|
95
102
|
isEllipsis: {
|
|
96
103
|
type: Boolean,
|
|
97
104
|
default: false,
|
|
98
|
-
}
|
|
105
|
+
},
|
|
99
106
|
},
|
|
100
107
|
data() {
|
|
101
108
|
return {
|