Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(50)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html

Issue 2646943003: Polymer: roll paper-slider, 1.0.11 -> 1.0.13 (Closed)
Patch Set: Rebase Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-slider/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html
diff --git a/third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html b/third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html
index 365efcd9e11d3bfdd268347da10c067d52bd67ad..a53a0bbb4b53827c8f6e26acbbd98a26c3ba7a72 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html
+++ b/third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html
@@ -48,6 +48,7 @@ Custom property | Description | Default
`--paper-slider-disabled-knob-color` | The disabled knob color | `--paper-grey-400`
`--paper-slider-pin-color` | The pin color | `--google-blue-700`
`--paper-slider-font-color` | The pin's text color | `#fff`
+`--paper-slider-markers-color` | The snaps markers color | `#000`
`--paper-slider-disabled-active-color` | The disabled progress bar color | `--paper-grey-400`
`--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--paper-grey-400`
`--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
@@ -80,6 +81,7 @@ Custom property | Description | Default
--paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --paper-grey-400);
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --paper-grey-400);
+ --calculated-paper-slider-height: var(--paper-slider-height, 2px);
}
/* focus shows the ripple */
@@ -90,9 +92,9 @@ Custom property | Description | Default
#sliderContainer {
position: relative;
width: 100%;
- height: calc(30px + var(--paper-slider-height, 2px));
- margin-left: calc(15px + var(--paper-slider-height, 2px)/2);
- margin-right: calc(15px + var(--paper-slider-height, 2px)/2);
+ height: calc(30px + var(--calculated-paper-slider-height));
+ margin-left: calc(15px + var(--calculated-paper-slider-height)/2);
+ margin-right: calc(15px + var(--calculated-paper-slider-height)/2);
}
#sliderContainer:focus {
@@ -114,7 +116,7 @@ Custom property | Description | Default
}
.ring > .bar-container {
- left: calc(5px + var(--paper-slider-height, 2px)/2);
+ left: calc(5px + var(--calculated-paper-slider-height)/2);
transition: left 0.18s ease;
}
@@ -123,7 +125,7 @@ Custom property | Description | Default
}
.ring.expand:not(.pin) > .bar-container {
- left: calc(8px + var(--paper-slider-height, 2px)/2);
+ left: calc(8px + var(--calculated-paper-slider-height)/2);
}
#sliderBar {
@@ -131,13 +133,13 @@ Custom property | Description | Default
width: 100%;
background-color: var(--paper-slider-bar-color, transparent);
--paper-progress-container-color: var(--paper-slider-container-color, --paper-grey-400);
- --paper-progress-height: var(--paper-slider-height, 2px);
+ --paper-progress-height: var(--calculated-paper-slider-height);
}
.slider-markers {
position: absolute;
top: calc(14px + var(--paper-slider-height,2px)/2);
- height: var(--paper-slider-height, 2px);
+ height: var(--calculated-paper-slider-height);
left: 0;
right: -1px;
box-sizing: border-box;
@@ -154,38 +156,38 @@ Custom property | Description | Default
display: block;
margin-left: -1px;
width: 2px;
- height: 2px;
+ height: var(--calculated-paper-slider-height);
border-radius: 50%;
- background-color: black;
+ background-color: var(--paper-slider-markers-color, #000);
}
- #sliderKnob {
+ .slider-knob {
position: absolute;
left: 0;
top: 0;
- margin-left: calc(-15px - var(--paper-slider-height, 2px)/2);
- width: calc(30px + var(--paper-slider-height, 2px));
- height: calc(30px + var(--paper-slider-height, 2px));
+ margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);
+ width: calc(30px + var(--calculated-paper-slider-height));
+ height: calc(30px + var(--calculated-paper-slider-height));
}
- .transiting > #sliderKnob {
+ .transiting > .slider-knob {
transition: left 0.08s ease;
}
- #sliderKnob:focus {
+ .slider-knob:focus {
outline: none;
}
- #sliderKnob.dragging {
+ .slider-knob.dragging {
transition: none;
}
- .snaps > #sliderKnob.dragging {
+ .snaps > .slider-knob.dragging {
transition: -webkit-transform 0.08s ease;
transition: transform 0.08s ease;
}
- #sliderKnobInner {
+ .slider-knob-inner {
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
@@ -202,21 +204,21 @@ Custom property | Description | Default
transition-timing-function: ease;
}
- .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
+ .expand:not(.pin) > .slider-knob > .slider-knob-inner {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
- .ring > #sliderKnob > #sliderKnobInner {
+ .ring > .slider-knob > .slider-knob-inner {
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, --paper-grey-400);
}
- #sliderKnobInner::before {
+ .slider-knob-inner::before {
background-color: var(--paper-slider-pin-color, --google-blue-700);
}
- .pin > #sliderKnob > #sliderKnobInner::before {
+ .pin > .slider-knob > .slider-knob-inner::before {
content: "";
position: absolute;
top: 0;
@@ -230,22 +232,22 @@ Custom property | Description | Default
transform: rotate(-45deg) scale(0) translate(0);
}
- #sliderKnobInner::before,
- #sliderKnobInner::after {
+ .slider-knob-inner::before,
+ .slider-knob-inner::after {
transition: -webkit-transform .18s ease, background-color .18s ease;
transition: transform .18s ease, background-color .18s ease;
}
- .pin.ring > #sliderKnob > #sliderKnobInner::before {
+ .pin.ring > .slider-knob > .slider-knob-inner::before {
background-color: var(--paper-slider-pin-start-color, --paper-grey-400);
}
- .pin.expand > #sliderKnob > #sliderKnobInner::before {
+ .pin.expand > .slider-knob > .slider-knob-inner::before {
-webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
transform: rotate(-45deg) scale(1) translate(17px, -17px);
}
- .pin > #sliderKnob > #sliderKnobInner::after {
+ .pin > .slider-knob > .slider-knob-inner::after {
content: attr(value);
position: absolute;
top: 0;
@@ -261,7 +263,7 @@ Custom property | Description | Default
transform: scale(0) translate(0);
}
- .pin.expand > #sliderKnob > #sliderKnobInner::after {
+ .pin.expand > .slider-knob > .slider-knob-inner::after {
-webkit-transform: scale(1) translate(0, -17px);
transform: scale(1) translate(0, -17px);
}
@@ -281,14 +283,14 @@ Custom property | Description | Default
pointer-events: none;
}
- .disabled > #sliderKnob > #sliderKnobInner {
+ .disabled > .slider-knob > .slider-knob-inner {
background-color: var(--paper-slider-disabled-knob-color, --paper-grey-400);
border: 2px solid var(--paper-slider-disabled-knob-color, --paper-grey-400);
-webkit-transform: scale3d(0.75, 0.75, 1);
transform: scale3d(0.75, 0.75, 1);
}
- .disabled.ring > #sliderKnob > #sliderKnobInner {
+ .disabled.ring > .slider-knob > .slider-knob-inner {
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, --paper-grey-400);
}
@@ -312,8 +314,8 @@ Custom property | Description | Default
</div>
</template>
- <div id="sliderKnob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
- <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
+ <div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
+ <div class="slider-knob-inner" value$="[[immediateValue]]"></div>
</div>
</div>
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-slider/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698