Vertikale Verbindungslinien mit CSS

-1

Ich möchte eine verbindende vertikale Linie zwischen jedem Kreis haben. Die "Sections" sind dynamisch in vertikaler Höhe.Vertikale Verbindungslinien mit CSS

ist hier die aktuelle SASS:

@import '../sass/sa.common'; 
$color: $sa-gray-4; 
$colorActive: $sa-green; 
$colorComplete: $sa-green; 
.progress-indicator { 
    margin-bottom: 50px; 
    margin-top: 75px; 
    .step { 
    margin-top: 40px; 
    content: ""; 
    display: table; 
    clear: both; 
    position: relative; 
    &:first-child { 
     margin-top: 0; 
    } 
    &:last-child { 
     div { 
     &.circle { 
      &:before { 
      display: none; 
      } 
     } 
     } 
    } 
    &.active { 
     div { 
     color: $colorActive; 
     &.circle { 
      border-color: $colorActive; 
     } 
     a { 
      color: $colorActive; 
     } 
     } 
    } 
    &.complete { 
     div { 
     color: $colorComplete; 
     &.circle { 
      border-color: $colorComplete; 
      &.filled { 
      background-color: $colorComplete; 
      color: $sa-white; 
      } 
     } 
     } 
    } 
    div { 
     color: $color; 
     display: table-cell; 
     float: left; 
     padding-top: 2px; 
     font-size: 16px; 
     font-weight: bold; 
     vertical-align: middle; 
     &.circle { 
     height: 30px; 
     width: 30px; 
     text-align: center; 
     border: 2px solid $color; 
     border-radius: 50%; 
     &:before { 
      content: ""; 
      position: absolute; 
      z-index: 1; 
      margin-top: 26px; 
      left: 13px; 
      border: 1px solid $sa-gray-4; 
      height: 125%; 
     } 
     } 
     &.text { 
     padding-left: 10px; 
     padding-top: 5px; 
     ul { 
      margin: 0; 
      margin-top: 15px; 
      padding: 0; 
      list-style-type: none; 
      li { 
      a { 
       display: block; 
       margin-top: 5px; 
       &:first-child { 
       margin-top: 0; 
       } 
      } 
      } 
     } 
     } 
    } 
    } 
}

CSS:

