Creación de controles de conmutador accesible con CSS puro (SCSS)

Vista prévia

Descripción

Una biblioteca CSS mínima (SCSS) utilizada para convertir los botones de radio estándar en controles de conmutador accesibles y de aspecto agradable mediante transiciones CSS3 y transformaciones 3D.

Funcionamiento

Incluya el SCSS en su documento. Puede personalizar los colores de personalización de marca fácilmente cambiando los valores de los mixins.

body { padding: 30px; }

@mixin can-toggle-branding(

$can-toggle-off-color: #777,

 $can-toggle-on-color: #5fc054,

$can-toggle-inactive-text: rgba(white, 0.5),

$can-toggle-transition: cubic-bezier(0,1,0.5,1)
) {



input[type="checkbox"] {





&[disabled] ~ label {



color: rgba($can-toggle-off-color, 0.5);


}





&:focus ~ label, &:hover ~ label {



.can-toggle__switch {




background-color: $can-toggle-off-color;




&:after { color: darken($can-toggle-off-color, 10%); }



}


}


&:hover ~label { color: darken($can-toggle-off-color, 5%); }


&:checked {



~ label {




&:hover { color: darken($can-toggle-on-color, 3%); }









.can-toggle__switch {





background-color: lighten($can-toggle-on-color, 5%);





&:after { color: darken($can-toggle-on-color, 5%); }




}



}







&:focus, &:hover {




~ label {





.can-toggle__switch {






background-color: $can-toggle-on-color;






&:after { color: darken($can-toggle-on-color, 10%); }





}




}



 }


}

}



label {





.can-toggle__label-text { flex: 1; }





.can-toggle__switch {



transition: background-color 0.3s $can-toggle-transition;



background: lighten($can-toggle-off-color, 5%);



&:before { color: $can-toggle-inactive-text; }



&:after {




// Autoprefixer choked here, so making the prefixes explicit




-webkit-transition: -webkit-transform 0.3s $can-toggle-transition;




transition: transform 0.3s $can-toggle-transition;




color: $can-toggle-off-color;



 }


}




}
}

@mixin can-toggle-appearance
 (

 $can-toggle-width: 134px,

$can-toggle-height: 36px,

$can-toggle-border-radius: 4px,

$can-toggle-offset: 2px,

$can-toggle-label-font-size: 14px,

$can-toggle-switch-font-size: 12px,

$can-toggle-shadow: 0 3px 3px rgba(black, 0.4)
){

$can-toggle-switch-width: $can-toggle-width/2;



input[type="checkbox"] {



&:focus ~ label, &:hover ~ label {



.can-toggle__switch {




&:after { box-shadow: $can-toggle-shadow; }



 }


}





&:checked {



~ label {




.can-toggle__switch {





&:after { transform: translate3d($can-toggle-width - ($can-toggle-switch-width + $can-toggle-offset),0,0); }





}



}



&:focus, &:hover {




~ label {





.can-toggle__switch { &:after { box-shadow: $can-toggle-shadow; } }




}



 }


}

}



label {


font-size: $can-toggle-label-font-size;





.can-toggle__switch {



height: $can-toggle-height;



flex: 0 0 $can-toggle-width;



border-radius: $can-toggle-border-radius;







&:before {




left: $can-toggle-width/2;




font-size: $can-toggle-switch-font-size;




 line-height: $can-toggle-height;




width: $can-toggle-width/2;




padding: 0 12px;



}







&:after {




top: $can-toggle-offset; left: $can-toggle-offset;




border-radius: $can-toggle-border-radius/2;




width: $can-toggle-switch-width - $can-toggle-offset;




 line-height: $can-toggle-height - ($can-toggle-offset*2);




font-size: $can-toggle-switch-font-size;



}







&:hover {




&:after { box-shadow: $can-toggle-shadow; }



}


}

 }
}



.can-toggle {

position: relative;

*, *:before, *:after { box-sizing: border-box; }

//overflow: hidden;



input[type="checkbox"] {


opacity: 0;


position: absolute;


top: 0; left: 0;





&[disabled] ~ label {



pointer-events: none;



.can-toggle__switch { opacity: 0.4; }


}





&:checked {



~ label {









.can-toggle__switch {











&:before {






content: attr(data-unchecked);






left: 0;





}










&:after {






content: attr(data-checked);





}





}



}







&:focus, &:hover {




~ label {




}



 }


}

}



label {


user-select: none;


position: relative;


display: flex;


align-items: center;





.can-toggle__label-text {



 flex: 1;



padding-left: 32px;


}





.can-toggle__switch {



position: relative;







&:before {




content: attr(data-checked);




position: absolute;




top: 0;




text-transform: uppercase;




text-align: center;



}







&:after {




content: attr(data-unchecked);




position: absolute;




z-index: 5;




text-transform: uppercase;




text-align: center;




background: white;




transform: translate3d(0,0,0);



}



}




}



// Default values for .can-toggle class

@include can-toggle-branding;

 @include can-toggle-appearance;



 // Create toggles of different sizes by overriding the can-toggle-appearance mixin defaults

&.can-toggle--size-small {


@include can-toggle-appearance


(



90px, // Toggle width



28px,
// Toggle height



2px,
 // Toggle border radius



1px,
 // Offset (distance btw switch and box)



13px,
// Label font size



10px,
// Switch font size



0 2px 2px rgba(black, 0.4) // Switch shadow on hover/focus


);

 }



&.can-toggle--size-large {


@include can-toggle-appearance


(



160px, // Toggle width



50px,
// Toggle height



4px,
 // Toggle border radius



2px,
 // Offset (distance btw switch and box)



14px,
// Label font size



14px,
// Switch font size



0 4px 4px rgba(black, 0.4) // Switch shadow on hover/focus


);

 }



// Or re-brand the toggle for different applications

&.demo-rebrand-1 {


@include can-toggle-branding


(



#b53e74,
// Off state color



#3d9c72,
// On state color



rgba(white, 0.6),
// Off state text color



ease-in-out
// Transition timing function


);

 }



&.demo-rebrand-2 {


@include can-toggle-branding


(



#444,
// Off state color



#69be28,
// On state color



rgba(white, 0.7),
// Off state text color



cubic-bezier(0.860, 0.000, 0.070, 1.000)
// Transition timing function


);


@include can-toggle-appearance


(



120px, // Toggle width



60px,
// Toggle height



60px,
 // Toggle border radius



2px,
 // Offset (distance btw switch and box)



13px,
// Label font size



13px,
// Switch font size



0 4px 4px rgba(black, 0.4) // Switch shadow on hover/focus


);

 }


}

El marcado.

<div class="can-toggle">

<input id="a" type="checkbox">

<label for="a">


<div class="can-toggle__switch" data-checked="On" data-unchecked="Off"></div>


<div class="can-toggle__label-text">.can-toggle</div>

</label>
</div>
<br>
<div class="can-toggle can-toggle--size-small">

<input id="b" type="checkbox">

<label for="b">


<div class="can-toggle__switch" data-checked="On" data-unchecked="Off"></div>


<div class="can-toggle__label-text">.can-toggle.can-toggle--size-small</div>

</label>
</div>
<br>
<div class="can-toggle can-toggle--size-large">

<input id="c" type="checkbox">

<label for="c">


<div class="can-toggle__switch" data-checked="On" data-unchecked="Off"></div>


<div class="can-toggle__label-text">.can-toggle.can-toggle--size-large</div>

</label>
</div>
<br>
<div class="can-toggle demo-rebrand-1">

<input id="d" type="checkbox">

<label for="d">


<div class="can-toggle__switch" data-checked="Good" data-unchecked="Bad"></div>


<div class="can-toggle__label-text">.can-toggle.demo-rebrand-1</div>

</label>
</div>
<br>
<div class="can-toggle demo-rebrand-2">

<input id="e" type="checkbox">

<label for="e">


<div class="can-toggle__switch" data-checked="Yes" data-unchecked="No"></div>


<div class="can-toggle__label-text">.can-toggle.demo-rebrand-2</div>

</label>
</div>