Fixed shadow demo

pull/1304/head
Cagatay Civici 2021-05-27 20:17:12 +03:00
parent 9fab623b92
commit 54e3fae240
2 changed files with 9 additions and 6 deletions

View File

@ -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>

View File

@ -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>
` `