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

fix(sass): remove usage of colors other than primary, improve error (#8907)

Browse Source 
* fix(sass): remove usage of colors other than primary, improve error

fixes #8266

* refactor(sass): add variables to override all modes for fab and input

* refactor(fab): rename Sass variable from in-list to list-button

BREAKING CHANGE:

- `$fab-<mode>-in-list-background-color` ->
`$fab-<mode>-list-button-background-color`
- `$fab-<mode>-in-list-text-color` ->
`$fab-<mode>-list-button-text-color`
- `$fab-<mode>-in-list-background-color-activated` ->
`$fab-<mode>-list-button-background-color-activated`
This commit is contained in:
Brandy Carney
2016-11-07 11:41:10 -05:00
committed by Manu Mtz.-Almeida
parent a98284a0a6
commit eb0b05df88
13 changed files with 96 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/fab/fab.ios.scss
View File

@ -4,22 +4,23 @@
// --------------------------------------------------
/// @prop - Background color of the button
$fab-ios-background-color: color($colors-ios, primary) !default;
$fab-ios-background-color: color($colors-ios, primary) !default;
/// @prop - Text color of the button
$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default;
$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default;
/// @prop - Background color of the activated button
$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default;
$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default;
/// @prop - Background color of the button
$fab-ios-in-list-background-color: color($colors-ios, light) !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-background-color: $fab-list-button-background-color !default;
/// @prop - Text color of the button
$fab-ios-in-list-text-color: color-contrast($colors-ios, $fab-ios-in-list-background-color) !default;
/// @prop - Text color of the button in a list
$fab-ios-list-button-text-color: color-contrast($colors-ios, $fab-ios-list-button-background-color) !default;
/// @prop - Background color of the activated button in a list
$fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-button-background-color) !default;
/// @prop - Background color of the activated button
$fab-ios-in-list-background-color-activated: color-shade($fab-ios-in-list-background-color) !default;
.fab-ios {
color: $fab-ios-text-color;
@ -31,12 +32,12 @@ $fab-ios-in-list-background-color-activated: color-shade($fab-ios-in-list-backg
}
.fab-ios.fab-in-list {
color: $fab-ios-in-list-text-color;
background-color: $fab-ios-in-list-background-color;
color: $fab-ios-list-button-text-color;
background-color: $fab-ios-list-button-background-color;
}
.fab-ios.fab-in-list.activated {
background-color: $fab-ios-in-list-background-color-activated;
background-color: $fab-ios-list-button-background-color-activated;
}

28
src/components/fab/fab.md.scss
View File

@ -4,28 +4,28 @@
// --------------------------------------------------
/// @prop - Box shadow of the FAB button
$fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
$fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
/// @prop - Box shadow of the activated FAB button
$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
/// @prop - Background color of the button
$fab-md-background-color: color($colors-md, primary) !default;
$fab-md-background-color: color($colors-md, primary) !default;
/// @prop - Text color of the button
$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default;
$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default;
/// @prop - Background color of the activated button
$fab-md-background-color-activated: color-shade($fab-md-background-color) !default;
$fab-md-background-color-activated: color-shade($fab-md-background-color) !default;
/// @prop - Background color of the button
$fab-md-in-list-background-color: color($colors-md, light) !default;
/// @prop - Background color of the button in a list
$fab-md-list-button-background-color: $fab-list-button-background-color !default;
/// @prop - Text color of the button
$fab-md-in-list-text-color: color-contrast($colors-md, $fab-md-in-list-background-color) !default;
/// @prop - Text color of the button in a list
$fab-md-list-button-text-color: color-contrast($colors-md, $fab-md-list-button-background-color) !default;
/// @prop - Background color of the activated button
$fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-background-color) !default;
/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-activated: color-shade($fab-md-list-button-background-color) !default;
.fab-md {
@ -45,12 +45,12 @@ $fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-backgrou
}
.fab-md.fab-in-list {
color: $fab-md-in-list-text-color;
background-color: $fab-md-in-list-background-color;
color: $fab-md-list-button-text-color;
background-color: $fab-md-list-button-background-color;
}
.fab-md.fab-wp.fab-in-list.activated {
background-color: $fab-md-in-list-background-color-activated;
background-color: $fab-md-list-button-background-color-activated;
}

11
src/components/fab/fab.scss
View File

@ -4,16 +4,19 @@
// --------------------------------------------------
/// @prop - Width and height of the FAB button
$fab-size: 56px !default;
$fab-size: 56px !default;
/// @prop - Width and height of the FAB button mini
$fab-mini-size: 40px !default;
$fab-mini-size: 40px !default;
/// @prop - Margin of the FAB Container
$fab-content-margin: 10px !default;
$fab-content-margin: 10px !default;
/// @prop - Margin of the FAB List
$fab-list-margin: 10px !default;
$fab-list-margin: 10px !default;
/// @prop - Background color of the button in a list
$fab-list-button-background-color: #f4f4f4 !default;
.fab {

24
src/components/fab/fab.wp.scss
View File

@ -4,22 +4,22 @@
// --------------------------------------------------
/// @prop - Background color of the button
$fab-wp-background-color: color($colors-wp, primary) !default;
$fab-wp-background-color: color($colors-wp, primary) !default;
/// @prop - Text color of the button
$fab-wp-text-color: color-contrast($colors-wp, $fab-wp-background-color) !default;
$fab-wp-text-color: color-contrast($colors-wp, $fab-wp-background-color) !default;
/// @prop - Background color of the activated button
$fab-wp-background-color-activated: color-shade($fab-wp-background-color) !default;
$fab-wp-background-color-activated: color-shade($fab-wp-background-color) !default;
/// @prop - Background color of the button
$fab-wp-in-list-background-color: color($colors-wp, light) !default;
/// @prop - Background color of the button in a list
$fab-wp-list-button-background-color: $fab-list-button-background-color !default;
/// @prop - Text color of the button
$fab-wp-in-list-text-color: color-contrast($colors-wp, $fab-wp-in-list-background-color) !default;
/// @prop - Text color of the button in a list
$fab-wp-list-button-text-color: color-contrast($colors-wp, $fab-wp-list-button-background-color) !default;
/// @prop - Background color of the activated button
$fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-background-color) !default;
/// @prop - Background color of the activated button in a list
$fab-wp-list-button-background-color-activated: color-shade($fab-wp-list-button-background-color) !default;
.fab-wp {
@ -32,12 +32,12 @@ $fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-backgrou
}
.fab-wp.fab-in-list {
color: $fab-wp-in-list-text-color;
background-color: $fab-wp-in-list-background-color;
color: $fab-wp-list-button-text-color;
background-color: $fab-wp-list-button-background-color;
}
.fab-wp.fab-in-list.activated {
background-color: $fab-wp-in-list-background-color-activated;
background-color: $fab-wp-list-button-background-color-activated;
}

4
src/components/input/input.ios.scss
View File

@ -43,10 +43,10 @@ $text-input-ios-show-invalid-highlight: $text-input-ios-show-focus-highlight
$text-input-ios-highlight-color: color($colors-ios, primary) !default;
/// @prop - Color of the input highlight when valid
$text-input-ios-highlight-color-valid: color($colors-ios, secondary) !default;
$text-input-ios-highlight-color-valid: $text-input-highlight-color-valid !default;
/// @prop - Color of the input highlight when invalid
$text-input-ios-highlight-color-invalid: color($colors-ios, danger) !default;
$text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid !default;
// iOS Default Input

4
src/components/input/input.md.scss
View File

@ -43,10 +43,10 @@ $text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight
$text-input-md-highlight-color: color($colors-md, primary) !default;
/// @prop - Color of the input highlight when valid
$text-input-md-highlight-color-valid: color($colors-md, secondary) !default;
$text-input-md-highlight-color-valid: $text-input-highlight-color-valid !default;
/// @prop - Color of the input highlight when invalid
$text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
$text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid !default;
// Material Design Default Input

10
src/components/input/input.scss
View File

@ -1,5 +1,15 @@
@import "../../themes/ionic.globals";
// Input
// --------------------------------------------------
/// @prop - Color of the input highlight when valid
$text-input-highlight-color-valid: #32db64 !default;
/// @prop - Color of the input highlight when invalid
$text-input-highlight-color-invalid: #f53d3d !default;
// Input/Textarea Wrapper
// --------------------------------------------------

