gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Update pattern documentation

Browse Source
This commit is contained in:
A McIlwraith
2024-07-28 15:30:51 -04:00
parent 77a13bbd46
commit 3292729d53
15 changed files with 227 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
public/patterns/core/switch/index.html
View File

@@ -16,13 +16,13 @@
<label for="example-switch">Switch label (states the on state)</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] {
<pre class="language-html" tab="html"><span id="example-id" role="switch"></span></pre>
<pre class="language-pug" tab="pug">span#example-id(role="switch")</pre>
<pre class="language-css" tab="css">[role=switch] {
display: -ms-inline-grid;
display: inline-grid;
border: 1px solid var(--colour-blue);
background-color: var(--colour-grey-xl);
border: 1px solid #2e51a1;
background-color: #d8d8d8;
border-radius: 0.75rem;
height: 1.5rem;
width: 3rem;
@@ -39,12 +39,16 @@
transition: all 500ms;
}
[role=switch][aria-checked=true] {
background-color: var(--colour-blue);
background-color: #2e51a1;
}
[role=switch][aria-checked=true] > span {
margin-left: calc(1.5rem - 5%);
}</pre>
<pre class="language-css" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith
<div tab="scss">
<pre class="language-sass">@import "[path to]/_switch";
@include switch;
</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
@use "sass:math";
@@ -80,7 +84,13 @@ $switch-height: 1.5rem !default;
}
}
}</pre>
<pre class="language-js" data-tab="js">//- DS2 core (c) 2024 Alexander McIlwraith
</div>
<div tab="js">
<pre class="language-js">// Note that switch is a reserved word.
import * as swtch from "[path to]]/_switch.js";
swtch.init();
</pre>
<pre class="language-js">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
function flip(e) {
@@ -107,6 +117,7 @@ module.exports = {
}
}
</pre>
</div>
</div>
</body>
</html>