Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: fix uncentered last column on Float Grid #9952 #11115

Merged
merged 4 commits into from
Apr 5, 2018
Merged

fix: fix uncentered last column on Float Grid #9952 #11115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
50e7dab
fix: fix uncenter for last column in Float Grid #9952
ncoden Mar 31, 2018
fa07c03
refactor: add "default" position to `grid-column-positioning` to hand…
ncoden Mar 31, 2018
9429539
tests: add visual test for Float Grid uncentered columns
ncoden Mar 31, 2018
a8f850e
fix: fix last column uncentering with edge align disabled in Float Grid
ncoden Mar 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions scss/grid/_column.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,8 @@
// Gutters
@include grid-column-gutter($gutters: $gutters);

// Last column alignment
@if $grid-column-align-edge {
&:last-child:not(:first-child) {
float: $global-right;
}
}
// Position
@include grid-col-pos(auto);
}

/// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
Expand Down
32 changes: 28 additions & 4 deletions scss/grid/_position.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,37 @@

/// Reposition a column.
///
/// @param {Number|Keyword} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. Set to center to center the column.
/// @param {Number|Keyword} $position - It can be:
/// * A number: The column will move equal to the width of the column count
/// specified. A positive number will push the column to the right, while
/// a negative number will pull it to the left.
/// * `center`: Column will be centered
/// * `auto`: Column will be pushed to the left (or to the right for the last column).
@mixin grid-column-position($position) {
@if type-of($position) == 'number' {
// Auto positioning
@if $position == auto {
&, &:last-child:not(:first-child) {
float: $global-left;
clear: none;
}

// Last column alignment
@if $grid-column-align-edge {
&:last-child:not(:first-child) {
float: $global-right;
}
}
}

// Push/pull
@else if type-of($position) == 'number' {
$offset: percentage($position / $grid-column-count);

position: relative;
#{$global-left}: $offset;
}

// Center positioning
@else if $position == center {
&, &:last-child:not(:first-child) {
float: none;
Expand All @@ -24,15 +47,16 @@
margin-right: auto;
margin-left: auto;
}

@else {
@warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.';
@warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, "center" or "auto".';
}
}

/// Reset a position definition.
@mixin grid-column-unposition {
@include grid-column-position(auto);
position: static;
float: $global-left;
margin-right: 0;
margin-left: 0;
}
Expand Down
58 changes: 58 additions & 0 deletions test/visual/grid/uncentered-columns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>

<div class="row column">
<h1>Uncentered Columns</h1>
</div>

<div class="row">
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
</div>

<div class="row">
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only, on the right otherwise</p>
</div>
</div>

<div class="row column"><hr></div>

<div class="row">
<div class="small-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#fbb;">This pink column should be centered and clear the blue column on medium only.</p>
</div>
<div class="small-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
</div>

<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>