sul_styles 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. checksums.yaml +4 -4
  2. data/.fontcustom-manifest.json +81 -0
  3. data/.gitignore +1 -0
  4. data/README.md +26 -3
  5. data/assets/fonts/sul-icons.eot +0 -0
  6. data/assets/fonts/sul-icons.svg +73 -0
  7. data/assets/fonts/sul-icons.ttf +0 -0
  8. data/assets/fonts/sul-icons.woff +0 -0
  9. data/assets/stylesheets/_sul-icons-aliases.scss +34 -0
  10. data/assets/stylesheets/_sul-icons-rails.scss +55 -0
  11. data/assets/stylesheets/_sul-icons.scss +64 -0
  12. data/assets/stylesheets/sul-styles.scss +2 -0
  13. data/docs/styleguide/sul-icons-preview.html +323 -0
  14. data/fontcustom.yml +97 -0
  15. data/icon_svgs/.keep +0 -0
  16. data/lib/sul_styles/version.rb +1 -1
  17. metadata +13 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 1281828a762031465c90e244fffc7b00fb73d087
4
- data.tar.gz: ad0450d428f58477e070bb85922569149fcc278c
3
+ metadata.gz: 314357614c71da68c7fd0981e03272d5aa861d8c
4
+ data.tar.gz: fbcd2d01df419e2d45c6f6df626e577bdd31ea35
5
5
  SHA512:
6
- metadata.gz: 0129a03caa11c26b01dc8a86e2034083c1941e548c98c4acacac4fbbf04b5d1a12dbd9bc479ab0962e64eb6584db11cb87dbab3b7e43bb9aa0e6b62cf446c8ef
7
- data.tar.gz: 19f64bad7bb30c47d88376205480681b2d52c6348ed033ee5badae7323412dcf89a321b3d55a4c467413761211d11d6937d4e28649a3f1e8840362164470e7ee
6
+ metadata.gz: 0848324088cb19a781feec12a98f4dbb270cfac000b492d8f19634cde8a13a88cf401039e301a37415437d349380fa6dfbdd2ab86e5e8536278a830ff140d841
7
+ data.tar.gz: 28d8355c3b276f716eda106ff10a3dec0fec6bca6a83fe87d402656eea2e1eb14d4024306b354e89ef85dd0e675ef62edbeba08c4dda8d353b009d6f9851d747
data/.fontcustom-manifest.json ADDED
@@ -0,0 +1,81 @@
1
+ {
2
+ "checksum": {
3
+ "previous": "e42480dae54162f80d2b9a365ef25c3ecd89e369cac37cd4e5c394ed9b9acb65",
4
+ "current": "e42480dae54162f80d2b9a365ef25c3ecd89e369cac37cd4e5c394ed9b9acb65"
5
+ },
6
+ "fonts": [
7
+ "assets/fonts/sul-icons.ttf",
8
+ "assets/fonts/sul-icons.svg",
9
+ "assets/fonts/sul-icons.woff",
10
+ "assets/fonts/sul-icons.eot"
11
+ ],
12
+ "glyphs": {
13
+ "download-3": {
14
+ "codepoint": 61702,
15
+ "source": "icon_svgs/download-3.svg"
16
+ },
17
+ "expand-diagonal-2": {
18
+ "codepoint": 61699,
19
+ "source": "icon_svgs/expand-diagonal-2.svg"
20
+ },
21
+ "file-new-1": {
22
+ "codepoint": 61696,
23
+ "source": "icon_svgs/file-new-1.svg"
24
+ },
25
+ "files-2": {
26
+ "codepoint": 61697,
27
+ "source": "icon_svgs/files-2.svg"
28
+ },
29
+ "infomation-circle": {
30
+ "codepoint": 61700,
31
+ "source": "icon_svgs/infomation-circle.svg"
32
+ },
33
+ "link-3": {
34
+ "codepoint": 61703,
35
+ "source": "icon_svgs/link-3.svg"
36
+ },
37
+ "share": {
38
+ "codepoint": 61701,
39
+ "source": "icon_svgs/share.svg"
40
+ },
41
+ "view-module-1": {
42
+ "codepoint": 61698,
43
+ "source": "icon_svgs/view-module-1.svg"
44
+ }
45
+ },
46
+ "options": {
47
+ "autowidth": false,
48
+ "config": "fontcustom.yml",
49
+ "css_selector": ".sul-i-{{glyph}}",
50
+ "debug": false,
51
+ "font_ascent": 448,
52
+ "font_descent": 64,
53
+ "font_design_size": 16,
54
+ "font_em": 512,
55
+ "font_name": "sul-icons",
56
+ "force": true,
57
+ "input": {
58
+ "templates": "icon_svgs",
59
+ "vectors": "icon_svgs"
60
+ },
61
+ "no_hash": true,
62
+ "output": {
63
+ "css": "assets/stylesheets",
64
+ "fonts": "assets/fonts",
65
+ "preview": "docs/styleguide"
66
+ },
67
+ "preprocessor_path": "",
68
+ "quiet": false,
69
+ "skip_first": false,
70
+ "templates": [
71
+ "scss-rails",
72
+ "scss",
73
+ "preview"
74
+ ]
75
+ },
76
+ "templates": [
77
+ "assets/stylesheets/_sul-icons-rails.scss",
78
+ "assets/stylesheets/_sul-icons.scss",
79
+ "docs/styleguide/sul-icons-preview.html"
80
+ ]
81
+ }
data/.gitignore CHANGED
@@ -7,3 +7,4 @@
7
7
  /pkg/
