amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-05-22 03:45:25 +00:00
Code Issues Projects Releases Wiki Activity

(css) Keep the fab button visible

Browse Source
This commit is contained in:
Francis Lachapelle
2017-02-01 21:32:16 -05:00
parent 4db1f8185a
commit d90533399d
9 changed files with 217 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/button/button.scss
+78 -5
View File
@@ -5,10 +5,83 @@ md-sidenav md-list .md-button {
font-weight: normal;
}
.md-button.md-fab-overlap-bottom {
&.md-fab-bottom-right,
&.md-fab-bottom-left {
bottom: -(($button-fab-width + $button-fab-padding)/2);
/**
* Keep main fab button visible and either at the bottom right of the list
* view or at the bottom left of the detail view
*
* Three-pane view (full view):
*
* +------+-------+--------------+
* | x | | x |
* | | | |
* | | | |
* | | | |
* | | (*)| |
* +------+-------+--------------+
*
* Sidenav closed:
*
* +-------+--------------+
* |= | x |
* | | |
* | | |
* | | |
* | (*)| |
* +-------+--------------+
*
* Detail view expanded (list view closed):
*
* +------+--------------+
* | x | + |
* | | |
* | | |
* | | |
* | |(*) |
* +------+--------------+
*
* Sidenav closed and detail view expanded:
*
* +--------------+
* | + |
* | |
* | |
* | |
* |(*) |
* +--------------+
*
*/
md-fab-speed-dial.sg-fab-bottom-center {
position: absolute;
bottom: ($button-fab-height - $button-fab-padding)/2;
left: auto;
right: ($button-fab-width - $button-fab-padding)/2;
top: auto;
transition: $swift-ease-out;
@include at(sm) {
right: col-width($breakpoint: sm, $nb: 10) + 2vw;
&.sg-center-close {
left: ($button-fab-width - $button-fab-padding)/2;
right: auto;
}
}
@include at(md) {
// sidenav is hidden, center list can be closed
right: col-width($breakpoint: md, $nb: 14) + 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: 10) + 2vw;
&.sg-sidenav-close, &.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;
}
}
}
@@ -163,4 +236,4 @@ md-tab-content {
font-weight: $sg-font-medium;
line-height: $sg-font-size-1 * 2;
text-transform: uppercase;
}
}