Toggle switch

by oilvier

HTML

<div class="forms-switch">
	<input name="switch" id="a" type="radio" checked>
	<label for="a" class="forms-switch__label">
		<span>A</span>
	</label>
	<input name="switch" id="b" type="radio">
	<label for="b" class="forms-switch__label">
		<span>B</span>
	</label>
	<span aria-hidden="true" class="forms-switch__switcher"></span>
</div>

SCSS

$base-font-size:16px;
$body-font-size:$base-font-size;

///  
/// Transformer une valeur en pixels en rem  
/// 
/// Utilise la variable `$base-font-size` comme taille de référence pour
/// la conversion
/// 
/// @param {number} $value - Valeur en pixel
/// 
/// @require $base-font-size
///
/// @example scss - Usage
///   .foo {
///     font-size: rem(15px); 
///     width: rem(200px); 
///     padding: rem(5px);
///   }
/// 
/// @example css - Result
///   .foo {
///     font-size: 0.9375rem; 
///     width: 12.5rem; 
///     padding: 0.3125rem;
///   }
///  
@function rem($value, $base: $base-font-size) {
	@return $value / $base * 1rem;
}


///  
/// Transformer une valeur en pixels en em  
/// 
/// Utilise la variable `$body-font-size` comme taille de référence pour
/// la conversion
/// 
/// @param {number} $value - Valeur en pixel
/// 
/// @require $base-font-size
///
/// @example scss - Usage
///   .foo {
///     font-size: em(12px); 
///     width: em(200px, 12px); 
///     padding: em(5px, 12px);
///   }
/// 
/// @example css - Result
///   .foo {
///     font-size: 0.750em; 
///     width: 16.667em; 
///     padding: 0.417em;
///   }
/// 
@function em($px, $base: $body-font-size) {
    @return ($px / $base) * 1em;
}

/* ==========================================================================
   ## Toggle switch
   ========================================================================== */
/**
 * Switch entre deux options (radio)
<div class="forms-switch">
	<input name="switch" id="a" type="radio" checked>
	<label for="a" class="forms-switch__label">
		<span>A</span>
	</label>
	<input name="switch" id="b" type="radio">
	<label for="b" class="forms-switch__label">
		<span>B</span>
	</label>
	<span aria-hidden="true" class="forms-switch__switcher"></span>
</div>
 */
$forms-switch-margin:4px!default;
$forms-switch-margin-rem:rem($forms-switch-margin);   
.forms-switch {position:relative; display:flex; margin:20px; border:1px solid lightgray;...