(css) Keep the fab button visible

This commit is contained in:
Francis Lachapelle
2017-02-01 21:33:17 -05:00
parent 4db1f8185a
commit d90533399d
9 changed files with 217 additions and 106 deletions
@@ -16,7 +16,8 @@ $quarter_height: 10px;
[ui-view=calendars] {
// Decrease width of middle column (list of events and tasks)
$listView-width: grid-step(4) !global;
//$listView-width: grid-step(4) !global;
$listView-width: grid-step(4);
//$detailView-width: grid-step(10) !global;
.view-list {
@@ -39,9 +40,37 @@ $quarter_height: 10px;
.view-list--close {
@include from(md) {
$cols: map-get($base-grid-total-columns, md);
$colWidth: ((100 / $cols) * -5vw);
margin-right: $colWidth;
$colWidth: col-width($breakpoint: md, $nb: 5);
margin-right: $colWidth * -1;
}
}
/**
* Redefine fab button since center column width is different.
* See button.scss
*/
md-fab-speed-dial.sg-fab-bottom-center {
@include at(md) {
// sidenav is hidden, center list can be closed
right: col-width($breakpoint: md, $nb: 15) + 2vw;
&.sg-center-close {
left: ($button-fab-width - $button-fab-padding)/2;
right: auto;
}
}
@include from(lg) {
// both sidenav and center list can be closed
right: col-width($breakpoint: lg, $nb: 11) + 2vw;
&.sg-sidenav-close {
right: col-width($breakpoint: lg, $nb: 15) + 2vw;
}
&.sg-center-close {
right: col-width($breakpoint: lg, $nb: 14) + 2vw;
}
&.sg-sidenav-close.sg-center-close {
left: ($button-fab-width - $button-fab-padding)/2;
right: auto;
}
}
}
+5 -7
View File
@@ -45,7 +45,7 @@ body {
// ----------------------------------------------------------------------------
// Variables
$listView-width: grid-step(6) !global;
//$listView-width: grid-step(6) !global;
//$detailView-width: grid-step(8) !global;
[class|="view"] {
@@ -93,14 +93,12 @@ $listView-width: grid-step(6) !global;
transform: translateX(-100%);
@include at(sm) {
$cols: map-get($base-grid-total-columns, sm);
$colWidth: ((100 / $cols) * -6vw);
margin-right: $colWidth;
$colWidth: col-width($breakpoint: sm, $nb: 6);
margin-right: $colWidth * -1;
}
@include from(md) {
$cols: map-get($base-grid-total-columns, md);
$colWidth: ((100 / $cols) * -6vw);
margin-right: $colWidth;
$colWidth: col-width($breakpoint: md, $nb: 6);
margin-right: $colWidth * -1;
}
}