Skip to content

Commit 11e3bae

Browse files
nolimits4webnolimits4web
committed
Add Elevation demos
1 parent c7c797f commit 11e3bae

12 files changed

Lines changed: 380 additions & 2 deletions

File tree

‎kitchen-sink/core/css/app.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -465,3 +465,12 @@ code {
465465
.theme-dark .demo-icon .demo-icon-name {
466466
color: #aaa;
467467
}
468+
469+
.elevation-demo {
470+
height: 100px;
471+
margin: 30px 10px;
472+
background: #fff;
473+
font-size: 18px;
474+
text-align: center;
475+
line-height: 100px;
476+
}

‎kitchen-sink/core/index.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<meta name="theme-color" content="#2196f3">
99
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
1010
<title>Framework7</title>
11-
<link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
11+
<link rel="stylesheet" href="../../build/core/css/framework7.css">
1212
<link rel="stylesheet" href="css/app.css">
1313
<link rel="apple-touch-icon" href="img/f7-icon-square.png">
1414
<link rel="icon" href="img/f7-icon.png">
@@ -234,6 +234,14 @@
234234
</div>
235235
</a>
236236
</li>
237+
<li>
238+
<a class="item-content item-link" href="/elevation/">
239+
<div class="item-media"><i class="icon icon-f7"></i></div>
240+
<div class="item-inner">
241+
<div class="item-title">Elevation</div>
242+
</div>
243+
</a>
244+
</li>
237245
<li>
238246
<a class="item-content item-link" href="/fab/">
239247
<div class="item-media"><i class="icon icon-f7"></i></div>
@@ -601,7 +609,7 @@
601609
</div>
602610
</div>
603611
</div>
604-
<script src="../../packages/core/js/framework7.min.js"></script>
612+
<script src="../../build/core/js/framework7.js"></script>
605613
<script src="js/routes.js"></script>
606614
<script src="js/app.js"></script>
607615
</body>

‎kitchen-sink/core/js/routes.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,10 @@ var routes = [
118118
path: '/dialog/',
119119
componentUrl: './pages/dialog.html',
120120
},
121+
{
122+
path: '/elevation/',
123+
url: './pages/elevation.html',
124+
},
121125
{
122126
path: '/fab/',
123127
url: './pages/fab.html',

‎kitchen-sink/core/pages/elevation.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<div class="page">
2+
<div class="navbar">
3+
<div class="navbar-inner sliding">
4+
<div class="left">
5+
<a href="#" class="link back">
6+
<i class="icon icon-back"></i>
7+
<span class="ios-only">Back</span>
8+
</a>
9+
</div>
10+
<div class="title">Elevation</div>
11+
</div>
12+
</div>
13+
<div class="page-content">
14+
<div class="block">
15+
<p>Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 1 to 24.</p>
16+
<p>Elevation can be added to any element by adding <code>elevation-1</code>, <code>elevation-2</code>, ..., <code>elevation-24</code> classes</p>
17+
</div>
18+
<div class="block">
19+
<div class="row">
20+
<div class="col">
21+
<div class="elevation-demo elevation-1">1</div>
22+
</div>
23+
<div class="col">
24+
<div class="elevation-demo elevation-2">2</div>
25+
</div>
26+
<div class="col">
27+
<div class="elevation-demo elevation-3">3</div>
28+
</div>
29+
</div>
30+
<div class="row">
31+
<div class="col">
32+
<div class="elevation-demo elevation-4">4</div>
33+
</div>
34+
<div class="col">
35+
<div class="elevation-demo elevation-5">5</div>
36+
</div>
37+
<div class="col">
38+
<div class="elevation-demo elevation-6">6</div>
39+
</div>
40+
</div>
41+
<div class="row">
42+
<div class="col">
43+
<div class="elevation-demo elevation-7">7</div>
44+
</div>
45+
<div class="col">
46+
<div class="elevation-demo elevation-8">8</div>
47+
</div>
48+
<div class="col">
49+
<div class="elevation-demo elevation-9">9</div>
50+
</div>
51+
</div>
52+
<div class="row">
53+
<div class="col">
54+
<div class="elevation-demo elevation-10">10</div>
55+
</div>
56+
<div class="col">
57+
<div class="elevation-demo elevation-11">11</div>
58+
</div>
59+
<div class="col">
60+
<div class="elevation-demo elevation-12">12</div>
61+
</div>
62+
</div>
63+
<div class="row">
64+
<div class="col">
65+
<div class="elevation-demo elevation-13">13</div>
66+
</div>
67+
<div class="col">
68+
<div class="elevation-demo elevation-14">14</div>
69+
</div>
70+
<div class="col">
71+
<div class="elevation-demo elevation-15">15</div>
72+
</div>
73+
</div>
74+
<div class="row">
75+
<div class="col">
76+
<div class="elevation-demo elevation-16">16</div>
77+
</div>
78+
<div class="col">
79+
<div class="elevation-demo elevation-17">17</div>
80+
</div>
81+
<div class="col">
82+
<div class="elevation-demo elevation-18">18</div>
83+
</div>
84+
</div>
85+
<div class="row">
86+
<div class="col">
87+
<div class="elevation-demo elevation-19">19</div>
88+
</div>
89+
<div class="col">
90+
<div class="elevation-demo elevation-20">20</div>
91+
</div>
92+
<div class="col">
93+
<div class="elevation-demo elevation-21">21</div>
94+
</div>
95+
</div>
96+
<div class="row">
97+
<div class="col">
98+
<div class="elevation-demo elevation-22">22</div>
99+
</div>
100+
<div class="col">
101+
<div class="elevation-demo elevation-23">23</div>
102+
</div>
103+
<div class="col">
104+
<div class="elevation-demo elevation-24">24</div>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</div>

‎kitchen-sink/react/css/app.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -494,3 +494,12 @@ code {
494494
border-left-color: #282828;
495495
}
496496
}
497+
498+
.elevation-demo {
499+
height: 100px;
500+
margin: 30px 10px;
501+
background: #fff;
502+
font-size: 18px;
503+
text-align: center;
504+
line-height: 100px;
505+
}

‎kitchen-sink/react/src/pages/elevation.jsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from 'react';
2+
import { Page, Navbar, BlockTitle, Block, Row, Col } from 'framework7-react';
3+
4+
export default () => (
5+
<Page>
6+
<Navbar title="Elevation" backLink="Back"></Navbar>
7+
<Block>
8+
<p>Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 1 to 24.</p>
9+
<p>Elevation can be added to any element by adding <code>elevation-1</code>, <code>elevation-2</code>, ..., <code>elevation-24</code> classes</p>
10+
</Block>
11+
<Block>
12+
<Row>
13+
<Col>
14+
<div className="elevation-demo elevation-1">1</div>
15+
</Col>
16+
<Col>
17+
<div className="elevation-demo elevation-2">2</div>
18+
</Col>
19+
<Col>
20+
<div className="elevation-demo elevation-3">3</div>
21+
</Col>
22+
</Row>
23+
<Row>
24+
<Col>
25+
<div className="elevation-demo elevation-4">4</div>
26+
</Col>
27+
<Col>
28+
<div className="elevation-demo elevation-5">5</div>
29+
</Col>
30+
<Col>
31+
<div className="elevation-demo elevation-6">6</div>
32+
</Col>
33+
</Row>
34+
<Row>
35+
<Col>
36+
<div className="elevation-demo elevation-7">7</div>
37+
</Col>
38+
<Col>
39+
<div className="elevation-demo elevation-8">8</div>
40+
</Col>
41+
<Col>
42+
<div className="elevation-demo elevation-9">9</div>
43+
</Col>
44+
</Row>
45+
<Row>
46+
<Col>
47+
<div className="elevation-demo elevation-10">10</div>
48+
</Col>
49+
<Col>
50+
<div className="elevation-demo elevation-11">11</div>
51+
</Col>
52+
<Col>
53+
<div className="elevation-demo elevation-12">12</div>
54+
</Col>
55+
</Row>
56+
<Row>
57+
<Col>
58+
<div className="elevation-demo elevation-13">13</div>
59+
</Col>
60+
<Col>
61+
<div className="elevation-demo elevation-14">14</div>
62+
</Col>
63+
<Col>
64+
<div className="elevation-demo elevation-15">15</div>
65+
</Col>
66+
</Row>
67+
<Row>
68+
<Col>
69+
<div className="elevation-demo elevation-16">16</div>
70+
</Col>
71+
<Col>
72+
<div className="elevation-demo elevation-17">17</div>
73+
</Col>
74+
<Col>
75+
<div className="elevation-demo elevation-18">18</div>
76+
</Col>
77+
</Row>
78+
<Row>
79+
<Col>
80+
<div className="elevation-demo elevation-19">19</div>
81+
</Col>
82+
<Col>
83+
<div className="elevation-demo elevation-20">20</div>
84+
</Col>
85+
<Col>
86+
<div className="elevation-demo elevation-21">21</div>
87+
</Col>
88+
</Row>
89+
<Row>
90+
<Col>
91+
<div className="elevation-demo elevation-22">22</div>
92+
</Col>
93+
<Col>
94+
<div className="elevation-demo elevation-23">23</div>
95+
</Col>
96+
<Col>
97+
<div className="elevation-demo elevation-24">24</div>
98+
</Col>
99+
</Row>
100+
</Block>
101+
</Page>
102+
);

‎kitchen-sink/react/src/pages/home.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ export default () => (
6161
<ListItem link="/dialog/" title="Dialog">
6262
<Icon slot="media" icon="icon-f7" />
6363
</ListItem>
64+
<ListItem link="/elevation/" title="Elevation">
65+
<Icon slot="media" icon="icon-f7" />
66+
</ListItem>
6467
<ListItem link="/fab/" title="FAB">
6568
<Icon slot="media" icon="icon-f7" />
6669
</ListItem>

‎kitchen-sink/react/src/routes.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import ContactsList from './pages/contacts-list.jsx';
1616
import ContentBlock from './pages/content-block.jsx';
1717
import DataTable from './pages/data-table.jsx';
1818
import Dialog from './pages/dialog.jsx';
19+
import Elevation from './pages/elevation.jsx';
1920
import Fab from './pages/fab.jsx';
2021
import FabMorph from './pages/fab-morph.jsx';
2122
import FormStorage from './pages/form-storage.jsx';
@@ -224,6 +225,10 @@ export default [
224225
path: '/dialog/',
225226
component: Dialog,
226227
},
228+
{
229+
path: '/elevation/',
230+
component: Elevation,
231+
},
227232
{
228233
path: '/fab/',
229234
component: Fab,

‎kitchen-sink/vue/css/app.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -494,3 +494,11 @@ code {
494494
border-left-color: #282828;
495495
}
496496
}
497+
.elevation-demo {
498+
height: 100px;
499+
margin: 30px 10px;
500+
background: #fff;
501+
font-size: 18px;
502+
text-align: center;
503+
line-height: 100px;
504+
}

0 commit comments

Comments
 (0)