javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(sass): tweaks to the alpha css variables (#14223)

Browse Source 
* alpha tweaks

* added alpha-input
cleanup for theme-builder

* removed global variables

* style(searchbar): fix indentation

closes #14196
This commit is contained in:
Ross Gerbasi
2018-03-30 09:27:58 -05:00
committed by Brandy Carney
parent 7887550166
commit 6c6f867ce4
39 changed files with 729 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,7 +83,7 @@
}
.fab-translucent-ios-#{$color-name} {
background-color: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-highest);
background-color: ion-color($colors-ios, $color-name, base, ios, $fab-ios-translucent-background-color-alpha);
opacity: .8;
}

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

@ -4,61 +4,67 @@
// --------------------------------------------------
/// @prop - Box shadow of the FAB button
$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !default;
$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !default;
/// @prop - Box shadow of the activated FAB button
$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default;
$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default;
/// @prop - Transform of the FAB button
$fab-ios-transform: scale(1.1) !default;
$fab-ios-transform: scale(1.1) !default;
/// @prop - Transition of the FAB button
$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59) !default;
$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59) !default;
/// @prop - Transition of the activated FAB button
$fab-ios-transition-activated: .2s transform ease-out !default;
$fab-ios-transition-activated: .2s transform ease-out !default;
/// @prop - Background color of the button
$fab-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
$fab-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background color alpha of the button in translucent mode
$fab-ios-translucent-background-color-alpha: .9 !default;
/// @prop - Background color of the button in translucent mode
$fab-ios-translucent-background-color: ion-color($colors-ios, primary, base, ios, $alpha-ios-highest) !default;
$fab-ios-translucent-background-color: ion-color($colors-ios, primary, base, ios, $fab-ios-translucent-background-color-alpha) !default;
/// @prop - Text color of the button
$fab-ios-text-color: ion-color($colors-ios, $fab-ios-background-color, contrast, ios) !default;
$fab-ios-text-color: ion-color($colors-ios, $fab-ios-background-color, contrast, ios) !default;
/// @prop - Color of the button icon
$fab-ios-icon-fill-color: $fab-ios-text-color !default;
$fab-ios-icon-fill-color: $fab-ios-text-color !default;
/// @prop - Font size of the button icon
$fab-ios-icon-font-size: 28px !default;
$fab-ios-icon-font-size: 28px !default;
/// @prop - Background color of the activated button
$fab-ios-background-color-activated: ion-color($colors-ios, $fab-ios-background-color, tint, ios) !default;
$fab-ios-background-color-activated: ion-color($colors-ios, $fab-ios-background-color, tint, ios) !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-background-color: ion-color($colors-ios, light, base, ios) !default;
$fab-ios-list-button-background-color: ion-color($colors-ios, light, base, ios) !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
$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: css-var($background-ios-color-value, background-ios-color, $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($colors-ios, $fab-ios-list-button-background-color, contrast, ios) !default;
$fab-ios-list-button-text-color: ion-color($colors-ios, $fab-ios-list-button-background-color, contrast, ios) !default;
/// @prop - Color of the button icon in a list
$fab-ios-list-button-icon-fill-color: $fab-ios-list-button-text-color !default;
$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($colors-ios, $fab-ios-list-button-background-color, tint, ios) !default;
$fab-ios-list-button-background-color-activated: ion-color($colors-ios, $fab-ios-list-button-background-color, tint, ios) !default;
/// @prop - Transition duration of the transform and opacity of the button in a list
$fab-ios-list-button-transition-duration: 200ms !default;
$fab-ios-list-button-transition-duration: 200ms !default;
/// @prop - Speed curve of the transition of the transform and opacity of the button in a list
$fab-ios-list-button-transition-timing-function: ease !default;
$fab-ios-list-button-transition-timing-function: ease !default;
/// @prop - Transition delay of the transform and opacity of the button in a list
$fab-ios-list-button-transition-delay: 10ms !default;
$fab-ios-list-button-transition-delay: 10ms !default;
/// @prop - Filter of the translucent fab
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;