feat(input): Eva style (#1343)

src/framework/bootstrap/styles/_globals.scss

@@ -18,12 +18,4 @@
 @import 'layout';
 
 @mixin nb-bootstrap-global() {
-  @include nb-b-buttons-theme();
-  @include nb-b-button-group-theme();
-  @include nb-b-dropdowns-theme();
-  @include nb-b-icon-buttons-theme();
-  @include nb-b-forms-theme();
-  @include nb-b-input-group-theme();
-  @include nb-b-modals-theme();
-  @include nb-b-layout-theme();
 }

src/framework/theme/components/checkbox/checkbox.component.ts

@@ -182,18 +182,7 @@ export class NbCheckboxComponent implements ControlValueAccessor {
    * Possible values are: `primary` (default), `success`, `warning`, `danger`, `info`
    */
   @Input()
-  get status(): NbComponentStatus {
-    return this._status;
-  }
-  set status(value: NbComponentStatus) {
-    if (value === '') {
-      this._status = this._defaultStatus;
-    } else {
-      this._status = value;
-    }
-  }
-  private readonly _defaultStatus: NbComponentStatus = 'primary';
-  private _status: NbComponentStatus = this._defaultStatus;
+  status: NbComponentStatus = 'primary';
 
 
   /**

src/framework/theme/components/checkbox/checkbox.spec.ts

@@ -83,11 +83,6 @@ describe('Component: NbCheckbox', () => {
     expect(testContainerEl.classList.contains('status-info')).toBeTruthy();
   });
 
-  it(`should set default status if no status was passed`, () => {
-    checkbox.status = '';
-    expect(checkbox.status).toEqual('primary');
-  });
-
   it('should emit change event when changed', fakeAsync(() => {
     checkbox.change
       .pipe(take(1))

src/framework/theme/components/component-shape.ts

@@ -0,0 +1 @@
+export type NbComponentShape = 'rectangle' | 'semi-round' | 'round';

src/framework/theme/components/component-size.ts

@@ -1 +1 @@
-export type NbComponentSize = '' | 'tiny' | 'small' | 'medium' | 'large' | 'giant';
+export type NbComponentSize = 'tiny' | 'small' | 'medium' | 'large' | 'giant';

src/framework/theme/components/component-status.ts

@@ -1 +1 @@
-export type NbComponentStatus = '' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type NbComponentStatus = 'primary' | 'success' | 'warning' | 'danger' | 'info';

src/framework/theme/components/input/_input-shapes.scss

@@ -5,13 +5,9 @@
  */
 
 @mixin input-shapes() {
-  &.input-rectangle {
-    border-radius: nb-theme(form-control-border-radius);
-  }
-  &.input-semi-round {
-    border-radius: nb-theme(form-control-semi-round-border-radius);
-  }
-  &.input-round {
-    border-radius: nb-theme(form-control-round-border-radius);
+  @each $shape in nb-get-shapes() {
+    &.shape-#{$shape} {
+      border-radius: nb-theme(input-#{$shape}-border-radius);
+    }
   }
 }

src/framework/theme/components/input/_input-sizes.scss

@@ -5,16 +5,18 @@
  */
 
 @mixin input-sizes() {
-  &.input-sm {
-    font-size: nb-theme(form-control-font-size-sm);
-    padding: nb-theme(form-control-padding-sm);
-  }
-  &.input-md {
-    font-size: nb-theme(form-control-font-size);
-    padding: nb-theme(form-control-padding);
-  }
-  &.input-lg {
-    font-size: nb-theme(form-control-font-size-lg);
-    padding: nb-theme(form-control-padding-lg);
+  @each $size in nb-get-sizes() {
+    &.size-#{$size} {
+      font-size: nb-theme(input-#{$size}-text-font-size);
+      font-weight: nb-theme(input-#{$size}-text-font-weight);
+      line-height: nb-theme(input-#{$size}-text-line-height);
+      padding: nb-theme(input-#{$size}-padding);
+
+      &::placeholder {
+        font-size: nb-theme(input-#{$size}-placeholder-text-font-size);
+        font-weight: nb-theme(input-#{$size}-placeholder-text-font-weight);
+        line-height: nb-theme(input-#{$size}-placeholder-text-line-height);
+      }
+    }
   }
 }

src/framework/theme/components/input/_input-statuses.scss

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin input-statuses() {
+  @each $status in nb-get-statuses() {
+    &:enabled.status-#{$status} {
+      border-color: nb-theme(input-#{$status}-border-color);
+      &:focus {
+        border-color: nb-theme(input-#{$status}-hover-border-color);
+      }
+      &:hover {
+        border-color: nb-theme(input-#{$status}-focus-border-color);
+      }
+    }
+  }
+}

src/framework/theme/components/input/_input.directive.theme.scss

@@ -4,45 +4,56 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import './input-colors';
+@import './input-statuses';
 @import './input-sizes';
 @import './input-shapes';
 
 @mixin nb-input-theme() {
-  $border-width: nb-theme(form-control-border-width);
-  $border-type: nb-theme(form-control-border-type);
-  $border-color: nb-theme(form-control-border-color);
 
   [nbInput] {
-    background-color: nb-theme(form-control-bg);
-    border: $border-width $border-type $border-color;
-    color: nb-theme(form-control-text-primary-color);
+    background-color: nb-theme(input-background-color);
+    border-color: nb-theme(input-border-color);
+    border-style: nb-theme(input-border-style);
+    border-width: nb-theme(input-border-width);
+    color: nb-theme(input-text-color);
+    font-size: nb-theme(input-text-font-size);
+    font-family: nb-theme(input-text-font-family);
+    font-weight: nb-theme(input-text-font-weight);
+    line-height: nb-theme(input-text-line-height);
+    padding: nb-theme(input-padding);
+    @include nb-component-animation(border, background-color, color);
+
+    &::placeholder {
+      color: nb-theme(input-placeholder-text-color);
+      font-family: nb-theme(input-placeholder-text-font-family);
+      text-overflow: ellipsis;
+    }
 
     &:focus {
       outline: none;
-      background-color: nb-theme(form-control-focus-bg);
-      border-color: nb-theme(form-control-selected-border-color);
+      border-color: nb-theme(input-focus-border-color);
     }
 
-    &[disabled] {
-      @include install-placeholder(
-        nb-theme(form-control-placeholder-color),
-        nb-theme(form-control-placeholder-font-size),
-        0.5
-      );
+    &:hover {
+      border-color: nb-theme(input-hover-border-color);
+    }
+
+    &:disabled {
+      background-color: nb-theme(input-disabled-background-color);
+      border-color: nb-theme(input-disabled-border-color);
+      color: nb-theme(input-disabled-text-color);
+
+      &::placeholder {
+        color: nb-theme(input-disabled-placeholder-text-color);
+      }
     }
 
     &.input-full-width {
       width: 100%;
     }
 
-    @include input-colors();
+    @include input-statuses();
     @include input-sizes();
     @include input-shapes();
-
-    @include install-placeholder(
-      nb-theme(form-control-placeholder-color),
-      nb-theme(form-control-placeholder-font-size)
-    );
   }
 }