From 284fd9c17d14f61330a808332b542cd4011a18af Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@decock.org>
Date: Tue, 21 May 2019 20:24:01 +0200
Subject: [PATCH] :lipstick: CSS changes

---
 packages/css-theme/src/_components.scss       |  1 +
 .../css-theme/src/components/_example.scss    | 46 +++++++++++++++++++
 packages/css-theme/src/elements/_figure.scss  |  3 --
 3 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 packages/css-theme/src/components/_example.scss

diff --git a/packages/css-theme/src/_components.scss b/packages/css-theme/src/_components.scss
index 5b7f6745201..731f544e923 100644
--- a/packages/css-theme/src/_components.scss
+++ b/packages/css-theme/src/_components.scss
@@ -5,3 +5,4 @@
 @import "components/draft-design";
 @import "components/topicstoc";
 @import "components/breadcrumbs";
+@import "components/example";
diff --git a/packages/css-theme/src/components/_example.scss b/packages/css-theme/src/components/_example.scss
new file mode 100644
index 00000000000..4201afc42c9
--- /dev/null
+++ b/packages/css-theme/src/components/_example.scss
@@ -0,0 +1,46 @@
+figure.example {
+  div.example {
+    position: relative;
+    svg.freesewing.draft {
+      box-shadow: 0 0 3px #0006;
+    }
+    div.actions {
+      position: absolute;
+      right: 5px;
+      bottom: 14px;
+      button {
+        display: block;
+        background: $fc-text-light;
+        color: $fc-bg-light;
+        padding: 5px;
+        margin: 5px;
+      }
+      button:hover {
+        background: $oc-green-7;
+      }
+      button.active {
+        background: $oc-green-7;
+      }
+    }
+  }
+  > div.design {
+    border-top: 2px solid $oc-gray-4;
+    border-bottom: 2px solid $oc-gray-4;
+  }
+}
+
+.theme-wrapper.dark figure.example div.example {
+  svg.freesewing.draft {
+    box-shadow: none;
+    border: 1px solid $oc-gray-8;
+  }
+  div.actions {
+    button {
+      background: $fc-text-dark;
+      color: $fc-bg-light;
+    }
+    button.active {
+      background: $fc-text-dark;
+    }
+  }
+}
diff --git a/packages/css-theme/src/elements/_figure.scss b/packages/css-theme/src/elements/_figure.scss
index 170f5774440..66c915e2c5c 100644
--- a/packages/css-theme/src/elements/_figure.scss
+++ b/packages/css-theme/src/elements/_figure.scss
@@ -1,9 +1,6 @@
 figure {
   margin: 1rem auto;
 }
-figure.design {
-  border: 1px dashed $oc-gray-5;
-}
 figure figcaption {
   text-align: center;
   font-size: 90%;