_outlined-card-theme.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. //
  2. // Copyright 2022 Google Inc.
  3. //
  4. // Permission is hereby granted, free of charge, to any person obtaining a copy
  5. // of this software and associated documentation files (the "Software"), to deal
  6. // in the Software without restriction, including without limitation the rights
  7. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  8. // copies of the Software, and to permit persons to whom the Software is
  9. // furnished to do so, subject to the following conditions:
  10. //
  11. // The above copyright notice and this permission notice shall be included in
  12. // all copies or substantial portions of the Software.
  13. //
  14. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  19. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  20. // THE SOFTWARE.
  21. @use './mixins' as card;
  22. @use 'sass:map';
  23. @use '@material/elevation/elevation-theme';
  24. @use '@material/tokens/resolvers';
  25. @use '@material/theme/state';
  26. @use '@material/theme/theme';
  27. @use '@material/theme/keys';
  28. @use '@material/ripple/ripple-theme';
  29. @use './card-shared-theme';
  30. $custom-property-prefix: 'outlined-card';
  31. $light-theme: (
  32. container-color: null,
  33. container-elevation: null,
  34. container-shadow-color: null,
  35. container-shape: null,
  36. container-surface-tint-layer-color: null,
  37. disabled-container-elevation: null,
  38. disabled-outline-color: null,
  39. disabled-outline-opacity: null,
  40. dragged-container-elevation: null,
  41. dragged-outline-color: null,
  42. dragged-state-layer-color: null,
  43. dragged-state-layer-opacity: null,
  44. focus-container-elevation: null,
  45. focus-outline-color: null,
  46. focus-state-layer-color: null,
  47. focus-state-layer-opacity: null,
  48. hover-container-elevation: null,
  49. hover-outline-color: null,
  50. hover-state-layer-color: null,
  51. hover-state-layer-opacity: null,
  52. icon-color: null,
  53. icon-size: null,
  54. outline-color: null,
  55. outline-width: null,
  56. pressed-container-elevation: null,
  57. pressed-outline-color: null,
  58. pressed-state-layer-color: null,
  59. pressed-state-layer-opacity: null,
  60. );
  61. @mixin theme($theme) {
  62. @include theme.validate-theme($light-theme, $theme);
  63. @include keys.declare-custom-properties(
  64. $theme,
  65. $prefix: $custom-property-prefix
  66. );
  67. }
  68. @mixin theme-styles($theme, $resolver: resolvers.$material) {
  69. @include theme.validate-theme-styles($light-theme, $theme);
  70. $theme: keys.create-theme-properties(
  71. $theme,
  72. $prefix: $custom-property-prefix
  73. );
  74. @include _outline(
  75. $outline-width: map.get($theme, outline-width),
  76. $map: (
  77. default: map.get($theme, outline-color),
  78. hover: map.get($theme, hover-outline-color),
  79. focus: map.get($theme, focus-outline-color),
  80. pressed: map.get($theme, pressed-outline-color),
  81. )
  82. );
  83. @include card-shared-theme.theme($theme, $resolver);
  84. }
  85. @mixin _outline($outline-width, $map) {
  86. @if state.get-default-state($map) {
  87. @include card.outline(
  88. $color: state.get-default-state($map),
  89. $thickness: $outline-width
  90. );
  91. }
  92. @include ripple-theme.hover() {
  93. @if state.get-hover-state($map) {
  94. @include card.outline(
  95. $color: state.get-hover-state($map),
  96. $thickness: $outline-width
  97. );
  98. }
  99. }
  100. @include ripple-theme.focus() {
  101. @if state.get-focus-state($map) {
  102. @include card.outline(
  103. $color: state.get-focus-state($map),
  104. $thickness: $outline-width
  105. );
  106. }
  107. }
  108. @include ripple-theme.pressed() {
  109. @if state.get-pressed-state($map) {
  110. @include card.outline(
  111. $color: state.get-pressed-state($map),
  112. $thickness: $outline-width
  113. );
  114. }
  115. }
  116. }