frontend > app

2017-10-25 22:49:04 -07:00
parent aa34db8318
commit 4863680d86
239 changed files with 11 additions and 11 deletions
--- a/app/styles/animations.js
+++ b/app/styles/animations.js
@@ -0,0 +1,25 @@
+// @flow
+import { keyframes } from 'styled-components';
+
+export const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+
+export const fadeAndScaleIn = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+
+export const pulsate = keyframes`
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+`;
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -0,0 +1,143 @@
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --line-height-1: 1;
+  --line-height-2: 1.125;
+  --line-height-3: 1.25;
+  --line-height-4: 1.5;
+  --letter-spacing: 1;
+  --caps-letter-spacing: 0.2em;
+  --bold-font-weight: bold;
+}
+
+html,
+body,
+.viewport {
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+}
+
+body,
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+body {
+  font-size: 16px;
+  line-height: 1.5;
+  margin: 0;
+  color: #617180;
+  background-color: #fff;
+  display: flex;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+svg {
+  max-height: 100%;
+}
+a {
+  color: #16B3FF;
+  text-decoration: none;
+  cursor: pointer;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+  line-height: 1.25;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  color: #1f2429;
+}
+h1 {
+  font-size: 2em;
+}
+h2 {
+  font-size: 1.5em;
+}
+h3 {
+  font-size: 1.25em;
+}
+h4 {
+  font-size: 1em;
+}
+h5 {
+  font-size: 0.875em;
+}
+h6 {
+  font-size: 0.75em;
+}
+p,
+dl,
+ol,
+ul,
+pre,
+blockquote {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+code,
+pre,
+samp {
+  font-family: 'Atlas Typewriter', 'Source Code Pro', Menlo, Consolas,
+    'Liberation Mono', monospace;
+}
+code,
+samp {
+  font-size: 85%;
+  padding: 0.125em;
+}
+pre {
+  font-size: 85%;
+  overflow: scroll;
+}
+blockquote {
+  font-size: 1.25em;
+  font-style: italic;
+  margin-left: 0;
+}
+hr {
+  margin: 2em 0;
+  border: 0;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: #dedede;
+}
+*[role='button'] {
+  cursor: pointer;
+}
+
+.hljs {
+  border: 1px solid rgba(0, 0, 0, 0.0625);
+  padding: 1em;
+  border-radius: 0.25em;
+}
+
+.activeDropZone {
+  background: #4E5C6E;
+}
+
+.activeDropZone a {
+  color: #FFF !important;
+}
+
+.ReactModal__Body--open {
+  overflow: hidden;
+}
--- a/app/styles/constants.js
+++ b/app/styles/constants.js
@@ -0,0 +1,65 @@
+// @flow
+
+export const layout = {
+  padding: '1.5vw 1.875vw',
+  vpadding: '1.5vw',
+  hpadding: '1.875vw',
+  sidebarWidth: '280px',
+  sidebarMinWidth: '250px',
+  sidebarMaxWidth: '350px',
+};
+
+export const size = {
+  tiny: '2px',
+  small: '4px',
+  medium: '8px',
+  large: '16px',
+  huge: '24px',
+  enormous: '32px',
+};
+
+export const fontSize = {
+  small: '14px',
+  medium: '16px',
+  large: '18px',
+  huge: '24px',
+};
+
+export const fontWeight = {
+  ultraLight: 100,
+  thin: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semiBold: 600,
+  bold: 700,
+  heavy: 800,
+};
+
+export const color = {
+  text: '#171B35',
+
+  /* Brand */
+  primary: '#2B8FBF',
+  danger: '#D0021B',
+  warning: '#f08a24' /* replace */,
+  success: '#43AC6A' /* replace */,
+  info: '#a0d3e8' /* replace */,
+  offline: '#000000',
+
+  /* Dark Grays */
+  slate: '#9BA6B2',
+  slateLight: '#DAE1E9',
+  slateDark: '#4E5C6E',
+
+  /* Light Grays */
+  smoke: '#F4F7FA',
+  smokeLight: '#F9FBFC',
+  smokeDark: '#E8EBED',
+
+  /* Misc */
+  white: '#FFFFFF',
+  black: '#000000',
+
+  /* Alert colors */
+};
--- a/app/styles/fonts.css
+++ b/app/styles/fonts.css
@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'Atlas Grotesk';
+  src: url('../fonts/atlas/AtlasGrotesk-Regular-Web.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Atlas Grotesk';
+  src: url('../fonts/atlas/AtlasGrotesk-Medium-Web.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Atlas Grotesk';
+  src: url('../fonts/atlas/AtlasGrotesk-Light-Web.woff') format('woff');
+  font-weight: lighter;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Atlas Grotesk';
+  src: url('../fonts/atlas/AtlasGrotesk-LightItalic-Web.woff') format('woff');
+  font-weight: lighter;
+  font-style: italic;
+}*/
+
+@font-face {
+  font-family: 'Atlas Grotesk';
+  src: url('../fonts/atlas/AtlasGrotesk-RegularItalic-Web.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Atlas Grotesk';
+  src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Atlas Grotesk';
+  src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Atlas Typewriter';
+  src: url('../fonts/atlas/AtlasTypewriterRegular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Atlas Typewriter';
+  src: url('../fonts/atlas/AtlasTypewriterMedium.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
--- a/app/styles/prism.css
+++ b/app/styles/prism.css
@@ -0,0 +1,141 @@
+/*
+
+Based on Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
+code[class*="language-"],
+pre[class*="language-"] {
+  -webkit-font-smoothing: initial;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 13px;
+  line-height: 1.375;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  color: #24292e;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a737d;
+}
+
+.token.punctuation {
+  color: #5e6687;
+}
+
+.token.namespace {
+  opacity: .7;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+  color: #d73a49;
+}
+
+.token.property {
+  color: #c08b30;
+}
+
+.token.tag {
+  color: #3d8fd1;
+}
+
+.token.string {
+  color: #032f62;
+}
+
+.token.selector {
+  color: #6679cc;
+}
+
+.token.attr-name {
+  color: #c76b29;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #22a2c9;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+  color: #d73a49;
+}
+
+.token.function {
+  color: #6f42c1;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+  color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+  color: #3d8fd1;
+}
+
+.token.deleted {
+  text-decoration: line-through;
+}
+
+.token.inserted {
+  border-bottom: 1px dotted #202746;
+  text-decoration: none;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.important {
+  color: #c94922;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+pre > code.highlight {
+  outline: 0.4em solid #c94922;
+  outline-offset: .4em;
+}
--- a/app/styles/transitions.css
+++ b/app/styles/transitions.css
@@ -0,0 +1,27 @@
+.fadeIn-appear {
+  opacity: 0.01;
+}
+
+.fadeIn-appear.fadeIn-appear-active {
+  opacity: 1;
+  transition: opacity 250ms ease-in;
+  transition-delay: 0.35s;
+}
+
+.fadeIn-enter {
+  opacity: 0.01;
+}
+
+.fadeIn-enter.fadeIn-enter-active {
+  opacity: 1;
+  transition: opacity 200ms ease-in;
+}
+
+.fadeIn-leave {
+  opacity: 1;
+}
+
+.fadeIn-leave.fadeIn-leave-active {
+  opacity: 0.01;
+  transition: opacity 200ms ease-in;
+}