Applying shadow styles
Below you’ll find a couple of guides on how to apply colors on our different platforms.
Applying Spark shadow effects in Figma
A quick guide on how to apply Spark shadow effects to layers in Figma.
Using Spark box shadows on CSS
A quick guide on how to apply Spark's box shadows to properties on CSS files.
Using shadow to indicate scrolling
We provided a special shadow to indicate a scroll.
|
Box Shadow |
Figma: shadow/scroll_indicator CSS: --gse-semantic-shadow-scrollIndicator |
|---|
Floating buttons
As the name suggests, floating buttons are buttons that are placed over other UI elements to give the illusion that they float above in a fixed position.
We recommend that floating buttons use the same shadow values as the Menus.
|
Box Shadow |
Figma: shadow/7_menu CSS: --gse-semantic-shadow-7Menu |
|---|
Although its Z-Index value may vary depending on the specific use case, we recommend using the same as the Side Panel.
|
Z-Index |
CSS: --gse-semantic-elevation-2SidePanel |
|---|
UI Stacking order
Our stacking order is dictated by our elevation levels, which can be found in the link below.
Elevation examples
Below, you can find some interface examples that display all of the elevation levels on an existing Genesys interface.
Click on each one to view all its layers.
Stacking multiple menus
We highly recommend keeping only one floating menu open at a time. However, if necessary, you can have multiple menus open; the last menu opened will always need to be displayed on top of the others.
