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

package/src/styles/components/Seat.css

@@ -1,59 +0,0 @@
-.map-element__seat {
-  appearance: none;
-  outline: none;
-  cursor: default;
-  width: var(--SPACING-LG-2);
-  height: var(--SPACING-LG-2);
-  border-radius: 8px;
-  border: 2px solid var(--GREY-200);
-  box-sizing: border-box;
-  color: var(--GREY-600);
-  background-color: var(--GREY-100);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: var(--SPACING-MD-3);
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: var(--FONT-SIZES-C3);
-  text-align: left;
-  position: relative;
-}
-
-.map-element--available {
-  border: 2px solid
-    var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
-  color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
-}
-
-.map-element--fee-payable {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .map-element--actionable:hover {
-    cursor: pointer;
-  }
-
-  .map-element--actionable:not(.map-element--selected):hover {
-    background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
-    color: var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
-    transition: var(--TRANSITIONS-CUBIC-BEZIER);
-  }
-
-  .map-element--fee-payable {
-    color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
-    transition: var(--TRANSITIONS-CUBIC-BEZIER);
-  }
-}
-
-.map-element--selected {
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
-  border: 2px solid
-    var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
-  color: var(--SECONDARY, rgba(var(--WHITE), 1));
-}

package/src/styles/components/SeatInfo.css

@@ -1,61 +0,0 @@
-.seat-info {
-  --INFO-CARD-MARGIN: 20px;
-  background-color: rgb(var(--WHITE));
-  padding: 24px;
-  padding-bottom: 24px;
-  min-width: 220px;
-  border: 1px solid rgba(59, 64, 86, 0.1);
-  border-radius: 8px;
-  background: white;
-  z-index: 999;
-  box-shadow: 0px 1px 4px rgba(59, 64, 86, 0.3);
-  position: absolute;
-  width: calc(100% - 2 * var(--INFO-CARD-MARGIN));
-  left: var(--INFO-CARD-MARGIN);
-  box-sizing: border-box;
-
-  /* 124px because that's the footer height */
-  bottom: calc(124px + var(--INFO-CARD-MARGIN));
-}
-
-/* tablet or greater  */
-@media (min-width: 768px) {
-  .seat-info {
-    left: 0;
-    right: 0;
-    margin-left: auto;
-    margin-right: auto;
-
-    /* 640px because that's the max width of the modal */
-    width: calc(640px - 2 * var(--INFO-CARD-MARGIN));
-  }
-}
-
-.seat-info__details {
-  font-size: var(--FONT-SIZES-C1);
-  color: var(--GREY-900);
-  font-weight: normal;
-  text-transform: none;
-  display: flex;
-  justify-content: space-between;
-}
-
-.seat-info__details > span {
-  flex-grow: 1;
-  margin: 0 var(--SPACING-SM-1);
-}
-
-.seat-info__disclosure {
-  font-size: var(--FONT-SIZES-C3);
-  color: var(--GREY-600);
-  line-height: 150%;
-  text-transform: none;
-  font-weight: normal;
-  margin-top: var(--SPACING-SM-1);
-}
-
-.seat-info__details + .seat-info__disclosure {
-  padding-top: var(--SPACING-SM-3);
-  border-top: 1px solid var(--GREY-200);
-  margin-top: var(--SPACING-SM-3);
-}

package/src/styles/components/SeatMap.css

@@ -1,24 +0,0 @@
-.seat-map {
-  background-color: rgba(var(--WHITE), 1);
-  padding: var(--SPACING-SM-3);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: fit-content;
-  min-height: 100%;
-  margin-inline: auto;
-}
-
-.seat-map__legend-container {
-  margin-bottom: var(--SPACING-MD-3);
-  width: fit-content;
-}
-
-.seat-map__map-container {
-  display: grid;
-  grid-template-columns: repeat(var(--CABIN-AISLES), auto var(--SPACING-LG-1)) auto;
-  grid-column-gap: var(--SPACING-XS-2);
-  align-items: center;
-  width: min-content;
-  margin: 0 var(--SPACING-SM-2);
-}

package/src/styles/components/SeatSelect.css