8
8
  /spec/reports/
9
9
  /tmp/
10
+ /icon_svgs/*.svg
data/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # SulStyles
1
+ # SUL Styles
2
2
 
3
3
  ## Installation
4
4
 
@@ -12,9 +12,32 @@ And then execute:
12
12
 
13
13
  $ bundle install
14
14
 
15
- Import the SulStyles in your `app/assets/stylesheets/application.scss`.
15
+ Import the SUL Styles in your `app/assets/stylesheets/application.scss`.
16
16
 
17
- @import 'sul-styles'
17
+ @import 'sul-styles';
18
+
19
+
20
+ ## Adding to the icon font
21
+
22
+ You can add icons to the icon font by doing the following:
23
+
24
+ 1. Make sure to have the current icons (checkout `.fontcustom-manifest.json`) as `svg` files located in the `icon_svgs` directory. These cannot be stored in version control due to licensing issues.
25
+
26
+ 1. Install [FontCustom](https://github.com/FontCustom/fontcustom/#installation)
27
+
28
+ 1. Run `fontcustom compile`
29
+
30
+ The new font should be generated under `assets/fonts`
31
+
32
+ Styles should be automatically generated under `assets/stylesheets`
33
+
34
+ **Notes**
35
+
36
+ Make sure to make use of `_sul-icons-aliases.scss` for creating easy to use aliases.
37
+
38
+ Make sure to use [semantic versioning](http://semver.org/) when adding to or updating the icon fonts
39
+
40
+ Don't change the svg's filename (it should be the same as the source it came from)
18
41
 
19
42
  ## Contributing
20
43
 
data/assets/fonts/sul-icons.eot ADDED
Binary file
data/assets/fonts/sul-icons.svg ADDED
@@ -0,0 +1,73 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3
+ <!--
4
+ 2015-7-16: Created with FontForge (http://fontforge.org)
5
+ -->
6
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
7
+ <metadata>
8
+ Created by FontForge 20150302 at Thu Jul 16 11:39:20 2015
9
+ By Jack Reed
10
+ Copyright (c) 2015, Jack Reed
11
+ </metadata>
12
+ <defs>
13
+ <font id="sul-icons" horiz-adv-x="512" >
14
+ <font-face
15
+ font-family="sul-icons"
16
+ font-weight="400"
17
+ font-stretch="normal"
18
+ units-per-em="512"
19
+ panose-1="2 0 5 3 0 0 0 0 0 0"
20
+ ascent="448"
21
+ descent="-64"
22
+ bbox="0 -64.0017 512.277 448"
23
+ underline-thickness="25.6"
24
+ underline-position="-51.2"
25
+ unicode-range="U+0020-F107"
26
+ />
27
+ <missing-glyph />
28
+ <glyph glyph-name="space" unicode=" " horiz-adv-x="200"
29
+ />
30
+ <glyph glyph-name="uniF107" unicode="&#xf107;"
31
+ d="M203.179 214.613l-98.0693 -98.0479c-16.6191 -16.6396 -16.6191 -43.6904 0 -60.3525l15.083 -15.0605c16.1494 -16.1494 44.2236 -16.1279 60.3301 0l46.3574 46.293c8.3418 8.3623 21.8242 8.3623 30.165 0c8.3418 -8.32031 8.3418 -21.8242 0 -30.165
32
+ l-46.3564 -46.3145c-16.1074 -16.1074 -37.5254 -25.0029 -60.3096 -25.0029c-22.8057 0 -44.2246 8.87402 -60.3525 25.0234l-15.082 15.0615c-33.2803 33.2803 -33.2803 87.4023 0 120.683l98.0693 98.0693c16.1279 16.1064 37.5459 24.9814 60.3301 24.9814
33
+ s44.2246 -8.875 60.3525 -25.0234l15.0615 -15.0615c8.34082 -8.32031 8.34082 -21.8457 0 -30.166c-8.3418 -8.34082 -21.8242 -8.34082 -30.166 0l-15.082 15.083c-16.1074 16.1279 -44.2031 16.1279 -60.3311 0zM338.966 139.179
34
+ c-16.1289 -16.085 -37.5469 -24.96 -60.374 -24.9814c-22.7842 0 -44.2021 8.875 -60.3301 25.0029c-8.32031 8.3623 -8.32031 21.8242 0.0205078 30.1865c8.3418 8.32031 21.8242 8.32031 30.166 -0.0214844c16.1064 -16.1279 44.2021 -16.1279 60.3096 0l98.0693 98.0479
35
+ c8.06348 8.06445 12.501 18.7734 12.501 30.166c0 11.4131 -4.4375 22.1221 -12.501 30.165l-15.083 15.1035c-8.06445 8.06445 -18.7734 12.502 -30.165 12.502c-11.3926 0 -22.1016 -4.4375 -30.166 -12.502l-42.3467 -42.3467
36
+ c-8.34082 -8.3623 -21.8447 -8.3623 -30.1865 0c-8.32031 8.32031 -8.32031 21.8242 0.0214844 30.166l42.3682 42.3467c16.1064 16.1279 37.5469 25.002 60.3301 25.002c22.7842 0 44.2031 -8.87402 60.3311 -25.002l15.083 -15.1045
37
+ c16.1279 -16.1064 25.002 -37.5254 25.002 -60.3301c0 -22.8057 -8.87402 -44.2031 -25.002 -60.3311z" />
38
+ <glyph glyph-name="uniF103" unicode="&#xf103;"
39
+ d="M176.768 143.062c8.32031 8.3623 21.8242 8.38379 30.166 0.0214844c8.34082 -8.32031 8.3623 -21.8027 0.0214844 -30.166l-134.166 -134.399h55.2109c11.7969 0 21.333 -9.55762 21.333 -21.334c0 -11.7969 -9.53613 -21.333 -21.333 -21.1836h-106.667
40
+ c-11.7969 -0.149414 -21.333 9.62109 -21.333 21.1631v0.0205078v106.667c0 11.7764 9.55762 21.333 21.333 21.333c11.7979 0 21.334 -9.55664 21.334 -21.333v-55.1035zM511.701 426.667l0.298828 -107.094c0.0214844 -11.7764 -9.49316 -21.3545 -21.291 -21.376
41
+ h-0.0419922c-11.7764 0 -21.3125 9.49316 -21.334 21.2695l-0.169922 55.7656l-134.208 -134.465c-4.16016 -4.15918 -9.62207 -6.25 -15.083 -6.25s-10.9229 2.06934 -15.083 6.22949c-8.34082 8.34082 -8.3623 21.8232 -0.0214844 30.165l134.038 134.293
42
+ l-54.5713 -0.149414h-0.0419922c-11.7764 0 -21.334 9.49414 -21.334 21.2695c-0.0419922 11.7979 9.47266 21.3545 21.2695 21.3975l106.154 0.277344c12.0752 0 21.4189 -9.77051 21.4189 -21.291v-0.0419922v0z" />
43
+ <glyph glyph-name="uniF100" unicode="&#xf100;"
44
+ d="M444.886 316.864c1.9834 -1.98438 3.11426 -4.69336 3.11426 -7.53125v-362.666c0 -5.88867 -4.77832 -10.667 -10.667 -10.667h-362.666c-5.88867 0 -10.667 4.77832 -10.667 10.667v490.666c0 5.88867 4.77832 10.667 10.667 10.667h234.666
45
+ c2.81641 0 5.54688 -1.13086 7.55273 -3.13574zM298.667 298.667h128l-128 128v-128z" />
46
+ <glyph glyph-name="uniF105" unicode="&#xf105;"
47
+ d="M416.256 128c52.9922 0 96.0215 -42.9863 96.0215 -96s-43.0078 -96 -96 -96c-53.0352 0 -96 42.9863 -96 96c0 11.6484 2.1543 22.7627 5.95215 33.0879l-149.61 74.8164c-17.6221 -27.2852 -47.4463 -43.9043 -80.3633 -43.9043c-52.9277 0 -96 43.0723 -96 96
48
+ s43.0723 96 96 96c32.917 0 62.7412 -16.6396 80.3418 -43.9043l149.61 74.8164c-3.77637 10.3252 -5.95215 21.4395 -5.95215 33.0879c0 53.0137 42.9658 96 96 96c52.9922 0 96 -42.9863 96 -96s-43.0078 -96 -96 -96c-33.7705 0 -63.4238 17.4502 -80.5117 43.8184
49
+ l-149.44 -74.709c3.94727 -10.624 5.95215 -21.7178 5.95215 -33.1094s-2.00488 -22.5068 -5.95215 -33.1094l149.44 -74.7305c17.0879 26.3682 46.7412 43.8398 80.5117 43.8398z" />
50
+ <glyph glyph-name="uniF106" unicode="&#xf106;"
51
+ d="M248.448 45.7812l-149.334 149.333c-3.0498 3.07227 -3.96777 7.61621 -2.3252 11.627c1.66406 3.98926 5.54688 6.5918 9.87793 6.5918h64v224c0 5.88867 4.77832 10.667 10.666 10.667h149.334c5.86621 0 10.666 -4.77832 10.666 -10.667v-224.021l64 0.0214844
52
+ c4.28809 0 8.19238 -2.60254 9.83496 -6.5918c1.68555 -4.01074 0.767578 -8.55469 -2.28223 -11.627l-149.334 -149.333c-2.00488 -1.98438 -4.73535 -3.11426 -7.55176 -3.11426c-2.83691 0 -5.54688 1.12988 -7.55176 3.11426zM490.667 74.667
53
+ c11.7754 0 21.333 -9.53613 21.333 -21.334v-96c0 -11.7754 -9.55762 -21.333 -21.333 -21.333h-469.334c-11.7969 0 -21.333 9.55762 -21.333 21.333v96c0 11.7979 9.53613 21.334 21.333 21.334c11.7764 0 21.334 -9.53613 21.334 -21.334v-74.666h426.666v74.666
54
+ c0 11.7979 9.53613 21.334 21.334 21.334z" />
55
+ <glyph glyph-name="uniF101" unicode="&#xf101;"
56
+ d="M508.886 295.53c1.9834 -1.9834 3.11426 -4.69336 3.11426 -7.53027v-298.667c0 -5.8877 -4.77832 -10.666 -10.667 -10.666h-234.666c-5.88867 0 -10.667 4.77832 -10.667 10.666v405.334c0 5.8877 4.77832 10.666 10.667 10.666h128
57
+ c2.81543 0 5.5459 -1.12988 7.55176 -3.13574zM384 277.333h106.667l-106.667 106.667v-106.667zM224 405.333c5.8877 0 10.667 -4.77832 10.667 -10.666v-405.334c0 -5.8877 -4.7793 -10.666 -10.667 -10.666h-213.333c-5.88867 0 -10.667 4.77832 -10.667 10.666v298.667
58
+ c0 2.83691 1.13086 5.54688 3.13574 7.53027l106.667 106.667c1.98438 2.00586 4.71484 3.13574 7.53027 3.13574h106.667zM128 277.333v106.667l-106.667 -106.667h106.667z" />
59
+ <glyph glyph-name="uniF104" unicode="&#xf104;"
60
+ d="M245.354 426.667c135.274 0 245.334 -110.038 245.334 -245.334s-110.06 -245.333 -245.334 -245.333c-135.296 0 -245.333 110.037 -245.333 245.333s110.037 245.334 245.333 245.334zM234.688 320c-11.7979 0 -21.334 -9.55762 -21.334 -21.333
61
+ c0 -11.7979 9.53613 -21.334 21.334 -21.334c11.7539 0 21.333 9.53613 21.333 21.334c0 11.7754 -9.5791 21.333 -21.333 21.333zM309.354 21.333c5.86719 0 10.667 4.7793 10.667 10.667s-4.7998 10.667 -10.667 10.667h-53.3545v181.333
62
+ c0.0214844 5.8877 -4.77832 10.667 -10.6455 10.667h-42.666c-5.88867 0 -10.667 -4.7793 -10.667 -10.667s4.77832 -10.667 10.667 -10.667h31.9785v-170.666h-53.3125c-5.8877 0 -10.666 -4.7793 -10.666 -10.667s4.77832 -10.667 10.666 -10.667h128z" />
63
+ <glyph glyph-name="uniF102" unicode="&#xf102;"
64
+ d="M309.333 448c5.86719 0 10.667 -4.77832 10.667 -10.667v-128c0 -5.8877 -4.7998 -10.666 -10.667 -10.666h-128c-5.8877 0 -10.666 4.77832 -10.666 10.666v128c0 5.88867 4.77832 10.667 10.666 10.667h128zM138.667 448c5.86621 0 10.666 -4.77832 10.666 -10.667
65
+ v-128c0 -5.8877 -4.7998 -10.666 -10.666 -10.666h-128c-5.88867 0 -10.667 4.77832 -10.667 10.666v128c0 5.88867 4.77832 10.667 10.667 10.667h128zM480 448c5.86621 0 10.667 -4.77832 10.667 -10.667v-128c0 -5.8877 -4.80078 -10.666 -10.667 -10.666h-128
66
+ c-5.8877 0 -10.667 4.77832 -10.667 10.666v128c0 5.88867 4.7793 10.667 10.667 10.667h128zM309.333 277.333c5.86719 0 10.667 -4.77832 10.667 -10.666v-128c0 -5.88867 -4.7998 -10.667 -10.667 -10.667h-128c-5.8877 0 -10.666 4.77832 -10.666 10.667v128
67
+ c0 5.8877 4.77832 10.666 10.666 10.666h128zM138.667 277.333c5.86621 0 10.666 -4.77832 10.666 -10.666v-128c0 -5.88867 -4.7998 -10.667 -10.666 -10.667h-128c-5.88867 0 -10.667 4.77832 -10.667 10.667v128c0 5.8877 4.77832 10.666 10.667 10.666h128zM480 277.333
68
+ c5.86621 0 10.667 -4.77832 10.667 -10.666v-128c0 -5.88867 -4.80078 -10.667 -10.667 -10.667h-128c-5.8877 0 -10.667 4.77832 -10.667 10.667v128c0 5.8877 4.7793 10.666 10.667 10.666h128zM309.333 106.667c5.86719 0 10.667 -4.7793 10.667 -10.667v-128
69
+ c0 -5.8877 -4.7998 -10.667 -10.667 -10.667h-128c-5.8877 0 -10.666 4.7793 -10.666 10.667v128c0 5.8877 4.77832 10.667 10.666 10.667h128zM138.667 106.667c5.86621 0 10.666 -4.7793 10.666 -10.667v-128c0 -5.8877 -4.7998 -10.667 -10.666 -10.667h-128
70
+ c-5.88867 0 -10.667 4.7793 -10.667 10.667v128c0 5.8877 4.77832 10.667 10.667 10.667h128zM480 106.667c5.86621 0 10.667 -4.7793 10.667 -10.667v-128c0 -5.8877 -4.80078 -10.667 -10.667 -10.667h-128c-5.8877 0 -10.667 4.7793 -10.667 10.667v128
71
+ c0 5.8877 4.7793 10.667 10.667 10.667h128z" />
72
+ </font>
73
+ </defs></svg>
data/assets/fonts/sul-icons.ttf ADDED
Binary file
data/assets/fonts/sul-icons.woff ADDED
Binary file
data/assets/stylesheets/_sul-icons-aliases.scss ADDED
@@ -0,0 +1,34 @@
1
+ // Aliases for easier use of sul-icons
2
+
3
+ .sul-i-download {
4
+ @extend .sul-i-download-3;
5
+ }
6
+
7
+ .sul-i-expand {
8
+ @extend .sul-i-expand-diagonal-2;
9
+ }
10
+
11
+ .sul-i-fullscreen {
12
+ @extend .sul-i-expand-diagonal-2;
13
+ }
14
+
15
+ .sul-i-singlepage {
16
+ @extend .sul-i-file-new-1;
17
+ }
18
+
19
+ .sul-i-twopage {
20
+ @extend .sul-i-files-2;
21
+ }
22
+
23
+ .sul-i-info {
24
+ @extend .sul-i-infomation-circle;
25
+ }
26
+
27
+ .sul-i-link {
28
+ @extend .sul-i-link-3;
29
+ }
30
+
31
+ .sul-i-gallery {
32
+ @extend .sul-i-view-module-1;
33
+ }
34
+
data/assets/stylesheets/_sul-icons-rails.scss ADDED
@@ -0,0 +1,55 @@
1
+ //
2
+ // Icon Font: sul-icons
3
+ //
4
+
5
+ @font-face {
6
+ font-family: "sul-icons";
7
+ src: font-url("sul-icons.eot");
8
+ src: font-url("sul-icons.eot?#iefix") format("embedded-opentype"),
9
+ font-url("sul-icons.woff") format("woff"),
10
+ font-url("sul-icons.ttf") format("truetype"),
11
+ font-url("sul-icons.svg#sul-icons") format("svg");
12
+ font-weight: normal;
13
+ font-style: normal;
14
+ }
15
+
16
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
17
+ @font-face {
18
+ font-family: "sul-icons";
19
+ src: font-url("sul-icons.svg#sul-icons") format("svg");
20
+ }
21
+ }
22
+
23
+ [data-icon]:before { content: attr(data-icon); }
24
+
25
+ [data-icon]:before,
26
+ .sul-i-download-3:before,
27
+ .sul-i-expand-diagonal-2:before,
28
+ .sul-i-file-new-1:before,
29
+ .sul-i-files-2:before,
30
+ .sul-i-infomation-circle:before,
31
+ .sul-i-link-3:before,
32
+ .sul-i-share:before,
33
+ .sul-i-view-module-1:before {
34
+ display: inline-block;
35
+ font-family: "sul-icons";
36
+ font-style: normal;
37
+ font-weight: normal;
38
+ font-variant: normal;
39
+ line-height: 1;
40
+ text-decoration: inherit;
41
+ text-rendering: optimizeLegibility;
42
+ text-transform: none;
43
+ -moz-osx-font-smoothing: grayscale;
44
+ -webkit-font-smoothing: antialiased;
45
+ font-smoothing: antialiased;
46
+ }
47
+
48
+ .sul-i-download-3:before { content: "\f106"; }
49
+ .sul-i-expand-diagonal-2:before { content: "\f103"; }
50
+ .sul-i-file-new-1:before { content: "\f100"; }
51
+ .sul-i-files-2:before { content: "\f101"; }
52
+ .sul-i-infomation-circle:before { content: "\f104"; }
53
+ .sul-i-link-3:before { content: "\f107"; }
54
+ .sul-i-share:before { content: "\f105"; }
55
+ .sul-i-view-module-1:before { content: "\f102"; }
data/assets/stylesheets/_sul-icons.scss ADDED
@@ -0,0 +1,64 @@
1
+ //
2
+ // Icon Font: sul-icons
3
+ //
4
+
5
+ @font-face {
6
+ font-family: "sul-icons";
7
+ src: url("sul-icons.eot");
8
+ src: url("sul-icons.eot?#iefix") format("embedded-opentype"),
9
+ url("sul-icons.woff") format("woff"),
10
+ url("sul-icons.ttf") format("truetype"),
11
+ url("sul-icons.svg#sul-icons") format("svg");
12
+ font-weight: normal;
13
+ font-style: normal;
14
+ }
15
+
16
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
17
+ @font-face {
18
+ font-family: "sul-icons";
19
+ src: url("sul-icons.svg#sul-icons") format("svg");
20
+ }
21
+ }
22
+
23
+ [data-icon]:before { content: attr(data-icon); }
24
+
25
+ [data-icon]:before,
26
+ .sul-i-download-3:before,
27
+ .sul-i-expand-diagonal-2:before,
28
+ .sul-i-file-new-1:before,
29
+ .sul-i-files-2:before,
30
+ .sul-i-infomation-circle:before,
31
+ .sul-i-link-3:before,
32
+ .sul-i-share:before,
33
+ .sul-i-view-module-1:before {
34
+ display: inline-block;
35
+ font-family: "sul-icons";
36
+ font-style: normal;
37
+ font-weight: normal;
38
+ font-variant: normal;
39
+ line-height: 1;
40
+ text-decoration: inherit;
41
+ text-rendering: optimizeLegibility;
42
+ text-transform: none;
43
+ -moz-osx-font-smoothing: grayscale;
44
+ -webkit-font-smoothing: antialiased;
45
+ font-smoothing: antialiased;
46
+ }
47
+
48
+ .sul-i-download-3:before { content: "\f106"; }
49
+ .sul-i-expand-diagonal-2:before { content: "\f103"; }
50
+ .sul-i-file-new-1:before { content: "\f100"; }
51
+ .sul-i-files-2:before { content: "\f101"; }
52
+ .sul-i-infomation-circle:before { content: "\f104"; }
53
+ .sul-i-link-3:before { content: "\f107"; }
54
+ .sul-i-share:before { content: "\f105"; }
55
+ .sul-i-view-module-1:before { content: "\f102"; }
56
+
57
+ $font-sul-icons-download-3: "\f106";
58
+ $font-sul-icons-expand-diagonal-2: "\f103";
59
+ $font-sul-icons-file-new-1: "\f100";
60
+ $font-sul-icons-files-2: "\f101";
61
+ $font-sul-icons-infomation-circle: "\f104";
62
+ $font-sul-icons-link-3: "\f107";
63
+ $font-sul-icons-share: "\f105";
64
+ $font-sul-icons-view-module-1: "\f102";
data/assets/stylesheets/sul-styles.scss CHANGED
@@ -1,3 +1,5 @@
1
1
 
2
2
  @import 'sul-styles/su_web_colors';
3
3
  @import 'sul-styles/su_primary_colors';
4
+ @import 'sul-icons-rails';
5
+ @import 'sul-icons-aliases';
data/docs/styleguide/sul-icons-preview.html ADDED
@@ -0,0 +1,323 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>sul-icons glyphs preview</title>
5
+
6
+ <style>
7
+ /* Page Styles */
8
+
9
+ * {
10
+ -moz-box-sizing: border-box;
11
+ -webkit-box-sizing: border-box;
12
+ box-sizing: border-box;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ body {
18
+ background: #fff;
19
+ color: #444;
20
+ font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
21
+ }
22
+
23
+ a,
24
+ a:visited {
25
+ color: #888;
26
+ text-decoration: underline;
27
+ }
28
+ a:hover,
29
+ a:focus { color: #000; }
30
+
31
+ header {
32
+ border-bottom: 2px solid #ddd;
33
+ margin-bottom: 20px;
34
+ overflow: hidden;
35
+ padding: 20px 0;
36
+ }
37
+
38
+ header h1 {
39
+ color: #888;
40
+ float: left;
41
+ font-size: 36px;
42
+ font-weight: 300;
43
+ }
44
+
45
+ header a {
46
+ float: right;
47
+ font-size: 14px;
48
+ }
49
+
50
+ .container {
51
+ margin: 0 auto;
52
+ max-width: 1200px;
53
+ min-width: 960px;
54
+ padding: 0 40px;
55
+ width: 90%;
56
+ }
57
+
58
+ .glyph {
59
+ border-bottom: 1px dotted #ccc;
60
+ padding: 10px 0 20px;
61
+ margin-bottom: 20px;
62
+ }
63
+
64
+ .preview-glyphs { vertical-align: bottom; }
65
+
66
+ .preview-scale {
67
+ color: #888;
68
+ font-size: 12px;
69
+ margin-top: 5px;
70
+ }
71
+
72
+ .step {
73
+ display: inline-block;
74
+ line-height: 1;
75
+ position: relative;
76
+ width: 10%;
77
+ }
78
+
79
+ .step .letters,
80
+ .step i {
81
+ -webkit-transition: opacity .3s;
82
+ -moz-transition: opacity .3s;
83
+ -ms-transition: opacity .3s;
84
+ -o-transition: opacity .3s;
85
+ transition: opacity .3s;
86
+ }
87
+
88
+ .step:hover .letters { opacity: 1; }
89
+ .step:hover i { opacity: .3; }
90
+
91
+ .letters {
92
+ opacity: .3;
93
+ position: absolute;
94
+ }
95
+
96
+ .characters-off .letters { display: none; }
97
+ .characters-off .step:hover i { opacity: 1; }
98
+
99
+
100
+ .size-12 { font-size: 12px; }
101
+
102
+ .size-14 { font-size: 14px; }
103
+
104
+ .size-16 { font-size: 16px; }
105
+
106
+ .size-18 { font-size: 18px; }
107
+
108
+ .size-21 { font-size: 21px; }
109
+
110
+ .size-24 { font-size: 24px; }
111
+
112
+ .size-36 { font-size: 36px; }
113
+
114
+ .size-48 { font-size: 48px; }
115
+
116
+ .size-60 { font-size: 60px; }
117
+
118
+ .size-72 { font-size: 72px; }
119
+
120
+
121
+ .usage { margin-top: 10px; }
122
+
123
+ .usage input {
124
+ font-family: monospace;
125
+ margin-right: 3px;
126
+ padding: 2px 5px;
127
+ text-align: center;
128
+ }
129
+
130
+ .usage .point { width: 150px; }
131
+
132
+ .usage .class { width: 250px; }
133
+
134
+ footer {
135
+ color: #888;
136
+ font-size: 12px;
137
+ padding: 20px 0;
138
+ }
139
+
140
+ /* Icon Font: sul-icons */
141
+
142
+ @font-face {
143
+ font-family: "sul-icons";
144
+ src: url("../../assets/fonts/sul-icons.eot");
145
+ src: url("../../assets/fonts/sul-icons.eot?#iefix") format("embedded-opentype"),
146
+ url("../../assets/fonts/sul-icons.woff") format("woff"),
147
+ url("../../assets/fonts/sul-icons.ttf") format("truetype"),
148
+ url("../../assets/fonts/sul-icons.svg#sul-icons") format("svg");
149
+ font-weight: normal;
150
+ font-style: normal;
151
+ }
152
+
153
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
154
+ @font-face {
155
+ font-family: "sul-icons";
156
+ src: url("../../assets/fonts/sul-icons.svg#sul-icons") format("svg");
157
+ }
158
+ }
159
+
160
+ [data-icon]:before { content: attr(data-icon); }
161
+
162
+ [data-icon]:before,
163
+ .sul-i-download-3:before,
164
+ .sul-i-expand-diagonal-2:before,
165
+ .sul-i-file-new-1:before,
166
+ .sul-i-files-2:before,
167
+ .sul-i-infomation-circle:before,
168
+ .sul-i-link-3:before,
169
+ .sul-i-share:before,
170
+ .sul-i-view-module-1:before {
171
+ display: inline-block;
172
+ font-family: "sul-icons";
173
+ font-style: normal;
174
+ font-weight: normal;
175
+ font-variant: normal;
176
+ line-height: 1;
177
+ text-decoration: inherit;
178
+ text-rendering: optimizeLegibility;
179
+ text-transform: none;
180
+ -moz-osx-font-smoothing: grayscale;
181
+ -webkit-font-smoothing: antialiased;
182
+ font-smoothing: antialiased;
183
+ }
184
+
185
+ .sul-i-download-3:before { content: "\f106"; }
186
+ .sul-i-expand-diagonal-2:before { content: "\f103"; }
187
+ .sul-i-file-new-1:before { content: "\f100"; }
188
+ .sul-i-files-2:before { content: "\f101"; }
189
+ .sul-i-infomation-circle:before { content: "\f104"; }
190
+ .sul-i-link-3:before { content: "\f107"; }
191
+ .sul-i-share:before { content: "\f105"; }
192
+ .sul-i-view-module-1:before { content: "\f102"; }
193
+ </style>
194
+
195
+ <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
196
+
197
+ <script>
198
+ function toggleCharacters() {
199
+ var body = document.getElementsByTagName('body')[0];
200
+ body.className = body.className === 'characters-off' ? '' : 'characters-off';
201
+ }
202
+ </script>
203
+ </head>
204
+
205
+ <body class="characters-off">
206
+ <div id="page" class="container">
207
+ <header>
208
+ <h1>sul-icons contains 8 glyphs:</h1>
209
+ <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
210
+ </header>
211
+
212
+
213
+ <div class="glyph">
214
+ <div class="preview-glyphs">
215
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span>
216
+ </div>
217
+ <div class="preview-scale">
218
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
219
+ </div>
220
+ <div class="usage">
221
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-download-3" />
222
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
223
+ </div>
224
+ </div>
225
+
226
+ <div class="glyph">
227
+ <div class="preview-glyphs">
228
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span>
229
+ </div>
230
+ <div class="preview-scale">
231
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
232
+ </div>
233
+ <div class="usage">
234
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-expand-diagonal-2" />
235
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
236
+ </div>
237
+ </div>
238
+
239
+ <div class="glyph">
240
+ <div class="preview-glyphs">
241
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span>
242
+ </div>
243
+ <div class="preview-scale">
244
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
245
+ </div>
246
+ <div class="usage">
247
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-file-new-1" />
248
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
249
+ </div>
250
+ </div>
251
+
252
+ <div class="glyph">
253
+ <div class="preview-glyphs">
254
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span>
255
+ </div>
256
+ <div class="preview-scale">
257
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
258
+ </div>
259
+ <div class="usage">
260
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-files-2" />
261
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
262
+ </div>
263
+ </div>
264
+
265
+ <div class="glyph">
266
+ <div class="preview-glyphs">
267
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-infomation-circle" class="sul-i-infomation-circle"></i></span>
268
+ </div>
269
+ <div class="preview-scale">
270
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
271
+ </div>
272
+ <div class="usage">
273
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-infomation-circle" />
274
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
275
+ </div>
276
+ </div>
277
+
278
+ <div class="glyph">
279
+ <div class="preview-glyphs">
280
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span>
281
+ </div>
282
+ <div class="preview-scale">
283
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
284
+ </div>
285
+ <div class="usage">
286
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-link-3" />
287
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
288
+ </div>
289
+ </div>
290
+
291
+ <div class="glyph">
292
+ <div class="preview-glyphs">
293
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span>
294
+ </div>
295
+ <div class="preview-scale">
296
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
297
+ </div>
298
+ <div class="usage">
299
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-share" />
300
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
301
+ </div>
302
+ </div>
303
+
304
+ <div class="glyph">
305
+ <div class="preview-glyphs">
306
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span>
307
+ </div>
308
+ <div class="preview-scale">
309
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
310
+ </div>
311
+ <div class="usage">
312
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-view-module-1" />
313
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
314
+ </div>
315
+ </div>
316
+
317
+
318
+ <footer>
319
+ Made with love using <a href="http://fontcustom.com">Font Custom</a>.
320
+ </footer>
321
+ </div>
322
+ </body>
323
+ </html>
data/fontcustom.yml ADDED
@@ -0,0 +1,97 @@
1
+ # =============================================================================
2
+ # Font Custom Configuration
3
+ # This file should live in the directory where you run `fontcustom compile`.
4
+ # For more info, visit <https://github.com/FontCustom/fontcustom>.
5
+ # =============================================================================
6
+
7
+
8
+ # -----------------------------------------------------------------------------
9
+ # Project Info
10
+ # -----------------------------------------------------------------------------
11
+
12
+ # The font's name. Also determines the file names of generated templates.
13
+ font_name: sul-icons
14
+
15
+ # Format of CSS selectors. {{glyph}} is substituted for the glyph name.
16
+ css_selector: .sul-i-{{glyph}}
17
+
18
+ # Generate fonts without asset-busting hashes.
19
+ no_hash: true
20
+
21
+ # Encode WOFF fonts into the generated CSS.
22
+ #base64: true
23
+
24
+ # Forces compilation, even if inputs have not changed
25
+ force: true
26
+
27
+ # Display (possibly useful) debugging messages.
28
+ debug: false
29
+
30
+ # Hide status messages.
31
+ #quiet: true
32
+
33
+
34
+ # -----------------------------------------------------------------------------
35
+ # Input / Output Locations
36
+ # You can save generated fonts, CSS, and other files to different locations
37
+ # here. Font Custom can also read input vectors and templates from different
38
+ # places.
39
+ #
40
+ # NOTE:
41
+ # - Be sure to preserve the whitespace in these YAML hashes.
42
+ # - INPUT[:vectors] and OUTPUT[:fonts] are required. Everything else is
43
+ # optional.
44
+ # - Specify output locations for custom templates by including their file
45
+ # names as the key.
46
+ # -----------------------------------------------------------------------------
47
+
48
+ input:
49
+ vectors: icon_svgs
50
+ # templates: my/templates
51
+
52
+ output:
53
+ fonts: assets/fonts
54
+ css: assets/stylesheets
55
+ preview: docs/styleguide
56
+ # my-custom-template.yml: path/to/template/output
57
+
58
+
59
+ # -----------------------------------------------------------------------------
60
+ # Templates
61
+ # A YAML array of templates and files to generate alongside fonts. Custom
62
+ # templates should be saved in the INPUT[:templates] directory and referenced
63
+ # by their base file name.
64
+ #
65
+ # For Rails and Compass templates, set `preprocessor_path` as the relative
66
+ # path from OUTPUT[:css] to OUTPUT[:fonts]. By default, these are the same
67
+ # directory.
68
+ #
69
+ # Included in Font Custom: preview, css, scss, scss-rails
70
+ # Default: css, preview
71
+ # -----------------------------------------------------------------------------
72
+
73
+ templates:
74
+ - scss-rails
75
+ - scss
76
+ - preview
77
+ #- my-custom-template.yml
78
+
79
+ preprocessor_path: ''
80
+
81
+
82
+ # -----------------------------------------------------------------------------
83
+ # Font Settings (defaults shown)
84
+ # -----------------------------------------------------------------------------
85
+
86
+ # Size (in pica points) for which your font is designed.
87
+ #font_design_size: 16
88
+
89
+ # The em size. Setting this will scale the entire font to the given size.
90
+ #font_em: 512
91
+
92
+ # The font's ascent and descent. Used to calculate the baseline.
93
+ #font_ascent: 448
94
+ #font_descent: 64
95
+
96
+ # Horizontally fit glyphs to their individual vector widths.
97
+ #autowidth: false
data/icon_svgs/.keep ADDED
File without changes
data/lib/sul_styles/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module SulStyles
2
- VERSION = "0.1.0"
2
+ VERSION = "0.2.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sul_styles
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jack Reed
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2015-07-10 00:00:00.000000000 Z
11
+ date: 2015-07-16 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -45,16 +45,27 @@ executables: []
45
45
  extensions: []
46
46
  extra_rdoc_files: []
47
47
  files:
48
+ - ".fontcustom-manifest.json"
48
49
  - ".gitignore"
49
50
  - Gemfile
50
51
  - LICENSE
51
52
  - README.md
52
53
  - Rakefile
54
+ - assets/fonts/sul-icons.eot
55
+ - assets/fonts/sul-icons.svg
56
+ - assets/fonts/sul-icons.ttf
57
+ - assets/fonts/sul-icons.woff
58
+ - assets/stylesheets/_sul-icons-aliases.scss
59
+ - assets/stylesheets/_sul-icons-rails.scss
60
+ - assets/stylesheets/_sul-icons.scss
53
61
  - assets/stylesheets/sul-styles.scss
54
62
  - assets/stylesheets/sul-styles/su_primary_colors.scss
55
63
  - assets/stylesheets/sul-styles/su_web_colors.scss
56
64
  - bin/console
57
65
  - bin/setup
66
+ - docs/styleguide/sul-icons-preview.html
67
+ - fontcustom.yml
68
+ - icon_svgs/.keep
58
69
  - lib/sul_styles.rb
59
70
  - lib/sul_styles/version.rb
60
71
  - sul_styles.gemspec