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

View file

@ -12,206 +12,580 @@ final class PHUIIconExample extends PhabricatorUIExample {
private function listHalflings() {
return array (
'glass',
'music',
'search',
'envelope',
'heart',
'star',
'star-empty',
'user',
'film',
'th-large',
'th',
'th-list',
'ok',
'remove',
'zoom-in',
'zoom-out',
'off',
'signal',
'cog',
'trash',
'home',
'file',
'time',
'road',
'download-alt',
'download',
'upload',
'inbox',
'play-circle',
'repeat',
'refresh',
'list-alt',
'lock',
'flag',
'headphones',
'volume-off',
'volume-down',
'volume-up',
'qrcode',
'barcode',
'tag',
'tags',
'book',
'bookmark',
'print',
'camera',
'font',
'bold',
'italic',
'text-height',
'text-width',
'align-left',
'align-center',
'align-right',
'align-justify',
'list',
'indent-left',
'indent-right',
'facetime-video',
'picture',
'pencil',
'map-marker',
'adjust',
'tint',
'edit',
'share',
'check',
'move',
'step-backward',
'fast-backward',
'backward',
'play',
'pause',
'stop',
'forward',
'fast-forward',
'step-forward',
'eject',
'chevron-left',
'chevron-right',
'plus-sign',
'minus-sign',
'remove-sign',
'ok-sign',
'question-sign',
'info-sign',
'screenshot',
'remove-circle',
'ok-circle',
'ban-circle',
'arrow-left',
'arrow-right',
'arrow-up',
'arrow-down',
'share-alt',
'resize-full',
'resize-small',
'plus',
'minus',
'asterisk',
'exclamation-sign',
'gift',
'leaf',
'fire',
'eye-open',
'eye-close',
'warning-sign',
'plane',
'calendar',
'random',
'comments',
'magnet',
'chevron-up',
'chevron-down',
'retweet',
'shopping-cart',
'folder-close',
'folder-open',
'resize-vertical',
'resize-horizontal',
'hdd',
'bullhorn',
'bell',
'certificate',
'thumbs-up',
'thumbs-down',
'hand-right',
'hand-left',
'hand-top',
'hand-down',
'circle-arrow-right',
'circle-arrow-left',
'circle-arrow-top',
'circle-arrow-down',
'globe',
'wrench',
'tasks',
'filter',
'briefcase',
'fullscreen',
'dashboard',
'paperclip',
'heart-empty',
'link',
'phone',
'pushpin',
'euro',
'usd',
'gbp',
'sort',
'sort-by-alphabet',
'sort-by-alphabet-alt',
'sort-by-order',
'sort-by-order-alt',
'sort-by-attributes',
'sort-by-attributes-alt',
'unchecked',
'expand',
'collapse',
'collapse-top',
'log_in',
'flash',
'log_out',
'new_window',
'record',
'save',
'open',
'saved',
'import',
'export',
'send',
'floppy_disk',
'floppy_saved',
'floppy_remove',
'floppy_save',
'floppy_open',
'credit_card',
'transfer',
'cutlery',
'header',
'compressed',
'earphone',
'phone_alt',
'tower',
'stats',
'sd_video',
'hd_video',
'subtitles',
'sound_stereo',
'sound_dolby',
'sound_5_1',
'sound_6_1',
'sound_7_1',
'copyright_mark',
'registration_mark',
'cloud',
'cloud_download',
'cloud_upload',
'tree_conifer',
'tree_deciduous',
'gh-glass',
'gh-music',
'gh-search',
'gh-envelope',
'gh-heart',
'gh-star',
'gh-star-empty',
'gh-user',
'gh-film',
'gh-th-large',
'gh-th',
'gh-th-list',
'gh-ok',
'gh-remove',
'gh-zoom-in',
'gh-zoom-out',
'gh-off',
'gh-signal',
'gh-cog',
'gh-trash',
'gh-home',
'gh-file',
'gh-time',
'gh-road',
'gh-download-alt',
'gh-download',
'gh-upload',
'gh-inbox',
'gh-play-circle',
'gh-repeat',
'gh-refresh',
'gh-list-alt',
'gh-lock',
'gh-flag',
'gh-headphones',
'gh-volume-off',
'gh-volume-down',
'gh-volume-up',
'gh-qrcode',
'gh-barcode',
'gh-tag',
'gh-tags',
'gh-book',
'gh-bookmark',
'gh-print',
'gh-camera',
'gh-font',
'gh-bold',
'gh-italic',
'gh-text-height',
'gh-text-width',
'gh-align-left',
'gh-align-center',
'gh-align-right',
'gh-align-justify',
'gh-list',
'gh-indent-left',
'gh-indent-right',
'gh-facetime-video',
'gh-picture',
'gh-pencil',
'gh-map-marker',
'gh-adjust',
'gh-tint',
'gh-edit',
'gh-share',
'gh-check',
'gh-move',
'gh-step-backward',
'gh-fast-backward',
'gh-backward',
'gh-play',
'gh-pause',
'gh-stop',
'gh-forward',
'gh-fast-forward',
'gh-step-forward',
'gh-eject',
'gh-chevron-left',
'gh-chevron-right',
'gh-plus-sign',
'gh-minus-sign',
'gh-remove-sign',
'gh-ok-sign',
'gh-question-sign',
'gh-info-sign',
'gh-screenshot',
'gh-remove-circle',
'gh-ok-circle',
'gh-ban-circle',
'gh-arrow-left',
'gh-arrow-right',
'gh-arrow-up',
'gh-arrow-down',
'gh-share-alt',
'gh-resize-full',
'gh-resize-small',
'gh-plus',
'gh-minus',
'gh-asterisk',
'gh-exclamation-sign',
'gh-gift',
'gh-leaf',
'gh-fire',
'gh-eye-open',
'gh-eye-close',
'gh-warning-sign',
'gh-plane',
'gh-calendar',
'gh-random',
'gh-comments',
'gh-magnet',
'gh-chevron-up',
'gh-chevron-down',
'gh-retweet',
'gh-shopping-cart',
'gh-folder-close',
'gh-folder-open',
'gh-resize-vertical',
'gh-resize-horizontal',
'gh-hdd',
'gh-bullhorn',
'gh-bell',
'gh-certificate',
'gh-thumbs-up',
'gh-thumbs-down',
'gh-hand-right',
'gh-hand-left',
'gh-hand-top',
'gh-hand-down',
'gh-circle-arrow-right',
'gh-circle-arrow-left',
'gh-circle-arrow-top',
'gh-circle-arrow-down',
'gh-globe',
'gh-wrench',
'gh-tasks',
'gh-filter',
'gh-briefcase',
'gh-fullscreen',
'gh-dashboard',
'gh-paperclip',
'gh-heart-empty',
'gh-link',
'gh-phone',
'gh-pushpin',
'gh-euro',
'gh-usd',
'gh-gbp',
'gh-sort',
'gh-sort-by-alphabet',
'gh-sort-by-alphabet-alt',
'gh-sort-by-order',
'gh-sort-by-order-alt',
'gh-sort-by-attributes',
'gh-sort-by-attributes-alt',
'gh-unchecked',
'gh-expand',
'gh-collapse',
'gh-collapse-top',
'gh-log_in',
'gh-flash',
'gh-log_out',
'gh-new_window',
'gh-record',
'gh-save',
'gh-open',
'gh-saved',
'gh-import',
'gh-export',
'gh-send',
'gh-floppy_disk',
'gh-floppy_saved',
'gh-floppy_remove',
'gh-floppy_save',
'gh-floppy_open',
'gh-credit_card',
'gh-transfer',
'gh-cutlery',
'gh-header',
'gh-compressed',
'gh-earphone',
'gh-phone_alt',
'gh-tower',
'gh-stats',
'gh-sd_video',
'gh-hd_video',
'gh-subtitles',
'gh-sound_stereo',
'gh-sound_dolby',
'gh-sound_5_1',
'gh-sound_6_1',
'gh-sound_7_1',
'gh-copyright_mark',
'gh-registration_mark',
'gh-cloud',
'gh-cloud_download',
'gh-cloud_upload',
'gh-tree_conifer',
'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',
'indigo',
'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() {
$colors = $this->listColors();
$trans = $this->listTransforms();
$glyphs = $this->listHalflings();
$fas = $this->listFontAwesome();
$gicons = array();
foreach ($glyphs as $glyph) {
$gicons[] = id(new PHUIIconView())
->addClass('phui-halfling-name')
->addClass('phui-example-icon-name')
->setHalfling($glyph)
->appendChild($glyph);
->setText($glyph);
}
$cicons = array();
foreach ($colors as $color) {
$cicons[] = id(new PHUIIconView())
->addClass('phui-halfling-color')
->setHalfling('tag', $color)
->appendChild(pht('tag %s', $color));
->addClass('phui-example-icon-transform')
->setHalfling('gh-tag '.$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();
@ -360,6 +758,10 @@ final class PHUIIconExample extends PhabricatorUIExample {
->appendChild($cicons)
->addMargin(PHUI::MARGIN_LARGE);
$layout_fa = id(new PHUIBoxView())
->appendChild($ficons)
->addMargin(PHUI::MARGIN_LARGE);
$layout1 = id(new PHUIBoxView())
->appendChild($actionview)
->addMargin(PHUI::MARGIN_MEDIUM);
@ -388,8 +790,12 @@ final class PHUIIconExample extends PhabricatorUIExample {
->setHeaderText(pht('Glyphicon Halflings'))
->appendChild($layout_gicons);
$halflings_color = id(new PHUIObjectBoxView())
->setHeaderText(pht('Halflings Colors'))
$fontawesome = id(new PHUIObjectBoxView())
->setHeaderText(pht('Font Awesome'))
->appendChild($layout_fa);
$transforms = id(new PHUIObjectBoxView())
->setHeaderText(pht('Colors and Transforms'))
->appendChild($layout_cicons);
$wrap1 = id(new PHUIObjectBoxView())
@ -419,7 +825,8 @@ final class PHUIIconExample extends PhabricatorUIExample {
),
array(
$halflings,
$halflings_color,
$fontawesome,
$transforms,
$wrap1,
$wrap2,
$wrap3,

View file

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

View file

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

Binary file not shown.

Binary file not shown.

Binary file not shown.