ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-12-06 17:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

add proper breakpoint sizing

Browse Source
This commit is contained in:
akcodez
2025-12-02 12:23:35 -08:00
parent c01749eba2
commit 621db81c7d
3 changed files with 133 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
shared/components/Link/_link-icons.scss
View File

@@ -88,37 +88,70 @@ html:not(.light) {
} }
// Size variants for internal arrows (wider aspect ratio) // Size variants for internal arrows (wider aspect ratio)
// Responsive: Mobile/Tablet (xs-md, lg) → Desktop (xl)
// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
.bds-link-icon--internal { .bds-link-icon--internal {
&.bds-link-icon--small { &.bds-link-icon--small {
width: 15px; // Mobile/Tablet: 14x13
height: 14px; width: 14px;
height: 13px;
// Desktop (xl): 15x14
@include media-breakpoint-up(xl) {
width: 15px;
height: 14px;
}
} }
&.bds-link-icon--medium { &.bds-link-icon--medium {
// Mobile/Tablet: 17x14
width: 17px; width: 17px;
height: 16px; height: 14px;
// Desktop (xl): 17x16
@include media-breakpoint-up(xl) {
height: 16px;
}
} }
&.bds-link-icon--large { &.bds-link-icon--large {
width: 26px; // Mobile/Tablet: 20x16
height: 22px; width: 20px;
height: 16px;
// Desktop (xl): 26x22
@include media-breakpoint-up(xl) {
width: 26px;
height: 22px;
}
} }
} }
// Size variants for external arrows (square aspect ratio) // Size variants for external arrows (square aspect ratio)
// Responsive: Mobile/Tablet (xs-md, lg) → Desktop (xl)
// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
.bds-link-icon--external { .bds-link-icon--external {
&.bds-link-icon--small { &.bds-link-icon--small {
// Same at all breakpoints
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
&.bds-link-icon--medium { &.bds-link-icon--medium {
// Same at all breakpoints
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&.bds-link-icon--large { &.bds-link-icon--large {
width: 21px; // Mobile/Tablet: 17x17
height: 21px; width: 17px;
height: 17px;
// Desktop (xl): 21x21
@include media-breakpoint-up(xl) {
width: 21px;
height: 21px;
}
} }
} }

41
shared/components/Link/_link.scss
View File

@@ -30,23 +30,52 @@
} }
} }
// Size variants // Size variants - Mobile First (xs-md base)
// Typography specs from Figma: Desktop (xl), Tablet (lg), Mobile (xs-md)
// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
.bds-link--small { .bds-link--small {
// Mobile/Tablet: 14px/20.1px
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 20.1px;
letter-spacing: 0;
gap: 6px; gap: 6px;
// Desktop (xl): 16px/23.2px
@include media-breakpoint-up(xl) {
font-size: 16px;
line-height: 23.2px;
gap: 8px;
}
} }
.bds-link--medium { .bds-link--medium {
// Mobile/Tablet: 16px/23.2px
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 23.2px;
letter-spacing: 0;
gap: 8px; gap: 8px;
// Desktop (xl): 18px/26.1px
@include media-breakpoint-up(xl) {
font-size: 18px;
line-height: 26.1px;
letter-spacing: -0.5px;
}
} }
.bds-link--large { .bds-link--large {
font-size: 20px; // Mobile/Tablet: 18px/30px
line-height: 1.5; font-size: 18px;
gap: 10px; line-height: 30px;
letter-spacing: -0.5px;
gap: 24px;
// Desktop (xl): 24px/30px
@include media-breakpoint-up(xl) {
font-size: 24px;
letter-spacing: 0;
}
} }
// Link color states (Light Mode - per Figma specs) // Link color states (Light Mode - per Figma specs)

70
static/css/devportal2024-v1.css
View File

@@ -14144,16 +14144,33 @@ html:not(.light) .bds-link-icon--disabled svg path {
} }
.bds-link-icon--internal.bds-link-icon--small { .bds-link-icon--internal.bds-link-icon--small {
width: 15px; width: 14px;
height: 14px; height: 13px;
}
@media (min-width: 1280px) {
.bds-link-icon--internal.bds-link-icon--small {
width: 15px;
height: 14px;
}
} }
.bds-link-icon--internal.bds-link-icon--medium { .bds-link-icon--internal.bds-link-icon--medium {
width: 17px; width: 17px;
height: 16px; height: 14px;
}
@media (min-width: 1280px) {
.bds-link-icon--internal.bds-link-icon--medium {
height: 16px;
}
} }
.bds-link-icon--internal.bds-link-icon--large { .bds-link-icon--internal.bds-link-icon--large {
width: 26px; width: 20px;
height: 22px; height: 16px;
}
@media (min-width: 1280px) {
.bds-link-icon--internal.bds-link-icon--large {
width: 26px;
height: 22px;
}
} }
.bds-link-icon--external.bds-link-icon--small { .bds-link-icon--external.bds-link-icon--small {
@@ -14165,8 +14182,14 @@ html:not(.light) .bds-link-icon--disabled svg path {
height: 16px; height: 16px;
} }
.bds-link-icon--external.bds-link-icon--large { .bds-link-icon--external.bds-link-icon--large {
width: 21px; width: 17px;
height: 21px; height: 17px;
}
@media (min-width: 1280px) {
.bds-link-icon--external.bds-link-icon--large {
width: 21px;
height: 21px;
}
} }
.bds-link { .bds-link {
@@ -14188,20 +14211,43 @@ html:not(.light) .bds-link-icon--disabled svg path {
.bds-link--small { .bds-link--small {
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 20.1px;
letter-spacing: 0;
gap: 6px; gap: 6px;
} }
@media (min-width: 1280px) {
.bds-link--small {
font-size: 16px;
line-height: 23.2px;
gap: 8px;
}
}
.bds-link--medium { .bds-link--medium {
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 23.2px;
letter-spacing: 0;
gap: 8px; gap: 8px;
} }
@media (min-width: 1280px) {
.bds-link--medium {
font-size: 18px;
line-height: 26.1px;
letter-spacing: -0.5px;
}
}
.bds-link--large { .bds-link--large {
font-size: 20px; font-size: 18px;
line-height: 1.5; line-height: 30px;
gap: 10px; letter-spacing: -0.5px;
gap: 24px;
}
@media (min-width: 1280px) {
.bds-link--large {
font-size: 24px;
letter-spacing: 0;
}
} }
a.bds-link, a.bds-link,