mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-01 22:14:39 +08:00
f213d5ab34
Now that we display in text the status of the PR (approved, changes requested) we can switch to an icon with just color as the indicator. It's less inconsistent than previously. The PR also adds a styleguide screen for these oneboxes, for easier visual review.
81 lines
4 KiB
SCSS
81 lines
4 KiB
SCSS
@use "lib/viewport";
|
|
|
|
$icon-aspect-ratio: calc(12 / 16);
|
|
$icon-width: 2.5em;
|
|
$icon-width-mobile: 1.8em;
|
|
|
|
.onebox.githubpullrequest .github-row {
|
|
--gh-icon-draft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 14a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM14 4.25a.75.75 0 0 1-.75.75h-2a.75.75 0 0 1 0-1.5h2a.75.75 0 0 1 .75.75Zm-.75 3.75a.75.75 0 0 0 0-1.5h-2a.75.75 0 0 0 0 1.5Z'/%3E%3C/svg%3E");
|
|
--gh-icon-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z'/%3E%3C/svg%3E");
|
|
--gh-icon-merged: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z'/%3E%3C/svg%3E");
|
|
--gh-icon-closed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 5.5a.75.75 0 0 1 .75.75v3.378a2.251 2.251 0 1 1-1.5 0V7.25a.75.75 0 0 1 .75-.75Zm-2.03-5.273a.75.75 0 0 1 1.06 0l.97.97.97-.97a.748.748 0 0 1 1.265.332.75.75 0 0 1-.205.729l-.97.97.97.97a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-.97-.97-.97.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l.97-.97-.97-.97a.75.75 0 0 1 0-1.06ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z'/%3E%3C/svg%3E");
|
|
|
|
&.--gh-status-draft,
|
|
&.--gh-status-open,
|
|
&.--gh-status-approved,
|
|
&.--gh-status-changes_requested,
|
|
&.--gh-status-merged,
|
|
&.--gh-status-closed {
|
|
.github-icon-container {
|
|
display: block;
|
|
grid-area: icon;
|
|
align-self: center;
|
|
justify-self: center;
|
|
|
|
// Fixed height prevents layout shift when status icon changes
|
|
min-height: calc($icon-width / $icon-aspect-ratio);
|
|
|
|
@include viewport.until(sm) {
|
|
min-height: calc($icon-width-mobile / $icon-aspect-ratio);
|
|
}
|
|
|
|
.github-icon {
|
|
display: none;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: $icon-width;
|
|
aspect-ratio: $icon-aspect-ratio;
|
|
mask-size: 100% 100%;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
|
|
@include viewport.until(sm) {
|
|
width: $icon-width-mobile;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.--gh-status-draft .github-icon-container::before {
|
|
mask-image: var(--gh-icon-draft);
|
|
background-color: #8b949e;
|
|
}
|
|
|
|
&.--gh-status-open .github-icon-container::before,
|
|
&.--gh-status-approved .github-icon-container::before,
|
|
&.--gh-status-changes_requested .github-icon-container::before {
|
|
mask-image: var(--gh-icon-open);
|
|
background-color: #8b949e;
|
|
}
|
|
|
|
&.--gh-status-approved .github-icon-container::before {
|
|
background-color: #3fb950;
|
|
}
|
|
|
|
&.--gh-status-changes_requested .github-icon-container::before {
|
|
background-color: #f79939;
|
|
}
|
|
|
|
&.--gh-status-merged .github-icon-container::before {
|
|
mask-image: var(--gh-icon-merged);
|
|
background-color: #a371f7;
|
|
}
|
|
|
|
&.--gh-status-closed .github-icon-container::before {
|
|
mask-image: var(--gh-icon-closed);
|
|
background-color: #f85149;
|
|
}
|
|
}
|
