Skip to content

Commit 69cca0d

Browse files
AybreaAybrea
committed
style: 1
1 parent 15ac1a7 commit 69cca0d

File tree

2 files changed

+59
-55
lines changed

2 files changed

+59
-55
lines changed

‎packages/varlet-ui/src/field-decorator/fieldDecorator.less‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111
--field-decorator-line-border-radius: 4px;
1212
--field-decorator-disabled-color: var(--color-text-disabled);
1313
--field-decorator-standard-normal-margin-top: 22px;
14+
--field-decorator-filled-normal-top: 4px;
15+
--field-decorator-filled-normal-margin-top: 24px;
1416
--field-decorator-standard-normal-margin-bottom: 4px;
17+
--field-decorator-filled-normal-margin-bottom: 8px;
1518
--field-decorator-standard-normal-icon-margin-top: 22px;
1619
--field-decorator-standard-normal-icon-margin-bottom: 4px;
1720
--field-decorator-standard-normal-non-hint-margin-top: 4px;
@@ -204,8 +207,8 @@
204207
}
205208

206209
.var-field-decorator__middle {
207-
margin-top: var(--field-decorator-standard-normal-margin-top);
208-
margin-bottom: var(--field-decorator-standard-normal-margin-bottom);
210+
margin-top: var(--field-decorator-filled-normal-margin-top);
211+
margin-bottom: var(--field-decorator-filled-normal-margin-bottom);
209212
}
210213

211214
.var-field-decorator__icon {
@@ -214,15 +217,16 @@
214217
}
215218

216219
.var-field-decorator__placeholder {
217-
transform: translate(
218-
var(--field-decorator-middle-offset-left),
219-
var(--field-decorator-standard-normal-margin-top)
220-
);
220+
// transform: translate(
221+
// var(--field-decorator-middle-offset-left),
222+
// var(--field-decorator-standard-normal-margin-top)
223+
// );
221224
}
222225

223226
.var-field-decorator--placeholder-hint {
224227
max-width: 133%;
225-
transform: translate(var(--field-decorator-middle-offset-left), 0) scale(0.75) !important;
228+
transform: translate(var(--field-decorator-middle-offset-left), var(--field-decorator-filled-normal-top))
229+
scale(0.75) !important;
226230
}
227231

228232
.var-field-decorator__line {
@@ -258,7 +262,7 @@
258262
.var-field-decorator--hint-center {
259263
transform: translate(
260264
var(--field-decorator-middle-offset-left),
261-
calc(var(--field-decorator-standard-normal-margin-top) + var(--field-decorator-middle-offset-height) / 2 - 75%)
265+
calc(var(--field-decorator-filled-normal-margin-top) + var(--field-decorator-middle-offset-height) / 2 - 75%)
262266
);
263267
}
264268

‎packages/varlet-ui/src/input/example/index.vue‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,55 @@ onThemeChange()
3939
</script>
4040

4141
<template>
42+
<app-type style="margin-top: 10vmin">{{ t('filled') }}</app-type>
43+
<var-space direction="column" :size="['6vmin', 0]">
44+
<var-input v-model="outlinedValue" variant="filled" placeholder="Label" />
45+
<var-input v-model="outlinedValue13" variant="filled" :placeholder="t('numberPlaceholder')" type="number" />
46+
<var-input v-model="outlinedValue2" variant="filled" :placeholder="t('readonly')" readonly />
47+
<var-input v-model="outlinedValue3" variant="filled" :placeholder="t('disabled')" disabled />
48+
<var-input v-model="outlinedValue4" variant="filled" :placeholder="t('clearable')" clearable />
49+
<var-input v-model="outlinedValue5" variant="filled" :placeholder="t('clearIconSlot')" clearable>
50+
<template #clear-icon="{ clear }">
51+
<var-icon name="error" @click="clear" />
52+
</template>
53+
</var-input>
54+
<var-input
55+
v-model="outlinedValue6"
56+
variant="filled"
57+
:placeholder="t('validate')"
58+
:rules="(v) => v.length > 6 || t('maxMessage')"
59+
/>
60+
<var-input
61+
v-model="outlinedValue14"
62+
variant="filled"
63+
:placeholder="t('validateWithZod')"
64+
:rules="z.string().min(7, t('maxMessage'))"
65+
/>
66+
<var-input v-model="outlinedValue7" variant="filled" :placeholder="t('displayIcon')">
67+
<template #prepend-icon>
68+
<var-icon class="prepend-icon" name="github" />
69+
</template>
70+
<template #append-icon>
71+
<var-icon class="append-icon" name="github" />
72+
</template>
73+
</var-input>
74+
<var-input v-model="outlinedValue8" variant="filled" :placeholder="t('customIconSize')">
75+
<template #prepend-icon>
76+
<var-icon class="prepend-icon" name="github" size="8vmin" />
77+
</template>
78+
<template #append-icon>
79+
<var-icon class="append-icon" name="github" size="12vmin" />
80+
</template>
81+
</var-input>
82+
<var-input v-model="outlinedValue9" variant="filled" :placeholder="t('maxlength')" :maxlength="10" />
83+
<var-input v-model="outlinedValue10" variant="filled" :placeholder="t('textarea')" textarea />
84+
<var-input v-model="outlinedValue11" variant="filled" :placeholder="t('smallSize')" size="small" />
85+
<var-input v-model.trim="outlinedValue12" variant="filled" :placeholder="t('trim')" />
86+
</var-space>
87+
4288
<app-type>{{ t('standard') }}</app-type>
4389
<var-space direction="column" :size="['3vmin', 0]">
44-
<var-input v-model="standardValue" :placeholder="t('placeholder')" />
90+
<var-input v-model="standardValue" />
4591
<var-input v-model="standardValue13" :placeholder="t('numberPlaceholder')" type="number" />
4692
<var-input v-model="standardValue2" :placeholder="t('readonly')" readonly />
4793
<var-input v-model="standardValue3" :placeholder="t('disabled')" disabled />
@@ -126,52 +172,6 @@ onThemeChange()
126172
<var-input v-model.trim="outlinedValue12" variant="outlined" :placeholder="t('trim')" />
127173
</var-space>
128174

129-
<app-type style="margin-top: 10vmin">{{ t('filled') }}</app-type>
130-
<var-space direction="column" :size="['6vmin', 0]">
131-
<var-input v-model="outlinedValue" variant="filled" :placeholder="t('placeholder')" />
132-
<var-input v-model="outlinedValue13" variant="filled" :placeholder="t('numberPlaceholder')" type="number" />
133-
<var-input v-model="outlinedValue2" variant="filled" :placeholder="t('readonly')" readonly />
134-
<var-input v-model="outlinedValue3" variant="filled" :placeholder="t('disabled')" disabled />
135-
<var-input v-model="outlinedValue4" variant="filled" :placeholder="t('clearable')" clearable />
136-
<var-input v-model="outlinedValue5" variant="filled" :placeholder="t('clearIconSlot')" clearable>
137-
<template #clear-icon="{ clear }">
138-
<var-icon name="error" @click="clear" />
139-
</template>
140-
</var-input>
141-
<var-input
142-
v-model="outlinedValue6"
143-
variant="filled"
144-
:placeholder="t('validate')"
145-
:rules="(v) => v.length > 6 || t('maxMessage')"
146-
/>
147-
<var-input
148-
v-model="outlinedValue14"
149-
variant="filled"
150-
:placeholder="t('validateWithZod')"
151-
:rules="z.string().min(7, t('maxMessage'))"
152-
/>
153-
<var-input v-model="outlinedValue7" variant="filled" :placeholder="t('displayIcon')">
154-
<template #prepend-icon>
155-
<var-icon class="prepend-icon" name="github" />
156-
</template>
157-
<template #append-icon>
158-
<var-icon class="append-icon" name="github" />
159-
</template>
160-
</var-input>
161-
<var-input v-model="outlinedValue8" variant="filled" :placeholder="t('customIconSize')">
162-
<template #prepend-icon>
163-
<var-icon class="prepend-icon" name="github" size="8vmin" />
164-
</template>
165-
<template #append-icon>
166-
<var-icon class="append-icon" name="github" size="12vmin" />
167-
</template>
168-
</var-input>
169-
<var-input v-model="outlinedValue9" variant="filled" :placeholder="t('maxlength')" :maxlength="10" />
170-
<var-input v-model="outlinedValue10" variant="filled" :placeholder="t('textarea')" textarea />
171-
<var-input v-model="outlinedValue11" variant="filled" :placeholder="t('smallSize')" size="small" />
172-
<var-input v-model.trim="outlinedValue12" variant="filled" :placeholder="t('trim')" />
173-
</var-space>
174-
175175
<div style="height: 40px"></div>
176176
</template>
177177

0 commit comments

Comments
 (0)