diff --git a/contents/_includes/patterns/switch.njk b/contents/_includes/patterns/switch.njk
new file mode 100644
index 0000000..1130b2a
--- /dev/null
+++ b/contents/_includes/patterns/switch.njk
@@ -0,0 +1,8 @@
+
+
\ No newline at end of file
diff --git a/contents/badge.md b/contents/badge.md
index beba435..d929d06 100644
--- a/contents/badge.md
+++ b/contents/badge.md
@@ -33,6 +33,4 @@ keywords: css badge, css flexbox
}
```
-{% demo %}
-{% include "patterns/badge.njk" %}
-{% enddemo %}
+{% demo %}{% include "patterns/badge.njk" %}{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index ef5f7be..c3e1fc9 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -98,6 +98,7 @@ eleventyExcludeFromCollections: true
{% pattern "Slider" %}{% include "patterns/slider.njk" %}{% endpattern %}
{% pattern "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %}
{% pattern "Stepper input" %}{% include "patterns/stepper-input.njk" %}{% endpattern %}
+ {% pattern "Switch" %}{% include "patterns/switch.njk" %}{% endpattern %}
diff --git a/contents/switch.md b/contents/switch.md
new file mode 100644
index 0000000..6cbe302
--- /dev/null
+++ b/contents/switch.md
@@ -0,0 +1,83 @@
+---
+layout: layouts/post.njk
+title: Switch
+description: Create a switch with CSS flexbox
+keywords: css custom checkbox, css flexbox, css switch, css switcher
+---
+
+The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.
+
+## HTML
+
+```html
+
+
+
+```
+
+## CSS
+
+```css
+.switch {
+ display: flex;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Size */
+ height: 2rem;
+ width: 4rem;
+
+ /* Demo */
+ margin-bottom: 0.5rem;
+}
+
+.switch__input {
+ /* Hide the input */
+ display: none;
+}
+
+.switch__circle {
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Size */
+ width: 2rem;
+
+ background-color: #fff;
+}
+```
+
+The switch comes with two variants:
+
+```css
+/* ON status */
+.switch--on {
+ background-color: #357edd;
+ border: 1px solid #357edd;
+
+ /* Push the circle to the right */
+ justify-content: flex-end;
+}
+
+/* OFF status */
+.switch--off {
+ background-color: #d1d5db;
+ border: 1px solid #d1d5db;
+}
+.switch--off .switch__circle {
+ border: 1px solid #d1d5db;
+}
+```
+
+{% demo %}{% include "patterns/switch.njk" %}{% enddemo %}
diff --git a/pages/switch/index.tsx b/pages/switch/index.tsx
deleted file mode 100644
index 91a747c..0000000
--- a/pages/switch/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
- const [checked, setChecked] = React.useState(false);
- const toggle = () => setChecked((c) => !c);
-
- return (
-
-
-
-
-
-
-
-
- The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even
- though it's hidden.
-
-
-
-
-
-
-
-`}
- css={`
- .label {
- display: flex;
-
- /* Rounded border */
- border-radius: 9999px;
-
- /* Size */
- height: 32px;
- width: 64px;
-
- /* OFF status */
- background-color: rgba(0, 0, 0, 0.1);
- border: 1px solid #d1d5db;
-
- /* ON status */
- background-color: #357edd;
- border: 1px solid #357edd;
- /* Push the circle to the right */
- justify-content: flex-end;
- }
-
- .label__input {
- /* Hide the input */
- display: none;
- }
-
- .label__circle {
- /* Rounded border */
- border-radius: 9999px;
-
- /* Size */
- width: 32px;
-
- background-color: #fff;
-
- /* OFF status */
- border: 1px solid #d1d5db;
- }
- `}
- >
-
-
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/switch/Cover.tsx b/patterns/switch/Cover.tsx
deleted file mode 100644
index a4f580b..0000000
--- a/patterns/switch/Cover.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 5c2ad7e..a037d1d 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -73,6 +73,7 @@
@import './patterns/stepper-input';
@import './patterns/sticky-table-column';
@import './patterns/sticky-table-headers';
+@import './patterns/switch';
@import './patterns/teardrop';
@import './patterns/three-dimensions-card';
@import './patterns/timeline';
diff --git a/styles/patterns/_switch.scss b/styles/patterns/_switch.scss
new file mode 100644
index 0000000..33d88c7
--- /dev/null
+++ b/styles/patterns/_switch.scss
@@ -0,0 +1,46 @@
+.switch {
+ display: flex;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Size */
+ height: 2rem;
+ width: 4rem;
+
+ /* Demo */
+ margin-bottom: 0.5rem;
+}
+
+.switch__input {
+ /* Hide the input */
+ display: none;
+}
+
+.switch__circle {
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Size */
+ width: 2rem;
+
+ background-color: #fff;
+}
+
+/* ON status */
+.switch--on {
+ background-color: #357edd;
+ border: 1px solid #357edd;
+
+ /* Push the circle to the right */
+ justify-content: flex-end;
+}
+
+/* OFF status */
+.switch--off {
+ background-color: #d1d5db;
+ border: 1px solid #d1d5db;
+}
+.switch--off .switch__circle {
+ border: 1px solid #d1d5db;
+}