javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(fab-button): use correct background in list and update the md icon color (#16092)

Browse Source 
* fix(fab): separate the mode colors and update the md icon color

-md icon color matches spec by adding 0.54 opacity to the color

fixes #16091

* fix(fab): update the font size for buttons in a fab list

* fix(fab-button): update box-shadow for both states

* fix(fab-button): update transition to match md spec
This commit is contained in:
Brandy Carney
2018-10-25 22:42:20 -04:00
committed by Adam Bradley
parent 6a138a6c55
commit 9dfc863f0f
16 changed files with 120 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/fab-button/fab-button.ios.scss
View File

@@ -5,6 +5,12 @@
// --------------------------------------------------
:host {
--background: #{$fab-ios-background-color};
--background-activated: #{$fab-ios-background-color-activated};
--background-focused: var(--background-activated);
--color: #{$fab-ios-text-color};
--color-activated: #{$fab-ios-text-color};
--color-focused: var(--color-activated);
--box-shadow: #{$fab-ios-box-shadow};
--transition: #{$fab-ios-transition};
}
@@ -25,13 +31,17 @@
:host(.fab-button-in-list) {
--background: #{$fab-ios-list-button-background-color};
--background-activated: #{$fab-ios-list-button-background-color-activated};
--background-focused: var(--background-activated);
--color: #{$fab-ios-list-button-text-color};
--color-activated: #{$fab-ios-list-button-text-color};
--color-focused: var(--color-activated);
--transition: #{transform 200ms ease 10ms,
opacity 200ms ease 10ms};
}
:host(.fab-button-in-list.activated) {
--background: #{$fab-ios-list-button-background-color-activated};
:host(.fab-button-in-list) ::slotted(ion-icon) {
font-size: $fab-ios-list-button-icon-font-size;
}

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

@@ -21,6 +21,9 @@ $fab-ios-transition-activated: .2s transform ease
/// @prop - Background color of the button
$fab-ios-background-color: ion-color(primary, base) !default;
/// @prop - Background color of the activated button
$fab-ios-background-color-activated: ion-color(primary, shade) !default;
/// @prop - Background color alpha of the button in translucent mode
$fab-ios-translucent-background-color-alpha: .9 !default;
@@ -36,26 +39,23 @@ $fab-ios-icon-fill-color: $fab-ios-text-colo
/// @prop - Font size of the button icon
$fab-ios-icon-font-size: 28px !default;
/// @prop - Background color of the activated button
$fab-ios-background-color-activated: ion-color(primary, tint) !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-background-color: ion-color(light, base) !default;
/// @prop - Background color of the activated button in a list
$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default;
/// @prop - Text color of the button in a list
$fab-ios-list-button-text-color: ion-color(light, contrast) !default;
/// @prop - Font size of the button icon in a list
$fab-ios-list-button-icon-font-size: 18px !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-translucent-background-color-alpha: .8 !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $fab-ios-list-button-translucent-background-color-alpha) !default;
/// @prop - Text color of the button in a list
$fab-ios-list-button-text-color: ion-color(light, contrast) !default;
/// @prop - Color of the button icon in a list
$fab-ios-list-button-icon-fill-color: $fab-ios-list-button-text-color !default;
/// @prop - Background color of the activated button in a list
$fab-ios-list-button-background-color-activated: ion-color(primary, tint) !default;
/// @prop - Filter of the translucent fab
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;

33
core/src/components/fab-button/fab-button.md.scss
View File

