Skip to content

Instantly share code, notes, and snippets.

@brainbrian
Last active April 28, 2017 16:55
Show Gist options
  • Save brainbrian/8c3d59eb348fc4e8f5bdcc335e6c7703 to your computer and use it in GitHub Desktop.
Save brainbrian/8c3d59eb348fc4e8f5bdcc335e6c7703 to your computer and use it in GitHub Desktop.
// SHADOWS
$text-shadow-none: none;
$text-shadow-xs: 1px 1px 1px rgba(0, 0, 0, .16);
$text-shadow-sm: 2px 2px 2px rgba(0, 0, 0, .16);
$text-shadow-md: 4px 4px 4px rgba(0, 0, 0, .16);
$text-shadow-lg: 8px 8px 8px rgba(0, 0, 0, .16);
$box-shadow-none: none;
$box-shadow: 0 0 5px 2px rgba(0, 0, 0, .35);
$box-shadow-top: 0 -4px 2px -2px rgba(0, 0, 0, .4);
$box-shadow-bottom: 0 4px 2px -2px rgba(0, 0, 0, .4);
$box-shadow-right: 4px 0 2px -2px rgba(0, 0, 0, .4);
$box-shadow-left: -4px 0 2px -2px rgba(0, 0, 0, .4);
$box-shadow-xs: 0 1px 1px rgba(0, 0, 0, .16);
$box-shadow-sm: 0px 2px 2px 0px rgba(0, 0, 0, .16);
$box-shadow-md: 0px 4px 4px 0px rgba(0, 0, 0, .16);
$box-shadow-lg: 0px 8px 8px 0px rgba(0, 0, 0, .16);
$box-shadow-xl: 0px 16px 16px 0px rgba(0, 0, 0, .16);
$box-shadow-xxl: 0px 32px 32px 0px rgba(0, 0, 0, .16);
$box-shadow-xs-inverse: 0 -1px 1px rgba(0, 0, 0, .16);
$box-shadow-sm-inverse: 0px -2px 2px 0px rgba(0, 0, 0, .16);
$box-shadow-md-inverse: 0px -4px 4px 0px rgba(0, 0, 0, .16);
$box-shadow-lg-inverse: 0px -8px 8px 0px rgba(0, 0, 0, .16);
$box-shadow-xl-inverse: 0px -16px 16px 0px rgba(0, 0, 0, .16);
$box-shadow-xxl-inverse: 0px -32px 32px 0px rgba(0, 0, 0, .16);
$box-shadow-inset: inset 0px 3px 3px 0px rgba(0, 0, 0, .16);
$box-shadow-inset-inverse: 0px 32px 32px 0px rgba(0, 0, 0, .16);
$box-shadow-watermark: 0 -2px 4px #F4F6F9 ;
$box-shadow-drag: 0px 2px 4px 0px rgba(0, 0, 0, .40);
$box-shadow-drop-down: 0px 2px 3px 0px rgba(0, 0, 0, .16);
$box-shadow-header: 0 2px 4px rgba(0, 0, 0, .07);
$box-shadow-focus: 0 0 3px #0070D2 ;
$box-shadow-focus-inverse: 0 0 3px #E0E5EE ;
$box-shadow-inline-edit: 0 2px 4px 4px rgba(0, 0, 0, .16);
$box-shadow-focus-inset: 0 0 2px 2px inset #1589EE ; (edited)
// BORDERS
$border-radius-zero: 0;
$border-radius-sm: .125rem;
$border-radius-md: .25rem;
$border-radius-lg: .5rem;
$border-radius-pill: 15rem;
$border-radius-barrel: unquote(20rem + '/' + 60rem);
$border-radius-tab: 5rem 20rem 0 0;
$border-radius-round-tab: 15rem 15rem 0 0;
$border-radius-inverse-round-tab: 0 0 15rem 15rem;
$border-radius-leaf: 15rem 0 15rem 0;
$border-radius-inverse-leaf: 0 15rem 0 15rem;
$border-radius-bullet: 0 15rem 15rem 0;
$border-radius-inverse-bullet: 15rem 0 0 15rem;
$border-radius-circle: 50%;
// EASING VARS
$sine-ease-in: cubic-bezier(.47, 0, .745, .715);
$sine-ease-out: cubic-bezier(.39, .575, .565, 1);
$sine-ease-in-out: cubic-bezier(.39, .575, .565, 1);
$quad-ease-out: cubic-bezier(.25, .46, .45, .94);
$quad-ease-in: cubic-bezier(.55, .09, .68, .53);
$quad-ease-in-out: cubic-bezier(.455, .03, .515, .955);
$cubic-ease-in: cubic-bezier(.55, .06, .68, .19);
$cubic-ease-out: cubic-bezier(.22, .61, .36, 1);
$cubic-ease-in-out: cubic-bezier(.65, .05, .36, 1);
$quart-ease-in: cubic-bezier(.895, .03, .685, .22);
$quart-ease-out: cubic-bezier(.165, .84, .44, 1);
$quart-ease-in-out: cubic-bezier(.77, 0, .175, 1);
$quint-ease-in: cubic-bezier(.755, .05, .855, .06);
$quint-ease-out: cubic-bezier(.23, 1, .32, 1);
$quint-ease-in-out: cubic-bezier(.86, 0, .07, 1);
$circ-ease-in: cubic-bezier(.6, .04, .98, .335);
$circ-ease-out: cubic-bezier(.075, .82, .165, 1);
$circ-ease-in-out: cubic-bezier(.785, .135, .15, .86);
$expo-ease-out: cubic-bezier(.19, 1, .22, 1);
$expo-ease-in: cubic-bezier(.6, .04, .98, .335);
$expo-ease-in-out: cubic-bezier(.785, .135, .15, .86);
$back-in: cubic-bezier(.6, -.28, .74, .05);
$back-out: cubic-bezier(.18, .89, .32, 1.28);
$back-in-out: cubic-bezier(.68,-.55,.265,1.55);
$bounce-in: cubic-bezier(.485, .155, .24, 1.245);
$bounce-out: cubic-bezier(.485, .155, .515, .845);
$bounce-in-out: cubic-bezier(.76, -.245, .24, 1.245);
$smooth: cubic-bezier(.365, .005, .355, 1);
$sine: cubic-bezier(.39, .58, .57, 1);
$quad: cubic-bezier(.25, .46, .45, .94);
$cubic: cubic-bezier(.22, .61, .36, 1);
$expo: cubic-bezier(.19,1,.22,1);
$circ: cubic-bezier(.075,.82,.165,1);
$bounce: cubic-bezier(.65, 1.95, .03, .32);
$spring: cubic-bezier(.25,2,.75,.5);
$elastic: cubic-bezier(.47, 2.02, .31, -.36);
$swing: cubic-bezier(.175, .885, .32, 1.275);
$overshoot: cubic-bezier(.41, .41, .35, 1.2);
$anticipate: cubic-bezier(.5, 0, .8, .15);
$hesitate: cubic-bezier(.2, 1, .9, -.5);
$snap: cubic-bezier(.755, .05, .855, .06);
$sharp: cubic-bezier(.4, .0, .6, 1);
$acceleration: cubic-bezier(.4, .0, 1, 1);
$deceleration: cubic-bezier(.0, .0, .2, 1);
$standard: cubic-bezier(.4, .0, .2, 1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment