sun@flexを使用した遷移ボタンのスニペット
Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <p>buttonBox 基本並び（float:left）</p> <div class="buttonBox"> <ul class="flex row"> <li class="col-xs-12 col-sm-6"><a class="button prev">戻る</a></li> <li class="col-xs-12 col-sm-6"><a class="button next">進む</a></li> </ul> </div> <hr> <p>buttonBox 逆並び（float:right）</p> <div class="buttonBox"> <ul class="flex row reverse"> <li class="col-xs-12 col-sm-6"><a class="button next">進む</a></li> <li class="col-xs-12 col-sm-6"><a class="button prev">戻る</a></li> </ul> </div> <hr> <p>buttonBox center配置（ボタンx2）</p> <ul class="caption"> <li>※.row の max-width を設定</li> </ul> <hr> <div class="buttonBox center"> <ul class="flex row"> <li class="col-xs-12 col-sm-6"><a class="button next">進む</a></li> <li class="col-xs-12 col-sm-6"><a class="button prev">戻る</a></li> </ul> </div> <hr> <p>buttonBox center配置（ボタンx1）</p> <ul class="caption"> <li>※.row幅は x2 の半分</li> </ul> <div class="buttonBox center single"> <ul class="flex row"> <li class="col-xs-12"><a class="button">進む</a></li> </ul> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | /* ==================================================== ボタンボックス ==================================================== */ .buttonBox { text-align: center; } .buttonBox p { text-align: center; } .buttonBox li .button { display: block; padding: 0.75em; } .buttonBox.center .row { display: inline-flex; width: 103%; max-width: 500px; } .buttonBox.center.single .row { max-width: 250px; } @media print, screen and (max-width: 767px) { .buttonBox > .row > .col-xs-12 { margin-top: 0.25em; margin-bottom: 0.25em; } } @media print, screen and (max-width: 991px) { .buttonBox > .row > .col-sm-12 { margin-top: 0.25em; margin-bottom: 0.25em; } } @media screen and (max-width: 1199px) { .buttonBox > .row > .col-md-12 { margin-top: 0.25em; margin-bottom: 0.25em; } } @media screen and (max-width: 9999px) { .buttonBox > .row > .col-lg-12 { margin-top: 0.25em; margin-bottom: 0.25em; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | /* ==================================================== ボタンボックス ==================================================== */ //buttonBox 最大幅 $buttonBox_maxWidth: 500px; .buttonBox { text-align:center; p { text-align:center; } li { .button { display:block; padding:0.75em; } } &.center .row { display:inline-block; width:103%; max-width:$buttonBox_maxWidth; } &.center.single .row { max-width:$buttonBox_maxWidth / 2; } } @media print, screen and (max-width: 767px) { .buttonBox > .row > .col-xs-12 { margin-top:0.25em; margin-bottom:0.25em; } } @media print, screen and (max-width: 991px) { .buttonBox > .row > .col-sm-12 { margin-top:0.25em; margin-bottom:0.25em; } } @media screen and (max-width: 1199px) { .buttonBox > .row > .col-md-12 { margin-top:0.25em; margin-bottom:0.25em; } } @media screen and (max-width: 9999px) { .buttonBox > .row > .col-lg-12 { margin-top:0.25em; margin-bottom:0.25em; } } |
