mirror of
https://github.com/clearleft/clearless.git
synced 2026-01-10 06:07:56 -05:00
83 lines
3.2 KiB
Plaintext
83 lines
3.2 KiB
Plaintext
.arrow(@pos, @size, @bg-color) {
|
|
width: 0;
|
|
height: 0;
|
|
border: @size solid transparent;
|
|
._abbor_el( @pos, @bg-color );
|
|
}
|
|
|
|
.arrowbox(@pos, @size, @bg-color, @offset:50%) {
|
|
|
|
@after-margin = @size * -1px;
|
|
|
|
position: relative;
|
|
background: @bg-color;
|
|
|
|
&:after,
|
|
&:before {
|
|
._abpos(@pos);
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:after {
|
|
border-color: transparent;
|
|
._abbor_el(@pos, @bg-color);
|
|
border-width: @size;
|
|
._abpos_el(@pos, @size, @offset);
|
|
._abmar_el(@pos, @after-margin);
|
|
}
|
|
|
|
}
|
|
|
|
.arrowbox(@pos, @size, @bg-color, @border-width, @border-color, @offset:50%) {
|
|
|
|
@before-margin = (@size + round(@border-width * 1.41421356)) * -1px;
|
|
|
|
.arrowbox(@pos, @size, @bg-color, @offset);
|
|
|
|
border: @border-width solid @border-color;
|
|
|
|
&:before {
|
|
border-color: transparent;
|
|
._abbor_el(@pos, @border-color);
|
|
border-width: @before-margin * -1;
|
|
._abpos_el(@pos, @size, @offset);
|
|
._abmar_el(@pos, @before-margin);
|
|
}
|
|
|
|
}
|
|
|
|
._abpos( @pos ) when ( @pos = left ) { right: 100%; }
|
|
._abpos( @pos ) when ( @pos = right ) { left: 100%; }
|
|
._abpos( @pos ) when ( @pos = up ) { bottom: 100%; }
|
|
._abpos( @pos ) when ( @pos = down ) { top: 100%; }
|
|
|
|
._abpos_el( @pos, @size, @offset ) when ( @offset = 0 ) and ( @pos = left ) { top: @size; }
|
|
._abpos_el( @pos, @size, @offset ) when ( @offset = 0 ) and ( @pos = right ) { top: @size; }
|
|
._abpos_el( @pos, @size, @offset ) when ( @offset = 0 ) and ( @pos = up ) { left: @size; }
|
|
._abpos_el( @pos, @size, @offset ) when ( @offset = 0 ) and ( @pos = down ) { left: @size; }
|
|
|
|
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and not ( ispixel(@offset) ) and ( @pos = left ) { top: @offset; }
|
|
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and not ( ispixel(@offset) ) and ( @pos = right ) { top: @offset; }
|
|
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and not ( ispixel(@offset) ) and ( @pos = up ) { left: @offset; }
|
|
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and not ( ispixel(@offset) ) and ( @pos = down ) { left: @offset; }
|
|
|
|
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and ( ispixel(@offset) ) and ( @pos = left ) { top: @offset + @size; }
|
|
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and ( ispixel(@offset) ) and ( @pos = right ) { top: @offset + @size; }
|
|
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and ( ispixel(@offset) ) and ( @pos = up ) { left: @offset + @size; }
|
|
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and ( ispixel(@offset) ) and ( @pos = down ) { left: @offset + @size; }
|
|
|
|
._abbor_el( @pos, @color ) when ( @pos = left ) { border-right-color: @color; }
|
|
._abbor_el( @pos, @color ) when ( @pos = right ) { border-left-color: @color; }
|
|
._abbor_el( @pos, @color ) when ( @pos = up ) { border-bottom-color: @color; }
|
|
._abbor_el( @pos, @color ) when ( @pos = down ) { border-top-color: @color; }
|
|
|
|
._abmar_el( @pos, @margin ) when ( @pos = left ) { margin-top: @margin; }
|
|
._abmar_el( @pos, @margin ) when ( @pos = right ) { margin-top: @margin; }
|
|
._abmar_el( @pos, @margin ) when ( @pos = up ) { margin-left: @margin; }
|
|
._abmar_el( @pos, @margin ) when ( @pos = down ) { margin-left: @margin; }
|