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

Fixed scrollpanel demo

pull/496/head
Cagatay Civici 2020-09-21 16:19:06 +03:00
parent 292424bc1f
commit 0e1d57319e
2 changed files with 52 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/scrollpanel/ScrollPanelDemo.vue
View File

@ -10,7 +10,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-4"> <div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px"> <ScrollPanel style="width: 100%; height: 200px">
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -27,7 +27,7 @@
</p> </p>
</ScrollPanel> </ScrollPanel>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px" class="custombar1"> <ScrollPanel style="width: 100%; height: 200px" class="custombar1">
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -44,7 +44,7 @@
</p> </p>
</ScrollPanel> </ScrollPanel>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px" class="custombar2"> <ScrollPanel style="width: 100%; height: 200px" class="custombar2">
<p style="width: 600px"> <p style="width: 600px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -85,10 +85,11 @@ export default {
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
} }
}
&.custombar1 { ::v-deep(.custombar1) {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--layer-1); border-right: 9px solid var(--surface-b);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
@ -102,24 +103,17 @@ export default {
} }
} }
&.custombar2 { ::v-deep(.custombar2) {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--layer-1); border-right: 9px solid var(--surface-b);
border-bottom: 9px solid var(--layer-1); border-bottom: 9px solid var(--surface-b);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
background-color: var(--layer-2); background-color: var(--surface-d);
border-radius: 0; border-radius: 0;
opacity: 1; opacity: 1;
transition: background-color .2s; transition: background-color .2s;
} }
} }
}
</style>
<style scoped>
.p-col-12 {
padding: 2rem;
}
</style> </style>

20
src/views/scrollpanel/ScrollPanelDoc.vue
View File

@ -93,7 +93,7 @@ import ScrollPanel from 'primevue/scrollpanel';
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4 p-p-5"&gt;
&lt;ScrollPanel style="width: 100%; height: 200px"&gt; &lt;ScrollPanel style="width: 100%; height: 200px"&gt;
&lt;p&gt; &lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -110,7 +110,7 @@ import ScrollPanel from 'primevue/scrollpanel';
&lt;/p&gt; &lt;/p&gt;
&lt;/ScrollPanel&gt; &lt;/ScrollPanel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4 p-p-5"&gt;
&lt;ScrollPanel style="width: 100%; height: 200px" class="custombar1"&gt; &lt;ScrollPanel style="width: 100%; height: 200px" class="custombar1"&gt;
&lt;p&gt; &lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -127,7 +127,7 @@ import ScrollPanel from 'primevue/scrollpanel';
&lt;/p&gt; &lt;/p&gt;
&lt;/ScrollPanel&gt; &lt;/ScrollPanel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4 p-p-5"&gt;
&lt;ScrollPanel style="width: 100%; height: 200px" class="custombar2"&gt; &lt;ScrollPanel style="width: 100%; height: 200px" class="custombar2"&gt;
&lt;p style="width: 600px"&gt; &lt;p style="width: 600px"&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -161,10 +161,11 @@ export default {
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
} }
}
&.custombar1 { ::v-deep(.custombar1) {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--layer-1); border-right: 9px solid var(--surface-b);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
@ -178,20 +179,19 @@ export default {
} }
} }
&.custombar2 { ::v-deep(.custombar2) {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--layer-1); border-right: 9px solid var(--surface-b);
border-bottom: 9px solid var(--layer-1); border-bottom: 9px solid var(--surface-b);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
background-color: var(--layer-2); background-color: var(--surface-d);
border-radius: 0; border-radius: 0;
opacity: 1; opacity: 1;
transition: background-color .2s; transition: background-color .2s;
} }
} }
}
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>