Hello, I'm sorry if there is already an answer to this, i kept looking but couldn't quite find exactly what i was looking for
I'm trying, using CSS, to change the background color of the floating items so that it wouldn't be transparent.
could anyone help me with the SCC needed to add to the extended class of the floating action?
much appreciated!
Hi CincoMariposas,
In addition with Vani's comment, I would also suggest you to chain the .is--open class (extendedClass css definition will only gets applied when the floating action is in open state) with the custom extendedClass CSS definition as mentioned-below:
CSS Snippet (Define in Screen Style Sheet Section)
.custom-floating.is--open .floating-items{ background-image: linear-gradient( #ffb6c1, #f06d06); border-radius: 10px; padding: 10px; color: #fff; }
See this Custom FloatingActions Demo
Hope this helps you!
Kind regards,
Benjith Sam
Thanks to the both of you guys, and thanks for the tip on "is open"
cheers!
Hi
Try overriding below class and add background color to it.
floating-items {
background-color: blue; - ( Apply background color as per your requirement)
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: var(--space-s);
padding-right: var(--space-s);
}