Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Update @use @forward and hsla #961

Merged
merged 6 commits into from Dec 10, 2021
Merged

feat: Update @use @forward and hsla #961

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b2caa8
feat: Update @use @forward and hsla
Dec 3, 2021
d989c55
Merge branch 'vNext' into iganchev/scss-use
IvayloG Dec 3, 2021
a630349
chore: Address comments
Dec 10, 2021
0963ac2
Merge branch 'iganchev/scss-use' of https://github.com/IgniteUI/ignit…
Dec 10, 2021
a4581b8
chore: Revert @use
Dec 10, 2021
1b8bbf6
Merge branch 'master' into iganchev/scss-use
Lipata Dec 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/cli/migrations/update-4_2_3/index.spec.ts
View file
Open in desktop
Expand Up @@ -26,7 +26,7 @@ describe("Update 4.2.3", () => {
it("should add Awesome Grid extra paginator style", async done => {
const stylesFile = "/src/app/awesome-grid/awesome-grid.component.scss";
appTree.create(stylesFile,
`@import '~igniteui-angular/theming';
`@use 'igniteui-angular/theming' as *;

:host ::ng-deep {

Expand All @@ -46,7 +46,7 @@ describe("Update 4.2.3", () => {
await schematicRunner.runSchematicAsync("migration-04", {}, appTree).toPromise();
expect(appTree.readContent(stylesFile).replace(/\r\n/g, "\n"))
.toEqual(
`@import '~igniteui-angular/theming';
`@use 'igniteui-angular/theming' as *;

:host ::ng-deep {

Expand Down
1 change: 0 additions & 1 deletion packages/cli/templates/webcomponents/igc-ts/projects/empty/files/index.html
View file
Open in desktop
Expand Up @@ -15,7 +15,6 @@
:host {
display: block;
padding: 25px;
color: var(--test-component-test-text-color, #000);
}

#outlet {
Expand Down
12 changes: 4 additions & 8 deletions packages/igx-templates/Update.spec.ts
View file
Open in desktop
Expand Up @@ -118,17 +118,13 @@ export class HomeComponent {
}`}, {
path: "src/home.component.scss",
content:
`@import '~igniteui-angular/theming';
@import '~igniteui-dockmanager/styles/themes/test';
@use 'igniteui-angular/theming';
@forward 'igniteui-angular/theming';
`@use 'igniteui-angular/theming' as *;
@use 'igniteui-dockmanager/styles/themes/test' as *;
@include igx-core();
`,
expected:
`@import '~@infragistics/igniteui-angular/theming';
@import '~@infragistics/igniteui-dockmanager/styles/themes/test';
@use '@infragistics/igniteui-angular/theming';
@forward '@infragistics/igniteui-angular/theming';
`@use '@infragistics/igniteui-angular/theming' as *;
@use '@infragistics/igniteui-dockmanager/styles/themes/test' as *;
@include igx-core();
`}, {
path: "angular.json",
Expand Down
3 changes: 1 addition & 2 deletions ...igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
@@ -1,5 +1,4 @@
@import '~<%=igxPackage%>/theming';

@use '<%=igxPackage%>/theming' as *;
$grid-sample-theme: igx-grid-theme(
$row-selected-background: #333,
$row-selected-text-color: #ddd,
Expand Down
3 changes: 1 addition & 2 deletions ...tes/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
@@ -1,8 +1,7 @@
@use '<%=igxPackage%>/theming' as *;
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
wnvko marked this conversation as resolved.
Show resolved Hide resolved
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
@import '~<%=igxPackage%>/theming';

:host ::ng-deep {

$crm-grid-palette: igx-palette(
Expand Down
5 changes: 3 additions & 2 deletions ...igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
@@ -1,3 +1,6 @@
@use '<%=igxPackage%>/theming' as *;
@use './themes/_mixins' as *;

:host {
display: block;
width: 100%;
Expand Down Expand Up @@ -224,12 +227,10 @@
height: 100%;
}

@import '~<%=igxPackage%>/theming';
@include igx-core();
@include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
@include igx-theme($default-palette);

@import './themes/_mixins';

@include scrollbar-love();

Expand Down
4 changes: 3 additions & 1 deletion ...templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss
View file
Open in desktop
@@ -1,7 +1,9 @@
@use '<%=igxPackage%>/theming' as *;

@mixin scrollbar-love($scrollbar-color: null) {
$scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
$scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));

@if $scrollbar-color and luminance($scrollbar-color) < .5 {
$scrollbar-track: darken($scrollbar-color, 8%);
$scrollbar-thumb: lighten($scrollbar-color, 20%);
Expand Down
5 changes: 3 additions & 2 deletions ...s/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
@@ -1,3 +1,6 @@
@use '<%=igxPackage%>/theming' as *;
@use './themes/_mixins' as *;

:host ::ng-deep {
.finjs-icons {
display: flex;
Expand Down Expand Up @@ -202,12 +205,10 @@
// Custom Dark Theme

// Import the theme utilities first
@import '~<%=igxPackage%>/theming';
@include igx-core();
@include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
@include igx-theme($default-palette);

@import './themes/_mixins';

$green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);

Expand Down
4 changes: 3 additions & 1 deletion ...ates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use '<%=igxPackage%>/theming' as *;

@mixin scrollbar-love($scrollbar-color: null) {
$scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
$scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));
Expand All @@ -16,4 +18,4 @@
::-webkit-scrollbar-thumb {
background-color: $scrollbar-thumb;
}
}
}
3 changes: 2 additions & 1 deletion packages/igx-templates/igx-ts/projects/_base/files/src/styles.scss
View file
Open in desktop
@@ -1,6 +1,7 @@
/* You can add global styles to this file, and also import other style files */
// Standard CSS normalize, comment out if not required or using a different module
@import "~minireset.css/minireset";
@use "~minireset.css/minireset" as *;
@forward "~minireset.css/minireset";

<%=CustomTheme%>
html, body {
Expand Down
2 changes: 1 addition & 1 deletion packages/igx-templates/igx-ts/projects/_base/index.ts
View file
Open in desktop
Expand Up @@ -23,7 +23,7 @@ export class BaseIgxProject implements ProjectTemplate {

private CUSTOM_THEME
= `/* See: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index */
@import "~igniteui-angular/theming";
@use "igniteui-angular/theming" as *;

$primary: #731963 !default;
$secondary: #ce5712 !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/igx-templates/igx-ts/projects/empty/files/src/app/home/home.component.scss
View file
Open in desktop
@@ -1,4 +1,4 @@
@import "~igniteui-angular/theming";
@use '<%=igxPackage%>/theming' as *;

%content-display {
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion ...es/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@ igx-tree {
.node-refresh {
cursor: pointer;
padding: 0px 4px;
color: var(--igx-success-500);
color: hsla(var(--igx-success-500));
}

.node {
Expand Down
2 changes: 1 addition & 1 deletion spec/unit/PromptSession-spec.ts
View file
Open in desktop
Expand Up @@ -690,7 +690,7 @@ describe("Unit - PromptSession", () => {
await mockSession.start();
const CUSTOM_THEME = `
/* See: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index */
@import "~igniteui-angular/theming";
@use "igniteui-angular/theming" as *;
$primary: #731963 !default;
$secondary: #ce5712 !default;
$app-palette: igx-palette($primary, $secondary);
Expand Down