-
-
Notifications
You must be signed in to change notification settings - Fork 303
/
SimpleExample.module.scss
53 lines (45 loc) · 1.36 KB
/
SimpleExample.module.scss
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// sass-lint:disable class-name-format
@use '@react-md/theme/dist/color-palette' as color;
@use 'react-md' as * with (
$rmd-theme-primary: color.$rmd-teal-500,
$rmd-theme-secondary: color.$rmd-pink-a-200,
);
.container {
@include rmd-theme-update-var(background, $rmd-white-base);
@include rmd-theme-update-var(
text-primary-on-background,
rgba($rmd-black-base, 0.87)
);
@include rmd-theme-update-var(primary, $rmd-blue-grey-500);
@include rmd-theme-update-var(on-primary, $rmd-white-base);
@include rmd-theme-update-var(secondary, $rmd-orange-a-200);
@include rmd-theme-update-var(on-secondary, $rmd-black-base);
@include rmd-divider-theme-update-var(
background-color,
rmd-divider-theme-var(background-color-on-light)
);
@include rmd-theme(background-color, background);
@include rmd-theme(color, text-primary-on-background);
padding: 2rem 1.5rem;
text-align: center;
h6 {
margin: 0.5em 0;
padding: 0.25em 0;
}
}
.defaultPrimary {
background-color: $rmd-theme-primary;
color: $rmd-theme-on-primary;
}
.defaultSecondary {
background-color: $rmd-theme-secondary;
color: $rmd-theme-on-secondary;
}
.themePrimary {
@include rmd-theme(background-color, primary);
@include rmd-theme(color, on-primary);
}
.themeSecondary {
@include rmd-theme(background-color, secondary);
@include rmd-theme(color, on-secondary);
}