gistfile1.scss

/* Variables
-------------------------------------------------- */

$border-color: #ddd;
$fill-light-color: #f8f8f8;
$fill-white-color: #fff;
$fill-dark-color: #404040;

/* Mixins
-------------------------------------------------- */

/* Rounded corners */

@mixin rounded-corners() {
  -webkit-border-radius: 3px;
  -moz-border-radius:    3px;
  -ms-border-radius:     3px;
  border-radius:         3px;
}

@mixin dark-fill(opacity) {
  background: rgba(0,0,0, opacity);
}


/* Padding
------------------------------------------------------- */
.pad0  { padding:5px; }
.pad0y { padding-top:5px; padding-bottom:5px; }
.pad0x { padding-right:5px; padding-left:5px; }

.pad1    { padding:10px; }
.pad2    { padding:20px; }
.pad4    { padding:40px; }

.pad1x { padding-left: 10px; padding-right: 10px;}
.pad2x { padding-left: 20px; padding-right: 20px;}
.pad4x { padding-left: 40px; padding-right: 40px;}

.pad1y { padding-top: 10px; padding-bottom: 10px;}
.pad2y { padding-top: 20px; padding-bottom: 20px;}
.pad4y { padding-top: 40px; padding-bottom: 40px;}

.pad8 {  padding: 80px; }
.pad8y { padding-top: 80px; padding-bottom: 80px;}
.pad8x { padding-left: 80px; padding-right: 80px;}



/* Helpers
-------------------------------------------------- */

.limiter {
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

/* Typography */

.small { font-size: 12px; line-height: 16px; }
.large { font-size: 17px; line-height: 20px; }


/* Borders */

.border { border: 1px solid $borderColor; }
.border-left { border-left: 1px solid; }
.border-right { border-right: 1px solid; }
.border-top { border-top: 1px solid; }
.border-bottom { border-bottom: 1px solid; }

/* Deemphasis */

.quiet { color: rgba(0,0,0,.5); }
.dark .quiet { color: rgba(255,255,255,.5); }

/* Floating */

.float-left { float: left; }
.float-right { float: left; }

/* Clearfix - see http://www.positioniseverything.net/easyclearing.html */

.clearfix { display:block; }
.clearfix:after {
  content:'';
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

.disabled {
  opacity: 0.1;

}

/* Button (generic)
-------------------------------------------------- */

button {
  display: block;
  /* just clear default style */
}



.shadow { box-shadow: 0 0 25px 0 rgba(0,0,0,0.15); }

/* Toolbar
-------------------------------------------------- */

<div class="tool-bar">
  <div class="tool-group text">
    <div class="select">
      <button class="select-toggle pad2x">Paragraph</button>
      <div class="options open">
        <button class="option">Paragraph</button>
        <button class="option">Heading 1</button>
        <button class="option">Heading 2</button>
        <button class="option">Heading 3</button>
      </div>
    </div>
  </div>
  <div class="tool-group formatting">
    <button class="tool">
      <i class="fa fa-bold"></i>
    </button>
    <button class="tool">
      <i class="fa fa-italic"></i>
    </button>
  </div>
  <div class="tool-group cite">
    <div class="dropdown">
      <button class="dropdown-toggle">Insert</button>
      <div class="options open">
        <button class="option">Figure</button>
        <button class="option">Table</button>
      </div>
    </div>
  </div>
  <div class="tool-group cite">
    <div class="dropdown">
      <button class="dropdown-toggle">Cite</button>
      <div class="options open">
        <button class="option">Figure</button>
        <button class="option">Reference</button>
      </div>
    </div>
  </div>
  <div class="tool-group manage">
    <div class="dropdown">
      <button class="dropdown-toggle">Manage</button>
      <div class="options open">
        <button class="option">Figures</button>
        <button class="option">References</button>
      </div>
    </div>
  </div>
</div>



.tool-bar {
  height: 40px;
  background: $fill-light-color;

  /* Simple toggle buttons */
  button.tool {
    float: left;
    margin: 5px;
    height: 30px;
    width: 30px;
  }

  button.tool.active {
    @include dark-fill(0.1);
  }

  .select .select-toggle {
    height: 40px;
    line-height: 50px;
  }


}




/* Button in toolbar */

.toolbar .button {}



/* TODO:

- make complete toolbar example
- try it with a dark background
*/