amis/scss/components/form/_form.scss

.#{$ns}Form {
    font-size: $Form-fontSize;
    position: relative;

    &--quickEdit .#{$ns}Form-item:last-child {
        margin-bottom: 0;
    }

    &--inline {
        > .#{$ns}PlainField {
            display: inline-block;
            padding-top: $Form-input-paddingY;
            // padding-bottom: $Form-input-paddingY;
        }
    }
}

.#{$ns}Form-label {
    font-weight: $fontWeightNormal;
    margin-bottom: px2rem(5px);
    display: inline-block;
    max-width: 100%;

    > span {
        position: relative;
    }
}

.#{$ns}Form-star {
    color: $red;
    font-size: $fontSizeXs;
    position: absolute;
    left: 100%;
    top: px2rem(5px);
    margin-left: px2rem(3px);
    line-height: 1;
}

.#{$ns}Form-feedback {
    color: $danger;
    margin: $Form-input-marginBottom 0 0;
    padding-left: $gap-base;
    font-size: $fontSizeSm;
}

.#{$ns}Form-description {
    display: block;
    color: $Form-description-color;
    margin: $Form-input-marginBottom 0 0;
    font-size: $Form-description-fontSize;
}

.#{$ns}Form-hint {
    display: inline-block;
    margin-left: $gap-sm;
    padding-top: $Form-input-paddingY;
    vertical-align: top;
}

.#{$ns}Form-item {
    margin-bottom: $Form-item-gap;

    .#{$ns}Grid-form > &:last-child {
        margin-bottom: 0;
    }

    .#{$ns}Form--inline > &--inline {
        margin-bottom: $Form-item-gap/2;
        margin-right: $Form-item-gap/2;

        &:last-child {
            margin-right: 0;
            margin-bottom: 0;
        }
    }

    .#{$ns}Form-remark {
        margin-top: ($Form-input-height - $fontSizeBase) / 2;
        vertical-align: top;
    }

    &--horizontal {
        > .#{$ns}Form-label {
            text-align: $Form--horizontal-label-align;
        }
    }

    &--normal {
        > .#{$ns}Form-label {
            display: block;
        }
    }

    &.is-error > .#{$ns}Form-label {
        color: $danger;
    }
}

.#{$ns}Form-placeholder {
    color: $Form-input-placeholderColor;
}

@include media-breakpoint-up(sm) {
    .#{$ns}Form-control--sizeXs {
        min-width: $Form-control-widthXs;
        width: auto;
        display: inline-block;
        vertical-align: top;
    }

    .#{$ns}Form-control--sizeSm {
        min-width: $Form-control-widthSm;
        width: auto;
        display: inline-block;
        vertical-align: top;
    }

    .#{$ns}Form-control--sizeMd {
        min-width: $Form-control-widthMd;
        width: auto;
        display: inline-block;
        vertical-align: top;
    }

    .#{$ns}Form-control--sizeLg {
        min-width: $Form-control-widthLg;
        width: auto;
        display: inline-block;
        vertical-align: top;
    }

    .#{$ns}Form-item {
        &--horizontal {
            display: flex;
            flex-wrap: nowrap;
            margin-left: -$Form--horizontal-gutterWidth / 2;
            margin-right: -$Form--horizontal-gutterWidth / 2;

            > * {
                padding-left: $Form--horizontal-gutterWidth / 2;
                padding-right: $Form--horizontal-gutterWidth / 2;
            }

            > .#{$ns}Form-label,
            > .#{$ns}Form-value {
                flex-basis: 0;
                flex-grow: 1;
                max-width: 100%;
            }

            .#{$ns}Form-itemColumn--xs,
            .#{$ns}Form-itemColumn--sm,
            .#{$ns}Form-itemColumn--normal,
            .#{$ns}Form-itemColumn--md,
            .#{$ns}Form-itemColumn--lg {
                flex-grow: unset;
                flex-basis: unset;
            }

            > .#{$ns}Form-label {
                padding-top: $Form-label-paddingTop;
                margin-bottom: 0;
            }

            .#{$ns}Form-itemColumn--xs {
                width: $Form--horizontal-label-widthXs;
            }

            .#{$ns}Form-itemColumn--sm {
                width: $Form--horizontal-label-widthSm;
            }

            .#{$ns}Form-itemColumn--normal {
                width: $Form--horizontal-label-widthBase;
            }

            .#{$ns}Form-itemColumn--md {
                width: $Form--horizontal-label-widthMd;
            }

            .#{$ns}Form-itemColumn--lg {
                width: $Form--horizontal-label-widthLg;
            }

            @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;
                }
            }
        }

        &--inline {
            display: inline-block;
            vertical-align: top;

            > .#{$ns}Form-label {
                padding-top: $Form-label-paddingTop;
                margin-bottom: 0;
                margin-right: $Form-item-gap/2;

                .#{$ns}Form-star {
                    position: static;
                }
            }

            > .#{$ns}Form-value {
                display: inline;

                > .#{$ns}Form-control {
                    vertical-align: top;
                    display: inline-block;
                }

                > .#{$ns}Form-control.#{$ns}InputGroup {
                    display: inline-flex;
                }

                > .#{$ns}TextControl--withAddOn {
                    display: inline-flex;
                }
            }
        }
    }

    .#{$ns}Form-row {
        display: flex;
        flex-wrap: wrap;

        margin-left: -$Form-row-gutterWidth / 2;
        margin-right: -$Form-row-gutterWidth / 2;
        align-items: flex-start;

        > * {
            padding-left: $Form-row-gutterWidth / 2;
            padding-right: $Form-row-gutterWidth / 2;
        }
    }

    .#{$ns}Form-col {
        flex-basis: 0;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .#{$ns}Form-rowInner {
        display: flex;
        flex-wrap: nowrap;

        > .#{$ns}Form-label {
            display: inline-block;
            vertical-align: top;
            padding-top: $Form-label-paddingTop;
            padding-right: $Form-row-gutterWidth;
        }

        > .#{$ns}Form-control {
            flex-basis: 0;
            flex-grow: 1;
        }
    }
}