Updates
Updates
This commit is contained in:
@@ -4,6 +4,9 @@
|
||||
<title>Pattern</title>
|
||||
</head>
|
||||
<body data-prismjs-copy-timeout="1500">
|
||||
<h2>What is it</h2>
|
||||
<h2>When to use it</h2>
|
||||
<h2>How to use it</h2>
|
||||
<h2>Example</h2>
|
||||
<p class="switch">
|
||||
<label for="example-switch">Switch label</label><span id="example-switch" role="switch"></span>
|
||||
@@ -37,7 +40,10 @@
|
||||
[role=switch][aria-checked=true] > span {
|
||||
margin-left: calc(1.5rem - 5%);
|
||||
}</pre>
|
||||
<pre class="language-css" data-tab="scss">@use "sass:math";
|
||||
<pre class="language-css" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
@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)
|
||||
@@ -70,7 +76,9 @@ $switch-height: 1.5rem !default;
|
||||
}
|
||||
}
|
||||
}</pre>
|
||||
<pre class="language-js" data-tab="js">
|
||||
<pre class="language-js" data-tab="js">//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
function flip(e) {
|
||||
let sw = e.currentTarget;
|
||||
switch(sw.getAttribute("aria-checked")) {
|
||||
|
Reference in New Issue
Block a user