Jump To:

  1. Variables
    1. $config
    2. $styles
  2. Mixins
    1. set()
    2. set-styles()
    3. styles()
    4. create-row-style()
  3. Functions
    1. get()

Panel

A structured container for content with distinct header, body, and footer sections that can bleed to the edges.

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "background-color" : rgb(255, 255, 255),
  "border" : null,
  "border-radius" : true,
  "box-shadow" : true,
  "margin-bottom" : 1.5em,
  "overflow" : null,
);
File Information
  • File: _panel.scss
  • Group: panel
  • Type: variable
  • Lines (comments): 28-35
  • Lines (code): 37-44

Map Properties

Name Type Default Description
background-color Color rgb(255, 255, 255) The background color of the panel
border Color null Set border to panel
border-radius Dimension element.$config.border-radius The border radius of the panel
box-shadow CssValue element.$config.box-shadow The box-shadow of the panel
margin-bottom Dimension 1.5rem The bottom margin of the panel
overflow CssValue null Value for overflow, not included by default as it interferes with position sticky, but could be useful for cropping if that's needed (can be set on rows too)

$styles

Variable Type: Map

Styles Map (for unique variations/modifiers)

  • Use this map to define distinct visual styles for the panel
  • This map is two levels the first level is the name of the modifier (see default below). This will become the modifier for the pane; so ("transparent" : (...)) = .panel--transparent. The second level is that modifier row modifiers (ie. panel__row--header) (see row options below)
  • Keyword "default" means without modifier for both parent and row configs
    • For example "default" as panel container modifier name will mean styles for this without any modifiers
    • In a panels row config (second level) "default" will refer to the non-modified row (ie .panel__row)
  • Order matters, default should be first
  • Row Options
    • Each row can have the following options: overflow: Set overflow property if needed, aspect-ratio, height, min-height, padding, margin: Can be used to create gap between container and row background-color, font-weight, font-family, color, box-shadow, grow: Default the panel will grow to fill the containers height, passing false disables this border-top: If a string is passed it will resolved as an element rule style border-bottom: If a string is passed it will resolved as an element rule style
$styles: (
  "default" : (
    "default" : (
      "padding": 1em,
    ),
    "header" : (
      "padding" : (0.75em 1em),
      "background-color" : #e7e7e7,
      "border-bottom" : "default",
      "font-weight" : bold,
      "grow" : false,
      "breakpoints" : (
        "small" : (
          "direction" : "max",
          "padding" : (0.25em 0.5em)
        )
      )
    ),
    "footer" : (
      "padding" : (0.5em 1em),
      "background-color" : #f4f4f4,
      "border-top" : "default",
      "grow" : false
    ),
    "separator-top" : (
      "border-top" : "light",
    ),
    "separator-bottom" : (
      "border-bottom" : "light",
    )
  ),
  "transparent" : (
    "default" : (
      "padding" : (1em 0),
      "margin" : (0 1em),
    ),
    "header" : (
      "padding" : (1em 0),
      "margin" : (0 1em),
      "background-color" : transparent,
      "grow" : false
    ),
    "footer" : (
      "padding" : (1em 0),
      "margin" : (0 1em),
      "background-color" : transparent,
      "grow" : false
    )
  ),
  "compact" : (
    "default" : (
      "padding" : (0.25em 0.5em)
    ),
    "header" : (
      "padding" : (0.25em 0.5em)
    ),
    "body" : (
      "padding" : (0.5em 1em)
    )
  )
);
File Information
  • File: _panel.scss
  • Group: panel
  • Type: variable
  • Lines (comments): 46-72
  • Lines (code): 74-134

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _panel.scss
  • Group: panel
  • Type: mixin
  • Lines (comments): 136-139
  • Lines (code): 140-142

Examples

@include ulu.component-panel-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

set-styles()

Mixin

Set style variations

  • See $styles for more information on map properties/structure
File Information
  • File: _panel.scss
  • Group: panel
  • Type: mixin
  • Lines (comments): 153-156
  • Lines (code): 157-159

Parameters

Name Type Description
$changes Map Map of changes (options for style include all config properties)
$merge-mode String Merge mode see utils.map-merge() [null

Require

styles()

Mixin

Output component styles

File Information
  • File: _panel.scss
  • Group: panel
  • Type: mixin
  • Lines (comments): 161-163
  • Lines (code): 164-216

Examples

@include ulu.component-panel-styles();

Require

create-row-style()

Mixin

Create row styles

File Information
  • File: _panel.scss
  • Group: panel
  • Type: mixin
  • Lines (comments): 218-219
  • Lines (code): 220-246

Parameters

Name Type Description
$props Map Row Options

Require

Functions

get()

Function

Get a config option

File Information
  • File: _panel.scss
  • Group: panel
  • Type: function
  • Lines (comments): 144-147
  • Lines (code): 148-151

Examples

@include ulu.component-panel-get("property");

Parameters

Name Type Description
$name Map Name of property

Require