forstok-ui-lib 8.2.2 → 8.2.3

package/package.json

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

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

@@ -3678,27 +3678,32 @@ export const DropdownTitle = styled.div`
     font-style: normal; 
   }
 `
+
 export const DropdownList = styled.ul<{ $mode?: 'no-border' }>` 
   ${clearList}
   max-height: 44vh;
   overflow: auto;
   > li {
-    padding: 8px 1em;
     border-bottom: ${({ $mode }:{ $mode?: 'no-border' }) => $mode === 'no-border' ? 'none' : '1px solid var(--pri-clr-ln)'};
     &:last-child {
       border-bottom: 0;
     }
   }
+  @media only screen and (min-width: 768px) {
+    padding: 4px 8px;
+  }
   @media only screen and (min-width: 1366px) {
     max-height: 50vh;
   }
 `
-export const DropdownItem = styled.li<{ $mode?: 'categories' }>` 
+export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActive?: boolean, $isReply?: boolean }>` 
   display: inline-grid;
   width: 100%;
   grid-gap: 10px; 
   min-height: 48px;
   grid-auto-flow: row;
+  cursor: pointer;
+  position: relative;
   @media only screen and (min-width: 768px) {
     grid-auto-flow: column;
     grid-template-columns: 100px auto;
@@ -3717,6 +3722,59 @@ export const DropdownItem = styled.li<{ $mode?: 'categories' }>`
       grid-template-columns: 22px auto;
     }
   `}
+  ${({ $mode }) => $mode === 'common' && css`
+    margin-top: .125rem;
+    margin-bottom: .125rem;
+    color: var(--pri-clr);
+    line-height: 20px;
+    align-items: center;
+    padding: .5rem .75rem;
+    display: block;
+    min-height: auto;
+    &:hover {
+      background-color: var(--nav-clr-bg__hvr);
+      border-radius: var(--nav-rd);
+    }
+    > label, > span {
+      cursor: pointer;
+      text-transform: capitalize;
+      width: 100%;
+      max-width: 218px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+    }
+  `}
+  ${({ $mode, $isReply }) => ($mode === 'common' && $isReply) && css`
+    padding-right: 1.825rem !important;
+    ._refReplyIcon {
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  `}
+  ${({ $mode, $isActive }) => ($mode === 'common' && $isActive) && css`
+    background-color: var(--nav-clr-bg__hvr);
+    border-radius: var(--nav-rd);
+    padding-right: 1.75em;
+    &, > label, > span {
+      font-weight: 500;
+    }
+    &:after {
+      content: '✔';
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 7px;
+      bottom: 0;
+      width: 12px;
+      height: 20px;
+    }
+    ._refReplyIcon {
+      right: 22px;
+    }
+  `}
 `
 export const DropdownAction = styled.div` 
   padding: .8em 1em 1em;

package/src/components/radio/styles.ts

@@ -45,7 +45,15 @@ export const RadioSpan = styled.span<{ $mode?: string }>`
           border: none;
         }
       `
-    }
+    } else if ($mode === 'sort') {
+      return css` 
+        padding-left: 0;
+        &:before, 
+        &:after {
+          border: none;
+        }
+      `
+    } 
   }}  
 `
 
@@ -80,6 +88,20 @@ export const RadioInput = styled.input<{ $mode?: string }>`
           }
         }
       `
+    } else if ($mode === 'sort') {
+      return css`  
+        &:checked + ${RadioSpan} {
+          &:before, 
+          &:after {
+            border: none;
+            transform: none;
+            background: none;
+          }
+          &:before {
+            width: 14px;
+          }
+        }
+      `
     }
   }}
 `