minicard.styl 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. .minicard-wrapper
  2. cursor: pointer
  3. position: relative
  4. display: flex
  5. align-items: center
  6. margin-bottom: 9px
  7. &.placeholder
  8. background: darken(white, 20%)
  9. border-radius: 2px
  10. &.ui-sortable-helper
  11. cursor: grabbing
  12. transform: rotate(4deg)
  13. display: block !important
  14. .and-n-other
  15. width: 100%
  16. height: 16px
  17. padding: 4px
  18. background-color: darken(white, 5%)
  19. text-align: center
  20. border-radius: 3px
  21. .multi-selection-checkbox
  22. display: none
  23. .multi-selection-checkbox + .minicard
  24. margin-left: 8px
  25. .minicard
  26. padding: 6px 8px 2px
  27. position: relative
  28. flex: 1
  29. flex-wrap: wrap
  30. background-color: #fff
  31. min-height: 20px
  32. box-shadow: 0 1px 2px rgba(0,0,0,.15)
  33. border-radius: 2px
  34. color: #4d4d4d
  35. overflow: hidden
  36. transition: transform 0.2s,
  37. border-radius 0.2s
  38. .is-selected &
  39. transform: translateX(11px)
  40. border-bottom-right-radius: 0
  41. border-top-right-radius: 0
  42. z-index: 25
  43. box-shadow: -2px 1px 2px rgba(0,0,0,.2)
  44. &:hover:not(.minicard-composer),
  45. .is-selected &,
  46. .draggable-hover-card &
  47. background: darken(white, 3%)
  48. .draggable-hover-card &
  49. background: darken(white, 7%)
  50. .minicard-cover
  51. background-position: center
  52. background-repeat: no-repeat
  53. background-size: cover
  54. height: 145px
  55. user-select: none
  56. margin: -6px -8px 6px -8px
  57. border-radius: top 2px
  58. position: relative
  59. img
  60. height: 100%
  61. width: 100%
  62. .minicard-labels
  63. float: right
  64. display: flex
  65. .minicard-label
  66. width: 11px
  67. height: @width
  68. border-radius: 2px
  69. margin-left: 3px
  70. .badges
  71. float: left
  72. margin-top: 7px
  73. color: darken(white, 50%)
  74. &:empty
  75. display: none
  76. .badge
  77. float: left
  78. margin-right: 11px
  79. margin-bottom: 3px
  80. font-size: 0.9em
  81. .badge-icon,
  82. .badge-text
  83. vertical-align: top
  84. .badge-text
  85. font-size: 0.9em
  86. padding-left: 2px
  87. line-height: 14px
  88. .minicard-members
  89. float: right
  90. margin: 2px -8px -2px 0
  91. .member
  92. float: right
  93. border-radius: 50%
  94. height: 28px
  95. width: @height
  96. + .badges
  97. margin-top: 10px
  98. .minicard-members:empty
  99. display: none
  100. &.minicard-composer
  101. margin-bottom: 10px
  102. textarea.minicard-composer-textarea,
  103. textarea.minicard-composer-textarea:focus
  104. resize: none
  105. background: none
  106. border: none
  107. box-shadow: none
  108. height: auto
  109. margin: 0
  110. padding: 0
  111. max-height: 162px
  112. min-height: 54px
  113. overflow-y: auto