From c59c65647dabce0f67b074731a18eceeabdfad92 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 2 Jun 2016 10:31:32 -0400 Subject: [PATCH] feat(range): add styling for the range when knob is minimum md references #5422 --- src/components/range/range.ios.scss | 1 + src/components/range/range.md.scss | 32 ++++++++++++++++++++++++++++- src/components/range/range.wp.scss | 1 + 3 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss index ffa41dbe86..188ea0b76c 100644 --- a/src/components/range/range.ios.scss +++ b/src/components/range/range.ios.scss @@ -1,4 +1,5 @@ @import "../../globals.ios"; +@import "./range"; // iOS Range // -------------------------------------------------- diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss index 143b11ccda..1fa700c2fe 100644 --- a/src/components/range/range.md.scss +++ b/src/components/range/range.md.scss @@ -1,4 +1,5 @@ @import "../../globals.md"; +@import "./range"; // Material Design Range // -------------------------------------------------- @@ -19,6 +20,9 @@ $range-md-knob-width: 18px !default; $range-md-knob-height: $range-md-knob-width !default; $range-md-knob-background-color: $range-md-bar-active-background-color !default; +$range-md-knob-min-background-color: $background-md-color !default; +$range-md-knob-min-border: 2px solid $range-md-bar-background-color !default; + $range-md-tick-width: 2px !default; $range-md-tick-height: $range-md-tick-width !default; $range-md-tick-border-radius: 50% !default; @@ -31,6 +35,8 @@ $range-md-pin-font-size: 12px !default; $range-md-pin-padding-vertical: 8px !default; $range-md-pin-padding-horizontal: 0 !default; +$range-md-pin-min-background-color: $range-md-bar-background-color !default; + ion-range { padding: $range-md-padding-vertical $range-md-padding-horizontal; @@ -116,6 +122,9 @@ ion-range { background: $range-md-knob-background-color; transform: scale(.67); + transition-duration: 120ms; + transition-property: transform, background-color, border; + transition-timing-function: ease; pointer-events: none; } @@ -164,7 +173,7 @@ ion-range { background: $range-md-pin-background-color; transform: translate3d(0, 28px, 0) scale(.01); - transition: transform 120ms ease; + transition: transform 120ms ease, background-color 120ms ease; &::before { position: absolute; @@ -182,6 +191,7 @@ ion-range { content: ""; transform: rotate(-45deg); + transition: background-color 120ms ease; } } @@ -193,12 +203,32 @@ ion-range:not(.range-has-pin) .range-knob-pressed .range-knob { transform: scale(1); } +@mixin md-range-min() { + .range-knob-min { + .range-knob { + border: $range-md-knob-min-border; + background: $range-md-knob-min-background-color; + } + + .range-pin, + .range-pin::before { + color: color-contrast($colors-md, $range-md-pin-min-background-color); + background: $range-md-pin-min-background-color; + } + } +} + +@include md-range-min(); + + // Generate Material Design Range Colors // -------------------------------------------------- @each $color-name, $color-base, $color-contrast in get-colors($colors-md) { ion-range[#{$color-name}] { + @include md-range-min(); + .range-bar-active, .range-knob, .range-pin, diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss index 3d595e1092..c739a63cb3 100644 --- a/src/components/range/range.wp.scss +++ b/src/components/range/range.wp.scss @@ -1,4 +1,5 @@ @import "../../globals.wp"; +@import "./range"; // Windows Range // --------------------------------------------------