@up_si_vale/sivale-design-styles 1.0.6 → 1.0.8

package/dist/scss/_product-slide.scss

@@ -0,0 +1,52 @@
+.sv-container-product-slide {
+  width: initial;
+  height: 460px;
+  position: relative;
+}
+
+/* Imagen de fondo */
+.sv-img-bg-product-slide {
+  max-height: 100%;
+  width: auto;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+}
+
+/* Imagen principal en primer plano */
+.sv-img-asset-product-slide {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 95%;
+  max-height: 100%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+/* Tarjeta flotante encima */
+.sv-img-card-product-slide {
+  position: absolute;
+  top: 50px;
+  left: 50%;
+  width: 50%;
+  max-height: 100%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+/* Tarjeta con transición */
+.sv-img-card-product-slide {
+  position: absolute;
+  top: 50px;
+  left: 50%;
+  width: 50%;
+  max-height: 100%;
+  transform: translateX(-50%);
+  z-index: 1;
+  transition: transform 0.3s ease;
+}
+
+.sv-container-product-slide:hover .sv-img-card-product-slide {
+  transform: translateX(-50%) translateY(-15px);
+}

package/dist/scss/_select-native.scss

@@ -0,0 +1,102 @@
+// ============================================================================
+// NATIVE SELECT - HTML select element styling
+// ============================================================================
+
+.select-wrapper {
+  position: relative;
+  margin-bottom: 6px;
+  padding: 0 4px;
+
+  label {
+    display: block;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    color: #585D61;
+    margin-bottom: 0.5rem;
+  }
+
+  .input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    i[class^="icon-"],
+    i[iconname] {
+      position: absolute;
+      left: 12px;
+      z-index: 1;
+      color: #969A9C;
+      font-size: 1em;
+      pointer-events: none;
+    }
+  }
+
+  .select-field {
+    width: 100%;
+    height: 44px;
+    padding: 0 2.5rem 0 1rem;
+    border: 1px solid #EAECF5;
+    box-shadow: 0 1px 2px 0 #A1AFEC66;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    color: #1A1D20;
+    background-color: white;
+    appearance: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    outline: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23969A9C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 500;
+
+    &:focus {
+      border-color: #FBD399;
+      box-shadow: 0 0 0 4px #FFE8C8, 0 1px 2px 0 #0A0D120D;
+    }
+
+    &:hover {
+      border-color: #FBD399;
+    }
+
+    // Hide default arrow in IE
+    &::-ms-expand {
+      display: none;
+    }
+
+    // Style for option elements
+    option {
+      padding: 0.75rem 1rem;
+      font-family: 'Quicksand', sans-serif;
+      font-weight: 500;
+      font-size: 14px;
+      color: #1A1D20;
+      background-color: white;
+
+      &:hover {
+        background: linear-gradient(90deg, #FFF9F0 0%, #FFFBF7 100%);
+      }
+
+      &:checked,
+      &:focus {
+        background: linear-gradient(90deg, #FFF4E0 0%, #FFF9F0 100%);
+        color: #F26D00;
+        font-weight: 600;
+      }
+
+      &:disabled {
+        color: #969A9C;
+        background-color: #F8F9FC;
+        cursor: not-allowed;
+      }
+
+      // Empty/placeholder option
+      &[value=""] {
+        color: #969A9C;
+        font-style: italic;
+      }
+    }
+  }
+}

package/dist/scss/_select.scss

@@ -0,0 +1,282 @@
+// ============================================================================
+// CUSTOM SELECT - Dropdown component with CDK Overlay (Angular)
+// ============================================================================
+// Note: This is for custom select components with overlay dropdowns.
+// For native HTML select styling, see _select-native.scss
+
+.select-wrapper {
+  width: 100%;
+  margin-bottom: 6px;
+  padding: 0 4px;
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    color: #585D61;
+  }
+}
+
+.select-container {
+  position: relative;
+  width: 100%;
+}
+
+.select-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border: 1px solid #EAECF5;
+  box-shadow: 0 1px 2px 0 #A1AFEC66;
+  border-radius: 8px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-height: 44px;
+
+  &:hover:not(.disabled) {
+    border-color: #FBD399;
+  }
+
+  &.open {
+    border-color: #FBD399;
+    box-shadow: 0 0 0 4px #FFE8C8, 0 1px 2px 0 #0A0D120D;
+  }
+
+  &.disabled {
+    background: #f5f5f5;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &.error {
+    border-color: #DC3545 !important;
+
+    &.open {
+      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
+    }
+  }
+
+  .select-placeholder {
+    font-family: 'Quicksand', sans-serif;
+    font-size: 14px;
+    color: #969A9C;
+  }
+
+  .select-selected {
+    font-family: 'Quicksand', sans-serif;
+    font-size: 14px;
+    color: #1A1D20;
+    font-weight: 500;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .select-arrow {
+    color: #969A9C;
+    transition: transform 0.3s ease;
+    margin-left: 0.5rem;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.select-dropdown {
+  margin-top: 8px;
+  background: white;
+  border: 1px solid #E9EAEB;
+  border-radius: 8px;
+  box-shadow: 0 10px 16px -4px #EDEFFB;
+  max-height: 320px;
+  width: 100%;
+  overflow-y: auto;
+  animation: dropdownSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+
+  // Custom scrollbar
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 0 12px 12px 0;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D5D7D8;
+    border-radius: 4px;
+
+    &:hover {
+      background: #969A9C;
+    }
+  }
+}
+
+@keyframes dropdownSlide {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.select-option {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 1.25rem;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid #F1F2F4;
+  gap: 1rem;
+  margin: 0 !important;
+  position: relative;
+
+  &:first-child {
+    border-radius: 12px 12px 0 0;
+  }
+
+  &:last-child {
+    border-bottom: none;
+    border-radius: 0 0 12px 12px;
+  }
+
+  &:hover:not(.disabled) {
+    background: linear-gradient(90deg, #FFF9F0 0%, #FFFEF9 100%);
+
+    &::before {
+      opacity: 0.5;
+    }
+  }
+
+  &.selected {
+    background: linear-gradient(90deg, #FFF4E0 0%, #FFF9F0 100%);
+    font-weight: 600;
+
+    &::before {
+      opacity: 1;
+    }
+
+    .option-text {
+      color: #F26D00;
+      font-weight: 600;
+    }
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: #F8F9FC;
+
+    &:hover {
+      transform: none;
+      background: #F8F9FC;
+    }
+  }
+
+  // Placeholder option special styling
+  &.select-option-placeholder {
+    font-style: italic;
+    border-bottom: 2px solid #E9EAEB;
+
+    .option-text {
+      color: #969A9C;
+      font-weight: 400;
+    }
+
+    &:hover:not(.disabled) {
+      background: linear-gradient(90deg, #F8F9FC 0%, #FCFCFD 100%);
+    }
+
+    &.selected {
+      background: linear-gradient(90deg, #E9EAEB 0%, #F1F2F4 100%);
+
+      .option-text {
+        color: #585D61;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .option-text {
+    flex: 1;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    color: #1A1D20;
+    line-height: 1.5;
+    transition: color 0.2s ease, font-weight 0.2s ease;
+  }
+
+  .check-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: checkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+}
+
+@keyframes checkPop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// Unstyled mode - for composite components
+.select-wrapper--unstyled {
+  margin-bottom: 0 !important;
+
+  .select-container--unstyled {
+    background: transparent !important;
+  }
+
+  .select-header--unstyled {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    padding: 0.75rem 0.5rem;
+    height: auto;
+
+    &:hover,
+    &:focus,
+    &.open {
+      border: none !important;
+      box-shadow: none !important;
+      background: transparent !important;
+    }
+
+    &.error {
+      border: none !important;
+    }
+  }
+}
+
+// CDK Overlay styles
+.cdk-overlay-transparent-backdrop {
+  background: transparent;
+}
+
+.select-overlay-pane {
+  z-index: 10000 !important;
+}

package/dist/scss/_snackbar.scss

@@ -0,0 +1,201 @@
+.snackbar-container {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 644px;
+  pointer-events: none;
+
+  &--top-right {
+    top: 24px;
+    right: 24px;
+  }
+
+  &--top-left {
+    top: 24px;
+    left: 24px;
+  }
+
+  &--top-center {
+    top: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &--bottom-right {
+    bottom: 24px;
+    right: 24px;
+  }
+
+  &--bottom-left {
+    bottom: 24px;
+    left: 24px;
+  }
+
+  &--bottom-center {
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  @media (max-width: 640px) {
+    left: 16px !important;
+    right: 16px !important;
+    max-width: none;
+    transform: none !important;
+
+    &--top-right,
+    &--top-left,
+    &--top-center {
+      top: 16px;
+    }
+
+    &--bottom-right,
+    &--bottom-left,
+    &--bottom-center {
+      bottom: 16px;
+    }
+  }
+}
+
+.snackbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: #ffffff;
+  pointer-events: auto;
+  min-width: 300px;
+  max-width: 644px;
+  animation: slideIn 300ms ease-out;
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 640px) {
+    min-width: auto;
+    max-width: none;
+  }
+
+  &--success {
+    background: #f0fdf4;
+    border: 1px solid #22c55e;
+
+    .snackbar__icon {
+      color: #22c55e;
+    }
+  }
+
+  &--error {
+    background: #FEF3F2;
+    border: 1px solid #F04438;
+
+    .snackbar__icon {
+      color: #F04438;
+    }
+  }
+
+  &--warning {
+    background: #fffbeb;
+    border: 1px solid #f59e0b;
+
+    .snackbar__icon {
+      color: #f59e0b;
+    }
+  }
+
+  &--info {
+    background: #eff6ff;
+    border: 1px solid #3b82f6;
+
+    .snackbar__icon {
+      color: #3b82f6;
+    }
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__message {
+    margin: 0;
+    line-height: 20px;
+    word-wrap: break-word;
+    font-family: Quicksand, sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    color: #2E353A;
+  }
+
+  &__action {
+    flex-shrink: 0;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &__close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: #2E353A;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+      color: #1f2937;
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}

package/dist/scss/_typography.scss

@@ -0,0 +1,73 @@
+@use "palette" as *;
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Quicksand:wght@400;500;700&display=swap');
+
+$font-dm-sans: 'DM Sans', sans-serif;
+$font-quicksand: 'Quicksand', sans-serif;
+
+body {
+  font-family: $font-dm-sans !important;
+  font-size: 1rem !important;
+  line-height: 1.6 !important;
+  background-color: var(--bg-color-lp) !important;
+  color: var(--text-color-lp) !important;
+}
+
+p {
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: $font-quicksand !important;
+}
+
+.sv-title-hero {
+  font-weight: 700;
+  font-size: 60px;
+  line-height: 72px;
+  letter-spacing: -0.06em;
+  color: var(--text-color-title);
+  overflow-wrap: break-word;
+  word-break: break-word;      /* Versión más agresiva */
+  text-overflow: ellipsis;     /* Si usas truncate con overflow hidden */
+  white-space: normal;         /* Permite que el texto baje a otra línea */
+  .sv-title-orange {
+    color: $orange-400;
+  }
+}
+
+.sv-title-section {
+  font-weight: 700;
+  font-size: 48px;
+  line-height: 48px;
+  letter-spacing: -0.06em;
+  color: var(--text-color-title);
+  overflow-wrap: break-word;
+  word-break: break-word;      /* Versión más agresiva */
+  text-overflow: ellipsis;     /* Si usas truncate con overflow hidden */
+  white-space: normal;         /* Permite que el texto baje a otra línea */
+  .sv-title-orange {
+    color: $orange-400;
+  }
+}
+
+// Ejemplo para distintos usos
+.heading-primary {
+  font-family: $font-dm-sans;
+  font-weight: 700;
+  font-size: 2rem;
+}
+
+.heading-secondary {
+  font-family: $font-quicksand;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.label {
+  font-family: $font-quicksand;
+  font-size: 0.875rem;
+}
+
+.text-xs    { font-size: 0.75rem; } /* 12px */
+.text-sm    { font-size: 0.875rem; } /* 14px */
+.text-base  { font-size: 1rem; } /* 16px */
+.text-lg    { font-size: 1.125rem; } /* 18px */
+.text-xl    { font-size: 1.25rem; } /* 20px */

package/dist/scss/_variables.dark.scss

@@ -0,0 +1,19 @@
+@use "palette" as *;
+
+[data-theme="dark"] {
+  //? BTN SECONDARY
+  --bg-btn-secondary: transparent;
+  --border-btn-secondary: #{$gray-25};
+  --color-btn-secondary: #{$gray-25};
+
+  --border-btn-secondary-hover: #{$orange-400};
+  --color-btn-secondary-hover: #{$orange-400};
+
+  --bg-btn-secondary-active: #{$orange-50};
+  --border-btn-secondary-active: #{$orange-100};
+  --color-btn-secondary-active: #{$orange-400};
+
+  --bg-btn-secondary-disabled: transparent;
+  --border-btn-secondary-disabled: #{$gray-800};
+  --color-btn-secondary-disabled: #{$gray-800};
+}