blob: 4de9f6f8812fbf324288787a39137c88d8937cc6 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>shadow test</title>
9
10 <!-- Fonts -->
11 <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
12 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
13 rel="stylesheet">
14
15 <!-- Page styles -->
16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
17 <link rel="stylesheet" href="../../material.min.css">
18 <link rel="stylesheet" href="../../components/demos.css">
19 <script src="../../material.min.js"></script>
20
21
22 <style>
23 /**
24 * Copyright 2015 Google Inc. All Rights Reserved.
25 *
26 * Licensed under the Apache License, Version 2.0 (the "License");
27 * you may not use this file except in compliance with the License.
28 * You may obtain a copy of the License at
29 *
30 * http://www.apache.org/licenses/LICENSE-2.0
31 *
32 * Unless required by applicable law or agreed to in writing, software
33 * distributed under the License is distributed on an "AS IS" BASIS,
34 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
35 * See the License for the specific language governing permissions and
36 * limitations under the License.
37 */
38
39.demo-page--shadow .demo-preview-block {
40 height: 100px;
41}
42
43.demo-shadow-card {
44 background-color: #fff;
45 border-radius: 2px;
46 display: block;
47 height: 72px;
48 margin-bottom: 20px;
49 margin-right: 32px;
50 padding: 10px;
51 text-align: center;
52 float: left;
53 color: #9E9E9E;
54 display: -webkit-flex;
55 display: -ms-flexbox;
56 display: flex;
57 -webkit-align-items: center;
58 -ms-flex-align: center;
59 align-items: center;
60 -webkit-justify-content: center;
61 -ms-flex-pack: center;
62 justify-content: center;
63 transition-property: opacity, -webkit-transform;
64 transition-property: opacity, transform;
65 transition-property: opacity, transform, -webkit-transform;
66 width: 72px;
67}
68
69@media screen and (max-width: 360px ) {
70 .demo-shadow-card {
71 width: 27px;
72 }
73}
74
75 </style>
76
77 </head>
78 <body>
79
80 <div style="padding-top: 24px;">
81
82
83 <div class="demo-preview-block demo-page--shadow">
84 <div class="demo-shadow-card mdl-shadow--2dp">2dp</div>
85 <div class="demo-shadow-card mdl-shadow--3dp">3dp</div>
86 <div class="demo-shadow-card mdl-shadow--4dp">4dp</div>
87 <div class="demo-shadow-card mdl-shadow--6dp">6dp</div>
88 <div class="demo-shadow-card mdl-shadow--8dp">8dp</div>
89 <div class="demo-shadow-card mdl-shadow--16dp">16dp</div>
90 </div>
91
92
93 </div>
94 <!-- Built with love using Material Design Lite -->
95
96
97 <script>
98
99 </script>
100 </body>
101</html>