mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
Add CarouselButton component and integrate into CarouselCardList and CarouselFeatured showcases
- Introduced CarouselButton component for navigation with multiple color variants (neutral, green, black). - Enhanced CarouselCardListShowcase to include a visual showcase of CarouselButton in various states. - Created CarouselFeatured component showcasing featured images with navigation and responsive behavior. - Updated styles for CarouselButton and integrated it into existing patterns for improved navigation experience.
This commit is contained in:
akcodez
244
shared/components/CarouselButton/CarouselButton.scss
Normal file
244
shared/components/CarouselButton/CarouselButton.scss
Normal file
@@ -0,0 +1,244 @@
|
||||
// BDS CarouselButton Component Styles
|
||||
// Brand Design System - Circular navigation button for carousels
|
||||
//
|
||||
// Naming Convention: BEM with 'bds' namespace
|
||||
// .bds-carousel-button - Base button
|
||||
// .bds-carousel-button--prev - Previous/left direction
|
||||
// .bds-carousel-button--next - Next/right direction
|
||||
// .bds-carousel-button--neutral - Neutral/gray color variant
|
||||
// .bds-carousel-button--green - Green color variant
|
||||
// .bds-carousel-button--black - Black/white color variant
|
||||
// .bds-carousel-button--disabled - Disabled state modifier
|
||||
// .bds-carousel-button__arrow-icon - Arrow icon element
|
||||
//
|
||||
// Note: This file is imported within xrpl.scss after Bootstrap and project
|
||||
// variables are loaded, so $grid-breakpoints, colors, and mixins are available.
|
||||
|
||||
// =============================================================================
|
||||
// Design Tokens
|
||||
// =============================================================================
|
||||
|
||||
// Button dimensions
|
||||
$bds-carousel-button-size-sm: 37px; // Mobile/Tablet
|
||||
$bds-carousel-button-size-lg: 40px; // Desktop
|
||||
|
||||
// Transition
|
||||
$bds-carousel-button-transition: 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98);
|
||||
|
||||
// =============================================================================
|
||||
// Base Button Styles
|
||||
// =============================================================================
|
||||
|
||||
.bds-carousel-button {
|
||||
// Reset button styles
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
// Layout
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $bds-carousel-button-size-sm;
|
||||
height: $bds-carousel-button-size-sm;
|
||||
|
||||
// Transition
|
||||
transition: background-color $bds-carousel-button-transition,
|
||||
opacity $bds-carousel-button-transition;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: $bds-carousel-button-size-lg;
|
||||
height: $bds-carousel-button-size-lg;
|
||||
}
|
||||
|
||||
// Focus styles
|
||||
&:focus {
|
||||
outline: 2px solid $white;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $white;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Arrow Icon
|
||||
// =============================================================================
|
||||
|
||||
.bds-carousel-button__arrow-icon {
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
width: 18px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// DARK MODE (Default) - Color Variants
|
||||
// =============================================================================
|
||||
|
||||
// Green button variant - Dark Mode
|
||||
// Enabled: green-300, Hover: green-400, Active/Pressed: green-300, Disabled: green-500 @ 0.5 opacity
|
||||
.bds-carousel-button--green {
|
||||
background-color: $green-300;
|
||||
color: $black;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $green-400;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $green-300;
|
||||
}
|
||||
|
||||
&.bds-carousel-button--disabled,
|
||||
&:disabled {
|
||||
background-color: $green-500 !important;
|
||||
color: #F0F3F7 !important;
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Neutral/Grey button variant - Dark Mode
|
||||
// Enabled: gray-300, Hover: gray-400, Active/Pressed: gray-300, Disabled: gray-500 @ 0.5 opacity
|
||||
.bds-carousel-button--neutral {
|
||||
background-color: $gray-300;
|
||||
color: $black;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $gray-400;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
|
||||
&.bds-carousel-button--disabled,
|
||||
&:disabled {
|
||||
background-color: $gray-500 !important;
|
||||
color: $gray-300 !important;
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Black variant becomes White in Dark Mode
|
||||
// Enabled: white, Hover: gray-300, Active/Pressed: white, Disabled: gray-500 @ 0.5 opacity
|
||||
.bds-carousel-button--black {
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&.bds-carousel-button--disabled,
|
||||
&:disabled {
|
||||
background-color: $gray-500 !important;
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// LIGHT MODE (html.light) - Color Variants
|
||||
// =============================================================================
|
||||
|
||||
html.light {
|
||||
// Focus styles - Light Mode
|
||||
.bds-carousel-button {
|
||||
&:focus {
|
||||
outline-color: $gray-900;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline-color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
// Green button variant - Light Mode
|
||||
// Enabled: green-300, Hover: green-200, Active/Pressed: green-300, Disabled: green-100
|
||||
.bds-carousel-button--green {
|
||||
background-color: $green-300;
|
||||
color: $black;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $green-200;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $green-300;
|
||||
}
|
||||
|
||||
&.bds-carousel-button--disabled,
|
||||
&:disabled {
|
||||
background-color: $green-100 !important;
|
||||
color: $gray-300 !important;
|
||||
opacity: 1 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Neutral/Grey button variant - Light Mode
|
||||
// Enabled: gray-300, Hover: gray-200, Active/Pressed: gray-300, Disabled: gray-100
|
||||
.bds-carousel-button--neutral {
|
||||
background-color: $gray-300;
|
||||
color: $black;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
|
||||
&.bds-carousel-button--disabled,
|
||||
&:disabled {
|
||||
background-color: $gray-100 !important;
|
||||
color: $gray-300 !important;
|
||||
opacity: 1 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Black button variant - Light Mode
|
||||
// Enabled: black, Hover: gray-500, Active/Pressed: black, Disabled: #F0F3F7
|
||||
.bds-carousel-button--black {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $gray-500;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
&.bds-carousel-button--disabled,
|
||||
&:disabled {
|
||||
background-color: #F0F3F7 !important;
|
||||
color: $gray-300 !important;
|
||||
opacity: 1 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user