valtech-components 2.0.687 → 2.0.689

package/src/lib/components/organisms/article/article.component.scss

@@ -0,0 +1,433 @@
+// Variables de espaciado
+$spacing-none: 0;
+$spacing-small: 0.5rem;
+$spacing-medium: 1rem;
+$spacing-large: 1.5rem;
+$spacing-xlarge: 2.5rem;
+
+// Colores
+$color-border: #e1e5e9;
+$color-code-bg: #f6f8fa;
+$color-code-bg-dark: #161b22;
+$color-code-text: #24292e;
+$color-code-text-dark: #f0f6fc;
+$color-quote-border: #0969da;
+$color-separator: #d0d7de;
+
+.val-article {
+  width: 100%;
+  margin: 0 auto;
+  line-height: 1.6;
+  color: var(--ion-color-dark, #1f2937);
+  display: block; // Asegurar que sea un elemento de bloque
+  position: static; // Asegurar posicionamiento normal
+
+  &--centered {
+    margin: 0 auto;
+  }
+
+  &--light {
+    background-color: var(--ion-color-light, #ffffff);
+    color: var(--ion-color-dark, #1f2937);
+  }
+
+  &--dark {
+    background-color: var(--ion-color-dark, #1f2937);
+    color: var(--ion-color-light, #ffffff);
+  }
+
+  // === ELEMENTO BASE ===
+  &__element {
+    position: relative;
+
+    &:last-child {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  // === ESPACIADO ===
+  &__spacing-top {
+    &--none {
+      margin-top: $spacing-none !important;
+    }
+    &--small {
+      margin-top: $spacing-small !important;
+    }
+    &--medium {
+      margin-top: $spacing-medium !important;
+    }
+    &--large {
+      margin-top: $spacing-large !important;
+    }
+    &--xlarge {
+      margin-top: $spacing-xlarge !important;
+    }
+  }
+
+  &__spacing-bottom {
+    &--none {
+      margin-bottom: $spacing-none !important;
+    }
+    &--small {
+      margin-bottom: $spacing-small !important;
+    }
+    &--medium {
+      margin-bottom: $spacing-medium !important;
+    }
+    &--large {
+      margin-bottom: $spacing-large !important;
+    }
+    &--xlarge {
+      margin-bottom: $spacing-xlarge !important;
+    }
+  }
+
+  &__spacing-horizontal {
+    &--none {
+      margin-left: $spacing-none !important;
+      margin-right: $spacing-none !important;
+    }
+    &--small {
+      margin-left: $spacing-small !important;
+      margin-right: $spacing-small !important;
+    }
+    &--medium {
+      margin-left: $spacing-medium !important;
+      margin-right: $spacing-medium !important;
+    }
+    &--large {
+      margin-left: $spacing-large !important;
+      margin-right: $spacing-large !important;
+    }
+    &--xlarge {
+      margin-left: $spacing-xlarge !important;
+      margin-right: $spacing-xlarge !important;
+    }
+  }
+
+  // === CITAS ===
+  &__quote {
+    border-left: 4px solid $color-quote-border;
+    padding: $spacing-medium;
+    background-color: var(--ion-color-light-shade, #f8f9fa);
+    border-radius: 0 8px 8px 0;
+    font-style: italic;
+
+    &-content {
+      margin-bottom: $spacing-small;
+      font-size: 1.1em;
+    }
+
+    &-author {
+      font-size: 0.9em;
+      color: var(--ion-color-medium, #6c757d);
+      font-style: normal;
+      font-weight: 500;
+      text-align: right;
+    }
+
+    &-source {
+      font-weight: normal;
+      opacity: 0.8;
+    }
+  }
+
+  // === TEXTO DESTACADO ===
+  &__highlight {
+    padding: $spacing-medium;
+    background-color: var(--ion-color-warning-tint, #fff3cd);
+    border: 1px solid var(--ion-color-warning, #ffc107);
+    border-radius: 4px;
+
+    &--rounded {
+      border-radius: 12px;
+    }
+  }
+
+  // === CÓDIGO ===
+  &__code {
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid $color-border;
+
+    &-language {
+      background-color: var(--ion-color-medium-tint, #f8f9fa);
+      padding: $spacing-small $spacing-medium;
+      font-size: 0.875em;
+      font-weight: 500;
+      color: var(--ion-color-dark, #495057);
+      border-bottom: 1px solid $color-border;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    &-content {
+      background-color: $color-code-bg;
+      color: $color-code-text;
+      padding: $spacing-medium;
+      margin: 0;
+      overflow-x: auto;
+      font-family: 'SFMono-Regular', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New',
+        monospace;
+      font-size: 0.875em;
+      line-height: 1.5;
+
+      code {
+        background: none;
+        padding: 0;
+        font-size: inherit;
+        color: inherit;
+      }
+
+      &--dark {
+        background-color: $color-code-bg-dark;
+        color: $color-code-text-dark;
+      }
+    }
+  }
+
+  // === LISTAS ===
+  &__list {
+    padding-left: $spacing-large;
+
+    &--ordered {
+      list-style-type: decimal;
+    }
+
+    &-item {
+      margin-bottom: $spacing-small;
+      line-height: 1.6;
+      position: relative;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &-check {
+      color: var(--ion-color-success, #28a745);
+      font-weight: bold;
+      margin-right: $spacing-small;
+      position: absolute;
+      left: -$spacing-large;
+    }
+  }
+
+  // Listas sin viñetas para checklist
+  .val-article__list:has(.val-article__list-check) {
+    list-style: none;
+    padding-left: $spacing-medium;
+  }
+
+  // === BOTONES ===
+  &__button-container {
+    &--left {
+      text-align: left;
+    }
+
+    &--center {
+      text-align: center;
+    }
+
+    &--right {
+      text-align: right;
+    }
+  }
+
+  // === SEPARADORES ===
+  &__separator {
+    text-align: center;
+
+    &-line {
+      border: none;
+      height: 1px;
+      background-color: $color-separator;
+      margin: 0;
+
+      &--thin {
+        height: 1px;
+      }
+
+      &--thick {
+        height: 3px;
+      }
+    }
+
+    &-dots {
+      color: $color-separator;
+      font-size: 1.5em;
+      letter-spacing: 0.5em;
+      user-select: none;
+    }
+
+    &-space {
+      height: 0; // El espacio viene de las clases de spacing
+    }
+  }
+
+  // === IMÁGENES ===
+  &__image {
+    text-align: center;
+
+    &--left {
+      text-align: left;
+    }
+
+    &--center {
+      text-align: center;
+    }
+
+    &--right {
+      text-align: right;
+    }
+
+    &-content {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      transition: transform 0.2s ease;
+
+      &:hover {
+        transform: scale(1.02);
+      }
+
+      &--rounded {
+        border-radius: 12px;
+      }
+    }
+
+    &-caption {
+      margin-top: $spacing-small;
+      font-size: 0.875em;
+      color: var(--ion-color-medium, #6c757d);
+      font-style: italic;
+      text-align: center;
+    }
+  }
+
+  // === VIDEOS ===
+  &__video {
+    text-align: center;
+
+    &-content {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    &-title {
+      margin-top: $spacing-small;
+      font-size: 0.9em;
+      color: var(--ion-color-medium, #6c757d);
+      font-weight: 500;
+    }
+  }
+
+  // === CONTENIDO PERSONALIZADO ===
+  &__custom {
+    // Asegurar que el contenido personalizado no rompa el layout
+    * {
+      max-width: 100%;
+    }
+  }
+}
+
+// === RESPONSIVE DESIGN ===
+@media (max-width: 768px) {
+  .val-article {
+    &__code {
+      &-content {
+        font-size: 0.8em;
+        padding: $spacing-small;
+      }
+    }
+
+    &__image {
+      &-content {
+        &:hover {
+          transform: none; // Disable hover effects on mobile
+        }
+      }
+    }
+
+    &__quote {
+      padding: $spacing-small;
+    }
+
+    &__highlight {
+      padding: $spacing-small;
+    }
+  }
+}
+
+// === MODO OSCURO ===
+@media (prefers-color-scheme: dark) {
+  .val-article {
+    &--auto {
+      background-color: var(--ion-color-dark, #1f2937);
+      color: var(--ion-color-light, #ffffff);
+
+      .val-article__quote {
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+
+      .val-article__highlight {
+        background-color: rgba(255, 193, 7, 0.1);
+        border-color: var(--ion-color-warning-shade, #e0a800);
+      }
+
+      .val-article__code-content {
+        background-color: $color-code-bg-dark;
+        color: $color-code-text-dark;
+      }
+    }
+  }
+}
+
+// === ANIMACIONES ===
+.val-article__element {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// === ACCESIBILIDAD ===
+.val-article {
+  // Mejora el contraste en modo de alto contraste
+  @media (prefers-contrast: high) {
+    &__separator-line {
+      background-color: currentColor;
+      opacity: 0.5;
+    }
+
+    &__quote {
+      border-left-width: 6px;
+    }
+  }
+
+  // Respeta las preferencias de movimiento reducido
+  @media (prefers-reduced-motion: reduce) {
+    .val-article__element {
+      animation: none;
+    }
+
+    &__image-content {
+      transition: none;
+
+      &:hover {
+        transform: none;
+      }
+    }
+  }
+}