diff --git a/live-editing/configs/AvatarConfigGenerator.ts b/live-editing/configs/AvatarConfigGenerator.ts index bcda5be74..4b4770185 100644 --- a/live-editing/configs/AvatarConfigGenerator.ts +++ b/live-editing/configs/AvatarConfigGenerator.ts @@ -33,7 +33,6 @@ export class AvatarConfigGenerator implements IConfigGenerator { configs.push(new Config({ component: 'AvatarStylingSampleComponent', - additionalFiles: ["/src/app/layouts/avatar/avatar-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/layouts/avatar/" })); diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts index 0015cbc59..69076422f 100644 --- a/live-editing/configs/BadgeConfigGenerator.ts +++ b/live-editing/configs/BadgeConfigGenerator.ts @@ -55,7 +55,7 @@ export class BadgeConfigGenerator implements IConfigGenerator { // badge styling configs.push(new Config({ component: 'BadgeStylingComponent', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling/layout.scss"], + additionalFiles: ["src/app/data-display/badge/model/member.model.ts"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.html b/src/app/data-display/badge/badge-dot/badge-dot.component.html index 659f1a328..4c41e83e1 100644 --- a/src/app/data-display/badge/badge-dot/badge-dot.component.html +++ b/src/app/data-display/badge/badge-dot/badge-dot.component.html @@ -1,43 +1,44 @@ -
-
-
- notifications + + + + +
+ @for (item of notifications; track item.title) { +
+ + @if (item.unread) { + + } + + {{ item.title }} + {{ item.time }} + chevron_right
- -
-
- @for (item of notifications; track item.title) { -
- - @if (item.unread) { - - } - - {{ item.title }} - {{ item.time }} - chevron_right -
- } -
-
- - -
-
- @for (tab of tabs; track tab.label) { -
- - @if (tab.icon === 'facebookMessenger') { - - } @else { - - } - @if (tab.hasUpdates) { - - } - - {{ tab.label }} -
- } -
+ } +
+ + + + + +
+ @for (tab of tabs; track tab.label) { +
+ + + @if (tab.hasUpdates) { + + } + + {{ tab.label }} +
+ }
diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss index ec0b144f8..db1defa58 100644 --- a/src/app/data-display/badge/badge-dot/badge-dot.component.scss +++ b/src/app/data-display/badge/badge-dot/badge-dot.component.scss @@ -1,134 +1,115 @@ -igx-badge { - --ig-size: var(--ig-size-small); -} - -igx-avatar { - --size: 40px; -} +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -.icon-example igx-badge, -.avatar-example igx-badge, -.nav-icon igx-badge { - position: absolute; -} +:host { + --sample-accent: #0057a9; -.icon-example igx-badge { - inset-block-start: 0; - inset-inline-end: 2px; + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(40px); + min-height: 8.5rem; } -.avatar-example igx-badge { - inset-block-start: -0.25rem; - inset-inline-end: -2px; -} +igx-badge { + --ig-size: var(--ig-size-small); -.nav-icon igx-badge { - inset-block-start: -2px; - inset-inline-end: -6px; + position: absolute; + inset-block-start: anchor(14.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -.badge-dot { - display: flex; - align-items: center; - justify-content: center; - gap: 40px; - min-height: 8.5rem; -} +$anchors: icon, avatar; -.dot-example { - position: relative; -} +@each $anchor in $anchors { + $i: list.index($anchors, $anchor); -.icon-example, -.avatar-example, -.icon-circle { - display: flex; - align-items: center; - width: 36px; - height: 36px; -} + .#{$anchor}-anchor { + anchor-name: --#{$anchor}; + } -.icon-circle { - justify-content: center; - border-radius: 50%; - background: var(--ig-gray-200); - color: var(--ig-gray-800); + :host > igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$anchor}; + } } .notifications-card, .nav-card { background: var(--ig-surface-500); - border-radius: 4px; - box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12); + border-radius: rem(4px); + box-shadow: 0 rem(1px) rem(3px) hsl(from var(--ig-gray-900) h s l / 0.12); } .notifications-card { - min-width: 272px; - padding: 8px 0; + min-width: rem(270px); + padding-block: rem(8px); } .notification-row { + @include type-style("body-2") { + margin: 0; + } + display: flex; align-items: center; - gap: 8px; - padding: 8px 12px; - font-size: 14px; + gap: rem(8px); + padding: rem(8px) rem(12px); color: var(--ig-gray-900); } .row-indicator { display: inline-flex; justify-content: center; - width: 12px; + width: rem(12px); } .row-title { flex: 1; } -.row-time { - font-size: 13px; - color: var(--ig-gray-900); -} - -.row-time.unread { - color: #0057A9; +.unread { + color: var(--sample-accent); font-weight: 600; } .row-chevron { - --ig-size: 1rem; color: var(--ig-gray-600); - font-size: 18px; + font-size: rem(18px); } .nav-card { display: flex; align-items: center; - gap: 8px; - padding: 8px 12px; + gap: rem(8px); + padding: rem(8px) rem(12px); } .nav-item { + @include type-style("caption") { + margin: 0; + } + display: flex; flex-direction: column; align-items: center; - gap: 4px; - min-width: 56px; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} + gap: rem(4px); + min-width: rem(56px); + color: var(--ig-gray-700); -.nav-item.active { - color: #0057A9; + &.active { + color: var(--sample-accent); + } } .nav-icon { position: relative; display: inline-flex; + + igx-badge { + position: absolute; + inset-block: rem(-2px) auto; + inset-inline: auto rem(-6px); + } } diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.html b/src/app/data-display/badge/badge-icon/badge-icon.component.html index b49c231b1..42124e3c6 100644 --- a/src/app/data-display/badge/badge-icon/badge-icon.component.html +++ b/src/app/data-display/badge/badge-icon/badge-icon.component.html @@ -1,17 +1,8 @@ -
- @for (item of badges; track item.label) { -
-
- -
- {{ item.label }} -
- } -
-
- - -
- on avatar -
-
+@for (item of badges; track item.label) { + + {{ item.label }} +} + + + +on avatar diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.scss b/src/app/data-display/badge/badge-icon/badge-icon.component.scss index fd9db2634..5dccea83e 100644 --- a/src/app/data-display/badge/badge-icon/badge-icon.component.scss +++ b/src/app/data-display/badge/badge-icon/badge-icon.component.scss @@ -1,67 +1,44 @@ -igx-avatar { - --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); +@use "igniteui-theming/sass/typography" as *; + +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(40px); + row-gap: rem(10px); + min-height: 8.5rem; + padding: rem(32px); } -.icon-wrapper { - display: flex; - align-items: flex-end; - justify-content: center; - width: 40px; - height: 40px; +igx-avatar { + grid-row: 1; + anchor-name: --avatar; } -.icon-wrapper > igx-badge { +igx-badge { --ig-size: var(--ig-size-medium); - display: inline-flex; - align-items: center; - justify-content: center; - text-align: center; -} -.avatar-wrapper igx-badge { - --ig-size: var(--ig-size-small); - position: absolute; - inset-block-start: -4px; - inset-inline-end: -6px; + grid-row: 1; } -.badge-icon { - display: flex; - align-items: center; - justify-content: center; - gap: 40px; - min-height: 8.5rem; -} - -.badge-icon-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 6px; - min-width: 56px; -} +span { + @include type-style("body-2") { + margin: 0; + } -.badge-icon-item span { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; - transform: translateY(4px); + grid-row: 2; + text-align: center; + color: var(--ig-gray-700); } -.badge-icon-item:last-child span { - white-space: nowrap; -} +igx-badge:last-of-type { + --ig-size: var(--ig-size-small); -.avatar-wrapper { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 40px; + position: absolute; + position-anchor: --avatar; + inset-block-start: anchor(14.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html index c260ae562..58333b1d6 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html @@ -1,28 +1,18 @@ -
-
-
- favorite_border -
- -
-
- - -
-
+ + + + + + + @for (step of steps; track step.label) { - @if (!$first) { - - } -
-
- {{ step.index }} - @if (step.current) { - - } -
- {{ step.label }} -
+ + + {{ step.index }} + {{ step.label }} + } -
-
+ + + diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss index b0a0086c8..7f7ef7321 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss @@ -1,120 +1,66 @@ -igx-badge { - --ig-size: var(--ig-size-small); -} - -igx-avatar { - --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); -} - -:host ::ng-deep .outlined-example igx-avatar igx-icon { - color: var(--ig-gray-50); -} - -.outlined-example:nth-child(2) igx-badge { - inset-block-start: auto; - inset-block-end: -6px; - inset-inline-end: -6px; -} - -.step-marker igx-badge { - position: absolute; - inset-block-start: -1px; - inset-inline-end: -2px; -} - -.outlined-example igx-badge { - position: absolute; - inset-block-start: -6px; - inset-inline-end: -10px; -} - -.icon-circle igx-icon { - font-size: 20px; -} +@use "sass:list"; +@use "igniteui-theming/sass" as *; :host { - display: block; - padding-inline: 1rem; -} - -.badge-outlined { - display: flex; - align-items: center; - justify-content: center; - gap: 60px; + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(60px); min-height: 7rem; -} + padding-inline: rem(16px); -.outlined-example { - position: relative; - display: flex; + ::ng-deep { + // NOTE! This is just for the sake of the sample, don't do this in your app. + // The stepper body is where the content for each step goes, and it should be visible. + // This sample doesn't have any content, so we hide it to avoid the empty space. + .igx-stepper__body { + display: none; + } + } } -.icon-circle, -.step-circle { - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; +.icon-anchor { + --ig-avatar-background: #{color($color: gray, $variant: 900, $opacity: 0.08)}; } -.icon-circle { - width: 36px; - height: 36px; - background: var(--ig-gray-200); - color: var(--ig-gray-800); -} +igx-badge { + --ig-size: var(--ig-size-small); -.steps { - display: flex; - align-items: flex-start; - gap: 8px; -} + position: absolute; + inset-block-start: anchor(14.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; -.step { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; + &:nth-of-type(2) { + inset-block-start: anchor(85.5%); + } } -.step-marker { - position: relative; - display: flex; -} +$anchors: icon, initials, flagged; -.step-circle { - width: 26px; - height: 26px; - background: var(--ig-gray-900); - color: var(--ig-gray-50); - font-size: 12px; -} +@each $anchor in $anchors { + $i: list.index($anchors, $anchor); -.step-circle.pending { - background: var(--ig-gray-200); - color: var(--ig-gray-800); -} + .#{$anchor}-anchor { + anchor-name: --#{$anchor}; + } -.step-connector { - width: 56px; - margin-block-start: 13px; - border-block-start: 1px solid var(--ig-gray-900); + :host > igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$anchor}; + } } -.step-connector.pending { - border-block-start-style: dashed; - border-block-start-color: var(--ig-gray-400); +igx-stepper { + --ig-stepper-step-separator-style: dashed; + --ig-stepper-step-separator-color: var(--ig-gray-400); + + max-width: rem(316px); } -.step-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +span[igxStepIndicator] { + display: grid; + place-items: center; + inline-size: 100%; + block-size: 100%; } diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts index 6b2013340..226ce9c10 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts @@ -1,19 +1,19 @@ import { Component } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; -import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper'; @Component({ selector: 'app-badge-outlined', styleUrls: ['./badge-outlined.component.scss'], templateUrl: './badge-outlined.component.html', - imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent] + imports: [IgxAvatarComponent, IgxBadgeComponent, IGX_STEPPER_DIRECTIVES] }) export class BadgeOutlinedComponent { public steps = [ - { index: 1, label: 'Orders', current: false, pending: false }, - { index: 2, label: 'Payment', current: true, pending: false }, - { index: 3, label: 'Shipping', current: false, pending: true } + { index: 1, label: 'Orders', completed: true, active: false, flagged: false }, + { index: 2, label: 'Payment', completed: false, active: true, flagged: true }, + { index: 3, label: 'Shipping', completed: false, active: false, flagged: false } ]; } diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.html b/src/app/data-display/badge/badge-overview/badge-overview.component.html index caa914820..17daa533f 100644 --- a/src/app/data-display/badge/badge-overview/badge-overview.component.html +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.html @@ -1,18 +1,16 @@ -
-
- - -
-
- mail - -
-
- Events - -
-
- notifications - -
-
+ + + + +mail + + +Events + + +notifications + diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.scss b/src/app/data-display/badge/badge-overview/badge-overview.component.scss index 3830a130d..51d1079d5 100644 --- a/src/app/data-display/badge/badge-overview/badge-overview.component.scss +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.scss @@ -1,67 +1,47 @@ -igx-avatar { - --size: 40px; +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +:host { + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(60px); + min-height: 7rem; } igx-icon { color: var(--ig-gray-700); - font-size: 1.5rem; -} - -igx-badge { - --ig-size: var(--ig-size-small); - position: absolute; - inset-block-start: -0.15rem; - inset-inline-end: -0.15rem; -} - -.avatar-example igx-badge { - inset-block-start: auto; - inset-block-end: -0.15rem; - inset-inline-end: -0.15rem; + font-size: rem(24px); } -.event-example igx-chip { +igx-chip { --ig-size: var(--ig-size-large); } -.event-example igx-badge { - inset-block-start: 0; - inset-inline-end: -0.8rem; -} +igx-badge { + --ig-size: var(--ig-size-small); -.icon-example igx-badge { - inset-block-start: 0; - inset-inline-end: 0; + position: absolute; + inset-block-start: anchor(10%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -.notification-example igx-badge { - inset-block-start: 0.5rem; - inset-inline-end: 0.5rem; +igx-badge:nth-of-type(1) { + inset-block-start: anchor(85.5%); } -.event-example { - min-width: auto; -} +$anchors: avatar, mail, events, notifications; -.badge-overview { - display: flex; - align-items: center; - justify-content: center; - gap: 60px; - min-height: 7rem; -} +@each $anchor in $anchors { + $i: list.index($anchors, $anchor); -.badge-example { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 2.5rem; - min-height: 2.5rem; -} + .#{$anchor}-anchor { + anchor-name: --#{$anchor}; + } -.icon-example, -.notification-example { - width: 2.5rem; - height: 2.5rem; + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$anchor}; + } } diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.html b/src/app/data-display/badge/badge-shape/badge-shape.component.html index 181f4727e..63a34447d 100644 --- a/src/app/data-display/badge/badge-shape/badge-shape.component.html +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.html @@ -1,14 +1,9 @@ -
-
- Rounded - - - -
-
- Square - - - -
-
+Rounded + + + + +Square + + + diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss index 56754daae..8e7dfd50b 100644 --- a/src/app/data-display/badge/badge-shape/badge-shape.component.scss +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss @@ -1,31 +1,31 @@ -.badge-shape { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 40px; - min-height: 8.5rem; -} +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -.badge-shape-row { +:host { display: grid; - grid-template-columns: 80px 40px 40px 40px; - align-items: center; - justify-items: center; - gap: 8px; + grid-template-columns: rem(80px) rem(40px) rem(40px) rem(40px); + place-content: center; + place-items: center; + column-gap: rem(8px); + row-gap: rem(40px); + min-height: 8.5rem; } -.row-label { +span { justify-self: end; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; + color: var(--ig-gray-700); + + @include type-style("body-2") { + margin: 0; + } } -.badge-small { - --ig-size: var(--ig-size-small); +$sizes: small, medium, large; + +@each $size in $sizes { + $i: list.index($sizes, $size); + + igx-badge:nth-of-type(3n + #{$i}) { + --ig-size: var(--ig-size-#{$size}); + } } diff --git a/src/app/data-display/badge/badge-size/badge-size.component.html b/src/app/data-display/badge/badge-size/badge-size.component.html index f18e860e6..87db132a2 100644 --- a/src/app/data-display/badge/badge-size/badge-size.component.html +++ b/src/app/data-display/badge/badge-size/badge-size.component.html @@ -1,20 +1,14 @@ -
-
- Small - - - -
-
- Medium - - - -
-
- Large - - - -
-
+Small + + + + +Medium + + + + +Large + + + diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss index 868040a84..bdedf7a51 100644 --- a/src/app/data-display/badge/badge-size/badge-size.component.scss +++ b/src/app/data-display/badge/badge-size/badge-size.component.scss @@ -1,31 +1,31 @@ -.badge-size { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 40px; - padding: 32px; -} +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -.badge-size-row { +:host { display: grid; - grid-template-columns: 80px 32px 40px 40px; - align-items: center; - justify-items: center; - gap: 8px; + grid-template-columns: rem(80px) rem(32px) rem(40px) rem(40px); + place-content: center; + place-items: center; + column-gap: rem(8px); + row-gap: rem(40px); + padding: rem(32px); } -.row-label { +span { justify-self: end; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; + color: var(--ig-gray-700); + + @include type-style("body-2") { + margin: 0; + } } -.badge-large { --ig-size: var(--ig-size-large); } -.badge-medium { --ig-size: var(--ig-size-medium); } -.badge-small { --ig-size: var(--ig-size-small); } +$sizes: small, medium, large; + +@each $size in $sizes { + $i: list.index($sizes, $size); + + igx-badge:nth-of-type(n + #{($i - 1) * 3 + 1}):nth-of-type(-n + #{$i * 3}) { + --ig-size: var(--ig-size-#{$size}); + } +} diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.html b/src/app/data-display/badge/badge-styling/badge-styling.component.html index 00bd36f85..813d59501 100644 --- a/src/app/data-display/badge/badge-styling/badge-styling.component.html +++ b/src/app/data-display/badge/badge-styling/badge-styling.component.html @@ -1,18 +1,11 @@ -
-
- - -
-
- - -
-
- - -
-
- - -
-
+ + + + + + + + + + + diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.scss b/src/app/data-display/badge/badge-styling/badge-styling.component.scss index d280f593d..29d0b7169 100644 --- a/src/app/data-display/badge/badge-styling/badge-styling.component.scss +++ b/src/app/data-display/badge/badge-styling/badge-styling.component.scss @@ -1,50 +1,52 @@ -@use "layout.scss"; +@use "sass:list"; +@use "sass:map"; +@use "igniteui-theming/sass/typography" as *; + +:host { + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(60px); + min-height: 7rem; +} igx-badge { --ig-size: var(--ig-size-small); -} -:host ::ng-deep .badge-teal igx-icon, -:host ::ng-deep .badge-amber igx-icon, -:host ::ng-deep .styling-item.pink igx-avatar igx-icon { - color: var(--ig-gray-50); + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -:host ::ng-deep .badge-teal igx-icon { - position: relative; +.avatar-green { + --ig-avatar-background: var(--ig-success-200); + --ig-avatar-icon-color: var(--ig-success-700); } -:host ::ng-deep .badge-teal igx-icon::after { - content: ""; - position: absolute; - inset: 50% auto auto 50%; - width: 4px; - height: 4px; - border-radius: 50%; - background: var(--ig-success-700); - transform: translate(-50%, -50%); +.avatar-pink { + --ig-avatar-background: #da64ff; + --ig-avatar-icon-color: var(--ig-gray-50); } -.styling-item.green igx-avatar { - --icon-color: var(--ig-success-700); -} +$badges: ( + teal: var(--ig-success-700), + amber: #c97c00, + magenta: #9c27b0, + lime: var(--ig-success-700), +); -.styling-item igx-avatar { - --size: 40px; -} +@each $name, $color in $badges { + $i: list.index(map.keys($badges), $name); -.styling-item.green igx-avatar { - --ig-avatar-background: var(--ig-success-200); - --ig-avatar-color: var(--ig-gray-50); -} + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$name}; + } -.styling-item.pink igx-avatar { - --ig-avatar-background: #DA64FF; - --ig-avatar-color: var(--ig-gray-50); -} + .badge-#{$name} { + --ig-badge-background-color: #{$color}; -.styling-item igx-badge { - position: absolute; - inset-block-end: -2px; - inset-inline-end: -2px; + position-anchor: --#{$name}; + } } diff --git a/src/app/data-display/badge/badge-styling/layout.scss b/src/app/data-display/badge/badge-styling/layout.scss deleted file mode 100644 index 601f78323..000000000 --- a/src/app/data-display/badge/badge-styling/layout.scss +++ /dev/null @@ -1,33 +0,0 @@ -.badge-teal { - --background-color: var(--ig-success-700); - --border-radius: 50%; -} - -.badge-amber { - --background-color: #C97C00; - --border-radius: 50%; -} - -.badge-magenta { - --background-color: #9C27B0; - --ig-avatar-color: var(--ig-gray-50); - --border-radius: 50%; -} - -.badge-lime { - --background-color: var(--ig-success-700); - --border-radius: 50%; -} - -.badge-styling { - display: flex; - align-items: center; - justify-content: center; - gap: 60px; - min-height: 7rem; -} - -.styling-item { - position: relative; - display: flex; -} diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html index 4d03b9457..7e83c97fb 100644 --- a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html +++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html @@ -1,18 +1,11 @@ -
-
- - -
-
- - -
-
- - -
-
- - -
-
+ + + + + + + + + + + diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss index 50ceb5330..b44ac48cc 100644 --- a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss +++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss @@ -1,15 +1,34 @@ -@use "layout.scss"; +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +$anchors: close, volume, remove, check; + +:host { + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(48px); + min-height: 7rem; +} igx-badge { --ig-size: var(--ig-size-small); -} -igx-avatar { - --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -:host ::ng-deep igx-avatar igx-icon { - color: var(--ig-gray-50); +@each $anchor in $anchors { + $i: list.index($anchors, $anchor); + + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$anchor}; + } + + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$anchor}; + } } diff --git a/src/app/data-display/badge/badge-tailwind-styling/layout.scss b/src/app/data-display/badge/badge-tailwind-styling/layout.scss deleted file mode 100644 index e97d2f5aa..000000000 --- a/src/app/data-display/badge/badge-tailwind-styling/layout.scss +++ /dev/null @@ -1,29 +0,0 @@ -.badge-close { - --background-color: var(--ig-error-500); - --border-radius: 50%; -} - -.badge-volume { - --background-color: #8B5BB1; - --border-radius: 50%; -} - -.badge-remove { - --background-color: var(--ig-gray-900); - --border-radius: 50%; -} - -.badge-check { - --background-color: var(--ig-success-600); - --border-radius: 50%; -} - -.badge-style { - position: absolute; - inset-block-end: -4px; - inset-inline-end: -4px; -} - -.badge-parent { - min-height: 7rem; -} diff --git a/src/app/data-display/badge/badge-type/badge-type.component.html b/src/app/data-display/badge/badge-type/badge-type.component.html index 4a3b93a78..3fe3053db 100644 --- a/src/app/data-display/badge/badge-type/badge-type.component.html +++ b/src/app/data-display/badge/badge-type/badge-type.component.html @@ -1,23 +1,11 @@ -
-
-
- - -
- Dot -
-
-
- - -
- Icon -
-
-
- - -
- Text -
-
+ + +Dot + + + +Icon + + + +Text diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss index ece1ac951..9b22c0114 100644 --- a/src/app/data-display/badge/badge-type/badge-type.component.scss +++ b/src/app/data-display/badge/badge-type/badge-type.component.scss @@ -1,48 +1,53 @@ -igx-avatar { - --size: 40px; -} +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -igx-badge { - --ig-size: var(--ig-size-small); - position: absolute; - inset-block-end: -6px; - inset-inline-end: -4px; -} +$types: dot, icon, text; -.badge-type { - display: flex; - align-items: center; - justify-content: center; - gap: 60px; +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(60px); + row-gap: rem(16px); min-height: 8.5rem; + padding: rem(32px); } -.badge-type-item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 16px; - min-width: 56px; - min-height: 72px; +igx-avatar { + --ig-avatar-size: #{rem(40px)}; + + grid-row: 1; } -.avatar-wrapper { - position: relative; - display: flex; +span { + grid-row: 2; + text-align: center; + color: var(--ig-gray-700); + + @include type-style("caption") { + margin: 0; + } } -.dot-badge { - inset-block-end: 0; - inset-inline-end: 0; +igx-badge { + --ig-size: var(--ig-size-small); + + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -.badge-type-item span { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +@each $type in $types { + $i: list.index($types, $type); + + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$type}; + } + + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$type}; + } } diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.html b/src/app/data-display/badge/badge-variants/badge-variants.component.html index 6b03f179d..cd11945f7 100644 --- a/src/app/data-display/badge/badge-variants/badge-variants.component.html +++ b/src/app/data-display/badge/badge-variants/badge-variants.component.html @@ -1,37 +1,19 @@ -
-
-
- - -
- Primary -
-
-
- - -
- Info -
-
-
- - -
- Success -
-
-
- - -
- Warn -
-
-
- - -
- Error -
-
+ + +Primary + + + +Info + + + +Success + + + +Warn + + + +Error diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss index 8145cf26b..7cbd9ac60 100644 --- a/src/app/data-display/badge/badge-variants/badge-variants.component.scss +++ b/src/app/data-display/badge/badge-variants/badge-variants.component.scss @@ -1,47 +1,51 @@ -igx-badge { - --ig-size: var(--ig-size-small); - position: absolute; - inset-block-end: -4px; - inset-inline-end: -4px; +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +$variants: primary, info, success, warning, error; + +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(40px); + row-gap: rem(12px); + min-height: 8.5rem; + padding: rem(32px); } igx-avatar { - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + grid-row: 1; } -:host ::ng-deep .variant-item:first-child igx-avatar igx-icon, -:host ::ng-deep .variant-item:nth-child(4) igx-avatar igx-icon { - color: var(--ig-gray-50); -} +span { + grid-row: 2; + text-align: center; + color: var(--ig-gray-700); -.badge-variants { - display: flex; - align-items: center; - justify-content: center; - gap: 40px; - min-height: 8.5rem; + @include type-style("body-2") { + margin: 0; + } } -.variant-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - min-width: 56px; -} +igx-badge { + --ig-size: var(--ig-size-small); -.variant-item span { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -.avatar-wrapper { - position: relative; - display: flex; +@each $variant in $variants { + $i: list.index($variants, $variant); + + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$variant}; + } + + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$variant}; + } } diff --git a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html index e4b1ef8ff..9f7dd3a84 100644 --- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html +++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html @@ -1,56 +1,51 @@ -
+ + + + + + + + + + + +
+ + - - - - - - - - - - - - - - - - - - + + + +
+ diff --git a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss index fbf75d273..6ee88140a 100644 --- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss +++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss @@ -1,47 +1,40 @@ -.avatar-overview-sample { +@use "igniteui-theming/sass/typography" as *; + +:host { display: flex; + flex-wrap: wrap; align-items: center; justify-content: center; - gap: 90px; - width: 100%; - min-height: 100vh; + gap: rem(100px); + height: 100vh; + padding: rem(32px); } -.avatar-with-badge { - position: relative; - display: inline-flex; +.profile-status { + anchor-name: --profile-status; } -.avatar-status { +.status-badge { position: absolute; - right: 6px; - bottom: 6px; + position-anchor: --profile-status; + inset-block-start: anchor(85%); + inset-inline-start: anchor(85%); + translate: -50% -50%; } .avatar-stack { - display: inline-flex; - align-items: center; -} - -.avatar-stack .size-large { - margin-left: -24px; -} + display: flex; -.avatar-stack .size-large:first-child { - margin-left: 0; -} + igx-avatar { + box-shadow: 0 0 0 rem(6px) var(--ig-surface-500); -.avatar-stack .igx-avatar { - border: 4px solid #fff; - box-sizing: border-box; -} - -.avatar-stack .size-large:last-child { - --ig-avatar-background: #e8eef6; - --ig-avatar-color: #6f8097; -} + + igx-avatar { + margin-inline-start: rem(-24px); + } -.avatar-stack .size-large:last-child .igx-avatar__initials { - font-size: 32px; - font-weight: 500; + &:last-child { + --ig-avatar-background: #e8eef6; + --ig-avatar-color: #6f8097; + } + } } diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html index 88c355153..261085c24 100644 --- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html +++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html @@ -1,56 +1,42 @@ -
-
- - - - - - - Circle -
+ + + + + +Circle -
- - - - - - 2 - - - Square -
+ + + + + + 2 + +Square -
- - - - - - - - Rounded -
-
+ + + + + + +Rounded diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss index 78ac1f205..a6a47666f 100644 --- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss +++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss @@ -1,48 +1,52 @@ -.avatar-shape-sample { - display: flex; - align-items: center; - justify-content: center; - gap: 90px; - min-height: 100vh; +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +$avatars: circle, square, rounded; + +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(40px); + row-gap: rem(8px); + height: 100vh; + padding: rem(32px); } -.avatar-variant { - display: inline-flex; - flex-direction: column; - align-items: center; - gap: 8px; +igx-avatar { + grid-row: 1; } -.avatar-label { +span { + grid-row: 2; + text-align: center; color: var(--ig-gray-600); - font-size: 0.875rem; - line-height: 1.25rem; -} -.avatar-with-badge { - position: relative; - display: inline-flex; + @include type-style("body-1") { + margin: 0; + }; } -.avatar-status { - --size: 18px; +igx-badge { + --ig-size: var(--ig-size-small); + position: absolute; - right: -4px; - bottom: -4px; - font-size: 0.75rem; - line-height: 1; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -.avatar-dot-badge { - --size: 12px; - right: 3px; - bottom: 3px; -} +// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to. +@each $avatar in $avatars { + $i: list.index($avatars, $avatar); -.avatar-count-badge { - --ig-badge-text-color: #ffffff; -} + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$avatar}; + } -.avatar-check-badge { - --ig-badge-icon-color: #ffffff; + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$avatar}; + } } diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.html b/src/app/layouts/avatar/avatar-size/avatar-size.component.html index 5b16e53d1..be7a2c62b 100644 --- a/src/app/layouts/avatar/avatar-size/avatar-size.component.html +++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.html @@ -1,61 +1,41 @@ -
-
- - - - - - - - - Large -
+ + + + + +Large -
- - - - - - - - - Medium -
+ + + + + +Medium -
- - - - - - - - - Small -
-
+ + + + + +Small diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss index 5d2dcdb74..79f4204bb 100644 --- a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss +++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss @@ -1,69 +1,51 @@ -.avatar-size-sample { - display: flex; - align-items: center; - justify-content: center; - gap: 90px; - min-height: 100vh; -} - -.avatar-size { - display: inline-flex; - flex-direction: column; - align-items: center; - gap: 8px; -} +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -.avatar-frame { - display: inline-flex; - align-items: center; - justify-content: center; +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(48px); + row-gap: rem(8px); + height: 100vh; + padding: rem(32px); } -.avatar-frame-large { - width: 72px; - height: 72px; +igx-avatar { + grid-row: 1; } -.avatar-frame-medium { - width: 72px; - height: 72px; -} - -.avatar-frame-small { - width: 72px; - height: 72px; -} - -.avatar-label { +span { + grid-row: 2; + text-align: center; color: var(--ig-gray-600); - font-size: 0.875rem; - line-height: 1.25rem; -} -.avatar-with-badge { - position: relative; - display: inline-flex; + @include type-style("body-1") { + margin: 0; + }; } -.avatar-status { +igx-badge { position: absolute; - line-height: 1; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -.avatar-dot-badge-large { - --size: 16px; - right: 3px; - bottom: 3px; -} +$avatars: large, medium, small; -.avatar-dot-badge-medium { - --size: 14px; - right: 2px; - bottom: 2px; -} +// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to. +@each $avatar in $avatars { + $i: list.index($avatars, $avatar); + + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$avatar}; + } -.avatar-dot-badge-small { - --size: 12px; - right: 1px; - bottom: 1px; + igx-badge:nth-of-type(#{$i}) { + --ig-size: var(--ig-size-#{$avatar}); + position-anchor: --#{$avatar}; + } } diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html index 07510f6c3..758148130 100644 --- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html +++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html @@ -1,71 +1,67 @@ -
- - Chats + + Chats - -
- - - - - -
-

Nick Evans

- Hi Samira, thanks for the ... - 9:44 AM - + +
+ + + + + +
+

Nick Evans

+ Hi Samira, thanks for the ... + 9:44 AM + - -
- - - - -
-

James Ford

- I'll send the text and im ... - 8:30 AM - + +
+ + + + +
+

James Ford

+ I'll send the text and im ... + 8:30 AM + - -
- - - - - -
-

Kate Porter

- That's great! - Yesterday - + +
+ + + + + +
+

Kate Porter

+ That's great! + Yesterday + - Meetings + Meetings - - - - -

Weekly Meeting

- https://www.infra.com - Monday - + + + + +

Weekly Meeting

+ https://www.infra.com + Monday + - - - - -

Design Discussion

- https://www.infra.com - 11:30 AM - - -
+ + + + +

Design Discussion

+ https://www.infra.com + 11:30 AM + + diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss index 13d20bb3f..e4e2886f9 100644 --- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss +++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss @@ -1,35 +1,40 @@ -.avatar-styling-sample { +@use "igniteui-theming/sass/typography" as *; + +:host { display: flex; align-items: center; justify-content: center; + height: 100vh; } -.chat-list { - width: 344px; - max-width: 100%; +igx-list { + --ig-list-border-width: #{rem(1px)}; + --ig-list-border-color: var(--ig-gray-300); + --ig-list-header-text-color: var(--ig-gray-900); + + max-width: rem(328px); } -.size-small { - --ig-size: var(--ig-size-small); +igx-avatar { + --ig-avatar-background: var(--ig-gray-300); + --ig-avatar-color: var(--ig-gray-300-contrast); } .avatar-with-badge { position: relative; - display: inline-flex; +} + +igx-badge { + --ig-size: var(--ig-size-small); } .avatar-status { - --ig-badge-icon-color: #ffffff; position: absolute; - right: -4px; - bottom: -4px; + inset-inline-end: rem(-4px); + inset-block-end: rem(-4px); } .avatar-muted-badge { --ig-badge-background-color: var(--ig-gray-300); - --ig-badge-icon-color: var(--ig-gray-700); -} - -.avatar-muted { - --ig-avatar-background: #D2DBE8; + --ig-badge-icon-color: var(--ig-gray-300-contrast); } diff --git a/src/app/layouts/avatar/avatar-styling/layout.scss b/src/app/layouts/avatar/avatar-styling/layout.scss deleted file mode 100644 index d3a420849..000000000 --- a/src/app/layouts/avatar/avatar-styling/layout.scss +++ /dev/null @@ -1,4 +0,0 @@ -:host { - display: inline-flex; - gap: 32px -} diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html index 79cd59492..d4fff12c1 100644 --- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html +++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html @@ -1,111 +1,105 @@ -
- - - Cafe interior - + + + Cafe interior + + + + + Kate Thompson +

3D Artist. Turning polygons into worlds and immersive digital realities

- + + +
+ @for (stat of profileStats; track stat.label; let isLast = $last) { +
+ {{ stat.value }} + {{ stat.label }} +
+ @if (!isLast) { + + } + } +
+ + + +
+ + + +
+ + + + + + - Kate Thompson - - - -

3D Artist. Turning polygons into worlds and immersive digital realities

-
- @for (stat of profileStats; track stat.label; let isLast = $last) { -
- {{ stat.value }} - {{ stat.label }} -
- @if (!isLast) { - - } + + Kate Thompson +

3D Artist. Turning polygons into worlds and immersive digital realities

+ + +
+ @for (stat of profileStats; track stat.label; let isLast = $last) { +
+ {{ stat.value }} + {{ stat.label }} +
+ @if (!isLast) { + } -
- - - - -
- - - -
- - - - - - - - + } +
+ + + +
+ + -
- - - -
- - -
+ +
+ + + diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss index 7f26ddcb5..ea7083981 100644 --- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss +++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss @@ -1,3 +1,36 @@ +@use "igniteui-theming/sass/typography" as *; + :host { + display: grid; + grid-template-columns: repeat(auto-fit, rem(344px)); + gap: rem(40px); + place-content: center; + height: 100vh; +} + +igx-card:nth-of-type(2) { + align-self: center; +} + +.card-sample-custom-subtitle { display: block; + color: var(--ig-gray-700); + + @include type-style("body-2") { + margin-block-start: rem(8px); + }; +} + +.stats-title { + color: var(--ig-gray-900); + + @include type-style("subtitle-1") { + font-weight: 600; + }; +} + +.stats-subtitle { + color: var(--ig-gray-500); + + @include type-style("body-2"); } diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html index 438406536..6ac275898 100644 --- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html +++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html @@ -1,56 +1,44 @@ -
-
- - - - - - - Image -
+ + + + + +Image -
- - - - - - 2 - - - Icon -
+ + + + + + 2 + +Icon + + + + + + + +Initials -
- - - - - - - - Initials -
-
diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss index 355ff7df2..a4c56b17f 100644 --- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss +++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss @@ -1,48 +1,53 @@ -.avatar-variants-sample { - display: flex; - align-items: center; - justify-content: center; - gap: 90px; - min-height: 100vh; +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +$avatars: circle, square, rounded; + +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(48px); + row-gap: rem(8px); + height: 100vh; + padding: rem(32px); } -.avatar-variant { - display: inline-flex; - flex-direction: column; - align-items: center; - gap: 8px; +// :where() keeps the sample's own rules at zero +:where(igx-avatar) { + grid-row: 1; } -.avatar-label { +:where(span) { + grid-row: 2; + text-align: center; color: var(--ig-gray-600); - font-size: 0.875rem; - line-height: 1.25rem; -} -.avatar-with-badge { - position: relative; - display: inline-flex; + @include type-style("body-1") { + margin: 0; + }; } -.avatar-status { - --size: 18px; +:where(igx-badge) { + --ig-size: var(--ig-size-small); + position: absolute; - right: -4px; - bottom: -4px; - font-size: 0.75rem; - line-height: 1; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -.avatar-dot-badge { - --size: 12px; - right: 3px; - bottom: 3px; -} +// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to. +@each $avatar in $avatars { + $i: list.index($avatars, $avatar); -.avatar-count-badge { - --ig-badge-text-color: #ffffff; -} + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$avatar}; + } -.avatar-check-badge { - --ig-badge-icon-color: #ffffff; + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$avatar}; + } }