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

Reprocess CSS to be not minimised.

Browse Source
This commit is contained in:
A McIlwraith
2025-12-23 09:12:49 -05:00
parent 37762504a4
commit cfd23cd1a3
21 changed files with 1071 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,11 +22,37 @@
<p class="switch">
<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">
<tabset id="switches">
<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 #2e51a1;background-color:#d8d8d8;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" tab="css">[role=switch] {
display: -ms-inline-grid;
display: inline-grid;
border: 1px solid #2e51a1;
background-color: #d8d8d8;
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>
<div tab="scss">
<h2>Example</h2>
<pre class="language-sass">@use "scss/core/switch/_switch";
@include switch;
</pre>
@@ -68,6 +94,7 @@ $switch-height: 1.5rem !default;
}</pre>
</div>
<div tab="js">
<h2>Example</h2>
<pre class="language-js">// Note that switch is a reserved word.
import * as swtch from "./js/core/switch/_switch.js";
swtch.init();
@@ -104,6 +131,6 @@ module.exports = {
}
</pre>
</div>
</div>
</tabset>
</body>
</html>