eos-icons
Version:
The iconic and open source font made for EOS Design System.
431 lines (364 loc) • 10.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>
<%= fontFamilyName %> demo page
</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<style>
body {
background: #fff;
color: #141823;
font-size: 16px;
font-family: 'Lato', sans-serif;
font-weight: 400;
margin: 0;
}
.container {
padding: 16px;
}
header {
background: #fe673a;
margin-bottom: 2em;
position: fixed;
top: 0px;
width: 100%;
z-index: 1;
}
.icons-container {
margin-top: 120px;
}
h1,
footer {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
h1 {
font-size: 32px;
margin: 0px;
color: white;
}
h2 small {
font-size: 0.5em;
}
h3 {
text-align: center;
}
.latest {
border: 1px solid #b7b7b7;
margin-bottom: 30px;
}
.two-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.icons__item,
.icons__item i {
cursor: pointer;
text-align: center;
}
.icons__item:hover {
color: #fe673a;
}
.icons__item {
display: inline-block;
margin-bottom: 3em;
width: 200px;
}
.icons__item i {
font-size: 48px;
}
.how-to-use,
.how-to-use-animated {
background: #333;
bottom: 44px;
position: fixed;
width: 100%;
}
footer {
background: #ededed;
bottom: 0px;
color: #999;
font-size: 14px;
position: fixed;
width: 100%;
}
.text-white {
color: white
}
pre {
background: #dedede;
padding: 16px;
}
.pull-right {
float: right;
}
#close-code-snippet,
#close-code-snippet-animated {
cursor: pointer;
}
.eos-logo-color-gradients {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff890a+0,ff420a+50,bc0289+100 */
background: #ff890a;
background: -moz-linear-gradient(-45deg, #ff890a 0%, #ff420a 50%, #bc0289 100%);
background: -webkit-linear-gradient(-45deg, #ff890a 0%, #ff420a 50%, #bc0289 100%);
background: linear-gradient(135deg, #ff890a 0%, #ff420a 50%, #bc0289 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff890a', endColorstr='#bc0289', GradientType=1);
}
.toolbar {
padding: 10px;
}
.version {
font-size: 12px;
}
.extended-version-wrap {
margin-bottom: 10px;
display: flex;
margin: 0 0 30px 60px;
}
.extended-version-wrap a {
padding: 10px 14px;
background: #e6e6e6;
border-radius: 5px;
color: #1f1f1f;
text-decoration: none;
border: 1px solid #d0d0d0;
}
#icons-animated img {
width: 48px;
}
/* switch button css */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
margin: 0 10px 20px 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 12px;
}
.slider.round:before {
border-radius: 50%;
}
/* Rounded sliders */
.tabs-container {
display: flex;
}
.icons-tab {
width: 25%;
text-align: center;
padding: 10px;
border: 1px solid #b7b7b7;
border-bottom: 0;
cursor: pointer;
}
.icons-tab:first-of-type {
border-right: 0;
}
.selected {
background-color: #333;
color: #fff;
}
.controls {
display: flex;
position: relative;
top: -10px;
}
.controls>div {
margin-right: 15px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/eos-icons.css" id="css-link">
<link rel="stylesheet" type="text/css" href="css/eos-icons-outlined.css" id="css-link">
<script src='js/eos-icons.js'></script>
</head>
<body>
<header class='eos-logo-color-gradients'>
<div class='container two-columns'>
<h1>
EOS Icons
</h1>
<div class='pull-right toolbar'>
<span class='text-white'>Try different sizes: </span>
<button class='change-size' data-size='18'>18px</button>
<button class='change-size' data-size='24'>24px</button>
<button class='change-size' data-size='36'>36px</button>
<button class='change-size' data-size='48'>48px</button>
</div>
</div>
</header>
<div id="eos-icons-preview" class='container icons-container'>
<div class="controls">
<div>
<label id='switch-outlined-icon' class='switch'>
<input type='checkbox' id='switch-checkbox'>
<span class='slider round'></span>
</label>
Outline version
</div>
<a href="comparison.html">Compare styles</a>
</div>
<div id='tab' class="tabs-container">
<div class='icons-tab selected' data-name='eos-icons'>EOS</div>
<div class='icons-tab' data-name='md-icons'>Material Design</div>
</div>
<div class='latest'>
<h3>New icons since last release:</h3>
<div class='latest-icons'></div>
</div>
<div id="icons">
<% for (var glyphIdx=0; glyphIdx < glyphs.length; glyphIdx++) { var glyph=glyphs[glyphIdx] %>
<div class="icons__item" data-name="<%= glyph %>">
<i class="eos-icons">
<%= glyph %>
</i>
<br>
<%= glyph %>
</div>
<% } %>
</div>
<div id="icons-animated">
<h3>Animated icons</h3>
<div class="icons__item" data-name="loading">
<img class='eos-icons eos-icon-animated' src='../animated-svg/loading.svg'>
<br />
loading
</div>
<div class="icons__item" data-name="installing">
<img class='eos-icons eos-icon-animated' src='../animated-svg/installing.svg'>
<br>
installing
</div>
</div>
</div>
<div id="how-to-use" class='how-to-use'>
<div class='container'>
<h2 class='text-white'>
How to use it:
<small id='close-code-snippet' class='pull-right'>X Close</small>
</h2>
<% if (addLigatures) { %>
<pre><code><i class="<%= baseClass %>"><span id="name2">icon_name</span></i></code></pre>
<% } %>
</div>
</div>
<div id="how-to-use" class='how-to-use-animated'>
<div class='container'>
<h2 class='text-white'>
How to use it:
<small id='close-code-snippet-animated' class='pull-right'>X Close</small>
</h2>
<div id='animatedIconDemo'></div>
</div>
</div>
<footer>
<div class='container'>
Download from gitlab at <a href="https://gitlab.com/SUSE-UIUX/eos-icons">EOS icons</a>.
Thanks to <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.
</div>
</footer>
<script>
(function () {
var showCodeSnippet = false
var iconName
var tabName
//hide code snippet by default
document.getElementsByClassName('how-to-use')[0].style.visibility = 'hidden'
document.getElementsByClassName('how-to-use-animated')[0].style.visibility = 'hidden'
document.getElementById('icons').onclick = function (e) {
e = e || window.event;
iconName = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
document.getElementById('name2').innerHTML = iconName;
if (iconName) {
showCodeSnippet = true
console.log('something selected')
document.getElementsByClassName('how-to-use')[0].style.visibility = 'visible'
document.getElementsByClassName('how-to-use-animated')[0].style.visibility = 'hidden'
}
}
document.getElementById('icons-animated').onclick = function (e) {
e = e || window.event;
iconName = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
iconDemo = '<pre><code><i class="eos-icons eos-icon-' + iconName + '">' + '</i></code></pre>';
document.getElementById('animatedIconDemo').innerHTML = iconDemo;
if (iconName) {
showCodeSnippet = true
console.log(iconName)
document.getElementsByClassName('how-to-use-animated')[0].style.visibility = 'visible'
}
}
document.getElementById('close-code-snippet').onclick = function (e) {
showCodeSnippet = false
iconName = ''
document.getElementsByClassName('how-to-use')[0].style.visibility = 'hidden'
document.getElementsByClassName('how-to-use-animated')[0].style.visibility = 'hidden'
}
document.getElementById('close-code-snippet-animated').onclick = function (e) {
showCodeSnippet = false
iconName = ''
document.getElementsByClassName('how-to-use-animated')[0].style.visibility = 'hidden'
document.getElementsByClassName('how-to-use')[0].style.visibility = 'hidden'
}
var buttonsSizes = document.getElementsByClassName('change-size')
for (i = 0;i < buttonsSizes.length;i++) {
buttonsSizes[i].onclick = function (e) {
e = e || window.event;
iconSize = e.target.getAttribute('data-size')
for (i = 0;i < document.getElementsByClassName('eos-icons').length;i++) {
document.getElementsByClassName('eos-icons')[i].style.fontSize = iconSize + 'px';
}
for (i = 0;i < document.getElementsByClassName('eos-icons-outlined').length;i++) {
document.getElementsByClassName('eos-icons-outlined')[i].style.fontSize = iconSize + 'px';
}
for (i = 0;i < document.getElementsByClassName('eos-icon-animated').length;i++) {
document.getElementsByClassName('eos-icon-animated')[i].style.width = iconSize + 'px';
}
}
}
})();
</script>
<script src='js/new-icons.js'></script>
</body>
</html>