@qite/tide-components 1.0.1

package/styles/components/_mixins.scss

@@ -0,0 +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);
+    }
+  }
+}