@ionic/core 8.4.1-dev.11730807985.1b046f37 → 8.4.1-dev.11730889290.1eacfaf8

package/dist/collection/components/range/range.ionic.css

@@ -0,0 +1,550 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+: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 --bar-border-radius: Border radius 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
+   * @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)
+   */
+  display: flex;
+  position: relative;
+  flex: 3;
+  align-items: center;
+  user-select: none;
+}
+
+:host(.range-disabled) {
+  pointer-events: none;
+}
+
+::slotted(ion-label) {
+  flex: initial;
+}
+
+.range-slider {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  height: var(--height);
+  contain: size layout style;
+  cursor: grab;
+  touch-action: pan-y;
+}
+
+:host(.range-pressed) .range-slider {
+  cursor: grabbing;
+}
+
+.range-pin {
+  position: absolute;
+  background: current-color(base);
+  color: current-color(contrast);
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.range-knob-handle {
+  top: calc((var(--height) - var(--knob-handle-size)) / 2);
+  -webkit-margin-start: calc(0px - var(--knob-handle-size) / 2);
+  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  width: var(--knob-handle-size);
+  height: var(--knob-handle-size);
+  text-align: center;
+}
+.range-knob-handle {
+  inset-inline-start: 0;
+}
+
+:host-context([dir=rtl]) .range-knob-handle {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+[dir=rtl] .range-knob-handle {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  .range-knob-handle:dir(rtl) {
+    /* stylelint-disable-next-line property-disallowed-list */
+    left: unset;
+  }
+}
+.range-knob-handle:active, .range-knob-handle:focus {
+  outline: none;
+}
+
+.range-bar-container {
+  border-radius: var(--bar-border-radius);
+  top: calc((var(--height) - var(--bar-height)) / 2);
+  position: absolute;
+  width: 100%;
+  height: var(--bar-height);
+}
+.range-bar-container {
+  inset-inline-start: 0;
+}
+
+:host-context([dir=rtl]) .range-bar-container {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+[dir=rtl] .range-bar-container {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  .range-bar-container:dir(rtl) {
+    /* stylelint-disable-next-line property-disallowed-list */
+    left: unset;
+  }
+}
+
+.range-bar {
+  border-radius: var(--bar-border-radius);
+  position: absolute;
+  width: 100%;
+  height: var(--bar-height);
+  background: var(--bar-background);
+  pointer-events: none;
+}
+
+.range-knob {
+  border-radius: var(--knob-border-radius);
+  top: calc(50% - var(--knob-size) / 2);
+  position: absolute;
+  width: var(--knob-size);
+  height: var(--knob-size);
+  background: var(--knob-background);
+  box-shadow: var(--knob-box-shadow);
+  z-index: 2;
+  pointer-events: none;
+}
+.range-knob {
+  inset-inline-start: calc(50% - var(--knob-size) / 2);
+}
+
+:host-context([dir=rtl]) .range-knob {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+[dir=rtl] .range-knob {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  .range-knob:dir(rtl) {
+    /* stylelint-disable-next-line property-disallowed-list */
+    left: unset;
+  }
+}
+
+:host(.range-pressed) .range-bar-active {
+  will-change: left, right;
+}
+
+:host(.in-item) {
+  width: 100%;
+}
+
+/**
+ * Range can be slotted
+ * in components such as item and
+ * toolbar which is why we do not
+ * limit the below behavior to just ion-item.
+ */
+:host([slot=start]),
+:host([slot=end]) {
+  width: auto;
+}
+
+:host(.in-item) ::slotted(ion-label) {
+  align-self: center;
+}
+
+.range-wrapper {
+  display: flex;
+  position: relative;
+  flex-grow: 1;
+  align-items: center;
+  height: inherit;
+}
+
+::slotted([slot=label]) {
+  /**
+   * Label text should not extend
+   * beyond the bounds of the range.
+   * However, we do not set the max
+   * width to 100% because then
+   * only the label would show and users
+   * would not be able to see the range.
+   */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden {
+  display: none;
+}
+
+.native-wrapper {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL.
+ */
+:host(.range-label-placement-start) .range-wrapper {
+  flex-direction: row;
+}
+
+/**
+ * Label is on the right of the range in LTR and
+ * on the left in RTL.
+ */
+:host(.range-label-placement-end) .range-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  transform-origin: left top;
+}
+:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+:host {
+  --knob-border-radius: var(--ion-border-radius-full, 999px);
+  --knob-background: var(--ion-primitives-base-white, #ffffff);
+  --knob-box-shadow: none;
+  --knob-size: var(--ion-scale-600, 24px);
+  --knob-handle-size: var(--ion-scale-1000, 40px);
+  --bar-height: var(--ion-scale-200, 8px);
+  --bar-background: var(--ion-primitives-neutral-100, #f5f5f5);
+  --bar-background-active: var(--ion-color-primary, #105cef);
+  --bar-border-radius: var(--ion-border-radius-400, 16px);
+  --height: var(--ion-scale-1000, 40px);
+  font-size: var(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-regular, 400);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-600, 24px);
+  text-decoration: none;
+  text-transform: none;
+  z-index: var(--ion-z-index-100, 100px);
+}
+
+:host(.range-item-start-adjustment) {
+  -webkit-padding-start: var(--ion-space-600, 24px);
+  padding-inline-start: var(--ion-space-600, 24px);
+}
+
+:host(.range-item-end-adjustment) {
+  -webkit-padding-end: var(--ion-space-600, 24px);
+  padding-inline-end: var(--ion-space-600, 24px);
+}
+
+:host(.ion-color) .range-bar-active,
+:host(.ion-color) .range-tick-active {
+  background: var(--ion-color-base);
+}
+
+::slotted(ion-icon[slot]) {
+  font-size: var(--ion-font-size-600, 1.5rem);
+}
+
+::slotted([slot=start]) {
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--ion-space-400, 16px);
+  margin-inline-end: var(--ion-space-400, 16px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted([slot=end]) {
+  -webkit-margin-start: var(--ion-space-400, 16px);
+  margin-inline-start: var(--ion-space-400, 16px);
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted([slot=label]) {
+  max-width: var(--ion-scale-5000, 200px);
+}
+
+: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.
+  */
+  padding-top: calc(var(--ion-space-100, 4px) + var(--ion-scale-600, 24px));
+}
+
+: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.
+  */
+  margin-bottom: calc(var(--ion-space-200, 8px) + 0.75rem);
+}
+
+.range-bar-active {
+  bottom: 0;
+  width: auto;
+  background: var(--bar-background-active);
+}
+.range-bar-active.has-ticks {
+  border-radius: 0;
+  -webkit-margin-start: calc(-1 * var(--ion-scale-100, 4px) * 0.5);
+  margin-inline-start: calc(-1 * var(--ion-scale-100, 4px) * 0.5);
+  -webkit-margin-end: calc(-1 * var(--ion-scale-100, 4px) * 0.5);
+  margin-inline-end: calc(-1 * var(--ion-scale-100, 4px) * 0.5);
+}
+
+.range-tick {
+  -webkit-margin-start: calc(var(--ion-scale-100, 4px) * -0.5);
+  margin-inline-start: calc(var(--ion-scale-100, 4px) * -0.5);
+  border-radius: var(--ion-border-radius-0, 0px);
+  position: absolute;
+  top: calc(var(--height) * 0.5 - var(--ion-scale-300, 12px) * 0.5);
+  width: var(--ion-scale-100, 4px);
+  height: var(--ion-scale-300, 12px);
+  background: var(--ion-primitives-neutral-100, #f5f5f5);
+  pointer-events: none;
+}
+
+.range-tick-active {
+  background: var(--bar-background-active);
+}
+
+.range-pin {
+  padding-bottom: var(--ion-space-100, 4px);
+  min-width: var(--ion-scale-700, 28px);
+  transform: translate3d(0, -100%, 0);
+  background: transparent;
+  font-size: 0.75rem;
+  text-align: center;
+}
+
+.range-knob {
+  border-width: var(--ion-border-size-025, 1px);
+  border-style: var(--ion-border-style-solid, solid);
+  border-color: var(--ion-color-primary, #105cef);
+  box-sizing: border-box;
+}
+
+:host(.range-disabled) {
+  opacity: 0.3;
+}
+
+:host(.range-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the range should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--ion-space-400, 16px);
+  margin-inline-end: var(--ion-space-400, 16px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.range-label-placement-end) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the range should be on the start
+   * when the label sits at the end.
+   */
+  -webkit-margin-start: var(--ion-space-400, 16px);
+  margin-inline-start: var(--ion-space-400, 16px);
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the range should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--ion-space-400, 16px);
+  margin-inline-end: var(--ion-space-400, 16px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  transform: scale(0.75);
+  /**
+  * The margin between the label and
+  * the range should be on the bottom
+  * when the label sits on top.
+  */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: var(--ion-space-400, 16px);
+  /**
+   * Label text should not extend
+   * beyond the bounds of the range.
+   */
+  max-width: 133.3333333333%;
+}
+
+:host(.in-item.range-label-placement-stacked) .label-text-wrapper {
+  margin-top: var(--ion-space-250, 10px);
+  margin-bottom: var(--ion-space-400, 16px);
+}
+
+:host(.in-item.range-label-placement-stacked) .native-wrapper {
+  margin-bottom: var(--ion-space-0, 0px);
+}