-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(slider): Add color theme mixins; default to secondary; remove --off
#1544
Changes from 18 commits
5f13367
77c524b
6ea9f63
87c46c6
8ad26d1
7d20c68
5d25bb2
e798a29
d2f6514
a6b08cc
638a5ed
ca11cf0
f76e929
6bb2c2f
c51a0ce
05039ba
3f68cd2
9a82f6a
30c4497
2acab33
43ce89c
0f1b301
a4b25d8
53582d2
805d5a3
1e95d4a
2951603
cd985cb
de882ef
e7188f3
8af9b25
64e2dfd
48fac78
987f595
cdcbf44
dc48efe
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,3 +17,14 @@ | |
@import "./common"; | ||
@import "../packages/mdc-slider/mdc-slider"; | ||
@import "../packages/mdc-typography/mdc-typography"; | ||
@import "../packages/mdc-theme/color-palette"; | ||
|
||
.demo-slider--custom { | ||
$main-color: $material-color-red-700; | ||
$tick-color: $material-color-red-300; | ||
|
||
@include mdc-slider-rail-color($main-color); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Given that it seems to be ridiculously common to set all of these to the same color, should we have a mixin that sets all of them? Maybe takes a color + an ink color for the popup indicator? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done! I decided to keep it simple and pick the ink color automatically, just like The new combined mixin is |
||
@include mdc-slider-thumb-color($main-color); | ||
@include mdc-slider-focus-halo-color($main-color); | ||
@include mdc-slider-value-pin-fill-color-accessible($main-color); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
// | ||
// Copyright 2017 Google Inc. All Rights Reserved. | ||
// | ||
// Licensed under the Apache License, Version 2.0 (the "License"); | ||
// you may not use this file except in compliance with the License. | ||
// You may obtain a copy of the License at | ||
// | ||
// http://www.apache.org/licenses/LICENSE-2.0 | ||
// | ||
// Unless required by applicable law or agreed to in writing, software | ||
// distributed under the License is distributed on an "AS IS" BASIS, | ||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
// See the License for the specific language governing permissions and | ||
// limitations under the License. | ||
// | ||
|
||
@keyframes mdc-slider-emphasize { | ||
0% { | ||
animation-timing-function: ease-out; | ||
} | ||
|
||
50% { | ||
animation-timing-function: ease-in; | ||
transform: scale(.85); | ||
} | ||
|
||
100% { | ||
transform: scale(.571); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this supposed to be used?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch! Removed. I originally had a separate mixin for tick mark color, but then I removed it because I wasn't sure if it was supposed to be customizable. I figured we can always add that mixin back if necessary.