367 lines
5.9 KiB
Sass
367 lines
5.9 KiB
Sass
@import url('https://fonts.googleapis.com/css?family=Muli|Open+Sans')
|
|
|
|
$fuenteTitulos: 'Muli'
|
|
$fuentePrincipal: 'Open Sans'
|
|
|
|
*
|
|
box-sizing: border-box
|
|
|
|
html, body
|
|
margin: 0
|
|
padding: 0
|
|
font-family: $fuentePrincipal, 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
|
|
family: $fuenteTitulos
|
|
|
|
#tituloP--descripcion
|
|
padding: 10px
|
|
font:
|
|
size: large
|
|
family: $fuentePrincipal
|
|
|
|
.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
|
|
background-color: #0070ba
|
|
color: white
|
|
font-size: large
|
|
padding: 10px
|
|
border: none
|
|
border-radius: 5px
|
|
cursor: pointer
|
|
margin: 0 5px
|
|
|
|
.botonVisa
|
|
@extend .botonPayPal
|
|
background-color: #1a1f5e
|
|
|
|
.linksNavBar
|
|
margin: 0
|
|
li
|
|
list-style: none
|
|
float: left
|
|
transition: background-color 250ms
|
|
a
|
|
cursor: pointer
|
|
display: inline-block
|
|
padding: 15px
|
|
color: white
|
|
text-decoration: none
|
|
&:after
|
|
clear: both
|
|
&:hover
|
|
background-color: #35356a
|
|
|
|
.plato--Titulo
|
|
font:
|
|
size: x-large
|
|
weight: bold
|
|
family: $fuenteTitulos
|
|
color: #3d3d7c
|
|
|
|
.plato--Descripcion
|
|
font:
|
|
size: large
|
|
color: #333333
|
|
|
|
.plato--Precio
|
|
font-size: large
|
|
&:before
|
|
color: green
|
|
content: "Precio unitario: "
|
|
&:after
|
|
content: " S/."
|
|
|
|
.plato--Cantidad
|
|
font:
|
|
size: large
|
|
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
|
|
&: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
|
|
family: $fuenteTitulos, sans-serif
|
|
size: x-large
|
|
&:before
|
|
content: "Subtotal: "
|
|
&:after
|
|
content: " S/."
|
|
|
|
.carrito--precio--contenido--titulo
|
|
text-align: center
|
|
font:
|
|
family: $fuenteTitulos, sans-serif
|
|
size: x-large
|
|
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
|
|
&:hover
|
|
background-color: #3d3d7c
|
|
|
|
#carrito--boton--seguircomprando
|
|
margin: 10px 0
|
|
padding: 10px 20px
|
|
background-color: green
|
|
color: white
|
|
text-decoration: none
|
|
border-radius: 4px
|
|
&:visited
|
|
color: white
|
|
|
|
#carrito--tituloprincipal
|
|
text-align: center
|
|
font:
|
|
size: xx-large
|
|
family: $fuenteTitulos, sans-serif
|
|
weight: 900
|
|
margin: 10px 0
|
|
|
|
|