Skip to content

P
process_management_new
Commit 6f8a35a9 authored by drigle's avatar drigle
Browse files
Options

style: refine process group tabs

parent b23b2773
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 13 deletions
src/components/process-ui/ProcessUi.css
View file @ 6f8a35a9
...@@ -36,27 +36,50 @@ ...@@ -36,27 +36,50 @@
width: max-content; width: max-content;
min-width: max-content; min-width: max-content;
padding: 0; padding: 0;
gap: 8px; gap: 10px;
} }
.process-page__tabs .tabs__tab { .process-page__tabs .tabs__tab {
flex: 0 0 auto; flex: 0 0 auto;
} }
.process-page__tabs .tabs__list-container,
.process-page__tabs .tabs__list-container__scroller {
padding-bottom: 2px;
scroll-padding-left: 2px;
}
.process-group-tab { .process-group-tab {
width: 192px; position: relative;
min-width: 192px; width: 180px;
min-height: 88px; min-width: 180px;
min-height: 74px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
white-space: normal; white-space: normal;
text-align: start; text-align: start;
border: 1px solid var(--separator); border: 1px solid var(--separator);
border-radius: var(--radius); border-radius: 10px;
background: var(--surface); background: var(--surface);
box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
transition:
border-color 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
} }
.process-group-tab[aria-selected="true"], .process-group-tab[aria-selected="true"],
.process-group-tab[data-selected="true"] { .process-group-tab[data-selected="true"] {
border-color: var(--accent); border-color: color-mix(in oklab, var(--accent) 58%, var(--separator));
background: var(--accent-soft); background: color-mix(in oklab, var(--accent) 7%, var(--surface));
box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.process-group-tab:hover:not([aria-selected="true"], [data-selected="true"]) {
border-color: color-mix(in oklab, var(--accent) 28%, var(--separator));
background: color-mix(in oklab, var(--accent) 3%, var(--surface));
}
.process-group-tab:active:not([aria-selected="true"], [data-selected="true"]) {
background: color-mix(in oklab, var(--accent) 5%, var(--surface));
}
.process-group-tab:focus-visible {
outline: 2px solid color-mix(in oklab, var(--accent) 72%, var(--separator));
outline-offset: 2px;
} }
.process-group-tab__content { .process-group-tab__content {
display: flex; display: flex;
...@@ -65,9 +88,9 @@ ...@@ -65,9 +88,9 @@
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
min-height: 86px; min-height: 70px;
padding: 12px 14px 10px; padding: 12px 14px;
gap: 8px; gap: 10px;
} }
.process-group-tab__title { .process-group-tab__title {
display: block; display: block;
...@@ -88,9 +111,14 @@ ...@@ -88,9 +111,14 @@
} }
.process-group-tab__meta strong { .process-group-tab__meta strong {
color: var(--foreground); color: var(--foreground);
font-size: 24px; font-size: 22px;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
font-variant-numeric: tabular-nums;
}
.process-group-tab[aria-selected="true"] .process-group-tab__title,
.process-group-tab[data-selected="true"] .process-group-tab__title {
color: color-mix(in oklab, var(--accent) 72%, var(--foreground));
} }
.process-group-tab .tabs__indicator { .process-group-tab .tabs__indicator {
height: 3px; height: 3px;
...@@ -132,8 +160,9 @@ ...@@ -132,8 +160,9 @@
width: 100%; width: 100%;
} }
.process-group-tab { .process-group-tab {
width: 168px; width: 158px;
min-width: 168px; min-width: 158px;
min-height: 70px;
} }
.process-editor { .process-editor {
min-width: 620px; min-width: 620px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment