summaryrefslogtreecommitdiffstats
path: root/client/components/lists/main.styl
blob: ce408990c39a92e2cf89f06b603f66318027914b (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
@import 'nib'

.list
  box-sizing: border-box
  display: flex
  flex-direction: column
  flex: 0 0 270px
  position: relative
  // Even if this background color is the same as the body we can't leave it
  // transparent, because that won't work during a list drag.
  background: darken(white, 10%)
  height: 100%
  border-right: 1px solid darken(white, 17%)
  border-left: 1px solid darken(white, 4%)
  padding: 12px 7px 5px
  overflow-y: auto

  &:first-child
    margin-left: 5px
    border-left: none

  &:last-child
    margin-right: 5px
    border-right: none

  &.editable
    cursor: grab

    .list-wrapper
      cursor: default

  &.add-list
    &.fade
      opacity: 0

    .list-name-input
      background: rgba(0, 0, 0, .05)
      border-color: #aaa
      box-shadow: inset 0 1px 8px rgba(0, 0, 0, .15)
      display: block
      margin: 0
      transition: margin 85ms ease-in,
        background 85ms ease-in
      width: 100%

    .edit-controls
      height: 32px
      transition: margin 85ms ease-in,
        height 85ms ease-in
      overflow: hidden
      margin: 4px 0 0

      input[type=submit]
        margin-top: 0
        min-height: 30px
        height: 30px

.list-header
  flex: 0 0 auto
  padding: 10px 26px 4px 6px
  position: relative
  min-height: 20px

  .list-header-name
    display: inline
    font-size: 16px
    line-height: 17px
    margin: 0
    font-weight: bold
    min-height: 9px
    min-width: 30px
    overflow: hidden
    text-overflow: ellipsis
    word-wrap: break-word

  .list-header-menu-icon
    background-clip: content-box
    background-origin: content-box
    padding: 6px 8px
    position: absolute
    top: 3px
    right: -5px
    color: #a6a6a6

  .list-header-num-cards
    color: #8c8c8c
    margin: 0

.minicards
  // flex: 1 1 auto
  overflow-y: auto
  overflow-x: hidden
  padding: 4px 4px 1px
  z-index: 1
  height: 100%

  &::-webkit-scrollbar-button
    display: block
    height: 4px

.open-card-composer
  border-radius: 2px
  color: #8c8c8c
  display: block
  padding: 7px 10px
  position: relative
  text-decoration: none
  animation: fadeIn 0.2s

  i.fa
    margin-right: 7px

  &:hover
    background: white
    color: #222
    box-shadow: 0 1px 2px rgba(0,0,0,.2)

  &::selection
    background: transparent

@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

.list.placeholder
  background-color: rgba(0, 0, 0, .2)
  border-color: transparent
  box-shadow: none
  height: 100px

.list.ui-sortable-helper
  cursor: grabbing
  box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .5)
  transform: rotate(4deg)


.list.ui-sortable-helper .list-header-menu-icon
  display: none