Skip to content

Instantly share code, notes, and snippets.

@camilokawerin
Created November 10, 2017 14:13
Show Gist options
  • Save camilokawerin/8faab784647d65dc8d35b30802260197 to your computer and use it in GitHub Desktop.
Save camilokawerin/8faab784647d65dc8d35b30802260197 to your computer and use it in GitHub Desktop.
Some useful mixins for shapes and position
// shapes
.triangle() {
content: "";
display: inline-block;
border-style: solid;
border-color: transparent;
width: 0;
height: 0;
}
.triangle-bottom(@height; @color; @ratio: 1) {
.triangle();
border-top-color: @color;
border-width: @height (@height / @ratio);
}
.triangle-left(@height; @color; @ratio: 1) {
.triangle();
border-right-color: @color;
border-width: (@height / @ratio) @height;
}
.triangle-top(@height; @color; @ratio: 1) {
.triangle-bottom(@height; @color; @ratio);
border-top-color: transparent;
border-bottom-color: @color;
}
.triangle-right(@height; @color; @ratio: 1) {
.triangle-left(@height; @color; @ratio);
border-right-color: transparent;
border-left-color: @color;
}
.circle(@diameter) {
content: "";
display: inline-block;
width: @diameter;
height: @diameter;
border-radius: 50%;
}
// position
.center-center() {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center-top() {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.center-bottom() {
.center-top();
top: auto;
bottom: 0;
}
.left-center() {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.right-center() {
.left-center();
left: auto;
right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment