ColemanCollins

// ---------------------------------------------------------------------------
// Imports

@import "susy";

// ---------------------------------------------------------------------------
// Basic (mobile) Grid

$total-columns  : 4;
$column-width   : 5em;

ColemanCollins

import React from 'react';
import styles from './Link.module.scss';

const generateCurvePath = (startPos, endPos) => {
    const width = Math.abs(startPos.x - endPos.x);
    const height = Math.abs(startPos.y - endPos.y);
    const isHorizontal = width > height;
    const isVertical = !isHorizontal;
    const topToBottom = startPos.y < endPos.y;
    const bottomToTop = !topToBottom;

ColemanCollins

// =============================================
// Breakpoints
// =============================================

$breakpoint-extra-small: 435px;
$breakpoint-small: 770px;
$breakpoint-large: 992px;

@mixin breakpoint($feature, $value) {
    @media only screen and ($feature: $value) {

ColemanCollins

> > **Ignacio**
> > Morning Guys.
> > Why's there so much controversy around Adobe's optical kerning? [link to @typographica tweet]
> > > **Typographica**
> > > My full-time job is deprogramming designers who were taught to rely on Adobe's Optical kerning.
> > > Teachers, stop doing this.

Now, i'm not exactly sure _what_ @typographica is attempting to say, but it's one of two things. I'll attempt to explain both, but first, I'm going to explain kerning in Adobe CS products, just as a refresher and context-setting exercise.

Kerning, to distinguish from tracking, is the calculated space between two letters —a "letter pair"— as opposed to all of the letters. There are two basic kerning options in CS products: "Metrics" (aka Auto), and "Optical," each of which do a different thing to create a default spacing for every possible

ColemanCollins

// this file demonstrates how to use the CSS PIE extension for
// legacy versions of Internet Explorer. In many cases, PIE will allow
// you to style in CSS things that you'd have to do using image chops otherwise.
//
// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
@import "compass/css3/pie";
@import "compass/css3";

// Set this to wherever you end up putting your behavior file.
//

ColemanCollins

$account-management-button-color: $action-button-color;
$account-management-button-margin: $grid-unit*2 0;
$account-management-text-margin: $grid-unit*2 0;

.accountManagement{
  button {
		@include button($account-management-button-color);
		margin: $account-management-button-margin;
	}
	p {

ColemanCollins

.HeartAnimationContainer .HeartAnimation {
  margin-top: -2px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC1QAAABkCAYAAAA7MJAoAABZBElEQVR42uzBAQEAAACAkP6v7ggCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDZgwMBAAAAACD/10ZQVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVXYuXuWKOAAjuP/paF3UO8gaAwJ90Ck1E49HygDL+ye8s5DF0kzMJCgGhxssMDFoRIqbPAp7zofwG5IaqkhagjaImhw/LdF0VbQqXw+b+G7/vjB/1cb6i4F9ECLA2B9dKBxdTTTGNg3VooXCwE9AAAAAAAAONzK7Q3HNy+dGd9OnDoW0IM/7PQ3na/1NyUCeqCHHmhxIJWLPaXHY6W4UuwbCeiBFvvccr6nupTvrQUAAAAAAADgcKukmi9UU83dgX1ha2JwrHItG7duDE4F9OA3cebOkZXJkXfLk8Mf9+5PHw3ogR56oMWB8yLd9nAp0/t5NZ1YDOiBFgAAAAAAAGDAS71VryYbXuaTn6r55PeNwa7Tgbp6kz53Ynm88PXB1ERcvD60t5vvOBnQg582My0L86Urca6Uj+V060JAD/TQAy0AAAAAAAAAAANe/sX2zeHF5zN349PpW3Hr9lg5UFeb2bbdR/2tca5QjPOpZKykW14H9ODX177b5Wzn20q2+/1auu1eQA/00AMtAAAAAAAAAMAbsgEvf2sn3dK+lOv6NltIxdnC5fgk1xtrA2c7AnWznkmkKrn2D6+G+p5t5Dq/rGUShYAeAAAAAMAP9u7npek4juP4hyAo+gfqTwi6RZDUSQJbufS7NbdpTTfS77bvvvs

ColemanCollins

//this is the haml structure—make sure you replace COUNTER VARIABLE with the actual variable.

#progress.gray
  #progress-outer
    #progress-inner{style: "height: 100%; width: #{ (5) + ((COUNTER VARIABLE / 200) * 95) }% ;"}
      .count= COUNTER VARIABLE
    .goalcount="2,000"

ColemanCollins

$fake-radio-size: $baseline-grid-height * 3;

$radio-dot-size: $baseline-grid-height * 2;
$radio-distance-from-left: ($fake-radio-size - $radio-dot-size)/2;
$radio-distance-from-top: ($fake-radio-size - $radio-dot-size)/2;

@mixin radio {
  line-height: $baseline-grid-height * 4;
  margin-bottom: $baseline-grid-height;

ColemanCollins

$grid-guttter: 24px;
$page-edge-padding: 12px; //optional additional padding on the edge of the viewport

@mixin clearfix() {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}