Skip to content

Commit 2056069

Browse files
3phase3phase
committed
Merge branch 'mkirova/row-pinning-base' of https://github.com/IgniteUI/igniteui-angular into pbozhinov/row-pinning-tree-grid
2 parents ad0fa6d + 8c415c7 commit 2056069

27 files changed

+340
-102
lines changed

‎projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
[igxLabel]="button.label"
1212
[igxRipple]="button.ripple"
1313
>
14-
<div class="igx-button-group__item-content {{ itemContentCssClass }}">
14+
<span class="igx-button-group__item-content {{ itemContentCssClass }}">
1515
<igx-icon *ngIf="button.icon" fontSet="material">{{button.icon}}</igx-icon>
16-
<span *ngIf="button.label">{{button.label}}</span>
17-
</div>
16+
<span class="igx-button-group__button-text" *ngIf="button.label">{{button.label}}</span>
17+
</span>
1818
</button>
1919
<ng-content></ng-content>
2020
</div>

‎projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
%display-container {
1+
%display-container {
22
display: inherit;
33
position: relative;
44
width: 100%;

‎projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212

1313
%vhelper--vertical {
1414
position: absolute;
15-
width: 18px;
1615
top: 0;
1716
#{$right}: 0;
1817
}

‎projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-component.scss

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
@extend %igx-group-item !optional;
1616
}
1717

18+
@include e(button-text) {
19+
@extend %igx-button-group__button-text !optional;
20+
}
21+
1822
@include e(item, $m: selected) {
1923
@extend %igx-group-item !optional;
2024
@extend %igx-group-item-selected !optional;

‎projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

+7-5
Original file line numberDiff line numberDiff line change
@@ -186,11 +186,10 @@
186186
display: flex;
187187
box-shadow: --var($theme, 'shadow');
188188
transition: $transition;
189-
border-radius: --var($theme, 'border-radius')
189+
border-radius: --var($theme, 'border-radius');
190190
}
191191

192192
%igx-group-item {
193-
@include ellipsis();
194193
border: $group-item-border-thickness solid --var($theme, 'item-border-color');
195194
color: --var($theme, 'item-text-color');
196195
background: --var($theme, 'item-background');
@@ -308,13 +307,16 @@
308307
%igx-group-item-content {
309308
display: flex;
310309
flex-flow: row nowrap;
311-
justify-content: center;
312-
align-items: center;
313-
text-align: center;
310+
min-width: 0;
314311

315312
* ~ * {
316313
margin-#{$left}: $group-items-margin;
317314
}
318315
}
316+
317+
%igx-button-group__button-text {
318+
width: 100%;
319+
@include ellipsis();
320+
}
319321
}
320322

‎projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
////
2+
/// @group components
3+
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
4+
/// @requires {mixin} bem-block
5+
/// @requires {mixin} bem-elem
6+
/// @requires {mixin} bem-mod
7+
////
8+
@include b(igx-scrollbar) {
9+
// Register the component in the component registry
10+
$this: bem--selector-to-string(&);
11+
@include register-component(str-slice($this, 2, -1));
12+
13+
@extend %scrollbar-display !optional;
14+
}
15+

‎projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
////
2+
/// @group themes
3+
/// @access public
4+
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
5+
////
6+
7+
/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
8+
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
9+
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
10+
/// @param {Color} $thumb-background [null] - The background color used for the thumb.
11+
/// @param {Color} $track-background [null] - The background color used for the track.
12+
/// @param {Number | String} $size [null] - The size of the track.
13+
/// @requires $default-palette
14+
/// @requires $light-schema
15+
/// @requires apply-palette
16+
/// @requires text-contrast
17+
/// @requires extend
18+
///
19+
/// @example scss Change the background and track colors
20+
/// $my-scrollbar-theme: igx-scrollbar-theme($thumb-background: black, $track-background: gray);
21+
/// // Pass the theme to the igx-scrollbar component mixin
22+
/// @include igx-scrollbar($my-avatar-theme);
23+
@function igx-scrollbar-theme(
24+
$palette: $default-palette,
25+
$schema: $light-schema,
26+
$size: null,
27+
$thumb-background: null,
28+
$track-background: null,
29+
) {
30+
$name: 'igx-scrollbar';
31+
$scrollbar-schema: ();
32+
33+
@if map-has-key($schema, $name) {
34+
$scrollbar-schema: map-get($schema, $name);
35+
} @else {
36+
$scrollbar-schema: $schema;
37+
}
38+
39+
$theme: apply-palette($scrollbar-schema, $palette);
40+
41+
@return extend($theme, (
42+
name: $name,
43+
palette: $palette,
44+
thumb-background: $thumb-background,
45+
track-background: $track-background,
46+
size: $size
47+
));
48+
}
49+
50+
/// @param {Map} $theme - The theme used to style the component.
51+
/// @requires {mixin} igx-root-css-vars
52+
/// @requires rem
53+
/// @requires --var
54+
@mixin igx-scrollbar($theme) {
55+
@include igx-root-css-vars($theme);
56+
57+
%scrollbar-display {
58+
@if type-of(map-get($theme, 'size') == 'string') {
59+
scrollbar-width: --var($theme, 'size');
60+
}
61+
62+
scrollbar-color: --var($theme, 'thumb-background') --var($theme, 'track-background');
63+
64+
::-webkit-scrollbar {
65+
width: --var($theme, 'size');
66+
height: --var($theme, 'size');
67+
background: --var($theme, 'track-background');
68+
}
69+
70+
::-webkit-scrollbar-thumb {
71+
background: --var($theme, 'thumb-background');
72+
}
73+
}
74+
}
75+

‎projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
@import '../components/overlay/overlay-component';
5252
@import '../components/progress/progress-component';
5353
@import '../components/radio/radio-component';
54+
@import '../components/scrollbar/scrollbar-component';
5455
@import '../components/slider/slider-component';
5556
@import '../components/snackbar/snackbar-component';
5657
@import '../components/switch/switch-component';

‎projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

+5
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
@import '../components/toast/toast-theme';
3535
@import '../components/tooltip/tooltip-theme';
3636
@import '../components/tabs/tabs-theme';
37+
@import '../components/scrollbar/scrollbar-theme';
3738
@import '../components/switch/switch-theme';
3839
@import '../components/snackbar/snackbar-theme';
3940
@import '../components/slider/slider-theme';
@@ -347,6 +348,10 @@
347348
@include igx-radio(igx-radio-theme($palette, $schema));
348349
}
349350

351+
@if not(index($exclude, 'igx-scrollbar')) {
352+
@include igx-scrollbar(igx-scrollbar-theme($palette, $schema));
353+
}
354+
350355
@if not(index($exclude, 'igx-slider')) {
351356
@include igx-slider(igx-slider-theme($palette, $schema));
352357
}

‎projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss

+35-25
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,11 @@ $green-palette: igx-palette(
9191
/// Dark green palette,
9292
/// @type {Map}
9393
/// @group palettes
94-
$green-dark-palette: extend(
95-
$green-palette,
96-
(
97-
surface: (500: #222)
98-
)
94+
$green-dark-palette: igx-palette(
95+
$primary: igx-color($green-palette, 'primary'),
96+
$secondary: igx-color($green-palette, 'secondary'),
97+
$surface: #222,
98+
$grays: #fff
9999
) !default;
100100

101101
/// Purple palette
@@ -109,11 +109,11 @@ $purple-palette: igx-palette(
109109
/// Dark purple palette
110110
/// @type {Map}
111111
/// @group palettes
112-
$purple-dark-palette: extend(
113-
$purple-palette,
114-
(
115-
surface: (500: #333)
116-
)
112+
$purple-dark-palette: igx-palette(
113+
$primary: igx-color($purple-palette, 'primary'),
114+
$secondary: igx-color($purple-palette, 'secondary'),
115+
$surface: #333,
116+
$grays: #fff
117117
) !default;
118118

119119
/// Fluent Excel palette
@@ -130,11 +130,14 @@ $fluent-excel-palette: igx-palette(
130130
/// Fluent Excel dark palette
131131
/// @type {Map}
132132
/// @group palettes
133-
$fluent-excel-dark-palette: extend(
134-
$fluent-excel-palette,
135-
(
136-
surface: (500: #222)
137-
)
133+
$fluent-excel-dark-palette: igx-palette(
134+
$primary: igx-color($fluent-excel-palette, 'primary'),
135+
$secondary: igx-color($fluent-excel-palette, 'secondary'),
136+
$success: igx-color($fluent-excel-palette, 'success'),
137+
$warn: igx-color($fluent-excel-palette, 'warn'),
138+
$error: igx-color($fluent-excel-palette, 'error'),
139+
$surface: #222,
140+
$grays: #fff
138141
) !default;
139142

140143
/// Fluent Word palette
@@ -151,11 +154,14 @@ $fluent-word-palette: igx-palette(
151154
/// Fluent Word dark palette
152155
/// @type {Map}
153156
/// @group palettes
154-
$fluent-word-dark-palette: extend(
155-
$fluent-word-palette,
156-
(
157-
surface: (500: #222)
158-
)
157+
$fluent-word-dark-palette: igx-palette(
158+
$primary: igx-color($fluent-word-palette, 'primary'),
159+
$secondary: igx-color($fluent-word-palette, 'secondary'),
160+
$success: igx-color($fluent-word-palette, 'success'),
161+
$warn: igx-color($fluent-word-palette, 'warn'),
162+
$error: igx-color($fluent-word-palette, 'error'),
163+
$surface: #222,
164+
$grays: #fff
159165
) !default;
160166

161167
/// Bootstrap palette
@@ -174,10 +180,14 @@ $bootstrap-palette: igx-palette(
174180
/// Bootstrap dark palette
175181
/// @type {Map}
176182
/// @group palettes
177-
$bootstrap-dark-palette: extend(
178-
$bootstrap-palette,
179-
(
180-
surface: (500: #333)
181-
)
183+
$bootstrap-dark-palette: igx-palette(
184+
$primary: igx-color($bootstrap-palette, 'primary'),
185+
$secondary: igx-color($bootstrap-palette, 'secondary'),
186+
$info: igx-color($bootstrap-palette, 'info'),
187+
$success: igx-color($bootstrap-palette, 'success'),
188+
$warn: igx-color($bootstrap-palette, 'warn'),
189+
$error: igx-color($bootstrap-palette, 'error'),
190+
$surface: #333,
191+
$grays: #fff
182192
) !default;
183193

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss

+7
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
@import './progress';
3636
@import './radio';
3737
@import './ripple';
38+
@import './scrollbar';
3839
@import './slider';
3940
@import './snackbar';
4041
@import './switch';
@@ -78,6 +79,7 @@
7879
/// @property {Map} igx-progress-circular [$_dark-progress-circular]
7980
/// @property {Map} igx-radio [$_dark-radio]
8081
/// @property {Map} igx-ripple [$_dark-ripple]
82+
/// @property {Map} igx-scrollbar [$_dark-scrollbar]
8183
/// @property {Map} igx-slider [$_dark-slider]
8284
/// @property {Map} igx-snackbar [$_dark-snackbar]
8385
/// @property {Map} igx-switch [$_dark-switch]
@@ -119,6 +121,7 @@ $dark-schema: (
119121
igx-circular-bar: $_dark-progress-circular,
120122
igx-radio: $_dark-radio,
121123
igx-ripple: $_dark-ripple,
124+
igx-scrollbar: $_dark-scrollbar,
122125
igx-slider: $_dark-slider,
123126
igx-snackbar: $_dark-snackbar,
124127
igx-switch: $_dark-switch,
@@ -163,6 +166,7 @@ $dark-schema: (
163166
/// @property {map} igx-circular-bar [$_dark-fluent-progress-circular],
164167
/// @property {map} igx-radio [$_dark-fluent-radio],
165168
/// @property {map} igx-ripple [$_dark-fluent-ripple],
169+
/// @property {map} igx-scrollbar [$_dark-fluent-scrollbar],
166170
/// @property {map} igx-slider [$_dark-fluent-slider],
167171
/// @property {map} igx-snackbar [$_dark-fluent-snackbar],
168172
/// @property {map} igx-switch [$_dark-fluent-switch],
@@ -204,6 +208,7 @@ $dark-fluent-schema: (
204208
igx-circular-bar: $_dark-fluent-progress-circular,
205209
igx-radio: $_dark-fluent-radio,
206210
igx-ripple: $_dark-fluent-ripple,
211+
igx-scrollbar: $_dark-fluent-scrollbar,
207212
igx-slider: $_dark-fluent-slider,
208213
igx-snackbar: $_dark-fluent-snackbar,
209214
igx-switch: $_dark-fluent-switch,
@@ -248,6 +253,7 @@ $dark-fluent-schema: (
248253
/// @property {map} igx-circular-bar [$_dark-bootstrap-progress-circular],
249254
/// @property {map} igx-radio [$_dark-bootstrap-radio],
250255
/// @property {map} igx-ripple [$_dark-bootstrap-ripple],
256+
/// @property {map} igx-scrollbar [$_dark-bootstrap-scrollbar],
251257
/// @property {map} igx-slider [$_dark-bootstrap-slider],
252258
/// @property {map} igx-snackbar [$_dark-bootstrap-snackbar],
253259
/// @property {map} igx-switch [$_dark-bootstrap-switch],
@@ -289,6 +295,7 @@ $dark-bootstrap-schema: (
289295
igx-circular-bar: $_dark-bootstrap-progress-circular,
290296
igx-radio: $_dark-bootstrap-radio,
291297
igx-ripple: $_dark-bootstrap-ripple,
298+
igx-scrollbar: $_dark-bootstrap-scrollbar,
292299
igx-slider: $_dark-bootstrap-slider,
293300
igx-snackbar: $_dark-bootstrap-snackbar,
294301
igx-switch: $_dark-bootstrap-switch,

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@import '../light/scrollbar';
2+
3+
////
4+
/// @group schemas
5+
/// @access private
6+
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
7+
////
8+
9+
/// Generates a dark scrollbar schema.
10+
/// @type {Map}
11+
/// @property {Color} thumb-background [igx-color: surface, lighten: 20%] - The background color used for the thumb.
12+
/// @property {Color} track-background [igx-color: 'surface', lighten: 5%] - The background color used for the track.
13+
/// @property {String | Number} size [16px] - The size of the track.
14+
/// @requires $_light-scrollbar
15+
/// @see $default-palette
16+
$_dark-scrollbar: extend(
17+
$_light-scrollbar,
18+
(
19+
thumb-background: (
20+
igx-color: 'surface',
21+
lighten: 20%
22+
),
23+
24+
track-background: (
25+
igx-color: 'surface',
26+
lighten: 5%
27+
),
28+
)
29+
);
30+
31+
/// Generates a fluent scrollbar schema.
32+
/// @type {Map}
33+
/// @requires {function} extend
34+
/// @requires $_dark-scrollbar
35+
$_dark-fluent-scrollbar: extend(
36+
$_dark-scrollbar,
37+
(
38+
variant: 'fluent',
39+
)
40+
);
41+
42+
/// Generates a bootstrap scrollbar schema.
43+
/// @type {Map}
44+
/// @requires {function} extend
45+
/// @requires $_dark-scrollbar
46+
$_dark-bootstrap-scrollbar: extend(
47+
$_light-scrollbar,
48+
(
49+
variant: 'bootstrap',
50+
)
51+
);
52+

0 commit comments

Comments
 (0)