Mailspring/internal_packages/onboarding/stylesheets/onboarding.less

168 lines
No EOL
2.8 KiB
Text

@import "ui-variables";
@checkSize: 136px;
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@-webkit-keyframes fill {
0% { opacity: 0; border-width: @checkSize / 2; }
25% { opacity: 1; }
100% { opacity: 1; border-width: 0; }
}
.onboarding-container {
width:100%;
height:100%;
background-color: #f0f0f0;
-webkit-animation: fadein 0.8s;
-webkit-user-select:none;
text-align: center;
iframe, webview {
position: absolute;
width:100%;
height:100%;
left:0;
top:0;
border:0;
}
.logo {
padding-top:40px;
}
h2 {
margin-top: 27px;
margin-bottom: 90px;
}
.prompt {
color:#5D5D5D;
font-size:1.07em;
font-weight:300;
margin-top:20px;
margin-bottom:14px;
}
form {
padding-right:25px;
padding-left:25px;
}
input {
display:block;
padding:10px;
width:100%;
margin-bottom:20px;
background-color: #F5F5F5;
text-align: center;
}
.environment-selector {
position: absolute;
opacity:0.1;
top: 244px;
width:292px;
select {
width:100%;
}
}
.page {
position:absolute;
top:0;
width:100%;
height:100%;
padding-top:15%;
}
.quit {
position: absolute;
top:5px;
left:5px;
}
.back,
.dismiss {
position: absolute;
top:25px;
left:25px;
}
.page-enter {
opacity: 0.01;
transition: all .3s ease-out;
}
.page-enter.page-enter-active {
opacity: 1;
}
.page-leave {
opacity: 1;
transition: all .3s ease-in;
}
.page-leave.page-leave-active {
opacity: 0.01;
}
.check {
width: @checkSize;
height: @checkSize;
background: #e5e5e5;
border-radius:50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px -4px 4px 0px rgba(255, 255, 255, 0.75), inset 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
&:before {
content: "";
position: absolute;
border-radius:50%;
top: 9%;
left: 9%;
right: 9%;
bottom: 9%;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
}
&:after {
content: "";
position: absolute;
border-radius:50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
background-color: #60b247;
border-width: 0;
border-color: #e5e5e5;
border-style: solid;
-webkit-animation: fill 0.5s forwards;
-webkit-animation-delay: 0.8s;
}
.check-icon {
position: absolute;
z-index: 3;
top: 31%;
left: 28%;
width: 45%;
fill: white;
-webkit-animation: bounce 0.4s forwards;
-webkit-animation-delay: 1.9s;
}
}
}