Merge pull request #7935 from IgniteUI/SIvanova/update-elevation-docs

docs(sassdoc): update elevation documentation

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss

@@ -18,6 +18,7 @@
 /// @prop {Number} border-radius [1] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {function} extend
 /// @requires {Map} $_default-shape-badge
+/// @requires {Map} $_default-elevation-badge
 /// @see $default-palette
 $_light-badge: extend(
     $_default-shape-badge,
@@ -53,6 +54,7 @@ $_fluent-badge: extend($_light-badge);
 /// @requires {function} extend
 /// @requires {Map} $_light-badge
 /// @requires {Map} $_bootstrap-shape-badge
+/// @requires {Map} $_bootstrap-elevation-badge
 $_bootstrap-badge: extend(
     $_light-badge,
     $_bootstrap-shape-badge,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss

@@ -11,7 +11,9 @@
 /// @prop {Color} background [#fff] - The background color used for the toast.
 /// @prop {Map} idle-item-color [igx-color: ('grays', 700)] - The text-color used for the idle color.
 /// @prop {Map} active-item-color [igx-color: ('primary', 500)] - The text-color used for the active color.
-/// @prop {number} elevation [8] - The elevation level of the bar.
+/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the bottom nav.
+/// @requires {function} extend
+/// @requires {Map} $_default-elevation-bottom-nav
 /// @see $default-palette
 $_light-bottom-nav: extend(
     $_default-elevation-bottom-nav,
@@ -30,8 +32,10 @@ $_light-bottom-nav: extend(
 
 /// Generates a fluent bottom navigation schema.
 /// @type {Map}
+/// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the bottom nav.
 /// @requires {function} extend
 /// @requires {Map} $_light-bottom-nav
+/// @requires {Map} $_fluent-elevation-bottom-nav
 $_fluent-bottom-nav: extend($_light-bottom-nav, $_fluent-elevation-bottom-nav);
 
 /// Generates a bootstrap bottom navigation schema.
@@ -42,6 +46,8 @@ $_bootstrap-bottom-nav: extend($_light-bottom-nav);
 
 /// Generates an indigo bottom navigation schema.
 /// @type {Map}
+/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the bottom nav.
 /// @requires {function} extend
 /// @requires {Map} $_light-bottom-nav
+/// @requires {Map} $_indigo-elevation-bottom-nav
 $_indigo-bottom-nav: extend($_light-bottom-nav, $_indigo-elevation-bottom-nav);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss

@@ -24,10 +24,11 @@
 /// @prop {Map} item-selected-background [igx-color: ('grays', 400)] - The background color for a selected item in the button group.
 /// @prop {Map} item-selected-border-color [igx-color: ('grays', 400), hexrgba: #ccc] - The border color for a selected item from the button group.
 /// @prop {Map} item-selected-hover-background [igx-color: ('grays', 500)] - The background color for a selected item in hover or focus state in the button group.
-/// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the badge shadow.
+/// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {Number} border-radius [.2] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {function} extend
 /// @requires {Map} $_default-shape-button-group
+/// @requires {Map} $_default-elevation-button-group
 /// @see $default-palette
 $_light-button-group: extend(
     $_default-shape-button-group,
@@ -96,12 +97,13 @@ $_light-button-group: extend(
 /// @prop {Map} item-selected-text-color [igx-color: ('primary', 200)]- The text color for a selected item in the button group.
 /// @prop {Color} disabled-background-color [transparent] - The background color for a disabled item in the button group.
 ///
-/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the badge shadow.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {Number} border-radius [2px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
 ///
 /// @requires {function} extend
 /// @requires {Map} $_light-button-group
 /// @requires {Map} $_fluent-shape-button-group
+/// @requires {Map} $_fluent-elevation-button-group
 $_fluent-button-group: extend(
     $_light-button-group,
     $_fluent-shape-button-group,
@@ -149,10 +151,12 @@ $_fluent-button-group: extend(
 /// @prop {Map} disabled-background-color [igx-color: ('primary', 500), lighten: 35%] - The background color for a disabled item in the button group.
 /// @prop {Map} disabled-text-color [igx-color: ('primary', 500), lighten: 20%]- The text/icon color for a disabled item in the button group.
 /// @prop {Map} item-disabled-border [igx-color: ('primary', 500), lighten: 35%] - The border color for a disabled item in the button group.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {Number} border-radius [4px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {function} extend
 /// @requires {Map} $_light-button-group
 /// @requires {Map} $_bootstrap-shape-button-group
+/// @requires {Map} $_bootstrap-elevation-button-group
 $_bootstrap-button-group: extend(
     $_light-button-group,
     $_bootstrap-shape-button-group,
@@ -223,10 +227,12 @@ $_bootstrap-button-group: extend(
 /// @prop {Map} disabled-background-color [igx-color: ('grays', 100)] - The background color for a disabled item in the button group.
 /// @prop {Map} disabled-text-color [igx-color: ('grays', 400)]- The text/icon color for a disabled item in the button group.
 /// @prop {Map} item-disabled-border [igx-color: ('grays', 100)] - The border color for a disabled item in the button group.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {Number} border-radius [8px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {function} extend
 /// @requires {Map} $_light-button-group
 /// @requires {Map} $_indigo-shape-button-group
+/// @requires {Map} $_indigo-elevation-button-group
 $_indigo-button-group: extend(
     $_light-button-group,
     $_indigo-shape-button-group,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss

@@ -72,6 +72,7 @@
 /// @prop {Number} icon-border-radius [1] - The border radius used for icon button. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {function} extend
 /// @requires {Map} $_default-shape-button
+/// @requires {Map} $_default-elevation-button
 /// @see $default-palette
 $_light-button: extend(
     $_default-shape-button,
@@ -279,6 +280,7 @@ $_light-button: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-button
 /// @requires {Map} $_fluent-shape-button
+/// @requires {Map} $_fluent-elevation-button
 $_fluent-button: extend(
     $_light-button,
     $_fluent-shape-button,
@@ -423,6 +425,13 @@ $_fluent-button: extend(
 /// @prop {Map} disabled-background [igx-color: ('primary', 500), lighten: 35%] - the disabled background color.
 /// @prop {Map} outlined-disabled-outline-color [igx-color: ('primary', 500), lighten: 35%] - the border-color for outlined buttons.
 ///
+/// @prop {Number} raised-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} raised-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} raised-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {Number} fab-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} fab-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} fab-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
+///
 /// @prop {Number} flat-border-radius [4px] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} raised-border-radius [4px] - The border radius used for raised button. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} outlined-border-radius [4px] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent.
@@ -432,6 +441,7 @@ $_fluent-button: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-button
 /// @requires {Map} $_bootstrap-shape-button
+/// @requires {Map} $_bootstrap-elevation-button
 $_bootstrap-button: extend(
     $_light-button,
     $_bootstrap-shape-button,
@@ -576,6 +586,13 @@ $_bootstrap-button: extend(
 /// @prop {Map} icon-focus-background [igx-color: ('grays', 300)] - The focus icon color of an icon button.
 /// @prop {Color} icon-focus-color [igx-color: ('grays', 600)] - The focus icon color of an icon button.
 ///
+/// @prop {Number} raised-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} raised-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} raised-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {Number} fab-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} fab-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} fab-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
+///
 /// @prop {Number} flat-border-radius [1] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} raised-border-radius [1] - The border radius used for raised button. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} outlined-border-radius [1] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent.
@@ -585,6 +602,7 @@ $_bootstrap-button: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-button
 /// @requires {Map} $_indigo-shape-button
+/// @requires {Map} $_indigo-elevation-button
 $_indigo-button: extend(
     $_light-button,
     $_indigo-shape-button,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss

@@ -21,6 +21,7 @@
 ///
 /// @requires {function} extend
 /// @requires {Map} $_default-shape-card
+/// @requires {Map} $_default-elevation-card
 /// @see $default-palette
 $_light-card: extend(
     $_default-shape-card,
@@ -72,6 +73,7 @@ $_light-card: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-card
 /// @requires {Map} $_fluent-shape-card
+/// @requires {Map} $_fluent-elevation-card
 $_fluent-card: extend(
     $_light-card,
     $_fluent-shape-card,
@@ -99,6 +101,7 @@ $_fluent-card: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-card
 /// @requires {Map} $_bootstrap-shape-card
+/// @requires {Map} $_bootstrap-elevation-card
 $_bootstrap-card: extend(
     $_light-card,
     $_bootstrap-shape-card,
@@ -143,6 +146,7 @@ $_bootstrap-card: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-card
 /// @requires {Map} $_indigo-shape-card
+/// @requires {Map} $_indigo-elevation-card
 $_indigo-card: extend(
     $_light-card,
     $_indigo-shape-card,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss

@@ -20,9 +20,11 @@
 /// @prop {Color} indicator-border-color [#fff] - The idle indicator border color.
 /// @prop {Color} indicator-active-dot-color [#fff] - The active indicator dot color.
 /// @prop {Color} indicator-active-border-color [#fff] - The active indicator border color.
+/// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {function} extend
 /// @requires {Map} $_default-shape-carousel
+/// @requires {Map} $_default-elevation-carousel
 /// @see $default-palette
 $_light-carousel: extend(
     $_default-shape-carousel,
@@ -60,9 +62,11 @@ $_light-carousel: extend(
 /// Generates a fluent carousel schema.
 /// @type {Map}
 /// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @requires {function} extend
 /// @requires {Map} $_light-carousel
 /// @requires {Map} $_square-shape-carousel
+/// @requires {Map} $_fluent-elevation-carousel
 $_fluent-carousel: extend(
     $_light-carousel,
     $_square-shape-carousel,
@@ -72,9 +76,11 @@ $_fluent-carousel: extend(
 /// Generates a bootstrap carousel schema.
 /// @type {Map}
 /// @prop {Number} border-radius [4px] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @requires {function} extend
 /// @requires {Map} $_light-carousel
 /// @requires {Map} $_bootstrap-shape-carousel
+/// @requires {Map} $_bootstrap-elevation-carousel
 $_bootstrap-carousel: extend(
     $_light-carousel,
     $_bootstrap-shape-carousel,
@@ -94,10 +100,12 @@ $_bootstrap-carousel: extend(
 /// @prop {Map} indicator-dot-color [igx-color: 'surface', rgba: .6] - The idle indicator dot color.
 /// @prop {Map} indicator-active-dot-color [igx-color: 'surface'] - The active indicator dot color.
 /// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 ///
 /// @requires {function} extend
 /// @requires {Map} $_light-carousel
 /// @requires {Map} $_default-shape-carousel
+/// @requires {Map} $_indigo-elevation-carousel
 $_indigo-carousel: extend(
     $_light-carousel,
     $_default-shape-carousel,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss

@@ -36,6 +36,7 @@
 ///
 /// @requires {function} extend
 /// @requires {Map} $_round-shape-chip
+/// @requires {Map} $_default-elevation-chip
 /// @see $default-palette
 $_light-chip: extend(
     $_round-shape-chip,
@@ -129,12 +130,13 @@ $_light-chip: extend(
 /// @prop {Map} hover-selected-background [igx-color: ('primary', 500)] - The selected chip hover background color.
 /// @prop {Map} focus-selected-text-color [igx-contrast-color: ('primary', 500)] - The selected chip text focus color.
 /// @prop {Map} focus-selected-background [igx-color: ('primary', 500)] - The selected chip focus background color.
-/// @prop {Number} ghost-elevation [2] - The elevation level for the chip's ghost (dragging mode). Between 0-24.
+/// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 /// @prop {Number} border-radius [1] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
 ///
 /// @requires {function} extend
 /// @requires {Map} $_light-chip
 /// @requires {Map} $_round-shape-chip
+/// @requires {Map} $_fluent-elevation-chip
 $_fluent-chip: extend(
     $_light-chip,
     $_round-shape-chip,
@@ -189,12 +191,13 @@ $_fluent-chip: extend(
 /// Generates a bootstrap chip schema.
 /// @type {Map}
 ///
-/// @prop {Number} ghost-elevation [0] - The elevation level for the chip's ghost (dragging mode). Between 0-24.
+/// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 /// @prop {Number} border-radius [.25] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
 ///
 /// @requires {function} extend
 /// @requires {Map} $_light-chip
 /// @requires {Map} $_bootstrap-shape-chip
+/// @requires {Map} $_bootstrap-elevation-chip
 $_bootstrap-chip: extend(
     $_light-chip,
     $_bootstrap-shape-chip,
@@ -207,7 +210,7 @@ $_bootstrap-chip: extend(
 /// Generates an indigo chip schema.
 /// @type {Map}
 ///
-/// @prop {Number} ghost-elevation [0] - The elevation level for the chip's ghost (dragging mode). Between 0-24.
+/// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 /// @prop {Number} border-radius [3px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Color} text-color [#fff] - The chip text color.
 /// @prop {Map} background [igx-color: ('grays', 600)] - The chip background color.
@@ -225,6 +228,7 @@ $_bootstrap-chip: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-chip
 /// @requires {Map} $_indigo-shape-chip
+/// @requires {Map} $_indigo-elevation-chip
 $_indigo-chip: extend(
     $_light-chip,
     $_indigo-shape-chip,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss

@@ -14,12 +14,13 @@
 /// @prop {Map} message-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The dialog message text color.
 /// @prop {map} border-color [igx-color: ('grays', 300)] - The border color for dialog component.
 ///
-/// @prop {Number} elevation [24] - The elevation level for the dialog.
+/// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
 /// @prop {Number} border-radius [.1] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
 ///
 /// @see $default-palette
 /// @requires {function} extend
 /// @requires {Map} $_default-shape-dialog
+/// @requires {Map} $_default-elevation-dialog
 $_light-dialog: extend(
     $_default-shape-dialog,
     $_default-elevation-dialog,
@@ -63,11 +64,12 @@ $_fluent-dialog: extend(
 /// Generates a bootstrap dialog schema.
 /// @type {Map}
 /// @prop {Map} border-color [igx-color: ('grays', 300)] - The border color for dialog component.
-/// @prop {Number} elevation [0] - The elevation level for the dialog.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the dialog.
 /// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {function} extend
 /// @requires {Map} $_light-dialog
 /// @requires {Map} $_bootstrap-shape-dialog
+/// @requires {Map} $_bootstrap-elevation-dialog
 $_bootstrap-dialog: extend(
     $_light-dialog,
     $_bootstrap-shape-dialog,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss

@@ -31,6 +31,7 @@
 /// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {function} extend
 /// @requires {Map} $_default-shape-drop-down
+/// @requires {Map} $_default-elevation-drop-down
 /// @see $default-palette
 $_light-drop-down: extend(
     $_default-shape-drop-down,
@@ -128,6 +129,7 @@ $_light-drop-down: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-drop-down
 /// @requires {Map} $_fluent-shape-drop-down
+/// @requires {Map} $_fluent-elevation-drop-down
 $_fluent-drop-down: extend(
     $_light-drop-down,
     $_fluent-shape-drop-down,
@@ -181,6 +183,7 @@ $_fluent-drop-down: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-drop-down
 /// @requires {Map} $_bootstrap-shape-drop-down
+/// @requires {Map} $_bootstrap-elevation-drop-down
 $_bootstrap-drop-down: extend(
     $_light-drop-down,
     $_bootstrap-shape-drop-down,
@@ -250,6 +253,7 @@ $_bootstrap-drop-down: extend(
 /// @requires {function} extend
 /// @requires {Map} $_light-drop-down
 /// @requires {Map} $_indigo-shape-drop-down
+/// @requires {Map} $_indigo-elevation-drop-down
 $_indigo-drop-down: extend(
     $_light-drop-down,
     $_indigo-shape-drop-down,