mirror of
https://github.com/konpa/devicon.git
synced 2025-08-28 16:50:41 +02:00
Moved index.html into docs/
This commit is contained in:
Thomas Bui
403
docs/assets/css/style.css
Normal file
403
docs/assets/css/style.css
Normal file
@@ -0,0 +1,403 @@
|
||||
@charset "UTF-8";
|
||||
@import '//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css';
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
|
||||
@import url(https://fonts.googleapis.com/css?family=Damion);
|
||||
html {
|
||||
box-sizing: border-box; }
|
||||
|
||||
*, *::after, *::before {
|
||||
box-sizing: inherit; }
|
||||
|
||||
|
||||
.icon-brush:before {
|
||||
content: "\e600"; }
|
||||
|
||||
.icon-type:before {
|
||||
content: "\e601"; }
|
||||
|
||||
.icon-github:before {
|
||||
content: "\e602"; }
|
||||
|
||||
.icon-github2:before {
|
||||
content: "\e603"; }
|
||||
|
||||
.icon-bucket:before {
|
||||
content: "\e605"; }
|
||||
|
||||
.icon-github3:before {
|
||||
content: "\e604"; }
|
||||
|
||||
.icon-bucket2:before {
|
||||
content: "\e606"; }
|
||||
|
||||
/* Cachons la case à cocher */
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked {
|
||||
position: absolute;
|
||||
left: -9999px; }
|
||||
|
||||
/* on prépare le label */
|
||||
[type="checkbox"]:not(:checked) + label,
|
||||
[type="checkbox"]:checked + label {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
padding: 0.71429rem 1.07143rem;
|
||||
margin-left: 0.35714rem;
|
||||
font-family: "Lato", Calibri, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #60be86;
|
||||
background: #4f755e;
|
||||
box-shadow: 0px 6px 0px #4a5c51;
|
||||
border-radius: 5px; }
|
||||
|
||||
/* Aspect si "cochée" */
|
||||
[type="checkbox"]:checked + label {
|
||||
top: 6px;
|
||||
box-shadow: 0px 0px 0px #4a5c51; }
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
padding: 0.71429rem 1.07143rem;
|
||||
margin: 0 0.71429rem;
|
||||
font-family: "Lato", Calibri, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #60be86;
|
||||
background: #4c6857;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 6px 0px #4a5c51; }
|
||||
.button:active {
|
||||
top: 6px;
|
||||
box-shadow: 0px 0px 0px #4a5c51; }
|
||||
|
||||
/* General Blueprint Style */
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%; }
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: ' '; }
|
||||
|
||||
.clearfix:after {
|
||||
clear: both; }
|
||||
|
||||
body {
|
||||
color: #47a3da;
|
||||
font-family: 'Lato', Calibri, Arial, sans-serif; }
|
||||
|
||||
a {
|
||||
color: #f0f0f0;
|
||||
text-decoration: none; }
|
||||
|
||||
a:hover {
|
||||
color: #000; }
|
||||
|
||||
.cbp-ig-grid {
|
||||
list-style: none;
|
||||
padding: 0 0 50px;
|
||||
margin: 0; }
|
||||
|
||||
.cbp-ig-grid:before,
|
||||
.cbp-ig-grid:after {
|
||||
content: " ";
|
||||
display: table; }
|
||||
|
||||
.cbp-ig-grid:after {
|
||||
clear: both; }
|
||||
|
||||
.cbp-ig-grid li {
|
||||
width: 25%;
|
||||
float: left;
|
||||
height: 200px;
|
||||
text-align: center; }
|
||||
|
||||
.cbp-ig-grid li > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
color: #60be86;
|
||||
-webkit-transition: background 0.2s;
|
||||
-moz-transition: background 0.2s;
|
||||
transition: background 0.2s;
|
||||
cursor: pointer; }
|
||||
|
||||
.cbp-ig-icon {
|
||||
padding: 30px 0 0;
|
||||
display: block;
|
||||
-webkit-transition: -webkit-transform 0.2s;
|
||||
transition: -moz-transform 0.2s;
|
||||
transition: transform 0.2s; }
|
||||
|
||||
.cbp-ig-icon:before {
|
||||
font-family: 'devicon';
|
||||
font-size: 6em;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
.cbp-ig-grid .cbp-ig-title {
|
||||
margin: 20px 0 10px;
|
||||
padding: 20px 0 0;
|
||||
font-size: 1em;
|
||||
position: relative;
|
||||
-webkit-transition: -webkit-transform 0.2s;
|
||||
-moz-transition: -moz-transform 0.2s;
|
||||
transition: transform 0.2s; }
|
||||
|
||||
.cbp-ig-grid .cbp-ig-title:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: #60be86;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -30px;
|
||||
-webkit-transition: margin-top 0.2s;
|
||||
-moz-transition: margin-top 0.2s;
|
||||
transition: margin-top 0.2s; }
|
||||
|
||||
.cbp-ig-grid li > span:hover {
|
||||
background: #60be86; }
|
||||
|
||||
.cbp-ig-grid li > span:hover .cbp-ig-icon {
|
||||
-webkit-transform: translateY(10px);
|
||||
-moz-transform: translateY(10px);
|
||||
-ms-transform: translateY(10px);
|
||||
transform: translateY(10px); }
|
||||
|
||||
.cbp-ig-grid li > span:hover .cbp-ig-icon:before,
|
||||
.cbp-ig-grid li > span:hover .cbp-ig-title {
|
||||
color: #fff; }
|
||||
|
||||
.cbp-ig-grid li > span:hover .cbp-ig-title {
|
||||
-webkit-transform: translateY(-30px);
|
||||
-moz-transform: translateY(-30px);
|
||||
-ms-transform: translateY(-30px);
|
||||
transform: translateY(-30px); }
|
||||
|
||||
.cbp-ig-grid li > span:hover .cbp-ig-title:before {
|
||||
background: #fff;
|
||||
margin-top: 80px; }
|
||||
|
||||
@media screen and (max-width: 62.75em) {
|
||||
.cbp-ig-grid li {
|
||||
width: 50%; } }
|
||||
|
||||
@media screen and (max-width: 41.6em) {
|
||||
.cbp-ig-grid li {
|
||||
width: 100%; } }
|
||||
|
||||
@media screen and (max-width: 25em) {
|
||||
.cbp-ig-grid {
|
||||
font-size: 80%; } }
|
||||
|
||||
html {
|
||||
background: whitesmoke; }
|
||||
|
||||
html,
|
||||
body {
|
||||
color: #323232;
|
||||
font-size: 14px;
|
||||
font-family: "Lato", Calibri, Arial, sans-serif;
|
||||
line-height: 1.5; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #4f755e; }
|
||||
|
||||
:-moz-placeholder {
|
||||
color: #4f755e; }
|
||||
|
||||
::-moz-placeholder {
|
||||
color: #4f755e; }
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #4f755e; }
|
||||
|
||||
html,
|
||||
body {
|
||||
min-width: 900px; }
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
padding: 0 2rem;
|
||||
width: 480px;
|
||||
color: whitesmoke;
|
||||
background: #60be86; }
|
||||
header > h1,
|
||||
header > h3 {
|
||||
font-weight: 400;
|
||||
font-family: "Damion", sans-serif;
|
||||
text-align: center; }
|
||||
header > h1 {
|
||||
margin: 1rem 0 0;
|
||||
font-size: 5rem; }
|
||||
header > h1 > span {
|
||||
font-size: 2rem; }
|
||||
header > h2 {
|
||||
font-weight: 400;
|
||||
font-size: 1.3rem; }
|
||||
header .download {
|
||||
margin: 2rem 0 0;
|
||||
font-weight: 900;
|
||||
font-size: 1.3rem;
|
||||
text-align: center; }
|
||||
header .download i {
|
||||
position: relative;
|
||||
top: 12px;
|
||||
left: -10px;
|
||||
font-size: 3rem; }
|
||||
header .download a {
|
||||
padding: 1.3rem 1.8rem;
|
||||
border: 6px solid #60be86;
|
||||
color: #60be86;
|
||||
background: whitesmoke; }
|
||||
header .download a:hover {
|
||||
border-color: whitesmoke;
|
||||
color: #60be86; }
|
||||
header > h3 {
|
||||
margin: 4rem 0 0;
|
||||
font-size: 3rem;
|
||||
text-align: left; }
|
||||
header > h5 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-size: 1.2rem; }
|
||||
header > ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none; }
|
||||
header > ul h4 {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
font-size: 1.5rem; }
|
||||
header > ul li {
|
||||
margin: .8rem 0 2rem; }
|
||||
header .icons-list {
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
list-style: none; }
|
||||
header .icons-list > div {
|
||||
display: inline; }
|
||||
header .icons-list li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 6.5rem;
|
||||
margin: .5rem .3rem;
|
||||
padding: .4rem;
|
||||
cursor: pointer;
|
||||
border: 5px solid #60be86; }
|
||||
header .icons-list li:hover {
|
||||
border: 5px solid #65d693;
|
||||
border-radius: 5px; }
|
||||
header .icons-list li:hover::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
bottom: -18px;
|
||||
left: 25px;
|
||||
display: block;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-top: 15px solid #65d693; }
|
||||
header .icons-list li.selected-version {
|
||||
border: 5px solid #65d693;
|
||||
border-radius: 5px; }
|
||||
header .icons-list li.selected-version::before {
|
||||
position: absolute;
|
||||
bottom: -19px;
|
||||
left: 25px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 15px solid #65d693;
|
||||
border-right: 15px solid transparent;
|
||||
border-left: 15px solid transparent;
|
||||
content: ' '; }
|
||||
header .icons-list i {
|
||||
font-size: 5rem; }
|
||||
header .icons-list img {
|
||||
max-width: 100%; }
|
||||
|
||||
.borders {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
border: 8px solid #60be86; }
|
||||
|
||||
.main {
|
||||
margin: 0 0 0 480px; }
|
||||
|
||||
.search {
|
||||
text-align: center; }
|
||||
.search input {
|
||||
width: 300px;
|
||||
margin: 4rem;
|
||||
padding: .5rem 1rem;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #60be86;
|
||||
color: #60be86;
|
||||
background: none;
|
||||
font-size: 1.2rem;
|
||||
text-align: center; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #60be86; }
|
||||
|
||||
:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
color: #60be86; }
|
||||
|
||||
::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: #60be86; }
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #60be86; }
|
||||
|
||||
.cde {
|
||||
white-space: nowrap;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
color: #4c6857;
|
||||
background: #65d693;
|
||||
font-size: .9rem;
|
||||
font-family: courier;
|
||||
overflow: auto; }
|
||||
|
||||
.cde-ind {
|
||||
padding: 0 0 0 .5rem; }
|
||||
|
||||
.cde-com {
|
||||
color: #4c6857;
|
||||
opacity: .5; }
|
||||
|
||||
.footer {
|
||||
margin-top: 6rem;
|
||||
text-align: center; }
|
||||
BIN
docs/assets/img/logo.png
Normal file
BIN
docs/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
193
docs/assets/js/script.js
Normal file
193
docs/assets/js/script.js
Normal file
@@ -0,0 +1,193 @@
|
||||
var devicon = angular.module('devicon', ['ngSanitize', 'ngAnimate']);
|
||||
|
||||
/*
|
||||
||==============================================================
|
||||
|| Devicons controller
|
||||
||==============================================================
|
||||
*/
|
||||
|
||||
devicon.controller('IconListCtrl', function($scope, $http, $compile) {
|
||||
|
||||
var baseUrl = window.location.origin;
|
||||
|
||||
// Get devicon.json
|
||||
$http.get(baseUrl + '/devicon.json').success(function(data) {
|
||||
|
||||
/*
|
||||
| Re-format devicon.json
|
||||
|-----------------------------------------
|
||||
*/
|
||||
|
||||
$scope.icons = [];
|
||||
$scope.selectedIcon = {};
|
||||
|
||||
// Loop through devicon.json
|
||||
angular.forEach(data, function(devicon, key) {
|
||||
|
||||
// New icon format
|
||||
var icon = {
|
||||
name: devicon.name,
|
||||
svg: devicon.versions.svg,
|
||||
font: devicon.versions.font,
|
||||
main: ""
|
||||
};
|
||||
|
||||
// Loop through devicon.json icons
|
||||
for (var i = 0; i < devicon.versions.font.length; i++) {
|
||||
|
||||
// Store all versions that should become main in order
|
||||
var mainVersionsArray = [
|
||||
"plain",
|
||||
"line",
|
||||
"original",
|
||||
"plain-wordmark"
|
||||
];
|
||||
|
||||
// Loop through mainVersionsArray
|
||||
for (var j = 0; j < mainVersionsArray.length; j++) {
|
||||
|
||||
// Check if icon version can be "main", if not continue, if yes break the loops
|
||||
if (devicon.name + devicon.versions.font[i] == devicon.name + mainVersionsArray[j]) {
|
||||
icon.main = devicon.name + "-" + devicon.versions.font[i];
|
||||
i = 99999; // break first loop (and second)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Push new icon format to $scope.icons
|
||||
$scope.icons.push(icon);
|
||||
});
|
||||
|
||||
// Select first icon by default in scope
|
||||
$scope.selectedIcon = $scope.icons[0];
|
||||
$scope.selectedFontIcon = $scope.icons[0].font[0];
|
||||
$scope.selectedSvgIcon = $scope.selectSvg($scope.icons[0].svg[0], 0);
|
||||
$scope.selectedFontIndex = 0;
|
||||
|
||||
/*------ End of "Re-format devicon.json" ------*/
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
| Change selected icon
|
||||
|--------------------------------
|
||||
*/
|
||||
$scope.selectIcon = function(icon) {
|
||||
$scope.selectedIcon = icon;
|
||||
$scope.selectedFontIcon = icon.font[0];
|
||||
$scope.selectedFontIndex = 0;
|
||||
$scope.selectedSvgIcon = $scope.selectSvg(icon.svg[0], 0);
|
||||
|
||||
}
|
||||
/*---- End of "Change selected icon" ----*/
|
||||
|
||||
|
||||
/*
|
||||
| Change selected icon font version
|
||||
|--------------------------------
|
||||
*/
|
||||
$scope.selectFont = function(fontVersion, colored, index) {
|
||||
$scope.selectedFontIcon = fontVersion;
|
||||
$scope.colored = colored ? true : false;
|
||||
$scope.selectedFontIndex = index;
|
||||
}
|
||||
/*---- End of "Change selected font icon" ----*/
|
||||
|
||||
/*
|
||||
| Change selected icon svg version
|
||||
|--------------------------------
|
||||
*/
|
||||
$scope.selectSvg = function(svgVersion, index) {
|
||||
|
||||
$http.get(baseUrl + '/icons/' + $scope.selectedIcon.name + '/' + $scope.selectedIcon.name + '-' + svgVersion + '.svg').success(function(data){
|
||||
|
||||
var svg = angular.element(data);
|
||||
var innerSVG = (svg[0].innerHTML);
|
||||
|
||||
$scope.selectedSvgIcon = innerSVG;
|
||||
$scope.selectedSvgIndex = index;
|
||||
});
|
||||
}
|
||||
/*---- End of "Change selected svg icon" ----*/
|
||||
|
||||
});
|
||||
|
||||
/*================ End of "Devicons controller" ================*/
|
||||
|
||||
/*
|
||||
||==================================================================
|
||||
|| Convert icon img to svg
|
||||
||==================================================================
|
||||
*/
|
||||
|
||||
devicon.directive('imgToSvg', function ($http, $compile) {
|
||||
|
||||
var baseUrl = window.location.href;
|
||||
|
||||
return {
|
||||
link : function($scope, $element, $attrs) {
|
||||
|
||||
$attrs.$observe('src', function(val){
|
||||
|
||||
$http.get(baseUrl + val).success(function(data){
|
||||
|
||||
var svg = angular.element(data);
|
||||
svg = svg.removeAttr('xmlns');
|
||||
svg = svg.addClass('not-colored');
|
||||
svg = svg.attr('svg-color', '');
|
||||
var $e = $compile(svg)($scope);
|
||||
$element.replaceWith($e);
|
||||
$element = $e;
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
/*================ End of "Convert icon img to svg" ================*/
|
||||
|
||||
/*
|
||||
||==================================================================
|
||||
|| Add color to svg when hovering
|
||||
||==================================================================
|
||||
*/
|
||||
|
||||
devicon.directive('svgColor', function () {
|
||||
|
||||
return {
|
||||
link : function($scope, $element, $attrs) {
|
||||
$element.on('mouseenter', function(){
|
||||
$element.removeClass('not-colored');
|
||||
});
|
||||
$element.on('mouseleave', function(){
|
||||
$element.addClass('not-colored');
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
/*================ End of "Add color to svg when hovering" ================*/
|
||||
|
||||
/*
|
||||
||==================================================================
|
||||
|| Show all icons on click
|
||||
||==================================================================
|
||||
*/
|
||||
|
||||
devicon.directive('iconDetails', function ($http, $compile) {
|
||||
|
||||
return {
|
||||
template: '<div class="icon"><article class="icon-detail"><div ng-repeat="svg in icon.svg"><img ng-src="/icons/{{icon.name}}/{{icon.name}}-{{svg}}.svg" alt="{{icon.name}}" /></div></article><img ng-src="/icons/{{icon.name}}/{{icon.main}}.svg" alt="{{icon.name}}" img-to-svg /></div>',
|
||||
replace: true,
|
||||
scope: {
|
||||
icon: "="
|
||||
},
|
||||
compile: function CompilingFunction($templateElement) {
|
||||
$element.on('click', function(){
|
||||
$templateElement.replaceWith(this.template);
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
/*================ End of "Add color to svg when hovering" ================*/
|
||||
Reference in New Issue
Block a user