diff --git a/packages/craftcms-cp/src/components/input/input.ts b/packages/craftcms-cp/src/components/input/input.ts index 7bafe449ff5..925e4fc50ac 100644 --- a/packages/craftcms-cp/src/components/input/input.ts +++ b/packages/craftcms-cp/src/components/input/input.ts @@ -14,6 +14,8 @@ export default class CraftInput extends LionInput { @property({reflect: true, type: Boolean}) small = false; @property({reflect: true, type: Boolean}) center = false; + @property({reflect: true, type: Boolean}) monospace = false; + override connectedCallback() { super.connectedCallback(); diff --git a/packages/craftcms-cp/src/styles/form.styles.ts b/packages/craftcms-cp/src/styles/form.styles.ts index eeba5d58567..a53d927560e 100644 --- a/packages/craftcms-cp/src/styles/form.styles.ts +++ b/packages/craftcms-cp/src/styles/form.styles.ts @@ -62,6 +62,11 @@ export const baseFieldStyles = css` export const inputStyles = css` ${baseFieldStyles} + :host([monospace]) .input-group__container { + font-family: var(--c-font-mono); + font-size: 0.9em; + } + ::slotted([slot='input']) { font: inherit; padding-block: 0; diff --git a/packages/craftcms-cp/src/styles/shared/tokens.css b/packages/craftcms-cp/src/styles/shared/tokens.css index 8338d1a75dd..f8db68dbb85 100644 --- a/packages/craftcms-cp/src/styles/shared/tokens.css +++ b/packages/craftcms-cp/src/styles/shared/tokens.css @@ -54,6 +54,7 @@ --c-spacing-2xl: calc(var(--c-spacing) * 16); --c-size-touch-target: calc(34rem / 16); + --c-size-touch-target-sm: calc(24rem / 16); --c-size-icon-xs: calc(10rem / 16); --c-size-icon-sm: calc(12rem / 16); diff --git a/packages/craftcms-cp/tailwind.css b/packages/craftcms-cp/tailwind.css index fd95de39987..66436a6c699 100644 --- a/packages/craftcms-cp/tailwind.css +++ b/packages/craftcms-cp/tailwind.css @@ -110,4 +110,20 @@ --color-border-default: var(--c-color-neutral-border-normal); --color-border-strong: var(--c-color-neutral-border-loud); --color-border-form: var(--c-form-control-border-color); + + /* ——— Fill utilities ——— */ + --color-fill-quiet: var( + --c-color-fill-quiet, + var(--c-color-neutral-fill-quiet) + ); + --color-fill-normal: var( + --c-color-fill-normal, + var(--c-color-neutral-fill-normal) + ); + --color-fill-loud: var(--c-color-fill-loud, var(--c-color-neutral-fill-loud)); + + /* ——— Text utilities ——— */ + --color-on-quiet: var(--c-color-on-quiet, var(--c-color-neutral-on-quiet)); + --color-on-normal: var(--c-color-on-normal, var(--c-color-neutral-on-normal)); + --color-on-loud: var(--c-color-on-loud, var(--c-color-neutral-on-loud)); } diff --git a/packages/craftcms-legacy/cp/src/css/_fld.scss b/packages/craftcms-legacy/cp/src/css/_fld.scss deleted file mode 100644 index 28b5b699e06..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_fld.scss +++ /dev/null @@ -1,469 +0,0 @@ -@charset "UTF-8"; -@use 'sass:color'; -@use '@craftcms/sass/mixins'; - -$base: 24px; -$tabPadding: 14px; -$tabWidth: $base * 12; -$gridColor: var(--gray-100); - -@mixin workspace-bg { - background-color: var(--gray-050); - background-image: - linear-gradient(to right, $gridColor 1px, transparent 0), - linear-gradient(to bottom, $gridColor 1px, transparent 1px); - background-size: $base $base; -} - -.layoutdesigner { - container-type: inline-size; -} - -.fld-container { - display: flex; - align-items: stretch; - position: relative; - @include mixins.input-styles; - overflow: hidden; - box-shadow: none; - min-height: 500px; - - .errors > .layoutdesigner > & { - border: 1px solid var(--fg-error) !important; - } - - .fld-workspace { - flex: 1; - max-width: 100%; - border-start-start-radius: calc(var(--radius-sm) - 1px); - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: calc(var(--radius-sm) - 1px); - padding-inline: $base 0; - padding-block: $base; - @include workspace-bg; - background-position: -1px -1px; - box-shadow: inset 0 1px 3px -1px - color.adjust(mixins.$grey200, $lightness: -10%); - - .fld-tabs { - display: flex; - align-items: flex-start; - flex-wrap: wrap; - } - } - - .fld-library { - display: none; - } -} - -.fld-library-hud { - width: $tabWidth - 1; - max-width: 100%; - - .main { - height: 100%; - padding: $tabPadding; - } -} - -.fld-new-tab-btn:active { - background-color: var(--gray-050); -} - -.fld-library { - display: flex; - flex-direction: column; - height: 100%; - - .btngroup { - margin-block-end: $tabPadding; - } - - .fld-field-library, - .fld-ui-library { - margin-block: -3px; - margin-inline: #{-$tabPadding}; - padding-block: 3px; - padding-inline: #{$tabPadding}; - flex: 1; - min-height: 0; - max-height: 550px; - overflow: auto; - } - - .fld-field-library { - .fld-field-group { - margin-block-start: $tabPadding; - - & > *:not(:first-child) { - margin-block-start: var(--s); - } - } - - .fld-field-indicators { - display: none; - } - } - - .fld-ui-library > *:not(:first-child) { - margin-block-start: var(--s); - } - - .filtered { - display: none !important; - } -} - -.layoutdesigner .fld-library, -.fld-tab .tabs .tab, -.fld-tab .fld-tabcontent { - background-color: var(--white); - box-shadow: - 0 0 0 1px color.adjust(mixins.$grey900, $alpha: -0.9), - 0 2px 5px -2px color.adjust(mixins.$grey900, $alpha: -0.8); -} - -.fld-new-tab-btn { - background: var(--white) !important; - box-shadow: - 0 0 0 1px #{color.adjust(mixins.$grey900, $alpha: -0.9)}, - 0 2px 5px -2px #{color.adjust(mixins.$grey900, $alpha: -0.8)}; -} - -.fld-tab .settings::before, -.fld-element .settings::before { - margin-block-start: -2px; - font-size: 16px; - opacity: 0.5; -} - -.fld-tab .settings:hover::before, -.fld-tab .settings.active::before, -.fld-element .settings:hover::before, -.fld-element .settings.active::before { - opacity: 1; -} - -.fld-tab { - width: $tabWidth + $base; - max-width: 100%; - padding-inline: 0 $base + 1; - padding-block: 0 $base; - box-sizing: border-box; - - .tabs { - margin-block: -10px 0; - margin-inline: -12px; - padding-block: 10px 0; - padding-inline: 12px; - overflow: hidden; - display: flex; - - .tab { - display: flex; - align-items: center; - gap: var(--xs); - max-width: calc(100% - 10px); - box-sizing: border-box; - padding-block: 8px; - padding-inline: $tabPadding; - border-radius: var(--radius-md) var(--radius-md) 0 0; - - body:not(.dragging) &.draggable { - cursor: move; - cursor: grab; - } - } - } - - .fld-tab__name { - margin-block: 0; - font-weight: var(--font-weight-regular); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .fld-tabcontent { - padding: $tabPadding; - border-start-start-radius: 0; - border-start-end-radius: var(--radius-md); - border-end-end-radius: var(--radius-md); - border-end-start-radius: var(--radius-md); - - & > .fld-element, - & > .fld-add-btn { - &:not(:first-child) { - margin-block-start: var(--s); - } - } - } - - &.fld-insertion { - .tabs .tab, - .fld-tabcontent { - margin: -2px; - border: 2px dashed var(--border-hairline); - box-shadow: none; - @include workspace-bg; - } - - .tabs .tab { - background-position: -1px -1px; - } - - .fld-tabcontent { - background-position: -1px -13px; - } - } -} - -.fld-tab-caboose { - min-height: 24px; -} - -.fld-element { - position: relative; - display: flex; - align-items: center; - padding: var(--s); - gap: var(--s); - box-shadow: inset 0 0 0 1px var(--border-hairline); - border-radius: var(--radius-md); - background-color: var(--white); - - body:not(.dragging) & { - cursor: move; - cursor: grab; - } - - &.fld-insertion { - box-sizing: border-box; - border: 2px dashed var(--border-hairline); - border-radius: var(--radius-md); - background: none; - box-shadow: none; - } - - &.draghelper { - @include mixins.shadow; - } - - &.fld-field { - color: var(--fg-subtle); - background-color: var(--gray-100); - - &:not(.draghelper, :focus) { - box-shadow: none; - } - - .field-name { - display: flex; - flex-direction: column; - gap: var(--xs); - } - } - - .fld-element-icon { - text-align: center; - - &, - svg { - width: 16px; - height: 16px; - } - - svg { - @include mixins.svg-mask(var(--ui-control-color)); - } - } - - .field-name { - flex: 1; - overflow: hidden; - - .fld-element-label, - .fld-attribute { - flex: 1; - display: flex; - align-items: center; - gap: var(--xs); - } - - .fld-element-label h4, - .fld-attribute .smalltext { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .fld-element-label h4 { - font-weight: normal; - color: var(--text-color); - margin: 0; - } - } -} - -.fld-hr, -.fld-br { - position: relative; - flex: 1; - display: flex; - justify-content: center; - - &::before { - position: absolute; - display: block; - inset-block-start: calc(50% - 2px); - inset-inline-start: 0; - width: 100%; - height: 4px; - content: ''; - font-size: 0; - border-radius: 2px; - } - - .smalltext { - position: relative; - display: flex; - justify-content: center; - align-items: center; - background-color: var(--gray-100); - border-radius: var(--radius-lg); - padding-block: 0; - padding-inline: var(--s); - height: var(--touch-target-size); - } -} - -.fld-hr::before { - background-color: var(--gray-100); -} - -.fld-br::before { - background-image: repeating-linear-gradient( - to right, - var(--gray-100), - var(--gray-100) calc(100% / 19), - transparent calc(100% / 19), - transparent calc(100% / 9.5), - var(--gray-100) calc(100% / 9.5) - ); -} - -.fld-element-settings-body { - flex: 1; - margin-block: -24px 0; - margin-inline: var(--neg-padding); - padding-block: 24px; - padding-inline: var(--padding); - overflow: hidden auto; - position: relative; - - hr { - margin-inline: -24px; - } -} - -.fld-element-settings-footer { - position: relative; - display: flex; - flex-direction: row; - margin-block: 0 -24px; - margin-inline: var(--neg-padding); - padding-block: 5px; - padding-inline: var(--padding); - @include mixins.pane; - background-color: var(--gray-050); - z-index: 3; - - & > .ee-site-select { - flex: 1; - } - - & > .btn { - margin-inline-start: 5px; - } - - & > .spinner { - margin-inline: 0 var(--neg-padding); - margin-block: 0; - } -} - -// thumbnail management -.thumb-management { - margin-block: var(--xl); - - .field:first-child { - margin-inline-end: var(--xl); - } -} - -// card view designer -.card-view-designer { - container: cvd / inline-size; -} - -.cvd-container { - display: grid; - position: relative; - overflow: hidden; - box-shadow: none; - gap: var(--xl); -} - -@container cvd (width > 37.5rem) { - .cvd-container { - grid-template-columns: 1fr 2fr; - } -} - -.cvd-library { - .draggable { - display: flex; - } -} - -.cvd-preview-container { - padding: var(--xl); - border: 1px solid #{color.adjust(mixins.$inputColor, $alpha: -0.75)} !important; - border-radius: var(--radius-sm); - display: grid; - height: 100%; - align-items: center; -} - -.cvd-preview { - &:not(.loading) .spinner { - display: none; - } -} - -.cvd-thumbnail { - --icon-size: 2rem; - --icon-color: var(--gray-300); - width: 100%; - aspect-ratio: 4/3; - display: flex; - justify-content: center; - align-items: center; - background-color: var(--gray-150); - border-radius: var(--radius-md); -} - -.card-placeholder { - display: inline-block; - border: 1px dashed mixins.$grey300; - border-radius: var(--radius-sm); - padding-block: 0.1em; - padding-inline: 0.5em; -} - -.field.cvd-field { - margin-block-start: 0.2em !important; - margin-inline-start: 0.5em; -} diff --git a/packages/craftcms-legacy/cp/src/css/craft.scss b/packages/craftcms-legacy/cp/src/css/craft.scss index ff419da226b..30fb155eeac 100644 --- a/packages/craftcms-legacy/cp/src/css/craft.scss +++ b/packages/craftcms-legacy/cp/src/css/craft.scss @@ -17,7 +17,6 @@ @import 'craft-tooltip'; @import 'preview'; @import 'entry-type-select'; - @import 'fld'; @import 'grouped-entry-type-select'; @import 'image_editor'; @import 'shame'; diff --git a/packages/craftcms-legacy/cp/src/js/FieldLayoutDesigner.js b/packages/craftcms-legacy/cp/src/js/FieldLayoutDesigner.js index cc9a7f4f81e..7f13ae4aa25 100644 --- a/packages/craftcms-legacy/cp/src/js/FieldLayoutDesigner.js +++ b/packages/craftcms-legacy/cp/src/js/FieldLayoutDesigner.js @@ -46,7 +46,7 @@ Craft.FieldLayoutDesigner = Garnish.Base.extend( this.$innerContainer = this.$container.children('.fld-container'); const $workspace = this.$innerContainer.children('.fld-workspace'); this.$tabContainer = $workspace.children('.fld-tabs'); - this.$newTabBtn = $workspace.children('.fld-new-tab-btn'); + this.$newTabBtn = $workspace.find('[command="--add-tab"]'); this.$libraryContainer = this.$innerContainer.children('.fld-library'); this.$fieldLibrary = this.$selectedLibrary = @@ -245,9 +245,16 @@ Craft.FieldLayoutDesigner = Garnish.Base.extend(
+ {{ + t('Define the field layout for {type} of this type.', { + type: lowerTypeName, + }) + }} +
+ + + +