Variables

Global

Generally speaking, new global variables are rare. Most global variables were created early in the project to set baseline property configuration. Think of these as cross-module design standards. As such, global variables may have references in the various Invision Modules (beyond invision-ui) and should be changed only in coordination with the UX design team.

When creating new global variables, our convention requires namespacing with $inv- for easy parsing and distinction from local variables.

Local

Local variables are left to the discretion of the developer. Typically, local variables are created for one-off component sizing (especially when math is involved), or component sub-theming (remapping higher order variables to local context). If you find yourself calculating values specific to a component or using the same values repeatedly, consider creating a local variable. Note, SASS doesn't have the concept of truly scoped 'local' variables; except for variables inside declaration blocks, all variables are global and rely on source order.

When creating new local variables, our convention requires namespacing with the component's CSS selector name as the prefix to ensure easy parsing and to avoid collisions with global variables.

Mixins

The use of mixins in Invsion is restricted from what you might find in other frameworks; this intentional. We avoid mixins with large 'function signatures' in terms of parameters, which is indicative of trying to do too much. In general, we focus on single responsibility mixins with a minimal number of parameters to accomplish the job.

For example, all .l- layout components utilize or expose mixins for reuse. These are unopinionated and are used specifically to reduce copy-pasted source code. Note, these do not fully protect against large output filesize, which is the main anti-pattern we're attempting to mitigate by restricting mixin use.

The main positive benefit we get from mixins relates to theming. Using @content transclusion mixins, we're able reduce boilerplate code while relying on component-level theme files. brandStyling() and contentThemeStyling() exemplify our theme mixins.

Functions

Like global variables, it is unlikely you will be creating new functions. Typically, functions are used to for variable look-ups. For example, the palette and inv-z functions are used to look up values from SASS maps containing baseline properties. In cases where we have created functions for look-ups, there should be almost no instance where the function is not used. That is, declarations like z-index should always used a value stored in the SASS map and retrieved from the inv-z function.

In Use

Border

Variables

// a value for consistently defining border radius
$inv-border-radius: 4px;

Mixins

// Set border radius to left corners only, and set the rest to 0
@include inv-border-radius-left-only($border-radius-size);

// Set border radius to right corners only, and set the rest to 0
@include inv-border-radius-right-only($border-radius-size);

// Set border radius to top corners only, and set the rest to 0
@include inv-border-radius-top-only($border-radius-size);

// Set border radius to bottom corners only, and set the rest to 0
@include inv-border-radius-bottom-only($border-radius-size);

Button

Variables

// Set the always square action button size across the interface
$inv-square-action-size: 1.75em;

Mixins

// Create a full-flavored filter button. Handles optional
// icon and/or drop arrow included in the button.
@include filter-button($button-selector-name);

// Creates button-like hover, active, focus, and disabled
// behavior/effects
@include pseudo-button;

// Creates pill button layout. Assumes that the user is
// also using pseudo-button or filter-button
// mixins as well.
@include pill-button;

// Set the button to a very specific height. Uses line-height
// to ensure vertically centered text
@include inv-button-by-height($height, $label-size);

// Add highlights typical of button and button-like ui
// elements for focus, hover, active.
@include inv-button-state-highlights;

// Set the background color, plus typical ui states for
// hover, focus, etc. for a typical button or button-like element
@include inv-button-background-color-state($background-color);

Data table

Variables

Mixins

// These mixins provide a convenient way to apply CSS attributes without the need to
// know the complex selector hierarchy in UI Grid
@include inv-apply-ui-grid-left-pinned-column-edge-cell(
    // cell css content
);
@include inv-apply-ui-grid-right-pinned-column-edge-cell(
    // cell css content
);
@include inv-apply-ui-grid-left-pinned-edge-column(
    // cell css content
);
@include inv-apply-ui-grid-right-pinned-edge-column(
    // cell css content
);

Display

Mixins

// Completely remove from the flow but leave available to screen readers.
@include hidden-visually;

Form

Variables

// a common selector for styling only those elements considered text inputs
// note: does not include textarea
$inv-text-only-input-filter: ':not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio])';

Header

Variables

// set the header height. used by multiple high-level CSS layout classes to keep
// the heigher height in sync.
$inv-header-height: 60px;

Mixins

// create the sizing for an inner title.
@inclue inv-innerTitle();

## Link

### Mixins
```scss
// Give a link an initial look like regular text without underline,
// but when the user hovers, the link has underline
@include inv-text-link();

Loading

Mixins

// used to set up a container to be a loading container for showing
// the loading animation/indication
.c-someComponent {
    @include inv-loading-containment;
}

Palette

Pallette is a special scss map of colors used to keep any color usage consistent across all intefaces. Please see the _palette.scss file for the current set of palette colors.

Variables

// palettes is the mapping of colors in a scss map. Not typically used directly.
$palettes: (
    $invision (
        //...
    ),
    $care (
        //...
    )
    //...
);

Functions

// the palette function is used to access the palette map to retrieve a specific color
// example:
.c-someComponent {
    border-color: palette(invision, border_medium);
}

Shadows

Variables

// shadows variable used for the different semantic shadow types.
$inv-simple-shadow: 0 1px 2px rgba(0, 0, 0, 0.175);
$inv-popout-shadow: 0 1px 2px rgba(0, 1, 3, 0.32);
$inv-pronounced-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
$inv-box-shadow: 1.5px 1.5px 4px 0 rgba(0, 0, 0, 0.48);
$inv-text-shadow: 1.4px 1.4px 2px rgba(0, 0, 0, 0.48);
$inv-inset-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
$inv-search-panel-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);

Spacing

Variables

// base spacing unit. used to keep layout rhythym consistent.
$inv-base-spacing: 4px;

Text & Typography

Variables

// These variables are not typically used (use the font-size mixin instead)
$inv-base-font-size
$inv-base-line-height

// These variables should be used anytime a non-inherited font-weight is needed.
$inv-font-weight-thin
$inv-font-weight-medium
$inv-font-weight-normal
$inv-font-weight-semi-bold
$inv-font-weight-bold

Mixins

// Adds both font-size and line-height properties to css.
// Will ensure a whole number line-height to avoid any
// vertical offset rendering issues.
@include font-size($font-size-in-pixels);

// Will apply the properties (outside of width/max-width)
// needed to truncate text with ellipsis.
@ include text-overflow;

Z Index

Variables

// A variable map of normalized z-index depths.
// used to have a single source to ensure z-index fidelity cutting
// across all ui components
$inv-zindex: (
    default: 5,
    progressbar: 5,
    header: 50,
    nav: 61,
    minifiedSearchPanel: 63,
    context-menu: 65,
    modalOverlay: 100,
    modal: 101,
    loadingIndicatorOverlay: 103,
    loadingIndicator: 104,
    popout: 2000
) !default;

Functions

// Used to retrieve a z-index value for normalizing depth.
// example:
.c-popout {
    //...
    z-index: inv-z('popout');
}