101 lines
2.6 KiB
HTML
101 lines
2.6 KiB
HTML
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Pattern</title>
|
||
|
|
</head>
|
||
|
|
<body data-prismjs-copy-timeout="1500">
|
||
|
|
<h2>Example</h2>
|
||
|
|
<p class="switch">
|
||
|
|
<label for="example-switch">Switch label</label><span id="example-switch" role="switch"></span>
|
||
|
|
</p>
|
||
|
|
<div class="tab-group" id="switches">
|
||
|
|
<pre class="language-html" data-tab="html"><span id="example-id" role="switch"></span></pre>
|
||
|
|
<pre class="language-pug" data-tab="pug">span#example-id(role="switch")</pre>
|
||
|
|
<pre class="language-css" data-tab="css">[role=switch] {
|
||
|
|
display: -ms-inline-grid;
|
||
|
|
display: inline-grid;
|
||
|
|
border: 1px solid #2e51a1;
|
||
|
|
background-color: #e9e9ea;
|
||
|
|
border-radius: 0.75rem;
|
||
|
|
height: 1.5rem;
|
||
|
|
width: 3rem;
|
||
|
|
-webkit-transition: all 500ms;
|
||
|
|
transition: all 500ms;
|
||
|
|
}
|
||
|
|
[role=switch] > span {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin: 2%;
|
||
|
|
width: calc(1.5rem - 2%);
|
||
|
|
-webkit-transition: all 500ms;
|
||
|
|
transition: all 500ms;
|
||
|
|
}
|
||
|
|
[role=switch][aria-checked=true] {
|
||
|
|
background-color: #2e51a1;
|
||
|
|
}
|
||
|
|
[role=switch][aria-checked=true] > span {
|
||
|
|
margin-left: calc(1.5rem - 5%);
|
||
|
|
}</pre>
|
||
|
|
<pre class="language-css" data-tab="scss">@use "sass:math";
|
||
|
|
|
||
|
|
$switch-accent: #2e51a1 !default; // switch background when switched right (on/ true)
|
||
|
|
$switch-background: #e9e9ea !default; // switch background when switched left (off / false)
|
||
|
|
$switch-color: #ffffff !default; // the colour of the switch
|
||
|
|
$switch-height: 1.5rem !default;
|
||
|
|
|
||
|
|
@mixin switch {
|
||
|
|
[role='switch'] {
|
||
|
|
display: inline-grid;
|
||
|
|
border: 1px solid $switch-accent;
|
||
|
|
background-color: $switch-background;
|
||
|
|
border-radius: math.div($switch-height, 2);
|
||
|
|
height: $switch-height;
|
||
|
|
width: #{$switch-height * 2};
|
||
|
|
transition: all 500ms;
|
||
|
|
> span {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin: 2%;
|
||
|
|
width: calc(#{$switch-height} - 2%);
|
||
|
|
transition: all 500ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[aria-checked="true"] {
|
||
|
|
background-color: $switch-accent;
|
||
|
|
> span {
|
||
|
|
margin-left: calc(#{$switch-height} - 5%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}</pre>
|
||
|
|
<pre class="language-js" data-tab="js">
|
||
|
|
function flip(e) {
|
||
|
|
let sw = e.currentTarget;
|
||
|
|
switch(sw.getAttribute("aria-checked")) {
|
||
|
|
case "true":
|
||
|
|
sw.setAttribute("aria-checked", "false");
|
||
|
|
break;
|
||
|
|
case "false":
|
||
|
|
sw.setAttribute("aria-checked", "true");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
function init(callback){
|
||
|
|
let sw = document.querySelectorAll("[role='switch']");
|
||
|
|
for (let i=0; i < sw.length; i++) {
|
||
|
|
sw[i].innerHTML = "<span></span>";
|
||
|
|
sw[i].setAttribute("aria-checked", "false");
|
||
|
|
sw[i].setAttribute("tabindex", "0");
|
||
|
|
sw[i].addEventListener("click", flip, false);
|
||
|
|
sw[i].addEventListener("keypress", flip, false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export {init};</pre>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|