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

package/src/scaffolding/image.css

@@ -0,0 +1,195 @@
+/* Image editing and input. Tools margin: round(spacing * 1.3333). */
+pacem-dialog pacem-edit-image {
+    overflow: hidden;
+    display: block;
+
+    pacem-img {
+        display: inline-block;
+        font-size: 0;
+        border: solid calc(var(--pacem-grid-spacing) / 3) transparent;
+        width: 25%;
+        box-sizing: border-box;
+        min-height: 90px;
+
+        &.pacem-selected {
+            border-color: var(--pacem-color-highlight);
+        }
+    }
+
+    .pacem-edit-image {
+        transition: transform var(--pacem-easing-default) .3s;
+        display: flex;
+        flex-direction: row;
+
+        > div {
+            position: relative;
+            flex: 0 0 100%;
+
+            &:nth-child(2) {
+                display: flex;
+                justify-content: center;
+            }
+        }
+
+        &:is(.pacem-snapshot-enabled, .pacem-upload-enabled) pacem-input-search {
+            margin-right: round(calc(var(--pacem-grid-spacing) * 1.3333), 1px);
+        }
+
+        pacem-upload {
+            position: absolute;
+            top: 0;
+            right: 0;
+
+            .pacem-upload-filewrapper::before {
+                /* .Icon(): icons.css */
+                content: 'file_upload';
+                font-size: var(--pacem-font-icon-size);
+                cursor: pointer;
+            }
+        }
+
+        pacem-button.pacem-snapshot {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: var(--pacem-grid-spacing);
+            height: var(--pacem-grid-spacing);
+
+            &::before {
+                /* .Icon(): icons.css */
+                content: 'add_a_photo';
+                font-size: var(--pacem-font-icon-size);
+            }
+        }
+
+        &.pacem-snapshot-enabled.pacem-upload-enabled {
+            pacem-input-search {
+                margin-right: calc(var(--pacem-grid-spacing) * 4);
+            }
+
+            pacem-upload {
+                right: calc(var(--pacem-grid-spacing) * 2);
+            }
+        }
+
+        &.pacem-snapshot {
+            transform: translateX(-100%);
+        }
+    }
+
+    /* a 10px line at the bottom of 32px */
+    pacem-progressbar {
+        margin: calc(2 * var(--pacem-grid-spacing)) 0;
+
+        .pacem-progressbar {
+            background: linear-gradient(to bottom, transparent 0, transparent 22px, rgba(0,0,0,0.1) 22px, rgba(0,0,0,0.1) 32px);
+        }
+    }
+}
+
+pacem-input-image {
+    display: inline-block;
+
+    .pacem-input-image {
+        position: relative;
+        min-height: calc(2 * var(--pacem-grid-spacing));
+        /* .FormFieldItemMultiline() */
+        min-width: 417px;
+        padding-right: round(calc(var(--pacem-grid-spacing) * 1.3333), 1px);
+
+        textarea.pacem-input {
+            line-height: 1.5;
+            display: block;
+            width: 100%;
+            resize: none;
+        }
+
+        pacem-img {
+            min-height: calc(var(--pacem-grid-spacing) * 5);
+            width: 100%;
+            height: 100%;
+            background-color: rgb(from var(--pacem-color-default) r g b / 10%);
+        }
+
+        .pacem-input-image-dashboard {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: var(--pacem-grid-spacing);
+            height: 100%;
+
+            pacem-button {
+                display: block;
+                font-size: 0;
+                width: var(--pacem-grid-spacing);
+                height: var(--pacem-grid-spacing);
+                background: transparent;
+
+                &.pacem-edit::before {
+                    /* .Icon(): icons.css */
+                    content: 'edit';
+                    font-size: var(--pacem-font-icon-size);
+                }
+
+                &.pacem-clear::before {
+                    /* .Icon(): icons.css */
+                    content: 'clear';
+                    font-size: var(--pacem-font-icon-size);
+                }
+
+                &::before {
+                    left: 0;
+                    top: 0;
+                }
+            }
+        }
+
+        pacem-input-url {
+            display: block;
+            margin-top: calc(var(--pacem-grid-spacing) / 4);
+
+            .pacem-input {
+                min-width: 417px;
+            }
+        }
+    }
+
+    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: 'file_download';
+                font-size: calc(var(--pacem-grid-spacing) / 2);
+            }
+
+            &:nth-of-type(1)::before {
+                /* .Icon(): icons.css */
+                content: 'crop_free';
+                font-size: calc(var(--pacem-grid-spacing) / 2);
+            }
+        }
+
+        dd {
+            clear: right;
+            margin-left: var(--pacem-grid-spacing);
+            font-family: var(--pacem-font-tech);
+            font-size: calc(.8rem * var(--pacem-font-tech-rem-factor));
+        }
+    }
+}

