Skip to content

Commit e2409c5

Browse files
mikeniklesmikenikles
authored
Merge pull request #8 from gitpod-io/mikenikles/apply-css-styles-7
Apply CSS styles.
2 parents 4884afd + 762c185 commit e2409c5

File tree

4 files changed

+164
-14
lines changed

4 files changed

+164
-14
lines changed

‎src/app.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
:root {
2+
font-family: Arial, Helvetica, sans-serif;
3+
--primary-color: #b9c6d2;
4+
--secondary-color: #d0dde9;
5+
--tertiary-color: #edf0f8;
6+
}
7+
8+
body {
9+
background-color: var(--primary-color);
10+
background: linear-gradient(
11+
180deg,
12+
var(--primary-color),
13+
var(--secondary-color),
14+
var(--tertiary-color)
15+
);
16+
margin: 0;
17+
min-height: 100vh;
18+
}
19+
20+
h1 {
21+
text-align: center;
22+
font-size: 2rem;
23+
}
24+
25+
@media (min-width: 720px) {
26+
h1 {
27+
font-size: 2.4rem;
28+
}
29+
}

‎src/lib/todo-item.svelte‎

Lines changed: 85 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,95 @@
1-
<div>
1+
<style>
2+
.todo {
3+
display: grid;
4+
grid-template-columns: 2rem 1fr 2rem;
5+
grid-gap: 0.5rem;
6+
align-items: center;
7+
margin: 0 0 0.5rem 0;
8+
padding: 0.5rem;
9+
background-color: white;
10+
border-radius: 8px;
11+
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
12+
transform: translate(-1px, -1px);
13+
transition: filter 0.2s, transform 0.2s;
14+
}
15+
16+
.todo button {
17+
width: 2em;
18+
height: 2em;
19+
border: none;
20+
background-color: transparent;
21+
background-position: 50% 50%;
22+
background-repeat: no-repeat;
23+
}
24+
25+
.todo input {
26+
flex: 1;
27+
padding: 0.5em 2em 0.5em 0.8em;
28+
border-radius: 3px;
29+
}
30+
31+
button.toggle {
32+
border: 1px solid rgba(0, 0, 0, 0.2);
33+
border-radius: 50%;
34+
box-sizing: border-box;
35+
background-size: 1em auto;
36+
}
37+
38+
.text {
39+
position: relative;
40+
display: flex;
41+
align-items: center;
42+
flex: 1;
43+
}
44+
45+
.save {
46+
position: absolute;
47+
right: 0;
48+
opacity: 0;
49+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
50+
}
51+
52+
.todo input:focus + .save,
53+
.save:focus {
54+
transition: opacity 0.2s;
55+
opacity: 1;
56+
}
57+
58+
.delete {
59+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
60+
opacity: 0.2;
61+
}
62+
63+
.delete:hover,
64+
.delete:focus {
65+
transition: opacity 0.2s;
66+
opacity: 1;
67+
}
68+
69+
/* TODO: Uncomment when the API endpoints are available
70+
.done {
71+
transform: none;
72+
opacity: 0.4;
73+
filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
74+
}
75+
76+
.done .toggle {
77+
background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
78+
} */
79+
</style>
80+
81+
<div class="todo">
282
<form action="" method="">
383
<input type="hidden" name="done" value="" />
4-
<button aria-label="Mark done/not done">Done/NotDone</button>
84+
<button aria-label="Mark done/not done" class="toggle"></button>
585
</form>
686

7-
<form action="" method="">
87+
<form action="" method="" class="text">
888
<input type="text" />
9-
<button aria-label="Save todo">Save</button>
89+
<button aria-label="Save todo" class="save"></button>
1090
</form>
1191

1292
<form action="" method="">
13-
<button aria-label="Delete todo">Delete</button>
93+
<button aria-label="Delete todo" class="delete"></button>
1494
</form>
1595
</div>

‎src/routes/__layout.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script>
2+
import "../app.css";
3+
</script>
4+
5+
<main>
6+
<slot />
7+
</main>

‎src/routes/index.svelte‎

Lines changed: 43 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,50 @@
44
const title = "Todo";
55
</script>
66

7+
<style>
8+
.todos {
9+
width: 100%;
10+
max-width: 42rem;
11+
margin: 4rem auto 0 auto;
12+
}
13+
14+
.new {
15+
margin: 0 0 0.5rem 0;
16+
}
17+
18+
.new input {
19+
font-size: 28px;
20+
width: 100%;
21+
padding: 0.5em 1em 0.3em 1em;
22+
box-sizing: border-box;
23+
background: rgba(255, 255, 255, 0.05);
24+
border-radius: 8px;
25+
text-align: center;
26+
}
27+
28+
.todos :global(input) {
29+
border: 1px solid transparent;
30+
}
31+
32+
.todos :global(input:focus-visible) {
33+
box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
34+
border: 1px solid #ff3e00 !important;
35+
outline: none;
36+
}
37+
</style>
38+
739
<svelte:head>
840
<title>{title}</title>
941
</svelte:head>
1042

11-
<h1>{title}</h1>
12-
13-
<form action="" method="">
14-
<input type="text" name="text" aria-label="Add a todo" placeholder="+ type to add a todo" />
15-
</form>
16-
17-
<TodoItem />
18-
<TodoItem />
19-
<TodoItem />
43+
<div class="todos">
44+
<h1>{title}</h1>
45+
46+
<form action="" method="" class="new">
47+
<input type="text" name="text" aria-label="Add a todo" placeholder="+ type to add a todo" />
48+
</form>
49+
50+
<TodoItem />
51+
<TodoItem />
52+
<TodoItem />
53+
</div>

0 commit comments

Comments
 (0)