@duffel/components 3.1.3--prototype.4 → 3.1.3--prototype.6

package/src/styles/components/Counter.css

@@ -1,18 +0,0 @@
-.counter {
-  display: flex;
-  align-items: center;
-}
-
-.counter__count-label {
-  font-size: var(--FONT-SIZES-C2);
-  text-align: center;
-  align-self: center;
-  color: var(--GREY-900);
-  width: var(--SPACING-LG-2);
-}
-
-@media screen and (min-width: 768px) {
-  .counter__count-label {
-    width: var(--SPACING-LG-1);
-  }
-}

package/src/styles/components/DuffelPayments.css

@@ -1,42 +0,0 @@
-.card-payment__container {
-  width: 480px;
-  height: auto;
-  max-width: 480px;
-  box-sizing: border-box;
-  margin: var(--SPACING-XS-3);
-}
-
-.card-payment__container--invalid {
-  margin-top: var(--SPACING-SM-1);
-  font-size: var(--FONT-SIZES-C2);
-  color: var(--RED);
-}
-
-.card-payment__container--invalid {
-  height: 16px;
-}
-
-.card-details {
-  background-color: rgb(var(--WHITE));
-  border: 1px solid var(--GREY-200);
-  border-radius: 5px;
-  padding: var(--SPACING-SM-2);
-  width: auto;
-}
-
-.card-details.StripeElement--invalid {
-  border: 1px solid var(--RED);
-}
-
-.card-payment__pay-button {
-  width: 100%;
-  margin-top: var(--SPACING-SM-3);
-}
-
-.card-payment--in-progress {
-  display: block;
-  z-index: 3;
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-}

package/src/styles/components/IconButton.css

@@ -1,63 +0,0 @@
-.icon-button {
-  color: red;
-}
-
-.icon-button {
-  --button-color: white;
-
-  box-sizing: border-box;
-  padding: 4px 2px;
-  border-radius: 6px;
-  cursor: pointer;
-  border: none;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  letter-spacing: 0em;
-  text-align: left;
-
-  background-color: transparent;
-  color: var(--GREY-400);
-  border: 1px solid transparent;
-
-  transition: background-color 0.3s var(--TRANSITION-CUBIC-BEZIER),
-    color 0.3s var(--TRANSITION-CUBIC-BEZIER),
-    opacity 0.3s var(--TRANSITION-CUBIC-BEZIER);
-}
-
-.icon-button svg {
-  /* Using important to take precedence over inline styles on icon */
-  display: inline !important;
-  height: 20px;
-  vertical-align: bottom;
-}
-
-.icon-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.icon-button--primary:not(:disabled):hover {
-  color: var(--GREY-500);
-  background-color: var(--GREY-100);
-}
-
-.icon-button--primary:not(:disabled):active {
-  color: var(--GREY-700);
-  background-color: var(--GREY-200);
-}
-
-.icon-button--outlined {
-  border: 1px solid #ccccd4;
-  color: var(--GREY-900);
-  background-color: rgb(var(--WHITE));
-}
-
-.icon-button--outlined:not(:disabled):hover {
-  border: 1px solid #ababb4;
-  background-color: #fbfbfd;
-}
-
-.icon-button--outlined:not(:disabled):active {
-  background-color: var(--GREY-100);
-}

package/src/styles/components/Legend.css

@@ -1,62 +0,0 @@
-.seat-map__legend {
-  width: calc(100% + var(--SPACING-MD-3));
-  min-height: fit-content;
-  margin: calc(var(--SPACING-SM-1) * -1) calc(var(--SPACING-SM-2) * -1);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  line-height: var(--SPACING-MD-3);
-  font-size: var(--FONT-SIZES-C2);
-  font-weight: 400;
-}
-
-.seat-map__legend-item {
-  display: flex;
-  align-items: center;
-  text-transform: capitalize;
-  margin: var(--SPACING-SM-1) var(--SPACING-SM-2);
-  color: var(--GREY-700);
-}
-
-.seat-map__legend-item--symbol .ff-icon {
-  margin-right: var(--SPACING-XS-3);
-}
-
-.seat-map__legend-seat {
-  width: var(--SPACING-MD-1);
-  height: var(--SPACING-MD-1);
-  border-radius: 5px;
-  border: 2px solid var(--GREY-200);
-  color: var(--GREY-600);
-  background-color: var(--GREY-100);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: var(--SPACING-SM-1);
-}
-
-.seat-map__legend-seat--fee-payable {
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
-  border: 2px solid
-    var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
-}
-
-.seat-map__legend-seat--fee-payable-indicator {
-  position: relative;
-  top: var(--SPACING-XS-2);
-  left: var(--SPACING-XS-2);
-  color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
-}
-
-.seat-map__legend-seat--included {
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
-  border: 2px solid
-    var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
-}
-
-.seat-map__legend-seat--selected {
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
-  border: 2px solid
-    var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
-}

package/src/styles/components/Loader.css

@@ -1,37 +0,0 @@
-@keyframes loading-dots {
-  25% {
-    /* stylelint-disable-line */
-    content: "";
-  }
-
-  50% {
-    /* stylelint-disable-line */
-    content: ".";
-  }
-
-  75% {
-    /* stylelint-disable-line */
-    content: "..";
-  }
-
-  100% {
-    /* stylelint-disable-line */
-    content: "...";
-  }
-}
-
-.textual-loading-indicator::after {
-  display: inline-block;
-  text-align: start;
-  animation: loading-dots 1s infinite 1s;
-  animation-fill-mode: forwards;
-  /* stylelint-disable-line */
-  content: "...";
-
-  /* 
-  we want to define a width here so we can preserve 
-  the space when the text is centered so it doesn't 
-  move back and forth 
-  */
-  width: 18px;
-}

package/src/styles/components/LoadingState.css

@@ -1,87 +0,0 @@
-.loading-state__container {
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  font-family: var(--FONT-FAMILY);
-  height: calc(100vh - var(--SPACING-XL-3));
-  width: var(--SPACING-XL-3);
-  margin: 0 auto;
-  line-height: var(--SPACING-MD-1);
-}
-
-.loading-state__message {
-  font-size: var(--FONT-SIZES-C3);
-  text-transform: uppercase;
-  color: var(--GREY-400);
-  letter-spacing: 0.02rem;
-}
-
-.loading-state__progress-indicator {
-  height: var(--SPACING-XS-2);
-  margin: var(--SPACING-SM-3) 0;
-  border-radius: 999px;
-  width: calc(100% - var(--SPACING-SM-1));
-  background-color: var(
-    --SECONDARY,
-    rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
-  );
-  position: relative;
-  transition: var(--TRANSITIONS-CUBIC-BEZIER);
-}
-
-.loading-state__progress-indicator--status {
-  display: block;
-  height: 100%;
-  border-radius: 999px;
-  background-color: var(
-    --TERTIARY,
-    rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000))
-  );
-  position: relative;
-  animation: fillstatus 1s linear;
-}
-
-@keyframes fillstatus {
-  0% {
-    width: 0;
-  }
-  70% {
-    width: 100%;
-  }
-  80% {
-    opacity: 1;
-    width: 100%;
-  }
-  100% {
-    opacity: 0;
-    width: 100%;
-  }
-}
-
-.loading-state__segment {
-  display: flex;
-  flex-direction: row;
-  margin: var(--SPACING-XS-2) 0;
-  color: var(--GREY-400);
-  text-transform: uppercase;
-}
-
-.loading-state__segment--origin,
-.loading-state__segment--destination {
-  font-weight: 600;
-  font-size: var(--FONT-SIZES-C1);
-  color: var(--GREY-900);
-  padding: 0 var(--SPACING-SM-1);
-  text-transform: uppercase;
-}
-
-.loading-state__segment__duration {
-  color: var(--GREY-400);
-  font-size: var(--FONT-SIZES-C3);
-  letter-spacing: 0.02rem;
-  margin: var(--SPACING-XS-2) 0;
-  text-transform: uppercase;
-}

package/src/styles/components/Modal.css

