mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-03 16:56:40 +00:00
7b223aafc2
- Adjusted column spans in CardImage showcase to support a 4-column layout on larger screens. - Updated TileLogo showcase to reflect changes in aspect ratios and responsive behavior, ensuring proper display across different screen sizes. - Enhanced SCSS styles for both components to maintain consistency in appearance and functionality in light and dark themes. - Refined documentation to clarify usage and responsive design principles for both CardImage and TileLogo components.
374 lines
12 KiB
SCSS
374 lines
12 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
|
|
|
|
@import '../../../styles/breakpoints';
|
|
|
|
// Grid gutter (matching PageGrid)
|
|
$bds-grid-gutter: 8px;
|
|
|
|
// =============================================================================
|
|
// Design Tokens
|
|
// =============================================================================
|
|
|
|
// Focus border colors
|
|
$bds-tile-logo-focus-border-light: $black;
|
|
$bds-tile-logo-focus-border-dark: $white;
|
|
|
|
// Focus border width
|
|
$bds-tile-logo-focus-border-width: 2px;
|
|
|
|
// Animation (matching CardOffgrid)
|
|
$bds-tile-logo-transition-duration: 200ms;
|
|
$bds-tile-logo-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// 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
|
|
transition:
|
|
background-color $bds-tile-logo-transition-duration $bds-tile-logo-transition-timing,
|
|
opacity $bds-tile-logo-transition-duration $bds-tile-logo-transition-timing;
|
|
|
|
// Focus styles - Dark Mode (default)
|
|
&:focus {
|
|
outline: $bds-tile-logo-focus-border-width solid $bds-tile-logo-focus-border-dark;
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
&:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: $bds-tile-logo-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 {
|
|
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-tile-logo-transition-duration $bds-tile-logo-transition-timing;
|
|
}
|
|
|
|
// 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 {
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
|
|
// =============================================================================
|
|
// 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;
|
|
}
|
|
}
|
|
}
|