mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-19 08:51:37 +03:00
2220 lines
51 KiB
SCSS
2220 lines
51 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);
|
|
|
|
&: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 {
|
|
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");
|
|
}
|
|
|
|
&.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; }
|
|
.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%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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; }
|
|
}
|
|
.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; }
|
|
.small-font &.medium { width: 11px; }
|
|
&.medium { width: 13px; }
|
|
&.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; }
|
|
}
|
|
}
|
|
|
|
/* 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);
|
|
|
|
&.short {
|
|
margin: 0 var(--spacing-1);
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
&.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; }
|
|
.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%;
|
|
border-top: 1px solid transparent;
|
|
visibility: visible;
|
|
|
|
&.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);
|
|
|
|
.hulyModal-footer {
|
|
padding: var(--spacing-1_5);
|
|
}
|
|
}
|
|
&.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: 1;
|
|
}
|
|
&.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;
|
|
|
|
&.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;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
|
|
&.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;
|
|
|
|
&__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;
|
|
// 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; }
|
|
}
|
|
|
|
&.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;
|
|
|
|
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: -.125rem;
|
|
bottom: -.125rem;
|
|
left: -.125rem;
|
|
right: -.125rem;
|
|
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;
|
|
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 - global style */
|
|
.list-container .category-container .categoryHeader.subLevel.closed {
|
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
border-bottom: 1px solid var(--theme-list-border-color);
|
|
}
|
|
.list-container .category-container .categoryHeader.closed:not(.subLevel) {
|
|
border-radius: 0 0 0.25rem 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; }
|
|
}
|
|
// 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; }
|
|
}
|