sempli-website-lib 7.1.0-beta.2 → 7.1.0-beta.4

package/styles/partials/_buttons.scss

@@ -1,453 +1,446 @@
-/*#############################################################################
-# BUTTONS
-#############################################################################*/
-
-.button {
-  display: inline-block;
-  background-color: $color-primary;
-  color: #fff;
-  font-weight: 900;
-  padding: 10px 20px;
-  margin: 0 10px 10px 0;
-  @include border-radius(4px);
-
-  &.rounded {
-    border-radius: 30px;
-    padding: 6px 20px;
-    margin: 0;
-    text-align: center;
-  }
-
-  &:hover {
-    background-color: $color-primary-dark;
-    color: white;
-    text-decoration: none;
-  }
-
-  // State Variables
-  $transparentizeAmount: 0.9;
-  $buttonStates: (
-    secondary: (
-      color: $color-secondary,
-      colorDark: $color-secondary-dark,
-      colorTransparent: transparentize($color-secondary, $transparentizeAmount),
-      textColor: #ffffff
-    ),
-    success: (
-      color: $color-success,
-      colorDark: $color-success-dark,
-      colorTransparent: transparentize($color-success, $transparentizeAmount),
-      textColor: #ffffff
-    ),
-    alert: (
-      color: $color-alert,
-      colorDark: $color-alert-dark,
-      colorTransparent: transparentize($color-alert, $transparentizeAmount),
-      textColor: #ffffff
-    ),
-    warning: (
-      color: $color-warning,
-      colorDark: $color-warning-dark,
-      colorTransparent: transparentize($color-warning, $transparentizeAmount),
-      textColor: $color-text
-    )
-  );
-
-  // STATES
-  @each $state, $stateProp in $buttonStates {
-    &.#{$state} {
-      background-color: #{map-get($stateProp, "color")};
-      color: #{map-get($stateProp, "textColor")};
-
-      &:hover {
-        background-color: #{map-get($stateProp, "colorDark")};
-        color: #fff;
-        text-decoration: none;
-      }
-    }
-  }
-
-  // OUTLINE BUTTONS
-  &.outline {
-    background: transparent;
-    color: $color-primary;
-    @include box-shadow(0 0 0 2px $color-primary inset);
-
-    &:hover {
-      background: transparentize($color-primary, $transparentizeAmount);
-      color: $color-primary-dark;
-      @include box-shadow(0 0 0 2px $color-primary-dark inset);
-    }
-
-    // PRIMARY STATES
-    @each $state, $stateProp in $buttonStates {
-      &.#{$state} {
-        background: transparent;
-        color: #{map-get($stateProp, "color")};
-        @include box-shadow(0 0 0 2px #{map-get($stateProp, "color")} inset);
-
-        &:hover {
-          background: #{map-get($stateProp, "colorTransparent")};
-          color: #{map-get($stateProp, "colorDark")};
-          @include box-shadow(0 0 0 2px #{map-get($stateProp, "colorDark")} inset);
-        }
-      }
-    }
-  }
-
-  // Small Size
-  &.small {
-    font-size: rem-calc(14px);
-    padding: 5px 10px
-  }
-
-  // Disabled State
-  &.is-disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-    opacity: 0.3;
-  }
-}
-
-a.cursor-pointer,
-button.cursor-pointer {
-  cursor: pointer;
-}
-
-
-.accordion-button-container {
-  .accordion-label {
-    cursor:pointer;
-    display:block;
-  }
-
-  &:first-of-type{
-    border-top-left-radius:20px;
-    border-top-right-radius:20px;
-  }
-  &:last-of-type{
-    border-bottom-left-radius:20px;
-    border-bottom-right-radius:20px;
-    border-bottom: none;
-  }
-
-  .accordion-content{
-    /* Height animation:
-    only really works well if the height is close to content - too high and the animation still goes to the max-height number, messing up the timing
-    For widely variable height content, best not to animate. Switch display attribute instead */
-    max-height:0;
-    overflow: hidden;
-    transition : max-height 0.2s;
-    background-size: 260px;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-  .accordion-control {
-    display:none;
-    + label{
-      position: relative;
-      height: 40px;
-      display: block;
-      font-family: Arial, Helvetica, sans-serif;
-      font-size: 1em;
-      line-height: 1em;
-      z-index: 0;
-      display: flex;
-      align-items: center;
-
-      &:before,
-      &:after {
-        content    : '';
-        position   : absolute;
-      }
-      &:before {
-        content: attr(data-label-closed);
-        display: contents;
-      }
-      &::after {
-        right: 0;
-        content: "❯";
-        margin-right: 8px;
-        height: 1em;
-        text-align: center;
-        transition: all 0.35s;
-      }
-    }
-
-    &:checked {
-      + label{
-        cursor:pointer;
-        &:before{
-          content: attr(data-label-open);
-        }
-        &:after{
-          transform: rotate(90deg);
-        }
-        + .accordion-content{
-          max-height: fit-content;
-          padding-right: 30px;
-        }
-      }
-    }
-    &[type="radio"]{
-      + label{
-        &:before,
-        &:after{
-          content:'';
-        }
-      }
-      &:checked{
-        + label{
-          cursor:default;
-          &:before{
-            border-left-color:#999;
-          }
-        }
-      }
-    }
-  }
-}
-
-.whatsapp-button-float {
-  position: fixed;
-  width: 60px;
-  height: 60px;
-  bottom: 30px;
-  right: 20px;
-  background-color: #25d366;
-  color: #FFF;
-  border-radius: 50px;
-  text-align: center;
-  z-index: 1000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-
-  .icon {
-    display: flex;
-    max-width: 30px;
-  }
-}
-
-.container-floating {
-  display: none;
-}
-@include responsive-max($breakpoint-small) {
-  .whatsapp-button-float {
-    display: none;
-  }
-
-  .container-floating {
-    display: block;
-    position: fixed;
-    width: 70px;
-    height: 70px;
-    bottom: 30px;
-    right: 30px;
-    z-index: 2000;
-
-    a {
-      line-height: 0;
-    }
-
-    .action-button {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      position: fixed;
-      z-index: 300;
-      transform: scale(0);
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-
-      &.whatsapp-button {
-        right: 40px;
-        bottom: 180px;
-        animation-name: float-button-out;
-        animation-delay: 0.15s;
-        animation-duration: 0.15s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        background-color: #25d366;
-        background-repeat: no-repeat;
-        background-image: url("/assets/swl/interface/icons/whatsapp-icon.png");
-        background-size: 20px;
-        background-position: center;
-      }
-
-      &.intercom-button {
-        right: 40px;
-        bottom: 120px;
-        animation-name: float-button-out;
-        animation-duration: 0.3s;
-        animation-timing-function: linear;
-        animation-delay: 0.2s;
-        animation-fill-mode: forwards;
-        background-color: rgb(48, 71, 236);
-        background-repeat: no-repeat;
-        background-image: url("/assets/swl/interface/icons/intercom-messenger-icon.svg");
-        background-size: 20px;
-        background-position: center;
-      }
-    }
-
-    .floating-button {
-      width: 55px;
-      height: 55px;
-      border-radius: 50%;
-      background: $color-primary;
-      position: fixed;
-      bottom: 30px;
-      right: 30px;
-      cursor: pointer;
-      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
-
-      .active-action-button {
-        color: white;
-        position: absolute;
-        top: 0;
-        display: block;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        opacity: 0;
-        text-align: center;
-        padding: 0;
-        margin: 0;
-        line-height: 55px;
-        font-size: 38px;
-        font-weight: 300;
-        animation: float-action-button-out 0.1s;
-        transition: all 0.1s;
-        background-repeat: no-repeat;
-        background-image: url("/assets/swl/interface/icons/chevron-up-icon.svg");
-        width: 100%;
-        height: 100%;
-        background-position: center;
-      }
-
-      .closed-action-button {
-        position: absolute;
-        top: 0;
-        display: block;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: 0;
-        margin: auto;
-        line-height: 65px;
-        animation: float-action-disable 0.2s;
-        transition: all 0.2s;
-        background-repeat: no-repeat;
-        background-image: url("/assets/swl/interface/icons/message-square-icon.svg");
-        width: 100%;
-        height: 100%;
-        background-position: center;
-      }
-    }
-
-    &:hover {
-      height: 400px;
-      width: 90px;
-      padding: 30px;
-
-      .floating-button {
-        .active-action-button {
-          animation: float-action-active 0.2s;
-          animation-delay: 0.1s;
-          animation-fill-mode: forwards;
-        }
-
-        .closed-action-button {
-          animation: float-action-button-in 0.15s linear;
-          animation-delay: 0.1s;
-          animation-fill-mode: forwards;
-        }
-      }
-
-      .action-button {
-        animation: float-button-in 0.1s linear;
-        animation-fill-mode: forwards;
-
-        &.whatsapp-button {
-          animation-delay: 0.08s;
-        }
-      }
-    }
-
-    &.header {
-      width: 50px;
-      padding: 5px 15px;
-      right: 12px;
-      bottom: unset;
-
-      .action-button {
-        &.whatsapp-button {
-          right: 15px;
-          top: 130px;
-        }
-
-        &.intercom-button {
-          right: 15px;
-          top: 70px;
-        }
-      }
-
-      .floating-button {
-        width: 40px;
-        height: 40px;
-        right: 15px;
-        bottom: unset;
-        animation: intercom-button-shadow-pulse 1s 10 ;
-        .active-action-button {
-          background-image: url("/assets/swl/interface/icons/chevron-down-icon.svg");
-        }
-      }
-    }
-  }
-}
-
-.btn-arrow-up {
-  position: relative;
-  text-decoration: none;
-  color: #434448;
-  padding: 7px 0px 8px 20px;
-  border-radius: 50px;
-  transition: color 0.5s ease;
-  z-index: 1;
-
-  i {
-    margin-left: 5px;
-    background: #4335F9;
-    border-radius: 50%;
-    padding: 8px 8px;
-    color: white;
-    transition: color 0.5s ease;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 18%;
-    height: 100%;
-    border-radius: 100px;
-    transition: width 0.5s ease, background 0.5s ease;
-    z-index: -1;
-  }
-
-  &:hover {
-    color: white;
-
-    &::before {
-      width: 100%;
-      background: #4335F9;
-      color: white;
-    }
-  }
-}
+/*#############################################################################
+# BUTTONS
+#############################################################################*/
+
+.button {
+  display: inline-block;
+  background-color: $color-primary;
+  color: #fff;
+  font-weight: 900;
+  padding: 10px 20px;
+  margin: 0 10px 10px 0;
+  @include border-radius(4px);
+
+  &:hover {
+    background-color: $color-primary-dark;
+    color: white;
+    text-decoration: none;
+  }
+
+  // State Variables
+  $transparentizeAmount: 0.9;
+  $buttonStates: (
+    secondary: (
+      color: $color-secondary,
+      colorDark: $color-secondary-dark,
+      colorTransparent: transparentize($color-secondary, $transparentizeAmount),
+      textColor: #ffffff
+    ),
+    success: (
+      color: $color-success,
+      colorDark: $color-success-dark,
+      colorTransparent: transparentize($color-success, $transparentizeAmount),
+      textColor: #ffffff
+    ),
+    alert: (
+      color: $color-alert,
+      colorDark: $color-alert-dark,
+      colorTransparent: transparentize($color-alert, $transparentizeAmount),
+      textColor: #ffffff
+    ),
+    warning: (
+      color: $color-warning,
+      colorDark: $color-warning-dark,
+      colorTransparent: transparentize($color-warning, $transparentizeAmount),
+      textColor: $color-text
+    )
+  );
+
+  // STATES
+  @each $state, $stateProp in $buttonStates {
+    &.#{$state} {
+      background-color: #{map-get($stateProp, "color")};
+      color: #{map-get($stateProp, "textColor")};
+
+      &:hover {
+        background-color: #{map-get($stateProp, "colorDark")};
+        color: #fff;
+        text-decoration: none;
+      }
+    }
+  }
+
+  // OUTLINE BUTTONS
+  &.outline {
+    background: transparent;
+    color: $color-primary;
+    @include box-shadow(0 0 0 2px $color-primary inset);
+
+    &:hover {
+      background: transparentize($color-primary, $transparentizeAmount);
+      color: $color-primary-dark;
+      @include box-shadow(0 0 0 2px $color-primary-dark inset);
+    }
+
+    // PRIMARY STATES
+    @each $state, $stateProp in $buttonStates {
+      &.#{$state} {
+        background: transparent;
+        color: #{map-get($stateProp, "color")};
+        @include box-shadow(0 0 0 2px #{map-get($stateProp, "color")} inset);
+
+        &:hover {
+          background: #{map-get($stateProp, "colorTransparent")};
+          color: #{map-get($stateProp, "colorDark")};
+          @include box-shadow(0 0 0 2px #{map-get($stateProp, "colorDark")} inset);
+        }
+      }
+    }
+  }
+
+  // Small Size
+  &.small {
+    font-size: rem-calc(14px);
+    padding: 5px 10px
+  }
+
+  // Disabled State
+  &.is-disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.3;
+  }
+}
+
+a.cursor-pointer,
+button.cursor-pointer {
+  cursor: pointer;
+}
+
+
+.accordion-button-container {
+  .accordion-label {
+    cursor:pointer;
+    display:block;
+  }
+
+  &:first-of-type{
+    border-top-left-radius:20px;
+    border-top-right-radius:20px;
+  }
+  &:last-of-type{
+    border-bottom-left-radius:20px;
+    border-bottom-right-radius:20px;
+    border-bottom: none;
+  }
+
+  .accordion-content{
+    /* Height animation:
+    only really works well if the height is close to content - too high and the animation still goes to the max-height number, messing up the timing
+    For widely variable height content, best not to animate. Switch display attribute instead */
+    max-height:0;
+    overflow: hidden;
+    transition : max-height 0.2s;
+    background-size: 260px;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .accordion-control {
+    display:none;
+    + label{
+      position: relative;
+      height: 40px;
+      display: block;
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 1em;
+      line-height: 1em;
+      z-index: 0;
+      display: flex;
+      align-items: center;
+
+      &:before,
+      &:after {
+        content    : '';
+        position   : absolute;
+      }
+      &:before {
+        content: attr(data-label-closed);
+        display: contents;
+      }
+      &::after {
+        right: 0;
+        content: "❯";
+        margin-right: 8px;
+        height: 1em;
+        text-align: center;
+        transition: all 0.35s;
+      }
+    }
+
+    &:checked {
+      + label{
+        cursor:pointer;
+        &:before{
+          content: attr(data-label-open);
+        }
+        &:after{
+          transform: rotate(90deg);
+        }
+        + .accordion-content{
+          max-height: fit-content;
+          padding-right: 30px;
+        }
+      }
+    }
+    &[type="radio"]{
+      + label{
+        &:before,
+        &:after{
+          content:'';
+        }
+      }
+      &:checked{
+        + label{
+          cursor:default;
+          &:before{
+            border-left-color:#999;
+          }
+        }
+      }
+    }
+  }
+}
+
+.whatsapp-button-float {
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  bottom: 30px;
+  right: 20px;
+  background-color: #25d366;
+  color: #FFF;
+  border-radius: 50px;
+  text-align: center;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  .icon {
+    display: flex;
+    max-width: 30px;
+  }
+}
+
+.container-floating {
+  display: none;
+}
+@include responsive-max($breakpoint-small) {
+  .whatsapp-button-float {
+    display: none;
+  }
+
+  .container-floating {
+    display: block;
+    position: fixed;
+    width: 70px;
+    height: 70px;
+    bottom: 30px;
+    right: 30px;
+    z-index: 2000;
+
+    a {
+      line-height: 0;
+    }
+
+    .action-button {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      position: fixed;
+      z-index: 300;
+      transform: scale(0);
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+
+      &.whatsapp-button {
+        right: 40px;
+        bottom: 180px;
+        animation-name: float-button-out;
+        animation-delay: 0.15s;
+        animation-duration: 0.15s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        background-color: #25d366;
+        background-repeat: no-repeat;
+        background-image: url("/assets/swl/interface/icons/whatsapp-icon.png");
+        background-size: 20px;
+        background-position: center;
+      }
+
+      &.intercom-button {
+        right: 40px;
+        bottom: 120px;
+        animation-name: float-button-out;
+        animation-duration: 0.3s;
+        animation-timing-function: linear;
+        animation-delay: 0.2s;
+        animation-fill-mode: forwards;
+        background-color: rgb(48, 71, 236);
+        background-repeat: no-repeat;
+        background-image: url("/assets/swl/interface/icons/intercom-messenger-icon.svg");
+        background-size: 20px;
+        background-position: center;
+      }
+    }
+
+    .floating-button {
+      width: 55px;
+      height: 55px;
+      border-radius: 50%;
+      background: $color-primary;
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      cursor: pointer;
+      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
+
+      .active-action-button {
+        color: white;
+        position: absolute;
+        top: 0;
+        display: block;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        opacity: 0;
+        text-align: center;
+        padding: 0;
+        margin: 0;
+        line-height: 55px;
+        font-size: 38px;
+        font-weight: 300;
+        animation: float-action-button-out 0.1s;
+        transition: all 0.1s;
+        background-repeat: no-repeat;
+        background-image: url("/assets/swl/interface/icons/chevron-up-icon.svg");
+        width: 100%;
+        height: 100%;
+        background-position: center;
+      }
+
+      .closed-action-button {
+        position: absolute;
+        top: 0;
+        display: block;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 0;
+        margin: auto;
+        line-height: 65px;
+        animation: float-action-disable 0.2s;
+        transition: all 0.2s;
+        background-repeat: no-repeat;
+        background-image: url("/assets/swl/interface/icons/message-square-icon.svg");
+        width: 100%;
+        height: 100%;
+        background-position: center;
+      }
+    }
+
+    &:hover {
+      height: 400px;
+      width: 90px;
+      padding: 30px;
+
+      .floating-button {
+        .active-action-button {
+          animation: float-action-active 0.2s;
+          animation-delay: 0.1s;
+          animation-fill-mode: forwards;
+        }
+
+        .closed-action-button {
+          animation: float-action-button-in 0.15s linear;
+          animation-delay: 0.1s;
+          animation-fill-mode: forwards;
+        }
+      }
+
+      .action-button {
+        animation: float-button-in 0.1s linear;
+        animation-fill-mode: forwards;
+
+        &.whatsapp-button {
+          animation-delay: 0.08s;
+        }
+      }
+    }
+
+    &.header {
+      width: 50px;
+      padding: 5px 15px;
+      right: 12px;
+      bottom: unset;
+
+      .action-button {
+        &.whatsapp-button {
+          right: 15px;
+          top: 130px;
+        }
+
+        &.intercom-button {
+          right: 15px;
+          top: 70px;
+        }
+      }
+
+      .floating-button {
+        width: 40px;
+        height: 40px;
+        right: 15px;
+        bottom: unset;
+        animation: intercom-button-shadow-pulse 1s 10 ;
+        .active-action-button {
+          background-image: url("/assets/swl/interface/icons/chevron-down-icon.svg");
+        }
+      }
+    }
+  }
+}
+
+.btn-arrow-up {
+  position: relative;
+  text-decoration: none;
+  color: #434448;
+  padding: 7px 0px 8px 20px;
+  border-radius: 50px;
+  transition: color 0.5s ease;
+  z-index: 1;
+
+  i {
+    margin-left: 5px;
+    background: #4335F9;
+    border-radius: 50%;
+    padding: 8px 8px;
+    color: white;
+    transition: color 0.5s ease;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 18%;
+    height: 100%;
+    border-radius: 100px;
+    transition: width 0.5s ease, background 0.5s ease;
+    z-index: -1;
+  }
+
+  &:hover {
+    color: white;
+
+    &::before {
+      width: 100%;
+      background: #4335F9;
+      color: white;
+    }
+  }
+}