@textback/notification-widget 2.0.6-110503 → 2.0.6

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

@@ -1,15 +1,13 @@
 $base-class-name: tb-nw-wahunter;
-$font-family: 'Montserrat',
-'Open Sans',
-'Droid Sans',
-Arial,
-sans-serif;
-
-$color-green: #25D366;
-$color-light-gray: #F2F2F2;
+$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 {
+tb-notification-widget
+  #tb-notification-widget-inner.tb-notification-widget-inner
+  tb-nw-wahunter {
   font-size: 12px;
   font-family: $font-family;
 
@@ -39,9 +37,9 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
   }
 }
 
-
-tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inner .tb-nw-wahunter {
-
+tb-notification-widget
+  #tb-notification-widget-inner.tb-notification-widget-inner
+  .tb-nw-wahunter {
   /**** All modes ****/
   &__headline {
     font-weight: 600;
@@ -52,8 +50,6 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
     margin-bottom: 1.4em;
   }
 
-
-
   /**** Popup mode only ****/
   &__top-img {
     padding: 20% 0;
@@ -85,7 +81,6 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
   }
 
   &_without-image {
-
     .#{$base-class-name}__top-img,
     .#{$base-class-name}__img {
       display: none;
@@ -103,8 +98,6 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
     }
   }
 
-
-
   /**** Inline mode only ****/
   &_mode_inline {
     display: flex;
@@ -132,17 +125,18 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
     justify-content: center;
   }
 
-
-
   /**** Corner-popup mode only ****/
   &_mode_corner-popup {
     .#{$base-class-name}__headline {
       font-size: 1.7em;
       margin-bottom: 0.4em;
     }
-  }
-
 
+    .#{$base-class-name}__agreement-text {
+      width: 93%;
+      align-items: flex-start;
+    }
+  }
 
   /**** Submit-form ****/
   &__submit-form {
@@ -163,7 +157,7 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
   &__phone-input {
     font-size: 14px;
     margin-bottom: 12px;
-    background: #F2F2F2;
+    background: #f2f2f2;
     border: 1px solid $color-dark-gray;
     letter-spacing: 1px;
     color: #333;
@@ -211,10 +205,9 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
 
   &__agreement {
     display: flex;
-    align-items: center;
   }
 
-  &__agreement input[type="checkbox"] {
+  &__agreement input[type='checkbox'] {
     -webkit-appearance: none;
     -moz-appearance: none;
     -o-appearance: none;
@@ -246,6 +239,8 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
 
   &__agreement-text {
     margin-left: 5px;
+    align-items: center;
+    text-align: left;
   }
 
   &__agreement-wa-icon {
@@ -263,6 +258,10 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
     }
   }
 
+  &__agreement-personal-data a {
+    color: rgba(13, 99, 143, 1);
+  }
+
   &__state-report {
     display: none;
     flex-direction: column;
@@ -297,10 +296,8 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
     text-decoration: underline;
   }
 
-
-
   /**** Submit-form state management ****/
-  &__submit-form:not([data-state="initial"]) {
+  &__submit-form:not([data-state='initial']) {
     .#{$base-class-name}__submit-form-controls {
       display: none;
     }
@@ -310,15 +307,14 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
     }
   }
 
-  &__submit-form[data-state="success"] {
+  &__submit-form[data-state='success'] {
     #tb-notification-brand-badge {
       display: inline-flex;
     }
   }
 
-  &__submit-form[data-state="error"],
-  &__submit-form[data-state="notFound"] {
-
+  &__submit-form[data-state='error'],
+  &__submit-form[data-state='notFound'] {
     .#{$base-class-name}__state-report-message {
       font-weight: normal;
     }
@@ -328,15 +324,13 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
     }
   }
 
-
-
   @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;
+        background: #f2f2f2;
         border-radius: 22px;
         display: flex;
         justify-content: space-between;
@@ -391,8 +385,6 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
     }
   }
 
-
-
   @media only screen and (min-device-width: 768px) {
     font-size: 14px;
 
@@ -434,8 +426,8 @@ tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inne
         margin-right: 10px;
       }
 
-      .#{$base-class-name}__submit-form[data-state="notFound"],
-      .#{$base-class-name}__submit-form[data-state="error"] {
+      .#{$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;
         }