@textback/notification-widget 2.0.0 → 2.0.1-102913

package/src/widget/components/tb-notification-button/styles.scss

@@ -1,433 +1,657 @@
-$color-fb: #3b5998;
-$color-vk: #45668e;
-$color-tg: #1E96C8;
-$color-skype: #00aff0;
-$color-viber: #59267c;
-$color-whatsapp: #189d0e;
-
-@mixin shadow-on-hover() {
-  transition: box-shadow 0.4s;
-
-  &:hover {
-    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
-  }
-}
-
-@mixin set-channel-button-brand-color($color) {
-  .tb-notification-button__inner > a {
-    background-color: $color;
-  }
-
-  tb-notification-button__icon > svg path {
-    fill: $color;
-  }
-}
-
-
-tb-notification-widget {
-  #tb-notification-widget-inner.tb-notification-widget-inner {
-    tb-notification-button a {
-      cursor: pointer !important;
-    }
-
-    .tb-notification-button__tip {
-      position: absolute;
-      font-size: 10px;
-      text-align: center;
-      margin-top: 19px;
-      left: 0;
-      width: 100%;
-      color: #6f7b8a;
-    }
-
-    .tb-btn-align-center {
-      text-align: center;
-    }
-
-    .tb-btn-align-left {
-      text-align: left;
-    }
-
-    .tb-btn-align-right {
-      text-align: right;
-    }
-  }
-  
-  /* new design */
-
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
-    /* inline & popup */
-    tb-notification-button {
-      display: block;
-      width: 100%;
-      margin: 0px 0px 20px;
-      padding: 0px;
-      background-color: transparent;
-
-
-
-      &[channel="skype"] {
-        @include set-channel-button-brand-color($color-skype);
-      }
-
-      &[channel="facebook"] {
-        @include set-channel-button-brand-color($color-fb);
-      }
-
-      &[channel="vk"] {
-        @include set-channel-button-brand-color($color-vk);
-
-        .tb-notification-button__inner > div {
-          @include shadow-on-hover();
-        }
-      }
-      
-      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
-        display: none;
-      }
-
-      &[channel="viber"] {
-        // @include set-channel-button-brand-color($color-viber);
-        .tb-notification-button__inner > a {
-          background-color: $color-viber;
-        }
-      }
-      
-      &[channel="tg"] {
-        @include set-channel-button-brand-color($color-tg);
-      }
-
-      &[channel="whatsapp"] {
-        .tb-notification-button__inner > a {
-          background-color: $color-whatsapp;
-        }
-      }
-      
-      &[loading] {
-        color: transparent;
-        &:after {
-          content: "";
-          border-radius: 100%;
-          border: 3px solid #fff;
-          border-bottom-color: transparent;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 16px;
-          height: 16px;
-          margin: -11px 0 0 -11px;
-          animation-name: spin;
-          animation-duration: 1000ms;
-          animation-iteration-count: infinite;
-        }
-      }
-
-
-
-      .tb-notification-button__inner {
-        position: relative;
-        display: inline-block;
-        box-sizing: border-box;
-        width: 219px;
-        padding-left: 35px;
-        float: initial;
-
-        > a {
-          all: initial;
-          display: block;
-          box-sizing: content-box;
-          border-radius: 2px;
-          cursor: pointer;
-          color: #fff;
-          position: relative;
-          font-size: 12px;
-          font-family: Arial,Helvetica,sans-serif;
-          padding: 0px;
-          line-height: 29px;
-          height: 30px;
-          text-align: center;
-          text-decoration: none !important;
-          &:hover {
-            color: #fff;
-          }
-
-          @include shadow-on-hover();
-        }
-
-        tb-notification-button__text {
-          display: inline-block;
-          vertical-align: middle;
-        }
-
-        tb-notification-button__icon {
-          position: absolute;
-          top: 0px;
-          left: 0px;
-          width: 30px;
-          height: 30px;
-          margin: 0px;
-          > svg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-
-      }
-    }
-  }
-
-  /* old design */
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded {
-    
-    /* inline */
-    tb-notification-button {
-      @include shadow-on-hover();
-
-      box-sizing: content-box;
-      padding: 10px 20px;
-      border-radius: 25px;
-      cursor: pointer;
-      background-color: #2979FF;
-      color: #fff;
-      display: inline-block;
-      margin: 0 13px 45px 0;
-      position: relative;
-      
-      &[channel="skype"] {
-        background-color: $color-skype;
-      }
-      &[channel="facebook"] {
-        background-color: $color-fb;
-      }
-      &[channel="vk"] {
-        background-color: $color-vk;
-      }
-      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
-        display: none;
-      }
-      &[channel="viber"] {
-        background-color: $color-viber;
-      }
-      &[channel="tg"] {
-        background-color: $color-tg;
-      }
-      &[channel="whatsapp"] {
-        background-color: $color-whatsapp;
-      }
-      &[loading] {
-        color: transparent;
-        &:after {
-          content: "";
-          border-radius: 100%;
-          border: 3px solid #fff;
-          border-bottom-color: transparent;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 16px;
-          height: 16px;
-          margin: -11px 0 0 -11px;
-          animation-name: spin;
-          animation-duration: 1000ms;
-          animation-iteration-count: infinite;
-        }
-      }
-      > a {
-        all: initial;
-        display: block;
-        text-decoration: none;
-        color: #fff;
-        font-family: inherit;
-        //font-size: 17px;
-        margin: -10px -20px;
-        //padding: 10px 20px;
-        text-decoration: none !important;
-
-        padding: 6px 30px 8px;
-        min-width: 110px;
-        text-align: center;
-        font-size: 15px;
-
-        &:hover {
-          color: #fff;
-        }
-      }
-    }
-
-    tb-notification-button__text {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    tb-notification-button__icon {
-      display: inline-block;
-      vertical-align: middle;
-      //width: 40px;
-      //height: 40px;
-      width: 30px;
-      height: 30px;
-      margin: -10px 0 -10px -15px;
-      > svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded tb-notification-button {
-    margin-bottom: 13px;
-  }
-
-  /* popup */
-  #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
-    tb-notification-button {
-      display: inline-block;
-      width: 120px;
-      height: 24px;
-      padding: 0px;
-      margin: 0px 0px 18px 0px;
-
-      > a {
-        position: relative;
-        text-align: center;
-        font-size: 12px;
-        padding: 5px 20px;
-        margin: 0px;
-      }
-    }
-    tb-notification-button__icon {
-      display: block;
-      position: absolute;
-      left: 8px;
-      top: 2px;
-      width: 20px;
-      height: 20px;
-      margin: 0px;
-      padding: 0px;
-    }
-    tb-notification-button__text {
-      vertical-align: baseline;
-      width: 60px;
-      text-align: center;
-      color: #fff;
-    }
-  }
-
-
-
-
-  /* circle icons design */
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-icons {
-    
-    /* inline */
-    tb-notification-button {
-      display: inline-block;
-      position: relative;
-      margin: 0px 13px 13px 0px;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      &[loading] {
-        color: transparent;
-        &:after {
-          content: "";
-          border-radius: 100%;
-          border: 3px solid #fff;
-          border-bottom-color: transparent;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 16px;
-          height: 16px;
-          margin: -11px 0 0 -11px;
-          animation-name: spin;
-          animation-duration: 1000ms;
-          animation-iteration-count: infinite;
-        }
-      }
-      > a {
-        all: initial;
-        display: block;
-        text-decoration: none;
-        font-family: inherit;
-        text-decoration: none !important;
-
-        min-width: 80px;
-        text-align: center;
-        font-size: 13px;
-        color: #333;
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-
-    tb-notification-button__text {
-      display: block;
-      margin-top: 4px;
-    }
-
-    tb-notification-button__icon {
-      display: block;
-      width: 50px;
-      height: 50px;
-      margin: 0px auto;
-      > svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  /*styles for non mobile*/
-  @media only screen and (min-device-width: 736px) {
-    
-    /* new design */
-
-    #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
-      tb-notification-button {
-        .tb-notification-button__inner {
-          padding-left: 55px;
-          width: 239px;
-
-          tb-notification-button__icon {
-            top: -5px;
-            left: 0px;
-            width: 40px;
-            height: 40px;
-          }
-        }
-      }
-    }
-
-    /* old design*/
-
-    #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
-      tb-notification-button {
-        margin: 0px 19px 24px 0px;
-        width: 206px;
-        height: 50px;
-
-        > a {
-          padding: 10px 20px;
-          font-size: 20px;
-        }
-      }
-
-      tb-notification-button__icon {
-        width: 40px;
-        height: 40px;
-        left: 15px;
-        top: 5px;
-      }
-
-      tb-notification-button__text {
-        width: 100px;
-        line-height: 30px;
-      }
-    }
-  }
-}
+$color-fb: #3b5998;
+$color-fb-gradient: #6077a6;
+
+$color-vk: #4a76a8;
+$color-vk-gradient: #0f65c6;
+
+$color-tg: #61A8DE;
+$color-tg-gradient:#408AC2;
+
+$color-skype: #00aff0;
+$color-skype-gradient:#00d0e7;
+
+$color-viber: #574e92;
+$color-viber-gradient:#655bab;
+
+$color-whatsapp: #25D366;
+$color-whatsappb: #25D366;
+$color-whatsapp-gradient:#2fc368;
+
+@mixin shadow-on-hover() {
+  transition: box-shadow 0.4s;
+
+  &:hover {
+    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
+  }
+}
+
+@mixin shadow-on-hover-gradient() {
+  transition: box-shadow 0.4s;
+
+  &:hover {
+    box-shadow:inset 0 0 3px 3px rgba(0, 0, 0, 0.4);
+  }
+}
+
+@mixin set-channel-button-brand-color($color) {
+  .tb-notification-button__inner > a {
+    background-color: $color;
+  }
+
+  tb-notification-button__icon > svg path {
+    fill: $color;
+  }
+}
+
+@mixin set-channel-button-brand-linear-gradient-color($color, $color-gradient) {
+  background: linear-gradient(309.02deg, $color -6.45%, $color-gradient 111.08%);
+}
+
+tb-notification-widget {
+  #tb-notification-widget-inner.tb-notification-widget-inner {
+    tb-notification-button a {
+      cursor: pointer !important;
+    }
+
+    .tb-notification-button__tip {
+      position: absolute;
+      font-size: 10px;
+      text-align: center;
+      margin-top: 19px;
+      left: 0;
+      width: 100%;
+      color: #6f7b8a;
+    }
+
+    .tb-btn-align-center {
+      text-align: center;
+    }
+
+    .tb-btn-align-left {
+      text-align: left;
+    }
+
+    .tb-btn-align-right {
+      text-align: right;
+    }
+  }
+
+  /* new design */
+
+  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
+    /* inline & popup */
+    tb-notification-button {
+      display: block;
+      width: 100%;
+      margin: 0px 0px 20px;
+      padding: 0px;
+      background-color: transparent;
+      height: 30px;
+
+
+
+      &[channel="skype"] {
+        @include set-channel-button-brand-color($color-skype);
+      }
+
+      &[channel="facebook"] {
+        @include set-channel-button-brand-color($color-fb);
+      }
+
+      &[channel="vk"] {
+        @include set-channel-button-brand-color($color-vk);
+
+        .tb-notification-button__inner > div {
+          @include shadow-on-hover();
+        }
+      }
+
+      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
+        display: none;
+      }
+
+      &[channel="viber"] {
+        // @include set-channel-button-brand-color($color-viber);
+        .tb-notification-button__inner > a {
+          background-color: $color-viber;
+        }
+      }
+
+      &[channel="tg"] {
+        @include set-channel-button-brand-color($color-tg);
+      }
+
+      &[channel="whatsapp"] {
+        .tb-notification-button__inner > a {
+          background-color: $color-whatsapp;
+        }
+      }
+
+      &[channel="whatsappb"] {
+        .tb-notification-button__inner > a {
+          background-color: $color-whatsappb;
+        }
+      }
+
+      &[loading] {
+        color: transparent;
+        &:after {
+          content: "";
+          border-radius: 100%;
+          border: 3px solid #fff;
+          border-bottom-color: transparent;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 16px;
+          height: 16px;
+          margin: -11px 0 0 -11px;
+          animation-name: spin;
+          animation-duration: 1000ms;
+          animation-iteration-count: infinite;
+        }
+      }
+
+
+
+      .tb-notification-button__inner {
+        position: relative;
+        display: inline-block;
+        box-sizing: border-box;
+        width: 219px;
+        padding-left: 35px;
+        float: initial;
+
+        > a {
+          all: initial;
+          display: block;
+          box-sizing: content-box;
+          border-radius: 4px;
+          cursor: pointer;
+          color: #fff;
+          position: relative;
+          font-size: 12px;
+          font-family: Arial,Helvetica,sans-serif;
+          padding: 0px;
+          line-height: 29px;
+          height: 30px;
+          text-align: center;
+          text-decoration: none !important;
+          &:hover {
+            color: #fff;
+          }
+
+          @include shadow-on-hover();
+        }
+
+        tb-notification-button__text {
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        tb-notification-button__icon {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          width: 30px;
+          height: 30px;
+          margin: 0px;
+          > svg {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+      }
+    }
+  }
+
+  /* old design */
+  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded {
+
+    /* inline */
+    tb-notification-button {
+      @include shadow-on-hover();
+
+      box-sizing: content-box;
+      padding: 10px 20px;
+      border-radius: 25px;
+      cursor: pointer;
+      background-color: #2979FF;
+      color: #fff;
+      display: inline-block;
+      margin: 0 13px 45px 0;
+      position: relative;
+
+      &[channel="skype"] {
+        background-color: $color-skype;
+      }
+      &[channel="facebook"] {
+        background-color: $color-fb;
+      }
+      &[channel="vk"] {
+        background-color: $color-vk;
+      }
+      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
+        display: none;
+      }
+      &[channel="viber"] {
+        background-color: $color-viber;
+      }
+      &[channel="tg"] {
+        background-color: $color-tg;
+      }
+      &[channel="whatsapp"] {
+        background-color: $color-whatsapp;
+      }
+      &[channel="whatsappb"] {
+        background-color: $color-whatsappb;
+      }
+      &[loading] {
+        color: transparent;
+        &:after {
+          content: "";
+          border-radius: 100%;
+          border: 3px solid #fff;
+          border-bottom-color: transparent;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 16px;
+          height: 16px;
+          margin: -11px 0 0 -11px;
+          animation-name: spin;
+          animation-duration: 1000ms;
+          animation-iteration-count: infinite;
+        }
+      }
+      > a {
+        all: initial;
+        display: block;
+        text-decoration: none;
+        color: #fff;
+        font-family: inherit;
+        //font-size: 17px;
+        margin: -10px -20px;
+        //padding: 10px 20px;
+        text-decoration: none !important;
+
+        padding: 6px 30px 8px;
+        min-width: 110px;
+        text-align: center;
+        font-size: 15px;
+
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+
+    tb-notification-button__text {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    tb-notification-button__icon {
+      display: inline-block;
+      vertical-align: middle;
+      //width: 40px;
+      //height: 40px;
+      width: 30px;
+      height: 30px;
+      margin: -10px 0 -10px -15px;
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded tb-notification-button {
+    margin-bottom: 13px;
+  }
+
+  /* popup */
+  #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
+    tb-notification-button {
+      display: inline-block;
+      width: 120px;
+      height: 24px;
+      padding: 0px;
+      margin: 0px 0px 18px 0px;
+
+      > a {
+        position: relative;
+        text-align: center;
+        font-size: 12px;
+        padding: 5px 20px;
+        margin: 0px;
+      }
+    }
+    tb-notification-button__icon {
+      display: block;
+      position: absolute;
+      left: 8px;
+      top: 2px;
+      width: 20px;
+      height: 20px;
+      margin: 0px;
+      padding: 0px;
+    }
+    tb-notification-button__text {
+      vertical-align: baseline;
+      width: 60px;
+      text-align: center;
+      color: #fff;
+    }
+  }
+
+  /* old design */
+  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient {
+
+    /* inline */
+    tb-notification-button {
+      @include shadow-on-hover-gradient();
+
+      box-sizing: content-box;
+      padding: 21px 36px;
+      border-radius: 5px;
+      cursor: pointer;
+      background-color: #2979FF;
+      color: #fff;
+      display: inline-block;
+      margin: 0 13px 45px 0;
+      position: relative;
+
+      &[channel="skype"] {
+        @include set-channel-button-brand-linear-gradient-color($color-skype, $color-skype-gradient);
+      }
+      &[channel="facebook"] {
+        @include set-channel-button-brand-linear-gradient-color($color-fb, $color-fb-gradient);
+      }
+      &[channel="vk"] {
+        @include set-channel-button-brand-linear-gradient-color($color-vk, $color-vk-gradient);
+        padding: 19px 36px;
+      }
+      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
+        display: none;
+      }
+      &[channel="viber"] {
+        @include set-channel-button-brand-linear-gradient-color($color-viber, $color-viber-gradient);
+      }
+      &[channel="tg"] {
+        @include set-channel-button-brand-linear-gradient-color($color-tg, $color-tg-gradient);
+      }
+      &[channel="whatsapp"] {
+        @include set-channel-button-brand-linear-gradient-color($color-whatsapp, $color-whatsapp-gradient);
+      }
+      &[channel="whatsappb"] {
+        @include set-channel-button-brand-linear-gradient-color($color-whatsappb, $color-whatsapp-gradient);
+      }
+      &[loading] {
+        color: transparent;
+        &:after {
+          content: "";
+          border-radius: 100%;
+          border: 3px solid #fff;
+          border-bottom-color: transparent;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 16px;
+          height: 16px;
+          margin: -11px 0 0 -11px;
+          animation-name: spin;
+          animation-duration: 1000ms;
+          animation-iteration-count: infinite;
+        }
+      }
+      > a {
+        all: initial;
+        display: block;
+        text-decoration: none;
+        color: #fff;
+        font-family: inherit;
+        //font-size: 17px;
+        margin: -10px -20px;
+        //padding: 10px 20px;
+        text-decoration: none !important;
+
+        padding: 6px 30px 8px;
+        min-width: 110px;
+        text-align: center;
+        font-size: 15px;
+
+        &:hover {
+          color: #fff;
+        }
+      }
+
+      &[channel="viber"] tb-notification-button__icon {
+        > svg {
+          width: 110%;
+          height: 110%;
+        }
+      }
+    }
+
+    tb-notification-button__text {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    tb-notification-button__icon {
+      display: inline-block;
+      vertical-align: middle;
+      //width: 40px;
+      //height: 40px;
+      width: 30px;
+      height: 30px;
+      margin: -10px 0 -10px -15px;
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient tb-notification-button {
+    margin-bottom: 13px;
+  }
+
+  /* popup */
+  #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-gradient {
+    tb-notification-button {
+      display: inline-block;
+      width: 120px;
+      height: 24px;
+      padding: 0px;
+      margin: 0px 0px 18px 0px;
+
+      > a {
+        position: relative;
+        text-align: center;
+        font-size: 12px;
+        padding: 5px 20px;
+        margin: 0px;
+      }
+    }
+    tb-notification-button__icon {
+      display: block;
+      position: absolute;
+      left: 8px;
+      top: 2px;
+      width: 20px;
+      height: 20px;
+      margin: 0px;
+      padding: 0px;
+    }
+    tb-notification-button__text {
+      vertical-align: baseline;
+      width: 60px;
+      text-align: center;
+      color: #fff;
+    }
+  }
+
+
+  /* circle icons design */
+  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-icons {
+
+    /* inline */
+    tb-notification-button {
+      display: inline-block;
+      position: relative;
+      margin: 0px 13px 13px 0px;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &[loading] {
+        color: transparent;
+        &:after {
+          content: "";
+          border-radius: 100%;
+          border: 3px solid #fff;
+          border-bottom-color: transparent;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 16px;
+          height: 16px;
+          margin: -11px 0 0 -11px;
+          animation-name: spin;
+          animation-duration: 1000ms;
+          animation-iteration-count: infinite;
+        }
+      }
+      > a {
+        all: initial;
+        display: block;
+        text-decoration: none;
+        font-family: inherit;
+        text-decoration: none !important;
+
+        min-width: 80px;
+        text-align: center;
+        font-size: 15px;
+        color: #333;
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+      &[channel="whatsappb"] tb-notification-button__icon, &[channel="whatsapp"] tb-notification-button__icon {
+        background: $color-whatsapp;
+      }
+
+      &[channel="viber"] tb-notification-button__icon {
+        background: $color-viber;
+      }
+
+      &[channel="tg"] tb-notification-button__icon {
+        background: $color-tg;
+      }
+
+      &[channel="facebook"] tb-notification-button__icon {
+        background: $color-fb;
+      }
+    }
+
+    tb-notification-button__text {
+      display: block;
+      margin-top: 4px;
+    }
+
+    tb-notification-button__icon {
+      display: block;
+      position: relative;
+      width: 50px;
+      height: 50px;
+      margin: 0 auto;
+      transition: all .3s ease;
+      border-radius: 50%;
+      box-shadow: 0 6px 12px rgba(0,0,0,.25);
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      &[channel="whatsappb"] svg {
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 50%;
+        height: 50%;
+      }
+
+      &:hover {
+        -webkit-transform: scale(1.3);
+        -ms-transform: scale(1.3);
+        transform: scale(1.3);
+      }
+     }
+    }
+  }
+
+  /*styles for non mobile*/
+  @media only screen and (min-device-width: 736px) {
+
+    /* new design */
+
+    #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
+      tb-notification-button {
+        .tb-notification-button__inner {
+          padding-left: 55px;
+          width: 239px;
+
+          tb-notification-button__icon {
+            top: -5px;
+            left: 0px;
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+    }
+
+    /* old design*/
+
+    #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
+      tb-notification-button {
+        margin: 0px 19px 24px 0px;
+        width: 206px;
+        height: 50px;
+
+        > a {
+          padding: 10px 20px;
+          font-size: 20px;
+        }
+      }
+
+      tb-notification-button__icon {
+        width: 40px;
+        height: 40px;
+        left: 15px;
+        top: 5px;
+      }
+
+      tb-notification-button__text {
+        width: 100px;
+        line-height: 30px;
+      }
+    }
+  }
+
+  // Dirty crutch. There is no other way now *'(
+  tb-notification-widget-popup.tb-popup-with-image .tb-widget-buttons > div:last-child {
+    tb-notification-button {
+      margin-bottom: 0 !important;
+    }
+  }