I thought it might be good to have a topic with useful CSS that people have found and used over their journey to assist others or give ideas about how to achieve things via pure CSS rather than alternative methods.
If you choose to add to this topic, please include a screenshot demonstrating the effect!
In this spirit, here are some that i've come across (more to be added when I get time):
- Add a "NEW" indicator to components
/*
NewIndicator:
Adds a "NEW" box to the top-right of a component to indicate that the component was recently added.
Add a Perspective Style "NewIndicator" to make it selectable
*/
.psc-NewIndicator {
position: relative; /* this sets the positioning system for the ::after component, otherwise the NEW will be positioned relative to the view, not the component */
/*box-shadow: 0px 0px 0px 2px #C2DD53;*/ /* add a border around the component itself */
}
.psc-NewIndicator::after {
content: 'NEW';
position: absolute;
top: 2px;
right: 2px;
width: 30px;
height: 16px;
padding: 2px;
border-radius: 3px;
background-color: #0A65EC;
color: #fff;
font-size: 0.75rem;
}
**I still haven't mastered em/rem units... perhaps these could replace these fixed px units. I couldn't get the padding to apply properly to give equal space around the text and background edges for all sides
gapfor all flex containers (flex views, flex containers, and flex repeaters) to add spacing around components within a flex container. This works for wrapped components as well.
