Need help with CSS for icon in a variable tile

SharpTools.io (web)
1

I’ve been successfully rotating and resizing icons in virtual switch tiles for while.
For example, for a style named “uparrow”, this CSS works fine when applied to a virtual switch tile:
.–theme-style-uparrow .icon svg {width: 100%; height: 100%; transform: rotate(-90deg);}

However if I use that same style in an attempt to rotate an icon in a number variable tile it does nothing.

Would appreciate any ideas. Is the icon within a variable tile a different beast?

1 Like
2

The Hero Attribute, Number Variable, and Text Variable tiles are slightly different from the normal tiles in that the icon is in-line with the text rather than being the primary content like many of the other tiles.

As such, the element structure is slightly different on these. (Though after seeing this post, I’m wondering if we could tweak it slightly to better align with the other tiles having a ‘wrapper’ .icon element)

You could tweak the selector to allow for both cases:

.--theme-style-uparrow .icon svg, .--theme-style-uparrow svg.icon {width: 100%; height: 100%; transform: rotate(-90deg);}

This is basically saying to select the svg element under a tile with the ‘uparrow’ style applied to it… regardless of if it’s the child of an .icon element or the svg itself is the .icon element. :slight_smile:

Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with potential future changes to the SharpTools web app.

1 Like
3

Thanks, Josh! I couldn’t have gotten there by myself in my lifetime.

My goal was to rotate the battery level icons for use as brightness level.

Level100

Level60

For my needs, the icon is all I wanted. If I could eliminate the number I would. Tried setting the font size to zero, which wasn’t successful.

(I know the battery level icon is 50% not 60%. I’m going to rework the rules so they match!)

Thanks again.

2 Likes