Question: CSS styles applying differently when minified for stepper wizard

Question

CSS styles applying differently when minified for stepper wizard

Answers 3
Added at 2017-01-05 15:01
Tags
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

Answers to

CSS styles applying differently when minified for stepper wizard

nr: #1 dodano: 2017-01-05 16:01

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;
nr: #2 dodano: 2017-01-05 21:01

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 

}

nr: #3 dodano: 2017-01-06 06:01

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

Link here

Source Show
◀ Wstecz