añadido radiobutons animated y customizados

fuel/app/views/menussaludables/menu/index.twig

@@ -47,8 +47,12 @@
                                         PRIMER PLATO
                                     </div>
                                     <div class="container-box-border-box">
-                                        dfsdfasdf
-                                        asdfasdfsdf
+                                       <form class="ac-custom ac-radio ac-fill" autocomplete="off">
+                                           <ul>
+                                               <li><input id="comida_primer_1_{{ i }}" name="comida_primer{{ i }}" value="1" type="radio"><label for="comida_primer_1_{{ i }}">sopa de verduras</label></li>
+                                               <li><input id="comida_primer_2_{{ i }}" name="comida_primer{{ i }}" value="0" type="radio"><label for="comida_primer_2_{{ i }}">crema de calabaza</label></li>
+                                           </ul>
+                                        </form>
                                     </div>
                                 </div>
                                 <div class="border-box border-menus-saludables-light">
@@ -56,8 +60,12 @@
                                         SEGUNDO PLATO
                                     </div>
                                     <div class="container-box-border-box">
-                                        dfsdfasdf
-                                        asdfasdfsdf
+                                        <form class="ac-custom ac-radio ac-fill" autocomplete="off">
+                                                <ul>
+                                                    <li><input id="comida_segun_1_{{ i }}" name="comida_segun{{ i }}" value="1" type="radio"><label for="comida_segun_1_{{ i }}">pollo con verduras al vapor</label></li>
+                                                    <li><input id="comida_segun_2_{{ i }}" name="comida_segun{{ i }}" value="0" type="radio"><label for="comida_segun_2_{{ i }}">merluza al vapor</label></li>
+                                                </ul>
+                                        </form>
                                     </div>
                                 </div>
                             </div>
@@ -70,8 +78,12 @@
                                     </div>
 
                                     <div class="container-box-border-box">
-                                        dfsdfasdf
-                                        asdfasdfsdf
+                                        <form class="ac-custom ac-radio ac-fill" autocomplete="off">
+                                            <ul>
+                                                <li><input id="cena_primer_1_{{ i }}" name="cena_primer{{ i }}" value="1" type="radio"><label for="cena_primer_1_{{ i }}">ensalada</label></li>
+                                                <li><input id="cena_primer_2_{{ i }}" name="cena_primer{{ i }}" value="0" type="radio"><label for="cena_primer_2_{{ i }}">sopa</label></li>
+                                            </ul>
+                                        </form>
                                     </div>
                                 </div>
                                 <div class="border-box border-menus-saludables-light">
@@ -79,8 +91,12 @@
                                         SEGUNDO PLATO
                                     </div>
                                     <div class="container-box-border-box">
-                                        dfsdfasdf
-                                        asdfasdfsdf
+                                        <form class="ac-custom ac-radio ac-fill" autocomplete="off">
+                                            <ul>
+                                                <li><input id="cena_segun_1_{{ i }}" name="cena_segun{{ i }}" value="1" type="radio"><label for="cena_segun_1_{{ i }}">coliflor </label></li>
+                                                <li><input id="cena_segun_2_{{ i }}" name="cena_segun{{ i }}" type="radio"><label for="cena_segun_2_{{ i }}">tortilla francesa</label></li>
+                                            </ul>
+                                        </form>
                                     </div>
                                 </div>
                             </div>

public/assets/css/custom.css

@@ -250,6 +250,7 @@ h1{
 .mt20{
     margin-top:20px;
 }
+
 .mt30{
     margin-top:30px;
 }
@@ -315,6 +316,94 @@ a:focus {
 
 }
 
+
+
+/*****************************************************************************/
+/**********************************CHECKBOX Y RADIOBUTTON CUSTOM*****************/
+/***************************************************************************************/
+
+.ac-custom label {
+    display: inline-block;
+    position: relative;
+    font-size: 2em;
+    padding: 0 0 0 80px;
+    vertical-align: top;
+    color: rgba(0,0,0,0.2);
+    cursor: pointer;
+    transition: color 0.3s;
+}
+
+.ac-custom input[type="checkbox"],
+.ac-custom input[type="radio"],
+.ac-custom label::before {
+    width: 30px;
+    height: 30px;
+    top: 50%;
+    left: 0;
+    margin-top: -15px;
+    position: absolute;
+    cursor: pointer;
+}
+
+.ac-custom input[type="checkbox"],
+.ac-custom input[type="radio"] {
+    opacity: 0;
+    display: inline-block;
+    vertical-align: middle;
+    z-index: 100;
+}
+
+.ac-custom label::before {
+    content: '';
+    border: 4px solid #CCC;
+    transition: opacity 0.3s;
+}
+
+.ac-custom input[type="checkbox"]:checked + label,
+.ac-custom input[type="radio"]:checked + label {
+    color: #ccc;
+}
+
+.ac-custom input[type="checkbox"]:checked + label::before,
+.ac-custom input[type="radio"]:checked + label::before {
+    opacity: 0.8;
+}
+/*trazado radio button*/
+.ac-custom svg path {
+    stroke: #92bb00;
+    stroke-width: 13px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+}
+
+.ac-custom label {
+    display: inline-block;
+    position: relative;
+    font-size: 1em;
+    padding: 0 0 0 50px;
+    vertical-align: top;
+    color: rgba(0,0,0,0.2);
+    cursor: pointer;
+    transition: color 0.3s;
+}
+
+.ac-custom svg {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 50%;
+    margin-top: -10px;
+    left: 5px;
+    pointer-events: none;
+}
+
+.ac-custom li {
+    margin: 0 auto;
+    padding: 1em 0;
+    position: relative;
+}
+
 /*********************************************LOGIN***********************************************************************************/
 /*.box-login {*/
 /*position: absolute;*/