mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
6e8bf4914f
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>
51 lines
1.8 KiB
SCSS
51 lines
1.8 KiB
SCSS
@import "../../themes/ionic.globals.ios";
|
|
@import "../item/item.ios.vars";
|
|
|
|
// iOS Toggle
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Width of the toggle
|
|
$toggle-ios-width: 51px;
|
|
|
|
/// @prop - Height of the toggle
|
|
$toggle-ios-height: 31px;
|
|
|
|
/// @prop - Border width of the toggle
|
|
$toggle-ios-border-width: 2px;
|
|
|
|
/// @prop - Border radius of the toggle
|
|
$toggle-ios-border-radius: $toggle-ios-height * 0.5;
|
|
|
|
/// @prop - Background color of the unchecked toggle
|
|
$toggle-ios-background-color-off: rgba($text-color-rgb, .088);
|
|
|
|
/// @prop - Width of the toggle handle
|
|
$toggle-ios-handle-width: calc(#{$toggle-ios-height} - (#{$toggle-ios-border-width} * 2));
|
|
|
|
/// @prop - Height of the toggle handle
|
|
$toggle-ios-handle-height: $toggle-ios-handle-width;
|
|
|
|
/// @prop - Max height of the toggle handle
|
|
$toggle-ios-handle-max-height: calc(100% - (var(--handle-spacing) * 2));
|
|
|
|
/// @prop - Border radius of the toggle handle
|
|
$toggle-ios-handle-border-radius: $toggle-ios-width * 0.5;
|
|
|
|
/// @prop - Box shadow of the toggle handle
|
|
$toggle-ios-handle-box-shadow: 0 3px 4px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .06);
|
|
|
|
/// @prop - Background color of the toggle handle
|
|
$toggle-ios-handle-background-color: #ffffff;
|
|
|
|
/// @prop - Transition duration of the toggle icon
|
|
$toggle-ios-transition-duration: 300ms;
|
|
|
|
/// @prop - Transition of the toggle icon
|
|
$toggle-ios-transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;
|
|
|
|
/// @prop - Opacity of the disabled toggle
|
|
$toggle-ios-disabled-opacity: .3;
|
|
|
|
/// @prop - The text color of the on/off labels when the toggle is checked
|
|
$toggle-ios-on-off-label-checked-color: #fff;
|