diff --git a/src/components/action-sheet/action-sheet.scss b/src/components/action-sheet/action-sheet.scss index 0b507d865f..18e17dd9ec 100644 --- a/src/components/action-sheet/action-sheet.scss +++ b/src/components/action-sheet/action-sheet.scss @@ -3,7 +3,10 @@ // Action Sheet // -------------------------------------------------- +/// @prop - Width of the action sheet $action-sheet-width: 100% !default; + +/// @prop - Maximum width of the action sheet $action-sheet-max-width: 500px !default; diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index f372c9e595..7e34e5df57 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -3,10 +3,16 @@ // Alerts // -------------------------------------------------- +/// @prop - Minimum width of the alert $alert-min-width: 250px !default; + +/// @prop - Maximum height of the alert $alert-max-height: 90% !default; +/// @prop - Line height of the alert button $alert-button-line-height: 20px !default; + +/// @prop - Font size of the alert button $alert-button-font-size: 14px !default; diff --git a/src/components/backdrop/backdrop.scss b/src/components/backdrop/backdrop.scss index 8cf94442c0..15e754d59f 100644 --- a/src/components/backdrop/backdrop.scss +++ b/src/components/backdrop/backdrop.scss @@ -3,6 +3,7 @@ // Backdrop // -------------------------------------------------- +/// @prop - Color of the backdrop $backdrop-color: #000 !default; ion-backdrop { diff --git a/src/components/infinite-scroll/infinite-scroll.scss b/src/components/infinite-scroll/infinite-scroll.scss index 26d62e3ad7..d5a9e891c6 100644 --- a/src/components/infinite-scroll/infinite-scroll.scss +++ b/src/components/infinite-scroll/infinite-scroll.scss @@ -3,8 +3,14 @@ // Infinite Scroll // -------------------------------------------------- + +/// @prop - Margin of the infinite scroll loading icon $infinite-scroll-loading-margin: 0 0 32px 0 !default; + +/// @prop - Color of the infinite scroll loading indicator $infinite-scroll-loading-color: #666 !default; + +/// @prop - Margin of the infinite scroll loading text $infinite-scroll-loading-text-margin: 4px 32px 0 32px !default; diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss index eaf8a2f961..4e83323c9a 100644 --- a/src/components/menu/menu.scss +++ b/src/components/menu/menu.scss @@ -3,7 +3,10 @@ // Menu // -------------------------------------------------- +/// @prop - Width of the menu $menu-width: 304px !default; + +/// @prop - Width of the menu on small devices (under 340px) $menu-small-width: $menu-width - 40px !default; diff --git a/src/components/typography/typography.scss b/src/components/typography/typography.scss index e65982518c..8ea799a371 100644 --- a/src/components/typography/typography.scss +++ b/src/components/typography/typography.scss @@ -7,15 +7,31 @@ // $font-size-root value, which is on the element // is what can scale all fonts +/// @prop - Font size of the root html $font-size-root: 62.5% !default; + +/// @prop - Font weight of all headings $headings-font-weight: 500 !default; + +/// @prop - Line height of all headings $headings-line-height: 1.2 !default; +/// @prop - Font size of heading level 1 $h1-font-size: 2.6rem !default; + +/// @prop - Font size of heading level 2 $h2-font-size: 2.4rem !default; + +/// @prop - Font size of heading level 3 $h3-font-size: 2.2rem !default; + +/// @prop - Font size of heading level 4 $h4-font-size: 2rem !default; + +/// @prop - Font size of heading level 5 $h5-font-size: 1.8rem !default; + +/// @prop - Font size of heading level 6 $h6-font-size: 1.6rem !default;