minicard.styl 2.8 KB

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