@textback/notification-widget 2.0.6 → 3.0.0-dev.0

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

@@ -1,13 +1,15 @@
 $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;
 
@@ -37,9 +39,9 @@ tb-notification-widget
   }
 }
 
-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;
@@ -50,6 +52,8 @@ tb-notification-widget
     margin-bottom: 1.4em;
   }
 
+
+
   /**** Popup mode only ****/
   &__top-img {
     padding: 20% 0;
@@ -81,6 +85,7 @@ tb-notification-widget
   }
 
   &_without-image {
+
     .#{$base-class-name}__top-img,
     .#{$base-class-name}__img {
       display: none;
@@ -98,6 +103,8 @@ tb-notification-widget
     }
   }
 
+
+
   /**** Inline mode only ****/
   &_mode_inline {
     display: flex;
@@ -125,19 +132,18 @@ tb-notification-widget
     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 {
     padding: 0;
@@ -157,7 +163,7 @@ tb-notification-widget
   &__phone-input {
     font-size: 14px;
     margin-bottom: 12px;
-    background: #f2f2f2;
+    background: #F2F2F2;
     border: 1px solid $color-dark-gray;
     letter-spacing: 1px;
     color: #333;
@@ -205,9 +211,10 @@ tb-notification-widget
 
   &__agreement {
     display: flex;
+    align-items: center;
   }
 
-  &__agreement input[type='checkbox'] {
+  &__agreement input[type="checkbox"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     -o-appearance: none;
@@ -239,8 +246,6 @@ tb-notification-widget
 
   &__agreement-text {
     margin-left: 5px;
-    align-items: center;
-    text-align: left;
   }
 
   &__agreement-wa-icon {
@@ -258,10 +263,6 @@ tb-notification-widget
     }
   }
 
-  &__agreement-personal-data a {
-    color: rgba(13, 99, 143, 1);
-  }
-
   &__state-report {
     display: none;
     flex-direction: column;
@@ -296,8 +297,10 @@ tb-notification-widget
     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;
     }
@@ -307,14 +310,15 @@ tb-notification-widget
     }
   }
 
-  &__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;
     }
@@ -324,13 +328,15 @@ tb-notification-widget
     }
   }
 
+
+
   @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;
@@ -385,6 +391,8 @@ tb-notification-widget
     }
   }
 
+
+
   @media only screen and (min-device-width: 768px) {
     font-size: 14px;
 
@@ -426,8 +434,8 @@ tb-notification-widget
         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;
         }