waylon/netlify-faunadb-example
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove circle

Browse source
This commit is contained in:
DavidWells 2018-06-20 13:51:35 -07:00
parent 072fbdac9a
commit c6d3c10c8a
3 changed files with 6 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

13
public/index.html
View file

@ -17,18 +17,17 @@
<div id="root"></div>
<svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
<defs>
<linearGradient id="boxGradientGrey" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
<stop offset="0%" stop-color="#dde0e6"></stop>
<stop offset="100%" stop-color="#dde0e6"></stop>
</linearGradient>
<linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
<stop offset="0%" stop-color="#27FDC7"></stop>
<stop offset="100%" stop-color="#0FC0F5"></stop>
</linearGradient>
<linearGradient id="boxGradientInactive" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
<stop offset="0%" stop-color="#dde0e6"></stop>
<stop offset="100%" stop-color="#dde0e6"></stop>
</linearGradient>
<path id="todo__box__done" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
<path id="todo__box" stroke="url(#boxGradientInactive)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
<path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
<circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
<path id="todo__box" stroke="url(#boxGradientGrey)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
<path id="todo__box__done" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
</defs>
</svg>
</body>

36
src/App.css
View file

@ -127,34 +127,10 @@
z-index: 1;
}
.todo__box,
.todo__check {
/*transition: stroke-dashoffset 0.5s cubic-bezier(0.9, 0, 0.5, 1);*/
}
.todo__state:checked ~ .todo-list-title {
text-decoration: line-through;
}
.todo__circle {
stroke: #27FDC7;
stroke-dasharray: 1 6;
stroke-width: 0;
transform-origin: 13.5px 12.5px;
transform: scale(0.4) rotate(0deg);
/*animation: none 0.5s linear;*/
}
@keyframes explode {
30% {
stroke-width: 3;
stroke-opacity: 1;
transform: scale(0.8) rotate(40deg);
}
100% {
stroke-width: 0;
stroke-opacity: 0;
transform: scale(1.1) rotate(60deg);
}
}
.todo__box {
stroke-dasharray: 56.1053, 56.1053;
stroke-dashoffset: 0;
@ -167,11 +143,6 @@
transition-duration: 0.25s;
}
.todo__circle {
animation-delay: 0.56s;
animation-duration: 0.56s;
}
.todo__state:checked ~ .todo__icon .todo__box {
stroke-dashoffset: 56.1053;
transition-delay: 0s;
@ -184,10 +155,3 @@
stroke-dashoffset: 0;
transition-delay: 0s;
}
.todo__state:checked ~ .todo__icon .todo__circle {
/*animation-name: explode;*/
}
/* .todo-completed .todo__state:checked ~ .todo__icon .todo__circle {
animation-name: none;
animation: none;
} */

1
src/App.js
View file

@ -196,7 +196,6 @@ class App extends Component {
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" className="todo__icon">
<use xlinkHref={`${icon}`} className="todo__box"></use>
<use xlinkHref="#todo__check" className="todo__check"></use>
<use xlinkHref="#todo__circle" className="todo__circle"></use>
</svg>
<div className='todo-list-title'>
<ContentEditable