@adobe/spectrum-css/dist/components/picker/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Picker {
  --spectrum-button-line-height: 1.3;
  position: relative;

  display: -ms-inline-flexbox;

  display: inline-flex;
  box-sizing: border-box;

  -ms-flex-align: center;

      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  overflow: visible;
  margin: 0;

  border-style: solid;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: button;
  vertical-align: top;

  transition: background var(--spectrum-global-animation-duration-100, 130ms) ease-out,
    border-color var(--spectrum-global-animation-duration-100, 130ms) ease-out,
    color var(--spectrum-global-animation-duration-100, 130ms) ease-out,
    box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out;

  text-decoration: none;
  font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base));

  line-height: var(--spectrum-button-line-height);

  -ms-user-select: none;

      user-select: none;
  -webkit-user-select: none;
  -ms-touch-action: none;
      touch-action: none;

  cursor: pointer;
}

.spectrum-Picker:focus {
    outline: none;
  }

.spectrum-Picker::-moz-focus-inner {
    border: 0;
    border-style: none;
    padding: 0;
    margin-top: -2px;
    margin-bottom: -2px;
  }

.spectrum-Picker:disabled {
    cursor: default;
  }

[dir="ltr"] .spectrum-Picker {
  padding-left: var(--spectrum-picker-textonly-padding-left);
  padding-right: var(--spectrum-picker-textonly-padding-right);
}

[dir="rtl"] .spectrum-Picker {
  padding-right: var(--spectrum-picker-textonly-padding-left);
  padding-left: var(--spectrum-picker-textonly-padding-right);
}

.spectrum-Picker {

  display: -ms-flexbox;

  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  max-width: 100%;
  width: var(--spectrum-picker-width);
  min-width: var(--spectrum-picker-min-width);
  height: var(--spectrum-picker-height);

  margin: 0;
  padding-top: 0;
  padding-bottom: 0;

  border-width: var(--spectrum-picker-border-size);
  border-style: solid;
  border-radius: var(--spectrum-picker-border-radius);

  transition: background-color var(--spectrum-global-animation-duration-100, 130ms),
    box-shadow var(--spectrum-global-animation-duration-100, 130ms),
    border-color var(--spectrum-global-animation-duration-100, 130ms);
}

.spectrum-Picker:disabled,
  .spectrum-Picker.is-disabled {
    border-width: var(--spectrum-picker-disabled-border-size);
    cursor: default;
  }

[dir="ltr"] .spectrum-Picker .spectrum-Picker-icon {
    margin-right: var(--spectrum-picker-icon-gap);
}

[dir="rtl"] .spectrum-Picker .spectrum-Picker-icon {
    margin-left: var(--spectrum-picker-icon-gap);
}

.spectrum-Picker .spectrum-Picker-icon {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

[dir="ltr"] .spectrum-Picker .spectrum-Picker-label + .spectrum-Picker-icon {
    margin-left: var(--spectrum-picker-icon-gap);
}

[dir="rtl"] .spectrum-Picker .spectrum-Picker-label + .spectrum-Picker-icon {
    margin-right: var(--spectrum-picker-icon-gap);
}

.spectrum-Picker--sizeS {
  --spectrum-picker-border-size: var(--spectrum-picker-s-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-picker-text-size: var(--spectrum-picker-s-text-size, var(--spectrum-alias-item-text-size-s));
  --spectrum-picker-icon-gap: var(--spectrum-picker-s-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-s));
  --spectrum-picker-height: var(--spectrum-picker-s-height, var(--spectrum-alias-item-height-s));
  --spectrum-picker-placeholder-text-font-style: var(--spectrum-picker-s-placeholder-text-font-style, var(--spectrum-global-font-style-italic));
  --spectrum-picker-placeholder-text-font-weight: var(--spectrum-picker-s-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
  --spectrum-picker-border-radius: var(--spectrum-picker-s-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-picker-width: var(--spectrum-picker-s-width, var(--spectrum-global-dimension-size-2000));
  --spectrum-picker-min-width: var(--spectrum-picker-s-min-width, var(--spectrum-global-dimension-size-450));
  --spectrum-picker-popover-max-width: var(--spectrum-picker-s-popover-max-width, var(--spectrum-global-dimension-size-1800));
  --spectrum-picker-ui-icon-gap: var(--spectrum-picker-s-ui-icon-gap, var(--spectrum-alias-item-ui-icon-gap-s));
  --spectrum-picker-error-icon-margin-left: var(--spectrum-picker-s-error-icon-margin-left, var(--spectrum-global-dimension-size-100));
  --spectrum-picker-textonly-padding-left: var(--spectrum-picker-s-textonly-padding-left, var(--spectrum-alias-item-padding-s));
  --spectrum-picker-textonly-padding-right: var(--spectrum-picker-s-textonly-padding-right, var(--spectrum-alias-item-padding-s));
}

.spectrum-Picker--sizeM {
  --spectrum-picker-border-size: var(--spectrum-picker-m-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-picker-text-size: var(--spectrum-picker-m-text-size, var(--spectrum-alias-item-text-size-m));
  --spectrum-picker-height: var(--spectrum-picker-m-height, var(--spectrum-alias-item-height-m));
  --spectrum-picker-icon-gap: var(--spectrum-picker-m-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-m));
  --spectrum-picker-placeholder-text-font-style: var(--spectrum-picker-m-placeholder-text-font-style, var(--spectrum-global-font-style-italic));
  --spectrum-picker-placeholder-text-font-weight: var(--spectrum-picker-m-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
  --spectrum-picker-border-radius: var(--spectrum-picker-m-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-picker-width: var(--spectrum-picker-m-width, var(--spectrum-global-dimension-size-3000));
  --spectrum-picker-min-width: var(--spectrum-picker-m-min-width, var(--spectrum-global-dimension-size-600));
  --spectrum-picker-popover-max-width: var(--spectrum-picker-m-popover-max-width, var(--spectrum-global-dimension-size-2400));
  --spectrum-picker-ui-icon-gap: var(--spectrum-picker-m-ui-icon-gap, var(--spectrum-alias-item-ui-icon-gap-m));
  --spectrum-picker-error-icon-margin-left: var(--spectrum-picker-m-error-icon-margin-left, var(--spectrum-global-dimension-size-150));
  --spectrum-picker-textonly-padding-left: var(--spectrum-picker-m-textonly-padding-left, var(--spectrum-alias-item-padding-m));
  --spectrum-picker-textonly-padding-right: var(--spectrum-picker-m-textonly-padding-right, var(--spectrum-alias-item-padding-m));
}

.spectrum-Picker--sizeL {
  --spectrum-picker-border-size: var(--spectrum-picker-l-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-picker-text-size: var(--spectrum-picker-l-text-size, var(--spectrum-alias-item-text-size-l));
  --spectrum-picker-icon-gap: var(--spectrum-picker-l-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-l));
  --spectrum-picker-height: var(--spectrum-picker-l-height, var(--spectrum-alias-item-height-l));
  --spectrum-picker-placeholder-text-font-style: var(--spectrum-picker-l-placeholder-text-font-style, var(--spectrum-global-font-style-italic));
  --spectrum-picker-placeholder-text-font-weight: var(--spectrum-picker-l-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
  --spectrum-picker-border-radius: var(--spectrum-picker-l-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-picker-width: var(--spectrum-picker-l-width, var(--spectrum-global-dimension-size-2000));
  --spectrum-picker-min-width: var(--spectrum-picker-l-min-width, var(--spectrum-global-dimension-size-750));
  --spectrum-picker-popover-max-width: var(--spectrum-picker-l-popover-max-width, var(--spectrum-global-dimension-size-3000));
  --spectrum-picker-ui-icon-gap: var(--spectrum-picker-l-ui-icon-gap, var(--spectrum-alias-item-ui-icon-gap-l));
  --spectrum-picker-error-icon-margin-left: var(--spectrum-picker-l-error-icon-margin-left, var(--spectrum-global-dimension-size-185));
  --spectrum-picker-textonly-padding-left: var(--spectrum-picker-l-textonly-padding-left, var(--spectrum-alias-item-padding-l));
  --spectrum-picker-textonly-padding-right: var(--spectrum-picker-l-textonly-padding-right, var(--spectrum-alias-item-padding-l));
}

.spectrum-Picker--sizeXL {
  --spectrum-picker-border-size: var(--spectrum-picker-xl-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-picker-icon-gap: var(--spectrum-picker-xl-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-l));
  --spectrum-picker-text-size: var(--spectrum-picker-xl-text-size, var(--spectrum-alias-item-text-size-xl));
  --spectrum-picker-height: var(--spectrum-picker-xl-height, var(--spectrum-alias-item-height-xl));
  --spectrum-picker-placeholder-text-font-style: var(--spectrum-picker-xl-placeholder-text-font-style, var(--spectrum-global-font-style-italic));
  --spectrum-picker-placeholder-text-font-weight: var(--spectrum-picker-xl-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
  --spectrum-picker-border-radius: var(--spectrum-picker-xl-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-picker-width: var(--spectrum-picker-xl-width, var(--spectrum-global-dimension-size-3000));
  --spectrum-picker-min-width: var(--spectrum-picker-xl-min-width, var(--spectrum-global-dimension-size-900));
  --spectrum-picker-popover-max-width: var(--spectrum-picker-xl-popover-max-width, var(--spectrum-global-dimension-size-3600));
  --spectrum-picker-ui-icon-gap: var(--spectrum-picker-xl-ui-icon-gap, var(--spectrum-alias-item-ui-icon-gap-xl));
  --spectrum-picker-error-icon-margin-left: var(--spectrum-picker-xl-error-icon-margin-left, var(--spectrum-global-dimension-size-225));
  --spectrum-picker-textonly-padding-left: var(--spectrum-picker-xl-textonly-padding-left, var(--spectrum-alias-item-padding-xl));
  --spectrum-picker-textonly-padding-right: var(--spectrum-picker-xl-textonly-padding-right, var(--spectrum-alias-item-padding-xl));
}

.spectrum-Picker {
  --spectrum-picker-min-width: var(--spectrum-global-dimension-size-400);
  --spectrum-picker-disabled-border-size: 0;

  --spectrum-picker-popover-max-width: var(--spectrum-global-dimension-size-3000);
  --spectrum-picker-width: var(--spectrum-global-dimension-size-2400);
  --spectrum-picker-border-size-increase-focus: 1px;
}

.spectrum-Picker--quiet {
  --spectrum-picker-border-size: 0;
  --spectrum-picker-border-radius: 0;
  --spectrum-picker-textonly-padding-left: 0;
  --spectrum-picker-textonly-padding-right: 0;
}

.spectrum-Picker--quiet {
  width: auto;
  min-width: 0;
}

.spectrum-Picker--quiet:disabled.focus-ring, .spectrum-Picker--quiet.is-disabled.focus-ring {
      box-shadow: none;
    }

[dir="ltr"] .spectrum-Picker-label {
  text-align: left;
}

[dir="rtl"] .spectrum-Picker-label {
  text-align: right;
}

.spectrum-Picker-label {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;

  white-space: nowrap;
  overflow: hidden;

  height: calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size) * 2);
  line-height: calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size) * 2);

  font-size: var(--spectrum-picker-text-size);

  text-overflow: ellipsis;
}

.spectrum-Picker-label.is-placeholder {
    font-weight: var(--spectrum-picker-placeholder-text-font-weight);
    font-style: var(--spectrum-picker-placeholder-text-font-style);
    transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
  }

.spectrum-Picker-menuIcon {
  display: inline-block;
  position: relative;
  vertical-align: top;
  transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-out;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

[dir="ltr"] .spectrum-Picker-validationIcon {
  margin-left: var(--spectrum-picker-error-icon-margin-left);
}

[dir="rtl"] .spectrum-Picker-validationIcon {
  margin-right: var(--spectrum-picker-error-icon-margin-left);
}

[dir="ltr"] .spectrum-Picker-label ~ .spectrum-Picker-menuIcon {
  margin-left: var(--spectrum-picker-ui-icon-gap);
}

[dir="rtl"] .spectrum-Picker-label ~ .spectrum-Picker-menuIcon {
  margin-right: var(--spectrum-picker-ui-icon-gap);
}

.spectrum-Picker-popover {
  max-width: var(--spectrum-picker-popover-max-width);
}

[dir="ltr"] .spectrum-Picker-popover--quiet {
  margin-left: calc(-1 * (var(--spectrum-picker-quiet-m-popover-offset-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin))));
}

[dir="rtl"] .spectrum-Picker-popover--quiet {
  margin-right: calc(-1 * (var(--spectrum-picker-quiet-m-popover-offset-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin))));
}

.spectrum-Picker {
  color: var(--spectrum-picker-m-text-color, var(--spectrum-alias-text-color));
  background-color: var(--spectrum-picker-m-background-color, var(--spectrum-global-color-gray-75));
  border-color: var(--spectrum-picker-m-border-color, var(--spectrum-alias-border-color));
}

.spectrum-Picker:hover {
    color: var(--spectrum-picker-m-text-color-hover, var(--spectrum-alias-text-color-hover));
    background-color: var(--spectrum-picker-m-background-color-hover, var(--spectrum-global-color-gray-50));
    border-color: var(--spectrum-picker-m-border-color-hover, var(--spectrum-alias-border-color-hover));
  }

.spectrum-Picker:hover .spectrum-Picker-menuIcon {
      color: var(--spectrum-picker-m-icon-color-hover, var(--spectrum-alias-icon-color-hover));
    }

.spectrum-Picker:active,
  .spectrum-Picker.is-open {
    background-color: var(--spectrum-picker-m-background-color-down, var(--spectrum-global-color-gray-200));
    border-color: var(--spectrum-picker-m-border-color-down, var(--spectrum-alias-border-color-down));
  }

.spectrum-Picker:active.is-placeholder .spectrum-Picker-label, .spectrum-Picker.is-open.is-placeholder .spectrum-Picker-label {
        color: var(--spectrum-picker-m-placeholder-text-color-down, var(--spectrum-alias-placeholder-text-color-down));
      }

.spectrum-Picker.focus-ring,
  .spectrum-Picker.is-focused {
    background-color: var(--spectrum-picker-m-background-color-key-focus, var(--spectrum-global-color-gray-50));
    border-color: var(--spectrum-picker-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    box-shadow: 0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    color: var(--spectrum-picker-m-text-color-key-focus, var(--spectrum-alias-text-color-hover));
  }

.spectrum-Picker.focus-ring.is-placeholder, .spectrum-Picker.is-focused.is-placeholder {
      color: var(--spectrum-picker-m-placeholder-text-color-key-focus, var(--spectrum-alias-placeholder-text-color-hover));
    }

.spectrum-Picker.is-invalid {
    border-color: var(--spectrum-picker-m-border-color-error, var(--spectrum-global-color-red-500));
  }

.spectrum-Picker.is-invalid .spectrum-Picker-validationIcon {
      color: var(--spectrum-picker-m-validation-icon-color-error, var(--spectrum-semantic-negative-color-icon));
    }

.spectrum-Picker.is-invalid:hover {
      border-color: var(--spectrum-picker-m-border-color-error-hover, var(--spectrum-global-color-red-600));
    }

.spectrum-Picker.is-invalid:active,
    .spectrum-Picker.is-invalid.is-open {
      border-color: var(--spectrum-picker-m-border-color-error-down, var(--spectrum-global-color-red-600));
    }

.spectrum-Picker.is-invalid.focus-ring,
    .spectrum-Picker.is-invalid.is-focused {
      border-color: var(--spectrum-picker-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
      box-shadow: 0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
    }

.spectrum-Picker:disabled,
  .spectrum-Picker.is-disabled {
    background-color: var(--spectrum-picker-m-background-color-disabled, var(--spectrum-global-color-gray-200));
    color: var(--spectrum-picker-m-text-color-disabled, var(--spectrum-alias-text-color-disabled));
  }

.spectrum-Picker:disabled .spectrum-Picker-icon,
    .spectrum-Picker:disabled .spectrum-Picker-menuIcon,
    .spectrum-Picker:disabled .spectrum-Picker-validationIcon,
    .spectrum-Picker.is-disabled .spectrum-Picker-icon,
    .spectrum-Picker.is-disabled .spectrum-Picker-menuIcon,
    .spectrum-Picker.is-disabled .spectrum-Picker-validationIcon {
      color: var(--spectrum-picker-m-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
    }

.spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder {
        color: var(--spectrum-picker-m-placeholder-text-color-disabled, var(--spectrum-alias-text-color-disabled));
      }

.spectrum-Picker-menuIcon {
  color: var(--spectrum-picker-m-icon-color, var(--spectrum-alias-icon-color));
}

.spectrum-Picker-label.is-placeholder {
    color: var(--spectrum-picker-m-placeholder-text-color, var(--spectrum-alias-placeholder-text-color));
  }

.spectrum-Picker-label.is-placeholder:hover {
      color: var(--spectrum-picker-m-placeholder-text-color-hover, var(--spectrum-alias-placeholder-text-color-hover));
    }

.spectrum-Picker-label.is-placeholder:active {
      color: var(--spectrum-picker-m-placeholder-text-color-mouse-focus, var(--spectrum-alias-placeholder-text-color));
    }

.spectrum-Picker--quiet {
  color: var(--spectrum-picker-m-text-color, var(--spectrum-alias-text-color));
  border-color: var(--spectrum-picker-quiet-m-border-color, var(--spectrum-alias-border-color-transparent));
  background-color: var(--spectrum-picker-quiet-m-background-color, var(--spectrum-alias-background-color-transparent));
}

.spectrum-Picker--quiet:hover {
    background-color: var(--spectrum-picker-quiet-m-background-color-hover, var(--spectrum-alias-background-color-transparent));
    color: var(--spectrum-picker-m-text-color-hover, var(--spectrum-alias-text-color-hover));
  }

.spectrum-Picker--quiet.focus-ring,
  .spectrum-Picker--quiet.is-focused {
    background-color: var(--spectrum-picker-quiet-m-background-color-key-focus, var(--spectrum-alias-background-color-transparent));
    box-shadow: 0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
  }

.spectrum-Picker--quiet.focus-ring.is-placeholder, .spectrum-Picker--quiet.is-focused.is-placeholder {
      color: var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus, var(--spectrum-alias-placeholder-text-color-hover));
    }

.spectrum-Picker--quiet.focus-ring .spectrum-Picker-menuIcon, .spectrum-Picker--quiet.is-focused .spectrum-Picker-menuIcon {
      color: var(--spectrum-picker-m-icon-color-key-focus, var(--spectrum-alias-icon-color-focus))
    }

.spectrum-Picker--quiet:active,
  .spectrum-Picker--quiet.is-open {
    background-color: var(--spectrum-picker-quiet-m-background-color-down, var(--spectrum-alias-background-color-transparent));
    border-color: var(--spectrum-picker-quiet-m-border-color-down, var(--spectrum-alias-border-color-transparent));
  }

.spectrum-Picker--quiet:active.focus-ring,
    .spectrum-Picker--quiet:active.is-focused,
    .spectrum-Picker--quiet.is-open.focus-ring,
    .spectrum-Picker--quiet.is-open.is-focused {
      background-color: var(--spectrum-picker-quiet-m-background-color-key-focus, var(--spectrum-alias-background-color-transparent));
      box-shadow: 0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    }

.spectrum-Picker--quiet.is-invalid.focus-ring,
    .spectrum-Picker--quiet.is-invalid.is-focused {
      box-shadow: 0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
    }

.spectrum-Picker--quiet:disabled,
  .spectrum-Picker--quiet.is-disabled {
    background-color: var(--spectrum-picker-quiet-m-background-color-disabled, var(--spectrum-alias-background-color-transparent));
    color: var(--spectrum-picker-m-text-color-disabled, var(--spectrum-alias-text-color-disabled));
  }