mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-07 18:56:38 +00:00
f3bef3784f
- Introduced a new SCSS mixin for theme mode that applies styles based on light or dark themes, with validation for mode parameters. - Updated CardIcon styles to maintain background color on focus for both light and green themes, enhancing accessibility and user experience. - Removed unnecessary import from SmallTilesSection styles to streamline the codebase.
534 lines
8.1 KiB
SCSS
534 lines
8.1 KiB
SCSS
/**
|
|
* Theme mode mixin
|
|
*
|
|
* Applies styles conditionally based on the theme mode (light or dark).
|
|
* SCSS doesn't support type constraints in parameter declarations, so we use
|
|
* runtime validation with @if/@error to ensure only valid values are accepted.
|
|
*
|
|
* @param {string} $mode - Theme mode: "dark" or "light" (default: "dark")
|
|
* @throws Error if $mode is not "dark" or "light"
|
|
*
|
|
* @example
|
|
* @include theme-mode(light) {
|
|
* background-color: white;
|
|
* }
|
|
*/
|
|
@mixin bds-theme-mode($mode: "dark") {
|
|
@if $mode != "dark" and $mode != "light" {
|
|
@error "Invalid theme mode: #{$mode}. Must be either 'dark' or 'light'.";
|
|
}
|
|
|
|
html.#{$mode} & {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/* HEIGHT AND WIDTH HELPERS */
|
|
.h32 {
|
|
height: 32px;
|
|
}
|
|
.w32 {
|
|
width: 32px;
|
|
}
|
|
.h36 {
|
|
height: 36px;
|
|
}
|
|
.w36 {
|
|
width: 36px;
|
|
}
|
|
.h40 {
|
|
height: 40px;
|
|
}
|
|
.w40 {
|
|
width: 40px;
|
|
}
|
|
.w44 {
|
|
width: 44px;
|
|
}
|
|
.w48 {
|
|
width: 48px;
|
|
}
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
.min-vh100 {
|
|
min-height: 100vh;
|
|
}
|
|
.vw100 {
|
|
width: 100vw;
|
|
min-width: 100%;
|
|
}
|
|
|
|
/* SPACING HELPERS */
|
|
/* To create new margin classes, multiply by 4px then divide by 16 */
|
|
/* Exceptions with 1 - 5 since those are stock with Bootstrap */
|
|
.mb-3-sm-i {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
}
|
|
.ml-5 {
|
|
margin-left: 1.25rem;
|
|
&-until-md {
|
|
@include media-breakpoint-up(md) {
|
|
margin-left: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
.mr-5 {
|
|
margin-right: 1.25rem;
|
|
&-until-md {
|
|
@include media-breakpoint-up(md) {
|
|
margin-right: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
.mb-6 {
|
|
margin-bottom: 1.5rem;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
.mt-6 {
|
|
margin-top: 1.5rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
}
|
|
}
|
|
.mb-8 {
|
|
margin-bottom: 2rem;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
}
|
|
.mt-8 {
|
|
margin-top: 2rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-top: 2rem !important;
|
|
}
|
|
}
|
|
}
|
|
.mt-9 {
|
|
margin-top: 2.25rem;
|
|
}
|
|
.mb-9 {
|
|
margin-bottom: 2.25rem;
|
|
}
|
|
.mt-10 {
|
|
margin-top: 2.5rem;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-top: 2.5rem;
|
|
}
|
|
}
|
|
}
|
|
.mb-10 {
|
|
margin-bottom: 2.5rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
}
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
}
|
|
}
|
|
.ml-10 {
|
|
margin-left: 2.5rem;
|
|
}
|
|
.mr-10 {
|
|
margin-right: 2.5rem;
|
|
}
|
|
.my-10 {
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.mx-10 {
|
|
margin-left: 2.5rem;
|
|
margin-right: 2.5rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-left: 2.5rem;
|
|
margin-right: 2.5rem;
|
|
}
|
|
}
|
|
&-until-md {
|
|
@include media-breakpoint-up(md) {
|
|
margin-left: 2.5rem;
|
|
margin-right: 2.5rem;
|
|
}
|
|
}
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-left: 2.5rem;
|
|
margin-right: 2.5rem;
|
|
}
|
|
}
|
|
}
|
|
.mt-1{
|
|
margin-top: 1rem;
|
|
}
|
|
.mt-12 {
|
|
margin-top: 3rem;
|
|
}
|
|
.mb-12 {
|
|
margin-bottom: 3rem;
|
|
}
|
|
.my-12 {
|
|
margin-top: 3rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
.mt-13 {
|
|
margin-top: 3.25rem;
|
|
}
|
|
.mb-13 {
|
|
margin-bottom: 3.25rem;
|
|
}
|
|
.mt-14 {
|
|
margin-top: 3.5rem;
|
|
}
|
|
.mt-16 {
|
|
margin-top: 4rem;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-top: 4rem;
|
|
}
|
|
}
|
|
}
|
|
.mb-16 {
|
|
margin-bottom: 4rem;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-bottom: 4rem;
|
|
}
|
|
}
|
|
}
|
|
.mb-18 {
|
|
margin-bottom: 4.5rem;
|
|
}
|
|
.mt-20 {
|
|
margin-top: 5rem;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-top: 5rem;
|
|
}
|
|
}
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-top: 5rem;
|
|
}
|
|
}
|
|
}
|
|
.mb-20 {
|
|
margin-bottom: 5rem;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
margin-bottom: 5rem;
|
|
}
|
|
}
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-bottom: 5rem;
|
|
}
|
|
}
|
|
}
|
|
.my-20 {
|
|
margin-top: 5rem;
|
|
margin-bottom: 5rem;
|
|
}
|
|
.my-26 {
|
|
margin-top: 6.5rem;
|
|
margin-bottom: 6.5rem;
|
|
}
|
|
.mb-30 {
|
|
margin-bottom: 7.5rem;
|
|
}
|
|
.mt-30 {
|
|
margin-top: 7.5rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-top: 7.5rem;
|
|
}
|
|
}
|
|
}
|
|
.mt-40 {
|
|
margin-top: 10rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-top: 10rem;
|
|
}
|
|
}
|
|
}
|
|
.mb-40 {
|
|
margin-bottom: 10rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-bottom: 10rem;
|
|
}
|
|
}
|
|
}
|
|
.mb-49 {
|
|
margin-bottom: 12.25rem;
|
|
}
|
|
.mb-50 {
|
|
margin-bottom: 12.5rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
margin-bottom: 12.5rem;
|
|
}
|
|
}
|
|
}
|
|
.pl-0-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
padding-left: 0 !important;
|
|
}
|
|
}
|
|
.pr-0-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
padding-right: 0 !important;
|
|
}
|
|
}
|
|
.pt-3-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
padding-top: 1rem !important;
|
|
}
|
|
}
|
|
.p-6 {
|
|
padding: 1.5rem;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
padding: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
.p-8 {
|
|
padding: 2rem;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
}
|
|
.p-10 {
|
|
padding: 2.5rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
padding: 2.5rem;
|
|
}
|
|
}
|
|
}
|
|
.py-20 {
|
|
padding-bottom: 5rem;
|
|
padding-top: 5rem;
|
|
}
|
|
.px-20 {
|
|
padding-left: 5rem;
|
|
padding-right: 5rem;
|
|
}
|
|
.pt-20 {
|
|
padding-top: 5rem;
|
|
}
|
|
.pb-20 {
|
|
padding-bottom: 5rem;
|
|
}
|
|
.py-26 {
|
|
padding-top: 6.5rem;
|
|
padding-bottom: 6.5rem;
|
|
@include media-breakpoint-down(sm) {
|
|
padding-top: 2.5rem;
|
|
padding-bottom: 2.5rem;
|
|
}
|
|
}
|
|
.pt-26 {
|
|
padding-top: 2.5rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
padding-top: 6.5rem;
|
|
}
|
|
}
|
|
}
|
|
.pb-26 {
|
|
padding-bottom: 6.5rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
padding-bottom: 6.5rem;
|
|
}
|
|
}
|
|
}
|
|
.pt-30 {
|
|
padding-top: 7.5rem;
|
|
}
|
|
.pb-30 {
|
|
padding-bottom: 7.5rem;
|
|
}
|
|
.pt-40 {
|
|
padding-top: 10rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
padding-top: 10rem;
|
|
}
|
|
}
|
|
}
|
|
.pb-40 {
|
|
padding-bottom: 10rem;
|
|
}
|
|
.pb-50 {
|
|
padding-bottom: 12.5rem;
|
|
}
|
|
.pt-50 {
|
|
padding-top: 12.5rem;
|
|
}
|
|
.py-50 {
|
|
padding-bottom: 12.5rem;
|
|
padding-top: 12.5rem;
|
|
&-until-sm {
|
|
@include media-breakpoint-up(sm) {
|
|
padding-bottom: 12.5rem;
|
|
padding-top: 12.5rem;
|
|
}
|
|
}
|
|
}
|
|
.floating-nav {
|
|
top: 6rem;
|
|
}
|
|
.last-section {
|
|
margin-bottom: 100px;
|
|
}
|
|
.bottom-0 {
|
|
bottom: 0;
|
|
}
|
|
.justify-center {
|
|
justify-content: center;
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
@include media-breakpoint-down(xs) {
|
|
.overflow-xs {
|
|
overflow: scroll;
|
|
}
|
|
.overflow-x-xs {
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
.position-sm-absolute {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
/* TEXT HELPERS */
|
|
.va-middle {
|
|
vertical-align: middle;
|
|
}
|
|
.ls-none {
|
|
list-style: none;
|
|
}
|
|
.no-wrap {
|
|
white-space: nowrap;
|
|
}
|
|
.align-items-stretch {
|
|
align-items: stretch;
|
|
}
|
|
.underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* DISPLAY HELPERS */
|
|
.d-none-xs {
|
|
@include media-breakpoint-down(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
.d-none-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
.d-none-lg {
|
|
@include media-breakpoint-up(lg) {
|
|
display: none;
|
|
}
|
|
}
|
|
.d-block {
|
|
display: block;
|
|
}
|
|
|
|
/* COLOR ELEMENTS */
|
|
.border-green {
|
|
border: 1px solid $primary;
|
|
}
|
|
.border-none {
|
|
border: none !important;
|
|
}
|
|
.grey-400 {
|
|
color: $gray-400;
|
|
}
|
|
.grey-500 {
|
|
color: $gray-500;
|
|
}
|
|
.grey-700 {
|
|
color: $gray-700;
|
|
}
|
|
.white {
|
|
color: $white;
|
|
}
|
|
|
|
.stat-highlight {
|
|
color: $green-400;
|
|
}
|
|
|
|
/* ETC */
|
|
.br-8 {
|
|
border-radius: 8px;
|
|
}
|
|
br {
|
|
@include media-breakpoint-down(sm) {
|
|
&.until-sm {
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
.z-index-1 {
|
|
z-index: 1;
|
|
}
|
|
.bb-gray {
|
|
border-bottom: 1px solid $gray-600;
|
|
}
|
|
|
|
// Arrow bouncing animation
|
|
@keyframes arrowDance {
|
|
0% { padding-left: 7px; }
|
|
50% { padding-left: 14px; }
|
|
100% { padding-left: 7px; }
|
|
}
|
|
|
|
// Alt version for elements absolute-positioned to the right
|
|
@keyframes arrowDance2 {
|
|
0% { right: 0; }
|
|
50% { right: 7px; }
|
|
100% { right: 0; }
|
|
}
|
|
|
|
// Diagonal up-right arrow bouncing (also for absolute-positioned to the right)
|
|
@keyframes arrowDanceDiag {
|
|
0% { right: 7px; margin-top: 0; }
|
|
50% { right: 0; margin-top: -7px; }
|
|
100% { right: 7px; margin-top: 0; }
|
|
}
|