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

// XXX Use .board-widget-labels as a flexbox container
.card-label
  background-color: #b3b3b3
  border-radius: 4px
  color: white
  display: inline-block
  font-weight: 700
  font-size: 13px
  margin-right: 4px
  padding: 3px 8px
  position:relative
  max-width: 100%
  min-width: 8px
  overflow: ellipsis
  height: 18px

  &:hover
    color: white

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

.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

.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

.minicard-labels
  position: relative
  z-index: 30
  top: -6px

  .card-label
    border-radius: 0
    float: left
    height: 4px
    margin-bottom: 1px
    padding: 0
    width: 40px
    line-height: 100px

.card-detail-item-labels .card-label
  border-radius: 3px
  display: block
  float: left
  height: 20px
  line-height: 20px
  margin: 0 4px 4px 0
  min-width: 30px
  padding: 5px 10px
  width: auto

.editable-labels .card-label:hover
  cursor: pointer
  opacity: .75

.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 50px 4px 0
  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
    margin-right: 38px
    padding-right: 32px

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

  &.active:hover:hover,
  &.active:hover,
  &.active.selected:hover:hover,
  &.active.selected:hover
    margin-right: 38px

  &.selected,
  &:hover
    margin-right: 38px
    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

.card-label-color-select-icon
  left: 14px
  position: absolute
  top: 9px

.phenom .card-label
  display: inline-block
  font-size: 12px
  height: 14px
  line-height: 13px
  padding: 0 4px
  min-width: 16px
  overflow: ellipsis

.board-widget .phenom .card-label
  max-width: 130px