91 lines
2.3 KiB
CSS
91 lines
2.3 KiB
CSS
:root {
|
|
--pagination-skew: 2rem;
|
|
--pagination-border-width: 1px;
|
|
}
|
|
|
|
.pagination {
|
|
@apply flex h-12 lg:h-16 overflow-hidden bg-primary-bg shadow-md;
|
|
}
|
|
|
|
.pagination-item {
|
|
flex: 1 1 0;
|
|
margin-right: calc(-1 * var(--pagination-skew));
|
|
@apply relative;
|
|
}
|
|
|
|
.pagination-item:last-child {
|
|
@apply mr-0;
|
|
}
|
|
|
|
/* Outer clip-path for button shape */
|
|
.pagination-item:first-child {
|
|
clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, 0 100%);
|
|
}
|
|
|
|
.pagination-item:not(:first-child):not(:last-child) {
|
|
clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, var(--pagination-skew) 100%);
|
|
}
|
|
|
|
.pagination-item:last-child {
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pagination-skew) 100%);
|
|
}
|
|
|
|
/* Border and content wrappers */
|
|
.pagination-item__border {
|
|
@apply w-full h-full flex items-center justify-center bg-primary-dark/10;
|
|
}
|
|
|
|
.pagination-item__inner {
|
|
@apply w-full h-full flex items-center justify-center;
|
|
@apply lg:text-2xl font-bold;
|
|
}
|
|
|
|
a.pagination-item__border > .pagination-item__inner:hover {
|
|
@apply bg-primary-light text-white;
|
|
}
|
|
|
|
/* Inner clip-path for border effect */
|
|
.pagination-item:first-child .pagination-item__inner {
|
|
clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, 0 100%);
|
|
}
|
|
|
|
.pagination-item:not(:first-child) .pagination-item__inner {
|
|
/* No left/bottom-left border on overlapping edge to prevent double borders */
|
|
clip-path: polygon(0 0, calc(100% - var(--pagination-skew) - var(--pagination-border-width)) 0, calc(100% - var(--pagination-border-width)) 100%, var(--pagination-skew) 100%);
|
|
}
|
|
|
|
.pagination-item:last-child .pagination-item__inner {
|
|
/* No left/bottom-left border on overlapping edge, no right border */
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pagination-skew) 100%);
|
|
}
|
|
|
|
.sbw {
|
|
.pagination-item__border {
|
|
@apply bg-sbw-primary-dark/10;
|
|
}
|
|
|
|
a.pagination-item__border > .pagination-item__inner:hover {
|
|
@apply bg-sbw-primary;
|
|
}
|
|
}
|
|
|
|
.snz {
|
|
.pagination-item__border {
|
|
@apply bg-snz-primary-dark/10;
|
|
}
|
|
|
|
a.pagination-item__border > .pagination-item__inner:hover {
|
|
@apply bg-snz-primary;
|
|
}
|
|
}
|
|
|
|
.ser {
|
|
.pagination-item__border {
|
|
@apply bg-ser-primary/10;
|
|
}
|
|
|
|
a.pagination-item__border > .pagination-item__inner:hover {
|
|
@apply bg-ser-primary;
|
|
}
|
|
}
|