material-design-3/index.html at main · amoreaulemay/material-design-3 · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Design Components v3.0</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <style>
        body {
            --margin: 8px;

            box-sizing: content-box;
            height: calc(100vh - (2 * var(--margin)));
            width: calc(100vw - (2 * var(--margin)));
            background: #FFFBFE;
            overflow: hidden;
            margin: var(--margin);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;
            overflow-y: scroll;
        }

        @media (prefers-color-scheme: dark) {
            body {
                background: #1C1B1F;
            }
        }
    </style>
</head>
<body>
    <mdc-elevated-button>Test</mdc-elevated-button>
    <mdc-filled-button>Test</mdc-filled-button>
    <mdc-filled-tonal-button>Test</mdc-filled-tonal-button>
    <mdc-outlined-button>Test</mdc-outlined-button>
    <mdc-text-button>Test</mdc-text-button>
    <mdc-fab icon="edit"></mdc-fab>
    <mdc-fab-extended icon="edit" title="compose"></mdc-fab-extended>
    <mdc-filled-icon-button icon="favorite"></mdc-filled-icon-button>
    <mdc-filled-tonal-icon-button icon="favorite"></mdc-filled-tonal-icon-button>
    <mdc-standard-icon-button icon="star"></mdc-standard-icon-button>
    <mdc-bottom-app-bar>
        <mdc-standard-icon-button icon="search" slot="icons"></mdc-standard-icon-button>
        <mdc-standard-icon-button icon="delete" slot="icons"></mdc-standard-icon-button>
        <mdc-standard-icon-button icon="more_vert" slot="overflow-menu"></mdc-standard-icon-button>
        <mdc-fab icon="add" slot="fab"></mdc-fab>
    </mdc-bottom-app-bar>
    <script type="module" src="/src/index.ts"></script>
</body>
</html>