Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
153 lines (136 sloc) 2.36 KB
$orange:#D78123;
$blue:#1E1641;
$green:#02d330;
$grey: #999;
$background:$blue;
$logo-color:white;
$heading-color:$orange;
@mixin button($color){
background:$color;
border: 2px solid darken($color,15%);
cursor: pointer;
color: #fff;
width: 150px;
margin-left:4px;
}
body{
background:$background;
padding:0;
margin:0;
}
h1.logo{
font-family: helvetica,arial,sans-serif;
font-size: 24px;
color:$logo-color;
padding:64px 0 0;
margin: 0 auto;
text-transform: uppercase;
text-align: center;
font-weight: normal;
letter-spacing: 0.3em;
background: transparent url(/logo.png) 50% 0 no-repeat;
}
.new-list{
margin: 0 auto;
padding: 10px;
width: 424px;
input{
padding: 4px 8px;
font-size: 24px;
border:none;
font-weight: bold;
width: 250px;
}
.button{
@include button($orange);
}
}
.completed{
text-decoration: line-through;
}
.tasks{
padding:0;
list-style:none;
}
.task{
font-family: helvetica,arial,sans-serif;
font-size: 12px;
color:#444;
position:relative;
padding:2px 0 2px 28px;
border-bottom: dotted 1px #ccc;
}
form.update{
position:absolute;
bottom:2px;
left:0;
input{
background: white;
color: white;
padding:0 2px;
border:solid 1px $grey;
cursor:pointer;
width:20px;
height:20px;
}
}
.tasks li.completed form.update input{
color:$green;
font-weight: bold;
}
form.delete{
display:inline;
}
form.delete input{
color: white;
background:none;
cursor:pointer;
border:none;
}
.lists{
padding:0;
list-style:none;
overflow:hidden;
clear: left;
padding-top: 20px;
}
.list{
float: left;
position: relative;
width:21%;
margin:0 1% 20px;
padding: 0 1% 8px;
border-top: solid 5px $green;
background: #fff;
background: rgba(#fff,0.7);
padding-bottom: 20px;
h1{
text-align:center;
font-family: helvetica,arial,sans-serif;
font-size: 20px;
color:$heading-color;
margin:0;
}
form.new input{
width: 80%;
display: block;
margin:0 auto 8px;
}
form.destroy input{
display: block;
margin:0;
position:absolute;
top:2px;
right:2px;
background: transparent;
border: 1px solid $grey;
color: $grey;
font-size:16px;
opacity:0.6;
&:hover{
opacity:1;
background: #fff;
color: $green;
}
}
}
Something went wrong with that request. Please try again.