diff --git a/live-editing/configs/CalendarConfigGenerator.ts b/live-editing/configs/CalendarConfigGenerator.ts index cc0f5cf28..c72431460 100644 --- a/live-editing/configs/CalendarConfigGenerator.ts +++ b/live-editing/configs/CalendarConfigGenerator.ts @@ -75,7 +75,6 @@ export class CalendarConfigGenerator implements IConfigGenerator { configs.push(new Config({ component: 'CalendarStylingSampleComponent', - additionalFiles: ["/src/app/scheduling/calendar/calendar-styling-sample/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/scheduling/calendar/" })); diff --git a/live-editing/configs/CheckboxConfigGenerator.ts b/live-editing/configs/CheckboxConfigGenerator.ts index 11a5bd049..1e1722c26 100644 --- a/live-editing/configs/CheckboxConfigGenerator.ts +++ b/live-editing/configs/CheckboxConfigGenerator.ts @@ -30,7 +30,6 @@ export class CheckboxConfigGenerator implements IConfigGenerator { // checkbox styling configs.push(new Config({ component: 'CheckboxStylingComponent', - additionalFiles: ["/src/app/data-entries/checkbox/checkbox-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/checkbox/" })); diff --git a/live-editing/configs/InputGroupConfigGenerator.ts b/live-editing/configs/InputGroupConfigGenerator.ts index 068c11973..f86d80ea4 100644 --- a/live-editing/configs/InputGroupConfigGenerator.ts +++ b/live-editing/configs/InputGroupConfigGenerator.ts @@ -57,7 +57,7 @@ export class InputGroupConfigGenerator implements IConfigGenerator { configs.push(new Config({ component: 'InputGroupStyleComponent', - additionalFiles: ["/src/app/data-entries/input-group/base-input.component.ts", "/src/app/data-entries/input-group/input-group-styling/layout.scss"], + additionalFiles: ["/src/app/data-entries/input-group/base-input.component.ts"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/" })); diff --git a/package-lock.json b/package-lock.json index 49ccff720..1d7c7c61d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,11 +36,11 @@ "file-saver": "^2.0.2", "fuse.js": "^7.1.0", "hammerjs": "^2.0.8", - "igniteui-angular": "22.1.0-beta.1", + "igniteui-angular": "22.1.0-beta.4", "igniteui-angular-charts": "^22.0.0", "igniteui-angular-core": "^22.0.0", - "igniteui-angular-extras": "22.1.0-beta.1", - "igniteui-angular-i18n": "22.1.0-beta.1", + "igniteui-angular-extras": "22.1.0-beta.4", + "igniteui-angular-i18n": "22.1.0-beta.4", "igniteui-dockmanager": "^1.17.0", "igniteui-grid-lite": "0.9.0", "igniteui-i18n-resources": "^1.0.4", @@ -10492,15 +10492,15 @@ "license": "BSD-3-Clause" }, "node_modules/igniteui-angular": { - "version": "22.1.0-beta.1", - "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-22.1.0-beta.1.tgz", - "integrity": "sha512-kDrEuxBzuYGTKxV2A3TGJamB2qOXDJ5tGDJTCs2pKtaOLgJG9sCubRQ5KgM9coq6jF3ltQAgmc+ygDcoEXYL+g==", + "version": "22.1.0-beta.4", + "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-22.1.0-beta.4.tgz", + "integrity": "sha512-PBKQVuDkad2IE4CALmMeQRYm5UuxZ0HVfWp6cXAMFFTNHlGkpqWr7nBuTLoI7vcPgAz84OyfSzUaI8x9MHF9Tg==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@igniteui/material-icons-extended": "^3.1.0", "fflate": "^0.8.2", "igniteui-i18n-core": "^1.0.5", - "igniteui-theming": "^27.4.0", + "igniteui-theming": "^27.5.1", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", @@ -10553,9 +10553,9 @@ } }, "node_modules/igniteui-angular-extras": { - "version": "22.1.0-beta.1", - "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-22.1.0-beta.1.tgz", - "integrity": "sha512-+uLxNWBhHBngYcb+yTzs9gYyE2GuzMNninYl6ck/muV5B4z/Wl6OVfKO9ELEK7vA98mX7HSTjpv4NwsWIlVtQQ==", + "version": "22.1.0-beta.4", + "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-22.1.0-beta.4.tgz", + "integrity": "sha512-GBOEGRaO7OhnJ6NlyM3G8CqV/IFAcH1Sa3+IT4hJ67NTmxW0aP39Nm5+kP+Pg0DWgbYwpqWSM+41Ht8bz05eMg==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "igniteui-trial-watermark": "^3.1.0", @@ -10570,9 +10570,9 @@ } }, "node_modules/igniteui-angular-i18n": { - "version": "22.1.0-beta.1", - "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-22.1.0-beta.1.tgz", - "integrity": "sha512-Y5Fq+jduys+es6MpQZ3mNWlbhXx+/WpOhEebohVAel1scGjyDN6wH9usZbI6gQ6hoCTcdx3cUFqd8hL13X7DzA==", + "version": "22.1.0-beta.4", + "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-22.1.0-beta.4.tgz", + "integrity": "sha512-uiDKay3w0Sm7K0ZffLub53l6VNAGpwopk5ZFtgHsliq1IGqPWIvXIfdumdEjYjkZUCPMYDLPUI8LDJd8iWlh7g==", "license": "MIT", "dependencies": { "igniteui-i18n-core": "^1.0.2", @@ -10639,9 +10639,9 @@ "license": "MIT" }, "node_modules/igniteui-theming": { - "version": "27.4.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-27.4.0.tgz", - "integrity": "sha512-0lxn6jDcPKdEtewxx/q+F0MBGhlfXCx1nzfFRS55GmfcYAexNwAjfjS2MlE+Tc/aN33spDA9GkP6cQNI2s+BdA==", + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-27.5.1.tgz", + "integrity": "sha512-QUQWqFFdfX2REO14gKcvUlw+h/em7Bb34VPcPGZjnjW6vKWby1dYyFeLq/RY1GNPeFcD9jtGBxxCxAomo/CyBQ==", "license": "MIT", "dependencies": { "@modelcontextprotocol/sdk": "^1.28.0", diff --git a/package.json b/package.json index 0133ff2e8..d84f5eb88 100644 --- a/package.json +++ b/package.json @@ -73,11 +73,11 @@ "file-saver": "^2.0.2", "fuse.js": "^7.1.0", "hammerjs": "^2.0.8", - "igniteui-angular": "22.1.0-beta.1", + "igniteui-angular": "22.1.0-beta.4", "igniteui-angular-charts": "^22.0.0", "igniteui-angular-core": "^22.0.0", - "igniteui-angular-extras": "22.1.0-beta.1", - "igniteui-angular-i18n": "22.1.0-beta.1", + "igniteui-angular-extras": "22.1.0-beta.4", + "igniteui-angular-i18n": "22.1.0-beta.4", "igniteui-dockmanager": "^1.17.0", "igniteui-grid-lite": "0.9.0", "igniteui-i18n-resources": "^1.0.4", @@ -112,7 +112,7 @@ "@angular/compiler": "^22.0.0" }, "igniteui-angular-extras": { - "igniteui-angular": "22.1.0-beta.1", + "igniteui-angular": "22.1.0-beta.4", "@infragistics/igniteui-angular": "^22.0.0", "igniteui-angular-core": "^22.0.0", "igniteui-angular-charts": "^22.0.0", diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts index 0ac9fbc73..39dac0746 100644 --- a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts +++ b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts @@ -7,7 +7,7 @@ import { FloatingPanesService } from '../../services/floating-panes.service'; import { DockSlotComponent } from './dock-slot/dock-slot.component'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IColumnSelectionEventArgs, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; import { NgClass, DecimalPipe, TitleCasePipe, CurrencyPipe } from '@angular/common'; import { debounceTime } from 'rxjs/operators'; @@ -57,7 +57,7 @@ export class HastDuplicateLayouts implements PipeTransform { templateUrl: './data-analysis-dock-manager.component.html', styleUrls: ['./data-analysis-dock-manager.component.scss'], providers: [FloatingPanesService], - imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts], + imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerComponent, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit { diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts index 727a766af..959a0045d 100644 --- a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts +++ b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts @@ -4,7 +4,7 @@ import { IgxColumnComponent, IgxGridDetailTemplateDirective } from 'igniteui-ang import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; import { employeesData } from '../../data/employeesData'; import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; @@ -13,7 +13,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/dir selector: 'app-grid-master-detail', styleUrls: ['./grid-master-detail.component.scss'], templateUrl: 'grid-master-detail.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule] }) export class GridMasterDetailSampleComponent { diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss index d8f3bdb7c..9f9b4b01b 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.scss +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.scss @@ -1,49 +1,56 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -// CSS variables approach +igx-chips-area { + --ig-size: var(--ig-size-medium); + + gap: rem(8px); +} + +igx-icon { + --ig-icon-size: #{rem(13px)}; +} +// CSS variables approach igx-chip { --text-color: #fff; --hover-text-color: #fff; --focus-text-color: #fff; --border-radius: #{rem(5px)}; -} -.xcom { - --background: #000; - --hover-background: #000; - --focus-background: #323232; + &.xcom { + --background: #000; + --hover-background: #000; + --focus-background: #323232; + } + + &.youtube { + --background: #cd201f; + --hover-background: #cd201f; + --focus-background: #9f1717; + } + + &.facebook { + --background: #3b5999; + --hover-background: #3b5999; + --focus-background: #2c4378; + } + + &.linkedin { + --background: #55acee; + --hover-background: #55acee; + --focus-background: #4682af; + } } -.youtube { - --background: #cd201f; - --hover-background: #cd201f; - --focus-background: #9f1717; -} - -.facebook { - --background: #3b5999; - --hover-background: #3b5999; - --focus-background: #2c4378; -} - -.linkedin { - --background: #55acee; - --hover-background: #55acee; - --focus-background: #4682af; -} - -// Sass theme approach - +//Sass theme approach // $custom-chip-theme: chip-theme( -// $background: #cd201f, // $text-color: #fff, -// $hover-background: #cd201f, -// $focus-background: #9f1717, +// $hover-background: #fff, +// $focus-background: #fff, // $border-radius: rem(5px) // ); - +// // :host { // @include tokens($custom-chip-theme); // } diff --git a/src/app/data-display/chip/chip-styling/layout.scss b/src/app/data-display/chip/chip-styling/layout.scss index f80fd2f1c..f5afb9a67 100644 --- a/src/app/data-display/chip/chip-styling/layout.scss +++ b/src/app/data-display/chip/chip-styling/layout.scss @@ -1,23 +1,7 @@ @use "igniteui-angular/theming" as *; :host { - ::ng-deep { - .igx-chip__item { - height: rem(20px); - font-size: rem(12px); - } - } + display: grid; + place-content: center; + height: 100%; } - -igx-chip { - margin-right: rem(8px); - margin-top: rem(20px); -} - -igx-chips-area { - margin-left: rem(20px); -} - -igx-icon { - --size: #{rem(12px)}; -} \ No newline at end of file diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html index 5d1a2f56c..67b225595 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html @@ -1,3 +1,3 @@ - + Styled checkbox - \ No newline at end of file + diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index 247163ba6..656193ef8 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -1,37 +1,39 @@ -@use "layout.scss"; +@use "sass:map"; @use "igniteui-angular/theming" as *; -// CSS variables approach +:host { + --ig-font-family: Arial, Helvetica, sans-serif; + --ig-subtitle-1-font-size: #{rem(14px)}; -igx-checkbox { - --tick-color: #0064d9; - --tick-color-hover: #e3f0ff; - --tick-width: 2; - --fill-color: transparent; - --fill-color-hover: #e3f0ff; - --label-color: #131e29; - --focus-outline-color: #0032a5; - --border-radius: #{rem(4px)}; + display: block; + padding: rem(18px) 0 0 rem(18px); } -igx-checkbox:hover { - --empty-fill-color: #e3f0ff; +// CSS variables approach +.igx-checkbox { + --tick-color: black; + --tick-color-hover: black; + --tick-width: 4; + --fill-color: orange; + --fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h); + --label-color: black; + --empty-color: orange; + --border-width: #{rem(3px)}; + --border-radius: #{rem(3px)}; } // Sass theme approach - // $custom-checkbox-theme: checkbox-theme( -// $tick-color: #0064d9, -// $tick-width: 2, -// $tick-color-hover: #e3f0ff, -// $fill-color: transparent, -// $fill-color-hover: #e3f0ff, -// $label-color: #131e29, -// $focus-outline-color: #0032a5, -// $empty-color: #131e29, -// $border-radius: rem(4px), +// $tick-color: black, +// $tick-color-hover: black, +// $tick-width: 4, +// $fill-color: orange, +// $fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h), +// $label-color: black, +// $empty-color: orange, +// $border-radius: rem(3px), // ); - -// :host { +// +// :host ::ng-deep { // @include tokens($custom-checkbox-theme); // } diff --git a/src/app/data-entries/checkbox/checkbox-styling/layout.scss b/src/app/data-entries/checkbox/checkbox-styling/layout.scss deleted file mode 100644 index b3d179bdc..000000000 --- a/src/app/data-entries/checkbox/checkbox-styling/layout.scss +++ /dev/null @@ -1,45 +0,0 @@ -@use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/checkbox/checkbox-component" as checkbox; -@use "sass:map"; - -:host { - ::ng-deep { - $_checkbox-schema: map.get($light-fluent-schema, checkbox); - @include checkbox(checkbox-theme($schema: $_checkbox-schema)); - @include checkbox.component(); - - // Note: This is not the standard approach for styling the component. - // We're using it here solely to mirror the UI5 sample. - - .igx-checkbox--checked .igx-checkbox__composite-wrapper .igx-checkbox__composite { - border-color: var(--empty-color); - } - - .igx-checkbox__composite { - min-width: rem(18px); - height: rem(18px); - } - - .igx-checkbox--checked:hover .igx-checkbox__composite-wrapper .igx-checkbox__composite { - border-color: var(--empty-color); - } - - .igx-checkbox__label { - margin-inline-start: auto; - } - } -} - -igx-checkbox { - --ig-font-family: Arial, Helvetica, sans-serif; - --ig-subtitle-1-font-size: #{rem(14px)}; - - display: flex; - margin: rem(18px) 0 0 rem(18px); -} - -#checkbox-1.igx-checkbox--focused:after { - inset: rem(7px) rem(-6px) rem(7px) rem(6px); - border-radius: rem(8px); - box-shadow: 0 0 0 rem(2px) var(--focus-outline-color); -} diff --git a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts index 891b0cc2f..a4a6dfaab 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts +++ b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { IgxButtonDirective, IgxDividerDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxButtonDirective, IgxDividerComponent, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -10,7 +10,7 @@ import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-g selector: 'app-dropdown-sample-3', styleUrls: ['./dropdown-sample-3.component.scss'], templateUrl: './dropdown-sample-3.component.html', - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerDirective] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerComponent] }) export class DropDownSample3Component { diff --git a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html index ba67b6bdc..a612155be 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html +++ b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html @@ -1,3 +1,7 @@ +

+ Selected:  + {{ dropDown.selectedItem?.value ?? 'N/A' }} +

@@ -5,7 +9,6 @@ arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }} - Selected: {{ dropDown.selectedItem?.value }} @for (item of items; track item) { diff --git a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss index 79fa6ba91..89afcfbb7 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss +++ b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss @@ -1,20 +1,8 @@ :host { - margin: 8px; + display: block; + padding: 0.5rem; } -.input { - padding-left: 0.2rem; -} - -.input-group { - width: 220px; -} - -.igx-input-group { - display: inline-block; -} - -span { - display: inline; - padding-left: 24px; +igx-input-group { + max-width: 300px; } diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss index 93438be78..93d96f682 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss @@ -1,37 +1,35 @@ -@use "layout.scss"; @use "igniteui-angular/theming" as *; -// CSS variables approach +:host { + display: grid; + max-width: rem(300px); + margin-top: rem(24px); -// igx-input-group { -// --border-color: #0f62fe; -// --size: #{rem(40px)}; -// --idle-bottom-line-color: #8d8d8d; -// --hover-bottom-line-color: #8d8d8d; -// --hover-placeholder-color: var(--ig-gray-600); -// --idle-secondary-color: var(--ig-gray-600); -// --focused-secondary-color: var(--ig-gray-700); -// --focused-bottom-line-color: #8d8d8d; -// --box-background-hover: var(--ig-gray-100); -// --helper-text-color: var(--ig-gray-600); -// } + ::ng-deep { + $custom-input-group: input-group-theme( + $schema: $light-indigo-schema, + $size: rem(40px), + ); -// Sass theme approach + @include typography( + $font-family: '"IBM Plex Sans", sans-serif', + $type-scale: $indigo-type-scale + ); -$custom-input-group: input-group-theme( - $border-color: #0f62fe, - $idle-bottom-line-color: #8d8d8d, - $hover-bottom-line-color: #8d8d8d, - $hover-placeholder-color: var(--ig-gray-600), - $idle-secondary-color: var(--ig-gray-600), - $focused-secondary-color: var(--ig-gray-700), - $size: rem(40px), - $box-border-radius: 0, - $box-background-hover: var(--ig-gray-100), - $placeholder-color: var(--ig-gray-600), - $helper-text-color: var(--ig-gray-600) -); + @include theme( + $palette: $light-indigo-palette, + $schema: $light-indigo-schema + ); -:host { - @include tokens($custom-input-group); + .igx-input-group { + @include tokens($custom-input-group); + + --ig-caption-font-weight: 400; + --ig-subtitle-1-font-weight: 400; + + &__bundle-main { + background: var(--box-background-hover); + } + } + } } diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts index 272cecd50..de877f6a9 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts @@ -1,12 +1,10 @@ import { Component } from '@angular/core'; import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; -import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; @Component({ selector: 'app-input-group-style', templateUrl: 'input-group-styling.component.html', styleUrls: ['input-group-styling.component.scss'], - imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective], - providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('indigo')}] + imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective] }) export class InputGroupStyleComponent { } diff --git a/src/app/data-entries/input-group/input-group-styling/layout.scss b/src/app/data-entries/input-group/input-group-styling/layout.scss deleted file mode 100644 index 74026e1dc..000000000 --- a/src/app/data-entries/input-group/input-group-styling/layout.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/input/input-group-component" as input; -@use "sass:map"; - -:host { - ::ng-deep { - $_input-schema: map.get($light-indigo-schema, input-group); - @include input-group(input-group-theme($schema: $_input-schema)); - @include input.component(); - - // Note: This is not the standard approach for styling the component. - // We're using it here solely to mirror the Carbon sample. - - .igx-input-group__bundle { - background: var(--box-background-hover); - - [igxinput].igx-input-group__input { - letter-spacing: rem(0.16px); - padding-block: 0; - padding-inline: rem(12px); - font-size: rem(14px); - } - - input::placeholder { - font-size: rem(14px); - font-style: normal; - opacity: 0.7; - font-weight: 300; - font-family: "IBM Plex Sans", sans-serif; - } - } - - .igx-input-group--focused .igx-input-group__bundle::after { - border-block-end: 0; - inset: 0; - pointer-events: none; - box-shadow: inset 0 0 0 rem(2px) var(--border-color); - } - - .igx-input-group__label, igx-hint { - font-weight: 300; - } - } -} - -igx-input-group { - --ig-font-family: "IBM Plex Sans", sans-serif; -} - -.sample-column { - max-width: rem(300px); - margin-top: rem(24px); -} \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/layout.scss b/src/app/data-entries/radio/radio-styling-sample/layout.scss index 3c6fc3501..226b49374 100644 --- a/src/app/data-entries/radio/radio-styling-sample/layout.scss +++ b/src/app/data-entries/radio/radio-styling-sample/layout.scss @@ -1,54 +1,12 @@ @use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/radio/radio-component" as radio; @use "sass:map"; -:host { - ::ng-deep{ - $_radio-schema: map.get($light-fluent-schema, radio); - @include radio(radio-theme($schema: $_radio-schema)); - @include radio.component(); - - // Note: This is not the standard approach for styling the component. - // We're using it here solely to mirror the UI5 sample. - - .igx-radio--checked .igx-radio__composite::after { - --fill-color: #556b81; - } - - .igx-radio__composite::after, - .igx-radio__composite::before, - .igx-radio__composite { - width: rem(18px); - height: rem(18px); - } - - .igx-radio__composite { - min-width: rem(18px); - } - - .igx-radio__ripple { - display: none; - } - } -} - igx-radio + igx-radio { margin-top: 1rem; } -igx-radio { - --ig-subtitle-1-font-size: #{rem(14px)}; - --ig-font-family: Arial,Helvetica,sans-serif; -} - .radio-wrapper { display: flex; flex-flow: column nowrap; padding: 1rem; -} - -.igx-radio--focused::after { - inset: rem(1px) rem(-4px) rem(1px) rem(-2px); - border-radius: rem(8px); - box-shadow: 0 0 0 rem(2px) var(--focus-outline-color); } \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss index a83adef32..cccd9cee5 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss @@ -4,27 +4,15 @@ // CSS variables approach // igx-radio { -// --empty-color: #556b81; -// --label-color: #131e29; -// --fill-color: #0064d9; -// --focus-outline-color: #0032a5; -// } - -// igx-radio:hover { -// --empty-fill-color: #e3f0ff; -// --empty-color: #0064d9; -// --hover-color: transparent; +// --empty-color: #345779; +// --fill-color: #2dabe8; // } // Sass theme approach $custom-radio-theme: radio-theme( - $empty-color: #556b81, - $label-color: #131e29, - $fill-color: #0064d9, - $focus-outline-color: #0032a5, - $fill-color-hover: #0064d9, - $hover-color: transparent + $empty-color: #345779, + $fill-color: #2dabe8, ); :host { diff --git a/src/app/data-entries/select/select-header-footer/select-header-footer.component.scss b/src/app/data-entries/select/select-header-footer/select-header-footer.component.scss index e8f2168de..ff1162c62 100644 --- a/src/app/data-entries/select/select-header-footer/select-header-footer.component.scss +++ b/src/app/data-entries/select/select-header-footer/select-header-footer.component.scss @@ -32,6 +32,7 @@ igx-select { justify-content: space-between; align-items: center; padding: 0 1.5rem; + gap: 1rem; background: color($color: 'gray', $variant: 100); igx-icon { &.important-icon { diff --git a/src/app/data-entries/switch/switch-styling/layout.scss b/src/app/data-entries/switch/switch-styling/layout.scss index b248011ce..6e92f5d99 100644 --- a/src/app/data-entries/switch/switch-styling/layout.scss +++ b/src/app/data-entries/switch/switch-styling/layout.scss @@ -1,12 +1,10 @@ @use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/switch/switch-component" as switch; @use 'sass:map'; :host { ::ng-deep { $_switch-schema: map.get($light-fluent-schema, switch); - @include switch(switch-theme($schema: $_switch-schema)); - @include switch.component(); + @include tokens(switch-theme($schema: $_switch-schema)); // Note: This is not the standard approach for styling the component. // We're using it here solely to mirror the UI5 sample. diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html index ea6e1493a..39086f398 100644 --- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html +++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html @@ -15,34 +15,32 @@ -
+ @if (cell.row.data.loadingRegion) { } -
-
+ @if (cell.row.data.loadingCity) { } -
diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss index 7c9876280..bf663072e 100644 --- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss +++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss @@ -41,6 +41,12 @@ overflow-x: none; } } + + igx-linear-bar { + position: absolute; + inset-inline: 0; + inset-block-end: 0; + } } } diff --git a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss index 350dfb901..0c28471bb 100644 --- a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss +++ b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss @@ -8,7 +8,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { diff --git a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html index da75e3c7d..0ad22be94 100644 --- a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html +++ b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html @@ -17,7 +17,7 @@
- + diff --git a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.scss b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.scss index c70ad2d8e..a4629b27f 100644 --- a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.scss +++ b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.scss @@ -1,84 +1,78 @@ -igx-expansion-panel { - display: flex; - font-size: .75rem; - min-width: 50%; - max-width: 50%; - padding: 0; - flex: 1 1 auto; +:host { + igx-expansion-panel { + --expanded-margin: 0; - igx-expansion-panel-description, igx-expansion-panel-body { - font-size: .75rem; - padding: 0; - display: flex; - flex: 1 1 auto; - } - - - .description { - display: flex; - width: 100%; - text-overflow: ellipsis; - padding: .5rem 1rem; - flex: 1 1 auto; - flex-direction: column; - } -} - -igx-input-group { - --ig-size: var(--ig-size-small); -} + flex-grow: 1; -::ng-deep { - .expand { - padding: 0; - background: transparent; - &:hover { - background: transparent; + igx-expansion-panel-description, + igx-expansion-panel-body { + font-size: .75rem; + padding: 0; + display: flex; + flex: 1 1 auto; } + .description { + display: grid; + width: 100%; + gap: 8px; + padding: 16px; + } - .igx-expansion-panel__header-description { - font-weight: bold; + igx-input-group { + --ig-size: var(--ig-size-small); } } - .igx-grid__tr { - &:hover { - .expand { - background: #fff; + + .employees-container { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + + + &--edit { + > igx-expansion-panel { + display: flex; + min-width: 50%; + flex: 1 0 auto; } } } - .dark-theme { - &:hover { - .expand { - background: #333; - } - } + .grid__wrapper { + margin: 0 auto; + padding: 16px; } -} -.employees-container { - width: 100%; - display: flex; - flex-flow: row wrap; - flex-grow: 1; + ::ng-deep { + .expand { + padding: 0; + background: transparent; + &:hover { + background: transparent; + } - &--edit { - display: flex; - flex-flow: row wrap; - flex-grow: 1; - > igx-expansion-panel { - display: flex; - min-width: 50%; - flex: 1 0 auto; + .igx-expansion-panel__header-description { + font-weight: bold; + } + } + + .igx-grid__tr { + &:hover { + .expand { + background: #fff; + } + } } - } -} -.grid__wrapper { - margin: 0 auto; - padding: 16px; + .dark-theme { + &:hover { + .expand { + background: #333; + } + } + } + } } diff --git a/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss b/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss index c36c25d40..9c38781b8 100644 --- a/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss +++ b/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss @@ -6,7 +6,7 @@ $progressBar-sample-theme: progress-linear-theme( ); .grid__wrapper { - @include progress-linear($progressBar-sample-theme); + @include tokens($progressBar-sample-theme); --ig-size: var(--ig-size-medium); margin: 0 16px; diff --git a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.html b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.html index db1d5ae12..4d93a6258 100644 --- a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.html +++ b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.html @@ -1,6 +1,6 @@
+ [autoGenerate]="false" [allowFiltering]="true" [rowClasses]="rowClasses"> @@ -10,20 +10,14 @@ Change - -
@if (val > 0) { - + } @if (val < 0) { - + } - {{ formatNumber(val) - }} -
+ {{ formatNumber(val) }} @@ -33,18 +27,13 @@ -
@if (val > 0) { - + } @if (val < 0) { - + } - {{ formatNumber(val) - }}% -
+ {{ formatNumber(val) }}% diff --git a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.scss b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.scss index afdc59ca5..2e9ad92fd 100644 --- a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.scss +++ b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.scss @@ -1,30 +1,18 @@ -.cellAlignSyle { - text-align: right; - float:right; -} -.cellAlignSyle > span { - float:right; -} -.up { - color: green; -} -.down { - color: red; -} -.headerAlignSyle { - text-align: right !important; -} +:host { + igx-badge { + margin-inline-end: auto; + } -.grid__wrapper { - margin: 0 auto; - padding: 16px; -} + ::ng-deep .negative-row { + $bg-color: rgb(253 243 243); -.currency-badge-container { - width: 80px; - float: right; -} + --body-column-border-color-odd: $bg-color; + --body-column-border-color-even: $bg-color; + + background: $bg-color; + --row-border-color: #FF000099; + --row-border-style: dashed; -.badge-left { - float: left; + border-block-start: 1px var(--row-border-style) var(--row-border-color); + } } diff --git a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.ts b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.ts index dcb0449da..a41b49983 100644 --- a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.ts +++ b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.ts @@ -21,10 +21,8 @@ export class GridRowStylesComponent { @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; public data: Observable; - public rowStyles = { - background: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000088' : '#00000000', - border: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '2px solid' : '1px solid', - 'border-color': (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000099' : '#E9E9E9' + public rowClasses = { + 'negative-row': (row: RowType) => +row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0 }; constructor() { diff --git a/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.html b/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.html index 252f0b2a6..7892df645 100644 --- a/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.html +++ b/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.html @@ -1,16 +1,10 @@ -
- drag_indicator - Draggable Dialog +
+ Draggable Dialog + drag_indicator +
Grab the handle icon to drag. -
- - - + diff --git a/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.scss b/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.scss index 726fd743c..09dabe364 100644 --- a/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.scss +++ b/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.scss @@ -1,37 +1,45 @@ @use '../../../../variables' as *; -@include dialog( - dialog-theme( - $schema: $schema - ) +$theme: dialog-theme( + $schema: $schema ); -@include dialog-typography(); - :host { display: block; margin: 16px; - @include b(dialog) { - @extend %igx-dialog-window; + .dialog { + @include tokens($theme, $mode: 'scoped'); display: flex; flex-direction: column; - max-width: rem(280px); - - @include e(icon) { - position: absolute; - right: rem(24px); - top: rem(24px); - cursor: move; + width: rem(280px); + min-width: rem(280px); + 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; + + header { + display: flex; + align-items: center; + justify-content: space-between; + padding: rem(16px) rem(24px); } - @include e(title) { - @extend %igx-dialog-title; + &__title { + display: inline-block; + color: var-get($theme, 'title-color'); } - @include e(content) { - @extend %igx-dialog-content; + &__icon { + cursor: move; } + + &__content { + color: var-get($theme, 'message-color'); + padding: rem(14px) rem(24px); + } } } diff --git a/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss b/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss index 030f54646..43744adc3 100644 --- a/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss +++ b/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss @@ -5,7 +5,7 @@ --teal-dark: #004d40; ::ng-deep { - @include avatar( + @include tokens( avatar-theme( $background: var(--teal-light), $color: var(--teal-dark) diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts b/src/app/layouts/card/card-sample-1/card-sample-1.component.ts index 0282a53d3..70b5e439f 100644 --- a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts +++ b/src/app/layouts/card/card-sample-1/card-sample-1.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -10,7 +10,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-igx-card-simple', styleUrls: ['./card-sample-1.component.scss'], templateUrl: './card-sample-1.component.html', - imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardSample1Component { public card = new Card({ diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts b/src/app/layouts/card/card-sample-2/card-sample-2.component.ts index 209b47996..e676655d2 100644 --- a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts +++ b/src/app/layouts/card/card-sample-2/card-sample-2.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerDirective, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -10,7 +10,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-card-sample-2', styleUrls: ['./card-sample-2.component.scss'], templateUrl: './card-sample-2.component.html', - imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardSample2Component { public card = new Card({ diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts b/src/app/layouts/card/card-sample-4/card-sample-4.component.ts index 591d84f41..c2651ac13 100644 --- a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts +++ b/src/app/layouts/card/card-sample-4/card-sample-4.component.ts @@ -4,7 +4,7 @@ import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxSliderComponent } from 'igniteui-angular/slider'; import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; -import { IgxButtonDirective, IgxDividerDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxButtonDirective, IgxDividerComponent, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxChipComponent } from 'igniteui-angular/chips'; @@ -22,7 +22,7 @@ import { selector: 'app-card-sample-4', styleUrls: ['./card-sample-4.component.scss'], templateUrl: './card-sample-4.component.html', - imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxDividerDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent] + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxDividerComponent, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent] }) export class CardSample4Component implements OnInit { private iconService = inject(IgxIconService); diff --git a/src/app/layouts/divider/dashed/divider-dashed.component.ts b/src/app/layouts/divider/dashed/divider-dashed.component.ts index 8dbfe5fa0..734a13738 100644 --- a/src/app/layouts/divider/dashed/divider-dashed.component.ts +++ b/src/app/layouts/divider/dashed/divider-dashed.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-dashed', styleUrls: ['./divider-dashed.component.scss'], templateUrl: './divider-dashed.component.html', - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerDashedComponent { diff --git a/src/app/layouts/divider/default/divider-default.component.ts b/src/app/layouts/divider/default/divider-default.component.ts index 4603601a1..9469002cf 100644 --- a/src/app/layouts/divider/default/divider-default.component.ts +++ b/src/app/layouts/divider/default/divider-default.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-default', styleUrls: ['./divider-default.component.scss'], templateUrl: './divider-default.component.html', - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerDefaultComponent { diff --git a/src/app/layouts/divider/inset/divider-inset.component.ts b/src/app/layouts/divider/inset/divider-inset.component.ts index dbf452c56..038499f9b 100644 --- a/src/app/layouts/divider/inset/divider-inset.component.ts +++ b/src/app/layouts/divider/inset/divider-inset.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-inset', styleUrls: ['./divider-inset.component.scss'], templateUrl: './divider-inset.component.html', - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerInsetComponent { diff --git a/src/app/layouts/divider/vertical/divider-vertical.component.ts b/src/app/layouts/divider/vertical/divider-vertical.component.ts index bfdbffbd0..43c0e3ad6 100644 --- a/src/app/layouts/divider/vertical/divider-vertical.component.ts +++ b/src/app/layouts/divider/vertical/divider-vertical.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-vertical', styleUrls: ['./divider-vertical.component.scss'], templateUrl: './divider-vertical.component.html', - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerVerticalComponent { diff --git a/src/app/layouts/expansion-panel/expansion-sample-4/expansion-sample-4.component.html b/src/app/layouts/expansion-panel/expansion-sample-4/expansion-sample-4.component.html index 796881546..6122e0ccf 100644 --- a/src/app/layouts/expansion-panel/expansion-sample-4/expansion-sample-4.component.html +++ b/src/app/layouts/expansion-panel/expansion-sample-4/expansion-sample-4.component.html @@ -1,7 +1,7 @@
- HTML5 + HTML5 HTML5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup-based pattern to it. @@ -9,7 +9,7 @@ - CSS3 + CSS3 Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML @@ -17,7 +17,7 @@ - SASS/SCSS + SASS/SCSS Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). diff --git a/src/app/layouts/expansion-panel/expansion-sample-5/expansion-sample-5.component.html b/src/app/layouts/expansion-panel/expansion-sample-5/expansion-sample-5.component.html index 579474404..7f3fd4c3f 100644 --- a/src/app/layouts/expansion-panel/expansion-sample-5/expansion-sample-5.component.html +++ b/src/app/layouts/expansion-panel/expansion-sample-5/expansion-sample-5.component.html @@ -1,7 +1,7 @@
- Angular + Angular Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. diff --git a/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.scss b/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.scss index 355981ca4..e9cf6ab8e 100644 --- a/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.scss +++ b/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.scss @@ -45,7 +45,7 @@ $my-card: card-theme( $content-text-color: color($default-palette, 'gray', 900), ); -@include card($my-card); +@include tokens($my-card); .selected-card { border: 2px solid color($default-palette, 'primary', 400); diff --git a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss index 355981ca4..e9cf6ab8e 100644 --- a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss +++ b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss @@ -45,7 +45,7 @@ $my-card: card-theme( $content-text-color: color($default-palette, 'gray', 900), ); -@include card($my-card); +@include tokens($my-card); .selected-card { border: 2px solid color($default-palette, 'primary', 400); diff --git a/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.scss b/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.scss index 223f7133d..e3557ec03 100644 --- a/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.scss +++ b/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.scss @@ -5,7 +5,7 @@ $custom-strip: action-strip-theme( ); .my-action-strip { - @include action-strip($custom-strip); + @include tokens($custom-strip); display: flex; align-items: flex-start; justify-content: center; diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html index afc5c45d1..4726ef89d 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html @@ -1,4 +1,4 @@
- -
\ No newline at end of file + diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss index eda8537f3..c4867019f 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss @@ -1,170 +1,14 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use 'igniteui-angular/theming' as *; -// CSS variables approach +$custom-calendar-theme: calendar-theme( + $header-background: #ecaa53, + $content-background: #011627, +); :host { - ::ng-deep { - .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { - --date-hover-background: var(--background-hover); - --date-selected-foreground: var(--primary); - --date-selected-background: #FFF; - --date-selected-border-color: var(--primary); - --date-selected-focus-foreground: var(--primary); - --date-selected-focus-background: var(--background-hover); - --date-selected-focus-border-color: var(--primary); - --date-selected-hover-foreground: var(--primary); - --date-selected-hover-background: var(--background-hover); - --date-selected-hover-border-color: var(--primary); - --date-selected-current-hover-background: var(--background-hover); - --date-selected-current-focus-background: var(--background-hover); - --date-selected-current-background: #FFF; - --date-selected-current-border-color: var(--primary); - --date-selected-current-hover-border-color: var(--primary); - --date-current-hover-background: var(--background-hover); - } - } -} + display: grid; + place-items: center; + height: 100%; -igx-calendar { - --date-focus-background: transparent; - --week-number-background: transparent; - --weekend-color: #131E29; - --weekday-color: #556B82; - --week-number-foreground: #556B82; - --inactive-color: #556B82; - --date-current-border-color: var(--current-border); - --date-current-hover-border-color: var(--current-border); - --date-current-focus-border-color: var(--current-border); - --date-current-hover-background: var(--background-weekend); - --date-selected-current-border-color: var(--current-border); - --date-selected-current-background: #FFF; - --date-selected-current-foreground: var(--primary); - --date-selected-current-focus-border-color: var(--current-border); - --date-selected-current-focus-background: var(--background-weekend); - --date-selected-current-focus-foreground: var(--primary); - --date-selected-current-hover-border-color: var(--current-border); - --date-selected-current-hover-background: var(--background-weekend); - --date-selected-current-hover-foreground: var(--primary); - --date-selected-foreground: var(--primary); - --date-selected-background: #FFF; - --date-selected-border-color: var(--primary); - --date-selected-hover-foreground: var(--primary); - --date-selected-hover-background: var(--background-weekend); - --date-selected-hover-border-color: var(--primary); - --date-selected-focus-foreground: var(--primary); - --date-selected-focus-background: var(--background-weekend); - --date-selected-focus-border-color: var(--primary); - --picker-foreground: var(--primary); - --picker-hover-foreground: var(--primary); - --picker-focus-foreground: var(--primary); - --ym-hover-background: var(--background); - --ym-selected-background: #EDF5FF; - --ym-selected-hover-background: #D9EAFF; - --ym-selected-hover-foreground: var(--primary); - --ym-selected-outline-color: var(--primary); - --ym-selected-hover-outline-color: var(--primary); - --ym-selected-focus-outline-color: var(--primary); - --ym-selected-focus-background: #D9EAFF; - --ym-current-foreground: var(--primary); - --ym-current-background: transparent; - --ym-current-outline-color: transparent; - --ym-current-hover-foreground: var(--primary); - --ym-current-hover-background: var(--background); - --ym-current-outline-hover-color: var(--primary); - --ym-selected-current-foreground: var(--primary); - --ym-selected-current-background: #EDF5FF; - --ym-selected-current-outline-color: var(--primary); - --ym-selected-current-hover-foreground: var(--primary); - --ym-selected-current-hover-background: #D9EAFF; - --ym-selected-current-outline-hover-color: var(--primary); - --ym-selected-current-outline-focus-color: var(--primary); + @include tokens($custom-calendar-theme); } - -// Sass theme approach - -// $custom-calendar-theme-weekend: calendar-theme( -// $date-hover-background: var(--background-hover), -// $date-selected-foreground: var(--primary), -// $date-selected-background: #FFF, -// $date-selected-border-color: var(--primary), -// $date-selected-focus-foreground: var(--primary), -// $date-selected-focus-background: var(--background-hover), -// $date-selected-focus-border-color: var(--primary), -// $date-selected-hover-foreground: var(--primary), -// $date-selected-hover-background: var(--background-hover), -// $date-selected-hover-border-color: var(--primary), -// $date-selected-current-hover-background: var(--background-hover), -// $date-selected-current-focus-background: var(--background-hover), -// $date-selected-current-background: #FFF, -// $date-selected-current-border-color: var(--primary), -// $date-selected-current-hover-border-color: var(--primary), -// $date-current-hover-background: var(--background-hover) -// ); - -// $custom-calendar-theme: calendar-theme( -// $date-focus-background: transparent, -// $picker-foreground: var(--primary), -// $picker-hover-foreground: var(--primary), -// $picker-focus-foreground: var(--primary), -// $weekday-color: #556B82, -// $weekend-color: #131E29, -// $inactive-color: #556B82, -// $week-number-foreground: #556B82, -// $week-number-background: transparent, -// $ym-selected-current-hover-foreground: var(--primary), -// $ym-selected-current-hover-background: #D9EAFF, -// $ym-hover-background: var(--background), -// $ym-current-foreground: var(--primary), -// $ym-current-background: transparent, -// $ym-current-hover-foreground: var(--primary), -// $ym-current-hover-background: var(--background), -// $ym-selected-current-foreground: var(--primary), -// $ym-selected-current-background: #EDF5FF, -// $ym-selected-background: #EDF5FF, -// $ym-selected-hover-foreground: var(--primary), -// $ym-selected-hover-background: #D9EAFF, -// $ym-current-outline-color: transparent, -// $ym-current-outline-hover-color: var(--primary), -// $ym-selected-outline-color: var(--primary), -// $ym-selected-hover-outline-color: var(--primary), -// $ym-selected-focus-outline-color: var(--primary), -// $ym-selected-current-outline-color: var(--primary), -// $ym-selected-current-outline-hover-color: var(--primary), -// $ym-selected-current-outline-focus-color: var(--primary), -// $date-selected-current-foreground: var(--primary), -// $date-selected-current-background: #FFF, -// $date-selected-current-hover-foreground: var(--primary), -// $date-selected-current-hover-background: var(--background-weekend), -// $date-selected-current-focus-foreground: var(--primary), -// $date-selected-current-focus-background: var(--background-weekend), -// $date-selected-foreground: var(--primary), -// $date-selected-background: #FFF, -// $date-selected-border-color: var(--primary), -// $date-selected-hover-foreground: var(--primary), -// $date-selected-hover-background: var(--background-weekend), -// $date-selected-hover-border-color: var(--primary), -// $date-selected-focus-foreground: var(--primary), -// $date-selected-focus-background: var(--background-weekend), -// $date-selected-focus-border-color: var(--primary), -// $date-current-border-color: var(--current-border), -// $date-current-hover-border-color: var(--current-border), -// $date-current-focus-border-color: var(--current-border), -// $date-selected-current-border-color: var(--current-border), -// $date-selected-current-hover-border-color: var(--current-border), -// $date-selected-current-focus-border-color: var(--current-border), -// $date-current-hover-background: var(--background-weekend), -// $border-radius: rem(8px) -// ); - -// :host { -// ::ng-deep { -// .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { -// @include tokens($custom-calendar-theme-weekend); -// } -// } -// } - -// igx-calendar { -// @include tokens($custom-calendar-theme); -// } diff --git a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss b/src/app/scheduling/calendar/calendar-styling-sample/layout.scss deleted file mode 100644 index bd4d37889..000000000 --- a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss +++ /dev/null @@ -1,135 +0,0 @@ -@use "igniteui-angular/theming" as *; - -:host { - ::ng-deep { - - // Note: This is not the standard approach for styling the component. - // We're using it here solely to mirror the UI5 sample. - - [title="Week"] .igx-days-view__label.igx-days-view__label--week-number { - opacity: 0; - } - - igx-icon { - --color: var(--primary); - --size: #{rem(20px)}; - } - - .igx-calendar-view__item-inner { - color: var(--primary) - } - - .igx-days-view__date--selected span { - font-weight: 700; - } - - .igx-days-view__date--current span { - border-width: rem(2px); - } - - .igx-days-view__date--weekend:not(.igx-days-view__date--inactive):not(.igx-days-view__date--selected) span:not(:hover) { - background: var(--background-weekend); - } - - .igx-days-view__date--active ::after { - border: rem(2px) solid #0032A5; - width: rem(20px); - height: rem(20px); - border-radius: rem(3px); - left: rem(3px); - } - - .igx-days-view__date--active.igx-days-view__date--current :after { - left: rem(2px); - } - - .igx-calendar-view__item:not(.igx-calendar-view__item--selected) .igx-calendar-view__item-inner:hover { - box-shadow: inset 0 0 0 rem(1px) #BCC3CA; - } - - .igx-calendar-view { - padding: 1rem rem(6px); - } - - .igx-calendar-picker__prev { - position: absolute; - } - - .igx-calendar-picker__next { - position: absolute; - right: 0; - } - - .igx-calendar-picker__nav { - position: relative; - left: 0; - bottom: rem(27px); - } - - .igx-calendar-picker__next:hover, - .igx-calendar-picker__prev:hover { - background-color: var(--background); - border-radius: rem(8px); - box-shadow: inset 0 0 0 rem(1px) #BCC3CA; - } - - .igx-calendar-picker__next, - .igx-calendar-picker__prev { - padding: rem(6px); - } - - .igx-calendar-picker { - display: unset; - } - - .igx-calendar-picker__dates { - justify-content: center; - position: relative; - top: rem(4px); - gap: 1rem; - height: 2rem; - - span:not(.igx-calendar__aria-off-screen) { - font-size: rem(14px); - padding: rem(4px) rem(10px); - - &:hover { - background-color: var(--background); - border-radius: rem(8px); - box-shadow: inset 0 0 0 rem(1px) #BCC3CA; - } - } - } - - .igx-calendar__pickers--days { - height: rem(24px); - } - - .igx-calendar-picker { - padding-inline: 1rem; - } - } -} - -.calendar-wrapper { - max-width: rem(600px); - margin: rem(8px); -} - -igx-calendar { - --current-border: #A100C2; - --primary: #0064D9; - --background: #EAECEE; - --background-weekend: #E8E8E8; - --background-hover: #F5F6F8; - - width: rem(290px); - min-height: rem(282px); - box-sizing: border-box; - padding-top: rem(6px); - box-shadow: elevation(4); - --ig-font-family: Arial, sans-serif; - --ig-subtitle-1-font-weight: 600; - --ig-size: 1; - --ig-radius-factor: 0.4; -} \ No newline at end of file diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/layout.scss b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/layout.scss deleted file mode 100644 index 5d48b301e..000000000 --- a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/layout.scss +++ /dev/null @@ -1,4 +0,0 @@ -igx-month-picker { - --ig-size: 2; - max-width: 400px; -} \ No newline at end of file diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html index 1b4fb2552..d941879ff 100644 --- a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html +++ b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html @@ -1 +1 @@ - + diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.scss b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.scss index a60d456fa..0d9fd6e34 100644 --- a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.scss +++ b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.scss @@ -1 +1,5 @@ -@use "layout.scss"; +:host { + display: grid; + place-items: center; + height: 100%; +} diff --git a/src/app/theming/angular/angular-sample.component.ts b/src/app/theming/angular/angular-sample.component.ts index 2eef1d86c..0b83e40cc 100644 --- a/src/app/theming/angular/angular-sample.component.ts +++ b/src/app/theming/angular/angular-sample.component.ts @@ -1,7 +1,7 @@ import { Component, HostBinding, OnInit, ViewChild, inject } from '@angular/core'; import { IgxDialogActionsDirective, IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; -import { IgxButtonDirective, IgxDividerDirective, IgxIconButtonDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; +import { IgxButtonDirective, IgxDividerComponent, IgxIconButtonDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; @@ -21,7 +21,7 @@ import { MatInput } from '@angular/material/input'; selector: 'app-angular-sample', styleUrls: ['./angular-sample.component.scss'], templateUrl: './angular-sample.component.html', - imports: [MatToolbar, IgxButtonDirective, MatMenuTrigger, IgxIconComponent, MatMenu, MatMenuItem, IgxLayoutDirective, IgxAvatarComponent, IgxIconButtonDirective, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, MatButton, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, MatSlider, MatSliderThumb, IgxDividerDirective, MatStepper, MatStep, FormsModule, ReactiveFormsModule, MatStepLabel, MatFormField, MatLabel, MatInput, MatStepperNext, MatStepperPrevious] + imports: [MatToolbar, IgxButtonDirective, MatMenuTrigger, IgxIconComponent, MatMenu, MatMenuItem, IgxLayoutDirective, IgxAvatarComponent, IgxIconButtonDirective, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, MatButton, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, MatSlider, MatSliderThumb, IgxDividerComponent, MatStepper, MatStep, FormsModule, ReactiveFormsModule, MatStepLabel, MatFormField, MatLabel, MatInput, MatStepperNext, MatStepperPrevious] }) export class AngularMaterialComponent implements OnInit { diff --git a/src/app/theming/animations/animations-sample-2/animations-sample-2.component.html b/src/app/theming/animations/animations-sample-2/animations-sample-2.component.html index 8aa6432f7..b5d519cac 100644 --- a/src/app/theming/animations/animations-sample-2/animations-sample-2.component.html +++ b/src/app/theming/animations/animations-sample-2/animations-sample-2.component.html @@ -1,32 +1,30 @@ -
- -
- -
Rozes
-
Under the Grave (2016)
- - - - + +
+ + Rozes + Under the Grave (2016) + + + + - -

As I have always said: I write what's real and what's true, - even if it means throwing myself under the bus.

- -
+ +

As I have always said: I write what's real and what's true, + even if it means throwing myself under the bus.

+ +
- + - - - - - - -
+ + + + + + diff --git a/src/app/theming/animations/animations-sample-2/animations-sample-2.component.scss b/src/app/theming/animations/animations-sample-2/animations-sample-2.component.scss index 6adaee26f..406979e7d 100644 --- a/src/app/theming/animations/animations-sample-2/animations-sample-2.component.scss +++ b/src/app/theming/animations/animations-sample-2/animations-sample-2.component.scss @@ -3,13 +3,16 @@ @include fade-in-top(); -.sample-column { - display: block; - padding: 16px; - @include animation('fade-in-top' 3s $ease-out-quad infinite); +:host { + display: grid; + place-content: center; + width: 100%; + height: 100%; } -.card-wrapper { +igx-card { + @include animation('fade-in-top' 3s $ease-out-quad forwards); + max-width: 400px; min-width: 250px; } diff --git a/src/app/theming/animations/animations-sample-2/animations-sample-2.component.ts b/src/app/theming/animations/animations-sample-2/animations-sample-2.component.ts index 2cef8863d..7e2197b8b 100644 --- a/src/app/theming/animations/animations-sample-2/animations-sample-2.component.ts +++ b/src/app/theming/animations/animations-sample-2/animations-sample-2.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerDirective, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card'; +import { IgxDividerComponent, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @Component({ selector: 'app-animations-sample-2', styleUrls: ['./animations-sample-2.component.scss'], templateUrl: './animations-sample-2.component.html', - imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxLayoutDirective, IgxFlexDirective, IgxDividerComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent, IGX_CARD_DIRECTIVES] }) export class AnimationsSample2Component { public horizontal = true; diff --git a/src/app/theming/display-density/display-density.component.scss b/src/app/theming/display-density/display-density.component.scss index 1bf4c27e5..5e194561f 100644 --- a/src/app/theming/display-density/display-density.component.scss +++ b/src/app/theming/display-density/display-density.component.scss @@ -1,13 +1,6 @@ :host { - display: block; - padding: 8px; + display: grid; + gap: 16px; + padding: 16px; + max-width: 500px; } - -.density-chooser { - margin-bottom: 16px; -} - -igx-buttongroup, igx-input-group { - display: block; - width: 500px; -} \ No newline at end of file diff --git a/src/app/theming/styles/dark-theme.scss b/src/app/theming/styles/dark-theme.scss index 0464750d5..e226d14f5 100644 --- a/src/app/theming/styles/dark-theme.scss +++ b/src/app/theming/styles/dark-theme.scss @@ -1,23 +1,18 @@ @use 'igniteui-angular/theming' as *; // Import grid component and theme styles -@use 'igniteui-angular/lib/core/styles/components/grid/grid-component'; @use 'igniteui-angular/lib/core/styles/components/grid/grid-theme'; // Import paginator component and theme styles -@use 'igniteui-angular/lib/core/styles/components/paginator/paginator-component'; @use 'igniteui-angular/lib/core/styles/components/paginator/paginator-theme'; // Import dialog-group component and theme styles -@use 'igniteui-angular/lib/core/styles/components/dialog/dialog-component'; @use 'igniteui-angular/lib/core/styles/components/dialog/dialog-theme'; // Import input-group component and theme styles -@use 'igniteui-angular/lib/core/styles/components/input/input-group-component'; @use 'igniteui-angular/lib/core/styles/components/input/input-group-theme'; // Import grid snackbar and theme styles -@use 'igniteui-angular/lib/core/styles/components/snackbar/snackbar-component'; @use 'igniteui-angular/lib/core/styles/components/snackbar/snackbar-theme'; // Import button component and theme styles @@ -25,15 +20,12 @@ @use 'igniteui-angular/lib/core/styles/components/button/button-theme'; // Import button-group component and theme styles -@use 'igniteui-angular/lib/core/styles/components/button-group/button-group-component'; @use 'igniteui-angular/lib/core/styles/components/button-group/button-group-theme'; // Import chip component and theme styles -@use 'igniteui-angular/lib/core/styles/components/chip/chip-component'; @use 'igniteui-angular/lib/core/styles/components/chip/chip-theme'; // Import badge component and theme styles -@use 'igniteui-angular/lib/core/styles/components/badge/badge-component'; @use 'igniteui-angular/lib/core/styles/components/badge/badge-theme'; // Define the primary colors diff --git a/src/app/theming/styles/themes.scss b/src/app/theming/styles/themes.scss index 9ab35163a..91311664d 100644 --- a/src/app/theming/styles/themes.scss +++ b/src/app/theming/styles/themes.scss @@ -1,7 +1,6 @@ @use 'schemas'; // Import grid component and theme styles -@use 'igniteui-angular/lib/core/styles/components/grid/grid-component'; @use 'igniteui-angular/lib/core/styles//components/grid/grid-theme'; // Import grid snackbar and theme styles @@ -33,23 +32,18 @@ @use 'igniteui-angular/lib/core/styles//components/drop-down/drop-down-theme'; // Import calendar component and theme styles -@use 'igniteui-angular/lib/core/styles/components/calendar/calendar-component'; @use 'igniteui-angular/lib/core/styles/components/calendar/calendar-theme'; // Import chip component and theme styles -@use 'igniteui-angular/lib/core/styles/components/chip/chip-component'; @use 'igniteui-angular/lib/core/styles/components/chip/chip-theme'; // Import icon component and theme styles -@use 'igniteui-angular/lib/core/styles/components/icon/icon-component'; @use 'igniteui-angular/lib/core/styles/components/icon/icon-theme'; // Import drop-down component and theme styles -@use 'igniteui-angular/lib/core/styles/components/drop-down/drop-down-component'; @use 'igniteui-angular/lib/core/styles/components/drop-down/drop-down-theme'; // Import badge component and theme styles -@use 'igniteui-angular/lib/core/styles/components/badge/badge-component'; @use 'igniteui-angular/lib/core/styles/components/badge/badge-theme'; diff --git a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss index d15b41309..0532c5af1 100644 --- a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss +++ b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss @@ -8,7 +8,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { diff --git a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss index c36c25d40..9c38781b8 100644 --- a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss +++ b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss @@ -6,7 +6,7 @@ $progressBar-sample-theme: progress-linear-theme( ); .grid__wrapper { - @include progress-linear($progressBar-sample-theme); + @include tokens($progressBar-sample-theme); --ig-size: var(--ig-size-medium); margin: 0 16px;