From 2076f2ac50bf88fec37eba2d4f451225b5531e9d Mon Sep 17 00:00:00 2001 From: Hugo Aguirre Date: Fri, 28 Oct 2016 19:14:48 -0500 Subject: [PATCH 1/2] docs(datetime): add sass variable descriptions --- src/components/datetime/datetime.ios.scss | 7 +++++++ src/components/datetime/datetime.md.scss | 7 +++++++ src/components/datetime/datetime.wp.scss | 11 +++++++++++ 3 files changed, 25 insertions(+) diff --git a/src/components/datetime/datetime.ios.scss b/src/components/datetime/datetime.ios.scss index eb38a27825c..07a145b0a72 100644 --- a/src/components/datetime/datetime.ios.scss +++ b/src/components/datetime/datetime.ios.scss @@ -3,9 +3,16 @@ // iOS DateTime // -------------------------------------------------- +/// @prop - Padding top of the DateTime component $datetime-ios-padding-top: $item-ios-padding-top !default; + +/// @prop - Padding right of the DateTime component $datetime-ios-padding-right: ($item-ios-padding-right / 2) !default; + +/// @prop - Padding bottom of the DateTime component $datetime-ios-padding-bottom: $item-ios-padding-bottom !default; + +/// @prop - Padding left of the DateTime component $datetime-ios-padding-left: $item-ios-padding-left !default; diff --git a/src/components/datetime/datetime.md.scss b/src/components/datetime/datetime.md.scss index 590599d6e55..24fa4fa9946 100644 --- a/src/components/datetime/datetime.md.scss +++ b/src/components/datetime/datetime.md.scss @@ -3,9 +3,16 @@ // Material Design DateTime // -------------------------------------------------- +/// @prop - Padding top of the DateTime component $datetime-md-padding-top: $item-md-padding-top !default; + +/// @prop - Padding right of the DateTime component $datetime-md-padding-right: ($item-md-padding-right / 2) !default; + +/// @prop - Padding bottom of the DateTime component $datetime-md-padding-bottom: $item-md-padding-bottom !default; + +/// @prop - Padding left of the DateTime component $datetime-md-padding-left: $item-md-padding-left !default; diff --git a/src/components/datetime/datetime.wp.scss b/src/components/datetime/datetime.wp.scss index de7c0ed9d05..4a4fba1c6fb 100644 --- a/src/components/datetime/datetime.wp.scss +++ b/src/components/datetime/datetime.wp.scss @@ -3,14 +3,25 @@ // Windows DateTime // -------------------------------------------------- +/// @prop - Min width of the DateTime component $datetime-wp-min-width: 45% !default; +/// @prop - Padding top of the DateTime component $datetime-wp-padding-top: $item-wp-padding-top !default; + +/// @prop - Padding right of the DateTime component $datetime-wp-padding-right: ($item-wp-padding-right / 2) !default; + +/// @prop - Padding bottom of the DateTime component $datetime-wp-padding-bottom: $item-wp-padding-bottom !default; + +/// @prop - Padding left of the DateTime component $datetime-wp-padding-left: $item-wp-padding-left !default; +/// @prop - Border width of the DateTime component $datetime-wp-border-width: 2px !default; + +/// @prop - Border color of the DateTime component $datetime-wp-border-color: $input-wp-border-color !default; .datetime-wp { From c5785061fd0f34088f4a13f16b0591e905974af5 Mon Sep 17 00:00:00 2001 From: Hugo Aguirre Date: Fri, 28 Oct 2016 20:52:59 -0500 Subject: [PATCH 2/2] docs(input): add sass variable descriptions --- src/components/input/input.ios.scss | 25 +++++++++++++++++++++ src/components/input/input.md.scss | 25 +++++++++++++++++++++ src/components/input/input.wp.scss | 35 +++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+) diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss index a968e7f5aa9..e276da2f670 100644 --- a/src/components/input/input.ios.scss +++ b/src/components/input/input.ios.scss @@ -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: "" !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; diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss index 10f12a1a50e..ca6827f9803 100644 --- a/src/components/input/input.md.scss +++ b/src/components/input/input.md.scss @@ -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: "" !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; diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss index 442b954adfb..0852d59ca1c 100644 --- a/src/components/input/input.wp.scss +++ b/src/components/input/input.wp.scss @@ -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: "" !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;