@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; @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; flex-grow: 2; display: flex; flex-direction: row !important; align-items: center; justify-content: flex-end; } [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; } } & a[data-monster-role="copy-all"] { display: flex; align-items: center; color: var(--monster-color-primary-1); background: none; white-space: nowrap; &:after { content: ""; display: block; width: 20px; height: 16px; margin: 2px 3px 0 5px; padding-top: 4px; 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 d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z'/%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z'/%3E%3C/svg%3E"); mask-size: cover; } } .filter { margin: 0 0 20px 0; } .hidden { display: none; } .copyAllHidden { display: none !important; } 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; } }