Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
feat(fabSpeedDial/fabToolbar): support positioning using fab button c…
Browse files Browse the repository at this point in the history 
…lasses

refactor button.scss and fab*.scss to share fab position variables/mixins

fixes #3220. closes #3693.
  • Loading branch information
@topherfangio @ThomasBurleson
topherfangio authored and ThomasBurleson committed Aug 14, 2015
1 parent 1d90ffa commit cca1955
Show file tree
Hide file tree
Showing 5 changed files with 34 additions and 20 deletions.
22 changes: 2 additions & 20 deletions src/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@ $button-margin: rem(0.600) rem(0.800) !default;
$button-min-width: rem(8.800) !default;

// Fab buttons
$button-fab-width: rem(5.600) !default;
$button-fab-height: rem(5.600) !default;
$button-fab-line-height: rem(5.600) !default;
$button-fab-padding: rem(1.60) !default;
$button-fab-mini-width: rem(4.00) !default;
$button-fab-mini-height: rem(4.00) !default;
$button-fab-mini-line-height: rem(4.00) !default;
Expand All @@ -18,19 +15,6 @@ $icon-button-height: rem(4.800) !default;
$icon-button-width: rem(4.800) !default;
$icon-button-margin: rem(0.600) !default;

/**
* Position a FAB button.
*/
@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
&.md-fab-#{$spot} {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
position: absolute;
}
}

.md-button {
box-sizing: border-box;
color: currentColor;
Expand Down Expand Up @@ -120,10 +104,8 @@ $icon-button-margin: rem(0.600) !default;

&.md-fab {

@include fab-position(bottom-right, auto, ($button-fab-width - $button-fab-padding)/2, ($button-fab-height - $button-fab-padding)/2, auto);
@include fab-position(bottom-left, auto, auto, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2);
@include fab-position(top-right, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2, auto, auto);
@include fab-position(top-left, ($button-fab-height - $button-fab-padding)/2, auto, auto, ($button-fab-width - $button-fab-padding)/2);
// Include the top/left/bottom/right fab positions
@include fab-all-positions();

z-index: $z-index-fab;

Expand Down
3 changes: 3 additions & 0 deletions src/components/fabSpeedDial/fabSpeedDial.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ md-fab-speed-dial {
display: flex;
align-items: center;

// Include the top/left/bottom/right fab positions
@include fab-all-positions();

.md-css-variables {
z-index: $z-index-fab;
}
Expand Down
3 changes: 3 additions & 0 deletions src/components/fabToolbar/fabToolbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ $icon-button-margin: rem(0.600) !default;
md-fab-toolbar {
$icon-delay: 200ms;

// Include the top/left/bottom/right fab positions
@include fab-all-positions();

display: block;

/*
Expand Down
20 changes: 20 additions & 0 deletions src/core/style/mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,23 @@
#{$prop}: $rtl-value;
}
}

/**
* Position a FAB button.
*/
@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
&.md-fab-#{$spot} {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
position: absolute;
}
}

@mixin fab-all-positions() {
@include fab-position(bottom-right, auto, ($button-fab-width - $button-fab-padding)/2, ($button-fab-height - $button-fab-padding)/2, auto);
@include fab-position(bottom-left, auto, auto, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2);
@include fab-position(top-right, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2, auto, auto);
@include fab-position(top-left, ($button-fab-height - $button-fab-padding)/2, auto, auto, ($button-fab-width - $button-fab-padding)/2);
}
6 changes: 6 additions & 0 deletions src/core/style/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,9 @@ $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !defa
$swift-ease-in-out-duration: 0.5s !default;
$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;

// Fab Buttons (shared between buttons.scss and fab*.scss)
// -------------------------------------------
$button-fab-width: rem(5.600) !default;
$button-fab-height: rem(5.600) !default;
$button-fab-padding: rem(1.60) !default;

2 comments on commit cca1955

@topherfangio
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robertbaker What exactly would you like me to document? :-)

@topherfangio
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robertbaker I just created #4183 to track the docs update.

These classes use position: absolute, so you'll need your container to have position: absolute or position: relative in order to work properly.

Also, I assume you are using the latest master version? Because they won't work in older versions :-)

Please sign in to comment.