@qite/tide-components 1.0.13 → 1.0.14

package/styles/components/_passenger-picker.scss

@@ -1,306 +1,306 @@
-@use '../components/mixins' as mixins;
-
-.passenger-picker {
-  z-index: 30; // was 1110005
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-  max-width: 100%;
-  padding: 1.5rem;
-
-  background: var(--tide-booking-passenger-picker-background);
-  border-bottom: var(--tide-booking-passenger-picker-border);
-  box-shadow: none;
-  @extend %transition-easing;
-
-  @include mixins.media-sm {
-    width: 100%;
-    height: auto;
-    position: absolute;
-    top: 64px;
-    left: 0;
-    box-shadow: var(--tide-booking-passenger-picker-box-shadow);
-  }
-
-  &__line {
-    border-bottom: var(--tide-booking-passenger-picker-header-border);
-    margin-top: 1rem;
-
-    &--room {
-      margin: 1rem 0;
-    }
-  }
-
-  &__items {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 0 1.5rem;
-
-    @include mixins.media-sm {
-      padding: 0;
-      padding-bottom: 1rem;
-    }
-  }
-
-  &__item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &-text {
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-      font-size: var(--tide-booking-passenger-picker-room-item-font-size);
-      font-weight: var(--tide-booking-passenger-picker-room-item-font-weight);
-      color: var(--tide-booking-passenger-picker-room-item-color);
-
-      &-age {
-        font-size: var(--tide-booking-passenger-picker-room-item-age-font-size);
-        font-weight: var(--tide-booking-passenger-picker-room-item-age-font-weight);
-        color: var(--tide-booking-passenger-picker-room-item-age-color);
-      }
-    }
-
-    &-selector {
-      display: flex;
-      gap: 10px;
-    }
-  }
-
-  &__rooms {
-    &-wrapper {
-      padding: 0 1.5rem;
-
-      @include mixins.media-sm {
-        padding: 0;
-        max-height: 100%;
-
-        &::-webkit-scrollbar {
-          display: none;
-        }
-
-        -ms-overflow-style: none; // IE and Edge
-        scrollbar-width: none; // Firefox
-      }
-    }
-
-    &-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 3px;
-      padding: 0 15px;
-      padding-bottom: 10px;
-      border-bottom: var(--tide-booking-passenger-picker-header-border);
-      margin-bottom: 10px;
-
-      @include mixins.media-sm {
-        padding: 0;
-        padding-bottom: 10px;
-      }
-
-      &-title {
-        display: flex;
-        align-items: center;
-        gap: 3px;
-        margin-bottom: 0px;
-        color: var(--tide-booking-passenger-picker-header-color);
-        font-weight: var(--tide-booking-passenger-picker-header-font-weight);
-      }
-
-      &-count {
-        color: var(--tide-booking-passenger-picker-header-count-color);
-      }
-    }
-  }
-
-  &__room {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    &-title {
-      font-weight: var(--tide-booking-passenger-picker-room-title-font-weight);
-      color: var(--tide-booking-passenger-picker-room-title-color);
-    }
-  }
-
-  &__add-room {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    max-width: 10rem;
-    height: 2.25rem;
-    font-size: 16px;
-
-    background: red;
-    color: white;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &:hover {
-      background: purple;
-      cursor: pointer;
-    }
-
-    &--disabled {
-      opacity: 60%;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &__remove-room {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  &__class {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    font-size: 14px;
-  }
-
-  &__info-message {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    padding: var(--tide-booking-passenger-picker-room-info-message-padding);
-    background: var(--tide-booking-passenger-picker-room-info-message-background);
-    border: var(--tide-booking-passenger-picker-room-info-message-border);
-    border-radius: var(--tide-booking-passenger-picker-room-info-message-border-radius);
-    margin-top: 7.5px;
-
-    &-icon {
-      fill: var(--tide-booking-passenger-picker-room-info-message-color-icon);
-      width: var(--tide-booking-passenger-picker-room-info-message-icon-size);
-      height: var(--tide-booking-passenger-picker-room-info-message-icon-size);
-      flex-shrink: 0;
-    }
-
-    &-explanation {
-      font-size: var(--tide-booking-passenger-picker-room-info-message-font-size);
-      color: var(--tide-booking-passenger-picker-room-info-message-color);
-      font-style: var(--tide-booking-passenger-picker-room-info-message-font-style);
-    }
-
-    // &-link {
-    //   color: red;
-    //   text-decoration: underline;
-    //   cursor: pointer;
-    // }
-  }
-}
-
-.dropdown {
-  position: relative;
-
-  &__input {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-
-    @include mixins.media-sm {
-      align-items: center;
-      flex-direction: row;
-    }
-  }
-
-  .dropdown-toggle {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    padding: 10px 12.5px;
-    font-size: 16px;
-
-    background: var(--tide-booking-dropdown-background);
-    color: var(--tide-booking-dropdown-color);
-    border: var(--tide-booking-dropdown-border);
-    border-radius: var(--tide-booking-dropdown-border-radius);
-
-    cursor: pointer;
-    text-align: left;
-    transition: all 0.5s;
-
-    &:hover {
-      color: var(--tide-booking-dropdown-color-hover);
-      border: var(--tide-booking-dropdown-border-hover);
-      background: var(--tide-booking-dropdown-background-hover);
-    }
-
-    @include mixins.media-sm {
-      width: auto;
-      min-width: 200px;
-    }
-
-    &--open {
-      color: var(--tide-booking-dropdown-color-focus);
-      border: var(--tide-booking-dropdown-border-focus);
-      background: var(--tide-booking-dropdown-background-focus);
-
-      .arrow {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .arrow {
-    font-size: 18px;
-    width: fit-content;
-    transition: transform 0.3s ease;
-  }
-
-  .dropdown-menu {
-    position: absolute;
-    z-index: 40;
-    top: auto;
-    bottom: auto;
-
-    width: 100%;
-    max-height: 250px;
-    margin: 0;
-    padding: 0;
-
-    list-style: none;
-    background: var(--tide-booking-dropdown-menu-background);
-    border: var(--tide-booking-dropdown-menu-border);
-    border-radius: var(--tide-booking-dropdown-menu-border-radius);
-    box-shadow: var(--tide-booking-dropdown-menu-box-shadow);
-    overflow-y: auto;
-    @extend %scrollbar-thin;
-
-    li {
-      padding: 10px;
-      font-size: 16px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      color: var(--tide-booking-dropdown-menu-option-color);
-      fill: var(--tide-booking-dropdown-menu-option-color);
-      display: flex;
-      align-items: center;
-      gap: 5px;
-
-      &:hover {
-        background: var(--tide-booking-dropdown-menu-option-background-hover);
-        color: var(--tide-booking-dropdown-menu-option-color-hover);
-        fill: var(--tide-booking-dropdown-menu-option-color-hover);
-      }
-    }
-
-    &--up {
-      bottom: 100%;
-    }
-
-    &--down {
-      top: 100%;
-    }
-  }
-}
+@use '../components/mixins' as mixins;
+
+.passenger-picker {
+  z-index: 30; // was 1110005
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 100%;
+  padding: 1.5rem;
+
+  background: var(--tide-booking-passenger-picker-background);
+  border-bottom: var(--tide-booking-passenger-picker-border);
+  box-shadow: none;
+  @extend %transition-easing;
+
+  @include mixins.media-sm {
+    width: 100%;
+    height: auto;
+    position: absolute;
+    top: 64px;
+    left: 0;
+    box-shadow: var(--tide-booking-passenger-picker-box-shadow);
+  }
+
+  &__line {
+    border-bottom: var(--tide-booking-passenger-picker-header-border);
+    margin-top: 1rem;
+
+    &--room {
+      margin: 1rem 0;
+    }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0 1.5rem;
+
+    @include mixins.media-sm {
+      padding: 0;
+      padding-bottom: 1rem;
+    }
+  }
+
+  &__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-text {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      font-size: var(--tide-booking-passenger-picker-room-item-font-size);
+      font-weight: var(--tide-booking-passenger-picker-room-item-font-weight);
+      color: var(--tide-booking-passenger-picker-room-item-color);
+
+      &-age {
+        font-size: var(--tide-booking-passenger-picker-room-item-age-font-size);
+        font-weight: var(--tide-booking-passenger-picker-room-item-age-font-weight);
+        color: var(--tide-booking-passenger-picker-room-item-age-color);
+      }
+    }
+
+    &-selector {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  &__rooms {
+    &-wrapper {
+      padding: 0 1.5rem;
+
+      @include mixins.media-sm {
+        padding: 0;
+        max-height: 100%;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        -ms-overflow-style: none; // IE and Edge
+        scrollbar-width: none; // Firefox
+      }
+    }
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 3px;
+      padding: 0 15px;
+      padding-bottom: 10px;
+      border-bottom: var(--tide-booking-passenger-picker-header-border);
+      margin-bottom: 10px;
+
+      @include mixins.media-sm {
+        padding: 0;
+        padding-bottom: 10px;
+      }
+
+      &-title {
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        margin-bottom: 0px;
+        color: var(--tide-booking-passenger-picker-header-color);
+        font-weight: var(--tide-booking-passenger-picker-header-font-weight);
+      }
+
+      &-count {
+        color: var(--tide-booking-passenger-picker-header-count-color);
+      }
+    }
+  }
+
+  &__room {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    &-title {
+      font-weight: var(--tide-booking-passenger-picker-room-title-font-weight);
+      color: var(--tide-booking-passenger-picker-room-title-color);
+    }
+  }
+
+  &__add-room {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    max-width: 10rem;
+    height: 2.25rem;
+    font-size: 16px;
+
+    background: red;
+    color: white;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: purple;
+      cursor: pointer;
+    }
+
+    &--disabled {
+      opacity: 60%;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__remove-room {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  &__class {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    font-size: 14px;
+  }
+
+  &__info-message {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: var(--tide-booking-passenger-picker-room-info-message-padding);
+    background: var(--tide-booking-passenger-picker-room-info-message-background);
+    border: var(--tide-booking-passenger-picker-room-info-message-border);
+    border-radius: var(--tide-booking-passenger-picker-room-info-message-border-radius);
+    margin-top: 7.5px;
+
+    &-icon {
+      fill: var(--tide-booking-passenger-picker-room-info-message-color-icon);
+      width: var(--tide-booking-passenger-picker-room-info-message-icon-size);
+      height: var(--tide-booking-passenger-picker-room-info-message-icon-size);
+      flex-shrink: 0;
+    }
+
+    &-explanation {
+      font-size: var(--tide-booking-passenger-picker-room-info-message-font-size);
+      color: var(--tide-booking-passenger-picker-room-info-message-color);
+      font-style: var(--tide-booking-passenger-picker-room-info-message-font-style);
+    }
+
+    // &-link {
+    //   color: red;
+    //   text-decoration: underline;
+    //   cursor: pointer;
+    // }
+  }
+}
+
+.dropdown {
+  position: relative;
+
+  &__input {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    @include mixins.media-sm {
+      align-items: center;
+      flex-direction: row;
+    }
+  }
+
+  .dropdown-toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 10px 12.5px;
+    font-size: 16px;
+
+    background: var(--tide-booking-dropdown-background);
+    color: var(--tide-booking-dropdown-color);
+    border: var(--tide-booking-dropdown-border);
+    border-radius: var(--tide-booking-dropdown-border-radius);
+
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.5s;
+
+    &:hover {
+      color: var(--tide-booking-dropdown-color-hover);
+      border: var(--tide-booking-dropdown-border-hover);
+      background: var(--tide-booking-dropdown-background-hover);
+    }
+
+    @include mixins.media-sm {
+      width: auto;
+      min-width: 200px;
+    }
+
+    &--open {
+      color: var(--tide-booking-dropdown-color-focus);
+      border: var(--tide-booking-dropdown-border-focus);
+      background: var(--tide-booking-dropdown-background-focus);
+
+      .arrow {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .arrow {
+    font-size: 18px;
+    width: fit-content;
+    transition: transform 0.3s ease;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    z-index: 40;
+    top: auto;
+    bottom: auto;
+
+    width: 100%;
+    max-height: 250px;
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+    background: var(--tide-booking-dropdown-menu-background);
+    border: var(--tide-booking-dropdown-menu-border);
+    border-radius: var(--tide-booking-dropdown-menu-border-radius);
+    box-shadow: var(--tide-booking-dropdown-menu-box-shadow);
+    overflow-y: auto;
+    @extend %scrollbar-thin;
+
+    li {
+      padding: 10px;
+      font-size: 16px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      color: var(--tide-booking-dropdown-menu-option-color);
+      fill: var(--tide-booking-dropdown-menu-option-color);
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+      &:hover {
+        background: var(--tide-booking-dropdown-menu-option-background-hover);
+        color: var(--tide-booking-dropdown-menu-option-color-hover);
+        fill: var(--tide-booking-dropdown-menu-option-color-hover);
+      }
+    }
+
+    &--up {
+      bottom: 100%;
+    }
+
+    &--down {
+      top: 100%;
+    }
+  }
+}

package/styles/components/_phone-input.scss

@@ -1,8 +1,8 @@
-.phone-input {
-  display: flex;
-  gap: 5px;
-
-  .dropdown {
-    width: 40%;
-  }
-}
+.phone-input {
+  display: flex;
+  gap: 5px;
+
+  .dropdown {
+    width: 40%;
+  }
+}