ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2026-07-30 18:40:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor button typography for responsiveness and consistency

Browse Source 
- Updated Button component styles to use responsive typography mixins for better adaptability across devices.
- Removed redundant media queries and adjusted font sizes and line heights for both button types.
- Ensured margin resets to maintain consistent spacing in various contexts.
- Enhanced CSS for improved readability and maintainability.
This commit is contained in:
akcodez
2026-01-05 12:44:14 -08:00
committed by Calvin Jhunjhuwala
parent 4b8286e510
commit efeecdcb3a
2 changed files with 58 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
shared/components/Button/Button.scss
View File

@@ -616,13 +616,12 @@ html.dark {
justify-content: center;
max-height: 40px;
// Typography - Label R token
font-family: 'Booton', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 23.2px;
letter-spacing: 0px;
// Typography - Label R token (responsive)
// - Desktop (lg+): 16px / 23.2px
// - Mobile/Tablet: 14px / 20.1px
@include type(label-r);
white-space: nowrap;
margin-bottom: 0; // Reset paragraph spacing from type mixin
// Border
border: none;
@@ -715,14 +714,6 @@ html.dark {
}
}
// ---------------------------------------------------------------------------
// Responsive Typography (<xl breakpoint)
// ---------------------------------------------------------------------------
@include media-breakpoint-down(xl) {
// Typography - Label R token (smaller screens)
font-size: 14px;
line-height: 20.1px;
}
}
// =============================================================================
@@ -1132,10 +1123,11 @@ html.dark {
border: none;
text-decoration: none;
// Typography - Body R token (different from Primary/Secondary)
font-size: 18px;
line-height: 26.1px;
letter-spacing: -0.5px;
// Typography - Body R token (responsive)
// - Desktop (lg+): 18px / 26.1px / -0.5px letter-spacing
// - Mobile/Tablet: 16px / 23.2px / 0px letter-spacing
@include type(body-r);
margin-bottom: 0; // Reset paragraph spacing from type mixin
// Desktop padding and gap (≥1024px)
padding: 8px 20px;
@@ -1220,11 +1212,6 @@ html.dark {
// Tablet & Mobile Responsive Styles (<xl breakpoint)
// ---------------------------------------------------------------------------
@include media-breakpoint-down(xl) {
// Typography - Body R token (smaller screens)
font-size: 16px;
line-height: 23.2px;
letter-spacing: 0px;
padding: 8px 16px;
gap: 16px;

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

@@ -11500,12 +11500,32 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd
align-items: center;
justify-content: center;
max-height: 40px;
font-family: "Booton", sans-serif;
font-size: 16px;
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 400;
line-height: 23.2px;
font-size: 14px;
line-height: 20.1px;
letter-spacing: 0px;
margin-bottom: 18px;
}
@media (min-width: 576px) {
.bds-btn {
font-size: 14px;
line-height: 20.1px;
letter-spacing: 0px;
margin-bottom: 18px;
}
}
@media (min-width: 992px) {
.bds-btn {
font-size: 16px;
line-height: 23.2px;
letter-spacing: 0px;
margin-bottom: 18px;
}
}
.bds-btn {
white-space: nowrap;
margin-bottom: 0;
border: none;
border-radius: 100px;
cursor: pointer;
@@ -11559,12 +11579,6 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd
.bds-btn:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line {
transform: scaleX(0);
}
@media (max-width: 1279.98px) {
.bds-btn {
font-size: 14px;
line-height: 20.1px;
}
}
.bds-btn--primary {
color: #141414;
@@ -11811,9 +11825,31 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd
background-color: transparent;
border: none;
text-decoration: none;
font-size: 18px;
line-height: 26.1px;
letter-spacing: -0.5px;
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 23.2px;
letter-spacing: 0px;
margin-bottom: 16px;
}
@media (min-width: 576px) {
.bds-btn--tertiary {
font-size: 16px;
line-height: 23.2px;
letter-spacing: 0px;
margin-bottom: 16px;
}
}
@media (min-width: 992px) {
.bds-btn--tertiary {
font-size: 18px;
line-height: 26.1px;
letter-spacing: -0.5px;
margin-bottom: 16px;
}
}
.bds-btn--tertiary {
margin-bottom: 0;
padding: 8px 20px;
gap: 16px;
}
@@ -11868,9 +11904,6 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd
}
@media (max-width: 1279.98px) {
.bds-btn--tertiary {
font-size: 16px;
line-height: 23.2px;
letter-spacing: 0px;
padding: 8px 16px;
gap: 16px;
}