Merge pull request #181 from gofynd/fix-disabled-issue

Fix input and dropdown disabled css
gofynd · Oct 4, 2024 · a2c025c · a2c025c
2 parents 4ba33ab + 995e17f
commit a2c025c
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 17 deletions.
diff --git a/src/base/variable.less b/src/base/variable.less
@@ -91,6 +91,8 @@
 @SemanticWarningHover:#7D4F12;
 @SemanticWarningLight:#E8D0B2;
 @SemanticWarningBG:#FFEBD6;
+@disableBG: #EDEDED;
+@disableText:#9C9CAA;
 
 
 .disableBtn(){

diff --git a/src/components/NChips/NChips.vue b/src/components/NChips/NChips.vue
@@ -110,7 +110,8 @@ export default {
     height: 39px;
     padding: 0 12px;
     margin: 0 8px 0 0;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     cursor: default;
     border-radius: 39px;
     border: 1px solid @BorderColor;

diff --git a/src/components/NDropdown/NDropdown.less b/src/components/NDropdown/NDropdown.less
@@ -140,15 +140,23 @@
   }
   // Disabled
   .nitrozen-select.disabled {
-    .disable(@HoverColor);
+    .disable(@disableBG);
+    opacity: 1;
   }
   .nitrozen-select.disabled .nitrozen-select__trigger {
-    color: @TypographyPrimaryColor;
-    .disable(@HoverColor);
+    color: @disableText;
+    .disable(@disableBG);
+    opacity: 1;
 
   }
   .nitrozen-select.disabled .nitrozen-select__trigger .nitrozen-dropdown-arrow {
-    background: @HoverColor;
+    .nitrozen-inline-svg {
+      svg {
+        path {
+          fill: @GreyColor; // or use a specific color value
+        }
+      }
+    }
   }
 
   // Arrow
@@ -178,7 +186,7 @@
   color: @LabelColor;
   font-family: @PrimaryFont;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 21px;
 }
 

diff --git a/src/components/NDropdown/NDropdown.vue b/src/components/NDropdown/NDropdown.vue
@@ -28,7 +28,6 @@
               v-model="searchInput"
               @search="searchInputChange"
               v-on:keyup="searchInputChange"
-              v-on:keydown="searchInputChange"
               :placeholder="searchInputPlaceholder"
             />
           </span>
@@ -323,7 +322,7 @@ export default {
             }
           });
           tmp = [...new Set(tmp)];
-          return `${tmp.join(", ")}`;
+          return `${tmp.length}` + ' Selected';
         } else if (this.label) {
           return this.placeholder || `Select ${this.label.toLowerCase()}`;
         }

diff --git a/src/components/NInline/NInline.vue b/src/components/NInline/NInline.vue
@@ -30,6 +30,12 @@ export default {
 
 <style lang="less">
 .nitrozen-inline-svg{
-    height: 10px;
+    display: flex;
+    align-items: center;
+
+    svg{
+        flex-shrink: 0;
+    }
+
 }
 </style>
diff --git a/src/components/NInput/NInput.less b/src/components/NInput/NInput.less
@@ -26,14 +26,13 @@
 }
 
 .n-input:disabled {
-  background: @HoverColor;
+  background: @disableBG;
+  color: @disableText;
   pointer-events: none;
   cursor: not-allowed;
-  opacity: 0.5;
 }
 
 .n-input:disabled + .n-input-label {
-  opacity: 0.5;
 }
 
 .nitrozen-form-input {
@@ -57,8 +56,6 @@
 }
 
 .n-input-maxlength {
-  // display: block;
-  // float: right;
   display: flex;
   justify-content: flex-end;
   position: relative;
@@ -70,20 +67,20 @@
 
 ::-webkit-input-placeholder {
   /* Edge */
-  color: @PlaceholderColor;
+  color: @LabelColor;
   font-size: 12px;
   font-family: @PrimaryFont;
 }
 
 :-ms-input-placeholder {
   /* Internet Explorer 10-11 */
-  color: @PlaceholderColor;
+  color: @LabelColor;
   font-size: 12px;
   font-family: @PrimaryFont;
 }
 
 ::placeholder {
-  color: @PlaceholderColor;
+  color: @LabelColor;
   font-size: 12px;
   font-family: @PrimaryFont;
 }