@componyx/ui 0.0.0-stage → 1.0.3

package/Editor/Themes/Default.css

@@ -0,0 +1,204 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+.editor.theme.theme-default
+{
+    &:not(.iframe)
+    {
+        border-color: var(--cui-border-color);
+        background-color: var(--cui-color-surface);
+    }
+    /* Swatch */
+    .swatch > .swatch-color:hover
+    {
+        border-color: var(--cui-color-surface);
+    }
+
+        .swatch > .swatch-color:hover::before
+        {
+            border-color: var(--cui-color-on-surface);
+        }
+    /* Resize */
+    .image-resize-handle
+    {
+        background-color: var(--cui-base-dark-bg-color);
+        border-color: var(--cui-border-color);
+    }
+
+    figure > figcaption
+    {
+        background-color: var(--cui-base-dark-bg-color);
+    }
+    /* Block view */
+    *[data-ui-editor-blockview]
+    {
+        border-color: var(--cui-base-dark-bg-color);
+    }
+
+        *[data-ui-editor-blockview]::after
+        {
+            color: var(--cui-base-dark-bg-color);
+        }
+    /* Selection */
+    *[data-ui-editor-selected="1"]
+    {
+        outline-color: var(--cui-color-primary);
+    }
+
+    *[data-ui-editor-selected]:hover
+    {
+        outline-color:  var(--cui-selected-bg-color);
+    }
+    /* Links */
+    a[data-ui-editor-selected="1"]
+    {
+        background-color: var(--cui-selected-bg-color);
+    }
+
+    a[data-ui-editor-selected]:hover
+    {
+        background-color: rgb(from var(--cui-color-primary) r g b / 0.35);
+    }
+    /* Symbol picker */
+    .box.symbol-picker > .content > .symbol-view > .symbol-items > a.symbol:hover
+    {
+        background-color: var(--cui-item-hover-bg-color);
+    }
+    /* category links */
+    .box.symbol-picker .symbol-category:hover,
+    .box.symbol-picker .symbol-category.active,
+    .dialog.table-dialog .table-dialog-category:hover,
+    .dialog.table-dialog .table-dialog-category.active
+    {
+        color: var(--cui-color-accent);
+    }
+    /* Source view expand arrow */
+    .source-view .item .expand::after
+    {
+        border-color: var(--cui-color-on-surface);
+    }
+    /* Toolbar separators */
+    .toolbar .group::after
+    {
+        background-color: var(--cui-base-bg-color);
+    }
+    /* Focus styling */
+    &.focus > .editor-content,
+    > .editor-content:focus,
+    .source-view .item .edit-box:focus,
+    .source-view .item .edit-box:focus-within
+    {
+        outline: none;
+        box-shadow: 0px 0px 5px 0px var(--cui-box-shadow-color), inset 0 0 5px var(--cui-positive-bg-color);
+    }
+    /* Clear color button */
+    .button.theme.clear-color span.icon
+    {
+        color: var(--cui-negative-text-color);
+    }
+    /* Color picker */
+    .color-picker.theme .box div.content
+    {
+        background-color: var(--cui-color-surface);
+    }
+    /* Source view base */
+    .editor.theme .source-view .item .edit-box
+    {
+        background: var(--cui-color-surface);
+    }
+
+    .editor.theme .source-view .item.root > .tag
+    {
+        background: var(--cui-base-bg-color);
+    }
+    /* Selected states */
+    .source-view .item.selected > .tag,
+    .source-view .item.selected > .end-tag
+    {
+        background: var(--cui-button-basic-bg-color);
+        border-color: var(--cui-border-color);
+    }
+    /* Hover states */
+    .source-view .item .tag:hover,
+    .source-view .item .tag:hover ~ .end-tag,
+    .source-view .item .end-tag:hover
+    {
+        background: var(--cui-button-basic-hover-bg-color);
+    }
+    /* Syntax highlighting (devtools palette, intentionally hardcoded) */
+    .source-view .item .tag,
+    .source-view .item .end-tag
+    {
+        color: purple;
+    }
+
+    .source-view .item .attr-name
+    {
+        color: chocolate;
+    }
+
+    .source-view .item .attr-value
+    {
+        color: darkblue;
+    }
+
+    .source-view .item .data.comment
+    {
+        color: green;
+    }
+    /* Tooltip */
+    .tooltip-manager.doc-tooltips .box.tooltip
+    {
+        background: var(--cui-color-surface);
+    }
+
+    .tooltip-manager.theme.doc-tooltips .box.tooltip > div.content
+    {
+        color: unset;
+    }
+
+    .tooltip-manager.doc-tooltips .box.tooltip::after
+    {
+        border-color: var(--cui-color-surface);
+    }
+
+    .tooltip-manager.doc-tooltips .box.tooltip,
+    .tooltip-manager.doc-tooltips .box.tooltip::before
+    {
+        border-color: var(--cui-border-color);
+    }
+
+    table td, table th
+    {
+        border-color: var(--cui-border-color);
+    }
+
+    thead th
+    {
+        background-color: var(--cui-color-neutral);
+    }
+
+    tfoot td
+    {
+        background-color: var(--cui-item-odd-bg-color);
+    }
+
+    .te-selected
+    {
+        background-color: var(--cui-selected-bg-color) !important;
+    }
+
+    .te-picker
+    {
+        .te-picker-grid
+        {
+            border-color: var(--cui-border-color);
+        }
+    }
+
+    .te-wrapper
+    {
+        .te-col-handle::after
+        {
+            background-color: var(--cui-color-accent);
+        }
+    }
+}

