feat: create #input styles regarding the new Eufemia UX styles for th…

…e input component
dnbexperience · Feb 20, 2019 · 8fd0b5c · 8fd0b5c
1 parent 8236dbe
commit 8fd0b5c
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 26 deletions.
diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -20,9 +20,9 @@
 }
 
 .dnb-input {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  flex-flow: row wrap;
+  flex-flow: row wrap; // for wrapping form-status etc.
   width: 100%;
 
   font-size: var(--input-font-size);
@@ -31,19 +31,17 @@
   &__shell {
     position: relative;
 
-    flex: 1;
     display: flex;
-
-    width: 100%;
-    height: 100%;
-    margin: 0;
-
     align-items: center;
+    flex: 1;
   }
 
   &__input {
     outline: none;
     border: none;
+
+    // +1px because of vertical center - no mather what border width we have
+    transform: translateY(1px);
   }
 
   &__input[disabled] {
@@ -61,9 +59,6 @@
     width: 100%;
     padding: var(--input-padding);
 
-    // +1px because of the border width
-    transform: translateY(var(--button-border-width));
-
     text-align: left;
 
     color: inherit;
@@ -74,10 +69,17 @@
     pointer-events: none;
 
     position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
     height: 100%;
+    overflow: hidden;
+
+    // +1px because of the border width
+    transform: translateY(calc(1px - var(--input-border-width)))
+      translateX(1px);
 
     white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
   }
 
@@ -150,13 +152,15 @@
     padding: 0.5rem 0;
   }
 
+  &__submit-button {
+    position: relative;
+    z-index: 2; // over placeholder
+    transform: translateX(var(--input-border-width));
+  }
+  // no special style for search
   // &__input--search {
   // }
 
-  &__search-submit {
-    transform: translateX(var(--button-border-width));
-  }
-
   > .dnb-form-label {
     margin-right: 1rem;
   }

diff --git a/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss b/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss
@@ -6,16 +6,26 @@
 @import '../../../../style/themes/imports.scss';
 
 :root {
+  --input-text-color: var(--color-sea-green);
+  --input-text-color--focus: var(--color-emerald-green);
+  --input-text-color--active: var(--color-emerald-green);
+  --input-text-color--disabled: var(--color-sea-green-alt-30);
+  --input-background-color: var(--color-white);
+  --input-background-color--focus: var(--color-white);
+  --input-background-color--active: var(--color-white);
+  --input-background-color--disabled: var(--color-mint-green-12);
   --input-border-color: var(--color-sea-green-alt);
+  --input-border-color--focus: var(--color-emerald-green);
+  --input-border-color--active: var(--color-sea-green-alt);
   --input-border-color--disabled: var(--color-sea-green-alt-30);
-  --input-border-color--active: var(--color-emerald-green);
 }
 
 .dnb-input {
-  color: var(--color-emerald-green);
+  color: var(--input-text-color);
 
   &__shell {
-    background-color: var(--color-mint-green-12);
+    // background-color: var(--color-mint-green-12);
+    background-color: var(--color-white);
     border: var(--input-border-width) solid var(--input-border-color);
 
     &:not([data-input-state='disabled']) {
@@ -26,40 +36,50 @@
 
     // Background color of input when it has content
     &[data-has-content='true'] {
-      background-color: var(--color-white);
+      color: var(--input-text-color--active);
+      border-color: var(--input-border-color--active);
+      background-color: var(--input-background-color--active);
     }
 
     &[data-input-state='disabled'] {
-      color: var(--color-sea-green-alt-30);
+      color: var(--input-text-color--disabled);
       border-color: var(--input-border-color--disabled);
+      background-color: var(--input-background-color--disabled);
     }
 
+    &:not([data-input-state='disabled']):hover,
     &[data-input-state='focus'] {
-      background-color: var(--color-white);
-      border-color: var(--input-border-color--active);
-      @include fakeBorder(var(--input-border-color--active), 2px);
+      color: var(--input-text-color--focus);
+      border-color: var(--input-border-color--focus);
+      background-color: var(--input-background-color--focus);
+      @include fakeBorder(var(--input-border-color--focus), 2px);
     }
   }
 
   // with status_state = "error"
+  /* stylelint-disable-next-line */
   &__status--error &__shell {
     border-color: var(--color-cherry-red);
 
+    /* stylelint-disable-next-line */
     &,
     &[data-input-state='focus'] {
       // In case we want to have a larger border size on the input
       @include fakeBorder(var(--color-cherry-red), 2px);
     }
   }
 
-  &__placeholder {
-    color: var(--color-sea-green);
+  ::selection {
+    background-color: var(--color-mint-green);
+    color: var(--input-text-color--focus);
+    text-shadow: none;
   }
 
   // Adjusting opacity of placeholder when:
   // 1: input is in focus and 2. input has no content
   &__shell[data-input-state='focus'][data-has-content='false']
     .dnb-input__placeholder {
+    transition: color 100ms ease-out;
     color: var(--color-sea-green-alt-30);
   }
 }