138 lines
2.5 KiB
Sass
138 lines
2.5 KiB
Sass
@import "compass"
|
|
.step-in-progress
|
|
animation: none !important
|
|
|
|
.onboarding-action-container
|
|
.quick-start-button
|
|
margin-left: 1em
|
|
|
|
.onboarding
|
|
*
|
|
box-sizing: border-box!important
|
|
&.minimized
|
|
.overlay
|
|
display: none
|
|
.onboarding-steps
|
|
top: -560px
|
|
.overlay
|
|
display: block
|
|
width: 100%
|
|
height: 100%
|
|
z-index: 7000
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
background: rgba(0,0,0,0.5)
|
|
.panel
|
|
position: absolute
|
|
top: -5px
|
|
left: 0
|
|
right: 0
|
|
width: 800px
|
|
height: 540px
|
|
margin: 0 auto
|
|
z-index: 8000
|
|
border: none
|
|
@include box-shadow(0 0 16px black)
|
|
&.final
|
|
height: 350px
|
|
.onboarding-intro
|
|
border-bottom: solid 1px #E4E5E7
|
|
height: 70px
|
|
h3
|
|
font-family: 'Open Sans'
|
|
font-weight: 300
|
|
font-size: 28px
|
|
line-height: 50px
|
|
.steps-list-container
|
|
float: left
|
|
width: 535px
|
|
height: 450px
|
|
padding: 30px 20px 0
|
|
border-right: solid 1px #E4E5E7
|
|
.steps-list
|
|
margin: 0
|
|
padding: 0
|
|
list-style: none
|
|
counter-reset: onboardingSteps
|
|
li
|
|
counter-increment: onboardingSteps
|
|
content: counter(onboardingSteps)
|
|
position: relative
|
|
font-size: 18px
|
|
margin-bottom: 30px
|
|
padding-left: 55px
|
|
.title
|
|
display: block
|
|
.desc
|
|
display: block
|
|
font-size: 13px
|
|
&:before
|
|
display: block
|
|
width: 40px
|
|
height: 40px
|
|
position: absolute
|
|
left: 6px
|
|
top: 0
|
|
border: 1px solid #97A9B0
|
|
content: counter(onboardingSteps)
|
|
text-align: center
|
|
font-size: 22px
|
|
line-height: 38px
|
|
@include border-radius(50%)
|
|
&.checked
|
|
.title
|
|
color: #aaa
|
|
&:before
|
|
display: block
|
|
width: 40px
|
|
height: 40px
|
|
position: absolute
|
|
left: 6px
|
|
top: 0
|
|
border: none
|
|
color: white
|
|
font-family: FontAwesome
|
|
line-height: 40px
|
|
content: '\f00c'
|
|
background-color: #8BC954
|
|
&.active
|
|
.title
|
|
font-size: 24px
|
|
margin-bottom: 8px
|
|
&.inactive
|
|
.title
|
|
color: #ccc
|
|
line-height: 40px
|
|
&:before
|
|
color: #ccc
|
|
border-color: #ccc
|
|
.step-launch
|
|
padding: 0 80px
|
|
margin-top: 50px
|
|
.steps-animation-container
|
|
float: right
|
|
width: 265px
|
|
height: 386px
|
|
border-bottom: solid 1px #E4E5E7
|
|
.step-before-launch
|
|
line-height: 65px
|
|
.final-container
|
|
float: left
|
|
width: 800px
|
|
padding: 30px 20px 0
|
|
.title
|
|
display: block
|
|
|
|
.close-button
|
|
position: absolute
|
|
top: 30px
|
|
right: 20px
|
|
color: #ccc
|
|
i
|
|
font-size: 28px
|
|
.skip
|
|
position: relative
|
|
top : -20px
|
|
left : 10px
|