Service Portal CSS

CSS rules for pages and widgets can be written using regular CSS or as SCSS syntax. Rules are scoped to the page or widget–this means that rules defined here affect just the page or widget and nothing else.

Table of Contents

1. Service Portal Layout Model
   • Portal CSS
   • Page CSS
   • Containers and Rows CSS
   • Instances and Widget CSS
2. SCSS Basic
3. List of functions
4. List of mixins

Service Portal Layout Model

A portal is represented by pages with containers, rows and instances.

In /sp_config, the page edit tree will show the layout model hierarchy.

Portal

Portal CSS are editable in /sp_config portal edit. CSS variables and rules that are defined here are scoped and available to pages, containers, rows, and instances. Use portal css for global definitions shared by all pages.

Page

Page CSS variables and rules are scoped and affects the page and all elements below.

Container

Container CSS are defined by specificing a parent class or css class.

Row

Row CSS are defined by specificing a CSS class.

Column

Column CSS are defined by specificing a CSS class.

Widget Instance

Instance CSS variables and rules are scoped and affects the widget instance.

Widget

Widget CSS variables and rules are scoped and affects the widget and all instances.

SCSS Primer

Service Portal SCSS is a subset of the SASS Specification, the following are supported:

• Variables
• Nesting
• Operators
• Mixins

Variables

SCSS variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. SCSS uses the $ symbol to make something a variable.

SCSS supports the follow data types:

• Numbers (including units)
• Strings (with quotes or without)
• Colors (name, or names)
• Booleans

Variables can also be arguments to or results from one of several available functions or mixins. During translation, the values of the variables are inserted into the output CSS document.

Here's an example:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

SCSS will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Here's an example of some typical styles:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable. When the widget is rendered, the generated CSS would be something like this:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Operators

SCSS has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article.

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

The generated CSS will look like:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. Here's an example for border-radius.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Here is the generated CSS:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Additional Resources

• MDN CSS Documentation
• Sass/SCSS Reference