4
src/components/input/input.wp.scss
View File

@ -58,10 +58,10 @@ $text-input-wp-show-invalid-highlight: $text-input-wp-show-focus-highlight
$text-input-wp-highlight-color: color($colors-wp, primary) !default;
/// @prop - Color of the input highlight when valid
$text-input-wp-highlight-color-valid: color($colors-wp, secondary) !default;
$text-input-wp-highlight-color-valid: $text-input-highlight-color-valid !default;
/// @prop - Color of the input highlight when invalid
$text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default;
$text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid !default;
// Windows Default Input

32
src/themes/ionic.functions.scss
View File

@ -76,8 +76,8 @@
@return mix($shade, $color-value, $amount);
}
@function color-error($color-value) {
@error "
@function color-error($color-value, $color-name: null) {
$error-msg: "
The value `#{$color-value}` must be a color.
If you are setting the value as a map make sure
@ -90,7 +90,25 @@
secondary: (base: #32db64, contrast: #000),
);";
@return false;
// If there was a name passed it means the value doesn't exist
// so error that the value isn't defined
@if ($color-name) {
$error-msg: "
The map color `#{$color-name}` is not defined.
Please make sure the color exists in your
`$colors` map.
For example:
$colors: (
#{$color-name}: #327eff
);";
}
@error $error-msg;
@return null;
}
// Copy Colors Map
@ -162,8 +180,12 @@
}
}
// If it isn't a map then return the value
@return $color-value;
// If the value is a color then return the value
// otherwise we need to error with the name
@if (type-of($color-value) == color) {
@return $color-value;
}
@return color-error($color-value, $color-name);
}
// Get the color map key based on the value

4
src/themes/ionic.theme.dark.ios.scss
View File

@ -27,7 +27,7 @@ $card-ios-header-color: #ddd !default;
// iOS Note
// --------------------------------------------------
$item-ios-note-color: color($colors-ios, light) !default;
$item-ios-note-color: #f4f4f4 !default;
// iOS Toolbar
@ -72,4 +72,4 @@ $item-ios-padding-icon-bottom: 9px !default;
// iOS Toggle
// --------------------------------------------------
$toggle-ios-handle-background-color: color($colors-ios, light) !default;
$toggle-ios-handle-background-color: #f4f4f4 !default;

4
src/themes/ionic.theme.dark.md.scss
View File

@ -55,12 +55,12 @@ $item-md-padding-media-bottom: 9px !default;
$item-md-padding-icon-top: 11px !default;
$item-md-padding-icon-bottom: 10px !default;
$item-md-divider-background: #151515 !default;
$item-md-divider-color: color($colors-md, light) !default;
$item-md-divider-color: #f4f4f4 !default;
// Material Design Toggle
// ---------------------------------------------------
$toggle-md-handle-background-color-off: color($colors-md, light) !default;
$toggle-md-handle-background-color-off: #f4f4f4 !default;
// Ripple Color

2
src/themes/ionic.theme.dark.scss
View File

@ -27,7 +27,7 @@ $content-padding: 16px !default;
$content-margin: 16px !default;
$toolbar-background: #151515 !default;
$toolbar-border-color: color($colors, dark) !default;
$toolbar-border-color: #222 !default;
$toolbar-text-color: $text-color !default;
$toolbar-active-color: $link-color !default;
$toolbar-inactive-color: #8c8c8c !default;

4
src/themes/ionic.theme.dark.wp.scss
View File

@ -55,12 +55,12 @@ $item-wp-padding-media-bottom: 9px !default;
$item-wp-padding-icon-top: 11px !default;
$item-wp-padding-icon-bottom: 10px !default;
$item-wp-divider-background: #151515 !default;
$item-wp-divider-color: color($colors-wp, light) !default;
$item-wp-divider-color: #f4f4f4 !default;
// Windows Toggle
// ---------------------------------------------------
$toggle-wp-handle-background-color-off: color($colors-wp, light) !default;
$toggle-wp-handle-background-color-off: #f4f4f4 !default;
// Windows Input