From 1f903bb7c3e340d83b01781d129c5f7d1bb5b0e1 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 6 Nov 2024 17:27:28 +0200 Subject: [PATCH 001/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] 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/189] [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/189] 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) { - -} From 9e579bf3b33d38533783da050569269968908d9c Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Fri, 9 Jan 2026 16:25:29 +0200 Subject: [PATCH 132/189] fix(navbar): move icon padding to icon-button elements only (#16693) --- .../src/lib/navbar/themes/shared/_indigo.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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 e7bfe2984ae..426816c4dc7 100644 --- a/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss @@ -4,6 +4,11 @@ @include themed-block(igx-navbar, indigo) { %icon-size { + [igxIconButton], + igc-icon-button { + padding: rem(6px); + } + igx-icon, igc-icon { --component-size: var(--ig-size-medium); @@ -11,7 +16,6 @@ width: auto !important; height: auto !important; - padding: rem(6px); } } From 1459584d9036ad6f9e1dedcff815b35cb592adb4 Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Fri, 9 Jan 2026 16:27:47 +0200 Subject: [PATCH 133/189] refactor(chip): update chip states colors (#16691) --- .../src/lib/chips/themes/dark/_indigo.scss | 12 ++++++- .../src/lib/chips/themes/shared/_indigo.scss | 34 ++++++++----------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/projects/igniteui-angular/src/lib/chips/themes/dark/_indigo.scss b/projects/igniteui-angular/src/lib/chips/themes/dark/_indigo.scss index 32986d2fd18..ea4c44db0fc 100644 --- a/projects/igniteui-angular/src/lib/chips/themes/dark/_indigo.scss +++ b/projects/igniteui-angular/src/lib/chips/themes/dark/_indigo.scss @@ -16,12 +16,16 @@ @include m(success) { &:focus { @include e(item) { - box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: 800); + box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: 900); } } } @include m(warning) { + @include e(item) { + color: color($color: 'gray', $variant: 50); + } + &:focus { @include e(item) { box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: 900); @@ -48,4 +52,10 @@ color: contrast-color($color: 'primary', $variant: 900, $opacity: .2); } } + + @include mx(disabled, warning) { + @include e(item) { + color: color($color: 'gray', $variant: 50); + } + } } diff --git a/projects/igniteui-angular/src/lib/chips/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/chips/themes/shared/_indigo.scss index 808c0af24b1..699cc47fbb0 100644 --- a/projects/igniteui-angular/src/lib/chips/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/chips/themes/shared/_indigo.scss @@ -65,30 +65,31 @@ $_theme: $indigo; @include m(success) { @include e(item) { color: contrast-color($color: 'success', $variant: 900); + background: color($color: 'success', $variant: 800); + border-color: color($color: 'success', $variant: 800); } &:focus { @include e(item) { - color: contrast-color($color: 'success', $variant: 900); - background: color($color: 'success', $variant: 500); - border-color: color($color: 'success', $variant: 500); box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: 200); } } &:hover { @include e(item) { - color: contrast-color($color: 'success', $variant: 900); - background: color($color: 'success', $variant: 400); - border-color: color($color: 'success', $variant: 400); + background: color($color: 'success', $variant: 700); + border-color: color($color: 'success', $variant: 700); } } } @include m(warning) { + @include e(item) { + color: color($color: 'gray', $variant: 900); + } + &:focus { @include e(item) { - 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(3px) color($color: 'warn', $variant: 100); @@ -97,7 +98,6 @@ $_theme: $indigo; &:hover { @include e(item) { - color: contrast-color($color: 'warn', $variant: 900); background: color($color: 'warn', $variant: 400); border-color: color($color: 'warn', $variant: 400); } @@ -107,22 +107,21 @@ $_theme: $indigo; @include m(danger) { @include e(item) { color: contrast-color($color: 'error', $variant: 900); + background: color($color: 'error', $variant: 600); + border-color: color($color: 'error', $variant: 600); } &:focus { @include e(item) { color: contrast-color($color: 'error', $variant: 900); - background: color($color: 'error', $variant: 500); - border-color: color($color: 'error', $variant: 500); box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: 100); } } &:hover { @include e(item) { - color: contrast-color($color: 'error', $variant: 900); - background: color($color: 'error', $variant: 400); - border-color: color($color: 'error', $variant: 400); + background: color($color: 'error', $variant: 500); + border-color: color($color: 'error', $variant: 500); } } } @@ -154,16 +153,13 @@ $_theme: $indigo; @include mx(disabled, success) { @include e(item) { - color: contrast-color($color: 'success', $variant: 900); - background: color($color: 'success', $variant: 500); - border-color: color($color: 'success', $variant: 500); opacity: .4; } } @include mx(disabled, warning) { @include e(item) { - color: contrast-color($color: 'warn', $variant: 900); + color: color($color: 'gray', $variant: 900); background: color($color: 'warn', $variant: 500); border-color: color($color: 'warn', $variant: 500); opacity: .4; @@ -173,8 +169,8 @@ $_theme: $indigo; @include mx(disabled, danger) { @include e(item) { color: contrast-color($color: 'error', $variant: 900); - background: color($color: 'error', $variant: 500); - border-color: color($color: 'error', $variant: 500); + background: color($color: 'error', $variant: 600); + border-color: color($color: 'error', $variant: 600); opacity: .4; } } From cc50d1efc4eedbf02fac9b779bfbdcd1239a0b42 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Tue, 13 Jan 2026 10:39:04 +0200 Subject: [PATCH 134/189] fix(excel-filtering): fix styles (#16707) --- .../grid/_excel-filtering-theme.scss | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index d59ee284dab..dbade09697c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -8,8 +8,8 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The grid theme used to style the component. @mixin excel-filtering($theme) { - $variant: map.get($theme, '_meta', 'variant'); - $theme-variant: map.get($theme, '_meta', 'theme-variant'); + $variant: map.get($theme, '_meta', 'theme'); + $theme-variant: map.get($theme, '_meta', 'variant'); $bootstrap-theme: $variant == 'bootstrap'; $tree-node-indent: ( @@ -128,7 +128,7 @@ background: var-get($theme, 'filtering-row-background'); %igx-group-display { - --shadow: none; + --elevation: none; --item-background: #{var-get($theme, 'filtering-row-background')}; --item-hover-background: #{color($color: 'gray', $variant: 100)}; --item-selected-background: #{color($color: 'gray', $variant: 100)}; @@ -167,11 +167,14 @@ @if $theme-variant == 'light' { background: contrast-color($color: 'gray', $variant: 900); } @else { - background: color($color: 'surface', $variant: 500); + background: color($color: 'gray', $variant: 50); } %igx-group-display { --item-background: transparent; + @if $theme-variant == 'dark' { + --item-text-color: #{contrast-color($color: 'surface', $variant: 500)}; + } --border-color: transparent; --item-border-color: transparent; --item-focused-border-color: transparent; @@ -180,7 +183,7 @@ --item-selected-hover-border-color: transparent; --item-disabled-border: transparent; --disabled-selected-border-color: transparent; - --shadow: none; + --elevation: none; } %igx-group-item { @@ -239,10 +242,7 @@ %grid-excel-menu__header-actions { display: flex; margin-inline-start: auto; - - [igxButton] + [igxButton] { - margin-inline-start: rem(4px); - } + gap: rem(4px); %grid-excel-actions__action { padding: 0 !important; @@ -382,7 +382,7 @@ justify-content: space-between; @if $variant == 'indigo' { - padding-block: pad-block(rem(6px)); + padding-block: pad-block(rem(4px), rem(6px), rem(8px)); padding-inline: pad-inline(rem(12px)); margin-inline: rem(8px); margin-block-end: rem(4px); @@ -757,7 +757,6 @@ $header-comfortable: map.get($categories, 'header-comfortable'); $header-compact: map.get($categories, 'header-compact'); - %grid-excel-menu { %grid-excel-menu__header > h4 { @include type-style('h6') @@ -807,6 +806,10 @@ } } + %igx-group-item { + @include type-style('button'); + } + %grid-excel-menu__secondary--cosy { %grid-excel-menu__header > h4 { @include type-style('h6'); From 02dbfdb7d10bcdeb270127478ab66013acc20906 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Wed, 4 Feb 2026 13:58:37 +0200 Subject: [PATCH 135/189] style(textarea): add padding bottom to textarea in all themes (#16808) * style(textarea): add padding bottom to textarea in all themes * fix(textare): align material textarea styles with master --- .../input-group/src/input-group/themes/shared/bootstrap.scss | 2 +- .../input-group/src/input-group/themes/shared/fluent.scss | 2 +- .../input-group/src/input-group/themes/shared/indigo.scss | 2 +- .../input-group/src/input-group/themes/shared/material.scss | 4 +++- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss index 2026e6c1fcb..c8c95dbf9c0 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss @@ -108,7 +108,7 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include type-style(body-1); min-height: 100%; - padding-block: pad-block(rem(4px), rem(8px), rem(12px)) 0; + padding-block: pad-block(rem(4px), rem(8px), rem(12px)); padding-inline: pad-inline(rem(8px), rem(10px), rem(14px)); } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss index 75d916a017f..f4eb7a4b6e2 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss @@ -35,7 +35,7 @@ $_theme: $fluent; @include type-style(body-2); padding-inline: pad-inline(rem(8px)); - padding-block: pad-block(rem(6px), rem(10px), rem(14px)) 0; + padding-block: pad-block(rem(6px), rem(10px), rem(14px)); } @include e(file-input) { diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss index e09513ac9cc..0827b6eb90d 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss @@ -103,7 +103,7 @@ $_theme: $indigo; @include m(textarea-group) { @include e(textarea) { - padding-block: pad-block(rem(4px), rem(6px), rem(8px)) 0; + padding-block: pad-block(rem(4px), rem(6px), rem(8px)); } @include e(bundle) { diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss index 4f1f950e8cf..0d24a5d97f2 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss @@ -23,6 +23,8 @@ $input-bottom-spacing: rem(6px); %box-floating-text-area-label { @include type-style(caption); + --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))}; + translate: 0; inset-block-start: calc(var(--_input-top-spacing) / 4); } @@ -349,7 +351,7 @@ $input-bottom-spacing: rem(6px); } @include e(textarea) { - // This gives the drag handle some room from the field bottom border + padding-block-end: #{pad-block(rem(8px), rem(12px), rem(16px))}; border-bottom: rem(2px) solid transparent; } } From 9832c67263b3236cc6285328ec2e073ac41d8f35 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Thu, 19 Feb 2026 15:09:03 +0200 Subject: [PATCH 136/189] fix(input-group): fix cursor behaviour in input groups (#16869) * fix(input-group): fix cursor behaviour in input groups * fix(input-group): fix cursor behaviour in simple-combo * fix(combo): fix disabled toggle/clear button cursor * chore(combo): remove additional indigo cursor styles on disabled --- .../src/input-group/themes/_base.scss | 22 +++++++++++++++++-- .../src/input-group/themes/shared/indigo.scss | 2 -- .../simple-combo/simple-combo.component.html | 2 +- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss index 714a528ae02..de5fa1c94f6 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss @@ -95,24 +95,26 @@ $base-scale-size: ( [igxPrefix] { color: var-get($theme, 'input-prefix-color'); background: var-get($theme, 'input-prefix-background'); + cursor: default; } igx-suffix:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__clear-button, .igx-input-group__case-icon), [igxSuffix]:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__clear-button, .igx-input-group__case-icon) { color: var-get($theme, 'input-suffix-color'); background: var-get($theme, 'input-suffix-background'); + cursor: default; } @include e(toggle-button) { - cursor: pointer; color: var(--toggle-button-foreground); background: var(--toggle-button-background); + cursor: pointer; } @include e(clear-button) { - cursor: pointer; color: var(--clear-button-foreground); background: var(--clear-button-background); + cursor: pointer; } @include e(clear-icon) { @@ -526,6 +528,11 @@ $base-scale-size: ( @include e(toggle-button) { color: var(--toggle-button-foreground-disabled); background: var(--toggle-button-background-disabled); + cursor: default; + } + + @include e(clear-button) { + cursor: default; } @include e(clear-icon) { @@ -551,4 +558,15 @@ $base-scale-size: ( } } + + igx-combo .igx-input-group:not(.igx-input-group--disabled), + igx-select .igx-input-group:not(.igx-input-group--disabled) { + .igx-input-group__input, + igx-prefix, + [igxPrefix], + igx-suffix, + [igxSuffix] { + cursor: pointer; + } + } } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss index 0827b6eb90d..04ad56424bc 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss @@ -249,13 +249,11 @@ $_theme: $indigo; } @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/simple-combo/src/simple-combo/simple-combo.component.html b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.html index 4cc5824d244..0a3741a7afe 100644 --- a/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.html +++ b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.html @@ -26,7 +26,7 @@ @if (hasSelectedItem) { - @if (clearIconTemplate) { From 794e28c88a7ad13523c95cfd101f741327d08dda Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Sat, 21 Feb 2026 12:25:02 +0200 Subject: [PATCH 137/189] refactor(themes): change mechanism for scoped styles --- .../src/button-group/themes/_base.scss | 7 ++-- .../src/core/styles/themes/_standalone.scss | 41 +++++++++++-------- .../core/styles/themes/generators/_base.scss | 2 - .../core/src/services/theme/theme.token.ts | 17 +++++++- 4 files changed, 44 insertions(+), 23 deletions(-) diff --git a/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss b/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss index 9a18266e68b..159537c33c6 100644 --- a/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss +++ b/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss @@ -8,7 +8,8 @@ $_theme: $material; @include layer(base) { @include b(igx-button-group) { - --item-min-width: rem(42px); + --item-min-width: #{rem(42px)}; + --ig-icon-size: #{rem(18px)}; display: flex; box-shadow: var-get($_theme, 'elevation'); @@ -198,14 +199,14 @@ $_theme: $material; 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; diff --git a/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss b/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss index 0181fd84e77..2629c608ace 100644 --- a/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss @@ -22,15 +22,15 @@ @mixin themed-block($component, $theme, $variant: null) { $_theme: '' + $theme; - @layer ig.#{$_theme} { + @include layer(base) { @if $variant { - @container style(--ig-theme: #{$_theme}) and style(--ig-theme-variant: #{$variant}) { + @scope ([data-ig-theme=#{$_theme}][data-ig-theme-variant=#{$variant}]) { @include b($component) { @content; } } } @else { - @container style(--ig-theme: #{$_theme}) { + @scope ([data-ig-theme=#{$_theme}]) { @include b($component) { @content; } @@ -50,7 +50,7 @@ @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); + @include tokens($_t, $mode: 'scoped'); } } } @@ -78,21 +78,28 @@ /// // $result[1] = (primary: blue, secondary: green) /// // $result[2] = (tertiary: yellow, quaternary: purple) @function split-map($map, $pick-keys) { - $map-1: (); - $map-2: (); + $map-1: (); + $map-2: (); - @each $key, $value in $map { - $id: list.index($pick-keys, $key); + @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)); + @if $id { + $map-1: map.merge( + $map-1, + ( + $key: $value, + ) + ); + } @else { + $map-2: map.merge( + $map-2, + ( + $key: $value, + ) + ); + } } - } - @return ( - $map-1, - $map-2 - ); + @return ($map-1, $map-2); } diff --git a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss index fee428221e5..f3a76d5877a 100644 --- a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss @@ -80,8 +80,6 @@ $theme: map.get($schema, '_meta', 'theme'); $variant: map.get($schema, '_meta', 'variant'); - @layer ig.base, ig.#{$theme}; - @if not(list.index($exclude, 'palette')) { @include palette($palette); } diff --git a/projects/igniteui-angular/core/src/services/theme/theme.token.ts b/projects/igniteui-angular/core/src/services/theme/theme.token.ts index 7b93ddbe69d..e5dc1470986 100644 --- a/projects/igniteui-angular/core/src/services/theme/theme.token.ts +++ b/projects/igniteui-angular/core/src/services/theme/theme.token.ts @@ -5,14 +5,23 @@ export class ThemeToken { private document = inject(DOCUMENT); public subject: BehaviorSubject; - constructor(private t?: IgxTheme) { + constructor(private t?: IgxTheme, private v?: IgxThemeVariant) { const globalTheme = globalThis.window ?.getComputedStyle(this.document.body) .getPropertyValue("--ig-theme") .trim() || 'material' as IgxTheme; + const globalVariant = globalThis.window + ?.getComputedStyle(this.document.body) + .getPropertyValue("--ig-theme-variant") + .trim() || 'light' as IgxThemeVariant; + const _theme = t ?? globalTheme as IgxTheme; + const _variant = v ?? globalVariant as IgxThemeVariant; + this.subject = new BehaviorSubject(_theme); + this.document.documentElement.setAttribute("data-ig-theme", _theme); + this.document.documentElement.setAttribute("data-ig-theme-variant", _variant); } public onChange(callback: (theme: IgxTheme) => void) { @@ -44,7 +53,13 @@ const Theme = { IndigoDesign: "indigo", } as const; +const Variant = { + Light: "light", + Dark: "dark", +} + /** * Determines the component theme. */ export type IgxTheme = (typeof Theme)[keyof typeof Theme]; +export type IgxThemeVariant = (typeof Variant)[keyof typeof Variant]; From 1512cabda18700701bf8887bf9d44ac600417fda Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Sat, 21 Feb 2026 12:58:38 +0200 Subject: [PATCH 138/189] refactor(navdrawer): add missing styles --- .../src/navigation-drawer/themes/_base.scss | 23 ++++++++++++------- src/app/app.component.html | 2 +- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss index b2c0ef8735b..e8d5a201a36 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss @@ -54,7 +54,7 @@ $_theme: $material; } @include mx(mini, pinned) { - flex-basis: calc(var(--igx-mini-nav-drawer-size, #{var(--igx-nav-drawer-size--mini)}) + rem(1px)); + flex-basis: calc(var(--igx-mini-nav-drawer-size, var(--igx-nav-drawer-size--mini)) + rem(1px)); } @include e(aside) { @@ -63,17 +63,20 @@ $_theme: $material; min-height: 100%; overflow-x: hidden; background: var-get($_theme, 'background'); - top: 0; - bottom: 0; + inset: 0 auto; width: var(--igx-nav-drawer-size); inset-inline-start: 0; - z-index: 999; transition: width, padding, transform; transition-timing-function: $ease-in-out-quad; box-shadow: var-get($_theme, 'elevation'); padding: var(--aside-padding); border-inline-end: rem(1px) solid var-get($_theme, 'border-color'); border-radius: var-get($_theme, 'border-radius'); + + // additional popover overrides: + margin: 0; + border: none; + display: block; } @include e(aside, panning) { @@ -108,7 +111,7 @@ $_theme: $material; @include e(aside, mini) { transition-duration: .3s; - width: #{var(--igx-nav-drawer-size--mini)}; + width: var(--igx-nav-drawer-size--mini); min-width: fit-content; [igxDrawerItem] { @@ -130,7 +133,6 @@ $_theme: $material; @include e(aside, pinned) { position: relative; box-shadow: none; - z-index: 0; } @include e(aside, $mods: (pinned, collapsed)) { @@ -150,11 +152,16 @@ $_theme: $material; transition-delay: 0s, 0s; position: absolute; inset-inline-start: 0; - top: 0; + inset: 0; width: 100%; height: 100%; visibility: visible; - z-index: 999; + + // additional popover overrides: + margin: 0; + padding: 0; + border: none; + display: block; } @include e(overlay, panning) { diff --git a/src/app/app.component.html b/src/app/app.component.html index 78dbd3b5c30..718c01625fb 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,7 +3,7 @@ #navdrawer [enableGestures]="drawerState.enableGestures" id="navdrawer" - [isOpen]="drawerState.open" + [(isOpen)]="drawerState.open" [(pin)]="drawerState.pin" [position]="drawerState.position" > From 89fa34eb740877e0dbc3b7a4d6ae343da50ec6db Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Sat, 21 Feb 2026 13:12:33 +0200 Subject: [PATCH 139/189] refactor(themes): replace --igx prefixes with --ig --- .../src/action-strip/themes/_base.scss | 3 +-- .../badge/src/badge/themes/_base.scss | 4 ++-- .../badge/src/badge/themes/shared/indigo.scss | 2 +- .../button-group/themes/shared/_fluent.scss | 1 - .../button-group/themes/shared/_indigo.scss | 3 +-- .../checkbox/src/checkbox/themes/_base.scss | 6 ++--- .../src/chips/themes/shared/_indigo.scss | 4 ++-- .../combo/src/combo/themes/_base.scss | 4 ++-- .../src/combo/themes/shared/bootstrap.scss | 2 +- .../icon-button/_icon-button-theme.scss | 2 +- .../src/date-picker/themes/_base.scss | 2 +- .../src/drop-down/themes/shared/_indigo.scss | 1 - .../grids/pivot-grid/src/themes/_base.scss | 12 +++++----- .../src/input-group/themes/shared/fluent.scss | 6 ++--- .../src/navigation-drawer/themes/_base.scss | 22 +++++++++---------- .../progressbar/circular/themes/_base.scss | 4 ++-- .../radio/src/radio/themes/_base.scss | 6 ++--- .../snackbar/src/snackbar/themes/_base.scss | 6 ++--- .../src/snackbar/themes/shared/_fluent.scss | 12 +++++----- .../progressbar/circular/themes/_base.scss | 4 ++-- .../stepper/step/themes/shared/bootstrap.scss | 2 +- .../stepper/step/themes/shared/fluent.scss | 2 +- .../stepper/step/themes/shared/indigo.scss | 2 +- .../stepper/step/themes/shared/material.scss | 2 +- .../switch/src/switch/themes/_base.scss | 4 ++-- .../src/tabs/tabs/header/themes/_base.scss | 2 +- .../tabs/src/tabs/tabs/item/themes/_base.scss | 2 +- .../src/time-picker/themes/_base.scss | 4 ++-- src/styles/_app-layout.scss | 5 +---- 29 files changed, 62 insertions(+), 69 deletions(-) diff --git a/projects/igniteui-angular/action-strip/src/action-strip/themes/_base.scss b/projects/igniteui-angular/action-strip/src/action-strip/themes/_base.scss index e903a2d23d1..f0003072084 100644 --- a/projects/igniteui-angular/action-strip/src/action-strip/themes/_base.scss +++ b/projects/igniteui-angular/action-strip/src/action-strip/themes/_base.scss @@ -58,7 +58,6 @@ $_theme: $material; --component-size: var(--action-strip-size); --ig-icon-size: #{$icon-size}; - --igx-icon-size: #{$icon-size}; } } @@ -107,7 +106,7 @@ $_theme: $material; > [igxButton] { margin-inline-start: rem(4px); - + &:first-of-type { margin-inline-start: 0; } diff --git a/projects/igniteui-angular/badge/src/badge/themes/_base.scss b/projects/igniteui-angular/badge/src/badge/themes/_base.scss index 48c0220213c..5770d4d1cb5 100644 --- a/projects/igniteui-angular/badge/src/badge/themes/_base.scss +++ b/projects/igniteui-angular/badge/src/badge/themes/_base.scss @@ -15,8 +15,8 @@ $theme: $material; --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')}; + --ig-icon-size: #{sizable(rem(12px), rem(14px), rem(16px))}; + --ig-icon-color: #{var-get($theme, 'icon-color')}; display: inline-flex; justify-content: center; diff --git a/projects/igniteui-angular/badge/src/badge/themes/shared/indigo.scss b/projects/igniteui-angular/badge/src/badge/themes/shared/indigo.scss index aaee8a9394d..54db2ade96a 100644 --- a/projects/igniteui-angular/badge/src/badge/themes/shared/indigo.scss +++ b/projects/igniteui-angular/badge/src/badge/themes/shared/indigo.scss @@ -6,7 +6,7 @@ @use '../light/tokens' as *; @include themed-block(igx-badge, indigo) { - --igx-icon-size: #{sizable(rem(8px), rem(10px), rem(12px))}; + --ig-icon-size: #{sizable(rem(8px), rem(10px), rem(12px))}; @include type-style('button', false) { font-size: sizable(rem(9px), rem(10px), var(--ig-button-font-size)); diff --git a/projects/igniteui-angular/button-group/src/button-group/themes/shared/_fluent.scss b/projects/igniteui-angular/button-group/src/button-group/themes/shared/_fluent.scss index 01cb59963df..1edff571c00 100644 --- a/projects/igniteui-angular/button-group/src/button-group/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/button-group/src/button-group/themes/shared/_fluent.scss @@ -25,7 +25,6 @@ $_theme: $fluent; $icon-size: rem(18px); --ig-icon-size: #{$icon-size}; - --igx-icon-size: #{$icon-size}; } &:active { diff --git a/projects/igniteui-angular/button-group/src/button-group/themes/shared/_indigo.scss b/projects/igniteui-angular/button-group/src/button-group/themes/shared/_indigo.scss index 720f2a384a2..cc87330fd0d 100644 --- a/projects/igniteui-angular/button-group/src/button-group/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/button-group/src/button-group/themes/shared/_indigo.scss @@ -17,7 +17,7 @@ $_theme: $indigo; 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'); @@ -37,7 +37,6 @@ $_theme: $indigo; $icon-size: rem(16px); --ig-icon-size: #{$icon-size}; - --igx-icon-size: #{$icon-size}; } &:hover { diff --git a/projects/igniteui-angular/checkbox/src/checkbox/themes/_base.scss b/projects/igniteui-angular/checkbox/src/checkbox/themes/_base.scss index a8318b131d8..fac16063250 100644 --- a/projects/igniteui-angular/checkbox/src/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/checkbox/src/checkbox/themes/_base.scss @@ -139,7 +139,7 @@ $_theme: $material; width: var(--size); height: var(--size); - --igx-ripple-color: #{var-get($_theme, 'empty-color')}; + --ig-ripple-color: #{var-get($_theme, 'empty-color')}; } @include e(composite) { @@ -194,7 +194,7 @@ $_theme: $material; } @include e(composite-wrapper) { - --igx-ripple-color: #{var-get($_theme, 'error-color')}; + --ig-ripple-color: #{var-get($_theme, 'error-color')}; } @include e(label) { @@ -356,7 +356,7 @@ $_theme: $material; } @include e(composite-wrapper) { - --igx-ripple-color: #{var-get($_theme, 'fill-color')}; + --ig-ripple-color: #{var-get($_theme, 'fill-color')}; } &:hover { diff --git a/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss b/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss index 699cc47fbb0..8667dbb0432 100644 --- a/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss @@ -8,7 +8,7 @@ $_theme: $indigo; @include themed-block(igx-chip, indigo) { @include e(item) { - --igx-icon-size: #{sizable(rem(14px), rem(14px), rem(16px))}; + --ig-icon-size: #{sizable(rem(14px), rem(14px), rem(16px))}; --affix-margin: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1); padding-inline: #{sizable(rem(3px), rem(5px), rem(7px))}; @@ -179,4 +179,4 @@ $_theme: $indigo; @include themed-block(igx-chip-area, indigo) { padding: rem(4px); gap: rem(8px) -} \ No newline at end of file +} diff --git a/projects/igniteui-angular/combo/src/combo/themes/_base.scss b/projects/igniteui-angular/combo/src/combo/themes/_base.scss index e95203fefb7..6e67ea7e937 100644 --- a/projects/igniteui-angular/combo/src/combo/themes/_base.scss +++ b/projects/igniteui-angular/combo/src/combo/themes/_base.scss @@ -29,7 +29,7 @@ $theme: $base; } @include e(search) { - --igx-input-group-border-border-radius: 0; + --ig-input-group-border-border-radius: 0; padding-inline: var(--_search-input-inline-padding); padding-block: var(--_search-input-block-padding); @@ -48,7 +48,7 @@ $theme: $base; background: transparent; .igx-icon--inactive { - --igx-icon-disabled-color: color($color: 'gray', $variant: 600); + --ig-icon-disabled-color: color($color: 'gray', $variant: 600); opacity: 1; } diff --git a/projects/igniteui-angular/combo/src/combo/themes/shared/bootstrap.scss b/projects/igniteui-angular/combo/src/combo/themes/shared/bootstrap.scss index 7358bf3860c..1ad00d18e84 100644 --- a/projects/igniteui-angular/combo/src/combo/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/combo/src/combo/themes/shared/bootstrap.scss @@ -7,7 +7,7 @@ $_theme: $bootstrap; @include themed-block(igx-combo, bootstrap) { @include e(search) { - --igx-input-group-border-border-radius: 0; + --ig-input-group-border-border-radius: 0; igx-input-group { --size: #{rem(28px)}; diff --git a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss index 95811ac10ab..f285ecbf40b 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss @@ -93,7 +93,7 @@ ); igx-icon { - --igx-icon-size: #{$icon-in-button-size}; + --ig-icon-size: #{$icon-in-button-size}; --component-size: 2; display: flex; diff --git a/projects/igniteui-angular/date-picker/src/date-picker/themes/_base.scss b/projects/igniteui-angular/date-picker/src/date-picker/themes/_base.scss index 3752389d01f..97dc2ddbb33 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/themes/_base.scss +++ b/projects/igniteui-angular/date-picker/src/date-picker/themes/_base.scss @@ -28,7 +28,7 @@ $theme: $material; } igx-divider { - --igx-divider-color: #{var-get($theme, 'actions-divider-color')}; + --ig-divider-color: #{var-get($theme, 'actions-divider-color')}; } @include e(actions) { diff --git a/projects/igniteui-angular/drop-down/src/drop-down/themes/shared/_indigo.scss b/projects/igniteui-angular/drop-down/src/drop-down/themes/shared/_indigo.scss index 36c1e0d14e2..77a75bce79f 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/drop-down/src/drop-down/themes/shared/_indigo.scss @@ -14,7 +14,6 @@ $_theme: $indigo; --component-size: inherit; --ig-icon-size: #{$icon-size}; - --igx-icon-size: #{$icon-size}; } } diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/_base.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/_base.scss index 167465ffee2..73fcdc38427 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/themes/_base.scss +++ b/projects/igniteui-angular/grids/pivot-grid/src/themes/_base.scss @@ -25,11 +25,11 @@ $_theme: $material; input { transform: none; } - + [igxPrefix] { box-sizing: content-box; } - + .igx-input-group__bundle-main { padding-top: 0 !important; } @@ -82,7 +82,7 @@ $_theme: $material; } igx-icon { - --size: var(--igx-icon-size, #{rem(18px)}); + --size: var(--ig-icon-size, #{rem(18px)}); } @include e(header) { @@ -98,11 +98,11 @@ $_theme: $material; padding: 0 rem(8px); box-sizing: content-box !important; } - + .igx-chip__item { height: sizable(rem(18px), rem(20px), rem(22px)); } - + .igx-chip__content { padding: 0 rem(2px); } @@ -160,7 +160,7 @@ $_theme: $material; z-index: 10; igx-icon { - --size: var(--igx-icon-size, #{rem(18px)}); + --size: var(--ig-icon-size, #{rem(18px)}); } } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss index f4eb7a4b6e2..f5723345630 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss @@ -89,7 +89,7 @@ $_theme: $fluent; igx-suffix, [igxSuffix] { - color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900)); + color: var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900)); } } @@ -113,14 +113,14 @@ $_theme: $fluent; [igxPrefix], igx-suffix, [igxSuffix] { - color: var(--igx-input-group-disabled-text-color, var(--ig-gray-500)); + color: var(--ig-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)); + color: var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900)); } } diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss index e8d5a201a36..c967394f2d2 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss @@ -40,8 +40,8 @@ $_theme: $material; @include b(igx-nav-drawer) { // TODO: These should probably be a part of the design tokens schema - --igx-nav-drawer-size: #{rem(240px)}; - --igx-nav-drawer-size--mini: var(--nav-drawer-size--mini); + --ig-nav-drawer-size: #{rem(240px)}; + --ig-nav-drawer-size--mini: var(--nav-drawer-size--mini); flex-basis: 0; transition: flex-basis; @@ -50,21 +50,22 @@ $_theme: $material; flex-shrink: 0; @include m(pinned) { - flex-basis: var(--igx-nav-drawer-size); + flex-basis: var(--ig-nav-drawer-size); } @include mx(mini, pinned) { - flex-basis: calc(var(--igx-mini-nav-drawer-size, var(--igx-nav-drawer-size--mini)) + rem(1px)); + flex-basis: calc(var(--ig-mini-nav-drawer-size, var(--ig-nav-drawer-size--mini)) + rem(1px)); } @include e(aside) { position: fixed; + display: block; height: 100%; min-height: 100%; overflow-x: hidden; background: var-get($_theme, 'background'); inset: 0 auto; - width: var(--igx-nav-drawer-size); + width: var(--ig-nav-drawer-size); inset-inline-start: 0; transition: width, padding, transform; transition-timing-function: $ease-in-out-quad; @@ -76,7 +77,6 @@ $_theme: $material; // additional popover overrides: margin: 0; border: none; - display: block; } @include e(aside, panning) { @@ -111,7 +111,7 @@ $_theme: $material; @include e(aside, mini) { transition-duration: .3s; - width: var(--igx-nav-drawer-size--mini); + width: var(--ig-nav-drawer-size--mini); min-width: fit-content; [igxDrawerItem] { @@ -127,7 +127,7 @@ $_theme: $material; @include e(aside, normal) { transition-duration: .3s; - width: var(--igx-nav-drawer-size); + width: var(--ig-nav-drawer-size); } @include e(aside, pinned) { @@ -223,9 +223,9 @@ $_theme: $material; box-shadow: none; igx-icon { - width: var(--igx-icon-size, rem(24px)); - height: var(--igx-icon-size, rem(24px)); - font-size: var(--igx-icon-size, rem(24px)); + width: var(--ig-icon-size, rem(24px)); + height: var(--ig-icon-size, rem(24px)); + font-size: var(--ig-icon-size, rem(24px)); margin: 0; } diff --git a/projects/igniteui-angular/progressbar/src/progressbar/circular/themes/_base.scss b/projects/igniteui-angular/progressbar/src/progressbar/circular/themes/_base.scss index a00c77b1d91..435fb92eea8 100644 --- a/projects/igniteui-angular/progressbar/src/progressbar/circular/themes/_base.scss +++ b/projects/igniteui-angular/progressbar/src/progressbar/circular/themes/_base.scss @@ -91,11 +91,11 @@ $theme: $base; transform-origin: center; @include e(gradient-start) { - stop-color: var(--igx-circular-bar-fill-color-default-end, var(--fill-color-default-end)); + stop-color: var(--ig-circular-bar-fill-color-default-end, var(--fill-color-default-end)); } @include e(gradient-end) { - stop-color: var(--igx-circular-bar-fill-color-default-start, var(--fill-color-default-start)); + stop-color: var(--ig-circular-bar-fill-color-default-start, var(--fill-color-default-start)); } @include e(inner) { diff --git a/projects/igniteui-angular/radio/src/radio/themes/_base.scss b/projects/igniteui-angular/radio/src/radio/themes/_base.scss index 08a846b9052..b5dd172c7c5 100644 --- a/projects/igniteui-angular/radio/src/radio/themes/_base.scss +++ b/projects/igniteui-angular/radio/src/radio/themes/_base.scss @@ -110,7 +110,7 @@ $_theme: $material; color: var-get($_theme, 'label-color'); user-select: none; - --igx-ripple-color: #{var-get($_theme, 'empty-color')}; + --ig-ripple-color: #{var-get($_theme, 'empty-color')}; &::before, &::after { @@ -180,7 +180,7 @@ $_theme: $material; @include m(checked) { @include e(composite) { - --igx-ripple-color: #{var-get($_theme, 'fill-color')}; + --ig-ripple-color: #{var-get($_theme, 'fill-color')}; &::before { border: var(--border-width) solid @@ -293,7 +293,7 @@ $_theme: $material; @include m(invalid) { @include e(composite) { - --igx-ripple-color: #{var-get($_theme, 'error-color')}; + --ig-ripple-color: #{var-get($_theme, 'error-color')}; &::after { border: var(--border-width) solid diff --git a/projects/igniteui-angular/snackbar/src/snackbar/themes/_base.scss b/projects/igniteui-angular/snackbar/src/snackbar/themes/_base.scss index c01717fb208..afa0b3224b6 100644 --- a/projects/igniteui-angular/snackbar/src/snackbar/themes/_base.scss +++ b/projects/igniteui-angular/snackbar/src/snackbar/themes/_base.scss @@ -16,9 +16,9 @@ $theme: $material; // TODO: These properties work now, but they alter the design compared to before, // we need to verify if they are needed at all. - // Seems like the --igx-button-foreground is needed in the fluent theme; - // --igx-button-background: transparent; - // --igx-button-foreground: #{var-get($theme, 'button-color')}; + // Seems like the --ig-button-foreground is needed in the fluent theme; + // --ig-button-background: transparent; + // --ig-button-foreground: #{var-get($theme, 'button-color')}; position: relative; display: flex; diff --git a/projects/igniteui-angular/snackbar/src/snackbar/themes/shared/_fluent.scss b/projects/igniteui-angular/snackbar/src/snackbar/themes/shared/_fluent.scss index 0d2e23be0d4..3a3e5964b64 100644 --- a/projects/igniteui-angular/snackbar/src/snackbar/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/snackbar/src/snackbar/themes/shared/_fluent.scss @@ -7,12 +7,12 @@ $_theme: $fluent; @include themed-block(igx-snackbar, fluent) { - --igx-button-foreground: #{var-get($_theme, 'button-color')}; - --igx-button-hover-foreground: var(--igx-button-foreground); - --igx-button-focus-foreground: var(--igx-button-foreground); - --igx-button-focus-hover-foreground: var(--igx-button-foreground); - --igx-button-active-foreground: var(--igx-button-foreground); - --igx-button-focus-visible-foreground: var(--igx-button-foreground); + --ig-button-foreground: #{var-get($_theme, 'button-color')}; + --ig-button-hover-foreground: var(--ig-button-foreground); + --ig-button-focus-foreground: var(--ig-button-foreground); + --ig-button-focus-hover-foreground: var(--ig-button-foreground); + --ig-button-active-foreground: var(--ig-button-foreground); + --ig-button-focus-visible-foreground: var(--ig-button-foreground); @include e(message) { @include type-style(caption) { diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/_base.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/_base.scss index a00c77b1d91..435fb92eea8 100644 --- a/projects/igniteui-angular/src/lib/progressbar/circular/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/_base.scss @@ -91,11 +91,11 @@ $theme: $base; transform-origin: center; @include e(gradient-start) { - stop-color: var(--igx-circular-bar-fill-color-default-end, var(--fill-color-default-end)); + stop-color: var(--ig-circular-bar-fill-color-default-end, var(--fill-color-default-end)); } @include e(gradient-end) { - stop-color: var(--igx-circular-bar-fill-color-default-start, var(--fill-color-default-start)); + stop-color: var(--ig-circular-bar-fill-color-default-start, var(--fill-color-default-start)); } @include e(inner) { diff --git a/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/bootstrap.scss b/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/bootstrap.scss index 7fcac6e9a62..6a1cbb767e5 100644 --- a/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/bootstrap.scss @@ -133,7 +133,7 @@ $_theme: $bootstrap; min-width: $indicator-size; > igx-icon { - --size: var(--igx-icon-size, #{rem(18px)}); + --size: var(--ig-icon-size, #{rem(18px)}); } > igx-icon, diff --git a/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/fluent.scss b/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/fluent.scss index 634d01cf7dd..9461a7b3a01 100644 --- a/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/fluent.scss +++ b/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/fluent.scss @@ -120,7 +120,7 @@ $_theme: $fluent; min-width: $indicator-size; > igx-icon { - --size: var(--igx-icon-size, #{rem(18px)}); + --size: var(--ig-icon-size, #{rem(18px)}); color: inherit; } diff --git a/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/indigo.scss b/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/indigo.scss index 88dab4502d4..9243295338a 100644 --- a/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/indigo.scss +++ b/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/indigo.scss @@ -128,7 +128,7 @@ $_theme: $indigo; min-width: $indicator-size; > igx-icon { - --size: #{var(--igx-icon--size, #{rem(14px)})}; + --size: #{var(--ig-icon--size, #{rem(14px)})}; } > igx-icon, diff --git a/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/material.scss b/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/material.scss index 27942f97449..81f7fb173c7 100644 --- a/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/material.scss +++ b/projects/igniteui-angular/stepper/src/stepper/step/themes/shared/material.scss @@ -115,7 +115,7 @@ $_theme: $material; min-width: $indicator-size; > igx-icon { - --size: var(--igx-icon-size, #{rem(18px)}); + --size: var(--ig-icon-size, #{rem(18px)}); color: inherit; } diff --git a/projects/igniteui-angular/switch/src/switch/themes/_base.scss b/projects/igniteui-angular/switch/src/switch/themes/_base.scss index a786aa020f1..a8be7b6e890 100644 --- a/projects/igniteui-angular/switch/src/switch/themes/_base.scss +++ b/projects/igniteui-angular/switch/src/switch/themes/_base.scss @@ -125,7 +125,7 @@ $_theme: $material; transition: $input-transition; transition-delay: var(--_transition-delay); - --igx-ripple-color: #{var-get($_theme, 'track-off-color')}; + --ig-ripple-color: #{var-get($_theme, 'track-off-color')}; } @include e(composite-thumb) { @@ -217,7 +217,7 @@ $_theme: $material; background: var-get($_theme, 'track-on-color'); border-color: var-get($_theme, 'border-on-color'); - --igx-ripple-color: #{var-get($_theme, 'thumb-on-color')}; + --ig-ripple-color: #{var-get($_theme, 'thumb-on-color')}; } @include e(composite-thumb) { diff --git a/projects/igniteui-angular/tabs/src/tabs/tabs/header/themes/_base.scss b/projects/igniteui-angular/tabs/src/tabs/tabs/header/themes/_base.scss index 1795572cdef..93d8fbd54e5 100644 --- a/projects/igniteui-angular/tabs/src/tabs/tabs/header/themes/_base.scss +++ b/projects/igniteui-angular/tabs/src/tabs/tabs/header/themes/_base.scss @@ -16,7 +16,7 @@ $theme-variant: map.get($theme, '_meta', 'theme-variant'); @include layer(base) { @include b(igx-tab-header) { - --igx-ripple-color: var(--tab-ripple-color); + --ig-ripple-color: var(--tab-ripple-color); display: inline-flex; justify-content: center; diff --git a/projects/igniteui-angular/tabs/src/tabs/tabs/item/themes/_base.scss b/projects/igniteui-angular/tabs/src/tabs/tabs/item/themes/_base.scss index fbc6b042008..3fd241895be 100644 --- a/projects/igniteui-angular/tabs/src/tabs/tabs/item/themes/_base.scss +++ b/projects/igniteui-angular/tabs/src/tabs/tabs/item/themes/_base.scss @@ -45,7 +45,7 @@ $theme: $material; } @include b(igx-tabs-header-button) { - --igx-ripple-color: var(--button-ripple-color); + --ig-ripple-color: var(--button-ripple-color); display: flex; align-items: center; diff --git a/projects/igniteui-angular/time-picker/src/time-picker/themes/_base.scss b/projects/igniteui-angular/time-picker/src/time-picker/themes/_base.scss index 2d3c69b1d43..375f31e04fc 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/themes/_base.scss +++ b/projects/igniteui-angular/time-picker/src/time-picker/themes/_base.scss @@ -23,7 +23,7 @@ $theme: $material; min-width: fit-content; igx-divider { - --igx-divider-color: #{var-get($theme, 'divider-color')}; + --ig-divider-color: #{var-get($theme, 'divider-color')}; } @include e(header) { @@ -176,7 +176,7 @@ $theme: $material; @include e(header) { min-width: rem(168px); - } + } @include e(body) { flex-grow: 1; diff --git a/src/styles/_app-layout.scss b/src/styles/_app-layout.scss index 8865e9d8140..ea4bd7a083f 100644 --- a/src/styles/_app-layout.scss +++ b/src/styles/_app-layout.scss @@ -38,10 +38,7 @@ position: absolute; display: flex; flex-flow: row nowrap; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; overflow: hidden; } From ff69467af374186fab027a6a2465c9d69f28a707 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Sat, 21 Feb 2026 14:59:26 +0200 Subject: [PATCH 140/189] refactor(navdrawer): streamline animation --- .../icon-button/_icon-button-theme.scss | 2 +- .../core/src/core/styles/themes/_core.scss | 56 ++----------------- .../src/core/styles/themes/_standalone.scss | 2 - .../navigation-drawer.component.ts | 1 - .../src/navigation-drawer/themes/_base.scss | 22 +++----- .../properties-panel.component.scss | 3 + src/styles/_variables.scss | 8 +-- 7 files changed, 22 insertions(+), 72 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss index f285ecbf40b..03c15b54b46 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss @@ -105,7 +105,7 @@ color var(--_init-transition, 0.15s) ease-out, background var(--_init-transition, 0.15s) ease-out; - &::after { + ::after { position: absolute; content: ''; pointer-events: none; diff --git a/projects/igniteui-angular/core/src/core/styles/themes/_core.scss b/projects/igniteui-angular/core/src/core/styles/themes/_core.scss index 96598653ae2..a953aad96ca 100644 --- a/projects/igniteui-angular/core/src/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/core/src/core/styles/themes/_core.scss @@ -153,24 +153,8 @@ inherits: true; } - // Component styles - @include ripple.component(); - @include action-strip.component(); - @include avatar.component(); - @include badge.component(); - @include banner.component(); - @include bottom-nav.component(); + // Global component styles either angular directives or shared component styles @include button.component(); - @include button-group.component(); - @include divider.component(); - @include calendar.component(); - @include card.component(); - @include carousel.component(); - @include checkbox.component(); - @include chip.component(); - @include column-actions.component(); - @include combo.component(); - @include select.component(); @include category-chart.component(); @include data-chart.component(); @include doughnut-chart.component(); @@ -179,47 +163,17 @@ @include gauge.component(); @include geo-map.component(); @include graph.component(); - @include pie-chart.component(); - @include shape-chart.component(); - @include sparkline.component(); - @include date-picker.component(); - @include date-range-picker.component(); - @include dialog.component(); - @include dock-manager.component(); - @include rating.component(); - @include drop-down.component(); - @include expansion-panel.component(); - @include grid.component(); - @include grid-summary.component(); - @include grid-toolbar.component(); - @include pivot-data-selector.component(); @include highlight.component(); - @include icon.component(); @include icon-button.component(); - @include input-group.component(); @include label.component(); - @include list.component(); - @include navbar.component(); - @include navdrawer.component(); @include overlay.component(); - @include paginator.component(); - @include linear-progress.component(); - @include circular-progress.component(); - @include radio.component(); - @include query-builder.component(); + @include pie-chart.component(); + @include ripple.component(); + @include shape-chart.component(); @include scrollbar.component(); - @include slider.component(); - @include splitter.component(); - @include snackbar.component(); - @include switch.component(); - @include stepper.component(); - @include tabs.component(); - @include toast.component(); + @include sparkline.component(); @include tooltip.component(); - @include time-picker.component(); - @include tree.component(); @include watermark.component(); - @include file-input.component(); // Build the component dependency-tree @include base.dependecy-tree(base.$components); diff --git a/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss b/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss index 2629c608ace..371cc6f89cb 100644 --- a/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss @@ -57,8 +57,6 @@ /// 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 /// diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts index 3204415483c..24a8d246917 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts @@ -862,7 +862,6 @@ export class IgxNavigationDrawerComponent implements this.renderer.setStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : ''); } else { this.renderer.setStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : ''); - this.renderer.setStyle(this.drawer, '-webkit-transform', x ? 'translate3d(' + x + 'px,0,0)' : ''); } if (opacity !== undefined) { this.renderer.setStyle(this.overlay, 'opacity', opacity); diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss index c967394f2d2..bc7254ec00b 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss @@ -42,12 +42,10 @@ $_theme: $material; // TODO: These should probably be a part of the design tokens schema --ig-nav-drawer-size: #{rem(240px)}; --ig-nav-drawer-size--mini: var(--nav-drawer-size--mini); + --ig-nav-drawer-transition-duration: .3s; - flex-basis: 0; - transition: flex-basis; - transition-duration: .3s; - transition-timing-function: $ease-out-quad; - flex-shrink: 0; + transition-duration: var(--ig-nav-drawer-transition-duration); + flex: auto 0 0; @include m(pinned) { flex-basis: var(--ig-nav-drawer-size); @@ -67,12 +65,11 @@ $_theme: $material; inset: 0 auto; width: var(--ig-nav-drawer-size); inset-inline-start: 0; - transition: width, padding, transform; - transition-timing-function: $ease-in-out-quad; box-shadow: var-get($_theme, 'elevation'); padding: var(--aside-padding); border-inline-end: rem(1px) solid var-get($_theme, 'border-color'); border-radius: var-get($_theme, 'border-radius'); + contain: content paint layout; // additional popover overrides: margin: 0; @@ -110,7 +107,7 @@ $_theme: $material; } @include e(aside, mini) { - transition-duration: .3s; + transition-duration: var(--ig-nav-drawer-transition-duration); width: var(--ig-nav-drawer-size--mini); min-width: fit-content; @@ -126,7 +123,7 @@ $_theme: $material; } @include e(aside, normal) { - transition-duration: .3s; + transition-duration: var(--ig-nav-drawer-transition-duration); width: var(--ig-nav-drawer-size); } @@ -140,15 +137,14 @@ $_theme: $material; width: 0; overflow: hidden; border: none; - padding: 0; + padding-inline: 0; } @include e(overlay) { opacity: 1; background: color(null, 'gray', 500, .54); transition: opacity, visibility; - transition-duration: .3s, .3s; - transition-timing-function: ease-in, step-start; + transition-duration: var(--ig-nav-drawer-transition-duration), var(--ig-nav-drawer-transition-duration); transition-delay: 0s, 0s; position: absolute; inset-inline-start: 0; @@ -175,7 +171,6 @@ $_theme: $material; } @include e(overlay, hidden) { - transition-timing-function: ease-in-out, step-end; visibility: hidden; opacity: 0; } @@ -212,6 +207,7 @@ $_theme: $material; text-decoration: none; border: none; justify-content: flex-start; + contain: paint layout content; igx-icon { --component-size: 3; diff --git a/src/app/properties-panel/properties-panel.component.scss b/src/app/properties-panel/properties-panel.component.scss index 73fc359c828..4cf89f0475a 100644 --- a/src/app/properties-panel/properties-panel.component.scss +++ b/src/app/properties-panel/properties-panel.component.scss @@ -1,7 +1,10 @@ @use 'igniteui-theming/sass/bem' as *; @include b(properties-panel) { + isolation: isolate; + contain: layout paint content; padding: 0.5rem; + min-width: fit-content; igx-input-group { --ig-size: var(--ig-size-small); diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 6cb7197c7be..5b5bccdf232 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/core/src/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 b0c7e00eabc3845c95999ef69cc45d68f1dc374b Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Sat, 21 Feb 2026 15:03:03 +0200 Subject: [PATCH 141/189] refactor(themes): bring back the grid theme --- projects/igniteui-angular/core/src/core/styles/themes/_core.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/core/src/core/styles/themes/_core.scss b/projects/igniteui-angular/core/src/core/styles/themes/_core.scss index a953aad96ca..9ec9c6c7a27 100644 --- a/projects/igniteui-angular/core/src/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/core/src/core/styles/themes/_core.scss @@ -163,6 +163,7 @@ @include gauge.component(); @include geo-map.component(); @include graph.component(); + @include grid.component(); @include highlight.component(); @include icon-button.component(); @include label.component(); From 4f8d8ec784490799da66951a671716deeceaf603 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Sat, 21 Feb 2026 22:25:42 +0200 Subject: [PATCH 142/189] docs: fix sassdoc for _standalone.scss --- .../core/src/core/styles/themes/_standalone.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss b/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss index 371cc6f89cb..54cfd8ab810 100644 --- a/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss @@ -11,14 +11,14 @@ } } -/// Includes a block element (@see block) for a specific component, theme, and variant. +/// Includes a block element 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 +/// @output The styles defined within the block will be scoped to elements matching the specified theme and variant. @mixin themed-block($component, $theme, $variant: null) { $_theme: '' + $theme; @@ -45,7 +45,7 @@ /// @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 +/// @output The CSS variables defined within the tokens will be scoped to elements matching each theme and variant. @mixin themes($component, $tokens, $variant) { @each $theme in ('material', 'bootstrap', 'fluent', 'indigo') { @include themed-block($component, $theme, $variant) { @@ -75,6 +75,7 @@ /// $result: split-map($colors, (primary, secondary)); /// // $result[1] = (primary: blue, secondary: green) /// // $result[2] = (tertiary: yellow, quaternary: purple) +/// @returns A list containing two maps: the first with the picked keys and the second with the remaining keys. @function split-map($map, $pick-keys) { $map-1: (); $map-2: (); From c24ec1a1240c6d4e4afe4ef80cab683f409276ba Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 24 Feb 2026 10:42:06 +0200 Subject: [PATCH 143/189] refactor(themes): update standalone mixins --- .../core/src/core/styles/themes/_standalone.scss | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss b/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss index 54cfd8ab810..bde827ab6ee 100644 --- a/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss @@ -6,14 +6,15 @@ @forward 'igniteui-theming/sass/bem'; @mixin layer($name) { - @layer ig.#{$name} { + $_layer: 'ig.' + $name; + + @layer #{$_layer} { @content; } } /// Includes a block element 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. @@ -60,10 +61,6 @@ /// @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, From bcb01ec4914e313f9e2886a640e6b7cb766d18c0 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 5 Mar 2026 17:22:54 +0200 Subject: [PATCH 144/189] feat(input-group): pass hints QueryList from wrapper components to input-group - Fix styling issues - Wrapper components (combo, select, date-picker, time-picker,date-range-picker) now forward their @ContentChildren hints to the inner igx-input-group, matching the existing pattern for prefixes and suffixes. This ensures @if (hasHints) works correctly when hints are dynamically added or removed through wrapper components. --- .../combo/src/combo/combo.common.ts | 9 +- .../styles/components/label/_label-theme.scss | 1 - .../src/date-picker/picker-base.directive.ts | 9 +- .../input-group/input-group.component.html | 18 +- .../src/input-group/input-group.component.ts | 11 +- .../src/input-group/themes/_base.scss | 44 ++--- .../input-group/themes/shared/bootstrap.scss | 80 ++++----- .../src/input-group/themes/shared/fluent.scss | 4 +- .../src/input-group/themes/shared/indigo.scss | 1 - .../input-group/themes/shared/material.scss | 166 +++++++++--------- .../select/src/select/select.component.ts | 7 + .../input-group-showcase.sample.html | 2 +- 12 files changed, 178 insertions(+), 174 deletions(-) diff --git a/projects/igniteui-angular/combo/src/combo/combo.common.ts b/projects/igniteui-angular/combo/src/combo/combo.common.ts index 83c9a2c1903..98e3df674b6 100644 --- a/projects/igniteui-angular/combo/src/combo/combo.common.ts +++ b/projects/igniteui-angular/combo/src/combo/combo.common.ts @@ -46,7 +46,7 @@ import { } from 'igniteui-angular/core'; import { IForOfState, IgxForOfDirective } from 'igniteui-angular/directives'; import { IgxIconService } from 'igniteui-angular/icon'; -import { IGX_INPUT_GROUP_TYPE, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupType, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IGX_INPUT_GROUP_TYPE, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupType, IgxInputState, IgxHintDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxComboDropDownComponent } from './combo-dropdown.component'; import { IgxComboAPIService } from './combo.api'; import { @@ -772,6 +772,9 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh @ContentChildren(IgxSuffixDirective, { descendants: true }) protected suffixes: QueryList; + @ContentChildren(IgxHintDirective, { descendants: true }) + protected contentHints: QueryList; + @ViewChildren(IgxSuffixDirective) protected internalSuffixes: QueryList; @@ -1018,6 +1021,10 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh ]); this.inputGroup.suffixes = mergedSuffixes; } + + if (this.inputGroup) { + this.inputGroup.hints = this.contentHints; + } } /** @hidden @internal */ diff --git a/projects/igniteui-angular/core/src/core/styles/components/label/_label-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/label/_label-theme.scss index e79c62f3e97..61d39544d5c 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/label/_label-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/label/_label-theme.scss @@ -20,7 +20,6 @@ position: relative; color: var-get($theme, 'color'); max-width: 100%; - line-height: normal; [dir='rtl'] & { transform-origin: top right; diff --git a/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts b/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts index d9d005be4fb..ac5ba3d7937 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts +++ b/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts @@ -6,7 +6,7 @@ import { } from '@angular/core'; import { merge, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { IGX_INPUT_GROUP_TYPE, IgxInputGroupComponent, IgxInputGroupType, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IGX_INPUT_GROUP_TYPE, IgxInputGroupComponent, IgxInputGroupType, IgxHintDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { DateRange, EditorProvider, @@ -287,6 +287,9 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider @ContentChildren(IgxSuffixDirective, { descendants: true }) protected suffixes: QueryList; + @ContentChildren(IgxHintDirective, { descendants: true }) + protected contentHints: QueryList; + @ViewChild(IgxInputGroupComponent) protected inputGroup: IgxInputGroupComponent; @@ -355,6 +358,10 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider if (this.inputGroup && this.suffixes?.length > 0) { this.inputGroup.suffixes = this.suffixes; } + + if (this.inputGroup) { + this.inputGroup.hints = this.contentHints; + } } /** @hidden @internal */ diff --git a/projects/igniteui-angular/input-group/src/input-group/input-group.component.html b/projects/igniteui-angular/input-group/src/input-group/input-group.component.html index bb2d68c1e66..893c7095f9e 100644 --- a/projects/igniteui-angular/input-group/src/input-group/input-group.component.html +++ b/projects/igniteui-angular/input-group/src/input-group/input-group.component.html @@ -34,11 +34,11 @@ @if (isFileType && isFilled) { @@ -87,7 +87,9 @@
-
- -
+ @if (hasHints) { +
+ +
+ } diff --git a/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts b/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts index 046d31e69c9..86b6bbacfd2 100644 --- a/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts +++ b/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts @@ -117,8 +117,8 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh public hasWarning = false; /** @hidden */ - @ContentChildren(IgxHintDirective, { read: IgxHintDirective }) - protected hints: QueryList; + @ContentChildren(IgxHintDirective, { read: IgxHintDirective, descendants: true }) + protected _hints: QueryList; @ContentChildren(IgxPrefixDirective, { read: IgxPrefixDirective, descendants: true }) protected _prefixes: QueryList; @@ -279,7 +279,12 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh * ``` */ public get hasHints() { - return this.hints.length > 0; + return this._hints.length > 0; + } + + /** @hidden @internal */ + public set hints(items: QueryList) { + this._hints = items; } /** @hidden @internal */ diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss index de5fa1c94f6..dcc0602360c 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss @@ -8,34 +8,13 @@ @use './light/tokens' as *; $theme: $base; - -$required-symbol: '*'; $transition-timing: .25s $out-cubic; -// This creates an inverse relationship -// between the value of the base scale size and -// the sizing of all inner elements. -// i.e. the bigger the scale size, -// the smaller the padding of the inner items. -$base-scale-size: ( - 'comfortable': 16px, - 'cosy': 19px, - 'compact': 22px -); - @include layer(base) { - %bundle-start-end { - display: flex; - min-width: 0; - min-height: 100%; - grid-row: var(--_bundle-row); - } - @include b(igx-input-group) { @include sizable(); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --_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; @@ -52,7 +31,6 @@ $base-scale-size: ( display: grid; grid-template-columns: var(--_bundle-template-columns); - grid-template-rows: var(--_bundle-template-rows); position: relative; color: var-get($theme, 'idle-text-color'); @@ -130,7 +108,6 @@ $base-scale-size: ( // Safari can't handle subgrid correctly that's why i need to add the template here grid-template-columns: var(--_bundle-template-columns); - grid-template-rows: subgrid; grid-row: var(--_bundle-row); position: relative; max-width: 100%; @@ -149,13 +126,18 @@ $base-scale-size: ( } @include e(bundle-start) { - @extend %bundle-start-end; + display: flex; + min-width: 0; + min-height: 100%; + grid-row: var(--_bundle-row); grid-column: 1; } @include e(bundle-end) { - @extend %bundle-start-end; - + display: flex; + min-width: 0; + min-height: 100%; + grid-row: var(--_bundle-row); grid-column: 3; } @@ -176,6 +158,7 @@ $base-scale-size: ( box-shadow: none; text-overflow: ellipsis; z-index: 0; + height: auto; &::-webkit-input-placeholder { line-height: normal; @@ -262,12 +245,6 @@ $base-scale-size: ( grid-row: var(--_hint-row); grid-column: 1 / -1; overflow-wrap: anywhere; - - &:empty { - --_hint-row: 1; - visibility: hidden; - z-index: -1; - } } @include e(file-input) { @@ -277,6 +254,7 @@ $base-scale-size: ( height: var-get($theme, 'size'); color: var-get($theme, 'placeholder-color'); grid-column: 3 / -2; + grid-row: 1; span { @include ellipsis(); @@ -352,8 +330,6 @@ $base-scale-size: ( } @include m(textarea-group) { - --_bundle-template-rows: auto auto auto; - @include e(bundle) { height: auto; } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss index c8c95dbf9c0..d95c15b8b55 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss @@ -10,45 +10,31 @@ $border-style: solid; $border-color: var-get($_theme, 'border-color'); $border-radius: var-get($_theme, 'border-border-radius'); -@layer ig.bootstrap { - @container style(--ig-theme: bootstrap) { - %border-styles { - border-style: $border-style; - border-color: $border-color; - } - %disabled-styles { - background: var-get($_theme, 'border-disabled-background'); - color: var-get($_theme, 'disabled-text-color'); - border-color: var-get($_theme, 'disabled-border-color'); - } +@include themed-block(igx-input-group, bootstrap) { + --_bundle-template-rows: revert; + --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(10px), rem(14px))}; - igx-input-group:not(.igx-input-group--prefixed, .igx-input-group--file) { - .igx-input-group__bundle-main { - border-start-start-radius: $border-radius; - border-end-start-radius: $border-radius; - } + &:not(.igx-input-group--prefixed, .igx-input-group--file) { + .igx-input-group__bundle-main { + border-start-start-radius: $border-radius; + border-end-start-radius: $border-radius; } + } - igx-input-group:not(.igx-input-group--suffixed) { - .igx-input-group__bundle-main { - border-start-end-radius: $border-radius; - border-end-end-radius: $border-radius; - border-inline-start-width: $border-size; - } + &:not(.igx-input-group--suffixed) { + .igx-input-group__bundle-main { + border-start-end-radius: $border-radius; + border-end-end-radius: $border-radius; + border-inline-start-width: $border-size; } + } - igx-input-group:not(.igx-input-group--textarea-group) { - .igx-input-group__bundle { - border-radius: $border-radius; - } + &:not(.igx-input-group--textarea-group) { + .igx-input-group__bundle { + border-radius: $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); @@ -64,8 +50,8 @@ $border-radius: var-get($_theme, 'border-border-radius'); } @include e(upload) { - @extend %border-styles; - + border-style: $border-style; + border-color: $border-color; border-width: $border-size; grid-row: 2; } @@ -119,8 +105,8 @@ $border-radius: var-get($_theme, 'border-border-radius'); } @include e(bundle-main) { - @extend %border-styles; - + border-style: $border-style; + border-color: $border-color; z-index: 1; border-width: $border-size; height: var(--size); @@ -155,8 +141,8 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include m(prefixed) { @include e(bundle-start) { - @extend %border-styles; - + border-style: $border-style; + border-color: $border-color; z-index: 0; border-block-width: $border-size; border-inline-start-width: $border-size; @@ -187,8 +173,8 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include m(suffixed) { @include e(bundle-end) { - @extend %border-styles; - + border-style: $border-style; + border-color: $border-color; z-index: 0; border-width: $border-size; border-inline-start-width: 0; @@ -487,15 +473,21 @@ $border-radius: var-get($_theme, 'border-border-radius'); @include m(disabled) { @include e(bundle) { - @extend %disabled-styles; + background: var-get($_theme, 'border-disabled-background'); + color: var-get($_theme, 'disabled-text-color'); + border-color: var-get($_theme, 'disabled-border-color'); } @include e(bundle-main) { - @extend %disabled-styles; + background: var-get($_theme, 'border-disabled-background'); + color: var-get($_theme, 'disabled-text-color'); + border-color: var-get($_theme, 'disabled-border-color'); } @include e(bundle-start) { - @extend %disabled-styles; + background: var-get($_theme, 'border-disabled-background'); + color: var-get($_theme, 'disabled-text-color'); + border-color: var-get($_theme, 'disabled-border-color'); igx-prefix:not(:first-child), [igxPrefix]:not(:first-child) { @@ -504,7 +496,9 @@ $border-radius: var-get($_theme, 'border-border-radius'); } @include e(bundle-end) { - @extend %disabled-styles; + background: var-get($_theme, 'border-disabled-background'); + color: var-get($_theme, 'disabled-text-color'); + border-color: var-get($_theme, 'disabled-border-color'); igx-suffix:not(:last-child), [igxSuffix]:not(:last-child) { diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss index f5723345630..d2287479278 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss @@ -8,7 +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))}; + --_prefix-suffix-spacing: #{sizable(rem(8), rem(10), rem(14))}; row-gap: rem(5px); @@ -28,7 +28,7 @@ $_theme: $fluent; padding-inline: rem(8px); padding-block: 0; - height: calc(var-get($_theme, 'size') - rem(2px)); + min-height: calc(var-get($_theme, 'size') - rem(2px)); } @include e(textarea) { diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss index 04ad56424bc..66c90055467 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss @@ -9,7 +9,6 @@ $_theme: $indigo; @include themed-block(igx-input-group, indigo) { --_prefix-suffix-spacing: #{pad-inline(rem(2px), rem(4px), rem(6px))}; - --_bundle-template-rows: revert; igx-prefix:first-child, [igxPrefix]:first-child { diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss index 0d24a5d97f2..a8fc6032dad 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss @@ -12,75 +12,10 @@ $input-inline-padding: rem(4px); $input-top-spacing: rem(20px); $input-bottom-spacing: rem(6px); -@layer ig.material { - @container style(--ig-theme: material) { - %box-floating-label { - @include type-style(caption); - - translate: 0 rem(-12px); - } - - %box-floating-text-area-label { - @include type-style(caption); - - --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))}; - - translate: 0; - inset-block-start: calc(var(--_input-top-spacing) / 4); - } - - %border-textarea-floating-label { - @include type-style(caption); - - display: inline-block; - position: relative; - inset-block: 0; - } - } - - .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; - } - } - } -} - @include themed-block(igx-input-group, material) { --_prefix-suffix-spacing: #{pad-inline(rem(12px), rem(14px), rem(16px))}; --_bundle-template-rows: #{var-get($_theme, 'size')}; + --_floating-label-position: #{rem(-12px)}; &:has([igxLabel], igx-label) { --_input-top-spacing: #{$input-top-spacing}; @@ -196,6 +131,27 @@ $input-bottom-spacing: rem(6px); } } + @include mx(base, ('not': (filled, focused))) { + &:has(input:placeholder-shown) { + .igx-input-group__label { + @include type-style(caption); + + translate: 0 var(--_floating-label-position); + } + } + + &:has(textarea:placeholder-shown) { + .igx-input-group__label { + @include type-style(caption); + + --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))}; + + translate: 0; + inset-block-start: calc(var(--_input-top-spacing) / 4); + } + } + } + @include e(clear-icon) { background: transparent; @@ -213,9 +169,10 @@ $input-bottom-spacing: rem(6px); } @include e(label) { - @extend %box-floating-label; + @include type-style(caption); color: var-get($_theme, 'focused-secondary-color'); + translate: 0 var(--_floating-label-position); } } @@ -275,7 +232,9 @@ $input-bottom-spacing: rem(6px); @include mx(base, filled) { @include e(label) { - @extend %box-floating-label; + @include type-style(caption); + + translate: 0 var(--_floating-label-position); } } @@ -394,13 +353,23 @@ $input-bottom-spacing: rem(6px); @include mx(base, textarea-group, filled) { @include e(label) { - @extend %box-floating-text-area-label; + @include type-style(caption); + + --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))}; + + translate: 0; + inset-block-start: calc(var(--_input-top-spacing) / 4); } } @include mx(base, textarea-group, focused) { @include e(label) { - @extend %box-floating-text-area-label; + @include type-style(caption); + + --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))}; + + translate: 0; + inset-block-start: calc(var(--_input-top-spacing) / 4); } } @@ -537,13 +506,21 @@ $input-bottom-spacing: rem(6px); @include mx(border, textarea-group, filled) { @include e(label) { - @extend %border-textarea-floating-label; + @include type-style(caption); + + display: inline-block; + position: relative; + inset-block: 0; } } @include mx(border, textarea-group, focused) { @include e(label) { - @extend %border-textarea-floating-label; + @include type-style(caption); + + display: inline-block; + position: relative; + inset-block: 0; } } @@ -663,6 +640,35 @@ $input-bottom-spacing: rem(6px); } } + @include mx(border, ('not': (filled, focused))) { + &:has(input:placeholder-shown) { + .igx-input-group__label { + @include type-style(caption); + } + } + + &:has(textarea:placeholder-shown) { + .igx-input-group__label { + @include type-style(caption); + + display: inline-block; + position: relative; + inset-block: 0; + } + } + + &: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; + } + } + } + @include mx(border, focused) { --_input-border-size-focus: calc(var(--_input-border-size) + #{rem(1px)}); @@ -720,12 +726,6 @@ $input-bottom-spacing: rem(6px); } } - @include mx(border, filled) { - @include e(notch) { - border-block-start-color: transparent; - } - } - @include mx(border, valid) { @include e(bundle-start) { border-color: var-get($_theme, 'success-secondary-color'); @@ -822,9 +822,17 @@ $input-bottom-spacing: rem(6px); } } + @include mx(border, filled) { + @include e(notch) { + border-block-start-color: transparent; + } + } + @include m(file, $not: (border)) { @include e(label) { - @extend %box-floating-label; + @include type-style(caption); + + translate: 0 var(--_floating-label-position); grid-row: 1 / -1; } } diff --git a/projects/igniteui-angular/select/src/select/select.component.ts b/projects/igniteui-angular/select/src/select/select.component.ts index 1a5dc095bfb..64538fe3866 100644 --- a/projects/igniteui-angular/select/src/select/select.component.ts +++ b/projects/igniteui-angular/select/src/select/select.component.ts @@ -124,6 +124,9 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec @ContentChildren(IgxSuffixDirective, { descendants: true }) protected suffixes: QueryList; + @ContentChildren(IgxHintDirective, { descendants: true }) + protected contentHints: QueryList; + @ViewChildren(IgxSuffixDirective) protected internalSuffixes: QueryList; @@ -547,6 +550,10 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec ]); this.inputGroup.suffixes = mergedSuffixes; } + + if (this.inputGroup) { + this.inputGroup.hints = this.contentHints; + } } /** @hidden @internal */ 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 91feb079b38..fe98c18df15 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.html +++ b/src/app/input-group-showcase/input-group-showcase.sample.html @@ -39,7 +39,7 @@

Angular

} @if (getHint()) { - {{getHint()}} + {{getHint()}} } From c99f548e6be0539214bb3f640f9247e21a0dc441 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 9 Mar 2026 13:37:13 +0200 Subject: [PATCH 145/189] fix(styles): update height properties to inherit for bundle components --- .../input-group/src/input-group/themes/_base.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss index dcc0602360c..b0276be001c 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss @@ -128,7 +128,7 @@ $transition-timing: .25s $out-cubic; @include e(bundle-start) { display: flex; min-width: 0; - min-height: 100%; + height: inherit; grid-row: var(--_bundle-row); grid-column: 1; } @@ -136,7 +136,7 @@ $transition-timing: .25s $out-cubic; @include e(bundle-end) { display: flex; min-width: 0; - min-height: 100%; + height: inherit; grid-row: var(--_bundle-row); grid-column: 3; } @@ -144,6 +144,7 @@ $transition-timing: .25s $out-cubic; @include e(bundle-main) { grid-row: var(--_bundle-row); min-width: 0; + height: inherit; } %input-textarea-common { From c99ca83944d030bf27694f17984724ba21f2f5fa Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 9 Mar 2026 14:41:37 +0200 Subject: [PATCH 146/189] fix(navigation-drawer): replace specificity placeholders with explicit styles and add active state theming --- .../src/navigation-drawer/themes/_base.scss | 49 +++---------------- .../themes/shared/_bootstrap.scss | 22 +++++++++ .../themes/shared/_fluent.scss | 19 +++++++ .../themes/shared/_indigo.scss | 22 +++++++++ .../themes/shared/_material.scss | 8 +-- src/app/app.component.html | 6 +-- 6 files changed, 77 insertions(+), 49 deletions(-) diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss index bc7254ec00b..a79850e2edc 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss @@ -9,35 +9,6 @@ $_theme: $material; @include layer(base) { - // This placeholder is needed to fix the specificity order - %item { - color: var-get($_theme, 'item-text-color'); - - igx-icon { - color: var-get($_theme, 'item-icon-color'); - } - } - - // This placeholder is needed to fix the specificity order - %hover-item { - background: var-get($_theme, 'item-hover-background'); - color: var-get($_theme, 'item-hover-text-color'); - box-shadow: none; - - igx-icon { - color: var-get($_theme, 'item-hover-icon-color'); - } - } - - %active { - color: var-get($_theme, 'item-active-text-color'); - background: var-get($_theme, 'item-active-background'); - - igx-icon { - color: var-get($_theme, 'item-active-icon-color'); - } - } - @include b(igx-nav-drawer) { // TODO: These should probably be a part of the design tokens schema --ig-nav-drawer-size: #{rem(240px)}; @@ -190,8 +161,6 @@ $_theme: $material; } @include b(igx-nav-drawer-item) { - @extend %item; - position: relative; display: flex; align-items: center; @@ -208,8 +177,10 @@ $_theme: $material; border: none; justify-content: flex-start; contain: paint layout content; + color: var-get($_theme, 'item-text-color'); igx-icon { + --item-icon-color: inherit; --component-size: 3; } @@ -232,18 +203,10 @@ $_theme: $material; } } - &:hover, - &:focus { - @extend %hover-item; - } - - @include m(active) { - @extend %active; - - &:focus, - &:hover { - @extend %active; - } + &:hover:not(.igx-nav-drawer-item--active), + &:focus:not(.igx-nav-drawer-item--active) { + background: var-get($_theme, 'item-hover-background'); + color: var-get($_theme, 'item-hover-text-color'); } @include m(header) { diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_bootstrap.scss b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_bootstrap.scss index 5620cbc037b..fa5e357e862 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_bootstrap.scss @@ -1,6 +1,9 @@ @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-nav-drawer, bootstrap) { --aside-padding: #{rem(16px)}; @@ -14,6 +17,25 @@ @include themed-block(igx-nav-drawer-item, bootstrap) { @include type-style('body-2'); + @include m(active) { + color: var-get($_theme, 'item-active-text-color'); + background: var-get($_theme, 'item-active-background'); + + igx-icon { + color: var-get($_theme, 'item-active-icon-color'); + } + + &:focus, + &:hover { + color: var-get($_theme, 'item-active-text-color'); + background: var-get($_theme, 'item-active-background'); + + igx-icon { + color: var-get($_theme, 'item-active-icon-color'); + } + } + } + @include m(header) { @include type-style('caption'); } diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_fluent.scss b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_fluent.scss index 5dce9ae1d60..13fc62f5418 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_fluent.scss @@ -20,6 +20,25 @@ $_theme: $fluent; @include themed-block(igx-nav-drawer-item, fluent) { @include type-style('body-2'); + @include m(active) { + color: var-get($_theme, 'item-active-text-color'); + background: var-get($_theme, 'item-active-background'); + + igx-icon { + color: var-get($_theme, 'item-active-icon-color'); + } + + &:focus, + &:hover { + color: var-get($_theme, 'item-active-text-color'); + background: var-get($_theme, 'item-active-background'); + + igx-icon { + color: var-get($_theme, 'item-active-icon-color'); + } + } + } + @include m(header) { @include type-style('subtitle-1'); } diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_indigo.scss b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_indigo.scss index 116ec5ea4e1..1f42fdc75d6 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_indigo.scss @@ -1,6 +1,9 @@ @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-nav-drawer, indigo) { --aside-padding: #{rem(8px)}; @@ -27,6 +30,25 @@ --component-size: 2; } + @include m(active) { + color: var-get($_theme, 'item-active-text-color'); + background: var-get($_theme, 'item-active-background'); + + igx-icon { + color: var-get($_theme, 'item-active-icon-color'); + } + + &:focus, + &:hover { + color: var-get($_theme, 'item-active-text-color'); + background: var-get($_theme, 'item-active-background'); + + igx-icon { + color: var-get($_theme, 'item-active-icon-color'); + } + } + } + @include m(header) { @include type-style('overline'); diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_material.scss b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_material.scss index 47ff1af699a..7764af6c5f4 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_material.scss +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/shared/_material.scss @@ -43,14 +43,16 @@ $_theme: $material; } @include m(active) { - background: unset; + color: var-get($_theme, 'item-active-text-color'); &::after { background: var-get($_theme, 'item-active-background'); } - &:hover, - &:focus { + &:focus, + &:hover { + color: var-get($_theme, 'item-active-text-color'); + &::after { background: var-get($_theme, 'item-active-background'); } diff --git a/src/app/app.component.html b/src/app/app.component.html index 182c3d3f794..e712c2097b9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -27,7 +27,7 @@ Components @for (item of filteredComponentLinks(); track item) { - + {{item.icon}} {{item.name}} @@ -42,7 +42,7 @@ Directives @for (item of filteredDirectiveLinks(); track item) { - + {{item.icon}} {{item.name}} @@ -51,7 +51,7 @@ Style @for (item of filteredStyleLinks(); track item) { - + {{item.icon}} {{item.name}} From d3b30edfda6b47995b826b01b62d6db17c61755a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 9 Mar 2026 14:43:02 +0200 Subject: [PATCH 147/189] fix(input-group): adjust hint row height and update padding; inherit height for bundled components --- .../src/input-group/themes/shared/material.scss | 3 ++- .../igniteui-angular/navigation-drawer/README.md | 14 +++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss index a8fc6032dad..6ea41707efd 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss @@ -61,7 +61,7 @@ $input-bottom-spacing: rem(6px); @include e(hint) { grid-row: var(--_hint-row); - min-height: rem(18px); + min-height: rem(21px); padding-inline: sizable(rem(12px), rem(14px), rem(16px)); } @@ -93,6 +93,7 @@ $input-bottom-spacing: rem(6px); @extend %input-paddings; padding-inline: 0; + height: inherit; } } diff --git a/projects/igniteui-angular/navigation-drawer/README.md b/projects/igniteui-angular/navigation-drawer/README.md index 295ca5d6e58..8d37878028b 100644 --- a/projects/igniteui-angular/navigation-drawer/README.md +++ b/projects/igniteui-angular/navigation-drawer/README.md @@ -1,6 +1,6 @@ # IgxNavigationDrawer Component -The **igx-nav-drawer** is a container element for side navigation, providing quick access between views. It can be used for navigation apps and with top-level views. Drawer will be hidden until invoked by the user. +The **igx-nav-drawer** is a container element for side navigation, providing quick access between views. It can be used for navigation apps and with top-level views. Drawer will be hidden until invoked by the user. A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer) ## Dependencies @@ -86,7 +86,7 @@ The navigation drawer can either sit above content or be pinned alongside it and ## Modes -Unpinned (elevated above content) mode is the normal behavior where the drawer sits above and applies a darkened overlay over all content. Generally used to provide a temporary navigation suitable for mobile devices. +Unpinned (elevated above content) mode is the normal behavior where the drawer sits above and applies a darkened overlay over all content. Generally used to provide a temporary navigation suitable for mobile devices. The drawer can be pinned to take advantage of larger screens, placing it within normal content flow with relative position. Depending on whether the app provides a way to toggle the drawer, the pinned mode can be used to achieve either [permanent or persistent behavior](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior). @@ -138,13 +138,13 @@ This variant is enabled simply by the presence of an alternative mini template m Header - + home Home - + home @@ -188,15 +188,15 @@ export class AppComponent { ]; } ``` -One way to tie in the active state is to directly use the [`routerLinkActive`](https://angular.io/api/router/RouterLinkActive) default functionality and pass the drawer items active class `igx-nav-drawer__item--active`, so the `` template would look like: +One way to tie in the active state is to directly use the [`routerLinkActive`](https://angular.io/api/router/RouterLinkActive) default functionality and pass the drawer items active class `igx-nav-drawer-item--active`, so the `` template would look like: ```html From f08ba7bcefb134d99feca863c44f2ec31d861716 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 9 Mar 2026 16:58:34 +0200 Subject: [PATCH 148/189] fix(buttons): update icon sizing and alignment in button and icon-button themes - Add `--size` variable for `igx-icon` within buttons for consistent sizing. - Apply `aspect-ratio` to FAB buttons for proper circular appearance. --- .../src/core/styles/components/button/_button-theme.scss | 4 +++- .../styles/components/icon-button/_icon-button-theme.scss | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss index c130d539e80..f6658967545 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss @@ -331,11 +331,12 @@ igx-icon { --component-size: var(--ig-size, var(--ig-size-large)); + --size: var(--ig-icon-size, #{$icon-in-button-size}); + display: flex; justify-content: center; width: var(--ig-icon-size, #{$icon-in-button-size}); height: var(--ig-icon-size, #{$icon-in-button-size}); - font-size: var(--ig-icon-size, #{$icon-in-button-size}); transition: var(--_button-transition); } } @@ -779,6 +780,7 @@ min-width: var-get($fab-theme, 'size'); min-height: var-get($fab-theme, 'size'); + aspect-ratio: 1; line-height: unset; white-space: nowrap; color: var-get($fab-theme, 'foreground'); diff --git a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss index 03c15b54b46..703feb26870 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss @@ -75,6 +75,10 @@ width: var(--ig-icon-size, #{$icon-in-button-size}); height: var(--ig-icon-size, #{$icon-in-button-size}); font-size: var(--ig-icon-size, #{$icon-in-button-size}); + + igx-icon { + --size: #{$icon-in-button-size}; + } } @if $variant == 'fluent' { @@ -93,7 +97,6 @@ ); igx-icon { - --ig-icon-size: #{$icon-in-button-size}; --component-size: 2; display: flex; From 99fe63672bee0de071142308a1322653fb8eaa77 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 9 Mar 2026 17:20:06 +0200 Subject: [PATCH 149/189] fix(input-group): fix fluent inherit height for bundle elements --- .../input-group/src/input-group/themes/_base.scss | 5 ++--- .../src/input-group/themes/shared/bootstrap.scss | 6 ++++++ .../src/input-group/themes/shared/fluent.scss | 1 + .../src/input-group/themes/shared/indigo.scss | 12 ++++++++++++ .../src/input-group/themes/shared/material.scss | 3 +++ 5 files changed, 24 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss index b0276be001c..bc1cdeb12d2 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss @@ -128,7 +128,7 @@ $transition-timing: .25s $out-cubic; @include e(bundle-start) { display: flex; min-width: 0; - height: inherit; + grid-row: var(--_bundle-row); grid-column: 1; } @@ -136,7 +136,7 @@ $transition-timing: .25s $out-cubic; @include e(bundle-end) { display: flex; min-width: 0; - height: inherit; + grid-row: var(--_bundle-row); grid-column: 3; } @@ -144,7 +144,6 @@ $transition-timing: .25s $out-cubic; @include e(bundle-main) { grid-row: var(--_bundle-row); min-width: 0; - height: inherit; } %input-textarea-common { diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss index d95c15b8b55..2a249ef6106 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss @@ -137,6 +137,12 @@ $border-radius: var-get($_theme, 'border-border-radius'); border: 0; visibility: hidden; } + + height: inherit; + } + + @include e(bundle-end) { + height: inherit; } @include m(prefixed) { diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss index d2287479278..ad7e4ff1404 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss @@ -50,6 +50,7 @@ $_theme: $fluent; > * { grid-row: revert; min-height: 0; + height: 100%; } &:hover { diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss index 66c90055467..65b3c508fb4 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss @@ -258,4 +258,16 @@ $_theme: $indigo; } } } + + @include e(bundle-start) { + height: inherit; + } + + @include e(bundle-end) { + height: inherit; + } + + @include e(bundle-main) { + height: inherit; + } } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss index 6ea41707efd..d85645f02a0 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss @@ -575,11 +575,13 @@ $input-bottom-spacing: rem(6px); border-inline-end-width: 0; border-start-start-radius: var-get($_theme, 'border-border-radius'); border-end-start-radius: var-get($_theme, 'border-border-radius'); + height: inherit; } @include e(bundle-main) { grid-column: 2 / span 2; padding-inline: $input-inline-padding; + height: inherit; } @include e(notch) { @@ -616,6 +618,7 @@ $input-bottom-spacing: rem(6px); grid-column: 4; border-start-end-radius: var-get($_theme, 'border-border-radius'); border-end-end-radius: var-get($_theme, 'border-border-radius'); + height: inherit; } &:hover { From bce5eeff4c00d620fe14ef50556861fd456c0d81 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 9 Mar 2026 17:36:11 +0200 Subject: [PATCH 150/189] fix(input-group): update input fluent styles to fix file height --- .../src/input-group/themes/shared/fluent.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss index ad7e4ff1404..b4bc46bb3ba 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss @@ -247,5 +247,19 @@ $_theme: $fluent; border-color: var-get($_theme, 'disabled-border-color'); } } + + @include e(file-input) { + height: 100%; + } + + @include m(file) { + @include e(input) { + grid-row: 1; + } + + @include e(upload) { + grid-row: 1; + } + } } From ada0ea189eb8df4239692fb27de63997e5c508e2 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Wed, 11 Mar 2026 10:56:19 +0200 Subject: [PATCH 151/189] refactor(grid): scope styles to grid components (#16813) --- .../grid/_excel-filtering-component.scss | 361 +- .../grid/_excel-filtering-theme.scss | 1620 +++-- .../components/grid/_grid-component.scss | 1320 ++-- .../styles/components/grid/_grid-theme.scss | 6064 ++++++++--------- .../grid/_group-by-area-component.scss | 14 +- .../grid/_header-row-component.scss | 308 +- .../grid/_pivot-data-selector-component.scss | 130 +- .../grid/_pivot-data-selector-theme.scss | 508 +- .../_query-builder-component.scss | 2 +- .../query-builder/_query-builder-theme.scss | 1162 ++-- .../core/styles/themes/generators/_base.scss | 34 +- .../core/styles/typography/_bootstrap.scss | 8 +- .../src/core/styles/typography/_fluent.scss | 4 +- .../src/core/styles/typography/_indigo.scss | 8 +- .../src/core/styles/typography/_material.scss | 4 +- .../excel-style-filtering.component.scss | 4 + .../excel-style-filtering.component.ts | 4 +- .../filtering/excel-style/themes/_base.scss | 463 ++ .../excel-style/themes/dark/_index.scss | 7 + .../excel-style/themes/dark/_indigo.scss | 81 + .../excel-style/themes/dark/_tokens.scss | 7 + .../excel-style/themes/light/_index.scss | 6 + .../excel-style/themes/light/_tokens.scss | 8 + .../excel-style/themes/shared/_bootstrap.scss | 31 + .../excel-style/themes/shared/_fluent.scss | 12 + .../excel-style/themes/shared/_index.scss | 4 + .../excel-style/themes/shared/_indigo.scss | 182 + .../excel-style/themes/shared/_material.scss | 6 + .../core/src/summaries/themes/_base.scss | 187 +- .../grids/grid/src/grid.component.scss | 4 + .../grids/grid/src/grid.component.ts | 4 +- .../src/hierarchical-grid.component.scss | 4 + .../src/hierarchical-grid.component.ts | 30 +- .../pivot-grid/src/pivot-grid.component.scss | 4 + .../pivot-grid/src/pivot-grid.component.ts | 158 +- .../igniteui-angular/grids/themes/_base.scss | 2854 ++++++++ .../grids/themes/dark/_bootstrap.scss | 16 + .../grids/themes/dark/_fluent.scss | 16 + .../grids/themes/dark/_index.scss | 7 + .../grids/themes/dark/_indigo.scss | 74 + .../grids/themes/dark/_material.scss | 16 + .../grids/themes/dark/_tokens.scss | 7 + .../grids/themes/light/_index.scss | 7 + .../grids/themes/light/_indigo.scss | 49 + .../grids/themes/light/_tokens.scss | 8 + .../grids/themes/shared/_bootstrap.scss | 138 + .../grids/themes/shared/_fluent.scss | 19 + .../grids/themes/shared/_index.scss | 4 + .../grids/themes/shared/_indigo.scss | 197 + .../grids/themes/shared/_material.scss | 137 + .../themes/test/igniteui-angular-dark.css | 3 + .../grids/themes/test/igniteui-angular.css | 5077 ++++++++++++++ .../themes/test/igniteui-bootstrap-dark.css | 3 + .../themes/test/igniteui-bootstrap-light.css | 3 + .../grids/themes/test/igniteui-dark-green.css | 3 + .../test/igniteui-fluent-dark-excel.css | 3 + .../themes/test/igniteui-fluent-dark-word.css | 3 + .../themes/test/igniteui-fluent-dark.css | 3 + .../test/igniteui-fluent-light-excel.css | 3 + .../test/igniteui-fluent-light-word.css | 3 + .../themes/test/igniteui-fluent-light.css | 3 + .../themes/test/igniteui-indigo-dark.css | 3 + .../themes/test/igniteui-indigo-light.css | 3 + .../tree-grid/src/tree-grid.component.scss | 4 + .../tree-grid/src/tree-grid.component.ts | 61 +- .../query-builder.component.scss | 4 + .../query-builder/query-builder.component.ts | 7 +- .../src/query-builder/themes/_base.scss | 420 ++ .../query-builder/themes/dark/_bootstrap.scss | 36 + .../query-builder/themes/dark/_fluent.scss | 35 + .../src/query-builder/themes/dark/_index.scss | 7 + .../query-builder/themes/dark/_indigo.scss | 12 + .../query-builder/themes/dark/_material.scss | 12 + .../query-builder/themes/dark/_tokens.scss | 8 + .../themes/light/_bootstrap.scss | 12 + .../query-builder/themes/light/_fluent.scss | 12 + .../query-builder/themes/light/_index.scss | 7 + .../query-builder/themes/light/_indigo.scss | 26 + .../query-builder/themes/light/_material.scss | 12 + .../query-builder/themes/light/_tokens.scss | 8 + .../themes/shared/_bootstrap.scss | 81 + .../query-builder/themes/shared/_fluent.scss | 56 + .../query-builder/themes/shared/_index.scss | 4 + .../query-builder/themes/shared/_indigo.scss | 83 + .../themes/shared/_material.scss | 57 + .../grid-cellEditing.component.scss | 1 - src/app/grid-groupby/grid-groupby.sample.html | 2 +- .../grid-mrl-custom-navigation.sample.html | 2 +- .../grid-mrl.sample.html | 2 +- .../grid-row-draggable.sample.html | 2 +- ...chical-grid-advanced-filtering.sample.scss | 9 +- .../hierarchical-grid.sample.html | 29 +- .../hierarchical-grid.sample.scss | 29 +- .../hierarchical-grid.sample.ts | 5 - .../tree-grid-flat-data.sample.scss | 4 - .../tree-grid-groupby.sample.scss | 4 - .../tree-grid-load-on-demand.sample.scss | 4 - src/app/tree-grid/tree-grid.sample.scss | 4 - src/styles/_variables.scss | 8 +- 99 files changed, 16542 insertions(+), 5942 deletions(-) create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_index.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss create mode 100644 projects/igniteui-angular/grids/grid/src/grid.component.scss create mode 100644 projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss create mode 100644 projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss create mode 100644 projects/igniteui-angular/grids/themes/_base.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_bootstrap.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_fluent.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_indigo.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_material.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/grids/themes/light/_index.scss create mode 100644 projects/igniteui-angular/grids/themes/light/_indigo.scss create mode 100644 projects/igniteui-angular/grids/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_material.scss create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-angular.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-bootstrap-dark.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-bootstrap-light.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-dark-green.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-dark-excel.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-dark-word.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-dark.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-light-excel.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-light-word.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-light.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-indigo-dark.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-indigo-light.css create mode 100644 projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/_base.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/dark/_bootstrap.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/dark/_fluent.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/dark/_indigo.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/dark/_material.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/light/_bootstrap.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/light/_fluent.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/light/_index.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/light/_indigo.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/light/_material.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/query-builder/src/query-builder/themes/shared/_material.scss diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss index 3e2c91e373a..cb88256cad0 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss @@ -3,180 +3,189 @@ /// @access private /// @author Simeon Simeonoff @mixin excel-filtering-partial { - @include b(igx-excel-filter) { - @extend %grid-excel-filter !optional; - - @include e(loading) { - @extend %igx-excel-filter__loading !optional; - } - - @include e(sizing) { - @extend %igx-excel-filter__sizing !optional; - } - - @include e(tree) { - @extend %igx-excel-filter__tree !optional; - } - - @include e(empty) { - @extend %igx-excel-filter__empty !optional; - } - - @include e(tree-alike) { - @extend %igx-excel-filter__tree-alike !optional; - } - - @include e(tree-alike-item) { - @extend %igx-excel-filter__tree-alike-item !optional; - } - - @include e(menu) { - @include sizable(); - @extend %grid-excel-menu !optional; - } - - @include e(menu, $m: 'cosy') { - @extend %grid-excel-menu--cosy !optional; - } - - @include e(menu, $m: 'compact') { - @extend %grid-excel-menu--compact !optional; - } - - @include e(icon) { - @extend %grid-excel-icon !optional; - } - - @include e(icon, $m: 'filtered') { - @extend %grid-excel-icon !optional; - @extend %grid-excel-icon--filtered !optional; - } - - @include e(menu-header) { - @extend %grid-excel-menu__header !optional; - } - - @include e(menu-header-actions) { - @extend %grid-excel-menu__header-actions !optional; - } - - @include e(menu-main) { - @extend %grid-excel-main !optional; - } - - @include e(menu-footer) { - @extend %grid-excel-menu__footer !optional; - } - - @include e(sort) { - @extend %grid-excel-sort !optional; - } - - @include e(move) { - @extend %grid-excel-move !optional; - } - - @include e(actions) { - @extend %grid-excel-actions !optional; - } - - @include e(actions-pin) { - @extend %grid-excel-actions__action !optional; - } - - @include e(actions-pin, $m: disabled) { - @extend %grid-excel-actions__action !optional; - @extend %grid-excel-actions__action--disabled !optional; - } - - @include e(actions-unpin) { - @extend %grid-excel-actions__action !optional; - } - - @include e(actions-hide) { - @extend %grid-excel-actions__action !optional; - } - - @include e(actions-select) { - @extend %grid-excel-actions__action !optional; - } - - @include e(actions-selected) { - @extend %grid-excel-actions__action !optional; - @extend %grid-excel-actions--selected !optional; - } - - @include e(actions-filter) { - @extend %grid-excel-actions__action !optional; - @extend %grid-excel-actions__action-filter !optional; - } - - @include e(actions-filter, $m: active) { - @extend %grid-excel-actions__action !optional; - @extend %grid-excel-actions__action--active !optional; - } - - @include e(actions-clear) { - @extend %grid-excel-actions__action !optional; - } - - @include e(actions-clear, $m: disabled) { - @extend %grid-excel-actions__action !optional; - @extend %grid-excel-actions__action--disabled !optional; - } - - @include e(secondary) { - @extend %grid-excel-menu__secondary !optional; - } - - @include e(secondary, $m: 'cosy') { - @extend %grid-excel-menu__secondary--cosy !optional; - } - - @include e(secondary, $m: 'compact') { - @extend %grid-excel-menu__secondary--compact !optional; - } - - @include e(secondary-header) { - @extend %grid-excel-menu__header !optional; - @extend %grid-excel-menu__secondary-header !optional; - } - - @include e(secondary-main) { - @extend %grid-excel-menu__secondary-main !optional; - } - - @include e(secondary-footer) { - @extend %grid-excel-menu__footer !optional; - @extend %grid-excel-menu__secondary-footer !optional; - } - - @include e(condition) { - @extend %grid-excel-menu__condition !optional; - } - - @include e(add-filter) { - @extend %grid-excel-menu__add-filter !optional; - } - - @include e(clear) { - @extend %grid-excel-filter__clear !optional; - } - - @include e(cancel) { - @extend %grid-excel-filter__cancel !optional; - } - - @include e(apply) { - @extend %grid-excel-filter__apply !optional; - } - - @include m(inline) { - @extend %grid-excel-filter--inline !optional; - } - - @include e(filter-results) { - @extend %grid-excel-menu__filter-results !optional; - } - } + //@include b(igx-excel-filter) { + // @extend %grid-excel-filter !optional; + // + // @include e(loading) { + // @extend %igx-excel-filter__loading !optional; + // } + // + // @include e(sizing) { + // @extend %igx-excel-filter__sizing !optional; + // } + // + // @include e(tree) { + // @extend %igx-excel-filter__tree !optional; + // } + // + // @include e(empty) { + // @extend %igx-excel-filter__empty !optional; + // } + // + // @include e(tree-alike) { + // @extend %igx-excel-filter__tree-alike !optional; + // } + // + // @include e(tree-alike-item) { + // @extend %igx-excel-filter__tree-alike-item !optional; + // } + // + // @include e(menu) { + // @include sizable(); + // @extend %grid-excel-menu !optional; + // } + // + // @include e(menu, $m: 'cosy') { + // @extend %grid-excel-menu--cosy !optional; + // } + // + // @include e(menu, $m: 'compact') { + // @extend %grid-excel-menu--compact !optional; + // } + // + // @include e(icon) { + // @extend %grid-excel-icon !optional; + // } + // + // @include e(icon, $m: 'filtered') { + // @extend %grid-excel-icon !optional; + // @extend %grid-excel-icon--filtered !optional; + // } + // + // @include e(menu-header) { + // @extend %grid-excel-menu__header !optional; + // } + // + // @include e(menu-header-actions) { + // @extend %grid-excel-menu__header-actions !optional; + // } + // + // @include e(menu-main) { + // @extend %grid-excel-main !optional; + // } + // + // @include e(menu-footer) { + // display: flex; + // justify-content: space-between; + // } + // + // @include e(sort) { + // @extend %grid-excel-action--compact; + // + // igx-buttongroup { + // width: rem(208px); + // } + // } + // + // @include e(move) { + // @extend %grid-excel-action--compact; + // + // igx-buttongroup { + // width: rem(208px); + // } + // } + // + // @include e(actions) { + // @extend %grid-excel-actions !optional; + // } + // + // @include e(actions-pin) { + // @extend %grid-excel-actions__action !optional; + // } + // + // @include e(actions-pin, $m: disabled) { + // @extend %grid-excel-actions__action !optional; + // @extend %grid-excel-actions__action--disabled !optional; + // } + // + // @include e(actions-unpin) { + // @extend %grid-excel-actions__action !optional; + // } + // + // @include e(actions-hide) { + // @extend %grid-excel-actions__action !optional; + // } + // + // @include e(actions-select) { + // @extend %grid-excel-actions__action !optional; + // } + // + // @include e(actions-selected) { + // @extend %grid-excel-actions__action !optional; + // @extend %grid-excel-actions--selected !optional; + // } + // + // @include e(actions-filter) { + // @extend %grid-excel-actions__action !optional; + // @extend %grid-excel-actions__action-filter !optional; + // } + // + // @include e(actions-filter, $m: active) { + // @extend %grid-excel-actions__action !optional; + // @extend %grid-excel-actions__action--active !optional; + // } + // + // @include e(actions-clear) { + // @extend %grid-excel-actions__action !optional; + // } + // + // @include e(actions-clear, $m: disabled) { + // @extend %grid-excel-actions__action !optional; + // @extend %grid-excel-actions__action--disabled !optional; + // } + // + // @include e(secondary) { + // @extend %grid-excel-menu__secondary !optional; + // } + // + // @include e(secondary, $m: 'cosy') { + // @extend %grid-excel-menu__secondary--cosy !optional; + // } + // + // @include e(secondary, $m: 'compact') { + // @extend %grid-excel-menu__secondary--compact !optional; + // } + // + // @include e(secondary-header) { + // @extend %grid-excel-menu__header !optional; + // @extend %grid-excel-menu__secondary-header !optional; + // } + // + // @include e(secondary-main) { + // @extend %grid-excel-menu__secondary-main !optional; + // } + // + // @include e(secondary-footer) { + // @extend %grid-excel-menu__footer !optional; + // @extend %grid-excel-menu__secondary-footer !optional; + // } + // + // @include e(condition) { + // @extend %grid-excel-menu__condition !optional; + // } + // + // @include e(add-filter) { + // @extend %grid-excel-menu__add-filter !optional; + // } + // + // @include e(clear) { + // @extend %grid-excel-filter__clear !optional; + // } + // + // @include e(cancel) { + // @extend %grid-excel-filter__cancel !optional; + // } + // + // @include e(apply) { + // @extend %grid-excel-filter__apply !optional; + // } + // + // @include m(inline) { + // @extend %grid-excel-filter--inline !optional; + // } + // + // @include e(filter-results) { + // @extend %grid-excel-menu__filter-results !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss index be1c4b57776..0324ad569f6 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss @@ -8,815 +8,813 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The grid theme used to style the component. @mixin excel-filtering($theme) { - $variant: map.get($theme, '_meta', 'theme'); - $theme-variant: map.get($theme, '_meta', 'variant'); - $bootstrap-theme: $variant == 'bootstrap'; - - $tree-node-indent: ( - comfortable: rem(16px), - cosy: rem(8px), - compact: rem(4px) - ); - - $tree-node-expander-size: rem(20px); - - $tree-node-height: ( - comfortable: rem(40px), - cosy: rem(32px), - compact: rem(24px) - ); - - $checkbox-indent: ( - comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}), - cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}), - compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}), - ); - - %grid-excel-filter { - --component-size: var(--ig-size, var(--ig-size-large)); - display: block; - width: rem(320px); - height: 100%; - flex-grow: 1; - - @if $variant == 'indigo' { - box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) color(null, 'gray', if($theme-variant == 'light', 400, 100)); - - // TODO: The border-radius should not be hardcoded. - border-radius: border-radius(rem(4px)); - } @else { - box-shadow: elevation(12); - } - - overflow: auto; - min-width: rem(320px); - - } - - %igx-excel-filter__sizing { - @include sizable(); - - min-height: sizable( - rem(330px), - rem(465px), - rem(645px) - ); - max-height: sizable( - rem(405px), - rem(565px), - rem(775px) - ); - } - - %grid-excel-filter--inline { - box-shadow: none; - width: 100%; - } - - %igx-excel-filter__loading { - display: flex; - justify-content: center; - align-items: center; - } - - %grid-excel-icon { - display: flex; - cursor: pointer; - - @if $variant == 'indigo' { - opacity: if($theme-variant == 'light', .75, .85); - - &:hover { - opacity: 1; - } - } - - @if $variant != 'indigo' { - igx-icon { - --size: var(--ig-icon-size, #{rem(15px)}); - } - } - } - - %grid-excel-icon--filtered { - opacity: 1; - - igx-icon { - color: if($variant == 'indigo', color($color: 'primary', $variant: 500), color($color: 'secondary')); - } - - @if $variant == 'indigo' { - &:hover { - igx-icon { - color: color($color: 'primary', $variant: 400); - } - } - } - } - - %grid-excel-menu { - --component-size: var(--ig-size, var(--ig-size-large)); - - display: flex; - flex-direction: column; - height: 100%; - - // TODO: The border-radius should not be hardcoded. - border-radius: border-radius(rem(4px)); - - @if $variant != 'indigo' { - background: var-get($theme, 'filtering-row-background'); - - %igx-group-display { - --elevation: none; - --item-background: #{var-get($theme, 'filtering-row-background')}; - --item-hover-background: #{color($color: 'gray', $variant: 100)}; - --item-selected-background: #{color($color: 'gray', $variant: 100)}; - --item-text-color: #{color($color: 'gray', $variant: 700)}; - --item-icon-color: #{color($color: 'gray', $variant: 700)}; - --item-hover-text-color: #{color($color: 'gray', $variant: 800)}; - --item-hover-icon-color: #{color($color: 'gray', $variant: 800)}; - --item-selected-text-color: #{if( - $variant == 'indigo', - contrast-color($color: 'surface'), - color($color: 'secondary', $variant: 500) - )}; - --item-selected-icon-color: #{if( - $variant == 'indigo', - contrast-color($color: 'surface'), - color($color: 'secondary', $variant: 500) - )}; - --item-selected-hover-icon-color: #{if( - $variant == 'fluent', - color($color: 'secondary', $variant: 500), - contrast-color($color: 'gray', $variant: 50) - )}; - --item-border-color: transparent; - --item-hover-border-color: transparent; - --item-focused-border-color: #{if( - $variant == 'fluent', - color($color: 'gray', $variant: 700), - transparent - )}; - --item-selected-border-color: transparent; - --item-selected-hover-border-color: transparent; - --item-disabled-border: transparent; - --disabled-selected-border-color: transparent; - } - } @else { - @if $theme-variant == 'light' { - background: contrast-color($color: 'gray', $variant: 900); - } @else { - background: color($color: 'gray', $variant: 50); - } - - %igx-group-display { - --item-background: transparent; - @if $theme-variant == 'dark' { - --item-text-color: #{contrast-color($color: 'surface', $variant: 500)}; - } - --border-color: transparent; - --item-border-color: transparent; - --item-focused-border-color: transparent; - --item-hover-border-color: transparent; - --item-selected-border-color: transparent; - --item-selected-hover-border-color: transparent; - --item-disabled-border: transparent; - --disabled-selected-border-color: transparent; - --elevation: none; - } - - %igx-group-item { - &:not(:nth-child(1)) { - margin: 0; - } - - @include type-style('button'); - } - } - - @include tree(tree-theme( - $background: color($color: 'surface'), - $background-selected: color($color: 'surface'), - $background-active: color($color: 'surface'), - $background-active-selected: color($color: 'surface'), - $foreground: contrast-color($color: 'surface'), - $foreground-selected: contrast-color($color: 'surface'), - $foreground-active: contrast-color($color: 'surface'), - $foreground-active-selected: contrast-color($color: 'surface'), - )); - - .igx-tree-node__wrapper { - padding: 0; - } - - igx-chips-area { - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); - padding-block-end: 0; - gap: sizable(rem(4px), rem(4px), rem(8px)); - } - } - - %grid-excel-menu__header { - display: flex; - align-items: center; - - @if $variant == 'indigo' { - padding: pad-block(rem(16px)) pad-inline(rem(16px)) pad-block(sizable(rem(8px), rem(12px), rem(16px))); - } @else { - padding: pad(rem(4px), rem(8px), rem(16px)); - } - - color: var-get($theme, 'excel-filtering-header-foreground'); - } - - @if $variant == 'indigo' { - .ig-typography %grid-excel-menu--compact { - %grid-excel-menu__header { - > h4 { - @include type-style('h6') - } - } - } - } - - %grid-excel-menu__header-actions { - display: flex; - margin-inline-start: auto; - gap: rem(4px); - - %grid-excel-actions__action { - padding: 0 !important; - margin: 0 !important; - } - - %grid-excel-actions__action, - %grid-excel-actions--selected { - justify-content: center; - } - } - - %grid-excel-menu__footer { - display: flex; - justify-content: space-between; - - %grid-excel-filter__apply, - %grid-excel-filter__cancel { - flex-grow: 1; - - [igxButton] { - width: 100%; - } - } - } - - %grid-excel-filter__clear { - flex-grow: 1; - } - - %grid-excel-filter__cancel + %grid-excel-filter__apply { - margin-inline-start: rem(16px); - } - - %grid-excel-sort, - %grid-excel-move { - display: block; - - @if $variant == 'indigo' { - padding-inline: pad-inline(rem(16px)); - } @else { - padding-block: pad-block(rem(4px), rem(8px), rem(8px)); - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - } - - header { - color: var-get($theme, 'excel-filtering-subheader-foreground'); - - @if $variant == 'indigo' { - margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important; - text-transform: capitalize !important; - } @else { - margin-block-end: rem(4px); - } - } - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 1)}; - - display: initial; - width: var(--size) !important; - height: var(--size) !important; - font-size: var(--size) !important; - } - } - - @if $variant == 'indigo' { - %grid-excel-move { - margin-block-end: sizable(rem(12px), rem(16px), rem(16px)); - } - - %grid-excel-sort + %grid-excel-move { - margin-block-start: sizable(rem(4px), rem(8px), rem(8px)); - } - - %grid-excel-sort { - padding-block-end: 0; - } - - %grid-excel-actions__action { - span { - @include type-style('body-2'); - } - } - } - - %grid-excel-action--compact { - display: flex; - align-items: center; - justify-content: space-between; - - header { - margin-inline-end: auto; - } - } - - %grid-excel-actions { - padding-block: pad-block(rem(4px), rem(8px), rem(8px)); - padding-inline: pad-inline(rem(4px), rem(16px), rem(16px)); - } - - %grid-excel-actions--selected { - igx-icon { - color: if( - $variant == 'indigo', - color($color: 'primary', $variant: 200), - color($color: 'secondary') - ); - } - } - - %grid-excel-move .igx-button-group { - [dir='rtl'] & { - flex-direction: row-reverse; - - igx-icon, - [igxButton] { - direction: ltr; - } - } - } - - %grid-excel-sort .igx-button-group { - [dir='rtl'] & { - flex-direction: row-reverse; - - igx-icon, - [igxButton] { - direction: ltr; - } - } - } - - %grid-excel-actions__action { - display: flex; - align-items: center; - justify-content: space-between; - - @if $variant == 'indigo' { - padding-block: pad-block(rem(4px), rem(6px), rem(8px)); - padding-inline: pad-inline(rem(12px)); - margin-inline: rem(8px); - margin-block-end: rem(4px); - border-radius: rem(4px); - } @else { - padding-block: pad-block(rem(4px), rem(8px), rem(8px)); - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - } - - cursor: pointer; - color: var-get($theme, 'excel-filtering-actions-foreground'); - outline-style: none; - - &:hover, - &:focus { - color: var-get($theme, 'excel-filtering-actions-hover-foreground'); - - @if $variant == 'indigo' { - @if $theme-variant == 'light' { - background: color($color: 'gray', $variant: 200); - } @else { - background: contrast-color($color: 'gray', $variant: 50, $opacity: .1); - } - - igx-icon { - /* stylelint-disable max-nesting-depth */ - @if $theme-variant == 'light' { - color: color($color: 'gray', $variant: 700); - } @else { - color: contrast-color($color: 'gray', $variant: 50, $opacity: .8); - } - /* stylelint-enable max-nesting-depth */ - } - } @else { - background: color($color: 'gray', $variant: 100); - } - } - - @if $variant == 'indigo' { - igx-icon { - --component-size: 2; - - @if $theme-variant == 'light' { - color: color($color: 'gray', $variant: 600); - } @else { - color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); - } - } - } - - [dir='rtl'] & { - igx-icon { - transform: scaleX(-1); - } - } - } - - @if $variant == 'indigo' { - %grid-excel-actions__action-filter { - margin-block-end: 0; - } - } - - %grid-excel-actions__action--active { - background: color($color: 'gray', $variant: 100); - color: var-get($theme, 'excel-filtering-actions-hover-foreground'); - } - - %grid-excel-actions__action--disabled { - color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); - pointer-events: none; - - @if $variant == 'indigo' { - igx-icon { - color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); - } - } - } - - %igx-excel-filter__empty { - display: grid; - place-items: center; - height: 100%; - } - - %grid-excel-main { - display: flex; - flex-direction: column; - flex-grow: 1; - overflow: hidden; - - @if $variant == 'indigo' { - padding: pad(rem(16px)); - gap: sizable(rem(16px)); - } @else { - padding: pad(rem(4px), rem(8px), rem(16px)); - gap: sizable(rem(4px), rem(8px), rem(16px)); - } - - igx-list { - flex-grow: 1; - overflow: hidden; - - @if $variant == 'indigo' { - --background: #{color($color: 'surface', $variant: 500)}; - - margin-inline: calc(sizable(rem(-16px)) * -1); - - // This is the only way to take the gap from the list, - // otherwise we have to hardcoded here - > div { - gap: inherit; - } - - igx-display-container { - display: flex; - flex-direction: column; - gap: inherit; - padding: pad(rem(8px)); - } - } @else { - margin-inline: calc(sizable(rem(-4px), rem(-8px), rem(-16px)) * -1); - } - - border: 0; - - @if $bootstrap-theme { - border-top: rem(1px) dashed color($color: 'gray', $variant: 100); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); - } @else { - border-top: rem(1px) dashed color($color: 'gray', $variant: 300); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); - } - - @if $variant == 'indigo' and $theme-variant == 'dark' { - border-top: rem(1px) dashed color($color: 'gray', $variant: 100); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); - } - } - - %igx-excel-filter__tree { - background: color($color: 'surface'); - overflow-y: auto; - margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1); - margin-block: 0; - flex: 1; - - @if $bootstrap-theme { - border-top: rem(1px) dashed color($color: 'gray', $variant: 100); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); - } @else { - border-top: rem(1px) dashed color($color: 'gray', $variant: 300); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); - } - - @if $variant == 'indigo' and $theme-variant == 'dark' { - border-top: rem(1px) dashed color($color: 'gray', $variant: 100); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); - } - - igx-icon { - width: var(--ig-icon-size, #{$tree-node-expander-size}); - height: var(--ig-icon-size, #{$tree-node-expander-size}); - font-size: var(--ig-icon-size, #{$tree-node-expander-size}); - } - - > igx-checkbox, - .igx-tree-node__wrapper { - height: #{sizable( - map.get($tree-node-height, 'compact'), - map.get($tree-node-height, 'cosy'), - map.get($tree-node-height, 'comfortable') - )}; - min-height: #{sizable( - map.get($tree-node-height, 'compact'), - map.get($tree-node-height, 'cosy'), - map.get($tree-node-height, 'comfortable') - )}; - } - - .igx-tree-node__toggle-button { - min-width: rem(20px); - margin-inline-start: pad-inline( - map.get($tree-node-indent, 'compact'), - map.get($tree-node-indent, 'cosy'), - map.get($tree-node-indent, 'comfortable') - ); - margin-inline-end: pad-inline(rem(4px), rem(8px)); - } - - .igx-tree { - overflow-y: hidden; - } - } - - %igx-excel-filter__tree-alike { - background: color($color: 'surface'); - display: flex; - flex-direction: column; - z-index: 1; - } - - %igx-excel-filter__tree-alike-item { - display: flex; - align-items: center; - height: sizable( - map.get($tree-node-height, 'compact'), - map.get($tree-node-height, 'cosy'), - map.get($tree-node-height, 'comfortable') - ); - background: color($color: 'surface'); - - &:hover, - &:focus { - background: color($color: 'gray', $variant: 200); - } - - > igx-checkbox { - margin-inline-start: pad-inline( - map.get($checkbox-indent, 'compact'), - map.get($checkbox-indent, 'cosy'), - map.get($checkbox-indent, 'comfortable') - ); - } - } - } - - %grid-excel-menu--cosy { - - %grid-excel-menu__header { - justify-content: space-between; - } - } - - %grid-excel-menu--compact { - - %grid-excel-menu__header { - justify-content: space-between; - } - - %grid-excel-sort, - %grid-excel-move { - @extend %grid-excel-action--compact; - - igx-buttongroup { - width: rem(208px); - } - } - - @if $variant != 'indigo' { - %grid-excel-move { - margin-bottom: 0; - } - } - } - - %grid-excel-menu__secondary { - width: rem(520px); - min-width: rem(520px); - background: var-get($theme, 'filtering-row-background'); - box-shadow: elevation(12); - border-radius: border-radius(rem(4px)); - } - - %grid-excel-menu__condition { - display: flex; - flex-wrap: wrap; - align-items: center; - - @if $variant == 'indigo' { - padding-inline: pad-inline(rem(16px)); - } @else { - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - } - - padding-block: 0; - - igx-select { - flex-grow: 1; - flex-basis: 40%; - margin: rem(16px) 0; - - ~ igx-input-group, - ~ igx-date-picker, - ~ igx-time-picker { - margin-inline-start: rem(16px); - } - } - - igx-buttongroup { - min-width: 30%; - } - - [igxIconButton] { - --component-size: var(--grid-size); - margin-inline-start: rem(16px); - } - } - - %grid-excel-menu__add-filter { - margin-inline: pad-inline(rem(4px), rem(4px), rem(16px)); - margin-block-start: 0; - - @if $bootstrap-theme { - // important is needed to override the typography margins - margin-block-end: rem(4px) !important; - } - - igx-icon { - width: var(--ig-icon-size, #{rem(18px)}); - height: var(--ig-icon-size, #{rem(18px)}); - font-size: var(--ig-icon-size, #{rem(18px)}); - } - } - - %grid-excel-menu__secondary-header { - @if $bootstrap-theme { - border-bottom: rem(1px) solid color($color: 'gray', $variant: 100); - } @else { - border-bottom: rem(1px) solid color($color: 'gray', $variant: 300); - } - } - - %grid-excel-menu__secondary-main { - height: rem(232px); - overflow: auto; - } - - %grid-excel-menu__secondary-footer { - --ig-size: 2; - - padding-inline: pad-inline(if($variant != 'bootstrap', rem(24px), rem(16px))); - padding-block-end: pad-block(if($variant != 'bootstrap', rem(24px), rem(16px))); - - @if $bootstrap-theme { - padding-block-start: pad-block(rem(16px)); - border-top: rem(1px) solid color($color: 'gray', $variant: 300); - } - - %grid-excel-filter__apply, - %grid-excel-filter__cancel { - flex-grow: 0; - } - } - - %grid-excel-menu__filter-results { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - } - - igx-excel-style-filter-operations, - [igxExcelStyleFilterOperations] { - display: flex; - flex-direction: column; - flex-grow: 1; - overflow: hidden; - } -} - -/// Adds typography styles for the excel-style-filtering component. -/// Uses the 'body-1', 'caption' -/// category from the typographic scale. -/// @group typography -/// @access private -/// @param {Map} $categories [(haeder-comfortable: 'overline', header-compact: 'subtitle-1')] - The categories from the typographic scale used for type styles. -@mixin excel-filtering-typography($categories: ( - header-comfortable: 'overline', - header-compact: 'subtitle-1') -) { - $header-comfortable: map.get($categories, 'header-comfortable'); - $header-compact: map.get($categories, 'header-compact'); - - %grid-excel-menu { - %grid-excel-menu__header > h4 { - @include type-style('h6') - } - } - - %grid-excel-menu__secondary { - %grid-excel-menu__header > h4 { - @include type-style('h6'); - } - } - - %grid-excel-sort, - %grid-excel-move { - header { - @include type-style('overline'); - } - } - - %grid-excel-menu--cosy { - %grid-excel-menu__header > h4 { - @include type-style('h6') - } - } - - %grid-excel-menu--compact { - %grid-excel-menu__header > h4 { - @include type-style('subtitle-1') - } - - %grid-excel-sort, - %grid-excel-move { - header { - @include type-style('body-2'); - text-transform: capitalize; - } - } - - %grid-excel-actions__action { - span { - @include type-style('body-2'); - } - } - - %cbx-label { - @include type-style('body-2'); - } - } - - %grid-excel-menu__secondary--cosy { - %grid-excel-menu__header > h4 { - @include type-style('h6'); - } - } - - %grid-excel-menu__secondary--compact { - %grid-excel-menu__header > h4 { - @include type-style('subtitle-1'); - } - } +// $variant: map.get($theme, '_meta', 'theme'); +// $theme-variant: map.get($theme, '_meta', 'variant'); +// $bootstrap-theme: $variant == 'bootstrap'; +// +// $tree-node-indent: ( +// comfortable: rem(16px), +// cosy: rem(8px), +// compact: rem(4px) +// ); +// +// $tree-node-expander-size: rem(20px); +// +// $tree-node-height: ( +// comfortable: rem(40px), +// cosy: rem(32px), +// compact: rem(24px) +// ); +// +// $checkbox-indent: ( +// comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}), +// cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}), +// compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}), +// ); +// +// %grid-excel-filter { +// --component-size: var(--ig-size, var(--ig-size-large)); +// display: block; +// width: rem(320px); +// height: 100%; +// flex-grow: 1; +// +// @if $variant == 'indigo' { +// box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) color(null, 'gray', if($theme-variant == 'light', 400, 100)); +// +// // TODO: The border-radius should not be hardcoded. +// border-radius: border-radius(rem(4px)); +// } @else { +// box-shadow: elevation(12); +// } +// +// overflow: auto; +// min-width: rem(320px); +// +// } +// +// %igx-excel-filter__sizing { +// @include sizable(); +// +// min-height: sizable( +// rem(330px), +// rem(465px), +// rem(645px) +// ); +// max-height: sizable( +// rem(405px), +// rem(565px), +// rem(775px) +// ); +// } +// +// %grid-excel-filter--inline { +// box-shadow: none; +// width: 100%; +// } +// +// %igx-excel-filter__loading { +// display: flex; +// justify-content: center; +// align-items: center; +// } +// +// %grid-excel-icon { +// display: flex; +// cursor: pointer; +// +// @if $variant == 'indigo' { +// opacity: if($theme-variant == 'light', .75, .85); +// +// &:hover { +// opacity: 1; +// } +// } +// +// @if $variant != 'indigo' { +// igx-icon { +// --size: var(--igx-icon-size, #{rem(15px)}); +// } +// } +// } +// +// %grid-excel-icon--filtered { +// opacity: 1; +// +// igx-icon { +// color: if($variant == 'indigo', color($color: 'primary', $variant: 500), color($color: 'secondary')); +// } +// +// @if $variant == 'indigo' { +// &:hover { +// igx-icon { +// color: color($color: 'primary', $variant: 400); +// } +// } +// } +// } +// +// %grid-excel-menu { +// --component-size: var(--ig-size, var(--ig-size-large)); +// +// display: flex; +// flex-direction: column; +// height: 100%; +// +// // TODO: The border-radius should not be hardcoded. +// border-radius: border-radius(rem(4px)); +// +// @if $variant != 'indigo' { +// background: var-get($theme, 'filtering-row-background'); +// +// %igx-group-display { +// --elevation: none; +// --item-background: #{var-get($theme, 'filtering-row-background')}; +// --item-hover-background: #{color($color: 'gray', $variant: 100)}; +// --item-selected-background: #{color($color: 'gray', $variant: 100)}; +// --item-text-color: #{color($color: 'gray', $variant: 700)}; +// --item-icon-color: #{color($color: 'gray', $variant: 700)}; +// --item-hover-text-color: #{color($color: 'gray', $variant: 800)}; +// --item-hover-icon-color: #{color($color: 'gray', $variant: 800)}; +// --item-selected-text-color: #{if( +// $variant == 'indigo', +// contrast-color($color: 'surface'), +// color($color: 'secondary', $variant: 500) +// )}; +// --item-selected-icon-color: #{if( +// $variant == 'indigo', +// contrast-color($color: 'surface'), +// color($color: 'secondary', $variant: 500) +// )}; +// --item-selected-hover-icon-color: #{if( +// $variant == 'fluent', +// color($color: 'secondary', $variant: 500), +// contrast-color($color: 'gray', $variant: 50) +// )}; +// --item-border-color: transparent; +// --item-hover-border-color: transparent; +// --item-focused-border-color: #{if( +// $variant == 'fluent', +// color($color: 'gray', $variant: 700), +// transparent +// )}; +// --item-selected-border-color: transparent; +// --item-selected-hover-border-color: transparent; +// --item-disabled-border: transparent; +// --disabled-selected-border-color: transparent; +// } +// } @else { +// @if $theme-variant == 'light' { +// background: contrast-color($color: 'gray', $variant: 900); +// } @else { +// background: color($color: 'gray', $variant: 50); +// } +// +// %igx-group-display { +// --item-background: transparent; +// @if $theme-variant == 'dark' { +// --item-text-color: #{contrast-color($color: 'surface', $variant: 500)}; +// } +// --border-color: transparent; +// --item-border-color: transparent; +// --item-focused-border-color: transparent; +// --item-hover-border-color: transparent; +// --item-selected-border-color: transparent; +// --item-selected-hover-border-color: transparent; +// --item-disabled-border: transparent; +// --disabled-selected-border-color: transparent; +// --elevation: none; +// } +// +// %igx-group-item { +// &:not(:nth-child(1)) { +// margin: 0; +// } +// } +// } +// +// @include tree(tree-theme( +// $background: color($color: 'surface'), +// $background-selected: color($color: 'surface'), +// $background-active: color($color: 'surface'), +// $background-active-selected: color($color: 'surface'), +// $foreground: contrast-color($color: 'surface'), +// $foreground-selected: contrast-color($color: 'surface'), +// $foreground-active: contrast-color($color: 'surface'), +// $foreground-active-selected: contrast-color($color: 'surface'), +// )); +// +// .igx-tree-node__wrapper { +// padding: 0; +// } +// +// igx-chips-area { +// padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); +// padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); +// padding-block-end: 0; +// gap: sizable(rem(4px), rem(4px), rem(8px)); +// } +// } +// +// %grid-excel-menu__header { +// display: flex; +// align-items: center; +// +// @if $variant == 'indigo' { +// padding: pad-block(rem(16px)) pad-inline(rem(16px)) pad-block(sizable(rem(8px), rem(12px), rem(16px))); +// } @else { +// padding: pad(rem(4px), rem(8px), rem(16px)); +// } +// +// color: var-get($theme, 'excel-filtering-header-foreground'); +// } +// +// @if $variant == 'indigo' { +// .ig-typography %grid-excel-menu--compact { +// %grid-excel-menu__header { +// > h4 { +// @include type-style('h6') +// } +// } +// } +// } +// +// %grid-excel-menu__header-actions { +// display: flex; +// margin-inline-start: auto; +// gap: rem(4px); +// +// %grid-excel-actions__action { +// padding: 0 !important; +// margin: 0 !important; +// } +// +// %grid-excel-actions__action, +// %grid-excel-actions--selected { +// justify-content: center; +// } +// } +// +// %grid-excel-menu__footer { +// display: flex; +// justify-content: space-between; +// +// %grid-excel-filter__apply, +// %grid-excel-filter__cancel { +// flex-grow: 1; +// +// [igxButton] { +// width: 100%; +// } +// } +// } +// +// %grid-excel-filter__cancel + %grid-excel-filter__apply { +// margin-inline-start: rem(16px); +// } +// +// %grid-excel-sort, +// %grid-excel-move { +// display: block; +// +// @if $variant == 'indigo' { +// padding-inline: pad-inline(rem(16px)); +// } @else { +// padding-block: pad-block(rem(4px), rem(8px), rem(8px)); +// padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); +// } +// +// header { +// color: var-get($theme, 'excel-filtering-subheader-foreground'); +// +// @if $variant == 'indigo' { +// margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important; +// text-transform: capitalize !important; +// } @else { +// margin-block-end: rem(4px); +// } +// } +// +// igx-icon { +// --component-size: #{if($variant == 'indigo', 2, 1)}; +// +// display: initial; +// width: var(--size) !important; +// height: var(--size) !important; +// font-size: var(--size) !important; +// } +// } +// +// @if $variant == 'indigo' { +// %grid-excel-move { +// margin-block-end: sizable(rem(12px), rem(16px), rem(16px)); +// } +// +// %grid-excel-sort + %grid-excel-move { +// margin-block-start: sizable(rem(4px), rem(8px), rem(8px)); +// } +// +// %grid-excel-sort { +// padding-block-end: 0; +// } +// +// %grid-excel-actions__action { +// span { +// @include type-style('body-2'); +// } +// } +// } +// +// %grid-excel-action--compact { +// display: flex; +// align-items: center; +// justify-content: space-between; +// +// header { +// margin-inline-end: auto; +// } +// } +// +// %grid-excel-actions { +// padding-block: pad-block(rem(4px), rem(8px), rem(8px)); +// padding-inline: pad-inline(rem(4px), rem(16px), rem(16px)); +// } +// +// %grid-excel-actions--selected { +// igx-icon { +// color: if( +// $variant == 'indigo', +// color($color: 'primary', $variant: 200), +// color($color: 'secondary') +// ); +// } +// } +// +// %grid-excel-move .igx-button-group { +// [dir='rtl'] & { +// flex-direction: row-reverse; +// +// igx-icon, +// [igxButton] { +// direction: ltr; +// } +// } +// } +// +// %grid-excel-sort .igx-button-group { +// [dir='rtl'] & { +// flex-direction: row-reverse; +// +// igx-icon, +// [igxButton] { +// direction: ltr; +// } +// } +// } +// +// %grid-excel-actions__action { +// display: flex; +// align-items: center; +// justify-content: space-between; +// +// @if $variant == 'indigo' { +// padding-block: pad-block(rem(4px), rem(6px), rem(8px)); +// padding-inline: pad-inline(rem(12px)); +// margin-inline: rem(8px); +// margin-block-end: rem(4px); +// border-radius: rem(4px); +// } @else { +// padding-block: pad-block(rem(4px), rem(8px), rem(8px)); +// padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); +// } +// +// cursor: pointer; +// color: var-get($theme, 'excel-filtering-actions-foreground'); +// outline-style: none; +// +// &:hover, +// &:focus { +// color: var-get($theme, 'excel-filtering-actions-hover-foreground'); +// +// @if $variant == 'indigo' { +// @if $theme-variant == 'light' { +// background: color($color: 'gray', $variant: 200); +// } @else { +// background: contrast-color($color: 'gray', $variant: 50, $opacity: .1); +// } +// +// igx-icon { +// /* stylelint-disable max-nesting-depth */ +// @if $theme-variant == 'light' { +// color: color($color: 'gray', $variant: 700); +// } @else { +// color: contrast-color($color: 'gray', $variant: 50, $opacity: .8); +// } +// /* stylelint-enable max-nesting-depth */ +// } +// } @else { +// background: color($color: 'gray', $variant: 100); +// } +// } +// +// @if $variant == 'indigo' { +// igx-icon { +// --component-size: 2; +// +// @if $theme-variant == 'light' { +// color: color($color: 'gray', $variant: 600); +// } @else { +// color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); +// } +// } +// } +// +// [dir='rtl'] & { +// igx-icon { +// transform: scaleX(-1); +// } +// } +// } +// +// @if $variant == 'indigo' { +// %grid-excel-actions__action-filter { +// margin-block-end: 0; +// } +// } +// +// %grid-excel-actions__action--active { +// background: color($color: 'gray', $variant: 100); +// color: var-get($theme, 'excel-filtering-actions-hover-foreground'); +// } +// +// %grid-excel-actions__action--disabled { +// color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); +// pointer-events: none; +// +// @if $variant == 'indigo' { +// igx-icon { +// color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); +// } +// } +// } +// +// %igx-excel-filter__empty { +// display: grid; +// place-items: center; +// height: 100%; +// } +// +// %grid-excel-main { +// display: flex; +// flex-direction: column; +// flex-grow: 1; +// overflow: hidden; +// +// @if $variant == 'indigo' { +// padding: pad(rem(16px)); +// gap: sizable(rem(16px)); +// } @else { +// padding: pad(rem(4px), rem(8px), rem(16px)); +// gap: sizable(rem(4px), rem(8px), rem(16px)); +// } +// +// igx-list { +// flex-grow: 1; +// overflow: hidden; +// +// @if $variant == 'indigo' { +// --background: #{color($color: 'surface', $variant: 500)}; +// +// margin-inline: calc(sizable(rem(-16px)) * -1); +// +// // This is the only way to take the gap from the list, +// // otherwise we have to hardcoded here +// > div { +// gap: inherit; +// } +// +// igx-display-container { +// display: flex; +// flex-direction: column; +// gap: inherit; +// padding: pad(rem(8px)); +// } +// } @else { +// margin-inline: calc(sizable(rem(-4px), rem(-8px), rem(-16px)) * -1); +// } +// +// border: 0; +// +// @if $bootstrap-theme { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 100); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); +// } @else { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 300); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); +// } +// +// @if $variant == 'indigo' and $theme-variant == 'dark' { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 100); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); +// } +// } +// +// %igx-excel-filter__tree { +// background: color($color: 'surface'); +// overflow-y: auto; +// margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1); +// margin-block: 0; +// flex: 1; +// +// @if $bootstrap-theme { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 100); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); +// } @else { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 300); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); +// } +// +// @if $variant == 'indigo' and $theme-variant == 'dark' { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 100); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); +// } +// +// igx-icon { +// width: var(--igx-icon-size, #{$tree-node-expander-size}); +// height: var(--igx-icon-size, #{$tree-node-expander-size}); +// font-size: var(--igx-icon-size, #{$tree-node-expander-size}); +// } +// +// > igx-checkbox, +// .igx-tree-node__wrapper { +// height: #{sizable( +// map.get($tree-node-height, 'compact'), +// map.get($tree-node-height, 'cosy'), +// map.get($tree-node-height, 'comfortable') +// )}; +// min-height: #{sizable( +// map.get($tree-node-height, 'compact'), +// map.get($tree-node-height, 'cosy'), +// map.get($tree-node-height, 'comfortable') +// )}; +// } +// +// .igx-tree-node__toggle-button { +// min-width: rem(20px); +// margin-inline-start: pad-inline( +// map.get($tree-node-indent, 'compact'), +// map.get($tree-node-indent, 'cosy'), +// map.get($tree-node-indent, 'comfortable') +// ); +// margin-inline-end: pad-inline(rem(4px), rem(8px)); +// } +// +// .igx-tree { +// overflow-y: hidden; +// } +// } +// +// %igx-excel-filter__tree-alike { +// background: color($color: 'surface'); +// display: flex; +// flex-direction: column; +// z-index: 1; +// } +// +// %igx-excel-filter__tree-alike-item { +// display: flex; +// align-items: center; +// height: sizable( +// map.get($tree-node-height, 'compact'), +// map.get($tree-node-height, 'cosy'), +// map.get($tree-node-height, 'comfortable') +// ); +// background: color($color: 'surface'); +// +// &:hover, +// &:focus { +// background: color($color: 'gray', $variant: 200); +// } +// +// > igx-checkbox { +// margin-inline-start: pad-inline( +// map.get($checkbox-indent, 'compact'), +// map.get($checkbox-indent, 'cosy'), +// map.get($checkbox-indent, 'comfortable') +// ); +// } +// } +// } +// +// %grid-excel-menu--cosy { +// +// %grid-excel-menu__header { +// justify-content: space-between; +// } +// } +// +// %grid-excel-menu--compact { +// +// %grid-excel-menu__header { +// justify-content: space-between; +// } +// +// %grid-excel-sort, +// %grid-excel-move { +// @extend %grid-excel-action--compact; +// +// igx-buttongroup { +// width: rem(208px); +// } +// } +// +// @if $variant != 'indigo' { +// %grid-excel-move { +// margin-bottom: 0; +// } +// } +// } +// +// %grid-excel-menu__secondary { +// width: rem(520px); +// min-width: rem(520px); +// background: var-get($theme, 'filtering-row-background'); +// box-shadow: elevation(12); +// border-radius: border-radius(rem(4px)); +// } +// +// %grid-excel-menu__condition { +// display: flex; +// flex-wrap: wrap; +// align-items: center; +// +// @if $variant == 'indigo' { +// padding-inline: pad-inline(rem(16px)); +// } @else { +// padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); +// } +// +// padding-block: 0; +// +// igx-select { +// flex-grow: 1; +// flex-basis: 40%; +// margin: rem(16px) 0; +// +// ~ igx-input-group, +// ~ igx-date-picker, +// ~ igx-time-picker { +// margin-inline-start: rem(16px); +// } +// } +// +// igx-buttongroup { +// min-width: 30%; +// } +// +// [igxIconButton] { +// --component-size: var(--grid-size); +// margin-inline-start: rem(16px); +// } +// } +// +// %grid-excel-menu__add-filter { +// margin-inline: pad-inline(rem(4px), rem(4px), rem(16px)); +// margin-block-start: 0; +// +// @if $bootstrap-theme { +// // important is needed to override the typography margins +// margin-block-end: rem(4px) !important; +// } +// +// igx-icon { +// width: var(--igx-icon-size, #{rem(18px)}); +// height: var(--igx-icon-size, #{rem(18px)}); +// font-size: var(--igx-icon-size, #{rem(18px)}); +// } +// } +// +// %grid-excel-menu__secondary-header { +// @if $bootstrap-theme { +// border-bottom: rem(1px) solid color($color: 'gray', $variant: 100); +// } @else { +// border-bottom: rem(1px) solid color($color: 'gray', $variant: 300); +// } +// } +// +// %grid-excel-menu__secondary-main { +// height: rem(232px); +// overflow: auto; +// } +// +// %grid-excel-menu__secondary-footer { +// --ig-size: 2; +// +// padding-inline: pad-inline(if($variant != 'bootstrap', rem(24px), rem(16px))); +// padding-block-end: pad-block(if($variant != 'bootstrap', rem(24px), rem(16px))); +// +// @if $bootstrap-theme { +// padding-block-start: pad-block(rem(16px)); +// border-top: rem(1px) solid color($color: 'gray', $variant: 300); +// } +// +// %grid-excel-filter__apply, +// %grid-excel-filter__cancel { +// flex-grow: 0; +// } +// } +// +// %grid-excel-menu__filter-results { +// position: absolute; +// width: 1px; +// height: 1px; +// overflow: hidden; +// } +// +// igx-excel-style-filter-operations, +// [igxExcelStyleFilterOperations] { +// display: flex; +// flex-direction: column; +// flex-grow: 1; +// overflow: hidden; +// } +//} +// +///// Adds typography styles for the excel-style-filtering component. +///// Uses the 'body-1', 'caption' +///// category from the typographic scale. +///// @group typography +///// @access private +///// @param {Map} $categories [(haeder-comfortable: 'overline', header-compact: 'subtitle-1')] - The categories from the typographic scale used for type styles. +//@mixin excel-filtering-typography($categories: ( +// header-comfortable: 'overline', +// header-compact: 'subtitle-1') +//) { +// $header-comfortable: map.get($categories, 'header-comfortable'); +// $header-compact: map.get($categories, 'header-compact'); +// +// %grid-excel-menu { +// %grid-excel-menu__header > h4 { +// @include type-style('h6') +// } +// } +// +// %grid-excel-menu__secondary { +// %grid-excel-menu__header > h4 { +// @include type-style('h6'); +// } +// } +// +// %grid-excel-sort, +// %grid-excel-move { +// header { +// @include type-style('overline'); +// } +// } +// +// %grid-excel-menu--cosy { +// %grid-excel-menu__header > h4 { +// @include type-style('h6') +// } +// } +// +// %grid-excel-menu--compact { +// %grid-excel-menu__header > h4 { +// @include type-style('subtitle-1') +// } +// +// %grid-excel-sort, +// %grid-excel-move { +// header { +// @include type-style('body-2'); +// text-transform: capitalize; +// } +// } +// +// %grid-excel-actions__action { +// span { +// @include type-style('body-2'); +// } +// } +// +// %cbx-label { +// @include type-style('body-2'); +// } +// } +// +// %igx-group-item { +// @include type-style('button'); +// } +// +// %grid-excel-menu__secondary--cosy { +// %grid-excel-menu__header > h4 { +// @include type-style('h6'); +// } +// } +// +// %grid-excel-menu__secondary--compact { +// %grid-excel-menu__header > h4 { +// @include type-style('subtitle-1'); +// } +// } } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss index 91b864e6c87..8eb02e2f71e 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss @@ -10,664 +10,664 @@ /// @requires {mixin} excel-filtering-partial /// @requires {mixin} advanced-filtering-partial @mixin component { - @include b(igx-grid) { - $this: bem--selector-to-string(&); - @include register-component( - $name: string.slice($this, 2, -1), - $deps: ( - igx-checkbox, - igx-chip, - igx-grid-summary, - igx-icon-button, - igx-input-group, - igx-grid-toolbar, - igx-paginator, - igx-watermark, - ) - ); - - @extend %grid-host !optional; - - @extend %grid-display !optional; - - @include e(caption) { - @extend %grid-caption !optional; - } - - @include e(tbody) { - @extend %grid-tbody-container !optional; - } - - @include e(tbody-content) { - @extend %grid-tbody !optional; - - &:focus { - @extend %disable-focus-styles !optional; - } - } - - @include e(tbody-message) { - @extend %grid-tbody-message !optional; - } - - @include e(loading) { - @extend %igx-grid__loading !optional; - } - - @include e(tbody-scrollbar) { - @extend %grid-tbody-scrollbar !optional; - } - - @include e(tbody-scrollbar-main) { - @extend %grid-tbody-scrollbar-main !optional; - } - - @include e(tbody-scrollbar-start) { - @extend %grid-tbody-scrollbar-start !optional; - } - - @include e(tbody-scrollbar-end) { - @extend %grid-tbody-scrollbar-end !optional; - } - - @include e(scroll) { - @extend %grid-scroll !optional; - } - - @include e(scroll-start) { - @extend %grid-scroll-start !optional; - } - - @include e(scroll-main) { - @extend %grid-scroll-main !optional; - } - - @include e(tfoot) { - @extend %grid-tfoot !optional; - - &:focus { - @extend %disable-focus-styles !optional; - } - } - - @include e(tfoot-thumb) { - @extend %grid-tfoot-thumb !optional; - } - - @include e(footer) { - @extend %grid-footer !optional; - } - - @include e(tr) { - @extend %grid-row !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; - } - } - - @include e(tr-action) { - @extend %igx-grid__tr-action !optional - } - - @include e(tr, $m: 'drag') { - @extend %igx-grid__tr--drag !optional; - } - - @include e(tr, $m: 'ghost') { - @extend %igx-grid__tr--ghost !optional; - } - - @include e(drag-indicator) { - @extend %igx-grid__drag-indicator !optional; - } - - @include e(drag-indicator, $m: 'header') { - @extend %igx-grid__drag-indicator--header !optional; - } - - @include e(drag-indicator, $m: 'off') { - @extend %igx-grid__drag-indicator--off !optional; - } - - @include e(tr, $m: 'mrl') { - @extend %grid-row--mrl !optional; - } - - @include e(tr, $mods: ('mrl', 'edit')) { - @extend %grid-row--edit-mrl !optional; - } - - @include e(summaries) { - @extend %grid-summaries !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; - } - } - - @include e(summaries, $m: 'body') { - @extend %grid-summaries !optional; - @extend %grid-summaries--body !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; - } - } - - @include e(summaries-patch) { - @extend %grid-summaries-patch !optional; - } - - @include e(tr, $m: odd) { - @extend %grid-row--odd !optional; - } - - @include e(tr, $m: even) { - @extend %grid-row--even !optional; - } - - @include e(tr, $m: selected) { - @extend %grid-row--selected !optional; - } - - @include e(tr, $m: edited) { - @extend %igx-grid__tr--edited !optional; - } - - @include e(tr, $m: deleted) { - @extend %igx-grid__tr--deleted !optional; - } - - @include e(tr, $m: highlighted) { - @extend %igx-grid__tr--highlighted !optional; - } - - @include e(tr, $m: edit) { - @extend %igx-grid__tr--edit !optional; - } - - @include e(tr, $m: add-animate) { - @extend %igx-grid__tr--add-animate !optional; - } - - @include e(tr, $m: inner) { - @extend %igx-grid__tr--inner !optional; - } - - @include e(tr, $m: header) { - @extend %igx-grid__tr--header !optional; - } - - @include e(tr, $m: group) { - @extend %grid-row--group !optional; - } - - @include e(tr, $m: mrl) { - @extend %grid-row--mrl !optional; - } - - @include e(tr-container) { - @extend %igx-grid__tr-container !optional; - } - - @include e(tr-container, $m: active) { - @extend %igx-grid__tr-container--active !optional; - } - - @include e(td) { - @extend %grid-cell-display !optional; - } - - @include e(td, $m: active) { - @extend %grid-cell--active !optional; - } - - @include e(td, $m: selected) { - @extend %grid-cell--selected !optional; - } - - @include e(td, $m: invalid) { - @extend %grid-cell--invalid !optional; - } - - @include e(td, $m: valid) { - @extend %grid-cell--valid !optional; - } - - @include e(td, $m: column-selected) { - @extend %grid-cell--column-selected !optional; - } - - @include e(td, $mods: (selected, column-selected)) { - @extend %grid-cell--cross-selected !optional; - } - - @include e(td, $m: bool) { - @extend %igx-grid__td--centered !optional; - @extend %igx-grid__td--bool !optional; - } - - @include e(td, $m: bool-true) { - @extend %igx-grid__td--bool-true !optional; - } - - @include e(td, $m: image) { - @extend %igx-grid__td--centered !optional; - } - - @include e(tr, $mods: (selected, filtered)) { - @extend %grid-row--selected--filtered !optional; - } - - @include e(tr, $m: filtered) { - @extend %igx-grid-row--filtered !optional; - } - - @include e(tr, $m: expanded) { - @extend %igx-grid__tr--expanded !optional; - } - - @include e(tr, $m: pinned) { - @extend %igx-grid__tr--pinned !optional; - } - - @include e(tr, $m: merged) { - @extend %igx-grid__tr--merged !optional; - } - - @include e(tr, $m: merged-top) { - @extend %igx-grid__tr--merged-top !optional; - } - - @include e(tr, $m: pinned-top) { - @extend %igx-grid__tr--pinned-top !optional; - } - - @include e(tr, $m: pinned-bottom) { - @extend %igx-grid__tr--pinned-bottom !optional; - } - - @include e(tree-grouping-indicator) { - @extend %igx-grid__tree-grouping-indicator !optional; - } - - @include e(tree-loading-indicator) { - @extend %igx-grid__tree-loading-indicator !optional; - } - - @include e(td, $m: new) { - @extend %igx-grid__td--new !optional; - } - - @include e(td, $m: edited) { - @extend %igx-grid__td--edited !optional; - } - - @include e(td, $m: merged) { - @extend %igx-grid__td--merged !optional; - } - - @include e(td, $mods: (merged-selected, merged-hovered)) { - @extend %igx-grid__td--merged-selected-hovered !optional; - } - - @include e(td, $m: merged-selected) { - @extend %igx-grid__td--merged-selected !optional; - } - - @include e(td, $m: merged-hovered) { - @extend %igx-grid__td--merged-hovered !optional; - } - - @include e(td, $m: editing) { - @extend %igx-grid__td--editing !optional; - } - - @include e(td, $mods: (editing, valid)) { - @extend %igx-grid__td--editing--valid !optional; - } - - @include e(td, $mods: (editing, invalid)) { - @extend %igx-grid__td--editing--invalid !optional; - } - - @include e(tr, $m: disabled) { - @extend %igx-grid__tr--disabled !optional; - } - - @include e(td, $m: number) { - @extend %grid-cell-number !optional; - } - - @include e(td, $m: pinned) { - @extend %grid-cell--pinned !optional; - } - - @include e(td, $m: pinned-last) { - @extend %grid-cell--pinned !optional; - @extend %grid-cell--pinned-last !optional; - } - - @include e(td, $m: pinned-first) { - @extend %grid-cell--pinned !optional; - @extend %grid-cell--pinned-first !optional; - } - - @include e(td, $m: fw) { - @extend %grid-cell--fixed-width !optional; - } - - @include e(td, $mods: (pinned, selected)) { - @extend %grid-cell--pinned-selected !optional; - } - - @include e(td, $mods: (pinned, column-selected)) { - @extend %grid-cell--pinned--column-selected !optional; - } - - @include e(td, $m: row-pinned-first) { - @extend %grid-cell--row-pinned-first !optional; - } - - @include e(td, $m: pinned-chip) { - @extend %grid-cell--pinned-chip !optional; - } - - @include e(td-text) { - @extend %grid-cell-text !optional; - } - - @include e(cbx-padding) { - @extend %cbx-padding !optional; - } - - @include e(cbx-selection) { - @extend %grid__cbx-selection !optional; - } - - @include e(cbx-selection, $m: push) { - @extend %grid__cbx-selection--push !optional; - } - - @include e(group-row) { - @extend %igx-grid__group-row !optional; - } - - @include e(group-row, $m: active) { - @extend %igx-grid__group-row--active !optional; - } - - @include e(group-content) { - @extend %igx-grid__group-content !optional; - } - - @include e(row-indentation) { - @extend %igx-grid__row-indentation !optional; - } - - @include e(grouping-indicator) { - @extend %igx-grid__grouping-indicator !optional; - } - - @include e(scroll-on-drag-left) { - @extend %grid__scroll-on-drag-left !optional; - } - - @include e(scroll-on-drag-right) { - @extend %grid__scroll-on-drag-right !optional; - } - - @include e(scroll-on-drag-pinned) { - @extend %grid__scroll-on-drag-pinned !optional; - } - - @include e(drag-ghost-image) { - @extend %grid__drag-ghost-image !optional; - } - - @include e(drag-ghost-image-icon) { - @extend %grid__drag-ghost-image-icon !optional; - } - - @include e(drag-ghost-image-icon-group) { - @extend %grid__drag-ghost-image-icon-group !optional; - } - - @include e(drag-col-header) { - @extend %igx-grid__drag-col-header !optional; - } - - @include e(header-indentation) { - @extend %igx-grid__header-indentation !optional; - } - - @include e(header-indentation, $m: 'no-border') { - @extend %igx-grid__header-indentation--no-border !optional; - } - - @include e(group-expand-btn) { - @extend %igx-grid__group-expand-btn !optional; - } - - @include e(group-expand-btn, $m: 'push') { - @extend %igx-grid__group-expand-btn--push !optional; - } - - @include e(outlet) { - @extend %igx-grid__outlet !optional; - } - - @include e(loading-outlet) { - @extend %igx-grid__loading-outlet !optional; - } - - @include e(row-editing-outlet) { - @extend %igx-grid__row-editing-outlet !optional; - } - - @include e(addrow-snackbar) { - @extend %igx-grid__addrow-snackbar !optional; - } - - @include e(filtering-cell) { - @extend %igx-grid__filtering-cell !optional; - } - - @include e(filtering-cell, $m: 'selected') { - @extend %igx-grid__filtering-cell !optional; - @extend %igx-grid__filtering-cell--selected !optional; - } - - @include e(filtering-cell-indicator) { - @extend %igx-grid__filtering-cell-indicator !optional; - } - - @include e(filtering-cell-indicator, $m: 'hidden') { - @extend %igx-grid__filtering-cell-indicator !optional; - @extend %igx-grid__filtering-cell-indicator--hidden !optional; - } - - @include e(filtering-dropdown-items) { - @extend %igx-grid__filtering-dropdown-items !optional; - } - - @include e(filtering-dropdown-text) { - @extend %igx-grid__filtering-dropdown-text !optional; - } - - @include e(filtering-row) { - @extend %igx-grid__filtering-row !optional; - } - - @include e(filtering-row-editing-buttons) { - @extend %igx-grid__filtering-row-editing-buttons !optional; - } - - @include e(filtering-row-editing-buttons, $m: small) { - @extend %igx-grid__filtering-row-editing-buttons--small !optional; - } - - @include e(filtering-row-main) { - @extend %igx-grid__filtering-row-main !optional; - } - - @include e(filtering-row-scroll-start) { - @extend %igx-grid__filtering-scroll-start !optional; - } - - @include e(filtering-row-scroll-end) { - @extend %igx-grid__filtering-scroll-end !optional; - } - - @include e(hierarchical-indent) { - @extend %igx-grid__hierarchical-indent !optional; - } - - @include e(hierarchical-expander) { - @extend %igx-grid__hierarchical-expander !optional; - } - - @include e(hierarchical-expander, $m: empty) { - @extend %igx-grid__hierarchical-expander !optional; - @extend %igx-grid__hierarchical-expander--empty !optional; - } - - @include e(hierarchical-expander, $m: header) { - @extend %igx-grid__hierarchical-expander--header !optional; - } - - @include e(hierarchical-expander, $m: push) { - @extend %igx-grid__hierarchical-expander--push !optional; - } - - @include e(hierarchical-indent, $m: scroll) { - @extend %igx-grid__hierarchical-indent--scroll !optional; - } - - @include e(mrl-block) { - @extend %grid-mrl-block !optional; - } - - @for $i from 1 through 10 { - @include e(row-indentation, $m: level-#{$i}) { - @extend %igx-grid__row-indentation--level-#{$i} !optional; - } - - @include e(group-row, $m: padding-level-#{$i}) { - @extend %igx-grid__group-row--padding-level-#{$i} !optional; - } - } - - // Pivot start - @include e(pivot, $m: 'super-compact') { - @extend %igx-grid__pivot--super-compact !optional - } - - @include e(tr-pivot) { - @extend %igx-grid__tr-pivot !optional - } - - @include e(pivot-filter-toggle) { - @extend %igx-grid__pivot-filter-toggle !optional - } - - @include e(pivot-empty-chip-area) { - @extend %igx-grid__pivot-empty-chip-area !optional - } - - - - @include e(tr-pivot, $m: 'row-area') { - @extend %igx-grid__tr-pivot--row-area !optional - } - - @include e(tr-pivot, $m: 'filter-container') { - @extend %igx-grid__tr-pivot--filter-container !optional - } - - @include e(tr-pivot, $m: 'chip_drop_indicator') { - @extend %igx-grid__tr-pivot--chip_drop_indicator !optional - } - - @include e(tr-pivot, $m: 'drop-row-area') { - @extend %igx-grid__tr-pivot--drop-row-area !optional - } - - @include e(tr-pivot, $m: 'filter') { - @extend %igx-grid__tr-pivot--filter !optional - } - - @include e(tr-pivot-group) { - @extend %igx-grid__tr-pivot-group !optional - } - - @include e(tr-header-row) { - @extend %igx-grid__tr-header-row !optional; - } - - @include e(tr-pivot, $m: 'columnDimensionLeaf') { - @extend %igx-grid__tr-pivot--columnDimensionLeaf !optional - } - - @include e(tr-pivot, $m: 'columnMultiRowSpan') { - @extend %igx-grid__tr-pivot--columnMultiRowSpan !optional - } - - @include e(tbody-pivot-mrl-dimension) { - @extend %igx-grid__tbody-pivot-mrl-dimension !optional - } - - @include e(tr-pivot-toggle-icons) { - @extend %igx-grid__tr-pivot-toggle-icons !optional; - } - // pivot end - - @include excel-filtering-partial(); - @include advanced-filtering-partial(); - @include group-by-area(); - @include header-row(); - } - - @include b(igx-drop-area) { - @extend %igx-drop-area !optional; - - @include m(hover) { - @extend %igx-drop-area--hover !optional; - } - - @include e(icon) { - @extend %igx-drop-area__icon !optional; - } - - @include e(text) { - @extend %igx-drop-area__text !optional; - } - } - - @include b(igx-group-label) { - @extend %igx-group-label !optional; - - @include e(icon) { - @extend %igx-group-label__icon !optional; - } - - @include e(column-name) { - @extend %igx-group-label__column-name !optional; - } - - @include e(text) { - @extend %igx-group-label__text !optional; - } - - @include e(count-badge) { - @extend %igx-group-label__count-badge !optional; - } - } - - @include b(igx-grid-summary) { - @include m(active) { - @extend %igx-grid-summary--active !optional; - } - } + //@include b(igx-grid) { + // $this: bem--selector-to-string(&); + // @include register-component( + // $name: string.slice($this, 2, -1), + // $deps: ( + // igx-checkbox, + // igx-chip, + // igx-grid-summary, + // igx-icon-button, + // igx-input-group, + // igx-grid-toolbar, + // igx-paginator, + // igx-watermark, + // ) + // ); + // + // @extend %grid-host !optional; + // + // @extend %grid-display !optional; + // + // @include e(caption) { + // @extend %grid-caption !optional; + // } + // + // @include e(tbody) { + // @extend %grid-tbody-container !optional; + // } + // + // @include e(tbody-content) { + // @extend %grid-tbody !optional; + // + // &:focus { + // @extend %disable-focus-styles !optional; + // } + // } + // + // @include e(tbody-message) { + // @extend %grid-tbody-message !optional; + // } + // + // @include e(loading) { + // @extend %igx-grid__loading !optional; + // } + // + // @include e(tbody-scrollbar) { + // @extend %grid-tbody-scrollbar !optional; + // } + // + // @include e(tbody-scrollbar-main) { + // @extend %grid-tbody-scrollbar-main !optional; + // } + // + // @include e(tbody-scrollbar-start) { + // @extend %grid-tbody-scrollbar-start !optional; + // } + // + // @include e(tbody-scrollbar-end) { + // @extend %grid-tbody-scrollbar-end !optional; + // } + // + // @include e(scroll) { + // @extend %grid-scroll !optional; + // } + // + // @include e(scroll-start) { + // @extend %grid-scroll-start !optional; + // } + // + // @include e(scroll-main) { + // @extend %grid-scroll-main !optional; + // } + // + // @include e(tfoot) { + // @extend %grid-tfoot !optional; + // + // &:focus { + // @extend %disable-focus-styles !optional; + // } + // } + // + // @include e(tfoot-thumb) { + // @extend %grid-tfoot-thumb !optional; + // } + // + // @include e(footer) { + // @extend %grid-footer !optional; + // } + // + // @include e(tr) { + // @extend %grid-row !optional; + // + // igx-display-container { + // @extend %grid-display-container-tr !optional; + // } + // } + // + // @include e(tr-action) { + // @extend %igx-grid__tr-action !optional + // } + // + // @include e(tr, $m: 'drag') { + // @extend %igx-grid__tr--drag !optional; + // } + // + // @include e(tr, $m: 'ghost') { + // @extend %igx-grid__tr--ghost !optional; + // } + // + // @include e(drag-indicator) { + // @extend %igx-grid__drag-indicator !optional; + // } + // + // @include e(drag-indicator, $m: 'header') { + // @extend %igx-grid__drag-indicator--header !optional; + // } + // + // @include e(drag-indicator, $m: 'off') { + // @extend %igx-grid__drag-indicator--off !optional; + // } + // + // @include e(tr, $m: 'mrl') { + // @extend %grid-row--mrl !optional; + // } + // + // @include e(tr, $mods: ('mrl', 'edit')) { + // @extend %grid-row--edit-mrl !optional; + // } + // + // @include e(summaries) { + // @extend %grid-summaries !optional; + // + // igx-display-container { + // @extend %grid-display-container-tr !optional; + // } + // } + // + // @include e(summaries, $m: 'body') { + // @extend %grid-summaries !optional; + // @extend %grid-summaries--body !optional; + // + // igx-display-container { + // @extend %grid-display-container-tr !optional; + // } + // } + // + // @include e(summaries-patch) { + // @extend %grid-summaries-patch !optional; + // } + // + // @include e(tr, $m: odd) { + // @extend %grid-row--odd !optional; + // } + // + // @include e(tr, $m: even) { + // @extend %grid-row--even !optional; + // } + // + // @include e(tr, $m: selected) { + // @extend %grid-row--selected !optional; + // } + // + // @include e(tr, $m: edited) { + // @extend %igx-grid__tr--edited !optional; + // } + // + // @include e(tr, $m: deleted) { + // @extend %igx-grid__tr--deleted !optional; + // } + // + // @include e(tr, $m: highlighted) { + // @extend %igx-grid__tr--highlighted !optional; + // } + // + // @include e(tr, $m: edit) { + // @extend %igx-grid__tr--edit !optional; + // } + // + // @include e(tr, $m: add-animate) { + // @extend %igx-grid__tr--add-animate !optional; + // } + // + // @include e(tr, $m: inner) { + // @extend %igx-grid__tr--inner !optional; + // } + // + // @include e(tr, $m: header) { + // @extend %igx-grid__tr--header !optional; + // } + // + // @include e(tr, $m: group) { + // @extend %grid-row--group !optional; + // } + // + // @include e(tr, $m: mrl) { + // @extend %grid-row--mrl !optional; + // } + // + // @include e(tr-container) { + // @extend %igx-grid__tr-container !optional; + // } + // + // @include e(tr-container, $m: active) { + // @extend %igx-grid__tr-container--active !optional; + // } + // + // @include e(td) { + // @extend %grid-cell-display !optional; + // } + // + // @include e(td, $m: active) { + // @extend %grid-cell--active !optional; + // } + // + // @include e(td, $m: selected) { + // @extend %grid-cell--selected !optional; + // } + // + // @include e(td, $m: invalid) { + // @extend %grid-cell--invalid !optional; + // } + // + // @include e(td, $m: valid) { + // @extend %grid-cell--valid !optional; + // } + // + // @include e(td, $m: column-selected) { + // @extend %grid-cell--column-selected !optional; + // } + // + // @include e(td, $mods: (selected, column-selected)) { + // @extend %grid-cell--cross-selected !optional; + // } + // + // @include e(td, $m: bool) { + // @extend %igx-grid__td--centered !optional; + // @extend %igx-grid__td--bool !optional; + // } + // + // @include e(td, $m: bool-true) { + // @extend %igx-grid__td--bool-true !optional; + // } + // + // @include e(td, $m: image) { + // @extend %igx-grid__td--centered !optional; + // } + // + // @include e(tr, $mods: (selected, filtered)) { + // @extend %grid-row--selected--filtered !optional; + // } + // + // @include e(tr, $m: filtered) { + // @extend %igx-grid-row--filtered !optional; + // } + // + // @include e(tr, $m: expanded) { + // @extend %igx-grid__tr--expanded !optional; + // } + // + // @include e(tr, $m: pinned) { + // @extend %igx-grid__tr--pinned !optional; + // } + // + // @include e(tr, $m: merged) { + // @extend %igx-grid__tr--merged !optional; + // } + // + // @include e(tr, $m: merged-top) { + // @extend %igx-grid__tr--merged-top !optional; + // } + // + // @include e(tr, $m: pinned-top) { + // @extend %igx-grid__tr--pinned-top !optional; + // } + // + // @include e(tr, $m: pinned-bottom) { + // @extend %igx-grid__tr--pinned-bottom !optional; + // } + // + // @include e(tree-grouping-indicator) { + // @extend %igx-grid__tree-grouping-indicator !optional; + // } + // + // @include e(tree-loading-indicator) { + // @extend %igx-grid__tree-loading-indicator !optional; + // } + // + // @include e(td, $m: new) { + // @extend %igx-grid__td--new !optional; + // } + // + // @include e(td, $m: edited) { + // @extend %igx-grid__td--edited !optional; + // } + // + // @include e(td, $m: merged) { + // @extend %igx-grid__td--merged !optional; + // } + // + // @include e(td, $mods: (merged-selected, merged-hovered)) { + // @extend %igx-grid__td--merged-selected-hovered !optional; + // } + // + // @include e(td, $m: merged-selected) { + // @extend %igx-grid__td--merged-selected !optional; + // } + // + // @include e(td, $m: merged-hovered) { + // @extend %igx-grid__td--merged-hovered !optional; + // } + // + // @include e(td, $m: editing) { + // @extend %igx-grid__td--editing !optional; + // } + // + // @include e(td, $mods: (editing, valid)) { + // @extend %igx-grid__td--editing--valid !optional; + // } + // + // @include e(td, $mods: (editing, invalid)) { + // @extend %igx-grid__td--editing--invalid !optional; + // } + // + // @include e(tr, $m: disabled) { + // @extend %igx-grid__tr--disabled !optional; + // } + // + // @include e(td, $m: number) { + // @extend %grid-cell-number !optional; + // } + // + // @include e(td, $m: pinned) { + // @extend %grid-cell--pinned !optional; + // } + // + // @include e(td, $m: pinned-last) { + // @extend %grid-cell--pinned !optional; + // @extend %grid-cell--pinned-last !optional; + // } + // + // @include e(td, $m: pinned-first) { + // @extend %grid-cell--pinned !optional; + // @extend %grid-cell--pinned-first !optional; + // } + // + // @include e(td, $m: fw) { + // @extend %grid-cell--fixed-width !optional; + // } + // + // @include e(td, $mods: (pinned, selected)) { + // @extend %grid-cell--pinned-selected !optional; + // } + // + // @include e(td, $mods: (pinned, column-selected)) { + // @extend %grid-cell--pinned--column-selected !optional; + // } + // + // @include e(td, $m: row-pinned-first) { + // @extend %grid-cell--row-pinned-first !optional; + // } + // + // @include e(td, $m: pinned-chip) { + // @extend %grid-cell--pinned-chip !optional; + // } + // + // @include e(td-text) { + // @extend %grid-cell-text !optional; + // } + // + // @include e(cbx-padding) { + // @extend %cbx-padding !optional; + // } + // + // @include e(cbx-selection) { + // @extend %grid__cbx-selection !optional; + // } + // + // @include e(cbx-selection, $m: push) { + // @extend %grid__cbx-selection--push !optional; + // } + // + // @include e(group-row) { + // @extend %igx-grid__group-row !optional; + // } + // + // @include e(group-row, $m: active) { + // @extend %igx-grid__group-row--active !optional; + // } + // + // @include e(group-content) { + // @extend %igx-grid__group-content !optional; + // } + // + // @include e(row-indentation) { + // @extend %igx-grid__row-indentation !optional; + // } + // + // @include e(grouping-indicator) { + // @extend %igx-grid__grouping-indicator !optional; + // } + // + // @include e(scroll-on-drag-left) { + // @extend %grid__scroll-on-drag-left !optional; + // } + // + // @include e(scroll-on-drag-right) { + // @extend %grid__scroll-on-drag-right !optional; + // } + // + // @include e(scroll-on-drag-pinned) { + // @extend %grid__scroll-on-drag-pinned !optional; + // } + // + // @include e(drag-ghost-image) { + // @extend %grid__drag-ghost-image !optional; + // } + // + // @include e(drag-ghost-image-icon) { + // @extend %grid__drag-ghost-image-icon !optional; + // } + // + // @include e(drag-ghost-image-icon-group) { + // @extend %grid__drag-ghost-image-icon-group !optional; + // } + // + // @include e(drag-col-header) { + // @extend %igx-grid__drag-col-header !optional; + // } + // + // @include e(header-indentation) { + // @extend %igx-grid__header-indentation !optional; + // } + // + // @include e(header-indentation, $m: 'no-border') { + // @extend %igx-grid__header-indentation--no-border !optional; + // } + // + // @include e(group-expand-btn) { + // @extend %igx-grid__group-expand-btn !optional; + // } + // + // @include e(group-expand-btn, $m: 'push') { + // @extend %igx-grid__group-expand-btn--push !optional; + // } + // + // @include e(outlet) { + // @extend %igx-grid__outlet !optional; + // } + // + // @include e(loading-outlet) { + // @extend %igx-grid__loading-outlet !optional; + // } + // + // @include e(row-editing-outlet) { + // @extend %igx-grid__row-editing-outlet !optional; + // } + // + // @include e(addrow-snackbar) { + // @extend %igx-grid__addrow-snackbar !optional; + // } + // + // @include e(filtering-cell) { + // @extend %igx-grid__filtering-cell !optional; + // } + // + // @include e(filtering-cell, $m: 'selected') { + // @extend %igx-grid__filtering-cell !optional; + // @extend %igx-grid__filtering-cell--selected !optional; + // } + // + // @include e(filtering-cell-indicator) { + // @extend %igx-grid__filtering-cell-indicator !optional; + // } + // + // @include e(filtering-cell-indicator, $m: 'hidden') { + // @extend %igx-grid__filtering-cell-indicator !optional; + // @extend %igx-grid__filtering-cell-indicator--hidden !optional; + // } + // + // @include e(filtering-dropdown-items) { + // @extend %igx-grid__filtering-dropdown-items !optional; + // } + // + // @include e(filtering-dropdown-text) { + // @extend %igx-grid__filtering-dropdown-text !optional; + // } + // + // @include e(filtering-row) { + // @extend %igx-grid__filtering-row !optional; + // } + // + // @include e(filtering-row-editing-buttons) { + // @extend %igx-grid__filtering-row-editing-buttons !optional; + // } + // + // @include e(filtering-row-editing-buttons, $m: small) { + // @extend %igx-grid__filtering-row-editing-buttons--small !optional; + // } + // + // @include e(filtering-row-main) { + // @extend %igx-grid__filtering-row-main !optional; + // } + // + // @include e(filtering-row-scroll-start) { + // @extend %igx-grid__filtering-scroll-start !optional; + // } + // + // @include e(filtering-row-scroll-end) { + // @extend %igx-grid__filtering-scroll-end !optional; + // } + // + // @include e(hierarchical-indent) { + // @extend %igx-grid__hierarchical-indent !optional; + // } + // + // @include e(hierarchical-expander) { + // @extend %igx-grid__hierarchical-expander !optional; + // } + // + // @include e(hierarchical-expander, $m: empty) { + // @extend %igx-grid__hierarchical-expander !optional; + // @extend %igx-grid__hierarchical-expander--empty !optional; + // } + // + // @include e(hierarchical-expander, $m: header) { + // @extend %igx-grid__hierarchical-expander--header !optional; + // } + // + // @include e(hierarchical-expander, $m: push) { + // @extend %igx-grid__hierarchical-expander--push !optional; + // } + // + // @include e(hierarchical-indent, $m: scroll) { + // @extend %igx-grid__hierarchical-indent--scroll !optional; + // } + // + // @include e(mrl-block) { + // @extend %grid-mrl-block !optional; + // } + // + // @for $i from 1 through 10 { + // @include e(row-indentation, $m: level-#{$i}) { + // @extend %igx-grid__row-indentation--level-#{$i} !optional; + // } + // + // @include e(group-row, $m: padding-level-#{$i}) { + // @extend %igx-grid__group-row--padding-level-#{$i} !optional; + // } + // } + // + // // Pivot start + // @include e(pivot, $m: 'super-compact') { + // @extend %igx-grid__pivot--super-compact !optional + // } + // + // @include e(tr-pivot) { + // @extend %igx-grid__tr-pivot !optional + // } + // + // @include e(pivot-filter-toggle) { + // @extend %igx-grid__pivot-filter-toggle !optional + // } + // + // @include e(pivot-empty-chip-area) { + // @extend %igx-grid__pivot-empty-chip-area !optional + // } + // + // + // + // @include e(tr-pivot, $m: 'row-area') { + // @extend %igx-grid__tr-pivot--row-area !optional + // } + // + // @include e(tr-pivot, $m: 'filter-container') { + // @extend %igx-grid__tr-pivot--filter-container !optional + // } + // + // @include e(tr-pivot, $m: 'chip_drop_indicator') { + // @extend %igx-grid__tr-pivot--chip_drop_indicator !optional + // } + // + // @include e(tr-pivot, $m: 'drop-row-area') { + // @extend %igx-grid__tr-pivot--drop-row-area !optional + // } + // + // @include e(tr-pivot, $m: 'filter') { + // @extend %igx-grid__tr-pivot--filter !optional + // } + // + // @include e(tr-pivot-group) { + // @extend %igx-grid__tr-pivot-group !optional + // } + // + // @include e(tr-header-row) { + // @extend %igx-grid__tr-header-row !optional; + // } + // + // @include e(tr-pivot, $m: 'columnDimensionLeaf') { + // @extend %igx-grid__tr-pivot--columnDimensionLeaf !optional + // } + // + // @include e(tr-pivot, $m: 'columnMultiRowSpan') { + // @extend %igx-grid__tr-pivot--columnMultiRowSpan !optional + // } + // + // @include e(tbody-pivot-mrl-dimension) { + // @extend %igx-grid__tbody-pivot-mrl-dimension !optional + // } + // + // @include e(tr-pivot-toggle-icons) { + // @extend %igx-grid__tr-pivot-toggle-icons !optional; + // } + // // pivot end + // + // @include excel-filtering-partial(); + // @include advanced-filtering-partial(); + // @include group-by-area(); + // @include header-row(); + //} + // + //@include b(igx-drop-area) { + // @extend %igx-drop-area !optional; + // + // @include m(hover) { + // @extend %igx-drop-area--hover !optional; + // } + // + // @include e(icon) { + // @extend %igx-drop-area__icon !optional; + // } + // + // @include e(text) { + // @extend %igx-drop-area__text !optional; + // } + //} + // + //@include b(igx-group-label) { + // @extend %igx-group-label !optional; + // + // @include e(icon) { + // @extend %igx-group-label__icon !optional; + // } + // + // @include e(column-name) { + // @extend %igx-group-label__column-name !optional; + // } + // + // @include e(text) { + // @extend %igx-group-label__text !optional; + // } + // + // @include e(count-badge) { + // @extend %igx-group-label__count-badge !optional; + // } + //} + // + //@include b(igx-grid-summary) { + // @include m(active) { + // @extend %igx-grid-summary--active !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss index 160e6704e5e..c45594604fc 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss @@ -18,3037 +18,3035 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} excel-filtering @mixin grid($theme) { - @include css-vars($theme); - @include scale-in-ver-center(); - - $variant: map.get($theme, '_meta', 'theme'); - $theme-variant: map.get($theme, '_meta', 'variant'); - $bootstrap-theme: $variant == 'bootstrap'; - $not-bootstrap-theme: $variant != 'bootstrap'; - - $cbx-size: map.get(( - 'material': rem(20px), - 'fluent': rem(20px), - 'bootstrap': rem(14px), - 'indigo': rem(20px), - ), $variant); - $cbx-bs-size: rem(14px); - - $grid-shadow: var-get($theme, 'grid-elevation'); - - $grid-caption-fs: rem(20px); - $grid-caption-lh: rem(32px); - $grid-caption-padding: rem(16px) rem(24px); - - $grid-head-fs: rem(12px); - $grid-head-fw: 600; - $transition: all 120ms $ease-in-out-cubic; - - // Cell - $grid-cell-align-num: end; - $grid-cell-fs: rem(13px); - $grid-cell-lh: rem(16px); - $grid-cell-pinned-style: rem(1px) solid; - $grid-cell-pinned-border-color: color($color: 'gray', $variant: 300); - - $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - - $cell-pin: ( - style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'), - color: var-get($theme, 'pinned-border-color') - ); - - $padding-comfortable: rem(24px); - $padding-cosy: rem(16px); - $padding-compact: rem(12px); - - $grid-header-padding-inline: ( - comfortable: $padding-comfortable, - cosy: $padding-cosy, - compact: $padding-compact - ); - - $pivot-row-aria-padding: ( - comfortable: $padding-comfortable, - cosy: $padding-cosy, - compact: $padding-compact - ); - - $grid-cbx-padding: ( - comfortable: $padding-comfortable, - cosy: $padding-cosy, - compact: $padding-compact - ); - - $cbx-padding: map.get($grid-cbx-padding, 'comfortable'); - $cbx-padding-cosy: map.get($grid-cbx-padding, 'cosy'); - $cbx-padding-compact: map.get($grid-cbx-padding, 'compact'); - - $grid-header-height: ( - comfortable: if($variant == 'indigo', rem(48px), rem(50px)), - cosy: if($variant == 'indigo', rem(40px), rem(40px)), - compact: if($variant == 'indigo', rem(32px), rem(32px)) - ); - - $drop-area-height: ( - comfortable: rem(32px), - cosy: rem(24px), - compact: rem(24px) - ); - - $cell-padding-comfortable: rem(24px); - $cell-padding-cosy: rem(16px); - $cell-padding-compact: rem(12px); - - $grid-cell-padding-inline: ( - comfortable: $cell-padding-comfortable, - cosy: $cell-padding-cosy, - compact: $cell-padding-compact - ); - - $hierarchical-grid-indent: ( - comfortable: rem(24px), - cosy: rem(16px), - compact: rem(12px) - ); - - $hierarchical-action-icon: if($variant == 'indigo', rem(16px), rem(24px)); - - $hierarchical-indent: ( - comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}), - cosy: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon}), - compact: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon}) - ); - - $hierarchical-indent-scroll: ( - comfortable: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px), - cosy: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px), - compact: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px) - ); - - $grouparea-padding-inline: ( - comfortable: rem(24px), - cosy: rem(16px), - compact: rem(12px) - ); - - $grouparea-min-height: ( - comfortable: if($variant == 'indigo', rem(56px), rem(57px)), - cosy: if($variant == 'indigo', rem(48px), rem(49px)), - compact: if($variant == 'indigo', rem(40px), rem(41px)) - ); - - $grid-grouping-indicator-padding: ( - comfortable: rem(24px), - cosy: rem(16px), - compact: rem(12px) - ); - - $indicator-icon-width: map.get(( - 'material': rem(24px), - 'fluent': rem(24px), - 'bootstrap': rem(24px), - 'indigo': rem(16px), - ), $variant); - - $drag-icon-size: rem(24px); - - $grid-header-weight: map.get(( - 'material': 600, - 'fluent': 800, - 'bootstrap': 700, - 'indigo': 600, - ), $variant); - - $editing-outline-width: rem(2px); - - $filtering-row-height: #{sizable( - map.get($grid-header-height, 'compact'), - map.get($grid-header-height, 'cosy'), - map.get($grid-header-height, 'comfortable') - )}; - - %cell-input-overrides { - // Have a more stable visual editing experience - > igx-input-group, - igx-combo, - igx-simple-combo, - igx-select, - igx-date-picker, - igx-time-picker { - position: relative; - height: auto; - width: 100% !important; - overflow: hidden; - } - - igx-input-group { - background: var-get($theme, 'cell-editing-background'); - - .igx-input-group__input { - height: 100%; - color: var-get($theme, 'cell-editing-foreground'); - } - - .igx-input-group__input:focus { - color: var-get($theme, 'cell-editing-focus-foreground'); - } - } - - igx-select, - igx-combo, - igx-simple-combo, - igx-time-picker, - igx-date-picker { - igx-input-group { - height: 100%; - } - } - - .igx-input-group__bundle { - background: transparent !important; - height: 100% !important; - min-height: 100% !important; - border: none !important; - - .igx-input-group__filler, - .igx-input-group__notch { - border: none !important; - } - - &::before { - content: none !important; - } - - &::after { - display: none; - } - } - - .igx-input-group--indigo .igx-input-group__bundle:hover, - .igx-input-group--indigo .igx-input-group__bundle:focus { - background: transparent; - } - - .igx-input-group__bundle-main, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end { - height: auto; - border: none !important; - border-radius: 0 !important; - } - - .igx-input-group__bundle-main { - padding: 0; - } - - .igx-input-group__line { - display: none; - } - - igx-prefix, - igx-suffix { - background: transparent !important; - border-radius: 0 !important; - padding-top: 0 !important; - padding-bottom: 0 !important; - border: none !important; - padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; - } - - .igx-input-group--indigo { - padding-inline: sizable(rem(6px), rem(8px), rem(12px)) !important; - - igx-prefix { - padding-inline-start: 0 !important; - } - - igx-suffix { - padding-inline-end: 0 !important; - } - } - - .igx-input-group__input { - padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; - margin: 0 auto; - max-width: 100%; - } - - igx-date-range-picker { - height: 100%; - } - - igx-time-picker [igxLabel] { - display: none; - } - - %form-group-input { - // ignore global typography - font-size: $grid-cell-fs !important; - line-height: $grid-cell-lh !important; - } - - .igx-input-group__input, - .igx-input-group__file-input, - .igx-input-group__textarea { - box-shadow: none !important; - border: none !important; - } - - .igx-input-group--disabled, - .igx-input-group--disabled igx-prefix, - .igx-input-group--disabled igx-suffix { - color: var-get($theme, 'cell-disabled-color'); - } - } - - @if $variant != 'indigo' { - %filtering-row-input-overrides { - igx-input-group { - width: 100%; - max-width: rem(200px); - min-width: rem(140px); - - @if $variant != 'fluent' { - border: rem(1px) solid color($color: 'gray', $variant: 300); - } - - --size: calc(#{$filtering-row-height} - #{rem(8px)}); - - .igx-input-group__bundle, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end, - igx-prefix, - igx-suffix { - background: transparent; - border-radius: 0; - - /* stylelint-disable-next-line */ - &:hover { - background: transparent; - } - } - - igx-prefix, - igx-suffix { - height: 100% !important; - padding: 0 sizable(rem(4px), rem(6px), rem(8px)); - } - - .igx-input-group__input { - font-size: sizable(rem(12px), rem(14px), rem(16px)); - padding-inline-start: 0; - padding-block: 0; - height: 100%; - } - - .igx-input-group__bundle, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end, - .igx-input-group__input { - border: 0; - - /* stylelint-disable-next-line */ - &:hover { - border: 0; - box-shadow: none; - } - } - - .igx-input-group__bundle::after { - display: none; - } - - .igx-input-group__bundle-main { - padding-inline-start: 0; - } - - color: var-get($theme, 'filtering-row-text-color'); - - &:hover{ - color: var-get($theme, 'filtering-row-text-color'); - border-color: color($color: 'primary', $variant: 500); - } - } - - .igx-input-group--focused { - @if $variant != 'fluent' { - border-color: color($color: 'primary', $variant: 500); - border-width: rem(1px); - } - - color: var-get($theme, 'filtering-row-text-color'); - - .igx-input-group__bundle, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end, - .igx-input-group__input { - border: 0 !important; - - @if $variant != 'fluent' { - box-shadow: none !important; - } - } - - .igx-input-group__bundle-main, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end { - margin: 0 !important; - } - - .igx-input-group__bundle, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end, - igx-prefix, - igx-suffix { - background: transparent !important; - border-radius: 0; - } - } - - .igx-input-group__line { - display: none; - } - - igx-prefix:focus { - color: color(map.get($theme, 'palette'), 'secondary'); - } - - igx-suffix { - igx-icon { - outline-style: none; - - &:focus { - color: color($color: 'secondary'); - } - - + igx-icon { - margin-inline-start: rem(4px); - } - } - } - } - } - - igx-grid, - igx-hierarchical-grid, - igx-pivot-grid, - igx-tree-grid { - @if $variant == 'material' { - @if $theme-variant == 'light' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; - } - @if $theme-variant == 'dark' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; - } - } - - @if $variant == 'fluent' { - @if $theme-variant == 'dark' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; - } - } - - @if $variant == 'bootstrap' { - @if $theme-variant == 'dark' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; - } - } - - @if $variant == 'indigo' { - @if $theme-variant == 'light' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; - } - @if $theme-variant == 'dark' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; - } - } - } - - %disable-focus-styles { - outline: 0; - } - - %grid-host { - @include sizable(); - - --component-size: var(--ig-size, var(--ig-size-large)); - --grid-size: var(--component-size); - } - - %grid-display { - --header-size: #{sizable( - map.get($grid-header-height, 'compact'), - map.get($grid-header-height, 'cosy'), - map.get($grid-header-height, 'comfortable') - )}; - - --grouparea-size: #{sizable( - map.get($grouparea-min-height, 'compact'), - map.get($grouparea-min-height, 'cosy'), - map.get($grouparea-min-height, 'comfortable') - )}; - - --ig-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))}; - - position: relative; - display: grid; - grid-template-rows: auto auto auto 1fr auto auto; - grid-template-columns: 100%; - overflow: hidden; - contain: inline-size; - box-shadow: $grid-shadow; - - @if $variant == 'fluent' { - box-shadow: 0 0 0 rem(1px) var-get($theme, 'grid-border-color'); - } - - outline-style: none; - z-index: 1; - - %cbx-display { - min-width: $cbx-size; - - @if $variant == 'material' { - %cbx-composite-wrapper { - padding: 0; - } - - %cbx-label-pos--after { - margin-inline-start: rem(12px); - } - - %cbx-label-pos--before { - margin-inline-end: rem(12px); - } - - %cbx-label-pos--before, - %cbx-label-pos--after { - &:empty { - margin: 0; - } - } - } - } - } - - %grid-caption { - display: flex; - align-items: center; - font-size: $grid-caption-fs; - line-height: $grid-caption-lh; - padding: $grid-caption-padding; - grid-row: 1; - } - - %grid-thead, - %grid-tfoot { - position: relative; - display: flex; - background: var-get($theme, 'header-background'); - color: var-get($theme, 'header-text-color'); - overflow: hidden; - outline-style: none; - - %grid-row { - position: relative; - background: inherit; - color: inherit; - z-index: 2; - - &:hover { - background: inherit; - color: inherit; - } - } - - > [aria-activedescendant] { - outline-style: none; - } - } - - %grid-thead { - border-bottom: $grid-header-border; - - @if $bootstrap-theme { - border-bottom-width: rem(2px); - } - - z-index: 2; - - %grid__cbx-selection--push { - align-items: flex-start; - padding-block-start: pad-block( - math.div(map.get($grid-header-height, 'compact') - rem(20px), 2), - math.div(map.get($grid-header-height, 'cosy') - rem(20px), 2), - math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2) - ); - } - - %grid-row { - border-bottom: none; - } - } - - %grid-thead-container { - grid-row: 3; - display: flex; - overflow: hidden; - - %igx-grid__header-indentation { - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - - @if $variant == 'indigo' { - %igx-grid__group-expand-btn { - color: var-get($theme, 'expand-icon-color'); - } - - %igx-grid__group-expand-btn:hover{ - color: var-get($theme, 'expand-icon-hover-color'); - } - } - - } - - %igx-grid__drag-indicator { - cursor: default; - } - - %grid-row--mrl { - %igx-grid__hierarchical-expander--header, - %igx-grid__hierarchical-expander, - %igx-grid__header-indentation, - %igx-grid__row-indentation, - %grid__cbx-selection { - border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - } - - &:focus-visible { - outline-color: transparent; - } - } - - %grid-thead-title { - flex-basis: auto !important; - align-items: center !important; - border-bottom: $grid-header-border; - height: var(--header-size); - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-cell-padding-inline, 'compact'), - map.get($grid-cell-padding-inline, 'cosy'), - map.get($grid-cell-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - - igx-icon { - opacity: if($theme-variant == 'light', .75, .85); - - &:hover { - opacity: 1; - cursor: pointer; - } - } - } - - padding-block: 0; - } - - %grid-thead-title--pinned { - border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - } - - %grid-thead-group { - display: flex; - flex-flow: row nowrap; - } - - /* We set those with position relative - so that the drop indicators be scoped - to their respective group. The item - being the topmost element, while the - subgroup encapsulates children of each - thead item and group. - */ - %grid-thead-item { - display: flex; - flex-flow: column nowrap; - - %grid-thead-group { - flex: 1 1 auto; - } - - %grid-cell-header { - flex: 1 1 auto; - } - - %grid-thead-title { - flex: 0 0 auto; - } - } - - %grid-thead-item, - %grid-thead-subgroup { - position: relative; - } - - %grid-tfoot { - grid-row: 5; - border-top: $grid-header-border; - z-index: 10001; - } - - %grid-footer { - grid-row: 7; - } - - %grid-display-container-thead { - width: 100%; - overflow: visible; - } - - %grid-display-container-tr { - width: 100%; - overflow: visible; - flex: 1; - // needed to override the min-width of the column headers - min-width: 0; - } - - %grid-mrl-block { - display: grid; - background: inherit; - position: relative; - - %grid-thead-item { - display: flex; - } - - %grid-cell-header { - align-items: center; - flex-grow: 1; - border-bottom: $grid-header-border; - } - - %grid-cell-display { - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - border-bottom: rem(1px) solid var-get($theme, 'header-border-color'); - } - } - - %grid-row--mrl { - &%grid-row { - border-bottom-color: transparent; - - @if $variant == 'indigo' { - %grid-cell-display { - border-inline-end: rem(1px) solid var-get($theme, 'row-border-color'); - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - } - } - } - - %grid__cbx-selection, - %igx-grid__hierarchical-expander, - %igx-grid__row-indentation, - %igx-grid__drag-indicator { - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - } - } - - %grid-tbody { - position: relative; - background: var-get($theme, 'content-background'); - color: var-get($theme, 'content-text-color'); - overflow: hidden; - z-index: 1; - outline-style: none; - } - - %grid-tbody-container { - position: relative; - display: flex; - grid-row: 4; - overflow: hidden; - } - - %grid-tbody-message { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - color: var-get($theme, 'content-text-color'); - flex-direction: column; - padding: rem(24px); - } - - %igx-grid__loading { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - min-height: rem(100px); - - > %circular-display { - width: rem(50); - height: rem(50); - } - } - - %grid-scroll { - grid-row: 6; - display: flex; - flex-flow: row nowrap; - width: 100%; - background: var-get($theme, 'header-background'); - z-index: 10001; - } - - %grid-thead-thumb { - background: var-get($theme, 'header-background'); - border-inline-start: rem(1px) solid var-get($theme, 'header-border-color'); - } - - %grid-tfoot-thumb { - position: absolute; - top: 0; - inset-inline-end: 0; - background: var-get($theme, 'header-background'); - border-inline-start: rem(1px) solid var-get($theme, 'header-border-color'); - } - - %grid-tbody-scrollbar { - background: var-get($theme, 'content-background'); - border-inline-start: rem(1px) solid var-get($theme, 'row-border-color'); - position: relative; - } - - %grid-tbody-scrollbar-start { - background: var-get($theme, 'header-background'); - } - - %grid-tbody-scrollbar-main { - position: relative; - } - - %grid-tbody-scrollbar-end { - background: var-get($theme, 'header-background'); - } - - %grid-scroll-start { - background: var-get($theme, 'header-background'); - } - - %grid-scroll-main { - igx-display-container { - height: 0; - } - - igx-horizontal-virtual-helper { - height: 100%; - } - } - - %grid-row { - display: flex; - background: var-get($theme, 'content-background'); - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - outline-style: none; - position: relative; - background-clip: content-box !important; - - &:hover { - background: var-get($theme, 'row-hover-background'); - color: var-get($theme, 'row-hover-text-color'); - - %grid-cell--column-selected { - color: var-get($theme, 'row-selected-hover-text-color'); - background: var-get($theme, 'row-selected-hover-background'); - } - - %grid-cell--cross-selected { - color: var-get($theme, 'cell-selected-within-text-color'); - background: var-get($theme, 'cell-selected-within-background'); - } - } - - &%igx-grid__tr--ghost { - background: var-get($theme, 'row-ghost-background'); - color: var-get($theme, 'row-drag-color'); - z-index: 10002; - - @include css-vars(( - name: 'igx-grid-row', - row-ghost-background: map.get($theme, 'row-ghost-background'), - row-drag-color: map.get($theme, 'row-drag-color') - )); - } - } - - %igx-grid__drag-indicator { - display: flex; - align-items: center; - justify-content: center; - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-cell-padding-inline, 'compact'), - map.get($grid-cell-padding-inline, 'cosy'), - map.get($grid-cell-padding-inline, 'comfortable') - ); - min-height: sizable( - rem(32px), - rem(40px), - rem(50px) - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - min-height: sizable( - rem(32px), - rem(40px), - rem(48px) - ); - - igx-icon { - opacity: if($theme-variant == 'light', .75, .85); - } - - &:hover { - igx-icon { - opacity: 1; - } - } - } - - padding-block: 0; - flex: 0 0 auto; - background: inherit; - z-index: 4; - cursor: move; - border-inline-end: rem(1px) solid transparent; - background-clip: border-box; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - } - - %igx-grid__drag-indicator--header { - border-inline-end: $grid-header-border; - } - - %igx-grid__drag-indicator--off { - color: var-get($theme, 'row-drag-color'); - } - - %igx-grid__tr--drag { - opacity: .5; - } - - %grid-row--odd { - background: var-get($theme, 'row-odd-background'); - color: var-get($theme, 'row-odd-text-color'); - } - - %grid-row--even { - background: var-get($theme, 'row-even-background'); - color: var-get($theme, 'row-even-text-color'); - } - - %igx-grid__tr--expanded { - border-bottom: none; - } - - %igx-grid__tr--pinned { - position: relative; - background: inherit; - z-index: 10000; - - %igx-grid__hierarchical-expander--empty { - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - } - } - - %igx-grid__tr--pinned-top { - border-bottom: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - } - - %igx-grid__tr--pinned-bottom { - border-top: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - position: absolute; - bottom: 0; - } - - %igx-grid__td--centered { - justify-content: center; - } - - %igx-grid__td--bool { - display: flex; - flex-grow: 1; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 1)}; - } - - %igx-icon--error { - @if $variant == 'indigo' or $theme-variant == 'dark' { - color: color($color: 'gray', $variant: 500); - } @else { - color: color($color: 'gray', $variant: 600); - } - } - } - - %igx-grid__td--bool-true { - %igx-icon--success { - color: color($color: 'gray', $variant: 700); - } - } - - %igx-grid__tr--edit { - border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color'); - position: relative; - - &::after { - content: ''; - position: absolute; - height: rem(1); - width: 100%; - top: rem(-1); - inset-inline-start: 0; - background: var-get($theme, 'edit-mode-color'); - } - - &%grid-row { - border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color'); - } - - %igx-grid__td--editing { - border: none; - - %form-group-bundle--focus { - caret-color: var-get($theme, 'edit-mode-color') !important; - } - - %form-group-border { - background: var-get($theme, 'edit-mode-color') !important; - } - } - - [aria-readonly='true'] { - color: var-get($theme, 'cell-disabled-color'); - - igx-icon { - color: var-get($theme, 'cell-disabled-color'); - } - } - } - - %igx-grid__tr--inner { - display: flex; - background: inherit; - } - - %igx-grid__tr--header { - display: flex; - align-items: center; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - } - - %igx-grid__tr--add-animate { - @include animation(scale-in-ver-center .2s $ease-in-out-quad); - } - - %grid-row--edit-mrl { - &:first-of-type::after { - top: 0; - z-index: 5; - } - } - - %igx-grid__tr--edited { - &::before { - content: ''; - position: absolute; - width: if($variant == 'indigo', rem(4px), rem(2px)); - height: 100%; - z-index: 10000; - background: var-get($theme, 'edited-row-indicator'); - } - } - - %grid-row--group { - position: relative; - background: var-get($theme, 'header-background') !important; - } - - %igx-grid-row--filtered { - %grid-cell-text { - color: var-get($theme, 'tree-filtered-text-color'); - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'tree-filtered-text-color'); - - &:hover { - color: var-get($theme, 'tree-filtered-text-color'); - } - } - - %grid-cell--selected { - %grid-cell-text { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - - &:hover { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - } - } - } - } - - %grid-row--selected--filtered { - %grid-cell-text { - color: var-get($theme, 'tree-selected-filtered-row-text-color'); - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'tree-selected-filtered-row-text-color'); - - &:hover { - color: var-get($theme, 'tree-selected-filtered-row-text-color'); - } - } - - %grid-cell--selected { - %grid-cell-text { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - - &:hover { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - } - } - } - } - - %igx-grid__tree-grouping-indicator { - display: flex; - align-items: center; - justify-content: center; - user-select: none; - outline-style: none; - margin-inline-end: if($variant == 'indigo', rem(4px), rem(8)); - cursor: pointer; - - color: var-get($theme, 'expand-icon-color'); - - &:hover { - color: var-get($theme, 'expand-icon-hover-color') - } - - [dir='rtl'] & { - transform: scaleX(-1); - } - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)};; - } - } - - %igx-grid__tree-loading-indicator { - width: rem(24px, 16px); - height: rem(24px, 16px); - margin-inline-end: rem(8px, 16px); - - %circular-outer { - stroke: var-get($theme, 'expand-icon-color'); - } - - > %circular-display { - width: rem(24); - height: rem(24); - } - } - - %grid-cell-display { - position: relative; - display: flex; - flex: 1 1 0%; - align-items: center; - outline-style: none; - - @extend %cell-input-overrides; - - igx-input-group { - background: transparent; - } - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-cell-padding-inline, 'compact'), - map.get($grid-cell-padding-inline, 'cosy'), - map.get($grid-cell-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - padding-block: 0; - color: inherit; - text-align: start; - background-clip: border-box !important; - - @if $variant != 'indigo' { - font-size: $grid-cell-fs; - line-height: $grid-cell-lh; - min-height: sizable( - rem(32px), - rem(40px), - rem(50px) - ); - } @else { - @include type-style('detail-1', false); - - min-height: sizable( - rem(32px), - rem(40px), - rem(48px) - ); - } - } - - // This is no longer being extended and is left - // here for reference purposes only. It seems setting - // overflow: hidden on the cell prevents drag and selection - // of the cell. - // See github issue #9821 - %igx-grid__td--tree-cell { - overflow: hidden; - } - - %grid-cell-text { - @include ellipsis(); - - pointer-events: none; - } - - %grid-cell--fixed-width { - flex-grow: 0; - outline-style: none; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - } - - %grid-cell--active { - box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'cell-active-border-color'); - - > %igx-grid__filtering-cell, - > %grid-cell-header { - border-inline-end-color: var-get($theme, 'cell-active-border-color'); - border-bottom-color: var-get($theme, 'cell-active-border-color'); - } - } - - %grid-cell--invalid { - padding-inline-end: rem(4px) !important; - - > igx-icon { - color: color($color: 'error'); - width: var(--ig-icon-size, rem(18px)); - height: var(--ig-icon-size, rem(18px)); - font-size: var(--ig-icon-size, rem(18px)); - } - - %grid-cell-text { - width: 100%; - } - - .igx-input-group__bundle { - &:focus-within { - &::after { - border: none !important; - } - } - } - } - - %grid-cell--valid { - box-shadow: inset 0 0 0 rem(2px) color($color: 'success') !important; - } - - %grid-cell--pinned-selected, - %grid-cell--selected { - color: var-get($theme, 'cell-selected-text-color'); - background: var-get($theme, 'cell-selected-background'); - // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981 - // border-bottom: 0; - - %igx-grid__tree-grouping-indicator { - &:hover { - color: var-get($theme, 'cell-selected-text-color'); - } - } - } - - %grid-row--selected { - color: var-get($theme, 'row-selected-text-color'); - background: var-get($theme, 'row-selected-background'); - - %grid-cell--selected, - %grid-cell--pinned-selected { - color: var-get($theme, 'cell-selected-within-text-color'); - background: var-get($theme, 'cell-selected-within-background'); - } - - &:hover { - background: var-get($theme, 'row-selected-hover-background'); - color: var-get($theme, 'row-selected-hover-text-color'); - - %grid-cell--column-selected { - color: var-get($theme, 'row-selected-hover-text-color'); - background: var-get($theme, 'row-selected-hover-background'); - } - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'row-selected-text-color'); - - &:hover { - color: var-get($theme, 'row-selected-text-color'); - } - } - } - - %grid-cell--column-selected { - color: var-get($theme, 'row-selected-text-color'); - background: var-get($theme, 'row-selected-background'); - } - - %grid-cell--cross-selected { - color: var-get($theme, 'cell-selected-within-text-color'); - background: var-get($theme, 'cell-selected-within-background'); - } - - %igx-grid__td--new { - color: var-get($theme, 'cell-new-color'); - } - - %igx-grid__td--edited { - %grid-cell-text { - font-style: italic; - color: var-get($theme, 'cell-edited-value-color'); - padding: 0 rem(1px); - } - } - - %igx-grid__tr--merged { - border-block-end: 0; - } - - %igx-grid__tr--merged-top { - position: absolute; - width: 100%; - } - - %igx-grid__td--merged { - z-index: 1; - grid-row: 1 / -1; - } - - %igx-grid__td--merged-selected { - color: var-get($theme, 'row-selected-text-color'); - background: var-get($theme, 'row-selected-background') !important; - } - - %igx-grid__td--merged-hovered { - background: var-get($theme, 'row-hover-background') !important; - color: var-get($theme, 'row-hover-text-color'); - } - - %igx-grid__td--merged-selected-hovered { - background: var-get($theme, 'row-selected-hover-background') !important; - color: var-get($theme, 'row-selected-hover-text-color'); - } - - %igx-grid__tr--deleted { - %grid-cell-text { - font-style: italic; - color: color(map.get($theme, 'palette'), 'error'); - text-decoration: line-through; - } - } - - %igx-grid__tr--disabled { - %grid-cell-text { - color: var-get($theme, 'cell-disabled-color'); - } - } - - %igx-grid__td--editing { - background: var-get($theme, 'cell-editing-background') !important; - box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color'); - padding-inline: rem(4px); - - &.igx-grid__td--invalid { - box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important; - } - - &%grid-cell-number { - justify-content: flex-start !important; - } - } - - %grid-cell--pinned { - position: relative; - background: inherit; - z-index: 9999; - } - - %grid-cell--pinned--column-selected { - color: var-get($theme, 'row-selected-text-color'); - background: var-get($theme, 'row-selected-background'); - - &:hover { - background: var-get($theme, 'row-selected-hover-background'); - color: var-get($theme, 'row-selected-text-color'); - } - } - - %grid-cell--pinned-last { - border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - - %igx-grid__filtering-cell, - %grid-cell-header { - border-inline-end: none; - } - - &%grid-cell--editing { - border-inline-end: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; - } - } - - %grid-cell--pinned-first { - border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - - &%grid-cell--editing { - border-inline-start: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; - } - } - - %grid-cell--row-pinned-first { - overflow: hidden; - } - - %grid-cell--pinned-chip { - margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px)); - } - - %grid-cell-header { - flex-flow: row nowrap; - justify-content: space-between; - align-items: flex-end; - - @if $variant != 'indigo' { - font-size: $grid-head-fs; - font-weight: $grid-head-fw; - - padding-inline: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - min-width: 0; - padding-block: 0; - border-inline-end: $grid-header-border; - min-height: var(--header-size); - outline-style: none; - overflow: hidden; - transition: color 250ms ease-in-out; - } - - %grid-cell-header--filtering { - background: var-get($theme, 'filtering-header-background'); - color: var-get($theme, 'filtering-header-text-color'); - z-index: 3; - } - - %grid-cell-header-title { - @include ellipsis(); - - @if $variant != 'indigo' { - font-weight: $grid-header-weight; - } @else { - @include type-style('detail-2', false); - } - - min-width: 3ch; - user-select: none; - cursor: initial; - flex-grow: 1; /* hey IE, the text should take most of the space */ - // align-self: flex-end; /* commenting out for now on external request */ - line-height: var(--header-size); - transition: color 250ms ease-in-out; - } - - %grid-cell-header-icons { - display: inline-flex; - align-items: center; - justify-content: flex-end; - user-select: none; - min-width: rem(30px); /* sort-icon + filter icon width */ - height: var(--header-size); - align-self: flex-end; - - &:empty { - min-width: 0; - } - - .sort-icon { - position: relative; - display: flex; - - - @if $variant != 'indigo' { - igx-icon { - --size: var(--ig-icon-size, #{rem(15px)}); - } - } - - &::after { - content: attr(data-sortIndex); - position: absolute; - top: rem(-5px); - inset-inline-end: rem(-1px); - font-size: rem(10px); - text-align: end; - font-family: sans-serif; - line-height: rem(10px); - } - } - } - - - %igx-grid-th__expander { - display: flex; - align-items: center; - justify-content: center; - margin-inline-end: rem(8px); - cursor: pointer; - - igx-icon { - @if $variant == 'indigo' { - --component-size: 2; - } - - color: var-get($theme, 'expand-icon-color'); - } - - &:hover { - igx-icon { - color: var-get($theme, 'expand-icon-hover-color'); - } - } - } - - %igx-grid-th__group-title { - @include ellipsis(); - - @if $variant == 'indigo' { - @include type-style('detail-2', false); - } - } - - %igx-grid-th--collapsible { - justify-content: normal; - } - - %igx-grid-th--selectable { - @if $variant != 'indigo' { - opacity: if($theme-variant == 'light', .75, .85); - - &%grid__drag-ghost-image { - opacity: 1; - } - } @else { - opacity: 1; - } - - .sort-icon { - color: var-get($theme, 'header-selected-text-color'); - - ::after { - background: var-get($theme, 'header-selected-background'); - } - } - } - - // TODO, remove igx-banner__row extra div if possible - @if $variant { - %igx-banner__row { - display: contents; - } - } - - %igx-grid-th--selected { - .sort-icon::after { - background: var-get($theme, 'header-selected-background'); - } - } - - %igx-grid-th--selectable, - %igx-grid-th--selected { - color: var-get($theme, 'header-selected-text-color'); - background: var-get($theme, 'header-selected-background'); - - &%igx-grid-th--sorted { - .sort-icon { - color: var-get($theme, 'header-selected-text-color'); - - > igx-icon { - color: inherit; - } - - &:focus, - &:hover { - color: var-get($theme, 'header-selected-text-color'); - - > igx-icon { - color: inherit; - } - } - } - } - - @if $variant == 'indigo' { - %grid-excel-icon--filtered, - %grid-excel-icon { - color: var-get($theme, 'header-selected-text-color'); - - igx-icon { - color: var-get($theme, 'header-selected-text-color'); - } - - &:focus, - &:hover { - color: var-get($theme, 'header-selected-text-color'); - - igx-icon { - color: var-get($theme, 'header-selected-text-color'); - } - } - } - } - } - - %igx-grid-th--active { - @extend %grid-cell--active; - - %igx-grid-th--selected, - %igx-grid-th--selectable { - @extend %grid-cell--active; - } - } - - %igx-grid-summary--active { - @extend %grid-cell--active !optional; - } - - %igx-grid-th--sortable { - .sort-icon { - cursor: pointer; - opacity: if($variant == 'indigo', if($theme-variant == 'light', .75, .85), .7); - - &:hover { - opacity: 1; - } - } - } - - %igx-grid-th--sorted { - .sort-icon { - opacity: 1; - color: var-get($theme, 'sorted-header-icon-color'); - - > igx-icon { - color: inherit; - } - - &:hover { - color: var-get($theme, 'sortable-header-icon-hover-color'); - - > igx-icon { - color: inherit; - } - } - } - } - - %igx-grid-th--filtrable { - %grid-cell-header-title { - @if $variant != 'indigo' { - opacity: .7; - } - } - } - - %igx-grid-th--filtrable-sortable { - .sort-icon { - cursor: pointer; - opacity: if($variant == 'indigo', 1, .7); - - &:hover { - opacity: 1; - } - } - } - - %grid-excel-icon--filtered, - %grid-excel-icon, - .sort-icon { - transition: all 250ms ease-in-out; - } - - %grid-cell-number { - text-align: $grid-cell-align-num; - justify-content: flex-end; - flex-grow: 1; - - %grid-cell-header-icons { - justify-content: flex-start; - order: -1; - - .sort-icon { - order: 1; - } - } - } - - %grid__cbx-selection { - display: flex; - justify-content: center; - align-items: center; - background: inherit; - z-index: 4; - background-clip: border-box; - } - - %cbx-padding { - display: flex; - align-items: center; - justify-content: center; - padding-inline: pad-inline($cbx-padding-compact, $cbx-padding-cosy, $cbx-padding); - } - - %grid__resize-handle { - position: absolute; - width: rem(4px); - top: 0; - inset-inline-end: rem(-2px); - height: 100%; - z-index: 2; - } - - %grid__resize-line { - position: absolute; - cursor: col-resize; - width: rem(4px); - background: var-get($theme, 'resize-line-color'); - z-index: 2; - - &::before, - &::after { - position: absolute; - content: ''; - height: 100%; - width: rem(96px); - } - - &::before { - inset-inline-end: 100%; - } - - &::after { - inset-inline-start: 100%; - } - } - - %grid-summaries { - display: flex; - overflow: hidden; - outline-style: none; - background-color: var-get($theme, 'summaries-patch-background'); - } - - %grid-summaries--body { - --summaries-patch-background: var(--ig-gray-100); - - border-bottom: rem(1px) dashed var-get($theme, 'row-border-color'); - background-color: var-get($theme, 'summaries-patch-background'); - - &:last-of-type { - border-bottom: none; - } - - .igx-grid-summary { - --background-color: inherit; - --result-color: #{adaptive-contrast(var(--background-color))}; - } - } - - %grid-summaries-patch { - position: relative; - background: inherit; - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - z-index: 1; - - @if $variant == 'indigo' { - border-top: rem(1px) solid var-get($theme, 'header-border-color'); - } - } - - // Column moving - %igx-grid-th__drop-indicator-left, - %igx-grid-th__drop-indicator-right { - position: absolute; - width: rem(1px); - height: 100%; - top: 0; - z-index: 1; - } - - %igx-grid-th__drop-indicator-left { - inset-inline-start: rem(-1px); - } - - %igx-grid-th__drop-indicator-right { - inset-inline-end: rem(-1px); - } - - %igx-grid-th__drop-indicator--active { - &%igx-grid-th__drop-indicator-left, - &%igx-grid-th__drop-indicator-right { - border-inline-end: rem(1px) solid var-get($theme, 'drop-indicator-color'); - } - - &::after, - &::before { - position: absolute; - content: ''; - width: 0; - height: 0; - border-style: solid; - inset-inline-start: rem(-3px); - } - - &::before { - bottom: 0; - border-width: 0 rem(4px) rem(4px); - border-color: transparent transparent var-get($theme, 'drop-indicator-color'); - } - - &::after { - top: 0; - border-width: rem(4px) rem(4px) 0; - border-color: var-get($theme, 'drop-indicator-color') transparent transparent; - } - } - - %grid__scroll-on-drag-left, - %grid__scroll-on-drag-right { - position: absolute; - width: rem(15px); - top: 0; - height: 100%; - z-index: 25; - } - - %grid__scroll-on-drag-left { - inset-inline-start: 0; - } - - %grid__scroll-on-drag-right { - inset-inline-end: 0; - } - - %grid__scroll-on-drag-pinned { - position: absolute; - width: rem(15px); - height: 100%; - top: 0; - z-index: 25; - } - - %grid__drag-ghost-image { - position: absolute; - display: flex; - align-items: center; - background: var-get($theme, 'ghost-header-background'); - color: var-get($theme, 'ghost-header-text-color'); - min-width: rem(168px); - max-width: rem(320px); - height: var(--header-size); - min-height: var(--header-size); - top: rem(-99999px); - inset-inline-start: rem(-99999px); - border: none; - box-shadow: var-get($theme, 'drag-elevation'); - overflow: hidden; - z-index: 20; - - %grid-cell-header-title { - @include ellipsis(); - flex: 1 0 0; - text-align: if($variant == 'indigo', start, end); - } - - %grid-cell-header-icons { - display: none; - } - - %grid-thead-title { - border: none; - } - } - - %grid__drag-ghost-image-icon { - color: var-get($theme, 'ghost-header-icon-color'); - margin-inline-end: if($variant == 'indigo', rem(8px), rem(12px)); - } - - %grid__drag-ghost-image-icon-group { - color: var-get($theme, 'ghost-header-icon-color'); - padding: $padding-comfortable; - padding-inline-end: 0; - margin-inline-end: rem(8); - } - - %igx-grid__drag-col-header { - background: var-get($theme, 'header-background'); - - %grid-cell-header { - > * { - opacity: .4; - } - } - } - - // Group by section - %igx-grid__group-row { - background: var-get($theme, 'group-row-background'); - display: flex; - outline-style: none; - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - min-height: var(--header-size); - - %igx-grid__drag-indicator { - cursor: default; - flex-grow: 0; - } - - %grid__cbx-selection { - background: initial; - } - } - - %igx-grid__group-row--active { - background: var-get($theme, 'group-row-selected-background'); - @extend %grid-cell--active !optional; - - %igx-grid__grouping-indicator { - color: var-get($theme, 'expand-icon-color'); - } - - %igx-grid__drag-indicator { - border: rem(1px) solid var-get($theme, 'cell-active-border-color'); - border-inline-start-width: 0; - border-inline-end-width: 0; - box-shadow: inset rem(1px) 0 0 0 var-get($theme, 'cell-active-border-color'); - } - - &:hover { - background: var-get($theme, 'group-row-selected-background'); - } - } - - %igx-group-label { - display: flex; - align-items: center; - justify-content: flex-start; - line-height: rem(16px); - gap: rem(4px); - } - - %igx-group-label__icon { - @at-root igx-icon#{&} { - --component-size: #{if($variant == 'indigo', 2, 1)}; - - color: var-get($theme, 'group-label-icon'); - user-select: none; - } - } - - %igx-group-label__column-name { - @if $variant != 'indigo' { - font-weight: 600; - font-size: rem(12px); - } @else { - @include type-style('detail-2', false); - } - - color: var-get($theme, 'group-label-column-name-text'); - - } - - - %igx-group-label__count-badge { - --background-color: #{var-get($theme, 'group-count-background')}; - --text-color: #{var-get($theme, 'group-count-text-color')}; - - @if $variant == 'indigo' { - --shadow: none; - } - - > span { - font-size: $grid-head-fs; - } - } - - - %igx-group-label__text { - @if $variant != 'indigo' { - font-size: rem(13px); - } @else { - @include type-style('detail-1', false); - } - color: var-get($theme, 'group-label-text') - } - - [dir='rtl'] { - %igx-group-label { - > * { - margin-inline-start: rem(4px); - - &:last-child { - margin-inline-start: 0; - } - } - } - } - - %igx-grid__group-content { - display: flex; - align-items: center; - justify-content: flex-start; - flex: 1 1 auto; - @if $variant != 'indigo' { - padding-inline-start: pad-inline( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - ); - } @else { - padding-inline-start: 0; - } - - min-height: sizable( - map.get($grid-header-height, 'compact'), - map.get($grid-header-height, 'cosy'), - map.get($grid-header-height, 'comfortable') - ); - - &:focus { - outline: transparent; - } - } - - %igx-grid__row-indentation { - position: relative; - display: flex; - justify-content: center; - align-items: center; - padding-inline-start: pad-inline( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - ); - padding-inline-end: pad-inline( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - ); - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - background: inherit; - z-index: 1; - background-clip: border-box; - - &::after { - content: ''; - position: absolute; - width: 100%; - height: rem(1px); - bottom: rem(-1px); - inset-inline-start: 0; - background: transparent; - } - - %igx-icon-button-display { - width: rem(28px); - height: rem(28px); - color: var-get($theme, 'expand-all-icon-color'); - } - - &:focus, - &:hover { - %igx-icon-button-display { - color: var-get($theme, 'expand-all-icon-hover-color'); - } - } - } - - %igx-grid-grouparea { - grid-row: 2; - display: flex; - align-items: center; - justify-content: flex-start; - flex-wrap: wrap; - border-bottom: $grid-header-border; - background: var-get($theme, 'grouparea-background'); - color: var-get($theme, 'grouparea-color'); - min-height: var(--grouparea-size); - padding-inline: pad-inline( - map.get($grouparea-padding-inline, 'compact'), - map.get($grouparea-padding-inline, 'cosy'), - map.get($grouparea-padding-inline, 'comfortable') - ); - padding-block: 0; - z-index: 2; - height: 100%; - overflow: hidden; - - &:focus { - outline-style: none; - } - - %igx-chip { - margin-block: pad-block(rem(4px), rem(8px), rem(8px)); - } - } - - %igx-grid-grouparea__connector { - display: inline-flex; - justify-content: center; - align-items: center; - margin: 0 rem(4px); - - igx-icon { - width: var(--ig-icon-size, #{rem(16px)}); - height: var(--ig-icon-size, #{rem(16px)}); - font-size: var(--ig-icon-size, #{rem(16px)}); - } - - [dir='rtl'] & { - transform: scaleX(-1); - } - } - - %igx-drop-area { - display: flex; - align-items: center; - justify-content: flex-start; - min-width: rem(80px); - height: sizable( - map.get($drop-area-height, 'compact'), - map.get($drop-area-height, 'cosy'), - map.get($drop-area-height, 'comfortable') - ); - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-cell-padding-inline, 'compact'), - map.get($grid-cell-padding-inline, 'cosy'), - map.get($grid-cell-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - padding-block: 0; - flex: 1 0 0%; - background: var-get($theme, 'drop-area-background'); - border-radius: var-get($theme, 'drop-area-border-radius'); - - %igx-drop-area__icon { - color: var-get($theme, 'drop-area-icon-color'); - width: rem(16px); - height: rem(16px); - font-size: rem(16px); - margin-inline-end: rem(8px); - } - } - - %igx-drop-area--hover { - background: var-get($theme, 'drop-area-on-drop-background'); - } - - %igx-drop-area__text { - @include ellipsis(); - color: var-get($theme, 'drop-area-text-color'); - font-size: rem(13px); - } - - %igx-grid__grouping-indicator { - position: relative; - display: flex; - user-select: none; - justify-content: center; - align-items: center; - z-index: 1; - cursor: pointer; - padding-inline-end: if($variant == 'indigo', rem(16px), rem(12px)); - margin-inline-start: sizable( - #{map.get($grid-grouping-indicator-padding, 'compact')}, - #{map.get($grid-grouping-indicator-padding, 'cosy')}, - #{map.get($grid-grouping-indicator-padding, 'comfortable') - }); - min-height: var(--header-size); - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - - color: var-get($theme, 'expand-icon-color'); - } - - &:hover, - &:focus { - outline-style: none; - - igx-icon { - color: var-get($theme, 'expand-icon-hover-color'); - } - } - - [dir='rtl'] & { - transform: scaleX(-1); - } - } - - %igx-grid__header-indentation { - position: relative; - padding-inline-end: sizable( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - ); - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - background: var-get($theme, 'header-background'); - z-index: 4; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - } - - %igx-grid__group-expand-btn { - position: absolute; - cursor: pointer; - user-select: none; - inset-block-start: calc(50% - #{$indicator-icon-width} / 2); - inset-inline-start: var(--indicator-inline-inset); - - &:hover { - color: var-get($theme, 'expand-icon-hover-color'); - } - - &%igx-grid__group-expand-btn--push { - inset-block-start: sizable( - math.div(map.get($grid-header-height, 'compact') - $indicator-icon-width, 2), - math.div(map.get($grid-header-height, 'cosy') - $indicator-icon-width, 2), - math.div(map.get($grid-header-height, 'comfortable') - $indicator-icon-width, 2) - ); - } - } - - @for $i from 1 through 10 { - $row-indentation-level: ( - comfortable: calc(#{$i * map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width}), - cosy: calc(#{$i * map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width}), - compact: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width}) - ); - - $level--comfortable: map.get($row-indentation-level, 'comfortable'); - $level--cosy: map.get($row-indentation-level, 'cosy'); - $level--compact: map.get($row-indentation-level, 'compact'); - - %igx-grid__row-indentation--level-#{$i} { - --indicator-inline-inset: #{sizable( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - )}; - padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable); - } - - $indicator-padding--comfortable: #{$i * map.get($grid-grouping-indicator-padding, 'comfortable')}; - $indicator-padding--cosy: #{$i * map.get($grid-grouping-indicator-padding, 'cosy')}; - $indicator-padding--compact: #{$i * map.get($grid-grouping-indicator-padding, 'compact')}; - - %igx-grid__group-row--padding-level-#{$i} { - %igx-grid__grouping-indicator { - padding-inline-start: pad-inline($indicator-padding--compact, $indicator-padding--cosy, $indicator-padding--comfortable); - } - } - } - - %igx-grid__outlet { - --ig-size: var(--grid-size); - - z-index: 10002; - position: fixed; - } - - %igx-grid__loading-outlet { - width: 100%; - height: 100%; - z-index: -1; - position: absolute; - - > %overlay-wrapper--modal { - background: none; - } - - %circular-display { - width: rem(50); - height: rem(50); - } - } - - %igx-grid__row-editing-outlet { - z-index: 10000; - position: absolute; - - %overlay-wrapper { - /* Change wrapper position from 'fixed' to 'absolute' so that it is hidden when scrolled below the parent grid body content. */ - position: absolute; - } - } - - %igx-grid__addrow-snackbar { - position: absolute; - z-index: 5; - bottom: rem(24px); - inset-inline-start: 50%; - transform: translateX(-50%); - } - - %igx-grid__filtering-cell { - display: flex; - align-items: center; - border-inline-end: $grid-header-border; - border-top: $grid-header-border; - height: var(--header-size); - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - padding-block: 0; - overflow: hidden; - - igx-chips-area { - transition: transform .25s $ease-out-back; - flex-wrap: nowrap; - - .igx-filtering-chips__connector { - font-size: rem(12px); - text-transform: uppercase; - font-weight: 600; - margin: 0 rem(8px); - } - } - } - - %igx-grid__filtering-cell--selected { - color: var-get($theme, 'header-selected-text-color'); - background: var-get($theme, 'header-selected-background'); - } - - %igx-grid__filtering-cell-indicator { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding-inline-end: rem(8px); - margin-inline-start: rem(8px); - cursor: pointer; - visibility: visible; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 1)}; - } - - %igx-badge-display { - --size: #{rem(14px)}; - --font-size: #{rem(12px)}; - line-height: 0; - position: absolute; - inset-inline-end: 0; - } - } - - %igx-grid__filtering-cell-indicator--hidden { - visibility: hidden; - } - - %igx-grid__filtering-row { - position: absolute; - display: flex; - width: 100%; - height: $filtering-row-height; - padding-inline: pad-inline($cell-padding-compact, $cell-padding-cosy, $cell-padding-comfortable); - align-items: center; - justify-content: space-between; - background: var-get($theme, 'filtering-row-background'); - color: var-get($theme, 'filtering-row-text-color'); - inset-inline-start: 0; - bottom: 0; - z-index: 3; - - &::after { - display: block; - position: absolute; - content: ''; - background: inherit; - inset-inline-start: 0; - inset-inline-end: 0; - top: 0; - bottom: 0; - box-shadow: 0 rem(1px) 0 var-get($theme, 'filtering-row-background'), - 0 rem(4px) rem(10px) rgba(0, 0, 0, .12); - z-index: -1; - } - - @extend %filtering-row-input-overrides !optional; - - igx-input-group { - --ig-size: var(--grid-size) !important; - } - - [igxIconButton] { - --ig-size: 1; - } - - @if $variant == 'bootstrap' { - [igxButton] { - margin: rem(4px); - } - } - } - - %igx-grid__filtering-dropdown-items { - display: flex; - align-items: center; - } - - %igx-grid__filtering-dropdown-text { - margin-inline-start: rem(16px); - } - - %igx-grid__filtering-row-main { - display: flex; - flex: 1; - overflow: hidden; - max-width: calc(100% - 176px); - min-width: rem(56px); - - igx-chips-area { - transition: transform .25s $ease-out-back; - flex-wrap: nowrap; - margin-inline: if($variant == 'indigo', rem(12px), rem(8px)); - gap: rem(4px); - } - - @if $variant != 'indigo' { - igx-chip { - margin: 0 rem(4px); - } - - [igxButton] { - igx-icon { - position: absolute; - inset-inline-start: rem(12px); - // IE fix for vertical alignment - top: 50%; - transform: translateY(-50%); - } - - span { - margin-inline-start: rem(16px); - } - } - } - } - - %igx-grid__filtering-scroll-start { - &::after { - @include _filtering-scroll-mask($theme, right); - inset-inline-start: calc(100% + 6px); - } - - [dir='rtl'] & { - &::before { - @include _filtering-scroll-mask($theme, right); - inset-inline-end: calc(100% + 6px); - } - } - } - - %igx-grid__filtering-scroll-end { - &::before { - @include _filtering-scroll-mask($theme, left); - inset-inline-end: calc(100% + 6px); - } - - [dir='rtl'] & { - &::after { - @include _filtering-scroll-mask($theme, left); - inset-inline-start: calc(100% + 6px); - } - } - } - - %igx-grid__filtering-scroll-start, - %igx-grid__filtering-scroll-end { - width: rem(24px); - height: rem(24px); - position: relative; - overflow: visible; - margin: if($variant == 'indigo', rem(12px), rem(8px)); - z-index: 1; - - [dir='rtl'] & { - transform: scaleX(-1); - - &::after { - content: initial; - } - } - } - - %igx-grid__tr--highlighted { - position: relative; - - &::after { - content: ''; - position: absolute; - top: 0; - inset-inline-start: 0; - width: rem(4px); - height: 100%; - background: var-get($theme, 'row-highlight'); - z-index: 3; - } - - %igx-grid__tr--edited { - &::before { - inset-inline-start: rem(4px); - } - } - - &::before { - inset-inline-start: rem(4px); - } - } - - %igx-grid__tr-container { - overflow: auto; - width: 100%; - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - } - - %igx-grid__tr-container--active { - @extend %grid-cell--active !optional; - } - - %igx-grid__hierarchical-expander { - user-select: none; - background: inherit; - padding-inline: pad-inline( - map.get($hierarchical-grid-indent, 'compact'), - map.get($hierarchical-grid-indent, 'cosy'), - map.get($hierarchical-grid-indent, 'comfortable') - ); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - z-index: 3; - color: var-get($theme, 'expand-icon-color'); - background-clip: border-box; - - &:focus { - outline: none; - - igx-icon { - color: var-get($theme, 'expand-icon-hover-color'); - } - } - - &:hover { - igx-icon { - color: var-get($theme, 'expand-icon-hover-color'); - } - } - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)};; - - color: var-get($theme, 'expand-icon-color'); - max-width: $hierarchical-action-icon; - min-width: min-content; - } - - [dir='rtl'] & { - transform: scaleX(-1); - } - - &--empty { - cursor: default; - pointer-events: none; - } - } - - %igx-grid__hierarchical-expander--header { - background: inherit; - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - z-index: 3; - background-clip: border-box; - - igx-icon { - display: flex; - align-items: center; - } - } - - %igx-grid__hierarchical-expander--push { - align-items: flex-start; - - igx-icon { - min-height: var(--header-size); - max-height: var(--header-size); - } - } - - %igx-grid__header-indentation--no-border { - border-inline-end: rem(1px) solid transparent; - } - - %igx-grid__hierarchical-indent { - display: flex; - margin-inline-start: pad-inline( - map.get($hierarchical-indent, 'compact'), - map.get($hierarchical-indent, 'cosy'), - map.get($hierarchical-indent, 'comfortable') - ); - margin-inline-end: pad-inline( - map.get($hierarchical-grid-indent, 'compact'), - map.get($hierarchical-grid-indent, 'cosy'), - map.get($hierarchical-grid-indent, 'comfortable') - ); - margin-block: pad-block( - map.get($hierarchical-grid-indent, 'compact'), - map.get($hierarchical-grid-indent, 'cosy'), - map.get($hierarchical-grid-indent, 'comfortable') - ); - - &--scroll { - margin-inline-end: pad-inline( - map.get($hierarchical-indent-scroll, 'compact'), - map.get($hierarchical-indent-scroll, 'cosy'), - map.get($hierarchical-indent-scroll, 'comfortable') - ); - } - } - - @include excel-filtering($theme); - - %advanced-filtering-dialog { - @if $variant == 'indigo' { - $light-variant: contrast-color($color: 'gray', $variant: 900); - $dark-variant: color($color: 'gray', $variant: 50); - background: if($theme-variant == 'light', $light-variant, $dark-variant); - } @else { - background: color($color: 'surface', $variant: 500); - } - - box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24)); - - @if $variant == 'material' or $variant == 'bootstrap' { - border-radius: rem(4px); - } - - @if $variant == 'fluent' { - border-radius: rem(2px); - } - - @if $variant == 'indigo' { - border-radius: rem(10px); - } - - igx-query-builder { - box-shadow: none; - border: none; - border-radius: inherit; - } - - igx-query-builder-header { - cursor: grab; - } - } - - %igx-grid__filtering-row-editing-buttons--small, - %igx-grid__filtering-row-editing-buttons { - display: flex; - align-items: center; - - button { - transition: none; - } - } - - %igx-grid__filtering-row-editing-buttons--small { - button { - &:not([disabled]) { - igx-icon { - color: var-get($theme, 'sorted-header-icon-color'); - } - } - } - } - - %igx-grid__tr-action { - &:last-of-type { - border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - @if $variant != 'indigo' { - min-height: sizable( - rem(32px), - rem(40px), - rem(50px) - ); - } @else { - min-height: sizable( - rem(32px), - rem(40px), - rem(48px) - ); - } - } - } - - igx-child-grid-row { - igx-child-grid-row { - %igx-grid__tr-action { - border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - } - } - - // Pivot grid - %igx-grid__pivot--super-compact { - --ig-size: 1 !important; - %grid-cell-display, - %grid-cell-header { - padding: 0 if($variant != 'indigo', rem(4px), rem(6px)) !important; - min-height: rem(24px) !important; - height: rem(24px); - } - - %grid-cell-header { - > * { - line-height: normal; - align-self: initial; - max-height: 100%; - } - } - - %igx-grid__tr-pivot--row-area { - padding-bottom: rem(4px); - } - } - - %grid-thead--pivot { - display: flex; - - %grid-thead--virtualizationWrapper { - border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - } - - %grid-thead--virtualizationWrapper { - height: 100%; - } - - %grid-thead--virtualizationContainer { - overflow: visible; - height: 100%; - } - - %igx-grid__tr-pivot { - display: flex; - align-items: center; - background: inherit; - overflow: hidden; - z-index: 3; - height: var(--header-size); - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - padding-block: 0; - background-clip: border-box !important; - border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - - igx-chips-area { - flex-wrap: nowrap; - width: auto; - - > * { - margin-inline-end: rem(4px); - } - - &:last-child { - margin-inline-end: 0; - } - } - } - - %igx-grid__pivot-filter-toggle { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - position: relative; - - > igx-badge { - position: absolute; - top: rem(-4px); - inset-inline-start: 60%; - width: rem(18px); - min-width: rem(18px); - height: rem(18px); - font-size: rem(10px); - pointer-events: none; - user-select: none; - } - } - - %igx-grid__pivot-empty-chip-area { - @if $variant != 'indigo' { - line-height: normal; - font-size: rem(14px); - } @else { - @include type-style('body-2'); - - @if $theme-variant == 'light' { - color: color($color: 'gray', $variant: 600); - } @else { - color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); - } - } - - margin-inline-end: 0 !important; - } - - %igx-grid__tr-pivot--row-area { - height: auto !important; - align-items: flex-end; - padding-bottom: pad-block( - map.get($pivot-row-aria-padding, 'compact'), - map.get($pivot-row-aria-padding, 'cosy'), - map.get($pivot-row-aria-padding, 'comfortable') - ); - border-inline-start: 0; - border-bottom: 0; - } - - %igx-grid__tr-pivot--small-row-area { - height: var(--header-size); - align-items: flex-end; - - border-inline-start: 0; - border-inline-end: 0; - border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - - %igx-grid__tr-pivot--filter-container { - display: flex; - flex-direction: column; - } - - %igx-grid__tr-pivot--chip_drop_indicator { - width: rem(2px); - background: var-get($theme, 'resize-line-color'); - visibility: hidden; - } - - %igx-grid__tr-pivot--drop-row-area { - flex-grow: 1; - } - - %igx-grid__tr-pivot--filter { - height: var(--header-size); - - border-inline-start: 0; - border-inline-end: 0; - border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - - %igx-grid-thead__wrapper--pivot { - border-bottom: 0; - } - - %igx-grid__tr-pivot-group { - flex: 1; - } - - %igx-grid__tr-pivot-toggle-icons { - display: inline-flex !important; - } - - %igx-grid__tr-pivot--columnDimensionLeaf { - box-shadow: none; - - igx-grid-header { - border: none; - } - } - - %igx-grid__tr-pivot--columnMultiRowSpan { - igx-grid-header { - > * { - visibility: hidden; - } - } - } - - %igx-grid__tr-header-row { - igx-pivot-row-dimension-header-group { - igx-pivot-row-dimension-header { - align-items: center; - } - - @if $variant == 'indigo' { - igx-icon { - opacity: if($theme-variant == 'light', .75, .85); - - &:hover { - opacity: 1; - cursor: pointer; - } - } - } - } - - igx-pivot-row-header-group { - @if $variant != 'indigo' { - padding-inline-start: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline-start: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - igx-pivot-row-dimension-header { - align-items: center; - - .igx-grid-th__icons { - @if $variant != 'indigo' { - padding-inline-end: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - align-self: center; - } - } - - &:last-of-type { - igx-pivot-row-dimension-header { - border-inline-end: 0; - } - } - } - } - - .igx-pivot-grid-row-filler__wrapper { - .igx-grid-thead__wrapper { - height: 100%; - border-bottom: initial; - - .igx-grid-th { - height: 100%; - } - } - } - - %igx-grid__tbody-pivot-mrl-dimension { - .igx-grid-th { - border-bottom: none; - } - } - - // Pivot grid END + //@include css-vars($theme); + // @include scale-in-ver-center(); + // + // $variant: map.get($theme, '_meta', 'theme'); + // $theme-variant: map.get($theme, '_meta', 'variant'); + // $bootstrap-theme: $variant == 'bootstrap'; + // $not-bootstrap-theme: $variant != 'bootstrap'; + // + // $cbx-size: map.get(( + // 'material': rem(20px), + // 'fluent': rem(20px), + // 'bootstrap': rem(14px), + // 'indigo': rem(20px), + // ), $variant); + // $cbx-bs-size: rem(14px); + // + // $grid-shadow: var-get($theme, 'grid-elevation'); + // + // $grid-caption-fs: rem(20px); + // $grid-caption-lh: rem(32px); + // $grid-caption-padding: rem(16px) rem(24px); + // + // $grid-head-fs: rem(12px); + // $grid-head-fw: 600; + // $transition: all 120ms $ease-in-out-cubic; + // + // // Cell + // $grid-cell-align-num: end; + // $grid-cell-fs: rem(13px); + // $grid-cell-lh: rem(16px); + // $grid-cell-pinned-style: rem(1px) solid; + // $grid-cell-pinned-border-color: color($color: 'gray', $variant: 300); + // + // $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // + // $cell-pin: ( + // style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'), + // color: var-get($theme, 'pinned-border-color') + // ); + // + // $padding-comfortable: rem(24px); + // $padding-cosy: rem(16px); + // $padding-compact: rem(12px); + // + // $grid-header-padding-inline: ( + // comfortable: $padding-comfortable, + // cosy: $padding-cosy, + // compact: $padding-compact + // ); + // + // $pivot-row-aria-padding: ( + // comfortable: $padding-comfortable, + // cosy: $padding-cosy, + // compact: $padding-compact + // ); + // + // $grid-cbx-padding: ( + // comfortable: $padding-comfortable, + // cosy: $padding-cosy, + // compact: $padding-compact + // ); + // + // $cbx-padding: map.get($grid-cbx-padding, 'comfortable'); + // $cbx-padding-cosy: map.get($grid-cbx-padding, 'cosy'); + // $cbx-padding-compact: map.get($grid-cbx-padding, 'compact'); + // + // $grid-header-height: ( + // comfortable: if($variant == 'indigo', rem(48px), rem(50px)), + // cosy: if($variant == 'indigo', rem(40px), rem(40px)), + // compact: if($variant == 'indigo', rem(32px), rem(32px)) + // ); + // + // $drop-area-height: ( + // comfortable: rem(32px), + // cosy: rem(24px), + // compact: rem(24px) + // ); + // + // $cell-padding-comfortable: rem(24px); + // $cell-padding-cosy: rem(16px); + // $cell-padding-compact: rem(12px); + // + // $grid-cell-padding-inline: ( + // comfortable: $cell-padding-comfortable, + // cosy: $cell-padding-cosy, + // compact: $cell-padding-compact + // ); + // + // $hierarchical-grid-indent: ( + // comfortable: rem(24px), + // cosy: rem(16px), + // compact: rem(12px) + // ); + // + // $hierarchical-action-icon: if($variant == 'indigo', rem(16px), rem(24px)); + // + // $hierarchical-indent: ( + // comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}), + // cosy: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon}), + // compact: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon}) + // ); + // + // $hierarchical-indent-scroll: ( + // comfortable: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px), + // cosy: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px), + // compact: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px) + // ); + // + // $grouparea-padding-inline: ( + // comfortable: rem(24px), + // cosy: rem(16px), + // compact: rem(12px) + // ); + // + // $grouparea-min-height: ( + // comfortable: if($variant == 'indigo', rem(56px), rem(57px)), + // cosy: if($variant == 'indigo', rem(48px), rem(49px)), + // compact: if($variant == 'indigo', rem(40px), rem(41px)) + // ); + // + // $grid-grouping-indicator-padding: ( + // comfortable: rem(24px), + // cosy: rem(16px), + // compact: rem(12px) + // ); + // + // $indicator-icon-width: map.get(( + // 'material': rem(24px), + // 'fluent': rem(24px), + // 'bootstrap': rem(24px), + // 'indigo': rem(16px), + // ), $variant); + // + // $drag-icon-size: rem(24px); + // + // $grid-header-weight: map.get(( + // 'material': 600, + // 'fluent': 800, + // 'bootstrap': 700, + // 'indigo': 600, + // ), $variant); + // + // $editing-outline-width: rem(2px); + // + // $filtering-row-height: #{sizable( + // map.get($grid-header-height, 'compact'), + // map.get($grid-header-height, 'cosy'), + // map.get($grid-header-height, 'comfortable') + // )}; + // + // %cell-input-overrides { + // // Have a more stable visual editing experience + // > igx-input-group, + // igx-combo, + // igx-simple-combo, + // igx-select, + // igx-date-picker, + // igx-time-picker { + // position: relative; + // height: auto; + // width: 100% !important; + // overflow: hidden; + // } + // + // igx-input-group { + // background: var-get($theme, 'cell-editing-background'); + // + // input { + // height: 100%; + // color: var-get($theme, 'cell-editing-foreground'); + // } + // + // input:focus { + // color: var-get($theme, 'cell-editing-focus-foreground'); + // } + // } + // + // igx-select, + // igx-combo, + // igx-simple-combo, + // igx-time-picker, + // igx-date-picker { + // igx-input-group { + // height: 100%; + // } + // } + // + // .igx-input-group__bundle { + // background: transparent !important; + // height: 100% !important; + // min-height: 100% !important; + // border: none !important; + // + // .igx-input-group__filler, + // .igx-input-group__notch { + // border: none !important; + // } + // + // &::before { + // content: none !important; + // } + // + // &::after { + // display: none; + // } + // } + // + // .igx-input-group--indigo .igx-input-group__bundle:hover, + // .igx-input-group--indigo .igx-input-group__bundle:focus { + // background: transparent; + // } + // + // .igx-input-group__bundle-main, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end { + // height: auto; + // border: none !important; + // border-radius: 0 !important; + // } + // + // .igx-input-group__bundle-main { + // padding: 0; + // } + // + // .igx-input-group__line { + // display: none; + // } + // + // igx-prefix, + // igx-suffix { + // background: transparent !important; + // border-radius: 0 !important; + // padding-top: 0 !important; + // padding-bottom: 0 !important; + // border: none !important; + // padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; + // } + // + // .igx-input-group--indigo { + // padding-inline: sizable(rem(6px), rem(8px), rem(12px)) !important; + // + // igx-prefix { + // padding-inline-start: 0 !important; + // } + // + // igx-suffix { + // padding-inline-end: 0 !important; + // } + // } + // + // .igx-input-group__input { + // padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; + // } + // + // igx-date-range-picker { + // height: 100%; + // } + // + // igx-time-picker [igxLabel] { + // display: none; + // } + // + // input { + // margin: 0 auto; + // max-width: 100%; + // } + // + // %form-group-input { + // // ignore global typography + // font-size: $grid-cell-fs !important; + // line-height: $grid-cell-lh !important; + // } + // + // .igx-input-group__input, + // .igx-input-group__file-input, + // .igx-input-group__textarea { + // box-shadow: none !important; + // border: none !important; + // } + // + // .igx-input-group--disabled, + // .igx-input-group--disabled igx-prefix, + // .igx-input-group--disabled igx-suffix { + // color: var-get($theme, 'cell-disabled-color'); + // } + // } + // + // @if $variant != 'indigo' { + // %filtering-row-input-overrides { + // igx-input-group { + // width: 100%; + // max-width: rem(200px); + // min-width: rem(140px); + // + // @if $variant != 'fluent' { + // border: rem(1px) solid color($color: 'gray', $variant: 300); + // } + // + // --size: calc(#{$filtering-row-height} - #{rem(8px)}); + // + // .igx-input-group__bundle, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end, + // igx-prefix, + // igx-suffix { + // background: transparent; + // border-radius: 0; + // + // /* stylelint-disable-next-line */ + // &:hover { + // background: transparent; + // } + // } + // + // igx-prefix, + // igx-suffix { + // height: 100% !important; + // padding: 0 sizable(rem(4px), rem(6px), rem(8px)); + // } + // + // .igx-input-group__input { + // font-size: sizable(rem(12px), rem(14px), rem(16px)); + // padding-inline-start: 0; + // padding-block: 0; + // height: 100%; + // } + // + // .igx-input-group__bundle, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end, + // .igx-input-group__input { + // border: 0; + // + // /* stylelint-disable-next-line */ + // &:hover { + // border: 0; + // box-shadow: none; + // } + // } + // + // .igx-input-group__bundle::after { + // display: none; + // } + // + // .igx-input-group__bundle-main { + // padding-inline-start: 0; + // } + // + // color: var-get($theme, 'filtering-row-text-color'); + // + // &:hover{ + // color: var-get($theme, 'filtering-row-text-color'); + // border-color: color($color: 'primary', $variant: 500); + // } + // } + // + // .igx-input-group--focused { + // @if $variant != 'fluent' { + // border-color: color($color: 'primary', $variant: 500); + // border-width: rem(1px); + // } + // + // color: var-get($theme, 'filtering-row-text-color'); + // + // .igx-input-group__bundle, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end, + // .igx-input-group__input { + // border: 0 !important; + // + // @if $variant != 'fluent' { + // box-shadow: none !important; + // } + // } + // + // .igx-input-group__bundle-main, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end { + // margin: 0 !important; + // } + // + // .igx-input-group__bundle, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end, + // igx-prefix, + // igx-suffix { + // background: transparent !important; + // border-radius: 0; + // } + // } + // + // .igx-input-group__line { + // display: none; + // } + // + // igx-prefix:focus { + // color: color(map.get($theme, 'palette'), 'secondary'); + // } + // + // igx-suffix { + // igx-icon { + // outline-style: none; + // + // &:focus { + // color: color($color: 'secondary'); + // } + // + // + igx-icon { + // margin-inline-start: rem(4px); + // } + // } + // } + // } + // } + // + // igx-grid, + // igx-hierarchical-grid, + // igx-pivot-grid, + // igx-tree-grid { + // @if $variant == 'material' { + // @if $theme-variant == 'light' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 300)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + // } + // @if $theme-variant == 'dark' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + // } + // } + // + // @if $variant == 'fluent' { + // @if $theme-variant == 'dark' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + // } + // } + // + // @if $variant == 'bootstrap' { + // @if $theme-variant == 'dark' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + // } + // } + // + // @if $variant == 'indigo' { + // @if $theme-variant == 'light' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + // } + // @if $theme-variant == 'dark' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + // } + // } + // } + // + // %disable-focus-styles { + // outline: 0; + // } + // + // %grid-host { + // @include sizable(); + // + // --component-size: var(--ig-size, var(--ig-size-large)); + // --grid-size: var(--component-size); + // } + // + // %grid-display { + // --header-size: #{sizable( + // map.get($grid-header-height, 'compact'), + // map.get($grid-header-height, 'cosy'), + // map.get($grid-header-height, 'comfortable') + // )}; + // + // --grouparea-size: #{sizable( + // map.get($grouparea-min-height, 'compact'), + // map.get($grouparea-min-height, 'cosy'), + // map.get($grouparea-min-height, 'comfortable') + // )}; + // + // --igx-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))}; + // + // position: relative; + // display: grid; + // grid-template-rows: auto auto auto 1fr auto auto; + // grid-template-columns: 100%; + // overflow: hidden; + // box-shadow: $grid-shadow; + // + // @if $variant == 'fluent' { + // box-shadow: 0 0 0 rem(1px) var-get($theme, 'grid-border-color'); + // } + // + // outline-style: none; + // z-index: 1; + // + // %cbx-display { + // min-width: $cbx-size; + // + // @if $variant == 'material' { + // %cbx-composite-wrapper { + // padding: 0; + // } + // + // %cbx-label-pos--after { + // margin-inline-start: rem(12px); + // } + // + // %cbx-label-pos--before { + // margin-inline-end: rem(12px); + // } + // + // %cbx-label-pos--before, + // %cbx-label-pos--after { + // &:empty { + // margin: 0; + // } + // } + // } + // } + // } + // + // %grid-caption { + // display: flex; + // align-items: center; + // font-size: $grid-caption-fs; + // line-height: $grid-caption-lh; + // padding: $grid-caption-padding; + // grid-row: 1; + // } + // + // %grid-thead, + // %grid-tfoot { + // position: relative; + // display: flex; + // background: var-get($theme, 'header-background'); + // color: var-get($theme, 'header-text-color'); + // overflow: hidden; + // outline-style: none; + // + // %grid-row { + // position: relative; + // background: inherit; + // color: inherit; + // z-index: 2; + // + // &:hover { + // background: inherit; + // color: inherit; + // } + // } + // + // > [aria-activedescendant] { + // outline-style: none; + // } + // } + // + // %grid-thead { + // border-bottom: $grid-header-border; + // + // @if $bootstrap-theme { + // border-bottom-width: rem(2px); + // } + // + // z-index: 2; + // + // %grid__cbx-selection--push { + // align-items: flex-start; + // padding-block-start: pad-block( + // math.div(map.get($grid-header-height, 'compact') - rem(20px), 2), + // math.div(map.get($grid-header-height, 'cosy') - rem(20px), 2), + // math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2) + // ); + // } + // + // %grid-row { + // border-bottom: none; + // } + // } + // + // %grid-thead-container { + // grid-row: 3; + // display: flex; + // overflow: hidden; + // + // %igx-grid__header-indentation { + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // + // @if $variant == 'indigo' { + // %igx-grid__group-expand-btn { + // color: var-get($theme, 'expand-icon-color'); + // } + // + // %igx-grid__group-expand-btn:hover{ + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // + // } + // + // %igx-grid__drag-indicator { + // cursor: default; + // } + // + // %grid-row--mrl { + // %igx-grid__hierarchical-expander--header, + // %igx-grid__hierarchical-expander, + // %igx-grid__header-indentation, + // %igx-grid__row-indentation, + // %grid__cbx-selection { + // border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // } + // + // &:focus-visible { + // outline-color: transparent; + // } + // } + // + // %grid-thead-title { + // flex-basis: auto !important; + // align-items: center !important; + // border-bottom: $grid-header-border; + // height: var(--header-size); + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-cell-padding-inline, 'compact'), + // map.get($grid-cell-padding-inline, 'cosy'), + // map.get($grid-cell-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // + // igx-icon { + // opacity: if($theme-variant == 'light', .75, .85); + // + // &:hover { + // opacity: 1; + // cursor: pointer; + // } + // } + // } + // + // padding-block: 0; + // } + // + // %grid-thead-title--pinned { + // border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // } + // + // %grid-thead-group { + // display: flex; + // flex-flow: row nowrap; + // } + // + // /* We set those with position relative + // so that the drop indicators be scoped + // to their respective group. The item + // being the topmost element, while the + // subgroup encapsulates children of each + // thead item and group. + // */ + // %grid-thead-item { + // display: flex; + // flex-flow: column nowrap; + // + // %grid-thead-group { + // flex: 1 1 auto; + // } + // + // %grid-cell-header { + // flex: 1 1 auto; + // } + // + // %grid-thead-title { + // flex: 0 0 auto; + // } + // } + // + // %grid-thead-item, + // %grid-thead-subgroup { + // position: relative; + // } + // + // %grid-tfoot { + // grid-row: 5; + // border-top: $grid-header-border; + // z-index: 10001; + // } + // + // %grid-footer { + // grid-row: 7; + // } + // + // %grid-display-container-thead { + // width: 100%; + // overflow: visible; + // } + // + // %grid-display-container-tr { + // width: 100%; + // overflow: visible; + // flex: 1; + // // needed to override the min-width of the column headers + // min-width: 0; + // } + // + // %grid-mrl-block { + // display: grid; + // background: inherit; + // position: relative; + // + // %grid-thead-item { + // display: flex; + // } + // + // %grid-cell-header { + // align-items: center; + // flex-grow: 1; + // border-bottom: $grid-header-border; + // } + // + // %grid-cell-display { + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // border-bottom: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // } + // + // %grid-row--mrl { + // &%grid-row { + // border-bottom-color: transparent; + // + // @if $variant == 'indigo' { + // %grid-cell-display { + // border-inline-end: rem(1px) solid var-get($theme, 'row-border-color'); + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // } + // } + // } + // + // %grid__cbx-selection, + // %igx-grid__hierarchical-expander, + // %igx-grid__row-indentation, + // %igx-grid__drag-indicator { + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // } + // } + // + // %grid-tbody { + // position: relative; + // background: var-get($theme, 'content-background'); + // color: var-get($theme, 'content-text-color'); + // overflow: hidden; + // z-index: 1; + // outline-style: none; + // } + // + // %grid-tbody-container { + // position: relative; + // display: flex; + // grid-row: 4; + // overflow: hidden; + // } + // + // %grid-tbody-message { + // display: flex; + // justify-content: center; + // align-items: center; + // height: 100%; + // color: var-get($theme, 'content-text-color'); + // flex-direction: column; + // padding: rem(24px); + // } + // + // %igx-grid__loading { + // display: flex; + // align-items: center; + // justify-content: center; + // height: 100%; + // min-height: rem(100px); + // + // > %circular-display { + // width: rem(50); + // height: rem(50); + // } + // } + // + // %grid-scroll { + // grid-row: 6; + // display: flex; + // flex-flow: row nowrap; + // width: 100%; + // background: var-get($theme, 'header-background'); + // z-index: 10001; + // } + // + // %grid-thead-thumb { + // background: var-get($theme, 'header-background'); + // border-inline-start: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // + // %grid-tfoot-thumb { + // position: absolute; + // top: 0; + // inset-inline-end: 0; + // background: var-get($theme, 'header-background'); + // border-inline-start: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // + // %grid-tbody-scrollbar { + // background: var-get($theme, 'content-background'); + // border-inline-start: rem(1px) solid var-get($theme, 'row-border-color'); + // position: relative; + // } + // + // %grid-tbody-scrollbar-start { + // background: var-get($theme, 'header-background'); + // } + // + // %grid-tbody-scrollbar-main { + // position: relative; + // } + // + // %grid-tbody-scrollbar-end { + // background: var-get($theme, 'header-background'); + // } + // + // %grid-scroll-start { + // background: var-get($theme, 'header-background'); + // } + // + // %grid-scroll-main { + // igx-display-container { + // height: 0; + // } + // + // igx-horizontal-virtual-helper { + // height: 100%; + // } + // } + // + // %grid-row { + // display: flex; + // background: var-get($theme, 'content-background'); + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // outline-style: none; + // position: relative; + // //background-clip: content-box !important; + // + // &:hover { + // background: var-get($theme, 'row-hover-background'); + // color: var-get($theme, 'row-hover-text-color'); + // + // %grid-cell--column-selected { + // color: var-get($theme, 'row-selected-hover-text-color'); + // background: var-get($theme, 'row-selected-hover-background'); + // } + // + // %grid-cell--cross-selected { + // color: var-get($theme, 'cell-selected-within-text-color'); + // background: var-get($theme, 'cell-selected-within-background'); + // } + // } + // + // &%igx-grid__tr--ghost { + // background: var-get($theme, 'row-ghost-background'); + // color: var-get($theme, 'row-drag-color'); + // z-index: 10002; + // + // @include css-vars(( + // name: 'igx-grid-row', + // row-ghost-background: map.get($theme, 'row-ghost-background'), + // row-drag-color: map.get($theme, 'row-drag-color') + // )); + // } + // } + // + // %igx-grid__drag-indicator { + // display: flex; + // align-items: center; + // justify-content: center; + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-cell-padding-inline, 'compact'), + // map.get($grid-cell-padding-inline, 'cosy'), + // map.get($grid-cell-padding-inline, 'comfortable') + // ); + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(50px) + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(48px) + // ); + // + // igx-icon { + // opacity: if($theme-variant == 'light', .75, .85); + // } + // + // &:hover { + // igx-icon { + // opacity: 1; + // } + // } + // } + // + // padding-block: 0; + // flex: 0 0 auto; + // background: inherit; + // z-index: 4; + // cursor: move; + // border-inline-end: rem(1px) solid transparent; + // //background-clip: border-box; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // } + // + // %igx-grid__drag-indicator--header { + // border-inline-end: $grid-header-border; + // } + // + // %igx-grid__drag-indicator--off { + // color: var-get($theme, 'row-drag-color'); + // } + // + // %igx-grid__tr--drag { + // opacity: .5; + // } + // + // %grid-row--odd { + // background: var-get($theme, 'row-odd-background'); + // color: var-get($theme, 'row-odd-text-color'); + // } + // + // %grid-row--even { + // background: var-get($theme, 'row-even-background'); + // color: var-get($theme, 'row-even-text-color'); + // } + // + // %igx-grid__tr--expanded { + // border-bottom: none; + // } + // + // %igx-grid__tr--pinned { + // position: relative; + // background: inherit; + // z-index: 10000; + // + // %igx-grid__hierarchical-expander--empty { + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // } + // + // %igx-grid__tr--pinned-top { + // border-bottom: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // } + // + // %igx-grid__tr--pinned-bottom { + // border-top: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // position: absolute; + // bottom: 0; + // } + // + // %igx-grid__td--centered { + // justify-content: center; + // } + // + // %igx-grid__td--bool { + // display: flex; + // flex-grow: 1; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 1)}; + // } + // + // %igx-icon--error { + // @if $variant == 'indigo' or $theme-variant == 'dark' { + // color: color($color: 'gray', $variant: 500); + // } @else { + // color: color($color: 'gray', $variant: 600); + // } + // } + // } + // + // %igx-grid__td--bool-true { + // %igx-icon--success { + // color: color($color: 'gray', $variant: 700); + // } + // } + // + // %igx-grid__tr--edit { + // border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color'); + // position: relative; + // + // &::after { + // content: ''; + // position: absolute; + // height: rem(1); + // width: 100%; + // top: rem(-1); + // inset-inline-start: 0; + // background: var-get($theme, 'edit-mode-color'); + // } + // + // &%grid-row { + // border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color'); + // } + // + // %igx-grid__td--editing { + // border: none; + // + // %form-group-bundle--focus { + // caret-color: var-get($theme, 'edit-mode-color') !important; + // } + // + // %form-group-border { + // background: var-get($theme, 'edit-mode-color') !important; + // } + // } + // + // [aria-readonly='true'] { + // color: var-get($theme, 'cell-disabled-color'); + // + // igx-icon { + // color: var-get($theme, 'cell-disabled-color'); + // } + // } + // } + // + // %igx-grid__tr--inner { + // display: flex; + // background: inherit; + // } + // + // %igx-grid__tr--header { + // display: flex; + // align-items: center; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // } + // + // %igx-grid__tr--add-animate { + // @include animation(scale-in-ver-center .2s $ease-in-out-quad); + // } + // + // %grid-row--edit-mrl { + // &:first-of-type::after { + // top: 0; + // z-index: 5; + // } + // } + // + // %igx-grid__tr--edited { + // &::before { + // content: ''; + // position: absolute; + // width: if($variant == 'indigo', rem(4px), rem(2px)); + // height: 100%; + // z-index: 10000; + // background: var-get($theme, 'edited-row-indicator'); + // } + // } + // + // %grid-row--group { + // position: relative; + // background: var-get($theme, 'header-background') !important; + // } + // + // %igx-grid-row--filtered { + // %grid-cell-text { + // color: var-get($theme, 'tree-filtered-text-color'); + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'tree-filtered-text-color'); + // + // &:hover { + // color: var-get($theme, 'tree-filtered-text-color'); + // } + // } + // + // %grid-cell--selected { + // %grid-cell-text { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // + // &:hover { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // } + // } + // } + // } + // + // %grid-row--selected--filtered { + // %grid-cell-text { + // color: var-get($theme, 'tree-selected-filtered-row-text-color'); + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'tree-selected-filtered-row-text-color'); + // + // &:hover { + // color: var-get($theme, 'tree-selected-filtered-row-text-color'); + // } + // } + // + // %grid-cell--selected { + // %grid-cell-text { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // + // &:hover { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // } + // } + // } + // } + // + // %igx-grid__tree-grouping-indicator { + // display: flex; + // align-items: center; + // justify-content: center; + // user-select: none; + // outline-style: none; + // margin-inline-end: if($variant == 'indigo', rem(4px), rem(8)); + // cursor: pointer; + // + // color: var-get($theme, 'expand-icon-color'); + // + // &:hover { + // color: var-get($theme, 'expand-icon-hover-color') + // } + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // } + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)};; + // } + // } + // + // %igx-grid__tree-loading-indicator { + // width: rem(24px, 16px); + // height: rem(24px, 16px); + // margin-inline-end: rem(8px, 16px); + // + // %circular-outer { + // stroke: var-get($theme, 'expand-icon-color'); + // } + // + // > %circular-display { + // width: rem(24); + // height: rem(24); + // } + // } + // + // %grid-cell-display { + // position: relative; + // display: flex; + // flex: 1 1 0%; + // align-items: center; + // outline-style: none; + // + // @extend %cell-input-overrides; + // + // igx-input-group { + // background: transparent; + // } + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-cell-padding-inline, 'compact'), + // map.get($grid-cell-padding-inline, 'cosy'), + // map.get($grid-cell-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // padding-block: 0; + // color: inherit; + // text-align: start; + // //background-clip: border-box !important; + // + // @if $variant != 'indigo' { + // font-size: $grid-cell-fs; + // line-height: $grid-cell-lh; + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(50px) + // ); + // } @else { + // @include type-style('detail-1', false); + // + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(48px) + // ); + // } + // } + // + // // This is no longer being extended and is left + // // here for reference purposes only. It seems setting + // // overflow: hidden on the cell prevents drag and selection + // // of the cell. + // // See github issue #9821 + // %igx-grid__td--tree-cell { + // overflow: hidden; + // } + // + // %grid-cell-text { + // @include ellipsis(); + // + // pointer-events: none; + // } + // + // %grid-cell--fixed-width { + // flex-grow: 0; + // outline-style: none; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // } + // + // %grid-cell--active { + // box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'cell-active-border-color'); + // + // > %igx-grid__filtering-cell, + // > %grid-cell-header { + // border-inline-end-color: var-get($theme, 'cell-active-border-color'); + // border-bottom-color: var-get($theme, 'cell-active-border-color'); + // } + // } + // + // %grid-cell--invalid { + // padding-inline-end: rem(4px) !important; + // + // > igx-icon { + // color: color($color: 'error'); + // width: var(--igx-icon-size, rem(18px)); + // height: var(--igx-icon-size, rem(18px)); + // font-size: var(--igx-icon-size, rem(18px)); + // } + // + // %grid-cell-text { + // width: 100%; + // } + // + // .igx-input-group__bundle { + // &:focus-within { + // &::after { + // border: none !important; + // } + // } + // } + // } + // + // %grid-cell--valid { + // box-shadow: inset 0 0 0 rem(2px) color($color: 'success') !important; + // } + // + // %grid-cell--pinned-selected, + // %grid-cell--selected { + // color: var-get($theme, 'cell-selected-text-color'); + // background: var-get($theme, 'cell-selected-background'); + // // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981 + // // border-bottom: 0; + // + // %igx-grid__tree-grouping-indicator { + // &:hover { + // color: var-get($theme, 'cell-selected-text-color'); + // } + // } + // } + // + // %grid-row--selected { + // color: var-get($theme, 'row-selected-text-color'); + // background: var-get($theme, 'row-selected-background'); + // + // %grid-cell--selected, + // %grid-cell--pinned-selected { + // color: var-get($theme, 'cell-selected-within-text-color'); + // background: var-get($theme, 'cell-selected-within-background'); + // } + // + // &:hover { + // background: var-get($theme, 'row-selected-hover-background'); + // color: var-get($theme, 'row-selected-hover-text-color'); + // + // %grid-cell--column-selected { + // color: var-get($theme, 'row-selected-hover-text-color'); + // background: var-get($theme, 'row-selected-hover-background'); + // } + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'row-selected-text-color'); + // + // &:hover { + // color: var-get($theme, 'row-selected-text-color'); + // } + // } + // } + // + // %grid-cell--column-selected { + // color: var-get($theme, 'row-selected-text-color'); + // background: var-get($theme, 'row-selected-background'); + // } + // + // %grid-cell--cross-selected { + // color: var-get($theme, 'cell-selected-within-text-color'); + // background: var-get($theme, 'cell-selected-within-background'); + // } + // + // %igx-grid__td--new { + // color: var-get($theme, 'cell-new-color'); + // } + // + // %igx-grid__td--edited { + // %grid-cell-text { + // font-style: italic; + // color: var-get($theme, 'cell-edited-value-color'); + // padding: 0 rem(1px); + // } + // } + // + // %igx-grid__tr--merged { + // border-block-end: 0; + // } + // + // %igx-grid__tr--merged-top { + // position: absolute; + // width: 100%; + // } + // + // %igx-grid__td--merged { + // z-index: 1; + // grid-row: 1 / -1; + // } + // + // %igx-grid__td--merged-selected { + // color: var-get($theme, 'row-selected-text-color'); + // background: var-get($theme, 'row-selected-background') !important; + // } + // + // %igx-grid__td--merged-hovered { + // background: var-get($theme, 'row-hover-background') !important; + // color: var-get($theme, 'row-hover-text-color'); + // } + // + // %igx-grid__td--merged-selected-hovered { + // background: var-get($theme, 'row-selected-hover-background') !important; + // color: var-get($theme, 'row-selected-hover-text-color'); + // } + // + // %igx-grid__tr--deleted { + // %grid-cell-text { + // font-style: italic; + // color: color(map.get($theme, 'palette'), 'error'); + // text-decoration: line-through; + // } + // } + // + // %igx-grid__tr--disabled { + // %grid-cell-text { + // color: var-get($theme, 'cell-disabled-color'); + // } + // } + // + // %igx-grid__td--editing { + // background: var-get($theme, 'cell-editing-background') !important; + // box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color'); + // padding-inline: rem(4px); + // + // &.igx-grid__td--invalid { + // box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important; + // } + // + // &%grid-cell-number { + // justify-content: flex-start !important; + // } + // } + // + // %grid-cell--pinned { + // position: relative; + // background: inherit; + // z-index: 9999; + // } + // + // %grid-cell--pinned--column-selected { + // color: var-get($theme, 'row-selected-text-color'); + // background: var-get($theme, 'row-selected-background'); + // + // &:hover { + // background: var-get($theme, 'row-selected-hover-background'); + // color: var-get($theme, 'row-selected-text-color'); + // } + // } + // + // %grid-cell--pinned-last { + // border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // + // %igx-grid__filtering-cell, + // %grid-cell-header { + // border-inline-end: none; + // } + // + // &%grid-cell--editing { + // border-inline-end: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; + // } + // } + // + // %grid-cell--pinned-first { + // border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // + // &%grid-cell--editing { + // border-inline-start: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; + // } + // } + // + // %grid-cell--row-pinned-first { + // overflow: hidden; + // } + // + // %grid-cell--pinned-chip { + // margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px)); + // } + // + // %grid-cell-header { + // flex-flow: row nowrap; + // justify-content: space-between; + // align-items: flex-end; + // + // @if $variant != 'indigo' { + // font-size: $grid-head-fs; + // font-weight: $grid-head-fw; + // + // padding-inline: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // min-width: 0; + // padding-block: 0; + // border-inline-end: $grid-header-border; + // min-height: var(--header-size); + // outline-style: none; + // overflow: hidden; + // transition: color 250ms ease-in-out; + // } + // + // %grid-cell-header--filtering { + // background: var-get($theme, 'filtering-header-background'); + // color: var-get($theme, 'filtering-header-text-color'); + // z-index: 3; + // } + // + // %grid-cell-header-title { + // @include ellipsis(); + // + // @if $variant != 'indigo' { + // font-weight: $grid-header-weight; + // } @else { + // @include type-style('detail-2', false); + // } + // + // min-width: 3ch; + // user-select: none; + // cursor: initial; + // flex-grow: 1; /* hey IE, the text should take most of the space */ + // // align-self: flex-end; /* commenting out for now on external request */ + // line-height: var(--header-size); + // transition: color 250ms ease-in-out; + // } + // + // %grid-cell-header-icons { + // display: inline-flex; + // align-items: center; + // justify-content: flex-end; + // user-select: none; + // min-width: rem(30px); /* sort-icon + filter icon width */ + // height: var(--header-size); + // align-self: flex-end; + // + // &:empty { + // min-width: 0; + // } + // + // .sort-icon { + // position: relative; + // display: flex; + // + // + // @if $variant != 'indigo' { + // igx-icon { + // --size: var(--igx-icon-size, #{rem(15px)}); + // } + // } + // + // &::after { + // content: attr(data-sortIndex); + // position: absolute; + // top: rem(-5px); + // inset-inline-end: rem(-1px); + // font-size: rem(10px); + // text-align: end; + // font-family: sans-serif; + // line-height: rem(10px); + // } + // } + // } + // + // %igx-grid-th__expander { + // display: flex; + // align-items: center; + // justify-content: center; + // margin-inline-end: rem(8px); + // cursor: pointer; + // + // igx-icon { + // @if $variant == 'indigo' { + // --component-size: 2; + // } + // + // color: var-get($theme, 'expand-icon-color'); + // } + // + // &:hover { + // igx-icon { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // } + // + // %igx-grid-th__group-title { + // @include ellipsis(); + // + // @if $variant == 'indigo' { + // @include type-style('detail-2', false); + // } + // } + // + // %igx-grid-th--collapsible { + // justify-content: normal; + // } + // + // %igx-grid-th--selectable { + // @if $variant != 'indigo' { + // opacity: if($theme-variant == 'light', .75, .85); + // + // &%grid__drag-ghost-image { + // opacity: 1; + // } + // } @else { + // opacity: 1; + // } + // + // .sort-icon { + // color: var-get($theme, 'header-selected-text-color'); + // + // ::after { + // background: var-get($theme, 'header-selected-background'); + // } + // } + // } + // + // // TODO, remove igx-banner__row extra div if possible + // @if $variant { + // %igx-banner__row { + // display: contents; + // } + // } + // + // %igx-grid-th--selected { + // .sort-icon::after { + // background: var-get($theme, 'header-selected-background'); + // } + // } + // + // %igx-grid-th--selectable, + // %igx-grid-th--selected { + // color: var-get($theme, 'header-selected-text-color'); + // background: var-get($theme, 'header-selected-background'); + // + // &%igx-grid-th--sorted { + // .sort-icon { + // color: var-get($theme, 'header-selected-text-color'); + // + // > igx-icon { + // color: inherit; + // } + // + // &:focus, + // &:hover { + // color: var-get($theme, 'header-selected-text-color'); + // + // > igx-icon { + // color: inherit; + // } + // } + // } + // } + // + // @if $variant == 'indigo' { + // %grid-excel-icon--filtered, + // %grid-excel-icon { + // color: var-get($theme, 'header-selected-text-color'); + // + // igx-icon { + // color: var-get($theme, 'header-selected-text-color'); + // } + // + // &:focus, + // &:hover { + // color: var-get($theme, 'header-selected-text-color'); + // + // igx-icon { + // color: var-get($theme, 'header-selected-text-color'); + // } + // } + // } + // } + // } + // + // %igx-grid-th--active { + // @extend %grid-cell--active; + // + // %igx-grid-th--selected, + // %igx-grid-th--selectable { + // @extend %grid-cell--active; + // } + // } + // + // %igx-grid-summary--active { + // @extend %grid-cell--active !optional; + // } + // + // %igx-grid-th--sortable { + // .sort-icon { + // cursor: pointer; + // opacity: if($variant == 'indigo', if($theme-variant == 'light', .75, .85), .7); + // + // &:hover { + // opacity: 1; + // } + // } + // } + // + // %igx-grid-th--sorted { + // .sort-icon { + // opacity: 1; + // color: var-get($theme, 'sorted-header-icon-color'); + // + // > igx-icon { + // color: inherit; + // } + // + // &:hover { + // color: var-get($theme, 'sortable-header-icon-hover-color'); + // + // > igx-icon { + // color: inherit; + // } + // } + // } + // } + // + // %igx-grid-th--filtrable { + // %grid-cell-header-title { + // @if $variant != 'indigo' { + // opacity: .7; + // } + // } + // } + // + // %igx-grid-th--filtrable-sortable { + // .sort-icon { + // cursor: pointer; + // opacity: if($variant == 'indigo', 1, .7); + // + // &:hover { + // opacity: 1; + // } + // } + // } + // + // %grid-excel-icon--filtered, + // %grid-excel-icon, + // .sort-icon { + // transition: all 250ms ease-in-out; + // } + // + // %grid-cell-number { + // text-align: $grid-cell-align-num; + // justify-content: flex-end; + // flex-grow: 1; + // + // %grid-cell-header-icons { + // justify-content: flex-start; + // order: -1; + // + // .sort-icon { + // order: 1; + // } + // } + // } + // + // %grid__cbx-selection { + // display: flex; + // justify-content: center; + // align-items: center; + // background: inherit; + // z-index: 4; + // //background-clip: border-box; + // } + // + // %cbx-padding { + // display: flex; + // align-items: center; + // justify-content: center; + // padding-inline: pad-inline($cbx-padding-compact, $cbx-padding-cosy, $cbx-padding); + // } + // + // %grid__resize-handle { + // position: absolute; + // width: rem(4px); + // top: 0; + // inset-inline-end: rem(-2px); + // height: 100%; + // z-index: 2; + // } + // + // %grid__resize-line { + // position: absolute; + // cursor: col-resize; + // width: rem(4px); + // background: var-get($theme, 'resize-line-color'); + // z-index: 2; + // + // &::before, + // &::after { + // position: absolute; + // content: ''; + // height: 100%; + // width: rem(96px); + // } + // + // &::before { + // inset-inline-end: 100%; + // } + // + // &::after { + // inset-inline-start: 100%; + // } + // } + // + // %grid-summaries { + // display: flex; + // overflow: hidden; + // outline-style: none; + // background-color: var-get($theme, 'summaries-patch-background'); + // } + // + // %grid-summaries--body { + // --summaries-patch-background: var(--ig-gray-100); + // + // border-bottom: rem(1px) dashed var-get($theme, 'row-border-color'); + // background-color: var-get($theme, 'summaries-patch-background'); + // + // &:last-of-type { + // border-bottom: none; + // } + // + // .igx-grid-summary { + // --background-color: inherit; + // --result-color: #{adaptive-contrast(var(--background-color))}; + // } + // } + // + // %grid-summaries-patch { + // position: relative; + // background: inherit; + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // z-index: 1; + // + // @if $variant == 'indigo' { + // border-top: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // } + // + // // Column moving + // %igx-grid-th__drop-indicator-left, + // %igx-grid-th__drop-indicator-right { + // position: absolute; + // width: rem(1px); + // height: 100%; + // top: 0; + // z-index: 1; + // } + // + // %igx-grid-th__drop-indicator-left { + // inset-inline-start: rem(-1px); + // } + // + // %igx-grid-th__drop-indicator-right { + // inset-inline-end: rem(-1px); + // } + // + // %igx-grid-th__drop-indicator--active { + // &%igx-grid-th__drop-indicator-left, + // &%igx-grid-th__drop-indicator-right { + // border-inline-end: rem(1px) solid var-get($theme, 'drop-indicator-color'); + // } + // + // &::after, + // &::before { + // position: absolute; + // content: ''; + // width: 0; + // height: 0; + // border-style: solid; + // inset-inline-start: rem(-3px); + // } + // + // &::before { + // bottom: 0; + // border-width: 0 rem(4px) rem(4px); + // border-color: transparent transparent var-get($theme, 'drop-indicator-color'); + // } + // + // &::after { + // top: 0; + // border-width: rem(4px) rem(4px) 0; + // border-color: var-get($theme, 'drop-indicator-color') transparent transparent; + // } + // } + // + // %grid__scroll-on-drag-left, + // %grid__scroll-on-drag-right { + // position: absolute; + // width: rem(15px); + // top: 0; + // height: 100%; + // z-index: 25; + // } + // + // %grid__scroll-on-drag-left { + // inset-inline-start: 0; + // } + // + // %grid__scroll-on-drag-right { + // inset-inline-end: 0; + // } + // + // %grid__scroll-on-drag-pinned { + // position: absolute; + // width: rem(15px); + // height: 100%; + // top: 0; + // z-index: 25; + // } + // + // %grid__drag-ghost-image { + // position: absolute; + // display: flex; + // align-items: center; + // background: var-get($theme, 'ghost-header-background'); + // color: var-get($theme, 'ghost-header-text-color'); + // min-width: rem(168px); + // max-width: rem(320px); + // height: var(--header-size); + // min-height: var(--header-size); + // top: rem(-99999px); + // inset-inline-start: rem(-99999px); + // border: none; + // box-shadow: var-get($theme, 'drag-elevation'); + // overflow: hidden; + // z-index: 20; + // + // %grid-cell-header-title { + // @include ellipsis(); + // flex: 1 0 0; + // text-align: if($variant == 'indigo', start, end); + // } + // + // %grid-cell-header-icons { + // display: none; + // } + // + // %grid-thead-title { + // border: none; + // } + // } + // + // %grid__drag-ghost-image-icon { + // color: var-get($theme, 'ghost-header-icon-color'); + // margin-inline-end: if($variant == 'indigo', rem(8px), rem(12px)); + // } + // + // %grid__drag-ghost-image-icon-group { + // color: var-get($theme, 'ghost-header-icon-color'); + // padding: $padding-comfortable; + // padding-inline-end: 0; + // margin-inline-end: rem(8); + // } + // + // %igx-grid__drag-col-header { + // background: var-get($theme, 'header-background'); + // + // %grid-cell-header { + // > * { + // opacity: .4; + // } + // } + // } + // + // // Group by section + // %igx-grid__group-row { + // background: var-get($theme, 'group-row-background'); + // display: flex; + // outline-style: none; + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // min-height: var(--header-size); + // + // %igx-grid__drag-indicator { + // cursor: default; + // flex-grow: 0; + // } + // + // %grid__cbx-selection { + // background: initial; + // } + // } + // + // %igx-grid__group-row--active { + // background: var-get($theme, 'group-row-selected-background'); + // @extend %grid-cell--active !optional; + // + // %igx-grid__grouping-indicator { + // color: var-get($theme, 'expand-icon-color'); + // } + // + // %igx-grid__drag-indicator { + // border: rem(1px) solid var-get($theme, 'cell-active-border-color'); + // border-inline-start-width: 0; + // border-inline-end-width: 0; + // box-shadow: inset rem(1px) 0 0 0 var-get($theme, 'cell-active-border-color'); + // } + // + // &:hover { + // background: var-get($theme, 'group-row-selected-background'); + // } + // } + // + // %igx-group-label { + // display: flex; + // align-items: center; + // justify-content: flex-start; + // line-height: rem(16px); + // gap: rem(4px); + // } + // + // %igx-group-label__icon { + // @at-root igx-icon#{&} { + // --component-size: #{if($variant == 'indigo', 2, 1)}; + // + // color: var-get($theme, 'group-label-icon'); + // user-select: none; + // } + // } + // + // %igx-group-label__column-name { + // @if $variant != 'indigo' { + // font-weight: 600; + // font-size: rem(12px); + // } @else { + // @include type-style('detail-2', false); + // } + // + // color: var-get($theme, 'group-label-column-name-text'); + // + // } + // + // + // %igx-group-label__count-badge { + // --background-color: #{var-get($theme, 'group-count-background')}; + // --text-color: #{var-get($theme, 'group-count-text-color')}; + // + // @if $variant == 'indigo' { + // --shadow: none; + // } + // + // > span { + // font-size: $grid-head-fs; + // } + // } + // + // + // %igx-group-label__text { + // @if $variant != 'indigo' { + // font-size: rem(13px); + // } @else { + // @include type-style('detail-1', false); + // } + // color: var-get($theme, 'group-label-text') + // } + // + // [dir='rtl'] { + // %igx-group-label { + // > * { + // margin-inline-start: rem(4px); + // + // &:last-child { + // margin-inline-start: 0; + // } + // } + // } + // } + // + // %igx-grid__group-content { + // display: flex; + // align-items: center; + // justify-content: flex-start; + // flex: 1 1 auto; + // @if $variant != 'indigo' { + // padding-inline-start: pad-inline( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // ); + // } @else { + // padding-inline-start: 0; + // } + // + // min-height: sizable( + // map.get($grid-header-height, 'compact'), + // map.get($grid-header-height, 'cosy'), + // map.get($grid-header-height, 'comfortable') + // ); + // + // &:focus { + // outline: transparent; + // } + // } + // + // %igx-grid__row-indentation { + // position: relative; + // display: flex; + // justify-content: center; + // align-items: center; + // padding-inline-start: pad-inline( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // ); + // padding-inline-end: pad-inline( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // ); + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // background: inherit; + // z-index: 1; + // //background-clip: border-box; + // + // &::after { + // content: ''; + // position: absolute; + // width: 100%; + // height: rem(1px); + // bottom: rem(-1px); + // inset-inline-start: 0; + // background: transparent; + // } + // + // %igx-icon-button-display { + // width: rem(28px); + // height: rem(28px); + // color: var-get($theme, 'expand-all-icon-color'); + // } + // + // &:focus, + // &:hover { + // %igx-icon-button-display { + // color: var-get($theme, 'expand-all-icon-hover-color'); + // } + // } + // } + // + // %igx-grid-grouparea { + // grid-row: 2; + // display: flex; + // align-items: center; + // justify-content: flex-start; + // flex-wrap: wrap; + // border-bottom: $grid-header-border; + // background: var-get($theme, 'grouparea-background'); + // color: var-get($theme, 'grouparea-color'); + // min-height: var(--grouparea-size); + // padding-inline: pad-inline( + // map.get($grouparea-padding-inline, 'compact'), + // map.get($grouparea-padding-inline, 'cosy'), + // map.get($grouparea-padding-inline, 'comfortable') + // ); + // padding-block: 0; + // z-index: 2; + // height: 100%; + // overflow: hidden; + // + // &:focus { + // outline-style: none; + // } + // + // %igx-chip { + // margin-block: pad-block(rem(4px), rem(8px), rem(8px)); + // } + // } + // + // %igx-grid-grouparea__connector { + // display: inline-flex; + // justify-content: center; + // align-items: center; + // margin: 0 rem(4px); + // + // igx-icon { + // width: var(--igx-icon-size, #{rem(16px)}); + // height: var(--igx-icon-size, #{rem(16px)}); + // font-size: var(--igx-icon-size, #{rem(16px)}); + // } + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // } + // } + // + // %igx-drop-area { + // display: flex; + // align-items: center; + // justify-content: flex-start; + // min-width: rem(80px); + // height: sizable( + // map.get($drop-area-height, 'compact'), + // map.get($drop-area-height, 'cosy'), + // map.get($drop-area-height, 'comfortable') + // ); + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-cell-padding-inline, 'compact'), + // map.get($grid-cell-padding-inline, 'cosy'), + // map.get($grid-cell-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // padding-block: 0; + // flex: 1 0 0%; + // background: var-get($theme, 'drop-area-background'); + // border-radius: var-get($theme, 'drop-area-border-radius'); + // + // %igx-drop-area__icon { + // color: var-get($theme, 'drop-area-icon-color'); + // width: rem(16px); + // height: rem(16px); + // font-size: rem(16px); + // margin-inline-end: rem(8px); + // } + // } + // + // %igx-drop-area--hover { + // background: var-get($theme, 'drop-area-on-drop-background'); + // } + // + // %igx-drop-area__text { + // @include ellipsis(); + // color: var-get($theme, 'drop-area-text-color'); + // font-size: rem(13px); + // } + // + // %igx-grid__grouping-indicator { + // position: relative; + // display: flex; + // user-select: none; + // justify-content: center; + // align-items: center; + // z-index: 1; + // cursor: pointer; + // padding-inline-end: if($variant == 'indigo', rem(16px), rem(12px)); + // margin-inline-start: sizable( + // #{map.get($grid-grouping-indicator-padding, 'compact')}, + // #{map.get($grid-grouping-indicator-padding, 'cosy')}, + // #{map.get($grid-grouping-indicator-padding, 'comfortable') + // }); + // min-height: var(--header-size); + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // + // color: var-get($theme, 'expand-icon-color'); + // } + // + // &:hover, + // &:focus { + // outline-style: none; + // + // igx-icon { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // } + // } + // + // %igx-grid__header-indentation { + // position: relative; + // padding-inline-end: sizable( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // ); + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // background: var-get($theme, 'header-background'); + // z-index: 4; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // } + // + // %igx-grid__group-expand-btn { + // position: absolute; + // cursor: pointer; + // user-select: none; + // inset-block-start: calc(50% - #{$indicator-icon-width} / 2); + // inset-inline-start: var(--indicator-inline-inset); + // + // &:hover { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // + // &%igx-grid__group-expand-btn--push { + // inset-block-start: sizable( + // math.div(map.get($grid-header-height, 'compact') - $indicator-icon-width, 2), + // math.div(map.get($grid-header-height, 'cosy') - $indicator-icon-width, 2), + // math.div(map.get($grid-header-height, 'comfortable') - $indicator-icon-width, 2) + // ); + // } + // } + // + // @for $i from 1 through 10 { + // $row-indentation-level: ( + // comfortable: calc(#{$i * map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width}), + // cosy: calc(#{$i * map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width}), + // compact: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width}) + // ); + // + // $level--comfortable: map.get($row-indentation-level, 'comfortable'); + // $level--cosy: map.get($row-indentation-level, 'cosy'); + // $level--compact: map.get($row-indentation-level, 'compact'); + // + // %igx-grid__row-indentation--level-#{$i} { + // --indicator-inline-inset: #{sizable( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // )}; + // padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable); + // } + // + // $indicator-padding--comfortable: #{$i * map.get($grid-grouping-indicator-padding, 'comfortable')}; + // $indicator-padding--cosy: #{$i * map.get($grid-grouping-indicator-padding, 'cosy')}; + // $indicator-padding--compact: #{$i * map.get($grid-grouping-indicator-padding, 'compact')}; + // + // %igx-grid__group-row--padding-level-#{$i} { + // %igx-grid__grouping-indicator { + // padding-inline-start: pad-inline($indicator-padding--compact, $indicator-padding--cosy, $indicator-padding--comfortable); + // } + // } + // } + // + // %igx-grid__outlet { + // --ig-size: var(--grid-size); + // + // z-index: 10002; + // position: fixed; + // } + // + // %igx-grid__loading-outlet { + // z-index: 10003; + // + // > %overlay-wrapper--modal { + // background: none; + // } + // + // %circular-display { + // width: rem(50); + // height: rem(50); + // } + // } + // + // %igx-grid__row-editing-outlet { + // z-index: 10000; + // position: absolute; + // + // %overlay-wrapper { + // /* Change wrapper position from 'fixed' to 'absolute' so that it is hidden when scrolled below the parent grid body content. */ + // position: absolute; + // } + // } + // + // %igx-grid__addrow-snackbar { + // position: absolute; + // z-index: 5; + // bottom: rem(24px); + // inset-inline-start: 50%; + // transform: translateX(-50%); + // } + // + // %igx-grid__filtering-cell { + // display: flex; + // align-items: center; + // border-inline-end: $grid-header-border; + // border-top: $grid-header-border; + // height: var(--header-size); + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // padding-block: 0; + // overflow: hidden; + // + // igx-chips-area { + // transition: transform .25s $ease-out-back; + // flex-wrap: nowrap; + // + // .igx-filtering-chips__connector { + // font-size: rem(12px); + // text-transform: uppercase; + // font-weight: 600; + // margin: 0 rem(8px); + // } + // } + // } + // + // %igx-grid__filtering-cell--selected { + // color: var-get($theme, 'header-selected-text-color'); + // background: var-get($theme, 'header-selected-background'); + // } + // + // %igx-grid__filtering-cell-indicator { + // position: relative; + // display: flex; + // align-items: center; + // justify-content: center; + // padding-inline-end: rem(8px); + // margin-inline-start: rem(8px); + // cursor: pointer; + // visibility: visible; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 1)}; + // } + // + // %igx-badge-display { + // --size: #{rem(14px)}; + // --font-size: #{rem(12px)}; + // line-height: 0; + // position: absolute; + // inset-inline-end: 0; + // } + // } + // + // %igx-grid__filtering-cell-indicator--hidden { + // visibility: hidden; + // } + // + // %igx-grid__filtering-row { + // position: absolute; + // display: flex; + // width: 100%; + // height: $filtering-row-height; + // padding-inline: pad-inline($cell-padding-compact, $cell-padding-cosy, $cell-padding-comfortable); + // align-items: center; + // justify-content: space-between; + // background: var-get($theme, 'filtering-row-background'); + // color: var-get($theme, 'filtering-row-text-color'); + // inset-inline-start: 0; + // bottom: 0; + // z-index: 3; + // + // &::after { + // display: block; + // position: absolute; + // content: ''; + // background: inherit; + // inset-inline-start: 0; + // inset-inline-end: 0; + // top: 0; + // bottom: 0; + // box-shadow: 0 rem(1px) 0 var-get($theme, 'filtering-row-background'), + // 0 rem(4px) rem(10px) rgba(0, 0, 0, .12); + // z-index: -1; + // } + // + // @extend %filtering-row-input-overrides !optional; + // + // igx-input-group { + // --ig-size: var(--grid-size) !important; + // } + // + // [igxIconButton] { + // --ig-size: 1; + // } + // + // @if $variant == 'bootstrap' { + // [igxButton] { + // margin: rem(4px); + // } + // } + // } + // + // %igx-grid__filtering-dropdown-items { + // display: flex; + // align-items: center; + // } + // + // %igx-grid__filtering-dropdown-text { + // margin-inline-start: rem(16px); + // } + // + // %igx-grid__filtering-row-main { + // display: flex; + // flex: 1; + // overflow: hidden; + // max-width: calc(100% - 176px); + // min-width: rem(56px); + // + // igx-chips-area { + // transition: transform .25s $ease-out-back; + // flex-wrap: nowrap; + // margin-inline: if($variant == 'indigo', rem(12px), rem(8px)); + // gap: rem(4px); + // } + // + // @if $variant != 'indigo' { + // igx-chip { + // margin: 0 rem(4px); + // } + // + // [igxButton] { + // igx-icon { + // position: absolute; + // inset-inline-start: rem(12px); + // // IE fix for vertical alignment + // top: 50%; + // transform: translateY(-50%); + // } + // + // span { + // margin-inline-start: rem(16px); + // } + // } + // } + // } + // + // %igx-grid__filtering-scroll-start { + // &::after { + // @include _filtering-scroll-mask($theme, right); + // inset-inline-start: calc(100% + 6px); + // } + // + // [dir='rtl'] & { + // &::before { + // @include _filtering-scroll-mask($theme, right); + // inset-inline-end: calc(100% + 6px); + // } + // } + // } + // + // %igx-grid__filtering-scroll-end { + // &::before { + // @include _filtering-scroll-mask($theme, left); + // inset-inline-end: calc(100% + 6px); + // } + // + // [dir='rtl'] & { + // &::after { + // @include _filtering-scroll-mask($theme, left); + // inset-inline-start: calc(100% + 6px); + // } + // } + // } + // + // %igx-grid__filtering-scroll-start, + // %igx-grid__filtering-scroll-end { + // width: rem(24px); + // height: rem(24px); + // position: relative; + // overflow: visible; + // margin: if($variant == 'indigo', rem(12px), rem(8px)); + // z-index: 1; + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // + // &::after { + // content: initial; + // } + // } + // } + // + // %igx-grid__tr--highlighted { + // position: relative; + // + // &::after { + // content: ''; + // position: absolute; + // top: 0; + // inset-inline-start: 0; + // width: rem(4px); + // height: 100%; + // background: var-get($theme, 'row-highlight'); + // z-index: 3; + // } + // + // %igx-grid__tr--edited { + // &::before { + // inset-inline-start: rem(4px); + // } + // } + // + // &::before { + // inset-inline-start: rem(4px); + // } + // } + // + // %igx-grid__tr-container { + // overflow: auto; + // width: 100%; + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // } + // + // %igx-grid__tr-container--active { + // @extend %grid-cell--active !optional; + // } + // + // %igx-grid__hierarchical-expander { + // user-select: none; + // background: inherit; + // padding-inline: pad-inline( + // map.get($hierarchical-grid-indent, 'compact'), + // map.get($hierarchical-grid-indent, 'cosy'), + // map.get($hierarchical-grid-indent, 'comfortable') + // ); + // display: flex; + // align-items: center; + // justify-content: center; + // cursor: pointer; + // z-index: 3; + // color: var-get($theme, 'expand-icon-color'); + // //background-clip: border-box; + // + // &:focus { + // outline: none; + // + // igx-icon { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // + // &:hover { + // igx-icon { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)};; + // + // color: var-get($theme, 'expand-icon-color'); + // max-width: $hierarchical-action-icon; + // min-width: min-content; + // } + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // } + // + // &--empty { + // cursor: default; + // pointer-events: none; + // } + // } + // + // %igx-grid__hierarchical-expander--header { + // background: inherit; + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // z-index: 3; + // //background-clip: border-box; + // + // igx-icon { + // display: flex; + // align-items: center; + // } + // } + // + // %igx-grid__hierarchical-expander--push { + // align-items: flex-start; + // + // igx-icon { + // min-height: var(--header-size); + // max-height: var(--header-size); + // } + // } + // + // %igx-grid__header-indentation--no-border { + // border-inline-end: rem(1px) solid transparent; + // } + // + // %igx-grid__hierarchical-indent { + // display: flex; + // margin-inline-start: pad-inline( + // map.get($hierarchical-indent, 'compact'), + // map.get($hierarchical-indent, 'cosy'), + // map.get($hierarchical-indent, 'comfortable') + // ); + // margin-inline-end: pad-inline( + // map.get($hierarchical-grid-indent, 'compact'), + // map.get($hierarchical-grid-indent, 'cosy'), + // map.get($hierarchical-grid-indent, 'comfortable') + // ); + // margin-block: pad-block( + // map.get($hierarchical-grid-indent, 'compact'), + // map.get($hierarchical-grid-indent, 'cosy'), + // map.get($hierarchical-grid-indent, 'comfortable') + // ); + // + // &--scroll { + // margin-inline-end: pad-inline( + // map.get($hierarchical-indent-scroll, 'compact'), + // map.get($hierarchical-indent-scroll, 'cosy'), + // map.get($hierarchical-indent-scroll, 'comfortable') + // ); + // } + // } + // + // @include excel-filtering($theme); + // + // %advanced-filtering-dialog { + // @if $variant == 'indigo' { + // $light-variant: contrast-color($color: 'gray', $variant: 900); + // $dark-variant: color($color: 'gray', $variant: 50); + // background: if($theme-variant == 'light', $light-variant, $dark-variant); + // } @else { + // background: color($color: 'surface', $variant: 500); + // } + // + // box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24)); + // + // @if $variant == 'material' or $variant == 'bootstrap' { + // border-radius: rem(4px); + // } + // + // @if $variant == 'fluent' { + // border-radius: rem(2px); + // } + // + // @if $variant == 'indigo' { + // border-radius: rem(10px); + // } + // + // igx-query-builder { + // box-shadow: none; + // border: none; + // border-radius: inherit; + // } + // + // igx-query-builder-header { + // cursor: grab; + // } + // } + // + // %igx-grid__filtering-row-editing-buttons--small, + // %igx-grid__filtering-row-editing-buttons { + // display: flex; + // align-items: center; + // + // button { + // transition: none; + // } + // } + // + // %igx-grid__filtering-row-editing-buttons--small { + // button { + // &:not([disabled]) { + // igx-icon { + // color: var-get($theme, 'sorted-header-icon-color'); + // } + // } + // } + // } + // + // %igx-grid__tr-action { + // &:last-of-type { + // border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // @if $variant != 'indigo' { + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(50px) + // ); + // } @else { + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(48px) + // ); + // } + // } + // } + // + // igx-child-grid-row { + // igx-child-grid-row { + // %igx-grid__tr-action { + // border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // } + // } + // + // // Pivot grid + // %igx-grid__pivot--super-compact { + // --ig-size: 1 !important; + // %grid-cell-display, + // %grid-cell-header { + // padding: 0 if($variant != 'indigo', rem(4px), rem(6px)) !important; + // min-height: rem(24px) !important; + // height: rem(24px); + // } + // + // %grid-cell-header { + // > * { + // line-height: normal; + // align-self: initial; + // max-height: 100%; + // } + // } + // + // %igx-grid__tr-pivot--row-area { + // padding-bottom: rem(4px); + // } + // } + // + // %grid-thead--pivot { + // display: flex; + // + // %grid-thead--virtualizationWrapper { + // border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // } + // + // %grid-thead--virtualizationWrapper { + // height: 100%; + // } + // + // %grid-thead--virtualizationContainer { + // overflow: visible; + // height: 100%; + // } + // + // %igx-grid__tr-pivot { + // display: flex; + // align-items: center; + // background: inherit; + // overflow: hidden; + // z-index: 3; + // height: var(--header-size); + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // padding-block: 0; + // //background-clip: border-box !important; + // border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // + // igx-chips-area { + // flex-wrap: nowrap; + // width: auto; + // + // > * { + // margin-inline-end: rem(4px); + // } + // + // &:last-child { + // margin-inline-end: 0; + // } + // } + // } + // + // %igx-grid__pivot-filter-toggle { + // display: flex; + // align-items: center; + // justify-content: center; + // cursor: pointer; + // position: relative; + // + // > igx-badge { + // position: absolute; + // top: rem(-4px); + // inset-inline-start: 60%; + // width: rem(18px); + // min-width: rem(18px); + // height: rem(18px); + // font-size: rem(10px); + // pointer-events: none; + // user-select: none; + // } + // } + // + // %igx-grid__pivot-empty-chip-area { + // @if $variant != 'indigo' { + // line-height: normal; + // font-size: rem(14px); + // } @else { + // @include type-style('body-2'); + // + // @if $theme-variant == 'light' { + // color: color($color: 'gray', $variant: 600); + // } @else { + // color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); + // } + // } + // + // margin-inline-end: 0 !important; + // } + // + // %igx-grid__tr-pivot--row-area { + // height: auto !important; + // align-items: flex-end; + // padding-bottom: pad-block( + // map.get($pivot-row-aria-padding, 'compact'), + // map.get($pivot-row-aria-padding, 'cosy'), + // map.get($pivot-row-aria-padding, 'comfortable') + // ); + // border-inline-start: 0; + // border-bottom: 0; + // } + // + // %igx-grid__tr-pivot--small-row-area { + // height: var(--header-size); + // align-items: flex-end; + // + // border-inline-start: 0; + // border-inline-end: 0; + // border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // + // %igx-grid__tr-pivot--filter-container { + // display: flex; + // flex-direction: column; + // } + // + // %igx-grid__tr-pivot--chip_drop_indicator { + // width: rem(2px); + // background: var-get($theme, 'resize-line-color'); + // visibility: hidden; + // } + // + // %igx-grid__tr-pivot--drop-row-area { + // flex-grow: 1; + // } + // + // %igx-grid__tr-pivot--filter { + // height: var(--header-size); + // + // border-inline-start: 0; + // border-inline-end: 0; + // border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // + // %igx-grid-thead__wrapper--pivot { + // border-bottom: 0; + // } + // + // %igx-grid__tr-pivot-group { + // flex: 1; + // } + // + // %igx-grid__tr-pivot-toggle-icons { + // display: inline-flex !important; + // } + // + // %igx-grid__tr-pivot--columnDimensionLeaf { + // box-shadow: none; + // + // igx-grid-header { + // border: none; + // } + // } + // + // %igx-grid__tr-pivot--columnMultiRowSpan { + // igx-grid-header { + // > * { + // visibility: hidden; + // } + // } + // } + // + // %igx-grid__tr-header-row { + // igx-pivot-row-dimension-header-group { + // igx-pivot-row-dimension-header { + // align-items: center; + // } + // + // @if $variant == 'indigo' { + // igx-icon { + // opacity: if($theme-variant == 'light', .75, .85); + // + // &:hover { + // opacity: 1; + // cursor: pointer; + // } + // } + // } + // } + // + // igx-pivot-row-header-group { + // @if $variant != 'indigo' { + // padding-inline-start: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline-start: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // igx-pivot-row-dimension-header { + // align-items: center; + // + // .igx-grid-th__icons { + // @if $variant != 'indigo' { + // padding-inline-end: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // align-self: center; + // } + // } + // + // &:last-of-type { + // igx-pivot-row-dimension-header { + // border-inline-end: 0; + // } + // } + // } + // } + // + // .igx-pivot-grid-row-filler__wrapper { + // .igx-grid-thead__wrapper { + // height: 100%; + // border-bottom: initial; + // + // .igx-grid-th { + // height: 100%; + // } + // } + // } + // + // %igx-grid__tbody-pivot-mrl-dimension { + // .igx-grid-th { + // border-bottom: none; + // } + // } + // + // // Pivot grid END } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss index 62b91322102..911495276dd 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss @@ -2,11 +2,11 @@ /// @access private @mixin group-by-area { - @include b(igx-grid-grouparea) { - @extend %igx-grid-grouparea !optional; - - @include e(connector) { - @extend %igx-grid-grouparea__connector !optional; - } - } + //@include b(igx-grid-grouparea) { + // @extend %igx-grid-grouparea !optional; + // + // @include e(connector) { + // @extend %igx-grid-grouparea__connector !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss index a640f0ca808..32002595f37 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss @@ -2,158 +2,158 @@ /// @access private @mixin header-row { - @include b(igx-grid-thead) { - @extend %grid-thead-container !optional; - - @include e(wrapper) { - @extend %grid-thead !optional; - - igx-display-container { - @extend %grid-display-container-thead !optional; - } - - &:focus { - @extend %disable-focus-styles !optional; - } - } - - @include e(wrapper, $m: 'pivot') { - @extend %igx-grid-thead__wrapper--pivot !optional; - } - - @include e(title) { - @extend %grid-cell-display !optional; - @extend %grid-cell-header !optional; - @extend %grid-thead-title !optional; - } - - @include e(title, $m: pinned-last) { - @extend %grid-thead-title--pinned !optional; - } - - @include e(group) { - @extend %grid-thead-group !optional; - } - - @include e(subgroup) { - @extend %grid-thead-subgroup !optional; - } - - @include e(item) { - @extend %grid-thead-item !optional; - } - - @include e(thumb) { - @extend %grid-thead-thumb !optional; - } - - @include m(pivot) { - @extend %grid-thead--pivot !optional; - } - - @include m(virtualizationWrapper) { - @extend %grid-thead--virtualizationWrapper !optional; - } - - @include m(virtualizationContainer) { - @extend %grid-thead--virtualizationContainer !optional; - } - } - - @include b(igx-grid-th) { - @extend %grid-cell-display !optional; - @extend %grid-cell-header !optional; - - @include e(expander) { - @extend %igx-grid-th__expander !optional - } - - @include e(group-title) { - @extend %igx-grid-th__group-title !optional - } - - @include e(title) { - @extend %grid-cell-header-title !optional; - } - - @include e(icons) { - @extend %grid-cell-header-icons !optional; - } - - @include e(resize-handle) { - @extend %grid__resize-handle !optional; - } - - @include e(resize-line) { - @extend %grid__resize-line !optional; - } - - @include m(collapsible) { - @extend %igx-grid-th--collapsible !optional; - } - - @include m(sortable) { - @extend %igx-grid-th--sortable !optional; - } - - @include m(selectable) { - @extend %igx-grid-th--selectable !optional; - } - - @include m(filtrable) { - @extend %igx-grid-th--filtrable !optional; - } - - @include mx(filtrable, sortable) { - @extend %igx-grid-th--filtrable-sortable !optional; - } - - @include m(sorted) { - @extend %igx-grid-th--sorted !optional; - } - - @include m(selected) { - @extend %igx-grid-th--selected !optional; - } - - @include m(active) { - @extend %igx-grid-th--active !optional; - } - - @include m(number) { - @extend %grid-cell-number !optional; - } - - @include m(pinned) { - @extend %grid-cell--pinned !optional; - } - - @include m(pinned-last) { - @extend %grid-cell--pinned-last !optional; - } - - @include m(pinned-first) { - @extend %grid-cell--pinned-first !optional; - } - - @include m(fw) { - @extend %grid-cell--fixed-width !optional; - } - - @include m(filtering) { - @extend %grid-cell-header--filtering !optional; - } - - @include e(drop-indicator-left) { - @extend %igx-grid-th__drop-indicator-left !optional; - } - - @include e(drop-indicator-right) { - @extend %igx-grid-th__drop-indicator-right !optional; - } - - @include e(drop-indicator, $m: active) { - @extend %igx-grid-th__drop-indicator--active !optional; - } - } + //@include b(igx-grid-thead) { + // @extend %grid-thead-container !optional; + // + // @include e(wrapper) { + // @extend %grid-thead !optional; + // + // igx-display-container { + // @extend %grid-display-container-thead !optional; + // } + // + // &:focus { + // @extend %disable-focus-styles !optional; + // } + // } + // + // @include e(wrapper, $m: 'pivot') { + // @extend %igx-grid-thead__wrapper--pivot !optional; + // } + // + // @include e(title) { + // @extend %grid-cell-display !optional; + // @extend %grid-cell-header !optional; + // @extend %grid-thead-title !optional; + // } + // + // @include e(title, $m: pinned-last) { + // @extend %grid-thead-title--pinned !optional; + // } + // + // @include e(group) { + // @extend %grid-thead-group !optional; + // } + // + // @include e(subgroup) { + // @extend %grid-thead-subgroup !optional; + // } + // + // @include e(item) { + // @extend %grid-thead-item !optional; + // } + // + // @include e(thumb) { + // @extend %grid-thead-thumb !optional; + // } + // + // @include m(pivot) { + // @extend %grid-thead--pivot !optional; + // } + // + // @include m(virtualizationWrapper) { + // @extend %grid-thead--virtualizationWrapper !optional; + // } + // + // @include m(virtualizationContainer) { + // @extend %grid-thead--virtualizationContainer !optional; + // } + //} + // + //@include b(igx-grid-th) { + // @extend %grid-cell-display !optional; + // @extend %grid-cell-header !optional; + // + // @include e(expander) { + // @extend %igx-grid-th__expander !optional + // } + // + // @include e(group-title) { + // @extend %igx-grid-th__group-title !optional + // } + // + // @include e(title) { + // @extend %grid-cell-header-title !optional; + // } + // + // @include e(icons) { + // @extend %grid-cell-header-icons !optional; + // } + // + // @include e(resize-handle) { + // @extend %grid__resize-handle !optional; + // } + // + // @include e(resize-line) { + // @extend %grid__resize-line !optional; + // } + // + // @include m(collapsible) { + // @extend %igx-grid-th--collapsible !optional; + // } + // + // @include m(sortable) { + // @extend %igx-grid-th--sortable !optional; + // } + // + // @include m(selectable) { + // @extend %igx-grid-th--selectable !optional; + // } + // + // @include m(filtrable) { + // @extend %igx-grid-th--filtrable !optional; + // } + // + // @include mx(filtrable, sortable) { + // @extend %igx-grid-th--filtrable-sortable !optional; + // } + // + // @include m(sorted) { + // @extend %igx-grid-th--sorted !optional; + // } + // + // @include m(selected) { + // @extend %igx-grid-th--selected !optional; + // } + // + // @include m(active) { + // @extend %igx-grid-th--active !optional; + // } + // + // @include m(number) { + // @extend %grid-cell-number !optional; + // } + // + // @include m(pinned) { + // @extend %grid-cell--pinned !optional; + // } + // + // @include m(pinned-last) { + // @extend %grid-cell--pinned-last !optional; + // } + // + // @include m(pinned-first) { + // @extend %grid-cell--pinned-first !optional; + // } + // + // @include m(fw) { + // @extend %grid-cell--fixed-width !optional; + // } + // + // @include m(filtering) { + // @extend %grid-cell-header--filtering !optional; + // } + // + // @include e(drop-indicator-left) { + // @extend %igx-grid-th__drop-indicator-left !optional; + // } + // + // @include e(drop-indicator-right) { + // @extend %igx-grid-th__drop-indicator-right !optional; + // } + // + // @include e(drop-indicator, $m: active) { + // @extend %igx-grid-th__drop-indicator--active !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-component.scss index 626138e8852..da8dfd45284 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-component.scss @@ -2,69 +2,69 @@ @use 'sass:string'; @mixin component() { - @include b(igx-pivot-data-selector) { - $this: bem--selector-to-string(&); - @include register-component( - $name: string.slice($this, 2, -1), - $deps: () - ); - - @extend %selector-base !optional; - - @include e(header) { - @extend %selector-header !optional; - } - - @include e(header-extra) { - @extend %selector-header-extra !optional; - } - - @include e(filter) { - @extend %selector-filter !optional; - } - - @include e(item) { - @extend %selector-item !optional; - } - - @include e(item-ghost) { - @extend %selector-item-ghost !optional; - } - - @include e(item-ghost, $m: no-drop) { - @extend %selector-item-ghost--no-drop !optional; - } - - @include e(item-ghost-text) { - @extend %selector-item-ghost-text !optional; - } - - @include e(item-start) { - @extend %selector-item-start !optional; - } - - @include e(item-end) { - @extend %selector-item-end !optional; - } - - @include e(item-text) { - @extend %selector-item-text !optional; - } - - @include e(action-sort) { - @extend %selector-action-sort !optional; - } - - @include e(action-filter) { - @extend %selector-action-filter !optional; - } - - @include e(action-move) { - @extend %selector-action-move !optional; - } - - @include e(action-summary) { - @extend %selector-action-summary !optional; - } - } + //@include b(igx-pivot-data-selector) { + // $this: bem--selector-to-string(&); + // @include register-component( + // $name: string.slice($this, 2, -1), + // $deps: () + // ); + // + // @extend %selector-base !optional; + // + // @include e(header) { + // @extend %selector-header !optional; + // } + // + // @include e(header-extra) { + // @extend %selector-header-extra !optional; + // } + // + // @include e(filter) { + // @extend %selector-filter !optional; + // } + // + // @include e(item) { + // @extend %selector-item !optional; + // } + // + // @include e(item-ghost) { + // @extend %selector-item-ghost !optional; + // } + // + // @include e(item-ghost, $m: no-drop) { + // @extend %selector-item-ghost--no-drop !optional; + // } + // + // @include e(item-ghost-text) { + // @extend %selector-item-ghost-text !optional; + // } + // + // @include e(item-start) { + // @extend %selector-item-start !optional; + // } + // + // @include e(item-end) { + // @extend %selector-item-end !optional; + // } + // + // @include e(item-text) { + // @extend %selector-item-text !optional; + // } + // + // @include e(action-sort) { + // @extend %selector-action-sort !optional; + // } + // + // @include e(action-filter) { + // @extend %selector-action-filter !optional; + // } + // + // @include e(action-move) { + // @extend %selector-action-move !optional; + // } + // + // @include e(action-summary) { + // @extend %selector-action-summary !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss index cdf12e61981..60fc1caf188 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss @@ -7,258 +7,258 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin pivot-data-selector($theme) { - @include css-vars($theme); - - $variant: map.get($theme, '_meta', 'theme'); - - $chip-height-material: ( - comfortable: rem(22px), - cosy: rem(20px), - compact: rem(18px) - ); - - $chip-item-padding: 0 #{rem(2px)}; - $panel-padding: rem(4px, 16px); - - %selector-base { - display: flex; - flex-direction: column; - max-width: rem(280px); - background: var-get($theme, 'background'); - z-index: 0; - - > igx-input-group { - flex: 0 1 auto; - } - - igx-display-container { - display: flex; - flex-direction: column; - } - - > igx-list { - igx-display-container { - padding: rem(4px); - } - - igx-list-item { - display: flex; - min-height: rem(28px); - } - - %cbx-label { - font-size: rem(13px); - } - } - - %cbx-composite-wrapper { - @if $variant == 'material' { - padding: 0; - } - } - - %form-group-input--box { - transform: none; - } - - %form-group-prefix { - @if $variant == 'material' { - padding-inline-end: rem(16px) !important; - } - - box-sizing: content-box; - } - - %form-group-bundle-main--box { - padding-top: 0 !important; - } - - %igx-expanded-panel-margin { - igx-expansion-panel[aria-expanded='true'] { - margin-top: 0; - margin-bottom: 0; - } - } - - .igx-expansion-panel__body { - position: relative; - height: rem(128px); - font-size: rem(14px); - padding: $panel-padding; - overflow-y: auto; - - > igx-list { - height: auto; - } - } - - .igx-expansion-panel__header-icon--start { - margin-inline-end: rem(8px); - } - - .igx-expansion-panel__header-title { - display: flex; - - > h6 { - font-size: rem(12px); - margin-bottom: 0; - } - } - - .igx-expansion-panel__header-inner { - background: var-get($theme, 'header-color'); - padding: $panel-padding; - - .dragOver & { - background: color($color: 'gray', $variant: 300); - box-shadow: inset 0 0 0 rem(1px) color($color: 'gray', $variant: 400); - } - } - } - - %selector-filter { - display: flex; - flex-direction: column; - overflow: hidden; - - igx-input-group { - @if $variant == 'bootstrap' { - padding: rem(4px); - } - } - - igx-list { - display: flex; - flex-direction: column; - padding: rem(8px) rem(4px); - min-height: rem(186px); - max-height: rem(208px); - overflow-y: auto; - } - - igx-list-item { - display: flex; - } - - igx-checkbox + span { - margin-inline-start: rem(8px); - line-height: rem(28px); - } - } - - %selector-header, - %selector-header-extra { - display: flex; - align-items: center; - } - - %selector-header-extra { - igx-icon { - padding: 0 rem(8px); - box-sizing: content-box; - } - - %igx-chip__item { - height: #{ - sizable( - map.get($chip-height-material, 'compact'), - map.get($chip-height-material, 'cosy'), - map.get($chip-height-material, 'comfortable') - )}; - } - - %igx-chip__content { - padding: $chip-item-padding; - } - } - - %selector-item { - display: flex; - align-items: center; - justify-content: space-between; - min-height: rem(32px); - width: 100%; - - .igx-drag--push & { - padding-top: rem(32px); - } - } - - %selector-item-ghost { - display: flex; - align-items: center; - justify-content: space-between; - font-size: rem(14px); - background: color($color: 'surface'); - min-height: rem(32px); - height: auto; - padding: 0 rem(2px) 0 rem(4px); - cursor: grabbing; - box-shadow: elevation(24); - border: rem(1px) solid color($color: 'gray', $variant: 100); - border-radius: border-radius(rem(2px)); - z-index: 10; - } - - %selector-base, - %selector-item-ghost { - igx-icon { - width: var(--ig-icon-size, #{rem(18px)}); - height: var(--ig-icon-size, #{rem(18px)}); - font-size: var(--ig-icon-size, #{rem(18px)}); - } - } - - %selector-item-ghost-text { - display: flex; - align-items: center; - - igx-icon { - margin-inline-end: rem(8px); - } - } - - %selector-item-ghost--no-drop { - cursor: no-drop; - } - - %selector-item-text { - @include ellipsis(); - max-width: calc(100% - rem(18px) + rem(8px)); - } - - %selector-item-text, - %selector-action-sort, - %selector-action-filter, - %selector-action-move, - %selector-action-summary { - user-select: none; - } - - %selector-action-sort, - %selector-action-summary, - %selector-action-filter { - cursor: pointer; - } - - %selector-action-move { - cursor: grab; - } - - %selector-item-start { - display: flex; - justify-content: space-between; - align-items: center; - flex: 0 1 100%; - margin-inline-end: rem(8px); - overflow: hidden; - } - - %selector-item-end { - display: flex; - - igx-icon + igx-icon { - margin-inline-start: rem(8px); - } - } + //@include css-vars($theme); + // + //$variant: map.get($theme, '_meta', 'theme'); + // + //$chip-height-material: ( + // comfortable: rem(22px), + // cosy: rem(20px), + // compact: rem(18px) + //); + // + //$chip-item-padding: 0 #{rem(2px)}; + //$panel-padding: rem(4px, 16px); + // + //%selector-base { + // display: flex; + // flex-direction: column; + // max-width: rem(280px); + // background: var-get($theme, 'background'); + // z-index: 0; + // + // > igx-input-group { + // flex: 0 1 auto; + // } + // + // igx-display-container { + // display: flex; + // flex-direction: column; + // } + // + // > igx-list { + // igx-display-container { + // padding: rem(4px); + // } + // + // igx-list-item { + // display: flex; + // min-height: rem(28px); + // } + // + // %cbx-label { + // font-size: rem(13px); + // } + // } + // + // %cbx-composite-wrapper { + // @if $variant == 'material' { + // padding: 0; + // } + // } + // + // %form-group-input--box { + // transform: none; + // } + // + // %form-group-prefix { + // @if $variant == 'material' { + // padding-inline-end: rem(16px) !important; + // } + // + // box-sizing: content-box; + // } + // + // %form-group-bundle-main--box { + // padding-top: 0 !important; + // } + // + // %igx-expanded-panel-margin { + // igx-expansion-panel[aria-expanded='true'] { + // margin-top: 0; + // margin-bottom: 0; + // } + // } + // + // .igx-expansion-panel__body { + // position: relative; + // height: rem(128px); + // font-size: rem(14px); + // padding: $panel-padding; + // overflow-y: auto; + // + // > igx-list { + // height: auto; + // } + // } + // + // .igx-expansion-panel__header-icon--start { + // margin-inline-end: rem(8px); + // } + // + // .igx-expansion-panel__header-title { + // display: flex; + // + // > h6 { + // font-size: rem(12px); + // margin-bottom: 0; + // } + // } + // + // .igx-expansion-panel__header-inner { + // background: var-get($theme, 'header-color'); + // padding: $panel-padding; + // + // .dragOver & { + // background: color($color: 'gray', $variant: 300); + // box-shadow: inset 0 0 0 rem(1px) color($color: 'gray', $variant: 400); + // } + // } + //} + // + //%selector-filter { + // display: flex; + // flex-direction: column; + // overflow: hidden; + // + // igx-input-group { + // @if $variant == 'bootstrap' { + // padding: rem(4px); + // } + // } + // + // igx-list { + // display: flex; + // flex-direction: column; + // padding: rem(8px) rem(4px); + // min-height: rem(186px); + // max-height: rem(208px); + // overflow-y: auto; + // } + // + // igx-list-item { + // display: flex; + // } + // + // igx-checkbox + span { + // margin-inline-start: rem(8px); + // line-height: rem(28px); + // } + //} + // + //%selector-header, + //%selector-header-extra { + // display: flex; + // align-items: center; + //} + // + //%selector-header-extra { + // igx-icon { + // padding: 0 rem(8px); + // box-sizing: content-box; + // } + // + // %igx-chip__item { + // height: #{ + // sizable( + // map.get($chip-height-material, 'compact'), + // map.get($chip-height-material, 'cosy'), + // map.get($chip-height-material, 'comfortable') + // )}; + // } + // + // %igx-chip__content { + // padding: $chip-item-padding; + // } + //} + // + //%selector-item { + // display: flex; + // align-items: center; + // justify-content: space-between; + // min-height: rem(32px); + // width: 100%; + // + // .igx-drag--push & { + // padding-top: rem(32px); + // } + //} + // + //%selector-item-ghost { + // display: flex; + // align-items: center; + // justify-content: space-between; + // font-size: rem(14px); + // background: color($color: 'surface'); + // min-height: rem(32px); + // height: auto; + // padding: 0 rem(2px) 0 rem(4px); + // cursor: grabbing; + // box-shadow: elevation(24); + // border: rem(1px) solid color($color: 'gray', $variant: 100); + // border-radius: border-radius(rem(2px)); + // z-index: 10; + //} + // + //%selector-base, + //%selector-item-ghost { + // igx-icon { + // width: var(--ig-icon-size, #{rem(18px)}); + // height: var(--ig-icon-size, #{rem(18px)}); + // font-size: var(--ig-icon-size, #{rem(18px)}); + // } + //} + // + //%selector-item-ghost-text { + // display: flex; + // align-items: center; + // + // igx-icon { + // margin-inline-end: rem(8px); + // } + //} + // + //%selector-item-ghost--no-drop { + // cursor: no-drop; + //} + // + //%selector-item-text { + // @include ellipsis(); + // max-width: calc(100% - rem(18px) + rem(8px)); + //} + // + //%selector-item-text, + //%selector-action-sort, + //%selector-action-filter, + //%selector-action-move, + //%selector-action-summary { + // user-select: none; + //} + // + //%selector-action-sort, + //%selector-action-summary, + //%selector-action-filter { + // cursor: pointer; + //} + // + //%selector-action-move { + // cursor: grab; + //} + // + //%selector-item-start { + // display: flex; + // justify-content: space-between; + // align-items: center; + // flex: 0 1 100%; + // margin-inline-end: rem(8px); + // overflow: hidden; + //} + // + //%selector-item-end { + // display: flex; + // + // igx-icon + igx-icon { + // margin-inline-start: rem(8px); + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss index fce80b8f03d..5712a28fd46 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss @@ -110,7 +110,7 @@ @include e(expression-item-drop-ghost) { @extend %filter-tree__expression-item-ghost !optional; } - + @include e(expression-item-keyboard-ghost) { @extend %filter-tree__expression-item-keyboard-ghost !optional; } diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss index 783b9ce11ec..421c6164bea 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss @@ -1,581 +1,581 @@ -@use 'sass:map'; -@use '../../base' as *; - -/// @deprecated Use the `css-vars` mixin instead. -/// @see {mixin} css-vars -/// @param {Map} $theme - The grid theme used to style the component. -@mixin query-builder($theme) { - @include css-vars($theme); - - $variant: map.get($theme, '_meta', 'theme'); - $theme-variant: map.get($theme, '_meta', 'variant'); - $bootstrap-theme: $variant == 'bootstrap'; - $not-bootstrap-theme: not($bootstrap-theme); - - // Custom colors alpha - $alpha-hover: .08; - $alpha-focus: .16; - $alpha-focus-hover: .24; - - $border-radius: var-get($theme, 'border-radius'); - $icon-size: rem(18px); - - %advanced-filter { - @include sizable(); - - --_tree-scrollbar-gutter: #{rem(16px)}; - - @if $variant == 'bootstrap' { - --query-builder-outer-padding: #{rem(16px)}; - } @else { - --query-builder-outer-padding: #{rem(24px)}; - } - - width: auto; - min-width: rem(660px); - background-color: var-get($theme, 'background'); - border-radius: $border-radius; - box-shadow: var-get($theme, 'elevation'); - overflow: hidden; - - &:has(:not(igx-query-builder-header)) { - padding-block-start: var(--query-builder-outer-padding); - - %query-level-0 { - padding-block: 0 var(--query-builder-outer-padding); - } - } - - &:has(igx-query-builder-header) { - padding-block-start: 0; - - %query-level-0 { - padding-block: if($variant != 'bootstrap', 0, rem(16px)) var(--query-builder-outer-padding); - } - } - - .igx-chip__ghost { - position: relative; - } - } - - %query-builder-tree { - background: var-get($theme, 'background'); - - %query-builder-tree { - border-radius: var-get($theme, 'subquery-border-radius'); - } - } - - %query-level-0 { - display: block; - width: 100%; - - padding-inline: var(--query-builder-outer-padding); - - > %advanced-filter__main { - gap: rem(16px); - - > %filter-tree__section { - --sb-size: #{rem(10px)}; - - max-height: rem(570px); - overflow-y: auto; - overflow-x: hidden; - padding-inline-end: var(--_tree-scrollbar-gutter); - } - } - } - - %filter-tree__subquery { - max-width: rem(960px); - - // Add styles to the subquery itself only if there is a direct .igx-filter-tree__inputs inside it - &:has( > %filter-tree__inputs) { - background: var-get($theme, 'subquery-header-background'); - border: rem(1px) solid var-get($theme, 'subquery-border-color'); - border-radius: var-get($theme, 'subquery-border-radius'); - } - - // Hide the subquery itself if there is a tree with display none inside - &:has( > %query-builder-tree[style='display: none;']) { - display: none; - } - - > %filter-tree__inputs { - padding: rem(12px); - border-radius: inherit; - - > igx-input-group, - > igx-date-picker, - > igx-time-picker { - flex-grow: 1; - } - } - - %filter-tree__buttons { - margin-block-start: rem(8px); - } - - %query-builder-tree { - border-block-start: rem(1px) dashed var-get($theme, 'separator-color'); - padding: rem(12px); - } - - &:empty { - display: none; - } - - } - - %filter-tree-details-button { - margin-inline-start: auto; - } - - %query-builder-dialog { - display: flex; - flex-direction: column; - gap: rem(16px); - max-width: rem(310px); - - > * { - margin: 0 !important; - } - } - - %advanced-filter__header { - display: flex; - align-items: center; - background-color: var-get($theme, 'header-background'); - color: var-get($theme, 'header-foreground'); - user-select: none; - border-radius: $border-radius $border-radius 0 0; - margin-bottom: 0; - border-block-end: rem(1px) solid var-get($theme, 'header-border'); - - padding-inline: var(--query-builder-outer-padding); - padding-block: var(--query-builder-outer-padding) rem(16px); - } - - %advanced-filter__title { - &:empty { - display: none; - } - } - - %advanced-filter__main { - display: grid; - gap: rem(16px); - } - - %advanced-filter__root { - display: flex; - flex-direction: column; - flex-grow: 1; - - > * { - flex-grow: 1; - } - } - - %advanced-filter__root-actions { - display: flex; - gap: rem(8px); - padding-bottom: rem(16px); - } - - %advanced-filter__outlet { - igx-select-item > igx-icon { - width: var(--ig-icon-size, #{$icon-size}); - height: var(--ig-icon-size, #{$icon-size}); - font-size: var(--ig-icon-size, #{$icon-size}); - margin-inline-end: rem(8px); - } - } - - %filter-tree { - display: flex; - width: 100%; - - %filter-tree { - margin-block: rem(8px); - } - } - - %filter-tree__section { - display: flex; - flex-direction: column; - gap: rem(8px); - - > %filter-tree { - margin-block: 0; - } - } - - %filter-tree__expression-context-menu { - display: flex; - width: 100%; - - [igxbutton='flat'] { - --ig-size: 1; - - @if $variant == 'bootstrap' { - --ig-button-text-transform: capitalize; - } - - border: none; - min-width: auto; - } - } - - %filter-tree__line { - $size: rem(2px); - width: $size; - background-color: white; - margin-inline-end: calc(rem(8px) - $size); - outline-style: none; - } - - %filter-tree__line--and { - background: var-get($theme, 'color-expression-group-and'); - } - - %filter-tree__line--or { - background: var-get($theme, 'color-expression-group-or'); - } - - %filter-tree__button--and { - &[igxButton='flat'] { - @if $variant == 'material' or $variant == 'indigo' { - --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus-hover}); - --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); - --focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); - --active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); - --hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover}); - --background: transparent; - } - - @if $variant == 'fluent' { - --background: transparent; - --focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - --focus-visible-background: transparent; - --focus-background: transparent; - --active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - --hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - } - - --foreground: #{var-get($theme, 'color-expression-group-and')}; - --focus-visible-foreground: #{var-get($theme, 'color-expression-group-and')}; - --icon-color: #{var-get($theme, 'color-expression-group-and')}; - - @if $variant != 'bootstrap' { - --focus-foreground: #{var-get($theme, 'color-expression-group-and')}; - --hover-foreground: #{var-get($theme, 'color-expression-group-and')}; - --icon-color-hover: #{var-get($theme, 'color-expression-group-and')}; - --focus-hover-foreground: #{var-get($theme, 'color-expression-group-and')}; - --active-foreground: #{var-get($theme, 'color-expression-group-and')}; - } @else { - $bootstrap-foreground-lightness: if($theme-variant == 'light', 34%, 78% ); - - --focus-hover-background: transparent; - --focus-visible-background: transparent; - --focus-background: transparent; - --active-background: transparent; - --hover-background: transparent; - --background: transparent; - --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / .5); - - --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - } - } - } - - %filter-tree__button--or { - &[igxButton='flat'] { - @if $variant == 'material' or $variant == 'indigo' { - --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus-hover}); - --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); - --focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); - --active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); - --hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover}); - --background: transparent; - } - - @if $variant == 'fluent' { - --background: transparent; - --focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - --focus-visible-background: transparent; - --focus-background: transparent; - --active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - --hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - } - - --foreground: #{var-get($theme, 'color-expression-group-or')}; - --focus-visible-foreground: #{var-get($theme, 'color-expression-group-or')}; - --icon-color: #{var-get($theme, 'color-expression-group-or')}; - - @if $variant != 'bootstrap' { - --focus-foreground: #{var-get($theme, 'color-expression-group-or')}; - --hover-foreground: #{var-get($theme, 'color-expression-group-or')}; - --icon-color-hover: #{var-get($theme, 'color-expression-group-or')}; - --focus-hover-foreground: #{var-get($theme, 'color-expression-group-or')}; - --active-foreground: #{var-get($theme, 'color-expression-group-or')}; - } @else { - $bootstrap-foreground-lightness: if($theme-variant == 'light', 14%, 47%); - - --focus-hover-background: transparent; - --focus-visible-background: transparent; - --focus-background: transparent; - --active-background: transparent; - --hover-background: transparent; - --background: transparent; - --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / .5); - - --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - } - } - } - - %filter-tree__expressions { - display: flex; - flex-direction: column; - align-items: flex-start; - flex-grow: 1; - gap: rem(8px); - } - - %filter-tree__expression-section { - $spacing: rem(16px); - display: flex; - flex-direction: column; - width: calc(100% - #{$spacing}); - gap: rem(8px); - margin-inline-start: $spacing; - - &:empty { - display: none; - } - } - - %filter-tree__expression-item { - display: flex; - align-items: center; - width: 100%; - gap: rem(8px); - position: relative; - - igx-chip { - --ig-size: 3; - - @if $variant != 'indigo' { - igx-icon { - --component-size: 1; - } - } - } - - > igx-chip { - %filter-tree__expression-column { - padding-inline: pad-inline(rem(3px), rem(6px), rem(8px)); - } - - %filter-tree__expression-condition { - padding-inline-start: pad-inline(rem(3px), rem(6px), rem(8px)); - } - - igx-prefix { - display: flex; - } - - .igx-chip__end { - gap: sizable(rem(3px), rem(6px), rem(8px)); - } - } - } - - - %filter-tree__expression-item-ghost { - .igx-chip__item { - @include type-style('body-2'); - - --ig-body-2-text-transform: unset; - - padding-inline: rem(32px); - - color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900)); - border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300)); - background: transparent; - } - } - - %filter-tree__expression-item-keyboard-ghost { - .igx-chip__item { - box-shadow: var(--ghost-shadow); - background: var(--ghost-background); - color: var(--focus-text-color); - } - - .igx-chip:hover { - .igx-chip__item { - box-shadow: var(--ghost-shadow); - background: var(--ghost-background); - color: var(--focus-text-color); - - @if $variant == 'indigo' { - border-color: var(--border-color); - } - } - } - } - - %filter-tree__expression-column { - padding: 0 rem(8px); - } - - %filter-tree__expression-actions { - display: inline-flex; - gap: if($variant != 'indigo', rem(16px), rem(8px)); - - span { - display: inline-flex; - } - - %igx-icon-button-display { - --ig-size: #{if($variant != 'bootstrap', 2, 1)}; - }; - } - - %filter-tree__expression-condition { - opacity: if($variant != 'indigo', .6, .8); - } - - %filter-tree__buttons { - --ig-size: 1; - - display: flex; - align-items: center; - gap: rem(8px); - - [igxbutton='flat'] { - padding-block: 0; - border: none - } - } - - %filter-tree__inputs { - --ig-size: #{if($variant == 'indigo' or $variant == 'bootstrap', 2, 1)}; - - display: flex; - align-items: flex-end; - gap: rem(16px); - width: 100%; - border-radius: inherit; - - &:empty { - display: none; - } - } - - %filter-tree__inputs-field { - display: flex; - flex-direction: column; - gap: rem(4px); - max-width: rem(250px); - width: 100%; - } - - %advanced-filter__label { - @include type-style('body-2'); - - color: var-get($theme, 'label-foreground'); - } - - %filter-tree__inputs-actions { - --ig-size: 2; - - display: flex; - gap: rem(8px); - align-items: center; - width: auto; - align-self: center; - - [igxIconButton] { - transition: none; - } - } - - %filter-con-menu__delete-btn { - color: color(null, 'error'); - @if $bootstrap-theme { - border-color: color(null, 'error'); - } - - &:hover, - &:focus { - @if $bootstrap-theme { - background: color(null, 'error'); - border-color: color(null, 'error'); - color: color(null, 'gray', 100); - } @else { - color: color(null, 'error'); - } - } - } - - %filter-con-menu__close-btn { - position: absolute; - top: 0; - inset-inline-start: 100%; - transform: translate(-50%, -50%); - background-color: var-get($theme, 'background'); - border: rem(1px) solid color(null, 'gray', 200); - - &:hover, - &:focus { - @if $not-bootstrap-theme { - background-color: var-get($theme, 'background'); - } - } - } - - %advanced-filter--inline { - display: flex; - flex-direction: column; - width: 100%; - max-width: 100%; - height: inherit; - max-height: inherit; - min-width: rem(480px); - box-shadow: none; - - %advanced-filter__main { - min-height: initial; - max-height: initial; - flex-grow: 1; - } - } -} - -/// Adds typography styles for the igx-query-builder component. -/// Uses the 'h6' category from the typographic scale. -/// @group typography -/// @param {Map} $categories [(title: 'h6')] - The categories from the typographic scale used for type styles. -@mixin query-builder-typography( - $categories: (title: 'h6') -) { - $title: map.get($categories, 'title'); - - %advanced-filter__title { - @include type-style($title) { - margin: 0; - } - } -} +//@use 'sass:map'; +//@use '../../base' as *; +// +///// @deprecated Use the `css-vars` mixin instead. +///// @see {mixin} css-vars +///// @param {Map} $theme - The grid theme used to style the component. +//@mixin query-builder($theme) { +// @include css-vars($theme); +// +// $variant: map.get($theme, '_meta', 'theme'); +// $theme-variant: map.get($theme, '_meta', 'variant'); +// $bootstrap-theme: $variant == 'bootstrap'; +// $not-bootstrap-theme: not($bootstrap-theme); +// +// // Custom colors alpha +// $alpha-hover: .08; +// $alpha-focus: .16; +// $alpha-focus-hover: .24; +// +// $border-radius: var-get($theme, 'border-radius'); +// $icon-size: rem(18px); +// +// %advanced-filter { +// @include sizable(); +// +// --_tree-scrollbar-gutter: #{rem(16px)}; +// +// @if $variant == 'bootstrap' { +// --query-builder-outer-padding: #{rem(16px)}; +// } @else { +// --query-builder-outer-padding: #{rem(24px)}; +// } +// +// width: auto; +// min-width: rem(660px); +// background-color: var-get($theme, 'background'); +// border-radius: $border-radius; +// box-shadow: var-get($theme, 'elevation'); +// overflow: hidden; +// +// &:has(:not(igx-query-builder-header)) { +// padding-block-start: var(--query-builder-outer-padding); +// +// %query-level-0 { +// padding-block: 0 var(--query-builder-outer-padding); +// } +// } +// +// &:has(igx-query-builder-header) { +// padding-block-start: 0; +// +// %query-level-0 { +// padding-block: if($variant != 'bootstrap', 0, rem(16px)) var(--query-builder-outer-padding); +// } +// } +// +// .igx-chip__ghost { +// position: relative; +// } +// } +// +// %query-builder-tree { +// background: var-get($theme, 'background'); +// +// %query-builder-tree { +// border-radius: var-get($theme, 'subquery-border-radius'); +// } +// } +// +// %query-level-0 { +// display: block; +// width: 100%; +// +// padding-inline: var(--query-builder-outer-padding); +// +// > %advanced-filter__main { +// gap: rem(16px); +// +// > %filter-tree__section { +// --sb-size: #{rem(10px)}; +// +// max-height: rem(570px); +// overflow-y: auto; +// overflow-x: hidden; +// padding-inline-end: var(--_tree-scrollbar-gutter); +// } +// } +// } +// +// %filter-tree__subquery { +// max-width: rem(960px); +// +// // Add styles to the subquery itself only if there is a direct .igx-filter-tree__inputs inside it +// &:has( > %filter-tree__inputs) { +// background: var-get($theme, 'subquery-header-background'); +// border: rem(1px) solid var-get($theme, 'subquery-border-color'); +// border-radius: var-get($theme, 'subquery-border-radius'); +// } +// +// // Hide the subquery itself if there is a tree with display none inside +// &:has( > %query-builder-tree[style='display: none;']) { +// display: none; +// } +// +// > %filter-tree__inputs { +// padding: rem(12px); +// border-radius: inherit; +// +// > igx-input-group, +// > igx-date-picker, +// > igx-time-picker { +// flex-grow: 1; +// } +// } +// +// %filter-tree__buttons { +// margin-block-start: rem(8px); +// } +// +// %query-builder-tree { +// border-block-start: rem(1px) dashed var-get($theme, 'separator-color'); +// padding: rem(12px); +// } +// +// &:empty { +// display: none; +// } +// +// } +// +// %filter-tree-details-button { +// margin-inline-start: auto; +// } +// +// %query-builder-dialog { +// display: flex; +// flex-direction: column; +// gap: rem(16px); +// max-width: rem(310px); +// +// > * { +// margin: 0 !important; +// } +// } +// +// %advanced-filter__header { +// display: flex; +// align-items: center; +// background-color: var-get($theme, 'header-background'); +// color: var-get($theme, 'header-foreground'); +// user-select: none; +// border-radius: $border-radius $border-radius 0 0; +// margin-bottom: 0; +// border-block-end: rem(1px) solid var-get($theme, 'header-border'); +// +// padding-inline: var(--query-builder-outer-padding); +// padding-block: var(--query-builder-outer-padding) rem(16px); +// } +// +// %advanced-filter__title { +// &:empty { +// display: none; +// } +// } +// +// %advanced-filter__main { +// display: grid; +// gap: rem(16px); +// } +// +// %advanced-filter__root { +// display: flex; +// flex-direction: column; +// flex-grow: 1; +// +// > * { +// flex-grow: 1; +// } +// } +// +// %advanced-filter__root-actions { +// display: flex; +// gap: rem(8px); +// padding-bottom: rem(16px); +// } +// +// %advanced-filter__outlet { +// igx-select-item > igx-icon { +// width: var(--ig-icon-size, #{$icon-size}); +// height: var(--ig-icon-size, #{$icon-size}); +// font-size: var(--ig-icon-size, #{$icon-size}); +// margin-inline-end: rem(8px); +// } +// } +// +// %filter-tree { +// display: flex; +// width: 100%; +// +// %filter-tree { +// margin-block: rem(8px); +// } +// } +// +// %filter-tree__section { +// display: flex; +// flex-direction: column; +// gap: rem(8px); +// +// > %filter-tree { +// margin-block: 0; +// } +// } +// +// %filter-tree__expression-context-menu { +// display: flex; +// width: 100%; +// +// [igxbutton='flat'] { +// --ig-size: 1; +// +// @if $variant == 'bootstrap' { +// --ig-button-text-transform: capitalize; +// } +// +// border: none; +// min-width: auto; +// } +// } +// +// %filter-tree__line { +// $size: rem(2px); +// width: $size; +// background-color: white; +// margin-inline-end: calc(rem(8px) - $size); +// outline-style: none; +// } +// +// %filter-tree__line--and { +// background: var-get($theme, 'color-expression-group-and'); +// } +// +// %filter-tree__line--or { +// background: var-get($theme, 'color-expression-group-or'); +// } +// +// %filter-tree__button--and { +// &[igxButton='flat'] { +// @if $variant == 'material' or $variant == 'indigo' { +// --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus-hover}); +// --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); +// --focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); +// --active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); +// --hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover}); +// --background: transparent; +// } +// +// @if $variant == 'fluent' { +// --background: transparent; +// --focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// --focus-visible-background: transparent; +// --focus-background: transparent; +// --active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// --hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// } +// +// --foreground: #{var-get($theme, 'color-expression-group-and')}; +// --focus-visible-foreground: #{var-get($theme, 'color-expression-group-and')}; +// --icon-color: #{var-get($theme, 'color-expression-group-and')}; +// +// @if $variant != 'bootstrap' { +// --focus-foreground: #{var-get($theme, 'color-expression-group-and')}; +// --hover-foreground: #{var-get($theme, 'color-expression-group-and')}; +// --icon-color-hover: #{var-get($theme, 'color-expression-group-and')}; +// --focus-hover-foreground: #{var-get($theme, 'color-expression-group-and')}; +// --active-foreground: #{var-get($theme, 'color-expression-group-and')}; +// } @else { +// $bootstrap-foreground-lightness: if($theme-variant == 'light', 34%, 78% ); +// +// --focus-hover-background: transparent; +// --focus-visible-background: transparent; +// --focus-background: transparent; +// --active-background: transparent; +// --hover-background: transparent; +// --background: transparent; +// --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / .5); +// +// --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// } +// } +// } +// +// %filter-tree__button--or { +// &[igxButton='flat'] { +// @if $variant == 'material' or $variant == 'indigo' { +// --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus-hover}); +// --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); +// --focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); +// --active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); +// --hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover}); +// --background: transparent; +// } +// +// @if $variant == 'fluent' { +// --background: transparent; +// --focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// --focus-visible-background: transparent; +// --focus-background: transparent; +// --active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// --hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// } +// +// --foreground: #{var-get($theme, 'color-expression-group-or')}; +// --focus-visible-foreground: #{var-get($theme, 'color-expression-group-or')}; +// --icon-color: #{var-get($theme, 'color-expression-group-or')}; +// +// @if $variant != 'bootstrap' { +// --focus-foreground: #{var-get($theme, 'color-expression-group-or')}; +// --hover-foreground: #{var-get($theme, 'color-expression-group-or')}; +// --icon-color-hover: #{var-get($theme, 'color-expression-group-or')}; +// --focus-hover-foreground: #{var-get($theme, 'color-expression-group-or')}; +// --active-foreground: #{var-get($theme, 'color-expression-group-or')}; +// } @else { +// $bootstrap-foreground-lightness: if($theme-variant == 'light', 14%, 47%); +// +// --focus-hover-background: transparent; +// --focus-visible-background: transparent; +// --focus-background: transparent; +// --active-background: transparent; +// --hover-background: transparent; +// --background: transparent; +// --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / .5); +// +// --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// } +// } +// } +// +// %filter-tree__expressions { +// display: flex; +// flex-direction: column; +// align-items: flex-start; +// flex-grow: 1; +// gap: rem(8px); +// } +// +// %filter-tree__expression-section { +// $spacing: rem(16px); +// display: flex; +// flex-direction: column; +// width: calc(100% - #{$spacing}); +// gap: rem(8px); +// margin-inline-start: $spacing; +// +// &:empty { +// display: none; +// } +// } +// +// %filter-tree__expression-item { +// display: flex; +// align-items: center; +// width: 100%; +// gap: rem(8px); +// position: relative; +// +// igx-chip { +// --ig-size: 3; +// +// @if $variant != 'indigo' { +// igx-icon { +// --component-size: 1; +// } +// } +// } +// +// > igx-chip { +// %filter-tree__expression-column { +// padding-inline: pad-inline(rem(3px), rem(6px), rem(8px)); +// } +// +// %filter-tree__expression-condition { +// padding-inline-start: pad-inline(rem(3px), rem(6px), rem(8px)); +// } +// +// igx-prefix { +// display: flex; +// } +// +// .igx-chip__end { +// gap: sizable(rem(3px), rem(6px), rem(8px)); +// } +// } +// } +// +// +// %filter-tree__expression-item-ghost { +// .igx-chip__item { +// @include type-style('body-2'); +// +// --ig-body-2-text-transform: unset; +// +// padding-inline: rem(32px); +// +// color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900)); +// border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300)); +// background: transparent; +// } +// } +// +// %filter-tree__expression-item-keyboard-ghost { +// .igx-chip__item { +// box-shadow: var(--ghost-shadow); +// background: var(--ghost-background); +// color: var(--focus-text-color); +// } +// +// .igx-chip:hover { +// .igx-chip__item { +// box-shadow: var(--ghost-shadow); +// background: var(--ghost-background); +// color: var(--focus-text-color); +// +// @if $variant == 'indigo' { +// border-color: var(--border-color); +// } +// } +// } +// } +// +// %filter-tree__expression-column { +// padding: 0 rem(8px); +// } +// +// %filter-tree__expression-actions { +// display: inline-flex; +// gap: if($variant != 'indigo', rem(16px), rem(8px)); +// +// span { +// display: inline-flex; +// } +// +// %igx-icon-button-display { +// --ig-size: #{if($variant != 'bootstrap', 2, 1)}; +// }; +// } +// +// %filter-tree__expression-condition { +// opacity: if($variant != 'indigo', .6, .8); +// } +// +// %filter-tree__buttons { +// --ig-size: 1; +// +// display: flex; +// align-items: center; +// gap: rem(8px); +// +// [igxbutton='flat'] { +// padding-block: 0; +// border: none +// } +// } +// +// %filter-tree__inputs { +// --ig-size: #{if($variant == 'indigo' or $variant == 'bootstrap', 2, 1)}; +// +// display: flex; +// align-items: flex-end; +// gap: rem(16px); +// width: 100%; +// border-radius: inherit; +// +// &:empty { +// display: none; +// } +// } +// +// %filter-tree__inputs-field { +// display: flex; +// flex-direction: column; +// gap: rem(4px); +// max-width: rem(250px); +// width: 100%; +// } +// +// %advanced-filter__label { +// @include type-style('body-2'); +// +// color: var-get($theme, 'label-foreground'); +// } +// +// %filter-tree__inputs-actions { +// --ig-size: 2; +// +// display: flex; +// gap: rem(8px); +// align-items: center; +// width: auto; +// align-self: center; +// +// [igxIconButton] { +// transition: none; +// } +// } +// +// %filter-con-menu__delete-btn { +// color: color(null, 'error'); +// @if $bootstrap-theme { +// border-color: color(null, 'error'); +// } +// +// &:hover, +// &:focus { +// @if $bootstrap-theme { +// background: color(null, 'error'); +// border-color: color(null, 'error'); +// color: color(null, 'gray', 100); +// } @else { +// color: color(null, 'error'); +// } +// } +// } +// +// %filter-con-menu__close-btn { +// position: absolute; +// top: 0; +// inset-inline-start: 100%; +// transform: translate(-50%, -50%); +// background-color: var-get($theme, 'background'); +// border: rem(1px) solid color(null, 'gray', 200); +// +// &:hover, +// &:focus { +// @if $not-bootstrap-theme { +// background-color: var-get($theme, 'background'); +// } +// } +// } +// +// %advanced-filter--inline { +// display: flex; +// flex-direction: column; +// width: 100%; +// max-width: 100%; +// height: inherit; +// max-height: inherit; +// min-width: rem(480px); +// box-shadow: none; +// +// %advanced-filter__main { +// min-height: initial; +// max-height: initial; +// flex-grow: 1; +// } +// } +//} +// +///// Adds typography styles for the igx-query-builder component. +///// Uses the 'h6' category from the typographic scale. +///// @group typography +///// @param {Map} $categories [(title: 'h6')] - The categories from the typographic scale used for type styles. +//@mixin query-builder-typography( +// $categories: (title: 'h6') +//) { +// $title: map.get($categories, 'title'); +// +// %advanced-filter__title { +// @include type-style($title) { +// margin: 0; +// } +// } +//} diff --git a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss index f3a76d5877a..230309a9b30 100644 --- a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss @@ -451,13 +451,13 @@ // @include expansion-panel($expansion-panel-theme-map); // } - @if is-used('igx-grid', $exclude) { - $grid-theme-map: grid-theme( - $schema: $schema, - ); - $grid-theme-map: meta.call($theme-handler, $grid-theme-map); - @include grid($grid-theme-map); - } + //@if is-used('igx-grid', $exclude) { + // $grid-theme-map: grid-theme( + // $schema: $schema, + // ); + // $grid-theme-map: meta.call($theme-handler, $grid-theme-map); + // @include grid($grid-theme-map); + //} // @if is-used('igx-grid-summary', $exclude) { // $grid-summary-theme-map: grid-summary-theme( @@ -610,16 +610,16 @@ // @include radio($radio-theme-map); // } - @if is-used('igx-query-builder', $exclude) { - $query-builder-theme-map: query-builder-theme( - $schema: $schema, - ); - $query-builder-theme-map: meta.call( - $theme-handler, - $query-builder-theme-map - ); - @include query-builder($query-builder-theme-map); - } + //@if is-used('igx-query-builder', $exclude) { + // $query-builder-theme-map: query-builder-theme( + // $schema: $schema, + // ); + // $query-builder-theme-map: meta.call( + // $theme-handler, + // $query-builder-theme-map + // ); + // @include query-builder($query-builder-theme-map); + //} @if is-used('ig-scrollbar', $exclude) { $scrollbar-theme-map: scrollbar-theme( diff --git a/projects/igniteui-angular/core/src/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/core/src/core/styles/typography/_bootstrap.scss index a914c15ea23..88baaf870a7 100644 --- a/projects/igniteui-angular/core/src/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/core/src/core/styles/typography/_bootstrap.scss @@ -77,7 +77,7 @@ // description: 'subtitle-2', // body: 'body-2' // )); - @include excel-filtering-typography(); + //@include excel-filtering-typography(); @include icon-button-typography(); // @include input-group-typography($categories: ( // helper-text: 'body-2', @@ -120,7 +120,7 @@ @include label-typography($categories: ( label: 'body-1' )); - @include query-builder-typography($categories: ( - title: 'h5' - )); + //@include query-builder-typography($categories: ( + // title: 'h5' + //)); } diff --git a/projects/igniteui-angular/core/src/core/styles/typography/_fluent.scss b/projects/igniteui-angular/core/src/core/styles/typography/_fluent.scss index 2406ef46d3c..270fb80517a 100644 --- a/projects/igniteui-angular/core/src/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/core/src/core/styles/typography/_fluent.scss @@ -78,7 +78,7 @@ // description: 'body-2', // body: 'caption' // )); - @include excel-filtering-typography(); + //@include excel-filtering-typography(); @include icon-button-typography(); // @include input-group-typography($categories: ( // helper-text: 'caption', @@ -124,5 +124,5 @@ @include label-typography($categories: ( label: 'subtitle-2' )); - @include query-builder-typography(); + //@include query-builder-typography(); } diff --git a/projects/igniteui-angular/core/src/core/styles/typography/_indigo.scss b/projects/igniteui-angular/core/src/core/styles/typography/_indigo.scss index 2978e22e39f..6d9b0b8cd86 100644 --- a/projects/igniteui-angular/core/src/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/core/src/core/styles/typography/_indigo.scss @@ -71,7 +71,7 @@ // body: 'body-2', // description: 'body-2', // )); - @include excel-filtering-typography(); + //@include excel-filtering-typography(); @include icon-button-typography(); //@include input-group-typography($categories: ( // helper-text: 'caption', @@ -128,7 +128,7 @@ @include label-typography($categories: ( label: 'caption' )); - @include query-builder-typography($categories: ( - title: 'h5' - )); + //@include query-builder-typography($categories: ( + // title: 'h5' + //)); } diff --git a/projects/igniteui-angular/core/src/core/styles/typography/_material.scss b/projects/igniteui-angular/core/src/core/styles/typography/_material.scss index 0135d721a77..90266f83e33 100644 --- a/projects/igniteui-angular/core/src/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/core/src/core/styles/typography/_material.scss @@ -50,7 +50,7 @@ @include dock-manager-typography(); // @include drop-down-typography(); // @include expansion-panel-typography(); - @include excel-filtering-typography(); + //@include excel-filtering-typography(); @include icon-button-typography(); // @include input-group-typography(); // @include linear-bar-typography(); @@ -68,6 +68,6 @@ @include tooltip-typography(); // @include tree-typography(); @include label-typography(); - @include query-builder-typography(); + //@include query-builder-typography(); @include file-input-typography(); } diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts index 166248f9aa4..981ab976abd 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts @@ -15,7 +15,7 @@ import { ViewChild, ViewRef, DOCUMENT, - inject + inject, ViewEncapsulation } from '@angular/core'; import { Subscription } from 'rxjs'; import { GridSelectionMode } from '../../common/enums'; @@ -62,6 +62,8 @@ export class IgxExcelStyleFilterOperationsTemplateDirective { } providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], selector: 'igx-grid-excel-style-filtering', templateUrl: './excel-style-filtering.component.html', + styleUrls: ['./excel-style-filtering.component.css'], + encapsulation: ViewEncapsulation.None, imports: [IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleSearchComponent, NgClass] }) export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent implements AfterViewInit, OnDestroy { diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss new file mode 100644 index 00000000000..1d5867c23d6 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss @@ -0,0 +1,463 @@ +@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 'igniteui-theming/sass/elevations/functions' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $material; + +$tree-node-indent: ( + comfortable: #{rem(16px)}, + cosy: #{rem(8px)}, + compact: #{rem(4px)} +); + +$tree-node-expander-size: #{rem(20px)}; + +$tree-node-height: ( + comfortable: rem(40px), + cosy: rem(32px), + compact: rem(24px) +); + +$checkbox-indent: ( + comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}), + cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}), + compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}), +); + +@include layer(base) { + %grid-excel-actions__action { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: pad-block(rem(4px), rem(8px), rem(8px)); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + cursor: pointer; + + // TODO MOVE excel-filtering-actions-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-foreground'); + color: color($color: 'gray', $variant: 700); + + outline-style: none; + + &:hover, + &:focus { + // TODO MOVE excel-filtering-actions-hover-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-hover-foreground'); + color: color($color: 'gray', $variant: 700); + + background: color($color: 'gray', $variant: 100); + } + + [dir='rtl'] & { + igx-icon { + transform: scaleX(-1); + } + } + } + + %grid-excel-action--compact { + display: flex; + align-items: center; + justify-content: space-between; + + header { + margin-inline-end: auto; + } + } + + %grid-excel-sort-move { + display: block; + padding-block: pad-block(rem(4px), rem(8px), rem(8px)); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + + header { + @include type-style('overline'); + + // TODO MOVE excel-filtering-subheader-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-subheader-foreground'); + color: color($color: 'gray', $variant: 700); + + margin-block-end: rem(4px); + } + + igx-icon { + --component-size: 1; + + display: initial; + width: var(--size) !important; + height: var(--size) !important; + font-size: var(--size) !important; + } + } + + @include b(igx-excel-filter) { + --component-size: var(--ig-size, var(--ig-size-large)); + + display: block; + overflow: auto; + width: rem(320px); + min-width: rem(320px); + height: 100%; + flex-grow: 1; + box-shadow: elevation(12); + + @include e(sizing) { + @include sizable(); + + min-height: sizable(rem(330px), rem(465px), rem(645px)); + max-height: sizable(rem(405px), rem(565px), rem(775px)); + } + + @include e(menu) { + --component-size: var(--ig-size, var(--ig-size-large)); + + display: flex; + flex-direction: column; + height: 100%; + + // TODO: The border-radius should not be hardcoded. + border-radius: border-radius(rem(4px)); + + background: var(--filtering-row-background); + + .igx-button-group { + --elevation: none !important; + + + --item-background: var(--filtering-row-background); + + --item-hover-background: #{color($color: 'gray', $variant: 100)} !important; + --item-selected-background: #{color($color: 'gray', $variant: 100)} !important; + --item-text-color: #{color($color: 'gray', $variant: 700)} !important; + --item-icon-color: #{color($color: 'gray', $variant: 700)} !important; + --item-hover-text-color: #{color($color: 'gray', $variant: 800)} !important; + --item-hover-icon-color: #{color($color: 'gray', $variant: 800)} !important; + --item-selected-text-color: color($color: 'secondary', $variant: 500) !important; + --item-selected-icon-color: color($color: 'secondary', $variant: 500) !important; + --item-selected-hover-icon-color: contrast-color($color: 'gray', $variant: 50) !important; + --item-border-color: transparent !important; + --item-hover-border-color: transparent !important; + --item-focused-border-color: transparent !important; + --item-selected-border-color: transparent !important; + --item-selected-hover-border-color: transparent !important; + --item-disabled-border: transparent !important; + --disabled-selected-border-color: transparent !important; + } + + .igx-tree-node__wrapper { + padding: 0; + } + + igx-chips-area { + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); + padding-block-end: 0; + gap: sizable(rem(4px), rem(4px), rem(8px)); + } + + // TODO SEE IF THIS IS THE BEST WAY + //@include tree(tree-theme( + // $background: color($color: 'surface'), + // $background-selected: color($color: 'surface'), + // $background-active: color($color: 'surface'), + // $background-active-selected: color($color: 'surface'), + // $foreground: contrast-color($color: 'surface'), + // $foreground-selected: contrast-color($color: 'surface'), + // $foreground-active: contrast-color($color: 'surface'), + // $foreground-active-selected: contrast-color($color: 'surface'), + //)); + } + + @include e(menu-header) { + display: flex; + align-items: center; + padding: pad(rem(4px), rem(8px), rem(16px)); + + > h4 { + @include type-style('h6'); + } + + // TODO MOVE excel-filtering-header-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-header-foreground'); + color: color($color: 'gray', $variant: 700); + } + + @include e(menu-main) { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; + padding: pad(rem(4px), rem(8px), rem(16px)); + gap: sizable(rem(4px), rem(8px), rem(16px)); + + igx-list { + flex-grow: 1; + overflow: hidden; + margin-inline: calc(#{sizable(rem(-4px), rem(-8px), rem(-16px))} * -1); + border: 0; + border-top: rem(1px) dashed color($color: 'gray', $variant: 300); + border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); + } + } + + @include e(tree) { + background: color($color: 'surface'); + overflow-y: auto; + margin-inline: calc(#{pad-inline(rem(-4px), rem(-8px), rem(-16px))} * -1); + margin-block: 0; + flex: 1; + border-top: rem(1px) dashed color($color: 'gray', $variant: 300); + border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); + + igx-icon { + width: var(--ig-icon-size, #{$tree-node-expander-size}); + height: var(--ig-icon-size, #{$tree-node-expander-size}); + font-size: var(--ig-icon-size, #{$tree-node-expander-size}); + } + + > igx-checkbox, + .igx-tree-node__wrapper { + height: #{sizable( + map.get($tree-node-height, 'compact'), + map.get($tree-node-height, 'cosy'), + map.get($tree-node-height, 'comfortable') + )}; + + min-height: #{sizable( + map.get($tree-node-height, 'compact'), + map.get($tree-node-height, 'cosy'), + map.get($tree-node-height, 'comfortable') + )}; + } + + .igx-tree-node__toggle-button { + min-width: rem(20px); + margin-inline-start: pad-inline( + map.get($tree-node-indent, 'compact'), + map.get($tree-node-indent, 'cosy'), + map.get($tree-node-indent, 'comfortable') + ); + margin-inline-end: pad-inline(rem(4px), rem(8px)); + } + + .igx-tree { + overflow-y: hidden; + } + } + + @include e(tree-alike) { + background: color($color: 'surface'); + display: flex; + flex-direction: column; + z-index: 1; + } + + @include e(tree-alike-item) { + display: flex; + align-items: center; + height: sizable( + map.get($tree-node-height, 'compact'), + map.get($tree-node-height, 'cosy'), + map.get($tree-node-height, 'comfortable') + ); + background: color($color: 'surface'); + + &:hover, + &:focus { + background: color($color: 'gray', $variant: 200); + } + + > igx-checkbox { + margin-inline-start: pad-inline( + map.get($checkbox-indent, 'compact'), + map.get($checkbox-indent, 'cosy'), + map.get($checkbox-indent, 'comfortable') + ); + } + } + + @include e(sort) { + @extend %grid-excel-sort !optional; + @extend %grid-excel-sort-move !optional; + + .igx-button-group { + [dir='rtl'] & { + flex-direction: row-reverse; + + // stylelint-disable-next-line max-nesting-depth + igx-icon, + [igxButton] { + direction: ltr; + } + // stylelint-enable-next-line max-nesting-depth + } + } + } + + @include e(move) { + @extend %grid-excel-sort-move !optional; + } + + @include e(actions-pin) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-pin, $m: disabled) { + @extend %grid-excel-actions__action !optional; + + // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); + color: color($color: 'gray', $variant: 400); + + pointer-events: none; + } + + @include e(actions-unpin) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-hide) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-select) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-selected) { + @extend %grid-excel-actions__action !optional; + + igx-icon { + color: color($color: 'secondary', $variant: 500); + } + } + + @include e(actions-filter) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-filter, $m: active) { + @extend %grid-excel-actions__action !optional; + + background: color($color: 'gray', $variant: 100); + + // TODO MOVE excel-filtering-actions-hover-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-hover-foreground'); + color: color($color: 'gray', $variant: 700); + } + + @include e(actions-clear) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear, $m: disabled) { + @extend %grid-excel-actions__action !optional; + + // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); + color: color($color: 'gray', $variant: 400); + + pointer-events: none; + } + + @include e(menu-header-actions) { + display: flex; + margin-inline-start: auto; + gap: rem(4px); + } + + // Filtering + @include e(secondary-header) { + border-block-end: rem(1px) solid color($color: 'gray', $variant: 300); + + > h4 { + @include type-style('h6') + } + } + + @include e(filter-results) { + position: absolute; + width: rem(1px); + height: rem(1px); + overflow: hidden; + } + + @include e(menu-footer) { + display: flex; + justify-content: space-between; + } + + @include e(apply) { + flex-grow: 1; + + [igxButton] { + width: 100%; + } + } + + @include e(cancel) { + flex-grow: 1; + + [igxButton] { + width: 100%; + } + } + + @include m(inline) { + box-shadow: none; + width: 100%; + } + + @include e(menu, $m: compact) { + .igx-excel-filter__sort { + @extend %grid-excel-action--compact; + + igx-buttongroup { + width: rem(208px); + } + + header { + @include type-style('body-2'); + } + } + + igx-excel-filter__move { + @extend %grid-excel-action--compact; + + igx-buttongroup { + width: rem(208px); + } + + header { + @include type-style('body-2'); + + text-transform: capitalize; + + } + } + + .igx-excel-filter__menu-header { + @include type-style('subtitle-1') + } + + .igx-excel-filter__menu-header-actions { + span { + @include type-style('body-2'); + } + } + + .igx-checkbox__label { + @include type-style('body-2'); + } + } + + @include e(clear) { + flex-grow: 1; + } + } +} diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss new file mode 100644 index 00000000000..c6dfd747325 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss @@ -0,0 +1,7 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; +@use 'indigo'; + +$tokens: meta.module-variables(tokens); +@include themes(igx-excel-filter, $tokens, dark); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss new file mode 100644 index 00000000000..5fe4866f646 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss @@ -0,0 +1,81 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/elevations' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-excel-filter, indigo, dark) { + %grid-excel-actions__action { + background: contrast-color($color: 'gray', $variant: 50, $opacity: .1); + + &:hover, + &:focus { + igx-icon { + color: contrast-color($color: 'gray', $variant: 50, $opacity: .8); + + } + } + + igx-icon { + color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); + } + } + + @include e(actions-pin) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-pin, $m: disabled) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-unpin) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-hide) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-select) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-selected) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-filter) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-filter, $m: active) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear, $m: disabled) { + @extend %grid-excel-actions__action !optional; + } + + @include e(menu) { + background: color($color: 'gray', $variant: 50); + + .igx-button-group { + --item-text-color: #{contrast-color($color: 'surface', $variant: 500)}; + } + } + + @include e(menu-main) { + border-block: rem(1px) dashed color($color: 'gray', $variant: 100); + } + + @include e(tree) { + %igx-excel-filter__tree { + border-block: rem(1px) dashed color($color: 'gray', $variant: 100); + } + } +} diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss new file mode 100644 index 00000000000..e2944e3883f --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-filtering' as *; + +$material: digest-schema($dark-material-grid-filtering); +$bootstrap: digest-schema($dark-bootstrap-grid-filtering); +$fluent: digest-schema($dark-fluent-grid-filtering); +$indigo: digest-schema($dark-indigo-grid-filtering); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_index.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_index.scss new file mode 100644 index 00000000000..7aa5f25945f --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/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-excel-filter, $tokens, light); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss new file mode 100644 index 00000000000..c481da18361 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid-filtering' as *; + +$base: digest-schema($light-grid-filtering); +$material: digest-schema($material-grid-filtering); +$bootstrap: digest-schema($bootstrap-grid-filtering); +$fluent: digest-schema($fluent-grid-filtering); +$indigo: digest-schema($indigo-grid-filtering); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..06e696ef72c --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss @@ -0,0 +1,31 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/typography/mixins' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-excel-filter, bootstrap) { + @include e(secondary-header) { + border-block-end: rem(1px) solid color($color: 'gray', $variant: 100); + } + + @include e(secondary-footer) { + padding-inline: pad-inline(rem(16px)); + padding-block: pad-block(rem(16px)); + border-top: rem(1px) solid color($color: 'gray', $variant: 300); + } + + @include e(menu-main) { + igx-list { + border-top: rem(1px) dashed var(--ig-gray-100); + border-bottom: rem(1px) dashed var(--ig-gray-100); + } + } + + @include e(menu-header) { + > h4 { + @include type-style('subtitle-1'); + } + } +} + diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss new file mode 100644 index 00000000000..b702498a688 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss @@ -0,0 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-excel-filter, fluent) { + @include m(menu) { + .igx-button-group { + --item-selected-hover-icon-color: color($color: 'secondary', $variant: 500); + --item-focused-border-color: color($color: 'gray', $variant: 700); + } + } +} diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss new file mode 100644 index 00000000000..ca5fbacd686 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss @@ -0,0 +1,182 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +// TODO type style is throwing an error + +@include themed-block(igx-excel-filter, indigo) { + %grid-excel-actions__action { + padding-block: pad-block(rem(4px), rem(6px), rem(8px)); + padding-inline: pad-inline(rem(12px)); + margin-inline: rem(8px); + margin-block-end: rem(4px); + border-radius: rem(4px); + + &:hover, + &:focus { + background: color($color: 'gray', $variant: 200); + + igx-icon { + color: color($color: 'gray', $variant: 700); + } + } + + + igx-icon { + --component-size: 2; + + color: color($color: 'gray', $variant: 600); + } + } + + @include e(actions-pin) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-pin, $m: disabled) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-unpin) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-hide) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-select) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-selected) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-filter) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-filter, $m: active) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear, $m: disabled) { + @extend %grid-excel-actions__action !optional; + } + + %grid-excel-sort-move { + padding-inline: pad-inline(rem(16px)); + + header { + margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important; + text-transform: capitalize !important; + } + + igx-icon { + --component-size: 2; + } + } + + @include e(menu) { + background: contrast-color($color: 'gray', $variant: 900); + + .igx-button-group__item { + &:not(:nth-child(1)) { + margin: 0; + } + } + + .igx-button-group { + --item-background: transparent !important; + --border-color: transparent !important; + --item-border-color: transparent !important; + --item-focused-border-color: transparent !important; + --item-hover-border-color: transparent !important; + --item-selected-border-color: transparent !important; + --item-selected-hover-border-color: transparent !important; + --item-disabled-border: transparent !important; + --disabled-selected-border-color: transparent !important; + --elevation: none !important; + --item-selected-text-color: contrast-color($color: 'surface') !important; + --item-selected-icon-color: contrast-color($color: 'surface') !important; + } + } + + @include e(menu-header) { + padding: pad-block(rem(16px)) pad-inline(rem(16px)) pad-block(sizable(rem(8px), rem(12px), rem(16px))); + } + + @include e(menu-main) { + padding: pad(rem(16px)); + gap: sizable(rem(16px)); + + igx-list { + --background: #{color($color: 'surface', $variant: 500)}; + + margin-inline: calc(#{sizable(rem(-16px))} * -1); + + // This is the only way to take the gap from the list, + // otherwise we have to hardcode it here + > div { + gap: inherit; + } + + igx-display-container { + display: flex; + flex-direction: column; + gap: inherit; + padding: pad(rem(8px)); + } + } + } + + @include e(actions-filter) { + margin-block-end: 0; + } + + @include e(actions-pin, $m: disabled) { + igx-icon { + // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); + color: color($color: 'gray', $variant: 900, $opacity: .2); + } + } + + @include e(actions-clear, $m: disabled) { + igx-icon { + // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); + color: color($color: 'gray', $variant: 900, $opacity: .2); + } + } + + @include e(sort) { + @extend %grid-excel-sort-move !optional; + + padding-block-end: 0; + } + + @include e(move) { + @extend %grid-excel-sort-move !optional; + + margin-block-end: sizable(rem(12px), rem(16px), rem(16px)); + } + + .igx-excel-filter__sort + igx-excel-filter__move { + margin-block-start: sizable(rem(4px), rem(8px), rem(8px)); + } + + .ig-typography .igx-excel-filter__menu--compact { + .igx-excel-filter__menu-header { + > h4 { + @include type-style('h6') + } + } + } +} diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss new file mode 100644 index 00000000000..8a7e8c265e6 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss @@ -0,0 +1,6 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-excel-filter, material) { +} diff --git a/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss index 1772c84108e..15763328d3f 100644 --- a/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss +++ b/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss @@ -8,75 +8,120 @@ $_theme: $material; @include layer(base) { - $cell-pin: ( - style: var-get($_theme, 'pinned-border-width') var-get($_theme, 'pinned-border-style'), - color: var-get($_theme, 'pinned-border-color') - ); - - @include b(igx-grid-summary) { - position: relative; - display: flex; - flex-direction: column; - flex: 1 1 0%; - padding-block: 0; - padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); - background: var-get($_theme, 'background-color', inherit); - overflow: hidden; - outline-style: none; - - @include e(item) { - display: flex; - align-items: center; - position: relative; - padding-block: pad(rem(0), rem(2px), rem(6px)); - padding-inline: 0; - font-size: rem(12px); - } - - @include e(label) { - @include ellipsis(); - - color: var-get($_theme, 'label-color'); - min-width: rem(30px); - margin-inline-end: rem(3px); - - &:hover { - color: var-get($_theme, 'label-hover-color'); - } - } - - @include e(result) { - @include ellipsis(); - - color: var-get($_theme, 'result-color'); - font-weight: 600; - flex: 1 1 auto; - text-align: end; - } - - @include m(pinned) { - position: relative; - z-index: 1; - } - - @include m(pinned-last) { - border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); - - @media print { - border-inline-end: map.get($cell-pin, 'style') #999; - } - } - - @include m(pinned-first) { - border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); - - @media print { - border-inline-start: map.get($cell-pin, 'style') #999; - } - } - - @include m(fw) { - flex-grow: 0; - } - } + $cell-pin: ( + style: var-get($_theme, 'pinned-border-width') var-get($_theme, 'pinned-border-style'), + color: var-get($_theme, 'pinned-border-color') + ); + + @include b(igx-grid-summary) { + position: relative; + display: flex; + flex-direction: column; + flex: 1 1 0%; + padding-block: 0; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + background: var-get($_theme, 'background-color', inherit); + overflow: hidden; + outline-style: none; + + // TODO MAYBE WE SHOULD RENAME THIS VARIABLES SO THE CAN BE USED IN THE SUMMARY AND grid BODY + border-inline-end: var(--header-border-width) var(--header-border-style) var-get($_theme, 'border-color'); + + @include e(item) { + display: flex; + align-items: center; + position: relative; + padding-block: pad(rem(0), rem(2px), rem(6px)); + padding-inline: 0; + font-size: rem(12px); + } + + @include e(label) { + @include ellipsis(); + + color: var-get($_theme, 'label-color'); + min-width: rem(30px); + margin-inline-end: rem(3px); + + &:hover { + color: var-get($_theme, 'label-hover-color'); + } + } + + @include e(result) { + @include ellipsis(); + + color: var-get($_theme, 'result-color'); + font-weight: 600; + flex: 1 1 auto; + text-align: end; + } + + @include m(pinned) { + position: relative; + z-index: 1; + } + + @include mx(active, pinned) { + &::after { + width: calc(100% - rem(1px)); + } + } + + @include m(pinned-first) { + border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); + + &:dir(ltr) { + box-shadow: inset rem(1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset rem(-1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + + @media print { + border-inline-start: map.get($cell-pin, 'style') #999; + } + } + + @include m(pinned-last) { + border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); + + &::after { + inset-inline-start: rem(1px); + } + + @media print { + border-inline-end: map.get($cell-pin, 'style') #999; + } + + &:dir(ltr) { + box-shadow: inset rem(-1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset rem(1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + } + + @include m(fw) { + flex-grow: 0; + } + + &::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + } + + @include m(active) { + &::after { + width: 100%; + height: 100%; + box-shadow: inset 0 0 0 rem(1px) var(--cell-active-border-color); + pointer-events: none; + } + } + } } diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.scss b/projects/igniteui-angular/grids/grid/src/grid.component.scss new file mode 100644 index 00000000000..41d4e903297 --- /dev/null +++ b/projects/igniteui-angular/grids/grid/src/grid.component.scss @@ -0,0 +1,4 @@ +@use '../../themes/base'; +@use '../../themes/shared'; +@use '../../themes/light'; +@use '../../themes/dark'; diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.ts b/projects/igniteui-angular/grids/grid/src/grid.component.ts index 83a38112d0b..e9c2c9a2251 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.ts @@ -1,7 +1,7 @@ import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren, QueryList, ViewChild, TemplateRef, DoCheck, AfterContentInit, HostBinding, - OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute + OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, ViewEncapsulation, } from '@angular/core'; import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { @@ -122,6 +122,8 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs { ], selector: 'igx-grid', templateUrl: './grid.component.html', + styleUrl: './grid.component.css', + encapsulation: ViewEncapsulation.None, imports: [ NgClass, NgStyle, diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss new file mode 100644 index 00000000000..41d4e903297 --- /dev/null +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss @@ -0,0 +1,4 @@ +@use '../../themes/base'; +@use '../../themes/shared'; +@use '../../themes/light'; +@use '../../themes/dark'; diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts index ba34f9ad9de..07d5e671132 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts @@ -1,4 +1,28 @@ -import { AfterContentInit, AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, DoCheck, ElementRef, HostBinding, Input, OnDestroy, OnInit, QueryList, reflectComponentType, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, inject } from '@angular/core'; +import { + AfterContentInit, + AfterViewInit, + booleanAttribute, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + CUSTOM_ELEMENTS_SCHEMA, + DoCheck, + ElementRef, + HostBinding, + Input, + OnDestroy, + OnInit, + QueryList, + reflectComponentType, + SimpleChanges, + TemplateRef, + ViewChild, + ViewChildren, + ViewContainerRef, + inject, + ViewEncapsulation, +} from '@angular/core'; import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common'; import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service'; @@ -46,6 +70,8 @@ let NEXT_ID = 0; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-child-grid-row', templateUrl: './child-grid-row.component.html', + styleUrl: 'hierarchical-grid.component.css', + encapsulation: ViewEncapsulation.None, imports: [NgClass] }) export class IgxChildGridRowComponent implements AfterViewInit, OnInit { @@ -273,6 +299,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid', templateUrl: 'hierarchical-grid.component.html', + styleUrl: 'hierarchical-grid.component.css', + encapsulation: ViewEncapsulation.None, providers: [ IgxGridCRUDService, IgxGridValidationService, diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss new file mode 100644 index 00000000000..41d4e903297 --- /dev/null +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss @@ -0,0 +1,4 @@ +@use '../../themes/base'; +@use '../../themes/shared'; +@use '../../themes/light'; +@use '../../themes/dark'; diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts index afc3939de51..9cd1f3356c2 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts @@ -1,56 +1,148 @@ -import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, ElementRef, HostBinding, Input, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren, ContentChild, createComponent, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, OnChanges, SimpleChanges, inject } from '@angular/core'; -import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; +import { + AfterContentInit, + AfterViewInit, + booleanAttribute, + ChangeDetectionStrategy, + Component, + ContentChild, + createComponent, + CUSTOM_ELEMENTS_SCHEMA, + ElementRef, + EventEmitter, + HostBinding, + inject, + Input, + OnChanges, + OnInit, + Output, + QueryList, + SimpleChanges, + TemplateRef, + ViewChild, + ViewChildren, + ViewEncapsulation, +} from '@angular/core'; +import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'; import { first, take, takeUntil } from 'rxjs/operators'; -import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxFilteringService, IgxGridNavigationService, IgxGridValidationService, IgxPivotDateDimension, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotUISettings, IPivotValue, IValuesChange, PivotDimensionType, PivotRowLayoutType, PivotSummaryPosition, PivotUtil } from 'igniteui-angular/grids/core'; -import { IgxGridSelectionService } from 'igniteui-angular/grids/core'; -import { GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxColumnTemplateContext, PivotGridType, RowType } from 'igniteui-angular/grids/core'; -import { IgxGridCRUDService } from 'igniteui-angular/grids/core'; -import { IgxGridSummaryService } from 'igniteui-angular/grids/core'; -import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; -import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; -import { IgxColumnComponent } from 'igniteui-angular/grids/core'; -import { FilterMode, GridPagingMode, GridSummaryPosition } from 'igniteui-angular/grids/core'; -import { WatchChanges } from 'igniteui-angular/grids/core'; -import { cloneArray, ColumnType, DataUtil, DefaultDataCloneStrategy, GridColumnDataType, GridSummaryCalculationMode, IDataCloneStrategy, IFilteringExpressionsTree, IFilteringOperation, IFilteringStrategy, ISortingExpression, OverlaySettings, resizeObservable, ɵSize, SortingDirection, IgxOverlayOutletDirective } from 'igniteui-angular/core'; import { - IGridEditEventArgs, + DEFAULT_PIVOT_KEYS, + DimensionValuesFilteringStrategy, + DropPosition, + FilterMode, + GridBaseAPIService, + GridPagingMode, + GridSummaryPosition, + GridType, ICellPosition, - IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, + IColumnMovingEndEventArgs, + IColumnMovingEventArgs, + IColumnMovingStartEventArgs, IColumnVisibilityChangedEventArgs, + IDimensionsChange, IGridEditDoneEventArgs, + IGridEditEventArgs, IGridToolbarExportEventArgs, + IGX_GRID_BASE, + IGX_GRID_SERVICE_BASE, + IgxColumnComponent, + IgxColumnGroupComponent, + IgxColumnMovingDropDirective, + IgxColumnResizingService, + IgxColumnTemplateContext, + IgxExcelStyleColumnOperationsTemplateDirective, + IgxExcelStyleFilterOperationsTemplateDirective, + IgxExcelStyleSearchComponent, + IgxFilteringService, + IgxGridBodyDirective, + IgxGridCRUDService, + IgxGridDragSelectDirective, + IgxGridExcelStyleFilteringComponent, + IgxGridNavigationService, + IgxGridRowClassesPipe, + IgxGridRowStylesPipe, + IgxGridSelectionService, + IgxGridSummaryService, + IgxGridValidationService, + IgxPivotColumnResizingService, + IgxPivotDateDimension, + IgxPivotGridColumnResizerComponent, + IgxPivotGridValueTemplateContext, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinRowEventArgs, + IPivotConfiguration, + IPivotConfigurationChangedEventArgs, + IPivotDimension, + IPivotUISettings, + IPivotValue, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, - IRowDragStartEventArgs + IRowDragStartEventArgs, + IValuesChange, + NoopPivotDimensionsStrategy, + PivotDimensionType, + PivotGridType, + PivotRowLayoutType, + PivotSummaryPosition, + PivotUtil, + RowType, + WatchChanges, } from 'igniteui-angular/grids/core'; -import { DropPosition } from 'igniteui-angular/grids/core'; -import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core'; -import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; +import { + cloneArray, + ColumnType, + DataUtil, + DefaultDataCloneStrategy, + GridColumnDataType, + GridSummaryCalculationMode, + IDataCloneStrategy, + IFilteringExpressionsTree, + IFilteringOperation, + IFilteringStrategy, + IgxOverlayOutletDirective, + ISortingExpression, + onResourceChangeHandle, + OverlaySettings, + resizeObservable, + SortingDirection, + State, + Transaction, + TransactionService, + ɵSize, +} from 'igniteui-angular/core'; import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service'; -import { IgxPivotColumnResizingService } from 'igniteui-angular/grids/core'; -import { State, Transaction, TransactionService, onResourceChangeHandle } from 'igniteui-angular/core'; import { IgxPivotFilteringService } from './pivot-filtering.service'; -import { GridBaseAPIService } from 'igniteui-angular/grids/core'; import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component'; -import { IgxPivotGridColumnResizerComponent } from 'igniteui-angular/grids/core'; import { PivotSortUtil } from './pivot-sort-util'; -import { IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotValueChipTemplateDirective } from './pivot-grid.directives'; -import { IgxPivotRowPipe, IgxPivotRowExpansionPipe, IgxPivotAutoTransform, IgxPivotColumnPipe, IgxPivotGridFilterPipe, IgxPivotGridSortingPipe, IgxPivotGridColumnSortingPipe, IgxPivotCellMergingPipe, IgxPivotGridHorizontalRowGrouping } from './pivot-grid.pipes'; -import { IgxGridRowClassesPipe, IgxGridRowStylesPipe } from 'igniteui-angular/grids/core'; -import { IgxExcelStyleSearchComponent } from 'igniteui-angular/grids/core'; +import { + IgxPivotRowDimensionHeaderTemplateDirective, + IgxPivotValueChipTemplateDirective, +} from './pivot-grid.directives'; +import { + IgxPivotAutoTransform, + IgxPivotCellMergingPipe, + IgxPivotColumnPipe, + IgxPivotGridColumnSortingPipe, + IgxPivotGridFilterPipe, + IgxPivotGridHorizontalRowGrouping, + IgxPivotGridSortingPipe, + IgxPivotRowExpansionPipe, + IgxPivotRowPipe, +} from './pivot-grid.pipes'; import { IgxPivotRowComponent } from './pivot-row.component'; -import { IgxColumnMovingDropDirective } from 'igniteui-angular/grids/core'; -import { IgxGridDragSelectDirective } from 'igniteui-angular/grids/core'; -import { IgxGridBodyDirective } from 'igniteui-angular/grids/core'; -import { IgxColumnResizingService } from 'igniteui-angular/grids/core'; import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; -import { IForOfDataChangingEventArgs, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxTemplateOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { + IForOfDataChangingEventArgs, + IgxForOfScrollSyncService, + IgxForOfSyncService, + IgxGridForOfDirective, + IgxTemplateOutletDirective, + IgxToggleDirective, +} from 'igniteui-angular/directives'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -98,6 +190,8 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104; preserveWhitespaces: false, selector: 'igx-pivot-grid', templateUrl: 'pivot-grid.component.html', + styleUrl: 'pivot-grid.component.css', + encapsulation: ViewEncapsulation.None, providers: [ IgxGridCRUDService, IgxGridValidationService, diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss new file mode 100644 index 00000000000..bea8703c526 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -0,0 +1,2854 @@ +/* stylelint-disable max-nesting-depth */ +@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 'igniteui-theming/sass/elevations' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $material; +$cell-font-size: rem(13px); +$cell-line-height: rem(16px); +$cell-editing-outline-width: rem(1px); +$grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); +$grid-body-column-border-odd: var-get($theme, 'header-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'body-column-border-color-odd'); +$grid-body-column-border-even: var-get($theme, 'header-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'body-column-border-color-even'); +$grid-active-state-border: var-get($theme, 'header-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'cell-active-border-color'); +$cell-padding-sm: rem(12px); +$cell-padding-md: rem(16px); +$cell-padding-lg: rem(24px); + +// The shadow size that simulates border glueth to the pinned border to make it thicker +$pinned-shadow-size: #{rem(1px)}; + +// Z-Indices +$z-grid-base: 1; +$z-grid-decoration: 2; +$z-grid-interaction: 3; +$z-grid-selection: 4; +$z-grid-edit-indicator: 5; +$z-grid-drag-ghost: 20; +$z-grid-scroll-drag: 25; +$z-grid-pinned-cell: 9999; +$z-grid-pinned-row: 10000; +$z-grid-scroll: 10001; +$z-grid-overlay: 10002; +$z-grid-loading: 10003; + +@include layer(base) { + // Base cell display - used for both data cells and header cells + %cell-display { + position: relative; + display: flex; + flex: 1 1 0%; + align-items: center; + outline-style: none; + color: inherit; + text-align: start; + min-height: var(--cell-height); + overflow: hidden; + padding-block: 0; + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially if the borders have a slide alpha + background-clip: padding-box !important; + + font-size: $cell-font-size; + line-height: $cell-line-height; + + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + } + + %cell-header { + flex-flow: row nowrap; + justify-content: space-between; + align-items: flex-end; + min-width: 0; + min-height: var(--header-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + font-size: var(--_grid-head-font-size); + font-weight: 600; + border-inline-end: $grid-header-border; + overflow: hidden; + transition: color 250ms ease-in-out; + outline-style: none; + } + + %cell-input-overrides { + // Have a more stable visual editing experience + > igx-input-group, + igx-combo, + igx-simple-combo, + igx-select, + igx-date-picker, + igx-time-picker { + position: relative; + height: auto; + width: 100% !important; + overflow: hidden; + z-index: 0; + } + + igx-input-group { + background: var-get($theme, 'cell-editing-background'); + + input { + height: 100%; + color: var-get($theme, 'cell-editing-foreground'); + } + + input:focus { + color: var-get($theme, 'cell-editing-focus-foreground'); + } + } + + igx-select, + igx-combo, + igx-simple-combo, + igx-time-picker, + igx-date-picker { + igx-input-group { + height: 100%; + } + } + + .igx-input-group__bundle { + background: var-get($theme, 'cell-editing-background') !important; + height: 100% !important; + min-height: 100% !important; + border: none !important; + + .igx-input-group__filler, + .igx-input-group__notch { + border: none !important; + } + + &::before { + content: none !important; + } + + &::after { + display: none; + } + } + + .igx-input-group--indigo .igx-input-group__bundle:hover, + .igx-input-group--indigo .igx-input-group__bundle:focus { + background: transparent; + } + + .igx-input-group__bundle-main, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end { + height: auto; + border: none !important; + border-radius: 0 !important; + box-shadow: none !important; + } + + .igx-input-group__bundle-main { + padding: 0; + } + + .igx-input-group__line { + display: none; + } + + igx-prefix, + igx-suffix { + background: inherit !important; + border-radius: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + border: none !important; + padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; + } + + .igx-input-group--indigo { + padding-inline: sizable(rem(6px), rem(8px), rem(12px)) !important; + + igx-prefix { + padding-inline-start: 0 !important; + } + + igx-suffix { + padding-inline-end: 0 !important; + } + } + + .igx-input-group__input { + padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; + } + + igx-date-range-picker { + height: 100%; + } + + igx-time-picker [igxLabel] { + display: none; + } + + input { + margin: 0 auto; + max-width: 100%; + } + + %form-group-input { + // ignore global typography + font-size: rem(13px) !important; + line-height: rem(16px) !important; + } + + .igx-input-group__input, + .igx-input-group__file-input, + .igx-input-group__textarea { + box-shadow: none !important; + border: none !important; + } + + .igx-input-group--disabled, + .igx-input-group--disabled igx-prefix, + .igx-input-group--disabled igx-suffix { + color: var-get($theme, 'cell-disabled-color'); + } + } + + @include b(igx-grid) { + @include sizable(); + + --component-size: var(--ig-size, var(--ig-size-large)); + + // TODO: This should be declared in the theme tokens + --grid-size: var(--component-size); + + --_expander-icon-width: #{rem(24px)}; + --_hierarchical-action-icon: #{rem(24px)}; + + --_hierarchical-indent-small: #{rem(12px)}; + --_hierarchical-indent-medium: #{rem(16px)}; + --_hierarchical-indent-large: #{rem(24px)}; + + --cell-height: #{sizable(rem(32px), rem(40px), rem(50px))}; + + // Derived size variables for header, group area, and tree indentation + --header-size: #{sizable(rem(32px), rem(40px), rem(50px))}; + --grouparea-size: #{sizable(rem(41px), rem(49px), rem(57px))}; + --ig-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))}; + + --_grid-head-font-size: #{rem(12px)}; + + // Core grid structure + position: relative; + display: grid; + grid-template-rows: auto auto auto 1fr auto auto; + grid-template-columns: 100%; + overflow: hidden; + box-shadow: var-get($theme, 'grid-elevation'); + outline-style: none; + z-index: $z-grid-base; + + // Grid caption + @include e(caption) { + display: flex; + align-items: center; + font-size: rem(20px); + line-height: rem(32px); + padding: rem(16px) rem(24px); + grid-row: 1; + } + + // Table body container + @include e(tbody) { + position: relative; + display: flex; + grid-row: 4; + overflow: hidden; + } + + // Table body content area + @include e(tbody-content) { + position: relative; + background: var-get($theme, 'content-background'); + color: var-get($theme, 'content-text-color'); + overflow: hidden; + z-index: $z-grid-base; + outline-style: none; + + &:focus { + outline: 0; + } + } + + // Table body message (empty state) + @include e(tbody-message) { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + color: var-get($theme, 'content-text-color'); + flex-direction: column; + padding: rem(24px); + } + + // Loading indicator + @include e(loading) { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + min-height: rem(100px); + } + + // Table body scrollbar + @include e(tbody-scrollbar) { + background: var-get($theme, 'content-background'); + border-inline-start: rem(1px) solid var-get($theme, 'row-border-color') ; + position: relative; + } + + // Table body scrollbar main section + @include e(tbody-scrollbar-main) { + position: relative; + } + + // Table body scrollbar start section + @include e(tbody-scrollbar-start) { + background: var-get($theme, 'header-background'); + } + + // Table body scrollbar end section + @include e(tbody-scrollbar-end) { + background: var-get($theme, 'header-background'); + } + + // Horizontal scroll container + @include e(scroll) { + grid-row: 6; + display: flex; + flex-flow: row nowrap; + width: 100%; + background: var-get($theme, 'header-background'); + z-index: $z-grid-scroll; + } + + // Scroll start section + @include e(scroll-start) { + background: var-get($theme, 'header-background'); + border-inline-end: $grid-header-border; + } + + @include e(scroll-end) { + background: var-get($theme, 'header-background'); + border-inline-start: $grid-header-border; + } + + // Scroll main section + @include e(scroll-main) { + igx-display-container { + height: 0; + } + } + + // Table footer + @include e(tfoot) { + position: relative; + display: flex; + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); + overflow: hidden; + outline-style: none; + grid-row: 5; + border-top: $grid-header-border; + z-index: $z-grid-scroll; + + .igx-grid__tr { + position: relative; + background: inherit; + color: inherit; + z-index: $z-grid-decoration; + + &:hover { + background: inherit; + color: inherit; + } + } + + > [aria-activedescendant] { + outline-style: none; + } + + &:focus { + outline: 0; + } + + &:empty { + display: none; + } + } + + // Table footer thumb (scrollbar) + @include e(tfoot-thumb) { + position: absolute; + top: 0; + inset-inline-end: 0; + background: var-get($theme, 'header-background'); + } + + // Grid footer + @include e(footer) { + grid-row: 7; + } + + // Base row element + @include e(tr) { + position: relative; + display: flex; + outline-style: none; + border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: padding-box !important; + + .igx-display-container { + overflow: visible !important; + flex: 1 !important; + min-width: 0; + } + + &:hover { + .igx-grid__td--column-selected { + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get($theme, 'row-selected-hover-background'); + } + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + border-inline-end-color: var-get($theme, 'body-column-hover-border-color'); + } + } + } + + @include e(tr, $not: (header, selected)) { + &:hover { + background: var-get($theme, 'row-hover-background'); + color: var-get($theme, 'row-hover-text-color'); + } + } + + // Row striping - odd rows + @include e(tr, $m: odd) { + background: var-get($theme, 'row-odd-background'); + color: var-get($theme, 'row-odd-text-color'); + + .igx-grid__tr-action { + border-inline-end-color: var-get($theme, 'header-border-color') !important; + border-block-end: 0 !important; + } + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + // The border is part of the body cells but the color of the border + // depends on the row background since we want it to be invisible unless a user change it + border-inline-end: $grid-body-column-border-odd; + } + } + + // Row striping - even rows + @include e(tr, $m: even) { + background: var-get($theme, 'row-even-background'); + color: var-get($theme, 'row-even-text-color'); + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + // The border is part of the body cells but the color of the border + // depends on the row background since we want it to be invisible unless a user change it + border-inline-end: $grid-body-column-border-even; + } + + .igx-grid__tr-action { + border-inline-end-color: var-get($theme, 'header-border-color') !important; + border-block-end: 0 !important; + } + } + + + // Selected row state + @include e(tr, $m: selected) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); + + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td--selected, + .igx-grid__td--pinned.igx-grid__td--selected { + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); + } + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + border-inline-end-color: var-get($theme, 'body-column-selected-border-color'); + } + + + &:hover { + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get($theme, 'row-selected-hover-background'); + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + border-inline-end-color: var-get($theme, 'body-column-hover-selected-border-color'); + } + } + } + + // Deleted row state - shows strikethrough text + @include e(tr, $m: deleted) { + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td-text { + font-style: italic; + color: color($color: 'error'); + text-decoration: line-through; + } + } + + // Highlighted row - shows left indicator bar + @include e(tr, $m: highlighted) { + position: relative; + + &::after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: rem(4px); + height: 100%; + background: var-get($theme, 'row-highlight'); + z-index: $z-grid-interaction; + } + + // When highlighted row is also edited, offset the edited indicator + &::before { + inset-inline-start: rem(4px); + } + } + + // Filtered row (tree grid) - subdued text color + @include e(tr, $m: filtered) { + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td-text { + color: var-get($theme, 'tree-filtered-text-color'); + } + } + + // Selected and filtered row combination (tree grid) + @include e(tr, $mods: (selected, filtered)) { + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td-text { + color: var-get($theme, 'tree-selected-filtered-row-text-color'); + } + } + + // Expanded row (hierarchical/tree grid) + @include e(tr, $m: expanded) { + border-bottom: none; + } + + // Pinned row + @include e(tr, $m: pinned) { + position: relative; + background: inherit; + z-index: $z-grid-pinned-row; + + .igx-grid__hierarchical-expander--empty { + border-inline-end: $grid-header-border; + } + } + + // Pinned row at top + @include e(tr, $m: pinned-top) { + border-bottom: rem(2px) solid var-get($theme, 'pinned-border-color') !important; + + .igx-grid__tr:last-of-type { + border-bottom: none; + } + } + + // Pinned row at bottom + @include e(tr, $m: pinned-bottom) { + border-top: rem(2px) solid var-get($theme, 'pinned-border-color') !important; + position: absolute; + bottom: 0; + } + + // Merged row (no bottom border) + @include e(tr, $m: merged) { + border-block-end: 0; + } + + // Merged row top + @include e(tr, $m: merged-top) { + position: absolute; + width: 100%; + } + + // Disabled row + @include e(tr, $m: disabled) { + .igx-grid__td-text { + color: var-get($theme, 'cell-disabled-color'); + } + } + + // Disabled row + @include e(tr-header-row) { + igx-pivot-row-header-group { + padding-inline-start: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-sm); + + .igx-grid-th { + border-block-end: 0; + } + } + } + + // Cell (idle) + @include e(td) { + @extend %cell-display; + @extend %cell-input-overrides; + + // Used for the active cell indicator + &::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + } + } + @include e(td, $m: centered) { + justify-content: center; + } + + @include e(td, $m: image) { + justify-content: center; + } + + @include e(td, $m: bool) { + display: flex; + flex-grow: 1; + justify-content: center; + + .igx-icon { + --component-size: 1; + } + + .igx-icon--error { + color: color($color: 'gray', $variant: 600); + } + } + + @include e(td, $m: bool-true) { + .igx-icon--success { + color: color($color: 'gray', $variant: 700); + } + } + + // Cell for fixed width columns (non-resizable) + @include e(td, $m: fw) { + flex-grow: 0; + outline-style: none; + + > .igx-icon { + --component-size: 3; + } + } + + // Cell (text wrapper) + @include e(td-text) { + @include ellipsis(); + pointer-events: none; + } + + // New cell (newly added) + @include e(td, $m: new) { + color: var-get($theme, 'cell-new-color'); + } + + // Edited cell (value has been modified) + @include e(td, $m: edited) { + .igx-grid__td-text { + font-style: italic; + color: var-get($theme, 'cell-edited-value-color'); + padding: 0 rem(1px); + } + } + + // Merged cell + @include e(td, $m: merged) { + z-index: $z-grid-base; + grid-row: 1 / -1; + } + + // Merged cell when selected + @include e(td, $m: merged-selected) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background') !important; + } + + // Merged cell when hovered + @include e(td, $m: merged-hovered) { + color: var-get($theme, 'row-hover-text-color'); + background: var-get($theme, 'row-hover-background') !important; + } + + // Merged cell when both selected and hovered + @include e(td, $mods: (merged-selected, merged-hovered)) { + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get( + $theme, + 'row-selected-hover-background' + ) !important; + } + + // Number cell (right-aligned) + @include e(td, $m: number) { + text-align: end; + justify-content: flex-end; + flex-grow: 1; + } + + // Pinned cell + @include e(td, $m: pinned) { + position: relative; + background: inherit; + z-index: $z-grid-pinned-cell; + } + + // First pinned column (left border) + @include e(td, $m: pinned-first) { + border-inline-start: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &::after { + width: calc(100% - $pinned-shadow-size); + inset-inline-end: 0; + inset-inline-start: unset; + } + } + + // Last pinned column (right border) + @include e(td, $m: pinned-last) { + border-inline-end: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + } + + // Pinned cell when selected + @include e(td, $mods: (pinned, selected)) { + color: var-get($theme, 'cell-selected-text-color'); + background: var-get($theme, 'cell-selected-background'); + } + + // Pinned cell when column is selected + @include e(td, $mods: (pinned, column-selected)) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); + + &:hover { + background: var-get($theme, 'row-selected-hover-background'); + color: var-get($theme, 'row-selected-text-color'); + } + } + + // First cell in row-pinned layout + @include e(td, $m: row-pinned-first) { + overflow: hidden; + } + + // Pinned chip spacing + @include e(td, $m: pinned-chip) { + margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px)); + } + + @include e(td, $m: active) { + &::after { + border: $grid-active-state-border; + } + } + + // Selected cell + @include e(td, $m: selected) { + color: var-get($theme, 'cell-selected-text-color'); + background: var-get($theme, 'cell-selected-background'); + + .igx-grid__tree-grouping-indicator { + &:hover { + color: var-get($theme, 'cell-selected-text-color'); + } + } + } + + // Column selected (entire column is selected) + @include e(td, $m: column-selected) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); + + &:hover { + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get($theme, 'row-selected-hover-background'); + } + } + + // Cross-selected (cell + column selected) + @include e(td, $mods: (selected, column-selected)) { + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); + + &:hover { + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); + } + } + + @include e(td, $m: editing) { + background: var-get($theme, 'cell-editing-background') !important; + padding-inline: rem(4px); + + &::after { + box-shadow: inset 0 0 0 #{$cell-editing-outline-width} + var-get($theme, 'edit-mode-color'); + } + + .igx-input-group { + --size: 100% !important; + --ig-input-group-border-color: transparent; + --ig-input-group-hover-border-color: transparent; + --ig-input-group-focused-border-color: transparent; + --ig-input-group-focused-secondary-color: transparent; + --ig-input-group-disabled-border-color: transparent; + + width: 100%; + overflow: hidden; + + .igx-input-group__bundle { + &::before, + &::after { + display: none; + } + } + + .igx-input-group__input { + --input-font-size: #{$cell-font-size}; + --input-line-height: #{$cell-line-height}; + + font-size: var(--input-font-size) !important; + line-height: var(--input-line-height) !important; + + } + } + + [aria-readonly='true'] { + color: var-get($theme, 'cell-disabled-color'); + + igx-icon { + color: var-get($theme, 'cell-disabled-color'); + } + } + } + + @include e(td, $mods: (editing, invalid)) { + .igx-input-group__bundle { + &:focus-within { + &::after { + border: none !important; + } + } + } + + &::after { + box-shadow: inset 0 0 0 #{$cell-editing-outline-width} + color($color: 'error') !important; + + top: calc($cell-editing-outline-width / 2); + height: calc(100% - $cell-editing-outline-width) + } + } + + @include e(td, $m: invalid) { + padding-inline-end: rem(4px) !important; + + > igx-icon { + --component-size: 1 !important; + + color: color($color: 'error'); + } + } + + @include e(td, $mods: (editing, valid)) { + &::after { + box-shadow: inset 0 0 0 $cell-editing-outline-width color($color: 'success'); + top: calc($cell-editing-outline-width / 2); + height: calc(100% - $cell-editing-outline-width) + } + } + + @include e(td, $m: valid) { + > igx-icon { + --component-size: 1 !important; + } + } + + // Row editing state - active edit mode on a row + @include e(tr, $m: edit) { + position: relative; + + &::after { + content: ''; + position: absolute; + height: 100%; + width: 100%; + inset: 0; + pointer-events: none; + user-select: none; + + // This is do to the pinned border 9999 z-index + z-index: $z-grid-pinned-row; + box-shadow: + inset 0 rem(1px) 0 0 var-get($theme, 'edit-mode-color'), + inset 0 rem(-1px) 0 0 var-get($theme, 'edit-mode-color'); + } + } + + // MRL (Multi-row layout) specific edit row adjustments + @include e(tr, $mods: (mrl, edit)) { + &:first-of-type::after { + top: 0; + z-index: $z-grid-edit-indicator; + } + } + + + // Dragging row state + @include e(tr, $m: drag) { + opacity: 0.5; + } + + // Ghost row during drag operation + @include e(tr, $m: ghost) { + background: var-get($theme, 'row-ghost-background'); + color: var-get($theme, 'row-drag-color'); + z-index: $z-grid-overlay; + } + + // Group row + @include e(tr, $m: group) { + position: relative; + background: var-get($theme, 'header-background') !important; + } + + // Inner row wrapper + @include e(tr, $m: inner) { + display: flex; + background: inherit; + } + + // Header row + @include e(tr, $m: header) { + display: flex; + align-items: center; + + igx-icon { + --component-size: 3; + } + } + + // Row add animation + @include e(tr, $m: add-animate) { + animation: scale-in-ver-center 0.2s + cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + // Edited row indicator - shows row has been modified + @include e(tr, $m: edited) { + &::before { + content: ''; + position: absolute; + width: rem(2px); + height: 100%; + z-index: $z-grid-pinned-row; + background: var-get($theme, 'edited-row-indicator'); + } + } + + // Row editing overlay outlet container + @include e(row-editing-outlet) { + z-index: $z-grid-pinned-row; + position: absolute; + } + + // Row container + @include e(tr-container) { + overflow: auto; + width: 100%; + border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + } + + // Active row container + @include e(tr-container, $m: active) { + border: $grid-active-state-border; + } + + // Action row (for row actions like edit, delete buttons) + @include e(tr-action) { + &:last-of-type { + border-inline-end: $grid-header-border; + min-height: var(--cell-height); + } + } + + // Tree grid grouping indicator (expand/collapse icon) + @include e(tree-grouping-indicator) { + display: flex; + align-items: center; + justify-content: center; + user-select: none; + outline-style: none; + margin-inline-end: rem(8px); + cursor: pointer; + color: var-get($theme, 'expand-icon-color'); + + &:hover { + color: var-get($theme, 'expand-icon-hover-color'); + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + + igx-icon { + --component-size: 3; + } + } + + // Tree grid loading indicator + @include e(tree-loading-indicator) { + width: rem(24px); + height: rem(24px); + margin-inline-end: rem(8px); + } + + // Row indentation for tree/grouping + @include e(row-indentation) { + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + border-inline-end: $grid-header-border; + background: inherit; + z-index: $z-grid-base; + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: padding-box !important; + } + + // Hierarchical grid expander (expand/collapse child grids) + @include e(hierarchical-expander) { + user-select: none; + background: inherit; + padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: $z-grid-interaction; + color: var-get($theme, 'expand-icon-color'); + + &:focus { + outline: none; + + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + &:hover { + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + igx-icon { + --component-size: 3; + color: var-get($theme, 'expand-icon-color'); + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + + // Empty hierarchical expander (no children) + @include e(hierarchical-expander, $m: empty) { + cursor: default; + pointer-events: none; + padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + + } + + // Hierarchical expander in header + @include e(hierarchical-expander, $m: header) { + background: inherit; + border-inline-end: $grid-header-border; + z-index: $z-grid-interaction; + + igx-icon { + display: flex; + align-items: center; + } + } + + // Hierarchical expander pushed to top + @include e(hierarchical-expander, $m: push) { + align-items: flex-start; + + igx-icon { + min-height: var(--header-size); + max-height: var(--header-size); + } + } + + // Hierarchical indent spacing + @include e(hierarchical-indent) { + $indent-sm: calc(2 * var(--_hierarchical-indent-small) + var(--_hierarchical-action-icon)); + $indent-md: calc(2 * var(--_hierarchical-indent-medium) + var(--_hierarchical-action-icon)); + $indent-lg: calc(2 * var(--_hierarchical-indent-large) + var(--_hierarchical-action-icon)); + + display: flex; + margin-inline-start: pad-inline($indent-sm, $indent-md, $indent-lg); + margin-inline-end: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + margin-block: pad-block(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + } + + // Hierarchical indent when scrolling + @include e(hierarchical-indent, $m: scroll) { + $indent-scroll-sm: calc(var(--_hierarchical-indent-small) + 18px); + $indent-scroll-md: calc(var(--_hierarchical-indent-medium) + 18px); + $indent-scroll-lg: calc(var(--_hierarchical-indent-large) + 18px); + + + margin-inline-end: pad-inline($indent-scroll-sm, $indent-scroll-md, $indent-scroll-lg); + } + + // Row indentation levels for tree/grouping (1-10) + @for $i from 1 through 10 { + @include e(row-indentation, $m: level-#{$i}) { + $level-sm: $i * rem(24px); + $level-md: $i * rem(32px); + $level-lg: $i * rem(36px); + + padding-inline-start: pad-inline( + #{$level-sm}, + #{$level-md}, + #{$level-lg} + ); + } + } + + // Header indentation for tree/grouping + @include e(header-indentation) { + position: relative; + padding-inline-end: sizable($cell-padding-sm, $cell-padding-md, $cell-padding-lg); + border-inline-end: $grid-header-border; + background: var-get($theme, 'header-background'); + z-index: $z-grid-selection; + height: 100%; + + igx-icon { + --component-size: 3; + } + } + + // Header indentation without border + @include e(header-indentation, $m: no-border) { + border-inline-end: rem(1px) solid transparent; + } + + // Checkbox padding + @include e(cbx-padding) { + display: flex; + align-items: center; + justify-content: center; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + } + + // Checkbox selection cell + @include e(cbx-selection) { + display: flex; + justify-content: center; + align-items: center; + background: inherit; + z-index: $z-grid-selection; + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: border-box !important; + } + + // Checkbox selection pushed to top (for header alignment) + @include e(cbx-selection, $m: push) { + align-items: flex-start; + padding-block-start: pad-block( + calc((rem(32px) - rem(20px)) / 2), + calc((rem(40px) - rem(20px)) / 2), + calc((rem(50px) - rem(20px)) / 2) + ); + } + + // Group row + @include e(group-row) { + background: var-get($theme, 'group-row-background'); + display: flex; + outline-style: none; + border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + min-height: var(--header-size); + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + inset: 0; + pointer-events: none; + user-select: none; + } + } + + // Active group row + @include e(group-row, $m: active) { + position: relative; + background: var-get($theme, 'group-row-selected-background'); + + &:hover { + background: var-get($theme, 'group-row-selected-background'); + } + + &::after { + border: $grid-active-state-border; + z-index: $z-grid-selection; + } + } + + // Group content area + @include e(group-content) { + display: flex; + align-items: center; + justify-content: flex-start; + flex: 1 1 auto; + padding-inline-start: sizable(rem(12px), rem(16px), rem(24px)); + border-inline-end: $grid-body-column-border-odd; + min-height: var(--cell-height); + + &:focus { + outline: transparent; + } + } + + // Grouping indicator (expand/collapse for groups) + @include e(grouping-indicator) { + position: relative; + display: flex; + user-select: none; + justify-content: center; + align-items: center; + z-index: $z-grid-base; + cursor: pointer; + padding-inline-end: rem(12px); + margin-inline-start: sizable(rem(12px), rem(16px), rem(24px)); + min-height: var(--header-size); + + igx-icon { + --component-size: 3; + color: var-get($theme, 'expand-icon-color'); + } + + &:hover, + &:focus { + outline-style: none; + + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + + // Group expand button (on row indentation) + @include e(group-expand-btn) { + position: absolute; + cursor: pointer; + user-select: none; + inset-block-start: calc(50% - var(--_expander-icon-width) / 2); + inset-inline-start: var(--_indicator-inline-inset); + + &:hover { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + // Group expand button pushed to top + @include e(group-expand-btn, $m: push) { + inset-block-start: sizable( + calc((rem(40px) - rem(12px)) / 2), + calc((rem(48px) - rem(12px)) / 2), + calc((rem(56px) - rem(12px)) / 2) + ); + } + + // Group row padding levels (1-10) - for nested groups + @for $i from 1 through 10 { + @include e(group-row, $m: padding-level-#{$i}) { + $indicator-padding-sm: $i * rem(12px); + $indicator-padding-md: $i * rem(16px); + $indicator-padding-lg: $i * rem(18px); + + .igx-grid__grouping-indicator { + padding-inline-start: sizable( + #{$indicator-padding-sm}, + #{$indicator-padding-md}, + #{$indicator-padding-lg} + ); + } + } + } + + // Multi-row layout block (MRL) + @include e(mrl-block) { + display: grid !important; + background: inherit; + position: relative; + } + + // Pivot grid super-compact mode + @include e(pivot, $m: super-compact) { + --ig-size: 1 !important; + + .igx-grid-th, + .igx-grid-thead__title, + .igx-grid__td { + padding: 0 rem(4px) !important; + min-height: rem(24px) !important; + height: rem(24px); + } + + .igx-grid-th, + .igx-grid-thead__title { + > * { + line-height: normal; + align-self: initial; + max-height: 100%; + } + } + + .igx-grid__tr-pivot--row-area { + padding-bottom: rem(4px); + } + } + + // Pivot row + @include e(tr-pivot) { + display: flex; + align-items: center; + background: inherit; + overflow: hidden; + z-index: $z-grid-interaction; + height: var(--header-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + border-inline-start: $grid-header-border; + border-bottom: $grid-header-border; + + igx-chips-area { + flex-wrap: nowrap; + width: auto; + + > * { + margin-inline-end: rem(4px); + } + + &:last-child { + margin-inline-end: 0; + } + } + } + + // Pivot filter toggle button + @include e(pivot-filter-toggle) { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + position: relative; + + > igx-badge { + position: absolute; + top: rem(-4px); + inset-inline-start: 60%; + width: rem(18px); + min-width: rem(18px); + height: rem(18px); + font-size: rem(10px); + pointer-events: none; + user-select: none; + } + } + + // Pivot empty chip area placeholder + @include e(pivot-empty-chip-area) { + line-height: normal; + font-size: rem(14px); + margin-inline-end: 0 !important; + } + + // Pivot row area + @include e(tr-pivot, $m: small-row-area) { + border-inline-start: 0; + } + + // Pivot row area + @include e(tr-pivot, $m: row-area) { + height: auto !important; + align-items: flex-end; + padding-bottom: pad-block(rem(8px), rem(12px), rem(16px)); + border-inline-start: 0; + border-bottom: 0; + } + + // Pivot filter container + @include e(tr-pivot, $m: filter-container) { + display: flex; + flex-direction: column; + } + + // Pivot chip drop indicator + @include e(tr-pivot, $m: chip_drop_indicator) { + width: rem(2px); + background: var-get($theme, 'resize-line-color'); + visibility: hidden; + } + + // Pivot drop row area + @include e(tr-pivot, $m: drop-row-area) { + flex-grow: 1; + } + + // Pivot filter row + @include e(tr-pivot, $m: filter) { + height: var(--header-size); + border-inline-start: 0; + } + + // Pivot group + @include e(tr-pivot-group) { + flex: 1; + } + + // Pivot column dimension leaf + @include e(tr-pivot, $m: columnDimensionLeaf) { + box-shadow: none; + + igx-grid-header { + border: none; + } + } + + // Pivot column multi-row span + @include e(tr-pivot, $m: columnMultiRowSpan) { + igx-grid-header { + > * { + visibility: hidden; + } + } + } + + // Pivot toggle icons + @include e(tr-pivot-toggle-icons) { + display: inline-flex !important; + } + + // ============================================================================ + // Drag & Drop Elements + // ============================================================================ + + // Drag indicator for reordering columns/rows + @include e(drag-indicator) { + display: flex; + align-items: center; + justify-content: center; + padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + min-height: var(--cell-height); + padding-block: 0; + flex: 0 0 auto; + background: inherit; + z-index: $z-grid-selection; + cursor: move; + border-inline-end: rem(1px) solid transparent; + + igx-icon { + --component-size: 3; + } + } + + // Drag indicator in header + @include e(drag-indicator, $m: header) { + border-inline-end: $grid-header-border; + } + + // Drag indicator off/disabled state + @include e(drag-indicator, $m: off) { + color: var-get($theme, 'row-drag-color'); + } + + // Ghost image shown while dragging + @include e(drag-ghost-image) { + position: absolute !important; + align-items: center !important; + background: var-get($theme, 'ghost-header-background') !important; + color: var-get($theme, 'ghost-header-text-color') !important; + border-inline-end: transparent !important; + min-width: rem(168px); + max-width: rem(320px); + height: var(--header-size); + min-height: var(--header-size); + padding-inline: pad-inline(rem(24px), rem(16px), rem(12px)); + top: rem(-10000px); + inset-inline-start: rem(-10000px); + border: none; + box-shadow: var(--drag-shadow); + overflow: hidden; + z-index: $z-grid-drag-ghost; + + .igx-grid-th__title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + flex: 1 0 0; + text-align: end; + color: var-get($theme, 'ghost-header-text-color') !important; + } + + .igx-grid-th__icons { + display: none; + } + + .igx-grid-thead__title { + border: none; + color: var-get($theme, 'ghost-header-text-color') !important; + background: transparent !important; + } + } + + // Ghost image icon + @include e(drag-ghost-image-icon) { + color: var-get($theme, 'ghost-header-icon-color'); + margin-inline-end: rem(12px); + } + + // Ghost image icon group (multiple columns) + @include e(drag-ghost-image-icon-group) { + color: var-get($theme, 'ghost-header-icon-color'); + padding: rem(24px); + padding-inline-end: 0; + margin-inline-end: rem(8px); + } + + // Drag column header (being dragged) + @include e(drag-col-header) { + background: var-get($theme, 'header-background'); + + .igx-grid-thead__title > *, + .igx-grid-th > * { + opacity: 0.4; + } + } + + // Scroll on drag indicators + @include e(scroll-on-drag-left) { + position: absolute; + width: rem(15px); + top: 0; + height: 100%; + z-index: $z-grid-scroll-drag; + inset-inline-start: 0; + } + + @include e(scroll-on-drag-right) { + position: absolute; + width: rem(15px); + top: 0; + height: 100%; + z-index: $z-grid-scroll-drag; + inset-inline-end: 0; + } + + @include e(scroll-on-drag-pinned) { + position: absolute; + width: rem(15px); + height: 100%; + top: 0; + z-index: $z-grid-scroll-drag; + } + + // ============================================================================ + // Filtering Elements + // ============================================================================ + + // Filtering row + @include e(filtering-row) { + // Container styles + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + + // Position styles + position: absolute; + inset-inline-start: 0; + bottom: 0; + z-index: $z-grid-interaction; + grid-row: 2; + + // size & spacing styles + width: 100%; + height: var(--cell-height); + padding-inline: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-lg); + + // Color styles + color: var-get($theme, 'filtering-row-text-color'); + background: var-get($theme, 'filtering-row-background'); + box-shadow: 0 rem(4px) rem(10px) rgba(0, 0, 0, 0.12); + + // Compound components overrides + .igx-input-group { + --size: calc(var(--cell-height) - #{rem(8px)}) !important; + + min-height: var(--size); + + width: 100% !important; + max-width: rem(200px) !important; + min-width: rem(140px) !important; + + + igx-prefix, + igx-suffix { + height: 100% !important; + } + + .igx-input-group__input { + font-size: sizable(rem(12px), rem(14px), rem(16px)) !important; + padding-inline-start: 0 !important; + padding-block: 0 !important; + height: 100% !important; + } + } + + [igxIconButton] { + --ig-size: 1; + + aspect-ratio: 1; + color: var-get($theme, 'filtering-row-text-color'); + } + } + + // Filtering row main section + @include e(filtering-row-main) { + display: flex; + flex: 1 1 auto; + align-items: center; + overflow: hidden; + max-width: calc(100% - rem(176px)); + min-width: rem(56px); + + igx-chips-area { + flex-wrap: nowrap; + + // Can't uae gap on the parent because dropdown container is present in the dom + margin-inline: rem(8px); + gap: rem(4px); + } + } + + // Filtering row editing buttons + @include e(filtering-row-editing-buttons) { + display: flex; + align-items: center; + padding: rem(8px); + gap: rem(4px); + + button { + transition: none; + + &:not([disabled]) igx-icon { + color: var-get($theme, 'sorted-header-icon-color'); + } + } + } + + // Filtering row editing buttons (small) + @include e(filtering-row-editing-buttons, $m: small) { + padding: rem(4px); + + button { + transition: none; + + &:not([disabled]) igx-icon { + color: var-get($theme, 'sorted-header-icon-color'); + } + } + } + + // Filtering row scroll start + @include e(filtering-row-scroll-start) { + position: relative; + margin-inline: rem(8px); + overflow: visible; + + &::after { + display: block; + position: absolute; + width: rem(10px); + content: ''; + inset-block: rem(-2px); + background: linear-gradient( + to right, + var-get($theme, 'filtering-row-background'), + transparent + ); + inset-inline-end: rem(-10px); + } + } + + // Filtering row scroll end + @include e(filtering-row-scroll-end) { + position: relative; + margin-inline: rem(8px); + overflow: visible; + + &::before { + display: block; + position: absolute; + width: rem(10px); + content: ''; + inset-block: rem(-2px); + background: linear-gradient( + to left, + var-get($theme, 'filtering-row-background'), + transparent + ); + inset-inline-start: rem(-10px); + } + } + + %filtering-cell { + display: flex; + align-items: center; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + overflow: hidden; + border-inline-end: $grid-header-border; + border-top: $grid-header-border; + height: var(--header-size); + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: padding-box !important; + + + igx-chips-area { + width: 100%; + flex-wrap: nowrap; + + .igx-filtering-chips__connector { + font-size: rem(12px); + text-transform: uppercase; + font-weight: 600; + margin: 0 rem(8px); + overflow: hidden; + } + } + } + + // Filtering cell (advanced filtering) + @include e(filtering-cell) { + @extend %filtering-cell; + } + + // Filtering cell selected state + @include e(filtering-cell, $m: selected) { + @extend %filtering-cell; + + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); + + igx-chips-area { + background: inherit; + } + } + + // Filtering cell indicator (badge/icon) + @include e(filtering-cell-indicator) { + display: flex; + align-items: center; + position: relative; + + igx-icon, + .igx-badge { + cursor: pointer; + } + + .igx-badge { + position: absolute; + top: rem(-4px); + inset-inline-start: 60%; + } + } + + // Filtering cell indicator hidden state + @include e(filtering-cell-indicator, $m: hidden) { + .igx-badge, + igx-icon { + display: none; + } + } + + // Filtering dropdown items + @include e(filtering-dropdown-items) { + display: flex; + align-items: center; + } + + // Filtering dropdown text + @include e(filtering-dropdown-text) { + margin-inline-start: rem(16px); + } + + // ============================================================================ + // Summaries Elements + // ============================================================================ + + // Summaries row + @include e(summaries) { + display: flex; + overflow: hidden; + outline-style: none; + background-color: var-get($theme, 'summaries-patch-background'); + + igx-display-container { + overflow: visible !important; + flex: 1; + min-width: 0; + } + } + + // Summaries body (in grid body) + @include e(summaries, $m: body) { + --summaries-patch-background: #{var-get($theme, 'group-row-background')}; + + display: flex; + overflow: hidden; + outline-style: none; + border-bottom: rem(1px) dashed var-get($theme, 'row-border-color'); + background-color: var-get($theme, 'summaries-patch-background'); + + &:last-of-type { + border-bottom: none; + } + + // Override summary component colors when in body context + .igx-grid-summary { + --background-color: inherit !important; + --result-color: hsla( + from color(from var(--background-color) var(--y-contrast)) h + 0 l / 1 + ) !important; + } + + .igx-display-container { + overflow: visible !important; + flex: 1; + min-width: 0; + } + } + + // Summaries patch (fixed area) + @include e(summaries-patch) { + position: relative; + background: inherit; + border-inline-end: $grid-header-border; + z-index: $z-grid-base; + } + + // ============================================================================ + // Outlet Elements + // ============================================================================ + + // Generic outlet for overlays + @include e(outlet) { + --ig-size: var(--grid-size); + z-index: $z-grid-overlay; + position: fixed; + } + + // Loading outlet + @include e(loading-outlet) { + z-index: $z-grid-loading; + } + + // Row editing outlet + @include e(row-editing-outlet) { + z-index: $z-grid-pinned-row; + position: absolute; + } + + // Add row snackbar + @include e(addrow-snackbar) { + position: absolute; + bottom: rem(16px); + inset-inline-start: 50%; + transform: translateX(-50%); + z-index: $z-grid-loading; + } + + // ============================================================================ + // Misc Elements + // ============================================================================ + + // Icon wrapper + @include e(icon) { + display: flex; + align-items: center; + justify-content: center; + } + + // Column name display + @include e(column-name) { + @include ellipsis(); + } + + // Count badge + @include e(count-badge) { + display: flex; + align-items: center; + justify-content: center; + min-width: rem(20px); + height: rem(20px); + padding: rem(2px) rem(6px); + border-radius: rem(10px); + font-size: rem(12px); + background: var-get($theme, 'group-count-background'); + color: var-get($theme, 'group-count-text-color'); + } + + // Text wrapper + @include e(text) { + @include ellipsis(); + } + + .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); + color: contrast-color($color: 'surface', $variant: 500); + background: color($color: 'surface', $variant: 500); + border-radius: 0; + + igc-icon, + igx-icon, + igc-button, + [igxButton] { + --component-size: var(--ig-size, var(--ig-size-large)); + } + } + + .igx-banner__message { + display: flex; + align-items: center; + min-width: rem(150px); + flex: 1 0 0%; + gap: rem(16px); + padding: 0 rem(8px); + } + + .igx-banner__text { + @include type-style('body-2'); + + flex: 1 0 0%; + } + + .igx-banner__border-top { + box-shadow: inset 0 rem(1px) 0 0 var-get($theme, 'header-border-color'); + } + + .igx-banner__border-bottom { + box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'header-border-color'); + } + + .igx-banner__actions { + flex-wrap: wrap; + align-self: flex-end; + gap: 0.5rem; + } + } + + @include b(igx-grid-grouparea) { + grid-row: 2; + display: flex; + align-items: center; + justify-content: flex-start; + flex-wrap: wrap; + border-bottom: $grid-header-border; + background: var-get($theme, 'grouparea-background'); + color: var-get($theme, 'grouparea-color'); + min-height: var(--grouparea-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + z-index: $z-grid-decoration; + height: 100%; + overflow: hidden; + + + &:focus { + outline-style: none; + } + + //%igx-chip { + // margin-block: pad-block(rem(4px), rem(8px), rem(8px)); + //} + + @include e(connector) { + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 rem(4px); + + igx-icon { + width: var(--ig-icon-size, #{rem(16px)}) !important; + height: var(--ig-icon-size, #{rem(16px)}) !important; + font-size: var(--ig-icon-size, #{rem(16px)}) !important; + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + + .igx-chip-area { + flex-grow: 1; + } + } + + @include b(igx-grid-th) { + position: relative; + display: flex; + flex: 1 1 0%; + color: inherit; + text-align: start; + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: padding-box !important; + line-height: $cell-line-height; + flex-flow: row nowrap; + justify-content: space-between; + align-items: flex-end; + min-width: 0; + min-height: var(--header-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + font-size: rem(12px); + font-weight: 600; + border-inline-end: $grid-header-border; + overflow: hidden; + transition: color 250ms ease-in-out; + outline-style: none; + + @include e(expander) { + display: flex; + align-items: center; + justify-content: center; + margin-inline-end: rem(8px); + cursor: pointer; + + igx-icon { + color: var-get($theme, 'expand-icon-color'); + } + + &:hover { + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + } + + @include e(group-title) { + @include ellipsis(); + } + + @include e(title) { + @include ellipsis(); + + min-width: 3ch; + user-select: none; + cursor: initial; + flex-grow: 1; + line-height: var(--header-size); + transition: color 250ms ease-in-out; + } + + @include e(icons) { + display: inline-flex; + align-items: center; + justify-content: flex-end; + user-select: none; + + /* sort-icon + filter icon width */ + min-width: rem(30px); + height: var(--header-size); + align-self: flex-end; + + &:empty { + min-width: 0; + } + + .igx-excel-filter__icon { + position: relative; + display: flex; + + --ig-icon-size: #{rem(15px)}; + + &::after { + content: attr(data-sortIndex); + position: absolute; + top: rem(-5px); + inset-inline-end: rem(-1px); + font-size: rem(10px); + text-align: end; + font-family: sans-serif; + line-height: rem(10px); + } + } + } + + @include e(resize-handle) { + position: absolute; + width: rem(4px); + top: 0; + inset-inline-end: rem(-2px); + height: 100%; + z-index: $z-grid-decoration; + } + + @include e(resize-line) { + position: absolute; + cursor: col-resize; + width: rem(4px); + background: var-get($theme, 'resize-line-color'); + z-index: $z-grid-decoration; + + &::before, + &::after { + position: absolute; + content: ''; + height: 100%; + width: rem(96px); + } + + &::before { + inset-inline-end: 100%; + } + + &::after { + inset-inline-start: 100%; + } + } + + // Drop indicators for column reordering + @include e(drop-indicator-left) { + position: absolute; + width: rem(1px); + height: 100%; + top: 0; + z-index: $z-grid-base; + inset-inline-start: rem(-1px); + } + + @include e(drop-indicator-right) { + position: absolute; + width: rem(1px); + height: 100%; + top: 0; + z-index: $z-grid-base; + inset-inline-end: rem(-1px); + } + + // Active header (selected/focused header cell) + @include m(active) { + &::after { + content: ''; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: $grid-active-state-border; + pointer-events: none; + } + } + + @include mx(active, pinned) { + &::after { + inset-block-start: 0; + inset-inline-start: 0; + width: calc(100% - var-get($theme, 'pinned-border-width')) !important; + } + } + + @include m(number) { + text-align: end; + // TODO: This was enabled in the old styles but it overrides the flex behavior of the title and icons. Check agains designs. + // justify-content: flex-end; + flex-grow: 1; + + @include e(icons) { + justify-content: flex-start; + order: -1; + + .sort-icon { + order: 1; + } + } + } + + @include m(collapsible) { + justify-content: normal; + } + + @include m(sortable) { + :where(.sort-icon) { + display: flex; + align-items: center; + cursor: pointer; + position: relative; + + opacity: 0.7; + + &:is(:hover) { + opacity: 1; + } + + &::after { + content: attr(data-sortIndex); + position: absolute; + top: rem(-5px); + inset-inline-end: rem(-1px); + font-size: rem(10px); + text-align: end; + font-family: sans-serif; + line-height: rem(10px); + } + } + } + + // Sorted header (column is currently sorted) + @include m(sorted) { + :where(.sort-icon) { + opacity: 1; + color: var-get($theme, 'sorted-header-icon-color'); + + &:is(:hover, :focus) { + color: var-get($theme, 'sortable-header-icon-hover-color'); + } + } + + // When hovering over the header cell itself, change icon color + // TODO: Questionable why this is here + &:hover :where(.sort-icon) { + color: var-get($theme, 'sortable-header-icon-hover-color'); + } + } + + // Selected header (column selection) + @include m(selectable) { + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); + } + + // TODO: Verify the class is really named 'filtrable' and not 'filterable' + @include m(filtrable) { + :where(.igx-grid-th__title) { + opacity: .7; + } + } + + @include m(pinned) { + position: relative; + background: inherit; + + &::after { + width: calc(100% - $pinned-shadow-size) !important; + } + } + + // Pinned header (first pinned column) + @include m(pinned-first) { + border-inline-start: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &:dir(ltr) { + border-inline-start-color: var-get($theme, 'pinned-border-color'); + } + + &:dir(rtl) { + border-inline-end-color: var-get($theme, 'pinned-border-color'); + } + } + + // Pinned header (last pinned column) + @include m(pinned-last) { + border-inline-end: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &:dir(ltr) { + border-inline-end-color: var-get($theme, 'pinned-border-color'); + border-inline-end-width: var-get($theme, 'pinned-border-width'); + } + + &:dir(rtl) { + border-inline-start-color: var-get($theme, 'pinned-border-color'); + border-inline-start-width: var-get($theme, 'pinned-border-width'); + } + } + + @include m(selected) { + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); + + :where(.sort-icon::after) { + background: var-get($theme, 'header-selected-background'); + } + } + + @include m(fw) { + flex-grow: 0; + outline-style: none; + } + + @include m(filtering) { + background: var-get($theme, 'filtering-header-background'); + color: var-get($theme, 'filtering-header-text-color'); + z-index: $z-grid-interaction; + } + + @include mx(filtrable, sortable) { + :where(.sort-icon) { + cursor: pointer; + opacity: 0.7; + + :is(:hover) { + opacity: 1; + } + } + @extend %igx-grid-th--filtrable-sortable !optional; + } + + @include mx(selectable, sorted) { + :where(.sort-icon) { + color: var-get($theme, 'header-selected-text-color'); + + :is(:hover, :focus) { + color: var-get($theme, 'header-selected-text-color'); + } + } + } + + @include mx(selected, sorted) { + :where(.sort-icon) { + color: var-get($theme, 'header-selected-text-color'); + + :is(:hover, :focus) { + color: var-get($theme, 'header-selected-text-color'); + } + } + } + + // Active state with compound selectors - use @at-root to prevent nesting + @at-root { + .igx-grid-th__drop-indicator--active { + &.igx-grid-th__drop-indicator-left, + &.igx-grid-th__drop-indicator-right { + border-inline-end: rem(1px) solid + var-get($theme, 'drop-indicator-color'); + } + + &::after, + &::before { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + inset-inline-start: rem(-3px); + } + + &::before { + bottom: 0; + border-width: 0 rem(4px) rem(4px); + border-color: transparent transparent + var-get($theme, 'drop-indicator-color'); + } + + &::after { + top: 0; + border-width: rem(4px) rem(4px) 0; + border-color: var-get($theme, 'drop-indicator-color') + transparent transparent; + } + } + } + } + + // NOTE: Consider this done for now + // ============================================================================ + // Grid header (thead) container and structure + @include b(igx-grid-thead) { + // Main thead container + grid-row: 3; + display: flex; + overflow: hidden; + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); + //border-block-end: $grid-header-border; + + // TODO: This is completely upside down - doesn't follow BEM at all + // Rows inside thead should not have hover effects + .igx-grid__tr { + position: relative; + background: inherit; + color: inherit; + z-index: $z-grid-decoration; + + &:hover { + background: inherit; + color: inherit; + } + } + + // Header wrapper element + @include e(wrapper) { + position: relative; + display: flex; + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); + overflow: hidden; + outline-style: none; + z-index: $z-grid-decoration; + border-bottom: $grid-header-border; + + // WARN: BEM not followed here + .igx-grid__tr { + border-bottom: none; + + &:hover { + background: inherit; + color: inherit; + } + } + + .igx-grid__cbx-selection--push { + align-items: flex-start; + padding-block-start: pad-block( + calc((rem(32px) - rem(20px)) / 2), + calc((rem(40px) - rem(20px)) / 2), + calc((rem(50px) - rem(20px)) / 2) + ); + } + + > [aria-activedescendant] { + outline-style: none; + } + + &:focus { + outline: 0; + } + } + + // Pivot wrapper specific styling + @include e(wrapper, $m: pivot) { + border-block-end: none !important; + } + + // Header title cell + @include e(title) { + @extend %cell-display; + @extend %cell-header; + + flex-basis: auto !important; + align-items: center !important; + border-block-end: $grid-header-border; + border-inline-end: $grid-header-border; + height: var(--header-size); + } + + // Header group (contains multiple columns) + @include e(group) { + display: flex; + flex-flow: row nowrap; + } + + // Header subgroup (nested column headers) + @include e(subgroup) { + position: relative; + + &.igx-grid-thead__item.igx-grid-th--active { + &::after { + height: 100%; + } + } + } + + // Header item (column header wrapper) + @include e(item) { + display: flex; + flex-flow: column nowrap; + position: relative; + + :where(.igx-grid-th, .igx-grid-thead__group) { + flex: 1 1 auto; + } + + :where(.igx-grid-thead__title) { + flex: 0 0 auto; + } + + //&:last-child { + // igx-pivot-row-dimension-header { + // border-inline-end: 0; + // } + //} + } + + // Scrollbar thumb for header + @include e(thumb) { + background: var-get($theme, 'header-background'); + border-block-end: $grid-header-border; + } + + // Pivot grid modifier + @include m(pivot) { + display: flex; + + .igx-grid-thead--virtualizationWrapper { + border-inline-start: $grid-header-border; + } + + @include e(wrapper) { + border-block-end: $grid-header-border; + } + } + + // Virtualization wrapper + @include m(virtualizationWrapper) { + height: 100%; + } + + // Virtualization container + @include m(virtualizationContainer) { + height: 100%; + overflow: visible; + //border-inline-start: $grid-header-border; + + .igx-grid__tr-pivot--columnDimensionLeaf { + &::after { + display: none; + } + } + } + } + + @include b(igx-drop-area) { + display: flex; + align-items: center; + justify-content: flex-start; + min-width: rem(80px); + width: 100%; + height: sizable(rem(24px), rem(24px), rem(32px)); + padding-block: 0; + padding-inline: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-lg); + flex: 1 0 0%; + background: var-get($theme, 'drop-area-background'); + border-radius: var-get($theme, 'drop-area-border-radius'); + + &:hover { + background: var-get($theme, 'drop-area-on-drop-background'); + } + + @include e(icon) { + --ig-icon-size: rem(16px); + + color: var-get($theme, 'drop-area-icon-color'); + margin-inline-end: rem(8px); + } + + @include e(text) { + @include ellipsis(); + color: var-get($theme, 'drop-area-text-color'); + font-size: rem(13px); + } + } + + @include b(igx-group-label) { + display: flex; + align-items: center; + justify-content: flex-start; + line-height: rem(16px); + gap: rem(4px); + + @include e(text) { + color: var-get($theme, 'group-label-text'); + font-size: calc(var(--_grid-head-font-size) + #{rem(1px)}) + } + + @include e(icon) { + --component-size: 1; + + color: var-get($theme, 'group-label-icon'); + user-select: none; + + } + + @include e(column-name) { + font-weight: 600; + font-size: var(--_grid-head-font-size); + color: var-get($theme, 'group-label-column-name-text'); + } + + @include e(count-badge) { + --ig-badge-background-color: #{var-get($theme, 'group-count-background')}; + --ig-badge-text-color: #{var-get($theme, 'group-count-text-color')}; + + > span { + font-size: var(--_grid-head-font-size); + } + } + } + + @include b(igx-advanced-filter) { + background: color($color: 'surface', $variant: 500); + box-shadow: elevation(24); + + igx-query-builder { + box-shadow: none !important; + border: none !important; + border-radius: inherit !important; + } + + igx-query-builder-header { + cursor: grab; + } + + .igx-excel-filter__secondary-footer { + --ig-size: 2; + + display: flex; + justify-content: space-between; + padding-inline: pad-inline(rem(24px)); + padding-block-end: pad-block(rem(24px)); + + .igx-excel-filter__clear { + flex-grow: 1; + } + + .igx-excel-filter__apply, + .igx-excel-filter__cancel { + flex-grow: 0; + } + } + + .igx-excel-filter__cancel + .igx-excel-filter__apply { + margin-inline-start: rem(16px); + } + } + + // ============================================================================ + // NOTE: Context-Specific Nested Rules + // These rules handle nested contexts that don't fit cleanly into the BEM model + // ============================================================================ + // Thead context - elements styled differently when inside thead + + igx-pivot-row-dimension-header.igx-grid-th { + align-items: center; + } + + igx-pivot-row-dimension-header-group { + &::after { + height: 100% !important; + } + } + + igx-pivot-row-header-group { + &::after { + inset-inline-start: calc(var-get($theme, 'header-border-width') * -1) !important; + width: 100% !important; + height: 100% !important; + } + + igx-pivot-row-dimension-header.igx-grid-th { + .igx-grid-th__icons { + align-self: center; + } + } + + igx-pivot-row-dimension-header { + .igx-grid-th__icons { + padding-inline-end: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-lg); + } + } + + &:only-child, + &:last-child { + igx-pivot-row-dimension-header.igx-grid-th { + border-inline-end: 0 !important; + } + } + } + + .igx-pivot-grid-row-filler__wrapper { + .igx-grid-thead__wrapper { + height: 100%; + + .igx-grid-th { + height: 100%; + } + } + } + + .igx-grid-thead { + .igx-grid__header-indentation { + igx-icon { + --component-size: 3; + } + } + + .igx-grid__drag-indicator { + cursor: default; + } + + // MRL (Multi-Row Layout) specific thead styles + .igx-grid__tr--mrl { + .igx-grid__hierarchical-expander--header, + .igx-grid__hierarchical-expander, + .igx-grid__hierarchical-expander--empty, + .igx-grid__row-indentation, + .igx-grid__cbx-selection { + border-bottom: $grid-header-border; + } + } + + &:focus-visible { + outline-color: transparent; + } + } + + //MRL block context - multi-row layout grid structure + .igx-grid__mrl-block { + .igx-grid-thead__item { + display: flex; + } + + .igx-grid-thead__title, + .igx-grid__td { + border-inline-end: $grid-header-border !important; + border-block-end: $grid-header-border !important; + } + } + + //.igx-grid-thead__wrapper.igx-grid__tr--mrl { + // border-block-end: 0 !important; + //} + + //// MRL row context - rows in multi-row layout + .igx-grid__tr--mrl { + .igx-grid__cbx-selection, + .igx-grid__hierarchical-expander, + .igx-grid__hierarchical-expander--empty, + .igx-grid__row-indentation, + .igx-grid__drag-indicator { + border-bottom: $grid-header-border; + } + + .igx-grid__td:only-child, + .igx-grid__td:last-child { + border-block-end: 0; + } + + background-clip: padding-box !important; + } + + // Grid checkbox styles + .igx-grid { + .igx-checkbox { + min-width: rem(20px); + + .igx-checkbox__composite-wrapper { + width: var(--cbx-size, #{rem(20px)}); + height: var(--cbx-size, #{rem(20px)}); + padding: 0 !important; + } + + .igx-checkbox__label { + margin-inline-start: rem(12px); + } + + .igx-checkbox__label--before { + margin-inline-end: rem(12px); + } + + .igx-checkbox__label:empty, + .igx-checkbox__label--before:empty { + padding: 0; + margin: 0; + } + } + } + + .igx-grid-thead__item.igx-grid-th--active { + &::after { + width: calc(100% - var-get($theme, 'header-border-width')); + } + } + + @for $i from 1 through 10 { + $level-sm: calc(#{$i * $cell-padding-sm} + var(--_expander-icon-width)); + $level-md: calc(#{$i * $cell-padding-md} + var(--_expander-icon-width)); + $level-lg: calc(#{$i * $cell-padding-lg} + var(--_expander-icon-width)); + + .igx-grid__row-indentation--level-#{$i} { + --_indicator-inline-inset: #{sizable( + $cell-padding-sm, + $cell-padding-md, + $cell-padding-lg + )}; + padding-inline-start: pad-inline($level-sm, $level-md, $level-lg); + } + + $indicator-padding-sm: #{$i * $cell-padding-sm}; + $indicator-padding-md: #{$i * $cell-padding-md}; + $indicator-padding-lg: #{$i * $cell-padding-lg}; + + .igx-grid__group-row--padding-level-#{$i} { + %igx-grid__grouping-indicator { + padding-inline-start: pad-inline($indicator-padding-sm, $indicator-padding-md, $indicator-padding-lg); + } + } + } + +} diff --git a/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss b/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss new file mode 100644 index 00000000000..ea9b1df3e92 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss @@ -0,0 +1,16 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + + +@include themed-block(igx-grid, bootstrap, dark) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_fluent.scss b/projects/igniteui-angular/grids/themes/dark/_fluent.scss new file mode 100644 index 00000000000..d56eac99e3e --- /dev/null +++ b/projects/igniteui-angular/grids/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 *; + + +@include themed-block(igx-grid, fluent, dark) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_index.scss b/projects/igniteui-angular/grids/themes/dark/_index.scss new file mode 100644 index 00000000000..9ae7002a6c2 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_index.scss @@ -0,0 +1,7 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; +@use 'indigo'; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid, $tokens, dark); diff --git a/projects/igniteui-angular/grids/themes/dark/_indigo.scss b/projects/igniteui-angular/grids/themes/dark/_indigo.scss new file mode 100644 index 00000000000..3eb6beb603f --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_indigo.scss @@ -0,0 +1,74 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/elevations' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, indigo, dark) { + @include m(sortable) { + @include e(icons) { + .sort-icon { + opacity: .85; + } + } + } + + @include m(filtrable) { + :where(.igx-grid-th__title) { + opacity: .85; + } + } + + @include m(fw) { + igx-icon { + --component-size: 3; + } + } +} + +@include themed-block(igx-grid, indigo, dark) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + + + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } + + @include e(pivot-empty-chip-area) { + color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); + } + + @include e(tr-header-row) { + igx-pivot-row-dimension-header-group { + igx-icon { + opacity: 0.85; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } + } +} + +@include themed-block(igx-grid-thead, indigo, dark) { + @include e(title) { + igx-icon { + opacity: 0.85; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } +} + +@include themed-block(igx-advanced-filter, indigo, dark) { + background: color($color: 'gray', $variant: 50); + box-shadow: elevation(23); +} diff --git a/projects/igniteui-angular/grids/themes/dark/_material.scss b/projects/igniteui-angular/grids/themes/dark/_material.scss new file mode 100644 index 00000000000..7fbd2934ff1 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_material.scss @@ -0,0 +1,16 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + + +@include themed-block(igx-grid, material, dark) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/themes/dark/_tokens.scss new file mode 100644 index 00000000000..d371999179e --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/grid' as *; + +$material: digest-schema($dark-material-grid); +$bootstrap: digest-schema($dark-bootstrap-grid); +$fluent: digest-schema($dark-fluent-grid); +$indigo: digest-schema($dark-indigo-grid); diff --git a/projects/igniteui-angular/grids/themes/light/_index.scss b/projects/igniteui-angular/grids/themes/light/_index.scss new file mode 100644 index 00000000000..97805be5c83 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/light/_index.scss @@ -0,0 +1,7 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; +@use 'indigo'; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid, $tokens, light); diff --git a/projects/igniteui-angular/grids/themes/light/_indigo.scss b/projects/igniteui-angular/grids/themes/light/_indigo.scss new file mode 100644 index 00000000000..d42273e780e --- /dev/null +++ b/projects/igniteui-angular/grids/themes/light/_indigo.scss @@ -0,0 +1,49 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, indigo, light) { + @include m(sortable) { + @include e(icons) { + .sort-icon { + opacity: 0.75; + + &:hover { + opacity: 1; + } + } + } + } +} + +@include themed-block(igx-grid, indigo, light) { + @include e(pivot-empty-chip-area) { + color: color($color: 'gray', $variant: 600); + } + + @include e(tr-header-row) { + igx-pivot-row-dimension-header-group { + igx-icon { + opacity: 0.75; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } + } +} + +@include themed-block(igx-grid-thead, indigo, light) { + @include e(title) { + igx-icon { + opacity: 0.75; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } +} diff --git a/projects/igniteui-angular/grids/themes/light/_tokens.scss b/projects/igniteui-angular/grids/themes/light/_tokens.scss new file mode 100644 index 00000000000..2fd4a5718e5 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid' as *; + +$base: digest-schema($light-grid); +$material: digest-schema($material-grid); +$bootstrap: digest-schema($bootstrap-grid); +$fluent: digest-schema($fluent-grid); +$indigo: digest-schema($indigo-grid); diff --git a/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..f157002560a --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss @@ -0,0 +1,138 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid, bootstrap) { + @include e(filtering-row) { + .igx-input-group { + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + align-items: center; + background: transparent !important; + border-radius: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + background: transparent !important; + } + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + border: 0 !important; + box-shadow: none !important; + } + } + + .igx-input-group__bundle::after, + .igx-input-group__bundle::before { + display: none !important; + } + + .igx-input-group__bundle-main { + padding-inline-start: 0 !important; + margin: 0 !important; + border: 0 !important; + outline: none !important; + box-shadow: none !important; + background: transparent !important; + } + + border: rem(1px) solid color($color: 'gray', $variant: 300) !important; + + &:hover{ + border-color: color($color: 'primary', $variant: 500) !important; + } + } + + .igx-input-group--focused { + border-color: color($color: 'primary', $variant: 500) !important; + border-width: rem(1px) !important; + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + box-shadow: none !important; + } + + .igx-input-group__bundle-main, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end { + margin: 0 !important; + border: 0 !important; + outline: none !important; + box-shadow: none !important; + background: transparent !important; + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + background: transparent !important; + border-radius: 0 !important; + } + } + + .igx-input-group__line { + display: none !important; + } + + igx-prefix:focus { + color: color($color: 'secondary', $variant: 500) !important; + } + + igx-suffix { + igx-icon { + outline-style: none !important; + + &:focus { + color: color($color: 'secondary') !important; + } + + + igx-icon { + margin-inline-start: rem(4px) !important; + } + } + } + + igx-prefix, + igx-suffix { + padding: 0 sizable(rem(8px), rem(10px), rem(14px)) !important; + } + } +} + +@include themed-block(igx-grid-th, bootstrap) { + @include e(title) { + font-weight: 700; + } + + @include e(icons) { + .sort-icon igx-icon { + --size: var(--ig-icon-size, #{rem(15px)}); + } + } +} + +@include themed-block(igx-advanced-filter, bootstrap) { + border-radius: rem(4px); + + .igx-excel-filter__secondary-footer { + padding: rem(16px); + border-top: rem(1px) solid color($color: 'gray', $variant: 300); + } +} diff --git a/projects/igniteui-angular/grids/themes/shared/_fluent.scss b/projects/igniteui-angular/grids/themes/shared/_fluent.scss new file mode 100644 index 00000000000..ab878bcf3b0 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_fluent.scss @@ -0,0 +1,19 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, fluent) { + @include e(title) { + font-weight: 800; + } + + @include e(icons) { + .sort-icon igx-icon { + --size: var(--ig-icon-size, #{rem(15px)}); + } + } +} + +@include themed-block(igx-advanced-filter, bootstrap) { + border-radius: rem(2px); +} diff --git a/projects/igniteui-angular/grids/themes/shared/_index.scss b/projects/igniteui-angular/grids/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/grids/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/themes/shared/_indigo.scss new file mode 100644 index 00000000000..3349c96f182 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_indigo.scss @@ -0,0 +1,197 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/typography/mixins' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/elevations' as *; +@use 'styles/themes/standalone' as *; + +// TODO type style is throwing an error + +@include themed-block(igx-grid, indigo) { + --cell-height: #{sizable(rem(32px), rem(40px), rem(48px))}; + --header-size: #{sizable(rem(32px), rem(40px), rem(48px))}; + --grouparea-size: #{sizable(rem(40px), rem(48px), rem(55px))}; + --_expander-icon-width: #{rem(16px)}; + --_hierarchical-action-icon: #{rem(16px)}; + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + + %cell-display { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)) + } + + + @include e(filtering-row-main) { + igx-chips-area { + // Can't uae gap on the parent because dropdown container is present in the dom + margin-inline: rem(12px); + gap: rem(4px); + } + } + + @include e(filtering-row) { + igx-input-group { + --size: calc(sizable(rem(32px), rem(40px), rem(48px)) - #{rem(8px)}); + } + } + + @include e(filtering-cell) { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)) !important; + } + + + @include e(td) { + @extend %cell-display; + + @include type-style('detail-1', false); + } + + @include e(td, $m: bool) { + --component-size: 2; + + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } + + @include e(tr, $m: edited) { + &::before { + width: rem(4px); + } + } + + @include e(tr, $m: header) { + igx-icon { + --component-size: 2; + } + } + + @include e(tr-action) { + &:last-of-type { + min-height: sizable(rem(32px), rem(40px), rem(48px)); + } + } + + @include e(tree-grouping-indicator) { + margin-inline-end: rem(4px); + + igx-icon { + --component-size: 2; + } + } + + @include e(hierarchical-expander) { + igx-icon { + --component-size: 2; + } + } + + @include e(header-indentation) { + igx-icon { + --component-size: 2; + } + } + + @include e(group-content) { + padding-inline-start: 0; + } + + @include e(grouping-indicator) { + padding-inline-end: rem(16px); + + igx-icon { + --component-size: 2; + } + } + + @include e(tr-pivot) { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + } +} + +@include themed-block(igx-grid-th, indigo) { + @extend %cell-display; + + @include type-style('detail-2', false); + + @include e(expander) { + --component-size: 2; + } + + @include e(icons) { + .igx-excel-filter__icon { + --ig-icon-size: #{rem(12px)}; + } + } + + @include m(filtrable) { + :where(.igx-grid-th__title) { + opacity: .75; + } + } + + @include m(sortable) { + @include e(icons) { + .sort-icon { + opacity: .75; + } + } + } + + @include mx(filtrable, sortable) { + :where(.sort-icon) { + opacity: 1; + } + } + + @include e(title) { + //@include type-style('detail-2', false) + } + + @include e(icons) { + .sort-icon igx-icon { + --component-size: 2; + } + } + + @include e(group-title) { + //@include type-style('detail-2', false); + } +} + +@include themed-block(igx-grid-thead, indigo) { + @include e(title) { + @extend %cell-display; + } +} + +@include themed-block(igx-drop-area, indigo) { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); +} + +@include themed-block(igx-group-label, indigo) { + @include e(text) { + //@include type-style('detail-1', false); + } + + @include e(icon) { + @at-root igx-icon#{&} { + --component-size: 2; + } + } + + @include e(column-name) { + //@include type-style('detail-2', false); + } + + @include e(count-badge) { + --shadow: none; + } +} + +@include themed-block(igx-advanced-filter, indigo) { + background: contrast-color($color: 'gray', $variant: 900); + box-shadow: elevation(24); + border-radius: rem(10px); +} diff --git a/projects/igniteui-angular/grids/themes/shared/_material.scss b/projects/igniteui-angular/grids/themes/shared/_material.scss new file mode 100644 index 00000000000..6cb4eb2eed2 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_material.scss @@ -0,0 +1,137 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid, material) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + + @include e(filtering-row) { + .igx-input-group { + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + align-items: center; + background: transparent !important; + border-radius: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + background: transparent !important; + } + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + border: 0 !important; + box-shadow: none !important; + } + } + + .igx-input-group__bundle::after, + .igx-input-group__bundle::before { + display: none !important; + } + + .igx-input-group__bundle-main { + padding-inline-start: 0 !important; + margin: 0 !important; + border: 0 !important; + outline: none !important; + box-shadow: none !important; + background: transparent !important; + } + + border: rem(1px) solid color($color: 'gray', $variant: 300) !important; + + &:hover{ + border-color: color($color: 'primary', $variant: 500) !important; + } + } + + .igx-input-group--focused { + border-color: color($color: 'primary', $variant: 500) !important; + border-width: rem(1px) !important; + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + box-shadow: none !important; + } + + .igx-input-group__bundle-main, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end { + margin: 0 !important; + border: 0 !important; + outline: none !important; + box-shadow: none !important; + background: transparent !important; + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + background: transparent !important; + border-radius: 0 !important; + } + } + + .igx-input-group__line { + display: none !important; + } + + igx-prefix:focus { + color: color($color: 'secondary', $variant: 500) !important; + } + + igx-suffix { + igx-icon { + outline-style: none !important; + + &:focus { + color: color($color: 'secondary') !important; + } + + + igx-icon { + margin-inline-start: rem(4px) !important; + } + } + } + + igx-prefix, + igx-suffix { + padding: 0 sizable(rem(8px), rem(12px), rem(16px)) !important; + } + } +} + +@include themed-block(igx-grid-th, material) { + @include e(title) { + font-weight: 600; + } + + @include e(icons) { + .sort-icon igx-icon { + --size: var(--ig-icon-size, #{rem(15px)}); + } + } +} + +@include themed-block(igx-advanced-filter, material) { + border-radius: rem(4px); +} diff --git a/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css b/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css new file mode 100644 index 00000000000..f1b6f884e5b --- /dev/null +++ b/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css @@ -0,0 +1,3 @@ +.igx-display-container{display:inherit;flex-flow:inherit;position:relative;width:100%;overflow:hidden;flex-shrink:0}.igx-display-container--inactive{width:100%}.igx-drag{touch-action:none}.igx-drag--select-disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-drag__handle{-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-vhelper--vertical,.igx-vhelper--horizontal{display:block;overflow:auto;z-index:10001}.igx-vhelper--vertical{position:absolute;top:0;inset-inline-end:0;width:var(--vhelper-scrollbar-size)}.igx-vhelper--horizontal{width:100%}.igx-vhelper--vertical .igx-vhelper__placeholder-content{width:1px}.igx-vhelper--horizontal .igx-vhelper__placeholder-content{height:1px}[hidden]{display:none !important}[class^=igx-],[class^=igx-] *,[class^=igx-] *::before,[class^=igx-] *::after,[class^=ig-],[class^=ig-] *,[class^=ig-] *::before,[class^=ig-] *::after{box-sizing:border-box}@property --ig-spacing{syntax:" | ";initial-value:1;inherits:true}:root{--ig-spacing-inline-small: var(--ig-spacing-inline, var(--ig-spacing-small));--ig-spacing-inline-medium: var(--ig-spacing-inline, var(--ig-spacing-medium));--ig-spacing-inline-large: var(--ig-spacing-inline, var(--ig-spacing-large));--ig-spacing-block-small: var(--ig-spacing-block, var(--ig-spacing-small));--ig-spacing-block-medium: var(--ig-spacing-block, var(--ig-spacing-medium));--ig-spacing-block-large: var(--ig-spacing-block, var(--ig-spacing-large))}@property --_transition-delay{syntax:"
-
+

Multi selection row drag with custom ghost:

@@ -313,8 +313,8 @@

Multi selection row drag with custom ghost:

-
-
+ +

Drag a suspect inside or outside the cage:

@@ -342,9 +342,7 @@

Drag a suspect inside or outside the cage:

- - -
+

Drag and drop elements overlapping grid in shadow dom:

diff --git a/src/app/drop-down/drop-down.sample.html b/src/app/drop-down/drop-down.sample.html index 3d4559002b1..c4013f74c38 100644 --- a/src/app/drop-down/drop-down.sample.html +++ b/src/app/drop-down/drop-down.sample.html @@ -1,6 +1,6 @@ -
+
- Angular DropDown + Angular +
- WC DropDown + Web component
-
+
-
Angular Dropdown With Action directive
+
Angular dropdown with action directive
+
- - @for(item of items; track item) { - - {{ item.field }} - - } - -
@for(item of items; track item.field) {
{{ item.field }}
}
- - - @for(item of items; track item) { - - {{ item.field }} - - } - - - - @for(foodGroup of foods; track foodGroup) { - - @for(food of foodGroup.entries; track food) { - - {{ food.name }} - - } - - } -
-
+ +
Angular Dropdown With Action directive [value]="dropdown3.selectedItem?.value.field" /> - - @for(item of items; track item) { - - {{ item.field }} - - } -
+ + + @for(item of items; track item) { + + {{ item.field }} + + } + + + + @for(item of items; track item) { + + {{ item.field }} + + } + + + + @for(foodGroup of foods; track foodGroup) { + + @for(food of foodGroup.entries; track food) { + + {{ food.name }} + + } + + } + + + + @for(item of items; track item) { + + {{ item.field }} + + } + +
diff --git a/src/app/drop-down/drop-down.sample.scss b/src/app/drop-down/drop-down.sample.scss index 26c0fbfad6f..18f58b87d4a 100644 --- a/src/app/drop-down/drop-down.sample.scss +++ b/src/app/drop-down/drop-down.sample.scss @@ -1,29 +1,38 @@ -.sample-button-group { +:host { + display: grid; + row-gap: calc(var(--demos-gap) * 3); +} + +.dropdown-demo-container { display: flex; - flex-direction: column; - width: 700px; + justify-content: center; + gap: var(--demos-gap); + background: var(--ig-surface-500); + color: var(--ig-gray-800); + padding: var(--demos-gap); + border-radius: .2rem; + border: 1px solid var(--ig-gray-400); + + > div { + flex-grow: 1; + display: grid; + place-items: center; + gap: calc(var(--demos-gap) / 2); + } - >* { - margin-bottom: 16px; + // TODO: investigate if this need to be fixed on component level + .igx-button-group .igx-button { + min-width: fit-content; + } + + igx-input-group { + display: flex; } } +// TODO WHY WE NEED THIS? igc-dropdown::part(base) { height: 400px; width: 180px; overflow: auto; } - -// Import the IgniteUI themes library first -// @import '../../../projects/igniteui-angular/src/lib/core/styles/themes/index'; - -//:host { -// // Change theme palette to purple. -// $new-drop-down-theme: igx-drop-down-theme( -// $palette: igx-palette(#09f, purple) -// ); -// -// // Pass the theme to a to the `igx-drop-down` mixin -// @include igx-drop-down($new-drop-down-theme); -// -//} diff --git a/src/app/grid-cellEditing/grid-cellEditing.component.html b/src/app/grid-cellEditing/grid-cellEditing.component.html index d88ddd54779..543e8f07da9 100644 --- a/src/app/grid-cellEditing/grid-cellEditing.component.html +++ b/src/app/grid-cellEditing/grid-cellEditing.component.html @@ -1,6 +1,6 @@

Grid with primary key ProductID

- + @if (getControlType(key) === 'button-group') { - + @for (option of getControlOptions(key); track option) {
+ + diff --git a/src/app/styleguide/colors/color.sample.scss b/src/app/styleguide/colors/color.sample.scss index 7e2279420a9..d23fc6cbb01 100644 --- a/src/app/styleguide/colors/color.sample.scss +++ b/src/app/styleguide/colors/color.sample.scss @@ -2,8 +2,6 @@ @use '../../../styles/variables' as *; .sample-wrapper { - display: grid; - grid-template-columns: 1fr; padding: 0 8px; } @@ -13,23 +11,12 @@ .color-palettes { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); column-gap: 16px; } .color-palette { margin-bottom: 48px; - - &:empty { - display: none; - } -} - -.colors-row { - display: grid; - grid-template-columns: repeat(4, 1fr); - column-gap: 16px; - margin-bottom: 48px; } .color-title { @@ -37,12 +24,42 @@ text-transform: capitalize; line-height: 3rem; padding: 8px 16px; + margin: 0; } .color-values { + display: flex; + justify-content: space-between; + align-items: center; font-size: 14px; font-weight: 600; padding: 8px 16px; + cursor: pointer; + transition: opacity 0.15s; + + .copy-icon { + opacity: 0; + font-size: 16px; + transition: opacity 0.15s; + } + + &:hover { + opacity: 0.85; + + .copy-icon { + opacity: 1; + } + } +} + +.shade-label { + min-width: 40px; +} + +.hex-value { + font-family: monospace; + font-size: 12px; + opacity: 0.85; } .color-container { diff --git a/src/app/styleguide/colors/color.sample.ts b/src/app/styleguide/colors/color.sample.ts index dab6c1b0070..183410a85c6 100644 --- a/src/app/styleguide/colors/color.sample.ts +++ b/src/app/styleguide/colors/color.sample.ts @@ -1,81 +1,112 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy, inject, viewChild, afterNextRender } from '@angular/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; + +interface ColorVariant { + shade: string | number; + hex: string; +} + +interface ColorGroup { + name: string; + variants: ColorVariant[]; +} + +const COLOR_SHADES: (string | number)[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700']; +const GRAY_SHADES: (string | number)[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]; + +function buildGroup(name: string, shades: (string | number)[]): ColorGroup { + return { + name, + variants: shades.map(shade => ({ shade, hex: '' })) + }; +} @Component({ selector: 'app-colors-sample', styleUrls: ['color.sample.scss'], templateUrl: 'color.sample.html', - imports: [] + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [IgxIconComponent, IgxSnackbarComponent] }) -export class ColorsSampleComponent { - public colors = [ - { - name: 'primary', - variants: [ - 50, - 100, - 200, - 300, - 400, - 500, - 600, - 700, - 800, - 900, - 'A100', - 'A200', - 'A400', - 'A700' - ] - }, - { - name: 'secondary', - variants: [ - 50, - 100, - 200, - 300, - 400, - 500, - 600, - 700, - 800, - 900, - 'A100', - 'A200', - 'A400', - 'A700' - ] - }, - { - name: 'gray', - variants: [ - 50, - 100, - 200, - 300, - 400, - 500, - 600, - 700, - 800, - 900 - ] - }, - { - name: 'success', - variants: [500] - }, - { - name: 'info', - variants: [500] - }, - { - name: 'warn', - variants: [500] - }, - { - name: 'error', - variants: [500] - } +export class ColorsSampleComponent implements OnDestroy { + private el = inject(ElementRef); + private cdr = inject(ChangeDetectorRef); + private observer: MutationObserver; + + private snackbar = viewChild('snackbar'); + + public copiedHex = ''; + + public colors: ColorGroup[] = [ + buildGroup('primary', COLOR_SHADES), + buildGroup('secondary', COLOR_SHADES), + buildGroup('surface', COLOR_SHADES), + buildGroup('gray', GRAY_SHADES), + buildGroup('success', COLOR_SHADES), + buildGroup('info', COLOR_SHADES), + buildGroup('warn', COLOR_SHADES), + buildGroup('error', COLOR_SHADES), ]; + + constructor() { + afterNextRender(() => { + this.refreshHexValues(); + + // Re-resolve hex values when the palette changes at runtime + this.observer = new MutationObserver(() => this.refreshHexValues()); + this.observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['style', 'class'] + }); + }); + } + + public ngOnDestroy(): void { + this.observer?.disconnect(); + } + + public copyHex(hex: string): void { + if (hex) { + navigator.clipboard.writeText(hex); + this.copiedHex = hex; + this.snackbar()?.open(`Copied ${hex} to clipboard`); + } + } + + private refreshHexValues(): void { + const styles = getComputedStyle(this.el.nativeElement); + + for (const color of this.colors) { + for (const variant of color.variants) { + variant.hex = this.resolveHex(styles, color.name, variant.shade); + } + } + + this.cdr.markForCheck(); + } + + private resolveHex(styles: CSSStyleDeclaration, name: string, shade: string | number): string { + const raw = styles.getPropertyValue(`--ig-${name}-${shade}`).trim(); + if (!raw) { + return ''; + } + + const temp = document.createElement('div'); + temp.style.color = raw; + document.body.appendChild(temp); + const resolved = getComputedStyle(temp).color; + document.body.removeChild(temp); + + return this.rgbToHex(resolved); + } + + private rgbToHex(rgb: string): string { + const match = rgb.match(/\d+/g); + if (!match || match.length < 3) { + return rgb; + } + const [r, g, b] = match.map(Number); + return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`; + } } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 9c1a62ee503..d2caaef4eb8 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,11 +1,13 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/core/src/core/styles/themes' as *; -$palette: $light-fluent-palette; -$schema: $light-fluent-schema; -$typeface: $fluent-typeface; -$type-scale: $fluent-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); $foreground-color: var(--ig-gray-900); + + From 6ff7c4f5a88965efe94c4640b6908478a9f9b229 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 19 Mar 2026 10:27:25 +0200 Subject: [PATCH 158/189] fix(samples): ensure active item is scrolled into view --- src/app/app.component.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e88990d3dbf..2be876b5ade 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -829,10 +829,16 @@ export class AppComponent implements OnInit { for (const component of this.componentLinks) { if (component.link === router.url) { this.urlString = component.name; - this.urlIcon = component.icon - ; + this.urlIcon = component.icon; } } + + // Scroll the active drawer item into view + requestAnimationFrame(() => { + const activeItem = this.navdrawer.drawer + ?.querySelector('.igx-nav-drawer-item--active'); + activeItem?.scrollIntoView({ block: 'nearest' }); + }); }); } From dc51cae92d4683ddc830c4cf5115f2d023e1c480 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 20 Mar 2026 09:33:16 +0200 Subject: [PATCH 159/189] refactor(themes, samples): improve styles and remove redundant functionality - Refactored styling in Indigo, DropDown, Chips, and Grids samples - Removed unused and duplicate properties in date-range-picker sample, simplifying configuration. - Updated date-range-picker sample layout for a cleaner and more streamlined structure. --- .../days-view/themes/shared/_indigo.scss | 16 +-- .../chips/src/chips/themes/_base.scss | 13 +-- .../drop-down/src/drop-down/themes/_base.scss | 4 + .../igniteui-angular/grids/themes/_base.scss | 25 ++++- src/app/date-range/date-range.sample.html | 11 +- src/app/date-range/date-range.sample.ts | 15 +-- .../grid-auto-size/grid-auto-size.sample.html | 100 ++++++++---------- 7 files changed, 93 insertions(+), 91 deletions(-) diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/themes/shared/_indigo.scss b/projects/igniteui-angular/calendar/src/calendar/days-view/themes/shared/_indigo.scss index 4ade1f5026d..1a48458d8a2 100644 --- a/projects/igniteui-angular/calendar/src/calendar/days-view/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/calendar/src/calendar/days-view/themes/shared/_indigo.scss @@ -25,14 +25,16 @@ $date-view-row-gap: rem(4px); } } - @include mx('date-inner', 'week-number') { - border: 0; - - &::before { - height: $date-view-row-gap; - inset-block-start: 100%; - inset-inline-start: 0; + @include m('week-number') { + span { border: 0; + + &::before { + height: $date-view-row-gap; + inset-block-start: 100%; + inset-inline-start: 0; + border: 0; + } } } diff --git a/projects/igniteui-angular/chips/src/chips/themes/_base.scss b/projects/igniteui-angular/chips/src/chips/themes/_base.scss index 925d575d2fc..5ebe65b9460 100644 --- a/projects/igniteui-angular/chips/src/chips/themes/_base.scss +++ b/projects/igniteui-angular/chips/src/chips/themes/_base.scss @@ -118,7 +118,8 @@ $_theme: $material; } igx-circular-bar { - --diameter: #{sizable(rem(14px), rem(18px), rem(24px))}; + // important here make sans otherwise i have to duplicate this in all themes + --igx-circular-bar-diameter: #{sizable(rem(14px), rem(18px), rem(24px))}; } igx-prefix, @@ -197,7 +198,7 @@ $_theme: $material; border-color: color($color: 'primary', $variant: 800); } } - + &:hover { @include e(item) { color: contrast-color($color: 'primary', $variant: 600); @@ -221,7 +222,7 @@ $_theme: $material; border-color: color($color: 'info', $variant: 800); } } - + &:hover { @include e(item) { color: contrast-color($color: 'info', $variant: 600); @@ -245,7 +246,7 @@ $_theme: $material; border-color: color($color: 'success', $variant: 800); } } - + &:hover { @include e(item) { color: contrast-color($color: 'success', $variant: 600); @@ -269,7 +270,7 @@ $_theme: $material; border-color: color($color: 'warn', $variant: 800); } } - + &:hover { @include e(item) { color: contrast-color($color: 'warn', $variant: 600); @@ -293,7 +294,7 @@ $_theme: $material; border-color: color($color: 'error', $variant: 800); } } - + &:hover { @include e(item) { color: contrast-color($color: 'error', $variant: 600); diff --git a/projects/igniteui-angular/drop-down/src/drop-down/themes/_base.scss b/projects/igniteui-angular/drop-down/src/drop-down/themes/_base.scss index aea9d9ceb67..634ef9374d6 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/themes/_base.scss +++ b/projects/igniteui-angular/drop-down/src/drop-down/themes/_base.scss @@ -56,6 +56,10 @@ $_theme: $material; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; + + .igx-display-container--scrollbar { + padding-inline-end: var(--vhelper-scrollbar-size); + } } @include e(item) { diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index 6f112589000..82888b72cc3 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -471,7 +471,6 @@ $z-grid-loading: 10003; } } - // Selected row state @include e(tr, $m: selected) { color: var-get($theme, 'row-selected-text-color'); @@ -2000,6 +1999,30 @@ $z-grid-loading: 10003; align-self: flex-end; gap: 0.5rem; } + + .igx-grid__tr--selected .igx-grid__td--selected:has(+ .igx-grid__td--selected) { + border-inline-end-color: var-get($theme, 'cell-selected-within-background'); + } + + .igx-grid__tr--selected { + &:hover { + .igx-grid__td--selected:has(+ .igx-grid__td--selected) { + border-inline-end-color: var-get($theme, 'cell-selected-within-background'); + } + } + } + + .igx-grid__tr { + &:hover { + .igx-grid__td--selected:has(+ .igx-grid__td--selected) { + border-inline-end-color: var-get($theme, 'cell-selected-background'); + } + } + } + + .igx-grid__td--selected:has(+ .igx-grid__td--selected) { + border-inline-end-color: var-get($theme, 'cell-selected-background'); + } } @include b(igx-grid-grouparea) { diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html index 8d3ec591897..68f07c2c47b 100644 --- a/src/app/date-range/date-range.sample.html +++ b/src/app/date-range/date-range.sample.html @@ -10,7 +10,6 @@
Angular Date Range Picker, two inputs, template-driven form
[displayFormat]="properties.displayFormat" [minValue]="properties.minValue" [maxValue]="properties.maxValue" - [disabledDates]="disabledDates" [specialDates]="specialDates" [hideHeader]="properties.hideHeader" [orientation]="properties.orientation" @@ -90,7 +89,6 @@
WC Date Range Picker, two inputs
[displayFormat]="properties.displayFormat" [min]="properties.minValue" [max]="properties.maxValue" - [disabledDates]="disabledDates" [specialDates]="specialDates" [hideHeader]="properties.hideHeader" [orientation]="properties.orientation" @@ -117,15 +115,8 @@
WC Date Range Picker, two inputs
Without forms
-
- - - - -
-

Default range picker with predefined and custom ranges

- +

Drop down single input with custom suffix

diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts index 09dfc09b29c..5107c62b39d 100644 --- a/src/app/date-range/date-range.sample.ts +++ b/src/app/date-range/date-range.sample.ts @@ -1,7 +1,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ViewChild } from '@angular/core'; import { JsonPipe } from '@angular/common'; import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, ValidatorFn, AbstractControl, FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { DateRange, IgxButtonDirective, IgxDateRangePickerComponent, IgxDateTimeEditorDirective, IgxInputDirective, IgxLabelDirective, IgxRadioComponent, IgxRippleDirective, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs, IGX_DATE_RANGE_PICKER_DIRECTIVES, IgxIconComponent, IgSizeDirective, CustomDateRange, CalendarDay, DateRangeType } from 'igniteui-angular'; +import { DateRange, IgxDateRangePickerComponent, IgxDateTimeEditorDirective, IgxInputDirective, IgxLabelDirective, IgxRadioComponent, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs, IGX_DATE_RANGE_PICKER_DIRECTIVES, IgxIconComponent, CustomDateRange, CalendarDay, DateRangeType } from 'igniteui-angular'; import { defineComponents, IgcButtonComponent, IgcDateRangePickerComponent, IgcDateTimeInputComponent, IgcIconComponent } from 'igniteui-webcomponents'; import { Properties, PropertyChangeService, PropertyPanelConfig } from '../properties-panel/property-change.service'; @@ -19,8 +19,6 @@ defineComponents(IgcDateRangePickerComponent, IgcButtonComponent, IgcIconCompone } ], imports: [ - IgxButtonDirective, - IgxRippleDirective, FormsModule, IgxLabelDirective, IgxRadioComponent, @@ -87,13 +85,6 @@ export class DateRangeSampleComponent { ] }]; - public disabledDates = [{ - type: DateRangeType.Between, dateRange: [ - new Date(new Date().getFullYear(), new Date().getMonth(), 20), - new Date(new Date().getFullYear(), new Date().getMonth(), 25) - ] - }]; - public panelConfig: PropertyPanelConfig = { mode: { control: { @@ -266,10 +257,6 @@ export class DateRangeSampleComponent { }); } - public changeLocale(locale: string) { - this.dateRangePicker.locale = locale; - } - public changeWeekStart(value: number) { this.dateRangePicker.weekStart = value; } diff --git a/src/app/grid-auto-size/grid-auto-size.sample.html b/src/app/grid-auto-size/grid-auto-size.sample.html index d3cc95d09fc..1678922aaa6 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.html +++ b/src/app/grid-auto-size/grid-auto-size.sample.html @@ -1,55 +1,49 @@ -
-
-
-
- - - - - - - - - +
+ + + + + + + + + - - - - - -
-
- - - - - - - - @for (c of columns; track c) { - - - } - -
-
-
+ + + + + +
+
+ + + + + + + + @for (c of columns; track c) { + + + } +
From a397064d2ed85e96179a1e3c6bbb746d3dface1e Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 20 Mar 2026 10:20:51 +0200 Subject: [PATCH 160/189] refactor(samples): remove `@HostBinding` for dynamic size styles and simplify sample templates --- .../grid-auto-size/grid-auto-size.sample.ts | 7 +- .../grid-cellEditing.component.ts | 7 +- .../grid-column-groups.sample.ts | 6 +- .../grid-column-moving.sample.ts | 6 +- .../grid-column-selection.sample.ts | 4 -- .../grid-esf-load-on-demand.component.ts | 7 +- .../grid-external-filtering.sample.ts | 6 +- .../grid-filtering/grid-filtering.sample.ts | 8 +-- src/app/grid-groupby/grid-groupby.sample.ts | 4 -- .../grid-master-detail.sample.ts | 6 +- .../grid-mrl-custom-navigation.ts | 6 +- .../grid-multi-row-layout/grid-mrl.sample.ts | 4 -- .../grid-row-draggable.sample.ts | 6 +- .../grid-row-pinning.sample.ts | 6 +- src/app/grid-search/grid-search.sample.html | 64 +++++++++---------- src/app/grid-search/grid-search.sample.scss | 12 ++-- src/app/grid-search/grid-search.sample.ts | 6 +- .../grid-summaries/grid-summaries.sample.ts | 4 -- .../hierarchical-grid.sample.ts | 6 +- .../tree-grid-flat-data.sample.ts | 6 +- .../tree-grid-groupby.sample.ts | 6 +- .../tree-grid-load-on-demand.sample.ts | 6 +- src/app/tree-grid/tree-grid.sample.ts | 6 +- 23 files changed, 56 insertions(+), 143 deletions(-) diff --git a/src/app/grid-auto-size/grid-auto-size.sample.ts b/src/app/grid-auto-size/grid-auto-size.sample.ts index a02751d245c..7ba2a94775e 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.ts +++ b/src/app/grid-auto-size/grid-auto-size.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { SAMPLE_DATA } from '../shared/sample-data'; import { GridSelectionMode, IgxGridComponent, IGX_BUTTON_GROUP_DIRECTIVES, IGX_GRID_DIRECTIVES } from 'igniteui-angular'; @@ -51,11 +51,6 @@ export class GridAutoSizeSampleComponent implements OnInit { this.selectionMode = GridSelectionMode.multiple; } - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } - public checkCols(): void { const columns = this.grid1.columns; columns.forEach(c => console.log(c.width)); diff --git a/src/app/grid-cellEditing/grid-cellEditing.component.ts b/src/app/grid-cellEditing/grid-cellEditing.component.ts index 52453209de8..9726c515ad3 100644 --- a/src/app/grid-cellEditing/grid-cellEditing.component.ts +++ b/src/app/grid-cellEditing/grid-cellEditing.component.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { GridSelectionMode, @@ -40,11 +40,6 @@ export class GridCellEditingComponent { @ViewChild('grid', { read: IgxGridComponent, static: true }) private gridWithoutPK: IgxGridComponent; - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } - public orderDateHidden = false; public data: any; public dataWithoutPK: any; diff --git a/src/app/grid-column-groups/grid-column-groups.sample.ts b/src/app/grid-column-groups/grid-column-groups.sample.ts index 2430aaf93da..d09b09511a9 100644 --- a/src/app/grid-column-groups/grid-column-groups.sample.ts +++ b/src/app/grid-column-groups/grid-column-groups.sample.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { ColumnPinningPosition, GridSelectionMode, IgxButtonDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxIconComponent, IgxGridToolbarExporterComponent } from 'igniteui-angular'; @Component({ @@ -21,10 +21,6 @@ import { ColumnPinningPosition, GridSelectionMode, IgxButtonDirective, IgxCollap ] }) export class GridColumnGroupsSampleComponent { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent; public collapse = true; diff --git a/src/app/grid-column-moving/grid-column-moving.sample.ts b/src/app/grid-column-moving/grid-column-moving.sample.ts index 32c052a5311..db660f79416 100644 --- a/src/app/grid-column-moving/grid-column-moving.sample.ts +++ b/src/app/grid-column-moving/grid-column-moving.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SAMPLE_DATA } from '../shared/sample-data'; @@ -13,10 +13,6 @@ import { ColumnPinningPosition, IgxButtonDirective, IgxCellHeaderTemplateDirecti imports: [IgxButtonDirective, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxLabelDirective, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, IgxColumnGroupComponent, IgxCellHeaderTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent] }) export class GridColumnMovingSampleComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; @ViewChild('grid', { static: true }) public gridMCH: IgxGridComponent; diff --git a/src/app/grid-column-selection/grid-column-selection.sample.ts b/src/app/grid-column-selection/grid-column-selection.sample.ts index 86206feffe1..c80032e09be 100644 --- a/src/app/grid-column-selection/grid-column-selection.sample.ts +++ b/src/app/grid-column-selection/grid-column-selection.sample.ts @@ -64,10 +64,6 @@ export class GridColumnSelectionFilterPipe implements PipeTransform { imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxButtonGroupComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxPaginatorComponent, IgxRippleDirective, IgxCheckboxComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxSwitchComponent, GridColumnSelectionFilterPipe, IgxLabelDirective, IgxIconComponent, IgxSuffixDirective, IgxGridToolbarTitleComponent] }) export class GridColumnSelectionSampleComponent implements OnInit, AfterViewInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; @ViewChild('grid2', { static: true }) public grid2: IgxGridComponent; diff --git a/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.ts b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.ts index 745404c9bb1..e55c8d24a90 100644 --- a/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.ts +++ b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { IgxGridComponent, IgxColumnComponent, IFilteringExpressionsTree, GridSelectionMode, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular'; import { GridESFLoadOnDemandService } from './grid-esf-load-on-demand.service'; @@ -9,11 +9,6 @@ import { GridESFLoadOnDemandService } from './grid-esf-load-on-demand.service'; imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxColumnComponent] }) export class GridEsfLoadOnDemandComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } - @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; diff --git a/src/app/grid-external-filtering/grid-external-filtering.sample.ts b/src/app/grid-external-filtering/grid-external-filtering.sample.ts index 8b8453827fa..84e23ddd6f7 100644 --- a/src/app/grid-external-filtering/grid-external-filtering.sample.ts +++ b/src/app/grid-external-filtering/grid-external-filtering.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FilterMode, FilteringExpressionsTree, FilteringLogic, GridSelectionMode, IChangeCheckboxEventArgs, IgxAdvancedFilteringDialogComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxCSVTextDirective, IgxCheckboxComponent, IgxColumnComponent, IgxExcelTextDirective, IgxFlexDirective, IgxGridComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxLabelDirective, IgxLayoutDirective, IgxSelectComponent, IgxSelectItemComponent, IgxStringFilteringOperand } from 'igniteui-angular'; @@ -11,10 +11,6 @@ import { FilterMode, FilteringExpressionsTree, FilteringLogic, GridSelectionMode imports: [IgxFlexDirective, IgxLayoutDirective, IgxButtonGroupComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxAdvancedFilteringDialogComponent, IgxCheckboxComponent, FormsModule, IgxButtonDirective] }) export class GridExternalFilteringComponent implements OnInit, AfterViewInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; diff --git a/src/app/grid-filtering/grid-filtering.sample.ts b/src/app/grid-filtering/grid-filtering.sample.ts index d9067b9f388..d69acd3fc5f 100644 --- a/src/app/grid-filtering/grid-filtering.sample.ts +++ b/src/app/grid-filtering/grid-filtering.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FilterMode, FilteringExpressionsTree, FilteringLogic, FormattedValuesFilteringStrategy, GridSelectionMode, IChangeCheckboxEventArgs, IGX_GRID_DIRECTIVES, IgxButtonGroupComponent, IgxCheckboxComponent, IgxGridComponent, IgxIconComponent, IgxStringFilteringOperand } from 'igniteui-angular'; import { SAMPLE_DATA } from '../shared/sample-data'; @@ -12,12 +12,6 @@ import { SAMPLE_DATA } from '../shared/sample-data'; imports: [FormsModule, IGX_GRID_DIRECTIVES, IgxCheckboxComponent, IgxButtonGroupComponent, IgxIconComponent] }) export class GridFilteringComponent implements OnInit { - - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } - @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts index 01057500c9f..fb522f86c96 100644 --- a/src/app/grid-groupby/grid-groupby.sample.ts +++ b/src/app/grid-groupby/grid-groupby.sample.ts @@ -25,10 +25,6 @@ import { DefaultSortingStrategy, GridSummaryCalculationMode, GridSummaryPosition ] }) export class GridGroupBySampleComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) private grid1: IgxGridComponent; diff --git a/src/app/grid-master-detail/grid-master-detail.sample.ts b/src/app/grid-master-detail/grid-master-detail.sample.ts index 1d5474f10bd..40f5157857c 100644 --- a/src/app/grid-master-detail/grid-master-detail.sample.ts +++ b/src/app/grid-master-detail/grid-master-detail.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, TemplateRef, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit, TemplateRef } from '@angular/core'; import { IgxButtonDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridStateDirective } from 'igniteui-angular'; @@ -9,10 +9,6 @@ import { IgxButtonDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGr imports: [IgxButtonDirective, IgxGridComponent, IgxGridStateDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxGridDetailTemplateDirective] }) export class GridMasterDetailSampleComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-small)`; - } @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; public data: Array; diff --git a/src/app/grid-mrl-custom-navigation/grid-mrl-custom-navigation.ts b/src/app/grid-mrl-custom-navigation/grid-mrl-custom-navigation.ts index ce786c2b06b..49df5fccaa8 100644 --- a/src/app/grid-mrl-custom-navigation/grid-mrl-custom-navigation.ts +++ b/src/app/grid-mrl-custom-navigation/grid-mrl-custom-navigation.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxGridComponent, GridSelectionMode, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxIconModule } from 'igniteui-angular'; @Component({ @@ -7,10 +7,6 @@ import { IgxGridComponent, GridSelectionMode, IgxGridToolbarComponent, IgxGridTo imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxIconModule] }) export class GridMRLCustomNavigationSampleComponent { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) private grid: IgxGridComponent; diff --git a/src/app/grid-multi-row-layout/grid-mrl.sample.ts b/src/app/grid-multi-row-layout/grid-mrl.sample.ts index a7718fe2b52..022758b22b1 100644 --- a/src/app/grid-multi-row-layout/grid-mrl.sample.ts +++ b/src/app/grid-multi-row-layout/grid-mrl.sample.ts @@ -8,10 +8,6 @@ import { ColumnPinningPosition, GridSelectionMode, IgxActionStripComponent, IgxB imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxButtonDirective] }) export class GridMRLSampleComponent { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) private grid: IgxGridComponent; diff --git a/src/app/grid-row-draggable/grid-row-draggable.sample.ts b/src/app/grid-row-draggable/grid-row-draggable.sample.ts index bd55dc5d559..a3bd545332d 100644 --- a/src/app/grid-row-draggable/grid-row-draggable.sample.ts +++ b/src/app/grid-row-draggable/grid-row-draggable.sample.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, ChangeDetectorRef, Component, HostBinding, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core'; import { AsyncPipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; @@ -22,10 +22,6 @@ enum DragIcon { imports: [IgxSwitchComponent, FormsModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxRowDragDirective, IgxRowDragGhostDirective, IgxDropDirective, IgxDragIndicatorIconDirective, IgxGridEmptyTemplateDirective, AsyncPipe] }) export class GridRowDraggableComponent implements AfterViewInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { read: IgxGridComponent, static: true }) private grid1: IgxGridComponent; @ViewChild('grid2', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts index bf67ad8bbab..d3525f7733c 100644 --- a/src/app/grid-row-pinning/grid-row-pinning.sample.ts +++ b/src/app/grid-row-pinning/grid-row-pinning.sample.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, AfterViewInit, HostBinding } from '@angular/core'; +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { IgxGridComponent, @@ -32,10 +32,6 @@ import { SAMPLE_DATA } from '../shared/sample-data'; }) export class GridRowPinningSampleComponent implements OnInit, AfterViewInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) private grid1: IgxGridComponent; diff --git a/src/app/grid-search/grid-search.sample.html b/src/app/grid-search/grid-search.sample.html index c41c3a2ac5f..d84e9a1ff87 100644 --- a/src/app/grid-search/grid-search.sample.html +++ b/src/app/grid-search/grid-search.sample.html @@ -1,34 +1,34 @@ -
-
-
+ + + + + + + + + 👌 Export to Excel + 👍 Export to CSV + + + + @for (c of columns; track c) { + + + } + - - - - - - - - - - Export to Excel 👌 - Export to CSV 👍 - - - - @for (c of columns; track c) { - - - } - -
- - - -
-
-
+
+ + +
diff --git a/src/app/grid-search/grid-search.sample.scss b/src/app/grid-search/grid-search.sample.scss index 30dfd3aa253..a349e72d0fa 100644 --- a/src/app/grid-search/grid-search.sample.scss +++ b/src/app/grid-search/grid-search.sample.scss @@ -1,8 +1,10 @@ - -.sample-buttons { - margin-top: 24px; +:host { + display: flex; + align-items: start; + gap: var(--demos-gap); } -[igxButton]+[igxButton] { - margin-left: 8px; +.demo-actions { + display: grid; + gap: var(--demos-gap); } diff --git a/src/app/grid-search/grid-search.sample.ts b/src/app/grid-search/grid-search.sample.ts index 12f07416c6a..94f3d83a062 100644 --- a/src/app/grid-search/grid-search.sample.ts +++ b/src/app/grid-search/grid-search.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { SAMPLE_DATA } from '../shared/sample-data'; @@ -14,10 +14,6 @@ import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.compo }) export class GridSearchComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; public data: Array; diff --git a/src/app/grid-summaries/grid-summaries.sample.ts b/src/app/grid-summaries/grid-summaries.sample.ts index 12a4e992253..6be3e07bbdf 100644 --- a/src/app/grid-summaries/grid-summaries.sample.ts +++ b/src/app/grid-summaries/grid-summaries.sample.ts @@ -47,10 +47,6 @@ class MySummary extends IgxNumberSummaryOperand { imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSummaryTemplateDirective, IgxPaginatorComponent, FormsModule, IgxSwitchComponent] }) export class GridSummaryComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { read: IgxGridComponent, static: true }) private grid1: IgxGridComponent; diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.ts b/src/app/hierarchical-grid/hierarchical-grid.sample.ts index 3af3b0dbca9..0aaeb05047c 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.ts +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ChangeDetectorRef, AfterViewInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, ChangeDetectorRef, AfterViewInit } from '@angular/core'; import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.component'; import { IgxRowIslandComponent, @@ -19,10 +19,6 @@ import { imports: [GridSearchBoxComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxIconComponent, IGX_BUTTON_GROUP_DIRECTIVES] }) export class HierarchicalGridSampleComponent implements AfterViewInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } public columnsReady = false; public layoutsReady = false; @ViewChild('layout1', { static: true }) diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts index 34f3d55ce4d..8728d95fba7 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.component'; @@ -25,10 +25,6 @@ export class MySummaryOperand extends IgxSummaryOperand { imports: [IgxButtonDirective, IgxTreeGridComponent, IgxColumnComponent, IgxGridToolbarComponent, GridSearchBoxComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxPaginatorComponent, IgxSwitchComponent, FormsModule] }) export class TreeGridFlatDataSampleComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) public grid1: IgxTreeGridComponent; public data: Array; diff --git a/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts b/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts index 9036a9eecac..48ffe7b94d3 100644 --- a/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts +++ b/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SAMPLE_DATA } from '../shared/sample-data'; @@ -14,10 +14,6 @@ import { IgxSwitchComponent, IgxTreeGridComponent, IgxTreeGridGroupByAreaCompone }) export class TreeGridGroupBySampleComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) public grid1: IgxTreeGridComponent; public data: Array; diff --git a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts index 11e3e4028da..27dbcdbb74e 100644 --- a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts +++ b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeGridLoadOnDemandService } from './tree-grid-load-on-demand.service'; @@ -26,10 +26,6 @@ export class MySummaryOperand extends IgxSummaryOperand { imports: [IgxTreeGridComponent, IgxGridToolbarComponent, GridSearchBoxComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxSwitchComponent, FormsModule, IgxPaginatorComponent, IgxButtonDirective] }) export class TreeGridLoadOnDemandSampleComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) public grid1: IgxTreeGridComponent; public data1: Array; diff --git a/src/app/tree-grid/tree-grid.sample.ts b/src/app/tree-grid/tree-grid.sample.ts index 48da4f1fb04..82f3c6709dd 100644 --- a/src/app/tree-grid/tree-grid.sample.ts +++ b/src/app/tree-grid/tree-grid.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; +import { Component, ViewChild, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data'; @@ -14,10 +14,6 @@ import { IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsCom }) export class TreeGridSampleComponent implements OnInit { - @HostBinding('style.--ig-size') - protected get sizeStyle() { - return `var(--ig-size-${this.size})`; - } @ViewChild('grid1', { static: true }) public grid1: IgxTreeGridComponent; public data: Array; From aef684d16e095b9d5332921e50779ee94c9ed11c Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 20 Mar 2026 11:25:28 +0200 Subject: [PATCH 161/189] fix(themes): remove redundant styles and improve button-group alignment - Removed `aspect-ratio: 1` from FAB button styles since it courses a visual bug in the samples repo where the buttons that have text + icon become to tall. - Added `width: 100%` to button-group items for better container alignment if the buttongroup itself has display of inline block adn a hardcoded width. --- .../button-group/src/button-group/themes/_base.scss | 4 ++++ .../core/src/core/styles/components/button/_button-theme.scss | 1 - 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss b/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss index 159537c33c6..9188dcf005d 100644 --- a/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss +++ b/projects/igniteui-angular/button-group/src/button-group/themes/_base.scss @@ -195,6 +195,10 @@ $_theme: $material; flex-flow: column; @include e(item) { + // in case the display of the group is set to inline-block and the group hase a width, + // the items need to have width 100% to fill the group container + width: 100%; + &:not(:nth-child(1)) { margin-top: rem(-1px) !important; margin-inline-start: 0; diff --git a/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss index f6658967545..e675626101d 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss @@ -780,7 +780,6 @@ min-width: var-get($fab-theme, 'size'); min-height: var-get($fab-theme, 'size'); - aspect-ratio: 1; line-height: unset; white-space: nowrap; color: var-get($fab-theme, 'foreground'); From 4e6b1a5a0ef172e8eaa3255d8197f2f4062fa851 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 23 Mar 2026 17:26:33 +0200 Subject: [PATCH 162/189] fix(themes): correct theme references and adjust styles for consistency - Updated `themed-block` calls in date-range-picker themes to use correct theme references (Material and Fluent). - Set `--aside-padding` for Fluent theme in demos settings. - Refined styles in `pageHeading` component and updated `igx-input-group` to use `display: block grid`. - Replaced `--_range-border-style` with `--_preview-border-style` in calendar days view styles. --- .../calendar/src/calendar/days-view/themes/_base.scss | 2 +- .../src/date-range-picker/themes/shared/_fluent.scss | 2 +- .../src/date-range-picker/themes/shared/_material.scss | 2 +- src/app/app.component.scss | 6 ++++++ src/app/pageHeading/pageHeading.component.ts | 2 ++ src/app/pageHeading/pageHeading.styles.scss | 2 +- 6 files changed, 12 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/themes/_base.scss b/projects/igniteui-angular/calendar/src/calendar/days-view/themes/_base.scss index 4f1001be1e9..ed3c40e2075 100644 --- a/projects/igniteui-angular/calendar/src/calendar/days-view/themes/_base.scss +++ b/projects/igniteui-angular/calendar/src/calendar/days-view/themes/_base.scss @@ -20,7 +20,7 @@ $theme: $material; width: calc(50% + #{rem(1px)}); border-width: var(--_range-border-size); border-inline-color: transparent; - border-style: var(--_range-border-style); + border-style: var(--_preview-border-style); } } diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss index 72027a0896f..2f933c4d080 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss @@ -6,6 +6,6 @@ $_theme: $fluent; -@include themed-block(igx-date-range-picker, bootstrap) { +@include themed-block(igx-date-range-picker, fluent) { --input-group-size: #{map.get($_theme, 'size')}; } diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_material.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_material.scss index 211dadadb1a..c1c9f57b6b1 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_material.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_material.scss @@ -6,6 +6,6 @@ $_theme: $material; -@include themed-block(igx-date-range-picker, bootstrap) { +@include themed-block(igx-date-range-picker, material) { --input-group-size: #{map.get($_theme, 'size')}; } diff --git a/src/app/app.component.scss b/src/app/app.component.scss index efd443d60b7..6125162974d 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -32,6 +32,12 @@ padding-top: 0; } } + + [data-ig-theme='fluent'] { + .demos-settings-nav { + --aside-padding: 1rem; + } + } } .demos-title { diff --git a/src/app/pageHeading/pageHeading.component.ts b/src/app/pageHeading/pageHeading.component.ts index 0f9ca38cc4c..0c0ac17c599 100644 --- a/src/app/pageHeading/pageHeading.component.ts +++ b/src/app/pageHeading/pageHeading.component.ts @@ -1,6 +1,7 @@ import {Component, EventEmitter, inject, input, Output, signal, ViewEncapsulation} from '@angular/core'; import { AsyncPipe, KeyValuePipe } from '@angular/common'; import { + IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, @@ -33,6 +34,7 @@ export type IgSize = 'small' | 'medium' | 'large'; AsyncPipe, KeyValuePipe, FormsModule, + IgxButtonDirective, ] }) export class PageHeaderComponent { diff --git a/src/app/pageHeading/pageHeading.styles.scss b/src/app/pageHeading/pageHeading.styles.scss index 3e82b0cb702..df54b1d38e8 100644 --- a/src/app/pageHeading/pageHeading.styles.scss +++ b/src/app/pageHeading/pageHeading.styles.scss @@ -6,7 +6,7 @@ } igx-input-group { - display: block !important; + display: block grid !important; } } From b69fffc4a4a65a742393c252dbcd4d176327054b Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 25 Mar 2026 10:40:28 +0200 Subject: [PATCH 163/189] fix(date-range-picker): improve layout and grid alignment in date-range-picker - Adjusted row and column templates for date-range-picker across themes for consistent alignment. - Updated sample structure and styles to enhance readability and showcase use cases. - Simplified SCSS variables and removed redundant styles in input-group and date-picker themes. - Refined HTML and SCSS in samples for improved layout structure and maintainability. --- .../src/date-range-picker/themes/_base.scss | 86 ++-- .../themes/shared/_bootstrap.scss | 5 + .../themes/shared/_fluent.scss | 5 +- .../themes/shared/_indigo.scss | 6 +- .../themes/shared/_material.scss | 9 +- .../src/input-group/themes/_base.scss | 13 +- .../input-group/themes/shared/material.scss | 5 + src/app/date-range/date-range.sample.html | 419 +++++++++--------- src/app/date-range/date-range.sample.scss | 54 ++- src/app/date-range/date-range.sample.ts | 8 + src/app/pageHeading/pageHeading.template.html | 11 +- 11 files changed, 360 insertions(+), 261 deletions(-) diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/_base.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/_base.scss index 00462af1779..641c20ac1e0 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/_base.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/_base.scss @@ -11,69 +11,101 @@ $theme: $material; @include layer(base) { @include b(igx-date-range-picker) { - @include sizable(); + --_range-column-gap: #{rem(4px)}; - --input-group-size: #{map.get($theme, 'size')}; + @include sizable(); display: grid; + position: relative; + align-items: start; row-gap: rem(4px); - column-gap: rem(8px); + column-gap: var(--_range-column-gap); > igx-icon { cursor: pointer; } - &:has(:not(.igx-date-range-picker__label)) { + // Don't have middle label + &:not(:has(.igx-date-range-picker__label)) { + grid-template-columns: auto 1fr auto auto 1fr auto; + igx-date-range-start { - > * { - grid-column: 1; + .igx-input-group__bundle { + grid-column: 1 / span 3 !important; } } igx-date-range-end { - > * { - grid-column: 2; + .igx-input-group__bundle { + grid-column: 4 / -1 !important; } } } + // have middle label &:has(.igx-date-range-picker__label) { - grid-template-columns: 1fr auto 1fr; + grid-template-columns: auto 1fr auto min(2ch) auto 1fr auto; igx-date-range-start { - > * { - grid-column: 1; + .igx-input-group__bundle { + grid-column: 1 / span 3 !important; + } + + .igx-input-group__label { + grid-column: 2 / span 2 !important; + } + + .igx-input-group__hint { + grid-column: 1 / span 2 !important; } } igx-date-range-end { - > * { - grid-column: 3; + .igx-input-group__bundle { + grid-column: 5 / -1 !important; + } + + .igx-input-group__label, + .igx-input-group__hint { + grid-column: 6 / 7 !important; + } + + .igx-input-group__hint { + grid-column: 5 / span 2 !important; } } } + &:has(.igx-input-group__label) { + .igx-date-range-picker__label { + grid-row: 2; + } + } + + .igx-input-group__label:only-child, + .igx-input-group__hint:only-child { + grid-column: 1 / -1; + } + + + igx-date-range-start, + igx-date-range-end { + display: contents; + } + @include e(label) { + @include sizable(); @include type-style(caption); display: flex; align-items: center; + justify-content: center; + height: 100%; color: var-get($theme, 'label-color'); - align-self: flex-end; - height: var(--input-group-size); - grid-column: 2; - grid-row: 2; - - // TODO material - &.input-has-hint { - align-self: center; - } - } - - igx-date-range-start, - igx-date-range-end { - display: contents !important; + pointer-events: none; + grid-column: 4 / 5; + grid-row: 1; } } diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_bootstrap.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_bootstrap.scss index 3d6a56cb9d0..edeaa8e4c2e 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_bootstrap.scss @@ -6,4 +6,9 @@ @include e(label) { @include type-style(body-1); } + + .igx-input-group:not(:has(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } } diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss index 2f933c4d080..023cb289a82 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss @@ -7,5 +7,8 @@ $_theme: $fluent; @include themed-block(igx-date-range-picker, fluent) { - --input-group-size: #{map.get($_theme, 'size')}; + .igx-input-group:not(:has(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } } diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_indigo.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_indigo.scss index 6e885866306..48ffcf16819 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_indigo.scss @@ -7,7 +7,9 @@ $_theme: $indigo; @include themed-block(igx-date-range-picker, indigo) { - --input-group-size: #{map.get($_theme, 'size')}; - + .igx-input-group:not(:has(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } } diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_material.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_material.scss index c1c9f57b6b1..56b87576888 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_material.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_material.scss @@ -7,5 +7,12 @@ $_theme: $material; @include themed-block(igx-date-range-picker, material) { - --input-group-size: #{map.get($_theme, 'size')}; + &:has(.igx-input-group__label) .igx-date-range-picker__label { + grid-row: 1; + } + + .igx-input-group:not(:has(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss index 531a38f6849..dc8b843c4e4 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss @@ -16,15 +16,15 @@ $transition-timing: .25s $out-cubic; --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --_bundle-template-columns: auto 1fr auto; --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(12px), rem(16px))}; - --_label-row: var(--_ig-input-label-row, 1); - --_bundle-row: var(--_ig-input-bundle-row, calc(var(--_label-row) + 1)); - --_hint-row: var(--_ig-input-hint-row, calc(var(--_bundle-row) + 1)); - + --_label-row: 1; + --_bundle-row: 2; + --_hint-row: 3; display: grid; grid-template-columns: var(--_bundle-template-columns); position: relative; color: var-get($theme, 'idle-text-color'); + min-height: var-get($theme, 'size'); igx-icon, igx-icon[igxPrefix], @@ -523,6 +523,11 @@ $transition-timing: .25s $out-cubic; } + .igx-input-group:not(:not(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } + igx-combo .igx-input-group:not(.igx-input-group--disabled), igx-select .igx-input-group:not(.igx-input-group--disabled) { .igx-input-group__input, diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss index c2f3c0657da..e08eb203a1e 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss @@ -25,6 +25,11 @@ $input-bottom-spacing: rem(6px); --_hint-row: 2; } + &:not(:has(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } + row-gap: rem(4px); @include e(bundle) { diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html index 68f07c2c47b..c2290af508e 100644 --- a/src/app/date-range/date-range.sample.html +++ b/src/app/date-range/date-range.sample.html @@ -1,5 +1,5 @@ -
-
+
+
Angular Date Range Picker, two inputs, template-driven form
Angular Date Range Picker, two inputs, template-driven form [headerOrientation]="properties.headerOrientation" [displayMonthsCount]="properties.visibleMonths" > - + @if (properties.headerTemplate) { Custom header content @@ -38,9 +38,9 @@
Angular Date Range Picker, two inputs, template-driven form
clear - + @if (properties.inputLabel) { - + } Angular Date Range Picker, two inputs, template-driven form {{ properties.hint }} } - + date_range @@ -73,8 +73,7 @@
Angular Date Range Picker, two inputs, template-driven form
- -
+
WC Date Range Picker, two inputs
WC Date Range Picker, two inputs }
-
+
-
-
-
-
-
Without forms
-

Default range picker with predefined and custom ranges

- +
+

Patterns samples

+
+
Without forms
+

Default range picker with predefined and custom ranges

+ -

Drop down single input with custom suffix

- - - calendar_view_day - - +

Drop down single input with custom suffix

+ + + calendar_view_day + + -

Dialog two inputs with prefix

- - - - - calendar_view_day - - - clear - - - - - - calendar_view_day - - - clear - - - +

Dialog two inputs with prefix

+ + + + + calendar_view_day + + + clear + + + + + + calendar_view_day + + + clear + + + +
+
+
Template-driven form
+ +

Single template with initial value

+ + + -
-
-
Template-driven form
- -

Single template with initial value

- - - +

Single template without initial value

+ + + -

Single template without initial value

- - - +

Single template with initial value on the picker

+ + + + calendar_view_day + + + + + + + + + -

Single template with initial value on the picker

- - - - calendar_view_day - - - - - - - - - +

Single template without initial value on the picker

+ + + + calendar_view_day + + + + + + + + + -

Single template without initial value on the picker

- - - - calendar_view_day - - - - - - - - - +

Single template with initial value on inputs

+ + + + calendar_view_day + + + + + + + + + -

Single template with initial value on inputs

- - - - calendar_view_day - - - - - - - - - +

Single template without initial value on inputs

+ + + + calendar_view_day + + + + + + + + + + + +
+
Reactive form
+
+ @for (option of updateOnOptions; track option) { + + {{option}} + + } +
+
+

Single template with initial value

+ + + -

Single template without initial value on inputs

- - - - calendar_view_day - - - - - - - - - -
-
-
-
Reactive form
-
- @for (option of updateOnOptions; track option) { - - {{option}} - - } -
-
-

Single template with initial value

- - - +

Single template without initial value

+ + + -

Single template without initial value

- - - +

Single template with initial value on the picker

+ + + + calendar_view_day + + + + + + + + + -

Single template with initial value on the picker

- - - - calendar_view_day - - - - - - - - - +

Single template without initial value on the picker

+ + + + calendar_view_day + + + + + + + + + -

Single template without initial value on the picker

- - - - calendar_view_day - - - - - - - - - +

Single template with initial value on the input

+ + + + calendar_view_day + + + + + + + + + -

Single template with initial value on the input

- - - - calendar_view_day - - - - - - - - - +

Single template without initial value on the input

+ + + + calendar_view_day + + + + + + + + + +
+ -

Single template without initial value on the input

- - - - calendar_view_day - - - - - - - - - - -
+
+
+
Form value
+
    +
  • Valid: {{ reactiveForm.valid }}
    • +
  • Dirty: {{ reactiveForm.dirty }}
    • +
  • Touched: {{ reactiveForm.touched }}
    • +
-
+ 
+            
+{{ reactiveForm.value | json }}
+            
+
+
-
    -
  • Valid: {{ reactiveForm.valid }}
    • -
  • Dirty: {{ reactiveForm.dirty }}
    • -
  • Touched: {{ reactiveForm.touched }}
    • -
  • Value: {{ reactiveForm.value | json }}
    • -
diff --git a/src/app/date-range/date-range.sample.scss b/src/app/date-range/date-range.sample.scss index b78a07b6433..93c4fda68c5 100644 --- a/src/app/date-range/date-range.sample.scss +++ b/src/app/date-range/date-range.sample.scss @@ -1,14 +1,46 @@ -$range-sample-space: 16px; +:host { + display: grid; + gap: 2rem; -.range-holder { - display: flex; + p { + color: var(--ig-gray-600); + margin-block: .5rem; + } + + pre { + padding: 2rem; + background: var(--ig-gray-100); + border: 1px solid var(--ig-gray-200); + border-radius: 1rem; + overflow: auto; + grid-column: span 2 + } +} + +.date-range-demo { + display: grid; + gap: 1rem; + + h6 { + font-size: 1rem; + margin-bottom: 1rem + } +} + +.date-range-demo__patterns { + display: grid; + gap: 1rem; + + h6 { + margin-top: 1rem; + } } .range-sample-column { display: flex; flex-direction: column; flex-basis: 50%; - padding: $range-sample-space; + padding: 16px; border-right: 1px solid #ddd; .date-picker-sample-buttons { @@ -27,15 +59,7 @@ $range-sample-space: 16px; } } -.sample-ul { - flex: 1; -} - -.sample-row { - display: flex; - max-width: 1200px; -} - -.angular-wc, h6 { - margin: 18px; +.patterns-form-data { + list-style-type: none; + padding: 0; } diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts index 5107c62b39d..4c33cd8832e 100644 --- a/src/app/date-range/date-range.sample.ts +++ b/src/app/date-range/date-range.sample.ts @@ -93,6 +93,14 @@ export class DateRangeSampleComponent { defaultValue: 'dropdown' } }, + inputType: { + label: 'Input Type', + control: { + type: 'button-group', + options: ['line', 'border', 'box'], + defaultValue: 'outlined' + } + }, value: { control: { type: 'date-range', diff --git a/src/app/pageHeading/pageHeading.template.html b/src/app/pageHeading/pageHeading.template.html index 7a22e36d2c3..afed770b61e 100644 --- a/src/app/pageHeading/pageHeading.template.html +++ b/src/app/pageHeading/pageHeading.template.html @@ -47,7 +47,7 @@
@@ -60,7 +60,7 @@ @@ -73,15 +73,18 @@ From 5346c6c734a06b74d469099300dd9bd8d931951a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 25 Mar 2026 13:41:56 +0200 Subject: [PATCH 164/189] refactor(chart-dialog): replace IgxDividerDirective with IgxDividerComponent for updated imports and module configuration --- .../context-menu/chart-dialog/chart-dialog.component.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular-extras/src/lib/context-menu/chart-dialog/chart-dialog.component.ts b/projects/igniteui-angular-extras/src/lib/context-menu/chart-dialog/chart-dialog.component.ts index 0bdcfc028f2..146e3016de9 100644 --- a/projects/igniteui-angular-extras/src/lib/context-menu/chart-dialog/chart-dialog.component.ts +++ b/projects/igniteui-angular-extras/src/lib/context-menu/chart-dialog/chart-dialog.component.ts @@ -16,7 +16,11 @@ import { CommonModule } from '@angular/common'; import * as charts from '../../../images/charts'; import { Subject } from 'rxjs'; import { IgxIconComponent } from 'igniteui-angular/icon'; -import { IgxIconButtonDirective, IgxRippleDirective, IgxDividerDirective } from 'igniteui-angular/directives'; +import { + IgxIconButtonDirective, + IgxRippleDirective, + IgxDividerComponent +} from 'igniteui-angular/directives'; import { SvgPipe } from '../../pipes/svg.pipe'; @Component({ @@ -24,7 +28,7 @@ import { SvgPipe } from '../../pipes/svg.pipe'; templateUrl: './chart-dialog.component.html', styleUrls: ['./chart-dialog.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [CommonModule, IgxIconComponent, IgxIconButtonDirective, IgxRippleDirective, IgxDividerDirective, SvgPipe], + imports: [CommonModule, IgxIconComponent, IgxIconButtonDirective, IgxRippleDirective, IgxDividerComponent, SvgPipe], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class IgxChartMenuComponent implements AfterViewInit, OnDestroy { From 27601b5f41189af2cbbad8b3271dc3f6a37ebbe7 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 25 Mar 2026 13:42:30 +0200 Subject: [PATCH 165/189] chore(dependencies): update `igniteui-theming` to `v25.0.2` --- package-lock.json | 215 ---------------------------------------------- package.json | 2 +- 2 files changed, 1 insertion(+), 216 deletions(-) diff --git a/package-lock.json b/package-lock.json index 20fa9a1a1e7..1622cf6816c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -62,7 +62,6 @@ "@typescript-eslint/eslint-plugin": "^8.33.1", "@typescript-eslint/parser": "^8.33.1", "autoprefixer": "^10.4.16", - "concurrently": "^9.1.2", "del": "^6.0.0", "eslint": "^9.28.0", "fs-extra": "^11.3.0", @@ -94,7 +93,6 @@ "karma-spec-reporter": "^0.0.36", "lit-html": "^3.2.1", "ng-packagr": "^21.0.0", - "node-watch": "^0.7.4", "postcss": "^8.5.1", "postcss-scss": "^4.0.6", "prettier": "^3.3.3", @@ -9251,122 +9249,6 @@ "node": ">=0.10.0" } }, - "node_modules/concurrently": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz", - "integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==", - "dev": true, - "license": "MIT", - "dependencies": { - "chalk": "4.1.2", - "rxjs": "7.8.2", - "shell-quote": "1.8.3", - "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-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/concurrently/node_modules/cliui": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", - "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", - "dev": true, - "license": "ISC", - "dependencies": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.1", - "wrap-ansi": "^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/concurrently/node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "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/concurrently/node_modules/wrap-ansi": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, - "node_modules/concurrently/node_modules/yargs": { - "version": "17.7.2", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", - "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", - "dev": true, - "license": "MIT", - "dependencies": { - "cliui": "^8.0.1", - "escalade": "^3.1.1", - "get-caller-file": "^2.0.5", - "require-directory": "^2.1.1", - "string-width": "^4.2.3", - "y18n": "^5.0.5", - "yargs-parser": "^21.1.1" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/configstore": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", @@ -18988,16 +18870,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", @@ -22516,31 +22388,6 @@ "sassdoc-extras": "^2.5.0" } }, - "node_modules/sassdoc-theme-default/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/sassdoc-theme-default/node_modules/commander": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", @@ -22569,19 +22416,6 @@ "jsonfile": "^2.1.0" } }, - "node_modules/sassdoc-theme-default/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "extraneous": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/sassdoc-theme-default/node_modules/jsonfile": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz", @@ -22618,32 +22452,6 @@ } } }, - "node_modules/sassdoc-theme-default/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "extraneous": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/sassdoc-theme-default/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, "node_modules/sassdoc/node_modules/argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -23454,19 +23262,6 @@ "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.23.0", "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.23.0.tgz", @@ -25202,16 +24997,6 @@ "node": ">=6" } }, - "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/package.json b/package.json index 7a3e2c1cb0d..0d3281407ed 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^25.0.0", + "igniteui-theming": "^25.0.2", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", From 67f559d2ddc503a2c6fe3c7d8217057c91136d6f Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 26 Mar 2026 09:54:23 +0200 Subject: [PATCH 166/189] fix(themes): refine grid and filtering styles for consistency - Removed redundant SCSS properties related to grid cell editing and header styles. - Ensured consistent styling for filtered icons across themes. - Added `background` property to filtering row for improved theme support. - Consolidated and adjusted icon size definitions for Fluent, Material, Indigo, and Bootstrap themes. --- .../filtering/excel-style/themes/_base.scss | 1 + .../igniteui-angular/grids/themes/_base.scss | 30 ++++++++++--------- .../grids/themes/shared/_bootstrap.scss | 7 +++-- .../grids/themes/shared/_fluent.scss | 7 +++-- .../grids/themes/shared/_indigo.scss | 7 +++-- .../grids/themes/shared/_material.scss | 7 +++-- 6 files changed, 37 insertions(+), 22 deletions(-) diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss index 1d5867c23d6..95375a431e5 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss @@ -105,6 +105,7 @@ $checkbox-indent: ( height: 100%; flex-grow: 1; box-shadow: elevation(12); + background: var(--filtering-row-background); @include e(sizing) { @include sizable(); diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index 82888b72cc3..cbdbfd28ae1 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -878,8 +878,6 @@ $z-grid-loading: 10003; @include e(td, $mods: (editing, valid)) { &::after { box-shadow: inset 0 0 0 $cell-editing-outline-width color($color: 'success'); - top: calc($cell-editing-outline-width / 2); - height: calc(100% - $cell-editing-outline-width) } } @@ -1510,7 +1508,7 @@ $z-grid-loading: 10003; align-items: center !important; background: var-get($theme, 'ghost-header-background') !important; color: var-get($theme, 'ghost-header-text-color') !important; - border-inline-end: transparent !important; + border: transparent !important; min-width: rem(168px); max-width: rem(320px); height: var(--header-size); @@ -1518,7 +1516,6 @@ $z-grid-loading: 10003; padding-inline: pad-inline(rem(24px), rem(16px), rem(12px)); top: rem(-10000px); inset-inline-start: rem(-10000px); - border: none; box-shadow: var(--drag-shadow); overflow: hidden; z-index: $z-grid-drag-ghost; @@ -1532,15 +1529,17 @@ $z-grid-loading: 10003; color: var-get($theme, 'ghost-header-text-color') !important; } - .igx-grid-th__icons { - display: none; - } - .igx-grid-thead__title { border: none; color: var-get($theme, 'ghost-header-text-color') !important; background: transparent !important; } + + .igx-grid-th__icons, + &::before, + &::after { + display: none; + } } // Ghost image icon @@ -2162,6 +2161,15 @@ $z-grid-loading: 10003; line-height: rem(10px); } } + + .igx-excel-filter__icon--filtered { + color: var-get($theme, 'sorted-header-icon-color'); + + &:hover, + &:focus { + color: var-get($theme, 'sortable-header-icon-hover-color'); + } + } } @include e(resize-handle) { @@ -2293,12 +2301,6 @@ $z-grid-loading: 10003; color: var-get($theme, 'sortable-header-icon-hover-color'); } } - - // When hovering over the header cell itself, change icon color - // TODO: Questionable why this is here - &:hover :where(.sort-icon) { - color: var-get($theme, 'sortable-header-icon-hover-color'); - } } // Selected header (column selection) diff --git a/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss index f157002560a..480e95f8e58 100644 --- a/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss @@ -122,8 +122,11 @@ } @include e(icons) { - .sort-icon igx-icon { - --size: var(--ig-icon-size, #{rem(15px)}); + .icon--filtered, + .sort-icon { + igx-icon { + --size: var(--ig-icon-size, #{rem(15px)}); + } } } } diff --git a/projects/igniteui-angular/grids/themes/shared/_fluent.scss b/projects/igniteui-angular/grids/themes/shared/_fluent.scss index 46ea936f857..92709d2de76 100644 --- a/projects/igniteui-angular/grids/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/grids/themes/shared/_fluent.scss @@ -15,8 +15,11 @@ $_theme: $fluent; } @include e(icons) { - .sort-icon igx-icon { - --size: var(--ig-icon-size, #{rem(15px)}); + .icon--filtered, + .sort-icon { + igx-icon { + --size: var(--ig-icon-size, #{rem(15px)}); + } } } } diff --git a/projects/igniteui-angular/grids/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/themes/shared/_indigo.scss index 3349c96f182..d34db3e2acf 100644 --- a/projects/igniteui-angular/grids/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/grids/themes/shared/_indigo.scss @@ -150,8 +150,11 @@ } @include e(icons) { - .sort-icon igx-icon { - --component-size: 2; + .icon--filtered, + .sort-icon { + igx-icon { + --component-size: 2; + } } } diff --git a/projects/igniteui-angular/grids/themes/shared/_material.scss b/projects/igniteui-angular/grids/themes/shared/_material.scss index 6cb4eb2eed2..c451ea28e05 100644 --- a/projects/igniteui-angular/grids/themes/shared/_material.scss +++ b/projects/igniteui-angular/grids/themes/shared/_material.scss @@ -126,8 +126,11 @@ } @include e(icons) { - .sort-icon igx-icon { - --size: var(--ig-icon-size, #{rem(15px)}); + .icon--filtered, + .sort-icon { + igx-icon { + --size: var(--ig-icon-size, #{rem(15px)}); + } } } } From 51549296eaf3f6ec90ec302348f488b688422b07 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 26 Mar 2026 17:34:54 +0200 Subject: [PATCH 167/189] fix(themes): reorganize and clean up grid styles for consistency - Restored misplaced grid row and cell styling blocks for improved structure. - Corrected comment formatting and removed commented-out code for clarity --- .../styles/components/grid/_grid-theme.scss | 16 ++++++------ .../igniteui-angular/grids/themes/_base.scss | 25 ++++++++----------- 2 files changed, 19 insertions(+), 22 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss index 2c8f4f77d0f..a58e864edc7 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss @@ -4,14 +4,14 @@ @use './excel-filtering-theme' as *; @use 'igniteui-theming/sass/animations' as *; -@mixin _filtering-scroll-mask($theme, $dir) { - display: block; - position: absolute; - width: rem(10px); - content: ''; - inset-block: rem(-2px); - background: linear-gradient(to #{$dir}, var-get($theme, 'filtering-row-background'), transparent); -} +//@mixin _filtering-scroll-mask($theme, $dir) { +// display: block; +// position: absolute; +// width: rem(10px); +// content: ''; +// inset-block: rem(-2px); +// background: linear-gradient(to #{$dir}, var-get($theme, 'filtering-row-background'), transparent); +//} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index cbdbfd28ae1..a80c9041ae0 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -1999,26 +1999,27 @@ $z-grid-loading: 10003; gap: 0.5rem; } - .igx-grid__tr--selected .igx-grid__td--selected:has(+ .igx-grid__td--selected) { - border-inline-end-color: var-get($theme, 'cell-selected-within-background'); - } - - .igx-grid__tr--selected { + .igx-grid__tr { &:hover { .igx-grid__td--selected:has(+ .igx-grid__td--selected) { - border-inline-end-color: var-get($theme, 'cell-selected-within-background'); + border-inline-end-color: var-get($theme, 'cell-selected-background'); } } } - .igx-grid__tr { + .igx-grid__tr--selected { &:hover { .igx-grid__td--selected:has(+ .igx-grid__td--selected) { - border-inline-end-color: var-get($theme, 'cell-selected-background'); + border-inline-end-color: var-get($theme, 'cell-selected-within-background'); } } } + .igx-grid__tr--selected .igx-grid__td--selected:has(+ .igx-grid__td--selected) { + border-inline-end-color: var-get($theme, 'cell-selected-within-background'); + } + + .igx-grid__td--selected:has(+ .igx-grid__td--selected) { border-inline-end-color: var-get($theme, 'cell-selected-background'); } @@ -2783,7 +2784,7 @@ $z-grid-loading: 10003; } } - //MRL block context - multi-row layout grid structure + // MRL block context - multi-row layout grid structure .igx-grid__mrl-block { .igx-grid-thead__item { display: flex; @@ -2796,11 +2797,7 @@ $z-grid-loading: 10003; } } - //.igx-grid-thead__wrapper.igx-grid__tr--mrl { - // border-block-end: 0 !important; - //} - - //// MRL row context - rows in multi-row layout + // MRL row context - rows in multi-row layout .igx-grid__tr--mrl { .igx-grid__cbx-selection, .igx-grid__hierarchical-expander, From 805806b03ff54cc006aaf445cd3a1b187ade1cf0 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 27 Mar 2026 11:33:35 +0200 Subject: [PATCH 168/189] refactor(themes, samples): clean up styles, improve structure, and update dependencies - Removed unused `IgxIconComponent` imports and redundant SCSS styles for better maintainability. - Updated sample layout in `grid-multi-row-layout` for improved readability and consistent structure. - Adjusted `grid` and `properties-panel` --- package-lock.json | 64 ++++++++++++++++-- package.json | 2 +- .../igniteui-angular/grids/themes/_base.scss | 16 +++-- .../src/input-group/themes/_base.scss | 2 +- src/app/app.component.scss | 15 +++-- .../grid-mrl.sample.html | 67 ++++++++++--------- .../grid-mrl.sample.scss | 11 ++- src/app/pageHeading/pageHeading.styles.scss | 10 +++ src/app/pageHeading/pageHeading.template.html | 3 +- .../properties-panel.component.html | 1 - .../properties-panel.component.scss | 1 + .../properties-panel.component.ts | 2 - src/styles/_demo-theme.scss | 4 +- 13 files changed, 139 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1622cf6816c..2b846d00808 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^25.0.2", + "igniteui-theming": "file:../igniteui-theming/packages/theming/igniteui-theming-1.0.0.tgz", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", @@ -3811,6 +3811,7 @@ "version": "1.26.0", "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz", "integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==", + "dev": true, "license": "MIT", "dependencies": { "@hono/node-server": "^1.19.9", @@ -3851,6 +3852,7 @@ "version": "3.0.7", "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz", "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==", + "dev": true, "license": "MIT", "dependencies": { "eventsource-parser": "^3.0.1" @@ -14072,12 +14074,12 @@ } }, "node_modules/igniteui-theming": { - "version": "25.0.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.0.2.tgz", - "integrity": "sha512-Kfprrm1mmpAJpi/ucWH8YjyHi1bdyIKY19Mv5DB/FsQ+68yls63ccI9bn0P/p0jG+iV44jgrooc31oBEW3V/CQ==", + "version": "1.0.0", + "resolved": "file:../igniteui-theming/packages/theming/igniteui-theming-1.0.0.tgz", + "integrity": "sha512-9CsNmJQfWZWyMLjegh1pPsOD8eoPTrTYT2XE1A3ghsSFfQpKmY+Uv+7icwzhcAJGHtTOnOYjug8rargd4M5igw==", "license": "MIT", "dependencies": { - "@modelcontextprotocol/sdk": "^1.25.0", + "@modelcontextprotocol/sdk": "^1.28.0", "sass-embedded": "~1.92.1", "zod": "^3.25.76" }, @@ -14085,6 +14087,46 @@ "igniteui-theming-mcp": "dist/mcp/index.js" } }, + "node_modules/igniteui-theming/node_modules/@modelcontextprotocol/sdk": { + "version": "1.28.0", + "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.28.0.tgz", + "integrity": "sha512-gmloF+i+flI8ouQK7MWW4mOwuMh4RePBuPFAEPC6+pdqyWOUMDOixb6qZ69owLJpz6XmyllCouc4t8YWO+E2Nw==", + "license": "MIT", + "dependencies": { + "@hono/node-server": "^1.19.9", + "ajv": "^8.17.1", + "ajv-formats": "^3.0.1", + "content-type": "^1.0.5", + "cors": "^2.8.5", + "cross-spawn": "^7.0.5", + "eventsource": "^3.0.2", + "eventsource-parser": "^3.0.0", + "express": "^5.2.1", + "express-rate-limit": "^8.2.1", + "hono": "^4.11.4", + "jose": "^6.1.3", + "json-schema-typed": "^8.0.2", + "pkce-challenge": "^5.0.0", + "raw-body": "^3.0.0", + "zod": "^3.25 || ^4.0", + "zod-to-json-schema": "^3.25.1" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@cfworker/json-schema": "^4.1.1", + "zod": "^3.25 || ^4.0" + }, + "peerDependenciesMeta": { + "@cfworker/json-schema": { + "optional": true + }, + "zod": { + "optional": false + } + } + }, "node_modules/igniteui-theming/node_modules/chokidar": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", @@ -14101,6 +14143,18 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/igniteui-theming/node_modules/eventsource": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz", + "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==", + "license": "MIT", + "dependencies": { + "eventsource-parser": "^3.0.1" + }, + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/igniteui-theming/node_modules/readdirp": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", diff --git a/package.json b/package.json index 0d3281407ed..c71c95ddbf4 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^25.0.2", + "igniteui-theming": "file:../igniteui-theming/packages/theming/igniteui-theming-1.0.0.tgz", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index a80c9041ae0..ab31dc03b84 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -2795,6 +2795,17 @@ $z-grid-loading: 10003; border-inline-end: $grid-header-border !important; border-block-end: $grid-header-border !important; } + + .igx-grid__th { + border-block-end: $grid-header-border !important; + } + + .igx-grid__th:only-child, + .igx-grid__th:last-child, + .igx-grid__td:only-child, + .igx-grid__td:last-child { + border-block-end: 0; + } } // MRL row context - rows in multi-row layout @@ -2807,11 +2818,6 @@ $z-grid-loading: 10003; border-bottom: $grid-header-border; } - .igx-grid__td:only-child, - .igx-grid__td:last-child { - border-block-end: 0; - } - background-clip: padding-box !important; } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss index dc8b843c4e4..cb549682a68 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss @@ -523,7 +523,7 @@ $transition-timing: .25s $out-cubic; } - .igx-input-group:not(:not(.igx-input-group__label)) { + .igx-input-group:has(:not(.igx-input-group__label)) { --_bundle-row: 1; --_hint-row: 2; } diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 6125162974d..23fe00a50b0 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,3 +1,5 @@ +@use '../../projects/igniteui-angular/core/src/core/styles/base' as *; + ::ng-deep { app-root { --demo-navbar-size: 56px; @@ -24,10 +26,6 @@ } .demos-main-nav { - .igx-navbar__left:not(:empty) { - margin-inline-end: 0; - } - .igx-nav-drawer__aside { padding-top: 0; } @@ -92,10 +90,19 @@ .demos-main-nav { grid-column: 1; + + @include tokens(navdrawer-theme( + $background: var(--ig-gray-100), + $border-radius: 0, + $item-border-radius: 0, + $border-color: var(--ig-gray-300), + + )); } .demos-settings-nav { --ig-nav-drawer-size: 24rem; + --aside-padding: calc(var(--content-spacing) * 1.5); grid-column: 3; } diff --git a/src/app/grid-multi-row-layout/grid-mrl.sample.html b/src/app/grid-multi-row-layout/grid-mrl.sample.html index b047b1806f2..7ab2ec91680 100644 --- a/src/app/grid-multi-row-layout/grid-mrl.sample.html +++ b/src/app/grid-multi-row-layout/grid-mrl.sample.html @@ -1,38 +1,39 @@ -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
Hide/Show second group Pin/Unpin second group Move second group Pin/Unpin first group -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/grid-multi-row-layout/grid-mrl.sample.scss b/src/app/grid-multi-row-layout/grid-mrl.sample.scss index f4fcb04a59e..2ab1742e7ec 100644 --- a/src/app/grid-multi-row-layout/grid-mrl.sample.scss +++ b/src/app/grid-multi-row-layout/grid-mrl.sample.scss @@ -1,4 +1,9 @@ -.igx-button { - height: 2rem; - margin-left: 0.5rem; +:host { + display: grid; + gap: 1rem; +} + +.demo-actions { + display: flex; + gap: .5rem; } diff --git a/src/app/pageHeading/pageHeading.styles.scss b/src/app/pageHeading/pageHeading.styles.scss index df54b1d38e8..ba9fabad002 100644 --- a/src/app/pageHeading/pageHeading.styles.scss +++ b/src/app/pageHeading/pageHeading.styles.scss @@ -8,6 +8,16 @@ igx-input-group { display: block grid !important; } + + .igx-navbar__left:not(:empty) { + margin-inline: 0; + } + + @include tokens(navbar-theme( + $background: var(--ig-gray-100), + $disable-shadow: true, + $border-color: var(--ig-gray-300) + )); } .header-actions { diff --git a/src/app/pageHeading/pageHeading.template.html b/src/app/pageHeading/pageHeading.template.html index afed770b61e..f00e56896f1 100644 --- a/src/app/pageHeading/pageHeading.template.html +++ b/src/app/pageHeading/pageHeading.template.html @@ -10,7 +10,7 @@ -
+ diff --git a/src/app/properties-panel/properties-panel.component.html b/src/app/properties-panel/properties-panel.component.html index 6d31db52f88..1fa51950f40 100644 --- a/src/app/properties-panel/properties-panel.component.html +++ b/src/app/properties-panel/properties-panel.component.html @@ -1,6 +1,5 @@
- settings Properties Panel
@for( key of getConfigKeys(); track key ) { diff --git a/src/app/properties-panel/properties-panel.component.scss b/src/app/properties-panel/properties-panel.component.scss index 6de6df5bf2a..df2093dea26 100644 --- a/src/app/properties-panel/properties-panel.component.scss +++ b/src/app/properties-panel/properties-panel.component.scss @@ -36,6 +36,7 @@ font-weight: 600; font-size: 1rem; gap: .5rem; + padding-bottom: 1rem; igx-icon { --size: 2rem; diff --git a/src/app/properties-panel/properties-panel.component.ts b/src/app/properties-panel/properties-panel.component.ts index 78203bb8e8d..d9452b65e02 100644 --- a/src/app/properties-panel/properties-panel.component.ts +++ b/src/app/properties-panel/properties-panel.component.ts @@ -8,7 +8,6 @@ import { IgxDatePickerComponent, IgxDateRangePickerComponent, IgxDateTimeEditorModule, - IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, @@ -45,7 +44,6 @@ import { IgxTimePickerComponent, IgxDateTimeEditorModule, IgxDateRangePickerComponent, - IgxIconComponent ] }) diff --git a/src/styles/_demo-theme.scss b/src/styles/_demo-theme.scss index c23da5c0b05..46f15ddc02c 100644 --- a/src/styles/_demo-theme.scss +++ b/src/styles/_demo-theme.scss @@ -17,12 +17,12 @@ body { @include typography($font-family: $typeface, $type-scale: $type-scale); @include theme($palette: $palette, $schema: $schema); -.nav-header { +.demos-logo { --logo-fill: #27265f; display: flex; align-items: center; - gap: 1rem; + gap: .5rem; svg { height: 2rem; From b6cf64e524836f30b461a897a06f4b13c1994c17 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 27 Mar 2026 11:38:38 +0200 Subject: [PATCH 169/189] chore(dependencies, themes): update `igniteui-theming` to `v25.1.0-beta.2` and switch to Material theme variables - Updated `igniteui-theming` dependency to `v25.1.0-beta.2` in `package.json` and `package-lock.json`. - Revert Indigo theme with Material theme --- package-lock.json | 10 +++++----- package.json | 2 +- src/styles/_variables.scss | 11 ++++------- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b846d00808..7068020da1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "file:../igniteui-theming/packages/theming/igniteui-theming-1.0.0.tgz", + "igniteui-theming": "v25.1.0-beta.2", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", @@ -14074,12 +14074,12 @@ } }, "node_modules/igniteui-theming": { - "version": "1.0.0", - "resolved": "file:../igniteui-theming/packages/theming/igniteui-theming-1.0.0.tgz", - "integrity": "sha512-9CsNmJQfWZWyMLjegh1pPsOD8eoPTrTYT2XE1A3ghsSFfQpKmY+Uv+7icwzhcAJGHtTOnOYjug8rargd4M5igw==", + "version": "25.1.0-beta.2", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.1.0-beta.2.tgz", + "integrity": "sha512-ud6SHqFw2xFMAclBOS3SyGCC6bOdLWLlmKR5cmChlvyDkDIrvCe0UALwU9XxzcdSz4mwD66sUKav5e5JquyKkw==", "license": "MIT", "dependencies": { - "@modelcontextprotocol/sdk": "^1.28.0", + "@modelcontextprotocol/sdk": "^1.25.0", "sass-embedded": "~1.92.1", "zod": "^3.25.76" }, diff --git a/package.json b/package.json index c71c95ddbf4..b12eb9e7c56 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "file:../igniteui-theming/packages/theming/igniteui-theming-1.0.0.tgz", + "igniteui-theming": "v25.1.0-beta.2", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index d2caaef4eb8..0c47587a4b1 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,13 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/core/src/core/styles/themes' as *; -$palette: $light-indigo-palette; -$schema: $light-indigo-schema; -$typeface: $indigo-typeface; -$type-scale: $indigo-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); $foreground-color: var(--ig-gray-900); - - From dd40539d84afafbe6e668b0d3fd2de0637de6ca9 Mon Sep 17 00:00:00 2001 From: didimmova Date: Mon, 30 Mar 2026 10:18:10 +0300 Subject: [PATCH 170/189] feat(checkbox): implement disabled-fill-color and apply to all themes --- .../checkbox/src/checkbox/themes/_base.scss | 22 +++++++++++++++++++ .../checkbox/themes/shared/_bootstrap.scss | 22 ------------------- .../src/checkbox/themes/shared/_fluent.scss | 19 ++++------------ .../src/checkbox/themes/shared/_indigo.scss | 10 --------- .../src/checkbox/themes/shared/_material.scss | 22 ------------------- 5 files changed, 26 insertions(+), 69 deletions(-) diff --git a/projects/igniteui-angular/checkbox/src/checkbox/themes/_base.scss b/projects/igniteui-angular/checkbox/src/checkbox/themes/_base.scss index fac16063250..ccdd87e9b1e 100644 --- a/projects/igniteui-angular/checkbox/src/checkbox/themes/_base.scss +++ b/projects/igniteui-angular/checkbox/src/checkbox/themes/_base.scss @@ -398,6 +398,28 @@ $_theme: $material; } } + @include mx(checked, disabled) { + @include e(composite) { + background: var-get($_theme, 'disabled-fill-color'); + border-color: transparent; + } + + @include e(composite-mark) { + stroke: var-get($_theme, 'disabled-tick-color'); + } + } + + @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'); + } + } + @include m(plain) { @include e(composite) { transition: none; diff --git a/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_bootstrap.scss b/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_bootstrap.scss index 52f52696aa2..01812a7b932 100644 --- a/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_bootstrap.scss @@ -92,26 +92,4 @@ $_theme: $bootstrap; border-color: transparent; } } - - @include mx(checked, 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'); - } - } - - @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/checkbox/src/checkbox/themes/shared/_fluent.scss b/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_fluent.scss index ef0d7549439..7cf6e8e5d39 100644 --- a/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_fluent.scss @@ -152,35 +152,24 @@ $_theme: $fluent; } } - @include mx(indeterminate, invalid, disabled) { + @include mx(invalid, disabled) { @include e(composite) { border-color: var-get($_theme, 'disabled-color'); } } - @include mx(indeterminate, invalid, checked) { + @include mx(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 e(composite-mark) { - stroke: var-get($_theme, 'disabled-tick-color'); - } - } - @include mx(disabled, indeterminate) { @include e(composite) { - background: transparent; + border-color: var-get($_theme, 'disabled-indeterminate-color'); &::before { - background: var-get($_theme, 'disabled-color'); + background: var-get($_theme, 'disabled-indeterminate-color'); } } diff --git a/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_indigo.scss b/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_indigo.scss index a06541ad757..777efebab9c 100644 --- a/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_indigo.scss @@ -152,22 +152,12 @@ $_theme: $indigo; } @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; diff --git a/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_material.scss b/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_material.scss index 06b0ed6e9a9..c5c8825a97d 100644 --- a/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_material.scss +++ b/projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_material.scss @@ -31,26 +31,4 @@ $_theme: $material; 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'); - } - } } From 20eb63970a396ea674f2db67adbb995895f8c693 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 30 Mar 2026 15:35:24 +0300 Subject: [PATCH 171/189] fix(scripts, dependencies): bring back concurrent tasks for styles watcher --- package-lock.json | 215 ++++++++++++++++++++++++++++++++-------------- package.json | 10 ++- 2 files changed, 158 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index a10091cc2fe..797d8448432 100644 --- a/package-lock.json +++ b/package-lock.json @@ -62,6 +62,7 @@ "@typescript-eslint/eslint-plugin": "^8.33.1", "@typescript-eslint/parser": "^8.33.1", "autoprefixer": "^10.4.16", + "concurrently": "^9.1.2", "del": "^6.0.0", "eslint": "^9.28.0", "fs-extra": "^11.3.0", @@ -94,6 +95,7 @@ "karma-spec-reporter": "^0.0.36", "lit-html": "^3.2.1", "ng-packagr": "^21.0.0", + "node-watch": "^0.7.4", "postcss": "^8.5.1", "postcss-scss": "^4.0.6", "prettier": "^3.3.3", @@ -9254,6 +9256,122 @@ "node": ">=0.10.0" } }, + "node_modules/concurrently": { + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz", + "integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "4.1.2", + "rxjs": "7.8.2", + "shell-quote": "1.8.3", + "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-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/concurrently/node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/concurrently/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "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/concurrently/node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/configstore": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", @@ -18887,6 +19005,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", @@ -22405,31 +22533,6 @@ "sassdoc-extras": "^2.5.0" } }, - "node_modules/sassdoc-theme-default/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/sassdoc-theme-default/node_modules/commander": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", @@ -22458,19 +22561,6 @@ "jsonfile": "^2.1.0" } }, - "node_modules/sassdoc-theme-default/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "extraneous": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/sassdoc-theme-default/node_modules/jsonfile": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz", @@ -22507,32 +22597,6 @@ } } }, - "node_modules/sassdoc-theme-default/node_modules/picomatch": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", - "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", - "extraneous": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/sassdoc-theme-default/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, "node_modules/sassdoc/node_modules/argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -23343,6 +23407,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.23.0", "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.23.0.tgz", @@ -25078,6 +25155,16 @@ "node": ">=6" } }, + "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/package.json b/package.json index 5f4e7e32737..a5f564051bb 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", "start:performance": "ng serve --project igniteui-angular-performance", "build": "npm run build:lib && npm run build:elements && npm run build:extras && npm run build:schematics && npm run build:migrations && npm run build:i18n", @@ -23,8 +23,10 @@ "test:i18n": "ts-node --skip-project ./projects/igniteui-angular/core/src/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", - "build:styles": "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:extras": "ng build igniteui-angular-extras --configuration production && npm run build:extras-migrations", "build:extras-migrations": "gulp copyExtrasMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular-extras/migrations/tsconfig.json", "test:extras": "ng test igniteui-angular-extras --watch=false --no-progress --code-coverage", @@ -117,6 +119,7 @@ "@typescript-eslint/eslint-plugin": "^8.33.1", "@typescript-eslint/parser": "^8.33.1", "autoprefixer": "^10.4.16", + "concurrently": "^9.1.2", "del": "^6.0.0", "eslint": "^9.28.0", "fs-extra": "^11.3.0", @@ -149,6 +152,7 @@ "karma-spec-reporter": "^0.0.36", "lit-html": "^3.2.1", "ng-packagr": "^21.0.0", + "node-watch": "^0.7.4", "postcss": "^8.5.1", "postcss-scss": "^4.0.6", "prettier": "^3.3.3", From 4a5a1b23e9ff3aeb143c215967458cd7c3de4d99 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 30 Mar 2026 15:52:48 +0300 Subject: [PATCH 172/189] fix(themes): update filtered icon across themes - Replaced `.icon--filtered` with `.igx-excel-filter__icon--filtered` in all themes. - Added `display: inline-flex` style for filtered icon in base theme. - Removed unnecessary `@extend` statement in `_base.scss` --- projects/igniteui-angular/grids/themes/_base.scss | 3 +-- projects/igniteui-angular/grids/themes/shared/_bootstrap.scss | 2 +- projects/igniteui-angular/grids/themes/shared/_fluent.scss | 2 +- projects/igniteui-angular/grids/themes/shared/_indigo.scss | 2 +- projects/igniteui-angular/grids/themes/shared/_material.scss | 2 +- 5 files changed, 5 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index ab31dc03b84..a40e73e86ef 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -2164,6 +2164,7 @@ $z-grid-loading: 10003; } .igx-excel-filter__icon--filtered { + display: inline-flex; color: var-get($theme, 'sorted-header-icon-color'); &:hover, @@ -2383,7 +2384,6 @@ $z-grid-loading: 10003; opacity: 1; } } - @extend %igx-grid-th--filtrable-sortable !optional; } @include mx(selectable, sorted) { @@ -2878,5 +2878,4 @@ $z-grid-loading: 10003; } } } - } diff --git a/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss index 480e95f8e58..34fee932199 100644 --- a/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss @@ -122,7 +122,7 @@ } @include e(icons) { - .icon--filtered, + .igx-excel-filter__icon--filtered, .sort-icon { igx-icon { --size: var(--ig-icon-size, #{rem(15px)}); diff --git a/projects/igniteui-angular/grids/themes/shared/_fluent.scss b/projects/igniteui-angular/grids/themes/shared/_fluent.scss index 92709d2de76..4af329aef16 100644 --- a/projects/igniteui-angular/grids/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/grids/themes/shared/_fluent.scss @@ -15,7 +15,7 @@ $_theme: $fluent; } @include e(icons) { - .icon--filtered, + .igx-excel-filter__icon--filtered, .sort-icon { igx-icon { --size: var(--ig-icon-size, #{rem(15px)}); diff --git a/projects/igniteui-angular/grids/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/themes/shared/_indigo.scss index d34db3e2acf..ffe22c90338 100644 --- a/projects/igniteui-angular/grids/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/grids/themes/shared/_indigo.scss @@ -150,7 +150,7 @@ } @include e(icons) { - .icon--filtered, + .igx-excel-filter__icon--filtered, .sort-icon { igx-icon { --component-size: 2; diff --git a/projects/igniteui-angular/grids/themes/shared/_material.scss b/projects/igniteui-angular/grids/themes/shared/_material.scss index c451ea28e05..91109257747 100644 --- a/projects/igniteui-angular/grids/themes/shared/_material.scss +++ b/projects/igniteui-angular/grids/themes/shared/_material.scss @@ -126,7 +126,7 @@ } @include e(icons) { - .icon--filtered, + .igx-excel-filter__icon--filtered, .sort-icon { igx-icon { --size: var(--ig-icon-size, #{rem(15px)}); From e0438737dced3dd7e55eead36b076cdcc6996aaa Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 30 Mar 2026 17:27:57 +0300 Subject: [PATCH 173/189] fix(input-group): prevent hints from flickering when value is changed externally When wrapper components (e.g. combo) project hints into the input-group, Angular's @ContentChildren re-evaluation during change detection would overwrite the hints set via the setter, causing the @if (hasHints) condition to momentarily evaluate to false and destroy the hint DOM. Separate @ContentChildren hints (_ownHints) from externally set hints (_externalHints) so they no longer conflict during change detection. --- .../src/input-group/input-group.component.ts | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts b/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts index 86b6bbacfd2..ba351e19da5 100644 --- a/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts +++ b/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts @@ -116,9 +116,21 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh @HostBinding('class.igx-input-group--warning') public hasWarning = false; - /** @hidden */ + /** + * @hidden + * Hints resolved via @ContentChildren — used for standalone input-group usage. + * Kept separate from _externalHints to avoid being overwritten by Angular's + * change detection re-evaluation of @ContentChildren, which caused hints + * projected through wrapper components (e.g. combo) to flicker/disappear. + */ @ContentChildren(IgxHintDirective, { read: IgxHintDirective, descendants: true }) - protected _hints: QueryList; + protected _ownHints: QueryList; + + /** + * Hints set explicitly by wrapper components (e.g. combo) via the `hints` setter. + * Takes precedence over _ownHints in `hasHints` to avoid CD timing conflicts. + */ + private _externalHints: QueryList; @ContentChildren(IgxPrefixDirective, { read: IgxPrefixDirective, descendants: true }) protected _prefixes: QueryList; @@ -279,12 +291,15 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh * ``` */ public get hasHints() { - return this._hints.length > 0; + // Prefer externally set hints (from wrapper components like combo) + // over @ContentChildren to avoid CD timing race conditions. + const hints = this._externalHints ?? this._ownHints; + return hints?.length > 0; } /** @hidden @internal */ public set hints(items: QueryList) { - this._hints = items; + this._externalHints = items; } /** @hidden @internal */ From c06b3115c5368f1b23faed10923a963fbf3d0aef Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 31 Mar 2026 11:13:08 +0300 Subject: [PATCH 174/189] fix(styles, samples): adjust drop-down and grid styles, add input placeholder - Removed unused SCSS styling for `igx-input-group` in `drop-down.sample.scss`. - Added `placeholder` attribute to input in `drop-down.sample.html`. - Updated grid styles in `_base.scss` for consistency and simplified border styling. --- projects/igniteui-angular/grids/themes/_base.scss | 12 ++++++------ src/app/drop-down/drop-down.sample.html | 1 + src/app/drop-down/drop-down.sample.scss | 4 ---- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index a40e73e86ef..e46063ee0ec 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -2791,17 +2791,17 @@ $z-grid-loading: 10003; } .igx-grid-thead__title, - .igx-grid__td { + .igx-grid__td { border-inline-end: $grid-header-border !important; - border-block-end: $grid-header-border !important; + border-block-end: $grid-header-border; } - .igx-grid__th { - border-block-end: $grid-header-border !important; + .igx-grid-th { + border-block-end: $grid-header-border; } - .igx-grid__th:only-child, - .igx-grid__th:last-child, + .igx-grid-thead__subgroup:only-child .igx-grid-th, + .igx-grid-thead__subgroup:last-child .igx-grid-th, .igx-grid__td:only-child, .igx-grid__td:last-child { border-block-end: 0; diff --git a/src/app/drop-down/drop-down.sample.html b/src/app/drop-down/drop-down.sample.html index c4013f74c38..3d64d50a011 100644 --- a/src/app/drop-down/drop-down.sample.html +++ b/src/app/drop-down/drop-down.sample.html @@ -110,6 +110,7 @@
Angular dropdown with action directive
[igxDropDownItemNavigation]="dropdown3" igxInput readonly="true" + placeholder="Select an item" [value]="dropdown3.selectedItem?.value.field" /> diff --git a/src/app/drop-down/drop-down.sample.scss b/src/app/drop-down/drop-down.sample.scss index 18f58b87d4a..62cc1d30b3f 100644 --- a/src/app/drop-down/drop-down.sample.scss +++ b/src/app/drop-down/drop-down.sample.scss @@ -24,10 +24,6 @@ .igx-button-group .igx-button { min-width: fit-content; } - - igx-input-group { - display: flex; - } } // TODO WHY WE NEED THIS? From 551771a03734574286338c156fc8ad7fe32f73ef Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 31 Mar 2026 17:23:22 +0300 Subject: [PATCH 175/189] refactor(samples, styling): revamp grid-pdf-export sample layout and styling - Replaced old SCSS structure with CSS Grid for modernized layout and consistency. - Introduced property panel for dynamic PDF export configuration. - Simplified and consolidated export functionality with `PropertyChangeService` integration. - Enhanced toolbar structure for better usability across all grid types. --- src/app/app.component.scss | 1 + .../grid-auto-size/grid-auto-size.sample.scss | 12 +- .../grid-pdf-export.sample.html | 254 ++++++++---------- .../grid-pdf-export.sample.scss | 190 ++++++------- .../grid-pdf-export/grid-pdf-export.sample.ts | 118 +++++--- 5 files changed, 279 insertions(+), 296 deletions(-) diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 23fe00a50b0..8aecb6a7278 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -66,6 +66,7 @@ min-height: calc(100% - (var(--demo-navbar-size) + var(--demos-gap) + (var(--content-spacing) * 2))); overflow-y: auto; padding: var(--content-spacing); + color: var(--ig-gray-900); } .demos-filter { diff --git a/src/app/grid-auto-size/grid-auto-size.sample.scss b/src/app/grid-auto-size/grid-auto-size.sample.scss index e35b44e5415..7e2bfc4d9c8 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.scss +++ b/src/app/grid-auto-size/grid-auto-size.sample.scss @@ -1,8 +1,6 @@ -.sample-buttons { - margin-top: 24px; -} - -[igxButton] { - margin-right: 8px; - margin-bottom: 8px; +:host { + display: grid; + gap: var(--demos-gap); + height: 100%; + align-items: start; } diff --git a/src/app/grid-pdf-export/grid-pdf-export.sample.html b/src/app/grid-pdf-export/grid-pdf-export.sample.html index 631a2b69d74..dd6efa13ecd 100644 --- a/src/app/grid-pdf-export/grid-pdf-export.sample.html +++ b/src/app/grid-pdf-export/grid-pdf-export.sample.html @@ -1,140 +1,9 @@ +

+ This demo shows how to use the IgxPdfExporterService API directly to export grids to PDF format. + Configure the export options using the right panel and click the export buttons. +

-

PDF Export Service Demo

-

- This demo shows how to use the IgxPdfExporterService API directly to export grids to PDF format. - Configure the export options using the controls below and click the export buttons. -

- - -
-

Export Options Configuration

- -
- - - - -
- -
- - - Portrait - Landscape - -
- -
- - - @for (size of pageSizes; track size) { - {{ size.toUpperCase() }} - } - -
- -
- - - - -
- -
- Show Table Borders -
-
- - -
-
-

Regular Grid (with Multi-Column Headers and Summaries)

- -
- - - - - - - - - - - - - - - - -
- - -
-
-

Tree Grid (with Hierarchy and Summaries)

- -
- - - - - - -
- - -
-
-

Hierarchical Grid (with Multi-Column Headers and Summaries)

- -
- - - - - - - - - - - - - - - - - - - - -
- - -
-
-

Pivot Grid (with Aggregated Data)

- -
- -
- - - -
-
- +

How to Use:

    @@ -145,15 +14,114 @@

    How to Use:

  1. Multi-column headers and summaries are automatically included in the export
  2. Pivot grids export with aggregated data values
+
+

Key Features:

    -
  • Direct API Usage: Uses IgxPdfExporterService.export() method directly
    • -
  • Configurable Options: Adjust orientation, page size, font size, and borders
    • -
  • Hierarchy Support: Tree and Hierarchical grids export with proper indentation
    • -
  • Multi-Column Headers: Column groups are preserved in the exported PDF
    • -
  • Summaries Support: Grid summaries are automatically exported to PDF
    • -
  • Pivot Grid Support: Pivot grids export with aggregated data and pivot structure
    • -
  • Multiple Grids: Export different grid types with the same configuration
    • +
  • Direct API Usage: Uses IgxPdfExporterService.export() method directly
    • +
  • Configurable Options: Adjust orientation, page size, font size, and borders
    • +
  • Hierarchy Support: Tree and Hierarchical grids export with proper indentation
    • +
  • Multi-Column Headers: Column groups are preserved in the exported PDF
    • +
  • Summaries Support: Grid summaries are automatically exported to PDF
    • +
  • Pivot Grid Support: Pivot grids export with aggregated data and pivot structure
    • +
  • Multiple Grids: Export different grid types with the same configuration
+
+ + +
+ + + + Regular Grid (with Multi-Column Headers and Summaries) + + + + + + + + + + + + + + + + + + + + + + + + + Tree Grid (with Hierarchy and Summaries) + + + + + + + + + + + + + + + Hierarchical Grid (with Multi-Column Headers and Summaries) + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + Pivot Grid (with Aggregated Data) + + + + + + + +
+
diff --git a/src/app/grid-pdf-export/grid-pdf-export.sample.scss b/src/app/grid-pdf-export/grid-pdf-export.sample.scss index cad5d5b061e..0bf29263271 100644 --- a/src/app/grid-pdf-export/grid-pdf-export.sample.scss +++ b/src/app/grid-pdf-export/grid-pdf-export.sample.scss @@ -1,115 +1,77 @@ - -.sample-title { - color: #333; - margin-bottom: 10px; -} - -.sample-description { - color: #666; - margin-bottom: 30px; - line-height: 1.6; -} - -.config-panel { - background: #f5f5f5; - border-radius: 8px; - padding: 20px; - margin-bottom: 30px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - - h3 { - margin-top: 0; - margin-bottom: 20px; - color: #333; - } -} - -.config-row { - margin-bottom: 15px; - display: inline-block; - margin-right: 20px; - min-width: 200px; - - igx-input-group { - width: 100%; - } -} - -.grid-container { - margin-bottom: 40px; - border: 1px solid #e0e0e0; - border-radius: 8px; - overflow: hidden; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); -} - -.grid-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 15px 20px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - - h3 { - margin: 0; - font-size: 18px; - } - - button { - background: white; - color: #667eea; - font-weight: 500; - - &:hover { - background: #f0f0f0; - } - } -} - -.info-section { - background: #e8f4f8; - border-left: 4px solid #2196F3; - padding: 20px; - border-radius: 4px; - margin-top: 30px; - - h4 { - color: #1976D2; - margin-top: 0; - margin-bottom: 15px; - } - - ol, ul { - line-height: 1.8; - color: #555; - - li { - margin-bottom: 8px; - } - } - - strong { - color: #1976D2; - } -} - -// Responsive design -@media (width <= 768px) { - .config-row { - display: block; - width: 100%; - margin-right: 0; - min-width: unset; - } - - .grid-header { - flex-direction: column; - gap: 10px; - align-items: flex-start; - - button { - width: 100%; - } - } +:host { + display: grid; + gap: var(--demos-gap); + + > p { + max-width: 70ch; + color: var(--ig-gray-600); + } + + .demo-export-btn { + --ig-size: 1; + } + + .sample-description { + color: #666; + margin-bottom: 30px; + line-height: 1.6; + } + + .igx-grid-toolbar { + --background-color: linear-gradient(130deg, transparent 0%, var(--ig-gray-100) 100%); + } + + .info-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--demos-gap); + } + + .info-section { + display: grid; + gap: var(--demos-gap); + grid-template-rows: auto auto 1fr; + align-items: start; + background: linear-gradient(120deg, var(--ig-gray-100) 0%, transparent 70%); + border-left: .2rem solid var(--ig-info-500); + padding: 1.5rem; + border-radius: .2rem; + color: var(--ig-gray-600); + + h4 { + color: var(--ig-info-500); + margin: 0; + } + + ol,ul { + margin: 0; + } + + ul { + span { + display: block; + color: var(--ig-info-500); + } + } + + ul,ol { + display: grid; + gap: var(--demos-gap); + padding-block-start: 0; + } + + strong { + color: var(--ig-gray-800); + } + } + + .grids-container { + display: grid; + gap: var(--demos-gap); + } + + .demo-pivot-grid-container { + display: flex; + gap: calc(var(--demos-gap) / 2); + } } diff --git a/src/app/grid-pdf-export/grid-pdf-export.sample.ts b/src/app/grid-pdf-export/grid-pdf-export.sample.ts index 410ca32f6e6..fccb698b4b8 100644 --- a/src/app/grid-pdf-export/grid-pdf-export.sample.ts +++ b/src/app/grid-pdf-export/grid-pdf-export.sample.ts @@ -1,5 +1,4 @@ -import { Component, ViewChild, inject } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { Component, DestroyRef, ViewChild, inject, signal } from '@angular/core'; import { IgxGridComponent, IgxColumnComponent, @@ -9,16 +8,11 @@ import { IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxButtonDirective, - IgxSwitchComponent, - IgxSelectComponent, - IgxSelectItemComponent, - IgxInputGroupComponent, - IgxLabelDirective, - IgxInputDirective, IgxColumnGroupComponent, IgxPivotGridComponent, - IgxPivotDataSelectorComponent + IgxPivotDataSelectorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular'; +import { PropertyPanelConfig, PropertyChangeService, Properties } from '../properties-panel/property-change.service'; @Component({ selector: 'app-grid-pdf-export-sample', @@ -34,18 +28,15 @@ import { IgxPivotDataSelectorComponent, IgxRowIslandComponent, IgxButtonDirective, - IgxSwitchComponent, - IgxSelectComponent, - IgxSelectItemComponent, - IgxInputGroupComponent, - IgxLabelDirective, - IgxInputDirective, - FormsModule + IgxGridToolbarComponent, + IgxGridToolbarActionsComponent, + IgxGridToolbarTitleComponent, ], providers: [IgxPdfExporterService] }) export class GridPdfExportSampleComponent { private pdfExporter = inject(IgxPdfExporterService); + private pcs = inject(PropertyChangeService); @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; @@ -59,6 +50,76 @@ export class GridPdfExportSampleComponent { @ViewChild('pivotGrid', { static: true }) public pivotGrid: IgxPivotGridComponent; + public panelConfig: PropertyPanelConfig = { + fileName: { + label: 'File Name', + control: { + type: 'text', + defaultValue: 'GridExport' + } + }, + pageOrientation: { + label: 'Page Orientation', + control: { + type: 'button-group', + options: ['portrait', 'landscape'], + defaultValue: 'landscape' + } + }, + pageSize: { + label: 'Page Size', + control: { + type: 'select', + options: ['a3', 'a4', 'a5', 'letter', 'legal'], + defaultValue: 'a4' + } + }, + fontSize: { + label: 'Font Size', + control: { + type: 'number', + defaultValue: 10, + min: 8, + max: 16 + } + }, + showTableBorders: { + label: 'Show Table Borders', + control: { + type: 'boolean', + defaultValue: true + } + }, + }; + + public properties = signal( + Object.fromEntries( + Object.keys(this.panelConfig).map((key) => { + const control = this.panelConfig[key]?.control; + return [key, control?.defaultValue]; + }) + ) as Properties + ); + + constructor(private destroyRef: DestroyRef) { + this.pcs.setPanelConfig(this.panelConfig); + + const propertyChange = this.pcs.propertyChanges.subscribe((updatedProperties) => { + const mergedProperties = Object.fromEntries( + Object.entries(this.panelConfig).map(([key, config]) => [ + key, + updatedProperties[key] !== undefined + ? updatedProperties[key] + : config?.control?.defaultValue + ]) + ) as Properties; + + this.properties.set(mergedProperties); + }); + + this.destroyRef.onDestroy(() => propertyChange.unsubscribe()); + } + // Grid data public gridData = [ { ID: 1, Name: 'Product A', Category: 'Electronics', Price: 299.99, InStock: true, LaunchDate: new Date(2023, 0, 15) }, @@ -153,14 +214,6 @@ export class GridPdfExportSampleComponent { } ]; - // Export options - public fileName = 'GridExport'; - public pageOrientation: 'portrait' | 'landscape' = 'landscape'; - public pageSize = 'a4'; - public showTableBorders = true; - public fontSize = 10; - public pageSizes = ['a3', 'a4', 'a5', 'letter', 'legal']; - public exportGrid() { const options = this.createExportOptions(); this.pdfExporter.export(this.grid1, options); @@ -168,28 +221,29 @@ export class GridPdfExportSampleComponent { public exportTreeGrid() { const options = this.createExportOptions(); - options.fileName = `TreeGrid_${this.fileName}`; + options.fileName = `TreeGrid_${this.properties().fileName}`; this.pdfExporter.export(this.treeGrid, options); } public exportHierarchicalGrid() { const options = this.createExportOptions(); - options.fileName = `HierarchicalGrid_${this.fileName}`; + options.fileName = `HierarchicalGrid_${this.properties().fileName}`; this.pdfExporter.export(this.hierarchicalGrid, options); } public exportPivotGrid() { const options = this.createExportOptions(); - options.fileName = `PivotGrid_${this.fileName}`; + options.fileName = `PivotGrid_${this.properties().fileName}`; this.pdfExporter.export(this.pivotGrid, options); } private createExportOptions(): IgxPdfExporterOptions { - const options = new IgxPdfExporterOptions(this.fileName); - options.pageOrientation = this.pageOrientation; - options.pageSize = this.pageSize; - options.showTableBorders = this.showTableBorders; - options.fontSize = this.fontSize; + const props = this.properties(); + const options = new IgxPdfExporterOptions(props.fileName); + options.pageOrientation = props.pageOrientation; + options.pageSize = props.pageSize; + options.showTableBorders = props.showTableBorders; + options.fontSize = props.fontSize; return options; } } From 9dcd93ee390e98fdc20b105139c5e5748c4ae9d6 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 1 Apr 2026 13:08:39 +0300 Subject: [PATCH 176/189] refactor(themes): consolidate toolbar SCSS files, remove redundancies - Merged and streamlined SCSS structure for grid toolbar themes. - Removed redundant dark and light list/toolbar styling files. - Adjusted `_base.scss` to use unified theme tokens for consistency. - Cleaned up unused variables and improved maintainability. --- .../grids/core/src/toolbar/themes/_base.scss | 28 +++++++++---------- .../core/src/toolbar/themes/dark/_index.scss | 9 ++++-- .../themes/dark/{toolbar => }/_tokens.scss | 0 .../src/toolbar/themes/dark/list/_index.scss | 6 ---- .../src/toolbar/themes/dark/list/_tokens.scss | 11 -------- .../toolbar/themes/dark/toolbar/_index.scss | 7 ----- .../core/src/toolbar/themes/light/_index.scss | 9 ++++-- .../src/toolbar/themes/light/_tokens.scss | 10 +++++++ .../src/toolbar/themes/light/list/_index.scss | 6 ---- .../toolbar/themes/light/list/_tokens.scss | 12 -------- .../toolbar/themes/light/toolbar/_index.scss | 7 ----- .../toolbar/themes/light/toolbar/_tokens.scss | 12 -------- 12 files changed, 37 insertions(+), 80 deletions(-) rename projects/igniteui-angular/grids/core/src/toolbar/themes/dark/{toolbar => }/_tokens.scss (100%) delete mode 100644 projects/igniteui-angular/grids/core/src/toolbar/themes/dark/list/_index.scss delete mode 100644 projects/igniteui-angular/grids/core/src/toolbar/themes/dark/list/_tokens.scss delete mode 100644 projects/igniteui-angular/grids/core/src/toolbar/themes/dark/toolbar/_index.scss create mode 100644 projects/igniteui-angular/grids/core/src/toolbar/themes/light/_tokens.scss delete mode 100644 projects/igniteui-angular/grids/core/src/toolbar/themes/light/list/_index.scss delete mode 100644 projects/igniteui-angular/grids/core/src/toolbar/themes/light/list/_tokens.scss delete mode 100644 projects/igniteui-angular/grids/core/src/toolbar/themes/light/toolbar/_index.scss delete mode 100644 projects/igniteui-angular/grids/core/src/toolbar/themes/light/toolbar/_tokens.scss diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/_base.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/_base.scss index 2fed7b09a8a..515522c8f52 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/_base.scss +++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/_base.scss @@ -3,11 +3,9 @@ @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/color/functions' as *; @use 'styles/themes/standalone' as *; -@use './light/list/tokens' as list; -@use './light/toolbar/tokens' as toolbar; +@use 'light/tokens' as *; -$_theme: toolbar.$base; -$_theme-dd: list.$base; +$theme: $base; @include layer(base) { @include b(igx-grid-toolbar) { @@ -21,10 +19,10 @@ $_theme-dd: list.$base; justify-content: space-between; grid-row: 1; font-size: rem(16px); - border-bottom: rem(1px) solid var-get($_theme, 'border-color'); - background: var-get($_theme, 'background-color'); + border-bottom: rem(1px) solid var-get($theme, 'border-color'); + background: var-get($theme, 'background-color'); height: auto; - min-height: var-get($_theme, 'size'); + min-height: var-get($theme, 'size'); padding-block: 0; padding-inline-start: pad-inline(rem(12px), rem(16px), rem(24px)); padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px)); @@ -57,7 +55,7 @@ $_theme-dd: list.$base; @include e(title) { @include ellipsis(); - color: var-get($_theme, 'title-text-color'); + color: var-get($theme, 'title-text-color'); flex: 1 1 auto; max-width: 40ch; margin-inline-end: rem(16px); @@ -111,7 +109,7 @@ $_theme-dd: list.$base; bottom: rem(-1px); height: rem(2px); overflow: hidden; - background: var-get($_theme, 'background-color'); + background: var-get($theme, 'background-color'); igx-linear-bar > * { border-radius: 0; @@ -128,7 +126,7 @@ $_theme-dd: list.$base; @include e(dd-list){ list-style: none; - background: var-get($_theme-dd, 'dropdown-background'); + background: var-get($theme, 'dropdown-background'); margin: 0; padding: 0; box-shadow: var(--ig-elevation-8); @@ -138,17 +136,17 @@ $_theme-dd: list.$base; cursor: pointer; position: relative; padding: rem(8px) rem(16px); - color: var-get($_theme-dd, 'item-text-color'); + color: var-get($theme, 'item-text-color'); white-space: nowrap; &:hover { - background: var-get($_theme-dd, 'item-hover-background'); - color: var-get($_theme-dd, 'item-hover-text-color'); + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-text-color'); } &:focus { - background: var-get($_theme-dd, 'item-focus-background'); - color: var-get($_theme-dd, 'item-focus-text-color'); + background: var-get($theme, 'item-focus-background'); + color: var-get($theme, 'item-focus-text-color'); } } } diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_index.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_index.scss index ba5a4ee60fb..b91e53b68f5 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_index.scss +++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_index.scss @@ -1,2 +1,7 @@ -@forward 'list'; -@forward 'toolbar'; +@use 'sass:meta'; +@use 'sass:map'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$toolbar-tokens: map.remove(meta.module-variables(tokens), 'props'); +@include themes(igx-grid-toolbar, $toolbar-tokens, dark); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/toolbar/_tokens.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_tokens.scss similarity index 100% rename from projects/igniteui-angular/grids/core/src/toolbar/themes/dark/toolbar/_tokens.scss rename to projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_tokens.scss diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/list/_index.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/list/_index.scss deleted file mode 100644 index ff88e3fb56c..00000000000 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/list/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use 'sass:meta'; -@use 'tokens'; -@use 'styles/themes/standalone' as *; - -$list-tokens: meta.module-variables(tokens); -@include themes(igx-grid-toolbar__dd-list, $list-tokens, dark); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/list/_tokens.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/list/_tokens.scss deleted file mode 100644 index e7f900a7fb1..00000000000 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/list/_tokens.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:list'; -@use 'styles/themes/standalone' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-toolbar' as *; - -$props: ('background-color', 'title-text-color', 'border-color', 'size'); - -$material: list.nth(split-map(digest-schema($dark-material-grid-toolbar), $props), 2); -$bootstrap: list.nth(split-map(digest-schema($dark-bootstrap-grid-toolbar), $props), 2); -$fluent: list.nth(split-map(digest-schema($dark-fluent-grid-toolbar), $props), 2); -$indigo: list.nth(split-map(digest-schema($dark-indigo-grid-toolbar), $props), 2); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/toolbar/_index.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/toolbar/_index.scss deleted file mode 100644 index b91e53b68f5..00000000000 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/toolbar/_index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'sass:meta'; -@use 'sass:map'; -@use 'tokens'; -@use 'styles/themes/standalone' as *; - -$toolbar-tokens: map.remove(meta.module-variables(tokens), 'props'); -@include themes(igx-grid-toolbar, $toolbar-tokens, dark); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_index.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_index.scss index ba5a4ee60fb..0290071f997 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_index.scss +++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_index.scss @@ -1,2 +1,7 @@ -@forward 'list'; -@forward 'toolbar'; +@use 'sass:meta'; +@use 'sass:map'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid-toolbar, $tokens, light); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_tokens.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_tokens.scss new file mode 100644 index 00000000000..941da2dc3d4 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_tokens.scss @@ -0,0 +1,10 @@ +@use 'sass:list'; +@use 'styles/themes/standalone' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *; + +$base: digest-schema($light-grid-toolbar); +$material: digest-schema($material-grid-toolbar); +$bootstrap: digest-schema($bootstrap-grid-toolbar); +$fluent: digest-schema($fluent-grid-toolbar); +$indigo: digest-schema($indigo-grid-toolbar); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/list/_index.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/list/_index.scss deleted file mode 100644 index 9721402a134..00000000000 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/list/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use 'sass:meta'; -@use 'tokens'; -@use 'styles/themes/standalone' as *; - -$list-tokens: meta.module-variables(tokens); -@include themes(igx-grid-toolbar__dd-list, $list-tokens, light); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/list/_tokens.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/list/_tokens.scss deleted file mode 100644 index 6af07f6cebe..00000000000 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/list/_tokens.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'sass:list'; -@use 'styles/themes/standalone' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *; - -$props: ('background-color', 'title-text-color', 'border-color', 'size'); - -$base: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 2); -$material: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 2); -$bootstrap: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 2); -$fluent: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 2); -$indigo: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 2); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/toolbar/_index.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/toolbar/_index.scss deleted file mode 100644 index 04406368d49..00000000000 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/toolbar/_index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'sass:meta'; -@use 'sass:map'; -@use 'tokens'; -@use 'styles/themes/standalone' as *; - -$toolbar-tokens: map.remove(meta.module-variables(tokens), 'props'); -@include themes(igx-grid-toolbar, $toolbar-tokens, light); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/toolbar/_tokens.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/toolbar/_tokens.scss deleted file mode 100644 index 8526205ff2b..00000000000 --- a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/toolbar/_tokens.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'sass:list'; -@use 'styles/themes/standalone' as *; -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *; - -$props: ('background-color', 'title-text-color', 'border-color', 'size'); - -$base: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 1); -$material: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 1); -$bootstrap: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 1); -$fluent: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 1); -$indigo: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 1); From 268a345817a5e22af8785b2b07d565e0f731ab1a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 1 Apr 2026 14:16:07 +0300 Subject: [PATCH 177/189] fix(input-group): move styles to material them for lable positioning - added `--_bundle-row` and `--_hint-row` variables for `.igx-input-group:has(:not(.igx-input-group__label))`. - Ensured consistency across base and material theme SCSS files. --- .../input-group/src/input-group/themes/_base.scss | 6 ------ .../input-group/src/input-group/themes/shared/material.scss | 5 +++++ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss index cb549682a68..644c24fcdb6 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss @@ -520,12 +520,6 @@ $transition-timing: .25s $out-cubic; } /* stylelint-enable max-nesting-depth */ } - - } - - .igx-input-group:has(:not(.igx-input-group__label)) { - --_bundle-row: 1; - --_hint-row: 2; } igx-combo .igx-input-group:not(.igx-input-group--disabled), diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss index e08eb203a1e..533f6ce484c 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/material.scss @@ -29,6 +29,11 @@ $input-bottom-spacing: rem(6px); --_bundle-row: 1; --_hint-row: 2; } + + .igx-input-group:has(:not(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } row-gap: rem(4px); From 40e0901d129bb506da9974f43b1286f12dd5d6fc Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 1 Apr 2026 16:49:13 +0300 Subject: [PATCH 178/189] refactor(samples, styles): simplify and modernize component samples layout - Switched from custom flexbox layouts to responsive CSS Grid for cleaner structure and better alignment. - Replaced old `items-wrapper` and related styles with streamlined `:host`-based grid layout. - Unified button and form sample styles using updated variables and semantic class names. - Integrated Ignite UI Material theme tokens for consistency. - Adjusted SCSS imports for modularity and removed redundant encapsulation. --- .../icon-button/_icon-button-theme.scss | 4 + src/app/app.component.html | 3 - src/app/app.component.ts | 3 +- src/app/button/button.sample.html | 87 +++++++------- src/app/button/button.sample.scss | 26 ++-- src/app/button/button.sample.ts | 3 - src/app/label/label.sample.html | 30 ++--- src/app/label/label.sample.scss | 91 +++++++------- src/app/tabs-routing/tabs-routing.sample.html | 111 +++++++----------- src/app/tabs-routing/tabs-routing.sample.scss | 66 +---------- src/app/tabs-routing/tabs-routing.sample.ts | 18 ++- 11 files changed, 187 insertions(+), 255 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss index 703feb26870..cd27497fa99 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss @@ -79,6 +79,10 @@ igx-icon { --size: #{$icon-in-button-size}; } + + &:focus-visible { + outline: none; + } } @if $variant == 'fluent' { diff --git a/src/app/app.component.html b/src/app/app.component.html index 55189077a81..f10477f36bf 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -116,9 +116,6 @@

{{urlIcon}}{{urlString}}

- - - diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 67436d6f68c..79dd8877995 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -831,7 +831,8 @@ export class AppComponent implements OnInit { iconService.setFamily('fa-brands', { className: 'fab', type: 'font' }); router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { - for (const component of this.componentLinks) { + const allLinks = [...this.componentLinks, ...this.directiveLinks, ...this.styleLinks]; + for (const component of allLinks) { if (component.link === router.url) { this.urlString = component.name; this.urlIcon = component.icon; diff --git a/src/app/button/button.sample.html b/src/app/button/button.sample.html index 445767ca297..d2026a61a4f 100644 --- a/src/app/button/button.sample.html +++ b/src/app/button/button.sample.html @@ -1,49 +1,44 @@ -
-
-

Angular Button

-

WC Button

-
+
+

Angular

+ +
-
-
- -
-
- - @if(hasPrefix) { - - } - Button - @if(hasSuffix) { - - } - -
-
+
+

Web component

+ + @if(hasPrefix) { + + } + Button + @if(hasSuffix) { + + } + +
- -
- - - + +
+ + + + + + + +
+ - - - -
- -
diff --git a/src/app/button/button.sample.scss b/src/app/button/button.sample.scss index 10f6686762a..b478e6afa1c 100644 --- a/src/app/button/button.sample.scss +++ b/src/app/button/button.sample.scss @@ -1,14 +1,18 @@ -.columns-container{ - margin: 24px 16px; -} - -.title, .buttons-sample { - columns: 2 1vw; - justify-items: center; -} +:host { + display: flex; + flex-wrap: wrap; + gap: calc(var(--demos-gap) * 3); + padding: var(--content-spacing); + justify-content: center; + text-align: center; -.custom-controls { - display: grid; - row-gap: 1rem; + .button-demo { + min-width: 200px; + } + + .button-demo__title { + font-size: 1.2rem; + margin-block-end: 0.5rem; + } } diff --git a/src/app/button/button.sample.ts b/src/app/button/button.sample.ts index 54fabb6097d..71c8c72bd90 100644 --- a/src/app/button/button.sample.ts +++ b/src/app/button/button.sample.ts @@ -5,14 +5,12 @@ import { OnInit, TemplateRef, ViewChild, - ViewEncapsulation, } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IgxButtonDirective, IgxIconComponent, IgxSwitchComponent, - IgSizeDirective, } from 'igniteui-angular'; import { defineComponents, @@ -37,7 +35,6 @@ registerIconFromText('face', face); styleUrls: ['button.sample.scss'], templateUrl: 'button.sample.html', schemas: [CUSTOM_ELEMENTS_SCHEMA], - encapsulation: ViewEncapsulation.None, imports: [ FormsModule, IgxSwitchComponent, diff --git a/src/app/label/label.sample.html b/src/app/label/label.sample.html index b403ee7f4d4..888b220bd87 100644 --- a/src/app/label/label.sample.html +++ b/src/app/label/label.sample.html @@ -1,42 +1,42 @@ -
- Igx Label on native form elements - +
+Label directive in alongside native form html elements
-
+
-
+
-
+
-
-
+
+
-
+
-
+
-
+
-
+
- +
- -
+ +
+ diff --git a/src/app/label/label.sample.scss b/src/app/label/label.sample.scss index 87cca9ceb6e..79c384cce21 100644 --- a/src/app/label/label.sample.scss +++ b/src/app/label/label.sample.scss @@ -1,43 +1,50 @@ -%f-column { - display: flex; - flex-direction: column; -} - -.form-container { - @extend %f-column; - - gap: 24px; - - form { - @extend %f-column; - - justify-content: center; - gap: 24px; - } - - span { - font-size: 24px; - } - - section { - display: flex; - gap: 6px; - } - - form > div { - @extend %f-column; - - align-items: flex-start; - justify-content: center; - gap: 8px; - - div { - display: flex; - gap: 6px; - } - } - - input { - margin: 0; - } +:host { + fieldset { + border: 1px solid var(--ig-gray-200); + border-radius: .5rem; + padding: var(--content-spacing); + } + + form { + display: grid; + gap: var(--demos-gap); + } + + .demo-form-group { + display: flex; + align-items: center; + gap: .5rem; + } + + .demo-form-group--column { + flex-direction: column; + align-items: start; + } + + .demo-color-input { + border: 2px solid var(--ig-gray-100); + width: 1.5rem; + height: 1.5rem; + overflow: hidden; + position: relative; + } + + input[type="color"] { + -webkit-appearance: none; + border: none; + inset: 0; + position: absolute; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background: transparent; + } + + input[type="color"]::-webkit-color-swatch-wrapper { + padding: 0; + } + input[type="color"]::-webkit-color-swatch { + border: none; + } } diff --git a/src/app/tabs-routing/tabs-routing.sample.html b/src/app/tabs-routing/tabs-routing.sample.html index 289c6d27cac..a3f354751b0 100644 --- a/src/app/tabs-routing/tabs-routing.sample.html +++ b/src/app/tabs-routing/tabs-routing.sample.html @@ -1,85 +1,60 @@ -
-
-

Routing sample

+ + + + + + - - - - - - - -
- - - + + - + - folder - Tab 1 - - + > + folder + Tab 1 + + - - + - folder - Tab 2 - - + > + folder + Tab 2 + + - - + - folder - Tab 3 - - - + > + folder + Tab 3 + + + + + - -
- -
-
-
diff --git a/src/app/tabs-routing/tabs-routing.sample.scss b/src/app/tabs-routing/tabs-routing.sample.scss index ac7d4165fdb..0afdeb2d008 100644 --- a/src/app/tabs-routing/tabs-routing.sample.scss +++ b/src/app/tabs-routing/tabs-routing.sample.scss @@ -1,61 +1,7 @@ -.items-wrapper { - display: flex; - flex-direction: column; -} - -.items-wrapper__item { - width: 100%; - padding: 20px; - min-width: 250px; - margin-bottom: 30px; -} - -@media only screen and (max-width: 710px) { - .items-wrapper__item { - padding: 0; - } -} - -.my-tab-content { - padding: 15px; -} - -.my-tab-content h3 { - font-size: 20px; - font-weight: 900; -} - -.design-1 .my-tab-content { - background: #f9f3c9; - padding: 15px; -} - -.design-1 .my-tab-content h3 { - margin: 0 10px 0 0; -} - -.design-1 .my-tab-content p { - margin-bottom: 0; -} - -.item { - display: flex; - align-items: center; - justify-content: space-between; -} - -.item > [igxLabel], -.item > .person { - position: absolute; - margin-left: 72px; -} - -.person .name { - padding: 0; - margin: 0; -} - -.person .phone { - font-size: 12px; - color: gray; +:host { + display: grid; + gap: var(--demos-gap); + max-width: 700px; + width: 100%; + margin: 0 auto; } diff --git a/src/app/tabs-routing/tabs-routing.sample.ts b/src/app/tabs-routing/tabs-routing.sample.ts index 542c9c27b6d..f0b5e64d707 100644 --- a/src/app/tabs-routing/tabs-routing.sample.ts +++ b/src/app/tabs-routing/tabs-routing.sample.ts @@ -1,13 +1,20 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router'; -import { IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxButtonGroupComponent, IgxIconComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent, ITabsSelectedItemChangeEventArgs } from 'igniteui-angular'; - +import { + IGX_BUTTON_GROUP_DIRECTIVES, + IGX_TABS_DIRECTIVES, + IgxIconComponent, + IgxTabHeaderComponent, + IgxTabItemComponent, + IgxTabsComponent, + ITabsSelectedItemChangeEventArgs +} from 'igniteui-angular'; @Component({ selector: 'app-tabs-routing-sample', styleUrls: ['tabs-routing.sample.scss'], templateUrl: 'tabs-routing.sample.html', - imports: [IgxButtonGroupComponent, IgxTabsComponent, IgxTabItemComponent, RouterLinkActive, IgxTabHeaderComponent, RouterLink, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, RouterOutlet] + imports: [IgxTabsComponent, IgxTabItemComponent, RouterLinkActive, IgxTabHeaderComponent, RouterLink, IgxIconComponent, RouterOutlet, IGX_TABS_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES] }) export class TabsRoutingSampleComponent { public contacts: any[] = [{ @@ -40,8 +47,7 @@ export class TabsRoutingSampleComponent { text: 'Lisa Landers' }]; - constructor(private router: Router) { - } + public router = inject(Router); public clickHandler0() { this.router.navigateByUrl('/tabs-routing'); From 0c4b23cf9877c244fdaf31a97b793dc81c545e95 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 1 Apr 2026 16:49:25 +0300 Subject: [PATCH 179/189] chore(dependencies): update `igniteui-theming` to v25.1.0 --- 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 b769bcdfcf2..f838049c30b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^25.0.3", + "igniteui-theming": "^25.1.0", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", @@ -14199,9 +14199,9 @@ } }, "node_modules/igniteui-theming": { - "version": "25.0.3", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.0.3.tgz", - "integrity": "sha512-Lq6NusLS6zOjL1E/5942+UNrvf4goeQlVb9XcCSzk7rMyA9Q6ybf9ltLHAag8O/vsIjMsr9FxJaJV3mTYErXzg==", + "version": "25.1.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.1.0.tgz", + "integrity": "sha512-qM55JURFepSLjU0cl1g8J7E05BXxTp7aQ6oUu4j5ZBZEhKAGCaxZZdMtBSkcKcyghjwkDvurpihzjdnvv76YAg==", "license": "MIT", "dependencies": { "@modelcontextprotocol/sdk": "^1.25.0", diff --git a/package.json b/package.json index a5f564051bb..88946bd391b 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^25.0.3", + "igniteui-theming": "^25.1.0", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", From 4bf3df680cfe0b3f8bbc8323aac7803bbefd937d Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 2 Apr 2026 10:56:36 +0300 Subject: [PATCH 180/189] fix(styles): update navigation drawer and input group SCSS, improve samples - Replaced `border` with `border-block` in navigation drawer popover. - Added styles for input group `bundle-main` to improve input accessibility. - Updated panel configuration labels and default values for better clarity. - Added scroll bar color adjustments in the main navigation styling. --- .../input-group/src/input-group/themes/_base.scss | 13 +++++++++++++ .../src/navigation-drawer/themes/_base.scss | 2 +- src/app/app.component.scss | 5 +++++ .../input-group-showcase.sample.ts | 7 +++++-- 4 files changed, 24 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss index 644c24fcdb6..ac1c2311ce1 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss @@ -296,6 +296,19 @@ $transition-timing: .25s $out-cubic; @include e(bundle-main) { display: contents; + + > input { + position: absolute; + border: none; + inset: 0; + grid-row: inherit; + opacity: 0 !important; + appearance: none; + height: 100%; + grid-column: 2 / 4; + cursor: pointer; + z-index: 1; + } } } diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss index a79850e2edc..e51553a8e73 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/themes/_base.scss @@ -44,7 +44,7 @@ $_theme: $material; // additional popover overrides: margin: 0; - border: none; + border-block: none; } @include e(aside, panning) { diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 8aecb6a7278..879863f3b57 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -26,6 +26,11 @@ } .demos-main-nav { + --sb-track-bg-color: var(--ig-gray-100); + --sb-track-bg-color-hover: var(--ig-gray-100); + --sb-thumb-bg-color: var(--ig-gray-200); + --sb-thumb-bg-color-hover: var(--ig-gray-200); + .igx-nav-drawer__aside { padding-top: 0; } 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 a254443d71b..78351e268fb 100644 --- a/src/app/input-group-showcase/input-group-showcase.sample.ts +++ b/src/app/input-group-showcase/input-group-showcase.sample.ts @@ -60,7 +60,7 @@ export class InputGroupShowcaseSampleComponent { public panelConfig: PropertyPanelConfig = { inputType: { - label: 'Input Group Type (Only Material theme has border/box and line types)', + label: 'Group Type', control: { type: 'button-group', options: ['box', 'border', 'line', 'search'], @@ -76,12 +76,14 @@ export class InputGroupShowcaseSampleComponent { } }, label: { + label: 'Label value', control: { type: 'text', defaultValue: 'Label text' } }, hint: { + label: 'Hint value', control: { type: 'text', defaultValue: 'Hint text' @@ -90,10 +92,11 @@ export class InputGroupShowcaseSampleComponent { value: { control: { type: 'text', - defaultValue: '' + defaultValue: 'Hello input group', } }, placeholder: { + label: 'Placeholder value', control: { type: 'text', defaultValue: From 0265478588ca0f91485e376c534bcb556c5cee4e Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 2 Apr 2026 10:56:42 +0300 Subject: [PATCH 181/189] fix(styles): update property label styling in properties panel - Added color, font size, and line height to improve label readability and alignment with theme standards. --- src/app/properties-panel/properties-panel.component.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/properties-panel/properties-panel.component.scss b/src/app/properties-panel/properties-panel.component.scss index df2093dea26..08af6963744 100644 --- a/src/app/properties-panel/properties-panel.component.scss +++ b/src/app/properties-panel/properties-panel.component.scss @@ -16,6 +16,9 @@ @include e(property-label) { display: inline-block; margin-bottom: 0.5rem; + color: var(--ig-primary-300); + font-size: 14px; + line-height: 1.5; } @include e(switch-container) { From df4a50f6dde0b5b88ca5d614fdcf03423ce193a0 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 2 Apr 2026 10:56:49 +0300 Subject: [PATCH 182/189] fix(color-sample): add support for modern CSS color formats in hex conversion - Replaced `rgbToHex` with `colorToHex` using a canvas for accurate conversion of all CSS color formats. - Ensure `canvasCtx` is properly initialized and cleared for reliable handling. --- src/app/styleguide/colors/color.sample.ts | 31 ++++++++++++++++++----- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/app/styleguide/colors/color.sample.ts b/src/app/styleguide/colors/color.sample.ts index 183410a85c6..631351794bc 100644 --- a/src/app/styleguide/colors/color.sample.ts +++ b/src/app/styleguide/colors/color.sample.ts @@ -33,6 +33,7 @@ export class ColorsSampleComponent implements OnDestroy { private el = inject(ElementRef); private cdr = inject(ChangeDetectorRef); private observer: MutationObserver; + private canvasCtx: CanvasRenderingContext2D | null = null; private snackbar = viewChild('snackbar'); @@ -64,6 +65,7 @@ export class ColorsSampleComponent implements OnDestroy { public ngOnDestroy(): void { this.observer?.disconnect(); + this.canvasCtx = null; } public copyHex(hex: string): void { @@ -98,15 +100,32 @@ export class ColorsSampleComponent implements OnDestroy { const resolved = getComputedStyle(temp).color; document.body.removeChild(temp); - return this.rgbToHex(resolved); + return this.colorToHex(resolved); } - private rgbToHex(rgb: string): string { - const match = rgb.match(/\d+/g); - if (!match || match.length < 3) { - return rgb; + /** + * Converts any resolved CSS color string to a hex value. + * Uses a canvas to reliably handle all CSS color formats + * (rgb, color(srgb), oklch, lab, etc.) that modern browsers + * may return from getComputedStyle. + */ + private colorToHex(color: string): string { + if (!this.canvasCtx) { + const canvas = document.createElement('canvas'); + canvas.width = canvas.height = 1; + this.canvasCtx = canvas.getContext('2d'); } - const [r, g, b] = match.map(Number); + + const ctx = this.canvasCtx; + if (!ctx) { + return ''; + } + + ctx.clearRect(0, 0, 1, 1); + ctx.fillStyle = '#000'; + ctx.fillStyle = color; + ctx.fillRect(0, 0, 1, 1); + const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data; return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`; } } From a87b70f8d43c0d631840f94ca6d62d83118e0265 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 2 Apr 2026 13:20:55 +0300 Subject: [PATCH 183/189] fix(checkbox-base-directive): update label class to include base CSS class for no mather the label possition --- .../src/directives/checkbox/checkbox-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts b/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts index e37e78cc1ba..e5b28dd0b01 100644 --- a/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts @@ -421,7 +421,7 @@ export class CheckboxBaseDirective implements AfterViewInit { public get labelClass(): string { switch (this.labelPosition) { case LabelPosition.BEFORE: - return `${this.cssClass}__label--before`; + return `${this.cssClass}__label ${this.cssClass}__label--before`; case LabelPosition.AFTER: default: return `${this.cssClass}__label`; From 019c0cf00461f2576ada93206fe9dcce344dbb98 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 2 Apr 2026 13:21:32 +0300 Subject: [PATCH 184/189] fix(styles): add `--_bundle-row: 1` for all inputs inside the cell --- projects/igniteui-angular/grids/themes/_base.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index e46063ee0ec..fb49594c590 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -92,6 +92,8 @@ $z-grid-loading: 10003; } igx-input-group { + --_bundle-row: 1; + background: var-get($theme, 'cell-editing-background'); input { From 70259f1b1ac7246f2a20b7d9f74e07ae36ff08a6 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 2 Apr 2026 13:31:36 +0300 Subject: [PATCH 185/189] refactor(samples): Cleanup inputs sample --- src/app/input/input.sample.html | 284 +++++++++++++++----------------- src/app/input/input.sample.scss | 59 ++++--- 2 files changed, 166 insertions(+), 177 deletions(-) diff --git a/src/app/input/input.sample.html b/src/app/input/input.sample.html index e7380a237b4..64b8d8167f4 100644 --- a/src/app/input/input.sample.html +++ b/src/app/input/input.sample.html @@ -1,152 +1,136 @@ -
-
-

Input fields w/ radio buttons

- -
-

Personal Info

- - - - - - - - - - - - - - - - - - - - - - - - - - -
- @for (item of ['Male', 'Female']; track item) { - {{item}} - } - @for (item of ['Male', 'Female']; track item) { - {{item}} - } -
- -
- -
- -
- -

Switch sample

- -
- - Settings - - - {{airplaneMode ? 'airplanemode_active': 'airplanemode_inactive'}} -

Airplane Mode

-
- - {{airplaneMode ? 'ON': 'OFF'}} - -
- - - @for (item of settings; track item) { - - {{item.icon}} -

{{item.name}}

-
- - {{item.active ? 'ON': 'OFF'}} - -
- - } - -
-
- -
-

Checkbox sample

- -
- - Delete Contacts - - - - Alicia Keys - - Value - - - - - - Petar Vasilev - Value - - - - - Brian Vaughan (disabled) - Value - - - - - Brian Vaughan (readonly) - Value - - - - - Brian Vaughan - Value - - - - - Brian Vaughan - Value - - - - - Brian Vaughan - Value - - - -
- Form Group Checkbox - Form Group Switch -
- - - +
+

Personal Info

+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ @for (item of ['Male', 'Female']; track item) { + {{item}} + } + @for (item of ['Male', 'Female']; track item) { + {{item}} + }
-
- -
-

Radio w/ ngModel

+ +
+ +
+

Switch sample

+ + Settings + + {{airplaneMode ? 'airplanemode_active': 'airplanemode_inactive'}} +

Airplane Mode

+
+ + {{airplaneMode ? 'ON': 'OFF'}} + +
+ + @for (item of settings; track item) { + + {{item.icon}} +

{{item.name}}

+ + + {{item.active ? 'ON': 'OFF'}} + + + } + +
+ +
+

Checkbox sample

+ + + Delete Contacts + + + + Alicia Keys + + Value + + + + + + Petar Vasilev + Value + + + + + Brian Vaughan (disabled) + Value + + + + + Brian Vaughan (readonly) + Value + + + + + Brian Vaughan + Value + + + + + Brian Vaughan + Value + + + + + Brian Vaughan + Value + + + Form inside a list item + + +
+ Checkbox + Switch +
+ +
+ + +
+ +
+

Radio w/ ngModel

+ Option 1 + Option 2 + Option 3 + +
- Option 1 - Option 2 - Option 3 - -
-
diff --git a/src/app/input/input.sample.scss b/src/app/input/input.sample.scss index eb0a3498af4..1857ebd2bbe 100644 --- a/src/app/input/input.sample.scss +++ b/src/app/input/input.sample.scss @@ -1,28 +1,33 @@ -.form-title { - margin-bottom: 16px; -} - -igx-input-group + igx-input-group { - margin-top: 32px; -} - -.radio-group { - display: flex; - flex-flow: column nowrap; - margin-top: 16px; -} - -.radio-group igx-radio+igx-radio { - margin-top: 8px; -} - -.settings { - margin-left: 16px; - width: 100%; - justify-content: space-between; -} - -:host button { - align-self: flex-start; - margin-top: 1.5rem; +:host { + display: flex; + flex-wrap: wrap; + gap: var(--demos-gap); + + .demo-sample { + display: flex; + flex-direction: column; + gap: var(--demos-gap); + padding: var(--content-spacing); + min-width: 320px; + } + + .demo-sample__form { + display: flex; + flex-direction: column; + gap: var(--demos-gap); + } + + .demo-sample__radio-wrapper { + display: flex; + flex-direction: column; + gap: var(--demos-gap); + } + + .demo-sample__form-in-list { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + gap: var(--demos-gap); + } } From c3bb203ba0edb18a1d87cfe335654bea9cb6eb53 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 2 Apr 2026 16:52:23 +0300 Subject: [PATCH 186/189] fox(grid): use correct color variables for expand/collapse-all icon inside the header --- projects/igniteui-angular/grids/themes/_base.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index fb49594c590..7271fae3a3c 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -411,7 +411,7 @@ $z-grid-loading: 10003; border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); // (!) the background-clip: padding-box; makes sure the background never go under the border, - // this is very important especially of the borders have slide alpha + // this is very important especially if the borders have slide alpha background-clip: padding-box !important; .igx-display-container { @@ -2600,6 +2600,15 @@ $z-grid-loading: 10003; } } } + + .igx-grid__group-expand-btn { + color: var-get($theme, 'expand-all-icon-color'); + + &:hover, + &:focus { + color: var-get($theme, 'expand-all-icon-hover-color'); + } + } } @include b(igx-drop-area) { From 0a34175eff18e36440f55ce61b27d0c31bfd0b16 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 2 Apr 2026 16:53:39 +0300 Subject: [PATCH 187/189] refactor(samples): set grid-template-rows for auto sizing --- src/app/grid-auto-size/grid-auto-size.sample.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/grid-auto-size/grid-auto-size.sample.scss b/src/app/grid-auto-size/grid-auto-size.sample.scss index 7e2bfc4d9c8..83d9c69047e 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.scss +++ b/src/app/grid-auto-size/grid-auto-size.sample.scss @@ -1,6 +1,7 @@ :host { display: grid; gap: var(--demos-gap); + grid-template-rows: auto 1fr; height: 100%; align-items: start; } From 86705362a17a7e8d38e69090803b5d2a0bce7b54 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 2 Apr 2026 17:48:15 +0300 Subject: [PATCH 188/189] refactor(samples): enhance layout and styling for improved usability --- src/app/app.component.scss | 11 +- .../grid-external-filtering.sample.html | 132 +++++++++--------- .../grid-external-filtering.sample.scss | 50 ++++--- .../grid-external-filtering.sample.ts | 4 +- 4 files changed, 105 insertions(+), 92 deletions(-) diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 879863f3b57..639efa377f5 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -3,6 +3,7 @@ ::ng-deep { app-root { --demo-navbar-size: 56px; + --demo-header-height: 72px; --header-row: 1; --content-row: 2; --content-spacing: 1rem; @@ -19,7 +20,8 @@ grid-row: var(--content-row); background: var(--ig-gray-50); overflow-x: clip; - overflow-y: auto; + overflow-y: hidden; + min-width: 0; height: calc(100dvh - var(--demo-navbar-size)); } @@ -47,7 +49,7 @@ display: flex; align-items: center; justify-content: space-between; - min-height: 56px; + height: var(--demo-header-height); padding: var(--content-spacing); > h3 { @@ -68,8 +70,9 @@ .demos-wrapper { display: flex; flex-direction: column; - min-height: calc(100% - (var(--demo-navbar-size) + var(--demos-gap) + (var(--content-spacing) * 2))); - overflow-y: auto; + min-height: calc(100% - (var(--demo-header-height) + (var(--demo-navbar-size) + var(--demos-gap)) + (var(--content-spacing) * 2))); + height: 100%; + overflow-y: auto; padding: var(--content-spacing); color: var(--ig-gray-900); } diff --git a/src/app/grid-external-filtering/grid-external-filtering.sample.html b/src/app/grid-external-filtering/grid-external-filtering.sample.html index b2e2d0b7f3d..0ab2b72bbc0 100644 --- a/src/app/grid-external-filtering/grid-external-filtering.sample.html +++ b/src/app/grid-external-filtering/grid-external-filtering.sample.html @@ -1,75 +1,75 @@ -
-
-
-
- - - @for (column of columns; track column) { - - {{column.field}} - - } - - - -
-
- - - - - - - Export to Excel 👌 - Export to CSV 👍 - - - - @for (c of columns; track c) { - - - } - - - -
+ +
+
+ + + @for (column of columns; track column) { + + {{column.field}} + + } +
-
+ + +
+
+
Allow Filtering + Allow Advanced Filtering + Apply Changes
-
- Allow Advanced Filtering +
+ - - Apply Changes - + +
+ + + + + + + Export to Excel 👌 + Export to CSV 👍 + + + + @for (c of columns; track c) { + + + } + + +
-
+ + diff --git a/src/app/grid-external-filtering/grid-external-filtering.sample.scss b/src/app/grid-external-filtering/grid-external-filtering.sample.scss index 325c4080243..b391a07798c 100644 --- a/src/app/grid-external-filtering/grid-external-filtering.sample.scss +++ b/src/app/grid-external-filtering/grid-external-filtering.sample.scss @@ -1,21 +1,31 @@ - - -.sample-buttons { - margin-top: 24px; - display: flex; - flex-wrap: wrap; -} - -igx-checkbox { - margin: 0 10px; -} - -[igxButton]+[igxButton] { - margin-left: 8px; -} - -.efs-grid { - display: flex; - flex: 1 0 auto; - flex-direction: column; +:host { + display: flex; + flex-grow: 1; + gap: var(--demos-gap); + + .demo-esf__sample { + padding: var(--content-spacing); + border: 1px dashed var(--ig-gray-300); + } + + .demo-esf__sample-select {} + + .demo-esf__grid-sample { + display: flex; + flex-direction: column; + gap: var(--demos-gap); + padding: var(--content-spacing); + border: 1px dashed var(--ig-gray-300); + flex: 1; + } + + .demo-esf__grid-sample-actions { + display: flex; + flex-wrap: wrap; + gap: var(--demos-gap); + + igx-buttongroup { + min-width: 230px; + } + } } diff --git a/src/app/grid-external-filtering/grid-external-filtering.sample.ts b/src/app/grid-external-filtering/grid-external-filtering.sample.ts index 84e23ddd6f7..ac9229db503 100644 --- a/src/app/grid-external-filtering/grid-external-filtering.sample.ts +++ b/src/app/grid-external-filtering/grid-external-filtering.sample.ts @@ -1,6 +1,6 @@ import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { FilterMode, FilteringExpressionsTree, FilteringLogic, GridSelectionMode, IChangeCheckboxEventArgs, IgxAdvancedFilteringDialogComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxCSVTextDirective, IgxCheckboxComponent, IgxColumnComponent, IgxExcelTextDirective, IgxFlexDirective, IgxGridComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxLabelDirective, IgxLayoutDirective, IgxSelectComponent, IgxSelectItemComponent, IgxStringFilteringOperand } from 'igniteui-angular'; +import { FilterMode, FilteringExpressionsTree, FilteringLogic, GridSelectionMode, IChangeCheckboxEventArgs, IgxAdvancedFilteringDialogComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxCSVTextDirective, IgxCheckboxComponent, IgxColumnComponent, IgxExcelTextDirective, IgxGridComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxStringFilteringOperand } from 'igniteui-angular'; @Component({ @@ -8,7 +8,7 @@ import { FilterMode, FilteringExpressionsTree, FilteringLogic, GridSelectionMode selector: 'app-grid-external-filtering-sample', styleUrls: ['grid-external-filtering.sample.scss'], templateUrl: 'grid-external-filtering.sample.html', - imports: [IgxFlexDirective, IgxLayoutDirective, IgxButtonGroupComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxAdvancedFilteringDialogComponent, IgxCheckboxComponent, FormsModule, IgxButtonDirective] + imports: [IgxButtonGroupComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxAdvancedFilteringDialogComponent, IgxCheckboxComponent, FormsModule, IgxButtonDirective] }) export class GridExternalFilteringComponent implements OnInit, AfterViewInit { @ViewChild('grid1', { static: true }) From 0be77c46dd22d0a25055b21ca8304aa1365de623 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 3 Apr 2026 10:32:35 +0300 Subject: [PATCH 189/189] fix(input-group): update grid row variables for input groups and labels --- .../date-range-picker/themes/shared/_bootstrap.scss | 10 ++++++++-- .../src/date-range-picker/themes/shared/_fluent.scss | 10 ++++++++-- .../src/date-range-picker/themes/shared/_indigo.scss | 10 ++++++++-- .../src/input-group/themes/shared/bootstrap.scss | 5 +++++ .../src/input-group/themes/shared/fluent.scss | 5 +++++ .../src/input-group/themes/shared/indigo.scss | 5 +++++ src/app/date-range/date-range.sample.html | 2 +- 7 files changed, 40 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_bootstrap.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_bootstrap.scss index edeaa8e4c2e..c1bb926937c 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_bootstrap.scss @@ -8,7 +8,13 @@ } .igx-input-group:not(:has(.igx-input-group__label)) { - --_bundle-row: 1; - --_hint-row: 2; + --_bundle-row: 2; + --_hint-row: 3; } + + &:not(:has(.igx-input-group__label)) { + .igx-date-range-picker__label { + grid-row: 2; + } + } } diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss index 023cb289a82..5f07d7ba202 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_fluent.scss @@ -8,7 +8,13 @@ $_theme: $fluent; @include themed-block(igx-date-range-picker, fluent) { .igx-input-group:not(:has(.igx-input-group__label)) { - --_bundle-row: 1; - --_hint-row: 2; + --_bundle-row: 2; + --_hint-row: 3; } + + &:not(:has(.igx-input-group__label)) { + .igx-date-range-picker__label { + grid-row: 2; + } + } } diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_indigo.scss b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_indigo.scss index 48ffcf16819..2f5998be0cc 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/themes/shared/_indigo.scss @@ -8,8 +8,14 @@ $_theme: $indigo; @include themed-block(igx-date-range-picker, indigo) { .igx-input-group:not(:has(.igx-input-group__label)) { - --_bundle-row: 1; - --_hint-row: 2; + --_bundle-row: 2; + --_hint-row: 3; } + + &:not(:has(.igx-input-group__label)) { + .igx-date-range-picker__label { + grid-row: 2; + } + } } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss index c41461cc655..cd218f2cf93 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/bootstrap.scss @@ -542,5 +542,10 @@ $border-radius: var-get($_theme, 'border-border-radius'); color: var-get($_theme, 'disabled-text-color'); } } + + &:not(:has(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss index 23266504f7a..ee98949af2f 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/fluent.scss @@ -260,5 +260,10 @@ $_theme: $fluent; grid-row: var(--_bundle-row); } } + + &:not(:has(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } } diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss index 028fcbbae52..19656b7a64d 100644 --- a/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss +++ b/projects/igniteui-angular/input-group/src/input-group/themes/shared/indigo.scss @@ -271,4 +271,9 @@ $_theme: $indigo; @include e(bundle-main) { height: inherit; } + + &:not(:has(.igx-input-group__label)) { + --_bundle-row: 1; + --_hint-row: 2; + } } diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html index c2290af508e..48226e1510c 100644 --- a/src/app/date-range/date-range.sample.html +++ b/src/app/date-range/date-range.sample.html @@ -39,7 +39,7 @@
Angular Date Range Picker, two inputs, template-driven form
clear @if (properties.inputLabel) { - + }