package/src/scaffolding/index.css

@@ -0,0 +1,40 @@
+/* scaffolding (form fields), same order as theme/less/pacem/scaffolding/dark/index.less.
+   (icons.css: the .Icon() declarations of the whole folder, see there; generated/colors.css: the color classes'
+   private properties, which nothing else declares.) */
+@import "icons.css";
+@import "generated/colors.css";
+@import "elements.css";
+@import "validators.css";
+@import "input.css";
+@import "password.css";
+@import "textarea.css";
+@import "markdown.css";
+@import "select.css";
+@import "datepicker.css";
+@import "latlng.css";
+@import "upload.css";
+@import "checkbox-radio.css";
+@import "checkbox.css";
+@import "radio.css";
+@import "contenteditable.css";
+/* search, url, tel */
+@import "inputs.css";
+@import "color.css";
+/* number, suggest */
+@import "suggest.css";
+@import "tags.css";
+@import "snapshot.css";
+@import "image.css";
+@import "slider.css";
+@import "hierarchy.css";
+@import "generated/calendar-picker.css";
+@import "calendar-picker.css";
+/* namevalue-list, element-picker, property-picker, expression, char-counter, geolocate, chars */
+@import "pickers.css";
+@import "childform.css";
+/* formfield.less, in three parts */
+@import "formfield.css";
+@import "generated/formfield.css";
+@import "fieldset.css";
+/* form, dialog-overrides */
+@import "form.css";

package/src/scaffolding/input.css

@@ -0,0 +1,163 @@
+/* Field elements: input.less, and the .FormFieldItemWrapper() mixin (scaffolding/shared.less) of every field.
+
+   Less applied the wrapper element by element, in the file of each one: being made of the same rules on type
+   selectors only (equal specificity), it is written once here for all of them (:--fields), where Less applied it
+   first. Exceptions, written where Less applied them: `.upload-std pacem-upload` (upload.css: its own rules must
+   precede the wrapper) and the slider in a form field (slider.css: only the core, on contextual selectors).
+   pacem-contenteditable takes the core only (.FormFieldItemWrapperCore()).
+
+   Form field items (.FormFieldItem()): their min-height covers one border (underlined fields) or two (boxed). */
+@custom-selector :--fields :is(pacem-input-text, pacem-input-chars, pacem-input-password, pacem-input-tel, pacem-input-url,
+    pacem-input-email, pacem-input-search, pacem-suggest, pacem-checkbox, pacem-radio, pacem-textarea, pacem-textarea-markdown,
+    pacem-input-number, pacem-calendar-picker, pacem-select, pacem-datetime-picker, pacem-latlng, pacem-radio-list,
+    pacem-checkbox-list, pacem-input-color, pacem-tags, pacem-element-picker, pacem-property-picker, pacem-expression,
+    pacem-geolocate);
+@custom-selector :--cores :is(:--fields, pacem-contenteditable);
+/* the elements of input.less */
+@custom-selector :--inputs :is(pacem-input-text, pacem-input-chars, pacem-input-password, pacem-input-tel, pacem-input-url,
+    pacem-input-email, pacem-input-search, pacem-suggest, pacem-checkbox, pacem-radio, pacem-textarea, pacem-textarea-markdown,
+    pacem-input-number, pacem-calendar-picker);
+/* the toggleable ones */
+@custom-selector :--toggles :is(pacem-input-text, pacem-input-password, pacem-input-tel, pacem-input-url, pacem-input-email,
+    pacem-input-search, pacem-suggest, pacem-textarea, pacem-textarea-markdown, pacem-input-number);
+
+/* #region .FormFieldItemWrapper() */
+:--fields {
+    font-size: 1em;
+    position: relative;
+    display: block;
+}
+
+@media (--pacem-lg) {
+    :--fields:not(.field-stretch) {
+        min-width: 199px;
+        display: inline-block;
+    }
+}
+
+/* .FormFieldItemWrapperCore() */
+:--field-underline :--cores :is(.pacem-viewfinder, .pacem-input) {
+    border: 0;
+    border-bottom: var(--pacem-border-field-size) solid;
+}
+
+:--field-box :--cores :is(.pacem-viewfinder, .pacem-input) {
+    border: var(--pacem-border-field-size) solid;
+}
+
+:--cores :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);
+}
+
+/* nested .pacem-input or .pacem-viewfinder don't show borders */
+:--cores .pacem-viewfinder :is(.pacem-input, .pacem-viewfinder) {
+    border: none;
+    border-radius: 0;
+    background: none;
+}
+
+:--cores .pacem-viewfinder .pacem-input {
+    padding: 0;
+}
+
+:--cores.pacem-focus {
+    color: var(--pacem-color-field-fore-focus);
+}
+
+:--cores.pacem-focus :is(.pacem-input, .pacem-viewfinder) {
+    border-color: rgb(from var(--pacem-color-default) r g b / 40%);
+}
+
+:--field-outline :--cores.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 :--cores.pacem-focus.pacem-outline :is(.pacem-input, .pacem-viewfinder) {
+    box-shadow: 0 0 0 2px var(--pacem-color-default);
+}
+
+/* nested .pacem-input or .pacem-viewfinder don't show the outline */
+:--cores.pacem-focus .pacem-viewfinder :is(.pacem-input, .pacem-viewfinder) {
+    box-shadow: none;
+}
+
+:--cores .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;
+    /* (replaces the bottom border) */
+    margin-bottom: var(--pacem-border-field-size);
+}
+
+:--field-underline :--cores .pacem-readonly {
+    margin-top: 0;
+}
+
+/* (replaces the top border) */
+:--field-box :--cores .pacem-readonly {
+    margin-top: var(--pacem-border-field-size);
+}
+
+:--cores [hidden] {
+    display: none !important;
+}
+/* #endregion */
+
+:--inputs .pacem-input {
+    /* .FormFieldItem() */
+    padding: 0 calc(var(--pacem-grid-spacing) / 3);
+    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);
+    /* .FormFieldItemInline() */
+    min-width: 0;
+    width: 100%;
+    line-height: var(--pacem-field-height);
+
+    &::placeholder {
+        color: var(--pacem-color-watermark);
+        font-style: italic;
+        font-family: var(--pacem-font-std);
+    }
+}
+
+:--field-underline :--inputs .pacem-input {
+    min-height: calc(var(--pacem-field-height) + var(--pacem-border-field-size));
+}
+
+:--field-box :--inputs .pacem-input {
+    min-height: calc(var(--pacem-field-height) + 2 * var(--pacem-border-field-size));
+}
+
+:--inputs::before {
+    color: var(--pacem-color-input-icon);
+}
+
+:--inputs.pacem-focus::before {
+    color: var(--pacem-color-field-fore);
+}
+
+@media (--pacem-lg) {
+    pacem-form-field.field-stretch > pacem-form > .pacem-input-container :is(pacem-input-text, pacem-input-password, pacem-input-tel,
+        pacem-input-url, pacem-input-email, pacem-input-search, pacem-suggest, pacem-checkbox, pacem-radio, pacem-textarea,
+        pacem-textarea-markdown, pacem-input-number, pacem-calendar-picker) {
+        min-width: 0;
+    }
+}
+
+/* toggle: the input shows its box on focus only (.ToggleBlur(), .ToggleAnim()) */
+pacem-form-field.field-toggle :--toggles:not(.pacem-focus) > .pacem-input,
+:--toggles.input-toggle:not(.pacem-focus) > .pacem-input {
+    border-color: transparent;
+    background-color: transparent;
+    padding: 0;
+}
+
+.pacem-body.pacem-animations pacem-form-field.field-toggle :--toggles > .pacem-input,
+.pacem-body.pacem-animations :--toggles.input-toggle > .pacem-input {
+    transition: padding .2s var(--pacem-easing-in-out-sine), background-color .25s linear, border-color .25s linear;
+}

