Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(slider): BREAKING: Implements m2 slider
Upcoming work: * implement theme * add component tests fixes #1885 fixes #2109 fixes #2108 fixes #523 fixes #1028 fixes #1671 fixes #1279 PiperOrigin-RevId: 367260030
- Loading branch information
Showing
21 changed files
with
1,507 additions
and
664 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2021 Google LLC | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| @forward './slider-theme'; |
Empty file.
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,53 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2021 Google LLC | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| @use 'sass:map'; | ||
| @use '@material/slider/slider-theme'; | ||
| @use '@material/theme/shadow-dom'; | ||
| @use '@material/theme/keys'; | ||
| @use '@material/mwc-ripple/ripple-theme'; | ||
|
|
||
| // stylelint-disable selector-class-pattern -- | ||
| // Selector '.mdc-*' should only be used in this project. | ||
|
|
||
| @mixin theme($theme) { | ||
| @include slider-theme.theme-declare-custom-properties($theme); | ||
|
|
||
| @if shadow-dom.$css-selector-fallback-declarations { | ||
| @include theme-styles($theme); | ||
| } | ||
| } | ||
|
|
||
| @mixin theme-styles($theme) { | ||
| .mdc-slider { | ||
| @include slider-theme.theme-styles($theme); | ||
|
|
||
| .ripple { | ||
| $theme: keys.create-theme-properties($theme, $prefix: 'slider'); | ||
|
|
||
| @include mdc-ripple-theme.theme( | ||
| ( | ||
| hover-state-layer-color: | ||
| map.get($theme, hover-thumb-state-layer-color), | ||
| focus-state-layer-color: | ||
| map.get($theme, focus-thumb-state-layer-color), | ||
| pressed-state-layer-color: | ||
| map.get($theme, pressed-thumb-state-layer-color), | ||
| hover-state-layer-opacity: | ||
| map.get($theme, hover-thumb-state-layer-opacity), | ||
| focus-state-layer-opacity: | ||
| map.get($theme, focus-thumb-state-layer-opacity), | ||
| pressed-state-layer-opacity: | ||
| map.get($theme, pressed-thumb-state-layer-opacity), | ||
| ) | ||
| ); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin theme-declare-custom-properties($theme) { | ||
| @include slider-theme.theme-declare-custom-properties($theme); | ||
| } |
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,27 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2020 Google LLC | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| @use '@material/theme/theme'; | ||
| @use '@material/slider/slider' as mdc-slider; | ||
|
|
||
| @mixin core-styles() { | ||
| // TODO: Use ripple theme-styles once available. | ||
| @include mdc-slider.without-ripple(); | ||
| @include static-styles(); | ||
| } | ||
|
|
||
| @mixin static-styles() { | ||
| :host { | ||
| outline: none; | ||
| display: block; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
|
|
||
| .ripple { | ||
| // TODO: Use ripple's theme mixin once it actually works with mwc-ripple. | ||
| @include theme.property(--mdc-ripple-color, primary); | ||
| } | ||
| } |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.