• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2021 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16{
17  "@app-component/mediaQuery": {
18    "_descriptor": {},
19    "data": {},
20    "template": {
21      "type": "div",
22      "attr": {
23        "debugLine": "pages/mediaQuery/mediaQuery:1",
24        "value": "mediaQuery_test"
25      }
26    },
27    "style": {
28      "@MEDIA": [
29        {
30          "condition": "screen and (min-width: 600) and (max-width: 1200)",
31          ".header": {
32            "width": "100%",
33            "height": "60px",
34            "fontSize": "16px",
35            "alignItems": "center",
36            "justifyContent": "center"
37          },
38          ".footer": {
39            "width": "100%",
40            "height": "40px",
41            "alignItems": "center"
42          }
43        },
44        {
45          "condition": "(device-type: tv)",
46          ".page-title-wrap": {
47            "paddingTop": "50px",
48            "paddingBottom": "80px",
49            "justifyContent": "center"
50          },
51          ".page-title": {
52            "paddingTop": "30px",
53            "paddingBottom": "30px",
54            "paddingLeft": "40px",
55            "paddingRight": "40px",
56            "borderTopColor": "#bbbbbb",
57            "borderRightColor": "#bbbbbb",
58            "borderBottomColor": "#bbbbbb",
59            "borderLeftColor": "#bbbbbb",
60            "color": "#bbbbbb",
61            "borderBottomWidth": "2px"
62          },
63          ".btn": {
64            "height": "80px",
65            "textAlign": "center",
66            "borderBottomLeftRadius": "5px",
67            "borderBottomRightRadius": "5px",
68            "borderTopLeftRadius": "5px",
69            "borderTopRightRadius": "5px",
70            "marginRight": "60px",
71            "marginLeft": "60px",
72            "marginBottom": "50px",
73            "color": "#ffffff",
74            "fontSize": "30px",
75            "backgroundColor": "#0faeff"
76          },
77          ".container": {
78            "width": "500px",
79            "height": "500px",
80            "backgroundColor": "#fa8072"
81          },
82          ".title": {
83            "fontSize": "16px",
84            "color": "#333333",
85            "alignItems": "center"
86          },
87          ".button": {
88            "paddingTop": "50px",
89            "fontSize": "16px",
90            "color": "#666666",
91            "alignItems": "center",
92            "justifyContent": "center"
93          }
94        }
95      ]
96    }
97  }
98}