From 22c4a4926b5ba95aab1b32dec5ccb143977ec3cd Mon Sep 17 00:00:00 2001 From: Ray Date: Tue, 1 Aug 2017 10:02:51 +0100 Subject: [PATCH] scss integration --- .gitignore | 5 +- package.json | 9 ++- src/components/Compare/index.css | 65 ------------------- src/components/Compare/index.js | 6 +- src/components/Compare/styles.scss | 69 ++++++++++++++++++++ src/components/Header/index.css | 3 - src/components/Header/index.js | 17 ----- src/components/Product/index.css | 101 ----------------------------- src/components/Product/index.js | 2 +- src/components/Product/styles.scss | 98 ++++++++++++++++++++++++++++ src/containers/App/index.js | 5 -- src/containers/App/style.css | 0 src/index.js | 2 +- src/{index.css => styles.scss} | 0 14 files changed, 183 insertions(+), 199 deletions(-) delete mode 100644 src/components/Compare/index.css create mode 100644 src/components/Compare/styles.scss delete mode 100644 src/components/Header/index.css delete mode 100644 src/components/Header/index.js delete mode 100644 src/components/Product/index.css create mode 100644 src/components/Product/styles.scss delete mode 100644 src/containers/App/style.css rename src/{index.css => styles.scss} (100%) diff --git a/.gitignore b/.gitignore index 34b77b6..ab3be14 100644 --- a/.gitignore +++ b/.gitignore @@ -20,5 +20,8 @@ npm-debug.log* yarn-debug.log* yarn-error.log* - # Environment +# Environment .env + +# Styles +src/**/*.css diff --git a/package.json b/package.json index 720a867..03cded3 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,8 @@ "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", "jest": "20.0.4", + "node-sass-chokidar": "0.0.3", + "npm-run-all": "^4.0.2", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.0.0", "postcss-loader": "2.0.6", @@ -54,8 +56,11 @@ "whatwg-fetch": "2.0.3" }, "scripts": { - "start": "node scripts/start.js", - "build": "node scripts/build.js", + "build-css": "node-sass-chokidar src/ -o src/", + "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", + "start-js": "react-scripts start", + "start": "npm-run-all -p watch-css start-js", + "build": "npm run build-css && react-scripts build", "test": "node scripts/test.js --env=jsdom" }, "devDependencies": { diff --git a/src/components/Compare/index.css b/src/components/Compare/index.css deleted file mode 100644 index 4116844..0000000 --- a/src/components/Compare/index.css +++ /dev/null @@ -1,65 +0,0 @@ -.compare table { - background-color: #fff; - border-radius: 5px; - overflow: hidden; - box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.05); - border: 1px solid #eee; - font-size: 18px; - table-layout: fixed; -} - -.compare .thead-default th { - background-color: #fff; -} - -.compare table tr > td, -.compare table tr > th { - padding-top: 25px; - padding-bottom: 25px; - text-align: center; -} - -.compare table thead th { - font-size: 20px; - color: #393c45; - font-weight: normal; -} - -.compare table th[scope="row"] { - font-size: 20px; - color: #393c45; - font-weight: normal; - background-color: #f9f9f9; - border: 1px solid #eee; - text-align: left; - padding-left: 45px; -} - -.compare table tr.condition { - color: #fff; - font-size: 20px; -} - -.compare table tr.colors span { - height: 20px; - width: 20px; - background-color: #000; - display: inline-block; - margin-right: 5px; - border-radius: 100%; -} - -.compare table td.red, -.compare table tr.colors span.red { - background-color: #ff715b; -} - -.compare table td.green, -.compare table tr.colors span.green { - background-color: #48cfad; -} - -.compare table td.blue, -.compare table tr.colors span.blue { - background-color: #0197F6; -} diff --git a/src/components/Compare/index.js b/src/components/Compare/index.js index c513f93..35280e4 100644 --- a/src/components/Compare/index.js +++ b/src/components/Compare/index.js @@ -1,5 +1,5 @@ import React from 'react' -import './index.css' +import './styles.css' const Compare = ({products}) =>
@@ -30,7 +30,7 @@ const Compare = ({products}) => {products.map(product => {product.colors.map((color, index) => - + )} )} @@ -38,7 +38,7 @@ const Compare = ({products}) => Condition {products.map(product => - + {product.condition} )} diff --git a/src/components/Compare/styles.scss b/src/components/Compare/styles.scss new file mode 100644 index 0000000..cbb2a05 --- /dev/null +++ b/src/components/Compare/styles.scss @@ -0,0 +1,69 @@ +@import '../../styles/_variables.scss'; + +.compare { + table { + background-color: #fff; + border-radius: 5px; + overflow: hidden; + box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.05); + border: 1px solid #eee; + font-size: 18px; + table-layout: fixed; + + .bg-red { + background-color: $red; + } + + .bg-green { + background-color: $green; + } + + .bg-blue { + background-color: $blue; + } + + tr > td, + tr > th { + padding-top: 25px; + padding-bottom: 25px; + text-align: center; + } + + th[scope="row"] { + font-size: 20px; + color: #393c45; + font-weight: normal; + background-color: #f9f9f9; + border: 1px solid #eee; + text-align: left; + padding-left: 45px; + } + + tr { + &.condition { + color: #fff; + font-size: 20px; + } + + &.colors span { + height: 20px; + width: 20px; + display: inline-block; + margin-right: 5px; + border-radius: 100%; + } + } + + thead { + th { + font-size: 20px; + color: #393c45; + font-weight: normal; + } + } + } + + .thead-default th { + background-color: #fff; + } +} diff --git a/src/components/Header/index.css b/src/components/Header/index.css deleted file mode 100644 index 3234887..0000000 --- a/src/components/Header/index.css +++ /dev/null @@ -1,3 +0,0 @@ -header { - margin-top: 10vh; -} diff --git a/src/components/Header/index.js b/src/components/Header/index.js deleted file mode 100644 index d279f24..0000000 --- a/src/components/Header/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import './index.css' - -export default class Header extends React.Component { - render() { - return ( -
-
-
-
-
-
-
-
- ); - } -} diff --git a/src/components/Product/index.css b/src/components/Product/index.css deleted file mode 100644 index df24914..0000000 --- a/src/components/Product/index.css +++ /dev/null @@ -1,101 +0,0 @@ -.product { - cursor: pointer; - position: relative; - padding-bottom: 100px; - border-radius: 5px; - overflow: hidden; - -webkit-transition: all 500ms ease-out; - -moz-transition: all 500ms ease-out; - -o-transition: all 500ms ease-out; - transition: all 500ms ease-out; -} - -.product:hover { - box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2); -} - -.product img { - width: 100%; -} - -.stats-container { - background: #fff; - padding: 25px 15px; - position: absolute; - bottom: 0; - width: 100%; -} - -.stats-container .product_name { - font-size: 22px; - color: #393c45; -} - -.stats-container p { - font-size: 16px; - color: #b1b1b3; - margin: 0; -} - -.stats-container .product_price { - float: right; - color: #48cfad; - font-size: 22px; - font-weight: 600; -} - -.image_overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #48cfad; - opacity: 0; - -webkit-transition: all 200ms ease-out; - -moz-transition: all 200ms ease-out; - -o-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.product.compare .image_overlay, .product:hover .image_overlay { - opacity: 0.7; -} - -.view_details { - position: absolute; - top: 112px; - left: 50%; - margin-left: -85px; - border: 2px solid #fff; - color: #fff; - font-size: 19px; - text-align: center; - text-transform: uppercase; - font-weight: 700; - padding: 10px 0; - width: 172px; - opacity: 0; - -webkit-transition: all 200ms ease-out; - -moz-transition: all 200ms ease-out; - -o-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.view_details:hover { - background: #fff; - color: #48cfad; - cursor: pointer; -} - -.product:hover .view_details { - opacity: 1; - width: 152px; - font-size: 15px; - margin-left: -75px; - top: 150px; - -webkit-transition: all 200ms ease-out; - -moz-transition: all 200ms ease-out; - -o-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} diff --git a/src/components/Product/index.js b/src/components/Product/index.js index d3db019..18930c3 100644 --- a/src/components/Product/index.js +++ b/src/components/Product/index.js @@ -1,5 +1,5 @@ import React from 'react' -import './index.css' +import './styles.css' const Product = ({product, compare}) =>
diff --git a/src/components/Product/styles.scss b/src/components/Product/styles.scss new file mode 100644 index 0000000..bcad5a3 --- /dev/null +++ b/src/components/Product/styles.scss @@ -0,0 +1,98 @@ +@import '../../styles/_variables.scss'; +$image-overlay-opacity: 0.7; +$product-main-color: $green; + +.product { + cursor: pointer; + position: relative; + padding-bottom: 100px; + border-radius: 5px; + overflow: hidden; + transition: all 500ms ease-out; + + &:hover { + box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2); + .image_overlay { + opacity: $image-overlay-opacity; + } + + .view_details { + opacity: 1; + width: 152px; + font-size: 15px; + margin-left: -75px; + top: 150px; + transition: all 200ms ease-out; + } + } + + img { + width: 100%; + } + + &.compare { + .image_overlay { + opacity: $image-overlay-opacity; + } + } + + .stats-container { + background: #fff; + padding: 25px 15px; + position: absolute; + bottom: 0; + width: 100%; + + .product_name { + font-size: 22px; + color: #393c45; + } + + p { + font-size: 16px; + color: #b1b1b3; + margin: 0; + } + + .product_price { + float: right; + color: $product-main-color; + font-size: 22px; + font-weight: 600; + } + } + + .image_overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: $product-main-color; + opacity: 0; + transition: all 200ms ease-out; + } + + .view_details { + position: absolute; + top: 112px; + left: 50%; + margin-left: -85px; + border: 2px solid #fff; + color: #fff; + font-size: 19px; + text-align: center; + text-transform: uppercase; + font-weight: 700; + padding: 10px 0; + width: 172px; + opacity: 0; + transition: all 200ms ease-out; + + &:hover { + background: #fff; + color: $product-main-color; + cursor: pointer; + } + } +} diff --git a/src/containers/App/index.js b/src/containers/App/index.js index abb9c6f..a68bffd 100644 --- a/src/containers/App/index.js +++ b/src/containers/App/index.js @@ -1,9 +1,6 @@ import React, {Component} from 'react'; -import Header from '../../components/Header' import {Route, Switch} from 'react-router-dom' -import './style.css'; - import Home from '../Home'; import NotFound from '../NotFound'; @@ -11,8 +8,6 @@ export default class App extends Component { render() { return (
-
-
diff --git a/src/containers/App/style.css b/src/containers/App/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/index.js b/src/index.js index 96784a8..1848291 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,7 @@ import reducer from './reducers' import App from './containers/App' import 'bootstrap/dist/css/bootstrap.css' -import './index.css' +import './styles.css' const loggerMiddleware = createLogger() diff --git a/src/index.css b/src/styles.scss similarity index 100% rename from src/index.css rename to src/styles.scss