summaryrefslogtreecommitdiffstats
path: root/client/components/cards/checklists.styl
blob: 1156c577005d3679d9eec2665e0024991c442ebc (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.js-add-checklist
  color: #8c8c8c

textarea.js-add-checklist-item, textarea.js-edit-checklist-item
  overflow: hidden
  word-wrap: break-word
  resize: none
  height: 34px

.delete-text
  color: #8c8c8c
  text-decoration: underline
  word-wrap: break-word
  float: right
  padding-top: 6px
  &:hover
    color: inherit

.checklist-title
  .checkbox
    float: left
    width: 30px
    height 30px
    font-size: 18px
    line-height: 30px

  .title
    font-size: 18px
    line-height: 30px

  .checklist-stat
    margin: 0 0.5em
    float: right
    padding-top: 6px
    &.is-finished
      color: #3cb500

  .js-delete-checklist
    @extends .delete-text

.checklist-items
  margin: 0 0 0.5em 1.33em

  .item
    line-height: 25px
    font-size: 1.1em
    margin-top: 3px
    display: flex
    &:hover
      background-color: darken(white, 8%)

    .check-box
      margin-top: 5px
      &.is-checked
        border-bottom: 2px solid #3cb500
        border-right: 2px solid #3cb500

    .item-title
      flex-grow: 1
      padding-left: 10px;
      &.is-checked
        color: #8c8c8c
        font-style: italic

  .js-delete-checklist-item
    @extends .delete-text
    padding: 12px 0 0 0

  .add-checklist-item
    padding-top: 0.5em
    display: inline-block