Component: State

docs/pages/components/state.md

@@ -0,0 +1,51 @@
+---
+title: 'Components: State - Sloth.css'
+description: State component of Sloth.css.
+---
+
+## State
+
+The state component can be used for areas that indicate a certain state for users to get information,
+that something is missing or needs to be done first to achieve a goal.
+
+### Empty state
+
+Use the `.state.empty` classes for a placeholder section which awaits user input to show a result.
+
+<div class="demo">
+  <div class="state empty">
+    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M17 17v-13h4" /><path d="M13 5h-10" /><path d="M3 9l10 0" /><path d="M9 13h-6" /></svg>
+    <h3>You have no playlists</h3>
+    <p>Click the button to start collecting songs</p>
+    <button>Add playlist</button>
+  </div>
+</div>
+
+```html
+<div class="state empty">
+  <svg>...</svg>
+  <h3>You have no playlists</h3>
+  <p>Click the button to start collecting songs</p>
+  <button>Add playlist</button>
+</div>
+```
+
+### Highlighted state
+
+Use the `.state.highlighted` classes for an accentuated section e.g. which awaits a user action like a drag and drop target area.
+
+<div class="demo">
+  <div class="state highlighted">
+    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" /><path d="M13 13l9 3l-4 2l-2 4l-3 -9" /><path d="M3 3l0 .01" /><path d="M7 3l0 .01" /><path d="M11 3l0 .01" /><path d="M15 3l0 .01" /><path d="M3 7l0 .01" /><path d="M3 11l0 .01" /><path d="M3 15l0 .01" /></svg>
+    <h3>Office document conversion</h3>
+    <p>Drag supported documents here</p>
+  </div>
+</div>
+
+```html
+<div class="state highlighted">
+  <svg>...</svg>
+  <h3>Office document conversion</h3>
+  <p>Drag supported documents here</p>
+</div>
+```

eleventy.config.js

@@ -31,6 +31,7 @@ module.exports = function(eleventyConfig) {
       'breadcrumb',
       'callout',
       'separator',
+      'state',
     ],
   });
 

src/_components.css

@@ -10,7 +10,7 @@
 /* @import 'components/_notification.css'; */
 @import 'components/_separator.css';
 /* @import 'components/_sequence.css'; */
-/* @import 'components/_state.css'; */
+@import 'components/_state.css';
 /* @import 'components/_step.css'; */
 /* @import 'components/_tab.css'; */
 /* @import 'components/_tag.css'; */

src/components/_state.css

@@ -0,0 +1,29 @@
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--color-text-muted);
+    margin: .5rem 0 0 0;
+  }
+
+  &.empty {
+    background-color: var(--color-background-muted);
+    color: var(--color-text-muted);
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--color-text-muted);
+    }
+  }
+  &.highlighted {
+    background-color: color-mix(in hsl, var(--color-accent) 70%, black);
+    color: var(--color-text-dark);
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--color-text-dark);
+    }
+  }
+}