i trying make handlebars partial template create multi-line checkbox based off of design specs given me ux designer.
to create parts of element using css tables. first , second cell appears getting undefined padding. cant seem find reason these cells not lining properly.
html
<label style="margin-bottom:12px; display:table; border-style:hidden;"> <div style="display:table-cell; width:34px"> <span class="fancy-checkbox-multiline"> <input type="checkbox" value="box"> <span class="box"> <span class="checker"> <span class="mark"></span> </span> </span> </span> </div> <div style="display:table-cell; padding:0;"> <div style="display:table; border-style:hidden;"> <div style="display:table-row; font-size:12px; line-height:12px"> primary label </div> </div> <div style="display:table;"> <div style="display:table-cell; font-size:10px; line-height:12px"> secondary label </div> <div style="display:table-cell; font-size:10px; line-height:12px; padding-left:5px"> tertiary label </div> </div> </div> <div style="display:table-cell; line-height:34px; padding-left:20px;">1 </div> </label> i have created js fiddle https://jsfiddle.net/polishvendetta/3s7kxta4/8/
i can move checkbox down match text in second cell adds unexpected space top of element wont match other check boxes. why padding exist?
there space because text aligned baseline, can align top vertical-align
$font-color-grey-2: #bbbdbf; $font-color-primary: #525252; body { font-family: "avant garde", avantgarde, "century gothic", centurygothic, applegothic, sans-serif; font-style: normal; color: #222; line-height: 1.5; background: #fff; } @mixin fancy-box-multiline { display: inline-block; height: 20px; width: 20px; margin-right: 10px; border: 1px solid $font-color-grey-2; position: relative; top: 0px; } @mixin fancy-check { $mark-color: white; .checker { $uptick-rotation: 33deg; border-right: 2px solid $mark-color; -webkit-transform: rotate($uptick-rotation); -moz-transform: rotate($uptick-rotation); -ms-transform: rotate($uptick-rotation); -o-transform: rotate($uptick-rotation); transform: rotate($uptick-rotation); height: 14px; width: 9px; display: none; position: absolute; bottom: 4px; left: 4px; .mark { $downtick-rotation: 12deg; border-bottom: 2px solid $mark-color; width: 7px; height: 1px; position: absolute; bottom: 1px; right: -1px; -webkit-transform: rotate($downtick-rotation); -moz-transform: rotate($downtick-rotation); -ms-transform: rotate($downtick-rotation); -o-transform: rotate($downtick-rotation); transform: rotate($downtick-rotation); } } } .fancy-checkbox-multiline { .box { @include fancy-box-multiline(); @include fancy-check(); } input[type=checkbox] { display: none; } input[type=checkbox]:checked + .box { background: $font-color-primary; border-color: $font-color-primary; .checker { display: inline-block; } } input[type=checkbox]:disabled + .box { opacity: 0.5; } }<label style="margin-bottom:12px; display:table; border-style:hidden;"> <div style="display:table-cell; width:34px"> <span class="fancy-checkbox-multiline"> <input type="checkbox" value="box"> <span class="box"> <span class="checker"> <span class="mark"></span> </span> </span> </span> </div> <div style="display:table-cell; padding:0; vertical-align:top"> <div style="display:table; border-style:hidden;"> <div style="display:table-row; font-size:12px; line-height:12px"> primary label </div> </div> <div style="display:table;"> <div style="display:table-cell; font-size:10px; line-height:12px"> secondary label </div> <div style="display:table-cell; font-size:10px; line-height:12px; padding-left:5px"> tertiary label </div> </div> </div> <div style="display:table-cell; line-height:34px; padding-left:20px;">1 </div> </label>
Comments
Post a Comment