feat(actions): Eva style (#1397)

BREAKING CHANGE:

NbActionsComponent 'inverseValue' field and 'inverse' setter removed.
NbActionsComponent 'fullWidthValue' field replaced with 'fullWidth'.
NbActionsComponent size class named renamed to 'size-[size-name]'.
NbActionsComponent static fields SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE removed.
NbActionComponent 'disabledValue' field replaced with 'disabled'.

Following theme variables name were renamed:
actions-font-size -> actions-[size]-text-font-size
actions-font-family -> actions-text-font-family
actions-line-height -> actions-text-line-height
actions-fg -> actions-text-color
actions-bg -> actions-background-color
actions-separator -> actions-divider-color
actions-padding -> actions-[size]-padding
actions-size-small -> actions-small-height
actions-size-medium -> actions-medium-height
actions-size-large -> actions-large-height

src/framework/theme/components/actions/_actions.component.theme.scss

@@ -6,77 +6,45 @@
 
 @mixin nb-actions-theme() {
   nb-actions {
+    background-color: nb-theme(actions-background-color);
+    color: nb-theme(actions-text-color);
+    font-family: nb-theme(actions-text-font-family);
+    font-weight: nb-theme(actions-text-font-weight);
+    line-height: nb-theme(actions-text-line-height);
+  }
 
-    font-size: nb-theme(actions-font-size);
-    font-family: nb-theme(actions-font-family);
-    line-height: nb-theme(actions-line-height);
-
-    nb-action {
-      height: nb-theme(actions-size-small);
-      padding: 0 nb-theme(actions-padding);
-
-      &:first-child {
-        @include nb-ltr(border-left, none!important);
-        @include nb-rtl(border-right, none!important);
-      }
-
-      a.icon-container {
-        &:hover, &:focus {
-          text-decoration: none;
-        }
-      }
+  @each $size in nb-get-sizes() {
+    nb-actions.size-#{$size} nb-action {
+      font-size: nb-theme(actions-#{$size}-text-font-size);
+      height: nb-theme(actions-#{$size}-height);
+      padding: nb-theme(actions-#{$size}-padding);
 
       nb-icon {
-        color: nb-theme(actions-fg);
-        font-size: nb-theme(actions-size-small);
+        font-size: nb-theme(actions-#{$size}-icon-height);
       }
-
-      @include nb-ltr(border-left, 1px solid nb-theme(actions-separator));
-      @include nb-rtl(border-right, 1px solid nb-theme(actions-separator));
-
-      background: transparent;
     }
+  }
 
-    &.inverse {
-      nb-action {
-        nb-icon {
-          color: nb-theme(actions-bg);
-        }
+  nb-action {
+    $divider: nb-theme(actions-divider-width) nb-theme(actions-divider-style) nb-theme(actions-divider-color);
+    @include nb-ltr(border-left, $divider);
+    @include nb-rtl(border-right, $divider);
 
-        @include nb-ltr(border-left, 1px solid nb-theme(actions-separator));
-        @include nb-rtl(border-right, 1px solid nb-theme(actions-separator));
-      }
+    &:first-child {
+      @include nb-ltr(border-left, none!important);
+      @include nb-rtl(border-right, none!important);
     }
 
-    &.small {
-      nb-action {
-        height: nb-theme(actions-size-small);
-        nb-icon {
-          font-size: nb-theme(actions-size-small);
-        }
-      }
-    }
-    &.medium {
-      nb-action {
-        height: nb-theme(actions-size-medium);
-        nb-icon {
-          font-size: nb-theme(actions-size-medium);
-        }
-      }
-    }
-    &.large {
-      nb-action {
-        height: nb-theme(actions-size-large);
-        nb-icon {
-          font-size: nb-theme(actions-size-large);
-        }
-      }
+    nb-icon {
+      color: nb-theme(actions-icon-color);
     }
 
-    &.full-width nb-action {
-      display: flex;
-      justify-content: center;
-      width: 100%;
+    &.disabled {
+      color: nb-theme(actions-disabled-text-color);
+
+      nb-icon {
+        color: nb-theme(actions-disabled-icon-color);
+      }
     }
   }
 }

src/framework/theme/components/actions/action.component.scss

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+:host {
+  background: transparent;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  position: relative;
+}
+
+:host(.disabled) {
+  cursor: not-allowed;
+
+  a, nb-icon {
+    cursor: not-allowed;
+  }
+}
+
+:host-context(nb-actions.full-width) {
+  justify-content: center;
+  width: 100%;
+}
+
+a.icon-container {
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+}
+
+nb-icon:hover {
+  cursor: pointer;
+}

src/framework/theme/components/actions/actions.component.scss

@@ -5,29 +5,6 @@
  */
 
 :host {
-
   display: flex;
   align-items: center;
-
-  /deep/ nb-action {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    position: relative;
-
-    nb-icon:hover {
-      cursor: pointer;
-    }
-
-    &.disabled {
-      & > * {
-        opacity: 0.5;
-      }
-      cursor: not-allowed;
-
-      a, i {
-        cursor: not-allowed!important;
-      }
-    }
-  }
 }

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

@@ -7,12 +7,14 @@
 import { Component, HostBinding, Input } from '@angular/core';
 
 import { convertToBoolProperty } from '../helpers';
+import { NbComponentSize } from '../component-size';
 
 /**
  * Action item, display a link with an icon, or any other content provided instead.
  */
 @Component({
   selector: 'nb-action',
+  styleUrls: ['./action.component.scss'],
   template: `
     <ng-container *ngIf="icon; else projectedContent">
       <a class="icon-container"
@@ -48,7 +50,6 @@ import { convertToBoolProperty } from '../helpers';
   `,
 })
 export class NbActionComponent {
-  @HostBinding('class.disabled') disabledValue: boolean = false;
 
   /**
    * Router link to use
@@ -69,19 +70,24 @@ export class NbActionComponent {
   @Input() title: string = '';
 
   /**
-   * Icon class to display
+   * Icon name
    * @type string
    */
   @Input() icon: string;
 
   /**
-   * Disables the item (changes item opacity and mouse cursor)
+   * Visually disables the item
    * @type boolean
    */
   @Input()
-  set disabled(val: boolean) {
-    this.disabledValue = convertToBoolProperty(val);
+  @HostBinding('class.disabled')
+  get disabled(): boolean {
+    return this._disabled;
   }
+  set disabled(value: boolean) {
+    this._disabled = convertToBoolProperty(value);
+  }
+  protected _disabled: boolean = false;
 
   /**
    * Badge text to display
@@ -126,7 +132,7 @@ export class NbActionComponent {
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbActionsModule,
  *   ],
  * })
@@ -146,16 +152,29 @@ export class NbActionComponent {
  *
  * @styles
  *
- * actions-font-size:
- * actions-font-family:
- * actions-line-height:
- * actions-fg:
- * actions-bg:
- * actions-separator:
- * actions-padding:
- * actions-size-small:
- * actions-size-medium:
- * actions-size-large:
+ * actions-background-color:
+ * actions-divider-color:
+ * actions-divider-style:
+ * actions-divider-width:
+ * actions-text-color:
+ * actions-text-font-family:
+ * actions-text-font-weight:
+ * actions-text-line-height:
+ * actions-tiny-height:
+ * actions-tiny-padding:
+ * actions-tiny-text-font-size:
+ * actions-small-height:
+ * actions-small-padding:
+ * actions-small-text-font-size:
+ * actions-medium-height:
+ * actions-medium-padding:
+ * actions-medium-text-font-size:
+ * actions-large-height:
+ * actions-large-padding:
+ * actions-large-text-font-size:
+ * actions-giant-height:
+ * actions-giant-padding:
+ * actions-giant-text-font-size:
  */
 @Component({
   selector: 'nb-actions',
@@ -165,56 +184,54 @@ export class NbActionComponent {
   `,
 })
 export class NbActionsComponent {
-  static readonly SIZE_SMALL = 'small';
-  static readonly SIZE_MEDIUM = 'medium';
-  static readonly SIZE_LARGE = 'large';
-
-  private sizeValue: string;
 
-  @HostBinding('class.inverse') inverseValue: boolean;
-
-  @HostBinding('class.small')
-  get small() {
-    return this.sizeValue === NbActionsComponent.SIZE_SMALL;
+  /**
+   * Size of the component: 'tiny', 'small' (default), 'medium', 'large', 'giant'
+   */
+  @Input()
+  get size(): NbComponentSize {
+    return this._size;
+  }
+  set size(value: NbComponentSize) {
+    this._size = value;
   }
+  protected _size: NbComponentSize = 'small';
 
-  @HostBinding('class.medium')
-  get medium() {
-    return this.sizeValue === NbActionsComponent.SIZE_MEDIUM;
+  /**
+   * Component will fill full width of the container
+   */
+  @Input()
+  @HostBinding('class.full-width')
+  get fullWidth(): boolean {
+    return this._fullWidth;
+  }
+  set fullWidth(value: boolean) {
+    this._fullWidth = convertToBoolProperty(value);
   }
+  protected _fullWidth: boolean = false;
 
-  @HostBinding('class.large')
-  get large() {
-    return this.sizeValue === NbActionsComponent.SIZE_LARGE;
+  @HostBinding('class.size-tiny')
+  get tiny(): boolean {
+    return this.size === 'tiny';
   }
 
-  @HostBinding('class.full-width')
-  fullWidthValue: boolean = false;
+  @HostBinding('class.size-small')
+  get small(): boolean {
+    return this.size === 'small';
+  }
 
-  /**
-   * Size of the component, small|medium|large
-   * @type string
-   */
-  @Input()
-  set size(val: string) {
-    this.sizeValue = val;
+  @HostBinding('class.size-medium')
+  get medium(): boolean {
+    return this.size === 'medium';
   }
 
-  /**
-   * Makes colors inverse based on current theme
-   * @type boolean
-   */
-  @Input()
-  set inverse(val: boolean) {
-    this.inverseValue = convertToBoolProperty(val);
+  @HostBinding('class.size-large')
+  get large(): boolean {
+    return this.size === 'large';
   }
 
-  /**
-   * Component will fill full width of the container
-   * @type boolean
-   */
-  @Input()
-  set fullWidth(val: boolean) {
-    this.fullWidthValue = convertToBoolProperty(val);
+  @HostBinding('class.size-giant')
+  get giant(): boolean {
+    return this.size === 'giant';
   }
 }