700 lines
44 KiB
CSS
700 lines
44 KiB
CSS
.spectrum-ActionButton {
|
|
--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-ActionButton:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.spectrum-ActionButton::-moz-focus-inner {
|
|
border: 0;
|
|
border-style: none;
|
|
padding: 0;
|
|
margin-top: -2px;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.spectrum-ActionButton:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.spectrum-ActionButton .spectrum-Icon {
|
|
max-height: 100%;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
a.spectrum-ActionButton {
|
|
-webkit-appearance: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.spectrum-ActionButton-label {
|
|
-ms-flex-item-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.spectrum-ActionButton-label:empty {
|
|
display: none;
|
|
}
|
|
|
|
.spectrum-ActionButton--sizeS {
|
|
--spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-s-quiet-border-size, var(--spectrum-alias-border-size-thin));
|
|
--spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-s-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
--spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-s-quiet-text-font-weight, var(--spectrum-alias-body-text-font-weight));
|
|
--spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-s-quiet-text-size, var(--spectrum-alias-item-text-size-s));
|
|
--spectrum-actionbutton-border-size: var(--spectrum-actionbutton-s-border-size, var(--spectrum-alias-border-size-thin));
|
|
--spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-s-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
--spectrum-actionbutton-min-width: var(--spectrum-actionbutton-s-min-width, var(--spectrum-global-dimension-size-400));
|
|
--spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-s-text-font-weight, var(--spectrum-alias-body-text-font-weight));
|
|
--spectrum-actionbutton-text-line-height: var(--spectrum-actionbutton-s-text-line-height, var(--spectrum-alias-component-text-line-height));
|
|
--spectrum-actionbutton-text-size: var(--spectrum-actionbutton-s-text-size, var(--spectrum-alias-item-text-size-s));
|
|
--spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-s-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-s));
|
|
--spectrum-actionbutton-height: var(--spectrum-actionbutton-s-height, var(--spectrum-alias-item-height-s));
|
|
--spectrum-actionbutton-padding-left: var(--spectrum-actionbutton-s-padding-left, var(--spectrum-alias-item-workflow-padding-left-s));
|
|
--spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-s-icononly-padding-left, var(--spectrum-alias-item-icononly-padding-s));
|
|
--spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-s-icononly-padding-right, var(--spectrum-alias-item-icononly-padding-s));
|
|
--spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-s-textonly-padding-left, var(--spectrum-alias-item-padding-s));
|
|
--spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-s-textonly-padding-right, var(--spectrum-alias-item-padding-s));
|
|
--spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-25);
|
|
--spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-25);
|
|
}
|
|
|
|
.spectrum-ActionButton--sizeM {
|
|
--spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-m-quiet-border-size, var(--spectrum-alias-border-size-thin));
|
|
--spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-m-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
--spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-m-quiet-text-font-weight, var(--spectrum-alias-body-text-font-weight));
|
|
--spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-m-quiet-text-size, var(--spectrum-alias-item-text-size-m));
|
|
--spectrum-actionbutton-border-size: var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin));
|
|
--spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
--spectrum-actionbutton-min-width: var(--spectrum-actionbutton-m-min-width, var(--spectrum-global-dimension-size-400));
|
|
--spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-m-text-font-weight, var(--spectrum-alias-body-text-font-weight));
|
|
--spectrum-actionbutton-text-line-height: var(--spectrum-actionbutton-m-text-line-height, var(--spectrum-alias-component-text-line-height));
|
|
--spectrum-actionbutton-text-size: var(--spectrum-actionbutton-m-text-size, var(--spectrum-alias-item-text-size-m));
|
|
--spectrum-actionbutton-height: var(--spectrum-actionbutton-m-height, var(--spectrum-alias-item-height-m));
|
|
--spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-m-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-m));
|
|
--spectrum-actionbutton-padding-left: var(--spectrum-actionbutton-m-padding-left, var(--spectrum-alias-item-workflow-padding-left-m));
|
|
--spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-m-icononly-padding-left, var(--spectrum-alias-item-icononly-padding-m));
|
|
--spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-m-icononly-padding-right, var(--spectrum-alias-item-icononly-padding-m));
|
|
--spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-m-textonly-padding-left, var(--spectrum-alias-item-padding-m));
|
|
--spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-m-textonly-padding-right, var(--spectrum-alias-item-padding-m));
|
|
--spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-40);
|
|
--spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-40);
|
|
}
|
|
|
|
.spectrum-ActionButton--sizeL {
|
|
--spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-l-quiet-border-size, var(--spectrum-alias-border-size-thin));
|
|
--spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-l-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
--spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-l-quiet-text-font-weight, var(--spectrum-alias-body-text-font-weight));
|
|
--spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-l-quiet-text-size, var(--spectrum-alias-item-text-size-l));
|
|
--spectrum-actionbutton-border-size: var(--spectrum-actionbutton-l-border-size, var(--spectrum-alias-border-size-thin));
|
|
--spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-l-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
--spectrum-actionbutton-min-width: var(--spectrum-actionbutton-l-min-width, var(--spectrum-global-dimension-size-400));
|
|
--spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-l-text-font-weight, var(--spectrum-alias-body-text-font-weight));
|
|
--spectrum-actionbutton-text-line-height: var(--spectrum-actionbutton-l-text-line-height, var(--spectrum-alias-component-text-line-height));
|
|
--spectrum-actionbutton-text-size: var(--spectrum-actionbutton-l-text-size, var(--spectrum-alias-item-text-size-l));
|
|
--spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-l-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-l));
|
|
--spectrum-actionbutton-height: var(--spectrum-actionbutton-l-height, var(--spectrum-alias-item-height-l));
|
|
--spectrum-actionbutton-padding-left: var(--spectrum-actionbutton-l-padding-left, var(--spectrum-alias-item-workflow-padding-left-l));
|
|
--spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-l-icononly-padding-left, var(--spectrum-alias-item-icononly-padding-l));
|
|
--spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-l-icononly-padding-right, var(--spectrum-alias-item-icononly-padding-l));
|
|
--spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-l-textonly-padding-left, var(--spectrum-alias-item-padding-l));
|
|
--spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-l-textonly-padding-right, var(--spectrum-alias-item-padding-l));
|
|
--spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-50);
|
|
--spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-50);
|
|
}
|
|
|
|
.spectrum-ActionButton--sizeXL {
|
|
--spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-xl-quiet-border-size, var(--spectrum-alias-border-size-thin));
|
|
--spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-xl-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
--spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-xl-quiet-text-font-weight, var(--spectrum-alias-body-text-font-weight));
|
|
--spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-xl-quiet-text-size, var(--spectrum-alias-item-text-size-xl));
|
|
--spectrum-actionbutton-border-size: var(--spectrum-actionbutton-xl-border-size, var(--spectrum-alias-border-size-thin));
|
|
--spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-xl-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
--spectrum-actionbutton-min-width: var(--spectrum-actionbutton-xl-min-width, var(--spectrum-global-dimension-size-400));
|
|
--spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-xl-text-font-weight, var(--spectrum-alias-body-text-font-weight));
|
|
--spectrum-actionbutton-text-line-height: var(--spectrum-actionbutton-xl-text-line-height, var(--spectrum-alias-component-text-line-height));
|
|
--spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-xl-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-l));
|
|
--spectrum-actionbutton-text-size: var(--spectrum-actionbutton-xl-text-size, var(--spectrum-alias-item-text-size-xl));
|
|
--spectrum-actionbutton-height: var(--spectrum-actionbutton-xl-height, var(--spectrum-alias-item-height-xl));
|
|
--spectrum-actionbutton-padding-left: var(--spectrum-actionbutton-xl-padding-left, var(--spectrum-alias-item-workflow-padding-left-xl));
|
|
--spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-xl-icononly-padding-left, var(--spectrum-alias-item-icononly-padding-xl));
|
|
--spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-xl-icononly-padding-right, var(--spectrum-alias-item-icononly-padding-xl));
|
|
--spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-xl-textonly-padding-left, var(--spectrum-alias-item-padding-xl));
|
|
--spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-xl-textonly-padding-right, var(--spectrum-alias-item-padding-xl));
|
|
--spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-65);
|
|
--spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-65);
|
|
}
|
|
|
|
.spectrum-ActionButton {
|
|
--spectrum-actionbutton-padding-left-adjusted: calc(var(--spectrum-actionbutton-padding-left) - var(--spectrum-actionbutton-border-size));
|
|
--spectrum-actionbutton-textonly-padding-left-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-left) - var(--spectrum-actionbutton-border-size));
|
|
--spectrum-actionbutton-textonly-padding-right-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-right) - var(--spectrum-actionbutton-border-size));
|
|
--spectrum-actionbutton-icononly-padding-left-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-left) - var(--spectrum-actionbutton-border-size));
|
|
--spectrum-actionbutton-icononly-padding-right-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-right) - var(--spectrum-actionbutton-border-size));
|
|
}
|
|
|
|
[dir="ltr"] .spectrum-ActionButton {
|
|
padding-left: var(--spectrum-actionbutton-textonly-padding-left-adjusted);
|
|
padding-right: var(--spectrum-actionbutton-textonly-padding-right-adjusted);
|
|
}
|
|
|
|
[dir="rtl"] .spectrum-ActionButton {
|
|
padding-right: var(--spectrum-actionbutton-textonly-padding-left-adjusted);
|
|
padding-left: var(--spectrum-actionbutton-textonly-padding-right-adjusted);
|
|
}
|
|
|
|
.spectrum-ActionButton {
|
|
position: relative;
|
|
|
|
height: var(--spectrum-actionbutton-height);
|
|
min-width: var(--spectrum-actionbutton-min-width);
|
|
|
|
border-width: var(--spectrum-actionbutton-border-size);
|
|
border-radius: var(--spectrum-actionbutton-border-radius);
|
|
|
|
font-size: var(--spectrum-actionbutton-text-size);
|
|
font-weight: var(--spectrum-actionbutton-text-font-weight);
|
|
line-height: var(--spectrum-actionbutton-text-line-height);
|
|
}
|
|
|
|
[dir="ltr"] .spectrum-ActionButton .spectrum-Icon {
|
|
margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
|
|
}
|
|
|
|
[dir="rtl"] .spectrum-ActionButton .spectrum-Icon {
|
|
margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
|
|
}
|
|
|
|
[dir="ltr"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label {
|
|
padding-left: var(--spectrum-actionbutton-icon-gap);
|
|
}
|
|
|
|
[dir="rtl"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label {
|
|
padding-right: var(--spectrum-actionbutton-icon-gap);
|
|
}
|
|
|
|
[dir="ltr"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label {
|
|
padding-right: 0;
|
|
}
|
|
|
|
[dir="rtl"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.spectrum-ActionButton .spectrum-ActionButton-hold + .spectrum-Icon,
|
|
.spectrum-ActionButton .spectrum-Icon:only-child {
|
|
margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-icononly-padding-left-adjusted)));
|
|
margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-right-adjusted) - var(--spectrum-actionbutton-icononly-padding-right-adjusted)));
|
|
}
|
|
|
|
.spectrum-ActionButton-label {
|
|
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
[dir="ltr"] .spectrum-ActionButton-hold {
|
|
right: var(--spectrum-actionbutton-hold-icon-padding-right);
|
|
}
|
|
|
|
[dir="rtl"] .spectrum-ActionButton-hold {
|
|
left: var(--spectrum-actionbutton-hold-icon-padding-right);
|
|
}
|
|
|
|
[dir="rtl"] .spectrum-ActionButton-hold { transform: matrix(-1, 0, 0, 1, 0, 0) ; }
|
|
|
|
.spectrum-ActionButton-hold {
|
|
position: absolute;
|
|
bottom: var(--spectrum-actionbutton-hold-icon-padding-bottom);
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet {
|
|
border-width: var(--spectrum-actionbutton-quiet-border-size);
|
|
border-radius: var(--spectrum-actionbutton-quiet-border-radius);
|
|
|
|
font-size: var(--spectrum-actionbutton-quiet-text-size);
|
|
font-weight: var(--spectrum-actionbutton-quiet-text-font-weight);
|
|
}
|
|
|
|
.spectrum-ActionButton {
|
|
--spectrum-actionbutton-m-quiet-border-size-key-focus: 1px;
|
|
}
|
|
|
|
.spectrum-ActionButton {
|
|
background-color: var(--spectrum-actionbutton-m-background-color, var(--spectrum-global-color-gray-75));
|
|
border-color: var(--spectrum-actionbutton-m-border-color, var(--spectrum-alias-border-color));
|
|
color: var(--spectrum-actionbutton-m-text-color, var(--spectrum-alias-text-color));
|
|
}
|
|
|
|
.spectrum-ActionButton .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-icon-color, var(--spectrum-alias-icon-color));
|
|
}
|
|
|
|
.spectrum-ActionButton .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-hold-icon-color, var(--spectrum-alias-icon-color));
|
|
}
|
|
|
|
.spectrum-ActionButton:hover {
|
|
background-color: var(--spectrum-actionbutton-m-background-color-hover, var(--spectrum-global-color-gray-50));
|
|
border-color: var(--spectrum-actionbutton-m-border-color-hover, var(--spectrum-alias-border-color-hover));
|
|
color: var(--spectrum-actionbutton-m-text-color-hover, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton:hover .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-icon-color-hover, var(--spectrum-alias-icon-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton:hover .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-hold-icon-color-hover, var(--spectrum-alias-icon-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton.focus-ring {
|
|
background-color: var(--spectrum-actionbutton-m-background-color-key-focus, var(--spectrum-global-color-gray-50));
|
|
border-color: var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
box-shadow: 0 0 0 var(--spectrum-actionbutton-m-quiet-border-size-key-focus, var(--spectrum-alias-border-size-thick)) var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
color: var(--spectrum-actionbutton-m-text-color-key-focus, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton.focus-ring:active {
|
|
border-color: var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
}
|
|
|
|
.spectrum-ActionButton.focus-ring .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-icon-color-key-focus, var(--spectrum-alias-icon-color-focus));
|
|
}
|
|
|
|
.spectrum-ActionButton.focus-ring .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-hold-icon-color-key-focus, var(--spectrum-alias-icon-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton:active {
|
|
background-color: var(--spectrum-actionbutton-m-background-color-down, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-border-color-down, var(--spectrum-alias-border-color-down));
|
|
color: var(--spectrum-actionbutton-m-text-color-down, var(--spectrum-alias-text-color-down));
|
|
}
|
|
|
|
.spectrum-ActionButton:active .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-hold-icon-color-down, var(--spectrum-alias-icon-color-down));
|
|
}
|
|
|
|
.spectrum-ActionButton:disabled,
|
|
.spectrum-ActionButton.is-disabled {
|
|
background-color: var(--spectrum-actionbutton-m-background-color-disabled, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-border-color-disabled, var(--spectrum-alias-border-color-disabled));
|
|
color: var(--spectrum-actionbutton-m-text-color-disabled, var(--spectrum-alias-text-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton:disabled .spectrum-Icon, .spectrum-ActionButton.is-disabled .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton:disabled .spectrum-ActionButton-hold, .spectrum-ActionButton.is-disabled .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-hold-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected {
|
|
background-color: var(--spectrum-actionbutton-m-background-color-selected, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-border-color-selected, var(--spectrum-alias-border-color));
|
|
color: var(--spectrum-actionbutton-m-text-color-selected, var(--spectrum-alias-text-color));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-icon-color-selected, var(--spectrum-alias-icon-color));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected.focus-ring {
|
|
background-color: var(--spectrum-actionbutton-m-background-color-selected-key-focus, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-border-color-selected-key-focus, var(--spectrum-alias-border-color-focus));
|
|
color: var(--spectrum-actionbutton-m-text-color-selected-key-focus, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected.focus-ring:active {
|
|
border-color: var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-icon-color-selected-key-focus, var(--spectrum-alias-icon-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected:hover {
|
|
background-color: var(--spectrum-actionbutton-m-background-color-selected-hover, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-border-color-selected-hover, var(--spectrum-alias-border-color-hover));
|
|
color: var(--spectrum-actionbutton-m-text-color-selected-hover, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected:hover .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-icon-color-selected-hover, var(--spectrum-alias-icon-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected:active {
|
|
background-color: var(--spectrum-actionbutton-m-background-color-selected-down, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-border-color-selected-down, var(--spectrum-alias-border-color-down));
|
|
color: var(--spectrum-actionbutton-m-text-color-selected-down, var(--spectrum-alias-text-color-down));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected:active .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-icon-color-selected-down, var(--spectrum-alias-icon-color-down));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected:disabled,
|
|
.spectrum-ActionButton.is-selected.is-disabled {
|
|
background-color: var(--spectrum-actionbutton-m-background-color-selected-disabled, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-border-color-selected-disabled, var(--spectrum-alias-border-color-disabled));
|
|
color: var(--spectrum-actionbutton-m-text-color-selected-disabled, var(--spectrum-alias-text-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton.is-selected.is-disabled .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-icon-color-selected-disabled, var(--spectrum-alias-icon-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color, var(--spectrum-global-color-gray-75));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color, var(--spectrum-alias-border-color));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color, var(--spectrum-alias-text-color));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-emphasized-icon-color, var(--spectrum-alias-icon-color));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color, var(--spectrum-alias-icon-color));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.is-selected .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-selected, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.is-selected:hover .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-hover, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized:hover {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-hover, var(--spectrum-global-color-gray-50));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-hover, var(--spectrum-alias-border-color-hover));
|
|
box-shadow: none;
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-hover, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized:hover .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-emphasized-icon-color-hover, var(--spectrum-alias-icon-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized:hover .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-hover, var(--spectrum-alias-icon-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.focus-ring {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-key-focus, var(--spectrum-global-color-gray-50));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-key-focus, var(--spectrum-alias-border-color-hover));
|
|
box-shadow: 0 0 0 var(--spectrum-actionbutton-m-quiet-border-size-key-focus, var(--spectrum-alias-border-size-thick)) var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-key-focus, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.focus-ring .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-emphasized-icon-color-key-focus, var(--spectrum-alias-icon-color-focus));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.focus-ring .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-key-focus, var(--spectrum-alias-icon-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.is-active {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-down, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-down, var(--spectrum-alias-border-color-down));
|
|
box-shadow: none;
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-down, var(--spectrum-alias-text-color-down));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.is-active .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-down, var(--spectrum-alias-icon-color-down));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized:disabled,
|
|
.spectrum-ActionButton--emphasized.is-disabled {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-disabled, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-disabled, var(--spectrum-alias-border-color-disabled));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-disabled, var(--spectrum-alias-text-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized:disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.is-disabled .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-emphasized-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized:disabled .spectrum-ActionButton-hold, .spectrum-ActionButton--emphasized.is-disabled .spectrum-ActionButton-hold {
|
|
color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected,
|
|
.spectrum-ActionButton--emphasized.is-selected {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected, var(--spectrum-semantic-cta-color-background-default));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected, var(--spectrum-semantic-cta-color-background-default));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-selected, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring, .spectrum-ActionButton--emphasized.is-selected.focus-ring {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-key-focus, var(--spectrum-semantic-cta-color-background-key-focus));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-key-focus, var(--spectrum-semantic-cta-color-background-key-focus));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-key-focus, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected.focus-ring .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected-key-focus, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover, .spectrum-ActionButton--emphasized.is-selected:hover {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-hover, var(--spectrum-semantic-cta-color-background-hover));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-hover, var(--spectrum-semantic-cta-color-background-hover));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-hover, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected:hover .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected-hover, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active, .spectrum-ActionButton--emphasized.is-selected.is-active {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-down, var(--spectrum-semantic-cta-color-background-down));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-down, var(--spectrum-semantic-cta-color-background-down));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-down, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected.is-active .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected-down, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled,
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled,
|
|
.spectrum-ActionButton--emphasized.is-selected:disabled,
|
|
.spectrum-ActionButton--emphasized.is-selected.is-disabled {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-disabled, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-disabled, var(--spectrum-alias-border-color-disabled));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-disabled, var(--spectrum-alias-text-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected.is-disabled .spectrum-Icon {
|
|
color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected-disabled, var(--spectrum-alias-icon-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color, var(--spectrum-alias-background-color-transparent));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color, var(--spectrum-alias-border-color-transparent));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color, var(--spectrum-alias-text-color));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet:hover {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color-hover, var(--spectrum-alias-background-color-transparent));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color-hover, var(--spectrum-alias-border-color-transparent));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color-hover, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet.focus-ring {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color-key-focus, var(--spectrum-alias-background-color-transparent));
|
|
box-shadow: 0 0 0 var(--spectrum-actionbutton-m-quiet-border-size-key-focus, var(--spectrum-alias-border-size-thick)) var(--spectrum-actionbutton-m-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color-key-focus, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet:active {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color-down, var(--spectrum-global-color-gray-300));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color-down, var(--spectrum-alias-border-color-transparent));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color-down, var(--spectrum-alias-text-color-down));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet:disabled,
|
|
.spectrum-ActionButton--quiet.is-disabled {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color-disabled, var(--spectrum-alias-background-color-transparent));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color-disabled, var(--spectrum-alias-border-color-transparent));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color-disabled, var(--spectrum-alias-text-color-disabled));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet.is-selected {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected, var(--spectrum-alias-border-color-transparent));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color-selected, var(--spectrum-alias-text-color));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet.is-selected.focus-ring {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected-key-focus, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected-key-focus, var(--spectrum-alias-border-color-transparent));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color-selected-key-focus, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet.is-selected:hover {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected-hover, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected-hover, var(--spectrum-alias-border-color-transparent));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color-selected-hover, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet.is-selected:active {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected-down, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected-down, var(--spectrum-alias-border-color-transparent));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color-selected-down, var(--spectrum-alias-text-color-down));
|
|
}
|
|
|
|
.spectrum-ActionButton--quiet.is-selected:disabled,
|
|
.spectrum-ActionButton--quiet.is-selected.is-disabled {
|
|
background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected-disabled, var(--spectrum-global-color-gray-200));
|
|
border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected-disabled, var(--spectrum-alias-border-color-transparent));
|
|
color: var(--spectrum-actionbutton-m-quiet-text-color-selected-disabled, var(--spectrum-alias-text-color-disabled));
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.spectrum-ActionButton {
|
|
forced-color-adjust: none;
|
|
--spectrum-actionbutton-m-background-color: ButtonFace;
|
|
--spectrum-actionbutton-m-background-color-disabled: ButtonFace;
|
|
--spectrum-actionbutton-m-background-color-down: ButtonFace;
|
|
--spectrum-actionbutton-m-background-color-hover: ButtonFace;
|
|
--spectrum-actionbutton-m-background-color-key-focus: ButtonFace;
|
|
--spectrum-actionbutton-m-background-color-selected: Highlight;
|
|
--spectrum-actionbutton-m-background-color-selected-disabled: ButtonFace;
|
|
--spectrum-actionbutton-m-background-color-selected-down: Highlight;
|
|
--spectrum-actionbutton-m-background-color-selected-hover: Highlight;
|
|
--spectrum-actionbutton-m-background-color-selected-key-focus: Highlight;
|
|
--spectrum-actionbutton-m-border-color: ButtonText;
|
|
--spectrum-actionbutton-m-border-color-disabled: GrayText;
|
|
--spectrum-actionbutton-m-border-color-down: Highlight;
|
|
--spectrum-actionbutton-m-border-color-hover: Highlight;
|
|
--spectrum-actionbutton-m-border-color-key-focus: ButtonText;
|
|
--spectrum-actionbutton-m-border-color-selected: HighlightText;
|
|
--spectrum-actionbutton-m-border-color-selected-disabled: GrayText;
|
|
--spectrum-actionbutton-m-border-color-selected-down: HighlightText;
|
|
--spectrum-actionbutton-m-border-color-selected-hover: HighlightText;
|
|
--spectrum-actionbutton-m-border-color-selected-key-focus: ButtonText;
|
|
--spectrum-actionbutton-m-emphasized-background-color: ButtonFace;
|
|
--spectrum-actionbutton-m-emphasized-background-color-disabled: ButtonFace;
|
|
--spectrum-actionbutton-m-emphasized-background-color-down: Highlight;
|
|
--spectrum-actionbutton-m-emphasized-background-color-hover: Highlight;
|
|
--spectrum-actionbutton-m-emphasized-background-color-key-focus: ButtonFace;
|
|
--spectrum-actionbutton-m-emphasized-background-color-selected: Highlight;
|
|
--spectrum-actionbutton-m-emphasized-background-color-selected-disabled: ButtonFace;
|
|
--spectrum-actionbutton-m-emphasized-background-color-selected-down: Highlight;
|
|
--spectrum-actionbutton-m-emphasized-background-color-selected-hover: Highlight;
|
|
--spectrum-actionbutton-m-emphasized-background-color-selected-key-focus: Highlight;
|
|
--spectrum-actionbutton-m-emphasized-border-color: ButtonText;
|
|
--spectrum-actionbutton-m-emphasized-border-color-disabled: GrayText;
|
|
--spectrum-actionbutton-m-emphasized-border-color-down: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-border-color-hover: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-border-color-key-focus: ButtonText;
|
|
--spectrum-actionbutton-m-emphasized-border-color-selected: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-border-color-selected-disabled: GrayText;
|
|
--spectrum-actionbutton-m-emphasized-border-color-selected-down: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-border-color-selected-hover: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-border-color-selected-key-focus: ButtonText;
|
|
--spectrum-actionbutton-m-emphasized-text-color: ButtonText;
|
|
--spectrum-actionbutton-m-emphasized-text-color-disabled: GrayText;
|
|
--spectrum-actionbutton-m-emphasized-text-color-down: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-text-color-hover: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-text-color-key-focus: ButtonText;
|
|
--spectrum-actionbutton-m-emphasized-text-color-selected: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-text-color-selected-disabled: GrayText;
|
|
--spectrum-actionbutton-m-emphasized-text-color-selected-down: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-text-color-selected-hover: HighlightText;
|
|
--spectrum-actionbutton-m-emphasized-text-color-selected-key-focus: HighlightText;
|
|
--spectrum-actionbutton-m-quiet-background-color: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-background-color-disabled: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-background-color-down: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-background-color-hover: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-background-color-key-focus: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-background-color-selected: Highlight;
|
|
--spectrum-actionbutton-m-quiet-background-color-selected-disabled: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-background-color-selected-down: Highlight;
|
|
--spectrum-actionbutton-m-quiet-background-color-selected-hover: Highlight;
|
|
--spectrum-actionbutton-m-quiet-background-color-selected-key-focus: Highlight;
|
|
--spectrum-actionbutton-m-quiet-border-color: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-border-color-disabled: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-border-color-down: Highlight;
|
|
--spectrum-actionbutton-m-quiet-border-color-hover: Highlight;
|
|
--spectrum-actionbutton-m-quiet-border-color-key-focus: ButtonText;
|
|
--spectrum-actionbutton-m-quiet-border-color-selected: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-border-color-selected-disabled: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-border-color-selected-down: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-border-color-selected-hover: ButtonFace;
|
|
--spectrum-actionbutton-m-quiet-border-color-selected-key-focus: ButtonText;
|
|
--spectrum-actionbutton-m-quiet-text-color: ButtonText;
|
|
--spectrum-actionbutton-m-quiet-text-color-disabled: GrayText;
|
|
--spectrum-actionbutton-m-quiet-text-color-down: ButtonText;
|
|
--spectrum-actionbutton-m-quiet-text-color-hover: ButtonText;
|
|
--spectrum-actionbutton-m-quiet-text-color-key-focus: ButtonText;
|
|
--spectrum-actionbutton-m-quiet-text-color-selected: HighlightText;
|
|
--spectrum-actionbutton-m-quiet-text-color-selected-disabled: GrayText;
|
|
--spectrum-actionbutton-m-quiet-text-color-selected-down: HighlightText;
|
|
--spectrum-actionbutton-m-quiet-text-color-selected-hover: HighlightText;
|
|
--spectrum-actionbutton-m-quiet-text-color-selected-key-focus: HighlightText;
|
|
--spectrum-actionbutton-m-text-color: ButtonText;
|
|
--spectrum-actionbutton-m-text-color-disabled: GrayText;
|
|
--spectrum-actionbutton-m-text-color-down: ButtonText;
|
|
--spectrum-actionbutton-m-text-color-hover: ButtonText;
|
|
--spectrum-actionbutton-m-text-color-key-focus: ButtonText;
|
|
--spectrum-actionbutton-m-text-color-selected: HighlightText;
|
|
--spectrum-actionbutton-m-text-color-selected-disabled: GrayText;
|
|
--spectrum-actionbutton-m-text-color-selected-down: HighlightText;
|
|
--spectrum-actionbutton-m-text-color-selected-hover: HighlightText;
|
|
--spectrum-actionbutton-m-text-color-selected-key-focus: HighlightText;
|
|
--spectrum-actionbutton-m-quiet-border-size-key-focus: 3px;
|
|
}
|
|
.spectrum-ActionButton.spectrum-ActionButton--quiet.spectrum-ActionButton--emphasized:not(:disabled, .is-disabled):hover {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-hover, var(--spectrum-semantic-cta-color-background-hover));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-hover, var(--spectrum-semantic-cta-color-background-hover));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-hover, var(--spectrum-global-color-static-white));
|
|
}
|
|
|
|
.spectrum-ActionButton.spectrum-ActionButton--quiet.spectrum-ActionButton--emphasized:not(:disabled, .is-disabled).is-active {
|
|
background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-down, var(--spectrum-semantic-cta-color-background-down));
|
|
border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-down, var(--spectrum-semantic-cta-color-background-down));
|
|
color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-down, var(--spectrum-global-color-static-white));
|
|
}
|
|
}
|