mirror of
https://github.com/penpot/penpot.git
synced 2026-11-10 20:10:37 +00:00
eb6e976c01
* ♻️ Move the dashboard header styles to the DS The page header of the dashboard and settings pages took its styles from common/refactor/common-dashboard.scss. Move the rules still in use to dashboard/common/header.scss, written with DS tokens: - The page titles become heading* (title-large) with a class instead of a bare h1; the team section links get a class, and the active class moves from the li to the link. - Drop the rules that matched nothing: .element-name, .context-menu, .icon and .btn-secondary inside the header, and the global .btn-primary and .btn-secondary (only the fonts page uses them; it keeps the old import until its open change lands). - The sidebar and subscription styles imported the file without using it; drop the import. The header looks the same (0 px in the new visual test). The title line height goes from 1.15 to 1.4, which does not move the text. AI-assisted-by: claude-opus-5-5 * ♻️ Move the dashboard libraries and search styles to the DS Replace the deprecated spacing, size and border variables with DS tokens and logical properties, and drop the refactor/ import. - The search placeholder icon gets a class for its color instead of a .icon svg rule; its xl size already gives the 32px box. - Delete the selectors no markup uses: .dashboard-projects in both files and .dashboard-shared in search. No visual change (0 px in the new libraries and search visual test). AI-assisted-by: claude-opus-5-5 * 🔥 Move the fonts page header to the DS and delete common-dashboard The fonts page was the last user of common/refactor/common-dashboard.scss: its header now uses the shared DS header styles and a DS heading, like the other dashboard pages. Nothing else imports common-dashboard, so it is deleted. No visual change. AI-assisted-by: claude-opus-5-5 * 📎 Remove a double blank line in the dashboard sidebar styles Prettier rejects the two blank lines left after the imports, which made the frontend lint fail in CI. AI-assisted-by: claude-opus-5-5 * 📎 Remove a blank line between the subscription style imports Stylelint (at-rule-empty-line-before) rejects the blank line left between the @use rules after the common-dashboard import was dropped. AI-assisted-by: claude-opus-5-5
228 lines
4.3 KiB
SCSS
228 lines
4.3 KiB
SCSS
// This Source Code Form is subject to the terms of the Mozilla Public
|
|
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
//
|
|
// Copyright (c) KALEIDOS SUBSIDIARY SL
|
|
|
|
@use "dashboard/common/header";
|
|
@use "ds/typography.scss" as t;
|
|
@use "ds/_borders.scss" as *;
|
|
@use "ds/spacing.scss" as *;
|
|
@use "ds/_sizes.scss" as *;
|
|
@use "ds/z-index.scss" as *;
|
|
@use "ds/mixins.scss" as *;
|
|
@use "ds/_utils.scss" as *;
|
|
|
|
.dashboard-container {
|
|
flex: 1 0 0;
|
|
inline-size: 100%;
|
|
margin-inline-end: var(--sp-l);
|
|
border-block-start: $b-1 solid var(--panel-border-color);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dashboard-projects {
|
|
user-select: none;
|
|
block-size: calc(100vh - px2rem(80));
|
|
}
|
|
|
|
.with-team-hero {
|
|
block-size: calc(100vh - px2rem(360));
|
|
}
|
|
|
|
.dashboard-shared {
|
|
inline-size: calc(100vw - px2rem(320));
|
|
margin-inline-end: px2rem(52);
|
|
}
|
|
|
|
.dashboard-project-row {
|
|
--actions-opacity: 0;
|
|
|
|
margin-block-end: var(--sp-xxl);
|
|
position: relative;
|
|
|
|
&:hover,
|
|
&:has(:focus-visible) {
|
|
--actions-opacity: 1;
|
|
}
|
|
}
|
|
|
|
.pinned-project {
|
|
--actions-opacity: 1;
|
|
}
|
|
|
|
// Set while either the "..." menu or the title's right-click menu is open —
|
|
// its popover can portal outside .dashboard-project-row, so :hover/:focus-
|
|
// within alone stop applying the moment the pointer leaves the row, even
|
|
// though the menu itself is still open.
|
|
.is-force-display {
|
|
--actions-opacity: 1;
|
|
}
|
|
|
|
.projects-container {
|
|
display: grid;
|
|
grid-auto-rows: min-content;
|
|
}
|
|
|
|
.project {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--sp-s);
|
|
inline-size: 99%;
|
|
max-block-size: $sz-40;
|
|
padding: var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-l);
|
|
margin-block-start: var(--sp-l);
|
|
border-radius: $br-4;
|
|
}
|
|
|
|
.project-name-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
inline-size: 100%;
|
|
min-block-size: $sz-32;
|
|
margin-inline-start: var(--sp-s);
|
|
}
|
|
|
|
.project-name {
|
|
@include text-ellipsis;
|
|
@include t.use-typography("body-large");
|
|
|
|
color: var(--title-foreground-color-hover);
|
|
cursor: pointer;
|
|
block-size: $sz-16;
|
|
line-height: 0.8;
|
|
margin-inline-end: var(--sp-m);
|
|
flex: 0 1 auto;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.info-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
gap: var(--sp-s);
|
|
}
|
|
|
|
.info,
|
|
.recent-files-row-title-info {
|
|
@include t.use-typography("body-medium");
|
|
|
|
color: var(--title-foreground-color);
|
|
|
|
@media (width <= 760px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.project-actions {
|
|
display: flex;
|
|
opacity: var(--actions-opacity);
|
|
margin-inline-start: var(--sp-xxxl);
|
|
gap: var(--sp-l);
|
|
}
|
|
|
|
.grid-container {
|
|
inline-size: 100%;
|
|
padding: 0 var(--sp-xs);
|
|
}
|
|
|
|
.placeholder-placement {
|
|
margin: var(--sp-l) var(--sp-xxxl);
|
|
}
|
|
|
|
.show-more {
|
|
--show-more-color: var(--button-secondary-foreground-color-rest);
|
|
|
|
@include t.use-typography("body-medium");
|
|
|
|
flex: 0 0 auto;
|
|
margin-inline-start: auto;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: var(--sp-m);
|
|
color: var(--show-more-color);
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
--show-more-color: var(--button-secondary-foreground-color-active);
|
|
}
|
|
}
|
|
|
|
// Team hero
|
|
.team-hero {
|
|
background-color: var(--color-background-tertiary);
|
|
border-radius: $br-8;
|
|
border: none;
|
|
display: flex;
|
|
margin: var(--sp-l);
|
|
padding: var(--sp-s);
|
|
position: relative;
|
|
|
|
img {
|
|
border-radius: $br-4;
|
|
inline-size: auto;
|
|
|
|
@media (width <= 1200px) {
|
|
display: none;
|
|
inline-size: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
flex-grow: 1;
|
|
padding: var(--sp-xl) var(--sp-xl);
|
|
}
|
|
|
|
.title {
|
|
color: var(--color-foreground-primary);
|
|
font-size: px2rem(24);
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
font-size: $sz-16;
|
|
|
|
span {
|
|
color: var(--color-foreground-secondary);
|
|
display: block;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-accent-primary);
|
|
}
|
|
|
|
padding: var(--sp-s) 0;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: var(--sp-xl);
|
|
right: var(--sp-xl);
|
|
}
|
|
|
|
.img-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--sp-xl) 0;
|
|
block-size: var(--sp-xl) 0;
|
|
overflow: hidden;
|
|
border-radius: $br-4;
|
|
|
|
@media (width <= 1200px) {
|
|
display: none;
|
|
inline-size: 0;
|
|
}
|
|
}
|