mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
60 lines
1.1 KiB
SCSS
60 lines
1.1 KiB
SCSS
@import "./fab.vars";
|
|
|
|
// Floating Action Button Container
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
position: absolute;
|
|
|
|
z-index: $z-index-fixed-content;
|
|
}
|
|
|
|
|
|
// FAB Horizontal Positioning
|
|
// --------------------------------------------------
|
|
|
|
:host(.fab-horizontal-center) {
|
|
@include position(null, null, null, 50%);
|
|
@include margin-horizontal(-$fab-size / 2, null);
|
|
}
|
|
|
|
:host(.fab-horizontal-start) {
|
|
@include position-horizontal(
|
|
calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px)), null
|
|
);
|
|
}
|
|
|
|
:host(.fab-horizontal-end) {
|
|
@include position-horizontal(
|
|
null, calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px))
|
|
);
|
|
}
|
|
|
|
|
|
// FAB Vertical Positioning
|
|
// --------------------------------------------------
|
|
|
|
:host(.fab-vertical-top) {
|
|
top: $fab-content-margin;
|
|
}
|
|
|
|
:host(.fab-vertical-top.fab-edge) {
|
|
top: -$fab-size / 2;
|
|
}
|
|
|
|
|
|
:host(.fab-vertical-bottom) {
|
|
bottom: $fab-content-margin;
|
|
}
|
|
|
|
:host(.fab-vertical-bottom.fab-edge) {
|
|
bottom: -$fab-size / 2;
|
|
}
|
|
|
|
|
|
:host(.fab-vertical-center) {
|
|
@include margin(-$fab-size / 2, null, null, null);
|
|
|
|
top: 50%;
|
|
}
|