forstok-ui-lib 8.3.3 → 8.3.5

package/package.json

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

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

@@ -3708,6 +3708,11 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
     grid-auto-flow: column;
     grid-template-columns: 100px auto;
   }
+  &[data-disabled="true"]{
+    color: rgb(169, 169, 169);
+    opacity: 0.7;
+    pointer-events: none;
+  }
   ${({ $mode }) => !$mode && css`
     padding: 8px .5em;
     &:first-child {
@@ -3717,21 +3722,7 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
       padding-bottom: 4px;
     }
   `}
-  ${({ $mode }) => $mode === 'categories' && css`
-    grid-auto-flow: column;
-    grid-template-columns: 22px auto;
-    min-height: 33px;
-    align-items: center;
-    grid-gap: 0;
-    > label {
-      cursor: pointer;
-      text-transform: capitalize;
-    }
-    @media only screen and (min-width: 768px) {
-      grid-template-columns: 22px auto;
-    }
-  `}
-  ${({ $mode }) => $mode === 'common' && css`
+  ${({ $mode }) => $mode && css`
     margin-bottom: 4px;
     color: var(--pri-clr);
     line-height: 20px;
@@ -3757,8 +3748,19 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
       white-space: nowrap;
       display: block;
     }
+    ${$mode === 'categories' && css`        
+      padding: 0 !important;
+      > label {
+        &:last-child {
+          padding: .5rem 1.5rem .5rem .75rem;
+        } 
+      }
+    `}    
+  `}
+  ${({ $mode }) => $mode === 'categories' && css`
+    
   `}
-  ${({ $mode, $isReply }) => ($mode === 'common' && $isReply) && css`
+  ${({ $mode, $isReply }) => ($mode && $isReply) && css`
     padding-right: 1.825rem !important;
     ._refReplyIcon {
       right: 12px;
@@ -3766,7 +3768,7 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
       transform: translateY(-50%);
     }
   `}
-  ${({ $mode, $isActive }) => ($mode === 'common' && $isActive) && css`
+  ${({ $mode, $isActive }) => ($mode && $isActive) && css`
     background-color: var(--nav-clr-bg__hvr);
     padding-right: 1.75em;
     &, > label, > span {
@@ -3781,6 +3783,7 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
       bottom: 0;
       width: 12px;
       height: 20px;
+      z-index: -1;
     }
     ._refReplyIcon {
       right: 22px;