package/src/scaffolding/inputs.css

@@ -0,0 +1,77 @@
+/* The small field files of scaffolding/dark: search.less, url.less, tel.less (.FormFieldIcon()). */
+
+/* #region search */
+pacem-input-search {
+    display: block;
+    position: relative;
+
+    &::before {
+        /* .Icon(): icons.css */
+        content: 'search';
+        font-size: var(--pacem-font-icon-size);
+        left: 0;
+    }
+
+    input[type=search] {
+        border: none;
+        border-bottom: 1px solid rgb(from var(--pacem-theme-light) r g b / 10%);
+        padding-bottom: calc(var(--pacem-grid-spacing) / 2);
+        padding-left: calc(1.25 * var(--pacem-grid-spacing));
+        margin-bottom: calc(var(--pacem-grid-spacing) / 1.5);
+        display: block;
+        width: 100%;
+        font-family: var(--pacem-font-main);
+        font-size: calc(1.2rem * var(--pacem-font-main-rem-factor));
+        color: var(--pacem-color-default);
+        height: calc(1.25 * var(--pacem-grid-spacing));
+        box-sizing: border-box;
+    }
+}
+/* #endregion */
+
+/* #region url, tel: .FormFieldIcon() */
+:is(pacem-input-url, pacem-input-tel) {
+    position: relative;
+
+    .pacem-input {
+        padding-left: var(--pacem-field-height);
+        box-sizing: border-box;
+    }
+
+    &::before {
+        /* .Icon(): icons.css */
+        font-size: calc(1.1rem * var(--pacem-font-rem-factor));
+        line-height: var(--pacem-field-height);
+        left: calc(var(--pacem-grid-spacing) / 3);
+        top: 1px;
+    }
+
+    &.pacem-invalid::before {
+        color: var(--pacem-color-field-fore-error);
+    }
+}
+
+pacem-input-url::before {
+    content: 'link';
+    transform: rotate(-45deg);
+}
+
+pacem-input-tel::before {
+    content: 'dialpad';
+}
+
+/* .FormFieldLabelIcon() */
+pacem-input-tel.pacem-readonly {
+    padding-left: var(--pacem-grid-spacing);
+
+    &::before {
+        /* .Icon(): icons.css */
+        content: 'dialpad';
+        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;
+    }
+}
+/* #endregion */

package/src/scaffolding/latlng.css

