Fixed shadow demo
parent
9fab623b92
commit
54e3fae240
|
@ -11,7 +11,7 @@
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col" v-for="index in 24" :key="index">
|
<div class="p-col" v-for="index in 24" :key="index">
|
||||||
<div :class="['box', 'p-shadow-' + index]">
|
<div :class="['shadow-box', 'p-shadow-' + index]">
|
||||||
p-shadow-{{index}}
|
p-shadow-{{index}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -33,7 +33,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.shadow-box {
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -42,5 +42,6 @@ export default {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
background-color: var(--surface-e);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -29,7 +29,7 @@ export default {
|
||||||
<div>
|
<div>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col" v-for="index in 24" :key="index">
|
<div class="p-col" v-for="index in 24" :key="index">
|
||||||
<div :class="['box', 'p-shadow-' + index]">
|
<div :class="['shadow-box', 'p-shadow-' + index]">
|
||||||
p-shadow-{{index}}
|
p-shadow-{{index}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -43,7 +43,7 @@ export default {
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.shadow-box {
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -52,6 +52,7 @@ export default {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
background-color: var(--surface-e);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
`
|
`
|
||||||
|
@ -63,7 +64,7 @@ export default {
|
||||||
<div>
|
<div>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col" v-for="index in 24" :key="index">
|
<div class="p-col" v-for="index in 24" :key="index">
|
||||||
<div :class="['box', 'p-shadow-' + index]">
|
<div :class="['shadow-box', 'p-shadow-' + index]">
|
||||||
p-shadow-{{index}}
|
p-shadow-{{index}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -77,7 +78,7 @@ export default {
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.shadow-box {
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -86,6 +87,7 @@ export default {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
background-color: var(--surface-e);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
`
|
`
|
||||||
|
|
Loading…
Reference in New Issue