profite · henriqueViana · Apr 20, 2017 · Apr 21, 2017 · Apr 22, 2017 · Apr 22, 2017
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "test-profite",
+  "version": "1.0.0",
+  "description": "Teste para admissão na empresa Profit-e",
+  "main": "index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "build-css": "node-sass src/ -o src/",
+    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/henriqueViana/get-devs.git"
+  },
+  "author": "Henrique Viana <[email protected]>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/henriqueViana/get-devs/issues"
+  },
+  "homepage": "https://github.com/henriqueViana/get-devs#readme",
+  "devDependencies": {
+    "font-awesome": "^4.7.0",
+    "node-sass": "^4.5.2",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-redux": "^5.0.4",
+    "react-router-dom": "^4.1.1",
+    "react-scripts": "^0.9.5",
+    "redux": "^3.6.0",
+    "redux-multi": "^0.1.12",
+    "redux-thunk": "^2.2.0",
+    "style-it": "^1.6.7"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Teste Profit-e</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/assets/images/icon_bag.png b/src/assets/images/icon_bag.png
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
diff --git a/src/assets/images/model1.png b/src/assets/images/model1.png
diff --git a/src/assets/images/model2.png b/src/assets/images/model2.png
diff --git a/src/assets/images/model3.png b/src/assets/images/model3.png
diff --git a/src/assets/images/model4.png b/src/assets/images/model4.png
diff --git a/src/assets/images/model5.png b/src/assets/images/model5.png
diff --git a/src/assets/images/model6.png b/src/assets/images/model6.png
diff --git a/src/assets/images/model7.png b/src/assets/images/model7.png
diff --git a/src/assets/images/model8.png b/src/assets/images/model8.png
diff --git a/src/assets/images/model9.png b/src/assets/images/model9.png
diff --git a/src/assets/stylesheets/base/all.css b/src/assets/stylesheets/base/all.css
@@ -0,0 +1,28 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box; }
+
+html,
+body {
+  height: 100%;
+  font-family: sans-serif; }
+
+.inner-content {
+  width: 940px;
+  margin-left: auto;
+  margin-right: auto; }
+
+h1 {
+  font-size: 30px;
+  font-weight: 300; }
+
+h3 {
+  font-size: 20px;
+  font-weight: 300; }
+
+@media (max-width: 990px) {
+  .inner-content {
+    width: 100%;
+    padding-left: 20px;
+    padding-right: 20px; } }
diff --git a/src/assets/stylesheets/base/all.scss b/src/assets/stylesheets/base/all.scss
@@ -0,0 +1,2 @@
+@import 'default.scss';
+@import 'highlights.scss';
diff --git a/src/assets/stylesheets/base/default.css b/src/assets/stylesheets/base/default.css
@@ -0,0 +1,28 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box; }
+
+html,
+body {
+  height: 100%;
+  font-family: sans-serif; }
+
+.inner-content {
+  width: 940px;
+  margin-left: auto;
+  margin-right: auto; }
+
+h1 {
+  font-size: 30px;
+  font-weight: 300; }
+
+h3 {
+  font-size: 20px;
+  font-weight: 300; }
+
+@media (max-width: 990px) {
+  .inner-content {
+    width: 100%;
+    padding-left: 20px;
+    padding-right: 20px; } }
diff --git a/src/assets/stylesheets/base/default.scss b/src/assets/stylesheets/base/default.scss
@@ -0,0 +1,36 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+}
+
+html,
+body{
+  height: 100%;
+  font-family: sans-serif;
+}
+
+.inner-content{
+  width: 940px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+h1{
+  font-size: 30px;
+  font-weight: 300;
+}
+
+h3{
+  font-size: 20px;
+  font-weight: 300;
+}
+
+@media(max-width: 990px){
+  .inner-content{
+    width: 100%;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
diff --git a/src/assets/stylesheets/base/highlights.css b/src/assets/stylesheets/base/highlights.css
diff --git a/src/assets/stylesheets/base/highlights.scss b/src/assets/stylesheets/base/highlights.scss
@@ -0,0 +1,8 @@
+$orange: #ff9f1c; 
+$dark-orange: #e68c10;
+$light: #ffffff;
+$light-gray: #b0b0b0;
+$medium-gray: #666666;
+
+$bg-footer: #000000;
+$font-light: #ffffff;
diff --git a/src/assets/stylesheets/components/all.scss b/src/assets/stylesheets/components/all.scss
@@ -0,0 +1,9 @@
+@import 'dresses.scss';
+@import 'buttonCart.scss';
+@import 'filterSort.scss';
+@import 'buttonMore.scss';
+@import 'radioButton.scss';
+@import 'checkboxSizes.scss';
+@import 'checkboxSizeList.scss';
+@import 'buttonCloseFilterAndSort.scss';
+@import 'buttonSortMobile.scss';
diff --git a/src/assets/stylesheets/components/buttonCart.css b/src/assets/stylesheets/components/buttonCart.css
@@ -0,0 +1,11 @@
+.button-cart {
+  width: 52px;
+  height: 34px;
+  background-color: #ff9f1c;
+  text-align: center;
+  color: #ffffff;
+  cursor: pointer;
+  border: none;
+  transition: background-color .2s ease-in-out; }
+  .button-cart:hover {
+    background-color: #e68c10; }
diff --git a/src/assets/stylesheets/components/buttonCart.scss b/src/assets/stylesheets/components/buttonCart.scss
@@ -0,0 +1,17 @@
+@import '../base/highlights.scss';
+
+.button-cart{
+  width: 52px;
+  height: 34px;
+  background-color: $orange;
+  text-align: center;
+  color: $font-light;
+  cursor: pointer;
+  border: none;
+  transition: background-color .2s ease-in-out; 
+
+  &:hover{
+    background-color: $dark-orange;
+  }
+
+}
diff --git a/src/assets/stylesheets/components/buttonCloseFilterAndSort.css b/src/assets/stylesheets/components/buttonCloseFilterAndSort.css
@@ -0,0 +1,17 @@
+.close-filter {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  padding-left: 20px;
+  padding-right: 20px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  border-bottom: 1px solid #666666; }
+  .close-filter .label-filters {
+    color: #666666;
+    text-transform: uppercase; }
+  .close-filter .icons {
+    transform: rotate(45deg);
+    font-weight: 300;
+    font-size: 25px; }
diff --git a/src/assets/stylesheets/components/buttonCloseFilterAndSort.scss b/src/assets/stylesheets/components/buttonCloseFilterAndSort.scss
@@ -0,0 +1,24 @@
+@import '../base/highlights.scss';
+
+.close-filter{
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  padding-left: 20px;
+  padding-right: 20px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  border-bottom: 1px solid $medium-gray;
+
+    .label-filters{
+      color: $medium-gray;
+      text-transform: uppercase;
+    }
+
+    .icons{
+      transform: rotate(45deg);
+      font-weight: 300;
+      font-size: 25px;
+    }
+}
diff --git a/src/assets/stylesheets/components/buttonMore.css b/src/assets/stylesheets/components/buttonMore.css
@@ -0,0 +1,22 @@
+.button-more {
+  margin-top: 10px;
+  margin-bottom: 60px;
+  margin-left: calc(50% - 130px);
+  background-color: #ff9f1c;
+  color: #ffffff;
+  text-transform: uppercase;
+  width: 260px;
+  height: 45px;
+  line-height: 45px;
+  border: none;
+  cursor: pointer;
+  transition: background-color .2s ease-in-out; }
+  .button-more:hover {
+    background-color: #e68c10; }
+  .button-more.hide-true {
+    display: none; }
+
+@media (max-width: 680px) {
+  .button-more {
+    width: 100%;
+    margin-left: 0; } }
diff --git a/src/assets/stylesheets/components/buttonMore.scss b/src/assets/stylesheets/components/buttonMore.scss
@@ -0,0 +1,31 @@
+@import '../base/highlights.scss';
+
+.button-more{
+  margin-top: 10px;
+  margin-bottom: 60px;
+  margin-left: calc(50% - 130px);
+  background-color: $orange;
+  color: $font-light;
+  text-transform: uppercase;
+  width: 260px;
+  height: 45px;
+  line-height: 45px;  
+  border: none;
+  cursor: pointer;
+  transition: background-color .2s ease-in-out; 
+
+  &:hover{
+    background-color: $dark-orange;
+  }
+
+  &.hide-true{
+    display: none;
+  }
+}
+
+@media(max-width: 680px){
+  .button-more{
+    width: 100%;
+    margin-left: 0;
+  } 
+}
diff --git a/src/assets/stylesheets/components/buttonSortMobile.scss b/src/assets/stylesheets/components/buttonSortMobile.scss
@@ -0,0 +1,24 @@
+@import '../base/highlights.scss';
+
+.button-sort-mobile{
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  padding-left: 20px;
+  padding-right: 20px;
+  cursor: pointer;
+  position: relative;
+
+  &:hover{
+    background-color: $orange;
+    color: $font-light;
+  }
+}
+
+.trigger{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/assets/stylesheets/components/checkboxSizeList.css b/src/assets/stylesheets/components/checkboxSizeList.css
@@ -0,0 +1,14 @@
+.box-sizes {
+  width: 160px;
+  height: auto;
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+  align-content: flex-start; }
+  .box-sizes .flex-null {
+    width: 30px;
+    height: 0;
+    margin-right: 10px; }
+
+.box-sizes.mobile {
+  margin-left: calc(50% - 100px); }
diff --git a/src/assets/stylesheets/components/checkboxSizeList.scss b/src/assets/stylesheets/components/checkboxSizeList.scss
@@ -0,0 +1,18 @@
+.box-sizes{
+  width: 160px;
+  height: auto;
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+  align-content: flex-start;
+
+  .flex-null{
+    width: 30px;
+    height: 0;
+    margin-right: 10px;
+  }
+}
+
+.box-sizes.mobile{
+  margin-left: calc(50% - 100px);
+}
diff --git a/src/assets/stylesheets/components/checkboxSizes.css b/src/assets/stylesheets/components/checkboxSizes.css
@@ -0,0 +1,31 @@
+.content-check {
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  position: relative;
+  font-family: 'Open Sans', arial; }
+  .content-check .label-check {
+    position: absolute;
+    color: #b0b0b0;
+    font-size: 12px;
+    margin: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%); }
+  .content-check .checks {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    position: relative;
+    border: 1px solid #b0b0b0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    z-index: 5; }
+  .content-check .checks:checked {
+    border: 1px solid #ff9f1c; }
+  .content-check .checks:checked ~ .label-check {
+    color: #000; }