2 files changed, 60 insertions, 5 deletions
diff --git a/packages/merchant-backoffice-ui/src/scss/main.scss b/packages/merchant-backoffice-ui/src/scss/main.scss
index ad698eb26..c4be8aa73 100644
--- a/packages/merchant-backoffice-ui/src/scss/main.scss
+++ b/packages/merchant-backoffice-ui/src/scss/main.scss
@@ -52,6 +52,8 @@ $tooltip-color: red;
 @import "../../node_modules/@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css";
 @import "../../node_modules/bulma-timeline/dist/css/bulma-timeline.min.css";
 
+@import "toggle";
+
 .notification {
   background-color: transparent;
 }
@@ -82,7 +84,7 @@ $tooltip-color: red;
   pointer-events: none;
 }
 
-.toast > .message {
+.toast>.message {
   white-space: pre-wrap;
   opacity: 80%;
 }
@@ -92,6 +94,7 @@ div {
     position: relative;
     pointer-events: none;
     opacity: 0.5;
+
     &:after {
       // @include loader;
       position: absolute;
@@ -104,7 +107,7 @@ div {
   }
 }
 
-input[type="checkbox"]:indeterminate + .check {
+input[type="checkbox"]:indeterminate+.check {
   background: red !important;
 }
 
@@ -125,6 +128,7 @@ input[type="checkbox"]:indeterminate + .check {
 tr:hover .right-sticky {
   background-color: hsl(0, 0%, 80%);
 }
+
 .table.is-striped tbody tr:nth-child(even):hover .right-sticky {
   background-color: hsl(0, 0%, 95%);
 }
@@ -181,11 +185,11 @@ div[data-tooltip]::before {
   position: absolute;
 }
 
-.modal-card-body > p {
+.modal-card-body>p {
   padding: 1em;
 }
 
-.modal-card-body > p.warning {
+.modal-card-body>p.warning {
   background-color: #fffbdd;
   border: solid 1px #f2e9bf;
-}
+}
+\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/scss/toggle.scss b/packages/merchant-backoffice-ui/src/scss/toggle.scss
new file mode 100644
index 000000000..24636da2f
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/toggle.scss
@@ -0,0 +1,51 @@
+$green: #56c080;
+
+.toggle {
+  cursor: pointer;
+  display: inline-block;
+}
+.toggle-switch {
+  display: inline-block;
+  background: #ccc;
+  border-radius: 16px;
+  width: 58px;
+  height: 32px;
+  position: relative;
+  vertical-align: middle;
+  transition: background 0.25s;
+  &:before,
+  &:after {
+    content: "";
+  }
+  &:before {
+    display: block;
+    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    transition: left 0.25s;
+  }
+  .toggle:hover &:before {
+    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+  }
+  .toggle-checkbox:checked + & {
+    background: $green;
+    &:before {
+      left: 30px;
+    }
+  }
+}
+.toggle-checkbox {
+  position: absolute;
+  visibility: hidden;
+}
+.toggle-label {
+  margin-left: 5px;
+  position: relative;
+  top: 2px;
+}