@salla.sa/twilight-components 3.0.18 → 3.0.20

package/dist/collection/components/salla-bullet-delivery/salla-bullet-delivery.css

@@ -52,10 +52,6 @@
   font-size: 12px;
 }
 
-.first-letter-cap::first-letter {
-  text-transform: uppercase;
-}
-
 .s-bullet-delivery-location-permission-btn {
   display: flex;
   align-items: center;
@@ -235,53 +231,504 @@
     transform: translateY(0);
   }
 }
-.branch-status-badge {
+/* ── Enhanced branch pickup selection (INV-1415) ──────────────────────────────────────────
+   Mirrors the checkout picker (Checkout-Module INV-1414): same colours, sizes and icons.
+   salla-modal moves itself to <body> on load, so the modal's content is no longer inside the
+   `.s-bullet-delivery` host: scope rules to `.s-bullet-delivery-modal` (the moved modal), which
+   also lets them outrank the single-class utilities.json rules. */
+@media (min-width: 640px) {
+  .s-bullet-delivery-modal .s-modal-sm {
+    width: 90vw !important;
+    max-width: 776px !important;
+  }
+}
+
+/* Segmented tabs: grey track, active tab is a white pill. */
+.s-bullet-delivery-modal .s-bullet-delivery-tabs {
+  gap: 4px;
+  padding: 4px;
+  border-radius: 12px;
+  background: #f5f5f5;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-tab {
+  justify-content: center;
+  gap: 8px;
+  min-height: 40px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #666;
+  font-size: 14px;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-tab:hover {
+  background: transparent;
+  color: var(--color-text, #333);
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-tab--active,
+.s-bullet-delivery-modal .s-bullet-delivery-tab--active:hover {
+  background: #fff;
+  color: #1a1a1a;
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+/* Checkout `pickup-discount-badge--flat`. */
+.s-bullet-delivery-modal .s-bullet-delivery-tab-badge {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  padding: 2px 6px;
-  max-height: 20px;
-  border-radius: 20px;
-  font-size: 9px;
-  font-weight: 500;
-  border: 1px solid transparent;
+  gap: 4px;
+  flex: 0 0 auto;
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 120%;
   white-space: nowrap;
+  color: #fff;
+  background: #5196f3;
 }
 
-.branch-status-badge.green {
-  color: #43a047;
-  background: #e8f5e9;
-  border-color: #43a047;
+/* Branch pickup offer (INV-1416), on the tab and beside each branch name. */
+.s-bullet-delivery-modal .s-bullet-delivery-discount-badge {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 120%;
+  white-space: nowrap;
+  color: #fff;
+  background: #e5484d;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-tab-badge-icon {
+  display: inline-flex;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-tab-badge-icon svg {
+  width: 7px;
+  height: 10px;
+}
+
+/* Filter panel: search + "nearest" on top, country + city below. */
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 12px;
+  background: #fafafa;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-field {
+  margin: 0;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters-row {
+  display: flex;
+  gap: 12px;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters-row > .s-bullet-delivery-field {
+  flex: 1;
+  min-width: 0;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters {
+  /* Checkout `.nearest-to-me-btn`: the selected-card border on a white button. */
+}
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-branch-search-wrap {
+  min-height: 40px;
+  border-color: #ddd;
+  border-radius: 8px;
+  background: #fff;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-branch-search-input {
+  font-size: 14px;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-location-btn {
+  height: 40px;
+  min-height: 40px;
+  padding: 0 14px;
+  gap: 4px;
+  border: 1px solid var(--color-primary);
+  border-radius: 8px;
+  background: #fff;
+  color: #1a1a1a;
+  font-size: 14px;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-location-btn:hover {
+  background: #fff;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-location-icon {
+  display: inline-flex;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-location-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Branch cards. */
+.s-bullet-delivery-modal .s-bullet-delivery-branches-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: min(400px, 45svh);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+/* Grid, not flex: the name shares the top rows with the radio and the actions, while every line
+   under it (instructions, distance/prep/hours, weekly hours) spans the full width beneath the
+   actions instead of wrapping in the space left beside them. */
+.s-bullet-delivery-modal .s-bullet-delivery-branch-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  column-gap: 12px;
+  row-gap: 2px;
+  padding: 16px;
+  border: 1px solid #eee;
+  border-radius: 12px;
+  background: #fff;
+  text-align: start;
+  transition: border-color 0.2s;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-item:last-child {
+  border-bottom: 1px solid #eee;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-item:hover:not(.s-bullet-delivery-branch-item--disabled) {
+  background: #fff;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-item--selected,
+.s-bullet-delivery-modal .s-bullet-delivery-branch-item--selected:last-child {
+  border-color: var(--color-primary);
+  background: #fff;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-item--disabled {
+  opacity: 0.5;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-radio {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 0;
+  pointer-events: none;
+}
+
+/* The body's lines become rows of the card grid. */
+.s-bullet-delivery-modal .s-bullet-delivery-branch-body {
+  display: contents;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-body > * {
+  grid-column: 2/-1;
+  min-width: 0;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-body > .s-bullet-delivery-branch-name {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+}
+
+/* Beside the actions, which span the name and location rows. */
+.s-bullet-delivery-modal .s-bullet-delivery-branch-body > .s-bullet-delivery-branch-location {
+  grid-column: 2;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-name {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 120%;
+  color: #1a1a1a;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  color: #6c757d;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-meta i {
+  font-size: 12px;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
 }
 
-.branch-status-badge.blue {
-  color: #1e88e5;
-  background: #e3f2fd;
-  border-color: #1e88e5;
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-status--open {
+  color: #43a047;
+  font-weight: 500;
 }
 
-.branch-status-badge.red {
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-status--closed,
+.s-bullet-delivery-modal .s-bullet-delivery-pickup-status--busy {
   color: #e53935;
-  background: #fdf2f2;
-  border-color: #e53935;
+  font-weight: 500;
 }
 
-.branch-status-badge.yellow {
-  color: #f9a825;
-  background: #fff8e1;
-  border-color: #f9a825;
+.s-bullet-delivery-modal .s-bullet-delivery-branch-schedule-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* 24px tap target around the 12px chevron; the negative margin keeps the line height. */
+  min-width: 24px;
+  min-height: 24px;
+  margin: -6px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-schedule-toggle i {
+  transition: transform 0.2s ease;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-schedule-toggle i.is-expanded {
+  transform: rotate(180deg);
 }
 
-.branch-status-badge.gray {
-  color: #757575;
-  background: #f5f5f5;
-  border-color: #757575;
+/* Checkout `.bd-working-hours-dropdown` / `.bd-schedule-row`. */
+.s-bullet-delivery-modal .s-bullet-delivery-branch-schedule {
+  display: flex;
+  flex-direction: column;
+  margin-top: 4px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-schedule-day {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 2px 12px;
+  background: #f8f9fa;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-schedule-days {
+  color: #6c757d;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-schedule-times {
+  color: #1a1a1a;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-instructions {
+  align-items: flex-start;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-instructions .s-bullet-delivery-branch-meta-icon {
+  margin-top: 2px;
+}
+
+/* Checkout `.text-dark.fw-medium` on the distance, prep time and closing/opening time. */
+.s-bullet-delivery-modal .s-bullet-delivery-branch-meta-value {
+  color: #1a1a1a;
+  font-weight: 500;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-meta-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-meta-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-actions {
+  grid-column: 3;
+  grid-row: 1/span 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Checkout `.branch-action-btn`, in the rounded-square shape of the design. */
+.s-bullet-delivery-modal .s-bullet-delivery-branch-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--color-border, #eee);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--color-text, #333);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-action i {
+  font-size: 16px;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-action:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background: var(--color-primary-tt, transparent);
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-action .s-bullet-delivery-branch-map-link-icon,
+.s-bullet-delivery-modal .s-bullet-delivery-branch-action .s-bullet-delivery-branch-map-link-icon svg {
+  width: 16px;
+  height: 16px;
+}
+.s-bullet-delivery-modal .s-bullet-delivery-branch-action .s-bullet-delivery-branch-map-link-icon path {
+  stroke: currentColor;
+}
+
+/* Disabled cards dim their actions but keep them usable (call / directions to a busy branch).
+   Also overrides `.s-bullet-delivery-branch-item * { pointer-events: none }` in themes built before twilight 3.0. */
+.s-bullet-delivery-modal .s-bullet-delivery-branch-item .s-bullet-delivery-branch-action,
+.s-bullet-delivery-modal .s-bullet-delivery-branch-item .s-bullet-delivery-branch-schedule-toggle {
+  pointer-events: auto;
 }
 
-.branch-status-badge.brown {
-  color: #6d4c41;
-  background: #efebe9;
-  border-color: #6d4c41;
+/* Distance / prep pills and their divider only take shape on mobile; on wider screens the pills
+   wrapper is transparent so distance, prep and hours keep sharing one meta row. */
+.s-bullet-delivery-modal .s-bullet-delivery-branch-pills {
+  display: contents;
+}
+
+.s-bullet-delivery-modal .s-bullet-delivery-branch-divider {
+  display: none;
+}
+
+/* ── Mobile branch card + filters (INV-1849) ─────────────────────────────────────────────
+   Mirrors the checkout mobile card (Checkout-Module INV-1848). The meta row joins the card grid
+   (`display: contents`) so its pills, divider and hours can be reordered around the instructions;
+   the filter wrappers flatten the same way: country and city share the first row, search and
+   "nearest" the second. */
+@media (max-width: 480px) {
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 12px 8px;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-branch-search,
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-search-row,
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-pickup-filters-row {
+    display: contents;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-field {
+    flex: 1 1 calc(50% - 4px);
+    min-width: 0;
+    order: 1;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-branch-search-wrap {
+    flex: 1 1 0;
+    min-width: 0;
+    order: 2;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-location-btn {
+    flex: 0 0 auto;
+    order: 3;
+    padding: 0 10px;
+    white-space: nowrap;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-error {
+    flex-basis: 100%;
+    order: 4;
+  }
+  /* Narrow phones: the "nearest" label squeezes the search field, so the button keeps only its
+     icon (the label stays as aria-label). */
+}
+@media (max-width: 480px) and (max-width: 400px) {
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-location-btn {
+    padding: 0 12px;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-pickup-filters .s-bullet-delivery-location-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+}
+@media (max-width: 480px) {
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-meta-row {
+    display: contents;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-pills,
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-divider,
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-open-status {
+    grid-column: 2/-1;
+    min-width: 0;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    order: 1;
+    margin-top: 6px;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-divider {
+    order: 2;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-instructions {
+    order: 3;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-open-status {
+    order: 4;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-schedule {
+    order: 5;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-location .s-bullet-delivery-branch-meta-icon {
+    display: none;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-pill {
+    padding: 4px 10px;
+    border: 1px solid var(--color-border, #eee);
+    border-radius: 999px;
+    font-size: 12px;
+    line-height: 1.4;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-pill .s-bullet-delivery-branch-meta-label {
+    display: none;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-pill .s-bullet-delivery-branch-meta-value {
+    color: inherit;
+    font-weight: 400;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-divider {
+    display: block;
+    width: 100%;
+    height: 0;
+    /* 10px margin + the card's 2px row-gap = 12px above and below the line. */
+    margin: 10px 0;
+    border: 0;
+    border-top: 1px solid #e0e0e0;
+    opacity: 1;
+  }
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-action,
+  .s-bullet-delivery-modal .s-bullet-delivery-branch-action:hover {
+    border-color: transparent;
+  }
 }
 .sr-only{
   position: absolute;
@@ -297,36 +744,27 @@
 .visible{
   visibility: visible;
 }
+.collapse{
+  visibility: collapse;
+}
 .static{
   position: static;
 }
-.mb-1{
-  margin-bottom: 0.25rem;
+.fixed{
+  position: fixed;
 }
 .inline{
   display: inline;
 }
-.flex{
-  display: flex;
-}
 .inline-flex{
   display: inline-flex;
 }
+.shrink{
+  flex-shrink: 1;
+}
 .resize{
   resize: both;
 }
-.flex-col{
-  flex-direction: column;
-}
-.items-center{
-  align-items: center;
-}
-.gap-1{
-  gap: 0.25rem;
-}
-.text-start{
-  text-align: start;
-}
 .\!text-blue-600{
   --tw-text-opacity: 1 !important;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1)) !important;