mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
1e2374f910
This adds the box-shadow, background-color, and color to the transition for Material Design buttons in a fab list, Sass variables for this transition in all modes, it also defaults the md ripple color to the contrast of the fab button color (which by default is primary). Closes #9557
215 lines
3.5 KiB
SCSS
Executable File
215 lines
3.5 KiB
SCSS
Executable File
@import "../../themes/ionic.globals";
|
|
|
|
// Floating Action Buttons
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Width and height of the FAB button
|
|
$fab-size: 56px !default;
|
|
|
|
/// @prop - Width and height of the FAB button mini
|
|
$fab-mini-size: 40px !default;
|
|
|
|
/// @prop - Margin of the FAB Container
|
|
$fab-content-margin: 10px !default;
|
|
|
|
/// @prop - Margin of the FAB List
|
|
$fab-list-margin: 10px !default;
|
|
|
|
/// @prop - Background color of the button in a list
|
|
$fab-list-button-background-color: #f4f4f4 !default;
|
|
|
|
|
|
.fab {
|
|
@include appearance(none);
|
|
|
|
position: relative;
|
|
z-index: 0;
|
|
display: block;
|
|
overflow: hidden;
|
|
|
|
width: $fab-size;
|
|
height: $fab-size;
|
|
|
|
border-radius: 50%;
|
|
font-size: 14px;
|
|
line-height: $fab-size;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
text-transform: none;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: background-color, opacity 100ms linear;
|
|
|
|
background-clip: padding-box;
|
|
font-kerning: none;
|
|
user-select: none;
|
|
|
|
contain: strict;
|
|
}
|
|
|
|
.fab ion-icon {
|
|
flex: 1;
|
|
|
|
font-size: 2.4rem;
|
|
}
|
|
|
|
// FAB mini
|
|
// --------------------------------------------------
|
|
|
|
.fab[mini] {
|
|
margin: ($fab-size - $fab-mini-size) / 2;
|
|
|
|
width: $fab-mini-size;
|
|
height: $fab-mini-size;
|
|
|
|
line-height: $fab-mini-size;
|
|
}
|
|
|
|
.fab[mini] .fab-close-icon {
|
|
line-height: $fab-mini-size;
|
|
}
|
|
|
|
|
|
// FAB container
|
|
// --------------------------------------------------
|
|
|
|
ion-fab {
|
|
position: absolute;
|
|
z-index: $z-index-fixed-content;
|
|
|
|
&[center] {
|
|
left: 50%;
|
|
|
|
margin-left: -$fab-size / 2;
|
|
}
|
|
|
|
&[middle] {
|
|
top: 50%;
|
|
|
|
margin-top: -$fab-size / 2;
|
|
}
|
|
|
|
&[top] {
|
|
top: $fab-content-margin;
|
|
}
|
|
|
|
&[right] {
|
|
right: $fab-content-margin;
|
|
}
|
|
|
|
&[bottom] {
|
|
bottom: $fab-content-margin;
|
|
}
|
|
|
|
&[left] {
|
|
left: $fab-content-margin;
|
|
}
|
|
|
|
&[top][edge] {
|
|
top: -$fab-size / 2;
|
|
}
|
|
|
|
&[bottom][edge] {
|
|
bottom: -$fab-size / 2;
|
|
}
|
|
}
|
|
|
|
|
|
// FAB list (speed dial)
|
|
// --------------------------------------------------
|
|
|
|
ion-fab-list {
|
|
position: absolute;
|
|
top: 0;
|
|
display: none;
|
|
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
margin: $fab-size + $fab-list-margin 0;
|
|
|
|
min-width: $fab-size;
|
|
min-height: $fab-size;
|
|
}
|
|
|
|
.fab-in-list {
|
|
margin: 8px 0;
|
|
|
|
width: $fab-mini-size;
|
|
height: $fab-mini-size;
|
|
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: scale(0);
|
|
}
|
|
|
|
.fab-in-list.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: scale(1);
|
|
}
|
|
|
|
ion-fab-list[side=left] .fab-in-list,
|
|
ion-fab-list[side=right] .fab-in-list {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
ion-fab-list[side=top] {
|
|
top: auto;
|
|
bottom: 0;
|
|
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
ion-fab-list[side=left] {
|
|
right: 0;
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
margin: 0 $fab-size + $fab-list-margin;
|
|
}
|
|
|
|
ion-fab-list[side=right] {
|
|
left: 0;
|
|
|
|
flex-direction: row;
|
|
|
|
margin: 0 $fab-size + $fab-list-margin;
|
|
}
|
|
|
|
|
|
// FAB animation
|
|
// --------------------------------------------------
|
|
|
|
.fab-list-active {
|
|
display: flex;
|
|
}
|
|
|
|
.fab-close-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
|
|
line-height: $fab-size;
|
|
opacity: 0;
|
|
transform: scale(.4) rotateZ(-45deg);
|
|
transition: all ease-in-out 300ms;
|
|
transition-property: transform, opacity;
|
|
}
|
|
|
|
.fab .button-inner {
|
|
transition: all ease-in-out 300ms;
|
|
transition-property: transform, opacity;
|
|
}
|
|
|
|
.fab-close-active .fab-close-icon {
|
|
opacity: 1;
|
|
transform: scale(1) rotateZ(0deg);
|
|
}
|
|
|
|
.fab-close-active .button-inner {
|
|
opacity: 0;
|
|
transform: scale(.4) rotateZ(45deg);
|
|
}
|