@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -1,567 +0,0 @@
-/**
- * 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 pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * 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(--token-border-radius-full, 999px);
-  --knob-background: var(--token-bg-input-default, var(--token-primitives-base-white, #ffffff));
-  --knob-box-shadow: none;
-  --knob-size: var(--token-scale-600, 24px);
-  --knob-handle-size: var(--token-scale-1100, 44px);
-  --bar-height: var(--token-scale-200, 8px);
-  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
-  --bar-background-active: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
-  --bar-border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
-  --height: var(--token-scale-1100, 44px);
-  font-size: var(--token-font-size-350, 0.875rem);
-  font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
-  z-index: var(--token-z-index-100, 100);
-}
-
-:host(.range-item-start-adjustment) {
-  -webkit-padding-start: var(--token-space-600, var(--token-scale-600, 24px));
-  padding-inline-start: var(--token-space-600, var(--token-scale-600, 24px));
-}
-
-:host(.range-item-end-adjustment) {
-  -webkit-padding-end: var(--token-space-600, var(--token-scale-600, 24px));
-  padding-inline-end: var(--token-space-600, var(--token-scale-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(--token-font-size-600, 1.5rem);
-}
-
-::slotted([slot=start]) {
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-::slotted([slot=end]) {
-  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-::slotted([slot=label]) {
-  max-width: var(--token-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(--token-space-100, var(--token-scale-100, 4px)) + var(--token-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(--token-space-200, var(--token-scale-200, 8px)) + var(--token-font-size-300, 0.75rem));
-}
-
-.range-bar.has-ticks {
-  border-radius: 0;
-}
-
-.range-bar.range-bar-active.has-ticks {
-  -webkit-margin-start: calc(-1 * var(--token-scale-100, 4px) * 0.5);
-  margin-inline-start: calc(-1 * var(--token-scale-100, 4px) * 0.5);
-  -webkit-margin-end: calc(-1 * var(--token-scale-100, 4px) * 0.5);
-  margin-inline-end: calc(-1 * var(--token-scale-100, 4px) * 0.5);
-}
-
-.range-bar.range-bar-active {
-  bottom: 0;
-  width: auto;
-  background: var(--bar-background-active);
-}
-
-.range-tick {
-  -webkit-margin-start: calc(var(--token-scale-100, 4px) * -0.5);
-  margin-inline-start: calc(var(--token-scale-100, 4px) * -0.5);
-  border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
-  position: absolute;
-  top: calc(var(--height) * 0.5 - var(--token-scale-400, 16px) * 0.5);
-  width: var(--token-scale-050, 2px);
-  height: var(--token-scale-400, 16px);
-  background: var(--bar-background);
-  pointer-events: none;
-}
-
-.range-tick-active {
-  background: var(--bar-background-active);
-}
-
-.range-pin {
-  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
-  min-width: var(--token-scale-700, 28px);
-  transform: translate3d(0, -100%, 0);
-  background: transparent;
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
-  font-size: var(--token-font-size-300, 0.75rem);
-  text-align: center;
-}
-
-.range-knob {
-  border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  border-style: var(--token-border-style-solid, solid);
-  border-color: var(--token-border-primary, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
-  box-sizing: border-box;
-}
-
-:host(.range-disabled) {
-  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
-}
-:host(.range-disabled) .range-knob {
-  border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
-  background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));
-}
-
-: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(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-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(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-start: var(--token-space-400, var(--token-scale-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(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-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(--token-space-400, var(--token-scale-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(--token-space-250, var(--token-scale-250, 10px));
-  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
-}
-
-:host(.in-item.range-label-placement-stacked) .native-wrapper {
-  margin-bottom: var(--token-space-0, var(--token-scale-0, 0px));
-}
-
-.range-knob-handle.ion-focused .range-knob {
-  outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
-  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
-}
-
-.range-knob-handle.ion-activated .range-knob,
-.range-knob-handle.range-knob-pressed .range-knob {
-  background: var(--token-bg-input-press, var(--token-primitives-neutral-200, #eae9e9));
-}