summaryrefslogtreecommitdiffstats
path: root/client/components/cards/labels.styl
blob: 0d731e33b9bb3ed4d47cd89e6f2e34fd66f1e30b (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
@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
  padding: 3px 8px
  max-width: 100%
  min-width: 8px
  overflow: ellipsis
  height: 18px

  &:hover
    color: white

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

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

.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

.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