@componyx/ui 0.0.0-stage → 1.0.3

package/Base/UI.css

@@ -0,0 +1,618 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+@font-face
+{
+    font-family: 'UI';
+    src: url('Font/UI.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-weight: normal;
+    font-style: normal;
+}
+
+:root {
+    --cui-duration: .2s;
+    --cui-ease: ease-in-out;
+    --cui-mask-width: 0;
+    --cui-mask-height: 0;
+    --cui-ico-arrow-l: '\e900';
+    --cui-ico-arrow-r: '\e901';
+    --cui-ico-filter: '\e902';
+    --cui-ico-time: '\e903';
+    --cui-ico-date: '\e904';
+    --cui-ico-pencil: '\e905';
+    --cui-ico-search: '\e906';
+    --cui-ico-cog: '\e907';
+    --cui-ico-plus: '\e908';
+    --cui-ico-min: '\e909';
+    --cui-ico-cross: '\e90a';
+    --cui-ico-check: '\e90b';
+    --cui-ico-radio: '\e90c';
+    --cui-ico-first: '\e90d';
+    --cui-ico-last: '\e90e';
+    --cui-ico-refresh: '\e90f';
+    --cui-ico-copy: '\e910';
+    --cui-ico-bin: '\e911';
+    --cui-ico-text: '\e912';
+    --cui-ico-paintbucket: '\e913';
+    --cui-ico-user: '\e914';
+    --cui-ico-download: '\e915';
+    --cui-ico-upload: '\e916';
+    --cui-ico-star: '\e917';
+    --cui-ico-text-lines: '\e918';
+    --cui-ico-redo: '\e919';
+    --cui-ico-key: '\e91a';
+    --cui-ico-eye: '\e91b';
+    --cui-ico-eye-blocked: '\e91c';
+    --cui-ico-undo: '\e91d';
+    --cui-ico-italic: '\e91e';
+    --cui-ico-checkbox: '\e91f';
+    --cui-ico-switch: '\e920';
+    --cui-ico-disk: '\e921';
+    --cui-ico-group: '\e922';
+    --cui-ico-textarea: '\e923';
+    --cui-ico-question-mark: '\e924';
+    --cui-ico-arrow-l-bracket: '\e925';
+    --cui-ico-arrow-r-bracket: '\e926';
+    --cui-ico-chip: '\e927';
+    --cui-ico-table-list: '\e928';
+    --cui-ico-table-cells: '\e929';
+    --cui-ico-dots: '\e92c';
+    --cui-ico-lock: '\e92f';
+    --cui-ico-unlock: '\e931';
+    --cui-ico-divider: '\e92a';
+    --cui-ico-folder-closed: '\e92b';
+    --cui-ico-pie-chart: '\e92d';
+}
+
+.spinner, .spinner-l
+{
+    display: inline-block;
+    height: 12px;
+    width: 12px;
+    -webkit-animation: rotate 1s infinite linear;
+    animation: rotate 1s infinite linear;
+    border-style: solid;
+    border-width: 4px !important;
+    border-right-color: transparent !important;
+    border-radius: 50%;
+}
+
+.spinner-l
+{
+    height: 28px;
+    width: 28px;
+    border-width: 8px;
+}
+
+@keyframes rotate
+{
+    from
+    {
+        transform: rotate(0deg);
+    }
+
+    to
+    {
+        transform: rotate(360deg);
+    }
+}
+
+.ico-menu
+{
+    display: inline-block;
+    position: relative;
+    width: 16px;
+    height: 2px;
+    background-color: black;
+}
+
+    .ico-menu::before
+    {
+        display: inline-block;
+        content: '';
+        position: absolute;
+        left: 0px;
+        top: 200%;
+        width: 100%;
+        height: 100%;
+        background-color: inherit;
+    }
+
+    .ico-menu::after
+    {
+        display: inline-block;
+        content: '';
+        position: absolute;
+        top: 400%;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        background-color: inherit;
+    }
+
+    .ico-menu.ico-m
+    {
+        width: 24px;
+        height: 4px;
+    }
+
+    .ico-menu.ico-l
+    {
+        width: 32px;
+        height: 5px;
+    }
+
+    .ico-menu.ico-xl
+    {
+        width: 48px;
+        height: 6px;
+    }
+
+    .ico-menu.ico-xxl
+    {
+        width: 64px;
+        height: 7px;
+    }
+
+[class*='ico-']
+{
+    cursor: default;
+}
+
+    [class*='ico-']::before
+    {
+        display: inline-block;
+        font-family: 'UI';
+        speak: none;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+.theme.button [class*='ico-']
+{
+    cursor: inherit;
+}
+
+[class*='ico-']
+{
+    font-size: 16px;
+}
+
+.ico-m
+{
+    font-size: 24px !important;
+}
+
+.ico-l
+{
+    font-size: 32px !important;
+}
+
+.ico-xl
+{
+    font-size: 48px !important;
+}
+
+.ico-xxl
+{
+    font-size: 64px !important;
+}
+
+
+.ico-arrow-l::before { content: var(--cui-ico-arrow-l); }
+.ico-arrow-r::before { content: var(--cui-ico-arrow-r); }
+.ico-filter::before { content: var(--cui-ico-filter); }
+.ico-time::before { content: var(--cui-ico-time); }
+.ico-date::before { content: var(--cui-ico-date); }
+.ico-pencil::before { content: var(--cui-ico-pencil); }
+.ico-search::before { content: var(--cui-ico-search); }
+.ico-cog::before { content: var(--cui-ico-cog); }
+.ico-plus::before { content: var(--cui-ico-plus); }
+.ico-min::before { content: var(--cui-ico-min); }
+.ico-cross::before { content: var(--cui-ico-cross); }
+.ico-check::before { content: var(--cui-ico-check); }
+.ico-radio::before { content: var(--cui-ico-radio); }
+.ico-first::before { content: var(--cui-ico-first); }
+.ico-last::before { content: var(--cui-ico-last); }
+.ico-refresh::before { content: var(--cui-ico-refresh); }
+.ico-copy::before { content: var(--cui-ico-copy); }
+.ico-bin::before { content: var(--cui-ico-bin); }
+.ico-text::before { content: var(--cui-ico-text); }
+.ico-paintbucket::before { content: var(--cui-ico-paintbucket); }
+.ico-user::before { content: var(--cui-ico-user); }
+.ico-download::before { content: var(--cui-ico-download); }
+.ico-upload::before { content: var(--cui-ico-upload); }
+.ico-star::before { content: var(--cui-ico-star); }
+.ico-text-lines::before { content: var(--cui-ico-text-lines); }
+.ico-redo::before { content: var(--cui-ico-redo); }
+.ico-key::before { content: var(--cui-ico-key); }
+.ico-eye::before { content: var(--cui-ico-eye); }
+.ico-eye-blocked::before { content: var(--cui-ico-eye-blocked); }
+.ico-undo::before { content: var(--cui-ico-undo); }
+.ico-italic::before { content: var(--cui-ico-italic); }
+.ico-checkbox::before { content: var(--cui-ico-checkbox); }
+.ico-switch::before { content: var(--cui-ico-switch); }
+.ico-disk::before { content: var(--cui-ico-disk); }
+.ico-group::before { content: var(--cui-ico-group); }
+.ico-textarea::before { content: var(--cui-ico-textarea); }
+.ico-question-mark::before { content: var(--cui-ico-question-mark); }
+.ico-arrow-l-bracket::before { content: var(--cui-ico-arrow-l-bracket); }
+.ico-arrow-r-bracket::before { content: var(--cui-ico-arrow-r-bracket); }
+.ico-chip::before { content: var(--cui-ico-chip); }
+.ico-table-list::before { content: var(--cui-ico-table-list); }
+.ico-table-cells::before { content: var(--cui-ico-table-cells); }
+.ico-dots::before { content: var(--cui-ico-dots); }
+.ico-lock::before { content: var(--cui-ico-lock); }
+.ico-unlock::before { content: var(--cui-ico-unlock); }
+.ico-divider::before { content: var(--cui-ico-divider); }
+.ico-folder-closed::before { content: var(--cui-ico-folder-closed); }
+.ico-pie-chart::before { content: var(--cui-ico-pie-chart); }
+
+
+.hidden
+{
+    visibility: hidden !important;
+    overflow: hidden !important;
+    width: 0px !important;
+    height: 0px !important;
+    padding: 0px !important;
+    min-width: 0px !important;
+    min-height: 0px !important;
+    position: fixed !important;
+}
+
+.theme
+{
+    display: block;
+    font-family: Arial;
+    border-width: 1px;
+    border-style: none;
+    border-color: transparent;
+    background-repeat: no-repeat !important;
+}
+
+    .theme *
+    {
+        color: inherit;
+        border-width: 1px;
+        border-color: transparent;
+        background-repeat: no-repeat;
+    }
+
+    .theme div.header
+    {
+        font-weight: bold;
+    }
+
+    .theme .icon
+    {
+        font-family: 'UI';
+    }
+
+    .theme.button.lucent:not(:hover):not(:focus):not(.expanded):not(.click):not(.selected):not(.sel-child)
+    {
+        color: inherit;
+    }
+
+    .theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(:disabled):focus,
+    .theme textarea:not(:disabled):focus,
+    .theme select:not(:disabled):focus
+    {
+        box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2);
+        outline: none;
+    }
+
+
+    /* Only outermost disabled elements, including .theme itself */
+    .theme:where(.disabled):not(:where(.disabled .disabled)),
+    .theme :is(.disabled):not(:where(.disabled .disabled))
+    {
+        opacity: 0.5;
+        cursor: default;
+    }
+
+    /* default value */
+    .theme.default input
+    {
+        opacity: 0.6;
+    }
+
+    /* expand icon */
+    .theme span.expand-icon
+    {
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+        width: 8px;
+        height: 6px;
+        background-color: transparent;
+    }
+
+        .theme span.expand-icon::after
+        {
+            position: absolute;
+            left: 0px;
+            content: '';
+            display: inline-block;
+            border-style: solid;
+            border-width: 2px 2px 0px 0px;
+            width: 6px;
+            height: 6px;
+            transition: transform .1s linear;
+            transform: rotate(45deg); /* right */
+        }
+
+    .theme .box
+    {
+        z-index: 2;
+    }
+
+        .theme .box > div.modal
+        {
+            background: rgba(0, 0, 0, 0.3);
+        }
+
+    .theme input::placeholder,
+    .theme textarea::placeholder
+    {
+        opacity: 1;
+        color: rgba(0,0,0,0.5);
+    }
+
+
+/* mask slide and reveal setup */
+.cui-mask.cui-static
+{
+    position: relative !important;
+}
+
+.cui-mask.cui-fade.cui-slide-in,
+.cui-mask.cui-fade.cui-reveal-in
+{
+    opacity: 0;
+}
+
+.cui-mask.cui-fade.cui-slide-out,
+.cui-mask.cui-fade.cui-reveal-out
+{
+    opacity: 1;
+}
+
+.cui-mask > *
+{
+    position: absolute !important;
+    width: 100%;
+    box-sizing: border-box;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+}
+
+
+/* setup slide in/out */
+.cui-mask.cui-static.cui-slide-in.cui-left,
+.cui-mask.cui-static.cui-slide-in.cui-right
+{
+    max-width: 0;
+}
+
+.cui-mask.cui-static.cui-slide-out.cui-left,
+.cui-mask.cui-static.cui-slide-out.cui-right
+{
+    max-width: var(--cui-mask-width); /* takes the width set inline in JS */
+}
+
+.cui-mask.cui-static.cui-slide-in.cui-up,
+.cui-mask.cui-static.cui-slide-in.cui-down
+{
+    max-height: 0;
+}
+
+.cui-mask.cui-static.cui-slide-out.cui-up,
+.cui-mask.cui-static.cui-slide-out.cui-down
+{
+    max-height: var(--cui-mask-height); /* takes the height set inline in JS */
+}
+
+.cui-mask.cui-left > *,
+.cui-mask.cui-right > *
+{
+    left: 0% !important;
+}
+
+.cui-mask.cui-up > *,
+.cui-mask.cui-down > *
+{
+    top: 0% !important;
+}
+
+/* setup reveal in/out */
+.cui-mask[class*="cui-reveal-"].cui-left:not(.cui-static)
+{
+    left: auto !important;
+}
+
+.cui-mask.cui-reveal-in.cui-left
+{
+    max-width: 0;
+}
+
+.cui-mask[class*="cui-reveal-"].cui-left > *
+{
+    left: auto !important;
+    right: 0% !important;
+}
+
+.cui-mask.cui-reveal-in.cui-right
+{
+    max-width: 0;
+}
+
+.cui-mask[class*="cui-reveal-"].cui-up:not(.cui-static)
+{
+    top: auto !important;
+}
+
+.cui-mask.cui-reveal-in.cui-up
+{
+    max-height: 0;
+}
+
+.cui-mask[class*="cui-reveal-"].cui-up > *
+{
+    top: auto !important;
+    bottom: 0% !important;
+}
+
+.cui-mask.cui-reveal-in.cui-down
+{
+    max-height: 0;
+}
+
+
+.cui-mask.cui-reveal-out.cui-left,
+.cui-mask.cui-reveal-out.cui-right
+{
+    max-width: var(--cui-mask-width); /* takes the width set inline in JS */
+}
+
+.cui-mask.cui-reveal-out.cui-up,
+.cui-mask.cui-reveal-out.cui-down
+{
+    max-height: var(--cui-mask-height); /* takes the height set inline in JS */
+}
+
+
+/* mask slide and reveal animations */
+.cui-mask.cui-animation
+{
+    transition: all var(--cui-duration) var(--cui-ease);
+}
+
+    .cui-mask.cui-animation.cui-fade.cui-slide-in,
+    .cui-mask.cui-animation.cui-fade.cui-reveal-in
+    {
+        opacity: 1;
+    }
+
+    .cui-mask.cui-animation.cui-fade.cui-slide-out,
+    .cui-mask.cui-animation.cui-fade.cui-reveal-out
+    {
+        opacity: 0;
+    }
+
+
+    /* slide animation */
+    .cui-mask.cui-animation.cui-slide-in > *,
+    .cui-mask.cui-animation.cui-slide-out > *
+    {
+        animation: slide-animation var(--cui-duration) var(--cui-ease);
+        backface-visibility: hidden;
+    }
+
+    .cui-mask.cui-animation.cui-slide-out > *
+    {
+        animation-direction: reverse;
+    }
+
+    .cui-mask.cui-animation[class*="cui-slide-"].cui-left > *
+    {
+        /* Starts off beyond the right boundary; moves into place */
+        --start-transform: translateX(100%);
+        --end-transform: translateX(0%);
+    }
+
+    .cui-mask.cui-animation[class*="cui-slide-"].cui-right > *
+    {
+        /* Starts off to the beyond the left boundary; moves into place */
+        --start-transform: translateX(-100%);
+        --end-transform: translateX(0%);
+    }
+
+    .cui-mask.cui-animation[class*="cui-slide-"].cui-up > *
+    {
+        /* Starts off to the beyond the bottom boundary; moves into place */
+        --start-transform: translateY(100%);
+        --end-transform: translateY(0%);
+    }
+
+    .cui-mask.cui-animation[class*="cui-slide-"].cui-down > *
+    {
+        /* Starts off to the beyond the top boundary; moves into place */
+        --start-transform: translateY(-100%);
+        --end-transform: translateY(0%);
+    }
+
+@keyframes slide-animation
+{
+    0%
+    {
+        transform: var(--start-transform) translateZ(0);
+    }
+
+    100%
+    {
+        transform: var(--end-transform) translateZ(0);
+    }
+}
+
+
+/* slide mask size animation (when position is static) */
+.cui-mask.cui-animation.cui-static.cui-slide-in.cui-left,
+.cui-mask.cui-animation.cui-static.cui-slide-in.cui-right
+{
+    max-width: var(--cui-mask-width); /* takes the width set inline in JS */
+}
+
+.cui-mask.cui-animation.cui-static.cui-slide-in.cui-up,
+.cui-mask.cui-animation.cui-static.cui-slide-in.cui-down
+{
+    max-height: var(--cui-mask-height); /* takes the height set inline in JS */
+}
+
+.cui-mask.cui-animation.cui-static.cui-slide-out.cui-left,
+.cui-mask.cui-animation.cui-static.cui-slide-out.cui-right
+{
+    max-width: 0;
+}
+
+.cui-mask.cui-animation.cui-static.cui-slide-out.cui-up,
+.cui-mask.cui-animation.cui-static.cui-slide-out.cui-down
+{
+    max-height: 0;
+}
+
+
+/* reveal animation */
+.cui-mask.cui-animation.cui-reveal-in.cui-left,
+.cui-mask.cui-animation.cui-reveal-in.cui-right
+{
+    max-width: var(--cui-mask-width); /* takes the width set in JS */
+}
+
+.cui-mask.cui-animation.cui-reveal-in.cui-up,
+.cui-mask.cui-animation.cui-reveal-in.cui-down
+{
+    max-height: var(--cui-mask-height); /* takes the height set inline in JS */
+}
+
+.cui-mask.cui-animation.cui-reveal-out.cui-left,
+.cui-mask.cui-animation.cui-reveal-out.cui-right
+{
+    max-width: 0;
+}
+
+.cui-mask.cui-animation.cui-reveal-out.cui-up,
+.cui-mask.cui-animation.cui-reveal-out.cui-down
+{
+    max-height: 0;
+}

package/Base/UIResourcePath.js

@@ -0,0 +1,6 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+(function (path, minified)
+{
+	var r = path + ((minified) ? '{0}.min' : '{0}');
+	componyx.UI.setResourcePath(r + '.js', r + '.css', 1, path + '{0}.Themes.Default.css');
+})('/src?d=', true);