app/template/default/Block/modal_font_width.twig line 1

Open in your IDE?
  1. <style>
  2. @media only screen and (min-width: 1024px) {
  3.     body.have_curtain .ec-overlayRole{
  4.         display: block;
  5.     }
  6.     .modal_font_width-main.modal-main.modal-main_2{
  7.         grid-template-columns: 1fr;
  8.     }
  9.     .modal_font_width-main.modal-main.modal-main_2 .content-item-grid{
  10.         grid-template-columns: 1fr 1fr 1fr;
  11.     }
  12.     .modal_font_width-main-header .alert{
  13.         margin-top: 0;
  14.         background-color: #fff;
  15.         border-color: #fff;
  16.         color: #3C4246;
  17.         display: flex;
  18.         gap: 4px;
  19.     }
  20. }
  21. </style>
  22. <div id="modal_font_width" class="modal">
  23.     <div class="modal_font_width-item modal-item">
  24.         <div class="modal_font_width-header modal-header">
  25.             <h3 class="modal_font_width-title modal-title">文字の最小目安</h3>
  26.         </div>
  27.         <div class="modal_font_width-body modal-body">
  28.             <div class="modal_font_width-main-wrap modal-main-wrap step01 step">
  29.                 <div class="modal_font_width-main modal-main modal-main_2">
  30.                     <div class="modal_font_width-main-header modal-main-header">
  31.                         <div class="alert alert-primary">
  32.                             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.5816 0 0 3.5816 0 8C0 12.4184 3.5816 16 8 16C12.4184 16 16 12.4184 16 8C16 3.5816 12.4184 0 8 0ZM8.8 12H7.2V10.4H8.8V12ZM8.8 8.8H7.2L6.8 4H9.2L8.8 8.8Z" fill="#FB2A4F"/></svg>
  33.                             目安が満たされている場合でもデザインの内容によっては製作が難しくなる場合がございます。<br>その場合はその旨ご連絡させて頂きますので、何卒ご容赦くださいますようお願い申し上げます。
  34.                         </div>
  35.                     </div>
  36.                     <div class="modal_font_width-main-body modal-main-body">
  37.                         <div class="modal-main-item">
  38.                             <div class="content-item-grid">
  39.                                 <div class="grid-item">
  40.                                     <p class="label-solid label-solid01"><span>線の長さ〜100mm</span></p>
  41.                                     <table class="st-table">
  42.                                         <tr>
  43.                                             <td>・一般色の全色<br>・ガラス内側から貼る<br>・メタリックのブラック以外</td>
  44.                                             <td>0.8mm以上</td>
  45.                                         </tr>
  46.                                         <tr>
  47.                                             <td>・ラメ</td>
  48.                                             <td>1mm以上</td>
  49.                                         </tr>
  50.                                         <tr>
  51.                                             <td>・ミラー</td>
  52.                                             <td>0.8mm以上</td>
  53.                                         </tr>
  54.                                         <tr>
  55.                                             <td>・反射<br>・メタリックのブラック</td>
  56.                                             <td>1.5mm以上</td>
  57.                                         </tr>
  58.                                     </table>
  59.                                 </div>
  60.                                 <div class="grid-item">
  61.                                     <p class="label-solid label-solid02"><span>線の長さ〜300mm</span></p>
  62.                                     <table class="st-table">
  63.                                         <tr>
  64.                                             <td>・全て</td>
  65.                                             <td>1.5mm以上</td>
  66.                                         </tr>
  67.                                     </table>
  68.                                 </div>
  69.                                 <div class="grid-item">
  70.                                     <p class="label-solid label-solid03"><span>線の長さ301mm〜</span></p>
  71.                                     <table class="st-table">
  72.                                         <tr>
  73.                                             <td>・全て</td>
  74.                                             <td>2mm以上</td>
  75.                                         </tr>
  76.                                     </table>
  77.                                 </div>
  78.                             </div>
  79.                         </div>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.         </div>
  84.         <div class="modal_font_width-bottom modal-bottom">
  85.             <span class="modal-btn ec-inlineBtn--cancel">OK</span>
  86.         </div>
  87.     </div>
  88. </div>
  89. <script>
  90. $(function() {
  91.     $('#open-modal_font_width').on('click', function(){
  92.         $('#modal_font_width').addClass('is-active');
  93.         $('body').addClass('have_curtain');
  94.     });
  95.     $('.ec-inlineBtn--cancel').on('click', function(){
  96.         $('#modal_font_width').removeClass('is-active');
  97.         $('body').removeClass('have_curtain');
  98.     });
  99. });
  100. </script>