mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
35 changed files with 377 additions and 272 deletions
@ -1,16 +1,19 @@ |
|||||
<div *sqxModalView="tooltipModal;onRoot:true" closeAlways="true" [sqxModalTarget]="for" [position]="position" [offset]="4" [auto]="false"> |
<div *sqxModalView="tooltipModal;onRoot:true" closeAlways="true" @fade> |
||||
<div class="onboarding-tooltip" [ngClass]="position"> |
|
||||
<div class="arrow1"></div> |
|
||||
<div class="arrow2"></div> |
|
||||
|
|
||||
<div class="content">{{text}}</div> |
<div class="onboarding-rect" [sqxModalTarget]="for" [offset]="4" [autoPosition]="false" position="full"></div> |
||||
|
<div class="onboarding-help" [sqxModalTarget]="for" [offset]="4" [autoPosition]="false" [position]="position"> |
||||
|
<div class="onboarding-text"> |
||||
|
<ng-content></ng-content> |
||||
|
</div> |
||||
|
|
||||
<a (click)="hideThis()" class="hide-this btn-link btn-default btn-sm"> |
<div class="onboarding-buttons clearfix"> |
||||
<i class="icon-close"></i> |
<button (click)="hideAll()" class="btn btn-link btn-primary btn-sm float-left"> |
||||
</a> |
Stop Tour |
||||
|
</button> |
||||
|
|
||||
<button (click)="hideAll()" class="hide-all btn-link btn-primary btn-sm"> |
<button (click)="hideThis()" class="btn btn-link btn-success btn-sm float-right"> |
||||
Hide all Tooltips |
Got It |
||||
</button> |
</button> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
@ -1,46 +1,28 @@ |
|||||
@import '_mixins'; |
@import '_mixins'; |
||||
@import '_vars'; |
@import '_vars'; |
||||
|
|
||||
$color: $color-theme-blue; |
$color: #1a2129; |
||||
|
|
||||
$size-arrow: 10px; |
.onboarding { |
||||
|
&-help { |
||||
// sass-lint:disable class-name-format |
@include border-radius; |
||||
|
background: $color; |
||||
.onboarding-tooltip { |
border: 0; |
||||
& { |
|
||||
@include box-shadow(0, 2px, 20px, .3); |
|
||||
max-width: 20rem; |
max-width: 20rem; |
||||
background: $color-dark-foreground; |
padding: .75rem; |
||||
border: 1px solid $color; |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
padding: 1.6rem 1.6rem 2.5rem; |
|
||||
} |
} |
||||
|
|
||||
.hide-this { |
&-text { |
||||
@include absolute(.1rem, .1rem, auto, auto); |
font-size: .9rem; |
||||
|
font-weight: normal; |
||||
|
color: $color-dark-foreground; |
||||
} |
} |
||||
|
|
||||
.hide-all { |
&-buttons { |
||||
@include absolute(auto, .1rem, .1rem, auto); |
margin: .8rem -.5rem 0; |
||||
} |
} |
||||
|
|
||||
&.topRight { |
&-rect { |
||||
& { |
@include box-shadow-raw(0 0 0 9999px rgba(0, 0, 0, .5)); |
||||
margin-right: -$size-arrow - 1; |
|
||||
} |
|
||||
|
|
||||
.arrow1 { |
|
||||
@include caret-top($color, $size-arrow); |
|
||||
@include absolute(-$size-arrow * 2, $size-arrow * .5, auto, auto); |
|
||||
} |
|
||||
|
|
||||
.arrow2 { |
|
||||
@include caret-top($color-dark-foreground, $size-arrow); |
|
||||
@include absolute(-$size-arrow * 2 + 1, $size-arrow * .5, auto, auto); |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
Loading…
Reference in new issue