Skip to content

Commit a017bac

Browse files
simeonoffsimeonoff
authored
Merge pull request #6818 from IgniteUI/simeonoff/scrollbars-theme
feat(scrollbar): add scrollbar theme
2 parents bd51845 + 57da36d commit a017bac

23 files changed

+318
-92
lines changed

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

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 0 additions & 1 deletion
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/scrollbar/scrollbar-component.scss‎

Lines changed: 15 additions & 0 deletions
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‎

Lines changed: 75 additions & 0 deletions
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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 5 additions & 0 deletions
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‎

Lines changed: 35 additions & 25 deletions
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‎

Lines changed: 7 additions & 0 deletions
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‎

Lines changed: 52 additions & 0 deletions
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+

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
@import './progress';
3737
@import './radio';
3838
@import './ripple';
39+
@import './scrollbar';
3940
@import './slider';
4041
@import './snackbar';
4142
@import './switch';
@@ -79,6 +80,7 @@
7980
/// @property {Map} igx-progress-circular [$_light-progress-circular]
8081
/// @property {Map} igx-radio [$_light-radio]
8182
/// @property {Map} igx-ripple [$_light-ripple]
83+
/// @property {Map} igx-scrollbar [$_light-scrollbar]
8284
/// @property {Map} igx-slider [$_light-slider]
8385
/// @property {Map} igx-snackbar [$_light-snackbar]
8486
/// @property {Map} igx-switch [$_light-switch]
@@ -120,6 +122,7 @@ $light-schema: (
120122
igx-circular-bar: $_light-progress-circular,
121123
igx-radio: $_light-radio,
122124
igx-ripple: $_light-ripple,
125+
igx-scrollbar: $_light-scrollbar,
123126
igx-slider: $_light-slider,
124127
igx-snackbar: $_light-snackbar,
125128
igx-switch: $_light-switch,
@@ -163,6 +166,7 @@ $light-fluent-schema: (
163166
igx-circular-bar: $_fluent-progress-circular,
164167
igx-radio: $_fluent-radio,
165168
igx-ripple: $_fluent-ripple,
169+
igx-scrollbar: $_fluent-scrollbar,
166170
igx-slider: $_fluent-slider,
167171
igx-snackbar: $_fluent-snackbar,
168172
igx-switch: $_fluent-switch,
@@ -206,6 +210,7 @@ $light-bootstrap-schema: (
206210
igx-circular-bar: $_bootstrap-progress-circular,
207211
igx-radio: $_bootstrap-radio,
208212
igx-ripple: $_bootstrap-ripple,
213+
igx-scrollbar: $_bootstrap-scrollbar,
209214
igx-slider: $_bootstrap-slider,
210215
igx-snackbar: $_bootstrap-snackbar,
211216
igx-switch: $_bootstrap-switch,

0 commit comments

Comments
 (0)