<style type="text/css">@charset "UTF-8"; 
.btn.btn-green { 
    background-color: #80b241; 
    color: #ffffff; } 
    .btn.btn-green:hover { 
    background-color: #88bc47; } 

.btn.btn-gray-1 { 
    background-color: #595959; 
    color: #e7e5e1; } 
    .btn.btn-gray-1:hover { 
    background-color: #666666; } 

.label.label-green { 
    background-color: #80b241; 
    color: #242424; } 

.label.label-gray-1 { 
    background-color: #595959; 
    color: #ffffff; } 

.btn.btn-green { 
    background-color: #80b241; 
    color: #ffffff; } 
    .btn.btn-green:hover { 
    background-color: #88bc47; } 

.btn.btn-gray-1 { 
    background-color: #595959; 
    color: #e7e5e1; } 
    .btn.btn-gray-1:hover { 
    background-color: #666666; } 

.label.label-green { 
    background-color: #80b241; 
    color: #242424; } 

.label.label-gray-1 { 
    background-color: #595959; 
    color: #ffffff; } 

.progress-indicator { 
    margin-bottom: 50px; 
    margin-top: 75px; } 
    .progress-indicator .step { 
    margin-top: 40px; 
    content: ""; 
    display: table; 
    clear: both; 
    position: relative; } 
    .progress-indicator .step:before { 
     content: ""; 
     position: absolute; 
     z-index: 1; 
     margin-top: 26px; 
     left: 13px; 
     border: 1px solid #ADABA6; 
     height: 125%; } 
    .progress-indicator .step:first-child { 
     margin-top: 0; } 
    .progress-indicator .step:last-child:before { 
     display: none; } 
    .progress-indicator .step.active div { 
     color: #80b241; } 
     .progress-indicator .step.active div.circle { 
     border-color: #80b241; } 
     .progress-indicator .step.active div a { 
     color: #80b241; } 
    .progress-indicator .step.complete div { 
     color: #80b241; } 
     .progress-indicator .step.complete div.circle { 
     border-color: #80b241; } 
     .progress-indicator .step.complete div.circle.filled { 
      background-color: #80b241; 
      color: #ffffff; } 
    .progress-indicator .step div { 
     color: #ADABA6; 
     display: table-cell; 
     float: left; 
     padding-top: 2px; 
     font-size: 16px; 
     font-weight: bold; 
     vertical-align: middle; } 
     .progress-indicator .step div.circle { 
     height: 30px; 
     width: 30px; 
     text-align: center; 
     border: 2px solid #ADABA6; 
     border-radius: 50%; } 
     .progress-indicator .step div.text { 
     padding-left: 10px; 
     padding-top: 5px; } 
     .progress-indicator .step div.text ul { 
      margin: 0; 
      margin-top: 15px; 
      padding: 0; 
      list-style-type: none; } 
      .progress-indicator .step div.text ul li a { 
      display: block; 
      margin-top: 5px; } 
      .progress-indicator .step div.text ul li a:first-child { 
       margin-top: 0; } 

.category-selector { 
    margin-top: 30px; } 
    .category-selector .header { 
    border-bottom: 2px solid #80b241; } 
    .category-selector .header:before, .category-selector .header:after { 
     content: " "; 
     display: table; } 
    .category-selector .header:after { 
     clear: both; } 
    .category-selector .section-container:before, .category-selector .section-container:after { 
    content: " "; 
    display: table; } 
    .category-selector .section-container:after { 
    clear: both; } 
    .category-selector .section-container .section { 
    float: left; 
    height: 400px; 
    min-width: 150px; 
    overflow-y: scroll; } 
    .category-selector .section-container .section .item { 
     border-bottom: 1px solid #80b241; 
     cursor: pointer; 
     padding: 5px 10px 5px 5px; } 
     .category-selector .section-container .section .item:last-child { 
     border: 0; } 
     .category-selector .section-container .section .item.active { 
     background-color: #80b241; 
     color: #ffffff; } 
</style>

Und das Markup:

<div class="row"> 
    <div class="col-lg-3"> 
     <div class="progress-indicator"> 
      <div class="step"> 
       <div class="circle">1</div> 
       <div class="text">Select Category</div> 
      </div> 
      <div class="step active"> 
       <div class="circle">2</div> 
       <div class="text"> 
        Fill Out Listing 
        <ul> 
         <li> 
          <a href="#">Vital Fields</a> 
          <a href="#">Image Url</a> 
          <a href="#">Dimensions</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <div class="step"> 
       <div class="circle">3</div> 
       <div class="text">Bulk Options</div> 
      </div> 
      <div class="step"> 
       <div class="circle">4</div> 
       <div class="text">More Options</div> 
      </div> 
     </div> 

     <div class="text-center"> 
      <button class="btn btn-default" style="margin-bottom: 10px;"> 
       SAVE AS DRAFT 
      </button> 
      <button class="btn btn-gray-1"> 
       MOVE TO PUBLISH QUEUE 
      </button> 
     </div> 
    </div> 
    <div class="col-lg-6"> 
     <div class="category-selector"> 
      <div class="header"> 
       <div class="pull-left"> 
        <h4>Select a Category</h4> 
       </div> 
       <div class="pull-right"> 
        <button class="btn btn-green">Next</button> 
       </div> 
      </div> 
      <div class="section-container"> 
       <div class="section"> 
        <div class="item" [ngClass]="{active: selectedCategory && category.id === selectedCategory.id}" *ngFor="let category of topLevelCategories" (click)="getSubCategories(category)"> 
         {{category.displayName}} 
        </div> 
       </div> 
       <div class="section" *ngIf="subCategories && subCategories.length > 0"> 
        <div class="item" [ngClass]="{active: selectedSubCategory && subCategory.id === selectedSubCategory.id}" *ngFor="let subCategory of subCategories" (click)="getFields(subCategory)"> 
         {{subCategory.displayName}} 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-3"> 
     Side Nav/Slide In 
    </div> 
</div>

Quelle

2017-02-10 Sam

@MichaelCoker Ich habe das gerenderte CSS in die Frage eingefügt. – Sam

Ihr CSS [scheint nicht vollständig] (https://jsfiddle.net/websiter/86foqfdh/). Bitte verlinken Sie die fehlenden Ressourcen. Was ist in '../ sass/sa.common.sass'? –

@AndreiGheorghiu Common ist alle Variablen. Nichts anderes. Sollte es wahrscheinlich umbenennen. – Sam

Nicht alle Browser berücksichtigen die Anzeige von ::before auf Elementen mit display:table. (Ich habe eine Ahnung, dass Sie dies in FF erleben? - In Chrome werden sie angezeigt). Es gibt zwei mögliche Lösungen:

Entweder ersetzen display:table mit display:flex und display: table-cell mit display: block ...
... oder benutzen Sie geeignete html Elemente (divs?) Anstelle von Pseudoelemente für Linien.

Sonstige Hinweise könnten für Sie nützlich:

entfernen z-index von .step::before
Änderung height:125%-height:calc(100% + {N}px) wo {N} ist der Unterschied in px zwischen der tatsächlichen Höhe von .circle und 40px (oberer Rand von .step). Mit dieser Technik können Sie die genaue Größe der Linie steuern und die Lücke zwischen den Kreisen bis zum Pixel anpassen, so dass die zusätzliche Linienlänge nicht verborgen werden muss.

Hoffe das oben genannte macht Sinn und hilft. Vergessen Sie nicht autoprefix.

Quelle

2017-02-10 02:05:35

Etwas wie:

.step { 
    position: relative; 
    &:after { 
     content: ""; 
     position: absolute; 
     top: 0; 
     left: 30px; // magic number, try until you get the right positioning 

     width: 1px; 
     height: 100%; 

     border-left: 2px solid $any-color-you-like; 
    } 
}

Nehmen Sie einige Anpassungen vor, und es sollte funktionieren, wie Sie benötigen.

Quelle

2017-02-10 01:40:05

Vertikale Verbindungslinien mit CSS

Antwort

Verwandte Themen