bukopin-redemption-client-r.../src/common/pages/Transaction/style.scss
2019-01-04 19:52:15 +07:00

83 lines
2.1 KiB
SCSS

.transactionContainer{
margin-top: 6vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.parentContainer{
width: 40vw;
.barContainer{
display: flex;
justify-content: space-between;
align-items: center;
.optionContainer{
display: flex;
width: 20vw;
justify-content: space-around;
align-items: center;
.optionTitle{
//font-weight: 500;
}
.optionSelect{
color: #6772e5;
font-weight: 500;
padding: 5px;
cursor: pointer;
}
.optionSelect:hover{
color: #2b47b2;
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-ms-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-5px);}
60% {-webkit-transform: translateY(-2.5px);}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-5px);}
60% {-moz-transform: translateY(-2.5px);}
}
@-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
40% {-ms-transform: translateY(-5px);}
60% {-ms-transform: translateY(-2.5px);}
}
@-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-5px);}
60% {-o-transform: translateY(-2.5px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-5px);}
60% {transform: translateY(-2.5px);}
}
}
}
.dividerTop{
margin-top: 15px;
}
}
}