summaryrefslogtreecommitdiffstats
path: root/client/components/cards/checklists.styl
blob: 0a6d688ba3e4dcedff7a4028b36434834210036d (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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
.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: 25px

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

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


.js-confirm-checklist-delete
  background-color: darken(white, 3%)
  position: absolute
  float: left;
  width: 60%
  margin-top: 0
  margin-left: 13%
  padding-bottom: 2%
  padding-left: 3%
  padding-right: 3%
  z-index: 17
  border-radius: 3px

  p
    position: relative
    margin-top: 3%
    width: 100%
    text-align: center
    span
      font-weight: bold

    i
      font-size: 2em

  .js-checklist-delete-buttons
    position: relative
    padding: left 2% right 2%
    .confirm-checklist-delete
      margin-left: 12%
      float: left
    .toggle-delete-checklist-dialog
      margin-right: 12%
      float: right

#card-details-overlay
  top: 0
  bottom: -600px
  right: 0

.checklist
  background: darken(white, 3%)

  &.placeholder
    background: darken(white, 20%)
    border-radius: 2px

  &.ui-sortable-helper
    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
                0 0 1px rgba(0, 0, 0, .5)
    transform: rotate(4deg)
    cursor: grabbing


.checklist-item
  margin: 0 0 0 0.1em
  line-height: 18px
  font-size: 1.1em
  margin-top: 3px
  display: flex
  background: darken(white, 3%)

  &.placeholder
    background: darken(white, 20%)
    border-radius: 2px

  &.ui-sortable-helper
    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
                0 0 1px rgba(0, 0, 0, .5)
    transform: rotate(4deg)
    cursor: grabbing

  &:hover
    background-color: darken(white, 8%)

  .check-box-container
    padding-right: 1px;

  .check-box
    margin: 0.1em 0 0 0;
    &.is-checked
      border-bottom: 2px solid #3cb500
      border-right: 2px solid #3cb500

  .item-title
    flex: 1
    margin-left: 10px;
    &.is-checked
      color: #8c8c8c
      font-style: italic
    & .viewer
      p
        margin-bottom: 2px
        display: block
        word-wrap: break-word
        max-width: 420px

.js-delete-checklist-item
  margin: 0 0 0.5em 1.33em
  @extends .delete-text
  padding: 12px 0 0 0

.add-checklist-item
  margin: 0.2em 0 0.5em 1.33em
  display: inline-block