Skip to content

Commit d87d167

Browse files
enricodeleoenricodeleo
committed
style: style from mockup
1 parent 8ec690e commit d87d167

File tree

2 files changed

+138
-2
lines changed

2 files changed

+138
-2
lines changed

‎todo-list/src/App.vue‎

Lines changed: 138 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,62 @@
11
<template>
22
<div id="app-template">
3-
<h1>{{ message }}</h1>
3+
<header class="container header-main">
4+
<div class="row">
5+
<div class="column text-center">
6+
<h2 class="no-margin"><strong>TODO LIST</strong>
7+
</div>
8+
</div>
9+
</header>
10+
<div class="container">
11+
<div class="row">
12+
<div class="column">
13+
<div class="app-content">
14+
<div class="container">
15+
<div class="row">
16+
<div class="column">
17+
<h2 class="text-white text-medium">
18+
Todo
19+
</h2>
20+
</div>
21+
</div>
22+
<div class="row">
23+
<div class="column">
24+
<div class="card">
25+
<div class="row">
26+
<div class="column column-20">
27+
<button class="button-check button-clear">
28+
&nbsp;
29+
</button>
30+
</div>
31+
<div class="column column-80">
32+
<h3>Buy Milk</h3>
33+
</div>
34+
</div>
35+
<div class="row task-done">
36+
<div class="column column-20">
37+
<button class="button-check button-clear">
38+
&nbsp;
39+
</button>
40+
</div>
41+
<div class="column column-80">
42+
<h3>Buy Milk</h3>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
<div class="row">
49+
<div class="column">
50+
<div class="card text-center add-task">
51+
<h3 class="no-margin">Add Task</h3>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
460
</div>
561
</template>
662

@@ -16,15 +72,95 @@ export default {
1672
</script>
1773

1874
<style lang="scss">
75+
$color-secondary: #9c9c9c;
76+
1977
@import '../node_modules/milligram/src/milligram.sass';
78+
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
2079
2180
html,
2281
body {
82+
width: 100%;
83+
height: 100%;
84+
min-height: 100%;
2385
padding: 0;
2486
margin: 0;
87+
background-color: #f8f9f9;
88+
}
89+
90+
body {
91+
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
92+
background-image: url('./images/background.jpg');
93+
background-position: center center;
94+
background-repeat: no-repeat;
95+
background-size: cover;
96+
}
97+
98+
.text-left {
99+
text-align: left;
100+
}
101+
102+
.text-center {
103+
text-align: center;
104+
}
105+
106+
.text-right {
107+
text-align: right;
108+
}
109+
110+
.text-medium {
111+
font-weight: 500;
112+
}
113+
114+
.text-white {
115+
color: #ffffff;
116+
}
117+
118+
.no-margin {
119+
margin: 0;
120+
}
121+
122+
.card {
123+
background: #ffffff;
124+
padding: 30px 22px;
125+
border-radius: 10px;
126+
}
127+
128+
.button-check {
129+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20);
130+
width: 36px;
131+
max-width: 36px;
132+
height: 36px;
133+
max-height: 36px;
134+
padding: 0;
135+
}
136+
137+
.task-done {
138+
text-decoration: line-through;
139+
color: #cccccc;
140+
.button-check {
141+
box-shadow: 0 0 10px 0 inset rgba(0, 0, 0, 0.20);
142+
background-color: #cccccc;
143+
}
25144
}
26145
27146
#app-template {
28-
background-color: #ed68a1;
147+
.header-main {
148+
margin-top: 28px;
149+
margin-bottom: 28px;
150+
}
151+
152+
.app-content {
153+
background-color: #ed68a1;
154+
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15);
155+
max-width: 450px;
156+
min-height: 800px;
157+
margin: 0 auto;
158+
padding: 75px 0;
159+
}
160+
161+
.add-task {
162+
padding: 20px;
163+
margin-top: 28px;
164+
}
29165
}
30166
</style>

‎todo-list/src/images/background.jpg‎

119 KB
Loading

0 commit comments

Comments
 (0)