diff --git a/src/components/fab/fab.ios.scss b/src/components/fab/fab.ios.scss index 40995f3f02f..ff81d6be13b 100755 --- a/src/components/fab/fab.ios.scss +++ b/src/components/fab/fab.ios.scss @@ -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; } diff --git a/src/components/fab/fab.md.scss b/src/components/fab/fab.md.scss index 1586ae7aaaf..610e5789b22 100755 --- a/src/components/fab/fab.md.scss +++ b/src/components/fab/fab.md.scss @@ -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; } diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss index 65655478b45..fc77aee08ae 100755 --- a/src/components/fab/fab.scss +++ b/src/components/fab/fab.scss @@ -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 { diff --git a/src/components/fab/fab.wp.scss b/src/components/fab/fab.wp.scss index 3337cc07c16..f307b2a86f9 100755 --- a/src/components/fab/fab.wp.scss +++ b/src/components/fab/fab.wp.scss @@ -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; } diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss index e276da2f670..3bbedcae7c1 100644 --- a/src/components/input/input.ios.scss +++ b/src/components/input/input.ios.scss @@ -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 diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss index ca6827f9803..ae46558ae17 100644 --- a/src/components/input/input.md.scss +++ b/src/components/input/input.md.scss @@ -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 diff --git a/src/components/input/input.scss b/src/components/input/input.scss index bdb4929c5e5..ef6ddf7dc27 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -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 // -------------------------------------------------- diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss index 0852d59ca1c..01061ff1ab0 100644 --- a/src/components/input/input.wp.scss +++ b/src/components/input/input.wp.scss @@ -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 diff --git a/src/themes/ionic.functions.scss b/src/themes/ionic.functions.scss index 69760e76567..5be3b38170c 100644 --- a/src/themes/ionic.functions.scss +++ b/src/themes/ionic.functions.scss @@ -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 diff --git a/src/themes/ionic.theme.dark.ios.scss b/src/themes/ionic.theme.dark.ios.scss index b740f178b9e..a30e51cc75f 100644 --- a/src/themes/ionic.theme.dark.ios.scss +++ b/src/themes/ionic.theme.dark.ios.scss @@ -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; diff --git a/src/themes/ionic.theme.dark.md.scss b/src/themes/ionic.theme.dark.md.scss index a5cef293608..574b4fdcb88 100644 --- a/src/themes/ionic.theme.dark.md.scss +++ b/src/themes/ionic.theme.dark.md.scss @@ -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 diff --git a/src/themes/ionic.theme.dark.scss b/src/themes/ionic.theme.dark.scss index 2b7dde437f1..04b234d80b1 100644 --- a/src/themes/ionic.theme.dark.scss +++ b/src/themes/ionic.theme.dark.scss @@ -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; diff --git a/src/themes/ionic.theme.dark.wp.scss b/src/themes/ionic.theme.dark.wp.scss index 427f07e19d7..b127bdfd222 100644 --- a/src/themes/ionic.theme.dark.wp.scss +++ b/src/themes/ionic.theme.dark.wp.scss @@ -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