330 lines
13 KiB
SCSS
330 lines
13 KiB
SCSS
@include icon-font;
|
|
|
|
.fa-fw {
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.fa {
|
|
&.fa-bars, &.fa-navicon, &.fa-reorder,
|
|
&.fa-globe,
|
|
&.fa-cog, &.fa-cogs, &.fa-gears,
|
|
&.fa-sign-out,
|
|
&.fa-search,
|
|
&.fa-times, &.fa-times-circle, &.fa-close, &.fa-remove,
|
|
&.fa-chevron-down, &.fa-ellipsis-v,
|
|
&.fa-paperclip,
|
|
&.fa-tasks,
|
|
&.fa-plus,
|
|
&.fa-unlock,
|
|
&.fa-lock,
|
|
&.fa-envelope,
|
|
&.fa-home,
|
|
&.fa-bullhorn,
|
|
&.fa-sliders,
|
|
&.fa-chevron-left,
|
|
&.fa-chevron-right,
|
|
&.fa-arrow-right,
|
|
&.fa-reply,
|
|
&.fa-reply-all,
|
|
&.fa-share-alt,
|
|
&.fa-star,
|
|
&.fa-bookmark,
|
|
&.fa-ellipsis-h,
|
|
&.fa-bell,
|
|
&.fa-bell-o,
|
|
&.fa-eraser,
|
|
&.fa-users,
|
|
&.fa-file-text,
|
|
&.fa-user-plus,
|
|
&.fa-address-book, &.fa-address-book-o,
|
|
&.fa-list, &.fa-list-ul,
|
|
&.fa-eye,
|
|
&.fa-eye-slash,
|
|
&.fa-pencil,
|
|
&.fa-trash,
|
|
&.fa-play,
|
|
&.fa-external-link,
|
|
&.fa-retweet,
|
|
&.fa-link,
|
|
&.fa-pause,
|
|
&.fa-volume-up,
|
|
&.fa-volume-off,
|
|
&.fa-expand,
|
|
&.fa-download,
|
|
&.fa-arrows-alt,
|
|
&.fa-compress,
|
|
&.fa-user-times,
|
|
&.fa-check,
|
|
&.fa-quote-right,
|
|
&.fa-upload,
|
|
&.fa-comments,
|
|
&.fa-angle-right,
|
|
&.fa-thumb-tack,
|
|
&.fa-hashtag,
|
|
&.fa-expand,
|
|
&.fa-refresh,
|
|
&.fa-user,
|
|
&.fa-desktop,
|
|
&.fa-exchange,
|
|
&.fa-cloud-upload,
|
|
&.fa-cloud-download,
|
|
&.fa-mobile-phone, &.fa-mobile,
|
|
&.fa-tablet,
|
|
&.fa-gavel, &.fa-legal,
|
|
&.fa-comment,
|
|
&.fa-camera,
|
|
&.fa-flag,
|
|
&.fa-circle,
|
|
&.fa-dashboard, &.fa-tachometer,
|
|
&.fa-cloud,
|
|
&.fa-ban,
|
|
&.fa-power-off,
|
|
&.fa-copy, &.fa-files-o,
|
|
&.fa-smile-o,
|
|
&.fa-database,
|
|
&.fa-floppy-o, &.fa-save {
|
|
@include icon-font-style;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
font-feature-settings: 'liga';
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
}
|
|
|
|
.fa {
|
|
&.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
|
|
&.fa-globe::before { content: "public" }
|
|
&.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
|
|
&.fa-sign-out::before { content: "exit_to_app" }
|
|
&.fa-search::before { content: "search" }
|
|
&.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
|
|
&.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
|
|
&.fa-paperclip::before { content: "attach_file" }
|
|
&.fa-tasks::before { content: "poll" }
|
|
&.fa-plus::before { content: "add" }
|
|
&.fa-unlock::before { content: "lock_open" }
|
|
&.fa-lock::before { content: "lock" }
|
|
&.fa-envelope::before { content: "mail" }
|
|
&.fa-home::before { content: "home" }
|
|
&.fa-bullhorn::before { content: "announcement" }
|
|
&.fa-sliders::before { content: "tune" }
|
|
&.fa-chevron-left::before { content: "arrow_back" }
|
|
&.fa-chevron-right::before { content: "arrow_forward" }
|
|
&.fa-arrow-right::before { content: "arrow_forward" }
|
|
&.fa-reply::before { content: $reply-icon }
|
|
&.fa-reply-all::before { content: "reply_all" }
|
|
&.fa-share-alt::before { content: "share" }
|
|
&.fa-star::before { content: $favorite-icon }
|
|
&.fa-bookmark::before { content: "bookmark" }
|
|
&.fa-ellipsis-h::before { content: "more_horiz" }
|
|
&.fa-bell::before { content: "notifications" }
|
|
&.fa-bell-o::before { content: "notifications" }
|
|
&.fa-eraser::before { content: "clear_all" }
|
|
&.fa-users::before { content: "people" }
|
|
&.fa-file-text::before { content: "web" }
|
|
&.fa-user-plus::before { content: "person_add" }
|
|
&.fa-address-book::before, &.fa-address-book-o::before { content: "explore" }
|
|
&.fa-list::before, &.fa-list-ul::before { content: "list" }
|
|
&.fa-eye::before { content: "visibility" }
|
|
&.fa-eye-slash::before { content : "visibility_off" }
|
|
&.fa-pencil::before { content: "create" }
|
|
&.fa-trash::before { content: "delete" }
|
|
&.fa-play::before { content: "play_arrow" }
|
|
&.fa-external-link::before { content: "open_in_new" }
|
|
&.fa-retweet::before { content: "repeat" }
|
|
&.fa-link::before { content: "link" }
|
|
&.fa-pause::before { content: "pause" }
|
|
&.fa-volume-up::before { content: "volume_up" }
|
|
&.fa-volume-off::before { content: "volume_off" }
|
|
&.fa-expand::before { content: "web_asset" }
|
|
&.fa-download::before { content: "file_download" }
|
|
&.fa-arrows-alt::before { content: "fullscreen" }
|
|
&.fa-compress::before { content: "fullscreen_exit" }
|
|
&.fa-user-times::before { content: "person_remove" }
|
|
&.fa-check::before { content: "check" }
|
|
&.fa-quote-right::before { content: "format_quote" }
|
|
&.fa-upload::before { content: "file_upload" }
|
|
&.fa-comments::before { content: "forum" }
|
|
&.fa-angle-right::before { content: "chevron_right" }
|
|
&.fa-thumb-tack::before { content: "push_pin" }
|
|
&.fa-hashtag::before { content: "tag" }
|
|
&.fa-expand::before { content: "open_in_full" }
|
|
&.fa-refresh::before { content: "refresh" }
|
|
&.fa-user::before { content: "person" }
|
|
&.fa-desktop::before { content: "web_asset" }
|
|
&.fa-exchange::before { content: "sync_alt" }
|
|
&.fa-cloud-upload::before { content: "cloud_upload" }
|
|
&.fa-cloud-download::before { content: "cloud_download" }
|
|
&.fa-mobile-phone::before, &.fa-mobile::before { content: "smartphone" }
|
|
&.fa-tablet::before { content: "tablet" }
|
|
&.fa-gavel::before, &.fa-legal::before { content: "admin_panel_settings" }
|
|
&.fa-comment::before { content: "comment" }
|
|
&.fa-camera::before { content: "photo_camera" }
|
|
&.fa-flag::before { content: "flag" }
|
|
&.fa-circle::before { content: "circle" }
|
|
&.fa-dashboard::before, &.fa-tachometer::before { content: "dashboard" }
|
|
&.fa-cloud::before { content: "cloud" }
|
|
&.fa-ban::before { content: "block" }
|
|
&.fa-power-off::before { content: "power_settings_new" }
|
|
&.fa-copy::before, &.fa-files-o::before { content: "content_copy" }
|
|
&.fa-smile-o::before { content: "emoji_emotions" }
|
|
&.fa-database::before { content: "storage" }
|
|
&.fa-floppy-o::before, &.fa-save::before { content: "save" }
|
|
}
|
|
|
|
// bookmark icon
|
|
.status__action-bar-button.icon-button,
|
|
.bookmark-icon.icon-button {
|
|
.fa.fa-bookmark::before { content: "bookmark_border" }
|
|
&.active .fa.fa-bookmark::before { content: "bookmark" }
|
|
}
|
|
|
|
// favorite icon
|
|
.status__action-bar-button.star-icon.icon-button,
|
|
.star-icon.icon-button {
|
|
.fa.fa-star::before { content: $favorite-icon-border }
|
|
|
|
&.active,
|
|
&.active.activate {
|
|
.fa.fa-star::before { content: $favorite-icon }
|
|
}
|
|
}
|
|
|
|
// favorite icon color
|
|
.star-icon.active,
|
|
.star-icon.icon-button.active.active,
|
|
.notification__favourite-icon-wrapper .star-icon,
|
|
.status__action-bar-button.star-icon.icon-button.active,
|
|
.media-modal__overlay .picture-in-picture__footer .icon-button.star-icon.active { color: $favorite-icon-color }
|
|
|
|
// boost icon
|
|
button.icon-button i.fa-retweet {
|
|
height: 20px;
|
|
width: 20px;
|
|
transition: none;
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-button-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($boosted-icon-color)}" stroke-width="0"/></svg>');
|
|
}
|
|
|
|
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{$media-icon-color}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($boosted-icon-color)}" stroke-width="0"/></svg>') }
|
|
|
|
button.icon-button i.fa-retweet:hover,
|
|
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-button-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($boosted-icon-color)}" stroke-width="0"/></svg>');
|
|
}
|
|
|
|
button.icon-button.disabled i.fa-retweet,
|
|
button.icon-button.disabled i.fa-retweet:hover,
|
|
button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
|
|
}
|
|
|
|
// private boost
|
|
button.icon-button.reblogPrivate i.fa-retweet,
|
|
button.icon-button.reblogPrivate:hover i.fa-retweet {
|
|
background-image: url('data:image/svg+xml;utf8,<svg height="40px" width="20px" viewBox="0 0 24 48" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 H 24 V 24 H 0 Z" fill="none" /><path d="M 17 2 L 17 5 L 5 5 L 5 11 L 7 11 L 7 7 L 17 7 L 17 10 L 21 6 L 17 2 z M 7 14 L 3 18 L 7 22 L 7 19 L 14 19 L 14 17 L 7 17 L 7 14 z " fill="#{svg-color($icon-button-color)}" /><path d="m 21,17 v -1 c 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2 v 1 c -0.55,0 -1,0.45 -1,1 v 3 c 0,0.55 0.45,1 1,1 h 4 c 0.55,0 1,-0.45 1,-1 v -3 c 0,-0.55 -0.45,-1 -1,-1 z m -1,0 h -2 v -1 c 0,-0.55 0.45,-1 1,-1 0.55,0 1,0.45 1,1 z" fill="#{svg-color($icon-button-color)}" /><path d="M 0,24 H 24 V 48 H 0 Z" fill="none" /><path d="M 17 26 L 17 29 L 5 29 L 5 35 L 7 35 L 7 31 L 17 31 L 17 34 L 21 30 L 17 26 z M 7 38 L 3 42 L 7 46 L 7 43 L 14 43 L 14 41 L 7 41 L 7 38 z" fill="#{svg-color($boosted-icon-color)}" /><path d="m 21,41 v -1 c 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2 v 1 c -0.55,0 -1,0.45 -1,1 v 3 c 0,0.55 0.45,1 1,1 h 4 c 0.55,0 1,-0.45 1,-1 v -3 c 0,-0.55 -0.45,-1 -1,-1 z m -1,0 h -2 v -1 c 0,-0.55 0.45,-1 1,-1 0.55,0 1,0.45 1,1 z" fill="#{svg-color($boosted-icon-color)}" /></svg>');
|
|
}
|
|
|
|
// dropdown icon
|
|
.compose-form__poll-wrapper select,
|
|
.simple_form select {
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>');
|
|
}
|
|
|
|
// icon in tab settings
|
|
.text-btn.column-header__setting-btn {
|
|
.fa {
|
|
vertical-align: middle;
|
|
|
|
&.fa-eraser { margin-right: 8px } // clear notification
|
|
}
|
|
}
|
|
|
|
// top bar icons align
|
|
.fa.fa-bell.column-header__icon.fa-fw,
|
|
.fa.fa-home.column-header__icon.fa-fw,
|
|
.fa.fa-users.column-header__icon.fa-fw,
|
|
.fa.fa-globe.column-header__icon.fa-fw,
|
|
.fa.fa-bars.column-header__icon.fa-fw,
|
|
.fa.fa-bookmark.column-header__icon.fa-fw,
|
|
.fa.fa-address-book-o.column-header__icon.fa-fw,
|
|
.fa.fa-envelope.column-header__icon.fa-fw,
|
|
.fa.fa-star.column-header__icon.fa-fw,
|
|
.fa.fa-list.column-header__icon.fa-fw,
|
|
.fa.fa-list-ul.column-header__icon.fa-fw { vertical-align: text-bottom }
|
|
|
|
// top bar icons in single column mode
|
|
.tabs-bar__link .fa {
|
|
&.fa-home,
|
|
&.fa-bell,
|
|
&.fa-users,
|
|
&.fa-globe,
|
|
&.fa-search {
|
|
&.fa-fw { vertical-align: text-bottom }
|
|
}
|
|
}
|
|
|
|
// getting-started and side bar icons
|
|
.column-link .fa,
|
|
.column-link--transparent .fa { vertical-align: text-bottom }
|
|
|
|
// uploaded media icons align
|
|
.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
|
|
font-size: 20px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
// search results icons align
|
|
.search-results__header .fa { vertical-align: text-bottom }
|
|
|
|
// read more icon
|
|
.status__content__read-more-button .fa { vertical-align: bottom }
|
|
|
|
// Attachment icon
|
|
.attachment-list__list a .fa { vertical-align: middle }
|
|
|
|
// verified icon
|
|
.verified__mark { vertical-align: middle }
|
|
|
|
// tag icon
|
|
.directory__tag h4 .fa { vertical-align: bottom }
|
|
|
|
// status detail icon
|
|
.detailed-status .fa {
|
|
font-size: 16px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
// Icons in lists or tables
|
|
tbody tr td span .fa {
|
|
color: $icon-color;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
a.table-action-link i.fa,
|
|
button.table-action-link i.fa {
|
|
font-size: 16px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
// you might like
|
|
.trends__header .fa { vertical-align: bottom }
|
|
|
|
// status scope
|
|
.status__visibility-icon .fa,
|
|
.account__header__tabs__name .fa {
|
|
font-size: 16px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
// sidebar icon in settings
|
|
.admin-wrapper .sidebar ul a i.fa { vertical-align: text-bottom }
|
|
|
|
|
|
.back-link a .fa { vertical-align: middle } |