task checkbox style
променени са 3 файла, в които са добавени 185 реда и са изтрити 10 реда
+ 30
- 7
app/assets/stylesheets/avl2_theme/task_checkbox.less
@@ -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
+ 155
- 3
public/styleguide.html
@@ -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> |