javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(fab-button): add css border properties (#16656)

Browse Source 
allow styling border with css custom properties

fixes #16652
This commit is contained in:
Gustav Bylund
2018-12-10 23:46:49 +01:00
committed by Brandy Carney
parent 2f63049909
commit 64557a7bcc
3 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/fab-button/fab-button.scss
View File

@ -45,7 +45,10 @@
--margin-bottom: calc((#{$fab-size} - var(--height)) / 2); --margin-bottom: calc((#{$fab-size} - var(--height)) / 2);
--transition: background-color, opacity 100ms linear; --transition: background-color, opacity 100ms linear;
--ripple-color: currentColor; --ripple-color: currentColor;
--border-radius: #{$fab-border-radius};
--border-width: 0;
--border-style: none;
--border-color: initial;
display: block; display: block;
font-size: 14px; font-size: 14px;
@ -76,7 +79,7 @@
} }
.button-native { .button-native {
@include border-radius(50%); @include border-radius(var(--border-radius));
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start)); @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
@include text-inherit(); @include text-inherit();
@ -91,7 +94,9 @@
transition: var(--transition); transition: var(--transition);
border: 0; border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--border-color);
outline: none; outline: none;

3
core/src/components/fab-button/fab-button.vars.scss
View File

@ -8,3 +8,6 @@ $fab-size: 56px !default;
/// @prop - Width and height of the mini FAB button /// @prop - Width and height of the mini FAB button
$fab-mini-size: 40px !default; $fab-mini-size: 40px !default;
/// @prop - Border radius of the FAB button
$fab-border-radius: 50% !default;

11
core/src/components/fab-button/test/standalone/index.html
View File

@ -65,6 +65,10 @@
<ion-fab-button class="fab-button-in-list custom-white activated"><ion-icon name="heart"></ion-icon></ion-fab-button> <ion-fab-button class="fab-button-in-list custom-white activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button> <ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list custom-blue activated"><ion-icon name="star"></ion-icon></ion-fab-button> <ion-fab-button class="fab-button-in-list custom-blue activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list custom-border">Border</ion-fab-button>
<ion-fab-button class="fab-button-in-list custom-border activated">Border</ion-fab-button>
<ion-fab-button class="fab-button-in-list custom-border"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list custom-border activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<style> <style>
ion-fab-button { ion-fab-button {
@ -92,6 +96,13 @@
--background: #add8e6; --background: #add8e6;
--background-activated: #7cb2c4; --background-activated: #7cb2c4;
} }
.custom-border {
--border-radius: 10px;
--border-width: 2px;
--border-style: dashed;
--border-color: red;
}
</style> </style>
</body> </body>
</html> </html>