amis2/scss/components/form/_form.scss

376 lines
7.9 KiB
SCSS
Raw Normal View History

2020-12-22 12:39:33 +08:00
@mixin setControlWidth() {
width: var(--Form-control-widthBase);
&.#{$ns}Form-control--sizeXs {
min-width: auto;
width: var(--Form-control-widthXs);
}
&.#{$ns}Form-control--sizeSm {
min-width: auto;
width: var(--Form-control-widthSm);
}
&.#{$ns}Form-control--sizeMd {
min-width: auto;
2021-03-18 14:46:26 +08:00
width: var(--Form-control-widthMd);
2020-12-22 12:39:33 +08:00
}
&.#{$ns}Form-control--sizeLg {
min-width: auto;
2021-03-18 14:46:26 +08:00
width: var(--Form-control-widthLg);
2020-12-22 12:39:33 +08:00
}
}
2019-04-30 11:11:25 +08:00
.#{$ns}Form {
font-size: var(--Form-fontSize);
2019-11-26 19:04:47 +08:00
position: relative;
// 一般是快速编辑里的最后一个输入框
&--quickEdit > div:last-of-type {
2019-11-26 19:04:47 +08:00
margin-bottom: 0;
}
&--inline {
2019-12-06 15:22:17 +08:00
> .#{$ns}PlainField {
2019-11-26 19:04:47 +08:00
display: inline-block;
padding-top: var(--Form-input-paddingY);
// padding-bottom: var(--Form-input-paddingY);
2019-04-30 11:11:25 +08:00
}
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
}
2020-06-10 17:47:47 +08:00
.#{$ns}Form-static {
min-height: var(--Form-input-height);
padding-top: var(--Form-label-paddingTop);
padding-bottom: var(--Form-label-paddingTop);
2020-06-10 17:47:47 +08:00
margin-bottom: 0;
2020-10-24 17:53:46 +08:00
.#{$ns}Form-item--inline > .#{$ns}Form-value > & {
display: inline-block;
2020-10-24 18:02:35 +08:00
vertical-align: top;
2020-10-24 17:53:46 +08:00
}
2020-06-10 17:47:47 +08:00
}
2019-04-30 11:11:25 +08:00
.#{$ns}Form-label {
font-weight: var(--fontWeightNormal);
margin-bottom: var(--gap-xs);
2019-11-26 19:04:47 +08:00
position: relative;
2019-12-06 15:22:17 +08:00
> span {
2019-11-26 19:04:47 +08:00
position: relative;
}
2019-04-30 11:11:25 +08:00
}
.#{$ns}Form-star {
color: var(--danger);
font-size: var(--fontSizeXs);
2019-11-26 19:04:47 +08:00
line-height: 1;
2019-04-30 11:11:25 +08:00
}
.#{$ns}Form-feedback {
color: var(--danger);
margin: var(--Form-input-marginBottom) 0 0;
padding-left: var(--gap-base);
font-size: var(--fontSizeSm);
2019-04-30 11:11:25 +08:00
}
.#{$ns}Form-description {
2019-11-26 19:04:47 +08:00
display: block;
color: var(--Form-description-color);
margin: var(--Form-input-marginBottom) 0 0;
font-size: var(--Form-description-fontSize);
2019-04-30 11:11:25 +08:00
}
.#{$ns}Form-hint {
2019-11-26 19:04:47 +08:00
display: inline-block;
margin-left: var(--gap-sm);
padding-top: var(--Form-input-paddingY);
2019-11-26 19:04:47 +08:00
vertical-align: top;
2019-04-30 11:11:25 +08:00
}
.#{$ns}Form-item {
margin-bottom: var(--Form-item-gap);
2019-04-30 11:11:25 +08:00
2019-12-06 15:22:17 +08:00
.#{$ns}Grid-form > &:last-child {
2019-11-26 19:04:47 +08:00
margin-bottom: 0;
}
2019-04-30 11:11:25 +08:00
2019-12-06 15:22:17 +08:00
.#{$ns}Form--inline > &--inline {
2019-11-26 19:04:47 +08:00
&:last-child {
margin-right: 0;
margin-bottom: 0;
2019-04-30 11:11:25 +08:00
}
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
.#{$ns}Form-remark {
padding-top: var(--Form-label-paddingTop);
2019-11-26 19:04:47 +08:00
vertical-align: top;
}
2019-04-30 11:11:25 +08:00
2020-10-24 18:02:35 +08:00
&--inline {
margin-bottom: calc(var(--Form-item-gap) / 2);
margin-right: calc(var(--Form-item-gap) / 2);
2020-10-24 18:02:35 +08:00
}
2019-11-26 19:04:47 +08:00
&--horizontal {
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-label {
text-align: var(--Form--horizontal-label-align);
white-space: var(--Form--horizontal-label-whiteSpace);
2019-04-30 11:11:25 +08:00
}
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
&--normal {
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-label {
2019-11-26 19:04:47 +08:00
display: block;
2020-06-09 20:28:07 +08:00
.#{$ns}Form-star {
position: absolute;
left: px2rem(-6px);
top: px2rem(3px);
}
2019-04-30 11:11:25 +08:00
}
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 15:22:17 +08:00
&.is-error > .#{$ns}Form-label {
color: var(--danger);
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
}
.#{$ns}Form-placeholder {
color: var(--Form-input-placeholderColor);
2019-04-30 11:11:25 +08:00
}
2020-03-25 20:26:10 +08:00
.#{$ns}Form-caption {
display: inline-block;
line-height: var(--Form-input-height);
height: var(--Form-input-height);
2020-03-25 20:26:10 +08:00
margin-left: px2rem(10px);
}
2019-04-30 11:11:25 +08:00
@include media-breakpoint-up(sm) {
2020-11-01 12:24:39 +08:00
.#{$ns}Form-label {
display: inline-block;
max-width: 100%;
}
2019-11-26 19:04:47 +08:00
.#{$ns}Form-control--sizeXs {
// min-width: var(--Form-control-widthXs);
2019-12-06 22:24:02 +08:00
// width: auto;
min-width: var(--Form-control-widthXs);
2019-12-06 22:24:02 +08:00
max-width: 100%;
2019-11-26 19:04:47 +08:00
display: inline-block;
vertical-align: top;
// 非常难受number 类型的 input 不能设置size
&.#{$ns}NumberControl {
width: var(--Form-control-widthXs);
}
2020-04-09 11:41:54 +08:00
&.#{$ns}TextareaControl {
width: auto;
}
2019-11-26 19:04:47 +08:00
}
2019-11-26 19:04:47 +08:00
.#{$ns}Form-control--sizeSm {
min-width: var(--Form-control-widthSm);
2019-12-06 22:24:02 +08:00
max-width: 100%;
2019-11-26 19:04:47 +08:00
display: inline-block;
vertical-align: top;
// 非常难受number 类型的 input 不能设置size
&.#{$ns}NumberControl {
width: var(--Form-control-widthSm);
}
2020-04-09 11:41:54 +08:00
&.#{$ns}TextareaControl {
width: auto;
}
2019-11-26 19:04:47 +08:00
}
2019-11-26 19:04:47 +08:00
.#{$ns}Form-control--sizeMd {
min-width: var(--Form-control-widthMd);
2019-12-06 22:24:02 +08:00
max-width: 100%;
2019-11-26 19:04:47 +08:00
display: inline-block;
vertical-align: top;
2020-04-09 11:41:54 +08:00
&.#{$ns}TextareaControl {
width: auto;
}
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
.#{$ns}Form-control--sizeLg {
min-width: var(--Form-control-widthLg);
2019-12-06 22:24:02 +08:00
max-width: 100%;
2019-11-26 19:04:47 +08:00
display: inline-block;
vertical-align: top;
// 非常难受number 类型的 input 不能设置size
&.#{$ns}NumberControl {
width: var(--Form-control-widthLg);
}
2020-04-09 11:41:54 +08:00
&.#{$ns}TextareaControl {
width: auto;
}
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
.#{$ns}Form-item {
&--horizontal {
display: flex;
flex-wrap: nowrap;
margin-left: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
margin-right: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
2019-11-26 19:04:47 +08:00
2019-12-06 15:22:17 +08:00
> * {
padding-left: calc(var(--Form--horizontal-gutterWidth) / 2);
padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
2019-11-26 19:04:47 +08:00
}
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-label,
> .#{$ns}Form-value {
2019-11-26 19:04:47 +08:00
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
width: 0;
}
.#{$ns}Form-itemColumn--xs,
.#{$ns}Form-itemColumn--sm,
.#{$ns}Form-itemColumn--normal,
.#{$ns}Form-itemColumn--auto,
2019-11-26 19:04:47 +08:00
.#{$ns}Form-itemColumn--md,
.#{$ns}Form-itemColumn--lg {
flex-grow: unset;
flex-basis: unset;
}
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-label {
padding-top: var(--Form-label-paddingTop);
2019-11-26 19:04:47 +08:00
margin-bottom: 0;
2020-06-09 20:28:07 +08:00
.#{$ns}Form-star {
position: absolute;
left: px2rem(-6px);
top: px2rem(3px);
}
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
.#{$ns}Form-itemColumn--xs {
width: var(--Form--horizontal-label-widthXs);
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
.#{$ns}Form-itemColumn--sm {
width: var(--Form--horizontal-label-widthSm);
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
.#{$ns}Form-itemColumn--normal {
width: var(--Form--horizontal-label-widthBase);
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
.#{$ns}Form-itemColumn--md {
width: var(--Form--horizontal-label-widthMd);
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
.#{$ns}Form-itemColumn--lg {
width: var(--Form--horizontal-label-widthLg);
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
.#{$ns}Form-itemColumn--auto {
width: auto;
}
2019-11-26 19:04:47 +08:00
@for $i from (1) through $Form--horizontal-columns {
.#{$ns}Form-itemColumn--#{$i} {
flex: 0 0 percentage($i / $Form--horizontal-columns);
max-width: percentage($i / $Form--horizontal-columns);
min-height: 1px;
2019-04-30 11:11:25 +08:00
}
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-11-26 19:04:47 +08:00
&--inline {
display: inline-block;
vertical-align: top;
2019-04-30 11:11:25 +08:00
2020-08-04 16:45:49 +08:00
.#{$ns}TextControl {
2020-12-22 12:39:33 +08:00
@include setControlWidth();
2020-08-04 16:45:49 +08:00
}
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-label {
padding-top: var(--Form-label-paddingTop);
2019-11-26 19:04:47 +08:00
margin-bottom: 0;
margin-right: calc(var(--Form-item-gap) / 2);
2019-04-30 11:11:25 +08:00
2019-11-26 19:04:47 +08:00
.#{$ns}Form-star {
position: static;
2019-04-30 11:11:25 +08:00
}
2019-11-26 19:04:47 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-value {
display: inline-block;
vertical-align: top;
2019-04-30 11:11:25 +08:00
> .#{$ns}Button--link {
padding-top: var(--Form-label-paddingTop);
}
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-control {
2019-11-26 19:04:47 +08:00
vertical-align: top;
display: inline-block;
}
2019-04-30 11:11:25 +08:00
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-control.#{$ns}InputGroup {
2019-11-26 19:04:47 +08:00
display: inline-flex;
2019-04-30 11:11:25 +08:00
}
2019-12-06 15:22:17 +08:00
> .#{$ns}TextControl--withAddOn {
2019-11-26 19:04:47 +08:00
display: inline-flex;
2019-04-30 11:11:25 +08:00
}
2019-11-26 19:04:47 +08:00
}
}
}
.#{$ns}Form-row {
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--Form-row-gutterWidth) / -2);
margin-right: calc(var(--Form-row-gutterWidth) / -2);
2019-11-26 19:04:47 +08:00
align-items: flex-start;
2019-12-06 15:22:17 +08:00
> * {
padding-left: calc(var(--Form-row-gutterWidth) / 2);
padding-right: calc(var(--Form-row-gutterWidth) / 2);
2019-11-26 19:04:47 +08:00
}
}
.#{$ns}Form-col {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
}
.#{$ns}Form-rowInner {
display: flex;
flex-wrap: nowrap;
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-label {
2019-11-26 19:04:47 +08:00
display: inline-block;
vertical-align: top;
padding-top: var(--Form-label-paddingTop);
padding-right: var(--Form-row-gutterWidth);
2019-04-30 11:11:25 +08:00
}
2019-11-26 19:04:47 +08:00
2019-12-06 15:22:17 +08:00
> .#{$ns}Form-control {
2019-11-26 19:04:47 +08:00
flex-basis: 0;
flex-grow: 1;
2020-04-15 17:11:16 +08:00
2020-10-15 10:31:36 +08:00
// &:not(.#{$ns}Form-control--withSize) {
// width: var(--Form-control-widthBase);
2020-10-15 10:31:36 +08:00
// }
2019-11-26 19:04:47 +08:00
}
}
2019-12-06 15:22:17 +08:00
}
2020-08-18 10:50:06 +08:00
.#{$ns}Form--quickEdit {
min-width: var(--Form-control-widthSm);
2020-08-18 10:50:06 +08:00
}