src/components/timeline.css - master - Ilya_Betyaev/hackvlg

src/components/timeline.css
198 строк4 KB
Ilya_Betyaev
24 июн 2024, 11:54
24 июн 2024, 11:54eab064a
.timeline-max-width {
    height: auto;
    display: flex;
    position: relative;
    align-items: flex-start;
    flex-direction: row;
  }
  .timeline-container01 {
    gap: var(--dl-space-space-twounits);
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .timeline-text01 {
    text-align: left;
  }
  .timeline-timeline-container {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .timeline-step1 {
    display: flex;
    position: relative;
    justify-content: center;
  }
  .timeline-container02 {
    flex: 1;
    left: var(--dl-space-space-halfunit);
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .timeline-container03 {
    width: 12px;
    height: 12px;
    margin: var(--dl-space-space-halfunit);
    border-radius: var(--dl-radius-radius-round);
    background-color: #000000;
  }
  .timeline-progress0 {
    width: auto;
    border: 2px dashed rgba(120, 120, 120, 0.4);
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    background-color: #000000;
  }
  .timeline-container04 {
    gap: var(--dl-space-space-unit);
    display: flex;
    align-items: flex-start;
    padding-left: var(--dl-space-space-threeunits);
    flex-direction: column;
    padding-bottom: var(--dl-space-space-unit);
    justify-content: flex-start;
  }
  .timeline-text03 {
    text-align: left;
  }
  .timeline-step2 {
    width: auto;
    height: auto;
    display: flex;
    position: relative;
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
  }
  .timeline-container05 {
    flex: 1;
    left: var(--dl-space-space-halfunit);
    width: auto;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .timeline-container06 {
    width: 12px;
    height: 12px;
    margin: var(--dl-space-space-halfunit);
    border-radius: var(--dl-radius-radius-round);
    background-color: #000000;
  }
  .timeline-progress01 {
    width: auto;
    border: 2px dashed rgba(120, 120, 120, 0.4);
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    background-color: #000000;
  }
  .timeline-container07 {
    gap: var(--dl-space-space-unit);
    width: auto;
    display: flex;
    align-items: flex-start;
    padding-left: var(--dl-space-space-threeunits);
    flex-direction: column;
    padding-bottom: var(--dl-space-space-unit);
    justify-content: flex-start;
  }
  .timeline-text06 {
    text-align: left;
  }
  .timeline-step3 {
    width: auto;
    height: auto;
    display: flex;
    position: relative;
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
  }
  .timeline-container08 {
    flex: 1;
    left: var(--dl-space-space-halfunit);
    width: auto;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .timeline-container09 {
    width: 12px;
    height: 12px;
    margin: var(--dl-space-space-halfunit);
    border-radius: var(--dl-radius-radius-round);
    background-color: #000000;
  }
  .timeline-progress02 {
    width: auto;
    border: 2px dashed rgba(120, 120, 120, 0.4);
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    background-color: #000000;
  }
  .timeline-container10 {
    gap: var(--dl-space-space-unit);
    width: auto;
    display: flex;
    align-items: flex-start;
    padding-left: var(--dl-space-space-threeunits);
    flex-direction: column;
    padding-bottom: var(--dl-space-space-unit);
    justify-content: flex-start;
  }
  .timeline-text09 {
    text-align: left;
  }
  
  @media(max-width: 991px) {
    .timeline-max-width {
      gap: var(--dl-space-space-twounits);
    }
  }
  @media(max-width: 767px) {
    .timeline-max-width {
      flex-direction: column;
    }
    .timeline-text01 {
      padding-left: 0px;
      padding-right: 0px;
    }
    .timeline-text03 {
      text-align: left;
    }
    .timeline-text06 {
      text-align: left;
    }
    .timeline-text09 {
      text-align: left;
    }
  }
  @media(max-width: 479px) {
    .timeline-container01 {
      gap: var(--dl-space-space-unit);
    }
    .timeline-timeline-container {
      width: 100%;
    }
  }