Created
June 27, 2018 22:42
-
-
Save codigoconjuan/b7dd14a631decb81eddc4bc2eba59d30 to your computer and use it in GitHub Desktop.
Gist Proyecto Cotizador React
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://necolas.github.io/normalize.css/8.0.0/normalize.css"); | |
| @import url("https://fonts.googleapis.com/css?family=Slabo+27px"); | |
| html { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #e96443; /* fallback for old browsers */ | |
| background: -webkit-linear-gradient(to right, #904e95, #e96443); /* Chrome 10-25, Safari 5.1-6 */ | |
| background: linear-gradient(to right, #904e95, #e96443); | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| .contenedor { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .boton { | |
| background-color: #00838F!important; | |
| font-size: 16px; | |
| width: 100%; | |
| padding: 15px; | |
| color: white; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| } | |
| .boton:hover { | |
| cursor: pointer; | |
| } | |
| header { | |
| background-color:#26C6DA; | |
| padding: 10px; | |
| font-weight: bold; | |
| color: white; | |
| } | |
| header h1 { | |
| font-size: 2rem; | |
| margin:0; | |
| font-family: 'Slabo 27px', serif; | |
| text-align: center; | |
| } | |
| .contenedor-formulario { | |
| background-color: white; | |
| padding: 3rem; | |
| } | |
| .campo { | |
| display: flex; | |
| margin-bottom: 1rem; | |
| align-items: center; | |
| } | |
| .campo label { | |
| flex: 0 0 200px; | |
| } | |
| .campo input[type="radio"] { | |
| margin: 1rem; | |
| } | |
| .error { | |
| background-color: #FBE9E7; | |
| border: 1px solid #F4511E; | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| color: #F4511E; | |
| } | |
| .correcto { | |
| background-color: rgb(211, 249, 187); | |
| border: 1px solid rgb(50, 167, 0); | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| color: rgb(4, 150, 50); | |
| } | |
| .error p { | |
| margin:0; | |
| } | |
| .contenido { | |
| margin-top: 60px; | |
| background-color: white; | |
| -webkit-box-shadow: 0px 21px 46px -15px rgba(0,0,0,1); | |
| -moz-box-shadow: 0px 21px 46px -15px rgba(0,0,0,1); | |
| box-shadow: 0px 21px 46px -15px rgba(0,0,0,1); | |
| } | |
| .resultado { | |
| margin-bottom: 40px; | |
| } | |
| .resultado div { | |
| border: 1px solid #26C6DA; | |
| text-align: center; | |
| padding: 0 0 20px 0; | |
| } | |
| .resultado div p { | |
| margin-bottom: 0; | |
| } | |
| .resultado div p.header { | |
| background-color: #26C6DA; | |
| margin-bottom: 10px; | |
| color:white; | |
| padding: 10px; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| } | |
| span.resultado { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .resultado-enter { | |
| transition: .5s; | |
| transform: translateY(120%) ; | |
| } | |
| .resultado-enter.resultado-enter-active{ | |
| transform: translateY(120%); | |
| } | |
| .resultado-exit{ | |
| transform: translateY(0); | |
| transition:.5s; | |
| position : absolute; | |
| left: 0; | |
| bottom : 0; | |
| width: 100%; | |
| } | |
| .resultado-exit-active{ | |
| opacity: 0; | |
| transform: translateY(-100%); | |
| } | |
| .gran-total { | |
| text-align: center; | |
| padding: .5rem; | |
| border: 1px solid #26C6DA; | |
| background-color: rgb(127, 224, 237); | |
| margin-top: 1rem; | |
| } | |
| .gran-total p { | |
| } | |
| .resumen { | |
| padding: 1rem; | |
| text-align: center; | |
| background-color: #00838F; | |
| color: white; | |
| margin-top: 1rem; | |
| } | |
| .resumen li { | |
| list-style: none; | |
| } | |
| .resumen h2 { | |
| margin:0 0 1rem 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Saludos Prof.
estaba terminando su curso de React y al finalizar el cotizador de autos , no me realiza la animación al momento de hacer el cambio ... quisiera saber si el css esta completo o le falta alguna parte ? , no se si el componente TransitionsGroup esta obsoleto para estas fechas y por ello no me realiza la animacion