Skip to content

Commit d4669a9

Browse files
author
Cory Simmons
committed
Beef up align() mixin
Fixes #44
1 parent 35396c3 commit d4669a9

File tree

2 files changed

+134
-24
lines changed

2 files changed

+134
-24
lines changed

‎scss/lost.scss‎

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Lost Grid v4.0.0 - https://github.com/corysimmons/lost
1+
// Lost Grid v4.0.1 - https://github.com/corysimmons/lost
22

33
$gutter: 30px !default;
44
$rtl: false !default;
@@ -69,11 +69,21 @@ $rtl: false !default;
6969

7070
/// Vertically and/or horizontally align nested elements.
7171
///
72-
/// @param {string} $dir [both] - Direction. Either vertical, v, horizontal, or h. Defaults to both.
72+
/// @param {string} $location [middle-center] - The position the nested element takes relative to the containing element.
73+
///
74+
/// - reset
75+
/// - top-left
76+
/// - top-center or top
77+
/// - top-right
78+
/// - middle-left or left
79+
/// - middle-right or right
80+
/// - bottom-left
81+
/// - bottom-center or bottom
82+
/// - bottom-right
7383
///
7484
/// @example
7585
/// .parent {
76-
/// @include align(vertical);
86+
/// @include align;
7787
/// width: 600px;
7888
/// height: 400px;
7989
/// .child {
@@ -82,25 +92,70 @@ $rtl: false !default;
8292
/// }
8393
/// }
8494

85-
@mixin align($dir: both) {
95+
@mixin align($location: middle-center) {
8696
position: relative;
8797
> * {
8898
position: absolute;
89-
transform-style: preserve-3d;
90-
@if ($dir == 'horizontal') or ($dir == 'h') {
99+
@if ($location == reset) {
100+
top: auto;
101+
right: auto;
102+
bottom: auto;
103+
left: auto;
104+
transform: translate3d(0, 0, 0);
105+
} @else if ($location == top-left) {
106+
top: 0;
107+
right: auto;
108+
bottom: auto;
109+
left: 0;
110+
transform: translate3d(0, 0, 0);
111+
} @else if ($location == top-center) or ($location == top) {
112+
top: 0;
113+
right: auto;
114+
bottom: auto;
91115
left: 50%;
92-
transform: translateX(-50%);
93-
} @else if ($dir == 'vertical') or ($dir == 'v') {
116+
transform: translate3d(-50%, 0, 0);
117+
} @else if ($location == top-right) {
118+
top: 0;
119+
right: 0;
120+
bottom: auto;
121+
left: auto;
122+
transform: translate3d(0, 0, 0);
123+
} @else if ($location == middle-left) or ($location == left) {
124+
top: 50%;
125+
right: auto;
126+
bottom: auto;
127+
left: 0;
128+
transform: translate3d(0, -50%, 0);
129+
} @else if ($location == middle-right) or ($location == right) {
94130
top: 50%;
95-
transform: translateY(-50%);
96-
} @else if ($dir == 'reset') {
131+
right: 0;
132+
bottom: auto;
133+
left: auto;
134+
transform: translate3d(0, -50%, 0);
135+
} @else if ($location == bottom-left) {
136+
top: auto;
137+
right: auto;
138+
bottom: 0;
139+
left: 0;
140+
transform: translate3d(0, 0, 0);
141+
} @else if ($location == bottom-center) or ($location == bottom) {
142+
top: auto;
143+
right: auto;
144+
bottom: 0;
145+
left: 50%;
146+
transform: translate3d(-50%, 0, 0);
147+
} @else if ($location == bottom-right) {
97148
top: auto;
149+
right: 0;
150+
bottom: 0;
98151
left: auto;
99-
transform: translate(0, 0);
152+
transform: translate3d(0, 0, 0);
100153
} @else {
101154
top: 50%;
155+
right: auto;
156+
bottom: auto;
102157
left: 50%;
103-
transform: translate(-50%, -50%);
158+
transform: translate3d(-50%, -50%, 0);
104159
}
105160
}
106161
}

‎stylus/lost.styl‎

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Lost Grid v4.0.0 - https://github.com/corysimmons/lost
1+
// Lost Grid v4.0.1 - https://github.com/corysimmons/lost
22

33
$gutter = 30px
44
$rtl = false
@@ -64,37 +64,92 @@ center($max-size = 980px, $pad = 0, $output = normal)
6464
/**
6565
* Vertically and/or horizontally align nested elements.
6666
*
67-
* @param {string} [$dir=both] - Direction. Either vertical, v, horizontal, or h. Defaults to both.
67+
* @param {string} [$location=middle-center] - The position the nested element takes relative to the containing element.
68+
*
69+
* - reset
70+
* - top-left
71+
* - top-center or top
72+
* - top-right
73+
* - middle-left or left
74+
* - middle-right or right
75+
* - bottom-left
76+
* - bottom-center or bottom
77+
* - bottom-right
6878
*
6979
* @example
7080
* .parent
71-
* align(vertical)
81+
* align()
7282
* width: 600px
7383
* height: 400px
7484
* .child
7585
* width: 300px
7686
* height: 150px
7787
*/
7888

79-
align($dir = both)
89+
align($location = middle-center)
8090
position: relative
8191
> *
8292
position: absolute
83-
transform-style: preserve-3d
84-
if ($dir == horizontal) or ($dir == h)
93+
if $location is reset
94+
top: auto
95+
right: auto
96+
bottom: auto
97+
left: auto
98+
transform: translate3d(0, 0, 0)
99+
else if $location is top-left
100+
top: 0
101+
right: auto
102+
bottom: auto
103+
left: 0
104+
transform: translate3d(0, 0, 0)
105+
else if $location is top-center or $location is top
106+
top: 0
107+
right: auto
108+
bottom: auto
85109
left: 50%
86-
transform: translateX(-50%)
87-
else if ($dir == vertical) or ($dir == v)
110+
transform: translate3d(-50%, 0, 0)
111+
else if $location is top-right
112+
top: 0
113+
right: 0
114+
bottom: auto
115+
left: auto
116+
transform: translate3d(0, 0, 0)
117+
else if $location is middle-left or $location is left
118+
top: 50%
119+
right: auto
120+
bottom: auto
121+
left: 0
122+
transform: translate3d(0, -50%, 0)
123+
else if $location is middle-right or $location is right
88124
top: 50%
89-
transform: translateY(-50%)
90-
else if ($dir == reset)
125+
right: 0
126+
bottom: auto
127+
left: auto
128+
transform: translate3d(0, -50%, 0)
129+
else if $location is bottom-left
130+
top: auto
131+
right: auto
132+
bottom: 0
133+
left: 0
134+
transform: translate3d(0, 0, 0)
135+
else if $location is bottom-center or $location is bottom
136+
top: auto
137+
right: auto
138+
bottom: 0
139+
left: 50%
140+
transform: translate3d(-50%, 0, 0)
141+
else if $location is bottom-right
91142
top: auto
143+
right: 0
144+
bottom: 0
92145
left: auto
93-
transform: translate(0, 0)
146+
transform: translate3d(0, 0, 0)
94147
else
95148
top: 50%
149+
right: auto
150+
bottom: auto
96151
left: 50%
97-
transform: translate(-50%, -50%)
152+
transform: translate3d(-50%, -50%, 0)
98153

99154

100155
/**

0 commit comments

Comments
 (0)