mirror of
https://github.com/wassname/talk.git
synced 2026-07-06 05:17:19 +08:00
Merge branch 'next' into next-passport
This commit is contained in:
Wyatt Johnson
@@ -53,6 +53,7 @@ module.exports = {
|
||||
appTsconfig: resolveApp("src/core/client/tsconfig.json"),
|
||||
appLocales: resolveApp("src/locales"),
|
||||
appThemeVariables: resolveApp("src/core/client/ui/theme/variables.ts"),
|
||||
appThemeVariablesCSS: resolveApp("src/core/client/ui/theme/variables.css"),
|
||||
testsSetup: resolveApp("src/setupTests.js"),
|
||||
appNodeModules: resolveApp("node_modules"),
|
||||
|
||||
|
||||
@@ -1,27 +1,73 @@
|
||||
const precss = require("precss");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const fontMagician = require("postcss-font-magician");
|
||||
// Allow importing typescript files.
|
||||
require("ts-node/register");
|
||||
|
||||
const kebabCase = require("lodash/kebabCase");
|
||||
const mapKeys = require("lodash/mapKeys");
|
||||
const mapValues = require("lodash/mapValues");
|
||||
const pickBy = require("lodash/pickBy");
|
||||
const flat = require("flat");
|
||||
const flexbugsFixes = require("postcss-flexbugs-fixes");
|
||||
const paths = require("./paths");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const postcssFontMagician = require("postcss-font-magician");
|
||||
const postcssFlexbugsFixes = require("postcss-flexbugs-fixes");
|
||||
const postcssVariables = require("postcss-css-variables");
|
||||
const postcssPresetEnv = require("postcss-preset-env");
|
||||
const postcssNested = require("postcss-nested");
|
||||
const postcssImport = require("postcss-import");
|
||||
const postcssPrependImports = require("postcss-prepend-imports");
|
||||
const postcssAdvancedVariables = require("postcss-advanced-variables");
|
||||
|
||||
delete require.cache[paths.appThemeVariables];
|
||||
const variables = require(paths.appThemeVariables);
|
||||
const variables = require(paths.appThemeVariables).default;
|
||||
const flatKebabVariables = mapKeys(
|
||||
flat(variables, { delimiter: "-" }),
|
||||
mapValues(flat(variables, { delimiter: "-" }), v => v.toString()),
|
||||
(_, k) => kebabCase(k)
|
||||
);
|
||||
|
||||
// These are the default css standard variables.
|
||||
const cssVariables = pickBy(
|
||||
flatKebabVariables,
|
||||
(v, k) => !k.startsWith("breakpoints-")
|
||||
);
|
||||
|
||||
// These are sass style variables used in media queries.
|
||||
const mediaQueryVariables = mapValues(
|
||||
pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),
|
||||
// Add unit to breakpoints.
|
||||
// Add 1 to support mobile first approach where we start
|
||||
// with the smallest screen and gradually add styling for the
|
||||
// next bigger screen. This is realized using `min-width` without
|
||||
// ever using `max-width`.
|
||||
v => `${Number.parseInt(v) + 1}px`
|
||||
);
|
||||
|
||||
module.exports = {
|
||||
// Necessary for external CSS imports to work
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2677
|
||||
ident: "postcss",
|
||||
plugins: [
|
||||
precss({ variables: flatKebabVariables }),
|
||||
fontMagician(),
|
||||
flexbugsFixes,
|
||||
// This allows us to define dynamic css variables.
|
||||
postcssPrependImports({
|
||||
path: "",
|
||||
files: [paths.appThemeVariablesCSS],
|
||||
}),
|
||||
// Needed by above plugin.
|
||||
postcssImport(),
|
||||
// Support nesting.
|
||||
postcssNested(),
|
||||
// Sass style variables to be used in media queries.
|
||||
postcssAdvancedVariables({ variables: mediaQueryVariables }),
|
||||
// CSS standard variables for everything else.
|
||||
postcssVariables({
|
||||
variables: cssVariables,
|
||||
}),
|
||||
// Provides a modern CSS environment.
|
||||
postcssPresetEnv(),
|
||||
// Does all the font handling logic.
|
||||
postcssFontMagician(),
|
||||
// Fix known flexbox bugs.
|
||||
postcssFlexbugsFixes,
|
||||
// Vendor prefixing.
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
">1%",
|
||||
|
||||
Generated
+317
-187
@@ -1323,16 +1323,6 @@
|
||||
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
|
||||
"dev": true
|
||||
},
|
||||
"@csstools/postcss-image-set-function": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/postcss-image-set-function/-/postcss-image-set-function-1.0.0.tgz",
|
||||
"integrity": "sha512-B+uThZhN3rTRV7mjw3c+GCxIrBkHIAihnfZEb5Ig3+hauQMWGARD3j8UoMX7Hk6w4pBpMbm3Ggs9TVKvtn/kkA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.20",
|
||||
"postcss-value-parser": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"@csstools/sass-import-resolve": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/sass-import-resolve/-/sass-import-resolve-1.0.0.tgz",
|
||||
@@ -1857,6 +1847,15 @@
|
||||
"from": "github:coralproject/patched#types/react-relay",
|
||||
"dev": true
|
||||
},
|
||||
"@types/react-responsive": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-responsive/-/react-responsive-3.0.1.tgz",
|
||||
"integrity": "sha512-ti7MKe0AuWCGpNkRzRsRB8ExS7NZotXtDtD27rX4HiZML37SetbIp3cw5FDXIeqIC7a3TzWuPjv/I9Qcu4YL3w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-test-renderer": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.0.1.tgz",
|
||||
@@ -6247,6 +6246,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"css-mediaquery": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
|
||||
"integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=",
|
||||
"dev": true
|
||||
},
|
||||
"css-modules-loader-core": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
|
||||
@@ -6383,9 +6388,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"cssdb": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-1.6.0.tgz",
|
||||
"integrity": "sha512-KBxrzWDyY0aFA3DkAH0SDWhIKp1or83pBLqacXq4VWNrOCwf/G9An+VDXIW8qAGJz11o9nO8mQezq1ZJOdaF8A==",
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-3.1.0.tgz",
|
||||
"integrity": "sha512-9+ASPG9O+d876YfZJjStXszOGn3EEOp5scMeCwZb/+TwTZfadQFshz/Vsh1vGET9HzaXvsfV+1O0ShFb52DddA==",
|
||||
"dev": true
|
||||
},
|
||||
"cssesc": {
|
||||
@@ -10153,6 +10158,12 @@
|
||||
"decamelize": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"hyphenate-style-name": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
|
||||
"integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es=",
|
||||
"dev": true
|
||||
},
|
||||
"iconv-lite": {
|
||||
"version": "0.4.19",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
|
||||
@@ -12761,6 +12772,15 @@
|
||||
"integrity": "sha1-iQwsGzv+g/sA5BKbjkz+ZFJw+dE=",
|
||||
"dev": true
|
||||
},
|
||||
"matchmediaquery": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz",
|
||||
"integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-mediaquery": "^0.1.2"
|
||||
}
|
||||
},
|
||||
"math-expression-evaluator": {
|
||||
"version": "1.2.17",
|
||||
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
|
||||
@@ -14257,92 +14277,33 @@
|
||||
"postcss": "^6"
|
||||
}
|
||||
},
|
||||
"postcss-apply": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-apply/-/postcss-apply-0.9.0.tgz",
|
||||
"integrity": "sha512-Ysel7CyF7FiZQno9oADqKXsfZw4DvTcQXtFvN1nLZQA3woRiVYV2M5kGJSrqQVWGjp/zqNUjUpXHs24TgxFjxg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"babel-runtime": "^6.23.0",
|
||||
"balanced-match": "^0.4.2",
|
||||
"postcss": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"balanced-match": {
|
||||
"version": "0.4.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
|
||||
"integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-atroot": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-atroot/-/postcss-atroot-0.1.3.tgz",
|
||||
"integrity": "sha1-Z1LAIwx0UUBUk0WysOMOvtoBpAU=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^5.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"chalk": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
|
||||
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^2.2.1",
|
||||
"escape-string-regexp": "^1.0.2",
|
||||
"has-ansi": "^2.0.0",
|
||||
"strip-ansi": "^3.0.0",
|
||||
"supports-color": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"supports-color": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
||||
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
|
||||
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "5.2.18",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
|
||||
"integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^1.1.3",
|
||||
"js-base64": "^2.1.9",
|
||||
"source-map": "^0.5.6",
|
||||
"supports-color": "^3.2.3"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
|
||||
"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-attribute-case-insensitive": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz",
|
||||
"integrity": "sha1-lNxCLI+QmX8WvTOjZUu77AhJY7Q=",
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-3.0.1.tgz",
|
||||
"integrity": "sha512-X/viSS9YrAoDnRa2R4sElsAmW+scOWeVW11FjWQN8m+FW1YY0jdIA9fuBSSF1pKsJTYXJXGJ1oAjFHl8cqcmKw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.0",
|
||||
"postcss-selector-parser": "^2.2.3"
|
||||
"postcss": "^6.0.23",
|
||||
"postcss-selector-parser": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cssesc": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
|
||||
"integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-selector-parser": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
|
||||
"integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cssesc": "^1.0.1",
|
||||
"indexes-of": "^1.0.1",
|
||||
"uniq": "^1.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-calc": {
|
||||
@@ -14406,6 +14367,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-color-functional-notation": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-1.0.1.tgz",
|
||||
"integrity": "sha512-8ECwUd75SwcjLMzFdRVRBqjVoHwGeWpLQKCNIQo9T+QeCrUNKI1NJ6rgpni5vo7iZ7MZy21qKqUieMM3D0wHYQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.22",
|
||||
"postcss-values-parser": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"postcss-color-hex-alpha": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-3.0.0.tgz",
|
||||
@@ -14460,16 +14431,6 @@
|
||||
"postcss-values-parser": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"postcss-color-rgb": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-color-rgb/-/postcss-color-rgb-2.0.0.tgz",
|
||||
"integrity": "sha1-FFOcinExSUtILg3RzCZf9lFLUmM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.1",
|
||||
"postcss-value-parser": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"postcss-colormin": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-2.2.2.tgz",
|
||||
@@ -14591,6 +14552,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-css-variables": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.9.0.tgz",
|
||||
"integrity": "sha512-pSNj57bdBaFnyDzt96SZOidMMWY7Q5OySQdKsTxaxehYO6EtNC5SAKIwjah/poh5vUmNthkrlOd03bP+HNGuCA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"escape-string-regexp": "^1.0.3",
|
||||
"extend": "^3.0.1",
|
||||
"postcss": "^6.0.8"
|
||||
}
|
||||
},
|
||||
"postcss-custom-media": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz",
|
||||
@@ -14621,22 +14593,28 @@
|
||||
}
|
||||
},
|
||||
"postcss-dir-pseudo-class": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-3.0.0.tgz",
|
||||
"integrity": "sha512-iEVgue59Xs6vz9CQZtlyonW/BmVfpqWglcUyIP2rQaBpH1a2T8Iax61eXY2NjTAq5r3Xjxwk4lrA84acoAiWHw==",
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-4.0.0.tgz",
|
||||
"integrity": "sha512-ZAeXMIyZukHHeDt5IFchWB+okPzasb8YnpkXIgTiJl4216X1IplMrODjihZIBDXNE2RdJRBCAOx8uGzCnGSxTA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.20",
|
||||
"postcss-selector-parser": "^3.1.1"
|
||||
"postcss": "^6.0.22",
|
||||
"postcss-selector-parser": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cssesc": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
|
||||
"integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-selector-parser": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
|
||||
"integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
|
||||
"integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"dot-prop": "^4.1.1",
|
||||
"cssesc": "^1.0.1",
|
||||
"indexes-of": "^1.0.1",
|
||||
"uniq": "^1.0.1"
|
||||
}
|
||||
@@ -14939,14 +14917,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-extend-rule": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-extend-rule/-/postcss-extend-rule-1.1.0.tgz",
|
||||
"integrity": "sha512-+NXtLOY49Xcx9173SJAYj41esTRTpihSLoKpj5yzoBki9PZK4HF37AH9AVyCeLFJL9fzhh0YFuk/3eyeZ9d/jw==",
|
||||
"postcss-env-function": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-1.0.0.tgz",
|
||||
"integrity": "sha512-UVkdbVCRAEr79XkS6uxMRWIHYrFNuhXmjw6gxyesCBXzzHIvYOoz5UKTWM39xX3j9vGO5waVzxq/VzEiZgsM0g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.11",
|
||||
"postcss-nesting": "^4.2.1"
|
||||
"postcss": "^6.0.22",
|
||||
"postcss-values-parser": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"postcss-filter-plugins": {
|
||||
@@ -15018,14 +14996,23 @@
|
||||
}
|
||||
},
|
||||
"postcss-focus-visible": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-2.0.0.tgz",
|
||||
"integrity": "sha512-nJaq5CK2YBWB1fu1SeK0qXAk0TJncY3Ms7iwFov+J3sNetecvTeCQuSxQCf9U9T9Vjusnb3zzThBs5XwP/eb/g==",
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-3.0.0.tgz",
|
||||
"integrity": "sha512-6i3HsOrWNelxBYPh/HWAXF9lPwCFAfFVlUTZqsLRXYMPhcXH1eXdItozRBvT9l5pYF4ddJJbgk4JOp0au0QToA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0"
|
||||
}
|
||||
},
|
||||
"postcss-focus-within": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-2.0.0.tgz",
|
||||
"integrity": "sha512-LTbT/dxZ3FahpOv1XZMyRLNnBk5QWVU4HL/p82iFkzoPNVhNQazaYIujHXTOAKea5clgjbj6GdFj7mU7qzy1kQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.21"
|
||||
}
|
||||
},
|
||||
"postcss-font-family-system-ui": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-font-family-system-ui/-/postcss-font-family-system-ui-3.0.0.tgz",
|
||||
@@ -15056,6 +15043,37 @@
|
||||
"postcss": "^6.0.1"
|
||||
}
|
||||
},
|
||||
"postcss-gap-properties": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-1.0.0.tgz",
|
||||
"integrity": "sha512-snL2k0Nie72J0uCsKgfO2Sd5rs3Wlhsk+k9uVzyMaeBH9gouNPPY7tZ4bopRJmBISbZEUtvF8Gchat6nOFQHdg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.22"
|
||||
}
|
||||
},
|
||||
"postcss-image-set-function": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-2.0.0.tgz",
|
||||
"integrity": "sha512-2bpCIj2wFhIhpyM1G/ZZgBJM8K/VKbEcQ0SX5MI9MTGv4giPMnuXMa/sX3bHXHhi1PL4v2WRfqD1+w5T9EhFqg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.22",
|
||||
"postcss-values-parser": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"postcss-import": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz",
|
||||
"integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.1",
|
||||
"postcss-value-parser": "^3.2.3",
|
||||
"read-cache": "^1.0.0",
|
||||
"resolve": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"postcss-initial": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-2.0.0.tgz",
|
||||
@@ -15066,6 +15084,17 @@
|
||||
"postcss": "^6.0.1"
|
||||
}
|
||||
},
|
||||
"postcss-lab-function": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-1.0.1.tgz",
|
||||
"integrity": "sha512-kxaHXTRjlBLDpJUMsrGM0GnVgBrMqQz1HfaXdv3VNpz2EwwUhrU9uVfqv/NAtiWt6ZkD7IK2MUlncRoj024lIA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@csstools/convert-colors": "^1.4.0",
|
||||
"postcss": "^6.0.22",
|
||||
"postcss-values-parser": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"postcss-load-config": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz",
|
||||
@@ -15730,15 +15759,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-nesting": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-4.2.1.tgz",
|
||||
"integrity": "sha512-IkyWXICwagCnlaviRexi7qOdwPw3+xVVjgFfGsxmztvRVaNxAlrypOIKqDE5mxY+BVxnId1rnUKBRQoNE2VDaA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.11"
|
||||
}
|
||||
},
|
||||
"postcss-normalize-charset": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
|
||||
@@ -15920,6 +15940,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-overflow-shorthand": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-1.0.1.tgz",
|
||||
"integrity": "sha512-QeJk23W8dLP2DrWYSKTwfFfh4Tcy5Msr58vuuxCPcCijX/07jva0OGNKtUH9vZ6NnXB2WEsnfIIg5M0ScPEWeQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.22"
|
||||
}
|
||||
},
|
||||
"postcss-page-break": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-1.0.0.tgz",
|
||||
@@ -15929,60 +15958,154 @@
|
||||
"postcss": "^6.0.16"
|
||||
}
|
||||
},
|
||||
"postcss-preset-env": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-3.5.0.tgz",
|
||||
"integrity": "sha512-1I7ve+XzmNLJMZDORLOjSpY28t2H1qADEUcp2tQzuLBxAsbWMBUTDpSPsCKBduoqd4zWuH4bI/04W4T4hveHQw==",
|
||||
"postcss-place": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-3.0.1.tgz",
|
||||
"integrity": "sha512-6Cg0z39zBU4FOS85Z6+Us+GCIW7UqKdOGH/9j26LwMzZ3L909wG7NP3BF+L12AEeIL5XfI8Q5SWu9Or3nJTS8g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@csstools/postcss-image-set-function": "^1.0.0",
|
||||
"browserslist": "^3.2.4",
|
||||
"caniuse-lite": "^1.0.30000823",
|
||||
"cssdb": "^1.6.0",
|
||||
"postcss": "^6.0.21",
|
||||
"postcss-apply": "^0.9.0",
|
||||
"postcss-attribute-case-insensitive": "^2.0.0",
|
||||
"postcss": "^6.0.22",
|
||||
"postcss-values-parser": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"postcss-prepend-imports": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-prepend-imports/-/postcss-prepend-imports-1.0.1.tgz",
|
||||
"integrity": "sha1-v0WBiAhcM/82mVzJbJFojWSYjig=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"chalk": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
|
||||
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^2.2.1",
|
||||
"escape-string-regexp": "^1.0.2",
|
||||
"has-ansi": "^2.0.0",
|
||||
"strip-ansi": "^3.0.0",
|
||||
"supports-color": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"supports-color": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
||||
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
|
||||
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "5.2.18",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
|
||||
"integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^1.1.3",
|
||||
"js-base64": "^2.1.9",
|
||||
"source-map": "^0.5.6",
|
||||
"supports-color": "^3.2.3"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
|
||||
"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-preset-env": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-5.2.1.tgz",
|
||||
"integrity": "sha512-zsGFBKtTyCY5YxOq6Q/WR4oa9/LOKawEWMxJ7UpMtfj1t50OWeGZadRQp/i7DSSWjKus+eJKLIHDxLaobwhidQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"autoprefixer": "^8.6.3",
|
||||
"browserslist": "^3.2.8",
|
||||
"caniuse-lite": "^1.0.30000859",
|
||||
"cssdb": "^3.1.0",
|
||||
"postcss": "^6.0.23",
|
||||
"postcss-attribute-case-insensitive": "^3.0.1",
|
||||
"postcss-color-functional-notation": "^1.0.1",
|
||||
"postcss-color-hex-alpha": "^3.0.0",
|
||||
"postcss-color-mod-function": "^2.4.2",
|
||||
"postcss-color-rebeccapurple": "^3.0.0",
|
||||
"postcss-color-rgb": "^2.0.0",
|
||||
"postcss-color-rebeccapurple": "^3.1.0",
|
||||
"postcss-custom-media": "^6.0.0",
|
||||
"postcss-custom-properties": "^7.0.0",
|
||||
"postcss-custom-selectors": "^4.0.1",
|
||||
"postcss-dir-pseudo-class": "^3.0.0",
|
||||
"postcss-focus-visible": "^2.0.0",
|
||||
"postcss-dir-pseudo-class": "^4.0.0",
|
||||
"postcss-env-function": "^1.0.0",
|
||||
"postcss-focus-visible": "^3.0.0",
|
||||
"postcss-focus-within": "^2.0.0",
|
||||
"postcss-font-family-system-ui": "^3.0.0",
|
||||
"postcss-font-variant": "^3.0.0",
|
||||
"postcss-gap-properties": "^1.0.0",
|
||||
"postcss-image-set-function": "^2.0.0",
|
||||
"postcss-initial": "^2.0.0",
|
||||
"postcss-lab-function": "^1.0.1",
|
||||
"postcss-logical": "^1.1.1",
|
||||
"postcss-media-minmax": "^3.0.0",
|
||||
"postcss-nesting": "^4.2.1",
|
||||
"postcss-nesting": "^6.0.0",
|
||||
"postcss-overflow-shorthand": "^1.0.1",
|
||||
"postcss-page-break": "^1.0.0",
|
||||
"postcss-pseudo-class-any-link": "^4.0.0",
|
||||
"postcss-place": "^3.0.1",
|
||||
"postcss-pseudo-class-any-link": "^5.0.0",
|
||||
"postcss-replace-overflow-wrap": "^2.0.0",
|
||||
"postcss-selector-matches": "^3.0.1",
|
||||
"postcss-selector-not": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"postcss-property-lookup": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-property-lookup/-/postcss-property-lookup-2.0.0.tgz",
|
||||
"integrity": "sha512-KUb53a7UZWDMVb0SRODOonc4H1wlbgQ0VfYwmJaR1xWPorhariEz0U7x0ri3W/imFs6HqLYWP7hl2yMvi5Ty+w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"object-assign": "^4.0.1",
|
||||
"postcss": "^6.0.6",
|
||||
"tcomb": "^3.2.21"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss-nesting": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-6.0.0.tgz",
|
||||
"integrity": "sha512-Yoglsy6eZbDCbRIXoYSmnIt9ao4xyg07iFwVBd7WyIkDzMSeRxIqUk8xEAdkeJQ7eGfWo6RufrTU7FSUjZ22fg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.22"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-pseudo-class-any-link": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz",
|
||||
"integrity": "sha1-kVKgYT00UHIFE+iJKFS65C0O5o4=",
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-5.0.0.tgz",
|
||||
"integrity": "sha512-rA5grdRhLLMMI654eOZVuKGr4fUBQNGSH0K+7j5839CiBA/IvNt/Ewt7aIrkGZPySKI3nqzs34HefO8U0Fxahg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.1",
|
||||
"postcss-selector-parser": "^2.2.3"
|
||||
"postcss": "^6.0.22",
|
||||
"postcss-selector-parser": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cssesc": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
|
||||
"integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-selector-parser": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
|
||||
"integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cssesc": "^1.0.1",
|
||||
"indexes-of": "^1.0.1",
|
||||
"uniq": "^1.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-reduce-idents": {
|
||||
@@ -16422,21 +16545,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"precss": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/precss/-/precss-3.1.2.tgz",
|
||||
"integrity": "sha512-TAEKJjzNyKIwyDeJ3yuaTl1x0CoFw+VyycR3dO18Kl2rGU/rPNocCYH1cry1sstWwGKl3RpJhDfZ2ZdzscM0IQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.19",
|
||||
"postcss-advanced-variables": "^2.3.3",
|
||||
"postcss-atroot": "^0.1.3",
|
||||
"postcss-extend-rule": "^1.1.0",
|
||||
"postcss-nested": "^3.0.0",
|
||||
"postcss-preset-env": "^3.2.2",
|
||||
"postcss-property-lookup": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"prelude-ls": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
|
||||
@@ -17158,6 +17266,17 @@
|
||||
"prop-types": "^15.5.8"
|
||||
}
|
||||
},
|
||||
"react-responsive": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz",
|
||||
"integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hyphenate-style-name": "^1.0.0",
|
||||
"matchmediaquery": "^0.2.1",
|
||||
"prop-types": "^15.6.1"
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
|
||||
@@ -17242,6 +17361,23 @@
|
||||
"react-is": "^16.4.1"
|
||||
}
|
||||
},
|
||||
"read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
"integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"pify": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"pify": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
@@ -19256,12 +19392,6 @@
|
||||
"integrity": "sha512-dQRhbNQkRnaqauC7WqSJ21EEksgT0fYZX2lqXzGkpo8JNig9zGZTYoMGvyI2nWmXlE2VSVXVDu7wLVGu/mQEsg==",
|
||||
"dev": true
|
||||
},
|
||||
"tcomb": {
|
||||
"version": "3.2.27",
|
||||
"resolved": "https://registry.npmjs.org/tcomb/-/tcomb-3.2.27.tgz",
|
||||
"integrity": "sha512-XWdJW7F/M3YzXhDEUP8ycmNWoYymBtsHwCHoda0YF44RthJsls95TqDrmpAlC1sB/KXaCvkdBlcNRq+AaV6klA==",
|
||||
"dev": true
|
||||
},
|
||||
"term-size": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
|
||||
|
||||
+9
-2
@@ -77,9 +77,9 @@
|
||||
"@types/ioredis": "^3.2.8",
|
||||
"@types/jest": "^23.1.1",
|
||||
"@types/joi": "^13.0.8",
|
||||
"@types/jsdom": "^11.0.6",
|
||||
"@types/jsonwebtoken": "^7.2.7",
|
||||
"@types/lodash": "^4.14.109",
|
||||
"@types/jsdom": "^11.0.6",
|
||||
"@types/luxon": "^0.5.3",
|
||||
"@types/mongodb": "^3.0.19",
|
||||
"@types/node": "^10.3.1",
|
||||
@@ -90,6 +90,7 @@
|
||||
"@types/query-string": "^6.1.0",
|
||||
"@types/react-dom": "^16.0.6",
|
||||
"@types/react-relay": "github:coralproject/patched#types/react-relay",
|
||||
"@types/react-responsive": "^3.0.1",
|
||||
"@types/react-test-renderer": "^16.0.1",
|
||||
"@types/recompose": "^0.26.1",
|
||||
"@types/relay-runtime": "github:coralproject/patched#types/relay-runtime",
|
||||
@@ -128,10 +129,15 @@
|
||||
"jsdom": "^11.11.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"npm-run-all": "^4.1.3",
|
||||
"postcss-advanced-variables": "^2.3.3",
|
||||
"postcss-css-variables": "^0.9.0",
|
||||
"postcss-flexbugs-fixes": "^3.3.1",
|
||||
"postcss-font-magician": "^2.2.1",
|
||||
"postcss-import": "^11.1.0",
|
||||
"postcss-loader": "^2.1.5",
|
||||
"precss": "^3.1.2",
|
||||
"postcss-nested": "^3.0.0",
|
||||
"postcss-prepend-imports": "^1.0.1",
|
||||
"postcss-preset-env": "^5.2.1",
|
||||
"prettier": "^1.13.4",
|
||||
"query-string": "^6.1.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
@@ -140,6 +146,7 @@
|
||||
"react-dom": "^16.4.0",
|
||||
"react-final-form": "^3.6.0",
|
||||
"react-relay": "github:coralproject/patched#react-relay",
|
||||
"react-responsive": "^4.1.0",
|
||||
"react-test-renderer": "^16.4.1",
|
||||
"recompose": "^0.27.1",
|
||||
"relay-compiler": "github:coralproject/patched#relay-compiler",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import { StatelessComponent } from "react";
|
||||
|
||||
import { Center } from "talk-ui/components";
|
||||
import { Flex } from "talk-ui/components";
|
||||
|
||||
import StreamContainer from "../containers/StreamContainer";
|
||||
|
||||
@@ -12,9 +12,9 @@ export interface AppProps {
|
||||
const App: StatelessComponent<AppProps> = props => {
|
||||
if (props.asset) {
|
||||
return (
|
||||
<Center>
|
||||
<Flex justifyContent="center">
|
||||
<StreamContainer asset={props.asset} />
|
||||
</Center>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
return <div>Asset not found </div>;
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
.root {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.gutterBottom {
|
||||
margin-bottom: calc(2px * $spacing-unit);
|
||||
margin-bottom: calc(1px * var(--spacing-unit));
|
||||
}
|
||||
|
||||
.topBar {
|
||||
margin-bottom: calc(1px * $spacing-unit);
|
||||
margin-bottom: calc(0.5px * var(--spacing-unit));
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.root {
|
||||
border-left: 3px solid;
|
||||
padding-left: calc(2px * $spacing-unit);
|
||||
padding-left: calc(1px * var(--spacing-unit));
|
||||
}
|
||||
|
||||
.level0 {
|
||||
border-color: $palette-secondary-darkest;
|
||||
border-color: var(--palette-secondary-darkest);
|
||||
}
|
||||
|
||||
@@ -3,11 +3,12 @@
|
||||
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 400px;
|
||||
margin-bottom: calc(2px * $spacing-unit);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: calc(1px * var(--spacing-unit));
|
||||
}
|
||||
|
||||
.postButtonContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
.root {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer";
|
||||
import PostCommentFormContainer from "../containers/PostCommentFormContainer";
|
||||
import ReplyListContainer from "../containers/ReplyListContainer";
|
||||
import Logo from "./Logo";
|
||||
import * as styles from "./Stream.css";
|
||||
|
||||
export interface StreamProps {
|
||||
assetID: string;
|
||||
@@ -20,7 +21,7 @@ export interface StreamProps {
|
||||
|
||||
const Stream: StatelessComponent<StreamProps> = props => {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.root}>
|
||||
<Logo gutterBottom />
|
||||
<PostCommentFormContainer assetID={props.assetID} />
|
||||
<div id="talk-comments-stream-log" role="log" aria-live="polite">
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
>
|
||||
<Logo
|
||||
gutterBottom={true}
|
||||
/>
|
||||
@@ -56,7 +58,9 @@ exports[`renders correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`when there is more disables load more button 1`] = `
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
>
|
||||
<Logo
|
||||
gutterBottom={true}
|
||||
/>
|
||||
@@ -126,7 +130,9 @@ exports[`when there is more disables load more button 1`] = `
|
||||
`;
|
||||
|
||||
exports[`when there is more renders a load more button 1`] = `
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
>
|
||||
<Logo
|
||||
gutterBottom={true}
|
||||
/>
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
|
||||
exports[`loads more comments 1`] = `
|
||||
<div
|
||||
className="Center-root"
|
||||
className="Flex-root Flex-justifyCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
>
|
||||
<h1
|
||||
className="Typography-root Typography-heading1 Typography-gutterBottom"
|
||||
>
|
||||
@@ -111,9 +113,11 @@ exports[`loads more comments 1`] = `
|
||||
|
||||
exports[`renders comment stream 1`] = `
|
||||
<div
|
||||
className="Center-root"
|
||||
className="Flex-root Flex-justifyCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
>
|
||||
<h1
|
||||
className="Typography-root Typography-heading1 Typography-gutterBottom"
|
||||
>
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
|
||||
exports[`renders comment stream 1`] = `
|
||||
<div
|
||||
className="Center-root"
|
||||
className="Flex-root Flex-justifyCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
>
|
||||
<h1
|
||||
className="Typography-root Typography-heading1 Typography-gutterBottom"
|
||||
>
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
|
||||
exports[`renders comment stream 1`] = `
|
||||
<div
|
||||
className="Center-root"
|
||||
className="Flex-root Flex-justifyCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
>
|
||||
<h1
|
||||
className="Typography-root Typography-heading1 Typography-gutterBottom"
|
||||
>
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
|
||||
exports[`renders comment stream 1`] = `
|
||||
<div
|
||||
className="Center-root"
|
||||
className="Flex-root Flex-justifyCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
>
|
||||
<h1
|
||||
className="Typography-root Typography-heading1 Typography-gutterBottom"
|
||||
>
|
||||
@@ -109,9 +111,11 @@ exports[`renders comment stream 1`] = `
|
||||
|
||||
exports[`show all replies 1`] = `
|
||||
<div
|
||||
className="Center-root"
|
||||
className="Flex-root Flex-justifyCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
>
|
||||
<h1
|
||||
className="Typography-root Typography-heading1 Typography-gutterBottom"
|
||||
>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
&:enabled,
|
||||
&:disabled {
|
||||
padding: 5px 20px;
|
||||
border-radius: $round-corners;
|
||||
border-radius: var(--round-corners);
|
||||
background-color: transparent;
|
||||
/* TODO: hover styles for the default button */
|
||||
}
|
||||
@@ -24,70 +24,70 @@
|
||||
|
||||
.primary:enabled,
|
||||
.primary:disabled {
|
||||
background-color: $palette-primary-main;
|
||||
background-color: var(--palette-primary-main);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.primary:enabled {
|
||||
&:hover {
|
||||
background-color: $palette-primary-light;
|
||||
background-color: var(--palette-primary-light);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $palette-primary-lighter;
|
||||
background-color: var(--palette-primary-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
.primary:enabled.invert,
|
||||
.primary:disabled.invert {
|
||||
background-color: transparent;
|
||||
border: 1px solid $palette-primary-main;
|
||||
color: $palette-primary-main;
|
||||
border: 1px solid var(--palette-primary-main);
|
||||
color: var(--palette-primary-main);
|
||||
}
|
||||
|
||||
.primary:enabled.invert {
|
||||
&:hover {
|
||||
border-color: $palette-primary-light;
|
||||
color: $palette-primary-light;
|
||||
border-color: var(--palette-primary-light);
|
||||
color: var(--palette-primary-light);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: $palette-primary-lighter;
|
||||
color: $palette-primary-lighter;
|
||||
border-color: var(--palette-primary-lighter);
|
||||
color: var(--palette-primary-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary:enabled,
|
||||
.secondary:disabled {
|
||||
background-color: $palette-secondary-main;
|
||||
background-color: var(--palette-secondary-main);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.secondary:enabled {
|
||||
&:hover {
|
||||
background-color: $palette-secondary-light;
|
||||
background-color: var(--palette-secondary-light);
|
||||
}
|
||||
&:active {
|
||||
background-color: $palette-secondary-lighter;
|
||||
background-color: var(--palette-secondary-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary:enabled.invert,
|
||||
.secondary:disabled.invert {
|
||||
background-color: transparent;
|
||||
border: 1px solid $palette-secondary-main;
|
||||
color: $palette-secondary-main;
|
||||
border: 1px solid var(--palette-secondary-main);
|
||||
color: var(--palette-secondary-main);
|
||||
}
|
||||
|
||||
.secondary:enabled.invert {
|
||||
&:hover {
|
||||
border-color: $palette-secondary-light;
|
||||
color: $palette-secondary-light;
|
||||
border-color: var(--palette-secondary-light);
|
||||
color: var(--palette-secondary-light);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: $palette-secondary-lighter;
|
||||
color: $palette-secondary-lighter;
|
||||
border-color: var(--palette-secondary-lighter);
|
||||
color: var(--palette-secondary-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
.root {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import cn from "classnames";
|
||||
import * as React from "react";
|
||||
import { ReactNode, StatelessComponent } from "react";
|
||||
|
||||
import { withStyles } from "talk-ui/hocs";
|
||||
import { PropTypesOf } from "talk-ui/types";
|
||||
|
||||
import * as styles from "./Center.css";
|
||||
|
||||
interface InnerProps {
|
||||
/**
|
||||
* This prop can be used to add custom classnames.
|
||||
* It is handled by the `withStyles `HOC.
|
||||
*/
|
||||
classes: Partial<typeof styles>;
|
||||
className?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const Center: StatelessComponent<InnerProps> = props => {
|
||||
return (
|
||||
<div className={cn(props.className, props.classes.root)}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const enhanced = withStyles(styles)(Center);
|
||||
export type CenterProps = PropTypesOf<typeof enhanced>;
|
||||
export default enhanced;
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from "./Center";
|
||||
export { default } from "./Center";
|
||||
@@ -0,0 +1,51 @@
|
||||
.root {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.justifyFlexStart {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.justifyFlexEnd {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.justifyCenter {
|
||||
justify-content: center;
|
||||
}
|
||||
.justifySpaceBetween {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justifySpaceAround {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.justifySpaceEvenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.alignFlexStart {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.alignFlexEnd {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.alignCenter {
|
||||
align-items: center;
|
||||
}
|
||||
.alignBaseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
.alignStretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.directionRow {
|
||||
flex-direction: row;
|
||||
}
|
||||
.directionColumn {
|
||||
flex-direction: column;
|
||||
}
|
||||
.directionRowReverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.directionColumnReverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
name: Flex
|
||||
menu: UI Kit
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
import Flex from './Flex'
|
||||
|
||||
# Flex
|
||||
|
||||
`Flex` is a wrapper around `flexbox`.
|
||||
|
||||
## Basic usage
|
||||
<Playground>
|
||||
<Flex justifyContent="center">I'm centered</Flex>
|
||||
</Playground>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
|
||||
import { PropTypesOf } from "talk-ui/types";
|
||||
|
||||
import Flex from "./Flex";
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof Flex> = {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
direction: "row",
|
||||
};
|
||||
const wrapper = shallow(
|
||||
<Flex {...props}>
|
||||
<div>Hello World</div>
|
||||
</Flex>
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
import cn from "classnames";
|
||||
import React from "react";
|
||||
import { StatelessComponent } from "react";
|
||||
|
||||
import { pascalCase } from "talk-common/utils";
|
||||
|
||||
import * as styles from "./Flex.css";
|
||||
|
||||
interface InnerProps {
|
||||
justifyContent?:
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "center"
|
||||
| "space-around"
|
||||
| "space-between"
|
||||
| "space-evenly";
|
||||
alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
|
||||
direction?: "row" | "column" | "row-reverse" | "column-reverse";
|
||||
}
|
||||
|
||||
const Flex: StatelessComponent<InnerProps> = props => {
|
||||
const { justifyContent, alignItems, direction, ...rest } = props;
|
||||
|
||||
const classObject: Record<string, boolean> = {};
|
||||
|
||||
if (justifyContent) {
|
||||
classObject[(styles as any)[`justify${pascalCase(justifyContent)}`]] = true;
|
||||
}
|
||||
|
||||
if (alignItems) {
|
||||
classObject[(styles as any)[`align${pascalCase(alignItems)}`]] = true;
|
||||
}
|
||||
|
||||
if (direction) {
|
||||
classObject[(styles as any)[`direction${pascalCase(direction)}`]] = true;
|
||||
}
|
||||
|
||||
const classNames: string = cn(styles.root, classObject);
|
||||
|
||||
return <div className={classNames} {...rest} />;
|
||||
};
|
||||
|
||||
export default Flex;
|
||||
@@ -0,0 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<div
|
||||
className="Flex-root Flex-justifyCenter Flex-alignCenter Flex-directionRow"
|
||||
>
|
||||
<div>
|
||||
Hello World
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from "./Flex";
|
||||
export { default } from "./Flex";
|
||||
@@ -0,0 +1,40 @@
|
||||
---
|
||||
name: MatchMedia
|
||||
menu: UI Kit
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
import MatchMedia from './MatchMedia'
|
||||
|
||||
# MatchMedia
|
||||
|
||||
`MatchMedia` uses media queries to provide responsive rendering.
|
||||
|
||||
## Basic usage
|
||||
<Playground>
|
||||
<MatchMedia maxWidth="xs">
|
||||
I'm a very small screen
|
||||
</MatchMedia>
|
||||
<MatchMedia minWidth="xs" maxWidth="sm">
|
||||
I'm a small screen
|
||||
</MatchMedia>
|
||||
<MatchMedia minWidth="sm" maxWidth="md">
|
||||
I'm a medium screen
|
||||
</MatchMedia>
|
||||
<MatchMedia minWidth="md" maxWidth="lg">
|
||||
I'm a large screen
|
||||
</MatchMedia>
|
||||
<MatchMedia minWidth="lg" maxWidth="xl">
|
||||
I'm a very large screen
|
||||
</MatchMedia>
|
||||
<MatchMedia minWidth="xl">
|
||||
I'm a super large screen
|
||||
</MatchMedia>
|
||||
</Playground>
|
||||
|
||||
## Using render props
|
||||
<Playground>
|
||||
<MatchMedia minWidth="lg">
|
||||
{matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
|
||||
</MatchMedia>
|
||||
</Playground>
|
||||
@@ -0,0 +1,27 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
|
||||
import { PropTypesOf } from "talk-ui/types";
|
||||
|
||||
import MatchMedia from "./MatchMedia";
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof MatchMedia> = {
|
||||
minWidth: "xs",
|
||||
maxWidth: "sm",
|
||||
component: "div",
|
||||
screen: true,
|
||||
children: <div>Hello World</div>,
|
||||
};
|
||||
const wrapper = shallow(<MatchMedia {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("map new speech prop to older aural prop", () => {
|
||||
const props: PropTypesOf<typeof MatchMedia> = {
|
||||
speech: true,
|
||||
children: <div>Hello World</div>,
|
||||
};
|
||||
const wrapper = shallow(<MatchMedia {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import { ReactNode, StatelessComponent } from "react";
|
||||
import Responsive from "react-responsive";
|
||||
|
||||
import theme from "../../theme/variables";
|
||||
|
||||
type Breakpoints = keyof typeof theme.breakpoints;
|
||||
|
||||
interface InnerProps {
|
||||
minWidth?: Breakpoints;
|
||||
maxWidth?: Breakpoints;
|
||||
children: ReactNode | ((matches: boolean) => React.ReactNode);
|
||||
className?: string;
|
||||
component?:
|
||||
| string
|
||||
| React.SFC<any>
|
||||
| React.ClassType<any, any, any>
|
||||
| React.ComponentClass<any>;
|
||||
all?: boolean;
|
||||
print?: boolean;
|
||||
screen?: boolean;
|
||||
speech?: boolean;
|
||||
}
|
||||
|
||||
const MatchMedia: StatelessComponent<InnerProps> = props => {
|
||||
const { speech, minWidth, maxWidth, ...rest } = props;
|
||||
const mapped = {
|
||||
// TODO: Temporarily map newer speech to older aural type until
|
||||
// react-responsive supports the speech prop.
|
||||
aural: speech,
|
||||
minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
|
||||
maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
|
||||
};
|
||||
return <Responsive {...rest} {...mapped} />;
|
||||
};
|
||||
|
||||
export default MatchMedia;
|
||||
@@ -0,0 +1,26 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`map new speech prop to older aural prop 1`] = `
|
||||
<MediaQuery
|
||||
aural={true}
|
||||
values={Object {}}
|
||||
>
|
||||
<div>
|
||||
Hello World
|
||||
</div>
|
||||
</MediaQuery>
|
||||
`;
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<MediaQuery
|
||||
component="div"
|
||||
maxWidth={640}
|
||||
minWidth={321}
|
||||
screen={true}
|
||||
values={Object {}}
|
||||
>
|
||||
<div>
|
||||
Hello World
|
||||
</div>
|
||||
</MediaQuery>
|
||||
`;
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from "./MatchMedia";
|
||||
export { default } from "./MatchMedia";
|
||||
@@ -11,19 +11,19 @@
|
||||
composes: heading2 from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
.heading3 {
|
||||
.heading3 {
|
||||
composes: heading3 from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
.heading4 {
|
||||
.heading4 {
|
||||
composes: heading4 from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
.subtitle1 {
|
||||
.subtitle1 {
|
||||
composes: subtitle1 from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
.subtitle2 {
|
||||
.subtitle2 {
|
||||
composes: subtitle2 from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
composes: body1 from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
.body2 {
|
||||
.body2 {
|
||||
composes: body2 from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin-bottom: calc(2px * $spacing-unit);
|
||||
margin-bottom: calc(1px * var(--spacing-unit));
|
||||
}
|
||||
|
||||
.colorInherit {
|
||||
@@ -78,17 +78,17 @@
|
||||
}
|
||||
|
||||
.colorPrimary {
|
||||
color: $palette-primary-main;
|
||||
color: var(--palette-primary-main);
|
||||
}
|
||||
|
||||
.colorSecondary {
|
||||
color: $palette-secondary-main;
|
||||
color: var(--palette-secondary-main);
|
||||
}
|
||||
|
||||
.colorTextSecondary {
|
||||
color: $palette-text-secondary;
|
||||
color: var(--palette-text-secondary);
|
||||
}
|
||||
|
||||
.colorError {
|
||||
color: $palette-error-main;
|
||||
color: var(--palette-error-main);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export { default as BaseButton } from "./BaseButton";
|
||||
export { default as Button } from "./Button";
|
||||
export { default as Center } from "./Center";
|
||||
export { default as Typography } from "./Typography";
|
||||
export { default as Flex } from "./Flex";
|
||||
export { default as MatchMedia } from "./MatchMedia";
|
||||
|
||||
@@ -1,59 +1,63 @@
|
||||
.heading1 {
|
||||
font-size: calc(24rem / $rem-base);
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: calc(24rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: "Manuale";
|
||||
line-height: calc(32em / 24);
|
||||
letter-spacing: calc(0.2em / 16);
|
||||
color: $palette-text-primary;
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.heading2 {
|
||||
font-size: calc(20rem / $rem-base);
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: calc(20rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: "Manuale";
|
||||
line-height: calc(24em / 20);
|
||||
color: $palette-text-primary;
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.heading3 {
|
||||
font-size: calc(18rem / $rem-base);
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: calc(18rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: "Manuale";
|
||||
line-height: calc(20em / 18);
|
||||
letter-spacing: calc(0.2em / 16);
|
||||
color: $palette-text-primary;
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.heading4 {
|
||||
font-size: calc(16rem / $rem-base);
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: "Manuale";
|
||||
line-height: calc(18em / 16);
|
||||
letter-spacing: calc(0.2em / 16);
|
||||
color: $palette-text-primary;
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.subtitle1 {}
|
||||
.subtitle1 {
|
||||
}
|
||||
|
||||
.subtitle2 {}
|
||||
.subtitle2 {
|
||||
}
|
||||
|
||||
.body2 {}
|
||||
.body2 {
|
||||
}
|
||||
|
||||
.body1 {
|
||||
font-size: calc(16rem / $rem-base);
|
||||
font-weight: $font-weight-regular;
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: "Source Sans Pro";
|
||||
line-height: calc(18em / 16);
|
||||
letter-spacing: calc(0.2em / 16);
|
||||
color: $palette-text-primary;
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.button {
|
||||
color: $palette-text-secondary;
|
||||
color: var(--palette-text-secondary);
|
||||
font-family: "Source Sans Pro";
|
||||
font-weight: $font-weight-medium;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: 16px;
|
||||
letter-spacing: calc(0.57em / 16);
|
||||
}
|
||||
|
||||
.overline {}
|
||||
.overline {
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
Variables defined in `variables.ts` are already available
|
||||
flattened and in kebab case.
|
||||
|
||||
These are additionally variables we define.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--spacing-unit: var(--spacing-unit-small);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoints-xs) {
|
||||
:root {
|
||||
--spacing-unit: var(--spacing-unit-large);
|
||||
}
|
||||
}
|
||||
@@ -58,7 +58,8 @@ const variables = {
|
||||
},
|
||||
},
|
||||
/* gitter and spacing */
|
||||
spacingUnit: 5,
|
||||
spacingUnitSmall: 5,
|
||||
spacingUnitLarge: 10,
|
||||
/* Borders */
|
||||
roundCorners: "2px",
|
||||
/* Typography */
|
||||
@@ -68,6 +69,14 @@ const variables = {
|
||||
fontWeightLight: 300,
|
||||
fontWeightRegular: 400,
|
||||
fontWeightMedium: 550,
|
||||
/* Breakpoints */
|
||||
breakpoints: {
|
||||
xs: 320,
|
||||
sm: 640,
|
||||
md: 1024,
|
||||
lg: 1400,
|
||||
xl: 1600,
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = variables;
|
||||
export default variables;
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export { default as timeout } from "./timeout";
|
||||
export { default as pascalCase } from "./pascalCase";
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import { camelCase } from "lodash";
|
||||
|
||||
export default function pascalCase(value: string) {
|
||||
return value[0].toUpperCase() + camelCase(value).slice(1);
|
||||
}
|
||||
Reference in New Issue
Block a user