Allow to hide center column on large screens

This commit is contained in:
Francis Lachapelle
2016-11-10 16:04:29 -05:00
parent 5b02685d2b
commit 6e48734504
15 changed files with 111 additions and 27 deletions
@@ -109,6 +109,12 @@ md-icon {
&.icon-expand-more:before {
content: "\e5cf";
}
&.icon-fullscreen:before {
content: "\e5d0";
}
&.icon-fullscreen-exit:before {
content: "\e5d1";
}
&.icon-needs-action:before,
&.icon-help:before {
content: "\e887";
@@ -37,13 +37,11 @@ $quarter_height: 10px;
}
}
.view-detail {
@include at(sm) {
@include flex-col($breakpoint: sm, $nb: 10);
}
.view-list--close {
@include from(md) {
flex: 1 1 auto;
margin: 0;
$cols: map-get($base-grid-total-columns, md);
$colWidth: ((100 / $cols) * -5vw);
margin-right: $colWidth;
}
}
+21 -13
View File
@@ -50,8 +50,9 @@ $listView-width: grid-step(6) !global;
}
.view-list {
z-index: ($z-index-view - 1);
min-width: ($listView-width - ($pitch * 2));
transition: $swift-ease-out;
z-index: ($z-index-view - 1);
// With Material, when a button inside a md-list uses the class md-secondary, it is moved inside a container
// on the right side of the list item. Since we define the avatar as the secondary button, we must move it to
@@ -84,9 +85,26 @@ $listView-width: grid-step(6) !global;
}
}
.view-list--close {
transform: translateX(-100%);
@include at(sm) {
$cols: map-get($base-grid-total-columns, sm);
$colWidth: ((100 / $cols) * -6vw);
margin-right: $colWidth;
}
@include from(md) {
$cols: map-get($base-grid-total-columns, md);
$colWidth: ((100 / $cols) * -6vw);
margin-right: $colWidth;
}
}
.view-detail {
z-index: $z-index-view;
flex: 1 1 auto;
margin: 0;
overflow: hidden;
z-index: $z-index-view;
.sg-face, .sg-back {
> md-card {
@@ -155,11 +173,6 @@ $listView-width: grid-step(6) !global;
}
}
@include at(sm) {
@include flex-col(sm, 10);
margin: 0;
}
// No animation on medium to large screens
@include from(sm) {
.md-static {
@@ -195,11 +208,6 @@ $listView-width: grid-step(6) !global;
}
}
@include from(md) {
flex: 1 1 auto;
margin: 0;
}
// Flippable view card, used to show raw source of cards and messages
perspective: 1000px;
.sg-reversible {
@@ -225,4 +233,4 @@ $listView-width: grid-step(6) !global;
transform: rotateY( 180deg );
}
}
}
}