Cześć.
Bawię się css i tak pomyślałem, że pewno to co piszę to makaron wychodzi.
Dla przykładu. Czy poniższe da się jakoś uprościć ?
#icon_active {
fill: rgb(239, 179, 29);
opacity: 1;
width: 45%;
height: 45%;
margin: auto;
}
.deactivate #icon_active #icon_active_layer_2 {
fill: rgba(220,20,60,1);
transition: fill 0.4s ease-in-out;
-webkit-transition: fill 0.4s ease-in-out;
-moz-transition: fill 0.4s ease-in-out;
-o-transition: fill 0.4s ease-in-out;
}
.deactivate #icon_active #icon_active_layer_1 {
transform: translate(0px, 0px);
fill: darkgrey;
transition: transform 0.4s ease-in-out;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
}
.deactivate a:hover #icon_active #icon_active_layer_1,
.deactivate a:active #icon_active #icon_active_layer_1 {
transform: translate(180px, 0px);
transition: transform 0.4s ease-in-out;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
}
.deactivate a:hover #icon_active #icon_active_layer_2,
.deactivate a:active #icon_active #icon_active_layer_2 {
fill: rgb(81, 142, 48);
transition: fill 0.4s ease-in-out;
-webkit-transition: fill 0.4s ease-in-out;
-moz-transition: fill 0.4s ease-in-out;
-o-transition: fill 0.4s ease-in-out;
}
.activate #icon_active #icon_active_layer_2 {
fill: rgb(81, 142, 48);
transition: fill 0.4s ease-in-out;
-webkit-transition: fill 0.4s ease-in-out;
-moz-transition: fill 0.4s ease-in-out;
-o-transition: fill 0.4s ease-in-out;
}
.activate #icon_active #icon_active_layer_1 {
transform: translate(180px, 0px);
fill: darkgrey;
transition: transform 0.4s ease-in-out;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
}
.activate a:hover #icon_active #icon_active_layer_1,
.activate a:active #icon_active #icon_active_layer_1 {
transform: translate(0px, 0px);
transition: transform 0.4s ease-in-out;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
}
.activate a:hover #icon_active #icon_active_layer_2,
.activate a:active #icon_active #icon_active_layer_2 {
fill: rgba(220,20,60,1);
transition: fill 0.4s ease-in-out;
-webkit-transition: fill 0.4s ease-in-out;
-moz-transition: fill 0.4s ease-in-out;
-o-transition: fill 0.4s ease-in-out;
}