1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 | @use 'sass:list';
|
27 | @use 'sass:meta';
|
28 | @use '@material/animation/variables' as animation-variables;
|
29 | @use '@material/ripple/ripple-theme';
|
30 | @use '@material/theme/theme-color';
|
31 | @use '@material/theme/theme';
|
32 | @use '@material/shape/mixins' as shape-mixins;
|
33 | @use '@material/shape/functions';
|
34 | @use './variables';
|
35 | @use '@material/rtl/rtl';
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | @mixin ink-color($color) {
|
42 | @include theme.property(color, $color);
|
43 | }
|
44 |
|
45 | @mixin fill-color($color) {
|
46 | @include theme.property(background-color, $color);
|
47 | }
|
48 |
|
49 | @mixin fill-color-accessible($color) {
|
50 | @include fill-color($color);
|
51 | @include ink-color(theme-color.accessible-ink-color($color));
|
52 | }
|
53 |
|
54 | @mixin icon-ink-color($color) {
|
55 | .mdc-top-app-bar__action-item,
|
56 | .mdc-top-app-bar__navigation-icon {
|
57 | @include theme.property(color, $color);
|
58 | @include ripple-theme.states($color);
|
59 | }
|
60 | }
|
61 |
|
62 | @mixin short-shape-radius($radius, $rtl-reflexive: true) {
|
63 | @if meta.type-of($radius) == 'list' and list.length($radius) > 1 {
|
64 | @error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
|
65 | }
|
66 |
|
67 | $radius: 0 0 $radius 0;
|
68 |
|
69 | $selector: if(
|
70 | &,
|
71 | '&.mdc-top-app-bar--short-collapsed',
|
72 | '.mdc-top-app-bar--short-collapsed'
|
73 | );
|
74 |
|
75 | #{$selector} {
|
76 | @include shape-mixins.radius(
|
77 | $radius,
|
78 | $rtl-reflexive,
|
79 | $component-height: variables.$dense-row-height
|
80 | );
|
81 | }
|
82 | }
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 | @mixin mobile-breakpoint_($mobile-breakpoint: variables.$mobile-breakpoint) {
|
89 | @media (max-width: $mobile-breakpoint) {
|
90 | .mdc-top-app-bar__row {
|
91 | height: variables.$mobile-row-height;
|
92 | }
|
93 |
|
94 | .mdc-top-app-bar__section {
|
95 | padding: variables.$mobile-section-padding;
|
96 | }
|
97 |
|
98 | .mdc-top-app-bar--short {
|
99 | transition: width 200ms
|
100 | animation-variables.$standard-curve-timing-function;
|
101 | }
|
102 |
|
103 | .mdc-top-app-bar--short-collapsed {
|
104 | transition: width 250ms
|
105 | animation-variables.$standard-curve-timing-function;
|
106 |
|
107 | .mdc-top-app-bar__section--align-end {
|
108 | @include rtl.reflexive-box(
|
109 | padding,
|
110 | right,
|
111 | variables.$short-collapsed-right-icon-padding
|
112 | );
|
113 | }
|
114 | }
|
115 |
|
116 | .mdc-top-app-bar--prominent {
|
117 | .mdc-top-app-bar__title {
|
118 | padding-bottom: variables.$prominent-mobile-title-bottom-padding;
|
119 | }
|
120 | }
|
121 |
|
122 | .mdc-top-app-bar--fixed-adjust {
|
123 | padding-top: variables.$mobile-row-height;
|
124 | }
|
125 | }
|
126 | }
|