Rajendra.Reddy/test-product-compare-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scss integration

Browse Source
This commit is contained in:
Ray
2017-08-01 10:02:51 +01:00
parent 91c7850df0
commit 22c4a4926b
14 changed files with 183 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@@ -20,5 +20,8 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Environment
# Environment
.env
# Styles
src/**/*.css

9
package.json
View File

@@ -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": {

65
src/components/Compare/index.css
View File

@@ -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;
}

6
src/components/Compare/index.js
View File

@@ -1,5 +1,5 @@
import React from 'react'
import './index.css'
import './styles.css'
const Compare = ({products}) =>
<div className="row compare">
@@ -30,7 +30,7 @@ const Compare = ({products}) =>
{products.map(product =>
<td key={product.id}>
{product.colors.map((color, index) =>
<span key={index} className={color}></span>
<span key={index} className={"bg-" + color}></span>
)}
</td>
)}
@@ -38,7 +38,7 @@ const Compare = ({products}) =>
<tr className="condition">
<th scope="row">Condition</th>
{products.map(product =>
<td key={product.id} className={product.condition === "Used" ? "red" : "green"}>
<td key={product.id} className={product.condition === "Used" ? "bg-red" : "bg-green"}>
{product.condition}
</td>
)}

69
src/components/Compare/styles.scss Normal file
View File

@@ -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;
}
}

3
src/components/Header/index.css
View File

@@ -1,3 +0,0 @@
header {
margin-top: 10vh;
}

17
src/components/Header/index.js
View File

@@ -1,17 +0,0 @@
import React from 'react'
import './index.css'
export default class Header extends React.Component {
render() {
return (
<div className="container">
<header>
<div className="row">
<div className="col-12 text-center">
</div>
</div>
</header>
</div>
);
}
}

101
src/components/Product/index.css
View File

@@ -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;
}

2
src/components/Product/index.js
View File

@@ -1,5 +1,5 @@
import React from 'react'
import './index.css'
import './styles.css'
const Product = ({product, compare}) =>
<div key={product.id} className="col-3">

98
src/components/Product/styles.scss Normal file
View File

@@ -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;
}
}
}

5
src/containers/App/index.js
View File

@@ -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 (
<div className="App">
<Header />
<div className="container mt-4">
<Switch>
<Route exact path="/" component={Home}/>

0
src/containers/App/style.css
View File

2
src/index.js
View File

@@ -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()

0
src/index.css → src/styles.scss
View File