bogdansoare

const StatelessToggler = (props) => (
  <div onClick={props.onToggle}>
    <div>{props.label}</div>
    {props.isOpen && props.children}
  </div>
)

const Toggler = React.createClass({
  getInitialState() {

bogdansoare

/*!
 * Grunt
 * $ npm install grunt-contrib-uglify grunt-autoprefixer grunt-contrib-cssmin grunt-contrib-imagemin grunt-contrib-sass grunt-contrib-watch grunt-contrib-concat grunt-contrib-clean grunt-contrib-jshint grunt-notify --save-dev
 */

module.exports = function(grunt) {

  grunt.initConfig({

    // Sass

bogdansoare

@mixin breakpoint($min: 0, $max: 0) {
  $type: type-of($min);
  
  @if $type == string {
    @if $min == xs { 
      @media (max-width: 767px) { @content; }       // Mobile Devices
    }
    
    @else if $min == sm {
      @media (min-width: 768px) { @content; }       // Tablet Devices

bogdansoare

// Group: Font & Baseline Sizes
$base-font-size: (13/16)*100%;
$baseline-unitless: 23 / (16*($base-font-size/100%));
$baseline: $baseline-unitless * 1rem;

bogdansoare

// Involves some hacky manually-coded pixel values, but a lifesaver for debugging grids
@if $debug {
  .debug--cols {
    @each $group in $col-groups {
        .grid--debug-#{$group}-cols:before {
          content: '';
          position: absolute;
          margin: 0 auto;
          top: 0;
          right: 0;

bogdansoare

/*-----------------------------------*\

  Grid (derived from Toast: http://daneden.github.io/Toast)

  An insane grid.
  You'd be mad to use it.

  Usage
  =====

bogdansoare

// Not shown here is the Grunt task that takes source SVGs, creates PNGs (later optimised by imageoptim) and minified SVGs

@mixin bg-image($image, $size: 16px, $repeat: no-repeat, $position: center) {
  // SVG backgrounds with PNG fallback
  // All browsers that support multiple backgrounds also support SVGs. Woohoo!
  background-image: image-url("#{$image}.png");
  // inline-image requires Compass
  background-image: inline-image("#{$image}.min.svg"), none;

  background-size: $size;

bogdansoare

// In your mixin file
=retina
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi)
    @content
    
// Call this mixin
.something
  +retina
    something: something

bogdansoare

//Set Variables
$button-white:          #ffffff;
$button-green:          #44ca00;
$button-green-dark:     #369a12;
$button-blue:           #a6d1f9;
$button-blue-dark:      #14283e;
$button-gray:           #eeeeee;
$button-red:            #9e0b0f;

//Create Array

bogdansoare

// Weights
$hairline-weight: 100;
$thin-weight:     200;
$light-weight:    300;
$normal-weight:   400;
$medium-weight:   500;
$semibold-weight: 600;
$bold-weight:     700;
$xbold-weight:    800;
$black-weight:    900;