Skip to content

Commit

Permalink
Fixed hidden-up and hidden-down behavior.
Browse files Browse the repository at this point in the history
Added zero values for margins, orders, offsets.
  • Loading branch information
pfrankov committed Apr 26, 2017
1 parent e920565 commit 161a781
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 7 deletions.
2 changes: 1 addition & 1 deletion greedo.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "greedo",
"version": "1.1.0",
"version": "2.0.0",
"description": "Flexbox-based responsive grid system",
"main": "greedo.css",
"style": "greedo.css",
Expand Down
21 changes: 19 additions & 2 deletions src/css/greedo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,23 @@ $SIZES: ((-xs, $xs-min), (-sm, $sm-min), (-md, $md-min), (-lg, $lg-min));
margin-bottom: calc(1rem * #{$i});
}
}

.order#{$size-name}-0 {
order: 0;
}

.mt#{$size-name}-0 {
margin-top: 0;
}
.mb#{$size-name}-0 {
margin-bottom: 0;
}

.col-offset#{$size-name}-0,
.offset#{$size-name}-0 {
margin-left: 0;
padding: 0 $GUTTER / 2;
}
}

@include generate();
Expand All @@ -151,14 +168,14 @@ $SIZES: ((-xs, $xs-min), (-sm, $sm-min), (-md, $md-min), (-lg, $lg-min));
@if $size > 0 {
@media (min-width: $size) {
.hidden#{$size-name},
.hidden#{$size-name}-down {
.hidden#{$size-name}-up {
display: none;
}
@include generate($size-name);
}

@media (max-width: $size) {
.hidden#{$size-name}-up {
.hidden#{$size-name}-down {
display: none;
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,7 @@ <h2>Responsiveness</h2>
</div>

<p>
Hidden up example: <code>hidden-[xs,sm,md,lg]-up</code>
Hidden down example: <code>hidden-[xs,sm,md,lg]-down</code>
</p>
<div class="row line">
<div class="col-xs-6 col-md-4">
Expand All @@ -388,8 +388,8 @@ <h2>Responsiveness</h2>
<div class="col-xs-6 col-md-4">
<div class="box">.col-xs-6 .col-md-4</div>
</div>
<div class="col-md-4 hidden-md-up">
<div class="box-alt">.col-md-4 .hidden-md-up</div>
<div class="col-md-4 hidden-md-down">
<div class="box-alt">.col-md-4 .hidden-md-down</div>
</div>
</div>

Expand Down

0 comments on commit 161a781

Please sign in to comment.