feat(context menu): Eva style (#1423)

BREAKING CHANGE:

'context-menu-border' split into 'context-menu-border-color',
'context-menu-border-style' and 'context-menu-border-width'.

Following theme properties were removed:
context-menu-fg
context-menu-bg
context-menu-active-fg
context-menu-active-bg
context-menu-arrow-size

Author: yggg

src/framework/theme/components/context-menu/_context-menu.component.theme.scss

@@ -7,76 +7,19 @@
 
 @mixin nb-context-menu-theme() {
   nb-context-menu {
-    $arrow-size: nb-theme(context-menu-arrow-size);
-    $arrow-content-size: #{$arrow-size} - 2px;
-
-    border: 2px solid nb-theme(context-menu-border);
+    background-color: nb-theme(context-menu-background-color);
+    border-color: nb-theme(context-menu-border-color);
+    border-style: nb-theme(context-menu-border-style);
+    border-width: nb-theme(context-menu-border-width);
     border-radius: nb-theme(context-menu-border-radius);
-    background: nb-theme(context-menu-bg);
     box-shadow: nb-theme(context-menu-shadow);
+    min-width: nb-theme(context-menu-min-width);
+    max-width: nb-theme(context-menu-max-width);
 
-    .primitive-overlay {
-      color: nb-theme(context-menu-fg);
-    }
-
-    .arrow {
-      border-left: $arrow-size solid transparent;
-      border-right: $arrow-size solid transparent;
-      border-bottom: $arrow-size solid nb-theme(context-menu-border);
-
-      &::after {
-        position: absolute;
-        content: ' ';
-        width: 0;
-        height: 0;
-        top: 3px;
-        left: calc(50% - (#{$arrow-content-size}));
-        border-left: calc(#{$arrow-content-size}) solid transparent;
-        border-right: calc(#{$arrow-content-size}) solid transparent;
-        border-bottom: calc(#{$arrow-content-size}) solid nb-theme(context-menu-bg);
-      }
-    }
-
-    &.nb-overlay-bottom .arrow {
-      top: calc(-1 * #{$arrow-size} + 1px);
-      left: calc(50% - #{$arrow-size});
-    }
-
-    &.nb-overlay-left .arrow {
-      right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
-      top: calc(50% - #{$arrow-size / 2});
-      transform: rotate(90deg);
-    }
-
-    &.nb-overlay-top .arrow {
-      bottom: calc(-1 * #{$arrow-size} + 1px);
-      left: calc(50% - #{$arrow-size});
-      transform: rotate(180deg);
-    }
-
-    &.nb-overlay-right .arrow {
-      left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
-      top: calc(50% - #{$arrow-size / 2});
-      transform: rotate(270deg);
-    }
-  }
-
-  nb-menu.context-menu .menu-items .menu-item a {
-    color: nb-theme(context-menu-fg);
-    font-weight: nb-theme(font-weight-normal);
-
-    .menu-icon {
-      color: nb-theme(context-menu-fg);
-    }
-
-    @include hover-focus-active {
-      color: nb-theme(context-menu-active-fg);
-      background: nb-theme(context-menu-active-bg);
-      font-weight: nb-theme(font-weight-normal);
-
-      .menu-icon {
-        color: nb-theme(context-menu-active-fg);
-      }
+    nb-menu {
+      border-radius: nb-theme(context-menu-border-radius);
+      overflow: hidden;
+      text-align: center;
     }
   }
 }

src/framework/theme/components/context-menu/context-menu.component.scss

@@ -14,15 +14,18 @@ import { NbPositionedContainer, NbRenderableContainer } from '../cdk';
  *
  * @styles
  *
- * context-menu-fg
- * context-menu-active-fg
- * context-menu-active-bg
+ * context-menu-background-color
+ * context-menu-border-color
+ * context-menu-border-style
+ * context-menu-border-width
+ * context-menu-border-radius
+ * context-menu-min-width
+ * context-menu-max-width
+ * context-menu-shadow
  * */
 @Component({
   selector: 'nb-context-menu',
-  styleUrls: ['./context-menu.component.scss'],
   template: `
-    <span class="arrow"></span>
     <nb-menu class="context-menu" [items]="context.items" [tag]="context.tag"></nb-menu>
   `,
 })

src/framework/theme/components/context-menu/context-menu.component.ts

@@ -47,7 +47,7 @@ import { NbMenuItem, NbMenuService } from '../menu/menu.service';
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbContextMenuModule,
  *   ],
  * })

src/framework/theme/components/context-menu/context-menu.directive.ts

@@ -583,14 +583,14 @@ $theme: (
   popover-arrow-size: 0.6875rem,
   popover-padding: 0.75rem 1rem,
 
-  context-menu-fg: color-fg-heading,
-  context-menu-bg: color-bg,
-  context-menu-active-fg: color-white,
-  context-menu-active-bg: color-success,
-  context-menu-border: color-success,
-  context-menu-border-radius: radius,
+  context-menu-background-color: color-white,
+  context-menu-border-color: transparent,
+  context-menu-border-style: solid,
+  context-menu-border-width: 0,
+  context-menu-border-radius: 0.75rem,
+  context-menu-min-width: 10rem,
+  context-menu-max-width: 15rem,
   context-menu-shadow: none,
-  context-menu-arrow-size: 11px,
 
   actions-background-color: transparent,
   actions-divider-color: divider-color,