Studio Web
Switch Design System theme
Betclic / Clickbet
Shortcut : MAJ + T
Switch theme mode
Light / Dark
Shortcut : MAJ + D
Context menu
The context menu component allows users to navigate between different sections of the application quickly and efficiently. It is designed to be responsive and user-friendly, ensuring a seamless experience across various devices.
TWIG : Universes/_common/_webapp/_twig/_components/_context_menu.twig
CSS : DesignSystem/_tactics/_components/_css/_webapp/_context_menu/_context_menu.scss
Animated
Each elements of context menu can be animated by setting specific CSS classes. There are 3 states : default, active and inactive.
Tap on Context Menu
When tap on navigation item, a CSS class is-touchStart is added to the navigation component to bounce it, then when we leave the tap, a CSS class is-touchEnd is added to play another bounce effect.
Animation duration : 150ms / 500ms
CSS variables : --contextMenuNavigationTouchStartAnimationDuration
--contextMenuNavigationTouchStartAnimationDelay
--contextMenuNavigationTouchEndAnimationDuration
--contextMenuNavigationTouchEndAnimationDelay
Scrolling Up & Down without Betting Slip
When scrolling down, a CSS class is-hidden is added to the contextMenu component to hide it.
When scrolling up, a CSS class is-visible is added to the contextMenu component to show it.
Animation duration : 350ms
CSS variables : --contextMenuShowAnimationDuration
--contextMenuShowAnimationDelay
--contextMenuHideAnimationDuration
--contextMenuHideAnimationDelay
Add & Remove Betting slip
When you have to display the Betting Slip in small view, a CSS class is-hidden is added to the navigation component to display/undisplay it. There is also a CSS class is-shifted to shift the navigation to the left.
Small Betting slip
Animation duration : 350ms
CSS variables : --contextMenuNavigationShowAnimationDuration
--contextMenuNavigationShowAnimationDelay
--contextMenuNavigationHideAnimationDuration
--contextMenuNavigationHideAnimationDelay
When you have to display the Betting Slip in large view, a CSS class is-hidden is added to each navigation_item components to display/undisplay it. There is also a CSS class is-shifted to shift the navigation to the left.
Large Betting slip
Animation duration : 350ms
CSS variables : --contextMenuNavigationItemsShowAnimationDuration
--contextMenuNavigationItemsShowAnimationDelay
--contextMenuNavigationItemsHideAnimationDuration
--contextMenuNavigationItemsHideAnimationDelay
Scrolling Up & Down with Betting Slip
When scrolling down, a CSS class is-hidden is added to the navigation components to hide it.
When scrolling up, a CSS class is-visible is added to the navigation components to show it.
Small Betting slip
Animation duration : 350ms
CSS variables : --contextMenuNavigationShowAnimationDuration
--contextMenuNavigationShowAnimationDelay
--contextMenuNavigationHideAnimationDuration
--contextMenuNavigationHideAnimationDelay