feat(range): adding custom styling for ionic theme

core/src/components/range/range.scss → core/src/components/range/range.common.scss

@@ -18,7 +18,6 @@
    * @prop --pin-background: Background of the range pin (only available in MD mode)
    * @prop --pin-color: Color of the range pin (only available in MD mode)
    */
-  --knob-handle-size: calc(var(--knob-size) * 2);
 
   display: flex;
   position: relative;

core/src/components/range/range.ionic.scss

@@ -0,0 +1,147 @@
+@import "./range.common";
+@import "./range.ionic.vars";
+@import "../../foundations/ionic.vars";
+
+// Ionic Range
+// --------------------------------------------------
+
+:host {
+  --knob-border-radius: 50%;
+  --knob-background: #{$range-ion-knob-background-color};
+  --knob-box-shadow: #{$range-ion-knob-box-shadow};
+  --knob-size: #{$range-ion-knob-width};
+  --knob-handle-size: #{$range-ion-knob-handle-width};
+  --bar-height: #{$range-ion-bar-height};
+  --bar-background: #{$range-ion-bar-background-color};
+  --bar-background-active: #{ion-color(primary, base)};
+  --bar-border-radius: #{$range-ion-bar-border-radius};
+  --height: #{$range-ion-slider-height};
+}
+
+:host(.range-item-start-adjustment) {
+  @include padding(null, null, null, $range-ion-item-padding-horizontal);
+}
+
+:host(.range-item-end-adjustment) {
+  @include padding(null, $range-ion-item-padding-horizontal, null, null);
+}
+
+:host(.ion-color) .range-bar-active,
+:host(.ion-color) .range-tick-active {
+  background: current-color(base);
+}
+
+::slotted([slot="start"]) {
+  @include margin(0, 16px, 0, 0);
+}
+
+::slotted([slot="end"]) {
+  @include margin(0, 0, 0, 16px);
+}
+
+:host(.range-has-pin:not(.range-label-placement-stacked)) {
+  /**
+  * The pin should not overlap any elements that are
+  * above the range. By adding padding to the top of the
+  * range, it provides a buffer for the pin to move into
+  * when it is pressed.
+  *
+  * The padding is not included when the label is stacked
+  * because the pin is below the label.
+  * It still requires a buffer to prevent the pin from
+  * overlapping the range. The buffer is added to the
+  * bottom of the range label instead of the host.
+  */
+  @include padding(calc($range-ion-padding-vertical + $range-ion-pin-font-size), null, null, null);
+}
+
+:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The pin should not overlap the stacked label. By adding
+  * margin to the bottom of the label, it provides a buffer
+  * for the pin to move into when it is pressed.
+  */
+  @include margin(null, null, calc($range-ion-padding-vertical + $range-ion-pin-font-size), null);
+}
+
+.range-bar-active {
+  bottom: 0;
+
+  width: auto;
+
+  background: var(--bar-background-active);
+
+  &.has-ticks {
+    @include border-radius(0);
+    @include margin(null, calc(-1 * $range-ion-tick-width * 0.5), null, calc(-1 * $range-ion-tick-width * 0.5));
+  }
+}
+
+.range-tick {
+  @include margin-horizontal(calc($range-ion-tick-width * -0.5), null);
+  @include border-radius($range-ion-tick-border-radius);
+
+  position: absolute;
+  top: calc(($range-ion-hit-height * 0.5) - ($range-ion-tick-height * 0.5));
+
+  width: $range-ion-tick-width;
+  height: $range-ion-tick-height;
+
+  background: $range-ion-tick-background-color;
+  pointer-events: none;
+}
+
+.range-tick-active {
+  background: var(--bar-background-active);
+}
+
+.range-pin {
+  @include transform(translate3d(0, 100%, 0), scale(0.01));
+  @include padding(
+    $range-ion-pin-padding-top,
+    $range-ion-pin-padding-end,
+    $range-ion-pin-padding-bottom,
+    $range-ion-pin-padding-start
+  );
+
+  min-width: 28px;
+
+  transition: transform 120ms ease;
+
+  background: $range-ion-pin-background-color;
+  color: $range-ion-pin-color;
+
+  font-size: $range-ion-pin-font-size;
+
+  text-align: center;
+}
+
+.range-knob {
+  border-width: $ion-border-size-025;
+  border-style: solid;
+  border-color: #{ion-color(primary, base)};
+}
+
+/**
+ * The -100% ensures the pin sits on top
+ * of the range-knob-handle container.
+ * We apply 11px so that the pin
+ * text is closer to the knob inside of the container.
+ * We also apply the 11px here instead of using "top"
+ * otherwise the pin text will translate below the knob
+ * when the text is scaled.
+ */
+.range-knob-pressed .range-pin,
+.range-knob-handle.ion-focused .range-pin {
+  transform: translate3d(0, calc(-100% + 11px), 0) scale(1);
+}
+
+// Ionic Range: Disabled (based on iOS Range)
+// --------------------------------------------------
+// When the range is disabled, the entire range,
+// range label, any slotted labels, and any slotted
+// icons need to receive the same opacity.
+
+:host(.range-disabled) {
+  opacity: $range-ion-disabled-opacity;
+}

