Renamed Shadow to Elevation and add more depths
cagataycivici
parent
fe17211ebb
commit
15cd91be72
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<div class="p-shadow-1" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Levels</h3>
|
||||
<p>There are 24 depths available varying from 1 to 24.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-shadow-1" />
|
||||
<div class="p-shadow-24" />
|
||||
</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>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<div class="p-shadow-1" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Levels</h3>
|
||||
<p>There are 5 depths available varying from 1 to 5.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-shadow-1" />
|
||||
<div class="p-shadow-2" />
|
||||
<div class="p-shadow-3" />
|
||||
<div class="p-shadow-4" />
|
||||
<div class="p-shadow-5" />
|
||||
</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>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue