From 54fa3059156306b55fa74e35a6d58b1aa1f979df Mon Sep 17 00:00:00 2001 From: Manuel Calavera Date: Mon, 16 Sep 2019 11:28:48 -0700 Subject: [PATCH] feat: add global styles and assets for new components --- src/images/arrow-right.png | Bin 0 -> 398 bytes src/images/icon/close.svg | 4 + src/images/icon/error.svg | 5 + src/images/icon/refresh.svg | 6 ++ src/styles/_common.scss | 14 +++ src/styles/_normalize.scss | 186 ++++++++++++++++++++++++++++++++++++ src/styles/_vars.scss | 28 ++++++ src/styles/index.scss | 3 + webpack.renderer.config.js | 2 + webpack.rules.js | 8 ++ 10 files changed, 256 insertions(+) create mode 100644 src/images/arrow-right.png create mode 100644 src/images/icon/close.svg create mode 100644 src/images/icon/error.svg create mode 100644 src/images/icon/refresh.svg create mode 100644 src/styles/_common.scss create mode 100644 src/styles/_normalize.scss create mode 100644 src/styles/_vars.scss create mode 100644 src/styles/index.scss diff --git a/src/images/arrow-right.png b/src/images/arrow-right.png new file mode 100644 index 0000000000000000000000000000000000000000..2fbb81fe680758d9af4dc47a499648383fbd6975 GIT binary patch literal 398 zcmV;90df9`P)`qdoy`w0l41+sq7yxgFtf=AvsmzaQ> zHinDeXk3-Ba~Sq)2%`sbY8)~}4>-Yl*#?zP%_GeU)LAetshnp?MSjwUI`AX^hP{41 z@+p8SRE#HQ&6uFWA^*_Qo75Y$Jkwr%Wrl2H2Anx#nl6X@ zNAFxg2x)pQejvCGYX?>}i#1o&CkdH{{guP|@x98{#RYVbtmd$^cdIg=x)$||9n96z sSa$Dtb74=+1{YxeX0WpR77M2t0hS0^B&Q}MApigX07*qoM6N<$f~6dw^Z)<= literal 0 HcmV?d00001 diff --git a/src/images/icon/close.svg b/src/images/icon/close.svg new file mode 100644 index 0000000..c794f90 --- /dev/null +++ b/src/images/icon/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/error.svg b/src/images/icon/error.svg new file mode 100644 index 0000000..459a40a --- /dev/null +++ b/src/images/icon/error.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icon/refresh.svg b/src/images/icon/refresh.svg new file mode 100644 index 0000000..711bb24 --- /dev/null +++ b/src/images/icon/refresh.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/styles/_common.scss b/src/styles/_common.scss new file mode 100644 index 0000000..3f826d7 --- /dev/null +++ b/src/styles/_common.scss @@ -0,0 +1,14 @@ +body { + background-color: $black; + font-size: $base-font-size; + font-family: $font-family; + color: $base-color; +} + +.container { + padding: 0 60px; +} + +strong { + font-weight: bold; +} diff --git a/src/styles/_normalize.scss b/src/styles/_normalize.scss new file mode 100644 index 0000000..9032cfc --- /dev/null +++ b/src/styles/_normalize.scss @@ -0,0 +1,186 @@ +* { + margin: 0; + padding: 0; + font: inherit; + box-sizing: border-box; +} +*::before, +*::after { + margin: 0; + padding: 0; + font: inherit; + box-sizing: border-box; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-focus-ring-color: rgba(255, 255, 255, 0); + cursor: default; +} + +body { + font-size: 100%; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +a { + background: transparent; +} + +*:focus, +*:active, +*:hover { + outline: none; +} + +hr { + box-sizing: content-box; + height: 0; +} + +ol, +ul { + list-style: none; +} + +pre { + tab-size: 4; + white-space: pre-wrap; +} + +q { + quotes: '\201C''\201D''\2018''\2019'; +} + +img { + border: none; +} + +svg:not(:root) { + overflow: hidden; +} + +button, +input { + line-height: normal; +} + +button, +select { + text-transform: none; +} + +button { + overflow: visible; +} + +button, +html input[type='button'], +input[type='reset'], +input[type='submit'] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +html input[disabled] { + cursor: default; +} + +input[type='checkbox'], +input[type='radio'] { + box-sizing: border-box; +} + +input[type='number']::-webkit-inner-spin-button, +input[type='number']::-webkit-outer-spin-button { + height: auto; +} + +input[type='search'] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: none; + padding: 0; +} + +textarea { + overflow: auto; + vertical-align: top; +} + +button, +input, +select[multiple], +textarea { + background-image: none; +} + +input, +select, +textarea { + border-radius: 0; + box-shadow: none; +} + +input, +textarea { + resize: none; + user-select: text; +} + +[placeholder]:focus::placeholder { + color: transparent; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss new file mode 100644 index 0000000..536fc64 --- /dev/null +++ b/src/styles/_vars.scss @@ -0,0 +1,28 @@ +$black: #000; +$white: #fff; +$primary: #00ffad; +$grey: #979797; +$dark-grey: #202020; +$pink: #f71ef4; +$border-color: rgba($grey, 0.5); + +$font-family: 'Exo', sans-serif; +$base-font-size: 15px; +$base-color: $white; +$title-font-size: 23px; +$subttl-font-size: 15px; +$subttl-color: $grey; +$card-title-color: #c4c4c4; + +$input-height: 38px; +$input-background: $black; +$input-color: $white; +$input-placeholder: rgba($white, 0.35); +$input-font-size: 15px; + +$card-background: $dark-grey; +$card-padding: 25px 25px 30px; + +$help-icon-color: #00a771; + +$alert-background: $dark-grey; diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000..eae57a0 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,3 @@ +@import 'normalize'; +@import 'vars'; +@import 'common'; diff --git a/webpack.renderer.config.js b/webpack.renderer.config.js index 9786e12..b178023 100644 --- a/webpack.renderer.config.js +++ b/webpack.renderer.config.js @@ -1,3 +1,4 @@ +const path = require('path'); const rules = require('./webpack.rules'); module.exports = { @@ -5,6 +6,7 @@ module.exports = { extensions: ['.js', '.jsx'], alias: { 'react-dom': '@hot-loader/react-dom', + styles: path.resolve(__dirname, './src/styles'), }, }, module: { diff --git a/webpack.rules.js b/webpack.rules.js index fda22a9..647b904 100644 --- a/webpack.rules.js +++ b/webpack.rules.js @@ -1,3 +1,5 @@ +const sass = require('sass'); + module.exports = [ { test: /\.node$/, @@ -41,6 +43,12 @@ module.exports = [ }, }, }, + { + loader: 'sass-loader', + options: { + implementation: sass, + }, + }, ], }, {