Mibew/simple-icons
1
0
Fork 0
mirror of https://github.com/Mibew/simple-icons.git synced 2025-05-14 14:53:07 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

- Hover full tiles: opacity hex to 1.

Browse Source 
- Clickable area full tiles enlarged.
This commit is contained in:
Roy 2016-02-23 20:51:44 +01:00
parent 6fded3e581
commit 06ca6edb91
3 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
404.html
View File

@ -153,7 +153,8 @@
width: 2rem; width: 2rem;
} }
.tiles--full svg { .tiles--full svg {
margin: -0.5rem 0.75rem 0 0; margin: -0.5rem 0 0 0;
padding-right: 1.25rem;
} }
.tiles path, .tiles ellipse, .tiles circle { .tiles path, .tiles ellipse, .tiles circle {
fill: #FFF; fill: #FFF;
@ -162,6 +163,10 @@
font-size: 0.75rem; font-size: 0.75rem;
opacity: 0.5; opacity: 0.5;
text-transform: uppercase; text-transform: uppercase;
transition: opacity .3s ease-in-out;
}
.tiles--full .tiles__item:hover .hex, .tiles--full .tiles__item:active .hex, .tiles--full .tiles__item:focus .hex {
opacity: 1;
} }
@media (min-width: 800px) { .tiles li { width: 50%; } } @media (min-width: 800px) { .tiles li { width: 50%; } }
@media (min-width: 1000px) { .tiles li { width: 33.333%; } } @media (min-width: 1000px) { .tiles li { width: 33.333%; } }

7
index.html
View File

@ -153,7 +153,8 @@
width: 2rem; width: 2rem;
} }
.tiles--full svg { .tiles--full svg {
margin: -0.5rem 0.75rem 0 0; margin: -0.5rem 0 0 0;
padding-right: 1.25rem;
} }
.tiles path, .tiles ellipse, .tiles circle { .tiles path, .tiles ellipse, .tiles circle {
fill: #FFF; fill: #FFF;
@ -162,6 +163,10 @@
font-size: 0.75rem; font-size: 0.75rem;
opacity: 0.5; opacity: 0.5;
text-transform: uppercase; text-transform: uppercase;
transition: opacity .3s ease-in-out;
}
.tiles--full .tiles__item:hover .hex, .tiles--full .tiles__item:active .hex, .tiles--full .tiles__item:focus .hex {
opacity: 1;
} }
@media (min-width: 800px) { .tiles li { width: 50%; } } @media (min-width: 800px) { .tiles li { width: 50%; } }
@media (min-width: 1000px) { .tiles li { width: 33.333%; } } @media (min-width: 1000px) { .tiles li { width: 33.333%; } }

7
src/header.html
View File

@ -153,7 +153,8 @@
width: 2rem; width: 2rem;
} }
.tiles--full svg { .tiles--full svg {
margin: -0.5rem 0.75rem 0 0; margin: -0.5rem 0 0 0;
padding-right: 1.25rem;
} }
.tiles path, .tiles ellipse, .tiles circle { .tiles path, .tiles ellipse, .tiles circle {
fill: #FFF; fill: #FFF;
@ -162,6 +163,10 @@
font-size: 0.75rem; font-size: 0.75rem;
opacity: 0.5; opacity: 0.5;
text-transform: uppercase; text-transform: uppercase;
transition: opacity .3s ease-in-out;
}
.tiles--full .tiles__item:hover .hex, .tiles--full .tiles__item:active .hex, .tiles--full .tiles__item:focus .hex {
opacity: 1;
} }
@media (min-width: 800px) { .tiles li { width: 50%; } } @media (min-width: 800px) { .tiles li { width: 50%; } }
@media (min-width: 1000px) { .tiles li { width: 33.333%; } } @media (min-width: 1000px) { .tiles li { width: 33.333%; } }