Skip to content

2
2018_web_app
Commit 9fda1425 by gema
Options

ajusters loading page

parent 16d7683e
Showing with 178 additions and 222 deletions
fuel/app/views/layout/template.twig
...@@ -34,15 +34,16 @@ ...@@ -34,15 +34,16 @@
<div class="cs-loader"> <div class="cs-loader">
<div class="cs-loader-logo" > <div class="cs-loader-logo" >
<img src="assets/img/logos/inutralia.png" class="img-responsive-custom"> <img src="assets/img/logos/inutralia.png" class="img-responsive-custom">
<div class="cs-loader-inner">
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
</div>
</div> </div>
<div class="cs-loader-inner">
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
</div>
</div> </div>
<!--menú vertical y horizontal--> <!--menú vertical y horizontal-->
{% include 'layout/menu.twig' %} {% include 'layout/menu.twig' %}
......
fuel/app/views/layout/template_dashboard.twig
...@@ -34,15 +34,16 @@ ...@@ -34,15 +34,16 @@
<div class="cs-loader"> <div class="cs-loader">
<div class="cs-loader-logo" > <div class="cs-loader-logo" >
<img src="assets/img/logos/inutralia.png" class="img-responsive-custom"> <img src="assets/img/logos/inutralia.png" class="img-responsive-custom">
<div class="cs-loader-inner">
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
</div>
</div> </div>
<div class="cs-loader-inner">
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
</div>
</div> </div>
<!--menú vertical y horizontal--> <!--menú vertical y horizontal-->
......
public/assets/css/custom.css
...@@ -239,8 +239,6 @@ input:checked + .slider:before { ...@@ -239,8 +239,6 @@ input:checked + .slider:before {
left:10px; left:10px;
padding:10px; padding:10px;
} }
} }
/*----------------------------------------------------*/ /*----------------------------------------------------*/
...@@ -278,9 +276,9 @@ input:checked + .slider:before { ...@@ -278,9 +276,9 @@ input:checked + .slider:before {
.btn-delete{background-color: #c83737} .btn-delete{background-color: #c83737}
/*----------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------TABS PERSONALIZADOS, PARA MENÚS CON COLORES CORPORATIVOS. PARA LA TAB DEL MENÚ PERSONALIZADO Y PARA LAS DE LOS MENÚS SALUDABLES------------------*/ /*------------TABS PERSONALIZADOS, PARA MENÚS CON COLORES CORPORATIVOS. PARA LA TAB DEL MENÚ PERSONALIZADO Y PARA LAS DE LOS MENÚS SALUDABLES------------------*/
/*-------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.nav-tabs-menu-personalizado>li.active>a, .nav-tabs-menu-personalizado>li.active>a:focus, .nav-tabs-menu-personalizado>li.active>a:hover { .nav-tabs-menu-personalizado>li.active>a, .nav-tabs-menu-personalizado>li.active>a:focus, .nav-tabs-menu-personalizado>li.active>a:hover {
color: #fff; color: #fff;
...@@ -392,9 +390,9 @@ input:checked + .slider:before { ...@@ -392,9 +390,9 @@ input:checked + .slider:before {
} }
/*----------------------------------------------------*/ /*-------------------------------------------------------------------------------*/
/*-------------TEXTOS, PADINGS, MARGINS------------------*/ /*---------------------------------TEXTOS, PADINGS, MARGINS----------------------*/
/*-------------------------------------------------------*/ /*------------------------------------------------------------------------------*/
h1{ h1{
font-size:2.5em!important; font-size:2.5em!important;
...@@ -531,14 +529,14 @@ a:focus { ...@@ -531,14 +529,14 @@ a:focus {
font-size:20px; font-size:20px;
} }
} }
/*****************************************************************************/ /***************************************************************************************/
/**********************************CHECKBOX Y RADIOBUTTON CUSTOM*****************/ /**********************************CHECKBOX Y RADIOBUTTON CUSTOM************************/
/***************************************************************************************/ /***************************************************************************************/
.ac-custom { .ac-custom {
padding: 0 2em; padding: 0 2em;
max-width:100%; max-width:100%;
} }
.ac-custom label { .ac-custom label {
display: inline-block; display: inline-block;
position: relative; position: relative;
...@@ -585,7 +583,7 @@ a:focus { ...@@ -585,7 +583,7 @@ a:focus {
.ac-custom input[type="radio"]:checked + label::before { .ac-custom input[type="radio"]:checked + label::before {
opacity: 0.8; opacity: 0.8;
} }
/*trazado radio button*/ /*******************trazado radio button******/
.ac-custom svg path { .ac-custom svg path {
stroke: #92bb00; stroke: #92bb00;
stroke-width: 13px; stroke-width: 13px;
...@@ -645,8 +643,10 @@ a:focus { ...@@ -645,8 +643,10 @@ a:focus {
padding: 15px 5px 15px 5px; padding: 15px 5px 15px 5px;
} }
} }
/*----------------------------------------------GIF CARGA DE PAGINA----------------------*/
/******************************************************************************************/
/*----------------------------------------------GIF CARGA DE PAGINA----------------------*/
/******************************************************************************************/
.cs-loader { .cs-loader {
z-index: 9999; z-index: 9999;
...@@ -657,25 +657,18 @@ a:focus { ...@@ -657,25 +657,18 @@ a:focus {
left: 0; left: 0;
height:100vh; height:100vh;
width: 100%; width: 100%;
display:flex;
align-items:center;
justify-content:center;
} }
.cs-loader-logo { .cs-loader-logo {
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align:center;
top:250px;
} }
.cs-loader-inner { .cs-loader-inner {
transform: translateY(-50%); transform: translateY(-50%);
top: 350px; margin-top:40px;
/*position: absolute;*/
width: calc(100% - 200px); width: calc(100% - 200px);
color: #C966CD; color: #C966CD;
padding: 0 100px; padding: 0 100px;
...@@ -764,19 +757,143 @@ a:focus { ...@@ -764,19 +757,143 @@ a:focus {
/**********************************************************************************************************************************/
/*********************************************LOGIN***********************************************************************************/ /*********************************************LOGIN***********************************************************************************/
/*.box-login {*/ /****************************************************************************************************************************************/
/*position: absolute;*/
/*left: 50%;*/ @media (max-width:639px){
/*top: 50%;*/ .box-login {
/*transform: translate(-50%, -50%);*/ position: absolute;
/*width: 30%;*/ left: 50%;
/*height: 60%;*/ top: 50%;
/*padding: 20px;*/ transform: translate(-50%, -50%);
/*text-align: center;*/ width: 100%;
/*box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);*/ height: 60%;
/*}*/ padding: 10px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 640px) and (max-width: 736px) {
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width:737px) and (max-width: 991px){
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media(min-width: 992px)and (max-width: 1199px){
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1199px)and (max-width: 1367px) {
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1368px)and (max-width: 1598px) {
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 50%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1599px)and (max-width: 1599px) {
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1600px)and (max-width: 1930px) {
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height:45%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1935px) {
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 40%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-MAIN MENU HORIZONTAL NAVBAR*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-MAIN MENU HORIZONTAL NAVBAR*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
...@@ -810,8 +927,9 @@ a:focus { ...@@ -810,8 +927,9 @@ a:focus {
font-size:18px; font-size:18px;
} }
} }
/**********************************************************************************************************************/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-DASHBOARD, HOME*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-DASHBOARD, HOME*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/**********************************************************************************************************************/
.text-btn-home{ .text-btn-home{
color:#fff; color:#fff;
} }
...@@ -824,7 +942,6 @@ a:focus { ...@@ -824,7 +942,6 @@ a:focus {
animation: bounce 1s; animation: bounce 1s;
/*transition: all 0.3s ease-in-out;*/ /*transition: all 0.3s ease-in-out;*/
/*transform: scale(0.8);*/ /*transform: scale(0.8);*/
} }
.btn-home:hover { .btn-home:hover {
...@@ -914,8 +1031,9 @@ a:focus { ...@@ -914,8 +1031,9 @@ a:focus {
} }
} }
/*----------------------------------------*/ /*----------------------------------------------------------------*/
/*----------CUADRÍCULA CUADRADOS MISMA ALTURA HOME--------------*/ /*----------CUADRÍCULA CUADRADOS MISMA ALTURA HOME--------------*/
/******************************************************************/
.col-container { .col-container {
display: table; display: table;
...@@ -936,8 +1054,9 @@ a:focus { ...@@ -936,8 +1054,9 @@ a:focus {
} }
} }
/*************************************************************************************************************************/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-FILTROS RECETARIO*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-FILTROS RECETARIO*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/******************************************************************************************************************************/
.mt-arrow-filters{ .mt-arrow-filters{
margin-top:-40px; margin-top:-40px;
...@@ -966,8 +1085,9 @@ a:focus { ...@@ -966,8 +1085,9 @@ a:focus {
position: relative; position: relative;
z-index: 9; z-index: 9;
} }
/****************************************************************************************************************************************/
/****************************************************LISTADO DE ARTICULOS***************************************************************/ /****************************************************LISTADO DE ARTICULOS***************************************************************/
/******************************************************************************************************************************************/
.date-box{ .date-box{
position:absolute; position:absolute;
top:0; top:0;
...@@ -1046,169 +1166,3 @@ a:focus { ...@@ -1046,169 +1166,3 @@ a:focus {
} }
} }
/*-*-*-*---*-*-*--*-*-*--*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*RESPONSIVE-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*---*-*-*-*-*-*/
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_vertical iphone 3, 4, 5 **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
/*@media (width: 320px) {*/
@media (min-width: 318px) and (max-width: 329px) {
}
/*v**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_vertical androids peques**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 330px) and (max-width: 374px) {
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_horizontal iphone 3, 4, 5 **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 479px) and (max-width: 569px) {
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_vertical iphone 6 u 6plis **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 374px) and (max-width: 639px) {
}
@media (max-width:639px){
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 60%;
padding: 10px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
/**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_horizontal iphone 6 y 6plus **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 640px) and (max-width: 736px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ Small devices (tablets, 768px and up) **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width:737px) and (max-width: 991px){
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ ipad 3/4 horizontal 1024x 768**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media(min-width: 992px)and (max-width: 1199px){
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ po típico 1366x768**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ */
@media (min-width: 1199px)and (max-width: 1367px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1368px)and (max-width: 1598px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 50%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1599px)and (max-width: 1599px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1600px)and (max-width: 1930px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height:45%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1935px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 40%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment