forstok-ui-lib 5.11.0 → 5.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.11.0",
+  "version": "5.11.2",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/stylesheets/shares.styles.ts

@@ -2195,12 +2195,12 @@ export const RightPanelContainer = styled.section`
     display: inline-grid !important;
   }
 `
-export const SearchFormWrapper = styled.div`
+export const SearchFormWrapper = styled.div<{ $mode?: string }>`
   position: relative;
   i {
     position: absolute;
     left: 12px;
-    top: 7px;
+    top: 6px;
     pointer-events: none;
     z-index: 1;
     &:last-child {
@@ -2213,19 +2213,30 @@ export const SearchFormWrapper = styled.div`
     right: 12px;
     top: 6px;
   }
-  > input {
-    width: calc(100vw - 100px);
-    height: 32px;
-  }
-  @media only screen and (min-width: 768px) {
-    i {
-      top: 11px;
-    }
-    > input {
-      width: 300px;
-      height: 40px;
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'pos') {
+      return css` 
+        i {
+          top: 7px;
+        }
+        > input {
+          width: calc(100vw - 100px);
+          height: 32px;
+        }
+        @media only screen and (min-width: 768px) {
+          i {
+            top: 11px;
+          }
+          > input {
+            width: 300px;
+            height: 40px;
+          }
+        }
+      `
     }
-  }
+  }}
+  
+  
 `
 export const TableHeadLabel = styled.span` 
   color: var(--mt-clr);
@@ -2458,13 +2469,15 @@ export const TableItemWrapper = styled.section<{ $mode: string, $isBorder?: bool
   ${TableItemColumn} {
     width: 960px;
     border-bottom: 1px solid var(--pri-clr-ln);
-    >* {
+    > * {
       padding: 15px 10px;
     }
     &:first-child {
       border-bottom: 1px solid var(--sec-clr-ln);
       display: grid;
-      > * { padding: 0 10px 12px; }
+      > * { 
+        padding: 0 10px 12px; 
+      }
     }
     &:last-child { border-bottom: none; }
     &[role='rowheader'] {
@@ -2472,9 +2485,14 @@ export const TableItemWrapper = styled.section<{ $mode: string, $isBorder?: bool
       color: var(--mt-clr);
     }
   }
+  @media only screen and (min-width: 768px) {
+    width: auto !important;
+  }
   @media only screen and (min-width: 1024px) {
     overflow-x: unset;
-    ${TableItemColumn} { width: unset; }
+    ${TableItemColumn} { 
+      width: unset; 
+    }
   }
   ${getTableItemWrapperModFunc}
 `