_mixins.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. //
  2. // Copyright 2018 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. //
  22. // stylelint-disable selector-class-pattern --
  23. // Selector '.mdc-*' should only be used in this project.
  24. @use 'sass:list';
  25. @use 'sass:meta';
  26. @use '@material/animation/variables' as animation-variables;
  27. @use '@material/ripple/ripple-theme';
  28. @use '@material/theme/theme-color';
  29. @use '@material/theme/theme';
  30. @use '@material/shape/mixins' as shape-mixins;
  31. @use '@material/shape/functions';
  32. @use './variables';
  33. @use '@material/rtl/rtl';
  34. //
  35. // Public
  36. //
  37. @mixin ink-color($color) {
  38. @include theme.property(color, $color);
  39. }
  40. @mixin fill-color($color) {
  41. @include theme.property(background-color, $color);
  42. }
  43. @mixin fill-color-accessible($color) {
  44. @include fill-color($color);
  45. @include ink-color(theme-color.accessible-ink-color($color));
  46. }
  47. @mixin icon-ink-color($color) {
  48. .mdc-top-app-bar__action-item,
  49. .mdc-top-app-bar__navigation-icon {
  50. @include theme.property(color, $color);
  51. @include ripple-theme.states($color);
  52. }
  53. }
  54. @mixin short-shape-radius($radius, $rtl-reflexive: true) {
  55. @if meta.type-of($radius) == 'list' and list.length($radius) > 1 {
  56. @error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
  57. }
  58. $radius: 0 0 $radius 0;
  59. $selector: if(
  60. &,
  61. '&.mdc-top-app-bar--short-collapsed',
  62. '.mdc-top-app-bar--short-collapsed'
  63. );
  64. #{$selector} {
  65. @include shape-mixins.radius(
  66. $radius,
  67. $rtl-reflexive,
  68. $component-height: variables.$dense-row-height
  69. );
  70. }
  71. }
  72. //
  73. // Private
  74. //
  75. @mixin mobile-breakpoint_($mobile-breakpoint: variables.$mobile-breakpoint) {
  76. @media (max-width: $mobile-breakpoint) {
  77. .mdc-top-app-bar__row {
  78. height: variables.$mobile-row-height;
  79. }
  80. .mdc-top-app-bar__section {
  81. padding: variables.$mobile-section-padding;
  82. }
  83. .mdc-top-app-bar--short {
  84. transition: width 200ms
  85. animation-variables.$standard-curve-timing-function;
  86. }
  87. .mdc-top-app-bar--short-collapsed {
  88. transition: width 250ms
  89. animation-variables.$standard-curve-timing-function;
  90. .mdc-top-app-bar__section--align-end {
  91. @include rtl.reflexive-box(
  92. padding,
  93. right,
  94. variables.$short-collapsed-right-icon-padding
  95. );
  96. }
  97. }
  98. .mdc-top-app-bar--prominent {
  99. .mdc-top-app-bar__title {
  100. padding-bottom: variables.$prominent-mobile-title-bottom-padding;
  101. }
  102. }
  103. .mdc-top-app-bar--fixed-adjust {
  104. padding-top: variables.$mobile-row-height;
  105. }
  106. }
  107. }