@@ -0,0 +1,173 @@
+/* (.FormFieldItemWrapper(): input.css; .FormFieldItemMultiline(): textarea.css)
+   The details' row height: ceil(grid spacing * 1.3333 * 1.5) / 3. */
+pacem-latlng {
+    .pacem-map {
+        margin-top: calc(var(--pacem-grid-spacing) / 2);
+    }
+
+    .pacem-latlng {
+        .pacem-latlng-fields {
+            display: flex;
+            flex-wrap: nowrap;
+
+            pacem-input-number {
+                padding-left: var(--pacem-grid-spacing);
+                position: relative;
+                box-sizing: border-box;
+
+                .pacem-input {
+                    padding-left: calc(var(--pacem-grid-spacing) / 6);
+                    text-align: left;
+
+                    @media (--pacem-lg) {
+                        min-width: calc(199px - var(--pacem-grid-spacing));
+                    }
+                }
+
+                &.pacem-lat::before {
+                    /* .Icon(): icons.css */
+                    content: 'swap_vert';
+                    font-size: var(--pacem-font-icon-size);
+                }
+
+                &.pacem-lng::before {
+                    /* .Icon(): icons.css */
+                    content: 'swap_horiz';
+                    font-size: var(--pacem-font-icon-size);
+                }
+
+                &:is(.pacem-lat, .pacem-lng)::before {
+                    left: 0;
+                    color: var(--pacem-color-default);
+                    line-height: var(--pacem-field-height);
+                }
+            }
+        }
+
+        dl {
+            padding: calc(var(--pacem-grid-spacing) / 6) 0 calc(var(--pacem-grid-spacing) / 2) 0;
+            overflow: hidden;
+            height: round(up, calc(var(--pacem-grid-spacing) * 1.3333 * 1.5), 1px);
+
+            :is(dt, dd) {
+                height: calc(round(up, calc(var(--pacem-grid-spacing) * 1.3333 * 1.5), 1px) / 3);
+                line-height: calc(round(up, calc(var(--pacem-grid-spacing) * 1.3333 * 1.5), 1px) / 3);
+            }
+
+            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(3)::before {
+                    /* .Icon(): icons.css */
+                    content: 'language';
+                    font-size: calc(var(--pacem-grid-spacing) / 2);
+                }
+
+                &:nth-of-type(2)::before {
+                    /* .Icon(): icons.css */
+                    content: 'location_on';
+                    font-size: calc(var(--pacem-grid-spacing) / 2);
+                }
+
+                &:nth-of-type(1)::before {
+                    /* .Icon(): icons.css */
+                    content: 'short_text';
+                    font-size: calc(var(--pacem-grid-spacing) / 2);
+                }
+
+                &::before {
+                    position: static !important;
+                    line-height: calc(round(up, calc(var(--pacem-grid-spacing) * 1.3333 * 1.5), 1px) / 3) !important;
+                }
+            }
+
+            dd {
+                clear: right;
+                font-family: var(--pacem-font-tech);
+                font-size: calc(.8rem * var(--pacem-font-tech-rem-factor));
+                /* .Ellipsed() */
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                max-width: calc(417px - var(--pacem-grid-spacing) / 1.5);
+
+                &:nth-of-type(3) {
+                    color: rgb(from var(--pacem-color-tech) r g b / 100%);
+
+                    pacem-span {
+                        position: relative;
+                        padding-left: var(--pacem-grid-spacing);
+                        display: inline-block;
+
+                        &::before {
+                            color: var(--pacem-color-default);
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                        }
+                    }
+                }
+
+                pacem-span.pacem-lat-north::before {
+                    content: 'N';
+                }
+
+                pacem-span.pacem-lat-south::before {
+                    content: 'S';
+                }
+
+                pacem-span.pacem-lng-east::before {
+                    content: 'E';
+                }
+
+                pacem-span.pacem-lng-west::before {
+                    content: 'W';
+                }
+            }
+
+            &.pacem-hidden {
+                transition: all .3s;
+                transform: none;
+                height: 0;
+            }
+
+            &.pacem-shown {
+                transition: all .3s .1s;
+                transform: none;
+            }
+        }
+    }
+
+    .pacem-readonly {
+        padding-left: var(--pacem-grid-spacing);
+        line-height: var(--pacem-field-height);
+        /* .Ellipsed() */
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 417px;
+
+        &::before {
+            /* .Icon(): icons.css */
+            content: 'location_on';
+            font-size: calc(var(--pacem-grid-spacing) * 5 / 6);
+            line-height: var(--pacem-field-height);
+            color: var(--pacem-color-primary);
+            left: 0;
+        }
+
+        small {
+            color: rgb(from var(--pacem-color-default) r g b / 60%);
+            font-size: .8em;
+
+            &::before {
+                content: ' - ';
+            }
+        }
+    }
+}

package/src/scaffolding/markdown.css

@@ -0,0 +1,14 @@
+/* (.FormFieldItemMultiline(): textarea.css) */
+pacem-textarea-markdown .pacem-readonly {
+    line-height: 1;
+}
+
+pacem-textarea-markdown.pacem-readonly .pacem-readonly {
+    > :first-child {
+        margin-top: 0;
+    }
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+}

package/src/scaffolding/password.css

@@ -0,0 +1,7 @@
+pacem-input-password i.pacem-icon.pacem-clickable {
+    margin-left: calc(-1 * var(--pacem-grid-spacing));
+}
+
+pacem-input-password :is(input[type=password], input[type=text]) {
+    padding-right: calc(var(--pacem-grid-spacing) * 1.25);
+}