Modern visual theme

Learn about visual thememore

On this page

SKY UX uses various border and shadow styles to bound, divide, and highlight content. The styles are designed to maintain visual hierarchy regardless of how complex pages become or how many nested containers they include.

As with other types of formatting or decoration in SKY UX, use lines minimally. Remember that white space and positioning can group or highlight content without extra subdivisions or boundaries.

Borders and lines

In general, components handle borders and line styles.

Border separator

1px solid #cdcfd2

The border separator is a gray, single-pixel line for borders on inputs and some buttons. This stroke holds up between two different colors, which makes it ideal for borders and boundaries.

class="sky-border-bottom-dark"
class="sky-border-dark"
@include sky-border(dark)

Row separator

1px dotted #cdcfd2

The row separator is a dotted line that reduces visual weight. It separates items in lists, such as rows in grids or repeaters. The gray line works with or without row striping, and it stretches to the width of the items it separates, not the width of the parent container.

class="sky-border-bottom-row"
@include sky-border(row)

Rounded corners

border-radius: 3px

SKY UX uses rounded corners on most containers and interactive elements. Components use the correct corner styling automatically.

class="sky-rounded-corners"

Shadows

In general, components handle the use of shadows, and you should rarely apply them directly to elements. If a need arises outside of a component, you likely need to create a component for that scenario.

Basic shadow

box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3)

This shadow provides a visual offset for elements such as dropdowns that float over other elements.

class="sky-shadow"

Focus shadow

box-shadow: 0 0 8px 0 rgba(0, 180, 241, 0.6)
border: 1px solid #00b4f1
outline: none

This shadow provides a visual offset for focused form fields. The @include sky-field-status(active) class automatically applies it to inputs.

class="sky-form-control"
@include sky-field-status(active)

Error shadow

box-shadow: 0 0 8px 0 rgba(239, 64, 68, 0.6)
border: 1px solid #ef4044
outline: none

This shadow provides a visual offset for invalid form fields. Angular validation classes automatically apply it to inputs.

input class="ng-invalid ng-touched"
select class="ng-invalid submitted"
@include sky-field-status(invalid)