429 lines
20 KiB
CSS
429 lines
20 KiB
CSS
.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);
|
|
|
|
-moz-user-select: none;
|
|
|
|
-ms-user-select: none;
|
|
|
|
user-select: none;
|
|
-webkit-user-select: 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));
|
|
}
|