Refactor on CarouselDoc
parent
b7d4b542a5
commit
7dd6f294b9
|
@ -408,45 +408,87 @@ export default {
|
|||
</CodeHighlight>
|
||||
|
||||
<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-radius: 3px;
|
||||
margin: .3em;
|
||||
text-align: center;
|
||||
padding: 2em 0 2.25em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-demo .car-data .car-title {
|
||||
.car-data {
|
||||
.car-title {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.carousel-demo .car-data .car-subtitle {
|
||||
.car-subtitle {
|
||||
margin: .25em 0 2em 0;
|
||||
}
|
||||
|
||||
.carousel-demo .car-data button {
|
||||
button {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.carousel-demo .car-data button:first-child {
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-demo .p-carousel.custom-carousel .p-carousel-dot-icon {
|
||||
&.custom-carousel {
|
||||
.p-carousel-dot-icon {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.carousel-demo .p-carousel.p-carousel-horizontal .p-carousel-content .p-carousel-item.p-carousel-item-start .car-details > .p-grid {
|
||||
margin-left: .6em;
|
||||
}
|
||||
|
||||
.carousel-demo .p-carousel.p-carousel-horizontal .p-carousel-content .p-carousel-item.p-carousel-item-end .car-details > .p-grid {
|
||||
&.p-carousel-horizontal {
|
||||
.p-carousel-content {
|
||||
.p-carousel-item {
|
||||
&.p-carousel-item-start {
|
||||
.car-details {
|
||||
> .p-grid {
|
||||
margin-left: .6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-carousel-item-end {
|
||||
.car-details {
|
||||
> .p-grid {
|
||||
margin-right: .6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
|
||||
.dark-theme {
|
||||
.p-carousel {
|
||||
.p-carousel-content {
|
||||
.p-carousel-item {
|
||||
.car-details {
|
||||
> .p-grid {
|
||||
border: 1px solid #191919;
|
||||
background-color: #323232;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
|
Loading…
Reference in New Issue