javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(sass): add documentation for the remaining sass variables

Browse Source 
closes #8785
This commit is contained in:
Brandy Carney
2016-12-02 17:51:56 -05:00
parent 81a0969530
commit 660d53101f
30 changed files with 455 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/action-sheet/action-sheet.ios.scss
View File

@ -36,7 +36,7 @@ $action-sheet-ios-title-font-weight: 400 !default;
/// @prop - Border radius of the action sheet title
$action-sheet-ios-title-border-radius: 0 !default;
/// @prop - Min height of the action sheet button
/// @prop - Minimum height of the action sheet button
$action-sheet-ios-button-min-height: 5.6rem !default;
/// @prop - Padding of the action sheet button

2
src/components/action-sheet/action-sheet.md.scss
View File

@ -21,7 +21,7 @@ $action-sheet-md-title-font-size: 1.6rem !default;
/// @prop - Padding of the action sheet title
$action-sheet-md-title-padding: 11px 16px 17px !default;
/// @prop - Min height of the action sheet button
/// @prop - Minimum height of the action sheet button
$action-sheet-md-button-min-height: 4.8rem !default;
/// @prop - Text color of the action sheet button

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

@ -51,7 +51,7 @@ $alert-ios-message-text-color: inherit !default;
/// @prop - Padding of the alert empty message
$alert-ios-message-padding-empty: 0 0 12px 0 !default;
/// @prop - Max height of the alert content
/// @prop - Maximum height of the alert content
$alert-ios-content-max-height: 240px !default;
/// @prop - Margin top of the alert input
@ -84,7 +84,7 @@ $alert-ios-button-margin: 0 !default;
/// @prop - Min width of the alert button
$alert-ios-button-min-width: 50% !default;
/// @prop - Min height of the alert button
/// @prop - Minimum height of the alert button
$alert-ios-button-min-height: 44px !default;
/// @prop - Font size of the alert button

2
src/components/alert/alert.md.scss
View File

@ -42,7 +42,7 @@ $alert-md-message-text-color: rgba(0, 0, 0, .5) !default;
/// @prop - Padding of the alert empty message
$alert-md-message-padding-empty: 0 !default;
/// @prop - Max height of the alert content
/// @prop - Maximum height of the alert content
$alert-md-content-max-height: 240px !default;
/// @prop - Border width of the alert input

2
src/components/alert/alert.wp.scss
View File

@ -54,7 +54,7 @@ $alert-wp-message-text-color: #000 !default;
/// @prop - Font size of the alert message
$alert-wp-message-font-size: 13px !default;
/// @prop - Max height of the alert content
/// @prop - Maximum height of the alert content
$alert-wp-content-max-height: 240px !default;
/// @prop - Margin of the alert input

2
src/components/loading/loading.ios.scss
View File

@ -9,7 +9,7 @@ $loading-ios-padding: 24px 34px !default;
/// @prop - Max width of the loading wrapper
$loading-ios-max-width: 270px !default;
/// @prop - Max height of the loading wrapper
/// @prop - Maximum height of the loading wrapper
$loading-ios-max-height: 90% !default;
/// @prop - Border radius of the loading wrapper

2
src/components/loading/loading.md.scss
View File

@ -9,7 +9,7 @@ $loading-md-padding: 24px !default;
/// @prop - Max width of the loading wrapper
$loading-md-max-width: 280px !default;
/// @prop - Max height of the loading wrapper
/// @prop - Maximum height of the loading wrapper
$loading-md-max-height: 90% !default;
/// @prop - Border radius of the loading wrapper

2
src/components/loading/loading.wp.scss
View File

@ -9,7 +9,7 @@ $loading-wp-padding: 20px !default;
/// @prop - Max width of the loading wrapper
$loading-wp-max-width: 280px !default;
/// @prop - Max height of the loading wrapper
/// @prop - Maximum height of the loading wrapper
$loading-wp-max-height: 90% !default;
/// @prop - Border radius of the loading wrapper

4
src/components/modal/modal.scss
View File

@ -6,10 +6,10 @@
/// @prop - Min width of the modal inset
$modal-inset-min-width: 768px !default;
/// @prop - Min height of the small modal inset
/// @prop - Minimum height of the small modal inset
$modal-inset-min-height-small: 600px !default;
/// @prop - Min height of the large modal inset
/// @prop - Minimum height of the large modal inset
$modal-inset-min-height-large: 768px !default;
/// @prop - Width of the large modal inset

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

