1 files changed, 68 insertions, 0 deletions
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.scss
new file mode 100644
index 0000000..2a954af
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.scss
@@ -0,0 +1,68 @@
+.toolbar {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding: 1rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.toggle-edition {
+  --gap: 0.5rem;
+  --toggle-width: 3.5rem;
+
+  display: flex;
+  align-items: center;
+
+  &__label {
+    display: inline-flex;
+    gap: var(--gap);
+    position: relative;
+    cursor: pointer;
+    color: hsl(0, 0%, 30%);
+    font-size: 0.9rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+
+    &::before {
+      order: 2;
+      content: "";
+      display: block;
+      background: hsl(0, 0%, 80%);
+      border-radius: 2rem;
+      box-shadow: inset 0 0 2px 0 hsla(0, 0%, 0%, 0.5),
+        0 0 0 2px hsla(0, 0%, 0%, 0.5);
+      width: var(--toggle-width);
+      padding: 0 0.6rem;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      width: calc(var(--toggle-width) / 2);
+      background: hsl(0, 85%, 41%);
+      border: 1px solid hsl(0, 0%, 31%);
+      border-radius: 50%;
+      box-shadow: 0 0 0 1px hsla(0, 0%, 36%, 0.5);
+      position: absolute;
+      right: calc((var(--toggle-width) + var(--gap)) / 2);
+      top: -1px;
+      bottom: -1px;
+      transition: all 0.3s ease-in-out 0s;
+    }
+  }
+
+  &__checkbox {
+    opacity: 0;
+
+    &:checked ~ {
+      .toggle-edition__label::after {
+        background: hsl(120, 76%, 31%);
+        right: -1px;
+      }
+    }
+  }
+}