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 class="onboarding-tooltip" [ngClass]="position"> |
|||
<div class="arrow1"></div> |
|||
<div class="arrow2"></div> |
|||
|
|||
<div class="content">{{text}}</div> |
|||
<div *sqxModalView="tooltipModal;onRoot:true" closeAlways="true" @fade> |
|||
|
|||
<a (click)="hideThis()" class="hide-this btn-link btn-default btn-sm"> |
|||
<i class="icon-close"></i> |
|||
</a> |
|||
<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> |
|||
|
|||
<button (click)="hideAll()" class="hide-all btn-link btn-primary btn-sm"> |
|||
Hide all Tooltips |
|||
</button> |
|||
<div class="onboarding-buttons clearfix"> |
|||
<button (click)="hideAll()" class="btn btn-link btn-primary btn-sm float-left"> |
|||
Stop Tour |
|||
</button> |
|||
|
|||
<button (click)="hideThis()" class="btn btn-link btn-success btn-sm float-right"> |
|||
Got It |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,46 +1,28 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
$color: $color-theme-blue; |
|||
$color: #1a2129; |
|||
|
|||
$size-arrow: 10px; |
|||
|
|||
// sass-lint:disable class-name-format |
|||
|
|||
.onboarding-tooltip { |
|||
& { |
|||
@include box-shadow(0, 2px, 20px, .3); |
|||
.onboarding { |
|||
&-help { |
|||
@include border-radius; |
|||
background: $color; |
|||
border: 0; |
|||
max-width: 20rem; |
|||
background: $color-dark-foreground; |
|||
border: 1px solid $color; |
|||
position: relative; |
|||
} |
|||
|
|||
.content { |
|||
padding: 1.6rem 1.6rem 2.5rem; |
|||
padding: .75rem; |
|||
} |
|||
|
|||
.hide-this { |
|||
@include absolute(.1rem, .1rem, auto, auto); |
|||
&-text { |
|||
font-size: .9rem; |
|||
font-weight: normal; |
|||
color: $color-dark-foreground; |
|||
} |
|||
|
|||
.hide-all { |
|||
@include absolute(auto, .1rem, .1rem, auto); |
|||
&-buttons { |
|||
margin: .8rem -.5rem 0; |
|||
} |
|||
|
|||
&.topRight { |
|||
& { |
|||
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); |
|||
} |
|||
&-rect { |
|||
@include box-shadow-raw(0 0 0 9999px rgba(0, 0, 0, .5)); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue