mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
5c87e7e1cb
- Introduced the TextCard component with 6 color variants and interactive states, including hover and pressed effects. - Updated CardsTwoColumn pattern to utilize the new TextCard component, showcasing all 6 color variants in a responsive layout. - Improved documentation for both TextCard and CardsTwoColumn, detailing usage, props, and responsive behavior. - Refactored styles to ensure consistency and maintainability across components.
354 lines
11 KiB
SCSS
354 lines
11 KiB
SCSS
// BDS TileLogo Component Styles
|
|
// Brand Design System - Logo tile/card component
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-tile-logo - Base tile (shared layout, transitions)
|
|
// .bds-tile-logo--square - Square shape variant (1:1 aspect ratio, default)
|
|
// .bds-tile-logo--rectangle - Rectangle shape variant (9:5 aspect ratio)
|
|
// .bds-tile-logo--neutral - Neutral variant (gray tones)
|
|
// .bds-tile-logo--green - Green variant (brand green tones)
|
|
// .bds-tile-logo--hovered - Hovered state (triggers overlay animation)
|
|
// .bds-tile-logo--disabled - Disabled state modifier
|
|
// .bds-tile-logo__overlay - Hover gradient overlay (window shade animation)
|
|
// .bds-tile-logo__image - Logo image element
|
|
|
|
// Grid gutter (matching PageGrid)
|
|
$bds-grid-gutter: 8px;
|
|
|
|
// Focus border colors (component-specific, dark mode default)
|
|
$bds-tile-logo-focus-border-light: $black;
|
|
$bds-tile-logo-focus-border-dark: $white;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Shape Tokens - Square (1:1 aspect ratio)
|
|
// -----------------------------------------------------------------------------
|
|
$bds-tile-logo-square-padding-sm: 36px 20px; // SM: vertical 36px, horizontal 20px
|
|
$bds-tile-logo-square-padding-md: 40px 24px; // MD: vertical 40px, horizontal 24px
|
|
$bds-tile-logo-square-padding-lg: 72px 48px; // LG: vertical 72px, horizontal 48px
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Shape Tokens - Rectangle (9:5 aspect ratio)
|
|
// -----------------------------------------------------------------------------
|
|
$bds-tile-logo-rect-padding-sm: 20px 36px; // SM/MD: vertical 20px, horizontal 36px
|
|
$bds-tile-logo-rect-padding-lg: 32px 64px; // LG: vertical 32px, horizontal 64px
|
|
|
|
// =============================================================================
|
|
// Base Tile Styles
|
|
// =============================================================================
|
|
|
|
.bds-tile-logo {
|
|
// Reset button/anchor styles
|
|
appearance: none;
|
|
border: none;
|
|
background: none;
|
|
margin: 0;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
|
|
// Layout
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
|
|
// Dimensions controlled by shape modifiers
|
|
width: 100%;
|
|
|
|
// Interaction
|
|
cursor: pointer;
|
|
|
|
// Transitions (using shared animation tokens)
|
|
transition:
|
|
background-color $bds-transition-duration $bds-transition-timing,
|
|
opacity $bds-transition-duration $bds-transition-timing;
|
|
|
|
// Focus styles - Dark Mode (default)
|
|
&:focus {
|
|
outline: $bds-focus-border-width solid $bds-tile-logo-focus-border-dark;
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
&:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: $bds-focus-border-width solid $bds-tile-logo-focus-border-dark;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Shape Variants
|
|
// =============================================================================
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Square Shape (default) - 1:1 aspect ratio, width controlled by parent container
|
|
// Use PageGridCol with appropriate span to control width:
|
|
// - SM: span 2 (of 4 columns)
|
|
// - MD: span 2 (of 8 columns)
|
|
// - LG: span 3 (of 12 columns)
|
|
// -----------------------------------------------------------------------------
|
|
.bds-tile-logo--square {
|
|
aspect-ratio: 1;
|
|
padding: $bds-tile-logo-square-padding-sm;
|
|
flex-shrink: 0; // Prevent shrinking in flex containers
|
|
|
|
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
padding: $bds-tile-logo-square-padding-md;
|
|
}
|
|
|
|
@media (min-width: map-get($grid-breakpoints, lg)) {
|
|
padding: $bds-tile-logo-square-padding-lg;
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Rectangle Shape - 9:5 aspect ratio, width controlled by parent container
|
|
// Use PageGridCol with appropriate span to control width:
|
|
// - SM: span 2 (of 4 columns)
|
|
// - MD: span 2 (of 8 columns)
|
|
// - LG: span 3 (of 12 columns)
|
|
// -----------------------------------------------------------------------------
|
|
.bds-tile-logo--rectangle {
|
|
aspect-ratio: 9 / 5;
|
|
width: 100%; // Fill parent container width
|
|
padding: $bds-tile-logo-rect-padding-sm;
|
|
flex-shrink: 0; // Prevent shrinking in flex containers
|
|
|
|
@media (min-width: map-get($grid-breakpoints, lg)) {
|
|
padding: $bds-tile-logo-rect-padding-lg;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// 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-tile-logo__overlay {
|
|
// Use shared window shade animation mixin
|
|
@include bds-window-shade-overlay;
|
|
}
|
|
|
|
// Hovered state: shade fully raised (visible)
|
|
// When transitioning TO this state, the top inset decreases = shade rises up
|
|
.bds-tile-logo--hovered .bds-tile-logo__overlay {
|
|
@include bds-window-shade-revealed;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Logo Image
|
|
// =============================================================================
|
|
|
|
.bds-tile-logo__image {
|
|
position: relative;
|
|
z-index: 1; // Above overlay
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Light Mode Styles (Default - site uses dark mode as default)
|
|
// =============================================================================
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Neutral Variant - Light Mode
|
|
// -----------------------------------------------------------------------------
|
|
.bds-tile-logo--neutral {
|
|
background-color: $gray-200;
|
|
|
|
// Overlay color for hover wipe
|
|
.bds-tile-logo__overlay {
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
// Pressed state
|
|
&:active:not(.bds-tile-logo--disabled) {
|
|
.bds-tile-logo__overlay {
|
|
background-color: $gray-400;
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Green Variant - Light Mode
|
|
// -----------------------------------------------------------------------------
|
|
.bds-tile-logo--green {
|
|
background-color: $green-200;
|
|
|
|
// Overlay color for hover wipe
|
|
.bds-tile-logo__overlay {
|
|
background-color: $green-300;
|
|
}
|
|
|
|
// Pressed state
|
|
&:active:not(.bds-tile-logo--disabled) {
|
|
.bds-tile-logo__overlay {
|
|
background-color: $green-400;
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Disabled State - Light Mode
|
|
// -----------------------------------------------------------------------------
|
|
.bds-tile-logo--disabled {
|
|
background-color: $gray-100;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
|
|
&:focus,
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.bds-tile-logo__image {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Dark Mode Styles (using html.dark selector)
|
|
// =============================================================================
|
|
|
|
html.dark {
|
|
// Focus styles - Dark Mode
|
|
.bds-tile-logo {
|
|
&:focus {
|
|
outline-color: $bds-tile-logo-focus-border-dark;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline-color: $bds-tile-logo-focus-border-dark;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Neutral Variant - Dark Mode
|
|
// ---------------------------------------------------------------------------
|
|
.bds-tile-logo--neutral {
|
|
background-color: $gray-500;
|
|
|
|
// Overlay color for hover wipe
|
|
.bds-tile-logo__overlay {
|
|
background-color: $gray-400;
|
|
}
|
|
|
|
// Pressed state
|
|
&:active:not(.bds-tile-logo--disabled) {
|
|
.bds-tile-logo__overlay {
|
|
background-color: rgba($gray-500, 0.7);
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Green Variant - Dark Mode
|
|
// ---------------------------------------------------------------------------
|
|
.bds-tile-logo--green {
|
|
background-color: $green-200;
|
|
|
|
// Overlay color for hover wipe
|
|
.bds-tile-logo__overlay {
|
|
background-color: $green-300;
|
|
}
|
|
|
|
// Pressed state
|
|
&:active:not(.bds-tile-logo--disabled) {
|
|
.bds-tile-logo__overlay {
|
|
background-color: $green-400;
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Disabled State - Dark Mode
|
|
// ---------------------------------------------------------------------------
|
|
.bds-tile-logo--disabled {
|
|
background-color: rgba($gray-500, 0.3);
|
|
opacity: 1; // Reset opacity, use background color instead
|
|
|
|
.bds-tile-logo__image {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Light Mode Styles (html.light)
|
|
// =============================================================================
|
|
|
|
html.light {
|
|
// Focus styles - Light Mode
|
|
.bds-tile-logo {
|
|
&:focus {
|
|
outline-color: $bds-tile-logo-focus-border-light;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline-color: $bds-tile-logo-focus-border-light;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Neutral Variant - Light Mode (explicit for html.light)
|
|
// ---------------------------------------------------------------------------
|
|
.bds-tile-logo--neutral {
|
|
background-color: $gray-200;
|
|
|
|
.bds-tile-logo__overlay {
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
&:active:not(.bds-tile-logo--disabled) {
|
|
.bds-tile-logo__overlay {
|
|
background-color: $gray-400;
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Green Variant - Light Mode (explicit for html.light)
|
|
// ---------------------------------------------------------------------------
|
|
.bds-tile-logo--green {
|
|
background-color: $green-200;
|
|
|
|
.bds-tile-logo__overlay {
|
|
background-color: $green-300;
|
|
}
|
|
|
|
&:active:not(.bds-tile-logo--disabled) {
|
|
.bds-tile-logo__overlay {
|
|
background-color: $green-400;
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Disabled State - Light Mode
|
|
// ---------------------------------------------------------------------------
|
|
.bds-tile-logo--disabled {
|
|
background-color: $gray-100;
|
|
opacity: 1;
|
|
|
|
.bds-tile-logo__image {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|