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

package/src/scaffolding/fieldset.css

@@ -0,0 +1,346 @@
+/* Form fields, last part of formfield.less: label tooltips, field appearance, fieldsets and fieldgroups. */
+@custom-selector :--sets :is(.pacem-fieldset-left, .pacem-fieldset-center, .pacem-fieldset-right, .pacem-fieldset-auto,
+    .fieldset-left, .fieldset-center, .fieldset-right, .fieldset-auto);
+@custom-selector :--prepends :is(.fieldgroup-prepend, .input-group-prepend);
+@custom-selector :--appends :is(.fieldgroup-append, .input-group-append);
+@custom-selector :--groups-in-sets .pacem-fieldset .pacem-fieldgroup, .pacem-fieldset input-group;
+
+/* #region label tooltip */
+.pacem-field.pacem-editable > label.pacem-label {
+    &.pacem-tooltip::before {
+        content: 'info' !important;
+        animation: none !important;
+    }
+
+    &.pacem-required::after {
+        content: '*';
+        font-family: var(--pacem-font-tech);
+        font-size: calc(1.1rem * var(--pacem-font-tech-rem-factor));
+    }
+}
+
+/* the arrow points to the info icon (spacing / 1.5): offset by -spacing / 3 - spacing / 2 + icon size / 2 */
+pacem-balloon.pacem-field-tooltip {
+    &:is(.balloon-top, .balloon-bottom).balloon-start {
+        margin-left: calc(var(--pacem-grid-spacing) / -2);
+    }
+
+    &:is(.balloon-top, .balloon-bottom).balloon-end {
+        margin-left: calc(var(--pacem-grid-spacing) / 2 - (var(--pacem-field-height) - var(--pacem-grid-spacing) / 1.5) / 2);
+    }
+
+    &:is(.balloon-left, .balloon-right).balloon-start {
+        margin-top: calc(var(--pacem-grid-spacing) / -2);
+    }
+
+    &:is(.balloon-left, .balloon-right).balloon-end {
+        margin-top: calc(var(--pacem-grid-spacing) / 2 - (var(--pacem-field-height) - var(--pacem-grid-spacing) / 1.5) / 2);
+    }
+}
+/* #endregion */
+
+:--shadows .pacem-field.pacem-editable {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.25);
+}
+
+:--no-shadows .pacem-field.pacem-editable {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 8) rgba(0,0,0,0.05);
+}
+
+.pacem-field.pacem-readonly {
+    background-color: transparent;
+    box-shadow: none;
+    border-color: rgb(from var(--pacem-color-default) r g b / 5%);
+}
+
+/* #region fieldset (.HorizontalItemSet(field)) */
+.pacem-fieldset {
+    display: grid;
+    grid-gap: 0;
+    grid-template-columns: auto 1fr auto 1fr auto;
+    grid-template-areas: 'left . center . right';
+    align-items: start;
+    white-space: nowrap;
+
+    :is(.pacem-fieldset-left, .fieldset-left, .pacem-fieldset-center, .fieldset-center, .pacem-fieldset-right, .fieldset-right) {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    :is(.pacem-fieldset-left, .fieldset-left) {
+        grid-area: left;
+        align-content: flex-start;
+    }
+
+    :is(.pacem-fieldset-center, .fieldset-center) {
+        grid-area: center;
+        align-content: center;
+    }
+
+    :is(.pacem-fieldset-right, .fieldset-right) {
+        grid-area: right;
+        align-content: flex-end;
+    }
+
+    :is(.pacem-fieldset-auto, .fieldset-auto) {
+        grid-column-start: 1;
+        grid-column-end: 6;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+
+        > * {
+            flex: 1 0 auto;
+        }
+    }
+
+    :--sets {
+        background-color: var(--pacem-color-input-back);
+        border-radius: var(--pacem-border-input-radius);
+
+        :is(.pacem-viewfinder, .pacem-input):not(.pacem-fieldgroup):not(.input-group) {
+            background: none;
+            border-radius: 0;
+        }
+
+        /* (when the input radius is not 0) */
+        > :first-child :is(.pacem-viewfinder, .pacem-input) {
+            border-top-left-radius: var(--pacem-border-input-radius);
+            border-bottom-left-radius: var(--pacem-border-input-radius);
+        }
+
+        > :last-child :is(.pacem-viewfinder, .pacem-input) {
+            border-top-right-radius: var(--pacem-border-input-radius);
+            border-bottom-right-radius: var(--pacem-border-input-radius);
+        }
+    }
+}
+/* #endregion */
+
+/* #region fieldgroup */
+:is(.pacem-fieldgroup, .input-group) {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    justify-content: start;
+    grid-template-areas: "prepend main append";
+
+    > * {
+        min-height: var(--pacem-field-height);
+        grid-area: main;
+
+        &:is(.fieldgroup-prepend, .input-group-prepend, .fieldgroup-append, .input-group-append) {
+            background-color: var(--pacem-color-input-back);
+            color: var(--pacem-color-field-fore);
+            min-width: var(--pacem-border-input-radius);
+
+            .pacem-icon {
+                font-size: var(--pacem-grid-spacing);
+                height: var(--pacem-field-height);
+                line-height: var(--pacem-field-height);
+            }
+
+            pacem-button {
+                line-height: 1;
+                margin: calc(.5 * (var(--pacem-field-height) - var(--pacem-grid-spacing))) calc(var(--pacem-grid-spacing) / 3) 0 0;
+
+                &::before {
+                    display: block;
+                }
+            }
+        }
+
+        &:--prepends {
+            grid-area: prepend;
+            border-top-left-radius: var(--pacem-border-input-radius);
+            border-bottom-left-radius: var(--pacem-border-input-radius);
+        }
+
+        &:--appends {
+            grid-area: append;
+            border-top-right-radius: var(--pacem-border-input-radius);
+            border-bottom-right-radius: var(--pacem-border-input-radius);
+        }
+
+        :is(.pacem-viewfinder, .pacem-input) {
+            border-radius: 0 !important;
+            border-left: none !important;
+            border-right: none !important;
+        }
+
+        .pacem-input {
+            min-height: 0;
+        }
+    }
+
+    .pacem-focus ~ :is(.fieldgroup-prepend, .input-group-prepend, .fieldgroup-append, .input-group-append) {
+        color: var(--pacem-color-input-fore-focus);
+    }
+
+    /* .FormFieldItemBorder() */
+    :--field-underline &:not(.pacem-viewfinder) > :is(.fieldgroup-prepend, .input-group-prepend, .fieldgroup-append, .input-group-append) {
+        border: 0;
+        border-bottom: var(--pacem-border-field-size) solid;
+    }
+
+    :--field-box &:not(.pacem-viewfinder) > :is(.fieldgroup-prepend, .input-group-prepend, .fieldgroup-append, .input-group-append) {
+        border: var(--pacem-border-field-size) solid;
+    }
+
+    &:not(.pacem-viewfinder) {
+        > :is(.fieldgroup-prepend, .input-group-prepend, .fieldgroup-append, .input-group-append) {
+            border-color: rgb(from var(--pacem-color-default) r g b / 20%);
+        }
+
+        > :--prepends {
+            border-right: none;
+        }
+
+        > :--appends {
+            border-left: none;
+        }
+
+        .pacem-focus ~ :is(.fieldgroup-prepend, .input-group-prepend, .fieldgroup-append, .input-group-append) {
+            border-color: rgb(from var(--pacem-color-default) r g b / 40%);
+        }
+    }
+
+    /* no outline on the fields in fieldgroups */
+    > .pacem-focus :is(.pacem-viewfinder, .pacem-input) {
+        box-shadow: none;
+    }
+}
+
+/* reset backgrounds for groups nested in sets */
+:--groups-in-sets :is(.fieldgroup-prepend, .input-group-prepend, .fieldgroup-append, .input-group-append) {
+    background: none;
+}
+
+:--groups-in-sets:not(:first-child):not(.fieldgroup-first) :--prepends {
+    border-radius: 0;
+    border-left: none;
+}
+
+:--groups-in-sets:not(:last-child):not(.fieldgroup-last) :--appends {
+    border-radius: 0;
+    border-right: none;
+}
+
+.pacem-field {
+    > .pacem-input-container.pacem-fieldgroup {
+        justify-content: start;
+        align-items: start;
+
+        /* (the fieldgroup already shows borders: no border replacers) */
+        .pacem-readonly {
+            margin: 0;
+        }
+
+        :is(.fieldgroup-append, .fieldgroup-prepend) {
+            display: flex;
+            flex: 0 0 auto;
+            flex-wrap: nowrap;
+            align-items: center;
+
+            > pacem-button {
+                box-sizing: border-box;
+                height: var(--pacem-field-height);
+                margin: 0;
+                display: block;
+                padding: 0 calc(var(--pacem-grid-spacing) / 3);
+
+                &::before {
+                    font-size: 1.1rem;
+                    line-height: var(--pacem-field-height);
+                    margin: 0;
+                }
+            }
+        }
+
+        .fieldgroup-prepend.pacem-buttonset > pacem-button {
+            &:first-of-type {
+                border-top-left-radius: var(--pacem-border-input-radius);
+                border-bottom-left-radius: var(--pacem-border-input-radius);
+            }
+
+            &:last-of-type {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
+        .fieldgroup-append.pacem-buttonset > pacem-button {
+            &:last-of-type {
+                border-top-right-radius: var(--pacem-border-input-radius);
+                border-bottom-right-radius: var(--pacem-border-input-radius);
+            }
+
+            &:first-of-type {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+    }
+
+    &.pacem-readonly:is(.pacem-invalid, .pacem-valid, .pacem-has-value) > .pacem-input-container.pacem-fieldgroup {
+        > :is(.fieldgroup-append, .fieldgroup-prepend) {
+            border-color: var(--pacem-color-border) !important;
+            border-style: dashed;
+            background: none;
+        }
+
+        > .fieldgroup-prepend {
+            border-right: 0;
+            padding-right: calc(var(--pacem-grid-spacing) / 4);
+        }
+
+        > .fieldgroup-append {
+            border-left: 0;
+            padding-left: calc(var(--pacem-grid-spacing) / 4);
+        }
+
+        :--field-box & .pacem-readonly {
+            border-top: var(--pacem-border-field-size) dashed var(--pacem-color-border);
+            border-bottom: var(--pacem-border-field-size) dashed var(--pacem-color-border);
+        }
+
+        :--field-underline & .pacem-readonly {
+            border-bottom: var(--pacem-border-field-size) dashed var(--pacem-color-border);
+        }
+
+        /* readonly values: inline and ellipsed */
+        .pacem-readonly:not([hidden]) {
+            display: block !important;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .pacem-readonly {
+            background: none;
+
+            /* nested ones */
+            .pacem-readonly {
+                border: 0;
+                background: none;
+                line-height: var(--pacem-field-height);
+            }
+        }
+    }
+}
+
+@media (--pacem-lg) {
+    .pacem-field > .pacem-input-container.pacem-fieldgroup {
+        grid-template-columns: repeat(3, auto);
+    }
+
+    pacem-form-field.field-stretch > .pacem-field > .pacem-input-container.pacem-fieldgroup {
+        grid-template-columns: auto 1fr auto;
+        justify-content: stretch;
+    }
+}
+/* #endregion */
+
+.pacem-body.pacem-animations pacem-form-field > .pacem-field > label.pacem-label {
+    transition: margin .2s var(--pacem-easing-in-out-sine), flex .2s var(--pacem-easing-in-out-sine);
+}

package/src/scaffolding/form.css

@@ -0,0 +1,36 @@
+/* form.less and dialog-overrides.less */
+pacem-form pacem-button[type=submit] {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+
+    > * {
+        grid-column: 2;
+    }
+
+    > .submit-spinner {
+        grid-column: 1;
+    }
+}
+
+pacem-dialog {
+    pacem-input-search {
+        display: block;
+
+        .pacem-input {
+            display: block;
+            width: 100%;
+            box-sizing: border-box;
+        }
+    }
+
+    pacem-contenteditable {
+        .pacem-contenteditable {
+            border-color: rgb(from var(--pacem-color-default) r g b / 10%);
+        }
+
+        &.pacem-focus .pacem-contenteditable {
+            border-color: rgb(from var(--pacem-color-default) r g b / 40%);
+        }
+    }
+}