fix: improve styles on poll form (#1525)

This commit is contained in:
Nolan Lawson 2019-09-24 00:29:24 -07:00 committed by GitHub
parent ce33c80b6d
commit 59b6c7e0ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -17,14 +17,13 @@
<ul class="poll-choices" aria-label="Poll choices"> <ul class="poll-choices" aria-label="Poll choices">
{#each options as option, i} {#each options as option, i}
<li class="poll-choice poll-form-option"> <li class="poll-choice poll-form-option">
<input type="{multiple ? 'checkbox' : 'radio'}" <label>
id="poll-choice-{uuid}-{i}" <input type="{multiple ? 'checkbox' : 'radio'}"
name="poll-choice-{uuid}" name="poll-choice-{uuid}"
value="{i}" value="{i}"
on:change="onChange()" on:change="onChange()"
> >
<label for="poll-choice-{uuid}-{i}"> <span>{option.title}</span>
{option.title}
</label> </label>
</li> </li>
{/each} {/each}
@ -83,10 +82,14 @@
} }
li.poll-choice { li.poll-choice {
margin: 0; margin: 10px 0;
padding: 0; padding: 0;
} }
li.poll-choice:first-child {
margin-top: 0;
}
.option { .option {
margin: 0 0 10px 0; margin: 0 0 10px 0;
padding: 0; padding: 0;
@ -197,7 +200,7 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
.poll-form label { .poll-form label span {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
@ -228,8 +231,10 @@
.poll-stat-text { .poll-stat-text {
margin-left: 2px; margin-left: 2px;
} }
li.poll-choice {
margin: 5px 0;
}
} }
</style> </style>
<script> <script>
import SvgIcon from '../SvgIcon.html' import SvgIcon from '../SvgIcon.html'