@ -9,10 +9,10 @@ $popover-ios-width: 200px !default;
/// @prop - Min width of the popover content
$popover-ios-min-width: 0 !default;
/// @prop - Min height of the popover content
/// @prop - Minimum height of the popover content
$popover-ios-min-height: 0 !default;
/// @prop - Max height of the popover content
/// @prop - Maximum height of the popover content
$popover-ios-max-height: 90% !default;
/// @prop - Border radius of the popover content

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

@ -9,10 +9,10 @@ $popover-md-width: 250px !default;
/// @prop - Min width of the popover content
$popover-md-min-width: 0 !default;
/// @prop - Min height of the popover content
/// @prop - Minimum height of the popover content
$popover-md-min-height: 0 !default;
/// @prop - Max height of the popover content
/// @prop - Maximum height of the popover content
$popover-md-max-height: 90% !default;
/// @prop - Border radius of the popover content

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

@ -9,10 +9,10 @@ $popover-wp-width: 200px !default;
/// @prop - Min width of the popover content
$popover-wp-min-width: 0 !default;
/// @prop - Min height of the popover content
/// @prop - Minimum height of the popover content
$popover-wp-min-height: 0 !default;
/// @prop - Max height of the popover content
/// @prop - Maximum height of the popover content
$popover-wp-max-height: 90% !default;
/// @prop - Border of the popover content

37
src/components/range/range.ios.scss
View File

@ -3,33 +3,70 @@
// iOS Range
// --------------------------------------------------
/// @prop - Padding top/bottom of the range
$range-ios-padding-vertical: 8px !default;
/// @prop - Padding left/right of the range
$range-ios-padding-horizontal: 16px !default;
/// @prop - Height of the range slider
$range-ios-slider-height: 42px !default;
/// @prop - Width of the area that will select the range knob
$range-ios-hit-width: 42px !default;
/// @prop - Height of the area that will select the range knob
$range-ios-hit-height: $range-ios-slider-height !default;
/// @prop - Height of the range bar
$range-ios-bar-height: 1px !default;
/// @prop - Background of the range bar
$range-ios-bar-background-color: #bdbdbd !default;
/// @prop - Background of the active range bar
$range-ios-bar-active-background-color: color($colors-ios, primary) !default;
/// @prop - Width of the range knob
$range-ios-knob-width: 28px !default;
/// @prop - Height of the range knob
$range-ios-knob-height: $range-ios-knob-width !default;
/// @prop - Box shadow of the range knob
$range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02) !default;
/// @prop - Border radius of the range knob
$range-ios-knob-border-radius: 50% !default;
/// @prop - Background of the range knob
$range-ios-knob-background-color: #fff !default;
/// @prop - Width of the range tick
$range-ios-tick-width: $range-ios-bar-height !default;
/// @prop - Height of the range tick
$range-ios-tick-height: 8px !default;
/// @prop - Border radius of the range tick
$range-ios-tick-border-radius: 0 !default;
/// @prop - Background of the range tick
$range-ios-tick-background-color: $range-ios-bar-background-color !default;
/// @prop - Background of the active range tick
$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default;
/// @prop - Background of the range pin
$range-ios-pin-background-color: transparent !default;
/// @prop - Color of the range pin
$range-ios-pin-color: $text-ios-color !default;
/// @prop - Font size of the range pin
$range-ios-pin-font-size: 12px !default;
/// @prop - Padding of the range pin
$range-ios-pin-padding: 8px !default;

39
src/components/range/range.md.scss
View File

