minicard.styl 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. .minicard
  2. background-color: #fff
  3. box-shadow: 0 1px 2px rgba(0,0,0,.2)
  4. border-radius: 2px
  5. cursor: pointer
  6. margin-bottom: 9px
  7. min-height: 20px
  8. position: relative
  9. z-index: 0
  10. overflow: hidden
  11. transition: transform 0.2s,
  12. border-radius 0.2s,
  13. border-left 0.2s
  14. a
  15. color: #4d4d4d
  16. &.active-card
  17. background-color: #f0f0f0
  18. border-bottom-color: #c2c2c2
  19. .minicard-operation
  20. display: block
  21. &.draggable-hover-card
  22. background-color: #f0f0f0
  23. border-bottom-color: #c2c2c2
  24. .minicard-cover
  25. background-position: center
  26. background-repeat: no-repeat
  27. background-size: cover
  28. height: 145px
  29. user-select: none
  30. margin: -6px -8px 6px -8px
  31. border-radius: top 2px
  32. &.no-preview-size
  33. background-size: auto
  34. background-position: center
  35. .minicard-details
  36. padding: 6px 8px 2px
  37. position: relative
  38. // z-index: 1
  39. &.is-selected
  40. transform: translateX(11px)
  41. border-bottom-right-radius: 0
  42. border-top-right-radius: 0
  43. z-index: 100
  44. box-shadow: -2px 1px 2px rgba(0,0,0,.2)
  45. a.minicard-details
  46. text-decoration:none
  47. .minicard-details-overlay
  48. background: transparent
  49. bottom: 0
  50. left: 0
  51. position: absolute
  52. right: 0
  53. top: 0
  54. .minicard-dropzone
  55. display: none
  56. .minicard.drophover .minicard-dropzone
  57. background: rgba(255, 255, 255, .8)
  58. // border-radius: 3px
  59. // bottom: 0
  60. // display: block
  61. // font-weight: 700
  62. // line-height: 100%
  63. // left: 0
  64. // margin: 0
  65. // opacity: 1
  66. // padding: 0
  67. // position: absolute
  68. // right: 0
  69. // text-align: center
  70. // top: 0
  71. // z-index: 40
  72. .minicard-title
  73. display: block
  74. font-weight: 400
  75. margin: 0 0 4px
  76. overflow: hidden
  77. text-decoration: none
  78. word-wrap: break-word
  79. &::selection
  80. background: transparent
  81. .minicard-labels
  82. padding-top: 3px
  83. margin-top: 4px
  84. float: right
  85. .minicard-label
  86. float: right
  87. width: 8px
  88. height: @width
  89. border-radius: 2px
  90. margin-left: 4px
  91. .minicard-members
  92. float: right
  93. margin: 2px -8px -2px 0
  94. .member
  95. float: right
  96. border-radius: 50%
  97. height: 28px
  98. width: @height
  99. + .badges
  100. margin-top: 10px
  101. .minicard-members:empty
  102. display: none
  103. &.ui-sortable-helper
  104. transform: rotate(4deg)
  105. .badges
  106. float: left
  107. &:empty
  108. display: none
  109. textarea.minicard-composer-textarea,
  110. textarea.minicard-composer-textarea:focus
  111. background: none
  112. border: none
  113. box-shadow: none
  114. height: auto
  115. margin-bottom: 4px
  116. padding: 0
  117. max-height: 162px
  118. min-height: 54px
  119. overflow-y: auto