CSS πρόκληση

12 Φεβρουαρίου 2019

Εχω ένα stepper με την εξής λίστα σταδίων

<ul class="steps"><!--past present future-->  
  <li class="present"><span><strong>Στάδιο 1</strong>Stage 1</span>This is stage 1<i></i></li>
  <li class="future">
  <span id="stage12" style="cursor: pointer;"><strong>Stage 2</strong>This is stage 2</span><i></i></li>  
  <li class="future"><span><strong>Stage 3</strong>This is stage 3</span><i></i></li>
  <li class="future"><span><strong>Stage 4</strong>This is stage 4</span><i></i></li>
  <li class="future"><span><strong>Stage 5</strong>This is stage 5</span><i></i></li>
</ul>

και τα εξής css

.steps {
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1;
  margin: 0px auto;
  border-radius: 3px;
}

.steps strong {
  font-size: 14px;
  display: block;
  line-height: 1.3;
}

.steps>li {
  position: relative;
  display: block;
  padding: 12px 20px 8px 50px; 
  width: 20%;
  height: 58px;
}

@media (min-width: 768px) {
  .steps>li { float: left; }
  .steps .past { color: #777; background: #f4f4f4; }
  .steps .present { color: #fff; background-color: #c32611; }
  .steps .future { color: #777; background: #f4f4f4; }
  .steps .enabled {}
  
.steps strong{
  
}
  .steps li > span:after,
  .steps li > span:before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: #f0f0f0;
    border-width: 29px 30px;
  }

  .steps li > span:after {
    top: -5px;
    z-index: 1;
    border-left-color: white;
    border-width: 34px;
  }

  .steps li > span:before { z-index: 2; }

  .steps li.past + li > span:before { border-left-color: #f4f4f4; } 
  .steps li.present + li > span:before { border-left-color: #c32611; }
  .steps li.future + li > span:before { border-left-color: #f4f4f4; }

  .steps li:first-child > span:after,
  .steps li:first-child > span:before { display: none; }
  
  /* Past stages */	
  .steps li.past:hover { background-color: #e3e3e3; }     
  .steps li.past:hover + li > span:before { border-left-color: #e3e3e3; }   
  /* Future stages */
  .steps li.future:hover { background-color: #e3e3e3; }     
  .steps li.future:hover + li > span:before { border-left-color: #e3e3e3; } 
      
  /* Arrows at start and end */
  .steps li:first-child i,
  .steps li:last-child i {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: white;
    border-width: 30px;
  }

  .steps li:last-child i {
    left: auto;
    right: -30px;
    border-left-color: transparent;
    border-top-color: white;
    border-bottom-color: white;
  }

το πρόβλημα μου είναι ότι δέν μπορώ να βρώ CSS selector που να επιλέγει από τα βέλη με κλάση future μονο το επόμενο απο αυτό που είναι ο χρήστης, δηλαδή το βέλος με κλάση present..

Χρωματίζονται στο hover όλα τα μελλοντικά στάδια μέχρι το stage 5 ενώ εγώ θέλω να συμβαίνει μόνο στο επόμενο..

καμιά ιδέα?

PS παίζω μονο με CSS

Επεξ/σία 12 Φεβρουαρίου 2019 από Επισκέπτης

12 Φεβρουαρίου 2019

3 ώρες πριν, ioannis000 είπε

Εχω ένα stepper με την εξής λίστα σταδίων


<ul class="steps"><!--past present future-->  
  <li class="present"><span><strong>Στάδιο 1</strong>Stage 1</span>This is stage 1<i></i></li>
  <li class="future">
  <span id="stage12" style="cursor: pointer;"><strong>Stage 2</strong>This is stage 2</span><i></i></li>  
  <li class="future"><span><strong>Stage 3</strong>This is stage 3</span><i></i></li>
  <li class="future"><span><strong>Stage 4</strong>This is stage 4</span><i></i></li>
  <li class="future"><span><strong>Stage 5</strong>This is stage 5</span><i></i></li>
</ul>

και τα εξής css


.steps {
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1;
  margin: 0px auto;
  border-radius: 3px;
}

.steps strong {
  font-size: 14px;
  display: block;
  line-height: 1.3;
}

.steps>li {
  position: relative;
  display: block;
  padding: 12px 20px 8px 50px; 
  width: 20%;
  height: 58px;
}

@media (min-width: 768px) {
  .steps>li { float: left; }
  .steps .past { color: #777; background: #f4f4f4; }
  .steps .present { color: #fff; background-color: #c32611; }
  .steps .future { color: #777; background: #f4f4f4; }
  .steps .enabled {}
  
.steps strong{
  
}
  .steps li > span:after,
  .steps li > span:before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: #f0f0f0;
    border-width: 29px 30px;
  }

  .steps li > span:after {
    top: -5px;
    z-index: 1;
    border-left-color: white;
    border-width: 34px;
  }

  .steps li > span:before { z-index: 2; }

  .steps li.past + li > span:before { border-left-color: #f4f4f4; } 
  .steps li.present + li > span:before { border-left-color: #c32611; }
  .steps li.future + li > span:before { border-left-color: #f4f4f4; }

  .steps li:first-child > span:after,
  .steps li:first-child > span:before { display: none; }
  
  /* Past stages */	
  .steps li.past:hover { background-color: #e3e3e3; }     
  .steps li.past:hover + li > span:before { border-left-color: #e3e3e3; }   
  /* Future stages */
  .steps li.future:hover { background-color: #e3e3e3; }     
  .steps li.future:hover + li > span:before { border-left-color: #e3e3e3; } 
      
  /* Arrows at start and end */
  .steps li:first-child i,
  .steps li:last-child i {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: white;
    border-width: 30px;
  }

  .steps li:last-child i {
    left: auto;
    right: -30px;
    border-left-color: transparent;
    border-top-color: white;
    border-bottom-color: white;
  }

το πρόβλημα μου είναι ότι δέν μπορώ να βρώ CSS selector που να επιλέγει από τα βέλη με κλάση future μονο το επόμενο απο αυτό που είναι ο χρήστης, δηλαδή το βέλος με κλάση present..

Χρωματίζονται στο hover όλα τα μελλοντικά στάδια μέχρι το stage 5 ενώ εγώ θέλω να συμβαίνει μόνο στο επόμενο..

καμιά ιδέα?

PS παίζω μονο με CSS

li.present + li.future:first-child {} ???

Επεξ/σία 12 Φεβρουαρίου 2019 από natural_sgf

XPHSTOS_ · 13 Φεβρουαρίου 2019

Tο li.present + li.future που έγραψε ο @natural_sgf είναι αυτό που θέλεις, χωρίς το first-child.
Το first-child είναι αχρείαστο γιατί το sibling selector '+' επιστρέφει πάντα το 1ο element μετά το present

Δες και το demo: https://codepen.io/anon/pen/LqBGeg?editors=1100

Επεξ/σία 13 Φεβρουαρίου 2019 από XPHSTOS_

13 Φεβρουαρίου 2019

Ευχαριστώ για τις απαντησεις αλλά βρήκα άλλη λύση καλύτερη..

Εφτιαξα μιά κενή κλάση css πχ .clickable {} και την έβαλα στο html tag μαζί με την άλλη που προυπάρχει πχ < class = "past clickable"> και απλώς πρόσθεσα

/* Stepper arrows */
  .steps li.clickable:hover { background-color: #e3e3e3; }     
  .steps li.clickable:hover + li > span:before { border-left-color: #e3e3e3; }

XPHSTOS_ · 13 Φεβρουαρίου 2019

7 hours ago, ioannis000 said:
Ευχαριστώ για τις απαντησεις αλλά βρήκα άλλη λύση καλύτερη..

Εφτιαξα μιά κενή κλάση css πχ .clickable {} και την έβαλα στο html tag μαζί με την άλλη που προυπάρχει πχ < class = "past clickable"> και απλώς πρόσθεσα
/* Stepper arrows */
  .steps li.clickable:hover { background-color: #e3e3e3; }     
  .steps li.clickable:hover + li > span:before { border-left-color: #e3e3e3; }  

Έκανες αυτό ακριβώς που είπαμε.
Απλά πρόσθεσες και μια κλάση ακόμη, χωρίς να χρειάζεται.

Στον ήδη υπάρχον κώδικα, μπορείς να έχεις:

.steps .present:hover { ... }
.steps .present + .future:hover { ... }

Το οποίο φυσικά λόγο specificity κερδίζει τα "απλά"

.steps .future:hover { ... }

Δες το updated παράδειγμα: https://codepen.io/anon/pen/ErprrB?editors=1100

13 Φεβρουαρίου 2019

9 λεπτά πριν, XPHSTOS_ είπε
Έκανες αυτό ακριβώς που είπαμε.
Απλά πρόσθεσες και μια κλάση ακόμη, χωρίς να χρειάζεται.

Στον ήδη υπάρχον κώδικα, μπορείς να έχεις:
.steps .present:hover { ... }
.steps .present + .future:hover { ... }
Το οποίο φυσικά λόγο specificity κερδίζει τα "απλά"
.steps .future:hover { ... }
Δες το updated παράδειγμα: https://codepen.io/anon/pen/ErprrB?editors=1100

γιατί το ζαλίζεις; αφού είπε βρήκε καλύτερη λύση...

Predatorkill · 13 Φεβρουαρίου 2019

8 ώρες πριν, ioannis000 είπε

Ευχαριστώ για τις απαντησεις αλλά βρήκα άλλη λύση καλύτερη..

Απορω γιατι σου απαντανε, αληθεια...

13 Φεβρουαρίου 2019

5 λεπτά πριν, Predatorkill είπε

Απορω γιατι σου απαντανε, αληθεια...

Καλή απορία.

pmav99 · 13 Φεβρουαρίου 2019

2 hours ago, Predatorkill said:

Απορω γιατι σου απαντανε, αληθεια...

Ε άμα δεν του απαντάμε θα κάνει καινούριο nick. Και μετά θα πάρει πάλι ένα-δύο trollo-thread μέχρι να τον πάρουμε πρέφα και μετά φτού και από την αρχή.

14 Φεβρουαρίου 2019

1 ώρα πριν, pmav99 είπε

Ε άμα δεν του απαντάμε θα κάνει καινούριο nick. Και μετά θα πάρει πάλι ένα-δύο trollo-thread μέχρι να τον πάρουμε πρέφα και μετά φτού και από την αρχή.

Βασικά δε μπαίνω στο 'Web Design - Development' οπότε δεν είχα και γνώση της κατάστασης...

14 Φεβρουαρίου 2019

Εγινε παρανόησις..

Η λύση μου είναι καλύτερη απο τη δική σας γιατί είναι πιό "αφηρημένη" αφού στο μέλλον άν χρειαστεί να γίνει κάποια αλλαγή ο Προγραμματιστής δέν θα ξαναγράφει CSS απο την αρχή για να την προσαρμόσει.. απλά θα πάει και θα γράψει την κλάση .clickable δίπλα στην υπάρχουσα.. πχ μπορεί να μην θέλουμε να αλλάξει χρώμα το Stage 2 όταν ξεκινάει η διαδικασία - απλά βγάζουμε την .clickable δίπλα απο την .future

Επιπλέον, με τη λύση που προτείνετε αλλάζει χρώμα και το τελευταίο στάδιο Stage 5 το οποίο δέν είναι επιθημητό! Για να απενεργοποιηθεί πρέπει να γράψω ακόμα μιά γραμμή κώδικα αποκλειστικά για αυτό με το :last-child ..

pmav99 · 15 Φεβρουαρίου 2019

16 hours ago, ioannis000 said:

Η λύση μου είναι καλύτερη απο τη δική σας γιατί είναι ~~πιό "αφηρημένη"~~ δική μου

fixed

Σύνδεση

CSS πρόκληση

Προτεινόμενες αναρτήσεις

Επισκέπτης

Επισκέπτης

XPHSTOS_

Επισκέπτης

XPHSTOS_

Επισκέπτης

Predatorkill

Επισκέπτης

pmav99

Επισκέπτης

Επισκέπτης

pmav99

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση