Skip to content
Snippets Groups Projects
Select Git revision
  • 4791190b7aae085e2f56c928aa2c4c6247f3483b
  • master default protected
  • 1.31
  • 4.27.0
  • 4.26.0
  • 4.25.5
  • 4.25.4
  • 4.25.3
  • 4.25.2
  • 4.25.1
  • 4.25.0
  • 4.24.3
  • 4.24.2
  • 4.24.1
  • 4.24.0
  • 4.23.6
  • 4.23.5
  • 4.23.4
  • 4.23.3
  • 4.23.2
  • 4.23.1
  • 4.23.0
  • 4.22.3
23 results

Monster_Constraints.IsObject.html

Blame
  • 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;
            }
            
            
        }*/
        
    
        
    
    }