72 lines
1.0 KiB
SCSS
72 lines
1.0 KiB
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-fill() {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@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 {
|
|
@include t-translate(-50%, -50%);
|
|
}
|
|
}
|