mirror of
https://github.com/hcengineering/platform.git
synced 2026-09-27 03:54:57 +02:00
63e28dc964
* feat(tracker): Gantt chart for the issue tracker Builds on the merged search/filter rework (#10998). Introduces @hcengineering/gantt, a dependency-free scheduling/zoom/drag/viewport engine package (with a neutral GanttDependency contract), and wires the tracker-specific adapter, Svelte UI, model schema, dependency-shift notifications and sanity coverage in tracker-resources. Signed-off-by: Michael Uray <michaeluray@users.noreply.github.com> * fix(tracker): source Gantt holidays from HR and scope confirm-gate per view Follow-up to review feedback on #10992: - Confirm-gate: the module-global flag is replaced by a createConfirmGate() factory - one instance per mounted GanttView, so two Gantt views mounted at once in the same JS context no longer block each other's pointer input. A two-instance independence test guards the regression. - Sidebar sorting: the stale deadline cast is dropped and issue.deadline is read directly (the field was added to the Issue model in this PR). - HR holidays: the per-project WorkingDaysConfig.holidays field duplicated the workspace-wide hr.class.PublicHoliday concept and could drift from the real HR calendar. It is removed. WorkingDaysConfig now carries only the weekday mask and an optional holidayDepartment. The tracker adapter resolves holidays for the selected department plus all ancestors up to hr.ids.Head, matching HR's existing inheritance semantics (hr-resources ScheduleView). A missing or invalid reference falls back to company-wide (root) holidays; unrelated departments are never included. The ancestor walk is cycle/missing-parent safe. A small WorkingDaysEditor in the existing project create/edit dialog lets users with the existing project permission enable the mode, choose weekdays, and select an HR department (default: Company-wide). It persists through the existing project create/update transaction paths (createDoc on create, client.update on edit) and uses $unset when the mode is disabled. At least one working day must stay active. Calendar loading is explicit via a CalendarStateMachine: project-scoped drag, resize, cascade, keyboard-shift and auto-schedule mutations stay disabled until both the project config and the holiday data have loaded. A monotonic generation ticket (bumped synchronously on project switch) is re-checked immediately before every calendar-dependent date commit, so work started in one project can never persist after a switch to another. The all-projects view has no single project calendar, so calendar-dependent edits are read-only there; display, selection, the context menu and the manual date-picker (which does no calendar arithmetic and takes no mutation ticket) stay available. This depends on the lightweight @hcengineering/hr model package, but not on hr-resources; the tracker adapter uses hr.class.* and hr.ids.Head at runtime, and actual HR model presence is checked through the hierarchy - without the HR model, holidays resolve to an empty set. The @hcengineering/gantt engine package stays domain-neutral (no @hcengineering imports, no runtime deps). Signed-off-by: Michael Uray <michaeluray@users.noreply.github.com> * fix(gantt): measure FS gap-preservation floor in working days The finish-to-start gap-preservation floor in the cascade scheduler mixed two time measures: the FS snap anchor is working-calendar aware, but the floor added a raw calendar-millisecond start-side delta. With an active working calendar the two diverge, so dragging a predecessor over a weekend over-shifted the successor across non-working days (a Fri->Mon body drag is 3 calendar days but only 1 working day, and could even land a successor on a Saturday). Measure the floor on the DUE side in working days instead: translate the predecessor's shift via the new workingDayDelta helper and advance the floor base with addWorkingDays over the calendar. A day-granular resize gate (utcMidnight comparison, not a raw === 0 test) arms the floor only on a start-DAY move, so a pure due-resize stays a pure snap even when the stored issue carries a time-of-day on the cascade-commit path. The floor base is normalized via utcMidnight(targetAnchor). The legacy path (cfg === undefined) stays byte-identical to today's raw-ms floor. A left-resize in working-days mode now correctly no-ops the floor (the due, and thus the FS gap, did not move) instead of shifting on the raw start delta. Engine: add workingDayDelta (signed, half-open from-exclusive/to-inclusive working-day step count) and export the previously-private utcMidnight from packages/gantt/src/working-days.ts. The engine stays domain-neutral (no @hcengineering imports, empty dependencies). Adds engine and adapter test coverage: workingDayDelta cases and the full FS floor matrix (right-resize no-push, weekend-spanner body drag, floor wins over snap, holiday in the floor path, floor-dominant multi-hop chain, negative delta, legacy no-cfg, SS pure-snap, raw time-of-day right-resize, direct left-resize). Signed-off-by: Michael Uray <michaeluray@users.noreply.github.com> --------- Signed-off-by: Michael Uray <michaeluray@users.noreply.github.com> Co-authored-by: Michael Uray <michaeluray@users.noreply.github.com>
2600 lines
61 KiB
SCSS
2600 lines
61 KiB
SCSS
//
|
|
// Copyright © 2021 Anticrm Platform Contributors.
|
|
//
|
|
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License. You may
|
|
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
//
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
//
|
|
|
|
/* Huly Component */
|
|
.hulyComponent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
|
|
border-radius: var(--small-focus-BorderRadius);
|
|
container-type: inline-size;
|
|
|
|
&:not(.modal) {
|
|
background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor);
|
|
}
|
|
&.modal {
|
|
overflow: hidden;
|
|
background-color: var(--theme-comp-header-color); // var(--global-surface-02-BackgroundColor);
|
|
}
|
|
&.beforeAside {
|
|
border-right: none;
|
|
border-radius: var(--small-focus-BorderRadius) 0 0 var(--small-focus-BorderRadius);
|
|
}
|
|
&.aside {
|
|
border-left: none;
|
|
border-radius: 0 var(--small-focus-BorderRadius) var(--small-focus-BorderRadius) 0;
|
|
}
|
|
}
|
|
.hulyComponent-content,
|
|
.hulyComponent-content__container,
|
|
.hulyComponent-content__column,
|
|
.hulyComponent-content__column-group,
|
|
.hulyComponent-content__header,
|
|
.hulyComponent-content__navHeader {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
.hulyComponent-content {
|
|
&:not(.noShrink) {
|
|
flex-shrink: 0;
|
|
}
|
|
&:not(.withoutMaxWidth) {
|
|
max-width: 64rem;
|
|
}
|
|
&.gap {
|
|
gap: var(--spacing-4);
|
|
}
|
|
&__container {
|
|
justify-content: stretch;
|
|
height: 100%;
|
|
}
|
|
&__container:not(.columns),
|
|
&:not(.columns) {
|
|
flex-direction: column;
|
|
}
|
|
&__column {
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
&.navigation .hulyNavItem-container,
|
|
.hulyNavItem-container {
|
|
margin: 0 0.75rem;
|
|
}
|
|
&.content {
|
|
align-items: stretch;
|
|
}
|
|
&-group {
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
height: fit-content;
|
|
}
|
|
}
|
|
&__navHeader {
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
|
|
&.divide {
|
|
border-bottom: 1px solid var(--theme-navpanel-divider);
|
|
}
|
|
&-menu {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
padding: var(--spacing-2);
|
|
width: var(--global-extra-large-Size);
|
|
height: var(--global-extra-large-Size);
|
|
}
|
|
&-hint {
|
|
margin: var(--spacing-0_25) var(--spacing-3) var(--spacing-3) var(--spacing-2);
|
|
}
|
|
}
|
|
&__header {
|
|
justify-content: space-between;
|
|
align-self: stretch;
|
|
padding: 0 0 var(--spacing-1) var(--spacing-1_5);
|
|
}
|
|
textarea {
|
|
font-weight: 400 !important;
|
|
color: var(--global-tertiary-TextColor) !important;
|
|
}
|
|
}
|
|
|
|
/* Avatar */
|
|
.hulyAvatar-container {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
flex-shrink: 0;
|
|
aspect-ratio: 1;
|
|
background-color: var(--theme-button-default);
|
|
// pointer-events: none;
|
|
|
|
&.withStatus {
|
|
mask-repeat: no-repeat;
|
|
mask-size: cover;
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10,13.5c0-1.9,1.6-3.5,3.5-3.5c1,0,1.9,0.4,2.5,1.1V0H0v16h11.1C10.4,15.4,10,14.5,10,13.5z' /%3E%3C/svg%3E");
|
|
&.hulyAvatarSize-large {
|
|
mask-image:
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='57' cy='57' r='9' /%3E%3C/svg%3E"),
|
|
linear-gradient(#000 0 0);
|
|
mask-composite: exclude;
|
|
}
|
|
}
|
|
|
|
&.circle,
|
|
&.circle img.ava-image { border-radius: 50%; }
|
|
&.roundedRect,
|
|
&.roundedRect img.ava-image { border-radius: 20%; }
|
|
|
|
&.no-img {
|
|
color: var(--primary-button-color);
|
|
border-color: transparent;
|
|
}
|
|
&.bordered {
|
|
color: var(--theme-dark-color);
|
|
border: 1px solid var(--theme-button-border);
|
|
}
|
|
&.border {
|
|
border: 1px solid var(--theme-bg-color);
|
|
outline: 2px solid var(--border-color);
|
|
|
|
& > img { border: 1px solid var(--theme-bg-color); }
|
|
&.hulyAvatarSize-xx-small,
|
|
&.hulyAvatarSize-inline,
|
|
&.hulyAvatarSize-tiny,
|
|
&.hulyAvatarSize-card,
|
|
&.hulyAvatarSize-x-small { outline-width: 1px; }
|
|
&.hulyAvatarSize-large,
|
|
&.hulyAvatarSize-x-large,
|
|
&.hulyAvatarSize-2x-large {
|
|
border-width: 2px;
|
|
& > img { border-width: 2px; }
|
|
}
|
|
}
|
|
img {
|
|
object-fit: cover;
|
|
&.disabled {
|
|
filter: grayscale(100%);
|
|
}
|
|
}
|
|
.icon,
|
|
.ava-text::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
.icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: inherit;
|
|
transform-origin: center;
|
|
transform: translate(-50%, -50%) scale(.6);
|
|
}
|
|
.ava-text {
|
|
font-weight: 500;
|
|
letter-spacing: -.05em;
|
|
|
|
&::after {
|
|
content: attr(data-name);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
& > * {
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
}
|
|
|
|
/* Avatar sizes */
|
|
.hulyAvatarSize-xx-small {
|
|
width: .75rem; // 12 - 10
|
|
.small-font & { width: 10px; }
|
|
|
|
.ava-text { font-size: .375rem; }
|
|
}
|
|
.hulyAvatarSize-inline {
|
|
width: .875rem; // 14 - 12
|
|
.small-font & { width: 12px; }
|
|
|
|
.ava-text { font-size: .525rem; }
|
|
}
|
|
.hulyAvatarSize-tiny {
|
|
width: 1.125rem; // 18 - 16
|
|
.small-font & { width: 16px; }
|
|
|
|
.ava-text { font-size: .625rem; }
|
|
}
|
|
.hulyAvatarSize-card {
|
|
width: 1.25rem; // 20 - 18
|
|
.small-font & { width: 18px; }
|
|
|
|
.ava-text { font-size: .75rem; }
|
|
}
|
|
.hulyAvatarSize-x-small {
|
|
width: 1.5rem; // 24 - 22
|
|
.small-font & { width: 22px; }
|
|
|
|
.ava-text { font-size: .875rem; }
|
|
}
|
|
.hulyAvatarSize-smaller {
|
|
width: 1.75rem; // 28 - 25
|
|
.small-font & { width: 25px; }
|
|
|
|
.ava-text { font-size: 1rem; }
|
|
}
|
|
.hulyAvatarSize-small {
|
|
width: 2rem; // 32 - 28
|
|
|
|
.ava-text { font-size: 1.125rem; }
|
|
}
|
|
.hulyAvatarSize-medium {
|
|
width: 2.5rem; // 40 - 35
|
|
|
|
.ava-text { font-size: 1.375rem; }
|
|
}
|
|
.hulyAvatarSize-large {
|
|
width: 4.5rem; // 72 - 63
|
|
|
|
.ava-text { font-size: 2.75rem; }
|
|
|
|
&.modern {
|
|
width: 4rem; // 64 - 56
|
|
.ava-text { font-size: 2.5rem; }
|
|
}
|
|
}
|
|
.hulyAvatarSize-x-large {
|
|
width: 7.5rem; // 120 - 105
|
|
|
|
.ava-text { font-size: 4.5rem; }
|
|
}
|
|
.hulyAvatarSize-2x-large {
|
|
width: 10rem; // 160 - 140
|
|
|
|
.ava-text { font-size: 6rem; }
|
|
}
|
|
.hulyAvatarSize-full {
|
|
width: 100%;
|
|
|
|
.ava-text { font-size: inherit; }
|
|
}
|
|
|
|
/* Avatar status marker */
|
|
.hulyAvatar-statusMarker {
|
|
position: absolute;
|
|
right: -4%;
|
|
bottom: -4%;
|
|
width: 39%;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
|
|
&.relative {
|
|
position: relative;
|
|
}
|
|
&.xx-small,
|
|
&.inline,
|
|
&.tiny,
|
|
&.card,
|
|
&.x-small,
|
|
&.smaller,
|
|
&.small,
|
|
&.medium {
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.small-font &.xx-small { width: 3px; }
|
|
&.xx-small,
|
|
&.inline,
|
|
.small-font &.inline { width: 4px; }
|
|
.small-font &.tiny { width: 5px; }
|
|
&.tiny,
|
|
&.card,
|
|
.small-font &.card { width: 6px; }
|
|
.small-font &.x-small { width: 7px; }
|
|
&.x-small,
|
|
.small-font &.smaller { width: 8px; }
|
|
&.smaller,
|
|
.small-font &.small { width: 9px; }
|
|
&.small { width: 10px; }
|
|
&:not(.small-font) {
|
|
&.medium {
|
|
width: 13px;
|
|
}
|
|
}
|
|
.small-font &.medium {
|
|
width: 11px;
|
|
&.modern {
|
|
width: 12px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
}
|
|
}
|
|
&.large {
|
|
right: -.125rem;
|
|
bottom: -.125rem;
|
|
width: 36.5%;
|
|
|
|
.small-font & {
|
|
right: -2px;
|
|
bottom: -2px;
|
|
width: 37%;
|
|
}
|
|
}
|
|
&.online {
|
|
background-color: var(--global-online-color);
|
|
}
|
|
&.offline {
|
|
border: 1px solid var(--global-offline-color);
|
|
|
|
&:not(.xx-small, .inline, .tiny, .card, .x-small, .smaller, .small, .medium) { border-width: 2px; }
|
|
}
|
|
}
|
|
|
|
/* CombineAvatars */
|
|
.hulyCombineAvatars-container {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.hulyCombineAvatar {
|
|
&.inline:not(:first-child) { margin-left: calc(1px - (0.875rem / 2)); }
|
|
&.tiny:not(:first-child) { margin-left: calc(1px - (1.13rem / 2)); }
|
|
&.card:not(:first-child) { margin-left: calc(1px - (1.25rem / 2)); }
|
|
&.x-small:not(:first-child) { margin-left: calc(1px - (1.5rem / 2)); }
|
|
&.smaller:not(:first-child) { margin-left: calc(1px - (1.75rem / 2)); }
|
|
&.small:not(:first-child) { margin-left: calc(1px - 1rem); }
|
|
&.medium:not(:first-child) { margin-left: calc(1px - (2.25rem / 2)); }
|
|
&.large:not(:first-child) { margin-left: calc(1px - (4.5rem / 2)); }
|
|
&.x-large:not(:first-child) { margin-left: calc(1px - (7.5rem / 2)); }
|
|
|
|
&.inline,
|
|
&.tiny,
|
|
&.card,
|
|
&.x-small { font-size: 0.625rem; }
|
|
|
|
&.inline,
|
|
&.tiny,
|
|
&.card,
|
|
&.x-small,
|
|
&.smaller,
|
|
&.small {
|
|
&:not(:last-child) {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16,24.5v-17c0-3.2,1.8-6.1,4.5-7.5H8C3.6,0,0,3.6,0,8v16c0,4.4,3.6,8,8,8h12.5C17.8,30.6,16,27.7,16,24.5z'/%3E%3C/svg%3E%0A") no-repeat;
|
|
}
|
|
}
|
|
|
|
&[data-over^='+']:last-child {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: attr(data-over);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
color: var(--theme-caption-color);
|
|
transform: translate(-53%, -52%);
|
|
z-index: 2;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--theme-bg-color);
|
|
border: 1px solid var(--theme-divider-color);
|
|
border-radius: 0.25rem;
|
|
opacity: 0.9;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Header */
|
|
.hulyHeader-container {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 var(--spacing-2);
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: var(--spacing-6_5);
|
|
overflow: hidden;
|
|
|
|
&.clearPadding > .hulyHeader-row {
|
|
padding: 0;
|
|
min-height: var(--spacing-6_5);
|
|
}
|
|
&:not(.hideSeparator) {
|
|
border-bottom: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
|
|
}
|
|
&.topIndent { margin-top: 1px; }
|
|
.hulyHeader-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
padding: var(--spacing-1_5) 0;
|
|
min-width: 0;
|
|
|
|
&:has(.extra.overflow) { padding: 0; }
|
|
&:not(.noBorder):first-child {
|
|
max-height: var(--spacing-6_5);
|
|
border-bottom: 1px solid var(--theme-divider-color);
|
|
}
|
|
&:nth-child(2) { margin-top: -1px; }
|
|
&.between { justify-content: space-between; }
|
|
&.reverse { flex-direction: row-reverse; }
|
|
&__divider {
|
|
margin-top: -1px;
|
|
width: 100%;
|
|
min-height: 1px;
|
|
max-height: 1px;
|
|
background-color: var(--theme-divider-color);
|
|
}
|
|
}
|
|
.hulyHeader-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
padding: 0;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
color: var(--button-disabled-IconColor);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: var(--button-subtle-LabelColor);
|
|
}
|
|
}
|
|
.hulyHeader-divider {
|
|
flex-shrink: 0;
|
|
margin: 0 var(--spacing-2);
|
|
width: 1px;
|
|
height: var(--spacing-4);
|
|
background-color: var(--theme-divider-color); // var(--global-surface-02-BorderColor);
|
|
|
|
&.no-line {
|
|
width: 0;
|
|
background-color: transparent;
|
|
}
|
|
&.short {
|
|
margin: 0 var(--spacing-1);
|
|
|
|
&.no-line { margin: 0 var(--spacing-0_125); }
|
|
}
|
|
}
|
|
.hulyHeader-titleGroup,
|
|
.hulyHeader-buttonsGroup {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
.hulyHeader-titleGroup {
|
|
user-select: text;
|
|
cursor: auto;
|
|
|
|
&.withDescription { flex-direction: column; }
|
|
&:not(.withDescription) {
|
|
align-items: center;
|
|
gap: var(--spacing-0_5);
|
|
}
|
|
&:not(.notGrow) { flex-grow: 1; }
|
|
}
|
|
.hulyHeader-buttonsGroup {
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
|
|
&.extra {
|
|
flex-shrink: 1;
|
|
margin-left: var(--spacing-2);
|
|
|
|
&.overflow {
|
|
overflow-x: auto;
|
|
margin: 0 -.25rem 0 1rem;
|
|
padding: .25rem;
|
|
}
|
|
/* Paired with `.search.shrink` below: when the consumer designates the
|
|
search group as the row's shrink target, the extra group must keep
|
|
its natural width — otherwise both groups shrink proportionally and
|
|
the trailing buttons get clipped anyway. */
|
|
&.freeze { flex-shrink: 0; }
|
|
}
|
|
&.before {
|
|
gap: var(--spacing-0_5);
|
|
|
|
&.freezeBefore { min-width: var(--global-small-Size); }
|
|
}
|
|
&:not(.before) { gap: var(--spacing-1); }
|
|
&__label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
flex-shrink: 0;
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
}
|
|
.hulyHeader-spaceFiller { flex: 1 1; }
|
|
.hulyHotKey-item { margin-right: .625rem; }
|
|
|
|
&.doubleRow {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
flex-shrink: 0;
|
|
padding: 0 var(--spacing-2);
|
|
|
|
.hulyHeader-row { min-height: var(--spacing-6_5); }
|
|
.hulyHeader-buttonsGroup.search { flex-direction: row-reverse; }
|
|
/* Opt-in via <Header shrinkSearch>. `flex: 1 1 0` makes the group's used
|
|
width a pure function of the row width minus the frozen siblings, i.e.
|
|
independent of its own content — which is what lets a consumer measure
|
|
the space it got and collapse its controls without a feedback loop.
|
|
`justify-content: flex-end` is "pack towards main-end", and main-end in
|
|
this row-reverse group is the LEFT edge, so the content keeps sitting
|
|
where it did before instead of drifting to the right. */
|
|
.hulyHeader-buttonsGroup.search.shrink {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
justify-content: flex-end;
|
|
overflow: hidden;
|
|
}
|
|
.hulyHeader-buttonsGroup.actions { margin-left: 1rem; }
|
|
}
|
|
&:not(.doubleRow) {
|
|
.hulyHeader-buttonsGroup:not(.before) { margin-left: 1rem; }
|
|
.hulyHeader-buttonsGroup.search + .hulyHeader-divider + .hulyHeader-buttonsGroup.actions { margin-left: 0; }
|
|
}
|
|
}
|
|
|
|
/* Modal */
|
|
.hulyModal-container,
|
|
.hulyModal-container .hulyModal-content,
|
|
.hulyModal-container .hulyModal-content__titleGroup,
|
|
.hulyModal-container .hulyModal-content__settingsSet,
|
|
.hulyModal-container .hulyModal-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
.hulyModal-container {
|
|
height: 100%;
|
|
visibility: visible;
|
|
|
|
&:not(.noTopIndent) { border-top: 1px solid transparent; }
|
|
&.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.hulyModal-content {
|
|
height: 100%;
|
|
|
|
&__titleGroup {
|
|
flex-shrink: 0;
|
|
padding: var(--spacing-2) var(--spacing-0_5) 0;
|
|
|
|
.hulyChip-item {
|
|
margin: 0 0 var(--spacing-0_75) var(--spacing-1_5);
|
|
}
|
|
}
|
|
&__settingsSet {
|
|
flex-shrink: 0;
|
|
|
|
&:not(.table) {
|
|
padding: var(--spacing-4) var(--spacing-2_5) 0;
|
|
}
|
|
&.table {
|
|
padding: var(--spacing-4) var(--spacing-1_5) 0;
|
|
}
|
|
&-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
padding: var(--spacing-1_5) 0;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: var(--global-max-Size);
|
|
border-bottom: 1px solid var(--global-subtle-ui-BorderColor);
|
|
|
|
&:first-child {
|
|
border-top: 1px solid var(--global-subtle-ui-BorderColor);
|
|
}
|
|
.label {
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
font-size: .75rem;
|
|
font-style: normal;
|
|
line-height: 1rem;
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hulyModal-footer {
|
|
flex-direction: row-reverse;
|
|
flex-shrink: 0;
|
|
gap: var(--spacing-1);
|
|
border-top: 1px solid var(--theme-divider-color); // var(--global-surface-01-BorderColor);
|
|
}
|
|
|
|
&.type-aside {
|
|
.hulyHeader-container {
|
|
border-radius: 0 var(--small-focus-BorderRadius) 0 0;
|
|
|
|
.hulyHeader-buttonsGroup {
|
|
gap: var(--spacing-0_5);
|
|
}
|
|
}
|
|
.hulyModal-footer {
|
|
padding: var(--spacing-2) var(--spacing-2_5);
|
|
}
|
|
}
|
|
&.type-popup {
|
|
min-width: 45rem;
|
|
background-color: var(--theme-popup-color); // var(--global-surface-02-BackgroundColor);
|
|
border: 1px solid var(--theme-popup-divider); // var(--global-surface-02-BorderColor);
|
|
border-radius: var(--large-BorderRadius);
|
|
box-shadow: var(--global-modal-ShadowX) var(--global-modal-ShadowY) var(--global-modal-ShadowBlur) var(--global-modal-ShadowSpread) var(--global-popover-ShadowColor);
|
|
|
|
&.large {
|
|
min-width: unset;
|
|
width: 45rem;
|
|
}
|
|
&.medium {
|
|
min-width: unset;
|
|
width: 37.5rem;
|
|
}
|
|
&.small {
|
|
min-width: unset;
|
|
width: 30rem;
|
|
}
|
|
&.x-small {
|
|
min-width: unset;
|
|
width: 25rem;
|
|
}
|
|
&.menu {
|
|
min-width: unset;
|
|
width: 17.5rem;
|
|
}
|
|
&.full {
|
|
min-width: unset;
|
|
width: max-content;
|
|
}
|
|
|
|
.hulyModal-footer {
|
|
padding: var(--spacing-1_5);
|
|
align-items: center;
|
|
}
|
|
@media screen and (max-width: 480px) {
|
|
width: 100vw;
|
|
height: var(--app-height);
|
|
min-width: 20rem;
|
|
}
|
|
}
|
|
&.type-aside,
|
|
&.type-popup {
|
|
.hulyHeader-container .hulyHeader-titleGroup {
|
|
text-transform: uppercase;
|
|
font-family: var(--font-family);
|
|
font-weight: 500;
|
|
font-size: .75rem;
|
|
font-style: normal;
|
|
line-height: 1rem;
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
}
|
|
&.type-component {
|
|
background-color: var(--theme-comp-header-color); // var(--global-surface-02-BackgroundColor);
|
|
border: 1px solid var(--theme-navpanel-divider); // var(--global-surface-02-BorderColor);
|
|
border-radius: var(--small-focus-BorderRadius);
|
|
}
|
|
textarea {
|
|
font-weight: 400 !important;
|
|
color: var(--global-tertiary-TextColor) !important;
|
|
}
|
|
}
|
|
|
|
/* Accordion */
|
|
.hulyAccordionItem-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
|
|
&:not(.second, .default, .no-border),
|
|
&.border {
|
|
border-top: 1px solid var(--theme-navpanel-divider);
|
|
}
|
|
&.second:not(.isOpen),
|
|
&.border,
|
|
&.default:not(.nested) {
|
|
border-bottom: 1px solid var(--theme-navpanel-divider); // var(--global-surface-01-BorderColor);
|
|
}
|
|
&.default.nested:not(:last-child) {
|
|
border-bottom: 1px dashed var(--theme-navpanel-divider);
|
|
}
|
|
.hulyAccordionItem-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
border: none;
|
|
outline: none;
|
|
|
|
&.disabled {
|
|
cursor: default;
|
|
}
|
|
&__label-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-0_75);
|
|
min-width: 0;
|
|
}
|
|
&__chevron,
|
|
&__icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
&__chevron {
|
|
width: var(--global-extra-small-Size);
|
|
height: var(--global-extra-small-Size);
|
|
color: var(--global-disabled-TextColor);
|
|
border-radius: var(--extra-small-BorderRadius);
|
|
|
|
& > * {
|
|
transform-origin: center;
|
|
transform: rotate(0deg);
|
|
transition: transform 0.1s ease-in-out;
|
|
}
|
|
}
|
|
&__icon {
|
|
color: var(--global-primary-TextColor);
|
|
background-color: var(--global-ui-BackgroundColor);
|
|
border: 1px solid var(--global-subtle-ui-BorderColor);
|
|
}
|
|
&__label {
|
|
white-space: nowrap;
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
&__tools {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
gap: var(--spacing-0_5);
|
|
min-width: 0;
|
|
max-width: 50%;
|
|
}
|
|
&__separator,
|
|
&__counter,
|
|
&__duration {
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
color: var(--global-tertiary-TextColor);
|
|
}
|
|
&__duration {
|
|
font-weight: 400;
|
|
}
|
|
|
|
&.categoryHeader {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
&.selectable.large {
|
|
.hulyAccordionItem-header__label-wrapper {
|
|
gap: var(--spacing-0_25);
|
|
}
|
|
.hulyAccordionItem-header__label {
|
|
padding: var(--spacing-0_5) var(--spacing-1);
|
|
border-radius: var(--extra-small-BorderRadius);
|
|
}
|
|
&.selected .hulyAccordionItem-header__label,
|
|
.hulyAccordionItem-header__label:hover {
|
|
background-color: var(--global-ui-hover-BackgroundColor);
|
|
}
|
|
}
|
|
|
|
&.small .hulyAccordionItem-header__chevron {
|
|
margin: 0 0.125rem;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border: 1px solid transparent;
|
|
}
|
|
&.medium .hulyAccordionItem-header__chevron {
|
|
margin-right: var(--spacing-0_75);
|
|
background-color: var(--global-ui-BackgroundColor);
|
|
border: 1px solid var(--global-subtle-ui-BorderColor);
|
|
}
|
|
&.small,
|
|
&.medium {
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
min-height: var(--global-medium-Size);
|
|
|
|
.hulyAccordionItem-header__label-wrapper {
|
|
padding: var(--spacing-0_25) var(--spacing-0_5);
|
|
color: var(--global-tertiary-TextColor);
|
|
border-radius: var(--extra-small-BorderRadius);
|
|
}
|
|
.hulyAccordionItem-header__label {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&:hover {
|
|
.hulyAccordionItem-header__label {
|
|
color: var(--global-primary-TextColor);
|
|
}
|
|
}
|
|
|
|
&:active,
|
|
&.default.isOpen,
|
|
&.selected {
|
|
&:hover {
|
|
.hulyAccordionItem-header__label-wrapper {
|
|
background-color: var(--global-ui-hover-BackgroundColor);
|
|
}
|
|
.hulyAccordionItem-header__label {
|
|
color: var(--global-primary-TextColor);
|
|
}
|
|
}
|
|
.hulyAccordionItem-header__label-wrapper {
|
|
background-color: var(--global-ui-BackgroundColor);
|
|
}
|
|
.hulyAccordionItem-header__label,
|
|
.hulyAccordionItem-header__counter,
|
|
.hulyAccordionItem-header__duration {
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
}
|
|
&:hover {
|
|
.hulyAccordionItem-header__label-wrapper {
|
|
background-color: var(--global-ui-hover-BackgroundColor);
|
|
}
|
|
.hulyAccordionItem-header__counter {
|
|
color: var(--global-primary-TextColor);
|
|
}
|
|
.hulyAccordionItem-header__duration {
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
}
|
|
}
|
|
&.medium {
|
|
padding: var(--spacing-1_5) var(--spacing-2);
|
|
min-height: var(--global-medium-Size);
|
|
|
|
.hulyAccordionItem-header__label-wrapper {
|
|
&.withIcon {
|
|
padding: 0 var(--spacing-1) 0 0;
|
|
}
|
|
&:not(.withIcon) {
|
|
padding: var(--spacing-0_5) var(--spacing-1);
|
|
}
|
|
}
|
|
&.nested {
|
|
padding-left: var(--spacing-2);
|
|
|
|
& + .hulyAccordionItem-content {
|
|
margin-left: var(--spacing-2);
|
|
margin-right: var(--spacing-2);
|
|
}
|
|
}
|
|
.hulyAccordionItem-header__icon {
|
|
margin-right: var(--spacing-0_5);
|
|
width: var(--global-extra-small-Size);
|
|
height: var(--global-extra-small-Size);
|
|
border-radius: var(--extra-small-BorderRadius);
|
|
}
|
|
}
|
|
&.large {
|
|
padding: var(--spacing-2) var(--spacing-1_5) var(--spacing-2) var(--spacing-2);
|
|
min-height: var(--global-extra-large-Size);
|
|
|
|
.hulyAccordionItem-header__label-wrapper {
|
|
gap: var(--spacing-1);
|
|
color: var(--global-tertiary-TextColor);
|
|
}
|
|
.hulyAccordionItem-header__icon {
|
|
width: var(--global-small-Size);
|
|
height: var(--global-small-Size);
|
|
border-radius: var(--small-BorderRadius);
|
|
}
|
|
.hulyAccordionItem-header__label {
|
|
margin-left: var(--spacing-0_5);
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
.hulyAccordionItem-header__counter {
|
|
font-weight: 400;
|
|
}
|
|
|
|
&:active,
|
|
&:hover,
|
|
&.default.isOpen,
|
|
&.selected {
|
|
.hulyAccordionItem-header__label {
|
|
color: var(--global-primary-TextColor);
|
|
}
|
|
.hulyAccordionItem-header__counter,
|
|
.hulyAccordionItem-header__duration {
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
}
|
|
}
|
|
&.hiddenHeader {
|
|
display: none;
|
|
visibility: hidden;
|
|
|
|
&.nested + .hulyAccordionItem-content { padding-top: var(--spacing-1); }
|
|
}
|
|
&:hover .hulyAccordionItem-header__chevron {
|
|
color: var(--button-subtle-IconColor);
|
|
background-color: var(--global-ui-hover-BackgroundColor);
|
|
}
|
|
|
|
&.isOpen {
|
|
& + .hulyAccordionItem-content {
|
|
max-height: 100%;
|
|
}
|
|
&.small.bottomSpace + .hulyAccordionItem-content,
|
|
&.small.nav + .hulyAccordionItem-content {
|
|
padding-bottom: var(--spacing-1_5);
|
|
}
|
|
&.medium.bottomSpace + .hulyAccordionItem-content {
|
|
padding-bottom: var(--spacing-2);
|
|
}
|
|
&.medium.nested.bottomSpace + .hulyAccordionItem-content {
|
|
padding-bottom: var(--spacing-1);
|
|
}
|
|
&.large.bottomSpace + .hulyAccordionItem-content {
|
|
padding-bottom: var(--spacing-2);
|
|
}
|
|
&:is(.small, .large) .hulyAccordionItem-header__chevron > * {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
.hulyAccordionItem-content {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
min-width: 0;
|
|
max-height: 0;
|
|
}
|
|
}
|
|
|
|
.hulyToDoLine-draggable {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
&.is-dragging-over-up::before {
|
|
position: absolute;
|
|
content: '';
|
|
inset: 0;
|
|
border-top: 1px solid var(--global-focus-BorderColor);
|
|
}
|
|
&.is-dragging-over-down::before {
|
|
position: absolute;
|
|
content: '';
|
|
inset: 0;
|
|
border-bottom: 1px solid var(--global-focus-BorderColor);
|
|
}
|
|
&.dragging > * {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
|
|
/* ToDo Line */
|
|
.hulyToDoLine-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
margin: 0;
|
|
padding: var(--spacing-0_75) var(--spacing-1) var(--spacing-0_75) var(--spacing-0_75);
|
|
width: 100%;
|
|
min-width: 0;
|
|
color: var(--global-secondary-TextColor);
|
|
border: none;
|
|
border-radius: var(--medium-BorderRadius);
|
|
outline: none;
|
|
|
|
.hulyToDoLine-title { color: var(--global-primary-TextColor); }
|
|
&.isDone {
|
|
.hulyToDoLine-title {
|
|
color: var(--global-tertiary-TextColor);
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.hulyToDoLine-statusPriority,
|
|
.hulyToDoLine-dragbox,
|
|
.hulyToDoLine-checkbox {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.hulyToDoLine-dragbox {
|
|
display: none;
|
|
padding: 0;
|
|
width: var(--global-min-Size);
|
|
height: var(--global-min-Size);
|
|
color: inherit;
|
|
border: none;
|
|
outline: none;
|
|
cursor: grab;
|
|
}
|
|
.hulyToDoLine-statusPriority {
|
|
position: relative;
|
|
margin-right: var(--spacing-0_25);
|
|
min-width: var(--global-min-Size);
|
|
|
|
&.isNew::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: var(--spacing-1_25);
|
|
right: calc(-1 * var(--spacing-0_75));
|
|
width: var(--spacing-0_5);
|
|
height: var(--spacing-0_5);
|
|
background-color: var(--global-primary-LinkColor);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.hulyToDoLine-checkbox {
|
|
display: none;
|
|
width: var(--global-extra-small-Size);
|
|
height: var(--global-extra-small-Size);
|
|
}
|
|
.hulyToDoLine-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
width: var(--global-min-Size);
|
|
height: var(--global-extra-small-Size);
|
|
}
|
|
.hulyToDoLine-label {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
color: var(--global-secondary-TextColor);
|
|
|
|
&:not(.large) {
|
|
height: var(--global-extra-small-Size);
|
|
}
|
|
}
|
|
|
|
&.hovered,
|
|
&:hover {
|
|
background-color: var(--global-surface-01-hover-BackgroundColor);
|
|
|
|
.priority-container {
|
|
display: none;
|
|
}
|
|
.hulyToDoLine-dragbox,
|
|
.hulyToDoLine-checkbox {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
&.isDrag {
|
|
.priority-container {
|
|
display: flex;
|
|
}
|
|
.hulyToDoLine-dragbox {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hulyChip-item {
|
|
padding: var(--spacing-0_25) var(--spacing-0_5);
|
|
width: fit-content;
|
|
text-transform: uppercase;
|
|
color: var(--global-tertiary-TextColor);
|
|
background-color: var(--global-ui-BackgroundColor);
|
|
border-radius: var(--extra-small-BorderRadius);
|
|
|
|
&.error {
|
|
color: var(--button-negative-loading-LabelColor);
|
|
}
|
|
}
|
|
|
|
.hulyHotKey-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: var(--spacing-0_25) var(--spacing-0_5);
|
|
height: var(--global-min-Size);
|
|
min-width: var(--global-min-Size);
|
|
text-align: center;
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: .625rem;
|
|
font-style: normal;
|
|
line-height: normal;
|
|
color: var(--global-primary-TextColor);
|
|
background: var(--button-secondary-hover-BackgroundColor);
|
|
border-radius: var(--extra-small-BorderRadius);
|
|
}
|
|
|
|
/* Component */
|
|
.antiComponent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
|
|
.ac-header {
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
// height: 3.5rem;
|
|
// min-height: 2.5rem;
|
|
|
|
&:not(.withoutBackground) { background-color: var(--theme-comp-header-color); }
|
|
&.caption-height { min-height: 3.5rem; }
|
|
&.search-start { padding-left: var(--spacing-3); }
|
|
&.tabs-start { padding: 0 2.25rem; }
|
|
&.short {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
&.full,
|
|
&-full {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
min-width: 0;
|
|
|
|
&:not(.small-gap, .medium-gap) > *:not(:last-child) { margin-right: 1.25rem; }
|
|
&.small-gap > *:not(:last-child) { margin-right: .75rem; }
|
|
&.medium-gap > *:not(:last-child) { margin-right: 1rem; }
|
|
}
|
|
// &.withSettings { padding-right: .75rem; }
|
|
&.mini {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
&.mirror {
|
|
justify-content: space-between;
|
|
// padding: 0 1rem;
|
|
|
|
&-tool {
|
|
justify-content: space-between;
|
|
padding: 0 6.5rem 0 2.5rem;
|
|
}
|
|
}
|
|
&.divide {
|
|
border-bottom: 1px solid var(--theme-divider-color);
|
|
}
|
|
.secondRow {
|
|
align-self: flex-end;
|
|
margin-top: .5rem;
|
|
}
|
|
&.header-with-mode-selector {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
&.header-without-label {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.ac-header__wrap-description,
|
|
.ac-header__wrap-title {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
}
|
|
.ac-header__wrap-description {
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
.ac-header__wrap-title {
|
|
align-items: center;
|
|
}
|
|
|
|
.ac-header__icon {
|
|
margin-right: 0.5rem;
|
|
color: var(--theme-content-color);
|
|
}
|
|
.ac-header__title {
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
font-size: 1rem;
|
|
color: var(--theme-caption-color);
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
.ac-header__counter {
|
|
flex-shrink: 0;
|
|
margin-left: .25rem;
|
|
min-width: 0;
|
|
font-size: 1rem;
|
|
color: var(--theme-darker-color);
|
|
}
|
|
.ac-header__description {
|
|
min-width: 0;
|
|
font-size: 0.75rem;
|
|
color: var(--theme-dark-color);
|
|
|
|
overflow: hidden;
|
|
visibility: visible;
|
|
display: -webkit-box;
|
|
/* autoprefixer: ignore next */
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.ac-header__icon-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
color: var(--dark-color);
|
|
background-color: transparent;
|
|
border-radius: .25rem;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: var(--caption-color);
|
|
}
|
|
&.selected {
|
|
color: var(--accent-color);
|
|
background-color: var(--menu-bg-select);
|
|
cursor: default;
|
|
&:hover {
|
|
color: var(--caption-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ac-subtitle {
|
|
display: flex;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
flex-shrink: 0;
|
|
margin: 0 2.5rem;
|
|
min-height: 0;
|
|
height: 3.5rem;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
|
|
&::-webkit-scrollbar:horizontal {
|
|
height: 0.25rem;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
margin: 0;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-bar-color);
|
|
border-radius: 0.25rem;
|
|
&:hover {
|
|
background-color: var(--scrollbar-bar-hover);
|
|
}
|
|
}
|
|
|
|
.ac-subtitle-content {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
// align-items: center;
|
|
}
|
|
}
|
|
|
|
.ac-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
flex-wrap: nowrap;
|
|
margin: 0 2.5rem;
|
|
min-width: 0;
|
|
height: 4.5rem;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
|
|
&__tab {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
height: 4.5rem;
|
|
font-weight: 500;
|
|
color: var(--dark-color);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
|
|
&.selected {
|
|
border-top: .125rem solid transparent;
|
|
border-bottom: .125rem solid var(--caption-color);
|
|
color: var(--caption-color);
|
|
cursor: default;
|
|
}
|
|
}
|
|
.ac-tabs__tab + .ac-tabs__tab { margin-left: 2.5rem; }
|
|
|
|
&__empty {
|
|
min-width: 2.5rem;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.ac-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
height: 100%;
|
|
background-color: var(--theme-bg-color);
|
|
|
|
&.columns {
|
|
flex-direction: row;
|
|
}
|
|
&.hScroll {
|
|
overflow-x: auto;
|
|
&::-webkit-scrollbar-track {
|
|
margin: 2.5rem;
|
|
}
|
|
}
|
|
&.vScroll {
|
|
overflow-y: auto;
|
|
&::-webkit-scrollbar-track {
|
|
margin: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.ac-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
padding: 0.75rem 0.5rem;
|
|
min-width: 17rem;
|
|
max-width: 30rem;
|
|
height: 100%;
|
|
border-right: 1px solid var(--theme-divider-color);
|
|
|
|
&.max {
|
|
flex-grow: 1;
|
|
min-width: 25rem;
|
|
max-width: 100%;
|
|
border-right: none;
|
|
}
|
|
|
|
&__list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
min-height: 2.5rem;
|
|
padding: 0 1.25rem;
|
|
border: 1px solid transparent;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: var(--theme-button-hovered);
|
|
}
|
|
&.selected {
|
|
background-color: var(--theme-button-default);
|
|
border-color: var(--theme-button-border);
|
|
cursor: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__cards-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(20rem, auto));
|
|
grid-auto-rows: minmax(12.5rem, auto);
|
|
grid-gap: 1.5rem;
|
|
padding: 3rem;
|
|
overflow: auto ;
|
|
}
|
|
&__space-3 {
|
|
flex-shrink: 0;
|
|
min-height: 0.75rem;
|
|
height: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
.ac-column__list-item + .ac-column__list-item {
|
|
margin-top: 0.75rem;
|
|
}
|
|
.ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
|
|
|
|
/* Radio Button */
|
|
.antiRadio {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: min-content;
|
|
min-width: 0;
|
|
outline: none;
|
|
|
|
input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
border: 0;
|
|
padding: 0;
|
|
clip: rect(0 0 0 0);
|
|
overflow: hidden;
|
|
}
|
|
|
|
&.gap-none { margin-bottom: 0; }
|
|
&.gap-small { margin-bottom: .25rem; }
|
|
&.gap-medium { margin-bottom: .5rem; }
|
|
&.gap-large { margin-bottom: 1rem; }
|
|
|
|
label {
|
|
flex: 1 1 auto;
|
|
color: var(--theme-content-color);
|
|
|
|
&.medium {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
&.large {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
&.gap-medium {
|
|
padding-left: 0.375rem;
|
|
}
|
|
|
|
&.gap-large {
|
|
padding-left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.marker {
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
background-color: var(--theme-button-default);
|
|
border: 1px solid var(--theme-divider-color);
|
|
|
|
&::before {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
top: calc(-0.1875rem - 1px);
|
|
left: calc(-0.1875rem - 1px);
|
|
width: 1.375rem;
|
|
height: 1.375rem;
|
|
border: 1px solid var(--primary-button-default);
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: calc(0.25rem - 1px);
|
|
left: calc(0.25rem - 1px);
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
background-color: var(--primary-button-color);
|
|
border-radius: 50%;
|
|
opacity: 0.8;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
&:not(.disabled, .checked):hover {
|
|
.marker {
|
|
background-color: var(--theme-button-hovered);
|
|
}
|
|
|
|
label {
|
|
color: var(--theme-caption-color);
|
|
}
|
|
}
|
|
&.checked:not(.disabled):hover {
|
|
.marker {
|
|
background-color: var(--primary-button-hovered);
|
|
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
label {
|
|
color: var(--theme-caption-color);
|
|
}
|
|
}
|
|
&:focus-within:not(.disabled) {
|
|
.marker {
|
|
&::before {
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
&.checked {
|
|
&:active {
|
|
.marker {
|
|
background-color: var(--primary-button-pressed);
|
|
}
|
|
}
|
|
|
|
.marker::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
label {
|
|
color: var(--theme-caption-color);
|
|
}
|
|
}
|
|
&.checked:not(.disabled) {
|
|
.marker {
|
|
background-color: var(--primary-button-default);
|
|
|
|
&::after {
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
&.disabled {
|
|
cursor: not-allowed;
|
|
|
|
&.checked {
|
|
.marker {
|
|
background-color: var(--primary-button-disabled);
|
|
|
|
&::after {
|
|
content: '';
|
|
background-color: var(--primary-button-disabled-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
color: var(--theme-darker-color);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
&:not(.disabled),
|
|
&:not(.disabled) label {
|
|
cursor: pointer;
|
|
}
|
|
&:not(.disabled):active {
|
|
.marker {
|
|
background-color: var(--primary-button-pressed);
|
|
|
|
&::after {
|
|
content: '';
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
&.kind-primary .marker {
|
|
border-color: var(--primary-button-default);
|
|
}
|
|
&.kind-positive .marker {
|
|
border-color: var(--positive-button-default);
|
|
}
|
|
&.kind-negative .marker {
|
|
border-color: var(--negative-button-default);
|
|
}
|
|
}
|
|
|
|
/* StatesBar */
|
|
.antiStatesBar {
|
|
overflow-x: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1 0;
|
|
min-width: 0;
|
|
|
|
&::-webkit-scrollbar:horizontal { height: 0; }
|
|
&::-webkit-scrollbar-track { margin: 0.25rem; }
|
|
&::-webkit-scrollbar-thumb { background-color: var(--scrollbar-bar-color); }
|
|
|
|
&.mask-none { mask-image: none }
|
|
&.mask-left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem); }
|
|
&.mask-right { mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem); }
|
|
&.mask-both {
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 0) 0,
|
|
rgba(0, 0, 0, 1) 2rem,
|
|
rgba(0, 0, 0, 1) calc(100% - 2rem),
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
|
|
.asb-bar {
|
|
flex: 1 0 auto;
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
width: auto;
|
|
|
|
&.noGap {
|
|
flex: none;
|
|
}
|
|
|
|
&__back {
|
|
padding: 1px 0.5px;
|
|
height: calc(1.5rem + 2px);
|
|
// height: 1.5rem;
|
|
}
|
|
&__element {
|
|
fill: var(--theme-button-default);
|
|
stroke: var(--theme-button-border);
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
|
|
&:hover { fill: var(--theme-button-hovered); }
|
|
}
|
|
&__selected { fill: var(--theme-button-pressed); }
|
|
&__disabled { pointer-events: none; }
|
|
|
|
.asb-label__container {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
top: 0;
|
|
left: .5rem;
|
|
right: .5rem;
|
|
min-width: 0;
|
|
width: calc(100% - 1rem);
|
|
height: 100%;
|
|
font-weight: 500;
|
|
font-size: 0.8125rem;
|
|
color: var(--theme-dark-color);
|
|
|
|
&.disabled { pointer-events: none; }
|
|
|
|
&.selected {
|
|
color: var(--theme-caption-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Contact Card */
|
|
.antiContactCard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1rem 1.5rem 1.25rem;
|
|
background-color: var(--theme-button-default);
|
|
border: 1px solid var(--theme-button-border);
|
|
border-radius: 0.5rem;
|
|
transition-property: box-shadow, background-color, border-color;
|
|
transition-timing-function: var(--timing-shadow);
|
|
transition-duration: 0.15s;
|
|
user-select: text;
|
|
height: 100%;
|
|
min-width: 15rem;
|
|
min-height: 15rem;
|
|
|
|
&:hover {
|
|
background-color: var(--theme-button-hovered);
|
|
box-shadow: var(--accent-shadow);
|
|
}
|
|
|
|
.logo {
|
|
width: 4.5rem;
|
|
height: 4.5rem;
|
|
color: var(--primary-button-color);
|
|
background-color: var(--primary-button-default);
|
|
border-radius: 50%;
|
|
}
|
|
.label {
|
|
margin-bottom: 1.75rem;
|
|
font-weight: 500;
|
|
font-size: 0.625rem;
|
|
color: var(--theme-dark-color);
|
|
}
|
|
.name {
|
|
margin: 1rem 0 0.25rem;
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
color: var(--theme-caption-color);
|
|
}
|
|
.description {
|
|
font-size: 0.75rem;
|
|
color: var(--theme-dark-color);
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
flex-grow: 1;
|
|
margin-top: 1.5rem;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
&.inline {
|
|
padding: 0.5rem 0.5rem 0.25rem;
|
|
min-width: 1rem;
|
|
min-height: 1rem;
|
|
|
|
background-color: inherit;
|
|
border: inherit;
|
|
border-radius: inherit;
|
|
.name {
|
|
margin: 0.25rem 0 0.25rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
.label {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Table */
|
|
.antiTable {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
th, td {
|
|
padding: .5rem 1.5rem;
|
|
text-align: left;
|
|
&:first-child { .metaColumn {
|
|
padding-left: 0; }
|
|
}
|
|
&:last-child { .metaColumn {
|
|
padding-right: 0; }
|
|
}
|
|
}
|
|
th {
|
|
height: 3rem;
|
|
font-weight: 600;
|
|
font-size: .625rem;
|
|
letter-spacing: .5px;
|
|
text-transform: uppercase;
|
|
color: var(--theme-dark-color);
|
|
box-shadow: inset 0 -1px 0 0 var(--theme-table-border-color);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
// z-index: 5;
|
|
|
|
&.sortable { cursor: pointer; }
|
|
&.sorted {
|
|
color: var(--theme-caption-color);
|
|
|
|
.icon {
|
|
margin-left: .25rem;
|
|
opacity: .6;
|
|
}
|
|
}
|
|
&:hover .antiTable-cells__checkCell { visibility: visible; }
|
|
.checkall { visibility: visible; }
|
|
|
|
&.align-left .antiTable-cells { justify-content: start; }
|
|
&.align-center .antiTable-cells { justify-content: center; }
|
|
&.align-right .antiTable-cells { justify-content: end; }
|
|
}
|
|
|
|
td {
|
|
&.align-left { text-align: left; }
|
|
&.align-center { text-align: center; }
|
|
&.align-right { text-align: right; }
|
|
&:has(.cropped-text-presenters, .cropped-text-presenter) { max-width: 50cqw; }
|
|
}
|
|
&:has(td:nth-child(4)) td:has(.cropped-text-presenters, .cropped-text-presenter) { max-width: 40cqw; }
|
|
&:has(td:nth-child(6)) td:has(.cropped-text-presenters, .cropped-text-presenter) { max-width: 30cqw; }
|
|
|
|
&.editable {
|
|
th, td, tr {
|
|
border: 1px dashed var(--theme-divider-color);
|
|
}
|
|
}
|
|
|
|
|
|
&.metaColumn {
|
|
th, td {
|
|
&:first-child {
|
|
padding: 0;
|
|
min-width: 2.5rem;
|
|
width: 2.5rem;
|
|
z-index: 1;
|
|
}
|
|
&:nth-child(2) { padding-left: 0; }
|
|
&:last-child { padding-right: 1.5rem; }
|
|
}
|
|
}
|
|
|
|
.antiTable-cells {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
&__checkCell, &__notifyCell {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
&__checkCell { visibility: hidden; }
|
|
&__firstCell {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&-menuRow {
|
|
visibility: hidden;
|
|
margin-left: .5rem;
|
|
opacity: .6;
|
|
cursor: pointer;
|
|
|
|
&:hover { opacity: 1; }
|
|
}
|
|
}
|
|
}
|
|
|
|
.antiTable-body__row {
|
|
position: relative;
|
|
height: 3.25rem;
|
|
color: var(--theme-caption-color);
|
|
background-color: var(--theme-table-row-color);
|
|
border-bottom: 1px solid var(--theme-divider-color);
|
|
|
|
&:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: visible; }
|
|
&:hover, &.checking {
|
|
.antiTable-cells__checkCell { visibility: visible; }
|
|
.antiTable-cells__notifyCell .notify-table-kind {
|
|
width: 1.15rem;
|
|
height: 1.15rem;
|
|
background-color: var(--highlight-hover);
|
|
border: 1px solid currentColor;
|
|
border-radius: .375rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.antiTable-body__border {
|
|
border: 1px solid var(--theme-divider-color);
|
|
}
|
|
|
|
&.highlightRows .antiTable-body__row {
|
|
&.selected { background-color: var(--highlight-hover); }
|
|
&.checking {
|
|
background-color: var(--highlight-select);
|
|
// border-bottom-color: var(--highlight-select-border);
|
|
|
|
&:hover { background-color: var(--highlight-select-hover); }
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroller-header,
|
|
.scroller-thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
.scroller-thead {
|
|
height: 3rem;
|
|
background-color: var(--theme-table-header-color);
|
|
|
|
&__tr { height: 3rem; }
|
|
}
|
|
|
|
.scroller-tfoot {
|
|
position: sticky;
|
|
z-index: 2;
|
|
bottom: 0;
|
|
height: 2.5rem;
|
|
background-color: var(--theme-table-header-color);
|
|
|
|
tr {
|
|
height: 2.5rem;
|
|
box-shadow: inset 0 1px 0 0 var(--theme-divider-color);
|
|
}
|
|
}
|
|
|
|
.scroller-first-column {
|
|
th, td {
|
|
&:first-child {
|
|
position: sticky;
|
|
padding: 0;
|
|
left: 0;
|
|
background-color: var(--theme-bg-color);
|
|
border-right: 1px solid transparent !important;
|
|
z-index: 1;
|
|
}
|
|
.fullfill {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: .5rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--theme-bg-color);
|
|
border-right: 1px solid var(--theme-divider-color);
|
|
|
|
&.center { justify-content: center; }
|
|
}
|
|
}
|
|
}
|
|
|
|
// THead background-color in Tooltip and Popups
|
|
.popup-tooltip .antiTable .scroller-thead,
|
|
.popup .antiTable .scroller-thead { background-color: var(--theme-table-header-color); }
|
|
|
|
// Hide row menu in Tooltip
|
|
.popup-tooltip .antiTable .antiTable-body__row:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: hidden; }
|
|
|
|
// Basic component view.
|
|
.antiComponentBox {
|
|
padding: 0.5rem;
|
|
background-color: var(--theme-list-row-color);
|
|
border: 1px solid var(--theme-list-divider-color);
|
|
border-radius: .75rem;
|
|
|
|
&.antiComponentBoxFocused {
|
|
background-color: var(--theme-button-hovered);
|
|
}
|
|
}
|
|
|
|
/* List */
|
|
|
|
.antiList-cells {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
&__checkCell, &__notifyCell {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
&__checkCell { visibility: hidden; }
|
|
}
|
|
|
|
.antiList__row {
|
|
.antiList-cells__notifyCell,
|
|
.antiList-cells__checkCell {
|
|
flex-shrink: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
&:hover, &.checking {
|
|
.antiList-cells__checkCell { visibility: visible; }
|
|
.antiList-cells__notifyCell .notify-table-kind {
|
|
width: 1.15rem;
|
|
height: 1.15rem;
|
|
background-color: var(--highlight-hover);
|
|
border: 1px solid currentColor;
|
|
border-radius: .375rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Select */
|
|
.antiSelect {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
cursor: pointer;
|
|
|
|
.button {
|
|
flex-shrink: 0;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
background-color: transparent;
|
|
border: 1px solid var(--divider-color);
|
|
|
|
&.circle { border-radius: 50%; }
|
|
&.round-2 { border-radius: .5rem; }
|
|
|
|
& > .icon { color: var(--dark-color); }
|
|
&.selected {
|
|
background-color: var(--button-bg-color);
|
|
border-color: transparent;
|
|
}
|
|
&:focus {
|
|
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
|
& > .icon { color: var(--caption-color); }
|
|
}
|
|
}
|
|
&:hover .button {
|
|
background-color: var(--button-bg-hover);
|
|
border-color: var(--button-border-hover);
|
|
& > .icon { color: var(--caption-color); }
|
|
}
|
|
|
|
.label {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
|
|
min-width: 0;
|
|
font-size: .75rem;
|
|
font-weight: 500;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
margin-left: .75rem;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
/* Option */
|
|
.antiOption {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 .25rem;
|
|
height: 2rem;
|
|
min-width: 0;
|
|
font-size: .8125rem;
|
|
border-radius: .375rem;
|
|
outline: none;
|
|
z-index: 1;
|
|
|
|
.tools { opacity: 0; }
|
|
|
|
&.leftPadding { padding-left: 0.625rem; }
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border: 1px solid var(--primary-button-default);
|
|
border-radius: .5rem;
|
|
z-index: -1;
|
|
}
|
|
&:hover {
|
|
background-color: var(--theme-button-hovered);
|
|
|
|
.tools { opacity: 1; }
|
|
}
|
|
&:focus-within::before, &:focus::before { content: ''; }
|
|
}
|
|
|
|
/* Wraps */
|
|
.antiWrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
|
|
&.conners {
|
|
&::after, &::before {
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: var(--primary-button-default);
|
|
}
|
|
&::before {
|
|
top: -2px;
|
|
left: -4px;
|
|
clip-path: path('M0,6v-6h6v1h-5v5z');
|
|
}
|
|
&::after {
|
|
bottom: -2px;
|
|
right: -4px;
|
|
clip-path: path('M0,6h6v-6h-1v5h-5z');
|
|
}
|
|
}
|
|
&.wraped::before, &.wraped::after { content: ''; }
|
|
&.focusWI:focus-within::before, &.focusWI:focus-within::after { content: ''; }
|
|
&.focus:focus::before, &.focus:focus::after { content: ''; }
|
|
|
|
.result {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
min-width: 0;
|
|
|
|
&.selected { color: var(--caption-color); }
|
|
&.not-selected { color: var(--dark-color); }
|
|
&.highlight {
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
font-weight: 500;
|
|
font-size: .75em;
|
|
color: var(--dark-color);
|
|
|
|
&.inter { font-size: 1em; }
|
|
}
|
|
}
|
|
|
|
/* Inbox */
|
|
.inbox-activity {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
background-color: var(--theme-inbox-activity-bgcolor);
|
|
|
|
&__container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
font-size: .8125rem;
|
|
border: 1px solid transparent;
|
|
outline: none;
|
|
|
|
&:not(.selected) {
|
|
margin: 0 1.75rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.crop-presenter,
|
|
.inline-presenter { margin: -.3125rem 0; }
|
|
|
|
.inbox-activity__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
color: var(--theme-caption-color);
|
|
|
|
&.shrink { padding: .75rem 0; }
|
|
&:not(.shrink) { padding: 1rem 0; }
|
|
// &.read {}
|
|
}
|
|
|
|
.time { color: var(--theme-halfcontent-color); }
|
|
.notify {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: -1.125rem;
|
|
height: 0.5rem;
|
|
width: 0.5rem;
|
|
background-color: var(--theme-inbox-notify);
|
|
border-radius: 50%;
|
|
|
|
&.people {
|
|
top: 1.5rem;
|
|
background-color: var(--theme-inbox-people-notify);
|
|
}
|
|
}
|
|
.counter {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 1.375rem;
|
|
width: 1.375rem;
|
|
color: var(--theme-dark-color);
|
|
background-color: var(--theme-inbox-counter-bgcolor);
|
|
border-radius: 50%;
|
|
|
|
&.float {
|
|
position: absolute;
|
|
top: .5625rem;
|
|
right: 0;
|
|
}
|
|
&.people {
|
|
color: var(--theme-inbox-people-notify);
|
|
background-color: var(--theme-inbox-people-counter-bgcolor);
|
|
}
|
|
}
|
|
.arrow {
|
|
position: absolute;
|
|
top: 1.125rem;
|
|
right: 0;
|
|
}
|
|
|
|
&:last-child:not(.selected) { border-bottom: 1px solid var(--theme-inbox-activitymsg-divider); }
|
|
&:not(.selected) + &:not(.selected) { border-top-color: var(--theme-inbox-activitymsg-divider); }
|
|
|
|
&.selected {
|
|
margin: 0 0.5rem;
|
|
background-color: var(--theme-inbox-activitymsg-bgcolor);
|
|
border: 1px solid var(--theme-inbox-activitymsg-border);
|
|
border-radius: 0.25rem;
|
|
|
|
.notify { left: .125rem; }
|
|
.inbox-activity__content {
|
|
padding: 1rem 1.25rem;
|
|
|
|
&.shrink { padding: .75rem 1.25rem; }
|
|
}
|
|
.counter {
|
|
visibility: hidden;
|
|
|
|
&.float { right: 1.25rem; }
|
|
}
|
|
.arrow { right: 1.25rem; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Presenters */
|
|
.antiPresenter {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
|
|
.ap-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--theme-dark-color);
|
|
height: 100%;
|
|
aspect-ratio: 1;
|
|
}
|
|
.ap-label {
|
|
min-width: 0;
|
|
text-align: left;
|
|
color: var(--theme-caption-color);
|
|
|
|
&.colorInherit { color: inherit; }
|
|
}
|
|
&:hover .ap-icon,
|
|
&:hover .ap-label { color: var(--theme-caption-color); }
|
|
}
|
|
|
|
/* ListView */
|
|
.listGrid {
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 2.5rem 0 0.75rem;
|
|
width: 100%;
|
|
height: 2.75rem;
|
|
min-width: 100%;
|
|
min-height: 2.75rem;
|
|
color: var(--theme-caption-color);
|
|
background-color: var(--theme-list-row-color);
|
|
|
|
&.row {
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
// border-left: 1px solid var(--theme-list-border-color);
|
|
// border-right: 1px solid var(--theme-list-border-color);
|
|
}
|
|
&.row:not(.lastCat, .last) {
|
|
border-bottom: 1px solid var(--theme-divider-color);
|
|
}
|
|
&.row.last {
|
|
border-bottom: 1px solid transparent;
|
|
// border-bottom: 1px solid var(--theme-list-subheader-divider);
|
|
}
|
|
&.row.lastCat {
|
|
border-bottom-left-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
border-bottom: 1px solid transparent;
|
|
// border-bottom: 1px solid var(--theme-list-border-color);
|
|
}
|
|
|
|
&.compactMode {
|
|
padding: 0 1.125rem 0 0.75rem;
|
|
}
|
|
&.hoverable:hover,
|
|
&.mListGridSelected {
|
|
background-color: var(--highlight-hover);
|
|
}
|
|
&.showMore {
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.checking {
|
|
background-color: var(--highlight-select);
|
|
// border-bottom-color: var(--highlight-select);
|
|
|
|
&:hover,
|
|
&.mListGridSelected {
|
|
background-color: var(--highlight-select-hover);
|
|
// border-bottom-color: var(--highlight-select-hover);
|
|
}
|
|
}
|
|
|
|
.draggable-container {
|
|
position: absolute;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 1rem;
|
|
cursor: grabbing;
|
|
|
|
.draggable-mark {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 0.125rem;
|
|
width: 0.375rem;
|
|
height: 100%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
&:hover {
|
|
.draggable-mark {
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
|
|
.hidden-panel,
|
|
.panel-trigger {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
top: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
}
|
|
.hidden-panel {
|
|
overflow: hidden;
|
|
right: 0;
|
|
width: 80%;
|
|
background-color: var(--theme-comp-header-color);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
transition-property: opacity, width;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: var(--timing-main);
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 0 0.25rem;
|
|
width: 0.375rem;
|
|
min-width: 0.375rem;
|
|
height: 100%;
|
|
opacity: 0.25;
|
|
}
|
|
.scroll-box {
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0.125rem 0.25rem 0;
|
|
padding: 0.25rem 0.25rem;
|
|
min-width: 0;
|
|
|
|
&::-webkit-scrollbar:horizontal {
|
|
height: 3px;
|
|
}
|
|
}
|
|
}
|
|
.panel-trigger {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 0 0.125rem;
|
|
right: 0.125rem;
|
|
width: 0.75rem;
|
|
border: 1px solid transparent;
|
|
border-radius: 0.25rem;
|
|
opacity: 0.1;
|
|
z-index: 1;
|
|
transition: opacity 0.15s var(--timing-main);
|
|
|
|
&:focus {
|
|
border-color: var(--primary-edit-border-color);
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
.hidden-panel:focus-within,
|
|
.hidden-panel:focus,
|
|
.panel-trigger:focus + .hidden-panel {
|
|
width: 100%;
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
|
|
.listGrid-container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: fit-content;
|
|
min-width: 0;
|
|
border-radius: 0.25rem;
|
|
container: listGridContainer / inline-size;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 0.5rem;
|
|
}
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid var(--theme-list-border-color);
|
|
border-radius: 0.25rem;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.expandcollapse-content {
|
|
min-width: 100% !important;
|
|
}
|
|
|
|
// Responsive style for ListView: horizontal scrolling mode for widths less than 480px
|
|
@container listGridContainer (max-width: 480px) {
|
|
.expandcollapse-content {
|
|
width: max-content !important;
|
|
|
|
.listGrid {
|
|
width: max-content;
|
|
|
|
.cropped-text-presenters > :is(span:not(.separator), a):not(:empty),
|
|
.cropped-text-presenter { max-width: 10rem; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ListView - global style */
|
|
.category-container.disableHeader .listGrid.row:first-child {
|
|
border-top-left-radius: 0.25rem;
|
|
border-top-right-radius: 0.25rem;
|
|
border-top: 1px solid var(--theme-list-border-color);
|
|
}
|
|
.list-container .category-container.collapsed:not(.category-last, .category-one) .categoryHeader.subLevel,
|
|
.list-container .category-container:not(.category-last, .category-one, .zero-container) .category-container.category-last .listGrid.last.lastCat,
|
|
.list-container .category-container:not(.category-last, .category-one, .zero-container) .category-container.category-last .categoryHeader.subLevel.lastCat {
|
|
border-radius: 0;
|
|
}
|
|
.list-container .category-container .categoryHeader.subLevel.closed {
|
|
border-bottom-left-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
border-bottom: 1px solid var(--theme-list-border-color);
|
|
}
|
|
.list-container .category-container .categoryHeader.closed:not(.subLevel) {
|
|
border-bottom-left-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
|
|
&::before,
|
|
&::after {
|
|
border-radius: 0.25rem;
|
|
}
|
|
&::after {
|
|
border-bottom-color: var(--theme-list-border-color);
|
|
}
|
|
}
|
|
.list-container .category-container .listGrid {
|
|
.fix-margin { margin-left: .875rem; }
|
|
.name { margin-left: .375rem; }
|
|
|
|
.compression-bar {
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
border-radius: 1.625rem;
|
|
transition: flex-shrink 0.25s cubic-bezier(0.38, 0.01, 0.33, 1) 0s;
|
|
|
|
&:hover {
|
|
flex-shrink: .5;
|
|
min-width: initial;
|
|
}
|
|
& > *:last-child {
|
|
flex-shrink: 0;
|
|
width: max-content;
|
|
}
|
|
& > *:not(:first-child) { margin-left: .25rem; }
|
|
& > * > *:not(.only-icon) { min-width: fit-content; }
|
|
}
|
|
.panel-trigger > * { pointer-events: none; }
|
|
}
|
|
// Custom on the ListView
|
|
.list-container .listGrid .yesno-container { flex-shrink: 0; }
|
|
// Labels on the ListView
|
|
.list-container .listitems-container,
|
|
.list-container .listitems-container:hover,
|
|
.list-container .antiButton.list,
|
|
.list-container .antiButton.list:hover,
|
|
.list-container .datetime-button,
|
|
.list-container .datetime-button:hover {
|
|
padding-left: .5rem !important;
|
|
padding-right: .5rem !important;
|
|
font-size: 0.8125rem !important;
|
|
background-color: var(--theme-list-button-color) !important;
|
|
|
|
&:not(.only-icon) .btn-icon,
|
|
&:not(.only-icon) .icon { margin-right: .375rem !important; }
|
|
.label {
|
|
font-size: 0.8125rem !important;
|
|
color: var(--theme-halfcontent-color) !important;
|
|
}
|
|
}
|
|
.list-container .listitems-container,
|
|
.list-container .listitems-container:hover,
|
|
.list-container .antiButton.list,
|
|
.list-container .antiButton.list:hover {
|
|
.icon, .btn-icon { color: var(--theme-halfcontent-color) !important; }
|
|
}
|
|
.list-container .datetime-button .btn-icon.normal,
|
|
.list-container .datetime-button:hover .btn-icon.normal {
|
|
color: var(--theme-halfcontent-color) !important;
|
|
}
|
|
|
|
/* Kanban - global style */
|
|
.kanban-container .card-container .antiButton.link-bordered { padding: 0 .5rem !important; }
|
|
.kanban-container .card-container .card-labels > *:not(.labels-container),
|
|
.kanban-container .card-container .card-labels.labels .labels-container > * {
|
|
margin: .25rem .25rem 0 0;
|
|
|
|
&:last-child {
|
|
flex-shrink: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.kanban-container .card-container .card-labels .datetime-button {
|
|
padding: 0 0.25rem !important;
|
|
height: 1.75rem !important;
|
|
font-size: .8125rem !important;
|
|
}
|
|
.kanban-container .card-container .card-labels .label { font-size: .8125rem !important; }
|
|
|
|
/* ListView & Kanban */
|
|
.list-container .compression-bar .label-wrapper,
|
|
.kanban-container .card-container .card-labels .label-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ToDos in Calendar (WorkSlot) */
|
|
.toDos-container .task-item.dragged {
|
|
overflow: hidden;
|
|
background-color: var(--theme-bg-dark-color);
|
|
border-color: var(--theme-divider-color);
|
|
border-radius: .125rem;
|
|
opacity: .75;
|
|
|
|
.hideOnDrag { opacity: 0 !important; }
|
|
}
|