noesya/osuny

View on GitHub
app/assets/stylesheets/commons/_forms.sass

Summary

Maintainability
Test Coverage
.password
    position: relative

.sfpwh-controls ~ .invalid-feedback
    margin-top: 0

legend ~ *
    clear: left

input.form-control[type=text],
input.form-control[type=email],
input.form-control[type=tel],
input.form-control[type=password],
input.form-control[type=url],
textarea.form-control
    color: black
    font-size: $font-size-base
    @include media-breakpoint-up(md)
        font-size: $font-size-lg

textarea.form-control
    padding: 8px
    padding-top: 0 // Compensation de la hauteur des lignes

.visibility_radio_buttons
    .form-check-items
        display: flex
        flex-wrap: wrap
        justify-content: space-between
        position: relative
        .form-check-inline
            margin-right: 0
            padding-left: 0
            text-align: center
            .form-check-input
                border-color: var(--bs-gray-400)
                border-width: 3px
                float: none
                margin-left: 0
                &:checked
                    #{--bs-form-check-bg-image}: none
                    border-width: 0
                &.is-valid ~ .form-check-label
                    color: inherit
            .form-check-label
                display: block
            &:nth-of-type(1)
                text-align: left
                &::after
                    border-top: 3px solid var(--bs-gray-400)
                    content: ""
                    display: block
                    left: 8px
                    position: absolute
                    top: 11px
                    width: calc(100% - 16px)
                    z-index: -1
                .form-check-input
                    &:checked
                        background-color: var(--bs-red)
            &:nth-of-type(2)
                .form-check-input
                    &:checked
                        background-color: var(--bs-orange)
            &:nth-of-type(3)
                text-align: right
                .form-check-input
                    &:checked
                        background-color: var(--bs-green)