From 0b30955e031d68735338736745cef9bccd278c33 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Fri, 4 Jul 2025 19:11:55 +0300 Subject: [PATCH 1/9] feat(samples): new styling samples based on design systems --- .../chip-styling/chip-styling.component.html | 27 +- .../chip-styling/chip-styling.component.scss | 42 ++- .../chip-styling/chip-styling.component.ts | 32 +- .../chip/chip-styling/layout.scss | 17 +- .../buttons-style.component.html | 39 +- .../buttons-style.component.scss | 347 ++++++++++++++++-- .../buttons-style/buttons-style.component.ts | 9 +- .../buttons/buttons-style/layout.scss | 37 +- .../checkbox-styling.component.html | 2 +- .../checkbox-styling.component.scss | 26 +- .../checkbox-styling.component.ts | 7 +- .../checkbox/checkbox-styling/layout.scss | 31 +- .../radio/radio-styling-sample/layout.scss | 37 +- .../radio-styling-sample.component.html | 12 +- .../radio-styling-sample.component.scss | 25 +- .../switch/switch-styling/layout.scss | 56 ++- .../switch-styling.component.html | 10 +- .../switch-styling.component.scss | 22 +- .../switch-styling.component.ts | 11 +- .../card-styling-sample.component.html | 59 +-- .../card-styling-sample.component.scss | 56 ++- .../card-styling-sample.component.ts | 34 +- .../card/card-styling-sample/layout.scss | 56 ++- 23 files changed, 804 insertions(+), 190 deletions(-) diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.html b/src/app/data-display/chip/chip-styling/chip-styling.component.html index 7f46d62b8d..af28d21ede 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.html +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.html @@ -1,23 +1,8 @@ - @for (chip of chipList; track chip) { - - {{chip.icon}} - {{chip.text}} - - } + @for (chip of chipList; track chip) { + + + {{chip.text}} + + } - - - check_circle - - - - delete - diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss index 02eda91f02..8cf8371b44 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.scss +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.scss @@ -1,11 +1,37 @@ @use "layout.scss"; -@use "igniteui-angular/theming" as *; -$custom-theme: chip-theme( - $background: #57a5cd, - $selected-background: #ecaa53, - $remove-icon-color: #d81414, - $border-radius: 5px, -); +igx-chip { + --text-color: #fff; + --hover-text-color: #fff; + --focus-text-color: #fff; + --border-radius: 5px; +} -@include css-vars($custom-theme); +igx-chip[id='1'] { + --background: #000; + --hover-background: #000; + --focus-background: #323232; +} + +igx-chip[id='2'] { + --background: #cd201f; + --hover-background: #cd201f; + --focus-background: #9f1717; +} + +igx-chip[id='3']{ + --background: #3b5999; + --hover-background: #3b5999; + --focus-background: #2c4378; +} + +igx-chip[id='4']{ + --background: #55acee; + --hover-background: #55acee; + --focus-background: #4682af; +} + +igx-icon.igx-icon { + width: 0.75rem; + height: 0.75rem; +} \ No newline at end of file diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.ts b/src/app/data-display/chip/chip-styling/chip-styling.component.ts index a50d6de308..80e01a053e 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.ts +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.ts @@ -1,5 +1,5 @@ -import { ChangeDetectorRef, Component, inject } from '@angular/core'; -import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; +import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxIconService } from 'igniteui-angular'; @Component({ @@ -11,31 +11,39 @@ import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, export class ChipStylingSampleComponent { changeDetectionRef = inject(ChangeDetectorRef); + private iconService = inject(IgxIconService) + + public ngOnInit() { + + this.iconService.addSvgIconFromText('twitter', ''); + this.iconService.addSvgIconFromText('youtube', ' '); + this.iconService.addSvgIconFromText('facebook', ''); + this.iconService.addSvgIconFromText('linkedin', ''); + } public chipList = [ { - text: 'Country', - id: '1', - icon: 'place' + text: 'X.com', + id: '1', + icon: 'twitter' }, { - text: 'City', + text: 'Youtube', id: '2', - icon: 'location_city' + icon: 'youtube' }, { - text: 'Town', + text: 'Facebook', id: '3', - icon: 'store' + icon: 'facebook' }, { - text: 'First Name', + text: 'LinkedIn', id: '4', - icon: 'person_pin' + icon: 'linkedin' } ]; - public chipRemoved(event: IBaseChipEventArgs) { this.chipList = this.chipList.filter((item) => item.id !== event.owner.id); this.changeDetectionRef.detectChanges(); diff --git a/src/app/data-display/chip/chip-styling/layout.scss b/src/app/data-display/chip/chip-styling/layout.scss index 619dc177ee..54c0fe03b5 100644 --- a/src/app/data-display/chip/chip-styling/layout.scss +++ b/src/app/data-display/chip/chip-styling/layout.scss @@ -1,4 +1,17 @@ +:host { + ::ng-deep { + igx-chip .igx-chip__item{ + height: 20px; + font-size: 12px; + } + } +} + igx-chip { - margin-right: 5px; - margin-top: 20px; + margin-right: 5px; + margin-top: 20px; +} + +igx-chips-area { + margin-left: 20px; } \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html index 349481f203..7c00350625 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html @@ -1,17 +1,22 @@ -
-
- -
-
- -
-
- -
-
- -
-
- -
-
\ No newline at end of file +@for (item of range; let i = $index; track i) { +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+} \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss index c0b38ce1e9..9bfaabad3f 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss @@ -1,25 +1,324 @@ @use "layout.scss"; -@use "igniteui-angular/theming" as *; - -$custom-contained-theme: contained-button-theme( - $background: #348ae0 -); - -$custom-flat-theme: flat-button-theme( - $foreground: var(--ig-error-800) -); - -$custom-outlined-theme: outlined-button-theme( - $foreground: var(--ig-success-500) -); - -$custom-fab-theme: fab-button-theme( - $background: #ffc506 -); - -.button-sample { - @include css-vars($custom-contained-theme); - @include css-vars($custom-flat-theme); - @include css-vars($custom-outlined-theme); - @include css-vars($custom-fab-theme); -}; \ No newline at end of file + +.buttons-sample-1 .igx-button--contained { + --background: #000; + --hover-background: #000000bf; + --active-background: #000000f2; + --focus-visible-background: #000; + --focus-visible-foreground: #fff; +} + +.buttons-sample-1 .igx-button--outlined { + --foreground: #000000e0; + --border-color: #d9d9d9; + --hover-foreground: #4096ff; + --hover-border-color: #4096ff; + --active-foreground: #0958d9; + --active-border-color: #0958d9; +} + +.buttons-sample-1 .igx-button--flat { + --foreground: #000000e0; + --active-background: #00000026; + --active-foreground: #000000e0; +} + +.buttons-sample-1 .filled .igx-button--flat { + --background: #0000000a; + --hover-background: #0000000f; + --focus-visible-background: #0000000a; +} + +.buttons-sample-1 .filled .igx-button--flat, .buttons-sample-1 .text .igx-button--flat { + --hover-foreground: #000000e0; +} + +.buttons-sample-1 .text .igx-button--flat { + --hover-background: #0000000a; +} + +.buttons-sample-1 .link .igx-button--flat { + --hover-foreground: #69b1ff; + --active-foreground: #0958d9; +} + +.buttons-sample-1 .igx-button--flat, .buttons-sample-1 .igx-button--outlined { + --focus-visible-foreground: #000; +} + +.buttons-sample-1 .igx-button--outlined, .buttons-sample-1 .text .igx-button--flat, .buttons-sample-1 .link .igx-button--flat { + --focus-visible-background: transparent; +} + +.buttons-sample-2 .igx-button--contained { + --background: #1677ff; + --hover-background: #4096ff; + --active-background: #0958d9; + --focus-visible-background: #1677ff; + --focus-visible-foreground: #fff; +} + +.buttons-sample-2 .igx-button--outlined { + --foreground: #1677ff; + --border-color: #1677ff; + --hover-foreground: #4096ff; + --hover-border-color: #4096ff; + --active-foreground: #0958d9; + --active-border-color: #0958d9; +} + +.buttons-sample-2 .filled .igx-button--flat { + --background: #e6f4ff; + --hover-background: #bae0ff; + --hover-foreground: #1677ff; + --active-foreground: #1677ff; + --focus-visible-background: #e6f4ff; +} + +.buttons-sample-2 .filled .igx-button--flat, .buttons-sample-2 .text .igx-button--flat { + --active-background: #91caff; +} + +.buttons-sample-2 .text .igx-button--flat, .buttons-sample-2 .link .igx-button--flat { + --hover-foreground: #4096ff; + --active-foreground: #0958d9; +} + +.buttons-sample-2 .igx-button--flat { + --foreground: #1677ff; +} + +.buttons-sample-2 .text .igx-button--flat { + --hover-background: #e6f4ff; +} + +.buttons-sample-2 .igx-button--flat, .buttons-sample-2 .igx-button--outlined { + --focus-visible-foreground: #1677ff; +} + +.buttons-sample-2 .igx-button--outlined, .buttons-sample-2 .text .igx-button--flat, .buttons-sample-2 .link .igx-button--flat { + --focus-visible-background: transparent; +} + +.buttons-sample-3 .igx-button--contained{ + --background: #ff4d4f; + --hover-background: #ff7875; + --active-background: #d9363e; + --focus-visible-background: #ff4d4f; + --focus-visible-foreground: #fff; +} + +.buttons-sample-3 .igx-button--outlined { + --foreground: #ff4d4f; + --border-color: #ff4d4f; + --hover-foreground: #ff7875; + --hover-border-color: #ffa39e; + --active-foreground: #d9363e; + --active-border-color: #d9363e; +} + +.buttons-sample-3 .filled .igx-button--flat { + --background: #fff2f0; + --hover-background: #ffdfdc; + --hover-foreground: #ff4d4f; + --active-foreground: #ff4d4f; + --focus-visible-background: #fff2f0; +} + +.buttons-sample-3 .filled .igx-button--flat, .buttons-sample-3 .text .igx-button--flat { + --active-background: #ffccc7; +} + +.buttons-sample-3 .text .igx-button--flat, .buttons-sample-3 .link .igx-button--flat { + --hover-foreground: #ff7875; + --active-foreground: #d9363e; +} + +.buttons-sample-3 .igx-button--flat { + --foreground: #ff4d4f; +} + +.buttons-sample-3 .text .igx-button--flat { + --hover-background: #fff2f0; +} + +.buttons-sample-3 .igx-button--flat, .buttons-sample-3 .igx-button--outlined { + --focus-visible-foreground: #ff4d4f; +} + +.buttons-sample-3 .igx-button--outlined, .buttons-sample-3 .text .igx-button--flat, .buttons-sample-3 .link .igx-button--flat { + --focus-visible-background: transparent; +} + +.buttons-sample-4 .igx-button--contained { + --background: #eb2f96; + --hover-background: #f759ab; + --active-background: #c41d7f; + --focus-visible-background: #eb2f96; + --focus-visible-foreground: #fff; +} + +.buttons-sample-4 .igx-button--outlined { + --foreground: #eb2f96; + --border-color: #eb2f96; + --hover-foreground: #f759ab; + --hover-border-color: #f759ab; + --active-foreground: #c41d7f; + --active-border-color: #c41d7f; +} + +.buttons-sample-4 .filled .igx-button--flat { + --background: #fff0f6; + --hover-background: #ffd6e7; + --hover-foreground: #eb2f96; + --active-foreground: #eb2f96; + --focus-visible-background: #fff0f6; +} + +.buttons-sample-4 .filled .igx-button--flat, .buttons-sample-4 .text .igx-button--flat { + --active-background: #ffadd2; +} + +.buttons-sample-4 .text .igx-button--flat, .buttons-sample-4 .link .igx-button--flat { + --hover-foreground: #f759ab; + --active-foreground: #c41d7f; +} + +.buttons-sample-4 .igx-button--flat { + --foreground: #eb2f96; +} + +.buttons-sample-4 .text .igx-button--flat { + --hover-background: #fff0f6; +} + +.buttons-sample-4 .igx-button--flat, .buttons-sample-4 .igx-button--outlined { + --focus-visible-foreground: #eb2f96; +} + +.buttons-sample-4 .igx-button--outlined, .buttons-sample-4 .text .igx-button--flat, .buttons-sample-4 .link .igx-button--flat { + --focus-visible-background: transparent; +} + +.buttons-sample-5 .igx-button--contained { + --background: #722ed1; + --hover-background: #9254de; + --active-background: #531dab; + --focus-visible-background: #722ed1; + --focus-visible-foreground: #fff; +} + +.buttons-sample-5 .igx-button--outlined { + --foreground: #722ed1; + --border-color: #722ed1; + --hover-foreground: #9254de; + --hover-border-color: #9254de; + --active-foreground: #531dab; + --active-border-color: #531dab; +} + +.buttons-sample-5 .filled .igx-button--flat { + --background: #f9f0ff; + --hover-background: #efdbff; + --hover-foreground: #722ed1; + --active-foreground: #722ed1; + --focus-visible-background: #f9f0ff; +} + +.buttons-sample-5 .filled .igx-button--flat, .buttons-sample-5 .text .igx-button--flat { + --active-background: #d3adf7; +} + +.buttons-sample-5 .text .igx-button--flat, .buttons-sample-5 .link .igx-button--flat { + --hover-foreground: #9254de; + --active-foreground: #531dab; +} + +.buttons-sample-5 .igx-button--flat { + --foreground: #722ed1; +} + +.buttons-sample-5 .text .igx-button--flat { + --hover-background: #f9f0ff; +} + +.buttons-sample-5 .igx-button--flat, .buttons-sample-5 .igx-button--outlined { + --focus-visible-foreground: #722ed1; +} + +.buttons-sample-5 .igx-button--outlined, .buttons-sample-5 .text .igx-button--flat, .buttons-sample-5 .link .igx-button--flat { + --focus-visible-background: transparent; +} + +.buttons-sample-6 .igx-button--contained { + --background: #13c2c2; + --hover-background: #36cfc9; + --active-background: #08979c; + --focus-visible-background: #13c2c2; + --focus-visible-foreground: #fff; +} + +.buttons-sample-6 .igx-button--outlined { + --foreground: #13c2c2; + --border-color: #13c2c2; + --hover-foreground: #36cfc9; + --hover-border-color: #36cfc9; + --active-foreground: #08979c; + --active-border-color: #08979c; +} + +.buttons-sample-6 .filled .igx-button--flat{ + --background: #e6fffb; + --hover-background: #b5f5ec; + --hover-foreground: #13c2c2; + --active-foreground: #13c2c2; + --focus-visible-background: #e6fffb; +} + +.buttons-sample-6 .filled .igx-button--flat, .buttons-sample-6 .text .igx-button--flat { + --active-background: #b5f5ec; +} + +.buttons-sample-6 .igx-button--flat { + --foreground: #13c2c2; +} + +.buttons-sample-6 .text .igx-button--flat, .buttons-sample-6 .link .igx-button--flat { + --hover-foreground: #36cfc9; + --active-foreground: #08979c; +} + +.buttons-sample-6 .text .igx-button--flat { + --hover-background: #e6fffb; +} + +.buttons-sample-6 .igx-button--flat, .buttons-sample-6 .igx-button--outlined { + --focus-visible-foreground: #13c2c2; +} + +.buttons-sample-6 .igx-button--outlined, .buttons-sample-6 .text .igx-button--flat, .buttons-sample-6 .link .igx-button--flat { + --focus-visible-background: transparent; +} + +.button-sample .igx-button--contained{ + --foreground: #fff; + --hover-foreground: #fff; + --active-foreground: #fff; +} + +.button-sample .igx-button--outlined { + --background: #fff; + --hover-background: #fff; + --active-background: #fff; +} + +.button-sample button { + --ig-size: var(--ig-size-medium); + + padding: 0px 7px; + min-width: unset; +} + +.button-sample .igx-button { + --ig-font-family: 'alibaba-sans', sans-serif; +} \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts b/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts index a0380ea08c..5ea8c72b12 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts @@ -1,10 +1,13 @@ import { Component } from '@angular/core'; -import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; +import { IgxButtonDirective, IgxRippleDirective, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; @Component({ selector: 'app-buttons-style', styleUrls: ['./buttons-style.component.scss'], templateUrl: './buttons-style.component.html', - imports: [IgxButtonDirective, IgxRippleDirective] + imports: [IgxButtonDirective, IgxRippleDirective], + providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('bootstrap')}], }) -export class ButtonsStyleComponent { } +export class ButtonsStyleComponent { + range = Array(6); +} diff --git a/src/app/data-entries/buttons/buttons-style/layout.scss b/src/app/data-entries/buttons/buttons-style/layout.scss index 36396d2d00..30759bd634 100644 --- a/src/app/data-entries/buttons/buttons-style/layout.scss +++ b/src/app/data-entries/buttons/buttons-style/layout.scss @@ -1,9 +1,36 @@ -.buttons-sample { - display: flex; - margin: 8px; +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/button/button-component" as button; +@use 'sass:map'; + +:host { + ::ng-deep { + @include button($flat: flat-button-theme($schema: $light-bootstrap-schema), $contained: contained-button-theme($schema: $light-bootstrap-schema), $outlined: outlined-button-theme($schema: $light-bootstrap-schema), $fab: fab-button-theme($schema: $light-bootstrap-schema)); + @include button.component(); + } +} + +[class^=buttons-sample] { + display: flex; + margin: 16px 8px 8px 16px; } .button-sample { - display: flex; - margin-right: 16px; + display: flex; + margin-right: 16px; +} + +.dashed button{ + border-style: dashed; +} + +[class^="buttons-sample"]:hover .link button { + background: none; +} + +.button-sample .igx-button { + font-weight: 400; + height: 24px; + min-height: 24px; + text-transform: capitalize; + outline: 1px solid #fff; } \ No newline at end of file diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html index 1e959d579a..96a191b243 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html @@ -1,3 +1,3 @@ - + Styled checkbox diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index c5b8a77146..61d1bb44e7 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -1,10 +1,22 @@ @use "layout.scss"; -@use "igniteui-angular/theming" as *; + +igx-checkbox { + --tick-color: #0064d9; + --tick-color-hover: #e3f0ff; + --fill-color: transparent; + --fill-color-hover: #e3f0ff; + --label-color: #131e29; + --focus-outline-color: #0032a5; + --border-radius: 0.25rem; + --ig-font-family: Arial, Helvetica, sans-serif; + --ig-subtitle-1-font-size: 14px; +} -$custom-checkbox-theme: checkbox-theme( - $empty-color: #ecaa53, - $fill-color: #ecaa53, - $border-radius: 5px -); +igx-checkbox:hover { + --empty-fill-color: #e3f0ff; +} -@include css-vars($custom-checkbox-theme); +#checkbox-1.igx-checkbox--focused:after { + inset: 8px -4px 8px 8px; + border-radius: 8px; +} \ No newline at end of file diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts index 3bd791043a..7e9419e079 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts @@ -1,10 +1,13 @@ import { Component } from '@angular/core'; -import { IgxCheckboxComponent } from 'igniteui-angular'; +import { IgxCheckboxComponent, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; @Component({ selector: 'app-checkbox-styling', styleUrls: ['./checkbox-styling.component.scss'], templateUrl: './checkbox-styling.component.html', + providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('fluent')}], imports: [IgxCheckboxComponent] }) -export class CheckboxStylingComponent { } +export class CheckboxStylingComponent { + +} diff --git a/src/app/data-entries/checkbox/checkbox-styling/layout.scss b/src/app/data-entries/checkbox/checkbox-styling/layout.scss index 7f3591cc5a..c1b0dbe99e 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/layout.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/layout.scss @@ -1,4 +1,33 @@ +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/checkbox/checkbox-component" as checkbox; +@use "sass:map"; + +:host { + ::ng-deep { + $_checkbox-schema: map.get($light-fluent-schema, checkbox); + @include checkbox(checkbox-theme($schema: $_checkbox-schema)); + @include checkbox.component(); + + igx-checkbox.igx-checkbox--checked .igx-checkbox__composite-wrapper .igx-checkbox__composite { + border-color: var(--empty-color); + } + + igx-checkbox .igx-checkbox__composite { + min-width: 1.125rem; + height: 1.125rem; + } + + igx-checkbox.igx-checkbox--checked:hover .igx-checkbox__composite-wrapper .igx-checkbox__composite { + border-color: var(--empty-color); + } + + igx-checkbox .igx-checkbox__label { + margin-inline-start: 0rem; + } + } +} + igx-checkbox { display: flex; - padding: 16px; + margin: 20px 0 0 20px; } \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/layout.scss b/src/app/data-entries/radio/radio-styling-sample/layout.scss index a275b1e4e2..c58f88db4c 100644 --- a/src/app/data-entries/radio/radio-styling-sample/layout.scss +++ b/src/app/data-entries/radio/radio-styling-sample/layout.scss @@ -1,9 +1,38 @@ +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/radio/radio-component" as radio; +@use "sass:map"; + +:host { + ::ng-deep{ + $_radio-schema: map.get($light-fluent-schema, radio); + @include radio(radio-theme($schema: $_radio-schema)); + @include radio.component(); + + igx-radio.igx-radio--checked .igx-radio__composite::after { + --fill-color: #556b81; + } + + igx-radio .igx-radio__composite::after, igx-radio .igx-radio__composite::before, igx-radio .igx-radio__composite{ + width: 1.125rem; + height: 1.125rem; + } + + igx-radio .igx-radio__composite { + min-width: 1.125rem; + } + + .igx-radio__ripple { + display: none; + } + } +} + igx-radio + igx-radio { - margin-top: 16px; + margin-top: 16px; } .radio-wrapper { - display: flex; - flex-flow: column nowrap; - padding: 16px; + display: flex; + flex-flow: column nowrap; + padding: 16px; } \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html index be0ba57fc4..b85c9d9117 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html @@ -1,7 +1,7 @@
- New York - London - Sofia - Tokyo - Singapore -
+ New York + London + Sofia + Tokyo + Singapore + \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss index c2c3383809..9b7229f0bc 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss @@ -1,9 +1,22 @@ @use "layout.scss"; -@use "igniteui-angular/theming" as *; -$custom-radio-theme: radio-theme( - $empty-color: #345779, - $fill-color: #2dabe8, -); +igx-radio { + --empty-color: #556b81; + --label-color: #131e29; + --fill-color: #0064d9; + --focus-outline-color: #0032a5; -@include css-vars($custom-radio-theme); + --ig-subtitle-1-font-size: 14px; + --ig-font-family: Arial,Helvetica,sans-serif; +} + +igx-radio:hover { + --empty-fill-color: #e3f0ff; + --empty-color: #0064d9; + --hover-color: transparent; +} + +igx-radio.igx-radio--focused::after { + inset: 1px -4px 1px -2px; + border-radius: 8px; +} \ No newline at end of file diff --git a/src/app/data-entries/switch/switch-styling/layout.scss b/src/app/data-entries/switch/switch-styling/layout.scss index dfc9dd1daf..4f93f59562 100644 --- a/src/app/data-entries/switch/switch-styling/layout.scss +++ b/src/app/data-entries/switch/switch-styling/layout.scss @@ -1,9 +1,57 @@ +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/switch/switch-component" as switch; +@use 'sass:map'; + +:host { + display: flex; + flex-flow: column nowrap; + padding: 16px; + + ::ng-deep { + $_switch-schema: map.get($light-fluent-schema, switch); + @include switch(switch-theme($schema: $_switch-schema)); + @include switch.component(); + + igx-switch:hover .igx-switch__composite .igx-switch__thumb { + --border-hover-color: #fff; + } + + igx-switch .igx-switch__composite { + width: 2.75rem; + height: 1.25rem; + padding-left: 0.125rem; + + .igx-switch__composite-thumb { + width: 1.60rem; + height: 16px; + min-width: 1.60rem; + transform: translateX(-0.5px); + + .igx-switch__thumb { + width: 1.60rem; + height: 16px; + min-width: 1.60rem; + } + } + } + + igx-switch.igx-switch--checked .igx-switch__composite .igx-switch__composite-thumb { + transform: translateX(0.85rem); + } + + igx-switch.igx-switch--focused .igx-switch__composite::after { + border-radius: 1rem; + } + } +} + igx-switch { - margin-top: 24px; + margin-top: 24px; + width: max-content; } .switch-wrapper { - display: flex; - flex-flow: column nowrap; - padding: 16px; + display: flex; + flex-flow: column nowrap; + padding: 16px; } \ No newline at end of file diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.html b/src/app/data-entries/switch/switch-styling/switch-styling.component.html index db4efd584c..dbde291d33 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.html +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.html @@ -1,8 +1,8 @@
- @for (setting of settings; track setting) { - - {{ setting.name }} - - } + @for (setting of settings; track setting) { + + {{ setting.name }} + + }
diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss index e85a3e4c51..3f60374881 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss @@ -1,9 +1,19 @@ @use "layout.scss"; -@use "igniteui-angular/theming" as *; -$custom-switch-theme: switch-theme( - $thumb-off-color: #7cadd5, - $thumb-on-color: #ecaa53, -); +igx-switch { + --thumb-on-color: #e3f0ff; + --thumb-off-color: #fff; + --track-on-color: #0064d9; + --track-off-color: #788fa6; + --track-on-hover-color: #0058bf; + --border-radius-track: 1rem; + --focus-outline-color: #0032a5; + --border-on-color: transparent; + --border-color: transparent; + --border-on-hover-color: transparent; + --border-hover-color: transparent; +} -@include css-vars($custom-switch-theme); +igx-switch:hover { + --track-off-color: #637d97; +} diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.ts b/src/app/data-entries/switch/switch-styling/switch-styling.component.ts index b6d5f3dece..2aa5991683 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.ts +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; - import { IgxSwitchComponent } from 'igniteui-angular'; @Component({ @@ -9,9 +8,9 @@ import { IgxSwitchComponent } from 'igniteui-angular'; imports: [IgxSwitchComponent] }) export class SwitchStylingComponent { - public settings = [ - { name: 'WiFi', state: false}, - { name: 'Bluetooth', state: true}, - { name: 'Device visibility', state: false} - ]; + public settings = [ + { name: 'WiFi', state: false}, + { name: 'Bluetooth', state: true}, + { name: 'Device visibility', state: false} + ]; } diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html index 49e1dae43b..966780cf32 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html @@ -1,28 +1,33 @@
- - - - - - -

{{ card.title }}

-
{{ card.subtitle }}
- - - -

{{ card.content }}

- - - - @for (icon of card.icons; track icon) { - - } - - - -
+ + + + +
+ + +
+

{{ card.title }}

+

{{ card.subtitle }}

+
+ + + #artic + #fox + #card + + + + @for (icon of card.icons; track icon; let i = $index) { + + @if (i < 2) { + + + } + } + +
+ + \ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss index ceb14c46ba..4ed16cf260 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss @@ -1,9 +1,53 @@ @use "layout.scss"; -@use "igniteui-angular/theming" as *; -$colorful-card: card-theme( - $background: #011627, - $subtitle-text-color: #ecaa53, -); +igx-chip { + --border-radius: 4px; + --background: #fafafa; + --border-color: #d9d9d9; + --ig-body-2-font-size: 0.75rem; + --hover-background: #d9d9d9; + --focus-background: #d9d9d9; +} -@include css-vars($colorful-card); +igx-card { + --border-radius: 8px; + --outline-color: #f0f0f0; + --resting-shadow: none; + --hover-shadow: none; + --header-text-color: #000000e0; + --ig-font-family: 'alibaba-sans', sans-serif; + + width: 300px; + border: none; +} + +.igx-card-header{ + + igx-avatar { + --background: transparent; + + height: 30px; + width: 30px; + } + + h3 { + --ig-h6-font-size: 1rem; + } + + p { + --ig-body-1-font-size: 0.875rem; + + margin-top: 8px; + color: #00000073; + } +} + +.igx-icon-button--flat { + --foreground: #00000073; + --hover-foreground: #1677ff; + --hover-background: none; +} + +igx-divider { + --color: #f0f0f0 +} \ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts index 935be0448f..7f4f334821 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts @@ -1,25 +1,33 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { Card } from '../card.blueprint'; -import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent } from 'igniteui-angular'; +import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxIconService, IgxChipComponent } from 'igniteui-angular'; @Component({ selector: 'app-card-styling-sample', templateUrl: './card-styling-sample.component.html', styleUrls: ['./card-styling-sample.component.scss'], - imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxChipComponent] }) export class CardStylingSampleComponent { + + private iconService = inject(IgxIconService) + + public ngOnInit() { + + this.iconService.addSvgIconFromText('settings-custom', ''); + + this.iconService.addSvgIconFromText('edit-custom', ''); + + this.iconService.addSvgIconFromText('dots', ''); + + } + + public card = new Card({ - content: `Hi! I'm Jane, photographer and filmmaker. - Photography is a way of feeling, of touching, - of loving. What you have caught on film is captured forever... - it remembers little things, long after you have - forgotten everything.`, - icons: ['person', 'favorite', 'share'], - imageUrl: 'https://images.unsplash.com/' - + 'photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80', - subtitle: 'Professional Photographer', - title: 'Jane Doe' + icons: ['settings-custom', 'edit-custom', 'dots'], + subtitle: 'This is the description', + title: 'Card title' }); } +// icons: ['settings', 'border_color', 'more_horiz'], \ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/layout.scss b/src/app/layouts/card/card-styling-sample/layout.scss index d8f5f95f82..30ab67e407 100644 --- a/src/app/layouts/card/card-styling-sample/layout.scss +++ b/src/app/layouts/card/card-styling-sample/layout.scss @@ -1,4 +1,52 @@ -.card-wrapper { - max-width: 320px; - min-width: 220px; -} \ No newline at end of file +:host { + ::ng-deep { + igx-chip .igx-chip__item { + padding: 0 5px; + height: 22px; + } + } +} + +.border { + border: 0.0625rem solid var(--outline-color); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + border-top: none; +} + +.igx-card-header{ + width: unset; + padding: unset; + align-items: baseline; + margin: 24px 24px 0 24px; + height: 70px; +} + +.igx-card-content { + padding: 0; + + igx-chip { + padding: 5px; + + &:nth-of-type(1) { + margin-left: 5px; + } + } + + igx-divider { + margin-top: 5px; + } +} + +igx-icon { + width: 14px; +} + +igx-card-actions { + justify-content: space-evenly; + padding: 0.4rem 0; + + igx-divider { + height: 1.50rem; + } +} From c08969d27a3e6381c6539364c6234ab8aa05afb0 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 17 Jul 2025 14:30:12 +0300 Subject: [PATCH 2/9] feat(samples): add SASS selectors --- .../chip-styling/chip-styling.component.scss | 21 ++++++- .../chip-styling/chip-styling.component.ts | 2 +- .../buttons-style.component.scss | 25 +++++++- .../checkbox-styling.component.scss | 23 +++++++- .../radio-styling-sample.component.scss | 18 +++++- .../switch-styling.component.scss | 22 +++++++ .../card-styling-sample.component.scss | 58 ++++++++++++++++--- .../card-styling-sample.component.ts | 13 ++--- 8 files changed, 157 insertions(+), 25 deletions(-) diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss index 8cf8371b44..4c41fbf74e 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.scss +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.scss @@ -1,4 +1,7 @@ @use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// CSS only approach igx-chip { --text-color: #fff; @@ -19,13 +22,13 @@ igx-chip[id='2'] { --focus-background: #9f1717; } -igx-chip[id='3']{ +igx-chip[id='3'] { --background: #3b5999; --hover-background: #3b5999; --focus-background: #2c4378; } -igx-chip[id='4']{ +igx-chip[id='4'] { --background: #55acee; --hover-background: #55acee; --focus-background: #4682af; @@ -34,4 +37,16 @@ igx-chip[id='4']{ igx-icon.igx-icon { width: 0.75rem; height: 0.75rem; -} \ No newline at end of file +} + +// SASS approach + +// $custom-chip-theme: chip-theme( +// $background: #cd201f, +// $text-color: #fff, +// $hover-background: #cd201f, +// $focus-background: #9f1717, +// ); + +// @include css-vars($custom-chip-theme) + \ No newline at end of file diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.ts b/src/app/data-display/chip/chip-styling/chip-styling.component.ts index 80e01a053e..b4260c972d 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.ts +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, inject } from '@angular/core'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxIconService } from 'igniteui-angular'; diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss index 9bfaabad3f..da42d90320 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss @@ -1,5 +1,8 @@ @use "layout.scss"; - +@use "igniteui-angular/theming" as *; + +// CSS only approach + .buttons-sample-1 .igx-button--contained { --background: #000; --hover-background: #000000bf; @@ -321,4 +324,22 @@ .button-sample .igx-button { --ig-font-family: 'alibaba-sans', sans-serif; -} \ No newline at end of file +} + +// SASS approach + +// $custom-button-theme: button-theme( +// $background: #f9f0ff, +// $foreground: #722ed1, +// $border-color: #722ed1, +// $hover-background: #efdbff, +// $hover-foreground: #9254de, +// $hover-border-color: #9254de, +// $active-border-color: #531dab, +// $active-foreground: #531dab, +// $focus-visible-background: #f9f0ff, +// ); + +// .button-sample { +// @include css-vars($custom-button-theme) +// } diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index 61d1bb44e7..dcbb847684 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -1,5 +1,8 @@ @use "layout.scss"; - +@use "igniteui-angular/theming" as *; + +// CSS only approach + igx-checkbox { --tick-color: #0064d9; --tick-color-hover: #e3f0ff; @@ -19,4 +22,20 @@ igx-checkbox:hover { #checkbox-1.igx-checkbox--focused:after { inset: 8px -4px 8px 8px; border-radius: 8px; -} \ No newline at end of file +} + +// SASS approach + +// $custom-checkbox-theme: checkbox-theme( +// $tick-color: #0064d9, +// $tick-color-hover: #e3f0ff, +// $fill-color: transparent, +// $fill-color-hover: #e3f0ff, +// $label-color: #131e29, +// $focus-outline-color: #0032a5, +// $empty-color: #131e29, +// $border-radius: 0.25rem, +// ); + +// @include css-vars($custom-checkbox-theme) + \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss index 9b7229f0bc..22b6c413b3 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss @@ -1,4 +1,7 @@ @use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// CSS only approach igx-radio { --empty-color: #556b81; @@ -19,4 +22,17 @@ igx-radio:hover { igx-radio.igx-radio--focused::after { inset: 1px -4px 1px -2px; border-radius: 8px; -} \ No newline at end of file +} + +// SASS approach + +// $custom-radio-theme: radio-theme( +// $empty-color: #556b81, +// $label-color: #131e29, +// $fill-color: #0064d9, +// $focus-outline-color: #0032a5, +// $fill-color-hover: #0064d9, +// $hover-color: transparent +// ); + +// @include css-vars($custom-radio-theme); diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss index 3f60374881..0154df46e7 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss @@ -1,4 +1,7 @@ @use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// CSS only approach igx-switch { --thumb-on-color: #e3f0ff; @@ -17,3 +20,22 @@ igx-switch { igx-switch:hover { --track-off-color: #637d97; } + +// SASS approach + +// $custom-switch-theme: switch-theme( +// $thumb-on-color: #e3f0ff, +// $track-on-color: #0064d9, +// $track-on-hover-color: #0058bf, +// $thumb-off-color: #fff, +// $track-off-color: #788fa6, +// $border-radius-track: 1rem, +// $focus-outline-color: #0032a5, +// $border-on-color: transparent, +// $border-on-hover-color: transparent, +// $border-color: transparent, +// $border-hover-color: transparent, +// ); + +// @include css-vars($custom-switch-theme) + \ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss index 4ed16cf260..2d37f04b38 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss @@ -1,13 +1,7 @@ @use "layout.scss"; +@use "igniteui-angular/theming" as *; -igx-chip { - --border-radius: 4px; - --background: #fafafa; - --border-color: #d9d9d9; - --ig-body-2-font-size: 0.75rem; - --hover-background: #d9d9d9; - --focus-background: #d9d9d9; -} +// CSS only approach igx-card { --border-radius: 8px; @@ -42,6 +36,15 @@ igx-card { } } +igx-chip { + --border-radius: 4px; + --background: #fafafa; + --border-color: #d9d9d9; + --ig-body-2-font-size: 0.75rem; + --hover-background: #d9d9d9; + --focus-background: #d9d9d9; +} + .igx-icon-button--flat { --foreground: #00000073; --hover-foreground: #1677ff; @@ -50,4 +53,41 @@ igx-card { igx-divider { --color: #f0f0f0 -} \ No newline at end of file +} + +// SASS approach + +// $custom-card-theme: card-theme( +// $border-radius: 8px, +// $outline-color: #f0f0f0, +// $resting-shadow: none, +// $hover-shadow: none, +// $header-text-color: #000000e0, +// ); + +// $custom-chip-theme: chip-theme( +// $border-radius: 4px, +// $background: #fafafa, +// $border-color: #d9d9d9, +// $hover-background: #d9d9d9, +// $focus-background: #d9d9d9, +// ); + +// $custom-icon-button-theme: icon-button-theme( +// $foreground: #00000073, +// $hover-foreground: #1677ff, +// $hover-background: none, +// $border-color: transparent +// ); + +// $custom-divider-theme: divider-theme( +// $color: #f0f0f0 +// ); + +// @include css-vars($custom-card-theme); +// @include css-vars($custom-chip-theme); +// @include css-vars($custom-divider-theme); +// .igx-icon-button--flat { +// @include css-vars($custom-icon-button-theme); +// }; + \ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts index 7f4f334821..2de5d4b12b 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts @@ -11,17 +11,17 @@ import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCar }) export class CardStylingSampleComponent { - private iconService = inject(IgxIconService) + private iconService = inject(IgxIconService) - public ngOnInit() { + public ngOnInit() { - this.iconService.addSvgIconFromText('settings-custom', ''); + this.iconService.addSvgIconFromText('settings-custom', ''); - this.iconService.addSvgIconFromText('edit-custom', ''); + this.iconService.addSvgIconFromText('edit-custom', ''); - this.iconService.addSvgIconFromText('dots', ''); + this.iconService.addSvgIconFromText('dots', ''); - } + } public card = new Card({ @@ -30,4 +30,3 @@ export class CardStylingSampleComponent { title: 'Card title' }); } -// icons: ['settings', 'border_color', 'more_horiz'], \ No newline at end of file From c1ac5556765678089506c974cc3f6db1222a45ac Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 5 Aug 2025 15:32:02 +0300 Subject: [PATCH 3/9] fix(samples): new styling and structure changes based on comments --- .../chip-styling/chip-styling.component.html | 14 +- .../chip-styling/chip-styling.component.scss | 19 +- .../chip-styling/chip-styling.component.ts | 95 ++-- .../chip/chip-styling/layout.scss | 18 +- .../buttons-style.component.html | 38 +- .../buttons-style.component.scss | 505 +++++++----------- .../buttons-style/buttons-style.component.ts | 4 +- .../buttons/buttons-style/layout.scss | 23 +- .../checkbox-styling.component.html | 4 +- .../checkbox-styling.component.scss | 10 +- .../checkbox-styling.component.ts | 15 +- .../checkbox/checkbox-styling/layout.scss | 14 +- .../radio/radio-styling-sample/layout.scss | 14 +- .../radio-styling-sample.component.html | 10 +- .../radio-styling-sample.component.scss | 13 +- .../radio-styling-sample.component.ts | 10 +- .../switch/switch-styling/layout.scss | 44 +- .../switch-styling.component.html | 10 +- .../switch-styling.component.scss | 4 +- .../switch-styling.component.ts | 18 +- .../card-styling-sample.component.html | 59 +- .../card-styling-sample.component.scss | 44 +- .../card-styling-sample.component.ts | 60 ++- .../card/card-styling-sample/layout.scss | 24 +- 24 files changed, 475 insertions(+), 594 deletions(-) diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.html b/src/app/data-display/chip/chip-styling/chip-styling.component.html index af28d21ede..7d388ed335 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.html +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.html @@ -1,8 +1,8 @@ - - @for (chip of chipList; track chip) { - - - {{chip.text}} - - } + + @for (chip of chipList; track chip) { + + + {{chip.text}} + + } diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss index 4c41fbf74e..181418454e 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.scss +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.scss @@ -1,45 +1,44 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -// CSS only approach +// CSS variables approach igx-chip { --text-color: #fff; --hover-text-color: #fff; --focus-text-color: #fff; - --border-radius: 5px; + --border-radius: #{rem(5px)}; } -igx-chip[id='1'] { +.xcom { --background: #000; --hover-background: #000; --focus-background: #323232; } -igx-chip[id='2'] { +.youtube { --background: #cd201f; --hover-background: #cd201f; --focus-background: #9f1717; } -igx-chip[id='3'] { +.facebook { --background: #3b5999; --hover-background: #3b5999; --focus-background: #2c4378; } -igx-chip[id='4'] { +.linkedin { --background: #55acee; --hover-background: #55acee; --focus-background: #4682af; } -igx-icon.igx-icon { - width: 0.75rem; - height: 0.75rem; +igx-icon { + --size: 0.75rem; } -// SASS approach +// Sass theme approach // $custom-chip-theme: chip-theme( // $background: #cd201f, diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.ts b/src/app/data-display/chip/chip-styling/chip-styling.component.ts index b4260c972d..9483db0183 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.ts +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.ts @@ -1,60 +1,51 @@ import { ChangeDetectorRef, Component, inject } from '@angular/core'; -import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxIconService } from 'igniteui-angular'; - +import { facebook, linkedin } from '@igniteui/material-icons-extended'; +import { + IgxChipsAreaComponent, + IgxChipComponent, + IgxIconComponent, + IgxPrefixDirective, + IgxIconService +} from 'igniteui-angular'; +import { NgClass } from '@angular/common'; @Component({ - selector: 'app-chip', - styleUrls: ['./chip-styling.component.scss'], - templateUrl: './chip-styling.component.html', - imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] + selector: 'app-chip', + styleUrls: ['./chip-styling.component.scss'], + templateUrl: './chip-styling.component.html', + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgClass] }) export class ChipStylingSampleComponent { - changeDetectionRef = inject(ChangeDetectorRef); - private iconService = inject(IgxIconService) - - public ngOnInit() { - - this.iconService.addSvgIconFromText('twitter', ''); - this.iconService.addSvgIconFromText('youtube', ' '); - this.iconService.addSvgIconFromText('facebook', ''); - this.iconService.addSvgIconFromText('linkedin', ''); - } - - public chipList = [ - { - text: 'X.com', - id: '1', - icon: 'twitter' - }, - { - text: 'Youtube', - id: '2', - icon: 'youtube' - }, - { - text: 'Facebook', - id: '3', - icon: 'facebook' - }, - { - text: 'LinkedIn', - id: '4', - icon: 'linkedin' - } - ]; - - public chipRemoved(event: IBaseChipEventArgs) { - this.chipList = this.chipList.filter((item) => item.id !== event.owner.id); - this.changeDetectionRef.detectChanges(); - } - - public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { - const newChipList = []; - for (const chip of event.chipsArray) { - const chipItem = this.chipList.filter((item) => item.id === chip.id)[0]; - newChipList.push(chipItem); - } - this.chipList = newChipList; + changeDetectionRef = inject(ChangeDetectorRef); + private iconService = inject(IgxIconService) + public ngOnInit() { + this.iconService.addSvgIconFromText('x', ''); + this.iconService.addSvgIconFromText('youtube', ' '); + this.iconService.addSvgIconFromText(facebook.name, facebook.value); + this.iconService.addSvgIconFromText(linkedin.name, linkedin.value); + } + + public chipList = [ + { + text: 'X.com', + class: 'xcom', + icon: 'x' + }, + { + text: 'Youtube', + class: 'youtube', + icon: 'youtube' + }, + { + text: 'Facebook', + class: 'facebook', + icon: 'facebook' + }, + { + text: 'LinkedIn', + class: 'linkedin', + icon: 'linkedin' } + ]; } diff --git a/src/app/data-display/chip/chip-styling/layout.scss b/src/app/data-display/chip/chip-styling/layout.scss index 54c0fe03b5..b0f88b14a8 100644 --- a/src/app/data-display/chip/chip-styling/layout.scss +++ b/src/app/data-display/chip/chip-styling/layout.scss @@ -1,17 +1,17 @@ :host { - ::ng-deep { - igx-chip .igx-chip__item{ - height: 20px; - font-size: 12px; - } - } + ::ng-deep { + .igx-chip__item { + height: 1.25rem; + font-size: 0.75rem; + } + } } igx-chip { - margin-right: 5px; - margin-top: 20px; + margin-right: 0.5rem; + margin-top: 1.25rem; } igx-chips-area { - margin-left: 20px; + margin-left: 1.25rem; } \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html index 7c00350625..8eee79e1d3 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html @@ -1,22 +1,22 @@ @for (item of range; let i = $index; track i) { -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
} \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss index da42d90320..3652a0551f 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss @@ -1,324 +1,205 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; - -// CSS only approach - -.buttons-sample-1 .igx-button--contained { - --background: #000; - --hover-background: #000000bf; - --active-background: #000000f2; - --focus-visible-background: #000; - --focus-visible-foreground: #fff; -} - -.buttons-sample-1 .igx-button--outlined { - --foreground: #000000e0; - --border-color: #d9d9d9; - --hover-foreground: #4096ff; - --hover-border-color: #4096ff; - --active-foreground: #0958d9; - --active-border-color: #0958d9; -} - -.buttons-sample-1 .igx-button--flat { - --foreground: #000000e0; - --active-background: #00000026; - --active-foreground: #000000e0; -} - -.buttons-sample-1 .filled .igx-button--flat { - --background: #0000000a; - --hover-background: #0000000f; - --focus-visible-background: #0000000a; -} - -.buttons-sample-1 .filled .igx-button--flat, .buttons-sample-1 .text .igx-button--flat { - --hover-foreground: #000000e0; -} - -.buttons-sample-1 .text .igx-button--flat { - --hover-background: #0000000a; -} - -.buttons-sample-1 .link .igx-button--flat { - --hover-foreground: #69b1ff; - --active-foreground: #0958d9; -} - -.buttons-sample-1 .igx-button--flat, .buttons-sample-1 .igx-button--outlined { - --focus-visible-foreground: #000; -} - -.buttons-sample-1 .igx-button--outlined, .buttons-sample-1 .text .igx-button--flat, .buttons-sample-1 .link .igx-button--flat { - --focus-visible-background: transparent; -} - -.buttons-sample-2 .igx-button--contained { - --background: #1677ff; - --hover-background: #4096ff; - --active-background: #0958d9; - --focus-visible-background: #1677ff; - --focus-visible-foreground: #fff; -} - -.buttons-sample-2 .igx-button--outlined { - --foreground: #1677ff; - --border-color: #1677ff; - --hover-foreground: #4096ff; - --hover-border-color: #4096ff; - --active-foreground: #0958d9; - --active-border-color: #0958d9; -} - -.buttons-sample-2 .filled .igx-button--flat { - --background: #e6f4ff; - --hover-background: #bae0ff; - --hover-foreground: #1677ff; - --active-foreground: #1677ff; - --focus-visible-background: #e6f4ff; -} - -.buttons-sample-2 .filled .igx-button--flat, .buttons-sample-2 .text .igx-button--flat { - --active-background: #91caff; -} - -.buttons-sample-2 .text .igx-button--flat, .buttons-sample-2 .link .igx-button--flat { - --hover-foreground: #4096ff; - --active-foreground: #0958d9; -} - -.buttons-sample-2 .igx-button--flat { - --foreground: #1677ff; -} - -.buttons-sample-2 .text .igx-button--flat { - --hover-background: #e6f4ff; -} - -.buttons-sample-2 .igx-button--flat, .buttons-sample-2 .igx-button--outlined { - --focus-visible-foreground: #1677ff; -} - -.buttons-sample-2 .igx-button--outlined, .buttons-sample-2 .text .igx-button--flat, .buttons-sample-2 .link .igx-button--flat { - --focus-visible-background: transparent; -} - -.buttons-sample-3 .igx-button--contained{ - --background: #ff4d4f; - --hover-background: #ff7875; - --active-background: #d9363e; - --focus-visible-background: #ff4d4f; - --focus-visible-foreground: #fff; -} - -.buttons-sample-3 .igx-button--outlined { - --foreground: #ff4d4f; - --border-color: #ff4d4f; - --hover-foreground: #ff7875; - --hover-border-color: #ffa39e; - --active-foreground: #d9363e; - --active-border-color: #d9363e; -} - -.buttons-sample-3 .filled .igx-button--flat { - --background: #fff2f0; - --hover-background: #ffdfdc; - --hover-foreground: #ff4d4f; - --active-foreground: #ff4d4f; - --focus-visible-background: #fff2f0; -} - -.buttons-sample-3 .filled .igx-button--flat, .buttons-sample-3 .text .igx-button--flat { - --active-background: #ffccc7; -} - -.buttons-sample-3 .text .igx-button--flat, .buttons-sample-3 .link .igx-button--flat { - --hover-foreground: #ff7875; - --active-foreground: #d9363e; -} - -.buttons-sample-3 .igx-button--flat { - --foreground: #ff4d4f; -} - -.buttons-sample-3 .text .igx-button--flat { - --hover-background: #fff2f0; -} - -.buttons-sample-3 .igx-button--flat, .buttons-sample-3 .igx-button--outlined { - --focus-visible-foreground: #ff4d4f; -} - -.buttons-sample-3 .igx-button--outlined, .buttons-sample-3 .text .igx-button--flat, .buttons-sample-3 .link .igx-button--flat { - --focus-visible-background: transparent; -} - -.buttons-sample-4 .igx-button--contained { - --background: #eb2f96; - --hover-background: #f759ab; - --active-background: #c41d7f; - --focus-visible-background: #eb2f96; - --focus-visible-foreground: #fff; -} - -.buttons-sample-4 .igx-button--outlined { - --foreground: #eb2f96; - --border-color: #eb2f96; - --hover-foreground: #f759ab; - --hover-border-color: #f759ab; - --active-foreground: #c41d7f; - --active-border-color: #c41d7f; -} - -.buttons-sample-4 .filled .igx-button--flat { - --background: #fff0f6; - --hover-background: #ffd6e7; - --hover-foreground: #eb2f96; - --active-foreground: #eb2f96; - --focus-visible-background: #fff0f6; -} - -.buttons-sample-4 .filled .igx-button--flat, .buttons-sample-4 .text .igx-button--flat { - --active-background: #ffadd2; -} - -.buttons-sample-4 .text .igx-button--flat, .buttons-sample-4 .link .igx-button--flat { - --hover-foreground: #f759ab; - --active-foreground: #c41d7f; -} - -.buttons-sample-4 .igx-button--flat { - --foreground: #eb2f96; -} - -.buttons-sample-4 .text .igx-button--flat { - --hover-background: #fff0f6; -} - -.buttons-sample-4 .igx-button--flat, .buttons-sample-4 .igx-button--outlined { - --focus-visible-foreground: #eb2f96; -} - -.buttons-sample-4 .igx-button--outlined, .buttons-sample-4 .text .igx-button--flat, .buttons-sample-4 .link .igx-button--flat { - --focus-visible-background: transparent; -} - -.buttons-sample-5 .igx-button--contained { - --background: #722ed1; - --hover-background: #9254de; - --active-background: #531dab; - --focus-visible-background: #722ed1; - --focus-visible-foreground: #fff; -} - -.buttons-sample-5 .igx-button--outlined { - --foreground: #722ed1; - --border-color: #722ed1; - --hover-foreground: #9254de; - --hover-border-color: #9254de; - --active-foreground: #531dab; - --active-border-color: #531dab; -} - -.buttons-sample-5 .filled .igx-button--flat { - --background: #f9f0ff; - --hover-background: #efdbff; - --hover-foreground: #722ed1; - --active-foreground: #722ed1; - --focus-visible-background: #f9f0ff; -} - -.buttons-sample-5 .filled .igx-button--flat, .buttons-sample-5 .text .igx-button--flat { - --active-background: #d3adf7; -} - -.buttons-sample-5 .text .igx-button--flat, .buttons-sample-5 .link .igx-button--flat { - --hover-foreground: #9254de; - --active-foreground: #531dab; -} - -.buttons-sample-5 .igx-button--flat { - --foreground: #722ed1; -} - -.buttons-sample-5 .text .igx-button--flat { - --hover-background: #f9f0ff; -} - -.buttons-sample-5 .igx-button--flat, .buttons-sample-5 .igx-button--outlined { - --focus-visible-foreground: #722ed1; -} - -.buttons-sample-5 .igx-button--outlined, .buttons-sample-5 .text .igx-button--flat, .buttons-sample-5 .link .igx-button--flat { - --focus-visible-background: transparent; -} - -.buttons-sample-6 .igx-button--contained { - --background: #13c2c2; - --hover-background: #36cfc9; - --active-background: #08979c; - --focus-visible-background: #13c2c2; - --focus-visible-foreground: #fff; -} - -.buttons-sample-6 .igx-button--outlined { - --foreground: #13c2c2; - --border-color: #13c2c2; - --hover-foreground: #36cfc9; - --hover-border-color: #36cfc9; - --active-foreground: #08979c; - --active-border-color: #08979c; -} - -.buttons-sample-6 .filled .igx-button--flat{ - --background: #e6fffb; - --hover-background: #b5f5ec; - --hover-foreground: #13c2c2; - --active-foreground: #13c2c2; - --focus-visible-background: #e6fffb; -} - -.buttons-sample-6 .filled .igx-button--flat, .buttons-sample-6 .text .igx-button--flat { - --active-background: #b5f5ec; -} - -.buttons-sample-6 .igx-button--flat { - --foreground: #13c2c2; -} - -.buttons-sample-6 .text .igx-button--flat, .buttons-sample-6 .link .igx-button--flat { - --hover-foreground: #36cfc9; - --active-foreground: #08979c; -} - -.buttons-sample-6 .text .igx-button--flat { - --hover-background: #e6fffb; -} - -.buttons-sample-6 .igx-button--flat, .buttons-sample-6 .igx-button--outlined { - --focus-visible-foreground: #13c2c2; -} - -.buttons-sample-6 .igx-button--outlined, .buttons-sample-6 .text .igx-button--flat, .buttons-sample-6 .link .igx-button--flat { - --focus-visible-background: transparent; -} - -.button-sample .igx-button--contained{ +@use "sass:map"; + +// CSS variables approach + +$list: ( + "sample-1": ( + "primary": #000, + "secondary": rgba(0, 0, 0, 0.75), + "active": rgba(0, 0, 0, 0.95), + "focus": #fff, + "hover": #4096ff, + "foreground": rgba(0, 0, 0, 0.88), + "border": #d9d9d9, + "active-foreground": #0958d9, + "flat-foreground": #69b1ff, + "flat-background": rgba(0, 0, 0, 0.04), + "flat-active": rgba(0, 0, 0, 0.15), + "flat-hover": rgba(0, 0, 0, 0.06), + ), + "sample-2": ( + "primary": #1677ff, + "secondary": #4096ff, + "active": #0958d9, + "focus": #fff, + "flat-background": #e6f4ff, + "flat-hover": #bae0ff, + "flat-active": #91caff, + ), + "sample-3": ( + "primary": #ff4d4f, + "secondary": #ff7875, + "active": #d9363e, + "focus": #fff, + "flat-background": #fff2f0, + "flat-hover": #ffdfdc, + "flat-active": #ffccc7, + ), + "sample-4": ( + "primary": #eb2f96, + "secondary": #f759ab, + "active": #c41d7f, + "focus": #fff, + "flat-background": #fff0f6, + "flat-hover": #ffd6e7, + "flat-active": #ffadd2, + ), + "sample-5": ( + "primary": #722ed1, + "secondary": #9254de, + "active": #531dab, + "focus": #fff, + "flat-background": #f9f0ff, + "flat-hover": #efdbff, + "flat-active": #d3adf7, + ), + "sample-6": ( + "primary": #13c2c2, + "secondary": #36cfc9, + "active": #08979c, + "focus": #fff, + "flat-background": #e6fffb, + "flat-hover": #b5f5ec, + "flat-active": #b5f5ec, + ), +); + +@each $variant, $style in $list { + .buttons-#{$variant} [igxbutton="contained"] { + --background: #{map-get($style, "primary")}; + --hover-background: #{map-get($style, "secondary")}; + --active-background: #{map-get($style, "active")}; + --focus-visible-background: #{map-get($style, "primary")}; + --focus-visible-foreground: #{map-get($style, "focus")}; + --focus-hover-background: #{map-get($style, "secondary")}; + --focus-hover-foreground: #{map-get($style, "focus")}; + --focus-background: #{map-get($style, "active")}; + } + + @if $variant == "sample-1" { + .buttons-#{$variant} [igxbutton="outlined"] { + --foreground: #{map-get($style, "foreground")}; + --border-color: #{map-get($style, "border")}; + --hover-foreground: #{map-get($style, "hover")}; + --hover-border-color: #{map-get($style, "hover")}; + --active-foreground: #{map-get($style, "active-foreground")}; + --active-border-color: #{map-get($style, "active-foreground")}; + --focus-hover-background: #{map-get($style, "focus")}; + --focus-hover-foreground: #{map-get($style, "hover")}; + --focus-background: #{map-get($style, "focus")}; + --focus-foreground: #{map-get($style, "active-foreground")}; + --focus-visible-border-color: #{map-get($style, "border")}; + } + + .buttons-#{$variant} [igxbutton="flat"] { + --foreground: #{map-get($style, "foreground")}; + --active-foreground: #{map-get($style, "foreground")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"] { + --background: #{map-get($style, "flat-background")}; + --hover-background: #{map-get($style, "flat-hover")}; + --focus-visible-background: #{map-get($style, "flat-background")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"], + .buttons-#{$variant} .text [igxbutton="flat"] { + --hover-foreground: #{map-get($style, "foreground")}; + --focus-hover-background: #{map-get($style, "flat-hover")}; + --focus-background: #{map-get($style, "flat-active")}; + --focus-foreground: #{map-get($style, "foreground")}; + --focus-hover-foreground: #{map-get($style, "foreground")}; + --active-background: #{map-get($style, "flat-active")}; + } + + .buttons-#{$variant} .text [igxbutton="flat"] { + --hover-background: #{map-get($style, "flat-background")}; + } + + .buttons-#{$variant} .link [igxbutton="flat"] { + --hover-foreground: #{map-get($style, "flat-foreground")}; + --active-foreground: #{map-get($style, "active-foreground")}; + } + } + + @else { + .buttons-#{$variant} [igxbutton="outlined"] { + --foreground: #{map-get($style, "primary")}; + --border-color: #{map-get($style, "primary")}; + --hover-foreground: #{map-get($style, "secondary")}; + --hover-border-color: #{map-get($style, "secondary")}; + --active-foreground: #{map-get($style, "active")}; + --active-border-color: #{map-get($style, "active")}; + --focus-hover-background: #{map-get($style, "focus")}; + --focus-hover-foreground: #{map-get($style, "secondary")}; + --focus-background: #{map-get($style, "focus")}; + --focus-foreground: #{map-get($style, "active")}; + --focus-visible-border-color: #{map-get($style, "primary")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"] { + --background: #{map-get($style, "flat-background")}; + --hover-background: #{map-get($style, "flat-hover")}; + --hover-foreground: #{map-get($style, "primary")}; + --active-foreground: #{map-get($style, "primary")}; + --focus-visible-background: #{map-get($style, "flat-background")}; + --focus-hover-foreground: #{map-get($style, "primary")}; + --focus-foreground: #{map-get($style, "primary")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"], + .buttons-#{$variant} .text [igxbutton="flat"] { + --active-background: #{map-get($style, "flat-active")}; + } + + .buttons-#{$variant} .text [igxbutton="flat"], + .buttons-#{$variant} .link [igxbutton="flat"] { + --hover-foreground: #{map-get($style, "secondary")}; + --active-foreground: #{map-get($style, "active")}; + --focus-hover-foreground: #{map-get($style, "secondary")}; + --focus-foreground: #{map-get($style, "active")}; + } + + .buttons-#{$variant} [igxbutton="flat"] { + --foreground: #{map-get($style, "primary")}; + --focus-hover-background: #{map-get($style, "flat-hover")}; + --focus-background: #{map-get($style, "flat-active")}; + } + + .buttons-#{$variant} .text [igxbutton="flat"] { + --hover-background: #{map-get($style, "flat-background")}; + } + } + + .buttons-#{$variant} [igxbutton="flat"], + .buttons-#{$variant} [igxbutton="outlined"] { + --focus-visible-foreground: #{map-get($style, "primary")}; + } + + .buttons-#{$variant} [igxbutton="outlined"], + .buttons-#{$variant} .text [igxbutton="flat"], + .buttons-#{$variant} .link [igxbutton="flat"] { + --focus-visible-background: transparent; + } +} + +.button-sample [igxbutton="contained"] { --foreground: #fff; --hover-foreground: #fff; --active-foreground: #fff; } -.button-sample .igx-button--outlined { - --background: #fff; - --hover-background: #fff; - --active-background: #fff; +.button-sample [igxbutton="outlined"] { + --background: transparent; + --hover-background: transparent; + --active-background: transparent; } .button-sample button { --ig-size: var(--ig-size-medium); - - padding: 0px 7px; + padding: 0px rem(7px); min-width: unset; } @@ -326,7 +207,7 @@ --ig-font-family: 'alibaba-sans', sans-serif; } -// SASS approach +// Sass theme approach // $custom-button-theme: button-theme( // $background: #f9f0ff, @@ -342,4 +223,4 @@ // .button-sample { // @include css-vars($custom-button-theme) -// } +// } \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts b/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts index 5ea8c72b12..3e313eedec 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { IgxButtonDirective, IgxRippleDirective, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; +import { IgxButtonDirective, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; @Component({ selector: 'app-buttons-style', styleUrls: ['./buttons-style.component.scss'], templateUrl: './buttons-style.component.html', - imports: [IgxButtonDirective, IgxRippleDirective], + imports: [IgxButtonDirective], providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('bootstrap')}], }) export class ButtonsStyleComponent { diff --git a/src/app/data-entries/buttons/buttons-style/layout.scss b/src/app/data-entries/buttons/buttons-style/layout.scss index 30759bd634..f048867318 100644 --- a/src/app/data-entries/buttons/buttons-style/layout.scss +++ b/src/app/data-entries/buttons/buttons-style/layout.scss @@ -4,33 +4,34 @@ :host { ::ng-deep { - @include button($flat: flat-button-theme($schema: $light-bootstrap-schema), $contained: contained-button-theme($schema: $light-bootstrap-schema), $outlined: outlined-button-theme($schema: $light-bootstrap-schema), $fab: fab-button-theme($schema: $light-bootstrap-schema)); + @include button($flat: flat-button-theme($schema: $light-bootstrap-schema), + $contained: contained-button-theme($schema: $light-bootstrap-schema), + $outlined: outlined-button-theme($schema: $light-bootstrap-schema), + $fab: fab-button-theme($schema: $light-bootstrap-schema)); @include button.component(); } } [class^=buttons-sample] { display: flex; - margin: 16px 8px 8px 16px; + margin: 1rem 0.5rem 0.5rem 1rem; } .button-sample { - display: flex; - margin-right: 16px; + margin-right: 1rem; } .dashed button{ border-style: dashed; } - + [class^="buttons-sample"]:hover .link button { background: none; } -.button-sample .igx-button { - font-weight: 400; - height: 24px; - min-height: 24px; - text-transform: capitalize; - outline: 1px solid #fff; +[igxbutton] { + --ig-button-font-weight: 400; + --ig-button-text-transform: capitalize; + min-height: 1.5rem; + outline: rem(1px) solid #fff; } \ No newline at end of file diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html index 96a191b243..5d1a2f56c9 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html @@ -1,3 +1,3 @@ - Styled checkbox - + Styled checkbox + \ No newline at end of file diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index dcbb847684..7130b9e810 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -1,7 +1,7 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -// CSS only approach +// CSS variables approach igx-checkbox { --tick-color: #0064d9; @@ -12,7 +12,7 @@ igx-checkbox { --focus-outline-color: #0032a5; --border-radius: 0.25rem; --ig-font-family: Arial, Helvetica, sans-serif; - --ig-subtitle-1-font-size: 14px; + --ig-subtitle-1-font-size: 0.875rem; } igx-checkbox:hover { @@ -20,11 +20,11 @@ igx-checkbox:hover { } #checkbox-1.igx-checkbox--focused:after { - inset: 8px -4px 8px 8px; - border-radius: 8px; + inset: 0.5rem -0.25rem 0.5rem 0.5rem; + border-radius: 0.5rem; } -// SASS approach +// Sass theme approach // $custom-checkbox-theme: checkbox-theme( // $tick-color: #0064d9, diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts index 7e9419e079..3f45dcb2b8 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts @@ -1,13 +1,12 @@ import { Component } from '@angular/core'; -import { IgxCheckboxComponent, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; +import { IgxCheckboxComponent, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; @Component({ - selector: 'app-checkbox-styling', - styleUrls: ['./checkbox-styling.component.scss'], - templateUrl: './checkbox-styling.component.html', - providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('fluent')}], - imports: [IgxCheckboxComponent] + selector: 'app-checkbox-styling', + styleUrls: ['./checkbox-styling.component.scss'], + templateUrl: './checkbox-styling.component.html', + providers: [{ provide: THEME_TOKEN, useFactory: () => new ThemeToken('fluent') }], + imports: [IgxCheckboxComponent] }) -export class CheckboxStylingComponent { - +export class CheckboxStylingComponent { } diff --git a/src/app/data-entries/checkbox/checkbox-styling/layout.scss b/src/app/data-entries/checkbox/checkbox-styling/layout.scss index c1b0dbe99e..c4da1af9df 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/layout.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/layout.scss @@ -8,26 +8,28 @@ @include checkbox(checkbox-theme($schema: $_checkbox-schema)); @include checkbox.component(); - igx-checkbox.igx-checkbox--checked .igx-checkbox__composite-wrapper .igx-checkbox__composite { + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. + .igx-checkbox--checked .igx-checkbox__composite-wrapper .igx-checkbox__composite { border-color: var(--empty-color); } - igx-checkbox .igx-checkbox__composite { + .igx-checkbox__composite { min-width: 1.125rem; height: 1.125rem; } - igx-checkbox.igx-checkbox--checked:hover .igx-checkbox__composite-wrapper .igx-checkbox__composite { + .igx-checkbox--checked:hover .igx-checkbox__composite-wrapper .igx-checkbox__composite { border-color: var(--empty-color); } - igx-checkbox .igx-checkbox__label { - margin-inline-start: 0rem; + .igx-checkbox__label { + margin-inline-start: auto; } } } igx-checkbox { display: flex; - margin: 20px 0 0 20px; + margin: 1.25rem 0 0 1.25rem; } \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/layout.scss b/src/app/data-entries/radio/radio-styling-sample/layout.scss index c58f88db4c..d52effb742 100644 --- a/src/app/data-entries/radio/radio-styling-sample/layout.scss +++ b/src/app/data-entries/radio/radio-styling-sample/layout.scss @@ -8,16 +8,20 @@ @include radio(radio-theme($schema: $_radio-schema)); @include radio.component(); - igx-radio.igx-radio--checked .igx-radio__composite::after { + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. + .igx-radio--checked .igx-radio__composite::after { --fill-color: #556b81; } - igx-radio .igx-radio__composite::after, igx-radio .igx-radio__composite::before, igx-radio .igx-radio__composite{ + .igx-radio__composite::after, + .igx-radio__composite::before, + .igx-radio__composite { width: 1.125rem; height: 1.125rem; } - igx-radio .igx-radio__composite { + .igx-radio__composite { min-width: 1.125rem; } @@ -28,11 +32,11 @@ } igx-radio + igx-radio { - margin-top: 16px; + margin-top: 1rem; } .radio-wrapper { display: flex; flex-flow: column nowrap; - padding: 16px; + padding: 1rem; } \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html index b85c9d9117..3ad4431519 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html @@ -1,7 +1,7 @@
- New York - London - Sofia - Tokyo - Singapore + New York + London + Sofia + Tokyo + Singapore
\ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss index 22b6c413b3..15200553f4 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss @@ -1,15 +1,14 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -// CSS only approach +// CSS variables approach igx-radio { --empty-color: #556b81; --label-color: #131e29; --fill-color: #0064d9; --focus-outline-color: #0032a5; - - --ig-subtitle-1-font-size: 14px; + --ig-subtitle-1-font-size: #{rem(14px)}; --ig-font-family: Arial,Helvetica,sans-serif; } @@ -19,12 +18,12 @@ igx-radio:hover { --hover-color: transparent; } -igx-radio.igx-radio--focused::after { - inset: 1px -4px 1px -2px; - border-radius: 8px; +.igx-radio--focused::after { + inset: rem(1px) rem(-4px) rem(1px) rem(-2px); + border-radius: rem(8px); } -// SASS approach +// Sass theme approach // $custom-radio-theme: radio-theme( // $empty-color: #556b81, diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts index 9881fad3fb..8972a6018b 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts @@ -3,11 +3,11 @@ import { IgxRadioComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; @Component({ - selector: 'app-radio-sample-1', - styleUrls: ['./radio-styling-sample.component.scss'], - templateUrl: './radio-styling-sample.component.html', - imports: [IgxRadioComponent, FormsModule] + selector: 'app-radio-sample-1', + styleUrls: ['./radio-styling-sample.component.scss'], + templateUrl: './radio-styling-sample.component.html', + imports: [IgxRadioComponent, FormsModule] }) export class RadioStylingSampleComponent { - public selected: string; + public selected: string; } diff --git a/src/app/data-entries/switch/switch-styling/layout.scss b/src/app/data-entries/switch/switch-styling/layout.scss index 4f93f59562..404dcbaeb0 100644 --- a/src/app/data-entries/switch/switch-styling/layout.scss +++ b/src/app/data-entries/switch/switch-styling/layout.scss @@ -3,55 +3,53 @@ @use 'sass:map'; :host { - display: flex; - flex-flow: column nowrap; - padding: 16px; - ::ng-deep { $_switch-schema: map.get($light-fluent-schema, switch); @include switch(switch-theme($schema: $_switch-schema)); @include switch.component(); - igx-switch:hover .igx-switch__composite .igx-switch__thumb { + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. + igx-switch:hover .igx-switch__thumb { --border-hover-color: #fff; } - igx-switch .igx-switch__composite { + .igx-switch__composite { width: 2.75rem; height: 1.25rem; padding-left: 0.125rem; - - .igx-switch__composite-thumb { - width: 1.60rem; - height: 16px; - min-width: 1.60rem; - transform: translateX(-0.5px); - - .igx-switch__thumb { - width: 1.60rem; - height: 16px; - min-width: 1.60rem; - } - } + } + + .igx-switch__composite-thumb { + width: 1.60rem; + height: 1rem; + min-width: 1.60rem; + transform: translateX(-0.5px); + } + + .igx-switch__thumb { + width: 1.60rem; + height: 1rem; + min-width: 1.60rem; } - igx-switch.igx-switch--checked .igx-switch__composite .igx-switch__composite-thumb { + .igx-switch--checked .igx-switch__composite .igx-switch__composite-thumb { transform: translateX(0.85rem); } - igx-switch.igx-switch--focused .igx-switch__composite::after { + .igx-switch--focused .igx-switch__composite::after { border-radius: 1rem; } } } igx-switch { - margin-top: 24px; + margin-top: 1.5rem; width: max-content; } .switch-wrapper { display: flex; flex-flow: column nowrap; - padding: 16px; + padding: 2rem; } \ No newline at end of file diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.html b/src/app/data-entries/switch/switch-styling/switch-styling.component.html index dbde291d33..db4efd584c 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.html +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.html @@ -1,8 +1,8 @@
- @for (setting of settings; track setting) { - - {{ setting.name }} - - } + @for (setting of settings; track setting) { + + {{ setting.name }} + + }
diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss index 0154df46e7..ad1c3e7b27 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss @@ -1,7 +1,7 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -// CSS only approach +// CSS variables approach igx-switch { --thumb-on-color: #e3f0ff; @@ -21,7 +21,7 @@ igx-switch:hover { --track-off-color: #637d97; } -// SASS approach +// Sass theme approach // $custom-switch-theme: switch-theme( // $thumb-on-color: #e3f0ff, diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.ts b/src/app/data-entries/switch/switch-styling/switch-styling.component.ts index 2aa5991683..16d3ee69a2 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.ts +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.ts @@ -2,15 +2,15 @@ import { Component } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular'; @Component({ - selector: 'app-switch-styling', - styleUrls: ['./switch-styling.component.scss'], - templateUrl: './switch-styling.component.html', - imports: [IgxSwitchComponent] + selector: 'app-switch-styling', + styleUrls: ['./switch-styling.component.scss'], + templateUrl: './switch-styling.component.html', + imports: [IgxSwitchComponent] }) export class SwitchStylingComponent { - public settings = [ - { name: 'WiFi', state: false}, - { name: 'Bluetooth', state: true}, - { name: 'Device visibility', state: false} - ]; + public settings = [ + { name: 'WiFi', state: false }, + { name: 'Bluetooth', state: true }, + { name: 'Device visibility', state: false } + ]; } diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html index 966780cf32..98dee27aa5 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html @@ -1,33 +1,32 @@
- - - - -
- - -
-

{{ card.title }}

-

{{ card.subtitle }}

-
- - - #artic - #fox - #card - - - - @for (icon of card.icons; track icon; let i = $index) { - - @if (i < 2) { - - - } - } - + + + + +
+ + +
+
{{ card.title }}
+

{{ card.subtitle }}

- + + + #artic + #fox + #card + + + + @for (icon of card.icons; track icon; let i = $index) { + + @if (i < 2) { + + } + } + +
+
\ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss index 2d37f04b38..dfccdd7d7a 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss @@ -1,43 +1,39 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -// CSS only approach +// CSS variables approach igx-card { - --border-radius: 8px; + --border-radius: #{rem(8px)}; --outline-color: #f0f0f0; --resting-shadow: none; --hover-shadow: none; - --header-text-color: #000000e0; + --header-text-color: rgba(0, 0, 0, 0.88); --ig-font-family: 'alibaba-sans', sans-serif; - - width: 300px; + width: rem(300px); border: none; } -.igx-card-header{ - - igx-avatar { - --background: transparent; - - height: 30px; - width: 30px; - } - - h3 { - --ig-h6-font-size: 1rem; - } +igx-avatar { + --background: transparent; + --size: #{rem(30px)}; +} - p { - --ig-body-1-font-size: 0.875rem; +.igx-card-header { + --ig-h6-font-size: 1rem; + --ig-body-1-font-size: 0.875rem; +} - margin-top: 8px; - color: #00000073; - } +.igx-card-header__subtitle { + --ig-subtitle-2-font-weight: 400; + --ig-subtitle-2-line-height: #{rem(28px)}; + --ig-subtitle-2-letter-spacing: #{rem(0.5px)}; + --subtitle-text-color: rgba(0, 0, 0, 0.45); + margin: 0.5rem 0 1rem; } igx-chip { - --border-radius: 4px; + --border-radius: 0.25rem; --background: #fafafa; --border-color: #d9d9d9; --ig-body-2-font-size: 0.75rem; @@ -55,7 +51,7 @@ igx-divider { --color: #f0f0f0 } -// SASS approach +// Sass theme approach // $custom-card-theme: card-theme( // $border-radius: 8px, diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts index 2de5d4b12b..286ebba109 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts @@ -1,32 +1,42 @@ import { Component, inject } from '@angular/core'; import { Card } from '../card.blueprint'; -import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxIconService, IgxChipComponent } from 'igniteui-angular'; - +import { + IgxCardComponent, + IgxCardMediaDirective, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardHeaderSubtitleDirective, + IgxCardContentDirective, + IgxCardActionsComponent, + IgxIconButtonDirective, + IgxRippleDirective, + IgxSuffixDirective, + IgxIconComponent, + IgxAvatarComponent, + IgxDividerModule, + IgxIconService, + IgxChipComponent +} from 'igniteui-angular'; @Component({ - selector: 'app-card-styling-sample', - templateUrl: './card-styling-sample.component.html', - styleUrls: ['./card-styling-sample.component.scss'], - imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxChipComponent] + selector: 'app-card-styling-sample', + templateUrl: './card-styling-sample.component.html', + styleUrls: ['./card-styling-sample.component.scss'], + imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, + IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, + IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxChipComponent] }) export class CardStylingSampleComponent { - - private iconService = inject(IgxIconService) - - public ngOnInit() { - - this.iconService.addSvgIconFromText('settings-custom', ''); - - this.iconService.addSvgIconFromText('edit-custom', ''); - - this.iconService.addSvgIconFromText('dots', ''); - - } - - - public card = new Card({ - icons: ['settings-custom', 'edit-custom', 'dots'], - subtitle: 'This is the description', - title: 'Card title' - }); + private iconService = inject(IgxIconService) + public ngOnInit() { + this.iconService.addSvgIconFromText('settings-custom', '') + this.iconService.addSvgIconFromText('edit-custom', ''); + this.iconService.addSvgIconFromText('dots', ''); + }; + public card = new Card({ + icons: ['settings-custom', 'edit-custom', 'dots'], + subtitle: 'This is the description', + title: 'Card title' + }); } diff --git a/src/app/layouts/card/card-styling-sample/layout.scss b/src/app/layouts/card/card-styling-sample/layout.scss index 30ab67e407..5049182da4 100644 --- a/src/app/layouts/card/card-styling-sample/layout.scss +++ b/src/app/layouts/card/card-styling-sample/layout.scss @@ -1,16 +1,18 @@ +@use "igniteui-angular/theming" as *; + :host { ::ng-deep { - igx-chip .igx-chip__item { - padding: 0 5px; - height: 22px; + .igx-chip__item { + padding: 0 rem(5px); + height: rem(22px); } } } .border { border: 0.0625rem solid var(--outline-color); - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; border-top: none; } @@ -18,28 +20,28 @@ width: unset; padding: unset; align-items: baseline; - margin: 24px 24px 0 24px; - height: 70px; + margin: 1.5rem 1.5rem 0 1.5rem; + height: rem(70px); } .igx-card-content { padding: 0; igx-chip { - padding: 5px; + padding: rem(5px); &:nth-of-type(1) { - margin-left: 5px; + margin-left: rem(5px); } } igx-divider { - margin-top: 5px; + margin-top: rem(5px); } } igx-icon { - width: 14px; + --igx-icon-size: #{rem(14px)}; } igx-card-actions { From fa0433905155622c07b9b9f4609f7a0cf1f99b1a Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 5 Aug 2025 15:42:18 +0300 Subject: [PATCH 4/9] fix(samples): lint errors --- .../chip/chip-styling/chip-styling.component.ts | 4 ++-- .../buttons/buttons-style/buttons-style.component.ts | 2 +- .../card-styling-sample/card-styling-sample.component.ts | 6 ++---- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.ts b/src/app/data-display/chip/chip-styling/chip-styling.component.ts index 9483db0183..20fbb999c6 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.ts +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, inject } from '@angular/core'; +import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core'; import { facebook, linkedin } from '@igniteui/material-icons-extended'; import { IgxChipsAreaComponent, @@ -16,7 +16,7 @@ import { NgClass } from '@angular/common'; imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgClass] }) -export class ChipStylingSampleComponent { +export class ChipStylingSampleComponent implements OnInit { changeDetectionRef = inject(ChangeDetectorRef); private iconService = inject(IgxIconService) public ngOnInit() { diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts b/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts index 3e313eedec..657abb2a96 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts @@ -6,7 +6,7 @@ import { IgxButtonDirective, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; styleUrls: ['./buttons-style.component.scss'], templateUrl: './buttons-style.component.html', imports: [IgxButtonDirective], - providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('bootstrap')}], + providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('bootstrap')}] }) export class ButtonsStyleComponent { range = Array(6); diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts index 286ebba109..1ec78186c3 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts @@ -1,4 +1,4 @@ -import { Component, inject } from '@angular/core'; +import { Component, inject, OnInit } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardComponent, @@ -9,8 +9,6 @@ import { IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, - IgxRippleDirective, - IgxSuffixDirective, IgxIconComponent, IgxAvatarComponent, IgxDividerModule, @@ -27,7 +25,7 @@ import { IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxChipComponent] }) -export class CardStylingSampleComponent { +export class CardStylingSampleComponent implements OnInit { private iconService = inject(IgxIconService) public ngOnInit() { this.iconService.addSvgIconFromText('settings-custom', '') From 93edff84c6e9799da7b2a1a41c242db9136a8d6a Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 5 Aug 2025 19:29:15 +0300 Subject: [PATCH 5/9] fix(samples): formatting --- .../buttons/buttons-style/layout.scss | 10 +++++----- .../radio/radio-styling-sample/layout.scss | 8 ++++---- .../switch/switch-styling/layout.scss | 8 ++++---- .../card-styling-sample.component.scss | 18 +++++++++--------- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/app/data-entries/buttons/buttons-style/layout.scss b/src/app/data-entries/buttons/buttons-style/layout.scss index f048867318..96386c4039 100644 --- a/src/app/data-entries/buttons/buttons-style/layout.scss +++ b/src/app/data-entries/buttons/buttons-style/layout.scss @@ -5,9 +5,9 @@ :host { ::ng-deep { @include button($flat: flat-button-theme($schema: $light-bootstrap-schema), - $contained: contained-button-theme($schema: $light-bootstrap-schema), - $outlined: outlined-button-theme($schema: $light-bootstrap-schema), - $fab: fab-button-theme($schema: $light-bootstrap-schema)); + $contained: contained-button-theme($schema: $light-bootstrap-schema), + $outlined: outlined-button-theme($schema: $light-bootstrap-schema), + $fab: fab-button-theme($schema: $light-bootstrap-schema)); @include button.component(); } } @@ -30,8 +30,8 @@ } [igxbutton] { - --ig-button-font-weight: 400; - --ig-button-text-transform: capitalize; + --ig-button-font-weight: 400; + --ig-button-text-transform: capitalize; min-height: 1.5rem; outline: rem(1px) solid #fff; } \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/layout.scss b/src/app/data-entries/radio/radio-styling-sample/layout.scss index d52effb742..09a1c60869 100644 --- a/src/app/data-entries/radio/radio-styling-sample/layout.scss +++ b/src/app/data-entries/radio/radio-styling-sample/layout.scss @@ -8,15 +8,15 @@ @include radio(radio-theme($schema: $_radio-schema)); @include radio.component(); - // Note: This is not the standard approach for styling the component. - // We're using it here solely to mirror the UI5 sample. + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. .igx-radio--checked .igx-radio__composite::after { --fill-color: #556b81; } .igx-radio__composite::after, - .igx-radio__composite::before, - .igx-radio__composite { + .igx-radio__composite::before, + .igx-radio__composite { width: 1.125rem; height: 1.125rem; } diff --git a/src/app/data-entries/switch/switch-styling/layout.scss b/src/app/data-entries/switch/switch-styling/layout.scss index 404dcbaeb0..7dbac62440 100644 --- a/src/app/data-entries/switch/switch-styling/layout.scss +++ b/src/app/data-entries/switch/switch-styling/layout.scss @@ -8,8 +8,8 @@ @include switch(switch-theme($schema: $_switch-schema)); @include switch.component(); - // Note: This is not the standard approach for styling the component. - // We're using it here solely to mirror the UI5 sample. + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. igx-switch:hover .igx-switch__thumb { --border-hover-color: #fff; } @@ -18,14 +18,14 @@ width: 2.75rem; height: 1.25rem; padding-left: 0.125rem; - } + } .igx-switch__composite-thumb { width: 1.60rem; height: 1rem; min-width: 1.60rem; transform: translateX(-0.5px); - } + } .igx-switch__thumb { width: 1.60rem; diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss index dfccdd7d7a..b9a71fcbcd 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss @@ -15,21 +15,21 @@ igx-card { } igx-avatar { - --background: transparent; - --size: #{rem(30px)}; + --background: transparent; + --size: #{rem(30px)}; } .igx-card-header { - --ig-h6-font-size: 1rem; - --ig-body-1-font-size: 0.875rem; + --ig-h6-font-size: 1rem; + --ig-body-1-font-size: 0.875rem; } .igx-card-header__subtitle { - --ig-subtitle-2-font-weight: 400; - --ig-subtitle-2-line-height: #{rem(28px)}; - --ig-subtitle-2-letter-spacing: #{rem(0.5px)}; - --subtitle-text-color: rgba(0, 0, 0, 0.45); - margin: 0.5rem 0 1rem; + --ig-subtitle-2-font-weight: 400; + --ig-subtitle-2-line-height: #{rem(28px)}; + --ig-subtitle-2-letter-spacing: #{rem(0.5px)}; + --subtitle-text-color: rgba(0, 0, 0, 0.45); + margin: 0.5rem 0 1rem; } igx-chip { From abe209d34ff7fe6d7949c7ce96eec7bdc6aeac41 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 12 Aug 2025 15:30:13 +0300 Subject: [PATCH 6/9] feat(samples): add new calendar and input styling samples --- .../input-group-styling.component.html | 24 +-- .../input-group-styling.component.scss | 41 +++-- .../input-group-styling.component.ts | 5 +- .../input-group-styling/layout.scss | 50 ++++- .../calendar-styling-sample.component.html | 6 +- .../calendar-styling-sample.component.scss | 171 +++++++++++++++++- .../calendar-styling-sample/layout.scss | 135 +++++++++++++- 7 files changed, 382 insertions(+), 50 deletions(-) diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html index 85d8543382..d9fdfb886f 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html @@ -1,21 +1,7 @@
- - +359 - - - - phone - - Ex.: +359 888 123 456 + + + + Helper text - - - +359 - - - - phone - - Ex.: +359 888 123 456 - -
+ \ No newline at end of file diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss index cf5356ec80..86f6d790de 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss @@ -1,19 +1,34 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -.sample-column { - gap: 1rem; +// CSS variables approach + +igx-input-group { + --border-color: #0f62fe; + --size: #{rem(40px)}; + --idle-bottom-line-color: #8d8d8d; + --hover-bottom-line-color: #8d8d8d; + --hover-placeholder-color: var(--ig-gray-600); + --idle-secondary-color: var(--ig-gray-600); + --focused-secondary-color: var(--ig-gray-700); + --focused-bottom-line-color: #8d8d8d; + --box-background-hover: var(--ig-gray-100); + --helper-text-color: var(--ig-gray-600); } -$custom-input-group: input-group-theme( - $border-color: #57a5cd, - $filled-text-color: #288a54, - $focused-text-color: #174f30, - $idle-text-color: #288a54, - $idle-bottom-line-color: #288a54, - $hover-bottom-line-color: #288a54, - $focused-secondary-color: #174f30, - $box-background: #57a5cd -); +// Sass theme approach -@include css-vars($custom-input-group); +// $custom-input-group: input-group-theme( +// $border-color: #0f62fe, +// $idle-bottom-line-color: #8d8d8d, +// $hover-bottom-line-color: #8d8d8d, +// $hover-placeholder-color: var(--ig-gray-700), +// $idle-secondary-color: var(--ig-gray-700), +// $focused-secondary-color: var(--ig-gray-700), +// $size: #{rem(40px)}, +// $box-border-radius: 0, +// $box-background-hover: var(--ig-gray-100), +// $placeholder-color: var(--ig-gray-600) +// ); + +// @include css-vars($custom-input-group); diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts index e0d175f820..e98bc90dd6 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; -import { IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective } from 'igniteui-angular'; +import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; @Component({ selector: 'app-input-group-style', templateUrl: 'input-group-styling.component.html', styleUrls: ['input-group-styling.component.scss'], - imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective] + imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective], + providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('indigo')}] }) export class InputGroupStyleComponent { } diff --git a/src/app/data-entries/input-group/input-group-styling/layout.scss b/src/app/data-entries/input-group/input-group-styling/layout.scss index fc4259acbb..d9311ea3bf 100644 --- a/src/app/data-entries/input-group/input-group-styling/layout.scss +++ b/src/app/data-entries/input-group/input-group-styling/layout.scss @@ -1,3 +1,49 @@ -.sample-column { - max-width: 550px; +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/input/input-group-component" as input; +@use "sass:map"; + +:host { + ::ng-deep { + $_input-schema: map.get($light-indigo-schema, input-group); + @include input-group(input-group-theme($schema: $_input-schema)); + @include input.component(); + + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the Carbon sample. + + .igx-input-group__bundle { + background: var(--box-background-hover); + + [igxinput].igx-input-group__input { + letter-spacing: rem(0.16px); + padding-block: 0; + padding-inline: rem(12px); + font-size: rem(14px); + } + + input::placeholder { + font-size: rem(14px); + font-style: normal; + opacity: 0.7; + font-weight: 300; + font-family: "IBM Plex Sans", sans-serif; + } + } + + .igx-input-group--focused .igx-input-group__bundle::after { + border-block-end: 0; + inset: 0; + pointer-events: none; + box-shadow: inset 0 0 0 rem(2px) var(--border-color); + } + } +} + +igx-input-group { + --ig-font-family: "IBM Plex Sans", sans-serif; } + +.sample-column { + max-width: rem(300px); + margin-top: 1.5rem; +} \ No newline at end of file diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html index 4a71009af8..afc5c45d12 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html @@ -1,4 +1,4 @@
- -
- + + \ No newline at end of file diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss index 7a54891f9c..2cf2f4d4b3 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss @@ -1,9 +1,170 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$custom-calendar-theme: calendar-theme( - $header-background: #ecaa53, - $content-background: #011627, -); +// CSS variables approach -@include css-vars($custom-calendar-theme); +:host { + ::ng-deep { + .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { + --date-hover-background: var(--background-hover); + --date-selected-foreground: var(--primary); + --date-selected-background: #FFF; + --date-selected-border-color: var(--primary); + --date-selected-focus-foreground: var(--primary); + --date-selected-focus-background: var(--background-hover); + --date-selected-focus-border-color: var(--primary); + --date-selected-hover-foreground: var(--primary); + --date-selected-hover-background: var(--background-hover); + --date-selected-hover-border-color: var(--primary); + --date-selected-current-hover-background: var(--background-hover); + --date-selected-current-focus-background: var(--background-hover); + --date-selected-current-background: #FFF; + --date-selected-current-border-color: var(--primary); + --date-selected-current-hover-border-color: var(--primary); + --date-current-hover-background: var(--background-hover); + } + } +} + +igx-calendar { + --date-focus-background: transparent; + --week-number-background: transparent; + --weekend-color: #131E29; + --weekday-color: #556B82; + --week-number-foreground: #556B82; + --inactive-color: #556B82; + --date-current-border-color: var(--current-border); + --date-current-hover-border-color: var(--current-border); + --date-current-focus-border-color: var(--current-border); + --date-current-hover-background: var(--background-weekend); + --date-selected-current-border-color: var(--current-border); + --date-selected-current-background: #FFF; + --date-selected-current-foreground: var(--primary); + --date-selected-current-focus-border-color: var(--current-border); + --date-selected-current-focus-background: var(--background-weekend); + --date-selected-current-focus-foreground: var(--primary); + --date-selected-current-hover-border-color: var(--current-border); + --date-selected-current-hover-background: var(--background-weekend); + --date-selected-current-hover-foreground: var(--primary); + --date-selected-foreground: var(--primary); + --date-selected-background: #FFF; + --date-selected-border-color: var(--primary); + --date-selected-hover-foreground: var(--primary); + --date-selected-hover-background: var(--background-weekend); + --date-selected-hover-border-color: var(--primary); + --date-selected-focus-foreground: var(--primary); + --date-selected-focus-background: var(--background-weekend); + --date-selected-focus-border-color: var(--primary); + --picker-foreground: var(--primary); + --picker-hover-foreground: var(--primary); + --picker-focus-foreground: var(--primary); + --ym-hover-background: var(--background); + --ym-selected-background: #EDF5FF; + --ym-selected-hover-background: #D9EAFF; + --ym-selected-hover-foreground: var(--primary); + --ym-selected-outline-color: var(--primary); + --ym-selected-hover-outline-color: var(--primary); + --ym-selected-focus-outline-color: var(--primary); + --ym-selected-focus-background: #D9EAFF; + --ym-current-foreground: var(--primary); + --ym-current-background: transparent; + --ym-current-outline-color: transparent; + --ym-current-hover-foreground: var(--primary); + --ym-current-hover-background: var(--background); + --ym-current-outline-hover-color: var(--primary); + --ym-selected-current-foreground: var(--primary); + --ym-selected-current-background: #EDF5FF; + --ym-selected-current-outline-color: var(--primary); + --ym-selected-current-hover-foreground: var(--primary); + --ym-selected-current-hover-background: #D9EAFF; + --ym-selected-current-outline-hover-color: var(--primary); + --ym-selected-current-outline-focus-color: var(--primary); +} + +// Sass theme approach + +// $custom-calendar-theme-weekend: calendar-theme( +// $date-hover-background: var(--background-hover), +// $date-selected-foreground: var(--primary), +// $date-selected-background: #FFF, +// $date-selected-border-color: var(--primary), +// $date-selected-focus-foreground: var(--primary), +// $date-selected-focus-background: var(--background-hover), +// $date-selected-focus-border-color: var(--primary), +// $date-selected-hover-foreground: var(--primary), +// $date-selected-hover-background: var(--background-hover), +// $date-selected-hover-border-color: var(--primary), +// $date-selected-current-hover-background: var(--background-hover), +// $date-selected-current-focus-background: var(--background-hover), +// $date-selected-current-background: #FFF, +// $date-selected-current-border-color: var(--primary), +// $date-selected-current-hover-border-color: var(--primary), +// $date-current-hover-background: var(--background-hover) +// ); + +// $custom-calendar-theme: calendar-theme( +// $date-focus-background: transparent, +// $picker-foreground: var(--primary), +// $picker-hover-foreground: var(--primary), +// $picker-focus-foreground: var(--primary), +// $weekday-color: #556B82, +// $weekend-color: #131E29, +// $inactive-color: #556B82, +// $week-number-foreground: #556B82, +// $week-number-background: transparent, +// $ym-selected-current-hover-foreground: var(--primary), +// $ym-selected-current-hover-background: #D9EAFF, +// $ym-hover-background: var(--background), +// $ym-current-foreground: var(--primary), +// $ym-current-background: transparent, +// $ym-current-hover-foreground: var(--primary), +// $ym-current-hover-background: var(--background), +// $ym-selected-current-foreground: var(--primary), +// $ym-selected-current-background: #EDF5FF, +// $ym-selected-background: #EDF5FF, +// $ym-selected-hover-foreground: var(--primary), +// $ym-selected-hover-background: #D9EAFF, +// $ym-current-outline-color: transparent, +// $ym-current-outline-hover-color: var(--primary), +// $ym-selected-outline-color: var(--primary), +// $ym-selected-hover-outline-color: var(--primary), +// $ym-selected-focus-outline-color: var(--primary), +// $ym-selected-current-outline-color: var(--primary), +// $ym-selected-current-outline-hover-color: var(--primary), +// $ym-selected-current-outline-focus-color: var(--primary), +// $date-selected-current-foreground: var(--primary), +// $date-selected-current-background: #FFF, +// $date-selected-current-hover-foreground: var(--primary), +// $date-selected-current-hover-background: var(--background-weekend), +// $date-selected-current-focus-foreground: var(--primary), +// $date-selected-current-focus-background: var(--background-weekend), +// $date-selected-foreground: var(--primary), +// $date-selected-background: #FFF, +// $date-selected-border-color: var(--primary), +// $date-selected-hover-foreground: var(--primary), +// $date-selected-hover-background: var(--background-weekend), +// $date-selected-hover-border-color: var(--primary), +// $date-selected-focus-foreground: var(--primary), +// $date-selected-focus-background: var(--background-weekend), +// $date-selected-focus-border-color: var(--primary), +// $date-current-border-color: var(--current-border), +// $date-current-hover-border-color: var(--current-border), +// $date-current-focus-border-color: var(--current-border), +// $date-selected-current-border-color: var(--current-border), +// $date-selected-current-hover-border-color: var(--current-border), +// $date-selected-current-focus-border-color: var(--current-border), +// $date-current-hover-background: var(--background-weekend), +// $border-radius: 0.5rem, +// ); + +// :host { +// ::ng-deep { +// .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { +// @include css-vars($custom-calendar-theme-weekend); +// } +// } +// } + +// igx-calendar { +// @include css-vars($custom-calendar-theme); +// } diff --git a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss b/src/app/scheduling/calendar/calendar-styling-sample/layout.scss index 538514fc6b..0137d25407 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/layout.scss @@ -1,12 +1,135 @@ @use "igniteui-angular/theming" as *; +:host { + ::ng-deep { + + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. + + [title="Week"] .igx-days-view__label.igx-days-view__label--week-number { + opacity: 0; + } + + igx-icon { + --color: var(--primary); + --size: #{rem(20px)}; + } + + .igx-calendar-view__item-inner { + color: var(--primary) + } + + .igx-days-view__date--selected span { + font-weight: 700; + } + + .igx-days-view__date--current span { + border-width: .125rem; + } + + .igx-days-view__date--weekend:not(.igx-days-view__date--inactive):not(.igx-days-view__date--selected) span:not(:hover) { + background: var(--background-weekend); + } + + .igx-days-view__date--active ::after { + border: .125rem solid #0032A5; + width: 1.25rem; + height: 1.25rem; + border-radius: 0.1875rem; + left: rem(3px); + } + + .igx-days-view__date--active.igx-days-view__date--current :after { + left: rem(2px); + } + + .igx-calendar-view__item:not(.igx-calendar-view__item--selected) .igx-calendar-view__item-inner:hover { + box-shadow: inset 0 0 0 0.0625rem #BCC3CA; + } + + .igx-calendar-view { + padding: 1rem 0.375rem; + } + + .igx-calendar-picker__prev { + position: absolute; + } + + .igx-calendar-picker__next { + position: absolute; + right: 0; + } + + .igx-calendar-picker__nav { + position: relative; + left: 0; + bottom: 1.7rem; + } + + .igx-calendar-picker__next:hover, + .igx-calendar-picker__prev:hover { + background-color: var(--background); + border-radius: 0.5rem; + box-shadow: inset 0 0 0 0.0625rem #BCC3CA; + } + + .igx-calendar-picker__next, + .igx-calendar-picker__prev { + padding: rem(6px); + } + + .igx-calendar-picker { + display: unset; + } + + .igx-calendar-picker__dates { + justify-content: center; + position: relative; + top: 0.25rem; + gap: 1rem; + height: 2rem; + + span:not(.igx-calendar__aria-off-screen) { + font-size: rem(14px); + padding: rem(4px) rem(10px); + + &:hover { + background-color: var(--background); + border-radius: 0.5rem; + box-shadow: inset 0 0 0 0.0625rem #BCC3CA; + } + } + } + + .igx-calendar__pickers--days { + height: 1.5rem; + } + + .igx-calendar-picker { + padding-inline: 1rem; + } + } +} + .calendar-wrapper { - max-width: 600px; - min-width: 200px; - margin: 8px; + max-width: rem(600px); + margin: 0.5rem; } -.igx-calendar { - --ig-size: 2; - box-shadow: elevation(4); +igx-calendar { + --current-border: #A100C2; + --primary: #0064D9; + --background: #EAECEE; + --background-weekend: #E8E8E8; + --background-hover: #F5F6F8; + + width: rem(290px); + min-height: rem(282px); + box-sizing: border-box; + padding-top: 0.4rem; + box-shadow: elevation(4); + --ig-font-family: Arial, sans-serif; + --ig-subtitle-1-font-weight: 600; + --ig-size: 1; + --ig-radius-factor: 0.4; } \ No newline at end of file From 19acc1c359ff2854eb1a896e177462be6a74c1fd Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 12 Aug 2025 16:27:04 +0300 Subject: [PATCH 7/9] chore(input): formatting --- .../input-group-styling.component.scss | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss index 86f6d790de..2fd0639985 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss @@ -2,18 +2,18 @@ @use "igniteui-angular/theming" as *; // CSS variables approach - + igx-input-group { - --border-color: #0f62fe; - --size: #{rem(40px)}; - --idle-bottom-line-color: #8d8d8d; - --hover-bottom-line-color: #8d8d8d; - --hover-placeholder-color: var(--ig-gray-600); - --idle-secondary-color: var(--ig-gray-600); - --focused-secondary-color: var(--ig-gray-700); - --focused-bottom-line-color: #8d8d8d; - --box-background-hover: var(--ig-gray-100); - --helper-text-color: var(--ig-gray-600); + --border-color: #0f62fe; + --size: #{rem(40px)}; + --idle-bottom-line-color: #8d8d8d; + --hover-bottom-line-color: #8d8d8d; + --hover-placeholder-color: var(--ig-gray-600); + --idle-secondary-color: var(--ig-gray-600); + --focused-secondary-color: var(--ig-gray-700); + --focused-bottom-line-color: #8d8d8d; + --box-background-hover: var(--ig-gray-100); + --helper-text-color: var(--ig-gray-600); } // Sass theme approach @@ -31,4 +31,4 @@ igx-input-group { // $placeholder-color: var(--ig-gray-600) // ); -// @include css-vars($custom-input-group); +// @include css-vars($custom-input-group); \ No newline at end of file From c349d62b46a25b15956e8bafeaeb3aa48248a35c Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 21 Aug 2025 18:48:31 +0300 Subject: [PATCH 8/9] chore(samples): format code --- .../chip-styling/chip-styling.component.scss | 13 ++--- .../chip/chip-styling/layout.scss | 16 ++++-- .../buttons-style.component.scss | 30 ++++------ .../buttons/buttons-style/layout.scss | 14 ++++- .../checkbox-styling.component.scss | 25 +++----- .../checkbox/checkbox-styling/layout.scss | 21 +++++-- .../input-group-styling.component.scss | 20 +++---- .../input-group-styling/layout.scss | 2 +- .../radio/radio-styling-sample/layout.scss | 17 +++++- .../radio-styling-sample.component.scss | 21 +++---- .../switch/switch-styling/layout.scss | 17 +++--- .../switch-styling.component.scss | 22 +++---- .../card-styling-sample.component.scss | 57 ++++++++----------- .../card/card-styling-sample/layout.scss | 37 +++++++++--- .../calendar-styling-sample.component.scss | 2 +- .../calendar-styling-sample/layout.scss | 32 +++++------ 16 files changed, 183 insertions(+), 163 deletions(-) diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss index 181418454e..d6f8c34742 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.scss +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.scss @@ -34,17 +34,14 @@ igx-chip { --focus-background: #4682af; } -igx-icon { - --size: 0.75rem; -} - // Sass theme approach // $custom-chip-theme: chip-theme( -// $background: #cd201f, -// $text-color: #fff, -// $hover-background: #cd201f, -// $focus-background: #9f1717, +// $background: #cd201f, +// $text-color: #fff, +// $hover-background: #cd201f, +// $focus-background: #9f1717, +// $border-radius: rem(5px) // ); // @include css-vars($custom-chip-theme) diff --git a/src/app/data-display/chip/chip-styling/layout.scss b/src/app/data-display/chip/chip-styling/layout.scss index b0f88b14a8..f80fd2f1c4 100644 --- a/src/app/data-display/chip/chip-styling/layout.scss +++ b/src/app/data-display/chip/chip-styling/layout.scss @@ -1,17 +1,23 @@ +@use "igniteui-angular/theming" as *; + :host { ::ng-deep { .igx-chip__item { - height: 1.25rem; - font-size: 0.75rem; + height: rem(20px); + font-size: rem(12px); } } } igx-chip { - margin-right: 0.5rem; - margin-top: 1.25rem; + margin-right: rem(8px); + margin-top: rem(20px); } igx-chips-area { - margin-left: 1.25rem; + margin-left: rem(20px); +} + +igx-icon { + --size: #{rem(12px)}; } \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss index 3652a0551f..bd11ce2997 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss @@ -197,30 +197,20 @@ $list: ( --active-background: transparent; } -.button-sample button { - --ig-size: var(--ig-size-medium); - padding: 0px rem(7px); - min-width: unset; -} - -.button-sample .igx-button { - --ig-font-family: 'alibaba-sans', sans-serif; -} - // Sass theme approach // $custom-button-theme: button-theme( -// $background: #f9f0ff, -// $foreground: #722ed1, -// $border-color: #722ed1, -// $hover-background: #efdbff, -// $hover-foreground: #9254de, -// $hover-border-color: #9254de, -// $active-border-color: #531dab, -// $active-foreground: #531dab, -// $focus-visible-background: #f9f0ff, +// $background: #f9f0ff, +// $foreground: #722ed1, +// $border-color: #722ed1, +// $hover-background: #efdbff, +// $hover-foreground: #9254de, +// $hover-border-color: #9254de, +// $active-border-color: #531dab, +// $active-foreground: #531dab, +// $focus-visible-background: #f9f0ff, // ); // .button-sample { -// @include css-vars($custom-button-theme) +// @include css-vars($custom-button-theme) // } \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/layout.scss b/src/app/data-entries/buttons/buttons-style/layout.scss index 96386c4039..43cf337fa2 100644 --- a/src/app/data-entries/buttons/buttons-style/layout.scss +++ b/src/app/data-entries/buttons/buttons-style/layout.scss @@ -14,7 +14,7 @@ [class^=buttons-sample] { display: flex; - margin: 1rem 0.5rem 0.5rem 1rem; + margin: 1rem rem(8px) rem(8px) 1rem; } .button-sample { @@ -32,6 +32,16 @@ [igxbutton] { --ig-button-font-weight: 400; --ig-button-text-transform: capitalize; - min-height: 1.5rem; + min-height: rem(24px); outline: rem(1px) solid #fff; +} + +.button-sample button { + --ig-size: var(--ig-size-medium); + padding: 0px rem(7px); + min-width: unset; +} + +.button-sample .igx-button { + --ig-font-family: 'alibaba-sans', sans-serif; } \ No newline at end of file diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index 7130b9e810..d5b54306a9 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -10,31 +10,24 @@ igx-checkbox { --fill-color-hover: #e3f0ff; --label-color: #131e29; --focus-outline-color: #0032a5; - --border-radius: 0.25rem; - --ig-font-family: Arial, Helvetica, sans-serif; - --ig-subtitle-1-font-size: 0.875rem; + --border-radius: #{rem(4px)}; } igx-checkbox:hover { --empty-fill-color: #e3f0ff; } -#checkbox-1.igx-checkbox--focused:after { - inset: 0.5rem -0.25rem 0.5rem 0.5rem; - border-radius: 0.5rem; -} - // Sass theme approach // $custom-checkbox-theme: checkbox-theme( -// $tick-color: #0064d9, -// $tick-color-hover: #e3f0ff, -// $fill-color: transparent, -// $fill-color-hover: #e3f0ff, -// $label-color: #131e29, -// $focus-outline-color: #0032a5, -// $empty-color: #131e29, -// $border-radius: 0.25rem, +// $tick-color: #0064d9, +// $tick-color-hover: #e3f0ff, +// $fill-color: transparent, +// $fill-color-hover: #e3f0ff, +// $label-color: #131e29, +// $focus-outline-color: #0032a5, +// $empty-color: #131e29, +// $border-radius: rem(4px), // ); // @include css-vars($custom-checkbox-theme) diff --git a/src/app/data-entries/checkbox/checkbox-styling/layout.scss b/src/app/data-entries/checkbox/checkbox-styling/layout.scss index c4da1af9df..bbc3701553 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/layout.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/layout.scss @@ -8,15 +8,16 @@ @include checkbox(checkbox-theme($schema: $_checkbox-schema)); @include checkbox.component(); - // Note: This is not the standard approach for styling the component. - // We're using it here solely to mirror the UI5 sample. + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. + .igx-checkbox--checked .igx-checkbox__composite-wrapper .igx-checkbox__composite { border-color: var(--empty-color); } .igx-checkbox__composite { - min-width: 1.125rem; - height: 1.125rem; + min-width: rem(18px); + height: rem(18px); } .igx-checkbox--checked:hover .igx-checkbox__composite-wrapper .igx-checkbox__composite { @@ -30,6 +31,14 @@ } igx-checkbox { + --ig-font-family: Arial, Helvetica, sans-serif; + --ig-subtitle-1-font-size: #{rem(14px)}; + display: flex; - margin: 1.25rem 0 0 1.25rem; -} \ No newline at end of file + margin: rem(18px) 0 0 rem(18px); +} + +#checkbox-1.igx-checkbox--focused:after { + inset: rem(8px) rem(-4px) rem(8px) rem(8px); + border-radius: rem(8px); +} diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss index 2fd0639985..0f3048cc57 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss @@ -19,16 +19,16 @@ igx-input-group { // Sass theme approach // $custom-input-group: input-group-theme( -// $border-color: #0f62fe, -// $idle-bottom-line-color: #8d8d8d, -// $hover-bottom-line-color: #8d8d8d, -// $hover-placeholder-color: var(--ig-gray-700), -// $idle-secondary-color: var(--ig-gray-700), -// $focused-secondary-color: var(--ig-gray-700), -// $size: #{rem(40px)}, -// $box-border-radius: 0, -// $box-background-hover: var(--ig-gray-100), -// $placeholder-color: var(--ig-gray-600) +// $border-color: #0f62fe, +// $idle-bottom-line-color: #8d8d8d, +// $hover-bottom-line-color: #8d8d8d, +// $hover-placeholder-color: var(--ig-gray-700), +// $idle-secondary-color: var(--ig-gray-700), +// $focused-secondary-color: var(--ig-gray-700), +// $size: rem(40px), +// $box-border-radius: 0, +// $box-background-hover: var(--ig-gray-100), +// $placeholder-color: var(--ig-gray-600) // ); // @include css-vars($custom-input-group); \ No newline at end of file diff --git a/src/app/data-entries/input-group/input-group-styling/layout.scss b/src/app/data-entries/input-group/input-group-styling/layout.scss index d9311ea3bf..413d03499d 100644 --- a/src/app/data-entries/input-group/input-group-styling/layout.scss +++ b/src/app/data-entries/input-group/input-group-styling/layout.scss @@ -45,5 +45,5 @@ igx-input-group { .sample-column { max-width: rem(300px); - margin-top: 1.5rem; + margin-top: rem(24px); } \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/layout.scss b/src/app/data-entries/radio/radio-styling-sample/layout.scss index 09a1c60869..2eecc4035e 100644 --- a/src/app/data-entries/radio/radio-styling-sample/layout.scss +++ b/src/app/data-entries/radio/radio-styling-sample/layout.scss @@ -10,6 +10,7 @@ // Note: This is not the standard approach for styling the component. // We're using it here solely to mirror the UI5 sample. + .igx-radio--checked .igx-radio__composite::after { --fill-color: #556b81; } @@ -17,12 +18,12 @@ .igx-radio__composite::after, .igx-radio__composite::before, .igx-radio__composite { - width: 1.125rem; - height: 1.125rem; + width: rem(18px); + height: rem(18px); } .igx-radio__composite { - min-width: 1.125rem; + min-width: rem(18px); } .igx-radio__ripple { @@ -35,8 +36,18 @@ igx-radio + igx-radio { margin-top: 1rem; } +igx-radio { + --ig-subtitle-1-font-size: #{rem(14px)}; + --ig-font-family: Arial,Helvetica,sans-serif; +} + .radio-wrapper { display: flex; flex-flow: column nowrap; padding: 1rem; +} + +.igx-radio--focused::after { + inset: rem(1px) rem(-4px) rem(1px) rem(-2px); + border-radius: rem(8px); } \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss index 15200553f4..93e3f63db7 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss @@ -8,8 +8,6 @@ igx-radio { --label-color: #131e29; --fill-color: #0064d9; --focus-outline-color: #0032a5; - --ig-subtitle-1-font-size: #{rem(14px)}; - --ig-font-family: Arial,Helvetica,sans-serif; } igx-radio:hover { @@ -18,20 +16,15 @@ igx-radio:hover { --hover-color: transparent; } -.igx-radio--focused::after { - inset: rem(1px) rem(-4px) rem(1px) rem(-2px); - border-radius: rem(8px); -} - // Sass theme approach // $custom-radio-theme: radio-theme( -// $empty-color: #556b81, -// $label-color: #131e29, -// $fill-color: #0064d9, -// $focus-outline-color: #0032a5, -// $fill-color-hover: #0064d9, -// $hover-color: transparent +// $empty-color: #556b81, +// $label-color: #131e29, +// $fill-color: #0064d9, +// $focus-outline-color: #0032a5, +// $fill-color-hover: #0064d9, +// $hover-color: transparent // ); -// @include css-vars($custom-radio-theme); +// @include css-vars($custom-radio-theme); diff --git a/src/app/data-entries/switch/switch-styling/layout.scss b/src/app/data-entries/switch/switch-styling/layout.scss index 7dbac62440..8e3206d3fe 100644 --- a/src/app/data-entries/switch/switch-styling/layout.scss +++ b/src/app/data-entries/switch/switch-styling/layout.scss @@ -10,27 +10,28 @@ // Note: This is not the standard approach for styling the component. // We're using it here solely to mirror the UI5 sample. + igx-switch:hover .igx-switch__thumb { --border-hover-color: #fff; } .igx-switch__composite { - width: 2.75rem; - height: 1.25rem; - padding-left: 0.125rem; + width: rem(44px); + height: rem(20px); + padding-left: rem(2px); } .igx-switch__composite-thumb { - width: 1.60rem; + width: rem(25px); height: 1rem; - min-width: 1.60rem; + min-width: rem(25px); transform: translateX(-0.5px); } .igx-switch__thumb { - width: 1.60rem; + width: rem(25px); height: 1rem; - min-width: 1.60rem; + min-width: rem(25px); } .igx-switch--checked .igx-switch__composite .igx-switch__composite-thumb { @@ -44,7 +45,7 @@ } igx-switch { - margin-top: 1.5rem; + margin-top: rem(24px); width: max-content; } diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss index ad1c3e7b27..16bff6ad2f 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss @@ -24,17 +24,17 @@ igx-switch:hover { // Sass theme approach // $custom-switch-theme: switch-theme( -// $thumb-on-color: #e3f0ff, -// $track-on-color: #0064d9, -// $track-on-hover-color: #0058bf, -// $thumb-off-color: #fff, -// $track-off-color: #788fa6, -// $border-radius-track: 1rem, -// $focus-outline-color: #0032a5, -// $border-on-color: transparent, -// $border-on-hover-color: transparent, -// $border-color: transparent, -// $border-hover-color: transparent, +// $thumb-on-color: #e3f0ff, +// $track-on-color: #0064d9, +// $track-on-hover-color: #0058bf, +// $thumb-off-color: #fff, +// $track-off-color: #788fa6, +// $border-radius-track: 1rem, +// $focus-outline-color: #0032a5, +// $border-on-color: transparent, +// $border-on-hover-color: transparent, +// $border-color: transparent, +// $border-hover-color: transparent, // ); // @include css-vars($custom-switch-theme) diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss index b9a71fcbcd..91f04b5895 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss @@ -9,9 +9,6 @@ igx-card { --resting-shadow: none; --hover-shadow: none; --header-text-color: rgba(0, 0, 0, 0.88); - --ig-font-family: 'alibaba-sans', sans-serif; - width: rem(300px); - border: none; } igx-avatar { @@ -19,24 +16,10 @@ igx-avatar { --size: #{rem(30px)}; } -.igx-card-header { - --ig-h6-font-size: 1rem; - --ig-body-1-font-size: 0.875rem; -} - -.igx-card-header__subtitle { - --ig-subtitle-2-font-weight: 400; - --ig-subtitle-2-line-height: #{rem(28px)}; - --ig-subtitle-2-letter-spacing: #{rem(0.5px)}; - --subtitle-text-color: rgba(0, 0, 0, 0.45); - margin: 0.5rem 0 1rem; -} - igx-chip { - --border-radius: 0.25rem; + --border-radius: #{rem(4px)}; --background: #fafafa; --border-color: #d9d9d9; - --ig-body-2-font-size: 0.75rem; --hover-background: #d9d9d9; --focus-background: #d9d9d9; } @@ -54,36 +37,42 @@ igx-divider { // Sass theme approach // $custom-card-theme: card-theme( -// $border-radius: 8px, -// $outline-color: #f0f0f0, -// $resting-shadow: none, -// $hover-shadow: none, -// $header-text-color: #000000e0, +// $border-radius: rem(8px), +// $outline-color: #f0f0f0, +// $resting-shadow: none, +// $hover-shadow: none, +// $header-text-color: #000000e0, +// ); + +// $custom-avatar-theme: avatar-theme( +// $background: transparent, +// $size: rem(30px) // ); // $custom-chip-theme: chip-theme( -// $border-radius: 4px, -// $background: #fafafa, -// $border-color: #d9d9d9, -// $hover-background: #d9d9d9, -// $focus-background: #d9d9d9, +// $border-radius: rem(4px), +// $background: #fafafa, +// $border-color: #d9d9d9, +// $hover-background: #d9d9d9, +// $focus-background: #d9d9d9, // ); // $custom-icon-button-theme: icon-button-theme( -// $foreground: #00000073, -// $hover-foreground: #1677ff, -// $hover-background: none, -// $border-color: transparent +// $foreground: #00000073, +// $hover-foreground: #1677ff, +// $hover-background: none, +// $border-color: transparent // ); // $custom-divider-theme: divider-theme( -// $color: #f0f0f0 +// $color: #f0f0f0 // ); // @include css-vars($custom-card-theme); +// @include css-vars($custom-avatar-theme); // @include css-vars($custom-chip-theme); // @include css-vars($custom-divider-theme); // .igx-icon-button--flat { -// @include css-vars($custom-icon-button-theme); +// @include css-vars($custom-icon-button-theme); // }; \ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/layout.scss b/src/app/layouts/card/card-styling-sample/layout.scss index 5049182da4..7235fd02d6 100644 --- a/src/app/layouts/card/card-styling-sample/layout.scss +++ b/src/app/layouts/card/card-styling-sample/layout.scss @@ -3,31 +3,52 @@ :host { ::ng-deep { .igx-chip__item { - padding: 0 rem(5px); - height: rem(22px); + padding: 0 rem(5px); + height: rem(22px); } } } +.igx-card { + --ig-font-family: 'alibaba-sans', sans-serif; + + width: rem(300px); + border: none; +} + .border { - border: 0.0625rem solid var(--outline-color); - border-bottom-right-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; + border: rem(1px) solid var(--outline-color); + border-bottom-right-radius: rem(8px); + border-bottom-left-radius: rem(8px); border-top: none; } .igx-card-header{ + --ig-h6-font-size: 1rem; + --ig-body-1-font-size: #{rem(14px)}; + width: unset; padding: unset; align-items: baseline; - margin: 1.5rem 1.5rem 0 1.5rem; + margin: rem(24px) rem(24px) 0 rem(24px); height: rem(70px); } +.igx-card-header__subtitle { + --ig-subtitle-2-font-weight: 400; + --ig-subtitle-2-line-height: #{rem(28px)}; + --ig-subtitle-2-letter-spacing: #{rem(0.5px)}; + --subtitle-text-color: rgba(0, 0, 0, 0.45); + + margin: #{rem(8px)} 0 1rem; +} + .igx-card-content { padding: 0; igx-chip { + --ig-body-2-font-size: #{rem(12px)}; + padding: rem(5px); &:nth-of-type(1) { @@ -46,9 +67,9 @@ igx-icon { igx-card-actions { justify-content: space-evenly; - padding: 0.4rem 0; + padding: rem(6px) 0; igx-divider { - height: 1.50rem; + height: rem(24px); } } diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss index 2cf2f4d4b3..8768f9008f 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss @@ -154,7 +154,7 @@ igx-calendar { // $date-selected-current-hover-border-color: var(--current-border), // $date-selected-current-focus-border-color: var(--current-border), // $date-current-hover-background: var(--background-weekend), -// $border-radius: 0.5rem, +// $border-radius: rem(8px) // ); // :host { diff --git a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss b/src/app/scheduling/calendar/calendar-styling-sample/layout.scss index 0137d25407..bd4d37889b 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/layout.scss @@ -24,7 +24,7 @@ } .igx-days-view__date--current span { - border-width: .125rem; + border-width: rem(2px); } .igx-days-view__date--weekend:not(.igx-days-view__date--inactive):not(.igx-days-view__date--selected) span:not(:hover) { @@ -32,10 +32,10 @@ } .igx-days-view__date--active ::after { - border: .125rem solid #0032A5; - width: 1.25rem; - height: 1.25rem; - border-radius: 0.1875rem; + border: rem(2px) solid #0032A5; + width: rem(20px); + height: rem(20px); + border-radius: rem(3px); left: rem(3px); } @@ -44,11 +44,11 @@ } .igx-calendar-view__item:not(.igx-calendar-view__item--selected) .igx-calendar-view__item-inner:hover { - box-shadow: inset 0 0 0 0.0625rem #BCC3CA; + box-shadow: inset 0 0 0 rem(1px) #BCC3CA; } .igx-calendar-view { - padding: 1rem 0.375rem; + padding: 1rem rem(6px); } .igx-calendar-picker__prev { @@ -63,14 +63,14 @@ .igx-calendar-picker__nav { position: relative; left: 0; - bottom: 1.7rem; + bottom: rem(27px); } .igx-calendar-picker__next:hover, .igx-calendar-picker__prev:hover { background-color: var(--background); - border-radius: 0.5rem; - box-shadow: inset 0 0 0 0.0625rem #BCC3CA; + border-radius: rem(8px); + box-shadow: inset 0 0 0 rem(1px) #BCC3CA; } .igx-calendar-picker__next, @@ -85,7 +85,7 @@ .igx-calendar-picker__dates { justify-content: center; position: relative; - top: 0.25rem; + top: rem(4px); gap: 1rem; height: 2rem; @@ -95,14 +95,14 @@ &:hover { background-color: var(--background); - border-radius: 0.5rem; - box-shadow: inset 0 0 0 0.0625rem #BCC3CA; + border-radius: rem(8px); + box-shadow: inset 0 0 0 rem(1px) #BCC3CA; } } } .igx-calendar__pickers--days { - height: 1.5rem; + height: rem(24px); } .igx-calendar-picker { @@ -113,7 +113,7 @@ .calendar-wrapper { max-width: rem(600px); - margin: 0.5rem; + margin: rem(8px); } igx-calendar { @@ -126,7 +126,7 @@ igx-calendar { width: rem(290px); min-height: rem(282px); box-sizing: border-box; - padding-top: 0.4rem; + padding-top: rem(6px); box-shadow: elevation(4); --ig-font-family: Arial, sans-serif; --ig-subtitle-1-font-weight: 600; From 560f23473feb4ebb219ffbb24a4388625b3e4746 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Mon, 25 Aug 2025 11:53:20 +0300 Subject: [PATCH 9/9] fix(card & input): styling --- .../input-group-styling.component.scss | 7 ++++--- .../input-group/input-group-styling/layout.scss | 4 ++++ .../card-styling-sample.component.scss | 3 +-- src/app/layouts/card/card-styling-sample/layout.scss | 10 +++++++--- 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss index 0f3048cc57..39ee2fd71d 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss @@ -22,13 +22,14 @@ igx-input-group { // $border-color: #0f62fe, // $idle-bottom-line-color: #8d8d8d, // $hover-bottom-line-color: #8d8d8d, -// $hover-placeholder-color: var(--ig-gray-700), -// $idle-secondary-color: var(--ig-gray-700), +// $hover-placeholder-color: var(--ig-gray-600), +// $idle-secondary-color: var(--ig-gray-600), // $focused-secondary-color: var(--ig-gray-700), // $size: rem(40px), // $box-border-radius: 0, // $box-background-hover: var(--ig-gray-100), -// $placeholder-color: var(--ig-gray-600) +// $placeholder-color: var(--ig-gray-600), +// $helper-text-color: var(--ig-gray-600) // ); // @include css-vars($custom-input-group); \ No newline at end of file diff --git a/src/app/data-entries/input-group/input-group-styling/layout.scss b/src/app/data-entries/input-group/input-group-styling/layout.scss index 413d03499d..74026e1dc1 100644 --- a/src/app/data-entries/input-group/input-group-styling/layout.scss +++ b/src/app/data-entries/input-group/input-group-styling/layout.scss @@ -36,6 +36,10 @@ pointer-events: none; box-shadow: inset 0 0 0 rem(2px) var(--border-color); } + + .igx-input-group__label, igx-hint { + font-weight: 300; + } } } diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss index 91f04b5895..fff5af5c9c 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss @@ -74,5 +74,4 @@ igx-divider { // @include css-vars($custom-divider-theme); // .igx-icon-button--flat { // @include css-vars($custom-icon-button-theme); -// }; - \ No newline at end of file +// }; \ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/layout.scss b/src/app/layouts/card/card-styling-sample/layout.scss index 7235fd02d6..c56ee6fee1 100644 --- a/src/app/layouts/card/card-styling-sample/layout.scss +++ b/src/app/layouts/card/card-styling-sample/layout.scss @@ -31,16 +31,16 @@ padding: unset; align-items: baseline; margin: rem(24px) rem(24px) 0 rem(24px); - height: rem(70px); + height: rem(65px); } .igx-card-header__subtitle { --ig-subtitle-2-font-weight: 400; - --ig-subtitle-2-line-height: #{rem(28px)}; + --ig-subtitle-2-line-height: #{rem(22px)}; --ig-subtitle-2-letter-spacing: #{rem(0.5px)}; --subtitle-text-color: rgba(0, 0, 0, 0.45); - margin: #{rem(8px)} 0 1rem; + margin: rem(8px) 0 rem(12px); } .igx-card-content { @@ -65,6 +65,10 @@ igx-icon { --igx-icon-size: #{rem(14px)}; } +igx-avatar { + border-radius: rem(20px); +} + igx-card-actions { justify-content: space-evenly; padding: rem(6px) 0;