dropdown initial

eea · Jan 14, 2022 · d8aef26 · d8aef26
1 parent 9526ee2
commit d8aef26
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 58 deletions.
diff --git a/src/customizations/components/theme/Form/Dropdown.stories.js b/src/customizations/components/theme/Form/Dropdown.stories.js
@@ -10,20 +10,20 @@ export default {
     },
   },
   argTypes: {
-    placeholder:{
-      description:"placeholder text",
-      table:{
-        type:{summary:'string'},
-        defaultValue:{summary:' \""\ '}
-      }
+    placeholder: {
+      description: 'placeholder text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    options: {
+      description: 'Array of Dropdown.Item props',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: ' "" ' },
+      },
     },
-    options:{
-      description:"Array of Dropdown.Item props",
-      table:{
-        type:{summary:'Object'},
-        defaultValue:{summary:' \""\ '}
-      }
-    }
   },
 };
 
@@ -82,53 +82,53 @@ Playground.args = {
 };
 
 Playground.argTypes = {
-  search:{
-    description:" search through a large list of choice",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:false}
-    }
+  search: {
+    description: ' search through a large list of choice',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
   },
-  multiple:{
-    description:"allow multiple selections",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:false}
-    }
+  multiple: {
+    description: 'allow multiple selections',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
   },
-  clearable:{
-    description:"remove some selection",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:false}
-    }
+  clearable: {
+    description: 'remove some selection',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
   },
-  inline:{
-    description:"format dropdown to appear inline in other content",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:false}
-    }
+  inline: {
+    description: 'format dropdown to appear inline in other content',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
   },
-  floating:{
-    description:"dropdown menu can appear to be floating below an element",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:false}
-    }
+  floating: {
+    description: 'dropdown menu can appear to be floating below an element',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
   },
-  disabled:{
-    description:"disable dropdown",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:false}
-    }
+  disabled: {
+    description: 'disable dropdown',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
   },
-  fluid:{
-    description:"takes the full width of its parent",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:false}
-    }
+  fluid: {
+    description: 'takes the full width of its parent',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
   },
-}
+};
diff --git a/theme/themes/eea/modules/dropdown.overrides b/theme/themes/eea/modules/dropdown.overrides
@@ -1,6 +1,34 @@
 /*******************************
          Theme Overrides
 *******************************/
+.ui.dropdown {
+  max-width: @inputMaxWidth !important;
+}
+
+.ui.dropdown.fluid {
+  max-width: 100% !important;
+}
+
+.ui.dropdown {
+  height: auto !important;
+  border: @border !important;
+  border-radius: @borderRadius !important;
+  font-family: @pageFont !important;
+  font-weight: @inputFontWeight;
+
+  &:active,
+  &:focus {
+    border: 2px solid @policeBlue !important;
+  }
+}
+
+.ui.dropdown.active {
+  border: 2px solid @policeBlue !important;
+}
+
+.ui.dropdown.error {
+  border: 2px solid @negativeBorderColor !important;
+}
 
 .ui.dropdown.right {
   float: right;
@@ -14,7 +42,8 @@
 .ui.selection.dropdown:not(.multiple):not(.search) > .dropdown.icon {
   position: static;
   /* custom padding for dropdowns */
-  font-size: 2em;
+  padding: 10px 0;
+  font-size: 1em;
 }
 
 .ui.selection.dropdown {

diff --git a/theme/themes/eea/modules/dropdown.variables b/theme/themes/eea/modules/dropdown.variables
@@ -3,6 +3,9 @@
 *******************************/
 @dropdownTextColor: #636363;
 
+// Pastanaga variable
+@inputFontWeight: normal;
+
 /*-------------------
        Element
 --------------------*/
@@ -11,7 +14,9 @@
   box-shadow @defaultDuration @defaultEasing,
   width @defaultDuration @defaultEasing
 ;
-@borderRadius: 0;
+@borderRadius: @defaultBorderRadius;
+@borderWidth: 1px;
+@border: @borderWidth solid @midGray;
 
 @raisedShadow: 0px 2px 3px 0px @borderColor;