@bytebrand/fe-ui-core 4.8.26 → 4.8.28

package/source/components/ContactForm/ContactForm.styl

@@ -1,261 +1,261 @@
-@import '../../theme/mixins.styl'
-
-.container
-  padding 0;
-  // width: 100%
-  // box-sizing border-box
-  // background-color white
-
-  // +media-phone-only()
-    // padding-bottom: 15px;
-
-.headerWrap
-  display flex
-  box-sizing: border-box;
-  justify-content: space-between;
-  margin-bottom: 10px
-  padding: 11px 16px 11px 16px;
-  border-bottom: 1px solid rgba(196, 196, 196, 0.5);
-
-.title
-  margin 0
-  font-size: 18px;
-  color: rgba(#000, 60%);
-
-.contentWrap
-  font-size: 12px
-  color:  $grey-54
-  line-height: 20px;
-  list-style: none;
-  margin 0;
-  padding: 5px 16px 20px;
-
-  p
-    margin 0;
-
-  +media-tablet-landscape-down()
-    color: $grey-70;
-    line-height: 16px;
-    text-align: justify;
-    padding: 10px 16px 10px;
-
-.form
-  position relative
-  padding: 0 16px;
-  display: grid;
-  grid-gap: 16px;
-  align-items: flex-start;
-  grid-template-columns: repeat(4, minmax(60px, 70px)) 1fr;
-  grid-template-areas:
-    'firstName firstName lastName lastName message'\
-    'email email email email message'\
-    'countryCode areaCode phoneNumber phoneNumber message'\
-    'confirmBlock confirmBlock confirmBlock confirmBlock formSubmit'\
-    '. . . . recaptcha'
-
-  +media-tablet-landscape-down()
-    box-sizing: border-box;
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-areas:
-    'firstName firstName lastName lastName'\
-    'email email email email'\
-    'countryCode areaCode phoneNumber phoneNumber'\
-    'message message message message'\
-    'confirmBlock confirmBlock confirmBlock confirmBlock'\
-    'recaptcha recaptcha recaptcha recaptcha'\
-    'formSubmit formSubmit formSubmit formSubmit'\
-
-  :global
-    .css-1pcexqc-container
-      min-width: auto !important;
-    .react-select__control
-      min-height: 48px !important;
-      border-color: rgba(0, 0, 0, 0.12) !important;
-      color: rgba(0, 0, 0, 0.12) !important;
-      color: rgba(0, 0, 0, 0.83) !important;
-
-    .react-select__value-container
-      font-size: 16px !important;
-      line-height: 24px !important;
-      padding: 0 16px !important;
-      border-radius: 3px !important;
-
-    .react-select__indicator
-      display: none !important;
-
-  [class*='MuiFormHelperText-root']
-    text-align: end
-    font-size: 10px
-    padding: 0 2px
-
-.firstName
-  grid-area: firstName
-.lastName { grid-area: lastName }
-.email { grid-area: email }
-.countryCode
-  grid-area: countryCode
-  height: 48px
-  justify-content: center
-  [class*='TextField__input']
-    padding: 0 8px;
-  [class*='FormInput__placeholderAnimate']
-    left: 4px;
-  [class*='FormDropDown__placeholderAnimateShow']
-    color: rgba(0, 0, 0, 0.87);
-  [class*='MuiSelect-outlined']
-    padding-right: 14px
-  [class*='MuiOutlinedInput-root']
-    border-radius: 2px
-    height: 48px
-
-.selectIcon
-  display: none
-
-.areaCode
-  grid-area: areaCode
-  [class*='TextField__input']
-    padding: 0 8px;
-    text-align: center;
-  [class*='FormInput__placeholderAnimate']
-    left: 4px;
-  [class*='FormInput__placeholderAnimateShow']
-    color: rgba(0, 0, 0, 0.87);
-  [class*='MuiInputLabel-shrink']
-    width: 86px
-    top: 0 !important
-    background: #fff
-    left: -10px
-  [class*='MuiInputLabel-marginDense']
-    left: -10px
-    // transform: translate(4px, 12px) scale(1)
-  // [class*='MuiInputLabel-marginDense']
-  //   transform: translate(3px, 12px) scale(1)
-
-.phoneNumber
-  grid-area: phoneNumber
-  [class*='FormInput__placeholderAnimateShow']
-    color: rgba(0, 0, 0, 0.87);
-.message
-  grid-area: message
-
-.confirmBlock
-  grid-area: confirmBlock
-
-  [class*='Checkbox__container']
-    &:focus
-      outline: 0;
-
-  [class*='Checkbox__label']
-    align-items: flex-start;
-
-.formSubmit
-  grid-area: formSubmit;
-  width: 100%;
-  border-radius: 2px !important;
-  height: 48px;
-  color: rgba(255, 255, 255, 0.9) !important;
-  font-weight: bold !important;
-
-  &[class*='Mui-disabled']
-    background-color: rgba(0, 92, 203, 0.38) !important;
-
-.recaptcha
-  grid-area: recaptcha
-  opacity: 0;
-  transition 0.2s opacity ease-in-out
-
-  &.disabled
-    opacity: 0.5
-    pointer-events: none
-
-.messageField
-  border-radius: 2px;
-  border-color: rgba(0, 0, 0, 0.12);
-  padding: 12px 16px;
-  font-size: 16px;
-  line-height: 24px;
-  color: rgba(0, 0, 0, 0.83);
-  max-height: 100%;
-  min-height: 176px;
-
-.inputField
-  height: 48px;
-  border-color: rgba(0, 0, 0, 0.12);
-  border-radius: 2px;
-  font-size: 16px;
-  line-height: 24px;
-  color: rgba(0, 0, 0, 0.83);
-  padding: 0 16px;
-
-.checkboxField
-  width: 18px;
-  height: 18px;
-  border-width: 2px;
-  border-color: rgba(0, 0, 0, 0.54);
-
-  [class*='Checkbox__checkBlueIcon']
-    width: 15px !important;
-    padding: 3px;
-
-.inputArea
-  margin 14px 0
-
-.policy
-  font-size: 9px
-  color: rgba(0, 0, 0, 0.5);
-  line-height: 10px;
-  text-align: justify;
-  display block
-
-.link
-  text-decoration: none;
-
-.popUp
-  display: block
-  position: absolute
-  top: 20px
-  opacity: 0
-  text-transform uppercase
-  transition 0.3s ease
-  &.error
-    color: red
-    opacity: 1
-  &.success
-    color: green
-    opacity: 1
-
-@keyframes spin {
-  0% { transform: rotate(0deg) }
-  100% { transform: rotate(360deg) }
-}
-
-.spinnerWait
-  box-sizing border-box
-  transform: translate(-50%, -50%)
-  border: 3px solid $grey-f2
-  border-radius: 50%
-  border-top: 3px solid $primary
-  width: 26px
-  height: 26px
-  animation: spin 1.5s linear infinite
-  display: block
-  margin: 10px
-  margin-top: 2px
-
-.termsConditionsLabel
-  font-size: 9px
-  display: block
-  text-align: justify;
-  margin-bottom: 3px;
-  color: rgba(0, 0, 0, 0.5);
-
-.error
-  line-height: 18px
-
-.heading
-  font-size: 16px
-  margin-bottom: 10px
-
-.labelForm
-  font-size: 12px
+@import '../../theme/mixins.styl'
+
+.container
+  padding 0;
+  // width: 100%
+  // box-sizing border-box
+  // background-color white
+
+  // +media-phone-only()
+    // padding-bottom: 15px;
+
+.headerWrap
+  display flex
+  box-sizing: border-box;
+  justify-content: space-between;
+  margin-bottom: 10px
+  padding: 11px 16px 11px 16px;
+  border-bottom: 1px solid rgba(196, 196, 196, 0.5);
+
+.title
+  margin 0
+  font-size: 18px;
+  color: rgba(#000, 60%);
+
+.contentWrap
+  font-size: 12px
+  color:  $grey-54
+  line-height: 20px;
+  list-style: none;
+  margin 0;
+  padding: 5px 16px 20px;
+
+  p
+    margin 0;
+
+  +media-tablet-landscape-down()
+    color: $grey-70;
+    line-height: 16px;
+    text-align: justify;
+    padding: 10px 16px 10px;
+
+.form
+  position relative
+  padding: 0 16px;
+  display: grid;
+  grid-gap: 16px;
+  align-items: flex-start;
+  grid-template-columns: repeat(4, minmax(60px, 70px)) 1fr;
+  grid-template-areas:
+    'firstName firstName lastName lastName message'\
+    'email email email email message'\
+    'countryCode areaCode phoneNumber phoneNumber message'\
+    'confirmBlock confirmBlock confirmBlock confirmBlock formSubmit'\
+    '. . . . recaptcha'
+
+  +media-tablet-landscape-down()
+    box-sizing: border-box;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-areas:
+    'firstName firstName lastName lastName'\
+    'email email email email'\
+    'countryCode areaCode phoneNumber phoneNumber'\
+    'message message message message'\
+    'confirmBlock confirmBlock confirmBlock confirmBlock'\
+    'recaptcha recaptcha recaptcha recaptcha'\
+    'formSubmit formSubmit formSubmit formSubmit'\
+
+  :global
+    .css-1pcexqc-container
+      min-width: auto !important;
+    .react-select__control
+      min-height: 48px !important;
+      border-color: rgba(0, 0, 0, 0.12) !important;
+      color: rgba(0, 0, 0, 0.12) !important;
+      color: rgba(0, 0, 0, 0.83) !important;
+
+    .react-select__value-container
+      font-size: 16px !important;
+      line-height: 24px !important;
+      padding: 0 16px !important;
+      border-radius: 3px !important;
+
+    .react-select__indicator
+      display: none !important;
+
+  [class*='MuiFormHelperText-root']
+    text-align: end
+    font-size: 10px
+    padding: 0 2px
+
+.firstName
+  grid-area: firstName
+.lastName { grid-area: lastName }
+.email { grid-area: email }
+.countryCode
+  grid-area: countryCode
+  height: 48px
+  justify-content: center
+  [class*='TextField__input']
+    padding: 0 8px;
+  [class*='FormInput__placeholderAnimate']
+    left: 4px;
+  [class*='FormDropDown__placeholderAnimateShow']
+    color: rgba(0, 0, 0, 0.87);
+  [class*='MuiSelect-outlined']
+    padding-right: 14px
+  [class*='MuiOutlinedInput-root']
+    border-radius: 2px
+    height: 48px
+
+.selectIcon
+  display: none
+
+.areaCode
+  grid-area: areaCode
+  [class*='TextField__input']
+    padding: 0 8px;
+    text-align: center;
+  [class*='FormInput__placeholderAnimate']
+    left: 4px;
+  [class*='FormInput__placeholderAnimateShow']
+    color: rgba(0, 0, 0, 0.87);
+  [class*='MuiInputLabel-shrink']
+    width: 86px
+    top: 0 !important
+    background: #fff
+    left: -10px
+  [class*='MuiInputLabel-marginDense']
+    left: -10px
+    // transform: translate(4px, 12px) scale(1)
+  // [class*='MuiInputLabel-marginDense']
+  //   transform: translate(3px, 12px) scale(1)
+
+.phoneNumber
+  grid-area: phoneNumber
+  [class*='FormInput__placeholderAnimateShow']
+    color: rgba(0, 0, 0, 0.87);
+.message
+  grid-area: message
+
+.confirmBlock
+  grid-area: confirmBlock
+
+  [class*='Checkbox__container']
+    &:focus
+      outline: 0;
+
+  [class*='Checkbox__label']
+    align-items: flex-start;
+
+.formSubmit
+  grid-area: formSubmit;
+  width: 100%;
+  border-radius: 2px !important;
+  height: 48px;
+  color: rgba(255, 255, 255, 0.9) !important;
+  font-weight: bold !important;
+
+  &[class*='Mui-disabled']
+    background-color: rgba(0, 92, 203, 0.38) !important;
+
+.recaptcha
+  grid-area: recaptcha
+  opacity: 0;
+  transition 0.2s opacity ease-in-out
+
+  &.disabled
+    opacity: 0.5
+    pointer-events: none
+
+.messageField
+  border-radius: 2px;
+  border-color: rgba(0, 0, 0, 0.12);
+  padding: 12px 16px;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.83);
+  max-height: 100%;
+  min-height: 176px;
+
+.inputField
+  height: 48px;
+  border-color: rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.83);
+  padding: 0 16px;
+
+.checkboxField
+  width: 18px;
+  height: 18px;
+  border-width: 2px;
+  border-color: rgba(0, 0, 0, 0.54);
+
+  [class*='Checkbox__checkBlueIcon']
+    width: 15px !important;
+    padding: 3px;
+
+.inputArea
+  margin 14px 0
+
+.policy
+  font-size: 9px
+  color: rgba(0, 0, 0, 0.5);
+  line-height: 10px;
+  text-align: justify;
+  display block
+
+.link
+  text-decoration: none;
+
+.popUp
+  display: block
+  position: absolute
+  top: 20px
+  opacity: 0
+  text-transform uppercase
+  transition 0.3s ease
+  &.error
+    color: red
+    opacity: 1
+  &.success
+    color: green
+    opacity: 1
+
+@keyframes spin {
+  0% { transform: rotate(0deg) }
+  100% { transform: rotate(360deg) }
+}
+
+.spinnerWait
+  box-sizing border-box
+  transform: translate(-50%, -50%)
+  border: 3px solid $grey-f2
+  border-radius: 50%
+  border-top: 3px solid $primary
+  width: 26px
+  height: 26px
+  animation: spin 1.5s linear infinite
+  display: block
+  margin: 10px
+  margin-top: 2px
+
+.termsConditionsLabel
+  font-size: 9px
+  display: block
+  text-align: justify;
+  margin-bottom: 3px;
+  color: rgba(0, 0, 0, 0.5);
+
+.error
+  line-height: 18px
+
+.heading
+  font-size: 16px
+  margin-bottom: 10px
+
+.labelForm
+  font-size: 12px
   text-align: end