@qite/tide-booking-component 1.2.0 → 1.2.1

package/styles/components/_loader.scss

@@ -0,0 +1,71 @@
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  z-index: 1;
+
+  &__spinner {
+    max-width: 50px;
+    max-height: 50px;
+    min-width: 50px;
+    min-height: 50px;
+    border: var(--tide-booking-spinner-border);
+    border-top-color: var(--tide-booking-spinner-border-top-color);
+    border-radius: 50%;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+
+    &--dots {
+      width: auto;
+      height: auto;
+      border: none;
+      border-radius: initial;
+      animation: initial;
+
+      &:after {
+        content: " .";
+        font-size: 20px;
+        animation: dots 1s steps(5, end) infinite;
+      }
+    }
+
+  }
+
+  &--centered {
+    width: 100%;
+    align-items: center;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dots {
+  0%,
+  20% {
+    color: rgba(0, 0, 0, 0);
+    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+  }
+
+  40% {
+    color: var(--tide-booking-spinner-animation-color);
+    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+  }
+
+  60% {
+    text-shadow: 0.25em 0 0 var(--tide-booking-spinner-animation-color), 0.5em 0 0 rgba(0, 0, 0, 0);
+  }
+
+  80%,
+  100% {
+    text-shadow: 0.25em 0 0 var(--tide-booking-spinner-animation-color), 0.5em 0 0 var(--tide-booking-spinner-animation-color);
+  }
+}

package/styles/components/_mixins.scss

@@ -0,0 +1,518 @@
+// RESET
+@mixin reset {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+// MEDIA QUERIES
+@mixin media-xs {
+  @media only screen and (min-width: 576px) {
+    @content;
+  }
+}
+
+@mixin media-sm {
+  @media only screen and (min-width: 768px) {
+    @content;
+  }
+}
+
+@mixin media-md {
+  @media only screen and (min-width: 992px) {
+    @content;
+  }
+}
+
+@mixin media-lg {
+  @media only screen and (min-width: 1200px) {
+    @content;
+  }
+}
+
+@mixin media-xl {
+  @media only screen and (min-width: 1650px) {
+    @content;
+  }
+}
+
+@mixin media-xxl {
+  @media only screen and (min-width: 1920px) {
+    @content;
+  }
+}
+
+@mixin orientation--landscape {
+  @media only screen and (orientation: landscape) {
+    @content;
+  }
+}
+
+// GRID
+
+
+@mixin container-wide() {
+  @include container();
+  max-width: $container-wide;
+}
+
+@mixin container-medium() {
+  @include container();
+  max-width: $container-medium;
+}
+
+@mixin container-small() {
+  @include container();
+  max-width: $container-small;
+}
+
+@mixin container-article() {
+  @include container();
+  max-width: $container-article;
+}
+
+@mixin row() {
+  display: flex;
+  justify-content: center;
+  //flex-wrap: wrap;
+}
+
+@mixin row--xs() {
+  display: flex;
+  flex-direction: column;
+
+  @include media-xs {
+    flex-direction: row;
+  }
+}
+
+@mixin row--sm() {
+  display: flex;
+  flex-direction: column;
+
+  @include media-sm {
+    flex-direction: row;
+  }
+}
+
+@mixin row--md() {
+  display: flex;
+  flex-direction: column;
+
+  @include media-md {
+    flex-direction: row;
+  }
+}
+
+@mixin row--lg() {
+  display: flex;
+  flex-direction: column;
+
+  @include media-lg {
+    flex-direction: row;
+  }
+}
+
+@mixin row--xl() {
+  display: flex;
+  flex-direction: column;
+
+  @include media-xl {
+    flex-direction: row;
+  }
+}
+
+@mixin row--xxl() {
+  display: flex;
+  flex-direction: column;
+
+  @include media-xxl {
+    flex-direction: row;
+  }
+}
+
+@mixin column() {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin column--xs() {
+  display: flex;
+
+  @include media-xs {
+    flex-direction: column;
+  }
+}
+
+@mixin column--sm() {
+  display: flex;
+
+  @include media-sm {
+    flex-direction: column;
+  }
+}
+
+@mixin column--md() {
+  display: flex;
+
+  @include media-md {
+    flex-direction: column;
+  }
+}
+
+@mixin column--lg() {
+  display: flex;
+
+  @include media-lg {
+    flex-direction: column;
+  }
+}
+
+@mixin column--xl() {
+  display: flex;
+
+  @include media-xl {
+    flex-direction: column;
+  }
+}
+
+@mixin column--xxl() {
+  display: flex;
+
+  @include media-xxl {
+    flex-direction: column;
+  }
+}
+
+@mixin gutter() {
+  padding: 10px;
+
+  @include media-sm {
+    padding: 20px;
+  }
+
+  @include media-lg {
+    padding: 30px;
+  }
+}
+
+@mixin gutter--compact() {
+  padding: 10px;
+
+  @include media-sm {
+    padding: 15px;
+  }
+
+  @include media-lg {
+    padding: 20px;
+  }
+}
+
+@mixin flex--centerXY() {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin flex--centerX() {
+  display: inline-flex;
+  justify-content: center;
+}
+
+@mixin flex--centerY() {
+  display: inline-flex;
+  align-items: center;
+}
+
+@mixin object-fit--cover() {
+  object-fit: cover;
+}
+
+@mixin object-fit--contain() {
+  object-fit: contain;
+}
+
+@mixin object-position--center() {
+  object-position: center;
+}
+
+@mixin overflow--x {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+@mixin overflow--y {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+@mixin overflow--xy {
+  overflow: auto;
+}
+
+// UI
+
+@mixin body {
+  font-family: var(--tide-booking-font-body);
+  font-size: var(--tide-booking-font-size-body);
+  line-height: var(--tide-booking-line-height-body);
+  color: var(--tide-booking-gray-dark);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @include media-lg {
+    font-size: var(--tide-booking-font-size-body-lg);
+  }
+
+  &.has-overlay,
+  &.has-itinerary-schedule-active {
+    overflow: hidden;
+  }
+}
+
+@mixin input {
+  min-height: var(--tide-booking-datepicker-input-height);
+  padding: 0 15px;
+  border: var(--tide-booking-datepicker-input-border);
+  border-radius: var(--tide-booking-datepicker-input-border-radius);
+  font-family: var(--tide-booking-font-body);
+  //font-size: 1.6rem;
+  font-size: var(--tide-booking-font-size-body);
+  font-weight: 400;
+  outline: none;
+  color: var(--tide-booking-datepicker-input-color);
+  background-color: var(--tide-booking-datepicker-input-background);
+
+  @include media-lg {
+    //font-size: 1.8rem;
+    font-size: var(--tide-booking-font-size-body-lg);
+    min-height: var(--tide-booking-datepicker-input-height-lg);
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-within,
+  &:active {
+    outline: none;
+  }
+}
+
+@mixin textarea {
+  min-height: 25px;
+  max-height: 60vh;
+  padding: 12px 15px;
+  font-family: var(--tide-booking-font-body);
+  //font-size: 1.6rem;
+  font-size: var(--input-font-size--mobile);
+  border-radius: 5px;
+  resize: vertical;
+  outline: none;
+
+  @include media-xs {
+    //font-size: 1.8rem;
+    font-size: var(--input-font-size--desktop);
+  }
+
+  &:focus,
+  &:active {
+    border-color: var(--tide-booking-color-secondary);
+  }
+}
+
+@mixin button {
+  cursor: pointer;
+  outline: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}
+
+@mixin strong {
+  font-weight: 400;
+  color: var(--tide-booking-black);
+}
+
+@mixin small {
+  font-size: var(--tide-booking-small-font-size--mobile);
+
+  @include media-xs {
+    font-size: var(--tide-booking-small-font-size--desktop);
+  }
+}
+
+@mixin border-radius {
+  border-radius: 5px;
+}
+
+@mixin lineclamp($lineclamp-amount: 1) {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: $lineclamp-amount;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  /* autoprefixer: off */
+}
+
+@mixin placeholder {
+  font-style: italic;
+  color: var(--tide-booking-gray-dark);
+}
+
+
+@mixin hover-to-color {
+  &:hover {
+    color: var(--tide-booking-black);
+  }
+}
+
+@mixin focus-to-color {
+  &:focus,
+  &:active {
+    color: var(--tide-booking-black);
+  }
+}
+
+// TYPOGRAPHY
+@mixin heading {
+  margin: 0;
+  display: inline-flex;
+  flex-flow: row wrap;
+  font-family: var(--tide-booking-font-heading);
+  font-weight: normal;
+  line-height: 1.35;
+  word-break: break-word;
+  color: var(--tide-booking-black);
+
+  &:empty {
+    display: none;
+  }
+
+  em {
+    width: 100%;
+    font-family: var(--tide-booking-font-handwritten);
+    font-style: normal;
+  }
+}
+
+@mixin h1 {
+  font-size: var(--tide-booking-h1);
+
+  @include media-sm {
+    font-size: var(--tide-booking-h1-sm);
+  }
+
+  @include media-xl {
+    font-size: var(--tide-booking-h1-xl);
+  }
+}
+
+@mixin h2 {
+  font-size: var(--tide-booking-h2);
+
+  @include media-sm {
+    font-size: var(--tide-booking-h2-sm);
+  }
+
+  @include media-xl {
+    font-size: var(--tide-booking-h2-xl);
+  }
+}
+
+@mixin h3 {
+  font-size: var(--tide-booking-h3);
+
+  @include media-sm {
+    font-size: var(--tide-booking-h3-sm);
+  }
+
+  @include media-xl {
+    font-size: var(--tide-booking-h3-xl);
+  }
+}
+
+@mixin h4 {
+  font-size: var(--tide-booking-h4);
+
+  @include media-sm {
+    font-size: var(--tide-booking-h4-sm);
+  }
+
+  @include media-xl {
+    font-size: var(--tide-booking-h4-xl);
+  }
+}
+
+@mixin h5 {
+  font-size: var(--tide-booking-h5);
+
+  @include media-xl {
+    font-size: var(--tide-booking-h5-xl);
+  }
+}
+
+@mixin h6 {
+  font-size: var(--h6);
+
+  @include media-md {
+    font-size: var(--h6-md);
+  }
+}
+
+
+
+// ANIMATIONS
+@mixin transitionEasing($duration: 0.35s) {
+  transition-duration: $duration;
+  transition-property: width, height, transform, border, fill, color, background,
+    box-shadow, opacity;
+  transition-timing-function: ease-out;
+}
+
+// INTERACTIONS
+@mixin hoverToColor() {
+  &:hover {
+    opacity: 1;
+    outline: none;
+    fill: var(--tide-booking-color-primary);
+    color: var(--tide-booking-color-primary);
+    background-color: var(--tide-booking-transparent);
+  }
+}
+
+@mixin activeToColor () {
+  &:active {
+    opacity: 1;
+    outline: none;
+    fill: var(--tide-booking-color-primary-dark);
+    color: var(--tide-booking-color-primary-dark);
+    background-color: var(--tide-booking-transparent);
+  }
+}
+
+@mixin slideDown($duration: 0.35s) {
+  @keyframes in {
+    0% {
+      transform: translate3D(0, -100%, 0);
+    }
+
+    100% {
+      transform: translate3D(0, 0, 0);
+    }
+  }
+
+  @keyframes out {
+    0% {
+      transform: translate3D(0, 0, 0);
+    }
+
+    100% {
+      transform: translate3D(0, -100%, 0);
+    }
+  }
+}
+
+