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.

213 lines
4.1 KiB

  1. .poll {
  2. margin-top: 16px;
  3. font-size: 14px;
  4. li {
  5. margin-bottom: 10px;
  6. position: relative;
  7. }
  8. &__chart {
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. height: 100%;
  13. display: inline-block;
  14. border-radius: 4px;
  15. background: darken($ui-primary-color, 14%);
  16. &.leading {
  17. background: $ui-highlight-color;
  18. }
  19. }
  20. &__text {
  21. position: relative;
  22. display: flex;
  23. padding: 6px 0;
  24. line-height: 18px;
  25. cursor: default;
  26. overflow: hidden;
  27. input[type=radio],
  28. input[type=checkbox] {
  29. display: none;
  30. }
  31. .autossugest-input {
  32. flex: 1 1 auto;
  33. }
  34. input[type=text] {
  35. display: block;
  36. box-sizing: border-box;
  37. width: 100%;
  38. font-size: 14px;
  39. color: $inverted-text-color;
  40. outline: 0;
  41. font-family: inherit;
  42. background: $simple-background-color;
  43. border: 1px solid darken($simple-background-color, 14%);
  44. border-radius: 4px;
  45. padding: 6px 10px;
  46. &:focus {
  47. border-color: $highlight-text-color;
  48. }
  49. }
  50. &.selectable {
  51. cursor: pointer;
  52. }
  53. &.editable {
  54. display: flex;
  55. align-items: center;
  56. overflow: visible;
  57. }
  58. }
  59. &__input {
  60. display: inline-block;
  61. position: relative;
  62. border: 1px solid $ui-primary-color;
  63. box-sizing: border-box;
  64. width: 18px;
  65. height: 18px;
  66. flex: 0 0 auto;
  67. margin-right: 10px;
  68. top: -1px;
  69. border-radius: 50%;
  70. vertical-align: middle;
  71. margin-top: auto;
  72. margin-bottom: auto;
  73. flex: 0 0 18px;
  74. &.checkbox {
  75. border-radius: 4px;
  76. }
  77. &.active {
  78. border-color: $valid-value-color;
  79. background: $valid-value-color;
  80. }
  81. }
  82. &__number {
  83. display: inline-block;
  84. width: 36px;
  85. font-weight: 700;
  86. padding: 0 10px;
  87. text-align: right;
  88. margin-top: auto;
  89. margin-bottom: auto;
  90. flex: 0 0 36px;
  91. }
  92. &__footer {
  93. padding-top: 6px;
  94. padding-bottom: 5px;
  95. color: $dark-text-color;
  96. }
  97. &__link {
  98. display: inline;
  99. background: transparent;
  100. padding: 0;
  101. margin: 0;
  102. border: 0;
  103. color: $dark-text-color;
  104. text-decoration: underline;
  105. font-size: inherit;
  106. &:hover {
  107. text-decoration: none;
  108. }
  109. &:active,
  110. &:focus {
  111. background-color: rgba($dark-text-color, .1);
  112. }
  113. }
  114. .button {
  115. height: 36px;
  116. padding: 0 16px;
  117. margin-right: 10px;
  118. font-size: 14px;
  119. }
  120. }
  121. .compose-form__poll-wrapper {
  122. border-top: 1px solid darken($simple-background-color, 8%);
  123. ul {
  124. padding: 10px;
  125. }
  126. .poll__footer {
  127. border-top: 1px solid darken($simple-background-color, 8%);
  128. padding: 10px;
  129. display: flex;
  130. align-items: center;
  131. button,
  132. select {
  133. flex: 1 1 50%;
  134. }
  135. }
  136. .button.button-secondary {
  137. font-size: 14px;
  138. font-weight: 400;
  139. padding: 6px 10px;
  140. height: auto;
  141. line-height: inherit;
  142. color: $action-button-color;
  143. border-color: $action-button-color;
  144. margin-right: 5px;
  145. }
  146. li {
  147. display: flex;
  148. align-items: center;
  149. .poll__text {
  150. flex: 0 0 auto;
  151. width: calc(100% - (23px + 6px));
  152. margin-right: 6px;
  153. }
  154. }
  155. select {
  156. appearance: none;
  157. box-sizing: border-box;
  158. font-size: 14px;
  159. color: $inverted-text-color;
  160. display: inline-block;
  161. width: auto;
  162. outline: 0;
  163. font-family: inherit;
  164. background: $simple-background-color 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>") no-repeat right 8px center / auto 16px;
  165. border: 1px solid darken($simple-background-color, 14%);
  166. border-radius: 4px;
  167. padding: 6px 10px;
  168. padding-right: 30px;
  169. }
  170. .icon-button.disabled {
  171. color: darken($simple-background-color, 14%);
  172. }
  173. }
  174. .muted .poll {
  175. color: $dark-text-color;
  176. &__chart {
  177. background: rgba(darken($ui-primary-color, 14%), 0.2);
  178. &.leading {
  179. background: rgba($ui-highlight-color, 0.2);
  180. }
  181. }
  182. }