vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Renamed Shadow to Elevation and add more depths

pull/345/head
cagataycivici 2020-06-16 22:59:26 +03:00
parent fe17211ebb
commit 15cd91be72
8 changed files with 195 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/AppMenu.vue
View File

@ -11,7 +11,15 @@
<a href="https://www.primefaces.org/designer/primevue">Designer</a>
<a href="https://www.primefaces.org/designer/api/primevue/2.0.0">Sass API</a>
<router-link to="/accessibility">Accessibility</router-link>
<router-link to="/flexgrid">PrimeFlex</router-link>
</div>
<span>
<i class="pi pi-cog"></i>
<span>Utilities</span>
</span>
<div>
<router-link to="/elevation">Elevation</router-link>
<router-link to="/flexgrid">Grid System</router-link>
<router-link to="/icons">Icons</router-link>
</div>
@ -256,7 +264,6 @@
<router-link to="/inplace">Inplace</router-link>
<router-link to="/progressbar">ProgressBar</router-link>
<router-link to="/progressspinner">ProgressSpinner</router-link>
<router-link to="/shadow">Shadow</router-link>
<router-link to="/terminal">Terminal</router-link>
</div>
</div>

1
src/assets/styles/primevue.css
View File

@ -3,6 +3,7 @@
@import '../../components/button/Button.css';
@import '../../components/checkbox/Checkbox.css';
@import '../../components/colorpicker/ColorPicker.css';
@import '../../components/elevation/Elevation.css';
@import '../../components/inputtext/InputText.css';
@import '../../components/password/Password.css';
@import '../../components/radiobutton/RadioButton.css';

95
src/components/elevation/Elevation.css Normal file
View File

@ -0,0 +1,95 @@
.p-shadow-1 {
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
}
.p-shadow-2 {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
.p-shadow-3 {
box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
}
.p-shadow-4 {
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
.p-shadow-5 {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12);
}
.p-shadow-6 {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}
.p-shadow-7 {
box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
}
.p-shadow-8 {
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}
.p-shadow-9 {
box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
}
.p-shadow-10 {
box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12);
}
.p-shadow-11 {
box-shadow: 0 6px 7px -4px rgba(0,0,0,.2), 0 11px 15px 1px rgba(0,0,0,.14), 0 4px 20px 3px rgba(0,0,0,.12);
}
.p-shadow-12 {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2), 0 12px 17px 2px rgba(0,0,0,.14), 0 5px 22px 4px rgba(0,0,0,.12);
}
.p-shadow-13 {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2), 0 13px 19px 2px rgba(0,0,0,.14), 0 5px 24px 4px rgba(0,0,0,.12);
}
.p-shadow-14 {
box-shadow: 0 7px 9px -4px rgba(0,0,0,.2), 0 14px 21px 2px rgba(0,0,0,.14), 0 5px 26px 4px rgba(0,0,0,.12);
}
.p-shadow-15 {
box-shadow: 0 8px 9px -5px rgba(0,0,0,.2), 0 15px 22px 2px rgba(0,0,0,.14), 0 6px 28px 5px rgba(0,0,0,.12);
}
.p-shadow-16 {
box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
}
.p-shadow-17 {
box-shadow: 0 8px 11px -5px rgba(0,0,0,.2), 0 17px 26px 2px rgba(0,0,0,.14), 0 6px 32px 5px rgba(0,0,0,.12);
}
.p-shadow-18 {
box-shadow: 0 9px 11px -5px rgba(0,0,0,.2), 0 18px 28px 2px rgba(0,0,0,.14), 0 7px 34px 6px rgba(0,0,0,.12);
}
.p-shadow-19 {
box-shadow: 0 9px 12px -6px rgba(0,0,0,.2), 0 19px 29px 2px rgba(0,0,0,.14), 0 7px 36px 6px rgba(0,0,0,.12);
}
.p-shadow-20 {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2), 0 20px 31px 3px rgba(0,0,0,.14), 0 8px 38px 7px rgba(0,0,0,.12);
}
.p-shadow-21 {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2), 0 21px 33px 3px rgba(0,0,0,.14), 0 8px 40px 7px rgba(0,0,0,.12);
}
.p-shadow-22 {
box-shadow: 0 10px 14px -6px rgba(0,0,0,.2), 0 22px 35px 3px rgba(0,0,0,.14), 0 8px 42px 7px rgba(0,0,0,.12);
}
.p-shadow-23 {
box-shadow: 0 11px 14px -7px rgba(0,0,0,.2), 0 23px 36px 3px rgba(0,0,0,.14), 0 9px 44px 8px rgba(0,0,0,.12);
}
.p-shadow-24 {
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
}

10
src/router.js
View File

@ -290,6 +290,11 @@ export default new Router({
path: '/editor',
name: 'editor',
component: () => import('./views/editor/EditorDemo.vue')
},
{
path: '/elevation',
name: 'elevation',
component: () => import('./views/elevation/ElevationDemo.vue')
},
{
path: '/fieldset',
@ -451,11 +456,6 @@ export default new Router({
name: 'selectbutton',
component: () => import('./views/selectbutton/SelectButtonDemo.vue')
},
{
path: '/shadow',
name: 'shadow',
component: () => import('./views/shadow/ShadowDemo.vue')
},
{
path: '/sidebar',
name: 'sidebar',

45
src/views/elevation/ElevationDemo.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Elevation</h1>
<p>Elevation is used to specify separation between surfaces and elements along the z-axis.</p>
</div>
</div>
<div class="content-section implementation">
<div class="p-grid">
<div class="p-col" v-for="index in 24" :key="index">
<div :class="['box', 'p-shadow-' + index]">
p-shadow-{{index}}
</div>
</div>
</div>
</div>
<ElevationDoc />
</div>
</template>
<script>
import ElevationDoc from './ElevationDoc';
export default {
components: {
'ElevationDoc': ElevationDoc
}
}
</script>
<style lang="scss" scoped>
.box {
min-height: 100px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 2rem;
border-radius: 4px;
}
</style>

40
src/views/elevation/ElevationDoc.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Getting Started</h3>
<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
<CodeHighlight>
&lt;div class="p-shadow-1" /&gt;
</CodeHighlight>
<h3>Levels</h3>
<p>There are 24 depths available varying from 1 to 24.</p>
<CodeHighlight>
&lt;div class="p-shadow-1" /&gt;
&lt;div class="p-shadow-24" /&gt;
</CodeHighlight>
<h3>Dependencies</h3>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/shadow" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
<template v-pre>
&lt;div class="p-grid"&gt;
&lt;div class="p-col" v-for="index in 24" :key="index"&gt;
&lt;div :class="['box', 'p-shadow-' + index]"&gt;
p-shadow-{{index}}
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>

69
src/views/shadow/ShadowDemo.vue
View File

@ -1,69 +0,0 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Shadow</h1>
<p>Shadow is used to add depth to an element.</p>
</div>
</div>
<div class="content-section implementation">
<div class="p-grid">
<div class="p-col-12 p-md-2">
<div class="box">
none
</div>
</div>
<div class="p-col-12 p-md-2">
<div class="box p-shadow-1">
p-shadow-1
</div>
</div>
<div class="p-col-12 p-md-2">
<div class="box p-shadow-2">
p-shadow-2
</div>
</div>
<div class="p-col-12 p-md-2">
<div class="box p-shadow-3">
p-shadow-3
</div>
</div>
<div class="p-col-12 p-md-2">
<div class="box p-shadow-4">
p-shadow-4
</div>
</div>
<div class="p-col-12 p-md-2">
<div class="box p-shadow-5">
p-shadow-5
</div>
</div>
</div>
</div>
<ShadowDoc />
</div>
</template>
<script>
import ShadowDoc from './ShadowDoc';
export default {
components: {
'ShadowDoc': ShadowDoc
}
}
</script>
<style lang="scss" scoped>
.box {
background-color: #e9ecef;
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
</style>

68
src/views/shadow/ShadowDoc.vue
View File

@ -1,68 +0,0 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Getting Started</h3>
<p>A shadow is added to an element using the <i>.p-shadow-{level}</i> class.</p>
<CodeHighlight>
&lt;div class="p-shadow-1" /&gt;
</CodeHighlight>
<h3>Levels</h3>
<p>There are 5 depths available varying from 1 to 5.</p>
<CodeHighlight>
&lt;div class="p-shadow-1" /&gt;
&lt;div class="p-shadow-2" /&gt;
&lt;div class="p-shadow-3" /&gt;
&lt;div class="p-shadow-4" /&gt;
&lt;div class="p-shadow-5" /&gt;
</CodeHighlight>
<h3>Dependencies</h3>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/shadow" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
<template v-pre>
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-2"&gt;
&lt;div class="box"&gt;
none
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-2"&gt;
&lt;div class="box p-shadow-1"&gt;
p-shadow-1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-2"&gt;
&lt;div class="box p-shadow-2"&gt;
p-shadow-2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-2"&gt;
&lt;div class="box p-shadow-3"&gt;
p-shadow-3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-2"&gt;
&lt;div class="box p-shadow-4"&gt;
p-shadow-4
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-2"&gt;
&lt;div class="box p-shadow-5"&gt;
p-shadow-5
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>