Skip to content

Commit 382f0ba

Browse files
saitodissesaitodisse
committed
10 - bigger checkbox and flexbox
1 parent edc8fbb commit 382f0ba

1 file changed

Lines changed: 109 additions & 75 deletions

File tree

‎src/10 - Hold Shift and Check Checkboxes/index-START.html‎

Lines changed: 109 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -5,104 +5,138 @@
55
<title>Document</title>
66
</head>
77
<body>
8-
<style>
8+
<style>
99

10-
html {
11-
font-family: sans-serif;
12-
background:#ffc600;
13-
}
10+
html {
11+
font-family: sans-serif;
12+
background: #ffc600;
13+
}
1414

15-
.inbox {
16-
max-width:400px;
17-
margin:50px auto;
18-
background:white;
19-
border-radius:5px;
20-
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
21-
}
15+
.inbox {
16+
max-width: 400px;
17+
margin: 50px auto;
18+
background: white;
19+
border-radius: 5px;
20+
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
21+
}
2222

23-
.item {
24-
display:flex;
25-
align-items:center;
26-
border-bottom: 1px solid #F1F1F1;
27-
}
23+
.item {
24+
display: flex;
25+
align-items: center;
26+
border-bottom: 1px solid #F1F1F1;
27+
}
2828

29-
.item:last-child {
30-
border-bottom:0;
31-
}
29+
.item:last-child {
30+
border-bottom: 0;
31+
}
3232

33+
input:checked + p {
34+
background: #F9F9F9;
35+
text-decoration: line-through;
36+
}
3337

34-
input:checked + p {
35-
background:#F9F9F9;
36-
text-decoration: line-through;
37-
}
38+
input[type="checkbox"] {
39+
margin: 13px;
40+
width: 20px;
41+
height: 20px;
42+
flex-shrink: 0;
43+
}
3844

39-
input[type="checkbox"] {
40-
margin:20px;
41-
}
45+
label {
46+
margin: 0;
47+
padding: 5px;
48+
transition: background 0.2s;
49+
flex: 1;
50+
font-family: 'helvetica neue', serif;
51+
font-size: 20px;
52+
font-weight: 200;
53+
border-left: 1px solid #D1E2FF;
54+
flex-direction: row;
55+
align-items: center;
56+
}
4257

43-
p {
44-
margin:0;
45-
padding:20px;
46-
transition:background 0.2s;
47-
flex:1;
48-
font-family:'helvetica neue';
49-
font-size: 20px;
50-
font-weight: 200;
51-
border-left: 1px solid #D1E2FF;
52-
}
58+
.item label {
59+
display: flex;
5360

54-
.details {
55-
text-align: center;
56-
font-size: 15px;
57-
}
61+
}
5862

63+
*.unselectable {
64+
-moz-user-select: -moz-none;
65+
-khtml-user-select: none;
66+
-webkit-user-select: none;
5967

60-
</style>
61-
<!--
62-
The following is a common layout you would see in an email client.
68+
/*
69+
Introduced in IE 10.
70+
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
71+
*/
72+
-ms-user-select: none;
73+
user-select: none;
74+
}
6375

64-
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
76+
</style>
77+
<!--
78+
The following is a common layout you would see in an email client.
6579
66-
-->
67-
<div class="inbox">
68-
<div class="item">
80+
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
81+
82+
-->
83+
<div class="inbox unselectable">
84+
<div class="item">
85+
<label>
6986
<input type="checkbox">
70-
<p>This is an inbox layout.</p>
71-
</div>
72-
<div class="item">
87+
This is an inbox layout.
88+
</label>
89+
</div>
90+
<div class="item">
91+
<label>
7392
<input type="checkbox">
74-
<p>Check one item</p>
75-
</div>
76-
<div class="item">
93+
Check one item
94+
</label>
95+
</div>
96+
<div class="item">
97+
<label>
7798
<input type="checkbox">
78-
<p>Hold down your Shift key</p>
79-
</div>
80-
<div class="item">
99+
Hold down your Shift key
100+
</label>
101+
</div>
102+
<div class="item">
103+
<label>
81104
<input type="checkbox">
82-
<p>Check a lower item</p>
83-
</div>
84-
<div class="item">
105+
Check a lower item
106+
</label>
107+
</div>
108+
<div class="item">
109+
<label>
85110
<input type="checkbox">
86-
<p>Everything inbetween should also be set to checked</p>
87-
</div>
88-
<div class="item">
111+
Everything inbetween should also be set to checked
112+
</label>
113+
</div>
114+
<div class="item">
115+
<label>
89116
<input type="checkbox">
90-
<p>Try do it with out any libraries</p>
91-
</div>
92-
<div class="item">
117+
Try do it with out any libraries
118+
</label>
119+
</div>
120+
<div class="item">
121+
<label>
93122
<input type="checkbox">
94-
<p>Just regular JavaScript</p>
95-
</div>
96-
<div class="item">
123+
Just regular JavaScript
124+
</label>
125+
</div>
126+
<div class="item">
127+
<label>
97128
<input type="checkbox">
98-
<p>Good Luck!</p>
99-
</div>
100-
<div class="item">
129+
Good Luck!
130+
</label>
131+
</div>
132+
<div class="item">
133+
<label>
101134
<input type="checkbox">
102-
<p>Don't forget to tweet your result!</p>
103-
</div>
135+
Don't forget to tweet your result!
136+
</label>
104137
</div>
138+
</div>
105139

106-
<script src="index-START.js"></script>
140+
<script src="index-START.js"></script>
107141
</body>
108142
</html>

0 commit comments

Comments
 (0)