Wolfr

each category in colorCategories
    h4= category.name
    ul.br-color-swatch-list
        each color in category.colors
            li.br-color-swatch-item
                .br-color-swatch-preview(style=`background-color: ${color.value}`)
                .br-color-swatch-data
                    .swatch-name= color.name
                    .swatch-value= color.value

Wolfr

- var veryShortContent = 'Lorem ipsum';
- var shortContent = 'Lorem ipsum dolor sit amet';
- var longContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '.repeat(5).trim()
- var samples = [];
- samples.push({name: 'Headline 1', code: '<h1 class="mdc-typography--headline1">' + veryShortContent + '</h1>', extraClass: contentClass})
- samples.push({name: 'Headline 2',code: '<h2 class="mdc-typography--headline2">' + veryShortContent + '</h2>', extraClass: contentClass})
- samples.push({name: 'Headline 3', code: '<h3 class="mdc-typography--headline3">' + shortContent + '</h3>', extraClass: contentClass})
- samples.push({name: 'Headline 4', code: '<h4 class="mdc-typography--headline4">' + shortContent + '</h4>', extraClass: contentClass})
- samples.push({name: 'Headline 5', code: '<h5 class="mdc-typography--headline5">' + shortContent + '</h5>', extraClass: contentClass})
- samples.push({name: 'Headline 6', code: '<h6 class="mdc-typ

Wolfr

//- Button 1.1
//- 1.1: Added disabled state
mixin c-button(options, attributes)
  - var DEFAULT_OPTIONS = {};
  - DEFAULT_OPTIONS.label = 'Button label' // string
  - DEFAULT_OPTIONS.skin = 'default' // string
  - DEFAULT_OPTIONS.size = false // string
  - DEFAULT_OPTIONS.href = false // string
  - DEFAULT_OPTIONS.icon = false // boolean
  - DEFAULT_OPTIONS.disabled = false // boolean

Wolfr

if error
    .u-spacer-bottom
        .c-alert.c-alert--danger
            p Wrong username/password combination.

Wolfr

extends /templates/_layouts/master

block append pageVariables
    - var moduleTitle = 'Sign In'

block body
    .o-flex.o-flex--center.u-maximize-height
        .c-panel.c-panel--small
            .c-panel__header
                h2.c-panel__title Sign In

Wolfr

block append pageVariables
    - var moduleTitle = 'Sign In'
    - var htmlClass = 'u-maximize-height'
    - var bodyClass = 'u-maximize-height'

Wolfr

extends sign-in

block append pageVariables
    - var error = true

Wolfr

extends /templates/_layouts/master

block append pageVariables
    - var moduleTitle = 'Sign In'
    - var htmlClass = 'u-maximize-height'
    - var bodyClass = 'u-maximize-height'

block body
    .o-flex.o-flex--center.u-maximize-height
        .c-panel.c-panel--small

Wolfr

Wolfr