mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-29 17:14:37 +03:00
1024faa46e
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
286 lines
7.4 KiB
SCSS
286 lines
7.4 KiB
SCSS
//
|
|
// © 2024 Hardcore Engineering, Inc. All Rights Reserved.
|
|
// Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
|
|
//
|
|
|
|
/* Huly Attribute Table */
|
|
.hulyTableAttr-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
background-color: var(--theme-table-row-color);
|
|
border: 1px solid var(--theme-divider-color);
|
|
border-radius: var(--large-BorderRadius);
|
|
|
|
.hulyTableAttr-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
flex-shrink: 0;
|
|
min-height: var(--global-max-Size);
|
|
text-transform: uppercase;
|
|
color: var(--global-secondary-TextColor);
|
|
|
|
&.withButton {
|
|
padding: var(--spacing-2);
|
|
}
|
|
&:not(.withButton) {
|
|
padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2_5);
|
|
|
|
span {
|
|
margin-left: var(--spacing-1_5);
|
|
}
|
|
}
|
|
span {
|
|
flex-grow: 1;
|
|
}
|
|
.icon {
|
|
flex-shrink: 0;
|
|
width: var(--global-min-Size);
|
|
height: var(--global-min-Size);
|
|
}
|
|
.buttons-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
.hulyTableAttr-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
border-top: 1px solid var(--theme-divider-color);
|
|
|
|
&:not(.withTitle) {
|
|
flex-direction: column;
|
|
}
|
|
&.withTitle {
|
|
gap: var(--spacing-1);
|
|
|
|
.hulyTableAttr-content__title {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
gap: 8px;
|
|
padding: var(--spacing-1_5);
|
|
min-width: 8.75rem;
|
|
max-width: 8.75rem;
|
|
text-transform: uppercase;
|
|
font-size: .75rem;
|
|
font-weight: 500;
|
|
line-height: 1rem;
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
.hulyTableAttr-content__wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
height: fit-content;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
&__row {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
min-width: 0;
|
|
border-radius: var(--small-BorderRadius);
|
|
border: none;
|
|
outline: none;
|
|
|
|
&-dragMenu,
|
|
&-icon-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
&-dragMenu {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: var(--global-extra-small-Size);
|
|
height: var(--global-extra-small-Size);
|
|
color: var(--button-disabled-IconColor);
|
|
border-radius: var(--extra-small-BorderRadius);
|
|
border: none;
|
|
outline: none;
|
|
|
|
&.drag {
|
|
cursor: grab !important;
|
|
}
|
|
}
|
|
&-icon {
|
|
width: var(--global-min-Size);
|
|
height: var(--global-min-Size);
|
|
color: var(--global-primary-TextColor);
|
|
}
|
|
&-icon-wrapper {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: var(--global-medium-Size);
|
|
height: var(--global-medium-Size);
|
|
color: var(--global-secondary-TextColor);
|
|
background-color: var(--theme-button-hovered); // var(--global-surface-02-BackgroundColor);
|
|
border-radius: var(--small-BorderRadius);
|
|
border: none;
|
|
outline: none;
|
|
|
|
&.pointer {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
&-labels-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
gap: var(--spacing-0_25);
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
&-label {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
text-align: left;
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
color: var(--global-primary-TextColor);
|
|
|
|
&.grow {
|
|
flex-grow: 1;
|
|
}
|
|
&.accent {
|
|
font-weight: 500;
|
|
}
|
|
&.dark {
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
p {
|
|
color: inherit;
|
|
}
|
|
}
|
|
&-type {
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
color: var(--global-secondary-TextColor);
|
|
}
|
|
&-arrow {
|
|
display: none;
|
|
flex-shrink: 0;
|
|
width: var(--global-min-Size);
|
|
height: var(--global-min-Size);
|
|
color: var(--global-primary-LinkColor);
|
|
}
|
|
}
|
|
&.options .hulyTableAttr-content__row,
|
|
&.class .hulyTableAttr-content__row,
|
|
&.task .hulyTableAttr-content__row {
|
|
&.hovered,
|
|
&:not(.disableMouseOver):hover {
|
|
background-color: var(--theme-table-header-color); // var(--global-surface-03-hover-BackgroundColor);
|
|
}
|
|
&.selected {
|
|
background-color: var(--theme-table-header-color); // var(--global-surface-03-hover-BackgroundColor);
|
|
|
|
.hulyTableAttr-content__row-icon,
|
|
.hulyTableAttr-content__row-arrow,
|
|
.hulyTableAttr-content__row-label {
|
|
color: var(--global-primary-LinkColor);
|
|
}
|
|
.hulyTableAttr-content__row-type {
|
|
color: var(--global-primary-TextColor);
|
|
}
|
|
.hulyTableAttr-content__row-label {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
&.options,
|
|
&.class {
|
|
padding: var(--spacing-1);
|
|
|
|
.hulyTableAttr-content__row {
|
|
gap: var(--spacing-1);
|
|
padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-1);
|
|
|
|
&.hovered .hulyTableAttr-content__row-arrow,
|
|
&:not(.disableMouseOver):hover .hulyTableAttr-content__row-arrow,
|
|
&.selected .hulyTableAttr-content__row-arrow {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
&.options .hulyTableAttr-content__row {
|
|
padding: var(--spacing-1);
|
|
min-height: var(--global-large-Size);
|
|
|
|
&:not(.hovered) button.type-button-icon {
|
|
display: none;
|
|
}
|
|
&.disableMouseOver,
|
|
&-dragMenu {
|
|
cursor: default;
|
|
}
|
|
label.editbox-wrapper {
|
|
padding: 0 !important;
|
|
height: var(--global-extra-small-Size) !important;
|
|
}
|
|
&:hover button.type-button-icon {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
&.task {
|
|
.hulyTableAttr-content__row {
|
|
gap: var(--spacing-1);
|
|
padding: var(--spacing-1_5);
|
|
border-radius: 0;
|
|
|
|
&:last-child {
|
|
border-radius: 0 0 var(--large-BorderRadius) var(--large-BorderRadius);
|
|
}
|
|
.hulyTableAttr-content__row-icon-wrapper {
|
|
margin-right: var(--spacing-0_5);
|
|
}
|
|
}
|
|
.hulyTableAttr-content__row + .hulyTableAttr-content__row {
|
|
border-top: 1px solid var(--theme-divider-color);
|
|
}
|
|
}
|
|
&.automation {
|
|
.hulyTableAttr-content__row {
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-1_5) var(--spacing-1_5) var(--spacing-1_5) var(--spacing-2_5);
|
|
border-radius: 0;
|
|
cursor: default;
|
|
|
|
&:last-child {
|
|
border-radius: 0 0 var(--large-BorderRadius) var(--large-BorderRadius);
|
|
}
|
|
.hulyTableAttr-content__row-icon-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
flex-wrap: nowrap;
|
|
gap: var(--spacing-1);
|
|
}
|
|
}
|
|
.hulyTableAttr-content__row + .hulyTableAttr-content__row {
|
|
border-top: 1px solid var(--theme-divider-color);
|
|
}
|
|
}
|
|
}
|
|
}
|