173 lines
3.7 KiB
SCSS
173 lines
3.7 KiB
SCSS
// Rôle : regroupe les entrées, champs et états de danger partagés des tool-split.
|
|
@use "../../design-system/controls";
|
|
|
|
.tool-split-entry-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.tool-split-entry-list .tool-split-entry-list {
|
|
position: relative;
|
|
margin-top: 6px;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.tool-split-entry-list .tool-split-entry-list::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -3px;
|
|
bottom: 14px;
|
|
left: 7px;
|
|
width: 1px;
|
|
background: linear-gradient(180deg, rgba(246, 196, 83, 0.52), rgba(139, 92, 246, 0.2));
|
|
}
|
|
|
|
.tool-split-entry-list .tool-split-entry-list > li {
|
|
position: relative;
|
|
}
|
|
|
|
.tool-split-entry-list .tool-split-entry-list > li::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 18px;
|
|
left: -15px;
|
|
width: 11px;
|
|
height: 1px;
|
|
background: rgba(246, 196, 83, 0.52);
|
|
}
|
|
|
|
.tool-split-entry {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 34px 34px;
|
|
gap: 7px;
|
|
}
|
|
|
|
.tool-split-entry-list li.is-editing > .tool-split-entry {
|
|
grid-template-columns: auto minmax(0, 1fr) 34px 34px;
|
|
}
|
|
|
|
.tool-split-entry > button {
|
|
min-width: 0;
|
|
min-height: 36px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.tool-split-entry-summary,
|
|
.tool-split-entry-value {
|
|
@include controls.list-row-button;
|
|
display: inline-flex;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
color: var(--color-text-secondary);
|
|
text-align: left;
|
|
}
|
|
|
|
.tool-split-entry-summary {
|
|
width: 100%;
|
|
min-height: 36px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.tool-split-entry-value {
|
|
width: fit-content;
|
|
}
|
|
|
|
.tool-split-entry-value.is-readonly {
|
|
min-height: 36px;
|
|
padding: 0 10px;
|
|
background: rgba(21, 26, 48, 0.38);
|
|
cursor: default;
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.tool-split-entry-summary:hover,
|
|
.tool-split-entry-value:not(.is-readonly):hover {
|
|
@include controls.list-row-button-hover;
|
|
}
|
|
|
|
.tool-split-entry-summary > span {
|
|
overflow: hidden;
|
|
color: var(--color-text-secondary);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tool-split-entry-summary strong,
|
|
.tool-split-entry-value strong {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.tool-split-entry-label {
|
|
@include controls.field-control(sm);
|
|
overflow: hidden;
|
|
background: rgba(21, 26, 48, 0.38);
|
|
color: var(--color-text-secondary);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tool-split-entry-label:hover,
|
|
.tool-split-entry-label:focus {
|
|
@include controls.field-hover;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.mix-tags-input-wrap--small .mix-tags-input {
|
|
display: block;
|
|
height: 34px;
|
|
min-height: 34px;
|
|
padding: 6px 4px 6px 9px;
|
|
white-space: nowrap;
|
|
text-overflow: clip;
|
|
}
|
|
|
|
.mix-tags-input-wrap--small .mix-tags-input-tag {
|
|
top: 0;
|
|
width: 62px;
|
|
min-width: 62px;
|
|
height: 22px;
|
|
}
|
|
|
|
.mix-tags-input-wrap--small {
|
|
height: 36px;
|
|
min-height: 36px;
|
|
max-height: 36px;
|
|
}
|
|
|
|
.mix-tags-input-wrap--small .mix-tags-input-insert-button {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 34px;
|
|
min-width: 34px;
|
|
height: 34px;
|
|
min-height: 34px;
|
|
border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
|
|
}
|
|
|
|
.mix-tags-input-wrap--small .mix-tags-input-insert-button .ui-icon {
|
|
display: block;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value) .ui-icon {
|
|
@include controls.icon-button-icon(sm);
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value) {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-summary,
|
|
.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-value,
|
|
.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-label {
|
|
@include controls.list-row-button-active;
|
|
color: var(--color-text-primary);
|
|
box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.06);
|
|
}
|