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

Refactor on CarouselDoc

pull/104/head
mertsincan 2019-10-22 16:15:09 +03:00
parent b7d4b542a5
commit 7dd6f294b9
1 changed files with 78 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/carousel/CarouselDoc.vue
View File

@ -408,44 +408,86 @@ export default {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.carousel-demo .car-details > .p-grid { .p-carousel {
.p-carousel-content {
.p-carousel-item {
.car-details {
> .p-grid {
border: 1px solid #b3c2ca; border: 1px solid #b3c2ca;
border-radius: 3px; border-radius: 3px;
margin: .3em; margin: .3em;
text-align: center; text-align: center;
padding: 2em 0 2.25em 0; padding: 2em 0 2.25em 0;
} }
}
.carousel-demo .car-data .car-title { .car-data {
.car-title {
font-weight: 700; font-weight: 700;
font-size: 20px; font-size: 20px;
margin-top: 24px; margin-top: 24px;
} }
.carousel-demo .car-data .car-subtitle { .car-subtitle {
margin: .25em 0 2em 0; margin: .25em 0 2em 0;
} }
.carousel-demo .car-data button { button {
margin-left: .5em; margin-left: .5em;
}
.carousel-demo .car-data button:first-child { &amp;:first-child {
margin-left: 0; margin-left: 0;
} }
}
}
}
}
.carousel-demo .p-carousel.custom-carousel .p-carousel-dot-icon { &amp;.custom-carousel {
.p-carousel-dot-icon {
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
border-radius: 50%; border-radius: 50%;
} }
}
.carousel-demo .p-carousel.p-carousel-horizontal .p-carousel-content .p-carousel-item.p-carousel-item-start .car-details > .p-grid { &amp;.p-carousel-horizontal {
.p-carousel-content {
.p-carousel-item {
&amp;.p-carousel-item-start {
.car-details {
> .p-grid {
margin-left: .6em; margin-left: .6em;
}
}
}
&amp;.p-carousel-item-end {
.car-details {
> .p-grid {
margin-right: .6em;
}
}
}
}
}
}
} }
.carousel-demo .p-carousel.p-carousel-horizontal .p-carousel-content .p-carousel-item.p-carousel-item-end .car-details > .p-grid { /* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
margin-right: .6em; .dark-theme {
.p-carousel {
.p-carousel-content {
.p-carousel-item {
.car-details {
> .p-grid {
border: 1px solid #191919;
background-color: #323232;
}
}
}
}
}
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>