This repository has been archived on 2022-08-01. You can view files and clone it, but cannot push or open issues or pull requests.
Oldphaloskepsis/plugins/jetpack/scss/_utilities/mixins/_arrows.scss

65 lines
1.4 KiB
SCSS
Raw Normal View History

2017-01-12 23:10:07 +00:00
// ==========================================================================
// 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;
}