@synergy-design-system/mcp 2.15.0 → 3.0.1

package/metadata/packages/components/components/syn-range/component.styles.ts

@@ -1,310 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    /*
-     * Values here apply for the default size of "medium"
-     * For other sizes, see below
-     */
-    --thumb-size: var(--syn-spacing-medium);
-    --thumb-hit-area-size: 1.4;
-    --track-hit-area-size: var(--syn-spacing-medium);
-    --track-active-offset: 0px;
-    --track-color-active: var(--syn-range-track-color-active);
-    --track-color-inactive: var(--syn-range-color-inactive);
-    --track-height: var(--syn-spacing-2x-small);
-
-    /* This is needed to get the full with of the element, including the border */
-    --full-thumb-size: calc(var(--thumb-size) + (var(--syn-focus-ring-width) * 2));
-
-    /*
-     * There are multiple places where we need the half width of the thumb
-     * This is needed for example to position the knob on the track or
-     * provide the spacing to the left and right for the track to make it stand "over"
-     */
-    --half-thumb-size: calc(var(--full-thumb-size) / 2);
-  }
-
-  /* Sizes */
-  :host([size='small']) {
-    --thumb-size: var(--syn-spacing-small);
-  }
-
-  :host([size='large']) {
-    --thumb-size: var(--syn-spacing-medium-large);
-  }
-
-  .form-control {
-    align-items: stretch;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    writing-mode: horizontal-tb;
-  }
-
-  .base {
-    align-items: center;
-    cursor: text;
-    display: inline-flex;
-    flex: 1 1 auto;
-    font-family: var(--syn-input-font-family);
-    font-size: var(--syn-input-font-size-medium);
-    font-weight: var(--syn-input-font-weight);
-    justify-content: start;
-    letter-spacing: var(--syn-input-letter-spacing);
-    position: relative;
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-    touch-action: none; /* Prevent misbehavior in mobile by disabling native touch */
-    -webkit-touch-callout: none;
-    transition: var(--syn-transition-fast) color, var(--syn-transition-fast) border, var(--syn-transition-fast) box-shadow, var(--syn-transition-fast) background-color;
-    /* stylelint-disable-next-line property-no-vendor-prefix */
-    -webkit-user-select: none;
-    vertical-align: middle;
-    width: 100%;
-  }
-
-  .input__wrapper {
-    flex: 1 0 auto;
-    margin: 0 var(--half-thumb-size);
-    position: relative;
-  }
-
-  :host([disabled]) .base {
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  .input__prefix,
-  .input__suffix {
-    align-items: center;
-    color: var(--syn-input-icon-color);
-    cursor: default;
-    display: inline-flex;
-    flex: 0 0 auto;
-  }
-
-  /* Sizing for the prefix and suffix */
-  .form-control--small .input__prefix ::slotted(*) {
-    font-size: var(--syn-input-font-size-small);
-    margin-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .form-control--small .input__suffix ::slotted(*) {
-    font-size: var(--syn-input-font-size-small);
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .form-control--medium .input__prefix ::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-small);
-  }
-
-  .form-control--medium .input__suffix ::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-small);
-  }
-
-  .form-control--large .input__prefix ::slotted(*) {
-    font-size: var(--syn-input-font-size-large);
-    margin-inline-end: var(--syn-input-spacing-medium);
-  }
-
-  .form-control--large .input__suffix ::slotted(*) {
-    font-size: var(--syn-input-font-size-large);
-    margin-inline-start: var(--syn-input-spacing-medium);
-  }
-
-  .form-control--small .input__prefix ::slotted(syn-icon),
-  .form-control--small .input__suffix ::slotted(syn-icon) {
-    font-size: var(--syn-font-size-medium);
-  }
-
-  .form-control--medium .input__prefix ::slotted(syn-icon),
-  .form-control--medium .input__suffix ::slotted(syn-icon) {
-    font-size: var(--syn-font-size-x-large);
-  }
-  
-  .form-control--large .input__prefix ::slotted(syn-icon),
-  .form-control--large .input__suffix ::slotted(syn-icon) {
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  .track__wrapper {
-    cursor: pointer;
-    position: relative;
-  }
-
-  /* Internal helper for a better click surface on tracks */
-  .track__click-helper {
-    inset: calc(var(--track-hit-area-size) * -1) calc(var(--half-thumb-size) * -1);
-    position: absolute;
-  }
-
-  .track {
-    background-color: var(--track-color-inactive);
-    border-radius: var(--syn-border-radius-pill);
-    height: var(--track-height);
-    margin: calc((var(--full-thumb-size) - var(--track-height)) / 2) calc(var(--half-thumb-size) * -1);
-  }
-
-  .active-track {
-    background-color: var(--track-color-active);
-    border-radius: var(--syn-border-radius-pill);
-    height: var(--track-height);
-    margin: 0 calc(var(--half-thumb-size) * -1);
-    position: absolute;
-    top: 0;
-    z-index: 2;
-  }
-
-  .thumb {
-    background-color: var(--syn-interactive-emphasis-color);
-    border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset);
-    border-radius: var(--syn-border-radius-circle);
-    cursor: pointer;
-    display: block;
-    height: var(--full-thumb-size);
-    position: absolute;
-    top: 0;
-    transition: transform var(--syn-transition-fast) ease-in-out, background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;
-    user-select: none;
-    width: var(--full-thumb-size);
-    z-index: 3;
-  }
-
-  /**
-   * Adds some space to the thumb that makes it easier to click and drag
-   */
-  .thumb::after {
-    background: transparent;
-    border-radius: var(--syn-border-radius-circle);
-    content: "";
-    display: block;
-  
-    /* The --thumb-size needs to be used to subtract from, because the border of the thumb is not calculated into the inset */
-    inset: calc((var(--thumb-size) - (var(--full-thumb-size) * var(--thumb-hit-area-size)) ) / 2);
-
-    /* This is needed as we also attach a pointerleave listener that stops */
-    pointer-events: none;
-    position: absolute;
-  }
-
-  .thumb:hover {
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-    cursor: grab;
-  }
-
-  .thumb.grabbed {
-    background: var(--syn-interactive-emphasis-color-active);
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-    cursor: grabbing;
-  }
-
-  .thumb:focus-visible {
-    outline: none;
-  }
-
-  .thumb:not(.grabbed):focus-visible {
-    background: var(--syn-interactive-emphasis-color-hover);
-    outline: var(--syn-focus-ring);
-    outline-offset: 0;
-  }
-
-  :host([disabled]) .track__wrapper,
-  :host([disabled]) .thumb,
-  :host([disabled]) .thumb.grabbed {
-    cursor: not-allowed;
-  }
-
-  :host([readonly]) .track__wrapper,
-  :host([readonly]) .thumb,
-  :host([readonly]) .thumb.grabbed {
-    cursor: default;
-  }
-
-  /*
-   * Guard against mobile devices not removing the transform
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover
-   */
-  @media (any-hover: hover) {
-    :host(:not([disabled]):not([readonly])) .thumb:hover  {
-      transform: scale(var(--thumb-hit-area-size));
-    }
-
-    :host(:not([disabled]):not([readonly])) .thumb:not(.grabbed):hover  {
-      background: var(--syn-interactive-emphasis-color-hover);
-    }
-    
-    :host(:not([disabled]):not([readonly])) .thumb:hover::after  {
-      /* Unset the area of the thumb click and drag area space, so it does not scale with the hover */
-      inset: unset;
-    }
-  }
-
-  /* Ticks */
-  .ticks {
-    cursor: pointer;
-    inset-inline: 0;
-    position: absolute;
-    top: 100%;
-    user-select: none;
-  }
-
-  .form-control--small .ticks ::slotted(*) {
-    font-size: var(--syn-font-size-small);
-  }
-
-  .form-control--large .ticks ::slotted(*) {
-    font-size: var(--syn-font-size-large);
-  }
-
-  /**
-   * Visually hide elements without display:none to make aria and other accessibility stuff work correctly
-   * This is necessary for accessibility reasons and e.g. for the native html input validation popup to be
-   * shown.
-   */
-  .visually-hidden {
-    border: 0;
-    /* stylelint-disable-next-line property-no-deprecated */
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  /**
-   * Position the validation input to the bottom and center of the range track
-   */
-  .range__validation-input {
-    bottom: 0;
-    left: 50%;
-  }
-  
-
-  :host([data-user-invalid]) .active-track {
-    --track-color-active: var(--syn-range-error-color);
-  }
-
-  :host([data-user-invalid]) .thumb {
-    background-color: var(--syn-range-error-color);
-  }
-
-  /**
-   * #1176: Readonly state
-   */
-  :host([readonly]) {
-    --track-color-active: var(--syn-readonly-indicator-color);
-    --track-color-inactive: var(--syn-readonly-background-color);
-  }
-
-  :host([readonly]) .thumb {
-    background-color: var(--syn-readonly-indicator-color);
-  }
-
-  :host([readonly]) .thumb:focus {
-    background-color: var(--syn-readonly-indicator-color);
-    outline: var(--syn-focus-ring);
-    outline-offset: 0;
-  }
-`;