You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
2.3 KiB
152 lines
2.3 KiB
$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;
|
|
}
|
|
}
|
|
}
|