@jupyter/web-components/dist/esm/slider/slider.styles.js

A component library for building extensions in Jupyter frontends.

// Copyright (c) Jupyter Development Team.
// Copyright (c) Microsoft Corporation.
// Distributed under the terms of the Modified BSD License.
import { css } from '@microsoft/fast-element';
import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
import { SystemColors } from '@microsoft/fast-web-utilities';
import { accentFillFocus, accentForegroundRest, controlCornerRadius, designUnit, disabledOpacity, errorFillFocus, errorFillRest, fillColor, focusStrokeWidth, neutralForegroundRest, neutralStrokeHover, neutralStrokeRest } from '../design-tokens.js';
import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index.js';
const ltr = css `
  .track-start {
    left: 0;
  }
`;
const rtl = css `
  .track-start {
    right: 0;
  }
`;
/**
 * Styles for Slider
 * @public
 */
export const sliderStyles = (context, definition) => css `
    :host([hidden]) {
      display: none;
    }

    ${display('inline-grid')} :host {
      --thumb-size: calc(${heightNumber} * 0.5 - ${designUnit});
      --thumb-translate: calc(
        var(--thumb-size) * -0.5 + var(--track-width) / 2
      );
      --track-overhang: calc((${designUnit} / 2) * -1);
      --track-width: ${designUnit};
      --jp-slider-height: calc(var(--thumb-size) * 10);
      align-items: center;
      width: 100%;
      margin: calc(${designUnit} * 1px) 0;
      user-select: none;
      box-sizing: border-box;
      border-radius: calc(${controlCornerRadius} * 1px);
      outline: none;
      cursor: pointer;
    }
    :host([orientation='horizontal']) .positioning-region {
      position: relative;
      margin: 0 8px;
      display: grid;
      grid-template-rows: calc(var(--thumb-size) * 1px) 1fr;
    }
    :host([orientation='vertical']) .positioning-region {
      position: relative;
      margin: 0 8px;
      display: grid;
      height: 100%;
      grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;
    }

    :host(:${focusVisible}) .thumb-cursor {
      box-shadow:
        0 0 0 2px ${fillColor},
        0 0 0 calc((2 + ${focusStrokeWidth}) * 1px) ${accentFillFocus};
    }

    :host([aria-invalid='true']:${focusVisible}) .thumb-cursor {
      box-shadow:
        0 0 0 2px ${fillColor},
        0 0 0 calc((2 + ${focusStrokeWidth}) * 1px) ${errorFillFocus};
    }

    .thumb-container {
      position: absolute;
      height: calc(var(--thumb-size) * 1px);
      width: calc(var(--thumb-size) * 1px);
      transition: all 0.2s ease;
      color: ${neutralForegroundRest};
      fill: currentcolor;
    }
    .thumb-cursor {
      border: none;
      width: calc(var(--thumb-size) * 1px);
      height: calc(var(--thumb-size) * 1px);
      background: ${neutralForegroundRest};
      border-radius: calc(${controlCornerRadius} * 1px);
    }
    .thumb-cursor:hover {
      background: ${neutralForegroundRest};
      border-color: ${neutralStrokeHover};
    }
    .thumb-cursor:active {
      background: ${neutralForegroundRest};
    }
    .track-start {
      background: ${accentForegroundRest};
      position: absolute;
      height: 100%;
      left: 0;
      border-radius: calc(${controlCornerRadius} * 1px);
    }
    :host([aria-invalid='true']) .track-start {
      background-color: ${errorFillRest};
    }
    :host([orientation='horizontal']) .thumb-container {
      transform: translateX(calc(var(--thumb-size) * 0.5px))
        translateY(calc(var(--thumb-translate) * 1px));
    }
    :host([orientation='vertical']) .thumb-container {
      transform: translateX(calc(var(--thumb-translate) * 1px))
        translateY(calc(var(--thumb-size) * 0.5px));
    }
    :host([orientation='horizontal']) {
      min-width: calc(var(--thumb-size) * 1px);
    }
    :host([orientation='horizontal']) .track {
      right: calc(var(--track-overhang) * 1px);
      left: calc(var(--track-overhang) * 1px);
      align-self: start;
      height: calc(var(--track-width) * 1px);
    }
    :host([orientation='vertical']) .track {
      top: calc(var(--track-overhang) * 1px);
      bottom: calc(var(--track-overhang) * 1px);
      width: calc(var(--track-width) * 1px);
      height: 100%;
    }
    .track {
      background: ${neutralStrokeRest};
      position: absolute;
      border-radius: calc(${controlCornerRadius} * 1px);
    }
    :host([orientation='vertical']) {
      height: calc(var(--fast-slider-height) * 1px);
      min-height: calc(var(--thumb-size) * 1px);
      min-width: calc(${designUnit} * 20px);
    }
    :host([orientation='vertical']) .track-start {
      height: auto;
      width: 100%;
      top: 0;
    }
    :host([disabled]),
    :host([readonly]) {
      cursor: ${disabledCursor};
    }
    :host([disabled]) {
      opacity: ${disabledOpacity};
    }
  `.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior(css `
      .thumb-cursor {
        forced-color-adjust: none;
        border-color: ${SystemColors.FieldText};
        background: ${SystemColors.FieldText};
      }
      .thumb-cursor:hover,
      .thumb-cursor:active {
        background: ${SystemColors.Highlight};
      }
      .track {
        forced-color-adjust: none;
        background: ${SystemColors.FieldText};
      }
      :host(:${focusVisible}) .thumb-cursor {
        border-color: ${SystemColors.Highlight};
      }
      :host([disabled]) {
        opacity: 1;
      }
      :host([disabled]) .track,
      :host([disabled]) .thumb-cursor {
        forced-color-adjust: none;
        background: ${SystemColors.GrayText};
      }

      :host(:${focusVisible}) .thumb-cursor {
        background: ${SystemColors.Highlight};
        border-color: ${SystemColors.Highlight};
        box-shadow:
          0 0 0 2px ${SystemColors.Field},
          0 0 0 4px ${SystemColors.FieldText};
      }
    `));