sul_styles 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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