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';
  }
 }