65 lines
1.4 KiB
SCSS
65 lines
1.4 KiB
SCSS
|
// ==========================================================================
|
||
|
|
// Arrows
|
||
|
|
//
|
||
|
|
// Use this to generate most of the code for your CSS arrows.
|
||
|
|
//
|
||
|
|
//
|
||
|
|
// EXAMPLE
|
||
|
|
//
|
||
|
|
// .tooltip {
|
||
|
|
// &:before {
|
||
|
|
// @include arrow--up(7px, #333);
|
||
|
|
// left: 50%;
|
||
|
|
// margin-left: -7px;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
//
|
||
|
|
// ==========================================================================
|
||
|
|
|
||
|
|
@mixin arrow--base(){
|
||
|
|
position: absolute;
|
||
|
|
content: '';
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin arrow--top($size: 10px, $color: #ccc){
|
||
|
|
@include arrow--base;
|
||
|
|
bottom: 100%;
|
||
|
|
border-left: $size solid transparent;
|
||
|
|
border-right: $size solid transparent;
|
||
|
|
border-bottom: $size solid $color;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin arrow--up($size: 10px, $color: #ccc){
|
||
|
|
@include arrow--top($size, $color);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin arrow--right($size: 10px, $color: #ccc){
|
||
|
|
@include arrow--base;
|
||
|
|
left: 100%;
|
||
|
|
border-top: $size solid transparent;
|
||
|
|
border-bottom: $size solid transparent;
|
||
|
|
border-left: $size solid $color;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin arrow--bottom($size: 10px, $color: #ccc){
|
||
|
|
@include arrow--base;
|
||
|
|
top: 100%;
|
||
|
|
border-left: $size solid transparent;
|
||
|
|
border-right: $size solid transparent;
|
||
|
|
border-top: $size solid $color;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin arrow--down($size: 10px, $color: #ccc){
|
||
|
|
@include arrow--bottom($size, $color);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin arrow--left($size: 10px, $color: #ccc){
|
||
|
|
@include arrow--base;
|
||
|
|
right: 100%;
|
||
|
|
border-top: $size solid transparent;
|
||
|
|
border-bottom: $size solid transparent;
|
||
|
|
border-right:$size solid $color;
|
||
|
|
}
|