@@ -1,84 +0,0 @@
-.modal {
-  top: 0;
-  left: 0;
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  background: #00000059;
-  z-index: 999;
-  box-sizing: border-box;
-  display: flex;
-  opacity: 0;
-  pointer-events: none;
-  transition: all 0.3s var(--TRANSITION-CUBIC-BEZIER);
-}
-
-.modal--content {
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-  position: fixed;
-  bottom: 0;
-  height: fit-content;
-  width: 100%;
-  background-color: rgb(var(--WHITE));
-  pointer-events: none;
-  transition: opacity 0.3s var(--TRANSITION-CUBIC-BEZIER);
-}
-
-.modal--open,
-.modal--open .modal--content {
-  /* important needed to override inline style */
-  opacity: 1 !important;
-  pointer-events: all;
-}
-
-.modal-body {
-  max-height: 250px;
-  padding: 0px 24px 24px;
-  overflow: scroll;
-  border-block: solid 1px var(--GREY-200);
-}
-
-/* 667px is the height of https://www.ios-resolution.com/iphone-se-3rd-gen/ */
-@media (min-height: 667px) {
-  .modal-body {
-    max-height: 350px;
-  }
-}
-
-/* 812px is the height of https://www.ios-resolution.com/iphone-13-mini/ */
-@media (min-height: 812px) {
-  .modal-body {
-    max-height: 500px;
-  }
-}
-
-/* 900px is the size of https://blisk.io/devices/details/macbook-air */
-@media (min-height: 900px) {
-  .modal-body {
-    max-height: 65vh;
-  }
-}
-
-.modal--close-button {
-  position: absolute;
-  top: 16px;
-  right: 12px;
-}
-
-/* tablet or greater  */
-@media (min-width: 768px) {
-  .modal {
-    padding: 24px 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .modal--content {
-    position: relative;
-    border-radius: 12px;
-    max-width: 640px;
-    margin: auto;
-  }
-}

package/src/styles/components/PassengerSelect.css

@@ -1,99 +0,0 @@
-.passenger-selection {
-  display: flex;
-  flex-direction: column;
-  font-family: var(--FONT-FAMILY);
-  flex-grow: 1;
-}
-
-.passenger-selection__title {
-  margin: 0;
-  padding: 0 0 var(--SPACING-MD-3);
-  font-size: var(--FONT-SIZES-H2);
-  line-height: 1.2;
-  min-width: 360px;
-}
-
-.passenger-selection__segments {
-  list-style: none;
-  overflow-y: auto;
-  font-size: var(--FONT-SIZES-C1);
-  padding: var(--SPACING-XS-2);
-  margin: calc(var(--SPACING-XS-2) * -1);
-}
-
-.passenger-selection-passenger {
-  appearance: none;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: var(--FONT-SIZES-C2);
-  font-family: var(--FONT-FAMILY);
-  margin-top: var(--SPACING-XS-2);
-  height: 32px;
-  display: flex;
-  align-items: center;
-  padding: var(--SPACING-SM-1) var(--SPACING-LG-1);
-  width: 100%;
-}
-
-.passenger-selection-passenger:first-child {
-  margin-top: 0;
-}
-
-.passenger-selection-passenger:hover,
-.passenger-selection-passenger:focus,
-.passenger-selection-passenger:active {
-  background-color: var(
-    --SECONDARY,
-    rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
-  );
-}
-
-.passenger-selection-passenger__identifier,
-.passenger-selection-passenger__action {
-  line-height: 1;
-}
-
-.passenger-selection-passenger__identifier {
-  flex-grow: 1;
-  margin-right: var(--SPACING-LG-1);
-  text-align: left;
-  color: var(--GREY-900);
-}
-
-.passenger-selection-passenger__action {
-  color: var(--GREY-600);
-  margin-right: var(--SPACING-XS-2);
-}
-
-.passenger-selection-passenger__seat-designator {
-  color: var(--GREY-900);
-  font-weight: 600;
-  margin-right: var(--SPACING-SM-3);
-}
-
-.passenger-selection-passenger__seat-price {
-  text-align: right;
-  display: inline-block;
-  width: 70px;
-}
-
-.passenger-selection-passenger--selected {
-  box-shadow: 4px 0px 0px 0px rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000))
-    inset;
-  background-color: var(
-    --SECONDARY,
-    rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
-  );
-}
-
-.passenger-selection-segment {
-  margin: var(--SPACING-LG-1) 0 0;
-  padding: 0 0 var(--SPACING-LG-1);
-  border-bottom: 1px solid var(--GREY-200);
-  font-family: var(--FONT-FAMILY);
-}
-
-.passenger-selection-segment:first-child {
-  margin-top: 0;
-}

package/src/styles/components/PassengersLayout.css

