EdwardIrby

// ----
// libsass (v3.2.5)
// ----

@mixin table-column-width($column-widths, $cell-padding:null){
@if $cell-padding == null{
  $padding: 8px;
}@else{
  $padding: $cell-padding; 
}

EdwardIrby

//This grid is based http://philipwalton.github.io/solved-by-flexbox/
//Mixins are inefficient in terms of code duplication but when post Processed
//By csso duplication can be removed. The point is not everything needs to happen
//at the preprocess stage.

//FLEX
@mixin flex {
  display: flex;
  flex-wrap: wrap;
}

EdwardIrby

@import "StyleVars.json";

@mixin max-media($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint){
    @media(max-width:(map-get($breakpoints, $breakpoint) - 1) + px){
      @content
    }
  }
  @else if round($breakpoint) == $breakpoint{
    @media(max-width:$breakpoint - 1px){

EdwardIrby

/**
 * Resets
 * --------------------------------------------------
 * Adapted from normalize.css and some reset.css. We don't care even one
 * bit about old IE, so we don't need any hacks for that in here.
 *
 * There are probably other things we could remove here, as well.
 *
 * normalize.css v2.1.2 | MIT License | git.io/normalize

EdwardIrby

@function calculateRem($size) {

  $remSize: $size / 16px;
  @return $remSize * 1rem;
}


@mixin font-size($size) {
  font-size: $size; /* ie8 fallback */
  font-size: calculateRem($size);

EdwardIrby

//z-depth
$z-1: 0px 1px 1.5px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.24);
$z-2: 0px 3px 3px rgba(0, 0, 0, 0.16), 0px 3px 3px rgba(0, 0, 0, 0.23);
$z-3: 0px 10px 10px rgba(0, 0, 0, 0.19), 0px 6px 3px rgba(0, 0, 0, 0.23);
$z-4: 0px 14px 14px rgba(0, 0, 0, 0.25), 0px 10px 5px rgba(0, 0, 0, 0.22);
$z-5: 0px 19px 19px rgba(0, 0, 0, 0.30), 0px 15px 6px rgba(0, 0, 0, 0.22);

$zIndex-1:9;
$zIndex-2:19;
$zIndex-3:199;

EdwardIrby

module.exports = function(mixin, value){
  switch(value){
    case "full":
    var rule = {flex: "0 0 100%"};
    break;
    case "1of2":
    var rule = {flex: "0 0 50%"};
    break;
    case "1of3":
    var rule = {flex: "0 0 33.3333%"};

EdwardIrby

filetype: javascript

detect:
    filename: "(\\.js$|\\.es[5678]?$)"
    header: "^#!.*/(env +)?node( |$)"

rules:
    - constant.number: "\\b[-+]?([1-9][0-9]*|0[0-7]*|0x[0-9a-fA-F]+)([uU][lL]?|[lL][uU]?)?\\b"
    - constant.number: "\\b[-+]?([0-9]+\\.[0-9]*|[0-9]*\\.[0-9]+)([EePp][+-]?[0-9]+)?[fFlL]?"
    - constant.number: "\\b[-+]?([0-9]+[EePp][+-]?[0-9]+)[fFlL]?"

EdwardIrby

import React, { Component, Fragment, Children } from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import PropTypes from 'prop-types';

export class ShadowDom extends Component {
  constructor(props){
    super(props)
    this.getTargetRef = this.getTargetRef.bind(this);
  }
  componentDidMount() {

EdwardIrby

export const BasicUsage = (props) => {
    const { text } = props;
    return (
      <ShadowDom className={ className}>
        <span>{ children }</span>
      </ShadowDom>
    )
}