diff --git a/src/framework/theme/components/tooltip/_tooltip.component.theme.scss b/src/framework/theme/components/tooltip/_tooltip.component.theme.scss index ff17e62383..1659563325 100644 --- a/src/framework/theme/components/tooltip/_tooltip.component.theme.scss +++ b/src/framework/theme/components/tooltip/_tooltip.component.theme.scss @@ -5,40 +5,46 @@ */ @mixin nb-tooltip-status($status) { - $color: nb-theme(tooltip-#{$status}-bg); + $background-color: nb-theme(tooltip-#{$status}-background-color); + $text-color: nb-theme(tooltip-#{$status}-text-color); - &.#{$status}-tooltip { - background: $color; + &.status-#{$status} { + background: $background-color; .arrow { - border-bottom-color: $color; + border-bottom-color: $background-color; } .content { - color: nb-theme(tooltip-status-fg); + color: $text-color; } } } @mixin nb-tooltip-theme { nb-tooltip { - $arrow-size: 5px; - $arrow-content-size: 3px; + $arrow-size: 6px; + box-shadow: nb-theme(tooltip-shadow); - background: nb-theme(tooltip-bg); + background: nb-theme(tooltip-background-color); + border: nb-theme(tooltip-border-width) nb-theme(tooltip-border-style) nb-theme(tooltip-border-color); + border-radius: nb-theme(tooltip-border-radius); + padding: nb-theme(tooltip-padding); + max-width: nb-theme(tooltip-max-width); .content { - font-size: nb-theme(tooltip-font-size); - color: nb-theme(tooltip-fg); + color: nb-theme(tooltip-text-color); + font-family: nb-theme(tooltip-text-font-family); + font-size: nb-theme(tooltip-text-font-size); + font-weight: nb-theme(tooltip-text-font-weight); + line-height: nb-theme(tooltip-text-line-height); } .arrow { - border-bottom: $arrow-size solid nb-theme(tooltip-bg); + border-bottom: $arrow-size nb-theme(tooltip-border-style) nb-theme(tooltip-background-color); } - @include nb-tooltip-status('primary'); - @include nb-tooltip-status('danger'); - @include nb-tooltip-status('success'); - @include nb-tooltip-status('warning'); - @include nb-tooltip-status('info'); + @each $status in nb-get-statuses() { + @include nb-tooltip-status($status); + } } } diff --git a/src/framework/theme/components/tooltip/tooltip.component.scss b/src/framework/theme/components/tooltip/tooltip.component.scss index 407319f3e0..f1281e7a02 100644 --- a/src/framework/theme/components/tooltip/tooltip.component.scss +++ b/src/framework/theme/components/tooltip/tooltip.component.scss @@ -5,14 +5,13 @@ */ :host { - $arrow-size: 5px; + $arrow-size: 6px; z-index: 10000; - border-radius: 5px; .content { - padding: 0.5rem 1.25rem; display: flex; + align-items: center; } &.right .content { @@ -27,11 +26,8 @@ } nb-icon { - font-size: 1.25rem; - } - - span { - line-height: 1.25rem; + font-size: 1.1em; + min-width: 1em; } nb-icon + span { diff --git a/src/framework/theme/components/tooltip/tooltip.component.ts b/src/framework/theme/components/tooltip/tooltip.component.ts index 0594c564ec..2633743c33 100644 --- a/src/framework/theme/components/tooltip/tooltip.component.ts +++ b/src/framework/theme/components/tooltip/tooltip.component.ts @@ -5,9 +5,10 @@ */ import { Component, HostBinding, Input } from '@angular/core'; +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { NbComponentStatus } from '../component-status'; import { NbPosition, NbRenderableContainer } from '../cdk'; -import { animate, state, style, transition, trigger } from '@angular/animations'; /** @@ -16,16 +17,29 @@ import { animate, state, style, transition, trigger } from '@angular/animations' * * @styles * - * tooltip-bg - * tooltip-primary-bg - * tooltip-info-bg - * tooltip-success-bg - * tooltip-warning-bg - * tooltip-danger-bg - * tooltip-fg - * tooltip-shadow - * tooltip-font-size - * + * tooltip-background-color: + * tooltip-border-color: + * tooltip-border-style: + * tooltip-border-width: + * tooltip-border-radius: + * tooltip-padding: + * tooltip-text-color: + * tooltip-text-font-family: + * tooltip-text-font-size: + * tooltip-text-font-weight: + * tooltip-text-line-height: + * tooltip-max-width: + * tooltip-primary-background-color: + * tooltip-primary-text-color: + * tooltip-info-background-color: + * tooltip-info-text-color: + * tooltip-success-background-color: + * tooltip-success-text-color: + * tooltip-warning-background-color: + * tooltip-warning-text-color: + * tooltip-danger-background-color: + * tooltip-danger-text-color: + * tooltip-shadow: */ @Component({ selector: 'nb-tooltip', @@ -72,10 +86,10 @@ export class NbTooltipComponent implements NbRenderableContainer { } @Input() - context: { icon?: string, status?: string } = {}; + context: { icon?: string, status?: '' | NbComponentStatus } = {}; get statusClass() { - return this.context.status ? `${this.context.status}-tooltip` : ''; + return this.context.status ? `status-${this.context.status}` : ''; } /** diff --git a/src/framework/theme/components/tooltip/tooltip.directive.ts b/src/framework/theme/components/tooltip/tooltip.directive.ts index 6d49e87b96..b604f4deea 100644 --- a/src/framework/theme/components/tooltip/tooltip.directive.ts +++ b/src/framework/theme/components/tooltip/tooltip.directive.ts @@ -6,6 +6,7 @@ import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core'; +import { NbComponentStatus } from '../component-status'; import { NbAdjustment, NbDynamicOverlay, NbDynamicOverlayHandler, NbPosition, NbTrigger } from '../cdk'; import { NbTooltipComponent } from './tooltip.component'; @@ -19,7 +20,7 @@ import { NbTooltipComponent } from './tooltip.component'; * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbTooltipModule, * ], * }) @@ -32,7 +33,7 @@ import { NbTooltipComponent } from './tooltip.component'; * Tooltip can accept a hint text and/or an icon: * @stacked-example(With Icon, tooltip/tooltip-with-icon.component) * - * Same way as Popover, tooltip can accept placement position with `nbTooltipPlacement` proprety: + * Same way as Popover, tooltip can accept placement position with `nbTooltipPlacement` property: * @stacked-example(Placements, tooltip/tooltip-placements.component) * * It is also possible to specify tooltip color using `nbTooltipStatus` property: @@ -90,7 +91,7 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD * @param {string} status */ @Input('nbTooltipStatus') - set status(status: string) { + set status(status: '' | NbComponentStatus) { this.context = Object.assign(this.context, {status}); } diff --git a/src/framework/theme/components/tooltip/tooltip.spec.ts b/src/framework/theme/components/tooltip/tooltip.spec.ts index 9b9da6bd6f..1c14f705b2 100644 --- a/src/framework/theme/components/tooltip/tooltip.spec.ts +++ b/src/framework/theme/components/tooltip/tooltip.spec.ts @@ -260,7 +260,7 @@ describe('Directive: NbTooltipDirective', () => { fixture.detectChanges(); const iconContainer = fixture.nativeElement.querySelector('nb-tooltip'); - expect(iconContainer.className).toContain('danger-tooltip'); + expect(iconContainer.className).toContain('status-danger'); }); }); diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 0fe7cdbca4..dbf46bf4a8 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -979,16 +979,30 @@ $theme: ( overlay-backdrop-bg: rgba(0, 0, 0, 0.288), - tooltip-bg: color-fg-text, - tooltip-primary-bg: color-primary, - tooltip-info-bg: color-info, - tooltip-success-bg: color-success, - tooltip-warning-bg: color-warning, - tooltip-danger-bg: color-danger, - tooltip-fg: color-bg-active, - tooltip-status-fg: color-bg-active, - tooltip-shadow: shadow, - tooltip-font-size: font-size, + tooltip-background-color: color-black, + tooltip-border-color: transparent, + tooltip-border-style: dashed, + tooltip-border-width: 0, + tooltip-border-radius: 0.5rem, + tooltip-padding: 0.6rem 1rem 0.5rem, + tooltip-text-color: color-white, + tooltip-text-font-family: text-caption-font-family, + tooltip-text-font-size: text-caption-font-size, + tooltip-text-font-weight: text-caption-font-weight, + tooltip-text-line-height: text-caption-line-height, + tooltip-max-width: 16rem, + + tooltip-primary-background-color: color-primary, + tooltip-primary-text-color: text-light-color, + tooltip-info-background-color: color-info, + tooltip-info-text-color: text-light-color, + tooltip-success-background-color: color-success, + tooltip-success-text-color: text-light-color, + tooltip-warning-background-color: color-warning, + tooltip-warning-text-color: text-light-color, + tooltip-danger-background-color: color-danger, + tooltip-danger-text-color: text-light-color, + tooltip-shadow: none, select-border-width: 2px, select-max-height: 20rem,