@x-plat/design-system 0.4.3 → 0.4.5

package/dist/index.css

@@ -863,9 +863,8 @@
 .lib-xplat-card {
   display: flex;
   flex-direction: column;
-  width: fit-content;
+  flex: 1;
   min-width: 0;
-  max-width: 100%;
   height: fit-content;
   border-radius: 1rem;
   border: 1px solid var(--xplat-neutral-400);
@@ -1336,9 +1335,38 @@
   color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
 }
 .lib-xplat-datepicker.range {
+  display: flex;
+  flex-direction: column;
+}
+.lib-xplat-datepicker .datepicker-range-tabs {
+  display: none;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid var(--xplat-neutral-200);
+}
+.lib-xplat-datepicker .datepicker-range-tab {
+  flex: 1;
+  padding: 0.5rem;
+  border: none;
+  background: none;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--xplat-neutral-400);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+}
+.lib-xplat-datepicker .datepicker-range-tab.active {
+  color: var(--datepicker-active-color, var(--xplat-blue-500));
+  border-bottom-color: var(--datepicker-active-color, var(--xplat-blue-500));
+  font-weight: 600;
+}
+.lib-xplat-datepicker .datepicker-range-panels {
   display: flex;
   gap: 1.5rem;
 }
+.lib-xplat-datepicker .datepicker-range-mobile {
+  display: none;
+}
 .lib-xplat-datepicker .datepicker-range-panel {
   flex: 1;
   min-width: 200px;
@@ -1351,6 +1379,20 @@
   color: var(--xplat-neutral-500);
   margin-bottom: 0.5rem;
 }
+@media (max-width: 600px) {
+  .lib-xplat-datepicker .datepicker-range-tabs {
+    display: flex;
+  }
+  .lib-xplat-datepicker .datepicker-range-panels {
+    display: none;
+  }
+  .lib-xplat-datepicker .datepicker-range-mobile {
+    display: block;
+  }
+  .lib-xplat-datepicker .datepicker-range-panel {
+    min-width: unset;
+  }
+}
 .lib-xplat-datepicker.input-datepicker {
   position: relative;
 }
@@ -1984,6 +2026,7 @@
 .lib-xplat-pop-over {
   position: relative;
   z-index: 10;
+  width: fit-content;
   cursor: pointer;
   user-select: none;
 }
@@ -1991,6 +2034,9 @@
   position: absolute;
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 10;
   opacity: 0;
   transform: scale(0.8);
@@ -3018,6 +3064,17 @@
   background-color: var(--xplat-white);
   width: 100%;
   box-sizing: border-box;
+  gap: 12px;
+  overflow: hidden;
+}
+.lib-xplat-layout-header > * {
+  min-width: 0;
+  flex-shrink: 1;
+}
+@media (max-width: 767px) {
+  .lib-xplat-layout-header {
+    padding: 12px;
+  }
 }
 
 /* src/layout/Layout/layout.scss */
@@ -3035,6 +3092,7 @@
   flex: 1;
   overflow: auto;
   width: 100%;
+  min-width: 0;
   display: flex;
   flex-direction: column;
 }
@@ -3043,6 +3101,20 @@
   top: 0;
   z-index: 10;
 }
+@media (max-width: 767px) {
+  .lib-xplat-layout > .lib-xplat-layout-content-wrapper > .lib-xplat-layout-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    z-index: 20;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
+  }
+  .lib-xplat-layout > .lib-xplat-layout-content-wrapper > .lib-xplat-layout-sidebar.large {
+    transform: translateX(0);
+  }
+}
 
 /* src/layout/SideBar/sidebar.scss */
 .lib-xplat-layout-sidebar {