/*————————————
Block Alignments
————————————*/ /* Absolute (Position, X, Y) */ .g-absolute-centered {
@include block-centered(absolute, true, true); &--x { @include block-centered(absolute, true, false); &--md { @media (min-width: $g-md) { @include block-centered(absolute, true, false); } } } &--y { @include block-centered(absolute, false, true); &--md { @media (min-width: $g-md) { @include block-centered(absolute, false, true); } } }
}
/* O */ .g-transform-origin {
&--top-left { transform-origin: top left; } &--top-right { transform-origin: top right; }
}
.g-absolute-centered {
&--y { &--scl-0_6 { position: absolute; top: 50%; transform: scale(.6) translateY(-50%); } }
}
/* Relative (Position, X, Y) */ .g-relative-centered {
@include block-centered(relative, true, true); &--x { @include block-centered(relative, true, false); } &--y { @include block-centered(relative, false, true); }
}
/* Flex centered */ .g-flex-centered {
display: flex; align-items: center; justify-content: center; &-item { flex: 1; &--top { align-self: flex-start; } &--bottom { align-self: flex-end; } }
}
/* Flex right */ .g-flex-right–xs {
justify-content: flex-end;
}
/* Flex middle */ .g-flex-middle {
display: flex; flex-flow: column nowrap; justify-content: space-between; &-item { margin-top: auto; margin-bottom: auto; &--top { margin-top: 0; margin-bottom: 0; } &--bottom { margin-top: auto; margin-bottom: 0; } &--fixed { flex: none; max-width: 50%; } }
}
@media (min-width: $g-md) {
/* Flex right */ .g-flex-right--md { justify-content: flex-end; } .g-flex-centered--md { display: flex; align-items: center; justify-content: center; } /* O */ .g-absolute-centered { &--y { &--scl-1--md { position: absolute; top: 50%; transform: scale(1) translateY(-50%); } } }
}
/* Z */ @media (min-width: $g-sm) {
.g-absolute-centered--sm { @include block-centered(absolute, true, true); }
}