Add customized icon font and style changes

2016-05-22 11:06:26 +00:00 · 2016-05-22 11:06:26 +00:00 · 464f664edd
commit 464f664edd
parent 6ae3d11a83
11 changed files with 105 additions and 3 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@ -55,6 +55,11 @@ gulp.task('html', () => {
        .pipe(gulp.dest('dist/'));
 });

+gulp.task('fonts', () => {
+    return gulp.src('src/fonts/*.*')
+        .pipe(gulp.dest('dist/css/fonts/'));
+});
+
 gulp.task('images', () => {
    return gulp.src(paths.images)
        .pipe(imageMin())
@ -203,6 +208,7 @@ gulp.task('default', [
    'html',
    'images',
    'lintScss',
+    'fonts',
    'scss',
    'api'
 ], () => {
--- a/src/fonts/fontello.eot
+++ b/src/fonts/fontello.eot
--- a/src/fonts/fontello.svg
+++ b/src/fonts/fontello.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="trash-empty" unicode="&#xe800;" d="M286 439v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m143 0v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m142 0v-321q0-8-5-13t-12-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q7 0 12-5t5-13z m72-404v529h-500v-529q0-12 4-22t8-15 6-5h464q2 0 6 5t8 15 4 22z m-375 601h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q22 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="edit" unicode="&#xe801;" d="M496 189l64 65-85 85-64-65v-31h53v-54h32z m245 402q-9 9-18 0l-196-196q-9-9 0-18t18 0l196 196q9 9 0 18z m45-331v-106q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q35 0 65-14 9-4 10-13 2-10-5-16l-27-28q-8-8-18-4-13 3-25 3h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v70q0 7 5 12l36 36q8 8 20 4t11-16z m-54 411l161-160-375-375h-161v160z m248-73l-51-52-161 161 51 51q16 16 38 16t38-16l85-84q16-16 16-38t-16-38z" horiz-adv-x="1000" />
+
+<glyph glyph-name="plus" unicode="&#xe802;" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q22 0 38-16t16-38z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="help-circled" unicode="&#xe803;" d="M500 82v107q0 8-5 13t-13 5h-107q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h107q8 0 13 5t5 13z m143 375q0 49-31 91t-77 65-95 23q-136 0-207-119-9-14 4-24l74-55q4-4 10-4 9 0 14 7 30 38 48 51 19 14 48 14 27 0 48-15t21-33q0-21-11-34t-38-25q-35-16-65-48t-29-70v-20q0-8 5-13t13-5h107q8 0 13 5t5 13q0 10 12 27t30 28q18 10 28 16t25 19 25 27 16 34 7 45z m214-107q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="cancel" unicode="&#xe804;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="download" unicode="&#xe805;" d="M714 100q0 15-10 25t-25 11-26-11-10-25 10-25 26-11 25 11 10 25z m143 0q0 15-10 25t-26 11-25-11-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-37t-38-16h-821q-23 0-38 16t-16 37v179q0 22 16 38t38 16h259l75-76q33-32 76-32t76 32l76 76h259q22 0 38-16t16-38z m-182 318q10-23-8-40l-250-250q-10-10-25-10t-25 10l-250 250q-17 17-8 40 10 21 33 21h143v250q0 15 11 25t25 11h143q14 0 25-11t10-25v-250h143q24 0 33-21z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="upload" unicode="&#xe806;" d="M714 29q0 14-10 25t-25 10-26-10-10-25 10-26 26-10 25 10 10 26z m143 0q0 14-10 25t-26 10-25-10-10-25 10-26 25-10 26 10 10 26z m72 125v-179q0-22-16-38t-38-16h-821q-23 0-38 16t-16 38v179q0 22 16 38t38 15h238q12-31 39-51t62-20h143q34 0 61 20t40 51h238q22 0 38-15t16-38z m-182 361q-9-22-33-22h-143v-250q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v250h-143q-23 0-33 22-9 22 8 39l250 250q10 10 25 10t25-10l250-250q18-17 8-39z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="eye" unicode="&#xe807;" d="M929 314q-85 132-213 197 34-58 34-125 0-104-73-177t-177-73-177 73-73 177q0 67 34 125-128-65-213-197 75-114 187-182t242-68 242 68 187 182z m-402 215q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m473-215q0-19-11-38-78-129-210-206t-279-77-279 77-210 206q-11 19-11 38t11 39q78 128 210 205t279 78 279-78 210-205q11-20 11-39z" horiz-adv-x="1000" />
+
+<glyph glyph-name="comment-empty" unicode="&#xe808;" d="M500 636q-114 0-213-39t-157-105-59-142q0-62 40-119t113-98l48-28-15-54q-13-50-39-96 85 36 154 96l24 21 31-3q39-5 73-5 114 0 213 39t157 105 59 142-59 142-157 105-213 39z m500-286q0-97-67-179t-182-130-251-48q-39 0-81 4-110-97-257-135-27-8-63-12h-3q-8 0-15 6t-9 15v1q-2 2 0 6t1 6 2 5l4 5t4 5 4 5q4 5 17 19t20 22 17 22 18 28 15 33 15 42q-88 50-138 123t-51 157q0 97 67 179t182 130 251 48 251-48 182-130 67-179z" horiz-adv-x="1000" />
+
+<glyph glyph-name="chat-empty" unicode="&#xe809;" d="M393 636q-85 0-160-29t-118-79-44-107q0-45 30-88t83-73l54-32-19-46q19 11 34 21l25 18 30-6q43-8 85-8 85 0 159 29t118 79 44 106-44 107-118 79-159 29z m0 71q106 0 197-38t143-104 53-144-53-143-143-104-197-38q-48 0-98 9-70-49-155-72-21-5-48-9h-2q-6 0-12 5t-6 12q-1 1-1 3t1 4 1 3l1 3t2 3 2 3 3 3 2 2q3 3 13 14t15 16 12 17 14 21 11 25q-69 40-108 98t-40 125q0 78 53 144t143 104 197 38z m459-652q5-14 11-25t14-21 13-16 14-17 13-14q0 0 2-2t3-3 2-3 2-3l1-3t1-3 1-4-1-3q-2-8-7-13t-13-4q-27 4-48 9-85 23-155 72-50-9-98-9-151 0-263 74 32-3 49-3 90 0 172 25t148 72q69 52 107 119t37 141q0 43-13 85 72-39 114-99t42-128q0-67-40-126t-108-98z" horiz-adv-x="1000" />
+
+<glyph glyph-name="attach" unicode="&#xe80a;" d="M783 77q0-65-44-109t-109-44q-75 0-131 55l-434 434q-63 64-63 151 0 88 62 150t150 62q88 0 152-63l338-338q5-5 5-12 0-9-17-26t-26-17q-7 0-13 5l-338 339q-44 43-101 43-59 0-100-42t-40-101q0-58 42-101l433-433q35-36 81-36 36 0 59 24t24 59q0 46-36 81l-324 324q-14 14-33 14-16 0-27-11t-11-27q0-18 14-33l229-228q6-6 6-13 0-9-18-26t-26-17q-7 0-12 5l-229 229q-35 34-35 83 0 46 32 78t77 32q49 0 83-36l325-324q55-54 55-131z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="angle-double-left" unicode="&#xe80b;" d="M350 82q0-7-6-13l-28-28q-5-5-12-5t-13 5l-260 260q-6 6-6 13t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13t-6-12l-219-220 219-219q6-6 6-13z m214 0q0-7-5-13l-28-28q-6-5-13-5t-13 5l-260 260q-6 6-6 13t6 13l260 260q6 6 13 6t13-6l28-28q5-5 5-13t-5-12l-220-220 220-219q5-6 5-13z" horiz-adv-x="571.4" />
+
+<glyph glyph-name="angle-double-right" unicode="&#xe80c;" d="M332 314q0-7-6-13l-260-260q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l260-260q6-5 6-13z m214 0q0-7-5-13l-260-260q-6-5-13-5t-13 5l-28 28q-5 6-5 13t5 13l219 219-219 220q-5 5-5 12t5 13l28 28q6 6 13 6t13-6l260-260q5-5 5-13z" horiz-adv-x="571.4" />
+
+<glyph glyph-name="angle-double-down" unicode="&#xe80d;" d="M600 368q0-7-6-13l-260-260q-5-6-13-6t-12 6l-260 260q-6 6-6 13t6 13l27 28q6 5 13 5t13-5l219-220 220 220q5 5 13 5t12-5l28-28q6-6 6-13z m0 214q0-7-6-13l-260-260q-5-5-13-5t-12 5l-260 260q-6 6-6 13t6 13l27 28q6 5 13 5t13-5l219-219 220 219q5 5 13 5t12-5l28-28q6-6 6-13z" horiz-adv-x="642.9" />
+</font>
+</defs>
+</svg>
--- a/src/fonts/fontello.ttf
+++ b/src/fonts/fontello.ttf
--- a/src/fonts/fontello.woff
+++ b/src/fonts/fontello.woff
--- a/src/fonts/fontello.woff2
+++ b/src/fonts/fontello.woff2
--- a/src/scss/_core.scss
+++ b/src/scss/_core.scss
@ -10,15 +10,24 @@ h3,
 h4,
 h5,
 h6 {
+    font-family: Raleway;
    font-weight: 500;
    margin: 0;
 }

+a {
+    background-position: left 1.05em;
+}
+
 .loading {
    padding-top: 2em;
    text-align: center;
 }

+.small {
+    font-size: .8em;
+}
+
 table {
    border-collapse: collapse;
    margin-bottom: 1em;
--- a/src/scss/_icons.scss
+++ b/src/scss/_icons.scss
@ -0,0 +1,39 @@
+@font-face {
+    font-family: 'fontello';
+    src: url('./fonts/fontello.eot');
+    src: url('./fonts/fontello.woff') format('woff'),
+         url('./fonts/fontello.ttf') format('truetype'),
+         url('./fonts/fontello.svg') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.icon {
+    display: inline-block;
+    font-family: 'fontello';
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 1em;
+    speak: none;
+    text-align: center;
+    text-decoration: inherit;
+    text-transform: none;
+    width: 1em;
+}
+
+.icon-trash-empty:before { content: '\e800'; }
+.icon-edit:before { content: '\e801'; }
+.icon-plus:before { content: '\e802'; }
+.icon-help-circled:before { content: '\e803'; }
+.icon-cancel:before { content: '\e804'; }
+.icon-download:before { content: '\e805'; }
+.icon-upload:before { content: '\e806'; }
+.icon-eye:before { content: '\e807'; }
+.icon-comment-empty:before { content: '\e808'; }
+.icon-chat-empty:before { content: '\e809'; }
+.icon-attach:before { content: '\e80a'; }
+.icon-angle-double-left:before { content: '\e80b'; }
+.icon-angle-double-right:before { content: '\e80c'; }
+.icon-angle-double-down:before { content: '\e80d'; }
+
--- a/src/scss/_scss-base-settings.scss
+++ b/src/scss/_scss-base-settings.scss
@ -8,7 +8,7 @@ $color-text-button: #fff;
 $color-heading-bg: #dbe9ee;
 $color-table-row: lighten($color-text, 80%);

-$font-url: 'https://fonts.googleapis.com/css?family=Raleway:400,500|Fira+Mono';
-$font-name: 'Raleway';
+$font-url: 'https://fonts.googleapis.com/css?family=Raleway:500|Pontano+Sans|Fira+Mono';
+$font-name: 'Pontano Sans';
 $font-name-mono: 'Fira Mono';

--- a/src/scss/_settings.scss
+++ b/src/scss/_settings.scss
@ -34,6 +34,14 @@
        border: 0;
    }

+    .alternating {
+        td:last-child {
+            a {
+                background-image: none;
+            }
+        }
+    }
+
    section {
        @include clearfix();
        @include shadow-low();
@ -74,7 +82,7 @@
            .badge {
                background-color: $color-tertiary;
                border-radius: 33%;
-                box-shadow: inset 2px 2px rgba(0, 0, 0, .1);
+                box-shadow: inset 1px 1px rgba(0, 0, 0, .1);
                float: right;
                font-size: .75em;
                font-weight: 700;
@ -108,6 +116,7 @@
        }

        .autosize {
+            margin-bottom: .5em;
            width: auto;
        }

--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@ -11,4 +11,5 @@
@import 'core';
@import 'nav-top';
@import 'settings';
+@import 'icons';