Divider

dependency:

@import "magic/helper/divider";

Divider are a nice hr-like text divider:

I'm a divider :)

There are many usecases for dividers

I'm a .half divider

There are many usecases for dividers

I'm a .tight divider

ie. divide Buttons:

Sign in with Facebook

or

isn't it nice

Usage:

In HTML

      
  <div class="divider">
    <span>or</span>
  </div>
  
  - or -
  
  <div class="divider">
    <h2>Huge Divider</h2>
  </div>
  
  ( all text ellements: h1 h2 h3 h4 h5 h6 p span ... )

Change colors depending on parent SASS

      
  .your-colored-parent {
    hr, .divider > *:before, .divider > *:after {
      border-top: solid 1px rgba(0,0,0,.23);
      border-bottom: solid 1px rgba(255,255,255,.42);
    }
    .divider > * { color: red; }
  }

Parent box needs background!

Content element doesn't matter .. also buttons are fine after v.0.0.0.79

.btn-splited

.btn-divided

It is transparent! so background doesn't matter after v.0.0.0.78

.dark

.divider.tight span

.divider h3

.divider.half p.lead

.bright

.divider.tight span

.divider h3

.divider.half p.lead

.brand

.divider.tight span

.divider h3

.divider.half p.lead

.one

.divider.tight span

.divider h3

.divider.half p.lead

.two

.divider.tight span

.divider h3

.divider.half p.lead

.three

.divider.tight span

.divider h3

.divider.half p.lead

.blank

.divider.tight span

.divider h3

.divider.half p.lead