sempli-website-lib 4.1.4 → 5.0.2

package/styles/partials/_progress-bars.scss

@@ -1,60 +1,60 @@
-/*#############################################################################
-# PROGRESS BAR
-#############################################################################*/
-
-
-div.progress-bar {
-  background-color: #F9F9FB;
-  border: 1px solid #E9EAEA;
-  height: 12px;
-  width: 100%;
-  margin: 0 0 20px;
-  @include border-radius(6px);
-
-  .progress {
-    background-color: $color-primary;
-    height: 10px;
-    @include border-radius(5px);
-  }
-
-  // Bar States
-
-  &.alert {
-    .progress {
-      background-color: $color-alert;
-    }
-  }
-}
-
-/*#############################################################################
-# LOADING LAYER
-#############################################################################*/
-
-
-.loading-layer {
-  .layer-transparent-background {
-    position: fixed;
-    width: 100%;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: rgba(255, 255, 255, 0.7);
-    z-index: 999;
-  }
-
-  .loader-container {
-    display: flex;
-    justify-content: center;
-
-    .loader {
-      z-index: 1000;
-      position: fixed;
-      top: 45%;
-    }
-
-    .loader, .animate-rotation {
-      width: 78px;
-    }
-  }
-}
+/*#############################################################################
+# PROGRESS BAR
+#############################################################################*/
+
+
+div.progress-bar {
+  background-color: #F9F9FB;
+  border: 1px solid #E9EAEA;
+  height: 12px;
+  width: 100%;
+  margin: 0 0 20px;
+  @include border-radius(6px);
+
+  .progress {
+    background-color: $color-primary;
+    height: 10px;
+    @include border-radius(5px);
+  }
+
+  // Bar States
+
+  &.alert {
+    .progress {
+      background-color: $color-alert;
+    }
+  }
+}
+
+/*#############################################################################
+# LOADING LAYER
+#############################################################################*/
+
+
+.loading-layer {
+  .layer-transparent-background {
+    position: fixed;
+    width: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.7);
+    z-index: 999;
+  }
+
+  .loader-container {
+    display: flex;
+    justify-content: center;
+
+    .loader {
+      z-index: 1000;
+      position: fixed;
+      top: 45%;
+    }
+
+    .loader, .animate-rotation {
+      width: 78px;
+    }
+  }
+}

package/styles/partials/_tooltips.scss

@@ -1,129 +1,129 @@
-/*#############################################################################
-# TOOLTIPS
-#############################################################################*/
-
-
-.has-tooltip {
-  position: relative;
-
-  // Tooltip corner
-  &::before {
-    content: "";
-    display: none;
-    border-style: solid;
-    width: 0;
-    height: 0;
-    position: absolute;
-    z-index: 999;
-  }
-
-  // Tooltip body
-  &::after {
-    content: attr(data-tooltip);
-    display: none;
-    background: $color-text;
-    color: #fff;
-    font-size: rem-calc(14px);
-    font-weight: 400;
-    padding: 8px 12px;
-    width: max-content;
-    max-width: 300px;
-    position: absolute;
-    z-index: 999;
-    @include border-radius(3px);
-
-  }
-
-  // POSITION STYLES
-
-  &[data-tooltip-position="top"] {
-    &::before {
-      border-width: 5px 5px 0 5px;
-      border-color: $color-text transparent transparent transparent;
-      top: 0;
-      right: auto;
-      bottom: auto;
-      left: 50%;
-      @include transform(translate(-50%, -100%));
-    }
-
-    &::after {
-      top: -5px;
-      right: auto;
-      bottom: auto;
-      left: 50%;
-      @include transform(translate(-50%, -100%));
-    }
-  }
-
-  &[data-tooltip-position="right"] {
-    &::before {
-      border-width: 5px 5px 5px 0;
-      border-color: transparent $color-text transparent transparent;
-      top: 50%;
-      right: 0;
-      bottom: auto;
-      left: auto;
-      @include transform(translate(100%, -50%));
-    }
-
-    &::after {
-      top: 50%;
-      right: -5px;
-      bottom: auto;
-      left: auto;
-      @include transform(translate(100%, -50%));
-    }
-  }
-
-  &[data-tooltip-position="bottom"] {
-    &::before {
-      border-width: 0 5px 5px 5px;
-      border-color: transparent transparent $color-text transparent;
-      top: auto;
-      right: auto;
-      bottom: 0;
-      left: 50%;
-      @include transform(translate(-50%, 100%));
-    }
-
-    &::after {
-      top: auto;
-      right: auto;
-      bottom: -5px;
-      left: 50%;
-      @include transform(translate(-50%, 100%));
-    }
-  }
-
-  &[data-tooltip-position="left"] {
-    &::before {
-      border-width: 5px 0 5px 5px;
-      border-color: transparent transparent transparent $color-text;
-      top: 50%;
-      right: auto;
-      bottom: auto;
-      left: 0;
-      @include transform(translate(-100%, -50%));
-    }
-
-    &::after {
-      top: 50%;
-      right: auto;
-      bottom: auto;
-      left: -5px;
-      @include transform(translate(-100%, -50%));
-    }
-  }
-
-  // HOVER / MAKE THEM VISIBLE
-  &:hover {
-    &::before {
-      display: block;
-    }
-
-    &::after {
-      display: block;
-    }
-  }
+/*#############################################################################
+# TOOLTIPS
+#############################################################################*/
+
+
+.has-tooltip {
+  position: relative;
+
+  // Tooltip corner
+  &::before {
+    content: "";
+    display: none;
+    border-style: solid;
+    width: 0;
+    height: 0;
+    position: absolute;
+    z-index: 999;
+  }
+
+  // Tooltip body
+  &::after {
+    content: attr(data-tooltip);
+    display: none;
+    background: $color-text;
+    color: #fff;
+    font-size: rem-calc(14px);
+    font-weight: 400;
+    padding: 8px 12px;
+    width: max-content;
+    max-width: 300px;
+    position: absolute;
+    z-index: 999;
+    @include border-radius(3px);
+
+  }
+
+  // POSITION STYLES
+
+  &[data-tooltip-position="top"] {
+    &::before {
+      border-width: 5px 5px 0 5px;
+      border-color: $color-text transparent transparent transparent;
+      top: 0;
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      @include transform(translate(-50%, -100%));
+    }
+
+    &::after {
+      top: -5px;
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      @include transform(translate(-50%, -100%));
+    }
+  }
+
+  &[data-tooltip-position="right"] {
+    &::before {
+      border-width: 5px 5px 5px 0;
+      border-color: transparent $color-text transparent transparent;
+      top: 50%;
+      right: 0;
+      bottom: auto;
+      left: auto;
+      @include transform(translate(100%, -50%));
+    }
+
+    &::after {
+      top: 50%;
+      right: -5px;
+      bottom: auto;
+      left: auto;
+      @include transform(translate(100%, -50%));
+    }
+  }
+
+  &[data-tooltip-position="bottom"] {
+    &::before {
+      border-width: 0 5px 5px 5px;
+      border-color: transparent transparent $color-text transparent;
+      top: auto;
+      right: auto;
+      bottom: 0;
+      left: 50%;
+      @include transform(translate(-50%, 100%));
+    }
+
+    &::after {
+      top: auto;
+      right: auto;
+      bottom: -5px;
+      left: 50%;
+      @include transform(translate(-50%, 100%));
+    }
+  }
+
+  &[data-tooltip-position="left"] {
+    &::before {
+      border-width: 5px 0 5px 5px;
+      border-color: transparent transparent transparent $color-text;
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      @include transform(translate(-100%, -50%));
+    }
+
+    &::after {
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: -5px;
+      @include transform(translate(-100%, -50%));
+    }
+  }
+
+  // HOVER / MAKE THEM VISIBLE
+  &:hover {
+    &::before {
+      display: block;
+    }
+
+    &::after {
+      display: block;
+    }
+  }
 }

package/styles/partials/_videos.scss

@@ -1,33 +1,33 @@
-/*#############################################################################
-# RESPONSIVE VIDEO
-#############################################################################*/
-
-
-// ratio of the video 16/9 would be 56.25%
-// (42.6 % of he width of the parent element)
-// <div class="video-container">
-  // <iframe width="640" height="360" src="//www.youtube.com/embed/ukKd8W3Bvo0" frameborder="0" allowfullscreen></iframe>
-// </div>
-
-.outer-video-container {
-  width: 80%;
-  margin: auto;
-}
-
-.video-container {
-  position: relative;
-  padding-bottom: 56.25%; /*16:9*/
-  // padding-top: 30px;
-  height: 0;
-  overflow: hidden;
-
-  iframe,
-  object,
-  embed {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+/*#############################################################################
+# RESPONSIVE VIDEO
+#############################################################################*/
+
+
+// ratio of the video 16/9 would be 56.25%
+// (42.6 % of he width of the parent element)
+// <div class="video-container">
+  // <iframe width="640" height="360" src="//www.youtube.com/embed/ukKd8W3Bvo0" frameborder="0" allowfullscreen></iframe>
+// </div>
+
+.outer-video-container {
+  width: 80%;
+  margin: auto;
+}
+
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%; /*16:9*/
+  // padding-top: 30px;
+  height: 0;
+  overflow: hidden;
+
+  iframe,
+  object,
+  embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 }

package/styles/partials/animations.scss

@@ -1,122 +1,122 @@
-/**
-* ----------------------------------------
-* animation heartbeat
-* ----------------------------------------
-*/
-@keyframes heartbeat {
-  from {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-    -webkit-transform-origin: center center;
-            transform-origin: center center;
-    -webkit-animation-timing-function: ease-out;
-            animation-timing-function: ease-out;
-  }
-  10% {
-    -webkit-transform: scale(0.91);
-            transform: scale(0.91);
-    -webkit-animation-timing-function: ease-in;
-            animation-timing-function: ease-in;
-  }
-  17% {
-    -webkit-transform: scale(0.98);
-            transform: scale(0.98);
-    -webkit-animation-timing-function: ease-out;
-            animation-timing-function: ease-out;
-  }
-  33% {
-    -webkit-transform: scale(0.87);
-            transform: scale(0.87);
-    -webkit-animation-timing-function: ease-in;
-            animation-timing-function: ease-in;
-  }
-  45% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-    -webkit-animation-timing-function: ease-out;
-            animation-timing-function: ease-out;
-  }
-}
-
-/**
-* ----------------------------------------
-* animation shadow-pulse
-* ----------------------------------------
-*/
-@keyframes shadow-pulse {
-  0% {
-    box-shadow: 0 0 0 0px #4d4cfc26;
-    border-radius: 5%;
-  }
-  100% {
-    box-shadow: 0 0 0 10px #4d4cfc26;
-  }
-}
-
-/**
-* ----------------------------------------
-* animation Wave animation for content transition
-* ----------------------------------------
-*/
-@keyframes sdb05 {
-  0% {
-    transform: rotate(-45deg) translate(0, 0);
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    transform: rotate(-45deg) translate(-20px, 20px);
-    opacity: 0;
-  }
-}
-
-/**
-* ----------------------------------------
-* animation shadow-pulse fo responsive intercom button
-* ----------------------------------------
-*/
-@keyframes intercom-button-shadow-pulse {
-  0% {
-    box-shadow: 0 0 0 0px #3047ec1c;
-  }
-  100% {
-    box-shadow: 0 0 0 35px #3047ec1c;
-  }
-}
-
-/**
-* ----------------------------------------
-* animation Animations for floating chat button
-* ----------------------------------------
-*/
-@keyframes float-action-active {
-  from {opacity: 0; transform: rotateZ(-70deg);}
-  to {opacity: 1; transform: rotateZ(0deg);}
-}
-
-@keyframes float-action-disable {
-  from {opacity: 1; transform: rotateZ(0deg);}
-  to {opacity: 0; transform: rotateZ(-70deg);}
-}
-
-@keyframes float-action-button-in {
-  from {opacity: 1; transform: rotateZ(0deg);}
-  to {opacity: 0; transform: rotateZ(180deg);}
-}
-
-@keyframes float-action-button-out {
-  from {opacity: 0; transform: rotateZ(180deg);}
-  to {opacity: 1; transform: rotateZ(0deg);}
-}
-
-@keyframes float-button-in {
-  from {opacity: 0;}
-  to {opacity: 1; transform: scale(1);}
-}
-
-@keyframes float-button-out {
-  from {opacity: 1; transform: scale(1);}
-  to {opacity: 0; transform: scale(0);}
-}
+/**
+* ----------------------------------------
+* animation heartbeat
+* ----------------------------------------
+*/
+@keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: center center;
+            transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+            transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+            transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+            transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+}
+
+/**
+* ----------------------------------------
+* animation shadow-pulse
+* ----------------------------------------
+*/
+@keyframes shadow-pulse {
+  0% {
+    box-shadow: 0 0 0 0px #4d4cfc26;
+    border-radius: 5%;
+  }
+  100% {
+    box-shadow: 0 0 0 10px #4d4cfc26;
+  }
+}
+
+/**
+* ----------------------------------------
+* animation Wave animation for content transition
+* ----------------------------------------
+*/
+@keyframes sdb05 {
+  0% {
+    transform: rotate(-45deg) translate(0, 0);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: rotate(-45deg) translate(-20px, 20px);
+    opacity: 0;
+  }
+}
+
+/**
+* ----------------------------------------
+* animation shadow-pulse fo responsive intercom button
+* ----------------------------------------
+*/
+@keyframes intercom-button-shadow-pulse {
+  0% {
+    box-shadow: 0 0 0 0px #3047ec1c;
+  }
+  100% {
+    box-shadow: 0 0 0 35px #3047ec1c;
+  }
+}
+
+/**
+* ----------------------------------------
+* animation Animations for floating chat button
+* ----------------------------------------
+*/
+@keyframes float-action-active {
+  from {opacity: 0; transform: rotateZ(-70deg);}
+  to {opacity: 1; transform: rotateZ(0deg);}
+}
+
+@keyframes float-action-disable {
+  from {opacity: 1; transform: rotateZ(0deg);}
+  to {opacity: 0; transform: rotateZ(-70deg);}
+}
+
+@keyframes float-action-button-in {
+  from {opacity: 1; transform: rotateZ(0deg);}
+  to {opacity: 0; transform: rotateZ(180deg);}
+}
+
+@keyframes float-action-button-out {
+  from {opacity: 0; transform: rotateZ(180deg);}
+  to {opacity: 1; transform: rotateZ(0deg);}
+}
+
+@keyframes float-button-in {
+  from {opacity: 0;}
+  to {opacity: 1; transform: scale(1);}
+}
+
+@keyframes float-button-out {
+  from {opacity: 1; transform: scale(1);}
+  to {opacity: 0; transform: scale(0);}
+}