gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use star icon for small sandwich button

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-15 10:13:00 +02:00
parent 1412db647b
commit 0f998acb48
6 changed files with 14 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/bookmark-filled.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
<path d="M7 3h10a1 1 0 0 1 1 1v17l-6-3.75L6 21V4a1 1 0 0 1 1-1Z" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 187 B

assets/icons/bookmark-outline.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
<path d="M7 3h10a1 1 0 0 1 1 1v17l-6-3.75L6 21V4a1 1 0 0 1 1-1Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 244 B

assets/icons/star-filled.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
<path d="m12 2.8 2.89 5.85 6.46.94-4.68 4.56 1.1 6.44L12 17.53 6.23 20.59l1.1-6.44L2.65 9.59l6.46-.94L12 2.8Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

patterns/company-card.html
+2 -8
View File
@@ -16,10 +16,7 @@
<div class="sg-object-card-grid">
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
<div class="sg-company-card__header-title">
<div class="sg-strong">Netflix, Inc.</div>
<span class="sg-company-card__bookmark-icon" aria-hidden="true"></span>
</div>
<div class="sg-strong">Netflix, Inc.</div>
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
<span class="sg-sandwich-button__icon" aria-hidden="true">
@@ -29,10 +26,7 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-company-card__bookmark-menu-link" href="#">
<span class="sg-company-card__bookmark-icon" aria-hidden="true"></span>
<span>Merken</span>
</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
styles/10-components-interactive-elements.css
+9
View File
@@ -1028,7 +1028,16 @@
}
.sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon {
display: block;
width: calc(var(--sandwich-line-width) - 3px);
height: calc(var(--sandwich-line-width) - 3px);
background-color: var(--color-black);
-webkit-mask: url("../assets/icons/star-filled.svg") no-repeat center / contain;
mask: url("../assets/icons/star-filled.svg") no-repeat center / contain;
}
.sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
display: none;
}
.sg-sandwich-menu-wrap {
styles/23-patterns-object-group-card.css
-23
View File
@@ -35,29 +35,6 @@
color: var(--text-company-card-data-negative);
}
.sg-company-card__header-title {
display: flex;
align-items: center;
gap: var(--spacing-small);
min-width: 0;
}
.sg-company-card__bookmark-icon {
display: inline-block;
inline-size: 1em;
block-size: 1em;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url("../assets/icons/bookmark-filled.svg") no-repeat center / contain;
mask: url("../assets/icons/bookmark-filled.svg") no-repeat center / contain;
}
.sg-company-card__bookmark-menu-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
}
.sg-company-card__analysis-title {
margin: 0;
}