@spectrum-css/link
Version:
The Spectrum CSS link component
83 lines (69 loc) • 3.63 kB
CSS
/*!
* Copyright 2024 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
/* Windows high contrast mode */
@media (forced-colors: active) {
.spectrum-Link {
--highcontrast-link-text-color: LinkText;
}
}
.spectrum-Link--secondary {
--mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
--mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
--mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
--mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
}
.spectrum-Link {
/* Remove the gray background on active links in IE 10. */
background-color: transparent;
/* Remove gaps in links underline in iOS 8+ and Safari 8+. */
text-decoration-skip: objects;
text-decoration: underline;
transition: color var(--mod-link-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
outline: none;
cursor: pointer;
/* @deprecated --mod-link-text-color-primary-default in favor of --mod-link-text-color */
color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))));
&:hover {
/* @deprecated --mod-link-text-color-primary-hover in favor of --mod-link-text-color-hover */
--mod-link-text-color: var(--mod-link-text-color-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover)));
}
&:active {
/* @deprecated --mod-link-text-color-primary-active in favor of --mod-link-text-color-active */
--mod-link-text-color: var(--mod-link-text-color-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down)));
}
&:focus-visible {
/* @deprecated --mod-link-text-color-primary-focus in favor of --mod-link-text-color-focus */
--mod-link-text-color: var(--mod-link-text-color-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus)));
text-decoration: underline;
text-decoration-style: double;
text-decoration-color: inherit;
}
}
.spectrum-Link--quiet {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.spectrum-Link--staticWhite {
--mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white));
--mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white));
--mod-link-text-color-active: var(--mod-link-text-color-white, var(--spectrum-white));
--mod-link-text-color-focus: var(--mod-link-text-color-white, var(--spectrum-white));
}
.spectrum-Link--staticBlack {
--mod-link-text-color: var(--mod-link-text-color-black, var(--spectrum-black));
--mod-link-text-color-hover: var(--mod-link-text-color-black, var(--spectrum-black));
--mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black));
--mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black));
}