@@ -1,92 +0,0 @@
-.seat-selection {
-  --SEAT-SELECTION-BOX-SHADOW: 0px 0px 0px 1px rgba(var(--BLACK), 0.05),
-    0px 4px 24px rgba(var(--BLACK), 0.08);
-  background-color: rgb(var(--WHITE));
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  position: relative;
-}
-
-.seat-selection__content {
-  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;
-}
-
-.seat-selection__content-child--passengers {
-  display: none;
-  padding-top: var(--SPACING-LG-1);
-}
-
-.seat-selection__content-child--map {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-}
-
-.seat-selection__mobile-seat-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;
-  background-color: white;
-  border-radius: 8px;
-  z-index: 100;
-  box-shadow: var(--SEAT-SELECTION-BOX-SHADOW);
-}
-
-.seat-selection__confirmation {
-  padding: var(--SPACING-MD-3);
-  box-shadow: var(--SEAT-SELECTION-BOX-SHADOW);
-  position: sticky;
-  bottom: 0;
-  background-color: rgb(var(--WHITE));
-}
-
-@media screen and (min-width: 768px) {
-  .seat-selection__content {
-    height: auto;
-    padding: 0;
-    flex-direction: row;
-    align-items: initial;
-    max-height: calc(100vh - 115px);
-  }
-
-  .seat-selection__confirmation {
-    padding: var(--SPACING-LG-1);
-    box-shadow: none;
-  }
-
-  .seat-selection__content-child--passengers {
-    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;
-  }
-
-  .seat-selection__content-child--passengers > div:not(.passenger-selection) {
-    margin-left: var(--SPACING-LG-1);
-  }
-
-  .seat-selection__content-child--map {
-    height: auto;
-    align-items: center;
-    overflow: auto;
-  }
-}

package/src/styles/components/Segment.css

@@ -1,17 +0,0 @@
-.passenger-segment__title {
-  color: var(--GREY-900);
-  font-style: normal;
-  font-size: var(--FONT-SIZES-C1);
-  font-weight: 600;
-  line-height: var(--SPACING-MD-3);
-  padding: 0 0 0 var(--SPACING-LG-1);
-  margin: 0 0 var(--SPACING-SM-1);
-  display: flex;
-  align-items: center;
-}
-
-.passenger-segment__chevron {
-  /* We use important here because this margin can get overwritten by the icon one */
-  margin: 0 var(--SPACING-SM-1) !important;
-  color: var(--GREY-400);
-}

package/src/styles/components/SelectionSegment.css

@@ -1,10 +0,0 @@
-.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/Summary.css

@@ -1,70 +0,0 @@
-.summary__segment {
-  border-bottom: 1px solid var(--GREY-200);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--SPACING-SM-3);
-  padding-bottom: var(--SPACING-SM-3);
-}
-
-.summary > .passenger-segment__title {
-  padding: 0;
-  margin: 0;
-}
-
-.summary-passenger {
-  color: var(--GREY-900);
-  font-size: var(--FONT-SIZES-C1);
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
-}
-
-.summary__description-cost {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--FONT-SIZES-C1);
-  margin-bottom: var(--SPACING-SM-3);
-}
-
-.summary:not(.summary--mobile) {
-  padding-top: 0;
-  display: none;
-}
-
-.summary__actions {
-  display: flex;
-}
-
-.summary__actions--previous {
-  transform: rotate(180deg);
-}
-
-.summary__actions > button:last-of-type {
-  flex: 1 auto;
-  justify-content: center;
-  margin-left: var(--SPACING-SM-3);
-}
-
-@media screen and (min-width: 768px) {
-  .summary:not(.summary--mobile) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .summary--mobile {
-    display: none;
-  }
-
-  .summary__description-title {
-    color: var(--GREY-900);
-    font-size: var(--FONT-SIZES-H5);
-    line-height: 26px;
-    margin-bottom: var(--SPACING-XS-2);
-  }
-
-  .summary__confirmation-btn:last-child {
-    margin-left: var(--SPACING-SM-1);
-  }
-}

package/src/styles/components/Tabs.css

@@ -1,52 +0,0 @@
-.seat-map__tab-select {
-  width: 100%;
-  max-width: 400px;
-  display: flex;
-  text-align: center;
-  min-height: var(--SPACING-LG-1);
-  margin-bottom: var(--SPACING-MD-3);
-  border: 2px solid var(--GREY-200);
-  border-radius: 3px;
-  background-color: var(--GREY-200);
-}
-
-.seat-map__tab-select-option {
-  appearance: none;
-  outline: none;
-  margin: 0;
-  border: none;
-  padding: var(--SPACING-XS-2) var(--SPACING-SM-3);
-  font-weight: 600;
-  font-size: var(--FONT-SIZES-C2);
-  width: 100%;
-  color: var(--GREY-900);
-  background-color: var(--GREY-200);
-  cursor: pointer;
-  border-radius: 3px;
-}
-
-.seat-map__tab-select-option:hover,
-.seat-map__tab-select-option:focus,
-.seat-map__tab-select-option:active {
-  color: var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
-  background-color: var(
-    --TERTIARY,
-    rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))
-  );
-  transition: var(--TRANSITIONS-CUBIC-BEZIER);
-}
-
-.seat-map__tab-select-option--selected {
-  color: var(--GREY-900);
-  background-color: rgba(var(--WHITE), 1);
-  box-shadow: 0px 0px 0px 1px rgba(var(--BLACK), 0.05),
-    0px 2px 12px rgba(var(--BLACK), 0.08);
-}
-
-.seat-map__tab-select-option:first-child {
-  margin-right: 1px;
-}
-
-.seat-map__tab-select-option:last-child {
-  margin-left: 1px;
-}

