summaryrefslogtreecommitdiffstats
path: root/client/components/cards/details.styl
blob: 6b1a4cd4286bf2f1f307fa4c03cb3cd17f1c882f (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
@import 'nib'

.card-detail
  padding: 0 20px
  height: 100%
  flex: 0 0 470px
  overflow: hidden
  background: white
  border-radius: 3px
  z-index: 20 !important
  animation: growIn 0.2s
  box-shadow: 0 0 7px 0 darken(white, 30%)
  transition: flex 0.2s, padding 0.2s

  .card-detail-canvas
    width: 470px

  .card-detail-header
    margin: 0 -20px 5px
    padding 7px 20px 0
    background: #F7F7F7
    border-bottom: 1px solid darken(white, 10%)
    min-height: 38px

    i.fa
      float: right
      font-size: 1.3em
      color: darken(white, 35%)
      margin-top: 7px

    .card-detail-title
      font-weight: bold
      font-size: 1.7em
      margin: 3px 0 0
      padding: 0

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

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

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

@keyframes growIn
  from
    flex: 0 0 0
  to
    flex: 0 0 470px

.new-comment
  position: relative
  margin: 0 0 20px 38px

  .member
    opacity: .7
    position: absolute
    top: 1px
    left: -38px

  .helper
    bottom: 0
    display: none
    position: absolute
    right: 9px

  &.focus

    .member
      opacity: 1

    .helper
      display: inline-block

    .new-comment-input
      min-height: 108px
      color: #4d4d4d
      cursor: auto
      overflow: hidden
      word-wrap: break-word

  .too-long
    margin-top: 8px

.new-comment-input
  background-color: #fff
  border: 0
  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
  color: #8c8c8c
  height: 36px
  margin: 4px 4px 6px 0
  padding: 9px 11px
  width: 100%

  &:hover,
  &:focus
    background-color: #fff
    box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
    border: 0
    cursor: pointer

  &:focus
    cursor: auto

.list-voters.compact .voter
  position: relative
  min-height: 36px

  .member
    left: 0
    position: absolute
    top: 0

  .title
    display: block
    line-height: 30px
    left: 0
    overflow: hidden
    padding-left: 38px
    position: absolute
    text-overflow: ellipsis
    top: 0
    white-space: nowrap
    width: 230px

.list-voters .title
  display: none

.card-composer
  padding-bottom: 8px

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%