@capillarytech/blaze-ui 0.1.6-alpha.39 → 0.1.6-alpha.4

package/CapUnifiedSelect/styles.js

@@ -23,142 +23,26 @@ export const HeaderWrapper = styled.div`
   }
 `;
 
-export const DropdownFooter = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px;
-  border-top: 1px solid #f0f0f0;
-  
-  .footer-buttons {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .total-count {
-    color: #8c8c8c;
-    font-size: 12px;
-  }
-`;
-
-export const SearchInputWrapper = styled.div`
-  padding: 8px;
-  border-bottom: 1px solid #f0f0f0;
-`;
-
-export const SelectAllCheckbox = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-weight: 500;
-  border-bottom: 1px solid #f0f0f0;
-  user-select: none;
-  
-  input[type="checkbox"] {
-    cursor: pointer;
-  }
-`;
-
-export const NoResultWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  color: #8c8c8c;
-  font-size: 14px;
-`;
-
 
 
 export const StyledInfoIcon = styled.span`
-  color: ${styledVars.CAP_G05};
+  color: ${styledVars.CAP_G2};
   font-size: 16px;
   cursor: help;
-  margin-left: 4px;
-  display: flex;
-  align-items: center;
 
   &:hover {
-    color: ${styledVars.CAP_G03};
+    color: ${styledVars.CAP_G1};
   }
 
   &.disabled {
     cursor: not-allowed;
     &:hover {
-      color: ${styledVars.CAP_G05};
+      color: ${styledVars.CAP_G2};
     }
   }
 `;
 
 export const selectStyles = css`
-  &.cap-unified-select-container {
-    .cap-unified-tree-select{
-      height: 32px !important;
-      width: 340px !important;
-    }
-    .ant-select-prefix{
-      font-size: 14px !important;
-      font-weight: 400 !important;
-      color: #091E42 !important;
-      line-height: 20px !important;
-    }
-    .cap-unified-select-header-label{
-      font-family: ${styledVars.FONT_FAMILY} !important;
-      font-weight: 500 !important;
-      font-size: 14px !important;
-      line-height: 20px !important;
-      letter-spacing: 0px !important;
-    }
-    .cap-unified-select-header-tooltip{
-      width: 16px !important;
-      height: 16px !important;
-      color: #B3BAC5 !important;
-    }
-    .cap-unified-select-header-byline-text{
-      font-family: ${styledVars.FONT_FAMILY} !important;
-      font-weight: 400 !important;
-      font-size: 12px !important;
-      margin-top: -10px;
-      letter-spacing: 0px !important;
-      color: #97A0AF !important;
-    }
-    .cap-unified-tree-select .ant-select-selector:hover{
-      border: 1px solid #7A869A !important;
-    }
-    .cap-unified-tree-select .select-popup-container .ant-select-tree-switcher-noop,
-    .cap-unified-tree-select .multiSelect-popup-container .ant-select-tree-switcher-noop {
-      display: none !important;
-    }
-    .ant-tree-select-dropdown .treeSelect-popup-container .ant-select-tree .ant-select-tree-treenode{
-      margin: 0px !important;
-    }
-    .cap-unified-tree-select .multiSelect-popup-container .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-treenode{
-      margin-left: 10px !important;
-    }
-    .multiSelect-popup-container .ant-select-tree-treenode{
-      margin-left: 10px !important;
-    }
-    .cap-unified-select-no-result{
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 200px;
-      color: #8c8c8c;
-      font-size: 14px;
-    }
-    .cap-unified-select-no-result-icon{
-      font-size: 36px;
-      margin-bottom: 8px;
-      color: #bfbfbf;
-    }
-    .cap-unified-select-no-result-text{
-      font-weight: 500;
-    }
-  }
   &.cap-unified-select {
     width: 100%;
     font-family: ${styledVars.FONT_FAMILY};
@@ -207,54 +91,30 @@ export const selectStyles = css`
     }
 
     /* Dropdown styles */
-    .ant-select-dropdown, 
-    &.ant-select-dropdown,
-    &.ant-select-dropdown-placement-bottomLeft {
-      padding: 0;
-      border-radius: 12px !important;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-      overflow: hidden;
-
-      /* Option base style - no background */
-      .ant-select-item-option {
-        padding: 10px 16px;
-        font-size: 14px;
-        color: #1c2530;
-        font-weight: 500;
-        background-color: transparent !important;
-
-        /* Hover state only */
-        &:not(.ant-select-item-option-disabled):hover {
-          background-color: #fffbe6 !important;
-          border-radius: 4px;
-          color: #1c2530 !important;
-        }
-        
-        /* Ensure unselected hover has proper background even after removal */
-        &:hover:not(.ant-select-item-option-disabled):not(.ant-select-item-option-selected) {
-          background-color: #fffbe6 !important;
-          color: #1c2530 !important;
-          border-radius: 4px;
-        }
+    .ant-select-dropdown {
+      padding: 4px;
+      border-radius: ${styledVars.RADIUS_04};
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+      .ant-select-item {
+        border-radius: ${styledVars.RADIUS_04};
+        padding: 8px 12px;
+        transition: ${styledVars.TRANSITION_ALL};
 
-        /* Selected state */
-        &-selected:not(.ant-select-item-option-disabled) {
-          background-color: #e9f0fe !important;
-          color: #1c2530 !important;
+        &-option-selected {
+          background-color: ${styledVars.CAP_PRIMARY.light};
+          color: ${styledVars.CAP_PRIMARY.base};
           font-weight: 500;
         }
 
-        /* Remove active state background unless hovered */
-        &-active:not(:hover):not(.ant-select-item-option-disabled) {
-          background-color: transparent !important;
+        &-option-active {
+          background-color: ${styledVars.CAP_G08};
         }
       }
 
       /* Search input styles */
-      .ant-select-dropdown-search,
       .ant-select-search {
-        padding: 8px 12px;
-        border-bottom: 1px solid #f0f0f0;
+        padding: 8px;
         
         input {
           border-radius: ${styledVars.RADIUS_04};
@@ -266,90 +126,15 @@ export const selectStyles = css`
           }
         }
       }
