Skip to content

Commit 3eb25e7

Browse files
nolimits4webnolimits4web
committed
feat(inputs): m3 styles
1 parent 912de6e commit 3eb25e7

File tree

6 files changed

+97
-204
lines changed

6 files changed

+97
-204
lines changed

‎src/core/components/input/input-ios.less‎

Lines changed: 32 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
}
77
}
88
.item-floating-label {
9-
transform: scale(var(--f7-floating-label-scale))
10-
translateY(calc((var(--f7-input-height) / 2 - 25%) / var(--f7-floating-label-scale)));
9+
transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-label-height) + 25%));
1110
}
1211
.item-input-focused .item-floating-label {
1312
color: var(--f7-label-text-color);
@@ -79,150 +78,49 @@
7978
}
8079
}
8180

82-
.input-outline:after,
83-
.item-input-outline .item-input-wrap:after {
84-
content: '';
85-
position: absolute;
86-
left: 0;
87-
top: 0;
88-
width: 100%;
89-
height: 100%;
90-
box-sizing: border-box;
91-
border: 1px solid var(--f7-input-outline-border-color);
92-
border-radius: var(--f7-input-outline-border-radius);
93-
transition-duration: 200ms;
94-
pointer-events: none;
81+
.item-input-outline .item-content,
82+
.item-input-outline.item-content {
83+
padding-top: 8px;
84+
padding-bottom: 8px;
85+
margin-left: 16px;
86+
margin-right: 16px;
9587
}
96-
.input-outline.input-focused:after,
97-
.item-input-outline.item-input-focused .item-input-wrap:after {
98-
border-width: 2px;
99-
border-color: var(--f7-input-outline-focused-border-color, var(--f7-theme-color));
100-
}
101-
.input-outline.input-invalid:after,
102-
.item-input-outline.item-input-invalid .item-input-wrap:after {
103-
border-width: 2px;
104-
border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
105-
}
106-
.input-outline,
107-
.item-input-outline,
108-
.list .item-input-outline {
109-
input,
110-
textarea,
111-
select {
112-
border-radius: var(--f7-input-outline-border-radius);
113-
padding-left: var(--f7-input-outline-padding-horizontal);
114-
padding-right: var(--f7-input-outline-padding-horizontal);
115-
}
116-
}
117-
.input-outline.input-dropdown,
118-
.item-input-outline .input-dropdown-wrap {
119-
&:before {
120-
.ltr({
121-
right: 8px;
122-
});
123-
.rtl({
124-
left: 8px;
125-
});
126-
}
127-
input,
128-
textarea,
129-
select {
130-
.ltr({
131-
padding-right: 20px;
132-
});
133-
.rtl({
134-
padding-left: 20px;
135-
});
88+
li.item-input-outline:first-child,
89+
li:first-child > .item-input-outline {
90+
padding-top: 16px;
91+
&::after {
92+
top: 16px;
13693
}
13794
}
138-
.input-outline,
139-
.item-input-outline {
140-
.input-clear-button {
141-
.ltr({
142-
right: 8px;
143-
});
144-
.rtl({
145-
left: 8px;
146-
});
95+
li.item-input-outline:last-child,
96+
li:last-child > .item-input-outline {
97+
padding-bottom: 16px;
98+
&::after {
99+
bottom: 16px;
147100
}
148101
}
149102

150-
.item-input-outline {
151-
--f7-input-height: var(--f7-input-outline-height);
152-
.item-inner:after {
153-
display: none !important;
103+
.item-input-outline .item-content,
104+
.item-input-outline.item-content,
105+
.input-outline {
106+
.item-inner {
107+
display: block;
108+
padding-top: 0px;
109+
padding-bottom: 0px;
154110
}
155-
.item-label {
156-
.ltr({
157-
left: var(--f7-input-outline-padding-horizontal);
158-
});
159-
.rtl({
160-
right: var(--f7-input-outline-padding-horizontal);
161-
});
111+
.item-input-wrap {
112+
margin-top: -22px;
162113
}
163114

115+
.item-label,
164116
.item-floating-label {
165-
.ltr({
166-
left: calc(var(--f7-input-outline-padding-horizontal) - 4px);
167-
});
168-
.rtl({
169-
right: calc(var(--f7-input-outline-padding-horizontal) - 4px);
170-
});
171-
padding-left: 4px;
172-
padding-right: 4px;
173-
background: var(--f7-page-bg-color);
174-
z-index: 10;
175-
margin-top: calc(-0.5 * (var(--f7-label-line-height)));
176-
}
177-
&.item-input-with-value .item-floating-label,
178-
&.item-input-focused .item-floating-label {
179-
transform: scale(1) translateY(50%);
180-
}
181-
.item-input-info,
182-
.item-input-error-message {
183-
.ltr({
184-
padding-left: var(--f7-input-outline-padding-horizontal);
185-
});
186-
.rtl({
187-
padding-right: var(--f7-input-outline-padding-horizontal);
188-
});
117+
display: inline-flex;
118+
margin: -8px -4px -4px;
119+
top: -4px;
189120
}
190-
}
191121

192-
.item-input-outline,
193-
.input-outline {
194-
.item-input-wrap {
195-
margin-top: 0;
196-
margin-bottom: 0;
197-
}
198-
.item-input-error-message,
199-
.item-input-info,
200-
.input-error-message,
201-
.input-info {
202-
margin-top: 0;
203-
white-space: normal;
204-
overflow: hidden;
205-
text-overflow: ellipsis;
206-
}
207-
.item-input-info,
208-
.input-info {
209-
margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
210-
}
211-
.item-input-error-message,
212-
.input-error-message {
213-
margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
214-
}
215-
&.item-input-with-info,
216-
&.input-with-info {
217-
.item-input-wrap {
218-
margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
219-
}
220-
}
221-
&.item-input-with-error-message,
222-
&.input-with-error-message {
223-
.item-input-wrap {
224-
margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
225-
}
122+
.item-floating-label {
123+
transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-label-height)));
226124
}
227125
}
228126
}

‎src/core/components/input/input-md.less‎

Lines changed: 2 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,7 @@
5050
&.input-invalid {
5151
&::after {
5252
transform: scaleY(2) !important;
53-
background: var(
54-
--f7-input-outline-invalid-border-color,
55-
var(--f7-input-error-text-color)
56-
);
53+
background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
5754
}
5855
}
5956
}
@@ -62,57 +59,21 @@
6259
.item-input-outline .item-content,
6360
.item-input-outline.item-content,
6461
.input-outline {
65-
&::after {
66-
content: '';
67-
position: absolute;
68-
left: 0;
69-
right: 0;
70-
top: 8px;
71-
bottom: 8px;
72-
border: 1px solid var(--f7-input-border-color);
73-
border-radius: var(--f7-input-outline-border-radius);
74-
pointer-events: none;
75-
box-sizing: border-box;
76-
transition-duration: 200ms;
77-
}
7862
.item-inner {
7963
padding-top: 16px;
8064
padding-bottom: 16px;
8165
}
8266

8367
.item-label,
8468
.item-floating-label {
85-
pointer-events: none;
86-
--label-height: calc(var(--f7-label-line-height) + 8px);
87-
background: var(--f7-md-surface);
88-
z-index: 1;
89-
padding: 4px;
69+
--label-height: calc(var(--f7-label-height) + 8px);
9070
margin: calc(0px - 16px - var(--label-height) / 2) -4px 4px;
91-
width: auto;
9271
}
9372

9473
.item-floating-label {
9574
transform: scale(var(--f7-floating-label-scale))
9675
translateY(calc((var(--f7-input-height) / 2) + 8px));
9776
}
98-
99-
&.item-input-focused,
100-
&.input-focused {
101-
&::after {
102-
border-width: 2px;
103-
border-color: var(--f7-input-outline-invalid-border-color, var(--f7-theme-color));
104-
}
105-
}
106-
&.item-input-invalid,
107-
&.input-invalid {
108-
&::after {
109-
border-width: 2px;
110-
border-color: var(
111-
--f7-input-outline-invalid-border-color,
112-
var(--f7-input-error-text-color)
113-
);
114-
}
115-
}
11677
}
11778

11879
.item-input-with-error-message,

‎src/core/components/input/input-vars.less‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
:root {
22
--f7-input-bg-color: transparent;
33
--f7-label-font-weight: 400;
4-
--f7-label-line-height: 16px;
4+
--f7-label-height: 16px;
5+
--f7-label-font-size: 12px;
6+
--f7-floating-label-scale: calc(16 / 12);
7+
58
--f7-input-padding-left: 0px;
69
--f7-input-padding-right: 0px;
710
--f7-input-error-text-color: #ff3b30;
@@ -10,10 +13,7 @@
1013
--f7-input-error-font-weight: 400;
1114
--f7-input-info-font-size: 12px;
1215
--f7-input-info-line-height: 1.4;
13-
--f7-input-outline-height: 40px;
1416

15-
--f7-input-outline-border-radius: 4px;
16-
--f7-input-outline-padding-horizontal: 12px;
1717
--f7-textarea-height: 100px;
1818
/*
1919
--f7-input-outline-focused-border-color: var(--f7-theme-color);
@@ -26,7 +26,6 @@
2626
}
2727
.ios-vars({
2828
--f7-input-item-bg-color: transparent;
29-
--f7-input-item-margin-vertical: 0px;
3029
--f7-input-item-border-radius: 0px;
3130
--f7-input-height: 40px;
3231
--f7-input-font-size: 16px;
@@ -38,14 +37,13 @@
3837
--f7-input-invalid-border-color: var(--f7-list-item-border-color);
3938
--f7-input-invalid-text-color: var(--f7-input-error-text-color);
4039
*/
41-
--f7-label-font-size: 12px;
4240
--f7-label-text-color: inherit;
4341
/*
4442
--f7-label-focused-text-color: var(--f7-label-text-color);
4543
--f7-label-invalid-text-color: var(--f7-label-text-color);
4644
*/
47-
--f7-floating-label-scale: calc(17 / 12);
4845
--f7-input-clear-button-size: 14px;
46+
--f7-input-outline-border-radius: 8px;
4947
.light-vars({
5048
--f7-input-text-color: #000000;
5149
--f7-input-info-text-color: rgba(0,0,0,0.45);
@@ -61,18 +59,17 @@
6159
});
6260
.md-vars({
6361
--f7-input-item-bg-color: var(--f7-md-surface-variant);
64-
--f7-input-item-margin-vertical: 16px;
6562
--f7-input-item-border-radius: 4px 4px 0 0;
6663
--f7-input-border-color: var(--f7-md-outline);
6764
--f7-input-height: 24px;
6865
--f7-input-font-size: 16px;
6966
--f7-textarea-padding-vertical: 0px;
67+
--f7-input-outline-border-radius: 4px;
7068
/*
7169
--f7-input-focused-border-color: var(--f7-theme-color);
7270
--f7-input-invalid-border-color: var(--f7-input-error-text-color);
7371
--f7-input-invalid-text-color: var(--f7-input-text-color);
7472
*/
75-
--f7-label-font-size: 12px;
7673
/*
7774
--f7-label-focused-text-color: var(--f7-theme-color);
7875
--f7-label-invalid-text-color: var(--f7-input-error-text-color );

0 commit comments

Comments
 (0)