mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 20:05:50 +00:00
c8aa8f1d50
- Updated the structure of the tokenization page to improve readability and organization. - Introduced new sections for video content and benefits, enhancing user engagement. - Adjusted CSS styles for better responsiveness and alignment with design standards. - Added a new margin utility class in _helpers.scss for consistent spacing. - Improved the developer resources section to handle single card layouts more effectively.
506 lines
7.4 KiB
SCSS
506 lines
7.4 KiB
SCSS
/* 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-500;
|
|
}
|
|
|
|
/* 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; }
|
|
}
|