javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(theming): remove Sass default flags (#29401)

Browse Source 
Issue number: N/A

---------

## What is the current behavior?
Currently, every Sass variable in Ionic has the `!default` flag added to
the end.

From the [Sass variables
documentation](https://sass-lang.com/documentation/variables/):

> Normally when you assign a value to a variable, if that variable
already had a value, its old value is overwritten. But if you’re writing
a Sass library, you might want to allow your users to configure your
library’s variables before you use them to generate CSS.
> 
> To make this possible, Sass provides the `!default` flag. This assigns
a value to a variable only if that variable isn’t defined or its value
is [null](https://sass-lang.com/documentation/values/null). Otherwise,
the existing value will be used.

In past versions of Ionic Framework, developers wrote Sass variables to
rebuild Ionic Framework using their own values. In the latest versions
of Ionic Framework, this is not possible.

## What is the new behavior?
Removes the `!default` flag from all Sass variables.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

-------

Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
2024-04-25 15:59:10 -04:00
committed by GitHub
parent 0873dc2ffb
commit 6e8bf4914f
127 changed files with 1301 additions and 1301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,58 +4,58 @@
// --------------------------------------------------
/// @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);
/// @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;
/// @prop - Transform of the FAB button
$fab-ios-transform: scale(1.1) !default;
$fab-ios-transform: scale(1.1);
/// @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);
/// @prop - Transition of the activated FAB button
$fab-ios-transition-activated: .2s transform ease-out !default;
$fab-ios-transition-activated: .2s transform ease-out;
/// @prop - Background color of the button
$fab-ios-background-color: ion-color(primary, base) !default;
$fab-ios-background-color: ion-color(primary, base);
/// @prop - Background color of the activated button
$fab-ios-background-color-activated: ion-color(primary, shade) !default;
$fab-ios-background-color-activated: ion-color(primary, shade);
/// @prop - Text color of the button
$fab-ios-text-color: ion-color(primary, contrast) !default;
$fab-ios-text-color: ion-color(primary, contrast);
/// @prop - Font size of the button icon
$fab-ios-icon-font-size: 28px !default;
$fab-ios-icon-font-size: 28px;
/// @prop - Background color of the button in a list
$fab-ios-list-button-background-color: ion-color(light, base) !default;
$fab-ios-list-button-background-color: ion-color(light, base);
/// @prop - Background color of the activated button in a list
$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default;
$fab-ios-list-button-background-color-activated: ion-color(light, shade);
/// @prop - Background color of the hovered button in a list
$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default;
$fab-ios-list-button-background-color-hover: ion-color(light, tint);
/// @prop - Text color of the button in a list
$fab-ios-list-button-text-color: ion-color(light, contrast) !default;
$fab-ios-list-button-text-color: ion-color(light, contrast);
/// @prop - Font size of the button icon in a list
$fab-ios-list-button-icon-font-size: 18px !default;
$fab-ios-list-button-icon-font-size: 18px;
// Translucent FAB Button
// --------------------------------------------------
/// @prop - Backdrop filter of the translucent button
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;
$fab-ios-translucent-filter: saturate(180%) blur(20px);
/// @prop - Alpha level of the translucent button background
$fab-ios-translucent-background-alpha: .9 !default;
$fab-ios-translucent-background-alpha: .9;
/// @prop - Alpha level of the translucent button background on hover
$fab-ios-translucent-background-alpha-hover: .8 !default;
$fab-ios-translucent-background-alpha-hover: .8;
/// @prop - Alpha level of the translucent button background on focus
$fab-ios-translucent-background-alpha-focused: .82 !default;
$fab-ios-translucent-background-alpha-focused: .82;

20
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 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;
$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);
/// @prop - Box shadow of the activated FAB button
$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;
$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);
/// @prop - Background color of the button
$fab-md-background-color: ion-color(primary, base) !default;
$fab-md-background-color: ion-color(primary, base);
/// @prop - Text color of the button
$fab-md-text-color: ion-color(primary, contrast) !default;
$fab-md-text-color: ion-color(primary, contrast);
/// @prop - Font size of the button icon
$fab-md-icon-font-size: 24px !default;
$fab-md-icon-font-size: 24px;
/// @prop - Background color of the button in a list
$fab-md-list-button-background-color: ion-color(light, base) !default;
$fab-md-list-button-background-color: ion-color(light, base);
/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-activated: ion-color(light, shade) !default;
$fab-md-list-button-background-color-activated: ion-color(light, shade);
/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-hover: ion-color(light, tint) !default;
$fab-md-list-button-background-color-hover: ion-color(light, tint);
/// @prop - Text color of the button in a list
$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default;
$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54);
/// @prop - Font size of the button icon in a list
$fab-md-list-button-icon-font-size: 18px !default;
$fab-md-list-button-icon-font-size: 18px;

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

@ -4,13 +4,13 @@
// --------------------------------------------------
/// @prop - Width and height of the FAB button
$fab-size: 56px !default;
$fab-size: 56px;
/// @prop - Width and height of the mini FAB button
$fab-small-size: 40px !default;
$fab-small-size: 40px;
/// @prop - Border radius of the FAB button
$fab-border-radius: 50% !default;
$fab-border-radius: 50%;
/// @prop - Margin applied to the small FAB button
$fab-button-small-margin: 8px !default;
$fab-button-small-margin: 8px;