@@ -5,11 +5,19 @@
// --------------------------------------------------
:host {
--background: #{$fab-md-background-color};
--background-activated: #{$fab-md-background-color-activated};
--background-focused: var(--background-activated);
--color: #{$fab-md-text-color};
--color-activated: #{$fab-md-text-color};
--color-focused: var(--color-activated);
--box-shadow: #{$fab-md-box-shadow};
--transition: #{
box-shadow 300ms cubic-bezier(.4, 0, .2, 1),
background-color 300ms cubic-bezier(.4, 0, .2, 1),
color 300ms cubic-bezier(.4, 0, .2, 1)
box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
background-color 280ms cubic-bezier(.4, 0, .2, 1),
color 280ms cubic-bezier(.4, 0, .2, 1),
opacity 15ms linear 30ms,
transform 270ms cubic-bezier(0, 0, .2, 1) 0ms
};
}
@@ -19,7 +27,7 @@
::slotted(ion-icon),
.close-icon {
font-size: 24px;
font-size: $fab-md-icon-font-size;
}
@@ -28,16 +36,13 @@
:host(.fab-button-in-list) {
--color: #{$fab-md-list-button-text-color};
--color-activated: #{$fab-md-list-button-text-color};
--color-focused: var(--color-activated);
--background: #{$fab-md-list-button-background-color};
--transition: #{
transform 200ms ease 10ms ease 10ms
opacity 200ms ease 10ms ease 10ms
box-shadow 300ms cubic-bezier(.4, 0, .2, 1)
background-color 300ms cubic-bezier(.4, 0, .2, 1)
color 300ms cubic-bezier(.4, 0, .2, 1)
};
--background-activated: #{$fab-md-list-button-background-color-activated};
--background-focused: var(--background-activated);
}
:host(.fab-button-in-list.activated) {
--background: #{$fab-md-list-button-background-color-activated};
}
:host(.fab-button-in-list) ::slotted(ion-icon) {
font-size: $fab-md-list-button-icon-font-size;
}

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

@@ -4,31 +4,31 @@
// --------------------------------------------------
/// @prop - Box shadow of the FAB button
$fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
$fab-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !default;
/// @prop - Box shadow of the activated FAB button
$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
$fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12) !default;
/// @prop - Background color of the button
$fab-md-background-color: ion-color(primary, base) !default;
/// @prop - Background color of the activated button
$fab-md-background-color-activated: ion-color(primary, shade) !default;
/// @prop - Text color of the button
$fab-md-text-color: ion-color(primary, contrast) !default;
/// @prop - Color of the button icon
$fab-md-icon-fill-color: $fab-md-text-color !default;
/// @prop - Background color of the activated button
$fab-md-background-color-activated: ion-color(primary, tint) !default;
/// @prop - Font size of the button icon
$fab-md-icon-font-size: 24px !default;
/// @prop - Background color of the button in a list
$fab-md-list-button-background-color: ion-color(light, base) !default;
/// @prop - Text color of the button in a list
$fab-md-list-button-text-color: ion-color(light, contrast) !default;
/// @prop - Color of the button icon in a list
$fab-md-list-button-icon-fill-color: $fab-md-list-button-text-color !default;
/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-activated: ion-color(primary, tint) !default;
$fab-md-list-button-background-color-activated: ion-color(light, shade) !default;
/// @prop - Text color of the button in a list
$fab-md-list-button-text-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
/// @prop - Font size of the button icon in a list
$fab-md-list-button-icon-font-size: 18px !default;

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

