Skip to content

Commit

Permalink
docs(input): add sass variable descriptions
Browse files Browse the repository at this point in the history
  • Loading branch information
@bul-ikana
bul-ikana committed Oct 29, 2016
1 parent 2076f2a commit c578506
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 0 deletions.
25 changes: 25 additions & 0 deletions src/components/input/input.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;


Expand Down
25 changes: 25 additions & 0 deletions src/components/input/input.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;


Expand Down
35 changes: 35 additions & 0 deletions src/components/input/input.wp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;


Expand Down

0 comments on commit c578506

Please sign in to comment.