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! Also please add to the contents below by copying the link to your post (
), adding a dot-point to the relevant section, selecting your text and pasting the url onto it.
Contents
Components
General
IA-Tree Component
IA-Tab Container
IA-Alarm Status Table
IA-Table
Popups
Font
- Using
remfont size units and changing fontsize based on screen size - Setting
remsize usingcalcand media queries
Colours
- Using CSS Custom Properties to Build Composable Style Systems
- Using the
color-mixCSS function to modify existing colours - Using
fromwithin colours to change existing colours
Animations
SVG/Images
Misc
- Adding a “New” indicator with pure CSS (see bottom of this post)
- Adding a * to the start of a component with CSS
- General Advice #1
- General Advice #2
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.