@@ -37,12 +37,6 @@
* @prop --padding-bottom: Padding bottom of the button
* @prop --padding-start: Padding start of the button
*/
--background: #{ion-color(primary, base)};
--background-activated: #{ion-color(primary, shade)};
--background-focused: #{ion-color(primary, shade)};
--color: #{ion-color(primary, contrast)};
--color-activated: #{ion-color(primary, contrast)};
--color-focused: var(--color-activated);
--width: #{$fab-size};
--height: var(--width);
--margin-start: calc((#{$fab-size} - var(--width)) / 2);

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

@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<title>Floating Action Button - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../dist/ionic.js"></script>
</head>
@@ -14,8 +14,14 @@
<h3>Default</h3>
<p>
<ion-fab-button>Default</ion-fab-button>
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button mini><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
<ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button mini class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button mini class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
</p>
<h3>Colors</h3>
@@ -52,6 +58,14 @@
<ion-fab-button class="custom activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="secondary" class="custom"><ion-icon name="heart"></ion-icon></ion-fab-button>
<!-- Custom Colors Fab In List -->
<ion-fab-button class="fab-button-in-list custom-white">White</ion-fab-button>
<ion-fab-button class="fab-button-in-list custom-white activated">White</ion-fab-button>
<ion-fab-button class="fab-button-in-list custom-white"><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 activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<style>
ion-fab-button {
display: inline-block;
@@ -68,6 +82,16 @@
--color: blue;
--color-activated: white;
}
.custom-white {
--background: white;
--background-activated: #f6f6f6;
}
.custom-blue {
--background: #add8e6;
--background-activated: #7cb2c4;
}
</style>
</body>
</html>

20
core/src/components/fab/test/basic/index.html
View File

@@ -41,8 +41,8 @@
<ion-fab-button onclick="openSocial('vimeo', 'fab1')">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab1')">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab1')">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -61,8 +61,8 @@
<ion-fab-button onclick="openSocial('vimeo', 'fab2')">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab2')">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab2')">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -81,8 +81,8 @@
<ion-fab-button onclick="openSocial('vimeo', 'fab3')">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab3')">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab3')">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -101,8 +101,8 @@
<ion-fab-button onclick="openSocial('vimeo', 'fab4')">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab4')">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab4')">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -122,8 +122,8 @@
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab5')" color="light">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">

20
core/src/components/fab/test/preview/index.html
View File

@@ -41,8 +41,8 @@
<ion-fab-button onclick="openSocial('vimeo', 'fab1')">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab1')">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab1')">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -61,8 +61,8 @@
<ion-fab-button onclick="openSocial('vimeo', 'fab2')">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab2')">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab2')">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -81,8 +81,8 @@
<ion-fab-button onclick="openSocial('vimeo', 'fab3')">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab3')">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab3')">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -101,8 +101,8 @@
<ion-fab-button onclick="openSocial('vimeo', 'fab4')">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab4')">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab4')">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -122,8 +122,8 @@
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-fab-button onclick="openSocial('instagram', 'fab5')" color="light">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">

8
core/src/components/fab/test/standalone/index.html
View File

@@ -18,7 +18,7 @@
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab2')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('instagram', 'fab2')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -28,7 +28,7 @@
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab3')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('instagram', 'fab3')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -38,7 +38,7 @@
<ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab4')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab4')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('instagram', 'fab4')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -51,7 +51,7 @@
<ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('instagram', 'fab5')" color="light"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>

10
core/src/components/fab/test/translucent/index.html
View File

@@ -42,7 +42,7 @@
<ion-fab-button translucent onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('vimeo', 'fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('googleplus', 'fab1')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('instagram', 'fab1')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -52,7 +52,7 @@
<ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('googleplus', 'fab2')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('instagram', 'fab2')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -62,7 +62,7 @@
<ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('googleplus', 'fab3')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('instagram', 'fab3')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -72,7 +72,7 @@
<ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('vimeo', 'fab4')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('googleplus', 'fab4')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('instagram', 'fab4')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -85,7 +85,7 @@
<ion-fab-button translucent onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button translucent onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('instagram', 'fab5')" color="light"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button translucent onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>

2
core/src/components/fab/usage/angular.md
View File

@@ -71,7 +71,7 @@
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>

2
core/src/components/fab/usage/javascript.md
View File

@@ -71,7 +71,7 @@
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>

2
core/src/components/img/test/standalone/index.html
View File

@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<title>Img - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../dist/ionic.js"></script>
</head>

6
core/src/components/input/input.scss
View File

@@ -35,12 +35,12 @@
width: 100%;
background: var(--background);
color: var(--color);
/* stylelint-disable */
/* TODO: find a better solution in padding.css, that does not require !important, */
padding: 0 !important;
background: var(--background);
color: var(--color);
/* stylelint-enable */
font-family: $font-family-base;

2
core/src/components/menu/test/standalone/index.html
View File

@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<title>Menu - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../dist/ionic.js"></script>
</head>

2
core/src/themes/test/css-variables/index.html
View File

@@ -361,7 +361,7 @@
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button color="tertiary">
<ion-icon name="logo-googleplus"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</p>