mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
2ff14e4224
- Introduced new styles for BDS link icons, including hover and focus states. - Updated existing link styles to exclude BDS links from certain color and hover effects. - Ensured consistent styling across light and dark themes for BDS links. - Refactored landing page link styles to accommodate new BDS link classes.
125 lines
2.9 KiB
SCSS
125 lines
2.9 KiB
SCSS
// Link Arrow Icon Styles and Animations
|
|
// -----------------------------------------------------------------------------
|
|
// Styles for link arrow icons with hover animations that transform arrow to chevron
|
|
// Animation: 150ms with custom cubic-bezier per Figma specs
|
|
|
|
@import "../../../styles/_colors.scss";
|
|
|
|
// Animation timing per Figma
|
|
$bds-link-transition-duration: 150ms;
|
|
$bds-link-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
|
|
|
|
// Base styles for link icons
|
|
.bds-link-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
|
|
svg {
|
|
display: block;
|
|
|
|
path {
|
|
stroke: currentColor; // Inherits color from parent link
|
|
}
|
|
|
|
.arrow-horizontal {
|
|
transition: transform $bds-link-transition-duration $bds-link-transition-timing;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Internal arrow: horizontal line shrinks from left toward right (toward the chevron)
|
|
.bds-link-icon--internal svg .arrow-horizontal {
|
|
transform-origin: right center;
|
|
}
|
|
|
|
// External arrow: diagonal line shrinks toward top-right corner (leaving just the bracket)
|
|
.bds-link-icon--external svg .arrow-horizontal {
|
|
transform-origin: 19px 2px; // Top-right corner where diagonal starts
|
|
}
|
|
|
|
// Hover state - shrink/hide the horizontal line to create chevron effect
|
|
// Applies to both internal and external icons when not disabled
|
|
|
|
// Internal: scale the horizontal line from right
|
|
a:hover .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal,
|
|
a:focus .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal {
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
// External: scale the diagonal line toward the corner (uniform scale for diagonal)
|
|
a:hover .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal,
|
|
a:focus .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal {
|
|
transform: scale(0);
|
|
}
|
|
|
|
// Disabled state
|
|
.bds-link-icon--disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
|
|
svg {
|
|
path {
|
|
// Disabled icons use gray color from theme
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.arrow-horizontal {
|
|
transition: none; // Disable animation when disabled
|
|
}
|
|
}
|
|
}
|
|
|
|
// Theme-specific disabled colors
|
|
html.light,
|
|
.light {
|
|
.bds-link-icon--disabled svg path {
|
|
stroke: $gray-400;
|
|
}
|
|
}
|
|
|
|
html.dark,
|
|
.dark,
|
|
html:not(.light) {
|
|
.bds-link-icon--disabled svg path {
|
|
stroke: $gray-500;
|
|
}
|
|
}
|
|
|
|
// Size variants for internal arrows (wider aspect ratio)
|
|
.bds-link-icon--internal {
|
|
&.bds-link-icon--small {
|
|
width: 15px;
|
|
height: 14px;
|
|
}
|
|
|
|
&.bds-link-icon--medium {
|
|
width: 17px;
|
|
height: 16px;
|
|
}
|
|
|
|
&.bds-link-icon--large {
|
|
width: 26px;
|
|
height: 22px;
|
|
}
|
|
}
|
|
|
|
// Size variants for external arrows (square aspect ratio)
|
|
.bds-link-icon--external {
|
|
&.bds-link-icon--small {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
&.bds-link-icon--medium {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
&.bds-link-icon--large {
|
|
width: 21px;
|
|
height: 21px;
|
|
}
|
|
}
|