l-assiette/css/base.css

429 lines
6.4 KiB
CSS

@import url("https://fonts.googleapis.com/css?family=Muli|Open+Sans");
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #44A;
box-shadow: 0 5px 5px #999999;
}
nav {
background-color: #3d3d7c;
color: white;
}
section {
overflow: hidden;
transition: height 150ms ease-out;
height: auto;
}
footer {
background-color: #333;
color: #EEE;
box-shadow: inset 0 5px 5px #999999;
padding: 40px;
}
.contenedor {
max-width: 1200px;
width: 80%;
margin: auto;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
[class*=col-] {
float: left;
}
.row::after {
content: "";
clear: both;
display: table;
}
.center {
text-align: center;
}
#tituloP {
padding: 30px;
color: white;
font-size: 50px;
font-family: "Muli";
}
#tituloP--descripcion {
padding: 10px;
font-size: large;
font-family: "Open Sans";
}
.center {
text-align: center;
}
.boton {
display: inline-block;
margin: 20px;
border-radius: 3px;
box-shadow: 1px 1px 3px #090909;
padding: 10px 30px;
cursor: pointer;
text-decoration: none;
}
.mySeccion {
overflow: hidden;
transition: height 150ms ease-out;
height: auto;
}
#botonRegistro {
background-color: green;
color: white;
font-size: large;
transition: transform 200ms, box-shadow 200ms;
}
#botonRegistro:hover {
transform: translate(-1px, -1px);
box-shadow: 2px 2px 7px #050505;
}
#botonInicioSesion {
background-color: white;
transition: transform 200ms, box-shadow 200ms;
}
#botonInicioSesion:hover {
transform: translate(-1px, -1px);
box-shadow: 2px 2px 7px #050505;
}
#botonInicioSesion:visited {
color: black;
}
.contenido {
margin: 40px 0;
}
.image {
padding: 0 20px;
width: 100%;
height: auto;
}
.descripcionComida {
padding: 0 30px;
text-align: center;
font-size: large;
}
.inicio_registro {
color: white;
}
input {
min-width: 80%;
min-height: 40px;
padding: 10px;
color: #44A;
font-size: large;
}
.botonEnviarForm {
background-color: white;
box-shadow: 1px 1px 2px gray;
cursor: pointer;
border: none;
transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms;
}
.botonEnviarForm:hover {
background-color: #4949e2;
color: white;
transform: translate(-1px, -1px);
box-shadow: 2px 2px 2px gray;
}
.google-button {
height: 40px;
border-width: 0;
background: white;
color: #737373;
border-radius: 5px;
white-space: nowrap;
box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05);
transition-property: background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
padding: 0;
cursor: pointer;
}
.google-button:focus, .google-button:hover {
box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
}
.google-button:active {
background-color: #e5e5e5;
box-shadow: none;
transition-duration: 10ms;
}
.google-button__icon {
display: inline-block;
vertical-align: middle;
margin: 8px 0 8px 8px;
width: 18px;
height: 18px;
box-sizing: border-box;
}
.google-button__text {
display: inline-block;
vertical-align: middle;
padding: 0 24px;
font-size: 14px;
font-weight: bold;
font-family: "Roboto", arial, sans-serif;
}
.unseen {
visibility: hidden;
}
.botonAddCart {
background-color: white;
padding: 5px;
color: #4444aa;
box-shadow: 0.1px 0.1px grey;
border-radius: 2px;
cursor: pointer;
font-size: large;
transition: background-color 250ms, color 250ms;
user-select: none;
}
.botonAddCart:hover {
background-color: #4444AA;
color: white;
}
.caja {
border-radius: 4px;
box-shadow: 1px 1px 2px gray;
padding: 15px;
}
.botonPayPal, .botonVisa {
background-color: #0070ba;
color: white;
font-size: large;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 0 5px;
}
.botonVisa {
background-color: #1a1f5e;
}
.linksNavBar {
margin: 0;
}
.linksNavBar li {
list-style: none;
float: left;
transition: background-color 250ms;
}
.linksNavBar li a {
cursor: pointer;
display: inline-block;
padding: 15px;
color: white;
text-decoration: none;
}
.linksNavBar li:after {
clear: both;
}
.linksNavBar li:hover {
background-color: #35356a;
}
.plato--Titulo {
font-size: x-large;
font-weight: bold;
font-family: "Muli";
color: #3d3d7c;
}
.plato--Descripcion {
font-size: large;
color: #333333;
}
.plato--Precio {
font-size: large;
}
.plato--Precio:before {
color: green;
content: "Precio unitario: ";
}
.plato--Precio:after {
content: " S/.";
}
.plato--Cantidad {
font-size: large;
font-weight: bold;
display: inline-table;
padding: 15px;
}
.plato--Cantidad--Icon {
display: table-cell;
vertical-align: top;
cursor: pointer;
transition: color 250ms;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.plato--Cantidad--Icon:hover {
color: #4444aa;
}
.carrito {
text-align: left;
}
#carrito--elementos, #carrito--precio {
padding: 0 10px;
}
.carritoElem:after {
clear: both;
}
.carritoElem--img {
float: left;
margin: 10px 20px;
width: 200px;
}
.carrito--subTotal {
text-align: right;
font-weight: bold;
font-family: "Muli", sans-serif;
font-size: x-large;
}
.carrito--subTotal:before {
content: "Subtotal: ";
}
.carrito--subTotal:after {
content: " S/.";
}
.carrito--precio--contenido--titulo {
text-align: center;
font-family: "Muli", sans-serif;
font-size: x-large;
font-weight: 900;
}
.carrito--precio--contenido--botonPagar {
display: inline-block;
width: 100%;
text-align: center;
padding: 10px;
background-color: #4444aa;
color: white;
border-radius: 3px;
cursor: pointer;
}
.carrito--precio--contenido--botonPagar:hover {
background-color: #3d3d7c;
}
#carrito--boton--seguircomprando {
margin: 10px 0;
padding: 10px 20px;
background-color: green;
color: white;
text-decoration: none;
border-radius: 4px;
}
#carrito--boton--seguircomprando:visited {
color: white;
}
#carrito--tituloprincipal {
text-align: center;
font-size: xx-large;
font-family: "Muli", sans-serif;
font-weight: 900;
margin: 10px 0;
}
/*# sourceMappingURL=base.css.map */