javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +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

61
core/src/components/toggle/toggle.md.vars.scss
View File

@ -6,88 +6,91 @@
// --------------------------------------------------
/// @prop - Color of the active toggle
$toggle-md-active-color: ion-color($colors-md, primary, base, md) !default;
$toggle-md-active-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Width of the toggle track
$toggle-md-track-width: 36px !default;
$toggle-md-track-width: 36px !default;
/// @prop - Height of the toggle track
$toggle-md-track-height: 14px !default;
$toggle-md-track-height: 14px !default;
/// @prop - Background color of the toggle track
$toggle-md-track-background-color-off: $item-md-border-color !default;
$toggle-md-track-background-color-off: $item-md-border-color !default;
/// @prop - Background color alpha of the checked toggle track
$toggle-md-track-background-color-alpha-on: .5 !default;
/// @prop - Background color of the checked toggle track
$toggle-md-track-background-color-on: ion-color($colors-md, primary, base, md, $alpha-md-medium) !default;
$toggle-md-track-background-color-on: ion-color($colors-md, primary, base, md, $toggle-md-track-background-color-alpha-on) !default;
/// @prop - Width of the toggle handle
$toggle-md-handle-width: 20px !default;
$toggle-md-handle-width: 20px !default;
/// @prop - Height of the toggle handle
$toggle-md-handle-height: 20px !default;
$toggle-md-handle-height: 20px !default;
/// @prop - Border radius of the toggle handle
$toggle-md-handle-border-radius: 50% !default;
$toggle-md-handle-border-radius: 50% !default;
/// @prop - Box shadow of the toggle handle
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
/// @prop - Background color of the toggle handle
$toggle-md-handle-background-color-off: $background-md-color !default;
$toggle-md-handle-background-color-off: $background-md-color !default;
/// @prop - Background color of the checked toggle handle
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
/// @prop - Margin top of the toggle
$toggle-md-media-margin-top: 0 !default;
$toggle-md-media-margin-top: 0 !default;
/// @prop - Margin end of the toggle
$toggle-md-media-margin-end: $toggle-md-media-margin-top !default;
$toggle-md-media-margin-end: $toggle-md-media-margin-top !default;
/// @prop - Margin bottom of the toggle
$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default;
$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default;
/// @prop - Margin start of the toggle
$toggle-md-media-margin-start: $toggle-md-media-margin-end !default;
$toggle-md-media-margin-start: $toggle-md-media-margin-end !default;
/// @prop - Transition duration of the toggle icon
$toggle-md-transition-duration: 300ms !default;
$toggle-md-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-md-disabled-opacity: .3 !default;
$toggle-md-disabled-opacity: .3 !default;
/// @prop - Padding top of standalone toggle
$toggle-md-padding-top: 12px !default;
$toggle-md-padding-top: 12px !default;
/// @prop - Padding end of standalone toggle
$toggle-md-padding-end: $toggle-md-padding-top !default;
$toggle-md-padding-end: $toggle-md-padding-top !default;
/// @prop - Padding bottom of standalone toggle
$toggle-md-padding-bottom: $toggle-md-padding-top !default;
$toggle-md-padding-bottom: $toggle-md-padding-top !default;
/// @prop - Padding start of standalone toggle
$toggle-md-padding-start: $toggle-md-padding-end !default;
$toggle-md-padding-start: $toggle-md-padding-end !default;
/// @prop - Padding top of the toggle positioned on the start in an item
$toggle-md-item-start-padding-top: 12px !default;
$toggle-md-item-start-padding-top: 12px !default;
/// @prop - Padding end of the toggle positioned on the start in an item
$toggle-md-item-start-padding-end: 18px !default;
$toggle-md-item-start-padding-end: 18px !default;
/// @prop - Padding bottom of the toggle positioned on the start in an item
$toggle-md-item-start-padding-bottom: 12px !default;
$toggle-md-item-start-padding-bottom: 12px !default;
/// @prop - Padding start the toggle positioned on the start in an item
$toggle-md-item-start-padding-start: 2px !default;
$toggle-md-item-start-padding-start: 2px !default;
/// @prop - Padding top of the toggle positioned on the end in an item
$toggle-md-item-end-padding-top: 12px !default;
$toggle-md-item-end-padding-top: 12px !default;
/// @prop - Padding end of the toggle positioned on the end in an item
$toggle-md-item-end-padding-end: ($item-md-padding-end / 2) !default;
$toggle-md-item-end-padding-end: ($item-md-padding-end / 2) !default;
/// @prop - Padding bottom of the toggle positioned on the end in an item
$toggle-md-item-end-padding-bottom: 12px !default;
$toggle-md-item-end-padding-bottom: 12px !default;
/// @prop - Padding start of the toggle positioned on the end in an item
$toggle-md-item-end-padding-start: $item-md-padding-start !default;
$toggle-md-item-end-padding-start: $item-md-padding-start !default;