Skip to content

Commit f80f40b

Browse files
simeonoffsimeonoff
authored
Merge pull request #336 from IgniteUI/apetrov/update-styling-samples
docs(grid): update styling sections to match the samples
2 parents 7d54ee6 + 1cf1aa6 commit f80f40b

14 files changed

Lines changed: 278 additions & 253 deletions

‎docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -338,17 +338,14 @@ Next, create a new theme, that extends the <ApiLink kind="sass" module="themes"
338338
</DocsAside>
339339

340340
```scss
341-
$custom-theme: grid-theme(
342-
$cell-active-border-color: #ffcd0f,
343-
$cell-selected-background: #6f6f6f,
344-
$row-hover-background: #f8e495,
345-
$row-selected-background: #8d8d8d,
346-
$header-background: #494949,
347-
$header-text-color: #fff,
348-
$expand-icon-color: #ffcd0f,
349-
$expand-icon-hover-color: #e0b710,
350-
$resize-line-color: #ffcd0f,
351-
$row-highlight: #ffcd0f
341+
$background: #292826;
342+
$foreground: #eeece1;
343+
$accent: #ffcd0f;
344+
345+
$custom-grid: grid-theme(
346+
$background: $background,
347+
$foreground: $foreground,
348+
$accent-color: $accent,
352349
);
353350
```
354351

@@ -362,7 +359,7 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the
362359

363360
```scss
364361
:host {
365-
@include tokens($custom-theme);
362+
@include tokens($custom-grid);
366363
}
367364
```
368365

‎docs/angular/src/content/en/components/treegrid/tree-grid.mdx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -303,17 +303,14 @@ There is no specific `sass` tree grid function.
303303
</DocsAside>
304304

305305
```scss
306-
$custom-theme: grid-theme(
307-
$cell-active-border-color: #ffcd0f,
308-
$cell-selected-background: #6f6f6f,
309-
$row-hover-background: #f8e495,
310-
$row-selected-background: #8d8d8d,
311-
$header-background: #494949,
312-
$header-text-color: #fff,
313-
$expand-icon-color: #ffcd0f,
314-
$expand-icon-hover-color: #e0b710,
315-
$resize-line-color: #ffcd0f,
316-
$row-highlight: #ffcd0f
306+
$background: #292826;
307+
$foreground: #eeece1;
308+
$accent: #ffcd0f;
309+
310+
$custom-grid: grid-theme(
311+
$background: $background,
312+
$foreground: $foreground,
313+
$accent-color: $accent,
317314
);
318315
```
319316

@@ -325,7 +322,7 @@ The last step is to **include** the component theme in our application.
325322

326323
```scss
327324
:host {
328-
@include tokens($custom-theme);
325+
@include tokens($custom-grid);
329326
}
330327
```
331328

‎docs/angular/src/content/en/grids_templates/advanced-filtering.mdx‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,9 @@ Since the Advanced Filtering dialog uses the <ApiLink type="QueryBuilder" /> com
251251

252252
```scss
253253
$custom-query-builder: query-builder-theme(
254-
$header-foreground: #512da8
254+
$background: #1f2836,
255+
$foreground: #f5f6e6,
256+
$accent-color: #f5f6e6
255257
);
256258
```
257259

@@ -262,15 +264,6 @@ Instead of hardcoding the color values like we just did, we can achieve greater
262264
The last step is to **include** the component theme in our application.
263265

