summaryrefslogtreecommitdiffstats
path: root/client/components/cards/cardDetails.styl
blob: 4bba2d4da8d28dc42985ed487a25595329e0d5bd (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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
@import 'nib'

.card-details
  padding: 0
  flex-shrink: 0
  flex-basis: 510px
  will-change: flex-basis
  overflow-y: scroll
  overflow-x: hidden
  background: darken(white, 3%)
  border-radius: bottom 3px
  z-index: 20 !important
  animation: flexGrowIn 0.1s
  box-shadow: 0 0 7px 0 darken(white, 30%)
  transition: flex-basis 0.1s

  .mCustomScrollBox
    padding-left: 0

  .ps-scrollbar-y-rail
    pointer-event: all
    position: absolute;

  .card-details-canvas
    width: 470px
    padding-left: 20px;

  .card-details-header
    margin: 0 -20px 5px
    padding 7px 16px
    background: darken(white, 7%)
    border-bottom: 1px solid darken(white, 14%)

    .close-card-details,
    .card-details-menu
      float: right

    .close-card-details
      font-size: 24px
      padding: 5px
      margin-right: -8px

    .card-details-menu
      font-size: 17px
      padding: 10px

    .card-details-watch
      font-size: 17px
      padding-left: 7px
      color: #a6a6a6

    .card-details-title
      font-weight: bold
      font-size: 1.33em
      margin: 7px 0 0
      padding: 0

    .linked-card-location
      font-style: italic
      font-size: 1em
      margin-bottom: 0
      & p
        margin-bottom: 0

    form.inlined-form
      margin-top: 5px
      margin-bottom: 10px

    .card-details-list
      font-size: 0.85em
      margin-bottom: 3px

      a.card-details-list-title
        font-weight: bold

        &.is-editable
          display: inline-block
          background: darken(white, 10%)
          border-radius: 3px
          padding: 0px 5px

  .card-description textarea
    min-height: 100px

  .card-details-items
    display: flex
    flex-wrap: wrap
    margin: 15px 0

    .card-details-item
      margin-right: 0.5em
      &:last-child
        margin-right: 0
      &.card-details-item-labels,
      &.card-details-item-members,
      &.card-details-item-received,
      &.card-details-item-start,
      &.card-details-item-due,
      &.card-details-item-end,
      &.card-details-item-customfield,
      &.card-details-item-name
        max-width: 50%
        flex-grow: 1

  .card-details-item-title
    font-size: 16px
    color: #000

  .card-label
    padding-top: 5px
    padding-bottom: 5px

  .activities
    padding-top: 10px

input[type="text"].attachment-add-link-input
  float: left
  margin: 0 0 8px
  width: 80%

input[type="submit"].attachment-add-link-submit
  float: left
  margin: 0 0 8px 4px
  padding: 6px 12px
  width: 18%

@media screen and (max-width: 800px)
  .card-details
    width: calc(100% - 1px)
    padding: 0px 20px 0px 20px
    margin: 0px
    transition: none

    .card-details-canvas
      width: 100%
      padding-left: 0px;

    .card-details-header
      .close-card-details
        margin-right: 0px

      .card-details-menu
        margin-right: 10px

card-details-color(background, color...)
  background: background !important
  if color
    color: color !important //overwrite text for better visibility

.card-details-white
  card-details-color(unset, #000) //Black text for better visibility
  border: 1px solid #eee

.card-details-green
  card-details-color(#3cb500, #ffffff) //White text for better visibility

.card-details-yellow
  card-details-color(#fad900, #000) //Black text for better visibility

.card-details-orange
  card-details-color(#ff9f19, #000) //Black text for better visibility

.card-details-red
  card-details-color(#eb4646, #ffffff) //White text for better visibility

.card-details-purple
  card-details-color(#a632db, #ffffff) //White text for better visibility

.card-details-blue
  card-details-color(#0079bf, #ffffff) //White text for better visibility

.card-details-pink
  card-details-color(#ff78cb, #000) //Black text for better visibility

.card-details-sky
  card-details-color(#00c2e0, #ffffff) //White text for better visibility

.card-details-black
  card-details-color(#4d4d4d, #ffffff) //White text for better visibility

.card-details-lime
  card-details-color(#51e898, #000) //Black text for better visibility

.card-details-silver
  card-details-color(#c0c0c0, #000) //Black text for better visibility

.card-details-peachpuff
  card-details-color(#ffdab9, #000) //Black text for better visibility

.card-details-crimson
  card-details-color(#dc143c, #ffffff) //White text for better visibility

.card-details-plum
  card-details-color(#dda0dd, #000) //Black text for better visibility

.card-details-darkgreen
  card-details-color(#006400, #ffffff) //White text for better visibility

.card-details-slateblue
  card-details-color(#6a5acd, #ffffff) //White text for better visibility

.card-details-magenta
  card-details-color(#ff00ff, #ffffff) //White text for better visibility

.card-details-gold
  card-details-color(#ffd700, #000) //Black text for better visibility

.card-details-navy
  card-details-color(#000080, #ffffff) //White text for better visibility

.card-details-gray
  card-details-color(#808080, #ffffff) //White text for better visibility

.card-details-saddlebrown
  card-details-color(#8b4513, #ffffff) //White text for better visibility

.card-details-paleturquoise
  card-details-color(#afeeee, #000) //Black text for better visibility

.card-details-mistyrose
  card-details-color(#ffe4e1, #000) //Black text for better visibility

.card-details-indigo
  card-details-color(#4b0082, #ffffff) //White text for better visibility