Select Git revision
-
Volker Schukai authoredVolker Schukai authored
embedded-pagination.pcss 3.15 KiB
@import "../../style/normalize.pcss";
@import "../../style/display.pcss";
@import "../../style/mixin/typography.pcss";
@import "../../style/mixin/hover.pcss";
@import "../../style/mixin/media.pcss";
@import "../../style/control.pcss";
@import "../../style/property.pcss";
[data-monster-role=pagination] {
@mixin paragraph;
display: flex;
justify-content: center;
box-sizing: border-box;
& ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
list-style: none;
padding-left: 0;
margin: 20px 0;
}
& ul li {
margin: 0;
border-left: solid 1px black;
padding: 0 10px;
& a, & a:link, & a:visited, & a:hover, & a:active, & a:focus {
width: max-content;
color: var(--monster-table-color);
background-color: var(--monster-table-bg-color);
text-decoration: none;
outline: none;
padding: 0 0.4rem;
}
& a:hover, & a:active, & a:focus {
outline: none;
}
& a:focus {
outline: 1px dashed var(--monster-color-selection-4);
outline-offset: 2px;
}
@media (prefers-color-scheme: light) {
& a:focus {
outline: 1px dashed var(--monster-color-selection-3);
outline-offset: 2px;
}
}
& a.current {
cursor: unset;
color: var(--monster-color-primary-3);
background-color: var(--monster-bg-color-primary-3);
}
& a.disabled {
cursor: not-allowed;
}
}
& ul li {
&:first-child {
border-left: none;
}
}
@mixin viewport-7 {
& ul li {
padding: 0 2px;
}
& ul li:nth-child(1) {
display: none;
}
& ul li:nth-child(2) {
display: none;
}
& ul li:nth-child(3) {
border-left: none;
}
}
/*
& [data-monster-error-state=hidden] {
display: none;
}
& [data-monster-loading-state=hidden] {
display: none;
}
*/
/** & .pagination-loading-state {
align-items: center;
display: flex;
&.hidden {
display: none;
}
}
& .pagination-error-state {
align-items: center;
display: flex;
&.hidden {
display: none;
}
& .state-icon-container {
width:2em;
height:2em;
margin:0 5px 0 2px;
}
}*/
/*
& .pagination-state {
display: flex !important;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
justify-content: center;
& [data-monster-error-state] {
width:2em;
height:2em;
margin:0 5px 0 2px;
display: flex;
align-items: center;
justify-content: center;
}
& [data-monster-loading-state] {
width:2em;
height:2em;
margin:0 5px 0 2px;
}
}*/
}