Update: Base para Andractiv

2025-12-11 09:09:57 -06:00
parent 701ffc78c6
commit cb7ef24da8
296 changed files with 47388 additions and 0 deletions
@@ -0,0 +1,195 @@
+
+// Definición de colores principales
+:root {
+  --color1: #47545d;
+  --color2: #c9d0d3;
+}
+
+// Estilos generales del timeline
+.main-timeline {
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  .timeline {
+    border-right: 10px solid var(--color1);
+    width: 50%;
+    padding: 10px 20px 10px 0;
+    box-shadow: 10px 0 var(--color2);
+    float: left;
+    min-height: 160px;
+
+    &:last-child {
+      min-height: 130px;
+    }
+
+    &-content {
+      text-align: center;
+      display: block;
+      position: relative;
+      border-radius: 10px 10px;
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:before,
+      &:after {
+        content: "";
+        background: var(--color2);
+        width: 80px;
+        height: 3px;
+        transform: translateY(-50%);
+        position: absolute;
+        top: 50%;
+        right: -120px;
+      }
+
+      &:after {
+        width: 15px;
+        height: 15px;
+        border-radius: 50%;
+        right: -125px;
+      }
+    }
+  }
+
+  .timeline-year {
+    border-radius: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+    right: -300px;
+
+    img {
+      max-width: 120px;
+    }
+  }
+
+  .title {
+    color: #fff;
+    background: var(--color2);
+    font-size: 22px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    padding: 10px 10px 9px;
+    margin: 0;
+    border-radius: 10px 10px 0 0;
+  }
+
+  .description {
+    letter-spacing: 1px;
+    padding: 10px;
+    border-radius: 10px;
+    margin: 0;
+  }
+
+  .timeline:nth-child(even) {
+    float: right;
+    border: none;
+    border-left: 10px solid var(--color2);
+    box-shadow: -10px 0 var(--color1);
+    padding: 10px 0 10px 20px;
+    margin: 0 0 0 10px;
+
+    .timeline-content {
+      &:before {
+        right: auto;
+        left: -120px;
+      }
+
+      &:after {
+        right: auto;
+        left: -125px;
+      }
+    }
+
+    .timeline-year {
+      right: auto;
+      left: -300px;
+    }
+  }
+}
+
+// Colores dinámicos según el índice
+@for $i from 1 through 5 {
+  .main-timeline .timeline:nth-child(#{$i}) {
+    --color1: var(--bs-#{nth(success naranja-1 vino secondary naranja-2 , $i)});
+    --color2: color-mix(in srgb, var(--color1) 80%, black);
+  }
+}
+
+// Estilos responsive para móviles
+@media screen and (max-width: 767px) {
+  .main-timeline {
+    .timeline,
+    .timeline:nth-child(even) {
+      width: 100%;
+      padding: 100px 0 20px 20px;
+      margin: 0 0 0 10px;
+      box-shadow: -10px 0 var(--color2);
+      border: none;
+      border-left: 10px solid var(--color1);
+      float: none;
+    }
+
+    .timeline-content {
+      &:before,
+      &:after {
+        top: -50px;
+        left: -20px;
+        width: 50px;
+      }
+
+      &:after {
+        width: 15px;
+        right: auto;
+        left: 15px;
+      }
+    }
+
+    .timeline-year,
+    .timeline:nth-child(even) .timeline-year {
+      transform: translateX(-50%);
+      top: -85px;
+      left: 50%;
+      right: auto;
+      position: relative;
+    }
+
+    .description {
+      margin-top: -73px;
+    }
+  }
+
+    .timeline:nth-child(even) {
+    float: right;
+    border: none;
+    border-left: 10px solid var(--color2);
+    box-shadow: -10px 0 var(--color1);
+    padding: 10px 0 10px 20px;
+    margin: 0 0 0 10px;
+
+    .timeline-content {
+      &:before {
+        right: auto;
+        left: -20px !important;
+      }
+
+      &:after {
+        width: 15px !important;
+        right: auto !important;
+        left: 15px !important;
+      }
+    }
+
+    .timeline-year {
+      right: auto;
+      left: -300px;
+    }
+  }
+
+}