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

package/src/scaffolding/contenteditable.css

@@ -0,0 +1,403 @@
+/* Content editable (contenteditable.less and contenteditable/*.less). (.FormFieldItemWrapperCore(): input.css) */
+@custom-selector :--pagesize :is(.contenteditable-pagesize pacem-contenteditable, pacem-contenteditable.contenteditable-pagesize);
+@custom-selector :--paper div[contenteditable=true], div[pacem][readonly];
+
+pacem-contenteditable {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-areas: 'top' 'bottom';
+    position: relative;
+
+    div[contenteditable=true] {
+        overflow: auto;
+        /* .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);
+        /* .FormFieldItemMultiline() */
+        min-width: 417px;
+        min-height: var(--pacem-field-height);
+        padding: calc(var(--pacem-grid-spacing) / 3);
+
+        &::placeholder {
+            color: var(--pacem-color-watermark);
+            font-style: italic;
+            font-family: var(--pacem-font-std);
+        }
+
+        textarea.pacem-input {
+            line-height: 1.5;
+            display: block;
+            width: 100%;
+            resize: none;
+        }
+
+        :is(ul, ol) {
+            margin: 1em 2em;
+        }
+
+        ul {
+            list-style: disc;
+        }
+
+        ol {
+            list-style: decimal;
+        }
+    }
+
+    &.pacem-readonly {
+        .pacem-contenteditable {
+            border: none;
+            margin-bottom: var(--pacem-border-field-size);
+        }
+
+        div[pacem][readonly] {
+            font-size: 1.1em;
+            min-height: var(--pacem-field-height);
+            box-sizing: border-box;
+            padding: calc(var(--pacem-grid-spacing) / 3);
+        }
+    }
+
+    .pacem-viewfinder {
+        grid-area: top;
+    }
+}
+
+:--field-box pacem-contenteditable.pacem-readonly .pacem-contenteditable {
+    margin-top: var(--pacem-border-field-size);
+}
+
+/* .FormFieldStretch() */
+:is(.field-stretch pacem-contenteditable, pacem-contenteditable.field-stretch) .pacem-contenteditable {
+    display: flex;
+    align-content: stretch;
+    align-items: stretch;
+
+    > [pacem] {
+        flex: 1 0 100%;
+    }
+}
+
+/* #region print sizes: 1.95cm vertical padding, .6cm lines, .4cm font */
+:--pagesize :--paper {
+    box-sizing: border-box;
+    padding: 1.95cm 1cm;
+    line-height: .6cm;
+    font-size: .4cm;
+    margin: var(--pacem-grid-spacing) auto;
+}
+
+:--pagesize :--paper p {
+    padding: 0;
+}
+
+:--pagesize :--paper blockquote {
+    padding-top: .3cm;
+    padding-bottom: .3cm;
+}
+
+:--pagesize :--paper :is(p, blockquote) {
+    margin: 0 0 .3cm 0;
+}
+
+:--pagesize :--paper :is(p, blockquote):last-child {
+    margin-bottom: 0;
+}
+
+:--pagesize :--paper h1 {
+    line-height: .9cm;
+    font-size: .6cm;
+    font-weight: 700;
+    margin: 12pt 0 2pt 0;
+}
+
+:--pagesize :--paper h2 {
+    line-height: .75cm;
+    font-size: .5cm;
+    font-weight: 700;
+    margin: 12pt 0 2pt 0;
+}
+
+:--dark-scheme :--pagesize :--paper {
+    box-shadow: 0 0 var(--pacem-grid-spacing) rgba(0,0,0,.5);
+    background-color: var(--pacem-color-input-back);
+}
+
+:--light-scheme :--pagesize :--paper {
+    border: 1px solid var(--pacem-color-border);
+    border-top: 1px solid #fff;
+    box-shadow: 0 0 var(--pacem-grid-spacing) rgba(0,0,0,.1);
+}
+
+:--pagesize.pagesize-a4 :--paper {
+    width: 21cm;
+}
+
+:--pagesize.pagesize-a5 :--paper {
+    width: 148mm;
+}
+/* #endregion */
+
+/* #region dashboard */
+pacem-contenteditable div[dashboard] {
+    padding: calc(var(--pacem-grid-spacing) / 3) 0 0 0;
+    grid-area: bottom;
+}
+
+/* dashboard on top */
+:is(.dashboard-top pacem-contenteditable, pacem-contenteditable.dashboard-top) {
+    .pacem-viewfinder {
+        grid-area: bottom;
+    }
+
+    div[dashboard] {
+        grid-area: top;
+    }
+}
+
+/* content flow */
+pacem-contenteditable div[dashboard],
+pacem-contenteditable div[dashboard] :is(.pacem-toolbar, .pacem-contenteditable-toolbar) {
+    display: flex;
+    flex-flow: row;
+    align-content: start;
+    align-items: start;
+    justify-content: start;
+}
+
+pacem-contenteditable div[dashboard] {
+    > :is(.pacem-toolbar, .pacem-contenteditable-toolbar) {
+        flex-wrap: nowrap;
+        margin-bottom: calc(var(--pacem-grid-spacing) / 3);
+        padding: 0;
+
+        .pacem-contenteditable-command {
+            /* reset the input field appearance in the toolbar */
+            > pacem-suggest {
+                padding: 0;
+
+                :is(.pacem-input, .pacem-viewfinder) {
+                    background: transparent;
+                    border: 0;
+                    color: inherit;
+                }
+            }
+
+            > pacem-button,
+            > .pacem-button {
+                border-radius: 0;
+                display: block;
+            }
+
+            /* (when the radius is not 0) */
+            &:is(.toolbar-first, :first-child) > pacem-button,
+            &:is(.toolbar-first, :first-child) > .pacem-button {
+                border-top-left-radius: var(--pacem-border-radius);
+                border-bottom-left-radius: var(--pacem-border-radius);
+            }
+
+            &:is(.toolbar-last, :last-child) > pacem-button,
+            &:is(.toolbar-last, :last-child) > .pacem-button {
+                border-top-right-radius: var(--pacem-border-radius);
+                border-bottom-right-radius: var(--pacem-border-radius);
+            }
+
+            &:not(:last-child):not(.toolbar-last) > pacem-button,
+            &:not(:last-child):not(.toolbar-last) > .pacem-button {
+                border-right: none;
+            }
+
+            > pacem-button.button,
+            > .pacem-button.button {
+                margin: 0;
+                box-shadow: none;
+                padding: 0 calc(var(--pacem-grid-spacing) / 2);
+            }
+        }
+    }
+
+    > :is(.pacem-separator, .pacem-contenteditable-separator) {
+        display: block;
+        width: calc(var(--pacem-grid-spacing) / 3);
+    }
+}
+
+/* .ButtonShadows() */
+:--shadows pacem-contenteditable div[dashboard] > :is(.pacem-toolbar, .pacem-contenteditable-toolbar) {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.5);
+}
+
+/* sticky */
+:is(.dashboard-sticky pacem-contenteditable, pacem-contenteditable.dashboard-sticky) div[dashboard] {
+    position: sticky;
+    bottom: 0;
+    top: auto;
+    background: var(--pacem-color-field-back);
+}
+
+/* .Blur() */
+:--blur :is(.dashboard-sticky pacem-contenteditable, pacem-contenteditable.dashboard-sticky) div[dashboard] {
+    background-color: rgb(from var(--pacem-color-background) r g b / 50%);
+    backdrop-filter: blur(calc(var(--pacem-grid-spacing) / 4));
+}
+
+/* dashboard at the bottom */
+:is(.dashboard-sticky:not(.dashboard-top) pacem-contenteditable:not(.dashboard-top), :not(.dashboard-top) pacem-contenteditable.dashboard-sticky:not(.dashboard-top)) {
+    .pacem-viewfinder {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    div[dashboard] {
+        box-shadow: 0 -1px 0px rgba(0,0,0,.25);
+    }
+}
+
+/* dashboard on top */
+:is(.dashboard-top.dashboard-sticky pacem-contenteditable, pacem-contenteditable.dashboard-top.dashboard-sticky) {
+    .pacem-viewfinder {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    div[dashboard] {
+        grid-area: top;
+        bottom: auto;
+        top: 0;
+        box-shadow: 0 1px 0px rgba(0,0,0,.25);
+    }
+}
+
+/* layout-driven sticky position */
+.pacem-body {
+    &[footbar] pacem-contenteditable div[dashboard] {
+        top: auto;
+        bottom: var(--pacem-layout-toolbar-height);
+    }
+
+    &[footer] pacem-contenteditable div[dashboard] {
+        top: auto;
+        bottom: var(--pacem-layout-footer-height);
+    }
+
+    &[bigfooter] pacem-contenteditable div[dashboard] {
+        top: auto;
+        bottom: var(--pacem-layout-bigfooter-height);
+    }
+
+    &[footer][footbar] pacem-contenteditable div[dashboard] {
+        top: auto;
+        bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-layout-toolbar-height));
+    }
+
+    &[bigfooter][footbar] pacem-contenteditable div[dashboard] {
+        top: auto;
+        bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height));
+    }
+
+    &[headbar] :is(.dashboard-top pacem-contenteditable, pacem-contenteditable.dashboard-top) div[dashboard] {
+        top: var(--pacem-layout-toolbar-height);
+        bottom: auto;
+    }
+
+    &[header] :is(.dashboard-top pacem-contenteditable, pacem-contenteditable.dashboard-top) div[dashboard] {
+        top: var(--pacem-layout-header-height);
+        bottom: auto;
+    }
+
+    &[header][headbar] :is(.dashboard-top pacem-contenteditable, pacem-contenteditable.dashboard-top) div[dashboard] {
+        top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height));
+        bottom: auto;
+    }
+}
+/* #endregion */
+
+/* alignment (`attr()` is untyped, as in Less: not a valid text-align) */
+div[contenteditable=true] [data-align] {
+    text-align: attr(data-align);
+}
+
+/* #region picture: 2px handles */
+div[contenteditable=true] {
+    :is(picture, img) {
+        max-width: 100%;
+    }
+
+    picture {
+        display: inline-block;
+
+        > img {
+            display: block;
+
+            &::selection {
+                background-color: transparent;
+            }
+        }
+
+        > .pacem-rescale {
+            opacity: .5;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            &:is(.rescale-bottomleft, .rescale-topleft, .rescale-bottomright, .rescale-topright) {
+                opacity: 1;
+                background-color: var(--pacem-color-primary);
+                border: 2px solid var(--pacem-color-primary);
+            }
+
+            &.rescale-bottomleft {
+                transform: translate(-2px, 2px);
+            }
+
+            &.rescale-topleft {
+                transform: translate(-2px, -2px);
+            }
+
+            &.rescale-bottomright {
+                transform: translate(2px, 2px);
+            }
+
+            &.rescale-topright {
+                transform: translate(2px, -2px);
+            }
+
+            &.rescale-right {
+                background: linear-gradient(to right, transparent 0, transparent 50%, var(--pacem-color-primary) 50%, var(--pacem-color-primary) 100%);
+            }
+
+            &.rescale-left {
+                background: linear-gradient(to right, var(--pacem-color-primary) 0, var(--pacem-color-primary) 50%, transparent 50%, transparent 100%);
+            }
+
+            &.rescale-bottom {
+                background: linear-gradient(to bottom, transparent 0, transparent 50%, var(--pacem-color-primary) 50%, var(--pacem-color-primary) 100%);
+            }
+
+            &.rescale-top {
+                background: linear-gradient(to bottom, var(--pacem-color-primary) 0, var(--pacem-color-primary) 50%, transparent 50%, transparent 100%);
+            }
+        }
+    }
+}
+/* #endregion */
+
+/* placeholder: 3px outline */
+div[contenteditable=true] ins {
+    text-decoration: inherit;
+
+    &::selection {
+        background-color: transparent;
+    }
+
+    &:hover {
+        outline: 3px solid rgb(from var(--pacem-color-primary) r g b / 50%);
+    }
+
+    &:is(:active, :focus, .placeholder-selected) {
+        outline: 3px solid var(--pacem-color-primary);
+    }
+}

