最小化的CSS样式适用于步进向导

Question

I have two plunkers of material design wizard selector.One is having minified version of css and the other expanded. Both are acting differently upon stepper clicks. I wonder the minified file is not taking the transition effects of .step-wizard .progressbar class.

Please suggest what could be the reason for this change even though the code is similar.One minified and the other expanded.

-webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;

Minified CSS plunker:

Minified css-stepper wizard

Expanded CSS plunker

Expanded css-stepper wizard

Answer 1

the stepper clicks work fine on both versions, only difference I see the border under .progressbar are different.

expanded has:

border: 1px solid e5e6e6;

minified has:

border:1px solid;

Answer 2

I found your typo. Your color code is wrong.

Your color code is

.progressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid e5e6e6; // have a look here. color code has no #

}

You need to change like this

.progressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid #e5e6e6; // you need to change color code 

}

Answer 3

Fixed it by removing border: 1px solid e5e6e6; from .step-wizard .progressbar-stepper class

Link here