Marko Lisica
fb3932f37a
<!-- Add the related story/sub-task/bug number, like Resolves #123, or remove if NA --> **Related issue:** Resolves #35328 # Checklist for submitter If some of the following don't apply, delete the relevant line. - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files) for more information. ## Testing - [x] Added/updated automated tests - [x] QA'd all new/changed functionality manually <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved link hover and `:focus-visible` underline/outline behavior for more consistent accessibility across tables, buttons, and modals. * Fixed script name hover underline clipping in the run script modal. * **Style** * Refreshed `CustomLink` styling with an emphasized variant and improved underline behavior, plus updated related link/table/button styling for a unified look. * Updated “Connect Fleet” info-banner messaging and CTAs for calendar and conditional access automations; refreshed “No scripts available” empty state. * **Tests** * Updated modal tests to match revised link text and accessible names. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
136 lines
3.0 KiB
SCSS
136 lines
3.0 KiB
SCSS
.custom-link {
|
|
@include link;
|
|
|
|
font-weight: $regular;
|
|
text-decoration: underline;
|
|
text-decoration-color: $ui-fleet-black-75;
|
|
text-underline-offset: 3px;
|
|
|
|
&:hover {
|
|
text-decoration-color: $core-fleet-black;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
.external-link-icon__outline {
|
|
fill: $core-fleet-black;
|
|
stroke: $core-fleet-black;
|
|
}
|
|
.external-link-icon__arrow {
|
|
stroke: $core-fleet-white;
|
|
}
|
|
}
|
|
|
|
// Non-multiline links lay out the icon next to the text on a single line.
|
|
&:not(.custom-link--multiline) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: $pad-xsmall;
|
|
}
|
|
|
|
&__no-wrap {
|
|
white-space: nowrap;
|
|
display: inline-flex;
|
|
gap: $pad-xsmall;
|
|
}
|
|
|
|
&__last-word {
|
|
text-decoration: underline;
|
|
line-height: normal;
|
|
}
|
|
|
|
&:focus-visible &__last-word {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&--emphasized {
|
|
color: $core-fleet-green;
|
|
text-decoration-color: $core-fleet-green;
|
|
|
|
&:hover {
|
|
color: $core-fleet-green-over;
|
|
text-decoration-color: $core-fleet-green-over;
|
|
}
|
|
|
|
&:focus-visible {
|
|
color: $core-fleet-green-over;
|
|
text-decoration-color: $core-fleet-green-over;
|
|
text-decoration-line: none;
|
|
}
|
|
}
|
|
|
|
// Variants
|
|
&--tooltip-link,
|
|
&--banner-link,
|
|
&--flash-message-link {
|
|
color: inherit; // Overrides fleet blue link color with parent color
|
|
}
|
|
|
|
&--tooltip-link,
|
|
&--flash-message-link {
|
|
font-size: inherit; // Overrides link default font size with parent tooltip/flash font size
|
|
}
|
|
|
|
&--tooltip-link {
|
|
// Use static (non-themed) colors so the underline and icon stay light on
|
|
// the always-dark tooltip background regardless of light/dark mode.
|
|
text-decoration-color: $static-white;
|
|
|
|
.external-link-icon__outline {
|
|
stroke: $static-white;
|
|
}
|
|
|
|
.external-link-icon__arrow {
|
|
stroke: $static-white;
|
|
}
|
|
|
|
// Inverse hover over effect
|
|
&:hover,
|
|
&:focus-visible {
|
|
color: rgba($static-white, 0.7);
|
|
text-decoration-color: rgba($static-white, 0.7);
|
|
|
|
// Dim the whole icon as one composited unit instead of applying alpha
|
|
// to fill/stroke separately — the stroke overlaps the fill's edge, so
|
|
// per-property alpha double-blends there and mismatches the interior.
|
|
.external-link-icon {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.external-link-icon__outline {
|
|
fill: $static-white;
|
|
stroke: $static-white;
|
|
}
|
|
|
|
.external-link-icon__arrow {
|
|
stroke: $tooltip-bg;
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
text-decoration: none;
|
|
outline-color: rgba($static-white, 0.7);
|
|
}
|
|
}
|
|
|
|
&--flash-message-link {
|
|
// Override the default hover colors (white arrow stroke, dark outline fill)
|
|
// which assume a dark background — flash messages use a light background.
|
|
&:hover,
|
|
&:focus-visible {
|
|
.external-link-icon__outline {
|
|
fill: $core-fleet-black;
|
|
stroke: $core-fleet-black;
|
|
}
|
|
|
|
.external-link-icon__arrow {
|
|
stroke: $core-fleet-white;
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|