From 1f903bb7c3e340d83b01781d129c5f7d1bb5b0e1 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 6 Nov 2024 17:27:28 +0200 Subject: [PATCH 001/131] initial commit --- .gitignore | 3 + package-lock.json | 130 ++++++++++++++ package.json | 10 +- .../src/lib/avatar/avatar.component.ts | 13 +- .../src/lib/avatar/themes/base.scss | 83 +++++++++ .../src/lib/avatar/themes/dark/_themes.scss | 7 + .../src/lib/avatar/themes/dark/bootstrap.scss | 10 ++ .../src/lib/avatar/themes/dark/fluent.scss | 10 ++ .../src/lib/avatar/themes/dark/indigo.scss | 10 ++ .../src/lib/avatar/themes/dark/material.scss | 10 ++ .../src/lib/avatar/themes/light/_themes.scss | 8 + .../lib/avatar/themes/light/bootstrap.scss | 9 + .../src/lib/avatar/themes/light/fluent.scss | 9 + .../src/lib/avatar/themes/light/indigo.scss | 9 + .../src/lib/avatar/themes/light/material.scss | 9 + .../lib/avatar/themes/shared/bootstrap.scss | 20 +++ .../src/lib/avatar/themes/shared/indigo.scss | 5 + .../components/avatar/_avatar-theme.scss | 2 - .../styles/components/chip/_chip-theme.scss | 2 +- .../core/styles/themes/generators/_base.scss | 18 +- .../src/lib/services/theme/theme.service.ts | 75 ++++++++ scripts/build-component-styles.mjs | 3 + scripts/build-styles.mjs | 112 +----------- scripts/report.mjs | 19 ++ scripts/sass.mjs | 166 ++++++++++++++++++ scripts/styles.tmpl | 3 + scripts/watch-styles.mjs | 52 ++++++ src/app/styleguide/colors/color.sample.scss | 8 + src/assets/styles/test-theme.css | 7 + src/styles/_demo-theme.scss | 22 +++ src/styles/_variables.scss | 8 +- 31 files changed, 722 insertions(+), 130 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/base.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/_themes.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/_themes.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/material.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss create mode 100644 scripts/build-component-styles.mjs create mode 100644 scripts/report.mjs create mode 100644 scripts/sass.mjs create mode 100644 scripts/styles.tmpl create mode 100644 scripts/watch-styles.mjs create mode 100644 src/assets/styles/test-theme.css diff --git a/.gitignore b/.gitignore index 59a9c88a366..bb5aa2377e5 100644 --- a/.gitignore +++ b/.gitignore @@ -48,6 +48,9 @@ src/**/*.js src/**/*.js.map src/**/*.css.map +# Artefacts +projects/igniteui-angular/**/*.css.ts + # Typedoc Theme extras/docs/themes/typedoc/bin extras/docs/themes/sassdoc/node_modules diff --git a/package-lock.json b/package-lock.json index c355e51d074..0b64dccfeab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,7 @@ "@typescript-eslint/eslint-plugin": "^6.10.0", "@typescript-eslint/parser": "^6.10.0", "autoprefixer": "^10.4.16", + "concurrently": "^9.0.1", "del": "^6.0.0", "eslint": "^8.53.0", "fs-extra": "^11.1.1", @@ -84,6 +85,7 @@ "karma-spec-reporter": "^0.0.36", "lit-html": "^3.1.2", "ng-packagr": "^18.2.1", + "node-watch": "^0.7.4", "postcss": "^8.4.31", "postcss-scss": "^4.0.6", "prettier": "^3.3.2", @@ -8778,6 +8780,124 @@ "node": ">=0.10.0" } }, + "node_modules/concurrently": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.0.1.tgz", + "integrity": "sha512-wYKvCd/f54sTXJMSfV6Ln/B8UrfLBKOYa+lzc6CHay3Qek+LorVSBdMVfyewFhRbH0Rbabsk4D+3PL/VjQ5gzg==", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "^4.1.2", + "lodash": "^4.17.21", + "rxjs": "^7.8.1", + "shell-quote": "^1.8.1", + "supports-color": "^8.1.1", + "tree-kill": "^1.2.2", + "yargs": "^17.7.2" + }, + "bin": { + "conc": "dist/bin/concurrently.js", + "concurrently": "dist/bin/concurrently.js" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/open-cli-tools/concurrently?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/concurrently/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/concurrently/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, + "node_modules/concurrently/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/concurrently/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, "node_modules/configstore": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", @@ -16936,6 +17056,16 @@ "dev": true, "license": "MIT" }, + "node_modules/node-watch": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.4.tgz", + "integrity": "sha512-RinNxoz4W1cep1b928fuFhvAQ5ag/+1UlMDV7rbyGthBIgsiEouS4kvRayvvboxii4m8eolKOIBo3OjDqbc+uQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/nopt": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", diff --git a/package.json b/package.json index 1c6581061db..0828d1d4a2e 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "scripts": { "ng": "ng", - "start": "ng serve --open --hmr", + "start": "concurrently -r \"npm run build:styles:components\" \"npm run watch:styles\" \"ng serve --open --hmr\"", "start:elements": "ng serve --project igniteui-angular-elements", "build": "ng build --configuration production", "test": "ng test igniteui-angular", @@ -22,8 +22,10 @@ "test:i18n": "ts-node --skip-project ./projects/igniteui-angular/src/lib/core/i18n/tests/tests.ts", "test:elements": "ng test igniteui-angular-elements --watch=false --no-progress --code-coverage --source-map=false", "test:elements:watch": "ng test igniteui-angular-elements", - "build:lib": "ng build igniteui-angular --configuration production && npm run build:styles", - "build:styles": "node scripts/build-styles.mjs", + "build:lib": "ng build igniteui-angular --configuration production && npm run build:styles:all", + "build:styles:all": "node scripts/build-styles.mjs", + "build:styles:components": "node scripts/build-component-styles.mjs", + "watch:styles": "node scripts/watch-styles.mjs", "build:migrations": "gulp copyMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular/migrations/tsconfig.json", "build:schematics": "gulp copySchematics && tsc --listEmittedFiles --project ./projects/igniteui-angular/schematics/tsconfig.json", "build:docs": "sassdoc projects/igniteui-angular/src/lib/core/styles && gulp typedoc-build:theme", @@ -106,6 +108,7 @@ "@typescript-eslint/eslint-plugin": "^6.10.0", "@typescript-eslint/parser": "^6.10.0", "autoprefixer": "^10.4.16", + "concurrently": "^9.0.1", "del": "^6.0.0", "eslint": "^8.53.0", "fs-extra": "^11.1.1", @@ -133,6 +136,7 @@ "karma-spec-reporter": "^0.0.36", "lit-html": "^3.1.2", "ng-packagr": "^18.2.1", + "node-watch": "^0.7.4", "postcss": "^8.4.31", "postcss-scss": "^4.0.6", "prettier": "^3.3.2", diff --git a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts index 9440cc566c5..a68c111806f 100644 --- a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts +++ b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts @@ -6,11 +6,14 @@ import { Input, OnInit, TemplateRef, - ViewChild + ViewChild, + inject } from '@angular/core'; import { mkenum } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; +import { ThemeService, ThemedComponent } from '../services/theme/theme.service'; +import styles from './themes/themes.css'; let NEXT_ID = 0; export const IgxAvatarSize = /*@__PURE__*/mkenum({ @@ -56,7 +59,10 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType]; standalone: true, imports: [IgxIconComponent, NgTemplateOutlet] }) -export class IgxAvatarComponent implements OnInit { +export class IgxAvatarComponent implements OnInit, ThemedComponent { + public elementRef = inject(ElementRef); + public themeService = inject(ThemeService); + /** * Returns the `aria-label` attribute of the avatar. * @@ -326,8 +332,6 @@ export class IgxAvatarComponent implements OnInit { } } - constructor(public elementRef: ElementRef) { } - /** * Returns the css url of the image. * @@ -341,6 +345,7 @@ export class IgxAvatarComponent implements OnInit { /** @hidden @internal */ public ngOnInit() { this.roleDescription = this.getRole(); + this.themeService.adoptStyles(IgxAvatarComponent, styles); } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/avatar/themes/base.scss b/projects/igniteui-angular/src/lib/avatar/themes/base.scss new file mode 100644 index 00000000000..15ae7b06848 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/base.scss @@ -0,0 +1,83 @@ +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use './light/themes' as *; + +$theme: $material; + +%igx-avatar-display { + @include sizable(); + + --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); + + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + user-select: none; + color: var-get($theme, 'color'); + background: var-get($theme, 'background'); + vertical-align: middle; + outline-style: none; + flex-shrink: 0; + width: var-get($theme, 'size'); + height: var-get($theme, 'size'); + + igx-icon { + --component-size: 3; + + color: var-get($theme, 'icon-color'); + } + + &::after { + box-shadow: none; + transition: box-shadow .15s $ease-in-out-quad; + } +} + +%igx-avatar-image { + width: 100%; + height: 100%; + border-radius: inherit; + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +%igx-avatar--circle { + border-radius: calc(#{var-get($theme, 'size')} / 2); +} + +%igx-avatar--rounded { + border-radius: var-get($theme, 'border-radius'); +} + +%igx-avatar--initials { + text-transform: uppercase; + font-size: calc(#{var-get($theme, 'size')} / 2); + line-height: calc(#{var-get($theme, 'size')} / 2); +} + +igx-avatar { + @include css-vars-from-theme($base, 'igx-avatar'); +} + +@include b(igx-avatar) { + @extend %igx-avatar-display; + + @include e(image) { + @extend %igx-avatar-image; + } + + @include m(circle) { + @extend %igx-avatar--circle; + } + + @include m(rounded) { + @extend %igx-avatar--rounded; + } + + @include m(initials) { + @extend %igx-avatar--initials; + } +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/_themes.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/_themes.scss new file mode 100644 index 00000000000..f5e829c9657 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/_themes.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/avatar' as *; + +$material: digest-schema($dark-material-avatar); +$bootstrap: digest-schema($dark-bootstrap-avatar); +$fluent: digest-schema($dark-fluent-avatar); +$indigo: digest-schema($dark-indigo-avatar); diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss new file mode 100644 index 00000000000..b56b4b737e2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use '../light/themes' as light; +@use 'themes' as *; + +$theme: $bootstrap; + +igx-avatar { + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss new file mode 100644 index 00000000000..9f6e66f529e --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use '../light/themes' as light; +@use 'themes' as *; + +$theme: $fluent; + +igx-avatar { + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss new file mode 100644 index 00000000000..e45ecd8ab14 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use '../light/themes' as light; +@use 'themes' as *; + +$theme: $indigo; + +igx-avatar { + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss new file mode 100644 index 00000000000..396c1de44a6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use '../light/themes' as light; +@use 'themes' as *; + +$theme: $material; + +igx-avatar { + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/_themes.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/_themes.scss new file mode 100644 index 00000000000..93ea480da81 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/_themes.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/avatar' as *; + +$base: digest-schema($light-avatar); +$material: digest-schema($material-avatar); +$bootstrap: digest-schema($bootstrap-avatar); +$fluent: digest-schema($fluent-avatar); +$indigo: digest-schema($indigo-avatar); diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss new file mode 100644 index 00000000000..6054302576d --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss @@ -0,0 +1,9 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +igx-avatar { + @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss new file mode 100644 index 00000000000..d9ede217890 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss @@ -0,0 +1,9 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use 'themes' as *; + +$theme: $fluent; + +igx-avatar { + @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss new file mode 100644 index 00000000000..f2e0a8167c3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss @@ -0,0 +1,9 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use 'themes' as *; + +$theme: $indigo; + +igx-avatar { + @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss new file mode 100644 index 00000000000..49c5e4fac64 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss @@ -0,0 +1,9 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use 'themes' as *; + +$theme: $material; + +igx-avatar { + @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..b62e90e061c --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss @@ -0,0 +1,20 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +.igx-avatar { + &::after { + position: absolute; + content: ''; + width: 100%; + height: 100%; + border-radius: inherit; + opacity: .5; + } + + &:focus::after { + box-shadow: 0 0 0 rem(3px) var-get($theme, 'background'); + } +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss new file mode 100644 index 00000000000..14901942c18 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss @@ -0,0 +1,5 @@ +.igx-avatar { + igx-icon { + --ig-size: 1; + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index 34bf3ff1fa8..9074330fdf1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss @@ -64,8 +64,6 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin avatar($theme) { - @include css-vars($theme); - $variant: map.get($theme, '_meta', 'variant'); $bootstrap-theme: $variant == 'bootstrap'; $box-shadow: map.get(( diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index 1521c587716..57138289ef8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -385,7 +385,7 @@ } @if $variant == 'indigo' { - %igx-icon-display { + igx-icon { --size: #{sizable(rem(14px), rem(14px), rem(16px))} } } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 0ba134976fe..aec1a92a1bc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -76,6 +76,8 @@ $theme: map.get($schema, '_meta', 'theme'); $variant: map.get($schema, '_meta', 'variant'); + @layer base, #{$theme}, #{$theme}-overrides; + #{$scope} { --ig-size-small: 1; --ig-size-medium: 2; @@ -133,14 +135,18 @@ @include ripple($ripple-theme-map); } - @if is-used('igx-avatar', $exclude) { - $avatar-theme-map: avatar-theme( - $schema: $schema, - ); - $avatar-theme-map: meta.call($theme-handler, $avatar-theme-map); - @include avatar($avatar-theme-map); + igx-avatar { + --theme: var(--ig-theme); } + // @if is-used('igx-avatar', $exclude) { + // $avatar-theme-map: avatar-theme( + // $schema: $schema, + // ); + // $avatar-theme-map: meta.call($theme-handler, $avatar-theme-map); + // @include avatar($avatar-theme-map); + // } + @if is-used('igx-action-strip', $exclude) { $action-strip-theme-map: action-strip-theme( $schema: $schema, diff --git a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts index e7836e47aca..8150a3be0c8 100644 --- a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts +++ b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts @@ -3,6 +3,11 @@ import { mkenum } from "../../core/utils"; import { BehaviorSubject } from "rxjs"; import { DOCUMENT } from "@angular/common"; +export interface ThemedComponent { + elementRef: ElementRef; + themeService: ThemeService; +} + const Theme = /*@__PURE__*/ mkenum({ Material: "material", Fluent: "fluent", @@ -10,11 +15,27 @@ const Theme = /*@__PURE__*/ mkenum({ IndigoDesign: "indigo", }); +export type ThemeVariant = 'light' | 'dark'; + /** * Determines the component theme. */ export type IgxTheme = (typeof Theme)[keyof typeof Theme]; +// eslint-disable-next-line @typescript-eslint/consistent-type-definitions +export type Themes = { + base: string; + shared?: { + [K in IgxTheme | 'shared']?: string; + }; + light: { + [K in IgxTheme | 'shared']?: string; + }; + dark: { + [K in IgxTheme | 'shared']?: string; + }; +}; + @Injectable({ providedIn: "root", }) @@ -24,7 +45,10 @@ export class ThemeService { * Allowed values of type IgxTheme. */ public globalTheme: IgxTheme; + public themeVariant: ThemeVariant; + private themeVariant$ = new BehaviorSubject("light"); private theme$ = new BehaviorSubject("material"); + private componentThemes = new WeakMap(); constructor( @Inject(DOCUMENT) @@ -34,6 +58,10 @@ export class ThemeService { this.globalTheme = value as IgxTheme; }); + this.themeVariant$.asObservable().subscribe((value) => { + this.themeVariant = value as ThemeVariant; + }); + this.init(); } @@ -43,9 +71,18 @@ export class ThemeService { .getPropertyValue("--ig-theme") .trim(); + const themeVariant = globalThis.window + ?.getComputedStyle(this.document.body) + .getPropertyValue("--ig-theme-variant") + .trim(); + if (theme !== "") { this.theme$.next(theme as IgxTheme); } + + if (themeVariant !== "") { + this.themeVariant$.next(themeVariant as ThemeVariant); + } } public getComponentTheme(el: ElementRef) { @@ -54,4 +91,42 @@ export class ThemeService { .getPropertyValue('--theme') .trim() as IgxTheme; } + + + public adoptStyles(componentInstance: Function, themes: Themes) { + let componentStyles = this.componentThemes.get(componentInstance); + + if (!componentStyles) { + componentStyles = new CSSStyleSheet(); + this.componentThemes.set(componentInstance, componentStyles); + document.adoptedStyleSheets = [...document.adoptedStyleSheets, componentStyles]; + } + + componentStyles.replaceSync( + Array.from(this.composeStyleSheet(themes).cssRules) + .map(rules => rules.cssText) + .join('\n') + ); + } + + private composeStyleSheet(themes: Themes) { + const sheet = new CSSStyleSheet(); + + sheet.insertRule(`@layer base {${themes.base}}`); + + for (const [key, value] of Object.entries(themes)) { + if (key === 'shared') { + for (const [theme, styleSheet] of Object.entries(value)) { + sheet.insertRule(`@layer ${theme} {${styleSheet}}`) + } + } + } + + sheet.insertRule(`@layer ${this.globalTheme}-overrides { + ${themes[this.themeVariant][this.globalTheme]} + }`); + + + return sheet; + } } diff --git a/scripts/build-component-styles.mjs b/scripts/build-component-styles.mjs new file mode 100644 index 00000000000..0330498a969 --- /dev/null +++ b/scripts/build-component-styles.mjs @@ -0,0 +1,3 @@ +import { buildComponents } from "./sass.mjs"; + +await Promise.all([buildComponents()]); diff --git a/scripts/build-styles.mjs b/scripts/build-styles.mjs index 60aa5dc6749..743cc15bf59 100644 --- a/scripts/build-styles.mjs +++ b/scripts/build-styles.mjs @@ -1,111 +1,3 @@ -import * as sass from "sass-embedded"; -import postcss from "postcss"; -import autoprefixer from "autoprefixer"; -import { globby } from "globby"; -import path from "path"; -import { mkdirSync as makeDir } from "fs"; -import fsExtra from "fs-extra"; -import { fileURLToPath } from "url"; -import { writeFile } from "fs/promises"; +import { buildComponents, buildThemes } from "./sass.mjs"; -const report = { - success: (s) => console.log("\x1b[32m%s\x1b[0m", s), - warn: (s) => console.warn("\x1b[33m%s\x1b[0m", s), - error: (s) => console.error("\x1b[31m%s\x1b[0m", s), -}; - -const STYLES = { - SRC: "projects/igniteui-angular/src/lib/core/styles/themes/presets", - DIST: "../dist/igniteui-angular/styles", - THEMING: { - SRC: "projects/igniteui-angular/src/lib/core/styles/", - DIST: "dist/igniteui-angular/lib/core/styles/", - }, - CONFIG: { - style: "compressed", - loadPaths: ["node_modules"], - sourceMap: true, - sourceMapEmbed: true, - }, -}; - -const { copySync } = fsExtra; -const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const DEST_DIR = path.join.bind(null, path.resolve(__dirname, STYLES.DIST)); - -const stripComments = () => { - return { - postcssPlugin: "postcss-strip-comments", - OnceExit(root) { - root.walkComments((node) => node.remove()); - }, - }; -}; - -stripComments.postcss = true; - -const postProcessor = postcss([ - autoprefixer({ - cascade: false, - grid: true, - }), - stripComments, -]); - -async function createFile(fileName, content) { - const outputFile = DEST_DIR(fileName); - - makeDir(path.dirname(outputFile), { recursive: true }); - await writeFile(outputFile, content, "utf-8"); -} - -async function buildThemes() { - const paths = await globby(`${STYLES.SRC}/**/*.scss`); - const compiler = await sass.initAsyncCompiler(); - - try { - await Promise.all( - paths.map(async (path) => { - const result = await compiler.compileAsync(path, STYLES.CONFIG); - const fileName = path - .replace(/\.scss$/, ".css") - .replace(STYLES.SRC, ""); - const sourceMapComment = `/*# sourceMappingURL=maps${fileName}.map */`; - - let outCss = postProcessor.process(result.css).css; - - if (outCss.charCodeAt(0) === 0xfeff) { - outCss = outCss.substring(1); - } - - outCss = outCss + "\n".repeat(2) + sourceMapComment; - - await createFile(fileName, outCss); - await createFile( - `maps/${fileName}.map`, - JSON.stringify(result.sourceMap), - ); - }), - ); - } catch (err) { - await compiler.dispose(); - report.error(err); - process.exit(1); - } - - await compiler.dispose(); -} - -(async () => { - const startTime = new Date(); - - // Move theming files - copySync(STYLES.THEMING.SRC, STYLES.THEMING.DIST, { recursive: true }); - - // Build theme presets - console.info("Building themes..."); - await buildThemes(); - report.success( - `Themes generated in ${Math.round((Date.now() - startTime) / 1000)}s`, - ); -})(); +await Promise.all([buildComponents(), buildThemes()]); diff --git a/scripts/report.mjs b/scripts/report.mjs new file mode 100644 index 00000000000..b00fd132261 --- /dev/null +++ b/scripts/report.mjs @@ -0,0 +1,19 @@ +import { stdout } from 'node:process'; +import { format } from 'node:util'; + +export default { + error: (s) => console.error('\x1b[31m%s\x1b[0m', s), + success: (s) => console.info('\x1b[32m%s\x1b[0m', s), + warn: (s) => console.warn('\x1b[33m%s\x1b[0m', s), + info: (s) => console.info('\x1b[36m%s\x1b[0m', s), + + stdout: { + clearLine: () => { + stdout.clearLine(0); + stdout.cursorTo(0); + }, + success: (s) => stdout.write(format('\x1b[32m%s\x1b[0m', s)), + warn: (s) => stdout.write(format('\x1b[33m%s\x1b[0m', s)), + info: (s) => stdout.write(format('\x1b[36m%s\x1b[0m', s)), + }, +}; diff --git a/scripts/sass.mjs b/scripts/sass.mjs new file mode 100644 index 00000000000..1c93b226538 --- /dev/null +++ b/scripts/sass.mjs @@ -0,0 +1,166 @@ +import * as sass from 'sass-embedded'; +import postcss from 'postcss'; +import autoprefixer from 'autoprefixer'; +import { globby } from 'globby'; +import path from 'path'; +import { resolve } from 'node:path'; +import { mkdirSync as makeDir } from 'fs'; +import fsExtra from 'fs-extra'; +import { fileURLToPath } from 'url'; +import { writeFile, readFile } from 'fs/promises'; +import report from './report.mjs'; + +const THEMES = { + SRC: 'projects/igniteui-angular/src/lib/core/styles/themes/presets', + DIST: '../dist/igniteui-angular/styles', + THEMING: { + SRC: 'projects/igniteui-angular/src/lib/core/styles/', + DIST: 'dist/igniteui-angular/lib/core/styles/', + }, + CONFIG: { + style: 'compressed', + loadPaths: ['node_modules'], + sourceMap: true, + sourceMapEmbed: true, + }, +}; + +const STYLES = { + SRC: 'projects/igniteui-angular/src/lib/**/*.scss', + IGNORE: '!projects/igniteui-angular/src/lib/core/styles/**/*.scss', + CONFIG: { + style: 'compressed', + loadPaths: ['node_modules'], + sourceMap: true, + sourceMapEmbed: true, + }, +}; + +const { copySync } = fsExtra; +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const DEST_DIR = path.join.bind(null, path.resolve(__dirname, THEMES.DIST)); + +const stripComments = () => { + return { + postcssPlugin: 'postcss-strip-comments', + OnceExit(root) { + root.walkComments((node) => node.remove()); + }, + }; +}; + +stripComments.postcss = true; + +const postProcessor = postcss([ + autoprefixer({ + cascade: false, + grid: true, + }), + stripComments, +]); + +const _template = await readFile( + resolve(process.argv[1], '../styles.tmpl'), + 'utf8' +); +const _postProcessor = postcss([autoprefixer, stripComments]); + +export function fromTemplate(content) { + return _template.replace(/<%\s*content\s*%>/, content); +} +async function createFile(fileName, content) { + const outputFile = DEST_DIR(fileName); + + makeDir(path.dirname(outputFile), { recursive: true }); + await writeFile(outputFile, content, 'utf-8'); +} + +export async function compileSass(src, compiler, options) { + const compiled = await compiler.compileAsync(src, options); + + const out = _postProcessor.process(compiled.css).css; + return out.charCodeAt(0) === 0xfeff ? out.slice(1) : out; +} + +async function _buildThemes() { + const paths = await globby(`${THEMES.SRC}/**/*.scss`); + const compiler = await sass.initAsyncCompiler(); + + try { + await Promise.all( + paths.map(async (path) => { + const result = await compiler.compileAsync(path, THEMES.CONFIG); + const fileName = path + .replace(/\.scss$/, '.css') + .replace(THEMES.SRC, ''); + const sourceMapComment = `/*# sourceMappingURL=maps${fileName}.map */`; + + let outCss = postProcessor.process(result.css).css; + + if (outCss.charCodeAt(0) === 0xfeff) { + outCss = outCss.substring(1); + } + + outCss = outCss + '\n'.repeat(2) + sourceMapComment; + + await createFile(fileName, outCss); + await createFile( + `maps/${fileName}.map`, + JSON.stringify(result.sourceMap) + ); + }) + ); + } catch (err) { + await compiler.dispose(); + report.error(err); + process.exit(1); + } + + await compiler.dispose(); +} + +export async function buildComponents(isProduction = false) { + const start = performance.now(); + const [compiler, paths] = await Promise.all([ + sass.initAsyncCompiler(), + globby([STYLES.SRC, STYLES.IGNORE]), + ]); + + try { + await Promise.all( + paths.map(async (path) => { + writeFile( + path.replace(/\.scss$/, '.css.ts'), + fromTemplate(await compileSass(path, compiler, STYLES.CONFIG)), + 'utf-8' + ); + }) + ); + } catch (err) { + await compiler.dispose(); + report.error(err); + process.exit(1); + } + + await compiler.dispose(); + + if (!isProduction) { + report.success( + `Component styles generated in ${((performance.now() - start) / 1000).toFixed(2)}s` + ); + } +} + +export async function buildThemes() { + const start = performance.now(); + + // Move theming files + copySync(THEMES.THEMING.SRC, THEMES.THEMING.DIST, { recursive: true }); + + // Build theme presets + console.info('Building themes...'); + await _buildThemes(); + report.success( + `Themes generated in ${((performance.now() - start) / 1000).toFixed(2)}s` + ); +} diff --git a/scripts/styles.tmpl b/scripts/styles.tmpl new file mode 100644 index 00000000000..7864a0b50dd --- /dev/null +++ b/scripts/styles.tmpl @@ -0,0 +1,3 @@ +export default { + css: `<% content %>` +} diff --git a/scripts/watch-styles.mjs b/scripts/watch-styles.mjs new file mode 100644 index 00000000000..5221e7a23c8 --- /dev/null +++ b/scripts/watch-styles.mjs @@ -0,0 +1,52 @@ +import { writeFile } from 'node:fs/promises'; +import watch from 'node-watch'; +import * as sass from 'sass-embedded'; +import report from './report.mjs'; +import { compileSass, fromTemplate } from './sass.mjs'; + +const watchOptions = { + recursive: true, + filter: (path) => { + return /.(?:scss)$/.test(path); + }, +}; + +let updating = false; +const compiler = await sass.initAsyncCompiler(); + +const watcher = watch( + ['projects/igniteui-angular'], + watchOptions, + async (_, path) => { + if (updating) { + return; + } + + report.warn(`Change detected: ${path}`); + updating = true; + + try { + await writeFile( + path.replace(/\.scss$/, '.css.ts'), + fromTemplate( + await compileSass(path, compiler, { + style: 'compressed', + loadPaths: ['node_modules'], + sourceMap: true, + sourceMapEmbed: true, + }) + ), + 'utf8' + ); + } catch (err) { + report.error(err); + } + + report.success('Styles rebuilt 🎨'); + updating = false; + } +); + +watcher.on('close', () => compiler.dispose()); + +report.info('Styles watcher started...'); diff --git a/src/app/styleguide/colors/color.sample.scss b/src/app/styleguide/colors/color.sample.scss index b0c5d94bd6f..5115b653d5e 100644 --- a/src/app/styleguide/colors/color.sample.scss +++ b/src/app/styleguide/colors/color.sample.scss @@ -1,6 +1,14 @@ @use '../../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities' as *; @use '../../../styles/variables' as *; +.test-100 { + color: color($palette, primary, 100); +} + +.test-200 { + color: color($palette, primary, 200); +} + .sample-wrapper { display: grid; grid-template-columns: 1fr; diff --git a/src/assets/styles/test-theme.css b/src/assets/styles/test-theme.css new file mode 100644 index 00000000000..206348450fc --- /dev/null +++ b/src/assets/styles/test-theme.css @@ -0,0 +1,7 @@ +@layer theme { + .igx-avatar { + --color: pink; + + outline: 1px solid red; + } +} diff --git a/src/styles/_demo-theme.scss b/src/styles/_demo-theme.scss index bded8bec46a..dc00c3db67d 100644 --- a/src/styles/_demo-theme.scss +++ b/src/styles/_demo-theme.scss @@ -21,6 +21,28 @@ body { $schema: $schema, ); + +.avatar-theme { + @include css-vars(avatar-theme( + $schema: $light-bootstrap-schema, + $color: blue + )); +} + + +.custom-palette { + @include palette(palette( + $primary: green, + $secondary: green, + $surface: white, + $info: #1377d5, + $success: #4eb862, + $warn: #faa419, + $error: #ff134a, + $variant: 'material', + )); +} + .dock { @include css-vars(dock-manager-theme()); } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 245a0915f92..ccde72ee1c9 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-material-palette; -$schema: $light-material-schema; -$typeface: $material-typeface; -$type-scale: $material-type-scale; +$palette: $light-bootstrap-palette; +$schema: $light-bootstrap-schema; +$typeface: $bootstrap-typeface; +$type-scale: $bootstrap-type-scale; $variant: map.get($schema, '_meta', 'variant'); $background-color: var(--ig-gray-900-contrast); From 552a2a736ca177e2bd8ec4bbdbcadb679cd0e945 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 11 Nov 2024 14:40:54 +0200 Subject: [PATCH 002/131] refactor(*): test scoping with container queries --- package-lock.json | 22 +++++++++++++++---- package.json | 2 +- .../src/lib/avatar/themes/light/indigo.scss | 2 ++ .../lib/avatar/themes/shared/bootstrap.scss | 22 ++++++++++--------- .../src/lib/avatar/themes/shared/indigo.scss | 6 +++-- src/app/styleguide/colors/color.sample.scss | 5 +++++ src/styles/_demo-theme.scss | 4 +++- src/styles/_variables.scss | 8 +++---- 8 files changed, 49 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0b64dccfeab..87188183ef8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -73,7 +73,7 @@ "ig-typedoc-theme": "^5.0.4", "igniteui-dockmanager": "^1.14.2", "igniteui-sassdoc-theme": "^1.2.3", - "igniteui-webcomponents": "5.0.1", + "igniteui-webcomponents": "file:../igniteui-webcomponents/dist/igniteui-webcomponents-0.0.0.tgz", "jasmine": "^5.3.0", "jasmine-core": "~5.3.0", "karma": "^6.4.4", @@ -4813,6 +4813,16 @@ "lit-html": "^3.1.2" } }, + "node_modules/@lit/context": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.3.tgz", + "integrity": "sha512-Auh37F4S0PZM93HTDfZWs97mmzaQ7M3vnTc9YvxAGyP3UItSK/8Fs0vTOGT+njuvOwbKio/l8Cx/zWL4vkutpQ==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^1.6.2 || ^2.0.0" + } + }, "node_modules/@lit/reactive-element": { "version": "1.6.3", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", @@ -13039,15 +13049,19 @@ } }, "node_modules/igniteui-webcomponents": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-5.0.1.tgz", - "integrity": "sha512-LGfXFi/lT4kZ89JWoM+Csb7x8N+3LHlYoTzvDTzdm5nVWtvFVeWBRkLOwB+ww9V51K3gO7UQh+Qir+7uz5jgzQ==", + "version": "0.0.0", + "resolved": "file:../igniteui-webcomponents/dist/igniteui-webcomponents-0.0.0.tgz", + "integrity": "sha512-HxTk4dZ1S8JUBZ0od/CwdAbCByaIp2N+yjER0erpyQsl9Jpj2/RppieBHFEyxhQ3OFlIUgj4yFN6UrZNlGydZw==", "dev": true, "license": "SEE LICENSE IN LICENSE", "dependencies": { "@floating-ui/dom": "^1.6.0", "@lit-labs/virtualizer": "^2.0.10", + "@lit/context": "^1.1.0", "lit": "^3.2.0" + }, + "engines": { + "node": ">=18" } }, "node_modules/igniteui-webcomponents/node_modules/@lit/reactive-element": { diff --git a/package.json b/package.json index 0828d1d4a2e..c217fe1d1f5 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "ig-typedoc-theme": "^5.0.4", "igniteui-dockmanager": "^1.14.2", "igniteui-sassdoc-theme": "^1.2.3", - "igniteui-webcomponents": "5.0.1", + "igniteui-webcomponents": "file:../igniteui-webcomponents/dist/igniteui-webcomponents-0.0.0.tgz", "jasmine": "^5.3.0", "jasmine-core": "~5.3.0", "karma": "^6.4.4", diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss index f2e0a8167c3..f77ae6754d8 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss @@ -5,5 +5,7 @@ $theme: $indigo; igx-avatar { + --ig-theme: indigo; + @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss index b62e90e061c..9dd9bdbde78 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss @@ -5,16 +5,18 @@ $theme: $bootstrap; .igx-avatar { - &::after { - position: absolute; - content: ''; - width: 100%; - height: 100%; - border-radius: inherit; - opacity: .5; - } + @container style(--ig-theme: bootstrap) { + &::after { + position: absolute; + content: ''; + width: 100%; + height: 100%; + border-radius: inherit; + opacity: .5; + } - &:focus::after { - box-shadow: 0 0 0 rem(3px) var-get($theme, 'background'); + &:focus::after { + box-shadow: 0 0 0 rem(3px) var-get($theme, 'background'); + } } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss index 14901942c18..3cfb5305ce8 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss @@ -1,5 +1,7 @@ .igx-avatar { - igx-icon { - --ig-size: 1; + @container style(--ig-theme: indigo) { + igx-icon { + --ig-size: 1; + } } } diff --git a/src/app/styleguide/colors/color.sample.scss b/src/app/styleguide/colors/color.sample.scss index 5115b653d5e..96a6a11cd51 100644 --- a/src/app/styleguide/colors/color.sample.scss +++ b/src/app/styleguide/colors/color.sample.scss @@ -9,6 +9,11 @@ color: color($palette, primary, 200); } +.test-100-contrast { + color: contrast-color($palette, primary, 100); +} + + .sample-wrapper { display: grid; grid-template-columns: 1fr; diff --git a/src/styles/_demo-theme.scss b/src/styles/_demo-theme.scss index dc00c3db67d..2c15207d874 100644 --- a/src/styles/_demo-theme.scss +++ b/src/styles/_demo-theme.scss @@ -23,9 +23,11 @@ body { .avatar-theme { + --ig-theme: bootstrap; + @include palette($light-bootstrap-palette); + @include css-vars(avatar-theme( $schema: $light-bootstrap-schema, - $color: blue )); } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index ccde72ee1c9..a47d4ff27d7 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-bootstrap-palette; -$schema: $light-bootstrap-schema; -$typeface: $bootstrap-typeface; -$type-scale: $bootstrap-type-scale; +$palette: $light-indigo-palette; +$schema: $light-indigo-schema; +$typeface: $indigo-typeface; +$type-scale: $indigo-type-scale; $variant: map.get($schema, '_meta', 'variant'); $background-color: var(--ig-gray-900-contrast); From 6baebc38efab943edc228da3bd8719546f9ccd1b Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 2 Dec 2024 15:55:03 +0200 Subject: [PATCH 003/131] refactor(avatar): update styles --- .../src/lib/avatar/avatar.component.ts | 4 +-- .../src/lib/avatar/themes/base.scss | 4 +-- .../src/lib/avatar/themes/index.ts | 33 +++++++++++++++++++ .../lib/avatar/themes/shared/bootstrap.scss | 7 ++-- .../src/lib/avatar/themes/shared/indigo.scss | 4 ++- 5 files changed, 43 insertions(+), 9 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/index.ts diff --git a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts index a68c111806f..c7dd70f336d 100644 --- a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts +++ b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts @@ -13,7 +13,7 @@ import { import { mkenum } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; import { ThemeService, ThemedComponent } from '../services/theme/theme.service'; -import styles from './themes/themes.css'; +import themes from './themes/index'; let NEXT_ID = 0; export const IgxAvatarSize = /*@__PURE__*/mkenum({ @@ -345,7 +345,7 @@ export class IgxAvatarComponent implements OnInit, ThemedComponent { /** @hidden @internal */ public ngOnInit() { this.roleDescription = this.getRole(); - this.themeService.adoptStyles(IgxAvatarComponent, styles); + this.themeService.adoptStyles(IgxAvatarComponent, themes); } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/avatar/themes/base.scss b/projects/igniteui-angular/src/lib/avatar/themes/base.scss index 15ae7b06848..454d7fe4216 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/base.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/base.scss @@ -58,11 +58,9 @@ $theme: $material; line-height: calc(#{var-get($theme, 'size')} / 2); } -igx-avatar { +@include b(igx-avatar) { @include css-vars-from-theme($base, 'igx-avatar'); -} -@include b(igx-avatar) { @extend %igx-avatar-display; @include e(image) { diff --git a/projects/igniteui-angular/src/lib/avatar/themes/index.ts b/projects/igniteui-angular/src/lib/avatar/themes/index.ts new file mode 100644 index 00000000000..681b6e5728e --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/index.ts @@ -0,0 +1,33 @@ +import base from './base.css'; +import bootstrap from './shared/bootstrap.css'; +import indigo from './shared/indigo.css'; + +import lightMaterial from './light/material.css'; +import lightBootstrap from './light/bootstrap.css'; +import lightFluent from './light/fluent.css'; +import lightIndigo from './light/indigo.css'; + +import darkMaterial from './dark/material.css'; +import darkBootstrap from './dark/bootstrap.css'; +import darkFluent from './dark/fluent.css'; +import darkIndigo from './dark/indigo.css'; + +export default { + base: base.css, + shared: { + bootstrap: bootstrap.css, + indigo: indigo.css + }, + light: { + material: lightMaterial.css, + bootstrap: lightBootstrap.css, + fluent: lightFluent.css, + indigo: lightIndigo.css + }, + dark: { + material: darkMaterial.css, + bootstrap: darkBootstrap.css, + fluent: darkFluent.css, + indigo: darkIndigo.css + } +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss index 9dd9bdbde78..106a91e7d64 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss @@ -1,10 +1,11 @@ +@use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/typography' as *; @use '../light/themes' as *; $theme: $bootstrap; -.igx-avatar { +@include b(igx-avatar) { @container style(--ig-theme: bootstrap) { &::after { position: absolute; @@ -12,11 +13,11 @@ $theme: $bootstrap; width: 100%; height: 100%; border-radius: inherit; - opacity: .5; + opacity: 0.5; } &:focus::after { - box-shadow: 0 0 0 rem(3px) var-get($theme, 'background'); + box-shadow: 0 0 0 rem(3px) var-get($bootstrap, 'background'); } } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss index 3cfb5305ce8..efb7ce86c40 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss @@ -1,4 +1,6 @@ -.igx-avatar { +@use 'igniteui-theming/sass/bem' as *; + +@include b(igx-avatar) { @container style(--ig-theme: indigo) { igx-icon { --ig-size: 1; From 5a4ca2222ba4e5bb6d15d55fa767dd0baec12552 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 15 Jan 2025 17:17:14 +0200 Subject: [PATCH 004/131] refactor(checkbox): bundle styles with component - initial commit --- .../src/lib/avatar/themes/dark/bootstrap.scss | 6 +- .../src/lib/avatar/themes/dark/fluent.scss | 6 +- .../src/lib/avatar/themes/dark/indigo.scss | 6 +- .../src/lib/avatar/themes/dark/material.scss | 6 +- .../lib/avatar/themes/light/bootstrap.scss | 7 +- .../src/lib/avatar/themes/light/fluent.scss | 7 +- .../src/lib/avatar/themes/light/indigo.scss | 9 +- .../src/lib/avatar/themes/light/material.scss | 7 +- .../lib/avatar/themes/shared/bootstrap.scss | 2 +- .../src/lib/avatar/themes/shared/indigo.scss | 2 +- .../src/lib/badge/badge.component.ts | 4 +- .../src/lib/checkbox/checkbox.component.ts | 13 +- .../src/lib/checkbox/themes/base.scss | 858 ++++++++++++++++++ .../src/lib/checkbox/themes/dark/_themes.scss | 7 + .../lib/checkbox/themes/dark/bootstrap.scss | 30 + .../src/lib/checkbox/themes/dark/fluent.scss | 25 + .../src/lib/checkbox/themes/dark/indigo.scss | 15 + .../lib/checkbox/themes/dark/material.scss | 15 + .../src/lib/checkbox/themes/index.ts | 37 + .../lib/checkbox/themes/light/_themes.scss | 8 + .../lib/checkbox/themes/light/bootstrap.scss | 14 + .../src/lib/checkbox/themes/light/fluent.scss | 14 + .../src/lib/checkbox/themes/light/indigo.scss | 14 + .../lib/checkbox/themes/light/material.scss | 14 + .../lib/checkbox/themes/shared/bootstrap.scss | 34 + .../lib/checkbox/themes/shared/fluent.scss | 110 +++ .../lib/checkbox/themes/shared/indigo.scss | 41 + .../lib/checkbox/themes/shared/material.scss | 42 + .../components/avatar/_avatar-theme.scss | 4 +- .../core/styles/themes/generators/_base.scss | 18 +- .../src/lib/services/theme/theme.service.ts | 89 +- .../src/lib/services/theme/theme.token.ts | 13 + src/app/styleguide/colors/color.sample.scss | 5 - src/styles/_demo-theme.scss | 20 +- src/styles/_variables.scss | 10 +- 35 files changed, 1382 insertions(+), 130 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/base.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/_themes.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/index.ts create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/_themes.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/material.scss diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss index b56b4b737e2..59e78fd5440 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss @@ -5,6 +5,8 @@ $theme: $bootstrap; -igx-avatar { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); +@container style(--theme: bootstrap) { + igx-avatar { + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); + } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss index 9f6e66f529e..6a225a06091 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss @@ -5,6 +5,8 @@ $theme: $fluent; -igx-avatar { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); +@container style(--theme: fluent) { + igx-avatar { + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); + } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss index e45ecd8ab14..b693e234a5a 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss @@ -5,6 +5,8 @@ $theme: $indigo; -igx-avatar { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); +@container style(--ig-theme: indigo) { + igx-avatar { + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); + } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss index 396c1de44a6..5ab8d4bced5 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss @@ -5,6 +5,8 @@ $theme: $material; -igx-avatar { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); +@container style(--theme: material) { + igx-avatar { + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); + } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss index 6054302576d..fae43c04caa 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss @@ -1,9 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/utils/map' as *; @use 'themes' as *; $theme: $bootstrap; -igx-avatar { - @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); +@container style(--theme: bootstrap) { + @include b(igx-avatar) { + @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); + } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss index d9ede217890..2a8ffe1c87e 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss @@ -1,9 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/utils/map' as *; @use 'themes' as *; $theme: $fluent; -igx-avatar { - @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); +@container style(--theme: fluent) { + @include b(igx-avatar) { + @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); + } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss index f77ae6754d8..4f3c92d9926 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss @@ -1,11 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/utils/map' as *; @use 'themes' as *; $theme: $indigo; -igx-avatar { - --ig-theme: indigo; - - @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); +@container style(--theme: indigo) { + @include b(igx-avatar) { + @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); + } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss index 49c5e4fac64..8f75d0e1a23 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss @@ -1,9 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/utils/map' as *; @use 'themes' as *; $theme: $material; -igx-avatar { - @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); +@container style(--theme: material) { + @include b(igx-avatar) { + @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); + } } diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss index 106a91e7d64..5b40ea2cc97 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss @@ -6,7 +6,7 @@ $theme: $bootstrap; @include b(igx-avatar) { - @container style(--ig-theme: bootstrap) { + @container style(--theme: bootstrap) { &::after { position: absolute; content: ''; diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss index efb7ce86c40..3bf8fd6da57 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss @@ -1,7 +1,7 @@ @use 'igniteui-theming/sass/bem' as *; @include b(igx-avatar) { - @container style(--ig-theme: indigo) { + @container style(--theme: indigo) { igx-icon { --ig-size: 1; } diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts index 5275adb98f9..2f2b27674cc 100644 --- a/projects/igniteui-angular/src/lib/badge/badge.component.ts +++ b/projects/igniteui-angular/src/lib/badge/badge.component.ts @@ -1,5 +1,5 @@ import { NgIf } from '@angular/common'; -import { booleanAttribute, Component, HostBinding, Input } from '@angular/core'; +import { booleanAttribute, Component, ElementRef, HostBinding, Input } from '@angular/core'; import { mkenum } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; @@ -140,6 +140,8 @@ export class IgxBadgeComponent { @HostBinding('class.igx-badge') public cssClass = 'igx-badge'; + constructor(public elementRef: ElementRef) { } + /** * Sets a square shape to the badge, if `shape` is set to `square`. * By default the shape of the badge is rounded. diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts index 9556f9b18ec..d8a48f13780 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts @@ -15,7 +15,8 @@ import { booleanAttribute, inject, DestroyRef, - Inject + Inject, + OnInit } from '@angular/core'; import { ControlValueAccessor, NgControl, Validators } from '@angular/forms'; import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; @@ -24,6 +25,8 @@ import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider'; import { noop, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token'; +import { ThemeService, ThemedComponent } from '../services/theme/theme.service'; +import themes from './themes/index'; export const LabelPosition = /*@__PURE__*/mkenum({ BEFORE: 'before', @@ -70,7 +73,7 @@ let nextId = 0; templateUrl: 'checkbox.component.html', imports: [IgxRippleDirective] }) -export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, ControlValueAccessor { +export class IgxCheckboxComponent implements EditorProvider, OnInit, AfterViewInit, ControlValueAccessor { /** * An event that is emitted after the checkbox state is changed. @@ -474,6 +477,7 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont * @hidden */ private _onTouchedCallback: () => void = noop; + public themeService = inject(ThemeService); /** * @hidden @@ -529,6 +533,11 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont } } + /** @hidden @internal */ + public ngOnInit() { + this.themeService.adoptStyles(IgxCheckboxComponent, themes); + } + /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/base.scss new file mode 100644 index 00000000000..c80a0ee45ae --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/base.scss @@ -0,0 +1,858 @@ +@use 'sass:map'; +@use 'sass:math'; +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use './light/themes' as *; + +$theme: $material; + +$theme-variant: map.get($theme, '_meta', 'theme-variant'); +$variant: map.get($theme, '_meta', 'variant'); + +@include scale-in-out($start-scale: 0.9); +@include scale-in-center(); + +%cbx-display { + position: relative; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + outline-style: none; + cursor: pointer; +} + +%cbx-display--disabled { + user-select: none; + pointer-events: none; + cursor: initial; +} + +%cbx-input { + @include hide-default(); +} + +%cbx-composite-wrapper { + align-items: center; + justify-content: center; + display: flex; + position: relative; + width: var(--size); + height: var(--size); + + // @if $variant == 'material' { + // padding: rem(20px); + // } + + //ripple color + --color: #{var-get($theme, 'empty-color')}; +} + +%cbx-composite-wrapper--x { + //ripple color + --color: #{var-get($theme, 'fill-color')}; +} + +%cbx-composite { + position: relative; + display: inline-block; + width: var(--size); + height: var(--size); + min-width: var(--size); + background: var-get($theme, 'empty-fill-color'); + border-width: var(--border-width); + border-style: solid; + border-color: var-get($theme, 'empty-color'); + border-radius: var-get($theme, 'border-radius'); + -webkit-tap-highlight-color: transparent; + transition: + border-color 0.2s $ease-out-quad, + background 0.2s $ease-out-quad; + overflow: hidden; +} + +%cbx-composite--hover { + border-color: var-get($theme, 'empty-color-hover'); +} + +%cbx-composite--x { + border-color: var-get($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); +} + +%cbx-composite--invalid { + border-color: var-get($theme, 'error-color'); + + // @if $variant == 'bootstrap' and $theme-variant == 'dark' { + // %cbx-composite-mark { + // stroke: black; + // } + // } +} + +%cbx-composite-wrapper--invalid { + //ripple color + --color: #{var-get($theme, 'error-color')}; +} + +%cbx-composite--invalid--hover { + border-color: var-get($theme, 'error-color-hover'); +} + +%cbx-composite--x--invalid { + border-color: var-get($theme, 'error-color'); + background: var-get($theme, 'error-color'); +} + +%cbx-composite--x--hover { + border-color: var-get($theme, 'fill-color-hover'); + background: var-get($theme, 'fill-color-hover'); +} + +%cbx-composite--x--invalid--hover { + border-color: var-get($theme, 'error-color-hover'); + background: var-get($theme, 'error-color-hover'); +} + +%cbx-composite--disabled { + border-color: var-get($theme, 'disabled-color'); + + // @if $variant == 'bootstrap' and $theme-variant == 'dark' { + // background: color($color: 'surface', $variant: 500); + // } +} + +%cbx-composite--x--disabled { + // @if $variant == 'material' or $variant == 'fluent' { + // background: var-get($theme, 'disabled-color'); + // } + + // @if $variant == 'indigo' or $variant == 'bootstrap' { + // background: var-get($theme, 'disabled-indeterminate-color'); + // border-color: transparent; + // } + + // @if $variant != 'indigo' { + // %cbx-composite-mark { + // stroke: var-get($theme, 'disabled-tick-color'); + // } + // } @else { + // %cbx-composite-mark { + // stroke: unset; + // fill: var-get($theme, 'disabled-tick-color'); + // } + // } +} + +%cbx-composite-mark { + position: absolute; + inset: 0; + stroke: var-get($theme, 'tick-color'); + stroke-linecap: square; + stroke-width: var(--mark-stroke); + stroke-dasharray: var(--mark-length); + stroke-dashoffset: var(--mark-length); + fill: none; + opacity: 0; + z-index: 1; +} + +%cbx-composite-mark-material { + inset-inline-start: -0.5px; +} + +%cbx-composite-mark-indigo { + stroke: unset; + stroke-linecap: unset; + stroke-width: unset; + stroke-dasharray: unset; + stroke-dashoffset: unset; + fill: var-get($theme, 'tick-color'); + transition: none !important; + + rect { + fill: none; + } +} + +%igx-checkbox--indeterminate { + %cbx-composite-mark { + top: var(--mark-offset); + margin-inline-start: var(--mark-offset); + } + + &:hover { + %cbx-composite { + border-color: var-get($theme, 'fill-color-hover'); + background: var-get($theme, 'fill-color-hover'); + + &::before { + background: var-get($theme, 'fill-color-hover'); + } + + // @if $variant == 'fluent' { + // background: transparent; + // } + } + } +} + +%igx-checkbox--indeterminate-indigo { + %cbx-composite-mark { + fill: none !important; + stroke-dashoffset: unset !important; + transform: none !important; + + rect { + fill: var-get($theme, 'tick-color'); + opacity: 1; + } + } +} + +%igx-checkbox--disabled-indeterminate-indigo { + @extend %igx-checkbox--indeterminate-indigo; + + %cbx-composite-mark { + rect { + fill: var-get($theme, 'disabled-tick-color'); + } + } +} + +%igx-checkbox--indeterminate-fluent { + %cbx-composite-mark { + stroke: transparent; + } + + %cbx-composite { + background: transparent; + + &::before { + content: ''; + position: absolute; + top: calc(var(--size) / 2 - rem(6px)); + inset-inline-start: calc(var(--size) / 2 - rem(6px)); + width: rem(10px); + height: rem(10px); + border-radius: border-radius(rem(2px)); + background: var-get($theme, 'fill-color'); + z-index: 1; + } + } +} + +%igx-checkbox--disabled-indeterminate-fluent { + %cbx-composite-mark { + stroke: transparent; + } + + %cbx-composite--x--disabled { + background: transparent; + + &::before { + background: var-get($theme, 'disabled-color'); + } + } +} + +%igx-checkbox--disabled-indeterminate-material { + %cbx-composite--x--disabled { + border-color: var-get($theme, 'disabled-indeterminate-color'); + background: var-get($theme, 'disabled-indeterminate-color'); + } +} + +%igx-checkbox--indeterminate--invalid { + %cbx-composite--x { + border-color: var-get($theme, 'error-color'); + background: var-get($theme, 'error-color'); + } + + %cbx-composite--x--hover { + border-color: var-get($theme, 'error-color-hover'); + background: var-get($theme, 'error-color-hover'); + } + + // @if $variant == 'fluent' { + // %cbx-composite { + // border-color: var-get($theme, 'error-color'); + + // &::before { + // background: var-get($theme, 'error-color'); + // } + // } + + // %cbx-composite--x { + // background: transparent; + // } + + // &:hover { + // %cbx-composite { + // background: transparent; + // border-color: var-get($theme, 'error-color-hover'); + + // &::before { + // background: var-get($theme, 'error-color-hover'); + // } + // } + // } + // } +} + +%cbx-composite-mark--x { + stroke-dashoffset: 0; + opacity: 1; + transition: + all 0.2s $ease-out-quad, + opacity 0.2s $ease-out-quad; +} + +%cbx-composite-mark--in { + stroke-dashoffset: 41; /* length of path - adjacent line length */ + opacity: 1; + rotate: 45deg; + transform: translateX(calc(var(--mark-stroke) / var(--mark-length) * -1em)); +} + +%cbx-composite-mark--fluent { + // @if $variant == 'fluent' { + // @extend %cbx-composite-mark; + // @extend %cbx-composite-mark--x; + // stroke: var-get($theme, 'tick-color-hover'); + // } +} + +%cbx-composite-mark--x--fluent { + // @if $variant == 'fluent' { + // stroke: var-get($theme, 'tick-color'); + // } +} + +%cbx-composite-mark--invalid--fluent { + // @if $variant == 'fluent' { + // stroke: var-get($theme, 'error-color'); + // } + + // @if $variant == 'fluent' and $theme-variant == 'dark' { + // stroke: color($color: 'error', $variant: 500); + // } +} + +%cbx-composite-mark--in--fluent { + // @if $variant == 'fluent' { + // stroke: transparent; + // } +} + +%cbx-label { + display: inline-block; + color: var-get($theme, 'label-color'); + user-select: none; + word-wrap: break-all; + transition: color 0.2s $ease-out-quad; + + &:empty { + margin: 0; + } +} + +%cbx-label--hover { + color: var-get($theme, 'label-color-hover'); +} + +%cbx-label-pos--before, +%cbx-label-pos--after { + &:empty { + margin: 0; + } +} + +%cbx-label-pos--after { + margin-inline-start: var(--label-margin); +} + +%cbx-label-pos--before { + margin-inline-end: var(--label-margin); + order: -1; +} + +%cbx-label--invalid { + color: var-get($theme, 'error-color'); +} + +%cbx-label--disabled { + color: var-get($theme, 'disabled-color-label'); +} + +%cbx-ripple { + --_ripple-size: #{rem(40px)}; + + display: none; + position: absolute; + top: calc(50% - calc(var(--_ripple-size) / 2)); + width: var(--_ripple-size); + aspect-ratio: 1; + border-radius: var-get($theme, 'border-radius-ripple'); + overflow: hidden; + pointer-events: none; + filter: opacity(1); +} + +%cbx-ripple--hover { + background: var-get($theme, 'empty-color'); + transition: background 0.2s $ease-out-quad; + opacity: 0.06; + + @media (prefers-color-scheme: dark) { + opacity: 0.12; + } +} + +%cbx-ripple--hover-checked { + background: var-get($theme, 'fill-color'); +} + +%cbx-ripple--hover-invalid { + background: var-get($theme, 'error-color'); +} + +%igx-checkbox--focused-indigo { + %cbx-composite { + border-radius: var-get($theme, 'border-radius'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); + } +} + +%igx-checkbox--focused-fluent { + position: relative; + $focus-outline-offset: rem(2px); + + &::after { + content: ''; + position: absolute; + inset: -$focus-outline-offset; + box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color'); + } +} + +%igx-checkbox--focused-bootstrap { + %cbx-composite { + border-radius: var-get($theme, 'border-radius'); + border-color: color($color: 'primary', $variant: 200); + box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color'); + } +} + +%igx-checkbox--focused-hovered { + %cbx-composite { + border-color: color($color: 'primary', $variant: 300); + } +} + +%igx-checkbox--focused-checked-indigo { + %cbx-composite { + border-radius: var-get($theme, 'border-radius'); + box-shadow: 0 0 0 rem(3px) + var-get($theme, 'focus-outline-color-focused'); + } +} + +%igx-checkbox--focused-checked-bootstrap { + %cbx-composite { + border-color: transparent; + } +} + +%igx-checkbox--focused-invalid-indigo { + %cbx-composite { + box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error'); + } +} + +%igx-checkbox--focused-invalid-bootstrap { + %cbx-composite { + border-color: var-get($theme, 'error-color'); + box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color-error'); + } + + &:hover { + %cbx-composite { + border-color: var-get($theme, 'error-color-hover'); + } + } +} + +%cbx-ripple--focused { + background: var-get($theme, 'empty-color'); + transition: background 0.2s $ease-out-quad; + opacity: 0.12; + + @media (prefers-color-scheme: dark) { + opacity: 0.24; + } +} + +%cbx-ripple--focused-checked { + background: var-get($theme, 'fill-color'); +} + +%cbx-ripple--focused-invalid { + background: var-get($theme, 'error-color'); +} + +%cbx-ripple--pressed { + opacity: 0.12; + + @media (prefers-color-scheme: dark) { + opacity: 0.24; + } +} + +%cbx-display--plain { + %cbx-composite, + %cbx-composite::after, + %cbx-composite-mark, + %cbx-composite-mark--x { + transition: none; + } +} + +@include b(igx-checkbox) { + @include css-vars-from-theme($base, 'igx-checkbox'); + @extend %cbx-display !optional; + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark--fluent !optional; + } + } + + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--pressed !optional; + } + } + + @include e(input) { + @extend %cbx-input !optional; + } + + @include e(label) { + @extend %cbx-label !optional; + @extend %cbx-label-pos--after !optional; + } + + @include e(label, $m: before) { + @extend %cbx-label !optional; + @extend %cbx-label-pos--before !optional; + } + + @include e(composite-wrapper) { + @extend %cbx-composite-wrapper !optional; + } + + @include e(composite) { + @extend %cbx-composite !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark !optional; + } + + @include e(ripple) { + @extend %cbx-ripple !optional; + } + + @include m(bootstrap) { + @include e(composite) { + &:hover { + @extend %cbx-composite--hover !optional; + } + } + } + + @include m(indigo) { + @include e(composite) { + &:hover { + @extend %cbx-composite--hover !optional; + } + } + + @include e(composite-mark) { + @extend %cbx-composite-mark-indigo !optional; + } + + @include e(label) { + &:hover { + @extend %cbx-label--hover !optional; + } + } + } + + @include m(invalid) { + @include e(composite) { + @extend %cbx-composite--invalid !optional; + } + + @include e(composite-wrapper) { + @extend %cbx-composite-wrapper--invalid !optional; + } + + @include e(label) { + @extend %cbx-label--invalid !optional; + } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-invalid !optional; + } + + @include e(composite) { + @extend %cbx-composite--invalid--hover !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark--invalid--fluent !optional; + } + } + + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover-invalid !optional; + } + } + } + + @include mx(invalid, checked) { + @include e(composite) { + @extend %cbx-composite--x--invalid !optional; + } + + &:hover { + @include e(composite) { + @extend %cbx-composite--x--invalid--hover !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark--x--fluent !optional; + } + } + } + + @include m(focused) { + @extend %igx-checkbox--focused !optional; + + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + } + } + } + + @include mx(indigo, focused) { + @extend %igx-checkbox--focused-indigo !optional; + } + + @include mx(fluent, focused) { + @extend %igx-checkbox--focused-fluent !optional; + } + + @include mx(bootstrap, focused) { + @extend %igx-checkbox--focused-bootstrap !optional; + + &:hover { + @extend %igx-checkbox--focused-hovered !optional; + } + } + + @include mx(indigo, focused, checked) { + @extend %igx-checkbox--focused-checked-indigo !optional; + } + + @include mx(bootstrap, focused, checked) { + @extend %igx-checkbox--focused-checked-bootstrap !optional; + } + + @include mx(focused, checked) { + @extend %igx-checkbox--focused-checked !optional; + } + + @include mx(focused, invalid) { + @include e(ripple) { + @extend %cbx-ripple--focused-invalid !optional; + } + } + + @include mx(indigo, focused, invalid) { + @extend %igx-checkbox--focused-invalid-indigo !optional; + } + + @include mx(bootstrap, focused, invalid) { + @extend %igx-checkbox--focused-invalid-bootstrap !optional; + } + + @include m(indeterminate) { + @extend %igx-checkbox--indeterminate !optional; + + @include e(composite) { + @extend %cbx-composite--x !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark--in !optional; + } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark--in--fluent !optional; + } + } + + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + @extend %cbx-ripple--pressed !optional; + } + } + } + + @include mx(indigo, indeterminate) { + @extend %igx-checkbox--indeterminate-indigo !optional; + } + + @include mx(fluent, indeterminate) { + @extend %igx-checkbox--indeterminate-fluent !optional; + } + + @include mx(invalid, indeterminate) { + @extend %igx-checkbox--indeterminate--invalid !optional; + + &:hover { + @include e(composite) { + @extend %cbx-composite--x--hover !optional; + } + } + } + + @include mx(material, disabled, indeterminate) { + @extend %igx-checkbox--disabled-indeterminate-material !optional; + } + + @include mx(fluent, disabled, indeterminate) { + @extend %igx-checkbox--disabled-indeterminate-fluent !optional; + } + + @include mx(indigo, disabled, indeterminate) { + @extend %igx-checkbox--disabled-indeterminate-indigo !optional; + } + + @include mx(indigo, focused, indeterminate) { + @extend %igx-checkbox--focused-checked-indigo !optional; + } + + @include mx(bootstrap, focused, indeterminate) { + @extend %igx-checkbox--focused-checked-bootstrap !optional; + } + + @include m(checked) { + @include e(composite) { + @extend %cbx-composite--x !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark--x !optional; + } + + @include e(composite-wrapper) { + @extend %cbx-composite-wrapper--x !optional; + } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + } + + @include e(composite) { + @extend %cbx-composite--x--hover !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark--x--fluent !optional; + } + } + + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + @extend %cbx-ripple--pressed !optional; + } + } + } + + @include m(disabled) { + @extend %cbx-display--disabled !optional; + + @include e(label) { + @extend %cbx-label--disabled !optional; + } + + @include e(label, $m: before) { + @extend %cbx-label--disabled !optional; + } + + @include e(composite) { + @extend %cbx-composite--disabled !optional; + } + } + + @include m(plain) { + @extend %cbx-display--plain !optional; + } + + @include mx(focused, checked) { + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple--focused-checked !optional; + } + } + + @include mx(focused, indeterminate) { + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple--focused-checked !optional; + } + } + + @include mx(indeterminate, disabled) { + @include e(composite) { + @extend %cbx-composite--x--disabled !optional; + } + } + + @include mx(checked, disabled) { + @include e(composite) { + @extend %cbx-composite--x--disabled !optional; + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/_themes.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_themes.scss new file mode 100644 index 00000000000..91fcfd5d2ea --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_themes.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/checkbox' as *; + +$material: digest-schema($dark-material-checkbox); +$bootstrap: digest-schema($dark-bootstrap-checkbox); +$fluent: digest-schema($dark-fluent-checkbox); +$indigo: digest-schema($dark-indigo-checkbox); diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss new file mode 100644 index 00000000000..b8a9d8fe642 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss @@ -0,0 +1,30 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use '../light/themes' as light; +@use 'themes' as *; + +$theme: $bootstrap; + +@container style(--theme: bootstrap) { + @include b(igx-checkbox) { + color-scheme: dark; + + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); + + @include m(invalid) { + @include e(composite-mark) { + // TODO: Check why this property is not part of the schemas + stroke: black; + } + } + + @include m(disabled) { + @include e(composite) { + // TODO: Check why this property is not part of the schemas + background: color($color: 'surface', $variant: 500); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss new file mode 100644 index 00000000000..19145bd6daa --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss @@ -0,0 +1,25 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use '../light/themes' as light; +@use 'themes' as *; + +$theme: $fluent; + +@container style(--theme: fluent) { + @include b(igx-checkbox) { + color-scheme: dark; + + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); + + @include m(invalid) { + &:hover { + @include e(composite-mark) { + // TODO: Check why this property is not part of the schemas + stroke: color($color: 'error', $variant: 500); + } + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss new file mode 100644 index 00000000000..1576f67e84c --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss @@ -0,0 +1,15 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use '../light/themes' as light; +@use 'themes' as *; + +$theme: $indigo; + +@container style(--ig-theme: indigo) { + @include b(igx-checkbox) { + color-scheme: dark; + + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss new file mode 100644 index 00000000000..74ce9c1efa6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss @@ -0,0 +1,15 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use '../light/themes' as light; +@use 'themes' as *; + +$theme: $material; + +@container style(--theme: material) { + @include b(igx-checkbox) { + color-scheme: dark; + + @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/index.ts b/projects/igniteui-angular/src/lib/checkbox/themes/index.ts new file mode 100644 index 00000000000..6510b676ffb --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/index.ts @@ -0,0 +1,37 @@ +import base from './base.css'; +import material from './shared/material.css'; +import bootstrap from './shared/bootstrap.css'; +import fluent from './shared/fluent.css'; +import indigo from './shared/indigo.css'; + +import lightMaterial from './light/material.css'; +import lightBootstrap from './light/bootstrap.css'; +import lightFluent from './light/fluent.css'; +import lightIndigo from './light/indigo.css'; + +import darkMaterial from './dark/material.css'; +import darkBootstrap from './dark/bootstrap.css'; +import darkFluent from './dark/fluent.css'; +import darkIndigo from './dark/indigo.css'; + +export default { + base: base.css, + shared: { + material: material.css, + bootstrap: bootstrap.css, + fluent: fluent.css, + indigo: indigo.css + }, + light: { + material: lightMaterial.css, + bootstrap: lightBootstrap.css, + fluent: lightFluent.css, + indigo: lightIndigo.css + }, + dark: { + material: darkMaterial.css, + bootstrap: darkBootstrap.css, + fluent: darkFluent.css, + indigo: darkIndigo.css + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/_themes.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/_themes.scss new file mode 100644 index 00000000000..782c0d49713 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/_themes.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/checkbox' as *; + +$base: digest-schema($light-checkbox); +$material: digest-schema($material-checkbox); +$bootstrap: digest-schema($bootstrap-checkbox); +$fluent: digest-schema($fluent-checkbox); +$indigo: digest-schema($indigo-checkbox); diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss new file mode 100644 index 00000000000..3d93785a479 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss @@ -0,0 +1,14 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +@container style(--theme: bootstrap) { + @include b(igx-checkbox) { + color-scheme: light; + + @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss new file mode 100644 index 00000000000..248a6de35d2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss @@ -0,0 +1,14 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use 'themes' as *; + +$theme: $fluent; + +@container style(--theme: fluent) { + @include b(igx-checkbox) { + color-scheme: light; + + @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss new file mode 100644 index 00000000000..2c62219c0bc --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss @@ -0,0 +1,14 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use 'themes' as *; + +$theme: $indigo; + +@container style(--theme: indigo) { + @include b(igx-checkbox) { + color-scheme: light; + + @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss new file mode 100644 index 00000000000..ef121a5fc31 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss @@ -0,0 +1,14 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/utils/map' as *; +@use 'themes' as *; + +$theme: $material; + +@container style(--theme: material) { + @include b(igx-checkbox) { + color-scheme: light; + + @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..04f3076f763 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/bootstrap.scss @@ -0,0 +1,34 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +@container style(--theme: bootstrap) { + @include b(igx-checkbox) { + --size: #{rem(16px)}; + --border-width: #{rem(1px)}; + --label-margin: #{rem(2px)}; + --mark-stroke: 3; + --mark-length: 24; + --mark-offset: 1px; + + @include e(label) { + @include type-style(body-1) { + margin-block: 0; + } + } + + @include mx(indeterminate, disabled) { + @include e(composite) { + background: var-get($theme, 'disabled-indeterminate-color'); + border-color: transparent; + } + + @include e(composite-mark) { + stroke: var-get($theme, 'disabled-tick-color'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss new file mode 100644 index 00000000000..6dc1fe6bc30 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss @@ -0,0 +1,110 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/animations' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +@container style(--theme: fluent) { + @include b(igx-checkbox) { + --size: #{rem(20px)}; + --border-width: #{rem(1px)}; + --label-margin: #{rem(8px)}; + --mark-stroke: 1; + --mark-length: 24; + --mark-offset: -1px; + + &:hover { + @include e(composite-mark) { + // TODO: Check if this is even needed? + position: absolute; + inset: 0; + stroke-linecap: square; + stroke-width: var(--mark-stroke); + stroke-dasharray: var(--mark-length); + stroke-dashoffset: 0; + fill: none; + z-index: 1; + opacity: 1; + transition: + all 0.2s $ease-out-quad, + opacity 0.2s $ease-out-quad; + + stroke: var-get($theme, 'tick-color-hover'); + } + } + + @include e(label) { + @include type-style(body-2) { + margin-block: 0; + } + } + + @include m(indeterminate) { + &:hover { + @include e(composite) { + background: transparent; + } + + @include e(composite-mark) { + stroke: transparent; + } + } + } + + @include m(invalid) { + &:hover { + @include e(composite-mark) { + stroke: var-get($theme, 'error-color'); + } + } + } + + @include mx(indeterminate, invalid) { + @include e(composite) { + border-color: var-get($theme, 'error-color'); + + &::before { + background: var-get($theme, 'error-color'); + } + } + + &:hover { + @include e(composite) { + background: transparent; + border-color: var-get($theme, 'error-color-hover'); + + &::before { + background: var-get($theme, 'error-color-hover'); + } + } + } + } + + @include mx(indeterminate, invalid, checked) { + @include e(composite) { + background: transparent; + } + } + + @include mx(indeterminate, disabled) { + @include e(composite) { + background: var-get($theme, 'disabled-color'); + } + + @include e(composite-mark) { + stroke: var-get($theme, 'disabled-tick-color'); + } + } + + @include mx(invalid, checked) { + &:hover { + @include e(composite-mark) { + stroke: var-get($theme, 'tick-color'); + } + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/indigo.scss new file mode 100644 index 00000000000..f0c0431c55a --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/indigo.scss @@ -0,0 +1,41 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +@container style(--theme: indigo) { + @include b(igx-checkbox) { + --size: #{rem(16px)}; + --border-width: #{rem(2px)}; + --label-margin: #{rem(8px)}; + --mark-stroke: 3; + --mark-length: 24; + --mark-offset: 1px; + + @include e(label) { + @include type-style(body-2) { + margin-block: 0; + } + } + + @include m(invalid) { + @include e(label) { + color: var-get($theme, 'label-color'); + } + } + + @include mx(indeterminate, disabled) { + @include e(composite) { + background: var-get($theme, 'disabled-indeterminate-color'); + border-color: transparent; + } + + @include e(composite-mark) { + stroke: unset; + fill: var-get($theme, 'disabled-tick-color'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/material.scss new file mode 100644 index 00000000000..19be967a4ef --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/material.scss @@ -0,0 +1,42 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use '../light/themes' as *; + +$theme: $material; + +@container style(--theme: material) { + @include b(igx-checkbox) { + // These CSS variables should be listed as design tokens in the schema files. + --size: #{rem(20px)}; + --border-width: #{rem(2px)}; + --label-margin: #{rem(2px)}; + --mark-stroke: 3; + --mark-length: 24; + --mark-offset: 0; + + @include e(label) { + @include type-style(subtitle-1) { + margin-block: 0; + } + } + + @include e(ripple) { + display: block; + } + + @include e(composite-wrapper) { + padding: rem(20px); + } + + @include mx(indeterminate, disabled) { + @include e(composite) { + background: var-get($theme, 'disabled-color'); + } + + @include e(composite-mark) { + stroke: var-get($theme, 'disabled-tick-color'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index 11d17f2c9b1..2aa4367fb4d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss @@ -66,7 +66,7 @@ /// @param {Map} $theme - The theme used to style the component. @mixin avatar($theme) { $variant: map.get($theme, '_meta', 'variant'); - + %igx-avatar-display { @include sizable(); @@ -80,7 +80,7 @@ color: var-get($theme, 'color'); background: var-get($theme, 'background'); vertical-align: middle; - outline-style: none; + // outline-style: none; flex-shrink: 0; width: var-get($theme, 'size'); height: var-get($theme, 'size'); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index e41c3306bd7..a449cbe39f3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -136,10 +136,6 @@ @include ripple($ripple-theme-map); } - igx-avatar { - --theme: var(--ig-theme); - } - // @if is-used('igx-avatar', $exclude) { // $avatar-theme-map: avatar-theme( // $schema: $schema, @@ -324,13 +320,13 @@ @include css-vars($shape-chart-theme-map); } - @if is-used('igx-checkbox', $exclude) { - $checkbox-theme-map: checkbox-theme( - $schema: $schema, - ); - $checkbox-theme-map: meta.call($theme-handler, $checkbox-theme-map); - @include checkbox($checkbox-theme-map); - } + // @if is-used('igx-checkbox', $exclude) { + // $checkbox-theme-map: checkbox-theme( + // $schema: $schema, + // ); + // $checkbox-theme-map: meta.call($theme-handler, $checkbox-theme-map); + // @include checkbox($checkbox-theme-map); + // } @if is-used('igx-chip', $exclude) { $chip-theme-map: chip-theme( diff --git a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts index 8150a3be0c8..c200f48ebbb 100644 --- a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts +++ b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts @@ -1,38 +1,22 @@ -import { ElementRef, Inject, Injectable } from "@angular/core"; -import { mkenum } from "../../core/utils"; -import { BehaviorSubject } from "rxjs"; -import { DOCUMENT } from "@angular/common"; +import { ElementRef, inject, Injectable } from "@angular/core"; +import { THEME_TOKEN, ThemeToken, IgxTheme } from "igniteui-angular"; export interface ThemedComponent { elementRef: ElementRef; themeService: ThemeService; } -const Theme = /*@__PURE__*/ mkenum({ - Material: "material", - Fluent: "fluent", - Bootstrap: "bootstrap", - IndigoDesign: "indigo", -}); - -export type ThemeVariant = 'light' | 'dark'; - -/** - * Determines the component theme. - */ -export type IgxTheme = (typeof Theme)[keyof typeof Theme]; - // eslint-disable-next-line @typescript-eslint/consistent-type-definitions export type Themes = { base: string; shared?: { - [K in IgxTheme | 'shared']?: string; + [K in IgxTheme]?: string; }; light: { - [K in IgxTheme | 'shared']?: string; + [K in IgxTheme]?: string; }; dark: { - [K in IgxTheme | 'shared']?: string; + [K in IgxTheme]?: string; }; }; @@ -44,55 +28,9 @@ export class ThemeService { * Sets the theme of the component. * Allowed values of type IgxTheme. */ - public globalTheme: IgxTheme; - public themeVariant: ThemeVariant; - private themeVariant$ = new BehaviorSubject("light"); - private theme$ = new BehaviorSubject("material"); + private themeToken: ThemeToken = inject(THEME_TOKEN); private componentThemes = new WeakMap(); - constructor( - @Inject(DOCUMENT) - private document: any, - ) { - this.theme$.asObservable().subscribe((value) => { - this.globalTheme = value as IgxTheme; - }); - - this.themeVariant$.asObservable().subscribe((value) => { - this.themeVariant = value as ThemeVariant; - }); - - this.init(); - } - - private init() { - const theme = globalThis.window - ?.getComputedStyle(this.document.body) - .getPropertyValue("--ig-theme") - .trim(); - - const themeVariant = globalThis.window - ?.getComputedStyle(this.document.body) - .getPropertyValue("--ig-theme-variant") - .trim(); - - if (theme !== "") { - this.theme$.next(theme as IgxTheme); - } - - if (themeVariant !== "") { - this.themeVariant$.next(themeVariant as ThemeVariant); - } - } - - public getComponentTheme(el: ElementRef) { - return globalThis.window - ?.getComputedStyle(el.nativeElement) - .getPropertyValue('--theme') - .trim() as IgxTheme; - } - - public adoptStyles(componentInstance: Function, themes: Themes) { let componentStyles = this.componentThemes.get(componentInstance); @@ -114,18 +52,13 @@ export class ThemeService { sheet.insertRule(`@layer base {${themes.base}}`); - for (const [key, value] of Object.entries(themes)) { - if (key === 'shared') { - for (const [theme, styleSheet] of Object.entries(value)) { - sheet.insertRule(`@layer ${theme} {${styleSheet}}`) - } + for (const theme of ['indigo', 'material', 'bootstrap', 'fluent']) { + if (themes.shared[theme]) { + sheet.insertRule(`@layer ${theme} {${themes.shared[theme]}}`); } - } - - sheet.insertRule(`@layer ${this.globalTheme}-overrides { - ${themes[this.themeVariant][this.globalTheme]} - }`); + sheet.insertRule(`@layer theme {${themes[this.themeToken.variant][theme]}`); + } return sheet; } diff --git a/projects/igniteui-angular/src/lib/services/theme/theme.token.ts b/projects/igniteui-angular/src/lib/services/theme/theme.token.ts index 1ea02f7aa99..25abc83f2a8 100644 --- a/projects/igniteui-angular/src/lib/services/theme/theme.token.ts +++ b/projects/igniteui-angular/src/lib/services/theme/theme.token.ts @@ -6,6 +6,7 @@ import { DOCUMENT } from "@angular/common"; export class ThemeToken { private document = inject(DOCUMENT); public subject: BehaviorSubject; + public variant: IgxThemeVariant; constructor(private t?: IgxTheme) { const globalTheme = globalThis.window @@ -13,6 +14,11 @@ export class ThemeToken { .getPropertyValue("--ig-theme") .trim() || 'material' as IgxTheme; + this.variant = globalThis.window + ?.getComputedStyle(this.document.body) + .getPropertyValue("--ig-theme-variant") + .trim() as IgxThemeVariant; + const _theme = t ?? globalTheme as IgxTheme; this.subject = new BehaviorSubject(_theme); } @@ -46,7 +52,14 @@ const Theme = /*@__PURE__*/ mkenum({ IndigoDesign: "indigo", }); +const ThemeVariant = /*@__PURE__*/ mkenum({ + Light: "light", + Dark: "dark" +}); + /** * Determines the component theme. */ export type IgxTheme = (typeof Theme)[keyof typeof Theme]; + +export type IgxThemeVariant = (typeof ThemeVariant)[keyof typeof ThemeVariant]; diff --git a/src/app/styleguide/colors/color.sample.scss b/src/app/styleguide/colors/color.sample.scss index 831ce999e67..5f5f0d8f933 100644 --- a/src/app/styleguide/colors/color.sample.scss +++ b/src/app/styleguide/colors/color.sample.scss @@ -9,11 +9,6 @@ color: color($palette, primary, 200); } -.test-100-contrast { - color: contrast-color($palette, primary, 100); -} - - .sample-wrapper { display: grid; grid-template-columns: 1fr; diff --git a/src/styles/_demo-theme.scss b/src/styles/_demo-theme.scss index 910e631d453..20c3d2251ea 100644 --- a/src/styles/_demo-theme.scss +++ b/src/styles/_demo-theme.scss @@ -11,10 +11,6 @@ body { color: $foreground-color; } -:root { - --some-dynamic-color: hsl(#{math.random(360)}, 100%, 50%); -} - @include core(); @include typography($font-family: $typeface, $type-scale: $type-scale); @include theme( @@ -22,9 +18,7 @@ body { $schema: $schema, ); - -.avatar-theme { - --ig-theme: bootstrap; +.bootstrap-avatar { @include palette($light-bootstrap-palette); @include css-vars(avatar-theme( @@ -32,6 +26,13 @@ body { )); } +.material-avatar { + @include palette($light-material-palette); + + @include css-vars(avatar-theme( + $schema: $light-material-schema, + )); +} .custom-palette { @include palette(palette( @@ -50,6 +51,11 @@ body { @include css-vars(dock-manager-theme()); } +.custom-avatar { + --color: blue; + outline-color: blue; +} + .nav-header { @if $variant == 'light' { @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg'); diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 9fc0bc5d8f8..6d537d446ab 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,12 +1,14 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-indigo-palette; -$schema: $light-indigo-schema; -$typeface: $indigo-typeface; -$type-scale: $indigo-type-scale; +$palette: $dark-material-palette; +$schema: $dark-material-schema; +$typeface: $material-typeface; +$type-scale: $material-type-scale; $variant: map.get($schema, '_meta', 'variant'); +@debug $variant; + $background-color: var(--ig-gray-900-contrast); $foreground-color: var(--ig-gray-900); From 754ec5b22c39f8536ed4c1797cc67ed229cdc2fa Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 20 Jan 2025 14:29:39 +0200 Subject: [PATCH 005/131] refactor(checkbox): fix component styles --- projects/igniteui-angular/src/lib/checkbox/themes/base.scss | 6 +++--- .../src/lib/checkbox/themes/dark/bootstrap.scss | 2 -- .../src/lib/checkbox/themes/dark/fluent.scss | 2 -- .../src/lib/checkbox/themes/dark/indigo.scss | 2 -- .../src/lib/checkbox/themes/dark/material.scss | 2 -- .../src/lib/checkbox/themes/light/bootstrap.scss | 2 -- .../src/lib/checkbox/themes/light/fluent.scss | 2 -- .../src/lib/checkbox/themes/light/indigo.scss | 2 -- .../src/lib/checkbox/themes/light/material.scss | 2 -- .../src/lib/checkbox/themes/shared/fluent.scss | 2 +- src/styles/_variables.scss | 6 ++---- 11 files changed, 6 insertions(+), 24 deletions(-) diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/base.scss index c80a0ee45ae..63a950f17f6 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/base.scss @@ -406,7 +406,7 @@ $variant: map.get($theme, '_meta', 'variant'); transition: background 0.2s $ease-out-quad; opacity: 0.06; - @media (prefers-color-scheme: dark) { + @container style(--ig-theme-variant: dark) { opacity: 0.12; } } @@ -490,7 +490,7 @@ $variant: map.get($theme, '_meta', 'variant'); transition: background 0.2s $ease-out-quad; opacity: 0.12; - @media (prefers-color-scheme: dark) { + @container style(--ig-theme-variant: dark) { opacity: 0.24; } } @@ -506,7 +506,7 @@ $variant: map.get($theme, '_meta', 'variant'); %cbx-ripple--pressed { opacity: 0.12; - @media (prefers-color-scheme: dark) { + @container style(--ig-theme-variant: dark) { opacity: 0.24; } } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss index b8a9d8fe642..238f588d78b 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss @@ -9,8 +9,6 @@ $theme: $bootstrap; @container style(--theme: bootstrap) { @include b(igx-checkbox) { - color-scheme: dark; - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); @include m(invalid) { diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss index 19145bd6daa..d2ba3956a91 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss @@ -9,8 +9,6 @@ $theme: $fluent; @container style(--theme: fluent) { @include b(igx-checkbox) { - color-scheme: dark; - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); @include m(invalid) { diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss index 1576f67e84c..77968828789 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss @@ -8,8 +8,6 @@ $theme: $indigo; @container style(--ig-theme: indigo) { @include b(igx-checkbox) { - color-scheme: dark; - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); } } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss index 74ce9c1efa6..763ff7f8199 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss @@ -8,8 +8,6 @@ $theme: $material; @container style(--theme: material) { @include b(igx-checkbox) { - color-scheme: dark; - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); } } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss index 3d93785a479..4b29e588f57 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss @@ -7,8 +7,6 @@ $theme: $bootstrap; @container style(--theme: bootstrap) { @include b(igx-checkbox) { - color-scheme: light; - @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); } } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss index 248a6de35d2..9d09abe7ec9 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss @@ -7,8 +7,6 @@ $theme: $fluent; @container style(--theme: fluent) { @include b(igx-checkbox) { - color-scheme: light; - @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); } } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss index 2c62219c0bc..8ae2893a0b2 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss @@ -7,8 +7,6 @@ $theme: $indigo; @container style(--theme: indigo) { @include b(igx-checkbox) { - color-scheme: light; - @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); } } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss index ef121a5fc31..bd364f81b76 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss @@ -7,8 +7,6 @@ $theme: $material; @container style(--theme: material) { @include b(igx-checkbox) { - color-scheme: light; - @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); } } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss index 6dc1fe6bc30..0e8f8b2eab1 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss @@ -1,7 +1,7 @@ @use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/color/functions' as *; @use 'igniteui-theming/sass/themes/functions' as *; -@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/animations' as *; @use '../light/themes' as *; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 6d537d446ab..fa429165538 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,14 +1,12 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $dark-material-palette; -$schema: $dark-material-schema; +$palette: $light-material-palette; +$schema: $light-material-schema; $typeface: $material-typeface; $type-scale: $material-type-scale; $variant: map.get($schema, '_meta', 'variant'); -@debug $variant; - $background-color: var(--ig-gray-900-contrast); $foreground-color: var(--ig-gray-900); From 0a5378d4f614d12671f898a75f433cb22c0cc189 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 24 Jan 2025 10:11:44 +0200 Subject: [PATCH 006/131] build(styles): don't rely on theme service for bundled styles --- .gitignore | 2 +- .../src/lib/avatar/avatar.component.scss | 4 + .../src/lib/avatar/avatar.component.ts | 9 +- .../src/lib/avatar/themes/_base.scss | 83 +++++++++++++++++++ .../src/lib/avatar/themes/base.scss | 81 ------------------ .../src/lib/avatar/themes/dark/_index.scss | 6 ++ .../dark/{_themes.scss => _tokens.scss} | 0 .../src/lib/avatar/themes/dark/bootstrap.scss | 12 --- .../src/lib/avatar/themes/dark/fluent.scss | 12 --- .../src/lib/avatar/themes/dark/indigo.scss | 12 --- .../src/lib/avatar/themes/dark/material.scss | 12 --- .../src/lib/avatar/themes/index.ts | 33 -------- .../src/lib/avatar/themes/light/_index.scss | 6 ++ .../light/{_themes.scss => _tokens.scss} | 0 .../lib/avatar/themes/light/bootstrap.scss | 12 --- .../src/lib/avatar/themes/light/fluent.scss | 12 --- .../src/lib/avatar/themes/light/indigo.scss | 12 --- .../src/lib/avatar/themes/light/material.scss | 12 --- .../src/lib/avatar/themes/shared/_index.scss | 1 + .../lib/avatar/themes/shared/bootstrap.scss | 23 ----- .../src/lib/avatar/themes/shared/indigo.scss | 8 +- .../src/lib/checkbox/checkbox.component.ts | 11 +-- .../src/lib/checkbox/themes/index.ts | 37 --------- .../lib/core/styles/themes/_standalone.scss | 37 +++++++++ .../src/lib/icon/icon.component.ts | 2 - .../src/lib/services/theme/theme.service.ts | 65 --------------- .../src/lib/avatar/avatar.component.css | 3 + scripts/sass.mjs | 62 ++++++++------ scripts/styles.tmpl | 3 - scripts/watch-styles.mjs | 16 +--- 30 files changed, 190 insertions(+), 398 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/avatar/avatar.component.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/_base.scss delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/base.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/_index.scss rename projects/igniteui-angular/src/lib/avatar/themes/dark/{_themes.scss => _tokens.scss} (100%) delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/index.ts create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/_index.scss rename projects/igniteui-angular/src/lib/avatar/themes/light/{_themes.scss => _tokens.scss} (100%) delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/light/material.scss create mode 100644 projects/igniteui-angular/src/lib/avatar/themes/shared/_index.scss delete mode 100644 projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/index.ts create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss delete mode 100644 projects/igniteui-angular/src/lib/services/theme/theme.service.ts create mode 100644 scripts/projects/igniteui-angular/src/lib/avatar/avatar.component.css delete mode 100644 scripts/styles.tmpl diff --git a/.gitignore b/.gitignore index bb5aa2377e5..049b1e580d5 100644 --- a/.gitignore +++ b/.gitignore @@ -49,7 +49,7 @@ src/**/*.js.map src/**/*.css.map # Artefacts -projects/igniteui-angular/**/*.css.ts +projects/igniteui-angular/**/*.component.css # Typedoc Theme extras/docs/themes/typedoc/bin diff --git a/projects/igniteui-angular/src/lib/avatar/avatar.component.scss b/projects/igniteui-angular/src/lib/avatar/avatar.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/avatar.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts index b3f1e6c9eb2..bf1229c68a2 100644 --- a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts +++ b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts @@ -7,13 +7,12 @@ import { OnInit, TemplateRef, ViewChild, + ViewEncapsulation, inject } from '@angular/core'; import { mkenum, normalizeURI } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; -import { ThemeService, ThemedComponent } from '../services/theme/theme.service'; -import themes from './themes/index'; let NEXT_ID = 0; export const IgxAvatarSize = /*@__PURE__*/mkenum({ @@ -56,11 +55,12 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType]; @Component({ selector: 'igx-avatar', templateUrl: 'avatar.component.html', + styleUrl: 'avatar.component.css', + encapsulation: ViewEncapsulation.None, imports: [IgxIconComponent, NgTemplateOutlet] }) -export class IgxAvatarComponent implements OnInit, ThemedComponent { +export class IgxAvatarComponent implements OnInit { public elementRef = inject(ElementRef); - public themeService = inject(ThemeService); /** * Returns the `aria-label` attribute of the avatar. @@ -351,7 +351,6 @@ export class IgxAvatarComponent implements OnInit, ThemedComponent { /** @hidden @internal */ public ngOnInit() { this.roleDescription = this.getRole(); - this.themeService.adoptStyles(IgxAvatarComponent, themes); } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/avatar/themes/_base.scss b/projects/igniteui-angular/src/lib/avatar/themes/_base.scss new file mode 100644 index 00000000000..a5a74695d3e --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/_base.scss @@ -0,0 +1,83 @@ +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'light/tokens' as *; + +$theme: $material; + +@layer base { + %igx-avatar-display { + @include sizable(); + + --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); + + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + user-select: none; + color: var-get($theme, 'color'); + background: var-get($theme, 'background'); + vertical-align: middle; + outline-style: none; + flex-shrink: 0; + width: var-get($theme, 'size'); + height: var-get($theme, 'size'); + + igx-icon { + --component-size: 3; + + color: var-get($theme, 'icon-color'); + } + + &::after { + box-shadow: none; + transition: box-shadow 0.15s $ease-in-out-quad; + } + } + + %igx-avatar-image { + width: 100%; + height: 100%; + border-radius: inherit; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + + %igx-avatar--circle { + border-radius: calc(#{var-get($theme, 'size')} / 2); + } + + %igx-avatar--rounded { + border-radius: var-get($theme, 'border-radius'); + } + + %igx-avatar--initials { + text-transform: uppercase; + font-size: calc(#{var-get($theme, 'size')} / 2); + line-height: calc(#{var-get($theme, 'size')} / 2); + } + + @include b(igx-avatar) { + // @include css-vars-from-theme($base, 'igx-avatar'); + + @extend %igx-avatar-display; + + @include e(image) { + @extend %igx-avatar-image; + } + + @include m(circle) { + @extend %igx-avatar--circle; + } + + @include m(rounded) { + @extend %igx-avatar--rounded; + } + + @include m(initials) { + @extend %igx-avatar--initials; + } + } +} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/base.scss b/projects/igniteui-angular/src/lib/avatar/themes/base.scss deleted file mode 100644 index 454d7fe4216..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/base.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use 'igniteui-theming/sass/animations' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use './light/themes' as *; - -$theme: $material; - -%igx-avatar-display { - @include sizable(); - - --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); - - position: relative; - display: inline-flex; - justify-content: center; - align-items: center; - user-select: none; - color: var-get($theme, 'color'); - background: var-get($theme, 'background'); - vertical-align: middle; - outline-style: none; - flex-shrink: 0; - width: var-get($theme, 'size'); - height: var-get($theme, 'size'); - - igx-icon { - --component-size: 3; - - color: var-get($theme, 'icon-color'); - } - - &::after { - box-shadow: none; - transition: box-shadow .15s $ease-in-out-quad; - } -} - -%igx-avatar-image { - width: 100%; - height: 100%; - border-radius: inherit; - background-size: cover; - background-repeat: no-repeat; - background-position: center; -} - -%igx-avatar--circle { - border-radius: calc(#{var-get($theme, 'size')} / 2); -} - -%igx-avatar--rounded { - border-radius: var-get($theme, 'border-radius'); -} - -%igx-avatar--initials { - text-transform: uppercase; - font-size: calc(#{var-get($theme, 'size')} / 2); - line-height: calc(#{var-get($theme, 'size')} / 2); -} - -@include b(igx-avatar) { - @include css-vars-from-theme($base, 'igx-avatar'); - - @extend %igx-avatar-display; - - @include e(image) { - @extend %igx-avatar-image; - } - - @include m(circle) { - @extend %igx-avatar--circle; - } - - @include m(rounded) { - @extend %igx-avatar--rounded; - } - - @include m(initials) { - @extend %igx-avatar--initials; - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/_index.scss new file mode 100644 index 00000000000..9dbf039674c --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-avatar, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/_themes.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/_tokens.scss similarity index 100% rename from projects/igniteui-angular/src/lib/avatar/themes/dark/_themes.scss rename to projects/igniteui-angular/src/lib/avatar/themes/dark/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss deleted file mode 100644 index 59e78fd5440..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/dark/bootstrap.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use '../light/themes' as light; -@use 'themes' as *; - -$theme: $bootstrap; - -@container style(--theme: bootstrap) { - igx-avatar { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss deleted file mode 100644 index 6a225a06091..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/dark/fluent.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use '../light/themes' as light; -@use 'themes' as *; - -$theme: $fluent; - -@container style(--theme: fluent) { - igx-avatar { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss deleted file mode 100644 index b693e234a5a..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/dark/indigo.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use '../light/themes' as light; -@use 'themes' as *; - -$theme: $indigo; - -@container style(--ig-theme: indigo) { - igx-avatar { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss b/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss deleted file mode 100644 index 5ab8d4bced5..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/dark/material.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use '../light/themes' as light; -@use 'themes' as *; - -$theme: $material; - -@container style(--theme: material) { - igx-avatar { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-avatar'); - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/index.ts b/projects/igniteui-angular/src/lib/avatar/themes/index.ts deleted file mode 100644 index 681b6e5728e..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/index.ts +++ /dev/null @@ -1,33 +0,0 @@ -import base from './base.css'; -import bootstrap from './shared/bootstrap.css'; -import indigo from './shared/indigo.css'; - -import lightMaterial from './light/material.css'; -import lightBootstrap from './light/bootstrap.css'; -import lightFluent from './light/fluent.css'; -import lightIndigo from './light/indigo.css'; - -import darkMaterial from './dark/material.css'; -import darkBootstrap from './dark/bootstrap.css'; -import darkFluent from './dark/fluent.css'; -import darkIndigo from './dark/indigo.css'; - -export default { - base: base.css, - shared: { - bootstrap: bootstrap.css, - indigo: indigo.css - }, - light: { - material: lightMaterial.css, - bootstrap: lightBootstrap.css, - fluent: lightFluent.css, - indigo: lightIndigo.css - }, - dark: { - material: darkMaterial.css, - bootstrap: darkBootstrap.css, - fluent: darkFluent.css, - indigo: darkIndigo.css - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/_index.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/_index.scss new file mode 100644 index 00000000000..b59827df365 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-avatar, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/_themes.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/_tokens.scss similarity index 100% rename from projects/igniteui-angular/src/lib/avatar/themes/light/_themes.scss rename to projects/igniteui-angular/src/lib/avatar/themes/light/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss deleted file mode 100644 index fae43c04caa..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/light/bootstrap.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use 'themes' as *; - -$theme: $bootstrap; - -@container style(--theme: bootstrap) { - @include b(igx-avatar) { - @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss deleted file mode 100644 index 2a8ffe1c87e..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/light/fluent.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use 'themes' as *; - -$theme: $fluent; - -@container style(--theme: fluent) { - @include b(igx-avatar) { - @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss deleted file mode 100644 index 4f3c92d9926..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/light/indigo.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use 'themes' as *; - -$theme: $indigo; - -@container style(--theme: indigo) { - @include b(igx-avatar) { - @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss b/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss deleted file mode 100644 index 8f75d0e1a23..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/light/material.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use 'themes' as *; - -$theme: $material; - -@container style(--theme: material) { - @include b(igx-avatar) { - @include css-vars-from-theme(diff($base, $theme), 'igx-avatar'); - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/_index.scss new file mode 100644 index 00000000000..ca3dd3bc266 --- /dev/null +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/_index.scss @@ -0,0 +1 @@ +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss deleted file mode 100644 index 5b40ea2cc97..00000000000 --- a/projects/igniteui-angular/src/lib/avatar/themes/shared/bootstrap.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/typography' as *; -@use '../light/themes' as *; - -$theme: $bootstrap; - -@include b(igx-avatar) { - @container style(--theme: bootstrap) { - &::after { - position: absolute; - content: ''; - width: 100%; - height: 100%; - border-radius: inherit; - opacity: 0.5; - } - - &:focus::after { - box-shadow: 0 0 0 rem(3px) var-get($bootstrap, 'background'); - } - } -} diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss index 3bf8fd6da57..2be391a2a26 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss @@ -1,9 +1,11 @@ @use 'igniteui-theming/sass/bem' as *; -@include b(igx-avatar) { +@layer indigo { @container style(--theme: indigo) { - igx-icon { - --ig-size: 1; + @include b(igx-avatar) { + igx-icon { + --ig-size: 1; + } } } } diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts index d8a48f13780..d6dc48ac7d3 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts @@ -16,7 +16,6 @@ import { inject, DestroyRef, Inject, - OnInit } from '@angular/core'; import { ControlValueAccessor, NgControl, Validators } from '@angular/forms'; import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; @@ -25,8 +24,6 @@ import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider'; import { noop, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token'; -import { ThemeService, ThemedComponent } from '../services/theme/theme.service'; -import themes from './themes/index'; export const LabelPosition = /*@__PURE__*/mkenum({ BEFORE: 'before', @@ -73,7 +70,7 @@ let nextId = 0; templateUrl: 'checkbox.component.html', imports: [IgxRippleDirective] }) -export class IgxCheckboxComponent implements EditorProvider, OnInit, AfterViewInit, ControlValueAccessor { +export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, ControlValueAccessor { /** * An event that is emitted after the checkbox state is changed. @@ -477,7 +474,6 @@ export class IgxCheckboxComponent implements EditorProvider, OnInit, AfterViewIn * @hidden */ private _onTouchedCallback: () => void = noop; - public themeService = inject(ThemeService); /** * @hidden @@ -533,11 +529,6 @@ export class IgxCheckboxComponent implements EditorProvider, OnInit, AfterViewIn } } - /** @hidden @internal */ - public ngOnInit() { - this.themeService.adoptStyles(IgxCheckboxComponent, themes); - } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/index.ts b/projects/igniteui-angular/src/lib/checkbox/themes/index.ts deleted file mode 100644 index 6510b676ffb..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/index.ts +++ /dev/null @@ -1,37 +0,0 @@ -import base from './base.css'; -import material from './shared/material.css'; -import bootstrap from './shared/bootstrap.css'; -import fluent from './shared/fluent.css'; -import indigo from './shared/indigo.css'; - -import lightMaterial from './light/material.css'; -import lightBootstrap from './light/bootstrap.css'; -import lightFluent from './light/fluent.css'; -import lightIndigo from './light/indigo.css'; - -import darkMaterial from './dark/material.css'; -import darkBootstrap from './dark/bootstrap.css'; -import darkFluent from './dark/fluent.css'; -import darkIndigo from './dark/indigo.css'; - -export default { - base: base.css, - shared: { - material: material.css, - bootstrap: bootstrap.css, - fluent: fluent.css, - indigo: indigo.css - }, - light: { - material: lightMaterial.css, - bootstrap: lightBootstrap.css, - fluent: lightFluent.css, - indigo: lightIndigo.css - }, - dark: { - material: darkMaterial.css, - bootstrap: darkBootstrap.css, - fluent: darkFluent.css, - indigo: darkIndigo.css - } -} diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss new file mode 100644 index 00000000000..dc6d8fb0587 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss @@ -0,0 +1,37 @@ +@use 'sass:map'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@forward 'igniteui-theming/sass/themes'; +@forward 'igniteui-theming/sass/bem'; + +/// Includes a block element (@see block) for a specific component, theme, and variant. +/// @access private +/// @group bem +/// @param {String} $component - The class selector of the component. +/// @param {String} $theme - The target theme - material, bootstrap, fluent, indigo. +/// @param {String} $variant - The target variant - light, dark. +/// @requires {mixin} b +/// @example scss +@mixin themed-block($component, $theme, $variant) { + @container style(--theme: #{"" + $theme}) and style(--ig-theme-variant: #{$variant}) { + @include b($component) { + @content; + } + } +} + +/// Includes CSS variables for all themes given a map of tokens. +/// @access private +/// @param {String} $component - The class selector of the component. +/// @param {Map} $tokens - The resolved component schemas/tokens for each theme. +/// @param {String} $variant - The target variant - light, dark. +/// @requires {mixin} themed-block +/// @example scss +@mixin themes($component, $tokens, $variant) { + @each $theme in ('material', 'bootstrap', 'fluent', 'indigo') { + @include themed-block($component, $theme, $variant) { + $_t: map.get($tokens, $theme); + @include css-vars-from-theme($_t, $component); + } + } +} diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.ts b/projects/igniteui-angular/src/lib/icon/icon.component.ts index 928424fa13a..dbd531ce68a 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.component.ts @@ -14,7 +14,6 @@ import type { IconReference } from "./types"; import { filter, takeUntil } from "rxjs/operators"; import { Subject } from "rxjs"; import { SafeHtml } from "@angular/platform-browser"; -import { NgIf, NgTemplateOutlet } from "@angular/common"; /** * Icon provides a way to include material icons to markup @@ -41,7 +40,6 @@ import { NgIf, NgTemplateOutlet } from "@angular/common"; @Component({ selector: "igx-icon", templateUrl: "icon.component.html", - imports: [NgTemplateOutlet, NgIf] }) export class IgxIconComponent implements OnInit, OnChanges, OnDestroy { private _iconRef: IconReference; diff --git a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts deleted file mode 100644 index c200f48ebbb..00000000000 --- a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { ElementRef, inject, Injectable } from "@angular/core"; -import { THEME_TOKEN, ThemeToken, IgxTheme } from "igniteui-angular"; - -export interface ThemedComponent { - elementRef: ElementRef; - themeService: ThemeService; -} - -// eslint-disable-next-line @typescript-eslint/consistent-type-definitions -export type Themes = { - base: string; - shared?: { - [K in IgxTheme]?: string; - }; - light: { - [K in IgxTheme]?: string; - }; - dark: { - [K in IgxTheme]?: string; - }; -}; - -@Injectable({ - providedIn: "root", -}) -export class ThemeService { - /** - * Sets the theme of the component. - * Allowed values of type IgxTheme. - */ - private themeToken: ThemeToken = inject(THEME_TOKEN); - private componentThemes = new WeakMap(); - - public adoptStyles(componentInstance: Function, themes: Themes) { - let componentStyles = this.componentThemes.get(componentInstance); - - if (!componentStyles) { - componentStyles = new CSSStyleSheet(); - this.componentThemes.set(componentInstance, componentStyles); - document.adoptedStyleSheets = [...document.adoptedStyleSheets, componentStyles]; - } - - componentStyles.replaceSync( - Array.from(this.composeStyleSheet(themes).cssRules) - .map(rules => rules.cssText) - .join('\n') - ); - } - - private composeStyleSheet(themes: Themes) { - const sheet = new CSSStyleSheet(); - - sheet.insertRule(`@layer base {${themes.base}}`); - - for (const theme of ['indigo', 'material', 'bootstrap', 'fluent']) { - if (themes.shared[theme]) { - sheet.insertRule(`@layer ${theme} {${themes.shared[theme]}}`); - } - - sheet.insertRule(`@layer theme {${themes[this.themeToken.variant][theme]}`); - } - - return sheet; - } -} diff --git a/scripts/projects/igniteui-angular/src/lib/avatar/avatar.component.css b/scripts/projects/igniteui-angular/src/lib/avatar/avatar.component.css new file mode 100644 index 00000000000..b632e49d74c --- /dev/null +++ b/scripts/projects/igniteui-angular/src/lib/avatar/avatar.component.css @@ -0,0 +1,3 @@ +@layer base{.igx-avatar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--color);background:var(--background);vertical-align:middle;outline-style:none;flex-shrink:0;width:var(--size);height:var(--size)}.igx-avatar igx-icon{--component-size: 3;color:var(--icon-color)}.igx-avatar::after{box-shadow:none;transition:box-shadow .15s cubic-bezier(0.455, 0.03, 0.515, 0.955)}.igx-avatar__image{width:100%;height:100%;border-radius:inherit;background-size:cover;background-repeat:no-repeat;background-position:center}.igx-avatar--circle{border-radius:calc(var(--size)/2)}.igx-avatar--rounded{border-radius:var(--border-radius)}.igx-avatar--initials{text-transform:uppercase;font-size:calc(var(--size)/2);line-height:calc(var(--size)/2)}}@layer indigo{@container style(--theme: indigo){.igx-avatar igx-icon{--ig-size: 1}}}@container style(--theme: material) and style(--ig-theme-variant: light){.igx-avatar{--background: var(--igx-avatar-background, hsl(from var(--ig-gray-400) h s l/1));--color: var(--igx-avatar-color, hsl(from var(--ig-gray-800) h s l/1));--icon-color: var(--igx-avatar-icon-color, hsl(from var(--ig-gray-800) h s l/1));--border-radius: var(--igx-avatar-border-radius, 0.5rem);--size: var(--igx-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));--default-size: var(--igx-avatar-default-size, 1)}}@container style(--theme: bootstrap) and style(--ig-theme-variant: light){.igx-avatar{--background: var(--igx-avatar-background, hsl(from var(--ig-gray-400) h s l/1));--color: var(--igx-avatar-color, hsl(from var(--ig-gray-800) h s l/1));--icon-color: var(--igx-avatar-icon-color, hsl(from var(--ig-gray-800) h s l/1));--border-radius: var(--igx-avatar-border-radius, 0.25rem);--size: var(--igx-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));--default-size: var(--igx-avatar-default-size, 1)}}@container style(--theme: fluent) and style(--ig-theme-variant: light){.igx-avatar{--background: var(--igx-avatar-background, hsl(from var(--ig-gray-400) h s l/1));--color: var(--igx-avatar-color, hsl(from var(--ig-gray-800) h s l/1));--icon-color: var(--igx-avatar-icon-color, hsl(from var(--ig-gray-800) h s l/1));--border-radius: var(--igx-avatar-border-radius, 0.5rem);--size: var(--igx-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));--default-size: var(--igx-avatar-default-size, 1)}}@container style(--theme: indigo) and style(--ig-theme-variant: light){.igx-avatar{--background: var(--igx-avatar-background, hsl(from var(--ig-gray-300) h s l/1));--color: var(--igx-avatar-color, hsl(from var(--ig-gray-700) h s l/1));--icon-color: var(--igx-avatar-icon-color, hsl(from var(--ig-gray-600) h s l/1));--border-radius: var(--igx-avatar-border-radius, 0.25rem);--size: var(--igx-avatar-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));--default-size: var(--igx-avatar-default-size, 1)}}@container style(--theme: material) and style(--ig-theme-variant: dark){.igx-avatar{--background: var(--igx-avatar-background, hsl(from var(--ig-gray-400) h s l/1));--color: var(--igx-avatar-color, hsl(from var(--ig-gray-800) h s l/1));--icon-color: var(--igx-avatar-icon-color, hsl(from var(--ig-gray-800) h s l/1));--border-radius: var(--igx-avatar-border-radius, 0.5rem);--size: var(--igx-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));--default-size: var(--igx-avatar-default-size, 1)}}@container style(--theme: bootstrap) and style(--ig-theme-variant: dark){.igx-avatar{--background: var(--igx-avatar-background, hsl(from var(--ig-gray-400) h s l/1));--color: var(--igx-avatar-color, hsl(from var(--ig-gray-800) h s l/1));--icon-color: var(--igx-avatar-icon-color, hsl(from var(--ig-gray-800) h s l/1));--border-radius: var(--igx-avatar-border-radius, 0.25rem);--size: var(--igx-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));--default-size: var(--igx-avatar-default-size, 1)}}@container style(--theme: fluent) and style(--ig-theme-variant: dark){.igx-avatar{--background: var(--igx-avatar-background, hsl(from var(--ig-gray-400) h s l/1));--color: var(--igx-avatar-color, hsl(from var(--ig-gray-800) h s l/1));--icon-color: var(--igx-avatar-icon-color, hsl(from var(--ig-gray-800) h s l/1));--border-radius: var(--igx-avatar-border-radius, 0.5rem);--size: var(--igx-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));--default-size: var(--igx-avatar-default-size, 1)}}@container style(--theme: indigo) and style(--ig-theme-variant: dark){.igx-avatar{--background: var(--igx-avatar-background, hsl(from var(--ig-gray-300) h s l/1));--color: var(--igx-avatar-color, color-mix(in oklch, var(--ig-gray-300-contrast) 100%, transparent));--icon-color: var(--igx-avatar-icon-color, color-mix(in oklch, var(--ig-gray-300-contrast) 100%, transparent));--border-radius: var(--igx-avatar-border-radius, 0.25rem);--size: var(--igx-avatar-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));--default-size: var(--igx-avatar-default-size, 1)}}@container style(--theme: material) and style(--ig-theme-variant: dark){.igx-avatar__image{display:none}} + +/*# sourceMappingURL=mapsprojects/igniteui-angular/src/lib/avatar/avatar.component.css.map */ \ No newline at end of file diff --git a/scripts/sass.mjs b/scripts/sass.mjs index 1c93b226538..babd6c2eb9d 100644 --- a/scripts/sass.mjs +++ b/scripts/sass.mjs @@ -7,7 +7,7 @@ import { resolve } from 'node:path'; import { mkdirSync as makeDir } from 'fs'; import fsExtra from 'fs-extra'; import { fileURLToPath } from 'url'; -import { writeFile, readFile } from 'fs/promises'; +import { writeFile } from 'fs/promises'; import report from './report.mjs'; const THEMES = { @@ -26,11 +26,12 @@ const THEMES = { }; const STYLES = { - SRC: 'projects/igniteui-angular/src/lib/**/*.scss', + SRC: 'projects/igniteui-angular/src/lib/**/*.component.scss', + DIST: './', IGNORE: '!projects/igniteui-angular/src/lib/core/styles/**/*.scss', CONFIG: { style: 'compressed', - loadPaths: ['node_modules'], + loadPaths: ['node_modules', 'projects/igniteui-angular/src/lib/core/'], sourceMap: true, sourceMapEmbed: true, }, @@ -38,7 +39,7 @@ const STYLES = { const { copySync } = fsExtra; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const DEST_DIR = path.join.bind(null, path.resolve(__dirname, THEMES.DIST)); +const DEST_DIR = path.join.bind(null, resolve(__dirname, THEMES.DIST)); const stripComments = () => { return { @@ -59,18 +60,9 @@ const postProcessor = postcss([ stripComments, ]); -const _template = await readFile( - resolve(process.argv[1], '../styles.tmpl'), - 'utf8' -); const _postProcessor = postcss([autoprefixer, stripComments]); -export function fromTemplate(content) { - return _template.replace(/<%\s*content\s*%>/, content); -} -async function createFile(fileName, content) { - const outputFile = DEST_DIR(fileName); - +async function createFile(outputFile, content) { makeDir(path.dirname(outputFile), { recursive: true }); await writeFile(outputFile, content, 'utf-8'); } @@ -103,11 +95,8 @@ async function _buildThemes() { outCss = outCss + '\n'.repeat(2) + sourceMapComment; - await createFile(fileName, outCss); - await createFile( - `maps/${fileName}.map`, - JSON.stringify(result.sourceMap) - ); + const outputFile = DEST_DIR(fileName); + await createFile(outputFile, outCss); }) ); } catch (err) { @@ -119,8 +108,7 @@ async function _buildThemes() { await compiler.dispose(); } -export async function buildComponents(isProduction = false) { - const start = performance.now(); +export async function buildComponentStyles() { const [compiler, paths] = await Promise.all([ sass.initAsyncCompiler(), globby([STYLES.SRC, STYLES.IGNORE]), @@ -129,11 +117,27 @@ export async function buildComponents(isProduction = false) { try { await Promise.all( paths.map(async (path) => { - writeFile( - path.replace(/\.scss$/, '.css.ts'), - fromTemplate(await compileSass(path, compiler, STYLES.CONFIG)), - 'utf-8' - ); + const result = await compiler.compileAsync(path, STYLES.CONFIG); + const fileName = path + .replace(/\.scss$/, '.css') + .replace(STYLES.SRC, ''); + + const sm = JSON.stringify(result.sourceMap); + const smBase64 = (Buffer.from(sm, 'utf8') || '').toString('base64'); + const sourceMapComment = + '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,' + + smBase64 + + ' */'; + + let outCss = postProcessor.process(result.css).css; + + if (outCss.charCodeAt(0) === 0xfeff) { + outCss = outCss.substring(1); + } + + outCss = outCss + '\n'.repeat(2) + sourceMapComment; + + await createFile(fileName, outCss); }) ); } catch (err) { @@ -143,6 +147,12 @@ export async function buildComponents(isProduction = false) { } await compiler.dispose(); +} + +export async function buildComponents(isProduction = false) { + const start = performance.now(); + + await buildComponentStyles(); if (!isProduction) { report.success( diff --git a/scripts/styles.tmpl b/scripts/styles.tmpl deleted file mode 100644 index 7864a0b50dd..00000000000 --- a/scripts/styles.tmpl +++ /dev/null @@ -1,3 +0,0 @@ -export default { - css: `<% content %>` -} diff --git a/scripts/watch-styles.mjs b/scripts/watch-styles.mjs index 5221e7a23c8..ea197c98513 100644 --- a/scripts/watch-styles.mjs +++ b/scripts/watch-styles.mjs @@ -2,7 +2,8 @@ import { writeFile } from 'node:fs/promises'; import watch from 'node-watch'; import * as sass from 'sass-embedded'; import report from './report.mjs'; -import { compileSass, fromTemplate } from './sass.mjs'; +import { buildComponentStyles } from './sass.mjs'; +import { globby } from 'globby'; const watchOptions = { recursive: true, @@ -26,18 +27,7 @@ const watcher = watch( updating = true; try { - await writeFile( - path.replace(/\.scss$/, '.css.ts'), - fromTemplate( - await compileSass(path, compiler, { - style: 'compressed', - loadPaths: ['node_modules'], - sourceMap: true, - sourceMapEmbed: true, - }) - ), - 'utf8' - ); + await buildComponentStyles(); } catch (err) { report.error(err); } From 83e7bbd6fa07c4a81a2ccadc473a996cf35c6ba9 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 24 Jan 2025 10:29:02 +0200 Subject: [PATCH 007/131] refactor(styles): add themed component styles to a layer --- .../src/lib/core/styles/themes/_standalone.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss index dc6d8fb0587..56ca9f3e96e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss @@ -13,9 +13,11 @@ /// @requires {mixin} b /// @example scss @mixin themed-block($component, $theme, $variant) { - @container style(--theme: #{"" + $theme}) and style(--ig-theme-variant: #{$variant}) { - @include b($component) { - @content; + @layer #{$theme} { + @container style(--ig-theme: #{"" + $theme}) and style(--ig-theme-variant: #{$variant}) { + @include b($component) { + @content; + } } } } From b99884e9e3c3a535f364fbbca7218133f2a01486 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 24 Jan 2025 11:19:22 +0200 Subject: [PATCH 008/131] demos(theme): update --- src/styles/_demo-theme.scss | 34 +++++----------------------------- 1 file changed, 5 insertions(+), 29 deletions(-) diff --git a/src/styles/_demo-theme.scss b/src/styles/_demo-theme.scss index 20c3d2251ea..589769d769e 100644 --- a/src/styles/_demo-theme.scss +++ b/src/styles/_demo-theme.scss @@ -18,44 +18,20 @@ body { $schema: $schema, ); -.bootstrap-avatar { - @include palette($light-bootstrap-palette); +.indigo { + --ig-theme-variant: dark; - @include css-vars(avatar-theme( - $schema: $light-bootstrap-schema, - )); + @include palette($dark-indigo-palette); } -.material-avatar { - @include palette($light-material-palette); - - @include css-vars(avatar-theme( - $schema: $light-material-schema, - )); -} - -.custom-palette { - @include palette(palette( - $primary: green, - $secondary: green, - $surface: white, - $info: #1377d5, - $success: #4eb862, - $warn: #faa419, - $error: #ff134a, - $variant: 'material', - )); +.indigo-avatar { + @include css-vars(avatar-theme($schema: $dark-indigo-schema)); } .dock { @include css-vars(dock-manager-theme()); } -.custom-avatar { - --color: blue; - outline-color: blue; -} - .nav-header { @if $variant == 'light' { @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg'); From 5e2372c4e8cd73c52486d9de3574139d577cd313 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 24 Jan 2025 11:34:27 +0200 Subject: [PATCH 009/131] refactor(avatar): update base theme --- .../src/lib/avatar/themes/_base.scss | 46 +++++-------------- 1 file changed, 12 insertions(+), 34 deletions(-) diff --git a/projects/igniteui-angular/src/lib/avatar/themes/_base.scss b/projects/igniteui-angular/src/lib/avatar/themes/_base.scss index a5a74695d3e..82a97cd6682 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/_base.scss @@ -6,7 +6,7 @@ $theme: $material; @layer base { - %igx-avatar-display { + @include b(igx-avatar) { @include sizable(); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); @@ -34,50 +34,28 @@ $theme: $material; box-shadow: none; transition: box-shadow 0.15s $ease-in-out-quad; } - } - - %igx-avatar-image { - width: 100%; - height: 100%; - border-radius: inherit; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - } - - %igx-avatar--circle { - border-radius: calc(#{var-get($theme, 'size')} / 2); - } - - %igx-avatar--rounded { - border-radius: var-get($theme, 'border-radius'); - } - - %igx-avatar--initials { - text-transform: uppercase; - font-size: calc(#{var-get($theme, 'size')} / 2); - line-height: calc(#{var-get($theme, 'size')} / 2); - } - - @include b(igx-avatar) { - // @include css-vars-from-theme($base, 'igx-avatar'); - - @extend %igx-avatar-display; @include e(image) { - @extend %igx-avatar-image; + width: 100%; + height: 100%; + border-radius: inherit; + background-size: cover; + background-repeat: no-repeat; + background-position: center; } @include m(circle) { - @extend %igx-avatar--circle; + border-radius: calc(#{var-get($theme, 'size')} / 2); } @include m(rounded) { - @extend %igx-avatar--rounded; + border-radius: var-get($theme, 'border-radius'); } @include m(initials) { - @extend %igx-avatar--initials; + text-transform: uppercase; + font-size: calc(#{var-get($theme, 'size')} / 2); + line-height: calc(#{var-get($theme, 'size')} / 2); } } } From 444c21f406991c68f804a86e0c87ef329d4f8caf Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 24 Jan 2025 11:42:48 +0200 Subject: [PATCH 010/131] fix(avatar): icon size --- projects/igniteui-angular/src/lib/avatar/themes/_base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/avatar/themes/_base.scss b/projects/igniteui-angular/src/lib/avatar/themes/_base.scss index 82a97cd6682..f230c09826e 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/_base.scss @@ -25,7 +25,7 @@ $theme: $material; height: var-get($theme, 'size'); igx-icon { - --component-size: 3; + --ig-size: 3; color: var-get($theme, 'icon-color'); } From a2b7306b71cd6f2d627f2597233be4889e2d047f Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 29 Jan 2025 13:05:12 +0200 Subject: [PATCH 011/131] build(lig): build component styles before library --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a7e078169bb..d3616d5a24d 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "test:i18n": "ts-node --skip-project ./projects/igniteui-angular/src/lib/core/i18n/tests/tests.mjs", "test:elements": "ng test igniteui-angular-elements --watch=false --no-progress --code-coverage --source-map=false", "test:elements:watch": "ng test igniteui-angular-elements", - "build:lib": "ng build igniteui-angular --configuration production && npm run build:styles:all", + "build:lib": "npm run build:styles:all && ng build igniteui-angular --configuration production", "build:styles:all": "node scripts/build-styles.mjs", "build:styles:components": "node scripts/build-component-styles.mjs", "watch:styles": "node scripts/watch-styles.mjs", From 363035eef1e92e96f6b80df82856db1c06919db0 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Wed, 29 Jan 2025 14:21:54 +0200 Subject: [PATCH 012/131] refactor(icon): bundle styles with component (#15281) --- .../core/styles/themes/generators/_base.scss | 14 ++--- .../src/lib/icon/icon.component.scss | 3 + .../src/lib/icon/icon.component.ts | 3 + .../src/lib/icon/themes/_base.scss | 56 +++++++++++++++++++ .../src/lib/icon/themes/dark/_index.scss | 6 ++ .../src/lib/icon/themes/dark/_tokens.scss | 7 +++ .../src/lib/icon/themes/light/_index.scss | 6 ++ .../src/lib/icon/themes/light/_tokens.scss | 8 +++ scripts/sass.mjs | 1 - src/styles/_demo-theme.scss | 1 + 10 files changed, 97 insertions(+), 8 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/icon/icon.component.scss create mode 100644 projects/igniteui-angular/src/lib/icon/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/icon/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/icon/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/icon/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/icon/themes/light/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index a449cbe39f3..52d188b9d47 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -464,13 +464,13 @@ @include highlight($highlight-theme-map); } - @if is-used('igx-icon', $exclude) { - $icon-theme-map: icon-theme( - $schema: $schema, - ); - $icon-theme-map: meta.call($theme-handler, $icon-theme-map); - @include icon($icon-theme-map); - } + // @if is-used('igx-icon', $exclude) { + // $icon-theme-map: icon-theme( + // $schema: $schema, + // ); + // $icon-theme-map: meta.call($theme-handler, $icon-theme-map); + // @include icon($icon-theme-map); + // } @if is-used('igx-icon-button', $exclude) { $icon-button-theme-map: icon-button-theme( diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.scss b/projects/igniteui-angular/src/lib/icon/icon.component.scss new file mode 100644 index 00000000000..c7019d1c431 --- /dev/null +++ b/projects/igniteui-angular/src/lib/icon/icon.component.scss @@ -0,0 +1,3 @@ +@use 'themes/base'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.ts b/projects/igniteui-angular/src/lib/icon/icon.component.ts index dbd531ce68a..2ea1030ce74 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.component.ts @@ -8,6 +8,7 @@ import { OnChanges, ChangeDetectorRef, booleanAttribute, + ViewEncapsulation, } from "@angular/core"; import { IgxIconService } from "./icon.service"; import type { IconReference } from "./types"; @@ -39,7 +40,9 @@ import { SafeHtml } from "@angular/platform-browser"; */ @Component({ selector: "igx-icon", + styleUrl: "icon.component.css", templateUrl: "icon.component.html", + encapsulation: ViewEncapsulation.None, }) export class IgxIconComponent implements OnInit, OnChanges, OnDestroy { private _iconRef: IconReference; diff --git a/projects/igniteui-angular/src/lib/icon/themes/_base.scss b/projects/igniteui-angular/src/lib/icon/themes/_base.scss new file mode 100644 index 00000000000..00c1ac5d1ac --- /dev/null +++ b/projects/igniteui-angular/src/lib/icon/themes/_base.scss @@ -0,0 +1,56 @@ +@use 'sass:map'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use './light/tokens' as *; + +$theme: $material; + +@scope (.igx-icon) { + :scope:is(igx-icon) { + display: inline-flex; + // Using "em" unit here is on purpose see: + // https://github.com/IgniteUI/igniteui-angular/issues/13394#event-10241243103 + width: 1em; + height: 1em; + font-size: var-get($theme, 'size'); + direction: inherit; + + div, + svg { + display: block; + width: inherit; + height: inherit; + fill: currentColor; + } + + &[igxPrefix].material-icons, + &[igxSuffix].material-icons { + font-family: 'Material Icons', sans-serif; + } + } +} + +@layer base { + @include b(igx-icon) { + @include sizable(); + + --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); + + color: var-get($theme, 'color'); + + @include m(inactive) { + color: var-get($theme, 'disabled-color'); + opacity: 0.54; + } + + @include m(success) { + color: color($color: 'success'); + } + + @include m(error) { + color: color($color: 'error'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/icon/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/icon/themes/dark/_index.scss new file mode 100644 index 00000000000..6365365a1ba --- /dev/null +++ b/projects/igniteui-angular/src/lib/icon/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-icon, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/icon/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/icon/themes/dark/_tokens.scss new file mode 100644 index 00000000000..3e9f30ec1b3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/icon/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/icon' as *; + +$material: digest-schema($dark-material-icon); +$bootstrap: digest-schema($dark-bootstrap-icon); +$fluent: digest-schema($dark-fluent-icon); +$indigo: digest-schema($dark-indigo-icon); diff --git a/projects/igniteui-angular/src/lib/icon/themes/light/_index.scss b/projects/igniteui-angular/src/lib/icon/themes/light/_index.scss new file mode 100644 index 00000000000..8cdf703d1a1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/icon/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-icon, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/icon/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/icon/themes/light/_tokens.scss new file mode 100644 index 00000000000..f24a6ef3e16 --- /dev/null +++ b/projects/igniteui-angular/src/lib/icon/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/icon' as *; + +$base: digest-schema($light-icon); +$material: digest-schema($material-icon); +$bootstrap: digest-schema($bootstrap-icon); +$fluent: digest-schema($fluent-icon); +$indigo: digest-schema($indigo-icon); diff --git a/scripts/sass.mjs b/scripts/sass.mjs index babd6c2eb9d..380f28125cb 100644 --- a/scripts/sass.mjs +++ b/scripts/sass.mjs @@ -143,7 +143,6 @@ export async function buildComponentStyles() { } catch (err) { await compiler.dispose(); report.error(err); - process.exit(1); } await compiler.dispose(); diff --git a/src/styles/_demo-theme.scss b/src/styles/_demo-theme.scss index 589769d769e..6ceaa3e3afb 100644 --- a/src/styles/_demo-theme.scss +++ b/src/styles/_demo-theme.scss @@ -19,6 +19,7 @@ body { ); .indigo { + --ig-theme: indigo; --ig-theme-variant: dark; @include palette($dark-indigo-palette); From 8c013b2944651747d7138acb163df80a128c39ce Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 12:12:41 +0200 Subject: [PATCH 013/131] fix(checkbox): make light themes functional again --- .../src/lib/avatar/themes/shared/indigo.scss | 11 +- .../src/lib/checkbox/checkbox.component.scss | 4 + .../src/lib/checkbox/checkbox.component.ts | 3 + .../src/lib/checkbox/themes/_base.scss | 497 ++++++++++ .../src/lib/checkbox/themes/base.scss | 858 ------------------ .../src/lib/checkbox/themes/dark/_index.scss | 7 + .../dark/{_themes.scss => _tokens.scss} | 0 .../lib/checkbox/themes/dark/bootstrap.scss | 28 - .../src/lib/checkbox/themes/dark/fluent.scss | 23 - .../src/lib/checkbox/themes/dark/indigo.scss | 13 - .../lib/checkbox/themes/dark/material.scss | 13 - .../src/lib/checkbox/themes/light/_index.scss | 6 + .../light/{_themes.scss => _tokens.scss} | 0 .../lib/checkbox/themes/light/bootstrap.scss | 12 - .../src/lib/checkbox/themes/light/fluent.scss | 12 - .../src/lib/checkbox/themes/light/indigo.scss | 12 - .../lib/checkbox/themes/light/material.scss | 12 - .../checkbox/themes/shared/_bootstrap.scss | 117 +++ .../lib/checkbox/themes/shared/_fluent.scss | 171 ++++ .../lib/checkbox/themes/shared/_index.scss | 4 + .../lib/checkbox/themes/shared/_indigo.scss | 163 ++++ .../lib/checkbox/themes/shared/_material.scss | 63 ++ .../lib/checkbox/themes/shared/bootstrap.scss | 34 - .../lib/checkbox/themes/shared/fluent.scss | 110 --- .../lib/checkbox/themes/shared/indigo.scss | 41 - .../lib/checkbox/themes/shared/material.scss | 42 - .../lib/core/styles/themes/_standalone.scss | 20 +- 27 files changed, 1054 insertions(+), 1222 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/checkbox/checkbox.component.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/_base.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/base.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/_index.scss rename projects/igniteui-angular/src/lib/checkbox/themes/dark/{_themes.scss => _tokens.scss} (100%) delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/_index.scss rename projects/igniteui-angular/src/lib/checkbox/themes/light/{_themes.scss => _tokens.scss} (100%) delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/bootstrap.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/indigo.scss delete mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/shared/material.scss diff --git a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss index 2be391a2a26..22a540c4089 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss @@ -1,11 +1,8 @@ @use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; -@layer indigo { - @container style(--theme: indigo) { - @include b(igx-avatar) { - igx-icon { - --ig-size: 1; - } - } +@include themed-block(igx-avatar, indigo) { + igx-icon { + --ig-size: 1; } } diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.scss b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts index 2de30b20327..4e26f6c9a10 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts @@ -4,6 +4,7 @@ import { Input, AfterViewInit, booleanAttribute, + ViewEncapsulation, } from '@angular/core'; import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; import { CheckboxBaseDirective } from './checkbox-base.directive'; @@ -48,6 +49,8 @@ export interface IChangeCheckboxEventArgs extends IBaseEventArgs { ], preserveWhitespaces: false, templateUrl: 'checkbox.component.html', + styleUrl: 'checkbox.component.css', + encapsulation: ViewEncapsulation.None, imports: [IgxRippleDirective], }) export class IgxCheckboxComponent diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss new file mode 100644 index 00000000000..050f8fc79d9 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -0,0 +1,497 @@ +@use 'sass:map'; +@use 'sass:math'; +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use './light/tokens' as *; + +$_theme: $material; + +@layer base { + @include scale-in-out($start-scale: 0.9); + @include scale-in-center(); + + %cbx-display { + position: relative; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + outline-style: none; + cursor: pointer; + } + + %cbx-display--disabled { + user-select: none; + pointer-events: none; + cursor: initial; + } + + %cbx-input { + @include hide-default(); + } + + %cbx-composite-wrapper { + align-items: center; + justify-content: center; + display: flex; + position: relative; + width: var(--size); + height: var(--size); + + //ripple color + --color: #{var-get($_theme, 'empty-color')}; + } + + %cbx-composite-wrapper--x { + //ripple color + --color: #{var-get($_theme, 'fill-color')}; + } + + %cbx-composite { + position: relative; + display: flex; + justify-content: center; + width: var(--size); + height: var(--size); + min-width: var(--size); + background: var-get($_theme, 'empty-fill-color'); + border-width: var(--border-width); + border-style: solid; + border-color: var-get($_theme, 'empty-color'); + border-radius: var-get($_theme, 'border-radius'); + -webkit-tap-highlight-color: transparent; + transition: + border-color 0.2s $ease-out-quad, + background 0.2s $ease-out-quad; + overflow: hidden; + } + + %cbx-composite--hover { + border-color: var-get($_theme, 'empty-color-hover'); + } + + %cbx-composite--x { + border-color: var-get($_theme, 'fill-color'); + background: var-get($_theme, 'fill-color'); + } + + %cbx-composite--invalid { + border-color: var-get($_theme, 'error-color'); + } + + %cbx-composite-wrapper--invalid { + //ripple color + --color: #{var-get($_theme, 'error-color')}; + } + + %cbx-composite--invalid--hover { + border-color: var-get($_theme, 'error-color-hover'); + } + + %cbx-composite--x--invalid { + border-color: var-get($_theme, 'error-color'); + background: var-get($_theme, 'error-color'); + } + + %cbx-composite--x--hover { + border-color: var-get($_theme, 'fill-color-hover'); + background: var-get($_theme, 'fill-color-hover'); + } + + %cbx-composite--x--invalid--hover { + border-color: var-get($_theme, 'error-color-hover'); + background: var-get($_theme, 'error-color-hover'); + } + + %cbx-composite--disabled { + border-color: var-get($_theme, 'disabled-color'); + } + + %cbx-composite-mark { + width: 100%; + stroke: var-get($_theme, 'tick-color'); + stroke-linecap: square; + stroke-width: var(--mark-stroke); + stroke-dasharray: var(--mark-length); + stroke-dashoffset: var(--mark-length); + fill: none; + opacity: 0; + z-index: 1; + } + + %igx-checkbox--indeterminate { + %cbx-composite-mark { + margin-inline-start: var(--mark-offset); + } + + &:hover { + %cbx-composite { + border-color: var-get($_theme, 'fill-color-hover'); + background: var-get($_theme, 'fill-color-hover'); + + &::before { + background: var-get($_theme, 'fill-color-hover'); + } + } + } + } + + %igx-checkbox--indeterminate--invalid { + %cbx-composite--x { + border-color: var-get($_theme, 'error-color'); + background: var-get($_theme, 'error-color'); + } + + %cbx-composite--x--hover { + border-color: var-get($_theme, 'error-color-hover'); + background: var-get($_theme, 'error-color-hover'); + } + } + + %cbx-composite-mark--x { + stroke-dashoffset: 0; + opacity: 1; + transition: + all 0.2s $ease-out-quad, + opacity 0.2s $ease-out-quad; + } + + %cbx-composite-mark--in { + stroke-dashoffset: 41; /* length of path - adjacent line length */ + opacity: 1; + rotate: 45deg; + transform: translateX( + calc(var(--mark-stroke) / var(--mark-length) * -1em) + ); + } + + + %cbx-composite-mark--invalid--fluent { + // @if $variant == 'fluent' and $theme-variant == 'dark' { + // stroke: color($color: 'error', $variant: 500); + // } + } + + %cbx-label { + display: inline-block; + color: var-get($_theme, 'label-color'); + user-select: none; + word-wrap: break-all; + transition: color 0.2s $ease-out-quad; + + &:empty { + margin: 0; + } + } + + %cbx-label-pos--before, + %cbx-label-pos--after { + &:empty { + margin: 0; + } + } + + %cbx-label-pos--after { + margin-inline-start: var(--label-margin); + } + + %cbx-label-pos--before { + margin-inline-end: var(--label-margin); + order: -1; + } + + %cbx-label--invalid { + color: var-get($_theme, 'error-color'); + } + + %cbx-label--disabled { + color: var-get($_theme, 'disabled-color-label'); + } + + %cbx-ripple { + --_ripple-size: #{rem(40px)}; + + display: none; + position: absolute; + top: calc(50% - calc(var(--_ripple-size) / 2)); + width: var(--_ripple-size); + aspect-ratio: 1; + border-radius: var-get($_theme, 'border-radius-ripple'); + overflow: hidden; + pointer-events: none; + filter: opacity(1); + } + + %cbx-ripple--hover { + background: var-get($_theme, 'empty-color'); + transition: background 0.2s $ease-out-quad; + opacity: 0.06; + + @container style(--ig-theme-variant: dark) { + opacity: 0.12; + } + } + + %cbx-ripple--hover-checked { + background: var-get($_theme, 'fill-color'); + } + + %cbx-ripple--hover-invalid { + background: var-get($_theme, 'error-color'); + } + + %cbx-ripple--focused { + background: var-get($_theme, 'empty-color'); + transition: background 0.2s $ease-out-quad; + opacity: 0.12; + + @container style(--ig-theme-variant: dark) { + opacity: 0.24; + } + } + + %cbx-ripple--focused-checked { + background: var-get($_theme, 'fill-color'); + } + + %cbx-ripple--focused-invalid { + background: var-get($_theme, 'error-color'); + } + + %cbx-ripple--pressed { + opacity: 0.12; + + @container style(--ig-theme-variant: dark) { + opacity: 0.24; + } + } + + %cbx-display--plain { + %cbx-composite, + %cbx-composite::after, + %cbx-composite-mark, + %cbx-composite-mark--x { + transition: none; + } + } + + @include b(igx-checkbox) { + @extend %cbx-display; + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + } + } + + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--pressed !optional; + } + } + + @include e(input) { + @extend %cbx-input !optional; + } + + @include e(label) { + @extend %cbx-label !optional; + @extend %cbx-label-pos--after !optional; + } + + @include e(label, $m: before) { + @extend %cbx-label !optional; + @extend %cbx-label-pos--before !optional; + } + + @include e(composite-wrapper) { + @extend %cbx-composite-wrapper !optional; + } + + @include e(composite) { + @extend %cbx-composite !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark !optional; + } + + @include e(ripple) { + @extend %cbx-ripple !optional; + } + + @include m(invalid) { + @include e(composite) { + @extend %cbx-composite--invalid !optional; + } + + @include e(composite-wrapper) { + @extend %cbx-composite-wrapper--invalid !optional; + } + + @include e(label) { + @extend %cbx-label--invalid !optional; + } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-invalid !optional; + } + + @include e(composite) { + @extend %cbx-composite--invalid--hover !optional; + } + } + + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover-invalid !optional; + } + } + } + + @include mx(invalid, checked) { + @include e(composite) { + @extend %cbx-composite--x--invalid !optional; + } + + &:hover { + @include e(composite) { + @extend %cbx-composite--x--invalid--hover !optional; + } + } + } + + @include m(focused) { + @extend %igx-checkbox--focused !optional; + + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + } + } + } + + @include mx(focused, checked) { + @extend %igx-checkbox--focused-checked !optional; + } + + @include mx(focused, invalid) { + @include e(ripple) { + @extend %cbx-ripple--focused-invalid !optional; + } + } + + @include m(indeterminate) { + @extend %igx-checkbox--indeterminate !optional; + + @include e(composite) { + @extend %cbx-composite--x !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark--in !optional; + } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + } + } + + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + @extend %cbx-ripple--pressed !optional; + } + } + } + + @include mx(invalid, indeterminate) { + @extend %igx-checkbox--indeterminate--invalid !optional; + + &:hover { + @include e(composite) { + @extend %cbx-composite--x--hover !optional; + } + } + } + + @include m(checked) { + @include e(composite) { + @extend %cbx-composite--x !optional; + } + + @include e(composite-mark) { + @extend %cbx-composite-mark--x !optional; + } + + @include e(composite-wrapper) { + @extend %cbx-composite-wrapper--x !optional; + } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + } + + @include e(composite) { + @extend %cbx-composite--x--hover !optional; + } + } + + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + @extend %cbx-ripple--pressed !optional; + } + } + } + + @include m(disabled) { + @extend %cbx-display--disabled !optional; + + @include e(label) { + @extend %cbx-label--disabled !optional; + } + + @include e(label, $m: before) { + @extend %cbx-label--disabled !optional; + } + + @include e(composite) { + @extend %cbx-composite--disabled !optional; + } + } + + @include m(plain) { + @extend %cbx-display--plain !optional; + } + + @include mx(focused, checked) { + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple--focused-checked !optional; + } + } + + @include mx(focused, indeterminate) { + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple--focused-checked !optional; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/base.scss deleted file mode 100644 index 63a950f17f6..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/base.scss +++ /dev/null @@ -1,858 +0,0 @@ -@use 'sass:map'; -@use 'sass:math'; -@use 'igniteui-theming/sass/animations' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/color/functions' as *; -@use './light/themes' as *; - -$theme: $material; - -$theme-variant: map.get($theme, '_meta', 'theme-variant'); -$variant: map.get($theme, '_meta', 'variant'); - -@include scale-in-out($start-scale: 0.9); -@include scale-in-center(); - -%cbx-display { - position: relative; - display: inline-flex; - flex-flow: row nowrap; - align-items: center; - outline-style: none; - cursor: pointer; -} - -%cbx-display--disabled { - user-select: none; - pointer-events: none; - cursor: initial; -} - -%cbx-input { - @include hide-default(); -} - -%cbx-composite-wrapper { - align-items: center; - justify-content: center; - display: flex; - position: relative; - width: var(--size); - height: var(--size); - - // @if $variant == 'material' { - // padding: rem(20px); - // } - - //ripple color - --color: #{var-get($theme, 'empty-color')}; -} - -%cbx-composite-wrapper--x { - //ripple color - --color: #{var-get($theme, 'fill-color')}; -} - -%cbx-composite { - position: relative; - display: inline-block; - width: var(--size); - height: var(--size); - min-width: var(--size); - background: var-get($theme, 'empty-fill-color'); - border-width: var(--border-width); - border-style: solid; - border-color: var-get($theme, 'empty-color'); - border-radius: var-get($theme, 'border-radius'); - -webkit-tap-highlight-color: transparent; - transition: - border-color 0.2s $ease-out-quad, - background 0.2s $ease-out-quad; - overflow: hidden; -} - -%cbx-composite--hover { - border-color: var-get($theme, 'empty-color-hover'); -} - -%cbx-composite--x { - border-color: var-get($theme, 'fill-color'); - background: var-get($theme, 'fill-color'); -} - -%cbx-composite--invalid { - border-color: var-get($theme, 'error-color'); - - // @if $variant == 'bootstrap' and $theme-variant == 'dark' { - // %cbx-composite-mark { - // stroke: black; - // } - // } -} - -%cbx-composite-wrapper--invalid { - //ripple color - --color: #{var-get($theme, 'error-color')}; -} - -%cbx-composite--invalid--hover { - border-color: var-get($theme, 'error-color-hover'); -} - -%cbx-composite--x--invalid { - border-color: var-get($theme, 'error-color'); - background: var-get($theme, 'error-color'); -} - -%cbx-composite--x--hover { - border-color: var-get($theme, 'fill-color-hover'); - background: var-get($theme, 'fill-color-hover'); -} - -%cbx-composite--x--invalid--hover { - border-color: var-get($theme, 'error-color-hover'); - background: var-get($theme, 'error-color-hover'); -} - -%cbx-composite--disabled { - border-color: var-get($theme, 'disabled-color'); - - // @if $variant == 'bootstrap' and $theme-variant == 'dark' { - // background: color($color: 'surface', $variant: 500); - // } -} - -%cbx-composite--x--disabled { - // @if $variant == 'material' or $variant == 'fluent' { - // background: var-get($theme, 'disabled-color'); - // } - - // @if $variant == 'indigo' or $variant == 'bootstrap' { - // background: var-get($theme, 'disabled-indeterminate-color'); - // border-color: transparent; - // } - - // @if $variant != 'indigo' { - // %cbx-composite-mark { - // stroke: var-get($theme, 'disabled-tick-color'); - // } - // } @else { - // %cbx-composite-mark { - // stroke: unset; - // fill: var-get($theme, 'disabled-tick-color'); - // } - // } -} - -%cbx-composite-mark { - position: absolute; - inset: 0; - stroke: var-get($theme, 'tick-color'); - stroke-linecap: square; - stroke-width: var(--mark-stroke); - stroke-dasharray: var(--mark-length); - stroke-dashoffset: var(--mark-length); - fill: none; - opacity: 0; - z-index: 1; -} - -%cbx-composite-mark-material { - inset-inline-start: -0.5px; -} - -%cbx-composite-mark-indigo { - stroke: unset; - stroke-linecap: unset; - stroke-width: unset; - stroke-dasharray: unset; - stroke-dashoffset: unset; - fill: var-get($theme, 'tick-color'); - transition: none !important; - - rect { - fill: none; - } -} - -%igx-checkbox--indeterminate { - %cbx-composite-mark { - top: var(--mark-offset); - margin-inline-start: var(--mark-offset); - } - - &:hover { - %cbx-composite { - border-color: var-get($theme, 'fill-color-hover'); - background: var-get($theme, 'fill-color-hover'); - - &::before { - background: var-get($theme, 'fill-color-hover'); - } - - // @if $variant == 'fluent' { - // background: transparent; - // } - } - } -} - -%igx-checkbox--indeterminate-indigo { - %cbx-composite-mark { - fill: none !important; - stroke-dashoffset: unset !important; - transform: none !important; - - rect { - fill: var-get($theme, 'tick-color'); - opacity: 1; - } - } -} - -%igx-checkbox--disabled-indeterminate-indigo { - @extend %igx-checkbox--indeterminate-indigo; - - %cbx-composite-mark { - rect { - fill: var-get($theme, 'disabled-tick-color'); - } - } -} - -%igx-checkbox--indeterminate-fluent { - %cbx-composite-mark { - stroke: transparent; - } - - %cbx-composite { - background: transparent; - - &::before { - content: ''; - position: absolute; - top: calc(var(--size) / 2 - rem(6px)); - inset-inline-start: calc(var(--size) / 2 - rem(6px)); - width: rem(10px); - height: rem(10px); - border-radius: border-radius(rem(2px)); - background: var-get($theme, 'fill-color'); - z-index: 1; - } - } -} - -%igx-checkbox--disabled-indeterminate-fluent { - %cbx-composite-mark { - stroke: transparent; - } - - %cbx-composite--x--disabled { - background: transparent; - - &::before { - background: var-get($theme, 'disabled-color'); - } - } -} - -%igx-checkbox--disabled-indeterminate-material { - %cbx-composite--x--disabled { - border-color: var-get($theme, 'disabled-indeterminate-color'); - background: var-get($theme, 'disabled-indeterminate-color'); - } -} - -%igx-checkbox--indeterminate--invalid { - %cbx-composite--x { - border-color: var-get($theme, 'error-color'); - background: var-get($theme, 'error-color'); - } - - %cbx-composite--x--hover { - border-color: var-get($theme, 'error-color-hover'); - background: var-get($theme, 'error-color-hover'); - } - - // @if $variant == 'fluent' { - // %cbx-composite { - // border-color: var-get($theme, 'error-color'); - - // &::before { - // background: var-get($theme, 'error-color'); - // } - // } - - // %cbx-composite--x { - // background: transparent; - // } - - // &:hover { - // %cbx-composite { - // background: transparent; - // border-color: var-get($theme, 'error-color-hover'); - - // &::before { - // background: var-get($theme, 'error-color-hover'); - // } - // } - // } - // } -} - -%cbx-composite-mark--x { - stroke-dashoffset: 0; - opacity: 1; - transition: - all 0.2s $ease-out-quad, - opacity 0.2s $ease-out-quad; -} - -%cbx-composite-mark--in { - stroke-dashoffset: 41; /* length of path - adjacent line length */ - opacity: 1; - rotate: 45deg; - transform: translateX(calc(var(--mark-stroke) / var(--mark-length) * -1em)); -} - -%cbx-composite-mark--fluent { - // @if $variant == 'fluent' { - // @extend %cbx-composite-mark; - // @extend %cbx-composite-mark--x; - // stroke: var-get($theme, 'tick-color-hover'); - // } -} - -%cbx-composite-mark--x--fluent { - // @if $variant == 'fluent' { - // stroke: var-get($theme, 'tick-color'); - // } -} - -%cbx-composite-mark--invalid--fluent { - // @if $variant == 'fluent' { - // stroke: var-get($theme, 'error-color'); - // } - - // @if $variant == 'fluent' and $theme-variant == 'dark' { - // stroke: color($color: 'error', $variant: 500); - // } -} - -%cbx-composite-mark--in--fluent { - // @if $variant == 'fluent' { - // stroke: transparent; - // } -} - -%cbx-label { - display: inline-block; - color: var-get($theme, 'label-color'); - user-select: none; - word-wrap: break-all; - transition: color 0.2s $ease-out-quad; - - &:empty { - margin: 0; - } -} - -%cbx-label--hover { - color: var-get($theme, 'label-color-hover'); -} - -%cbx-label-pos--before, -%cbx-label-pos--after { - &:empty { - margin: 0; - } -} - -%cbx-label-pos--after { - margin-inline-start: var(--label-margin); -} - -%cbx-label-pos--before { - margin-inline-end: var(--label-margin); - order: -1; -} - -%cbx-label--invalid { - color: var-get($theme, 'error-color'); -} - -%cbx-label--disabled { - color: var-get($theme, 'disabled-color-label'); -} - -%cbx-ripple { - --_ripple-size: #{rem(40px)}; - - display: none; - position: absolute; - top: calc(50% - calc(var(--_ripple-size) / 2)); - width: var(--_ripple-size); - aspect-ratio: 1; - border-radius: var-get($theme, 'border-radius-ripple'); - overflow: hidden; - pointer-events: none; - filter: opacity(1); -} - -%cbx-ripple--hover { - background: var-get($theme, 'empty-color'); - transition: background 0.2s $ease-out-quad; - opacity: 0.06; - - @container style(--ig-theme-variant: dark) { - opacity: 0.12; - } -} - -%cbx-ripple--hover-checked { - background: var-get($theme, 'fill-color'); -} - -%cbx-ripple--hover-invalid { - background: var-get($theme, 'error-color'); -} - -%igx-checkbox--focused-indigo { - %cbx-composite { - border-radius: var-get($theme, 'border-radius'); - box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); - } -} - -%igx-checkbox--focused-fluent { - position: relative; - $focus-outline-offset: rem(2px); - - &::after { - content: ''; - position: absolute; - inset: -$focus-outline-offset; - box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color'); - } -} - -%igx-checkbox--focused-bootstrap { - %cbx-composite { - border-radius: var-get($theme, 'border-radius'); - border-color: color($color: 'primary', $variant: 200); - box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color'); - } -} - -%igx-checkbox--focused-hovered { - %cbx-composite { - border-color: color($color: 'primary', $variant: 300); - } -} - -%igx-checkbox--focused-checked-indigo { - %cbx-composite { - border-radius: var-get($theme, 'border-radius'); - box-shadow: 0 0 0 rem(3px) - var-get($theme, 'focus-outline-color-focused'); - } -} - -%igx-checkbox--focused-checked-bootstrap { - %cbx-composite { - border-color: transparent; - } -} - -%igx-checkbox--focused-invalid-indigo { - %cbx-composite { - box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error'); - } -} - -%igx-checkbox--focused-invalid-bootstrap { - %cbx-composite { - border-color: var-get($theme, 'error-color'); - box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color-error'); - } - - &:hover { - %cbx-composite { - border-color: var-get($theme, 'error-color-hover'); - } - } -} - -%cbx-ripple--focused { - background: var-get($theme, 'empty-color'); - transition: background 0.2s $ease-out-quad; - opacity: 0.12; - - @container style(--ig-theme-variant: dark) { - opacity: 0.24; - } -} - -%cbx-ripple--focused-checked { - background: var-get($theme, 'fill-color'); -} - -%cbx-ripple--focused-invalid { - background: var-get($theme, 'error-color'); -} - -%cbx-ripple--pressed { - opacity: 0.12; - - @container style(--ig-theme-variant: dark) { - opacity: 0.24; - } -} - -%cbx-display--plain { - %cbx-composite, - %cbx-composite::after, - %cbx-composite-mark, - %cbx-composite-mark--x { - transition: none; - } -} - -@include b(igx-checkbox) { - @include css-vars-from-theme($base, 'igx-checkbox'); - @extend %cbx-display !optional; - - &:hover { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - } - - @include e(composite-mark) { - @extend %cbx-composite-mark--fluent !optional; - } - } - - &:active { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--pressed !optional; - } - } - - @include e(input) { - @extend %cbx-input !optional; - } - - @include e(label) { - @extend %cbx-label !optional; - @extend %cbx-label-pos--after !optional; - } - - @include e(label, $m: before) { - @extend %cbx-label !optional; - @extend %cbx-label-pos--before !optional; - } - - @include e(composite-wrapper) { - @extend %cbx-composite-wrapper !optional; - } - - @include e(composite) { - @extend %cbx-composite !optional; - } - - @include e(composite-mark) { - @extend %cbx-composite-mark !optional; - } - - @include e(ripple) { - @extend %cbx-ripple !optional; - } - - @include m(bootstrap) { - @include e(composite) { - &:hover { - @extend %cbx-composite--hover !optional; - } - } - } - - @include m(indigo) { - @include e(composite) { - &:hover { - @extend %cbx-composite--hover !optional; - } - } - - @include e(composite-mark) { - @extend %cbx-composite-mark-indigo !optional; - } - - @include e(label) { - &:hover { - @extend %cbx-label--hover !optional; - } - } - } - - @include m(invalid) { - @include e(composite) { - @extend %cbx-composite--invalid !optional; - } - - @include e(composite-wrapper) { - @extend %cbx-composite-wrapper--invalid !optional; - } - - @include e(label) { - @extend %cbx-label--invalid !optional; - } - - &:hover { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-invalid !optional; - } - - @include e(composite) { - @extend %cbx-composite--invalid--hover !optional; - } - - @include e(composite-mark) { - @extend %cbx-composite-mark--invalid--fluent !optional; - } - } - - &:active { - @include e(ripple) { - @extend %cbx-ripple--hover-invalid !optional; - } - } - } - - @include mx(invalid, checked) { - @include e(composite) { - @extend %cbx-composite--x--invalid !optional; - } - - &:hover { - @include e(composite) { - @extend %cbx-composite--x--invalid--hover !optional; - } - - @include e(composite-mark) { - @extend %cbx-composite-mark--x--fluent !optional; - } - } - } - - @include m(focused) { - @extend %igx-checkbox--focused !optional; - - @include e(ripple) { - @extend %cbx-ripple--focused !optional; - } - - &:hover { - @include e(ripple) { - @extend %cbx-ripple--focused !optional; - } - } - } - - @include mx(indigo, focused) { - @extend %igx-checkbox--focused-indigo !optional; - } - - @include mx(fluent, focused) { - @extend %igx-checkbox--focused-fluent !optional; - } - - @include mx(bootstrap, focused) { - @extend %igx-checkbox--focused-bootstrap !optional; - - &:hover { - @extend %igx-checkbox--focused-hovered !optional; - } - } - - @include mx(indigo, focused, checked) { - @extend %igx-checkbox--focused-checked-indigo !optional; - } - - @include mx(bootstrap, focused, checked) { - @extend %igx-checkbox--focused-checked-bootstrap !optional; - } - - @include mx(focused, checked) { - @extend %igx-checkbox--focused-checked !optional; - } - - @include mx(focused, invalid) { - @include e(ripple) { - @extend %cbx-ripple--focused-invalid !optional; - } - } - - @include mx(indigo, focused, invalid) { - @extend %igx-checkbox--focused-invalid-indigo !optional; - } - - @include mx(bootstrap, focused, invalid) { - @extend %igx-checkbox--focused-invalid-bootstrap !optional; - } - - @include m(indeterminate) { - @extend %igx-checkbox--indeterminate !optional; - - @include e(composite) { - @extend %cbx-composite--x !optional; - } - - @include e(composite-mark) { - @extend %cbx-composite-mark--in !optional; - } - - &:hover { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; - } - - @include e(composite-mark) { - @extend %cbx-composite-mark--in--fluent !optional; - } - } - - &:active { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; - @extend %cbx-ripple--pressed !optional; - } - } - } - - @include mx(indigo, indeterminate) { - @extend %igx-checkbox--indeterminate-indigo !optional; - } - - @include mx(fluent, indeterminate) { - @extend %igx-checkbox--indeterminate-fluent !optional; - } - - @include mx(invalid, indeterminate) { - @extend %igx-checkbox--indeterminate--invalid !optional; - - &:hover { - @include e(composite) { - @extend %cbx-composite--x--hover !optional; - } - } - } - - @include mx(material, disabled, indeterminate) { - @extend %igx-checkbox--disabled-indeterminate-material !optional; - } - - @include mx(fluent, disabled, indeterminate) { - @extend %igx-checkbox--disabled-indeterminate-fluent !optional; - } - - @include mx(indigo, disabled, indeterminate) { - @extend %igx-checkbox--disabled-indeterminate-indigo !optional; - } - - @include mx(indigo, focused, indeterminate) { - @extend %igx-checkbox--focused-checked-indigo !optional; - } - - @include mx(bootstrap, focused, indeterminate) { - @extend %igx-checkbox--focused-checked-bootstrap !optional; - } - - @include m(checked) { - @include e(composite) { - @extend %cbx-composite--x !optional; - } - - @include e(composite-mark) { - @extend %cbx-composite-mark--x !optional; - } - - @include e(composite-wrapper) { - @extend %cbx-composite-wrapper--x !optional; - } - - &:hover { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; - } - - @include e(composite) { - @extend %cbx-composite--x--hover !optional; - } - - @include e(composite-mark) { - @extend %cbx-composite-mark--x--fluent !optional; - } - } - - &:active { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; - @extend %cbx-ripple--pressed !optional; - } - } - } - - @include m(disabled) { - @extend %cbx-display--disabled !optional; - - @include e(label) { - @extend %cbx-label--disabled !optional; - } - - @include e(label, $m: before) { - @extend %cbx-label--disabled !optional; - } - - @include e(composite) { - @extend %cbx-composite--disabled !optional; - } - } - - @include m(plain) { - @extend %cbx-display--plain !optional; - } - - @include mx(focused, checked) { - @include e(ripple) { - @extend %cbx-ripple--focused !optional; - @extend %cbx-ripple--focused-checked !optional; - } - } - - @include mx(focused, indeterminate) { - @include e(ripple) { - @extend %cbx-ripple--focused !optional; - @extend %cbx-ripple--focused-checked !optional; - } - } - - @include mx(indeterminate, disabled) { - @include e(composite) { - @extend %cbx-composite--x--disabled !optional; - } - } - - @include mx(checked, disabled) { - @include e(composite) { - @extend %cbx-composite--x--disabled !optional; - } - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_index.scss new file mode 100644 index 00000000000..bc3f798cec3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_index.scss @@ -0,0 +1,7 @@ + +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-checkbox, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/_themes.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_tokens.scss similarity index 100% rename from projects/igniteui-angular/src/lib/checkbox/themes/dark/_themes.scss rename to projects/igniteui-angular/src/lib/checkbox/themes/dark/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss deleted file mode 100644 index 238f588d78b..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/dark/bootstrap.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use 'igniteui-theming/sass/color/functions' as *; -@use '../light/themes' as light; -@use 'themes' as *; - -$theme: $bootstrap; - -@container style(--theme: bootstrap) { - @include b(igx-checkbox) { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); - - @include m(invalid) { - @include e(composite-mark) { - // TODO: Check why this property is not part of the schemas - stroke: black; - } - } - - @include m(disabled) { - @include e(composite) { - // TODO: Check why this property is not part of the schemas - background: color($color: 'surface', $variant: 500); - } - } - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss deleted file mode 100644 index d2ba3956a91..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/dark/fluent.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/color/functions' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use '../light/themes' as light; -@use 'themes' as *; - -$theme: $fluent; - -@container style(--theme: fluent) { - @include b(igx-checkbox) { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); - - @include m(invalid) { - &:hover { - @include e(composite-mark) { - // TODO: Check why this property is not part of the schemas - stroke: color($color: 'error', $variant: 500); - } - } - } - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss deleted file mode 100644 index 77968828789..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/dark/indigo.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use '../light/themes' as light; -@use 'themes' as *; - -$theme: $indigo; - -@container style(--ig-theme: indigo) { - @include b(igx-checkbox) { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss deleted file mode 100644 index 763ff7f8199..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/dark/material.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use '../light/themes' as light; -@use 'themes' as *; - -$theme: $material; - -@container style(--theme: material) { - @include b(igx-checkbox) { - @include css-vars-from-theme(diff(light.$base, $theme), 'igx-checkbox'); - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/_index.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/_index.scss new file mode 100644 index 00000000000..f7e0aa022cc --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-checkbox, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/_themes.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/_tokens.scss similarity index 100% rename from projects/igniteui-angular/src/lib/checkbox/themes/light/_themes.scss rename to projects/igniteui-angular/src/lib/checkbox/themes/light/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss deleted file mode 100644 index 4b29e588f57..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/light/bootstrap.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use 'themes' as *; - -$theme: $bootstrap; - -@container style(--theme: bootstrap) { - @include b(igx-checkbox) { - @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss deleted file mode 100644 index 9d09abe7ec9..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/light/fluent.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use 'themes' as *; - -$theme: $fluent; - -@container style(--theme: fluent) { - @include b(igx-checkbox) { - @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss deleted file mode 100644 index 8ae2893a0b2..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/light/indigo.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use 'themes' as *; - -$theme: $indigo; - -@container style(--theme: indigo) { - @include b(igx-checkbox) { - @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss deleted file mode 100644 index bd364f81b76..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/light/material.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/utils/map' as *; -@use 'themes' as *; - -$theme: $material; - -@container style(--theme: material) { - @include b(igx-checkbox) { - @include css-vars-from-theme(diff($base, $theme), 'igx-checkbox'); - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..3abfc9b0668 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss @@ -0,0 +1,117 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-checkbox, bootstrap) { + --size: #{rem(16px)}; + --border-width: #{rem(1px)}; + --label-margin: #{rem(8px)}; + --mark-stroke: 3; + --mark-length: 24; + --mark-offset: 1px; + + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'empty-color-hover'); + } + } + + @include e(composite-mark) { + width: rem(11px); + aspect-ratio: 1; + transition: none; + } + + @include e(label) { + @include type-style(body-1) { + margin-block: 0; + } + } + + + @include m(checked) { + &:hover { + @include e(composite) { + border-color: transparent; + } + } + } + + @include m(indeterminate) { + &:hover { + @include e(composite) { + border-color: transparent; + } + } + } + + @include m(focused) { + @include e(composite) { + border-radius: var-get($_theme, 'border-radius'); + border-color: color($color: 'primary', $variant: 200); + box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-outline-color'); + } + + &:hover { + @include e(composite) { + border-color: color($color: 'primary', $variant: 300); + } + } + } + + @include mx(focused, checked) { + @include e(composite) { + border-color: transparent; + } + } + + @include mx(focused, invalid) { + @include e(composite) { + border-color: var-get($_theme, 'error-color'); + box-shadow: 0 0 0 rem(4px) + var-get($_theme, 'focus-outline-color-error'); + } + + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'error-color-hover'); + } + } + } + + @include mx(focused, indeterminate) { + @include e(composite) { + border-color: transparent; + } + } + + @include mx(checked, disabled) { + @include e(composite) { + background: var-get($_theme, 'disabled-indeterminate-color'); + border-color: transparent; + } + } + + @include mx(indeterminate, invalid) { + @include e(composite) { + background: var-get($_theme, 'error-color'); + border-color: transparent; + } + } + + @include mx(indeterminate, disabled) { + @include e(composite) { + background: var-get($_theme, 'disabled-indeterminate-color'); + border-color: transparent; + } + + @include e(composite-mark) { + stroke: var-get($_theme, 'disabled-tick-color'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss new file mode 100644 index 00000000000..eb685006a7e --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss @@ -0,0 +1,171 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/animations' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-checkbox, fluent) { + --size: #{rem(20px)}; + --border-width: #{rem(1px)}; + --label-margin: #{rem(8px)}; + --mark-stroke: 1.5; + --mark-length: 24; + --mark-offset: -1px; + + &:hover { + @include e(composite) { + background: transparent; + } + + @include e(composite-mark) { + stroke-linecap: square; + stroke-width: var(--mark-stroke); + stroke-dasharray: var(--mark-length); + stroke-dashoffset: 0; + fill: none; + z-index: 1; + opacity: 1; + transition: none; + + stroke: var-get($_theme, 'tick-color-hover'); + } + } + + @include e(composite-mark) { + width: rem(16px); + aspect-ratio: 1; + } + + @include e(label) { + @include type-style(body-2) { + margin-block: 0; + } + } + + @include m(focused) { + position: relative; + + &::after { + content: ''; + position: absolute; + inset: -#{rem(2px)}; + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'focus-outline-color'); + } + } + + @include m(indeterminate) { + @include e(composite) { + background: transparent; + + &::before { + content: ''; + position: absolute; + top: calc(var(--size) / 2 - rem(6px)); + inset-inline-start: calc(var(--size) / 2 - rem(6px)); + width: rem(10px); + height: rem(10px); + border-radius: border-radius(rem(2px)); + background: var-get($_theme, 'fill-color'); + z-index: 1; + } + } + + @include e(composite-mark) { + stroke: transparent; + } + + &:hover { + @include e(composite) { + background: transparent; + + &::before { + background: var-get($_theme, 'fill-color-hover'); + } + } + + @include e(composite-mark) { + stroke: transparent; + } + } + } + + @include m(checked) { + &:hover { + @include e(composite) { + background: var-get($_theme, 'fill-color-hover'); + border-color: transparent; + } + + @include e(composite-mark) { + stroke: var-get($_theme, 'tick-color'); + } + } + } + + @include mx(invalid, checked) { + &:hover { + @include e(composite) { + background: var-get($_theme, 'error-color-hover'); + } + } + } + + @include mx(indeterminate, invalid) { + @include e(composite) { + border-color: var-get($_theme, 'error-color'); + + &::before { + background: var-get($_theme, 'error-color'); + } + } + + &:hover { + @include e(composite) { + background: transparent; + border-color: var-get($_theme, 'error-color-hover'); + + &::before { + background: var-get($_theme, 'error-color-hover'); + } + } + } + } + + @include mx(indeterminate, invalid, disabled) { + @include e(composite) { + border-color: var-get($_theme, 'disabled-color'); + } + } + + + @include mx(indeterminate, invalid, checked) { + @include e(composite) { + background: transparent; + } + } + + @include mx(disabled, checked) { + @include e(composite) { + background: var-get($_theme, 'disabled-color'); + border-color: var-get($_theme, 'disabled-color'); + } + } + + @include mx(disabled, indeterminate) { + @include e(composite) { + background: transparent; + + &::before { + background: var-get($_theme, 'disabled-color'); + } + } + + @include e(composite-mark) { + stroke: transparent; + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss new file mode 100644 index 00000000000..e56c1c815aa --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss @@ -0,0 +1,163 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-checkbox, indigo) { + --size: #{rem(16px)}; + --border-width: #{rem(2px)}; + --label-margin: #{rem(8px)}; + --mark-stroke: 3; + --mark-length: 24; + --mark-offset: 1px; + + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'empty-color-hover'); + } + } + + @include e(composite-mark) { + stroke: unset; + stroke-linecap: unset; + stroke-width: unset; + stroke-dasharray: unset; + stroke-dashoffset: unset; + fill: var-get($_theme, 'tick-color'); + transition: none; + + rect { + fill: none; + } + } + + @include e(label) { + &:hover { + color: var-get($_theme, 'label-color-hover'); + } + } + + @include e(label) { + @include type-style(body-2) { + margin-block: 0; + } + } + + @include m(checked) { + &:hover { + @include e(composite) { + border-color: transparent; + } + } + } + + @include m(focused) { + @include e(composite) { + border-radius: var-get($_theme, 'border-radius'); + box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-outline-color'); + } + } + + @include m(invalid) { + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'error-color-hover'); + } + } + + @include e(label) { + color: var-get($_theme, 'label-color'); + } + } + + @include m(indeterminate) { + &:hover { + @include e(composite) { + border-color: transparent; + } + } + + @include e(composite-mark) { + fill: none; + stroke-dashoffset: unset; + rotate: none; + transform: none; + + rect { + fill: var-get($_theme, 'tick-color'); + opacity: 1; + } + } + } + + @include m(disabled) { + @include e(label) { + color: var-get($_theme, 'disabled-color-label'); + } + } + + @include mx(focused, checked) { + @include e(composite) { + border-radius: var-get($_theme, 'border-radius'); + box-shadow: 0 0 0 rem(3px) + var-get($_theme, 'focus-outline-color-focused'); + } + } + + @include mx(focused, invalid) { + @include e(composite) { + box-shadow: 0 0 0 rem(3px) + var-get($_theme, 'focus-outline-color-error'); + } + } + + @include mx(indeterminate, invalid) { + @include e(composite) { + background: var-get($_theme, 'error-color'); + } + + &:hover { + @include e(composite) { + background: var-get($_theme, 'error-color-hover'); + } + } + } + + @include mx(focused, indeterminate) { + @include e(composite) { + border-radius: var-get($_theme, 'border-radius'); + box-shadow: 0 0 0 rem(3px) + var-get($_theme, 'focus-outline-color-focused'); + } + } + + @include mx(disabled, checked) { + @include e(composite) { + background: var-get($_theme, 'disabled-indeterminate-color'); + border-color: transparent; + } + + @include e(composite-mark) { + fill: var-get($_theme, 'disabled-tick-color'); + } + } + + @include mx(disabled, indeterminate) { + @include e(composite) { + background: var-get($_theme, 'disabled-indeterminate-color'); + border-color: transparent; + } + + @include e(composite-mark) { + stroke: unset; + fill: none; + + rect { + fill: var-get($_theme, 'disabled-tick-color'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss new file mode 100644 index 00000000000..216aaf17627 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss @@ -0,0 +1,63 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-checkbox, material) { + // TODO: These CSS variables should be listed as design tokens in the schema files. + --size: #{rem(20px)}; + --border-width: #{rem(2px)}; + --label-margin: #{rem(2px)}; + --mark-stroke: 3; + --mark-length: 24; + --mark-offset: 0; + + @include e(label) { + @include type-style(subtitle-1) { + margin-block: 0; + } + } + + @include e(ripple) { + display: block; + } + + @include e(composite-wrapper) { + padding: rem(20px); + } + + @include mx(invalid, disabled) { + @include e(composite) { + border-color: var-get($_theme, 'disabled-color'); + } + + @include e(composite-mark) { + stroke: var-get($_theme, 'disabled-tick-color'); + } + } + + @include mx(checked, disabled) { + @include e(composite) { + border-color: var-get($_theme, 'disabled-color'); + background: var-get($_theme, 'disabled-color'); + } + + @include e(composite-mark) { + stroke: var-get($_theme, 'disabled-tick-color'); + } + } + + @include mx(disabled, indeterminate) { + @include e(composite) { + border-color: var-get($_theme, 'disabled-indeterminate-color'); + background: var-get($_theme, 'disabled-indeterminate-color'); + } + + @include e(composite-mark) { + stroke: var-get($_theme, 'disabled-tick-color'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/bootstrap.scss deleted file mode 100644 index 04f3076f763..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/bootstrap.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/themes/functions' as *; -@use '../light/themes' as *; - -$theme: $bootstrap; - -@container style(--theme: bootstrap) { - @include b(igx-checkbox) { - --size: #{rem(16px)}; - --border-width: #{rem(1px)}; - --label-margin: #{rem(2px)}; - --mark-stroke: 3; - --mark-length: 24; - --mark-offset: 1px; - - @include e(label) { - @include type-style(body-1) { - margin-block: 0; - } - } - - @include mx(indeterminate, disabled) { - @include e(composite) { - background: var-get($theme, 'disabled-indeterminate-color'); - border-color: transparent; - } - - @include e(composite-mark) { - stroke: var-get($theme, 'disabled-tick-color'); - } - } - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss deleted file mode 100644 index 0e8f8b2eab1..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/fluent.scss +++ /dev/null @@ -1,110 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/color/functions' as *; -@use 'igniteui-theming/sass/themes/functions' as *; -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/animations' as *; -@use '../light/themes' as *; - -$theme: $fluent; - -@container style(--theme: fluent) { - @include b(igx-checkbox) { - --size: #{rem(20px)}; - --border-width: #{rem(1px)}; - --label-margin: #{rem(8px)}; - --mark-stroke: 1; - --mark-length: 24; - --mark-offset: -1px; - - &:hover { - @include e(composite-mark) { - // TODO: Check if this is even needed? - position: absolute; - inset: 0; - stroke-linecap: square; - stroke-width: var(--mark-stroke); - stroke-dasharray: var(--mark-length); - stroke-dashoffset: 0; - fill: none; - z-index: 1; - opacity: 1; - transition: - all 0.2s $ease-out-quad, - opacity 0.2s $ease-out-quad; - - stroke: var-get($theme, 'tick-color-hover'); - } - } - - @include e(label) { - @include type-style(body-2) { - margin-block: 0; - } - } - - @include m(indeterminate) { - &:hover { - @include e(composite) { - background: transparent; - } - - @include e(composite-mark) { - stroke: transparent; - } - } - } - - @include m(invalid) { - &:hover { - @include e(composite-mark) { - stroke: var-get($theme, 'error-color'); - } - } - } - - @include mx(indeterminate, invalid) { - @include e(composite) { - border-color: var-get($theme, 'error-color'); - - &::before { - background: var-get($theme, 'error-color'); - } - } - - &:hover { - @include e(composite) { - background: transparent; - border-color: var-get($theme, 'error-color-hover'); - - &::before { - background: var-get($theme, 'error-color-hover'); - } - } - } - } - - @include mx(indeterminate, invalid, checked) { - @include e(composite) { - background: transparent; - } - } - - @include mx(indeterminate, disabled) { - @include e(composite) { - background: var-get($theme, 'disabled-color'); - } - - @include e(composite-mark) { - stroke: var-get($theme, 'disabled-tick-color'); - } - } - - @include mx(invalid, checked) { - &:hover { - @include e(composite-mark) { - stroke: var-get($theme, 'tick-color'); - } - } - } - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/indigo.scss deleted file mode 100644 index f0c0431c55a..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/indigo.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/themes/functions' as *; -@use '../light/themes' as *; - -$theme: $indigo; - -@container style(--theme: indigo) { - @include b(igx-checkbox) { - --size: #{rem(16px)}; - --border-width: #{rem(2px)}; - --label-margin: #{rem(8px)}; - --mark-stroke: 3; - --mark-length: 24; - --mark-offset: 1px; - - @include e(label) { - @include type-style(body-2) { - margin-block: 0; - } - } - - @include m(invalid) { - @include e(label) { - color: var-get($theme, 'label-color'); - } - } - - @include mx(indeterminate, disabled) { - @include e(composite) { - background: var-get($theme, 'disabled-indeterminate-color'); - border-color: transparent; - } - - @include e(composite-mark) { - stroke: unset; - fill: var-get($theme, 'disabled-tick-color'); - } - } - } -} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/material.scss deleted file mode 100644 index 19be967a4ef..00000000000 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/material.scss +++ /dev/null @@ -1,42 +0,0 @@ -@use 'igniteui-theming/sass/bem' as *; -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/themes/functions' as *; -@use '../light/themes' as *; - -$theme: $material; - -@container style(--theme: material) { - @include b(igx-checkbox) { - // These CSS variables should be listed as design tokens in the schema files. - --size: #{rem(20px)}; - --border-width: #{rem(2px)}; - --label-margin: #{rem(2px)}; - --mark-stroke: 3; - --mark-length: 24; - --mark-offset: 0; - - @include e(label) { - @include type-style(subtitle-1) { - margin-block: 0; - } - } - - @include e(ripple) { - display: block; - } - - @include e(composite-wrapper) { - padding: rem(20px); - } - - @include mx(indeterminate, disabled) { - @include e(composite) { - background: var-get($theme, 'disabled-color'); - } - - @include e(composite-mark) { - stroke: var-get($theme, 'disabled-tick-color'); - } - } - } -} diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss index 56ca9f3e96e..10ba536569c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss @@ -12,11 +12,21 @@ /// @param {String} $variant - The target variant - light, dark. /// @requires {mixin} b /// @example scss -@mixin themed-block($component, $theme, $variant) { - @layer #{$theme} { - @container style(--ig-theme: #{"" + $theme}) and style(--ig-theme-variant: #{$variant}) { - @include b($component) { - @content; +@mixin themed-block($component, $theme, $variant: null) { + $_theme: "" + $theme; + + @layer #{$_theme} { + @if $variant { + @container style(--theme: #{$_theme}) and style(--ig-theme-variant: #{$variant}) { + @include b($component) { + @content; + } + } + } @else { + @container style(--theme: #{$_theme}) { + @include b($component) { + @content; + } } } } From d27f37d110c8bef211d71b429c0fd1b2e2fc9438 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 14:29:58 +0200 Subject: [PATCH 014/131] fix(checkbox): dark themes --- .../src/lib/checkbox/themes/_base.scss | 8 +------ .../lib/checkbox/themes/dark/_bootstrap.scss | 24 +++++++++++++++++++ .../src/lib/checkbox/themes/dark/_fluent.scss | 16 +++++++++++++ .../src/lib/checkbox/themes/dark/_index.scss | 2 ++ .../checkbox/themes/shared/_bootstrap.scss | 14 ++++++----- .../lib/checkbox/themes/shared/_fluent.scss | 17 +++++++++++-- .../lib/checkbox/themes/shared/_material.scss | 6 +++++ 7 files changed, 72 insertions(+), 15 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/checkbox/themes/dark/_fluent.scss diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss index 050f8fc79d9..6b6a8a9c396 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -124,6 +124,7 @@ $_theme: $material; %igx-checkbox--indeterminate { %cbx-composite-mark { margin-inline-start: var(--mark-offset); + margin-block-start: var(--mark-offset); } &:hover { @@ -167,13 +168,6 @@ $_theme: $material; ); } - - %cbx-composite-mark--invalid--fluent { - // @if $variant == 'fluent' and $theme-variant == 'dark' { - // stroke: color($color: 'error', $variant: 500); - // } - } - %cbx-label { display: inline-block; color: var-get($_theme, 'label-color'); diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/_bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_bootstrap.scss new file mode 100644 index 00000000000..46edd0bd09a --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_bootstrap.scss @@ -0,0 +1,24 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-checkbox, bootstrap, dark) { + @include m(invalid) { + @include e(composite-mark) { + stroke: #000; + } + } + + @include m(disabled) { + @include e(composite) { + background: color($color: 'surface', $variant: 500); + } + + @include e(composite-mark) { + stroke: var-get($_theme, 'disabled-tick-color'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/_fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_fluent.scss new file mode 100644 index 00000000000..f2ef75e5803 --- /dev/null +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_fluent.scss @@ -0,0 +1,16 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-checkbox, fluent, dark) { + @include m(invalid) { + &:hover { + @include e(composite-mark) { + stroke: color($color: 'error', $variant: 500); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_index.scss index bc3f798cec3..21de313bbfa 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/dark/_index.scss @@ -2,6 +2,8 @@ @use 'sass:meta'; @use 'tokens'; @use 'styles/themes/standalone' as *; +@use 'fluent'; +@use 'bootstrap'; $tokens: meta.module-variables(tokens); @include themes(igx-checkbox, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss index 3abfc9b0668..f5ed449b57f 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss @@ -50,6 +50,14 @@ $_theme: $bootstrap; } } + @include m(invalid) { + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'error-color-hover'); + } + } + } + @include m(focused) { @include e(composite) { border-radius: var-get($_theme, 'border-radius'); @@ -76,12 +84,6 @@ $_theme: $bootstrap; box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-outline-color-error'); } - - &:hover { - @include e(composite) { - border-color: var-get($_theme, 'error-color-hover'); - } - } } @include mx(focused, indeterminate) { diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss index eb685006a7e..2772ecd448a 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss @@ -97,15 +97,25 @@ $_theme: $fluent; &:hover { @include e(composite) { background: var-get($_theme, 'fill-color-hover'); - border-color: transparent; } @include e(composite-mark) { stroke: var-get($_theme, 'tick-color'); + transition: none; } } } + @include mx(indeterminate, checked) { + @include e(composite) { + background: transparent; + } + + @include e(composite-mark) { + stroke: transparent; + } + } + @include mx(invalid, checked) { &:hover { @include e(composite) { @@ -132,6 +142,10 @@ $_theme: $fluent; background: var-get($_theme, 'error-color-hover'); } } + + @include e(composite-mark) { + stroke: transparent; + } } } @@ -141,7 +155,6 @@ $_theme: $fluent; } } - @include mx(indeterminate, invalid, checked) { @include e(composite) { background: transparent; diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss index 216aaf17627..e6cad49bcb0 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss @@ -29,6 +29,12 @@ $_theme: $material; padding: rem(20px); } + @include mx(invalid, checked) { + @include e(composite) { + background: var-get($_theme, 'error-color'); + } + } + @include mx(invalid, disabled) { @include e(composite) { border-color: var-get($_theme, 'disabled-color'); From 533843886992cf874509b3ea034ce70674cbf451 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 15:55:49 +0200 Subject: [PATCH 015/131] refactor(checkbox): untagle placeholder selectors --- .../src/lib/checkbox/themes/_base.scss | 474 +++++++----------- .../input-controls/input-controls.sample.html | 4 +- 2 files changed, 184 insertions(+), 294 deletions(-) diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss index 6b6a8a9c396..9b0e6d3d369 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -13,214 +13,13 @@ $_theme: $material; @include scale-in-out($start-scale: 0.9); @include scale-in-center(); - %cbx-display { - position: relative; - display: inline-flex; - flex-flow: row nowrap; - align-items: center; - outline-style: none; - cursor: pointer; - } - - %cbx-display--disabled { - user-select: none; - pointer-events: none; - cursor: initial; - } - - %cbx-input { - @include hide-default(); - } - - %cbx-composite-wrapper { - align-items: center; - justify-content: center; - display: flex; - position: relative; - width: var(--size); - height: var(--size); - - //ripple color - --color: #{var-get($_theme, 'empty-color')}; - } - - %cbx-composite-wrapper--x { - //ripple color - --color: #{var-get($_theme, 'fill-color')}; - } - - %cbx-composite { - position: relative; - display: flex; - justify-content: center; - width: var(--size); - height: var(--size); - min-width: var(--size); - background: var-get($_theme, 'empty-fill-color'); - border-width: var(--border-width); - border-style: solid; - border-color: var-get($_theme, 'empty-color'); - border-radius: var-get($_theme, 'border-radius'); - -webkit-tap-highlight-color: transparent; - transition: - border-color 0.2s $ease-out-quad, - background 0.2s $ease-out-quad; - overflow: hidden; - } - - %cbx-composite--hover { - border-color: var-get($_theme, 'empty-color-hover'); - } - - %cbx-composite--x { - border-color: var-get($_theme, 'fill-color'); - background: var-get($_theme, 'fill-color'); - } - - %cbx-composite--invalid { - border-color: var-get($_theme, 'error-color'); - } - - %cbx-composite-wrapper--invalid { - //ripple color - --color: #{var-get($_theme, 'error-color')}; - } - - %cbx-composite--invalid--hover { - border-color: var-get($_theme, 'error-color-hover'); - } - - %cbx-composite--x--invalid { - border-color: var-get($_theme, 'error-color'); - background: var-get($_theme, 'error-color'); - } - - %cbx-composite--x--hover { - border-color: var-get($_theme, 'fill-color-hover'); - background: var-get($_theme, 'fill-color-hover'); - } - - %cbx-composite--x--invalid--hover { - border-color: var-get($_theme, 'error-color-hover'); - background: var-get($_theme, 'error-color-hover'); - } - - %cbx-composite--disabled { - border-color: var-get($_theme, 'disabled-color'); - } - - %cbx-composite-mark { - width: 100%; - stroke: var-get($_theme, 'tick-color'); - stroke-linecap: square; - stroke-width: var(--mark-stroke); - stroke-dasharray: var(--mark-length); - stroke-dashoffset: var(--mark-length); - fill: none; - opacity: 0; - z-index: 1; - } - - %igx-checkbox--indeterminate { - %cbx-composite-mark { - margin-inline-start: var(--mark-offset); - margin-block-start: var(--mark-offset); - } - - &:hover { - %cbx-composite { - border-color: var-get($_theme, 'fill-color-hover'); - background: var-get($_theme, 'fill-color-hover'); - - &::before { - background: var-get($_theme, 'fill-color-hover'); - } - } - } - } - - %igx-checkbox--indeterminate--invalid { - %cbx-composite--x { - border-color: var-get($_theme, 'error-color'); - background: var-get($_theme, 'error-color'); - } - - %cbx-composite--x--hover { - border-color: var-get($_theme, 'error-color-hover'); - background: var-get($_theme, 'error-color-hover'); - } - } - - %cbx-composite-mark--x { - stroke-dashoffset: 0; - opacity: 1; - transition: - all 0.2s $ease-out-quad, - opacity 0.2s $ease-out-quad; - } - - %cbx-composite-mark--in { - stroke-dashoffset: 41; /* length of path - adjacent line length */ - opacity: 1; - rotate: 45deg; - transform: translateX( - calc(var(--mark-stroke) / var(--mark-length) * -1em) - ); - } - - %cbx-label { - display: inline-block; - color: var-get($_theme, 'label-color'); - user-select: none; - word-wrap: break-all; - transition: color 0.2s $ease-out-quad; - - &:empty { - margin: 0; - } - } - - %cbx-label-pos--before, - %cbx-label-pos--after { - &:empty { - margin: 0; - } - } - - %cbx-label-pos--after { - margin-inline-start: var(--label-margin); - } - - %cbx-label-pos--before { - margin-inline-end: var(--label-margin); - order: -1; - } - - %cbx-label--invalid { - color: var-get($_theme, 'error-color'); - } - - %cbx-label--disabled { - color: var-get($_theme, 'disabled-color-label'); - } - - %cbx-ripple { - --_ripple-size: #{rem(40px)}; - - display: none; - position: absolute; - top: calc(50% - calc(var(--_ripple-size) / 2)); - width: var(--_ripple-size); - aspect-ratio: 1; - border-radius: var-get($_theme, 'border-radius-ripple'); - overflow: hidden; - pointer-events: none; - filter: opacity(1); - } - - %cbx-ripple--hover { + %cbx-ripple-empty { background: var-get($_theme, 'empty-color'); transition: background 0.2s $ease-out-quad; + } + + %cbx-ripple--hovered { + @extend %cbx-ripple-empty; opacity: 0.06; @container style(--ig-theme-variant: dark) { @@ -228,17 +27,7 @@ $_theme: $material; } } - %cbx-ripple--hover-checked { - background: var-get($_theme, 'fill-color'); - } - - %cbx-ripple--hover-invalid { - background: var-get($_theme, 'error-color'); - } - - %cbx-ripple--focused { - background: var-get($_theme, 'empty-color'); - transition: background 0.2s $ease-out-quad; + %cbx-ripple--pressed { opacity: 0.12; @container style(--ig-theme-variant: dark) { @@ -246,245 +35,346 @@ $_theme: $material; } } - %cbx-ripple--focused-checked { + %cbx-ripple--focused { + @extend %cbx-ripple-empty; + @extend %cbx-ripple--pressed; + } + + %cbx-ripple--filled { background: var-get($_theme, 'fill-color'); } - %cbx-ripple--focused-invalid { + %cbx-ripple--error { background: var-get($_theme, 'error-color'); } - %cbx-ripple--pressed { - opacity: 0.12; - - @container style(--ig-theme-variant: dark) { - opacity: 0.24; - } + %cbx-ripple--hover-checked, + %cbx-ripple--focused-checked { + @extend %cbx-ripple--filled; } - %cbx-display--plain { - %cbx-composite, - %cbx-composite::after, - %cbx-composite-mark, - %cbx-composite-mark--x { - transition: none; - } + %cbx-ripple--hover-invalid, + %cbx-ripple--focused-invalid { + @extend %cbx-ripple--error; } @include b(igx-checkbox) { - @extend %cbx-display; + position: relative; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + outline-style: none; + cursor: pointer; &:hover { @include e(ripple) { - @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hovered; } } &:active { @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--pressed !optional; + @extend %cbx-ripple--hovered; + @extend %cbx-ripple--pressed; } } @include e(input) { - @extend %cbx-input !optional; + @include hide-default(); } @include e(label) { - @extend %cbx-label !optional; - @extend %cbx-label-pos--after !optional; + display: inline-block; + color: var-get($_theme, 'label-color'); + user-select: none; + word-wrap: break-all; + transition: color 0.2s $ease-out-quad; + margin-inline-start: var(--label-margin); + + &:empty { + margin: 0; + } } @include e(label, $m: before) { - @extend %cbx-label !optional; - @extend %cbx-label-pos--before !optional; + margin-inline-end: var(--label-margin); + order: -1; } @include e(composite-wrapper) { - @extend %cbx-composite-wrapper !optional; + align-items: center; + justify-content: center; + display: flex; + position: relative; + width: var(--size); + height: var(--size); + + //ripple color + --color: #{var-get($_theme, 'empty-color')}; } @include e(composite) { - @extend %cbx-composite !optional; + position: relative; + display: flex; + justify-content: center; + width: var(--size); + height: var(--size); + min-width: var(--size); + background: var-get($_theme, 'empty-fill-color'); + border-width: var(--border-width); + border-style: solid; + border-color: var-get($_theme, 'empty-color'); + border-radius: var-get($_theme, 'border-radius'); + -webkit-tap-highlight-color: transparent; + transition: + border-color 0.2s $ease-out-quad, + background 0.2s $ease-out-quad; + overflow: hidden; } @include e(composite-mark) { - @extend %cbx-composite-mark !optional; + width: 100%; + stroke: var-get($_theme, 'tick-color'); + stroke-linecap: square; + stroke-width: var(--mark-stroke); + stroke-dasharray: var(--mark-length); + stroke-dashoffset: var(--mark-length); + fill: none; + opacity: 0; + z-index: 1; } @include e(ripple) { - @extend %cbx-ripple !optional; + --_ripple-size: #{rem(40px)}; + + display: none; + position: absolute; + top: calc(50% - calc(var(--_ripple-size) / 2)); + width: var(--_ripple-size); + aspect-ratio: 1; + border-radius: var-get($_theme, 'border-radius-ripple'); + overflow: hidden; + pointer-events: none; + filter: opacity(1); } @include m(invalid) { @include e(composite) { - @extend %cbx-composite--invalid !optional; + border-color: var-get($_theme, 'error-color'); } @include e(composite-wrapper) { - @extend %cbx-composite-wrapper--invalid !optional; + //ripple color + --color: #{var-get($_theme, 'error-color')}; } @include e(label) { - @extend %cbx-label--invalid !optional; + color: var-get($_theme, 'error-color'); } &:hover { @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-invalid !optional; + @extend %cbx-ripple--hovered; + @extend %cbx-ripple--hover-invalid; } @include e(composite) { - @extend %cbx-composite--invalid--hover !optional; + border-color: var-get($_theme, 'error-color-hover'); } } &:active { @include e(ripple) { - @extend %cbx-ripple--hover-invalid !optional; + @extend %cbx-ripple--hover-invalid; } } } @include mx(invalid, checked) { @include e(composite) { - @extend %cbx-composite--x--invalid !optional; + border-color: var-get($_theme, 'error-color'); + background: var-get($_theme, 'error-color'); } &:hover { @include e(composite) { - @extend %cbx-composite--x--invalid--hover !optional; + border-color: var-get($_theme, 'error-color-hover'); + background: var-get($_theme, 'error-color-hover'); } } } @include m(focused) { - @extend %igx-checkbox--focused !optional; - @include e(ripple) { - @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple--focused; } &:hover { @include e(ripple) { - @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple--focused; } } } - @include mx(focused, checked) { - @extend %igx-checkbox--focused-checked !optional; - } - @include mx(focused, invalid) { @include e(ripple) { - @extend %cbx-ripple--focused-invalid !optional; + @extend %cbx-ripple--focused-invalid; } } @include m(indeterminate) { - @extend %igx-checkbox--indeterminate !optional; - @include e(composite) { - @extend %cbx-composite--x !optional; + border-color: var-get($_theme, 'fill-color'); + background: var-get($_theme, 'fill-color'); } @include e(composite-mark) { - @extend %cbx-composite-mark--in !optional; + stroke-dashoffset: 41; /* length of path - adjacent line length */ + opacity: 1; + rotate: 45deg; + transform: translateX( + calc(var(--mark-stroke) / var(--mark-length) * -1em) + ); + margin-inline-start: var(--mark-offset); + margin-block-start: var(--mark-offset); } &:hover { @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; + @extend %cbx-ripple--hovered; + @extend %cbx-ripple--hover-checked; + } + + @include e(composite) { + border-color: var-get($_theme, 'fill-color-hover'); + background: var-get($_theme, 'fill-color-hover'); + + &::before { + background: var-get($_theme, 'fill-color-hover'); + } } } &:active { @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; - @extend %cbx-ripple--pressed !optional; + @extend %cbx-ripple--hovered; + @extend %cbx-ripple--hover-checked; + @extend %cbx-ripple--pressed; } } } @include mx(invalid, indeterminate) { - @extend %igx-checkbox--indeterminate--invalid !optional; + @include e(composite) { + border-color: var-get($_theme, 'error-color'); + background: var-get($_theme, 'error-color'); + } &:hover { @include e(composite) { - @extend %cbx-composite--x--hover !optional; + border-color: var-get($_theme, 'error-color-hover'); + background: var-get($_theme, 'error-color-hover'); + } + } + } + + @include mx(invalid, indeterminate, checked) { + @include e(composite) { + border-color: var-get($_theme, 'error-color'); + background: var-get($_theme, 'error-color'); + } + + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'error-color-hover'); + background: var-get($_theme, 'error-color-hover'); } } } @include m(checked) { @include e(composite) { - @extend %cbx-composite--x !optional; + border-color: var-get($_theme, 'fill-color'); + background: var-get($_theme, 'fill-color'); } @include e(composite-mark) { - @extend %cbx-composite-mark--x !optional; + stroke-dashoffset: 0; + opacity: 1; + transition: + all 0.2s $ease-out-quad, + opacity 0.2s $ease-out-quad; } @include e(composite-wrapper) { - @extend %cbx-composite-wrapper--x !optional; + //ripple color + --color: #{var-get($_theme, 'fill-color')}; } &:hover { @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; + @extend %cbx-ripple--hovered; + @extend %cbx-ripple--hover-checked; } @include e(composite) { - @extend %cbx-composite--x--hover !optional; + border-color: var-get($_theme, 'fill-color-hover'); + background: var-get($_theme, 'fill-color-hover'); } } &:active { @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; - @extend %cbx-ripple--pressed !optional; + @extend %cbx-ripple--hovered; + @extend %cbx-ripple--hover-checked; + @extend %cbx-ripple--pressed; } } } @include m(disabled) { - @extend %cbx-display--disabled !optional; + user-select: none; + pointer-events: none; + cursor: initial; @include e(label) { - @extend %cbx-label--disabled !optional; + color: var-get($_theme, 'disabled-color-label'); } @include e(label, $m: before) { - @extend %cbx-label--disabled !optional; + color: var-get($_theme, 'disabled-color-label'); } @include e(composite) { - @extend %cbx-composite--disabled !optional; + border-color: var-get($_theme, 'disabled-color'); } } @include m(plain) { - @extend %cbx-display--plain !optional; + @include e(composite) { + transition: none; + + &::after { + transition: none; + } + } + + @include e(composite-mark) { + transition: none; + } } @include mx(focused, checked) { @include e(ripple) { - @extend %cbx-ripple--focused !optional; - @extend %cbx-ripple--focused-checked !optional; + @extend %cbx-ripple--focused; + @extend %cbx-ripple--focused-checked; } } @include mx(focused, indeterminate) { @include e(ripple) { - @extend %cbx-ripple--focused !optional; - @extend %cbx-ripple--focused-checked !optional; + @extend %cbx-ripple--focused; + @extend %cbx-ripple--focused-checked; } } } diff --git a/src/app/input-controls/input-controls.sample.html b/src/app/input-controls/input-controls.sample.html index 38b21bc6567..6ff42473fb9 100644 --- a/src/app/input-controls/input-controls.sample.html +++ b/src/app/input-controls/input-controls.sample.html @@ -5,7 +5,7 @@

Angular Inputs

Angular Checkbox WebComponents Inputs
WC Checkbox Date: Fri, 31 Jan 2025 16:01:43 +0200 Subject: [PATCH 016/131] npm(package-lock): revert changes --- package-lock.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 028cd56e2b4..9500304856d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -82,9 +82,9 @@ "karma-junit-reporter": "^2.0.1", "karma-parallel": "^0.3.1", "karma-spec-reporter": "^0.0.36", - "node-watch": "^0.7.4", "lit-html": "^3.2.1", "ng-packagr": "^19.1.0", + "node-watch": "^0.7.4", "postcss": "^8.5.1", "postcss-scss": "^4.0.6", "prettier": "^3.3.3", @@ -8524,9 +8524,9 @@ } }, "node_modules/concurrently": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.0.1.tgz", - "integrity": "sha512-wYKvCd/f54sTXJMSfV6Ln/B8UrfLBKOYa+lzc6CHay3Qek+LorVSBdMVfyewFhRbH0Rbabsk4D+3PL/VjQ5gzg==", + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.1.2.tgz", + "integrity": "sha512-H9MWcoPsYddwbOGM6difjVwVZHl63nwMEwDJG/L7VGtuaJhb12h2caPG2tVPWs7emuYix252iGfqOyrz1GczTQ==", "dev": true, "license": "MIT", "dependencies": { From 094e5b6911edc036433ec36ba16ed2af803de907 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 16:04:24 +0200 Subject: [PATCH 017/131] npm(package-lock): revert changes --- package-lock.json | 130 ---------------------------------------------- 1 file changed, 130 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9500304856d..158e800c4cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,7 +56,6 @@ "@typescript-eslint/eslint-plugin": "^8.15.0", "@typescript-eslint/parser": "^8.15.0", "autoprefixer": "^10.4.16", - "concurrently": "^9.0.1", "del": "^6.0.0", "eslint": "^9.15.0", "fs-extra": "^11.3.0", @@ -84,7 +83,6 @@ "karma-spec-reporter": "^0.0.36", "lit-html": "^3.2.1", "ng-packagr": "^19.1.0", - "node-watch": "^0.7.4", "postcss": "^8.5.1", "postcss-scss": "^4.0.6", "prettier": "^3.3.3", @@ -8523,124 +8521,6 @@ "node": ">=0.10.0" } }, - "node_modules/concurrently": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.1.2.tgz", - "integrity": "sha512-H9MWcoPsYddwbOGM6difjVwVZHl63nwMEwDJG/L7VGtuaJhb12h2caPG2tVPWs7emuYix252iGfqOyrz1GczTQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "chalk": "^4.1.2", - "lodash": "^4.17.21", - "rxjs": "^7.8.1", - "shell-quote": "^1.8.1", - "supports-color": "^8.1.1", - "tree-kill": "^1.2.2", - "yargs": "^17.7.2" - }, - "bin": { - "conc": "dist/bin/concurrently.js", - "concurrently": "dist/bin/concurrently.js" - }, - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/open-cli-tools/concurrently?sponsor=1" - } - }, - "node_modules/concurrently/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/concurrently/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/concurrently/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/concurrently/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "license": "MIT" - }, - "node_modules/concurrently/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/concurrently/node_modules/supports-color": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", - "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/supports-color?sponsor=1" - } - }, "node_modules/configstore": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", @@ -16344,16 +16224,6 @@ "dev": true, "license": "MIT" }, - "node_modules/node-watch": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.4.tgz", - "integrity": "sha512-RinNxoz4W1cep1b928fuFhvAQ5ag/+1UlMDV7rbyGthBIgsiEouS4kvRayvvboxii4m8eolKOIBo3OjDqbc+uQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/nopt": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", From 052cb398450cb62e6afc7379cbed46e0f168808a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 16:07:06 +0200 Subject: [PATCH 018/131] npm(package.json): revert file order --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index d3616d5a24d..aa6767345fc 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,6 @@ "@typescript-eslint/eslint-plugin": "^8.15.0", "@typescript-eslint/parser": "^8.15.0", "autoprefixer": "^10.4.16", - "concurrently": "^9.0.1", "del": "^6.0.0", "eslint": "^9.15.0", "fs-extra": "^11.3.0", @@ -133,7 +132,6 @@ "karma-junit-reporter": "^2.0.1", "karma-parallel": "^0.3.1", "karma-spec-reporter": "^0.0.36", - "node-watch": "^0.7.4", "lit-html": "^3.2.1", "ng-packagr": "^19.1.0", "postcss": "^8.5.1", From 6d2a79fe544a83f2392ac8043c9bf5dc4b857799 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 16:08:01 +0200 Subject: [PATCH 019/131] build(npm): add back concurrently --- package-lock.json | 119 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 120 insertions(+) diff --git a/package-lock.json b/package-lock.json index 158e800c4cf..eea1e19379a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,6 +56,7 @@ "@typescript-eslint/eslint-plugin": "^8.15.0", "@typescript-eslint/parser": "^8.15.0", "autoprefixer": "^10.4.16", + "concurrently": "^9.1.2", "del": "^6.0.0", "eslint": "^9.15.0", "fs-extra": "^11.3.0", @@ -8521,6 +8522,124 @@ "node": ">=0.10.0" } }, + "node_modules/concurrently": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.1.2.tgz", + "integrity": "sha512-H9MWcoPsYddwbOGM6difjVwVZHl63nwMEwDJG/L7VGtuaJhb12h2caPG2tVPWs7emuYix252iGfqOyrz1GczTQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "^4.1.2", + "lodash": "^4.17.21", + "rxjs": "^7.8.1", + "shell-quote": "^1.8.1", + "supports-color": "^8.1.1", + "tree-kill": "^1.2.2", + "yargs": "^17.7.2" + }, + "bin": { + "conc": "dist/bin/concurrently.js", + "concurrently": "dist/bin/concurrently.js" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/open-cli-tools/concurrently?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/concurrently/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/concurrently/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, + "node_modules/concurrently/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/concurrently/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, "node_modules/configstore": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", diff --git a/package.json b/package.json index aa6767345fc..9d4dec34c40 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "@typescript-eslint/eslint-plugin": "^8.15.0", "@typescript-eslint/parser": "^8.15.0", "autoprefixer": "^10.4.16", + "concurrently": "^9.1.2", "del": "^6.0.0", "eslint": "^9.15.0", "fs-extra": "^11.3.0", From 9add91c2a5526943ac57cdba5bcffa9aabbd305e Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 16:10:21 +0200 Subject: [PATCH 020/131] deps(node-watch): add back node-watch --- package-lock.json | 11 +++++++++++ package.json | 1 + 2 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index eea1e19379a..06e51c722f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -84,6 +84,7 @@ "karma-spec-reporter": "^0.0.36", "lit-html": "^3.2.1", "ng-packagr": "^19.1.0", + "node-watch": "^0.7.4", "postcss": "^8.5.1", "postcss-scss": "^4.0.6", "prettier": "^3.3.3", @@ -16343,6 +16344,16 @@ "dev": true, "license": "MIT" }, + "node_modules/node-watch": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.4.tgz", + "integrity": "sha512-RinNxoz4W1cep1b928fuFhvAQ5ag/+1UlMDV7rbyGthBIgsiEouS4kvRayvvboxii4m8eolKOIBo3OjDqbc+uQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/nopt": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", diff --git a/package.json b/package.json index 9d4dec34c40..30af10f6db7 100644 --- a/package.json +++ b/package.json @@ -135,6 +135,7 @@ "karma-spec-reporter": "^0.0.36", "lit-html": "^3.2.1", "ng-packagr": "^19.1.0", + "node-watch": "^0.7.4", "postcss": "^8.5.1", "postcss-scss": "^4.0.6", "prettier": "^3.3.3", From ba4184bcdc25024ddc6537eb5168797165505bf1 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 16:21:03 +0200 Subject: [PATCH 021/131] chore(*): remove some changes --- .../igniteui-angular/src/lib/avatar/avatar.component.ts | 5 ++--- .../igniteui-angular/src/lib/badge/badge.component.ts | 4 +--- src/app/styleguide/colors/color.sample.scss | 8 -------- src/assets/styles/test-theme.css | 7 ------- 4 files changed, 3 insertions(+), 21 deletions(-) delete mode 100644 src/assets/styles/test-theme.css diff --git a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts index bf1229c68a2..2d0c5a7e719 100644 --- a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts +++ b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts @@ -8,7 +8,6 @@ import { TemplateRef, ViewChild, ViewEncapsulation, - inject } from '@angular/core'; import { mkenum, normalizeURI } from '../core/utils'; @@ -60,8 +59,6 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType]; imports: [IgxIconComponent, NgTemplateOutlet] }) export class IgxAvatarComponent implements OnInit { - public elementRef = inject(ElementRef); - /** * Returns the `aria-label` attribute of the avatar. * @@ -338,6 +335,8 @@ export class IgxAvatarComponent implements OnInit { } } + constructor(public elementRef: ElementRef) { } + /** * Returns the css url of the image. * diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts index 2f2b27674cc..5275adb98f9 100644 --- a/projects/igniteui-angular/src/lib/badge/badge.component.ts +++ b/projects/igniteui-angular/src/lib/badge/badge.component.ts @@ -1,5 +1,5 @@ import { NgIf } from '@angular/common'; -import { booleanAttribute, Component, ElementRef, HostBinding, Input } from '@angular/core'; +import { booleanAttribute, Component, HostBinding, Input } from '@angular/core'; import { mkenum } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; @@ -140,8 +140,6 @@ export class IgxBadgeComponent { @HostBinding('class.igx-badge') public cssClass = 'igx-badge'; - constructor(public elementRef: ElementRef) { } - /** * Sets a square shape to the badge, if `shape` is set to `square`. * By default the shape of the badge is rounded. diff --git a/src/app/styleguide/colors/color.sample.scss b/src/app/styleguide/colors/color.sample.scss index 5f5f0d8f933..8e8f69b6f13 100644 --- a/src/app/styleguide/colors/color.sample.scss +++ b/src/app/styleguide/colors/color.sample.scss @@ -1,14 +1,6 @@ @use '../../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities' as *; @use '../../../styles/variables' as *; -.test-100 { - color: color($palette, primary, 100); -} - -.test-200 { - color: color($palette, primary, 200); -} - .sample-wrapper { display: grid; grid-template-columns: 1fr; diff --git a/src/assets/styles/test-theme.css b/src/assets/styles/test-theme.css deleted file mode 100644 index 206348450fc..00000000000 --- a/src/assets/styles/test-theme.css +++ /dev/null @@ -1,7 +0,0 @@ -@layer theme { - .igx-avatar { - --color: pink; - - outline: 1px solid red; - } -} From 1c0df4a10750d6914a4cc731e92750f1fd6562d6 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 18:20:20 +0200 Subject: [PATCH 022/131] build(scripts): global themes not building --- package.json | 4 ++-- scripts/build-theme-styles.mjs | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 scripts/build-theme-styles.mjs diff --git a/package.json b/package.json index 30af10f6db7..aaa7f99ad28 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "test:i18n": "ts-node --skip-project ./projects/igniteui-angular/src/lib/core/i18n/tests/tests.mjs", "test:elements": "ng test igniteui-angular-elements --watch=false --no-progress --code-coverage --source-map=false", "test:elements:watch": "ng test igniteui-angular-elements", - "build:lib": "npm run build:styles:all && ng build igniteui-angular --configuration production", - "build:styles:all": "node scripts/build-styles.mjs", + "build:lib": "npm run build:styles:components && ng build igniteui-angular --configuration production && npm run build:styles", + "build:styles": "node scripts/build-theme-styles.mjs", "build:styles:components": "node scripts/build-component-styles.mjs", "watch:styles": "node scripts/watch-styles.mjs", "build:migrations": "gulp copyMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular/migrations/tsconfig.json", diff --git a/scripts/build-theme-styles.mjs b/scripts/build-theme-styles.mjs new file mode 100644 index 00000000000..5decc3b5db9 --- /dev/null +++ b/scripts/build-theme-styles.mjs @@ -0,0 +1,3 @@ +import { buildThemes } from "./sass.mjs"; + +await Promise.all([buildThemes()]); From c1d1ad6be00207d66f706123ce9241c6fa83ab30 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Jan 2025 19:02:46 +0200 Subject: [PATCH 023/131] fix(checkbox): wrong tickmark in both indeterminate and checked --- .../src/lib/checkbox/themes/_base.scss | 34 +++++++++++-------- .../input-controls/input-controls.sample.html | 4 +-- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss index 9b0e6d3d369..6777a7a4ad8 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -190,20 +190,6 @@ $_theme: $material; } } - @include mx(invalid, checked) { - @include e(composite) { - border-color: var-get($_theme, 'error-color'); - background: var-get($_theme, 'error-color'); - } - - &:hover { - @include e(composite) { - border-color: var-get($_theme, 'error-color-hover'); - background: var-get($_theme, 'error-color-hover'); - } - } - } - @include m(focused) { @include e(ripple) { @extend %cbx-ripple--focused; @@ -222,6 +208,20 @@ $_theme: $material; } } + @include mx(invalid, checked) { + @include e(composite) { + border-color: var-get($_theme, 'error-color'); + background: var-get($_theme, 'error-color'); + } + + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'error-color-hover'); + background: var-get($_theme, 'error-color-hover'); + } + } + } + @include m(indeterminate) { @include e(composite) { border-color: var-get($_theme, 'fill-color'); @@ -264,6 +264,12 @@ $_theme: $material; } } + @include mx(indeterminate, checked) { + @include e(composite-mark) { + stroke-dashoffset: 41; + } + } + @include mx(invalid, indeterminate) { @include e(composite) { border-color: var-get($_theme, 'error-color'); diff --git a/src/app/input-controls/input-controls.sample.html b/src/app/input-controls/input-controls.sample.html index 6ff42473fb9..38b21bc6567 100644 --- a/src/app/input-controls/input-controls.sample.html +++ b/src/app/input-controls/input-controls.sample.html @@ -5,7 +5,7 @@

Angular Inputs

Angular Checkbox WebComponents Inputs
WC Checkbox Date: Mon, 3 Feb 2025 10:14:57 +0200 Subject: [PATCH 024/131] refactor(checkbox): organize variables better --- .../src/lib/checkbox/themes/_base.scss | 11 ++++++++++- .../src/lib/checkbox/themes/shared/_bootstrap.scss | 7 +------ .../src/lib/checkbox/themes/shared/_fluent.scss | 7 +------ .../src/lib/checkbox/themes/shared/_indigo.scss | 8 ++++---- .../src/lib/checkbox/themes/shared/_material.scss | 10 +--------- src/styles/_variables.scss | 8 ++++---- 6 files changed, 21 insertions(+), 30 deletions(-) diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss index 6777a7a4ad8..a3ab515c85a 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -59,6 +59,14 @@ $_theme: $material; } @include b(igx-checkbox) { + // TODO: These should be moved to the shema as design tokens + --size: #{rem(20px)}; + --border-width: #{rem(2px)}; + --label-margin: #{rem(8px)}; + --mark-stroke: 3; + --mark-length: 24; + --mark-offset: 0; + position: relative; display: inline-flex; flex-flow: row nowrap; @@ -88,8 +96,8 @@ $_theme: $material; color: var-get($_theme, 'label-color'); user-select: none; word-wrap: break-all; - transition: color 0.2s $ease-out-quad; margin-inline-start: var(--label-margin); + margin-block: 0; &:empty { margin: 0; @@ -249,6 +257,7 @@ $_theme: $material; border-color: var-get($_theme, 'fill-color-hover'); background: var-get($_theme, 'fill-color-hover'); + /* stylelint-disable-next-line max-nesting-depth */ &::before { background: var-get($_theme, 'fill-color-hover'); } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss index f5ed449b57f..5db1cd1cef1 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss @@ -10,9 +10,6 @@ $_theme: $bootstrap; @include themed-block(igx-checkbox, bootstrap) { --size: #{rem(16px)}; --border-width: #{rem(1px)}; - --label-margin: #{rem(8px)}; - --mark-stroke: 3; - --mark-length: 24; --mark-offset: 1px; &:hover { @@ -28,9 +25,7 @@ $_theme: $bootstrap; } @include e(label) { - @include type-style(body-1) { - margin-block: 0; - } + @include type-style(body-1); } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss index 2772ecd448a..cf13800359f 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss @@ -9,11 +9,8 @@ $_theme: $fluent; @include themed-block(igx-checkbox, fluent) { - --size: #{rem(20px)}; --border-width: #{rem(1px)}; - --label-margin: #{rem(8px)}; --mark-stroke: 1.5; - --mark-length: 24; --mark-offset: -1px; &:hover { @@ -41,9 +38,7 @@ $_theme: $fluent; } @include e(label) { - @include type-style(body-2) { - margin-block: 0; - } + @include type-style(body-2); } @include m(focused) { diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss index e56c1c815aa..5e298294e67 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss @@ -1,5 +1,6 @@ @use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/animations' as *; @use 'igniteui-theming/sass/themes/functions' as *; @use 'styles/themes/standalone' as *; @use '../light/tokens' as *; @@ -8,10 +9,6 @@ $_theme: $indigo; @include themed-block(igx-checkbox, indigo) { --size: #{rem(16px)}; - --border-width: #{rem(2px)}; - --label-margin: #{rem(8px)}; - --mark-stroke: 3; - --mark-length: 24; --mark-offset: 1px; &:hover { @@ -35,6 +32,9 @@ $_theme: $indigo; } @include e(label) { + @include type-style(body-2); + transition: color 0.2s $ease-out-quad; + &:hover { color: var-get($_theme, 'label-color-hover'); } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss index e6cad49bcb0..22169ad8c3b 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss @@ -7,18 +7,10 @@ $_theme: $material; @include themed-block(igx-checkbox, material) { - // TODO: These CSS variables should be listed as design tokens in the schema files. - --size: #{rem(20px)}; - --border-width: #{rem(2px)}; --label-margin: #{rem(2px)}; - --mark-stroke: 3; - --mark-length: 24; - --mark-offset: 0; @include e(label) { - @include type-style(subtitle-1) { - margin-block: 0; - } + @include type-style(subtitle-1); } @include e(ripple) { diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index fa429165538..21d2f079812 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-material-palette; -$schema: $light-material-schema; -$typeface: $material-typeface; -$type-scale: $material-type-scale; +$palette: $light-bootstrap-palette; +$schema: $light-bootstrap-schema; +$typeface: $bootstrap-typeface; +$type-scale: $bootstrap-type-scale; $variant: map.get($schema, '_meta', 'variant'); $background-color: var(--ig-gray-900-contrast); From b1ab887cabfb98852baa85cbe7585a635b0ced84 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 3 Feb 2025 11:26:47 +0200 Subject: [PATCH 025/131] refactor(demos): revert back to material --- src/styles/_variables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 21d2f079812..fa429165538 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-bootstrap-palette; -$schema: $light-bootstrap-schema; -$typeface: $bootstrap-typeface; -$type-scale: $bootstrap-type-scale; +$palette: $light-material-palette; +$schema: $light-material-schema; +$typeface: $material-typeface; +$type-scale: $material-type-scale; $variant: map.get($schema, '_meta', 'variant'); $background-color: var(--ig-gray-900-contrast); From 8e94787b42ce0e307fefd4c3b1002b5a1c3f7807 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 6 Feb 2025 10:58:50 +0200 Subject: [PATCH 026/131] refactor(divider): convert to component and bundle styles (#15338) --- .../core/styles/themes/generators/_base.scss | 14 ++-- .../calendar-container.component.ts | 4 +- .../directives/divider/divider.component.scss | 4 ++ ...ider.directive.ts => divider.component.ts} | 11 +-- .../lib/directives/divider/divider.module.ts | 6 +- .../lib/directives/divider/divider.spec.ts | 4 +- .../lib/directives/divider/themes/_base.scss | 72 +++++++++++++++++++ .../divider/themes/dark/_index.scss | 6 ++ .../divider/themes/dark/_tokens.scss | 7 ++ .../divider/themes/light/_index.scss | 6 ++ .../divider/themes/light/_tokens.scss | 8 +++ .../divider/themes/shared/_index.scss | 1 + .../divider/themes/shared/_indigo.scss | 7 ++ .../lib/time-picker/time-picker.component.ts | 4 +- projects/igniteui-angular/src/public_api.ts | 2 +- src/app/divider/divider.component.ts | 11 +-- 16 files changed, 142 insertions(+), 25 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/directives/divider/divider.component.scss rename projects/igniteui-angular/src/lib/directives/divider/{divider.directive.ts => divider.component.ts} (90%) create mode 100644 projects/igniteui-angular/src/lib/directives/divider/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/directives/divider/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/directives/divider/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/directives/divider/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/directives/divider/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/directives/divider/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/directives/divider/themes/shared/_indigo.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 52d188b9d47..0ad8df25b8b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -384,13 +384,13 @@ @include dialog($dialog-theme-map); } - @if is-used('igx-divider', $exclude) { - $divider-theme-map: divider-theme( - $schema: $schema, - ); - $divider-theme-map: meta.call($theme-handler, $divider-theme-map); - @include divider($divider-theme-map); - } + // @if is-used('igx-divider', $exclude) { + // $divider-theme-map: divider-theme( + // $schema: $schema, + // ); + // $divider-theme-map: meta.call($theme-handler, $divider-theme-map); + // @include divider($divider-theme-map); + // } @if is-used('igc-dockmanager', $exclude) { $dock-manager-theme-map: dock-manager-theme( diff --git a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts index 3f8cd15202a..156d9ce0631 100644 --- a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts +++ b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts @@ -12,7 +12,7 @@ import { IgxButtonDirective } from '../../directives/button/button.directive'; import { IgxRippleDirective } from '../../directives/ripple/ripple.directive'; import { IgxPickerActionsDirective } from '../picker-icons.common'; import { IgxCalendarComponent } from '../../calendar/calendar.component'; -import { IgxDividerDirective } from "../../directives/divider/divider.directive"; +import { IgxDividerComponent } from "../../directives/divider/divider.component"; /** @hidden */ @Component({ @@ -25,7 +25,7 @@ import { IgxDividerDirective } from "../../directives/divider/divider.directive" IgxRippleDirective, IgxCalendarComponent, NgTemplateOutlet, - IgxDividerDirective, + IgxDividerComponent, ] }) export class IgxCalendarContainerComponent { diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.component.scss b/projects/igniteui-angular/src/lib/directives/divider/divider.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/divider/divider.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts b/projects/igniteui-angular/src/lib/directives/divider/divider.component.ts similarity index 90% rename from projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts rename to projects/igniteui-angular/src/lib/directives/divider/divider.component.ts index 0a604f386dd..68e46c9eca2 100644 --- a/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/divider/divider.component.ts @@ -1,4 +1,4 @@ -import { Directive, HostBinding, Input, booleanAttribute } from '@angular/core'; +import { Component, HostBinding, Input, ViewEncapsulation, booleanAttribute } from '@angular/core'; import { mkenum } from '../../core/utils'; export const IgxDividerType = /*@__PURE__*/mkenum({ @@ -9,11 +9,14 @@ export type IgxDividerType = (typeof IgxDividerType)[keyof typeof IgxDividerType let NEXT_ID = 0; -@Directive({ +// TODO: Write migration from IgxDividerDirective to IgxDividerComponent +@Component({ selector: 'igx-divider', - standalone: true + template: '', + styleUrl: 'divider.component.css', + encapsulation: ViewEncapsulation.None }) -export class IgxDividerDirective { +export class IgxDividerComponent { /** * Sets/gets the `id` of the divider. * If not set, `id` will have value `"igx-divider-0"`; diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.module.ts b/projects/igniteui-angular/src/lib/directives/divider/divider.module.ts index d27b919c126..a332cd0d754 100644 --- a/projects/igniteui-angular/src/lib/directives/divider/divider.module.ts +++ b/projects/igniteui-angular/src/lib/directives/divider/divider.module.ts @@ -1,12 +1,12 @@ import { NgModule } from '@angular/core'; -import { IgxDividerDirective } from './divider.directive'; +import { IgxDividerComponent } from './divider.component'; /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ @NgModule({ - imports: [IgxDividerDirective], - exports: [IgxDividerDirective] + imports: [IgxDividerComponent], + exports: [IgxDividerComponent] }) export class IgxDividerModule { } diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts b/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts index 026868321b6..a66cc845271 100644 --- a/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts @@ -3,7 +3,7 @@ import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { configureTestSuite } from '../../test-utils/configure-suite'; -import { IgxDividerDirective, IgxDividerType } from './divider.directive'; +import { IgxDividerComponent, IgxDividerType } from './divider.component'; describe('Divider', () => { configureTestSuite(); @@ -100,7 +100,7 @@ describe('Divider', () => { [inset]="inset" [role]="role"> `, - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) class TestDividerComponent { public type: string; diff --git a/projects/igniteui-angular/src/lib/directives/divider/themes/_base.scss b/projects/igniteui-angular/src/lib/directives/divider/themes/_base.scss new file mode 100644 index 00000000000..b2d9b5c29dc --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/divider/themes/_base.scss @@ -0,0 +1,72 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'light/tokens' as *; + +$theme: $base; + +@layer base { + @include b(igx-divider) { + --dash-interval: #{rem(10px)}; + --dash-angle: 90deg; + --inset-center: calc(100% - (#{var-get($theme, 'inset')} * 2)); + --line: #{rem(4px)}; + --thickness: #{rem(1px)}; + + position: relative; + display: flex; + justify-content: center; + min-width: var(--thickness); + min-height: var(--thickness); + overflow: hidden; + + &::after { + content: ''; + position: absolute; + height: 100%; + width: 100%; + background: var-get($theme, 'color'); + inset-inline-start: var-get($theme, 'inset'); + } + + @include m(inset) { + &::after { + min-width: var(--line); + width: var(--inset-center); + } + } + + @include m(dashed) { + &::after { + background: repeating-linear-gradient( + var(--dash-angle), + var-get($theme, 'color'), + var-get($theme, 'color') var(--dash-interval), + transparent var(--dash-interval), + transparent calc(var(--dash-interval) * 2) + ); + } + } + + @include m(vertical) { + display: inline-flex; + width: var(--thickness); + + &::after { + inset-inline-start: unset; + inset-block-start: var-get($theme, 'inset'); + } + } + + @include mx(dashed, vertical) { + --dash-angle: 0deg; + } + + @include mx(vertical, inset) { + &::after { + min-height: var(--line); + height: var(--inset-center); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/directives/divider/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/directives/divider/themes/dark/_index.scss new file mode 100644 index 00000000000..fbc079f5e3b --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/divider/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-divider, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/directives/divider/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/directives/divider/themes/dark/_tokens.scss new file mode 100644 index 00000000000..acf83e17ec0 --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/divider/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/divider' as *; + +$material: digest-schema($dark-material-divider); +$bootstrap: digest-schema($dark-bootstrap-divider); +$fluent: digest-schema($dark-fluent-divider); +$indigo: digest-schema($dark-indigo-divider); diff --git a/projects/igniteui-angular/src/lib/directives/divider/themes/light/_index.scss b/projects/igniteui-angular/src/lib/directives/divider/themes/light/_index.scss new file mode 100644 index 00000000000..056811a4731 --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/divider/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-divider, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/directives/divider/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/directives/divider/themes/light/_tokens.scss new file mode 100644 index 00000000000..beaecc45086 --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/divider/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/divider' as *; + +$base: digest-schema($light-divider); +$material: digest-schema($material-divider); +$bootstrap: digest-schema($bootstrap-divider); +$fluent: digest-schema($fluent-divider); +$indigo: digest-schema($indigo-divider); diff --git a/projects/igniteui-angular/src/lib/directives/divider/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/directives/divider/themes/shared/_index.scss new file mode 100644 index 00000000000..ca3dd3bc266 --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/divider/themes/shared/_index.scss @@ -0,0 +1 @@ +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/directives/divider/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/directives/divider/themes/shared/_indigo.scss new file mode 100644 index 00000000000..0641f7c17fc --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/divider/themes/shared/_indigo.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use 'igniteui-theming/sass/typography/functions' as *; + +@include themed-block(igx-divider, indigo) { + --dash-interval: #{rem(3px)}; +} diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index bbdbfebc840..c151b6c3949 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -59,7 +59,7 @@ import { IgxSuffixDirective } from '../directives/suffix/suffix.directive'; import { IgxIconComponent } from '../icon/icon.component'; import { IgxPrefixDirective } from '../directives/prefix/prefix.directive'; import { getCurrentResourceStrings } from '../core/i18n/resources'; -import { IgxDividerDirective } from '../directives/divider/divider.directive'; +import { IgxDividerComponent } from '../directives/divider/divider.component'; let NEXT_ID = 0; export interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs { @@ -91,7 +91,7 @@ export interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs { display: block; }` ], - imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxTextSelectionDirective, NgIf, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxToggleDirective, NgClass, IgxItemListDirective, NgFor, IgxTimeItemDirective, NgTemplateOutlet, TimeFormatPipe, TimeItemPipe, IgxDividerDirective] + imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxTextSelectionDirective, NgIf, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxToggleDirective, NgClass, IgxItemListDirective, NgFor, IgxTimeItemDirective, NgTemplateOutlet, TimeFormatPipe, TimeItemPipe, IgxDividerComponent] }) export class IgxTimePickerComponent extends PickerBaseDirective implements diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts index 87ab36b3672..45e27c3c2a8 100644 --- a/projects/igniteui-angular/src/public_api.ts +++ b/projects/igniteui-angular/src/public_api.ts @@ -14,7 +14,7 @@ export * from './lib/core/navigation'; export * from './lib/directives/autocomplete/autocomplete.directive'; export * from './lib/directives/button/button.directive'; -export * from './lib/directives/divider/divider.directive'; +export * from './lib/directives/divider/divider.component'; export * from './lib/directives/drag-drop/public_api'; export * from './lib/directives/filter/filter.directive'; export * from './lib/directives/focus/focus.directive'; diff --git a/src/app/divider/divider.component.ts b/src/app/divider/divider.component.ts index 4f2f508fec6..c34f12489f5 100644 --- a/src/app/divider/divider.component.ts +++ b/src/app/divider/divider.component.ts @@ -1,9 +1,12 @@ import { Component, QueryList, ViewChildren } from '@angular/core'; import { - IgxDividerDirective, IgxHintDirective, + IgxDividerComponent, + IgxHintDirective, IgxIconComponent, IgxInputDirective, - IgxInputGroupComponent, IgxLabelDirective, IgxSwitchComponent, + IgxInputGroupComponent, + IgxLabelDirective, + IgxSwitchComponent, } from 'igniteui-angular'; import { CommonModule } from '@angular/common'; import { @@ -21,7 +24,7 @@ import { CommonModule, FormsModule, IgxSwitchComponent, - IgxDividerDirective, + IgxDividerComponent, IgxInputGroupComponent, IgxInputDirective, IgxIconComponent, @@ -34,7 +37,7 @@ import { styleUrls: ['./divider.component.scss'] }) export class DividerComponent { - @ViewChildren(IgxDividerDirective) private dividers: QueryList; + @ViewChildren(IgxDividerComponent) private dividers: QueryList; public direction = false; public dashed = false; From 124bc0ddba4e9bea39233598248ce86e5dba8d42 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 6 Feb 2025 11:07:24 +0200 Subject: [PATCH 027/131] refactor(badge): bundle styles with component (#15278) --- .../src/lib/badge/badge.component.scss | 4 ++ .../src/lib/badge/badge.component.ts | 4 +- .../src/lib/badge/themes/_base.scss | 71 +++++++++++++++++++ .../src/lib/badge/themes/dark/_index.scss | 6 ++ .../src/lib/badge/themes/dark/_tokens.scss | 7 ++ .../src/lib/badge/themes/light/_index.scss | 6 ++ .../src/lib/badge/themes/light/_tokens.scss | 8 +++ .../src/lib/badge/themes/shared/_index.scss | 2 + .../lib/badge/themes/shared/bootstrap.scss | 13 ++++ .../src/lib/badge/themes/shared/indigo.scss | 15 ++++ .../core/styles/themes/generators/_base.scss | 14 ++-- 11 files changed, 142 insertions(+), 8 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/badge/badge.component.scss create mode 100644 projects/igniteui-angular/src/lib/badge/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/badge/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/badge/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/badge/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.scss b/projects/igniteui-angular/src/lib/badge/badge.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/badge.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts index 5275adb98f9..c3d14217b5a 100644 --- a/projects/igniteui-angular/src/lib/badge/badge.component.ts +++ b/projects/igniteui-angular/src/lib/badge/badge.component.ts @@ -1,5 +1,5 @@ import { NgIf } from '@angular/common'; -import { booleanAttribute, Component, HostBinding, Input } from '@angular/core'; +import { booleanAttribute, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core'; import { mkenum } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; @@ -40,7 +40,9 @@ export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType]; */ @Component({ selector: 'igx-badge', + styleUrl: "badge.component.css", templateUrl: 'badge.component.html', + encapsulation: ViewEncapsulation.None, imports: [NgIf, IgxIconComponent] }) export class IgxBadgeComponent { diff --git a/projects/igniteui-angular/src/lib/badge/themes/_base.scss b/projects/igniteui-angular/src/lib/badge/themes/_base.scss new file mode 100644 index 00000000000..c884a0c4ab6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/_base.scss @@ -0,0 +1,71 @@ +@use 'sass:map'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use './light/tokens' as *; + +$theme: $material; + +@layer base { + @include b(igx-badge) { + --size: #{rem(22px)}; + --_badge-size: var(--size); + display: inline-flex; + justify-content: center; + align-items: center; + min-width: var(--_badge-size); + min-height: var(--_badge-size); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background-color'); + border-radius: calc(var(--size) / 2); + box-shadow: var-get($theme, 'elevation'); + overflow: hidden; + + @include type-style(caption) { + margin: 0; + } + + igx-icon { + --size: var(--igx-icon-size, calc(var(--_badge-size) / 2)); + display: inline-flex; + justify-content: center; + align-items: center; + font-weight: 400; + color: var-get($theme, 'icon-color'); + } + + @include e(value) { + white-space: nowrap; + padding-inline: rem(4px); + } + + @include m(info) { + background: color($color: 'info'); + } + + @include m(success) { + background: color($color: 'success'); + } + + @include m(warning) { + background: color($color: 'warn'); + } + + @include m(error) { + background: color($color: 'error'); + } + + @include m(outlined) { + box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color'); + } + + @include m(square) { + border-radius: var-get($theme, 'border-radius'); + } + + @include m(hidden) { + visibility: hidden; + } + } +} diff --git a/projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss new file mode 100644 index 00000000000..855eddbf96a --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-badge, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/badge/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/badge/themes/dark/_tokens.scss new file mode 100644 index 00000000000..e97bbab4aab --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/badge' as *; + +$material: digest-schema($dark-material-badge); +$bootstrap: digest-schema($dark-bootstrap-badge); +$fluent: digest-schema($dark-fluent-badge); +$indigo: digest-schema($dark-indigo-badge); diff --git a/projects/igniteui-angular/src/lib/badge/themes/light/_index.scss b/projects/igniteui-angular/src/lib/badge/themes/light/_index.scss new file mode 100644 index 00000000000..ef28e1a85ae --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-badge, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/badge/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/badge/themes/light/_tokens.scss new file mode 100644 index 00000000000..0643448a04f --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/badge' as *; + +$base: digest-schema($light-badge); +$material: digest-schema($material-badge); +$bootstrap: digest-schema($bootstrap-badge); +$fluent: digest-schema($fluent-badge); +$indigo: digest-schema($indigo-badge); diff --git a/projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss new file mode 100644 index 00000000000..be6ed543149 --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss @@ -0,0 +1,2 @@ +@forward 'bootstrap'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..345ee74d9ec --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss @@ -0,0 +1,13 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-badge, bootstrap) { + @include m(outlined) { + box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color'); + } +} diff --git a/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss new file mode 100644 index 00000000000..18200d2820b --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss @@ -0,0 +1,15 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +@include themed-block(igx-badge, indigo) { + @include type-style(button) { + margin: 0; + } + + igx-icon { + --size: #{rem(12px)}; + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 0ad8df25b8b..d22296a707c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -152,13 +152,13 @@ @include action-strip($action-strip-theme-map); } - @if is-used('igx-badge', $exclude) { - $badge-theme-map: badge-theme( - $schema: $schema, - ); - $badge-theme-map: meta.call($theme-handler, $badge-theme-map); - @include badge($badge-theme-map); - } + // @if is-used('igx-badge', $exclude) { + // $badge-theme-map: badge-theme( + // $schema: $schema, + // ); + // $badge-theme-map: meta.call($theme-handler, $badge-theme-map); + // @include badge($badge-theme-map); + // } @if is-used('igx-bottom-nav', $exclude) { $bottom-nav-theme-map: bottom-nav-theme( From ff4cd94a713cd6b24bf41e872902784ccc80df88 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 6 Feb 2025 14:25:41 +0200 Subject: [PATCH 028/131] fix(badge): icon size --- projects/igniteui-angular/src/lib/badge/themes/_base.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/badge/themes/_base.scss b/projects/igniteui-angular/src/lib/badge/themes/_base.scss index c884a0c4ab6..0e95b177ba3 100644 --- a/projects/igniteui-angular/src/lib/badge/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/badge/themes/_base.scss @@ -27,11 +27,8 @@ $theme: $material; } igx-icon { - --size: var(--igx-icon-size, calc(var(--_badge-size) / 2)); - display: inline-flex; - justify-content: center; - align-items: center; - font-weight: 400; + --size: calc(var(--_badge-size) / 2) !important; + color: var-get($theme, 'icon-color'); } From f1684f44d75dcb48d40e1a9ef9defcba8cbcb220 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 6 Feb 2025 17:16:58 +0200 Subject: [PATCH 029/131] refactor(badge): add layer mixin and fix icon size --- .../src/lib/avatar/themes/_base.scss | 3 ++- .../igniteui-angular/src/lib/badge/themes/_base.scss | 12 +++++------- .../src/lib/badge/themes/shared/indigo.scss | 6 ++---- .../src/lib/checkbox/themes/_base.scss | 3 ++- .../src/lib/core/styles/themes/_standalone.scss | 8 +++++++- .../src/lib/core/styles/themes/generators/_base.scss | 2 +- .../src/lib/directives/divider/themes/_base.scss | 3 ++- .../src/lib/icon/icon.component.scss | 2 +- .../igniteui-angular/src/lib/icon/themes/_base.scss | 3 ++- 9 files changed, 24 insertions(+), 18 deletions(-) diff --git a/projects/igniteui-angular/src/lib/avatar/themes/_base.scss b/projects/igniteui-angular/src/lib/avatar/themes/_base.scss index f230c09826e..7e579d21bee 100644 --- a/projects/igniteui-angular/src/lib/avatar/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/avatar/themes/_base.scss @@ -1,11 +1,12 @@ @use 'igniteui-theming/sass/animations' as *; @use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/themes' as *; +@use 'styles/themes/standalone' as *; @use 'light/tokens' as *; $theme: $material; -@layer base { +@include layer(base) { @include b(igx-avatar) { @include sizable(); diff --git a/projects/igniteui-angular/src/lib/badge/themes/_base.scss b/projects/igniteui-angular/src/lib/badge/themes/_base.scss index 0e95b177ba3..499ba651860 100644 --- a/projects/igniteui-angular/src/lib/badge/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/badge/themes/_base.scss @@ -3,14 +3,18 @@ @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; @use './light/tokens' as *; $theme: $material; -@layer base { +@include layer(base) { @include b(igx-badge) { --size: #{rem(22px)}; --_badge-size: var(--size); + --igx-icon-size: calc(var(--_badge-size) / 2); + --igx-icon-color: #{var-get($theme, 'icon-color')}; + display: inline-flex; justify-content: center; align-items: center; @@ -26,12 +30,6 @@ $theme: $material; margin: 0; } - igx-icon { - --size: calc(var(--_badge-size) / 2) !important; - - color: var-get($theme, 'icon-color'); - } - @include e(value) { white-space: nowrap; padding-inline: rem(4px); diff --git a/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss index 18200d2820b..2ebf543a42f 100644 --- a/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss @@ -5,11 +5,9 @@ @use '../light/tokens' as *; @include themed-block(igx-badge, indigo) { + --igx-icon-size: #{rem(12px)}; + @include type-style(button) { margin: 0; } - - igx-icon { - --size: #{rem(12px)}; - } } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss index a3ab515c85a..7736cfd3b4b 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -5,11 +5,12 @@ @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; @use './light/tokens' as *; $_theme: $material; -@layer base { +@include layer(base) { @include scale-in-out($start-scale: 0.9); @include scale-in-center(); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss index 10ba536569c..b9f3a9cc84a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss @@ -4,6 +4,12 @@ @forward 'igniteui-theming/sass/themes'; @forward 'igniteui-theming/sass/bem'; +@mixin layer($name) { + @layer ig.#{$name} { + @content; + } +} + /// Includes a block element (@see block) for a specific component, theme, and variant. /// @access private /// @group bem @@ -15,7 +21,7 @@ @mixin themed-block($component, $theme, $variant: null) { $_theme: "" + $theme; - @layer #{$_theme} { + @include layer($_theme) { @if $variant { @container style(--theme: #{$_theme}) and style(--ig-theme-variant: #{$variant}) { @include b($component) { diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index d22296a707c..e632280e27c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -77,7 +77,7 @@ $theme: map.get($schema, '_meta', 'theme'); $variant: map.get($schema, '_meta', 'variant'); - @layer base, #{$theme}, #{$theme}-overrides; + @layer ig.base, ig.#{$theme}; #{$scope} { --ig-size-small: 1; diff --git a/projects/igniteui-angular/src/lib/directives/divider/themes/_base.scss b/projects/igniteui-angular/src/lib/directives/divider/themes/_base.scss index b2d9b5c29dc..c0a5e075844 100644 --- a/projects/igniteui-angular/src/lib/directives/divider/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/directives/divider/themes/_base.scss @@ -1,11 +1,12 @@ @use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; @use 'light/tokens' as *; $theme: $base; -@layer base { +@include layer(base) { @include b(igx-divider) { --dash-interval: #{rem(10px)}; --dash-angle: 90deg; diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.scss b/projects/igniteui-angular/src/lib/icon/icon.component.scss index c7019d1c431..08ae9545987 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.scss +++ b/projects/igniteui-angular/src/lib/icon/icon.component.scss @@ -1,3 +1,3 @@ -@use 'themes/base'; @use 'themes/light'; @use 'themes/dark'; +@use 'themes/base'; diff --git a/projects/igniteui-angular/src/lib/icon/themes/_base.scss b/projects/igniteui-angular/src/lib/icon/themes/_base.scss index 00c1ac5d1ac..b23444050f9 100644 --- a/projects/igniteui-angular/src/lib/icon/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/icon/themes/_base.scss @@ -3,6 +3,7 @@ @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; @use './light/tokens' as *; $theme: $material; @@ -32,7 +33,7 @@ $theme: $material; } } -@layer base { +@include layer(base) { @include b(igx-icon) { @include sizable(); From 8862f95f20af822ba14566cd04074970827dc780 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Fri, 7 Feb 2025 07:47:22 +0200 Subject: [PATCH 030/131] refactor(dialog): bundle styles with component (#15341) --- .../src/lib/badge/badge.component.ts | 2 +- .../core/styles/themes/generators/_base.scss | 14 ++-- .../src/lib/dialog/dialog.component.scss | 4 ++ .../src/lib/dialog/dialog.component.ts | 5 +- .../src/lib/dialog/themes/_base.scss | 64 +++++++++++++++++++ .../src/lib/dialog/themes/dark/_index.scss | 6 ++ .../src/lib/dialog/themes/dark/_tokens.scss | 8 +++ .../src/lib/dialog/themes/light/_index.scss | 6 ++ .../src/lib/dialog/themes/light/_tokens.scss | 8 +++ .../src/lib/dialog/themes/shared/_index.scss | 4 ++ .../lib/dialog/themes/shared/bootstrap.scss | 21 ++++++ .../src/lib/dialog/themes/shared/fluent.scss | 10 +++ .../src/lib/dialog/themes/shared/indigo.scss | 13 ++++ .../lib/dialog/themes/shared/material.scss | 10 +++ 14 files changed, 166 insertions(+), 9 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/dialog/dialog.component.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/dialog/themes/shared/material.scss diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts index c3d14217b5a..586e51028df 100644 --- a/projects/igniteui-angular/src/lib/badge/badge.component.ts +++ b/projects/igniteui-angular/src/lib/badge/badge.component.ts @@ -40,7 +40,7 @@ export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType]; */ @Component({ selector: 'igx-badge', - styleUrl: "badge.component.css", + styleUrl: 'badge.component.css', templateUrl: 'badge.component.html', encapsulation: ViewEncapsulation.None, imports: [NgIf, IgxIconComponent] diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index e632280e27c..0e9aa7c075c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -376,13 +376,13 @@ @include date-range-picker($date-range-picker-theme-map); } - @if is-used('igx-dialog', $exclude) { - $dialog-theme-map: dialog-theme( - $schema: $schema, - ); - $dialog-theme-map: meta.call($theme-handler, $dialog-theme-map); - @include dialog($dialog-theme-map); - } + // @if is-used('igx-dialog', $exclude) { + // $dialog-theme-map: dialog-theme( + // $schema: $schema, + // ); + // $dialog-theme-map: meta.call($theme-handler, $dialog-theme-map); + // @include dialog($dialog-theme-map); + // } // @if is-used('igx-divider', $exclude) { // $divider-theme-map: divider-theme( diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.scss b/projects/igniteui-angular/src/lib/dialog/dialog.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index cb6fc430cc9..71018a37411 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -11,7 +11,8 @@ import { Output, ViewChild, AfterContentInit, - booleanAttribute + booleanAttribute, + ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -56,6 +57,8 @@ let DIALOG_ID = 0; @Component({ selector: 'igx-dialog', templateUrl: 'dialog-content.component.html', + styleUrl: 'dialog.component.css', + encapsulation: ViewEncapsulation.None, imports: [IgxToggleDirective, IgxFocusTrapDirective, NgIf, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective] }) export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, AfterContentInit { diff --git a/projects/igniteui-angular/src/lib/dialog/themes/_base.scss b/projects/igniteui-angular/src/lib/dialog/themes/_base.scss new file mode 100644 index 00000000000..f97a4dc8786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/_base.scss @@ -0,0 +1,64 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$_theme: $material; + +@include layer(base) { + @include b(igx-dialog) { + outline-style: none; + + @include e(window) { + position: relative; + min-width: var(--min-width); + border: rem(1px) solid var-get($_theme, 'border-color'); + border-radius: var-get($_theme, 'border-radius'); + background: var-get($_theme, 'background'); + box-shadow: var-get($_theme, 'elevation'); + overflow: hidden; + + .igx-calendar { + min-width: rem(320px); + } + + .igx-calendar--vertical { + min-width: rem(496px); + } + } + + @include e(window-title) { + display: flex; + color: var-get($_theme, 'title-color'); + padding: var(--title-padding); + } + + @include e(window-content) { + color: var-get($_theme, 'message-color'); + padding: var(--message-padding); + // The 2 rules below are related to https://github.com/IgniteUI/igniteui-angular/issues/11300 + position: relative; + z-index: 0; + } + + @include e(window-message) { + display: inline-block; + max-width: 40ch; + } + + @include e(window-actions) { + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + padding: var(--actions-padding); + gap: rem(8px); + } + + @include m(hidden) { + display: none; + } + } +} diff --git a/projects/igniteui-angular/src/lib/dialog/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/dialog/themes/dark/_index.scss new file mode 100644 index 00000000000..af9af0a9b6c --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-dialog, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/dialog/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/dialog/themes/dark/_tokens.scss new file mode 100644 index 00000000000..4744267e867 --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/dark/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/dialog' as *; + +$base: digest-schema($base-dark-dialog); +$material: digest-schema($dark-material-dialog); +$bootstrap: digest-schema($dark-bootstrap-dialog); +$fluent: digest-schema($dark-fluent-dialog); +$indigo: digest-schema($dark-indigo-dialog); diff --git a/projects/igniteui-angular/src/lib/dialog/themes/light/_index.scss b/projects/igniteui-angular/src/lib/dialog/themes/light/_index.scss new file mode 100644 index 00000000000..de33d81ef1b --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-dialog, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/dialog/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/dialog/themes/light/_tokens.scss new file mode 100644 index 00000000000..d7c89063601 --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/dialog' as *; + +$base: digest-schema($light-dialog); +$material: digest-schema($material-dialog); +$bootstrap: digest-schema($bootstrap-dialog); +$fluent: digest-schema($fluent-dialog); +$indigo: digest-schema($indigo-dialog); diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..9bc466812b2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss @@ -0,0 +1,21 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-dialog, bootstrap) { + --min-width: #{rem(288px)}; + --title-padding: #{rem(16px)}; + --message-padding: #{rem(16px)}; + --actions-padding: #{rem(16px)}; + + @include e(window-title) { + border-bottom: rem(1px) solid var-get($_theme, 'border-color'); + } + + @include e(window-actions) { + border-top: rem(1px) solid var-get($_theme, 'border-color'); + } +} diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss new file mode 100644 index 00000000000..2dcb0396a4b --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-dialog, fluent) { + --min-width: #{rem(288px)}; + --title-padding: #{rem(16px) rem(24px) rem(24px) rem(24px)}; + --message-padding: #{0 rem(24px) rem(20px) rem(24px)}; + --actions-padding: #{0 rem(24px) rem(24px) rem(24px)}; +} diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss new file mode 100644 index 00000000000..fd046b996c9 --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss @@ -0,0 +1,13 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-dialog, indigo) { + --title-padding: #{rem(24px) rem(24px) 0 rem(24px)}; + --message-padding: #{rem(16px) rem(24px)}; + --actions-padding: #{rem(16px) rem(24px) rem(24px) rem(24px)}; + + @include e(window-actions) { + gap: rem(16px); + } +} diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/material.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/material.scss new file mode 100644 index 00000000000..8217f732590 --- /dev/null +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/material.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-dialog, material) { + --min-width: #{rem(280px)}; + --title-padding: #{rem(16px) rem(24px) rem(0px) rem(24px)}; + --message-padding: #{rem(14px) rem(24px)}; + --actions-padding: #{0 rem(8px) rem(8px)}; +} From 8340e14722986049904ebbfcd328d9b191a57de3 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 7 Feb 2025 08:46:16 +0200 Subject: [PATCH 031/131] fix(checkbox): label color fixes --- .../src/lib/checkbox/themes/_base.scss | 39 +++++++++++-------- .../lib/checkbox/themes/shared/_indigo.scss | 8 ++++ 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss index 7736cfd3b4b..ada294356a6 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -14,6 +14,19 @@ $_theme: $material; @include scale-in-out($start-scale: 0.9); @include scale-in-center(); + %label { + display: inline-block; + margin-inline-start: var(--label-margin); + margin-block: 0; + color: var-get($_theme, 'label-color'); + user-select: none; + word-wrap: break-all; + + &:empty { + display: none; + } + } + %cbx-ripple-empty { background: var-get($_theme, 'empty-color'); transition: background 0.2s $ease-out-quad; @@ -93,19 +106,12 @@ $_theme: $material; } @include e(label) { - display: inline-block; - color: var-get($_theme, 'label-color'); - user-select: none; - word-wrap: break-all; - margin-inline-start: var(--label-margin); - margin-block: 0; - - &:empty { - margin: 0; - } + @extend %label; } @include e(label, $m: before) { + @extend %label; + margin-inline-end: var(--label-margin); order: -1; } @@ -118,8 +124,7 @@ $_theme: $material; width: var(--size); height: var(--size); - //ripple color - --color: #{var-get($_theme, 'empty-color')}; + --igx-ripple-color: #{var-get($_theme, 'empty-color')}; } @include e(composite) { @@ -173,14 +178,17 @@ $_theme: $material; } @include e(composite-wrapper) { - //ripple color - --color: #{var-get($_theme, 'error-color')}; + --igx-ripple-color: #{var-get($_theme, 'error-color')}; } @include e(label) { color: var-get($_theme, 'error-color'); } + @include e(label, $m: before) { + color: var-get($_theme, 'error-color'); + } + &:hover { @include e(ripple) { @extend %cbx-ripple--hovered; @@ -323,8 +331,7 @@ $_theme: $material; } @include e(composite-wrapper) { - //ripple color - --color: #{var-get($_theme, 'fill-color')}; + --igx-ripple-color: #{var-get($_theme, 'fill-color')}; } &:hover { diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss index 5e298294e67..80c03d279a8 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss @@ -71,6 +71,10 @@ $_theme: $indigo; @include e(label) { color: var-get($_theme, 'label-color'); } + + @include e(label, $m: before) { + color: var-get($_theme, 'label-color'); + } } @include m(indeterminate) { @@ -97,6 +101,10 @@ $_theme: $indigo; @include e(label) { color: var-get($_theme, 'disabled-color-label'); } + + @include e(label, $m: before) { + color: var-get($_theme, 'disabled-color-label'); + } } @include mx(focused, checked) { From 7c467ec977c776f0de174c45ead7c2a7ec8d70e0 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 7 Feb 2025 11:04:48 +0200 Subject: [PATCH 032/131] refactor(toast): bundle styles with component (#15344) --- .../core/styles/themes/generators/_base.scss | 14 +++---- .../core/styles/typography/_bootstrap.scss | 2 +- .../lib/core/styles/typography/_fluent.scss | 6 +-- .../lib/core/styles/typography/_indigo.scss | 2 +- .../lib/core/styles/typography/_material.scss | 2 +- .../src/lib/toast/themes/_base.scss | 42 +++++++++++++++++++ .../src/lib/toast/themes/dark/_index.scss | 6 +++ .../src/lib/toast/themes/dark/_tokens.scss | 7 ++++ .../src/lib/toast/themes/light/_index.scss | 6 +++ .../src/lib/toast/themes/light/_tokens.scss | 8 ++++ .../lib/toast/themes/shared/_bootstrap.scss | 7 ++++ .../src/lib/toast/themes/shared/_fluent.scss | 17 ++++++++ .../src/lib/toast/themes/shared/_index.scss | 2 + .../src/lib/toast/toast.component.scss | 4 ++ .../src/lib/toast/toast.component.ts | 6 ++- 15 files changed, 116 insertions(+), 15 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/toast/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/toast/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/toast/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/toast/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/toast/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/toast/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/toast/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/toast/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/toast/toast.component.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 0e9aa7c075c..16ffa6bebdc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -616,13 +616,13 @@ @include stepper($stepper-theme-map); } - @if is-used('igx-toast', $exclude) { - $toast-theme-map: toast-theme( - $schema: $schema, - ); - $toast-theme-map: meta.call($theme-handler, $toast-theme-map); - @include toast($toast-theme-map); - } + // @if is-used('igx-toast', $exclude) { + // $toast-theme-map: toast-theme( + // $schema: $schema, + // ); + // $toast-theme-map: meta.call($theme-handler, $toast-theme-map); + // @include toast($toast-theme-map); + // } @if is-used('igx-tooltip', $exclude) { $tooltip-theme-map: tooltip-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 3358a8d1d64..9c216e51abf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -107,7 +107,7 @@ selected-time: 'h4' )); @include stepper-typography(); - @include toast-typography(); + // @include toast-typography(); @include tooltip-typography(); @include tree-typography(); @include label-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index d203af9fbf1..ef61b1147a3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -111,9 +111,9 @@ )); @include time-picker-typography(); @include stepper-typography(); - @include toast-typography($categories: ( - text: 'caption' - )); + // @include toast-typography($categories: ( + // text: 'caption' + // )); @include tooltip-typography(); @include tree-typography(); @include label-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index d9a0e32013e..1081630b460 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -117,7 +117,7 @@ indicator: 'button', body-content: 'body-2' )); - @include toast-typography(); + // @include toast-typography(); @include tooltip-typography($categories: ( tooltip-text: 'subtitle-2' )); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index d48041d30ed..7222952ac63 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -62,7 +62,7 @@ @include tabs-typography(); @include time-picker-typography(); @include stepper-typography(); - @include toast-typography(); + // @include toast-typography(); @include tooltip-typography(); @include tree-typography(); @include label-typography(); diff --git a/projects/igniteui-angular/src/lib/toast/themes/_base.scss b/projects/igniteui-angular/src/lib/toast/themes/_base.scss new file mode 100644 index 00000000000..39e994d33d4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/toast/themes/_base.scss @@ -0,0 +1,42 @@ +@use 'sass:map'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $base; + +@include layer(base) { + @include b(igx-toast) { + --_padding: #{rem(10px)} #{rem(16px)}; + @include type-style(body-2); + + display: inline-flex; + justify-content: center; + align-items: center; + margin: rem(42px) auto; + padding: var(--_padding); + min-width: rem(52px); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: var-get($theme, 'elevation'); + backdrop-filter: blur(10px); + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + border-radius: inherit; + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'); + } + + > * { + @include type-style(body-2) { + margin: 0; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/toast/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/toast/themes/dark/_index.scss new file mode 100644 index 00000000000..35136e037f8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/toast/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-toast, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/toast/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/toast/themes/dark/_tokens.scss new file mode 100644 index 00000000000..fce57d0c4dd --- /dev/null +++ b/projects/igniteui-angular/src/lib/toast/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/toast' as *; + +$material: digest-schema($dark-material-toast); +$bootstrap: digest-schema($dark-bootstrap-toast); +$fluent: digest-schema($dark-fluent-toast); +$indigo: digest-schema($dark-indigo-toast); diff --git a/projects/igniteui-angular/src/lib/toast/themes/light/_index.scss b/projects/igniteui-angular/src/lib/toast/themes/light/_index.scss new file mode 100644 index 00000000000..c057fb07c3f --- /dev/null +++ b/projects/igniteui-angular/src/lib/toast/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-toast, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/toast/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/toast/themes/light/_tokens.scss new file mode 100644 index 00000000000..4ee81f8887f --- /dev/null +++ b/projects/igniteui-angular/src/lib/toast/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/toast' as *; + +$base: digest-schema($light-toast); +$material: digest-schema($material-toast); +$bootstrap: digest-schema($bootstrap-toast); +$fluent: digest-schema($fluent-toast); +$indigo: digest-schema($indigo-toast); diff --git a/projects/igniteui-angular/src/lib/toast/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/toast/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..78a8f3e2d15 --- /dev/null +++ b/projects/igniteui-angular/src/lib/toast/themes/shared/_bootstrap.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-toast, bootstrap) { + --_padding: #{rem(12px)}; +} diff --git a/projects/igniteui-angular/src/lib/toast/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/toast/themes/shared/_fluent.scss new file mode 100644 index 00000000000..aafdf6d7cb2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/toast/themes/shared/_fluent.scss @@ -0,0 +1,17 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-toast, fluent) { + --_padding: #{rem(8px)} #{rem(12px)}; + + @include type-style(caption) { + margin: revert-layer; + }; + + > * { + @include type-style(caption) { + margin: 0; + } + } +} diff --git a/projects/igniteui-angular/src/lib/toast/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/toast/themes/shared/_index.scss new file mode 100644 index 00000000000..40bef4eab92 --- /dev/null +++ b/projects/igniteui-angular/src/lib/toast/themes/shared/_index.scss @@ -0,0 +1,2 @@ +@forward 'fluent'; +@forward 'bootstrap'; diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.scss b/projects/igniteui-angular/src/lib/toast/toast.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/toast/toast.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.ts b/projects/igniteui-angular/src/lib/toast/toast.component.ts index 4cec61b052f..f3c71840701 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.ts @@ -8,7 +8,8 @@ import { Input, OnInit, Optional, - Output + Output, + ViewEncapsulation } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { IgxNavigationService } from '../core/navigation'; @@ -44,7 +45,8 @@ let NEXT_ID = 0; @Component({ selector: 'igx-toast', templateUrl: 'toast.component.html', - standalone: true + styleUrl: 'toast.component.css', + encapsulation: ViewEncapsulation.None }) export class IgxToastComponent extends IgxNotificationsDirective implements OnInit { /** From 5788f150797dcb2b6fe13a70173182427c436e37 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Fri, 7 Feb 2025 11:55:18 +0200 Subject: [PATCH 033/131] refactor(radio): bundle styles with component (#15294) --- .../core/styles/themes/generators/_base.scss | 14 +- .../src/lib/radio/radio.component.scss | 4 + .../src/lib/radio/radio.component.ts | 5 + .../src/lib/radio/themes/_base.scss | 461 ++++++++++++++++++ .../src/lib/radio/themes/dark/_bootstrap.scss | 14 + .../src/lib/radio/themes/dark/_fluent.scss | 28 ++ .../src/lib/radio/themes/dark/_index.scss | 8 + .../src/lib/radio/themes/dark/_tokens.scss | 7 + .../src/lib/radio/themes/light/_index.scss | 6 + .../src/lib/radio/themes/light/_tokens.scss | 8 + .../lib/radio/themes/shared/_bootstrap.scss | 211 ++++++++ .../src/lib/radio/themes/shared/_fluent.scss | 41 ++ .../src/lib/radio/themes/shared/_index.scss | 4 + .../src/lib/radio/themes/shared/_indigo.scss | 106 ++++ .../lib/radio/themes/shared/_material.scss | 45 ++ 15 files changed, 955 insertions(+), 7 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/radio/radio.component.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/dark/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/dark/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/radio/themes/shared/_material.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 16ffa6bebdc..40c92e6e018 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -552,13 +552,13 @@ @include progress-linear($progress-linear-theme-map); } - @if is-used('igx-radio', $exclude) { - $radio-theme-map: radio-theme( - $schema: $schema, - ); - $radio-theme-map: meta.call($theme-handler, $radio-theme-map); - @include radio($radio-theme-map); - } + // @if is-used('igx-radio', $exclude) { + // $radio-theme-map: radio-theme( + // $schema: $schema, + // ); + // $radio-theme-map: meta.call($theme-handler, $radio-theme-map); + // @include radio($radio-theme-map); + // } @if is-used('igx-query-builder', $exclude) { $query-builder-theme-map: query-builder-theme( diff --git a/projects/igniteui-angular/src/lib/radio/radio.component.scss b/projects/igniteui-angular/src/lib/radio/radio.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/radio.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/radio/radio.component.ts b/projects/igniteui-angular/src/lib/radio/radio.component.ts index b2aff3bb48e..bbf1374c71e 100644 --- a/projects/igniteui-angular/src/lib/radio/radio.component.ts +++ b/projects/igniteui-angular/src/lib/radio/radio.component.ts @@ -5,6 +5,7 @@ import { HostBinding, HostListener, Input, + ViewEncapsulation, booleanAttribute } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; @@ -33,11 +34,15 @@ import { CheckboxBaseDirective } from '../checkbox/checkbox-base.directive'; multi: true }], templateUrl: 'radio.component.html', + styleUrl: 'radio.component.css', + encapsulation: ViewEncapsulation.None, imports: [IgxRippleDirective] }) + export class IgxRadioComponent extends CheckboxBaseDirective implements AfterViewInit, ControlValueAccessor, EditorProvider { + /** @hidden @internal */ public blurRadio = new EventEmitter(); diff --git a/projects/igniteui-angular/src/lib/radio/themes/_base.scss b/projects/igniteui-angular/src/lib/radio/themes/_base.scss new file mode 100644 index 00000000000..63ff7344c0d --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/_base.scss @@ -0,0 +1,461 @@ +/* stylelint-disable max-nesting-depth */ +@use 'sass:map'; +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$_theme: $material; + +@include layer(base) { + @include scale-in-out($start-scale: 0.9); + + %radio-label { + color: var-get($_theme, 'label-color'); + user-select: none; + word-wrap: break-all; + + &:empty { + display: none; + } + } + + %radio-ripple-empty { + background: var-get($_theme, 'empty-color'); + transition: background 0.2s $ease-out-quad; + } + + %radio-ripple--hover { + @extend %radio-ripple-empty; + opacity: 0.06; + + @container style(--ig-theme-variant: dark) { + opacity: 0.12; + } + } + + %radio-ripple--hover-checked { + background: var-get($_theme, 'fill-color'); + } + + %radio-ripple--hover-invalid { + background: var-get($_theme, 'error-color'); + } + + %radio-ripple--pressed { + opacity: 0.12; + + @container style(--ig-theme-variant: dark) { + opacity: 0.24; + } + } + + %radio-ripple--focused { + @extend %radio-ripple-empty; + @extend %radio-ripple--pressed; + } + + @include b(igx-radio) { + position: relative; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + color: var-get($_theme, 'label-color'); + width: max-content; + cursor: pointer; + + &:hover { + @include e(composite) { + &::before { + background: var-get($_theme, 'hover-color'); + } + } + + @include e(ripple) { + @extend %radio-ripple--hover; + } + } + + &:active { + @include e(composite) { + &::before { + background: var-get($_theme, 'hover-color'); + } + } + + @include e(ripple) { + @extend %radio-ripple--hover; + @extend %radio-ripple--pressed; + } + } + + @include e(input) { + @include hide-default(); + } + + @include e(composite) { + position: relative; + display: inline-block; + width: var(--size); + height: var(--size); + min-width: var(--size); + line-height: var(--size); + color: var-get($_theme, 'label-color'); + user-select: none; + + --igx-ripple-color: #{var-get($_theme, 'empty-color')}; + + &::before, + &::after { + position: absolute; + content: ''; + width: var(--size); + height: var(--size); + inset-inline-start: 0; + top: 0; + border-radius: border-radius(50%); + } + + &::before { + backface-visibility: hidden; + z-index: 1; + transform: scale(0); + transition: all 0.2s $ease-out-quad; + } + + &::after { + border: var(--border-width) solid + var-get($_theme, 'empty-color'); + background: var-get($_theme, 'empty-fill-color'); + } + } + + @include e(label) { + @extend %radio-label; + + margin-inline-start: var(--label-margin); + } + + @include e(label, $m: before) { + @extend %radio-label; + + order: -1; + margin-inline-end: var(--label-margin); + } + + @include e(ripple) { + --_ripple-size: #{rem(40px)}; + + display: none; + position: absolute; + top: calc(50% - calc(var(--_ripple-size) / 2)); + inset-inline-start: calc(50% - calc(var(--_ripple-size) / 2)); + width: var(--_ripple-size); + aspect-ratio: 1; + // should be moved to the schema file like the switch and checkbox + border-radius: calc(var(--_ripple-size) / 2); + overflow: hidden; + pointer-events: none; + filter: opacity(1); + } + + @include m(focused) { + @include e(ripple) { + @extend %radio-ripple--focused; + } + + &:hover { + @include e(ripple) { + @extend %radio-ripple--focused; + } + } + } + + @include m(checked) { + @include e(composite) { + --igx-ripple-color: #{var-get($_theme, 'fill-color')}; + + &::before { + border: var(--border-width) solid + var-get($_theme, 'fill-color'); + background: var-get($_theme, 'fill-color'); + transform: var(--scale); + } + + &::after { + border: var(--border-width) solid + var-get($_theme, 'fill-color'); + } + } + + &:hover { + @include e(composite) { + &::before { + background: var-get($_theme, 'fill-color-hover'); + border-color: var-get( + $_theme, + 'fill-hover-border-color' + ); + } + + &::after { + border-color: var-get( + $_theme, + 'fill-hover-border-color' + ); + } + } + + @include e(ripple) { + @extend %radio-ripple--hover; + @extend %radio-ripple--hover-checked; + } + } + + &:active { + @include e(composite) { + &::before { + background: var-get($_theme, 'fill-color-hover'); + border-color: var-get( + $_theme, + 'fill-hover-border-color' + ); + } + + &::after { + border-color: var-get( + $_theme, + 'fill-hover-border-color' + ); + } + } + + @include e(ripple) { + @extend %radio-ripple--hover; + @extend %radio-ripple--hover-checked; + @extend %radio-ripple--pressed; + } + } + } + + @include mx(focused, checked) { + &:hover { + @include e(composite) { + &::before { + background: var-get($_theme, 'fill-color-hover'); + border-color: var-get( + $_theme, + 'fill-hover-border-color' + ); + } + + &::after { + border-color: var-get( + $_theme, + 'fill-hover-border-color' + ); + } + } + } + + &:active { + @include e(composite) { + &::before { + background: var-get($_theme, 'fill-color-hover'); + border-color: var-get( + $_theme, + 'fill-hover-border-color' + ); + } + + &::after { + border-color: var-get( + $_theme, + 'fill-hover-border-color' + ); + } + } + } + + @include e(ripple) { + @extend %radio-ripple--focused; + + background: var-get($_theme, 'fill-color'); + } + } + + @include m(invalid) { + @include e(composite) { + --igx-ripple-color: #{var-get($_theme, 'error-color')}; + + &::after { + border: var(--border-width) solid + var-get($_theme, 'error-color'); + } + } + + @include e(label) { + color: var-get($_theme, 'error-color'); + } + + @include e(label, $m: before) { + color: var-get($_theme, 'error-color'); + } + + &:hover { + @include e(ripple) { + @extend %radio-ripple--hover; + @extend %radio-ripple--hover-invalid; + } + + @include e(composite) { + &::before { + background: var-get($_theme, 'error-color'); + } + + &::after { + border-color: var-get($_theme, 'error-color-hover'); + } + } + } + + &:active { + @include e(composite) { + &::before { + background: var-get($_theme, 'error-color'); + } + + &::after { + border-color: var-get($_theme, 'error-color-hover'); + } + } + + @include e(ripple) { + @extend %radio-ripple--hover; + @extend %radio-ripple--hover-invalid; + @extend %radio-ripple--pressed; + } + } + } + + @include mx(focused, invalid) { + @include e(ripple) { + @extend %radio-ripple--focused; + + background: var-get($_theme, 'error-color'); + } + } + + @include mx(checked, invalid) { + @include e(composite) { + &::after { + border: var(--border-width) solid + var-get($_theme, 'error-color'); + } + + &::before { + background: var-get($_theme, 'error-color'); + border: var(--border-width) solid transparent; + } + } + + &:hover { + @include e(composite) { + &::before { + background: var-get($_theme, 'error-color-hover'); + border-color: var-get($_theme, 'error-color-hover'); + } + + &::after { + border: var(--border-width) solid + var-get($_theme, 'error-color-hover'); + } + } + } + + &:active { + @include e(composite) { + &::before { + background: var-get($_theme, 'error-color-hover'); + border-color: var-get($_theme, 'error-color-hover'); + } + + &::after { + border: var(--border-width) solid + var-get($_theme, 'error-color-hover'); + } + } + } + } + + @include mx(checked, invalid, focused) { + @include e(composite) { + &::after { + border: var(--border-width) solid + var-get($_theme, 'error-color'); + } + + &::before { + background: var-get($_theme, 'error-color'); + border-color: var-get($_theme, 'error-color'); + } + } + } + + @include m(disabled) { + pointer-events: none; + color: var-get($_theme, 'disabled-label-color'); + user-select: none; + + @include e(composite) { + &::after { + border: var(--border-width) solid + var-get($_theme, 'disabled-color'); + } + } + + @include e(label) { + color: var-get($_theme, 'disabled-label-color'); + } + + @include e(label, $m: before) { + color: var-get($_theme, 'disabled-label-color'); + } + } + + @include mx(disabled, checked) { + @include e(composite) { + &::after { + border: var(--border-width) solid + var-get($_theme, 'disabled-fill-color'); + } + + &::before { + background: var-get($_theme, 'disabled-fill-color'); + border: var(--border-width) solid transparent; + } + } + } + } + + @include b(igx-radio-group) { + display: block; + + igx-radio:not(:last-of-type) { + margin-inline-end: var(--horizontal-group-margin); + } + + @include m(vertical) { + display: flex; + flex-flow: column; + + igx-radio:not(:last-of-type) { + margin-inline-end: 0; + margin-block-end: var(--vertical-group-margin); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/radio/themes/dark/_bootstrap.scss b/projects/igniteui-angular/src/lib/radio/themes/dark/_bootstrap.scss new file mode 100644 index 00000000000..03e4faf9d3c --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/dark/_bootstrap.scss @@ -0,0 +1,14 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +@include themed-block(igx-radio, bootstrap, dark) { + @include m(disabled) { + @include e(composite) { + &::after { + background: color($color: 'surface'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/radio/themes/dark/_fluent.scss b/projects/igniteui-angular/src/lib/radio/themes/dark/_fluent.scss new file mode 100644 index 00000000000..f097c0bf899 --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/dark/_fluent.scss @@ -0,0 +1,28 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-radio, fluent, dark) { + @include m(invalid) { + &:hover { + @include e(composite) { + &::before { + background: color($color: 'error', $variant: 500); + } + } + } + } + + @include mx(checked, invalid) { + &:hover { + @include e(composite) { + &::before { + background: var-get($_theme, 'error-color-hover'); + } + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/radio/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/radio/themes/dark/_index.scss new file mode 100644 index 00000000000..c850c9e0e85 --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/dark/_index.scss @@ -0,0 +1,8 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; +@use 'fluent'; +@use 'bootstrap'; + +$tokens: meta.module-variables(tokens); +@include themes(igx-radio, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/radio/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/radio/themes/dark/_tokens.scss new file mode 100644 index 00000000000..c102d1912d7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/radio' as *; + +$material: digest-schema($dark-material-radio); +$bootstrap: digest-schema($dark-bootstrap-radio); +$fluent: digest-schema($dark-fluent-radio); +$indigo: digest-schema($dark-indigo-radio); diff --git a/projects/igniteui-angular/src/lib/radio/themes/light/_index.scss b/projects/igniteui-angular/src/lib/radio/themes/light/_index.scss new file mode 100644 index 00000000000..b08d708090a --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-radio, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/radio/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/radio/themes/light/_tokens.scss new file mode 100644 index 00000000000..da1676ee29a --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/radio' as *; + +$base: digest-schema($light-radio); +$material: digest-schema($material-radio); +$bootstrap: digest-schema($bootstrap-radio); +$fluent: digest-schema($fluent-radio); +$indigo: digest-schema($indigo-radio); diff --git a/projects/igniteui-angular/src/lib/radio/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/radio/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..8ca7da7d689 --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/shared/_bootstrap.scss @@ -0,0 +1,211 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-radio, bootstrap) { + --size: #{rem(16px)}; + --label-margin: #{rem(8px)}; + --scale: scale(0.4375); + --border-width: #{rem(1px)}; + --horizontal-group-margin: #{rem(8px)}; + --vertical-group-margin: #{rem(8px)}; + + @include e(label) { + @include type-style(body-1) { + margin-block: 0; + } + } + + @include e(composite) { + &::before { + transition: none; + } + } + + &:hover { + @include e(composite) { + &::after { + border: var(--border-width) solid + var-get($_theme, 'hover-color'); + transition: all 0.2s ease-in; + } + } + } + + @include m(checked) { + @include e(composite) { + &::before { + border-color: var-get($_theme, 'fill-hover-border-color'); + background: var-get($_theme, 'fill-hover-border-color'); + } + + &::after { + background: var-get($_theme, 'fill-color'); + } + } + + &:hover { + @include e(composite) { + &::after { + background: var-get($_theme, 'fill-color-hover'); + border-color: var-get($_theme, 'fill-color-hover'); + } + } + } + + &:active { + @include e(composite) { + &::after { + background: var-get($_theme, 'fill-color-hover'); + border-color: var-get($_theme, 'fill-color-hover'); + } + } + } + } + + @include m(focused) { + @include e(composite) { + border-radius: border-radius(50%); + box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-outline-color'); + + &::after { + border-color: color($color: 'primary', $variant: 200); + } + } + + &:hover { + @include e(composite) { + &::after { + border-color: color($color: 'primary', $variant: 300); + } + } + } + } + + @include mx(focused, checked) { + @include e(composite) { + &::after { + border-color: transparent; + } + } + + &:hover { + @include e(composite) { + &::after { + background: var-get($_theme, 'fill-color-hover'); + border-color: var-get($_theme, 'fill-color-hover'); + } + } + } + + &:active { + @include e(composite) { + &::after { + background: var-get($_theme, 'fill-color-hover'); + border-color: var-get($_theme, 'fill-color-hover'); + } + } + } + } + + @include m(invalid) { + @include e(composite) { + &::after { + background: transparent; + border: var(--border-width) solid + var-get($_theme, 'error-color'); + } + } + + &:hover { + @include e(composite) { + &::after { + border-color: var(--error-color-hover); + } + } + } + } + + @include mx(focused, invalid) { + @include e(composite) { + box-shadow: 0 0 0 rem(4px) + var-get($_theme, 'focus-outline-color-error'); + + &::after { + border: var(--border-width) solid + var-get($_theme, 'error-color'); + } + } + + &:hover { + @include e(composite) { + &::after { + border: var(--border-width) solid + var-get($_theme, 'error-color-hover'); + } + } + } + } + + @include mx(checked, invalid) { + @include e(composite) { + &::after { + background: var-get($_theme, 'error-color'); + border-color: var-get($_theme, 'error-color'); + } + + &::before { + background: white; + } + } + + &:hover { + @include e(composite) { + &::after { + background: var-get($_theme, 'error-color-hover'); + border-color: var-get($_theme, 'error-color-hover'); + } + } + } + + &:active { + @include e(composite) { + &::after { + background: var-get($_theme, 'error-color-hover'); + border-color: var-get($_theme, 'error-color-hover'); + } + } + } + } + + @include mx(checked, invalid, focused) { + @include e(composite) { + &::before { + background: white; + border-color: transparent; + } + } + } + + @include mx(invalid, disabled) { + @include e(composite) { + &::after { + border-color: var-get($_theme, 'disabled-color'); + } + } + } + + @include mx(checked, disabled) { + @include e(composite) { + &::after { + background: var-get($_theme, 'disabled-fill-color'); + border-color: var-get($_theme, 'disabled-fill-color'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/radio/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/radio/themes/shared/_fluent.scss new file mode 100644 index 00000000000..cbf68e6384a --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/shared/_fluent.scss @@ -0,0 +1,41 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-radio, fluent) { + --size: #{rem(20px)}; + --label-margin: #{rem(8px)}; + --scale: scale(0.5); + --border-width: #{rem(1px)}; + --horizontal-group-margin: #{rem(12px)}; + --vertical-group-margin: #{rem(8px)}; + + @include e(label) { + @include type-style(body-2) { + margin-block: 0; + } + } + + &:hover { + @include e(composite) { + &::before { + transform: scale(0.5); + } + } + } + + @include m(focused) { + position: relative; + + &::after { + content: ''; + position: absolute; + inset: rem(-2px); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'focus-outline-color'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/radio/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/radio/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/radio/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/radio/themes/shared/_indigo.scss new file mode 100644 index 00000000000..a3b0e81b0fe --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/shared/_indigo.scss @@ -0,0 +1,106 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-radio, indigo) { + --size: #{rem(16px)}; + --label-margin: #{rem(8px)}; + --scale: scale(0.5); + --border-width: #{rem(2px)}; + --horizontal-group-margin: #{rem(16px)}; + --vertical-group-margin: #{rem(8px)}; + + @include e(label) { + @include type-style(body-2) { + margin-block: 0; + } + } + + &:hover { + @include e(label) { + color: var-get($_theme, 'label-color-hover'); + } + + @include e(composite) { + &::after { + border-color: var-get($_theme, 'hover-color'); + transition: all 0.2s ease-in; + } + } + } + + @include m(checked) { + &:hover { + @include e(composite) { + &::after { + border-color: var-get($_theme, 'fill-hover-border-color'); + } + } + } + } + + @include m(invalid) { + @include e(label) { + color: var-get($_theme, 'label-color'); + } + + @include e(label, $m: before) { + color: var-get($_theme, 'label-color'); + } + + &:hover { + @include e(composite) { + &::after { + border-color: var-get($_theme, 'error-color-hover'); + } + } + + @include e(label) { + color: var-get($_theme, 'label-color-hover'); + } + } + + &:active { + @include e(composite) { + &::after { + border-color: var-get($_theme, 'error-color-hover'); + } + } + } + } + + @include m(focused) { + @include e(composite) { + border-radius: border-radius(50%); + box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-outline-color'); + } + } + + @include mx(focused, checked) { + @include e(composite) { + box-shadow: 0 0 0 rem(3px) + var-get($_theme, 'focus-outline-color-filled'); + } + } + + @include mx(focused, invalid) { + @include e(composite) { + box-shadow: 0 0 0 rem(3px) + var-get($_theme, 'focus-outline-color-error'); + } + } + + @include m(disabled) { + @include e(label) { + color: var-get($_theme, 'disabled-label-color'); + } + + @include e(label, $m: before) { + color: var-get($_theme, 'disabled-label-color'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/radio/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/radio/themes/shared/_material.scss new file mode 100644 index 00000000000..3b202098c9c --- /dev/null +++ b/projects/igniteui-angular/src/lib/radio/themes/shared/_material.scss @@ -0,0 +1,45 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-radio, material) { + --size: #{rem(40px)}; + --label-margin: #{rem(2px)}; + --scale: scale(0.5); + --border-width: #{rem(2px)}; + --horizontal-group-margin: #{rem(16px)}; + --vertical-group-margin: 0; + + @include e(composite) { + &::before, + &::after { + width: calc(var(--size) / 2); + height: calc(var(--size) / 2); + top: 25%; + inset-inline-start: 25%; + } + } + + @include e(ripple) { + display: block; + } + + @include e(label) { + @include type-style(subtitle-1) { + margin-block: 0; + } + } + + @include m(invalid) { + &:hover, + &:active { + @include e(composite) { + border-color: var-get($_theme, 'error-color'); + } + } + } +} From cd5a9207d0a34fcdf810d42b094b2de5d40e0898 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 10 Feb 2025 15:09:03 +0200 Subject: [PATCH 034/131] refactor(themes): prefix layers with ig to avoid collisions --- .../src/lib/core/styles/themes/_standalone.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss index b9f3a9cc84a..f4d40d6550b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss @@ -21,7 +21,7 @@ @mixin themed-block($component, $theme, $variant: null) { $_theme: "" + $theme; - @include layer($_theme) { + @layer ig.#{$_theme} { @if $variant { @container style(--theme: #{$_theme}) and style(--ig-theme-variant: #{$variant}) { @include b($component) { From f58e23f9657c513d19e1e3d4efe3a2416573cc4a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 10 Feb 2025 18:55:07 +0200 Subject: [PATCH 035/131] refactor(checkbox): prevent FOUC --- projects/igniteui-angular/src/lib/checkbox/themes/_base.scss | 3 +++ .../src/lib/checkbox/themes/shared/_indigo.scss | 1 + 2 files changed, 4 insertions(+) diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss index ada294356a6..c64968645ac 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -87,6 +87,7 @@ $_theme: $material; align-items: center; outline-style: none; cursor: pointer; + animation: enable-transitions 0s 0.1s forwards; &:hover { @include e(ripple) { @@ -143,6 +144,7 @@ $_theme: $material; transition: border-color 0.2s $ease-out-quad, background 0.2s $ease-out-quad; + transition-delay: var(--_transition-delay); overflow: hidden; } @@ -328,6 +330,7 @@ $_theme: $material; transition: all 0.2s $ease-out-quad, opacity 0.2s $ease-out-quad; + transition-delay: var(--_transition-delay); } @include e(composite-wrapper) { diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss index 80c03d279a8..da09737dbb3 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss @@ -34,6 +34,7 @@ $_theme: $indigo; @include e(label) { @include type-style(body-2); transition: color 0.2s $ease-out-quad; + transition-delay: var(--_transition-delay); &:hover { color: var-get($_theme, 'label-color-hover'); From fb594b2c3b740e9894ccae33946bc041a9505904 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 10 Feb 2025 19:06:31 +0200 Subject: [PATCH 036/131] refactor(core): add CSS property and animation to help with FOUC --- .../src/lib/core/styles/themes/_core.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss index 5a8d5a8d420..5b4ee3f8923 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss @@ -112,6 +112,12 @@ } } + @property --_transition-delay { + syntax: '
+
From d4e2396a530ffb5c57c129a4a793eb0be827088c Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 12 Mar 2025 08:50:07 +0200 Subject: [PATCH 049/131] refactor(banner): bundle styles with component (#15467) --- .../src/lib/banner/banner.component.scss | 4 + .../src/lib/banner/banner.component.ts | 5 +- .../src/lib/banner/themes/_base.scss | 92 +++++++++++++++++++ .../src/lib/banner/themes/dark/_index.scss | 6 ++ .../src/lib/banner/themes/dark/_tokens.scss | 7 ++ .../src/lib/banner/themes/light/_index.scss | 6 ++ .../src/lib/banner/themes/light/_tokens.scss | 8 ++ .../src/lib/banner/themes/shared/_fluent.scss | 11 +++ .../src/lib/banner/themes/shared/_index.scss | 2 + .../src/lib/banner/themes/shared/_indigo.scss | 23 +++++ .../core/styles/themes/generators/_base.scss | 14 +-- .../core/styles/typography/_bootstrap.scss | 2 +- .../lib/core/styles/typography/_fluent.scss | 6 +- .../lib/core/styles/typography/_indigo.scss | 2 +- .../lib/core/styles/typography/_material.scss | 2 +- 15 files changed, 176 insertions(+), 14 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/banner/banner.component.scss create mode 100644 projects/igniteui-angular/src/lib/banner/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/banner/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/banner/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/banner/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/banner/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/banner/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/banner/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/banner/themes/shared/_indigo.scss diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.scss b/projects/igniteui-angular/src/lib/banner/banner.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/banner.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.ts b/projects/igniteui-angular/src/lib/banner/banner.component.ts index b6055d350a1..7c042831917 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.component.ts @@ -6,7 +6,8 @@ import { HostBinding, Input, Output, - ViewChild + ViewChild, + ViewEncapsulation } from '@angular/core'; import { IgxIconComponent } from '../icon/icon.component'; @@ -48,6 +49,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA @Component({ selector: 'igx-banner', templateUrl: 'banner.component.html', + styleUrl: 'banner.component.css', + encapsulation: ViewEncapsulation.None, imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective] }) export class IgxBannerComponent implements IToggleView { diff --git a/projects/igniteui-angular/src/lib/banner/themes/_base.scss b/projects/igniteui-angular/src/lib/banner/themes/_base.scss new file mode 100644 index 00000000000..86976dfc1a6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/themes/_base.scss @@ -0,0 +1,92 @@ +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; + +$theme: $material; + +@include layer(base) { + %actions { + display: flex; + flex-wrap: wrap; + align-self: flex-end; + gap: rem(8px); + + > a { + display: inline-flex; + align-items: center; + } + } + + %flex-center-block { + display: flex; + align-items: center; + } + + @include b(igx-banner-host) { + igx-expansion-panel-body { + padding: 0 !important; + } + } + + @include b(igx-banner) { + @include sizable(); + --component-size: var(--ig-size, var(--ig-size-large)); + + display: flex; + justify-content: flex-end; + flex-wrap: wrap; + gap: rem(8px); + padding: rem(16px) rem(8px); + min-width: rem(320px); + background: var-get($theme, 'banner-background'); + box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'banner-border-color'); + border-radius: var-get($theme, 'border-radius'); + + igc-icon, + igx-icon, + igc-button, + [igxButton] { + --component-size: var(--ig-size, var(--ig-size-large)); + } + + @include e(message) { + @extend %flex-center-block; + + min-width: rem(150px); + flex: 1 0 0%; + gap: rem(16px); + padding: 0 rem(8px); + } + + @include e(illustration) { + @extend %flex-center-block; + + justify-content: center; + color: var-get($theme, 'banner-illustration-color'); + } + + @include e(text) { + @include type-style(body-2) { + margin-block: 0; + } + + color: var-get($theme, 'banner-message-color'); + flex: 1 0 0%; + + > *:not(hr) { + margin-block-start: 0 !important; + } + } + + @include e(actions) { + @extend %actions; + + > igx-banner-actions { + @extend %actions; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/banner/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/banner/themes/dark/_index.scss new file mode 100644 index 00000000000..77734d2b4da --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-banner, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/banner/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/banner/themes/dark/_tokens.scss new file mode 100644 index 00000000000..4115c0999b3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/banner' as *; + +$material: digest-schema($dark-material-banner); +$bootstrap: digest-schema($dark-bootstrap-banner); +$fluent: digest-schema($dark-fluent-banner); +$indigo: digest-schema($dark-indigo-banner); diff --git a/projects/igniteui-angular/src/lib/banner/themes/light/_index.scss b/projects/igniteui-angular/src/lib/banner/themes/light/_index.scss new file mode 100644 index 00000000000..bc1fd21cac9 --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-banner, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/banner/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/banner/themes/light/_tokens.scss new file mode 100644 index 00000000000..b11d036a277 --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/banner' as *; + +$base: digest-schema($light-banner); +$material: digest-schema($material-banner); +$bootstrap: digest-schema($bootstrap-banner); +$fluent: digest-schema($fluent-banner); +$indigo: digest-schema($indigo-banner); diff --git a/projects/igniteui-angular/src/lib/banner/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/banner/themes/shared/_fluent.scss new file mode 100644 index 00000000000..c8e8a5a8ea2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/themes/shared/_fluent.scss @@ -0,0 +1,11 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-banner, fluent) { + @include e(text) { + @include type-style(caption) { + margin-block: 0; + } + } +} diff --git a/projects/igniteui-angular/src/lib/banner/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/banner/themes/shared/_index.scss new file mode 100644 index 00000000000..c0b99f867cc --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/themes/shared/_index.scss @@ -0,0 +1,2 @@ +@forward 'indigo'; +@forward 'fluent'; diff --git a/projects/igniteui-angular/src/lib/banner/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/banner/themes/shared/_indigo.scss new file mode 100644 index 00000000000..82c6f94d409 --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/themes/shared/_indigo.scss @@ -0,0 +1,23 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$theme: $indigo; + +@include themed-block(igx-banner, indigo) { + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color'); + padding: rem(16px); + + igc-icon, + igx-icon, + igc-button, + [igxButton] { + --component-size: var(--ig-size, var(--ig-size-medium)); + } + + @include e(message) { + gap: rem(8px); + padding: initial; + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index a7ae64159e7..0d279f562d8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -184,13 +184,13 @@ @include button-group($button-group-theme-map); } - @if is-used('igx-banner', $exclude) { - $banner-theme-map: banner-theme( - $schema: $schema, - ); - $banner-theme-map: meta.call($theme-handler, $banner-theme-map); - @include banner($banner-theme-map); - } + // @if is-used('igx-banner', $exclude) { + // $banner-theme-map: banner-theme( + // $schema: $schema, + // ); + // $banner-theme-map: meta.call($theme-handler, $banner-theme-map); + // @include banner($banner-theme-map); + // } @if is-used('igx-calendar', $exclude) { $calendar-theme-map: calendar-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index b90f24283a9..32f5e0f7d18 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -36,7 +36,7 @@ @mixin typography($type-scale) { @include badge-typography(); - @include banner-typography(); + // @include banner-typography(); @include bottom-nav-typography(); @include button-typography(); @include button-group-typography(); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index c5cff3ac778..0c05d574390 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -35,9 +35,9 @@ @mixin typography() { @include badge-typography(); - @include banner-typography($categories: ( - message: 'caption' - )); + // @include banner-typography($categories: ( + // message: 'caption' + // )); @include bottom-nav-typography(); @include button-typography(); @include button-group-typography(); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index f3a0b819b4b..48e08129570 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -37,7 +37,7 @@ @include badge-typography($categories: ( text: 'button', )); - @include banner-typography(); + // @include banner-typography(); @include bottom-nav-typography(); @include button-typography(); @include button-group-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 28a8f1630ce..b9edc167108 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -35,7 +35,7 @@ @mixin typography() { @include badge-typography(); - @include banner-typography(); + // @include banner-typography(); @include bottom-nav-typography(); @include button-typography(); @include button-group-typography(); From 2394308d55ea397840980bc7374c2ef09bfbeb39 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 18 Mar 2025 10:32:55 +0200 Subject: [PATCH 050/131] refactor(bottom-nav): bundle styles with component (#15520) --- .../core/styles/themes/generators/_base.scss | 14 +- .../core/styles/typography/_bootstrap.scss | 2 +- .../lib/core/styles/typography/_fluent.scss | 2 +- .../lib/core/styles/typography/_indigo.scss | 2 +- .../lib/core/styles/typography/_material.scss | 2 +- .../bottom-nav-content.component.ts | 3 +- .../bottom-nav/bottom-nav-header.component.ts | 7 +- .../bottom-nav/bottom-nav-item.component.ts | 3 +- .../tabs/bottom-nav/bottom-nav.component.scss | 4 + .../tabs/bottom-nav/bottom-nav.component.ts | 9 +- .../src/lib/tabs/bottom-nav/themes/_base.scss | 132 ++++++++++++++++++ .../tabs/bottom-nav/themes/dark/_index.scss | 6 + .../tabs/bottom-nav/themes/dark/_tokens.scss | 7 + .../tabs/bottom-nav/themes/light/_index.scss | 6 + .../tabs/bottom-nav/themes/light/_tokens.scss | 8 ++ .../tabs/bottom-nav/themes/shared/_index.scss | 1 + .../bottom-nav/themes/shared/_indigo.scss | 26 ++++ 17 files changed, 216 insertions(+), 18 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/shared/_indigo.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 0d279f562d8..d1c9248f9c4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -160,13 +160,13 @@ // @include badge($badge-theme-map); // } - @if is-used('igx-bottom-nav', $exclude) { - $bottom-nav-theme-map: bottom-nav-theme( - $schema: $schema, - ); - $bottom-nav-theme-map: meta.call($theme-handler, $bottom-nav-theme-map); - @include bottom-nav($bottom-nav-theme-map); - } + // @if is-used('igx-bottom-nav', $exclude) { + // $bottom-nav-theme-map: bottom-nav-theme( + // $schema: $schema, + // ); + // $bottom-nav-theme-map: meta.call($theme-handler, $bottom-nav-theme-map); + // @include bottom-nav($bottom-nav-theme-map); + // } @if is-used('igx-button', $exclude) { $button-theme-map: button-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 32f5e0f7d18..6161a3af5d2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -37,7 +37,7 @@ @mixin typography($type-scale) { @include badge-typography(); // @include banner-typography(); - @include bottom-nav-typography(); + // @include bottom-nav-typography(); @include button-typography(); @include button-group-typography(); @include calendar-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index 0c05d574390..d57768ed405 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -38,7 +38,7 @@ // @include banner-typography($categories: ( // message: 'caption' // )); - @include bottom-nav-typography(); + // @include bottom-nav-typography(); @include button-typography(); @include button-group-typography(); @include calendar-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 48e08129570..5cfde9597fa 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -38,7 +38,7 @@ text: 'button', )); // @include banner-typography(); - @include bottom-nav-typography(); + // @include bottom-nav-typography(); @include button-typography(); @include button-group-typography($categories: ( text: 'body-2', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index b9edc167108..8672f1eff37 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -36,7 +36,7 @@ @mixin typography() { @include badge-typography(); // @include banner-typography(); - @include bottom-nav-typography(); + // @include bottom-nav-typography(); @include button-typography(); @include button-group-typography(); @include calendar-typography(); diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-content.component.ts b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-content.component.ts index 3f6d5cd979d..3f4fa6126c8 100644 --- a/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-content.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-content.component.ts @@ -1,10 +1,11 @@ -import { Component, HostBinding } from '@angular/core'; +import { Component, HostBinding, ViewEncapsulation } from '@angular/core'; import { IgxTabContentDirective } from '../tab-content.directive'; import { IgxTabContentBase } from '../tabs.base'; @Component({ selector: 'igx-bottom-nav-content', templateUrl: 'bottom-nav-content.component.html', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }], imports: [] }) diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-header.component.ts b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-header.component.ts index eacda00c52f..47c9c23da1c 100644 --- a/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-header.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-header.component.ts @@ -1,10 +1,11 @@ -import { Component, HostBinding } from '@angular/core'; +import { Component, HostBinding, ViewEncapsulation } from '@angular/core'; import { IgxTabHeaderDirective } from '../tab-header.directive'; import { IgxTabHeaderBase } from '../tabs.base'; @Component({ selector: 'igx-bottom-nav-header', templateUrl: 'bottom-nav-header.component.html', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }], standalone: true }) @@ -24,7 +25,5 @@ export class IgxBottomNavHeaderComponent extends IgxTabHeaderDirective { /** @hidden */ @HostBinding('class.igx-bottom-nav__menu-item') - public get cssClass(): boolean { - return (!this.tab.disabled && !this.tab.selected); - } + public readonly cssClass = 'igx-bottom-nav__menu-item'; } diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-item.component.ts b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-item.component.ts index 1d1e3fafd01..45a4c3abb69 100644 --- a/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-item.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-item.component.ts @@ -1,9 +1,10 @@ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { IgxTabItemDirective } from '../tab-item.directive'; @Component({ selector: 'igx-bottom-nav-item', templateUrl: 'bottom-nav-item.component.html', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }], standalone: true }) diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.scss b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.ts b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.ts index 32f6c4373bd..a6922cd1938 100644 --- a/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, HostBinding, ViewEncapsulation } from '@angular/core'; import { IgxTabsBase } from '../tabs.base'; import { IgxTabsDirective } from '../tabs.directive'; import { NgTemplateOutlet } from '@angular/common'; @@ -41,15 +41,22 @@ let NEXT_BOTTOM_NAV_ITEM_ID = 0; @Component({ selector: 'igx-bottom-nav', templateUrl: 'bottom-nav.component.html', + styleUrl: 'bottom-nav.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }], imports: [NgTemplateOutlet] }) export class IgxBottomNavComponent extends IgxTabsDirective { /** @hidden */ public override disableAnimation = true; + /** @hidden */ protected override componentName = 'igx-bottom-nav'; + /** @hidden @internal */ + @HostBinding('class.igx-bottom-nav') + public readonly hostClass = 'igx-bottom-nav'; + /** @hidden */ protected getNextTabId() { return NEXT_BOTTOM_NAV_ITEM_ID++; diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/_base.scss b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/_base.scss new file mode 100644 index 00000000000..7785c810a31 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/_base.scss @@ -0,0 +1,132 @@ +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; + +$theme: $material; + +@include layer(base) { + @include b(igx-bottom-nav) { + @include e(panel) { + display: block; + + &:focus { + outline-style: none; + } + + &:empty { + display: none; + } + } + + @include e(menu) { + display: flex; + position: fixed; + justify-content: center; + align-items: center; + inset-inline-start: 0; + inset-inline-end: 0; + height: rem(56px); + background: var-get($theme, 'background'); + border-top: rem(1px) solid var-get($theme, 'border-color'); + overflow: hidden; + z-index: 8; + } + + @include e(menu, $m: top) { + inset-block-start: 0; + inset-block-end: inherit; + box-shadow: var-get($theme, 'elevation'); + } + + @include e(menu, $m: bottom) { + inset-block-start: inherit; + inset-block-end: 0; + box-shadow: var-get($theme, 'elevation'); + } + + @include e(menu-item) { + display: flex; + position: relative; + flex-flow: column nowrap; + flex: 1; + gap: rem(4px); + align-items: center; + justify-content: center; + min-width: rem(80px); + max-width: rem(168px); + height: 100%; + cursor: pointer; + user-select: none; + overflow: hidden; + padding: 0 rem(12px, 16px); + -webkit-tap-highlight-color: transparent; + outline-style: none; + color: var-get($theme, 'label-color'); + + igx-icon { + --component-size: 3; + } + + [igxBottomNavHeaderIcon] { + display: flex; + position: relative; + justify-content: center; + color: var-get($theme, 'icon-color'); + padding: 0 rem(8px); + height: rem(24px); + transform: translateZ(0); + transition: transform 0.15s $ease-in-out-quad; + z-index: 1; + } + + [igxBottomNavHeaderLabel] { + @include type-style(caption) { + margin: 0; + } + + @include ellipsis(); + + color: var-get($theme, 'label-color'); + max-width: 100%; + text-align: center; + transform: translateZ(0); + transition: transform 0.15s $ease-in-out-quad; + z-index: 1; + } + } + + @include e(menu-item, $m: selected) { + transition: + color 0.15s $ease-in-out-quad, + opacity 0.25s $ease-in-out-quad; + + [igxBottomNavHeaderIcon] { + color: var-get($theme, 'icon-selected-color'); + inset-block-start: rem(-2px); + transform: translateY(-2px); + } + + [igxBottomNavHeaderLabel] { + color: var-get($theme, 'label-selected-color'); + transform: translateY(-2px) scale(1.166667); + } + } + + @include e(menu-item, $m: disabled) { + cursor: default; + pointer-events: none; + opacity: 0.5; + + [igxBottomNavHeaderIcon] { + color: var-get($theme, 'icon-disabled-color'); + } + + [igxBottomNavHeaderLabel] { + color: var-get($theme, 'label-disabled-color'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/dark/_index.scss new file mode 100644 index 00000000000..3d008e60802 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-bottom-nav, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/dark/_tokens.scss new file mode 100644 index 00000000000..dd092c3bb75 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/bottom-nav' as *; + +$material: digest-schema($dark-material-bottom-nav); +$bootstrap: digest-schema($dark-bootstrap-bottom-nav); +$fluent: digest-schema($dark-fluent-bottom-nav); +$indigo: digest-schema($dark-indigo-bottom-nav); diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/light/_index.scss b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/light/_index.scss new file mode 100644 index 00000000000..da394dea2be --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-bottom-nav, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/light/_tokens.scss new file mode 100644 index 00000000000..a6c88b0bbe6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/bottom-nav' as *; + +$base: digest-schema($light-bottom-nav); +$material: digest-schema($material-bottom-nav); +$bootstrap: digest-schema($bootstrap-bottom-nav); +$fluent: digest-schema($fluent-bottom-nav); +$indigo: digest-schema($indigo-bottom-nav); diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/shared/_index.scss new file mode 100644 index 00000000000..ca3dd3bc266 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/shared/_index.scss @@ -0,0 +1 @@ +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/shared/_indigo.scss new file mode 100644 index 00000000000..8994664f911 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/bottom-nav/themes/shared/_indigo.scss @@ -0,0 +1,26 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-bottom-nav, indigo) { + @include e(menu-item) { + igx-icon { + --size: #{rem(16px)}; + } + + [igxBottomNavHeaderIcon], + [igxBottomNavHeaderLabel] { + transform: unset; + transition: none; + } + + [igxBottomNavHeaderIcon] { + padding: unset; + height: auto; + } + } + + @include e(menu-item, $m: disabled) { + opacity: unset; + } +} From 3370322bc5f6194d83456d917df3fdfa68533011 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 18 Mar 2025 10:49:05 +0200 Subject: [PATCH 051/131] refactor(splitter): bundle styles with component (#15514) --- .../core/styles/themes/generators/_base.scss | 14 +- .../lib/splitter/splitter-bar.component.html | 20 +- .../src/lib/splitter/splitter.component.scss | 4 + .../lib/splitter/splitter.component.spec.ts | 2 +- .../src/lib/splitter/splitter.component.ts | 4 +- .../src/lib/splitter/themes/_base.scss | 203 ++++++++++++++++++ .../src/lib/splitter/themes/dark/_index.scss | 6 + .../src/lib/splitter/themes/dark/_tokens.scss | 7 + .../src/lib/splitter/themes/light/_index.scss | 6 + .../lib/splitter/themes/light/_tokens.scss | 8 + .../lib/splitter/themes/shared/_index.scss | 1 + .../lib/splitter/themes/shared/indigo.scss | 94 ++++++++ 12 files changed, 357 insertions(+), 12 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/splitter/splitter.component.scss create mode 100644 projects/igniteui-angular/src/lib/splitter/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/splitter/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/splitter/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/splitter/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/splitter/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/splitter/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/splitter/themes/shared/indigo.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index d1c9248f9c4..c08cb6717be 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -216,13 +216,13 @@ @include carousel($carousel-theme-map); } - @if is-used('igx-splitter', $exclude) { - $splitter-theme-map: splitter-theme( - $schema: $schema, - ); - $splitter-theme-map: meta.call($theme-handler, $splitter-theme-map); - @include splitter($splitter-theme-map); - } + // @if is-used('igx-splitter', $exclude) { + // $splitter-theme-map: splitter-theme( + // $schema: $schema, + // ); + // $splitter-theme-map: meta.call($theme-handler, $splitter-theme-map); + // @include splitter($splitter-theme-map); + // } @if is-used('data-chart', $exclude) { $data-chart-theme-map: data-chart-theme( diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html index e9acd565283..e8922980b1d 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html +++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html @@ -1,4 +1,5 @@
-
-
-
+
+
+
+
+
+
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.scss b/projects/igniteui-angular/src/lib/splitter/splitter.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts index 07e6dabb7b5..eafeccf54f3 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts @@ -21,7 +21,7 @@ describe('IgxSplitter', () => { }).compileComponents())); let fixture: ComponentFixture; let splitter: IgxSplitterComponent; - + beforeEach(waitForAsync(() => { fixture = TestBed.createComponent(SplitterTestComponent); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts index ca1f7f15878..536697772cb 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts @@ -1,5 +1,5 @@ import { DOCUMENT } from '@angular/common'; -import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Output, QueryList, booleanAttribute, forwardRef } from '@angular/core'; +import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Output, QueryList, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core'; import { DragDirection, IDragMoveEventArgs, IDragStartEventArgs, IgxDragDirective, IgxDragIgnoreDirective } from '../directives/drag-drop/drag-drop.directive'; import { IgxSplitterPaneComponent } from './splitter-pane/splitter-pane.component'; @@ -45,6 +45,8 @@ export declare interface ISplitterBarResizeEventArgs { @Component({ selector: 'igx-splitter', templateUrl: './splitter.component.html', + styleUrl: 'splitter.component.css', + encapsulation: ViewEncapsulation.None, imports: [forwardRef(() => IgxSplitBarComponent)] }) export class IgxSplitterComponent implements AfterContentInit { diff --git a/projects/igniteui-angular/src/lib/splitter/themes/_base.scss b/projects/igniteui-angular/src/lib/splitter/themes/_base.scss new file mode 100644 index 00000000000..fa900505662 --- /dev/null +++ b/projects/igniteui-angular/src/lib/splitter/themes/_base.scss @@ -0,0 +1,203 @@ +/* stylelint-disable max-nesting-depth */ +@use 'sass:map'; +@use 'sass:string'; +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/utils' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; + +$theme: $base; + +@include layer(base) { + $splitter-color: var-get($theme, 'bar-color'); + $hitbox-size: rem(4px); + $debug-hitbox: false; + $hitbox-debug-color: rgba(coral, 0.24); + + @include b(igx-splitter) { + //splitter-size + borders + --splitter-size: #{unitless(map.get($theme, 'size')) + 2}; + + &[aria-orientation='horizontal'] { + [dir='rtl'] & { + flex-direction: row-reverse !important; + } + } + } + + @include b(igx-splitter-bar-host) { + &:focus { + outline: transparent solid rem(1px); + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'focus-color'); + } + } + + @include b(igx-splitter-bar) { + position: relative; + display: flex; + flex-grow: 1; + justify-content: center; + align-items: center; + background: $splitter-color; + border: rem(1px) solid $splitter-color; + z-index: 99; + opacity: 0.68; + transition: opacity 0.15s $ease-out-quad !important; + + &::before, + &::after { + position: absolute; + content: ''; + width: 100%; + height: $hitbox-size; + background: if($debug-hitbox, $hitbox-debug-color, transparent); + } + + &::before { + top: 100%; + } + + &::after { + bottom: 100%; + } + + &:hover { + transition: all 0.25s ease-out; + opacity: 1; + } + + @include e(handle) { + background: var-get($theme, 'handle-color'); + border-radius: var-get($theme, 'border-radius'); + opacity: 0; + transition: opacity 0.25s 0.5s ease; + pointer-events: none; + } + + @include e(handle, $m: horizontal) { + width: 25%; + height: var-get($theme, 'size'); + margin: 0 rem(48px); + } + + @include e(handle, $m: vertical) { + width: var-get($theme, 'size'); + height: 25%; + margin: rem(48px) 0; + } + + @include e(expander) { + position: relative; + width: 0; + height: 0; + border-inline-end: var-get($theme, 'size') solid transparent; + border-inline-start: var-get($theme, 'size') solid transparent; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s 0.5s ease; + pointer-events: none; + z-index: 1; + + &::before { + position: absolute; + content: ''; + background: if($debug-hitbox, $hitbox-debug-color, transparent); + } + } + + @include e(expander, $m: 'start') { + border-bottom: var-get($theme, 'size') solid + var-get($theme, 'expander-color'); + + &::before { + top: calc(100% - #{map.get($theme, 'size')}); + left: calc(100% - (#{map.get($theme, 'size')} * 2)); + width: calc(#{map.get($theme, 'size')} * 4); + height: calc(#{map.get($theme, 'size')} * 3); + } + } + + @include e(expander, $m: 'end') { + border-bottom: unset; + border-top: var-get($theme, 'size') solid + var-get($theme, 'expander-color'); + + &::before { + top: calc(100% - (#{map.get($theme, 'size')} * 2)); + left: calc(100% - (#{map.get($theme, 'size')} * 2)); + width: calc(#{map.get($theme, 'size')} * 4); + height: calc(#{map.get($theme, 'size')} * 3); + } + } + + @include m(collapsible) { + transition: all 0.25s $ease-in-out-quad !important; + transition-delay: 0s !important; + + @include e(handle) { + opacity: 1; + transition: opacity 0.25s ease; + pointer-events: auto; + } + + @include e(expander) { + opacity: 1; + transition: opacity 0.25s ease; + pointer-events: auto; + } + } + + @include m(vertical) { + flex-direction: column; + height: 100%; + + &::before, + &::after { + width: $hitbox-size; + height: 100%; + top: 0; + } + + &::before { + right: 100%; + } + + &::after { + left: 100%; + } + + @include e(expander, $m: 'start') { + border-top: var-get($theme, 'size') solid transparent; + border-inline-end: var-get($theme, 'size') solid + var-get($theme, 'expander-color'); + border-bottom: var-get($theme, 'size') solid transparent; + border-inline-start: unset; + + &::before { + top: calc(100% - (#{map.get($theme, 'size')} * 2)); + left: calc(100% - (#{map.get($theme, 'size')})); + width: calc(#{map.get($theme, 'size')} * 3); + height: calc(#{map.get($theme, 'size')} * 4); + } + } + + @include e(expander, $m: 'end') { + border-top: var-get($theme, 'size') solid transparent; + border-inline-end: unset; + border-bottom: var-get($theme, 'size') solid transparent; + border-inline-start: var-get($theme, 'size') solid + var-get($theme, 'expander-color'); + + &::before { + top: calc(100% - (#{map.get($theme, 'size')} * 2)); + left: calc(100% - (#{map.get($theme, 'size')} * 2)); + height: calc(#{map.get($theme, 'size')} * 4); + width: calc(#{map.get($theme, 'size')} * 3); + } + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/splitter/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/splitter/themes/dark/_index.scss new file mode 100644 index 00000000000..7a1b31cb68e --- /dev/null +++ b/projects/igniteui-angular/src/lib/splitter/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-splitter, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/splitter/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/splitter/themes/dark/_tokens.scss new file mode 100644 index 00000000000..34b435d830d --- /dev/null +++ b/projects/igniteui-angular/src/lib/splitter/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/splitter' as *; + +$material: digest-schema($dark-material-splitter); +$bootstrap: digest-schema($dark-bootstrap-splitter); +$fluent: digest-schema($dark-fluent-splitter); +$indigo: digest-schema($dark-indigo-splitter); diff --git a/projects/igniteui-angular/src/lib/splitter/themes/light/_index.scss b/projects/igniteui-angular/src/lib/splitter/themes/light/_index.scss new file mode 100644 index 00000000000..0cfddf820dd --- /dev/null +++ b/projects/igniteui-angular/src/lib/splitter/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-splitter, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/splitter/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/splitter/themes/light/_tokens.scss new file mode 100644 index 00000000000..3ae0ad22e93 --- /dev/null +++ b/projects/igniteui-angular/src/lib/splitter/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/splitter' as *; + +$base: digest-schema($light-splitter); +$material: digest-schema($material-splitter); +$bootstrap: digest-schema($bootstrap-splitter); +$fluent: digest-schema($fluent-splitter); +$indigo: digest-schema($indigo-splitter); diff --git a/projects/igniteui-angular/src/lib/splitter/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/splitter/themes/shared/_index.scss new file mode 100644 index 00000000000..ca3dd3bc266 --- /dev/null +++ b/projects/igniteui-angular/src/lib/splitter/themes/shared/_index.scss @@ -0,0 +1 @@ +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/splitter/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/splitter/themes/shared/indigo.scss new file mode 100644 index 00000000000..02b211283c7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/splitter/themes/shared/indigo.scss @@ -0,0 +1,94 @@ +/* stylelint-disable max-nesting-depth */ +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$theme: $indigo; +$slim-splitter: calc(1 / var(--splitter-size)); + +@include themed-block(igx-splitter, indigo) { + @include b(igx-splitter-bar-host) { + &:focus { + box-shadow: none; + + .igx-splitter-bar { + opacity: 1; + background: var-get($theme, 'focus-color'); + border-color: var-get($theme, 'focus-color'); + } + + .igx-splitter-bar--collapsible { + [aria-orientation='horizontal'] & { + transform: scaleX(1); + } + + [aria-orientation='vertical'] & { + transform: scaleY(1); + } + + .igx-splitter-bar__handle, + .igx-splitter-bar__expander { + opacity: 1; + pointer-events: auto; + } + } + } + } + + @include b(igx-splitter-bar) { + [aria-orientation='horizontal'] & { + transform: scaleX($slim-splitter); + } + + [aria-orientation='vertical'] & { + transform: scaleY($slim-splitter); + } + + @include m(collapsible) { + @include e(handle) { + opacity: 0; + pointer-events: none; + } + + @include e(expander) { + opacity: 0; + pointer-events: none; + } + + &:hover { + [aria-orientation='horizontal'] & { + transform: scaleX(1); + } + + [aria-orientation='vertical'] & { + transform: scaleY(1); + } + + @include e(handle) { + opacity: 1; + pointer-events: auto; + } + + @include e(expander) { + opacity: 1; + pointer-events: auto; + } + } + } + + @include m(horizontal) { + &::before, + &::after { + height: calc(var(--splitter-size) * 4px); + } + } + + @include m(vertical) { + &::before, + &::after { + width: calc(var(--splitter-size) * 4px); + } + } + } +} From f17e8d42f7a6e89d05f854a2721be1212367a4b9 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 18 Mar 2025 10:50:37 +0200 Subject: [PATCH 052/131] refactor(expansion-panel): bundle styles with component (#15476) --- .../grid/_pivot-data-selector-theme.scss | 12 +- .../icon-button/_icon-button-theme.scss | 4 +- .../core/styles/themes/generators/_base.scss | 14 +- .../core/styles/typography/_bootstrap.scss | 10 +- .../lib/core/styles/typography/_fluent.scss | 10 +- .../lib/core/styles/typography/_indigo.scss | 10 +- .../lib/core/styles/typography/_material.scss | 2 +- .../expansion-panel-header.component.html | 5 +- .../expansion-panel.component.scss | 4 + .../expansion-panel.component.ts | 3 + .../expansion-panel/expansion-panel.spec.ts | 10 +- .../src/lib/expansion-panel/themes/_base.scss | 137 ++++++++++++++++++ .../expansion-panel/themes/dark/_index.scss | 6 + .../expansion-panel/themes/dark/_tokens.scss | 7 + .../expansion-panel/themes/light/_index.scss | 6 + .../expansion-panel/themes/light/_tokens.scss | 8 + .../expansion-panel/themes/shared/_index.scss | 4 + .../themes/shared/bootstrap.scss | 23 +++ .../expansion-panel/themes/shared/fluent.scss | 23 +++ .../expansion-panel/themes/shared/indigo.scss | 47 ++++++ .../themes/shared/material.scss | 23 +++ src/app/accordion/accordion.sample.scss | 2 +- 22 files changed, 330 insertions(+), 40 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/shared/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/shared/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/shared/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/themes/shared/material.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss index 2723371e9a9..3d78b9930dc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss @@ -112,7 +112,7 @@ } } - %igx-expansion-panel__body { + .igx-expansion-panel__body { position: relative; height: rem(128px); font-size: rem(14px); @@ -124,11 +124,11 @@ } } - %igx-expansion-panel__header-icon--start { + .igx-expansion-panel__header-icon--start { margin-inline-end: rem(8px); } - %igx-expansion-panel__header-title { + .igx-expansion-panel__header-title { display: flex; > h6 { @@ -137,7 +137,7 @@ } } - %igx-expansion-panel__header-inner { + .igx-expansion-panel__header-inner { background: var-get($theme, 'header-color'); padding: $panel-padding; @@ -235,9 +235,7 @@ %selector-base, %selector-item-ghost { igx-icon { - width: var(--igx-icon-size, #{rem(18px)}); - height: var(--igx-icon-size, #{rem(18px)}); - font-size: var(--igx-icon-size, #{rem(18px)}); + --size: var(--igx-icon-size, #{rem(18px)}); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss index 0b3f0ed4712..454ae4d21e6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss @@ -186,11 +186,9 @@ igx-icon { --component-size: var(--ig-size, var(--ig-size-large)); + --size: var(--igx-icon-size, #{$icon-in-button-size}); display: flex; justify-content: center; - width: var(--igx-icon-size, #{$icon-in-button-size}); - height: var(--igx-icon-size, #{$icon-in-button-size}); - font-size: var(--igx-icon-size, #{$icon-in-button-size}); } @if $variant == 'fluent' { diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index c08cb6717be..d4aceb3ab6f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -416,13 +416,13 @@ @include drop-down($drop-down-theme-map); } - @if is-used('igx-expansion-panel', $exclude) { - $expansion-panel-theme-map: expansion-panel-theme( - $schema: $schema, - ); - $expansion-panel-theme-map: meta.call($theme-handler, $expansion-panel-theme-map); - @include expansion-panel($expansion-panel-theme-map); - } + // @if is-used('igx-expansion-panel', $exclude) { + // $expansion-panel-theme-map: expansion-panel-theme( + // $schema: $schema, + // ); + // $expansion-panel-theme-map: meta.call($theme-handler, $expansion-panel-theme-map); + // @include expansion-panel($expansion-panel-theme-map); + // } @if is-used('igx-grid', $exclude) { $grid-theme-map: grid-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 6161a3af5d2..90806fa4082 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -69,11 +69,11 @@ item: 'body-2', select-item: 'body-2' )); - @include expansion-panel-typography($categories: ( - title: 'h5', - description: 'subtitle-2', - body: 'body-2' - )); + // @include expansion-panel-typography($categories: ( + // title: 'h5', + // description: 'subtitle-2', + // body: 'body-2' + // )); @include excel-filtering-typography(); @include icon-button-typography(); @include input-group-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index d57768ed405..22a8e532d0e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -72,11 +72,11 @@ item: 'body-2', select-item: 'body-2' )); - @include expansion-panel-typography($categories: ( - title: 'subtitle-1', - description: 'body-2', - body: 'caption' - )); + // @include expansion-panel-typography($categories: ( + // title: 'subtitle-1', + // description: 'body-2', + // body: 'caption' + // )); @include excel-filtering-typography(); @include icon-button-typography(); @include input-group-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 5cfde9597fa..7bcc111a7b6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -67,11 +67,11 @@ )); @include dock-manager-typography(); @include drop-down-typography(); - @include expansion-panel-typography($categories: ( - title: 'body-2', - body: 'body-2', - description: 'body-2', - )); + // @include expansion-panel-typography($categories: ( + // title: 'body-2', + // body: 'body-2', + // description: 'body-2', + // )); @include excel-filtering-typography(); @include icon-button-typography(); @include input-group-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 8672f1eff37..3ef12ef27ae 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -48,7 +48,7 @@ @include dialog-typography(); @include dock-manager-typography(); @include drop-down-typography(); - @include expansion-panel-typography(); + // @include expansion-panel-typography(); @include excel-filtering-typography(); @include icon-button-typography(); @include input-group-typography(); diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html index 685d574bce9..59bd44a61e8 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html @@ -5,7 +5,10 @@ -
+
@if (iconTemplate) { } diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.scss b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts index dbbf42b64ae..adc6f4c51df 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts @@ -9,6 +9,7 @@ import { Inject, Input, Output, + ViewEncapsulation, booleanAttribute } from '@angular/core'; import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; @@ -28,6 +29,8 @@ let NEXT_ID = 0; @Component({ selector: 'igx-expansion-panel', templateUrl: 'expansion-panel.component.html', + styleUrl: 'expansion-panel.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IGX_EXPANSION_PANEL_COMPONENT, useExisting: IgxExpansionPanelComponent }], imports: [] }) diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts index c743e019df5..9108c3db279 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts @@ -854,33 +854,33 @@ describe('igxExpansionPanel', () => { expect(header.iconPosition).toEqual('left'); expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER); - expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_START); + expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_START); expect(headerButton.children[1].getBoundingClientRect().left). toBeLessThan(headerButton.children[0].getBoundingClientRect().left); header.iconPosition = ExpansionPanelHeaderIconPosition.NONE; fixture.detectChanges(); expect(header.iconPosition).toEqual('none'); - expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_NONE); + expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_NONE); header.iconPosition = ExpansionPanelHeaderIconPosition.RIGHT; fixture.detectChanges(); expect(header.iconPosition).toEqual('right'); expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER); - expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_END); + expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_END); expect(headerButton.children[0].getBoundingClientRect().left). toBeLessThan(headerButton.children[1].getBoundingClientRect().left); header.iconPosition = ExpansionPanelHeaderIconPosition.NONE; fixture.detectChanges(); expect(header.iconPosition).toEqual('none'); - expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_NONE); + expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_NONE); header.iconPosition = ExpansionPanelHeaderIconPosition.LEFT; fixture.detectChanges(); expect(header.iconPosition).toEqual('left'); expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER); - expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_START); + expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_START); expect(headerButton.children[1].getBoundingClientRect().left). toBeLessThan(headerButton.children[0].getBoundingClientRect().left); }); diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/_base.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/_base.scss new file mode 100644 index 00000000000..61e213a2ba1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/_base.scss @@ -0,0 +1,137 @@ +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; + +$theme: $base; + +@include layer(base) { + $panel-padding: rem(16px) rem(24px); + + %ellipsis { + @include ellipsis(); + } + + @include b(igx-expansion-panel) { + display: flex; + flex-direction: column; + border-radius: var-get($theme, 'border-radius'); + overflow: hidden; + transition: margin 350ms $ease-out-quad; + + @include e(title-wrapper) { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1 0 0%; + overflow: hidden; + } + + @include e(header-inner) { + display: flex; + align-items: center; + padding: $panel-padding; + cursor: pointer; + background: var-get($theme, 'header-background'); + + &:focus, + &:active { + background: var-get($theme, 'header-focus-background'); + outline: transparent; + } + } + + @include e(header-title) { + @extend %ellipsis; + + color: var-get($theme, 'header-title-color'); + margin-inline-end: rem(16px, 16px); + } + + @include e(header-description) { + @extend %ellipsis; + + color: var-get($theme, 'header-description-color'); + } + + @include e(header-icon) { + display: flex; + align-content: center; + justify-content: center; + user-select: none; + + color: var-get($theme, 'header-icon-color'); + + igx-icon { + --component-size: 3; + color: var-get($theme, 'header-icon-color'); + } + } + + @include e(header-icon, $m: start) { + order: -1; + margin-inline-end: rem(16px, 16px); + } + + @include e(header-icon, $m: end) { + order: 1; + margin-inline-start: rem(16px, 16px); + } + + @include e(header-icon, $m: none) { + display: none; + } + + @include e(body) { + color: var-get($theme, 'body-color'); + background: var-get($theme, 'body-background'); + overflow: hidden; + padding: $panel-padding; + } + + @include m(disabled) { + pointer-events: none; + + @include e(header-title) { + color: var-get($theme, 'disabled-text-color'); + } + + @include e(header-description) { + color: var-get($theme, 'disabled-description-color'); + } + + @include e(header-icon) { + igx-icon { + color: var-get($theme, 'disabled-text-color'); + } + } + } + + @include m(expanded) { + margin: var-get($theme, 'expanded-margin') 0; + + &:first-of-type { + margin-top: 0; + } + + &:last-of-type { + margin-bottom: 0; + } + } + } + + @include b(igx-accordion) { + box-sizing: content-box; + overflow-y: auto; + + // WARN: This breaks BEM principles + .igx-expansion-panel__header-title { + @include line-clamp(4, true, true); + + white-space: initial; + word-wrap: break-word; + } + } +} diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_index.scss new file mode 100644 index 00000000000..39864e7d817 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-expansion-panel, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_tokens.scss new file mode 100644 index 00000000000..658ebed7082 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/expansion-panel' as *; + +$material: digest-schema($dark-material-expansion-panel); +$bootstrap: digest-schema($dark-bootstrap-expansion-panel); +$fluent: digest-schema($dark-fluent-expansion-panel); +$indigo: digest-schema($dark-indigo-expansion-panel); diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_index.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_index.scss new file mode 100644 index 00000000000..3ae515b11e0 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-expansion-panel, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_tokens.scss new file mode 100644 index 00000000000..8edf9400d6b --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/expansion-panel' as *; + +$base: digest-schema($light-expansion-panel); +$material: digest-schema($material-expansion-panel); +$bootstrap: digest-schema($bootstrap-expansion-panel); +$fluent: digest-schema($fluent-expansion-panel); +$indigo: digest-schema($indigo-expansion-panel); diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/_index.scss new file mode 100644 index 00000000000..ba66d4b4e48 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'indigo'; +@forward 'bootstrap'; +@forward 'fluent'; diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..1347faea319 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/bootstrap.scss @@ -0,0 +1,23 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-expansion-panel, bootstrap) { + @include e(header-title) { + @include type-style(h5) { + margin: 0; + } + } + + @include e(header-description) { + @include type-style(subtitle-2) { + margin: 0; + } + } + + @include e(body) { + @include type-style(body-2) { + margin: 0; + } + } +} diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/fluent.scss new file mode 100644 index 00000000000..daaba6e5b7e --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/fluent.scss @@ -0,0 +1,23 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-expansion-panel, fluent) { + @include e(header-title) { + @include type-style(subtitle-1) { + margin: 0; + } + } + + @include e(header-description) { + @include type-style(body-2) { + margin: 0; + } + } + + @include e(body) { + @include type-style(caption) { + margin: 0; + } + } +} diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/indigo.scss new file mode 100644 index 00000000000..5bb9bf6b902 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/indigo.scss @@ -0,0 +1,47 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-expansion-panel, indigo) { + @include e(header-inner) { + padding: rem(10px) rem(16px); + } + + @include e(header-icon) { + igx-icon { + --component-size: 2; + } + } + + @include e(header-icon, $m: start) { + margin-inline-end: rem(8px, 16px); + } + + @include e(header-icon, $m: end) { + margin-inline-start: rem(8px, 16px); + } + + @include e(body) { + padding: rem(4px) rem(16px) rem(16px); + } + + @include e(header-title) { + margin-block-end: rem(2px); + + @include type-style(body-2) { + margin: 0; + } + } + + @include e(header-description) { + @include type-style(body-2) { + margin: 0; + } + } + + @include e(body) { + @include type-style(body-2) { + margin: 0; + } + } +} diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/material.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/material.scss new file mode 100644 index 00000000000..3dd2adbeadb --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/material.scss @@ -0,0 +1,23 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-expansion-panel, material) { + @include e(header-title) { + @include type-style(h5) { + margin: 0; + } + } + + @include e(header-description) { + @include type-style(subtitle-2) { + margin: 0; + } + } + + @include e(body) { + @include type-style(body-2) { + margin: 0; + } + } +} diff --git a/src/app/accordion/accordion.sample.scss b/src/app/accordion/accordion.sample.scss index 88d2ded6e25..1b8b7de8bc7 100644 --- a/src/app/accordion/accordion.sample.scss +++ b/src/app/accordion/accordion.sample.scss @@ -1,3 +1,3 @@ -igx-accordion { +:host > igx-accordion { margin-bottom: 42px; } From f2dbca92d7492cb2eb6955c450119f2b3ac8820d Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 26 Mar 2025 10:51:40 +0200 Subject: [PATCH 053/131] refactor(typography): put typography vars in a layer --- .../src/lib/core/styles/typography/_typography.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss index 6f35ed94167..30f2b3d3a07 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss @@ -55,7 +55,9 @@ $_scope: if(is-root() or is-host(), '.ig-typography', '&'); #{$_scope} { - @include _component-typography($type-scale, $exclude); + @layer ig.typography { + @include _component-typography($type-scale, $exclude); + } } @if not(list.index($exclude, 'global')) { From cabf1c8aed3033735ce4637b7ff1dc23c2355426 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Thu, 27 Mar 2025 09:47:42 +0200 Subject: [PATCH 054/131] refactor(stepper): scope styles to component (#15503) --- .../core/styles/themes/generators/_base.scss | 14 +- .../core/styles/typography/_bootstrap.scss | 2 +- .../lib/core/styles/typography/_fluent.scss | 2 +- .../lib/core/styles/typography/_indigo.scss | 12 +- .../lib/core/styles/typography/_material.scss | 2 +- .../src/lib/stepper/step/step.component.html | 11 +- .../src/lib/stepper/step/step.component.scss | 2 + .../src/lib/stepper/step/step.component.ts | 59 +- .../src/lib/stepper/step/themes/_base.scss | 537 ++++++++++++++++++ .../stepper/step/themes/shared/_index.scss | 4 + .../stepper/step/themes/shared/bootstrap.scss | 179 ++++++ .../stepper/step/themes/shared/fluent.scss | 161 ++++++ .../stepper/step/themes/shared/indigo.scss | 168 ++++++ .../stepper/step/themes/shared/material.scss | 156 +++++ .../src/lib/stepper/stepper.common.ts | 2 - .../src/lib/stepper/stepper.component.scss | 4 + .../src/lib/stepper/stepper.component.spec.ts | 57 +- .../src/lib/stepper/stepper.component.ts | 4 +- .../src/lib/stepper/stepper.directive.ts | 26 +- .../src/lib/stepper/themes/_base.scss | 79 +++ .../src/lib/stepper/themes/dark/_index.scss | 6 + .../src/lib/stepper/themes/dark/_tokens.scss | 8 + .../src/lib/stepper/themes/light/_index.scss | 6 + .../src/lib/stepper/themes/light/_tokens.scss | 8 + .../src/lib/stepper/themes/shared/_index.scss | 4 + .../lib/stepper/themes/shared/bootstrap.scss | 10 + .../src/lib/stepper/themes/shared/fluent.scss | 7 + .../src/lib/stepper/themes/shared/indigo.scss | 7 + .../lib/stepper/themes/shared/material.scss | 7 + 29 files changed, 1464 insertions(+), 80 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/stepper/step/step.component.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/stepper.component.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index d4aceb3ab6f..5f4556bf4cd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -608,13 +608,13 @@ @include tabs($tabs-theme-map); } - @if is-used('igx-stepper', $exclude) { - $stepper-theme-map: stepper-theme( - $schema: $schema, - ); - $stepper-theme-map: meta.call($theme-handler, $stepper-theme-map); - @include stepper($stepper-theme-map); - } + //@if is-used('igx-stepper', $exclude) { + // $stepper-theme-map: stepper-theme( + // $schema: $schema, + // ); + // $stepper-theme-map: meta.call($theme-handler, $stepper-theme-map); + // @include stepper($stepper-theme-map); + //} // @if is-used('igx-toast', $exclude) { // $toast-theme-map: toast-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 90806fa4082..eda78883bd2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -107,7 +107,7 @@ header-hour: 'h4', selected-time: 'h4' )); - @include stepper-typography(); + //@include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); @include tree-typography(); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index 22a8e532d0e..ee850dc0e78 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -111,7 +111,7 @@ label: 'body-2' )); @include time-picker-typography(); - @include stepper-typography(); + //@include stepper-typography(); // @include toast-typography($categories: ( // text: 'caption' // )); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 7bcc111a7b6..993217e9b11 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -112,12 +112,12 @@ header-hour: 'h5', selected-time: 'h6' )); - @include stepper-typography($categories: ( - title: 'body-2', - subtitle: 'caption', - indicator: 'button', - body-content: 'body-2' - )); + //@include stepper-typography($categories: ( + // title: 'body-2', + // subtitle: 'caption', + // indicator: 'button', + // body-content: 'body-2' + //)); // @include toast-typography(); @include tooltip-typography($categories: ( tooltip-text: 'subtitle-2' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 3ef12ef27ae..2897b51767d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -62,7 +62,7 @@ @include switch-typography(); @include tabs-typography(); @include time-picker-typography(); - @include stepper-typography(); + //@include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); @include tree-typography(); diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.html b/projects/igniteui-angular/src/lib/stepper/step/step.component.html index 48dd55aed14..9703d5d731b 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.html +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.html @@ -23,22 +23,23 @@ -
+
@if (isIndicatorVisible) { -
+
} -
+
@if (!isHorizontal) { -
+
} diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.scss b/projects/igniteui-angular/src/lib/stepper/step/step.component.scss new file mode 100644 index 00000000000..b8f7e512fe8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.scss @@ -0,0 +1,2 @@ +@use 'themes/base'; +@use 'themes/shared'; diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts index dc439b3f026..a19cd3acc06 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts @@ -15,7 +15,8 @@ import { Output, Renderer2, TemplateRef, - ViewChild + ViewChild, + ViewEncapsulation } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Direction, IgxSlideComponentBase } from '../../carousel/carousel-base'; @@ -54,6 +55,8 @@ let NEXT_ID = 0; @Component({ selector: 'igx-step', templateUrl: 'step.component.html', + styleUrl: 'step.component.css', + encapsulation: ViewEncapsulation.None, providers: [ { provide: IGX_STEP_COMPONENT, useExisting: IgxStepComponent } ], @@ -121,7 +124,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, * ``` */ @Input({ transform: booleanAttribute }) - @HostBinding('class.igx-stepper__step--completed') + @HostBinding('class.igx-step--completed') public completed = false; /** @@ -215,11 +218,17 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, } /** @hidden @internal */ - @HostBinding('class.igx-stepper__step') + @HostBinding('class.igx-step') public cssClass = true; /** @hidden @internal */ - @HostBinding('class.igx-stepper__step--disabled') + @HostBinding('class.igx-step--vertical') + public get isVertical(): boolean { + return this.stepper.orientation === 'vertical'; + } + + /** @hidden @internal */ + @HostBinding('class.igx-step--disabled') public get generalDisabled(): boolean { return this.disabled || this.linearDisabled; } @@ -228,10 +237,35 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, @HostBinding('class') public get titlePositionTop(): string { if (this.stepper.stepType !== IgxStepType.Full) { - return 'igx-stepper__step--simple'; + return 'igx-step--simple'; } - return `igx-stepper__step--${this.titlePosition}`; + return `igx-step--${this.titlePosition}`; + } + + /** @hidden @internal */ + @HostBinding('class.igx-step--current') + public get isActive(): boolean { + return this.active; + } + + /** @hidden @internal */ + @HostBinding('class.igx-step--invalid') + public get isInvalid(): boolean { + return !this.isValid + && this.stepperService.visitedSteps.has(this) + && !this.active + && this.isAccessible; + } + + /** @hidden @internal */ + public get stepHeaderClasses(): { [key: string]: boolean } { + return { + 'igx-step-header--invalid': this.isInvalid, + 'igx-step-header--disabled': this.disabled || this.linearDisabled, + 'igx-step-header--current': this.active, + 'igx-step-header--completed': this.completed, + }; } /** @@ -317,6 +351,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, } /** @hidden @internal */ + @HostBinding('class.igx-step--horizontal') public get isHorizontal(): boolean { return this.stepper.orientation === IgxStepperOrientation.Horizontal; } @@ -360,17 +395,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, } } - /** @hidden @internal */ - public get stepHeaderClasses(): any { - return { - 'igx-stepper__step--optional': this.optional, - 'igx-stepper__step-header--current': this.active, - 'igx-stepper__step-header--invalid': !this.isValid - && this.stepperService.visitedSteps.has(this) && !this.active && this.isAccessible - }; - } - - /** @hidden @internal */ +/** @hidden @internal */ public get nativeElement(): HTMLElement { return this.element.nativeElement; } diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss new file mode 100644 index 00000000000..94282c576cc --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss @@ -0,0 +1,537 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../../themes/light/tokens' as *; + +$theme: $material; + +@include layer(base) { + @include b(igx-step) { + $this: bem--selector-to-string(&); + + display: flex; + position: relative; + flex-direction: column; + align-content: center; + justify-content: center; + + &:first-of-type { + @include e(header) { + &::before { + visibility: hidden; + } + } + } + + &:last-of-type { + @include e(header) { + &::after { + visibility: hidden; + } + } + + @include e(content-wrapper) { + &::before { + display: none; + } + } + } + + &:focus { + outline: none; + + @include e(title) { + color: var-get($theme, 'title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'subtitle-focus-color'); + } + + @include e(header) { + background: var-get($theme, 'step-focus-background'); + color: var-get($theme, 'title-focus-color'); + } + } + + @include m(current, $not: ('horizontal')) { + @include e(content-wrapper) { + padding: rem(16px); + } + } + + @include m(invalid) { + &:focus { + @include e(header) { + background: var-get($theme, 'invalid-step-focus-background'); + } + + @include e(title) { + color: var-get($theme, 'invalid-title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-focus-color'); + } + } + } + + @include m(current) { + &:focus { + @include e(header) { + background: var-get($theme, 'current-step-focus-background') !important; + } + + @include e(title) { + color: var-get($theme, 'current-title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'current-subtitle-focus-color'); + } + } + } + + @include e(title-wrapper) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + min-width: rem(32px); + + &:empty { + display: none; + } + + > * { + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + + @include e(content-wrapper) { + @include type-style(body-2) { + margin-block: 0; + }; + + position: relative; + + &::before { + content: ''; + position: absolute; + } + } + + @include m(completed) { + + #{$this} { + &::before { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + + #{elem($this, header)} { + /* stylelint-disable max-nesting-depth */ + &::before { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + /* stylelint-enable max-nesting-depth */ + } + } + + &:focus { + @include e(header) { + background: var-get($theme, 'complete-step-focus-background'); + } + + @include e(title) { + color: var-get($theme, 'complete-title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-focus-color'); + } + } + } + + @include m(simple) { + @include e(indicator) { + width: initial; + height: initial; + + div > igx-icon, + div > igx-avatar, + div > igx-circular-bar { + max-width: initial; + max-height: initial; + } + } + } + + @include m(horizontal) { + overflow: hidden; + flex-direction: row; + flex: 1; + + &::before { + content: ''; + width: auto; + flex: 1; + position: relative; + z-index: -1; + } + + &:first-of-type { + flex-grow: 0; + min-width: max-content; + + &::before { + display: none; + } + } + + @include e(title-wrapper) { + width: 100%; + } + + @include e(header) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &::before, + &::after { + content: ''; + position: absolute; + z-index: -1; + flex: 1; + min-width: rem(4px); + } + + &::before { + inset-inline-start: 0; + } + + &::after { + inset-inline-end: 0; + } + } + + @include e(content) { + flex-grow: 1; + + &:focus { + outline: none; + } + + &::before { + display: none; + } + } + } + + @include m(start) { + @include e(header) { + flex-direction: row; + align-items: center; + } + + @include e(title-wrapper) { + order: -1; + } + } + + @include mx(horizontal, start) { + &:first-of-type { + min-width: auto; + } + } + + @include mx(horizontal, end) { + &:first-of-type { + flex-grow: initial; + min-width: auto; + } + } + + @include m(end) { + @include e(header) { + flex-direction: row; + align-items: center; + } + } + + @include m(top) { + @include e(title-wrapper) { + order: -1; + } + } + + @include mx(horizontal, simple) { + text-align: center; + + @include e(header) { + align-self: center; + height: auto; + + &::before, + &::after { + display: none; + } + } + } + + @include mx(horizontal, ('not': 'simple')) { + @include e(header) { + min-width: rem(100px); + } + } + + @include mx(horizontal, top) { + @include e(header) { + flex-direction: column; + justify-content: flex-end; + } + + @include e(title-wrapper) { + text-align: center; + } + } + + @include mx(horizontal, bottom) { + @include e(header) { + flex-direction: column; + justify-content: flex-start; + } + + @include e(title-wrapper) { + text-align: center; + } + } + + @include mx(horizontal, start) { + @include e(title-wrapper) { + text-align: end; + } + + @include e(indicator) { + flex: 1 0 auto; + } + + @include e(header) { + &::before, + &::after { + display: none; + } + } + } + + @include mx(horizontal, end) { + @include e(indicator) { + flex: 1 0 auto; + } + + @include e(header) { + &::before, + &::after { + display: none; + } + } + } + + @include m(disabled) { + color: var-get($theme, 'disabled-title-color'); + pointer-events: none; + cursor: default; + + @include e(indicator) { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'disabled-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'disabled-subtitle-color'); + } + } + } + + @include b(igx-step-header) { + display: flex; + padding: rem(8px); + position: relative; + line-height: normal; + flex-direction: column; + align-items: flex-start; + gap: rem(8px); + cursor: pointer; + color: var-get($theme, 'title-color'); + background: var-get($theme, 'step-background'); + border-radius: var-get($theme, 'border-radius-step-header'); + overflow: hidden; + + @include e(indicator) { + display: flex; + align-items: center; + justify-content: center; + position: relative; + font-size: rem(12px); + white-space: nowrap; + border-radius: var-get($theme, 'border-radius-indicator'); + color: var-get($theme, 'indicator-color'); + background: var-get($theme, 'indicator-background'); + } + + @include e(title) { + @include type-style(body-2) { + margin-top: 0; + margin-bottom: 0; + } + + color: var-get($theme, 'title-color'); + } + + @include e(subtitle) { + @include type-style(caption) { + margin-top: 0; + margin-bottom: 0; + } + + color: var-get($theme, 'subtitle-color'); + } + + &:hover { + background: var-get($theme, 'step-hover-background'); + + @include e(title) { + color: var-get($theme, 'title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'subtitle-hover-color'); + } + } + + @include m(invalid) { + background: var-get($theme, 'invalid-step-background'); + color: var-get($theme, 'invalid-title-color'); + + @include e(indicator) { + color: var-get($theme, 'invalid-indicator-color'); + background: var-get($theme, 'invalid-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'invalid-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-color'); + } + + &:hover { + @include e(title) { + color: var-get($theme, 'invalid-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-hover-color'); + } + } + } + + @include m(completed) { + background: var-get($theme, 'complete-step-background'); + + &::after { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + + @include e(indicator) { + color: var-get($theme, 'complete-indicator-color'); + background: var-get($theme, 'complete-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'complete-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-color'); + } + + &:hover { + background: var-get($theme, 'complete-step-hover-background'); + + @include e(title) { + color: var-get($theme, 'complete-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-hover-color'); + } + } + } + + @include m(current) { + background: var-get($theme, 'current-step-background') !important; + color: var-get($theme, 'current-title-color'); + + @include e(indicator) { + color: var-get($theme, 'current-indicator-color') !important; + background: var-get($theme, 'current-indicator-background') !important; + } + + @include e(title) { + color: var-get($theme, 'current-title-color'); + + // TODO See if we need this in all themes + font-weight: 600; + } + + @include e(indicator) { + color: var-get($theme, 'current-subtitle-color'); + } + + &:hover { + background: var-get($theme, 'current-step-hover-background') !important; + + @include e(title) { + color: var-get($theme, 'current-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'current-subtitle-hover-color'); + } + } + } + + @include m(disabled) { + color: var-get($theme, 'disabled-title-color'); + pointer-events: none; + cursor: default; + + @include e(indicator) { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'disabled-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'disabled-subtitle-color'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..a33b64cd354 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss @@ -0,0 +1,179 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-step, bootstrap) { + $indicator-size: rem(40px); + $separator-size: rem(8px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{$indicator-size} / 2) + #{$header-padding} - (#{$separator-size} / 2)); + $title-separator-position-top: calc(100% - ((#{$indicator-size} / 2) + #{$header-padding} + (#{$separator-size} / 2))); + $v-line-indent: calc(#{$header-padding} + (#{$indicator-size} / 2)); + + .igx-ripple__inner { + display: none !important; + } + + &:focus { + @include e(header) { + box-shadow: inset 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + } + } + + @include m(simple) { + @include e(indicator) { + min-width: $indicator-size; + min-height: $indicator-size; + } + } + + @include m(horizontal) { + &::before { + min-width: rem(36px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$indicator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$indicator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: rem(24px); + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-inline-start: $v-line-indent; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: var(--igx-icon-size, #{rem(18px)}); + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } + + @include m(disabled) { + @include e(header) { + box-shadow: none; + } + } +} + +@include themed-block(igx-step-header, bootstrap) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss new file mode 100644 index 00000000000..31dd16ee9aa --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss @@ -0,0 +1,161 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-step, fluent) { + $indicator-size: rem(24px); + $separator-size: rem(1px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{rem(24px)} / 2) + #{$header-padding} - (#{$separator-size} / 2)); + $title-separator-position-top: calc(100% - ((#{rem(24px)} / 2) + #{$header-padding} + (#{$separator-size} / 2))); + $v-line-indent: calc(#{$header-padding} + (#{rem(24px)} / 2)); + + .igx-ripple__inner { + display: none !important; + } + + @include m(simple) { + @include e(indicator) { + min-width: $indicator-size; + min-height: $indicator-size; + } + } + + @include m(horizontal) { + &::before { + min-width: rem(36px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: $indicator-size; + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-inline-start: $v-line-indent; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: var(--igx-icon-size, #{rem(18px)}); + color: inherit; + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } +} + +@include themed-block(igx-step-header, fluent) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss new file mode 100644 index 00000000000..a010f103ed8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss @@ -0,0 +1,168 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-step, indigo) { + $indicator-size: rem(24px); + $separator-size: rem(1px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{$indicator-size} / 2) + #{rem(8px)} - (#{rem(1px)} / 2)); + $title-separator-position-top: calc(100% - ((#{$indicator-size} / 2) + #{rem(8px)} + (#{rem(1px)} / 2))); + $v-line-indent: calc(#{rem(8px)} + (#{$indicator-size} / 2)); + + .igx-ripple__inner { + display: none !important; + } + + @include m(simple) { + @include e(indicator) { + min-width: rem(24px); + min-height: rem(24px); + } + } + + @include m(horizontal) { + &::before { + min-width: rem(40px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: $indicator-size; + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-block: rem(16px); + padding-inline-end: rem(16px); + padding-inline-start: $v-line-indent; + } + } + + [aria-selected='false'] { + @include e(content-wrapper) { + padding-block: 0; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: #{var(--igx-icon--size, #{rem(14px)})}; + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } +} + +@include themed-block(igx-step-header, indigo) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss new file mode 100644 index 00000000000..8c6599363c2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss @@ -0,0 +1,156 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-step, material) { + $indicator-size: rem(24px); + $separator-size: rem(1px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{$indicator-size} / 2) + #{$header-padding} - (#{$separator-size} / 2)); + $title-separator-position-top: calc(100% - ((#{$indicator-size} / 2) + #{$header-padding} + (#{$separator-size} / 2))); + $v-line-indent: calc(#{$header-padding} + (#{$indicator-size} / 2)); + + @include m(simple) { + @include e(indicator) { + min-width: $indicator-size; + min-height: $indicator-size; + } + } + + @include m(horizontal) { + &::before { + min-width: rem(36px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: $indicator-size; + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-inline-start: $v-line-indent; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: var(--igx-icon-size, #{rem(18px)}); + color: inherit; + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } +} + +@include themed-block(igx-step-header, material) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.common.ts b/projects/igniteui-angular/src/lib/stepper/stepper.common.ts index fbcef0f488e..5345e97a0eb 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.common.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.common.ts @@ -92,8 +92,6 @@ export interface IgxStep extends ToggleAnimationPlayer { /** @hidden @internal */ contentClasses: any; /** @hidden @internal */ - stepHeaderClasses: any; - /** @hidden @internal */ nativeElement: HTMLElement; /** @hidden @internal */ previous: boolean; diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.scss b/projects/igniteui-angular/src/lib/stepper/stepper.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts index 86509db32a8..a763a806de7 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts @@ -27,14 +27,13 @@ const STEPPER_CLASS = 'igx-stepper'; const STEPPER_HEADER = 'igx-stepper__header'; const STEPPER_BODY = 'igx-stepper__body'; const STEP_TAG = 'IGX-STEP'; -const STEP_HEADER = 'igx-stepper__step-header'; -const STEP_INDICATOR_CLASS = 'igx-stepper__step-indicator'; -const STEP_TITLE_CLASS = 'igx-stepper__step-title'; -const STEP_SUBTITLE_CLASS = 'igx-stepper__step-subtitle'; -const INVALID_CLASS = 'igx-stepper__step-header--invalid'; -const DISABLED_CLASS = 'igx-stepper__step--disabled'; -const COMPLETED_CLASS = 'igx-stepper__step--completed'; -const CURRENT_CLASS = 'igx-stepper__step-header--current'; +const STEP_INDICATOR_CLASS = 'igx-step__indicator'; +const STEP_TITLE_CLASS = 'igx-step__title'; +const STEP_SUBTITLE_CLASS = 'igx-step__subtitle'; +const INVALID_CLASS = 'igx-step--invalid'; +const DISABLED_CLASS = 'igx-step--disabled'; +const COMPLETED_CLASS = 'igx-step--completed'; +const CURRENT_CLASS = 'igx-step--current'; const getHeaderElements = (stepper: IgxStepperComponent, stepIndex: number): Map => { const elementsMap = new Map(); @@ -116,7 +115,7 @@ describe('Rendering Tests', () => { fix.detectChanges(); tick(); - expect(stepper.steps[1].nativeElement).toHaveClass('igx-stepper__step--disabled'); + expect(stepper.steps[1].nativeElement).toHaveClass('igx-step--disabled'); stepper.next(); fix.detectChanges(); @@ -338,14 +337,14 @@ describe('Rendering Tests', () => { }); it('should indicate the currently active step', () => { - const step0Header = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`); - const step1Header = stepper.steps[1].nativeElement.querySelector(`.${STEP_HEADER}`); + const step0 = stepper.steps[0].nativeElement; + const step1 = stepper.steps[1].nativeElement; const serviceExpandSpy = spyOn((stepper as any).stepperService, 'expand').and.callThrough(); stepper.steps[0].active = true; fix.detectChanges(); - expect(step0Header).toHaveClass(CURRENT_CLASS); + expect(step0).toHaveClass(CURRENT_CLASS); stepper.steps[1].active = true; stepper.steps[1].nativeElement.focus(); @@ -354,8 +353,8 @@ describe('Rendering Tests', () => { UIInteractions.triggerKeyDownEvtUponElem(' ', stepper.steps[1].nativeElement); fix.detectChanges(); - expect(step0Header).not.toHaveClass(CURRENT_CLASS); - expect(step1Header).toHaveClass(CURRENT_CLASS); + expect(step0).not.toHaveClass(CURRENT_CLASS); + expect(step1).toHaveClass(CURRENT_CLASS); expect(serviceExpandSpy).toHaveBeenCalledOnceWith(stepper.steps[1]); }); @@ -378,7 +377,7 @@ describe('Rendering Tests', () => { }); it('should indicate that a step is invalid', () => { - const step0Header = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`); + const step0Header = stepper.steps[0].nativeElement; stepper.steps[0].isValid = true; fix.detectChanges(); @@ -463,7 +462,7 @@ describe('Rendering Tests', () => { for (const step of stepper.steps) { expect(step.titlePosition).toBe(stepper._defaultTitlePosition); expect(step.titlePosition).toBe(IgxStepperTitlePosition.Bottom); - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${stepper._defaultTitlePosition}`); + expect(step.nativeElement).toHaveClass(`igx-step--${stepper._defaultTitlePosition}`); } const positions = getStepperPositions(); @@ -472,7 +471,7 @@ describe('Rendering Tests', () => { fix.detectChanges(); for (const step of stepper.steps) { - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${pos}`); + expect(step.nativeElement).toHaveClass(`igx-step--${pos}`); } }); @@ -484,7 +483,7 @@ describe('Rendering Tests', () => { for (const step of stepper.steps) { expect(step.titlePosition).toBe(stepper._defaultTitlePosition); expect(step.titlePosition).toBe(IgxStepperTitlePosition.End); - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${stepper._defaultTitlePosition}`); + expect(step.nativeElement).toHaveClass(`igx-step--${stepper._defaultTitlePosition}`); } positions.forEach((pos: IgxStepperTitlePosition) => { @@ -492,7 +491,7 @@ describe('Rendering Tests', () => { fix.detectChanges(); for (const step of stepper.steps) { - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${pos}`); + expect(step.nativeElement).toHaveClass(`igx-step--${pos}`); } }); }); @@ -517,11 +516,11 @@ describe('Rendering Tests', () => { }); it('should allow overriding the default invalid, completed and active indicators', () => { - const step0Header = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`); - let indicatorElement = step0Header.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; + const step0 = stepper.steps[0].nativeElement; + let indicatorElement = step0.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; - expect(step0Header).not.toHaveClass(INVALID_CLASS); - expect(step0Header).toHaveClass(CURRENT_CLASS); + expect(step0).not.toHaveClass(INVALID_CLASS); + expect(step0).toHaveClass(CURRENT_CLASS); expect(stepper.steps[0].nativeElement).not.toHaveClass(COMPLETED_CLASS); expect(indicatorElement.tagName).toBe('IGX-ICON'); expect(indicatorElement.textContent).toBe('edit'); @@ -531,10 +530,10 @@ describe('Rendering Tests', () => { stepper.steps[1].active = true; fix.detectChanges(); - indicatorElement = step0Header.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; + indicatorElement = step0.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; - expect(step0Header).toHaveClass(INVALID_CLASS); - expect(step0Header).not.toHaveClass(CURRENT_CLASS); + expect(step0).toHaveClass(INVALID_CLASS); + expect(step0).not.toHaveClass(CURRENT_CLASS); expect(stepper.steps[0].nativeElement).not.toHaveClass(COMPLETED_CLASS); expect(indicatorElement.tagName).toBe('IGX-ICON'); expect(indicatorElement.textContent).toBe('error'); @@ -543,10 +542,10 @@ describe('Rendering Tests', () => { stepper.steps[0].completed = true; fix.detectChanges(); - indicatorElement = step0Header.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; + indicatorElement = step0.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; - expect(step0Header).not.toHaveClass(INVALID_CLASS); - expect(step0Header).not.toHaveClass(CURRENT_CLASS); + expect(step0).not.toHaveClass(INVALID_CLASS); + expect(step0).not.toHaveClass(CURRENT_CLASS); expect(stepper.steps[0].nativeElement).toHaveClass(COMPLETED_CLASS); expect(indicatorElement.tagName).toBe('IGX-ICON'); expect(indicatorElement.textContent).toBe('check'); diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts index 3c5329a1821..6e9203f4255 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts @@ -3,7 +3,7 @@ import { NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Inject, Input, OnChanges, OnDestroy, - OnInit, Output, QueryList, SimpleChanges, TemplateRef, booleanAttribute + OnInit, Output, QueryList, SimpleChanges, TemplateRef, booleanAttribute, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -69,6 +69,8 @@ import { fadeIn, growVerIn, growVerOut } from 'igniteui-angular/animations'; @Component({ selector: 'igx-stepper', templateUrl: 'stepper.component.html', + styleUrl: 'stepper.component.css', + encapsulation: ViewEncapsulation.None, providers: [ IgxStepperService, { provide: IGX_STEPPER_COMPONENT, useExisting: IgxStepperComponent }, diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts index 9e5e334272b..1c0335f8183 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts @@ -7,7 +7,7 @@ import { IgxStepperService } from './stepper.service'; * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -28,7 +28,7 @@ export class IgxStepActiveIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -49,7 +49,7 @@ export class IgxStepCompletedIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -70,7 +70,7 @@ export class IgxStepInvalidIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -91,7 +91,7 @@ export class IgxStepIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -106,8 +106,11 @@ export class IgxStepIndicatorDirective { } standalone: true }) export class IgxStepTitleDirective { - @HostBinding('class.igx-stepper__step-title') + @HostBinding('class.igx-step__title') public defaultClass = true; + + @HostBinding('class.igx-step-header__title') + public headerElementClass = true; } /** @@ -115,7 +118,7 @@ export class IgxStepTitleDirective { * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -130,8 +133,11 @@ export class IgxStepTitleDirective { standalone: true }) export class IgxStepSubtitleDirective { - @HostBinding('class.igx-stepper__step-subtitle') - public defaultClass = true; + @HostBinding('class.igx-step__subtitle') + public elementClass = true; + + @HostBinding('class.igx-step-header__subtitle') + public headerElementClass = true; } /** @@ -139,7 +145,7 @@ export class IgxStepSubtitleDirective { * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example diff --git a/projects/igniteui-angular/src/lib/stepper/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/themes/_base.scss new file mode 100644 index 00000000000..b52304ca66c --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/_base.scss @@ -0,0 +1,79 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $material; + +@include layer(base) { + @include b(igx-stepper) { + display: flex; + flex-direction: column; + width: 100%; + overflow: hidden; + + @include e(header) { + display: flex; + white-space: nowrap; + flex-direction: column; + width: 100%; + flex: none; + } + + @include e(body) { + display: flex; + color: var-get($theme, 'content-foreground'); + position: relative; + flex-direction: column; + flex: 1 1 auto; + overflow: hidden; + } + + @include m(horizontal) { + @include e(header) { + flex-direction: row; + } + + @include e(body-content) { + display: flex; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + z-index: -1; + padding: rem(16px); + + @include type-style(body-2) { + margin-top: 0; + margin-bottom: 0; + } + } + + @include e(body-content, $m: active) { + z-index: 1; + position: relative; + } + + @include e(step-content) { + flex-grow: 1; + + &:focus { + outline: none; + } + + &::before { + display: none; + } + } + + @include e(step-content-wrapper) { + text-align: center; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss new file mode 100644 index 00000000000..02f9fac8abf --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-stepper, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss new file mode 100644 index 00000000000..1caebf64811 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/stepper' as *; + +$base: digest-schema($base-stepper); +$material: digest-schema($dark-material-stepper); +$bootstrap: digest-schema($dark-bootstrap-stepper); +$fluent: digest-schema($dark-fluent-stepper); +$indigo: digest-schema($dark-indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss new file mode 100644 index 00000000000..3b73043d778 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-stepper, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss new file mode 100644 index 00000000000..b7fddea3c31 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/stepper' as *; + +$base: digest-schema($light-stepper); +$material: digest-schema($material-stepper); +$bootstrap: digest-schema($bootstrap-stepper); +$fluent: digest-schema($fluent-stepper); +$indigo: digest-schema($indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..86f61b7bbce --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-stepper, bootstrap) { + +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss new file mode 100644 index 00000000000..8d56a722db4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-stepper, fluent) { + +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss new file mode 100644 index 00000000000..1dd5b995d6a --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-stepper, indigo) { + +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss new file mode 100644 index 00000000000..6988a8e224a --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-stepper, material) { + +} From 48742d1023f9174a551e7e6e3bc0ca2c6d817bb8 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 27 Mar 2025 09:50:46 +0200 Subject: [PATCH 055/131] refactor(carousel): bundle styles with component (#15473) --- .../src/lib/carousel/carousel.component.html | 6 +- .../src/lib/carousel/carousel.component.scss | 4 + .../src/lib/carousel/carousel.component.ts | 7 +- .../src/lib/carousel/themes/_base.scss | 296 +++++ .../src/lib/carousel/themes/dark/_index.scss | 6 + .../src/lib/carousel/themes/dark/_tokens.scss | 8 + .../src/lib/carousel/themes/light/_index.scss | 6 + .../lib/carousel/themes/light/_tokens.scss | 8 + .../carousel/themes/shared/_bootstrap.scss | 28 + .../lib/carousel/themes/shared/_fluent.scss | 48 + .../lib/carousel/themes/shared/_index.scss | 3 + .../lib/carousel/themes/shared/_indigo.scss | 129 ++ .../components/button/_button-theme.scss | 1138 ++++++++--------- .../components/carousel/_carousel-theme.scss | 8 +- .../icon-button/_icon-button-theme.scss | 485 ++++--- .../core/styles/themes/generators/_base.scss | 14 +- 16 files changed, 1362 insertions(+), 832 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/carousel/carousel.component.scss create mode 100644 projects/igniteui-angular/src/lib/carousel/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/carousel/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/carousel/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/carousel/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/carousel/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/carousel/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/carousel/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/carousel/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/carousel/themes/shared/_indigo.scss diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.html b/projects/igniteui-angular/src/lib/carousel/carousel.component.html index d79dc110577..f182f061a2e 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.html +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.html @@ -19,7 +19,7 @@ @if (navigation && slides.length) { - - @for(icon of cards[0].icons; track icon) { - - {{icon}} - - } - + + } + @if(section === 'content' && !properties.hideContent) { + +

{{ cards[0].content }}

+ + } + @if(section === 'actions' && !properties.hideActions) { + + + + @for(icon of cards[0].icons; track icon) { + + {{icon}} + } - + } - + + } + - @if(!properties.hideActions) { + @if(!properties.hideActions) { + + + @for(icon of cards[1].icons; track icon) { + + } + + } - - @for(icon of cards[1].icons; track icon) { - + + +
+ @if(!properties.hideHeader) { + + @if(!hideTitle) { +
{{cards[1].title}}
} - + @if(!hideSubtitle) { +
{{cards[1].subtitle}}
+ } + } + @if(!properties.hideContent) { + +

+ New York City comprises 5 boroughs sitting where the + Hudson River meets the Atlantic Ocean. +

+ + } +
- + @if(!properties.hideMedia) { + + + + } + -
- @if(!properties.hideHeader) { - - @if(!hideTitle) { -
{{cards[1].title}}
- } - @if(!hideSubtitle) { -
{{cards[1].subtitle}}
- } - + + @if(!properties.hideHeader) { + + @if(!hideTitle) { +
{{cards[1].title}}
} - @if(!properties.hideContent) { - -

- New York City comprises 5 boroughs sitting where the - Hudson River meets the Atlantic Ocean. -

- + @if(!hideSubtitle) { +
{{cards[1].subtitle}}
} -
- - @if(!properties.hideMedia) { - - - + @if(!properties.hideMedia) { + + + + } + + } + + + @if(!properties.hideActions) { + + @for(icon of cards[1].icons; track icon) { + } - + + } + + + + +
- @if(!properties.hideHeader) { + @if(!hideThumbnail) { + + } + @if(!hideTitle) { -
{{cards[1].title}}
+

{{ cards[2].title }}

} + @if(!hideSubtitle) { -
{{cards[1].subtitle}}
- } - @if(!properties.hideMedia) { - - - +
{{ cards[2].subtitle }}
} } - @if(!properties.hideActions) { - - @for(icon of cards[1].icons; track icon) { - - } - + + @for(button of cards[2].buttons; track button){ + + } + } - - - - -
- - @if(!properties.hideHeader) { - - @if(!hideThumbnail) { - - } - - @if(!hideTitle) { -

{{ cards[2].title }}

- } - - @if(!hideSubtitle) { -
{{ cards[2].subtitle }}
- } - - } +
- @if(!properties.hideActions) { - - @for(button of cards[2].buttons; track button){ - - } - - } -
- - @if(!properties.hideMedia) { - - - - } - + @if(!properties.hideMedia) { + + + + } +
@@ -177,177 +177,177 @@

WC Card

- @for(section of sectionOrder; track section) { - - @if(section === 'media' && !properties.hideMedia) { - - - + @for(section of sectionOrder; track section) { + + @if(section === 'media' && !properties.hideMedia) { + + + + } + @if(section === 'header' && !properties.hideHeader) { + + @if(!hideThumbnail) { + + } - @if(section === 'header' && !properties.hideHeader) { - - @if(!hideThumbnail) { - - - } - @if(!hideTitle) { - New York City - } - @if(!hideSubtitle) { - City in New York - } - + @if(!hideTitle) { + New York City } - @if(section === 'content' && !properties.hideContent) { - - - New York City comspanrises 5 boroughs sitting where - the Hudson River meets the Atlantic Ocean. At its - core is Manhattan, a densely populated borough - that’s among the world’s major commercial, financial - and cultural centers. - - - } @if(section === 'actions' && !properties.hideActions) { - - Read More - @for(icon of cards[0].icons; track icon) { - - - } - + @if(!hideSubtitle) { + City in New York } - + } - - - - - @if(!properties.hideActions) { - - @for(icon of cards[1].icons; track icon) { - + @if(section === 'content' && !properties.hideContent) { + + + New York City comspanrises 5 boroughs sitting where + the Hudson River meets the Atlantic Ocean. At its + core is Manhattan, a densely populated borough + that’s among the world’s major commercial, financial + and cultural centers. + + + } @if(section === 'actions' && !properties.hideActions) { + + Read More + @for(icon of cards[0].icons; track icon) { + } } + + } + + -
- @if(!properties.hideHeader) { - - @if(!hideTitle) { - {{cards[1].title}} - } - @if(!hideSubtitle) { - {{cards[1].subtitle}} - } - + + @if(!properties.hideActions) { + + @for(icon of cards[1].icons; track icon) { + + + } + + } + +
+ @if(!properties.hideHeader) { + + @if(!hideTitle) { + {{cards[1].title}} } - @if(!properties.hideContent) { - - New York City comprises 5 boroughs sitting where the - Hudson River meets the Atlantic Ocean. - + @if(!hideSubtitle) { + {{cards[1].subtitle}} } -
- - @if(!properties.hideMedia) { - - - + + } + @if(!properties.hideContent) { + + New York City comprises 5 boroughs sitting where the + Hudson River meets the Atlantic Ocean. + } - +
+ + @if(!properties.hideMedia) { + + + + } + -
- @if(!properties.hideHeader) { - - @if(!properties.hideMedia) { -
- - - -
- } +
+ @if(!properties.hideHeader) { + + @if(!properties.hideMedia) { +
+ + + +
+ } - @if(!properties.hideHeader) { @if(!hideTitle) { - {{cards[1].title}} - } - @if(!hideSubtitle) { - {{cards[1].subtitle}} - } + @if(!properties.hideHeader) { @if(!hideTitle) { + {{cards[1].title}} + } + @if(!hideSubtitle) { + {{cards[1].subtitle}} } - - } -
+ } + + } +
- @if(!properties.hideActions) { - - @for(icon of cards[1].icons; track icon) { - - } - + @if(!properties.hideActions) { + + @for(icon of cards[1].icons; track icon) { + } - + + } + -
- @if(!properties.hideHeader) { - - @if(!hideThumbnail) { - - } - @if(!hideTitle) { - {{ cards[2].title }} - } - - @if(!hideSubtitle) { - {{ cards[2].subtitle }} - } - - } +
+ @if(!properties.hideHeader) { + + @if(!hideThumbnail) { + + } + @if(!hideTitle) { + {{ cards[2].title }} + } - @if(!properties.hideActions) { - - @for(button of cards[2].buttons; track button){ - {{ button }} + @if(!hideSubtitle) { + {{ cards[2].subtitle }} } - - } -
+ + } - @if(!properties.hideMedia) { - - - + @if(!properties.hideActions) { + + @for(button of cards[2].buttons; track button){ + {{ button }} + } + } - +
+ + @if(!properties.hideMedia) { + + + + } +
From 0099cdd81f56265f3b0cb66678df6c28839ba74c Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Mon, 31 Mar 2025 10:16:34 +0300 Subject: [PATCH 060/131] refactor(btn-group): bundle styles with component (#15569) --- .../lib/buttonGroup/buttonGroup.component.ts | 26 ++- .../buttongroup-content.component.html | 44 ++-- .../buttongroup-content.component.scss | 4 + .../src/lib/buttonGroup/themes/_base.scss | 218 ++++++++++++++++++ .../lib/buttonGroup/themes/dark/_index.scss | 6 + .../lib/buttonGroup/themes/dark/_tokens.scss | 7 + .../lib/buttonGroup/themes/light/_index.scss | 6 + .../lib/buttonGroup/themes/light/_tokens.scss | 8 + .../buttonGroup/themes/shared/_bootstrap.scss | 81 +++++++ .../buttonGroup/themes/shared/_fluent.scss | 127 ++++++++++ .../lib/buttonGroup/themes/shared/_index.scss | 4 + .../buttonGroup/themes/shared/_indigo.scss | 108 +++++++++ .../buttonGroup/themes/shared/_material.scss | 125 ++++++++++ .../button-group/_button-group-theme.scss | 2 +- .../core/styles/themes/generators/_base.scss | 14 +- .../core/styles/typography/_bootstrap.scss | 2 +- .../lib/core/styles/typography/_fluent.scss | 2 +- .../lib/core/styles/typography/_indigo.scss | 6 +- .../lib/core/styles/typography/_material.scss | 2 +- 19 files changed, 754 insertions(+), 38 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts index 8b768bcb5b8..87fe3471522 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts @@ -12,7 +12,8 @@ import { ViewChildren, OnDestroy, ElementRef, - booleanAttribute + booleanAttribute, + ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; import { IgxButtonDirective } from '../directives/button/button.directive'; @@ -57,6 +58,8 @@ let NEXT_ID = 0; @Component({ selector: 'igx-buttongroup', templateUrl: 'buttongroup-content.component.html', + styleUrl: 'buttongroup-content.component.css', + encapsulation: ViewEncapsulation.None, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy { @@ -77,12 +80,32 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy { @Input() public id = `igx-buttongroup-${NEXT_ID++}`; + /** @hidden @internal */ + @HostBinding('class.igx-button-group') + public cssClass = 'igx-button-group'; + + /** @hidden @internal */ + /** * @hidden */ @HostBinding('style.zIndex') public zIndex = 0; + /** + * Sets/gets the role attribute value. + * + * @example + * ```typescript + * @ViewChild("MyButtonGroup", { read: IgxButtonGroupComponent }) + * public badge: IgxButtonGroupComponent; + * + * buttonGroup.role = 'group'; + * ``` + */ + @HostBinding('attr.role') + public role = 'group'; + /** * Allows you to set a style using the `itemContentCssClass` input. * The value should be the CSS class name that will be applied to the button group. @@ -286,6 +309,7 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy { * } * ``` */ + @HostBinding('class.igx-button-group--vertical') public get isVertical(): boolean { return this._isVertical; } diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html index 58f674c856a..0c69724b6cd 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html @@ -1,23 +1,21 @@ -
- @for (button of values; track button) { - - } - -
+@for (button of values; track button) { + +} + diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.scss b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/_base.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/_base.scss new file mode 100644 index 00000000000..9a18266e68b --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/_base.scss @@ -0,0 +1,218 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$_theme: $material; + +@include layer(base) { + @include b(igx-button-group) { + --item-min-width: rem(42px); + + display: flex; + box-shadow: var-get($_theme, 'elevation'); + border-radius: var-get($_theme, 'border-radius'); + + button { + // The margin here is required to fix a bug in Safari #7858 + margin-top: 0; + margin-inline-end: 0; + margin-bottom: 0; + } + + @include e(item) { + @include type-style(button) { + text-align: center; + } + + border: rem(1px) solid var-get($_theme, 'item-border-color'); + color: var-get($_theme, 'item-text-color'); + background: var-get($_theme, 'item-background'); + min-width: var(--item-min-width); + display: flex; + flex: 1 0 0%; + justify-content: center; + align-items: center; + text-decoration: none; + cursor: pointer; + user-select: none; + position: relative; + z-index: 0; + + igx-icon { + color: var-get($_theme, 'item-icon-color'); + } + + &:hover { + color: var-get($_theme, 'item-hover-text-color'); + background: var-get($_theme, 'item-hover-background'); + border-color: var-get($_theme, 'item-hover-border-color'); + + igx-icon { + color: var-get($_theme, 'item-hover-icon-color'); + } + } + + &:active { + color: var-get($_theme, 'item-hover-text-color'); + background: var-get($_theme, 'item-hover-background'); + border-color: var-get($_theme, 'item-hover-border-color'); + + igx-icon { + color: var-get($_theme, 'item-hover-icon-color'); + } + } + + &[igxButton] { + border-radius: 0; + } + + &[igxButton][disabled='true'] { + color: var-get($_theme, 'disabled-text-color'); + background: var-get($_theme, 'disabled-background-color'); + border-color: var-get($_theme, 'item-disabled-border'); + + igx-icon { + color: var-get($_theme, 'disabled-text-color'); + } + } + + &[igxButton].igx-button--focused { + color: var-get($_theme, 'item-hover-text-color'); + background: var-get($_theme, 'item-hover-background'); + border-color: var-get($_theme, 'item-hover-border-color'); + + igx-icon { + color: var-get($_theme, 'item-hover-icon-color'); + } + + &:hover { + color: var-get($_theme, 'item-hover-text-color'); + background: var-get($_theme, 'item-hover-background'); + + igx-icon { + color: var-get($_theme, 'item-hover-icon-color'); + } + } + } + + &:not(:nth-child(1)) { + margin-inline-start: rem(-1px); + } + + &:first-of-type { + border-start-start-radius: inherit; + border-end-start-radius: inherit; + } + + &:last-of-type { + border-start-end-radius: inherit; + border-end-end-radius: inherit; + } + } + + @include e(item, $m: selected) { + color: var-get($_theme, 'item-selected-text-color'); + background: var-get($_theme, 'item-selected-background'); + border-color: var-get($_theme, 'item-selected-border-color'); + position: relative; + z-index: 1; + + &[igxButton] { + border-color: var-get($_theme, 'item-selected-border-color'); + } + + igx-icon { + color: var-get($_theme, 'item-selected-icon-color'); + } + + &:hover { + border-color: var-get($_theme, 'item-selected-hover-border-color'); + color: var-get($_theme, 'item-selected-hover-text-color'); + background: var-get($_theme, 'item-selected-hover-background'); + + igx-icon { + color: var-get($_theme, 'item-selected-hover-icon-color'); + } + } + + &[igxButton].igx-button--focused { + &:hover { + color: var-get($_theme, 'item-selected-hover-text-color'); + background: var-get($_theme, 'item-selected-hover-background'); + border-color: var-get($_theme, 'item-selected-hover-border-color'); + } + + &:active { + background: var-get($_theme, 'item-selected-hover-background'); + color: var-get($_theme, 'item-selected-hover-text-color'); + + &::before { + background: var-get($_theme, 'item-selected-focus-background'); + } + + igx-icon { + color: var-get($_theme, 'item-selected-hover-icon-color'); + } + } + } + + &[igxButton][disabled='true'] { + position: relative; + + &::before { + position: absolute; + content: ''; + top: 0; + bottom: 0; + inset-inline-end: 0; + inset-inline-start: 0; + background: var-get($_theme, 'disabled-selected-background'); + } + } + } + + @include e(item-content) { + display: flex; + align-items: center; + flex-flow: row nowrap; + min-width: 0; + + * ~ * { + margin-inline-start: rem(10px, 16px); + } + } + + @include e(button-text) { + @include ellipsis(); + + width: 100%; + } + + @include m(vertical) { + flex-flow: column; + + @include e(item) { + &:not(:nth-child(1)) { + margin-top: rem(-1px) !important; + margin-inline-start: 0; + } + + &:first-of-type { + border-start-start-radius: inherit; + border-start-end-radius: inherit; + border-end-start-radius: 0; + border-end-end-radius: 0; + } + + &:last-of-type { + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-start-radius: inherit; + border-end-end-radius: inherit; + } + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_index.scss new file mode 100644 index 00000000000..12286543b37 --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-button-group, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_tokens.scss new file mode 100644 index 00000000000..9d1dad4dd22 --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/button-group' as *; + +$material: digest-schema($dark-material-button-group); +$bootstrap: digest-schema($dark-bootstrap-button-group); +$fluent: digest-schema($dark-fluent-button-group); +$indigo: digest-schema($dark-indigo-button-group); diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/light/_index.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/light/_index.scss new file mode 100644 index 00000000000..291f5c86ffb --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-button-group, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/light/_tokens.scss new file mode 100644 index 00000000000..255ef4315ea --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/button-group' as *; + +$base: digest-schema($light-button-group); +$material: digest-schema($material-button-group); +$bootstrap: digest-schema($bootstrap-button-group); +$fluent: digest-schema($fluent-button-group); +$indigo: digest-schema($indigo-button-group); diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..bc24bcd637c --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_bootstrap.scss @@ -0,0 +1,81 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-button-group, bootstrap) { + %item-overlay { + &::before { + content: ''; + z-index: -1; + position: absolute; + pointer-events: none; + width: 100%; + height: 100%; + background: var-get($_theme, 'item-focused-background'); + } + } + + @include e(item) { + &[igxButton] { + margin: 0; + border: none; + } + + &:active { + @extend %item-overlay; + } + + &[igxButton].igx-button--focused { + background: var-get($_theme, 'item-background'); + z-index: 1; + + &:hover, + &:active { + background: var-get($_theme, 'item-hover-background'); + color: var-get($_theme, 'item-hover-text-color'); + + igx-icon { + color: var-get($_theme, 'item-hover-icon-color'); + } + } + } + } + + @include e(item, $m: selected) { + &:active { + @extend %item-overlay; + + color: var-get($_theme, 'item-selected-text-color'); + border-color: var-get($_theme, 'item-selected-border-color'); + background: var-get($_theme, 'item-selected-hover-background'); + + &::before { + background: var-get($_theme, 'item-selected-focus-background'); + } + } + + &[igxButton].igx-button--focused { + color: var-get($_theme, 'item-selected-text-color'); + border-color: var-get($_theme, 'item-selected-border-color'); + background: var-get($_theme, 'item-selected-background'); + + igx-icon { + color: var-get($_theme, 'item-selected-icon-color'); + } + + &:hover, + &:active { + background: var-get($_theme, 'item-selected-hover-background'); + color: var-get($_theme, 'item-selected-hover-text-color'); + border-color: var-get($_theme, 'item-selected-hover-border-color'); + + igx-icon { + color: var-get($_theme, 'item-selected-hover-icon-color'); + } + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_fluent.scss new file mode 100644 index 00000000000..01cb59963df --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_fluent.scss @@ -0,0 +1,127 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-button-group, fluent) { + $outline-btn-indent: rem(2px); + + %item-overlay { + &::before { + content: ''; + z-index: -1; + position: absolute; + pointer-events: none; + width: 100%; + height: 100%; + } + } + + @include e(item) { + igx-icon { + color: var-get($_theme, 'item-icon-color'); + $icon-size: rem(18px); + + --ig-icon-size: #{$icon-size}; + --igx-icon-size: #{$icon-size}; + } + + &:active { + background: var-get($_theme, 'item-focused-background'); + color: var-get($_theme, 'item-text-color'); + border-color: var-get($_theme, 'item-border-color'); + } + + &[igxButton].igx-button--focused { + background: var-get($_theme, 'item-background'); + color: var-get($_theme, 'item-text-color'); + border-color: var-get($_theme, 'item-border-color'); + + igx-icon { + color: var-get($_theme, 'item-icon-color'); + } + + &::after { + content: ''; + position: absolute; + inset-block-start: $outline-btn-indent; + inset-inline-start: $outline-btn-indent; + pointer-events: none; + width: calc(100% - (#{$outline-btn-indent} * 2)); + height: calc(100% - (#{$outline-btn-indent} * 2)); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'item-focused-border-color'); + } + + &:hover { + color: var-get($_theme, 'item-hover-text-color'); + background: var-get($_theme, 'item-hover-background'); + + igx-icon { + color: var-get($_theme, 'item-hover-icon-color'); + } + } + + &:active { + background: var-get($_theme, 'item-focused-background'); + } + } + + &[igxButton][disabled='true'] { + igx-icon { + color: var-get($_theme, 'disabled-text-color'); + } + } + } + + @include e(item, $m: selected) { + &:hover { + @extend %item-overlay; + + background: var-get($_theme, 'item-selected-background'); + color: var-get($_theme, 'item-selected-text-color'); + + &::before { + background: var-get($_theme, 'item-selected-hover-background'); + } + } + + &:active { + background: var-get($_theme, 'item-selected-focus-background'); + color: var-get($_theme, 'item-selected-text-color'); + + igx-icon { + color: var-get($_theme, 'item-selected-icon-color'); + } + } + + &[igxButton].igx-button--focused { + background: var-get($_theme, 'item-selected-background'); + color: var-get($_theme, 'item-selected-text-color'); + + igx-icon { + color: var-get($_theme, 'item-selected-icon-color'); + } + + &:hover { + @extend %item-overlay; + + background: var-get($_theme, 'item-selected-background'); + color: var-get($_theme, 'item-selected-text-color'); + + igx-icon { + color: var-get($_theme, 'item-selected-hover-icon-color'); + } + + &::before { + background: var-get($_theme, 'item-selected-focus-hover-background'); + } + } + + &:active { + background: var-get($_theme, 'item-selected-focus-background'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_index.scss new file mode 100644 index 00000000000..097687c32b5 --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_indigo.scss new file mode 100644 index 00000000000..11fff6a26d4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_indigo.scss @@ -0,0 +1,108 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-button-group, indigo) { + --item-min-width: rem(32px); + + %hover { + border-color: var-get($_theme, 'item-hover-border-color'); + color: var-get($_theme, 'item-hover-text-color'); + background: var-get($_theme, 'item-hover-background'); + + igx-icon { + color: var-get($_theme, 'item-hover-icon-color'); + } + } + + %hover-selected { + background: var-get($_theme, 'item-selected-hover-background'); + color: var-get($_theme, 'item-selected-hover-text-color'); + border-color: var-get($_theme, 'item-selected-hover-border-color'); + + igx-icon { + color: var-get($_theme, 'item-selected-hover-icon-color'); + } + } + + @include e(item) { + @include type-style(body-2); + + padding-inline: pad-inline(rem(6px), rem(8px), rem(10px)); + + igx-icon { + $icon-size: rem(16px); + + --ig-icon-size: #{$icon-size}; + --igx-icon-size: #{$icon-size}; + } + + &:hover { + @extend %hover; + + z-index: 1; + } + + &:active { + @extend %hover; + + z-index: 2; + } + + &[igxButton].igx-button--focused { + color: var-get($_theme, 'item-focused-text-color'); + background: var-get($_theme, 'item-focused-background'); + border-color: var-get($_theme, 'item-focused-border-color'); + z-index: 2; + + igx-icon { + color: var-get($_theme, 'item-icon-color'); + } + + &:hover, + &:active { + @extend %hover; + } + } + } + + @include e(item, $m: selected) { + &:hover, + &:active { + @extend %hover-selected; + } + + &[igxButton].igx-button--focused { + box-shadow: 0 0 0 rem(3px) var-get($_theme, 'selected-shadow-color'); + border-color: var-get($_theme, 'item-selected-border-color'); + background: var-get($_theme, 'item-selected-background'); + color: var-get($_theme, 'item-selected-text-color'); + + igx-icon { + color: var-get($_theme, 'item-selected-icon-color'); + } + + &:hover, + &:active { + @extend %hover-selected; + } + } + + &[igxButton][disabled='true'] { + color: var-get($_theme, 'disabled-selected-text-color'); + background: var-get($_theme, 'disabled-selected-background'); + border: none; + + igx-icon { + color: var-get($_theme, 'disabled-selected-icon-color'); + } + + &::before { + display: none; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss new file mode 100644 index 00000000000..1bbac9cde6b --- /dev/null +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss @@ -0,0 +1,125 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-button-group, material) { + %item-overlay { + &::before { + content: ''; + z-index: -1; + position: absolute; + pointer-events: none; + width: 100%; + height: 100%; + } + } + + @include e(item) { + &:hover, + &:active { + @extend %item-overlay; + + background: var-get($_theme, 'item-background'); + } + + &:hover { + &::before { + background: var-get($_theme, 'item-hover-background'); + } + } + + &[igxButton].igx-button--focused { + @extend %item-overlay; + + background: var-get($_theme, 'item-background'); + + &::before { + background: var-get($_theme, 'item-hover-background'); + } + + &:hover { + background: var-get($_theme, 'item-background'); + + &::before { + background: var-get($_theme, 'item-focused-hover-background'); + } + } + + &:active { + background: var-get($_theme, 'item-background'); + color: var-get($_theme, 'item-hover-text-color'); + + igx-icon { + color: var-get($_theme, 'item-hover-icon-color'); + } + + &::before { + background: var-get($_theme, 'item-focused-background'); + } + } + } + } + + @include e(item, $m: selected) { + &:hover { + @extend %item-overlay; + + background: var-get($_theme, 'item-selected-background'); + + &::before { + background: var-get($_theme, 'item-selected-hover-background'); + } + } + + &:active { + @extend %item-overlay; + + color: var-get($_theme, 'item-selected-text-color'); + background: var-get($_theme, 'item-selected-background'); + border-color: var-get($_theme, 'item-selected-border-color'); + + igx-icon { + color: var-get($_theme, 'item-selected-icon-color'); + } + + &::before { + background: var-get($_theme, 'item-selected-focus-background'); + } + } + + &[igxButton].igx-button--focused { + background: var-get($_theme, 'item-selected-background'); + color: var-get($_theme, 'item-selected-hover-text-color'); + border-color: var-get($_theme, 'item-selected-hover-border-color'); + + &::before { + background: var-get($_theme, 'item-selected-hover-background'); + } + + igx-icon { + color: var-get($_theme, 'item-selected-hover-icon-color'); + } + + &:hover { + @extend %item-overlay; + + background: var-get($_theme, 'item-selected-background'); + + &::before { + background: var-get($_theme, 'item-selected-focus-hover-background'); + } + + igx-icon { + color: var-get($_theme, 'item-selected-hover-icon-color'); + } + } + + &:active { + background: var-get($_theme, 'item-selected-background'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss index ff81ce04820..8e3c60160bc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss @@ -110,7 +110,7 @@ $disabled-selected-border-color: null, ) { $name: 'igx-button-group'; - $selector: 'igx-buttongroup'; + $selector: '.igx-button-group'; $button-group-schema: (); @if map.has-key($schema, 'button-group') { diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 75533d0cb6f..933e40d9220 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -176,13 +176,13 @@ @include button($button-theme-map); } - @if is-used('igx-button-group', $exclude) { - $button-group-theme-map: button-group-theme( - $schema: $schema, - ); - $button-group-theme-map: meta.call($theme-handler, $button-group-theme-map); - @include button-group($button-group-theme-map); - } + // @if is-used('igx-button-group', $exclude) { + // $button-group-theme-map: button-group-theme( + // $schema: $schema, + // ); + // $button-group-theme-map: meta.call($theme-handler, $button-group-theme-map); + // @include button-group($button-group-theme-map); + // } // @if is-used('igx-banner', $exclude) { // $banner-theme-map: banner-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 924bf8eae74..c666d1f77af 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -39,7 +39,7 @@ // @include banner-typography(); // @include bottom-nav-typography(); @include button-typography(); - @include button-group-typography(); + // @include button-group-typography(); @include calendar-typography($categories: ( header-year: 'body-2', header-date: 'h4', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index 8a3a8931051..adf97aee28b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -40,7 +40,7 @@ // )); // @include bottom-nav-typography(); @include button-typography(); - @include button-group-typography(); + // @include button-group-typography(); @include calendar-typography($categories: ( header-year: 'overline', header-date: 'h4', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 776e72845a8..86de17897c6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -40,9 +40,9 @@ // @include banner-typography(); // @include bottom-nav-typography(); @include button-typography(); - @include button-group-typography($categories: ( - text: 'body-2', - )); + // @include button-group-typography($categories: ( + // text: 'body-2', + // )); @include calendar-typography($categories: ( header-year: 'body-2', header-date: 'h5', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 0d3f1621df9..0d98c4e3061 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -38,7 +38,7 @@ // @include banner-typography(); // @include bottom-nav-typography(); @include button-typography(); - @include button-group-typography(); + // @include button-group-typography(); @include calendar-typography(); // @include card-typography(); @include checkbox-typography(); From d62326f1c5c11c762dd54851baa89374f9c16e72 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Wed, 2 Apr 2025 13:21:04 +0300 Subject: [PATCH 061/131] refactor(action-strip): bundle styles with component (#15618) --- .../action-strip/action-strip.component.scss | 4 + .../action-strip/action-strip.component.ts | 5 +- .../src/lib/action-strip/themes/_base.scss | 134 ++++++++++++++++++ .../lib/action-strip/themes/dark/_index.scss | 6 + .../lib/action-strip/themes/dark/_tokens.scss | 7 + .../lib/action-strip/themes/light/_index.scss | 6 + .../action-strip/themes/light/_tokens.scss | 8 ++ .../action-strip/themes/shared/_fluent.scss | 10 ++ .../action-strip/themes/shared/_index.scss | 1 + .../core/styles/themes/generators/_base.scss | 14 +- 10 files changed, 187 insertions(+), 8 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/action-strip/action-strip.component.scss create mode 100644 projects/igniteui-angular/src/lib/action-strip/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/action-strip/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/action-strip/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/action-strip/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/action-strip/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/action-strip/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/action-strip/themes/shared/_index.scss diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.scss b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts index 56bfdf2c6f4..f277ea330bc 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts @@ -13,7 +13,8 @@ import { ChangeDetectorRef, AfterViewInit, ElementRef, - booleanAttribute + booleanAttribute, + ViewEncapsulation } from '@angular/core'; import { ActionStripResourceStringsEN, IActionStripResourceStrings } from '../core/i18n/action-strip-resources'; import { IgxDropDownComponent } from '../drop-down/drop-down.component'; @@ -73,6 +74,8 @@ export class IgxActionStripMenuItemDirective { @Component({ selector: 'igx-action-strip', templateUrl: 'action-strip.component.html', + styleUrl: 'action-strip.component.css', + encapsulation: ViewEncapsulation.None, imports: [ NgTemplateOutlet, IgxIconButtonDirective, diff --git a/projects/igniteui-angular/src/lib/action-strip/themes/_base.scss b/projects/igniteui-angular/src/lib/action-strip/themes/_base.scss new file mode 100644 index 00000000000..9c015e84f31 --- /dev/null +++ b/projects/igniteui-angular/src/lib/action-strip/themes/_base.scss @@ -0,0 +1,134 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; + +$_theme: $material; + +@include layer(base) { + $icon-size: sizable(rem(14px), rem(14px), rem(18px)); + + %actions { + display: flex; + align-items: center; + justify-content: center; + } + + %menu-item { + [igxLabel] { + cursor: pointer; + } + + &.igx-drop-down__item { + igx-icon + [igxLabel] { + margin-inline-start: pad-inline(rem(8px), rem(10px), rem(12px)); + } + } + } + + @include b(igx-action-strip) { + @include sizable(); + --action-strip-size: var(--component-size); + --button-size: #{sizable(rem(28px), rem(28px), rem(36px))}; + + display: flex; + align-items: center; + justify-content: flex-end; + position: absolute; + width: 100%; + height: 100%; + pointer-events: none; + top: 0; + inset-inline-start: 0; + background: var-get($_theme, 'background'); + color: inherit; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + z-index: 9999; + + [igxIconButton] { + --component-size: var(--action-strip-size); + + width: var(--button-size); + height: var(--button-size); + + igx-icon { + --component-size: var(--action-strip-size); + + --ig-icon-size: #{$icon-size}; + --igx-icon-size: #{$icon-size}; + } + } + + @include e(actions) { + display: inline-flex; + align-items: center; + justify-content: center; + pointer-events: all; + position: relative; + color: var-get($_theme, 'icon-color'); + border-radius: var-get($_theme, 'actions-border-radius'); + background: var-get($_theme, 'actions-background'); + max-height: rem(36px); + + &:last-child { + margin-inline-end: 0; + } + + igx-icon { + color: var-get($_theme, 'icon-color'); + } + + [igxIconButton] { + border-radius: var-get($_theme, 'actions-border-radius'); + + igx-icon { + color: var-get($_theme, 'icon-color'); + } + } + } + + @include e(delete) { + igx-icon { + color: var-get($_theme, 'delete-action'); + } + } + + @include e(editing-actions) { + @extend %actions; + + > [igxButton] { + margin-inline-start: rem(4px); + + &:first-of-type { + margin-inline-start: 0; + } + } + } + + @include e(pinning-actions) { + @extend %actions; + } + + @include e(menu-item) { + @extend %menu-item; + } + + @include e(menu-item, $m: 'danger') { + @extend %menu-item; + + color: color($color: 'error'); + + &:hover { + color: color($color: 'error'); + } + } + + @include e(menu-button) { + display: flex; + align-items: center; + } + } +} diff --git a/projects/igniteui-angular/src/lib/action-strip/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/action-strip/themes/dark/_index.scss new file mode 100644 index 00000000000..cefc00f9cde --- /dev/null +++ b/projects/igniteui-angular/src/lib/action-strip/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-action-strip, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/action-strip/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/action-strip/themes/dark/_tokens.scss new file mode 100644 index 00000000000..a28ec35fe65 --- /dev/null +++ b/projects/igniteui-angular/src/lib/action-strip/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/action-strip' as *; + +$material: digest-schema($dark-material-action-strip); +$bootstrap: digest-schema($dark-bootstrap-action-strip); +$fluent: digest-schema($dark-fluent-action-strip); +$indigo: digest-schema($dark-indigo-action-strip); diff --git a/projects/igniteui-angular/src/lib/action-strip/themes/light/_index.scss b/projects/igniteui-angular/src/lib/action-strip/themes/light/_index.scss new file mode 100644 index 00000000000..9436c880134 --- /dev/null +++ b/projects/igniteui-angular/src/lib/action-strip/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-action-strip, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/action-strip/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/action-strip/themes/light/_tokens.scss new file mode 100644 index 00000000000..f860918d21e --- /dev/null +++ b/projects/igniteui-angular/src/lib/action-strip/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/action-strip' as *; + +$base: digest-schema($light-action-strip); +$material: digest-schema($material-action-strip); +$bootstrap: digest-schema($bootstrap-action-strip); +$fluent: digest-schema($fluent-action-strip); +$indigo: digest-schema($indigo-action-strip); diff --git a/projects/igniteui-angular/src/lib/action-strip/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/action-strip/themes/shared/_fluent.scss new file mode 100644 index 00000000000..d492ac4f591 --- /dev/null +++ b/projects/igniteui-angular/src/lib/action-strip/themes/shared/_fluent.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-action-strip, fluent) { + [igxIconButton] { + --button-size: #{sizable(rem(28px), rem(28px), rem(32px))}; + } +} + \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/action-strip/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/action-strip/themes/shared/_index.scss new file mode 100644 index 00000000000..7760b2e7366 --- /dev/null +++ b/projects/igniteui-angular/src/lib/action-strip/themes/shared/_index.scss @@ -0,0 +1 @@ +@forward 'fluent'; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 933e40d9220..8514f76c6ac 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -144,13 +144,13 @@ // @include avatar($avatar-theme-map); // } - @if is-used('igx-action-strip', $exclude) { - $action-strip-theme-map: action-strip-theme( - $schema: $schema, - ); - $action-strip-theme-map: meta.call($theme-handler, $action-strip-theme-map); - @include action-strip($action-strip-theme-map); - } + // @if is-used('igx-action-strip', $exclude) { + // $action-strip-theme-map: action-strip-theme( + // $schema: $schema, + // ); + // $action-strip-theme-map: meta.call($theme-handler, $action-strip-theme-map); + // @include action-strip($action-strip-theme-map); + // } // @if is-used('igx-badge', $exclude) { // $badge-theme-map: badge-theme( From 31a91faca2f6e5755407d573540b0796f5da11b4 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Wed, 2 Apr 2025 13:21:55 +0300 Subject: [PATCH 062/131] refactor(rating): bundle styles with component (#15641) --- .../components/rating/_rating-theme.scss | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss index 97864b2414b..a79e8b1c627 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss @@ -2,6 +2,7 @@ @use 'sass:meta'; @use '../../base' as *; @use '../../themes/schemas' as *; +@use '../../../styles/themes/standalone' as *; //// /// @group themes @@ -48,25 +49,27 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin rating($theme) { - @include css-vars($theme: $theme); + @include layer(base) { + @include css-vars($theme: $theme); - igc-rating::part(label) { - color: var-get($theme, 'label-color'); - } + igc-rating::part(label) { + color: var-get($theme, 'label-color'); + } - igc-rating::part(value-label) { - color: var-get($theme, 'value-label'); - } + igc-rating::part(value-label) { + color: var-get($theme, 'value-label'); + } - igc-rating[disabled]::part(label), - igc-rating[disabled]::part(value-label) { - color: var-get($theme, 'disabled-label-color'); - } + igc-rating[disabled]::part(label), + igc-rating[disabled]::part(value-label) { + color: var-get($theme, 'disabled-label-color'); + } - igc-rating[disabled] { - --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')}; - --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')}; - --disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')}; - --disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')}; + igc-rating[disabled] { + --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')}; + --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')}; + --disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')}; + --disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')}; + } } } From 1d31578344d9312ec701c3b9ff2f0dd6edb274f4 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Mon, 7 Apr 2025 10:44:57 +0300 Subject: [PATCH 063/131] refactor(tabs): scope styles to component (#15659) --- .../core/styles/themes/generators/_base.scss | 14 +- .../core/styles/typography/_bootstrap.scss | 2 +- .../lib/core/styles/typography/_fluent.scss | 6 +- .../lib/core/styles/typography/_indigo.scss | 10 +- .../lib/core/styles/typography/_material.scss | 2 +- .../{ => content}/tab-content.component.html | 0 .../tabs/content/tab-content.component.scss | 38 +++++ .../tabs/content/tab-content.component.ts | 16 ++ .../{ => header}/tab-header.component.html | 2 +- .../tabs/header/tab-header.component.scss | 2 + .../tabs/{ => header}/tab-header.component.ts | 39 +++-- .../lib/tabs/tabs/header/themes/_base.scss | 125 ++++++++++++++++ .../tabs/header/themes/shared/_bootstrap.scss | 69 +++++++++ .../tabs/header/themes/shared/_fluent.scss | 28 ++++ .../tabs/header/themes/shared/_index.scss | 4 + .../tabs/header/themes/shared/_indigo.scss | 49 +++++++ .../tabs/header/themes/shared/_material.scss | 22 +++ .../tabs/{ => item}/tab-item.component.html | 0 .../tabs/tabs/item/tab-item.component.scss | 2 + .../tabs/{ => item}/tab-item.component.ts | 6 +- .../src/lib/tabs/tabs/item/themes/_base.scss | 116 +++++++++++++++ .../tabs/item/themes/shared/_bootstrap.scss | 40 +++++ .../tabs/tabs/item/themes/shared/_fluent.scss | 21 +++ .../tabs/tabs/item/themes/shared/_index.scss | 4 + .../tabs/tabs/item/themes/shared/_indigo.scss | 35 +++++ .../tabs/item/themes/shared/_material.scss | 21 +++ .../src/lib/tabs/tabs/public_api.ts | 12 +- .../lib/tabs/tabs/tab-content.component.ts | 15 -- .../src/lib/tabs/tabs/tabs.component.html | 16 +- .../src/lib/tabs/tabs/tabs.component.scss | 3 + .../src/lib/tabs/tabs/tabs.component.spec.ts | 138 ++++++++---------- .../src/lib/tabs/tabs/tabs.component.ts | 24 ++- .../src/lib/tabs/tabs/themes/_base.scss | 18 +++ .../src/lib/tabs/tabs/themes/dark/_index.scss | 6 + .../lib/tabs/tabs/themes/dark/_tokens.scss | 7 + .../lib/tabs/tabs/themes/light/_index.scss | 6 + .../lib/tabs/tabs/themes/light/_tokens.scss | 8 + .../tabs-showcase/tabs-showcase.sample.html | 19 ++- .../tabs-showcase/tabs-showcase.sample.scss | 9 ++ src/app/tabs-showcase/tabs-showcase.sample.ts | 31 +++- .../hound/components/tabs/_overwrites.scss | 4 +- 41 files changed, 833 insertions(+), 156 deletions(-) rename projects/igniteui-angular/src/lib/tabs/tabs/{ => content}/tab-content.component.html (100%) create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.ts rename projects/igniteui-angular/src/lib/tabs/tabs/{ => header}/tab-header.component.html (78%) create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.scss rename projects/igniteui-angular/src/lib/tabs/tabs/{ => header}/tab-header.component.ts (81%) create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss rename projects/igniteui-angular/src/lib/tabs/tabs/{ => item}/tab-item.component.html (100%) create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/item/tab-item.component.scss rename projects/igniteui-angular/src/lib/tabs/tabs/{ => item}/tab-item.component.ts (55%) create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss delete mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/tab-content.component.ts create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/tabs/tabs/themes/light/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 8514f76c6ac..090b989bd79 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -600,13 +600,13 @@ // @include switch($switch-theme-map); // } - @if is-used('igx-tabs', $exclude) { - $tabs-theme-map: tabs-theme( - $schema: $schema, - ); - $tabs-theme-map: meta.call($theme-handler, $tabs-theme-map); - @include tabs($tabs-theme-map); - } + //@if is-used('igx-tabs', $exclude) { + // $tabs-theme-map: tabs-theme( + // $schema: $schema, + // ); + // $tabs-theme-map: meta.call($theme-handler, $tabs-theme-map); + // @include tabs($tabs-theme-map); + //} //@if is-used('igx-stepper', $exclude) { // $stepper-theme-map: stepper-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index c666d1f77af..a81b7d86bc9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -102,7 +102,7 @@ @include switch-typography($categories: ( label: 'body-1' )); - @include tabs-typography(); + //@include tabs-typography(); @include time-picker-typography($categories: ( header-hour: 'h4', selected-time: 'h4' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index adf97aee28b..27fc8e1c0b7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -107,9 +107,9 @@ @include switch-typography($categories: ( label: 'body-2' )); - @include tabs-typography($categories: ( - label: 'body-2' - )); + //@include tabs-typography($categories: ( + // label: 'body-2' + //)); @include time-picker-typography(); //@include stepper-typography(); // @include toast-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 86de17897c6..e95735510c0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -103,11 +103,11 @@ @include switch-typography($categories: ( label: 'body-2' )); - @include tabs-typography($categories: ( - label: 'subtitle-2', - )) { - --ig-subtitle-2-text-transform: uppercase; - }; + //@include tabs-typography($categories: ( + // label: 'subtitle-2', + //)) { + // --ig-subtitle-2-text-transform: uppercase; + //}; @include time-picker-typography($categories: ( header-hour: 'h5', selected-time: 'h6' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 0d98c4e3061..114bba44b64 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -60,7 +60,7 @@ // @include slider-typography(); // @include snackbar-typography(); @include switch-typography(); - @include tabs-typography(); + //@include tabs-typography(); @include time-picker-typography(); //@include stepper-typography(); // @include toast-typography(); diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tab-content.component.html b/projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.html similarity index 100% rename from projects/igniteui-angular/src/lib/tabs/tabs/tab-content.component.html rename to projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.html diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.scss b/projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.scss new file mode 100644 index 00000000000..b1dce18857e --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.scss @@ -0,0 +1,38 @@ +@use 'igniteui-theming/sass/animations' as *; +@use 'sass:map'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'styles/themes/standalone' as *; + +@include layer(base) { + @include b(igx-tabs-content) { + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + flex: 1 1 auto; + + @include e(inner) { + position: absolute; + inset: 0; + overflow-x: hidden; + overflow-y: auto; + flex: 1 1 auto; + + &::-moz-focus-inner { + // remove dotted border on :focus in firefox + border: 0; + } + + &:focus { + outline-width: 0; + } + + &[tabindex='0'] { + position: relative; + } + } + } + +} diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.ts new file mode 100644 index 00000000000..364c3b40b1c --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.ts @@ -0,0 +1,16 @@ +import {Component, HostBinding, ViewEncapsulation} from '@angular/core'; +import { IgxTabContentDirective } from '../../tab-content.directive'; +import { IgxTabContentBase } from '../../tabs.base'; + +@Component({ + selector: 'igx-tab-content', + templateUrl: 'tab-content.component.html', + styleUrl: 'tab-content.component.css', + encapsulation: ViewEncapsulation.None, + providers: [{ provide: IgxTabContentBase, useExisting: IgxTabContentComponent }], +}) +export class IgxTabContentComponent extends IgxTabContentDirective { + /** @hidden */ + @HostBinding('class.igx-tabs-content__inner') + public cssClass = true; +} diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.html b/projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.html similarity index 78% rename from projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.html rename to projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.html index 832c9fd7d13..efa81007c9c 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.html +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.html @@ -1,6 +1,6 @@ -
+
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.scss new file mode 100644 index 00000000000..b8f7e512fe8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.scss @@ -0,0 +1,2 @@ +@use 'themes/base'; +@use 'themes/shared'; diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.ts similarity index 81% rename from projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.ts rename to projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.ts index 8fd928e9042..0cd07a6ddbe 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.ts @@ -1,34 +1,51 @@ -import { AfterViewInit, Component, ElementRef, HostBinding, HostListener, NgZone, OnDestroy } from '@angular/core'; -import { IgxTabItemDirective } from '../tab-item.directive'; -import { IgxTabHeaderDirective } from '../tab-header.directive'; -import { IgxTabHeaderBase } from '../tabs.base'; -import { IgxTabsComponent } from './tabs.component'; -import { getResizeObserver } from '../../core/utils'; -import { PlatformUtil } from '../../core/utils'; -import { IgxDirectionality } from '../../services/direction/directionality'; +import { + AfterViewInit, + Component, + ElementRef, + HostBinding, + HostListener, + NgZone, + OnDestroy, + ViewEncapsulation +} from '@angular/core'; +import { IgxTabItemDirective } from '../../tab-item.directive'; +import { IgxTabHeaderDirective } from '../../tab-header.directive'; +import { IgxTabHeaderBase } from '../../tabs.base'; +import { IgxTabsComponent } from '../tabs.component'; +import { getResizeObserver } from '../../../core/utils'; +import { PlatformUtil } from '../../../core/utils'; +import { IgxDirectionality } from '../../../services/direction/directionality'; @Component({ selector: 'igx-tab-header', templateUrl: 'tab-header.component.html', + styleUrl: 'tab-header.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxTabHeaderComponent }], standalone: true }) export class IgxTabHeaderComponent extends IgxTabHeaderDirective implements AfterViewInit, OnDestroy { /** @hidden @internal */ - @HostBinding('class.igx-tabs__header-item--selected') + @HostBinding('class.igx-tab-header--selected') public get provideCssClassSelected(): boolean { return this.tab.selected; } /** @hidden @internal */ - @HostBinding('class.igx-tabs__header-item--disabled') + @HostBinding('class.igx-tab-header--disabled') public get provideCssClassDisabled(): boolean { return this.tab.disabled; } /** @hidden @internal */ - @HostBinding('class.igx-tabs__header-item') + @HostBinding('class.igx-tab-header--justify') + public get applyJustifyClass(): boolean { + return this.tabs.tabAlignment === 'justify'; // Correctly accessing tabsAlignment + } + + /** @hidden @internal */ + @HostBinding('class.igx-tab-header') public cssClass = true; private _resizeObserver: ResizeObserver; diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss new file mode 100644 index 00000000000..56bbcc14ccd --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss @@ -0,0 +1,125 @@ +@use 'igniteui-theming/sass/animations' as *; +@use 'sass:map'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'styles/themes/standalone' as *; +@use '../../themes/light/tokens' as *; + +$theme: $material; + +$variant: map.get($theme, '_meta', 'variant'); +$not-bootstrap-theme: $variant != 'bootstrap'; +$bootstrap-theme: $variant == 'bootstrap'; +$indigo-theme: $variant == 'indigo'; +$theme-variant: map.get($theme, '_meta', 'theme-variant'); + +@include layer(base) { + @include b(igx-tab-header) { + --igx-ripple-color: var(--tab-ripple-color); + + display: inline-flex; + justify-content: center; + align-items: center; + min-width: rem(90px); + max-width: rem(360px); + word-wrap: break-word; + // Flex basis & shrink are Needed for IE11 + flex-basis: auto; + flex-shrink: 0; + padding: rem(11px) rem(16px); + overflow: hidden; + cursor: pointer; + position: relative; + user-select: none; + background: var-get($theme, 'item-background'); + color: var-get($theme, 'item-text-color'); + outline: 0; + + igx-icon { + color: var-get($theme, 'item-icon-color'); + } + + &::-moz-focus-inner { + border: 0; + } + + &:focus { + background: var-get($theme, 'item-active-background'); + color: var-get($theme, 'item-hover-color'); + border-bottom-color: transparent; + } + + &:hover { + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-color'); + } + + &:hover, + &:focus { + igx-icon { + color: var-get($theme, 'item-hover-icon-color'); + } + } + + @include m(justify) { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + + @include m(selected) { + outline: 0; + color: var-get($theme, 'item-active-color'); + + &:hover, + &:focus { + background: var-get($theme, 'item-active-background'); + color: if($variant == 'fluent', var-get($theme, 'item-hover-color'), var-get($theme, 'item-active-color')); + + igx-icon { + color: var-get($theme, 'item-active-icon-color'); + } + } + + igx-icon { + color: var-get($theme, 'item-active-icon-color'); + } + } + + @include m(disabled) { + outline: 0; + color: var-get($theme, 'item-disabled-color'); + cursor: default; + pointer-events: none; + + igx-icon { + color: var-get($theme, 'item-disabled-icon-color'); + } + } + + @include e(inner) { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + + > [igxtabheaderlabel] { + @include type-style(button) { + margin: 0; + } + + @include line-clamp(2, true, true); + } + + > [igxtabheadericon] { + margin-bottom: rem(8px); + + &:last-child { + margin-bottom: 0; + } + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..6a3bc7d9254 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss @@ -0,0 +1,69 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-tabs, bootstrap) { + %igx-tab-header--focus { + border: none; + box-shadow: inset 0 0 0 rem(2px) var-get($_theme, 'item-hover-color'); + border-radius: rem(4px); + z-index: 1; + + &::after { + display: none; + } + } + + @include b(igx-tab-header) { + min-height: rem(48px); + padding-block: rem(12px); + border-start-start-radius: var-get($_theme, 'border-radius'); + border-start-end-radius: var-get($_theme, 'border-radius'); + + &:hover { + box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color--hover'); + } + + &:focus { + @extend %igx-tab-header--focus; + } + + @include m(selected) { + background: var-get($_theme, 'item-active-background'); + position: relative; + box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color'); + z-index: 1; + + &:focus { + @extend %igx-tab-header--focus; + } + + &:not(:focus) { + &::before { + content: ''; + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 100%; + height: rem(1px); + background: linear-gradient( + to right, + var-get($_theme, 'border-color') 1px, + var-get($_theme, 'item-active-background') 1px, + var-get($_theme, 'item-active-background') calc(100% - 1px), + var-get($_theme, 'border-color') calc(100% - 1px) + ); + z-index: -1; + } + } + + &:hover { + box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color'); + } + } + } +} + diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss new file mode 100644 index 00000000000..926f8a230f3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss @@ -0,0 +1,28 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-tabs, fluent) { + $tabs-animation-function: cubic-bezier(.35, 0, .25, 1); + + @include b(igx-tab-header) { + --ig-button-font-weight: 500; + + min-height: rem(44px); + transition: all .3s $tabs-animation-function; + border: rem(1px) solid var-get($_theme, 'border-color'); + + &:hover, + &:focus { + border: rem(1px) solid var-get($_theme, 'border-color--hover'); + } + + @include m(selected) { + --ig-button-font-weight: 600; + } + } +} + diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_index.scss new file mode 100644 index 00000000000..67c01af0b9b --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'bootstrap'; +@forward 'indigo'; +@forward 'fluent'; +@forward 'material'; diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss new file mode 100644 index 00000000000..9c513b56cd1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss @@ -0,0 +1,49 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-tabs, indigo) { + $tabs-animation-function: cubic-bezier(.35, 0, .25, 1); + + @include b(igx-tab-header) { + min-height: rem(40px); + + igx-icon { + --ig-size: 2; + } + + transition: all .3s $tabs-animation-function; + border: rem(1px) solid var-get($_theme, 'border-color'); + + border-top: rem(1px) solid transparent; + border-inline: none; + + &:hover, + &:focus { + border-top: rem(1px) solid transparent; + border-inline: none; + border-bottom: rem(1px) solid var-get($_theme, 'border-color'); + } + + @include m(selected) { + &:hover, + &:focus-visible { + background: var-get($_theme, 'item-hover-background'); + } + } + + @include e(inner) { + > [igxtabheaderlabel] { + @include type-style(subtitle-2) { + --ig-subtitle-2-font-weight: 600; + + margin: 0; + } + } + } + } +} + diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss new file mode 100644 index 00000000000..dda9e832beb --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss @@ -0,0 +1,22 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-tabs, material) { + $tabs-animation-function: cubic-bezier(.35, 0, .25, 1); + + @include b(igx-tab-header) { + min-height: rem(48px); + transition: all .3s $tabs-animation-function; + border: rem(1px) solid var-get($_theme, 'border-color'); + + &:hover, + &:focus { + border: rem(1px) solid var-get($_theme, 'border-color--hover'); + } + } +} + diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tab-item.component.html b/projects/igniteui-angular/src/lib/tabs/tabs/item/tab-item.component.html similarity index 100% rename from projects/igniteui-angular/src/lib/tabs/tabs/tab-item.component.html rename to projects/igniteui-angular/src/lib/tabs/tabs/item/tab-item.component.html diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/tab-item.component.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/tab-item.component.scss new file mode 100644 index 00000000000..b8f7e512fe8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/tab-item.component.scss @@ -0,0 +1,2 @@ +@use 'themes/base'; +@use 'themes/shared'; diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tab-item.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs/item/tab-item.component.ts similarity index 55% rename from projects/igniteui-angular/src/lib/tabs/tabs/tab-item.component.ts rename to projects/igniteui-angular/src/lib/tabs/tabs/item/tab-item.component.ts index ce23b6cba4d..ae874bbd08a 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tab-item.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/tab-item.component.ts @@ -1,9 +1,11 @@ -import { Component } from '@angular/core'; -import { IgxTabItemDirective } from '../tab-item.directive'; +import {Component, ViewEncapsulation} from '@angular/core'; +import { IgxTabItemDirective } from '../../tab-item.directive'; @Component({ selector: 'igx-tab-item', templateUrl: 'tab-item.component.html', + styleUrl: 'tab-item.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabItemDirective, useExisting: IgxTabItemComponent }], standalone: true }) diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss new file mode 100644 index 00000000000..8fa2e62baf3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss @@ -0,0 +1,116 @@ +@use 'igniteui-theming/sass/animations' as *; +@use 'sass:map'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'styles/themes/standalone' as *; +@use '../../themes/light/tokens' as *; + +$theme: $material; + +@include layer(base) { + $tabs-animation-function: cubic-bezier(.35, 0, .25, 1); + + @include b(igx-tabs-header) { + display: flex; + align-items: center; + overflow: hidden; + flex: 0 0 auto; + background: var-get($theme, 'item-background'); + z-index: 1; + + @include e(content) { + display: flex; + align-items: center; + flex: 1 1 auto; + overflow: hidden; + scroll-behavior: smooth; + } + + @include e(wrapper) { + position: relative; + flex-grow: 1; + } + + @include e(active-indicator) { + position: absolute; + bottom: 0; + // We need to explicitly set the default for IE 11 + left: 0; + transform: translateX(0); + height: rem(2px); + min-width: rem(90px); + background: var-get($theme, 'indicator-color'); + transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function; + } + } + + @include b(igx-tabs-header-button) { + --igx-ripple-color: var(--button-ripple-color); + + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + border: none; + padding: 0; + min-width: rem(48px); + width: rem(48px); + cursor: pointer; + position: relative; + background: var-get($theme, 'button-background'); + color: var-get($theme, 'button-color'); + outline: 0; + align-self: stretch; + height: auto; + transition: none; + border-radius: border-radius(0); + + &:hover { + background: var-get($theme, 'button-hover-background'); + color: var-get($theme, 'button-hover-color'); + } + + &:focus { + outline: 0; + } + + &::-moz-focus-inner { + // remove focus dotted border in firefox + border: 0; + } + + &:disabled { + color: var-get($theme, 'button-disabled-color'); + cursor: default; + pointer-events: none; + } + + &--none { + display: none; + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + + @include b(igx-tabs-header-scroll) { + display: flex; + height: 100%; + + @include m(start) { + justify-content: flex-start; + } + + @include m(end) { + justify-content: flex-end; + min-width: max-content; + } + + @include m(center) { + justify-content: center; + min-width: max-content; + } + } +} diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..feea13a2d60 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss @@ -0,0 +1,40 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-tabs, bootstrap) { + @include b(igx-tabs-header) { + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 100%; + height: rem(1px); + background: var-get($_theme, 'border-color'); + z-index: 0; + } + + @include e(active-indicator) { + display: none; + } + } + + @include b(igx-tabs-header-button) { + igx-icon { + $icon-size: rem(24px); + + --size: #{$icon-size}; + } + + &:focus { + background: var-get($_theme, 'button-hover-background'); + } + } +} + diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_fluent.scss new file mode 100644 index 00000000000..0aae271863a --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_fluent.scss @@ -0,0 +1,21 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-tabs, fluent) { + @include b(igx-tabs-header-button) { + &:focus { + background: var-get($_theme, 'button-hover-background'); + } + + igx-icon { + $icon-size: rem(24px); + + --size: #{$icon-size}; + } + } +} + diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_index.scss new file mode 100644 index 00000000000..67c01af0b9b --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'bootstrap'; +@forward 'indigo'; +@forward 'fluent'; +@forward 'material'; diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_indigo.scss new file mode 100644 index 00000000000..ffa0943fbfb --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_indigo.scss @@ -0,0 +1,35 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-tabs, indigo) { + @include b(igx-tabs-header) { + @include e(active-indicator) { + height: rem(3px); + } + } + + @include b(igx-tabs-header-button) { + min-width: rem(40px); + width: rem(40px); + + igx-icon { + $icon-size: rem(16px); + + --size: #{$icon-size}; + } + + &::after { + content: ''; + position: absolute; + pointer-events: none; + width: 100%; + height: 100%; + border-bottom: rem(1px) solid var(--nav-btn-border-color); + } + } +} + diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss new file mode 100644 index 00000000000..57bb451173a --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss @@ -0,0 +1,21 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-tabs, material) { + @include b(igx-tabs-header-button) { + &:focus { + background: var-get($_theme, 'button-hover-background'); + } + + igx-icon { + $icon-size: rem(24px); + + --size: #{$icon-size}; + } + } +} + diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/public_api.ts b/projects/igniteui-angular/src/lib/tabs/tabs/public_api.ts index 96c54c7085f..6dcfb38b2cc 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/public_api.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs/public_api.ts @@ -1,16 +1,16 @@ import { IgxPrefixDirective } from '../../directives/prefix/prefix.directive'; import { IgxSuffixDirective } from '../../directives/suffix/suffix.directive'; -import { IgxTabContentComponent } from './tab-content.component'; -import { IgxTabHeaderComponent } from './tab-header.component'; -import { IgxTabItemComponent } from './tab-item.component'; +import { IgxTabContentComponent } from './content/tab-content.component'; +import { IgxTabHeaderComponent } from './header/tab-header.component'; +import { IgxTabItemComponent } from './item/tab-item.component'; import { IgxTabsComponent } from './tabs.component'; import { IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective } from './tabs.directives'; export * from './tabs.component'; -export * from './tab-item.component'; -export * from './tab-header.component'; +export * from './item/tab-item.component'; +export * from './header/tab-header.component'; export * from './tabs.directives'; -export * from './tab-content.component'; +export * from './content/tab-content.component'; export { ITabsSelectedIndexChangingEventArgs, ITabsSelectedItemChangeEventArgs diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tab-content.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs/tab-content.component.ts deleted file mode 100644 index 4b131585242..00000000000 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tab-content.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, HostBinding } from '@angular/core'; -import { IgxTabContentDirective } from '../tab-content.directive'; -import { IgxTabContentBase } from '../tabs.base'; - -@Component({ - selector: 'igx-tab-content', - templateUrl: 'tab-content.component.html', - providers: [{ provide: IgxTabContentBase, useExisting: IgxTabContentComponent }], - imports: [] -}) -export class IgxTabContentComponent extends IgxTabContentDirective { - /** @hidden */ - @HostBinding('class.igx-tabs__panel') - public cssClass = true; -} diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.html b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.html index 94df1e7c990..33755e11246 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.html +++ b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.html @@ -1,25 +1,25 @@ -
- -
-
-
+
+
+
@for (tab of items; track tab; let i = $index) { }
@if (items.length > 0) { -
+
}
-
-
+
@for (tab of items; track tab; let i = $index) { } diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.scss b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.scss new file mode 100644 index 00000000000..c7019d1c431 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.scss @@ -0,0 +1,3 @@ +@use 'themes/base'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts index f4441d67dbb..2d8d8d3ea8c 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts @@ -1,6 +1,6 @@ import { QueryList } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { IgxTabItemComponent } from './tab-item.component'; +import { IgxTabItemComponent } from './item/tab-item.component'; import { IgxTabsAlignment, IgxTabsComponent } from './tabs.component'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -17,7 +17,7 @@ import { } from '../../test-utils/tabs-components.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; -import { IgxTabContentComponent } from './tab-content.component'; +import { IgxTabContentComponent } from './content/tab-content.component'; import { RoutingTestGuard } from '../../test-utils/routing-test-guard.spec'; import { RoutingView1Component, RoutingView2Component, RoutingView3Component, RoutingView4Component, RoutingView5Component } from '../../test-utils/routing-view-components.spec'; @@ -28,12 +28,24 @@ const KEY_END_EVENT = new KeyboardEvent('keydown', { key: 'End', bubbles: true } const KEY_ENTER_EVENT = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }); const KEY_SPACE_EVENT = new KeyboardEvent('keydown', { key: ' ', bubbles: true }); -describe('IgxTabs', () => { +fdescribe('IgxTabs', () => { configureTestSuite({ checkLeaks: true }); - const tabItemNormalCssClass = 'igx-tabs__header-item'; - const tabItemSelectedCssClass = 'igx-tabs__header-item--selected'; - const headerScrollCssClass = 'igx-tabs__header-scroll'; + const tabItemNormalCssClass = 'igx-tab-header'; + const tabItemSelectedCssClass = 'igx-tab-header--selected'; + const headerScrollCssClass = 'igx-tabs-header-scroll'; + + // Helper function to get the total width of the headers + function calculateTotalHeadersWidth(headers: any[]) { + return headers.reduce((total: any, header: { offsetWidth: any; }) => total + header.offsetWidth, 0); + } + + // Helper function to get the left and right spaces of the container + function getLeftAndRightSpaces(headers: string | any[], container: { offsetWidth: number; }) { + const leftSpace = headers[0].offsetLeft; + const rightSpace = container.offsetWidth - (headers[headers.length - 1].offsetLeft + headers[headers.length - 1].offsetWidth); + return { leftSpace, rightSpace }; + } beforeAll(waitForAsync(() => { const testRoutes = [ @@ -165,9 +177,9 @@ describe('IgxTabs', () => { for (let i = 0; i < tabHeaderElements.length; i++) { const headerDiv = tabHeaderElements[i].firstChild; expect(headerDiv.firstChild.localName).toBe('igx-icon'); - expect(headerDiv.firstChild.innerText).toBe(icons[i]); + expect(headerDiv.firstChild.textContent).toBe(icons[i]); expect(headerDiv.lastChild.localName).toBe('span'); - expect(headerDiv.lastChild.innerText).toBe('Tab ' + (i + 1)); + expect(headerDiv.lastChild.textContent).toBe('Tab ' + (i + 1)); } tick(); })); @@ -367,8 +379,8 @@ describe('IgxTabs', () => { const headerDivs = tabs.items.map(item => item.headerComponent.nativeElement.firstChild); //Get header's div containers headerDivs.forEach((header, i) => { - expect(header.firstChild.innerText).toBe(`T${i + 1}`); - expect(header.lastChild.innerText).toBe(`Tab ${i + 1}`); + expect(header.firstChild.textContent).toBe(`T${i + 1}`); + expect(header.lastChild.textContent).toBe(`Tab ${i + 1}`); }); tick(); })); @@ -386,7 +398,7 @@ describe('IgxTabs', () => { fixture.detectChanges(); expect(tabs.selectedItem).toBe(tabsItems[2]); - expect(tabs.selectedItem.headerComponent.nativeElement.firstChild.lastChild.innerText).toBe('Tab 3'); + expect(tabs.selectedItem.headerComponent.nativeElement.firstChild.lastChild.textContent).toBe('Tab 3'); })); }); @@ -476,8 +488,8 @@ describe('IgxTabs', () => { expect(tabs.selectedIndex).toBe(1); const selectedPanel = document.getElementsByTagName('igx-tab-content')[1] as HTMLElement; - expect(selectedPanel.innerText.trim()).toEqual('Tab content 2'); - const indicator = dom.query(By.css('.igx-tabs__header-active-indicator')); + expect(selectedPanel.textContent.trim()).toEqual('Tab content 2'); + const indicator = dom.query(By.css('.igx-tabs-header__active-indicator')); expect(indicator.nativeElement.style.width).toBe('90px'); })); @@ -1252,29 +1264,29 @@ describe('IgxTabs', () => { it('show tabs prefix and suffix properly.', () => { const header0Elements = headers[0].children; expect(header0Elements[0].localName).toBe('span'); - expect(header0Elements[0].innerText).toBe('Test:'); + expect(header0Elements[0].textContent).toBe('Test:'); expect(header0Elements[1].children[0].localName).toBe('igx-icon'); - expect(header0Elements[1].children[0].innerText).toBe('library_music'); + expect(header0Elements[1].children[0].textContent).toBe('library_music'); expect(header0Elements[1].children[1].localName).toBe('span'); - expect(header0Elements[1].children[1].innerText).toBe('Tab 1'); + expect(header0Elements[1].children[1].innerText).toBe('TAB 1'); expect(header0Elements[2].localName).toBe('igx-icon'); - expect(header0Elements[2].innerText).toBe('close'); + expect(header0Elements[2].textContent).toBe('close'); const header1Elements = headers[1].children; expect(header1Elements[0].localName).toBe('span'); - expect(header1Elements[0].innerText).toBe('Test:'); + expect(header1Elements[0].textContent).toBe('Test:'); expect(header1Elements[1].children[0].localName).toBe('igx-icon'); - expect(header1Elements[1].children[0].innerText).toBe('video_library'); + expect(header1Elements[1].children[0].textContent).toBe('video_library'); expect(header1Elements[1].children[1].localName).toBe('span'); - expect(header1Elements[1].children[1].innerText).toBe('Tab 2'); + expect(header1Elements[1].children[1].innerText).toBe('TAB 2'); const header2Elements = headers[2].children; expect(header2Elements[0].children[0].localName).toBe('igx-icon'); - expect(header2Elements[0].children[0].innerText).toBe('library_books'); + expect(header2Elements[0].children[0].textContent).toBe('library_books'); expect(header2Elements[0].children[1].localName).toBe('span'); - expect(header2Elements[0].children[1].innerText).toBe('Tab 3'); + expect(header2Elements[0].children[1].innerText).toBe('TAB 3'); expect(header2Elements[1].localName).toBe('igx-icon'); - expect(header2Elements[1].innerText).toBe('close'); + expect(header2Elements[1].textContent).toBe('close'); }); it('tabAlignment is set to "start" by default.', () => { @@ -1302,34 +1314,36 @@ describe('IgxTabs', () => { fixture.detectChanges(); await wait(200); - const diffs: number[] = []; - const expectedWidth = Math.round(actualHeadersContainer.offsetWidth / tabItems.length); - headers.map((elem) => diffs.push(elem.offsetWidth - expectedWidth)); - const result = diffs.reduce((a, b) => a - b); - expect(result).toBeLessThan(3); + // Ensure the correct `justify` class is applied + expect(actualHeadersContainer.classList.contains(headerScrollCssClass + '--justify')).toBeTruthy(); + + // Calculate the expected width for each tab by dividing the total container width by the number of tabs + const totalContainerWidth = actualHeadersContainer.offsetWidth; + const expectedWidth = totalContainerWidth / tabItems.length; + + // Define a reasonable tolerance margin (3px or 1% of the expected width, whichever is greater) + const tolerance = Math.max(3, expectedWidth * 0.03); // 3px or 3% of the expected width, whichever is greater + + // Assert that each tab's width is within the tolerance of the expected width + headers.forEach((elem: { offsetWidth: number; }) => { + const diff = Math.abs(elem.offsetWidth - expectedWidth); + expect(diff).toBeLessThan(tolerance); // Tolerance margin + }); }); it('aligns tab headers properly when tabAlignment="center".', async () => { tabs.tabAlignment = IgxTabsAlignment.center; fixture.detectChanges(); await wait(200); - expect(actualHeadersContainer.classList.contains(headerScrollCssClass + '--center')).toBeTruthy(); - const widths = []; - headers.map((elem) => { - widths.push(elem.offsetWidth); - }); + // Ensure the correct centering class is applied + expect(actualHeadersContainer.classList.contains(headerScrollCssClass + '--center')).toBeTruthy(); - const result = widths.reduce((a, b) => a + b); - const noTabsAreaWidth = actualHeadersContainer.offsetWidth - result; - const offsetRight = actualHeadersContainer.offsetWidth - headers[2].offsetLeft - headers[2].offsetWidth; + // Get left and right space for the tabs to be centered + const { leftSpace, rightSpace } = getLeftAndRightSpaces(headers, actualHeadersContainer); - expect(Math.round(noTabsAreaWidth / 2) - headers[0].offsetLeft).toBeLessThan(3); - expect(offsetRight - headers[0].offsetLeft).toBeGreaterThanOrEqual(0); - expect(offsetRight - headers[0].offsetLeft).toBeLessThan(3); - expect(Math.abs(150 - widths[0])).toBeLessThan(3); - expect(Math.abs(113 - widths[1])).toBeLessThan(3); - expect(Math.abs(104 - widths[2])).toBeLessThan(3); + // Assert that the left and right spaces are approximately equal + expect(Math.abs(leftSpace - rightSpace)).toBeLessThan(3); }); it('aligns tab headers properly when tabAlignment="start".', async () => { @@ -1337,21 +1351,7 @@ describe('IgxTabs', () => { fixture.detectChanges(); await wait(200); - const widths = []; - headers.map((elem) => { - widths.push(elem.offsetWidth); - }); - - const result = widths.reduce((a, b) => a + b); - const noTabsAreaWidth = actualHeadersContainer.offsetWidth - result; - const offsetRight = actualHeadersContainer.offsetWidth - headers[2].offsetLeft - headers[2].offsetWidth; - expect(headers[0].offsetLeft).toBe(0); - expect(offsetRight - noTabsAreaWidth).toBeGreaterThanOrEqual(0); - expect(offsetRight - noTabsAreaWidth).toBeLessThan(3); - expect(Math.abs(150 - widths[0])).toBeLessThan(3); - expect(Math.abs(113 - widths[1])).toBeLessThan(3); - expect(Math.abs(104 - widths[2])).toBeLessThan(3); }); it('aligns tab headers properly when tabAlignment="end".', async () => { @@ -1359,39 +1359,25 @@ describe('IgxTabs', () => { fixture.detectChanges(); await wait(200); - const widths = []; - headers.map((elem) => { - widths.push(elem.offsetWidth); - }); - - const result = widths.reduce((a, b) => a + b); - const noTabsAreaWidth = actualHeadersContainer.offsetWidth - result; - const offsetRight = actualHeadersContainer.offsetWidth - headers[2].offsetLeft - headers[2].offsetWidth; + const offsetRight = actualHeadersContainer.offsetWidth - (headers[headers.length - 1].offsetLeft + headers[headers.length - 1].offsetWidth); expect(offsetRight).toBe(0); - expect(headers[0].offsetLeft - noTabsAreaWidth).toBeGreaterThanOrEqual(0); - expect(headers[0].offsetLeft - noTabsAreaWidth).toBeLessThan(3); - expect(Math.abs(150 - widths[0])).toBeLessThan(3); - expect(Math.abs(113 - widths[1])).toBeLessThan(3); - expect(Math.abs(104 - widths[2])).toBeLessThan(3); }); it('should hide scroll buttons if visible when alignment is set to "justify".', async () => { + // Set the container width and trigger change detection fixture.componentInstance.wrapperDiv.nativeElement.style.width = '360px'; fixture.detectChanges(); await wait(200); - const leftScrollButton = tabs.headerContainer.nativeElement.children[0]; - const rightScrollButton = tabs.headerContainer.nativeElement.children[2]; - expect(leftScrollButton.clientWidth).toBeTruthy(); - expect(rightScrollButton.clientWidth).toBeTruthy(); + const scrollButtons = fixture.debugElement.query(By.css('.igx-tabs-header-button')).nativeElement; tabs.tabAlignment = IgxTabsAlignment.justify; fixture.detectChanges(); - await wait(500); + await wait(200); - expect(leftScrollButton.clientWidth).toBeFalsy(); - expect(rightScrollButton.clientWidth).toBeFalsy(); + const updatedStyle = window.getComputedStyle(scrollButtons); + expect(updatedStyle.display).toBe('none'); }); }); diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts index 30de2792bb3..dddfdf7b4e5 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts @@ -1,4 +1,16 @@ -import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostBinding, Inject, Input, NgZone, OnDestroy, ViewChild } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + HostBinding, + Inject, + Input, + NgZone, + OnDestroy, + ViewChild, + ViewEncapsulation +} from '@angular/core'; import { getResizeObserver, mkenum, PlatformUtil } from '../../core/utils'; import { IgxAngularAnimationService } from '../../services/animation/angular-animation-service'; import { AnimationService } from '../../services/animation/animation'; @@ -62,6 +74,8 @@ let NEXT_TAB_ID = 0; @Component({ selector: 'igx-tabs', templateUrl: 'tabs.component.html', + styleUrl: 'tabs.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], imports: [IgxRippleDirective, IgxIconComponent, NgClass, NgTemplateOutlet, IgxIconButtonDirective] }) @@ -191,10 +205,10 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit, /** @hidden */ public resolveHeaderScrollClasses() { return { - 'igx-tabs__header-scroll--start': this.tabAlignment === 'start', - 'igx-tabs__header-scroll--end': this.tabAlignment === 'end', - 'igx-tabs__header-scroll--center': this.tabAlignment === 'center', - 'igx-tabs__header-scroll--justify': this.tabAlignment === 'justify', + 'igx-tabs-header-scroll--start': this.tabAlignment === 'start', + 'igx-tabs-header-scroll--end': this.tabAlignment === 'end', + 'igx-tabs-header-scroll--center': this.tabAlignment === 'center', + 'igx-tabs-header-scroll--justify': this.tabAlignment === 'justify', }; } diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/themes/_base.scss b/projects/igniteui-angular/src/lib/tabs/tabs/themes/_base.scss new file mode 100644 index 00000000000..9bb48465cc1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/themes/_base.scss @@ -0,0 +1,18 @@ +@use 'igniteui-theming/sass/animations' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; + +$theme: $material; + +@include layer(base) { + @include b(igx-tabs) { + --nav-btn-border-color: #{var-get($theme, 'border-color')}; + + display: flex; + flex-direction: column; + overflow: hidden; + } +} diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/tabs/tabs/themes/dark/_index.scss new file mode 100644 index 00000000000..5b407e97032 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-tabs, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/tabs/tabs/themes/dark/_tokens.scss new file mode 100644 index 00000000000..f892fe1d635 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/tabs' as *; + +$material: digest-schema($dark-material-tabs); +$bootstrap: digest-schema($dark-bootstrap-tabs); +$fluent: digest-schema($dark-fluent-tabs); +$indigo: digest-schema($dark-indigo-tabs); diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/themes/light/_index.scss b/projects/igniteui-angular/src/lib/tabs/tabs/themes/light/_index.scss new file mode 100644 index 00000000000..36ccfd514a6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-tabs, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/tabs/tabs/themes/light/_tokens.scss new file mode 100644 index 00000000000..0ede2502711 --- /dev/null +++ b/projects/igniteui-angular/src/lib/tabs/tabs/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/tabs' as *; + +$base: digest-schema($light-tabs); +$material: digest-schema($material-tabs); +$bootstrap: digest-schema($bootstrap-tabs); +$fluent: digest-schema($fluent-tabs); +$indigo: digest-schema($indigo-tabs); diff --git a/src/app/tabs-showcase/tabs-showcase.sample.html b/src/app/tabs-showcase/tabs-showcase.sample.html index 4509bd5372b..4fdcfd3e5ae 100644 --- a/src/app/tabs-showcase/tabs-showcase.sample.html +++ b/src/app/tabs-showcase/tabs-showcase.sample.html @@ -3,11 +3,12 @@ Angular @for (contact of contacts; track contact.id) { - - + + @if(!properties.hideIcon) { folder } @@ -30,9 +31,9 @@ [activation]="properties.activation"> @for (contact of contacts; track contact.id) { - + @if(!properties.hideIcon) { - folder + } @if(!properties.hideText) { {{ contact.text }} @@ -48,15 +49,14 @@
-

Item actions

-
+ +
-
-

Move selection

+
-
-

Select by index

+
diff --git a/src/app/tabs-showcase/tabs-showcase.sample.scss b/src/app/tabs-showcase/tabs-showcase.sample.scss index bf3227cd66a..0fa28436477 100644 --- a/src/app/tabs-showcase/tabs-showcase.sample.scss +++ b/src/app/tabs-showcase/tabs-showcase.sample.scss @@ -14,6 +14,10 @@ strong { display: flex; } +.panel-actions--section { + gap: 16px; +} + .panel-actions:not(.panel-actions--col) { gap: 8px; } @@ -22,6 +26,11 @@ strong { flex-direction: column; } +.properties-panel__property-label { + display: block; + margin-block-end: 5px; +} + .select-index { align-self: flex-start; } diff --git a/src/app/tabs-showcase/tabs-showcase.sample.ts b/src/app/tabs-showcase/tabs-showcase.sample.ts index a3972df4333..ba9349587bf 100644 --- a/src/app/tabs-showcase/tabs-showcase.sample.ts +++ b/src/app/tabs-showcase/tabs-showcase.sample.ts @@ -14,13 +14,13 @@ import { import { IgxButtonDirective, IgxIconComponent, - IGX_TABS_DIRECTIVES, + IGX_TABS_DIRECTIVES, IgxRippleDirective, } from 'igniteui-angular'; import { defineComponents, IgcTabsComponent, IgcTabComponent, - IgcTabPanelComponent, + IgcTabPanelComponent, registerIconFromText, } from 'igniteui-webcomponents'; import { PropertyChangeService, @@ -29,6 +29,17 @@ import { defineComponents(IgcTabsComponent, IgcTabComponent, IgcTabPanelComponent); +const icons = [ + { + name: 'folder', + url: '' + } +]; + +icons.forEach((icon) => { + registerIconFromText(icon.name, icon.url); +}); + @Component({ selector: 'app-tabs-showcase-sample', styleUrls: ['tabs-showcase.sample.scss'], @@ -36,7 +47,7 @@ defineComponents(IgcTabsComponent, IgcTabComponent, IgcTabPanelComponent); schemas: [CUSTOM_ELEMENTS_SCHEMA], encapsulation: ViewEncapsulation.None, standalone: true, - imports: [IgxButtonDirective, IgxIconComponent, IGX_TABS_DIRECTIVES] + imports: [IgxButtonDirective, IgxIconComponent, IGX_TABS_DIRECTIVES, IgxRippleDirective] }) export class TabsShowcaseSampleComponent implements OnInit { @ViewChild('angularTabs', { static: false }) @@ -91,6 +102,20 @@ export class TabsShowcaseSampleComponent implements OnInit { defaultValue: false }, }, + disableAnimation: { + label: 'Disable animation (Angular)', + control: { + type: 'boolean', + defaultValue: false + }, + }, + disabled: { + label: 'Disable items', + control: { + type: 'boolean', + defaultValue: false + }, + } }); const propertyChange = this.pcs.propertyChanges.subscribe( diff --git a/src/styles/hound/components/tabs/_overwrites.scss b/src/styles/hound/components/tabs/_overwrites.scss index dfb70f6f1de..37c0260593a 100644 --- a/src/styles/hound/components/tabs/_overwrites.scss +++ b/src/styles/hound/components/tabs/_overwrites.scss @@ -1,7 +1,7 @@ @use '../../../../../projects/igniteui-angular/src/lib/core/styles/themes' as *; .igx-tabs { - .igx-tabs__header-content { + .igx-tabs-header__content { margin-bottom: pad(rem(16px)); } @@ -29,6 +29,6 @@ } } -.ig-typography .igx-tabs__header-item--selected .igx-tabs__header-item-inner > [igxtabheaderlabel]{ +.ig-typography .igx-tab-header--selected .igx-tab-header__inner > [igxtabheaderlabel]{ font-weight: 600; } From b0774106e2ba89f6f9b40acf1c5a35d88e9664c8 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Tue, 8 Apr 2025 15:28:18 +0300 Subject: [PATCH 064/131] refactor(paginator): bundle styles with component (#15655) --- .../core/styles/themes/generators/_base.scss | 14 ++-- .../lib/paginator/paginator.component.scss | 4 + .../src/lib/paginator/paginator.component.ts | 4 +- .../src/lib/paginator/themes/_base.scss | 83 +++++++++++++++++++ .../src/lib/paginator/themes/dark/_index.scss | 6 ++ .../lib/paginator/themes/dark/_tokens.scss | 7 ++ .../lib/paginator/themes/light/_index.scss | 6 ++ .../lib/paginator/themes/light/_tokens.scss | 8 ++ .../lib/paginator/themes/shared/_index.scss | 1 + .../lib/paginator/themes/shared/_indigo.scss | 17 ++++ 10 files changed, 142 insertions(+), 8 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/paginator/paginator.component.scss create mode 100644 projects/igniteui-angular/src/lib/paginator/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/paginator/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/paginator/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/paginator/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/paginator/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/paginator/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/paginator/themes/shared/_indigo.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 090b989bd79..30e3081ccf9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -528,13 +528,13 @@ @include overlay($overlay-theme-map); } - @if is-used('igx-paginator', $exclude) { - $paginator-theme-map: paginator-theme( - $schema: $schema, - ); - $paginator-theme-map: meta.call($theme-handler, $paginator-theme-map); - @include paginator($paginator-theme-map); - } + // @if is-used('igx-paginator', $exclude) { + // $paginator-theme-map: paginator-theme( + // $schema: $schema, + // ); + // $paginator-theme-map: meta.call($theme-handler, $paginator-theme-map); + // @include paginator($paginator-theme-map); + // } @if is-used('igx-circular-bar', $exclude) { $progress-circular-theme-map: progress-circular-theme( diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.scss b/projects/igniteui-angular/src/lib/paginator/paginator.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts index 0a702ce25d8..ec035774dcf 100644 --- a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts +++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, EventEmitter, Host, HostBinding, Input, Output, forwardRef } from '@angular/core'; +import { ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, EventEmitter, Host, HostBinding, Input, Output, ViewEncapsulation, forwardRef } from '@angular/core'; import { IPageCancellableEventArgs, IPageEventArgs } from './paginator-interfaces'; import { IPaginatorResourceStrings, PaginatorResourceStringsEN } from '../core/i18n/paginator-resources'; import { OverlaySettings } from '../services/overlay/utilities'; @@ -40,6 +40,8 @@ export class IgxPaginatorContentDirective { @Component({ selector: 'igx-paginator', templateUrl: 'paginator.component.html', + styleUrl: 'paginator.component.css', + encapsulation: ViewEncapsulation.None, imports: [forwardRef(() => IgxPageSizeSelectorComponent), forwardRef(() => IgxPageNavigationComponent)], providers: [ { provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent } diff --git a/projects/igniteui-angular/src/lib/paginator/themes/_base.scss b/projects/igniteui-angular/src/lib/paginator/themes/_base.scss new file mode 100644 index 00000000000..97a58f83083 --- /dev/null +++ b/projects/igniteui-angular/src/lib/paginator/themes/_base.scss @@ -0,0 +1,83 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; + +$_theme: $material; + +@include layer(base) { + @include b(igx-paginator) { + @include sizable(); + + --component-size: var(--ig-size, var(--ig-size-large)); + + display: flex; + justify-content: space-between; + align-items: center; + color: var-get($_theme, 'text-color'); + background: var-get($_theme, 'background-color'); + font-size: rem(12px); + border-top: rem(1px) solid var-get($_theme, 'border-color'); + z-index: 1; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + height: var-get($_theme, 'size'); + width: 100%; + + &:empty { + padding: 0; + } + } + + @include b(igx-page-nav) { + display: flex; + justify-content: flex-end; + align-items: center; + flex: 1; + + > * { + margin-inline-start: rem(8px); + } + + [dir='rtl'] & { + igx-icon { + transform: scaleX(-1); + } + } + + @include e(text) { + display: flex; + } + } + + @include b(igx-page-size) { + display: flex; + justify-content: flex-start; + align-items: center; + flex: 1; + + @include e(label) { + @include ellipsis(); + + margin-inline-end: rem(8px); + } + + @include e(select) { + display: flex; + max-width: rem(114px); + min-width: rem(100px); + + igx-select { + --ig-size: 1; + } + } + } + + @include b(igx-paginator-content) { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + } +} diff --git a/projects/igniteui-angular/src/lib/paginator/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/paginator/themes/dark/_index.scss new file mode 100644 index 00000000000..3bac7d559a1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/paginator/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-paginator, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/paginator/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/paginator/themes/dark/_tokens.scss new file mode 100644 index 00000000000..bc52358e82b --- /dev/null +++ b/projects/igniteui-angular/src/lib/paginator/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/pagination' as *; + +$material: digest-schema($dark-material-pagination); +$bootstrap: digest-schema($dark-bootstrap-pagination); +$fluent: digest-schema($dark-fluent-pagination); +$indigo: digest-schema($dark-indigo-pagination); diff --git a/projects/igniteui-angular/src/lib/paginator/themes/light/_index.scss b/projects/igniteui-angular/src/lib/paginator/themes/light/_index.scss new file mode 100644 index 00000000000..4486bafc5e1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/paginator/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-paginator, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/paginator/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/paginator/themes/light/_tokens.scss new file mode 100644 index 00000000000..4f890009cab --- /dev/null +++ b/projects/igniteui-angular/src/lib/paginator/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/pagination' as *; + +$base: digest-schema($light-pagination); +$material: digest-schema($material-pagination); +$bootstrap: digest-schema($bootstrap-pagination); +$fluent: digest-schema($fluent-pagination); +$indigo: digest-schema($indigo-pagination); diff --git a/projects/igniteui-angular/src/lib/paginator/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/paginator/themes/shared/_index.scss new file mode 100644 index 00000000000..ca3dd3bc266 --- /dev/null +++ b/projects/igniteui-angular/src/lib/paginator/themes/shared/_index.scss @@ -0,0 +1 @@ +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/paginator/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/paginator/themes/shared/_indigo.scss new file mode 100644 index 00000000000..c7e301b7546 --- /dev/null +++ b/projects/igniteui-angular/src/lib/paginator/themes/shared/_indigo.scss @@ -0,0 +1,17 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-paginator, indigo) { + font-size: rem(11px); + font-weight: 400; + line-height: rem(15px); +} + +@include themed-block(igx-page-size, indigo) { + @include e(select) { + igx-select { + --ig-size: inherit; + } + } +} From db4a4cd500548838e487cad41ca75003a38530a4 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Tue, 8 Apr 2025 15:30:34 +0300 Subject: [PATCH 065/131] refactor(drop-down): bundle styles with component (#15630) --- .../action-strip.component.spec.ts | 2 +- .../src/lib/carousel/carousel.component.ts | 5 - .../src/lib/combo/combo-dropdown.component.ts | 6 +- .../src/lib/combo/combo.component.ts | 4 +- .../drop-down/_drop-down-theme.scss | 2 +- .../core/styles/themes/generators/_base.scss | 14 +- .../core/styles/typography/_bootstrap.scss | 10 +- .../lib/core/styles/typography/_fluent.scss | 10 +- .../lib/core/styles/typography/_indigo.scss | 2 +- .../lib/core/styles/typography/_material.scss | 2 +- .../autocomplete.directive.spec.ts | 2 +- .../src/lib/drop-down/drop-down.base.ts | 6 - .../lib/drop-down/drop-down.component.html | 2 +- .../lib/drop-down/drop-down.component.scss | 4 + .../lib/drop-down/drop-down.component.spec.ts | 21 +-- .../src/lib/drop-down/drop-down.component.ts | 10 +- .../src/lib/drop-down/themes/_base.scss | 174 ++++++++++++++++++ .../src/lib/drop-down/themes/dark/_index.scss | 6 + .../lib/drop-down/themes/dark/_tokens.scss | 7 + .../lib/drop-down/themes/light/_index.scss | 6 + .../lib/drop-down/themes/light/_tokens.scss | 8 + .../lib/drop-down/themes/shared/_fluent.scss | 27 +++ .../lib/drop-down/themes/shared/_index.scss | 2 + .../lib/drop-down/themes/shared/_indigo.scss | 45 +++++ .../lib/grids/grid/grid-filtering-ui.spec.ts | 10 +- .../lib/grids/pivot-grid/pivot-grid.spec.ts | 2 +- .../src/lib/select/select.component.html | 2 +- .../src/lib/select/select.component.spec.ts | 2 +- .../src/lib/select/select.component.ts | 13 +- .../simple-combo.component.spec.ts | 9 +- .../src/lib/test-utils/grid-functions.spec.ts | 2 +- .../components/dropdown/_overwrites.scss | 3 +- 32 files changed, 345 insertions(+), 75 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/drop-down/drop-down.component.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts index 52e5cca1dbb..1de1d89109a 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts @@ -8,7 +8,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxIconComponent } from '../icon/icon.component'; const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions'; -const DROP_DOWN_LIST = 'igx-drop-down__list'; +const DROP_DOWN_LIST = 'igx-drop-down'; describe('igxActionStrip', () => { let fixture; diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 37d30dc7bd1..118b888a3c3 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -80,11 +80,6 @@ export class CarouselHammerConfig extends HammerGestureConfig { ], selector: 'igx-carousel', templateUrl: 'carousel.component.html', - styles: [` - :host { - display: block; - outline-style: none; - }`], styleUrl: 'carousel.component.css', encapsulation: ViewEncapsulation.None, imports: [IgxButtonDirective, IgxIconComponent, NgClass, NgTemplateOutlet] diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index 733995846f3..3dbf0ab0690 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -1,5 +1,7 @@ import { - ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute + ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute, + ViewEncapsulation, + HostBinding } from '@angular/core'; import { IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common'; import { IDropDownBase, IGX_DROPDOWN_BASE } from '../drop-down/drop-down.common'; @@ -17,6 +19,8 @@ import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; @Component({ selector: 'igx-combo-drop-down', templateUrl: '../drop-down/drop-down.component.html', + styleUrl: '../drop-down/drop-down.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], imports: [IgxToggleDirective] }) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index 92756f24369..ed357c56338 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -1,7 +1,8 @@ import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common'; import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy, - Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute + Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute, + ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -95,6 +96,7 @@ const diffInSets = (set1: Set, set2: Set): any[] => { @Component({ selector: 'igx-combo', templateUrl: 'combo.component.html', + encapsulation: ViewEncapsulation.None, providers: [ IgxComboAPIService, { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent }, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index f0cbccbc4a9..b01790b5c36 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -81,7 +81,7 @@ $size: null ) { $name: 'igx-drop-down'; - $selector: '.igx-drop-down__list, .igx-grid-toolbar__dd-list'; + $selector: '.igx-drop-down, .igx-grid-toolbar__dd-list'; $drop-down-schema: (); @if map.has-key($schema, 'drop-down') { diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 30e3081ccf9..7a9cd0047fd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -408,13 +408,13 @@ @include rating($rating-theme-map); } - @if is-used('igx-drop-down', $exclude) { - $drop-down-theme-map: drop-down-theme( - $schema: $schema, - ); - $drop-down-theme-map: meta.call($theme-handler, $drop-down-theme-map); - @include drop-down($drop-down-theme-map); - } + // @if is-used('igx-drop-down', $exclude) { + // $drop-down-theme-map: drop-down-theme( + // $schema: $schema, + // ); + // $drop-down-theme-map: meta.call($theme-handler, $drop-down-theme-map); + // @include drop-down($drop-down-theme-map); + // } // @if is-used('igx-expansion-panel', $exclude) { // $expansion-panel-theme-map: expansion-panel-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index a81b7d86bc9..cfbcc559f11 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -64,11 +64,11 @@ content: 'body-1' )); @include dock-manager-typography(); - @include drop-down-typography($categories: ( - header: 'overline', - item: 'body-2', - select-item: 'body-2' - )); + // @include drop-down-typography($categories: ( + // header: 'overline', + // item: 'body-2', + // select-item: 'body-2' + // )); // @include expansion-panel-typography($categories: ( // title: 'h5', // description: 'subtitle-2', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index 27fc8e1c0b7..8d090cb695f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -67,11 +67,11 @@ content: 'body-2' )); @include dock-manager-typography(); - @include drop-down-typography($categories: ( - header: 'subtitle-2', - item: 'body-2', - select-item: 'body-2' - )); + // @include drop-down-typography($categories: ( + // header: 'subtitle-2', + // item: 'body-2', + // select-item: 'body-2' + // )); // @include expansion-panel-typography($categories: ( // title: 'subtitle-1', // description: 'body-2', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index e95735510c0..aefc92a4ca0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -66,7 +66,7 @@ content: 'body-1', )); @include dock-manager-typography(); - @include drop-down-typography(); + // @include drop-down-typography(); // @include expansion-panel-typography($categories: ( // title: 'body-2', // body: 'body-2', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 114bba44b64..b1957a011e2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -47,7 +47,7 @@ @include date-range-typography(); @include dialog-typography(); @include dock-manager-typography(); - @include drop-down-typography(); + // @include drop-down-typography(); // @include expansion-panel-typography(); @include excel-filtering-typography(); @include icon-button-typography(); diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts index 5d4fac049d4..2f10951daab 100644 --- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts @@ -13,7 +13,7 @@ import { ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment } import { IgxRippleDirective } from '../ripple/ripple.directive'; import { IgxIconComponent } from '../../icon/icon.component'; -const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down__list'; +const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down'; const CSS_CLASS_DROPDOWNLIST_SCROLL = 'igx-drop-down__list-scroll'; const CSS_CLASS_DROP_DOWN_ITEM = 'igx-drop-down__item'; const CSS_CLASS_DROP_DOWN_ITEM_FOCUSED = 'igx-drop-down__item--focused'; diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 935c3b72f88..4963a517313 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -98,12 +98,6 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit @HostBinding('style.maxHeight') public maxHeight = null; - /** - * @hidden @internal - */ - @HostBinding('class.igx-drop-down') - public cssClass = true; - /** * Get all non-header items * diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html index ea1e07c9c46..38e35ada453 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html @@ -1,4 +1,4 @@ -
{ expect(focusedItem.componentInstance.itemIndex).toEqual(0); expect(dropdown.collapsed).toEqual(false); - let dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + let dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); tick(); fixture.detectChanges(); @@ -346,7 +345,7 @@ describe('IgxDropDown ', () => { dropdown.toggle(); tick(); fixture.detectChanges(); - dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); tick(); @@ -376,7 +375,7 @@ describe('IgxDropDown ', () => { let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem).toBeDefined(); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); fixture.detectChanges(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); @@ -397,7 +396,7 @@ describe('IgxDropDown ', () => { dropdown.toggle(); tick(); fixture.detectChanges(); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); dropdownElement.triggerEventHandler('keydown', UIInteractions.getKeyboardEvent('keydown', 'ArrowDown')); tick(); fixture.detectChanges(); @@ -470,7 +469,7 @@ describe('IgxDropDown ', () => { const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`)); expect(selectedItem.componentInstance.itemIndex).toEqual(10); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('Home', dropdownElement); tick(); fixture.detectChanges(); @@ -575,7 +574,7 @@ describe('IgxDropDown ', () => { })); it('should provide correct event argument when closing through keyboard', fakeAsync(() => { spyOn(dropdown.closing, 'emit').and.callThrough(); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); dropdown.toggle(); tick(); @@ -739,7 +738,7 @@ describe('IgxDropDown ', () => { const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`)); expect(selectedItem.componentInstance.itemIndex).toEqual(10); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('End', dropdownElement); tick(); fixture.detectChanges(); @@ -767,7 +766,7 @@ describe('IgxDropDown ', () => { tick(); fixture.detectChanges(); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); tick(); fixture.detectChanges(); @@ -820,7 +819,7 @@ describe('IgxDropDown ', () => { fixture.detectChanges(); expect(dropdown.items[10].focused).toEqual(true); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); fixture.detectChanges(); expect(dropdown.items[11].focused).toEqual(true); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 30d8ccab1eb..0dd200fa035 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -15,7 +15,8 @@ import { EventEmitter, SimpleChanges, booleanAttribute, - Inject + Inject, + ViewEncapsulation } from '@angular/core'; import { IgxToggleDirective, ToggleViewEventArgs } from '../directives/toggle/toggle.directive'; import { IgxDropDownItemComponent } from './drop-down-item.component'; @@ -53,6 +54,13 @@ import { ConnectedPositioningStrategy } from '../services/public_api'; @Component({ selector: 'igx-drop-down', templateUrl: './drop-down.component.html', + styles: [` + :host { + position: absolute; + } + `], + styleUrl: 'drop-down.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], imports: [IgxToggleDirective] }) diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss b/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss new file mode 100644 index 00000000000..cc0d35ec862 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss @@ -0,0 +1,174 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$_theme: $material; + +@include layer(base) { + igx-select, + igx-combo { + display: block; + position: relative; + } + + %item { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + white-space: nowrap; + position: relative; + height: var-get($_theme, 'size'); + color: var-get($_theme, 'item-text-color'); + + igx-divider { + position: absolute; + width: 100%; + inset-inline-start: 0; + bottom: 0; + } + + igx-icon { + --component-size: 1; + + justify-content: center; + } + } + + %header { + @include type-style(overline); + + color: var-get($_theme, 'header-text-color'); + pointer-events: none; + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + } + + @include b(igx-drop-down) { + @include sizable(); + + --component-size: var(--ig-size, #{var-get($_theme, 'default-size')}); + --dropdown-size: var(--component-size); + overflow: hidden; + border-radius: var-get($_theme, 'border-radius'); + background: var-get($_theme, 'background-color'); + box-shadow: var-get($_theme, 'elevation'); + min-width: rem(128px); + border: var-get($_theme, 'border-width') solid var-get($_theme, 'border-color'); + + @include e(list-scroll) { + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + position: relative; + } + + @include e(item) { + @include type-style(body-2); + @extend %item; + + @include sizable(); + --component-size: var(--dropdown-size); + + cursor: pointer; + padding-inline: pad-inline(rem(16px), rem(20px), rem(24px)); + border-radius: var-get($_theme, 'item-border-radius'); + + igx-icon { + color: var-get($_theme, 'item-icon-color'); + } + + &:hover { + background: var-get($_theme, 'hover-item-background'); + color: var-get($_theme, 'hover-item-text-color'); + + igx-icon { + color: var-get($_theme, 'hover-item-icon-color'); + } + } + + &:focus { + outline: 0; + outline-color: transparent; + background: var-get($_theme, 'focused-item-background'); + color: var-get($_theme, 'focused-item-text-color'); + } + } + + @include e(inner) { + @include ellipsis(); + + display: block; + margin-inline-end: auto; + } + + @include e(content) { + display: flex; + width: 100%; + align-items: center; + gap: rem(8px); + } + + @include e(item, $m: focused) { + background: var-get($_theme, 'focused-item-background'); + color: var-get($_theme, 'focused-item-text-color'); + } + + @include e(item, $m: selected) { + background: var-get($_theme, 'selected-item-background'); + color: var-get($_theme, 'selected-item-text-color'); + + igx-icon { + color: var-get($_theme, 'selected-item-icon-color'); + } + + &:hover { + background: var-get($_theme, 'selected-hover-item-background'); + color: var-get($_theme, 'selected-hover-item-text-color'); + + igx-icon { + color: var-get($_theme, 'selected-hover-item-icon-color'); + } + } + } + + @include e(item, $mods: (selected, focused)) { + background: var-get($_theme, 'selected-focus-item-background'); + color: var-get($_theme, 'selected-focus-item-text-color'); + + &:hover { + background: var-get($_theme, 'selected-hover-item-background'); + color: var-get($_theme, 'selected-hover-item-text-color'); + + igx-icon { + color: var-get($_theme, 'selected-hover-item-icon-color'); + } + } + } + + @include e(item, $m: disabled) { + background: var-get($_theme, 'disabled-item-background'); + color: var-get($_theme, 'disabled-item-text-color'); + cursor: default; + pointer-events: none; + + igx-icon { + color: var-get($_theme, 'disabled-item-text-color'); + } + } + + @include e(header) { + @extend %item; + @extend %header; + } + + @include e(group) { + pointer-events: auto; + + label { + @extend %header; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/drop-down/themes/dark/_index.scss new file mode 100644 index 00000000000..90af1412e8f --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-drop-down, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/drop-down/themes/dark/_tokens.scss new file mode 100644 index 00000000000..9dd5a7008ea --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/drop-down' as *; + +$material: digest-schema($dark-material-drop-down); +$bootstrap: digest-schema($dark-bootstrap-drop-down); +$fluent: digest-schema($dark-fluent-drop-down); +$indigo: digest-schema($dark-indigo-drop-down); diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/light/_index.scss b/projects/igniteui-angular/src/lib/drop-down/themes/light/_index.scss new file mode 100644 index 00000000000..a4cca3b91e1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-drop-down, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/drop-down/themes/light/_tokens.scss new file mode 100644 index 00000000000..7c1b0b43597 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/drop-down' as *; + +$base: digest-schema($light-drop-down); +$material: digest-schema($material-drop-down); +$bootstrap: digest-schema($bootstrap-drop-down); +$fluent: digest-schema($fluent-drop-down); +$indigo: digest-schema($indigo-drop-down); diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss new file mode 100644 index 00000000000..4ae1e3b9ab5 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss @@ -0,0 +1,27 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-drop-down, fluent) { + @include e(item) { + igx-icon { + --component-size: 3; + } + } + + @include e(item, $m: focused) { + outline: rem(1px) solid var-get($_theme, 'border-color'); + outline-offset: rem(-1px); + } + + @include e(header) { + @include type-style(subtitle-2); + + igx-icon { + --component-size: 3; + } + } +} diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_index.scss new file mode 100644 index 00000000000..c0b99f867cc --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_index.scss @@ -0,0 +1,2 @@ +@forward 'indigo'; +@forward 'fluent'; diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss new file mode 100644 index 00000000000..36c1e0d14e2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss @@ -0,0 +1,45 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-drop-down, indigo) { + %item { + padding-inline: pad-inline(rem(8px), rem(12px), rem(12px)); + + igx-icon { + $icon-size: sizable(rem(14px), rem(16px), rem(16px)); + + --component-size: inherit; + --ig-icon-size: #{$icon-size}; + --igx-icon-size: #{$icon-size}; + } + } + + padding: rem(3px); + + @include e(item) { + @extend %item; + + margin-block: rem(2px); + + &:first-of-type, + &:last-of-type { + margin-block: initial; + } + } + + @include e(item, $m: focused) { + outline: rem(2px) solid var-get($_theme, 'focused-item-border-color'); + outline-offset: rem(-2px); + } + + @include e(header) { + @extend %item; + + margin-block-end: rem(2px); + padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); + } +} diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 1f10776b013..f9eb17d1093 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -2052,7 +2052,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { fix.detectChanges(); GridFunctions.openFilterDD(fix.debugElement); - const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle')); + const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down.igx-toggle')); GridFunctions.selectFilteringCondition('Empty', dropdownList); fix.detectChanges(); GridFunctions.openFilterDD(fix.debugElement); @@ -5495,7 +5495,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const cascadeButton = GridFunctions.getExcelFilterCascadeButton(fix); // Verify that custom filter dropdown (the submenu) is not visible. - let subMenu = fix.nativeElement.querySelector('.igx-drop-down__list.igx-toggle--hidden'); + let subMenu = fix.nativeElement.querySelector('.igx-drop-down.igx-toggle--hidden'); expect(subMenu).not.toBeNull(); cascadeButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); @@ -5504,7 +5504,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { // Verify that custom filter dropdown (the submenu) is visible. - subMenu = fix.nativeElement.querySelector('.igx-drop-down__list.igx-toggle--hidden'); + subMenu = fix.nativeElement.querySelector('.igx-drop-down.igx-toggle--hidden'); expect(subMenu).toBeNull(); })); @@ -6285,7 +6285,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { (lastExpression.querySelector('igx-select').querySelector('igx-input-group') as HTMLElement).click(); tick(); fix.detectChanges(); - const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle')); + const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down.igx-toggle')); const todayItem = dropdownList.children[0].children.find(item => item.nativeElement?.innerText === 'Today'); todayItem.nativeElement.click(); @@ -7345,7 +7345,7 @@ const verifyExcelCustomFilterSize = (fix: ComponentFixture, expectedSize: S const verifyGridSubmenuSize = (gridNativeElement: HTMLElement, expectedSize: Size) => { const outlet = gridNativeElement.querySelector('.igx-grid__outlet'); - const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down__list')); + const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down')); const visibleDropdown: any = dropdowns.find((d) => !d.classList.contains('igx-toggle--hidden')); const dropdownItems = visibleDropdown.querySelectorAll('igx-drop-down-item'); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 21b047ebe44..fd33e43f966 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -24,7 +24,7 @@ import { setElementSize } from '../../test-utils/helper-utils.spec'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component'; -const CSS_CLASS_LIST = 'igx-drop-down__list'; +const CSS_CLASS_LIST = 'igx-drop-down'; const CSS_CLASS_ITEM = 'igx-drop-down__item'; const ACTIVE_CELL_CSS_CLASS = '.igx-grid-th--active'; diff --git a/projects/igniteui-angular/src/lib/select/select.component.html b/projects/igniteui-angular/src/lib/select/select.component.html index db33612295a..74280ced105 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.html +++ b/projects/igniteui-angular/src/lib/select/select.component.html @@ -34,7 +34,7 @@ -
{ const dropDownElement = comboWrapper.children[1]; expect(dropDownElement.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy(); - expect(dropDownElement.classList.contains(CSS_CLASS_DROPDOWN)).toBeTruthy(); expect(dropDownElement.childElementCount).toEqual(1); const dropDownList = dropDownElement.children[0]; const dropDownScrollList = dropDownElement.children[0].children[0]; - expect(dropDownList.classList.contains(CSS_CLASS_DROPDOWNLIST)).toBeTruthy(); + expect(dropDownList.classList.contains(CSS_CLASS_DROPDOWN)).toBeTruthy(); expect(dropDownList.classList.contains('igx-toggle--hidden')).toBeTruthy(); expect(dropDownScrollList.childElementCount).toEqual(0); }); @@ -2850,7 +2845,7 @@ describe('IgxSimpleCombo', () => { UIInteractions.simulateClickEvent(comboToggleButton); fixture.detectChanges(); - const comboDropDownList = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROPDOWNLIST}`)); + const comboDropDownList = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROPDOWN}`)); const firstItem = comboDropDownList.nativeElement.querySelector(`.${CSS_CLASS_DROPDOWNLISTITEM}`); UIInteractions.simulateClickEvent(firstItem); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts index bb2a6479394..88bfb4beb31 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts @@ -597,7 +597,7 @@ export class GridFunctions { } public static verifyFilteringDropDownIsOpened(fix, opened = true) { - const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle')); + const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down.igx-toggle')); expect(dropdownList !== null).toEqual(opened); } diff --git a/src/styles/hound/components/dropdown/_overwrites.scss b/src/styles/hound/components/dropdown/_overwrites.scss index 0e6ece255e7..aea5770d971 100644 --- a/src/styles/hound/components/dropdown/_overwrites.scss +++ b/src/styles/hound/components/dropdown/_overwrites.scss @@ -1,7 +1,6 @@ @use '../../../../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -.igx-drop-down__list { - +.igx-drop-down { padding: rem(4px); .igx-drop-down__item { From f25403de5f3cf988cfb4afa5c5e52388120837ee Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Tue, 8 Apr 2025 16:11:40 +0300 Subject: [PATCH 066/131] refactor(chip): apply latest bootstrap changes (#15677) --- .../lib/chips/themes/shared/_bootstrap.scss | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/chips/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/chips/themes/shared/_bootstrap.scss index a1c7588cdec..982ac4a89e1 100644 --- a/projects/igniteui-angular/src/lib/chips/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/chips/themes/shared/_bootstrap.scss @@ -9,11 +9,11 @@ $_theme: $bootstrap; @include themed-block(igx-chip, bootstrap) { &:focus { @include e(item) { - box-shadow: 0 0 0 rem(2px) var-get($_theme, 'focus-outline-color'); + box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-outline-color'); } @include e(item, $m: 'selected') { - box-shadow: 0 0 0 rem(2px) var-get($_theme, 'focus-selected-outline-color'); + box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-selected-outline-color'); } } @@ -24,7 +24,10 @@ $_theme: $bootstrap; &:focus { @include e(item) { - box-shadow: 0 0 0 rem(2px) color($color: 'primary', $variant: 200); + color: contrast-color($color: 'primary', $variant: 500); + background: color($color: 'primary', $variant: 500); + border-color: color($color: 'primary', $variant: 500); + box-shadow: 0 0 0 rem(4px) color($color: 'primary', $variant: 500, $opacity: .38); } } } @@ -32,7 +35,10 @@ $_theme: $bootstrap; @include m(info) { &:focus { @include e(item) { - box-shadow: 0 0 0 rem(2px) color($color: 'info', $variant: 200); + color: contrast-color($color: 'info', $variant: 500); + background: color($color: 'info', $variant: 500); + border-color: color($color: 'info', $variant: 500); + box-shadow: 0 0 0 rem(4px) color($color: 'info', $variant: 500, $opacity: .38); } } } @@ -44,7 +50,10 @@ $_theme: $bootstrap; &:focus { @include e(item) { - box-shadow: 0 0 0 rem(2px) color($color: 'success', $variant: 200); + color: contrast-color($color: 'success', $variant: 600); + background: color($color: 'success', $variant: 500); + border-color: color($color: 'success', $variant: 500); + box-shadow: 0 0 0 rem(4px) color($color: 'success', $variant: 500, $opacity: .38); } } } @@ -52,7 +61,10 @@ $_theme: $bootstrap; @include m(warning) { &:focus { @include e(item) { - box-shadow: 0 0 0 rem(2px) color($color: 'warn', $variant: 200); + color: contrast-color($color: 'warn', $variant: 900); + background: color($color: 'warn', $variant: 500); + border-color: color($color: 'warn', $variant: 500); + box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: .38); } } } @@ -64,7 +76,10 @@ $_theme: $bootstrap; &:focus { @include e(item) { - box-shadow: 0 0 0 rem(2px) color($color: 'error', $variant: 200); + background: color($color: 'error', $variant: 500); + border-color: color($color: 'error', $variant: 500); + color: contrast-color($color: 'error', $variant: 600); + box-shadow: 0 0 0 rem(4px) color($color: 'error', $variant: 500, $opacity: .38); } } } From 6ccdd0b6fe06b0b81cdef21802b2f70ffe74b906 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Wed, 9 Apr 2025 10:42:06 +0300 Subject: [PATCH 067/131] fix(navbar): nested components sizes (#15685) --- .../icon-button/_icon-button-theme.scss | 4 --- .../src/lib/navbar/navbar.component.html | 2 +- .../src/lib/navbar/navbar.component.ts | 15 +++++---- .../src/lib/navbar/themes/_base.scss | 33 +++++++++---------- .../lib/navbar/themes/shared/_bootstrap.scss | 13 ++++++-- .../src/lib/navbar/themes/shared/_indigo.scss | 6 +++- 6 files changed, 41 insertions(+), 32 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss index 8dd8832da65..dd94e487a2a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss @@ -177,10 +177,6 @@ ); igx-icon { - // TODO: Why do we have to comment these out? - // --component-size: var(--ig-size, var(--ig-size-large)); - // --size: var(--igx-icon-size, #{$icon-in-button-size}); - --ig-size: #{if($variant == 'indigo', 2, 1)}; display: flex; diff --git a/projects/igniteui-angular/src/lib/navbar/navbar.component.html b/projects/igniteui-angular/src/lib/navbar/navbar.component.html index 772a0a5e3f7..0f96424384e 100644 --- a/projects/igniteui-angular/src/lib/navbar/navbar.component.html +++ b/projects/igniteui-angular/src/lib/navbar/navbar.component.html @@ -1,4 +1,4 @@ -
-
- - favorite - - - share - -
+ + favorite + + + share + From 210af2744253d0ef31005f9a90a12ed619ea7dfa Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 14 Apr 2025 14:07:04 +0300 Subject: [PATCH 070/131] feat(standalone): add map splitting function --- .../lib/core/styles/themes/_standalone.scss | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss index 6d4a60cf844..61db54a7ddf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss @@ -53,3 +53,45 @@ } } } + +/// Splits a map into two separate maps based on a list of keys +/// +/// @author Your Name +/// +/// @param {Map} $map - The original map to split +/// @param {List} $pick-keys - List of keys to include in the first returned map +/// +/// @return {List} A list containing two maps: +/// - First map contains key-value pairs where keys are in $pick-keys +/// - Second map contains all remaining key-value pairs +/// +/// @example scss +/// $colors: ( +/// primary: blue, +/// secondary: green, +/// tertiary: yellow, +/// quaternary: purple +/// ); +/// +/// $result: split-map($colors, (primary, secondary)); +/// // $result[1] = (primary: blue, secondary: green) +/// // $result[2] = (tertiary: yellow, quaternary: purple) +@function split-map($map, $pick-keys) { + $map-1: (); + $map-2: (); + + @each $key, $value in $map { + $id: list.index($pick-keys, $key); + + @if $id { + $map-1: map.merge($map-1, ($key: $value)); + } @else { + $map-2: map.merge($map-2, ($key: $value)); + } + } + + @return ( + $map-1, + $map-2 + ); +} From 1326df80ce56e6065976612e2561ee0e7e231fb9 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Wed, 23 Apr 2025 11:12:00 +0300 Subject: [PATCH 071/131] refactor(calendar): scope themes to the component (#15373) --- .../src/lib/calendar/calendar.component.scss | 4 + .../src/lib/calendar/calendar.component.ts | 4 +- .../src/lib/calendar/calendar.directives.ts | 12 +- .../days-view/day-item.component.html | 2 +- .../calendar/days-view/day-item.component.ts | 26 +- .../days-view/days-view.component.html | 29 +- .../days-view/days-view.component.scss | 4 + .../days-view/days-view.component.spec.ts | 14 +- .../calendar/days-view/days-view.component.ts | 4 +- .../lib/calendar/days-view/themes/_base.scss | 736 +++ .../days-view/themes/dark/_index.scss | 6 + .../days-view/themes/dark/_tokens.scss | 7 + .../days-view/themes/light/_index.scss | 6 + .../days-view/themes/light/_tokens.scss | 7 + .../days-view/themes/shared/_bootstrap.scss | 361 ++ .../days-view/themes/shared/_fluent.scss | 355 ++ .../days-view/themes/shared/_index.scss | 4 + .../days-view/themes/shared/_indigo.scss | 482 ++ .../days-view/themes/shared/_material.scss | 348 ++ .../month-picker/month-picker.component.html | 4 +- .../month-picker/month-picker.component.scss | 4 + .../month-picker.component.spec.ts | 46 +- .../month-picker/month-picker.component.ts | 3 + .../calendar/month-picker/themes/_base.scss | 52 + .../month-picker/themes/dark/_index.scss | 6 + .../month-picker/themes/dark/_tokens.scss | 7 + .../month-picker/themes/light/_index.scss | 6 + .../month-picker/themes/light/_tokens.scss | 8 + .../themes/shared/_bootstrap.scss | 16 + .../months-view/months-view.component.html | 4 +- .../months-view/months-view.component.ts | 4 +- .../calendar-picker.component.scss | 7 + .../calendar-picker/themes/_base.scss | 83 + .../calendar-picker/themes/dark/_index.scss | 6 + .../calendar-picker/themes/dark/_tokens.scss | 7 + .../calendar-picker/themes/light/_index.scss | 6 + .../calendar-picker/themes/light/_tokens.scss | 8 + .../themes/shared/_bootstrap.scss | 36 + .../themes/shared/_fluent.scss | 28 + .../calendar-picker/themes/shared/_index.scss | 4 + .../themes/shared/_indigo.scss | 35 + .../themes/shared/_material.scss | 26 + .../years-months/themes/_base.scss | 127 + .../years-months/themes/dark/_index.scss | 6 + .../years-months/themes/dark/_tokens.scss | 7 + .../years-months/themes/light/_index.scss | 6 + .../years-months/themes/light/_tokens.scss | 8 + .../themes/shared/_bootstrap.scss | 57 + .../years-months/themes/shared/_fluent.scss | 57 + .../years-months/themes/shared/_index.scss | 4 + .../years-months/themes/shared/_indigo.scss | 80 + .../years-months/themes/shared/_material.scss | 58 + .../years-months/years-months.component.scss | 4 + .../src/lib/calendar/themes/_base.scss | 135 + .../src/lib/calendar/themes/dark/_index.scss | 6 + .../src/lib/calendar/themes/dark/_tokens.scss | 7 + .../src/lib/calendar/themes/light/_index.scss | 6 + .../lib/calendar/themes/light/_tokens.scss | 8 + .../calendar/themes/shared/_bootstrap.scss | 44 + .../lib/calendar/themes/shared/_fluent.scss | 44 + .../lib/calendar/themes/shared/_index.scss | 4 + .../lib/calendar/themes/shared/_indigo.scss | 69 + .../lib/calendar/themes/shared/_material.scss | 59 + .../years-view/years-view.component.html | 4 +- .../years-view/years-view.component.ts | 4 +- .../calendar/_calendar-component.scss | 280 +- .../components/calendar/_calendar-theme.scss | 3930 ++++++++--------- .../core/styles/themes/generators/_base.scss | 42 +- .../core/styles/typography/_bootstrap.scss | 14 +- .../lib/core/styles/typography/_fluent.scss | 14 +- .../lib/core/styles/typography/_indigo.scss | 12 +- .../lib/core/styles/typography/_material.scss | 2 +- .../date-picker/date-picker.component.scss | 4 + .../lib/date-picker/date-picker.component.ts | 4 +- .../src/lib/date-picker/themes/_base.scss | 64 + .../lib/date-picker/themes/dark/_index.scss | 6 + .../lib/date-picker/themes/dark/_tokens.scss | 7 + .../lib/date-picker/themes/light/_index.scss | 6 + .../lib/date-picker/themes/light/_tokens.scss | 7 + .../date-picker/themes/shared/_bootstrap.scss | 15 + .../date-picker/themes/shared/_fluent.scss | 16 + .../lib/date-picker/themes/shared/_index.scss | 4 + .../date-picker/themes/shared/_indigo.scss | 15 + .../date-picker/themes/shared/_material.scss | 14 + .../date-range-picker.component.scss | 3 + .../date-range-picker.component.ts | 4 +- .../lib/date-range-picker/themes/_base.scss | 48 + .../date-range-picker/themes/dark/_index.scss | 7 + .../themes/dark/_tokens.scss | 7 + .../themes/light/_index.scss | 6 + .../themes/light/_tokens.scss | 8 + .../lib/grids/grid/grid-filtering-ui.spec.ts | 8 +- .../lib/test-utils/calendar-helper-utils.ts | 52 +- src/app/calendar/calendar.sample.html | 2 +- src/app/calendar/calendar.sample.scss | 6 +- src/app/calendar/calendar.sample.ts | 9 + src/styles/_demo-theme.scss | 1 + 97 files changed, 5990 insertions(+), 2248 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/calendar/calendar.component.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_material.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/month-picker/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/month-picker/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/month-picker/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/month-picker/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/month-picker/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/month-picker/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/calendar-picker.component.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/calendar-picker/themes/shared/_material.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_material.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/years-months.component.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/calendar/themes/shared/_material.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/date-picker.component.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/shared/_material.scss create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.scss create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/themes/light/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.scss b/projects/igniteui-angular/src/lib/calendar/calendar.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts index 301ff268f53..d4f577c3c79 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts @@ -11,7 +11,7 @@ import { QueryList, OnDestroy, booleanAttribute, - HostListener, + HostListener, ViewEncapsulation, } from '@angular/core'; import { NgTemplateOutlet, DatePipe } from '@angular/common'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -71,6 +71,8 @@ let NEXT_ID = 0; ], selector: 'igx-calendar', templateUrl: 'calendar.component.html', + styleUrls: ['calendar.component.css', 'shared-themes/calendar-picker/calendar-picker.component.css'], + encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar] }) export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy { diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts b/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts index 91381fcc2e2..9752d25a15f 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts @@ -70,17 +70,17 @@ export abstract class IgxCalendarViewBaseDirective { standalone: true }) export class IgxCalendarYearDirective extends IgxCalendarViewBaseDirective { - @HostBinding('class.igx-calendar-view__item--current') + @HostBinding('class.igx-calendar-view-item--current') public get isCurrent(): boolean { return CalendarDay.today.year === this.value.getFullYear(); } - @HostBinding('class.igx-calendar-view__item--selected') + @HostBinding('class.igx-calendar-view-item--selected') public get isSelected(): boolean { return this.value.getFullYear() === this.date.getFullYear(); } - @HostBinding('class.igx-calendar-view__item--active') + @HostBinding('class.igx-calendar-view-item--active') public get isActive(): boolean { return this.isSelected && this.showActive; } @@ -95,21 +95,21 @@ export class IgxCalendarYearDirective extends IgxCalendarViewBaseDirective { standalone: true }) export class IgxCalendarMonthDirective extends IgxCalendarViewBaseDirective { - @HostBinding('class.igx-calendar-view__item--current') + @HostBinding('class.igx-calendar-view-item--current') public get isCurrent(): boolean { const today = CalendarDay.today; const date = CalendarDay.from(this.value); return date.year === today.year && date.month === today.month; } - @HostBinding('class.igx-calendar-view__item--selected') + @HostBinding('class.igx-calendar-view-item--selected') public get isSelected(): boolean { return (this.value.getFullYear() === this.date.getFullYear() && this.value.getMonth() === this.date.getMonth() ); } - @HostBinding('class.igx-calendar-view__item--active') + @HostBinding('class.igx-calendar-view-item--active') public get isActive(): boolean { return this.isSelected && this.showActive; } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.html b/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.html index ea05eb65eb2..3fc372d64a9 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.html +++ b/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.html @@ -1,6 +1,6 @@
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.scss b/src/app/input-group-showcase/input-group-showcase.sample.scss index e8a7ddbeccb..a939d251120 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.scss +++ b/src/app/input-group-showcase/input-group-showcase.sample.scss @@ -1,3 +1,6 @@ +@use 'igniteui-theming/sass/themes/schemas/components' as *; +@use 'igniteui-theming/sass/themes' as *; + :host { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); diff --git a/src/app/input-group-showcase/input-group-showcase.sample.ts b/src/app/input-group-showcase/input-group-showcase.sample.ts index 314b188dc88..5416f1d350f 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.ts +++ b/src/app/input-group-showcase/input-group-showcase.sample.ts @@ -1,5 +1,6 @@ import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal, computed, viewChild, DestroyRef} from '@angular/core'; import {FormsModule, ReactiveFormsModule, UntypedFormBuilder, Validators} from '@angular/forms'; + import { defineComponents, IgcInputComponent, @@ -8,6 +9,7 @@ import { IgcSelectComponent, IgcSelectItemComponent, IgcSelectHeaderComponent, + IgcFileInputComponent, } from 'igniteui-webcomponents'; import { IGX_INPUT_GROUP_DIRECTIVES, @@ -27,7 +29,8 @@ defineComponents( IgcSelectGroupComponent, IgcSelectComponent, IgcSelectItemComponent, - IgcSelectHeaderComponent + IgcSelectHeaderComponent, + IgcFileInputComponent ); @Component({ @@ -64,11 +67,11 @@ export class InputGroupShowcaseSampleComponent { } }, inputType: { - label: 'Input Group Type', + label: 'Input Group Type (Only Material theme has border/box and line types)', control: { type: 'button-group', options: ['box', 'border', 'line', 'search'], - defaultValue: '' + defaultValue: 'box' } }, type: { @@ -82,7 +85,13 @@ export class InputGroupShowcaseSampleComponent { label: { control: { type: 'text', - defaultValue: 'Web address' + defaultValue: 'Label text' + } + }, + hint: { + control: { + type: 'text', + defaultValue: 'Hint text' } }, value: { @@ -117,14 +126,14 @@ export class InputGroupShowcaseSampleComponent { } }, hidePrefix: { - label: 'Hide Prefix', + label: 'Hide Prefix using (@if)', control: { type: 'boolean', defaultValue: false } }, hideSuffix: { - label: 'Hide Suffix', + label: 'Hide Suffix using( [hidden] )', control: { type: 'boolean', defaultValue: false @@ -217,6 +226,12 @@ export class InputGroupShowcaseSampleComponent { public getSize = computed(() => `var(--ig-size-${this.properties()?.size || 'medium'})`); public getPlaceholder = computed(() => this.properties()?.placeholder || null); public getLabel = computed(() => this.properties()?.label || ''); + + public getHint = computed(() => { + const hint = this.properties()?.hint || ''; + return hint.trim() ? hint : null; + }); + public getNativeInputType = computed(() => this.properties()?.type || 'text'); public getInputGroupType = computed(() => this.properties()?.inputType || ''); @@ -224,7 +239,7 @@ export class InputGroupShowcaseSampleComponent { public isRequired = computed(() => !!this.properties()?.required); public isDisabled = computed(() => !!this.properties()?.disabled); public isReadonly = computed(() => !!this.properties()?.readonly); - public hidePrefix = computed(() => !!this.properties()?.hidePrefix); - public hideSuffix = computed(() => !!this.properties()?.hideSuffix); + public hidePrefix = computed(() => !this.properties()?.hidePrefix); + public hideSuffix = computed(() => !this.properties()?.hideSuffix); } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index fa429165538..21d2f079812 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-material-palette; -$schema: $light-material-schema; -$typeface: $material-typeface; -$type-scale: $material-type-scale; +$palette: $light-bootstrap-palette; +$schema: $light-bootstrap-schema; +$typeface: $bootstrap-typeface; +$type-scale: $bootstrap-type-scale; $variant: map.get($schema, '_meta', 'variant'); $background-color: var(--ig-gray-900-contrast); From 61b886dfd94a0445c3f5972f3d41bc5e674528da Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 19 Jun 2025 18:20:18 +0300 Subject: [PATCH 083/131] fix(combo/select): remove suffix dynamically (#15961) --- .../src/lib/combo/combo.common.ts | 17 ++++++++++++++--- .../lib/input-group/input-group.component.ts | 2 +- .../src/lib/select/select.component.ts | 15 +++++++++++++-- .../input-group-showcase.sample.ts | 2 +- 4 files changed, 29 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 0b3f69cdd58..1221e1f43ed 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -21,7 +21,8 @@ import { Output, QueryList, TemplateRef, - ViewChild + ViewChild, + ViewChildren } from '@angular/core'; import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms'; import { caseSensitive } from '@igniteui/material-icons-extended'; @@ -748,6 +749,9 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh @ContentChildren(IgxSuffixDirective, { descendants: true }) protected suffixes: QueryList; + @ViewChildren(IgxSuffixDirective) + protected internalSuffixes: QueryList; + /** @hidden @internal */ public get searchValue(): string { return this._searchValue; @@ -984,8 +988,15 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh this.inputGroup.prefixes = this.prefixes; } - if (this.inputGroup && this.suffixes?.length > 0) { - this.inputGroup.suffixes = this.suffixes; + if (this.inputGroup) { + const suffixesArray = this.suffixes?.toArray() ?? []; + const internalSuffixesArray = this.internalSuffixes?.toArray() ?? []; + const mergedSuffixes = new QueryList(); + mergedSuffixes.reset([ + ...suffixesArray, + ...internalSuffixesArray + ]); + this.inputGroup.suffixes = mergedSuffixes; } } diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 589c133bd8f..7a1de700776 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -291,7 +291,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase { } /** @hidden @internal */ - public set suffixes(items: QueryList) { + public set suffixes(items: QueryList) { this._suffixes = items; } diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index 9047896d7ab..9965c2e2240 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -22,6 +22,7 @@ import { QueryList, TemplateRef, ViewChild, + ViewChildren, ViewEncapsulation } from '@angular/core'; import { DOCUMENT, NgTemplateOutlet } from '@angular/common'; @@ -120,6 +121,9 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec @ContentChildren(IgxSuffixDirective, { descendants: true }) protected suffixes: QueryList; + @ViewChildren(IgxSuffixDirective) + protected internalSuffixes: QueryList; + /** @hidden @internal */ @ContentChild(forwardRef(() => IgxLabelDirective), { static: true }) public label: IgxLabelDirective; @@ -542,8 +546,15 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec this.inputGroup.prefixes = this.prefixes; } - if (this.inputGroup && this.suffixes?.length > 0) { - this.inputGroup.suffixes = this.suffixes; + if (this.inputGroup) { + const suffixesArray = this.suffixes?.toArray() ?? []; + const internalSuffixesArray = this.internalSuffixes?.toArray() ?? []; + const mergedSuffixes = new QueryList(); + mergedSuffixes.reset([ + ...suffixesArray, + ...internalSuffixesArray + ]); + this.inputGroup.suffixes = mergedSuffixes; } } diff --git a/src/app/input-group-showcase/input-group-showcase.sample.ts b/src/app/input-group-showcase/input-group-showcase.sample.ts index 5416f1d350f..5dab7ef8366 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.ts +++ b/src/app/input-group-showcase/input-group-showcase.sample.ts @@ -133,7 +133,7 @@ export class InputGroupShowcaseSampleComponent { } }, hideSuffix: { - label: 'Hide Suffix using( [hidden] )', + label: 'Hide Suffix', control: { type: 'boolean', defaultValue: false From 9830b6242bc398444ac7523a4ae54a2fc9e9295a Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 26 Jun 2025 16:45:28 +0300 Subject: [PATCH 084/131] refactor(drop-down): items icon size (#15968) --- .../src/lib/drop-down/themes/shared/_fluent.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss index 4ae1e3b9ab5..164516123e3 100644 --- a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss @@ -6,12 +6,6 @@ $_theme: $fluent; @include themed-block(igx-drop-down, fluent) { - @include e(item) { - igx-icon { - --component-size: 3; - } - } - @include e(item, $m: focused) { outline: rem(1px) solid var-get($_theme, 'border-color'); outline-offset: rem(-1px); @@ -19,9 +13,5 @@ $_theme: $fluent; @include e(header) { @include type-style(subtitle-2); - - igx-icon { - --component-size: 3; - } } } From b28b2115536d956c58de5fddfd754fa90b3fddcf Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 18 Jun 2025 15:43:23 +0300 Subject: [PATCH 085/131] refactor(input-group, textarea): label position handle placeholder with css --- .../src/lib/input-group/themes/_base.scss | 5 +- .../input-group/themes/shared/material.scss | 178 ++++++++++-------- .../input-group-showcase.sample.html | 4 + 3 files changed, 101 insertions(+), 86 deletions(-) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss index bc5717f8178..1686e032152 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -34,14 +34,11 @@ $base-scale-size: ( @include b(igx-input-group) { @include sizable(); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); - --input-size: var(--component-size); - --input-icon: #{sizable(rem(14px), rem(16px), rem(18px))}; --_bundle-template-columns: auto 1fr auto; --_bundle-template-rows: auto #{var-get($theme, 'size')}; --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(12px), rem(16px))}; --_bundle-row: 1; - &:has([igxLabel], igx-label) { --_label-row: 1; --_bundle-row: 2; @@ -62,7 +59,7 @@ $base-scale-size: ( igx-icon, igx-icon[igxPrefix], igx-icon[igxSuffix] { - --component-size: var(--input-size); + --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); } igx-suffix:not(igx-icon), diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss index 0cceb9ddd24..ef1282a8118 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -12,25 +12,66 @@ $input-inline-padding: rem(4px); $input-top-spacing: rem(20px); $input-bottom-spacing: rem(6px); -// TODO: Talk to simo about this @layer ig.material { @container style(--ig-theme: material) { %box-floating-label { - transform: translateY(rem(-12px)); + @include type-style(caption); + + translate: 0 rem(-12px); } %box-floating-text-area-label { - transform: translateY(0); + @include type-style(caption); + + translate: 0; inset-block-start: calc(var(--_input-top-spacing) / 4); } %border-textarea-floating-label { + @include type-style(caption); + display: inline-block; - transform-origin: left top; position: relative; inset-block: 0; - transform: translateY(-50%); - margin-block-end: auto; + } + } + + .igx-input-group--base:not(.igx-input-group--filled, .igx-input-group--focused) { + &:has(input:placeholder-shown) { + .igx-input-group__label { + @extend %box-floating-label; + } + } + + &:has(textarea:placeholder-shown) { + .igx-input-group__label { + @extend %box-floating-text-area-label; + } + } + } + + .igx-input-group--border:not(.igx-input-group--filled, .igx-input-group--focused) { + &:has(input:placeholder-shown) { + .igx-input-group__label { + @include type-style(caption); + } + } + + &:has(textarea:placeholder-shown) { + .igx-input-group__label { + @extend %border-textarea-floating-label; + } + } + + &:has(input:placeholder-shown, textarea:placeholder-shown) { + .igx-input-group__label { + align-self: start; + translate: 0 var(--_label-translate-top); + } + + .igx-input-group__notch { + border-block-start-color: transparent; + } } } } @@ -83,18 +124,10 @@ $input-bottom-spacing: rem(6px); grid-row: var(--_hint-row); } - - @include m(focused) { - @include e(label) { - @include type-style(caption); - } - } - @include m(base) { %input-paddings { padding-block-start: var(--_input-top-spacing); padding-block-end: var(--_input-bottom-spacing); - } @include e(bundle) { @@ -228,12 +261,6 @@ $input-bottom-spacing: rem(6px); } } - @include mx(base, placeholder) { - @include e(label) { - @extend %box-floating-label; - } - } - @include mx(base, filled) { @include e(label) { @extend %box-floating-label; @@ -300,18 +327,21 @@ $input-bottom-spacing: rem(6px); @include m(textarea-group) { --_bundle-template-rows: auto; - } - @include mx(base, textarea-group) { - @include e(label) { - top: var(--_input-top-spacing); - margin-block-end: auto; + @include e(bundle-main) { + padding-block-start: $input-top-spacing; + } + + @include e(textarea) { + // This gives the drag handle some room from the field bottom border + border-bottom: rem(2px) solid transparent; } } - @include mx(base, textarea-group, placeholder) { + @include mx(base, textarea-group) { @include e(label) { - @extend %box-floating-text-area-label; + top: var(--_input-top-spacing); + align-self: start; } } @@ -421,18 +451,18 @@ $input-bottom-spacing: rem(6px); @include mx(border, textarea-group) { @include e(label) { top: var(--_input-top-spacing); - margin-block-end: auto; - transform-origin: top left; transition: - transform 150ms cubic-bezier(.4, 0, .2, 1), + translate 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1), font-size 150ms cubic-bezier(.4, 0, .2, 1); - will-change: transform; + will-change: translate; + align-self: start; } - @include e(textarea) { - margin-block-start: $input-top-spacing; - } + //@include e(textarea) { + // margin-block-start: $input-top-spacing; + // bottom: rem(2px); + //} } @include mx(border, textarea-group, filled) { @@ -445,16 +475,6 @@ $input-bottom-spacing: rem(6px); @include e(label) { @extend %border-textarea-floating-label; } - - @include e(notch) { - border-block-start-width: rem(1px); - } - } - - @include mx(border, textarea-group, placeholder) { - @include e(label) { - @extend %border-textarea-floating-label; - } } @include mx(base, file) { @@ -472,16 +492,16 @@ $input-bottom-spacing: rem(6px); } @include m(border) { - --_label-position: #{sizable(18px, 22px, 26px)}; + $label-position: calc((var-get($_theme, 'size') / 2) - (var(--_input-border-size) / 2)); --_bundle-template-columns: auto auto 1fr auto; --_input-border-size: #{rem(1px)}; --_input-border-style: solid; - --_label-translate-top: calc(var(--_label-position) * -1); + --_label-translate-top: -50%; $border-size: rem(1px); %idle-border-styles { - border-width: var(--_input-border-size); + border-width: var(--_input-border-size-focus, var(--_input-border-size)); border-style: var(--_input-border-style); border-color: var-get($_theme, 'border-color'); } @@ -492,7 +512,7 @@ $input-bottom-spacing: rem(6px); border-radius: var-get($_theme, 'border-border-radius'); } - @include e(inut) { + @include e(input) { width: 100%; height: 100%; padding: 0; @@ -574,12 +594,11 @@ $input-bottom-spacing: rem(6px); } @include mx(border, focused) { - --_input-border-size: #{rem(2px)}; + --_input-border-size-focus: calc(var(--_input-border-size) + #{rem(1px)}); - $negative-margin: calc((var(--_input-border-size) / 2) * -1); + $negative-margin: calc((var(--_input-border-size-focus) / 2) * -1); @include e(label) { - transform: translateY(var(--_label-translate-top)); color: var-get($_theme, 'focused-secondary-color'); } @@ -588,7 +607,10 @@ $input-bottom-spacing: rem(6px); &:has(igx-prefix), &:has([igxPrefix]) { - margin-inline-start: $negative-margin; + igx-prefix:first-child, + [igxPrefix]:first-child { + margin-inline-start: $negative-margin; + } } } @@ -597,13 +619,17 @@ $input-bottom-spacing: rem(6px); &:has(igx-suffix), &:has([igxSuffix]) { - margin-inline-end: $negative-margin; + igx-suffix:last-child, + [igxSuffix]:last-child { + margin-inline-end: $negative-margin; + } } } @include e(notch) { border-color: var-get($_theme, 'focused-border-color'); border-block-start-color: transparent; + border-block-start-width: rem(1px); } @include e(filler) { @@ -615,17 +641,17 @@ $input-bottom-spacing: rem(6px); } } - @include mx(border, focused, ('not': (placeholder, textarea-group))) { + @include mx(border, focused) { @include e(label) { - transform: translateY(var(--_label-translate-top)); + translate: 0 var(--_label-translate-top); + align-self: start; } } - @include mx(border, filled, ('not': (placeholder, textarea-group))) { + @include mx(border, filled, ('not': (focused))) { @include e(label) { - @include type-style(caption); - - transform: translateY(var(--_label-translate-top)); + translate: 0 var(--_label-translate-top); + align-self: start; } } @@ -635,16 +661,6 @@ $input-bottom-spacing: rem(6px); } } - @include mx(border, placeholder, ('not': (focused))) { - @include e(label) { - transform: translateY(var(--_label-translate-top)); - } - - @include e(notch) { - border-block-start-color: transparent; - } - } - @include mx(border, valid) { @include e(bundle-start) { border-color: var-get($_theme, 'success-secondary-color'); @@ -741,17 +757,23 @@ $input-bottom-spacing: rem(6px); } } - @include mx(border, file) { - --_bundle-template-columns: auto auto auto 1fr auto; - + @include mx(border, file, ('not': (focused))) { @include e(label) { @include type-style(caption); - transform: translateY(var(--_label-translate-top)); + translate: 0 var(--_label-translate-top); + align-self: start; } @include e(notch) { border-block-start-color: transparent; + } + } + + @include mx(border, file) { + --_bundle-template-columns: auto auto auto 1fr auto; + + @include e(notch) { grid-column: 3 } @@ -854,7 +876,7 @@ $input-bottom-spacing: rem(6px); @include e(label) { @include type-style(subtitle-1); - will-change: font-size, color, transform; + will-change: font-size, color, translate; transition: all $transition-timing; pointer-events: none; } @@ -865,8 +887,6 @@ $input-bottom-spacing: rem(6px); @include e(textarea) { @include type-style(subtitle-1); - - margin-block-start: $input-top-spacing; } @include m(filled) { @@ -881,12 +901,6 @@ $input-bottom-spacing: rem(6px); } } - @include m(placeholder, $not: (focused, file)) { - @include e(label) { - @include type-style(caption); - } - } - @include m(file, $not: (focused)) { @include e(label) { @include type-style(caption); diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html index 39697b2334a..1dca1120ece 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.html +++ b/src/app/input-group-showcase/input-group-showcase.sample.html @@ -27,6 +27,7 @@

Angular

@@ -56,6 +57,7 @@

Angular

} @@ -196,6 +198,7 @@

Web components

[style.--ig-size]="getSize()" [label]="getLabel()" [required]="isRequired()" + [attr.placeholder]="getPlaceholder()" [disabled]="isDisabled()" [readOnly]="isReadonly()" [attr.value]="getValue()" @@ -221,6 +224,7 @@

Web components

[disabled]="isDisabled()" [readOnly]="isReadonly()" [attr.value]="getValue()" + [placeholder]="getPlaceholder()" [outlined]="isOutlined()"> @if (hidePrefix()) { From a9eea25e86c69ffd060ddd846e2ef744e9623389 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 1 Jul 2025 23:49:44 +0300 Subject: [PATCH 086/131] refactor(input-group): refactor file type input structure --- .../input-group/input-group.component.html | 9 +- .../lib/input-group/input-group.component.ts | 7 +- .../src/lib/input-group/themes/_base.scss | 33 ++++-- .../input-group/themes/shared/bootstrap.scss | 101 ++++++++++++++++-- .../lib/input-group/themes/shared/indigo.scss | 4 + .../input-group/themes/shared/material.scss | 3 + .../input-group-showcase.sample.html | 3 +- 7 files changed, 131 insertions(+), 29 deletions(-) diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html index 9bbdaf09f66..bb2d68c1e66 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html @@ -13,7 +13,6 @@ class="igx-input-group__upload-button" [disabled]="disabled" tabindex="-1" - (click)="uploadButtonHandler()" > {{ resourceStrings.igx_input_upload_button }} @@ -24,8 +23,8 @@ @if (isFileType) {
{{ fileNames }}
@@ -48,7 +47,7 @@ @if (!isTypeBorder) { - + }
@@ -66,7 +65,7 @@
} -
+
@if (isFileType) { diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 7a1de700776..a4dba1f483f 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -287,7 +287,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase { /** @hidden @internal */ @HostBinding('class.igx-input-group--suffixed') public get hasSuffixes() { - return this._suffixes.length > 0; + return this._suffixes.length > 0 || (this.isFileType && this.isFilled && !this.disabled); } /** @hidden @internal */ @@ -348,11 +348,6 @@ export class IgxInputGroupComponent implements IgxInputGroupBase { return this.type === 'box' && this._theme === 'material'; } - /** @hidden @internal */ - public uploadButtonHandler() { - this.input.nativeElement.click(); - } - /** @hidden @internal */ public clearValueHandler() { this.input.clear(); diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss index 1686e032152..73541235e55 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -217,10 +217,17 @@ $base-scale-size: ( } &[type='file'] { - @include hide-default(); + opacity: 0; + z-index: 2; + width: 100%; + height: 100%; + + &::-webkit-file-upload-button { + width: inherit; + height: inherit; + } } - &[type='number'] { -moz-appearance: textfield; } @@ -266,8 +273,9 @@ $base-scale-size: ( width: 100%; max-width: 100%; overflow: hidden; - height: calc(var-get($theme, 'size') - 2px); + height: var-get($theme, 'size'); color: var-get($theme, 'placeholder-color'); + grid-column: 3 / -2; span { @include ellipsis(); @@ -280,6 +288,16 @@ $base-scale-size: ( } } + @include m(file, $not: (disabled)) { + @include e(input) { + &[type='file'] { + &::-webkit-file-upload-button { + cursor: pointer; + } + } + } + } + @include m(file, $not: (border)) { --_bundle-template-columns: auto auto 1fr auto; @@ -298,13 +316,12 @@ $base-scale-size: ( } @include m(file) { - - @include e(bundle-main) { - cursor: pointer; + @include e(input) { + grid-column: 2 / -2; } - @include e(label) { - pointer-events: none; + @include e(bundle-main) { + display: contents; } } diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss index b2a8f1b0815..b03bacd6fd7 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss @@ -27,6 +27,7 @@ $border-radius: var-get($_theme, 'border-border-radius'); .igx-input-group__bundle-main { border-start-start-radius: $border-radius; border-end-start-radius: $border-radius; + } } @@ -34,6 +35,7 @@ $border-radius: var-get($_theme, 'border-border-radius'); .igx-input-group__bundle-main { border-start-end-radius: $border-radius; border-end-end-radius: $border-radius; + border-inline-start-width: $border-size; } } @@ -42,6 +44,20 @@ $border-radius: var-get($_theme, 'border-border-radius'); border-radius: $border-radius; } } + + igx-suffix + .igx-input-group__toggle-button, + [igxSuffix] + .igx-input-group__toggle-button { + // Add border between the toggle button and the rest of the suffixes + border-inline-start: $border-size solid $border-color; + } + + igx-input-group:not(.igx-input-group--disabled) { + .igx-input-group__clear-icon + igx-suffix, + .igx-input-group__clear-icon + [igxSuffix] { + // Add border between the clear button and the rest of the suffixes + border-inline-start: $border-size solid $border-color; + } + } } } @@ -64,9 +80,7 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(upload) { @extend %border-styles; - border-block-width: $border-size; - border-inline-start-width: $border-size; - border-inline-end-width: 0; + border-width: $border-size; background: var-get($_theme, 'input-prefix-background'); grid-row: 2; } @@ -114,6 +128,8 @@ $border-radius: var-get($_theme, 'border-border-radius'); font-size: sizable(rem(16px), rem(16px), rem(20px)); height: 100%; padding-block: 0; + border-block: $border-size solid $border-color; + border-inline-end: $border-size solid $border-color; padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); } @@ -153,6 +169,14 @@ $border-radius: var-get($_theme, 'border-border-radius'); } } + @include m(file, $not: (suffixed)) { + @include e(file-input) { + border-start-end-radius: $border-radius; + border-end-end-radius: $border-radius; + border-inline-start-width: $border-size; + } + } + @include e(bundle-start) { &:empty { border: 0; @@ -192,6 +216,11 @@ $border-radius: var-get($_theme, 'border-border-radius'); transition: border .15s ease-out; border-color: var-get($_theme, 'focused-border-color'); } + + @include e(file-input) { + transition: border .15s ease-out; + border-color: var-get($_theme, 'focused-border-color'); + } } @include m(invalid) { @@ -199,6 +228,10 @@ $border-radius: var-get($_theme, 'border-border-radius'); border-color: var-get($_theme, 'error-secondary-color'); } + @include e(file-input) { + border-color: var-get($_theme, 'error-secondary-color'); + } + @include e(hint) { color: var-get($_theme, 'error-secondary-color'); } @@ -209,6 +242,10 @@ $border-radius: var-get($_theme, 'border-border-radius'); border-color: var-get($_theme, 'warning-secondary-color'); } + @include e(file-input) { + border-color: var-get($_theme, 'warning-secondary-color'); + } + @include e(hint) { color: var-get($_theme, 'warning-secondary-color'); } @@ -219,6 +256,10 @@ $border-radius: var-get($_theme, 'border-border-radius'); border-color: var-get($_theme, 'success-secondary-color'); } + @include e(file-input) { + border-color: var-get($_theme, 'success-secondary-color'); + } + @include e(hint) { color: var-get($_theme, 'success-secondary-color'); } @@ -228,18 +269,30 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(bundle-main) { border-color: var-get($_theme, 'error-secondary-color'); } + + @include e(file-input) { + border-color: var-get($_theme, 'error-secondary-color'); + } } @include mx(focused, warning) { @include e(bundle-main) { border-color: var-get($_theme, 'warning-secondary-color'); } + + @include e(file-input) { + border-color: var-get($_theme, 'warning-secondary-color'); + } } @include mx(focused, valid) { @include e(bundle-main) { border-color: var-get($_theme, 'success-secondary-color'); } + + @include e(bundle-main) { + border-color: var-get($_theme, 'warning-secondary-color'); + } } @include m(focused, $not: (file)) { @@ -261,12 +314,12 @@ $border-radius: var-get($_theme, 'border-border-radius'); } } - // TODO: This state has no schema variable - //@include mx(focused, warning, ('not': (file))) { - // @include e(bundle-main) { - // box-shadow: 0 0 0 rem(4px) var-get($_theme, 'warning-shadow-color'); - // } - //} + @include mx(focused, warning, ('not': (file))) { + @include e(bundle-main) { + // TODO: This state has no schema variable + box-shadow: 0 0 0 rem(4px) color($color: 'warning', $variant: 500, $opacity: .38); + } + } $transition-border: border .15s ease-out; $transition-box-shadow: box-shadow .15s ease-out; @@ -308,6 +361,12 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(bundle-end) { border-color: var-get($_theme, 'focused-border-color'); } + + .igx-input-group__clear-icon + igx-suffix, + .igx-input-group__clear-icon + [igxSuffix] { + // Add border between the clear button and the rest of the suffixes + border-color: var-get($_theme, 'focused-border-color'); + } } @include mx(file, valid) { @@ -322,6 +381,12 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(bundle-end) { border-color: var-get($_theme, 'success-secondary-color'); } + + .igx-input-group__clear-icon + igx-suffix, + .igx-input-group__clear-icon + [igxSuffix] { + // Add border between the clear button and the rest of the suffixes + border-color: var-get($_theme, 'success-secondary-color'); + } } @include mx(file, invalid) { @@ -350,6 +415,12 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(bundle-end) { border-color: var-get($_theme, 'warning-secondary-color'); } + + .igx-input-group__clear-icon + igx-suffix, + .igx-input-group__clear-icon + [igxSuffix] { + // Add border between the clear button and the rest of the suffixes + border-color: var-get($_theme, 'warning-secondary-color'); + } } @include mx(file, focused, valid) { @@ -392,6 +463,18 @@ $border-radius: var-get($_theme, 'border-border-radius'); @extend %disabled-styles; } + @include e(file-input) { + border-color: var-get($_theme, 'disabled-border-color'); + } + + @include e(clear-icon) { + pointer-events: none; + } + + @include e(toggle-button) { + border-color: var-get($_theme, 'disabled-border-color') !important; + } + igx-prefix, [igxPrefix], igx-suffix:not(.igx-input-group__toggle-button), diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss index bceef87b170..c948fae0009 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss @@ -83,6 +83,10 @@ $_theme: $indigo; } @include m(file) { + @include e(input) { + padding-block: 0; + } + @include e(bundle) { > * { grid-row: 1; diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss index ef1282a8118..a41d6997df2 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -102,6 +102,8 @@ $input-bottom-spacing: rem(6px); @include e(file-input) { @extend %input-paddings; + + padding-inline: $input-inline-padding; } @include e(bundle-start) { @@ -754,6 +756,7 @@ $input-bottom-spacing: rem(6px); @include m(file, $not: (border)) { @include e(label) { @extend %box-floating-label; + grid-row: 1 / -1; } } diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html index 1dca1120ece..a78cbb6dd00 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.html +++ b/src/app/input-group-showcase/input-group-showcase.sample.html @@ -136,7 +136,7 @@

Angular

[style.--ig-size]="getSize()"> @if (getLabel()) { - + } @if (hidePrefix()) { @@ -144,6 +144,7 @@

Angular

} Date: Wed, 2 Jul 2025 11:20:41 +0300 Subject: [PATCH 087/131] fix(theme-token): match implementation in master --- .../src/lib/services/theme/theme.token.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/theme/theme.token.ts b/projects/igniteui-angular/src/lib/services/theme/theme.token.ts index 8c6b7ea8dc8..7b93ddbe69d 100644 --- a/projects/igniteui-angular/src/lib/services/theme/theme.token.ts +++ b/projects/igniteui-angular/src/lib/services/theme/theme.token.ts @@ -4,7 +4,6 @@ import { BehaviorSubject } from "rxjs"; export class ThemeToken { private document = inject(DOCUMENT); public subject: BehaviorSubject; - public variant: IgxThemeVariant; constructor(private t?: IgxTheme) { const globalTheme = globalThis.window @@ -12,11 +11,6 @@ export class ThemeToken { .getPropertyValue("--ig-theme") .trim() || 'material' as IgxTheme; - this.variant = globalThis.window - ?.getComputedStyle(this.document.body) - .getPropertyValue("--ig-theme-variant") - .trim() as IgxThemeVariant; - const _theme = t ?? globalTheme as IgxTheme; this.subject = new BehaviorSubject(_theme); } @@ -50,14 +44,7 @@ const Theme = { IndigoDesign: "indigo", } as const; -const ThemeVariant = /*@__PURE__*/ mkenum({ - Light: "light", - Dark: "dark" -}); - /** * Determines the component theme. */ export type IgxTheme = (typeof Theme)[keyof typeof Theme]; - -export type IgxThemeVariant = (typeof ThemeVariant)[keyof typeof ThemeVariant]; From 0ed89b1c375a489738761376f9d0bc9ac2ee968d Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 2 Jul 2025 11:24:23 +0300 Subject: [PATCH 088/131] deps(theming): bump to latest version --- package-lock.json | 8 ++++---- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7e9a4944086..d3f5823081d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^18.0.2", + "igniteui-theming": "^19.1.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -11109,9 +11109,9 @@ } }, "node_modules/igniteui-theming": { - "version": "18.1.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-18.1.0.tgz", - "integrity": "sha512-E+ZItTFI5acEAWAdWz9pPCzyHCFSPSazgyVqmN5XnAtLuH/3qaOV5ho2CTLrHpWBSmj2cTciB8THImBp2Jj73Q==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-19.1.0.tgz", + "integrity": "sha512-ctvg3169dA8QqhLD9mdfns3smWekiD2Vdhc7y7CAiXi98Hv03LqcV07z/F2KGKW/thkf/brloUWpCOG289pqJA==", "license": "MIT", "peerDependencies": { "sass": "^1.69.5" diff --git a/package.json b/package.json index ecba751ecbc..bac81b49e89 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^18.0.2", + "igniteui-theming": "^19.1.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index fc1ab533f06..bdc293f372f 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -73,7 +73,7 @@ "tslib": "^2.3.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", - "igniteui-theming": "^18.0.1", + "igniteui-theming": "^19.1.0", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": { From 0c28b20ccf882930cfe9ed46e561d32204846c14 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 2 Jul 2025 14:30:04 +0300 Subject: [PATCH 089/131] fix(input-group): fix the showcase sample --- .../input-group-showcase.sample.html | 193 ++++++++++++------ 1 file changed, 130 insertions(+), 63 deletions(-) diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html index 646f3df2cba..69264ed29cc 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.html +++ b/src/app/input-group-showcase/input-group-showcase.sample.html @@ -15,23 +15,32 @@

Angular

#field [type]="getInputGroupType()" [style.--ig-size]="getSize()"> + @if (getLabel()) { } - face + + @if (hidePrefix()) { + face + } + - @if (!hideSuffix()) { + + @if (hideSuffix()) { face } - Type your web address + + @if (getHint()) { + {{getHint()}} + } @@ -42,20 +51,25 @@

Angular

@if (getLabel()) { } - face + + @if (hidePrefix()) { + face + } - @if (!hideSuffix()) { + + @if (hideSuffix()) { face } - Hint text + @if (getHint()) { + {{getHint()}} + } @@ -68,14 +82,17 @@

Angular

@if (getLabel()) { } - favorite - - I am a Hint - - @if (!hideSuffix()) { - - favorite - + + @if (hidePrefix()) { + face + } + + @if (hideSuffix()) { + face + } + + @if (getHint()) { + {{getHint()}} } Apple Orange @@ -90,16 +107,26 @@

Angular

[placeholder]="getPlaceholder()" [type]="getInputGroupType()" [style.--ig-size]="getSize()"> + @if (getLabel()) { } - favorite - @if (!hideSuffix()) { + + @if (hidePrefix()) { + + face + + } + + @if (hideSuffix()) { favorite } - Select a unique falsy value + + @if (getHint()) { + {{getHint()}} + } @@ -107,23 +134,33 @@

Angular

#fieldFile [type]="getInputGroupType()" [style.--ig-size]="getSize()"> + @if (getLabel()) { - + } - face + + @if (hidePrefix()) { + face + } + - @if (!hideSuffix()) { + + @if (hideSuffix()) { face } - Type your web address + + @if (getHint()) { + {{getHint()}} + } @@ -162,17 +199,23 @@

Web components

[style.--ig-size]="getSize()" [label]="getLabel()" [required]="isRequired()" + [attr.placeholder]="getPlaceholder()" [disabled]="isDisabled()" [readOnly]="isReadonly()" [attr.value]="getValue()" - [attr.placeholder]="getPlaceholder()" [type]="getNativeInputType()" [outlined]="isOutlined()"> - - @if (!hideSuffix()) { - + + @if (hidePrefix()) { + + } + + @if (hideSuffix()) { + + } + @if (getHint()) { + {{getHint()}} } - Type your web address Web components [disabled]="isDisabled()" [readOnly]="isReadonly()" [attr.value]="getValue()" - [attr.placeholder]="getPlaceholder()" + [placeholder]="getPlaceholder()" [outlined]="isOutlined()"> - - @if (!hideSuffix()) { - + + @if (hidePrefix()) { + + } + + @if (hideSuffix()) { + + } + + @if (getHint()) { + {{getHint()}} } - Hint text - - @if (!hideSuffix()) { - + [required]="isRequired()" + [attr.placeholder]="getPlaceholder()" + [label]="getLabel()" + [disabled]="isDisabled()" + [outlined]="isOutlined()" + [style.--ig-size]="getSize()"> + + @if (hidePrefix()) { + + } + + @if (getHint()) { + {{getHint()}} } - I am a Hint Apple Orange Grapes @@ -216,17 +269,31 @@

Web components

[outlined]="isOutlined()" [disabled]="isDisabled()" [style.--ig-size]="getSize()"> - I am a Hint - - @if (!hideSuffix()) { - + @if (getHint()) { + {{getHint()}} } -
- NO file type in web components -
+ + @if (hidePrefix()) { + + } + + @if (hideSuffix()) { + + } + @if (getHint()) { + {{getHint()}} + } +
From 1f8db21063def98783d5ad52b5ed56577127e32c Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 2 Jul 2025 14:36:29 +0300 Subject: [PATCH 090/131] chore(igniteui-webcomponents): bump to v6.1.1 --- package-lock.json | 44 +++++--------------------------------------- package.json | 2 +- 2 files changed, 6 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index d3f5823081d..0e016c1b745 100644 --- a/package-lock.json +++ b/package-lock.json @@ -72,7 +72,7 @@ "ig-typedoc-theme": "^6.0.0", "igniteui-dockmanager": "^1.16.1", "igniteui-sassdoc-theme": "^1.2.3", - "igniteui-webcomponents": "6.0.1", + "igniteui-webcomponents": "6.1.1", "jasmine": "^5.6.0", "jasmine-core": "^5.6.0", "karma": "^6.4.4", @@ -11127,13 +11127,13 @@ } }, "node_modules/igniteui-webcomponents": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.0.1.tgz", - "integrity": "sha512-Y2cHDzOU9svFXExlTQQrzLSVlpK+9g+uOPnmj16FWIJEvv7/hyjF4XKG3zey3GcVbeoF20OdL2zijRAbTt268Q==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.1.1.tgz", + "integrity": "sha512-U4eINzKGdSvdMf7+gP/srlbdqCtpXBphaljZKdKr2QsvlHMmXuRnIWfoQcMoPS5ar2+W1w+Cy92kl4Mt+GtiQQ==", "dev": true, "license": "SEE LICENSE IN LICENSE", "dependencies": { - "@floating-ui/dom": "^1.6.0", + "@floating-ui/dom": "^1.7.0", "@lit-labs/virtualizer": "^2.1.0", "@lit/context": "^1.1.0", "lit": "^3.3.0" @@ -11142,40 +11142,6 @@ "node": ">=20" } }, - "node_modules/igniteui-webcomponents/node_modules/@lit/reactive-element": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.0.tgz", - "integrity": "sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "@lit-labs/ssr-dom-shim": "^1.2.0" - } - }, - "node_modules/igniteui-webcomponents/node_modules/lit": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.0.tgz", - "integrity": "sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "@lit/reactive-element": "^2.1.0", - "lit-element": "^4.2.0", - "lit-html": "^3.3.0" - } - }, - "node_modules/igniteui-webcomponents/node_modules/lit-element": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.0.tgz", - "integrity": "sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "@lit-labs/ssr-dom-shim": "^1.2.0", - "@lit/reactive-element": "^2.1.0", - "lit-html": "^3.3.0" - } - }, "node_modules/ignore": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.4.tgz", diff --git a/package.json b/package.json index bac81b49e89..3f4e187dfc1 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "ig-typedoc-theme": "^6.0.0", "igniteui-dockmanager": "^1.16.1", "igniteui-sassdoc-theme": "^1.2.3", - "igniteui-webcomponents": "6.0.1", + "igniteui-webcomponents": "6.1.1", "jasmine": "^5.6.0", "jasmine-core": "^5.6.0", "karma": "^6.4.4", From 4be085b968ddee3c2b191d39f7db68807c64835a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 2 Jul 2025 16:21:14 +0300 Subject: [PATCH 091/131] fix(input-group): use the file schema colors --- .../src/lib/input-group/themes/_base.scss | 26 +++++++++-------- .../lib/input-group/themes/dark/_tokens.scss | 19 ++++++++++--- .../lib/input-group/themes/light/_tokens.scss | 23 +++++++++++---- .../input-group/themes/shared/bootstrap.scss | 14 +--------- .../lib/input-group/themes/shared/fluent.scss | 8 ------ .../input-group/themes/shared/material.scss | 28 +++++++++++++++++++ 6 files changed, 77 insertions(+), 41 deletions(-) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss index 73541235e55..5d35d819279 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -332,13 +332,15 @@ $base-scale-size: ( } @include e(upload-button) { - --igx-button-background: transparent; - --igx-button-hover-background: transparent; - --igx-button-focus-background: transparent; - --igx-button-focus-visible-background: transparent; - --igx-button-active-background: transparent; - - //padding-inline: var(--_prefix-suffix-spacing); + --background: #{var-get($theme, 'file-selector-button-background')}; + --foreground: #{var-get($theme, 'file-selector-button-foreground')}; + --focus-background: #{var-get($theme, 'file-selector-button-background--focused')}; + --focus-foreground: #{var-get($theme, 'file-selector-button-foreground--focused')}; + --focus-visible-background: #{var-get($theme, 'file-selector-button-background--focused')}; + --active-background: #{var-get($theme, 'file-selector-button-background')}; + --active-foreground: #{var-get($theme, 'file-selector-button-foreground')}; + --disabled-background: #{var-get($theme, 'file-selector-button-background--disabled')}; + --disabled-foreground: #{var-get($theme, 'file-selector-button-foreground--disabled')}; } @include m(textarea-group) { @@ -473,10 +475,6 @@ $base-scale-size: ( grid-column: 1 / -1; } - @include e(file-input) { - color: var-get($theme, 'disabled-text-color'); - } - @include e(toggle-button) { color: var(--toggle-button-foreground-disabled); background: var(--toggle-button-background-disabled); @@ -486,6 +484,11 @@ $base-scale-size: ( display: none; } + @include e(file-input) { + background: var-get($theme, 'file-names-background--disabled'); + color: var-get($theme, 'file-names-foreground--disabled'); + } + /* stylelint-disable max-nesting-depth */ &:hover { @include e(input) { @@ -498,5 +501,6 @@ $base-scale-size: ( } /* stylelint-enable max-nesting-depth */ } + } } diff --git a/projects/igniteui-angular/src/lib/input-group/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/input-group/themes/dark/_tokens.scss index d80b787aa78..51cc1a0654c 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/dark/_tokens.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/dark/_tokens.scss @@ -1,7 +1,18 @@ +@use 'sass:map'; @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/file-input' as *; -$material: digest-schema($dark-material-input-group); -$bootstrap: digest-schema($dark-bootstrap-input-group); -$fluent: digest-schema($dark-fluent-input-group); -$indigo: digest-schema($dark-indigo-input-group); +$input-material: digest-schema($dark-material-input-group); +$input-bootstrap: digest-schema($dark-bootstrap-input-group); +$input-fluent: digest-schema($dark-fluent-input-group); +$input-indigo: digest-schema($dark-indigo-input-group); +$file-material: digest-schema($dark-material-file-input); +$file-bootstrap: digest-schema($dark-bootstrap-file-input); +$file-fluent: digest-schema($dark-fluent-file-input); +$file-indigo: digest-schema($dark-indigo-file-input); + +$material: map.merge($input-material, $file-material); +$bootstrap: map.merge($input-bootstrap, $file-bootstrap); +$fluent: map.merge($input-fluent, $file-fluent); +$indigo: map.merge($input-indigo, $file-indigo); diff --git a/projects/igniteui-angular/src/lib/input-group/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/input-group/themes/light/_tokens.scss index 10df2dd57b6..7b3007c9db6 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/light/_tokens.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/light/_tokens.scss @@ -1,8 +1,21 @@ +@use 'sass:map'; @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/file-input' as *; -$base: digest-schema($light-input-group); -$material: digest-schema($material-input-group); -$bootstrap: digest-schema($bootstrap-input-group); -$fluent: digest-schema($fluent-input-group); -$indigo: digest-schema($indigo-input-group); +$input-base: digest-schema($light-input-group); +$input-material: digest-schema($material-input-group); +$input-bootstrap: digest-schema($bootstrap-input-group); +$input-fluent: digest-schema($fluent-input-group); +$input-indigo: digest-schema($indigo-input-group); +$file-base: digest-schema($light-file-input); +$file-material: digest-schema($material-file-input); +$file-bootstrap: digest-schema($bootstrap-file-input); +$file-fluent: digest-schema($fluent-file-input); +$file-indigo: digest-schema($indigo-file-input); + +$base: map.merge($input-base, $file-base); +$material: map.merge($input-material, $file-material); +$bootstrap: map.merge($input-bootstrap, $file-bootstrap); +$fluent: map.merge($input-fluent, $file-fluent); +$indigo: map.merge($input-indigo, $file-indigo); diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss index b03bacd6fd7..fe337609992 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss @@ -81,22 +81,10 @@ $border-radius: var-get($_theme, 'border-border-radius'); @extend %border-styles; border-width: $border-size; - background: var-get($_theme, 'input-prefix-background'); grid-row: 2; } @include e(upload-button) { - --igx-button-background: #{var-get($_theme, 'input-prefix-background')}; - --igx-button-hover-background: #{var-get($_theme, 'input-prefix-background')}; - --igx-button-active-background: #{var-get($_theme, 'input-prefix-background')}; - --igx-button-focus-visible-background: #{var-get($_theme, 'input-prefix-background')}; - --igx-button-foreground: #{var-get($_theme, 'input-prefix-color')}; - --igx-button-hover-foreground: #{var-get($_theme, 'input-prefix-color')}; - --igx-button-active-foreground: #{var-get($_theme, 'input-prefix-color')}; - --igx-button-focus-visible-foreground: #{var-get($_theme, 'input-prefix-color')}; - --igx-button-disabled-foreground: #{var-get($_theme, 'disabled-text-color')}; - --igx-button-disabled-background: #{var-get($_theme, 'border-disabled-background')}; - @include type-style(body-1); min-height: revert; @@ -460,7 +448,7 @@ $border-radius: var-get($_theme, 'border-border-radius'); } @include e(upload) { - @extend %disabled-styles; + border-color: var-get($_theme, 'disabled-border-color'); } @include e(file-input) { diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss index c3ea1d249e9..e3ad9c095af 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss @@ -18,14 +18,6 @@ $_theme: $fluent; } } - @include e(upload-button) { - --igx-button-background: transparent; - --igx-button-hover-background: transparent; - --igx-button-focus-background: transparent; - --igx-button-focus-visible-background: transparent; - --igx-button-active-background: transparent; - } - @include e(hint) { min-height: rem(18px); } diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss index a41d6997df2..4815a4d6f2c 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -450,6 +450,34 @@ $input-bottom-spacing: rem(6px); } } + @include m(file) { + @include e(file-input) { + background: var-get($_theme, 'file-names-background'); + color: var-get($_theme, 'file-names-foreground'); + } + } + + @include mx(file, filled) { + @include e(file-input) { + background: var-get($_theme, 'file-names-background--filled'); + color: var-get($_theme, 'file-names-foreground--filled'); + } + } + + @include mx(file, focused) { + @include e(file-input) { + background: var-get($_theme, 'file-names-background--focused'); + color: var-get($_theme, 'file-names-foreground--focused'); + } + } + + @include mx(file, disabled) { + @include e(file-input) { + background: var-get($_theme, 'file-names-background--disabled'); + color: var-get($_theme, 'file-names-foreground--disabled'); + } + } + @include mx(border, textarea-group) { @include e(label) { top: var(--_input-top-spacing); From 1ed9b2613953103a40b2c55066285b421ec8953b Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Thu, 10 Jul 2025 16:35:02 +0300 Subject: [PATCH 092/131] fix(grid & combo): remove grid column actions negative margin & fix combo clear button parameters (#15966) * fix(grid & combo): remove grid negative margin & fix combo clear button parameters * fix(combo): fix spacing --- .../src/lib/grids/column-actions/themes/_base.scss | 2 +- .../igniteui-angular/src/lib/input-group/themes/_base.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/themes/_base.scss b/projects/igniteui-angular/src/lib/grids/column-actions/themes/_base.scss index 6e838dfe7ce..bc0294c0de7 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/grids/column-actions/themes/_base.scss @@ -28,7 +28,7 @@ $_theme: $material; @include e(header-input) { font-size: rem(16px); - margin: rem(-16px) 0 0 !important; + margin: 0 !important; padding: rem(8px) rem(16px); } diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss index 5d35d819279..da57de78078 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -450,6 +450,10 @@ $base-scale-size: ( color: var-get($theme, 'disabled-text-color'); } + igx-suffix.igx-combo__clear-button { + background: var-get($theme, 'border-disabled-background'); + } + @include e(label) { color: var-get($theme, 'disabled-text-color') } From 9da28d7743a9aed660e328e9f8c682c637d9ed3e Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Tue, 15 Jul 2025 10:21:49 +0300 Subject: [PATCH 093/131] refactor(input-group, textarea): label position (#15953) handle placeholder with css --- .../input-group/themes/shared/material.scss | 5 -- .../input-group-showcase.sample.html | 56 +++++++++---------- 2 files changed, 28 insertions(+), 33 deletions(-) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss index 4815a4d6f2c..292037bda58 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -488,11 +488,6 @@ $input-bottom-spacing: rem(6px); will-change: translate; align-self: start; } - - //@include e(textarea) { - // margin-block-start: $input-top-spacing; - // bottom: rem(2px); - //} } @include mx(border, textarea-group, filled) { diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html index 69264ed29cc..91feb079b38 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.html +++ b/src/app/input-group-showcase/input-group-showcase.sample.html @@ -25,11 +25,11 @@

Angular

} @if (hideSuffix()) { @@ -56,10 +56,10 @@

Angular

face } @if (hideSuffix()) { @@ -144,12 +144,12 @@

Angular

} @if (hideSuffix()) { @@ -242,12 +242,12 @@

Web components

+ [required]="isRequired()" + [attr.placeholder]="getPlaceholder()" + [label]="getLabel()" + [disabled]="isDisabled()" + [outlined]="isOutlined()" + [style.--ig-size]="getSize()"> @if (hidePrefix()) { @@ -276,13 +276,13 @@

Web components

+ [style.--ig-size]="getSize()" + [label]="getLabel()" + [required]="isRequired()" + [disabled]="isDisabled()" + [readOnly]="isReadonly()" + [attr.value]="getValue()" + [outlined]="isOutlined()"> @if (hidePrefix()) { } From 9e56f70b4b05d6e6f3c196332f0c7a53999ae847 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Tue, 15 Jul 2025 10:22:52 +0300 Subject: [PATCH 094/131] fix(radio-group): dynamically added radio buttons do not initialize (#16042) --- .../src/lib/combo/combo.component.spec.ts | 2 +- .../radio/radio-group.directive.spec.ts | 109 +++++++++++++++++- .../directives/radio/radio-group.directive.ts | 44 +++++-- .../src/lib/radio/radio.component.ts | 33 +++++- src/app/radio/radio-group.component.html | 8 ++ src/app/radio/radio-group.component.ts | 46 ++++++++ src/app/radio/radio.sample.html | 9 ++ src/app/radio/radio.sample.scss | 4 + src/app/radio/radio.sample.ts | 67 ++++++++++- 9 files changed, 302 insertions(+), 20 deletions(-) create mode 100644 src/app/radio/radio-group.component.html create mode 100644 src/app/radio/radio-group.component.ts diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 0ebdcc6b4f2..45c771076c9 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -58,7 +58,7 @@ const CSS_CLASS_ITME_CHECKBOX_CHECKED = 'igx-checkbox--checked'; const defaultDropdownItemHeight = 40; const defaultDropdownItemMaxHeight = 400; -fdescribe('igxCombo', () => { +describe('igxCombo', () => { let fixture: ComponentFixture; let combo: IgxComboComponent; let input: DebugElement; diff --git a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts index 41c4836eccd..dc7b9394273 100644 --- a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxRadioGroupDirective } from './radio-group.directive'; import { FormsModule, ReactiveFormsModule, UntypedFormGroup, UntypedFormBuilder, FormGroup, FormControl } from '@angular/forms'; @@ -20,7 +20,9 @@ describe('IgxRadioGroupDirective', () => { RadioGroupWithModelComponent, RadioGroupRequiredComponent, RadioGroupReactiveFormsComponent, - RadioGroupDeepProjectionComponent + RadioGroupDeepProjectionComponent, + RadioGroupTestComponent, + DynamicRadioGroupComponent ] }) .compileComponents(); @@ -69,6 +71,7 @@ describe('IgxRadioGroupDirective', () => { // name radioInstance.name = 'newGroupName'; fixture.detectChanges(); + tick(); const allButtonsWithNewName = radioInstance.radioButtons.filter((btn) => btn.name === 'newGroupName'); expect(allButtonsWithNewName.length).toEqual(radioInstance.radioButtons.length); @@ -76,6 +79,7 @@ describe('IgxRadioGroupDirective', () => { // required radioInstance.required = true; fixture.detectChanges(); + tick(); const allRequiredButtons = radioInstance.radioButtons.filter((btn) => btn.required); expect(allRequiredButtons.length).toEqual(radioInstance.radioButtons.length); @@ -261,6 +265,38 @@ describe('IgxRadioGroupDirective', () => { expect(radioGroup.radioButtons.first.checked).toEqual(true); expect(domRadio.classList.contains('igx-radio--invalid')).toBe(false); })); + + it('Should select radio button when added programmatically after group value is set', (() => { + const fixture = TestBed.createComponent(DynamicRadioGroupComponent); + const component = fixture.componentInstance; + const radioGroup = component.radioGroup; + + // Simulate AppBuilder configurator setting value before radio buttons exist + radioGroup.value = 'option2'; + + // Verify no radio buttons exist yet + expect(radioGroup.radioButtons.length).toBe(0); + expect(radioGroup.selected).toBeNull(); + + fixture.detectChanges(); + + component.addRadioButton('option1', 'Option 1'); + component.addRadioButton('option2', 'Option 2'); + component.addRadioButton('option3', 'Option 3'); + + fixture.detectChanges(); + + // Radio button with value 'option2' should be selected + expect(radioGroup.value).toBe('option2'); + expect(radioGroup.selected).toBeDefined(); + expect(radioGroup.selected.value).toBe('option2'); + expect(radioGroup.selected.checked).toBe(true); + + // Verify only one radio button is selected + const checkedButtons = radioGroup.radioButtons.filter(btn => btn.checked); + expect(checkedButtons.length).toBe(1); + expect(checkedButtons[0].value).toBe('option2'); + })); }); @Component({ @@ -444,8 +480,75 @@ class RadioGroupDeepProjectionComponent { } } +@Component({ + template: ` + + + + `, + imports: [IgxRadioComponent, IgxRadioGroupDirective] +}) + +class RadioGroupTestComponent implements OnInit { + @ViewChild('radioContainer', { read: ViewContainerRef, static: true }) + public container!: ViewContainerRef; + + public alignment = 'horizontal'; + public required = false; + public value: any; + + public radios: { label: string; value: any }[] = []; + + public handleChange(args: any) { + this.value = args.value; + } + + public ngOnInit(): void { + this.container.clear(); + this.radios.forEach((option) => { + const componentRef: ComponentRef = + this.container.createComponent(IgxRadioComponent); + + componentRef.instance.placeholderLabel.nativeElement.textContent = + option.label; + componentRef.instance.value = option.value; + }); + } +} + +@Component({ + template: ` + + + + `, + imports: [IgxRadioGroupDirective, IgxRadioComponent] +}) +class DynamicRadioGroupComponent { + @ViewChild('radioGroup', { read: IgxRadioGroupDirective, static: true }) + public radioGroup: IgxRadioGroupDirective; + + @ViewChild('radioContainer', { read: ViewContainerRef, static: true }) + public radioContainer: ViewContainerRef; + + /** + * Simulates how AppBuilder adds radio buttons programmatically + * via ViewContainerRef.createComponent() + */ + public addRadioButton(value: string, label: string): void { + const componentRef = this.radioContainer.createComponent(IgxRadioComponent); + componentRef.instance.value = value; + componentRef.instance.placeholderLabel.nativeElement.textContent = label; + componentRef.changeDetectorRef.detectChanges(); + } +} + const dispatchRadioEvent = (eventName, radioNativeElement, fixture) => { radioNativeElement.dispatchEvent(new Event(eventName)); fixture.detectChanges(); }; - diff --git a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts index df043d655f6..58d94eae045 100644 --- a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts @@ -12,7 +12,6 @@ import { QueryList, Self, booleanAttribute, - contentChildren, effect, signal } from '@angular/core'; @@ -62,7 +61,7 @@ let nextId = 0; standalone: true }) export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, DoCheck { - private _radioButtons = contentChildren(IgxRadioComponent, { descendants: true }); + private _radioButtons = signal([]); private _radioButtonsList = new QueryList(); /** @@ -74,8 +73,7 @@ export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, * ``` */ public get radioButtons(): QueryList { - const buttons = Array.from(this._radioButtons()); - this._radioButtonsList.reset(buttons); + this._radioButtonsList.reset(this._radioButtons()); return this._radioButtonsList; } @@ -493,10 +491,7 @@ export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, effect(() => { this.initialize(); - - Promise.resolve().then(() => { - this.setRadioButtons(); - }); + this.setRadioButtons(); }); } @@ -534,8 +529,10 @@ export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, */ private setRadioButtons() { this._radioButtons().forEach((button) => { - button.name = this._name; - button.required = this._required; + Promise.resolve().then(() => { + button.name = this._name; + button.required = this._required; + }); if (button.value === this._value) { button.checked = true; @@ -647,6 +644,33 @@ export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, } } + /** + * Registers a radio button with this radio group. + * This method is called by radio button components when they are created. + * @hidden @internal + */ + public _addRadioButton(radioButton: IgxRadioComponent): void { + this._radioButtons.update(buttons => { + if (!buttons.includes(radioButton)) { + this._setRadioButtonEvents(radioButton); + + return [...buttons, radioButton]; + } + return buttons; + }); + } + + /** + * Unregisters a radio button from this radio group. + * This method is called by radio button components when they are destroyed. + * @hidden @internal + */ + public _removeRadioButton(radioButton: IgxRadioComponent): void { + this._radioButtons.update(buttons => + buttons.filter(btn => btn !== radioButton) + ); + } + /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/radio/radio.component.ts b/projects/igniteui-angular/src/lib/radio/radio.component.ts index bbf1374c71e..4164e8e3f8c 100644 --- a/projects/igniteui-angular/src/lib/radio/radio.component.ts +++ b/projects/igniteui-angular/src/lib/radio/radio.component.ts @@ -6,12 +6,15 @@ import { HostListener, Input, ViewEncapsulation, - booleanAttribute + booleanAttribute, + OnDestroy, + inject } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider'; import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; import { CheckboxBaseDirective } from '../checkbox/checkbox-base.directive'; +import { IgxRadioGroupDirective } from '../directives/radio/radio-group.directive'; /** * **Ignite UI for Angular Radio Button** - @@ -41,11 +44,13 @@ import { CheckboxBaseDirective } from '../checkbox/checkbox-base.directive'; export class IgxRadioComponent extends CheckboxBaseDirective - implements AfterViewInit, ControlValueAccessor, EditorProvider { + implements AfterViewInit, OnDestroy, ControlValueAccessor, EditorProvider { /** @hidden @internal */ public blurRadio = new EventEmitter(); + private radioGroup = inject(IgxRadioGroupDirective, { optional: true, skipSelf: true }); + /** * Returns the class of the radio component. * ```typescript @@ -205,4 +210,28 @@ export class IgxRadioComponent super.onBlur(); this.blurRadio.emit(); } + + /** + * @hidden + * @internal + */ + public override ngAfterViewInit(): void { + super.ngAfterViewInit(); + + // Register with parent radio group if it exists + if (this.radioGroup) { + this.radioGroup._addRadioButton(this); + } + } + + /** + * @hidden + * @internal + */ + public ngOnDestroy(): void { + // Unregister from parent radio group if it exists + if (this.radioGroup) { + this.radioGroup._removeRadioButton(this); + } + } } diff --git a/src/app/radio/radio-group.component.html b/src/app/radio/radio-group.component.html new file mode 100644 index 00000000000..967c1c46fca --- /dev/null +++ b/src/app/radio/radio-group.component.html @@ -0,0 +1,8 @@ + + + diff --git a/src/app/radio/radio-group.component.ts b/src/app/radio/radio-group.component.ts new file mode 100644 index 00000000000..bc1ff604c55 --- /dev/null +++ b/src/app/radio/radio-group.component.ts @@ -0,0 +1,46 @@ +import { + Component, + Input, + ViewChild, + ComponentRef, + ViewContainerRef, + OnInit, +} from '@angular/core'; +import { + IChangeCheckboxEventArgs, + IgxRadioComponent, + IgxRadioGroupDirective, + RadioGroupAlignment, +} from 'igniteui-angular'; + +@Component({ + selector: 'app-radio-group', + templateUrl: './radio-group.component.html', + imports: [IgxRadioGroupDirective], +}) +export class RadioGroupComponent implements OnInit { + @Input() public alignment!: RadioGroupAlignment; + @Input() public required!: boolean; + @Input() public value!: unknown; + + public handleChange(args: IChangeCheckboxEventArgs) { + this.value = args.value; + } + + @ViewChild('radioContainer', { read: ViewContainerRef, static: true }) + public container!: ViewContainerRef; + + @Input() public radios: { label: string; value: any }[] = []; + + public ngOnInit(): void { + this.container.clear(); + this.radios.forEach((option) => { + const componentRef: ComponentRef = + this.container.createComponent(IgxRadioComponent); + + componentRef.instance.placeholderLabel.nativeElement.textContent = + option.label; + componentRef.instance.value = option.value; + }); + } +} diff --git a/src/app/radio/radio.sample.html b/src/app/radio/radio.sample.html index d0e509bcfb5..e11bfeac6ee 100644 --- a/src/app/radio/radio.sample.html +++ b/src/app/radio/radio.sample.html @@ -100,3 +100,12 @@

Radio group in reactive form

Updated model: {{ newPerson | json }}

+
+
+

Dynamically Create Radio Group

+ + +
+
diff --git a/src/app/radio/radio.sample.scss b/src/app/radio/radio.sample.scss index b86e6fe8c0d..1f380645ffa 100644 --- a/src/app/radio/radio.sample.scss +++ b/src/app/radio/radio.sample.scss @@ -1,3 +1,7 @@ +igx-radio-group { + width: initial; +} + .sample-content { flex-flow: column nowrap; } diff --git a/src/app/radio/radio.sample.ts b/src/app/radio/radio.sample.ts index bc25a6e32fc..af11ff6079b 100644 --- a/src/app/radio/radio.sample.ts +++ b/src/app/radio/radio.sample.ts @@ -1,8 +1,28 @@ -import { Component, ViewChild, AfterContentInit } from '@angular/core'; +import { + Component, + ViewChild, + AfterContentInit, + ViewContainerRef, + inject, + ChangeDetectorRef, + ChangeDetectionStrategy +} from '@angular/core'; import { JsonPipe } from '@angular/common'; import { UntypedFormGroup, UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { IgxRadioGroupDirective, IgxLayoutDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxRippleDirective, IgxButtonDirective, IgxRadioComponent, RadioGroupAlignment } from 'igniteui-angular'; - +import { + IgxRadioGroupDirective, + IgxLayoutDirective, + IgxCardComponent, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardContentDirective, + IgxCardActionsComponent, + IgxRippleDirective, + IgxButtonDirective, + IgxRadioComponent, + RadioGroupAlignment +} from 'igniteui-angular'; +import { RadioGroupComponent } from './radio-group.component'; class Person { public favoriteSeason: string; @@ -18,7 +38,22 @@ class Person { selector: 'app-radio-sample', styleUrls: ['radio.sample.scss'], templateUrl: 'radio.sample.html', - imports: [IgxRadioGroupDirective, FormsModule, IgxLayoutDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxRippleDirective, IgxButtonDirective, IgxRadioComponent, ReactiveFormsModule, JsonPipe] + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + IgxRadioGroupDirective, + FormsModule, + IgxLayoutDirective, + IgxCardComponent, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardContentDirective, + IgxCardActionsComponent, + IgxRippleDirective, + IgxButtonDirective, + IgxRadioComponent, + ReactiveFormsModule, + JsonPipe + ] }) export class RadioSampleComponent implements AfterContentInit { @ViewChild('radioGroupZZ', { read: IgxRadioGroupDirective, static: true }) @@ -40,11 +75,35 @@ export class RadioSampleComponent implements AfterContentInit { public personKirk: Person = new Person('Kirk', this.seasons[1].name); public personKirkForm: UntypedFormGroup; public alignment: RadioGroupAlignment = RadioGroupAlignment.vertical; + private viewContainerRef = inject(ViewContainerRef); + + private cdr = inject(ChangeDetectorRef); constructor(private _formBuilder: UntypedFormBuilder) { this._createPersonKirkForm(); } + public createRadioGroupComponent() { + this.viewContainerRef.clear(); + + const componentRef = this.viewContainerRef.createComponent(RadioGroupComponent); + const radioGroup = componentRef.instance as RadioGroupComponent; + + radioGroup.value = 1; + radioGroup.required = true; + + radioGroup.radios = [ + { value: 1, label: 'Radio 1' }, + { value: 2, label: 'Radio 2' }, + { value: 3, label: 'Radio 3' }, + ]; + } + + public removeRadioGroupComponent() { + this.viewContainerRef.clear(); + this.cdr.detectChanges(); + } + public get diagnostic() { return JSON.stringify(this.personBob); } From 9bdcc1eaa9e8c543d439eefb62bfd519635fb08a Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Tue, 29 Jul 2025 10:06:25 +0300 Subject: [PATCH 095/131] fix(date-picker): indigo theme elevations (#16085) --- .../src/lib/date-picker/themes/_base.scss | 3 +-- .../src/lib/date-picker/themes/dark/_index.scss | 1 + .../src/lib/date-picker/themes/dark/_indigo.scss | 16 ++++++++++++++++ .../lib/date-picker/themes/shared/_indigo.scss | 9 ++++++++- 4 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/date-picker/themes/dark/_indigo.scss diff --git a/projects/igniteui-angular/src/lib/date-picker/themes/_base.scss b/projects/igniteui-angular/src/lib/date-picker/themes/_base.scss index c6835f15453..3752389d01f 100644 --- a/projects/igniteui-angular/src/lib/date-picker/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/date-picker/themes/_base.scss @@ -14,7 +14,7 @@ $theme: $material; display: block; // TODO move the shadow in the schemas - box-shadow: $border-shadow, elevation(24),; + box-shadow: $border-shadow, elevation(24); border-radius: var-get($theme, 'border-radius'); background: var-get($theme, 'content-background'); overflow: hidden; @@ -38,7 +38,6 @@ $theme: $material; display: flex; justify-content: flex-end; - gap: rem(8px); // TODO remove this line after the override (--component-size: var(--ig-size, var(--ig-size-large)) is removed diff --git a/projects/igniteui-angular/src/lib/date-picker/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/date-picker/themes/dark/_index.scss index 41c1df0f62c..d607e5e3d9d 100644 --- a/projects/igniteui-angular/src/lib/date-picker/themes/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/date-picker/themes/dark/_index.scss @@ -1,5 +1,6 @@ @use 'sass:meta'; @use 'tokens'; +@use 'indigo'; @use 'styles/themes/standalone' as *; $tokens: meta.module-variables(tokens); diff --git a/projects/igniteui-angular/src/lib/date-picker/themes/dark/_indigo.scss b/projects/igniteui-angular/src/lib/date-picker/themes/dark/_indigo.scss new file mode 100644 index 00000000000..c0b7321ae0f --- /dev/null +++ b/projects/igniteui-angular/src/lib/date-picker/themes/dark/_indigo.scss @@ -0,0 +1,16 @@ +@use 'igniteui-theming/sass/bem/index' as *; +@use 'igniteui-theming/sass/typography/index' as *; +@use 'igniteui-theming/sass/elevations' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-date-picker, indigo, dark) { + $border-shadow: 0 0 0 rem(1px) var-get($_theme, 'border-color'); + box-shadow: $border-shadow, elevation(7); + + @include m(dropdown) { + box-shadow: $border-shadow, elevation(2); + } +} diff --git a/projects/igniteui-angular/src/lib/date-picker/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/date-picker/themes/shared/_indigo.scss index 669e2e6f248..031ba2dd9af 100644 --- a/projects/igniteui-angular/src/lib/date-picker/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/date-picker/themes/shared/_indigo.scss @@ -1,15 +1,22 @@ @use 'igniteui-theming/sass/bem/index' as *; @use 'igniteui-theming/sass/typography/index' as *; -@use 'igniteui-theming/sass/animations/index' as *; @use 'igniteui-theming/sass/themes/functions' as *; +@use 'igniteui-theming/sass/elevations' as *; @use 'styles/themes/standalone' as *; @use '../light/tokens' as *; $_theme: $indigo; @include themed-block(igx-date-picker, indigo) { + $border-shadow: 0 0 0 rem(1px) var-get($_theme, 'border-color'); + box-shadow: $border-shadow, elevation(5); + @include e(actions) { min-height: sizable(rem(40px), rem(44px), rem(48px)); padding: rem(8px) rem(16px); } + + @include m(dropdown) { + box-shadow: $border-shadow, elevation(3); + } } From e09d808e65d4137815866ea8239bd9c3eeca0328 Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Thu, 21 Aug 2025 09:20:06 +0300 Subject: [PATCH 096/131] fix(textarea): suffix space (#16140) --- .../input-group/themes/shared/material.scss | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss index 292037bda58..19d13afd707 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -340,6 +340,29 @@ $input-bottom-spacing: rem(6px); } } + @include m(textarea-group, $not: (suffixed)) { + @include e(bundle-main) { + grid-area: 1 / 2 / span 1 / span 3; + padding-inline-end: 0; + } + + @include e(textarea) { + padding-inline-end: rem(4px); + } + } + + @include mx(box, textarea-group, ('not': (suffixed))) { + @include e(textarea) { + max-width: calc(100% - #{rem(1px)}); + } + } + + @include mx(border, textarea-group, ('not': (suffixed))) { + @include e(textarea) { + max-width: calc(100% - #{rem(2px)}); + } + } + @include mx(base, textarea-group) { @include e(label) { top: var(--_input-top-spacing); From 6141c64ee17b410e6b857d2f778c26ae9cc78f0e Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Thu, 21 Aug 2025 15:27:27 +0300 Subject: [PATCH 097/131] fix(input-group): prefix & suffix bootstrap border (#16151) --- .../input-group/themes/shared/bootstrap.scss | 95 +++++++++++++------ 1 file changed, 65 insertions(+), 30 deletions(-) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss index fe337609992..37edbc0815d 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss @@ -27,7 +27,6 @@ $border-radius: var-get($_theme, 'border-border-radius'); .igx-input-group__bundle-main { border-start-start-radius: $border-radius; border-end-start-radius: $border-radius; - } } @@ -44,20 +43,6 @@ $border-radius: var-get($_theme, 'border-border-radius'); border-radius: $border-radius; } } - - igx-suffix + .igx-input-group__toggle-button, - [igxSuffix] + .igx-input-group__toggle-button { - // Add border between the toggle button and the rest of the suffixes - border-inline-start: $border-size solid $border-color; - } - - igx-input-group:not(.igx-input-group--disabled) { - .igx-input-group__clear-icon + igx-suffix, - .igx-input-group__clear-icon + [igxSuffix] { - // Add border between the clear button and the rest of the suffixes - border-inline-start: $border-size solid $border-color; - } - } } } @@ -186,6 +171,24 @@ $border-radius: var-get($_theme, 'border-border-radius'); } } + @include m(prefixed, $not: (disabled)) { + @include e(bundle-start) { + igx-prefix:not(:first-child), + [igxPrefix]:not(:first-child) { + border-inline-start: rem(1px) solid var-get($_theme, 'border-color'); + } + } + } + + @include m(suffixed, $not: (disabled)) { + @include e(bundle-end) { + igx-suffix:not(:last-child), + [igxSuffix]:not(:last-child) { + border-inline-end: rem(1px) solid var-get($_theme, 'border-color'); + } + } + } + @include m(suffixed) { @include e(bundle-end) { @extend %border-styles; @@ -344,16 +347,20 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(bundle-start) { border-color: var-get($_theme, 'focused-border-color'); + + igx-prefix:not(:first-child), + [igxPrefix]:not(:first-child) { + border-inline-start: rem(1px) solid var-get($_theme, 'focused-border-color'); + } } @include e(bundle-end) { border-color: var-get($_theme, 'focused-border-color'); - } - .igx-input-group__clear-icon + igx-suffix, - .igx-input-group__clear-icon + [igxSuffix] { - // Add border between the clear button and the rest of the suffixes - border-color: var-get($_theme, 'focused-border-color'); + igx-suffix:not(:last-child), + [igxSuffix]:not(:last-child) { + border-inline-end: rem(1px) solid var-get($_theme, 'focused-border-color'); + } } } @@ -364,16 +371,20 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(bundle-start) { border-color: var-get($_theme, 'success-secondary-color'); + + igx-prefix:not(:first-child), + [igxPrefix]:not(:first-child) { + border-inline-start: rem(1px) solid var-get($_theme, 'success-secondary-color'); + } } @include e(bundle-end) { border-color: var-get($_theme, 'success-secondary-color'); - } - .igx-input-group__clear-icon + igx-suffix, - .igx-input-group__clear-icon + [igxSuffix] { - // Add border between the clear button and the rest of the suffixes - border-color: var-get($_theme, 'success-secondary-color'); + igx-suffix:not(:last-child), + [igxSuffix]:not(:last-child) { + border-inline-end: rem(1px) solid var-get($_theme, 'success-secondary-color'); + } } } @@ -384,10 +395,20 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(bundle-start) { border-color: var-get($_theme, 'error-secondary-color'); + + igx-prefix:not(:first-child), + [igxPrefix]:not(:first-child) { + border-inline-start: rem(1px) solid var-get($_theme, 'error-secondary-color'); + } } @include e(bundle-end) { border-color: var-get($_theme, 'error-secondary-color'); + + igx-suffix:not(:last-child), + [igxSuffix]:not(:last-child) { + border-inline-end: rem(1px) solid var-get($_theme, 'error-secondary-color'); + } } } @@ -398,16 +419,20 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(bundle-start) { border-color: var-get($_theme, 'warning-secondary-color'); + + igx-prefix:not(:first-child), + [igxPrefix]:not(:first-child) { + border-inline-start: rem(1px) solid var-get($_theme, 'warning-secondary-color'); + } } @include e(bundle-end) { border-color: var-get($_theme, 'warning-secondary-color'); - } - .igx-input-group__clear-icon + igx-suffix, - .igx-input-group__clear-icon + [igxSuffix] { - // Add border between the clear button and the rest of the suffixes - border-color: var-get($_theme, 'warning-secondary-color'); + igx-suffix:not(:last-child), + [igxSuffix]:not(:last-child) { + border-inline-end: rem(1px) solid var-get($_theme, 'warning-secondary-color'); + } } } @@ -441,10 +466,20 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include e(bundle-start) { @extend %disabled-styles; + + igx-prefix:not(:first-child), + [igxPrefix]:not(:first-child) { + border-inline-start: rem(1px) solid var-get($_theme, 'disabled-border-color'); + } } @include e(bundle-end) { @extend %disabled-styles; + + igx-suffix:not(:last-child), + [igxSuffix]:not(:last-child) { + border-inline-end: rem(1px) solid var-get($_theme, 'disabled-border-color'); + } } @include e(upload) { From 710b3eee78aec5e095abf87700e725255c8bf5a4 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Mon, 15 Sep 2025 14:52:31 +0300 Subject: [PATCH 098/131] feat(combo): fix combo initial dropdown height (#16171) * feat(combo): fix combo initial dropdown height * refactor(themes): update dropdown theme to use a CSS variable for item count --------- Co-authored-by: Simeon Simeonoff --- .../src/lib/combo/combo.component.spec.ts | 54 +++++++++---------- .../src/lib/combo/themes/_base.scss | 3 +- .../src/lib/combo/themes/shared/indigo.scss | 4 ++ .../simple-combo.component.spec.ts | 10 ++-- 4 files changed, 36 insertions(+), 35 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 45c771076c9..c9feb201db0 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -56,7 +56,7 @@ const CSS_CLASS_EMPTY = 'igx-combo__empty'; const CSS_CLASS_ITEM_CHECKBOX = 'igx-combo__checkbox'; const CSS_CLASS_ITME_CHECKBOX_CHECKED = 'igx-checkbox--checked'; const defaultDropdownItemHeight = 40; -const defaultDropdownItemMaxHeight = 400; +const defaultDropdownItemMaxHeight = 240; describe('igxCombo', () => { let fixture: ComponentFixture; @@ -1211,13 +1211,11 @@ describe('igxCombo', () => { const dropdownItems = dropdownList.querySelectorAll(`.${CSS_CLASS_DROPDOWNLISTITEM}`); expect(dropdownItems[1].classList.contains(CSS_CLASS_SELECTED)).toBeFalsy(); expect(dropdownItems[3].classList.contains(CSS_CLASS_SELECTED)).toBeFalsy(); - expect(dropdownItems[7].classList.contains(CSS_CLASS_SELECTED)).toBeFalsy(); - combo.select(['Illinois', 'Mississippi', 'Ohio']); + combo.select(['Illinois', 'Ohio']); fixture.detectChanges(); expect(dropdownItems[1].classList.contains(CSS_CLASS_SELECTED)).toBeTruthy(); expect(dropdownItems[3].classList.contains(CSS_CLASS_SELECTED)).toBeTruthy(); - expect(dropdownItems[7].classList.contains(CSS_CLASS_SELECTED)).toBeTruthy(); combo.deselect(['Ohio']); fixture.detectChanges(); @@ -1237,9 +1235,9 @@ describe('igxCombo', () => { expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); // Change focus - dropdown.navigateItem(6); + dropdown.navigateItem(4); fixture.detectChanges(); - const focusedItem_2 = dropdownItems[5]; + const focusedItem_2 = dropdownItems[3]; expect(focusedItem_2.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeFalsy(); }); @@ -1803,7 +1801,7 @@ describe('igxCombo', () => { dropdown.toggle(); fixture.detectChanges(); expect(dropdown.items).toBeDefined(); - expect(dropdown.items.length).toEqual(9); + expect(dropdown.items.length).toEqual(5); dropdown.onFocus(); expect(dropdown.focusedItem).toEqual(dropdown.items[0]); expect(dropdown.focusedItem.focused).toEqual(true); @@ -1925,17 +1923,17 @@ describe('igxCombo', () => { selectedItemsCount++; selectAndVerifyItem(0); - for (let index = 1; index < 7; index++) { + for (let index = 1; index < 5; index++) { focusAndVerifyItem(index, 'ArrowDown'); } selectedItemsCount++; - selectAndVerifyItem(6); + selectAndVerifyItem(4); - for (let index = 5; index > 3; index--) { + for (let index = 3; index >= 2; index--) { focusAndVerifyItem(index, 'ArrowUp'); } selectedItemsCount++; - selectAndVerifyItem(4); + selectAndVerifyItem(2); }); it('should properly navigate using HOME/END key', (async () => { let firstVisibleItem: Element; @@ -2093,7 +2091,7 @@ describe('igxCombo', () => { const scrollbar = fixture.debugElement.query(By.css(`.${CSS_CLASS_SCROLLBAR_VERTICAL}`)).nativeElement as HTMLElement; expect(scrollbar.scrollTop).toEqual(0); - combo.virtualScrollContainer.scrollTo(16); + combo.virtualScrollContainer.scrollTo(12); await firstValueFrom(combo.virtualScrollContainer.chunkLoad); fixture.detectChanges(); let selectedItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[1]; @@ -2109,7 +2107,7 @@ describe('igxCombo', () => { // Content was scrolled to bottom expect(scrollbar.scrollHeight - scrollbar.scrollTop).toEqual(scrollbar.clientHeight); - combo.virtualScrollContainer.scrollTo(5); + combo.virtualScrollContainer.scrollTo(4); await firstValueFrom(combo.virtualScrollContainer.chunkLoad); fixture.detectChanges(); selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`)); @@ -2184,15 +2182,14 @@ describe('igxCombo', () => { expect(input.nativeElement.value).toEqual(expectedOutput); }); it('should dismiss all selected items by pressing clear button', () => { - const expectedOutput = 'Kentucky, Ohio, Indiana'; - combo.select(['Kentucky', 'Ohio', 'Indiana']); + const expectedOutput = 'Ohio, Indiana'; + combo.select(['Ohio', 'Indiana']); fixture.detectChanges(); expect(input.nativeElement.value).toEqual(expectedOutput); combo.toggle(); fixture.detectChanges(); expect(combo.dropdown.items[1].selected).toBeTruthy(); expect(combo.dropdown.items[4].selected).toBeTruthy(); - expect(combo.dropdown.items[6].selected).toBeTruthy(); const clearBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`)); clearBtn.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); @@ -2205,7 +2202,6 @@ describe('igxCombo', () => { fixture.detectChanges(); expect(combo.dropdown.items[1].selected).toBeFalsy(); expect(combo.dropdown.items[4].selected).toBeFalsy(); - expect(combo.dropdown.items[6].selected).toBeFalsy(); }); it('should show/hide clear button after selecting/deselecting items', () => { // This is a workaround for issue github.com/angular/angular/issues/14235 @@ -2263,8 +2259,8 @@ describe('igxCombo', () => { cancel: false }); - const selectedItem_2 = dropdown.items[5]; - simulateComboItemClick(5); + const selectedItem_2 = dropdown.items[4]; + simulateComboItemClick(4); expect(combo.selection[1]).toEqual(selectedItem_2.value); expect(combo.value[1]).toEqual(selectedItem_2.value[combo.valueKey]); expect(selectedItem_2.selected).toBeTruthy(); @@ -2681,19 +2677,19 @@ describe('igxCombo', () => { combo.toggle(); fixture.detectChanges(); let headers = combo.dropdown.headers.map(header => header.element.nativeElement.textContent?.trim()); - expect(headers).toEqual(['Ángel', 'Boris', 'México', 'Méxícó']); + expect(headers).toEqual(['Ángel', 'Boris', 'México']); combo.groupSortingDirection = SortingDirection.Desc; combo.toggle(); fixture.detectChanges(); headers = combo.dropdown.headers.map(header => header.element.nativeElement.textContent?.trim()); - expect(headers).toEqual(['Méxícó', 'México', 'Boris', 'Ángel']); + expect(headers).toEqual(['Méxícó', 'México', 'Boris']); combo.groupSortingDirection = SortingDirection.None; combo.toggle(); fixture.detectChanges(); headers = combo.dropdown.headers.map(header => header.element.nativeElement.textContent?.trim()); - expect(headers).toEqual(['Méxícó', 'Ángel', 'México', 'Boris']); + expect(headers).toEqual(['Méxícó', 'Ángel', 'México']); }); }); describe('Filtering tests: ', () => { @@ -2852,8 +2848,8 @@ describe('igxCombo', () => { verifyFilteredItems('jose', 1); verifyFilteredItems('mexico', 3); - verifyFilteredItems('o', 7); - verifyFilteredItems('é', 7); + verifyFilteredItems('o', 6); + verifyFilteredItems('é', 6); })); it('should filter the dropdown items when typing in the search input', fakeAsync(() => { @@ -2878,9 +2874,9 @@ describe('igxCombo', () => { dropdownItems = dropdownList.querySelectorAll(`.${CSS_CLASS_DROPDOWNLISTITEM}`); expect(dropdownItems.length).toEqual(expectedItemsNumber); }; - verifyFilteredItems('M', 7); + verifyFilteredItems('M', 4); - verifyFilteredItems('Mi', 5); + verifyFilteredItems('Mi', 3); expectedValues = expectedValues.filter(data => data.field.toLowerCase().includes('mi')); checkFilteredItems(dropdownItems); @@ -2950,9 +2946,9 @@ describe('igxCombo', () => { expect(combo.filteredData.length).toEqual(expectedFilteredItemsNumber); }; - verifyFilteredItems('M', 7, 15); - verifyFilteredItems('Mi', 5, 5); - verifyFilteredItems('M', 7, 15); + verifyFilteredItems('M', 4, 15); + verifyFilteredItems('Mi', 3, 5); + verifyFilteredItems('M', 4, 15); combo.filteredData.forEach((item) => expect(combo.data).toContain(item)); }); it('should clear the search input and close the dropdown list on pressing ESC key', fakeAsync(() => { diff --git a/projects/igniteui-angular/src/lib/combo/themes/_base.scss b/projects/igniteui-angular/src/lib/combo/themes/_base.scss index 0127c25e638..b31c7d92b91 100644 --- a/projects/igniteui-angular/src/lib/combo/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/combo/themes/_base.scss @@ -11,6 +11,7 @@ $theme: $base; @include layer(base) { @include b(igx-drop-down) { + --item-count: 6; --_search-input-inline-padding: #{pad-inline(rem(4px), rem(8px), rem(16px))}; --_search-input-block-padding: #{pad-block(rem(8px))}; @@ -69,7 +70,7 @@ $theme: $base; position: relative; overflow: hidden; - max-height: calc(var(--size) * 10); + max-height: calc(var(--size) * var(--item-count)); &:focus { outline: transparent; diff --git a/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss index 9f5f0b48e7d..0130052b55c 100644 --- a/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss @@ -15,4 +15,8 @@ $_theme: $indigo; --ig-size: 2; } } + + @include e(content) { + max-height: calc(var(--size) * var(--item-count) + rem(16px)); + } } diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index a12afe7922a..be15185e685 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -699,8 +699,8 @@ describe('IgxSimpleCombo', () => { it('should render dropdown list and item height defaults properly', fakeAsync(() => { let itemHeight = 40; - // Initially there are 11 items inside the combo that's why it should be 440 - let dropdownHeight = 440; + // Initially there are 6 items inside the combo that's why it should be 240 + let dropdownHeight = 240; // NOTE: item height is 40px for a large variant fixture.componentInstance.size = "large"; @@ -721,7 +721,7 @@ describe('IgxSimpleCombo', () => { verifyDropdownItemHeight(); itemHeight = 48; - dropdownHeight = 480; + dropdownHeight = 288; combo.itemHeight = itemHeight; tick(); fixture.detectChanges(); @@ -760,9 +760,9 @@ describe('IgxSimpleCombo', () => { expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); // Change focus - dropdown.navigateItem(6); + dropdown.navigateItem(5); fixture.detectChanges(); - const focusedItem_2 = dropdownItems[5]; + const focusedItem_2 = dropdownItems[4]; expect(focusedItem_2.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeFalsy(); }); From 28a023eb6e98a5f9f83e8fe64ee1fff40d99a01e Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 18 Sep 2025 17:17:20 +0300 Subject: [PATCH 099/131] fix(demos): not running after merging master --- package-lock.json | 23 ++++++++++++ .../components/button/_button-theme.scss | 36 +++++++++---------- .../components/highlight/highlight-theme.scss | 1 + .../directives/radio/radio-group.directive.ts | 27 -------------- src/styles/_variables.scss | 8 ++--- 5 files changed, 46 insertions(+), 49 deletions(-) diff --git a/package-lock.json b/package-lock.json index 81b448849d8..c8d03ae3563 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21663,6 +21663,19 @@ "node": ">=8" } }, + "node_modules/shell-quote": { + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz", + "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/shiki": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.6.0.tgz", @@ -23380,6 +23393,16 @@ "dev": true, "license": "MIT" }, + "node_modules/tree-kill": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", + "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", + "dev": true, + "license": "MIT", + "bin": { + "tree-kill": "cli.js" + } + }, "node_modules/trim-lines": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index a855e4b73e1..2df17456637 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -420,24 +420,6 @@ color: var-get($flat-theme, 'icon-color'); } - &:hover { - background: var-get($flat-theme, 'focus-hover-background'); - color: var-get($flat-theme, 'focus-hover-foreground'); - - igx-icon { - color: var-get($flat-theme, 'icon-color-hover'); - } - } - - &:active { - background: var-get($flat-theme, 'focus-background'); - color: var-get($flat-theme, 'focus-foreground'); - - igx-icon { - color: var-get($flat-theme, 'focus-foreground'); - } - } - @if $variant == 'bootstrap' { box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color'); } @@ -465,6 +447,24 @@ } } } + + &:hover { + background: var-get($flat-theme, 'focus-hover-background'); + color: var-get($flat-theme, 'focus-hover-foreground'); + + igx-icon { + color: var-get($flat-theme, 'icon-color-hover'); + } + } + + &:active { + background: var-get($flat-theme, 'focus-background'); + color: var-get($flat-theme, 'focus-foreground'); + + igx-icon { + color: var-get($flat-theme, 'focus-foreground'); + } + } } %igx-button--outlined { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss index dc4c51f0db1..1cbe1d99325 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../../base' as *; +@use '../../../styles/themes/standalone' as *; /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts index 9b8b9074ddb..df56b8b46cf 100644 --- a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts @@ -645,33 +645,6 @@ export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, } - /** - * Registers a radio button with this radio group. - * This method is called by radio button components when they are created. - * @hidden @internal - */ - public _addRadioButton(radioButton: IgxRadioComponent): void { - this._radioButtons.update(buttons => { - if (!buttons.includes(radioButton)) { - this._setRadioButtonEvents(radioButton); - - return [...buttons, radioButton]; - } - return buttons; - }); - } - - /** - * Unregisters a radio button from this radio group. - * This method is called by radio button components when they are destroyed. - * @hidden @internal - */ - public _removeRadioButton(radioButton: IgxRadioComponent): void { - this._radioButtons.update(buttons => - buttons.filter(btn => btn !== radioButton) - ); - } - /** * Registers a radio button with this radio group. * This method is called by radio button components when they are created. diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 21d2f079812..fa429165538 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-bootstrap-palette; -$schema: $light-bootstrap-schema; -$typeface: $bootstrap-typeface; -$type-scale: $bootstrap-type-scale; +$palette: $light-material-palette; +$schema: $light-material-schema; +$typeface: $material-typeface; +$type-scale: $material-type-scale; $variant: map.get($schema, '_meta', 'variant'); $background-color: var(--ig-gray-900-contrast); From 0f609be8f966ed01876b9d286321b8d0f0ac276b Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 18 Sep 2025 17:23:41 +0300 Subject: [PATCH 100/131] lint(stylelint): fix errors --- .../components/button/_button-theme.scss | 3 +- .../calendar/_calendar-component.scss | 280 +++++++++--------- 2 files changed, 141 insertions(+), 142 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 2df17456637..9483852a66f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -63,8 +63,7 @@ $variant ); - $button-transition: - color var(--_init-transition, #{$time}) ease-in-out, + $button-transition: color var(--_init-transition, #{$time}) ease-in-out, background-color var(--_init-transition, #{$time}) ease-in-out, border-color var(--_init-transition, #{$time}) ease-in-out, box-shadow var(--_init-transition, #{$time}) ease-in-out; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss index e490c3a06c1..75f84d362b7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss @@ -4,99 +4,99 @@ /// @access private /// @author Simeon Simeonoff @mixin component { - //@include b(igx-calendar) { - // $this: bem--selector-to-string(&); - // @include register-component( - // $name: string.slice($this, 2, -1), - // $deps: ( - // igx-icon, - // ) - // ); - // - // @extend %calendar !optional; - // - // @include e(header) { - // @extend %header-display !optional; - // } - // - // @include e(wrapper) { - // @extend %calendar-wrapper !optional; - // } - // - // @include e(wrapper, $m: 'vertical') { - // @extend %calendar-wrapper--vertical !optional; - // } - // - // @include e(pickers) { - // @extend %pickers-display !optional; - // } - // - // @include e(pickers, $m: 'vertical') { - // @extend %pickers-display--vertical !optional; - // } - // - // @include e(pickers, $m: 'days') { - // @extend %pickers-display--days !optional; - // } - // - // @include e(body) { - // @extend %body-display !optional; - // } - // - // @include e(body, $m: 'vertical') { - // @extend %body-display--vertical !optional; - // } - // - // @include e(header-year) { - // @extend %header-year !optional; - // } - // - // @include e(header-date) { - // @extend %header-date !optional; - // } - // - // @include m(vertical) { - // @extend %calendar !optional; - // @extend %calendar-vertical !optional; - // - // @include e(header) { - // @extend %header-display-vertical !optional; - // } - // - // @include e(header-date) { - // @extend %header-date !optional; - // @extend %header-date-vertical !optional; - // } - // } - // - // @include e(aria-off-screen) { - // @extend %calendar__aria-off-screen !optional; - // } - //} - // - //@include b(igx-calendar-picker) { - // @extend %views-navigation !optional; - // - // @include e(dates) { - // @extend %picker-dates !optional; - // } - // - // @include e(nav) { - // @extend %picker__nav !optional; - // } - // - // @include e(date) { - // @extend %picker-date !optional; - // } - // - // @include e(prev) { - // @extend %picker-arrow !optional; - // } - // - // @include e(next) { - // @extend %picker-arrow !optional; - // } - //} + @include b(igx-calendar) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); + + @extend %calendar !optional; + + @include e(header) { + @extend %header-display !optional; + } + + @include e(wrapper) { + @extend %calendar-wrapper !optional; + } + + @include e(wrapper, $m: 'vertical') { + @extend %calendar-wrapper--vertical !optional; + } + + @include e(pickers) { + @extend %pickers-display !optional; + } + + @include e(pickers, $m: 'vertical') { + @extend %pickers-display--vertical !optional; + } + + @include e(pickers, $m: 'days') { + @extend %pickers-display--days !optional; + } + + @include e(body) { + @extend %body-display !optional; + } + + @include e(body, $m: 'vertical') { + @extend %body-display--vertical !optional; + } + + @include e(header-year) { + @extend %header-year !optional; + } + + @include e(header-date) { + @extend %header-date !optional; + } + + @include m(vertical) { + @extend %calendar !optional; + @extend %calendar-vertical !optional; + + @include e(header) { + @extend %header-display-vertical !optional; + } + + @include e(header-date) { + @extend %header-date !optional; + @extend %header-date-vertical !optional; + } + } + + @include e(aria-off-screen) { + @extend %calendar__aria-off-screen !optional; + } + } + + @include b(igx-calendar-picker) { + @extend %views-navigation !optional; + + @include e(dates) { + @extend %picker-dates !optional; + } + + @include e(nav) { + @extend %picker__nav !optional; + } + + @include e(date) { + @extend %picker-date !optional; + } + + @include e(prev) { + @extend %picker-arrow !optional; + } + + @include e(next) { + @extend %picker-arrow !optional; + } + } @include b(igx-days-view) { @extend %calendar !optional; @@ -511,51 +511,51 @@ } } - //@include b(igx-calendar-view) { - // @extend %calendar-view !optional; - // - // @include e(items) { - // @extend %calendar-items !optional; - // } - // - // @include e(item) { - // @extend %view-item !optional; - // } - // - // @include e(item, 'current') { - // @extend %calendar-view__item-current !optional; - // } - // - // @include e(item, $mods: ('current', 'active')) { - // @extend %calendar-view__item-current-active !optional; - // } - // - // @include e(item, 'selected') { - // @extend %calendar-view__item-selected !optional; - // } - // - // @include e(item, $mods: ('selected', 'active')) { - // @extend %calendar-view__item-selected-active !optional; - // } - // - // @include e(item, $mods: ('selected', 'current')) { - // @extend %calendar-view__item-selected-current !optional; - // } - // - // @include e(item, $mods: ('selected', 'current', 'active')) { - // @extend %calendar-view__item-selected-current-active !optional; - // } - // - // @include e(item-inner) { - // @extend %calendar-view__item-inner !optional; - // - // &:hover { - // @extend %calendar-view__item-inner-hover !optional; - // } - // } - //} - // - //@include b(igx-month-picker) { - // @extend %month-picker !optional; - //} + @include b(igx-calendar-view) { + @extend %calendar-view !optional; + + @include e(items) { + @extend %calendar-items !optional; + } + + @include e(item) { + @extend %view-item !optional; + } + + @include e(item, 'current') { + @extend %calendar-view__item-current !optional; + } + + @include e(item, $mods: ('current', 'active')) { + @extend %calendar-view__item-current-active !optional; + } + + @include e(item, 'selected') { + @extend %calendar-view__item-selected !optional; + } + + @include e(item, $mods: ('selected', 'active')) { + @extend %calendar-view__item-selected-active !optional; + } + + @include e(item, $mods: ('selected', 'current')) { + @extend %calendar-view__item-selected-current !optional; + } + + @include e(item, $mods: ('selected', 'current', 'active')) { + @extend %calendar-view__item-selected-current-active !optional; + } + + @include e(item-inner) { + @extend %calendar-view__item-inner !optional; + + &:hover { + @extend %calendar-view__item-inner-hover !optional; + } + } + } + + @include b(igx-month-picker) { + @extend %month-picker !optional; + } } From 4e89eb98bffbebe95e61e1888dbd7d3791333226 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 18 Sep 2025 17:32:26 +0300 Subject: [PATCH 101/131] spec(*): tests not running --- .../src/lib/directives/drag-drop/drag-drop.spec.ts | 1 + .../src/lib/drop-down/drop-down.component.spec.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts index c1f1e75bfdc..522fc90ff7e 100644 --- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts @@ -14,6 +14,7 @@ import { IgxDragIgnoreDirective } from './drag-drop.directive'; import { IgxIconComponent } from '../../icon/icon.component'; +import { configureTestSuite } from '../../test-utils/configure-suite'; describe('General igxDrag/igxDrop', () => { let fix: ComponentFixture; diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index 92b9d292869..abbd06ac6cd 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -17,6 +17,7 @@ import { IgxSelectionAPIService } from '../core/selection'; import { IgxButtonDirective } from '../directives/button/button.directive'; import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../services/public_api'; +const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down'; const CSS_CLASS_LIST = 'igx-drop-down'; const CSS_CLASS_SCROLL = 'igx-drop-down__list-scroll'; const CSS_CLASS_ITEM = 'igx-drop-down__item'; From e057b8e8022032d433efc25bb5d229d72e59635c Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 19 Sep 2025 12:21:54 +0300 Subject: [PATCH 102/131] fix(input-group): fix broken input group after the merge conflict --- .../date-range-picker-inputs.common.ts | 4 +- .../input-group/input-group.component.html | 145 +++++------------- .../lib/input-group/input-group.component.ts | 2 +- .../input-group/themes/shared/material.scss | 8 +- .../combo-showcase/combo-showcase.sample.html | 7 +- .../combo-showcase/combo-showcase.sample.ts | 4 +- 6 files changed, 54 insertions(+), 116 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts index 6fb9732e4ce..3d20bb0a43a 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts @@ -131,7 +131,7 @@ export class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent { { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent }, { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent } ], - imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent] + imports: [NgTemplateOutlet, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent] }) export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent { } @@ -166,7 +166,7 @@ export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent }, { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent } ], - imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent] + imports: [NgTemplateOutlet, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent] }) export class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent { } diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html index 488a6851f85..bb2d68c1e66 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html @@ -1,39 +1,18 @@ -@if (isTypeBox) { -
- -
-} @else { - -} - -
- -
+ - - - - - - - - - - - @if (isFileType) { -
+
@@ -44,7 +23,7 @@ @if (isFileType) {
{{ fileNames }} @@ -55,110 +34,60 @@ @if (isFileType && isFilled) { } - - - + + @if (!isTypeBorder) { + + } -
- +
- + @if (isFileType) { + + } + + @if (isTypeBorder) {
- - -
- - - -
- -
- -
- - -
- - @if (hasBorder) { -
} -
- - - - - -
-
- -
-
- - - -
+ -
- - + @if (isFileType) { + + }
- @if (hasBorder) { -
+ @if (isTypeBorder) { +
} -
- - - +
+ @if (isFileType && isFilled) { + -
-
- + } +
+
- - - -
- - -
+
+
- - - @switch (theme) { - @case ('bootstrap') { - - } - @case ('fluent') { - - } - @case ('indigo') { - - } - @default { - - } - } - diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 797fadbb031..beeb2bfecfb 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -40,7 +40,7 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token styleUrl: 'input-group.component.css', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], - imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent] + imports: [NgTemplateOutlet, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent] }) export class IgxInputGroupComponent implements IgxInputGroupBase { /** diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss index 19d13afd707..8be9c5e14c4 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -345,7 +345,7 @@ $input-bottom-spacing: rem(6px); grid-area: 1 / 2 / span 1 / span 3; padding-inline-end: 0; } - + @include e(textarea) { padding-inline-end: rem(4px); } @@ -799,6 +799,12 @@ $input-bottom-spacing: rem(6px); } } + @include mx(border, invalid, filled) { + @include e(notch) { + border-block-start-color: transparent; + } + } + @include m(file, $not: (border)) { @include e(label) { @extend %box-floating-label; diff --git a/src/app/combo-showcase/combo-showcase.sample.html b/src/app/combo-showcase/combo-showcase.sample.html index e12a559fbd0..9ef9c933726 100644 --- a/src/app/combo-showcase/combo-showcase.sample.html +++ b/src/app/combo-showcase/combo-showcase.sample.html @@ -6,6 +6,7 @@

[displayKey]="valueKeyVar" [valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" - > + [(ngModel)]="angularComboVal" + [required]="properties.required"> Select a unique falsy value @@ -29,8 +31,7 @@

[groupSorting]="properties.groupSorting" [placeholder]="properties.placeholder" [placeholderSearch]="properties.placeholderSearch" - outlined="true" - [disabled]="properties.disabled" + outlined label="WC Combo" [data]="items" [displayKey]="valueKeyVar" diff --git a/src/app/combo-showcase/combo-showcase.sample.ts b/src/app/combo-showcase/combo-showcase.sample.ts index 42c3ccc7088..039098200f1 100644 --- a/src/app/combo-showcase/combo-showcase.sample.ts +++ b/src/app/combo-showcase/combo-showcase.sample.ts @@ -1,5 +1,5 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import { IGX_COMBO_DIRECTIVES, IgxHintDirective, @@ -19,6 +19,7 @@ defineComponents(IgcComboComponent); schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ FormsModule, + ReactiveFormsModule, IgxLabelDirective, IgxHintDirective, IGX_COMBO_DIRECTIVES, @@ -28,6 +29,7 @@ defineComponents(IgcComboComponent); export class ComboShowcaseSampleComponent { protected items: any[] = []; public valueKeyVar = 'field'; + public angularComboVal: any[] = []; public panelConfig: PropertyPanelConfig = { size: { From a397802a680b783c73036e0df10bf452a10f91aa Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Tue, 30 Sep 2025 10:41:14 +0300 Subject: [PATCH 103/131] fix(button-group): remove unnecessary bootstrap-specific styles (#16260) - We should not remove a border or any schema-connected style from the theme. Rather, we should update the variable in the schema, which in this case is already done. --- .../src/lib/buttonGroup/themes/shared/_bootstrap.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_bootstrap.scss index bc24bcd637c..01857d260e3 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_bootstrap.scss @@ -19,11 +19,6 @@ $_theme: $bootstrap; } @include e(item) { - &[igxButton] { - margin: 0; - border: none; - } - &:active { @extend %item-overlay; } From 78b850609399a84647a3dac25e2e56e7c124d19d Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Mon, 6 Oct 2025 14:23:14 +0300 Subject: [PATCH 104/131] fix(card): make sure that actions text color is not overriding the button themes (#16265) --- projects/igniteui-angular/src/lib/card/themes/_base.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/card/themes/_base.scss b/projects/igniteui-angular/src/lib/card/themes/_base.scss index ec0bca5419b..e2be0465e76 100644 --- a/projects/igniteui-angular/src/lib/card/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/card/themes/_base.scss @@ -10,12 +10,9 @@ $theme: $material; @include layer(base) { %h-actions { display: flex; - align-items: center; + align-items: center; gap: rem(8px); - - [igxIconButton] { - color: var-get($theme, 'actions-text-color'); - } + color: var-get($theme, 'actions-text-color'); &:empty { display: none; @@ -178,7 +175,6 @@ $theme: $material; @extend %h-actions; order: 1; - color: var-get($theme, 'actions-text-color'); margin-inline-start: auto; gap: rem(8px); From 3d63a25d9bfe438c5ad03153721d723ffdc9ac87 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 7 Oct 2025 15:25:00 +0300 Subject: [PATCH 105/131] fix(tooltip): post-merge theme fixes --- .../components/tooltip/_tooltip-theme.scss | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index 2d01e94f0ad..9ea32f1091e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../../base' as *; +@use '../../../styles/themes/standalone' as *; /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars @@ -65,28 +66,28 @@ display: none; } } +} - /// Adds typography styles for the igx-tooltip component. - /// Uses custom typography. - /// @group typography - /// @param {Map} $categories [(tooltip-text: null] - The categories from the typographic scale used for type styles. - @mixin tooltip-typography( - $categories: ( - tooltip-text: null, - ) - ) { - $tooltip-text: map.get($categories, 'tooltip-text'); +/// Adds typography styles for the igx-tooltip component. +/// Uses custom typography. +/// @group typography +/// @param {Map} $categories [(tooltip-text: null] - The categories from the typographic scale used for type styles. +@mixin tooltip-typography( + $categories: ( + tooltip-text: null, + ) +) { + $tooltip-text: map.get($categories, 'tooltip-text'); - @if $tooltip-text { - %tooltip-display { - @include type-style($tooltip-text); - } - } @else { - %tooltip-display { - line-height: rem(16px); - font-size: rem(10px); - font-weight: 600; - } + @if $tooltip-text { + %tooltip-display { + @include type-style($tooltip-text); + } + } @else { + %tooltip-display { + line-height: rem(16px); + font-size: rem(10px); + font-weight: 600; } } } From 448483c53e970ef2914db17d9b160ffe8ad1dd4a Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Thu, 23 Oct 2025 17:43:17 +0300 Subject: [PATCH 106/131] feat(checkbox): set tick-width property - (scoped) (#16321) * feat(checkbox): set tick-width property * chore(theming): bump version to 22.0.0-beta.1 * deps(theming): bump to latest version --------- Co-authored-by: Simeon Simeonoff --- package-lock.json | 8 ++++---- package.json | 2 +- .../igniteui-angular/src/lib/checkbox/themes/_base.scss | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index b9da21e51ff..7b1662294b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^20.0.0", + "igniteui-theming": "^22.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13753,9 +13753,9 @@ } }, "node_modules/igniteui-theming": { - "version": "20.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-20.0.0.tgz", - "integrity": "sha512-g+pxAskmX1g0wlwaO0MPcT8sMTbr3rzSEOJRWg26FBKcVE09cxPEbX2Vl9k7LdbBc5VdDoiAgsI9yvZhAUM0Xg==", + "version": "22.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0.tgz", + "integrity": "sha512-usKRq5+XkChbcALOpAzfBMC5Bt8hYkkCVVrtNhnQqa3G7sjj2+Le2wTOHDRMIM8l6HbEoWR/XE7RiQuuMFBVKA==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index 13acec585d7..843ec14cea8 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^20.0.0", + "igniteui-theming": "^22.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss index c64968645ac..658da16ef9b 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -152,7 +152,7 @@ $_theme: $material; width: 100%; stroke: var-get($_theme, 'tick-color'); stroke-linecap: square; - stroke-width: var(--mark-stroke); + stroke-width: var-get($_theme, 'tick-width'); stroke-dasharray: var(--mark-length); stroke-dashoffset: var(--mark-length); fill: none; From c0c9e4fedb1f45cb6f65caf64d722178ca6e889a Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Thu, 23 Oct 2025 18:02:16 +0300 Subject: [PATCH 107/131] feat(timepicker): update timepicker sample with properties panel (#16340) --- src/app/time-picker/time-picker.sample.html | 52 +++++++- src/app/time-picker/time-picker.sample.scss | 12 ++ src/app/time-picker/time-picker.sample.ts | 124 +++++++++++++++++++- 3 files changed, 180 insertions(+), 8 deletions(-) diff --git a/src/app/time-picker/time-picker.sample.html b/src/app/time-picker/time-picker.sample.html index 7da22ba5546..8cce0135198 100644 --- a/src/app/time-picker/time-picker.sample.html +++ b/src/app/time-picker/time-picker.sample.html @@ -2,10 +2,34 @@

Time Picker with Date value binding

{{showDate(date)}}

-
- +
+ + @if (hasLabel) { + + } @if (hasPrefix) { + face + } @if (hasSuffix) { + face + } @if (hasHint) { + It's a hint + }
@@ -77,4 +101,24 @@

Time Picker with custom spin buttons

+ + +
+ + + + + + + + + + + + + + + +
+

diff --git a/src/app/time-picker/time-picker.sample.scss b/src/app/time-picker/time-picker.sample.scss index 7d984d7219f..a3231aaec7b 100644 --- a/src/app/time-picker/time-picker.sample.scss +++ b/src/app/time-picker/time-picker.sample.scss @@ -14,3 +14,15 @@ justify-content: center; padding: 8px; } + +.custom-controls { + igx-switch { + display: flex; + align-items: center; + margin-bottom: 16px; + + label { + margin: 0; + } + } +} diff --git a/src/app/time-picker/time-picker.sample.ts b/src/app/time-picker/time-picker.sample.ts index 8f94c56d4f8..04d6673bbb6 100644 --- a/src/app/time-picker/time-picker.sample.ts +++ b/src/app/time-picker/time-picker.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, DestroyRef, inject, TemplateRef, ViewChild, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IgxTimePickerComponent, @@ -13,22 +13,53 @@ import { IgxPrefixDirective, IgxIconComponent, IgxPickerClearComponent, - IgxSuffixDirective + IgxSuffixDirective, + IgxLabelDirective, + IgSizeDirective, + PickerInteractionMode, + IgxSwitchComponent } from 'igniteui-angular'; +import { + PropertyPanelConfig, + PropertyChangeService, + Properties, +} from '../properties-panel/property-change.service'; @Component({ selector: 'app-time-picker-sample', styleUrls: ['time-picker.sample.scss'], templateUrl: 'time-picker.sample.html', - imports: [IgxTimePickerComponent, FormsModule, IgxHintDirective, IgxButtonDirective, IgxPickerActionsDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxPickerClearComponent, IgxSuffixDirective] + imports: [ + IgxTimePickerComponent, + FormsModule, + IgxHintDirective, + IgxButtonDirective, + IgxPickerActionsDirective, + IgxPickerToggleComponent, + IgxPrefixDirective, + IgxIconComponent, + IgxPickerClearComponent, + IgxSuffixDirective, + IgxLabelDirective, + IgSizeDirective, + IgxSwitchComponent + ] }) -export class TimePickerSampleComponent { +export class TimePickerSampleComponent implements OnInit { @ViewChild('tp', { read: IgxTimePickerComponent, static: true }) public tp: IgxTimePickerComponent; @ViewChild('target') public target: IgxInputDirective; + @ViewChild('customControls', { static: true }) + public customControlsTemplate!: TemplateRef; + + public hasSuffix = false; + public hasPrefix = false; + public hasLabel = false; + public hasHint = false; + public itemsDelta = { hours: 1, minutes: 15, seconds: 20 }; public format = 'hh:mm:ss:SS a'; public spinLoop = true; @@ -49,6 +80,91 @@ export class TimePickerSampleComponent { positionStrategy: new AutoPositionStrategy() }; + public panelConfig: PropertyPanelConfig = { + size: { + control: { + type: 'button-group', + options: ['small', 'medium', 'large'], + defaultValue: 'medium', + } + }, + mode: { + control: { + type: 'button-group', + options: [ + { label: 'dialog', value: PickerInteractionMode.Dialog}, + { label: 'dropdown', value: PickerInteractionMode.DropDown} + ], + defaultValue: 'dropdown' + } + }, + type: { + control: { + type: 'button-group', + options: ['box', 'border', 'line'], + defaultValue: 'box' + } + }, + readonly: { + control: { + type: 'boolean', + defaultValue: false + } + }, + disabled: { + control: { + type: 'boolean', + defaultValue: false + } + }, + value: { + control: { + type: 'time' + } + }, + placeholder: { + control: { + type: 'text', + defaultValue: 'hh:mm' + } + }, + displayFormat: { + label: 'Display Format', + control: { + type: 'text' + } + }, + inputFormat: { + label: 'Input Format', + control: { + type: 'text' + } + } + } + + public properties: Properties; + private propertyChangeService = inject(PropertyChangeService); + private destroyRef = inject(DestroyRef); + + constructor() { + this.propertyChangeService.setPanelConfig(this.panelConfig); + + const propertyChange = + this.propertyChangeService.propertyChanges.subscribe( + (properties) => { + this.properties = properties; + } + ); + + this.destroyRef.onDestroy(() => propertyChange.unsubscribe()); + } + + public ngOnInit() { + this.propertyChangeService.setCustomControls( + this.customControlsTemplate + ); + } + public change() { this.isRequired = !this.isRequired; } From 06b8a511a510ab9f332be1c28354ea40f11bd0de Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 23 Oct 2025 18:05:18 +0300 Subject: [PATCH 108/131] refactor(input-group): add readonly styles (#16328) * refactor(input-group): add readonly styles * fix(input-group): material border styles --- .../src/lib/input-group/themes/_base.scss | 42 +++++++ .../input-group/themes/shared/bootstrap.scss | 34 ++++++ .../lib/input-group/themes/shared/fluent.scss | 49 ++++++++ .../lib/input-group/themes/shared/indigo.scss | 17 +++ .../input-group/themes/shared/material.scss | 106 ++++++++++++++++-- 5 files changed, 241 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss index da57de78078..532a6a4c243 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -356,6 +356,48 @@ $base-scale-size: ( } } + @include m(readonly, $not: (file, disabled)) { + igx-prefix, + [igxPrefix], + igx-suffix, + [igxSuffix] { + color: var-get($theme, 'disabled-text-color'); + } + + @include e(input) { + &:hover { + cursor: default; + color: var-get($theme, 'filled-text-color'); + } + + &:hover:not(:focus-within) { + &::placeholder { + color: var-get($theme, 'placeholder-color'); + } + } + } + + @include e(textarea) { + &:hover { + cursor: default; + color: var-get($theme, 'filled-text-color'); + } + + &:hover:not(:focus-within) { + &::placeholder { + color: var-get($theme, 'placeholder-color'); + } + } + } + } + + @include mx(readonly, focused, ('not': (file))) { + igx-suffix, + [igxSuffix] { + color: var-get($theme, 'disabled-text-color'); + } + } + @include m(required) { @include e(label) { &::after { diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss index 37edbc0815d..0141252de99 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss @@ -202,6 +202,40 @@ $border-radius: var-get($_theme, 'border-border-radius'); } } + @include m(readonly, $not: (file, disabled)) { + igx-prefix, + [igxPrefix], + igx-suffix, + [igxSuffix] { + background: var-get($_theme, 'border-disabled-background'); + } + + @include e(bundle-main) { + background: var-get($_theme, 'border-disabled-background'); + } + + @include e(textarea) { + background: var-get($_theme, 'border-disabled-background'); + } + } + + @include mx(invalid, readonly, ('not': (file, disabled))) { + @include e(hint) { + color: var-get($_theme, 'helper-text-color'); + } + + @include e(bundle-main) { + border-color: var-get($_theme, 'border-color'); + } + } + + @include mx(invalid, readonly, focused, ('not': (file, disabled))) { + @include e(bundle-main) { + border-color: var-get($_theme, 'focused-border-color'); + box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focused-secondary-color'); + } + } + @include m(focused) { @include e(bundle-main) { transition: border .15s ease-out; diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss index e3ad9c095af..13ca993165a 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss @@ -82,6 +82,55 @@ $_theme: $fluent; } } + @include m(readonly, $not: (file)) { + igx-prefix, + [igxPrefix], + igx-suffix, + [igxSuffix] { + background: transparent; + } + + @include e(bundle) { + &:hover:not(:focus-within) { + border-color: var-get($_theme, 'border-color'); + } + } + } + + @include mx(readonly, search) { + igx-prefix, + [igxPrefix], + igx-suffix, + [igxSuffix] { + color: var(--igx-input-group-disabled-text-color, var(--ig-gray-500)); + } + } + + @include mx(readonly, search, focused) { + igx-suffix, + [igxSuffix] { + color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900)); + } + } + + @include mx(invalid, readonly, ('not': (file, disabled))) { + @include e(bundle) { + border-color: var-get($_theme, 'border-color'); + } + + @include e(hint) { + color: var-get($_theme, 'helper-text-color'); + } + } + + @include mx(invalid, readonly, focused, ('not': (file, disabled))) { + @include e(bundle) { + &::after { + border-color: var-get($_theme, 'focused-border-color'); + } + } + } + @include m(invalid) { @include e(label) { &::after { diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss index c948fae0009..11ce83af274 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss @@ -94,6 +94,23 @@ $_theme: $indigo; } } + @include m(readonly, $not: (file, disabled)) { + @include e(bundle) { + border-block-end-color: var-get($_theme, 'disabled-text-color'); + + &:hover:not(:focus-within) { + background: unset; + border-block-end-color: var-get($_theme, 'disabled-text-color'); + } + } + } + + @include mx(readonly, focused, ('not': (file, disabled))) { + @include e(bundle) { + border-block-end-color: var-get($_theme, 'focused-bottom-line-color'); + } + } + @include m(focused) { @include e(bundle) { background: var-get($_theme, 'box-background-hover'); diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss index 8be9c5e14c4..928b5056f99 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -648,6 +648,8 @@ $input-bottom-spacing: rem(6px); @include e(label) { color: var-get($_theme, 'focused-secondary-color'); + translate: 0 var(--_label-translate-top); + align-self: start; } @include e(bundle-start) { @@ -689,13 +691,6 @@ $input-bottom-spacing: rem(6px); } } - @include mx(border, focused) { - @include e(label) { - translate: 0 var(--_label-translate-top); - align-self: start; - } - } - @include mx(border, filled, ('not': (focused))) { @include e(label) { translate: 0 var(--_label-translate-top); @@ -944,6 +939,103 @@ $input-bottom-spacing: rem(6px); @include type-style(subtitle-1); } + @include m(readonly, $not: (file)) { + @include e(bundle) { + &:hover::before { + border-block-end-color: var-get($_theme, 'idle-bottom-line-color'); + } + } + } + + @include mx(readonly, box, ('not': (file, disabled))) { + &:hover:not(:focus-within) { + @include e(bundle) { + background: var-get($_theme, 'box-background-focus'); + } + } + } + + @include mx(readonly, border, ('not': (file, focused))) { + &:hover { + @include e(bundle-start) { + border-color: var-get($_theme, 'border-color'); + } + + @include e(bundle-end) { + border-color: var-get($_theme, 'border-color'); + } + + @include e(notch) { + border-color: var-get($_theme, 'border-color'); + } + + @include e(filler) { + border-color: var-get($_theme, 'border-color'); + } + } + } + + @include mx(invalid, readonly, ('not': (file, disabled))) { + @include e(label) { + color: var-get($_theme, 'idle-secondary-color'); + } + + @include e(hint) { + color: var-get($_theme, 'helper-text-color'); + } + + @include e(bundle) { + &::before { + border-block-end-color: var-get($_theme, 'idle-bottom-line-color'); + } + } + } + + @include mx(invalid, readonly, focused, ('not': (file, disabled))) { + @include e(label) { + color: var-get($_theme, 'focused-secondary-color'); + } + + @include e(bundle) { + &::after { + background: var-get($_theme, 'focused-bottom-line-color'); + } + } + } + + @include mx(border, invalid, readonly, focused, ('not': (file, disabled))) { + @include e(bundle-start) { + border-color: var-get($_theme, 'focused-border-color'); + } + + @include e(bundle-end) { + border-color: var-get($_theme, 'focused-border-color'); + } + + @include e(notch) { + border-block-end-color: var-get($_theme, 'focused-border-color'); + } + + @include e(filler) { + border-color: var-get($_theme, 'focused-border-color'); + } + } + + @include mx(readonly, search) { + @include e(bundle) { + &:hover:not(:focus-within) { + box-shadow: var-get($_theme, 'search-resting-elevation'); + } + } + } + + @include mx(readonly, search, focused) { + igx-suffix, + [igxSuffix] { + color: var-get($_theme, 'disabled-text-color'); + } + } + @include m(filled) { @include e(label) { @include type-style(caption); From 44d671134918f6c17e1ae7dea3e625a0bbaaf6c8 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 23 Oct 2025 18:06:14 +0300 Subject: [PATCH 109/131] refactor(input-group): input refinement (#16307) * refactor(input-group): input refinement * refactor(input-group): address review comments * fix(input-group): helper text issue * Update _core.scss --------- Co-authored-by: Simeon Simeonoff --- package.json | 2 +- .../src/lib/combo/themes/_base.scss | 5 ---- .../lib/combo/themes/shared/bootstrap.scss | 28 +++++++++++++++---- .../src/lib/combo/themes/shared/indigo.scss | 2 +- .../src/lib/combo/themes/shared/material.scss | 4 +++ .../core/styles/typography/_bootstrap.scss | 2 +- .../lib/core/styles/typography/_fluent.scss | 2 +- .../lib/core/styles/typography/_indigo.scss | 2 +- .../lib/core/styles/typography/_material.scss | 2 +- .../date-range-picker.component.scss | 1 + .../lib/date-range-picker/themes/_base.scss | 2 ++ .../themes/shared/_bootstrap.scss | 9 ++++++ .../themes/shared/_index.scss | 1 + .../lib/directives/input/input.directive.ts | 4 +++ .../src/lib/input-group/themes/_base.scss | 10 ++----- .../input-group/themes/shared/bootstrap.scss | 14 ++++------ .../lib/input-group/themes/shared/fluent.scss | 13 ++++++++- .../lib/input-group/themes/shared/indigo.scss | 28 +++++++++++++++++-- .../input-group/themes/shared/material.scss | 27 ++++++++++++------ .../input-group-showcase.sample.scss | 1 + 20 files changed, 114 insertions(+), 45 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_index.scss diff --git a/package.json b/package.json index 843ec14cea8..9433dd7e616 100644 --- a/package.json +++ b/package.json @@ -135,8 +135,8 @@ "karma-parallel": "^0.3.1", "karma-spec-reporter": "^0.0.36", "lit-html": "^3.2.1", - "node-watch": "^0.7.4", "ng-packagr": "^20.0.0", + "node-watch": "^0.7.4", "postcss": "^8.5.1", "postcss-scss": "^4.0.6", "prettier": "^3.3.3", diff --git a/projects/igniteui-angular/src/lib/combo/themes/_base.scss b/projects/igniteui-angular/src/lib/combo/themes/_base.scss index b31c7d92b91..e95203fefb7 100644 --- a/projects/igniteui-angular/src/lib/combo/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/combo/themes/_base.scss @@ -63,11 +63,6 @@ $theme: $base; position: relative; } - &:has(.igx-vhelper--vertical) { - display: grid; - grid-template-columns: 1fr auto; - } - position: relative; overflow: hidden; max-height: calc(var(--size) * var(--item-count)); diff --git a/projects/igniteui-angular/src/lib/combo/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/combo/themes/shared/bootstrap.scss index a4b57ef576b..7358bf3860c 100644 --- a/projects/igniteui-angular/src/lib/combo/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/combo/themes/shared/bootstrap.scss @@ -8,22 +8,40 @@ $_theme: $bootstrap; @include themed-block(igx-combo, bootstrap) { @include e(search) { --igx-input-group-border-border-radius: 0; - --igx-input-group-border-color: transparent; + + igx-input-group { + --size: #{rem(28px)}; + } .igx-input-group--focused { .igx-input-group__bundle-start, .igx-input-group__bundle-end { border-block-end-color: var(--focused-border-color); + border-block-end-width: rem(2px); + } + + .igx-input-group__bundle-main { + border-block-end-width: rem(2px); } } - .igx-input-group__bundle-main { - border-inline-width: 0; - border-block-start-width: 0; + igx-input-group:not(.igx-input-group--prefixed), + igx-input-group:not(.igx-input-group--suffixed) { + .igx-input-group__bundle-main { + border-inline-width: 0; + border-block-start-width: 0; + } + } + + igx-input-group.igx-input-group--suffixed { + .igx-input-group__bundle-end { + border-inline-end-width: 0; + border-block-start-width: 0; + } } .igx-input-group__input { - padding-inline-start: 0; + padding-inline: 0; } .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main { diff --git a/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss index 0130052b55c..f0061339830 100644 --- a/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss @@ -7,7 +7,7 @@ $_theme: $indigo; @include themed-block(igx-combo, indigo) { - --_search-input-inline-padding: #{pad-inline(rem(12px))}; + --_search-input-inline-padding: #{pad-inline(rem(8px), rem(12px), rem(12px))}; --_search-input-block-padding: #{pad-block(rem(12px))}; @include e(search) { diff --git a/projects/igniteui-angular/src/lib/combo/themes/shared/material.scss b/projects/igniteui-angular/src/lib/combo/themes/shared/material.scss index 2cd9ccc67f3..fa7806b2644 100644 --- a/projects/igniteui-angular/src/lib/combo/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/combo/themes/shared/material.scss @@ -16,6 +16,10 @@ $_theme: $material; } @include e(search) { + igx-input-group { + --size: #{rem(38px)}; + } + .igx-input-group__bundle { padding-block-start: 0; height: auto; diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 95e39253c9e..94b39380b4d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -59,7 +59,7 @@ )); // @include chip-typography(); // @include column-actions-typography(); - @include date-range-typography(); + // @include date-range-typography(); @include dialog-typography($categories: ( title: 'h5', content: 'body-1' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index aae9140be4c..f8afb3acccf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -62,7 +62,7 @@ // text: 'subtitle-2' // )); // @include column-actions-typography(); - @include date-range-typography(); + // @include date-range-typography(); @include dialog-typography($categories: ( title: 'h6', content: 'body-2' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 135eaed3607..bb73f123582 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -61,7 +61,7 @@ )); // @include chip-typography(); // @include column-actions-typography(); - @include date-range-typography(); + // @include date-range-typography(); @include dialog-typography($categories: ( title: 'h5', content: 'body-1', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index cbd627eb303..5d174814b1d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -45,7 +45,7 @@ @include checkbox-typography(); // @include chip-typography(); // @include column-actions-typography(); - @include date-range-typography(); + // @include date-range-typography(); @include dialog-typography(); @include dock-manager-typography(); // @include drop-down-typography(); diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.scss b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.scss index c7019d1c431..dd684163cd7 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.scss +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.scss @@ -1,3 +1,4 @@ @use 'themes/base'; +@use 'themes/shared'; @use 'themes/light'; @use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/date-range-picker/themes/_base.scss b/projects/igniteui-angular/src/lib/date-range-picker/themes/_base.scss index 43ffecbbe62..1bc4af69302 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/date-range-picker/themes/_base.scss @@ -21,6 +21,8 @@ $theme: $material; } @include e(label) { + @include type-style(caption); + display: flex; align-items: center; color: var-get($theme, 'label-color'); diff --git a/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..3d6a56cb9d0 --- /dev/null +++ b/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_bootstrap.scss @@ -0,0 +1,9 @@ +@use 'igniteui-theming/sass/bem/index' as *; +@use 'igniteui-theming/sass/typography/index' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-date-range-picker, bootstrap) { + @include e(label) { + @include type-style(body-1); + } +} diff --git a/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_index.scss new file mode 100644 index 00000000000..59c998fde14 --- /dev/null +++ b/projects/igniteui-angular/src/lib/date-range-picker/themes/shared/_index.scss @@ -0,0 +1 @@ +@forward 'bootstrap'; diff --git a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts b/projects/igniteui-angular/src/lib/directives/input/input.directive.ts index 6701290bd34..62df0705ed5 100644 --- a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/input/input.directive.ts @@ -301,6 +301,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy { const elTag = this.nativeElement.tagName.toLowerCase(); if (elTag === 'textarea') { this.isTextArea = true; + + if (this.nativeElement.getAttribute('rows') === null) { + this.renderer.setAttribute(this.nativeElement, 'rows', '3'); + } } else { this.isInput = true; } diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss index 532a6a4c243..9d5518af043 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -247,20 +247,19 @@ $base-scale-size: ( @extend %input-textarea-common; padding: 0; - min-height: var(--_textarea-size); resize: vertical; z-index: 1; } @include e(hint) { @include type-style(caption); + @include line-clamp(2, true, true); color: var-get($theme, 'helper-text-color'); position: relative; - display: flex; - justify-content: space-between; grid-row: var(--_hint-row); grid-column: 1 / -1; + overflow-wrap: anywhere; &:empty { --_hint-row: 1; @@ -345,11 +344,6 @@ $base-scale-size: ( @include m(textarea-group) { --_bundle-template-rows: auto auto auto; - --_textarea-size: #{sizable( - rem(82px, map.get($base-scale-size, 'compact')), - rem(82px, map.get($base-scale-size, 'cosy')), - rem(82px, map.get($base-scale-size, 'comfortable')) - )}; @include e(bundle) { height: auto; diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss index 0141252de99..3a868ba537b 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss @@ -48,6 +48,7 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include themed-block(igx-input-group, bootstrap) { --_bundle-template-rows: revert; + --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(10px), rem(14px))}; row-gap: rem(4px); @@ -73,7 +74,6 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include type-style(body-1); min-height: revert; - font-size: sizable(rem(16px), rem(16px), rem(20px)); border: 0; border-radius: 0; } @@ -90,34 +90,30 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include type-style(body-1); min-height: 100%; - font-size: sizable(rem(16px), rem(16px), rem(20px)); padding-block: 0; - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + padding-inline: pad-inline(rem(8px), rem(10px), rem(14px)); } @include e(file-input) { @include type-style(body-1); - font-size: sizable(rem(16px), rem(16px), rem(20px)); height: 100%; padding-block: 0; border-block: $border-size solid $border-color; border-inline-end: $border-size solid $border-color; - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + padding-inline: pad-inline(rem(8px), rem(10px), rem(14px)); } @include e(textarea) { @include type-style(body-1); min-height: 100%; - font-size: sizable(rem(16px), rem(16px), rem(20px)); - padding-block: pad-block(rem(4px), rem(6px), rem(8px)); - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + padding-block: pad-block(rem(4px), rem(8px), rem(12px)) 0; + padding-inline: pad-inline(rem(8px), rem(10px), rem(14px)); } @include m(textarea-group) { @include e(bundle-main) { - min-height: var(--_textarea-size); height: revert; } } diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss index 13ca993165a..75d916a017f 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss @@ -8,6 +8,7 @@ $_theme: $fluent; @include themed-block(igx-input-group, fluent) { --_bundle-template-rows: revert; + --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(10px), rem(14px))}; row-gap: rem(5px); @@ -26,10 +27,15 @@ $_theme: $fluent; @include type-style(body-2); padding-inline: rem(8px); + padding-block: 0; + height: calc(var-get($_theme, 'size') - rem(2px)); } @include e(textarea) { - padding: rem(8px) + @include type-style(body-2); + + padding-inline: pad-inline(rem(8px)); + padding-block: pad-block(rem(6px), rem(10px), rem(14px)) 0; } @include e(file-input) { @@ -80,6 +86,11 @@ $_theme: $fluent; // the icon overrides the display set by the prefix/suffix display: none !important; } + + igx-suffix, + [igxSuffix] { + color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900)); + } } @include m(readonly, $not: (file)) { diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss index 11ce83af274..83504a552a2 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss @@ -12,7 +12,7 @@ $_theme: $indigo; --_bundle-template-rows: revert; igx-icon { - --size: var(--input-icon); + --size: #{sizable(rem(14px), rem(16px), rem(16px))}; } row-gap: rem(4px); @@ -40,6 +40,14 @@ $_theme: $indigo; } } + @include m(search) { + --_prefix-suffix-spacing: #{pad-inline(rem(6px), rem(8px), rem(10px))}; + + @include e(input) { + padding-inline: var(--_prefix-suffix-spacing); + } + } + @include m(suffixed) { @include e(input) { padding-inline-end: 0; @@ -56,6 +64,10 @@ $_theme: $indigo; @include type-style(body-2); caret-color: var-get($_theme, 'focused-bottom-line-color'); + + &::placeholder { + font-style: italic; + } } @include e(file-input) { @@ -64,7 +76,7 @@ $_theme: $indigo; @include m(textarea-group) { @include e(textarea) { - padding-block: rem(6px); + padding-block: pad-block(rem(4px), rem(6px), rem(8px)) 0; } @include e(bundle) { @@ -72,6 +84,18 @@ $_theme: $indigo; } } + @include m(textarea-group, $not: (prefixed)) { + @include e(textarea) { + padding-inline-start: pad-inline(rem(2px), rem(4px), rem(6px)); + } + } + + @include m(textarea-group, $not: (suffixed)) { + @include e(textarea) { + padding-inline-end: pad-inline(rem(2px), rem(4px), rem(6px)); + } + } + @include e(bundle) { transition: all .25s $out-cubic; border-block-end: rem(1px) solid var-get($_theme, 'idle-bottom-line-color'); diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss index 928b5056f99..a82f0589030 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -7,7 +7,7 @@ $_theme: $material; $transition-timing: .25s $out-cubic; -$bundle-start-end-min-width: pad(rem(10px), rem(12px), rem(14px)); +$bundle-start-end-min-width: pad(rem(8px), rem(10px), rem(12px)); $input-inline-padding: rem(4px); $input-top-spacing: rem(20px); $input-bottom-spacing: rem(6px); @@ -80,7 +80,7 @@ $input-bottom-spacing: rem(6px); --_prefix-suffix-spacing: #{pad-inline(rem(12px), rem(14px), rem(16px))}; --_bundle-template-rows: #{var-get($_theme, 'size')}; - &:has([igxLabel], igx-label), { + &:has([igxLabel], igx-label) { --_input-top-spacing: #{$input-top-spacing}; --_input-bottom-spacing: #{$input-bottom-spacing}; --_label-row: 1; @@ -124,6 +124,8 @@ $input-bottom-spacing: rem(6px); @include e(hint) { grid-row: var(--_hint-row); + min-height: rem(18px); + padding-inline: sizable(rem(12px), rem(14px), rem(16px)); } @include m(base) { @@ -330,8 +332,14 @@ $input-bottom-spacing: rem(6px); @include m(textarea-group) { --_bundle-template-rows: auto; + --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))}; + + &:has(label:not(:empty)) { + --_input-top-spacing: #{pad-block(rem(16px), rem(20px), rem(24px))}; + } + @include e(bundle-main) { - padding-block-start: $input-top-spacing; + padding-block-start: var(--_input-top-spacing); } @include e(textarea) { @@ -347,7 +355,7 @@ $input-bottom-spacing: rem(6px); } @include e(textarea) { - padding-inline-end: rem(4px); + padding-inline-end: pad-inline(rem(12px), rem(14px), rem(16px)); } } @@ -357,6 +365,12 @@ $input-bottom-spacing: rem(6px); } } + @include mx(border, textarea-group) { + @include e(bundle-main) { + --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))}; + } + } + @include mx(border, textarea-group, ('not': (suffixed))) { @include e(textarea) { max-width: calc(100% - #{rem(2px)}); @@ -840,11 +854,6 @@ $input-bottom-spacing: rem(6px); } } - @include e(hint) { - min-height: rem(18px); - padding-inline: sizable(rem(14px), rem(16px), rem(18px)); - } - @include m(valid) { @include e(label) { color: #{var-get($_theme, 'success-secondary-color')}; diff --git a/src/app/input-group-showcase/input-group-showcase.sample.scss b/src/app/input-group-showcase/input-group-showcase.sample.scss index a939d251120..97194be1a39 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.scss +++ b/src/app/input-group-showcase/input-group-showcase.sample.scss @@ -56,6 +56,7 @@ display: flex; flex-direction: column; gap: 2rem; + min-width: 0; } .showcase__placeholder { From 77f33e096bf7281e89c2a66e9d89de8a0dfa1fa5 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Oct 2025 14:49:34 +0200 Subject: [PATCH 110/131] refactor(themes): remove igx-file-input from base styles --- .../core/styles/themes/generators/_base.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 33600b61aa2..2eccf51f647 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -535,16 +535,16 @@ // @include input-group($input-group-theme-map); //} - @if is-used('igx-file-input', $exclude) { - $file-input-theme-map: file-input-theme( - $schema: $schema, - ); - $file-input-theme-map: meta.call( - $theme-handler, - $file-input-theme-map - ); - @include file-input($file-input-theme-map); - } + // @if is-used('igx-file-input', $exclude) { + // $file-input-theme-map: file-input-theme( + // $schema: $schema, + // ); + // $file-input-theme-map: meta.call( + // $theme-handler, + // $file-input-theme-map + // ); + // @include file-input($file-input-theme-map); + // } // @if is-used('igx-list', $exclude) { // $list-theme-map: list-theme( From 671e25eb8115261b62db192ae630871733fb867f Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Oct 2025 15:03:25 +0200 Subject: [PATCH 111/131] deps: bump to latest version of theming --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 81e746a60e1..58a8243bc02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^22.0.0", + "igniteui-theming": "^22.1.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13523,9 +13523,9 @@ } }, "node_modules/igniteui-theming": { - "version": "22.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0.tgz", - "integrity": "sha512-usKRq5+XkChbcALOpAzfBMC5Bt8hYkkCVVrtNhnQqa3G7sjj2+Le2wTOHDRMIM8l6HbEoWR/XE7RiQuuMFBVKA==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.1.0.tgz", + "integrity": "sha512-Fi3QaVXTX6sLfEAXEQn96yfw3xWpHCIibOl8joWXH6H3GWjAgupF6WHBSewOPeS9z9Ei5Lh/MfmktW8jaqwiaQ==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index b24a510f1fd..195df5ce815 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^22.0.0", + "igniteui-theming": "^22.1.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", From 6505af5ad21875f17292f1912275d466c1506038 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 31 Oct 2025 16:04:21 +0200 Subject: [PATCH 112/131] refactor(base): disable global time-picker theme --- package-lock.json | 53 +++++++++++++++---- package.json | 2 +- .../core/styles/themes/generators/_base.scss | 20 +++---- 3 files changed, 55 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 58a8243bc02..9ac510f4bf9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -72,7 +72,7 @@ "ig-typedoc-theme": "^6.0.0", "igniteui-dockmanager": "^1.17.0", "igniteui-sassdoc-theme": "^2.1.0", - "igniteui-webcomponents": "6.2.1", + "igniteui-webcomponents": "6.3.4", "jasmine": "^5.6.0", "jasmine-core": "^5.6.0", "karma": "^6.4.4", @@ -13538,9 +13538,9 @@ } }, "node_modules/igniteui-webcomponents": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.2.1.tgz", - "integrity": "sha512-nsErVEF/2nuU76w8pkDzdu+0Xwv25OYWVDdXP5dFoQwvLMusNFju273e8c+DV9LoPtD0nWx6+RzyNaS+ylWXjw==", + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.3.4.tgz", + "integrity": "sha512-Fyk7M/p5pxEGtudX/z06ZIGR0pplSOx2J1QHfFwlWqGAWeIVE8PXfpGuRPTGlgFtYZGBVR/BT7P/T0EUCX74UA==", "dev": true, "license": "SEE LICENSE IN LICENSE", "dependencies": { @@ -13551,6 +13551,26 @@ }, "engines": { "node": ">=20" + }, + "peerDependencies": { + "dompurify": "^3.2.0", + "marked": "^16.3.0", + "marked-shiki": "^1.2.0", + "shiki": "^3.12.0" + }, + "peerDependenciesMeta": { + "dompurify": { + "optional": true + }, + "marked": { + "optional": true + }, + "marked-shiki": { + "optional": true + }, + "shiki": { + "optional": true + } } }, "node_modules/ignore": { @@ -16183,16 +16203,18 @@ } }, "node_modules/marked": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-0.6.3.tgz", - "integrity": "sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ==", + "version": "16.4.1", + "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.1.tgz", + "integrity": "sha512-ntROs7RaN3EvWfy3EZi14H4YxmT6A5YvywfhO+0pm+cH/dnSQRmdAmoFIc3B9aiwTehyk7pESH4ofyBY+V5hZg==", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "bin": { - "marked": "bin/marked" + "marked": "bin/marked.js" }, "engines": { - "node": ">=0.10.0" + "node": ">= 20" } }, "node_modules/math-intrinsics": { @@ -21106,6 +21128,19 @@ "marked": "^0.6.2" } }, + "node_modules/sassdoc-extras/node_modules/marked": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.6.3.tgz", + "integrity": "sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ==", + "dev": true, + "license": "MIT", + "bin": { + "marked": "bin/marked" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/sassdoc-plugin-localization": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/sassdoc-plugin-localization/-/sassdoc-plugin-localization-2.0.0.tgz", diff --git a/package.json b/package.json index 195df5ce815..3db87e065e7 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "ig-typedoc-theme": "^6.0.0", "igniteui-dockmanager": "^1.17.0", "igniteui-sassdoc-theme": "^2.1.0", - "igniteui-webcomponents": "6.2.1", + "igniteui-webcomponents": "6.3.4", "jasmine": "^5.6.0", "jasmine-core": "^5.6.0", "karma": "^6.4.4", diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 2eccf51f647..c239e95ce5a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -693,16 +693,16 @@ @include tooltip($tooltip-theme-map); } - @if is-used('igx-time-picker', $exclude) { - $time-picker-theme-map: time-picker-theme( - $schema: $schema, - ); - $time-picker-theme-map: meta.call( - $theme-handler, - $time-picker-theme-map - ); - @include time-picker($time-picker-theme-map); - } + // @if is-used('igx-time-picker', $exclude) { + // $time-picker-theme-map: time-picker-theme( + // $schema: $schema, + // ); + // $time-picker-theme-map: meta.call( + // $theme-handler, + // $time-picker-theme-map + // ); + // @include time-picker($time-picker-theme-map); + // } //@if is-used('igx-tree', $exclude) { // $tree-theme-map: tree-theme( From 4ef47d6b6d72d9534cce86b77fdc6042fedc1243 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Mon, 3 Nov 2025 11:50:11 +0200 Subject: [PATCH 113/131] fix(checkbox): fix checkbox styles to be identic between projects (#16372) * fix(checkbox): fix checkbox styles to be identic between projects * fix(checkbox): fix latest addressed problems --- .../src/lib/checkbox/themes/_base.scss | 26 ++++++++++++++-- .../checkbox/themes/shared/_bootstrap.scss | 13 +++++--- .../lib/checkbox/themes/shared/_fluent.scss | 12 +++++++ .../lib/checkbox/themes/shared/_indigo.scss | 31 +++++++++++++------ .../lib/checkbox/themes/shared/_material.scss | 6 ---- 5 files changed, 65 insertions(+), 23 deletions(-) diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss index 658da16ef9b..a8318b131d8 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/_base.scss @@ -62,16 +62,22 @@ $_theme: $material; background: var-get($_theme, 'error-color'); } - %cbx-ripple--hover-checked, %cbx-ripple--focused-checked { @extend %cbx-ripple--filled; } - %cbx-ripple--hover-invalid, + %cbx-ripple--hover-checked { + background: var-get($_theme, 'fill-color-hover'); + } + %cbx-ripple--focused-invalid { @extend %cbx-ripple--error; } + %cbx-ripple--hover-invalid { + background: var-get($_theme, 'error-color-hover'); + } + @include b(igx-checkbox) { // TODO: These should be moved to the shema as design tokens --size: #{rem(20px)}; @@ -93,6 +99,14 @@ $_theme: $material; @include e(ripple) { @extend %cbx-ripple--hovered; } + + @include e(label) { + color: var-get($_theme, 'label-color-hover'); + } + + @include e(label, $m: before) { + color: var-get($_theme, 'label-color-hover'); + } } &:active { @@ -200,6 +214,14 @@ $_theme: $material; @include e(composite) { border-color: var-get($_theme, 'error-color-hover'); } + + @include e(label) { + color: var-get($_theme, 'error-color'); + } + + @include e(label, $m: before) { + color: var-get($_theme, 'error-color'); + } } &:active { diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss index 5db1cd1cef1..52f52696aa2 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss @@ -79,6 +79,12 @@ $_theme: $bootstrap; box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-outline-color-error'); } + + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'error-color-hover'); + } + } } @include mx(focused, indeterminate) { @@ -92,12 +98,9 @@ $_theme: $bootstrap; background: var-get($_theme, 'disabled-indeterminate-color'); border-color: transparent; } - } - @include mx(indeterminate, invalid) { - @include e(composite) { - background: var-get($_theme, 'error-color'); - border-color: transparent; + @include e(composite-mark) { + stroke: var-get($_theme, 'disabled-tick-color'); } } diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss index cf13800359f..ef0d7549439 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss @@ -88,6 +88,14 @@ $_theme: $fluent; } } + @include m(invalid) { + &:hover { + @include e(composite-mark) { + stroke: var-get($_theme, 'error-color'); + } + } + } + @include m(checked) { &:hover { @include e(composite) { @@ -161,6 +169,10 @@ $_theme: $fluent; background: var-get($_theme, 'disabled-color'); border-color: var-get($_theme, 'disabled-color'); } + + @include e(composite-mark) { + stroke: var-get($_theme, 'disabled-tick-color'); + } } @include mx(disabled, indeterminate) { diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss index da09737dbb3..584fe3b047e 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss @@ -35,10 +35,6 @@ $_theme: $indigo; @include type-style(body-2); transition: color 0.2s $ease-out-quad; transition-delay: var(--_transition-delay); - - &:hover { - color: var-get($_theme, 'label-color-hover'); - } } @include e(label) { @@ -63,12 +59,6 @@ $_theme: $indigo; } @include m(invalid) { - &:hover { - @include e(composite) { - border-color: var-get($_theme, 'error-color-hover'); - } - } - @include e(label) { color: var-get($_theme, 'label-color'); } @@ -76,6 +66,20 @@ $_theme: $indigo; @include e(label, $m: before) { color: var-get($_theme, 'label-color'); } + + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'error-color-hover'); + } + + @include e(label) { + color: var-get($_theme, 'label-color-hover'); + } + + @include e(label, $m: before) { + color: var-get($_theme, 'label-color-hover'); + } + } } @include m(indeterminate) { @@ -135,6 +139,13 @@ $_theme: $indigo; } } + @include mx(focused, invalid, indeterminate) { + @include e(composite) { + box-shadow: 0 0 0 rem(3px) + var-get($_theme, 'focus-outline-color-error'); + } + } + @include mx(focused, indeterminate) { @include e(composite) { border-radius: var-get($_theme, 'border-radius'); diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss index 77924b25689..06b0ed6e9a9 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss @@ -22,12 +22,6 @@ $_theme: $material; padding: var(--composite-padding); } - @include mx(invalid, checked) { - @include e(composite) { - background: var-get($_theme, 'error-color'); - } - } - @include mx(invalid, disabled) { @include e(composite) { border-color: var-get($_theme, 'disabled-color'); From a0b7ec01170cf23e575370f1af8db615f9356044 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Tue, 4 Nov 2025 10:33:04 +0200 Subject: [PATCH 114/131] feat(badge): design enhancement (#16396) --- .../src/lib/badge/themes/_base.scss | 48 ++++++++++++++----- .../src/lib/badge/themes/dark/_index.scss | 1 + .../src/lib/badge/themes/dark/_indigo.scss | 14 ++++++ .../src/lib/badge/themes/shared/_index.scss | 1 + .../lib/badge/themes/shared/bootstrap.scss | 14 +++++- .../src/lib/badge/themes/shared/fluent.scss | 22 +++++++++ .../src/lib/badge/themes/shared/indigo.scss | 32 +++++++++++-- 7 files changed, 115 insertions(+), 17 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/badge/themes/dark/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/badge/themes/shared/fluent.scss diff --git a/projects/igniteui-angular/src/lib/badge/themes/_base.scss b/projects/igniteui-angular/src/lib/badge/themes/_base.scss index 6885840bbb1..48c0220213c 100644 --- a/projects/igniteui-angular/src/lib/badge/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/badge/themes/_base.scss @@ -9,9 +9,13 @@ $theme: $material; @include layer(base) { @include b(igx-badge) { - --size: #{rem(22px)}; - --_badge-size: var(--size); - --igx-icon-size: calc(var(--_badge-size) / 2); + @include sizable(); + + --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); + --badge-size: var(--component-size); + --_badge-size: #{var-get($theme, 'size')}; + + --igx-icon-size: #{sizable(rem(12px), rem(14px), rem(16px))}; --igx-icon-color: #{var-get($theme, 'icon-color')}; display: inline-flex; @@ -24,40 +28,60 @@ $theme: $material; border-radius: calc(var(--size) / 2); box-shadow: var-get($theme, 'elevation'); overflow: hidden; - - @include type-style(caption) { - margin: 0; - } + font-size: sizable(var(--ig-caption-font-size), var(--ig-body-2-font-size), var(--ig-body-2-font-size)); + font-weight: sizable(var(--ig-caption-font-weight), var(--ig-body-2-font-weight), var(--ig-body-2-font-weight)); + line-height: sizable(var(--ig-caption-line-height), var(--ig-body-2-line-height), var(--ig-body-2-line-height)); + letter-spacing: sizable(var(--ig-caption-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing)); + text-transform: sizable(var(--ig-caption-text-transform), var(--ig-body-2-text-transform), var(--ig-body-2-text-transform)); @include e(value) { white-space: nowrap; - padding-inline: rem(4px); + padding-inline: pad-inline(rem(4px), rem(6px), rem(8px)); } @include m(info) { - background: color($color: 'info'); + background: color($color: 'info', $variant: 800); } @include m(success) { - background: color($color: 'success'); + background: color($color: 'success', $variant: 900); } @include m(warning) { background: color($color: 'warn'); + color: contrast-color($color: 'warn', $variant: 500); + + igx-icon { + color: contrast-color($color: 'warn', $variant: 500); + } } @include m(error) { - background: color($color: 'error'); + background: color($color: 'error', $variant: 700); + color: contrast-color($color: 'error', $variant: 900); } @include m(outlined) { - box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color'); + box-shadow: 0 0 0 rem(2px) var-get($theme, 'border-color'); } @include m(square) { border-radius: var-get($theme, 'border-radius'); } + @include m(dot) { + --_dot-size: #{var-get($theme, 'dot-size')}; + + min-width: var(--_dot-size); + min-height: var(--_dot-size); + padding: 0; + + igx-icon, + > * { + display: none; + } + } + @include m(hidden) { visibility: hidden; } diff --git a/projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss index 855eddbf96a..2b57c62473b 100644 --- a/projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss @@ -1,6 +1,7 @@ @use 'sass:meta'; @use 'tokens'; @use 'styles/themes/standalone' as *; +@use 'indigo'; $tokens: meta.module-variables(tokens); @include themes(igx-badge, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/badge/themes/dark/_indigo.scss b/projects/igniteui-angular/src/lib/badge/themes/dark/_indigo.scss new file mode 100644 index 00000000000..1a503ba3eb4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/dark/_indigo.scss @@ -0,0 +1,14 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +@include themed-block(igx-badge, indigo, dark) { + @include m(warning) { + color: color($color: 'gray', $variant: 50); + + igx-icon { + color: color($color: 'gray', $variant: 50); + } + } +} diff --git a/projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss index be6ed543149..e9d8e587687 100644 --- a/projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss +++ b/projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss @@ -1,2 +1,3 @@ @forward 'bootstrap'; @forward 'indigo'; +@forward 'fluent'; diff --git a/projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss index 345ee74d9ec..78fa4c0eff2 100644 --- a/projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss @@ -1,13 +1,23 @@ @use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/themes/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; @use 'styles/themes/standalone' as *; @use '../light/tokens' as *; $_theme: $bootstrap; @include themed-block(igx-badge, bootstrap) { - @include m(outlined) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color'); + @include m(success) { + background: color($color: 'success', $variant: 500); + } + + @include m(info) { + background: color($color: 'info', $variant: 500); + } + + @include m(error) { + background: color($color: 'error', $variant: 500); + color: contrast-color($color: 'error', $variant: 100); } } diff --git a/projects/igniteui-angular/src/lib/badge/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/badge/themes/shared/fluent.scss new file mode 100644 index 00000000000..8fc38531e2e --- /dev/null +++ b/projects/igniteui-angular/src/lib/badge/themes/shared/fluent.scss @@ -0,0 +1,22 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/themes/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-badge, fluent) { + @include m(success) { + background: color($color: 'success', $variant: 500); + } + + @include m(info) { + background: color($color: 'info', $variant: 700); + } + + @include m(error) { + background: color($color: 'error', $variant: 500); + } +} diff --git a/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss index 2ebf543a42f..aaee8a9394d 100644 --- a/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss @@ -1,13 +1,39 @@ @use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/themes/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; @use 'styles/themes/standalone' as *; @use '../light/tokens' as *; @include themed-block(igx-badge, indigo) { - --igx-icon-size: #{rem(12px)}; + --igx-icon-size: #{sizable(rem(8px), rem(10px), rem(12px))}; - @include type-style(button) { - margin: 0; + @include type-style('button', false) { + font-size: sizable(rem(9px), rem(10px), var(--ig-button-font-size)); + line-height: sizable(rem(12px), rem(14px), var(--ig-button-line-height)); + } + + @include e(value) { + padding-inline: pad-inline(rem(4px), rem(6px), rem(6px)); + } + + @include m(success) { + background: color($color: 'success', $variant: 700); + } + + @include m(info) { + background: color($color: 'info', $variant: 500); + } + + @include m(error) { + background: color($color: 'error', $variant: 500); + } + + @include m(warning) { + color: color($color: 'gray', $variant: 900); + + igx-icon { + color: color($color: 'gray', $variant: 900); + } } } From cf93129b6bf443d23a031f173e97d0c573a63a14 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Fri, 7 Nov 2025 13:44:04 +0200 Subject: [PATCH 115/131] refactor(time-picker): bundle styles with component (#16418) --- .../core/styles/typography/_bootstrap.scss | 8 +- .../lib/core/styles/typography/_fluent.scss | 2 +- .../lib/core/styles/typography/_indigo.scss | 8 +- .../lib/core/styles/typography/_material.scss | 2 +- .../src/lib/time-picker/themes/_base.scss | 190 ++++++++++++++++++ .../lib/time-picker/themes/dark/_index.scss | 6 + .../lib/time-picker/themes/dark/_tokens.scss | 7 + .../lib/time-picker/themes/light/_index.scss | 6 + .../lib/time-picker/themes/light/_tokens.scss | 8 + .../time-picker/themes/shared/_bootstrap.scss | 11 + .../lib/time-picker/themes/shared/_index.scss | 3 + .../time-picker/themes/shared/_indigo.scss | 41 ++++ .../time-picker/themes/shared/_material.scss | 9 + .../time-picker/time-picker.component.scss | 4 + .../lib/time-picker/time-picker.component.ts | 5 +- 15 files changed, 299 insertions(+), 11 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/time-picker/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/time-picker/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/time-picker/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/time-picker/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/time-picker/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/time-picker/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/time-picker/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/time-picker/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/time-picker/themes/shared/_material.scss create mode 100644 projects/igniteui-angular/src/lib/time-picker/time-picker.component.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index e89226fd442..13e6931d3be 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -109,10 +109,10 @@ label: 'body-1' )); //@include tabs-typography(); - @include time-picker-typography($categories: ( - header-hour: 'h4', - selected-time: 'h4' - )); + // @include time-picker-typography($categories: ( + // header-hour: 'h4', + // selected-time: 'h4' + // )); //@include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index ea51e858147..c31af39384b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -114,7 +114,7 @@ //@include tabs-typography($categories: ( // label: 'body-2' //)); - @include time-picker-typography(); + // @include time-picker-typography(); //@include stepper-typography(); // @include toast-typography($categories: ( // text: 'caption' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 598684ab98f..b6b40739d73 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -111,10 +111,10 @@ //)) { // --ig-subtitle-2-text-transform: uppercase; //}; - @include time-picker-typography($categories: ( - header-hour: 'h5', - selected-time: 'h6' - )); + // @include time-picker-typography($categories: ( + // header-hour: 'h5', + // selected-time: 'h6' + // )); //@include stepper-typography($categories: ( // title: 'body-2', // subtitle: 'caption', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index d31dd17662f..98020dd09bd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -62,7 +62,7 @@ // @include snackbar-typography(); @include switch-typography(); //@include tabs-typography(); - @include time-picker-typography(); + // @include time-picker-typography(); //@include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); diff --git a/projects/igniteui-angular/src/lib/time-picker/themes/_base.scss b/projects/igniteui-angular/src/lib/time-picker/themes/_base.scss new file mode 100644 index 00000000000..2d3c69b1d43 --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/themes/_base.scss @@ -0,0 +1,190 @@ +@use 'sass:map'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $material; + +@include layer(base) { + @include b(igx-time-picker) { + @include sizable(); + + --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); + + display: flex; + flex-flow: column nowrap; + border-radius: var-get($theme, 'border-radius'); + box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color'), + var-get($theme, 'modal-elevation'); + background: var-get($theme, 'background-color'); + overflow: hidden; + min-width: fit-content; + + igx-divider { + --igx-divider-color: #{var-get($theme, 'divider-color')}; + } + + @include e(header) { + display: flex; + flex-direction: column; + background: var-get($theme, 'header-background'); + padding: rem(16px); + } + + @include e(header-hour) { + @include type-style(h4); + + display: flex; + color: var-get($theme, 'header-hour-text-color'); + margin: 0; + + [dir='rtl'] & { + flex-direction: row-reverse; + justify-content: flex-end; + } + } + + @include e(main) { + flex: 1 1 auto; + } + + @include e(column) { + width: rem(64px); + padding: 0; + cursor: pointer; + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + align-items: center; + color: var-get($theme, 'text-color'); + overflow: hidden; + gap: rem(4px); + + &:focus, + &:active { + outline: none; + } + } + + @include e(item) { + width: rem(46px); + padding: pad-block(rem(5px)) pad-inline(rem(10px)); + border-radius: var-get($theme, 'active-item-border-radius'); + height: var-get($theme, 'time-item-size'); + display: flex; + justify-content: center; + align-items: center; + font-size: sizable(var(--ig-body-2-font-size), var(--ig-body-2-font-size), var(--ig-body-1-font-size)); + font-weight: sizable(var(--ig-body-2-font-weight), var(--ig-body-2-font-weight), var(--ig-body-1-font-weight)); + font-style: sizable(var(--ig-body-2-font-style), var(--ig-body-2-font-style), var(--ig-body-1-font-style)); + line-height: sizable(var(--ig-body-2-line-height), var(--ig-body-2-line-height), var(--ig-body-1-line-height)); + letter-spacing: sizable(var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-1-letter-spacing)); + text-transform: sizable(var(--ig-body-2-text-transform), var(--ig-body-2-text-transform), var(--ig-body-1-text-transform)); + + &:focus, + &:active { + outline: none; + } + + &:hover { + color: var-get($theme, 'hover-text-color'); + } + } + + @include e(item, $m: selected) { + @include type-style(h5); + + margin: 0; + color: var-get($theme, 'selected-text-color'); + } + + @include e(item, $m: active) { + color: var-get($theme, 'active-item-foreground'); + background: var-get($theme, 'active-item-background'); + + &:hover, + &:focus { + color: var-get($theme, 'active-item-foreground'); + } + } + + @include e(item, $m: disabled) { + color: var-get($theme, 'disabled-text-color'); + background: var-get($theme, 'disabled-item-background'); + pointer-events: none; + } + + @include e(hourList) { + text-align: end; + + [dir='rtl'] & { + order: 2; + } + } + + @include e(minuteList) { + text-align: center; + + [dir='rtl'] & { + order: 1; + } + } + + @include e(secondsList) { + text-align: center; + } + + @include e(ampmList) { + [dir='rtl'] & { + order: 3; + } + } + + @include e(body) { + display: flex; + min-width: sizable(rem(290px), rem(314px), rem(360px)); + padding-block: rem(16px); + justify-content: center; + } + + @include e(buttons) { + display: flex; + min-height: sizable(rem(40px), rem(44px), rem(48px)); + justify-content: flex-end; + align-items: center; + padding: rem(8px); + gap: rem(8px); + } + + @include m(dropdown) { + min-width: sizable(rem(290px), rem(314px), rem(360px)); + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'), + var-get($theme, 'dropdown-elevation'); + + @include e(body) { + min-width: auto; + } + } + + @include m(vertical) { + @include e(main) { + display: flex; + flex-grow: 1; + } + + @include e(header) { + min-width: rem(168px); + } + + @include e(body) { + flex-grow: 1; + } + + @include e(buttons) { + align-items: flex-end; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/time-picker/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/time-picker/themes/dark/_index.scss new file mode 100644 index 00000000000..f44c4d7e046 --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-time-picker, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/time-picker/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/time-picker/themes/dark/_tokens.scss new file mode 100644 index 00000000000..606ea738b68 --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/time-picker' as *; + +$material: digest-schema($dark-material-time-picker); +$bootstrap: digest-schema($dark-bootstrap-time-picker); +$fluent: digest-schema($dark-fluent-time-picker); +$indigo: digest-schema($dark-indigo-time-picker); diff --git a/projects/igniteui-angular/src/lib/time-picker/themes/light/_index.scss b/projects/igniteui-angular/src/lib/time-picker/themes/light/_index.scss new file mode 100644 index 00000000000..b769a5f77d7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-time-picker, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/time-picker/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/time-picker/themes/light/_tokens.scss new file mode 100644 index 00000000000..06606b4314a --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/time-picker' as *; + +$base: digest-schema($light-time-picker); +$material: digest-schema($material-time-picker); +$bootstrap: digest-schema($bootstrap-time-picker); +$fluent: digest-schema($fluent-time-picker); +$indigo: digest-schema($indigo-time-picker); diff --git a/projects/igniteui-angular/src/lib/time-picker/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/time-picker/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..8031d16f28b --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/themes/shared/_bootstrap.scss @@ -0,0 +1,11 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-time-picker, bootstrap) { + @include e(item, $m: selected) { + @include type-style(h4); + + margin: 0; + } +} diff --git a/projects/igniteui-angular/src/lib/time-picker/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/time-picker/themes/shared/_index.scss new file mode 100644 index 00000000000..c8fda948fe8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/themes/shared/_index.scss @@ -0,0 +1,3 @@ +@forward 'bootstrap'; +@forward 'indigo'; +@forward 'material'; diff --git a/projects/igniteui-angular/src/lib/time-picker/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/time-picker/themes/shared/_indigo.scss new file mode 100644 index 00000000000..7da83161a71 --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/themes/shared/_indigo.scss @@ -0,0 +1,41 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-time-picker, indigo) { + @include e(header) { + border-block-end: rem(1px) solid var-get($_theme, 'divider-color'); + gap: rem(2px); + } + + @include e(header-hour) { + @include type-style(h5); + } + + @include e(column) { + width: rem(54px); + } + + @include e(item, $m: selected) { + @include type-style(h6); + } + + @include e(buttons) { + padding: rem(8px) rem(16px); + + [igxbutton] { + min-width: rem(88px); + } + } + + @include m(vertical) { + @include e(header) { + min-width: rem(136px); + border-inline-end: rem(1px) solid var-get($_theme, 'divider-color'); + border-block-end: none; + } + } +} diff --git a/projects/igniteui-angular/src/lib/time-picker/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/time-picker/themes/shared/_material.scss new file mode 100644 index 00000000000..ee1578d5272 --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/themes/shared/_material.scss @@ -0,0 +1,9 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-time-picker, material) { + @include e(header) { + padding: rem(16px) rem(24px); + } +} diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.scss b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index 199f5dd7227..9ca202a77b4 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -18,7 +18,8 @@ import { LOCALE_ID, Optional, HostListener, - booleanAttribute + booleanAttribute, + ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, @@ -89,12 +90,14 @@ export interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs { } ], selector: 'igx-time-picker', + styleUrl: 'time-picker.component.css', templateUrl: 'time-picker.component.html', styles: [ `:host { display: block; }` ], + encapsulation: ViewEncapsulation.None, imports: [ IgxInputGroupComponent, IgxInputDirective, From 5e4e1224ae3b623255b9b659ba14f2f0f98fa036 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Mon, 10 Nov 2025 11:04:34 +0200 Subject: [PATCH 116/131] fix(select): style component using sass theme (#16404) --- .../src/lib/input-group/themes/shared/indigo.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss index 83504a552a2..9569752e168 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss @@ -103,6 +103,10 @@ $_theme: $indigo; &:hover { background: var-get($_theme, 'box-background-hover'); border-block-end-color: var-get($_theme, 'hover-bottom-line-color'); + + .igx-input-group__toggle-button { + color: var(--toggle-button-foreground-focus); + } } } From 0012b91f5566e9afebbd6587dda448bef3951509 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Tue, 11 Nov 2025 10:40:36 +0200 Subject: [PATCH 117/131] fix(navbar): adjust icon sizes and spacing across themes (#16436) - Standardize `--component-size` for icons in navbar themes. - Remove redundant `--ig-size` definitions from shared themes. - Add padding and auto sizing for indigo theme icons. - Update icon button styles for consistent behavior across themes. --- .../components/icon-button/_icon-button-theme.scss | 7 +++---- .../src/lib/navbar/themes/_base.scss | 8 +++++++- .../src/lib/navbar/themes/shared/_bootstrap.scss | 5 ----- .../src/lib/navbar/themes/shared/_indigo.scss | 13 ++++++------- 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss index c4bc2d7fffb..5c967a28bb1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss @@ -93,12 +93,11 @@ ); igx-icon { - --component-size: var(--ig-size, var(--ig-size-large)); + --igx-icon-size: #{$icon-in-button-size}; + --component-size: 2; + display: flex; justify-content: center; - width: var(--igx-icon-size, #{$icon-in-button-size}); - height: var(--igx-icon-size, #{$icon-in-button-size}); - font-size: var(--igx-icon-size, #{$icon-in-button-size}); } @if $variant == 'fluent' { diff --git a/projects/igniteui-angular/src/lib/navbar/themes/_base.scss b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss index 82210962c6d..33e50991005 100644 --- a/projects/igniteui-angular/src/lib/navbar/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss @@ -24,7 +24,8 @@ $_theme: $material; igx-icon, igc-icon { - --component-size: var(--ig-size, var(--ig-size-large)); + --component-size: var(--ig-size-large); + cursor: pointer; } @@ -79,6 +80,11 @@ $_theme: $material; --ig-size: 1; } + [igxIconButton], + igc-icon-button { + --ig-size: 2; + } + @include e(title) { @extend %igx-navbar-title; } diff --git a/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss index 679ca8fa996..850fdb4ae65 100644 --- a/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss @@ -3,11 +3,6 @@ @use 'styles/themes/standalone' as *; @include themed-block(igx-navbar, bootstrap) { - [igxButton], - [igxIconButton] { - --ig-size: 2; - } - @include e(title) { @include type-style(h5) { margin: 0; diff --git a/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss index 3449e8554c2..e7bfe2984ae 100644 --- a/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss @@ -6,9 +6,12 @@ %icon-size { igx-icon, igc-icon { - --component-size: var(--ig-size, var(--ig-size-medium)); - - margin-inline: rem(6px); + --component-size: var(--ig-size-medium); + --size: auto; + + width: auto !important; + height: auto !important; + padding: rem(6px); } } @@ -16,10 +19,6 @@ --ig-size: 2; } - [igxIconButton] { - --ig-size: 2; - } - igx-navbar-title, [igxNavbarTitle] { @include type-style(h5); From 8bb6a8075b274ec3f7954885e92a64f1325ed3db Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Tue, 18 Nov 2025 10:40:45 +0200 Subject: [PATCH 118/131] fix(themes): update component properties to use 'elevation' variables instead of 'shadow' - scoped (#16461) * fix(themes): update properties to use 'elevation' variables instead of 'shadow' variables * deps(theming): bump to the latest version --------- Co-authored-by: Simeon Simeonoff --- package-lock.json | 8 +-- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- .../buttonGroup/themes/shared/_indigo.scss | 1 + .../styles/components/badge/_badge-theme.scss | 2 +- .../bottom-nav/_bottom-nav-theme.scss | 4 +- .../button-group/_button-group-theme.scss | 3 +- .../components/button/_button-theme.scss | 62 ++++++++++++------- .../styles/components/card/_card-theme.scss | 4 +- .../styles/components/chip/_chip-theme.scss | 2 +- .../components/dialog/_dialog-theme.scss | 2 +- .../drop-down/_drop-down-theme.scss | 2 +- .../styles/components/grid/_grid-theme.scss | 4 +- .../components/input/_input-group-theme.scss | 18 +++--- .../components/navbar/_navbar-theme.scss | 2 +- .../navdrawer/_navdrawer-theme.scss | 2 +- .../components/snackbar/_snackbar-theme.scss | 2 +- .../components/switch/_switch-theme.scss | 6 +- .../time-picker/_time-picker-theme.scss | 4 +- .../styles/components/toast/_toast-theme.scss | 2 +- .../components/tooltip/_tooltip-theme.scss | 2 +- 21 files changed, 77 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index 099a6443d8a..eafaf2b2a5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^22.1.0", + "igniteui-theming": "^23.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13567,9 +13567,9 @@ } }, "node_modules/igniteui-theming": { - "version": "22.1.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.1.0.tgz", - "integrity": "sha512-Fi3QaVXTX6sLfEAXEQn96yfw3xWpHCIibOl8joWXH6H3GWjAgupF6WHBSewOPeS9z9Ei5Lh/MfmktW8jaqwiaQ==", + "version": "23.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-23.0.0.tgz", + "integrity": "sha512-r3R06q0pK/P32lEIgjcml4t4ppfy80RVIl8VSnyCIg1WOEhAQmaPOioJJhID6K7iAwz4zlOGJXsP6SFeDb+gyA==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index 72f1186b54e..26a20299fe4 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^22.1.0", + "igniteui-theming": "^23.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index c19d48e0eba..b370a082872 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -73,7 +73,7 @@ "tslib": "^2.3.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", - "igniteui-theming": "^22.0.0", + "igniteui-theming": "^23.0.0", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": { diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_indigo.scss index 11fff6a26d4..720f2a384a2 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_indigo.scss @@ -56,6 +56,7 @@ $_theme: $indigo; color: var-get($_theme, 'item-focused-text-color'); background: var-get($_theme, 'item-focused-background'); border-color: var-get($_theme, 'item-focused-border-color'); + box-shadow: 0 0 0 rem(3px) var-get($_theme, 'idle-shadow-color'); z-index: 2; igx-icon { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 82402c29970..47555fe0140 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -24,7 +24,7 @@ color: var-get($theme, 'text-color'); background: var-get($theme, 'background-color'); border-radius: calc(var(--size) / 2); - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); overflow: hidden; igx-icon { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index 6f21583c88e..549b33c75ed 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss @@ -43,13 +43,13 @@ %igx-bottom-nav-menu--top { inset-block-start: 0; inset-block-end: inherit; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); } %igx-bottom-nav-menu--bottom { inset-block-start: inherit; inset-block-end: 0; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); } %igx-bottom-nav-menu-item { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss index b942c0e20a8..d5976b87ea8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss @@ -36,7 +36,7 @@ %igx-group-display { display: flex; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); border-radius: var-get($theme, 'border-radius'); button { @@ -269,6 +269,7 @@ color: var-get($theme, 'item-focused-text-color'); background: var-get($theme, 'item-focused-background'); border-color: var-get($theme, 'item-focused-border-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color'); z-index: 2; igx-icon { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 9483852a66f..00a57b5b802 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -195,7 +195,7 @@ $contained-shadow: map.get( ( - 'material': var-get($contained-theme, 'resting-shadow'), + 'material': var-get($contained-theme, 'resting-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none, @@ -205,7 +205,7 @@ $contained-shadow--hover: map.get( ( - 'material': var-get($contained-theme, 'hover-shadow'), + 'material': var-get($contained-theme, 'hover-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none, @@ -215,9 +215,8 @@ $contained-shadow--focus: map.get( ( - 'material': var-get($contained-theme, 'focus-shadow'), - 'fluent': 0 0 0 rem(3px) - var-get($contained-theme, 'shadow-color'), + 'material': var-get($contained-theme, 'focus-elevation'), + 'fluent': none, 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) @@ -228,9 +227,8 @@ $contained-shadow--active: map.get( ( - 'material': var-get($contained-theme, 'active-shadow'), - 'fluent': 0 0 0 rem(3px) - var-get($contained-theme, 'shadow-color'), + 'material': var-get($contained-theme, 'active-elevation'), + 'fluent': none, 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) @@ -241,7 +239,7 @@ $fab-shadow: map.get( ( - 'material': var-get($fab-theme, 'resting-shadow'), + 'material': var-get($fab-theme, 'resting-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none, @@ -251,7 +249,7 @@ $fab-shadow--hover: map.get( ( - 'material': var-get($fab-theme, 'hover-shadow'), + 'material': var-get($fab-theme, 'hover-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none, @@ -261,8 +259,8 @@ $fab-shadow--focus: map.get( ( - 'material': var-get($fab-theme, 'focus-shadow'), - 'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), + 'material': var-get($fab-theme, 'focus-elevation'), + 'fluent': none, 'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), ), @@ -271,8 +269,8 @@ $fab-shadow--active: map.get( ( - 'material': var-get($fab-theme, 'active-shadow'), - 'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), + 'material': var-get($fab-theme, 'active-elevation'), + 'fluent': none, 'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), ), @@ -607,7 +605,10 @@ background: var-get($contained-theme, 'background'); border-color: var-get($contained-theme, 'border-color'); border-radius: var-get($contained-theme, 'border-radius'); - box-shadow: var-get($contained-theme, 'resting-shadow'); + + @if $variant == 'material' { + box-shadow: var-get($contained-theme, 'resting-elevation'); + } igx-icon { color: var-get($contained-theme, 'icon-color'); @@ -617,7 +618,10 @@ color: var-get($contained-theme, 'hover-foreground'); background: var-get($contained-theme, 'hover-background'); border-color: var-get($contained-theme, 'hover-border-color'); - box-shadow: var-get($contained-theme, 'hover-shadow'); + + @if $variant == 'material' { + box-shadow: var-get($contained-theme, 'hover-elevation'); + } igx-icon { color: var-get($contained-theme, 'icon-color-hover'); @@ -628,7 +632,10 @@ color: var-get($contained-theme, 'active-foreground'); background: var-get($contained-theme, 'active-background'); border-color: var-get($contained-theme, 'active-border-color'); - box-shadow: var-get($contained-theme, 'active-shadow'); + + @if $variant == 'material' { + box-shadow: var-get($contained-theme, 'active-elevation'); + } igx-icon { color: var-get($contained-theme, 'active-foreground'); @@ -664,7 +671,7 @@ } @if $variant == 'material' { - box-shadow: var-get($contained-theme, 'focus-shadow'); + box-shadow: var-get($contained-theme, 'focus-elevation'); } @else { box-shadow: $contained-shadow--active; } @@ -693,7 +700,7 @@ } @if $variant == 'material' { - box-shadow: var-get($contained-theme, 'focus-shadow'); + box-shadow: var-get($contained-theme, 'focus-elevation'); } } @@ -760,7 +767,10 @@ background: var-get($fab-theme, 'background'); border-color: var-get($fab-theme, 'border-color'); border-radius: var-get($fab-theme, 'border-radius'); - box-shadow: var-get($fab-theme, 'resting-shadow'); + + @if $variant == 'material' { + box-shadow: var-get($fab-theme, 'resting-elevation'); + } igx-icon { color: var-get($fab-theme, 'icon-color'); @@ -770,7 +780,10 @@ color: var-get($fab-theme, 'hover-foreground'); background: var-get($fab-theme, 'hover-background'); border-color: var-get($fab-theme, 'hover-border-color'); - box-shadow: var-get($fab-theme, 'hover-shadow'); + + @if $variant == 'material' { + box-shadow: var-get($fab-theme, 'hover-elevation'); + } igx-icon { color: var-get($fab-theme, 'icon-color-hover'); @@ -781,7 +794,10 @@ color: var-get($fab-theme, 'active-foreground'); background: var-get($fab-theme, 'active-background'); border-color: var-get($fab-theme, 'active-border-color'); - box-shadow: var-get($fab-theme, 'active-shadow'); + + @if $variant == 'material' { + box-shadow: var-get($fab-theme, 'active-elevation'); + } igx-icon { color: var-get($fab-theme, 'active-foreground'); @@ -805,7 +821,7 @@ } @if $variant == 'material' { - box-shadow: var-get($fab-theme, 'focus-shadow'); + box-shadow: var-get($fab-theme, 'focus-elevation'); } @else { box-shadow: $contained-shadow--focus; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss index bcaa61c6e4c..8c05c45c68f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss @@ -31,10 +31,10 @@ } %igx-card--elevated { - box-shadow: var-get($theme, 'resting-shadow'); + box-shadow: var-get($theme, 'resting-elevation'); &:hover { - box-shadow: var-get($theme, 'hover-shadow'); + box-shadow: var-get($theme, 'hover-elevation'); } @if $not-material-theme { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index e17b34ca090..003a8ad71e2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -540,7 +540,7 @@ @extend %igx-chip; position: absolute; - box-shadow: var-get($theme, 'ghost-shadow'); + box-shadow: var-get($theme, 'ghost-elevation'); overflow: hidden; color: var-get($theme, 'focus-text-color'); background: var-get($theme, 'ghost-background'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss index c39996752e8..b87b260406e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss @@ -51,7 +51,7 @@ border: rem(1px) solid var-get($theme, 'border-color'); border-radius: var-get($theme, 'border-radius'); background: var-get($theme, 'background'); - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); overflow: hidden; .igx-calendar { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index 1a261ddabcc..abbe8002bb1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -20,7 +20,7 @@ overflow: hidden; border-radius: var-get($theme, 'border-radius'); background: var-get($theme, 'background-color'); - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); min-width: rem(128px); border: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index ef67f3605e8..d28515020bc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -34,7 +34,7 @@ ), $variant); $cbx-bs-size: rem(14px); - $grid-shadow: var-get($theme, 'grid-shadow'); + $grid-shadow: var-get($theme, 'grid-elevation'); $grid-caption-fs: rem(20px); $grid-caption-lh: rem(32px); @@ -1912,7 +1912,7 @@ top: rem(-99999px); inset-inline-start: rem(-99999px); border: none; - box-shadow: var-get($theme, 'drag-shadow'); + box-shadow: var-get($theme, 'drag-elevation'); overflow: hidden; z-index: 20; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 1f513442471..544b63c7e05 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -343,7 +343,7 @@ &%form-group-display--search { %form-group-bundle-search--hover:not(:focus-within) { - box-shadow: var-get($theme, 'search-resting-shadow'); + box-shadow: var-get($theme, 'search-resting-elevation'); } } @@ -1024,7 +1024,7 @@ %form-group-bundle--search { background: var-get($theme, 'search-background'); - box-shadow: var-get($theme, 'search-resting-shadow'); + box-shadow: var-get($theme, 'search-resting-elevation'); @if $variant != 'bootstrap' { border-radius: var-get($theme, 'search-border-radius'); @@ -1039,28 +1039,28 @@ } %form-group-bundle-search--hover { - box-shadow: var-get($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-elevation'); border-color: var-get($theme, 'hover-border-color'); } %form-group-bundle-search--focus { - box-shadow: var-get($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-elevation'); border-color: var-get($theme, 'hover-border-color'); } %form-group-bundle-search--error { - box-shadow: var-get($theme, 'search-hover-shadow'); - border-color: var-get($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-elevation'); + border-color: var-get($theme, 'search-hover-elevation'); } %form-group-bundle-search--success { - box-shadow: var-get($theme, 'search-hover-shadow'); - border-color: var-get($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-elevation'); + border-color: var-get($theme, 'search-hover-elevation'); } %form-group-bundle-search--disabled { background: var-get($theme, 'search-disabled-background'); - box-shadow: var-get($theme, 'search-disabled-shadow'); + box-shadow: var-get($theme, 'search-disabled-elevation'); border-color: var-get($theme, 'disabled-border-color'); igx-prefix, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss index 64fdb2bb167..83ae92dc981 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss @@ -25,7 +25,7 @@ padding-inline: pad-inline($navbar-padding); background: var-get($theme, 'background'); color: var-get($theme, 'text-color'); - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); z-index: 4; overflow: hidden; border-bottom: rem(1px) solid var-get($theme, 'border-color'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss index b3f91966295..fa032dc01b5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -78,7 +78,7 @@ z-index: 999; transition: width, padding, transform; transition-timing-function: $in-out-quad; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); padding: $aside-padding; @if $variant != 'fluent' { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss index 5a27bbedd05..8e6234d7330 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss @@ -27,7 +27,7 @@ color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); backface-visibility: hidden; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); border-radius: var-get($theme, 'border-radius'); backdrop-filter: blur(8px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 5f2285a090c..b6eb01d2d9f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -56,21 +56,21 @@ ), $variant); $thumb-resting-shadow: map.get(( - 'material': var-get($theme, 'resting-shadow'), + 'material': var-get($theme, 'resting-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none ), $variant); $thumb-hover-shadow: map.get(( - 'material': var-get($theme, 'hover-shadow'), + 'material': var-get($theme, 'hover-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none ), $variant); $thumb-disabled-shadow: map.get(( - 'material': var-get($theme, 'disabled-shadow'), + 'material': var-get($theme, 'disabled-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss index 87aaf7e8354..42e22233e56 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss @@ -32,7 +32,7 @@ flex-flow: column nowrap; border-radius: var-get($theme, 'border-radius'); box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color'), - var-get($theme, 'modal-shadow'); + var-get($theme, 'modal-elevation'); background: var-get($theme, 'background-color'); overflow: hidden; min-width: fit-content; @@ -58,7 +58,7 @@ %time-picker--dropdown { min-width: sizable(rem(290px), rem(314px), rem(360px)); box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'), - var-get($theme, 'dropdown-shadow'); + var-get($theme, 'dropdown-elevation'); %time-picker__body { min-width: auto; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index 355afdff3fc..411989a9bba 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -29,7 +29,7 @@ color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); border-radius: var-get($theme, 'border-radius'); - box-shadow: map.get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); backdrop-filter: blur(10px); &::after { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index ba079cd301b..a4a5b1136d4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -20,7 +20,7 @@ background: var-get($theme, 'background'); color: var-get($theme, 'text-color'); border-radius: var-get($theme, 'border-radius'); - box-shadow: map.get($theme, 'shadow'); + box-shadow: map.get($theme, 'elevation'); padding: pad-block(rem(4px)) pad-inline(rem(8px)); gap: rem(8px); min-height: rem(24px); From 5898f244db2cfee742d1ce30bbeb5b3b918a431b Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Tue, 18 Nov 2025 10:42:11 +0200 Subject: [PATCH 119/131] fix(tabs): replace igx-icon with igc-icon in WC demo + fix theme parameters (scoped) (#16415) --- .../src/lib/tabs/tabs/header/themes/_base.scss | 9 +++++---- .../tabs/header/themes/shared/_bootstrap.scss | 16 +++++++++++++--- .../tabs/tabs/header/themes/shared/_fluent.scss | 1 + .../tabs/tabs/header/themes/shared/_indigo.scss | 8 +------- .../tabs/header/themes/shared/_material.scss | 1 + .../src/lib/tabs/tabs/item/themes/_base.scss | 1 - .../tabs/tabs/item/themes/shared/_bootstrap.scss | 1 + src/app/tabs-showcase/tabs-showcase.sample.html | 2 +- src/app/tabs-showcase/tabs-showcase.sample.ts | 9 ++++++++- 9 files changed, 31 insertions(+), 17 deletions(-) diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss index 56bbcc14ccd..1795572cdef 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss @@ -45,7 +45,7 @@ $theme-variant: map.get($theme, '_meta', 'theme-variant'); } &:focus { - background: var-get($theme, 'item-active-background'); + background: var-get($theme, 'item-hover-background'); color: var-get($theme, 'item-hover-color'); border-bottom-color: transparent; } @@ -71,14 +71,15 @@ $theme-variant: map.get($theme, '_meta', 'theme-variant'); @include m(selected) { outline: 0; color: var-get($theme, 'item-active-color'); + background: var-get($theme, 'item-active-background'); &:hover, &:focus { - background: var-get($theme, 'item-active-background'); - color: if($variant == 'fluent', var-get($theme, 'item-hover-color'), var-get($theme, 'item-active-color')); + background: var-get($theme, 'item-active-hover-background'); + color: var-get($theme, 'item-active-hover-color'); igx-icon { - color: var-get($theme, 'item-active-icon-color'); + color: var-get($theme, 'item-active-hover-icon-color'); } } diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss index 6a3bc7d9254..245d44a689f 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss @@ -8,8 +8,9 @@ $_theme: $bootstrap; @include themed-block(igx-tabs, bootstrap) { %igx-tab-header--focus { border: none; - box-shadow: inset 0 0 0 rem(2px) var-get($_theme, 'item-hover-color'); - border-radius: rem(4px); + box-shadow: inset 0 0 0 rem(2px) var-get($_theme, 'item-active-hover-color'); + border-bottom-left-radius: rem(4px); + border-bottom-right-radius: rem(4px); z-index: 1; &::after { @@ -32,7 +33,6 @@ $_theme: $bootstrap; } @include m(selected) { - background: var-get($_theme, 'item-active-background'); position: relative; box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color'); z-index: 1; @@ -62,6 +62,16 @@ $_theme: $bootstrap; &:hover { box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color'); + + &::before { + background: linear-gradient( + to right, + var-get($_theme, 'border-color') 1px, + var-get($_theme, 'item-active-hover-background') 1px, + var-get($_theme, 'item-active-hover-background') calc(100% - 1px), + var-get($_theme, 'border-color') calc(100% - 1px) + ); + } } } } diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss index 926f8a230f3..d1a4c9522e3 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss @@ -14,6 +14,7 @@ $_theme: $fluent; min-height: rem(44px); transition: all .3s $tabs-animation-function; border: rem(1px) solid var-get($_theme, 'border-color'); + border-radius: var-get($_theme, 'border-radius'); &:hover, &:focus { diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss index 9c513b56cd1..f94565e2ed4 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss @@ -17,6 +17,7 @@ $_theme: $indigo; transition: all .3s $tabs-animation-function; border: rem(1px) solid var-get($_theme, 'border-color'); + border-radius: var-get($_theme, 'border-radius'); border-top: rem(1px) solid transparent; border-inline: none; @@ -28,13 +29,6 @@ $_theme: $indigo; border-bottom: rem(1px) solid var-get($_theme, 'border-color'); } - @include m(selected) { - &:hover, - &:focus-visible { - background: var-get($_theme, 'item-hover-background'); - } - } - @include e(inner) { > [igxtabheaderlabel] { @include type-style(subtitle-2) { diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss index dda9e832beb..98e5e81b32f 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss @@ -12,6 +12,7 @@ $_theme: $material; min-height: rem(48px); transition: all .3s $tabs-animation-function; border: rem(1px) solid var-get($_theme, 'border-color'); + border-radius: var-get($_theme, 'border-radius'); &:hover, &:focus { diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss index 8fa2e62baf3..fbc6b042008 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss @@ -16,7 +16,6 @@ $theme: $material; align-items: center; overflow: hidden; flex: 0 0 auto; - background: var-get($theme, 'item-background'); z-index: 1; @include e(content) { diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss index feea13a2d60..df5410783a6 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss @@ -8,6 +8,7 @@ $_theme: $bootstrap; @include themed-block(igx-tabs, bootstrap) { @include b(igx-tabs-header) { position: relative; + background: var-get($_theme, 'item-background'); &::after { content: ''; diff --git a/src/app/tabs-showcase/tabs-showcase.sample.html b/src/app/tabs-showcase/tabs-showcase.sample.html index f90f445539c..bd9df358a8a 100644 --- a/src/app/tabs-showcase/tabs-showcase.sample.html +++ b/src/app/tabs-showcase/tabs-showcase.sample.html @@ -32,7 +32,7 @@ @for (contact of contacts; track contact.id) { @if(!properties.hideIcon) { - folder + } @if(!properties.hideText) { {{ contact.text }} diff --git a/src/app/tabs-showcase/tabs-showcase.sample.ts b/src/app/tabs-showcase/tabs-showcase.sample.ts index b271789cfb2..fcf308b106f 100644 --- a/src/app/tabs-showcase/tabs-showcase.sample.ts +++ b/src/app/tabs-showcase/tabs-showcase.sample.ts @@ -20,13 +20,20 @@ import { defineComponents, IgcTabsComponent, IgcTabComponent, + IgcIconComponent, + registerIconFromText } from 'igniteui-webcomponents'; import { PropertyChangeService, Properties, } from '../properties-panel/property-change.service'; -defineComponents(IgcTabsComponent, IgcTabComponent); +defineComponents(IgcTabsComponent, IgcTabComponent, IgcIconComponent); + +registerIconFromText( + 'folder', + '' +); @Component({ selector: 'app-tabs-showcase-sample', From cb388ff2ad7e9e0a7465ebf4cbcc59bece7e4db0 Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Wed, 19 Nov 2025 09:10:06 +0200 Subject: [PATCH 120/131] fix(tabs): set correct bootstrap focus border var (#16481) --- .../src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss index 245d44a689f..a41650e075d 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss @@ -8,7 +8,7 @@ $_theme: $bootstrap; @include themed-block(igx-tabs, bootstrap) { %igx-tab-header--focus { border: none; - box-shadow: inset 0 0 0 rem(2px) var-get($_theme, 'item-active-hover-color'); + box-shadow: inset 0 0 0 rem(2px) var-get($_theme, 'item-hover-color'); border-bottom-left-radius: rem(4px); border-bottom-right-radius: rem(4px); z-index: 1; From e4a8e3c4c72c0f799ad0ffdd3cd9ad20431b2d94 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Thu, 20 Nov 2025 10:14:20 +0200 Subject: [PATCH 121/131] fix(input): align input sass theme with wc (#16463) --- .../src/lib/input-group/themes/_base.scss | 8 ++++++ .../input-group/themes/shared/bootstrap.scss | 2 +- .../lib/input-group/themes/shared/indigo.scss | 26 +++++++++++++++++-- 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss index 9d5518af043..714a528ae02 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss @@ -287,6 +287,13 @@ $base-scale-size: ( } } + @include m(search) { + @include e(bundle) { + background: #{var-get($theme, 'search-background')}; + border-radius: #{var-get($theme, 'search-border-radius')}; + } + } + @include m(file, $not: (disabled)) { @include e(input) { &[type='file'] { @@ -484,6 +491,7 @@ $base-scale-size: ( igx-suffix:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__case-icon), [igxSuffix]:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__case-icon) { color: var-get($theme, 'disabled-text-color'); + background: inherit; } igx-suffix.igx-combo__clear-button { diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss index 3a868ba537b..a4e14859750 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss @@ -168,7 +168,7 @@ $border-radius: var-get($_theme, 'border-border-radius'); } @include m(prefixed, $not: (disabled)) { - @include e(bundle-start) { + @include e(bundle-start) { igx-prefix:not(:first-child), [igxPrefix]:not(:first-child) { border-inline-start: rem(1px) solid var-get($_theme, 'border-color'); diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss index 9569752e168..f7f82e8dce2 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss @@ -11,6 +11,16 @@ $_theme: $indigo; --_prefix-suffix-spacing: #{pad-inline(rem(2px), rem(4px), rem(6px))}; --_bundle-template-rows: revert; + igx-prefix:first-child, + [igxPrefix]:first-child { + border-start-start-radius: var-get($_theme, 'box-border-radius'); + } + + igx-suffix:last-child, + [igxSuffix]:last-child { + border-start-end-radius: var-get($_theme, 'box-border-radius'); + } + igx-icon { --size: #{sizable(rem(14px), rem(16px), rem(16px))}; } @@ -43,6 +53,11 @@ $_theme: $indigo; @include m(search) { --_prefix-suffix-spacing: #{pad-inline(rem(6px), rem(8px), rem(10px))}; + @include e(bundle) { + border-end-start-radius: 0; + border-end-end-radius: 0; + } + @include e(input) { padding-inline: var(--_prefix-suffix-spacing); } @@ -99,6 +114,8 @@ $_theme: $indigo; @include e(bundle) { transition: all .25s $out-cubic; border-block-end: rem(1px) solid var-get($_theme, 'idle-bottom-line-color'); + border-start-start-radius: var-get($_theme, 'box-border-radius'); + border-start-end-radius: var-get($_theme, 'box-border-radius'); &:hover { background: var-get($_theme, 'box-background-hover'); @@ -141,9 +158,13 @@ $_theme: $indigo; @include m(focused) { @include e(bundle) { - background: var-get($_theme, 'box-background-hover'); + background: var-get($_theme, 'box-background-focus'); border-block-end-color: var-get($_theme, 'focused-bottom-line-color'); } + + @include e(label) { + color: var-get($_theme, 'focused-secondary-color'); + } } @include m(valid) { @@ -202,6 +223,7 @@ $_theme: $indigo; @include m(disabled) { @include e(bundle) { + background: unset; border-block-end: rem(1px) solid var-get($_theme, 'disabled-bottom-line-color'); &:hover { @@ -211,7 +233,7 @@ $_theme: $indigo; &:hover { @include e(bundle) { - background: var-get($_theme, 'box-disabled-background'); + background: inherit; } } } From 89835d3637933bb5e86c33c16542f9df5f13198b Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 20 Nov 2025 10:19:42 +0200 Subject: [PATCH 122/131] refactor(radio): style component using sass theme (#16476) --- .../src/lib/radio/themes/_base.scss | 10 +++++++- .../lib/radio/themes/shared/_bootstrap.scss | 24 +++--------------- .../src/lib/radio/themes/shared/_fluent.scss | 25 +++++++++++++++++++ .../src/lib/radio/themes/shared/_indigo.scss | 15 ++++++++--- 4 files changed, 48 insertions(+), 26 deletions(-) diff --git a/projects/igniteui-angular/src/lib/radio/themes/_base.scss b/projects/igniteui-angular/src/lib/radio/themes/_base.scss index a8186de5651..08a846b9052 100644 --- a/projects/igniteui-angular/src/lib/radio/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/radio/themes/_base.scss @@ -68,6 +68,10 @@ $_theme: $material; cursor: pointer; &:hover { + @include e(label) { + color: var-get($_theme, 'label-color-hover'); + } + @include e(composite) { &::before { background: var-get($_theme, 'hover-color'); @@ -306,6 +310,10 @@ $_theme: $material; } &:hover { + @include e(label) { + color: var-get($_theme, 'error-color'); + } + @include e(ripple) { @extend %radio-ripple--hover; @extend %radio-ripple--hover-invalid; @@ -317,7 +325,7 @@ $_theme: $material; } &::after { - border-color: var-get($_theme, 'error-color-hover'); + border-color: var-get($_theme, 'error-color'); } } } diff --git a/projects/igniteui-angular/src/lib/radio/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/radio/themes/shared/_bootstrap.scss index b98c6bb3c28..35e7db9db96 100644 --- a/projects/igniteui-angular/src/lib/radio/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/radio/themes/shared/_bootstrap.scss @@ -72,14 +72,14 @@ $_theme: $bootstrap; box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-outline-color'); &::after { - border-color: color($color: 'primary', $variant: 200); + border-color: var-get($_theme, 'focus-border-color'); } } &:hover { @include e(composite) { &::after { - border-color: color($color: 'primary', $variant: 300); + border-color: hsl(from var-get($_theme, 'focus-border-color') h calc(s * 1.12) calc(l * 0.82)); } } } @@ -112,14 +112,6 @@ $_theme: $bootstrap; } @include m(invalid) { - @include e(composite) { - &::after { - background: transparent; - border: var(--border-width) solid - var-get($_theme, 'error-color'); - } - } - &:hover { @include e(composite) { &::after { @@ -154,11 +146,10 @@ $_theme: $bootstrap; @include e(composite) { &::after { background: var-get($_theme, 'error-color'); - border-color: var-get($_theme, 'error-color'); } &::before { - background: white; + background: var-get($_theme, 'fill-hover-border-color'); } } @@ -181,15 +172,6 @@ $_theme: $bootstrap; } } - @include mx(checked, invalid, focused) { - @include e(composite) { - &::before { - background: white; - border-color: transparent; - } - } - } - @include mx(invalid, disabled) { @include e(composite) { &::after { diff --git a/projects/igniteui-angular/src/lib/radio/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/radio/themes/shared/_fluent.scss index 03e0c454906..2ac4bb17ec6 100644 --- a/projects/igniteui-angular/src/lib/radio/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/radio/themes/shared/_fluent.scss @@ -36,6 +36,31 @@ $_theme: $fluent; box-shadow: 0 0 0 rem(1px) var-get($_theme, 'focus-outline-color'); } } + + @include m(invalid) { + &:hover { + @include e(composite) { + &::after { + border-color: var-get($_theme, 'error-color-hover'); + } + } + } + } + + @include mx(checked, invalid, focused) { + &:hover { + @include e(composite) { + &::before { + background: var-get($_theme, 'error-color-hover'); + border-color: var-get($_theme, 'error-color-hover'); + } + + &::after { + border-color: var-get($_theme, 'error-color-hover'); + } + } + } + } } @include themed-block(igx-radio-group, fluent) { diff --git a/projects/igniteui-angular/src/lib/radio/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/radio/themes/shared/_indigo.scss index fece54fe316..2df676a62fc 100644 --- a/projects/igniteui-angular/src/lib/radio/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/radio/themes/shared/_indigo.scss @@ -19,10 +19,6 @@ $_theme: $indigo; } &:hover { - @include e(label) { - color: var-get($_theme, 'label-color-hover'); - } - @include e(composite) { &::after { border-color: var-get($_theme, 'hover-color'); @@ -92,6 +88,17 @@ $_theme: $indigo; } } + @include mx(checked, invalid, focused) { + &:hover { + @include e(composite) { + &::before { + background: var-get($_theme, 'error-color-hover'); + border-color: var-get($_theme, 'error-color-hover'); + } + } + } + } + @include m(disabled) { @include e(label) { color: var-get($_theme, 'disabled-label-color'); From 1a51cd0e15f62419e75376b1128159c4429ab611 Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Fri, 21 Nov 2025 10:56:50 +0200 Subject: [PATCH 123/131] fix(list): icon size in nested elements on initial load (#16498) --- projects/igniteui-angular/src/lib/list/themes/_base.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/list/themes/_base.scss b/projects/igniteui-angular/src/lib/list/themes/_base.scss index cfb905464cc..c4d5333ec85 100644 --- a/projects/igniteui-angular/src/lib/list/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/list/themes/_base.scss @@ -140,7 +140,8 @@ $theme: $base; display: none; } - > * { + > *, + [class^='igx'] { --component-size: var(--list-size); } From 5a867dff528e3b4ee8e8990f02b23669735e5476 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Fri, 21 Nov 2025 13:18:36 +0200 Subject: [PATCH 124/131] fix(switch): style component using sass theme (#16491) * fix(switch): style component using sass theme * fix(switch): indigo border-radius * fix(switch): hover shadow --- .../src/lib/switch/themes/_base.scss | 2 +- .../src/lib/switch/themes/shared/bootstrap.scss | 6 ++++++ .../src/lib/switch/themes/shared/indigo.scss | 1 - .../src/lib/switch/themes/shared/material.scss | 13 +++---------- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/switch/themes/_base.scss b/projects/igniteui-angular/src/lib/switch/themes/_base.scss index da328b1e408..a786aa020f1 100644 --- a/projects/igniteui-angular/src/lib/switch/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/switch/themes/_base.scss @@ -84,7 +84,7 @@ $_theme: $material; } @include e(thumb) { - background: var-get($_theme, 'border-hover-color'); + background: var-get($_theme, 'thumb-off-hover-color'); } @include e(label) { diff --git a/projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss index bd6fdf94c16..df2d0a229a1 100644 --- a/projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss @@ -49,6 +49,12 @@ $_theme: $bootstrap; @include e(thumb) { background: var-get($_theme, 'thumb-on-color'); } + + &:hover { + @include e(composite) { + border-color: var-get($_theme, 'border-on-hover-color'); + } + } } @include mx(disabled, checked) { diff --git a/projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss index 39aa6ba8c56..a1dd3201a0c 100644 --- a/projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss @@ -26,7 +26,6 @@ $_theme: $indigo; @include m(focused) { @include e(composite) { - border-radius: var-get($_theme, 'border-radius-thumb'); box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-outline-color'); } } diff --git a/projects/igniteui-angular/src/lib/switch/themes/shared/material.scss b/projects/igniteui-angular/src/lib/switch/themes/shared/material.scss index 02629de6038..f4f8a725b55 100644 --- a/projects/igniteui-angular/src/lib/switch/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/switch/themes/shared/material.scss @@ -12,7 +12,7 @@ $_theme: $material; --switch-height: #{rem(14px)}; --switch-thumb-size: #{rem(20px)}; --switch-on-offset: #{rem(1px)}; - --switch-off-offset: 0; + --switch-off-offset: #{rem(-1px)}; --label-margin: #{rem(12px)}; @include e(label) { @@ -21,22 +21,15 @@ $_theme: $material; } } - @include e(composite) { - border-width: 0; - } - @include e(ripple) { display: block; } @include e(thumb) { box-shadow: var-get($_theme, 'resting-elevation'); - } - &:hover { - @include e(thumb) { - background: var-get($_theme, 'thumb-off-color'); - box-shadow: var-get($_theme, 'resting-elevation'); + &:hover { + box-shadow: var-get($_theme, 'hover-elevation'); } } From 501ad985dc34b67f55dcba1b5ff313f97293a840 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Fri, 21 Nov 2025 14:08:29 +0200 Subject: [PATCH 125/131] fix(combo): style component using sass theme (#16389) --- .../lib/input-group/themes/shared/indigo.scss | 24 +++++++++++++++++++ .../input-group/themes/shared/material.scss | 6 +++++ .../src/lib/select/themes/dark/_index.scss | 2 +- 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss index f7f82e8dce2..e09513ac9cc 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss @@ -27,6 +27,18 @@ $_theme: $indigo; row-gap: rem(4px); + &:hover { + @include e(toggle-button) { + color: var(--toggle-button-foreground-focus); + background: var(--toggle-button-background-focus); + } + + @include e(clear-button) { + color: var(--clear-button-foreground-focus); + background: var(--clear-button-background-focus); + } + } + @include e(clear-icon) { &:focus { color: contrast-color($color: 'primary', $variant: 600); @@ -235,6 +247,18 @@ $_theme: $indigo; @include e(bundle) { background: inherit; } + + @include e(toggle-button) { + cursor: default; + color: var(--toggle-button-foreground-disabled); + background: var(--toggle-button-background-disabled); + } + + @include e(clear-button) { + cursor: default; + color: var-get($_theme, 'disabled-text-color'); + background: var-get($_theme, 'border-disabled-background'); + } } } } diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss index a82f0589030..4f1f950e8cf 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss @@ -217,6 +217,12 @@ $input-bottom-spacing: rem(6px); } } + @include mx(focused, filled) { + @include e(toggle-button) { + color: var(--toggle-button-foreground-filled); + } + } + @include mx(base, valid) { @include e(bundle) { &::before { diff --git a/projects/igniteui-angular/src/lib/select/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/select/themes/dark/_index.scss index d077c9bdea4..67aff4e3260 100644 --- a/projects/igniteui-angular/src/lib/select/themes/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/select/themes/dark/_index.scss @@ -3,4 +3,4 @@ @use 'styles/themes/standalone' as *; $tokens: meta.module-variables(tokens); -@include themes(igx-input-group, $tokens, dark); +@include themes(igx-select, $tokens, dark); From b3fb4a3be8a54f0e1fd8a7f166360aa506a06f4c Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Wed, 26 Nov 2025 13:39:10 +0200 Subject: [PATCH 126/131] refactor(themes): accessibility color fixes (#16518) --- .../buttonGroup/themes/shared/_material.scss | 9 ++- .../components/button/_button-theme.scss | 16 +++++- .../styles/components/grid/_grid-theme.scss | 8 ++- .../src/lib/stepper/step/themes/_base.scss | 55 +++++++++++++++++-- .../stepper/step/themes/shared/bootstrap.scss | 27 --------- .../stepper/step/themes/shared/fluent.scss | 27 --------- .../stepper/step/themes/shared/indigo.scss | 27 --------- .../stepper/step/themes/shared/material.scss | 27 --------- .../tabs/item/themes/shared/_material.scss | 4 ++ 9 files changed, 82 insertions(+), 118 deletions(-) diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss index 1bbac9cde6b..ea32c2dd14a 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss @@ -77,12 +77,12 @@ $_theme: $material; &:active { @extend %item-overlay; - color: var-get($_theme, 'item-selected-text-color'); + color: var-get($_theme, 'item-selected-hover-text-color'); background: var-get($_theme, 'item-selected-background'); border-color: var-get($_theme, 'item-selected-border-color'); igx-icon { - color: var-get($_theme, 'item-selected-icon-color'); + color: var-get($_theme, 'item-selected-hover-icon-color'); } &::before { @@ -119,6 +119,11 @@ $_theme: $material; &:active { background: var-get($_theme, 'item-selected-background'); + color: var-get($_theme, 'item-selected-hover-text-color'); + + igx-icon { + color: var-get($_theme, 'item-selected-hover-icon-color'); + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 00a57b5b802..d228e2ec20b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -414,7 +414,11 @@ border-color: var-get($flat-theme, 'focus-visible-border-color'); igx-icon { - color: var-get($flat-theme, 'icon-color'); + @if $variant == 'material' { + color: var-get($flat-theme, 'icon-color-hover'); + } @else { + color: var-get($flat-theme, 'icon-color'); + } } @if $variant == 'bootstrap' { @@ -572,7 +576,15 @@ &:active { background: var-get($outlined-theme, 'focus-background'); color: var-get($outlined-theme, 'focus-foreground'); - border-color: var-get($outlined-theme, 'active-border-color'); + @if $variant == 'material' { + border-color: var-get($outlined-theme, 'focus-border-color'); + + igx-icon { + color: var-get($outlined-theme, 'focus-foreground'); + } + } @else { + border-color: var-get($outlined-theme, 'active-border-color'); + } @if $variant == 'indigo' { igx-icon { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index d28515020bc..a7b9698e900 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -892,7 +892,7 @@ @include css-vars(( name: 'igx-grid-row', row-ghost-background: map.get($theme, 'row-ghost-background'), - row-drag-color: map.get($theme, 'row-drago-color') + row-drag-color: map.get($theme, 'row-drag-color') )); } } @@ -1004,7 +1004,11 @@ } %igx-icon--error { - color: color($color: 'gray', $variant: 500); + @if $variant == 'fluent' and $theme-variant == 'light' or $variant == 'material' and $theme-variant == 'light' { + color: color($color: 'gray', $variant: 600); + } @else { + color: color($color: 'gray', $variant: 500); + } } } diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss index 94282c576cc..12972aab6f7 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss @@ -54,6 +54,16 @@ $theme: $material; @include e(header) { background: var-get($theme, 'step-focus-background'); color: var-get($theme, 'title-focus-color'); + + &:hover { + #{elem($this, title)} { + color: var-get($theme, 'title-focus-color'); + } + + #{elem($this, subtitle)} { + color: var-get($theme, 'subtitle-focus-color'); + } + } } } @@ -67,6 +77,16 @@ $theme: $material; &:focus { @include e(header) { background: var-get($theme, 'invalid-step-focus-background'); + + &:hover { + #{elem($this, title)} { + color: var-get($theme, 'invalid-title-focus-color'); + } + + #{elem($this, subtitle)} { + color: var-get($theme, 'invalid-subtitle-focus-color'); + } + } } @include e(title) { @@ -82,7 +102,17 @@ $theme: $material; @include m(current) { &:focus { @include e(header) { - background: var-get($theme, 'current-step-focus-background') !important; + background: var-get($theme, 'current-step-focus-background'); + + &:hover { + #{elem($this, title)} { + color: var-get($theme, 'current-title-focus-color'); + } + + #{elem($this, subtitle)} { + color: var-get($theme, 'current-subtitle-focus-color'); + } + } } @include e(title) { @@ -146,6 +176,16 @@ $theme: $material; &:focus { @include e(header) { background: var-get($theme, 'complete-step-focus-background'); + + &:hover { + #{elem($this, title)} { + color: var-get($theme, 'complete-title-focus-color'); + } + + #{elem($this, subtitle)} { + color: var-get($theme, 'complete-subtitle-focus-color'); + } + } } @include e(title) { @@ -388,6 +428,7 @@ $theme: $material; border-radius: var-get($theme, 'border-radius-indicator'); color: var-get($theme, 'indicator-color'); background: var-get($theme, 'indicator-background'); + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'indicator-outline'); } @include e(title) { @@ -427,6 +468,7 @@ $theme: $material; @include e(indicator) { color: var-get($theme, 'invalid-indicator-color'); background: var-get($theme, 'invalid-indicator-background'); + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'invalid-indicator-outline'); } @include e(title) { @@ -438,6 +480,8 @@ $theme: $material; } &:hover { + background: var-get($theme, 'invalid-step-hover-background'); + @include e(title) { color: var-get($theme, 'invalid-title-hover-color'); } @@ -459,6 +503,7 @@ $theme: $material; @include e(indicator) { color: var-get($theme, 'complete-indicator-color'); background: var-get($theme, 'complete-indicator-background'); + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'complete-indicator-outline'); } @include e(title) { @@ -483,12 +528,13 @@ $theme: $material; } @include m(current) { - background: var-get($theme, 'current-step-background') !important; + background: var-get($theme, 'current-step-background'); color: var-get($theme, 'current-title-color'); @include e(indicator) { color: var-get($theme, 'current-indicator-color') !important; - background: var-get($theme, 'current-indicator-background') !important; + background: var-get($theme, 'current-indicator-background'); + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'current-indicator-outline') !important; } @include e(title) { @@ -503,7 +549,7 @@ $theme: $material; } &:hover { - background: var-get($theme, 'current-step-hover-background') !important; + background: var-get($theme, 'current-step-hover-background'); @include e(title) { color: var-get($theme, 'current-title-hover-color'); @@ -523,6 +569,7 @@ $theme: $material; @include e(indicator) { color: var-get($theme, 'disabled-indicator-color'); background: var-get($theme, 'disabled-indicator-background'); + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'disabled-indicator-outline'); } @include e(title) { diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss index a33b64cd354..7fcac6e9a62 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss @@ -131,7 +131,6 @@ $_theme: $bootstrap; height: $indicator-size; width: $indicator-size; min-width: $indicator-size; - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); > igx-icon { --size: var(--igx-icon-size, #{rem(18px)}); @@ -151,29 +150,3 @@ $_theme: $bootstrap; } } } - -@include themed-block(igx-step-header, bootstrap) { - @include m(completed) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); - } - } - - @include m(current) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; - } - } - - @include m(invalid) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); - } - } - - @include m(disabled) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); - } - } -} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss index 31dd16ee9aa..634d01cf7dd 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss @@ -118,7 +118,6 @@ $_theme: $fluent; height: $indicator-size; width: $indicator-size; min-width: $indicator-size; - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); > igx-icon { --size: var(--igx-icon-size, #{rem(18px)}); @@ -133,29 +132,3 @@ $_theme: $fluent; } } } - -@include themed-block(igx-step-header, fluent) { - @include m(completed) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); - } - } - - @include m(current) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; - } - } - - @include m(invalid) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); - } - } - - @include m(disabled) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); - } - } -} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss index a010f103ed8..88dab4502d4 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss @@ -126,7 +126,6 @@ $_theme: $indigo; height: $indicator-size; width: $indicator-size; min-width: $indicator-size; - box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'indicator-outline'); > igx-icon { --size: #{var(--igx-icon--size, #{rem(14px)})}; @@ -140,29 +139,3 @@ $_theme: $indigo; } } } - -@include themed-block(igx-step-header, indigo) { - @include m(completed) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'complete-indicator-outline'); - } - } - - @include m(current) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'current-indicator-outline') !important; - } - } - - @include m(invalid) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'invalid-indicator-outline'); - } - } - - @include m(disabled) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'disabled-indicator-outline'); - } - } -} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss index 8c6599363c2..27942f97449 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss @@ -113,7 +113,6 @@ $_theme: $material; height: $indicator-size; width: $indicator-size; min-width: $indicator-size; - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); > igx-icon { --size: var(--igx-icon-size, #{rem(18px)}); @@ -128,29 +127,3 @@ $_theme: $material; } } } - -@include themed-block(igx-step-header, material) { - @include m(completed) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); - } - } - - @include m(current) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; - } - } - - @include m(invalid) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); - } - } - - @include m(disabled) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); - } - } -} diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss index 57bb451173a..40e0dee5cac 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss @@ -6,6 +6,10 @@ $_theme: $material; @include themed-block(igx-tabs, material) { + @include b(igx-tabs-header) { + background: var-get($_theme, 'item-background'); + } + @include b(igx-tabs-header-button) { &:focus { background: var-get($_theme, 'button-hover-background'); From deed22cd98356cfb06092536bb709ff6a14a92b9 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Fri, 28 Nov 2025 10:09:24 +0200 Subject: [PATCH 127/131] refactor(button): refactor button themes to match all repos (#16527) --- .../components/button/_button-theme.scss | 56 ++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index d228e2ec20b..e1a1891d875 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -329,11 +329,9 @@ igx-icon { --component-size: var(--ig-size, var(--ig-size-large)); + --igx-icon-size: #{$icon-in-button-size}; display: flex; justify-content: center; - width: var(--igx-icon-size, #{$icon-in-button-size}); - height: var(--igx-icon-size, #{$icon-in-button-size}); - font-size: var(--igx-icon-size, #{$icon-in-button-size}); transition: $button-transition; } } @@ -441,12 +439,6 @@ @if $variant == 'indigo' { box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color'); - - &:active { - igx-icon { - color: var-get($flat-theme, 'icon-color-hover'); - } - } } &:hover { @@ -461,9 +453,14 @@ &:active { background: var-get($flat-theme, 'focus-background'); color: var-get($flat-theme, 'focus-foreground'); + border-color: var-get($flat-theme, 'focus-border-color'); igx-icon { - color: var-get($flat-theme, 'focus-foreground'); + @if $variant == 'indigo' { + color: var-get($flat-theme, 'icon-color-hover'); + } @else { + color: var-get($flat-theme, 'focus-foreground'); + } } } } @@ -541,10 +538,17 @@ 'focus-visible-border-color' ); - igx-icon { - color: var-get($outlined-theme, 'focus-visible-foreground'); + @if $variant == 'material' or $variant == 'bootstrap' { + igx-icon { + color: var-get($outlined-theme, 'icon-color-hover'); + } + } @else { + igx-icon { + color: var-get($outlined-theme, 'icon-color'); + } } + @if $variant == 'bootstrap' { box-shadow: 0 0 @@ -557,10 +561,6 @@ 0 rem(3px) var-get($outlined-theme, 'shadow-color'); - - igx-icon { - color: var-get($outlined-theme, 'icon-color'); - } } &:hover { @@ -576,14 +576,10 @@ &:active { background: var-get($outlined-theme, 'focus-background'); color: var-get($outlined-theme, 'focus-foreground'); - @if $variant == 'material' { - border-color: var-get($outlined-theme, 'focus-border-color'); + border-color: var-get($outlined-theme, 'focus-border-color'); - igx-icon { - color: var-get($outlined-theme, 'focus-foreground'); - } - } @else { - border-color: var-get($outlined-theme, 'active-border-color'); + igx-icon { + color: var-get($outlined-theme, 'focus-foreground'); } @if $variant == 'indigo' { @@ -617,7 +613,7 @@ background: var-get($contained-theme, 'background'); border-color: var-get($contained-theme, 'border-color'); border-radius: var-get($contained-theme, 'border-radius'); - + @if $variant == 'material' { box-shadow: var-get($contained-theme, 'resting-elevation'); } @@ -630,7 +626,7 @@ color: var-get($contained-theme, 'hover-foreground'); background: var-get($contained-theme, 'hover-background'); border-color: var-get($contained-theme, 'hover-border-color'); - + @if $variant == 'material' { box-shadow: var-get($contained-theme, 'hover-elevation'); } @@ -719,6 +715,11 @@ &:active { color: var-get($contained-theme, 'focus-foreground'); background: var-get($contained-theme, 'focus-background'); + border-color: var-get($contained-theme, 'focus-border-color'); + + igx-icon { + color: var-get($outlined-theme, 'focus-foreground'); + } @if $variant == 'indigo' { igx-icon { @@ -868,11 +869,16 @@ &:active { background: var-get($fab-theme, 'focus-background'); color: var-get($fab-theme, 'focus-foreground'); + border-color: var-get($fab-theme, 'focus-border-color'); @if $variant == 'indigo' { igx-icon { color: var-get($outlined-theme, 'icon-color-hover'); } + } @else { + igx-icon { + color: var-get($outlined-theme, 'focus-foreground'); + } } } } From d2266d2a518372af408ab778dc34014474bb1d93 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Tue, 2 Dec 2025 11:51:22 +0200 Subject: [PATCH 128/131] refactor(grid): bootstrap color enhancement (#16546) --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index a7b9698e900..e524253750a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1004,10 +1004,10 @@ } %igx-icon--error { - @if $variant == 'fluent' and $theme-variant == 'light' or $variant == 'material' and $theme-variant == 'light' { - color: color($color: 'gray', $variant: 600); - } @else { + @if $variant == 'indigo' or $theme-variant == 'dark' { color: color($color: 'gray', $variant: 500); + } @else { + color: color($color: 'gray', $variant: 600); } } } From ce4ac8ab6659e6c503319afc89130d4a834912dd Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 3 Dec 2025 10:19:15 +0200 Subject: [PATCH 129/131] refactor(list): styling discrepancies --- .../src/lib/list/themes/_base.scss | 229 +++++++++++++----- .../lib/list/themes/shared/_bootstrap.scss | 11 +- .../src/lib/list/themes/shared/_fluent.scss | 9 - 3 files changed, 172 insertions(+), 77 deletions(-) diff --git a/projects/igniteui-angular/src/lib/list/themes/_base.scss b/projects/igniteui-angular/src/lib/list/themes/_base.scss index c4d5333ec85..87c08e5291c 100644 --- a/projects/igniteui-angular/src/lib/list/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/list/themes/_base.scss @@ -66,38 +66,6 @@ $theme: $base; --ig-size: 1; } - &:hover { - @include e(lines) { - color: currentColor; - } - - @include e(title) { - color: var-get($theme, 'item-title-color-hover'); - } - - @include e(subtitle) { - color: var-get($theme, 'item-subtitle-color-hover'); - } - - @include e(actions) { - color: var-get($theme, 'item-action-color-hover'); - - igx-icon, - igc-icon { - color: var-get($theme, 'item-action-color-hover'); - } - } - - @include e(thumbnail) { - color: var-get($theme, 'item-thumbnail-color-hover'); - - igx-icon, - igc-icon { - color: var-get($theme, 'item-thumbnail-color-hover'); - } - } - } - @include e(thumbnail) { display: flex; align-items: center; @@ -112,6 +80,11 @@ $theme: $base; --component-size: var(--list-size); } + igx-avatar igx-icon, + igx-avatar igc-icon { + color: var-get($theme, 'item-thumbnail-color'); + } + &:empty { display: none; } @@ -179,12 +152,6 @@ $theme: $base; border-radius: var-get($theme, 'item-border-radius'); z-index: 2; gap: rem(16px); - - &:hover, - &:focus-within { - color: var-get($theme, 'item-text-color-hover'); - background: var-get($theme, 'item-background-hover'); - } } @include e(left) { @@ -210,38 +177,118 @@ $theme: $base; @include m(base) { border-radius: var-get($theme, 'item-border-radius'); - } + border-bottom: var-get($theme, 'border-width') solid + var-get($theme, 'border-color'); - @include m(active) { - @include e(content) { - color: var-get($theme, 'item-text-color-active'); - background: var-get($theme, 'item-background-active'); - z-index: 3; + &:last-of-type { + border-bottom: none; } - @include e(thumbnail) { - color: var-get($theme, 'item-thumbnail-color-active'); + &:hover { + @include e(lines) { + color: currentColor; + } - igx-icon, - igc-icon { - color: var-get($theme, 'item-thumbnail-color-active'); + @include e(content) { + color: var-get($theme, 'item-text-color-hover'); + background: var-get($theme, 'item-background-hover'); } - } - @include e(title) { - color: var-get($theme, 'item-title-color-active'); + @include e(title) { + color: var-get($theme, 'item-title-color-hover'); + } + + @include e(subtitle) { + color: var-get($theme, 'item-subtitle-color-hover'); + } + + @include e(actions) { + color: var-get($theme, 'item-action-color-hover'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-action-color-hover'); + } + } + + @include e(thumbnail) { + color: var-get($theme, 'item-thumbnail-color-hover'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-thumbnail-color-hover'); + } + } } - @include e(subtitle) { - color: var-get($theme, 'item-subtitle-color-active'); + &:focus-within { + @include e(lines) { + color: currentColor; + } + + @include e(content) { + color: var-get($theme, 'item-text-color-hover'); + background: var-get($theme, 'item-background-hover'); + } + + @include e(title) { + color: var-get($theme, 'item-title-color-hover'); + } + + @include e(subtitle) { + color: var-get($theme, 'item-subtitle-color-hover'); + } + + @include e(actions) { + color: var-get($theme, 'item-action-color-hover'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-action-color-hover'); + } + } + + @include e(thumbnail) { + color: var-get($theme, 'item-thumbnail-color-hover'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-thumbnail-color-hover'); + } + } } - @include e(actions) { - color: var-get($theme, 'item-action-color-active'); + &:active { + @include e(content) { + color: var-get($theme, 'item-text-color-active'); + background: var-get($theme, 'item-background-active'); + z-index: 3; + } - igx-icon, - igc-icon { + @include e(thumbnail) { + color: var-get($theme, 'item-thumbnail-color-active'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-thumbnail-color-active'); + } + } + + @include e(title) { + color: var-get($theme, 'item-title-color-active'); + } + + @include e(subtitle) { + color: var-get($theme, 'item-subtitle-color-active'); + } + + @include e(actions) { color: var-get($theme, 'item-action-color-active'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-action-color-active'); + } } } } @@ -278,6 +325,72 @@ $theme: $base; color: var-get($theme, 'item-action-color-selected'); } } + + &:hover { + @include e(content) { + color: var-get($theme, 'item-text-color-selected'); + background: var-get($theme, 'item-background-selected'); + } + + @include e(thumbnail) { + color: var-get($theme, 'item-thumbnail-color-selected'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-thumbnail-color-selected'); + } + } + + @include e(title) { + color: var-get($theme, 'item-title-color-selected'); + } + + @include e(subtitle) { + color: var-get($theme, 'item-subtitle-color-selected'); + } + + @include e(actions) { + color: var-get($theme, 'item-action-color-selected'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-action-color-selected'); + } + } + } + + &:focus-within { + @include e(content) { + color: var-get($theme, 'item-text-color-selected'); + background: var-get($theme, 'item-background-selected'); + } + + @include e(thumbnail) { + color: var-get($theme, 'item-thumbnail-color-selected'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-thumbnail-color-selected'); + } + } + + @include e(title) { + color: var-get($theme, 'item-title-color-selected'); + } + + @include e(subtitle) { + color: var-get($theme, 'item-subtitle-color-selected'); + } + + @include e(actions) { + color: var-get($theme, 'item-action-color-selected'); + + igx-icon, + igc-icon { + color: var-get($theme, 'item-action-color-selected'); + } + } + } } } } diff --git a/projects/igniteui-angular/src/lib/list/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/list/themes/shared/_bootstrap.scss index be2f388f7e2..83c001cff8a 100644 --- a/projects/igniteui-angular/src/lib/list/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/list/themes/shared/_bootstrap.scss @@ -6,7 +6,7 @@ $_theme: $bootstrap; @include themed-block(igx-list, bootstrap) { - border: rem(1px) solid var-get($_theme, 'border-color'); + border: var-get($_theme, 'border-width') solid var-get($_theme, 'border-color'); } @include themed-block(igx-list-item, bootstrap) { @@ -27,13 +27,4 @@ $_theme: $bootstrap; margin: 0; } } - - @include m(base) { - border-bottom: var-get($_theme, 'border-width') solid - var-get($_theme, 'border-color'); - - &:last-of-type { - border-bottom: none; - } - } } diff --git a/projects/igniteui-angular/src/lib/list/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/list/themes/shared/_fluent.scss index 7ae2cecdef2..4274417708d 100644 --- a/projects/igniteui-angular/src/lib/list/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/list/themes/shared/_fluent.scss @@ -23,13 +23,4 @@ $_theme: $fluent; margin: 0; } } - - @include m(base) { - border-bottom: var-get($_theme, 'border-width') solid - var-get($_theme, 'border-color'); - - &:last-of-type { - border-bottom: none; - } - } } From f63317ff1b66c54cd5e0ce86fd54f2217f39850c Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Thu, 11 Dec 2025 10:33:25 +0200 Subject: [PATCH 130/131] [celendar] refactoring the component syles to match the master branch (#16600) --- package.json | 2 +- .../lib/calendar/days-view/themes/_base.scss | 682 ++++++++---- .../days-view/themes/shared/_bootstrap.scss | 379 ++++--- .../days-view/themes/shared/_fluent.scss | 998 +++++++++++++++--- .../days-view/themes/shared/_indigo.scss | 508 ++++----- .../days-view/themes/shared/_material.scss | 308 +----- .../themes/shared/_bootstrap.scss | 18 +- .../years-months/themes/shared/_fluent.scss | 18 +- .../years-months/themes/shared/_material.scss | 18 +- src/app/calendar/calendar.sample.html | 12 + src/app/calendar/calendar.sample.ts | 49 +- 11 files changed, 1852 insertions(+), 1140 deletions(-) diff --git a/package.json b/package.json index 26a20299fe4..d4924b07717 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^23.0.0", + "igniteui-theming": "^23.2.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/_base.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/_base.scss index b88a040fcad..4f1001be1e9 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/_base.scss @@ -7,33 +7,54 @@ $theme: $material; -@include layer(base) { - $border-size: rem(1px); - $cal-picker-padding: rem(16px); - $date-view-row-gap: rem(4px); - $date-size: var-get($theme, 'size'); - $date-inner-size: var-get($theme, 'inner-size'); - $date-height: $date-size; +@mixin range-preview-half($direction) { + background: transparent; + border-block-color: transparent; + + &::after { + content: ''; + position: absolute; + height: var(--_date-size); + #{$direction}: 50%; + border-block-color: var-get($theme, 'date-range-preview-border-color'); + width: calc(50% + #{rem(1px)}); + border-width: var(--_range-border-size); + border-inline-color: transparent; + border-style: var(--_range-border-style); + } +} +@include layer(base) { @include b(igx-days-view) { @include sizable(); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --dropdown-size: var(--component-size); + // PRIVATE VARS + --_date-size: #{var-get($theme, 'size')}; + --_date-inner-size: #{var-get($theme, 'inner-size')}; + --_date-view-row-gap: #{rem(4px)}; + --_calendar-border-size: #{rem(1px)}; + --_date-border-size: #{rem(1px)}; + --_date-border-style: solid; + --_range-border-style: solid; + --_range-border-size: #{rem(1px)}; + --_preview-border-style: dashed; + display: flex; flex-flow: column nowrap; width: 100%; min-width: sizable(rem(290px), rem(314px), rem(360px)); color: var-get($theme, 'content-foreground'); background: var-get($theme, 'content-background'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color'); + box-shadow: 0 0 0 var(--_calendar-border-size) var-get($theme, 'border-color'); border-radius: var-get($theme, 'border-radius'); padding-block: pad-block(rem(16px)); padding-inline: pad-inline(rem(12px)); overflow: hidden; outline: none; - gap: $date-view-row-gap; + gap: var(--_date-view-row-gap); @include type-style(body-1) { font-size: sizable(var(--ig-body-2-font-size), var(--ig-body-2-font-size), var(--ig-body-1-font-size)); @@ -94,18 +115,18 @@ $theme: $material; content: ''; position: absolute; z-index: -1; - height: $date-size; + height: var(--_date-size); width: 50%; color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-range-background'); - border-block: $border-size solid transparent; + border-width: var(--_range-border-size); } &::before { content: ''; position: absolute; - height: $date-size; - width: $date-size; + height: var(--_date-size); + width: var(--_date-size); border-radius: var-get($theme, 'date-border-radius'); } } @@ -113,11 +134,71 @@ $theme: $material; %igx-day-item-range-selected-first-last-inner { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + } + } + + %igx-day-item-range-selected-first-last-inner-focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + } + + %range-border-radius { border-radius: var-get($theme, 'date-range-border-radius'); + } + + %special-selected-firs-last { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } &:hover { color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); + + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } + + %special-selected-firs-last-focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } + + %current-selected-firs-last { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + border-radius: var-get($theme, 'date-current-border-radius'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + + %current-selected-firs-last-focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + + %igx-range-selected-first-last { + &::before { + background: var-get($theme, 'content-background'); } } @@ -128,21 +209,22 @@ $theme: $material; align-items: center; color: inherit; outline: none; - height: $date-size; + height: var(--_date-size); width: 100%; - border-block-start: rem(1px) solid transparent; - border-block-end: rem(1px) solid transparent; + border-block-start: var(--_range-border-size) var(--_date-border-style) transparent; + border-block-end: var(--_range-border-size) var(--_date-border-style) transparent; @include e(inner) { position: relative; display: inline-flex; justify-content: center; align-items: center; - width: $date-size; - min-width: $date-size; - height: $date-height; + width: var(--_date-size); + height: var(--_date-size); + min-width: var(--_date-size); border-radius: var-get($theme, 'date-border-radius'); - border-style: solid; + border-width: var(--_date-border-size); + border-style: var(--_date-border-style); border-color: var-get($theme, 'date-border-color'); z-index: 2; @@ -157,7 +239,7 @@ $theme: $material; content: ''; position: absolute; z-index: 0; - border-style: solid; + border-style: var(--_date-border-style); border-color: transparent; } } @@ -169,7 +251,7 @@ $theme: $material; z-index: 1; min-width: auto; - width: $date-size; + width: var(--_date-size); color: var-get($theme, 'week-number-foreground'); background: var-get($theme, 'week-number-background'); border-color: var-get($theme, 'week-number-background'); @@ -183,14 +265,18 @@ $theme: $material; position: absolute; background: var-get($theme, 'week-number-background'); inset-block-start: 100%; - height: calc($date-view-row-gap + rem(2px)); - width: $date-size; + height: calc(var(--_date-view-row-gap) + #{rem(2px)}); + width: var(--_date-size); } } - @include m(weekend) { + @include m(weekend, $not: ('disabled', 'special', 'selected', 'current', 'first', 'last', 'inactive', 'range', 'active')) { @include e(inner) { color: var-get($theme, 'weekend-color'); + + &:hover { + color: var-get($theme, 'date-hover-foreground'); + } } } @@ -211,35 +297,67 @@ $theme: $material; } } - @include m(inactive) { - cursor: default; - + @include m(inactive, $not: ('disabled', 'special', 'current', 'first', 'last', 'range')) { @include e(inner) { color: var-get($theme, 'inactive-color'); &:hover { - color: var-get($theme, 'inactive-color'); + color: var-get($theme, 'date-hover-foreground'); } } } - @include mx('inactive', 'special') { + @include m(active) { @include e(inner) { - &::after { - border-color: transparent; + color: var-get($theme, 'date-focus-foreground'); + background: var-get($theme, 'date-focus-background'); + border-color: var-get($theme, 'date-focus-border-color'); + } + } + + // SELECTED + @include m(selected) { + @include e(inner) { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); } } } + @include mx('selected', 'active') { + @include e(inner) { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + } + + // selected + disabled do not exist as combination for now + + // CURRENT @include m(current) { @include e(inner) { color: var-get($theme, 'date-current-foreground'); + background: var-get($theme, 'date-current-background'); border-color: var-get($theme, 'date-current-border-color'); + border-radius: var-get($theme, 'date-current-border-radius'); &:hover { color: var-get($theme, 'date-current-hover-foreground'); + background: var-get($theme, 'date-current-hover-background'); border-color: var-get($theme, 'date-current-hover-border-color'); } + + &::after { + width: var(--_date-inner-size); + height: var(--_date-inner-size); + } } } @@ -251,13 +369,124 @@ $theme: $material; } } + // Current + selected + @include mx('current', 'selected') { + @include e(inner) { + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + } + + @include mx('current', 'selected', 'active') { + @include e(inner) { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + + @include mx('current', 'selected', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-current-background') ; + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + } + + @include mx('current', 'selected', 'active', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + + // Current + range + @include mx('current', 'selected', 'first' ) { + @include e(inner) { + @extend %current-selected-firs-last + } + } + + @include mx('current', 'selected', 'first', 'active') { + @include e(inner) { + @extend %current-selected-firs-last-focus + } + } + + @include mx('current', 'selected', 'last') { + @include e(inner) { + @extend %current-selected-firs-last + } + } + + @include mx('current', 'selected', 'last', 'active') { + @include e(inner) { + @extend %current-selected-firs-last-focus + } + } + + @include mx('current', 'first', 'last') { + @include e(inner) { + @extend %current-selected-firs-last + } + } + + @include mx('current', 'first', 'last', 'active') { + @include e(inner) { + @extend %current-selected-firs-last-focus + } + } + + @include mx('current', 'range', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + } + + @include mx('current', 'range', 'active', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + + @include mx('current', 'disabled') { + @include e(inner) { + color: var-get($theme, 'date-current-foreground'); + opacity: .38; + } + } + + // SPECIAL @include m(special) { @include e(inner) { color: var-get($theme, 'date-special-foreground'); background: var-get($theme, 'date-special-background'); + border-radius: var-get($theme, 'date-special-border-radius'); &::after { + width: var(--_date-size); + height: var(--_date-size); + border-width: var(--_date-border-size); border-color: var-get($theme, 'date-special-border-color'); + border-radius: var-get($theme, 'date-special-border-radius'); } &:hover { @@ -279,340 +508,340 @@ $theme: $material; color: var-get($theme, 'date-special-focus-foreground'); &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + border-color: var-get($theme, 'date-special-focus-border-color'); } } } - @include m(active) { + // Special + selected + @include mx('special', 'selected') { @include e(inner) { - color: var-get($theme, 'date-focus-foreground'); - background: var-get($theme, 'date-focus-background'); - border-color: var-get($theme, 'date-focus-border-color'); - } - } - - @include m(selected) { - @include e(inner) { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - border-color: var-get($theme, 'date-selected-border-color'); - - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - border-color: var-get($theme, 'date-selected-hover-border-color'); + &::after { + width: var(--_date-inner-size); + height: var(--_date-inner-size); } } } - @include mx('selected', 'active') { + @include mx('special', 'selected', ('not': ('first', 'last'))) { @include e(inner) { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - border-color: var-get($theme, 'date-selected-focus-border-color'); - } - } + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); - @include mx('selected', 'special') { - @include e(inner) { &::after { border-color: var-get($theme, 'date-selected-special-border-color'); } &:hover { - /* stylelint-disable max-nesting-depth */ + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); + &::after { border-color: var-get($theme, 'date-selected-special-hover-border-color'); } - /* stylelint-enable max-nesting-depth */ } } } - @include mx('selected', 'special', 'active') { + @include mx('special', 'selected', 'active', ('not': ('first', 'last'))) { @include e(inner) { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); + &::after { border-color: var-get($theme, 'date-selected-special-focus-border-color'); } } } - @include mx('selected', 'special','range', ('not': ('first', 'last'))) { + @include mx('special', 'selected', 'first') { @include e(inner) { - color: var-get($theme, 'date-special-range-foreground'); - background: var-get($theme, 'date-special-range-background'); - - &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); - } + @extend %special-selected-firs-last; } } - @include mx('selected', 'special', 'active', 'range') { + @include mx('special', 'selected', 'first', 'active') { @include e(inner) { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-special-range-focus-background'); - - &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); - } - - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); - } + @extend %special-selected-firs-last-focus; } } - @include m(hidden) { - cursor: default; - visibility: hidden; + @include mx('special', 'selected', 'last') { + @include e(inner) { + @extend %special-selected-firs-last; + } } - @include m('range') { - border-top-color: var-get($theme, 'date-range-border-color'); - border-bottom-color: var-get($theme, 'date-range-border-color'); - background: var-get($theme, 'date-selected-range-background'); - - &:hover { - border-top-color: var-get($theme, 'date-range-border-color'); - border-bottom-color: var-get($theme, 'date-range-border-color'); + @include mx('special', 'selected', 'last', 'active') { + @include e(inner) { + @extend %special-selected-firs-last-focus; } + } + @include mx('special', 'selected', 'first', 'last') { @include e(inner) { - background: transparent; - color: var-get($theme, 'date-selected-range-foreground'); + @extend %special-selected-firs-last; } } - @include m(range-preview) { - position: relative; - border-block-color: var-get($theme, 'date-range-preview-border-color'); - + @include mx('special', 'selected', 'first', 'last', 'active') { @include e(inner) { - color: var-get($theme, 'date-selected-range-foreground'); + @extend %special-selected-firs-last-focus; } } - @include mx('range-preview', 'current') { + // Special + range + @include mx('special', 'range', ('not': ('first', 'last'))) { @include e(inner) { - color: var-get($theme, 'date-selected-current-range-foreground'); + color: var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-special-range-background'); + + &::after { + border-color: var-get($theme, 'date-special-range-border-color'); + } + + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); + + &::after { + border-color: var-get($theme, 'date-special-range-hover-border-color'); + } + } } } - @include mx('range-preview', 'special') { + @include mx('special', 'range', 'active', ('not': ('first', 'last'))) { @include e(inner) { - color: var-get($theme, 'date-special-foreground'); + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-special-range-focus-background'); + + &::after { + border-color: var-get($theme, 'date-special-range-focus-border-color'); + } } } - @include mx('range', 'selected') { - &::after { - border-block: $border-size solid var-get($theme, 'date-range-border-color'); + @include mx('special', 'range', ('not': ('first', 'last', 'current'))) { + @include e(inner) { + border-color: transparent; + + &::after { + width: var(--_date-size); + height: var(--_date-size); + } } + } + @include mx('special', 'disabled') { @include e(inner) { - &:hover { - background: var-get($theme, 'date-selected-range-hover-background'); - color: var-get($theme, 'date-selected-range-hover-foreground'); - } + color: var-get($theme, 'date-special-range-foreground'); + opacity: .38; } } - @include mx('range', 'selected', 'active') { + // SPECIAL + CURRENT + @include mx('special', 'current') { @include e(inner) { - color: var-get($theme, 'date-selected-range-focus-foreground'); - background: var-get($theme, 'date-selected-range-focus-background'); + &::after { + width: var(--_date-inner-size); + height: var(--_date-inner-size); + } } } - @include mx('range', 'selected', 'current', ('not': ('first', 'last'))) { + @include mx('special', 'current', 'selected') { @include e(inner) { - color: var-get($theme, 'date-selected-current-range-foreground'); - background: var-get($theme, 'date-selected-current-range-background'); + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } &:hover { - color: var-get($theme, 'date-selected-current-range-hover-foreground'); - background: var-get($theme, 'date-selected-current-range-hover-background'); + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + /* stylelint-enable max-nesting-depth */ } } } - @include mx('range', 'selected', 'current', 'active') { + @include mx('special', 'current', 'selected', 'active') { @include e(inner) { - color: var-get($theme, 'date-selected-current-range-focus-foreground'); - background: var-get($theme, 'date-selected-current-range-focus-background'); + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } } } - @include mx('range', 'selected', 'first') { - @extend %igx-day-item-range-selected-first-last; + @include mx('current', 'special', 'selected', 'first' ) { + @include e(inner) { + @extend %current-selected-firs-last + } + } + @include mx('current', 'special', 'selected', 'first', 'active') { @include e(inner) { - @extend %igx-day-item-range-selected-first-last-inner; + @extend %current-selected-firs-last-focus } } - @include mx('range', 'selected', 'last') { - @extend %igx-day-item-range-selected-first-last; + @include mx('current', 'special', 'selected', 'last') { + @include e(inner) { + @extend %current-selected-firs-last + } + } + @include mx('current', 'special', 'selected', 'last', 'active') { @include e(inner) { - @extend %igx-day-item-range-selected-first-last-inner; + @extend %current-selected-firs-last-focus } } - @include mx('selected', 'special', 'current', 'preview', 'first') { + @include mx('current', 'special', 'first', 'last') { @include e(inner) { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } + @extend %current-selected-firs-last } } - @include mx('selected', 'special', 'current', 'preview', 'last') { + @include mx('current', 'special', 'first', 'last', 'active') { @include e(inner) { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } + @extend %current-selected-firs-last-focus } } - @include mx('current', 'range') { + // RANGE + @include m('range') { + border-top-color: var-get($theme, 'date-range-border-color'); + border-bottom-color: var-get($theme, 'date-range-border-color'); + background: var-get($theme, 'date-selected-range-background'); + + &:hover { + border-top-color: var-get($theme, 'date-range-border-color'); + border-bottom-color: var-get($theme, 'date-range-border-color'); + } + @include e(inner) { - color: var-get($theme, 'date-current-foreground'); + background: transparent; + color: var-get($theme, 'date-selected-range-foreground'); } } - @include mx('current', 'selected') { + @include m('range', $not: ('first', 'last', 'current', 'special')) { @include e(inner) { - color: var-get($theme, 'date-selected-current-foreground'); - background: var-get($theme, 'date-selected-current-background') ; - border-color: var-get($theme, 'date-selected-current-border-color'); + border-color: transparent; + } + } + @include mx('range', 'selected') { + @include e(inner) { &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); - border-color: var-get($theme, 'date-selected-current-hover-border-color'); + background: var-get($theme, 'date-selected-range-hover-background'); + color: var-get($theme, 'date-selected-range-hover-foreground'); } } + + &::after { + border-block: var(--_date-border-size) var(--_range-border-style) var-get($theme, 'date-range-border-color'); + } } - @include mx('current', 'selected', 'active') { + @include mx('range', 'selected', 'active') { @include e(inner) { - color: var-get($theme, 'date-selected-current-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); - border-color: var-get($theme, 'date-selected-current-focus-border-color'); + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); } } - @include mx('special', 'current', 'selected', 'active') { + @include m('first', $not: ('current', 'special')) { @include e(inner) { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } + @extend %range-border-radius; } } - @include m(first) { - &::after { - inset-inline-start: 50%; + @include m('last', $not: ('current', 'special')) { + @include e(inner) { + @extend %range-border-radius; } } - @include mx('first', 'range-preview') { - background: transparent; - border-block-color: transparent; - - &::after { - content: ''; - position: absolute; - height: $date-size; - width: 50%; - inset-inline-start: 50%; - border-block-color: var-get($theme, 'date-range-preview-border-color'); + @include mx('first', 'last', ('not': ('current', 'special'))) { + @include e(inner) { + @extend %range-border-radius; } } - @include mx('last', 'range-preview') { - background: transparent; - border-block-color: transparent ; + @include mx('range', 'selected', 'first') { + @extend %igx-day-item-range-selected-first-last; - &::after { - content: ''; - position: absolute; - height: $date-size; - width: 50%; - inset-inline-end: 50%; - border-block-color: var-get($theme, 'date-range-preview-border-color'); + @include e(inner) { + @extend %igx-day-item-range-selected-first-last-inner; } } - @include mx('first', 'range-preview', 'selected') { + @include mx('range', 'selected', 'last') { + @extend %igx-day-item-range-selected-first-last; + @include e(inner) { - color: var-get($theme, 'date-selected-foreground'); + @extend %igx-day-item-range-selected-first-last-inner; } } - @include mx('last', 'range-preview', 'selected') { + @include mx('range', 'selected', 'first', 'active') { @include e(inner) { - color: var-get($theme, 'date-selected-foreground'); + @extend %igx-day-item-range-selected-first-last-inner-focus; } } - @include mx('range', 'selected', 'special', 'first') { + @include mx('range', 'selected', 'last', 'active') { @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($theme, 'date-selected-special-border-color'); - } + @extend %igx-day-item-range-selected-first-last-inner-focus; } } - @include mx('range', 'selected', 'special', 'last') { + // PREVIEW + @include m(range-preview) { + position: relative; + border-block-style: var(--_preview-border-style); + border-block-color: var-get($theme, 'date-range-preview-border-color'); + } + + @include m(range-preview, $not: ('first', 'last', 'current')) { @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($theme, 'date-selected-special-border-color'); - } + border-color: transparent; } } - @include mx('range', 'selected', 'active', 'first') { - @include e(inner) { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); + @include mx('range-preview', 'first') { + @include range-preview-half('inset-inline-start'); + } - &:hover { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - } - } + @include mx('range-preview', 'last') { + @include range-preview-half('inset-inline-end'); } - @include mx('range', 'selected', 'active', 'last') { + @include mx('range-preview', 'selected', 'first', ('not': 'active')) { @include e(inner) { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - - &:hover { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); + &:not(:hover) { + color: var-get($theme, 'date-selected-foreground'); } } } - @include mx('selected', 'special', 'current', 'first', 'last') { + @include mx('range-preview', 'selected', 'last', ('not': 'active')) { @include e(inner) { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); + &:not(:hover) { + color: var-get($theme, 'date-selected-foreground'); } } } + @include m(first) { + &::after { + inset-inline-start: 50%; + } + } + @include m(last) { &::after { inset-inline-end: 50%; @@ -634,20 +863,6 @@ $theme: $material; } } - @include mx('disabled', 'current') { - @include e(inner) { - color: var-get($theme, 'date-current-foreground'); - opacity: .38; - } - } - - @include mx('disabled', 'special') { - @include e(inner) { - color: var-get($theme, 'date-special-range-foreground'); - opacity: .38; - } - } - @include mx('disabled', 'selected', ('not': 'range')) { @include e(inner) { color: var-get($theme, 'date-selected-foreground'); @@ -662,16 +877,25 @@ $theme: $material; } @include mx('range', 'selected', 'first', 'disabled') { + @extend %igx-range-selected-first-last; + @include e(inner) { opacity: .38; } } @include mx('range', 'selected', 'last', 'disabled') { + @extend %igx-range-selected-first-last; + @include e(inner) { opacity: .38; } } + + @include m(hidden) { + cursor: default; + visibility: hidden; + } } @include b(igx-day-label) { @@ -680,8 +904,8 @@ $theme: $material; justify-content: center; align-items: center; outline: none; - height: $date-size; - min-width: $date-size; + height: var(--_date-size); + min-width: var(--_date-size); width: 100%; border-block-start: rem(1px) solid transparent; border-block-end: rem(1px) solid transparent; @@ -713,8 +937,8 @@ $theme: $material; display: flex; justify-content: center; align-items: center; - width: $date-size; - height: $date-height; + width: var(--_date-size); + height: var(--_date-size); position: relative; border-top-left-radius: var-get($theme, 'week-number-border-radius'); border-top-right-radius: var-get($theme, 'week-number-border-radius'); diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss index 6d0c7af4dae..3fb39730f7c 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss @@ -67,282 +67,403 @@ $_theme: $bootstrap; } @include themed-block(igx-day-item, bootstrap) { - $cal-picker-padding: rem(8px); - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); - $date-height: $date-size; - $border-size: rem(1px); + // special + @include m('special') { + @include e(inner) { + border-radius: var-get($_theme, 'date-border-radius'); - @include e(inner) { - border-width: $border-size; + &::after { + border-radius: var-get($_theme, 'date-special-border-radius'); + } + } + } - &::after { - border-width: $border-size; - border-radius: inherit; - width: $date-size; - height: $date-size; + @include mx('special', 'first') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include e(inner, 'week-number') { - // Important is needed in order to override the typography styles - font-style: italic !important; + @include mx('special', 'last') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); + } } - @include m('selected') { + @include mx('special', 'range', ('not': ('range-preview', 'current', 'first', 'last'))) { @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; + border-color: transparent; + + &:hover { + border-color: var-get($_theme, 'date-hover-border-color'); } } } - @include mx('selected', 'range') { + @include mx('special', 'range', 'active', ('not': ('range-preview', 'current', 'first', 'last'))) { @include e(inner) { - &::after { - width: $date-size; - height: $date-size; - } + border-color: var-get($_theme, 'date-focus-border-color'); } } - @include mx('selected', 'special','range') { + // current + @include mx('current', 'first', 'last') { @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-special-border-color'); - } + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include mx('selected', 'special', 'active', 'range', ('not': ('first', 'last'))) { + @include mx('current', 'special', ('not': ('first', 'last'))) { @include e(inner) { + color: var-get($_theme, 'date-current-foreground'); + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + border-radius: var-get($_theme, 'date-current-border-radius'); + + &:hover { + color: var-get($_theme, 'date-current-hover-foreground'); + background: var-get($_theme, 'date-current-hover-background'); + border-color: var-get($_theme, 'date-current-hover-border-color'); + } + &::after { - border-color: var-get($_theme, 'date-special-border-color'); + width: var-get($_theme, 'inner-size'); + height: var-get($_theme, 'inner-size'); } } } - @include m('range') { + @include mx('current', 'special', 'active', ('not': ('first', 'last'))) { @include e(inner) { - height: $date-size; + color: var-get($_theme, 'date-current-focus-foreground'); + background: var-get($_theme, 'date-current-focus-background'); + border-color: var-get($_theme, 'date-current-focus-border-color'); } } - @include m('range-preview') { - background: var-get($_theme, 'date-selected-range-background'); - - &::after { - background: var-get($_theme, 'date-selected-range-background'); - } - + @include mx('current', 'special', 'range', ('not': ('first', 'last'))) { @include e(inner) { + color: var-get($_theme, 'date-selected-current-range-foreground'); + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); + &:hover { - color: var-get($_theme, 'date-selected-foreground'); + color: var-get($_theme, 'date-selected-current-range-hover-foreground'); + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include mx('range-preview', 'current') { + @include mx('current', 'special', 'range', 'active', ('not': ('first', 'last'))) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); - background: var-get($_theme, 'date-selected-current-range-background'); + color: var-get($_theme, 'date-selected-current-range-focus-foreground'); + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include mx('range', 'selected') { + @include mx('current', 'special', 'selected', ('not': ('range', 'first', 'last'))) { @include e(inner) { - border-inline-color: transparent; + color: var-get($_theme, 'date-selected-current-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + + &:hover { + color: var-get($_theme, 'date-selected-current-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + } } } - @include mx('range', 'selected', 'first') { - &::after { - border-width: $border-size; + @include mx('current', 'special', 'selected', 'active', ('not': ('range', 'first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); } } - @include mx('range', 'selected', 'last') { + // range-preview + @include m('range-preview') { + color: var-get($_theme, 'date-selected-range-foreground'); + background: var-get($_theme, 'date-selected-range-background'); + border-block-style: solid; + &::after { - border-width: $border-size; + background: var-get($_theme, 'date-selected-range-background'); } - } - @include mx('range', 'selected', 'special', 'first', 'last') { @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: transparent; + + &:hover { + color: var-get($_theme, 'date-selected-range-foreground'); + border-color: transparent; } } } - @include mx('range', 'selected', 'current') { + @include mx('range-preview', 'first') { + background: transparent; + + &::after { + width: 50%; + border-style: solid; + border-inline: 0; + } + @include e(inner) { - border-color: var-get($_theme, 'date-selected-current-border-color'); + color: var-get($_theme, 'date-selected-foreground'); + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); &:hover { - border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + color: var-get($_theme, 'date-selected-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-hover-border-color'); + } + + &::after { + width: var-get($_theme, 'inner-size'); + height: var-get($_theme, 'inner-size'); } } } - @include mx('range', 'selected', 'current', 'active') { - @include e(inner) { - border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + @include mx('range-preview', 'last') { + background: transparent; + + &::after { + width: 50%; + border-style: solid; + border-inline: 0; } - } - @include mx('range', 'selected', 'current', 'special') { @include e(inner) { - color: var-get($_theme, 'date-special-range-foreground'); + color: var-get($_theme, 'date-selected-foreground'); + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); &:hover { - color: var-get($_theme, 'date-special-hover-foreground'); - - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } + color: var-get($_theme, 'date-selected-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-hover-border-color'); } &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-special-range-border-color'); + width: var-get($_theme, 'inner-size'); + height: var-get($_theme, 'inner-size'); } } } - @include mx('range', 'selected', 'current', 'first', 'special') { + @include mx('range-preview', 'first', 'last') { @include e(inner) { color: var-get($_theme, 'date-selected-foreground'); - - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include mx('range', 'selected', 'current', 'last', 'special') { + @include mx('range-preview', 'first', 'active') { @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); + color: var-get($_theme, 'date-selected-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-focus-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } + @include mx('range-preview', 'last', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-focus-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include m('current') { + // range-preview + current + @include mx('range-preview', 'current') { @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } + color: var-get($_theme, 'date-current-foreground'); + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + &:hover { + color: var-get($_theme, 'date-current-hover-foreground'); + background: var-get($_theme, 'date-current-hover-background'); + } } } - @include m('special') { + @include mx('range-preview', 'current', 'active') { @include e(inner) { - &::after { - border-radius: $date-size; - } + color: var-get($_theme, 'date-current-focus-foreground'); + background: var-get($_theme, 'date-current-focus-background'); } } - @include mx('first', 'range-preview') { - background: transparent; + @include mx('range-preview', 'current', 'first') { + @include e(inner) { + color: var-get($_theme, 'date-selected-foreground'); + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); - &::after { - width: 50%; - border-width: $border-size; - border-inline: 0; - border-style: solid; + &:hover { + color: var-get($_theme, 'date-selected-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + } } + } + @include mx('range-preview', 'current', 'last') { @include e(inner) { color: var-get($_theme, 'date-selected-foreground'); background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); + + &:hover { + color: var-get($_theme, 'date-selected-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + } } } - @include mx('last', 'range-preview') { - background: transparent; - - &::after { - width: 50%; - border-width: $border-size; - border-inline: 0; - border-style: solid; + @include mx('range-preview', 'current', 'active', 'first') { + @include e(inner) { + color: var-get($_theme, 'date-selected-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } + } + @include mx('range-preview', 'current', 'active', 'last') { @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - background: var-get($_theme, 'date-selected-background'); + color: var-get($_theme, 'date-selected-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include mx('first', 'range-preview', 'special') { + // range-preview + special + @include mx('range-preview', 'special', 'first') { @include e(inner) { &::after { width: var-get($_theme, 'inner-size'); height: var-get($_theme, 'inner-size'); - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: var-get($_theme, 'date-selected-special-border-color'); + } + + &:hover { + &::after { + border-color: var-get($_theme, 'date-selected-special-hover-border-color'); + } } } } - @include mx('last', 'range-preview', 'special') { + @include mx('range-preview', 'special', 'last') { @include e(inner) { &::after { width: var-get($_theme, 'inner-size'); height: var-get($_theme, 'inner-size'); - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: var-get($_theme, 'date-selected-special-border-color'); + } + + &:hover { + &::after { + border-color: var-get($_theme, 'date-selected-special-hover-border-color'); + } } } } - @include mx('first', 'range', 'special') { + @include mx('range-preview', 'special', 'active', 'first') { @include e(inner) { &::after { - width: var-get($_theme, 'inner-size'); - height: var-get($_theme, 'inner-size'); - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); } } } - @include mx('last', 'range', 'special') { + @include mx('range-preview', 'special', 'active', 'last') { @include e(inner) { &::after { - width: var-get($_theme, 'inner-size'); - height: var-get($_theme, 'inner-size'); - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); } } } - @include mx('disabled', 'range-preview') { + // range-preview + weekend + @include mx('range-preview', 'weekend', ('not': ('special', 'current', 'first', 'last'))) { @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); + color: var-get($_theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($_theme, 'date-selected-range-hover-foreground'); + } } } - @include mx('disabled', 'special', 'range') { + @include mx('range-preview', 'weekend', 'active', ('not': ('special', 'current', 'first', 'last'))) { @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); + color: var-get($_theme, 'date-selected-range-focus-foreground'); + } + } + + // range-preview + inactive + @include mx('range-preview', 'inactive', ('not': ('special', 'current', 'first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($_theme, 'date-selected-range-hover-foreground'); + } + } + } + + @include mx('range-preview', 'inactive', 'active', ('not': ('special', 'current', 'first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-range-focus-foreground'); + } + } + + // range + current + @include mx('range', 'current', 'first') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include mx('range', 'selected', 'first', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); + @include mx('range', 'current', 'last') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + // range + special + @include mx('range', 'special', 'first') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include mx('range', 'selected', 'last', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); + // range + special + @include mx('range', 'special', 'last') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + // disabled + range-preview + @include mx('disabled', 'range-preview', ('not': ('special', 'current', 'first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-disabled-range-foreground'); } } } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_fluent.scss index d62f967135c..80bb1bad509 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_fluent.scss @@ -8,329 +8,1029 @@ $_theme: $fluent; +@include themed-block(igx-days-row, fluent) { + height: var(--_date-size); + + &:nth-child(2) { + @include e(day, $m: week-number) { + border-start-start-radius: var-get($_theme, 'week-number-border-radius'); + border-start-end-radius: var-get($_theme, 'week-number-border-radius'); + } + } +} + @include themed-block(igx-day-item, fluent) { - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); - $date-height: $date-size; - $border-size: rem(1px); + --_preview-border-style: solid; - @include e(inner) { - border-width: $border-size; + $fake-bg-size: calc(50% + (var(--_date-size) / 2)); + $fake-bg-position: #{calc(50% - (var(--_date-size) / 2))}; - &::after { - border-width: $border-size; - border-radius: 50%; - width: $date-inner-size; - height: $date-inner-size; + // CURRENT + @include m(current) { + @include e(inner) { + background: transparent; + border-color: var-get($_theme, 'date-border-color'); + border-radius: var-get($_theme, 'date-border-radius'); + + &::before { + content: ''; + position: absolute; + border: var(--_date-border-size) var(--_date-border-style) var-get($_theme, 'date-current-border-color'); + box-sizing: border-box; + width: var(--_date-inner-size); + height: var(--_date-inner-size); + background: var-get($_theme, 'date-current-background'); + border-radius: var-get($_theme, 'date-current-border-radius'); + z-index: -1; + } + + &:hover { + background: var-get($_theme, 'date-hover-background'); + border-color: var-get($_theme, 'date-hover-border-color'); + + &::before { + background: var-get($_theme, 'date-current-hover-background'); + border-color: var-get($_theme, 'date-current-hover-border-color'); + } + } } } - @include mx('selected', 'range') { + @include mx('current', 'active') { @include e(inner) { + background: var-get($_theme, 'date-focus-background'); + border-color: var-get($_theme, 'date-focus-border-color'); + + &::before { + background: var-get($_theme, 'date-current-focus-background'); + border-color: var-get($_theme, 'date-current-focus-border-color'); + } + } + } + + // CURRENT + SELECTED + @include mx('current', 'selected') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-foreground'); + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + + &::before { + border-color: var-get($_theme, 'date-selected-current-border-color'); + background: var-get($_theme, 'date-selected-current-background'); + } + + &:hover { + color: var-get($_theme, 'date-selected-current-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-hover-border-color'); + + &::before { + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + background: var-get($_theme, 'date-selected-current-hover-background'); + } + } + } + } + + @include mx('current', 'selected', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-focus-border-color'); + + &::before { + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + background: var-get($_theme, 'date-selected-current-focus-background'); + } + } + } + + // SPECIAL + @include m(special) { + @include e(inner) { + background: transparent; + border-color: var-get($_theme, 'date-border-color'); + border-radius: var-get($_theme, 'date-border-radius'); + &::after { - width: $date-inner-size; - height: $date-inner-size; + width: var(--_date-inner-size); + height: var(--_date-inner-size); + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + border-radius: var-get($_theme, 'date-special-border-radius'); + z-index: -1; + } + + &:hover { + background: var-get($_theme, 'date-hover-background'); + border-color: var-get($_theme, 'date-hover-border-color'); + + &::after { + background: var-get($_theme, 'date-special-hover-background'); + border-color: var-get($_theme, 'date-special-hover-border-color'); + } } } } - @include m('range') { + @include mx('special', 'active') { @include e(inner) { - height: 100%; + background: var-get($_theme, 'date-focus-background'); + border-color: var-get($_theme, 'date-focus-border-color'); + + &::after { + background: var-get($_theme, 'date-special-focus-background'); + border-color: var-get($_theme, 'date-special-focus-border-color'); + } } } - @include mx('range-preview', 'special', 'current') { + // SPECIAL + SELECTED + @include mx('special', 'selected') { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + + &::after { + background: var-get($_theme, 'date-selected-special-background'); + border-color: var-get($_theme, 'date-selected-special-border-color'); + border-radius: var-get($_theme, 'date-special-border-radius'); + } + + &:hover { + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-hover-border-color'); + + &::after { + background: var-get($_theme, 'date-selected-special-hover-background'); + border-color: var-get($_theme, 'date-selected-special-hover-border-color'); + } + } } } - @include mx('range', 'selected') { + @include mx('special', 'selected', 'active') { @include e(inner) { - border-color: transparent !important; + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-focus-border-color'); + + &::after { + background: var-get($_theme, 'date-selected-special-focus-background'); + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); + } } } - @include mx('range', 'selected', 'first') { + // CURRENT + SPECIAL + @include mx('current', 'special') { + @include e(inner) { + color: var-get($_theme, 'date-current-foreground'); + + &::after { + width: calc(var(--_date-inner-size) - #{rem(4px)}); + height: calc(var(--_date-inner-size) - #{rem(4px)}); + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + border-radius: var-get($_theme, 'date-current-border-radius'); + } + + &:hover { + color: var-get($_theme, 'date-current-hover-foreground'); + + &::after { + background: var-get($_theme, 'date-current-hover-background'); + border-color: var-get($_theme, 'date-current-hover-foreground'); + } + } + } + } + + @include mx('current', 'special', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-current-focus-foreground'); + + &::after { + background: var-get($_theme, 'date-current-focus-background'); + border-color: var-get($_theme, 'date-current-focus-foreground'); + } + } + } + + // CURRENT + SPECIAL + SELECTED + @include mx('current', 'special', 'selected') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-foreground'); + + &::after { + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-foreground'); + } + + &:hover { + color: var-get($_theme, 'date-selected-current-hover-foreground'); + + &::after { + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-foreground'); + } + } + } + } + + @include mx('current', 'special', 'selected', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + + &::after { + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-foreground'); + } + } + } + + // CURRENT + SPECIAL + SELECTED + RANGE-PREVIEW + FIRST/LAST + @include mx('current', 'special', 'selected', 'range-preview', 'first') { + @include e(inner) { + &:hover { + color: var-get($_theme, 'date-current-foreground'); + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + } + + @include mx('current', 'special', 'selected', 'range-preview', 'last') { + @include e(inner) { + &:hover { + color: var-get($_theme, 'date-current-foreground'); + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + } + + // FIRST + LAST (not current, not special) + @include mx('first', 'last', ('not': ('current', 'special'))) { + @include e(inner) { + color: inherit; + background: transparent; + border-color: var-get($_theme, 'date-range-preview-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); + + &:hover { + border-color: var-get($_theme, 'date-range-preview-border-color'); + } + } + } + + @include mx('first', 'last', 'active', ('not': ('current', 'special'))) { + @include e(inner) { + border-color: var-get($_theme, 'date-range-preview-border-color'); + } + } + + // RANGE + @include m(range) { + background: var-get($_theme, 'date-selected-range-background'); + border-block-color: var-get($_theme, 'date-range-border-color'); + + @include e(inner) { + height: 100%; + } + } + + @include mx('range', 'first') { + &::before, + &::after { + height: var(--_date-size); + width: $fake-bg-size; + } + &::before { content: ''; position: absolute; - height: $date-size; - width: $date-size; - border: $border-size solid var-get($_theme, 'date-range-border-color'); + width: var(--_date-size); z-index: 3; - pointer-events: none; - border-inline-end-color: transparent; - border-start-start-radius: var-get($_theme, 'date-range-border-radius'); - border-end-start-radius: var-get($_theme, 'date-range-border-radius'); - border-start-end-radius: 0; - border-end-end-radius: 0; + pointer-events: none; + inset-inline-end: initial; + border-block: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + border-start-start-radius: var-get($_theme, 'date-range-border-radius'); + border-end-start-radius: var-get($_theme, 'date-range-border-radius'); + border-start-end-radius: 0; + border-end-end-radius: 0; } &::after { - border-block-color: var-get($_theme, 'date-range-border-color'); - border-width: $border-size; + background: var-get($_theme, 'date-selected-range-background'); + border-block: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + inset-inline-start: $fake-bg-position; + border-start-start-radius: var-get($_theme, 'date-range-border-radius'); + border-end-start-radius: var-get($_theme, 'date-range-border-radius'); + border-inline-end: 0; + } + + @include e(inner) { + background: transparent; + border-color: transparent; + + &:hover { + border-color: transparent; + } } - - @include e(inner) { - border-start-end-radius: var-get($_theme, 'date-border-radius'); - border-end-end-radius: var-get($_theme, 'date-border-radius'); - } } - @include mx('range', 'selected', 'last') { + @include mx('range', 'last') { + &::before, + &::after { + height: var(--_date-size); + width: $fake-bg-size; + } + &::before { content: ''; position: absolute; - height: $date-size; - width: $date-size; - border: $border-size solid var-get($_theme, 'date-range-border-color'); + width: var(--_date-size); z-index: 3; - pointer-events: none; - border-inline-start-color: transparent; - border-start-end-radius: var-get($_theme, 'date-range-border-radius'); - border-end-end-radius: var-get($_theme, 'date-range-border-radius'); - border-start-start-radius: 0; - border-end-start-radius: 0; + pointer-events: none; + inset-inline-start: initial; + border-block: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + border-start-end-radius: var-get($_theme, 'date-range-border-radius'); + border-end-end-radius: var-get($_theme, 'date-range-border-radius'); + border-start-start-radius: 0; + border-end-start-radius: 0; } &::after { - border-block-color: var-get($_theme, 'date-range-border-color'); - border-width: $border-size; + background: var-get($_theme, 'date-selected-range-background'); + border-block: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + inset-inline-end: $fake-bg-position; + border-start-end-radius: var-get($_theme, 'date-range-border-radius'); + border-end-end-radius: var-get($_theme, 'date-range-border-radius'); + border-inline-start: 0; } - - @include e(inner) { - border-start-start-radius: var-get($_theme, 'date-border-radius'); - border-end-start-radius: var-get($_theme, 'date-border-radius'); - } - } - @include mx('first', 'last') { @include e(inner) { background: transparent; - border-radius: var-get($_theme, 'date-range-border-radius'); + border-color: transparent; + + &:hover { + border-color: transparent; + } } } - @include mx('range', 'selected', 'current', 'first') { + // RANGE-PREVIEW + @include mx('range-preview') { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + background: transparent; + border-color: transparent; &:hover { - color: var-get($_theme, 'date-selected-current-range-foreground'); + background: transparent; + border-color: transparent; } } } - @include mx('range', 'selected', 'current', 'last') { + @include mx('range-preview', ('not': ('disabled', 'inactive', 'weekend'))) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: inherit; + } + } + + @include mx('range-preview', 'inactive', ('not': 'current')) { + @include e(inner) { + color: var-get($_theme, 'inactive-color'); &:hover { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: var-get($_theme, 'inactive-color'); } } } - @include mx('range', 'selected', 'current', 'special') { + @include mx('range-preview', 'weekend', ('not': ('current', 'special', 'inactive', 'disabled'))) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: var-get($_theme, 'weekend-color'); &:hover { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: var-get($_theme, 'weekend-color'); } + } + } + @include mx('range-preview', ('not': ('first', 'last', 'current', 'special'))) { + @include e(inner) { + border-color: transparent; + } + } + + @include mx('range-preview', 'first') { + color: inherit; + border-block-color: transparent; + + &::before, + &::after { + height: var(--_date-size); + width: $fake-bg-size; + } + + &::before { + content: ''; + position: absolute; + width: var(--_date-size); + z-index: 3; + pointer-events: none; + inset-inline-end: initial; + border-start-start-radius: var-get($_theme, 'date-range-border-radius'); + border-end-start-radius: var-get($_theme, 'date-range-border-radius'); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + + &::after { + background: transparent !important; + border-style: var(--_preview-border-style); + border-color: var-get($_theme, 'date-range-preview-border-color'); + inset-inline-start: $fake-bg-position; + border-start-start-radius: var-get($_theme, 'date-range-border-radius'); + border-end-start-radius: var-get($_theme, 'date-range-border-radius'); + border-inline-end: 0; + } + + @include e(inner) { + border-color: transparent; + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + @include mx('range-preview', 'last') { + color: inherit; + border-block-color: transparent; + + &::before, + &::after { + height: var(--_date-size); + width: $fake-bg-size; + } + + &::before { + content: ''; + position: absolute; + width: var(--_date-size); + z-index: 3; + pointer-events: none; + inset-inline-start: initial; + border-start-end-radius: var-get($_theme, 'date-range-border-radius'); + border-end-end-radius: var-get($_theme, 'date-range-border-radius'); + border-start-start-radius: 0; + border-end-start-radius: 0; + } + + &::after { + background: transparent !important; + border-style: var(--_preview-border-style); + border-color: var-get($_theme, 'date-range-preview-border-color'); + inset-inline-end: $fake-bg-position; + border-start-end-radius: var-get($_theme, 'date-range-border-radius'); + border-end-end-radius: var-get($_theme, 'date-range-border-radius'); + border-inline-start: 0; + } + + @include e(inner) { + border-color: transparent; + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + @include mx('range-preview', 'first', 'selected') { + @include e(inner) { &::after { - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); - border-color: var-get($_theme, 'date-current-foreground'); + border-block-color: var-get($_theme, 'date-range-preview-border-color'); } } } - @include mx('range', 'selected', 'current', 'first', 'special') { + @include mx('range-preview', 'last', 'selected') { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + &::after { + border-block-color: var-get($_theme, 'date-range-preview-border-color'); + } + } + } + @include mx('first', 'last', 'current', ('not': 'special')) { + @include e(inner) { &::after { - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); + display: none; } } } - @include mx('range', 'selected', 'current', 'last', 'special') { + @include mx('range-preview', 'first', 'current', ('not': 'special')) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + &::after { + display: none; + } + } + } + + @include mx('range-preview', 'last', 'current', ('not': 'special')) { + @include e(inner) { + &::after { + display: none; + } + } + } + + + .igx-day-item--last { + &::after { + inset-inline-end: $fake-bg-position; + } + } + + // RESET HOVER/FOCUS STYLES IN PREVIEW + @include mx('range-preview', 'special') { + @include e(inner) { + color: var-get($_theme, 'date-special-foreground'); + background: transparent; &::after { - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + } + + &:hover { + background: transparent; + color: var-get($_theme, 'date-special-foreground'); + + &::after { + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + } } } } - @include m('current') { + @include mx('range-preview', 'special', 'active') { @include e(inner) { - &::before { - content: ''; - position: absolute; - z-index: -1; - width: $date-inner-size; - height: $date-inner-size; - border-radius: 50%; - background: var-get($_theme, 'date-current-background'); + color: var-get($_theme, 'date-special-foreground'); + background: transparent; + + &::after { + background: var-get($_theme, 'date-special-focus-background'); + border-color: var-get($_theme, 'date-special-focus-border-color'); } } } - @include mx('special', 'current') { + @include mx('range-preview', 'current') { @include e(inner) { color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; &::after { border-color: var-get($_theme, 'date-current-foreground'); - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); + } + + &:hover { + color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } } } } - @include mx('special', 'current', 'active') { + @include mx('range-preview', 'current', 'active') { @include e(inner) { color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } &::after { border-color: var-get($_theme, 'date-current-foreground'); - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); } } } - @include mx('special', 'current', 'active', 'range') { + @include mx('range-preview', 'current', 'special') { @include e(inner) { color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; &::after { + background: var-get($_theme, 'date-current-background'); border-color: var-get($_theme, 'date-current-foreground'); - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); + } + + &:hover { + &::after { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + } } } } - @include mx('first', 'range-preview') { - &::after { - width: calc(50% + #{rem(2px)}); - border-inline-color: transparent; - border-style: solid; - border-width: $border-size; + @include mx('range-preview', 'current', 'special', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + } + + &:hover { + color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + } } + } + @include mx('selected', 'first', 'last') { @include e(inner) { background: transparent; border-color: var-get($_theme, 'date-range-preview-border-color'); - border-inline-end-color: transparent; - border-start-start-radius: var-get($_theme, 'date-range-border-radius'); - border-end-start-radius: var-get($_theme, 'date-range-border-radius'); - border-start-end-radius: 0; - border-end-end-radius: 0; + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include mx('last', 'range-preview') { - &::after { - width: calc(50% + #{rem(2px)}); - border-inline-color: transparent; - border-style: solid; - border-width: $border-size; + @include mx('selected', 'first', 'last', 'special') { + @include e(inner) { + color: var-get($_theme, 'date-special-foreground'); + + &::before { + border-color: transparent; + } + + &::after { + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + } + + &:hover { + &::after { + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + } + } + } + } + + @include mx('selected', 'first', 'last', 'current') { + @include e(inner) { + color: var-get($_theme, 'date-current-foreground'); + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + + &:hover { + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + } + + @include mx('selected', 'first', 'last', 'current', 'special') { + @include e(inner) { + color: var-get($_theme, 'date-current-foreground'); + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + } + + &:hover { + &::after { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + } + + @include mx('selected', 'first', 'last', 'current', 'special', 'active') { + @include e(inner) { + &::after { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + + @include mx('range-preview', 'selected', 'special', 'first') { + @include e(inner) { + border-color: transparent; + } + } + + @include mx('range-preview', 'selected', 'special', 'last') { + @include e(inner) { + border-color: transparent; + } + } + + @include mx('range-preview', 'selected', 'current', 'first') { + @include e(inner) { + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } } + } + @include mx('range-preview', 'selected', 'current', 'last') { @include e(inner) { + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + } + } + + + + // RANGE + SELECTED + @include mx('range', 'selected') { + background: var-get($_theme, 'date-selected-range-background'); +} + + @include mx('range', 'selected', 'first') { + background: transparent; + border-color: transparent; + + &::before { background: transparent; - border-color: var-get($_theme, 'date-range-preview-border-color'); - border-inline-start-color: transparent; - border-start-end-radius: var-get($_theme, 'date-range-border-radius'); - border-end-end-radius: var-get($_theme, 'date-range-border-radius'); - border-start-start-radius: 0; - border-end-start-radius: 0; + border-inline-start: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + border-inline-end: 0; + border-start-start-radius: var-get($_theme, 'date-range-border-radius'); + border-end-start-radius: var-get($_theme, 'date-range-border-radius'); + border-start-end-radius: 0; + border-end-end-radius: 0; + + } + + &::after { + background: var-get($_theme, 'date-selected-range-background'); } } - @include mx('first', 'inactive', 'range-preview') { + @include mx('range', 'selected', 'last') { + background: transparent; + border-color: transparent; + + &::before { + background: transparent; + border-inline-end: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + border-inline-start: 0; + border-start-end-radius: var-get($_theme, 'date-range-border-radius'); + border-end-end-radius: var-get($_theme, 'date-range-border-radius'); + border-start-start-radius: 0; + border-end-start-radius: 0; + } + + &::after { + background: var-get($_theme, 'date-selected-range-background'); + } + } + + @include mx('range', 'selected', ('not': ('range-preview', 'special', 'current', 'disabled'))) { @include e(inner) { color: var-get($_theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($_theme, 'date-selected-range-hover-foreground'); + background: var-get($_theme, 'date-selected-range-hover-background'); + } + + &::before { + background: var-get($_theme, 'date-selected-range-background'); + } } } - @include mx('last', 'inactive', 'range-preview') { + @include mx('range', 'selected', 'active', ('not': ('range-preview', 'special', 'current', 'disabled'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-range-focus-foreground'); + background: var-get($_theme, 'date-selected-range-focus-background'); + } + } + + @include mx('range', 'selected', 'inactive', ('not': ('range-preview', 'special', 'current', 'disabled'))) { @include e(inner) { color: var-get($_theme, 'date-selected-range-foreground'); } } - @include mx('first', 'range-preview', 'current', 'selected') { + @include mx('range', 'selected', 'special', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + border-color: transparent; } } - @include mx('last', 'range-preview', 'current', 'selected') { + @include mx('range', 'selected', 'current', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + border-color: transparent; } } - @include mx('disabled', 'special') { + + // RANGE + SPECIAL (not preview) + @include mx('range', 'special', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); + color: var-get($_theme, 'date-special-range-foreground'); + background: transparent; + border-radius: var-get($_theme, 'date-range-border-radius'); + + &::after { + background: var-get($_theme, 'date-special-range-background'); + border-color: var-get($_theme, 'date-special-range-border-color'); + } + + &:hover { + color: var-get($_theme, 'date-special-range-hover-foreground'); + background: var-get($_theme, 'date-selected-range-hover-background'); + + &::after { + background: var-get($_theme, 'date-special-range-hover-background'); + border-color: var-get($_theme, 'date-special-range-hover-border-color'); + } + } } } - @include mx('disabled', 'special', 'range', ('not': 'current')) { + @include mx('range', 'special', 'active', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); + color: var-get($_theme, 'date-special-range-focus-foreground'); + background: var-get($_theme, 'date-selected-range-focus-background'); + + &::after { + background: var-get($_theme, 'date-special-range-focus-background'); + border-color: var-get($_theme, 'date-special-range-focus-border-color'); + } } } - @include mx('disabled', 'range-preview') { + @include mx('range', 'current', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); + color: var-get($_theme, 'date-selected-current-range-foreground'); + background: transparent; + border-radius: var-get($_theme, 'date-range-border-radius'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); + } + + &:hover { + color: var-get($_theme, 'date-selected-current-range-hover-foreground'); + background: var-get($_theme, 'date-selected-range-hover-background'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + } + } } } - @include mx('disabled', 'current') { + @include mx('range', 'current', 'active', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-current-foreground'); + color: var-get($_theme, 'date-selected-current-range-focus-foreground'); + background: var-get($_theme, 'date-selected-range-focus-background'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + } } } - @include mx('range', 'selected', 'first', 'disabled') { - &::before { - background: var-get($_theme, 'date-selected-range-background'); - z-index: -1; + @include mx('range', 'current', 'special', ('not': 'range-preview')) { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-range-foreground'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); + } + + &::after { + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-selected-current-foreground'); + } + + &:hover { + color: var-get($_theme, 'date-selected-current-range-hover-foreground'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + } + + &::after { + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-foreground'); + } + } } } - @include mx('range', 'selected', 'last', 'disabled') { - &::before { - background: var-get($_theme, 'date-selected-range-background'); - z-index: -1; + @include mx('range', 'current', 'special', 'active', ('not': 'range-preview')) { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-range-focus-foreground'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + } + + &::after { + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-foreground'); + } } } -} -@include themed-block(igx-days-row, fluent) { - height: var-get($_theme, 'size'); + // DISABLED + @include mx('range', 'special', 'disabled', ('not': 'range-preview')) { + @include e(inner) { + border-color: transparent; + } + } - &:nth-child(2) { - @include e(day, $m: week-number) { - border-start-start-radius: var-get($_theme, 'week-number-border-radius'); - border-start-end-radius: var-get($_theme, 'week-number-border-radius'); + @include mx('range', 'current', 'disabled', ('not': 'range-preview')) { + @include e(inner) { + border-color: transparent; + } + } + + @include mx('range', 'special', 'current', 'disabled', ('not': 'range-preview')) { + @include e(inner) { + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } } } + } @include themed-block(igx-day-label, fluent) { @@ -345,10 +1045,10 @@ $_theme: $fluent; content: ''; position: absolute; background: var-get($_theme, 'week-number-background'); - border-inline: rem(1px) solid var-get($_theme, 'week-number-background'); + border-inline: var(--_date-border-size) var(--_date-border-style) var-get($_theme, 'week-number-background'); inset-block-start: 100%; height: calc($date-view-row-gap + rem(2px)); - width: var-get($_theme, 'size'); + width: var(--_date-size); } } } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_indigo.scss index d7a28839bd2..4ade1f5026d 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_indigo.scss @@ -9,22 +9,23 @@ $_theme: $indigo; $date-view-row-gap: rem(4px); @include themed-block(igx-day-item, indigo) { - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); - $border-size: rem(2px); + --_date-border-size: #{rem(2px)}; - @include e(inner) { - border-width: $border-size; + // Week number label + @include mx('label', 'week-number') { + span { + border: 0; - &::after { - border-radius: inherit; - border-width: $border-size; - width: $date-size; - height: $date-size; + &::before { + height: $date-view-row-gap; + inset-block-start: 100%; + inset-inline-start: 0; + border: 0; + } } } - @include e(inner, 'week-number') { + @include mx('date-inner', 'week-number') { border: 0; &::before { @@ -35,415 +36,348 @@ $date-view-row-gap: rem(4px); } } - @include m('selected') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } + // Special date + @include m('special') { + @include e(inner) { + font-weight: 700; - @include mx('selected', 'range') { - @include e(inner) { &::after { - width: $date-size; - height: $date-size; + border-width: var(--_date-border-size); } } } - @include mx('selected', 'special','range') { - @include e(inner) { - &:hover { - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } - } + // CURRENT + SELECTED + FIRST/LAST + @include mx('current', 'selected', 'first') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); - &::after { - border-color: var-get($_theme, 'date-special-border-color'); + &:hover { + color: var-get($_theme, 'date-selected-current-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include mx('selected', 'special', 'range', 'first') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-special-border-color'); - } + @include mx('current', 'selected', 'last') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); &:hover { - &::after { - border-color: var-get($_theme, 'date-selected-special-border-color'); - } + color: var-get($_theme, 'date-selected-current-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include mx('selected', 'special', 'range', 'last') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-special-border-color'); - } - &:hover { - &::after { - border-color: var-get($_theme, 'date-selected-special-border-color'); - } - } + @include mx('current', 'selected', 'first', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include m('range') { - @include e(inner) { - height: $date-size; + @include mx('current', 'selected', 'last', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include m('range-preview') { - border-block-style: dashed; - } - - @include mx('inactive', 'range-preview', ('not': ('disabled', 'selected'))) { + // CURRENT + SELECTED + RANGE + FIRST/LAST + @include mx('current', 'selected', 'range', 'first') { @include e(inner) { - color: var-get($_theme, 'inactive-color'); + color: var-get($_theme, 'date-selected-current-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); + + &:hover { + color: var-get($_theme, 'date-selected-current-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + } } } - @include mx('range', 'selected', 'first') { - &::after { - border-block: calc(#{$border-size} / 2); + @include mx('current', 'selected', 'range', 'last') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); + + &:hover { + color: var-get($_theme, 'date-selected-current-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + } } } - @include mx('range', 'selected', 'last') { - &::after { - border-block: calc(#{$border-size} / 2); + @include mx('current', 'selected', 'range', 'first', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include mx('range', 'selected', 'special', 'first', 'last') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-current-border-color'); - } + @include mx('current', 'selected', 'range', 'last', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include mx('range', 'selected', 'current') { - @include e(inner) { - border-color: transparent; - - &::after { - border-color: var-get($_theme, 'date-current-border-color'); - } + // SPECIAL + SELECTED + FIRST/LAST + @include mx('special', 'selected', 'first') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-special-background'); &:hover { - border-color: transparent; - - &::after { - border-color: var-get($_theme, 'date-current-hover-border-color'); - } + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-special-hover-background'); } - } - } - - @include mx('range', 'selected', 'current', 'active') { - @include e(inner) { - border-color: transparent; &::after { - border-color: var-get($_theme, 'date-current-focus-border-color'); + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } } } - @include mx('range', 'selected', 'current', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-special-range-foreground'); - border-color: var-get($_theme, 'date-current-border-color'); + @include mx('special', 'selected', 'last') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-special-background'); &:hover { - color: var-get($_theme, 'date-special-hover-foreground'); - - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } - - background: var-get($_theme, 'date-selected-current-range-hover-background'); - border-color: var-get($_theme, 'date-current-hover-border-color'); + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-special-hover-background'); } &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - border-color: var-get($_theme, 'date-special-range-border-color'); + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } } } - @include mx('range', 'selected', 'current', 'special', 'active', ('not': ('first', 'last'))) { - @include e(inner) { - color: var-get($_theme, 'date-special-focus-foreground'); - - background: var-get($_theme, 'date-selected-current-range-focus-background'); - border-color: var-get($_theme, 'date-current-focus-border-color'); - - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } + @include mx('special', 'selected', 'first', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-special-focus-background'); } } - @include mx('range', 'selected', 'current', 'first') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-current-border-color'); - } - - &:hover { - &::after { - border-color: var-get($_theme, 'date-current-hover-border-color'); - } - } + @include mx('special', 'selected', 'last', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-special-focus-background'); } } - @include mx('range', 'selected', 'current', 'last') { - @include e(inner) { + // SPECIAL + SELECTED (not range, preview) + @include mx('special', 'selected', ('not': ('range', 'preview'))) { + @include e(inner) { &::after { - border-color: var-get($_theme, 'date-current-border-color'); - } - - &:hover { - &::after { - border-color: var-get($_theme, 'date-current-hover-border-color'); - } + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } } } - @include mx('range', 'selected', 'current', 'first', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - background: var-get($_theme, 'date-selected-background'); + // SPECIAL + CURRENT + RANGE + @include mx('special', 'current') { + @include e(inner) { + border-radius: var-get($_theme, 'date-current-border-radius'); &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - border-color: var-get($_theme, 'date-selected-special-border-color'); + width: calc(var(--_date-inner-size) - #{rem(4px)}); + height: calc(var(--_date-inner-size) - #{rem(4px)}); + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } + } + } - &:hover { - color: var-get($_theme, 'date-selected-hover-foreground'); - background: var-get($_theme, 'date-selected-hover-background'); + @include mx('special', 'current', 'range') { + @include e(inner) { + color: var-get($_theme, 'date-special-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); - // stylelint-disable-next-line - &::after { - border-color: var-get($_theme, 'date-selected-special-hover-border-color'); - } + &:hover { + color: var-get($_theme, 'date-special-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include mx('range', 'selected', 'current', 'last', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - background: var-get($_theme, 'date-selected-background'); + @include mx('special', 'current', 'range', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + } + } - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - border-color: var-get($_theme, 'date-selected-special-border-color'); - } + @include mx('special', 'current', 'range', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-special-range-foreground'); + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); &:hover { - color: var-get($_theme, 'date-selected-hover-foreground'); - background: var-get($_theme, 'date-selected-hover-background'); - - // stylelint-disable-next-line - &::after { - border-color: var-get($_theme, 'date-selected-special-hover-border-color'); - } + color: var-get($_theme, 'date-special-range-hover-foreground'); + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include mx('range', 'selected', 'current', 'first', 'special', 'active') { - @include e(inner) { - color: var-get($_theme, 'date-selected-focus-foreground') !important; - background: var-get($_theme, 'date-selected-focus-background') !important; - - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - } + @include mx('special', 'current', 'range', 'active', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-special-range-focus-foreground'); + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include mx('range', 'selected', 'current', 'last', 'special', 'active') { - @include e(inner) { - color: var-get($_theme, 'date-selected-focus-foreground') !important; - background: var-get($_theme, 'date-selected-focus-background') !important; + @include mx('special', 'current', 'range', 'first') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); + &:hover { + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include m('current', $not: 'selected') { - @include e(inner) { - background: var-get($_theme, 'date-current-background'); + @include mx('special', 'current', 'range', 'last') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); &:hover { - background: var-get($_theme, 'date-current-hover-background'); - } - - &::after { - width: $date-size; - height: $date-size; + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include mx('current', 'selected', 'special') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-selected-special-border-color'); - } + @include mx('special', 'current', 'range', 'active', 'first') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + } + } - &:hover { - &::after { - border-color: var-get($_theme, 'date-selected-special-hover-border-color'); - } - } + @include mx('special', 'current', 'range', 'active', 'last') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include mx('current', 'selected', 'special', 'active') { - @include e(inner) { + // SPECIAL + CURRENT (not range) + @include mx('special', 'current', ('not': ('range'))) { + @include e(inner) { &::after { - border-color: var-get($_theme, 'date-selected-special-focus-border-color'); + width: calc(var(--_date-inner-size) - #{rem(4px)}); + height: calc(var(--_date-inner-size) - #{rem(4px)}); + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } } } - @include m(special) { - @include e(inner) { - font-weight: 700; + @include mx('special', 'current', 'active', ('not': ('range'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); } } - @include mx('special', 'current', ('not': 'selected')) { - @include e(inner) { + @include mx('special', 'current', ('not': ('selected', 'range'))) { + @include e(inner) { + color: var-get($_theme, 'date-special-foreground'); background: var-get($_theme, 'date-current-background'); border-color: var-get($_theme, 'date-current-border-color'); + &::after { + border-color: var-get($_theme, 'date-special-border-color'); + } + &:hover { color: var-get($_theme, 'date-special-hover-foreground'); background: var-get($_theme, 'date-current-hover-background'); border-color: var-get($_theme, 'date-current-hover-border-color'); - } - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - } - } - } - - @include mx('special', 'current', 'selected') { - @include e(inner) { - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - } - } - } - - @include mx('special', 'current', 'active') { - @include e(inner) { - //color: var-get($_theme, 'date-special-focus-foreground'); - //background: var-get($_theme, 'date-current-focus-background'); - //border-color: var-get($_theme, 'date-current-focus-border-color'); - // - //&:hover { - // color: var-get($_theme, 'date-special-hover-foreground'); - // background: var-get($_theme, 'date-current-hover-background'); - // border-color: var-get($_theme, 'date-current-hover-border-color'); - //} - - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); + &::after { + border-color: var-get($_theme, 'date-special-hover-border-color'); + } } } } - @include mx('special', 'current', 'active', 'range') { - @include e(inner) { + @include mx('special', 'current', 'active', ('not': ('selected', 'range'))) { + @include e(inner) { color: var-get($_theme, 'date-special-focus-foreground'); background: var-get($_theme, 'date-current-focus-background'); border-color: var-get($_theme, 'date-current-focus-border-color'); - &:hover { - color: var-get($_theme, 'date-special-hover-foreground'); - background: var-get($_theme, 'date-current-hover-background'); - border-color: var-get($_theme, 'date-current-hover-border-color'); - } - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); + border-color: var-get($_theme, 'date-special-focus-border-color'); } } } - @include mx('first', 'range-preview') { - &::after { - border-width: calc(#{$border-size} / 2); - width: calc(50% + #{rem(1px)}); - border-inline-color: transparent; - border-style: dashed; - } - } + @include mx('special', 'current', 'selected', ('not': ('range'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); - @include mx('last', 'range-preview') { - &::after { - border-width: calc(#{$border-size} / 2); - width: calc(50% + #{rem(1px)}); - border-inline-color: transparent; - border-style: dashed; - } - } + &::after { + border-color: var-get($_theme, 'date-selected-special-border-color'); + } - @include mx('disabled', 'current', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-special-foreground'); - } - } + &:hover { + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); - @include mx('disabled', 'single', 'current', 'special',) { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); + &::after { + border-color: var-get($_theme, 'date-selected-special-hover-border-color'); + } + } } } - @include mx('range', 'selected', 'first', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); - } - } + @include mx('special', 'current', 'selected', 'active', ('not': ('range'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); - @include mx('range', 'selected', 'last', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); + &::after { + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); + } } } } @@ -470,10 +404,10 @@ $date-view-row-gap: rem(4px); content: ''; position: absolute; background: var-get($_theme, 'week-number-background'); - border-inline: rem(1px) solid var-get($_theme, 'week-number-background'); + border-inline: var(--_date-border-size) var(--_date-border-style) var-get($_theme, 'week-number-background'); inset-block-start: 100%; height: $date-view-row-gap; - width: var-get($_theme, 'size'); + width: var(--_date-size); inset-inline-start: 0; border: 0; } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_material.scss index 133612a7af0..0260309c1d2 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_material.scss @@ -16,318 +16,18 @@ $_theme: $material; } @include themed-block(igx-day-item, material) { - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); - $date-height: $date-size; - $border-size: rem(1px); - - @include e(inner) { - border-width: $border-size; - - &::after { - border-radius: inherit; - border-width: $border-size; - width: $date-size; - height: $date-size; - } - } - - @include m(selected) { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } - - @include mx('selected', 'range') { - @include e(inner) { - border-inline-color: transparent; - - &::after { - width: $date-size; - height: $date-size; - } - } - } - - @include mx('special','range') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-special-range-border-color'); - } - - &:hover { - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } - } - } - } - - @include m(range) { - @include e(inner) { - height: $date-size; - } - } - - @include m(range-preview) { - border-block-style: dashed; - } - - @include mx('inactive', 'range-preview', ('not': ('disabled', 'selected'))) { - @include e(inner) { - color: var-get($_theme, 'inactive-color'); - } - } - - @include mx('range', 'selected', 'first') { - &::after { - border-width: $border-size; - } - } - - @include mx('range', 'selected', 'last') { - &::after { - border-width: $border-size; - } - } - - @include mx('range', 'selected', 'special', 'first', 'last') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include mx('range', 'selected', 'current') { - @include e(inner) { - border-color: var-get($_theme, 'date-selected-current-border-color'); - - &:hover { - border-color: var-get($_theme, 'date-selected-current-hover-border-color'); - } - } - } - - @include mx('range', 'selected', 'current', 'active') { - @include e(inner) { - border-color: var-get($_theme, 'date-selected-current-focus-border-color'); - } - } - - @include mx('range', 'selected', 'current', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-special-range-foreground'); - - &:hover { - color: var-get($_theme, 'date-special-hover-foreground'); - - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } - } - - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-special-range-border-color'); - } - } - } - - @include mx('range', 'selected', 'current', 'special', 'active', ('not': 'first')) { - @include e(inner) { - color: var-get($_theme, 'date-special-focus-foreground'); - } - } - - @include mx('range', 'selected', 'current', 'first', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include mx('range', 'selected', 'current', 'last', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include m(current) { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } - - @include mx('first', 'range-preview') { - &::after { - width: calc(50% + #{rem(1px)}); - border-width: $border-size; - border-inline-color: transparent; - border-style: dashed; - } - } - - @include mx('last', 'range-preview') { - &::after { - width: calc(50% + #{rem(1px)}); - border-width: $border-size; - border-inline-color: transparent; - border-style: dashed; - } - } - - @include mx('first', 'range-preview', 'special') { - @include e(inner) { - width: $date-size; - height: $date-size; - } - } - - @include mx('last', 'range-preview', 'special') { - @include e(inner) { - width: $date-size; - height: $date-size; - } - } - - @include mx('first', 'range-preview', 'special', 'current') { - @include e(inner) { - width: $date-size; - height: $date-size; - - &:hover { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } - } - - @include mx('last', 'range-preview', 'special', 'current') { - @include e(inner) { - width: $date-size; - height: $date-size; - - &:hover { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } - } - - @include mx('first', 'range-preview', 'special', 'active') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-special-border-color'); - } - } - } - - @include mx('last', 'range-preview', 'special', 'active') { + @include mx('selected', 'first', 'last') { @include e(inner) { &::after { - border-color: var-get($_theme, 'date-special-border-color'); + width: var(--_date-inner-size); + height: var(--_date-inner-size); } } } - - @include mx('first', 'range-preview', 'special', 'active', 'selected') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include mx('last', 'range-preview', 'special', 'active', 'selected') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include mx('first', 'range-preview', 'special', 'active', 'current') { - @include e(inner) { - width: $date-size; - height: $date-size; - } - } - - @include mx('last', 'range-preview', 'special', 'active', 'current') { - @include e(inner) { - width: $date-size; - height: $date-size; - } - } - - @include mx('range', 'selected', 'special', 'first') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-special-border-color'); - } - } - } - - @include mx('range', 'selected', 'special', 'last') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-special-border-color'); - } - } - } - - @include mx('current', 'range', 'disabled') { - @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); - } - } - - @include mx('range', 'selected', 'first', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); - } - } - - @include mx('range', 'selected', 'last', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); - } - } } @include themed-block(igx-day-label, material) { - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); $date-view-row-gap: rem(4px); - $date-height: $date-size; - $border-size: rem(1px); @include m(week-number) { span { @@ -341,7 +41,7 @@ $_theme: $material; border-inline: rem(1px) solid var-get($_theme, 'week-number-background'); inset-block-start: 100%; height: calc($date-view-row-gap + rem(2px)); - width: $date-size; + width: var(--_date-size); } } } diff --git a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_bootstrap.scss index 41d365d02c4..9de44e9e2dc 100644 --- a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_bootstrap.scss @@ -11,47 +11,49 @@ $_theme: $bootstrap; @include themed-block(igx-calendar-view-item, bootstrap) { @include m('current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); } } } @include mx('current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); } } @include m('selected') { @include e(inner) { + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-outline-color'); + &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); } } } @include mx('selected', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); } } @include mx('selected', 'current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); } } } @include mx('selected', 'current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); } } } diff --git a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_fluent.scss index 06b0fddde91..acc5a55bb82 100644 --- a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_fluent.scss @@ -11,47 +11,49 @@ $_theme: $fluent; @include themed-block(igx-calendar-view-item, fluent) { @include m('current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); } } } @include mx('current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); } } @include m('selected') { @include e(inner) { + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-outline-color'); + &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); } } } @include mx('selected', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); } } @include mx('selected', 'current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); } } } @include mx('selected', 'current', 'active') { .igx-calendar-view__item-inner { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); } } } diff --git a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_material.scss index 51356eb184d..7c2a215825a 100644 --- a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_material.scss @@ -9,50 +9,50 @@ $_theme: $material; @include themed-block(igx-calendar-view-item, material) { @include m('current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); } } } @include mx('current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var(--content-background), + box-shadow: 0 0 0 rem(1px) var(--content-background), 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); } } @include m('selected') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); } } } @include mx('selected', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); } } @include mx('selected', 'current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); } } } @include mx('selected', 'current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); } } } diff --git a/src/app/calendar/calendar.sample.html b/src/app/calendar/calendar.sample.html index 2696e3bde7c..ed2d5f34757 100644 --- a/src/app/calendar/calendar.sample.html +++ b/src/app/calendar/calendar.sample.html @@ -47,10 +47,22 @@
+ + + + Currently disabled + selected is not possible combination! + + + @for (option of ['narrow', 'short', 'long']; track option) { diff --git a/src/app/calendar/calendar.sample.ts b/src/app/calendar/calendar.sample.ts index c8b94609609..257bc48e875 100644 --- a/src/app/calendar/calendar.sample.ts +++ b/src/app/calendar/calendar.sample.ts @@ -150,7 +150,7 @@ export class CalendarSampleComponent implements OnInit { label: 'Show Week Numbers', control: { type: 'boolean', - defaultValue: false + defaultValue: true } }, monthsViewNumber: { @@ -244,28 +244,45 @@ export class CalendarSampleComponent implements OnInit { }; } - protected disabledDates = [ - { - type: DateRangeType.Specific, - dateRange: [ - new Date(this._today.getFullYear(), this._today.getMonth(), 0), - new Date(this._today.getFullYear(), this._today.getMonth(), 20), - new Date(this._today.getFullYear(), this._today.getMonth(), 21), - ], - }, - ]; + // DISABLED DATES + private _disabledRange: DateRange = { + start: new Date(this._today.getFullYear(), this._today.getMonth(), 15), + end: new Date(this._today.getFullYear(), this._today.getMonth(), 17), + }; + + protected set disabledRange(value: DateRange) { + this.disabledDates = value; + this._disabledRange = value; + } + + protected get disabledRange(): DateRange { + return this._disabledRange; + } - protected mySpecialDates = [ + private _disabledDates: DateRangeDescriptor[] = [ { - type: DateRangeType.Specific, + type: DateRangeType.Between, dateRange: [ - new Date(this._today.getFullYear(), this._today.getMonth(), 1), - new Date(this._today.getFullYear(), this._today.getMonth(), 3), - new Date(this._today.getFullYear(), this._today.getMonth(), 7), + this.disabledRange.start as Date, + this.disabledRange.end as Date, ], }, ]; + protected get disabledDates(): DateRangeDescriptor[] { + return this._disabledDates; + } + + protected set disabledDates(dates: DateRange) { + this._disabledDates = [ + { + type: DateRangeType.Between, + dateRange: [dates.start as Date, dates.end as Date] + } + ]; + } + + // SPECIAL DATES private _specialRange: DateRange = { start: new Date(this._today.getFullYear(), this._today.getMonth(), 8), end: new Date(this._today.getFullYear(), this._today.getMonth(), 10), From 04f349380ba4fa63c70e9555606474a5ab74d069 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Fri, 19 Dec 2025 13:33:19 +0200 Subject: [PATCH 131/131] fix(*): styling discrepancies (#16604) * fix(*): styling discrepancies * fix(slider): remove flex-grow --------- Co-authored-by: Simeon Simeonoff --- package-lock.json | 8 +-- package.json | 2 +- .../src/lib/card/themes/_base.scss | 7 ++- .../lib/card/themes/shared/_bootstrap.scss | 2 +- .../src/lib/card/themes/shared/_fluent.scss | 2 - .../lib/checkbox/themes/shared/_indigo.scss | 9 ++-- .../core/styles/typography/_bootstrap.scss | 40 +++++++-------- .../lib/core/styles/typography/_fluent.scss | 48 ++++++++--------- .../lib/core/styles/typography/_indigo.scss | 51 +++++++++---------- .../lib/core/styles/typography/_material.scss | 22 ++++---- .../src/lib/dialog/themes/_base.scss | 8 +++ .../lib/dialog/themes/shared/bootstrap.scss | 4 ++ .../src/lib/dialog/themes/shared/fluent.scss | 4 ++ .../src/lib/dialog/themes/shared/indigo.scss | 4 ++ .../input-group/themes/shared/bootstrap.scss | 2 +- .../src/lib/navbar/themes/_base.scss | 6 +-- .../src/lib/slider/themes/_base.scss | 3 +- .../src/lib/stepper/stepper.component.scss | 1 - .../src/lib/stepper/themes/shared/_index.scss | 4 -- .../lib/stepper/themes/shared/bootstrap.scss | 10 ---- .../src/lib/stepper/themes/shared/fluent.scss | 7 --- .../src/lib/stepper/themes/shared/indigo.scss | 7 --- .../lib/stepper/themes/shared/material.scss | 7 --- 23 files changed, 117 insertions(+), 141 deletions(-) delete mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss delete mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss delete mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss delete mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss delete mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss diff --git a/package-lock.json b/package-lock.json index eafaf2b2a5e..653db7f05ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^23.0.0", + "igniteui-theming": "^24.0.1", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13567,9 +13567,9 @@ } }, "node_modules/igniteui-theming": { - "version": "23.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-23.0.0.tgz", - "integrity": "sha512-r3R06q0pK/P32lEIgjcml4t4ppfy80RVIl8VSnyCIg1WOEhAQmaPOioJJhID6K7iAwz4zlOGJXsP6SFeDb+gyA==", + "version": "24.0.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-24.0.1.tgz", + "integrity": "sha512-unpW2kFk9EV6NNqDJZmIjuPtkZwA/OakKb7gGcxZyxoTRAAQc9FbuZ7j0Am1xdAd5MjIEyThuOAcHNhJVcY0QQ==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index d4924b07717..529941e3518 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^23.2.0", + "igniteui-theming": "^24.0.1", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/src/lib/card/themes/_base.scss b/projects/igniteui-angular/src/lib/card/themes/_base.scss index e2be0465e76..6f21514ff78 100644 --- a/projects/igniteui-angular/src/lib/card/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/card/themes/_base.scss @@ -90,9 +90,9 @@ $theme: $material; @include b(igx-card-header) { display: flex; flex-flow: row wrap; - align-content: flex-start; + align-items: center; width: 100%; - padding: rem(16px, 16px); + padding: rem(16px); color: var-get($theme, 'header-text-color'); &:empty { @@ -101,7 +101,6 @@ $theme: $material; } @include e(thumbnail) { - align-self: flex-start; margin-inline-end: rem(16px); &:empty { @@ -155,7 +154,7 @@ $theme: $material; flex-flow: row wrap; justify-content: space-between; align-items: center; - padding: rem(8px); + padding: rem(8px) rem(16px); &:first-child { margin-block-end: auto; diff --git a/projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss index 5cf634d55ce..2a3e9aab81f 100644 --- a/projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss @@ -24,7 +24,7 @@ @include themed-block(igx-card-content, bootstrap) { padding-block: rem(16px) rem(24px); - padding-inline: rem(24px); + padding-inline: rem(16px); > *:not(igx-icon) { @include type-style(body-1) { diff --git a/projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss index 1cc72e08300..8c1652d0a18 100644 --- a/projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss @@ -3,8 +3,6 @@ @use 'styles/themes/standalone' as *; @include themed-block(igx-card-header, fluent) { - padding: rem(16px) rem(8px); - @include e(title) { @include type-style(subtitle-1) { margin: 0; diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss index 584fe3b047e..a06541ad757 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss @@ -31,16 +31,13 @@ $_theme: $indigo; } } - @include e(label) { - @include type-style(body-2); - transition: color 0.2s $ease-out-quad; - transition-delay: var(--_transition-delay); - } - @include e(label) { @include type-style(body-2) { margin-block: 0; } + + transition: color 0.2s $ease-out-quad; + transition-delay: var(--_transition-delay); } @include m(checked) { diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 13e6931d3be..a914c15ea23 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -54,18 +54,18 @@ // subtitle: 'body-1', // content: 'body-1', // )); - @include checkbox-typography($categories: ( - label: 'body-1', - )); + // @include checkbox-typography($categories: ( + // label: 'body-1', + // )); // @include chip-typography(); // @include column-actions-typography(); // @include date-range-typography($categories: ( // label: 'body-1', // )); - @include dialog-typography($categories: ( - title: 'h5', - content: 'body-1' - )); + // @include dialog-typography($categories: ( + // title: 'h5', + // content: 'body-1' + // )); @include dock-manager-typography(); // @include drop-down-typography($categories: ( // header: 'overline', @@ -79,35 +79,35 @@ // )); @include excel-filtering-typography(); @include icon-button-typography(); - //@include input-group-typography($categories: ( + // @include input-group-typography($categories: ( // helper-text: 'body-2', // input-text: 'body-1' - //)); + // )); @include file-input-typography($categories: ( file-text: 'body-1' )); - @include linear-bar-typography(); + // @include linear-bar-typography(); // @include list-typography($categories: ( // item: 'body-2', // title: 'body-1', // subtitle: 'body-2', // header: 'overline', // )); - @include navbar-typography($categories: ( - title: 'h5' - )); + // @include navbar-typography($categories: ( + // title: 'h5' + // )); // @include navdrawer-typography($categories: ( // item: 'body-2', // header: 'caption' // )); - @include radio-typography($categories: ( - label: 'body-1' - )); + // @include radio-typography($categories: ( + // label: 'body-1' + // )); // @include slider-typography(); - @include snackbar-typography(); - @include switch-typography($categories: ( - label: 'body-1' - )); + // @include snackbar-typography(); + // @include switch-typography($categories: ( + // label: 'body-1' + // )); //@include tabs-typography(); // @include time-picker-typography($categories: ( // header-hour: 'h4', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index c31af39384b..2406ef46d3c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -42,31 +42,31 @@ // @include bottom-nav-typography(); @include button-typography(); // @include button-group-typography(); - //@include calendar-typography($categories: ( + // @include calendar-typography($categories: ( // header-year: 'overline', // header-date: 'h4', // weekday-label: 'body-1', // picker-date: 'subtitle-2', // content: 'body-1', - //)); + // )); // @include card-typography($categories: ( // title: 'subtitle-1', // title-small: 'subtitle-2', // subtitle: 'body-2', // content: 'body-2' // )); - @include checkbox-typography($categories: ( - label: 'body-2' - )); + // @include checkbox-typography($categories: ( + // label: 'body-2' + // )); // @include chip-typography($categories: ( // text: 'subtitle-2' // )); // @include column-actions-typography(); // @include date-range-typography(); - @include dialog-typography($categories: ( - title: 'h6', - content: 'body-2' - )); + // @include dialog-typography($categories: ( + // title: 'h6', + // content: 'body-2' + // )); @include dock-manager-typography(); // @include drop-down-typography($categories: ( // header: 'subtitle-2', @@ -80,42 +80,42 @@ // )); @include excel-filtering-typography(); @include icon-button-typography(); - //@include input-group-typography($categories: ( + // @include input-group-typography($categories: ( // helper-text: 'caption', // input-text: 'body-2' - //)); + // )); @include file-input-typography($categories: ( file-text: 'body-2' )); - @include linear-bar-typography(); + // @include linear-bar-typography(); // @include list-typography($categories: ( // header: 'overline', // item: 'caption', // title: 'caption', // subtitle: 'caption' // )); - @include navbar-typography($categories: ( - title: 'subtitle-2' - )); + // @include navbar-typography($categories: ( + // title: 'subtitle-2' + // )); // @include navdrawer-typography($categories: ( // item: 'body-2', // header: 'subtitle-1' // )); - @include radio-typography($categories: ( - label: 'body-2' - )); + // @include radio-typography($categories: ( + // label: 'body-2' + // )); // @include slider-typography(); // @include snackbar-typography($categories: ( // text: 'caption' // )); - @include switch-typography($categories: ( - label: 'body-2' - )); - //@include tabs-typography($categories: ( + // @include switch-typography($categories: ( + // label: 'body-2' + // )); + // @include tabs-typography($categories: ( // label: 'body-2' - //)); + // )); // @include time-picker-typography(); - //@include stepper-typography(); + // @include stepper-typography(); // @include toast-typography($categories: ( // text: 'caption' // )); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index b6b40739d73..2978e22e39f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -42,28 +42,28 @@ // @include button-group-typography($categories: ( // text: 'body-2', // )); - //@include calendar-typography($categories: ( + // @include calendar-typography($categories: ( // header-year: 'body-2', // header-date: 'h5', // weekday-label: 'body-2', // picker-date: 'subtitle-2', - //)); + // )); // @include card-typography($categories: ( // title: 'h6', // title-small: 'body-2', // subtitle: 'body-2', // content: 'body-2' // )); - @include checkbox-typography($categories: ( - label: 'body-2', - )); + // @include checkbox-typography($categories: ( + // label: 'body-2', + // )); // @include chip-typography(); // @include column-actions-typography(); // @include date-range-typography(); - @include dialog-typography($categories: ( - title: 'h5', - content: 'body-1', - )); + // @include dialog-typography($categories: ( + // title: 'h5', + // content: 'body-1', + // )); @include dock-manager-typography(); // @include drop-down-typography(); // @include expansion-panel-typography($categories: ( @@ -80,52 +80,51 @@ @include file-input-typography($categories: ( file-text: 'body-2' )); - - @include linear-bar-typography(); + // @include linear-bar-typography(); // @include list-typography($categories: ( // header: 'overline', // item: 'body-2', // title: 'body-2', // subtitle: 'body-2' // )); - @include navbar-typography($categories: ( - title: 'h5', - )); + // @include navbar-typography($categories: ( + // title: 'h5', + // )); // @include navdrawer-typography($categories: ( // item: 'subtitle-2', // header: 'overline' // )); - @include radio-typography($categories: ( - label: 'body-2' - )); + // @include radio-typography($categories: ( + // label: 'body-2' + // )); // @include slider-typography($categories: ( // ticks-label: 'body-2', // thumb-label: 'subtitle-2', // )); // @include snackbar-typography(); - @include switch-typography($categories: ( - label: 'body-2' - )); - //@include tabs-typography($categories: ( + // @include switch-typography($categories: ( + // label: 'body-2' + // )); + // @include tabs-typography($categories: ( // label: 'subtitle-2', - //)) { + // )) { // --ig-subtitle-2-text-transform: uppercase; - //}; + // }; // @include time-picker-typography($categories: ( // header-hour: 'h5', // selected-time: 'h6' // )); - //@include stepper-typography($categories: ( + // @include stepper-typography($categories: ( // title: 'body-2', // subtitle: 'caption', // indicator: 'button', // body-content: 'body-2' - //)); + // )); // @include toast-typography(); @include tooltip-typography($categories: ( tooltip-text: 'subtitle-2' )); - //@include tree-typography(); + // @include tree-typography(); @include label-typography($categories: ( label: 'caption' )); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 98020dd09bd..0135d721a77 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -40,33 +40,33 @@ // @include bottom-nav-typography(); @include button-typography(); // @include button-group-typography(); - //@include calendar-typography(); + // @include calendar-typography(); // @include card-typography(); - @include checkbox-typography(); + // @include checkbox-typography(); // @include chip-typography(); // @include column-actions-typography(); // @include date-range-typography(); - @include dialog-typography(); + // @include dialog-typography(); @include dock-manager-typography(); // @include drop-down-typography(); // @include expansion-panel-typography(); @include excel-filtering-typography(); @include icon-button-typography(); - //@include input-group-typography(); - @include linear-bar-typography(); + // @include input-group-typography(); + // @include linear-bar-typography(); // @include list-typography(); - @include navbar-typography(); + // @include navbar-typography(); // @include navdrawer-typography(); - @include radio-typography(); + // @include radio-typography(); // @include slider-typography(); // @include snackbar-typography(); - @include switch-typography(); - //@include tabs-typography(); + // @include switch-typography(); + // @include tabs-typography(); // @include time-picker-typography(); - //@include stepper-typography(); + // @include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); - //@include tree-typography(); + // @include tree-typography(); @include label-typography(); @include query-builder-typography(); @include file-input-typography(); diff --git a/projects/igniteui-angular/src/lib/dialog/themes/_base.scss b/projects/igniteui-angular/src/lib/dialog/themes/_base.scss index f97a4dc8786..3cb37bcb5f2 100644 --- a/projects/igniteui-angular/src/lib/dialog/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/dialog/themes/_base.scss @@ -31,12 +31,20 @@ $_theme: $material; } @include e(window-title) { + @include type-style(h6) { + margin: 0; + }; + display: flex; color: var-get($_theme, 'title-color'); padding: var(--title-padding); } @include e(window-content) { + @include type-style(body-1) { + margin: 0; + }; + color: var-get($_theme, 'message-color'); padding: var(--message-padding); // The 2 rules below are related to https://github.com/IgniteUI/igniteui-angular/issues/11300 diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss index 9bc466812b2..cc4a2a12348 100644 --- a/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss @@ -12,6 +12,10 @@ $_theme: $bootstrap; --actions-padding: #{rem(16px)}; @include e(window-title) { + @include type-style(h5) { + margin: 0; + }; + border-bottom: rem(1px) solid var-get($_theme, 'border-color'); } diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss index 2dcb0396a4b..69f441a2207 100644 --- a/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss @@ -7,4 +7,8 @@ --title-padding: #{rem(16px) rem(24px) rem(24px) rem(24px)}; --message-padding: #{0 rem(24px) rem(20px) rem(24px)}; --actions-padding: #{0 rem(24px) rem(24px) rem(24px)}; + + @include e(window-content) { + @include type-style(body-2); + } } diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss index fd046b996c9..09a4f6e23b0 100644 --- a/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss @@ -7,6 +7,10 @@ --message-padding: #{rem(16px) rem(24px)}; --actions-padding: #{rem(16px) rem(24px) rem(24px) rem(24px)}; + @include e(window-title) { + @include type-style(h5); + } + @include e(window-actions) { gap: rem(16px); } diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss index a4e14859750..2026e6c1fcb 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss @@ -312,7 +312,7 @@ $border-radius: var-get($_theme, 'border-border-radius'); } @include e(bundle-main) { - border-color: var-get($_theme, 'warning-secondary-color'); + border-color: var-get($_theme, 'success-secondary-color'); } } diff --git a/projects/igniteui-angular/src/lib/navbar/themes/_base.scss b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss index 33e50991005..efbf69e94bf 100644 --- a/projects/igniteui-angular/src/lib/navbar/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss @@ -58,9 +58,6 @@ $_theme: $material; @include b(igx-navbar) { display: block; width: 100%; - background: var-get($_theme, 'background'); - color: var-get($_theme, 'text-color'); - box-shadow: var-get($_theme, 'elevation'); nav { display: flex; @@ -73,6 +70,9 @@ $_theme: $material; max-height: rem(128px); z-index: 4; overflow: hidden; + background: var-get($_theme, 'background'); + color: var-get($_theme, 'text-color'); + box-shadow: var-get($_theme, 'elevation'); border-bottom: rem(1px) solid var-get($_theme, 'border-color'); } diff --git a/projects/igniteui-angular/src/lib/slider/themes/_base.scss b/projects/igniteui-angular/src/lib/slider/themes/_base.scss index 526a81716aa..c09f70821e2 100644 --- a/projects/igniteui-angular/src/lib/slider/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/slider/themes/_base.scss @@ -19,7 +19,6 @@ $_theme: $material; // https://github.com/IgniteUI/igniteui-angular/issues/11597 z-index: 0; height: rem(48px); - flex-grow: 1; align-items: center; transition: all .2s $out-quad; touch-action: pan-y pinch-zoom; @@ -267,7 +266,7 @@ $_theme: $material; &:focus div::before { box-shadow: none; } - + &:focus div::after { transform: scale(0); } diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.scss b/projects/igniteui-angular/src/lib/stepper/stepper.component.scss index dd684163cd7..c7019d1c431 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.scss +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.scss @@ -1,4 +1,3 @@ @use 'themes/base'; -@use 'themes/shared'; @use 'themes/light'; @use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss deleted file mode 100644 index 0ca60c75786..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@forward 'material'; -@forward 'bootstrap'; -@forward 'fluent'; -@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss deleted file mode 100644 index 86f61b7bbce..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'styles/themes/standalone' as *; -@use '../light/tokens' as *; - -$_theme: $bootstrap; - -@include themed-block(igx-stepper, bootstrap) { - -} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss deleted file mode 100644 index 8d56a722db4..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'styles/themes/standalone' as *; - -@include themed-block(igx-stepper, fluent) { - -} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss deleted file mode 100644 index 1dd5b995d6a..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'styles/themes/standalone' as *; - -@include themed-block(igx-stepper, indigo) { - -} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss deleted file mode 100644 index 6988a8e224a..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'styles/themes/standalone' as *; - -@include themed-block(igx-stepper, material) { - -}