/*————————————
Position Spaces
————————————*/ /* Top */ .g-top-auto { /* P */
top: auto; &--parent-hover { .g-parent:hover & { top: auto; } }
}
.g-top-0 {
@include px-to-rem(top, 0); &--hover:hover { @include px-to-rem(top, 0); } &--parent-hover { .g-parent:hover & { @include px-to-rem(top, 0); } }
}
.g-top-1 {
@include px-to-rem(top, 1px);
}
.g-top-2 {
@include px-to-rem(top, 2px);
}
.g-top-3 {
@include px-to-rem(top, 3px);
}
.g-top-5 {
@include px-to-rem(top, 5px);
}
.g-top-10 {
@include px-to-rem(top, 10px);
}
.g-top-15 {
@include px-to-rem(top, 15px);
}
.g-top-20 {
@include px-to-rem(top, 20px);
}
.g-top-30 {
@include px-to-rem(top, 30px);
}
.g-top-35 {
@include px-to-rem(top, 35px);
}
.g-top-55 {
@include px-to-rem(top, 55px);
}
.g-top-100 {
@include px-to-rem(top, 100px);
}
.g-top-15x {
top: 15%;
}
.g-top-20x {
top: 20%;
}
.g-top-25x {
top: 25%;
}
.g-top-30x {
top: 30%;
}
.g-top-35x {
top: 35%;
}
.g-top-50x {
top: 50%;
}
.g-top-100x {
top: 100%;
}
/* Top Minis */ .g-top-minus-1 {
@include px-to-rem(top, -1px);
}
.g-top-minus-2 {
@include px-to-rem(top, -2px);
}
.g-top-minus-3 {
@include px-to-rem(top, -3px);
}
.g-top-minus-4 {
@include px-to-rem(top, -4px);
}
.g-top-minus-5 {
@include px-to-rem(top, -5px);
}
.g-top-minus-6 {
@include px-to-rem(top, -6px);
}
.g-top-minus-8 {
@include px-to-rem(top, -8px);
}
.g-top-minus-10 {
@include px-to-rem(top, -10px);
}
.g-top-minus-15 {
@include px-to-rem(top, -15px);
}
.g-top-minus-20 {
@include px-to-rem(top, -20px);
}
.g-top-minus-30 {
@include px-to-rem(top, -30px);
}
.g-top-minus-35 {
@include px-to-rem(top, -35px);
}
.g-top-minus-40 {
@include px-to-rem(top, -40px);
}
.g-top-minus-70 {
@include px-to-rem(top, -70px);
}
.g-top-minus-120 {
@include px-to-rem(top, -120px);
}
.g-top-minus-25x {
top: -25%;
}
/* Left */ .g-left-auto { /* P */
left: auto;
}
.g-left-0 {
@include px-to-rem(left, 0); &--hover:hover { @include px-to-rem(left, 0); } &--parent-hover { .g-parent:hover & { @include px-to-rem(left, 0); } }
}
.g-left-2 {
@include px-to-rem(left, 2px);
}
.g-left-5 {
@include px-to-rem(left, 5px);
}
.g-left-10 {
@include px-to-rem(left, 10px);
}
.g-left-15 {
@include px-to-rem(left, 15px !important);
}
.g-left-20 {
@include px-to-rem(left, 20px);
}
.g-left-30 {
@include px-to-rem(left, 30px);
}
.g-left-40 {
@include px-to-rem(left, 40px); /* O */
}
.g-left-45 {
@include px-to-rem(left, 45px); /* P */
}
.g-left-75 {
@include px-to-rem(left, 75px);
}
.g-left-110 {
@include px-to-rem(left, 110px);
}
.g-left-130 {
@include px-to-rem(left, 130px);
}
.g-left-200 {
@include px-to-rem(left, 200px);
}
.g-left-15x {
left: 15%;
}
.g-left-35x {
left: 35%;
}
.g-left-50x {
left: 50%;
}
.g-left-100x {
left: 100%;
}
/* Left Minus */ .g-left-minus-3 {
@include px-to-rem(left, -3px);
}
.g-left-minus-6 {
@include px-to-rem(left, -6px);
}
.g-left-minus-7 {
@include px-to-rem(left, -7px);
}
.g-left-minus-10 {
@include px-to-rem(left, -10px);
}
.g-left-minus-15 {
@include px-to-rem(left, -15px);
}
.g-left-minus-20 {
@include px-to-rem(left, -20px);
}
.g-left-minus-25 {
@include px-to-rem(left, -25px);
}
.g-left-minus-30 {
@include px-to-rem(left, -30px);
}
.g-left-minus-50 {
@include px-to-rem(left, -50px); &--parent-hover { .g-parent:hover & { @include px-to-rem(left, -50px); } }
}
/* Right */ .g-right-auto { /* P */
right: auto;
}
.g-right-0 {
@include px-to-rem(right, 0); &--hover:hover { @include px-to-rem(right, 0); } &--parent-hover { .g-parent:hover & { @include px-to-rem(right, 0); } }
}
.g-right-5 {
@include px-to-rem(right, 5px);
}
.g-right-10 {
@include px-to-rem(right, 10px);
}
.g-right-15 {
@include px-to-rem(right, 15px !important);
}
.g-right-20 {
@include px-to-rem(right, 20px);
}
.g-right-30 {
@include px-to-rem(right, 30px);
}
.g-right-40 {
@include px-to-rem(right, 40px);
}
.g-right-45 {
@include px-to-rem(right, 45px); /* P */
}
.g-right-55 {
@include px-to-rem(right, 55px); /* O */
}
.g-right-100 {
@include px-to-rem(right, 100px);
}
.g-right-110 {
@include px-to-rem(right, 110px);
}
.g-right-130 {
@include px-to-rem(right, 130px);
}
.g-right-15x {
right: 15%;
}
.g-right-35x {
right: 35%;
}
.g-right-50x {
right: 50%;
}
.g-right-100x {
right: 100%;
}
/* Right Minus */ .g-right-minus-3 {
@include px-to-rem(right, -3px);
}
.g-right-minus-6 {
@include px-to-rem(right, -6px);
}
.g-right-minus-5 {
@include px-to-rem(right, -5px);
}
.g-right-minus-10 {
@include px-to-rem(right, -10px);
}
.g-right-minus-13 {
@include px-to-rem(right, -13px);
}
.g-right-minus-15 {
@include px-to-rem(right, -15px);
}
.g-right-minus-20 {
@include px-to-rem(right, -20px);
}
.g-right-minus-25 {
@include px-to-rem(right, -25px);
}
.g-right-minus-50 {
@include px-to-rem(right, -50px);
}
/* Bottom */ .g-bottom-auto { /* P */
bottom: auto;
}
.g-bottom-0 {
@include px-to-rem(bottom, 0); &--hover:hover { @include px-to-rem(bottom, 0); } &--parent-hover { .g-parent:hover & { @include px-to-rem(bottom, 0); } }
}
.g-bottom-6 {
@include px-to-rem(bottom, 6px);
}
.g-bottom-10 {
@include px-to-rem(bottom, 10px);
}
.g-bottom-20 {
@include px-to-rem(bottom, 20px);
}
.g-bottom-30 {
@include px-to-rem(bottom, 30px);
}
.g-bottom-40 {
@include px-to-rem(bottom, 40px);
}
.g-bottom-50 {
@include px-to-rem(bottom, 50px); &--parent-hover { .g-parent:hover & { @include px-to-rem(bottom, 50px); } }
}
.g-bottom-60 {
@include px-to-rem(bottom, 60px);
}
.g-bottom-80 {
@include px-to-rem(bottom, 80px);
}
.g-bottom-minus-20 {
@include px-to-rem(bottom, -20px);
}
.g-bottom-minus-30 {
@include px-to-rem(bottom, -30px);
}
.g-bottom-minus-35x {
bottom: -35%;
}
.g-bottom-minus-70 {
@include px-to-rem(bottom, -70px);
}
.g-bottom-15x {
bottom: 15%;
}
.g-bottom-minus-25x {
bottom: -25%;
}
.g-bottom-100x {
bottom: 100%;
}
/* Z */ @media (min-width: $g-sm) {
.g-left-auto--sm { left: auto; } .g-left-minus-20--sm { left: -20px; } .g-right-minus-20--sm { right: -20px; }
}
/* O */ @media (min-width: $g-md) {
.g-right-0--md { right: 0; } .g-right-minus-15--md { @include px-to-rem(right, -15px); } .g-left-minus-15--md { @include px-to-rem(left, -15px); } .g-top-minus-20--md { @include px-to-rem(top, -20px); } .g-right-minus-25--md { @include px-to-rem(right, -25px); } .g-bottom-minus-50--md { @include px-to-rem(bottom, -50px); } .g-left-auto--md { left: auto; } .g-left-minus-25--md { @include px-to-rem(left, -25px); } .g-left-130--md { @include px-to-rem(left, 130px); } .g-left-35x--md { left: 35%; } .g-left-50x--md { left: 50%; } .g-right-130--md { @include px-to-rem(right, 130px); } .g-right-35x--md { right: 35%; } .g-right-50x--md { right: 50%; }
}
@media (min-width: $g-lg) {
.g-top-0--lg { top: 0; } .g-right-0--lg { right: 0; } .g-left-minus-35--lg { @include px-to-rem(left, -35px); } .g-left-40--lg { @include px-to-rem(left, 40px); } .g-right-minus-35--lg { @include px-to-rem(right, -35px); } .g-right-40--lg { @include px-to-rem(right, 40px); }
}