naive-ui/styles/Form.scss

64 lines
1.4 KiB
SCSS
Raw Normal View History

2019-07-22 19:14:47 +08:00
@import './mixins/mixins.scss';
@import './themes/vars.scss';
2019-07-22 19:14:47 +08:00
@include b(form) {
width: 100%;
font-size: 14px;
2019-11-01 19:01:55 +08:00
@include m(inline) {
width: 100%;
2019-11-01 19:01:55 +08:00
display: inline-flex;
align-items: flex-start;
2019-07-22 19:14:47 +08:00
align-content: space-around;
@include b(form-item) {
width: auto;
&:last-child {
margin-right: 0;
}
2019-07-22 19:14:47 +08:00
}
}
}
@include themes-mixin {
@include b(form-item) {
width: 100%;
padding-bottom: 24px;
@include m(top-labelled) {
margin-right: 18px;
@include m(no-label) {
padding-top: 24px;
}
@include b(form-item-label) {
display: block;
width: 100%;
padding-bottom: 8px;
padding-left: 2px;
}
}
@include m(has-feedback) {
padding-bottom: 0px;
2019-07-22 19:14:47 +08:00
}
@include b(form-item-label) {
display: inline-block;
transition: color .3s $default-cubic-bezier;
color: $--n-text-color;
height: 24px;
box-sizing: border-box;
font-size: 14px;
2019-07-22 19:14:47 +08:00
}
@include b(form-item-blank) {
position: relative;
2019-07-22 19:14:47 +08:00
}
@include b(form-item-feedback) {
padding-left: 2px;
padding-top: 4px;
box-sizing: border-box;
min-height: 24px;
color: $--error-6;
font-size: 14px;
transform-origin: top left;
transition: color .3s $default-cubic-bezier;
@include fade-down-transition($from-offset: -3px);
}
2019-07-22 19:14:47 +08:00
}
}