@salla.sa/twilight-components 2.14.537 → 2.14.539

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

@@ -1,4 +1,4 @@
-/** TODO:: after Re-build all themes with the latest version of maintenance, remove these styles */
+/*!twlt*//** TODO:: after Re-build all themes with the latest version of maintenance, remove these styles */
 .s-maintenance-alert-wrapper {
   display: flex;
   min-height: 40px;
@@ -116,4 +116,158 @@
   .s-maintenance-alert-btn {
     padding: 0.5rem 1rem;
   }
-}
+}
+.s-maintenance-alert-wrapper {
+  position: relative;
+  display: flex;
+  min-height: 40px;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 38 61 / var(--tw-bg-opacity, 1));
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+@media (min-width: 640px) {
+  .s-maintenance-alert-wrapper {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+.s-maintenance-alert-wrapper a {
+  transition: 0.35s cubic-bezier(0.2, 1, 0.3, 1);
+}
+.s-maintenance-alert-wrapper * {
+  color: inherit;
+}
+.s-maintenance-alert-close {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+}
+@media (min-width: 768px) {
+  .s-maintenance-alert-close {
+    top: 0.75rem;
+    right: 0.75rem;
+  }
+}
+.s-maintenance-alert-close:where([dir="rtl"], [dir="rtl"] *) {
+  right: unset;
+  left: 0.25rem;
+}
+@media (min-width: 768px) {
+  .s-maintenance-alert-close:where([dir="rtl"], [dir="rtl"] *) {
+    left: 0.75rem;
+  }
+}
+.s-maintenance-alert-close svg {
+  height: 1rem;
+  width: 1rem;
+  fill: #fff;
+}
+@media (min-width: 768px) {
+  .s-maintenance-alert-close svg {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+}
+.s-maintenance-alert-content {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+@media (min-width: 640px) {
+  .s-maintenance-alert-content {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+.s-maintenance-alert-container {
+  display: flex;
+  align-items: center;
+}
+.s-maintenance-alert-icon {
+  margin-right: 1.25rem;
+  display: none;
+}
+@media (min-width: 640px) {
+  .s-maintenance-alert-icon {
+    display: block;
+  }
+}
+.s-maintenance-alert-icon:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 1.25rem;
+  margin-right: 0px;
+}
+.s-maintenance-alert-text h2 {
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  line-height: 1.4;
+}
+@media (min-width: 640px) {
+  .s-maintenance-alert-text h2 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+.s-maintenance-alert-text p {
+  margin: 0px;
+  text-align: right;
+  font-size: 10px;
+  line-height: 1.2;
+}
+@media (min-width: 640px) {
+  .s-maintenance-alert-text p {
+    text-align: center;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    line-height: 1;
+  }
+}
+.s-maintenance-alert-btn {
+  position: relative;
+  margin-left: 4px;
+  margin-right: 4px;
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  border-radius: 0.125rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(93 213 196 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(93 213 196 / var(--tw-bg-opacity, 1));
+  padding: 0.5rem;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  line-height: 1.4;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.s-maintenance-alert-btn:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(53 203 181 / var(--tw-bg-opacity, 1));
+}
+@media (min-width: 640px) {
+  .s-maintenance-alert-btn {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+}

package/dist/collection/components/salla-map/salla-map.css

@@ -1,4 +1,4 @@
-/*
+/*!twlt*//*
 * Salla Location Component: location popup modal
 * You can use these classes to target the elements in the component.
 */
@@ -20,4 +20,90 @@
 .s-map-wrapper.s-has-error .s-map-location-button {
   outline: 2px solid rgb(248, 113, 113);
   outline-offset: 2px;
-}
+}
+.visible {
+  visibility: visible;
+}
+.s-has-error {
+  --tw-border-opacity: 1;
+  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
+}
+.s-has-error:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+.s-has-error {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important;
+}
+.s-map-modal-title {
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.s-map-location-icon {
+  margin-right: 0.5rem;
+}
+.s-map-location-icon:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.5rem;
+  margin-right: 0px;
+}
+.s-map-location-icon svg {
+  height: 1rem !important;
+  width: 1rem !important;
+}
+.s-map-modal-body {
+  position: relative;
+  overflow: hidden;
+}
+.s-map-element {
+  height: 400px;
+  width: 100%;
+}
+.s-map-search-wrapper {
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  margin: 1.25rem;
+  width: -webkit-fill-available;
+}
+.s-map-search-wrapper input {
+  height: 2.5rem;
+  width: 100%;
+  padding: 0.5rem;
+}
+.s-map-search-wrapper input:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: right;
+}
+.s-map-search-results {
+  margin-top: 0px;
+  display: flex;
+  height: 6rem;
+  flex-direction: column;
+  padding: 0.5rem;
+}
+.s-map-modal-body .s-loading-container {
+  position: absolute;
+  margin: 0px;
+  padding: 5rem;
+}
+.s-map-my-location-button {
+  position: absolute;
+  bottom: 1.5rem;
+  left: 0px;
+  margin: 0.5rem;
+}
+.s-map-location-button .s-button-text {
+  display: flex;
+  align-items: center;
+}
+.s-map-submit-button button {
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}

package/dist/collection/components/salla-menu/salla-menu.css

@@ -1,3 +1,176 @@
-:host {
+/*!twlt*/:host {
   display: block;
-}
+}
+.relative {
+  position: relative;
+}
+.left-0 {
+  left: 0px;
+}
+.m-8 {
+  margin: 2rem;
+}
+.flex {
+  display: flex;
+}
+.\!hidden {
+  display: none !important;
+}
+.hidden {
+  display: none;
+}
+.w-56 {
+  width: 14rem;
+}
+.w-full {
+  width: 100%;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.\!py-3 {
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important;
+}
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.font-bold {
+  font-weight: 700;
+}
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.shadow-default {
+  --tw-shadow: 5px 10px 30px #2B2D340D;;
+  --tw-shadow-colored: 5px 10px 30px 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-menu-item {
+  display: none !important;
+}
+@media (min-width: 1024px) {
+  .s-menu-item {
+    display: block !important;
+  }
+  .s-menu-root-level {
+    display: inline-block !important;
+  }
+}
+.s-menu-non-root-level {
+  position: relative;
+}
+.s-menu-products-wrapper {
+  flex-grow: 1;
+  padding: 2rem;
+}
+.s-menu-products-container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+}
+.s-menu-submenu-unordered-list {
+  margin: 2rem;
+  width: 14rem;
+  flex-shrink: 0;
+}
+.s-menu-submenu-unordered-list:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: 0px;
+}
+.s-menu-submenu-unordered-list:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0px;
+}
+.s-menu-submenu-with-product {
+  left: 0px;
+  display: flex;
+  width: 100%;
+}
+.s-menu-submenu-without-product {
+  width: 14rem;
+}
+.s-menu-footer-item {
+  margin-bottom: 1.25rem;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 1;
+}
+.s-menu-footer-item:last-child {
+  margin-bottom: 0px;
+}
+.s-menu-topnav-list {
+  display: none;
+  align-items: center;
+  white-space: nowrap;
+}
+@media (min-width: 1024px) {
+  .s-menu-topnav-list {
+    display: flex;
+  }
+}
+.s-menu-topnav-list:where([dir="ltr"], [dir="ltr"] *) {
+  padding-right: 1rem;
+}
+.s-menu-topnav-list:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 1rem;
+}
+.s-menu-topnav-item {
+  display: inline-block;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 1;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.s-menu-topnav-item:hover {
+  opacity: 0.8;
+}
+.s-menu-topnav-item:where([dir="ltr"], [dir="ltr"] *) {
+  border-right-width: 1px;
+}
+.s-menu-topnav-item:first-child:where([dir="ltr"], [dir="ltr"] *) {
+  padding-left: 0px;
+}
+.s-menu-topnav-item:last-child:where([dir="ltr"], [dir="ltr"] *) {
+  border-width: 0px;
+  padding-right: 0px;
+}
+.s-menu-topnav-item:where([dir="rtl"], [dir="rtl"] *) {
+  border-left-width: 1px;
+}
+.s-menu-topnav-item:first-child:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0px;
+}
+.s-menu-topnav-item:last-child:where([dir="rtl"], [dir="rtl"] *) {
+  border-width: 0px;
+  padding-left: 0px;
+}
+@media (min-width: 1024px) {
+  .lg\:\!block {
+    display: block !important;
+  }
+  .lg\:\!inline-block {
+    display: inline-block !important;
+  }
+  .lg\:hidden {
+    display: none;
+  }
+}
+.ltr\:mr-0:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: 0px;
+}
+.rtl\:ml-0:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0px;
+}

package/dist/collection/components/salla-metadata/salla-metadata.css

@@ -0,0 +1,49 @@
+/*!twlt*/.text-blue-700 {
+    --tw-text-opacity: 1;
+    color: rgb(29 78 216 / var(--tw-text-opacity, 1))
+}
+.text-primary {
+    color: var(--color-primary)
+}
+.underline {
+    text-decoration-line: underline
+}
+.s-metadata-box {
+    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-metadata-box-header {
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: center;
+    column-gap: 0.5rem;
+    border-bottom-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+    padding-bottom: 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 700
+}
+.s-metadata-row {
+    margin-bottom: 0.75rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 0.5rem;
+    line-height: 1.25rem
+}
+.s-metadata-row:last-child {
+    margin-bottom: 0px
+}
+.s-metadata-row-name {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 700;
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
+}