first commit

admin-kalsport/themes/default/scss/partials/_switch-btn.scss

@@ -0,0 +1,114 @@
+// on-off switch control
+.prestashop-switch {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 21px;
+  margin-top: 7px;
+
+  &-nolabel {
+    label {
+      display: none;
+    }
+  }
+
+  label {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 1;
+    padding-left: 45px;
+    font-size: 14px;
+    font-weight: 500;
+    opacity: 0;
+    transform: translateY(-50%);
+  }
+
+  .slide-button {
+    position: relative;
+    position: absolute;
+    top: 50%;
+    z-index: 0;
+    display: block;
+    width: 35px;
+    height: 21px;
+    background: #b3c7cd;
+    transform: translateY(-50%);
+    @include transition(0.25s ease-out);
+    @include border-radius(1000px);
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 50%;
+      height: calc(100% - 2px);
+      content: "";
+      background: #fff;
+      transform: translate(1px, -48%);
+      @include border-radius(50%);
+      @include transition(0.25s ease-out);
+    }
+  }
+
+  &-center {
+    .slide-button {
+      position: inherit;
+      margin: auto;
+    }
+  }
+
+  input {
+    position: absolute;
+    left: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    opacity: 0;
+
+    &:disabled {
+      cursor: not-allowed;
+
+      ~ .slide-button {
+        opacity: 0.2;
+      }
+    }
+
+    &:checked {
+      z-index: 0;
+    }
+
+    &:last-of-type:checked {
+      ~ label:last-of-type {
+        opacity: 1;
+      }
+
+      &:disabled ~ label:last-of-type {
+        opacity: 0.2;
+      }
+
+      ~ .slide-button {
+        background: #b3c7cd;
+      }
+    }
+
+    &:first-of-type:checked {
+      ~ label:first-of-type {
+        opacity: 1;
+      }
+
+      &:disabled ~ label:first-of-type {
+        opacity: 0.2;
+      }
+
+      ~ .slide-button {
+        background: $brand-success;
+
+        &::after {
+          transform: translate(15px, -48%);
+        }
+      }
+    }
+  }
+}