@textback/notification-widget 2.0.1-84986 → 2.0.1

package/src/widget/components/tb-nw-wahunter/styles.scss

@@ -1,471 +1,471 @@
-$base-class-name: tb-nw-wahunter;
-$font-family: 'Montserrat',
-'Open Sans',
-'Droid Sans',
-Arial,
-sans-serif;
-
-$color-green: #25D366;
-$color-light-gray: #F2F2F2;
-$color-dark-gray: darken($color-light-gray, 5%);
-
-tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inner tb-nw-wahunter {
-  font-size: 12px;
-  font-family: $font-family;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  // TODO: Move reset to level of entire widget. Now I’m not sure that this will not break anything in normal notif widget
-  a,
-  label,
-  button,
-  input {
-    margin: 0;
-    padding: 0;
-    border: none;
-    box-shadow: none;
-    outline: none;
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-    background: transparent;
-  }
-
-  button,
-  label {
-    cursor: pointer;
-  }
-}
-
-
-tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inner .tb-nw-wahunter {
-
-  /**** All modes ****/
-  &__headline {
-    font-weight: 600;
-    line-height: 1.3;
-  }
-
-  &__text-content {
-    margin-bottom: 1.4em;
-  }
-
-
-
-  /**** Popup mode only ****/
-  &__top-img {
-    padding: 20% 0;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    border-radius: 4px 4px 0px 0px;
-  }
-
-  &__img {
-    display: none;
-    align-items: center;
-    width: 280px;
-    flex-shrink: 0;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  &__main-content {
-    padding: 1.4em 10%;
-    padding-bottom: 4em;
-  }
-
-  &__description {
-    font-size: 1.3em;
-    line-height: 1.5;
-  }
-
-  &_without-image {
-
-    .#{$base-class-name}__top-img,
-    .#{$base-class-name}__img {
-      display: none;
-    }
-
-    .#{$base-class-name}__main-content {
-      padding-top: 3em;
-    }
-  }
-
-  &_mode_popup {
-    .#{$base-class-name}__headline {
-      font-size: 1.9em;
-      margin-bottom: 0.4em;
-    }
-  }
-
-
-
-  /**** Inline mode only ****/
-  &_mode_inline {
-    display: flex;
-
-    .#{$base-class-name}__submit-form {
-      margin: 0;
-    }
-
-    #tb-notification-brand-badge {
-      display: none;
-      font-size: 9px;
-      margin-top: 1.2em;
-    }
-  }
-
-  &_inline-mode-align_left {
-    justify-content: flex-start;
-  }
-
-  &_inline-mode-align_right {
-    justify-content: flex-end;
-  }
-
-  &_inline-mode-align_center {
-    justify-content: center;
-  }
-
-
-
-  /**** Corner-popup mode only ****/
-  &_mode_corner-popup {
-    .#{$base-class-name}__headline {
-      font-size: 1.7em;
-      margin-bottom: 0.4em;
-    }
-  }
-
-
-
-  /**** Submit-form ****/
-  &__submit-form {
-    padding: 0;
-    width: 100%;
-    max-width: 100%;
-    margin: auto;
-  }
-
-  &__phone-input,
-  &__submit-button {
-    height: 44px;
-    width: 100%;
-    border-radius: 22px;
-    padding: 0 40px !important;
-  }
-
-  &__phone-input {
-    font-size: 14px;
-    margin-bottom: 12px;
-    background: #F2F2F2;
-    border: 1px solid $color-dark-gray;
-    letter-spacing: 1px;
-    color: #333;
-
-    &:invalid {
-      letter-spacing: 0px;
-    }
-  }
-
-  &__submit-button {
-    position: relative;
-    background: $color-green;
-    color: #fff;
-    font-size: 9px;
-    font-weight: bold;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    transition: background ease 0.25s;
-  }
-
-  &__submit-button-icon {
-    position: absolute;
-    right: 13px;
-    top: 0;
-    height: 100%;
-    width: 20px;
-
-    svg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
-  }
-
-  &__submit-form-footer {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 5px;
-    font-size: 12px;
-    margin-top: 10px;
-  }
-
-  &__agreement {
-    display: flex;
-    align-items: center;
-  }
-
-  &__agreement input[type="checkbox"] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -o-appearance: none;
-    appearance: none;
-    position: relative;
-    height: 14px;
-    width: 14px;
-    border: 1px solid rgb(207, 207, 207);
-    border-radius: 4px;
-    outline: none;
-    cursor: pointer;
-
-    &:checked {
-      background: $color-green;
-      border: none;
-    }
-
-    &:checked::before {
-      content: '\2714';
-      display: block;
-      text-align: center;
-      color: #fff;
-      position: absolute;
-      left: 3.5px;
-      top: 2px;
-      font-size: 9px;
-    }
-  }
-
-  &__agreement-text {
-    margin-left: 5px;
-  }
-
-  &__agreement-wa-icon {
-    display: inline-block;
-    position: relative;
-    width: 18px;
-    height: 14px;
-    vertical-align: middle;
-
-    svg {
-      position: absolute;
-      top: -7px;
-      left: -3px;
-      width: 25px;
-    }
-  }
-
-  &__state-report {
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    line-height: 1.5;
-  }
-
-  &__state-report-emoji {
-    font-size: 40px;
-    margin-bottom: 10px;
-  }
-
-  &__state-report-message-container {
-    text-align: center;
-  }
-
-  &__state-report-message {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  &__try-again-button {
-    display: none;
-    padding: 0;
-    margin: 0;
-    margin-top: 20px;
-    font-size: 16px;
-  }
-
-  &__try-again-button {
-    font-weight: bold;
-    text-decoration: underline;
-  }
-
-
-
-  /**** Submit-form state management ****/
-  &__submit-form:not([data-state="initial"]) {
-    .#{$base-class-name}__submit-form-controls {
-      display: none;
-    }
-
-    .#{$base-class-name}__state-report {
-      display: flex;
-    }
-  }
-
-  &__submit-form[data-state="success"] {
-    #tb-notification-brand-badge {
-      display: inline-flex;
-    }
-  }
-
-  &__submit-form[data-state="error"],
-  &__submit-form[data-state="notFound"] {
-
-    .#{$base-class-name}__state-report-message {
-      font-weight: normal;
-    }
-
-    .#{$base-class-name}__try-again-button {
-      display: inline-block;
-    }
-  }
-
-
-
-  @media only screen and (min-device-width: 481px) {
-    font-size: 13px;
-
-    &:not(.tb-nw-wahunter_mode_corner-popup) {
-      .#{$base-class-name}__phone-input-container {
-        padding: 5px;
-        background: #F2F2F2;
-        border-radius: 22px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .#{$base-class-name}__phone-input,
-      .#{$base-class-name}__submit-button {
-        height: auto;
-        width: auto;
-        flex-grow: 1;
-      }
-
-      .#{$base-class-name}__phone-input {
-        background: transparent;
-        border-radius: 0;
-        padding-left: 15px !important;
-        padding-right: 10px !important;
-        min-width: 150px;
-        margin: 0;
-        border: none;
-      }
-
-      .#{$base-class-name}__submit-button {
-        padding-top: 15px !important;
-        padding-bottom: 15px !important;
-        min-width: 49%;
-      }
-
-      .#{$base-class-name}__submit-form-footer {
-        margin-top: 6px;
-      }
-    }
-
-    &_mode_popup,
-    &_mode_inline {
-      .#{$base-class-name}__submit-form {
-        width: max-content;
-      }
-    }
-
-    &_mode_popup {
-      .#{$base-class-name}__submit-form {
-        min-width: 370px;
-      }
-    }
-
-    &_mode_inline {
-      .#{$base-class-name}__submit-form {
-        min-width: 420px;
-      }
-    }
-  }
-
-
-
-  @media only screen and (min-device-width: 768px) {
-    font-size: 14px;
-
-    &_image-align_right,
-    &_image-align_left {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      text-align: left;
-      padding: 7em 2.5em;
-
-      .#{$base-class-name}__submit-form {
-        min-width: unset;
-        width: 100%;
-      }
-
-      .#{$base-class-name}__top-img {
-        display: none;
-      }
-
-      .#{$base-class-name}__img {
-        display: flex;
-      }
-
-      .#{$base-class-name}__main-content {
-        padding: 0;
-      }
-
-      .#{$base-class-name}__state-report {
-        flex-direction: row;
-      }
-
-      .#{$base-class-name}__state-report-message-container {
-        text-align: left;
-      }
-
-      .#{$base-class-name}__state-report-emoji {
-        margin-bottom: 0;
-        margin-right: 10px;
-      }
-
-      .#{$base-class-name}__submit-form[data-state="notFound"],
-      .#{$base-class-name}__submit-form[data-state="error"] {
-        .#{$base-class-name}__state-report {
-          align-items: flex-start;
-        }
-      }
-    }
-
-    &_image-align_top,
-    &_without-image {
-      .#{$base-class-name}__submit-form {
-        min-width: 420px;
-      }
-    }
-
-    &_image-align_top {
-      .#{$base-class-name}__main-content {
-        padding-bottom: 6em;
-      }
-    }
-
-    &_image-align_right {
-      .#{$base-class-name}__img {
-        margin-left: 3em;
-        order: 1;
-      }
-    }
-
-    &_image-align_left {
-      .#{$base-class-name}__img {
-        margin-right: 3em;
-      }
-    }
-  }
-}
+$base-class-name: tb-nw-wahunter;
+$font-family: 'Montserrat',
+'Open Sans',
+'Droid Sans',
+Arial,
+sans-serif;
+
+$color-green: #25D366;
+$color-light-gray: #F2F2F2;
+$color-dark-gray: darken($color-light-gray, 5%);
+
+tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inner tb-nw-wahunter {
+  font-size: 12px;
+  font-family: $font-family;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  // TODO: Move reset to level of entire widget. Now I’m not sure that this will not break anything in normal notif widget
+  a,
+  label,
+  button,
+  input {
+    margin: 0;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+    outline: none;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: transparent;
+  }
+
+  button,
+  label {
+    cursor: pointer;
+  }
+}
+
+
+tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inner .tb-nw-wahunter {
+
+  /**** All modes ****/
+  &__headline {
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  &__text-content {
+    margin-bottom: 1.4em;
+  }
+
+
+
+  /**** Popup mode only ****/
+  &__top-img {
+    padding: 20% 0;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 4px 4px 0px 0px;
+  }
+
+  &__img {
+    display: none;
+    align-items: center;
+    width: 280px;
+    flex-shrink: 0;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &__main-content {
+    padding: 1.4em 10%;
+    padding-bottom: 4em;
+  }
+
+  &__description {
+    font-size: 1.3em;
+    line-height: 1.5;
+  }
+
+  &_without-image {
+
+    .#{$base-class-name}__top-img,
+    .#{$base-class-name}__img {
+      display: none;
+    }
+
+    .#{$base-class-name}__main-content {
+      padding-top: 3em;
+    }
+  }
+
+  &_mode_popup {
+    .#{$base-class-name}__headline {
+      font-size: 1.9em;
+      margin-bottom: 0.4em;
+    }
+  }
+
+
+
+  /**** Inline mode only ****/
+  &_mode_inline {
+    display: flex;
+
+    .#{$base-class-name}__submit-form {
+      margin: 0;
+    }
+
+    #tb-notification-brand-badge {
+      display: none;
+      font-size: 9px;
+      margin-top: 1.2em;
+    }
+  }
+
+  &_inline-mode-align_left {
+    justify-content: flex-start;
+  }
+
+  &_inline-mode-align_right {
+    justify-content: flex-end;
+  }
+
+  &_inline-mode-align_center {
+    justify-content: center;
+  }
+
+
+
+  /**** Corner-popup mode only ****/
+  &_mode_corner-popup {
+    .#{$base-class-name}__headline {
+      font-size: 1.7em;
+      margin-bottom: 0.4em;
+    }
+  }
+
+
+
+  /**** Submit-form ****/
+  &__submit-form {
+    padding: 0;
+    width: 100%;
+    max-width: 100%;
+    margin: auto;
+  }
+
+  &__phone-input,
+  &__submit-button {
+    height: 44px;
+    width: 100%;
+    border-radius: 22px;
+    padding: 0 40px !important;
+  }
+
+  &__phone-input {
+    font-size: 14px;
+    margin-bottom: 12px;
+    background: #F2F2F2;
+    border: 1px solid $color-dark-gray;
+    letter-spacing: 1px;
+    color: #333;
+
+    &:invalid {
+      letter-spacing: 0px;
+    }
+  }
+
+  &__submit-button {
+    position: relative;
+    background: $color-green;
+    color: #fff;
+    font-size: 9px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    transition: background ease 0.25s;
+  }
+
+  &__submit-button-icon {
+    position: absolute;
+    right: 13px;
+    top: 0;
+    height: 100%;
+    width: 20px;
+
+    svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+
+  &__submit-form-footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 5px;
+    font-size: 12px;
+    margin-top: 10px;
+  }
+
+  &__agreement {
+    display: flex;
+    align-items: center;
+  }
+
+  &__agreement input[type="checkbox"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    position: relative;
+    height: 14px;
+    width: 14px;
+    border: 1px solid rgb(207, 207, 207);
+    border-radius: 4px;
+    outline: none;
+    cursor: pointer;
+
+    &:checked {
+      background: $color-green;
+      border: none;
+    }
+
+    &:checked::before {
+      content: '\2714';
+      display: block;
+      text-align: center;
+      color: #fff;
+      position: absolute;
+      left: 3.5px;
+      top: 2px;
+      font-size: 9px;
+    }
+  }
+
+  &__agreement-text {
+    margin-left: 5px;
+  }
+
+  &__agreement-wa-icon {
+    display: inline-block;
+    position: relative;
+    width: 18px;
+    height: 14px;
+    vertical-align: middle;
+
+    svg {
+      position: absolute;
+      top: -7px;
+      left: -3px;
+      width: 25px;
+    }
+  }
+
+  &__state-report {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.5;
+  }
+
+  &__state-report-emoji {
+    font-size: 40px;
+    margin-bottom: 10px;
+  }
+
+  &__state-report-message-container {
+    text-align: center;
+  }
+
+  &__state-report-message {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  &__try-again-button {
+    display: none;
+    padding: 0;
+    margin: 0;
+    margin-top: 20px;
+    font-size: 16px;
+  }
+
+  &__try-again-button {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+
+
+  /**** Submit-form state management ****/
+  &__submit-form:not([data-state="initial"]) {
+    .#{$base-class-name}__submit-form-controls {
+      display: none;
+    }
+
+    .#{$base-class-name}__state-report {
+      display: flex;
+    }
+  }
+
+  &__submit-form[data-state="success"] {
+    #tb-notification-brand-badge {
+      display: inline-flex;
+    }
+  }
+
+  &__submit-form[data-state="error"],
+  &__submit-form[data-state="notFound"] {
+
+    .#{$base-class-name}__state-report-message {
+      font-weight: normal;
+    }
+
+    .#{$base-class-name}__try-again-button {
+      display: inline-block;
+    }
+  }
+
+
+
+  @media only screen and (min-device-width: 481px) {
+    font-size: 13px;
+
+    &:not(.tb-nw-wahunter_mode_corner-popup) {
+      .#{$base-class-name}__phone-input-container {
+        padding: 5px;
+        background: #F2F2F2;
+        border-radius: 22px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .#{$base-class-name}__phone-input,
+      .#{$base-class-name}__submit-button {
+        height: auto;
+        width: auto;
+        flex-grow: 1;
+      }
+
+      .#{$base-class-name}__phone-input {
+        background: transparent;
+        border-radius: 0;
+        padding-left: 15px !important;
+        padding-right: 10px !important;
+        min-width: 150px;
+        margin: 0;
+        border: none;
+      }
+
+      .#{$base-class-name}__submit-button {
+        padding-top: 15px !important;
+        padding-bottom: 15px !important;
+        min-width: 49%;
+      }
+
+      .#{$base-class-name}__submit-form-footer {
+        margin-top: 6px;
+      }
+    }
+
+    &_mode_popup,
+    &_mode_inline {
+      .#{$base-class-name}__submit-form {
+        width: max-content;
+      }
+    }
+
+    &_mode_popup {
+      .#{$base-class-name}__submit-form {
+        min-width: 370px;
+      }
+    }
+
+    &_mode_inline {
+      .#{$base-class-name}__submit-form {
+        min-width: 420px;
+      }
+    }
+  }
+
+
+
+  @media only screen and (min-device-width: 768px) {
+    font-size: 14px;
+
+    &_image-align_right,
+    &_image-align_left {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      text-align: left;
+      padding: 7em 2.5em;
+
+      .#{$base-class-name}__submit-form {
+        min-width: unset;
+        width: 100%;
+      }
+
+      .#{$base-class-name}__top-img {
+        display: none;
+      }
+
+      .#{$base-class-name}__img {
+        display: flex;
+      }
+
+      .#{$base-class-name}__main-content {
+        padding: 0;
+      }
+
+      .#{$base-class-name}__state-report {
+        flex-direction: row;
+      }
+
+      .#{$base-class-name}__state-report-message-container {
+        text-align: left;
+      }
+
+      .#{$base-class-name}__state-report-emoji {
+        margin-bottom: 0;
+        margin-right: 10px;
+      }
+
+      .#{$base-class-name}__submit-form[data-state="notFound"],
+      .#{$base-class-name}__submit-form[data-state="error"] {
+        .#{$base-class-name}__state-report {
+          align-items: flex-start;
+        }
+      }
+    }
+
+    &_image-align_top,
+    &_without-image {
+      .#{$base-class-name}__submit-form {
+        min-width: 420px;
+      }
+    }
+
+    &_image-align_top {
+      .#{$base-class-name}__main-content {
+        padding-bottom: 6em;
+      }
+    }
+
+    &_image-align_right {
+      .#{$base-class-name}__img {
+        margin-left: 3em;
+        order: 1;
+      }
+    }
+
+    &_image-align_left {
+      .#{$base-class-name}__img {
+        margin-right: 3em;
+      }
+    }
+  }
+}