gruppjo

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

gruppjo

/* V1.1 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/d6a023802fe8705ed4e2567746fc31ee */
/*    - instead of NODE_PATH this setup now uses jsconfig.json for resolving modules absolutely */

REACT_APP_API_BASE_URL= https://localhost:5000/
SASS_PATH=node_modules:src/styles-imports/
PRODUCTION=development

gruppjo

/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/2b0111b865bf1d4382a3b60c4e4c7484 */

/* TODO:
  - export names should start with dollar $, so in JS it's immediately obivious we are using an imported value
*/

/*
  - Named after bootstrap model
    https://getbootstrap.com/docs/4.3/getting-started/theming/#theme-colors

gruppjo

/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/09d5324b2644a9ca9dd43f5fd3cbc5ce */

// The z-index increases from top to bottom
$zLayers: (
  'Buffer1',
  'Buffer2',
  'HomeHeader',
  'MainNavigation',
  'Modal'

gruppjo

/* V1.1 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/b5c6389b1ef71369e815c95cb1b33813 */

// The z-index increases from top to bottom
$zLayers: (
  'Buffer1',
  'Buffer2',
  'HomeHeader',
  'MainNavigation',
  'Modal'

gruppjo

/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/f55ae78dbdcbd818c4345e15a210613d */

@import 'animations';
@import 'colors';
@import 'responsive';
@import 'spacings';
@import 'structure';
@import 'typography';

gruppjo

@import "shared.scss";

// each component in storybook is wrapped inside of .root
#root {
  // give 100% so we can have an unbroken chain of height: 100%;
  // https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height
  height: 100%;
}

/* STORY BOOK SPECIFIC GLOBAL STYLES */

gruppjo

{
  // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",

gruppjo

/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/3e1c33537c1f3613f04fea87dac16a36 */

import React from 'react';

import styles from 'styles-imports/shared.scss';

import { CSSTransition } from 'react-transition-group';

/**

gruppjo

/* V1.2 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/b5c6389b1ef71369e815c95cb1b33813 */

$animationDuration: 300ms;
$animationDurationMs: 300;
$animationDurationShort: 150ms;
$animationDurationShortMs: 150;
$animationDurationLong: 30000ms;
$animationDurationLongMs: 30000;
$animationFunction: ease;