itepechi/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Releases 1 Activity

Make line wraps in checkboxes okay

Browse source
This commit is contained in:
itepechi 2023-09-24 04:27:54 +09:00
parent 1015801074
commit 9820945335
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/checkbox/checkbox.vue
View file

@ -34,19 +34,24 @@ export default {
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
$checkbox-size: 1.2em;
$padding-size: 0.5em;
.checkbox { .checkbox {
position: relative; position: relative;
display: inline-block; display: inline-block;
min-height: 1.2em; min-height: $checkbox-size;
padding-left: calc($checkbox-size + $padding-size);
&-indicator { &-indicator {
position: relative; position: relative;
padding-left: 1.2em; padding-left: calc($checkbox-size + $padding-size);
margin-left: calc(($checkbox-size + $padding-size) * -1);
} }
&-indicator::before { &-indicator::before {
position: absolute; position: absolute;
right: 0; left: 0;
top: 0; top: 0;
display: block; display: block;
content: '✓'; content: '✓';
@ -92,11 +97,6 @@ export default {
color: $fallback--text; color: $fallback--text;
color: var(--inputText, $fallback--text); color: var(--inputText, $fallback--text);
} }
}
& > span {
margin-left: .5em;
} }
} }
</style> </style>