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

// XXX Use .board-widget-labels as a flexbox container
.card-label
  border-radius: 4px
  color: white  //Default white text, in select cases,  changed to black to improve contrast between label colour and text
  display: inline-block
  font-weight: 700
  font-size: 13px
  margin-right: 4px
  margin-bottom: 5px
  padding: 3px 8px
  max-width: 210px
  min-width: 8px
  overflow: ellipsis
  word-wrap: break-word
  height: 18px
  vertical-align: bottom

  &:hover
    color: white

  &.square
    height: 30px
    width: @height
    padding: 0

  &.add-label
    box-shadow: 0 0 0 2px darken(white, 25%) inset

    &:hover, &.is-active
      box-shadow: 0 0 0 2px darken(white, 60%) inset

    i.fa-plus
      margin-top: 3px

.palette-colors
  display: flex
  flex-wrap: wrap

  .palette-color
    flex-grow: 1
    display: flex
    align-items: center
    justify-content: center

.card-label-green
  background-color: #3cb500

.card-label-yellow
  background-color: #fad900
  color: #000000 //Black text for better visibility

.card-label-orange
  background-color: #ff9f19
  color: #000000 //Black text for better visibility

.card-label-red
  background-color: #eb4646

.card-label-purple
  background-color: #a632db

.card-label-blue
  background-color: #0079bf

.card-label-pink
  background-color: #ff78cb
  color: #000000 //Black text for better visibility

.card-label-sky
  background-color: #00c2e0

.card-label-black
  background-color: #4d4d4d

.card-label-lime
  background-color: #51e898
  color: #000000 //Black text for better visibility

.card-label-silver
  background-color: #c0c0c0
  color: #000000 //Black text for better visibility

.card-label-peachpuff
  background-color: #ffdab9
  color: #000000 //Black text for better visibility

.card-label-crimson
  background-color: #dc143c

.card-label-plum
  background-color: #dda0dd
  color: #000000 //Black text for better visibility

.card-label-darkgreen
  background-color: #006400

.card-label-slateblue
  background-color: #6a5acd

.card-label-magenta
  background-color: #ff00ff

.card-label-gold
  background-color: #ffd700
  color: #000000 //Black text for better visibility

.card-label-navy
  background-color: #000080

.card-label-gray
  background-color: #808080

.card-label-saddlebrown
  background-color: #8b4513

.card-label-paleturquoise
  background-color: #afeeee
  color: #000000 //Black text for better visibility

.card-label-mistyrose
  background-color: #ffe4e1
  color: #000000 //Black text for better visibility

.card-label-indigo
  background-color: #4b0082

.edit-label,
.create-label
  .card-label
    float: left
    height: 25px
    margin: 0px 3% 7px 0px
    width: 10.5%
    cursor: pointer

.edit-labels
  input[type="text"]
    margin: 4px 0 6px 38px
    width: 243px

  .card-label
    height: 30px
    left: 0
    padding: 1px 5px
    position: absolute
    top: 0
    width: 24px

  .labels-static .card-label
    line-height: 30px
    margin-bottom: 4px
    position: relative
    top: auto
    left: 0
    width: 260px

.edit-labels-pop-over
  margin-bottom: 8px
  .card-label .viewer p
    margin: 0

.edit-labels-pop-over .shortcut
  display: inline-block

.card-label-selectable
  border-radius: 3px
  cursor: pointer
  margin: 0
  margin-bottom: 3px
  width: 190px
  min-height: 18px
  padding: 8px
  position: relative
  transition: margin-right .1s

  .card-label-selectable-icon
    position: absolute
    top: 8px
    right: -20px

  &.active:hover,
  &.active,
  &.active.selected:hover,
  &.active.selected
    padding-right: 32px

    .card-label-selectable-icon
      right: 6px

  &.selected,
  &:hover
    opacity: .8

.active .card-label-selectable
  &,
  &:hover
    margin-right: 0

  .card-label-selectable-icon
    right: 8px

.card-label-edit-button
  border-radius: 3px
  float: right
  padding: 8px

  &:hover
    background: #dbdbdb