mirror of https://github.com/keeweb/keeweb.git
89 lines
3.2 KiB
SCSS
89 lines
3.2 KiB
SCSS
.tip {
|
|
position: absolute;
|
|
padding: $base-padding;
|
|
border-radius: $base-border-radius;
|
|
white-space: nowrap;
|
|
z-index: $z-index-no-modal;
|
|
pointer-events: none;
|
|
@include nomobile { animation: tip $tip-transition-in; }
|
|
@include common-dropdown;
|
|
&.tip--fast, &.tip--fast:before, &.tip--fast:after {
|
|
animation-duration: $base-duration;
|
|
}
|
|
&--hide.tip, &--hide.tip:before, &--hide.tip:after {
|
|
transition: all $tip-transition-out;
|
|
transition-property: color, border-color, background-color, box-shadow;
|
|
color: transparent;
|
|
background-color: transparent;
|
|
border-color: transparent !important;
|
|
box-shadow: none;
|
|
}
|
|
&:before, &:after {
|
|
@include nomobile { animation: tip $tip-transition-in; }
|
|
content: " ";
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
$arrow-size-small: 10px 8px;
|
|
$arrow-size-large: 12px 9px;
|
|
$arrow-offset-small: 10px;
|
|
$arrow-offset-large: 11px;
|
|
|
|
&.tip--bottom:after {
|
|
@include position(absolute, - nth($arrow-size-small, 2) null null 50%);
|
|
@include transform(translate(-50%, 0));
|
|
@include th { @include triangle($arrow-size-small, background-color(), up); }
|
|
}
|
|
&.tip--top:after {
|
|
@include position(absolute, 100% null null 50%);
|
|
@include transform(translate(-50%, 0));
|
|
@include th { @include triangle($arrow-size-small, background-color(), down); }
|
|
}
|
|
&.tip--top-left:after {
|
|
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
|
|
@include transform(translate(-50%, 0));
|
|
@include th { @include triangle($arrow-size-small, background-color(), down); }
|
|
}
|
|
&.tip--left:after {
|
|
@include position(absolute, 50% null null 100%);
|
|
@include transform(translate(0, -50%));
|
|
@include th { @include triangle($arrow-size-small, background-color(), right); }
|
|
}
|
|
&.tip--right:after {
|
|
@include position(absolute, 50% null null (- nth($arrow-size-small, 2)));
|
|
@include transform(translate(0, -50%));
|
|
@include th { @include triangle($arrow-size-small, background-color(), left); }
|
|
}
|
|
|
|
&.tip--bottom:before {
|
|
@include position(absolute, - nth($arrow-size-large, 2) null null 50%);
|
|
@include transform(translate(-50%, 0));
|
|
@include th { @include triangle($arrow-size-large, light-border-color(), up); }
|
|
}
|
|
&.tip--top:before {
|
|
@include position(absolute, 100% null null 50%);
|
|
@include transform(translate(-50%, 0));
|
|
@include th { @include triangle($arrow-size-large, light-border-color(), down); }
|
|
}
|
|
&.tip--top-left:before {
|
|
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
|
|
@include transform(translate(-50%, 0));
|
|
@include th { @include triangle($arrow-size-large, light-border-color(), down); }
|
|
}
|
|
&.tip--left:before {
|
|
@include position(absolute, 50% null null 100%);
|
|
@include transform(translate(0, -50%));
|
|
@include th { @include triangle($arrow-size-large, light-border-color(), right); }
|
|
}
|
|
&.tip--right:before {
|
|
@include position(absolute, 50% null null (- nth($arrow-size-large, 2)));
|
|
@include transform(translate(0, -50%));
|
|
@include th { @include triangle($arrow-size-large, light-border-color(), left); }
|
|
}
|
|
}
|
|
|
|
@keyframes tip {
|
|
from { color: transparent; background-color: transparent; border-color: transparent; box-shadow: none; }
|
|
}
|