biofriction-wp-theme/node_modules/foundation-sites/scss/components/_switch.scss

248 lines
5.7 KiB
SCSS
Raw Permalink Normal View History

2021-10-26 14:18:09 +02:00
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group switch
////
/// Background color of a switch.
/// @type Color
$switch-background: $medium-gray !default;
/// Background active color of a switch.
/// @type Color
$switch-background-active: $primary-color !default;
/// Height of a switch, with no class applied.
/// @type Number
$switch-height: 2rem !default;
/// Height of a switch with .tiny class.
/// @type Number
$switch-height-tiny: 1.5rem !default;
/// Height of a switch with .small class.
/// @type Number
$switch-height-small: 1.75rem !default;
/// Height of a switch with .large class.
/// @type Number
$switch-height-large: 2.5rem !default;
/// Border radius of the switch
/// @type Number
$switch-radius: $global-radius !default;
/// border around a modal.
/// @type Number
$switch-margin: $global-margin !default;
/// Background color for the switch container and paddle.
/// @type Color
$switch-paddle-background: $white !default;
/// Spacing between a switch paddle and the edge of the body.
/// @type Number
$switch-paddle-offset: 0.25rem !default;
/// border radius of the switch paddle
/// @type Number
$switch-paddle-radius: $global-radius !default;
/// switch transition.
/// @type Number
$switch-paddle-transition: all 0.25s ease-out !default;
// make them variables
// ask about accessibility on label
// change class name for text
/// Adds styles for a switch container. Apply this to a container class.
@mixin switch-container {
position: relative;
margin-bottom: $switch-margin;
outline: 0;
// These properties cascade down to the switch text
font-size: rem-calc(14);
font-weight: bold;
color: $white;
user-select: none;
}
/// Adds styles for a switch input. Apply this to an `<input>` within a switch.
@mixin switch-input {
position: absolute;
margin-bottom: 0;
opacity: 0;
}
/// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
@mixin switch-paddle {
$switch-width: $switch-height * 2;
$paddle-height: $switch-height - ($switch-paddle-offset * 2);
$paddle-width: $switch-height - ($switch-paddle-offset * 2);
$paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset;
position: relative;
display: block;
width: $switch-width;
height: $switch-height;
border-radius: $switch-radius;
background: $switch-background;
transition: $switch-paddle-transition;
// Resetting these <label> presets so type styles cascade down
font-weight: inherit;
color: inherit;
cursor: pointer;
// Needed to override specificity
input + & {
margin: 0;
}
// The paddle itself
&::after {
position: absolute;
top: $switch-paddle-offset;
#{$global-left}: $switch-paddle-offset;
display: block;
width: $paddle-width;
height: $paddle-height;
transform: translate3d(0, 0, 0);
border-radius: $switch-paddle-radius;
background: $switch-paddle-background;
transition: $switch-paddle-transition;
content: '';
}
// Change the visual style when the switch is active
input:checked ~ & {
background: $switch-background-active;
&::after {
#{$global-left}: $paddle-active-offest;
}
}
input:focus ~ & {
@include disable-mouse-outline;
}
}
/// Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`.
@mixin switch-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/// Adds styles for the active state text within a switch.
@mixin switch-text-active {
#{$global-left}: 8%;
display: none;
input:checked + label > & {
display: block;
}
}
/// Adds styles for the inactive state text within a switch.
@mixin switch-text-inactive {
#{$global-right}: 15%;
input:checked + label > & {
display: none;
}
}
/// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
/// @param {Number} $font-size [1rem] - Font size of label text within the switch.
/// @param {Number} $switch-height [2rem] - Height of the switch body.
/// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
@mixin switch-size(
$font-size: 1rem,
$switch-height: 2rem,
$paddle-offset: 0.25rem
) {
$switch-width: $switch-height * 2;
$paddle-width: $switch-height - ($paddle-offset * 2);
$paddle-height: $switch-height - ($paddle-offset * 2);
$paddle-active-offest: $switch-width - $paddle-width - $paddle-offset;
height: $switch-height;
.switch-paddle {
width: $switch-width;
height: $switch-height;
font-size: $font-size;
}
.switch-paddle::after {
top: $paddle-offset;
#{$global-left}: $paddle-offset;
width: $paddle-width;
height: $paddle-height;
}
input:checked ~ .switch-paddle::after {
#{$global-left}: $paddle-active-offest;
}
}
@mixin foundation-switch {
// Container class
.switch {
height: $switch-height;
@include switch-container;
}
// <input> element
.switch-input {
@include switch-input;
}
// <label> element
.switch-paddle {
@include switch-paddle;
}
// Base label text styles
%switch-text {
@include switch-text;
}
// Active label text styles
.switch-active {
@extend %switch-text;
@include switch-text-active;
}
// Inactive label text styles
.switch-inactive {
@extend %switch-text;
@include switch-text-inactive;
}
// Switch sizes
.switch.tiny {
@include switch-size(rem-calc(10), $switch-height-tiny, $switch-paddle-offset);
}
.switch.small {
@include switch-size(rem-calc(12), $switch-height-small, $switch-paddle-offset);
}
.switch.large {
@include switch-size(rem-calc(16), $switch-height-large, $switch-paddle-offset);
}
}