Página Inicial Explorar Ajuda
Registrar Entrar
avalanche
/
avalanche2
Observar 2
Favorito 0
Fork 0

Ver Código Fonte
task checkbox style

James Peret 10 anos atrás
pai
ad2a2d30a9
commit
4097a31304
3 arquivos alterados com 185 adições e 10 exclusões
Mostrar estatísticas do Diff
  1. 30 7
      app/assets/stylesheets/avl2_theme/task_checkbox.less
  2. BIN
      dump.rdb
  3. 155 3
      public/styleguide.html

+ 30 - 7
app/assets/stylesheets/avl2_theme/task_checkbox.less
Ver Arquivo 

@@ -18,6 +18,9 @@
18 18 
 			color: @medium-gray;
19 19 
 		}
20 20 
 	}
21 
+	button.circle { width: 36px; height: 36px; }
22 
+	button.task-done i { margin-top: 1px; margin-left: -3px; }
23 
+	button.task-failed i { margin-top: 1px; margin-left: -1px; }
21 24 
 	.half-circle {
22 25 
 		width: 28px;
23 26 
 		height: 14px;
 
@@ -48,31 +51,51 @@
48 51 
 	}
49 52
50 53 
 	a { display: block; }
54 
+	button { background-color: @white}
51 55 
 	a.mixed-circle { height: 36px; color: @medium-gray; }
52 
-	a:hover { background-color: @light-gray; cursor: pointer;}
53 
-	a.mixed-circle:hover { border-radius: 300px; }
56 
+	button.mixed-circle {  border: none; padding: 0px; height: 36px;}
57 
+	a:hover, button:hover { background-color: @light-gray; cursor: pointer;}
58 
+	a.mixed-circle:hover, button.mixed-circle:hover { border-radius: 300px; }
54 59
55 60 
 	.circle.task-done.task-accepted {
56 61 
 		border: 4px solid @green;
57 62 
 		i { color: @green; }
58 63 
 	}
59 64 
 	.half-circle.task-accepted { border-color: @green; }
60 
-	a.task-accepted:hover { background-color: lighten(@green, 20%); }
65 
+	a.task-accepted:hover, button.task-accepted:hover { background-color: lighten(@green, 20%); }
61 66
62 67 
 	.circle.task-failed {
63 68 
 		border: 4px solid @red;
64 
-		i { color: @red; margin-top: 2px;}
65 69 
 	}
70 
+	a.circle.task-failed i { color: @red; margin-top: 2px;}
71 
+	button.circle.task-failed i { color: @red; margin-top: 1px;}
72 
+
66 73 
 	.half-circle.task-failed { border-color: @red; }
67 
-	a.task-failed:hover { background-color: lighten(@red, 20%); }
68 
-	a.mixed-circle.task-failed { color: @red; }
74 
+	a.task-failed:hover, button.task-failed:hover { background-color: lighten(@red, 20%); }
75 
+	.mixed-circle.task-failed { color: @red; }
76 
+	button.mixed-circle.task-failed i { margin-right: 2px; margin-top: 0px; }
69 77
70 78 
 	.circle.task-flaged {
71 79 
 		border: 4px solid @yellow;
72 80 
 		i { color: @yellow; }
73 81 
 	}
74 82 
 	.half-circle.task-flaged { border-color: @yellow; }
75 
-	a.task-flaged:hover { background-color: lighten(@yellow, 20%); }
83 
+	a.task-flaged:hover, button.task-flaged:hover { background-color: lighten(@yellow, 20%); }
84 
+
85 
+	.task-retrys {
86 
+		color: @red;
87 
+	     position: relative;
88 
+	     left: 34px;
89 
+	     top: -9px;
90 
+	     text-align: left;
91 
+	     font-family: Avenir-Black;
92 
+	     font-size: 8px;
93 
+	     line-height: 11px;
94 
+	}
95 
+	.task-retrys.task-done { color: @medium-gray; }
96 
+	.task-retrys.task-accepted { color: @green; }
97 
+	.task-retrys.task-failed { color: @red; }
98 
+	.task-retrys.flaged { top: -28px;}
76 99
77 100 
 }
78 101

BIN
dump.rdb
Ver Arquivo


+ 155 - 3
public/styleguide.html
Ver Arquivo 

@@ -235,9 +235,9 @@
235 235 
 			</div>
236 236 
 		</div>
237 237 
 	</div>
238 
-	<div class="row" style="margin-top: 55px;" >
238 
+	<div class="row" style="margin-top: 55px; margin-bottom: 25px;" >
239 239 
 		<div class="span12">
240 
-			<div class="centered" ><h3>Task Checkbox</h3></div>
240 
+			<div class="centered" ><h3>Task Checkbox (a)</h3></div>
241 241 
 			<div class="centered" style="width: 188px; margin-top: 25px;">
242 242 
 				<div class="task-checkbox">
243 243 
 					<a class="circle task-failed"><i class="fa fa-times"></i></a>
 
@@ -278,7 +278,159 @@
278 278 
 					<a class="circle task-flaged"></a>
279 279 
 					<div class="flag"><i class="icon-flaged"></i></div>
280 280 
 				</div>
281 
-			</div>
281 
+			</div>
282 
+			<br>
283 
+			<div class="centered" style="width: 188px; margin-top: 25px;">
284 
+				<div class="task-checkbox">
285 
+					<a class="circle task-failed"><i class="fa fa-times"></i></a>
286 
+					<div class="task-retrys task-failed">3</div>
287 
+				</div>
288 
+				<div class="task-checkbox">
289 
+					<a class="circle task-done task-accepted"><i class="fa fa-check"></i></a>
290 
+					<div class="task-retrys task-accepted">3</div>
291 
+				</div>
292 
+				<div class="task-checkbox">
293 
+					<a class="circle task-done"><i class="fa fa-check"></i></a>
294 
+					<div class="task-retrys task-done">3</div>
295 
+				</div>
296 
+				<div class="task-checkbox">
297 
+					<a class="circle task-failed"></a>
298 
+					<div class="task-retrys">3</div>
299 
+				</div>
300 
+			</div>
301 
+			<br>
302 
+			<div class="centered" style="width: 188px; margin-top: 25px;">
303 
+				<div class="task-checkbox">
304 
+					<a class="task-failed mixed-circle">
305 
+						<div class="half-circle top task-flaged"></div>
306 
+						<div class="half-circle bottom task-failed"></div>
307 
+						<i class="fa fa-times"></i>
308 
+					</a>
309 
+					<div class="flag"><i class="icon-flaged"></i></div>
310 
+					<div class="task-retrys flaged task-failed">3</div>
311 
+				</div>
312 
+
313 
+				<div class="task-checkbox">
314 
+					<a class="circle task-done task-accepted"><i class="fa fa-check"></i></a>
315 
+					<div class="flag"><i class="icon-flaged"></i></div>
316 
+					<div class="task-retrys flaged task-accepted">3</div>
317 
+				</div>
318 
+				<div class="task-checkbox">
319 
+					<a class="task-flaged mixed-circle">
320 
+						<div class="half-circle top task-flaged"></div>
321 
+						<div class="half-circle bottom"></div>
322 
+					</a>
323 
+					<div class="flag"><i class="icon-flaged"></i></div>
324 
+					<div class="task-retrys flaged task-done">3</div>
325 
+				</div>
326 
+				<div class="task-checkbox">
327 
+					<a class="task-failed mixed-circle">
328 
+						<div class="half-circle top task-flaged"></div>
329 
+						<div class="half-circle bottom task-failed"></div>
330 
+					</a>
331 
+					<div class="flag"><i class="icon-flaged"></i></div>
332 
+					<div class="task-retrys flaged">3</div>
333 
+				</div>
334 
+			</div>
335 
+		</div>
336 
+	</div>
337 
+	<div class="row" style="margin-top: 25px; margin-bottom: 55px;" >
338 
+		<div class="span12">
339 
+			<div class="centered" ><h3>Task Checkbox (button)</h3></div>
340 
+			<div class="centered" style="width: 188px; margin-top: 25px;">
341 
+				<div class="task-checkbox">
342 
+					<button class="circle task-failed"><i class="fa fa-times"></i></button>
343 
+				</div>
344 
+				<div class="task-checkbox">
345 
+					<button class="circle task-done task-accepted"><i class="fa fa-check"></i></button>
346 
+				</div>
347 
+				<div class="task-checkbox">
348 
+					<button class="circle task-done"><i class="fa fa-check"></i></button>
349 
+				</div>
350 
+				<div class="task-checkbox">
351 
+					<button class="circle"></button>
352 
+				</div>
353 
+			</div>
354 
+			<br>
355 
+			<div class="centered" style="width: 188px; margin-top: 25px;">
356 
+				<div class="task-checkbox">
357 
+					<button class="task-failed mixed-circle">
358 
+						<div class="half-circle top task-flaged"></div>
359 
+						<div class="half-circle bottom task-failed"></div>
360 
+						<i class="fa fa-times"></i>
361 
+					</button>
362 
+					<div class="flag"><i class="icon-flaged"></i></div>
363 
+				</div>
364 
+
365 
+				<div class="task-checkbox">
366 
+					<button class="circle task-done task-accepted"><i class="fa fa-check"></i></button>
367 
+					<div class="flag"><i class="icon-flaged"></i></div>
368 
+				</div>
369 
+				<div class="task-checkbox">
370 
+					<button class="task-flaged mixed-circle">
371 
+						<div class="half-circle top task-flaged"></div>
372 
+						<div class="half-circle bottom"></div>
373 
+					</button>
374 
+					<div class="flag"><i class="icon-flaged"></i></div>
375 
+				</div>
376 
+				<div class="task-checkbox">
377 
+					<button class="circle task-flaged"></button>
378 
+					<div class="flag"><i class="icon-flaged"></i></div>
379 
+				</div>
380 
+			</div>
381 
+			<br>
382 
+			<div class="centered" style="width: 188px; margin-top: 25px;">
383 
+				<div class="task-checkbox">
384 
+					<button class="circle task-failed"><i class="fa fa-times"></i></button>
385 
+					<div class="task-retrys task-failed">3</div>
386 
+				</div>
387 
+				<div class="task-checkbox">
388 
+					<button class="circle task-done task-accepted"><i class="fa fa-check"></i></button>
389 
+					<div class="task-retrys task-accepted">3</div>
390 
+				</div>
391 
+				<div class="task-checkbox">
392 
+					<button class="circle task-done"><i class="fa fa-check"></i></button>
393 
+					<div class="task-retrys task-done">3</div>
394 
+				</div>
395 
+				<div class="task-checkbox">
396 
+					<button class="circle task-failed"></button>
397 
+					<div class="task-retrys">3</div>
398 
+				</div>
399 
+			</div>
400 
+			<br>
401 
+			<div class="centered" style="width: 188px; margin-top: 25px;">
402 
+				<div class="task-checkbox">
403 
+					<button class="task-failed mixed-circle">
404 
+						<div class="half-circle top task-flaged"></div>
405 
+						<div class="half-circle bottom task-failed"></div>
406 
+						<i class="fa fa-times"></i>
407 
+					</button>
408 
+					<div class="flag"><i class="icon-flaged"></i></div>
409 
+					<div class="task-retrys flaged task-failed">3</div>
410 
+				</div>
411 
+
412 
+				<div class="task-checkbox">
413 
+					<button class="circle task-done task-accepted"><i class="fa fa-check"></i></button>
414 
+					<div class="flag"><i class="icon-flaged"></i></div>
415 
+					<div class="task-retrys flaged task-accepted">3</div>
416 
+				</div>
417 
+				<div class="task-checkbox">
418 
+					<button class="task-flaged mixed-circle">
419 
+						<div class="half-circle top task-flaged"></div>
420 
+						<div class="half-circle bottom"></div>
421 
+					</button>
422 
+					<div class="flag"><i class="icon-flaged"></i></div>
423 
+					<div class="task-retrys flaged task-done">3</div>
424 
+				</div>
425 
+				<div class="task-checkbox">
426 
+					<button class="task-failed mixed-circle">
427 
+						<div class="half-circle top task-flaged"></div>
428 
+						<div class="half-circle bottom task-failed"></div>
429 
+					</button>
430 
+					<div class="flag"><i class="icon-flaged"></i></div>
431 
+					<div class="task-retrys flaged">3</div>
432 
+				</div>
433 
+			</div>
282 434 
 		</div>
283 435 
 	</div>
284 436 
 </div>