@luizleon/sf.prefeiturasp.vuecomponents 0.0.21 → 0.0.22

package/src/style/src/components/_tab-navigation.scss

@@ -0,0 +1,93 @@
+.sf-tab-navigation {
+  background: var(--surface-100-color);
+  overflow: hidden;
+  position: relative;
+}
+
+.sf-tab-navigation svg {
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+  cursor: pointer;
+  color: var(--text-color);
+  border-radius: 50%;
+  pointer-events: auto;
+}
+
+.sf-tab-navigation ul {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  height: 42px;
+  list-style: none;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+  background-color: var(--bg-color);
+  border-bottom: 1px solid var(--surface-border-color);
+  > li {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+    border-bottom: 2px solid transparent;
+    &[data-active="true"] {
+      border-bottom-color: var(--primary-color);
+      pointer-events: none;
+    }
+    &:not([data-active="true"]) {
+      > a {
+        &:hover,
+        &:focus {
+          color: var(--info-color);
+        }
+      }
+    }
+    > a {
+      text-decoration: none;
+    }
+  }
+}
+
+.sf-tab-navigation ul::-webkit-scrollbar {
+  display: none;
+}
+
+.sf-tab-navigation .right-arrow,
+.sf-tab-navigation .left-arrow {
+  position: absolute;
+  height: 100%;
+  width: 100px;
+  top: 0;
+  display: none;
+  align-items: center;
+  padding: 0 10px;
+  pointer-events: none;
+}
+
+.sf-tab-navigation .right-arrow.active,
+.sf-tab-navigation .left-arrow.active {
+  display: flex;
+}
+
+.sf-tab-navigation .right-arrow {
+  right: 0;
+  background: linear-gradient(
+    to left,
+    var(--surface-100-color) 30%,
+    transparent
+  );
+  justify-content: flex-end;
+}
+
+.sf-tab-navigation .left-arrow {
+  background: linear-gradient(
+    to right,
+    var(--surface-100-color) 50%,
+    transparent
+  );
+}
+
+.sf-tab-navigation svg:hover {
+  background: var(--surface-300-color);
+}

package/src/style/src/components/_themetoggle.scss

@@ -0,0 +1,25 @@
+@import "../mixins";
+
+html {
+  #sf-theme-toggle {
+    @include sf-internal-icon-button;
+
+    .toggle-circle {
+      transition: transform 500ms ease-out;
+      transform: translateX(-15%);
+    }
+
+    .toggle-sun {
+      transform-origin: center center;
+      transition: transform 750ms cubic-bezier(0.11, 0.14, 0.29, 1.32);
+      transform: rotate(0.5turn);
+    }
+  }
+
+  &.dark #sf-theme-toggle {
+    .toggle-circle,
+    .toggle-sun {
+      transform: unset;
+    }
+  }
+}

package/src/style/src/components/_tooltip.scss

@@ -0,0 +1,55 @@
+.sf-tooltip-wrapper {
+  --arrow-width: 7.5px;
+  pointer-events: none;
+  width: 120px;
+  color: var(--bg-color);
+  text-align: center;
+  text-transform: lowercase;
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.3s;
+
+  .sf-tooltip-inner {
+    position: relative;
+    padding: 6px 0;
+    border-radius: 4px;
+    background-color: var(--text-color);
+    font-size: 0.875rem;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: var(--arrow-width);
+      top: calc(var(--arrow-width) * -1);
+      border-left: var(--arrow-width) solid transparent;
+      border-right: var(--arrow-width) solid transparent;
+      border-bottom: var(--arrow-width) solid var(--text-color);
+    }
+  }
+
+  &.visible {
+    opacity: 1;
+  }
+
+  &.top .sf-tooltip-inner::after {
+    top: unset;
+    bottom: calc(var(--arrow-width) * -1);
+    border-bottom: unset;
+    border-top: var(--arrow-width) solid var(--text-color);
+  }
+
+  &.left .sf-tooltip-inner::after {
+    left: unset;
+    right: var(--arrow-width);
+  }
+}
+
+.sf-tooltip-anchor {
+  display: inline !important;
+  border-radius: 50%;
+  &:has(.sf-component-disabled),
+  &:has(.sf-component-loading),
+  &:has(.sf-component-freeze) {
+    pointer-events: none !important;
+  }
+}

package/src/style/src/sweetalert/_sweetalert.scss

@@ -0,0 +1,9 @@
+/*! SweetAlert2 github.com/sweetalert2/sweetalert2 */
+
+@import "scss/theming";
+@import "scss/animations";
+
+body {
+  @include sweetalert2-body();
+  //@include sweetalert2-toasts-body();
+}

package/src/style/src/sweetalert/scss/_animations.scss

@@ -0,0 +1,197 @@
+//@import 'toasts-animations';
+
+// Appearance animation
+@keyframes swal2-show {
+  0% {
+    transform: scale(0.7);
+  }
+
+  45% {
+    transform: scale(1.05);
+  }
+
+  80% {
+    transform: scale(0.95);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+// Disppearance animation
+@keyframes swal2-hide {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+}
+
+// Success icon animations
+@keyframes swal2-animate-success-line-tip {
+  0% {
+    top: 1.1875em;
+    left: 0.0625em;
+    width: 0;
+  }
+
+  54% {
+    top: 1.0625em;
+    left: 0.125em;
+    width: 0;
+  }
+
+  70% {
+    top: 2.1875em;
+    left: -0.375em;
+    width: 3.125em;
+  }
+
+  84% {
+    top: 3em;
+    left: 1.3125em;
+    width: 1.0625em;
+  }
+
+  100% {
+    top: 2.8125em;
+    left: 0.8125em;
+    width: 1.5625em;
+  }
+}
+
+@keyframes swal2-animate-success-line-long {
+  0% {
+    top: 3.375em;
+    right: 2.875em;
+    width: 0;
+  }
+
+  65% {
+    top: 3.375em;
+    right: 2.875em;
+    width: 0;
+  }
+
+  84% {
+    top: 2.1875em;
+    right: 0;
+    width: 3.4375em;
+  }
+
+  100% {
+    top: 2.375em;
+    right: 0.5em;
+    width: 2.9375em;
+  }
+}
+
+@keyframes swal2-rotate-success-circular-line {
+  0% {
+    transform: rotate(-45deg);
+  }
+
+  5% {
+    transform: rotate(-45deg);
+  }
+
+  12% {
+    transform: rotate(-405deg);
+  }
+
+  100% {
+    transform: rotate(-405deg);
+  }
+}
+
+// Error icon animations
+@keyframes swal2-animate-error-x-mark {
+  0% {
+    margin-top: 1.625em;
+    transform: scale(0.4);
+    opacity: 0;
+  }
+
+  50% {
+    margin-top: 1.625em;
+    transform: scale(0.4);
+    opacity: 0;
+  }
+
+  80% {
+    margin-top: -0.375em;
+    transform: scale(1.15);
+  }
+
+  100% {
+    margin-top: 0;
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes swal2-animate-error-icon {
+  0% {
+    transform: rotateX(100deg);
+    opacity: 0;
+  }
+
+  100% {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes swal2-rotate-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// Question mark animation
+@keyframes swal2-animate-question-mark {
+  0% {
+    transform: rotateY(-360deg);
+  }
+
+  100% {
+    transform: rotateY(0);
+  }
+}
+
+// Info and Warning mark animation
+@keyframes swal2-animate-i-mark {
+  0% {
+    transform: rotateZ(45deg);
+    opacity: 0;
+  }
+
+  25% {
+    transform: rotateZ(-25deg);
+    opacity: 0.4;
+  }
+
+  50% {
+    transform: rotateZ(15deg);
+    opacity: 0.8;
+  }
+
+  75% {
+    transform: rotateZ(-5deg);
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotateX(0);
+    opacity: 1;
+  }
+}

package/src/style/src/sweetalert/scss/_body.scss

@@ -0,0 +1,45 @@
+//@import "toasts-body";
+
+@mixin sweetalert2-body() {
+  &.swal2-shown {
+    @include not(".swal2-no-backdrop", ".swal2-toast-shown") {
+      overflow: hidden; // not overflow-y because of Sarari, #1253
+    }
+  }
+
+  // SfLayout define height de html.
+  // &.swal2-height-auto {
+  //    height: auto !important; // #781 #1107
+  // }
+
+  &.swal2-no-backdrop {
+    .swal2-container {
+      background-color: transparent !important;
+      pointer-events: none;
+
+      .swal2-popup {
+        pointer-events: all;
+      }
+
+      .swal2-modal {
+        box-shadow: 0 0 10px $swal2-backdrop;
+      }
+    }
+  }
+
+  @media print {
+    &.swal2-shown {
+      @include not(".swal2-no-backdrop", ".swal2-toast-shown") {
+        overflow-y: scroll !important;
+
+        > [aria-hidden="true"] {
+          display: none;
+        }
+
+        .swal2-container {
+          position: static !important;
+        }
+      }
+    }
+  }
+}