One yet more: @@ -43,22 +44,25 @@ sub tariff_title { 1; __DATA__ -@@ control/tariff.css -* { - margin: 0; - padding: 0; - border: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; } -html { - background-color: #121212; - color: white; - font-family: 'Roboto', 'Arial', sans-serif; - font-size: 16px; } -a { - cursor: pointer; } +@@ control/tariff_about_old.html.ep +<div class="option__about"> + <div class="option__info"> + <div class="option__icon"><img src="<%= $icon %>"></div> + <h3 class="option__name"><%= $title %></h3> + </div> + <div class="option__duration"> + <p><%== $option1 %><%= stash->{ comment1 }? "<span> (" .stash->{ comment1 }.")</span>": '' %></ + <div class="switch option__switch"> + <input class="switch__toggle" type="checkbox" checked id="<%= $id %>"> + <label for="<%= $id %>"></label> + </div> + <p><%== $option2 %><%= stash->{ comment2 }? "<span> (" .stash->{ comment2 }.")</span>": '' %></ + </div> +</div> + +@@ control/tariff.css /* BASE BUTTON FOR TARIFF CARD */ .button { display: -webkit-box; But it would be better if `@@ control/tariff.css` were untouched: @@ -43,22 +44,25 @@ sub tariff_title { 1; __DATA__ + + +@@ control/tariff_about_old.html.ep +<div class="option__about"> + <div class="option__info"> + <div class="option__icon"><img src="<%= $icon %>"></div> + <h3 class="option__name"><%= $title %></h3> + </div> + <div class="option__duration"> + <p><%== $option1 %><%= stash->{ comment1 }? "<span> (" .stash->{ comment1 }.")</span>": '' %></ + <div class="switch option__switch"> + <input class="switch__toggle" type="checkbox" checked id="<%= $id %>"> + <label for="<%= $id %>"></label> + </div> + <p><%== $option2 %><%= stash->{ comment2 }? "<span> (" .stash->{ comment2 }.")</span>": '' %></ + </div> +</div> + @@ control/tariff.css -* { - margin: 0; - padding: 0; - border: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; } -html { - background-color: #121212; - color: white; - font-family: 'Roboto', 'Arial', sans-serif; - font-size: 16px; } -a { - cursor: pointer; } - - /* BASE BUTTON FOR TARIFF CARD */ .button { display: -webkit-box;