Updates
This commit is contained in:
2024-07-11 21:05:34 -04:00
parent b5e421761f
commit 4a18341cf5
65 changed files with 3631 additions and 914 deletions

View File

@@ -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")) {