checklists.styl 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. .js-add-checklist
  2. color: #8c8c8c
  3. textarea.js-add-checklist-item, textarea.js-edit-checklist-item
  4. overflow: hidden
  5. word-wrap: break-word
  6. resize: none
  7. height: 34px
  8. .delete-text
  9. color: #8c8c8c
  10. text-decoration: underline
  11. word-wrap: break-word
  12. float: right
  13. padding-top: 6px
  14. &:hover
  15. color: inherit
  16. .checklist-title
  17. .checkbox
  18. float: left
  19. width: 30px
  20. height 30px
  21. font-size: 18px
  22. line-height: 30px
  23. .title
  24. font-size: 18px
  25. line-height: 25px
  26. .checklist-stat
  27. margin: 0 0.5em
  28. float: right
  29. padding-top: 6px
  30. &.is-finished
  31. color: #3cb500
  32. .js-delete-checklist
  33. @extends .delete-text
  34. .js-confirm-checklist-delete
  35. background-color: darken(white, 3%)
  36. position: absolute
  37. float: left;
  38. width: 60%
  39. margin-top: 0
  40. margin-left: 13%
  41. padding-bottom: 2%
  42. padding-left: 3%
  43. padding-right: 3%
  44. z-index: 17
  45. border-radius: 3px
  46. p
  47. position: relative
  48. margin-top: 3%
  49. width: 100%
  50. text-align: center
  51. span
  52. font-weight: bold
  53. i
  54. font-size: 2em
  55. .js-checklist-delete-buttons
  56. position: relative
  57. padding: left 2% right 2%
  58. .confirm-checklist-delete
  59. margin-left: 12%
  60. float: left
  61. .toggle-delete-checklist-dialog
  62. margin-right: 12%
  63. float: right
  64. #card-details-overlay
  65. top: 0
  66. bottom: -600px
  67. right: 0
  68. .checklist
  69. background: darken(white, 3%)
  70. &.placeholder
  71. background: darken(white, 20%)
  72. border-radius: 2px
  73. &.ui-sortable-helper
  74. box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
  75. 0 0 1px rgba(0, 0, 0, .5)
  76. transform: rotate(4deg)
  77. cursor: grabbing
  78. .checklist-item
  79. margin: 0 0 0 0.1em
  80. line-height: 18px
  81. font-size: 1.1em
  82. margin-top: 3px
  83. display: flex
  84. background: darken(white, 3%)
  85. &.placeholder
  86. background: darken(white, 20%)
  87. border-radius: 2px
  88. &.ui-sortable-helper
  89. box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
  90. 0 0 1px rgba(0, 0, 0, .5)
  91. transform: rotate(4deg)
  92. cursor: grabbing
  93. &:hover
  94. background-color: darken(white, 8%)
  95. .check-box
  96. margin: 0.1em 0 0 0;
  97. &.is-checked
  98. border-bottom: 2px solid #3cb500
  99. border-right: 2px solid #3cb500
  100. .item-title
  101. flex: 1
  102. padding-left: 10px;
  103. &.is-checked
  104. color: #8c8c8c
  105. font-style: italic
  106. & .viewer
  107. p
  108. margin-bottom: 2px
  109. display: block
  110. word-wrap: break-word
  111. max-width: 420px
  112. .js-delete-checklist-item
  113. margin: 0 0 0.5em 1.33em
  114. @extends .delete-text
  115. padding: 12px 0 0 0
  116. .add-checklist-item
  117. margin: 0.2em 0 0.5em 1.33em
  118. display: inline-block