Renaissance

                     _,,ad8888888888bba,_
                  ,ad88888I888888888888888ba,
                ,88888888I88888888888888888888a,
              ,d888888888I8888888888888888888888b,
             d88888PP"""" ""YY88888888888888888888b,
           ,d88"'__,,--------,,,,.;ZZZY8888888888888,
          ,8IIl'"                ;;l"ZZZIII8888888888,
         ,I88l;'                  ;lZZZZZ888III8888888,
       ,II88Zl;.                  ;llZZZZZ888888I888888,
      ,II888Zl;.                .;;;;;lllZZZ888888I8888b
     ,II8888Z;;                 `;;;;;''llZZ8888888I8888,
     II88888Z;'                        .;lZZZ8888888I888b
     II88888Z; _,aaa,      .,aaaaa,__.l;llZZZ88888888I888
     II88888IZZZZZZZZZ,  .ZZZZZZZZZZZZZZ;llZZ88888888I888,
     II88888IZZ<'(@@>Z|  |ZZZ<'(@@>ZZZZ;;llZZ888888888I88I
    ,II88888;   `""" ;|  |ZZ; `"""     ;;llZ8888888888I888
    II888888l            `;;          .;llZZ8888888888I888,
   ,II888888Z;           ;;;        .;;llZZZ8888888888I888I
   III888888Zl;    ..,   `;;       ,;;lllZZZ88888888888I888
   II88888888Z;;...;(_    _)      ,;;;llZZZZ88888888888I888,
   II88888888Zl;;;;;' `--'Z;.   .,;;;;llZZZZ88888888888I888b
   ]I888888888Z;;;;'   ";llllll;..;;;lllZZZZ88888888888I8888,
   II888888888Zl.;;"Y88bd888P";;,..;lllZZZZZ88888888888I8888I
   II8888888888Zl;.; `"PPP";;;,..;lllZZZZZZZ88888888888I88888
   II888888888888Zl;;. `;;;l;;;;lllZZZZZZZZW88888888888I88888
   `II8888888888888Zl;.    ,;;lllZZZZZZZZWMZ88888888888I88888
    II8888888888888888ZbaalllZZZZZZZZZWWMZZZ8888888888I888888,
    `II88888888888888888b"WWZZZZZWWWMMZZZZZZI888888888I888888b
     `II88888888888888888;ZZMMMMMMZZZZZZZZllI888888888I8888888
      `II8888888888888888 `;lZZZZZZZZZZZlllll888888888I8888888,
       II8888888888888888, `;lllZZZZllllll;;.Y88888888I8888888b,
      ,II8888888888888888b   .;;lllllll;;;.;..88888888I88888888b,
      II888888888888888PZI;.  .`;;;.;;;..; ...88888888I8888888888,
      II888888888888PZ;;';;.   ;. .;.  .;. .. Y8888888I88888888888b,
     ,II888888888PZ;;'                        `8888888I8888888888888b,
     II888888888'                              888888I8888888888888888
    ,II888888888                              ,888888I8888888888888888
   ,d88888888888                              d888888I8888888888ZZZZZZ
,ad888888888888I                              8888888I8888ZZZZZZZZZZZZ
888888888888888'                              888888IZZZZZZZZZZZZZZZZZ
8888888888P'8P'                               Y888ZZZZZZZZZZZZZZZZZZZZ
888888888,  "                                 ,ZZZZZZZZZZZZZZZZZZZZZZZ
8888888888,                                ,ZZZZZZZZZZZZZZZZZZZZZZZZZZ
888888888888a,      _                    ,ZZZZZZZZZZZZZZZZZZZZ88888888
888888888888888ba,_d'                  ,ZZZZZZZZZZZZZZZZZ8888888888888
8888888888888888888888bbbaaa,,,______,ZZZZZZZZZZZZZZZ88888888888888888
88888888888888888888888888888888888ZZZZZZZZZZZZZZZ88888888888888888888
8888888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888
888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888
8888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888
88888888888888888888888888888ZZZZZZZZZZZZZZ888888888888888888888888888
8888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888 Normand  8
88888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888 Veilleux 8
8888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888888888

1 files changed, 136 insertions, 0 deletions

diff --git a/client/components/lists/main.styl b/client/components/lists/main.styl
new file mode 100644
index 00000000..18484174
--- /dev/null
+++ b/client/components/lists/main.styl
@@ -0,0 +1,136 @@
+@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-top-left-radius: 0
+  border-top-right-radius: 0
+  border-bottom-right-radius: 3px
+  border-bottom-left-radius: 3px
+  color: #8c8c8c
+  display: block
+  // flex: 0 0 auto
+  margin: 2px -3px -3px
+  padding: 7px 10px
+  position: relative
+  text-decoration: none
+
+  &:hover
+    background: #c3c3c3
+    color: #222
+    text-decoration: underline
+
+
+  &::selection
+    background: transparent
+
+.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