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

fix(theming): update components to use the proper colors for dark themes (#18735)

Browse Source 
references #18713
This commit is contained in:
Brandy Carney
2019-07-12 17:31:42 -04:00
committed by GitHub
parent 08af35aad2
commit 045bc59b75
25 changed files with 362 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/toggle/toggle.ios.scss
View File

@ -43,32 +43,13 @@
transition: background-color $toggle-ios-transition-duration;
background-color: $toggle-ios-border-color-off;
background-color: $toggle-ios-background-color-off;
overflow: hidden;
pointer-events: none;
}
// iOS Toggle Background Oval: Unchecked
// -----------------------------------------
.toggle-icon::before {
@include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width);
@include border-radius($toggle-ios-border-radius);
position: absolute;
transform: scale3d(1, 1, 1);
transition: transform $toggle-ios-transition-duration;
background: var(--background);
content: "";
}
// iOS Toggle Inner Knob: Unchecked
// -----------------------------------------

7
core/src/components/toggle/toggle.ios.vars.scss
View File

@ -17,10 +17,7 @@ $toggle-ios-border-width: 2px !default;
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
/// @prop - Background color of the unchecked toggle
$toggle-ios-background-color-off: $item-ios-background !default;
/// @prop - Border color of the unchecked toggle
$toggle-ios-border-color-off: $background-color-step-50 !default;
$toggle-ios-background-color-off: rgba($text-color-rgb, .088) !default;
/// @prop - Background color of the checked toggle
$toggle-ios-background-color-on: ion-color(primary, base) !default;
@ -38,7 +35,7 @@ $toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default;
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
/// @prop - Background color of the toggle handle
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
$toggle-ios-handle-background-color: #ffffff !default;
/// @prop - Margin of the toggle handle
$toggle-ios-media-margin: 0 !default;

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

@ -14,7 +14,7 @@ $toggle-md-track-width: 36px !default;
$toggle-md-track-height: 14px !default;
/// @prop - Background color of the toggle track
$toggle-md-track-background-color-off: ion-color(medium, tint) !default;
$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.3) !default;
/// @prop - Background color alpha of the checked toggle track
$toggle-md-track-background-color-alpha-on: .5 !default;
@ -35,7 +35,7 @@ $toggle-md-handle-border-radius: 50% !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-color !default;
$toggle-md-handle-background-color-off: #ffffff !default;
/// @prop - Background color of the checked toggle handle
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;