source: trip-planner-front/node_modules/@angular/material/list/_list-theme.scss@ 8d391a1

Last change on this file since 8d391a1 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 3.1 KB
Line 
1@use 'sass:map';
2@use '../core/theming/theming';
3@use '../core/typography/typography';
4@use '../core/typography/typography-utils';
5@use '../core/style/list-common';
6
7
8@mixin color($config-or-theme) {
9 $config: theming.get-color-config($config-or-theme);
10 $background: map.get($config, background);
11 $foreground: map.get($config, foreground);
12
13 .mat-list-base {
14 .mat-list-item {
15 color: theming.get-color-from-palette($foreground, text);
16 }
17
18 .mat-list-option {
19 color: theming.get-color-from-palette($foreground, text);
20 }
21
22 .mat-subheader {
23 color: theming.get-color-from-palette($foreground, secondary-text);
24 }
25 }
26
27 .mat-list-item-disabled {
28 background-color: theming.get-color-from-palette($background, disabled-list-option);
29 }
30
31 .mat-list-option,
32 .mat-nav-list .mat-list-item,
33 .mat-action-list .mat-list-item {
34 &:hover, &:focus {
35 background: theming.get-color-from-palette($background, 'hover');
36 }
37 }
38
39 .mat-list-single-selected-option {
40 &, &:hover, &:focus {
41 background: theming.get-color-from-palette($background, hover, 0.12);
42 }
43 }
44}
45
46@mixin typography($config-or-theme) {
47 $config: typography.private-typography-to-2014-config(
48 theming.get-typography-config($config-or-theme));
49 $font-family: typography-utils.font-family($config);
50
51 .mat-list-item {
52 font-family: $font-family;
53 }
54
55 .mat-list-option {
56 font-family: $font-family;
57 }
58
59 // Default list
60 .mat-list-base {
61 .mat-list-item {
62 font-size: typography-utils.font-size($config, subheading-2);
63 @include list-common.base(typography-utils.font-size($config, body-1));
64 }
65
66 .mat-list-option {
67 font-size: typography-utils.font-size($config, subheading-2);
68 @include list-common.base(typography-utils.font-size($config, body-1));
69 }
70
71 .mat-subheader {
72 font-family: typography-utils.font-family($config, body-2);
73 font-size: typography-utils.font-size($config, body-2);
74 font-weight: typography-utils.font-weight($config, body-2);
75 }
76 }
77
78 // Dense list
79 .mat-list-base[dense] {
80 .mat-list-item {
81 font-size: typography-utils.font-size($config, caption);
82 @include list-common.base(typography-utils.font-size($config, caption));
83 }
84
85 .mat-list-option {
86 font-size: typography-utils.font-size($config, caption);
87 @include list-common.base(typography-utils.font-size($config, caption));
88 }
89
90 .mat-subheader {
91 font-family: $font-family;
92 font-size: typography-utils.font-size($config, caption);
93 font-weight: typography-utils.font-weight($config, body-2);
94 }
95 }
96}
97
98@mixin _density($config-or-theme) {}
99
100@mixin theme($theme-or-color-config) {
101 $theme: theming.private-legacy-get-theme($theme-or-color-config);
102 @include theming.private-check-duplicate-theme-styles($theme, 'mat-list') {
103 $color: theming.get-color-config($theme);
104 $density: theming.get-density-config($theme);
105 $typography: theming.get-typography-config($theme);
106
107 @if $color != null {
108 @include color($color);
109 }
110 @if $density != null {
111 @include _density($density);
112 }
113 @if $typography != null {
114 @include typography($typography);
115 }
116 }
117}
Note: See TracBrowser for help on using the repository browser.