From 6a0626abf9d1ae17272673b1f302bcaae6132954 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 20 Aug 2026 13:36:27 +0300 Subject: [PATCH 1/6] refactor(avatar): simplify and update avatar samples with grid layout and consistent styling --- .../avatar-overview.component.html | 95 ++++----- .../avatar-overview.component.scss | 60 +++--- .../avatar-shape/avatar-shape.component.html | 98 ++++----- .../avatar-shape/avatar-shape.component.scss | 113 ++++++---- .../avatar-size/avatar-size.component.html | 98 ++++----- .../avatar-size/avatar-size.component.scss | 125 ++++++----- .../avatar-styling.component.html | 128 ++++++----- .../avatar-styling.component.scss | 40 ++-- .../layouts/avatar/avatar-styling/layout.scss | 4 - .../avatar-tailwind-styling.component.html | 198 +++++++++--------- .../avatar-tailwind-styling.component.scss | 33 +++ .../avatar-variants.component.html | 96 ++++----- .../avatar-variants.component.scss | 93 +++++--- 13 files changed, 616 insertions(+), 565 deletions(-) delete mode 100644 src/app/layouts/avatar/avatar-styling/layout.scss 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..8d41b7afb 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,39 @@ -.avatar-overview-sample { +:host { display: flex; - align-items: center; - justify-content: center; - gap: 90px; - width: 100%; - min-height: 100vh; + place-items: center; + gap: 2rem; + flex-wrap: wrap; + max-width: fit-content; + margin: 0 auto; + height: 100vh; + padding: 2rem; } -.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; -} - -.avatar-stack .size-large:first-child { - margin-left: 0; -} + display: flex; -.avatar-stack .igx-avatar { - border: 4px solid #fff; - box-sizing: border-box; -} + > igx-avatar:not(:first-child) { + margin-left: -24px; + } -.avatar-stack .size-large:last-child { - --ig-avatar-background: #e8eef6; - --ig-avatar-color: #6f8097; -} + > *:last-child { + --ig-avatar-background: #e8eef6; + --ig-avatar-color: #6f8097; + } -.avatar-stack .size-large:last-child .igx-avatar__initials { - font-size: 32px; - font-weight: 500; + igx-avatar { + box-shadow: 0 0 0 .4rem var(--ig-surface-500); + } } 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..dcb5aa753 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,46 @@ -
-
- - - - - - - 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..565ec1bae 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,81 @@ -.avatar-shape-sample { - display: flex; - align-items: center; - justify-content: center; - gap: 90px; - min-height: 100vh; -} +@use "igniteui-theming/sass/typography" as *; -.avatar-variant { - display: inline-flex; - flex-direction: column; - align-items: center; - gap: 8px; -} +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + justify-items: center; + place-content: center; + column-gap: rem(40px); + row-gap: rem(8px); + flex-wrap: wrap; + max-width: fit-content; + margin: 0 auto; + height: 100vh; + padding: rem(32px); -.avatar-label { - color: var(--ig-gray-600); - font-size: 0.875rem; - line-height: 1.25rem; -} + igx-avatar { + grid-row: 1; + } -.avatar-with-badge { - position: relative; - display: inline-flex; -} + span { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-size: var(--ig-detail-1-font-size); + font-weight: var(--ig-detail-1-font-weight); + font-style: var(--ig-detail-1-font-style); + line-height: var(--ig-detail-1-line-height); + letter-spacing: var(--ig-detail-1-letter-spacing); + text-transform: var(--ig-detail-1-text-transform); + } -.avatar-status { - --size: 18px; - position: absolute; - right: -4px; - bottom: -4px; - font-size: 0.75rem; - line-height: 1; -} + igx-avatar:nth-of-type(1) { + grid-column: 1; + anchor-name: --circle-anchor; + } -.avatar-dot-badge { - --size: 12px; - right: 3px; - bottom: 3px; -} + igx-avatar:nth-of-type(2) { + grid-column: 2; + anchor-name: --square-anchor; + } -.avatar-count-badge { - --ig-badge-text-color: #ffffff; -} + igx-avatar:nth-of-type(3) { + grid-column: 3; + anchor-name: --rounded-anchor; + } + + span:nth-of-type(1) { + grid-column: 1; + } -.avatar-check-badge { - --ig-badge-icon-color: #ffffff; + span:nth-of-type(2) { + grid-column: 2; + } + + span:nth-of-type(3) { + grid-column: 3; + } + + 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%; + } + + igx-badge:nth-of-type(1) { + position-anchor: --circle-anchor; + } + + igx-badge:nth-of-type(2) { + position-anchor: --square-anchor; + } + + igx-badge:nth-of-type(3) { + position-anchor: --rounded-anchor; + } } + 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..eb0196e66 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,82 @@ -.avatar-size-sample { - display: flex; - align-items: center; - justify-content: center; - gap: 90px; - min-height: 100vh; -} +@use "igniteui-theming/sass/typography" as *; -.avatar-size { - display: inline-flex; - flex-direction: column; +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + justify-items: center; align-items: center; - gap: 8px; -} + place-content: center; + column-gap: rem(48px); + row-gap: rem(8px); + flex-wrap: wrap; + max-width: fit-content; + margin: 0 auto; + height: 100vh; + padding: rem(32px); -.avatar-frame { - display: inline-flex; - align-items: center; - justify-content: center; -} + igx-avatar { + grid-row: 1; + } -.avatar-frame-large { - width: 72px; - height: 72px; -} + span { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-size: var(--ig-detail-1-font-size); + font-weight: var(--ig-detail-1-font-weight); + font-style: var(--ig-detail-1-font-style); + line-height: var(--ig-detail-1-line-height); + letter-spacing: var(--ig-detail-1-letter-spacing); + text-transform: var(--ig-detail-1-text-transform); + } -.avatar-frame-medium { - width: 72px; - height: 72px; -} + igx-avatar:nth-of-type(1) { + grid-column: 1; + anchor-name: --circle-anchor; + } -.avatar-frame-small { - width: 72px; - height: 72px; -} + igx-avatar:nth-of-type(2) { + grid-column: 2; + anchor-name: --square-anchor; + } -.avatar-label { - color: var(--ig-gray-600); - font-size: 0.875rem; - line-height: 1.25rem; -} + igx-avatar:nth-of-type(3) { + grid-column: 3; + anchor-name: --rounded-anchor; + } -.avatar-with-badge { - position: relative; - display: inline-flex; -} + span:nth-of-type(1) { + grid-column: 1; + } -.avatar-status { - position: absolute; - line-height: 1; -} + span:nth-of-type(2) { + grid-column: 2; + } -.avatar-dot-badge-large { - --size: 16px; - right: 3px; - bottom: 3px; -} + span:nth-of-type(3) { + grid-column: 3; + } -.avatar-dot-badge-medium { - --size: 14px; - right: 2px; - bottom: 2px; -} + igx-badge { + --ig-size: var(--ig-size-small); -.avatar-dot-badge-small { - --size: 12px; - right: 1px; - bottom: 1px; + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; + } + + igx-badge:nth-of-type(1) { + position-anchor: --circle-anchor; + } + + igx-badge:nth-of-type(2) { + position-anchor: --square-anchor; + } + + igx-badge:nth-of-type(3) { + position-anchor: --rounded-anchor; + } } + 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..e7e7ef090 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,69 @@ -
- - 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..8001ff67f 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,43 @@ -.avatar-styling-sample { +:host { display: flex; align-items: center; justify-content: center; + height: 100vh; + + igx-badge { + --ig-size: var(--ig-size-small); + } + + igx-avatar { + --background: var(--ig-gray-300); + --color: var(--ig-gray-300-contrast); + } + + igx-avatar.avatar-muted { + --background: var(--ig-gray-800); + --color: var(--ig-gray-800-contrast); + } } .chat-list { - width: 344px; - max-width: 100%; -} + --border-width: #{rem(1px)}; + --border-color: var(--ig-gray-300); + --header-text-color: var(--ig-gray-900); -.size-small { - --ig-size: var(--ig-size-small); + max-width: rem(328px); } .avatar-with-badge { position: relative; - display: inline-flex; } .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; + --background-color: var(--ig-gray-300); + --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..4b6e8be4d 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..58ea36566 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,79 @@ -.avatar-variants-sample { - display: flex; - align-items: center; - justify-content: center; - gap: 90px; - min-height: 100vh; +@use "igniteui-theming/sass/typography" as *; + +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + justify-items: center; + place-content: center; + column-gap: rem(48px); + row-gap: rem(8px); + flex-wrap: wrap; + max-width: fit-content; + margin: 0 auto; + 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; + font-size: var(--ig-detail-1-font-size); + font-weight: var(--ig-detail-1-font-weight); + font-style: var(--ig-detail-1-font-style); + line-height: var(--ig-detail-1-line-height); + letter-spacing: var(--ig-detail-1-letter-spacing); + text-transform: var(--ig-detail-1-text-transform); +} + +igx-avatar:nth-of-type(1) { + grid-column: 1; + anchor-name: --circle-anchor; +} + +igx-avatar:nth-of-type(2) { + grid-column: 2; + anchor-name: --square-anchor; +} + +igx-avatar:nth-of-type(3) { + grid-column: 3; + anchor-name: --rounded-anchor; +} + +span:nth-of-type(1) { + grid-column: 1; +} + +span:nth-of-type(2) { + grid-column: 2; } -.avatar-with-badge { - position: relative; - display: inline-flex; +span:nth-of-type(3) { + grid-column: 3; } -.avatar-status { - --size: 18px; +igx-badge { + --ig-size: 1; 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; +igx-badge:nth-of-type(1) { + position-anchor: --circle-anchor; } -.avatar-count-badge { - --ig-badge-text-color: #ffffff; +igx-badge:nth-of-type(2) { + position-anchor: --square-anchor; } -.avatar-check-badge { - --ig-badge-icon-color: #ffffff; +igx-badge:nth-of-type(3) { + position-anchor: --rounded-anchor; } From 22b2bc7d2cc3d3cbec287ec4a6837e2c814ee830 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 20 Aug 2026 14:25:42 +0300 Subject: [PATCH 2/6] refactor(avatar): enhance layout and styling for avatar components --- .../avatar-overview.component.scss | 29 +++--- .../avatar-shape/avatar-shape.component.html | 10 +- .../avatar-shape/avatar-shape.component.scss | 90 +++++++----------- .../avatar-size/avatar-size.component.scss | 92 +++++++------------ .../avatar-styling.component.scss | 32 ++++--- .../avatar-variants.component.scss | 68 +++++--------- 6 files changed, 119 insertions(+), 202 deletions(-) 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 8d41b7afb..6f1aecb3f 100644 --- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss +++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss @@ -1,12 +1,13 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; - place-items: center; - gap: 2rem; flex-wrap: wrap; - max-width: fit-content; - margin: 0 auto; + align-items: center; + justify-content: center; + gap: rem(32px); height: 100vh; - padding: 2rem; + padding: rem(32px); } .profile-status { @@ -24,16 +25,16 @@ .avatar-stack { display: flex; - > igx-avatar:not(:first-child) { - margin-left: -24px; - } + igx-avatar { + box-shadow: 0 0 0 rem(6px) var(--ig-surface-500); - > *:last-child { - --ig-avatar-background: #e8eef6; - --ig-avatar-color: #6f8097; - } + + igx-avatar { + margin-inline-start: rem(-24px); + } - igx-avatar { - box-shadow: 0 0 0 .4rem var(--ig-surface-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 dcb5aa753..261085c24 100644 --- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html +++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html @@ -6,12 +6,11 @@ alt="A profile photo of a man."> -Circle +Circle 2 -Square +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 565ec1bae..07248577e 100644 --- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss +++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss @@ -1,81 +1,53 @@ +@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; - justify-items: center; place-content: center; + place-items: center; column-gap: rem(40px); row-gap: rem(8px); - flex-wrap: wrap; - max-width: fit-content; - margin: 0 auto; height: 100vh; padding: rem(32px); +} - igx-avatar { - grid-row: 1; - } - - span { - grid-row: 2; - text-align: center; - color: var(--ig-gray-600); - font-size: var(--ig-detail-1-font-size); - font-weight: var(--ig-detail-1-font-weight); - font-style: var(--ig-detail-1-font-style); - line-height: var(--ig-detail-1-line-height); - letter-spacing: var(--ig-detail-1-letter-spacing); - text-transform: var(--ig-detail-1-text-transform); - } - - igx-avatar:nth-of-type(1) { - grid-column: 1; - anchor-name: --circle-anchor; - } - - igx-avatar:nth-of-type(2) { - grid-column: 2; - anchor-name: --square-anchor; - } - - igx-avatar:nth-of-type(3) { - grid-column: 3; - anchor-name: --rounded-anchor; - } - - span:nth-of-type(1) { - grid-column: 1; - } +// :where() keeps the sample's own rules at zero specificity +:where(igx-avatar) { + grid-row: 1; +} - span:nth-of-type(2) { - grid-column: 2; - } +:where(span) { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); - span:nth-of-type(3) { - grid-column: 3; - } + @include type-style("body-1") { + margin: 0; + }; +} - igx-badge { - --ig-size: var(--ig-size-small); +:where(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%; - } + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} - igx-badge:nth-of-type(1) { - position-anchor: --circle-anchor; - } +// 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-badge:nth-of-type(2) { - position-anchor: --square-anchor; + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$avatar}; } - igx-badge:nth-of-type(3) { - position-anchor: --rounded-anchor; + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$avatar}; } } - 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 eb0196e66..c90c29010 100644 --- a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss +++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss @@ -1,82 +1,52 @@ +@use "sass:list"; @use "igniteui-theming/sass/typography" as *; +$avatars: large, medium, small; + :host { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; - justify-items: center; - align-items: center; place-content: center; + place-items: center; column-gap: rem(48px); row-gap: rem(8px); - flex-wrap: wrap; - max-width: fit-content; - margin: 0 auto; height: 100vh; padding: rem(32px); +} - igx-avatar { - grid-row: 1; - } - - span { - grid-row: 2; - text-align: center; - color: var(--ig-gray-600); - font-size: var(--ig-detail-1-font-size); - font-weight: var(--ig-detail-1-font-weight); - font-style: var(--ig-detail-1-font-style); - line-height: var(--ig-detail-1-line-height); - letter-spacing: var(--ig-detail-1-letter-spacing); - text-transform: var(--ig-detail-1-text-transform); - } - - igx-avatar:nth-of-type(1) { - grid-column: 1; - anchor-name: --circle-anchor; - } - - igx-avatar:nth-of-type(2) { - grid-column: 2; - anchor-name: --square-anchor; - } - - igx-avatar:nth-of-type(3) { - grid-column: 3; - anchor-name: --rounded-anchor; - } - - span:nth-of-type(1) { - grid-column: 1; - } - - span:nth-of-type(2) { - grid-column: 2; - } +// :where() keeps the sample's own rules at zero specificity +:where(igx-avatar) { + grid-row: 1; +} - span:nth-of-type(3) { - grid-column: 3; - } +:where(span) { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); - igx-badge { - --ig-size: var(--ig-size-small); + @include type-style("body-1") { + margin: 0; + }; +} - position: absolute; - inset-block-start: anchor(85.5%); - inset-inline-start: anchor(85.5%); - translate: -50% -50%; - } +:where(igx-badge) { + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} - igx-badge:nth-of-type(1) { - position-anchor: --circle-anchor; - } +// 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-badge:nth-of-type(2) { - position-anchor: --square-anchor; + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$avatar}; } - igx-badge:nth-of-type(3) { - position-anchor: --rounded-anchor; + 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.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss index 8001ff67f..4fb4529f0 100644 --- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss +++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss @@ -1,22 +1,10 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; align-items: center; justify-content: center; height: 100vh; - - igx-badge { - --ig-size: var(--ig-size-small); - } - - igx-avatar { - --background: var(--ig-gray-300); - --color: var(--ig-gray-300-contrast); - } - - igx-avatar.avatar-muted { - --background: var(--ig-gray-800); - --color: var(--ig-gray-800-contrast); - } } .chat-list { @@ -27,10 +15,26 @@ max-width: rem(328px); } +// :where() drops this to zero specificity, so .avatar-muted below overrides it +// without needing a longer selector to outrank it. +:where(igx-avatar) { + --background: var(--ig-gray-300); + --color: var(--ig-gray-300-contrast); +} + +.avatar-muted { + --background: var(--ig-gray-800); + --color: var(--ig-gray-800-contrast); +} + .avatar-with-badge { position: relative; } +:where(igx-badge) { + --ig-size: var(--ig-size-small); +} + .avatar-status { position: absolute; inset-inline-end: rem(-4px); 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 58ea36566..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,79 +1,53 @@ +@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; - justify-items: center; place-content: center; + place-items: center; column-gap: rem(48px); row-gap: rem(8px); - flex-wrap: wrap; - max-width: fit-content; - margin: 0 auto; height: 100vh; padding: rem(32px); } -igx-avatar { +// :where() keeps the sample's own rules at zero +:where(igx-avatar) { grid-row: 1; } -span { +:where(span) { grid-row: 2; text-align: center; color: var(--ig-gray-600); - font-size: var(--ig-detail-1-font-size); - font-weight: var(--ig-detail-1-font-weight); - font-style: var(--ig-detail-1-font-style); - line-height: var(--ig-detail-1-line-height); - letter-spacing: var(--ig-detail-1-letter-spacing); - text-transform: var(--ig-detail-1-text-transform); -} - -igx-avatar:nth-of-type(1) { - grid-column: 1; - anchor-name: --circle-anchor; -} -igx-avatar:nth-of-type(2) { - grid-column: 2; - anchor-name: --square-anchor; + @include type-style("body-1") { + margin: 0; + }; } -igx-avatar:nth-of-type(3) { - grid-column: 3; - anchor-name: --rounded-anchor; -} - -span:nth-of-type(1) { - grid-column: 1; -} +:where(igx-badge) { + --ig-size: var(--ig-size-small); -span:nth-of-type(2) { - grid-column: 2; -} - -span:nth-of-type(3) { - grid-column: 3; -} - -igx-badge { - --ig-size: 1; position: absolute; inset-block-start: anchor(85.5%); inset-inline-start: anchor(85.5%); translate: -50% -50%; } -igx-badge:nth-of-type(1) { - position-anchor: --circle-anchor; -} +// 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-badge:nth-of-type(2) { - position-anchor: --square-anchor; -} + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$avatar}; + } -igx-badge:nth-of-type(3) { - position-anchor: --rounded-anchor; + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$avatar}; + } } From a31f76b1d68026c3ff93cb96e6ca1fe97b001b60 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 20 Aug 2026 15:56:26 +0300 Subject: [PATCH 3/6] refactor(avatar): adjust layout gap and simplify styling for avatar components --- .../avatar-overview/avatar-overview.component.scss | 2 +- .../avatar-styling/avatar-styling.component.scss | 11 ++--------- 2 files changed, 3 insertions(+), 10 deletions(-) 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 6f1aecb3f..6ee88140a 100644 --- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss +++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss @@ -5,7 +5,7 @@ flex-wrap: wrap; align-items: center; justify-content: center; - gap: rem(32px); + gap: rem(100px); height: 100vh; padding: rem(32px); } 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 4fb4529f0..5b7b55532 100644 --- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss +++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss @@ -15,23 +15,16 @@ max-width: rem(328px); } -// :where() drops this to zero specificity, so .avatar-muted below overrides it -// without needing a longer selector to outrank it. -:where(igx-avatar) { +igx-avatar { --background: var(--ig-gray-300); --color: var(--ig-gray-300-contrast); } -.avatar-muted { - --background: var(--ig-gray-800); - --color: var(--ig-gray-800-contrast); -} - .avatar-with-badge { position: relative; } -:where(igx-badge) { +igx-badge { --ig-size: var(--ig-size-small); } From 7d4f551a25c566276230f033b031b6c58658e0b7 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 20 Aug 2026 16:44:22 +0300 Subject: [PATCH 4/6] refactor(avatar): simplify and clean up styling across avatar components and samples --- .../avatar-shape/avatar-shape.component.scss | 7 +++---- .../avatar-size/avatar-size.component.scss | 11 +++++------ .../avatar-styling/avatar-styling.component.html | 8 +++----- .../avatar-styling/avatar-styling.component.scss | 16 ++++++++-------- .../avatar-tailwind-styling.component.html | 2 +- 5 files changed, 20 insertions(+), 24 deletions(-) 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 07248577e..a6a47666f 100644 --- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss +++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss @@ -15,12 +15,11 @@ $avatars: circle, square, rounded; padding: rem(32px); } -// :where() keeps the sample's own rules at zero specificity -:where(igx-avatar) { +igx-avatar { grid-row: 1; } -:where(span) { +span { grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -30,7 +29,7 @@ $avatars: circle, square, rounded; }; } -:where(igx-badge) { +igx-badge { --ig-size: var(--ig-size-small); position: absolute; 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 c90c29010..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,8 +1,6 @@ @use "sass:list"; @use "igniteui-theming/sass/typography" as *; -$avatars: large, medium, small; - :host { display: grid; grid-auto-flow: column; @@ -15,12 +13,11 @@ $avatars: large, medium, small; padding: rem(32px); } -// :where() keeps the sample's own rules at zero specificity -:where(igx-avatar) { +igx-avatar { grid-row: 1; } -:where(span) { +span { grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -30,13 +27,15 @@ $avatars: large, medium, small; }; } -:where(igx-badge) { +igx-badge { position: absolute; inset-block-start: anchor(85.5%); inset-inline-start: anchor(85.5%); translate: -50% -50%; } +$avatars: large, medium, small; + // 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); 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 e7e7ef090..758148130 100644 --- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html +++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html @@ -4,7 +4,6 @@
@@ -20,7 +19,7 @@
- + @@ -33,7 +32,6 @@
@@ -50,7 +48,7 @@ Meetings - +

Weekly Meeting

@@ -59,7 +57,7 @@ - +

Design Discussion

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 5b7b55532..e4e2886f9 100644 --- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss +++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss @@ -7,17 +7,17 @@ height: 100vh; } -.chat-list { - --border-width: #{rem(1px)}; - --border-color: var(--ig-gray-300); - --header-text-color: var(--ig-gray-900); +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); } igx-avatar { - --background: var(--ig-gray-300); - --color: var(--ig-gray-300-contrast); + --ig-avatar-background: var(--ig-gray-300); + --ig-avatar-color: var(--ig-gray-300-contrast); } .avatar-with-badge { @@ -35,6 +35,6 @@ igx-badge { } .avatar-muted-badge { - --background-color: var(--ig-gray-300); - --icon-color: var(--ig-gray-300-contrast); + --ig-badge-background-color: var(--ig-gray-300); + --ig-badge-icon-color: var(--ig-gray-300-contrast); } 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 4b6e8be4d..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 @@ -75,7 +75,7 @@ {{ stat.label }}
@if (!isLast) { - + } }
From 25b94ec01fdec0dfbdb0bf6c9b02b7e4e246bfae Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 24 Aug 2026 11:08:49 +0300 Subject: [PATCH 5/6] refactor(badge): streamline badge components and enhance styling consistency --- live-editing/configs/BadgeConfigGenerator.ts | 2 +- .../badge/badge-dot/badge-dot.component.html | 80 +++++----- .../badge/badge-dot/badge-dot.component.scss | 121 ++++++++------- .../badge-icon/badge-icon.component.html | 25 +--- .../badge-icon/badge-icon.component.scss | 76 ++++------ .../badge-outlined.component.html | 42 ++---- .../badge-outlined.component.scss | 141 ++++++------------ .../badge-outlined.component.ts | 10 +- .../badge-overview.component.html | 34 ++--- .../badge-overview.component.scss | 78 ++++------ .../badge-shape/badge-shape.component.html | 23 ++- .../badge-shape/badge-shape.component.scss | 39 ++--- .../badge-size/badge-size.component.html | 34 ++--- .../badge-size/badge-size.component.scss | 41 ++--- .../badge-styling.component.html | 29 ++-- .../badge-styling.component.scss | 72 ++++----- .../badge/badge-styling/layout.scss | 33 ---- .../badge-tailwind-styling.component.html | 29 ++-- .../badge-tailwind-styling.component.scss | 35 ++++- .../badge/badge-tailwind-styling/layout.scss | 29 ---- .../badge-type/badge-type.component.html | 34 ++--- .../badge-type/badge-type.component.scss | 73 +++++---- .../badge-variants.component.html | 56 +++---- .../badge-variants.component.scss | 69 +++++---- 24 files changed, 514 insertions(+), 691 deletions(-) delete mode 100644 src/app/data-display/badge/badge-styling/layout.scss delete mode 100644 src/app/data-display/badge/badge-tailwind-styling/layout.scss 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..759eea111 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,41 @@ -
-
-
- notifications + + 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 8cfe07c79..8dd700b86 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,55 +1,46 @@ -igx-badge { - --ig-size: var(--ig-size-small); -} +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -igx-avatar { - --size: 40px; -} +:host { + --sample-accent: #0057a9; -.icon-example igx-badge, -.avatar-example igx-badge, -.nav-icon igx-badge { - position: absolute; + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(40px); + min-height: 8.5rem; } -.icon-example igx-badge { - inset-block-start: 0; - inset-inline-end: 2px; -} +igx-badge { + --ig-size: var(--ig-size-small); -.avatar-example igx-badge { - inset-block-start: -0.25rem; - inset-inline-end: -2px; + position: absolute; + inset-block-start: anchor(14.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; } -.nav-icon igx-badge { - inset-block-start: -2px; - inset-inline-end: -6px; -} +$anchors: icon, avatar; -.badge-dot { - display: flex; - align-items: center; - justify-content: center; - gap: 40px; - min-height: 8.5rem; -} +@each $anchor in $anchors { + $i: list.index($anchors, $anchor); -.dot-example { - position: relative; + .#{$anchor}-anchor { + anchor-name: --#{$anchor}; + } + + :host > igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$anchor}; + } } -.icon-example, -.avatar-example, .icon-circle { display: flex; align-items: center; - width: 36px; - height: 36px; -} - -.icon-circle { justify-content: center; + width: rem(36px); + height: rem(36px); border-radius: 50%; background: var(--ig-gray-200); color: var(--ig-gray-800); @@ -58,72 +49,78 @@ igx-avatar { .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; + gap: rem(4px); + min-width: rem(56px); color: var(--ig-gray-700); - font-size: 12px; -} -.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 fadf787c8..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,58 +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 *; -.icon-wrapper { - display: flex; - align-items: flex-end; - justify-content: center; - width: 40px; - height: 40px; +: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 > igx-badge { - --ig-size: var(--ig-size-medium); - display: inline-flex; - align-items: center; - justify-content: center; - text-align: center; +igx-avatar { + grid-row: 1; + anchor-name: --avatar; } -.avatar-wrapper igx-badge { - --ig-size: var(--ig-size-small); - position: absolute; - inset-block-start: -4px; - inset-inline-end: -6px; -} +igx-badge { + --ig-size: var(--ig-size-medium); -.badge-icon { - display: flex; - align-items: center; - justify-content: center; - gap: 40px; - min-height: 8.5rem; + grid-row: 1; } -.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 { + grid-row: 2; + text-align: center; color: var(--ig-gray-700); - font-size: 12px; - transform: translateY(4px); } -.avatar-wrapper { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 40px; +igx-badge:last-of-type { + --ig-size: var(--ig-size-small); + + 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 2ff5d8802..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,115 +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: var(--ig-gray-700); - font-size: 13px; +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 917648462..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,26 +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: var(--ig-gray-700); - font-size: 14px; + + @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 59184f81f..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,26 +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: var(--ig-gray-700); - font-size: 14px; + + @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 0479de835..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,44 +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: var(--ig-gray-700); - font-size: 12px; - line-height: 16px; +@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 a53f2b448..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,42 +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: var(--ig-gray-700); - font-size: 13px; + 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}; + } } From d1ed007b061142cbe16c2e7a3d4d2e5d8a87d648 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 24 Aug 2026 11:15:33 +0300 Subject: [PATCH 6/6] refactor(badge, avatar): replace custom icon-circle with igx-avatar and clean up unused styles --- live-editing/configs/AvatarConfigGenerator.ts | 1 - .../badge/badge-dot/badge-dot.component.html | 9 ++++++--- .../badge/badge-dot/badge-dot.component.scss | 11 ----------- 3 files changed, 6 insertions(+), 15 deletions(-) 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/src/app/data-display/badge/badge-dot/badge-dot.component.html b/src/app/data-display/badge/badge-dot/badge-dot.component.html index 759eea111..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,6 +1,9 @@ - - notifications - + +
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 8dd700b86..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 @@ -35,17 +35,6 @@ $anchors: icon, avatar; } } -.icon-circle { - display: flex; - align-items: center; - justify-content: center; - width: rem(36px); - height: rem(36px); - border-radius: 50%; - background: var(--ig-gray-200); - color: var(--ig-gray-800); -} - .notifications-card, .nav-card { background: var(--ig-surface-500);