-
Notifications
You must be signed in to change notification settings - Fork 161
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6818 from IgniteUI/simeonoff/scrollbars-theme
feat(scrollbar): add scrollbar theme
- Loading branch information
Showing
23 changed files
with
318 additions
and
92 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| %display-container { | ||
| %display-container { | ||
| display: inherit; | ||
| position: relative; | ||
| width: 100%; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,7 +12,6 @@ | |
|
|
||
| %vhelper--vertical { | ||
| position: absolute; | ||
| width: 18px; | ||
| top: 0; | ||
| #{$right}: 0; | ||
| } | ||
|
|
||
15 changes: 15 additions & 0 deletions
15
projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| //// | ||
| /// @group components | ||
| /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a> | ||
| /// @requires {mixin} bem-block | ||
| /// @requires {mixin} bem-elem | ||
| /// @requires {mixin} bem-mod | ||
| //// | ||
| @include b(igx-scrollbar) { | ||
| // Register the component in the component registry | ||
| $this: bem--selector-to-string(&); | ||
| @include register-component(str-slice($this, 2, -1)); | ||
|
|
||
| @extend %scrollbar-display !optional; | ||
| } | ||
|
|
75 changes: 75 additions & 0 deletions
75
projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| //// | ||
| /// @group themes | ||
| /// @access public | ||
| /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a> | ||
| //// | ||
|
|
||
| /// If only background color is specified, text/icon color will be assigned automatically to a contrasting color. | ||
| /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. | ||
| /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. | ||
| /// @param {Color} $thumb-background [null] - The background color used for the thumb. | ||
| /// @param {Color} $track-background [null] - The background color used for the track. | ||
| /// @param {Number | String} $size [null] - The size of the track. | ||
| /// @requires $default-palette | ||
| /// @requires $light-schema | ||
| /// @requires apply-palette | ||
| /// @requires text-contrast | ||
| /// @requires extend | ||
| /// | ||
| /// @example scss Change the background and track colors | ||
| /// $my-scrollbar-theme: igx-scrollbar-theme($thumb-background: black, $track-background: gray); | ||
| /// // Pass the theme to the igx-scrollbar component mixin | ||
| /// @include igx-scrollbar($my-avatar-theme); | ||
| @function igx-scrollbar-theme( | ||
| $palette: $default-palette, | ||
| $schema: $light-schema, | ||
| $size: null, | ||
| $thumb-background: null, | ||
| $track-background: null, | ||
| ) { | ||
| $name: 'igx-scrollbar'; | ||
| $scrollbar-schema: (); | ||
|
|
||
| @if map-has-key($schema, $name) { | ||
| $scrollbar-schema: map-get($schema, $name); | ||
| } @else { | ||
| $scrollbar-schema: $schema; | ||
| } | ||
|
|
||
| $theme: apply-palette($scrollbar-schema, $palette); | ||
|
|
||
| @return extend($theme, ( | ||
| name: $name, | ||
| palette: $palette, | ||
| thumb-background: $thumb-background, | ||
| track-background: $track-background, | ||
| size: $size | ||
| )); | ||
| } | ||
|
|
||
| /// @param {Map} $theme - The theme used to style the component. | ||
| /// @requires {mixin} igx-root-css-vars | ||
| /// @requires rem | ||
| /// @requires --var | ||
| @mixin igx-scrollbar($theme) { | ||
| @include igx-root-css-vars($theme); | ||
|
|
||
| %scrollbar-display { | ||
| @if type-of(map-get($theme, 'size') == 'string') { | ||
| scrollbar-width: --var($theme, 'size'); | ||
| } | ||
|
|
||
| scrollbar-color: --var($theme, 'thumb-background') --var($theme, 'track-background'); | ||
|
|
||
| ::-webkit-scrollbar { | ||
| width: --var($theme, 'size'); | ||
| height: --var($theme, 'size'); | ||
| background: --var($theme, 'track-background'); | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb { | ||
| background: --var($theme, 'thumb-background'); | ||
| } | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| @import '../light/scrollbar'; | ||
|
|
||
| //// | ||
| /// @group schemas | ||
| /// @access private | ||
| /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a> | ||
| //// | ||
|
|
||
| /// Generates a dark scrollbar schema. | ||
| /// @type {Map} | ||
| /// @property {Color} thumb-background [igx-color: surface, lighten: 20%] - The background color used for the thumb. | ||
| /// @property {Color} track-background [igx-color: 'surface', lighten: 5%] - The background color used for the track. | ||
| /// @property {String | Number} size [16px] - The size of the track. | ||
| /// @requires $_light-scrollbar | ||
| /// @see $default-palette | ||
| $_dark-scrollbar: extend( | ||
| $_light-scrollbar, | ||
| ( | ||
| thumb-background: ( | ||
| igx-color: 'surface', | ||
| lighten: 20% | ||
| ), | ||
|
|
||
| track-background: ( | ||
| igx-color: 'surface', | ||
| lighten: 5% | ||
| ), | ||
| ) | ||
| ); | ||
|
|
||
| /// Generates a fluent scrollbar schema. | ||
| /// @type {Map} | ||
| /// @requires {function} extend | ||
| /// @requires $_dark-scrollbar | ||
| $_dark-fluent-scrollbar: extend( | ||
| $_dark-scrollbar, | ||
| ( | ||
| variant: 'fluent', | ||
| ) | ||
| ); | ||
|
|
||
| /// Generates a bootstrap scrollbar schema. | ||
| /// @type {Map} | ||
| /// @requires {function} extend | ||
| /// @requires $_dark-scrollbar | ||
| $_dark-bootstrap-scrollbar: extend( | ||
| $_light-scrollbar, | ||
| ( | ||
| variant: 'bootstrap', | ||
| ) | ||
| ); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.