_form.scss 2.96 KB
Newer Older
1 2 3 4 5 6 7
/// 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;
arturo's avatar
arturo committed
8
  margin-bottom: $form-group-margin-bottom;
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

  &__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>');
  }
}

arturo's avatar
arturo committed
76 77 78 79 80 81
// Browser cursor consistency
.custom-select:disabled,
.form-control:disabled {
  @include unclickable();
}

82 83 84 85 86
// Rectify Bootstrap readonly UI
.custom-select:disabled[readonly],
.form-control[readonly] {
  background-color: $input-bg;
  // (opinionated rules)
arturo's avatar
arturo committed
87
  // color: $input-placeholder-color;
88 89
  border-style: dashed;
}
arturo's avatar
arturo committed
90 91 92 93

// Custom autocomplete (need UI/UX rework)
.input-with-autocomplete {
  .completions {
94
    position: absolute;
arturo's avatar
arturo committed
95 96 97
    max-height: 300px;
    overflow-y: scroll;
    width: 300px;
98
    top: 45px;
99 100 101
    @media(max-width: 991px) {
      top: 90px;
    }
102 103 104 105 106 107 108
    button {
      text-align: left;
      cursor: pointer;
      &:hover {
        background-color: $gray-100;
      }
    }
arturo's avatar
arturo committed
109
  }
110 111 112 113 114 115 116
  &.share-users-completions {
    .completions {
      top: 37px;
      max-height: 200px;
      width: 420px;
    }
  }
117 118 119
  .b-icon-button {
    margin-left: 10px;
  }
arturo's avatar
arturo committed
120
}