Desafio Front-End

.gitignore

@@ -0,0 +1,16 @@
+.DS_Store
+.sass-cache
+*-access_log
+*-error_log
+*.md
+*.sublime*
+*/.DS_Store
+*.DS_Store
+tmp/*
+log/*
+/*temp
+wwwroot/*
+/node_modules/*
+node_modules/*
+/bower_components/*
+bower_components/*

Client/app.css

@@ -0,0 +1,290 @@
+html, body {
+    height: 100%;
+}
+
+body
+{
+    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;
+    font-size: 14px;
+
+    margin: 0;
+    padding: 0;
+
+    color: #2c3e50;
+    background: #e67e22;
+}
+
+body *
+{
+    box-sizing: border-box;
+}
+
+section#flux-cart
+{
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: visible;
+    margin: auto;
+    padding: 20px;
+    position: relative;
+}
+
+.flux-product
+{
+    width: 100%;
+    max-width: 600px;
+    margin: 20px auto;
+    padding: 20px;
+
+    border: 5px solid #2c3e50;
+    background: white;
+}
+
+.flux-product img
+{
+    width: 50%;
+
+    border: 2px solid #ddd;
+}
+
+.flux-product img,
+.flux-product-detail
+{
+    display: inline-block;
+
+    vertical-align: top;
+}
+
+.flux-product-detail
+{
+    width: 50%;
+    padding: 0 20px;
+}
+
+h1
+{
+    color: #2c3e50;
+}
+
+select
+{
+    font-size: 24px;
+
+    display: block;
+
+    width: 100%;
+    height: 40px;
+}
+
+button
+{
+    font-size: 16px;
+    font-weight: bold;
+
+    display: block;
+
+    width: 100%;
+    margin-top: 20px;
+    padding: 10px 30px;
+
+    color: white;
+    border: 0;
+    border-radius: 3px;
+    outline: none;
+    background: #2ecc71;
+    box-shadow: 0 5px 0 #27ae60;
+}
+
+button:hover
+{
+    background: #27ae60;
+    box-shadow: 0 5px 1px #145b32;
+}
+
+button:active
+{
+    border-top: 5px solid white;
+    box-shadow: none;
+}
+
+button[disabled]
+{
+    background: #95a5a6;
+    box-shadow: 0 5px 0 #7f8c8d;
+}
+
+button.view-cart
+{
+    position: absolute;
+    top: 20px;
+    right: 20px;
+
+    width: auto;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+button.view-cart:active
+{
+    border-top: 5px solid #e67e22;
+}
+
+.mini-cart
+{
+    position: absolute;
+    z-index: 999;
+    top: 100px;
+    /*right: -500px;*/
+    right: -200px;
+
+    width: 100%;
+    max-width: 280px;
+
+    -webkit-transition: .25s right ease;
+       -moz-transition: .25s right ease;
+        -ms-transition: .25s right ease;
+         -o-transition: .25s right ease;
+            transition: .25s right ease;
+
+    background: white;
+    box-shadow: 0 0 5px rgba(0,0,0,.5);
+}
+
+.active .mini-cart
+{
+    right: 20px;
+}
+
+.mini-cart h1
+{
+    font-size: 16px;
+
+    margin: 0;
+    padding: 0;
+}
+
+.mini-cart ul
+{
+    margin: 0;
+    padding: 0;
+}
+
+.mini-cart ul li
+{
+    margin: 0;
+    padding: 0;
+    padding: 20px;
+
+    list-style-type: none;
+
+    border-bottom: 1px solid #ddd;
+}
+
+.mini-cart .close-cart
+{
+    position: absolute;
+    top: 5px;
+    right: 5px;
+
+    width: auto;
+    margin: 0;
+    padding: 0 5px 3px;
+
+    color: white;
+    background: #2c3e50;
+    box-shadow: none;
+}
+
+.mini-cart span.total
+{
+    font-size: 18px;
+
+    display: block;
+
+    width: 100%;
+    margin: 0;
+    padding: 20px;
+
+    color: white;
+    background: #2c3e50;
+}
+
+.remove-item
+{
+    background: #e74c3c;
+    box-shadow: 0 5px 1px #a82315;
+}
+
+.remove-item:hover
+{
+    background: #a82315;
+    box-shadow: 0 5px 1px #4d100a;
+}
+
+.remove-item:active
+{
+    border-top: 5px solid white;
+    box-shadow: none;
+}
+
+@media (max-width: 1280px)
+{
+    button.view-cart
+    {
+        position: relative;
+        top: auto;
+        right: auto;
+
+        width: 100%;
+    }
+}
+
+@media (max-width: 600px)
+{
+    .flux-product img,
+    .flux-product-detail
+    {
+        width: 100%;
+    }
+    .mini-cart
+    {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        bottom: 0;
+
+        overflow: scroll;
+
+        width: 100%;
+        max-width: 100%;
+
+    }
+    .mini-cart .close-cart
+    {
+        font-size: 0;
+
+        position: relative;
+        top: auto;
+        right: auto;
+
+        width: 100%;
+        padding: 20px 0;
+
+        border-radius: 0;
+    }
+    .mini-cart .close-cart:after
+    {
+        font-size: 14px;
+
+        content: 'Close Cart';
+    }
+    .mini-cart .close-cart:active
+    {
+        border-top: none;
+    }
+    .active .mini-cart
+    {
+        right: 0;
+    }
+}