From cf35445f22ebd9f8472b64e7875c8f6ee4ffb7af Mon Sep 17 00:00:00 2001 From: Cam Wiegert Date: Wed, 29 Aug 2018 10:24:33 -0500 Subject: [PATCH] fix(range): add and document custom properties references #14850 references #14808 --- core/src/components/range/range.ios.scss | 9 +++++-- core/src/components/range/range.md.scss | 24 +++++++++++++++---- core/src/components/range/range.scss | 12 ++++++++-- core/src/components/range/readme.md | 14 +++++++++++ .../components/range/test/basic/index.html | 4 ++-- .../range/test/standalone/index.html | 12 ++++++++++ 6 files changed, 64 insertions(+), 11 deletions(-) diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index 1fc45842c4..9e41cb1fe3 100644 --- a/core/src/components/range/range.ios.scss +++ b/core/src/components/range/range.ios.scss @@ -11,11 +11,16 @@ --knob-size: 28px; --bar-height: #{$range-ios-bar-height}; --bar-background: #{$range-ios-bar-background-color}; + --bar-background-active: #{ion-color(primary, base)}; --height: #{$range-ios-slider-height}; @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal); } +:host(.ion-color) .range-bar-active, +:host(.ion-color) .range-tick-active { + background: current-color(base); +} :host(.range-has-pin) { @include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null); @@ -26,7 +31,7 @@ width: auto; - background: $range-ios-bar-active-background-color; + background: var(--bar-background-active); } .range-tick { @@ -44,7 +49,7 @@ } .range-tick-active { - background: $range-ios-tick-active-background-color; + background: var(--bar-background-active); } .range-pin { diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss index 6a2552b3df..83babf524d 100644 --- a/core/src/components/range/range.md.scss +++ b/core/src/components/range/range.md.scss @@ -6,18 +6,29 @@ :host { --knob-border-radius: 50%; - --knob-background: #{$range-md-knob-background-color}; + --knob-background: var(--bar-background-active); --knob-box-shadow: none; --knob-size: 18px; --bar-height: #{$range-md-bar-height}; --bar-background: #{$range-md-bar-background-color}; + --bar-background-active: #{ion-color(primary, base)}; --height: #{$range-md-slider-height}; + --pin-background: #{ion-color(primary, base)}; + --pin-color: #{ion-color(primary, contrast)}; @include padding($range-md-padding-vertical, $range-md-padding-horizontal); font-size: $range-md-pin-font-size; } +:host(.ion-color) .range-bar-active, +:host(.ion-color) .range-knob, +:host(.ion-color) .range-pin, +:host(.ion-color) .range-pin::before { + background: current-color(base); + color: current-color(contrast); +} + // TODO: REVIEW // .range-md [slot="range-start"] { // @include margin(0, 12px, 0, 0); @@ -36,7 +47,7 @@ width: auto; - background: $range-md-bar-active-background-color; + background: var(--bar-background-active); } .range-knob { @@ -78,10 +89,13 @@ position: relative; top: -20px; + background: var(--pin-background); + color: var(--pin-color); + min-width: 28px; height: 28px; - transition: transform 120ms ease, background-color 120ms ease; + transition: transform 120ms ease, background 120ms ease; text-align: center; @@ -97,9 +111,9 @@ transform: rotate(-45deg); - transition: background-color 120ms ease; + transition: background 120ms ease; - background: $range-md-pin-background-color; + background: var(--pin-background); content: ""; z-index: -1; diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss index 750587b3f2..cec6d12a7a 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.scss @@ -4,9 +4,17 @@ // -------------------------------------------------- :host { + /** + * @prop --bar-background: Background of the range bar + * @prop --bar-background-active: Background of the active range bar + * @prop --bar-height: Height of the range bar + * @prop --height: Height of the range + * @prop --knob-background: Background of the range knob + * @prop --knob-border-radius: Border radius of the range knob + * @prop --knob-box-shadow: Box shadow of the range knob + * @prop --knob-size: Size of the range knob + */ --knob-handle-size: calc(var(--knob-size) * 2); - --ion-color-base: #{ion-color(primary, base)}; - --ion-color-contrast: #{ion-color(primary, contrast)}; display: flex; position: relative; diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md index 128923df09..189f48d3c4 100644 --- a/core/src/components/range/readme.md +++ b/core/src/components/range/readme.md @@ -43,6 +43,20 @@ left or right of the range. | `ionStyle` | Emitted when the styles change. | +## CSS Custom Properties + +| Name | Description | +| ------------------------- | ---------------------------------- | +| `--bar-background` | Background of the range bar | +| `--bar-background-active` | Background of the active range bar | +| `--bar-height` | Height of the range bar | +| `--height` | Height of the range | +| `--knob-background` | Background of the range knob | +| `--knob-border-radius` | Border radius of the range knob | +| `--knob-box-shadow` | Box shadow of the range knob | +| `--knob-size` | Size of the range knob | + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/range/test/basic/index.html b/core/src/components/range/test/basic/index.html index 9b788c51a4..dbdef6fe92 100644 --- a/core/src/components/range/test/basic/index.html +++ b/core/src/components/range/test/basic/index.html @@ -85,10 +85,10 @@ - + - + diff --git a/core/src/components/range/test/standalone/index.html b/core/src/components/range/test/standalone/index.html index e2385d79ed..3b08eb98ee 100644 --- a/core/src/components/range/test/standalone/index.html +++ b/core/src/components/range/test/standalone/index.html @@ -21,5 +21,17 @@ + + +