package/src/scaffolding/datepicker.css

@@ -0,0 +1,126 @@
+/* (.FormFieldItemWrapper(): input.css) */
+pacem-datetime-picker {
+    .pacem-datetime-picker-fields {
+        width: 100%;
+
+        > :is(div, pacem-panel) {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .pacem-datetime-picker-hours {
+            padding-left: calc(var(--pacem-grid-spacing) / 1.5);
+            position: relative;
+
+            &::before {
+                /* .Icon(): icons.css */
+                content: 'access_time';
+                font-size: calc(var(--pacem-grid-spacing) / 2);
+                left: 0;
+                top: calc(var(--pacem-grid-spacing) / 3);
+            }
+        }
+    }
+
+    /* overriding pacem-select rules */
+    .pacem-datetime-picker {
+        pacem-select {
+            border: 0;
+            min-width: 56px;
+
+            .pacem-select {
+                min-height: var(--pacem-field-height);
+                line-height: var(--pacem-field-height);
+            }
+        }
+
+        :is(.pacem-datetime-picker-hours, .pacem-datetime-picker-minutes, .pacem-datetime-picker-seconds) {
+            min-width: 40px;
+        }
+
+        .pacem-datetime-picker-fields {
+            display: inline-block;
+        }
+    }
+
+    dl {
+        padding: calc(var(--pacem-grid-spacing) / 6) 0;
+        overflow: hidden;
+        height: calc(var(--pacem-grid-spacing) * 1.3333);
+
+        :is(dt, dd) {
+            line-height: calc(var(--pacem-grid-spacing) * 1.3333 * .5);
+            height: calc(var(--pacem-grid-spacing) * 1.3333 * .5);
+        }
+
+        dt {
+            float: left;
+            vertical-align: middle;
+            width: calc(var(--pacem-grid-spacing) / 1.5);
+            background: center center no-repeat;
+            background-size: contain;
+            font-size: 0;
+
+            &:nth-of-type(2)::before {
+                /* .Icon(): icons.css */
+                content: 'language';
+                font-size: calc(var(--pacem-grid-spacing) / 2);
+                position: static;
+                line-height: calc(var(--pacem-grid-spacing) * 1.3333 * .5);
+            }
+
+            &:nth-of-type(1)::before {
+                /* .Icon(): icons.css */
+                content: 'location_on';
+                font-size: calc(var(--pacem-grid-spacing) / 2);
+                position: static;
+                line-height: calc(var(--pacem-grid-spacing) * 1.3333 * .5);
+            }
+        }
+
+        dd {
+            clear: right;
+            font-family: var(--pacem-font-tech);
+            font-size: calc(.8rem * var(--pacem-font-tech-rem-factor));
+
+            &:nth-of-type(2) {
+                color: rgb(from var(--pacem-color-tech) r g b / 100%);
+            }
+        }
+
+        &.pacem-hidden {
+            transition: all .3s;
+            transform: none;
+            height: 0;
+        }
+
+        &.pacem-shown {
+            transition: all .3s .1s;
+            transform: none;
+        }
+    }
+
+    /* .FormFieldLabelIcon() */
+    .pacem-readonly {
+        padding-left: var(--pacem-grid-spacing);
+
+        &::before {
+            /* .Icon(): icons.css */
+            content: 'access_time';
+            font-size: calc(1.1rem * var(--pacem-font-rem-factor));
+            line-height: calc(1.5 * 1.1 * var(--pacem-font-rem-factor));
+            color: var(--pacem-color-input-toggle);
+            left: 0;
+            top: 0;
+        }
+
+        &.date::before {
+            content: 'date_range';
+        }
+    }
+}
+
+.datetime-picker-nodetails .pacem-datetime-picker-preview {
+    pointer-events: none !important;
+    display: none !important;
+}

package/src/scaffolding/elements.css

@@ -0,0 +1,30 @@
+/* The rules of scaffolding/dark/index.less itself. */
+pacem-form {
+    display: block;
+}
+
+pacem-input-email,
+pacem-input-number,
+pacem-input-password,
+pacem-input-search,
+pacem-input-tel,
+pacem-input-text,
+pacem-input-code,
+pacem-input-url,
+pacem-select,
+pacem-radio,
+pacem-checkbox,
+pacem-calendar-picker,
+pacem-textarea {
+    display: inline-block;
+}
+
+pacem-data-item,
+pacem-input-hidden {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+label.pacem-label {
+    user-select: none;
+}