@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

package/src/scaffolding/suggest.css

@@ -0,0 +1,92 @@
+/* number.less and suggest.less */
+pacem-input-number .pacem-input {
+    text-align: right;
+
+    &::after {
+        content: ' ';
+    }
+}
+
+pacem-suggest {
+    input[type=text] {
+        padding-right: var(--pacem-field-height);
+    }
+
+    /* clear and toggle buttons */
+    input[type=text] ~ pacem-button {
+        width: var(--pacem-field-height);
+        height: var(--pacem-field-height);
+
+        &::before {
+            line-height: var(--pacem-field-height);
+        }
+    }
+
+    /* clear button */
+    input[type=text] + pacem-button::before {
+        content: 'close';
+        font-size: calc(var(--pacem-grid-spacing) / 2);
+    }
+}
+
+pacem-balloon.suggest {
+    min-height: 0;
+
+    ol {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+            color: var(--pacem-color-default);
+            background-color: var(--pacem-color-suggest-back);
+            cursor: pointer;
+            border-top: 1px solid var(--pacem-color-suggest-border-light);
+            border-bottom: 1px solid var(--pacem-color-suggest-border-dark);
+            padding: calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) * .5);
+            font-size: 1.1em;
+
+            span.pacem-highlight {
+                background-color: transparent;
+                color: var(--pacem-color-suggest-highlight);
+                font-weight: 700;
+            }
+
+            &[data-pacem-disabled=true] {
+                pointer-events: none;
+                color: var(--pacem-color-disabled);
+
+                span.pacem-highlight {
+                    background-color: transparent;
+                    color: var(--pacem-color-disabled-inverse);
+                    font-weight: var(--pacem-font-weight);
+                }
+            }
+        }
+    }
+
+    ol:is(:focus-within, :hover) {
+        > li[data-pacem-disabled=false] {
+            background-color: var(--pacem-color-suggest-back);
+            color: var(--pacem-color-default);
+        }
+
+        > li:is(:focus, :hover) {
+            background-color: var(--pacem-color-suggest-focus-back);
+            color: var(--pacem-color-suggest-focus-fore);
+
+            span.pacem-highlight {
+                color: var(--pacem-color-suggest-focus-highlight);
+            }
+        }
+    }
+
+    ol:not(:focus-within):not(:hover) > li[data-pacem-focused] {
+        background-color: var(--pacem-color-suggest-focus-back);
+        color: var(--pacem-color-suggest-focus-fore);
+
+        span.pacem-highlight {
+            color: var(--pacem-color-suggest-focus-highlight);
+        }
+    }
+}

package/src/scaffolding/tags.css

