Skip to content

Instantly share code, notes, and snippets.

@t4t5
Created April 3, 2017 15:24
Show Gist options
  • Save t4t5/a2a443a88ced9be3d47ea6eef34ec3fd to your computer and use it in GitHub Desktop.
Save t4t5/a2a443a88ced9be3d47ea6eef34ec3fd to your computer and use it in GitHub Desktop.
todo-style
#todo-app {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 60px auto;
max-width: 320px;
padding: 38px;
font-size: 16px;
color: rgba(0, 0, 0, 0.8);
box-shadow:
/* The top layer shadow */
0px 1px 2px rgba(0, 0, 0, 0.18),
0px 1px 10px rgba(0, 0, 0, 0.15),
/* The second layer */
0 10px 0 -5px #eee,
/* The second layer shadow */
0 10px 1px -4px rgba(0,0,0,0.15),
/* The third layer */
0 20px 0 -10px #eee,
/* The third layer shadow */
0 20px 1px -9px rgba(0,0,0,0.15);
/* Padding for demo purposes */
padding: 30px;
ul {
list-style-type: none;
padding: 0;
margin: 0;
margin-bottom: 43px;
}
li {
margin: 26px 0;
p {
display: inline;
cursor: pointer;
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
top: 10px;
background-color: rgb(45, 45, 45);
width: 0%;
transition: width 0.3s;
}
&:hover,
&[data-checked] {
opacity: 0.5;
}
&[data-checked]::after {
width: 100%;
}
}
button {
margin-top: -5px;
background-color: #de6b58;
opacity: 0;
transition: opacity 0.1s;
}
&:hover button {
opacity: 0.5;
&:hover {
opacity: 1;
}
}
}
button {
border: none;
border-radius: 2px;
padding: 6px 8px;
font-size: 14px;
color: white;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition: box-shadow 0.1s, transform 0.1s;
float: right;
&:hover {
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.15);
transform: scale(1.02);
}
&:focus {
outline: none;
}
}
input {
outline: none;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.38);
width: calc(100% - 110px);
font-size: 16px;
padding: 5px 0px;
&:focus {
border-color: rgba(21, 124, 230, 0.72);
}
+ button {
width: 90px;
margin-top: 2px;
background-color: #41daa1;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment