Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit a2ec660

Browse files
fix(layout): hide/show with breakpoints
Hide with breakpoints should account for smaller breakpoints with show-gt-<xx> settings. * update the tips section with improved demo.
1 parent eb1695a commit a2ec660

File tree

2 files changed

+13
-7
lines changed

2 files changed

+13
-7
lines changed

docs/app/partials/layout-tips.tmpl.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,15 +89,21 @@ <h3>Layout Column</h3>
8989
</p>
9090

9191
<div class="md-whiteframe-3dp">
92-
<iframe height='459' scrolling='no'
93-
src='//codepen.io/team/AngularMaterial/embed/obgapg/?height=459&theme-id=21180&default-tab=result'
92+
93+
<iframe height='700' scrolling='no'
94+
src='//codepen.io/team/AngularMaterial/embed/obgapg/?height=700&theme-id=21180&default-tab=result'
9495
frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a
9596
href='http://codepen.io/team/AngularMaterial/pen/obgapg/'>Card Layouts (corrected)</a> by Angular Material (<a
9697
href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a href='http://codepen.io'>CodePen</a>.
9798
</iframe>
99+
98100
</div>
99101

100-
<p>This is easily fixed simply by inverting the layout logic so that the default is <code>layout='row'</code> </p>
102+
<p>
103+
This is easily fixed simply by inverting the layout logic so that the default is <code>layout='row'</code>.
104+
To see how the layout changes, shrink the browser window its width is <600px;
105+
</p>
106+
101107

102108
<br/>
103109
<hr/>

src/core/services/layout/layout.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@
450450
display: none;
451451
}
452452
}
453-
.hide-sm:not(.show-sm):not(.show) {
453+
.hide-sm:not(.show-gt-xs):not(.show-sm):not(.show) {
454454
display: none;
455455
}
456456

@@ -470,7 +470,7 @@
470470
display: none;
471471
}
472472
}
473-
.hide-md:not(.show-md):not(.show) {
473+
.hide-md:not(.show-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
474474
display: none;
475475
}
476476
@include layouts_for_breakpoint(md);
@@ -488,7 +488,7 @@
488488
display: none;
489489
}
490490
}
491-
.hide-lg:not(.show-lg):not(.show) {
491+
.hide-lg:not(.show-lg):not(.show-gt-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
492492
display: none;
493493
}
494494

@@ -505,7 +505,7 @@
505505
display: none;
506506
}
507507
}
508-
.hide-xl:not(.show-xl):not(.show-gt-lg):not(.show) {
508+
.hide-xl:not(.show-xl):not(.show-gt-lg):not(.show-gt-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
509509
display: none;
510510
}
511511

0 commit comments

Comments
 (0)