package/FileUpload/FileUpload.css

@@ -0,0 +1,156 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+.file-upload.theme .button.theme:first-child
+{
+    overflow: hidden;
+    margin-right: 6px;
+}
+
+    .file-upload.theme .button.theme:first-child > .content-holder
+    {
+        position: static;
+    }
+
+.file-upload.theme input[type=file]
+{
+    position: absolute;
+    opacity: 0;
+    right: 0px;
+    left: 0px;
+    top: 0px;
+    margin: 0px;
+    padding: 0px;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+}
+
+.file-upload.theme
+{
+    text-align: center;
+}
+
+    .file-upload.theme .dialog
+    {
+        text-align: left
+    }
+
+    .file-upload.theme > .drop-zone
+    {
+        margin-bottom: 12px;
+        opacity: 1;
+    }
+
+.file-upload.theme > .drop-zone:not(.disabled)
+{
+    position: relative;
+    border-width: 1px;
+    border-style: dashed;
+    border-radius: 6px;
+    padding: 20px;
+    height: 80px;
+}
+
+.file-upload.theme > .drop-zone:not(.disabled)::before
+{
+    content: attr(data-drop-text);
+    position: absolute;
+    margin-top: 25px;
+    top: 50%;
+    left: 0px;
+    right: 0px;
+    text-align: center;
+    transform: translateY(-50%);
+}
+
+.file-upload.theme > .list
+{
+    border-width: 1px;
+    border-style: solid;
+    padding: 6px;
+    margin-bottom: 12px;
+}
+
+.file-upload.theme > .list > ul
+{
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 0px;
+    margin: 0px;
+    list-style: none;
+}
+
+    .file-upload.theme > .list > ul > li
+    {
+        display: flex;
+        text-align: left;
+        align-items: center;
+
+    }
+
+        .file-upload.theme > .list > ul > li > div:not(:first-child)
+        {
+            margin-left: 12px;
+        }
+
+        .file-upload.theme > .list > ul > li > div
+        {
+            flex: 1;
+        }
+
+        .file-upload.theme > .list > ul > li > div.name,
+        .file-upload.theme > .list > ul > li > div.state
+        {
+            word-wrap: break-word;
+            word-break: break-word;
+        }
+            .file-upload.theme > .list > ul > li > div.name > span:last-child
+            {
+                margin-left: 6px;
+                opacity: 0.7;
+            }
+
+        .file-upload.theme > .list > ul > li > div.progress
+        {
+            flex: 0 0 25%;
+        }
+
+        .file-upload.theme > .list > ul > li > div.state
+        {
+            flex: 0 0 70px;
+        }
+
+        .file-upload.theme > .list > ul > li > div:last-child
+        {
+            text-align: right;
+            flex: 0 0 24px;
+        }
+
+.file-upload.theme div.progress
+{
+    width: 150px;
+    height: 16px;
+    padding: 2px;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 0px;
+    text-align: left;
+}
+
+    .file-upload.theme div.progress.total
+    {
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 1rem;
+    }
+    
+    .file-upload.theme div.progress > b
+    {
+        display: block;
+        vertical-align: top;
+        height: 100%;
+    }
+
+.file-upload.theme div.list + div:last-child
+{
+    position: relative;
+}