diff --git a/projects/qd-design-demo/src/app/app.html b/projects/qd-design-demo/src/app/app.html index bd3992c..b806311 100644 --- a/projects/qd-design-demo/src/app/app.html +++ b/projects/qd-design-demo/src/app/app.html @@ -1,5 +1,5 @@
- + @@ -15,7 +15,7 @@
- +
''
diff --git a/projects/qd-design-demo/src/app/app.ts b/projects/qd-design-demo/src/app/app.ts index 16f5071..5b75408 100644 --- a/projects/qd-design-demo/src/app/app.ts +++ b/projects/qd-design-demo/src/app/app.ts @@ -3,10 +3,11 @@ import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button'; import {QdButtonType} from '../../../qd-design/src/enums/qd-button-type.enum'; import {QdCard} from '../../../qd-design/src/lib/qd-card/qd-card'; import {NgOptimizedImage} from '@angular/common'; +import {QdTooltipDirective} from '../../../qd-design/src/directives/qd-tooltip-directive'; @Component({ selector: 'app-root', - imports: [QdButton, QdCard, NgOptimizedImage], + imports: [QdButton, QdCard, NgOptimizedImage, QdTooltipDirective], templateUrl: './app.html', styleUrl: './app.scss' }) diff --git a/projects/qd-design/src/directives/qd-tooltip-directive.ts b/projects/qd-design/src/directives/qd-tooltip-directive.ts index d747fcd..47babdd 100644 --- a/projects/qd-design/src/directives/qd-tooltip-directive.ts +++ b/projects/qd-design/src/directives/qd-tooltip-directive.ts @@ -1,11 +1,16 @@ -import {Directive, ElementRef} from '@angular/core'; +import {ComponentRef, Directive, ElementRef, HostListener, input} from '@angular/core'; import { Overlay, OverlayRef, OverlayPositionBuilder, ConnectionPositionPair } from '@angular/cdk/overlay'; +import {ComponentPortal} from '@angular/cdk/portal'; +import {QdPlainTooltip} from '../lib/qd-plain-tooltip/qd-plain-tooltip'; @Directive({ standalone: true, selector: '[tooltip]' }) export class QdTooltipDirective { + text = input('', { alias: 'tooltip' }); + private overlayRef: OverlayRef | null = null; + private tooltipRef: ComponentRef | null = null; constructor( private elementRef: ElementRef, @@ -13,4 +18,55 @@ export class QdTooltipDirective { private positionBuilder: OverlayPositionBuilder ) {} + ngOnInit(): void { + // Top + const positionTop = new ConnectionPositionPair( + { originX: 'center', originY: 'top' }, + { overlayX: 'center', overlayY: 'bottom' }, + 0, -8 + ); + + // Bottom + const positionBottom = new ConnectionPositionPair( + { originX: 'center', originY: 'bottom' }, + { overlayX: 'center', overlayY: 'top' }, + 0, 8 + ); + + const positionStrategy = this.positionBuilder + .flexibleConnectedTo(this.elementRef) + .withPositions([positionTop, positionBottom]) + .withPush(true); + + this.overlayRef = this.overlay.create({ + positionStrategy, + scrollStrategy: this.overlay.scrollStrategies.reposition(), + hasBackdrop: false + }); + } + + @HostListener('mouseenter') + show(): void { + const content = this.text(); + + if (!this.overlayRef || !content || this.overlayRef.hasAttached()) return; + + const tooltipPortal = new ComponentPortal(QdPlainTooltip); + this.tooltipRef = this.overlayRef.attach(tooltipPortal); + + this.tooltipRef.setInput("text", content); + } + + @HostListener('mouseleave') + hide(): void { + if (this.overlayRef) { + this.overlayRef.detach(); + } + } + + ngOnDestroy(): void { + if (this.overlayRef) { + this.overlayRef.dispose(); + } + } } diff --git a/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css b/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css index 3eba59e..e364fdd 100644 --- a/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css +++ b/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css @@ -1,17 +1,479 @@ +@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); +:root { + /* body - large */ + --md-sys-typescale-body-large-font-family-name: Roboto; + --md-sys-typescale-body-large-font-family-style: Regular; + --md-sys-typescale-body-large-font-size: 18px; + --md-sys-typescale-body-large-font-weight: 400px; + --md-sys-typescale-body-large-letter-spacing: 0.50px; + --md-sys-typescale-body-large-line-height: 22px; + /* body - medium */ + --md-sys-typescale-body-medium-font-family-name: Roboto; + --md-sys-typescale-body-medium-font-family-style: Regular; + --md-sys-typescale-body-medium-font-size: 16px; + --md-sys-typescale-body-medium-font-weight: 400px; + --md-sys-typescale-body-medium-letter-spacing: 0.25px; + --md-sys-typescale-body-medium-line-height: 20px; + /* body - small */ + --md-sys-typescale-body-small-font-family-name: Roboto; + --md-sys-typescale-body-small-font-family-style: Regular; + --md-sys-typescale-body-small-font-size: 14px; + --md-sys-typescale-body-small-font-weight: 400px; + --md-sys-typescale-body-small-letter-spacing: 0.40px; + --md-sys-typescale-body-small-line-height: 18px; + /* display - large */ + --md-sys-typescale-display-large-font-family-name: Roboto; + --md-sys-typescale-display-large-font-family-style: Regular; + --md-sys-typescale-display-large-font-size: 51px; + --md-sys-typescale-display-large-font-weight: 400px; + --md-sys-typescale-display-large-letter-spacing: -0.25px; + --md-sys-typescale-display-large-line-height: 61px; + /* display - medium */ + --md-sys-typescale-display-medium-font-family-name: Roboto; + --md-sys-typescale-display-medium-font-family-style: Regular; + --md-sys-typescale-display-medium-font-size: 42px; + --md-sys-typescale-display-medium-font-weight: 400px; + --md-sys-typescale-display-medium-letter-spacing: 0px; + --md-sys-typescale-display-medium-line-height: 52px; + /* display - small */ + --md-sys-typescale-display-small-font-family-name: Roboto; + --md-sys-typescale-display-small-font-family-style: Regular; + --md-sys-typescale-display-small-font-size: 40px; + --md-sys-typescale-display-small-font-weight: 400px; + --md-sys-typescale-display-small-letter-spacing: 0px; + --md-sys-typescale-display-small-line-height: 50px; + /* headline - large */ + --md-sys-typescale-headline-large-font-family-name: Roboto; + --md-sys-typescale-headline-large-font-family-style: Regular; + --md-sys-typescale-headline-large-font-size: 36px; + --md-sys-typescale-headline-large-font-weight: 400px; + --md-sys-typescale-headline-large-letter-spacing: 0px; + --md-sys-typescale-headline-large-line-height: 44px; + /* headline - medium */ + --md-sys-typescale-headline-medium-font-family-name: Roboto; + --md-sys-typescale-headline-medium-font-family-style: Regular; + --md-sys-typescale-headline-medium-font-size: 32px; + --md-sys-typescale-headline-medium-font-weight: 400px; + --md-sys-typescale-headline-medium-letter-spacing: 0px; + --md-sys-typescale-headline-medium-line-height: 36px; + /* headline - small */ + --md-sys-typescale-headline-small-font-family-name: Roboto; + --md-sys-typescale-headline-small-font-family-style: Regular; + --md-sys-typescale-headline-small-font-size: 28px; + --md-sys-typescale-headline-small-font-weight: 400px; + --md-sys-typescale-headline-small-letter-spacing: 0px; + --md-sys-typescale-headline-small-line-height: 36px; + /* label - large */ + --md-sys-typescale-label-large-font-family-name: Roboto; + --md-sys-typescale-label-large-font-family-style: Regular; + --md-sys-typescale-label-large-font-size: 12px; + --md-sys-typescale-label-large-font-weight: 500px; + --md-sys-typescale-label-large-letter-spacing: 0.10px; + --md-sys-typescale-label-large-line-height: 14px; + /* label - medium */ + --md-sys-typescale-label-medium-font-family-name: Roboto; + --md-sys-typescale-label-medium-font-family-style: Regular; + --md-sys-typescale-label-medium-font-size: 11px; + --md-sys-typescale-label-medium-font-weight: 500px; + --md-sys-typescale-label-medium-letter-spacing: 0.50px; + --md-sys-typescale-label-medium-line-height: 15px; + /* label - small */ + --md-sys-typescale-label-small-font-family-name: Roboto; + --md-sys-typescale-label-small-font-family-style: Regular; + --md-sys-typescale-label-small-font-size: 10px; + --md-sys-typescale-label-small-font-weight: 500px; + --md-sys-typescale-label-small-letter-spacing: 0.50px; + --md-sys-typescale-label-small-line-height: 14px; + /* title - large */ + --md-sys-typescale-title-large-font-family-name: Roboto; + --md-sys-typescale-title-large-font-family-style: Regular; + --md-sys-typescale-title-large-font-size: 25px; + --md-sys-typescale-title-large-font-weight: 400px; + --md-sys-typescale-title-large-letter-spacing: 0px; + --md-sys-typescale-title-large-line-height: 31px; + /* title - medium */ + --md-sys-typescale-title-medium-font-family-name: Roboto; + --md-sys-typescale-title-medium-font-family-style: Regular; + --md-sys-typescale-title-medium-font-size: 22px; + --md-sys-typescale-title-medium-font-weight: 500px; + --md-sys-typescale-title-medium-letter-spacing: 0.15px; + --md-sys-typescale-title-medium-line-height: 28px; + /* title - small */ + --md-sys-typescale-title-small-font-family-name: Roboto; + --md-sys-typescale-title-small-font-family-style: Regular; + --md-sys-typescale-title-small-font-size: 20px; + --md-sys-typescale-title-small-font-weight: 500px; + --md-sys-typescale-title-small-letter-spacing: 0.10px; + --md-sys-typescale-title-small-line-height: 16px; +} + +.display-large { + font-family: var(--md-sys-typescale-display-large-font-family-name); + font-size: var(--md-sys-typescale-display-large-font-size); + font-style: var(--md-sys-typescale-display-large-font-family-style); + font-weight: var(--md-sys-typescale-display-large-font-weight); + letter-spacing: var(--md-sys-typescale-display-large-tracking); + line-height: var(--md-sys-typescale-display-large-line-height); + text-decoration: var(--md-sys-typescale-display-large-text-decoration); + text-transform: var(--md-sys-typescale-display-large-text-transform); +} + +.display-medium { + font-family: var(--md-sys-typescale-display-medium-font-family-name); + font-size: var(--md-sys-typescale-display-medium-font-size); + font-style: var(--md-sys-typescale-display-medium-font-family-style); + font-weight: var(--md-sys-typescale-display-medium-font-weight); + letter-spacing: var(--md-sys-typescale-display-medium-tracking); + line-height: var(--md-sys-typescale-display-medium-line-height); + text-decoration: var(--md-sys-typescale-display-medium-text-decoration); + text-transform: var(--md-sys-typescale-display-medium-text-transform); +} + +.display-small { + font-family: var(--md-sys-typescale-display-small-font-family-name); + font-size: var(--md-sys-typescale-display-small-font-size); + font-style: var(--md-sys-typescale-display-small-font-family-style); + font-weight: var(--md-sys-typescale-display-small-font-weight); + letter-spacing: var(--md-sys-typescale-display-small-tracking); + line-height: var(--md-sys-typescale-display-small-line-height); + text-decoration: var(--md-sys-typescale-display-small-text-decoration); + text-transform: var(--md-sys-typescale-display-small-text-transform); +} + +.headline-large { + font-family: var(--md-sys-typescale-headline-large-font-family-name); + font-size: var(--md-sys-typescale-headline-large-font-size); + font-style: var(--md-sys-typescale-headline-large-font-family-style); + font-weight: var(--md-sys-typescale-headline-large-font-weight); + letter-spacing: var(--md-sys-typescale-headline-large-tracking); + line-height: var(--md-sys-typescale-headline-large-line-height); + text-decoration: var(--md-sys-typescale-headline-large-text-decoration); + text-transform: var(--md-sys-typescale-headline-large-text-transform); +} + +.headline-medium { + font-family: var(--md-sys-typescale-headline-medium-font-family-name); + font-size: var(--md-sys-typescale-headline-medium-font-size); + font-style: var(--md-sys-typescale-headline-medium-font-family-style); + font-weight: var(--md-sys-typescale-headline-medium-font-weight); + letter-spacing: var(--md-sys-typescale-headline-medium-tracking); + line-height: var(--md-sys-typescale-headline-medium-line-height); + text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); + text-transform: var(--md-sys-typescale-headline-medium-text-transform); +} + +.headline-small { + font-family: var(--md-sys-typescale-headline-small-font-family-name); + font-size: var(--md-sys-typescale-headline-small-font-size); + font-style: var(--md-sys-typescale-headline-small-font-family-style); + font-weight: var(--md-sys-typescale-headline-small-font-weight); + letter-spacing: var(--md-sys-typescale-headline-small-tracking); + line-height: var(--md-sys-typescale-headline-small-line-height); + text-decoration: var(--md-sys-typescale-headline-small-text-decoration); + text-transform: var(--md-sys-typescale-headline-small-text-transform); +} + +.body-large { + font-family: var(--md-sys-typescale-body-large-font-family-name); + font-size: var(--md-sys-typescale-body-large-font-size); + font-style: var(--md-sys-typescale-body-large-font-family-style); + font-weight: var(--md-sys-typescale-body-large-font-weight); + letter-spacing: var(--md-sys-typescale-body-large-tracking); + line-height: var(--md-sys-typescale-body-large-line-height); + text-decoration: var(--md-sys-typescale-body-large-text-decoration); + text-transform: var(--md-sys-typescale-body-large-text-transform); +} + +.body-medium { + font-family: var(--md-sys-typescale-body-medium-font-family-name); + font-size: var(--md-sys-typescale-body-medium-font-size); + font-style: var(--md-sys-typescale-body-medium-font-family-style); + font-weight: var(--md-sys-typescale-body-medium-font-weight); + letter-spacing: var(--md-sys-typescale-body-medium-tracking); + line-height: var(--md-sys-typescale-body-medium-line-height); + text-decoration: var(--md-sys-typescale-body-medium-text-decoration); + text-transform: var(--md-sys-typescale-body-medium-text-transform); +} + +.body-small { + font-family: var(--md-sys-typescale-body-small-font-family-name); + font-size: var(--md-sys-typescale-body-small-font-size); + font-style: var(--md-sys-typescale-body-small-font-family-style); + font-weight: var(--md-sys-typescale-body-small-font-weight); + letter-spacing: var(--md-sys-typescale-body-small-tracking); + line-height: var(--md-sys-typescale-body-small-line-height); + text-decoration: var(--md-sys-typescale-body-small-text-decoration); + text-transform: var(--md-sys-typescale-body-small-text-transform); +} + +.label-large { + font-family: var(--md-sys-typescale-label-large-font-family-name); + font-size: var(--md-sys-typescale-label-large-font-size); + font-style: var(--md-sys-typescale-label-large-font-family-style); + font-weight: var(--md-sys-typescale-label-large-font-weight); + letter-spacing: var(--md-sys-typescale-label-large-tracking); + line-height: var(--md-sys-typescale-label-large-line-height); + text-decoration: var(--md-sys-typescale-label-large-text-decoration); + text-transform: var(--md-sys-typescale-label-large-text-transform); +} + +.label-medium { + font-family: var(--md-sys-typescale-label-medium-font-family-name); + font-size: var(--md-sys-typescale-label-medium-font-size); + font-style: var(--md-sys-typescale-label-medium-font-family-style); + font-weight: var(--md-sys-typescale-label-medium-font-weight); + letter-spacing: var(--md-sys-typescale-label-medium-tracking); + line-height: var(--md-sys-typescale-label-medium-line-height); + text-decoration: var(--md-sys-typescale-label-medium-text-decoration); + text-transform: var(--md-sys-typescale-label-medium-text-transform); +} + +.label-small { + font-family: var(--md-sys-typescale-label-small-font-family-name); + font-size: var(--md-sys-typescale-label-small-font-size); + font-style: var(--md-sys-typescale-label-small-font-family-style); + font-weight: var(--md-sys-typescale-label-small-font-weight); + letter-spacing: var(--md-sys-typescale-label-small-tracking); + line-height: var(--md-sys-typescale-label-small-line-height); + text-decoration: var(--md-sys-typescale-label-small-text-decoration); + text-transform: var(--md-sys-typescale-label-small-text-transform); +} + +.title-large { + font-family: var(--md-sys-typescale-title-large-font-family-name); + font-size: var(--md-sys-typescale-title-large-font-size); + font-style: var(--md-sys-typescale-title-large-font-family-style); + font-weight: var(--md-sys-typescale-title-large-font-weight); + letter-spacing: var(--md-sys-typescale-title-large-tracking); + line-height: var(--md-sys-typescale-title-large-line-height); + text-decoration: var(--md-sys-typescale-title-large-text-decoration); + text-transform: var(--md-sys-typescale-title-large-text-transform); +} + +.title-medium { + font-family: var(--md-sys-typescale-title-medium-font-family-name); + font-size: var(--md-sys-typescale-title-medium-font-size); + font-style: var(--md-sys-typescale-title-medium-font-family-style); + font-weight: var(--md-sys-typescale-title-medium-font-weight); + letter-spacing: var(--md-sys-typescale-title-medium-tracking); + line-height: var(--md-sys-typescale-title-medium-line-height); + text-decoration: var(--md-sys-typescale-title-medium-text-decoration); + text-transform: var(--md-sys-typescale-title-medium-text-transform); +} + +.title-small { + font-family: var(--md-sys-typescale-title-small-font-family-name); + font-size: var(--md-sys-typescale-title-small-font-size); + font-style: var(--md-sys-typescale-title-small-font-family-style); + font-weight: var(--md-sys-typescale-title-small-font-weight); + letter-spacing: var(--md-sys-typescale-title-small-tracking); + line-height: var(--md-sys-typescale-title-small-line-height); + text-decoration: var(--md-sys-typescale-title-small-text-decoration); + text-transform: var(--md-sys-typescale-title-small-text-transform); +} + +.scrollable-y { + max-height: 100%; + overflow-x: hidden; + overflow-y: auto; +} + +.height-100 { + height: 100%; + max-height: 100%; + min-height: 100%; +} + +.height-100-vh { + height: 100vh; + max-height: 100vh; + min-height: 100vh; +} + +.width-100 { + max-width: 100%; + min-width: 100%; + width: 100%; +} + +.width-100-vw { + max-width: 100vw; + min-width: 100vw; + width: 100vw; +} + +body { + --md-sys-color-primary: rgb(73 93 146); + --md-sys-color-surface-tint: rgb(73 93 146); + --md-sys-color-on-primary: rgb(255 255 255); + --md-sys-color-primary-container: rgb(218 225 255); + --md-sys-color-on-primary-container: rgb(49 69 120); + --md-sys-color-secondary: rgb(88 94 113); + --md-sys-color-on-secondary: rgb(255 255 255); + --md-sys-color-secondary-container: rgb(221 226 249); + --md-sys-color-on-secondary-container: rgb(65 70 89); + --md-sys-color-tertiary: rgb(115 84 113); + --md-sys-color-on-tertiary: rgb(255 255 255); + --md-sys-color-tertiary-container: rgb(255 214 249); + --md-sys-color-on-tertiary-container: rgb(90 61 88); + --md-sys-color-error: rgb(186 26 26); + --md-sys-color-on-error: rgb(255 255 255); + --md-sys-color-error-container: rgb(255 218 214); + --md-sys-color-on-error-container: rgb(147 0 10); + --md-sys-color-background: rgb(250 248 255); + --md-sys-color-on-background: rgb(26 27 33); + --md-sys-color-surface: rgb(250 248 255); + --md-sys-color-on-surface: rgb(26 27 33); + --md-sys-color-surface-variant: rgb(225 226 236); + --md-sys-color-on-surface-variant: rgb(69 70 79); + --md-sys-color-outline: rgb(117 118 128); + --md-sys-color-outline-variant: rgb(197 198 208); + --md-sys-color-shadow: rgb(0 0 0); + --md-sys-color-scrim: rgb(0 0 0); + --md-sys-color-inverse-surface: rgb(47 48 54); + --md-sys-color-inverse-on-surface: rgb(241 240 247); + --md-sys-color-inverse-primary: rgb(179 197 255); + --md-sys-color-primary-fixed: rgb(218 225 255); + --md-sys-color-on-primary-fixed: rgb(0 24 73); + --md-sys-color-primary-fixed-dim: rgb(179 197 255); + --md-sys-color-on-primary-fixed-variant: rgb(49 69 120); + --md-sys-color-secondary-fixed: rgb(221 226 249); + --md-sys-color-on-secondary-fixed: rgb(21 27 44); + --md-sys-color-secondary-fixed-dim: rgb(193 198 221); + --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89); + --md-sys-color-tertiary-fixed: rgb(255 214 249); + --md-sys-color-on-tertiary-fixed: rgb(43 18 43); + --md-sys-color-tertiary-fixed-dim: rgb(225 187 220); + --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88); + --md-sys-color-surface-dim: rgb(218 217 224); + --md-sys-color-surface-bright: rgb(250 248 255); + --md-sys-color-surface-container-lowest: rgb(255 255 255); + --md-sys-color-surface-container-low: rgb(244 243 250); + --md-sys-color-surface-container: rgb(238 237 244); + --md-sys-color-surface-container-high: rgb(232 231 239); + --md-sys-color-surface-container-highest: rgb(227 226 233); + transition: background-color 0.3s, color 0.3s; +} + +@media (prefers-color-scheme: dark) { + body:not(.light-theme) { + --md-sys-color-primary: rgb(179 197 255); + --md-sys-color-surface-tint: rgb(179 197 255); + --md-sys-color-on-primary: rgb(25 46 96); + --md-sys-color-primary-container: rgb(49 69 120); + --md-sys-color-on-primary-container: rgb(218 225 255); + --md-sys-color-secondary: rgb(193 198 221); + --md-sys-color-on-secondary: rgb(42 48 66); + --md-sys-color-secondary-container: rgb(65 70 89); + --md-sys-color-on-secondary-container: rgb(221 226 249); + --md-sys-color-tertiary: rgb(225 187 220); + --md-sys-color-on-tertiary: rgb(66 39 65); + --md-sys-color-tertiary-container: rgb(90 61 88); + --md-sys-color-on-tertiary-container: rgb(255 214 249); + --md-sys-color-error: rgb(255 180 171); + --md-sys-color-on-error: rgb(105 0 5); + --md-sys-color-error-container: rgb(147 0 10); + --md-sys-color-on-error-container: rgb(255 218 214); + --md-sys-color-background: rgb(18 19 24); + --md-sys-color-on-background: rgb(227 226 233); + --md-sys-color-surface: rgb(18 19 24); + --md-sys-color-on-surface: rgb(227 226 233); + --md-sys-color-surface-variant: rgb(69 70 79); + --md-sys-color-on-surface-variant: rgb(197 198 208); + --md-sys-color-outline: rgb(143 144 154); + --md-sys-color-outline-variant: rgb(69 70 79); + --md-sys-color-shadow: rgb(0 0 0); + --md-sys-color-scrim: rgb(0 0 0); + --md-sys-color-inverse-surface: rgb(227 226 233); + --md-sys-color-inverse-on-surface: rgb(47 48 54); + --md-sys-color-inverse-primary: rgb(73 93 146); + --md-sys-color-primary-fixed: rgb(218 225 255); + --md-sys-color-on-primary-fixed: rgb(0 24 73); + --md-sys-color-primary-fixed-dim: rgb(179 197 255); + --md-sys-color-on-primary-fixed-variant: rgb(49 69 120); + --md-sys-color-secondary-fixed: rgb(221 226 249); + --md-sys-color-on-secondary-fixed: rgb(21 27 44); + --md-sys-color-secondary-fixed-dim: rgb(193 198 221); + --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89); + --md-sys-color-tertiary-fixed: rgb(255 214 249); + --md-sys-color-on-tertiary-fixed: rgb(43 18 43); + --md-sys-color-tertiary-fixed-dim: rgb(225 187 220); + --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88); + --md-sys-color-surface-dim: rgb(18 19 24); + --md-sys-color-surface-bright: rgb(56 57 63); + --md-sys-color-surface-container-lowest: rgb(13 14 19); + --md-sys-color-surface-container-low: rgb(26 27 33); + --md-sys-color-surface-container: rgb(30 31 37); + --md-sys-color-surface-container-high: rgb(41 42 47); + --md-sys-color-surface-container-highest: rgb(51 52 58); + } +} +body.dark-theme { + --md-sys-color-primary: rgb(179 197 255); + --md-sys-color-surface-tint: rgb(179 197 255); + --md-sys-color-on-primary: rgb(25 46 96); + --md-sys-color-primary-container: rgb(49 69 120); + --md-sys-color-on-primary-container: rgb(218 225 255); + --md-sys-color-secondary: rgb(193 198 221); + --md-sys-color-on-secondary: rgb(42 48 66); + --md-sys-color-secondary-container: rgb(65 70 89); + --md-sys-color-on-secondary-container: rgb(221 226 249); + --md-sys-color-tertiary: rgb(225 187 220); + --md-sys-color-on-tertiary: rgb(66 39 65); + --md-sys-color-tertiary-container: rgb(90 61 88); + --md-sys-color-on-tertiary-container: rgb(255 214 249); + --md-sys-color-error: rgb(255 180 171); + --md-sys-color-on-error: rgb(105 0 5); + --md-sys-color-error-container: rgb(147 0 10); + --md-sys-color-on-error-container: rgb(255 218 214); + --md-sys-color-background: rgb(18 19 24); + --md-sys-color-on-background: rgb(227 226 233); + --md-sys-color-surface: rgb(18 19 24); + --md-sys-color-on-surface: rgb(227 226 233); + --md-sys-color-surface-variant: rgb(69 70 79); + --md-sys-color-on-surface-variant: rgb(197 198 208); + --md-sys-color-outline: rgb(143 144 154); + --md-sys-color-outline-variant: rgb(69 70 79); + --md-sys-color-shadow: rgb(0 0 0); + --md-sys-color-scrim: rgb(0 0 0); + --md-sys-color-inverse-surface: rgb(227 226 233); + --md-sys-color-inverse-on-surface: rgb(47 48 54); + --md-sys-color-inverse-primary: rgb(73 93 146); + --md-sys-color-primary-fixed: rgb(218 225 255); + --md-sys-color-on-primary-fixed: rgb(0 24 73); + --md-sys-color-primary-fixed-dim: rgb(179 197 255); + --md-sys-color-on-primary-fixed-variant: rgb(49 69 120); + --md-sys-color-secondary-fixed: rgb(221 226 249); + --md-sys-color-on-secondary-fixed: rgb(21 27 44); + --md-sys-color-secondary-fixed-dim: rgb(193 198 221); + --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89); + --md-sys-color-tertiary-fixed: rgb(255 214 249); + --md-sys-color-on-tertiary-fixed: rgb(43 18 43); + --md-sys-color-tertiary-fixed-dim: rgb(225 187 220); + --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88); + --md-sys-color-surface-dim: rgb(18 19 24); + --md-sys-color-surface-bright: rgb(56 57 63); + --md-sys-color-surface-container-lowest: rgb(13 14 19); + --md-sys-color-surface-container-low: rgb(26 27 33); + --md-sys-color-surface-container: rgb(30 31 37); + --md-sys-color-surface-container-high: rgb(41 42 47); + --md-sys-color-surface-container-highest: rgb(51 52 58); +} + :host { display: block; } -.tooltip-content { - background-color: #1e1e1e; - color: white; - padding: 8px 12px; +.tooltip-container { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + background-color: var(--md-sys-color-inverse-surface); + color: var(--md-sys-color-inverse-on-surface); + padding: 4px 8px; border-radius: 4px; - font-size: 13px; max-width: 250px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); pointer-events: none; - animation: tooltip-fade 0.2s cubic-bezier(0, 0, 0.2, 1); + overflow: hidden; + animation: tooltip-fade 0.5s cubic-bezier(0, 0, 0.2, 1); } @keyframes tooltip-fade { diff --git a/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css.map b/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css.map index f76b65a..cc31394 100644 --- a/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css.map +++ b/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["qd-plain-tooltip.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;IAAO;IAAY;;EACnB;IAAK;IAAY","file":"qd-plain-tooltip.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-plain-tooltip.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;;;AAGF;ECEE;EDAA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;IAAO;IAAY;;EACnB;IAAK;IAAY","file":"qd-plain-tooltip.css"} \ No newline at end of file diff --git a/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.html b/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.html index 7f26767..d3abb89 100644 --- a/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.html +++ b/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.html @@ -1,3 +1,3 @@ -
+
{{ text() }}
diff --git a/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.scss b/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.scss index b466834..1ae5d16 100644 --- a/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.scss +++ b/projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.scss @@ -1,17 +1,20 @@ +@use '../../styles/qd_design_system' as qd; + :host { display: block; } -.tooltip-content { - background-color: #1e1e1e; - color: white; - padding: 8px 12px; - border-radius: 4px; - font-size: 13px; - max-width: 250px; - box-shadow: 0 4px 6px rgba(0,0,0,0.3); - pointer-events: none; - animation: tooltip-fade 0.2s cubic-bezier(0, 0, 0.2, 1); +.tooltip-container { + @include qd.elevation-1; + background-color: var(--md-sys-color-inverse-surface); + color: var(--md-sys-color-inverse-on-surface); + padding: 4px 8px; + border-radius: 4px; + max-width: 250px; + pointer-events: none; + overflow: hidden; + + animation: tooltip-fade 0.5s cubic-bezier(0, 0, 0.2, 1); } @keyframes tooltip-fade { diff --git a/projects/qd-design/src/lib/qd-tooltip-directive.spec.ts b/projects/qd-design/src/lib/qd-tooltip-directive.spec.ts new file mode 100644 index 0000000..0d98a0d --- /dev/null +++ b/projects/qd-design/src/lib/qd-tooltip-directive.spec.ts @@ -0,0 +1,8 @@ +import { QdTooltipDirective } from '../directives/qd-tooltip-directive'; + +describe('QdTooltipDirective', () => { + it('should create an instance', () => { + const directive = new QdTooltipDirective(); + expect(directive).toBeTruthy(); + }); +});