Styling DaaS Elements
Web components define their content in what is known as the shadow DOM (more information here). In short, the shadow DOM guards external factors commonly found in the DOM from effecting elements within the web-components. Thus, things such as CSS and JavaScript defined on the page do not effect the web-component.
As a result however, Certua will expose CSS variables which developers wishing to implement the web-components on their web page can do by overriding these properties. The variables used by the components are based on those exposed by Bootstrap version 4, as such in many cases you can refer to the Bootstrap documentation to see if there is a suitable class or variable that can be used to override our default implementation. A more details guide on how to do this can be seen below.
The global CSS properties which can be overridden are as follows:
Name | Description |
|---|---|
--border-radius | Border radius to apply to edges around the component |
--primary-color | Primary colour for the theme in the web components. |
--secondary-color | Secondary colour for the theme in the web components. |
--padding | Padding applied to |
--primary-text-color | Primary colour used for text |
--secondary-text-color | Secondary colour used for text |
--button-border-radius | Radius to be applied to buttons |
--primary-button-color | Colour of the primary buttons |
--secondary-button-color | Colour of the secondarybuttons |
--warning | colour for warning text/icons |
--error | colour for error text/icons |
--success | colour for success text/icons |
These properties are defined in the root element of the web component, as follows:
:root {
--border-radius: 5px;
--primary-color: blue;
// ... more variables/CSS styling
}But they can be overridden with ease by applying a more specific selector. For example, if you add a class onto your element, as follows:
<account-providers class="certua--dialog">
...
</account-providers>You can define your CSS class like follows:
account-providers.certua--dialog {
--border-radius: 10px;
}The specificity of the class selector is higher than the :root pseudo-element selector, and it will cause the property defined in .certua--dialog to override the one defined in :root, and thus a border-radius of 10px will be applied to any instance of the account-providers web-components which use this class.
SASS
If you are using SASS variables for your colours/themes you will probably want to pass these through to the web components. However, you will need to map these from the SASS variables to CSS properties otherwise they will not work correctly. An example of this shown below:-
This is using a map function to get the colours from a colour map
And the the $theme-colors variable looks like this