definicao de layout

public/assets/scss/theme/_timeliny.scss

@@ -0,0 +1,200 @@
+/**=====================
+    43. Timeline 2 CSS Start
+==========================**/
+@import "../theme/variables";
+$timeliny_classname: "timeliny";
+$timeliny_dots-radius: 0.6rem;
+$timeliny_global-width: 100%;
+$timeliny_max-inner-width: 1024px;
+$timeliny_spacings: 5rem;
+$timeliny_transition-time: 0.35s;
+$timeliny_vertical-line-pos: 32%;
+$timeliny_small-breakdown: 768px;
+.#{$timeliny_classname} {
+  position: relative;
+  display: block;
+  padding: $timeliny_spacings * 2 0;
+  width: $timeliny_global-width;
+  border-top: 1px solid lighten($light-gray, 3%);
+  border-bottom: 1px solid lighten($light-gray, 3%);
+  text-rendering: optimizeLegibility;
+  color: $light-gray;
+  opacity: 0;
+  overflow: hidden;
+  cursor: move;
+  &.loaded {
+    opacity: 1;
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    // background-color: $dark-gray;
+    background-color: rgba($primary-color, 0.08);
+    width: 100%;
+    height: 1px;
+    top: 50%;
+    left: 0;
+  }
+  .#{$timeliny_classname}-wrapper {
+    display: block;
+    margin: auto;
+    width: 100%;
+    max-width: $timeliny_max-inner-width;
+  }
+  .#{$timeliny_classname}-dot {
+    -webkit-transition: all $timeliny_transition-time ease-in-out;
+    -moz-transition: all $timeliny_transition-time ease-in-out;
+    transition: all $timeliny_transition-time ease-in-out;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin-top: -$timeliny_dots-radius;
+    width: $timeliny_dots-radius * 2;
+    height: $timeliny_dots-radius * 2;
+    border-radius: 50%;
+    border: 1px solid $dark-gray;
+    background-color: $white;
+    &::before {
+      -webkit-transition: all $timeliny_transition-time ease-in-out;
+      -moz-transition: all $timeliny_transition-time ease-in-out;
+      transition: all $timeliny_transition-time ease-in-out;
+      content: attr(data-year);
+      display: block;
+      position: absolute;
+      top: -$timeliny_spacings;
+      left: calc($timeliny_spacings / 4);
+      color: $dark-color;
+      font-family: $font-rubik, $font-serif;
+      font-size: 22px;
+    }
+    &::after {
+      -webkit-transition: all $timeliny_transition-time ease-in-out;
+      -moz-transition: all $timeliny_transition-time ease-in-out;
+      transition: all $timeliny_transition-time ease-in-out;
+      -ms-transform: translateY(-50%);
+      -webkit-transform: translateY(-50%);
+      transform: translateY(-50%);
+      content: attr(data-text);
+      display: block;
+      position: absolute;
+      width: calc($timeliny_max-inner-width / 4);
+      top: $timeliny_spacings + $timeliny_dots-radius;
+      left: calc($timeliny_spacings / 4);
+      color: $light-gray;
+      opacity: 0;
+      font-size: 0.9em;
+      @media (min-width: $timeliny_small-breakdown) {
+        width: calc($timeliny_max-inner-width / 3);
+      }
+    }
+  }
+  .#{$timeliny_classname}-timeline {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: table;
+    width: 100%;
+    z-index: 5;
+    .#{$timeliny_classname}-timeblock {
+      display: table-cell;
+      position: relative;
+      &.active {
+        .#{$timeliny_classname}-dot {
+          border-color: $primary-color;
+          background-color: $primary-color;
+          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.33);
+          &::before {
+            color: $dark-color;
+          }
+          &::after {
+            color: $dark-color;
+            opacity: 1;
+            background-color: $light-background;
+            border: 1px solid $light-gray;
+            padding: 10px;
+            border-radius: 5px;
+          }
+        }
+      }
+      &.inactive {
+        .#{$timeliny_classname}-dot {
+          cursor: move;
+
+          &::before {
+            color: $light-gray;
+          }
+        }
+      }
+      &:not(.inactive):not(.active) {
+        .#{$timeliny_classname}-dot:hover {
+          border-color: $light-gray;
+          background-color: $primary-color;
+          &::before {
+            color: $dark-color;
+          }
+        }
+      }
+      .#{$timeliny_classname}-dot:hover {
+        &::after {
+          color: $dark-color;
+          opacity: 1;
+          background-color: $white;
+          border: 1px solid $light-semi-gray;
+          padding: 10px;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+
+  .#{$timeliny_classname}-vertical-line {
+    position: absolute;
+    display: block;
+    z-index: 1;
+    left: calc($timeliny_vertical-line-pos / 2);
+    top: 0;
+    width: 1px;
+    height: 100%;
+    background-color: $primary-color;
+
+    @media (min-width: $timeliny_small-breakdown) {
+      left: $timeliny_vertical-line-pos;
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -7px;
+      width: 0;
+      height: 0;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid $primary-color;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: -7px;
+      width: 0;
+      height: 0;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-bottom: 8px solid $primary-color;
+    }
+  }
+}
+
+.timeliny {
+  .timeliny-timeline {
+    .timeliny-timeblock.active {
+      .timeliny-dot::after {
+        background-color: #f7f6ff;
+      }
+    }
+  }
+}
+/**=====================
+     43. Timeline 2 CSS Ends
+==========================**/