mirror of
https://github.com/documize/community.git
synced 2025-08-04 21:15:24 +02:00
Improve new user share space onboarding process
This commit is contained in:
Harvey Kandola
parent
659eb99c0f
commit
60fbdfda11
8 changed files with 95 additions and 365 deletions
|
|
@ -1,317 +1,27 @@
|
|||
.onboarding-container {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: $color-black-light-1;
|
||||
letter-spacing: 1px;
|
||||
margin: 50px 0;
|
||||
|
||||
.stage-1
|
||||
{
|
||||
display: block;
|
||||
|
||||
.account-name-preview
|
||||
{
|
||||
color: #fff;
|
||||
background: #b9b9b9 !important;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
// margin: 100px 0 0 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.stage-2
|
||||
{
|
||||
display: none;
|
||||
|
||||
.account-name-preview
|
||||
{
|
||||
color: #fff;
|
||||
background: rgba(27,117,187,1);
|
||||
background: -moz-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,117,187,1)), color-stop(100%, rgba(73,155,234,1)));
|
||||
background: -webkit-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -o-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: linear-gradient(to right, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1b75bb", endColorstr="#499bea", GradientType=1 );
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
// margin: 100px 0 0 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.note
|
||||
{
|
||||
font-size: 0.9rem;;
|
||||
font-style: italic;
|
||||
color: map-get($gray-shades, 500);
|
||||
}
|
||||
|
||||
.mismatch
|
||||
{
|
||||
display: none;
|
||||
color: map-get($red-shades, 700);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stage-3
|
||||
{
|
||||
@extend .stage-2;
|
||||
|
||||
img
|
||||
{
|
||||
margin: 100px 0 0 200px;
|
||||
}
|
||||
|
||||
#spinner-1
|
||||
{
|
||||
margin: 140px 0 0 170px;
|
||||
}
|
||||
}
|
||||
|
||||
.stage-4
|
||||
{
|
||||
@extend .stage-3;
|
||||
|
||||
a
|
||||
{
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stage-5
|
||||
{
|
||||
@extend .stage-3;
|
||||
|
||||
#spinner-1
|
||||
{
|
||||
margin: 140px 0 0 170px;
|
||||
}
|
||||
}
|
||||
|
||||
.account-name-preview
|
||||
{
|
||||
color: #fff;
|
||||
height: 55px;
|
||||
width: 100%;
|
||||
font-family: Arial;
|
||||
opacity: 0.8;
|
||||
text-align: left;
|
||||
background: rgba(27,117,187,1);
|
||||
background: -moz-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,117,187,1)), color-stop(100%, rgba(73,155,234,1)));
|
||||
background: -webkit-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -o-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: linear-gradient(to right, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1b75bb", endColorstr="#499bea", GradientType=1 );
|
||||
|
||||
.title
|
||||
{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
margin: 18px 0 0 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.nav-icon
|
||||
{
|
||||
display: inline-block;
|
||||
background-image: url(img/onboard/nav-icons.png);
|
||||
background-repeat: no-repeat;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
vertical-align: top;
|
||||
z-index: 1;
|
||||
background-position: 0 -75px;
|
||||
margin: 15px 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar
|
||||
{
|
||||
.logo
|
||||
{
|
||||
height: 62px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
font-size: 2rem;;
|
||||
color: $color-black-light-2;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
font-size: 1.3rem;
|
||||
color: $color-black-light-2;
|
||||
}
|
||||
|
||||
p.note
|
||||
{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rightbar
|
||||
{
|
||||
@extend .absolute-center;
|
||||
height: 400px;
|
||||
max-width: 500px;
|
||||
background-color: #f6f9fc;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 20px 0 rgba(30,71,101,.1);
|
||||
}
|
||||
|
||||
input[type='email'], input[type='text'], input[type='password'] {
|
||||
// background-color: transparent;
|
||||
p {
|
||||
margin: 1rem 0 5rem 0;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
color: map-get($green-shades, 700);
|
||||
}
|
||||
|
||||
// input[type='submit']
|
||||
// {
|
||||
// padding: 10px 15px;
|
||||
// background: #12A936;
|
||||
// border: 0;
|
||||
// color: map-get($gray-shades, 100);
|
||||
// border-radius: 3px;
|
||||
// font-weight: 500;
|
||||
// font-size: 16px;
|
||||
// -webkit-appearance: none;
|
||||
// vertical-align: bottom;
|
||||
// height: auto;
|
||||
// width: auto;
|
||||
// display: inline-block;
|
||||
// margin: 20px 0 0 0;
|
||||
// letter-spacing: 0.7px;
|
||||
// @include ease-in();
|
||||
// float: right;
|
||||
// @extend .no-outline;
|
||||
// @extend .no-select;
|
||||
//
|
||||
// &:hover
|
||||
// {
|
||||
// background: lighten(#12A936, 4%);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// input[type='email'], input[type='text'], input[type='password']
|
||||
// {
|
||||
// padding: 5px 15px;
|
||||
// background: white;
|
||||
// border: 1px solid #e2e2e2;
|
||||
// @include border-radius(3px);
|
||||
// color: $color-black-light-1;
|
||||
// font-weight: bold;
|
||||
// font-size: 16px;
|
||||
// -webkit-appearance: none;
|
||||
// vertical-align: bottom;
|
||||
// width: 90%;
|
||||
// display: block;
|
||||
// margin: 20px 0 10px 0;
|
||||
// letter-spacing: 1px;
|
||||
// }
|
||||
.stage-1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*********************************************/
|
||||
/* Spinner */
|
||||
/*********************************************/
|
||||
#spinner-1, #spinner-2
|
||||
{
|
||||
.stage-2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sk-spinner-wave.sk-spinner
|
||||
{
|
||||
margin: 0 auto;
|
||||
width: 170px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sk-spinner-wave div
|
||||
{
|
||||
background-color: #12A936;
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
|
||||
animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.sk-spinner-wave .sk-rect2
|
||||
{
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
|
||||
.sk-spinner-wave .sk-rect3
|
||||
{
|
||||
-webkit-animation-delay: -1s;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
.sk-spinner-wave .sk-rect4
|
||||
{
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
|
||||
.sk-spinner-wave .sk-rect5
|
||||
{
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-waveStretchDelay
|
||||
{
|
||||
0%, 40%, 100%
|
||||
{
|
||||
-webkit-transform: scaleY(0.4);
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
|
||||
20%
|
||||
{
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-waveStretchDelay
|
||||
{
|
||||
0%, 40%, 100%
|
||||
{
|
||||
-webkit-transform: scaleY(0.4);
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
|
||||
20%
|
||||
{
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
.stage-3 {
|
||||
display: none;
|
||||
|
||||
p.wait {
|
||||
margin: 5rem 0 0 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: map-get($yellow-shades, 800);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue