@salla.sa/twilight-components 2.14.536 → 2.14.538

package/dist/collection/components/salla-basket-gap/salla-basket-gap.css

@@ -1,3 +1,283 @@
-:host {
+/*!twlt*/:host {
   display: block;
-}
+}
+.block {
+  display: block;
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.s-basket-gap-entry {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  display: block;
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding: 1.25rem;
+}
+.s-basket-gap-title {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+.s-basket-gap-list {
+  display: flex;
+  flex-direction: column;
+}
+.s-basket-gap-list > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
+}
+.s-basket-gap-card {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 0.75rem;
+  row-gap: 0.625rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.s-basket-gap-card-image {
+  height: 4rem;
+  width: 4rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
+.s-basket-gap-card-image img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.s-basket-gap-card-info {
+  display: flex;
+  min-width: 0px;
+  flex: 1 1 0%;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.s-basket-gap-card-actions {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+@media (min-width: 640px) {
+  .s-basket-gap-card-actions {
+    width: auto;
+  }
+}
+.s-basket-gap-card-name {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  line-height: 1.25;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+}
+.s-basket-gap-card-name a:hover {
+  color: var(--color-primary);
+}
+.s-basket-gap-card-price {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-basket-gap-card-sale-price {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.s-basket-gap-card-sale-price span {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+.s-basket-gap-card-sale-price del {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  text-decoration-line: line-through;
+}
+.s-basket-gap-card-weight {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-basket-gap-card-offer {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
+  padding-left: 9px;
+  padding-right: 9px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 11px;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
+}
+.s-basket-gap-card-offer i {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.s-basket-gap-card-offer span {
+  font-weight: 700;
+  --tw-text-opacity: 1 !important;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important;
+}
+.s-basket-gap-card-offer salla-count-down {
+  flex-shrink: 0;
+}
+.s-basket-gap-card-offer salla-count-down:where([dir="ltr"], [dir="ltr"] *) {
+  margin-inline-start: 0.25rem;
+}
+.s-basket-gap-card-offer salla-count-down:where([dir="rtl"], [dir="rtl"] *) {
+  margin-inline-end: 0.25rem;
+}
+.s-basket-gap-card-offer .s-count-down-list {
+  margin-left: -0px !important;
+  margin-right: -0px !important;
+  margin-bottom: 0px !important;
+  margin-top: 0px !important;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-start !important;
+  column-gap: 0px;
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.s-basket-gap-card-offer .s-count-down-list:where([dir="ltr"], [dir="ltr"] *) {
+  flex-direction: row-reverse !important;
+}
+.s-basket-gap-card-offer .s-count-down-list:where([dir="rtl"], [dir="rtl"] *) {
+  flex-direction: row !important;
+}
+.s-basket-gap-card-offer .s-count-down-item {
+  position: relative !important;
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+  display: inline-flex !important;
+  width: auto !important;
+  flex: none !important;
+  flex-grow: 0 !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  line-height: 1 !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(21 128 61 / var(--tw-text-opacity, 1)) !important;
+}
+.s-basket-gap-card-offer .s-count-down-item-value {
+  display: inline-block !important;
+  width: 2ch !important;
+  min-width: 2ch !important;
+  text-align: center;
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  line-height: 1;
+}
+.s-basket-gap-card-offer .s-count-down-item-label {
+  display: none;
+}
+.s-basket-gap-entry .s-basket-gap-card-offer.s-basket-gap-card-offer .s-count-down-item::before {
+  content: none !important;
+}
+.s-basket-gap-entry .s-basket-gap-card-offer.s-basket-gap-card-offer .s-count-down-item::after {
+  content: none !important;
+  position: static;
+  left: auto;
+  right: auto;
+  transform: none;
+}
+[dir='rtl'] .s-basket-gap-entry .s-basket-gap-card-offer.s-basket-gap-card-offer .s-count-down-item:not(:last-child)::after {
+  content: ':' !important;
+  position: static;
+  left: auto;
+  right: auto;
+  transform: none;
+  margin-left: 0.15rem;
+  margin-right: 0.15rem;
+  color: #15803d;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+[dir='ltr'] .s-basket-gap-entry .s-basket-gap-card-offer.s-basket-gap-card-offer .s-count-down-item:not(:first-child)::after {
+  content: ':' !important;
+  position: static;
+  left: auto;
+  right: auto;
+  transform: none;
+  margin-left: 0.15rem;
+  margin-right: 0.15rem;
+  color: #15803d;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+.s-basket-gap-card-btn {
+  flex-shrink: 0;
+}
+.s-basket-gap-card-btn salla-button .s-button-btn {
+  border-radius: var(--s-radius, 0.25rem);
+  border-width: 1px !important;
+  border-color: var(--color-primary) !important;
+  background-color: transparent !important;
+  color: var(--color-primary) !important;
+}
+.s-basket-gap-card-btn salla-button .s-button-btn:hover {
+  background-color: var(--color-primary) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
+}
+.s-basket-gap-card-btn salla-button .s-button-loader:before {
+  border-top-color: var(--color-primary) !important;
+  border-left-color: var(--color-primary) !important;
+  border-bottom-color: rgb(243 244 246 / var(--tw-border-opacity, 1)) !important;
+  --tw-border-opacity: 1 !important;
+  border-right-color: rgb(243 244 246 / var(--tw-border-opacity, 1)) !important;
+}
+.s-basket-gap-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.s-basket-gap-skeleton-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.s-basket-gap-skeleton-info {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  gap: 0.5rem;
+}

package/dist/collection/components/salla-booking-field/salla-booking-field.css

@@ -1,3 +1,109 @@
-:host {
+/*!twlt*/:host {
   display: block;
-}
+}
+.outline {
+  outline-style: solid;
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.s-hidden {
+  display: none;
+}
+.s-booking-field-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+@media (min-width: 640px) {
+  .s-booking-field-main {
+    justify-content: flex-end;
+  }
+}
+.s-booking-field-price {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.s-booking-field-book-now-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.s-booking-field-book-now-content span svg {
+  height: 1rem;
+  width: 1rem;
+}
+.s-booking-field-modal iframe {
+  width: 100%;
+  transition-property: height;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.s-booking-field-modal .s-modal-body {
+  overflow: hidden;
+  padding: 1.25rem;
+}
+.s-booking-field-modal .s-modal-title {
+  display: flex;
+  justify-content: flex-start;
+}
+.s-booking-field-reservations {
+  margin-top: 0.625rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+.s-booking-field-reservations-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+}
+.s-booking-field-reservations-item > span {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.s-booking-field-reservations-time {
+  unicode-bidi: plaintext;
+}
+.s-booking-field-reservations-has-time {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
+.s-booking-field-reservations-has-time:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: 1rem;
+  border-right-width: 1px;
+  padding-right: 1rem;
+}
+.s-booking-field-reservations-has-time:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 1rem;
+  border-left-width: 1px;
+  padding-left: 1rem;
+}
+.s-booking-field-reservations-icon:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: 0.5rem;
+}
+.s-booking-field-reservations-icon:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.5rem;
+}
+.s-booking-field-reservations-icon svg {
+  height: 0.75rem;
+  width: 0.75rem;
+  fill: #1f2937;
+}

package/dist/collection/components/salla-bottom-alert/salla-bottom-alert.css

@@ -1,3 +1,274 @@
-:host {
+/*!twlt*/:host {
   display: block;
-}
+}
+.flex {
+  display: flex;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.items-center {
+  align-items: center;
+}
+.gap-1 {
+  gap: 0.25rem;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.s-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+.s-scrollbar::-webkit-scrollbar-track {
+  background-color: #eee;
+}
+.s-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary);
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+}
+.s-bottom-alert-wrapper {
+  position: fixed;
+  bottom: 0px;
+  z-index: 50;
+  display: flex;
+  min-height: 4rem;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-primary);
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+@media (min-width: 768px) {
+  .s-bottom-alert-wrapper {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+.s-bottom-alert-wrapper-with-template {
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 73 86 / var(--tw-bg-opacity, 1));
+  font-family: PingARLT,system-ui;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+@media (min-width: 768px) {
+  .s-bottom-alert-wrapper-with-template {
+    flex-direction: row;
+  }
+}
+.s-bottom-alert-logo-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.s-bottom-alert-logo {
+  height: auto;
+  width: 3rem;
+}
+.s-bottom-alert-logo-text {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(186 243 230 / var(--tw-text-opacity, 1));
+}
+.s-bottom-alert-icon svg {
+  height: 1rem;
+  width: 1rem;
+  fill: #fff;
+}
+.s-bottom-alert-message {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.s-bottom-alert-message-highlight {
+  cursor: default;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+}
+.s-bottom-alert-message-splitter {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.s-bottom-alert-message-link {
+  cursor: pointer;
+  text-decoration-line: underline;
+}
+.s-bottom-alert-content {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+@media (min-width: 768px) {
+  .s-bottom-alert-content {
+    flex-direction: row;
+  }
+}
+.s-bottom-alert-action button {
+  background-color: var(--color-primary-reverse);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-primary);
+}
+.s-bottom-alert-actions-group {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.s-bottom-alert-action-link {
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(186 243 230 / var(--tw-text-opacity, 1));
+  text-decoration-line: underline;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.s-bottom-alert-action-link:hover {
+  opacity: 0.8;
+}
+.s-bottom-alert-action-purchase-button {
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(186 243 230 / var(--tw-bg-opacity, 1));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(0 73 86 / var(--tw-text-opacity, 1));
+}
+.s-bottom-alert-actions-group-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.s-bottom-alert-modal .s-modal-body {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.s-bottom-alert-modal-cover img {
+  height: 300px;
+  width: 100%;
+  object-fit: cover;
+}
+.s-bottom-alert-modal-inner {
+  max-height: 80vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.s-bottom-alert-modal-content-title {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  color: var(--color-primary-dark);
+}
+.s-bottom-alert-modal-content-icon svg {
+  height: 1.25rem;
+  width: 1.25rem;
+  fill: var(--color-primary-dark);
+}
+.s-bottom-alert-modal-content-extra-padding {
+  padding-bottom: 100px;
+}
+.s-bottom-alert-modal-content hr {
+  margin-top: 1rem;
+}
+.s-bottom-alert-modal-content-screenshots {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+.s-bottom-alert-modal-content-screenshot.swiper-slide {
+  height: 200px !important;
+  width: 370px !important;
+}
+.s-bottom-alert-modal-content-screenshot img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.s-bottom-alert-modal-content-footer button .s-button-text {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.s-bottom-alert-modal-content-footer {
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 2;
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1));
+  padding: 0.625rem;
+}
+.s-bottom-alert-modal-content-price-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.s-bottom-alert-modal-content-price-details-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.s-bottom-alert-modal-content-price-details-item-icon svg {
+  height: 1rem;
+  width: 1rem;
+  fill: var(--color-primary-dark);
+}
+.s-bottom-alert-modal-content-price-details-item-name {
+  --tw-text-opacity: 1;
+  color: rgb(68 68 68 / var(--tw-text-opacity, 1));
+}
+.s-bottom-alert-modal-content-price-details-item-price {
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(102 102 102 / var(--tw-text-opacity, 1));
+}
+.s-bottom-alert-modal-price-wrapper {
+  margin-bottom: 0.625rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.s-bottom-alert-modal-price-wrapper-amount {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}