Skip to content
Snippets Groups Projects
Select Git revision
  • ba4ce5b99c3136e97f35a8e65adccc286db7244b
  • master default protected
  • 1.31
  • 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
  • 4.22.2
  • 4.22.1
  • 4.22.0
  • 4.21.0
23 results

prepare-release.nix

Blame
    • datatable.pcss 7.20 KiB 
    @import "../../style/normalize.pcss";
@import "../../style/display.pcss";
@import "../../style/button.pcss";
@import "../../style/control.pcss";
@import "../../style/property.pcss";
@import "../../style/ripple.pcss";
@import "../../style/badge.pcss";
@import "../../style/link.pcss";
@import "../../style/space.pcss";
@import "../../style/icons.pcss";
@import "../../style/form.pcss";

@import "../../style/mixin/button.pcss";
@import "../../style/mixin/typography.pcss";
@import "../../style/typography.pcss";
@import "../../style/mixin/hover.pcss";
@import "../../style/mixin/media.pcss";
@import "../../style/theme.pcss";
@import "../../style/skeleton.pcss";

::slotted(monster-collapse) {
    --monster-color-gradient-1: none;
    --monster-color-gradient-2: none;
    --monster-color-gradient-3: none;
}


[data-monster-role="control"] {
    display: flex;
    outline: none;
    width: 100%;
    flex-direction: column;
}

[data-monster-role="table-container"] {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 20px;
    box-sizing: border-box;
    min-width: fit-content;
    @mixin text;

    & .bar {
        display: flex;
        flex-direction: row-reverse;
        align-content: center;
        align-items: center;
        gap: 2rem;
    }

}

:host {
    padding: 0;
    margin: 0;
}

::slotted(.monster-button-group) {
    margin: 0 !important;
}

::slotted(.monster-button-group) {
    display: flex;
    flex-direction: row !important;
    align-items: center;
}

    [data-monster-role=datatable] {
    display: grid;
    @mixin text;
    box-sizing: border-box;

    & > div {
        padding: 0.4rem 0.2rem;
        @mixin text;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        line-height: 1.2;
        border-bottom: 1px dashed var(--monster-theme-control-border-color);
        box-sizing: border-box;

        min-width: 0;
        overflow: auto;

        &.start {
            justify-content: flex-start;
        }

        &.end {
            justify-content: flex-end;
        }

        &.center {
            justify-content: center;
        }
        
        &.monospace {
            font-family: var(--monster-font-family-monospace);
        }
        
        &.ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        &.wrap {
            white-space: normal;
            word-wrap: break-word;
        }

        &.auto {
            overflow: auto;
            white-space: nowrap;
            scrollbar-width: thin;
            scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
        }
        
        &.visible {
            overflow: visible;
        }

        & input[type=checkbox] {
            accent-color: var(--monster-bg-color-primary-1);
        }
    }

    @for $i from 0 to 500 {
        &:has([data-monster-insert-reference$=row-$(i)]:hover) [data-monster-insert-reference$=row-$(i)

    ] {
        color: var(--monster-theme-control-hover-color);
        background-color: var(--monster-theme-control-hover-bg-color);
        box-sizing: border-box;
    }
    }
    
    & .monster-form {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

}


[data-monster-role=footer] {
    padding: 5px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    & > slot {
        display: flex;
        justify-content: flex-start;
        width: fit-content;

        &.hidden {
            display: none;
        }
    }

}

[data-monster-role=datatable-headers] {
    display: grid;

    & > div {
        @mixin text;
        font-weight: bold;
        padding: 0.3rem 0.2rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 100%;

        & a[data-monster-sortable]:after {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            margin: 0 3px 0 5px;
            background-color: var(--monster-color-primary-1);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
            mask-size: cover;
        }

        & a[data-monster-sortable~=DESC i]:after {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            margin: 0 3px 0 5px;
            background-color: var(--monster-color-primary-1);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3E%3C/svg%3E");
            mask-size: cover;
        }

        & a[data-monster-sortable~=ASC i]:after {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
                margin: 0 3px 0 5px;
            background-color: var(--monster-color-primary-1);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
            mask-size: cover;
        }
    }


    & .flex-start {
        justify-content: flex-start;
    }

    & .flex-end {
        justify-content: flex-end;
    }

    & .flex-center {
        justify-content: center;
    }

}

.filter {
    margin: 0 0 20px 0;
}

.hidden {
    display: none;
}

monster-state[data-monster-role=empty-without-action]::part(action) {
    display: none;
}

.empty-state-container {
    padding: var(--monster-space-7) 0;
}

[data-monster-role="control"].small {


    & [data-monster-role="datatable-headers"] {
        display: none;
    }

    & [data-monster-role="table-container"] {

        & .bar {
            display: flex;
            align-items: flex-end;
            flex-direction: column-reverse;
            gap: 0.1rem;
        }

        & [data-monster-head]:before {
            font-weight: bold;
            margin-right: 10px;
            content: attr(data-monster-head);
        }

        @for $i from 0 to 500 {
            &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)

        ] {
            /*background-color: var(--monster-bg-color-selection-2);*/
            box-sizing: border-box;
        }
        }
    }

        & ::slotted(.monster-button-group) {
        display: flex;
        flex-direction: column !important;
    }

}