From f212bebf6c95323ffd52dd6deaf3b16861d3413e Mon Sep 17 00:00:00 2001 From: davegandy Date: Wed, 23 Oct 2013 00:24:08 -0400 Subject: [PATCH] re-porting to scss, fixing some fa variable names --- _config.yml | 2 +- css/font-awesome.css | 1671 ++++++++--------- less/bordered-pulled.less | 3 +- less/list.less | 9 +- less/stacked.less | 2 +- less/variables.less | 6 +- scss/_bordered-pulled.scss | 16 + scss/_core.scss | 102 +- scss/_extras.scss | 5 +- scss/_fixed-width.scss | 6 + scss/_larger.scss | 13 + scss/_list.scss | 19 + scss/_mixins.scss | 26 +- scss/_rotated-flipped.scss | 9 + scss/_spinning.scss | 30 + scss/_stacked.scss | 19 + scss/_variables.scss | 6 +- scss/font-awesome.scss | 8 +- src/Makefile | 6 +- .../font-awesome/less/bordered-pulled.less | 3 +- src/assets/font-awesome/less/list.less | 9 +- src/assets/font-awesome/less/stacked.less | 2 +- src/assets/font-awesome/less/variables.less | 6 +- .../font-awesome/scss/_bordered-pulled.scss | 19 + src/assets/font-awesome/scss/_core.scss | 103 +- .../font-awesome/scss/_fixed-width.scss | 9 + src/assets/font-awesome/scss/_larger.scss | 16 + src/assets/font-awesome/scss/_list.scss | 22 + src/assets/font-awesome/scss/_mixins.scss | 26 +- .../font-awesome/scss/_rotated-flipped.scss | 12 + .../scss/{_extras.scss => _spinning.scss} | 18 +- src/assets/font-awesome/scss/_stacked.scss | 22 + src/assets/font-awesome/scss/_variables.scss | 6 +- .../font-awesome/scss/font-awesome.scss | 8 +- 34 files changed, 1095 insertions(+), 1144 deletions(-) create mode 100644 scss/_bordered-pulled.scss create mode 100644 scss/_fixed-width.scss create mode 100644 scss/_larger.scss create mode 100644 scss/_list.scss create mode 100644 scss/_rotated-flipped.scss create mode 100644 scss/_spinning.scss create mode 100644 scss/_stacked.scss create mode 100644 src/assets/font-awesome/scss/_bordered-pulled.scss create mode 100644 src/assets/font-awesome/scss/_fixed-width.scss create mode 100644 src/assets/font-awesome/scss/_larger.scss create mode 100644 src/assets/font-awesome/scss/_list.scss create mode 100644 src/assets/font-awesome/scss/_rotated-flipped.scss rename src/assets/font-awesome/scss/{_extras.scss => _spinning.scss} (57%) create mode 100644 src/assets/font-awesome/scss/_stacked.scss diff --git a/_config.yml b/_config.yml index 1f6d1b4a0..ce34634e6 100644 --- a/_config.yml +++ b/_config.yml @@ -11,7 +11,7 @@ pygments: true permalink: pretty # ensures SCSS files are compiled -include: [_bootstrap.scss, _core.scss, _extras.scss, _icons.scss, _mixins.scss, _path.scss, _variables.scss] +include: [_bordered-pulled.scss, _core.scss, _fixed-width.scss, _icons.scss, _larger.scss, _list.scss, _mixins.scss, _path.scss, _rotated-flipped.scss, _spinning.scss, _stacked.scss, _variables.scss] # used in building icon pages icon_meta: src/icons.yml diff --git a/css/font-awesome.css b/css/font-awesome.css index 4d7137ccb..200c58944 100644 --- a/css/font-awesome.css +++ b/css/font-awesome.css @@ -1,4 +1,4 @@ -/*! +/* * Font Awesome 4.0.0 * the iconic font designed for Bootstrap * ------------------------------------------------------------------------------ @@ -27,11 +27,11 @@ * -------------------------- */ @font-face { font-family: 'FontAwesome'; - src: url('../fonts/fontawesome-webfont.eot?v=4.0.0'); - src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg'); + src: url("../fonts/fontawesome-webfont.eot?v=4.0.0"); + src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.0.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular") format("svg"); font-weight: normal; - font-style: normal; -} + font-style: normal; } + .fa { display: inline-block; font-family: FontAwesome; @@ -39,1323 +39,1312 @@ font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} + -moz-osx-font-smoothing: grayscale; } + /* makes the font 33% larger relative to the icon container */ .fa-lg { - font-size: 1.3333333333333333em; + font-size: 1.33333em; line-height: 0.75em; - vertical-align: -15%; -} + vertical-align: -15%; } + .fa-2x { - font-size: 2em; -} + font-size: 2em; } + .fa-3x { - font-size: 3em; -} + font-size: 3em; } + .fa-4x { - font-size: 4em; -} + font-size: 4em; } + .fa-5x { - font-size: 5em; -} + font-size: 5em; } + .fa-fw { - width: 1.2857142857142858em; - text-align: center; -} + width: 1.28571em; + text-align: center; } + .fa-ul { padding-left: 0; - margin-left: 2.142857142857143em; - list-style-type: none; -} -.fa-ul > li { - position: relative; -} + margin-left: 2.14286em; + list-style-type: none; } + .fa-ul > li { + position: relative; } + .fa-li { position: absolute; - left: -2.142857142857143em; - width: 2.142857142857143em; - top: 0.14285714285714285em; - text-align: center; -} -.fa-li.fa-lg { - left: -1.8571428571428572em; -} + left: -2.14286em; + width: 2.14286em; + top: 0.14286em; + text-align: center; } + .fa-li.fa-lg { + left: -1.85714em; } + .fa-border { padding: .2em .25em .15em; - border: solid 1px #eeeeee; - border-width: .08em; - border-radius: .1em; -} + border: solid 0.08em #eeeeee; + border-radius: .1em; } + .pull-right { - float: right; -} + float: right; } + .pull-left { - float: left; -} + float: left; } + .fa.pull-left { - margin-right: .3em; -} + margin-right: .3em; } .fa.pull-right { - margin-left: .3em; -} + margin-left: .3em; } + .fa-spin { -webkit-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; - animation: spin 2s infinite linear; -} + animation: spin 2s infinite linear; } + @-moz-keyframes spin { 0% { - -moz-transform: rotate(0deg); - } + -moz-transform: rotate(0deg); } + 100% { - -moz-transform: rotate(359deg); - } -} + -moz-transform: rotate(359deg); } } + @-webkit-keyframes spin { 0% { - -webkit-transform: rotate(0deg); - } + -webkit-transform: rotate(0deg); } + 100% { - -webkit-transform: rotate(359deg); - } -} + -webkit-transform: rotate(359deg); } } + @-o-keyframes spin { 0% { - -o-transform: rotate(0deg); - } + -o-transform: rotate(0deg); } + 100% { - -o-transform: rotate(359deg); - } -} + -o-transform: rotate(359deg); } } + @-ms-keyframes spin { 0% { - -ms-transform: rotate(0deg); - } + -ms-transform: rotate(0deg); } + 100% { - -ms-transform: rotate(359deg); - } -} + -ms-transform: rotate(359deg); } } + @keyframes spin { 0% { - transform: rotate(0deg); - } + transform: rotate(0deg); } + 100% { - transform: rotate(359deg); - } -} + transform: rotate(359deg); } } + .fa-rotate-90 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); - transform: rotate(90deg); -} + transform: rotate(90deg); } + .fa-rotate-180 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); - transform: rotate(180deg); -} + transform: rotate(180deg); } + .fa-rotate-270 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); - transform: rotate(270deg); -} + transform: rotate(270deg); } + .fa-flip-horizontal { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation); -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -o-transform: scale(-1, 1); - transform: scale(-1, 1); -} + transform: scale(-1, 1); } + .fa-flip-vertical { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation); -webkit-transform: scale(1, -1); -moz-transform: scale(1, -1); -ms-transform: scale(1, -1); -o-transform: scale(1, -1); - transform: scale(1, -1); -} + transform: scale(1, -1); } + .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; - vertical-align: middle; -} -.fa-stack-top, -.fa-stack-bottom { + vertical-align: middle; } + +.fa-stack-top, .fa-stack-bottom { position: absolute; width: 100%; - text-align: center; -} + text-align: center; } + .fa-stack-top { - line-height: inherit; -} + line-height: inherit; } + .fa-stack-bottom { - font-size: 2em; -} + font-size: 2em; } + .fa-inverse { - color: #ffffff; -} + color: white; } + /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-glass:before { - content: "\f000"; -} + content: "\f000"; } + .fa-music:before { - content: "\f001"; -} + content: "\f001"; } + .fa-search:before { - content: "\f002"; -} + content: "\f002"; } + .fa-envelope-o:before { - content: "\f003"; -} + content: "\f003"; } + .fa-heart:before { - content: "\f004"; -} + content: "\f004"; } + .fa-star:before { - content: "\f005"; -} + content: "\f005"; } + .fa-star-o:before { - content: "\f006"; -} + content: "\f006"; } + .fa-user:before { - content: "\f007"; -} + content: "\f007"; } + .fa-film:before { - content: "\f008"; -} + content: "\f008"; } + .fa-th-large:before { - content: "\f009"; -} + content: "\f009"; } + .fa-th:before { - content: "\f00a"; -} + content: "\f00a"; } + .fa-th-list:before { - content: "\f00b"; -} + content: "\f00b"; } + .fa-check:before { - content: "\f00c"; -} + content: "\f00c"; } + .fa-times:before { - content: "\f00d"; -} + content: "\f00d"; } + .fa-search-plus:before { - content: "\f00e"; -} + content: "\f00e"; } + .fa-search-minus:before { - content: "\f010"; -} + content: "\f010"; } + .fa-power-off:before { - content: "\f011"; -} + content: "\f011"; } + .fa-signal:before { - content: "\f012"; -} + content: "\f012"; } + .fa-gear:before, .fa-cog:before { - content: "\f013"; -} + content: "\f013"; } + .fa-trash-o:before { - content: "\f014"; -} + content: "\f014"; } + .fa-home:before { - content: "\f015"; -} + content: "\f015"; } + .fa-file-o:before { - content: "\f016"; -} + content: "\f016"; } + .fa-clock-o:before { - content: "\f017"; -} + content: "\f017"; } + .fa-road:before { - content: "\f018"; -} + content: "\f018"; } + .fa-download:before { - content: "\f019"; -} + content: "\f019"; } + .fa-arrow-circle-o-down:before { - content: "\f01a"; -} + content: "\f01a"; } + .fa-arrow-circle-o-up:before { - content: "\f01b"; -} + content: "\f01b"; } + .fa-inbox:before { - content: "\f01c"; -} + content: "\f01c"; } + .fa-play-circle-o:before { - content: "\f01d"; -} + content: "\f01d"; } + .fa-rotate-right:before, .fa-repeat:before { - content: "\f01e"; -} + content: "\f01e"; } + .fa-refresh:before { - content: "\f021"; -} + content: "\f021"; } + .fa-list-alt:before { - content: "\f022"; -} + content: "\f022"; } + .fa-lock:before { - content: "\f023"; -} + content: "\f023"; } + .fa-flag:before { - content: "\f024"; -} + content: "\f024"; } + .fa-headphones:before { - content: "\f025"; -} + content: "\f025"; } + .fa-volume-off:before { - content: "\f026"; -} + content: "\f026"; } + .fa-volume-down:before { - content: "\f027"; -} + content: "\f027"; } + .fa-volume-up:before { - content: "\f028"; -} + content: "\f028"; } + .fa-qrcode:before { - content: "\f029"; -} + content: "\f029"; } + .fa-barcode:before { - content: "\f02a"; -} + content: "\f02a"; } + .fa-tag:before { - content: "\f02b"; -} + content: "\f02b"; } + .fa-tags:before { - content: "\f02c"; -} + content: "\f02c"; } + .fa-book:before { - content: "\f02d"; -} + content: "\f02d"; } + .fa-bookmark:before { - content: "\f02e"; -} + content: "\f02e"; } + .fa-print:before { - content: "\f02f"; -} + content: "\f02f"; } + .fa-camera:before { - content: "\f030"; -} + content: "\f030"; } + .fa-font:before { - content: "\f031"; -} + content: "\f031"; } + .fa-bold:before { - content: "\f032"; -} + content: "\f032"; } + .fa-italic:before { - content: "\f033"; -} + content: "\f033"; } + .fa-text-height:before { - content: "\f034"; -} + content: "\f034"; } + .fa-text-width:before { - content: "\f035"; -} + content: "\f035"; } + .fa-align-left:before { - content: "\f036"; -} + content: "\f036"; } + .fa-align-center:before { - content: "\f037"; -} + content: "\f037"; } + .fa-align-right:before { - content: "\f038"; -} + content: "\f038"; } + .fa-align-justify:before { - content: "\f039"; -} + content: "\f039"; } + .fa-list:before { - content: "\f03a"; -} + content: "\f03a"; } + .fa-dedent:before, .fa-outdent:before { - content: "\f03b"; -} + content: "\f03b"; } + .fa-indent:before { - content: "\f03c"; -} + content: "\f03c"; } + .fa-video-camera:before { - content: "\f03d"; -} + content: "\f03d"; } + .fa-picture-o:before { - content: "\f03e"; -} + content: "\f03e"; } + .fa-pencil:before { - content: "\f040"; -} + content: "\f040"; } + .fa-map-marker:before { - content: "\f041"; -} + content: "\f041"; } + .fa-adjust:before { - content: "\f042"; -} + content: "\f042"; } + .fa-tint:before { - content: "\f043"; -} + content: "\f043"; } + .fa-edit:before, .fa-pencil-square-o:before { - content: "\f044"; -} + content: "\f044"; } + .fa-share-square-o:before { - content: "\f045"; -} + content: "\f045"; } + .fa-check-square-o:before { - content: "\f046"; -} + content: "\f046"; } + .fa-move:before { - content: "\f047"; -} + content: "\f047"; } + .fa-step-backward:before { - content: "\f048"; -} + content: "\f048"; } + .fa-fast-backward:before { - content: "\f049"; -} + content: "\f049"; } + .fa-backward:before { - content: "\f04a"; -} + content: "\f04a"; } + .fa-play:before { - content: "\f04b"; -} + content: "\f04b"; } + .fa-pause:before { - content: "\f04c"; -} + content: "\f04c"; } + .fa-stop:before { - content: "\f04d"; -} + content: "\f04d"; } + .fa-forward:before { - content: "\f04e"; -} + content: "\f04e"; } + .fa-fast-forward:before { - content: "\f050"; -} + content: "\f050"; } + .fa-step-forward:before { - content: "\f051"; -} + content: "\f051"; } + .fa-eject:before { - content: "\f052"; -} + content: "\f052"; } + .fa-chevron-left:before { - content: "\f053"; -} + content: "\f053"; } + .fa-chevron-right:before { - content: "\f054"; -} + content: "\f054"; } + .fa-plus-circle:before { - content: "\f055"; -} + content: "\f055"; } + .fa-minus-circle:before { - content: "\f056"; -} + content: "\f056"; } + .fa-times-circle:before { - content: "\f057"; -} + content: "\f057"; } + .fa-check-circle:before { - content: "\f058"; -} + content: "\f058"; } + .fa-question-circle:before { - content: "\f059"; -} + content: "\f059"; } + .fa-info-circle:before { - content: "\f05a"; -} + content: "\f05a"; } + .fa-crosshairs:before { - content: "\f05b"; -} + content: "\f05b"; } + .fa-times-circle-o:before { - content: "\f05c"; -} + content: "\f05c"; } + .fa-check-circle-o:before { - content: "\f05d"; -} + content: "\f05d"; } + .fa-ban:before { - content: "\f05e"; -} + content: "\f05e"; } + .fa-arrow-left:before { - content: "\f060"; -} + content: "\f060"; } + .fa-arrow-right:before { - content: "\f061"; -} + content: "\f061"; } + .fa-arrow-up:before { - content: "\f062"; -} + content: "\f062"; } + .fa-arrow-down:before { - content: "\f063"; -} + content: "\f063"; } + .fa-mail-forward:before, .fa-share:before { - content: "\f064"; -} + content: "\f064"; } + .fa-resize-full:before { - content: "\f065"; -} + content: "\f065"; } + .fa-resize-small:before { - content: "\f066"; -} + content: "\f066"; } + .fa-plus:before { - content: "\f067"; -} + content: "\f067"; } + .fa-minus:before { - content: "\f068"; -} + content: "\f068"; } + .fa-asterisk:before { - content: "\f069"; -} + content: "\f069"; } + .fa-exclamation-circle:before { - content: "\f06a"; -} + content: "\f06a"; } + .fa-gift:before { - content: "\f06b"; -} + content: "\f06b"; } + .fa-leaf:before { - content: "\f06c"; -} + content: "\f06c"; } + .fa-fire:before { - content: "\f06d"; -} + content: "\f06d"; } + .fa-eye:before { - content: "\f06e"; -} + content: "\f06e"; } + .fa-eye-slash:before { - content: "\f070"; -} + content: "\f070"; } + .fa-warning:before, .fa-exclamation-triangle:before { - content: "\f071"; -} + content: "\f071"; } + .fa-plane:before { - content: "\f072"; -} + content: "\f072"; } + .fa-calendar:before { - content: "\f073"; -} + content: "\f073"; } + .fa-random:before { - content: "\f074"; -} + content: "\f074"; } + .fa-comment:before { - content: "\f075"; -} + content: "\f075"; } + .fa-magnet:before { - content: "\f076"; -} + content: "\f076"; } + .fa-chevron-up:before { - content: "\f077"; -} + content: "\f077"; } + .fa-chevron-down:before { - content: "\f078"; -} + content: "\f078"; } + .fa-retweet:before { - content: "\f079"; -} + content: "\f079"; } + .fa-shopping-cart:before { - content: "\f07a"; -} + content: "\f07a"; } + .fa-folder:before { - content: "\f07b"; -} + content: "\f07b"; } + .fa-folder-open:before { - content: "\f07c"; -} + content: "\f07c"; } + .fa-resize-vertical:before { - content: "\f07d"; -} + content: "\f07d"; } + .fa-resize-horizontal:before { - content: "\f07e"; -} + content: "\f07e"; } + .fa-bar-chart-o:before { - content: "\f080"; -} + content: "\f080"; } + .fa-twitter-square:before { - content: "\f081"; -} + content: "\f081"; } + .fa-facebook-square:before { - content: "\f082"; -} + content: "\f082"; } + .fa-camera-retro:before { - content: "\f083"; -} + content: "\f083"; } + .fa-key:before { - content: "\f084"; -} + content: "\f084"; } + .fa-gears:before, .fa-cogs:before { - content: "\f085"; -} + content: "\f085"; } + .fa-comments:before { - content: "\f086"; -} + content: "\f086"; } + .fa-thumbs-o-up:before { - content: "\f087"; -} + content: "\f087"; } + .fa-thumbs-o-down:before { - content: "\f088"; -} + content: "\f088"; } + .fa-star-half:before { - content: "\f089"; -} + content: "\f089"; } + .fa-heart-o:before { - content: "\f08a"; -} + content: "\f08a"; } + .fa-sign-out:before { - content: "\f08b"; -} + content: "\f08b"; } + .fa-linkedin-square:before { - content: "\f08c"; -} + content: "\f08c"; } + .fa-thumb-tack:before { - content: "\f08d"; -} + content: "\f08d"; } + .fa-external-link:before { - content: "\f08e"; -} + content: "\f08e"; } + .fa-sign-in:before { - content: "\f090"; -} + content: "\f090"; } + .fa-trophy:before { - content: "\f091"; -} + content: "\f091"; } + .fa-github-square:before { - content: "\f092"; -} + content: "\f092"; } + .fa-upload:before { - content: "\f093"; -} + content: "\f093"; } + .fa-lemon-o:before { - content: "\f094"; -} + content: "\f094"; } + .fa-phone:before { - content: "\f095"; -} + content: "\f095"; } + .fa-square-o:before { - content: "\f096"; -} + content: "\f096"; } + .fa-bookmark-o:before { - content: "\f097"; -} + content: "\f097"; } + .fa-phone-square:before { - content: "\f098"; -} + content: "\f098"; } + .fa-twitter:before { - content: "\f099"; -} + content: "\f099"; } + .fa-facebook:before { - content: "\f09a"; -} + content: "\f09a"; } + .fa-github:before { - content: "\f09b"; -} + content: "\f09b"; } + .fa-unlock:before { - content: "\f09c"; -} + content: "\f09c"; } + .fa-credit-card:before { - content: "\f09d"; -} + content: "\f09d"; } + .fa-rss:before { - content: "\f09e"; -} + content: "\f09e"; } + .fa-hdd:before { - content: "\f0a0"; -} + content: "\f0a0"; } + .fa-bullhorn:before { - content: "\f0a1"; -} + content: "\f0a1"; } + .fa-bell:before { - content: "\f0f3"; -} + content: "\f0f3"; } + .fa-certificate:before { - content: "\f0a3"; -} + content: "\f0a3"; } + .fa-hand-o-right:before { - content: "\f0a4"; -} + content: "\f0a4"; } + .fa-hand-o-left:before { - content: "\f0a5"; -} + content: "\f0a5"; } + .fa-hand-o-up:before { - content: "\f0a6"; -} + content: "\f0a6"; } + .fa-hand-o-down:before { - content: "\f0a7"; -} + content: "\f0a7"; } + .fa-arrow-circle-left:before { - content: "\f0a8"; -} + content: "\f0a8"; } + .fa-arrow-circle-right:before { - content: "\f0a9"; -} + content: "\f0a9"; } + .fa-arrow-circle-up:before { - content: "\f0aa"; -} + content: "\f0aa"; } + .fa-arrow-circle-down:before { - content: "\f0ab"; -} + content: "\f0ab"; } + .fa-globe:before { - content: "\f0ac"; -} + content: "\f0ac"; } + .fa-wrench:before { - content: "\f0ad"; -} + content: "\f0ad"; } + .fa-tasks:before { - content: "\f0ae"; -} + content: "\f0ae"; } + .fa-filter:before { - content: "\f0b0"; -} + content: "\f0b0"; } + .fa-briefcase:before { - content: "\f0b1"; -} + content: "\f0b1"; } + .fa-fullscreen:before { - content: "\f0b2"; -} + content: "\f0b2"; } + .fa-group:before { - content: "\f0c0"; -} + content: "\f0c0"; } + .fa-chain:before, .fa-link:before { - content: "\f0c1"; -} + content: "\f0c1"; } + .fa-cloud:before { - content: "\f0c2"; -} + content: "\f0c2"; } + .fa-flask:before { - content: "\f0c3"; -} + content: "\f0c3"; } + .fa-cut:before, .fa-scissors:before { - content: "\f0c4"; -} + content: "\f0c4"; } + .fa-copy:before, .fa-files-o:before { - content: "\f0c5"; -} + content: "\f0c5"; } + .fa-paperclip:before { - content: "\f0c6"; -} + content: "\f0c6"; } + .fa-save:before, .fa-floppy-o:before { - content: "\f0c7"; -} + content: "\f0c7"; } + .fa-square:before { - content: "\f0c8"; -} + content: "\f0c8"; } + .fa-reorder:before { - content: "\f0c9"; -} + content: "\f0c9"; } + .fa-list-ul:before { - content: "\f0ca"; -} + content: "\f0ca"; } + .fa-list-ol:before { - content: "\f0cb"; -} + content: "\f0cb"; } + .fa-strikethrough:before { - content: "\f0cc"; -} + content: "\f0cc"; } + .fa-underline:before { - content: "\f0cd"; -} + content: "\f0cd"; } + .fa-table:before { - content: "\f0ce"; -} + content: "\f0ce"; } + .fa-magic:before { - content: "\f0d0"; -} + content: "\f0d0"; } + .fa-truck:before { - content: "\f0d1"; -} + content: "\f0d1"; } + .fa-pinterest:before { - content: "\f0d2"; -} + content: "\f0d2"; } + .fa-pinterest-square:before { - content: "\f0d3"; -} + content: "\f0d3"; } + .fa-google-plus-square:before { - content: "\f0d4"; -} + content: "\f0d4"; } + .fa-google-plus:before { - content: "\f0d5"; -} + content: "\f0d5"; } + .fa-money:before { - content: "\f0d6"; -} + content: "\f0d6"; } + .fa-caret-down:before { - content: "\f0d7"; -} + content: "\f0d7"; } + .fa-caret-up:before { - content: "\f0d8"; -} + content: "\f0d8"; } + .fa-caret-left:before { - content: "\f0d9"; -} + content: "\f0d9"; } + .fa-caret-right:before { - content: "\f0da"; -} + content: "\f0da"; } + .fa-columns:before { - content: "\f0db"; -} + content: "\f0db"; } + .fa-unsorted:before, .fa-sort:before { - content: "\f0dc"; -} + content: "\f0dc"; } + .fa-sort-down:before, .fa-sort-asc:before { - content: "\f0dd"; -} + content: "\f0dd"; } + .fa-sort-up:before, .fa-sort-desc:before { - content: "\f0de"; -} + content: "\f0de"; } + .fa-envelope:before { - content: "\f0e0"; -} + content: "\f0e0"; } + .fa-linkedin:before { - content: "\f0e1"; -} + content: "\f0e1"; } + .fa-rotate-left:before, .fa-undo:before { - content: "\f0e2"; -} + content: "\f0e2"; } + .fa-legal:before, .fa-gavel:before { - content: "\f0e3"; -} + content: "\f0e3"; } + .fa-dashboard:before, .fa-tachometer:before { - content: "\f0e4"; -} + content: "\f0e4"; } + .fa-comment-o:before { - content: "\f0e5"; -} + content: "\f0e5"; } + .fa-comments-o:before { - content: "\f0e6"; -} + content: "\f0e6"; } + .fa-flash:before, .fa-bolt:before { - content: "\f0e7"; -} + content: "\f0e7"; } + .fa-sitemap:before { - content: "\f0e8"; -} + content: "\f0e8"; } + .fa-umbrella:before { - content: "\f0e9"; -} + content: "\f0e9"; } + .fa-paste:before, .fa-clipboard:before { - content: "\f0ea"; -} + content: "\f0ea"; } + .fa-lightbulb-o:before { - content: "\f0eb"; -} + content: "\f0eb"; } + .fa-exchange:before { - content: "\f0ec"; -} + content: "\f0ec"; } + .fa-cloud-download:before { - content: "\f0ed"; -} + content: "\f0ed"; } + .fa-cloud-upload:before { - content: "\f0ee"; -} + content: "\f0ee"; } + .fa-user-md:before { - content: "\f0f0"; -} + content: "\f0f0"; } + .fa-stethoscope:before { - content: "\f0f1"; -} + content: "\f0f1"; } + .fa-suitcase:before { - content: "\f0f2"; -} + content: "\f0f2"; } + .fa-bell-o:before { - content: "\f0a2"; -} + content: "\f0a2"; } + .fa-coffee:before { - content: "\f0f4"; -} + content: "\f0f4"; } + .fa-cutlery:before { - content: "\f0f5"; -} + content: "\f0f5"; } + .fa-file-text-o:before { - content: "\f0f6"; -} + content: "\f0f6"; } + .fa-building:before { - content: "\f0f7"; -} + content: "\f0f7"; } + .fa-hospital:before { - content: "\f0f8"; -} + content: "\f0f8"; } + .fa-ambulance:before { - content: "\f0f9"; -} + content: "\f0f9"; } + .fa-medkit:before { - content: "\f0fa"; -} + content: "\f0fa"; } + .fa-fighter-jet:before { - content: "\f0fb"; -} + content: "\f0fb"; } + .fa-beer:before { - content: "\f0fc"; -} + content: "\f0fc"; } + .fa-h-square:before { - content: "\f0fd"; -} + content: "\f0fd"; } + .fa-plus-square:before { - content: "\f0fe"; -} + content: "\f0fe"; } + .fa-angle-double-left:before { - content: "\f100"; -} + content: "\f100"; } + .fa-angle-double-right:before { - content: "\f101"; -} + content: "\f101"; } + .fa-angle-double-up:before { - content: "\f102"; -} + content: "\f102"; } + .fa-angle-double-down:before { - content: "\f103"; -} + content: "\f103"; } + .fa-angle-left:before { - content: "\f104"; -} + content: "\f104"; } + .fa-angle-right:before { - content: "\f105"; -} + content: "\f105"; } + .fa-angle-up:before { - content: "\f106"; -} + content: "\f106"; } + .fa-angle-down:before { - content: "\f107"; -} + content: "\f107"; } + .fa-desktop:before { - content: "\f108"; -} + content: "\f108"; } + .fa-laptop:before { - content: "\f109"; -} + content: "\f109"; } + .fa-tablet:before { - content: "\f10a"; -} + content: "\f10a"; } + .fa-mobile-phone:before, .fa-mobile:before { - content: "\f10b"; -} + content: "\f10b"; } + .fa-circle-o:before { - content: "\f10c"; -} + content: "\f10c"; } + .fa-quote-left:before { - content: "\f10d"; -} + content: "\f10d"; } + .fa-quote-right:before { - content: "\f10e"; -} + content: "\f10e"; } + .fa-spinner:before { - content: "\f110"; -} + content: "\f110"; } + .fa-circle:before { - content: "\f111"; -} + content: "\f111"; } + .fa-mail-reply:before, .fa-reply:before { - content: "\f112"; -} + content: "\f112"; } + .fa-github-alt:before { - content: "\f113"; -} + content: "\f113"; } + .fa-folder-o:before { - content: "\f114"; -} + content: "\f114"; } + .fa-folder-open-o:before { - content: "\f115"; -} + content: "\f115"; } + .fa-expand-o:before { - content: "\f116"; -} + content: "\f116"; } + .fa-collapse-o:before { - content: "\f117"; -} + content: "\f117"; } + .fa-smile-o:before { - content: "\f118"; -} + content: "\f118"; } + .fa-frown-o:before { - content: "\f119"; -} + content: "\f119"; } + .fa-meh-o:before { - content: "\f11a"; -} + content: "\f11a"; } + .fa-gamepad:before { - content: "\f11b"; -} + content: "\f11b"; } + .fa-keyboard-o:before { - content: "\f11c"; -} + content: "\f11c"; } + .fa-flag-o:before { - content: "\f11d"; -} + content: "\f11d"; } + .fa-flag-checkered:before { - content: "\f11e"; -} + content: "\f11e"; } + .fa-terminal:before { - content: "\f120"; -} + content: "\f120"; } + .fa-code:before { - content: "\f121"; -} + content: "\f121"; } + .fa-reply-all:before { - content: "\f122"; -} + content: "\f122"; } + .fa-mail-reply-all:before { - content: "\f122"; -} + content: "\f122"; } + .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { - content: "\f123"; -} + content: "\f123"; } + .fa-location-arrow:before { - content: "\f124"; -} + content: "\f124"; } + .fa-crop:before { - content: "\f125"; -} + content: "\f125"; } + .fa-code-fork:before { - content: "\f126"; -} + content: "\f126"; } + .fa-unlink:before, .fa-chain-broken:before { - content: "\f127"; -} + content: "\f127"; } + .fa-question:before { - content: "\f128"; -} + content: "\f128"; } + .fa-info:before { - content: "\f129"; -} + content: "\f129"; } + .fa-exclamation:before { - content: "\f12a"; -} + content: "\f12a"; } + .fa-superscript:before { - content: "\f12b"; -} + content: "\f12b"; } + .fa-subscript:before { - content: "\f12c"; -} + content: "\f12c"; } + .fa-eraser:before { - content: "\f12d"; -} + content: "\f12d"; } + .fa-puzzle-piece:before { - content: "\f12e"; -} + content: "\f12e"; } + .fa-microphone:before { - content: "\f130"; -} + content: "\f130"; } + .fa-microphone-slash:before { - content: "\f131"; -} + content: "\f131"; } + .fa-shield:before { - content: "\f132"; -} + content: "\f132"; } + .fa-calendar-o:before { - content: "\f133"; -} + content: "\f133"; } + .fa-fire-extinguisher:before { - content: "\f134"; -} + content: "\f134"; } + .fa-rocket:before { - content: "\f135"; -} + content: "\f135"; } + .fa-maxcdn:before { - content: "\f136"; -} + content: "\f136"; } + .fa-chevron-circle-left:before { - content: "\f137"; -} + content: "\f137"; } + .fa-chevron-circle-right:before { - content: "\f138"; -} + content: "\f138"; } + .fa-chevron-circle-up:before { - content: "\f139"; -} + content: "\f139"; } + .fa-chevron-circle-down:before { - content: "\f13a"; -} + content: "\f13a"; } + .fa-html5:before { - content: "\f13b"; -} + content: "\f13b"; } + .fa-css3:before { - content: "\f13c"; -} + content: "\f13c"; } + .fa-anchor:before { - content: "\f13d"; -} + content: "\f13d"; } + .fa-unlock-o:before { - content: "\f13e"; -} + content: "\f13e"; } + .fa-bullseye:before { - content: "\f140"; -} + content: "\f140"; } + .fa-ellipsis-horizontal:before { - content: "\f141"; -} + content: "\f141"; } + .fa-ellipsis-vertical:before { - content: "\f142"; -} + content: "\f142"; } + .fa-rss-square:before { - content: "\f143"; -} + content: "\f143"; } + .fa-play-circle:before { - content: "\f144"; -} + content: "\f144"; } + .fa-ticket:before { - content: "\f145"; -} + content: "\f145"; } + .fa-minus-square:before { - content: "\f146"; -} + content: "\f146"; } + .fa-minus-square-o:before { - content: "\f147"; -} + content: "\f147"; } + .fa-level-up:before { - content: "\f148"; -} + content: "\f148"; } + .fa-level-down:before { - content: "\f149"; -} + content: "\f149"; } + .fa-check-square:before { - content: "\f14a"; -} + content: "\f14a"; } + .fa-pencil-square:before { - content: "\f14b"; -} + content: "\f14b"; } + .fa-external-link-square:before { - content: "\f14c"; -} + content: "\f14c"; } + .fa-share-square:before { - content: "\f14d"; -} + content: "\f14d"; } + .fa-compass:before { - content: "\f14e"; -} + content: "\f14e"; } + .fa-toggle-down:before, .fa-caret-square-o-down:before { - content: "\f150"; -} + content: "\f150"; } + .fa-toggle-up:before, .fa-caret-square-o-up:before { - content: "\f151"; -} + content: "\f151"; } + .fa-toggle-right:before, .fa-caret-square-o-right:before { - content: "\f152"; -} + content: "\f152"; } + .fa-euro:before, .fa-eur:before { - content: "\f153"; -} + content: "\f153"; } + .fa-gbp:before { - content: "\f154"; -} + content: "\f154"; } + .fa-dollar:before, .fa-usd:before { - content: "\f155"; -} + content: "\f155"; } + .fa-rupee:before, .fa-inr:before { - content: "\f156"; -} + content: "\f156"; } + .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { - content: "\f157"; -} + content: "\f157"; } + .fa-ruble:before, .fa-rouble:before, .fa-rub:before { - content: "\f158"; -} + content: "\f158"; } + .fa-won:before, .fa-krw:before { - content: "\f159"; -} + content: "\f159"; } + .fa-bitcoin:before, .fa-btc:before { - content: "\f15a"; -} + content: "\f15a"; } + .fa-file:before { - content: "\f15b"; -} + content: "\f15b"; } + .fa-file-text:before { - content: "\f15c"; -} + content: "\f15c"; } + .fa-sort-alpha-asc:before { - content: "\f15d"; -} + content: "\f15d"; } + .fa-sort-alpha-desc:before { - content: "\f15e"; -} + content: "\f15e"; } + .fa-sort-amount-asc:before { - content: "\f160"; -} + content: "\f160"; } + .fa-sort-amount-desc:before { - content: "\f161"; -} + content: "\f161"; } + .fa-sort-numeric-asc:before { - content: "\f162"; -} + content: "\f162"; } + .fa-sort-numeric-desc:before { - content: "\f163"; -} + content: "\f163"; } + .fa-thumbs-up:before { - content: "\f164"; -} + content: "\f164"; } + .fa-thumbs-down:before { - content: "\f165"; -} + content: "\f165"; } + .fa-youtube-square:before { - content: "\f166"; -} + content: "\f166"; } + .fa-youtube:before { - content: "\f167"; -} + content: "\f167"; } + .fa-xing:before { - content: "\f168"; -} + content: "\f168"; } + .fa-xing-square:before { - content: "\f169"; -} + content: "\f169"; } + .fa-youtube-play:before { - content: "\f16a"; -} + content: "\f16a"; } + .fa-dropbox:before { - content: "\f16b"; -} + content: "\f16b"; } + .fa-stack-overflow:before { - content: "\f16c"; -} + content: "\f16c"; } + .fa-instagram:before { - content: "\f16d"; -} + content: "\f16d"; } + .fa-flickr:before { - content: "\f16e"; -} + content: "\f16e"; } + .fa-adn:before { - content: "\f170"; -} + content: "\f170"; } + .fa-bitbucket:before { - content: "\f171"; -} + content: "\f171"; } + .fa-bitbucket-square:before { - content: "\f172"; -} + content: "\f172"; } + .fa-tumblr:before { - content: "\f173"; -} + content: "\f173"; } + .fa-tumblr-square:before { - content: "\f174"; -} + content: "\f174"; } + .fa-long-arrow-down:before { - content: "\f175"; -} + content: "\f175"; } + .fa-long-arrow-up:before { - content: "\f176"; -} + content: "\f176"; } + .fa-long-arrow-left:before { - content: "\f177"; -} + content: "\f177"; } + .fa-long-arrow-right:before { - content: "\f178"; -} + content: "\f178"; } + .fa-apple:before { - content: "\f179"; -} + content: "\f179"; } + .fa-windows:before { - content: "\f17a"; -} + content: "\f17a"; } + .fa-android:before { - content: "\f17b"; -} + content: "\f17b"; } + .fa-linux:before { - content: "\f17c"; -} + content: "\f17c"; } + .fa-dribbble:before { - content: "\f17d"; -} + content: "\f17d"; } + .fa-skype:before { - content: "\f17e"; -} + content: "\f17e"; } + .fa-foursquare:before { - content: "\f180"; -} + content: "\f180"; } + .fa-trello:before { - content: "\f181"; -} + content: "\f181"; } + .fa-female:before { - content: "\f182"; -} + content: "\f182"; } + .fa-male:before { - content: "\f183"; -} + content: "\f183"; } + .fa-gittip:before { - content: "\f184"; -} + content: "\f184"; } + .fa-sun-o:before { - content: "\f185"; -} + content: "\f185"; } + .fa-moon-o:before { - content: "\f186"; -} + content: "\f186"; } + .fa-archive:before { - content: "\f187"; -} + content: "\f187"; } + .fa-bug:before { - content: "\f188"; -} + content: "\f188"; } + .fa-vk:before { - content: "\f189"; -} + content: "\f189"; } + .fa-weibo:before { - content: "\f18a"; -} + content: "\f18a"; } + .fa-renren:before { - content: "\f18b"; -} + content: "\f18b"; } + .fa-pagelines:before { - content: "\f18c"; -} + content: "\f18c"; } + .fa-stack-exchange:before { - content: "\f18d"; -} + content: "\f18d"; } + .fa-arrow-circle-o-right:before { - content: "\f18e"; -} + content: "\f18e"; } + .fa-arrow-circle-o-left:before { - content: "\f190"; -} + content: "\f190"; } + .fa-toggle-left:before, .fa-caret-square-o-left:before { - content: "\f191"; -} + content: "\f191"; } + .fa-dot-circle-o:before { - content: "\f192"; -} + content: "\f192"; } + .fa-wheelchair:before { - content: "\f193"; -} + content: "\f193"; } + .fa-vimeo-square:before { - content: "\f194"; -} + content: "\f194"; } + .fa-turkish-lira:before, .fa-try:before { - content: "\f195"; -} + content: "\f195"; } diff --git a/less/bordered-pulled.less b/less/bordered-pulled.less index 6d2bfca1c..0c90eb567 100644 --- a/less/bordered-pulled.less +++ b/less/bordered-pulled.less @@ -3,8 +3,7 @@ .@{fa-css-prefix}-border { padding: .2em .25em .15em; - border: solid 1px @fa-border-color; - border-width: .08em; + border: solid .08em @fa-border-color; border-radius: .1em; } diff --git a/less/list.less b/less/list.less index b68afc9d5..eed934051 100644 --- a/less/list.less +++ b/less/list.less @@ -3,18 +3,17 @@ .@{fa-css-prefix}-ul { padding-left: 0; - margin-left: @fa-icon-li-width; + margin-left: @fa-li-width; list-style-type: none; > li { position: relative; } } .@{fa-css-prefix}-li { position: absolute; - left: -@fa-icon-li-width; - width: @fa-icon-li-width; + left: -@fa-li-width; + width: @fa-li-width; top: (2em / 14); text-align: center; &.@{fa-css-prefix}-lg { - left: -@fa-icon-li-width + (4em / 14); + left: -@fa-li-width + (4em / 14); } } - diff --git a/less/stacked.less b/less/stacked.less index fc1dc121d..4d6b15347 100644 --- a/less/stacked.less +++ b/less/stacked.less @@ -16,4 +16,4 @@ } .@{fa-css-prefix}-stack-top { line-height: inherit; } .@{fa-css-prefix}-stack-bottom { font-size: 2em; } -.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; } +.@{fa-css-prefix}-inverse { color: @fa-inverse; } diff --git a/less/variables.less b/less/variables.less index eb0096473..256e23691 100644 --- a/less/variables.less +++ b/less/variables.less @@ -2,12 +2,12 @@ // -------------------------- @fa-font-path: "../fonts"; -//@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font"; // for referencing Bootstrap CDN font files directly +//@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font"; // for referencing Bootstrap CDN font files directly @fa-css-prefix: fa; @fa-version: "4.0.0"; @fa-border-color: #eee; -@fa-icon-inverse: #fff; -@fa-icon-li-width: (30em / 14); +@fa-inverse: #fff; +@fa-li-width: (30em / 14); @fa-var-glass: "\f000"; @fa-var-music: "\f001"; diff --git a/scss/_bordered-pulled.scss b/scss/_bordered-pulled.scss new file mode 100644 index 000000000..9d3fdf3a0 --- /dev/null +++ b/scss/_bordered-pulled.scss @@ -0,0 +1,16 @@ +// Bordered & Pulled +// ------------------------- + +.#{$fa-css-prefix}-border { + padding: .2em .25em .15em; + border: solid .08em $fa-border-color; + border-radius: .1em; +} + +.pull-right { float: right; } +.pull-left { float: left; } + +.#{$fa-css-prefix} { + &.pull-left { margin-right: .3em; } + &.pull-right { margin-left: .3em; } +} diff --git a/scss/_core.scss b/scss/_core.scss index be1cd682e..861ccd9dc 100644 --- a/scss/_core.scss +++ b/scss/_core.scss @@ -1,5 +1,5 @@ -/* FONT AWESOME CORE - * -------------------------- */ +// Base Class Definition +// ------------------------- .#{$fa-css-prefix} { display: inline-block; @@ -10,101 +10,3 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -/* makes the font 33% larger relative to the icon container */ -.#{$fa-css-prefix}-lg { - font-size: (4em / 3); - line-height: (3em / 4); - vertical-align: -15%; -} - -.#{$fa-css-prefix}-fixed-width { - width: (18em / 14); - text-align: center; -} - - -// Icon UL & LI -// ------------------------- - -.#{$fa-css-prefix}-ul { - padding-left: 0; - margin-left: $fa-icon-li-width; - list-style-type: none; - - > li { position: relative; } -} -.#{$fa-css-prefix}-li { - position: absolute; - left: -$fa-icon-li-width; - width: $fa-icon-li-width; - top: (2em / 14); - text-align: center; - &.#{$fa-css-prefix}-lg { - left: -$fa-icon-li-width + (4em / 14); - } -} - - -// allows usage of the hide class directly on font awesome icons -.#{$fa-css-prefix}.hide { display: none; } - -.#{$fa-css-prefix}-muted { color: $fa-icon-muted; } -.#{$fa-css-prefix}-light { color: $fa-icon-light; } -.#{$fa-css-prefix}-dark { color: $fa-icon-dark; } - - -// Icon Borders -// ------------------------- - -.#{$fa-css-prefix}-border { - padding: .2em .25em .15em; - border: solid 1px $fa-border-color; - border-radius: 3px; -} - - -// Icon Sizes -// ------------------------- - -.#{$fa-css-prefix}-2x { - font-size: 2em; - &.#{$fa-css-prefix}-border { - border-width: 2px; - border-radius: 4px; - } -} -.#{$fa-css-prefix}-3x { - font-size: 3em; - &.#{$fa-css-prefix}-border { - border-width: 3px; - border-radius: 5px; - } -} -.#{$fa-css-prefix}-4x { - font-size: 4em; - &.#{$fa-css-prefix}-border { - border-width: 4px; - border-radius: 6px; - } -} -.#{$fa-css-prefix}-5x { - font-size: 5em; - &.#{$fa-css-prefix}-border { - border-width: 5px; - border-radius: 7px; - } -} - - -// Floats & Margins -// ------------------------- - -// Quick floats -.pull-right { float: right; } -.pull-left { float: left; } - -.#{$fa-css-prefix} { - &.pull-left { margin-right: .3em; } - &.pull-right { margin-left: .3em; } -} diff --git a/scss/_extras.scss b/scss/_extras.scss index 06d33b929..93139c5b2 100644 --- a/scss/_extras.scss +++ b/scss/_extras.scss @@ -2,7 +2,6 @@ * -------------------------- */ /* Stacked and layered icon */ -@include fa-icon-stack(); /* Animated rotating icon */ .#{$fa-css-prefix}-spin { @@ -41,5 +40,5 @@ .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } -.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1); } -.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1); } +.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } +.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } diff --git a/scss/_fixed-width.scss b/scss/_fixed-width.scss new file mode 100644 index 000000000..b221c9813 --- /dev/null +++ b/scss/_fixed-width.scss @@ -0,0 +1,6 @@ +// Fixed Width Icons +// ------------------------- +.#{$fa-css-prefix}-fw { + width: (18em / 14); + text-align: center; +} diff --git a/scss/_larger.scss b/scss/_larger.scss new file mode 100644 index 000000000..41e9a8184 --- /dev/null +++ b/scss/_larger.scss @@ -0,0 +1,13 @@ +// Icon Sizes +// ------------------------- + +/* makes the font 33% larger relative to the icon container */ +.#{$fa-css-prefix}-lg { + font-size: (4em / 3); + line-height: (3em / 4); + vertical-align: -15%; +} +.#{$fa-css-prefix}-2x { font-size: 2em; } +.#{$fa-css-prefix}-3x { font-size: 3em; } +.#{$fa-css-prefix}-4x { font-size: 4em; } +.#{$fa-css-prefix}-5x { font-size: 5em; } diff --git a/scss/_list.scss b/scss/_list.scss new file mode 100644 index 000000000..7d1e4d54d --- /dev/null +++ b/scss/_list.scss @@ -0,0 +1,19 @@ +// List Icons +// ------------------------- + +.#{$fa-css-prefix}-ul { + padding-left: 0; + margin-left: $fa-li-width; + list-style-type: none; + > li { position: relative; } +} +.#{$fa-css-prefix}-li { + position: absolute; + left: -$fa-li-width; + width: $fa-li-width; + top: (2em / 14); + text-align: center; + &.#{$fa-css-prefix}-lg { + left: -$fa-li-width + (4em / 14); + } +} diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 6f7ab8d65..9f555963f 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -10,33 +10,11 @@ transform: rotate($degrees); } -@mixin fa-icon-flip($horiz, $vert) { +@mixin fa-icon-flip($horiz, $vert, $rotation) { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation); -webkit-transform: scale($horiz, $vert); -moz-transform: scale($horiz, $vert); -ms-transform: scale($horiz, $vert); -o-transform: scale($horiz, $vert); transform: scale($horiz, $vert); } - -@mixin fa-icon-stack($width: 2em, $height: 2em, $top-font-size: 1em, $base-font-size: 2em) { - .#{$fa-css-prefix}-stack { - position: relative; - display: inline-block; - width: $width; - height: $height; - line-height: $width; - vertical-align: -35%; - .#{$fa-css-prefix} { - position: absolute; - display: block; - width: 100%; - height: 100%; - font-size: $top-font-size; - line-height: inherit; - text-align: center; - } - .#{$fa-css-prefix}-stack-base { - font-size: $base-font-size; - } - } -} diff --git a/scss/_rotated-flipped.scss b/scss/_rotated-flipped.scss new file mode 100644 index 000000000..343fa5507 --- /dev/null +++ b/scss/_rotated-flipped.scss @@ -0,0 +1,9 @@ +// Rotated & Flipped Icons +// ------------------------- + +.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } +.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } +.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } + +.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } +.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } diff --git a/scss/_spinning.scss b/scss/_spinning.scss new file mode 100644 index 000000000..ba1e4f162 --- /dev/null +++ b/scss/_spinning.scss @@ -0,0 +1,30 @@ +// Spinning Icons +// -------------------------- + +.#{$fa-css-prefix}-spin { + -webkit-animation: spin 2s infinite linear; + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; +} + +@-moz-keyframes spin { + 0% { -moz-transform: rotate(0deg); } + 100% { -moz-transform: rotate(359deg); } +} +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(359deg); } +} +@-o-keyframes spin { + 0% { -o-transform: rotate(0deg); } + 100% { -o-transform: rotate(359deg); } +} +@-ms-keyframes spin { + 0% { -ms-transform: rotate(0deg); } + 100% { -ms-transform: rotate(359deg); } +} +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(359deg); } +} diff --git a/scss/_stacked.scss b/scss/_stacked.scss new file mode 100644 index 000000000..9271fb711 --- /dev/null +++ b/scss/_stacked.scss @@ -0,0 +1,19 @@ +// Stacked Icons +// ------------------------- + +.#{$fa-css-prefix}-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} +.#{$fa-css-prefix}-stack-top, .#{$fa-css-prefix}-stack-bottom { + position: absolute; + width: 100%; + text-align: center; +} +.#{$fa-css-prefix}-stack-top { line-height: inherit; } +.#{$fa-css-prefix}-stack-bottom { font-size: 2em; } +.#{$fa-css-prefix}-inverse { color: $fa-inverse; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 7bd7fd244..b1036c62a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -6,10 +6,8 @@ $fa-font-path: "../fonts" !default; $fa-css-prefix: fa; $fa-version: "4.0.0" !default; $fa-border-color: #eee !default; -$fa-icon-muted: #eee !default; -$fa-icon-light: #fff !default; -$fa-icon-dark: #333 !default; -$fa-icon-li-width: (30em / 14); +$fa-inverse: #fff !default; +$fa-li-width: (30em / 14); $fa-var-glass: "\f000"; $fa-var-music: "\f001"; diff --git a/scss/font-awesome.scss b/scss/font-awesome.scss index 82bc75bf8..62c0e0e17 100644 --- a/scss/font-awesome.scss +++ b/scss/font-awesome.scss @@ -28,5 +28,11 @@ @import "mixins"; @import "path"; @import "core"; -@import "extras"; +@import "larger"; +@import "fixed-width"; +@import "list"; +@import "bordered-pulled"; +@import "spinning"; +@import "rotated-flipped"; +@import "stacked"; @import "icons"; diff --git a/src/Makefile b/src/Makefile index 3490be194..2eeaeb8c9 100644 --- a/src/Makefile +++ b/src/Makefile @@ -23,9 +23,9 @@ build: @echo "Compiling Less files" @mkdir -p ${FA_CSS_DIRECTORY} - lessc ${FA_LESS_MODERN} > ${FA_CSS_MODERN} - lessc --compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN} -# sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN} +# lessc ${FA_LESS_MODERN} > ${FA_CSS_MODERN} +# lessc --compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN} + sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN} lessc --compress ${SITE_LESS} > ${SITE_CSS_MIN} cp -r ${FA_ROOT_DIRECTORY}/* ../ diff --git a/src/assets/font-awesome/less/bordered-pulled.less b/src/assets/font-awesome/less/bordered-pulled.less index b67082313..7b5bf77a9 100644 --- a/src/assets/font-awesome/less/bordered-pulled.less +++ b/src/assets/font-awesome/less/bordered-pulled.less @@ -6,8 +6,7 @@ .@{fa-css-prefix}-border { padding: .2em .25em .15em; - border: solid 1px @fa-border-color; - border-width: .08em; + border: solid .08em @fa-border-color; border-radius: .1em; } diff --git a/src/assets/font-awesome/less/list.less b/src/assets/font-awesome/less/list.less index badf15499..ffcae1df7 100644 --- a/src/assets/font-awesome/less/list.less +++ b/src/assets/font-awesome/less/list.less @@ -6,18 +6,17 @@ .@{fa-css-prefix}-ul { padding-left: 0; - margin-left: @fa-icon-li-width; + margin-left: @fa-li-width; list-style-type: none; > li { position: relative; } } .@{fa-css-prefix}-li { position: absolute; - left: -@fa-icon-li-width; - width: @fa-icon-li-width; + left: -@fa-li-width; + width: @fa-li-width; top: (2em / 14); text-align: center; &.@{fa-css-prefix}-lg { - left: -@fa-icon-li-width + (4em / 14); + left: -@fa-li-width + (4em / 14); } } - diff --git a/src/assets/font-awesome/less/stacked.less b/src/assets/font-awesome/less/stacked.less index fb1f68397..760899f1f 100644 --- a/src/assets/font-awesome/less/stacked.less +++ b/src/assets/font-awesome/less/stacked.less @@ -19,4 +19,4 @@ } .@{fa-css-prefix}-stack-top { line-height: inherit; } .@{fa-css-prefix}-stack-bottom { font-size: 2em; } -.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; } +.@{fa-css-prefix}-inverse { color: @fa-inverse; } diff --git a/src/assets/font-awesome/less/variables.less b/src/assets/font-awesome/less/variables.less index 9948c244d..708fc7cf2 100644 --- a/src/assets/font-awesome/less/variables.less +++ b/src/assets/font-awesome/less/variables.less @@ -4,12 +4,12 @@ // -------------------------- @fa-font-path: "../fonts"; -//@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly +//@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly @fa-css-prefix: {{ site.fontawesome.css_prefix }}; @fa-version: "{{ site.fontawesome.version }}"; @fa-border-color: #eee; -@fa-icon-inverse: #fff; -@fa-icon-li-width: (30em / 14); +@fa-inverse: #fff; +@fa-li-width: (30em / 14); {% for icon in icons %}@fa-var-{{ icon.id }}: "\{{ icon.unicode }}"; {% endfor %} diff --git a/src/assets/font-awesome/scss/_bordered-pulled.scss b/src/assets/font-awesome/scss/_bordered-pulled.scss new file mode 100644 index 000000000..39e3a1b83 --- /dev/null +++ b/src/assets/font-awesome/scss/_bordered-pulled.scss @@ -0,0 +1,19 @@ +--- +--- + +// Bordered & Pulled +// ------------------------- + +.#{$fa-css-prefix}-border { + padding: .2em .25em .15em; + border: solid .08em $fa-border-color; + border-radius: .1em; +} + +.pull-right { float: right; } +.pull-left { float: left; } + +.#{$fa-css-prefix} { + &.pull-left { margin-right: .3em; } + &.pull-right { margin-left: .3em; } +} diff --git a/src/assets/font-awesome/scss/_core.scss b/src/assets/font-awesome/scss/_core.scss index 0c789f704..50dfbd384 100644 --- a/src/assets/font-awesome/scss/_core.scss +++ b/src/assets/font-awesome/scss/_core.scss @@ -1,7 +1,8 @@ --- --- -/* FONT AWESOME CORE - * -------------------------- */ + +// Base Class Definition +// ------------------------- .#{$fa-css-prefix} { display: inline-block; @@ -12,101 +13,3 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -/* makes the font 33% larger relative to the icon container */ -.#{$fa-css-prefix}-lg { - font-size: (4em / 3); - line-height: (3em / 4); - vertical-align: -15%; -} - -.#{$fa-css-prefix}-fixed-width { - width: (18em / 14); - text-align: center; -} - - -// Icon UL & LI -// ------------------------- - -.#{$fa-css-prefix}-ul { - padding-left: 0; - margin-left: $fa-icon-li-width; - list-style-type: none; - - > li { position: relative; } -} -.#{$fa-css-prefix}-li { - position: absolute; - left: -$fa-icon-li-width; - width: $fa-icon-li-width; - top: (2em / 14); - text-align: center; - &.#{$fa-css-prefix}-lg { - left: -$fa-icon-li-width + (4em / 14); - } -} - - -// allows usage of the hide class directly on font awesome icons -.#{$fa-css-prefix}.hide { display: none; } - -.#{$fa-css-prefix}-muted { color: $fa-icon-muted; } -.#{$fa-css-prefix}-light { color: $fa-icon-light; } -.#{$fa-css-prefix}-dark { color: $fa-icon-dark; } - - -// Icon Borders -// ------------------------- - -.#{$fa-css-prefix}-border { - padding: .2em .25em .15em; - border: solid 1px $fa-border-color; - border-radius: 3px; -} - - -// Icon Sizes -// ------------------------- - -.#{$fa-css-prefix}-2x { - font-size: 2em; - &.#{$fa-css-prefix}-border { - border-width: 2px; - border-radius: 4px; - } -} -.#{$fa-css-prefix}-3x { - font-size: 3em; - &.#{$fa-css-prefix}-border { - border-width: 3px; - border-radius: 5px; - } -} -.#{$fa-css-prefix}-4x { - font-size: 4em; - &.#{$fa-css-prefix}-border { - border-width: 4px; - border-radius: 6px; - } -} -.#{$fa-css-prefix}-5x { - font-size: 5em; - &.#{$fa-css-prefix}-border { - border-width: 5px; - border-radius: 7px; - } -} - - -// Floats & Margins -// ------------------------- - -// Quick floats -.pull-right { float: right; } -.pull-left { float: left; } - -.#{$fa-css-prefix} { - &.pull-left { margin-right: .3em; } - &.pull-right { margin-left: .3em; } -} diff --git a/src/assets/font-awesome/scss/_fixed-width.scss b/src/assets/font-awesome/scss/_fixed-width.scss new file mode 100644 index 000000000..cfb14543a --- /dev/null +++ b/src/assets/font-awesome/scss/_fixed-width.scss @@ -0,0 +1,9 @@ +--- +--- + +// Fixed Width Icons +// ------------------------- +.#{$fa-css-prefix}-fw { + width: (18em / 14); + text-align: center; +} diff --git a/src/assets/font-awesome/scss/_larger.scss b/src/assets/font-awesome/scss/_larger.scss new file mode 100644 index 000000000..403572384 --- /dev/null +++ b/src/assets/font-awesome/scss/_larger.scss @@ -0,0 +1,16 @@ +--- +--- + +// Icon Sizes +// ------------------------- + +/* makes the font 33% larger relative to the icon container */ +.#{$fa-css-prefix}-lg { + font-size: (4em / 3); + line-height: (3em / 4); + vertical-align: -15%; +} +.#{$fa-css-prefix}-2x { font-size: 2em; } +.#{$fa-css-prefix}-3x { font-size: 3em; } +.#{$fa-css-prefix}-4x { font-size: 4em; } +.#{$fa-css-prefix}-5x { font-size: 5em; } diff --git a/src/assets/font-awesome/scss/_list.scss b/src/assets/font-awesome/scss/_list.scss new file mode 100644 index 000000000..1c6498268 --- /dev/null +++ b/src/assets/font-awesome/scss/_list.scss @@ -0,0 +1,22 @@ +--- +--- + +// List Icons +// ------------------------- + +.#{$fa-css-prefix}-ul { + padding-left: 0; + margin-left: $fa-li-width; + list-style-type: none; + > li { position: relative; } +} +.#{$fa-css-prefix}-li { + position: absolute; + left: -$fa-li-width; + width: $fa-li-width; + top: (2em / 14); + text-align: center; + &.#{$fa-css-prefix}-lg { + left: -$fa-li-width + (4em / 14); + } +} diff --git a/src/assets/font-awesome/scss/_mixins.scss b/src/assets/font-awesome/scss/_mixins.scss index 2c4c78fcf..b25e71762 100644 --- a/src/assets/font-awesome/scss/_mixins.scss +++ b/src/assets/font-awesome/scss/_mixins.scss @@ -12,33 +12,11 @@ transform: rotate($degrees); } -@mixin fa-icon-flip($horiz, $vert) { +@mixin fa-icon-flip($horiz, $vert, $rotation) { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation); -webkit-transform: scale($horiz, $vert); -moz-transform: scale($horiz, $vert); -ms-transform: scale($horiz, $vert); -o-transform: scale($horiz, $vert); transform: scale($horiz, $vert); } - -@mixin fa-icon-stack($width: 2em, $height: 2em, $top-font-size: 1em, $base-font-size: 2em) { - .#{$fa-css-prefix}-stack { - position: relative; - display: inline-block; - width: $width; - height: $height; - line-height: $width; - vertical-align: -35%; - .#{$fa-css-prefix} { - position: absolute; - display: block; - width: 100%; - height: 100%; - font-size: $top-font-size; - line-height: inherit; - text-align: center; - } - .#{$fa-css-prefix}-stack-base { - font-size: $base-font-size; - } - } -} diff --git a/src/assets/font-awesome/scss/_rotated-flipped.scss b/src/assets/font-awesome/scss/_rotated-flipped.scss new file mode 100644 index 000000000..243502112 --- /dev/null +++ b/src/assets/font-awesome/scss/_rotated-flipped.scss @@ -0,0 +1,12 @@ +--- +--- + +// Rotated & Flipped Icons +// ------------------------- + +.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } +.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } +.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } + +.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } +.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } diff --git a/src/assets/font-awesome/scss/_extras.scss b/src/assets/font-awesome/scss/_spinning.scss similarity index 57% rename from src/assets/font-awesome/scss/_extras.scss rename to src/assets/font-awesome/scss/_spinning.scss index 4b3592927..b7fa99c95 100644 --- a/src/assets/font-awesome/scss/_extras.scss +++ b/src/assets/font-awesome/scss/_spinning.scss @@ -1,12 +1,9 @@ --- --- -/* EXTRAS - * -------------------------- */ -/* Stacked and layered icon */ -@include fa-icon-stack(); +// Spinning Icons +// -------------------------- -/* Animated rotating icon */ .#{$fa-css-prefix}-spin { -webkit-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; @@ -34,14 +31,3 @@ 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } - - -// Icon rotations & flipping -// ------------------------- - -.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } -.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } -.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } - -.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1); } -.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1); } diff --git a/src/assets/font-awesome/scss/_stacked.scss b/src/assets/font-awesome/scss/_stacked.scss new file mode 100644 index 000000000..90204ee6a --- /dev/null +++ b/src/assets/font-awesome/scss/_stacked.scss @@ -0,0 +1,22 @@ +--- +--- + +// Stacked Icons +// ------------------------- + +.#{$fa-css-prefix}-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} +.#{$fa-css-prefix}-stack-top, .#{$fa-css-prefix}-stack-bottom { + position: absolute; + width: 100%; + text-align: center; +} +.#{$fa-css-prefix}-stack-top { line-height: inherit; } +.#{$fa-css-prefix}-stack-bottom { font-size: 2em; } +.#{$fa-css-prefix}-inverse { color: $fa-inverse; } diff --git a/src/assets/font-awesome/scss/_variables.scss b/src/assets/font-awesome/scss/_variables.scss index 628859b3e..0e8c74984 100644 --- a/src/assets/font-awesome/scss/_variables.scss +++ b/src/assets/font-awesome/scss/_variables.scss @@ -8,10 +8,8 @@ $fa-font-path: "../fonts" !default; $fa-css-prefix: {{ site.fontawesome.css_prefix }}; $fa-version: "{{ site.fontawesome.version }}" !default; $fa-border-color: #eee !default; -$fa-icon-muted: #eee !default; -$fa-icon-light: #fff !default; -$fa-icon-dark: #333 !default; -$fa-icon-li-width: (30em / 14); +$fa-inverse: #fff !default; +$fa-li-width: (30em / 14); {% for icon in icons %}$fa-var-{{ icon.id }}: "\{{ icon.unicode }}"; {% endfor %} diff --git a/src/assets/font-awesome/scss/font-awesome.scss b/src/assets/font-awesome/scss/font-awesome.scss index fa202c72d..28bfc296b 100644 --- a/src/assets/font-awesome/scss/font-awesome.scss +++ b/src/assets/font-awesome/scss/font-awesome.scss @@ -6,5 +6,11 @@ @import "mixins"; @import "path"; @import "core"; -@import "extras"; +@import "larger"; +@import "fixed-width"; +@import "list"; +@import "bordered-pulled"; +@import "spinning"; +@import "rotated-flipped"; +@import "stacked"; @import "icons";