Toggle component

Developer
Dave
Size
29,331 Kb
Views
38,456
  1. Toggle component Previews
  2. Toggle component HTML Codes
  3. Toggle component CSS Codes

How do I make an toggle component?

What is a toggle component? How do you make a toggle component? This script and codes were developed by Dave on 17 September 2022, Saturday.

Toggle component Previews
IQ Test

Toggle component - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle component</title> <link rel='stylesheet prefetch' href='css/https___codepen_io_team_c.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form autocomplete="off" class="c-toggle-switch" novalidate=""> <fieldset class="c-toggle-switch__fieldset"> <legend class="c-toggle-switch__legend"> Journey </legend> <div class="c-toggle-switch__inner"> <input type="radio" id="e526881e-a60b-45a9-aa77-a76057a9c22e" name="workflow-switch" value="On" class="c-toggle-switch__radio-button c-toggle-switch__radio-button--on
qa-input-workflow-switch--on" checked> <label class="c-toggle-switch__label c-toggle-switch__label--on" for="e526881e-a60b-45a9-aa77-a76057a9c22e">On</label> <input type="radio" id="884b2dfa-87d0-40f5-8f1f-071ff16955c7" name="workflow-switch" value="Off" class="c-toggle-switch__radio-button c-toggle-switch__radio-button--off qa-input-workflow-switch--off" xchecked><label class="c-toggle-switch__label c-toggle-switch__label--off" for="884b2dfa-87d0-40f5-8f1f-071ff16955c7">Off</label> <span class="c-toggle-switch__switch" aria-hidden="true"></span> <span class="c-toggle-switch__track" aria-hidden="true"></span> </div> </fieldset>
</form>
</body>
</html>

Toggle component - Script Codes CSS Codes

/** * See the ESDoc's in "ToggleSwitch.js" for a description of this component and * refer to the JSX section in this file to see the components markup. */
/** * Settings. */
$c-toggle-switch-border-radius: 2em;
// +1 for sub-pixel rounding on circle
$c-toggle-switch-button-diameter: $shell-g-spacing + 1;
$c-toggle-switch-offset: 2;
$c-toggle-switch-text-offset: $shell-g-spacing-2x-small;
$c-toggle-switch-transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
/** * 1. So we can vertically align the content as flexbox is not working. * 2. Display table makes cells equal height, reset line-height so switch * matches height */
.c-toggle-switch__fieldset { display: table; // [1] line-height: 1; // [2] vertical-align: middle;
}
/** * Label on left of switch * 1. Acting as a margin as margins don't work with `display: table-cell;` */
.c-toggle-switch__legend { display: table-cell; font-weight: $shell-g-font-weight-normal; padding-right: rem($shell-g-spacing-x-small); // [1]
}
/** * Inner container to wrap the contents of the toggle switch component * 1. Allows the switch and track to be positioned absolutely * 2. To take into account smaller font size */
.c-toggle-switch__inner { display: table-cell; font-size: rem($shell-g-font-size-x-small); padding: rem($c-toggle-switch-offset * 2); // [2] position: relative; // [1]
}
/** * The "On" and "Off" text * 1. The checked radio has `opacity: 1`. * 2. Needed for `z-index` to work to layer over other elements */
.c-toggle-switch__label { color: $shell-g-color-white; opacity: 0; // [1] position: relative; // [2] text-transform: uppercase; // z-index: z(toggle-switch, label); z-index: 5;
}
.c-toggle-switch__label--off { margin-left: rem($c-toggle-switch-text-offset); right: rem($c-toggle-switch-text-offset); transition: $c-toggle-switch-transition;
}
.c-toggle-switch__label--on { left: rem($c-toggle-switch-text-offset); transition: $c-toggle-switch-transition;
}
/** * Switch is the circle inside of the toggle switch component. */
.c-toggle-switch__switch { background-color: $shell-g-color-white; border-radius: 50%; box-shadow: 0 1px 2px rgba($shell-g-color-black, 0.2); display: block; height: rem($c-toggle-switch-button-diameter); // [1] position: absolute; top: rem($c-toggle-switch-offset); transition: $c-toggle-switch-transition; transition-delay: 0.05s, 0.05s; transition-property: left, right; width: rem($c-toggle-switch-button-diameter); // [1] // z-index: z(toggle-switch, switch-indicator); z-index: 4;
}
/** * Track is the body of the toggle switch component. */
.c-toggle-switch__track { background-color: $g-color-grey-700; border-radius: $c-toggle-switch-border-radius; bottom: 0; box-shadow: inset 0 2px 0 rgba($shell-g-color-black, 0.1); display: block; left: 0; position: absolute; right: 0; top: 0; transition: $c-toggle-switch-transition;
}
/** * The input control of the toggle switch component. * 1. Make input invisible. * 2. Position the unchecked radio on top. */
.c-toggle-switch__radio-button { bottom: 0; cursor: pointer; left: 0; opacity: 0; // [1] position: absolute; right: 0; top: 0; // z-index: z(toggle-switch, radio-button); // [2] z-index: 2; &:checked { // z-index: z(toggle-switch, radio-button-checked); // [2] z-index: 1; }
}
/** * Active state is checked */
.c-toggle-switch__radio-button--on:checked + .c-toggle-switch__label--on { opacity: 1;
}
// `Switch is a non-adjacent sibling so we use the any sibling selector `~`
.c-toggle-switch__radio-button--on:checked ~ .c-toggle-switch__switch { right: rem($c-toggle-switch-offset);
}
.c-toggle-switch__radio-button--on:checked ~ .c-toggle-switch__track { background-color: $g-color-legacy-green-700;
}
/** * Inactive state is checked */
.c-toggle-switch__radio-button--off:checked + .c-toggle-switch__label--off { opacity: 1;
}
// `Switch is a non-adjacent sibling so we use the any sibling selector `~`
.c-toggle-switch__radio-button--off:checked ~ .c-toggle-switch__switch { left: rem($c-toggle-switch-offset);
}
Toggle component - Script Codes
Toggle component - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded September 17, 2022
Rating 3
Size 29,331 Kb
Views 38,456
Do you need developer help for Toggle component?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dave (DaveOrDead) Script Codes
Name
Inline-block grid
Pogo map
Validation fun
Callbacks 2 - Passing arguments
Character Gen - React
React Tic Tac Toe
Flexbox Grid - Custom Properties
Callbacks
Closures
Flexbox Grid - equal height
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!