@ -3,37 +3,76 @@
// Material Design Range
// --------------------------------------------------
/// @prop - Padding top/bottom of the range
$range-md-padding-vertical: 8px !default;
/// @prop - Padding left/right of the range
$range-md-padding-horizontal: 8px !default;
/// @prop - Height of the range slider
$range-md-slider-height: 42px !default;
/// @prop - Width of the area that will select the range knob
$range-md-hit-width: 42px !default;
/// @prop - Height of the area that will select the range knob
$range-md-hit-height: $range-md-slider-height !default;
/// @prop - Height of the range bar
$range-md-bar-height: 2px !default;
/// @prop - Background of the range bar
$range-md-bar-background-color: #bdbdbd !default;
/// @prop - Background of the active range bar
$range-md-bar-active-background-color: color($colors-md, primary) !default;
/// @prop - Width of the range knob
$range-md-knob-width: 18px !default;
/// @prop - Height of the range knob
$range-md-knob-height: $range-md-knob-width !default;
/// @prop - Background of the range knob
$range-md-knob-background-color: $range-md-bar-active-background-color !default;
/// @prop - Background of the range knob when the value is the minimum
$range-md-knob-min-background-color: $background-md-color !default;
/// @prop - Border of the range knob when the value is the minimum
$range-md-knob-min-border: 2px solid $range-md-bar-background-color !default;
/// @prop - Width of the range tick
$range-md-tick-width: 2px !default;
/// @prop - Height of the range tick
$range-md-tick-height: $range-md-tick-width !default;
/// @prop - Border radius of the range tick
$range-md-tick-border-radius: 50% !default;
/// @prop - Background of the range tick
$range-md-tick-background-color: #000 !default;
/// @prop - Background of the active range tick
$range-md-tick-active-background-color: $range-md-tick-background-color !default;
/// @prop - Background of the range pin
$range-md-pin-background-color: $range-md-bar-active-background-color !default;
/// @prop - Color of the range pin
$range-md-pin-color: color-contrast($colors-md, $range-md-bar-active-background-color) !default;
/// @prop - Font size of the range pin
$range-md-pin-font-size: 12px !default;
/// @prop - Padding top/bottom of the range pin
$range-md-pin-padding-vertical: 8px !default;
/// @prop - Padding left/right of the range pin
$range-md-pin-padding-horizontal: 0 !default;
/// @prop - Background of the range pin when the value is the minimum
$range-md-pin-min-background-color: $range-md-bar-background-color !default;

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

@ -3,32 +3,67 @@
// Windows Range
// --------------------------------------------------
/// @prop - Padding top/bottom of the range
$range-wp-padding-vertical: 8px !default;
/// @prop - Padding left/right of the range
$range-wp-padding-horizontal: 8px !default;
/// @prop - Height of the range slider
$range-wp-slider-height: 42px !default;
/// @prop - Width of the area that will select the range knob
$range-wp-hit-width: 42px !default;
/// @prop - Height of the area that will select the range knob
$range-wp-hit-height: $range-wp-slider-height !default;
/// @prop - Height of the range bar
$range-wp-bar-height: 2px !default;
/// @prop - Background of the range bar
$range-wp-bar-background-color: #bdbdbd !default;
/// @prop - Background of the active range bar
$range-wp-bar-active-background-color: color($colors-wp, primary) !default;
/// @prop - Width of the range knob
$range-wp-knob-width: 8px !default;
/// @prop - Height of the range knob
$range-wp-knob-height: $range-wp-knob-width * 3 !default;
/// @prop - Background of the range knob
$range-wp-knob-background-color: $range-wp-bar-active-background-color !default;
/// @prop - Border radius of the range knob
$range-wp-knob-border-radius: $range-wp-knob-width / 2 !default;
/// @prop - Width of the range tick
$range-wp-tick-width: $range-wp-bar-height !default;
/// @prop - Height of the range tick
$range-wp-tick-height: $range-wp-tick-width * 3 !default;
/// @prop - Border radius of the range tick
$range-wp-tick-border-radius: $range-wp-knob-width / 2 !default;
/// @prop - Background of the range tick
$range-wp-tick-background-color: $range-wp-bar-background-color !default;
/// @prop - Background of the active range tick
$range-wp-tick-active-background-color: $range-wp-bar-active-background-color !default;
/// @prop - Background of the range pin
$range-wp-pin-background-color: $range-wp-bar-active-background-color !default;
/// @prop - Color of the range pin
$range-wp-pin-color: color-contrast($colors-wp, $range-wp-bar-active-background-color) !default;
/// @prop - Font size of the range pin
$range-wp-pin-font-size: 12px !default;
/// @prop - Padding of the range pin
$range-wp-pin-padding: 8px !default;

38
src/components/searchbar/searchbar.ios.scss
View File

