@salla.sa/twilight-components 2.14.537 → 2.14.539

package/dist/collection/components/salla-order-options-modal/salla-order-options-modal.css

@@ -1,4 +1,4 @@
-/*
+/*!twlt*//*
 * Salla Order Options Modal: popup modal that collects cart-level order options
 * before the fast-checkout widget creates the cart via /mini.
 */
@@ -32,4 +32,52 @@
   line-height: 1.5rem;
   font-weight: 700;
   color: #111827;
-}
+}
+.static {
+  position: static;
+}
+.block {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-order-options-modal-body {
+  display: block;
+}
+.s-order-options-modal-subtitle {
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-order-options-modal-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.s-order-options-modal-item {
+  display: block;
+}
+.s-order-options-modal-footer {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+.s-order-options-modal-cta-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.s-order-options-modal-cta-text {
+  font-weight: 700;
+}
+.s-order-options-modal-cta-total {
+  font-weight: 700;
+}

package/dist/collection/components/salla-order-shipments/salla-order-shipments.css

@@ -1,3 +1,111 @@
-:host {
+/*!twlt*/:host {
   display: block;
-}
+}
+.s-order-shipments-wrapper {
+  display: block;
+}
+.s-order-shipments-empty {
+  display: none;
+}
+.s-order-shipments-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.s-order-shipments-card {
+  display: flex;
+  min-width: 16rem;
+  flex: 1 1 0%;
+  flex-basis: 25%;
+  flex-direction: column;
+  gap: 0.75rem;
+  border-radius: 1rem;
+  background-color: var(--color-surface);
+  padding: 1rem;
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-order-shipments-header {
+  display: flex;
+  gap: 0.5rem;
+}
+.s-order-shipments-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+.s-order-shipments-logo {
+  height: 3rem;
+  width: 3rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  object-fit: cover;
+}
+.s-order-shipments-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 0.75rem;
+  row-gap: 0.5rem;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+.s-order-shipments-tracking {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.s-order-shipments-placeholder {
+  color: var(--color-text-secondary);
+}
+.s-order-shipments-copy {
+  display: inline-flex;
+  cursor: pointer;
+  align-items: center;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  color: currentColor;
+}
+.s-order-shipments-copy svg {
+  height: 0.875rem;
+  width: 0.875rem;
+  fill: currentColor;
+}
+.s-order-shipments-items {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+}
+.s-order-shipments-item {
+  display: inline-flex;
+  height: 4.5rem;
+  width: 4.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border-width: 1px;
+  border-color: var(--color-border);
+  padding: 0.375rem;
+}
+.s-order-shipments-item img {
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+.s-order-shipments-item-name {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  text-align: center;
+  font-size: 10px;
+  line-height: 1.25;
+  color: var(--color-text-secondary);
+}

package/dist/collection/components/salla-order-summary/salla-order-summary.css

@@ -1,3 +1,118 @@
-:host {
+/*!twlt*/:host {
   display: block;
-}
+}
+.s-order-summary-wrapper {
+  display: grid;
+  gap: 0.625rem;
+}
+.s-order-summary-item {
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  padding: 1.25rem;
+  text-align: start;
+}
+.s-order-summary-item-title {
+  font-weight: bold;
+  margin-bottom: 1.25rem;
+  unicode-bidi: plaintext;
+}
+.s-order-summary-item-download {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+.s-order-summary-code-item-wrapper {
+  margin-bottom: 0.5rem;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+  padding-bottom: 0.5rem;
+}
+.s-order-summary-code-item-wrapper:last-child {
+  margin-bottom: 0px;
+  border-width: 0px;
+  padding-bottom: 0px;
+}
+@media (min-width: 768px) {
+  .s-order-summary-code-item-wrapper {
+    display: flex;
+  }
+}
+.s-order-summary-code-item-wrapper p {
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  line-height: 1;
+}
+.s-order-summary-digital-item-wrapper {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.s-order-summary-digital-item-wrapper:last-child {
+  padding-bottom: 0px;
+}
+.s-order-summary-item-copy-button span svg {
+  pointer-events: none;
+  display: inline;
+  height: 12px;
+  width: 12px;
+  vertical-align: baseline;
+}
+.s-order-summary-item-copy-button span svg:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: 0.5rem;
+}
+.s-order-summary-item-copy-button span svg:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.5rem;
+}
+.s-order-summary-code-item-wrapper p span svg {
+  display: inline;
+  height: 1.25rem;
+  width: 1.25rem;
+  fill: #6b7280;
+  vertical-align: baseline;
+}
+.s-order-summary-code-item-wrapper p span svg:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: 0.5rem;
+}
+.s-order-summary-code-item-wrapper p span svg:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.5rem;
+}
+.s-order-summary-digital-item-wrapper div span:last-of-type {
+  display: inline-block;
+}
+.s-order-summary-digital-item-wrapper span svg {
+  display: inline-block;
+  height: 14px;
+  width: 14px;
+  vertical-align: baseline;
+}
+.s-order-summary-digital-item-wrapper span svg:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: 0.5rem;
+}
+.s-order-summary-digital-item-wrapper span svg:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.5rem;
+}
+.s-order-summary-item-copy-button.copied .s-button-text {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
+}
+.s-order-summary-digital-item-wrapper .s-order-summary-item-download span {
+  position: relative;
+  top: 1px;
+}
+.s-order-summary-digital-item-wrapper .s-order-summary-item-download span svg {
+  margin-left: 0px;
+  margin-right: 0px;
+  height: 18px;
+  width: 18px;
+  --tw-translate-y: 2px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  fill: var(--color-primary);
+}

package/dist/collection/components/salla-order-totals-card/salla-order-totals-card.css

@@ -1,3 +1,117 @@
-:host {
+/*!twlt*/:host {
   display: block;
-}
+}
+.s-order-totals-card-wrapper {
+  display: block;
+}
+.s-order-totals-card-panel {
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.s-order-totals-card-heading {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.s-order-totals-card-flow {
+  display: flow-root;
+}
+.s-order-totals-card-list {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-order-totals-card-list > .s-order-totals-card-row {
+  border-bottom-width: 1px;
+}
+.s-order-totals-card-list > .s-order-totals-card-row:last-child {
+  border-bottom-width: 0px;
+}
+.s-order-totals-card-row {
+  display: block;
+}
+.s-order-totals-card-row-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+.s-order-totals-card-label {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-order-totals-card-value {
+  font-weight: 500;
+}
+.s-order-totals-card-discount {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.s-order-totals-card-tax-value {
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.s-order-totals-card-total {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  border-radius: 0.375rem;
+  background-color: var(--color-border);
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.s-order-totals-card-total-label {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+}
+.s-order-totals-card-total-value {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+}
+.s-order-totals-card-refund {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  border-left-width: 4px;
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.s-order-totals-card-refund:where([dir="rtl"], [dir="rtl"] *) {
+  border-left-width: 0px;
+  border-right-width: 4px;
+}
+.s-order-totals-card-refund-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+.s-order-totals-card-refund-icon {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.s-order-totals-card-refund-value {
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}