poly-web-ui 1.5.0-dev

Sideline component

Example

njk 
{% for type in ['', 'center', 'right'] %}
    {% for tag in ['h1', 'h2', 'h3', 'h4', 'h5', 'span', 'div'] %}
        <{{tag}} class="sideline {{ type }}">Text mit Linie {{type}}</{{tag}}>
    {% endfor %}
    <br/><br/>
{% endfor %}
html compiled 
<h1 class="sideline ">Text mit Linie </h1>

 <h2 class="sideline ">Text mit Linie </h2>

 <h3 class="sideline ">Text mit Linie </h3>

 <h4 class="sideline ">Text mit Linie </h4>

 <h5 class="sideline ">Text mit Linie </h5>
 <span class="sideline ">Text mit Linie </span>

<div class="sideline ">Text mit Linie</div>
<br/>
<br/>
 <h1 class="sideline center">Text mit Linie center</h1>

 <h2 class="sideline center">Text mit Linie center</h2>

 <h3 class="sideline center">Text mit Linie center</h3>

 <h4 class="sideline center">Text mit Linie center</h4>

 <h5 class="sideline center">Text mit Linie center</h5>
 <span class="sideline center">Text mit Linie center</span>

<div class="sideline center">Text mit Linie center</div>
<br/>
<br/>
 <h1 class="sideline right">Text mit Linie right</h1>

 <h2 class="sideline right">Text mit Linie right</h2>

 <h3 class="sideline right">Text mit Linie right</h3>

 <h4 class="sideline right">Text mit Linie right</h4>

 <h5 class="sideline right">Text mit Linie right</h5>
 <span class="sideline right">Text mit Linie right</span>

<div class="sideline right">Text mit Linie right</div>
<br/>
<br/>

Variables

$sideline-height (Number)

scss 
$sideline-height: 1px !default;

Sideline height.

Used By

@mixin sideline()

$sideline-color (Color)

scss 
$sideline-color: color(lighter-gray) !default;

Line color.

Used By

@mixin sideline()

$sideline-spacer (Number)

scss 
$sideline-spacer: $global-margin !default;

Spacer between text and line.

Used By

@mixin sideline()

@mixin sideline()

Mixin to apply sideline

Requires

$sideline-color (Color)

$sideline-height (Number)

$sideline-spacer (Number)