diff options
Diffstat (limited to 'web/sass-files/sass/partials/_tutorial.scss')
-rw-r--r-- | web/sass-files/sass/partials/_tutorial.scss | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss index fa93e46bf..42183d599 100644 --- a/web/sass-files/sass/partials/_tutorial.scss +++ b/web/sass-files/sass/partials/_tutorial.scss @@ -16,38 +16,93 @@ @include border-radius(3px); padding: 20px; z-index: 1000; + + .arrow { + border-width: 10px; + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + &.tip-overlay--sidebar { + max-width: 75%; + margin: 50px 0 0 10px; + .arrow { + top: 80px; + left: -10px; + margin-top: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--header { + margin: 10px 0 0 10px; + .arrow { + top: 15px; + left: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--chat { + margin-top: -10px; + .arrow { + left: 50%; + margin-left: -10px; + border-bottom-width: 0; + border-top-color: #fff; + bottom: -10px; + } + } + h4 { font-size: em(16px); font-weight: 600; margin: 5px 0 15px; } + p { font-size: 13px; line-height: 1.6; + strong { font-weight: 600; } + } + .btn { background: #cccccc; color: #fff; @include border-radius(3px); border: none; margin-bottom: 10px; + &:hover, &:active, &:focus { color: #fff; border: none; background: #bbb; } + } + .tip-opt { font-size: 12px; + span { @include opacity(0.5); } + } + .tutorial__circles { margin: 1.5em 0px -1.7em -4px; + .circle { width: 7px; height: 7px; @@ -56,8 +111,11 @@ background: #000; @include opacity(0.4); } + } + } + } .tip-button { @@ -72,6 +130,16 @@ position:absolute; top:0px; right:0px; + + &.tip-overlay--header { + top: 20px; + } + + &.tip-overlay--sidebar { + left: 0; + top: -9px; + } + } .tutorial-steps__container { |