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

// XXX Use .board-widget-labels as a flexbox container
.card-label
  border-radius: 4px
  color: white
  display: inline-block
  font-weight: 700
  font-size: 13px
  margin-right: 4px
  margin-bottom: 5px
  padding: 3px 8px
  max-width: 100%
  min-width: 8px
  overflow: ellipsis
  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

.card-label-orange
  background-color: #ff9f19

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

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

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

.card-label-pink
  background-color: #ff78cb

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

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

.card-label-lime
  background-color: #51e898

.card-label-silver
  background-color: #c0c0c0

.card-label-peachpuff
  background-color: #ffdab9

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

.card-label-plum
  background-color: #dda0dd

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

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

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

.card-label-gold
  background-color: #ffd700

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

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

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

.card-label-paleturquoise
  background-color: #afeeee

.card-label-mistyrose
  background-color: #ffe4e1

.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

.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