diff --git a/src/App.scss b/src/App.scss index db9f62f02c98ea7090f45c0a098ba93ce75ba619..e4c764bf0db2d9c47c78a3fb1cd5ff520c26220a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -200,6 +200,7 @@ input, textarea, .select { } } + label::before { + flex-shrink: 0; display: inline-block; content: ''; transition: box-shadow 200ms; @@ -236,6 +237,7 @@ input, textarea, .select { } } + label::before { + flex-shrink: 0; display: inline-block; content: '✔'; transition: color 200ms; diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue index 28e9f4a86747d28cc814585831217b3f73be097c..4c765ae2f517aa2c27008148b5ee29688eecc0a8 100644 --- a/src/components/poll/poll.vue +++ b/src/components/poll/poll.vue @@ -31,8 +31,8 @@ :disabled="loading" :value="index" > - <label> - {{option.title}} + <label class="option-vote"> + <div>{{option.title}}</div> </label> </div> </div> @@ -68,8 +68,7 @@ margin: 0 0 0.5em; } .poll-option { - margin: 0.5em 0; - height: 1.5em; + margin: 0.75em 0.5em; } .option-result { height: 100%; @@ -87,6 +86,7 @@ } .result-percentage { width: 3.5em; + flex-shrink: 0; } .result-fill { height: 100%; @@ -99,6 +99,10 @@ left: 0; transition: width 0.5s; } + .option-vote { + display: flex; + align-items: center; + } input { width: 3.5em; }