-
-
Notifications
You must be signed in to change notification settings - Fork 300
/
Demo.module.scss
67 lines (52 loc) · 1.51 KB
/
Demo.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$rmd-theme-dark-elevation: true;
@import '~@react-md/app-bar/dist/mixins';
@import '~@react-md/divider/dist/mixins';
@import '~@react-md/elevation/dist/mixins';
@import '~@react-md/sheet/dist/mixins';
@import '~@react-md/theme/dist/mixins';
@import '~@react-md/typography/dist/mixins';
@import '~@react-md/utils/dist/mixins';
// duplicated from TableOfContents.scss
$toc-width: 15rem;
$demo-padding: 2rem;
$demo-padding-extra: 6rem;
.container {
@include rmd-utils-tablet-media {
@include rmd-utils-rtl-auto(margin-right, $toc-width, auto);
padding: 0 $demo-padding-extra;
:global .code--counted {
width: calc(100vw - #{$demo-padding-extra * 2});
}
}
@include rmd-utils-desktop-media {
:global .code--counted {
$offset: $rmd-sheet-static-width + $toc-width + ($demo-padding-extra * 2);
width: calc(100vw - #{$offset});
}
}
padding: 0 $demo-padding;
}
.description {
@include rmd-typography(subtitle-1);
@include rmd-typography-theme(max-width, line-width);
p {
font: inherit;
}
strong {
font-weight: map-get($rmd-typography-font-weights, bold);
}
em {
font-style: italic;
}
}
.preview {
@include rmd-elevation(2);
@include rmd-theme-dark-elevation(2, true);
@include rmd-theme(background-color, background);
@include rmd-theme-update-var(background, rmd-theme-var(surface));
@include rmd-app-bar-theme-update-var(color, rmd-theme-var(on-surface));
padding: 2rem;
}
.divider {
@include rmd-divider-theme-update-var(spacing, 6rem auto 2rem);
}