154 lines
3.3 KiB
SCSS
154 lines
3.3 KiB
SCSS
|
|
// Converted Variables
|
|
|
|
|
|
// Custom Media Query Variables
|
|
|
|
|
|
/*
|
|
|
|
COORDINATES
|
|
Docs: http://tachyons.io/docs/layout/position/
|
|
|
|
Use in combination with the position module.
|
|
|
|
Base:
|
|
top
|
|
bottom
|
|
right
|
|
left
|
|
|
|
Modifiers:
|
|
-0 = literal value 0
|
|
-1 = literal value 1
|
|
-2 = literal value 2
|
|
--1 = literal value -1
|
|
--2 = literal value -2
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
.top-0 { top: 0; }
|
|
.right-0 { right: 0; }
|
|
.bottom-0 { bottom: 0; }
|
|
.left-0 { left: 0; }
|
|
|
|
.top-1 { top: 1rem; }
|
|
.right-1 { right: 1rem; }
|
|
.bottom-1 { bottom: 1rem; }
|
|
.left-1 { left: 1rem; }
|
|
|
|
.top-2 { top: 2rem; }
|
|
.right-2 { right: 2rem; }
|
|
.bottom-2 { bottom: 2rem; }
|
|
.left-2 { left: 2rem; }
|
|
|
|
.top--1 { top: -1rem; }
|
|
.right--1 { right: -1rem; }
|
|
.bottom--1 { bottom: -1rem; }
|
|
.left--1 { left: -1rem; }
|
|
|
|
.top--2 { top: -2rem; }
|
|
.right--2 { right: -2rem; }
|
|
.bottom--2 { bottom: -2rem; }
|
|
.left--2 { left: -2rem; }
|
|
|
|
|
|
.absolute--fill {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
@media #{$breakpoint-not-small} {
|
|
.top-0-ns { top: 0; }
|
|
.left-0-ns { left: 0; }
|
|
.right-0-ns { right: 0; }
|
|
.bottom-0-ns { bottom: 0; }
|
|
.top-1-ns { top: 1rem; }
|
|
.left-1-ns { left: 1rem; }
|
|
.right-1-ns { right: 1rem; }
|
|
.bottom-1-ns { bottom: 1rem; }
|
|
.top-2-ns { top: 2rem; }
|
|
.left-2-ns { left: 2rem; }
|
|
.right-2-ns { right: 2rem; }
|
|
.bottom-2-ns { bottom: 2rem; }
|
|
.top--1-ns { top: -1rem; }
|
|
.right--1-ns { right: -1rem; }
|
|
.bottom--1-ns { bottom: -1rem; }
|
|
.left--1-ns { left: -1rem; }
|
|
.top--2-ns { top: -2rem; }
|
|
.right--2-ns { right: -2rem; }
|
|
.bottom--2-ns { bottom: -2rem; }
|
|
.left--2-ns { left: -2rem; }
|
|
.absolute--fill-ns {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
@media #{$breakpoint-medium} {
|
|
.top-0-m { top: 0; }
|
|
.left-0-m { left: 0; }
|
|
.right-0-m { right: 0; }
|
|
.bottom-0-m { bottom: 0; }
|
|
.top-1-m { top: 1rem; }
|
|
.left-1-m { left: 1rem; }
|
|
.right-1-m { right: 1rem; }
|
|
.bottom-1-m { bottom: 1rem; }
|
|
.top-2-m { top: 2rem; }
|
|
.left-2-m { left: 2rem; }
|
|
.right-2-m { right: 2rem; }
|
|
.bottom-2-m { bottom: 2rem; }
|
|
.top--1-m { top: -1rem; }
|
|
.right--1-m { right: -1rem; }
|
|
.bottom--1-m { bottom: -1rem; }
|
|
.left--1-m { left: -1rem; }
|
|
.top--2-m { top: -2rem; }
|
|
.right--2-m { right: -2rem; }
|
|
.bottom--2-m { bottom: -2rem; }
|
|
.left--2-m { left: -2rem; }
|
|
.absolute--fill-m {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
@media #{$breakpoint-large} {
|
|
.top-0-l { top: 0; }
|
|
.left-0-l { left: 0; }
|
|
.right-0-l { right: 0; }
|
|
.bottom-0-l { bottom: 0; }
|
|
.top-1-l { top: 1rem; }
|
|
.left-1-l { left: 1rem; }
|
|
.right-1-l { right: 1rem; }
|
|
.bottom-1-l { bottom: 1rem; }
|
|
.top-2-l { top: 2rem; }
|
|
.left-2-l { left: 2rem; }
|
|
.right-2-l { right: 2rem; }
|
|
.bottom-2-l { bottom: 2rem; }
|
|
.top--1-l { top: -1rem; }
|
|
.right--1-l { right: -1rem; }
|
|
.bottom--1-l { bottom: -1rem; }
|
|
.left--1-l { left: -1rem; }
|
|
.top--2-l { top: -2rem; }
|
|
.right--2-l { right: -2rem; }
|
|
.bottom--2-l { bottom: -2rem; }
|
|
.left--2-l { left: -2rem; }
|
|
.absolute--fill-l {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|