Skip to content
Snippets Groups Projects
Select Git revision
  • 726fc1e01496a0dd2ad20516ae12c87acaab5bd3
  • master default protected
2 results

hello.html

Blame
  • embedded-pagination.pcss 2.26 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 text;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
    
        & ul {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            list-style: none;
    
            padding-left: 0;
            margin: 20px 0;
            
    
        }
    
        & ul li {
    
            margin: 0;
            border-left: solid 1px var(--monster-theme-control-border-color);
            padding: 0 10px;
            
            display: flex;
            align-items: center;
            justify-content: center;
            
    
            & a, & a:link, & a:visited, & a:hover, & a:active, & a:focus {
                width: max-content;
                color: var(--monster-theme-control-color);
                background-color: var(--monster-theme-control-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;
            }
    
        }
    
    
    }
    
    
    @container (min-width: 800px) {
        [data-monster-role=pagination] {
        }
    }