@qite/tide-components 1.0.10 → 1.0.13-preview.0

package/styles/components/_mixins.scss

@@ -1,579 +1,579 @@
-// RESET
-@mixin reset {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-// MEDIA QUERIES
-@mixin media-xxs {
-  @media only screen and (min-width: 390px) {
-    @content;
-  }
-}
-
-@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-xgl {
-  @media only screen and (min-width: 1440px) {
-    @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() {
-  width: 100%;
-  padding: 0 15px;
-  margin: 0 auto;
-
-  @include media-sm {
-    padding: 0 30px;
-  }
-
-  @include media-lg {
-    padding: 0 45px;
-  }
-}
-
-@mixin container-wide() {
-  @include container();
-  max-width: var(--tide-booking-container-wide);
-}
-
-@mixin container-medium() {
-  @include container();
-  max-width: var(--tide-booking-container-medium);
-}
-
-@mixin container-small() {
-  @include container();
-  max-width: var(--tide-booking-container-small);
-}
-
-@mixin container-article() {
-  @include container();
-  max-width: var(--tide-booking-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-input-height);
-  padding: 0 15px;
-  border: var(--tide-booking-input-border);
-  border-radius: var(--tide-booking-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-input-color);
-  background: var(--tide-booking-input-background);
-
-  @include media-lg {
-    font-size: var(--tide-booking-font-size-body-lg);
-    min-height: var(--tide-booking-input-height-lg);
-  }
-
-  &:hover {
-    border: var(--tide-booking-input-border-hover);
-  }
-
-  &:focus {
-    border: var(--tide-booking-input-border-focus);
-  }
-
-  &:hover,
-  &:focus,
-  &:focus-within,
-  &:active {
-    outline: none;
-  }
-}
-
-@mixin textarea {
-  min-height: 250px;
-  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: var(--tide-booking-input-border);
-  border-radius: var(--tide-booking-input-border-radius);
-  color: var(--tide-booking-input-color);
-  background: var(--tide-booking-input-background);
-  resize: vertical;
-  outline: none;
-
-  @include media-xs {
-    //font-size: 1.8rem;
-    font-size: var(--input-font-size--desktop);
-  }
-
-  &:hover {
-    border: var(--tide-booking-input-border-hover);
-  }
-
-  &:focus {
-    border: var(--tide-booking-input-border-focus);
-  }
-
-  &:focus,
-  &:active {
-    border: var(--tide-booking-input-border-focus);
-  }
-}
-
-@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: var(--tide-booking-form-input-placeholder-font-style);
-  color: var(--tide-booking-form-input-placeholder-color);
-}
-
-@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-heading-color);
-
-  &: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(--tide-booking-h6);
-
-  @include media-md {
-    font-size: var(--tide-booking-h6-md);
-  }
-}
-
-@mixin a {
-  color: var(--tide-booking-a-color);
-  cursor: pointer;
-  outline: none;
-  text-decoration: var(--tide-booking-a-text-decoration);
-  @extend %transition-easing;
-
-  &:hover,
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
-  &:hover {
-    color: var(--tide-booking-a-color-hover);
-    text-decoration: var(--tide-booking-a-text-decoration-hover);
-  }
-
-  &:focus,
-  &:active {
-    color: var(--tide-booking-a-color-focus);
-    text-decoration: var(--tide-booking-a-text-decoration-focus);
-  }
-}
-
-// 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);
-    }
-  }
-}
+// RESET
+@mixin reset {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+// MEDIA QUERIES
+@mixin media-xxs {
+  @media only screen and (min-width: 390px) {
+    @content;
+  }
+}
+
+@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-xgl {
+  @media only screen and (min-width: 1440px) {
+    @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() {
+  width: 100%;
+  padding: 0 15px;
+  margin: 0 auto;
+
+  @include media-sm {
+    padding: 0 30px;
+  }
+
+  @include media-lg {
+    padding: 0 45px;
+  }
+}
+
+@mixin container-wide() {
+  @include container();
+  max-width: var(--tide-booking-container-wide);
+}
+
+@mixin container-medium() {
+  @include container();
+  max-width: var(--tide-booking-container-medium);
+}
+
+@mixin container-small() {
+  @include container();
+  max-width: var(--tide-booking-container-small);
+}
+
+@mixin container-article() {
+  @include container();
+  max-width: var(--tide-booking-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-input-height);
+  padding: 0 15px;
+  border: var(--tide-booking-input-border);
+  border-radius: var(--tide-booking-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-input-color);
+  background: var(--tide-booking-input-background);
+
+  @include media-lg {
+    font-size: var(--tide-booking-font-size-body-lg);
+    min-height: var(--tide-booking-input-height-lg);
+  }
+
+  &:hover {
+    border: var(--tide-booking-input-border-hover);
+  }
+
+  &:focus {
+    border: var(--tide-booking-input-border-focus);
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-within,
+  &:active {
+    outline: none;
+  }
+}
+
+@mixin textarea {
+  min-height: 250px;
+  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: var(--tide-booking-input-border);
+  border-radius: var(--tide-booking-input-border-radius);
+  color: var(--tide-booking-input-color);
+  background: var(--tide-booking-input-background);
+  resize: vertical;
+  outline: none;
+
+  @include media-xs {
+    //font-size: 1.8rem;
+    font-size: var(--input-font-size--desktop);
+  }
+
+  &:hover {
+    border: var(--tide-booking-input-border-hover);
+  }
+
+  &:focus {
+    border: var(--tide-booking-input-border-focus);
+  }
+
+  &:focus,
+  &:active {
+    border: var(--tide-booking-input-border-focus);
+  }
+}
+
+@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: var(--tide-booking-form-input-placeholder-font-style);
+  color: var(--tide-booking-form-input-placeholder-color);
+}
+
+@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-heading-color);
+
+  &: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(--tide-booking-h6);
+
+  @include media-md {
+    font-size: var(--tide-booking-h6-md);
+  }
+}
+
+@mixin a {
+  color: var(--tide-booking-a-color);
+  cursor: pointer;
+  outline: none;
+  text-decoration: var(--tide-booking-a-text-decoration);
+  @extend %transition-easing;
+
+  &:hover,
+  &:focus,
+  &:active {
+    outline: none;
+  }
+
+  &:hover {
+    color: var(--tide-booking-a-color-hover);
+    text-decoration: var(--tide-booking-a-text-decoration-hover);
+  }
+
+  &:focus,
+  &:active {
+    color: var(--tide-booking-a-color-focus);
+    text-decoration: var(--tide-booking-a-text-decoration-focus);
+  }
+}
+
+// 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);
+    }
+  }
+}