1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-27 16:00:59 +01:00

Add FontAwesome as a font/icon choice

Summary:
This adds FontAwesome and attempts to make use as icons as consistent as possible. May require additional tweaks once we start using, but in practice this is pretty finished.

 - Adds FontAwesome
 - Adds additional transforms (rotates, spins)
 - Adds additional colors
 - Better scopes halflings and fontawesome
 - Shares CSS between fonts for consistency

Test Plan:
Tested various browsers back to IE8, mobile.

{F146146}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D8818
This commit is contained in:
Chad Little 2014-04-19 10:00:37 -07:00
parent 5570ec5156
commit ce1dbbec3c
11 changed files with 2214 additions and 479 deletions

View file

@ -7,7 +7,7 @@
return array( return array(
'names' => 'names' =>
array( array(
'core.pkg.css' => '030f12e5', 'core.pkg.css' => 'c88bd7c6',
'core.pkg.js' => '417722ff', 'core.pkg.js' => '417722ff',
'darkconsole.pkg.js' => 'ca8671ce', 'darkconsole.pkg.js' => 'ca8671ce',
'differential.pkg.css' => '12c11318', 'differential.pkg.css' => '12c11318',
@ -103,14 +103,16 @@ return array(
'rsrc/css/application/slowvote/slowvote.css' => '266df6a1', 'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
'rsrc/css/application/subscriptions/subscribers-list.css' => '5bb30c78', 'rsrc/css/application/subscriptions/subscribers-list.css' => '5bb30c78',
'rsrc/css/application/tokens/tokens.css' => '5f7bca25', 'rsrc/css/application/tokens/tokens.css' => '5f7bca25',
'rsrc/css/application/uiexample/example.css' => 'aa291bae', 'rsrc/css/application/uiexample/example.css' => 'd07a5869',
'rsrc/css/core/core.css' => 'da26ddb2', 'rsrc/css/core/core.css' => 'da26ddb2',
'rsrc/css/core/remarkup.css' => '0923dbd6', 'rsrc/css/core/remarkup.css' => '0923dbd6',
'rsrc/css/core/syntax.css' => '3c18c1cb', 'rsrc/css/core/syntax.css' => '3c18c1cb',
'rsrc/css/core/z-index.css' => '0d89d53c', 'rsrc/css/core/z-index.css' => '0d89d53c',
'rsrc/css/diviner/diviner-shared.css' => '38813222', 'rsrc/css/diviner/diviner-shared.css' => '38813222',
'rsrc/css/font/font-glyphicons-halflings.css' => '87018f55', 'rsrc/css/font/font-awesome.css' => '62bc244d',
'rsrc/css/font/font-glyphicons-halflings.css' => '0c69dbc6',
'rsrc/css/font/font-source-sans-pro.css' => '91d53463', 'rsrc/css/font/font-source-sans-pro.css' => '91d53463',
'rsrc/css/font/phui-font-icon-base.css' => 'cc5465ba',
'rsrc/css/layout/phabricator-action-header-view.css' => 'c14dfc57', 'rsrc/css/layout/phabricator-action-header-view.css' => 'c14dfc57',
'rsrc/css/layout/phabricator-action-list-view.css' => '81383e25', 'rsrc/css/layout/phabricator-action-list-view.css' => '81383e25',
'rsrc/css/layout/phabricator-crumbs-view.css' => '2d9db584', 'rsrc/css/layout/phabricator-crumbs-view.css' => '2d9db584',
@ -130,7 +132,7 @@ return array(
'rsrc/css/phui/phui-form-view.css' => '867463b4', 'rsrc/css/phui/phui-form-view.css' => '867463b4',
'rsrc/css/phui/phui-form.css' => 'b78ec020', 'rsrc/css/phui/phui-form.css' => 'b78ec020',
'rsrc/css/phui/phui-header-view.css' => '5b79f0ef', 'rsrc/css/phui/phui-header-view.css' => '5b79f0ef',
'rsrc/css/phui/phui-icon.css' => '59b9e5b5', 'rsrc/css/phui/phui-icon.css' => '322274f9',
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1', 'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
'rsrc/css/phui/phui-list.css' => 'ef8035b6', 'rsrc/css/phui/phui-list.css' => 'ef8035b6',
'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec', 'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
@ -162,6 +164,9 @@ return array(
'rsrc/css/sprite-projects.css' => '7578fa56', 'rsrc/css/sprite-projects.css' => '7578fa56',
'rsrc/css/sprite-status.css' => '8bce1c97', 'rsrc/css/sprite-status.css' => '8bce1c97',
'rsrc/css/sprite-tokens.css' => '1706b943', 'rsrc/css/sprite-tokens.css' => '1706b943',
'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => 'b676fe4f',
'rsrc/externals/font/fontawesome/fontawesome-webfont.ttf' => 'af66fc5c',
'rsrc/externals/font/fontawesome/fontawesome-webfont.woff' => 'c713570f',
'rsrc/externals/font/glyphicons/glyphicons-halflings-regular.eot' => '282d455e', 'rsrc/externals/font/glyphicons/glyphicons-halflings-regular.eot' => '282d455e',
'rsrc/externals/font/glyphicons/glyphicons-halflings-regular.ttf' => 'b7c56991', 'rsrc/externals/font/glyphicons/glyphicons-halflings-regular.ttf' => 'b7c56991',
'rsrc/externals/font/glyphicons/glyphicons-halflings-regular.woff' => 'bac768cd', 'rsrc/externals/font/glyphicons/glyphicons-halflings-regular.woff' => 'bac768cd',
@ -515,7 +520,8 @@ return array(
'diffusion-icons-css' => '384a0f7d', 'diffusion-icons-css' => '384a0f7d',
'diffusion-source-css' => '66fdf661', 'diffusion-source-css' => '66fdf661',
'diviner-shared-css' => '38813222', 'diviner-shared-css' => '38813222',
'font-glyphicons-halflings' => '87018f55', 'font-fontawesome' => '62bc244d',
'font-glyphicons-halflings' => '0c69dbc6',
'font-source-sans-pro' => '91d53463', 'font-source-sans-pro' => '91d53463',
'global-drag-and-drop-css' => '697324ad', 'global-drag-and-drop-css' => '697324ad',
'harbormaster-css' => 'cec833b7', 'harbormaster-css' => 'cec833b7',
@ -716,7 +722,7 @@ return array(
'phabricator-textareautils' => 'b3ec3cfc', 'phabricator-textareautils' => 'b3ec3cfc',
'phabricator-tooltip' => '3915d490', 'phabricator-tooltip' => '3915d490',
'phabricator-transaction-view-css' => 'ce491938', 'phabricator-transaction-view-css' => 'ce491938',
'phabricator-ui-example-css' => 'aa291bae', 'phabricator-ui-example-css' => 'd07a5869',
'phabricator-uiexample-javelin-view' => 'd4a14807', 'phabricator-uiexample-javelin-view' => 'd4a14807',
'phabricator-uiexample-reactor-button' => '44524435', 'phabricator-uiexample-reactor-button' => '44524435',
'phabricator-uiexample-reactor-checkbox' => '7ba325ee', 'phabricator-uiexample-reactor-checkbox' => '7ba325ee',
@ -744,11 +750,12 @@ return array(
'phui-calendar-month-css' => 'a92e47d2', 'phui-calendar-month-css' => 'a92e47d2',
'phui-document-view-css' => '3b078dc0', 'phui-document-view-css' => '3b078dc0',
'phui-feed-story-css' => '3a59c2cf', 'phui-feed-story-css' => '3a59c2cf',
'phui-font-icon-base-css' => 'cc5465ba',
'phui-fontkit-css' => 'de84aa4a', 'phui-fontkit-css' => 'de84aa4a',
'phui-form-css' => 'b78ec020', 'phui-form-css' => 'b78ec020',
'phui-form-view-css' => '867463b4', 'phui-form-view-css' => '867463b4',
'phui-header-view-css' => '5b79f0ef', 'phui-header-view-css' => '5b79f0ef',
'phui-icon-view-css' => '59b9e5b5', 'phui-icon-view-css' => '322274f9',
'phui-info-panel-css' => '27ea50a1', 'phui-info-panel-css' => '27ea50a1',
'phui-list-view-css' => 'ef8035b6', 'phui-list-view-css' => 'ef8035b6',
'phui-object-box-css' => 'ce92d8ec', 'phui-object-box-css' => 'ce92d8ec',

View file

@ -12,206 +12,580 @@ final class PHUIIconExample extends PhabricatorUIExample {
private function listHalflings() { private function listHalflings() {
return array ( return array (
'glass', 'gh-glass',
'music', 'gh-music',
'search', 'gh-search',
'envelope', 'gh-envelope',
'heart', 'gh-heart',
'star', 'gh-star',
'star-empty', 'gh-star-empty',
'user', 'gh-user',
'film', 'gh-film',
'th-large', 'gh-th-large',
'th', 'gh-th',
'th-list', 'gh-th-list',
'ok', 'gh-ok',
'remove', 'gh-remove',
'zoom-in', 'gh-zoom-in',
'zoom-out', 'gh-zoom-out',
'off', 'gh-off',
'signal', 'gh-signal',
'cog', 'gh-cog',
'trash', 'gh-trash',
'home', 'gh-home',
'file', 'gh-file',
'time', 'gh-time',
'road', 'gh-road',
'download-alt', 'gh-download-alt',
'download', 'gh-download',
'upload', 'gh-upload',
'inbox', 'gh-inbox',
'play-circle', 'gh-play-circle',
'repeat', 'gh-repeat',
'refresh', 'gh-refresh',
'list-alt', 'gh-list-alt',
'lock', 'gh-lock',
'flag', 'gh-flag',
'headphones', 'gh-headphones',
'volume-off', 'gh-volume-off',
'volume-down', 'gh-volume-down',
'volume-up', 'gh-volume-up',
'qrcode', 'gh-qrcode',
'barcode', 'gh-barcode',
'tag', 'gh-tag',
'tags', 'gh-tags',
'book', 'gh-book',
'bookmark', 'gh-bookmark',
'print', 'gh-print',
'camera', 'gh-camera',
'font', 'gh-font',
'bold', 'gh-bold',
'italic', 'gh-italic',
'text-height', 'gh-text-height',
'text-width', 'gh-text-width',
'align-left', 'gh-align-left',
'align-center', 'gh-align-center',
'align-right', 'gh-align-right',
'align-justify', 'gh-align-justify',
'list', 'gh-list',
'indent-left', 'gh-indent-left',
'indent-right', 'gh-indent-right',
'facetime-video', 'gh-facetime-video',
'picture', 'gh-picture',
'pencil', 'gh-pencil',
'map-marker', 'gh-map-marker',
'adjust', 'gh-adjust',
'tint', 'gh-tint',
'edit', 'gh-edit',
'share', 'gh-share',
'check', 'gh-check',
'move', 'gh-move',
'step-backward', 'gh-step-backward',
'fast-backward', 'gh-fast-backward',
'backward', 'gh-backward',
'play', 'gh-play',
'pause', 'gh-pause',
'stop', 'gh-stop',
'forward', 'gh-forward',
'fast-forward', 'gh-fast-forward',
'step-forward', 'gh-step-forward',
'eject', 'gh-eject',
'chevron-left', 'gh-chevron-left',
'chevron-right', 'gh-chevron-right',
'plus-sign', 'gh-plus-sign',
'minus-sign', 'gh-minus-sign',
'remove-sign', 'gh-remove-sign',
'ok-sign', 'gh-ok-sign',
'question-sign', 'gh-question-sign',
'info-sign', 'gh-info-sign',
'screenshot', 'gh-screenshot',
'remove-circle', 'gh-remove-circle',
'ok-circle', 'gh-ok-circle',
'ban-circle', 'gh-ban-circle',
'arrow-left', 'gh-arrow-left',
'arrow-right', 'gh-arrow-right',
'arrow-up', 'gh-arrow-up',
'arrow-down', 'gh-arrow-down',
'share-alt', 'gh-share-alt',
'resize-full', 'gh-resize-full',
'resize-small', 'gh-resize-small',
'plus', 'gh-plus',
'minus', 'gh-minus',
'asterisk', 'gh-asterisk',
'exclamation-sign', 'gh-exclamation-sign',
'gift', 'gh-gift',
'leaf', 'gh-leaf',
'fire', 'gh-fire',
'eye-open', 'gh-eye-open',
'eye-close', 'gh-eye-close',
'warning-sign', 'gh-warning-sign',
'plane', 'gh-plane',
'calendar', 'gh-calendar',
'random', 'gh-random',
'comments', 'gh-comments',
'magnet', 'gh-magnet',
'chevron-up', 'gh-chevron-up',
'chevron-down', 'gh-chevron-down',
'retweet', 'gh-retweet',
'shopping-cart', 'gh-shopping-cart',
'folder-close', 'gh-folder-close',
'folder-open', 'gh-folder-open',
'resize-vertical', 'gh-resize-vertical',
'resize-horizontal', 'gh-resize-horizontal',
'hdd', 'gh-hdd',
'bullhorn', 'gh-bullhorn',
'bell', 'gh-bell',
'certificate', 'gh-certificate',
'thumbs-up', 'gh-thumbs-up',
'thumbs-down', 'gh-thumbs-down',
'hand-right', 'gh-hand-right',
'hand-left', 'gh-hand-left',
'hand-top', 'gh-hand-top',
'hand-down', 'gh-hand-down',
'circle-arrow-right', 'gh-circle-arrow-right',
'circle-arrow-left', 'gh-circle-arrow-left',
'circle-arrow-top', 'gh-circle-arrow-top',
'circle-arrow-down', 'gh-circle-arrow-down',
'globe', 'gh-globe',
'wrench', 'gh-wrench',
'tasks', 'gh-tasks',
'filter', 'gh-filter',
'briefcase', 'gh-briefcase',
'fullscreen', 'gh-fullscreen',
'dashboard', 'gh-dashboard',
'paperclip', 'gh-paperclip',
'heart-empty', 'gh-heart-empty',
'link', 'gh-link',
'phone', 'gh-phone',
'pushpin', 'gh-pushpin',
'euro', 'gh-euro',
'usd', 'gh-usd',
'gbp', 'gh-gbp',
'sort', 'gh-sort',
'sort-by-alphabet', 'gh-sort-by-alphabet',
'sort-by-alphabet-alt', 'gh-sort-by-alphabet-alt',
'sort-by-order', 'gh-sort-by-order',
'sort-by-order-alt', 'gh-sort-by-order-alt',
'sort-by-attributes', 'gh-sort-by-attributes',
'sort-by-attributes-alt', 'gh-sort-by-attributes-alt',
'unchecked', 'gh-unchecked',
'expand', 'gh-expand',
'collapse', 'gh-collapse',
'collapse-top', 'gh-collapse-top',
'log_in', 'gh-log_in',
'flash', 'gh-flash',
'log_out', 'gh-log_out',
'new_window', 'gh-new_window',
'record', 'gh-record',
'save', 'gh-save',
'open', 'gh-open',
'saved', 'gh-saved',
'import', 'gh-import',
'export', 'gh-export',
'send', 'gh-send',
'floppy_disk', 'gh-floppy_disk',
'floppy_saved', 'gh-floppy_saved',
'floppy_remove', 'gh-floppy_remove',
'floppy_save', 'gh-floppy_save',
'floppy_open', 'gh-floppy_open',
'credit_card', 'gh-credit_card',
'transfer', 'gh-transfer',
'cutlery', 'gh-cutlery',
'header', 'gh-header',
'compressed', 'gh-compressed',
'earphone', 'gh-earphone',
'phone_alt', 'gh-phone_alt',
'tower', 'gh-tower',
'stats', 'gh-stats',
'sd_video', 'gh-sd_video',
'hd_video', 'gh-hd_video',
'subtitles', 'gh-subtitles',
'sound_stereo', 'gh-sound_stereo',
'sound_dolby', 'gh-sound_dolby',
'sound_5_1', 'gh-sound_5_1',
'sound_6_1', 'gh-sound_6_1',
'sound_7_1', 'gh-sound_7_1',
'copyright_mark', 'gh-copyright_mark',
'registration_mark', 'gh-registration_mark',
'cloud', 'gh-cloud',
'cloud_download', 'gh-cloud_download',
'cloud_upload', 'gh-cloud_upload',
'tree_conifer', 'gh-tree_conifer',
'tree_deciduous', 'gh-tree_deciduous',
);
}
private function listFontAwesome() {
return array(
'fa-glass',
'fa-music',
'fa-search',
'fa-envelope-o',
'fa-heart',
'fa-star',
'fa-star-o',
'fa-user',
'fa-film',
'fa-th-large',
'fa-th',
'fa-th-list',
'fa-check',
'fa-times',
'fa-search-plus',
'fa-search-minus',
'fa-power-off',
'fa-signal',
'fa-cog',
'fa-trash-o',
'fa-home',
'fa-file-o',
'fa-clock-o',
'fa-road',
'fa-download',
'fa-arrow-circle-o-down',
'fa-arrow-circle-o-up',
'fa-inbox',
'fa-play-circle-o',
'fa-repeat',
'fa-refresh',
'fa-list-alt',
'fa-lock',
'fa-flag',
'fa-headphones',
'fa-volume-off',
'fa-volume-down',
'fa-volume-up',
'fa-qrcode',
'fa-barcode',
'fa-tag',
'fa-tags',
'fa-book',
'fa-bookmark',
'fa-print',
'fa-camera',
'fa-font',
'fa-bold',
'fa-italic',
'fa-text-height',
'fa-text-width',
'fa-align-left',
'fa-align-center',
'fa-align-right',
'fa-align-justify',
'fa-list',
'fa-outdent',
'fa-indent',
'fa-video-camera',
'fa-picture-o',
'fa-pencil',
'fa-map-marker',
'fa-adjust',
'fa-tint',
'fa-pencil-square-o',
'fa-share-square-o',
'fa-check-square-o',
'fa-arrows',
'fa-step-backward',
'fa-fast-backward',
'fa-backward',
'fa-play',
'fa-pause',
'fa-stop',
'fa-forward',
'fa-fast-forward',
'fa-step-forward',
'fa-eject',
'fa-chevron-left',
'fa-chevron-right',
'fa-plus-circle',
'fa-minus-circle',
'fa-times-circle',
'fa-check-circle',
'fa-question-circle',
'fa-info-circle',
'fa-crosshairs',
'fa-times-circle-o',
'fa-check-circle-o',
'fa-ban',
'fa-arrow-left',
'fa-arrow-right',
'fa-arrow-up',
'fa-arrow-down',
'fa-share',
'fa-expand',
'fa-compress',
'fa-plus',
'fa-minus',
'fa-asterisk',
'fa-exclamation-circle',
'fa-gift',
'fa-leaf',
'fa-fire',
'fa-eye',
'fa-eye-slash',
'fa-exclamation-triangle',
'fa-plane',
'fa-calendar',
'fa-random',
'fa-comment',
'fa-magnet',
'fa-chevron-up',
'fa-chevron-down',
'fa-retweet',
'fa-shopping-cart',
'fa-folder',
'fa-folder-open',
'fa-arrows-v',
'fa-arrows-h',
'fa-bar-chart-o',
'fa-twitter-square',
'fa-facebook-square',
'fa-camera-retro',
'fa-key',
'fa-cogs',
'fa-comments',
'fa-thumbs-o-up',
'fa-thumbs-o-down',
'fa-star-half',
'fa-heart-o',
'fa-sign-out',
'fa-linkedin-square',
'fa-thumb-tack',
'fa-external-link',
'fa-sign-in',
'fa-trophy',
'fa-github-square',
'fa-upload',
'fa-lemon-o',
'fa-phone',
'fa-square-o',
'fa-bookmark-o',
'fa-phone-square',
'fa-twitter',
'fa-facebook',
'fa-github',
'fa-unlock',
'fa-credit-card',
'fa-rss',
'fa-hdd-o',
'fa-bullhorn',
'fa-bell',
'fa-certificate',
'fa-hand-o-right',
'fa-hand-o-left',
'fa-hand-o-up',
'fa-hand-o-down',
'fa-arrow-circle-left',
'fa-arrow-circle-right',
'fa-arrow-circle-up',
'fa-arrow-circle-down',
'fa-globe',
'fa-wrench',
'fa-tasks',
'fa-filter',
'fa-briefcase',
'fa-arrows-alt',
'fa-users',
'fa-link',
'fa-cloud',
'fa-flask',
'fa-scissors',
'fa-files-o',
'fa-paperclip',
'fa-floppy-o',
'fa-square',
'fa-bars',
'fa-list-ul',
'fa-list-ol',
'fa-strikethrough',
'fa-underline',
'fa-table',
'fa-magic',
'fa-truck',
'fa-pinterest',
'fa-pinterest-square',
'fa-google-plus-square',
'fa-google-plus',
'fa-money',
'fa-caret-down',
'fa-caret-up',
'fa-caret-left',
'fa-caret-right',
'fa-columns',
'fa-sort',
'fa-sort-asc',
'fa-sort-desc',
'fa-envelope',
'fa-linkedin',
'fa-undo',
'fa-gavel',
'fa-tachometer',
'fa-comment-o',
'fa-comments-o',
'fa-bolt',
'fa-sitemap',
'fa-umbrella',
'fa-clipboard',
'fa-lightbulb-o',
'fa-exchange',
'fa-cloud-download',
'fa-cloud-upload',
'fa-user-md',
'fa-stethoscope',
'fa-suitcase',
'fa-bell-o',
'fa-coffee',
'fa-cutlery',
'fa-file-text-o',
'fa-building-o',
'fa-hospital-o',
'fa-ambulance',
'fa-medkit',
'fa-fighter-jet',
'fa-beer',
'fa-h-square',
'fa-plus-square',
'fa-angle-double-left',
'fa-angle-double-right',
'fa-angle-double-up',
'fa-angle-double-down',
'fa-angle-left',
'fa-angle-right',
'fa-angle-up',
'fa-angle-down',
'fa-desktop',
'fa-laptop',
'fa-tablet',
'fa-mobile',
'fa-circle-o',
'fa-quote-left',
'fa-quote-right',
'fa-spinner',
'fa-circle',
'fa-reply',
'fa-github-alt',
'fa-folder-o',
'fa-folder-open-o',
'fa-smile-o',
'fa-frown-o',
'fa-meh-o',
'fa-gamepad',
'fa-keyboard-o',
'fa-flag-o',
'fa-flag-checkered',
'fa-terminal',
'fa-code',
'fa-reply-all',
'fa-mail-reply-all',
'fa-star-half-o',
'fa-location-arrow',
'fa-crop',
'fa-code-fork',
'fa-chain-broken',
'fa-question',
'fa-info',
'fa-exclamation',
'fa-superscript',
'fa-subscript',
'fa-eraser',
'fa-puzzle-piece',
'fa-microphone',
'fa-microphone-slash',
'fa-shield',
'fa-calendar-o',
'fa-fire-extinguisher',
'fa-rocket',
'fa-maxcdn',
'fa-chevron-circle-left',
'fa-chevron-circle-right',
'fa-chevron-circle-up',
'fa-chevron-circle-down',
'fa-html5',
'fa-css3',
'fa-anchor',
'fa-unlock-alt',
'fa-bullseye',
'fa-ellipsis-h',
'fa-ellipsis-v',
'fa-rss-square',
'fa-play-circle',
'fa-ticket',
'fa-minus-square',
'fa-minus-square-o',
'fa-level-up',
'fa-level-down',
'fa-check-square',
'fa-pencil-square',
'fa-external-link-square',
'fa-share-square',
'fa-compass',
'fa-caret-square-o-down',
'fa-caret-square-o-up',
'fa-caret-square-o-right',
'fa-eur',
'fa-gbp',
'fa-usd',
'fa-inr',
'fa-jpy',
'fa-rub',
'fa-krw',
'fa-btc',
'fa-file',
'fa-file-text',
'fa-sort-alpha-asc',
'fa-sort-alpha-desc',
'fa-sort-amount-asc',
'fa-sort-amount-desc',
'fa-sort-numeric-asc',
'fa-sort-numeric-desc',
'fa-thumbs-up',
'fa-thumbs-down',
'fa-youtube-square',
'fa-youtube',
'fa-xing',
'fa-xing-square',
'fa-youtube-play',
'fa-dropbox',
'fa-stack-overflow',
'fa-instagram',
'fa-flickr',
'fa-adn',
'fa-bitbucket',
'fa-bitbucket-square',
'fa-tumblr',
'fa-tumblr-square',
'fa-long-arrow-down',
'fa-long-arrow-up',
'fa-long-arrow-left',
'fa-long-arrow-right',
'fa-apple',
'fa-windows',
'fa-android',
'fa-linux',
'fa-dribbble',
'fa-skype',
'fa-foursquare',
'fa-trello',
'fa-female',
'fa-male',
'fa-gittip',
'fa-sun-o',
'fa-moon-o',
'fa-archive',
'fa-bug',
'fa-vk',
'fa-weibo',
'fa-renren',
'fa-pagelines',
'fa-stack-exchange',
'fa-arrow-circle-o-right',
'fa-arrow-circle-o-left',
'fa-caret-square-o-left',
'fa-dot-circle-o',
'fa-wheelchair',
'fa-vimeo-square',
'fa-try',
'fa-plus-square-o',
); );
} }
@ -228,26 +602,50 @@ final class PHUIIconExample extends PhabricatorUIExample {
'sky', 'sky',
'indigo', 'indigo',
'violet', 'violet',
'lightgreytext',
'lightbluetext',
);
}
private function listTransforms() {
return array(
'ph-rotate-90',
'ph-rotate-180',
'ph-rotate-270',
'ph-flip-horizontal',
'ph-flip-vertical',
'ph-spin',
); );
} }
public function renderExample() { public function renderExample() {
$colors = $this->listColors(); $colors = $this->listColors();
$trans = $this->listTransforms();
$glyphs = $this->listHalflings(); $glyphs = $this->listHalflings();
$fas = $this->listFontAwesome();
$gicons = array(); $gicons = array();
foreach ($glyphs as $glyph) { foreach ($glyphs as $glyph) {
$gicons[] = id(new PHUIIconView()) $gicons[] = id(new PHUIIconView())
->addClass('phui-halfling-name') ->addClass('phui-example-icon-name')
->setHalfling($glyph) ->setHalfling($glyph)
->appendChild($glyph); ->setText($glyph);
} }
$cicons = array(); $cicons = array();
foreach ($colors as $color) { foreach ($colors as $color) {
$cicons[] = id(new PHUIIconView()) $cicons[] = id(new PHUIIconView())
->addClass('phui-halfling-color') ->addClass('phui-example-icon-transform')
->setHalfling('tag', $color) ->setHalfling('gh-tag '.$color)
->appendChild(pht('tag %s', $color)); ->setText(pht('gh-tag %s', $color));
}
$ficons = array();
foreach ($fas as $fa) {
$ficons[] = id(new PHUIIconView())
->addClass('phui-example-icon-name')
->setFontAwesome($fa)
->setText($fa);
} }
$person1 = new PHUIIconView(); $person1 = new PHUIIconView();
@ -360,6 +758,10 @@ final class PHUIIconExample extends PhabricatorUIExample {
->appendChild($cicons) ->appendChild($cicons)
->addMargin(PHUI::MARGIN_LARGE); ->addMargin(PHUI::MARGIN_LARGE);
$layout_fa = id(new PHUIBoxView())
->appendChild($ficons)
->addMargin(PHUI::MARGIN_LARGE);
$layout1 = id(new PHUIBoxView()) $layout1 = id(new PHUIBoxView())
->appendChild($actionview) ->appendChild($actionview)
->addMargin(PHUI::MARGIN_MEDIUM); ->addMargin(PHUI::MARGIN_MEDIUM);
@ -388,8 +790,12 @@ final class PHUIIconExample extends PhabricatorUIExample {
->setHeaderText(pht('Glyphicon Halflings')) ->setHeaderText(pht('Glyphicon Halflings'))
->appendChild($layout_gicons); ->appendChild($layout_gicons);
$halflings_color = id(new PHUIObjectBoxView()) $fontawesome = id(new PHUIObjectBoxView())
->setHeaderText(pht('Halflings Colors')) ->setHeaderText(pht('Font Awesome'))
->appendChild($layout_fa);
$transforms = id(new PHUIObjectBoxView())
->setHeaderText(pht('Colors and Transforms'))
->appendChild($layout_cicons); ->appendChild($layout_cicons);
$wrap1 = id(new PHUIObjectBoxView()) $wrap1 = id(new PHUIObjectBoxView())
@ -419,7 +825,8 @@ final class PHUIIconExample extends PhabricatorUIExample {
), ),
array( array(
$halflings, $halflings,
$halflings_color, $fontawesome,
$transforms,
$wrap1, $wrap1,
$wrap2, $wrap2,
$wrap3, $wrap3,

View file

@ -18,12 +18,13 @@ final class PHUIIconView extends AphrontTagView {
private $href = null; private $href = null;
private $image; private $image;
private $text;
private $headSize = null; private $headSize = null;
private $spriteIcon; private $spriteIcon;
private $spriteSheet; private $spriteSheet;
private $halfling; private $halfling;
private $halflingColor; private $fontAwesome;
public function setHref($href) { public function setHref($href) {
$this->href = $href; $this->href = $href;
@ -35,6 +36,11 @@ final class PHUIIconView extends AphrontTagView {
return $this; return $this;
} }
public function setText($text) {
$this->text = $text;
return $this;
}
public function setHeadSize($size) { public function setHeadSize($size) {
$this->headSize = $size; $this->headSize = $size;
return $this; return $this;
@ -50,9 +56,13 @@ final class PHUIIconView extends AphrontTagView {
return $this; return $this;
} }
public function setHalfling($hf, $color=null) { public function setHalfling($hf) {
$this->halfling = $hf; $this->halfling = $hf;
$this->halflingColor = $color; return $this;
}
public function setFontAwesome($fa) {
$this->fontAwesome = $fa;
return $this; return $this;
} }
@ -75,13 +85,19 @@ final class PHUIIconView extends AphrontTagView {
require_celerity_resource('sprite-'.$this->spriteSheet.'-css'); require_celerity_resource('sprite-'.$this->spriteSheet.'-css');
$classes[] = 'sprite-'.$this->spriteSheet; $classes[] = 'sprite-'.$this->spriteSheet;
$classes[] = $this->spriteSheet.'-'.$this->spriteIcon; $classes[] = $this->spriteSheet.'-'.$this->spriteIcon;
} elseif ($this->halfling) { } elseif ($this->halfling) {
require_celerity_resource('phui-font-icon-base-css');
require_celerity_resource('font-glyphicons-halflings'); require_celerity_resource('font-glyphicons-halflings');
$classes[] = 'halflings'; $classes[] = 'phui-font-gh';
$classes[] = $this->halfling; $classes[] = $this->halfling;
if ($this->halflingColor) {
$classes[] = $this->halflingColor; } elseif ($this->fontAwesome) {
} require_celerity_resource('phui-font-icon-base-css');
require_celerity_resource('font-fontawesome');
$classes[] = 'phui-font-fa';
$classes[] = $this->fontAwesome;
} else { } else {
if ($this->headSize) { if ($this->headSize) {
$classes[] = $this->headSize; $classes[] = $this->headSize;
@ -89,6 +105,11 @@ final class PHUIIconView extends AphrontTagView {
$style = 'background-image: url('.$this->image.');'; $style = 'background-image: url('.$this->image.');';
} }
if ($this->text) {
$classes[] = 'phui-icon-has-text';
$this->appendChild($this->text);
}
return array( return array(
'href' => $this->href, 'href' => $this->href,
'style' => $style, 'style' => $style,

View file

@ -46,14 +46,14 @@
border-color: {$red}; border-color: {$red};
} }
.phui-icon-view.phui-halfling-name { .phui-example-icon-name {
display: inline-block; display: inline-block;
width: 140px; width: 160px;
padding-bottom: 8px; padding-bottom: 8px;
white-space: nowrap; white-space: nowrap;
} }
.phui-icon-view.phui-halfling-color { .phui-icon-view.phui-example-icon-transform {
display: block; display: block;
padding-bottom: 8px; padding-bottom: 8px;
} }

1187
webroot/rsrc/css/font/font-awesome.css vendored Normal file

File diff suppressed because it is too large Load diff

View file

@ -8,659 +8,608 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
.phui-icon-view.halflings {
display: inline-block; .phui-font-gh:before {
position: relative;
padding-left: 20px;
color: {$darkgreytext};
text-decoration: none;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.phui-icon-view.halflings:before {
position: absolute;
left: 0;
top: 0;
display: inline-block;
margin: 0 5px 0 0;
font: 12px/1em 'Glyphicons Halflings Regular'; font: 12px/1em 'Glyphicons Halflings Regular';
font-style: normal;
font-weight: normal;
color: {$darkgreytext};
*display: inline;
*zoom: 1;
vertical-align: middle;
text-transform: none;
-webkit-font-smoothing: antialiased;
} }
.halflings.bluegrey:before {
color: #7787a6; .gh-glass:before {
}
.halflings.white:before {
color: #fff;
}
.halflings.red:before {
color: {$red};
}
.halflings.orange:before {
color: {$orange};
}
.halflings.yellow:before {
color: {$yellow};
}
.halflings.green:before {
color: {$green}
}
.halflings.blue:before {
color: {$blue};
}
.halflings.sky:before {
color: {$sky};
}
.halflings.indigo:before {
color: {$indigo};
}
.halflings.violet:before {
color: {$violet};
}
.halflings.glass:before {
content: "\E001"; content: "\E001";
} }
.halflings.music:before { .gh-music:before {
content: "\E002"; content: "\E002";
} }
.halflings.search:before { .gh-search:before {
content: "\E003"; content: "\E003";
} }
.halflings.envelope:before { .gh-envelope:before {
content: "\2709"; content: "\2709";
} }
.halflings.heart:before { .gh-heart:before {
content: "\E005"; content: "\E005";
} }
.halflings.star:before { .gh-star:before {
content: "\E006"; content: "\E006";
} }
.halflings.star-empty:before { .gh-star-empty:before {
content: "\E007"; content: "\E007";
} }
.halflings.user:before { .gh-user:before {
content: "\E008"; content: "\E008";
} }
.halflings.film:before { .gh-film:before {
content: "\E009"; content: "\E009";
} }
.halflings.th-large:before { .gh-th-large:before {
content: "\E010"; content: "\E010";
} }
.halflings.th:before { .gh-th:before {
content: "\E011"; content: "\E011";
} }
.halflings.th-list:before { .gh-th-list:before {
content: "\E012"; content: "\E012";
} }
.halflings.ok:before { .gh-ok:before {
content: "\E013"; content: "\E013";
} }
.halflings.remove:before { .gh-remove:before {
content: "\E014"; content: "\E014";
} }
.halflings.zoom-in:before { .gh-zoom-in:before {
content: "\E015"; content: "\E015";
} }
.halflings.zoom-out:before { .gh-zoom-out:before {
content: "\E016"; content: "\E016";
} }
.halflings.off:before { .gh-off:before {
content: "\E017"; content: "\E017";
} }
.halflings.signal:before { .gh-signal:before {
content: "\E018"; content: "\E018";
} }
.halflings.cog:before { .gh-cog:before {
content: "\E019"; content: "\E019";
} }
.halflings.trash:before { .gh-trash:before {
content: "\E020"; content: "\E020";
} }
.halflings.home:before { .gh-home:before {
content: "\E021"; content: "\E021";
} }
.halflings.file:before { .gh-file:before {
content: "\E022"; content: "\E022";
} }
.halflings.time:before { .gh-time:before {
content: "\E023"; content: "\E023";
} }
.halflings.road:before { .gh-road:before {
content: "\E024"; content: "\E024";
} }
.halflings.download-alt:before { .gh-download-alt:before {
content: "\E025"; content: "\E025";
} }
.halflings.download:before { .gh-download:before {
content: "\E026"; content: "\E026";
} }
.halflings.upload:before { .gh-upload:before {
content: "\E027"; content: "\E027";
} }
.halflings.inbox:before { .gh-inbox:before {
content: "\E028"; content: "\E028";
} }
.halflings.play-circle:before { .gh-play-circle:before {
content: "\E029"; content: "\E029";
} }
.halflings.repeat:before { .gh-repeat:before {
content: "\E030"; content: "\E030";
} }
.halflings.refresh:before { .gh-refresh:before {
content: "\E031"; content: "\E031";
} }
.halflings.list-alt:before { .gh-list-alt:before {
content: "\E032"; content: "\E032";
} }
.halflings.lock:before { .gh-lock:before {
content: "\1F512"; content: "\1F512";
} }
.halflings.flag:before { .gh-flag:before {
content: "\E034"; content: "\E034";
} }
.halflings.headphones:before { .gh-headphones:before {
content: "\E035"; content: "\E035";
} }
.halflings.volume-off:before { .gh-volume-off:before {
content: "\E036"; content: "\E036";
} }
.halflings.volume-down:before { .gh-volume-down:before {
content: "\E037"; content: "\E037";
} }
.halflings.volume-up:before { .gh-volume-up:before {
content: "\E038"; content: "\E038";
} }
.halflings.qrcode:before { .gh-qrcode:before {
content: "\E039"; content: "\E039";
} }
.halflings.barcode:before { .gh-barcode:before {
content: "\E040"; content: "\E040";
} }
.halflings.tag:before { .gh-tag:before {
content: "\E041"; content: "\E041";
} }
.halflings.tags:before { .gh-tags:before {
content: "\E042"; content: "\E042";
} }
.halflings.book:before { .gh-book:before {
content: "\E043"; content: "\E043";
} }
.halflings.bookmark:before { .gh-bookmark:before {
content: "\1F516"; content: "\1F516";
} }
.halflings.print:before { .gh-print:before {
content: "\E045"; content: "\E045";
} }
.halflings.camera:before { .gh-camera:before {
content: "\1F4F7"; content: "\1F4F7";
} }
.halflings.font:before { .gh-font:before {
content: "\E047"; content: "\E047";
} }
.halflings.bold:before { .gh-bold:before {
content: "\E048"; content: "\E048";
} }
.halflings.italic:before { .gh-italic:before {
content: "\E049"; content: "\E049";
} }
.halflings.text-height:before { .gh-text-height:before {
content: "\E050"; content: "\E050";
} }
.halflings.text-width:before { .gh-text-width:before {
content: "\E051"; content: "\E051";
} }
.halflings.align-left:before { .gh-align-left:before {
content: "\E052"; content: "\E052";
} }
.halflings.align-center:before { .gh-align-center:before {
content: "\E053"; content: "\E053";
} }
.halflings.align-right:before { .gh-align-right:before {
content: "\E054"; content: "\E054";
} }
.halflings.align-justify:before { .gh-align-justify:before {
content: "\E055"; content: "\E055";
} }
.halflings.list:before { .gh-list:before {
content: "\E056"; content: "\E056";
} }
.halflings.indent-left:before { .gh-indent-left:before {
content: "\E057"; content: "\E057";
} }
.halflings.indent-right:before { .gh-indent-right:before {
content: "\E058"; content: "\E058";
} }
.halflings.facetime-video:before { .gh-facetime-video:before {
content: "\E059"; content: "\E059";
} }
.halflings.picture:before { .gh-picture:before {
content: "\E060"; content: "\E060";
} }
.halflings.pencil:before { .gh-pencil:before {
content: "\270F"; content: "\270F";
} }
.halflings.map-marker:before { .gh-map-marker:before {
content: "\E062"; content: "\E062";
} }
.halflings.adjust:before { .gh-adjust:before {
content: "\E063"; content: "\E063";
} }
.halflings.tint:before { .gh-tint:before {
content: "\E064"; content: "\E064";
} }
.halflings.edit:before { .gh-edit:before {
content: "\E065"; content: "\E065";
} }
.halflings.share:before { .gh-share:before {
content: "\E066"; content: "\E066";
} }
.halflings.check:before { .gh-check:before {
content: "\E067"; content: "\E067";
} }
.halflings.move:before { .gh-move:before {
content: "\E068"; content: "\E068";
} }
.halflings.step-backward:before { .gh-step-backward:before {
content: "\E069"; content: "\E069";
} }
.halflings.fast-backward:before { .gh-fast-backward:before {
content: "\E070"; content: "\E070";
} }
.halflings.backward:before { .gh-backward:before {
content: "\E071"; content: "\E071";
} }
.halflings.play:before { .gh-play:before {
content: "\E072"; content: "\E072";
} }
.halflings.pause:before { .gh-pause:before {
content: "\E073"; content: "\E073";
} }
.halflings.stop:before { .gh-stop:before {
content: "\E074"; content: "\E074";
} }
.halflings.forward:before { .gh-forward:before {
content: "\E075"; content: "\E075";
} }
.halflings.fast-forward:before { .gh-fast-forward:before {
content: "\E076"; content: "\E076";
} }
.halflings.step-forward:before { .gh-step-forward:before {
content: "\E077"; content: "\E077";
} }
.halflings.eject:before { .gh-eject:before {
content: "\E078"; content: "\E078";
} }
.halflings.chevron-left:before { .gh-chevron-left:before {
content: "\E079"; content: "\E079";
} }
.halflings.chevron-right:before { .gh-chevron-right:before {
content: "\E080"; content: "\E080";
} }
.halflings.plus-sign:before { .gh-plus-sign:before {
content: "\E081"; content: "\E081";
} }
.halflings.minus-sign:before { .gh-minus-sign:before {
content: "\E082"; content: "\E082";
} }
.halflings.remove-sign:before { .gh-remove-sign:before {
content: "\E083"; content: "\E083";
} }
.halflings.ok-sign:before { .gh-ok-sign:before {
content: "\E084"; content: "\E084";
} }
.halflings.question-sign:before { .gh-question-sign:before {
content: "\E085"; content: "\E085";
} }
.halflings.info-sign:before { .gh-info-sign:before {
content: "\E086"; content: "\E086";
} }
.halflings.screenshot:before { .gh-screenshot:before {
content: "\E087"; content: "\E087";
} }
.halflings.remove-circle:before { .gh-remove-circle:before {
content: "\E088"; content: "\E088";
} }
.halflings.ok-circle:before { .gh-ok-circle:before {
content: "\E089"; content: "\E089";
} }
.halflings.ban-circle:before { .gh-ban-circle:before {
content: "\E090"; content: "\E090";
} }
.halflings.arrow-left:before { .gh-arrow-left:before {
content: "\E091"; content: "\E091";
} }
.halflings.arrow-right:before { .gh-arrow-right:before {
content: "\E092"; content: "\E092";
} }
.halflings.arrow-up:before { .gh-arrow-up:before {
content: "\E093"; content: "\E093";
} }
.halflings.arrow-down:before { .gh-arrow-down:before {
content: "\E094"; content: "\E094";
} }
.halflings.share-alt:before { .gh-share-alt:before {
content: "\E095"; content: "\E095";
} }
.halflings.resize-full:before { .gh-resize-full:before {
content: "\E096"; content: "\E096";
} }
.halflings.resize-small:before { .gh-resize-small:before {
content: "\E097"; content: "\E097";
} }
.halflings.plus:before { .gh-plus:before {
content: "\002B"; content: "\002B";
} }
.halflings.minus:before { .gh-minus:before {
content: "\2212"; content: "\2212";
} }
.halflings.asterisk:before { .gh-asterisk:before {
content: "\002A"; content: "\002A";
} }
.halflings.exclamation-sign:before { .gh-exclamation-sign:before {
content: "\E101"; content: "\E101";
} }
.halflings.gift:before { .gh-gift:before {
content: "\E102"; content: "\E102";
} }
.halflings.leaf:before { .gh-leaf:before {
content: "\E103"; content: "\E103";
} }
.halflings.fire:before { .gh-fire:before {
content: "\1F525"; content: "\1F525";
} }
.halflings.eye-open:before { .gh-eye-open:before {
content: "\E105"; content: "\E105";
} }
.halflings.eye-close:before { .gh-eye-close:before {
content: "\E106"; content: "\E106";
} }
.halflings.warning-sign:before { .gh-warning-sign:before {
content: "\E107"; content: "\E107";
} }
.halflings.plane:before { .gh-plane:before {
content: "\E108"; content: "\E108";
} }
.halflings.calendar:before { .gh-calendar:before {
content: "\1F4C5"; content: "\1F4C5";
} }
.halflings.random:before { .gh-random:before {
content: "\E110"; content: "\E110";
} }
.halflings.comments:before { .gh-comments:before {
content: "\E111"; content: "\E111";
} }
.halflings.magnet:before { .gh-magnet:before {
content: "\E112"; content: "\E112";
} }
.halflings.chevron-up:before { .gh-chevron-up:before {
content: "\E113"; content: "\E113";
} }
.halflings.chevron-down:before { .gh-chevron-down:before {
content: "\E114"; content: "\E114";
} }
.halflings.retweet:before { .gh-retweet:before {
content: "\E115"; content: "\E115";
} }
.halflings.shopping-cart:before { .gh-shopping-cart:before {
content: "\E116"; content: "\E116";
} }
.halflings.folder-close:before { .gh-folder-close:before {
content: "\E117"; content: "\E117";
} }
.halflings.folder-open:before { .gh-folder-open:before {
content: "\E118"; content: "\E118";
} }
.halflings.resize-vertical:before { .gh-resize-vertical:before {
content: "\E119"; content: "\E119";
} }
.halflings.resize-horizontal:before { .gh-resize-horizontal:before {
content: "\E120"; content: "\E120";
} }
.halflings.hdd:before { .gh-hdd:before {
content: "\E121"; content: "\E121";
} }
.halflings.bullhorn:before { .gh-bullhorn:before {
content: "\E122"; content: "\E122";
} }
.halflings.bell:before { .gh-bell:before {
content: "\1F514"; content: "\1F514";
} }
.halflings.certificate:before { .gh-certificate:before {
content: "\E124"; content: "\E124";
} }
.halflings.thumbs-up:before { .gh-thumbs-up:before {
content: "\E125"; content: "\E125";
} }
.halflings.thumbs-down:before { .gh-thumbs-down:before {
content: "\E126"; content: "\E126";
} }
.halflings.hand-right:before { .gh-hand-right:before {
content: "\E127"; content: "\E127";
} }
.halflings.hand-left:before { .gh-hand-left:before {
content: "\E128"; content: "\E128";
} }
.halflings.hand-top:before { .gh-hand-top:before {
content: "\E129"; content: "\E129";
} }
.halflings.hand-down:before { .gh-hand-down:before {
content: "\E130"; content: "\E130";
} }
.halflings.circle-arrow-right:before { .gh-circle-arrow-right:before {
content: "\E131"; content: "\E131";
} }
.halflings.circle-arrow-left:before { .gh-circle-arrow-left:before {
content: "\E132"; content: "\E132";
} }
.halflings.circle-arrow-top:before { .gh-circle-arrow-top:before {
content: "\E133"; content: "\E133";
} }
.halflings.circle-arrow-down:before { .gh-circle-arrow-down:before {
content: "\E134"; content: "\E134";
} }
.halflings.globe:before { .gh-globe:before {
content: "\E135"; content: "\E135";
} }
.halflings.wrench:before { .gh-wrench:before {
content: "\1F527"; content: "\1F527";
} }
.halflings.tasks:before { .gh-tasks:before {
content: "\E137"; content: "\E137";
} }
.halflings.filter:before { .gh-filter:before {
content: "\E138"; content: "\E138";
} }
.halflings.briefcase:before { .gh-briefcase:before {
content: "\1F4BC"; content: "\1F4BC";
} }
.halflings.fullscreen:before { .gh-fullscreen:before {
content: "\E140"; content: "\E140";
} }
.halflings.dashboard:before { .gh-dashboard:before {
content: "\E141"; content: "\E141";
} }
.halflings.paperclip:before { .gh-paperclip:before {
content: "\1F4CE"; content: "\1F4CE";
} }
.halflings.heart-empty:before { .gh-heart-empty:before {
content: "\E143"; content: "\E143";
} }
.halflings.link:before { .gh-link:before {
content: "\E144"; content: "\E144";
} }
.halflings.phone:before { .gh-phone:before {
content: "\E145"; content: "\E145";
} }
.halflings.pushpin:before { .gh-pushpin:before {
content: "\1F4CC"; content: "\1F4CC";
} }
.halflings.euro:before { .gh-euro:before {
content: "\20AC"; content: "\20AC";
} }
.halflings.usd:before { .gh-usd:before {
content: "\E148"; content: "\E148";
} }
.halflings.gbp:before { .gh-gbp:before {
content: "\E149"; content: "\E149";
} }
.halflings.sort:before { .gh-sort:before {
content: "\E150"; content: "\E150";
} }
.halflings.sort-by-alphabet:before { .gh-sort-by-alphabet:before {
content: "\E151"; content: "\E151";
} }
.halflings.sort-by-alphabet-alt:before { .gh-sort-by-alphabet-alt:before {
content: "\E152"; content: "\E152";
} }
.halflings.sort-by-order:before { .gh-sort-by-order:before {
content: "\E153"; content: "\E153";
} }
.halflings.sort-by-order-alt:before { .gh-sort-by-order-alt:before {
content: "\E154"; content: "\E154";
} }
.halflings.sort-by-attributes:before { .gh-sort-by-attributes:before {
content: "\E155"; content: "\E155";
} }
.halflings.sort-by-attributes-alt:before { .gh-sort-by-attributes-alt:before {
content: "\E156"; content: "\E156";
} }
.halflings.unchecked:before { .gh-unchecked:before {
content: "\E157"; content: "\E157";
} }
.halflings.expand:before { .gh-expand:before {
content: "\E158"; content: "\E158";
} }
.halflings.collapse:before { .gh-collapse:before {
content: "\E159"; content: "\E159";
} }
.halflings.collapse-top:before { .gh-collapse-top:before {
content: "\E160"; content: "\E160";
} }
.halflings.log_in:before { .gh-log_in:before {
content: "\E161"; content: "\E161";
} }
.halflings.flash:before { .gh-flash:before {
content: "\E162"; content: "\E162";
} }
.halflings.log_out:before { .gh-log_out:before {
content: "\E163"; content: "\E163";
} }
.halflings.new_window:before { .gh-new_window:before {
content: "\E164"; content: "\E164";
} }
.halflings.record:before { .gh-record:before {
content: "\E165"; content: "\E165";
} }
.halflings.save:before { .gh-save:before {
content: "\E166"; content: "\E166";
} }
.halflings.open:before { .gh-open:before {
content: "\E167"; content: "\E167";
} }
.halflings.saved:before { .gh-saved:before {
content: "\E168"; content: "\E168";
} }
.halflings.import:before { .gh-import:before {
content: "\E169"; content: "\E169";
} }
.halflings.export:before { .gh-export:before {
content: "\E170"; content: "\E170";
} }
.halflings.send:before { .gh-send:before {
content: "\E171"; content: "\E171";
} }
.halflings.floppy_disk:before { .gh-floppy_disk:before {
content: "\E172"; content: "\E172";
} }
.halflings.floppy_saved:before { .gh-floppy_saved:before {
content: "\E173"; content: "\E173";
} }
.halflings.floppy_remove:before { .gh-floppy_remove:before {
content: "\E174"; content: "\E174";
} }
.halflings.floppy_save:before { .gh-floppy_save:before {
content: "\E175"; content: "\E175";
} }
.halflings.floppy_open:before { .gh-floppy_open:before {
content: "\E176"; content: "\E176";
} }
.halflings.credit_card:before { .gh-credit_card:before {
content: "\E177"; content: "\E177";
} }
.halflings.transfer:before { .gh-transfer:before {
content: "\E178"; content: "\E178";
} }
.halflings.cutlery:before { .gh-cutlery:before {
content: "\E179"; content: "\E179";
} }
.halflings.header:before { .gh-header:before {
content: "\E180"; content: "\E180";
} }
.halflings.compressed:before { .gh-compressed:before {
content: "\E181"; content: "\E181";
} }
.halflings.earphone:before { .gh-earphone:before {
content: "\E182"; content: "\E182";
} }
.halflings.phone_alt:before { .gh-phone_alt:before {
content: "\E183"; content: "\E183";
} }
.halflings.tower:before { .gh-tower:before {
content: "\E184"; content: "\E184";
} }
.halflings.stats:before { .gh-stats:before {
content: "\E185"; content: "\E185";
} }
.halflings.sd_video:before { .gh-sd_video:before {
content: "\E186"; content: "\E186";
} }
.halflings.hd_video:before { .gh-hd_video:before {
content: "\E187"; content: "\E187";
} }
.halflings.subtitles:before { .gh-subtitles:before {
content: "\E188"; content: "\E188";
} }
.halflings.sound_stereo:before { .gh-sound_stereo:before {
content: "\E189"; content: "\E189";
} }
.halflings.sound_dolby:before { .gh-sound_dolby:before {
content: "\E190"; content: "\E190";
} }
.halflings.sound_5_1:before { .gh-sound_5_1:before {
content: "\E191"; content: "\E191";
} }
.halflings.sound_6_1:before { .gh-sound_6_1:before {
content: "\E192"; content: "\E192";
} }
.halflings.sound_7_1:before { .gh-sound_7_1:before {
content: "\E193"; content: "\E193";
} }
.halflings.copyright_mark:before { .gh-copyright_mark:before {
content: "\E194"; content: "\E194";
} }
.halflings.registration_mark:before { .gh-registration_mark:before {
content: "\E195"; content: "\E195";
} }
.halflings.cloud:before { .gh-cloud:before {
content: "\2601"; content: "\2601";
} }
.halflings.cloud_download:before { .gh-cloud_download:before {
content: "\E197"; content: "\E197";
} }
.halflings.cloud_upload:before { .gh-cloud_upload:before {
content: "\E198"; content: "\E198";
} }
.halflings.tree_conifer:before { .gh-tree_conifer:before {
content: "\E199"; content: "\E199";
} }
.halflings.tree_deciduous:before { .gh-tree_deciduous:before {
content: "\E200"; content: "\E200";
} }

View file

@ -0,0 +1,160 @@
/**
* @provides phui-font-icon-base-css
*/
.phui-font-gh,
.phui-font-fa {
display: inline-block;
position: relative;
color: {$darkgreytext};
text-decoration: none;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.phui-font-gh:before,
.phui-font-fa:before {
position: absolute;
left: 0;
top: 0;
display: inline-block;
margin: 0 5px 0 0;
font-style: normal;
font-weight: normal;
color: {$darkgreytext};
*display: inline;
*zoom: 1;
vertical-align: middle;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ph-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.ph-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ph-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.ph-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.ph-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
.ph-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);
}
}
.phui-icon-view.bluegrey:before {
color: #7787a6;
}
.phui-icon-view.white:before {
color: #fff;
}
.phui-icon-view.red:before {
color: {$red};
}
.phui-icon-view.orange:before {
color: {$orange};
}
.phui-icon-view.yellow:before {
color: {$yellow};
}
.phui-icon-view.green:before {
color: {$green}
}
.phui-icon-view.blue:before {
color: {$blue};
}
.phui-icon-view.sky:before {
color: {$sky};
}
.phui-icon-view.indigo:before {
color: {$indigo};
}
.phui-icon-view.violet:before {
color: {$violet};
}
.phui-icon-view.lightbluetext:before {
color: {$lightbluetext};
}
.phui-icon-view.lightgreytext:before {
color: {$lightgreytext};
}

View file

@ -52,3 +52,7 @@
width: 35px; width: 35px;
background-size: 35px; background-size: 35px;
} }
.phui-icon-has-text {
padding-left: 20px;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.