@@ -1,90 +0,0 @@
-.layout {
-  --LAYOUT-BOX-SHADOW: 0px 0px 0px 1px rgba(var(--BLACK), 0.05),
-    0px 4px 24px rgba(var(--BLACK), 0.08);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  position: relative;
-}
-
-.layout__container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-grow: 1;
-  border-bottom: 1px solid rgba(59, 64, 86, 0.1);
-  height: calc(100% - 177px);
-  overflow: auto;
-}
-
-.layout__aside {
-  display: none;
-  padding-top: var(--SPACING-LG-1);
-}
-
-.layout__main-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-}
-
-.layout__mobile-info {
-  align-self: center;
-  position: absolute;
-  bottom: 187px;
-  width: calc(100% - 20px);
-  padding: var(--SPACING-XS-3);
-  margin-bottom: var(--SPACING-SM-2);
-  height: auto;
-  border-radius: 8px;
-  z-index: 100;
-  box-shadow: var(--LAYOUT-BOX-SHADOW);
-}
-
-.layout__confirmation {
-  padding: var(--SPACING-MD-3);
-  box-shadow: var(--LAYOUT-BOX-SHADOW);
-  position: sticky;
-  bottom: 0;
-  background-color: rgb(var(--WHITE));
-}
-
-@media screen and (min-width: 768px) {
-  .layout {
-    overflow: hidden;
-  }
-
-  .layout__container {
-    height: auto;
-    padding: 0;
-    flex-direction: row;
-    align-items: initial;
-    max-height: calc(100vh - 115px);
-  }
-
-  .layout__confirmation {
-    padding: var(--SPACING-LG-1);
-    box-shadow: none;
-  }
-
-  .layout__aside {
-    overflow: auto;
-    border-right: 1px solid var(--GREY-200);
-    display: flex;
-    flex-direction: column;
-    position: sticky;
-    top: 0;
-    flex: 1 0 auto;
-    min-width: 415px;
-  }
-
-  .layout__main-content {
-    height: auto;
-    align-items: center;
-    overflow: auto;
-  }
-}

package/src/styles/components/PlacesLookup.css

@@ -1,36 +0,0 @@
-.places-lookup-input {
-  width: 100%;
-}
-
-.places-lookup-popover {
-  background-color: var(--WHITE);
-  box-shadow: 0px 1px 4px rgba(59, 64, 86, 0.3);
-  border-radius: 4px;
-  margin-top: 4px;
-  width: 100%;
-  padding: 4px;
-}
-
-.places-lookup-popover__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem;
-  cursor: pointer;
-  column-gap: var(--SPACING-XS-2);
-  background-color: transparent;
-  border: none;
-  border-radius: 4px;
-}
-
-.places-lookup-popover__item:hover,
-.places-lookup-popover__item:focus {
-  background-color: var(--GREY-100);
-}
-
-.places-lookup-popover__icon-and-name-container {
-  column-gap: var(--SPACING-SM-1);
-  display: flex;
-  align-items: flex-start;
-  text-align: start;
-}

package/src/styles/components/Row.css

@@ -1,70 +0,0 @@
-.map-element--exit {
-  color: var(--GREY-400);
-  width: 100%;
-  height: var(--SPACING-LG-3);
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.map-element--exit--right {
-  justify-content: flex-end;
-}
-
-.map-element--empty {
-  min-width: var(--SPACING-LG-2);
-  height: var(--SPACING-LG-2);
-}
-
-@media only screen and (min-width: 768px) {
-  .map-element--empty {
-    min-width: var(--SPACING-LG-3);
-    height: var(--SPACING-LG-3);
-  }
-}
-
-.map-section {
-  display: flex;
-  justify-content: center;
-  padding: var(--SPACING-XS-1) 0;
-  column-gap: 6px;
-}
-
-@media only screen and (min-width: 768px) {
-  .map-section {
-    padding: var(--SPACING-XS-2) 0;
-  }
-}
-
-.map-section--left {
-  border-left: 2px solid var(--GREY-200);
-  padding-left: var(--SPACING-SM-3);
-}
-
-.map-section--left.map-section--wing {
-  box-shadow: -19px 0px 0px 0px var(--GREY-200);
-}
-
-.map-section--right {
-  border-right: 2px solid var(--GREY-200);
-  padding-right: var(--SPACING-SM-3);
-}
-
-.map-section--right.map-section--wing {
-  box-shadow: 19px 0px 0px 0px var(--GREY-200);
-}
-
-.map-section__aisle {
-  display: flex;
-  justify-content: center;
-  color: var(--GREY-600);
-  font-size: var(--FONT-SIZES-C3);
-  line-height: var(--SPACING-MD-2);
-}
-
-@media only screen and (min-width: 768px) {
-  .map-section__aisle {
-    font-size: var(--FONT-SIZES-C2);
-    line-height: var(--SPACING-MD-3);
-  }
-}