@@ -0,0 +1,132 @@
+/* Tags (.FormFieldItemWrapper(): input.css). Spacing: the input padding / 2 (spacing / 6). */
+@keyframes tag-out {
+    0% {
+        transform: scaleX(1);
+    }
+
+    100% {
+        transform: scaleX(0);
+    }
+}
+
+@keyframes tag-content-out {
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+@keyframes tag-in {
+    0% {
+        transform: scaleX(0);
+    }
+
+    100% {
+        transform: scaleX(1);
+    }
+}
+
+@keyframes tag-content-in {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+pacem-tag {
+    display: block;
+}
+
+pacem-tags {
+    ul.pacem-tags {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: flex-start;
+        padding-right: calc(var(--pacem-grid-spacing) / 6);
+
+        li.pacem-tag {
+            flex: 0 1 auto;
+            margin: 0;
+
+            pacem-tag {
+                margin: calc(var(--pacem-grid-spacing) / 6) 0 calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 6);
+                padding: calc(var(--pacem-grid-spacing) / 6);
+                line-height: calc(1rem * var(--pacem-font-rem-factor));
+                background-color: var(--pacem-color-tag-back);
+                color: var(--pacem-color-tag-fore);
+                border-radius: calc(var(--pacem-border-input-radius) / 2);
+                /* (animations) */
+                overflow: hidden;
+                transform-origin: 0 50%;
+
+                pacem-text {
+                    display: inline-block;
+                }
+
+                pacem-button {
+                    margin: 0 0 0 calc(var(--pacem-grid-spacing) / 6);
+                    background: none;
+
+                    &::before {
+                        /* .Icon(): icons.css */
+                        content: 'clear';
+                        font-size: .667rem;
+                        position: static;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+
+                &.tag-in {
+                    animation: tag-in var(--pacem-easing-in-out-sine) .2s both;
+
+                    > * {
+                        animation: tag-content-in var(--pacem-easing-in-sine) .15s .15s both;
+                    }
+                }
+
+                &.tag-out {
+                    animation: tag-out var(--pacem-easing-in-out-sine) .2s .175s both;
+
+                    > * {
+                        animation: tag-content-out var(--pacem-easing-in-sine) .2s both;
+                    }
+                }
+            }
+        }
+
+        li.tag-new pacem-suggest .pacem-input {
+            min-height: var(--pacem-field-height);
+        }
+    }
+
+    &.pacem-disabled ul.pacem-tags > li.pacem-tag pacem-tag {
+        background-color: var(--pacem-color-disabled);
+    }
+
+    &.pacem-readonly ul.pacem-viewfinder {
+        background-color: transparent;
+        border-color: transparent !important;
+        min-height: var(--pacem-field-height);
+
+        li.pacem-tag:first-child pacem-tag {
+            margin-left: 0;
+        }
+    }
+}
+
+:--shadows pacem-tags ul.pacem-tags li.pacem-tag pacem-tag {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+}

package/src/scaffolding/textarea.css

@@ -0,0 +1,45 @@
+/* textarea.less, with the .FormFieldItemMultiline() of the markdown textarea and of pacem-latlng too (nothing in
+   between targets them). */
+:is(pacem-textarea, pacem-textarea-markdown, pacem-latlng) {
+    min-width: 417px;
+
+    & textarea.pacem-input {
+        line-height: 1.5;
+        display: block;
+        width: 100%;
+        resize: none;
+    }
+}
+
+pacem-textarea .pacem-readonly {
+    white-space: pre-line;
+}
+
+pacem-textarea.pacem-readonly {
+    min-width: unset;
+}
+
+/* .FormFieldStretch() */
+/* obsolete */
+pacem-textarea.pacem-stretch {
+    display: flex;
+    align-content: stretch;
+    align-items: stretch;
+
+    > [pacem] {
+        flex: 1 0 100%;
+    }
+}
+
+:is(.field-stretch pacem-textarea, pacem-textarea.field-stretch) {
+    display: flex;
+    align-content: stretch;
+    align-items: stretch;
+    /* resets .FormFieldItemMultiline() */
+    min-width: unset;
+    flex-direction: column;
+
+    > [pacem] {
+        flex: 1 0 100%;
+    }
+}

package/src/scaffolding/upload.css

@@ -0,0 +1,283 @@
+/* Upload. The .upload-std flavor applies .FormFieldItemWrapper() here, after the base rules it overrides
+   (see input.css). The tuners' outer size and stroke thickness are the private properties of ui/tuner.css. */
+@custom-selector :--std :is(.upload-std pacem-upload, pacem-upload.upload-std);
+
+pacem-upload {
+    display: inline-block;
+
+    > .pacem-upload.pacem-viewfinder {
+        height: var(--pacem-grid-cell);
+        width: var(--pacem-grid-cell);
+        display: grid;
+        align-items: center;
+        justify-content: stretch;
+        grid-template-columns: calc(var(--pacem-grid-cell) - 2px) auto calc(var(--pacem-grid-cell) - 16px);
+        grid-template-rows: calc(var(--pacem-grid-cell) - 2px);
+        border: 1px dashed var(--pacem-color-border);
+        border-radius: calc(var(--pacem-grid-cell) / 2);
+        box-sizing: border-box;
+
+        > * {
+            grid-row: 1;
+            grid-column: 2;
+        }
+
+        /* overlapped content */
+        > :is(.clear-button, .upload-progress, .upload-button) {
+            grid-column: 1;
+            display: flex;
+            justify-content: center;
+        }
+
+        > .upload-data {
+            white-space: pre;
+        }
+
+        > .upload-button > pacem-button,
+        > .clear-button {
+            margin: 0;
+
+            &:is(.circular, .button-circular) {
+                width: min(2 * var(--pacem-grid-spacing), var(--pacem-grid-cell) - 28px);
+                height: min(2 * var(--pacem-grid-spacing), var(--pacem-grid-cell) - 28px);
+            }
+        }
+
+        > .upload-progress pacem-tuner {
+            /* .Tuner(grid cell - 4px) */
+            --pacem--tn-s: calc(var(--pacem-grid-cell) - 4px);
+            --pacem--tn-k: 10.5px;
+        }
+
+        > .clear-button {
+            grid-column: 3;
+        }
+
+        &.upload-chosen {
+            width: auto;
+            border-color: var(--pacem-color-success);
+            border-style: solid;
+
+            &.upload-error {
+                border-color: var(--pacem-color-error);
+            }
+        }
+
+        &.upload-readonly {
+            border-width: 0;
+            grid-template-columns: auto auto;
+            grid-gap: calc(var(--pacem-grid-spacing) * 2 / 3);
+
+            > .clear-button {
+                pointer-events: none !important;
+                display: none !important;
+            }
+        }
+    }
+}
+
+.pacem-animations pacem-upload > .pacem-upload.pacem-viewfinder > :is(.clear-button, .upload-button) {
+    &:not(.pacem-viewport-aware),
+    &.pacem-viewport-aware.pacem-in-viewport {
+        animation: pop-anim .3s var(--pacem-easing-out-back) .55s both;
+    }
+}
+
+/* inside form fields */
+.pacem-field > .pacem-input-container > :not(pacem-childform) .pacem-viewfinder.upload-readonly {
+    border-radius: var(--pacem-border-input-radius);
+}
+
+:--field-box .pacem-field > .pacem-input-container > :not(pacem-childform) .pacem-viewfinder.upload-readonly {
+    padding: 0 calc(var(--pacem-grid-spacing) * 2 / 3);
+    border-width: var(--pacem-border-field-size);
+}
+
+:--field-underline .pacem-field > .pacem-input-container > :not(pacem-childform) .pacem-viewfinder.upload-readonly {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-bottom-width: var(--pacem-border-field-size);
+    border-bottom-style: solid;
+}
+
+.pacem-field:not(.pacem-has-value) > .pacem-input-container > :not(pacem-childform) .pacem-viewfinder.upload-readonly {
+    border-color: transparent;
+}
+
+/* #region .upload-std */
+/* .FormFieldItemWrapper() */
+:--std {
+    font-size: 1em;
+    position: relative;
+    display: block;
+    max-width: 417px;
+    min-width: 199px;
+}
+
+@media (--pacem-lg) {
+    :--std:not(.field-stretch) {
+        min-width: 199px;
+        display: inline-block;
+    }
+}
+
+:--field-underline :--std :is(.pacem-viewfinder, .pacem-input) {
+    border: 0;
+    border-bottom: var(--pacem-border-field-size) solid;
+}
+
+:--field-box :--std :is(.pacem-viewfinder, .pacem-input) {
+    border: var(--pacem-border-field-size) solid;
+}
+
+:--std :is(.pacem-viewfinder, .pacem-input) {
+    border-color: rgb(from var(--pacem-color-default) r g b / 20%);
+    background-color: var(--pacem-color-input-back);
+    border-radius: var(--pacem-border-input-radius);
+}
+
+:--std .pacem-viewfinder :is(.pacem-input, .pacem-viewfinder) {
+    border: none;
+    border-radius: 0;
+    background: none;
+}
+
+:--std .pacem-viewfinder .pacem-input {
+    padding: 0;
+}
+
+:--std.pacem-focus {
+    color: var(--pacem-color-field-fore-focus);
+}
+
+:--std.pacem-focus :is(.pacem-input, .pacem-viewfinder) {
+    border-color: rgb(from var(--pacem-color-default) r g b / 40%);
+}
+
+:--field-outline :--std.pacem-focus :is(.pacem-input, .pacem-viewfinder) {
+    box-shadow: 0 0 0 var(--pacem-field-outline-width) var(--pacem-color-field-outline);
+}
+
+:--no-field-outline :--std.pacem-focus.pacem-outline :is(.pacem-input, .pacem-viewfinder) {
+    box-shadow: 0 0 0 2px var(--pacem-color-default);
+}
+
+:--std.pacem-focus .pacem-viewfinder :is(.pacem-input, .pacem-viewfinder) {
+    box-shadow: none;
+}
+
+:--std .pacem-readonly {
+    font-size: calc(1.1rem * var(--pacem-font-std-rem-factor));
+    display: block;
+    min-height: var(--pacem-field-height);
+    line-height: 1.5;
+    margin-bottom: var(--pacem-border-field-size);
+}
+
+:--field-underline :--std .pacem-readonly {
+    margin-top: 0;
+}
+
+:--field-box :--std .pacem-readonly {
+    margin-top: var(--pacem-border-field-size);
+}
+
+:--std [hidden] {
+    display: none !important;
+}
+
+:--std > .pacem-upload.pacem-viewfinder {
+    height: var(--pacem-field-height);
+    width: auto;
+    grid-template-columns: calc(var(--pacem-field-height) - 2px) 1fr auto;
+    grid-column-gap: calc(var(--pacem-grid-spacing) / 3);
+    grid-template-rows: calc(var(--pacem-field-height) - 2px);
+    /* .FormFieldItem() */
+    font-family: var(--pacem-font-std);
+    font-size: calc(1.1rem * var(--pacem-font-std-rem-factor));
+    box-sizing: border-box;
+    color: var(--pacem-color-field-fore);
+    margin: 0;
+    padding: 0;
+
+    &::placeholder {
+        color: var(--pacem-color-watermark);
+        font-style: italic;
+        font-family: var(--pacem-font-std);
+    }
+
+    > .upload-data {
+        white-space: nowrap;
+        display: block;
+        /* .Ellipsed() */
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.pacem-anim {
+            animation-name: list-item-left;
+            animation-timing-function: var(--pacem-easing-out-sine);
+            transform-origin: left center;
+        }
+    }
+
+    > .upload-progress pacem-tuner {
+        /* .Tuner(field height - 2px) */
+        --pacem--tn-s: calc(var(--pacem-field-height) - 2px);
+        --pacem--tn-k: 11.57142857px;
+    }
+
+    > .upload-button > pacem-button,
+    > .clear-button {
+        margin: 0;
+
+        &:is(.circular, .button-circle, .button-circular) {
+            width: var(--pacem-grid-spacing);
+            height: var(--pacem-grid-spacing);
+            border-radius: calc(var(--pacem-border-input-radius) / 2);
+
+            &.button-success {
+                color: var(--pacem-color-success);
+                background-color: transparent;
+            }
+
+            &.button-primary {
+                color: var(--pacem-color-primary);
+                background-color: transparent;
+            }
+
+            &.button-error {
+                color: var(--pacem-color-error);
+                background-color: transparent;
+            }
+
+            &::before {
+                font-size: calc(11 * var(--pacem-grid-spacing) / 24);
+            }
+        }
+    }
+
+    &.upload-readonly {
+        background: none;
+        grid-template-columns: calc(var(--pacem-field-height) - 2px) 1fr;
+        grid-column-gap: calc(var(--pacem-grid-spacing) / 3);
+        grid-template-rows: calc(var(--pacem-field-height) - 2px);
+        padding: 0;
+        min-height: 0;
+        border-width: 0;
+    }
+}
+
+:--field-underline :--std > .pacem-upload.pacem-viewfinder {
+    min-height: calc(var(--pacem-field-height) + var(--pacem-border-field-size));
+}
+
+:--field-box :--std > .pacem-upload.pacem-viewfinder {
+    min-height: calc(var(--pacem-field-height) + 2 * var(--pacem-border-field-size));
+}
+/* #endregion */
+
+/* (`.upload-std > { .pacem-field... }` in Less: a descendant) */
+.upload-std .pacem-field.pacem-readonly:is(.pacem-valid, .pacem-invalid, .pacem-has-value) > .pacem-input-container.pacem-fieldgroup > :is(.fieldgroup-prepend, .fieldgroup-append) {
+    padding: 0;
+}

package/src/scaffolding/validators.css

@@ -0,0 +1,29 @@
+.pacem-validator {
+    background-color: var(--pacem-color-error);
+    color: var(--pacem-color-error-inverse);
+    padding-right: calc(var(--pacem-grid-spacing) / 4);
+    position: relative;
+    box-sizing: border-box;
+    min-height: var(--pacem-grid-spacing);
+    line-height: var(--pacem-grid-spacing);
+    border-radius: var(--pacem-border-input-radius);
+    padding-left: var(--pacem-grid-spacing);
+    display: inline-block;
+    margin-left: calc(var(--pacem-grid-spacing) * .8);
+
+    &::before {
+        /* .Icon(): icons.css */
+        content: 'error';
+        font-size: round(calc(var(--pacem-grid-spacing) / 1.5), 1px);
+        left: calc(var(--pacem-grid-spacing) * .125);
+        line-height: var(--pacem-grid-spacing);
+    }
+}
+
+.pacem-validator.validator-minimal,
+.form-minimal > pacem-form-field:not(.field-full) .pacem-validator,
+pacem-form-field.field-minimal .pacem-validator {
+    background-color: transparent;
+    color: var(--pacem-color-error);
+    margin-left: 0;
+}