summaryrefslogtreecommitdiffstats
path: root/client/components/lists/main.styl
blob: 2ff2ef5f8da8f806c27d3ec2b11132fedfe667b3 (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
@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-left: 1px solid darken(white, 20%)
  padding: 0

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

  .card-detail + &
    border-left: none

  &.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)

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

  &.list-composer
    padding: 17px

    .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
  margin: 20px 15px 4px
  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: 0
    right: 0
    color: #a6a6a6

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

.list-body
  flex: 1
  display: flex
  overflow-y: auto
  padding: 5px 11px

  .minicards
    flex: 1

    form
      margin-bottom: 9px

  .ps-scrollbar-y-rail
    transform: translateX(2px)

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

  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