feat(popover): Eva style (#1349)

BREAKING CHANGE: Following properties where renamed: popover-fg -> popover-text-color popover-bg -> popover-background-color popover-border -> popover-border-color
akveo · May 27, 2019 · 6d11c95 · 6d11c95
1 parent 85945ac
commit 6d11c95
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 19 deletions.
diff --git a/src/framework/theme/components/popover/_popover.component.theme.scss b/src/framework/theme/components/popover/_popover.component.theme.scss
@@ -8,19 +8,24 @@
  nb-popover {
  $arrow-size: nb-theme(popover-arrow-size);
 
- border: 2px solid nb-theme(popover-border);
+ border: nb-theme(popover-border-width) solid nb-theme(popover-border-color);
  border-radius: nb-theme(popover-border-radius);
- background: nb-theme(popover-bg);
+ background: nb-theme(popover-background-color);
  box-shadow: nb-theme(popover-shadow);
 
  .primitive-overlay {
- color: nb-theme(popover-fg);
+ color: nb-theme(popover-text-color);
+ font-family: nb-theme(popover-text-font-family);
+ font-size: nb-theme(popover-text-font-size);
+ font-weight: nb-theme(popover-text-font-weight);
+ line-height: nb-theme(popover-text-line-height);
+ padding: nb-theme(popover-padding);
  }
 
  .arrow {
  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
- border-bottom: $arrow-size solid nb-theme(popover-border);
+ border-bottom: $arrow-size solid nb-theme(popover-border-color);
 
  &::after {
  position: absolute;
@@ -31,7 +36,7 @@
  left: calc(50% - #{$arrow-size});
  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
- border-bottom: $arrow-size solid nb-theme(popover-bg);
+ border-bottom: $arrow-size solid nb-theme(popover-background-color);
  clip-path: inset(0 0 2px);
  }
  }

diff --git a/src/framework/theme/components/popover/popover.component.scss b/src/framework/theme/components/popover/popover.component.scss
@@ -10,8 +10,4 @@
  width: 0;
  height: 0;
  }
-
- /deep/ nb-overlay-container .primitive-overlay {
- padding: 0.75rem 1rem;
- }
 }
diff --git a/src/framework/theme/components/popover/popover.component.ts b/src/framework/theme/components/popover/popover.component.ts
@@ -27,10 +27,18 @@ import {
  *
  * @styles
  *
- * popover-fg
- * popover-bg
- * popover-border
- * popover-shadow
+ * popover-text-color:
+ * popover-text-font-family:
+ * popover-text-font-size:
+ * popover-text-font-weight:
+ * popover-text-line-height:
+ * popover-background-color:
+ * popover-border-width:
+ * popover-border-color:
+ * popover-border-radius:
+ * popover-shadow:
+ * popover-arrow-size:
+ * popover-padding:
  * */
 @Component({
  selector: 'nb-popover',

diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts
@@ -45,7 +45,7 @@ import { NbPopoverComponent } from './popover.component';
  * ```ts
  * @NgModule({
  * imports: [
- *  // ...
+ *  // ...
  * NbPopoverModule,
  * ],
  * })

diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -419,12 +419,18 @@ $theme: (
  user-size-large: 3.25rem,
  user-size-xlarge: 4rem,
 
- popover-fg: color-fg-heading,
- popover-bg: color-bg,
- popover-border: color-success,
- popover-border-radius: radius,
+ popover-text-color: text-color-dark,
+ popover-text-font-family: text-paragraph-font-family,
+ popover-text-font-size: text-paragraph-font-size,
+ popover-text-font-weight: text-paragraph-font-weight,
+ popover-text-line-height: text-paragraph-line-height,
+ popover-background-color: color-white,
+ popover-border-width: 0.125rem,
+ popover-border-color: transparent,
+ popover-border-radius: 0.5rem,
  popover-shadow: none,
- popover-arrow-size: 11px,
+ popover-arrow-size: 0.6875rem,
+ popover-padding: 0.75rem 1rem,
 
  context-menu-fg: color-fg-heading,
  context-menu-bg: color-bg,