ContactUsForm.scss 1.47 KB
Newer Older
Andrey Azov's avatar
Andrey Azov committed
1 2 3 4 5 6 7 8 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
@import 'src/styles/common';

$maxFormWidth: 520px;
$leftColumnWidth: 135px;
$columnGapWidth: 12px;

.container {
  background: $light-grey;
  padding: 12px 0 52px 30px;
  min-height: 570px;
}

.grid {
  display: grid;
  grid-template-columns: [left] $leftColumnWidth [right] 1fr;
  column-gap: 12px;
  row-gap: 6px;
  width: 100%;
  max-width: $maxFormWidth;
}

.advisory {
  font-size: 12px;
  font-weight: $light;
  grid-column: right;

  span {
    display: block;
  }
}

.label {
  justify-self: right;
  margin-top: 6px;
  font-size: 12px;
  font-weight: $light;
}

.textarea {
  height: 150px;
}

43 44 45 46 47 48
.emailField {
  &:invalid:not(:focus) {
    color: $red;
  }
}

Andrey Azov's avatar
Andrey Azov committed
49 50 51 52 53 54 55 56 57 58 59
.upload {
  grid-column: right;
  margin-top: 18px;
  max-width: calc(#{$maxFormWidth} - #{$leftColumnWidth} - #{$columnGapWidth});
}

.uploadedFile {
  margin-bottom: 12px;
}

.submit {
60 61 62 63 64 65
  display: grid;
  grid-template-areas:
    'form-errors form-errors'
    'submit-left submit-right';
  grid-template-columns: 1fr auto;
  column-gap: 1.5rem;
Andrey Azov's avatar
Andrey Azov committed
66 67 68
  align-items: center;
  grid-column: right;
  margin-top: 30px;
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91

  .formErrors {
    grid-area: form-errors;

    &:not(:empty) {
      margin-bottom: 12px;
    }
  }

  .sliderLabel {
    grid-area: submit-left;
    justify-self: end;

    &Disabled {
      color: $grey;
    }
  }

  .submitSlider {
    grid-area: submit-right;
  }
}

Andrey Azov's avatar
Andrey Azov committed
92
.submitButtonWrapper {
93 94
  grid-column: submit-right;
  justify-self: end;
Andrey Azov's avatar
Andrey Azov committed
95 96 97
}

.submitButton {
98 99
  height: 30px;
  width: 90px;
Andrey Azov's avatar
Andrey Azov committed
100 101 102 103 104
}

.errorText {
  color: $red;
}