@qite/tide-booking-component 1.4.92 → 1.4.93

package/styles/components/_checkbox.scss

@@ -1,230 +1,230 @@
-.checkbox {
-  @extend %reset;
-  position: relative;
-  padding: 15px * 0.3 0 15px * 0.3 0px;
-  @include row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  font-family: var(--tide-booking-checkbox-font-family);
-  user-select: none;
-  @extend %transition-easing;
-
-  @include media-xl {
-    padding: 15px * 0.3 0 15px * 0.3 0px;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    // color: $gray-dark;
-  }
-
-  & + & {
-    margin-top: 10px;
-  }
-
-  &__description {
-    @extend %reset;
-    width: 100%;
-    display: flex;
-    @include row;
-    justify-content: space-between;
-    word-break: break-word;
-  }
-
-  &__label {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    @extend %transition-easing;
-  }
-
-  &__input {
-    position: relative;
-    min-width: 50px;
-    height: 28px;
-    min-height: auto;
-    left: 0;
-    padding: 0;
-    margin-top: 1px;
-    margin-left: 0;
-    display: inline-flex;
-    align-items: center;
-    border-radius: 25px;
-    border: 1.5px solid var(--tide-booking-toggle-switch-background);
-    background: var(--tide-booking-toggle-switch-background);
-    appearance: none;
-    @extend %transition-easing;
-    cursor: pointer;
-
-    @include media-xl {
-      min-width: 50px;
-      height: 28px;
-    }
-
-    &:focus,
-    &:hover {
-      border: none;
-    }
-
-    &:checked {
-      border-color: var(--tide-booking-toggle-switch-background-toggled);
-      background: var(--tide-booking-toggle-switch-background-toggled);
-
-      &:after {
-        transform: translate(100%, -50%);
-      }
-
-      span {
-        // color: hotpink;
-      }
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      // transform: translate3D(2px, 0, 0);
-      top: 50%;
-      left: 4%;
-      transform: translate(0%, -50%);
-      border: 1px solid transparent;
-      border-radius: 50%;
-      background: var(--tide-booking-toggle-switch-after-color);
-      @include transitionEasing($duration: 0.2s);
-
-      @include media-xl {
-        width: 20px;
-        height: 20px;
-      }
-    }
-  }
-
-  &__details {
-    @extend %reset;
-    @include row--sm;
-    margin-left: auto;
-  }
-
-  // &__sidenote {
-  //   @extend %reset;
-  //   white-space: nowrap;
-  //   @include transitionEasing($duration: 0.2s);
-
-  //   @include media-sm {
-  //     padding-left: 15px;
-  //     margin-left: auto;
-  //     text-align: right;
-  //     justify-content: flex-end;
-  //   }
-
-  //   @include media-md {
-  //     padding-left: 15px * 2;
-  //   }
-  // }
-
-  &__value {
-    @extend %reset;
-    padding-left: 10px;
-    margin-top: 15px * 0.3;
-    margin-left: auto;
-    flex-shrink: 0;
-    font-style: normal;
-    text-align: right;
-    justify-content: flex-end;
-    white-space: nowrap;
-    @include transitionEasing($duration: 0.2s);
-
-    @include media-sm {
-      width: 13rem;
-      flex-grow: 0;
-      margin-top: 0;
-      margin-left: 15px;
-    }
-
-    @include media-md {
-      margin-left: 15px * 2;
-    }
-  }
-
-  &--reverse {
-    padding-left: 0;
-    padding-right: 15px * 4;
-
-    .checkbox__input {
-      left: initial;
-      right: 0;
-    }
-  }
-
-  span {
-    @extend %transition-easing;
-  }
-
-  &--label {
-    cursor: default;
-
-    .checkbox__input {
-      border: none;
-      background-color: transparent;
-      cursor: default;
-      appearance: none;
-    }
-
-    .checkbox__label {
-      cursor: default;
-    }
-  }
-}
-
-// .footer {
-//   .checkbox__input + span {
-//     margin-top: 0.3rem;
-//   }
-// }
-
-.form {
-  &__group--error .checkbox {
-    color: var(--tide-booking-invalid);
-
-    &__label {
-      color: var(--tide-booking-invalid);
-    }
-
-    &__input {
-      background: var(--tide-booking-invalid-light);
-
-      &:after {
-        background: var(--tide-booking-invalid);
-      }
-    }
-  }
-
-  &__region-header .checkbox {
-    margin-top: 0px;
-    margin-bottom: 15px;
-    white-space: nowrap;
-
-    @include media-xs {
-      margin-bottom: initial;
-      margin-left: auto;
-    }
-
-    // .checkbox__input {
-    //   margin-top: -2.5px;
-    // }
-  }
-}
-
-.schedule {
-  &__mode-toggle .checkbox {
-    padding-left: 0;
-  }
-
-  &__mode-toggle .checkbox__input {
-    position: relative;
-    margin-right: 1em;
-  }
-}
+.checkbox {
+  @extend %reset;
+  position: relative;
+  padding: 15px * 0.3 0 15px * 0.3 0px;
+  @include row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  font-family: var(--tide-booking-checkbox-font-family);
+  user-select: none;
+  @extend %transition-easing;
+
+  @include media-xl {
+    padding: 15px * 0.3 0 15px * 0.3 0px;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    // color: $gray-dark;
+  }
+
+  & + & {
+    margin-top: 10px;
+  }
+
+  &__description {
+    @extend %reset;
+    width: 100%;
+    display: flex;
+    @include row;
+    justify-content: space-between;
+    word-break: break-word;
+  }
+
+  &__label {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    @extend %transition-easing;
+  }
+
+  &__input {
+    position: relative;
+    min-width: 50px;
+    height: 28px;
+    min-height: auto;
+    left: 0;
+    padding: 0;
+    margin-top: 1px;
+    margin-left: 0;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 25px;
+    border: 1.5px solid var(--tide-booking-toggle-switch-background);
+    background: var(--tide-booking-toggle-switch-background);
+    appearance: none;
+    @extend %transition-easing;
+    cursor: pointer;
+
+    @include media-xl {
+      min-width: 50px;
+      height: 28px;
+    }
+
+    &:focus,
+    &:hover {
+      border: none;
+    }
+
+    &:checked {
+      border-color: var(--tide-booking-toggle-switch-background-toggled);
+      background: var(--tide-booking-toggle-switch-background-toggled);
+
+      &:after {
+        transform: translate(100%, -50%);
+      }
+
+      span {
+        // color: hotpink;
+      }
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      // transform: translate3D(2px, 0, 0);
+      top: 50%;
+      left: 4%;
+      transform: translate(0%, -50%);
+      border: 1px solid transparent;
+      border-radius: 50%;
+      background: var(--tide-booking-toggle-switch-after-color);
+      @include transitionEasing($duration: 0.2s);
+
+      @include media-xl {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  &__details {
+    @extend %reset;
+    @include row--sm;
+    margin-left: auto;
+  }
+
+  // &__sidenote {
+  //   @extend %reset;
+  //   white-space: nowrap;
+  //   @include transitionEasing($duration: 0.2s);
+
+  //   @include media-sm {
+  //     padding-left: 15px;
+  //     margin-left: auto;
+  //     text-align: right;
+  //     justify-content: flex-end;
+  //   }
+
+  //   @include media-md {
+  //     padding-left: 15px * 2;
+  //   }
+  // }
+
+  &__value {
+    @extend %reset;
+    padding-left: 10px;
+    margin-top: 15px * 0.3;
+    margin-left: auto;
+    flex-shrink: 0;
+    font-style: normal;
+    text-align: right;
+    justify-content: flex-end;
+    white-space: nowrap;
+    @include transitionEasing($duration: 0.2s);
+
+    @include media-sm {
+      width: 13rem;
+      flex-grow: 0;
+      margin-top: 0;
+      margin-left: 15px;
+    }
+
+    @include media-md {
+      margin-left: 15px * 2;
+    }
+  }
+
+  &--reverse {
+    padding-left: 0;
+    padding-right: 15px * 4;
+
+    .checkbox__input {
+      left: initial;
+      right: 0;
+    }
+  }
+
+  span {
+    @extend %transition-easing;
+  }
+
+  &--label {
+    cursor: default;
+
+    .checkbox__input {
+      border: none;
+      background-color: transparent;
+      cursor: default;
+      appearance: none;
+    }
+
+    .checkbox__label {
+      cursor: default;
+    }
+  }
+}
+
+// .footer {
+//   .checkbox__input + span {
+//     margin-top: 0.3rem;
+//   }
+// }
+
+.form {
+  &__group--error .checkbox {
+    color: var(--tide-booking-invalid);
+
+    &__label {
+      color: var(--tide-booking-invalid);
+    }
+
+    &__input {
+      background: var(--tide-booking-invalid-light);
+
+      &:after {
+        background: var(--tide-booking-invalid);
+      }
+    }
+  }
+
+  &__region-header .checkbox {
+    margin-top: 0px;
+    margin-bottom: 15px;
+    white-space: nowrap;
+
+    @include media-xs {
+      margin-bottom: initial;
+      margin-left: auto;
+    }
+
+    // .checkbox__input {
+    //   margin-top: -2.5px;
+    // }
+  }
+}
+
+.schedule {
+  &__mode-toggle .checkbox {
+    padding-left: 0;
+  }
+
+  &__mode-toggle .checkbox__input {
+    position: relative;
+    margin-right: 1em;
+  }
+}