TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 19:33:02 +03:00
Code Issues Projects Releases Wiki Activity

Improved hover state styling of snippets in cardmenu

Browse Source 
No issue

- Changed delete icon colour and padding
- Changed fill of snippet icon on hover
This commit is contained in:
Sanne de Vries 2020-10-28 13:14:17 +01:00
parent 3183fe045d
commit ce674169e6
7 changed files with 11 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ghost/admin/app/styles/spirit/_koenig.css
View File

@ -810,13 +810,17 @@
justify-content: center;
opacity: 0;
transition: opacity ease-in-out 0.15s;
padding: 4px;
padding: 5px;
margin-top: -2px;
margin-bottom: -2px;
margin-right: 4px;
margin-right: 8px;
border-radius: 3px;
}
.kg-cardmenu-card-hover:hover svg [data-selector="bg"] {
fill: #fff;
}
.kg-cardmenu-card-hover:hover .kg-cardmenu-action-icon {
opacity: 1.0;
}
@ -831,11 +835,11 @@
}
.kg-cardmenu-card-hover .kg-cardmenu-action-icon svg path {
fill: var(--midgrey);
fill: var(--red);
}
.kg-cardmenu-card-hover .kg-cardmenu-action-icon:hover svg path {
fill: var(--darkgrey);
fill: var(--red);
}
/* Padded container housing title + editor canvas, scrollable content */

5
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block-hover.svg
View File

@ -1,5 +0,0 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#FFF"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 307 B

2
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block.svg
View File

@ -1,5 +1,5 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 310 B

After

Width:  |  Height:  |  Size: 330 B

6
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination-hover.svg
View File

@ -1,6 +0,0 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#FFF"/>
<rect x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 388 B

2
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination.svg
View File

@ -1,5 +1,5 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<rect x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 391 B

After

Width:  |  Height:  |  Size: 410 B

7
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text-hover.svg
View File

@ -1,7 +0,0 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#FFF"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
<rect x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>
<rect x="5.25" y="12" width="7.5" height="1.5" rx=".75" fill="#738A94"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 446 B

2
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text.svg
View File

@ -1,5 +1,5 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
<rect x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 449 B

After

Width:  |  Height:  |  Size: 468 B