417 css/styles.css

Large diffs are not rendered by default.

7 css/styles.css.map
BIN +5.43 KB images/logo.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 images/search-icon.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +6.06 KB images/walmart.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
151 index.html
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en-US">

<head>
<title>thrifty</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script>
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>

<body>

<header class="header">
<div class="container">
<div class="logo">
<img src="images/logo.jpg" height="75px">
</div>
<nav class="nav-menu">

<a href="" class="nav-menu__item">Dashboard</a>
<a href="" class="nav-menu__item">Profile</a>
<a href="" class="nav-menu__item">Community</a>
<a href="" class="nav-menu__item nav-menu__item--rounded">Store</a>
</nav>

</div>
</header>

<section class="dashboard">
<div class="container">
<aside class="reward-bar">
<h3>Reward <br/> <span>$100</span></h3>
<div class="progress-bar">
<div class="progress-bar__vertical">
<div class="progress-bar__inner" style="height: 70%;"></div>
</div>
<span class="progress-bar__value" style="bottom: 70%">$70</span>
</div>
<h3>Start</h3>
</aside>

<div class="widget-container">
<div class="widget widget__2y" align="center">
<h4>Thrifty Area</h4>
<table class="users-table">
<tr>
<th>

</th>
<th>
Name
</th>
<th>
$Start
</th>
</tr>
<tr>
<td>
<div class="user-logo"></div>
</td>
<td>
<div class="user-name">John Jameson</div>
</td>
<td>
<div class="user-start">$56</div>
</td>
</tr>
<tr>
<td>
<div class="user-logo"></div>
</td>
<td>
<div class="user-name">John Jameson</div>
</td>
<td>
<div class="user-start">$56</div>
</td>
</tr>
<tr>
<td>
<div class="user-logo"></div>
</td>
<td>
<div class="user-name">John Jameson</div>
</td>
<td>
<div class="user-start">$56</div>
</td>
</tr>
<tr>
<td>
<div class="user-logo"></div>
</td>
<td>
<div class="user-name">John Jameson</div>
</td>
<td>
<div class="user-start">$56</div>
</td>
</tr>
<tr>
<td>
<div class="user-logo"></div>
</td>
<td>
<div class="user-name">John Jameson</div>
</td>
<td>
<div class="user-start">$56</div>
</td>
</tr>
</table>
</div>

<div class="widget widget__1" align="center">
<h4>Featured Thrift of the Day</h4>
<img src="images/walmart.jpg" align="center">
<button> View</button>
</div>
<div class="widget widget__1" align="center">
<h4>Friend's Challenge</h4>

</div>
<div class="widget widget__2x">
<div class="left">
<h4>Recent Purchases</h4>
</div>
<div class="right">
<h4>Recommended Purchases</h4>
</div>
</div>

</div>
</div>
</section>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bpopup.min.js"></script>
<!--<script type="text/javascript" src="js/scripts.js"></script>-->
</body>
</html>
7 js/bpopup.min.js
3 js/scripts.js
@@ -0,0 +1,3 @@
$(function(){

});
6 sass/components/_buttons.scss
@@ -0,0 +1,6 @@
.btn {
background-color: #ffffff;
border-radius: 2px;
font-size: 13px;
padding: 4px 8px 3px;
}
47 sass/components/_common.scss
@@ -0,0 +1,47 @@
//common (general styles)

html, body {
height: 100%;
}

img {
max-width: 100%; }

hr {
border-color: #ddd; }

a, button, input, textarea, img {
outline: none !important; }

h1, h2, h3, h4, h5, h6 {
margin-top: 0;
line-height: 1.3em;
font-weight: 400; }

h1 {
font-size: 31px; }

h2 {
font-size: 32px; }

h3 {
font-size: 20px; }

h4 {
font-size: 18px; }

h5 {
font-size: 16px; }

h6 {
font-size: 15px; }

small {
font-size: 11px;
}


body {
color: $text-color;
font-size: 14px;
}
15 sass/components/_components.scss
@@ -0,0 +1,15 @@
.reward-bar {
width: 275px;
//background: rgba(0,0,0,0.3);
text-align: center;
border-radius: $widget-border-radius;
padding: 0 20px;
height: 100%;
color: #ffffff;
float: left;
margin: 0 10px 10px 0;
}

.widget-container {

}
10 sass/components/_dashboard.scss
@@ -0,0 +1,10 @@
.dashboard {
padding: 20px;
background-color: #3E6A74;
height: 100%;

.container {
height: 100%;
}
}

12 sass/components/_grid.scss
@@ -0,0 +1,12 @@


//GRID

.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0 15px;
position: relative;
@include clearfix();
}
41 sass/components/_header.scss
@@ -0,0 +1,41 @@
// ----- HEADER -----

.header {
border-bottom: 1px solid #f1f1f1;
min-height: 80px;

.logo {
float: left;
font-size: 18px;
line-height: 80px;
margin: 0 20px 0 0;
text-align: center;

a {
text-decoration: none;
letter-spacing: 0.3px;
}
}
}

.nav-menu {
float: left;

&__item {
display: inline-block;
vertical-align: middle;
line-height: 80px;
color: #333333;
text-decoration: none;
font-size: 16px;
margin-right: 15px;

&--rounded {
border-radius: 17px;
border: 2px solid #3E6A74;
line-height: 20px;
padding: 5px 15px;
margin: 2px 0 0 0;
}
}
}
77 sass/components/_helpers.scss
@@ -0,0 +1,77 @@
// ----- HELPERS -----

._white-bg {
background-color: #ffffff;
}

._light-gray-bg {
background-color: #f7fafb;
}

._blue-bg {
background-color: #69b5f8;
}

._base-text-color {
color: $text-color; // #333
}

._xs-text {
font-size: 11px;
}

._lh-50 {
line-height: 50px;
}

._dark-text {
color: $text-color;
}

._pad-top-15 {
padding-top: 15px;
}

._pad-top-20 {
padding-top: 20px;
}

._pad-top-30 {
padding-top: 30px;
}

._pad-top-35 {
padding-top: 35px;
}

._pad-top-40 {
padding-top: 40px;
}

._m-top-25 {
margin-top: 25px;
}

._inline-block {
display: inline-block;
}

._svg {
display: inline-block;
width: 45px;
height: 45px;
color: #ffffff;
font-size: 15px;
text-align: center;
line-height: 45px;
vertical-align: text-bottom;
margin-right: 10px;
}

.hiden-content {
display: none;
}

.showAll {
display: block;
}
12 sass/components/_icons.scss
@@ -0,0 +1,12 @@
// ----- ICONS -----

.search-icon {
display: block;
width: 15px;
height: 15px;
background-image: url("../images/search-icon.svg");
background-repeat: no-repeat;
vertical-align: middle;
margin-top: 0;
background-size: 100% auto;
}
18 sass/components/_mixins.scss
@@ -0,0 +1,18 @@
@mixin clearfix(){
&:after {
content: "";
clear: both;
display: table;
}
}

@mixin cuttedText(){
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

@mixin border-radius($value){
-webkit-border-radius: $value;
border-radius: $value;
}
32 sass/components/_progress-bar.scss
@@ -0,0 +1,32 @@

.progress-bar {
position: relative;

&__vertical {
height: 400px;
width: 30px;
margin: 0 auto;
border-radius: $widget-border-radius;
overflow: hidden;
border: 1px solid #ffffff;
position: relative;
}

&__inner {
position: absolute;
background-color: #38BFB3;
bottom: 0;
right: 0;

.progress-bar__vertical & {
left: 0;
}
}

&__value {
position: absolute;
right: 50%;
margin-right: -42px;
margin-bottom: -8px;
}
}
178 sass/components/_reset.scss
@@ -0,0 +1,178 @@

html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}


audio,
canvas,
progress,
video {
display: inline-block; // 1
vertical-align: baseline; // 2
}

a {
background: transparent;
}

a:active,
a:hover {
outline: 0;
}


b,
strong {
font-weight: bold;
}

small {
font-size: 80%;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

img {
border: 0;
}

svg:not(:root) {
overflow: hidden;
}

figure {
margin: 1em 40px;
}

hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}

button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}

button {
overflow: visible;
}

button,
select {
text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}

button[disabled],
html input[disabled] {
cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

input {
line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}

input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

textarea {
overflow: auto;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

td,
th {
padding: 0;
}

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
}
8 sass/components/_vars.scss
@@ -0,0 +1,8 @@
//----- VARS -----

$logo-background-color: #4f9dce;

$text-color: #333333;
$blue-text-color: #4f9dce;

$widget-border-radius: 10px;
46 sass/components/_widget.scss
@@ -0,0 +1,46 @@
.widget {
background-color: #ffffff;
border-radius: $widget-border-radius;
float: left;
position: relative;
padding: 10px;
margin: 0 10px 10px 0;

&__1 {
width: 275px;
height: 275px;
}

&__2x {
width: 560px;
height: 275px;
}

&__2y {
width: 275px;
height: 560px;
}
}

.users-table {
width: 100%;

td {
vertical-align: middle;
padding: 5px;

}
}

.user-logo {
border-radius: 50%;
width: 30px;
height: 30px;
overflow: hidden;
background-color: #38BFB3;
border: 1px solid #dddddd;
}

.user-name {

}
26 sass/styles.scss
@@ -0,0 +1,26 @@

@import "components/reset";
@import "components/vars";
@import "components/mixins";
@import "components/grid";
@import "components/common";
@import "components/helpers";
@import "components/header";
@import "components/icons";
@import "components/buttons";
@import "components/progress-bar";
@import "components/components";
@import "components/widget";

@import "components/dashboard";



@media print {
*, *:after, *:before {
color: #000000 !important;
background: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
}