sass
Scss nützliche Mixins
Suche…
Reine CSS3-Zeigerpfeile mit Umrandung
!!! Behälter sollte relativ oder absolut positioniert sein
$ direction - oben, unten, links, rechts
$ margin - Rand am Rand in $ Richtung . Für die obere und untere Richtung - von links nach rechts. Für links und rechts - von oben nach unten.
$ colors - erstens ist eine Randfarbe, zweitens - ist eine Hintergrundfarbe (vielleicht ist es besser, die Hintergrundfarbe von einem übergeordneten Element zu erben)
$ arrowSide - ist die relative Größe eines Pfeils
$ isInset - Der Pfeil ist innerhalb (wahr) oder außerhalb des Containers
Hier ist ein funktionierender Plunker https://plnkr.co/edit/PRF9eLwmOg8OcUoGb22Y?p=preview
%pointer-core {
content: " ";
position: absolute;
border: solid transparent;
z-index: 9999;
}
@mixin pointer($direction, $margin: 10px, $colors: (#999, $gray), $arrowSide: 8px, $isInset: false){
$opposites: (
top: bottom,
bottom: top,
left: right,
right: left
);
$margin-direction: (
top: left,
bottom: left,
left: top,
right: top
);
&:before {
@extend %pointer-core;
border-width: $arrowSide;
@if $isInset {
border-#{$direction}-color: nth($colors, 1);
#{$direction}: -1px;
}
@else
{
border-#{map-get($opposites, $direction)}-color: nth($colors, 1);
#{map-get($opposites, $direction)}: 100%;
}
#{map-get($margin-direction, $direction)}: 0;
margin-#{map-get($margin-direction, $direction)}: $margin - 1;
}
&:after {
@extend %pointer-core;
border-width: $arrowSide - 1;
@if $isInset {
border-#{$direction}-color: nth($colors, 2);
#{$direction}: -1px;
}
@else
{
border-#{map-get($opposites, $direction)}-color: nth($colors, 2);
#{map-get($opposites, $direction)}: 100%;
}
#{map-get($margin-direction, $direction)}: 0;
margin-#{map-get($margin-direction, $direction)}: $margin;
}
}
Beispiel für einen QuickInfo-Zeiger
$color-purple-bg: #AF6EC4;
$color-purple-border: #5D0C66;
$color-yellow-bg: #E8CB48;
$color-yellow-border: #757526;
.tooltip {
position: relative;
&--arrow-down {
@include pointer('bottom', 30px, ($color-purple-border, $color-purple-bg), 15px);
}
&--arrow-right {
@include pointer('right', 60px, ($color-yellow-border, $color-yellow-bg), 15px);
}
}
Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow