3 ms·
I've also just converted to LessCSS mixin. Free for your use. (I added a 6th argument so that you can change the class name that gets generated). Clickable: ht
by chrisacky 14y ago
I've also just converted to LessCSS mixin. Free for your use. (I added a 6th argument so that you can change the class name that gets generated).
Clickable: https://gist.github.com/2644661 https://gist.github.com/2644661
.arrowgasm(@position: top, @size : "4px", @background-color : #88b7d5,
@border-width: "2px", @border-color : #c2e1f5, @arrowClass : "arrow_box"){
(~".@{arrowClass}") {
position: relative;
background: @background-color;
border: @size solid @border-color;
}
(~".@{arrowClass}:after"), (~".@{arrowClass}:before") {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
(~".@{arrowClass}:after") {
.b(@position, @background-color);
border-width: @size;
left: 50%;
margin-left: @size * -1;
}
(~".@{arrowClass}:before") {
.b(@position, @border-color);
border-width: @size + @border-width ;
left: 50%;
margin-left: ( @size + @border-width ) * -1;
}
.b(top, @border-color) { border-bottom-color: @border-color; }
.b(right, @border-color) { border-left-color: @border-color; }
.b(bottom, @border-color){ border-top-color: @border-color; }
.b(left, @border-color) { border-right-color: @border-color; }
}
- scizo 14y agoYou might also want to consider explicitly setting the box-sizing to content-box. I know that is the default, but if someone attempted to use this and had already adjusted the box-sizing to something else it would not work.
- esrauch 14y agoThere are dozens of rules someone could already have on the page that would break it, why make a special case for box-sizing?
- Skalman 14y agoBecause it's not unheard of to set * { box-sizing: border-box; }. In the same way, you shouldn't assume margin, padding or font-size to be anything in particular.