-      
-      /* Scrollbar */
-      .rc-virtual-list-scrollbar-thumb {
-        background-color: #dcdcdc;
-        border-radius: 4px;
-      }
-
-      /* Divider */
-      .ant-divider-horizontal {
-        margin: 0;
-      }
-      
-      /* No result UI */
-      .no-result {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 200px;
-        color: #8c8c8c;
-        font-size: 14px;
-      }
-      
-      /* Dropdown search inside custom popup */
-      .dropdown-search {
-        padding: 8px;
-        border-bottom: 1px solid #f0f0f0;
-      }
-      
-      /* Select all checkbox */
-      .select-all-checkbox {
-        display: flex;
-        align-items: center;
-        padding: 8px 12px;
-        cursor: pointer;
-        font-weight: 500;
-        border-bottom: 1px solid #f0f0f0;
-        user-select: none;
-        
-        input[type="checkbox"] {
-          cursor: pointer;
-        }
-      }
-      
-      /* Footer buttons */
-      .dropdown-footer {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 8px;
-        border-top: 1px solid #f0f0f0;
-      }
-      
-      /* Selected counter */
-      .selected-count {
-        color: #8c8c8c;
-        font-size: 12px;
-      }
-
-      /* Unchecked border color */
-      .ant-checkbox-inner {
-        border-color: #42b040; /* Your desired border color */
-      }
-
-      /* When checked - change background and border */
-      .ant-checkbox-checked .ant-checkbox-inner {
-        background-color: #42b040; /* Fill color when checked */
-        border-color: #42b040;
-      }
-
-      /* Checkmark color */
-      .ant-checkbox-checked .ant-checkbox-inner::after {
-        border-color: #42b040; /* The checkmark tick color */
-      }
     }
 
     /* Multiple selection styles */
     &.ant-select-multiple {
       .ant-select-selection-item {
-        background-color: #e9f0fe !important;
-        border: none;
+        background-color: ${styledVars.CAP_PRIMARY.light};
+        border-color: ${styledVars.CAP_PRIMARY.light};
         border-radius: ${styledVars.RADIUS_04};
-        color: #1c2530;
-        font-weight: 500;
+        color: ${styledVars.CAP_PRIMARY.base};
         margin: 2px 4px 2px 0;
         padding: 0 8px;
         height: 24px;
@@ -377,17 +162,15 @@ export const selectStyles = css`
       .ant-select-tree-node-content-wrapper {
         padding: 4px 8px;
         border-radius: ${styledVars.RADIUS_04};
-        background-color: transparent !important;
-        transition: background 0.3s;
+        transition: ${styledVars.TRANSITION_ALL};
 
         &:hover {
-          background-color: #fffbe6 !important;
-          color: #1c2530 !important;
-          border-radius: 4px;
+          background-color: ${styledVars.CAP_G08};
         }
 
         &.ant-select-tree-node-selected {
-          color: #1c2530;
+          background-color: ${styledVars.CAP_PRIMARY.light};
+          color: ${styledVars.CAP_PRIMARY.base};
           font-weight: 500;
         }
       }
@@ -401,25 +184,6 @@ export const selectStyles = css`
       .ant-select-tree-checkbox {
         margin: 4px 8px 4px 0;
       }
-      
-      .ant-select-tree-treenode {
-        padding: 2px 0;
-        
-        &:hover {
-          background-color: transparent;
-        }
-      }
-      
-      .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
-        background-color: #42b040;
-        border-color: #42b040;
-      }
-
-      .ant-select-tree-checkbox-checked .ant-select-tree-node-content-wrapper {
-        background-color: #e9f0fe !important;
-        color: #1c2530 !important;
-        font-weight: 500;
-      }
     }
 
     /* Size variations */
@@ -453,17 +217,7 @@ export const selectStyles = css`
         .anticon-loading {
           color: ${styledVars.CAP_PRIMARY.base};
         }
-      } 
-    }
-
-    &.cap-unified-tree-select .ant-select-selection-overflow {
-      display: none; /* hides pill wrapper */
-    }
-
-    &.cap-unified-tree-select .suffix-counter {
-      color: #1c2530;
-      font-weight: 500;
-      margin-right: 12px; /* optional, adjust spacing */
+      }
     }
   }
 `;