diff --git a/packages/presentation/src/utils.ts b/packages/presentation/src/utils.ts index 49e3d89691e..66798fd81c4 100644 --- a/packages/presentation/src/utils.ts +++ b/packages/presentation/src/utils.ts @@ -531,7 +531,7 @@ export function sizeToWidth (size: string): number | undefined { case 'x-large': width = 7.5 break - case '2x-large': + case 'xxl': width = 10 break } diff --git a/packages/theme/.eslintrc.js b/packages/theme/.eslintrc.js index bb8fd7450d4..10dd5f7a69c 100644 --- a/packages/theme/.eslintrc.js +++ b/packages/theme/.eslintrc.js @@ -1,4 +1,5 @@ module.exports = { extends: ['./node_modules/@hcengineering/platform-rig/profiles/ui/eslint.config.json'], - parserOptions: { tsconfigRootDir: __dirname } + parserOptions: { tsconfigRootDir: __dirname }, + ignorePatterns: ["**/*.md"] } diff --git a/packages/theme/styles/_components-new.scss b/packages/theme/styles/_components-new.scss new file mode 100644 index 00000000000..2bf0ab64627 --- /dev/null +++ b/packages/theme/styles/_components-new.scss @@ -0,0 +1,171 @@ +// +// 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. +// + +// Main file, importing all components +@import 'components/index'; + +/* Examples of using new style variables */ + +/* Example of using typography variables */ +.example-typography { + h1 { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-bold); + line-height: var(--line-height-tight); + } + + h2 { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-tight); + } + + h3 { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); + line-height: var(--line-height-normal); + } + + p { + font-size: var(--font-size-md); + font-weight: var(--font-weight-normal); + line-height: var(--line-height-normal); + } + + .small-text { + font-size: var(--font-size-sm); + line-height: var(--line-height-normal); + } + + .caption { + font-size: var(--font-size-xs); + line-height: var(--line-height-tight); + } +} + +/* Пример использования переменных для анимаций */ +.example-transitions { + .btn-fast { + transition: all var(--transition-fast) ease; + } + + .btn-normal { + transition: all var(--transition-normal) ease; + } + + .btn-slow { + transition: all var(--transition-slow) ease; + } + + .custom-transition { + transition: transform 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55); + } +} + +/* Пример использования z-index переменных */ +.example-z-index { + .tooltip { + z-index: var(--z-tooltip); + } + + .dropdown-menu { + z-index: var(--z-dropdown); + } + + .modal-dialog { + z-index: var(--z-modal); + } +} + +/* Пример использования фокусного состояния */ +.example-focus { + .btn-default:focus-visible { + outline: var(--focus-ring-width) solid var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); + } + + .btn-no-offset:focus-visible { + outline: var(--focus-ring-width) solid var(--focus-ring-color); + } +} + +/* Пример использования сетки */ +.example-grid { + .grid-default { + display: grid; + grid-template-columns: repeat(var(--grid-columns), 1fr); + gap: var(--grid-gap-md); + } + + .grid-6-cols-lg { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: var(--grid-gap-lg); + } +} + +/* Пример использования соотношения сторон */ +.example-aspect-ratio { + .image-square { + position: relative; + } + .image-square::before { + content: ""; + display: block; + padding-top: 100%; + } + .image-square > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + + .image-landscape { + position: relative; + } + .image-landscape::before { + content: ""; + display: block; + padding-top: 56.25%; /* 16:9 */ + } + .image-landscape > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + + .image-portrait { + position: relative; + } + .image-portrait::before { + content: ""; + display: block; + padding-top: 133.333%; /* 3:4 */ + } + .image-portrait > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } +} \ No newline at end of file diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index e4aca2a5676..56675cf98da 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -15,12 +15,13 @@ /* CLEAR */ a { - min-width: 0; + @include prevent-overflow; font: inherit; font-weight: 500; text-decoration: none; color: var(--theme-content-color); outline: none; + cursor: pointer; &:hover { color: var(--theme-caption-color); @@ -45,7 +46,8 @@ a { &.stealth { display: inline-flex; align-items: center; - width: 100%; + width: $full-width; + min-width: 0; } } @@ -64,7 +66,7 @@ button { user-select: none; } input { - min-width: 0; + @include prevent-overflow; font: inherit; background-color: transparent; outline: none; @@ -137,13 +139,12 @@ p { &:visited { color: var(--theme-link-color); } } } -p:first-child { margin-block-start: 0; } // First and last padding +p:first-child { margin-block-start: 0; } p:last-child { margin-block-end: 0; } .p-inline { overflow-wrap: break-word; word-wrap: break-word; - // hyphens: auto; line-height: 150%; &.contrast { color: var(--global-primary-TextColor); } @@ -180,7 +181,8 @@ a.noBold { .float-left-box { box-sizing: border-box; - width: 100%; + width: $full-width; + min-width: 0; float: left; } diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss index da3f26d79e2..f31930bf495 100644 --- a/packages/theme/styles/_text-editor.scss +++ b/packages/theme/styles/_text-editor.scss @@ -9,7 +9,6 @@ .text-editor-view, .text-markup-view { - // overflow-y: auto; color: var(--theme-text-primary-color); margin: 0.25rem 0; @@ -79,7 +78,6 @@ display: block; } - li p { margin: 0; } @@ -198,41 +196,6 @@ .collaboration-cursor__caret { display: flex; justify-content: center; - cursor: text; - height: 110%; - width: 8px; - top: -2px; - left: -4px; - position: absolute; - - &::after { - content: ''; - position: absolute; - border-color: inherit; - border-style: solid; - width: 0; - height: 0; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top-width: 4px; - border-bottom: 0; - } - } - - cmark { - border-top: 1px solid lightblue; - border-bottom: 1px solid lightblue; - border-radius: 2px; - } - - span.insertion { - border-top: 1px solid lightblue; - border-bottom: 1px solid lightblue; - border-radius: 2px; - } - - span.deletion { - text-decoration: line-through; } } diff --git a/packages/theme/styles/_vars.scss b/packages/theme/styles/_vars.scss index 7fb56b667de..d6c7c31fcb9 100644 --- a/packages/theme/styles/_vars.scss +++ b/packages/theme/styles/_vars.scss @@ -13,6 +13,104 @@ // limitations under the License. // +// Common variables for components and styles + +// Map of avatar sizes (moved from components/core/_variables.scss) +$avatar-sizes: ( + "xx-small": (.75rem, .375rem), + "inline": (.875rem, .525rem), + "tiny": (1.125rem, .625rem), + "card": (1.25rem, .75rem), + "x-small": (1.5rem, .875rem), + "smaller": (1.75rem, 1rem), + "small": (2rem, 1.125rem), + "medium": (2.5rem, 1.375rem), + "large": (4.5rem, 2.75rem), + "x-large": (7.5rem, 4.5rem), + "xxl": (10rem, 6rem) +); + +// Variables for replacing simple mixins for sizes +$full-width: 100%; +$fit-width: fit-content; + +// Breakpoints for media queries +$breakpoints: ( + "small": 600px, + "medium": 900px, + "large": 1200px +); + +// Variables for standard spacing (moved from components/core/_variables.scss) +$spacing: ( + "0_25": 0.25rem, + "0_5": 0.5rem, + "0_75": 0.75rem, + "1": 1rem, + "1_5": 1.5rem, + "2": 2rem, + "2_5": 2.5rem, + "3": 3rem, + "4": 4rem +); + +// New variables +// Transition speeds +$transition-speeds: ( + "fast": 0.15s, + "normal": 0.3s, + "slow": 0.45s +); + +// Z-index levels +$z-indexes: ( + "base": 1, + "dropdown": 1000, + "sticky": 1020, + "modal": 1030, + "popover": 1040, + "tooltip": 1050 +); + +// Typography +$font-weights: ( + "normal": 400, + "medium": 500, + "semibold": 600, + "bold": 700 +); + +$font-sizes: ( + "xs": 0.75rem, // 12px + "sm": 0.875rem, // 14px + "md": 1rem, // 16px + "lg": 1.125rem, // 18px + "xl": 1.25rem, // 20px + "2xl": 1.5rem // 24px +); + +$line-heights: ( + "tight": 1.25, + "normal": 1.5, + "loose": 1.75 +); + +// Grid system +$grid-columns: 12; +$grid-gaps: ( + "sm": 0.5rem, + "md": 1rem, + "lg": 2rem +); + +// Aspect ratios +$aspect-ratios: ( + "square": 1/1, + "portrait": 3/4, + "landscape": 16/9, + "widescreen": 21/9 +); + * { /** Space & Dimensions **/ @@ -73,4 +171,57 @@ --global-modal-ShadowSpread: 0.25rem; --global-modal-ShadowX: 0; --global-modal-ShadowY: 1.5rem; + + /** Transitions **/ + --transition-fast: 0.15s; + --transition-normal: 0.3s; + --transition-slow: 0.45s; + + /** Z-index layers **/ + --z-base: 1; + --z-dropdown: 1000; + --z-sticky: 1020; + --z-modal: 1030; + --z-popover: 1040; + --z-tooltip: 1050; + + /** Typography **/ + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-md: 1rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + --font-size-2xl: 1.5rem; + + --line-height-tight: 1.25; + --line-height-normal: 1.5; + --line-height-loose: 1.75; + + /** Grid system **/ + --grid-columns: 12; + --grid-gap-sm: 0.5rem; + --grid-gap-md: 1rem; + --grid-gap-lg: 2rem; + + /** Aspect ratios **/ + --aspect-ratio-square: 1/1; + --aspect-ratio-portrait: 3/4; + --aspect-ratio-landscape: 16/9; + --aspect-ratio-widescreen: 21/9; + + /** Focus states **/ + --focus-ring-color: rgba(81, 144, 236, 0.5); + --focus-ring-width: 3px; + --focus-ring-offset: 2px; + + /** Scrollbars **/ + --scrollbar-width: 6px; + --scrollbar-track-color: transparent; + --scrollbar-thumb-color: var(--theme-navpanel-divider); + --scrollbar-thumb-hover-color: var(--theme-navpanel-border); } diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss index 79798aa588b..6a00441d39e 100644 --- a/packages/theme/styles/button.scss +++ b/packages/theme/styles/button.scss @@ -1,22 +1,44 @@ .hulyButton { display: inline-flex; - justify-content: center; align-items: center; - flex-shrink: 0; - gap: var(--spacing-1); + justify-content: center; + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-4); + @include prevent-overflow; + height: var(--button-height); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight-medium); + line-height: var(--line-height); + text-align: center; + white-space: nowrap; + cursor: pointer; + user-select: none; border: 1px solid transparent; + border-radius: var(--small-focus-BorderRadius); + transition: all var(--transition-duration) var(--transition-timing); + + &.full { + width: $full-width; min-width: 0; + } + + &.fit { + width: $fit-width; min-width: 0; + } + + &.fixed { + @include fixed-width(var(--button-width)); + } &:not(:disabled, .disabled, .loading) { cursor: pointer; } &.inheritFont { font: inherit; } .icon { - display: flex; - align-items: center; - justify-content: center; + @include flex-center; min-width: var(--spacing-2_5); min-height: var(--spacing-2_5); } - span { white-space: nowrap; } + span { @include ellipsis; } &:focus { outline: 2px solid var(--global-focus-BorderColor); @@ -192,10 +214,8 @@ cursor: pointer; &-label { - white-space: nowrap; + @include ellipsis; word-break: break-all; - text-overflow: ellipsis; - overflow: hidden; min-width: 0; font-weight: 500; } diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 8d3ec1dffc4..949f0b72f32 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -45,19 +45,19 @@ .font-medium-12, .font-caps-medium-12, .font-bold-12 { - font-size: 0.75rem; + font-size: var(--font-size-xs); } .font-regular-14, .font-medium-14, .font-bold-14, .paragraph-regular-14 { - font-size: 0.875rem; + font-size: var(--font-size-sm); } .font-regular-11, .font-regular-12, .font-regular-14, .paragraph-regular-14 { - font-weight: 400; + font-weight: var(--font-weight-normal); } .font-medium-11, .font-medium-12, @@ -65,29 +65,29 @@ .font-medium-14, .heading-medium-16, .heading-medium-20 { - font-weight: 500; + font-weight: var(--font-weight-medium); } .heading-ui-H2 { - font-weight: 600; + font-weight: var(--font-weight-semibold); } .font-bold-12, .font-bold-14, .heading-bold-16, .heading-bold-20 { - font-weight: 700; + font-weight: var(--font-weight-bold); } .heading-medium-16, .heading-bold-16 { - font-size: 1rem; + font-size: var(--font-size-md); // line-height: 1.125rem; } .heading-ui-H2 { - font-size: 1.125rem; + font-size: var(--font-size-lg); line-height: 1.25rem; } .heading-medium-20, .heading-bold-20 { - font-size: 1.25rem; + font-size: var(--font-size-xl); line-height: 1.5rem; } .paragraph-regular-14 { @@ -98,6 +98,23 @@ text-transform: uppercase; } +/* Новые классы типографики на основе переменных */ +.text-xs { font-size: var(--font-size-xs); } +.text-sm { font-size: var(--font-size-sm); } +.text-md { font-size: var(--font-size-md); } +.text-lg { font-size: var(--font-size-lg); } +.text-xl { font-size: var(--font-size-xl); } +.text-2xl { font-size: var(--font-size-2xl); } + +.font-normal { font-weight: var(--font-weight-normal); } +.font-medium { font-weight: var(--font-weight-medium); } +.font-semibold { font-weight: var(--font-weight-semibold); } +.font-bold { font-weight: var(--font-weight-bold); } + +.leading-tight { line-height: var(--line-height-tight); } +.leading-normal { line-height: var(--line-height-normal); } +.leading-loose { line-height: var(--line-height-loose); } + /* Panels */ * { --app-panel-width: 4.25rem; @@ -111,15 +128,14 @@ &.vertical { flex-direction: column; - min-width: var(--app-panel-width); - width: var(--app-panel-width); + @include fixed-width(var(--app-panel-width)); height: 100%; border-right: 1px solid var(--theme-navpanel-divider); } &.horizonatl { min-height: var(--app-panel-width); height: var(--app-panel-width); - width: 100%; + width: $full-width; min-width: 0; border-top: 1px solid var(--theme-navpanel-divider); } &.lastDivider { border-color: var(--theme-navpanel-border); } @@ -132,6 +148,7 @@ display: flex; height: 100%; min-height: 0; + @include prevent-overflow; &.header { background-color: var(--theme-comp-header-color); } &.filled { background-color: var(--theme-bg-color); } @@ -141,9 +158,7 @@ } .antiPanel-navigator { position: relative; - min-width: 12.5rem; - max-width: 22.5rem; - width: 17.5rem; + @include fixed-width(17.5rem, 12.5rem, 22.5rem); &:not(.second) { background-color: var(--theme-navpanel-color); } &.second.float { @@ -196,16 +211,9 @@ .antiSeparator { display: none; } &.fly { - width: calc(100% - 3.5rem) !important; + @include fixed-width(calc(100% - 3.5rem)); filter: var(--theme-navpanel-shadow-mobile); } - &.second.float.fly { - height: calc(100% - var(--status-bar-height) - var(--app-panel-width) - 3.5rem); - } - &.fly:not(.second) { - top: var(--status-bar-height); - height: calc(100% - var(--status-bar-height) - var(--app-panel-width)); - } } } } diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index edeefdf2578..f8a6b57daf3 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -13,2452 +13,4 @@ // 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 { - 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"); - } - - &.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; } - } -} - -/* 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); - - &.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%; - 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; - } - .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; - - &.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; - // 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 */ -.listGrid { - position: relative; - display: flex; - align-items: center; - padding: 0 2.5rem 0 0.25rem; - width: 100%; - height: 2.75rem; - min-height: 2.75rem; - color: var(--theme-caption-color); - background-color: var(--theme-list-row-color); - - &.row { - 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 var(--theme-list-subheader-divider); - } - &.row.lastCat { - border-radius: 0 0 0.25rem 0.25rem; - border-bottom: 1px solid var(--theme-list-border-color); - } - - &.compactMode { - padding: 0 1.125rem 0 0.25rem; - } - &.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; - } -} - -/* 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; } -} +@import 'components/index'; \ No newline at end of file diff --git a/packages/theme/styles/components/_index.scss b/packages/theme/styles/components/_index.scss new file mode 100644 index 00000000000..98b41e12bbf --- /dev/null +++ b/packages/theme/styles/components/_index.scss @@ -0,0 +1,43 @@ +// Основной файл, импортирующий все компоненты +// Сгенерировано автоматически в рамках декомпозиции components.scss + +// Core +@import 'core/colors'; +@import 'core/variables'; +@import '../mixins.scss'; +@import 'core/base'; + +// Layout components +@import 'layout/component'; +@import 'layout/header'; +@import 'layout/modal'; + +// UI components +@import 'ui/avatar'; +@import 'ui/accordion'; +@import 'ui/chip'; +@import 'ui/hotkey'; +@import 'ui/antiComponent'; +@import 'ui/component_box'; + +// Forms +@import 'forms/radio'; +@import 'forms/select'; +@import 'forms/wrapper'; + +// Data +@import 'data/table'; +@import 'data/list'; +@import 'data/todo'; +@import 'data/presenter'; +@import 'data/list_view'; +@import 'data/column'; + +// Specific components +@import 'specific/inbox'; +@import 'specific/kanban'; +@import 'specific/states_bar'; +@import 'specific/contact_card'; + +// Utilities +@import 'util/wrapper'; \ No newline at end of file diff --git a/packages/theme/styles/components/core/_base.scss b/packages/theme/styles/components/core/_base.scss new file mode 100644 index 00000000000..084698aff29 --- /dev/null +++ b/packages/theme/styles/components/core/_base.scss @@ -0,0 +1,16 @@ +// +// 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. +// + +// Base styles used across multiple components diff --git a/packages/theme/styles/components/core/_colors.md b/packages/theme/styles/components/core/_colors.md new file mode 100644 index 00000000000..f6014c3abf2 --- /dev/null +++ b/packages/theme/styles/components/core/_colors.md @@ -0,0 +1,107 @@ +# Huly Unified Color Variables System + +This document describes the unified color variables system for Huly components. + +## Overview + +The Huly color system is based on the following principles: +- Semantic variables describing the purpose of colors +- Maps for organizing colors by categories +- Functions and mixins for convenient color access + +## Color System Structure + +The system is organized into several categories: + +1. **Background (bg)** - colors for background elements +2. **Text (text)** - colors for text elements +3. **Borders (border)** - colors for borders and dividers +4. **Buttons (button)** - colors for buttons and interactive elements +5. **Statuses (status)** - colors for status indicators + +## Using the System + +### Variables + +```scss +// Using predefined variables +.my-element { + background-color: $bg-panel; + color: $text-primary; + border: 1px solid $border-divider; +} +``` + +### Function huly-color + +```scss +// Using the huly-color function +.my-element { + background-color: huly-color('bg', 'panel'); + color: huly-color('text', 'primary'); + border: 1px solid huly-color('border', 'divider'); +} +``` + +### Mixins + +```scss +// Using mixins +.my-element { + @include bg-color('panel'); + @include text-color('primary'); + @include border-color('divider'); +} +``` + +## Complete Color List + +### Background (bg) +- **default**: main background color +- **accent**: accent background color +- **dark**: dark background color +- **panel**: panel color +- **comp-header**: component header color +- **navpanel**: navigation panel color +- **popup**: popup color +- **table-header**: table header color +- **table-row**: table row color + +### Text (text) +- **primary**: main text color +- **secondary**: secondary text color +- **tertiary**: tertiary text color +- **caption**: heading color +- **disabled**: color for disabled elements +- **link**: link color + +### Borders (border) +- **default**: main border color +- **divider**: divider color +- **navpanel**: divider color in navigation panel +- **focus**: border color on focus +- **table**: table border color + +### Buttons (button) +- **default**: main button color +- **hovered**: hover color +- **pressed**: pressed color +- **focused**: focus color +- **disabled**: disabled button color +- **primary-text**: text color for primary buttons +- **primary-default**: main color for primary buttons +- **primary-hovered**: hover color for primary buttons +- **primary-pressed**: pressed color for primary buttons + +### Statuses (status) +- **online**: "online" status +- **offline**: "offline" status +- **busy**: "busy" status +- **dnd**: "do not disturb" status + +## Provided Mixins + +- **@bg-color($type)**: sets background color +- **@text-color($type)**: sets text color +- **@border-color($type)**: sets border color +- **@button-color($type)**: sets button color \ No newline at end of file diff --git a/packages/theme/styles/components/core/_colors.scss b/packages/theme/styles/components/core/_colors.scss new file mode 100644 index 00000000000..12aa67e168b --- /dev/null +++ b/packages/theme/styles/components/core/_colors.scss @@ -0,0 +1,137 @@ +// +// 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. +// + +// Import global colors +@import '../../_colors'; + +/* + * Unified color variable system for components + * These variables should be used in all components + */ + +// Base component colors +$huly-colors: ( + // Main background colors + 'bg': ( + 'default': var(--theme-bg-color), + 'accent': var(--theme-bg-accent-color), + 'dark': var(--theme-bg-dark-color), + 'panel': var(--theme-panel-color), + 'comp-header': var(--theme-comp-header-color), + 'navpanel': var(--theme-navpanel-color), + 'popup': var(--theme-popup-color), + 'table-header': var(--theme-table-header-color), + 'table-row': var(--theme-table-row-color) + ), + + // Main text colors + 'text': ( + 'primary': var(--theme-content-color), + 'secondary': var(--theme-dark-color), + 'tertiary': var(--theme-halfcontent-color), + 'caption': var(--theme-caption-color), + 'disabled': var(--theme-trans-color), + 'link': var(--theme-link-color) + ), + + // Border and divider colors + 'border': ( + 'default': var(--theme-button-border), + 'divider': var(--theme-divider-color), + 'navpanel': var(--theme-navpanel-divider), + 'focus': var(--theme-editbox-focus-border), + 'table': var(--theme-table-border-color) + ), + + // Button colors + 'button': ( + 'default': var(--theme-button-default), + 'hovered': var(--theme-button-hovered), + 'pressed': var(--theme-button-pressed), + 'focused': var(--theme-button-focused), + 'disabled': var(--theme-button-disabled), + 'primary-text': var(--primary-button-color), + 'primary-default': var(--primary-button-default), + 'primary-hovered': var(--primary-button-hovered), + 'primary-pressed': var(--primary-button-pressed) + ), + + // Status colors + 'status': ( + 'online': var(--activity-status-active), + 'offline': var(--activity-status-away), + 'busy': var(--activity-status-busy), + 'dnd': var(--activity-status-dnd) + ) +); + +// Function to get color from the map +@function huly-color($category, $type) { + @return map-get(map-get($huly-colors, $category), $type); +} + +// Color variables for use in components +$bg-default: huly-color('bg', 'default'); +$bg-panel: huly-color('bg', 'panel'); +$bg-comp-header: huly-color('bg', 'comp-header'); +$bg-navpanel: huly-color('bg', 'navpanel'); +$bg-popup: huly-color('bg', 'popup'); +$bg-table-header: huly-color('bg', 'table-header'); +$bg-table-row: huly-color('bg', 'table-row'); + +$text-primary: huly-color('text', 'primary'); +$text-secondary: huly-color('text', 'secondary'); +$text-tertiary: huly-color('text', 'tertiary'); +$text-caption: huly-color('text', 'caption'); +$text-disabled: huly-color('text', 'disabled'); +$text-link: huly-color('text', 'link'); + +$border-default: huly-color('border', 'default'); +$border-divider: huly-color('border', 'divider'); +$border-navpanel: huly-color('border', 'navpanel'); +$border-focus: huly-color('border', 'focus'); +$border-table: huly-color('border', 'table'); + +$button-default: huly-color('button', 'default'); +$button-hovered: huly-color('button', 'hovered'); +$button-pressed: huly-color('button', 'pressed'); +$button-focused: huly-color('button', 'focused'); +$button-disabled: huly-color('button', 'disabled'); +$button-primary-text: huly-color('button', 'primary-text'); +$button-primary-default: huly-color('button', 'primary-default'); +$button-primary-hovered: huly-color('button', 'primary-hovered'); +$button-primary-pressed: huly-color('button', 'primary-pressed'); + +$status-online: huly-color('status', 'online'); +$status-offline: huly-color('status', 'offline'); +$status-busy: huly-color('status', 'busy'); +$status-dnd: huly-color('status', 'dnd'); + +// Mixins for colors +@mixin bg-color($type: 'default') { + background-color: huly-color('bg', $type); +} + +@mixin text-color($type: 'primary') { + color: huly-color('text', $type); +} + +@mixin border-color($type: 'default') { + border-color: huly-color('border', $type); +} + +@mixin button-color($type: 'default') { + background-color: huly-color('button', $type); +} \ No newline at end of file diff --git a/packages/theme/styles/components/core/_variables.scss b/packages/theme/styles/components/core/_variables.scss new file mode 100644 index 00000000000..b4e72f78582 --- /dev/null +++ b/packages/theme/styles/components/core/_variables.scss @@ -0,0 +1,59 @@ +// +// 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. +// + +// Import common variables +@import '../../vars'; + +// Additional variables, specific to components +// Variables $avatar-sizes and $spacing moved to _vars.scss + +// Additional sizes only for avatars +$avatar-small-font-sizes: ( + 'xx-small': 10px, + 'inline': 12px, + 'tiny': 16px, + 'card': 18px, + 'x-small': 22px, + 'smaller': 25px, +); + +// Map of status marker sizes +$status-sizes: ( + 'xx-small': (4px, 3px, 0, 0), + 'inline': (4px, 4px, 0, 0), + 'tiny': (6px, 5px, 0, 0), + 'card': (6px, 6px, 0, 0), + 'x-small': (8px, 7px, 0, 0), + 'smaller': (9px, 8px, 0, 0), + 'small': (10px, 9px, 0, 0), + 'medium': (13px, 11px, 0, 0), + 'large': (36.5%, 37%, -.125rem, -2px) +); + +// Map of offsets for combined avatars +$combine-margins: ( + 'inline': 0.875rem, + 'tiny': 1.13rem, + 'card': 1.25rem, + 'x-small': 1.5rem, + 'smaller': 1.75rem, + 'small': 2rem, + 'medium': 2.25rem, + 'large': 4.5rem, + 'x-large': 7.5rem +); + +// Small avatars for masking +$small-avatars: 'inline', 'tiny', 'card', 'x-small', 'smaller', 'small'; diff --git a/packages/theme/styles/components/data/_column.scss b/packages/theme/styles/components/data/_column.scss new file mode 100644 index 00000000000..0685a9cbc01 --- /dev/null +++ b/packages/theme/styles/components/data/_column.scss @@ -0,0 +1,70 @@ +// +// 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. +// + +/* AC Column */ +.ac-column { + display: flex; + flex-direction: column; + flex-grow: 1; + border-radius: 0.125rem; + padding: 0.5rem; + width: 18rem; + flex-basis: 0; + border: 1px solid var(--theme-divider-color); + font-size: 0.75rem; + + &__list-item { + display: flex; + flex-direction: column; + min-height: 0.75rem; + cursor: pointer; + user-select: none; + border-radius: 0.125rem; + padding: 0.25rem 0.5rem; + overflow: hidden; + background-color: var(--theme-button-default); + margin-top: 0.25rem; + position: relative; + + &-drag { + opacity: 0.7; + transform: rotate(-3deg); + } + + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: transparent; + transition-property: background-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.15s; + z-index: 0; + pointer-events: none; + } + + &:hover:before { + background-color: rgba(255, 255, 255, 0.05); + } + + &.selected { + background-color: var(--accent-hover-bg); + color: var(--accent-hover-color); + } + } +} \ No newline at end of file diff --git a/packages/theme/styles/components/data/_list.scss b/packages/theme/styles/components/data/_list.scss new file mode 100644 index 00000000000..7188f816eef --- /dev/null +++ b/packages/theme/styles/components/data/_list.scss @@ -0,0 +1,52 @@ +// +// 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. +// + +/* List Component */ +.antiList-cells { + display: grid; + grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(200px, 1fr)); + column-gap: 2rem; + padding: 0.5rem 1.25rem; + border-bottom: 1px solid var(--theme-divider-color); + + &.header { + position: sticky; + top: 0; + z-index: 2; + padding: 0.25rem 1.25rem; + background-color: var(--theme-list-header-color); + } + &.tiny { + grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); + column-gap: 1rem; + padding: 0 1.25rem; + } + &.fixed { + display: flex; + flex-wrap: wrap; + align-items: center; + + > div { + flex: 1 0 auto; + width: 8rem; + } + } + &.no-pad { + padding: 0; + } + &.centered { + justify-content: center; + } +} diff --git a/packages/theme/styles/components/data/_list_view.scss b/packages/theme/styles/components/data/_list_view.scss new file mode 100644 index 00000000000..ce0772a315c --- /dev/null +++ b/packages/theme/styles/components/data/_list_view.scss @@ -0,0 +1,233 @@ +// +// 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. +// + +/* ListView */ +.listGrid { + position: relative; + display: flex; + align-items: center; + padding: 0 2.5rem 0 0.25rem; + width: 100%; + height: 2.75rem; + min-height: 2.75rem; + color: var(--theme-caption-color); + background-color: var(--theme-list-row-color); + + &.row { + 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 var(--theme-list-subheader-divider); + } + &.row.lastCat { + border-radius: 0 0 0.25rem 0.25rem; + border-bottom: 1px solid var(--theme-list-border-color); + } + + &.compactMode { + padding: 0 1.125rem 0 0.25rem; + } + &.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; + } +} + +/* 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; +} \ No newline at end of file diff --git a/packages/theme/styles/components/data/_presenter.scss b/packages/theme/styles/components/data/_presenter.scss new file mode 100644 index 00000000000..12788e72984 --- /dev/null +++ b/packages/theme/styles/components/data/_presenter.scss @@ -0,0 +1,39 @@ +// +// 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. +// + +/* 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); } +} diff --git a/packages/theme/styles/components/data/_table.scss b/packages/theme/styles/components/data/_table.scss new file mode 100644 index 00000000000..56d68a0a4ac --- /dev/null +++ b/packages/theme/styles/components/data/_table.scss @@ -0,0 +1,143 @@ +// +// 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. +// + +/* + * Общие стили для таблиц + * Эти стили должны быть общими для всех таблиц в приложении + */ + +// Миксины для стилей таблиц +@mixin table-container { + @include flex-column; + align-items: flex-start; + align-self: stretch; + @include bg-color('table-row'); + border: 1px solid $border-divider; + border-radius: var(--large-BorderRadius); +} + +@mixin table-header { + @include flex-between; + align-self: stretch; + flex-shrink: 0; + min-height: var(--global-max-Size); + text-transform: uppercase; + @include text-color('secondary'); +} + +@mixin table-content { + display: flex; + align-items: flex-start; + align-self: stretch; + flex-shrink: 0; + @include prevent-overflow; + min-height: 0; + border-top: 1px solid $border-divider; +} + +@mixin table-row { + display: flex; + align-items: center; + align-self: stretch; + flex-grow: 1; + margin: 0; + @include prevent-overflow; + border-radius: var(--small-BorderRadius); + border: none; + outline: none; +} + +@mixin table-row-hover { + &.hovered, + &:not(.disableMouseOver):hover { + @include bg-color('table-header'); + } +} + +@mixin table-row-selected { + @include bg-color('table-header'); + + .hulyTableAttr-content__row-icon, + .hulyTableAttr-content__row-arrow, + .hulyTableAttr-content__row-label { + color: $text-link; + } + .hulyTableAttr-content__row-type { + @include text-color('primary'); + } +} + +// Стили для компонентов стандартной таблицы +.hulyTable { + &-container { + @include table-container; + } + + &-header { + @include table-header; + + &.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; + @include fixed-width(var(--global-min-Size)); + height: var(--global-min-Size); + } + + .buttons-group { + @include flex-center; + gap: var(--spacing-1); + @include prevent-overflow; + min-height: 0; + } + } + + &-content { + @include table-content; + + &:not(.withTitle) { + flex-direction: column; + } + + &.withTitle { + gap: var(--spacing-1); + } + + &__row { + @include table-row; + + &.selected { + @include table-row-selected; + } + + &:hover { + @include table-row-hover; + } + } + } +} diff --git a/packages/theme/styles/components/data/_todo.scss b/packages/theme/styles/components/data/_todo.scss new file mode 100644 index 00000000000..6bd01dd738d --- /dev/null +++ b/packages/theme/styles/components/data/_todo.scss @@ -0,0 +1,148 @@ +// +// 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. +// + +.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; + } + } +} + +/* 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; } +} diff --git a/packages/theme/styles/components/forms/_radio.scss b/packages/theme/styles/components/forms/_radio.scss new file mode 100644 index 00000000000..2040bff0c28 --- /dev/null +++ b/packages/theme/styles/components/forms/_radio.scss @@ -0,0 +1,189 @@ +// +// 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. +// + +/* 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); + } +} diff --git a/packages/theme/styles/components/forms/_select.scss b/packages/theme/styles/components/forms/_select.scss new file mode 100644 index 00000000000..83b18185553 --- /dev/null +++ b/packages/theme/styles/components/forms/_select.scss @@ -0,0 +1,199 @@ +// +// 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. +// + +/* Select component */ +.antiSelect { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + width: 100%; + min-height: 1.875rem; + padding: 0 0.5rem; + font-size: 0.75rem; + color: var(--theme-caption-color); + border: 1px solid var(--theme-divider-color); + border-radius: 0.125rem; + background-color: var(--theme-button-default); + transition-property: background-color, box-shadow, border-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.15s; + cursor: pointer; + min-width: 3rem; + + &:hover:not(.disabled) { + background-color: var(--theme-button-hovered); + } + + &:active:not(.disabled) { + background-color: var(--theme-button-pressed); + } + + &:focus-visible:not(.disabled) { + background-color: var(--theme-button-pressed); + outline: 1px solid var(--primary-button-default); + outline-offset: -1px; + box-shadow: var(--focus-shadow); + } + + .clear { + opacity: 0; + } + &:hover { + .clear { + opacity: 1; + } + } + + .icon { + flex-shrink: 0; + width: 1rem; + height: 1rem; + color: var(--theme-dark-color); + } + &__arrow { + align-self: normal; + display: flex; + align-items: center; + overflow: hidden; + width: 0.875rem; + height: 100%; + margin-left: auto; + color: var(--theme-dark-color); + + &-icon { + width: 0.875rem; + height: 0.875rem; + } + } + &__value { + flex-grow: 1; + overflow: hidden; + padding: 0 0.75rem 0 0.25rem; + height: 100%; + width: calc(100% - 1.25rem); + text-overflow: ellipsis; + white-space: nowrap; + display: flex; + align-items: center; + + > div { + white-space: normal; + width: 100%; + } + } + &__chips { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.25rem; + margin: 0.25rem 0; + width: 100%; + } + &__placeholder { + color: var(--theme-dark-color); + } + &.disabled { + color: var(--theme-dark-color); + border-color: var(--theme-divider-color); + background-color: var(--theme-button-disabled); + cursor: default; + pointer-events: none; + } + &.invalid { + outline: 1px solid var(--theme-status-critical); + outline-offset: -1px; + } + &.editable { + width: 100%; + height: 2.5rem; + border: none; + padding: 0 0.5rem; + border-radius: 0; + } + &.tiny { + height: 1.25rem; + } + &.small { + min-height: 1.5rem; + font-size: 0.625rem; + } + &.medium { + min-height: 2rem; + } + &.large { + min-height: 2.5rem; + } + + &.no-border { + border: 1px solid transparent; + background-color: inherit; + + &:hover:not(.disabled) { + background-color: var(--theme-menu-hover); + } + + &:active:not(.disabled) { + background-color: var(--theme-button-pressed); + } + } +} + +.antiOption { + display: flex; + align-items: center; + width: auto; + min-height: 1.75rem; + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + color: var(--theme-caption-color); + border-radius: 0.125rem; + background-color: inherit; + cursor: pointer; + margin: 0; + user-select: none; + + .icon { + width: 0.875rem; + height: 0.875rem; + margin-right: 0.5rem; + flex-shrink: 0; + } + + &.selected { + background: var(--theme-menu-focused); + &:hover { + background: var(--theme-menu-focused-hover); + } + } + + &:hover { + background: var(--theme-menu-hover); + } + + &.disabled { + color: var(--theme-dark-color); + cursor: default; + pointer-events: none; + } + + &__label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: flex; + align-items: center; + } +} diff --git a/packages/theme/styles/components/forms/_wrapper.scss b/packages/theme/styles/components/forms/_wrapper.scss new file mode 100644 index 00000000000..886f08a3f60 --- /dev/null +++ b/packages/theme/styles/components/forms/_wrapper.scss @@ -0,0 +1,125 @@ +// +// 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. +// + +/* Wrapper component */ +.antiWrapper { + display: grid; + row-gap: 0.5rem; + position: relative; + + &.full { + width: 100%; + } + + &__label { + user-select: none; + display: flex; + align-items: center; + justify-content: space-between; + + &-title { + display: flex; + align-items: center; + font-size: 0.75rem; + color: var(--theme-content-color); + a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .icon { + margin-right: 0.25rem; + width: 0.75rem; + height: 0.75rem; + color: var(--theme-content-color); + } + } + + &__description { + margin-top: -0.25rem; + font-size: 0.75rem; + color: var(--theme-dark-color); + } + + &__tip { + position: absolute; + margin-top: 0; + z-index: 1; + background-color: var(--theme-bg-color); + border: 1px solid var(--theme-button-border); + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + color: var(--theme-content-color); + border-radius: 0.25rem; + max-width: 12rem; + + &-icon { + position: absolute; + z-index: 1; + top: -2px; + left: calc(1rem - 4px); + transform: rotate(45deg); + width: 8px; + height: 8px; + background-color: inherit; + border-top: 1px solid var(--theme-button-border); + border-left: 1px solid var(--theme-button-border); + } + } + + &__error { + padding-top: 0.25rem; + padding-left: 0.25rem; + font-size: 0.75rem; + line-height: 0.875rem; + color: var(--theme-status-critical); + } + + &__note { + padding-top: 0.25rem; + padding-left: 0.25rem; + font-size: 0.75rem; + line-height: 0.875rem; + color: var(--theme-dark-color); + } + + &-focus { + >.focused { + outline: 1px solid var(--primary-button-default); + outline-offset: -1px; + box-shadow: var(--focus-shadow); + } + } + + input, + select, + textarea { + transition-property: box-shadow, border-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.15s; + } + + &.invalid { + input, + select, + textarea, + .antiSelect { + outline: 1px solid var(--theme-status-critical); + outline-offset: -1px; + } + } +} diff --git a/packages/theme/styles/components/layout/_component.scss b/packages/theme/styles/components/layout/_component.scss new file mode 100644 index 00000000000..86c0a4a7673 --- /dev/null +++ b/packages/theme/styles/components/layout/_component.scss @@ -0,0 +1,122 @@ +// +// 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 { + @include flex-column; + flex-grow: 1; + height: 100%; + min-height: 0; + @include prevent-overflow; + border: 1px solid $border-divider; + border-radius: var(--small-focus-BorderRadius); + + &:not(.modal) { + @include bg-color('panel'); + } + &.modal { + overflow: hidden; + @include bg-color('comp-header'); + } + &.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; + } +} + +// Common styles for content components +%huly-flex-base { + display: flex; + width: $full-width; min-width: 0; + min-height: 0; +} + +.hulyComponent-content, +.hulyComponent-content__container, +.hulyComponent-content__column, +.hulyComponent-content__column-group, +.hulyComponent-content__header, +.hulyComponent-content__navHeader { + @extend %huly-flex-base; +} + +.hulyComponent-content { + &:not(.noShrink) { + flex-shrink: 0; + } + &:not(.withoutMaxWidth) { + max-width: 64rem; + width: auto; + } + &.gap { + gap: var(--spacing-4); + } + &__container { + justify-content: stretch; + height: 100%; + } + &__container:not(.columns), + &:not(.columns) { + flex-direction: column; + } + &__column { + @include flex-column; + height: 100%; + + &.navigation .hulyNavItem-container, + .hulyNavItem-container { + margin: 0 0.75rem; + } + &.content { + align-items: stretch; + } + &-group { + @include flex-column; + flex-shrink: 0; + height: fit-content; + } + } + &__navHeader { + @include flex-column; + flex-shrink: 0; + + &.divide { + border-bottom: 1px solid $border-navpanel; + } + &-menu { + @include flex-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 { + @include flex-between; + align-self: stretch; + padding: 0 0 var(--spacing-1) var(--spacing-1_5); + } + textarea { + font-weight: 400 !important; + @include text-color('tertiary'); + } +} diff --git a/packages/theme/styles/components/layout/_header.scss b/packages/theme/styles/components/layout/_header.scss new file mode 100644 index 00000000000..a1573534b83 --- /dev/null +++ b/packages/theme/styles/components/layout/_header.scss @@ -0,0 +1,145 @@ +// +// 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. +// + +/* 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); + } + &.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); + + &.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; } + } +} diff --git a/packages/theme/styles/components/layout/_modal.scss b/packages/theme/styles/components/layout/_modal.scss new file mode 100644 index 00000000000..69cb70402d8 --- /dev/null +++ b/packages/theme/styles/components/layout/_modal.scss @@ -0,0 +1,159 @@ +// +// 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. +// + +/* 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: $full-width; 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); + } + + &.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; + width: auto; + flex-shrink: 1; + background-color: var(--theme-popup-color); + border: 1px solid var(--theme-popup-divider); + 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 { + @include fixed-width(45rem); + } + &.medium { + @include fixed-width(37.5rem); + } + &.small { + @include fixed-width(30rem); + } + &.x-small { + @include fixed-width(25rem); + } + &.menu { + @include fixed-width(17.5rem); + } + &.full { + width: $fit-width; min-width: 0; + } + + .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); + border: 1px solid var(--theme-navpanel-divider); + border-radius: var(--small-focus-BorderRadius); + } + textarea { + font-weight: 400 !important; + color: var(--global-tertiary-TextColor) !important; + } +} diff --git a/packages/theme/styles/components/specific/_contact_card.scss b/packages/theme/styles/components/specific/_contact_card.scss new file mode 100644 index 00000000000..0608d2b4f24 --- /dev/null +++ b/packages/theme/styles/components/specific/_contact_card.scss @@ -0,0 +1,87 @@ +// +// 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. +// + +/* 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; + } + } +} diff --git a/packages/theme/styles/components/specific/_inbox.scss b/packages/theme/styles/components/specific/_inbox.scss new file mode 100644 index 00000000000..7b9b343efb1 --- /dev/null +++ b/packages/theme/styles/components/specific/_inbox.scss @@ -0,0 +1,121 @@ +// +// 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. +// + +/* 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; } + } + } +} diff --git a/packages/theme/styles/components/specific/_kanban.scss b/packages/theme/styles/components/specific/_kanban.scss new file mode 100644 index 00000000000..289020dfe36 --- /dev/null +++ b/packages/theme/styles/components/specific/_kanban.scss @@ -0,0 +1,40 @@ +// +// 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. +// + +/* 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; +} diff --git a/packages/theme/styles/components/specific/_states_bar.scss b/packages/theme/styles/components/specific/_states_bar.scss new file mode 100644 index 00000000000..f3eef5627bc --- /dev/null +++ b/packages/theme/styles/components/specific/_states_bar.scss @@ -0,0 +1,90 @@ +// +// 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. +// + +/* 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); + } + } + } +} diff --git a/packages/theme/styles/components/ui/_accordion.scss b/packages/theme/styles/components/ui/_accordion.scss new file mode 100644 index 00000000000..b65b76225e2 --- /dev/null +++ b/packages/theme/styles/components/ui/_accordion.scss @@ -0,0 +1,288 @@ +// +// 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. +// + +/* 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); + } + &.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; + } +} diff --git a/packages/theme/styles/components/ui/_antiComponent.scss b/packages/theme/styles/components/ui/_antiComponent.scss new file mode 100644 index 00000000000..c9f01b48146 --- /dev/null +++ b/packages/theme/styles/components/ui/_antiComponent.scss @@ -0,0 +1,309 @@ +// +// 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. +// + +/* 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; } + } + &.mini { + display: flex; + flex-direction: column; + } + &.mirror { + justify-content: space-between; + + &-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; + } + } + + .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; +} + +/* 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); + } +} diff --git a/packages/theme/styles/components/ui/_avatar.scss b/packages/theme/styles/components/ui/_avatar.scss new file mode 100644 index 00000000000..d5600f65201 --- /dev/null +++ b/packages/theme/styles/components/ui/_avatar.scss @@ -0,0 +1,288 @@ +// +// 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. +// + +/* Map of avatar sizes */ +$avatar-sizes: ( + 'xx-small': (.75rem, .375rem, 10px), + 'inline': (.875rem, .525rem, 12px), + 'tiny': (1.125rem, .625rem, 16px), + 'card': (1.25rem, .75rem, 18px), + 'x-small': (1.5rem, .875rem, 22px), + 'smaller': (1.75rem, 1rem, 25px), + 'small': (2rem, 1.125rem, null), + 'medium': (2.5rem, 1.375rem, null), + 'large': (4.5rem, 2.75rem, null), + 'x-large': (7.5rem, 4.5rem, null), + 'xxl': (10rem, 6rem, null), + 'full': (100%, inherit, null) +); + +/* Use definitions from core/_variables.scss */ +/* Additional sizes only for avatar */ +$avatar-small-font-sizes: ( + 'xx-small': 10px, + 'inline': 12px, + 'tiny': 16px, + 'card': 18px, + 'x-small': 22px, + 'smaller': 25px, +); + +/* Map of status marker sizes */ +$status-sizes: ( + 'xx-small': (4px, 3px, 0, 0), + 'inline': (4px, 4px, 0, 0), + 'tiny': (6px, 5px, 0, 0), + 'card': (6px, 6px, 0, 0), + 'x-small': (8px, 7px, 0, 0), + 'smaller': (9px, 8px, 0, 0), + 'small': (10px, 9px, 0, 0), + 'medium': (13px, 11px, 0, 0), + 'large': (36.5%, 37%, -.125rem, -2px) +); + +/* Map of offsets for combined avatars */ +$combine-margins: ( + 'inline': 0.875rem, + 'tiny': 1.13rem, + 'card': 1.25rem, + 'x-small': 1.5rem, + 'smaller': 1.75rem, + 'small': 2rem, + 'medium': 2.25rem, + 'large': 4.5rem, + 'x-large': 7.5rem +); + +/* Small avatars for masking */ +$small-avatars: 'inline', 'tiny', 'card', 'x-small', 'smaller', 'small'; + +/* Avatar */ +.hulyAvatar-container { + position: relative; + @include flex-center; + min-width: 0; + min-height: 0; + flex-shrink: 0; + aspect-ratio: 1; + background-color: $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: $button-primary-text; + border-color: transparent; + } + &.bordered { + @include text-color('secondary'); + border: 1px solid $border-default; + } + &.border { + border: 1px solid $bg-default; + outline: 2px solid var(--border-color); + + & > img { border: 1px solid $bg-default; } + + /* Small avatars */ + &.hulyAvatarSize-xx-small, + &.hulyAvatarSize-inline, + &.hulyAvatarSize-tiny, + &.hulyAvatarSize-card, + &.hulyAvatarSize-x-small { outline-width: 1px; } + + /* Large avatars */ + &.hulyAvatarSize-large, + &.hulyAvatarSize-x-large, + &.hulyAvatarSize-xxl { + 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 */ +@each $size, $values in $avatar-sizes { + .hulyAvatarSize-#{$size} { + @include avatar-size($size); + + @if map-has-key($avatar-small-font-sizes, $size) { + .small-font & { width: map-get($avatar-small-font-sizes, $size); } + } + } +} + +/* Special case for full-size avatar, which is not in the general map */ +.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; + } + + /* Common property for small marker sizes */ + &.xx-small, + &.inline, + &.tiny, + &.card, + &.x-small, + &.smaller, + &.small, + &.medium { + right: 0; + bottom: 0; + } + + /* Generating marker sizes */ + @each $size, $values in $status-sizes { + $width: nth($values, 1); + $small-font-width: nth($values, 2); + $right: nth($values, 3); + $small-font-right: nth($values, 4); + + &.#{$size} { + width: $width; + + @if $right != 0 { + right: $right; + bottom: $right; + + @if $small-font-right != 0 { + .small-font & { + right: $small-font-right; + bottom: $small-font-right; + width: $small-font-width; + } + } + } @else if $small-font-width != $width { + .small-font & { width: $small-font-width; } + } + } + } + + &.online { background-color: $status-online; } + &.offline { + border: 1px solid $status-offline; + + &:not(.xx-small, .inline, .tiny, .card, .x-small, .smaller, .small, .medium) { + border-width: 2px; + } + } +} + +/* CombineAvatars */ +.hulyCombineAvatars-container { + display: flex; + align-items: center; + + .hulyCombineAvatar { + /* Generating offsets for combined avatars */ + @each $size, $values in $avatar-sizes { + $width: nth($values, 1); + &.#{$size}:not(:first-child) { + margin-left: calc(1px - (#{$width} / 2)); + } + } + + /* Common style for small avatars */ + &.inline, + &.tiny, + &.card, + &.x-small { + font-size: 0.625rem; + } + + /* Masking for all except the last one */ + $mask-url: 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"); + + @each $size in $small-avatars { + &.#{$size} { + &:not(:last-child) { + mask: $mask-url no-repeat; + } + } + } + + &[data-over^='+']:last-child { + position: relative; + + &::after { + content: attr(data-over); + position: absolute; + top: 50%; + left: 50%; + @include text-color('caption'); + transform: translate(-53%, -52%); + z-index: 2; + } + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + @include bg-color('default'); + border: 1px solid $border-divider; + border-radius: 0.25rem; + opacity: 0.9; + z-index: 1; + } + } + } +} diff --git a/packages/theme/styles/components/ui/_chip.scss b/packages/theme/styles/components/ui/_chip.scss new file mode 100644 index 00000000000..b14b4e2c1de --- /dev/null +++ b/packages/theme/styles/components/ui/_chip.scss @@ -0,0 +1,27 @@ +// +// 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. +// + +.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); + } +} diff --git a/packages/theme/styles/components/ui/_component_box.scss b/packages/theme/styles/components/ui/_component_box.scss new file mode 100644 index 00000000000..f7f4e8b7a52 --- /dev/null +++ b/packages/theme/styles/components/ui/_component_box.scss @@ -0,0 +1,23 @@ +// +// 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. +// + +/* Component Box */ +.antiComponentBox { + padding: 1rem 1.5rem 1.5rem; + background-color: var(--theme-comp-header-color); + border-radius: 0.75rem; + border: 1px solid var(--theme-comp-header-border); + color: var(--theme-caption-color); +} \ No newline at end of file diff --git a/packages/theme/styles/components/ui/_hotkey.scss b/packages/theme/styles/components/ui/_hotkey.scss new file mode 100644 index 00000000000..bca9705e232 --- /dev/null +++ b/packages/theme/styles/components/ui/_hotkey.scss @@ -0,0 +1,32 @@ +// +// 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. +// + +.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); +} diff --git a/packages/theme/styles/components/util/_wrapper.scss b/packages/theme/styles/components/util/_wrapper.scss new file mode 100644 index 00000000000..c9df53343f2 --- /dev/null +++ b/packages/theme/styles/components/util/_wrapper.scss @@ -0,0 +1,68 @@ +// +// 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. +// + +/* 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; } + } +} \ No newline at end of file diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss index b2d24bb19b6..c0e019a7620 100644 --- a/packages/theme/styles/dialogs.scss +++ b/packages/theme/styles/dialogs.scss @@ -18,7 +18,7 @@ position: fixed; top: 0; left: 0; - width: 100%; + width: $full-width; min-width: 0; height: 100vh; background-color: var(--theme-overlay-color); pointer-events: all; @@ -53,16 +53,14 @@ overflow-x: auto; display: flex; align-items: center; - min-width: 0; + @include prevent-overflow; & > *:not(:last-child) { margin-right: .5rem; } } &__title { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + @include ellipsis; user-select: none; - min-width: 0; + @include prevent-overflow; line-height: 150%; color: var(--theme-caption-color); @@ -70,7 +68,7 @@ } &__divider { color: var(--theme-dark-color); } &__error { - min-width: 0; + @include prevent-overflow; flex-grow: 1; position: absolute; display: flex; @@ -89,7 +87,7 @@ align-items: center; flex-shrink: 0; padding: .5rem 1.5rem 1.5rem; - min-width: 0; + @include prevent-overflow; min-height: 0; } @@ -98,9 +96,8 @@ flex-direction: column; flex-grow: 1; flex-shrink: 1; - // margin: 1.5rem 1.5rem .5rem; height: fit-content; - min-width: 0; + @include prevent-overflow; min-height: 0; } @@ -110,13 +107,13 @@ align-items: center; flex-wrap: wrap; margin: .5rem 1.5rem 1.5rem; - min-width: 0; + @include prevent-overflow; font-size: .8125rem; color: var(--theme-caption-color); &::after { content: ''; - width: 100%; + width: $full-width; min-width: 0; order: 0; } &__separator { @@ -127,7 +124,7 @@ } & > * { margin: .5rem .5rem 0 0; } .new-line { - min-width: 0; + @include prevent-overflow; order: 1; } } @@ -141,7 +138,7 @@ display: flex; flex-direction: column; height: fit-content; - min-width: 0; + @include prevent-overflow; min-height: 0; } @@ -178,7 +175,7 @@ flex-grow: 1; display: flex; margin-left: .375rem; - min-width: 0; + @include prevent-overflow; font-weight: 500; font-size: .75rem; color: var(--system-error-color); @@ -193,7 +190,7 @@ flex-shrink: 0; margin: 0 .5rem; padding: .25rem .5rem; - min-width: 0; + @include prevent-overflow; min-height: 2.5rem; border-radius: .25rem; @@ -372,3 +369,61 @@ border-radius: 0 0 .5rem .5rem; } } + +.hulyDialog { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + width: $full-width; min-width: 0; + height: 100%; + overflow: hidden; +} + +.hulyDialog-header { + display: flex; + flex-direction: column; + flex-shrink: 0; + @include prevent-overflow; +} + +.hulyDialog-header__content { + display: flex; + align-items: center; + flex-shrink: 0; + @include prevent-overflow; +} + +.hulyDialog-content { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + @include prevent-overflow; + overflow: hidden; +} + +.hulyDialog-content__container { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + @include prevent-overflow; + overflow: hidden; +} + +.hulyDialog-content__wrapper { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + @include prevent-overflow; + overflow: hidden; +} + +.hulyDialog-content__header { + display: flex; + align-items: center; + flex-shrink: 0; + width: $full-width; min-width: 0; +} diff --git a/packages/theme/styles/editors.scss b/packages/theme/styles/editors.scss index 52ca43cabdf..ad565c379e0 100644 --- a/packages/theme/styles/editors.scss +++ b/packages/theme/styles/editors.scss @@ -2,7 +2,7 @@ display: inline-flex; flex-direction: column; align-items: flex-start; - min-width: 0; + @include prevent-overflow; .large-style { font-weight: 400; @@ -35,7 +35,7 @@ position: absolute; top: 0; left: -0.75rem; - width: calc(100% + 1.5rem); + @include fixed-width(calc(100% + 1.5rem)); height: 100%; border: 1px solid var(--theme-editbox-focus-border); border-radius: 0.25rem; @@ -46,7 +46,7 @@ .antiEditBoxInput { margin: 0; padding: 0; - min-width: 0; + @include prevent-overflow; color: var(--theme-caption-color); border: none; border-radius: 2px; @@ -57,7 +57,7 @@ display: none !important; pointer-events: none; height: 0; - width: 0; + @include fixed-width(0); margin: 0; } &.number::-webkit-outer-spin-button, diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss index 6a070bf27cb..6953d528fdb 100644 --- a/packages/theme/styles/global.scss +++ b/packages/theme/styles/global.scss @@ -16,6 +16,7 @@ @import "./_vars.scss"; @import "./_colors.scss"; @import "./_lumia-colors.scss"; +@import "./mixins.scss"; @import "./_layouts.scss"; @import "./_print.scss"; @import "./common.scss"; @@ -24,7 +25,6 @@ @import "./components.scss"; @import "./dialogs.scss"; @import "./popups.scss"; -@import "./mixins.scss"; @import "./panel.scss"; @import "./prose.scss"; @import "./tables.scss"; @@ -94,7 +94,7 @@ &::after, &::before { box-sizing: border-box; } - @media (max-width: 480px) { + @include respond-to('small') { --status-bar-height: 70px; } } @@ -124,25 +124,25 @@ } ::-webkit-scrollbar { - width: 6px; + width: var(--scrollbar-width); } ::-webkit-scrollbar:horizontal { - height: 6px; + height: var(--scrollbar-width); } ::-webkit-scrollbar-track, .panel-instance .scroll .scroll::-webkit-scrollbar-track { margin: 6px; - // background-color: var(--scrollbar-bar-color); + background-color: var(--scrollbar-track-color); } ::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-bar-color); + background-color: var(--scrollbar-thumb-color); border-radius: .25rem; } ::-webkit-scrollbar-thumb:hover { - background-color: var(--scrollbar-bar-hover); + background-color: var(--scrollbar-thumb-hover-color); border-radius: .25rem; } ::-webkit-scrollbar-corner { - background-color: var(--scrollbar-bar-color); + background-color: var(--scrollbar-thumb-color); border-radius: .25rem; } .kanban-container .scroll::-webkit-scrollbar-track { @@ -164,16 +164,74 @@ body { color: var(--content-color); background-color: var(--theme-bg-color); user-select: none; + width: $full-width; + min-width: 0; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; } -html, -body { - height: var(--app-height); - width: 100%; - overflow: hidden; - // touch-action: none; +html { + height: 100%; + width: $full-width; + min-width: 0; + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); + line-height: var(--line-height); + color: var(--theme-text-color); + background-color: var(--theme-background-color); @media print { overflow: visible !important; } } + +#app { + display: flex; + flex-direction: column; + height: 100%; + width: $full-width; + min-width: 0; + overflow: hidden; +} + +/* Utility classes */ +.full-width { + width: $full-width; + min-width: 0; +} + +.fit-width { + width: $fit-width; + min-width: 0; +} + +.prevent-overflow { + @include prevent-overflow; +} + +/* Scrollbar styles */ +.scrollbar { + overflow: auto; + @include prevent-overflow; + + &::-webkit-scrollbar { + width: var(--scrollbar-width); + height: var(--scrollbar-width); + } + + &::-webkit-scrollbar-track { + background-color: var(--theme-scrollbar-track-color); + } + + &::-webkit-scrollbar-thumb { + background-color: var(--theme-scrollbar-thumb-color); + border-radius: var(--scrollbar-radius); + + &:hover { + background-color: var(--theme-scrollbar-thumb-hover-color); + } + } +} diff --git a/packages/theme/styles/love.scss b/packages/theme/styles/love.scss index 58b53087c42..edb528c6a90 100644 --- a/packages/theme/styles/love.scss +++ b/packages/theme/styles/love.scss @@ -1,3 +1,53 @@ +.floorGrid { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + width: $full-width; min-width: 0; + overflow: hidden; + + &-container { + position: relative; + container-type: inline-size; + container-name: floorGridContainer; + @include prevent-overflow; + } + + &-room { + .floorGrid-room__field { + .hulyAvatar-container.hulyAvatarSize-large { + img { + width: $full-width; min-width: 0; + } + } + } + + &.floorGrid-room__empty { + .floorGrid-room__field { + .hulyAvatar-container { + @include fixed-width(90%); + } + } + } + + &.floorGrid-room__occupied { + .floorGrid-room__field { + .hulyAvatar-container { + @include fixed-width(var(--huly-floor-roomWidth)); + } + } + } + } + + @container floorGridContainer (max-width: 800px) { + .floorGrid-room { + svg { + @include fixed-width(0.75rem); + } + } + } +} + .floorGrid-room, .floorGrid-configureRoom { position: relative; diff --git a/packages/theme/styles/mixins.scss b/packages/theme/styles/mixins.scss index b63f2902d7c..f939717a280 100644 --- a/packages/theme/styles/mixins.scss +++ b/packages/theme/styles/mixins.scss @@ -1,3 +1,21 @@ +@import 'vars'; + +/** + * ВАЖНО: Некоторые миксины были заменены переменными из _vars.scss: + * - Вместо @include full-width используйте width: $full-width; min-width: 0; + * - Вместо @include fit-width используйте width: $fit-width; min-width: 0; + * - Миксин avatar-size теперь принимает имя размера вместо конкретных значений + * + * Для работы с картами переменных используйте map-get напрямую: + * - font-size: map-get($font-sizes, 'sm'); + * - gap: map-get($gaps, 'md'); + * - border-radius: map-get($border-radius, 'sm'); + * - height: map-get($form-heights, 'medium'); + * - padding: map-get($spacing, '0_5') map-get($spacing, '1'); + */ + + + @mixin bg-fullsize { position: absolute; top: 0; @@ -11,3 +29,120 @@ background: $color; opacity: $opacity; } + +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; +} + +// Используем переменные из $breakpoints +@mixin respond-to($breakpoint) { + $value: map-get($breakpoints, $breakpoint); + @if $value { + @media (max-width: $value) { + @content; + } + } @else { + @warn "Unknown breakpoint `#{$breakpoint}`. Available: small, medium, large"; + } +} + +@mixin ellipsis { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +@mixin fixed-width($width, $min: null, $max: null) { + width: $width; + @if $min { + min-width: $min; + } + @if $max { + max-width: $max; + } +} + +// @mixin min-width($width) { +// min-width: $width; +// width: auto; +// flex-shrink: 1; +// } + +// @mixin max-width($width) { +// max-width: $width; +// width: auto; +// } + +@mixin prevent-overflow { + min-width: 0; + max-width: 100%; + overflow: hidden; +} + +@mixin flex($direction: row, $justify: flex-start, $align: flex-start, $wrap: nowrap) { + display: flex; + flex-direction: $direction; + justify-content: $justify; + align-items: $align; + flex-wrap: $wrap; +} + +@mixin flex-between { + display: flex; + justify-content: space-between; + align-items: center; +} + +@mixin flex-column { + display: flex; + flex-direction: column; +} + +// Используем значения из $avatar-sizes +@mixin avatar-size($size) { + $size-values: map-get($avatar-sizes, $size); + @if $size-values { + $width: nth($size-values, 1); + $font-size: nth($size-values, 2); + + width: $width; + .ava-text { + font-size: $font-size; + } + } @else { + @warn "Unknown avatar size `#{$size}`. Check $avatar-sizes in _vars.scss"; + } +} + +// Используем значения из $spacing +@mixin table-cell-base($padding-h-key: "1_5", $padding-v-key: "0_5") { + $padding-h: map-get($spacing, $padding-h-key); + $padding-v: map-get($spacing, $padding-v-key); + + @if not $padding-h { + $padding-h: 1.5rem; + @warn "Unknown spacing key `#{$padding-h-key}`. Using default 1.5rem"; + } + + @if not $padding-v { + $padding-v: .5rem; + @warn "Unknown spacing key `#{$padding-v-key}`. Using default .5rem"; + } + + padding: $padding-v $padding-h; + text-align: left; +} + +@mixin table-header-cell { + @include table-cell-base; + 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; +} diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss index 90002319c91..4a4fceb46f6 100644 --- a/packages/theme/styles/panel.scss +++ b/packages/theme/styles/panel.scss @@ -16,33 +16,36 @@ /* Huly Panels */ .hulyPanels-container { display: flex; - width: 100%; - height: 100%; + width: $full-width; min-width: 0; + height: 100%; min-height: 0; - background-color: var(--theme-navpanel-color); // var(--global-surface-01-BackgroundColor); + background-color: var(--theme-navpanel-color); border-radius: 0 var(--small-focus-BorderRadius) var(--small-focus-BorderRadius) 0; - // .antiPanel-navigator { - // background-color: transparent; - // } .antiPanel-component { border-radius: var(--small-focus-BorderRadius); } } + .hulyNavPanel-container a.noUnderline { display: inline-flex; flex-shrink: 0; - min-width: 0; + @include prevent-overflow; min-height: 0; - button.type-link { width: 100%; } + button.type-link { + width: $full-width; + min-width: 0; + } } + .hulyNavPanel-container .hulyNavItem-container, .hulyNavPanel-container .hulyTaskNavLink-container, .parentSelector .hulyNavItem-container { margin: 0 0.75rem; } + .hulyNavPanel-header { display: flex; justify-content: space-between; @@ -58,7 +61,7 @@ min-height: 4.25rem; } &.withButton { - min-width: 0; + @include prevent-overflow; min-height: 0; } &.small { padding-bottom: var(--spacing-1_5); } @@ -68,7 +71,7 @@ display: flex; flex-direction: column; flex-shrink: 0; - width: 100%; + width: $full-width; min-width: 0; min-height: 0; @@ -94,7 +97,7 @@ } &__chevron { margin: 0 0.125rem; - width: 1.25rem; + @include fixed-width(1.25rem); height: 1.25rem; color: var(--global-disabled-TextColor); border: 1px solid transparent; @@ -109,7 +112,7 @@ } &__icon { margin: 0 0.125rem; - width: 1.5rem; + @include fixed-width(1.5rem); height: 1.5rem; color: var(--global-primary-TextColor); background-color: var(--theme-navpanel-selected); @@ -126,7 +129,7 @@ align-items: center; gap: var(--spacing-0_5); padding: var(--spacing-0_25) var(--spacing-0_5); - min-width: 0; + @include prevent-overflow; text-transform: uppercase; color: var(--global-tertiary-TextColor); border-radius: var(--extra-small-BorderRadius); @@ -137,12 +140,13 @@ flex-shrink: 0; gap: var(--spacing-0_5); margin-left: var(--spacing-1); - min-width: 0; + @include prevent-overflow; max-width: 50%; + width: auto; } &__arrow { margin-left: var(--spacing-0_5); - width: var(--global-min-Size); + @include fixed-width(var(--global-min-Size)); height: var(--global-min-Size); color: var(--global-accent-IconColor); } @@ -167,27 +171,6 @@ &:not(:has(.nested)) { margin-bottom: var(--spacing-1_5); } } } - &.nested .hulyNavGroup-header { - .hulyNavGroup-header__icon { margin: 0 var(--spacing-0_25) 0 0; } - .hulyNavGroup-header__label { padding: 0 var(--spacing-0_75) 0 0; } - &.isOpen .hulyNavGroup-header__label { background-color: var(--global-ui-BackgroundColor); } - } - .hulyNavGroup-header:hover, - &.nested .hulyNavGroup-header:hover { - .hulyNavGroup-header__chevron { background-color: var(--global-ui-BackgroundColor); } - .hulyNavGroup-header__label { background-color: var(--global-ui-hover-BackgroundColor); } - .hulyNavGroup-header__chevron { color: var(--button-subtle-IconColor); } - .hulyNavGroup-header__label { color: var(--global-primary-TextColor); } - } - &.nested.selectable .hulyNavGroup-header { - margin: 0 var(--spacing-1_5) var(--spacing-1_5); - padding: var(--spacing-0_5) var(--spacing-0_75) var(--spacing-0_5) var(--spacing-0_5); - min-height: var(--global-small-Size); - border-radius: var(--small-BorderRadius); - - &.selected { padding-right: var(--spacing-0_75); } - &.isOpen { margin-bottom: 0; } - } &:not(.nested, .noDivider), &.noDivider + &.noDivider { border-top: 1px solid var(--theme-navpanel-divider); } @@ -197,28 +180,17 @@ display: flex; flex-direction: column; padding: 0; - min-width: 0; + @include prevent-overflow; max-height: 0; } } -.hulyNavItem-container + .hulyNavGroup-container, -.hulyNavPanel-container a.noUnderline + .hulyNavGroup-container { margin-top: .75rem; } - -.hulyNavItem-container .hulyNavItem-chevron:enabled { - & > * { - transform-origin: center; - transform: rotate(-90deg); - transition: transform 0.1s ease-in-out; - } - &.isOpen > * { transform: rotate(0deg); } -} .hulySidePanel-container { display: flex; flex-direction: column; - width: 10rem; + @include fixed-width(10rem); height: 100%; - min-width: 0; + @include prevent-overflow; min-height: 0; border-right: 1px solid var(--theme-divider-color); border-radius: 0 var(--small-focus-BorderRadius) var(--small-focus-BorderRadius) 0; @@ -228,13 +200,13 @@ .antiPanel { overflow: hidden; min-width: 400px; - + width: auto; + flex-shrink: 1; background-color: var(--theme-popup-color); border: 1px solid var(--theme-popup-divider); border-radius: .5rem; flex-direction: row; box-shadow: var(--theme-popup-shadow); - // left: 1rem; &.float { position: fixed; @@ -242,7 +214,7 @@ flex-direction: column; top: 5rem; right: .5rem; - width: 42rem; + @include fixed-width(42rem); height: auto; min-height: 0; max-height: 32rem; @@ -251,8 +223,7 @@ .ap-header { flex-shrink: 0; padding: 1.5rem 1.75rem .5rem; - width: 100%; - min-width: 0; + width: $full-width; min-width: 0; min-height: 0; } } @@ -266,7 +237,7 @@ flex-direction: column; flex-basis: 50%; min-height: 0; - width: 50%; + @include fixed-width(50%); &.divide { border-right: 1px solid var(--divider-color); } } @@ -288,9 +259,9 @@ .popupPanel { overflow: hidden; display: flex; - width: 100%; + width: $full-width; min-width: 0; height: 100%; - min-width: 0; + @include prevent-overflow; min-height: 0; border-radius: var(--small-focus-BorderRadius); @@ -309,7 +280,7 @@ flex-shrink: 0; justify-content: stretch; align-items: center; - min-width: 0; + @include prevent-overflow; min-height: 3.5rem; background-color: var(--theme-comp-header-color); border-bottom: 1px solid var(--theme-divider-color); @@ -321,11 +292,11 @@ align-items: center; flex-grow: 1; margin-right: .75rem; - min-width: 0; + @include prevent-overflow; min-height: 0; .title { - min-width: 0; + @include prevent-overflow; padding: .125rem .375rem; font-size: .8125rem; color: var(--theme-content-color); @@ -353,12 +324,11 @@ overflow: hidden; position: relative; display: flex; - min-width: 0; + @include prevent-overflow; min-height: 0; - width: 100%; + width: $full-width; min-width: 0; height: 100%; background-color: var(--theme-panel-color); - // border: 1px solid var(--theme-divider-color); border-top: none; border-left: none; @@ -372,7 +342,7 @@ overflow: hidden; display: flex; flex-direction: column; - min-width: 0; + @include prevent-overflow; min-height: 0; @media print { @@ -395,20 +365,22 @@ &-content { display: flex; flex-direction: column; - // flex-shrink: 0; margin-left: auto; margin-right: auto; - width: calc(100% - 7.5rem); + @include fixed-width(calc(100% - 7.5rem)); max-width: 54rem; + width: auto; &.side-content-space { --side-content-space: 21rem; max-width: calc(54rem + var(--side-content-space)); + width: auto; padding-right: var(--side-content-space); } &.max { max-width: 100%; + width: auto; } } } @@ -423,27 +395,30 @@ justify-content: center; align-items: center; flex-shrink: 0; - width: 100%; - min-width: 0; + width: $full-width; min-width: 0; min-height: 3.5rem; border-bottom: 1px solid var(--theme-divider-color); } &.main { padding: .75rem 1.25rem; - width: calc(100% - 5rem); + @include fixed-width(calc(100% - 5rem)); height: 100%; - min-width: 0; + @include prevent-overflow; max-width: 900px; + width: auto; &.max { max-width: 100%; + width: auto; } } &.mobile { flex-shrink: 0; padding: .5rem .75rem .75rem; - width: 100%; + width: $full-width; min-width: 0; min-width: 320px; + width: auto; + flex-shrink: 1; } &.bottom-divider { border-bottom: 1px solid var(--theme-divider-color); } @@ -451,8 +426,7 @@ .header-row { display: flex; align-items: center; - width: 100%; - min-width: 0; + width: $full-width; min-width: 0; flex-wrap: wrap; &.between { justify-content: space-between; } @@ -462,11 +436,15 @@ .popupPanel-body__mobile-content { padding: .5rem; min-width: 320px; + width: auto; + flex-shrink: 1; } &__aside { - width: 25%; + @include fixed-width(25%); min-width: var(--panel-aside-width); + width: auto; + flex-shrink: 1; &.float { position: absolute; @@ -474,12 +452,11 @@ flex-shrink: 0; top: 0; left: 100%; - width: var(--panel-aside-width); + @include fixed-width(var(--panel-aside-width)); height: 100%; - min-width: 0; + @include prevent-overflow; min-height: 0; background-color: var(--theme-panel-color); - // border-left: 1px solid var(--theme-divider-color); border-bottom-right-radius: .45rem; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transition: box-shadow 150ms ease 0s, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -517,7 +494,7 @@ row-gap: .25rem; column-gap: 1rem; margin: .25rem 2rem 0; - width: calc(100% - 4rem); + @include fixed-width(calc(100% - 4rem)); height: min-content; &.inCollapsed { margin: 1rem 2rem; } @@ -538,8 +515,8 @@ &-content { display: flex; flex-direction: column; - width: 100%; - min-width: 0; + width: $full-width; min-width: 0; + @include prevent-overflow; min-height: 0; padding: 1.25rem 2rem; } @@ -555,18 +532,13 @@ border: none; overflow: visible; } - - // &.asideShown .popupPanel-body__main { - // border: 1px solid var(--divider-color); - // border-radius: 0 0 .5rem .5rem; - // } } .popupPanel-pageHeader { @include watermark; top: 0; - width: 100%; + width: $full-width; min-width: 0; visibility: hidden; } @@ -574,7 +546,7 @@ @include watermark; bottom: 0; - width: 100%; + width: $full-width; min-width: 0; visibility: hidden; } @@ -582,6 +554,7 @@ overflow: visible; } } + .popupPanel .popupPanel-body__aside .popupPanel-body__aside-grid + .popupPanel-title { border-top: 1px solid var(--theme-divider-color); } @@ -593,7 +566,6 @@ .popupPanel-title, .popupPanel-body { - // border-radius: 0; border: none; } } @@ -601,3 +573,173 @@ align-items: center; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) !important; } + +.panel-container { + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; + width: $full-width; min-width: 0; + overflow: hidden; +} + +.panel-instance { + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; + @include prevent-overflow; + overflow: hidden; + + button.type-link { width: $full-width; min-width: 0; } +} + +.panel-content { + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; + @include prevent-overflow; + overflow: hidden; +} + +.panel-header { + display: flex; + flex-direction: column; + flex-shrink: 0; + width: $full-width; min-width: 0; + overflow: hidden; +} + +.panel-header__content { + display: flex; + flex-direction: column; + flex-shrink: 0; + @include prevent-overflow; + overflow: hidden; +} + +.panel-header__title { + display: flex; + align-items: center; + flex-shrink: 0; + max-width: 50%; + width: auto; + overflow: hidden; +} + +.panel-header__actions { + display: flex; + align-items: center; + flex-shrink: 0; + gap: var(--spacing-1); + @include prevent-overflow; +} + +.panel-header__aside { + display: flex; + align-items: center; + flex-shrink: 0; + @include fixed-width(10rem); +} + +.panel-content__aside { + display: flex; + flex-direction: column; + flex-shrink: 0; + min-width: 400px; + width: auto; + flex-shrink: 1; + overflow: hidden; +} + +.panel-content__main { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + @include fixed-width(42rem); + overflow: hidden; +} + +.panel-content__container { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + width: $full-width; min-width: 0; + overflow: hidden; +} + +.panel-content__split { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + @include fixed-width(50%); + overflow: hidden; +} + +.panel-content__wrapper { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + width: $full-width; min-width: 0; + overflow: hidden; +} + +.panel-companion { + display: flex; + flex-direction: column; + overflow: hidden; + max-width: 50%; + width: auto; + background-color: var(--theme-bg-color); + + // ... existing code ... +} + +.panel-instance--content { + // ... existing code ... + + &.panel-instance--content-xl { + max-width: 54rem; + width: auto; + + &.with-side-content { + max-width: calc(54rem + var(--side-content-space)); + width: auto; + } + + &.no-width-limit { + max-width: 100%; + width: auto; + } + } +} + +.panel-instance--content-wrapper { + // ... existing code ... + + &.with-side-content { + max-width: 900px; + width: auto; + } + + &.no-side-content { + max-width: 100%; + width: auto; + } +} + +// ... existing code ... + +.panel-instance--wrapper.is-chat { + // ... existing code ... + min-width: 400px; + width: auto; + flex-shrink: 1; +} + +// ... existing code ... diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index 95277987304..e07995390bc 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -27,11 +27,11 @@ var(--global-popover-ShadowBlur) var(--global-popover-ShadowSpread) var(--global-popover-ShadowColor); + z-index: var(--z-popover); &:not(.noPadding) { padding: 1px; } &:not(.autoWidth) { - min-width: 16.5rem; - max-width: 16.5rem; + @include fixed-width(16.5rem); } .hulyPopup-row { display: flex; @@ -40,11 +40,12 @@ align-self: stretch; gap: var(--spacing-1); padding: var(--spacing-1_5); - min-width: 0; + @include prevent-overflow; min-height: 0; text-align: left; border-radius: var(--extra-small-BorderRadius); border: none; + transition: background-color var(--transition-fast) ease; &.withKeys { align-items: center; @@ -54,7 +55,7 @@ &__icon { flex-shrink: 0; - width: var(--global-min-Size); + @include fixed-width(var(--global-min-Size)); height: var(--global-min-Size); color: var(--global-primary-TextColor); } @@ -63,7 +64,7 @@ flex-direction: column; flex-grow: 1; gap: var(--spacing-0_25); - min-width: 0; + @include prevent-overflow; min-height: 0; } &__label { @@ -93,6 +94,8 @@ .key { padding: var(--spacing-0_5); min-width: var(--global-extra-small-Size); + width: auto; + flex-shrink: 1; font-size: 0.75rem; color: var(--global-primary-TextColor); background-color: var(--theme-tooltip-key-bg); @@ -122,7 +125,7 @@ } .hulyPopup-divider { flex-shrink: 0; - width: 100%; + width: $full-width; min-width: 0; height: 1px; background-color: var(--theme-popup-divider); } @@ -133,9 +136,12 @@ overflow: hidden; display: flex; flex-direction: column; - width: fit-content; + width: $fit-width; min-width: 12.5rem; + width: auto; + flex-shrink: 1; max-width: 17rem; + width: auto; max-height: 22rem; &:focus { @@ -165,8 +171,7 @@ background: none; border-radius: 0; box-shadow: none; - width: 100%; - max-width: 100%; + width: $full-width; min-width: 0; } &.maxHeight { height: 22rem; } @@ -175,11 +180,11 @@ height: auto; } &.width-40 { - max-width: 40rem !important; - width: 40rem !important; + @include fixed-width(40rem, null, 40rem); } &.max-width-40 { - max-width: 40rem !important; + max-width: 40rem; + width: auto; } .header { flex-shrink: 0; @@ -193,7 +198,7 @@ display: flex; justify-content: center; align-items: center; - width: .75rem; + @include fixed-width(0.75rem); height: .75rem; border-radius: 50%; diff --git a/packages/theme/styles/prose.scss b/packages/theme/styles/prose.scss index a429c7eeeaf..28e9556116b 100644 --- a/packages/theme/styles/prose.scss +++ b/packages/theme/styles/prose.scss @@ -31,12 +31,14 @@ table.proseTable { border-collapse: collapse; table-layout: fixed; position: relative; - width: 100%; + width: $full-width; min-width: 0; margin: 0; td, th { min-width: 1rem; + width: auto; + flex-shrink: 1; height: 2rem; border: 1px solid var(--text-editor-table-border-color); padding: .25rem .5rem; @@ -61,7 +63,6 @@ table.proseTable { td, th { // cell selection - &.table-cell-selected { &::before { content: ''; @@ -93,7 +94,6 @@ table.proseTable { } // row and col handlers - .table-col-handle, .table-row-handle { cursor: pointer; @@ -186,7 +186,7 @@ table.proseTable { .table-row-handle { position: absolute; - width: var(--table-handle-size); + @include fixed-width(var(--table-handle-size)); top: -1px; bottom: -1px; left: var(--table-handle-row-indent); @@ -195,38 +195,12 @@ table.proseTable { border-bottom-right-radius: 0; button { - width: 100%; + width: $full-width; min-width: 0; padding: 4px 0; - - svg { - transform: rotate(90deg); - } - } - - &:hover { - &:not(.table-row-handle__selected) {} - - button { - opacity: 1; - } - } - - &__selected { - top: 0; - - &::before { - bottom: 0; - left: 0; - right: 0; - border-right-width: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } } } // row and col insert - .table-col-insert, .table-row-insert { position: absolute; @@ -567,4 +541,106 @@ pre.proseCodeBlock>pre.proseCode { .theme-light { @import './github-light.scss'; +} + +.prose { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + width: $full-width; min-width: 0; + overflow: hidden; + + table { + width: $full-width; min-width: 0; + border-collapse: collapse; + border-spacing: 0; + } + + .tableWrapper { + position: relative; + overflow-x: auto; + width: $full-width; min-width: 0; + } + + .selectedCell { + position: relative; + border-style: solid; + border-color: var(--table-selection-border-color); + border-width: 0; + + &.top { + border-top-width: var(--table-selection-border-width); + } + &.bottom { + border-bottom-width: var(--table-selection-border-width); + } + &.left { + border-left-width: var(--table-selection-border-width); + } + &.right { + border-right-width: var(--table-selection-border-width); + } + } + + .column-resize-handle { + position: absolute; + right: -2px; + top: 0; + bottom: 0; + @include fixed-width(var(--table-handle-size)); + cursor: col-resize; + z-index: 20; + } + + .tableWrapper { + padding: 1rem 0; + overflow-x: auto; + + table { + width: $full-width; min-width: 0; + border-collapse: collapse; + margin: 0; + overflow: hidden; + } + + td, th { + position: relative; + min-width: 1em; + border: 1px solid var(--theme-divider-color); + padding: 3px 5px; + vertical-align: top; + box-sizing: border-box; + + > * { margin-bottom: 0; } + } + + th { + font-weight: bold; + text-align: left; + background-color: var(--theme-table-header-color); + } + + .selectedCell:after { + z-index: 2; + position: absolute; + content: ""; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: var(--table-selection-background-color); + pointer-events: none; + } + + .column-resize-handle { + position: absolute; + right: -2px; + top: 0; + bottom: 0; + @include fixed-width(var(--table-handle-size)); + cursor: col-resize; + z-index: 20; + } + } } \ No newline at end of file diff --git a/packages/theme/styles/tables.scss b/packages/theme/styles/tables.scss index 8d2d11e5494..0eacc537595 100644 --- a/packages/theme/styles/tables.scss +++ b/packages/theme/styles/tables.scss @@ -3,25 +3,16 @@ // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0). // +// Импортируем миксины таблиц и цвета +@import 'components/data/table'; +@import 'components/core/colors'; + /* 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); + @include table-container; .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); + @include table-header; &.withButton { padding: var(--spacing-2); @@ -38,25 +29,19 @@ } .icon { flex-shrink: 0; - width: var(--global-min-Size); + @include fixed-width(var(--global-min-Size)); height: var(--global-min-Size); } .buttons-group { display: flex; align-items: center; gap: var(--spacing-1); - min-width: 0; + @include prevent-overflow; 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); + @include table-content; &:not(.withTitle) { flex-direction: column; @@ -70,8 +55,7 @@ align-self: stretch; gap: 8px; padding: var(--spacing-1_5); - min-width: 8.75rem; - max-width: 8.75rem; + @include fixed-width(8.75rem); text-transform: uppercase; font-size: .75rem; font-weight: 500; @@ -84,32 +68,22 @@ flex-grow: 1; flex-shrink: 1; height: fit-content; - min-width: 0; + @include prevent-overflow; 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; + @include table-row; &-dragMenu, &-icon-wrapper { - display: flex; - justify-content: center; - align-items: center; + @include flex-center; flex-shrink: 0; } &-dragMenu { margin: 0; padding: 0; - width: var(--global-extra-small-Size); + @include fixed-width(var(--global-extra-small-Size)); height: var(--global-extra-small-Size); color: var(--button-disabled-IconColor); border-radius: var(--extra-small-BorderRadius); @@ -121,17 +95,17 @@ } } &-icon { - width: var(--global-min-Size); + @include fixed-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); + @include fixed-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); + background-color: var(--theme-button-hovered); border-radius: var(--small-BorderRadius); border: none; outline: none; @@ -145,17 +119,15 @@ flex-direction: column; flex-grow: 1; gap: var(--spacing-0_25); - min-width: 0; + @include prevent-overflow; min-height: 0; } &-label { - overflow: hidden; - white-space: nowrap; + @include ellipsis; word-break: break-all; - text-overflow: ellipsis; text-align: left; flex-shrink: 1; - min-width: 0; + @include prevent-overflow; color: var(--global-primary-TextColor); &.grow { @@ -179,9 +151,9 @@ &-arrow { display: none; flex-shrink: 0; - width: var(--global-min-Size); + @include fixed-width(var(--global-min-Size)); height: var(--global-min-Size); - color: var(--global-primary-LinkColor); + color: $text-link; } } &.options .hulyTableAttr-content__row, @@ -189,22 +161,10 @@ &.task .hulyTableAttr-content__row { &.hovered, &:not(.disableMouseOver):hover { - background-color: var(--theme-table-header-color); // var(--global-surface-03-hover-BackgroundColor); + @include table-row-hover; } &.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; - } + @include table-row-selected; } } &.options, @@ -255,7 +215,7 @@ } } .hulyTableAttr-content__row + .hulyTableAttr-content__row { - border-top: 1px solid var(--theme-divider-color); + border-top: 1px solid $border-divider; } } &.automation { @@ -278,7 +238,7 @@ } } .hulyTableAttr-content__row + .hulyTableAttr-content__row { - border-top: 1px solid var(--theme-divider-color); + border-top: 1px solid $border-divider; } } } @@ -289,3 +249,43 @@ .hulyTableAttr-content__wrapper:empty { display: none; } } } + +.hulyTable { + display: flex; + flex-direction: column; + width: $full-width; min-width: 0; + border-collapse: collapse; + + .hulyTable-row { + display: flex; + align-items: center; + width: $full-width; min-width: 0; + min-height: var(--table-row-height); + padding: var(--spacing-2) var(--spacing-4); + border-bottom: 1px solid $border-divider; + + &.header { + font-weight: var(--font-weight-medium); + @include bg-color('table-header'); + } + } + + .hulyTable-cell { + display: flex; + align-items: center; + @include prevent-overflow; + padding: 0 var(--spacing-2); + + &.fixed { + @include fixed-width(var(--cell-width)); + } + + &.fit { + width: $fit-width; min-width: 0; + } + + &.full { + width: $full-width; min-width: 0; + } + } +} diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index dc4d733de51..4b2d45df0b6 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -259,7 +259,7 @@ export type IconSize = | 'medium' | 'large' | 'x-large' - | '2x-large' + | 'xxl' | 'full' export interface IconProps { icon?: number | number[] @@ -282,8 +282,8 @@ export function getIconSize2x (size: IconSize): IconSize { case 'large': return 'x-large' case 'x-large': - return '2x-large' - case '2x-large': + return 'xxl' + case 'xxl': case 'full': return 'full' } diff --git a/plugins/contact-resources/src/components/SelectAvatarPopup.svelte b/plugins/contact-resources/src/components/SelectAvatarPopup.svelte index bedf6b6aa4b..06e972c847d 100644 --- a/plugins/contact-resources/src/components/SelectAvatarPopup.svelte +++ b/plugins/contact-resources/src/components/SelectAvatarPopup.svelte @@ -227,7 +227,7 @@ avatarProps: selectedAvatarProps }} direct={selectedAvatarType === AvatarType.IMAGE ? selectedFile : undefined} - size={'2x-large'} + size={'xxl'} {icon} {name} /> diff --git a/plugins/contact-resources/src/components/icons/Avatar.svelte b/plugins/contact-resources/src/components/icons/Avatar.svelte index 6302923b82e..c36e3d7dbcf 100644 --- a/plugins/contact-resources/src/components/icons/Avatar.svelte +++ b/plugins/contact-resources/src/components/icons/Avatar.svelte @@ -67,7 +67,7 @@ width: 4rem; height: 4rem; } - .avaicon-2x-large { + .avaicon-xxl { width: 6rem; height: 6rem; }