/
_objects.stack.scss
30 lines (26 loc) · 1.13 KB
/
_objects.stack.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
///*------------------------------------*\
// #STACK
//\*------------------------------------*/
// The stack object simply layers media and/or text-like content on top
// of each other.
// Predefine the variables below in order to alter and enable specific features.
$plump-stack-namespace: $plump-namespace !default;
// 1. The stack needs positioning context for us to layer.
// 2. Break the layer out of the typical content flow, rendering it as if
// it isn’t there.
// 3. Give the browser a new bounding box for the layer. At this point the
// layer will fill all available space in its `stack` parent.
// For absolutely positioned elements, the top, right, bottom, and left
// properties specify offsets from the edge of the element’s containing
// block (what the element is positioned relative to).
.#{$plump-stack-namespace}o-stack,
%#{$plump-stack-namespace}o-stack {
position: relative; // [1]
&__layer {
position: absolute; // [2]
top: 0; // [3]
right: 0; // [3]
bottom: 0; // [3]
left: 0; // [3]
}
}