Aikajana elementti summary blockista

Add a Summary Block (List Design). To better understand the concepts applied on this snippet, please check-out our Module 5 Pseudo Elements.


/// MOBILE


SECTION-SELECTOR {

@media screen and (max-width:767px) {
  .sqs-block-summary-v2 {
     margin-left:17px;
  }
  .sqs-block-summary-v2::before {
  content:"";
  position:absolute;
  left:0%;
  height:100%;
  width:1px;
  background:red;
 
}
  
  .summary-item::before {
  content:"";
  position:absolute;
  height:10px;
  width:10px;
  background:red;
  border-radius:50%;
  left:-5px;
    border:1px solid black;
}
  
}

}




/// DESKTOP

SECTION-SELECTOR {

@media screen and (min-width:768px) {
.summary-item-list::before {
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  height:100%;
  width:2px;
  background:#9D503E;
 
}

.summary-item:nth-child(odd)::before {
  content:"";
  position:absolute;
  height:10px;
  width:10px;
  background:#4E5851;
  border-radius:50%;
  left:-22px;
    border:1px solid #9D503E;
}

.summary-item:nth-child(even)::after {
  content:"";
  position:absolute;
  height:10px;
  width:10px;
  background:#4E5851;
  border-radius:50%;
  right:-7px;
  border:1px solid #9D503E;
}

.sqs-block:last-child {
  padding-bottom:0px !important;
}

.summary-item:nth-child(odd) {
position:relative;
  left:50%;
  width:50%;
  margin-left:17px;
 
}

.summary-item:nth-child(even) {
  display:flex;
  flex-direction:row-reverse;
  position:relative;
  width:50%;
  
  .summary-content {
    text-align:right !important;
  }
  
  .summary-title, .summary-excerpt p, .summary-metadata {
    text-align:right !important;
    margin-right:17px;
    
  }
}
  

}

}