Added basic floating content box.
This commit is contained in:
63
public/styles/tools/_absolute-centering.scss
Normal file
63
public/styles/tools/_absolute-centering.scss
Normal file
@ -0,0 +1,63 @@
|
||||
/*
|
||||
* 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%);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user