mirrors
/
devdocs
mirror of https://github.com/freeCodeCamp/devdocs
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Split icon sprite

Browse Source
pull/427/head
Thibaut Courouble 9 years ago
parent 29a177f526
commit 7a1591f68c
11 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/images/docs.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
assets/images/docs@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
assets/images/icons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
assets/images/icons@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

2
assets/stylesheets/application-dark.css.scss
Unescape View File

@ -1,5 +1,7 @@
//= depend_on icons.png
//= depend_on icons@2x.png
//= depend_on docs.png
//= depend_on docs@2x.png
//= require vendor/open-sans

2
assets/stylesheets/application.css.scss
Unescape View File

@ -1,5 +1,7 @@
//= depend_on icons.png
//= depend_on icons@2x.png
//= depend_on docs.png
//= depend_on docs@2x.png
//= require vendor/open-sans

2
assets/stylesheets/components/_content.scss
Unescape View File

@ -234,7 +234,7 @@
._docs-name:before {
float: left;
margin: .25rem .5rem .25rem 0;
@extend %icon;
@extend %doc-icon;
}
._docs-size { text-align: right; }

2
assets/stylesheets/components/_path.scss
Unescape View File

@ -33,7 +33,7 @@
width: 1rem;
height: 1rem;
margin: .5rem .375rem 0 0;
@extend %icon;
@extend %doc-icon;
}
& + &:after {

2
assets/stylesheets/components/_sidebar.scss
Unescape View File

@ -135,7 +135,7 @@
&:before {
float: left;
margin: .25rem .625rem 0 0;
@extend %icon;
@extend %doc-icon;
}
}

54
assets/stylesheets/global/_icons.scss
Unescape View File

@ -4,13 +4,26 @@
width: 1rem;
height: 1rem;
background-image: image-url('icons.png');
background-size: 10rem 12rem;
background-size: 4rem 6rem;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
%icon { background-image: image-url('icons@2x.png'); }
}
%doc-icon {
content: '';
display: block;
width: 1rem;
height: 1rem;
background-image: image-url('docs.png');
background-size: 10rem 12rem;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
%doc-icon { background-image: image-url('docs@2x.png'); }
}
%darkIconFix {
@if $style == 'dark' {
filter: invert(100%) grayscale(100%);
@ -22,9 +35,26 @@
%icon-search { background-position: -1rem 0; }
%icon-link { background-position: -2.25rem -.25rem; }
%icon-clear { background-position: -3rem 0; }
%icon-close-white { background-position: -4rem 0; }
%icon-settings { background-position: -5rem 0; }
%icon-check { background-position: -6rem 0; }
%icon-settings { background-position: 0 -1rem; }
%icon-check { background-position: -1rem -1rem; }
%icon-menu { background-position: -2rem -1rem; }
%icon-home { background-position: -3rem -1rem; }
%icon-path { background-position: 0 -2rem; }
%icon-search-white { background-position: -1rem -2rem; }
%icon-dir-white { background-position: -2rem -2rem; }
%icon-link-white { background-position: -3.25rem -2.25rem; }
%icon-settings-white { background-position: 0 -3rem; }
%icon-check-white { background-position: -1rem -3rem; }
%icon-light { background-position: -2rem -3rem; }
%icon-light-white { background-position: -3rem -3rem; }
%icon-expand { background-position: 0 -4rem; }
%icon-contract { background-position: -1rem -4rem; }
%icon-expand-white { background-position: -2rem -4rem; }
%icon-contract-white { background-position: -3rem -4rem; }
%icon-clipboard { background-position: 0 -5rem; }
%icon-clipboard-white { background-position: -1rem -5rem; }
%icon-close-white { background-position: -2rem -5rem; }
._icon-http:before { background-position: -7rem 0; @extend %darkIconFix !optional; }
._icon-jquery:before { background-position: -8rem 0; @extend %darkIconFix !optional; }
._icon-underscore:before { background-position: -9rem 0; @extend %darkIconFix !optional; }
@ -41,8 +71,6 @@
._icon-angularjs:before { background-position: -9rem -1rem; }
._icon-coffeescript:before { background-position: 0 -2rem; @extend %darkIconFix !optional; }
._icon-ember:before { background-position: -1rem -2rem; }
%icon-menu { background-position: -2rem -2rem; }
%icon-home { background-position: -3rem -2rem; }
._icon-jqueryui:before { background-position: -4rem -2rem; }
._icon-jquerymobile:before { background-position: -5rem -2rem; }
._icon-lodash:before { background-position: -6rem -2rem; }
@ -59,7 +87,6 @@
._icon-knockout:before { background-position: -5rem -3rem; }
._icon-moment:before { background-position: -6rem -3rem; @extend %darkIconFix !optional; }
._icon-c:before { background-position: -7rem -3rem; }
%icon-path { background-position: -8rem -3rem; }
._icon-yii:before,
._icon-yii1:before { background-position: -9rem -3rem; }
._icon-cpp:before { background-position: 0 -4rem; }
@ -88,13 +115,6 @@
._icon-socketio:before { background-position: -2rem -6rem; }
._icon-modernizr:before { background-position: -3rem -6rem; }
._icon-bower:before { background-position: -4rem -6rem; }
%icon-search-white { background-position: -5rem -6rem; }
%icon-dir-white { background-position: -6rem -6rem; }
%icon-link-white { background-position: -7.25rem -6.25rem; }
%icon-settings-white { background-position: -8rem -6rem; }
%icon-check-white { background-position: -9rem -6rem; }
%icon-light { background-position: 0 -7rem; }
%icon-light-white { background-position: -1rem -7rem; }
._icon-cakephp:before { background-position: -2rem -7rem; }
._icon-lua:before { background-position: -3rem -7rem; @extend %darkIconFix !optional; }
._icon-clojure:before { background-position: -4rem -7rem; }
@ -109,14 +129,8 @@
._icon-vue:before { background-position: -3rem -8rem; }
._icon-opentsdb:before { background-position: -4rem -8rem; }
._icon-q:before { background-position: -5rem -8rem; }
%icon-expand { background-position: -6rem -8rem; }
%icon-contract { background-position: -7rem -8rem; }
%icon-expand-white { background-position: -8rem -8rem; }
%icon-contract-white { background-position: -9rem -8rem; }
._icon-react_native:before { background-position: 0 -9rem; }
._icon-phalcon:before { background-position: -1rem -9rem; }
%icon-clipboard { background-position: -2rem -9rem; }
%icon-clipboard-white { background-position: -3rem -9rem; }
._icon-elixir:before { background-position: -4rem -9rem; @extend %darkIconFix !optional; }
._icon-vagrant:before { background-position: -5rem -9rem; }
._icon-dojo:before { background-position: -6rem -9rem; }

2
views/manifest.erb
Unescape View File

@ -8,6 +8,8 @@ CACHE:
<%= stylesheet_path 'application-dark' %>
<%= image_path 'icons.png' %>
<%= image_path 'icons@2x.png' %>
<%= image_path 'docs.png' %>
<%= image_path 'docs@2x.png' %>
<%= asset_path 'docs.js' %>
<%= doc_index_urls.join "\n" %>

Write Preview
Loading…
Cancel
Save