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

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

@ -10,7 +10,7 @@
<div class="content-section implementation">
<div class="card">
<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">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -27,7 +27,7 @@
</p>
</ScrollPanel>
</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">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -44,7 +44,7 @@
</p>
</ScrollPanel>
</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">
<p style="width: 600px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -85,41 +85,35 @@ export default {
line-height: 1.5;
margin: 0;
}
}
&.custombar1 {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--layer-1);
}
.p-scrollpanel-bar {
background-color: var(--primary-color);
opacity: 1;
transition: background-color .2s;
&:hover {
background-color: #007ad9;
}
}
::v-deep(.custombar1) {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b);
}
&.custombar2 {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--layer-1);
border-bottom: 9px solid var(--layer-1);
}
.p-scrollpanel-bar {
background-color: var(--primary-color);
opacity: 1;
transition: background-color .2s;
.p-scrollpanel-bar {
background-color: var(--layer-2);
border-radius: 0;
opacity: 1;
transition: background-color .2s;
&:hover {
background-color: #007ad9;
}
}
}
</style>
<style scoped>
.p-col-12 {
padding: 2rem;
::v-deep(.custombar2) {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b);
border-bottom: 9px solid var(--surface-b);
}
.p-scrollpanel-bar {
background-color: var(--surface-d);
border-radius: 0;
opacity: 1;
transition: background-color .2s;
}
}
</style>

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

@ -93,7 +93,7 @@ import ScrollPanel from 'primevue/scrollpanel';
<CodeHighlight>
<template v-pre>
&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;p&gt;
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;/ScrollPanel&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;p&gt;
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;/ScrollPanel&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;p style="width: 600px"&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -161,37 +161,37 @@ export default {
line-height: 1.5;
margin: 0;
}
}
&.custombar1 {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--layer-1);
}
.p-scrollpanel-bar {
background-color: var(--primary-color);
opacity: 1;
transition: background-color .2s;
&:hover {
background-color: #007ad9;
}
}
::v-deep(.custombar1) {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b);
}
&.custombar2 {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--layer-1);
border-bottom: 9px solid var(--layer-1);
}
.p-scrollpanel-bar {
background-color: var(--primary-color);
opacity: 1;
transition: background-color .2s;
.p-scrollpanel-bar {
background-color: var(--layer-2);
border-radius: 0;
opacity: 1;
transition: background-color .2s;
&:hover {
background-color: #007ad9;
}
}
}
::v-deep(.custombar2) {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b);
border-bottom: 9px solid var(--surface-b);
}
.p-scrollpanel-bar {
background-color: var(--surface-d);
border-radius: 0;
opacity: 1;
transition: background-color .2s;
}
}
</CodeHighlight>
</TabPanel>
</TabView>