264266
```scss
265-
$custom-query-builder: query-builder-theme(
266-
$header-foreground: #512da8,
267-
$color-expression-group-and: #eb0000,
268-
$color-expression-group-or: #0000f3,
269-
$subquery-header-background: var(--ig-gray-300),
270-
$subquery-border-color: var(--ig-warn-500),
271-
$subquery-border-radius: rem(4px)
272-
);
273-
274267
igx-advanced-filtering-dialog {
275268
@include tokens($custom-query-builder);
276269
}
@@ -285,15 +278,6 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc
285278
</DocsAside>
286279

287280
```scss
288-
$custom-query-builder: query-builder-theme(
289-
$header-foreground: #512da8,
290-
$color-expression-group-and: #eb0000,
291-
$color-expression-group-or: #0000f3,
292-
$subquery-header-background: var(--ig-gray-300),
293-
$subquery-border-color: var(--ig-warn-500),
294-
$subquery-border-radius: rem(4px)
295-
);
296-
297281
:host {
298282
::ng-deep {
299283
igx-advanced-filtering-dialog {

‎docs/angular/src/content/en/grids_templates/cell-editing.mdx‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -581,22 +581,50 @@ $color-palette: palette(
581581
We can now define the theme using our palette. The cells are styled by the <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} />, so we can use that to generate a theme for our {ComponentName}:
582582

583583
```scss
584-
$custom-grid-theme: grid-theme(
584+
$grid-theme: grid-theme(
585585
$cell-editing-background: $blue,
586+
$cell-editing-foreground: $white,
587+
$cell-active-border-color: $blue,
586588
$cell-edited-value-color: $white,
587-
$cell-active-border-color: $white,
588-
$edit-mode-color: color($color-palette, "secondary", 200)
589+
$edit-mode-color: color($color: "secondary", $variant: 200)
589590
);
590591
```
591592

592593
### Applying the theme
593594

594-
The easiest way to apply our theme is with a `sass` `@include` statement in the global styles file:
595+
The last step is to **include** the custom palette and grid themes.
596+
597+
<ComponentBlock for="Grid">
598+
599+
```scss
600+
igx-grid {
601+
@include palette($color-palette);
602+
@include tokens($grid-theme);
603+
}
604+
```
605+
606+
</ComponentBlock>
607+
<ComponentBlock for="TreeGrid">
595608

596609
```scss
597-
@include grid($custom-grid-theme);
610+
igx-tree-grid {
611+
@include palette($color-palette);
612+
@include tokens($grid-theme);
613+
}
598614
```
599615

616+
</ComponentBlock>
617+
<ComponentBlock for="HierarchicalGrid">
618+
619+
```scss
620+
igx-hierarchical-grid {
621+
@include palette($color-palette);
622+
@include tokens($grid-theme);
623+
}
624+
```
625+
626+
</ComponentBlock>
627+
600628
### Demo
601629

602630
In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [`input-group`](/input-group#styling), [`datepicker`](/date-picker#styling) & [`checkbox`](/checkbox#styling)

‎docs/angular/src/content/en/grids_templates/column-resizing.mdx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,12 +314,34 @@ To get started with the styling of the {ComponentTitle} column resize line, we n
314314

315315
The simplest approach to achieve this is to create a new theme that extends the <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> and accepts many parameters as well as the `$resize-line-color` parameter.
316316

317+
<ComponentBlock for="Grid">
318+
317319
``` scss
318320
$custom-grid-theme: grid-theme(
319321
$resize-line-color: #0288d1
320322
);
321323
```
322324

325+
</ComponentBlock>
326+
<ComponentBlock for="TreeGrid">
327+
328+
``` scss
329+
$custom-grid-theme: grid-theme(
330+
$resize-line-color: #dc38e8
331+
);
332+
```
333+
334+
</ComponentBlock>
335+
<ComponentBlock for="HierarchicalGrid">
336+
337+
``` scss
338+
$custom-grid-theme: grid-theme(
339+
$resize-line-color: #07ea07
340+
);
341+
```
342+
343+
</ComponentBlock>
344+
323345
<DocsAside type="info">
324346
Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them.
325347
</DocsAside>

‎docs/angular/src/content/en/grids_templates/column-selection.mdx‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -130,44 +130,56 @@ Following the simplest approach, let's define our custom **theme**.
130130
<ComponentBlock for="TreeGrid">
131131

132132
```scss
133-
$custom-grid-theme: grid-theme(
134-
$row-selected-background: #011627,
135-
$row-selected-text-color: #ecaa53,
136-
$row-selected-hover-background: #011627,
137-
$header-selected-text-color: #ecaa53,
138-
$header-selected-background: #011627,
139-
$expand-icon-color: #ecaa53,
140-
$expand-icon-hover-color: #b64b80
133+
$background: #0b0119;
134+
$foreground: #eeece1;
135+
$accent: #f6b560;
136+
137+
$grid-theme: grid-theme(
138+
$background: $background,
139+
$foreground: $foreground,
140+
$accent-color: $accent,
141+
142+
$row-selected-background: #012724,
143+
$row-selected-text-color: $accent,
144+
$header-selected-text-color: $accent,
145+
$header-selected-background: #012427,
146+
147+
$row-selected-hover-background: hsl(from #012427 h s 10%),
148+
$row-selected-hover-text-color: $accent,
141149
);
142150
```
143151

144152
</ComponentBlock>
145153
<ComponentBlock for="Grid, HierarchicalGrid, PivotGrid">
146154

147155
```scss
156+
$background: #011627;
157+
$accent: #ecaa53;
158+
148159
$custom-grid-theme: grid-theme(
149-
$row-selected-background: #011627,
150-
$row-selected-text-color: #ecaa53,
151-
$row-selected-hover-background: #011627,
152-
$header-selected-text-color: #ecaa53,
153-
$header-selected-background: #011627
160+
$row-selected-background: $background,
161+
$row-selected-text-color: $accent,
162+
$row-selected-hover-background: hsl(from $background h s 10%),
163+
$row-selected-hover-text-color: $accent,
164+
$header-selected-text-color: $accent,
165+
$header-selected-background: $background,
154166
);
155167
```
156168

157169
</ComponentBlock>
158170

159-
160171
The <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> accepts several parameters but those are the five responsible for changing the appearance of all selected columns:
161172

162173
- **$row-selected-background** - sets the background of the selected fraction.
163174
- **$row-selected-text-color** - sets the text color of the selected fraction
164-
- **$row-selected-hover-background** - sets the color of the hovered cell or bunch of cells.
175+
- **$row-selected-hover-background** - sets the color of the hovered cell or group of cells.
176+
- **$row-selected-hover-text-color** - sets the text color of the hovered cell or group of cells.
165177
- **$header-selected-text-color** - sets the text color of the selected column header
166178
- **$header-selected-background** - sets the background color of the selected column header.
167179

168180
### Using CSS Variables
169181

170-
The last step is to include the custom `igx-grid` theme.
182+
The last step is to **include** the custom grid theme.
171183

172184
```scss
173185
:host {

0 commit comments

Comments
 (0)