mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
57898ab010
- Introduced the CardOffgrid component, designed for displaying feature highlights with customizable icons, titles, and descriptions. - Implemented two color variants: neutral and green, with interactive states and a unique hover animation. - Created a comprehensive showcase page demonstrating all variants and states of the CardOffgrid component. - Added detailed documentation covering usage guidelines, best practices, and API reference. - Included SCSS styles for the CardOffgrid component, ensuring compatibility with both light and dark themes.
377 lines
12 KiB
SCSS
377 lines
12 KiB
SCSS
// BDS CardOffgrid Component Styles
|
|
// Brand Design System - Feature card with icon, title, and description
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-card-offgrid - Base card (resets button/anchor styles)
|
|
// .bds-card-offgrid--neutral - Neutral gray color variant (default)
|
|
// .bds-card-offgrid--green - Green color variant
|
|
// .bds-card-offgrid--disabled - Disabled state
|
|
// .bds-card-offgrid__overlay - Hover gradient overlay
|
|
// .bds-card-offgrid__icon-container - Icon wrapper (84x84px)
|
|
// .bds-card-offgrid__icon-image - Image icon styling
|
|
// .bds-card-offgrid__content - Title and description wrapper
|
|
// .bds-card-offgrid__title - Card title (32px)
|
|
// .bds-card-offgrid__description - Card description (18px)
|
|
//
|
|
// Note: This file is imported within xrpl.scss after Bootstrap and project
|
|
// variables are loaded, so $grid-breakpoints, colors, and mixins are available.
|
|
//
|
|
// Theme: Site defaults to DARK mode. Light mode uses html.light selector.
|
|
|
|
// =============================================================================
|
|
// Design Tokens
|
|
// =============================================================================
|
|
|
|
// Dimensions (from Figma design spec)
|
|
$bds-card-offgrid-width: 400px;
|
|
$bds-card-offgrid-height: 480px;
|
|
$bds-card-offgrid-padding: 24px;
|
|
$bds-card-offgrid-icon-container: 84px;
|
|
$bds-card-offgrid-icon-size: 68px;
|
|
$bds-card-offgrid-content-gap: 40px;
|
|
|
|
// Animation (from Figma design spec)
|
|
$bds-card-offgrid-transition-duration: 200ms;
|
|
$bds-card-offgrid-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
|
|
|
|
// Typography - Title
|
|
$bds-card-offgrid-title-size: 32px;
|
|
$bds-card-offgrid-title-line-height: 40px;
|
|
$bds-card-offgrid-title-letter-spacing: -1px;
|
|
|
|
// Typography - Description
|
|
$bds-card-offgrid-desc-size: 18px;
|
|
$bds-card-offgrid-desc-line-height: 26.1px;
|
|
$bds-card-offgrid-desc-letter-spacing: -0.5px;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Dark Mode Colors (Default)
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Neutral variant - Dark Mode
|
|
$bds-card-offgrid-neutral-default-dark: $gray-500; // #72777E
|
|
$bds-card-offgrid-neutral-hover-dark: $gray-400; // #8A919A
|
|
$bds-card-offgrid-neutral-pressed-dark: rgba($gray-500, 0.7); // 70% opacity
|
|
$bds-card-offgrid-neutral-text-dark: $white; // #FFFFFF
|
|
|
|
// Green variant - Dark Mode
|
|
$bds-card-offgrid-green-default-dark: $green-300; // #21E46B
|
|
$bds-card-offgrid-green-hover-dark: $green-200; // #70EE97
|
|
$bds-card-offgrid-green-pressed-dark: $green-400; // #0DAA3E
|
|
$bds-card-offgrid-green-text-dark: $black; // #000000
|
|
|
|
// Disabled - Dark Mode (30% opacity on gray-500)
|
|
$bds-card-offgrid-disabled-opacity-dark: 0.3;
|
|
$bds-card-offgrid-disabled-text-dark: $white; // #FFFFFF
|
|
|
|
// Focus ring - Dark Mode
|
|
$bds-card-offgrid-focus-color-dark: $white; // #FFFFFF
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Light Mode Colors
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Neutral variant - Light Mode
|
|
$bds-card-offgrid-neutral-default-light: $gray-200; // #E6EAF0
|
|
$bds-card-offgrid-neutral-hover-light: $gray-300; // #CAD4DF
|
|
$bds-card-offgrid-neutral-pressed-light: $gray-400; // #8A919A
|
|
$bds-card-offgrid-neutral-text-light: $gray-900; // #111112
|
|
$bds-card-offgrid-neutral-text-hover-light: $black; // #000000
|
|
|
|
// Green variant - Light Mode
|
|
$bds-card-offgrid-green-default-light: $green-200; // #70EE97
|
|
$bds-card-offgrid-green-hover-light: $green-300; // #21E46B
|
|
$bds-card-offgrid-green-pressed-light: $green-400; // #0DAA3E
|
|
$bds-card-offgrid-green-text-light: $black; // #000000
|
|
|
|
// Disabled - Light Mode
|
|
$bds-card-offgrid-disabled-bg-light: $gray-100; // #F0F3F7
|
|
$bds-card-offgrid-disabled-text-light: $gray-500; // #72777E
|
|
|
|
// Focus ring - Light Mode
|
|
$bds-card-offgrid-focus-color-light: $gray-900; // #111112
|
|
|
|
// =============================================================================
|
|
// Base Card Styles
|
|
// =============================================================================
|
|
|
|
.bds-card-offgrid {
|
|
// Reset button/anchor styles
|
|
appearance: none;
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
|
|
// Card layout
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: $bds-card-offgrid-width;
|
|
height: $bds-card-offgrid-height;
|
|
padding: $bds-card-offgrid-padding;
|
|
overflow: hidden;
|
|
|
|
// Animation
|
|
transition: background-color $bds-card-offgrid-transition-duration $bds-card-offgrid-transition-timing,
|
|
opacity $bds-card-offgrid-transition-duration $bds-card-offgrid-transition-timing;
|
|
|
|
// Focus styles - Dark Mode (default)
|
|
// 1px gap between card and focus ring
|
|
&:focus {
|
|
outline: 2px solid $bds-card-offgrid-focus-color-dark;
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
&:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid $bds-card-offgrid-focus-color-dark;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Overlay (Color wipe animation - "Window Shade" effect)
|
|
// =============================================================================
|
|
// Hover in: shade rises from bottom to top (reveals)
|
|
// Hover out: shade falls from top to bottom (hides)
|
|
|
|
.bds-card-offgrid__overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
|
|
// Default: hidden (shade is "rolled up" at bottom, top is 100% clipped)
|
|
// When transitioning TO this state, the top inset increases = shade falls down
|
|
clip-path: inset(100% 0 0 0);
|
|
transition: clip-path $bds-card-offgrid-transition-duration $bds-card-offgrid-transition-timing;
|
|
}
|
|
|
|
// Hovered state: shade fully raised (visible)
|
|
// When transitioning TO this state, the top inset decreases = shade rises up
|
|
.bds-card-offgrid--hovered .bds-card-offgrid__overlay {
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
|
|
// =============================================================================
|
|
// Icon Container
|
|
// =============================================================================
|
|
|
|
.bds-card-offgrid__icon-container {
|
|
position: relative;
|
|
z-index: 1; // Above overlay
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: $bds-card-offgrid-icon-container;
|
|
height: $bds-card-offgrid-icon-container;
|
|
flex-shrink: 0;
|
|
|
|
// Icon sizing
|
|
> * {
|
|
max-width: $bds-card-offgrid-icon-size;
|
|
max-height: $bds-card-offgrid-icon-size;
|
|
}
|
|
}
|
|
|
|
.bds-card-offgrid__icon-image {
|
|
width: auto;
|
|
height: auto;
|
|
max-width: $bds-card-offgrid-icon-size;
|
|
max-height: $bds-card-offgrid-icon-size;
|
|
object-fit: contain;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Content (Title + Description)
|
|
// =============================================================================
|
|
|
|
.bds-card-offgrid__content {
|
|
position: relative;
|
|
z-index: 1; // Above overlay
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-card-offgrid-content-gap;
|
|
}
|
|
|
|
.bds-card-offgrid__title {
|
|
font-size: $bds-card-offgrid-title-size;
|
|
font-weight: 300; // Light
|
|
line-height: $bds-card-offgrid-title-line-height;
|
|
letter-spacing: $bds-card-offgrid-title-letter-spacing;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.bds-card-offgrid__description {
|
|
font-size: $bds-card-offgrid-desc-size;
|
|
font-weight: 300; // Light
|
|
line-height: $bds-card-offgrid-desc-line-height;
|
|
letter-spacing: $bds-card-offgrid-desc-letter-spacing;
|
|
}
|
|
|
|
// =============================================================================
|
|
// DARK MODE (Default)
|
|
// =============================================================================
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Neutral Variant - Dark Mode
|
|
// -----------------------------------------------------------------------------
|
|
|
|
.bds-card-offgrid--neutral {
|
|
background-color: $bds-card-offgrid-neutral-default-dark;
|
|
color: $bds-card-offgrid-neutral-text-dark;
|
|
|
|
// Overlay color for hover wipe
|
|
.bds-card-offgrid__overlay {
|
|
background-color: $bds-card-offgrid-neutral-hover-dark;
|
|
}
|
|
|
|
// Pressed state
|
|
&:active:not(.bds-card-offgrid--disabled) {
|
|
.bds-card-offgrid__overlay {
|
|
background-color: $bds-card-offgrid-neutral-pressed-dark;
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Green Variant - Dark Mode
|
|
// -----------------------------------------------------------------------------
|
|
|
|
.bds-card-offgrid--green {
|
|
background-color: $bds-card-offgrid-green-default-dark;
|
|
color: $bds-card-offgrid-green-text-dark;
|
|
|
|
// Overlay color for hover wipe
|
|
.bds-card-offgrid__overlay {
|
|
background-color: $bds-card-offgrid-green-hover-dark;
|
|
}
|
|
|
|
// Pressed state
|
|
&:active:not(.bds-card-offgrid--disabled) {
|
|
.bds-card-offgrid__overlay {
|
|
background-color: $bds-card-offgrid-green-pressed-dark;
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Disabled State - Dark Mode
|
|
// -----------------------------------------------------------------------------
|
|
|
|
.bds-card-offgrid--disabled {
|
|
background-color: $bds-card-offgrid-neutral-default-dark;
|
|
color: $bds-card-offgrid-disabled-text-dark;
|
|
opacity: $bds-card-offgrid-disabled-opacity-dark;
|
|
cursor: not-allowed;
|
|
|
|
&:focus,
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// LIGHT MODE (html.light)
|
|
// =============================================================================
|
|
|
|
html.light {
|
|
// Focus styles - Light Mode
|
|
.bds-card-offgrid {
|
|
&:focus {
|
|
outline-color: $bds-card-offgrid-focus-color-light;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline-color: $bds-card-offgrid-focus-color-light;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Neutral Variant - Light Mode
|
|
// ---------------------------------------------------------------------------
|
|
|
|
.bds-card-offgrid--neutral {
|
|
background-color: $bds-card-offgrid-neutral-default-light;
|
|
color: $bds-card-offgrid-neutral-text-light;
|
|
|
|
// Overlay color for hover wipe
|
|
.bds-card-offgrid__overlay {
|
|
background-color: $bds-card-offgrid-neutral-hover-light;
|
|
}
|
|
|
|
// Text color on hover
|
|
&.bds-card-offgrid--hovered {
|
|
color: $bds-card-offgrid-neutral-text-hover-light;
|
|
}
|
|
|
|
// Pressed state
|
|
&:active:not(.bds-card-offgrid--disabled) {
|
|
.bds-card-offgrid__overlay {
|
|
background-color: $bds-card-offgrid-neutral-pressed-light;
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Green Variant - Light Mode
|
|
// ---------------------------------------------------------------------------
|
|
|
|
.bds-card-offgrid--green {
|
|
background-color: $bds-card-offgrid-green-default-light;
|
|
color: $bds-card-offgrid-green-text-light;
|
|
|
|
// Overlay color for hover wipe
|
|
.bds-card-offgrid__overlay {
|
|
background-color: $bds-card-offgrid-green-hover-light;
|
|
}
|
|
|
|
// Pressed state
|
|
&:active:not(.bds-card-offgrid--disabled) {
|
|
.bds-card-offgrid__overlay {
|
|
background-color: $bds-card-offgrid-green-pressed-light;
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Disabled State - Light Mode
|
|
// ---------------------------------------------------------------------------
|
|
|
|
.bds-card-offgrid--disabled {
|
|
background-color: $bds-card-offgrid-disabled-bg-light;
|
|
color: $bds-card-offgrid-disabled-text-light;
|
|
opacity: 1; // Reset opacity, use background color instead
|
|
|
|
.bds-card-offgrid__icon-container {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Responsive Styles
|
|
// =============================================================================
|
|
|
|
@media (max-width: 767px) {
|
|
.bds-card-offgrid {
|
|
width: 100%;
|
|
min-height: $bds-card-offgrid-height;
|
|
height: auto;
|
|
}
|
|
}
|