You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

300 lines
5.6 KiB

  1. .poll {
  2. margin-top: 16px;
  3. font-size: 14px;
  4. ul,
  5. .e-content & ul {
  6. margin: 0;
  7. list-style: none;
  8. }
  9. li {
  10. margin-bottom: 10px;
  11. position: relative;
  12. }
  13. &__chart {
  14. border-radius: 4px;
  15. display: block;
  16. background: darken($ui-primary-color, 5%);
  17. height: 5px;
  18. min-width: 1%;
  19. &.leading {
  20. background: $ui-highlight-color;
  21. }
  22. }
  23. progress {
  24. border: 0;
  25. display: block;
  26. width: 100%;
  27. height: 5px;
  28. appearance: none;
  29. background: transparent;
  30. &::-webkit-progress-bar {
  31. background: transparent;
  32. }
  33. // Those rules need to be entirely separate or they won't work, hence the
  34. // duplication
  35. &::-moz-progress-bar {
  36. border-radius: 4px;
  37. background: darken($ui-primary-color, 5%);
  38. }
  39. &::-ms-fill {
  40. border-radius: 4px;
  41. background: darken($ui-primary-color, 5%);
  42. }
  43. &::-webkit-progress-value {
  44. border-radius: 4px;
  45. background: darken($ui-primary-color, 5%);
  46. }
  47. }
  48. &__option {
  49. position: relative;
  50. display: flex;
  51. padding: 6px 0;
  52. line-height: 18px;
  53. cursor: default;
  54. overflow: hidden;
  55. &__text {
  56. display: inline-block;
  57. word-wrap: break-word;
  58. overflow-wrap: break-word;
  59. max-width: calc(100% - 45px - 25px);
  60. }
  61. input[type='radio'],
  62. input[type='checkbox'] {
  63. display: none;
  64. }
  65. .autosuggest-input {
  66. flex: 1 1 auto;
  67. }
  68. input[type='text'] {
  69. display: block;
  70. box-sizing: border-box;
  71. width: 100%;
  72. font-size: 14px;
  73. color: $inverted-text-color;
  74. display: block;
  75. outline: 0;
  76. font-family: inherit;
  77. background: $simple-background-color;
  78. border: 1px solid darken($simple-background-color, 14%);
  79. border-radius: 4px;
  80. padding: 6px 10px;
  81. &:focus {
  82. border-color: $highlight-text-color;
  83. }
  84. }
  85. &.selectable {
  86. cursor: pointer;
  87. }
  88. &.editable {
  89. display: flex;
  90. align-items: center;
  91. overflow: visible;
  92. }
  93. }
  94. &__input {
  95. display: inline-block;
  96. position: relative;
  97. border: 1px solid $ui-primary-color;
  98. box-sizing: border-box;
  99. width: 18px;
  100. height: 18px;
  101. flex: 0 0 auto;
  102. margin-inline-end: 10px;
  103. top: -1px;
  104. border-radius: 50%;
  105. vertical-align: middle;
  106. margin-top: auto;
  107. margin-bottom: auto;
  108. flex: 0 0 18px;
  109. &.checkbox {
  110. border-radius: 4px;
  111. }
  112. &.active {
  113. border-color: $valid-value-color;
  114. background: $valid-value-color;
  115. }
  116. &:active,
  117. &:focus,
  118. &:hover {
  119. border-color: lighten($valid-value-color, 15%);
  120. border-width: 4px;
  121. }
  122. &::-moz-focus-inner {
  123. outline: 0 !important;
  124. border: 0;
  125. }
  126. &:focus,
  127. &:active {
  128. outline: 0 !important;
  129. }
  130. &.disabled {
  131. border-color: $dark-text-color;
  132. &.active {
  133. background: $dark-text-color;
  134. }
  135. &:active,
  136. &:focus,
  137. &:hover {
  138. border-color: $dark-text-color;
  139. border-width: 1px;
  140. }
  141. }
  142. }
  143. &__number {
  144. display: inline-block;
  145. width: 45px;
  146. font-weight: 700;
  147. flex: 0 0 45px;
  148. }
  149. &__voted {
  150. padding: 0 5px;
  151. display: inline-block;
  152. &__mark {
  153. font-size: 18px;
  154. }
  155. }
  156. &__footer {
  157. padding-top: 6px;
  158. padding-bottom: 5px;
  159. color: $dark-text-color;
  160. }
  161. &__link {
  162. display: inline;
  163. background: transparent;
  164. padding: 0;
  165. margin: 0;
  166. border: 0;
  167. color: $dark-text-color;
  168. text-decoration: underline;
  169. font-size: inherit;
  170. &:hover {
  171. text-decoration: none;
  172. }
  173. &:active,
  174. &:focus {
  175. background-color: rgba($dark-text-color, 0.1);
  176. }
  177. }
  178. .button {
  179. height: 36px;
  180. padding: 0 16px;
  181. margin-inline-end: 10px;
  182. font-size: 14px;
  183. }
  184. }
  185. .compose-form__poll-wrapper {
  186. border-top: 1px solid darken($simple-background-color, 8%);
  187. overflow-x: hidden;
  188. ul {
  189. padding: 10px;
  190. }
  191. .poll__footer {
  192. border-top: 1px solid darken($simple-background-color, 8%);
  193. padding: 10px;
  194. display: flex;
  195. align-items: center;
  196. button,
  197. select {
  198. width: 100%;
  199. flex: 1 1 50%;
  200. &:focus {
  201. border-color: $highlight-text-color;
  202. }
  203. }
  204. }
  205. .button.button-secondary {
  206. font-size: 14px;
  207. font-weight: 400;
  208. padding: 6px 10px;
  209. height: auto;
  210. line-height: inherit;
  211. color: $action-button-color;
  212. border-color: $action-button-color;
  213. margin-inline-end: 5px;
  214. }
  215. li {
  216. display: flex;
  217. align-items: center;
  218. .poll__option {
  219. flex: 0 0 auto;
  220. width: calc(100% - (23px + 6px));
  221. margin-inline-end: 6px;
  222. }
  223. }
  224. select {
  225. appearance: none;
  226. box-sizing: border-box;
  227. font-size: 14px;
  228. color: $inverted-text-color;
  229. display: inline-block;
  230. width: auto;
  231. outline: 0;
  232. font-family: inherit;
  233. background: $simple-background-color
  234. url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
  235. no-repeat right 8px center / auto 16px;
  236. border: 1px solid darken($simple-background-color, 14%);
  237. border-radius: 4px;
  238. padding: 6px 10px;
  239. padding-right: 30px;
  240. }
  241. .icon-button.disabled {
  242. color: darken($simple-background-color, 14%);
  243. }
  244. }
  245. .muted .poll {
  246. color: $dark-text-color;
  247. &__chart {
  248. background: rgba(darken($ui-primary-color, 14%), 0.7);
  249. &.leading {
  250. background: rgba($ui-highlight-color, 0.5);
  251. }
  252. }
  253. }