amis/scss/components/form/_group.scss
2019-12-06 09:58:08 +08:00

104 lines
2.3 KiB
SCSS

.#{$ns}Form-groupColumn {
margin-bottom: $gap-sm;
}
@include media-breakpoint-up(md) {
.#{$ns}Form-group {
margin-bottom: $Form-item-gap;
.#{$ns}Form-value > & {
margin-bottom: $Form-input-marginBottom;
}
&--hor {
display: flex;
flex-wrap: nowrap;
margin-left: -$Form-group-gutterWidth / 2;
margin-right: -$Form-group-gutterWidth / 2;
align-items: flex-start;
&.v-middle {
align-items: center;
}
&.v-bottom {
align-items: flex-end;
}
> * {
padding-left: $Form-group-gutterWidth / 2;
padding-right: $Form-group-gutterWidth / 2;
}
> .#{$ns}Form-item--inline {
margin-right: 0;
}
> .#{$ns}Form-item,
> div > .#{$ns}Form-item {
margin-bottom: 0;
}
.#{$ns}Form-input > .#{$ns}Form-group {
margin-bottom: 0;
}
}
&--lg {
margin-left: -$Form-group--lg-gutterWidth / 2;
margin-right: -$Form-group--lg-gutterWidth / 2;
> * {
padding-left: $Form-group--lg-gutterWidth / 2;
padding-right: $Form-group--lg-gutterWidth / 2;
}
}
&--md {
margin-left: -$Form-group--md-gutterWidth / 2;
margin-right: -$Form-group--md-gutterWidth / 2;
> * {
padding-left: $Form-group--md-gutterWidth / 2;
padding-right: $Form-group--md-gutterWidth / 2;
}
}
&--sm {
margin-left: -$Form-group--sm-gutterWidth / 2;
margin-right: -$Form-group--sm-gutterWidth / 2;
> * {
padding-left: $Form-group--sm-gutterWidth / 2;
padding-right: $Form-group--sm-gutterWidth / 2;
}
}
&--xs {
margin-left: -$Form-group--xs-gutterWidth / 2;
margin-right: -$Form-group--xs-gutterWidth / 2;
> * {
padding-left: $Form-group--xs-gutterWidth / 2;
padding-right: $Form-group--xs-gutterWidth / 2;
}
}
}
.#{$ns}Form-groupColumn {
flex-basis: 0;
flex-grow: 1;
width: 0;
max-width: 100%;
margin-bottom: 0;
}
@for $i from (1) through $Form--horizontal-columns {
.#{$ns}Form-groupColumn--#{$i} {
flex: 0 0 percentage($i / $Form--horizontal-columns);
max-width: percentage($i / $Form--horizontal-columns);
min-height: 1px;
}
}
}