From 043042428ce7eea3daec258743349ff23c40b6e6 Mon Sep 17 00:00:00 2001 From: friendica Date: Tue, 8 Oct 2013 16:11:20 -0700 Subject: add font_awesome --- .../src/assets/font-awesome/less/bootstrap.less | 84 ++++++++++++++ .../src/assets/font-awesome/less/core.less | 129 +++++++++++++++++++++ .../src/assets/font-awesome/less/extras.less | 93 +++++++++++++++ .../assets/font-awesome/less/font-awesome-ie7.less | 67 +++++++++++ .../src/assets/font-awesome/less/font-awesome.less | 11 ++ .../src/assets/font-awesome/less/icons.less | 7 ++ .../src/assets/font-awesome/less/mixins.less | 48 ++++++++ .../src/assets/font-awesome/less/path.less | 14 +++ .../src/assets/font-awesome/less/variables.less | 17 +++ 9 files changed, 470 insertions(+) create mode 100644 library/font_awesome/src/assets/font-awesome/less/bootstrap.less create mode 100644 library/font_awesome/src/assets/font-awesome/less/core.less create mode 100644 library/font_awesome/src/assets/font-awesome/less/extras.less create mode 100644 library/font_awesome/src/assets/font-awesome/less/font-awesome-ie7.less create mode 100644 library/font_awesome/src/assets/font-awesome/less/font-awesome.less create mode 100644 library/font_awesome/src/assets/font-awesome/less/icons.less create mode 100644 library/font_awesome/src/assets/font-awesome/less/mixins.less create mode 100644 library/font_awesome/src/assets/font-awesome/less/path.less create mode 100644 library/font_awesome/src/assets/font-awesome/less/variables.less (limited to 'library/font_awesome/src/assets/font-awesome/less') diff --git a/library/font_awesome/src/assets/font-awesome/less/bootstrap.less b/library/font_awesome/src/assets/font-awesome/less/bootstrap.less new file mode 100644 index 000000000..a2c96046b --- /dev/null +++ b/library/font_awesome/src/assets/font-awesome/less/bootstrap.less @@ -0,0 +1,84 @@ +/* BOOTSTRAP SPECIFIC CLASSES + * -------------------------- */ + +/* Bootstrap 2.0 sprites.less reset */ +[class^="icon-"], +[class*=" icon-"] { + display: inline; + width: auto; + height: auto; + line-height: normal; + vertical-align: baseline; + background-image: none; + background-position: 0% 0%; + background-repeat: repeat; + margin-top: 0; +} + +/* more sprites.less reset */ +.icon-white, +.nav-pills > .active > a > [class^="icon-"], +.nav-pills > .active > a > [class*=" icon-"], +.nav-list > .active > a > [class^="icon-"], +.nav-list > .active > a > [class*=" icon-"], +.navbar-inverse .nav > .active > a > [class^="icon-"], +.navbar-inverse .nav > .active > a > [class*=" icon-"], +.dropdown-menu > li > a:hover > [class^="icon-"], +.dropdown-menu > li > a:hover > [class*=" icon-"], +.dropdown-menu > .active > a > [class^="icon-"], +.dropdown-menu > .active > a > [class*=" icon-"], +.dropdown-submenu:hover > a > [class^="icon-"], +.dropdown-submenu:hover > a > [class*=" icon-"] { + background-image: none; +} + + +/* keeps Bootstrap styles with and without icons the same */ +.btn, .nav { + [class^="icon-"], + [class*=" icon-"] { +// display: inline; + &.icon-large { line-height: .9em; } + &.icon-spin { display: inline-block; } + } +} +.nav-tabs, .nav-pills { + [class^="icon-"], + [class*=" icon-"] { + &, &.icon-large { line-height: .9em; } + } +} +.btn { + [class^="icon-"], + [class*=" icon-"] { + &.pull-left, &.pull-right { + &.icon-2x { margin-top: .18em; } + } + &.icon-spin.icon-large { line-height: .8em; } + } +} +.btn.btn-small { + [class^="icon-"], + [class*=" icon-"] { + &.pull-left, &.pull-right { + &.icon-2x { margin-top: .25em; } + } + } +} +.btn.btn-large { + [class^="icon-"], + [class*=" icon-"] { + margin-top: 0; // overrides bootstrap default + &.pull-left, &.pull-right { + &.icon-2x { margin-top: .05em; } + } + &.pull-left.icon-2x { margin-right: .2em; } + &.pull-right.icon-2x { margin-left: .2em; } + } +} + +/* Fixes alignment in nav lists */ +.nav-list [class^="icon-"], +.nav-list [class*=" icon-"] { + line-height: inherit; +} diff --git a/library/font_awesome/src/assets/font-awesome/less/core.less b/library/font_awesome/src/assets/font-awesome/less/core.less new file mode 100644 index 000000000..1ef7e2235 --- /dev/null +++ b/library/font_awesome/src/assets/font-awesome/less/core.less @@ -0,0 +1,129 @@ +/* FONT AWESOME CORE + * -------------------------- */ + +[class^="icon-"], +[class*=" icon-"] { + .icon-FontAwesome(); +} + +[class^="icon-"]:before, +[class*=" icon-"]:before { + text-decoration: inherit; + display: inline-block; + speak: none; +} + +/* makes the font 33% larger relative to the icon container */ +.icon-large:before { + vertical-align: -10%; + font-size: 4/3em; +} + +/* makes sure icons active on rollover in links */ +a { + [class^="icon-"], + [class*=" icon-"] { + display: inline; + } +} + +/* increased font size for icon-large */ +[class^="icon-"], +[class*=" icon-"] { + &.icon-fixed-width { + display: inline-block; + width: 16/14em; + text-align: right; + padding-right: 4/14em; + &.icon-large { + width: 20/14em; + } + } +} + +.icons-ul { + margin-left: @icons-li-width; + list-style-type: none; + + > li { position: relative; } + + .icon-li { + position: absolute; + left: -@icons-li-width; + width: @icons-li-width; + text-align: center; + line-height: inherit; + } +} + +// allows usage of the hide class directly on font awesome icons +[class^="icon-"], +[class*=" icon-"] { + &.hide { + display: none; + } +} + +.icon-muted { color: @iconMuted; } +.icon-light { color: @iconLight; } +.icon-dark { color: @iconDark; } + +// Icon Borders +// ------------------------- + +.icon-border { + border: solid 1px @borderColor; + padding: .2em .25em .15em; + .border-radius(3px); +} + +// Icon Sizes +// ------------------------- + +.icon-2x { + font-size: 2em; + &.icon-border { + border-width: 2px; + .border-radius(4px); + } +} +.icon-3x { + font-size: 3em; + &.icon-border { + border-width: 3px; + .border-radius(5px); + } +} +.icon-4x { + font-size: 4em; + &.icon-border { + border-width: 4px; + .border-radius(6px); + } +} + +.icon-5x { + font-size: 5em; + &.icon-border { + border-width: 5px; + .border-radius(7px); + } +} + + +// Floats & Margins +// ------------------------- + +// Quick floats +.pull-right { float: right; } +.pull-left { float: left; } + +[class^="icon-"], +[class*=" icon-"] { + &.pull-left { + margin-right: .3em; + } + &.pull-right { + margin-left: .3em; + } +} diff --git a/library/font_awesome/src/assets/font-awesome/less/extras.less b/library/font_awesome/src/assets/font-awesome/less/extras.less new file mode 100644 index 000000000..c93c260c8 --- /dev/null +++ b/library/font_awesome/src/assets/font-awesome/less/extras.less @@ -0,0 +1,93 @@ +/* EXTRAS + * -------------------------- */ + +/* Stacked and layered icon */ +.icon-stack(); + +/* Animated rotating icon */ +.icon-spin { + display: inline-block; + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; +} + +/* Prevent stack and spinners from being taken inline when inside a link */ +a .icon-stack, +a .icon-spin { + display: inline-block; + text-decoration: none; +} + +@-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); } +} + +/* Icon rotations and mirroring */ +.icon-rotate-90:before { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); +} + +.icon-rotate-180:before { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); +} + +.icon-rotate-270:before { + -webkit-transform: rotate(270deg); + -moz-transform: rotate(270deg); + -ms-transform: rotate(270deg); + -o-transform: rotate(270deg); + transform: rotate(270deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); +} + +.icon-flip-horizontal:before { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + transform: scale(-1, 1); +} + +.icon-flip-vertical:before { + -webkit-transform: scale(1, -1); + -moz-transform: scale(1, -1); + -ms-transform: scale(1, -1); + -o-transform: scale(1, -1); + transform: scale(1, -1); +} + +/* ensure rotation occurs inside anchor tags */ +a { + .icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical { + &:before { display: inline-block; } + } +} diff --git a/library/font_awesome/src/assets/font-awesome/less/font-awesome-ie7.less b/library/font_awesome/src/assets/font-awesome/less/font-awesome-ie7.less new file mode 100644 index 000000000..2822fdee6 --- /dev/null +++ b/library/font_awesome/src/assets/font-awesome/less/font-awesome-ie7.less @@ -0,0 +1,67 @@ +--- +--- +{% include license-code.less %} + +.icon-large { + font-size: 4/3em; + margin-top: -4px; + padding-top: 3px; + margin-bottom: -4px; + padding-bottom: 3px; + vertical-align: middle; +} + +.nav { + [class^="icon-"], + [class*=" icon-"] { + vertical-align: inherit; + margin-top: -4px; + padding-top: 3px; + margin-bottom: -4px; + padding-bottom: 3px; + &.icon-large { + vertical-align: -25%; + } + } +} + +.nav-pills, .nav-tabs { + [class^="icon-"], + [class*=" icon-"] { + &.icon-large { + line-height: .75em; + margin-top: -7px; + padding-top: 5px; + margin-bottom: -5px; + padding-bottom: 4px; + } + } +} + +.btn { + [class^="icon-"], + [class*=" icon-"] { + &.pull-left, &.pull-right { vertical-align: inherit; } + &.icon-large { + margin-top: -.5em; + } + } +} + +a [class^="icon-"], +a [class*=" icon-"] { + cursor: pointer; +} + +.ie7icon(@inner) { *zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner}')"; } + +{% for icon in icons %} +.icon-{{ icon.id }} { + .ie7icon('&#x{{ icon.unicode }};'); +} +{% for alias in icon.aliases %} +.icon-{{ alias }} { + .ie7icon('&#x{{ icon.unicode }};'); +} +{% endfor %} +{% endfor %} diff --git a/library/font_awesome/src/assets/font-awesome/less/font-awesome.less b/library/font_awesome/src/assets/font-awesome/less/font-awesome.less new file mode 100644 index 000000000..fa87c2752 --- /dev/null +++ b/library/font_awesome/src/assets/font-awesome/less/font-awesome.less @@ -0,0 +1,11 @@ +--- +--- +{% include license-code.less %} + +@import "variables.less"; +@import "mixins.less"; +@import "path.less"; +@import "core.less"; +@import "bootstrap.less"; +@import "extras.less"; +@import "icons.less"; diff --git a/library/font_awesome/src/assets/font-awesome/less/icons.less b/library/font_awesome/src/assets/font-awesome/less/icons.less new file mode 100644 index 000000000..faf238b5e --- /dev/null +++ b/library/font_awesome/src/assets/font-awesome/less/icons.less @@ -0,0 +1,7 @@ +--- +--- +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen + readers do not read off random characters that represent icons */ +{% for icon in icons %}{% for alias in icon.aliases %} +.icon-{{ alias }}:before,{% endfor %} +.icon-{{ icon.id }}:before { content: @{{ icon.id }}; }{% endfor %} diff --git a/library/font_awesome/src/assets/font-awesome/less/mixins.less b/library/font_awesome/src/assets/font-awesome/less/mixins.less new file mode 100644 index 000000000..f7fdda590 --- /dev/null +++ b/library/font_awesome/src/assets/font-awesome/less/mixins.less @@ -0,0 +1,48 @@ +// Mixins +// -------------------------- + +.icon(@icon) { + .icon-FontAwesome(); + content: @icon; +} + +.icon-FontAwesome() { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + text-decoration: inherit; + -webkit-font-smoothing: antialiased; + *margin-right: .3em; // fixes ie7 issues +} + +.border-radius(@radius) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +.icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) { + .icon-stack { + position: relative; + display: inline-block; + width: @width; + height: @height; + line-height: @width; + vertical-align: -35%; + [class^="icon-"], + [class*=" icon-"] { + display: block; + text-align: center; + position: absolute; + width: 100%; + height: 100%; + font-size: @top-font-size; + line-height: inherit; + *line-height: @height; + } + .icon-stack-base { + font-size: @base-font-size; + *line-height: @height / @base-font-size; + } + } +} diff --git a/library/font_awesome/src/assets/font-awesome/less/path.less b/library/font_awesome/src/assets/font-awesome/less/path.less new file mode 100644 index 000000000..8ccef8cf0 --- /dev/null +++ b/library/font_awesome/src/assets/font-awesome/less/path.less @@ -0,0 +1,14 @@ +/* FONT PATH + * -------------------------- */ + +@font-face { + font-family: 'FontAwesome'; + src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=@{FontAwesomeVersion}'); + src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=@{FontAwesomeVersion}') format('embedded-opentype'), + url('@{FontAwesomePath}/fontawesome-webfont.woff?v=@{FontAwesomeVersion}') format('woff'), + url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=@{FontAwesomeVersion}') format('truetype'), + url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=@{FontAwesomeVersion}') format('svg'); +// src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts + font-weight: normal; + font-style: normal; +} diff --git a/library/font_awesome/src/assets/font-awesome/less/variables.less b/library/font_awesome/src/assets/font-awesome/less/variables.less new file mode 100644 index 000000000..4d5271896 --- /dev/null +++ b/library/font_awesome/src/assets/font-awesome/less/variables.less @@ -0,0 +1,17 @@ +--- +--- +// Variables +// -------------------------- + +@FontAwesomePath: "../font"; +//@FontAwesomePath: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly +@FontAwesomeVersion: "{{ site.fontawesome.version }}"; +@borderColor: #eee; +@iconMuted: #eee; +@iconLight: #fff; +@iconDark: #333; +@icons-li-width: 30/14em; + +{% for icon in icons %} + @{{ icon.id }}: "\{{ icon.unicode }}"; +{% endfor %} -- cgit v1.2.3