core/src/components/range/range.ionic.vars.scss

@@ -0,0 +1,78 @@
+@import "../../foundations/ionic.vars";
+@import "../../themes/native/native.globals.ios";
+
+// Ionic Range
+// --------------------------------------------------
+
+/// @prop - Padding top/bottom of the range
+$range-ion-padding-vertical: $ion-space-200;
+
+/// @prop - Padding start/end of the range - modern syntax
+/**
+ * 24px was chosen so the knob and its
+ * shadow do not get cut off by the item.
+ */
+$range-ion-item-padding-horizontal: $ion-space-600;
+
+/// @prop - Height of the range slider
+$range-ion-slider-height: 42px;
+
+/// @prop - Height of the area that will select the range knob
+$range-ion-hit-height: $range-ion-slider-height;
+
+/// @prop - Height of the range bar
+$range-ion-bar-height: $ion-scale-200;
+
+/// @prop - Background of the range bar
+$range-ion-bar-background-color: $ion-primitives-neutral-100;
+
+/// @prop - Border radius of the range bar
+$range-ion-bar-border-radius: $ion-border-radius-400;
+
+/// @prop - Width of the range knob
+$range-ion-knob-handle-width: $ion-scale-1000;
+
+/// @prop - Width of the range knob
+$range-ion-knob-width: 22px;
+
+/// @prop - Box shadow of the range knob
+$range-ion-knob-box-shadow: 0;
+
+/// @prop - Background of the range knob
+$range-ion-knob-background-color: $ion-primitives-base-white;
+
+/// @prop - Width of the range tick
+$range-ion-tick-width: $ion-scale-100;
+
+/// @prop - Height of the range tick
+$range-ion-tick-height: $ion-font-line-height-300;
+
+/// @prop - Border radius of the range tick
+$range-ion-tick-border-radius: $ion-border-radius-0;
+
+/// @prop - Background of the range tick
+$range-ion-tick-background-color: $range-ion-bar-background-color;
+
+/// @prop - Background of the range pin
+$range-ion-pin-background-color: transparent;
+
+/// @prop - Color of the range pin
+$range-ion-pin-color: $text-color;
+
+/// @prop - Font size of the range pin
+$range-ion-pin-font-size: dynamic-font(12px);
+
+/// @prop - Padding top of the range pin
+$range-ion-pin-padding-top: $ion-space-200;
+
+/// @prop - Padding end of the range pin
+$range-ion-pin-padding-end: $range-ion-pin-padding-top;
+
+/// @prop - Padding bottom of the range pin
+$range-ion-pin-padding-bottom: $range-ion-pin-padding-top;
+
+/// @prop - Padding start of the range pin
+$range-ion-pin-padding-start: $range-ion-pin-padding-end;
+
+/// @prop - Opacity of the disabled range
+$range-ion-disabled-opacity: $form-control-ios-disabled-opacity;

core/src/components/range/range.ios.scss

@@ -1,4 +1,4 @@
-@import "./range";
+@import "./range.native";
 @import "./range.ios.vars";
 
 // iOS Range

core/src/components/range/range.md.scss

@@ -1,4 +1,4 @@
-@import "./range";
+@import "./range.native";
 @import "./range.md.vars";
 
 // Material Design Range

core/src/components/range/range.native.scss

@@ -0,0 +1,6 @@
+@import "range.common";
+@import "./range.vars.scss";
+
+:host {
+  --knob-handle-size: calc(var(--knob-size) * 2);
+}

core/src/components/range/range.tsx

@@ -43,7 +43,7 @@ import type {
   styleUrls: {
     ios: 'range.ios.scss',
     md: 'range.md.scss',
-    ionic: 'range.md.scss',
+    ionic: 'range.ionic.scss',
   },
   shadow: true,
 })