Line

Base #

Superkube generates line styles based on the properties specified in $variants and $colors. The default values are as follows:

// =Colors
$colors: (
    line: (
        default: palette(black-o, 10)
    )
);

// =Variants
$variants: (
    line: (
        default: (
            margin-top: 1.5em,
            margin-bottom: 1.5em,
            color: color(line, default),
            height: 1px,
            width: 100%,
            align: left,
            style: solid
        )
    )
);

The default line is used without class simply as an hr tag.

<hr>

Custom #

You can create a line with your own settings by extending $colors and $variants. See also how to work with colors and how to work with variants for modules.

// =Colors
$colors: map-extend($colors, (
    line: (
        dashed-primary: palette(primary, base),
        strong: palette(black)
    )
));

// =Variants
$variants: map-extend($variants, (
    line: (
        dashed-primary: (
            color: color(line, dashed-primary),
            style: dashed
        ),
        strong: (
            color: color(line, strong),
            height: 4px
       )
    )
));

As a result Superkube will generate lines with line-strong and line-dashed-primary classes.

<hr class="line-strong">
<hr class="line-dashed-primary">