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

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

@@ -88,37 +88,70 @@ html:not(.light) {
}
// 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--small {
// Mobile/Tablet: 14x13
width: 14px;
height: 13px;
// Desktop (xl): 15x14
@include media-breakpoint-up(xl) {
width: 15px;
height: 14px;
}
}
&.bds-link-icon--medium {
// Mobile/Tablet: 17x14
width: 17px;
height: 14px;
// Desktop (xl): 17x16
@include media-breakpoint-up(xl) {
height: 16px;
}
}
&.bds-link-icon--large {
// Mobile/Tablet: 20x16
width: 20px;
height: 16px;
// Desktop (xl): 26x22
@include media-breakpoint-up(xl) {
width: 26px;
height: 22px;
}
}
}
// 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--small {
// Same at all breakpoints
width: 14px;
height: 14px;
}
&.bds-link-icon--medium {
// Same at all breakpoints
width: 16px;
height: 16px;
}
&.bds-link-icon--large {
// Mobile/Tablet: 17x17
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 {
// Mobile/Tablet: 14px/20.1px
font-size: 14px;
line-height: 1.5;
line-height: 20.1px;
letter-spacing: 0;
gap: 6px;
// Desktop (xl): 16px/23.2px
@include media-breakpoint-up(xl) {
font-size: 16px;
line-height: 23.2px;
gap: 8px;
}
}
.bds-link--medium {
// Mobile/Tablet: 16px/23.2px
font-size: 16px;
line-height: 1.5;
line-height: 23.2px;
letter-spacing: 0;
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 {
font-size: 20px;
line-height: 1.5;
gap: 10px;
// Mobile/Tablet: 18px/30px
font-size: 18px;
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)

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

@@ -14143,18 +14143,35 @@ html:not(.light) .bds-link-icon--disabled svg path {
stroke: #838386;
}
.bds-link-icon--internal.bds-link-icon--small {
width: 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 {
width: 17px;
height: 14px;
}
@media (min-width: 1280px) {
.bds-link-icon--internal.bds-link-icon--medium {
height: 16px;
}
}
.bds-link-icon--internal.bds-link-icon--large {
width: 20px;
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 {
width: 14px;
@@ -14164,10 +14181,16 @@ html:not(.light) .bds-link-icon--disabled svg path {
width: 16px;
height: 16px;
}
.bds-link-icon--external.bds-link-icon--large {
width: 17px;
height: 17px;
}
@media (min-width: 1280px) {
.bds-link-icon--external.bds-link-icon--large {
width: 21px;
height: 21px;
}
}
.bds-link {
display: inline-flex;
@@ -14188,20 +14211,43 @@ html:not(.light) .bds-link-icon--disabled svg path {
.bds-link--small {
font-size: 14px;
line-height: 1.5;
line-height: 20.1px;
letter-spacing: 0;
gap: 6px;
}
@media (min-width: 1280px) {
.bds-link--small {
font-size: 16px;
line-height: 23.2px;
gap: 8px;
}
}
.bds-link--medium {
font-size: 16px;
line-height: 1.5;
line-height: 23.2px;
letter-spacing: 0;
gap: 8px;
}
@media (min-width: 1280px) {
.bds-link--medium {
font-size: 18px;
line-height: 26.1px;
letter-spacing: -0.5px;
}
}
.bds-link--large {
font-size: 20px;
line-height: 1.5;
gap: 10px;
font-size: 18px;
line-height: 30px;
letter-spacing: -0.5px;
gap: 24px;
}
@media (min-width: 1280px) {
.bds-link--large {
font-size: 24px;
letter-spacing: 0;
}
}
a.bds-link,