|
2 | 2 | /// @group sheet
|
3 | 3 | ////
|
4 | 4 |
|
| 5 | +@import '~@react-md/dialog/dist/variables'; |
5 | 6 | @import '~@react-md/overlay/dist/variables';
|
6 | 7 | @import '~@react-md/transition/dist/variables';
|
7 | 8 | @import '~@react-md/theme/dist/functions';
|
@@ -40,6 +41,114 @@ $rmd-sheet-elevation: 2 !default;
|
40 | 41 | /// @type Number
|
41 | 42 | $rmd-sheet-raised-elevation: 16 !default;
|
42 | 43 |
|
| 44 | +/// The background color for a sheet rendered "inline" with other content in the |
| 45 | +/// light theme. |
| 46 | +/// |
| 47 | +/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is |
| 48 | +/// ignored and the color is determined by the normal dialog background color |
| 49 | +/// instead. |
| 50 | +/// |
| 51 | +/// @type Color |
| 52 | +/// @since 2.7.0 |
| 53 | +$rmd-sheet-light-background-color: rmd-dialog-theme-var( |
| 54 | + background-color |
| 55 | +) !default; |
| 56 | + |
| 57 | +/// The background color for a sheet rendered "inline" with other content in the |
| 58 | +/// dark theme and the `$rmd-theme-dark-elevation` feature flag is also enabled. |
| 59 | +/// |
| 60 | +/// @see $rmd-theme-dark-elevation |
| 61 | +/// @require $rmd-theme-dark-elevation-colors |
| 62 | +/// @type Color |
| 63 | +/// @since 2.7.0 |
| 64 | +$rmd-sheet-dark-elevation-background-color: map-get( |
| 65 | + $rmd-theme-dark-elevation-colors, |
| 66 | + $rmd-sheet-elevation |
| 67 | +) !default; |
| 68 | + |
| 69 | +/// The background color for a sheet rendered "inline" with other content in the |
| 70 | +/// dark theme. |
| 71 | +/// |
| 72 | +/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is |
| 73 | +/// ignored and the color is determined by the normal dialog background color |
| 74 | +/// instead. |
| 75 | +/// |
| 76 | +/// @type Color |
| 77 | +/// @since 2.7.0 |
| 78 | +$rmd-sheet-dark-background-color: if( |
| 79 | + $rmd-theme-dark-elevation, |
| 80 | + $rmd-sheet-dark-elevation-background-color, |
| 81 | + rmd-dialog-theme-var(background-color) |
| 82 | +) !default; |
| 83 | + |
| 84 | +/// The background color for a sheet rendered "inline" with other content. |
| 85 | +/// |
| 86 | +/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is |
| 87 | +/// ignored and the color is determined by the normal dialog background color |
| 88 | +/// instead. |
| 89 | +/// |
| 90 | +/// @type Color |
| 91 | +/// @since 2.7.0 |
| 92 | +$rmd-sheet-background-color: if( |
| 93 | + $rmd-theme-light, |
| 94 | + $rmd-sheet-light-background-color, |
| 95 | + $rmd-theme-dark-background-color |
| 96 | +) !default; |
| 97 | + |
| 98 | +/// The background color for a sheet raised above other content in the light |
| 99 | +/// theme. |
| 100 | +/// |
| 101 | +/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is |
| 102 | +/// ignored and the color is determined by the normal dialog background color |
| 103 | +/// instead. |
| 104 | +/// |
| 105 | +/// @type Color |
| 106 | +/// @since 2.7.0 |
| 107 | +$rmd-sheet-raised-light-background-color: rmd-dialog-theme-var( |
| 108 | + background-color |
| 109 | +) !default; |
| 110 | + |
| 111 | +/// The background color for a sheet raised above other content in the dark |
| 112 | +/// theme and the `$rmd-theme-dark-elevation` feature flag is also enabled. |
| 113 | +/// |
| 114 | +/// @see $rmd-theme-dark-elevation |
| 115 | +/// @require $rmd-theme-dark-elevation-colors |
| 116 | +/// @type Color |
| 117 | +/// @since 2.7.0 |
| 118 | +$rmd-sheet-raised-dark-elevation-background-color: map-get( |
| 119 | + $rmd-theme-dark-elevation-colors, |
| 120 | + $rmd-sheet-raised-elevation |
| 121 | +) !default; |
| 122 | + |
| 123 | +/// The background color for a sheet raised above other content in the dark |
| 124 | +/// theme. |
| 125 | +/// |
| 126 | +/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is |
| 127 | +/// ignored and the color is determined by the normal dialog background color |
| 128 | +/// instead. |
| 129 | +/// |
| 130 | +/// @type Color |
| 131 | +/// @since 2.7.0 |
| 132 | +$rmd-sheet-raised-dark-background-color: if( |
| 133 | + $rmd-theme-dark-elevation, |
| 134 | + $rmd-sheet-raised-dark-elevation-background-color, |
| 135 | + rmd-dialog-theme-var(background-color) |
| 136 | +) !default; |
| 137 | + |
| 138 | +/// The background color for a sheet raised above other content. |
| 139 | +/// |
| 140 | +/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is |
| 141 | +/// ignored and the color is determined by the normal dialog background color |
| 142 | +/// instead. |
| 143 | +/// |
| 144 | +/// @type Color |
| 145 | +/// @since 2.7.0 |
| 146 | +$rmd-sheet-raised-background-color: if( |
| 147 | + $rmd-theme-light, |
| 148 | + $rmd-sheet-raised-light-background-color, |
| 149 | + $rmd-theme-raised-dark-background-color |
| 150 | +) !default; |
| 151 | + |
43 | 152 | /// The duration for the enter transition.
|
44 | 153 | ///
|
45 | 154 | /// @require $rmd-transition-enter-duration
|
@@ -108,6 +217,8 @@ $rmd-sheet-enabled-positions: $rmd-sheet-positions !default;
|
108 | 217 | /// of the icon as needed.
|
109 | 218 | /// @type Map
|
110 | 219 | $rmd-sheet-theme-values: (
|
| 220 | + background-color: $rmd-sheet-background-color, |
| 221 | + raised-background-color: $rmd-sheet-raised-background-color, |
111 | 222 | touch-width: $rmd-sheet-touch-width,
|
112 | 223 | static-width: $rmd-sheet-static-width,
|
113 | 224 | touchable-max-height: $rmd-sheet-touchable-max-height,
|
|
0 commit comments