domsPlace/public/styles/tools/_absolute-centering.scss

64 lines
959 B
SCSS

/*
* Absolute Centering
* Provides tools to absolutely center elements in various center stlyes.
*
* Dependencies:
* styles/tools/_transform.scss
*
* Version:
* 1.0.0 - 2018/05/11
*
*/
@mixin t-absolute-center-x-y() {
position: absolute;
left: 50%;
top: 50%;
@include t-translate(-50%, -50%);
}
@mixin t-absolute-center-x() {
position: absolute;
left: 50%;
@include t-translate-x(-50%);
}
@mixin t-absolute-center-y() {
position: absolute;
top: 50%;
@include t-translate-y(-50%);
}
@mixin t-absolute-position-options($inset: 0) {
position: absolute;
&.is-top {
top: $inset;
}
&.is-bottom {
bottom: $inset;
}
&.is-left {
left: $inset;
}
&.is-right {
right: $inset;
}
&.is-middle {
top: 50%;
@include t-translate-y(-50%);
}
&.is-center {
left: 50%;
@include t-translate-x(-50%);
}
&.is-middle.is-center {
@cinlude t-translate(-50%, -50%);
}
}