2016-07-04 1 views
0

Je veux faire un fil d'Ariane simulant une barre de progression, tout comme ceFil d'Ariane Responsive avec CSS Triangles et de la marge entre les éléments

enter image description here

Par défaut, tous les articles sont gris et classe « terminée » la couleur verte. Mais j'ai un problème avec le dernier élément, jouant avec la largeur: épargnez-moi un espace ou passez à la ligne suivante. enter image description here Ceci est mon code (SCSS & html):

ul.progress-tracker { 
 
    margin: 15px 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    &: before, &: after { 
 
    clear: both; 
 
    } 
 
    li { 
 
    list-style: none; 
 
    &: first-child { 
 
     a: before { 
 
     display: none; 
 
     } 
 
    } 
 
    &:last-child { 
 
     padding-right: 8px; 
 
     a { 
 
     margin: 0; 
 
     min-width: 30.09%; 
 
     padding: 3px 0 0 8px; 
 
     &: after { 
 
      display: none; 
 
     } 
 
     } 
 
    } 
 
    a { 
 
     content: ""; 
 
     display: block; 
 
     float: left; 
 
     height: 8px; 
 
     background: tint($light-blue, 60%); 
 
     text-align: center; 
 
     padding: 3px 4px 0 8px; 
 
     position: relative; 
 
     margin: 0 10px 0 0; 
 
     text-decoration: none; 
 
     color: #fff; 
 
     min-width: 31%; 
 
     &: before { 
 
     content: ""; 
 
     border-color: transparent; 
 
     border-top: 4px solid transparent; 
 
     border-bottom: 4px solid transparent; 
 
     border-left: 4px solid $light-gray; 
 
     position: absolute; 
 
     left: 0; 
 
     top: 0; 
 
     } 
 
     &:after { 
 
     content: ""; 
 
     border-top: 4px solid transparent; 
 
     border-bottom: 4px solid transparent; 
 
     border-left: 4px solid tint($light-blue, 60%); 
 
     position: absolute; 
 
     right: -4px; 
 
     top: 0; 
 
     z-index: 1; 
 
     } 
 
    } 
 
    a.completed { 
 
     background-color: $primary-green; 
 
     &: after { 
 
     border-left-color: $primary-green; 
 
     } 
 
    } 
 
    } 
 
}
<ul class="progress-tracker"> 
 
    <li> 
 
    <a class="completed"> 
 

 
    </a> 
 
    </li> 
 
    <li> 
 
    <a> 
 

 
    </a> 
 
    </li> 
 
    <li> 
 
    <a> 
 

 
    </a> 
 
    </li> 
 
</ul>

+0

-t-il besoin d'être texte à l'intérieur de ces « miettes de pain "? – amn

+1

pour les résolutions téléphone (xs) n'a pas de texte à l'intérieur, il est possible que pour les versions de table et de bureau dans le nombre de tours (1,2,3) – Jorgelig

+0

D'accord. Et quel est le problème? Autant que je puisse voir, vous venez d'afficher trois images et montré votre code. Vous dites que vous voulez afficher la barre de progression "comme ceci", où une barre qui se termine sans fin est dessinée, mais ensuite vous dites que vous avez un problème faisant allusion à l'absence de fin pointue. – amn

Répondre

0

Résolu:

ul.progress-tracker { 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
ul.progress-tracker:before, ul.progress-tracker:after { 
 
    clear: both; 
 
} 
 
ul.progress-tracker li { 
 
    list-style: none; 
 
    float: left; 
 
    min-width: calc(100%/3); 
 
    padding-right: 5px; 
 
} 
 
ul.progress-tracker li:first-child a:before { 
 
    display: none; 
 
} 
 
ul.progress-tracker li:last-child { 
 
    padding-right: 0px; 
 
} 
 
ul.progress-tracker li:last-child a { 
 
    margin: 0; 
 
} 
 
ul.progress-tracker li:last-child a:after { 
 
    display: none; 
 
} 
 
ul.progress-tracker li a { 
 
    content: ""; 
 
    display: block; 
 
    height: 8px; 
 
    background: #bcc3c4; 
 
    text-align: center; 
 
    position: relative; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 
ul.progress-tracker li a:before { 
 
    content: ""; 
 
    border-color: transparent; 
 
    border-top: 4px solid transparent; 
 
    border-bottom: 4px solid transparent; 
 
    border-left: 4px solid #EAF3E3; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
ul.progress-tracker li a:after { 
 
    content: ""; 
 
    border-top: 4px solid transparent; 
 
    border-bottom: 4px solid transparent; 
 
    border-left: 4px solid #bcc3c4; 
 
    position: absolute; 
 
    right: -4px; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 
ul.progress-tracker li a.completed { 
 
    background-color: #8ABD2E; 
 
} 
 
ul.progress-tracker li a.completed:after { 
 
    border-left-color: #8ABD2E; 
 
}
 <ul class="progress-tracker"> 
 
      <li> 
 
       <a class="completed"> 
 
        
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a class="completed"> 
 

 
       </a> 
 
      </li> 
 
      <li> 
 
       <a> 
 
        
 
       </a> 
 
      </li> 
 
     </ul>