@ -3,34 +3,66 @@
// iOS Searchbar
// --------------------------------------------------
$searchbar-ios-padding-top-bottom: 0 !default;
$searchbar-ios-padding-left-right: 8px !default;
/// @prop - Padding top/bottom of the searchbar
$searchbar-ios-padding-vertical: 0 !default;
/// @prop - Padding left/right of the searchbar
$searchbar-ios-padding-horizontal: 8px !default;
/// @prop - Background of the searchbar
$searchbar-ios-background-color: rgba(0, 0, 0, .2) !default;
/// @prop - Border color of the searchbar
$searchbar-ios-border-color: rgba(0, 0, 0, .05) !default;
/// @prop - Minimum height of the searchbar
$searchbar-ios-min-height: 44px !default;
/// @prop - Color of the searchbar input search icon
$searchbar-ios-input-search-icon-color: rgba(0, 0, 0, .5) !default;
/// @prop - Svg for the searchbar input search icon
$searchbar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
/// @prop - Size of the searchbar input search icon
$searchbar-ios-input-search-icon-size: 13px !default;
/// @prop - Height of the searchbar input
$searchbar-ios-input-height: 3rem !default;
/// @prop - Color of the searchbar input placeholder
$searchbar-ios-input-placeholder-color: rgba(0, 0, 0, .5) !default;
/// @prop - Color of the searchbar input text
$searchbar-ios-input-text-color: #000 !default;
/// @prop - Background of the searchbar input
$searchbar-ios-input-background-color: #fff !default;
/// @prop - Transition of the searchbar input
$searchbar-ios-input-transition: all 300ms ease !default;
/// @prop - Transition of the searchbar input cancel button
$searchbar-ios-cancel-transition: all 300ms ease !default;
/// @prop - Color of the searchbar input clear icon
$searchbar-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default;
/// @prop - Svg for the searchbar input clear icon
$searchbar-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-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 searchbar input clear icon
$searchbar-ios-input-clear-icon-size: 18px !default;
/// @prop - Background of the searchbar input inside of a toolbar
$searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
// Searchbar
// -----------------------------------------
.searchbar-ios {
padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
padding: $searchbar-ios-padding-vertical $searchbar-ios-padding-horizontal;
min-height: $searchbar-ios-min-height;

26
src/components/searchbar/searchbar.md.scss
View File

@ -3,23 +3,49 @@
// Material Design Searchbar
// --------------------------------------------------
/// @prop - Padding of the searchbar
$searchbar-md-padding: 8px !default;
/// @prop - Background of the searchbar
$searchbar-md-background-color: inherit !default;
/// @prop - Color of the searchbar input search icon
$searchbar-md-input-search-icon-color: #5b5b5b !default;
/// @prop - Svg for the searchbar input search icon
$searchbar-md-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
/// @prop - Size of the searchbar input search icon
$searchbar-md-input-search-icon-size: 20px !default;
/// @prop - Height of the searchbar input
$searchbar-md-input-height: auto !default;
/// @prop - Line height of the searchbar input
$searchbar-md-input-line-height: 3rem !default;
/// @prop - Box shadow of the searchbar input
$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
/// @prop - Color of the searchbar input placeholder
$searchbar-md-input-placeholder-color: #aeaeae !default;
/// @prop - Color of the searchbar input text
$searchbar-md-input-text-color: #141414 !default;
/// @prop - Background of the searchbar input
$searchbar-md-input-background-color: #fff !default;
/// @prop - Border radius of the searchbar input
$searchbar-md-input-border-radius: 2px !default;
/// @prop - Color of the searchbar input clear icon
$searchbar-md-input-clear-icon-color: #5b5b5b !default;
/// @prop - Svg for the searchbar input clear icon
$searchbar-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-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 searchbar input clear icon
$searchbar-md-input-clear-icon-size: 22px !default;

38
src/components/searchbar/searchbar.wp.scss
View File

@ -3,29 +3,67 @@
// Windows Searchbar
// --------------------------------------------------
/// @prop - Padding of the searchbar
$searchbar-wp-padding: 8px !default;
/// @prop - Background of the searchbar
$searchbar-wp-background-color: transparent !default;
/// @prop - Border width of the searchbar
$searchbar-wp-border-width: 2px !default;
/// @prop - Border color of the searchbar
$searchbar-wp-border-color: $input-wp-border-color !default;
/// @prop - Border color of the searchbar on focus
$searchbar-wp-border-color-focused: color($colors-wp, primary) !default;
/// @prop - Color of the searchbar input search icon
$searchbar-wp-input-search-icon-color: #858585 !default;
/// @prop - Svg for the searchbar input search icon
$searchbar-wp-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-wp-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
/// @prop - Size of the searchbar input search icon
$searchbar-wp-input-search-icon-size: 20px !default;
/// @prop - Padding top/bottom of the searchbar input
$searchbar-wp-input-padding-vertical: 0 !default;
/// @prop - Padding left/right of the searchbar input
$searchbar-wp-input-padding-horizontal: 8px !default;
/// @prop - Height of the searchbar input
$searchbar-wp-input-height: auto !default;
/// @prop - Line height of the searchbar input
$searchbar-wp-input-line-height: 3rem !default;
/// @prop - Color of the searchbar input placeholder
$searchbar-wp-input-placeholder-color: #858585 !default;
/// @prop - Color of the searchbar input text
$searchbar-wp-input-text-color: #141414 !default;
/// @prop - Background of the searchbar input
$searchbar-wp-input-background-color: #fff !default;
/// @prop - Border radius of the searchbar input
$searchbar-wp-input-border-radius: 0 !default;
/// @prop - Font size of the searchbar input
$searchbar-wp-input-font-size: 1.4rem !default;
/// @prop - Font weight of the searchbar input
$searchbar-wp-input-font-weight: 400 !default;
/// @prop - Color of the searchbar input clear icon
$searchbar-wp-input-clear-icon-color: #858585 !default;
/// @prop - Svg for the searchbar input clear icon
$searchbar-wp-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-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 searchbar input clear icon
$searchbar-wp-input-clear-icon-size: 22px !default;

41
src/components/segment/segment.ios.scss
View File

@ -3,32 +3,73 @@
// iOS Segment
// --------------------------------------------------
/// @prop - Background of the segment button
$segment-button-ios-background-color: transparent !default;
/// @prop - Background of the activated segment button
$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
/// @prop - Text color of the segment button
$segment-button-ios-text-color: color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default;
/// @prop - Transition of the activated segment button
$segment-button-ios-transition-activated: 100ms all linear !default;
/// @prop - Transition of the segment button on hover
$segment-button-ios-transition-hover: 100ms all linear !default;
/// @prop - Transition of the segment button when pressed
$segment-button-ios-transition-active: 100ms all linear !default;
/// @prop - Opacity of the segment button on hover
$segment-button-ios-opacity-hover: .1 !default;
/// @prop - Opacity of the segment button when pressed
$segment-button-ios-opacity-active: .16 !default;
/// @prop - Opacity of the activated segment button
$segment-button-ios-opacity-activated: 1 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-ios-opacity-disabled: .3 !default;
/// @prop - Border width of the segment button
$segment-button-ios-border-width: 1px !default;
/// @prop - Height of the segment button
$segment-button-ios-height: 3.2rem !default;
/// @prop - Line height of the segment button
$segment-button-ios-line-height: 3rem !default;
/// @prop - Font size of the segment button
$segment-button-ios-font-size: 1.3rem !default;
/// @prop - Border radius of the segment button
$segment-button-ios-border-radius: 4px !default;
/// @prop - Size of an icon in the segment button
$segment-button-ios-icon-size: 2.6rem !default;
/// @prop - Line height of an icon in the segment button
$segment-button-ios-icon-line-height: 2.8rem !default;
/// @prop - Max width of the segment button in a toolbar
$segment-button-ios-toolbar-button-max-width: 100px !default;
/// @prop - Height of the segment button in a toolbar
$segment-button-ios-toolbar-button-height: 2.6rem !default;
/// @prop - Line height of the segment button in a toolbar
$segment-button-ios-toolbar-line-height: 2.5rem !default;
/// @prop - Font size of the segment button in a toolbar
$segment-button-ios-toolbar-font-size: 1.2rem !default;
/// @prop - Size of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-size: 2.2rem !default;
/// @prop - Line height of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-line-height: 2.4rem !default;

22
src/components/segment/segment.md.scss
View File

@ -3,21 +3,43 @@
// Material Design Segment
// --------------------------------------------------
/// @prop - Text color of the activated segment button
$segment-button-md-text-color-activated: $toolbar-md-active-color !default;
/// @prop - Border color of the activated segment button
$segment-button-md-border-color-activated: $toolbar-md-active-color !default;
/// @prop - Width of the bottom border on the segment button
$segment-button-md-border-bottom-width: 2px !default;
/// @prop - Color of the bottom border on the segment button
$segment-button-md-border-bottom-color: rgba(#000, .10) !default;
/// @prop - Opacity of the segment button
$segment-button-md-opacity: .7 !default;
/// @prop - Opacity of the activated segment button
$segment-button-md-opacity-activated: 1 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-md-opacity-disabled: .3 !default;
/// @prop - Padding of the segment button
$segment-button-md-padding: 0 6px !default;
/// @prop - Height of the segment button
$segment-button-md-height: 4.2rem !default;
/// @prop - Line height of the segment button
$segment-button-md-line-height: 4rem !default;
/// @prop - Font size of the segment button
$segment-button-md-font-size: 1.2rem !default;
/// @prop - Size of an icon in the segment button
$segment-button-md-icon-size: 2.6rem !default;
/// @prop - Line height of an icon in the segment button
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;

45
src/components/segment/segment.wp.scss
View File

@ -3,24 +3,49 @@
// Windows Segment
// --------------------------------------------------
$segment-button-wp-text-color-activated: $toolbar-wp-text-color !default;
$segment-button-wp-padding: 0 6px !default;
$segment-button-wp-height: 4rem !default;
$segment-button-wp-line-height: 4rem !default;
$segment-button-wp-font-size: 1.3rem !default;
$segment-button-wp-text-transform: uppercase !default;
$segment-button-wp-font-weight: bold !default;
$segment-button-wp-icon-size: 2.6rem !default;
$segment-button-wp-icon-line-height: $segment-button-wp-line-height !default;
/// @prop - Background of the segment button
$segment-button-wp-background-color: transparent !default;
/// @prop - Text color of the activated segment button
$segment-button-wp-text-color-activated: $toolbar-wp-text-color !default;
/// @prop - Padding of the segment button
$segment-button-wp-padding: 0 6px !default;
/// @prop - Height of the segment button
$segment-button-wp-height: 4rem !default;
/// @prop - Line height of the segment button
$segment-button-wp-line-height: 4rem !default;
/// @prop - Font size of the segment button
$segment-button-wp-font-size: 1.3rem !default;
/// @prop - Text transform of the segment button
$segment-button-wp-text-transform: uppercase !default;
/// @prop - Font weight of the segment button
$segment-button-wp-font-weight: bold !default;
/// @prop - Opacity of the segment button
$segment-button-wp-opacity: .5 !default;
/// @prop - Opacity of the activated segment button
$segment-button-wp-opacity-activated: 1 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-wp-opacity-disabled: .3 !default;
/// @prop - Size of an icon in the segment button
$segment-button-wp-icon-size: 2.6rem !default;
/// @prop - Line height of an icon in the segment button
$segment-button-wp-icon-line-height: $segment-button-wp-line-height !default;
/// @prop - Position of the buttons in the segment
$segment-button-wp-buttons-justify-content: flex-start !default;
.segment-wp {
justify-content: $segment-button-wp-buttons-justify-content;
}

2
src/components/tabs/tabs.ios.scss
View File

@ -12,7 +12,7 @@ $tabs-ios-tab-padding: 0 2px !default;
/// @prop - Max width of the tab button
$tabs-ios-tab-max-width: 240px !default;
/// @prop - Min height of the tab button
/// @prop - Minimum height of the tab button
$tabs-ios-tab-min-height: 49px !default;
/// @prop - Text color of the inactive tab button

2
src/components/tabs/tabs.md.scss
View File

@ -6,7 +6,7 @@
/// @prop - Padding on the tab button
$tabs-md-tab-padding: 0 !default;
/// @prop - Min height of the tab button
/// @prop - Minimum height of the tab button
$tabs-md-tab-min-height: 5.6rem !default;
/// @prop - Font size of the inactive tab button text

2
src/components/tabs/tabs.wp.scss
View File

@ -6,7 +6,7 @@
/// @prop - Padding on the tab button
$tabs-wp-tab-padding: 12px 10px 5px 10px !default;
/// @prop - Min height of the tab button
/// @prop - Minimum height of the tab button
$tabs-wp-tab-min-height: 4.8rem !default;
/// @prop - Font size of the tab button text

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

@ -3,30 +3,55 @@
// iOS Toggle
// --------------------------------------------------
/// @prop - Width of the toggle
$toggle-ios-width: 51px !default;
/// @prop - Height of the toggle
$toggle-ios-height: 32px !default;
/// @prop - Border width of the toggle
$toggle-ios-border-width: 2px !default;
/// @prop - Border radius of the toggle
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
/// @prop - Background color of the unchecked toggle
$toggle-ios-background-color-off: $list-ios-background-color !default;
/// @prop - Border color of the unchecked toggle
$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
/// @prop - Background color of the checked toggle
$toggle-ios-background-color-on: color($colors-ios, primary) !default;
/// @prop - Width of the toggle handle
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
/// @prop - Height of the toggle handle
$toggle-ios-handle-height: $toggle-ios-handle-width !default;
/// @prop - Border radius of the toggle handle
$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default;
/// @prop - Box shadow of the toggle handle
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
/// @prop - Background color of the toggle handle
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
/// @prop - Margin of the toggle handle
$toggle-ios-media-margin: 0 !default;
/// @prop - Transition duration of the toggle icon
$toggle-ios-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-ios-disabled-opacity: .3 !default;
/// @prop - Padding of the toggle positioned on the left in an item
$toggle-ios-item-left-padding: 6px 16px 5px 0 !default;
/// @prop - Padding of the toggle positioned on the right in an item
$toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;

31
src/components/toggle/toggle.md.scss
View File

@ -3,27 +3,52 @@
// Material Design Toggle
// --------------------------------------------------
/// @prop - Color of the active toggle
$toggle-md-active-color: color($colors-md, primary) !default;
/// @prop - Width of the toggle track
$toggle-md-track-width: 36px !default;
/// @prop - Height of the toggle track
$toggle-md-track-height: 14px !default;
/// @prop - Background color of the toggle track
$toggle-md-track-background-color-off: $list-md-border-color !default;
/// @prop - Background color of the checked toggle track
$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default;
/// @prop - Width of the toggle handle
$toggle-md-handle-width: 20px !default;
/// @prop - Height of the toggle handle
$toggle-md-handle-height: 20px !default;
$toggle-md-handle-background-color-off: $background-md-color !default;
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
/// @prop - Border radius of the toggle handle
$toggle-md-handle-border-radius: 50% !default;
/// @prop - Box shadow of the toggle handle
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
/// @prop - Background color of the toggle handle
$toggle-md-handle-background-color-off: $background-md-color !default;
/// @prop - Background color of the checked toggle handle
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
/// @prop - Margin of the toggle
$toggle-md-media-margin: 0 !default;
/// @prop - Transition duration of the toggle icon
$toggle-md-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-md-disabled-opacity: .3 !default;
/// @prop - Padding of the toggle positioned on the left in an item
$toggle-md-item-left-padding: 12px 18px 12px 2px !default;
/// @prop - Padding of the toggle positioned on the right in an item
$toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;

38
src/components/toggle/toggle.wp.scss
View File

@ -3,33 +3,67 @@
// Windows Toggle
// --------------------------------------------------
/// @prop - Color of the toggle
$toggle-wp-inactive-color: #323232 !default;
/// @prop - Color of the checked toggle
$toggle-wp-active-color: color($colors-wp, primary) !default;
/// @prop - Width of the toggle track
$toggle-wp-track-width: 40px !default;
/// @prop - Height of the toggle track
$toggle-wp-track-height: 18px !default;
/// @prop - Background color of the toggle track
$toggle-wp-track-background-color-off: transparent !default;
/// @prop - Background color of the checked toggle track
$toggle-wp-track-background-color-on: $toggle-wp-active-color !default;
/// @prop - Border width of the toggle track
$toggle-wp-track-border-width: 2px !default;
/// @prop - Border color of the toggle track
$toggle-wp-track-border-color-off: $toggle-wp-inactive-color !default;
/// @prop - Border color of the checked toggle track
$toggle-wp-track-border-color-on: $toggle-wp-active-color !default;
/// @prop - Width of the toggle handle
$toggle-wp-handle-width: 10px !default;
/// @prop - Height of the toggle handle
$toggle-wp-handle-height: 10px !default;
/// @prop - Top of the toggle handle
$toggle-wp-handle-top: 2px !default;
/// @prop - Left of the toggle handle
$toggle-wp-handle-left: 2px !default;
$toggle-wp-handle-background-color-off: $toggle-wp-inactive-color !default;
$toggle-wp-handle-background-color-on: color-contrast($colors-wp, $toggle-wp-active-color) !default;
/// @prop - Border radius of the toggle handle
$toggle-wp-handle-border-radius: 50% !default;
/// @prop - Background color of the toggle handle
$toggle-wp-handle-background-color-off: $toggle-wp-inactive-color !default;
/// @prop - Background color of the checked toggle handle
$toggle-wp-handle-background-color-on: color-contrast($colors-wp, $toggle-wp-active-color) !default;
/// @prop - Margin of the toggle
$toggle-wp-media-margin: 0 !default;
/// @prop - Transition duration of the toggle icon
$toggle-wp-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-wp-disabled-opacity: .3 !default;
/// @prop - Padding of the toggle positioned on the left in an item
$toggle-wp-item-left-padding: 12px 18px 12px 2px !default;
/// @prop - Padding of the toggle positioned on the right in an item
$toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;

13
src/components/toolbar/toolbar.ios.scss
View File

@ -3,6 +3,7 @@
// iOS Toolbar
// --------------------------------------------------
/// @prop - Order of the toolbar elements
$toolbar-order-ios: (
back-button: 0,
menu-toggle-start: 1,
@ -14,16 +15,28 @@ $toolbar-order-ios: (
menu-toggle-end: 7,
);
/// @prop - Font size of the toolbar button
$toolbar-ios-button-font-size: 1.7rem !default;
/// @prop - Font size of the toolbar title
$toolbar-ios-title-font-size: 1.7rem !default;
/// @prop - Font weight of the toolbar title
$toolbar-ios-title-font-weight: 600 !default;
/// @prop - Text alignment of the toolbar title
$toolbar-ios-title-text-align: center !default;
/// @prop - Text color of the toolbar title
$toolbar-ios-title-text-color: color-contrast($colors-ios, $toolbar-ios-background) !default;
/// @prop - Text color of the toolbar button
$toolbar-ios-button-color: color-contrast($colors-ios, $toolbar-ios-background, ios) !default;
/// @prop - Border radius of the toolbar button
$toolbar-ios-button-border-radius: 4px !default;
/// @prop - Height of the navigation bar
$navbar-ios-height: $toolbar-ios-height !default;

9
src/components/toolbar/toolbar.md.scss
View File

@ -3,6 +3,7 @@
// Material Design Toolbar
// --------------------------------------------------
/// @prop - Order of the toolbar elements
$toolbar-order-md: (
back-button: 0,
menu-toggle-start: 1,
@ -14,14 +15,22 @@ $toolbar-order-md: (
menu-toggle-end: 7,
);
/// @prop - Font size of the toolbar title
$toolbar-md-title-font-size: 2rem !default;
/// @prop - Text color of the toolbar title
$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, md) !default;
/// @prop - Font size of the toolbar button
$toolbar-md-button-font-size: 1.4rem !default;
/// @prop - Text color of the toolbar button
$toolbar-md-button-color: $toolbar-md-title-text-color !default;
/// @prop - Border radius of the toolbar button
$toolbar-md-button-border-radius: 2px !default;
/// @prop - Height of the navigation bar
$navbar-md-height: $toolbar-md-height !default;

16
src/components/toolbar/toolbar.wp.scss
View File

@ -3,6 +3,7 @@
// Windows Toolbar
// --------------------------------------------------
/// @prop - Order of the toolbar elements
$toolbar-order-wp: (
back-button: 0,
menu-toggle-start: 1,
@ -14,16 +15,31 @@ $toolbar-order-wp: (
menu-toggle-end: 7,
);
/// @prop - Padding of the toolbar title
$toolbar-wp-title-padding: 0 6px !default;
/// @prop - Font size of the toolbar title
$toolbar-wp-title-font-size: 1.5rem !default;
/// @prop - Font weight of the toolbar title
$toolbar-wp-title-font-weight: bold !default;
/// @prop - Text transform of the toolbar title
$toolbar-wp-title-text-transform: uppercase !default;
/// @prop - Text color of the toolbar title
$toolbar-wp-title-text-color: color-contrast($colors-wp, $toolbar-wp-background, wp) !default;
/// @prop - Font size of the toolbar button
$toolbar-wp-button-font-size: 1.4rem !default;
/// @prop - Text color of the toolbar button
$toolbar-wp-button-color: color-contrast($colors-wp, $toolbar-wp-background, wp) !default;
/// @prop - Border radius of the toolbar button
$toolbar-wp-button-border-radius: 2px !default;
/// @prop - Height of the navigation bar
$navbar-wp-height: $toolbar-wp-height !default;