@componyx/ui 0.0.0-stage → 1.0.4

package/Grid/Grid.css

@@ -0,0 +1,544 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+.grid.theme
+{
+    border-style: solid;
+    position: relative;
+    border-radius: var(--cui-border-radius);
+}
+
+    .grid.theme > div.header
+    {
+        border-radius: 0px;
+        background: transparent;
+    }
+
+        .grid.theme > div.header > div:first-child
+        {
+            border-radius: var(--cui-border-radius);
+            border-bottom-left-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+
+        .grid.theme > div.header > div:not(:first-child)
+        {
+            border-radius: 0px;
+        }
+
+    .grid.theme > div:last-child
+    {
+        border-radius: var(--cui-border-radius);
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+    }
+
+    .grid.theme > div:not(:first-child):not(:last-child)
+    {
+        border-radius: 0px;
+    }
+
+    .grid.theme > div.header
+    {
+        overflow-x: hidden;
+        position: relative;
+    }
+
+        .grid.theme > div.header > div > table,
+        .grid.theme > div.content > table
+        {
+            table-layout: fixed;
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
+        }
+
+            .grid.theme > div.header > div > table > tbody > tr > th
+            {
+                outline: 0;
+            }
+
+            .grid.theme > div.header > div > table > tbody > tr > th,
+            .grid.theme > div.header > div > table.filter > tbody > tr > td,
+            .grid.theme > div.content > table > tbody > tr > td
+            {
+                border-style: solid;
+                padding: 0px;
+                height: 28px;
+            }
+
+            .grid.theme > div.content > table > tbody > tr > td
+            {
+                border-right-color: transparent;
+            }
+
+        .grid.theme > div.header.draggable > div > table > tbody > tr > th
+        {
+            cursor: move;
+        }
+
+        .grid.theme > div.header.resizable > div > table > tbody > tr > th.column-group,
+        .grid.theme > div.header > div > table > tbody > tr > th.column-group > div > span
+        {
+            cursor: default;
+        }
+
+        .grid.theme > div.header > div > table > tbody > tr > th > div,
+        .grid.theme > div.header > div > table > tbody > tr > td > div
+        {
+            position: relative;
+            word-break: break-all;
+        }
+
+
+    .grid.theme > div.content > table > tbody > tr > td
+    {
+        position: relative;
+    }
+
+        .grid.theme > div.content > table > tbody > tr > td > *
+        {
+            word-break: break-all;
+        }
+
+    .grid.theme > div.header > div > table > tbody > tr > th > div > span
+    {
+        display: inline-block;
+        position: relative;
+        padding: 3px;
+        cursor: default;
+    }
+
+    .grid.theme > div.header > div > table > tbody > tr > th > div > span.column-sorting
+    {
+        cursor: pointer;
+    }
+
+    /* sort order arrow */
+    .grid.theme > div.header > div > table > tbody > tr > th.asc > div > span:first-child::before,
+    .grid.theme > div.header > div > table > tbody > tr > th.desc > div > span:first-child::before
+    {
+        content: "";
+        position: absolute;
+        display: inline-block;
+        top: 50%;
+        margin-top: -2px;
+        right: -20px;
+        border-style: solid;
+        border-width: 4px;
+    }
+
+    .grid.theme > div.header > div > table > tbody > tr > th.asc > div > span:first-child::before
+    {
+        margin-top: -3px;
+    }
+
+    .grid.theme > div.header > div > table > tbody > tr > th.desc > div > span:first-child::before
+    {
+        content: "";
+        border-bottom-width: 0;
+        border-top-width: 4px;
+        border-left-width: 4px;
+        border-right-width: 4px;
+        border-left-color: transparent;
+        border-right-color: transparent;
+    }
+
+    .grid.theme > div.header > div > table > tbody > tr > th.asc > div > span:first-child::before
+    {
+        content: " ";
+        border-top-width: 0;
+        border-bottom-width: 4px;
+        border-left-width: 4px;
+        border-right-width: 4px;
+        border-left-color: transparent;
+        border-right-color: transparent;
+    }
+
+
+    .grid.theme > div.content
+    {
+        position: relative;
+        width: 100%;
+        overflow-y: auto;
+        overflow-x: auto;
+    }
+
+    .grid.theme > div.header > div > table > tbody > tr > th
+    {
+        text-align: left;
+        border-left: 0px;
+        border-bottom: 0px;
+    }
+
+    .grid.theme > div.header > div > table > tbody > tr:first-child > th
+    {
+        border-top: 0px;
+    }
+
+    .grid.theme > div.content > table > tbody > tr:not(:first-child) > td
+    {
+        border-top: 0px;
+    }
+
+    .grid.theme > div.content > table > tbody > tr > td
+    {
+        border-left: 0px;
+        padding-left: 3px;
+        padding-right: 3px;
+        word-break: break-word;
+    }
+
+        .grid.theme > div.header > div > table > tbody > tr > th:last-child,
+        .grid.theme > div.content > table > tbody > tr > td:last-child
+        {
+            border-right: 0px;
+        }
+
+    .grid.theme > div.content > div.noresult
+    {
+        padding: 1rem;
+    }
+
+
+    /* filter row */
+    .grid.theme:has(> div.header > div > table.filter) > div.content > table > tbody > tr:first-child > td
+    {
+        border-top-style: none;
+    }
+
+    .grid.theme > div.header > div:has(> table.filter)
+    {
+        border-bottom-style: solid;
+    }
+
+    /* filter row */
+    .grid.theme.theme-default > div.header table.filter > tbody > tr > td,
+    .grid.theme.theme-default > div.header table.filter > tbody > tr:hover > td
+    {
+        color: inherit;
+        background: inherit;
+    }
+
+    .grid.theme > div.header > div > table.filter
+    {
+        border-width: 0px !important;
+        border-top-style: solid;
+    }
+
+        .grid.theme > div.header > div > table.filter > tbody > tr > td
+        {
+            height: 30px;
+            border: 0px;
+            padding-left: 3px;
+            padding-right: 3px;
+            padding-top: 6px;
+            padding-bottom: 6px;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+            .grid.theme > div.header > div > table.filter > tbody > tr > td > div
+            {
+                display: flex;
+                align-items: center;
+            }
+
+                .grid.theme > div.header > div > table.filter > tbody > tr > td > div > div
+                {
+                    display: inline-block;
+                    vertical-align: top;
+                    margin-right: 3px;
+                }
+
+                    .grid.theme > div.header > div > table.filter > tbody > tr > td > div > div label
+                    {
+                        line-height: 28px;
+                    }
+
+                        .grid.theme > div.header > div > table.filter > tbody > tr > td > div > div label > b
+                        {
+                            display: inline-block;
+                            margin-left: 4px;
+                            margin-right: 4px;
+                        }
+
+        /* filter textbox */
+        .grid.theme > div.header > div > table.filter input.textbox
+        {
+            height: 28px;
+            padding: 0px;
+            margin: 0px;
+            padding-left: 4px;
+            padding-right: 4px;
+            border-style: solid;
+            font-size: 12px;
+            min-width: 0;
+        }
+
+    /* filter button icon */
+    .grid.theme > div.header > div > table.filter > tbody > tr > td .button.theme.filter span.icon::after
+    {
+        font-family: 'UI';
+        content: '\e902';
+    }
+
+    .grid.theme > div.header > div > table.filter div.box,
+    .grid.theme > div.header > div > table.filter .box.dialog-box,
+    .grid.theme > .menu.filter.theme .box
+    {
+        z-index: 3;
+    }
+
+    .grid.theme > div.content > table
+    {
+        position: relative;
+    }
+
+    /* header drag-ghost */
+    .grid.theme > div.header div.drag-ghost
+    {
+        display: flex;
+        align-items: center;
+        padding: 3px;
+        cursor: move;
+    }
+
+    /* item drag-ghost */
+    .grid.theme > div.content tr.drag-ghost
+    {
+        position: absolute;
+        display: table-row;
+        cursor: move;
+    }
+
+    /* drop indicators */
+    .grid.theme > div.header th.droppable > div::before
+    {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        width: 2px;
+        left: 0px;
+    }
+
+    .grid.theme > div.header th.droppable.right > div::before
+    {
+        left: auto;
+        right: 0px;
+    }
+
+    .grid.theme > div.content tr.droppable > td::before
+    {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        left: 0px;
+        right: 0px;
+        height: 2px;
+        top: 0px;
+    }
+
+    .grid.theme > div.content tr.droppable.bottom > td::before
+    {
+        top: auto;
+        bottom: 0px;
+    }
+
+    .grid.theme.theme > div.content tr.droppable:not(.drag-ghost):not(.drag) > td::before
+    {
+        background: rgba(0, 0, 0, 0.15);
+    }
+
+    .grid.theme > div.content tr.drag
+    {
+        opacity: 0.5;
+    }
+
+    /* content drag-ghost */
+    .grid.theme > div.content tr.drag-ghost > td
+    {
+        background: rgba(0, 0, 0, 0.05) !important; /* base bg color */
+        border-bottom-color: transparent;
+    }
+
+    /* resize handle */
+    .grid.theme > div.header > div > table > tbody > tr > th > div > span.resize-handle
+    {
+        position: absolute;
+        display: inline-block;
+        top: 0px;
+        bottom: 0px;
+        right: -5px;
+        width: 10px;
+        cursor: ew-resize;
+        z-index: 1;
+    }
+
+        .grid.theme > div.header > div > table > tbody > tr > th > div > span.resize-handle::after
+        {
+            display: none;
+        }
+
+    /* fixed column */
+    .grid.theme th.fixed-column, .grid.theme td.fixed-column
+    {
+        position: relative;
+        z-index: 2;
+    }
+
+    /* hidden column */
+    .grid.theme th.hidden-column, .grid.theme td.hidden-column, .grid.theme col.hidden-column
+    {
+        display: none;
+    }
+
+    /* checkbox and expand column */
+    .grid.theme table col.checkbox,
+    .grid.theme table col.expand
+    {
+        width: 31px;
+        max-width: 31px;
+    }
+
+    /* checkbox column */
+    .grid.theme table th.checkbox,
+    .grid.theme table td.checkbox
+    {
+        width: 25px;
+        max-width: 31px;
+        vertical-align: middle;
+    }
+
+    .grid.theme > div.header > div > table > tbody > tr > th.checkbox,
+    .grid.theme > div.content > table > tbody > tr > td.checkbox
+    {
+        text-align: center;
+    }
+
+    .grid.theme table span.checkbox
+    {
+        display: inline-block;
+        position: relative;
+        left: 0px;
+        margin-right: 5px;
+        width: 15px;
+        height: 15px;
+        line-height: 15px;
+        border-style: solid;
+        font-family: 'UI';
+        font-size: 8px;
+        vertical-align: middle;
+        text-align: center;
+    }
+
+        .grid.theme table span.checkbox::after
+        {
+            content: '';
+        }
+
+    .grid.theme tr > th span.checkbox.selected::after,
+    .grid.theme tr.selected span.checkbox::after
+    {
+        content: '\e90b';
+    }
+
+
+    /* expand column */
+    .grid.theme table th.expand,
+    .grid.theme table td.expand
+    {
+        width: 25px;
+        max-width: 31px;
+        vertical-align: middle;
+        position: relative;
+        text-align: center;
+    }
+
+
+    /* group head-item */
+    .grid.theme table > tbody > tr > td.group-head > div.group-item
+    {
+        height: 100%;
+    }
+
+    .grid.theme table > tbody > tr > td.expand span.expand-icon
+    {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-top: 0px;
+        transform: translateX(-50%) translateY(-50%);
+    }
+
+    .grid.theme table > tbody > tr > td.group-head > div.group-item > span.expand-icon
+    {
+        transform: translateX(-50%) translateY(-50%);
+        top: 50%;
+        margin-left: 12px;
+    }
+
+    .grid.theme table > tbody > tr > td.group-head.expanded > div.group-item > span.expand-icon
+    {
+        left: 2px;
+    }
+
+    .grid.theme table > tbody > tr:not(.expanded) > td.expand span.expand-icon::after,
+    .grid.theme table > tbody > tr > td.group-head:not(.expanded) > div.group-item > span.expand-icon::after
+    {
+        top: -1px;
+        left: -1px;
+        transform: rotate(45deg);
+    }
+
+    .grid.theme table > tbody > tr.expanded > td.expand span.expand-icon::after,
+    .grid.theme table > tbody > tr > td.group-head.expanded > div.group-item > span.expand-icon::after
+    {
+        top: -3px;
+        transform: rotate(135deg);
+    }
+
+    .grid.theme table > tbody > tr.expanded + tr > td
+    {
+        background: transparent !important;
+        color: inherit;
+        border: 0px;
+    }
+
+    /* item */
+    .grid.theme div.content.selectable table tr
+    {
+        cursor: default;
+    }
+
+    /* dataPager */
+    .grid.theme .data-pager.theme
+    {
+        min-height: 36px;
+        display: flex;
+        align-items: center;
+    }
+
+        .grid.theme .data-pager.theme > div
+        {
+            position: relative;
+        }
+
+            .grid.theme .data-pager.theme > div + div
+            {
+                float: right;
+                margin-right: 6px;
+                text-align: right;
+            }
+
+        .grid.theme .data-pager.theme .numeric-box.theme input
+        {
+            width: 18px;
+        }
+
+    /* header column hover */
+    .grid.theme > div.header > div > table > tbody > tr > th:hover,
+    .grid.theme > div.header > div > table > tbody > tr > th:focus
+    {
+        background: rgba(255, 255, 255, 0.25); /* header bg color */
+    }