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

docs(input): add sass variable descriptions

Browse Source
This commit is contained in:
Hugo Aguirre
2016-10-28 21:32:34 -05:00
parent 2003ae48d5
commit c327955a75
3 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,24 +3,49 @@
// iOS Input
// --------------------------------------------------
/// @prop - Background color of the input
$text-input-ios-background-color: $list-ios-background-color !default;
/// @prop - Margin top of the input
$text-input-ios-margin-top: $item-ios-padding-top !default;
/// @prop - Margin right of the input
$text-input-ios-margin-right: ($item-ios-padding-right / 2) !default;
/// @prop - Margin bottom of the input
$text-input-ios-margin-bottom: $item-ios-padding-bottom !default;
/// @prop - Margin left of the input
$text-input-ios-margin-left: 0 !default;
/// @prop - Width of the icon used to clear the input
$text-input-ios-input-clear-icon-width: 30px !default;
/// @prop - Color of the icon used to clear the input
$text-input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default;
/// @prop - Icon used to clear the input
$text-input-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $text-input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
/// @prop - Size of the icon used to clear the input
$text-input-ios-input-clear-icon-size: 18px !default;
/// @prop - Show the focus highlight when the input has focus
$text-input-ios-show-focus-highlight: false !default;
/// @prop - Show the valid highlight when it is valid and has a value
$text-input-ios-show-valid-highlight: $text-input-ios-show-focus-highlight !default;
/// @prop - Show the invalid highlight when it is invalid and has value
$text-input-ios-show-invalid-highlight: $text-input-ios-show-focus-highlight !default;
/// @prop - Color of the input 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;
/// @prop - Color of the input highlight when invalid
$text-input-ios-highlight-color-invalid: color($colors-ios, danger) !default;

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

@ -3,24 +3,49 @@
// Material Design Input
// --------------------------------------------------
/// @prop - Background color of the input
$text-input-md-background-color: $list-md-background-color !default;
/// @prop - Margin top of the input
$text-input-md-margin-top: $item-md-padding-top !default;
/// @prop - Margin right of the input
$text-input-md-margin-right: ($item-md-padding-right / 2) !default;
/// @prop - Margin bottom of the input
$text-input-md-margin-bottom: $item-md-padding-bottom !default;
/// @prop - Margin left of the input
$text-input-md-margin-left: ($item-md-padding-left / 2) !default;
/// @prop - Width of the icon used to clear the input
$text-input-md-input-clear-icon-width: 30px !default;
/// @prop - Color of the icon used to clear the input
$text-input-md-input-clear-icon-color: #5b5b5b !default;
/// @prop - Icon used to clear the input
$text-input-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
/// @prop - Size of the icon used to clear the input
$text-input-md-input-clear-icon-size: 22px !default;
/// @prop - Show the focus highlight when the input has focus
$text-input-md-show-focus-highlight: true !default;
/// @prop - Show the valid highlight when it is valid and has a value
$text-input-md-show-valid-highlight: $text-input-md-show-focus-highlight !default;
/// @prop - Show the invalid highlight when it is invalid and has value
$text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight !default;
/// @prop - Color of the input 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;
/// @prop - Color of the input highlight when invalid
$text-input-md-highlight-color-invalid: color($colors-md, danger) !default;

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

@ -3,29 +3,64 @@
// Windows Input
// --------------------------------------------------
/// @prop - Background color of the input
$text-input-wp-background-color: $list-wp-background-color !default;
/// @prop - Border color of the input
$text-input-wp-border-color: $input-wp-border-color !default;
/// @prop - Border width of the input
$text-input-wp-border-width: 2px !default;
/// @prop - Margin top of the input
$text-input-wp-margin-top: $item-wp-padding-top !default;
/// @prop - Margin right of the input
$text-input-wp-margin-right: ($item-wp-padding-right / 2) !default;
/// @prop - Margin bottom of the input
$text-input-wp-margin-bottom: $item-wp-padding-bottom !default;
/// @prop - Margin left of the input
$text-input-wp-margin-left: ($item-wp-padding-left / 2) !default;
/// @prop - Vertical padding of the input
$text-input-wp-padding-vertical: 0 !default;
/// @prop - Horizontal padding of the input
$text-input-wp-padding-horizontal: 8px !default;
/// @prop - Line height of the input
$text-input-wp-line-height: 3rem !default;
/// @prop - Width of the icon used to clear the input
$text-input-wp-input-clear-icon-width: 30px !default;
/// @prop - Color of the icon used to clear the input
$text-input-wp-input-clear-icon-color: $input-wp-border-color !default;
/// @prop - Icon used to clear the input
$text-input-wp-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-wp-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
/// @prop - Size of the icon used to clear the input
$text-input-wp-input-clear-icon-size: 22px !default;
/// @prop - Show the focus highlight when the input has focus
$text-input-wp-show-focus-highlight: true !default;
/// @prop - Show the valid highlight when it is valid and has a value
$text-input-wp-show-valid-highlight: $text-input-wp-show-focus-highlight !default;
/// @prop - Show the invalid highlight when it is invalid and has value
$text-input-wp-show-invalid-highlight: $text-input-wp-show-focus-highlight !default;
/// @prop - Color of the input 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;
/// @prop - Color of the input highlight when invalid
$text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default;