/// We made the choice to let the "form-group" element purely declarative, as /// reality projected use cases are far too numerous. Making structural rules /// (ie. making specific UI Component sets) wouldn't be a best practice. .form-group { $self: &; position: relative; margin-bottom: $form-group-margin-bottom; &__label { padding-bottom: space-x(0.5); label { font-weight: 600; } &--sub { color: $gray-800; font-size: 14px; } } &__field { // (?) In most cases, we found that error directive integrated within // the "form-group__field" reach actually breaks the design when it // pops out // Hence the `position: absolute` rule, mostly avoiding this UI break #{ $self }__error, #{ $self }__success { position: absolute; overflow: hidden; // (below is the reversing process rule) &--obtrusive { position: static; overflow: initial; } } } } /// Managing error presence while using <form-group> component /// This design is based on Bootstrap 2 form management /// @link https://getbootstrap.com/2.3.2/base-css.html#Validation%20states .form-group--error { label { color: $danger; } .b-form-input { @include inputError; } } .form-group { &__error, &__success, &__warning { padding-top: 2px; font-size: 12px; padding-left: 0.75rem; } &__error { color: $danger; } &__success { color: $success; } &__warning { color: $warning; } } .form-input { // Based on "vue-bootstrap" implementation of SVG icon within the input &--address { padding-right: calc(1.5em + 0.75rem); background-repeat: no-repeat; background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem); background-position: right calc(0.375em + 0.1875rem) center; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'); } } // Browser cursor consistency .custom-select:disabled, .form-control:disabled { @include unclickable(); } // Rectify Bootstrap readonly UI .custom-select:disabled[readonly], .form-control[readonly] { background-color: $input-bg; // (opinionated rules) // color: $input-placeholder-color; border-style: dashed; } // Custom autocomplete (need UI/UX rework) .input-with-autocomplete { .completions { position: absolute; max-height: 300px; overflow-y: scroll; width: 300px; top: 45px; @media(max-width: 991px) { top: 90px; } button { text-align: left; cursor: pointer; &:hover { background-color: $gray-100; } } } &.share-users-completions { .completions { top: 37px; max-height: 200px; width: 420px; } } .b-icon-button { margin-left: 10px; } }