CSS Styles

Style your integration with less stylesheets

sample-integration/
├── styles/
|   └── sample-integration.less

The Polarity Integration framework allows you to specify less or css stylesheets which can be used to provide custom styling for your integration template. Less stylesheets are automatically compiled when the integration is first loaded by the Polarity Server. Less compilation errors are captured as integration errors and should appear on the Integration page error list.

Any CSS and Less styles you provide are automatically namespaced to your integration. This means your CSS classes should not "bleed" into other integrations.

The Polarity Notification window comes preloaded with Bootstrap v4 which means you can take advantage of any of the bootstrap CSS classes. Please keep this in mind when creating CSS classes as any collisions with built-in bootstrap classes could cause unintended visual effects.

For a full review of all boostrap CSS classes please see the official Bootstrap documentation.

Setting up Styles

We generally recommend using less stylesheets as less files are backwards compatible with css but include additional features such as slash style comments (//) and nested classes.

For the full documentation on less please see http://lesscss.org/.

To get started first create your less file:

// ./styles/sample-integration.less
.red-text{
    color: red;
}

Make sure to specify the less file in your config.js so that it is loaded when your integration is loaded:

// config/config.js
module.exports = {
    styles:[
        './styles/sample_integration.less'       
    ]
}

You can now use the styles in your template file:

<span class="red-text">This is red</span>

Helper CSS Classes

As users are able to set custom colors for integrations there are 4 CSS helper classes that let you make use of the colors chosen by the user at runtime.

p-key

The p-key class is used to style the key in a key-value pair.

<div>
    <span class="p-key">Severity: </span>
    <span class="p-value">High</span>
</div>

p-value

The p-value class is used to style the value in a key-value pair. Any text styled with p-value will be bold.

<div>
    <span class="p-key">Severity: </span>
    <span class="p-value">High</span>
</div>

p-action

The p-action class is used to style text that can be clicked on by the user to trigger some action. Text styled with p-action will be green.

<span class="p-action">Click to Expand</span>

p-link

The p-link class is used to style text that is an external link. Text styled with p-link will be blue.

<a href="www.google.com" class="p-link">Google</a>

Color Classes

The following special CSS classes can be applied to style text, background and border colors to match the color selected by a user:

integration-text-color

CSS class that modifies the color CSS attribute.

<span class="integration-text-color">Hello World</span>

integration-text-bold-color

CSS class that modifies the color CSS attribute setting it to a darker version of integration-text-color.

<span class="integration-text-bold-color">Hello World in Bold!</span>

integration-background-color

CSS class that modifies the background-color property and sets it to a lighter version of integration-text-color.

<div class="integration-background-color">
    Hello World
</div>

integration-border-color

CSS class that modifies the border-color CSS property. Note that for a border to be visible you will still need to specify the border-width property and border-style property.

<html>
<head>
    <script type="text/css">
        .show-border{
            border-width: 1px;
            border-style: solid;
        }
    </script>
</head>
<body>
    <div class="show-border integration-border-color">
        This is a box with a border.
    </div>
</body>
</html>

For more styling guideline examples please see the style guide integration which can be found here https://github.com/polarityio/style-guide

PreviousEvent Hooks NextVendor Javascript

Last updated 5 years ago