icono
Version:
Pure CSS Icons
88 lines (73 loc) • 1.6 kB
text/stylus
.icono-volume{
width: 0;
height: 0;
border: $7 solid;
border-left: none;
border-top-color: transparent;
border-bottom-color: transparent;
padding: $6 $3;
box-shadow: inset $4 0;
margin: $4 $10 $4 $11;
}
.icono-volumeLow{
@extend .icono-volume
margin: $4 $14 $4 $7;
&:before{
width: $15;
height: $15;
position: absolute;
border-radius: 50%;
@extend .icono-stroke
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
left: $2;
@extend .stickCenterV
}
}
.icono-volumeMedium{
@extend .icono-volumeLow
margin: $4 $16 $4 $5;
&:before{
border-style: double;
border-width: $6;
left: -1*$2;
}
}
.icono-volumeHigh{
@extend .icono-volumeMedium
margin: $4 $18 $4 $3;
&:after{
@extend .icono-volumeLow:before
width: $32;
height: $32;
left: -1*$7;
}
}
.icono-volumeDecrease{
@extend .icono-volume
margin: $4 $16 $4 $5;
&:before, &:after{
@extend .stickCenterV
box-shadow: inset 0 0 0 $32;
}
&:before{
width: $10;
height: $2;
left: $17;
}
}
.icono-volumeIncrease{
@extend .icono-volumeDecrease
&:after{
height: $10;
width: $2;
left: $17+$4;
}
}
.icono-volumeMute{
@extend .icono-volumeIncrease
&:after, &:before{
transform: translateY(-50%) rotate(45deg);
}
}