minicard.styl 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  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: contain
  55. height: 145px
  56. user-select: none
  57. margin: -6px -8px 6px -8px
  58. border-radius: top 2px
  59. .minicard-labels
  60. float: right
  61. display: flex
  62. .minicard-label
  63. width: 11px
  64. height: @width
  65. border-radius: 2px
  66. margin-left: 3px
  67. .badges
  68. float: left
  69. margin-top: 7px
  70. color: darken(white, 50%)
  71. &:empty
  72. display: none
  73. .badge
  74. float: left
  75. margin-right: 11px
  76. margin-bottom: 3px
  77. font-size: 0.9em
  78. .badge-icon,
  79. .badge-text
  80. vertical-align: top
  81. .badge-text
  82. font-size: 0.9em
  83. padding-left: 2px
  84. line-height: 14px
  85. .minicard-members
  86. float: right
  87. margin: 2px -8px -2px 0
  88. .member
  89. float: right
  90. border-radius: 50%
  91. height: 28px
  92. width: @height
  93. + .badges
  94. margin-top: 10px
  95. .minicard-members:empty
  96. display: none
  97. &.minicard-composer
  98. margin-bottom: 10px
  99. textarea.minicard-composer-textarea,
  100. textarea.minicard-composer-textarea:focus
  101. resize: none
  102. background: none
  103. border: none
  104. box-shadow: none
  105. height: auto
  106. margin: 0
  107. padding: 0
  108. max-height: 162px
  109. min-height: 36px
  110. margin-bottom: 20px
  111. overflow-y: auto
  112. @media screen and (max-width: 800px)
  113. .minicard
  114. .is-selected &
  115. transform: translateX(0px)
  116. border-bottom-right-radius: 0
  117. border-top-right-radius: 0
  118. z-index: 15
  119. box-shadow: 0 1px 2px rgba(0,0,0,.15)