package/src/styles/flex.css

@@ -1,5 +0,0 @@
-.flex--space-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}

package/src/styles/font-families.css

@@ -1,47 +0,0 @@
-.p1--semibold {
-  font-family: var(--FONT-FAMILY);
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: 0em;
-}
-
-.p1--regular {
-  font-family: var(--FONT-FAMILY);
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0em;
-}
-
-.p2--regular {
-  font-family: var(--FONT-FAMILY);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0em;
-}
-
-.p2--semibold {
-  font-family: var(--FONT-FAMILY);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  letter-spacing: 0em;
-}
-
-.p3--regular {
-  font-family: var(--FONT-FAMILY);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0em;
-}
-
-.h3--semibold {
-  font-family: var(--FONT-FAMILY);
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 28px;
-  letter-spacing: 0em;
-}

package/src/styles/global.css

@@ -1,52 +0,0 @@
-@import "./colors.css";
-@import "./flex.css";
-@import "./font-families.css";
-@import "./margin.css";
-@import "./spacing.css";
-@import "./transitions.css";
-@import "./typography.css";
-
-@import "./components/Amenity.css";
-@import "./components/BaggageDisplay.css";
-@import "./components/Button.css";
-@import "./components/CfarSelectionModal.css";
-@import "./components/Card.css";
-@import "./components/Counter.css";
-@import "./components/DuffelPayments.css";
-@import "./components/IconButton.css";
-@import "./components/Legend.css";
-@import "./components/Loader.css";
-@import "./components/LoadingState.css";
-@import "./components/Modal.css";
-@import "./components/PassengerSelect.css";
-@import "./components/PassengersLayout.css";
-@import "./components/PlacesLookup.css";
-@import "./components/Row.css";
-@import "./components/Seat.css";
-@import "./components/SeatInfo.css";
-@import "./components/SeatMap.css";
-@import "./components/SeatSelect.css";
-@import "./components/Segment.css";
-@import "./components/SelectionSegment.css";
-@import "./components/Summary.css";
-@import "./components/Tabs.css";
-
-.duffel-components {
-  --BUTTON-RADIUS: 5px;
-  --TRANSITION-CUBIC-BEZIER: cubic-bezier(0.25, 0.8, 0.25, 1);
-
-  box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
-  -webkit-font-smoothing: antialiased;
-  font-family: var(--FONT-FAMILY);
-  overflow: hidden;
-  height: 100%;
-}
-
-h1,
-h2,
-h3,
-h4,
-p {
-  margin: 0;
-}

package/src/styles/margin.css

@@ -1,3 +0,0 @@
-.margin-0 {
-  margin: 0;
-}

package/src/styles/spacing.css

@@ -1,18 +0,0 @@
-.duffel-components {
-  --SPACING-XL-3: 128px;
-  --SPACING-XL-2: 64px;
-  --SPACING-XL-1: 56px;
-  --SPACING-LG-3: 48px;
-  --SPACING-LG-2: 40px;
-  --SPACING-LG-1: 32px;
-  --SPACING-MD-3: 24px;
-  --SPACING-MD-2: 20px;
-  --SPACING-MD-1: 18px;
-  --SPACING-SM-3: 16px;
-  --SPACING-SM-2: 12px;
-  --SPACING-SM-1: 8px;
-  --SPACING-XS-3: 6px;
-  --SPACING-XS-2: 4px;
-  --SPACING-XS-1: 2px;
-  --SPACING-NONE: 0;
-}

package/src/styles/transitions.css

@@ -1,3 +0,0 @@
-.duffel-components {
-  --TRANSITIONS-CUBIC-BEZIER: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}

package/src/styles/typography.css

@@ -1,13 +0,0 @@
-.duffel-components {
-  --FONT-FAMILY: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  --FONT-SIZES-C0: 20px;
-  --FONT-SIZES-C1: 16px;
-  --FONT-SIZES-C2: 14px;
-  --FONT-SIZES-C3: 12px;
-  --FONT-SIZES-H2: 32px;
-  --FONT-SIZES-H3: 28px;
-  --FONT-SIZES-H4: 24px;
-  --FONT-SIZES-H5: 20px;
-}