diff options
| author | Asaad Mahmood <asaad@spinpunch.com> | 2016-03-14 22:35:57 +0500 |
|---|---|---|
| committer | Asaad Mahmood <asaad@spinpunch.com> | 2016-03-14 22:39:44 +0500 |
| commit | e214aae719c10953c4c3a7949c9bd02d6983b045 (patch) | |
| tree | de67fab11c5866493374d602930b4b5fbc98d05a | |
| parent | bf7ae0711743926cfbb031675cc3320d7a942465 (diff) | |
| download | chat-e214aae719c10953c4c3a7949c9bd02d6983b045.tar.gz chat-e214aae719c10953c4c3a7949c9bd02d6983b045.tar.bz2 chat-e214aae719c10953c4c3a7949c9bd02d6983b045.zip | |
PLT-963 - Improving scss structure
113 files changed, 5493 insertions, 5018 deletions
diff --git a/config/config.json b/config/config.json index b211b16d3..7e8b42708 100644 --- a/config/config.json +++ b/config/config.json @@ -11,7 +11,7 @@ "EnableOnlyAdminIntegrations": true, "EnablePostUsernameOverride": false, "EnablePostIconOverride": false, - "EnableTesting": false, + "EnableTesting": true, "EnableDeveloper": false, "EnableSecurityFixAlert": true, "EnableInsecureOutgoingConnections": false, @@ -19,7 +19,9 @@ "SessionLengthWebInDays": 30, "SessionLengthMobileInDays": 30, "SessionLengthSSOInDays": 30, - "SessionCacheInMinutes": 10 + "SessionCacheInMinutes": 10, + "WebsocketSecurePort": 443, + "WebsocketPort": 80 }, "TeamSettings": { "SiteName": "Mattermost", @@ -72,7 +74,7 @@ "EnableSignUpWithEmail": true, "EnableSignInWithEmail": true, "EnableSignInWithUsername": false, - "SendEmailNotifications": false, + "SendEmailNotifications": true, "RequireEmailVerification": false, "FeedbackName": "", "FeedbackEmail": "", @@ -113,5 +115,28 @@ "AuthEndpoint": "", "TokenEndpoint": "", "UserApiEndpoint": "" + }, + "GoogleSettings": { + "Enable": false, + "Secret": "", + "Id": "", + "Scope": "", + "AuthEndpoint": "", + "TokenEndpoint": "", + "UserApiEndpoint": "" + }, + "LdapSettings": { + "Enable": false, + "LdapServer": null, + "LdapPort": 389, + "BaseDN": null, + "BindUsername": null, + "BindPassword": null, + "FirstNameAttribute": null, + "LastNameAttribute": null, + "EmailAttribute": null, + "UsernameAttribute": null, + "IdAttribute": null, + "QueryTimeout": 60 } -} +}
\ No newline at end of file diff --git a/model/version.go b/model/version.go index 6011a9245..46f34b81e 100644 --- a/model/version.go +++ b/model/version.go @@ -31,7 +31,7 @@ var CurrentVersion string = versions[0] var BuildNumber = "_BUILD_NUMBER_" var BuildDate = "_BUILD_DATE_" var BuildHash = "_BUILD_HASH_" -var BuildEnterpriseReady = "_BUILD_ENTERPRISE_READY_" +var BuildEnterpriseReady = "false" var versionsWithoutHotFixes []string func init() { diff --git a/templates/error.html b/templates/error.html index b86039ca3..5aa48098f 100644 --- a/templates/error.html +++ b/templates/error.html @@ -2,7 +2,7 @@ <!DOCTYPE html> <html> {{template "head" . }} -<body class="white error"> +<body class="sticky error"> <div class="container-fluid"> <div class="error__container"> <div class="error__icon"> diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index 4c4f21f08..6dca391d0 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -172,7 +172,10 @@ export default class AdminController extends React.Component { } return ( - <div id='admin_controller'> + <div + id='admin_controller' + className='admin-controller' + > <div className='sidebar--menu' id='sidebar-menu' @@ -186,7 +189,7 @@ export default class AdminController extends React.Component { removeSelectedTeam={this.removeSelectedTeam} addSelectedTeam={this.addSelectedTeam} /> - <div className='inner__wrap channel__wrap'> + <div className='inner-wrap channel__wrap'> <div className='row header'> </div> <div className='row main'> diff --git a/web/react/components/admin_console/team_users.jsx b/web/react/components/admin_console/team_users.jsx index 256576f9b..708907ddb 100644 --- a/web/react/components/admin_console/team_users.jsx +++ b/web/react/components/admin_console/team_users.jsx @@ -163,7 +163,7 @@ export default class UserList extends React.Component { className='form-horizontal' role='form' > - <table className='table more-table member-list-holder'> + <table className='more-modal__list member-list-holder'> <tbody> {memberList} </tbody> diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx index 7d6cfb5c3..722da922a 100644 --- a/web/react/components/admin_console/user_item.jsx +++ b/web/react/components/admin_console/user_item.jsx @@ -363,15 +363,15 @@ export default class UserItem extends React.Component { return ( <tr> - <td className='row member-div padding--equal'> + <td className='more-modal__row'> <img - className='post-profile-img pull-left' + className='more-modal__image pull-left' src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} height='36' width='36' /> - <span className='more-name'>{Utils.getDisplayName(user)}</span> - <span className='more-description'>{email}</span> + <span className='more-modal__name'>{Utils.getDisplayName(user)}</span> + <span className='more-modal__description'>{email}</span> <div className='dropdown member-drop'> <a href='#' diff --git a/web/react/components/authorize.jsx b/web/react/components/authorize.jsx index 35ad7ac10..4b1cebcf4 100644 --- a/web/react/components/authorize.jsx +++ b/web/react/components/authorize.jsx @@ -38,7 +38,7 @@ export default class Authorize extends React.Component { render() { return ( <div className='container-fluid'> - <div className='oauth-prompt'> + <div className='prompt'> <div className='prompt__heading'> <div className='prompt__app-icon'> <img diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx index 2ea840c1e..9a5f7a5d1 100644 --- a/web/react/components/center_panel.jsx +++ b/web/react/components/center_panel.jsx @@ -103,7 +103,7 @@ export default class CenterPanel extends React.Component { } return ( - <div className='inner__wrap channel__wrap'> + <div className='inner-wrap channel__wrap'> <div className='row header'> <div id='navbar'> <Navbar/> diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index 8abcac8c3..383529212 100644 --- a/web/react/components/file_attachment.jsx +++ b/web/react/components/file_attachment.jsx @@ -49,8 +49,8 @@ class FileAttachment extends React.Component { if (name in self.refs) { var imgDiv = ReactDOM.findDOMNode(self.refs[name]); - $(imgDiv).removeClass('post__load'); - $(imgDiv).addClass('post__image'); + $(imgDiv).removeClass('post-image__load'); + $(imgDiv).addClass('post-image'); var width = this.width || $(this).width(); var height = this.height || $(this).height(); @@ -134,7 +134,7 @@ class FileAttachment extends React.Component { thumbnail = ( <div ref={filename} - className='post__load' + className='post-image__load' style={{backgroundImage: 'url(/static/images/load.gif)'}} /> ); diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index 265d3f367..97949ca3d 100644 --- a/web/react/components/file_preview.jsx +++ b/web/react/components/file_preview.jsx @@ -41,15 +41,15 @@ export default class FilePreview extends React.Component { previews.push( <div key={filename} - className='preview-div' + className='file-preview' data-filename={originalFilename} > <img - className='preview-img' + className='file-preview__image' src={filename} /> <a - className='remove-preview' + className='file-preview__remove' onClick={this.handleRemove} > <i className='glyphicon glyphicon-remove'/> @@ -60,12 +60,12 @@ export default class FilePreview extends React.Component { previews.push( <div key={filename} - className='preview-div custom-file' + className='file-preview custom-file' data-filename={originalFilename} > <div className={'file-icon ' + Utils.getIconClassName(type)}/> <a - className='remove-preview' + className='file-preview__remove' onClick={this.handleRemove} > <i className='glyphicon glyphicon-remove'/> @@ -80,7 +80,7 @@ export default class FilePreview extends React.Component { <div ref={clientId} key={clientId} - className='preview-div' + className='file-preview' data-client-id={clientId} > <img @@ -88,7 +88,7 @@ export default class FilePreview extends React.Component { src='/static/images/load.gif' /> <a - className='remove-preview' + className='file-preview__remove' onClick={this.handleRemove} > <i className='glyphicon glyphicon-remove'/> @@ -98,7 +98,7 @@ export default class FilePreview extends React.Component { }); return ( - <div className='preview-container'> + <div className='file-preview__container'> {previews} </div> ); diff --git a/web/react/components/filtered_user_list.jsx b/web/react/components/filtered_user_list.jsx index ffd6ebf53..77a8c8810 100644 --- a/web/react/components/filtered_user_list.jsx +++ b/web/react/components/filtered_user_list.jsx @@ -27,10 +27,6 @@ class FilteredUserList extends React.Component { }; } - componentDidMount() { - $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar(); - } - componentDidUpdate(prevProps, prevState) { if (prevState.filter !== this.state.filter) { $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0); @@ -109,7 +105,7 @@ class FilteredUserList extends React.Component { </div> <div ref='userList' - className='user-list' + className='more-modal__list' > <UserList users={users} diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx index 3309d690c..dd21f21e0 100644 --- a/web/react/components/get_link_modal.jsx +++ b/web/react/components/get_link_modal.jsx @@ -81,7 +81,7 @@ export default class GetLinkModal extends React.Component { var copyLinkConfirm = null; if (this.state.copiedLink) { copyLinkConfirm = ( - <p className='alert alert-success copy-link-confirm'> + <p className='alert alert-success alert--confirm'> <i className='fa fa-check'></i> <FormattedMessage id='get_link.clipboard' diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index 3309ef52e..2ba435449 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -95,17 +95,18 @@ export default class MoreChannels extends React.Component { } return ( - <tr key={channel.id}> - <td className='more-row'> - <div className='more-details'> - <p className='more-name'>{channel.display_name}</p> - <p className='more-description'>{channel.purpose}</p> - </div> - <div className='more-actions'> - {joinButton} - </div> - </td> - </tr> + <div + className='more-modal__row' + key={channel.id} + > + <div className='more-modal__details'> + <p className='more-modal__name'>{channel.display_name}</p> + <p className='more-modal__description'>{channel.purpose}</p> + </div> + <div className='more-modal__actions'> + {joinButton} + </div> + </div> ); } render() { @@ -127,11 +128,9 @@ export default class MoreChannels extends React.Component { moreChannels = <LoadingScreen/>; } else if (channels.length) { moreChannels = ( - <table className='more-table table'> - <tbody> - {channels.map(this.createChannelRow)} - </tbody> - </table> + <div className='more-modal__list'> + {channels.map(this.createChannelRow)} + </div> ); } else { moreChannels = ( diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 974f026d0..8382cb47a 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -66,7 +66,7 @@ export default class Navbar extends React.Component { componentDidMount() { ChannelStore.addChangeListener(this.onChange); ChannelStore.addExtraInfoChangeListener(this.onChange); - $('.inner__wrap').click(this.hideSidebars); + $('.inner-wrap').click(this.hideSidebars); attachFastClick(document.body); } componentWillUnmount() { @@ -101,7 +101,7 @@ export default class Navbar extends React.Component { }); if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') { - $('.inner__wrap').removeClass('move--right move--left move--left-small'); + $('.inner-wrap').removeClass('move--right move--left move--left-small'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); $('.sidebar--menu').removeClass('move--left'); @@ -109,11 +109,11 @@ export default class Navbar extends React.Component { } } toggleLeftSidebar() { - $('.inner__wrap').toggleClass('move--right'); + $('.inner-wrap').toggleClass('move--right'); $('.sidebar--left').toggleClass('move--right'); } toggleRightSidebar() { - $('.inner__wrap').toggleClass('move--left-small'); + $('.inner-wrap').toggleClass('move--left-small'); $('.sidebar--menu').toggleClass('move--left'); } showSearch() { diff --git a/web/react/components/not_logged_in.jsx b/web/react/components/not_logged_in.jsx index 7af293e77..cf3effcd5 100644 --- a/web/react/components/not_logged_in.jsx +++ b/web/react/components/not_logged_in.jsx @@ -5,7 +5,7 @@ import {FormattedMessage} from 'mm-intl'; export default class NotLoggedIn extends React.Component { componentDidMount() { - $('body').attr('class', 'white'); + $('body').attr('class', 'sticky'); $('#root').attr('class', 'container-fluid'); } componentWillUnmount() { @@ -14,7 +14,7 @@ export default class NotLoggedIn extends React.Component { } render() { return ( - <div className='inner__wrap'> + <div className='inner-wrap'> <div className='row content'> {this.props.children} <div className='footer-push'></div> diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index 1943fb409..8f6948ee4 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -110,25 +110,25 @@ export default class PopoverListMembers extends React.Component { if (name) { popoverHtml.push( <div - className='text-nowrap' + className='more-modal__row' key={'popover-member-' + i} > <img - className='profile-img rounded pull-left' + className='more-modal__image' width='26px' height='26px' src={`/api/v1/users/${m.id}/image?time=${m.update_at}`} /> - <div className='pull-left'> + <div className='more-modal__details'> <div - className='more-name' + className='more-modal__name' > {name} </div> </div> <div - className='pull-right' + className='more-modal__actions' > {button} </div> @@ -185,7 +185,7 @@ export default class PopoverListMembers extends React.Component { title={title} id='member-list-popover' > - {popoverHtml} + <div className='more-modal__list'>{popoverHtml}</div> </Popover> </Overlay> </div> diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index eaf8b5069..3afd0e840 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -164,7 +164,7 @@ class SearchBar extends React.Component { </span> <form role='form' - className='search__form relative-div' + className='search__form' onSubmit={this.handleSubmit} style={{overflow: 'visible'}} autoComplete='off' diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index 3a091bdd1..9c3b0336b 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -25,7 +25,7 @@ export default class SearchResultsItem extends React.Component { if ($(window).width() < 768) { $('.sidebar--right').removeClass('move--left'); - $('.inner__wrap').removeClass('move--left'); + $('.inner-wrap').removeClass('move--left'); } } diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index 14853d3a3..fc9888626 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -55,27 +55,27 @@ export default class SidebarRight extends React.Component { var windowWidth = $(window).outerWidth(); var sidebarRightWidth = $('.sidebar--right').outerWidth(); - $('.inner__wrap').removeClass('.move--right'); - $('.inner__wrap').addClass('move--left'); + $('.inner-wrap').removeClass('.move--right'); + $('.inner-wrap').addClass('move--left'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').addClass('move--left'); //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>'); if (this.state.search_visible || this.state.post_right_visible) { if (windowWidth > 960) { - $('.inner__wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); + $('.inner-wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); $('.sidebar--right').velocity({translateX: 0}, {duration: 500, easing: 'easeOutSine'}); } else { - $('.inner__wrap, .sidebar--right').attr('style', ''); + $('.inner-wrap, .sidebar--right').attr('style', ''); } } else { if (windowWidth > 960) { - $('.inner__wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'}); + $('.inner-wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'}); $('.sidebar--right').velocity({translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); } else { - $('.inner__wrap, .sidebar--right').attr('style', ''); + $('.inner-wrap, .sidebar--right').attr('style', ''); } - $('.inner__wrap').removeClass('move--left').removeClass('move--right'); + $('.inner-wrap').removeClass('move--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); return ( <div></div> diff --git a/web/react/components/suggestion/at_mention_provider.jsx b/web/react/components/suggestion/at_mention_provider.jsx index c5bd13c26..b53b351d9 100644 --- a/web/react/components/suggestion/at_mention_provider.jsx +++ b/web/react/components/suggestion/at_mention_provider.jsx @@ -24,7 +24,7 @@ class AtMentionSuggestion extends React.Component { defaultMessage='Notifies everyone in the team' /> ); - icon = <i className='mention-img fa fa-users fa-2x'/>; + icon = <i className='mention__image fa fa-users fa-2x'/>; } else if (item.username === 'channel') { username = 'channel'; description = ( @@ -33,19 +33,19 @@ class AtMentionSuggestion extends React.Component { defaultMessage='Notifies everyone in the channel' /> ); - icon = <i className='mention-img fa fa-users fa-2x'/>; + icon = <i className='mention__image fa fa-users fa-2x'/>; } else { username = item.username; description = Utils.getFullName(item); icon = ( <img - className='mention-img' + className='mention__image' src={'/api/v1/users/' + item.id + '/image?time=' + item.update_at} /> ); } - let className = 'mentions-name'; + let className = 'mentions__name'; if (isSelection) { className += ' suggestion--selected'; } @@ -58,11 +58,11 @@ class AtMentionSuggestion extends React.Component { <div className='pull-left'> {icon} </div> - <div className='pull-left mention-align'> + <div className='pull-left mention--align'> <span> {'@' + username} </span> - <span className='mention-fullname'> + <span className='mention__fullname'> {description} </span> </div> diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx index 21d6d0e0e..fffb2df07 100644 --- a/web/react/components/suggestion/command_provider.jsx +++ b/web/react/components/suggestion/command_provider.jsx @@ -7,7 +7,7 @@ class CommandSuggestion extends React.Component { render() { const {item, isSelection, onClick} = this.props; - let className = 'command-name'; + let className = 'command'; if (isSelection) { className += ' suggestion--selected'; } diff --git a/web/react/components/suggestion/suggestion_list.jsx b/web/react/components/suggestion/suggestion_list.jsx index ccebeb990..0f5907179 100644 --- a/web/react/components/suggestion/suggestion_list.jsx +++ b/web/react/components/suggestion/suggestion_list.jsx @@ -111,7 +111,7 @@ export default class SuggestionList extends React.Component { <div className='suggestion-list suggestion-list--top'> <div ref='content' - className='suggestion-content suggestion-content--top' + className='suggestion-list__content suggestion-list__content--top' > {items} </div> diff --git a/web/react/components/user_list.jsx b/web/react/components/user_list.jsx index 39453a827..783d552dc 100644 --- a/web/react/components/user_list.jsx +++ b/web/react/components/user_list.jsx @@ -21,23 +21,19 @@ export default class UserList extends React.Component { }); } else { content = ( - <tr key='no-users-found'> - <td> - <FormattedMessage - id='user_list.notFound' - defaultMessage='No users found :(' - /> - </td> - </tr> + <div key='no-users-found'> + <FormattedMessage + id='user_list.notFound' + defaultMessage='No users found :(' + /> + </div> ); } return ( - <table className='more-table table'> - <tbody> - {content} - </tbody> - </table> + <div> + {content} + </div> ); } } diff --git a/web/react/components/user_list_row.jsx b/web/react/components/user_list_row.jsx index 1ca40687f..8c664ba82 100644 --- a/web/react/components/user_list_row.jsx +++ b/web/react/components/user_list_row.jsx @@ -25,32 +25,32 @@ export default function UserListRow({user, actions}) { }); return ( - <tr> - <td - key={user.id} - style={{display: 'flex'}} + <div + key={user.id} + className='more-modal__row' + > + <img + className='more-modal__image' + width='38' + height='38' + src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} + /> + <div + className='more-modal__details' > - <img - className='profile-img' - src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} - /> - <div - className='user-list-item__details' - > - <div className='more-name'> - {name} - </div> - <div className='more-description'> - {user.email} - </div> + <div className='more-modal__name'> + {name} </div> - <div - className='user-list-item__actions' - > - {buttons} + <div className='more-modal__description'> + {user.email} </div> - </td> - </tr> + </div> + <div + className='more-modal__actions' + > + {buttons} + </div> + </div> ); } diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx index 18cce3bde..bed798b3e 100644 --- a/web/react/utils/emoticons.jsx +++ b/web/react/utils/emoticons.jsx @@ -132,7 +132,7 @@ export function handleEmoticons(text, tokens) { const alias = `MM_EMOTICON${index}`; tokens.set(alias, { - value: `<img align="absmiddle" alt="${matchText}" class="emoji" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`, + value: `<img align="absmiddle" alt="${matchText}" class="emoticon" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`, originalText: fullMatch }); diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx index a930e9ece..552d93fac 100644 --- a/web/react/utils/text_formatting.jsx +++ b/web/react/utils/text_formatting.jsx @@ -187,7 +187,7 @@ function highlightCurrentMentions(text, tokens) { const newAlias = `MM_SELFMENTION${index}`; newTokens.set(newAlias, { - value: `<span class='mention-highlight'>${alias}</span>`, + value: `<span class='mention--highlight'>${alias}</span>`, originalText: token.originalText }); output = output.replace(alias, newAlias); @@ -205,7 +205,7 @@ function highlightCurrentMentions(text, tokens) { const alias = `MM_SELFMENTION${index}`; tokens.set(alias, { - value: `<span class='mention-highlight'>${mention}</span>`, + value: `<span class='mention--highlight'>${mention}</span>`, originalText: mention }); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 88777164b..360d1f4a5 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -676,11 +676,11 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { - changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); - changeCss('.post-image__column .post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1); + changeCss('.post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1); changeCss('.sidebar--right, .dropdown-menu, .popover, .tip-overlay', 'background:' + theme.centerChannelBg, 1); changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1); changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1); @@ -694,8 +694,8 @@ export function applyTheme(theme) { if (theme.centerChannelColor) { changeCss('.post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); - changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1); + changeCss('.sidebar--left, .sidebar--right .sidebar--right__header, .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .suggestion-list__content .command, .modal .modal-content, .dropdown-menu, .popover, .mentions__name, .tip-overlay', 'color:' + theme.centerChannelColor, 1); changeCss('#archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('#post-create', 'color:' + theme.centerChannelColor, 2); changeCss('.mentions--top, .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); @@ -709,17 +709,17 @@ export function applyTheme(theme) { changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); - changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.custom-textarea, .custom-textarea:focus, .file-preview, .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-list__content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1); changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); - changeCss('.command-name, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.suggestion-list__content .command, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.dropdown-menu .divider, .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1); changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1); changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); - changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2); + changeCss('.post-image__details', 'color:' + theme.centerChannelColor, 2); changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1); changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2); changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); @@ -732,11 +732,11 @@ export function applyTheme(theme) { changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.channel-intro, .modal .settings-modal .settings-table .settings-content .divider-dark, hr, .modal .settings-modal .settings-table .settings-links, .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); - changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); - changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .more-modal__list .more-modal__row, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); + changeCss('@media(max-width: 1800px){.inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); + changeCss('.post:hover, .more-modal__list .more-modal__row:hover, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.command-name:hover, .mentions-name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); + changeCss('.suggestion-list__content .command:hover, .mentions__name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('code, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1); changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2); @@ -759,7 +759,7 @@ export function applyTheme(theme) { if (theme.buttonBg) { changeCss('.btn.btn-primary, .tutorial__circles .circle.active', 'background:' + theme.buttonBg, 1); changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1); - changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1); + changeCss('.file-playback__controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1); } if (theme.buttonColor) { @@ -767,7 +767,7 @@ export function applyTheme(theme) { } if (theme.mentionHighlightBg) { - changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1); + changeCss('.mention--highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1); } if (theme.mentionHighlightBg) { @@ -775,7 +775,7 @@ export function applyTheme(theme) { } if (theme.mentionHighlightLink) { - changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1); + changeCss('.mention--highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1); } if (!theme.codeTheme) { @@ -946,7 +946,7 @@ export function switchChannel(channel) { updateAddressBar(channel.name); - $('.inner__wrap').removeClass('move--right'); + $('.inner-wrap').removeClass('move--right'); $('.sidebar--left').removeClass('move--right'); client.trackPage(); diff --git a/web/sass-files/sass/base/_module.scss b/web/sass-files/sass/base/_module.scss new file mode 100644 index 000000000..987b9200b --- /dev/null +++ b/web/sass-files/sass/base/_module.scss @@ -0,0 +1,3 @@ +// Only for combining all the files in this folder +@import 'typography'; +@import 'structure'; diff --git a/web/sass-files/sass/base/_structure.scss b/web/sass-files/sass/base/_structure.scss new file mode 100644 index 000000000..56888f8dc --- /dev/null +++ b/web/sass-files/sass/base/_structure.scss @@ -0,0 +1,57 @@ +@charset 'UTF-8'; + +html, +body { + height: 100%; +} + +body { + width: 100%; + height: 100%; + background: $bg--gray; + position: relative; + + &.sticky { + background: $bg--white; + + > .container-fluid { + overflow: auto; + } + + .inner-wrap { + > .row.content { + min-height: 100%; + margin-bottom: -89px; + } + } + } +} + +.inner-wrap { + height: 100%; + + > .row.main { + height: 100%; + position: relative; + } +} + +.container-fluid { + @include legacy-pie-clearfix; + height: 100%; + position: relative; +} + +.channel-view { + @include clearfix; + height: 100%; + position: relative; +} + +img { + max-width: 100%; + + &.rounded { + @include border-radius(100%); + } +} diff --git a/web/sass-files/sass/base/_typography.scss b/web/sass-files/sass/base/_typography.scss new file mode 100644 index 000000000..676a2c405 --- /dev/null +++ b/web/sass-files/sass/base/_typography.scss @@ -0,0 +1,27 @@ +@charset 'UTF-8'; + +b, +strong { + font-weight: 600; +} + +a { + cursor: pointer; + text-decoration: none; + word-break: break-word; + color: $color--primary; +} + +a:focus, +a:hover { + color: $color--primary--hover; +} + +body { + font-family: 'Open Sans', sans-serif; + -webkit-font-smoothing: antialiased; +} + +.word-break--all { + word-break: break-all; +} diff --git a/web/sass-files/sass/components/_alerts.scss b/web/sass-files/sass/components/_alerts.scss new file mode 100644 index 000000000..49ca3e8af --- /dev/null +++ b/web/sass-files/sass/components/_alerts.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +.alert { + padding: 8px 12px; + @include border-radius($border-rad); +} + +.alert--confirm { + display: inline-block; + float: left; + padding: 4px 10px; + margin: 1px 0 0 10px; +}
\ No newline at end of file diff --git a/web/sass-files/sass/components/_buttons.scss b/web/sass-files/sass/components/_buttons.scss new file mode 100644 index 000000000..bb8efbb14 --- /dev/null +++ b/web/sass-files/sass/components/_buttons.scss @@ -0,0 +1,23 @@ +@charset 'UTF-8'; + +.btn { + @include single-transition(all, .25s, ease-in); + @include border-radius($border-rad); + + &.btn-primary { + border-color: transparent; + background: $color--primary; + + &:hover, + &:focus, + &:active { + background: $color--primary--hover; + } + } + + &.btn-inactive { + border-color: transparent; + background: #707070; + color: #fff; + } +} diff --git a/web/sass-files/sass/components/_dropdown.scss b/web/sass-files/sass/components/_dropdown.scss new file mode 100644 index 000000000..f48e12c87 --- /dev/null +++ b/web/sass-files/sass/components/_dropdown.scss @@ -0,0 +1,16 @@ +@charset 'UTF-8'; + +.dropdown-menu { + .divider { + @include opacity(.15); + } + + > li > a { + color: inherit; + + &:focus, + &:hover { + color: inherit; + } + } +} diff --git a/web/sass-files/sass/components/_emoticons.scss b/web/sass-files/sass/components/_emoticons.scss new file mode 100644 index 000000000..661b25d94 --- /dev/null +++ b/web/sass-files/sass/components/_emoticons.scss @@ -0,0 +1,27 @@ +@charset 'UTF-8'; + +.emoticon { + width: 1.5em; + height: 1.5em; + display: inline-block; + margin-bottom: .25em; + background-size: contain; +} + +.emoticon-suggestion { + @include clearfix; + width: 100%; + height: 30px; + cursor: pointer; + font-size: 13px; + line-height: 30px; +} + +.emoticon-suggestion__image { + width: 20px; + height: 20px; + margin: 6px 6px 0 5px; + padding: 0; + text-align: center; + vertical-align: top; +} diff --git a/web/sass-files/sass/partials/_error-bar.scss b/web/sass-files/sass/components/_error-bar.scss index 0bfcbe0be..2b74a33ae 100644 --- a/web/sass-files/sass/partials/_error-bar.scss +++ b/web/sass-files/sass/components/_error-bar.scss @@ -1,8 +1,8 @@ -@charset "UTF-8"; +@charset 'UTF-8'; .error-bar { - background-color: #0099FF; - text-align:center; + background-color: #09f; + text-align: center; position: relative; color: #fff; position: absolute; @@ -10,18 +10,20 @@ width: 100%; z-index: 9999; padding: 5px 30px; + &__close { position: absolute; right: 0; top: 0; - color: #FFF; + color: #fff; font-size: 20px; font-weight: 600; text-decoration: none; padding: 0 10px; font-family: 'Open Sans', sans-serif; + &:hover { - color: #FFF; + color: #fff; text-decoration: none; } } diff --git a/web/sass-files/sass/components/_files.scss b/web/sass-files/sass/components/_files.scss new file mode 100644 index 000000000..17ffb206f --- /dev/null +++ b/web/sass-files/sass/components/_files.scss @@ -0,0 +1,293 @@ +@charset 'UTF-8'; + +.file-preview__container { + position: relative; + margin: 1px 0 10px; + width: 100%; + max-height: 100px; + height: 100px; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} + +.file-preview { + display: inline-block; + width: 120px; + height: 100px; + margin: 0 0 0 10px; + position: relative; + border: 1px solid #ddd; + @include clearfix; + + &:hover .file-preview__remove:after { + @include opacity(1); + } + + &:first-child { + margin-left: 0; + } + + .spinner { + position: absolute; + top: 50%; + left: 50%; + margin-left: -16px; + margin-top: -16px; + width: 32px; + height: 32px; + } +} + +.file-preview__image { + display: block; + height: auto; + max-width: 100%; +} + +.file-preview__remove { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + + &:after { + background: rgba(0, 0, 0, .4); + content: ''; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; + @include opacity(0); + } + + i { + top: 5px; + right: 5px; + position: absolute; + color: #fff; + cursor: pointer; + z-index: 5; + opacity: inherit; + text-shadow: 0 0px 3px #444; + text-shadow: 0 0px 3px rgba(0, 0, 0, .7); + } +} + +.image-comment { + background-position: left top; + background-repeat: no-repeat; + width: 300px; + height: 300px; +} + + +.file-icon { + width: 100%; + height: 100%; + + &.audio { + @include file-icon('../images/icons/audio.png'); + } + + &.video { + @include file-icon('../images/icons/video.png'); + } + + &.ppt { + @include file-icon('../images/icons/ppt.png'); + } + + &.generic { + @include file-icon('../images/icons/generic.png'); + } + + &.code { + @include file-icon('../images/icons/code.png'); + } + + &.excel { + @include file-icon('../images/icons/excel.png'); + } + + &.word { + @include file-icon('../images/icons/word.png'); + } + + &.pdf { + @include file-icon('../images/icons/pdf.png'); + } + + &.patch { + @include file-icon('../images/icons/patch.png'); + } + + &.image { + @include file-icon('../images/icons/image.png'); + } +} + +.post-image__column { + position: relative; + width: 240px; + height: 100px; + float: left; + margin: 5px 10px 5px 0; + border: 1px solid lightgrey; + + a { + text-decoration: none; + color: grey; + } +} + +.post-image__load { + height: 100%; + width: 100%; + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; +} + +.post-image { + width: 100%; + height: 100%; + background-color: #fff; + background-repeat: no-repeat; + overflow: hidden; + position: relative; + text-align: center; + + &.small { + background-position: center; + } + + &.normal { + background-position: top left; + } + + .spinner.file__loading { + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } + + .file__loaded { + max-width: initial; + &.landscape, + &.quadrat { + height: 100px; + } + &.portrait { + width: 120px; + } + } + + &:hover .file-playback__controls.stop { + @include opacity(1); + } +} + +.post-image__thumbnail { + float: left; + width: 50%; + height: 100%; + cursor: zoom-in; + cursor: -webkit-zoom-in; +} + +.post-image__details { + float: left; + @include clearfix; + word-break: break-word; + width: 50%; + height: 100%; + background: white; + border-left: 1px solid #ddd; + font-size: 13px; + padding: 7px; + color: #333; + + .post-image__name { + margin-bottom: 3px; + display: block; + } + + .post-image__download { + display: inline-block; + padding-right: 7px; + cursor: pointer; + @include opacity(.7); + } + + .post-image__type { + @include opacity(.6); + } + + .post-image__size { + margin-left: 4px; + @include opacity(.6); + } +} + +.file-details__container { + @include display-flex; + display: -ms-flexbox; + + .file-details { + width: 320px; + height: 270px; + padding: 14px; + text-align: left; + vertical-align: top; + + .file-details__name { + color: #333; + font-size: 16px; + } + + .file-details__info { + color: grey; + } + } + .file-details__preview { + width: 320px; + height: 270px; + border-right: 1px solid #ddd; + vertical-align: center; + + // helper to center the image icon in the preview window + .file-details__preview-helper { + height: 100%; + display: inline-block; + vertical-align: middle; + } + } +} + +.file-playback__controls { + position: absolute; + right: 5px; + bottom: 0; + font-size: 22px; + cursor: pointer; + z-index: 2; + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + transition: opacity .6s; + + &.stop { + @include opacity(0); + } +} + +.view-image__loading { + background: black; + min-height: 100px; +} diff --git a/web/sass-files/sass/components/_inputs.scss b/web/sass-files/sass/components/_inputs.scss new file mode 100644 index 000000000..5e3311182 --- /dev/null +++ b/web/sass-files/sass/components/_inputs.scss @@ -0,0 +1,26 @@ +@charset 'UTF-8'; + +.form-control { + @include border-radius($border-rad); + + &:focus { + @include box-shadow(none); + } + + &.no-padding { + line-height: 32px; + padding: 0; + } + + &.no-resize { + resize: none; + } +} + +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + cursor: auto; + background: rgba(#fff, .1); + color: inherit; +} diff --git a/web/sass-files/sass/components/_links.scss b/web/sass-files/sass/components/_links.scss new file mode 100644 index 000000000..f31008b4f --- /dev/null +++ b/web/sass-files/sass/components/_links.scss @@ -0,0 +1,23 @@ +@charset 'UTF-8'; + +a { + cursor: pointer; + text-decoration: none; + word-break: break-word; + color: $color--primary; +} + +a:focus, +a:hover { + color: $color--primary--hover; +} + +.text-danger, +a.text-danger { + color: #e05f5d; + + &:hover, + &:focus { + color: #e05f5d; + } +} diff --git a/web/sass-files/sass/components/_mentions.scss b/web/sass-files/sass/components/_mentions.scss new file mode 100644 index 000000000..98efc599d --- /dev/null +++ b/web/sass-files/sass/components/_mentions.scss @@ -0,0 +1,56 @@ +@charset 'UTF-8'; + +.mention { + color: #fff; + background: $color--primary; + position: relative; + z-index: 10; + padding-bottom: 2px; + @include border-radius(3px); +} + +.mentions__name { + position: relative; + width: 100%; + height: 36px; + padding: 2px; + z-index: 101; + line-height: 36px; + font-size: 13px; + cursor: pointer; + white-space: nowrap; + + .mention-align { + @include clearfix; + text-overflow: ellipsis; + width: calc(100% - 50px); + } +} + +.mention__image { + margin-right: 6px; + height: 32px; + width: 32px; + line-height: 36px; + display: block; + font-size: 20px; + text-align: center; + @include border-radius(32px); + + .mention--align { + max-width: 80%; + overflow: hidden; + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + } +} + +.mention__fullname { + color: grey; + padding-left: 10px; +} + +.mention--highlight { + background-color: #fff2bb; +} diff --git a/web/sass-files/sass/components/_modal.scss b/web/sass-files/sass/components/_modal.scss new file mode 100644 index 000000000..a8e8a99f7 --- /dev/null +++ b/web/sass-files/sass/components/_modal.scss @@ -0,0 +1,508 @@ +@charset 'UTF-8'; + +#channel_members_modal .modal-body { + min-height: 110px; +} + +.modal-body { + padding: 20px 15px; + overflow: auto; +} + +.more-table { + margin: 0; + table-layout: fixed; +} + +.modal { + width: 100%; + color: #333; + + body.browser--IE & { + .modal-dialog { + @include translateY(0); + } + } + + &.image_modal { + .modal-backdrop.in { + @include opacity(.7); + } + } + + .custom-textarea { + color: inherit; + border-color: #ccc; + + &:focus { + border-color: #ccc; + box-shadow: none; + } + } + + .btn { + font-size: 13px; + + &.btn-default { + border: none; + background: transparent; + } + } + + .info__label { + font-weight: 600; + text-align: right; + padding-right: 0; + } + + .team-member-list { + width: 100%; + } + + .remove__member { + float: right; + color: #999; + font-size: 20px; + line-height: 0; + padding: 6px; + + &:hover { + color: #e56565; + } + } + + .modal-dialog { + max-width: 95%; + margin-left: auto; + margin-right: auto; + } + + .modal-push-down { + margin-top: 5%; + } + + .modal-next-bar { + position: absolute; + top: 0px; + right: 0; + height: 100%; + } + + .modal-header { + border-radius: 0; + background: $color--primary; + color: #fff; + padding: 15px 15px 11px; + border: 1px solid #ddd; + min-height: 56px; + @include clearfix; + + .modal-title { + float: left; + font-size: 17px; + line-height: 27px; + color: #f4f4f4; + + .name { + font-weight: 600; + color: #fff; + } + } + + .modal-action { + padding: 0; + margin: 0; + } + + button.close { + color: #fff; + @include opacity(1); + z-index: 5; + width: 30px; + height: 30px; + line-height: 30px; + @include single-transition(all, .25s, ease-in); + position: absolute; + right: 10px; + + &:hover { + background: rgba(0, 0, 0, .1); + } + + span { + font-family: 'Open Sans', sans-serif; + line-height: 10px; + } + } + + .btn { + &.btn-primary { + float: right; + margin: -4px 25px 0 0; + position: relative; + + i { + margin-right: 5px; + } + } + } + } + + .no-channel-message { + text-align: center; + padding: 2em 1em; + + .primary-message { + font-size: 1.25em; + } + + .secondary-message { + @include opacity(.8); + margin: 1em 0 0; + } + } + + .modal-content { + border-radius: 0; + box-shadow: none; + } + + .modal-chevron-icon { + top: 50%; + font-size: 120%; + } + + .modal-prev-bar { + position: absolute; + top: 0px; + left: 0; + height: 100%; + } + + &#more_channels { + .modal-body { + padding: 0; + } + } + + .modal-image { + position: relative; + width: 100%; + height: 100%; + margin: 0 auto; + max-width: 100%; + + .modal-body { + @include clearfix; + height: 100%; + display: table; + table-layout: fixed; + width: 100%; + max-height: 100%; + } + + .image-wrapper { + position: relative; + max-width: 90%; + @include border-radius(3px); + display: table-cell; + vertical-align: middle; + text-align: center; + width: 100%; + + &:hover { + @include border-radius(3px 3px 0 0); + } + + &.default { + width: 100%; + height: 80%; + } + + audio, + canvas, + progress, + video { + max-width: 100%; + height: auto; + display: block; + } + + .modal-close { + background: url('../images/close.png') no-repeat; + @include background-size(100% 100%); + width: 37px; + height: 37px; + position: absolute; + right: -13px; + top: -13px; + @include opacity(0); + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + transition: opacity .6s; + cursor: pointer; + z-index: 9999; + + &.modal-close--show { + @include opacity(1); + } + } + + > div { + min-height: 100px; + min-width: 320px; + background: #fff; + display: inline-block; + position: relative; + + &:hover .file-playback__controls.stop { + @include opacity(1); + } + } + + img { + max-width: 100%; + max-height: 100%; + } + + .spinner.file__loading { + z-index: 2; + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } + } + + .modal-content { + box-shadow: none; + background: rgba(0, 0, 0, 0); + width: 100%; + height: 100%; + padding: 0; + border: none; + } + + .image-body { + vertical-align: middle; + display: table-cell; + text-align: center; + height: 100%; + padding: 0; + position: relative; + overflow: visible; + } + + .image-control { + width: 50px; + height: 45px; + float: left; + background: url(../images/prev.png) left no-repeat; + top: 50%; + position: relative; + margin-top: -23px; + &.image-next { + float: right; + background: url(../images/next.png) left no-repeat; + } + } + + .loader-image { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .loader-percent { + position: absolute; + top: 55px; + bottom: 0; + left: 0; + right: 0; + margin: auto; + color: grey; + height: 20px; + } + + .modal-button-bar { + position: absolute; + bottom: -40px; + left: 0px; + right: 0px; + background-color: #222; + @include border-radius(0 0 3px 3px); + @include opacity(0); + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + transition: opacity .6s; + line-height: 40px; + padding: 0 10px; + + &.footer--show { + @include opacity(1); + } + + .image-links { + a, + span { + float: right; + } + } + + .text { + vertical-align: middle; + bottom: 0; + color: white; + margin-left: 5px; + } + + .public-link { + margin-right: 5px; + } + } + } +} + + +// Invite New Member +.invite { + margin-right: 40px; +} + +.row--invite { + margin-right: 40px; + @include clearfix; + + .col-sm-6 { + padding: 0 0 0 15px; + &:first-child { + padding-left: 0; + } + } +} + +.more-modal { + .user-list { + overflow-y: auto; + overflow-x: hidden; + margin-top: 10px; + position: relative; + } + + .modal-body { + padding: 10px 0 20px; + overflow-x: hidden; + } + + .filter-row { + margin: 10px 0; + @include clearfix; + } + + .member-count { + margin-top: 5px; + float: right; + @include opacity(.8); + } + + .more-purpose { + @include opacity(.7); + } +} + +.modal-body.edit-modal-body { + overflow: visible; + + .suggestion-list__content { + max-height: 150px; + } +} + +.more-modal__list { + overflow: auto; + display: flex; + flex-direction: column; + + .popover & { + font-size: 0.95em; + + .more-modal__row { + padding: 5px 10px; + } + + .more-modal__name { + font-weight: normal; + } + } + + .more-modal__image { + flex-grow: 0; + flex-shrink: 0; + @include border-radius(60px); + margin-right: 8px; + } + + .more-modal__details { + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; + } + + .more-modal__actions { + flex-grow: 0; + flex-shrink: 0; + padding-left: 20px; + } + + .more-modal__name { + font-weight: 600; + font-size: .95em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .more-modal__description { + @include opacity(.7); + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .more-modal__row { + display: flex; + padding: 8px 15px; + border-bottom: 1px solid; + } + + p { + font-size: .9em; + overflow: hidden; + text-overflow: ellipsis; + @include opacity(.8); + margin: 5px 0; + } +} + +.filtered-user-list { + display: flex; + flex-direction: column; + + .filter-row { + flex-grow: 0; + flex-shrink: 0; + } + + .user-list { + flex-grow: 1; + flex-shrink: 1; + } +} diff --git a/web/sass-files/sass/components/_module.scss b/web/sass-files/sass/components/_module.scss new file mode 100644 index 000000000..24488df96 --- /dev/null +++ b/web/sass-files/sass/components/_module.scss @@ -0,0 +1,19 @@ +// Only for combining all the files in this folder +@import 'alerts'; +@import 'buttons'; +@import 'dropdown'; +@import 'emoticons'; +@import 'error-bar'; +@import 'files'; +@import 'inputs'; +@import 'links'; +@import 'mentions'; +@import 'modal'; +@import 'oauth'; +@import 'popover'; +@import 'scrollbar'; +@import 'search'; +@import 'suggestion-list'; +@import 'tooltip'; +@import 'tutorial'; +@import 'videos'; diff --git a/web/sass-files/sass/components/_oauth.scss b/web/sass-files/sass/components/_oauth.scss new file mode 100644 index 000000000..cd8382a5c --- /dev/null +++ b/web/sass-files/sass/components/_oauth.scss @@ -0,0 +1,38 @@ +@charset 'UTF-8'; + +.prompt { + background: #fff; + border: 1px solid #ddd; + padding: 1em 2em 0; + margin: 50px auto; + max-width: 90%; + width: 600px; + + .prompt__heading { + font-size: em(20px); + line-height: normal; + margin: 1em 0; + display: table; + width: 100%; + + > div { + display: table-cell; + vertical-align: top; + } + + img { + margin-right: 15px; + } + } + + .prompt__allow { + margin: 1em 0; + font-size: em(24px); + } + + .prompt__buttons { + text-align: right; + border-top: 1px solid #ddd; + padding: 1.5em 0; + } +} diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/components/_popover.scss index bf762d2c9..588a71946 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/components/_popover.scss @@ -1,13 +1,38 @@ -@charset "UTF-8"; +@charset 'UTF-8'; + +.popover { + @include border-radius($border-rad); + color: #333; + + &.bottom, + &.right, + &.top, + &.left { + > .arrow:after { + border-color: transparent; + } + } + + .popover-title { + background: rgba(black, .05); + padding: 8px 10px; + } + + .popover-content { + p:last-child { + margin-bottom: 5px; + } + } +} .channel-header__info .popover-content { - max-height: 250px; - overflow: auto; + max-height: 250px; + overflow: auto; } .user-popover { - cursor: pointer; - display: inline-block; + cursor: pointer; + display: inline-block; } .code-popover .popover-content { @@ -15,15 +40,15 @@ } .user-popover__image { - margin: 0 0 10px; - @include border-radius(128px); + margin: 0 0 10px; + @include border-radius(128px); } .user-popover__email { - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - display: block; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + display: block; } .search-help-popover { @@ -31,7 +56,7 @@ max-width: none; width: 100%; top: 36px; - @include single-transition(opacity, 0.3s, ease-in); + @include single-transition(opacity, .3s, ease-in); font-size: em(13px); &.autocomplete { @@ -57,14 +82,14 @@ position: relative; } &:before { - content: ""; + content: ''; position: absolute; width: 100%; height: 1px; background: #ddd; top: 10px; left: 0; - @include opacity(0.2); + @include opacity(.2); } } @@ -78,16 +103,16 @@ text-overflow: ellipsis; &:hover { - background: rgba(black, 0.1); + background: rgba(black, .1); } &.selected { - background: rgba(black, 0.2); + background: rgba(black, .2); } .fa { margin-right: 5px; - @include opacity(0.5); + @include opacity(.5); } .profile-img { @@ -117,9 +142,10 @@ ul { padding-left: 17px; span { - @include opacity(0.8); + @include opacity(.8); } - strong, b { + strong, + b { @include opacity(1); } } @@ -148,7 +174,7 @@ line-height: 26px; font-size: 13px; } - .more-name { + .more__name { margin-left: 6px; max-width: 140px; overflow: hidden; diff --git a/web/sass-files/sass/components/_scrollbar.scss b/web/sass-files/sass/components/_scrollbar.scss new file mode 100644 index 000000000..4ecb38b1f --- /dev/null +++ b/web/sass-files/sass/components/_scrollbar.scss @@ -0,0 +1,28 @@ +@charset 'UTF-8'; + +::-webkit-scrollbar +{ + width: 8px; /* for vertical scrollbars */ + height: 8px; /* for horizontal scrollbars */ +} + +::-webkit-scrollbar-track +{ + background: rgba(0, 0, 0, 0.1); +} + +::-webkit-scrollbar-thumb +{ + @include border-radius($border-rad * 2); + background: rgba(0, 0, 0, 0.4); +} + +body{ + scrollbar-face-color: rgba(0, 0, 0, 0.1); + scrollbar-shadow-color: #2D2C4D; + scrollbar-highlight-color:#7D7E94; + scrollbar-3dlight-color: #7D7E94; + scrollbar-darkshadow-color: #2D2C4D; + scrollbar-track-color: rgba(0, 0, 0, 0.1); + scrollbar-arrow-color: #C1C1D1; +}
\ No newline at end of file diff --git a/web/sass-files/sass/components/_search.scss b/web/sass-files/sass/components/_search.scss new file mode 100644 index 000000000..faf0b8177 --- /dev/null +++ b/web/sass-files/sass/components/_search.scss @@ -0,0 +1,175 @@ +@charset 'UTF-8'; + +#channel-header .search-bar__container { + padding: 0 9px 0 3px; +} + +.search-bar__container { + padding: 12px 8px 0 0; + @include flex(0 0 56px); + + .sidebar--right.move--left & { + padding-right: 42px; + } +} + +.glyphicon-refresh-animate { + @include animation(spin .7s infinite linear); +} + +.search__clear { + display: none; + position: absolute; + right: 0; + line-height: 45px; + margin-right: 13px; + @include single-transition(all, .2s, linear); + @include translateX(60px); + z-index: 5; + cursor: pointer; +} + +.search-item-snippet { + @include clearfix; + text-overflow: ellipsis; +} + +.sidebar__collapse { + cursor: pointer; + z-index: 5; + fill: #fff; + position: absolute; + left: 0; + font-size: 35px; + width: 49px; + @include single-transition(all, .2s, linear); + @include translateX(0px); + text-align: center; + padding-left: 1px; + line-height: 40px; + display: none; +} + +.search-item-snippet { + ul, + ol { + padding-left: 20px; + } +} + +.sidebar__search-icon { + position: absolute; + top: 15px; + margin-left: 10px; + font-size: 14px; + @include opacity(.5); + display: none; + color: #777; +} + +.search__form { + position: relative; + + .search-bar__container & { + margin: 0; + border: 1px solid #ddd; + @include border-radius(2px); + width: 300px; + } + + .sidebar--right & { + width: 100%; + } + + .search-bar { + height: 40px; + padding-right: 30px; + box-shadow: none; + + .search-bar__container & { + height: 30px; + border: none; + } + } + + .glyphicon-refresh-animate { + top: 27px; + position: absolute; + right: 27px; + color: #999; + + .search-bar__container & { + right: 7px; + top: 8px; + } + } +} + +.search-items-container { + position: relative; + overflow: auto; + -webkit-overflow-scrolling: touch; + @include flex(1 1 auto); + height: calc(100% - 56px); + padding-top: 10px; +} + +.search-results-header { + font-size: 1em; + text-transform: uppercase; + color: #999; + font-weight: 400; + color: #888; + height: 44px; + line-height: 44px; + padding: 0 10px 0 10px; + border-bottom: $border-gray; +} + +.search-item__container { + .post { + padding: 0 1em 1em; + margin: 0; + + &:first-child { + border: none; + } + + .search-channel__name { + font-weight: 600; + margin: 0 0 10px 0; + } + } +} + +.search-item__jump { + position: absolute; + right: 0; + top: 0px; + font-size: 13px; + @include opacity(.8); + + &:hover { + @include opacity(1); + } +} + +.search-item__comment { + position: absolute; + right: 0; + margin-right: 35px; + top: 0; +} + +.search-item-time { + @include opacity(.7); + font-size: .9em; +} + +.search-results-none { + padding: 10px; +} + +.search-highlight { + background-color: #fff2bb; +} diff --git a/web/sass-files/sass/components/_suggestion-list.scss b/web/sass-files/sass/components/_suggestion-list.scss new file mode 100644 index 000000000..125a3cf32 --- /dev/null +++ b/web/sass-files/sass/components/_suggestion-list.scss @@ -0,0 +1,41 @@ +@charset 'UTF-8'; + +.suggestion-list { + width: 100%; + z-index: 100; + @extend %popover-box-shadow; +} + +.suggestion-list--top { + position: absolute; +} + +.suggestion-list__content { + width: 100%; + max-height: 292px; + background-color: #fff; + border: $border-gray; + overflow-x: hidden; + overflow-y: scroll; + + .command { + position: relative; + width: 100%; + line-height: 24px; + padding: 5px 10px 8px; + z-index: 101; + font-size: .95em; + border-bottom: 1px solid #ddd; + + .command__desc { + margin-left: 5px; + @include opacity(.5); + line-height: normal; + } + } +} + +.suggestion-list__content--top { + position: absolute; + bottom: 0; +} diff --git a/web/sass-files/sass/components/_tooltip.scss b/web/sass-files/sass/components/_tooltip.scss new file mode 100644 index 000000000..44c10edb9 --- /dev/null +++ b/web/sass-files/sass/components/_tooltip.scss @@ -0,0 +1,10 @@ +@charset 'UTF-8'; + +.tooltip { + .tooltip-inner { + word-break: break-word; + font-size: 13px; + padding: 3px 10px 4px; + font-weight: 500; + } +} diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/components/_tutorial.scss index b21a2b7c3..f15919009 100644 --- a/web/sass-files/sass/partials/_tutorial.scss +++ b/web/sass-files/sass/components/_tutorial.scss @@ -1,7 +1,7 @@ -@charset "UTF-8"; +@charset 'UTF-8'; .tip-backdrop { - background: rgba(black, 0.5); + background: rgba(black, .5); position: absolute; top: 0; left: 0; @@ -13,7 +13,7 @@ .tip-overlay { width: 350px; max-width: 90%; - position:absolute; + position: absolute; background-color: #fff; @include border-radius(3px); padding: 20px; @@ -83,31 +83,30 @@ strong { font-weight: 600; } - } .btn { - background: #cccccc; + background: #ccc; color: #fff; @include border-radius(3px); border: none; margin: 10px 0; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { color: #fff; border: none; background: #bbb; } - } .tip-opt { font-size: 12px; span { - @include opacity(0.9); + @include opacity(.9); } - } .tutorial__circles { @@ -118,9 +117,7 @@ height: 7px; margin: 0 4px; } - } - } .tip-button { @@ -132,24 +129,23 @@ } .tip-div { - position:absolute; - top:0px; - right:0px; + position: absolute; + top: 0px; + right: 0px; &.tip-overlay--header { top: 21px; right: 2px; .tip-button { - @include opacity(0.8); + @include opacity(.8); } } &.tip-overlay--sidebar { left: 0; - @include opacity(0.8); + @include opacity(.8); top: -9px; } - } .tutorial-steps__container { @@ -200,12 +196,12 @@ width: 9px; height: 9px; @include border-radius(9px); - @include opacity(0.2); + @include opacity(.2); background: #000; display: inline-block; margin: 0 5px; &.active { - background: $primary-color; + background: $color--primary; @include opacity(1); } } diff --git a/web/sass-files/sass/components/_videos.scss b/web/sass-files/sass/components/_videos.scss new file mode 100644 index 000000000..91db750bd --- /dev/null +++ b/web/sass-files/sass/components/_videos.scss @@ -0,0 +1,66 @@ +@charset 'UTF-8'; + +.video-div { + position: relative; + max-width: 480px; + margin-bottom: 8px; + .video-thumbnail { + max-width: 100%; + height: auto; + } + .block { + background-color: rgba(0,0,0,.5); + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + margin-top: -100px; + width: 200px; + margin: -75px 0 0 -100px; + height: 150px; + } +} + +.video-type { + @include opacity(.8); + font-size: 15px; + margin: 0px; + padding: 0px; +} + +.video-title { + font-size: 15px; + margin-top: 3px; +} +.play-button { + width: 100px; + height: 100px; + position: absolute; + top: 26px; + right: 51px; + border: 4px solid; + border-color: rgba(255,255,255,.4); + border-radius: 14px; +} +.play-button span { + position: absolute; + top: 10px; + left: 20px; + width: 0; + height: 0; + border-top: 36px solid transparent; + border-bottom: 36px solid transparent; + border-left: 60px solid rgba(255,255,255,.4); +} + +.img-div { + -moz-force-broken-image-icon: 1; + position: relative; + max-width: 450px; + max-height: 500px; + margin-bottom: 8px; + border-radius: 5px; + &.placeholder { + height: 500px; + } +} diff --git a/web/sass-files/sass/layout/_content.scss b/web/sass-files/sass/layout/_content.scss new file mode 100644 index 000000000..71bef0d7f --- /dev/null +++ b/web/sass-files/sass/layout/_content.scss @@ -0,0 +1,85 @@ +@charset 'UTF-8'; + +.inner-wrap { + &.move--left { + .search-bar__container { + display: none; + } + } + + &.move--right { + .search-bar__container { + display: none; + } + } +} + +.app__content { + height: 100%; + padding-top: 50px; + margin-left: 220px; + position: relative; + background: #fff; + @include display-flex; + @include flex-direction(column); + + .channel__wrap & { + padding-top: 0; + } +} +#post-create { + @include flex(0 0 auto); + background: #fff; + width: 100%; + z-index: 3; +} + +#archive-link-home { + @include flex(0 0 auto); + cursor: pointer; + padding: 10px 20px; + font-size: 13px; + + .fa { + font-size: 11px; + @include opacity(.7); + } + + a { + color: inherit; + } +} + +.post-list { + .new-messages-hr { + margin-top: 5px; + margin-bottom: 0px; + border: 0; + border-top: 1px solid #f80; + } + + .new-messages-text { + margin-top: 2px; + margin-bottom: 5px; + color: #f80; + text-align: center; + } +} + +.new-messages-hr { + margin-top: 5px; + margin-bottom: 0px; + border: 0; + border-top: 1px solid #f80; +} + +.new-messages-text { + margin-top: 2px; + margin-bottom: 5px; + color: #f80; + text-align: center; +} + +.delete-message-text { + margin-top: 10px; +} diff --git a/web/sass-files/sass/partials/_footer.scss b/web/sass-files/sass/layout/_footer.scss index deed14d67..5624e6376 100644 --- a/web/sass-files/sass/partials/_footer.scss +++ b/web/sass-files/sass/layout/_footer.scss @@ -1,25 +1,30 @@ -@charset "UTF-8"; +@charset 'UTF-8'; .footer-pane { - background: #eee; + background: #eee; padding-bottom: 1em; + .footer-link { padding: 0 1.5em; + &.copyright { color: #999; padding-right: 0; } } + .footer-site-name { padding: 1.5em 0 1em; - font-size:14px; - font-weight:bold; - text-transform:uppercase; + font-size: 14px; + font-weight: bold; + text-transform: uppercase; } } -.footer, .footer-pane, .footer-push { - height: 89px; +.footer, +.footer-pane, +.footer-push { + height: 89px; } diff --git a/web/sass-files/sass/layout/_forms.scss b/web/sass-files/sass/layout/_forms.scss new file mode 100644 index 000000000..1f51603cc --- /dev/null +++ b/web/sass-files/sass/layout/_forms.scss @@ -0,0 +1,66 @@ +@charset 'UTF-8'; + +.form-horizontal { + .modal-intro { + margin: -10px 0 30px; + } + + .form__label { + text-align: left; + padding-right: 3px; + font-weight: 600; + font-size: 1.1em; + + &.light { + font-weight: normal; + color: #999; + font-size: 1.05em; + font-style: italic; + padding-top: 2px; + } + } + + .input__help { + color: inherit; + margin: 10px 0 0 10px; + word-break: break-word; + @include opacity(.8); + + &.dark { + @include opacity(1); + } + + &.error { + color: #a94442; + } + } + + .form-control { + font-weight: normal; + } + + .form-group { + margin-bottom: 25px; + + &.less { + margin-bottom: 10px; + } + } +} + +.help-block { + font-size: .95em; + margin: 10px 0 0; + color: #999; +} + +.disabled-input { + background-color: #ddd !important; +} + +.form-group { + &.form-group--small { + margin-bottom: 10px; + } +} + diff --git a/web/sass-files/sass/layout/_headers.scss b/web/sass-files/sass/layout/_headers.scss new file mode 100644 index 000000000..0a6b9f920 --- /dev/null +++ b/web/sass-files/sass/layout/_headers.scss @@ -0,0 +1,370 @@ +@charset 'UTF-8'; + +#channel-header { + @include flex(0 0 56px); +} + +.row { + &.header { + position: relative; + + .channel__wrap & { + display: none; + } + } +} + +.header-dropdown__icon { + font-size: 11px; + color: inherit; + top: 3px; +} + +.channel-header__info { + display: table; + table-layout: fixed; + width: 100%; + + > div { + display: block; + white-space: nowrap; + word-break: break-word; + + &.dropdown { + max-width: 100%; + padding-right: 1em; + float: left; + + .header-dropdown__icon { + color: #777; + } + + a { + text-decoration: none; + } + + .modal { + white-space: normal; + } + } + + &.description { + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; + max-height: 45px; + .markdown-inline-img { + max-height: 45px; + } + } + + &.popover { + white-space: normal; + } + } +} + +.channel-intro { + margin: 0 auto 35px; + padding: 0 1em 5px; + max-width: 1000px; + border-bottom: 1px solid lightgrey; + + .intro-links { + margin: 0 1.5em 10px 0; + display: inline-block; + + .fa { + margin-right: 5px; + } + } + + .channel-intro-profile { + margin-top: 5px; + margin-left: 63px; + } + + .channel-intro-img { + float: left; + img { + @include border-radius(100px); + } + } + + .channel-intro__title { + font-weight: 600; + font-size: 20px; + margin-bottom: 15px; + } + + .channel-intro__content { + background: #f7f7f7; + padding: 10px 15px; + @include border-radius(3px); + } + .channel-intro-text { + margin-top: 35px; + } +} + +// Team Header in Sidebar +.sidebar--left, +.sidebar--menu { + .team__header { + position: relative; + padding: 9px 10px; + @include legacy-pie-clearfix; + + &:before { + @include single-transition(all, .05s, linear); + content: ''; + background: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + } + + &:hover { + &:before { + background: rgba(black, .1); + } + + .user__name { + color: #fff; + } + + .navbar-right { + .dropdown-toggle { + @include opacity(1); + } + } + } + + .navbar-right { + font-size: .85em; + position: absolute; + top: 10px; + right: 22px; + z-index: 5; + + .dropdown-toggle { + @include single-transition(all, .1s, linear); + padding: 10px; + @include opacity(.8); + } + + .dropdown-menu { + li a { + padding: 3px 20px; + text-overflow: ellipsis; + overflow: hidden; + } + } + + .dropdown__icon { + fill: #fff; + } + } + + .settings__link a:hover, + a:visited, + a:link, + a:active { + text-decoration: none; + } + + .user__picture { + width: 36px; + height: 36px; + float: left; + @include border-radius(36px); + margin-right: 6px; + } + + .header__info { + color: #fff; + @include clearfix; + padding-left: 2px; + z-index: 1; + position: relative; + } + + .team__name, + .user__name { + display: block; + font-weight: 600; + font-size: 16px; + max-width: 85%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-decoration: none; + } + + .team__name { + line-height: 22px; + margin-top: -2px; + float: left; + } + + .user__name { + @include single-transition(all, .1s, linear); + font-size: 14px; + line-height: 18px; + font-weight: 400; + color: #eee; + color: rgba(#fff, .8); + } + + > .nav { + > li { + > a { + float: right; + background: none !important; + padding: 2px; + + &.dropdown-toggle { + line-height: 1.8; + font-size: 1em; + color: #fff; + } + } + } + } + } + .search__clear { + display: none; + } +} + +#navbar { + .navbar-default { + .navbar-toggle { + &.menu-toggle { + padding: 0 1em; + } + } + } +} + +.channel-header { + width: 100%; + border-left: none; + font-size: 14px; + line-height: 56px; + + #member_popover { + width: 50px; + color: #999; + cursor: pointer; + + .fa { + margin-left: 4px; + font-size: 16px; + } + } + + &.alt { + margin: 0; + th { + font-weight: normal !important; + } + td { + border: none; + } + } + + th { + text-align: center; + &:first-child { + text-align: left !important; + border-left: none; + width: 100%; + padding-left: 1em; + } + &:last-child { + width: 8.9%; + } + } + + td { + padding: 5px 25px 5px !important; + font-size: 13px; + text-align: center !important; + &:first-child { + text-align: left !important; + } + } + + .heading { + margin: 0; + color: #555; + font-size: 1.3em; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + display: inline-block; + vertical-align: middle; + margin-right: 4px; + } + + .caret { + margin-top: 3px; + } + + .more { + color: #81848b; + display: inline-block; + vertical-align: top; + text-transform: capitalize; + font-size: 13px; + } + + .disabled { + color: #999; + } +} + +.channel-header__navbar { + font-size: 16px; + + .heading { + margin-right: 3px; + } + + .header-dropdown__icon { + top: 1px; + } +} + +.channel-header__links { + font-family: 'Open Sans', sans-serif; + height: 30px; + width: 24px; + line-height: 26px; + margin-right: 9px; + font-size: 22px; + + .channel__wrap.move--left & { + position: absolute; + right: -400px; + top: 14px; + } + + > a { + color: inherit; + text-decoration: none; + @include opacity(.6); + @include single-transition(all, .1s, ease-in); + + &:hover { + @include opacity(1); + } + &:focus { + color: inherit; + } + } +} diff --git a/web/sass-files/sass/layout/_markdown.scss b/web/sass-files/sass/layout/_markdown.scss new file mode 100644 index 000000000..307060ac3 --- /dev/null +++ b/web/sass-files/sass/layout/_markdown.scss @@ -0,0 +1,116 @@ +@charset 'UTF-8'; + +.markdown__heading { + font-weight: 700; + line-height: 1.5; +} + +.markdown__paragraph-inline { + display: inline; + + + .markdown__paragraph-inline { + margin-left: 4px; + } +} + +#post-list { + .markdown-inline-img { + -moz-force-broken-image-icon: 1; + max-height: 500px; + height: 500px; + } +} + +.post-body--code { + position: relative; + + pre { + margin-bottom: 0; + word-break: normal; + overflow: auto; + word-wrap: normal; + } +} + +.post-body--code__language { + -webkit-transform: translate3d(0,0,0); + position: absolute; + top: 0; + right: 0; + color: #fff; + background: #21586d; + padding: 4px 10px 5px 10px; + font-size: 13px; + opacity: .7; + z-index: 5; +} + +.post__body { + hr { + height: 4px; + padding: 0; + margin: 15px 0 16px; + background-color: #e7e7e7; + border: 0 none; + @include opacity(.2); + } + + code { + white-space: pre; + } + + .codespan__pre-wrap { + code { + white-space: pre-wrap; + } + } +} + +.markdown__table { + background: #fff; + margin: 5px 0 10px; + + th, + td { + padding: 6px 13px; + border: 1px solid #ddd; + } + + tbody tr { + background: #fff; + + &:nth-child(2n) { + background-color: #f8f8f8; + } + } +} +blockquote { + border: none; + position: relative; + font-size: 16px; + padding: 10px 10px 10px 38px; + margin-bottom: 0; + + &:before { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; + text-decoration: inherit; + content: '\f10d'; + left: 8px; + top: 5px; + position: absolute; + font-size: 20px; + @include opacity(.6); + } +} +pre { + border: none; + margin: 5px 0; + color: inherit; +} +code { + background: #fff; + color: inherit; +} diff --git a/web/sass-files/sass/layout/_module.scss b/web/sass-files/sass/layout/_module.scss new file mode 100644 index 000000000..39ab2c6f8 --- /dev/null +++ b/web/sass-files/sass/layout/_module.scss @@ -0,0 +1,13 @@ +// Only for combining all the files in this folder +@import 'content'; +@import 'footer'; +@import 'forms'; +@import 'headers'; +@import 'markdown'; +@import 'navigation'; +@import 'post'; +@import 'post-right'; +@import 'sidebar-left'; +@import 'sidebar-menu'; +@import 'sidebar-right'; +@import 'webhooks'; diff --git a/web/sass-files/sass/layout/_navigation.scss b/web/sass-files/sass/layout/_navigation.scss new file mode 100644 index 000000000..65c62cb17 --- /dev/null +++ b/web/sass-files/sass/layout/_navigation.scss @@ -0,0 +1,137 @@ +@charset 'UTF-8'; + +.nav > li > a:focus, +.nav > li > a:hover { + background: transparent; +} + +#navbar { + input { + margin: 0px 5px 0px 2px; + } + + .navbar-default { + position: absolute; + border: none; + min-height: 45px; + background: $color--primary; + + .navbar-nav { + > li { + > a { + height: 45px; + padding: 0 1.3em; + + i { + line-height: 45px; + } + } + } + } + + .navbar-toggle { + width: 43px; + float: left; + border-color: transparent; + border-radius: 0; + margin: 0; + padding: 0 10px; + line-height: 48px; + height: 44px; + z-index: 5; + fill: #fff; + + .icon-bar { + background: #fff; + width: 21px; + } + + .glyphicon-search { + top: -1px; + } + + .icon--white { + color: #fff; + } + + &:hover, + &:active, + &:focus { + background: inherit; + } + } + + .navbar-brand { + padding: 0 .5em; + height: 45px; + line-height: 45px; + float: none; + font-size: 16px; + + .heading { + margin-right: 3px; + font-weight: 600; + color: #fff; + } + + .header-dropdown__icon { + top: 1px; + } + + .dropdown-toggle { + color: #fff; + } + + .description { + display: inline-block; + margin-right: .5em; + color: #fff; + + &.info-popover { + width: 19px; + height: 19px; + background: url('../images/info__icon.png'); + @include background-size(100% 100%); + vertical-align: middle; + top: -1px; + position: relative; + cursor: pointer; + } + } + } + } + + .sidebar-channel { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + span { + white-space: nowrap; + margin-left: 2px; + } + } + + .channel-create-btn { + margin-right: 15px; + } + + .more-channel-table { + width: 100%; + border: 1px solid #dbdbdc; + td { + padding: 7px; + } + button { + width: 110px; + } + } +} + +.badge-notify { + background: red; + position: absolute; + left: 4px; + top: 3px; + z-index: 100; +} diff --git a/web/sass-files/sass/layout/_post-right.scss b/web/sass-files/sass/layout/_post-right.scss new file mode 100644 index 000000000..595577564 --- /dev/null +++ b/web/sass-files/sass/layout/_post-right.scss @@ -0,0 +1,155 @@ +@charset 'UTF-8'; + +.post-right__container { + @include display-flex; + @include flex-direction(column); + height: 100%; + + .post-right-root-message { + padding: 1em 1em 0; + } + + .post-right-comments-container { + position: relative; + + .post { + &:first-child { + padding-top: 15px; + } + } + } + + + .help_format_text { + bottom: -63px; + right: auto; + } + + .post { + &.post--root { + padding-bottom: 1.2em; + border-bottom: 1px solid #ddd; + + .post__body { + background: transparent !important; + } + } + + .post__header { + .col__reply { + top: 0; + text-align: right; + } + } + + .post__body { + width: 100%; + } + } + + hr { + margin-bottom: 0; + border: none; + } + + .post-create__container { + width: 100%; + margin-top: 10px; + + .textarea-wrapper { + min-height: 100px; + } + + .btn { + margin-bottom: 10px; + } + + .custom-textarea { + min-height: 100px; + } + + .msg-typing { + @include opacity(.7); + float: left; + margin-top: 3px; + font-size: 13px; + line-height: 20px; + min-width: 1px; + display: block; + height: 20px; + max-width: 230px; + } + + .post-create-footer { + width: 100%; + padding: 5px 0 10px; + } + + .post-right-comments-upload-in-progress { + padding: 6px 0; + color: #a8adb7; + margin-right: 10px; + } + } +} +.post-right-header { + font-size: 1em; + text-transform: uppercase; + color: #999; + font-weight: 400; + color: #888; + height: 39px; + padding: 10px 10px 0 15px; + border-bottom: $border-gray; +} + +.post-right-root-container { + padding: 5px 10px; + border-bottom: $border-gray; +} + +.post-right-root-container { + ul { + padding-left: 0; + margin-bottom: 2px; + } +} + +.post-right-channel__name { + font-weight: 600; + margin: 0 0 10px 0; +} + +.post-right-root-container li { + display: inline; + list-style-type: none; + padding-right: 3px; +} + +.post-right-root-time { + color: #a8adb7; +} + +.post-right-create-comment-container { + padding: 5px; + margin-bottom: 18px; + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} + +.post-right__scroll { + position: relative; + overflow: auto; + -webkit-overflow-scrolling: touch; + @include flex(1 1 auto); + + .file-preview__container { + margin-top: 5px; + } +} + +.post-right-comment-time { + color: #a8adb7; +} diff --git a/web/sass-files/sass/layout/_post.scss b/web/sass-files/sass/layout/_post.scss new file mode 100644 index 000000000..22c905aa6 --- /dev/null +++ b/web/sass-files/sass/layout/_post.scss @@ -0,0 +1,997 @@ +@charset 'UTF-8'; + +.custom-textarea { + white-space: pre-wrap; + word-wrap: break-word; + background: transparent; + border: 1px solid #ccc; + position: absolute; + top: 0px; + height: auto; + resize: none; + line-height: 20px; + min-height: 36px; + overflow-x: hidden; + &:focus { + border-color: #ccc; + box-shadow: none; + } +} + +.bad-connection { + background: #ffffac !important; + color: #d04444 !important; +} + +.textarea-div { + white-space: pre-wrap; + word-wrap: normal; + color: rgba(0,0,0,0); + position: absolute; + top: 0px; + word-break: break-word; + left: 1px; + line-height: 20px; + min-height: 36px; + height: auto; + border: 0; +} + +body.ios { + .textarea-div { + padding: 7px 17px 7px 15px; + -webkit-overflow-scrolling: auto; + } +} + +.textarea-div::-webkit-scrollbar { + display: none; +} + +.textarea-wrapper { + position: relative; + .textbox-preview-area { + position: absolute; + z-index: 2; + top: 0; + left: 0; + box-shadow: none; + white-space: normal; + } + .help__text { + right: 0; + position: absolute; + z-index: 3; + bottom: -23px; + font-size: 13px; + cursor: pointer; + } + .textbox-preview-link { + margin-right: 8px; + } + min-height: 36px; +} + +.help_format_text { + display: none !important; + position: absolute; + bottom: -23px; + left: 0px; + overflow: hidden; + text-overflow: ellipsis; + font-size: .85em; + @include opacity(0); + @include single-transition(all .2s ease); + + b, + i, + code { + margin-right: 3px; + } + .textbox-preview-link { + font-size: 13px; + cursor: pointer; + margin-left: 15px; + } +} + +.date-separator, +.new-separator { + text-align: center; + height: 2em; + margin: 0; + position: relative; + z-index: 0; + &:before, + &:after { + content: ''; + height: 1em; + position: absolute; + left: 0; + width: 100%; + display: none; + } + &:before { + bottom: 0; + } + &:after { + top: 0; + } + &.hovered--after { + &:before { + background: #f5f5f5; + display: block; + } + } + &.hovered--before { + &:after { + background: #f5f5f5; + display: block; + } + } + .separator__hr { + border-color: #ccc; + margin: 0; + position: relative; + z-index: 5; + top: 1em; + } + .separator__text { + line-height: 2em; + color: #555; + background: #fff; + display: inline-block; + padding: 0 1em; + font-weight: 700; + @include border-radius(50px); + position: relative; + z-index: 5; + font-size: 13px; + } +} +.new-separator { + .separator__hr { + border-color: #ffaf53; + } + .separator__text { + color: #f80; + font-weight: normal; + } +} + +.file-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: #fff; + font-size: em(20px); + font-weight: 600; + z-index: 6; + + .overlay__indent { + background-color: rgba(0, 0, 0, .6); + position: relative; + height: 100%; + @include clearfix; + } + + &.center-file-overlay { + .overlay__indent { + margin-left: 220px; + } + } + + &.right-file-overlay { + font-size: em(18px); + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } + } + + .overlay__circle { + background: #111; + background: rgba(black, .7); + width: 370px; + height: 370px; + margin: -185px 0 0 -185px; + @include border-radius(500px); + position: absolute; + top: 50%; + left: 50%; + pointer-events: none; + } + + .overlay__files { + display: block; + margin: 75px auto 20px; + } + + .overlay__logo { + position: absolute; + left: 50%; + bottom: 30px; + margin-left: -50px; + @include opacity(.3); + } + + .fa { + display: inline-block; + font-size: 1.1em; + margin-right: 8px; + } +} + +#post-list { + @include flex(1 1 auto); + position: relative; + overflow-y: hidden; + height: 100%; + + .inactive { + display: none; + } + + .post-list-holder-by-time { + background: #fff; + overflow-y: scroll; + width: 100%; + padding: 1em 0 0; + position: absolute; + height: 100%; + -webkit-overflow-scrolling: touch; + &.active { + display: inline; + } + } + + .more-messages-text { + margin: 5px 0 10px; + display: block; + text-align: center; + outline: none; + border: none; + font-size: 13px; + } + .beginning-messages-text { + margin-top: 2px; + margin-bottom: 5px; + display: block; + text-align: center; + color: grey; + } +} + +.post-list__timestamp { + position: absolute; + top: 8px; + left: 50%; + z-index: 50; + width: 120px; + text-align: center; + background: $color--primary; + color: #fff; + @include border-radius(3px); + font-size: 12px; + line-height: 25px; + margin-left: -60px; + -webkit-font-smoothing: initial; + @include single-transition(all, .6s, ease); + @include translateY(-45px); + @include opacity(0); + display: none; + + &.scrolling { + @include translateY(0); + @include opacity(.8); + } +} + +.post-list__arrows { + background-repeat: no-repeat; + width: 40px; + height: 40px; + text-align: center; + fill: #444; + position: absolute; + bottom: 0; + left: 9px; + z-index: 50; + @include opacity(0); + @include single-transition(all, .6s); + display: none; + + svg { + color: inherit; + width: 28px; + height: 28px; + } + + &.scrolling { + display: block; + @include opacity(1); + } +} + +.post-create__container { + form { + width: 100%; + padding: .5em 14px 0; + margin: 0 auto; + max-width: 1028px; + } + .post-create-body { + position: relative; + padding: 0 0 2px; + .post-body__cell { + vertical-align: top; + position: relative; + &.scroll { + .btn-file { + right: 15px; + } + .custom-textarea { + padding-right: 43px; + } + } + } + .send-button { + display: none; + cursor: pointer; + padding-right: 4px; + width: 45px; + height: 37px; + font-size: 18px; + line-height: 37px; + vertical-align: bottom; + text-align: center; + @include single-transition(all, .15s); + &:active { + @include opacity(.75); + } + } + .custom-textarea { + padding-top: 8px; + padding-right: 28px; + max-height: 162px !important; + line-height: 1.5; + } + .textarea-div { + padding-top: 8px; + padding-right: 30px; + max-height: 163px !important; + overflow: auto; + line-height: 1.5; + } + .btn-file { + right: 0; + position: absolute; + top: 1px; + color: #444; + @include opacity(.5); + @include single-transition(all, .15s); + font-size: 16px; + padding: 7px 9px 6px; + &:hover, + &:active { + @include opacity(.9); + box-shadow: none; + } + } + textarea { + box-shadow: none; + } + } + .post-create-footer { + @include clearfix; + padding: 3px 0 0 0; + font-size: 13px; + .control-label { + font-weight: normal; + margin-bottom: 0; + top: -5px; + position: relative; + } + } + .msg-typing { + display: block; + @include opacity(.7); + white-space: nowrap; + margin-bottom: 5px; + overflow: hidden; + font-size: .95em; + text-overflow: ellipsis; + height: 20px; + } +} + +.post-list__table { + display: table; + table-layout: fixed; + width: 100%; + min-height: 100%; + height: 100%; + .post-list__content { + display: table-cell; + vertical-align: bottom; + .dropdown-menu { + &.bottom { + top: auto; + bottom: 25px; + } + } + } +} + +.post { + word-wrap: break-word; + padding: 8px .5em 0 1em; + position: relative; + max-width: 100%; + @include legacy-pie-clearfix; + + &:hover { + .dropdown, + .comment-icon__container, + .post__reply, + .post__remove { + visibility: visible; + } + .permalink-icon { + visibility: visible; + } + } + + &.post--highlight { + background-color: beige; + } + + p { + margin: 0; + line-height: 1.6em; + font-size: .97em; + white-space: pre-wrap; + + &:last-child { + margin-bottom: .5em; + } + } + + span { + p:last-child { + margin-bottom: .5em; + } + } + + &.post--root { + .comment-icon__container { + visibility: visible; + } + } + + &.same--root { + &.same--user { + padding: 0 .5em 0 1em; + + &:hover { + .post__time { + @include opacity(.5); + } + } + + .post__header { + margin: 0; + height: 0; + + .col__name { + display: none; + } + + .col__reply { + top: 6px; + } + } + + .post__time { + top: 24px; + } + + .post__time { + font: normal normal normal FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + top: -2px; + left: -7px; + font-size: 11px; + line-height: 37px; + @include opacity(0); + } + } + + &.post--comment { + .post__link { + display: none; + } + + .post__img { + img { + display: none; + } + } + } + + &.post--comment { + .post__body { + border-left: 4px solid #ddd; + } + } + } + + &.other--root { + .comment-icon__container { + &.icon--show { + visibility: visible; + } + } + + &.post--comment { + .popover { + margin-top: 84px; + + > .arrow { + top: 21px !important; + } + } + + .post__header { + .col__reply { + top: 53px; + } + } + } + } + + .post__content { + margin: 0 auto; + position: relative; + max-width: 1000px; + display: table; + width: 100%; + table-layout: fixed; + + > div { + display: table-cell; + vertical-align: top; + } + } + + .post__header { + padding: 0; + list-style: none; + margin-bottom: 2px; + + li { + display: inline-block; + vertical-align: top; + } + + .col__name { + margin-right: 7px; + font-weight: 600; + + .user-popover { + max-width: 200px; + @include clearfix; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .col__reply { + position: absolute; + right: 0; + top: 30px; + width: 65px; + white-space: nowrap; + } + + .permalink-popover { + min-width: 0; + + .popover-content { + padding: 5px; + } + + .form-control, + .btn { + font-size: 13px; + height: 30px; + padding: 0 8px; + line-height: 30px; + } + } + } + + .post__img { + width: 46px; + img { + width: 36px; + height: 36px; + vertical-align: inherit; + @include border-radius(50px); + } + } + + .post__embed-container { + display: block; + max-height: 1000px; + transition: max-height .5s ease; + overflow: hidden; + &[hidden] { + max-height: 0; + } + } + + .dropdown { + display: inline-block; + visibility: hidden; + margin-right: 5px; + top: -1px; + + .dropdown-menu { + right: 0; + left: auto; + min-width: 130px; + padding: 2px 0; + + li { + display: block; + } + + a { + padding: 5px 15px; + } + } + } + + .post__dropdown { + &:after { + content: '[...]'; + top: -1px; + position: relative; + } + } + + .post__remove { + font-family: 'Open Sans', sans-serif; + position: relative; + display: inline-block; + vertical-align: top; + right: 15px; + top: -5px; + font-size: 20px; + width: 20px; + height: 20px; + line-height: 20px; + font-weight: 600; + visibility: hidden; + color: inherit; + @include opacity(.5); + text-decoration: none; + + &:hover { + @include opacity(.8); + } + } + + .post__body { + word-wrap: break-word; + padding: .2em .5em; + @include legacy-pie-clearfix; + width: calc(100% - 75px); + + p { + margin: 0 0 .4em; + } + + p + p { + margin-top: 1.4em; + } + + li { + > p { + margin-top: 10px; + } + } + + img { + max-height: 400px; + } + + ul, + ol { + margin-bottom: .4em; + + p { + margin-bottom: 0; + } + li ul, + li ol { + padding: 0 0 0 20px; + } + + li.list-item--task-list ul, + li.list-item--task-list ol { + margin-left: 20px; + } + + li.list-item--task-list ul { + padding-left: 0; + } + + li:not(.list-item--task-list) li.list-item--task-list, + li:not(.list-item--task-list) li.list-item--task-list ~ li { + margin-left: -20px; + } + + li input[type='checkbox']:disabled { + vertical-align: top; + cursor: default; + } + } + + ul li.list-item--task-list, + ul li.list-item--task-list ~ li { + list-style-type: none; + } + + ul li.list-item--task-list ~ li:not(.list-item--task-list) { + text-indent: 3px; + + &:before { + content: '⦁'; + margin-right: 8px; + } + } + } + + .post__link { + margin: 2px 0 5px; + font-size: 13px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .post__embed-visibility { + cursor: pointer; + font: normal normal normal 14px/1 FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 5px 0 10px; + display: inline-block; + + &:hover { + text-decoration: none; + } + + &:before { + content: '\f065'; + font-size: 14px; + } + + &[data-expanded='true']:before { + content: '\f066'; + } + } + + .post__time { + font-size: .9em; + } + + .post__time, + &.post--system .post__body { + @include opacity(.6); + } + + .post-loading-gif { + height: 10px; + width: 10px; + margin-top: 6px; + } + + .post-fail { + color: #d58a8a; + } + + .post-waiting { + color: #999; + } + + .permalink-icon { + display: inline-block; + color: $color--primary; + visibility: hidden; + } + + .post__reply { + display: inline-block; + margin-right: 6px; + visibility: hidden; + svg { + width: 18px; + top: 3px; + fill: inherit; + position: relative; + } + } + + .comment-icon__container { + fill: $color--primary; + display: inline-block; + visibility: hidden; + + &:focus { + outline: none; + } + + &.icon--visible { + visibility: visible; + } + + svg { + height: 17px; + width: 17px; + } + + .comment-icon { + display: inline-block; + top: 2px; + position: relative; + margin-right: 3px; + fill: inherit; + } + + path { + fill: inherit; + } + } + + .web-embed-data { + padding: 2px 0 0 10px; + background: #f9f9f9; + background: rgba(0, 0, 0, .05); + @include border-radius(2px); + height: 50px; + overflow: hidden; + text-overflow: ellipsis; + .embed-title { + margin: 3px 0 1px; + color: #555; + font-weight: 600; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .embed-description { + margin: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + color: #888; + } + .embed-link { + display: none; + } + } +} + +.bot-indicator { + font-family: inherit; + font-size: 11px; + padding: 2px 4px; + border-radius: 2px; + font-weight: 600; + margin: 0 0 0 -4px; +} + +.attachment { + .attachment__content { + border-width: 1px; + border-style: solid; + border-radius: 4px; + padding: 2px 5px; + margin: 0 0 5px 0; + } + .attachment__thumb-pretext { + border: 0 none; + background: transparent; + } + .attachment__container { + border-left-width: 4px; + border-left-style: solid; + padding: 2px 0 2px 10px; + &.attachment__container--good { + border-left-color: #00c100; + } + &.attachment__container--warning { + border-left-color: #dede01; + } + &.attachment__container--danger { + border-left-color: #e40303; + } + } + .attachment__body { + float: left; + width: 80%; + padding-right: 5px; + overflow-x: auto; + overflow-y: hidden; + &.attachment__body--no_thumb { + width: 100%; + } + } + .attachment__text p:last-of-type { + display: inline-block; + } + .attachment__thumb-pretext { + margin-left: 5px; + } + .attachment__title { + margin: 5px 0; + padding: 0; + line-height: 16px; + height: 22px; + font-size: 16px; + a { + font-size: 16px; + } + } + .attachment__author-icon { + @include border-radius(50px); + margin-right: 5px; + width: 14px; + height: 14px; + } + .attachment__image { + max-width: 100%; + margin-bottom: 1em; + } + .attachment__thumb-container { + width: 20%; + float: right; + img { + max-height: 75px; + max-width: 100%; + } + } + .attachment___fields { + width: 100%; + .attachment___field-caption { + font-weight: 700; + } + .attachment___field p { + margin: 0; + } + } +} + +.permalink-text { + overflow: hidden; +} + +.permalink-popover { + min-width: 320px; + margin-left: 50px !important; +} diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/layout/_sidebar-left.scss index 44681291c..ece054a15 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/layout/_sidebar-left.scss @@ -1,4 +1,4 @@ -@charset "UTF-8"; +@charset 'UTF-8'; .sidebar--left { position: absolute; @@ -6,9 +6,9 @@ left: 0; height: 100%; border-right: $border-gray; - padding: 0 0 2em 0; background: #fafafa; z-index: 5; + &.sidebar--padded { padding-top: 44px; } @@ -25,23 +25,26 @@ display: none; } .badge { - background-color: $primary-color; + background-color: $color--primary; position: absolute; right: 10px; top: 5px; } .status { - position:relative; - top:1px; + position: relative; + top: 1px; margin-right: 6px; width: 12px; display: inline-block; svg { max-height: 14px; } - i, path, ellipse { - @include opacity(0.5); - &.online--icon, &.away--icon { + i, + path, + ellipse { + @include opacity(.5); + &.online--icon, + &.away--icon { @include opacity(1); } } @@ -54,7 +57,7 @@ } } .nav-pills__container { - height: 100%; + height: calc(100% - 80px); position: relative; overflow: auto; -webkit-overflow-scrolling: touch; @@ -66,7 +69,7 @@ right: 0; width: 72%; color: #fff; - background: #2389D7; + background: #2389d7; @include border-radius(50px); margin: 0 auto; padding: 3px 0 4px; @@ -84,7 +87,7 @@ .nav { &.nav-stacked { - > li+li { + > li + li { margin: 0; } } @@ -92,10 +95,10 @@ > h4 { font-size: 1em; text-transform: uppercase; - margin: 1.1em 0 0.5em; + margin: 1.1em 0 .5em; font-weight: 400; - color: #AAA; - letter-spacing: -0.3px; + color: #aaa; + letter-spacing: -.3px; padding: 0 10px 0 15px; } > a { @@ -113,7 +116,7 @@ &:hover { .btn-close { display: block; - @include opacity(0.8); + @include opacity(.8); } } .btn-close { @@ -149,8 +152,10 @@ background: #000; } } - a, a:hover, a:focus { - background-color: rgba(black, 0.1); + a, + a:hover, + a:focus { + background-color: rgba(black, .1); border-radius: 0; font-weight: 400; position: relative; @@ -166,7 +171,7 @@ float: right; outline: none; margin: -2px 0 0 0; - color: #AAA; + color: #aaa; padding: 0 5px; text-decoration: none; font-size: 22px; @@ -189,5 +194,4 @@ margin-left: 10px; height: 25px; width: 25px; - } diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/layout/_sidebar-menu.scss index 443b7dbb0..167b24ba0 100644 --- a/web/sass-files/sass/partials/_sidebar--menu.scss +++ b/web/sass-files/sass/layout/_sidebar-menu.scss @@ -1,4 +1,4 @@ -@charset "UTF-8"; +@charset 'UTF-8'; .sidebar--menu { position: absolute; @@ -20,7 +20,7 @@ color: #fff; } .navbar-right { - font-size: 0.85em; + font-size: .85em; margin: 16px -5px 0; .dropdown-toggle { padding: 0 10px; @@ -32,7 +32,7 @@ } } .dropdown__icon { - background: url("../images/dropdown-icon.png"); + background: url('../images/dropdown-icon.png'); width: 4px; height: 16px; @include background-size(100% 100%); @@ -59,7 +59,8 @@ color: inherit; line-height: 40px; padding: 0 15px; - .fa ,.glyphicon { + .fa, + .glyphicon { width: 25px; text-align: center; left: -5px; diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/layout/_sidebar-right.scss index aaa6f4c92..e1a7d7641 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/layout/_sidebar-right.scss @@ -1,4 +1,4 @@ -@charset "UTF-8"; +@charset 'UTF-8'; .sidebar--right { position: fixed; @@ -8,28 +8,21 @@ padding: 0; background: #fff; @include translateX(400px); - .post-body { + .post-body { img { max-height: 200px; } - } .post { - .post__header { - .col__name { - .user-popover { max-width: 130px; } - } - } - } .sidebar--right__content { @@ -40,13 +33,14 @@ .sidebar--right__back { color: inherit; - @include opacity(0.8); + @include opacity(.8); width: 30px; text-align: center; margin: 0 0 0 -14px; font-size: 13px; display: inline-block; } + .sidebar-right__body { @include flex(1 1 auto); border-left: $border-gray; @@ -56,38 +50,45 @@ height: calc(100% - 56px); @include border-radius(2px 0 0 0); } + .sidebar__overlay { width: 100%; height: 100%; background-color: yellow; - @include opacity(0.1); + @include opacity(.1); position: absolute; z-index: 5; pointer-events: none; } + .input-group { word-break: break-word; } + .sidebar--right__close { margin: 11px 0 0 0; width: 22px; height: 22px; - opacity: 0.5; + opacity: .5; font-size: 22px; line-height: 0; background: none; float: right; outline: none; border: none; - @include single-transition(all, 0.2s, ease-in); - &:hover, &:active { - opacity: 0.8; + @include single-transition(all, .2s, ease-in); + + &:hover, + &:active { + opacity: .8; } + i { position: relative; top: -2px; } } + .sidebar--right__header { font-size: 1em; text-transform: uppercase; @@ -98,23 +99,27 @@ @include flex(0 0 44px); border-bottom: $border-gray; } + .sidebar--right__subheader { font-size: 1em; padding: 1em 1em 0; + h4 { font-size: 1em; } + ul { - @include opacity(0.7); + @include opacity(.7); padding: 10px 0 0 30px; } + li { - font-size: 0.95em; + font-size: .95em; padding-bottom: 10px; } } - .suggestion-content { + .suggestion-list__content { max-height: 120px; } } diff --git a/web/sass-files/sass/partials/_webhooks.scss b/web/sass-files/sass/layout/_webhooks.scss index 4b0215a9e..d6e367218 100644 --- a/web/sass-files/sass/partials/_webhooks.scss +++ b/web/sass-files/sass/layout/_webhooks.scss @@ -1,20 +1,23 @@ -@charset "UTF-8"; +@charset 'UTF-8'; .webhooks__container { - background: rgba(black, 0.1); + background: rgba(black, .1); border: 1px solid; @include border-radius(3px); padding: 0 13px 15px; margin-top: 10px; } + .webhook__item { font-size: 13px; position: relative; + &:last-child { .divider-light:last-child { display: none; } } + .webhook__remove { position: absolute; right: -7px; @@ -25,9 +28,10 @@ font-weight: bold; text-align: center; text-decoration: none; - color: #E05F5D; + color: #e05f5d; } + .webhook__url { padding-right: 20px; } -}
\ No newline at end of file +} diff --git a/web/sass-files/sass/partials/_access-history.scss b/web/sass-files/sass/pages/_access-history.scss index dcb5f3c5f..7ede7b085 100644 --- a/web/sass-files/sass/partials/_access-history.scss +++ b/web/sass-files/sass/pages/_access-history.scss @@ -1,27 +1,32 @@ -@charset "UTF-8"; +@charset 'UTF-8'; .access-history__table { display: table; width: 100%; padding-top: 15px; line-height: 1.6; + &:first-child { padding: 0; } + > div { display: table-cell; vertical-align: top; } + .access__date { font-weight: 600; font-size: 15px; width: 190px; } + .access__report { border-bottom: 1px solid #ddd; padding-bottom: 15px; } + .report__info { - @include opacity(0.8); + @include opacity(.8); } -}
\ No newline at end of file +} diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/pages/_activity-log.scss index df5869b4c..6e8d0a925 100644 --- a/web/sass-files/sass/partials/_activity-log.scss +++ b/web/sass-files/sass/pages/_activity-log.scss @@ -1,8 +1,12 @@ -@charset "UTF-8"; +@charset 'UTF-8'; @keyframes highlight { - from { background: rgba(yellow, 0.5);} - to { background: none;} + from { + background: rgba(yellow, .5); + } + to { + background: none; + } } .animation--highlight { @@ -21,22 +25,27 @@ display: table; width: 100%; line-height: 1.8; - border-top: 1px solid #DDD; + border-top: 1px solid #ddd; padding: 15px 0; + &:first-child { padding-top: 0; border: none; } + > div { display: table-cell; vertical-align: top; } + .activity-log__report { width: 80%; } + .activity-log__action { text-align: right; } + .report__platform { font-size: 15px; font-weight: 600; @@ -44,10 +53,12 @@ margin-right: 6px; } } + .report__info { - @include opacity(0.8); + @include opacity(.8); } } + .session-help-text { padding: 0 0 20px; -}
\ No newline at end of file +} diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/pages/_admin-console.scss index 76081710f..f83ce487e 100644 --- a/web/sass-files/sass/partials/_admin-console.scss +++ b/web/sass-files/sass/pages/_admin-console.scss @@ -1,11 +1,11 @@ -@charset "UTF-8"; +@charset 'UTF-8'; -#admin_controller { +.admin-controller { > div { height: 100%; } - .inner__wrap { + .inner-wrap { position: absolute; width: 100%; } @@ -17,7 +17,7 @@ h3 { font-weight: 600; border-bottom: 1px solid #ddd; - padding-bottom: 0.5em; + padding-bottom: .5em; margin: 1em 0; } @@ -25,35 +25,77 @@ background: #fff; } + .form-control { + background-color: #fff; + border: 1px solid #ccc; + color: #555; + + &:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + } + } + + .btn { + color: #333; + + &.btn-primary { + background: #2389d7; + + &:hover, + &:focus, + &:active { + background: #1c6dab; + } + } + } + + .dropdown-menu { + background: #fff; + border: 1px solid rgba(0,0,0,.15); + color: inherit; + } + .sidebar--left { &.sidebar--collapsable { background: #333; + .team__header { background: transparent; margin-bottom: 5px; } + .nav { li { padding: 0; @include opacity(1); + .icon { width: 17px; } + > a { - &:hover, &.active, &:focus { - background-color: #EAEAEA; + &:hover, + &.active, + &:focus { + background-color: #eaeaea; } } + > h4 { background: #333; padding: 10px 10px; margin: 1px 0 0; + .menu-icon--right { top: 6px; right: 12px; } } } + .menu-icon--right { position: absolute; right: 10px; @@ -64,6 +106,7 @@ height: 20px; line-height: 20px; text-align: center; + .fa { font-size: 13px; right: -2px; @@ -71,26 +114,32 @@ color: #fff; } } + &.nav__sub-menu { background: #111; -webkit-font-smoothing: auto; + &.padded { padding: 5px 0; } + li { > a { font-size: 13px; padding: 5px 35px 5px 15px; background: transparent; color: #bbb; + &:hover { - color: lighten($primary-color, 10); + color: lighten($color--primary, 10); } + &.active { color: #fff; font-weight: 600; } } + .nav-more { font-size: 13px; padding: 5px 15px; @@ -99,11 +148,12 @@ display: block; cursor: pointer; &:hover { - color: lighten($primary-color, 10); + color: lighten($color--primary, 10); } } } } + &.nav__inner-menu { li { > a { @@ -126,29 +176,37 @@ } .app__content { + color: #333; + &.admin { overflow: auto; background-color: #f1f1f1; padding: 0 20px 20px; min-height: 600px; } + .wrapper--fixed { max-width: 800px; } + .form-horizontal { margin-top: 40px; + .control-label { text-align: left; padding-right: 0; font-weight: 600; } + .form-group { margin-bottom: 25px; } + .file__upload { position: relative; margin: 0 10px 10px 0; display: inline-block; + input { position: absolute; @include opacity(0); @@ -159,91 +217,114 @@ left: 0; } } + .help-text { &.no-margin { margin: 0; } - ul, ol { + + ul, + ol { padding-left: 23px; } + margin: 10px 0 0 15px; color: #777; + .help-link { margin-right: 5px; } + .btn { font-size: 13px; } } + .alert { display: inline-block; padding: 5px 7px; margin: 1em 0 0; top: 1px; position: relative; + .fa { margin-right: 5px; } } } + .banner { background: #fff; border: 1px solid #ddd; - padding: 0.7em 1.5em; - font-size: 0.95em; + padding: .7em 1.5em; + font-size: .95em; margin: 2em 0; + .banner__heading { font-size: 1.5em; } + .banner__content { width: 80%; } + &.warning { background: #e60000; } } + .popover { border-radius: 3px; width: 100%; - font-size: 0.95em; + font-size: .95em; } + .panel { border: none; background-color: transparent; } + .panel-default { > .panel-heading { padding: 10px 0; background-color: transparent; } + .panel-body { padding: 30px 0 10px; } } + .panel-group { margin-bottom: 50px; } + .panel-title { font-size: 24px; line-height: 1.5; + a { text-decoration: none; display: block; @include clearfix; + &.collapsed { .fa-minus { display: none; } + .fa-plus { display: inline-block; } } + .fa { font-size: 18px; float: right; margin-top: 8px; color: #aaa; } + .fa-plus { display: none; } @@ -252,7 +333,8 @@ } .member-list-holder { - .member-role, .member-drop { + .member-role, + .member-drop { position: absolute; right: 15px; top: 8px; diff --git a/web/sass-files/sass/pages/_docs.scss b/web/sass-files/sass/pages/_docs.scss new file mode 100644 index 000000000..24e96772b --- /dev/null +++ b/web/sass-files/sass/pages/_docs.scss @@ -0,0 +1,19 @@ +@charset 'UTF-8'; + +.docs__page { + line-height: 1.7; + padding-bottom: 20px; + + > div { + width: 1170px; + margin: 0 auto; + padding: 0 15px; + max-width: 100%; + } + + h1.markdown__heading { + border-bottom: 1px solid #ddd; + padding-bottom: 1rem; + margin: 1em 0 1em; + } +} diff --git a/web/sass-files/sass/pages/_error-page.scss b/web/sass-files/sass/pages/_error-page.scss new file mode 100644 index 000000000..8cd0716ca --- /dev/null +++ b/web/sass-files/sass/pages/_error-page.scss @@ -0,0 +1,35 @@ +@charset 'UTF-8'; + +body { + &.error { + .container-fluid { + display: table; + height: 90%; + } + + .error__container { + max-width: 800px; + margin: 0 auto; + display: table-cell; + vertical-align: top; + padding: 5em 0; + text-align: left; + color: #555; + } + + .error__icon { + font-size: 4em; + color: #ccc; + } + + h2 { + font-weight: 600; + font-size: 1.5em; + margin: .8em 0 .5em; + } + + p { + font-size: 1.2em; + } + } +} diff --git a/web/sass-files/sass/pages/_loading.scss b/web/sass-files/sass/pages/_loading.scss new file mode 100644 index 000000000..5e4e7359a --- /dev/null +++ b/web/sass-files/sass/pages/_loading.scss @@ -0,0 +1,48 @@ +@charset 'UTF-8'; + +.loading-screen { + display: table; + width: 100%; + height: 100%; + padding: 60px; + text-align: center; + + .loading__content { + display: table-cell; + vertical-align: middle; + font-size: 0; + + h3 { + font-size: 16px; + font-weight: 400; + margin: 0 .2em 0; + display: inline-block; + } + + .round { + background-color: #444; + width: 4px; + height: 4px; + display: inline-block; + margin: 0 2px; + opacity: .1; + @include border-radius(10px); + @include animation(move .75s infinite linear); + } + + @for $i from 1 through 3 { + .round-#{$i} { + @include animation-delay(.2s*$i); + } + } + + @include keyframes(move) { + from { + opacity: 1; + } + to { + opacity: .1; + } + } + } +} diff --git a/web/sass-files/sass/pages/_module.scss b/web/sass-files/sass/pages/_module.scss new file mode 100644 index 000000000..48c1af1d9 --- /dev/null +++ b/web/sass-files/sass/pages/_module.scss @@ -0,0 +1,11 @@ +// Only for combining all the files in this folder +@import 'access-history'; +@import 'activity-log'; +@import 'admin-console'; +@import 'docs'; +@import 'error-page'; +@import 'loading'; +@import 'print'; +@import 'settings'; +@import 'signup'; +@import 'statistics'; diff --git a/web/sass-files/sass/pages/_print.scss b/web/sass-files/sass/pages/_print.scss Binary files differnew file mode 100644 index 000000000..1c2ef9c0f --- /dev/null +++ b/web/sass-files/sass/pages/_print.scss diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/pages/_settings.scss index 6574dd927..3c735be3c 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/pages/_settings.scss @@ -1,11 +1,7 @@ -@charset "UTF-8"; - -@import "access-history"; -@import "activity-log"; -@import "webhooks"; +@charset 'UTF-8'; .user-settings { - min-height:300px; + min-height: 300px; .table-responsive { max-width: 560px; max-height: 300px; @@ -125,7 +121,7 @@ } .section-max { - background: rgba(black, 0.05); + background: rgba(black, .05); padding: 1em 0 1.3em; margin-bottom: 0; @include clearfix; @@ -141,7 +137,7 @@ width: 40px; } img { - border: 1px solid rgba(black, 0.15); + border: 1px solid rgba(black, .15); width: 29px; } } @@ -158,7 +154,7 @@ top: 11px; right: 50px; z-index: 5; - content: "\f0d7"; + content: '\f0d7'; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; @@ -167,9 +163,9 @@ -moz-osx-font-smoothing: grayscale; } select { - -moz-appearance:none; - -webkit-appearance:none; - appearance:none; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; } } .premade-themes { @@ -183,21 +179,20 @@ } .active { img { - border-color: $primary-color; + border-color: $color--primary; } } } .theme-elements { - padding-left:15px; + padding-left: 15px; .element { - margin-right:10px; + margin-right: 10px; &:nth-child(2n) { margin-right: 0; } - } } @@ -224,16 +219,15 @@ .header__icon { float: right; - @include opacity(0.5); + @include opacity(.5); } - } .theme-elements__body { padding-top: 5px; display: none; @include legacy-pie-clearfix; - background: rgba(255, 255, 255, 0.05); + background: rgba(255, 255, 255, .05); padding: 20px 0 0 20px; margin: 0 20px 0 0; @include border-radius(0 0 3px 3px); @@ -270,7 +264,7 @@ .fa { margin-right: 5px; font-size: 12px; - @include opacity(0.5); + @include opacity(.5); display: none; &.fa-chevron-down { top: -1px; @@ -281,23 +275,23 @@ } .section-describe { - @include opacity(0.7); - white-space:pre; + @include opacity(.7); + white-space: pre; @include clearfix; text-overflow: ellipsis; } .divider-dark { - border-bottom:1px solid #aaaaaa; + border-bottom: 1px solid #aaa; } .divider-light { - border-bottom:1px solid lightgrey; + border-bottom: 1px solid lightgrey; } .setting-list { padding: 0; - list-style-type:none; + list-style-type: none; } .setting-list__hint { @@ -309,7 +303,7 @@ } .setting-list-item { - margin-top:7px; + margin-top: 7px; } .has-error { color: #a94442; @@ -325,7 +319,6 @@ padding: 4px 10px; margin: 10px 0; } - } } } @@ -343,13 +336,13 @@ } &:hover { a { - background-color: rgba(black, 0.1); + background-color: rgba(black, .1); } } &.active { a { color: #111; - background-color: #E1E1E1; + background-color: #e1e1e1; &:before { content: ''; position: absolute; @@ -360,8 +353,10 @@ background: #000; } } - a, a:hover, a:focus { - background-color: rgba(black, 0.1); + a, + a:hover, + a:focus { + background-color: rgba(black, .1); border-radius: 0; font-weight: 400; position: relative; @@ -382,26 +377,26 @@ } .tab-header { - margin-bottom:1em; + margin-bottom: 1em; } .setting-name { - color:grey; - font-weight:500; + color: grey; + font-weight: 500; } .sel-btn { - margin-right:5px; + margin-right: 5px; } .member-div { - border-bottom:1px solid lightgrey; - position:relative; - padding:2px; + border-bottom: 1px solid lightgrey; + position: relative; + padding: 2px; margin: 0; - width:100%; + width: 100%; &:first-child { - border-top:1px solid lightgrey; + border-top: 1px solid lightgrey; } .post-profile-img { @include border-radius(50px); @@ -409,10 +404,11 @@ } } -.member-role, .member-drop { +.member-role, +.member-drop { .fa { margin-right: 5px; - @include opacity(0.5); + @include opacity(.5); font-size: 12px; } @@ -423,33 +419,33 @@ } .member-invite { - position:absolute; - right:10px; - top:7px; + position: absolute; + right: 10px; + top: 7px; } .member-menu { - right:0px; - left:auto; + right: 0px; + left: auto; } .member-list { - width:100%; - overflow-x:visible; + width: 100%; + overflow-x: visible; } .member-page { - padding-top:50px; + padding-top: 50px; } .active-border { - border:1px solid red; + border: 1px solid red; } .color-btn { - margin:4px; + margin: 4px; } .no-resize { - resize:none; + resize: none; } diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/pages/_signup.scss index 6d396d21c..53c59c222 100644 --- a/web/sass-files/sass/partials/_signup.scss +++ b/web/sass-files/sass/pages/_signup.scss @@ -1,29 +1,36 @@ -@charset "UTF-8"; +@charset 'UTF-8'; .signup-header { - width:100%; + width: 100%; line-height: 33px; - padding: 0 1em 0.2em; - background: #EEE; + padding: 0 1em .2em; + background: $bg--gray; .fa { margin-right: 5px; } - } .signup-team__container { padding: 100px 0px 50px 0px; max-width: 380px; margin: 0 auto; position: relative; + &.padding--less { padding-top: 50px; } + .form-control:focus { @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)); } - h1, h2, h3, h4, h5, h6, p { + h1, + h2, + h3, + h4, + h5, + h6, + p { line-height: 1.3; } @@ -33,8 +40,8 @@ h2 { font-weight: 600; - margin-bottom: 0.8em; - letter-spacing: -0.5px; + margin-bottom: .8em; + letter-spacing: -.5px; font-size: em(30px); } @@ -68,14 +75,17 @@ &.input-group--limit { table-layout: fixed; width: 100%; + .tooltip-inner { word-wrap: break-word; } + .form-control { text-align: left; display: table-cell; width: 100%; } + .input-group-addon { text-align: left; width: 50%; @@ -94,13 +104,13 @@ .block--gray { background: #f2f2f2; display: inline-block; - padding: 0.85em 1.2em; + padding: .85em 1.2em; font-weight: 600; @include border-radius(3px); } form { - margin-bottom: 0.8em; + margin-bottom: .8em; } .signup-team-confirm__container { @@ -119,14 +129,14 @@ } .signup-team__name { - margin: 0.5em 0 0; + margin: .5em 0 0; font-size: 2.2em; font-weight: 600; padding-left: 1rem; } .signup-team__subdomain { - margin: 0.2em 0 1.2em; + margin: .2em 0 1.2em; font-size: 1.5em; padding-left: 1rem; font-weight: 300; @@ -139,9 +149,10 @@ .or__container { height: 1px; - background: #dddddd; + background: #ddd; text-align: left; margin: 2em 0; + span { width: 40px; top: -10px; @@ -169,10 +180,12 @@ padding: em(7px) em(15px); font-weight: 600; margin-right: 5px; + .fa { font-size: 17px; margin-right: 8px; } + .icon { width: 18px; height: 18px; @@ -180,6 +193,7 @@ @include background-size(100% 100%); display: inline-block; } + &.btn-custom-login { display: block; min-width: 200px; @@ -190,70 +204,90 @@ line-height: 34px; color: #fff; @include border-radius(2px); + &.gitlab { - background: #554488; + background: #548; + &:hover { - background: darken(#554488, 10%); + background: darken(#548, 10%); } + span { vertical-align: middle; } + .icon { - background-image: url("../images/gitlabLogo.png"); + background-image: url('../images/gitlabLogo.png'); } } + &.google { background: #dd4b39; + &:hover { background: darken(#dd4b39, 10%); } + span { vertical-align: middle; } + .icon { - background-image: url("../images/googleLogo.png"); + background-image: url('../images/googleLogo.png'); } } + &.ldap { background: #dd4b39; + &:hover { background: darken(#dd4b39, 10%); } + span { vertical-align: middle; } } + &.email { - background: #2389D7; + background: #2389d7; + &:hover { - background: darken(#2389D7, 10%); + background: darken(#2389d7, 10%); } + span { vertical-align: middle; } } + &.btn-full { width: 100%; text-align: left; padding-left: 35px; } } + &.btn-default { color: #444; } + .glyphicon { - &.glyphicon-ok, &.glyphicon-refresh { - margin-right: 0.5em; + &.glyphicon-ok, + &.glyphicon-refresh { + margin-right: .5em; left: -2px; - font-size: 0.9em; + font-size: .9em; } + &.glyphicon-chevron-right { - font-size: 0.8em; + font-size: .8em; right: -2px; top: 0px; } + &.glyphicon-chevron-left { - font-size: 0.8em; + font-size: .8em; left: -2px; top: 0px; } @@ -263,16 +297,17 @@ .has-error { .control-label { background: #f2f2f2; - padding: 0.7em 1em; + padding: .7em 1em; @include border-radius(3px); margin: 1em 0 0; font-size: 14px; font-weight: normal; color: #999; width: 100%; + &:before { @extend .fa; - content: "\f071"; + content: '\f071'; margin-right: 4px; color: #aaa; } @@ -282,27 +317,36 @@ .reset-form { @include border-radius(3px); position: relative; - font-size: 0.95em; + font-size: .95em; p { color: inherit; } } // Modifier Styles - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { &.margin--top-none { margin-top: 0; } + &.margin--bottom-none { margin-bottom: 0; } + &.margin--less { - margin-bottom: 0.3em; + margin-bottom: .3em; } + &.sub-heading { font-weight: 400; margin-bottom: 0; } + &.color--light { font-weight: 300; } @@ -312,10 +356,13 @@ &.margin--extra { margin-bottom: 1.5em; } + &.margin--less { - margin-bottom: 0.3em; + margin-bottom: .3em; } - .black, &.black { + + .black, + &.black { color: #000; } } @@ -331,7 +378,6 @@ .margin--extra-2x { margin-top: 6em; } - } .signup-team-all { @@ -341,9 +387,11 @@ .signup-team-dir { background: #fafafa; border-top: 1px solid #d5d5d5; + &:first-child { border: none; } + a { color: inherit; display: block; @@ -353,6 +401,7 @@ font-size: 1.1em; } } + .signup-team-dir__name { white-space: nowrap; float: left; @@ -360,9 +409,10 @@ text-overflow: ellipsis; width: 90%; } + .signup-team-dir__arrow { float: right; - font-size: 0.9em; + font-size: .9em; color: #999; line-height: 3.5em; } @@ -371,8 +421,8 @@ .authorize-box { margin: 100px auto; - width:500px; - height:280px; + width: 500px; + height: 280px; border: 1px solid black; } diff --git a/web/sass-files/sass/pages/_statistics.scss b/web/sass-files/sass/pages/_statistics.scss new file mode 100644 index 000000000..b48c137c3 --- /dev/null +++ b/web/sass-files/sass/pages/_statistics.scss @@ -0,0 +1,85 @@ +@charset 'UTF-8'; + +.team_statistics { + .total-count { + margin: 1em 0; + text-align: center; + background: #fff; + border: 1px solid #ddd; + width: 100%; + @include border-radius(3px); + + .title { + font-weight: 400; + padding: 7px 10px; + border-bottom: 1px solid #ddd; + text-align: left; + font-size: 13px; + + .fa { + float: right; + margin: 0px 0 0; + color: #555; + font-size: 16px; + } + } + + .content { + font-size: 30px; + font-weight: 600; + color: #555; + padding: .3em 0 .35em; + overflow: auto; + } + } + + .total-count--day { + width: 760px; + height: 275px; + border: 1px solid #ddd; + padding: 5px 10px 10px 10px; + margin: 10px 10px 10px 10px; + background: #fff; + clear: both; + + > div { + font-size: 18px; + font-weight: 300; + } + } + + .recent-active-users { + table { + width: 100%; + table-layout: fixed; + } + + .content { + max-height: 400px; + overflow: auto; + padding: 0; + } + + tr { + &:first-child { + td { + border-top: none; + } + } + + td { + font-weight: 400; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 13px; + border-left: 1px solid #ddd; + border-top: 1px solid #ddd; + padding: 5px 5px 6px; + @include clearfix; + &:first-child { + border-left: none; + } + } + } + } +} diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss deleted file mode 100644 index 4dcf0ff85..000000000 --- a/web/sass-files/sass/partials/_base.scss +++ /dev/null @@ -1,256 +0,0 @@ -@charset "UTF-8"; - -html, body { - height: 100%; -} - -body { - font-family: 'Open Sans', sans-serif; - -webkit-font-smoothing: antialiased; - background: $body-bg; - position: relative; - width: 100%; - height: 100%; - &.white { - background: #fff; - > .container-fluid { - overflow: auto; - } - .inner__wrap { - > .row.content { - min-height: 100%; - margin-bottom: -89px; - } - } - } -} - -b, strong { - font-weight: 600; -} - -.inner__wrap { - height: 100%; - > .row.main { - height: 100%; - position: relative; - } -} - -.container-fluid { - @include legacy-pie-clearfix; - height: 100%; - position: relative; -} - -.channel-view { - @include clearfix; - height: 100%; - position: relative; -} - -img { - max-width: 100%; - height: auto; - &.rounded { - @include border-radius(100%); - } -} - -.popover { - @include border-radius(3px); - color: #333; - &.bottom, &.right, &.top, &.left { - >.arrow:after { - border-color: transparent; - } - } - .popover-title { - background: rgba(black, 0.05); - } - .popover-content { - p:last-child { - margin-bottom: 5px; - } - } -} - -.dropdown-menu { - .divider { - @include opacity(0.15); - } - > li > a { - color: inherit; - &:focus, &:hover { - color: inherit; - } - } -} - -.word-break--all { - word-break: break-all; -} - -a { - word-break: break-word; - color: $primary-color; - cursor: pointer; -} - -a:focus, a:hover { - color: $primary-color; -} - -.tooltip { - .tooltip-inner { - word-break: break-word; - font-size: 13px; - padding: 3px 10px 4px; - font-weight: 500; - } -} - -.nopadding { - padding: 0; - margin: 0; -} - -.text-danger, a.text-danger { - color: #E05F5D; - &:hover, &:focus { - color: #E05F5D; - } -} - -.btn { - &.btn-danger { - color: #fff; - &:hover, &:active, &:focus { - color: #fff; - } - } -} - -.form-control { - @include border-radius(2px); - &:focus { - @include box-shadow(none); - } - &.no-padding { - line-height: 32px; - padding: 0; - } - &.no-resize { - resize: none; - } -} - -.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - cursor: auto; - background: rgba(#fff, 0.1); - color: inherit; -} - -.form-group { - &.form-group--small { - margin-bottom: 10px; - } -} - -.error-panel { - max-width: 275px; - position: absolute; - right: 10px; - top: 40px; - z-index: 100; -} - -.nav>li>a:focus, .nav>li>a:hover { - background: transparent; -} - -.btn { - @include single-transition(all, 0.25s, ease-in); - @include border-radius(1px); - &.btn-primary { - border-color: transparent; - background: $primary-color; - &:hover, &:focus, &:active { - background: $primary-color--hover; - } - } - &.btn-inactive { - border-color: transparent; - background: #707070; - color: #fff; - } -} - -.relative-div { - position:relative; -} - -@-webkit-keyframes spin2 { - from { -webkit-transform: rotate(0deg);} - to { -webkit-transform: rotate(360deg);} -} - -@keyframes spin { - from { transform: scale(1) rotate(0deg);} - to { transform: scale(1) rotate(360deg);} -} - -.glyphicon-refresh-animate { - @include animation(spin .7s infinite linear); -} - -.black-bg { - background-color: black !important; -} - -.white-bg { - background-color: white !important; -} - -.alert { - padding: 8px 12px; - @include border-radius(2px); -} - -.emoji { - width: 1.5em; - height: 1.5em; - display: inline-block; - margin-bottom: 0.25em; - background-size: contain; -} - - -// Scrollbar Css - -::-webkit-scrollbar -{ - width: 8px; /* for vertical scrollbars */ - height: 8px; /* for horizontal scrollbars */ -} - -::-webkit-scrollbar-track -{ - background: rgba(0, 0, 0, 0.1); -} - -::-webkit-scrollbar-thumb -{ - @include border-radius(5px); - background: rgba(0, 0, 0, 0.4); -} - -body{ - scrollbar-face-color: rgba(0, 0, 0, 0.1); - scrollbar-shadow-color: #2D2C4D; - scrollbar-highlight-color:#7D7E94; - scrollbar-3dlight-color: #7D7E94; - scrollbar-darkshadow-color: #2D2C4D; - scrollbar-track-color: rgba(0, 0, 0, 0.1); - scrollbar-arrow-color: #C1C1D1; -}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_colorpicker.scss b/web/sass-files/sass/partials/_colorpicker.scss deleted file mode 100644 index 7c79844ae..000000000 --- a/web/sass-files/sass/partials/_colorpicker.scss +++ /dev/null @@ -1,253 +0,0 @@ -@charset "UTF-8"; - -/*! - * Bootstrap Colorpicker - * http://mjolnic.github.io/bootstrap-colorpicker/ - * - * Originally written by (c) 2012 Stefan Petre - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0.txt - * - */ - -.colorpicker-saturation { - float: left; - width: 100px; - height: 100px; - cursor: crosshair; - background-image: url("../images/bootstrap-colorpicker/saturation.png"); -} - -.colorpicker-saturation i { - position: absolute; - top: 0; - left: 0; - display: block; - width: 5px; - height: 5px; - margin: -4px 0 0 -4px; - border: 1px solid #000; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} - -.colorpicker-saturation i b { - display: block; - width: 5px; - height: 5px; - border: 1px solid #fff; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} - -.colorpicker-hue, -.colorpicker-alpha { - float: left; - width: 15px; - height: 100px; - margin-bottom: 4px; - margin-left: 4px; - cursor: row-resize; -} - -.colorpicker-hue i, -.colorpicker-alpha i { - position: absolute; - top: 0; - left: 0; - display: block; - width: 100%; - height: 1px; - margin-top: -1px; - background: #000; - border-top: 1px solid #fff; -} - -.colorpicker-hue { - background-image: url("../images/bootstrap-colorpicker/hue.png"); -} - -.colorpicker-alpha { - display: none; - background-image: url("../images/bootstrap-colorpicker/alpha.png"); -} - -.colorpicker-saturation, -.colorpicker-hue, -.colorpicker-alpha { - background-size: contain; -} - -.colorpicker { - top: 0; - left: 0; - z-index: 2500; - min-width: 130px; - padding: 4px; - margin-top: 1px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - *zoom: 1; -} - -.colorpicker:before, -.colorpicker:after { - display: table; - line-height: 0; - content: ""; -} - -.colorpicker:after { - clear: both; -} - -.colorpicker:before { - position: absolute; - top: -7px; - left: 6px; - display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-left: 7px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; -} - -.colorpicker:after { - position: absolute; - top: -6px; - left: 7px; - display: inline-block; - border-right: 6px solid transparent; - border-bottom: 6px solid #ffffff; - border-left: 6px solid transparent; - content: ''; -} - -.colorpicker div { - position: relative; -} - -.colorpicker.colorpicker-with-alpha { - min-width: 140px; -} - -.colorpicker.colorpicker-with-alpha .colorpicker-alpha { - display: block; -} - -.colorpicker-color { - height: 10px; - margin-top: 5px; - clear: both; - background-image: url("../images/bootstrap-colorpicker/alpha.png"); - background-position: 0 100%; -} - -.colorpicker-color div { - height: 10px; -} - -.colorpicker-selectors { - display: none; - height: 10px; - margin-top: 5px; - clear: both; -} - -.colorpicker-selectors i { - float: left; - width: 10px; - height: 10px; - cursor: pointer; -} - -.colorpicker-selectors i + i { - margin-left: 3px; -} - -.colorpicker-element .input-group-addon i, -.colorpicker-element .add-on i { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: text-top; - cursor: pointer; -} - -.colorpicker.colorpicker-inline { - position: relative; - z-index: auto; - display: inline-block; - float: none; -} - -.colorpicker.colorpicker-horizontal { - width: 110px; - height: auto; - min-width: 110px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-saturation { - margin-bottom: 4px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-color { - width: 100px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-hue, -.colorpicker.colorpicker-horizontal .colorpicker-alpha { - float: left; - width: 100px; - height: 15px; - margin-bottom: 4px; - margin-left: 0; - cursor: col-resize; -} - -.colorpicker.colorpicker-horizontal .colorpicker-hue i, -.colorpicker.colorpicker-horizontal .colorpicker-alpha i { - position: absolute; - top: 0; - left: 0; - display: block; - width: 1px; - height: 15px; - margin-top: 0; - background: #ffffff; - border: none; -} - -.colorpicker.colorpicker-horizontal .colorpicker-hue { - background-image: url("../images/bootstrap-colorpicker/hue-horizontal.png"); -} - -.colorpicker.colorpicker-horizontal .colorpicker-alpha { - background-image: url("../images/bootstrap-colorpicker/alpha-horizontal.png"); -} - -.colorpicker.colorpicker-hidden { - display: none; -} - -.colorpicker.colorpicker-visible { - display: block; -} - -.colorpicker-inline.colorpicker-visible { - display: inline-block; -} - -.colorpicker-right:before { - right: 6px; - left: auto; -} - -.colorpicker-right:after { - right: 7px; - left: auto; -}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss deleted file mode 100644 index fb2355da7..000000000 --- a/web/sass-files/sass/partials/_content.scss +++ /dev/null @@ -1,82 +0,0 @@ -@charset "UTF-8"; - -.inner__wrap { - &.move--left { - .search-bar__container { - display: none; - } - } - &.move--right { - .search-bar__container { - display: none; - } - } -} -.app__content { - height: 100%; - padding-top: 50px; - margin-left: 220px; - position: relative; - background: #fff; - @include display-flex; - @include flex-direction(column); - .channel__wrap & { - padding-top: 0; - } -} -#post-create { - @include flex(0 0 auto); - background: #fff; - width: 100%; - z-index: 3; -} - -#archive-link-home { - @include flex(0 0 auto); - cursor: pointer; - padding: 10px 20px; - font-size: 13px; - - .fa { - font-size: 11px; - @include opacity(0.7); - } - - a { - color: inherit; - } - -} - -.post-list { - .new-messages-hr { - margin-top: 5px; - margin-bottom: 0px; - border: 0; - border-top: 1px solid #FF8800; - } - - .new-messages-text { - margin-top: 2px; - margin-bottom: 5px; - color: #FF8800; - text-align: center; - } -} -.new-messages-hr { - margin-top: 5px; - margin-bottom: 0px; - border: 0; - border-top: 1px solid #FF8800; -} - -.new-messages-text { - margin-top: 2px; - margin-bottom: 5px; - color: #FF8800; - text-align: center; -} - -.delete-message-text { - margin-top: 10px; -} diff --git a/web/sass-files/sass/partials/_docs.scss b/web/sass-files/sass/partials/_docs.scss deleted file mode 100644 index f4e7cc314..000000000 --- a/web/sass-files/sass/partials/_docs.scss +++ /dev/null @@ -1,19 +0,0 @@ -@charset "UTF-8"; - -.docs__page { - line-height: 1.7; - padding-bottom: 20px; - - > div { - width: 1170px; - margin: 0 auto; - padding: 0 15px; - max-width: 100%; - } - - h1.markdown__heading { - border-bottom: 1px solid #ddd; - padding-bottom: 1rem; - margin: 1em 0 1em; - } -}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_error.scss b/web/sass-files/sass/partials/_error.scss deleted file mode 100644 index e09a751d2..000000000 --- a/web/sass-files/sass/partials/_error.scss +++ /dev/null @@ -1,31 +0,0 @@ -@charset "UTF-8"; - -body { - &.error { - .container-fluid { - display: table; - height: 90%; - } - .error__container { - max-width: 800px; - margin: 0 auto; - display: table-cell; - vertical-align: top; - padding: 5em 0; - text-align: left; - color: #555; - } - .error__icon { - font-size: 4em; - color: #CCC; - } - h2 { - font-weight: 600; - font-size: 1.5em; - margin: 0.8em 0 0.5em; - } - p { - font-size: 1.2em; - } - } -}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss deleted file mode 100644 index 62e067437..000000000 --- a/web/sass-files/sass/partials/_files.scss +++ /dev/null @@ -1,264 +0,0 @@ -@charset "UTF-8"; - -.preview-container { - position: relative; - margin: 1px 0 10px; - width: 100%; - max-height: 100px; - height: 100px; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - .preview-div { - display: inline-block; - width: 120px; - height: 100px; - margin: 0 0 0 5px; - vertical-align: top; - position: relative; - border: 1px solid #DDD; - @include clearfix; - &:hover .remove-preview:after { - @include opacity(1); - } - &:first-child { - margin-left: 0; - } - .spinner { - position:absolute; - top:50%; - left:50%; - margin-left: -16px; - margin-top: -16px; - width:32px; - height:32px; - } - } - .preview-img { - display: block; - height: auto; - max-width: 100%; - } - .remove-preview { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - &:after { - background: rgba(0, 0, 0, 0.4); - content: ''; - height: 100%; - left: 0; - opacity: 0; - position: absolute; - top: 0; - width: 100%; - @include opacity(0); - } - i { - top: 5px; - right: 5px; - position: absolute; - color: #fff; - cursor: pointer; - z-index: 5; - opacity: inherit; - text-shadow: 0 0px 3px #444; - text-shadow: 0 0px 3px rgba(0, 0, 0, 0.7); - } - } -} - -.image-comment { - background-position:left top; - background-repeat:no-repeat; - width:300px; - height:300px; -} - -@mixin file-icon($path) { - background: #fff url($path); - background-position: center; - background-repeat: no-repeat; - @include background-size(60px auto); -} -.file-icon { - width: 100%; - height: 100%; - &.audio { - @include file-icon("../images/icons/audio.png"); - } - &.video { - @include file-icon("../images/icons/video.png"); - } - &.ppt { - @include file-icon("../images/icons/ppt.png"); - } - &.generic { - @include file-icon("../images/icons/generic.png"); - } - &.code { - @include file-icon("../images/icons/code.png"); - } - &.excel { - @include file-icon("../images/icons/excel.png"); - } - &.word { - @include file-icon("../images/icons/word.png"); - } - &.pdf { - @include file-icon("../images/icons/pdf.png"); - } - &.patch { - @include file-icon("../images/icons/patch.png"); - } - &.image { - @include file-icon("../images/icons/image.png"); - } -} -.post-image__column { - position: relative; - width: 240px; - height: 100px; - float: left; - margin: 5px 10px 5px 0; - border: 1px solid lightgrey; - .post__load { - height: 100%; - width: 100%; - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - } - .post__image { - width: 100%; - height: 100%; - background-color: #FFF; - background-repeat: no-repeat; - overflow: hidden; - position: relative; - text-align: center; - &.small { - background-position: center; - } - &.normal { - background-position: top left; - } - .spinner.file__loading { - position: absolute; - left: 50%; - margin-left: -16px; - top: 50%; - margin-top: -16px; - } - .file__loaded { - max-width: initial; - &.landscape, &.quadrat { - height: 100px; - } - &.portrait { - width: 120px; - } - } - &:hover .file-playback-controls.stop { - @include opacity(1); - } - } - .post-image__thumbnail { - float: left; - width: 50%; - height: 100%; - cursor: zoom-in; - cursor: -webkit-zoom-in; - } - .post-image__details { - float: left; - @include clearfix; - word-break: break-word; - width: 50%; - height: 100%; - background: white; - border-left: 1px solid #ddd; - font-size: 13px; - padding: 7px; - color: #333; - .post-image__name { - margin-bottom: 3px; - display: block; - } - .post-image__download { - display: inline-block; - padding-right: 7px; - cursor: pointer; - @include opacity(0.7); - } - .post-image__type { - @include opacity(0.6); - } - .post-image__size { - margin-left: 4px; - @include opacity(0.6); - } - } - a { - text-decoration: none; - color: grey; - } -} - -.file-details__container { - @include display-flex; - display: -ms-flexbox; - - .file-details { - width: 320px; - height: 270px; - padding: 14px; - text-align: left; - vertical-align: top; - - .file-details__name { - color: #333; - font-size: 16px; - } - .file-details__info { - color: grey; - } - } - .file-details__preview { - width: 320px; - height: 270px; - border-right: 1px solid #ddd; - vertical-align: center; - - // helper to center the image icon in the preview window - .file-details__preview-helper { - height: 100%; - display: inline-block; - vertical-align: middle; - } - } -} - -.file-playback-controls { - position: absolute; - right: 5px; - bottom: 0; - font-size: 22px; - cursor: pointer; - z-index: 2; - -webkit-transition: opacity 0.6s; - -moz-transition: opacity 0.6s; - -o-transition: opacity 0.6s; - transition: opacity 0.6s; - - &.stop { - @include opacity(0); - } -} - -.view-image__loading { - background: black; - min-height: 100px; -} diff --git a/web/sass-files/sass/partials/_forms.scss b/web/sass-files/sass/partials/_forms.scss deleted file mode 100644 index a2d6eaf99..000000000 --- a/web/sass-files/sass/partials/_forms.scss +++ /dev/null @@ -1,51 +0,0 @@ -@charset "UTF-8"; - -.form-horizontal { - .modal-intro { - margin: -10px 0 30px; - } - .form__label { - text-align: left; - padding-right: 3px; - font-weight: 600; - font-size: 1.1em; - &.light { - font-weight: normal; - color: #999; - font-size: 1.05em; - font-style: italic; - padding-top: 2px; - } - } - .input__help { - color: inherit; - margin: 10px 0 0 10px; - word-break: break-word; - @include opacity(0.8); - &.dark { - @include opacity(1); - } - &.error { - color: #a94442; - } - } - .form-control { - font-weight: normal; - } - .form-group { - margin-bottom: 25px; - &.less { - margin-bottom: 10px; - } - } -} - -.help-block { - font-size: 0.95em; - margin: 10px 0 0; - color: #999; -} - -.disabled-input { - background-color: #dddddd !important; -} diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss deleted file mode 100644 index d4365d1e6..000000000 --- a/web/sass-files/sass/partials/_get-link.scss +++ /dev/null @@ -1,8 +0,0 @@ -@charset "UTF-8"; - -.copy-link-confirm { - display: inline-block; - float: left; - padding: 4px 10px; - margin: 1px 0 0 10px; -}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss deleted file mode 100644 index 93cb04198..000000000 --- a/web/sass-files/sass/partials/_headers.scss +++ /dev/null @@ -1,320 +0,0 @@ -@charset "UTF-8"; - -#channel-header { - @include flex(0 0 56px); -} -.row { - &.header { - position: relative; - .channel__wrap & { - display: none; - } - } -} - -.header-dropdown__icon { - font-size: 11px; - color: inherit; - top: 3px; -} -.channel-header__info { - display: table; - table-layout: fixed; - width: 100%; - > div { - display: block; - white-space: nowrap; - word-break: break-word; - &.dropdown { - max-width: 100%; - padding-right: 1em; - float: left; - .header-dropdown__icon { - color: #777; - } - a { - text-decoration: none; - } - .modal { - white-space: normal; - } - } - &.description { - overflow: hidden; - text-overflow: ellipsis; - margin-top: 2px; - max-height: 45px; - .markdown-inline-img { - max-height: 45px - } - } - &.popover { - white-space: normal; - } - } - -} - -.channel-intro { - margin: 0 auto 35px; - padding: 0 1em 5px; - max-width: 1000px; - border-bottom: 1px solid lightgrey; - .intro-links { - margin: 0 1.5em 10px 0; - display: inline-block; - .fa { - margin-right: 5px; - } - } - .channel-intro-profile { - margin-top:5px; - margin-left: 63px; - } - .channel-intro-img { - float:left; - img { - @include border-radius(100px); - } - } - .channel-intro__title { - font-weight:600; - font-size: 20px; - margin-bottom: 15px; - } - .channel-intro__content { - background: #f7f7f7; - padding: 10px 15px; - @include border-radius(3px); - } - .channel-intro-text { - margin-top:35px; - } -} - -// Team Header in Sidebar -.sidebar--left, .sidebar--menu { - .team__header { - position: relative; - padding: 9px 10px; - @include legacy-pie-clearfix; - &:before { - @include single-transition(all, 0.05s, linear); - content: ""; - background: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; - } - &:hover { - &:before { - background: rgba(black, 0.1); - } - .user__name { - color: #fff; - } - .navbar-right { - .dropdown-toggle { - @include opacity(1); - } - } - } - .navbar-right { - font-size: 0.85em; - position: absolute; - top: 10px; - right: 22px; - z-index: 5; - .dropdown-toggle { - @include single-transition(all, 0.1s, linear); - padding: 10px; - @include opacity(0.8); - } - .dropdown-menu { - li a { - padding: 3px 20px; - text-overflow: ellipsis; - overflow: hidden; - } - } - .dropdown__icon { - fill: #fff; - } - } - .settings__link a:hover, a:visited, a:link, a:active { - text-decoration: none; - } - .user__picture { - width: 36px; - height: 36px; - float: left; - @include border-radius(36px); - margin-right: 6px; - } - .header__info { - color: #fff; - @include clearfix; - padding-left: 2px; - z-index: 1; - position: relative; - } - .team__name, .user__name { - display: block; - font-weight: 600; - font-size: 16px; - max-width: 85%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-decoration: none; - } - .team__name { - line-height: 22px; - margin-top: -2px; - float: left; - } - .user__name { - @include single-transition(all, 0.1s, linear); - font-size: 14px; - line-height: 18px; - font-weight: 400; - color: #eee; - color: rgba(#fff, 0.8); - } - > .nav { - > li { - > a { - float: right; - background: none !important; - padding: 2px; - &.dropdown-toggle { - line-height: 1.8; - font-size: 1em; - color: #fff; - } - } - } - } - } - .search__clear { - display: none; - } -} - -#navbar { - .navbar-default { - .navbar-toggle { - &.menu-toggle { - padding: 0 1em; - } - } - } -} - -.channel-header { - width:100%; - border-left: none; - font-size: 14px; - line-height: 56px; - #member_popover { - width: 50px; - color: #999; - cursor: pointer; - .fa { - margin-left: 4px; - font-size: 16px; - } - } - &.alt { - margin: 0; - th { - font-weight: normal !important; - } - td { - border: none; - } - } - th { - text-align: center; - &:first-child { - text-align: left !important; - border-left: none; - width: 100%; - padding-left: 1em; - } - &:last-child { - width: 8.9%; - } - } - td { - padding: 5px 25px 5px !important; - font-size: 13px; - text-align: center !important; - &:first-child { - text-align: left !important; - } - } - .heading { - margin: 0; - color: #555; - font-size: 1.3em; - font-weight: 600; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - display: inline-block; - vertical-align: middle; - margin-right: 4px; - } - .caret { - margin-top: 3px; - } - .more { - color: #81848b; - display: inline-block; - vertical-align: top; - text-transform: capitalize; - font-size: 13px; - } - .disabled { - color: #999; - } -} - -.channel-header__navbar { - font-size: 16px; - .heading { - margin-right: 3px; - } - .header-dropdown__icon { - top: 1px; - } -} - -.channel-header__links { - font-family: 'Open Sans', sans-serif; - height: 30px; - width: 24px; - line-height: 26px; - margin-right: 9px; - font-size: 22px; - .channel__wrap.move--left & { - position: absolute; - right: -400px; - top: 14px; - } - > a { - color: inherit; - text-decoration: none; - @include opacity(0.6); - @include single-transition(all, 0.1s, ease-in); - &:hover { - @include opacity(1); - } - &:focus { - color: inherit; - } - } -} diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss deleted file mode 100644 index e9863ddbd..000000000 --- a/web/sass-files/sass/partials/_loading.scss +++ /dev/null @@ -1,42 +0,0 @@ -@charset "UTF-8"; - -.loading-screen { - display: table; - width: 100%; - height: 100%; - padding: 60px; - text-align: center; - .loading__content { - display: table-cell; - vertical-align: middle; - font-size: 0; - h3 { - font-size: 16px; - font-weight: 400; - margin: 0 0.2em 0; - display: inline-block; - } - - .round { - background-color: #444; - width: 4px; - height: 4px; - display: inline-block; - margin: 0 2px; - opacity: 0.1; - @include border-radius(10px); - @include animation(move 0.75s infinite linear); - } - - @for $i from 1 through 3 { - .round-#{$i} { - @include animation-delay(.2s*$i); - } - } - - @include keyframes(move) { - from { opacity: 1; } - to { opacity: 0.1; } - } - } -}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss deleted file mode 100644 index f34b5ec19..000000000 --- a/web/sass-files/sass/partials/_markdown.scss +++ /dev/null @@ -1,106 +0,0 @@ -@charset "UTF-8"; - -.markdown__heading { - font-weight: 700; - line-height: 1.5; -} -.markdown__paragraph-inline { - display: inline; - + .markdown__paragraph-inline { - margin-left: 4px; - } -} -#post-list { - .markdown-inline-img { - -moz-force-broken-image-icon: 1; - max-height: 500px; - height: 500px; - } -} - -.post-body--code { - position: relative; - - pre { - margin-bottom: 0; - word-break: normal; - overflow: auto; - word-wrap: normal; - } - -} - -.post-body--code__language { - -webkit-transform: translate3d(0,0,0); - position: absolute; - top: 0; - right: 0; - color: #fff; - background: #21586D; - padding: 4px 10px 5px 10px; - font-size: 13px; - opacity: 0.7; - z-index: 5; -} - -.post__body { - hr { - height: 4px; - padding: 0; - margin: 15px 0 16px; - background-color: #e7e7e7; - border: 0 none; - @include opacity(0.2); - } - code { - white-space: pre; - } - .codespan__pre-wrap { - code { - white-space: pre-wrap; - } - } -} -.markdown__table { - background: #fff; - margin: 5px 0 10px; - th, td { - padding: 6px 13px; - border: 1px solid #ddd; - } - tbody tr { - background: #fff; - &:nth-child(2n) { - background-color: #f8f8f8; - } - } -} -blockquote { - border: none; - position: relative; - font-size: 16px; - padding: 10px 10px 10px 38px; - margin-bottom: 0; - &:before { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - content: "\f10d"; - left: 8px; - top: 5px; - position: absolute; - font-size: 20px; - @include opacity(0.6); - } -} -pre { - border: none; - margin: 5px 0; - color: inherit; -} -code { - background: #fff; - color: inherit; -} diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss deleted file mode 100644 index aa654e9e8..000000000 --- a/web/sass-files/sass/partials/_mentions.scss +++ /dev/null @@ -1,61 +0,0 @@ -@charset "UTF-8"; - -.mention { - color: #fff; - background: $primary-color; - position: relative; - z-index: 10; - padding-bottom: 2px; - @include border-radius(3px); -} - -.mentions-name { - position:relative; - width:100%; - height:36px; - padding:2px; - z-index:101; - line-height: 36px; - font-size: 13px; - cursor: pointer; - white-space: nowrap; - - .mention-align { - @include clearfix; - text-overflow: ellipsis; - width: calc(100% - 50px); - } -} - -.mentions-text { - font-color:black; -} - -.mention-img { - margin-right: 6px; - height: 32px; - width: 32px; - line-height: 36px; - display: block; - font-size: 20px; - text-align: center; - @include border-radius(32px); - - .mention-align { - max-width: 80%; - overflow: hidden; - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - } - -} - -.mention-fullname { - color: grey; - padding-left: 10px; -} - -.mention-highlight { - background-color:#fff2bb; -} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss deleted file mode 100644 index 5b02652af..000000000 --- a/web/sass-files/sass/partials/_modal.scss +++ /dev/null @@ -1,489 +0,0 @@ -@charset "UTF-8"; - -#channel_members_modal .modal-body { - min-height: 110px; -} -.modal-body { - padding: 20px 15px; - overflow: auto; -} -.more-table { - margin: 0; - table-layout: fixed; - p { - font-size: 0.9em; - overflow: hidden; - text-overflow: ellipsis; - @include opacity(0.8); - margin: 5px 0; - } - .profile-img { - -moz-border-radius: 50px; - -webkit-border-radius: 50px; - border-radius: 50px; - margin-right: 8px; - } - .more-row { - display: flex; - - .more-details { - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - } - .more-actions { - flex-grow: 0; - flex-shrink: 0; - } - } - .more-name { - font-weight: 600; - font-size: 0.95em; - white-space: nowrap; - } - .more-description { - @include opacity(0.7); - display: block; - white-space: nowrap; - } - tbody { - > tr { - &:hover td { - background: #f7f7f7; - } - &:first-child { - td { - border: none; - } - } - td { - width: 100%; - @include legacy-pie-clearfix; - text-overflow: ellipsis; - padding: 8px 15px; - &.padding--equal { - padding: 8px; - } - } - } - } -} -.modal { - width: 100%; - color: #333; - body.browser--IE & { - .modal-dialog { - @include translateY(0); - } - } - &.image_modal { - .modal-backdrop.in { - @include opacity(0.7); - } - } - .custom-textarea { - color: inherit; - border-color: #ccc; - &:focus { - border-color: #ccc; - box-shadow: none; - } - } - .btn { - font-size: 13px; - &.btn-default { - border: none; - background: transparent; - } - } - .info__label { - font-weight: 600; - text-align: right; - padding-right: 0; - } - .team-member-list { - width: 100%; - } - .remove__member { - float: right; - color: #999; - font-size: 20px; - line-height: 0; - padding: 6px; - &:hover { - color: #E56565; - } - } - .modal-dialog { - max-width: 95%; - margin-left: auto; - margin-right: auto; - } - .modal-push-down { - margin-top: 5%; - } - .modal-next-bar { - position:absolute; - top:0px; - right:0; - height:100%; - } - .modal-header { - border-radius: 0; - background: $primary-color; - color: #FFF; - padding: 15px 15px 11px; - border: 1px solid #ddd; - min-height: 56px; - @include clearfix; - .modal-title { - float: left; - font-size: 17px; - line-height: 27px; - color: #f4f4f4; - .name { - font-weight: 600; - color: #fff; - } - } - .modal-action { - padding: 0; - margin: 0; - } - button.close { - color: #fff; - @include opacity(1); - z-index: 5; - width: 30px; - height: 30px; - line-height: 30px; - @include single-transition(all, 0.25s, ease-in); - position: absolute; - right: 10px; - &:hover { - background: rgba(0, 0, 0, 0.1); - } - span { - font-family: 'Open Sans', sans-serif; - line-height: 10px; - } - } - .btn { - &.btn-primary { - float: right; - margin: -4px 25px 0 0; - position: relative; - i { - margin-right: 5px; - } - } - } - } - .no-channel-message { - text-align: center; - padding: 2em 1em; - .primary-message { - font-size: 1.25em; - } - .secondary-message { - @include opacity(0.8); - margin: 1em 0 0; - } - } - .modal-content { - border-radius: 0; - box-shadow: none; - } - .modal-chevron-icon { - top:50%; - font-size:120%; - } - .modal-prev-bar { - position:absolute; - top:0px; - left:0; - height:100%; - } - &#more_channels { - .modal-body { - padding: 0; - } - } - .modal-image { - position:relative; - width:100%; - height: 100%; - margin: 0 auto; - max-width: 100%; - - .modal-body { - @include clearfix; - height: 100%; - display: table; - table-layout: fixed; - width: 100%; - max-height: 100%; - } - - .image-wrapper { - position: relative; - max-width: 90%; - @include border-radius(3px); - display: table-cell; - vertical-align: middle; - text-align: center; - width: 100%; - - &:hover { - @include border-radius(3px 3px 0 0); - } - - &.default { - width: 100%; - height: 80%; - } - - audio, canvas, progress, video { - max-width: 100%; - height: auto; - display: block; - } - - .modal-close { - background: url("../images/close.png") no-repeat; - @include background-size(100% 100%); - width: 37px; - height: 37px; - position: absolute; - right: -13px; - top: -13px; - @include opacity(0); - -webkit-transition: opacity 0.6s; - -moz-transition: opacity 0.6s; - -o-transition: opacity 0.6s; - transition: opacity 0.6s; - cursor: pointer; - z-index: 9999; - - &.modal-close--show { - @include opacity(1); - } - - } - - > div { - min-height: 100px; - min-width: 320px; - background: #FFF; - display: inline-block; - position: relative; - - &:hover .file-playback-controls.stop { - @include opacity(1); - } - - } - - img { - max-width: 100%; - max-height: 100%; - } - - .spinner.file__loading { - z-index: 2; - position: absolute; - left: 50%; - margin-left: -16px; - top: 50%; - margin-top: -16px; - } - } - .modal-content{ - box-shadow: none; - background: rgba(0, 0, 0, 0); - width: 100%; - height: 100%; - padding: 0; - border: none; - } - .image-body { - vertical-align: middle; - display: table-cell; - text-align: center; - height: 100%; - padding: 0; - position: relative; - overflow: visible; - } - .image-control { - width: 50px; - height: 45px; - float: left; - background: url(../images/prev.png) left no-repeat; - top: 50%; - position: relative; - margin-top: -23px; - &.image-next { - float: right; - background: url(../images/next.png) left no-repeat; - } - } - .loader-image { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - } - .loader-percent { - position: absolute; - top: 55px; - bottom: 0; - left: 0; - right: 0; - margin: auto; - color:grey; - height:20px; - } - .modal-button-bar { - position:absolute; - bottom:-40px; - left:0px; - right:0px; - background-color: #222; - @include border-radius(0 0 3px 3px); - @include opacity(0); - -webkit-transition: opacity 0.6s; - -moz-transition: opacity 0.6s; - -o-transition: opacity 0.6s; - transition: opacity 0.6s; - line-height: 40px; - padding: 0 10px; - &.footer--show { - @include opacity(1); - } - .image-links { - a, span { - float: right; - } - } - .text { - vertical-align:middle; - bottom:0; - color:white; - margin-left:5px; - } - .public-link { - margin-right: 5px; - } - } - } -} - - -// Invite New Member -.invite { - margin-right: 40px; -} - -.row--invite { - margin-right: 40px; - @include clearfix; - .col-sm-6 { - padding: 0 0 0 15px; - &:first-child { - padding-left: 0; - } - } -} - -.more-modal { - - .user-list { - overflow-y: auto; - overflow-x: hidden; - margin-top: 10px; - position: relative; - } - - .table { - margin-top: 10px; - } - - .modal-body { - padding: 10px 0 20px; - overflow-x: hidden; - } - - .filter-row { - margin-top: 10px; - @include clearfix; - } - - .member-count { - margin-top: 5px; - float: right; - @include opacity(0.8); - } - - .more-purpose { - @include opacity(0.7); - } -} - -.modal-body.edit-modal-body { - overflow: visible; - - .suggestion-content { - max-height: 150px; - } -} - -.user-list { - display: flex; - flex-direction: column; - - .profile-img { - width: 38px; - height: 38px; - flex-grow: 0; - flex-shrink: 0; - } - - .user-list-item__details { - flex-grow: 1; - flex-shrink: 1; - overflow:hidden; - text-overflow: ellipsis; - - .more-name { - white-space: nowrap; - } - - .more-description { - white-space: nowrap; - } - } - - .user-list-item__actions { - flex-grow: 0; - flex-shrink: 0; - } -} - -.filtered-user-list { - display: flex; - flex-direction: column; - - .filter-row { - flex-grow: 0; - flex-shrink: 0; - } - - .user-list { - flex-grow: 1; - flex-shrink: 1; - } -} diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss deleted file mode 100644 index 28ab61ec1..000000000 --- a/web/sass-files/sass/partials/_navbar.scss +++ /dev/null @@ -1,112 +0,0 @@ -@charset "UTF-8"; - -#navbar{ - input { - margin: 0px 5px 0px 2px; - } - .navbar-default { - position: absolute; - border: none; - min-height: 45px; - background: $primary-color; - .navbar-nav { - > li { - > a { - height: 45px; - padding: 0 1.3em; - i { - line-height: 45px; - } - } - } - } - .navbar-toggle { - width: 43px; - float: left; - border-color: transparent; - border-radius: 0; - margin: 0; - padding: 0 10px; - line-height: 48px; - height: 44px; - z-index: 5; - fill: #fff; - .icon-bar { - background: #fff; - width: 21px; - } - .glyphicon-search { - top: -1px; - } - .icon--white { - color: #fff; - } - &:hover, &:active, &:focus { - background: inherit; - } - } - .navbar-brand { - padding: 0 0.5em; - height: 45px; - line-height: 45px; - float: none; - font-size: 16px; - .heading { - margin-right: 3px; - font-weight: 600; - color: #fff; - } - .header-dropdown__icon { - top: 1px; - } - .dropdown-toggle { - color: #fff; - } - .description { - display: inline-block; - margin-right: 0.5em; - color: #fff; - &.info-popover { - width: 19px; - height: 19px; - background: url("../images/info__icon.png"); - @include background-size(100% 100%); - vertical-align: middle; - top: -1px; - position: relative; - cursor: pointer; - } - } - } - } - .sidebar-channel { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - span { - white-space: nowrap; - margin-left: 2px; - } - } - .channel-create-btn { - margin-right: 15px; - } - .more-channel-table { - width: 100%; - border: 1px solid #dbdbdc; - td { - padding: 7px; - } - button { - width: 110px; - } - } -} - -.badge-notify { - background: red; - position: absolute; - left: 4px; - top: 3px; - z-index: 100; -} diff --git a/web/sass-files/sass/partials/_oauth.scss b/web/sass-files/sass/partials/_oauth.scss deleted file mode 100644 index 2bd9a0de5..000000000 --- a/web/sass-files/sass/partials/_oauth.scss +++ /dev/null @@ -1,33 +0,0 @@ -@charset "UTF-8"; - -.oauth-prompt { - background: #fff; - border: 1px solid #ddd; - padding: 1em 2em 0; - margin: 50px auto; - max-width: 90%; - width: 600px; - .prompt__heading { - font-size: em(20px); - line-height: normal; - margin: 1em 0; - display: table; - width: 100%; - > div { - display: table-cell; - vertical-align: top; - } - img { - margin-right: 15px; - } - } - .prompt__allow { - margin: 1em 0; - font-size: em(24px); - } - .prompt__buttons { - text-align: right; - border-top: 1px solid #ddd; - padding: 1.5em 0; - } -}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_perfect-scrollbar.scss b/web/sass-files/sass/partials/_perfect-scrollbar.scss deleted file mode 100755 index 0e0967d81..000000000 --- a/web/sass-files/sass/partials/_perfect-scrollbar.scss +++ /dev/null @@ -1,122 +0,0 @@ -@charset "UTF-8"; - -.ps-container { - overflow: hidden !important; } - .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail { - display: block; } - .ps-container.ps-in-scrolling { - } - .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { - background-color: #999; } - .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { - background-color: #999; } - .ps-container > .ps-scrollbar-x-rail { - display: none; - position: absolute; - /* please don't change 'position' */ - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - -webkit-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - -o-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; - bottom: 3px; - /* there must be 'bottom' for ps-scrollbar-x-rail */ - height: 8px; } - .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { - position: absolute; - /* please don't change 'position' */ - background-color: #aaa; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - -webkit-transition: background-color .2s linear; - -moz-transition: background-color .2s linear; - -o-transition: background-color .2s linear; - transition: background-color .2s linear; - bottom: 0; - /* there must be 'bottom' for ps-scrollbar-x */ - height: 8px; } - .ps-container > .ps-scrollbar-y-rail { - display: none; - position: absolute; - /* please don't change 'position' */ - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - -webkit-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - -o-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; - right: 3px; - /* there must be 'right' for ps-scrollbar-y-rail */ - width: 8px; } - .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { - position: absolute; - /* please don't change 'position' */ - background-color: #aaa; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - -webkit-transition: background-color .2s linear; - -moz-transition: background-color .2s linear; - -o-transition: background-color .2s linear; - transition: background-color .2s linear; - right: 0; - /* there must be 'right' for ps-scrollbar-y */ - width: 8px; } - .ps-container:hover.ps-in-scrolling { - } - .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { - background-color: #999; } - .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { - background-color: #999; } - .ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail { - opacity: 0.6; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; - filter: alpha(opacity=60); } - .ps-container:hover > .ps-scrollbar-x-rail:hover { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { - background-color: #999; } - .ps-container:hover > .ps-scrollbar-y-rail:hover { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { - background-color: #999; } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss deleted file mode 100644 index 209f8e27f..000000000 --- a/web/sass-files/sass/partials/_post.scss +++ /dev/null @@ -1,1013 +0,0 @@ -@charset "UTF-8"; - -.custom-textarea { - white-space:pre-wrap; - word-wrap:break-word; - background:transparent; - border:1px solid #ccc; - position:absolute; - top:0px; - height:auto; - resize: none; - line-height:20px; - min-height:36px; - overflow-x: hidden; - &:focus { - border-color: #ccc; - box-shadow: none; - } -} - -.bad-connection { - background: #ffffac !important; - color: #D04444 !important; -} - -.textarea-div { - white-space:pre-wrap; - word-wrap:normal; - color:rgba(0,0,0,0); - position:absolute; - top:0px; - word-break: break-word; - left:1px; - line-height:20px; - min-height:36px; - height:auto; - border:0; -} - -body.ios { - .textarea-div { - padding: 7px 17px 7px 15px; - -webkit-overflow-scrolling: auto; - } -} - -.textarea-div::-webkit-scrollbar { - display:none; -} - -.textarea-wrapper { - position:relative; - .textbox-preview-area { - position: absolute; - z-index: 2; - top: 0; - left: 0; - box-shadow: none; - white-space: normal; - } - .help__text { - right: 0; - position: absolute; - z-index: 3; - bottom: -23px; - font-size: 13px; - cursor: pointer; - } - .textbox-preview-link { - margin-right: 8px; - } - min-height:36px; -} - -.help_format_text { - display: none !important; - position: absolute; - bottom: -23px; - left: 0px; - overflow: hidden; - text-overflow: ellipsis; - font-size: 0.85em; - @include opacity(0); - @include single-transition(all 0.2s ease); - - b, i, code { - margin-right: 3px; - } - .textbox-preview-link{ - font-size: 13px; - cursor: pointer; - margin-left: 15px; - } -} - -.date-separator, .new-separator { - text-align: center; - height: 2em; - margin: 0; - position: relative; - z-index: 0; - &:before, &:after { - content: ""; - height: 1em; - position: absolute; - left: 0; - width: 100%; - display: none; - } - &:before { - bottom: 0; - } - &:after { - top: 0; - } - &.hovered--after { - &:before { - background: #f5f5f5; - display: block; - } - } - &.hovered--before { - &:after { - background: #f5f5f5; - display: block; - } - } - .separator__hr { - border-color: #ccc; - margin: 0; - position: relative; - z-index: 5; - top: 1em; - } - .separator__text { - line-height: 2em; - color: #555; - background: #FFF; - display: inline-block; - padding: 0 1em; - font-weight: 700; - @include border-radius(50px); - position: relative; - z-index: 5; - font-size: 13px; - } -} -.new-separator { - .separator__hr { - border-color: #FFAF53; - } - .separator__text { - color: #F80; - font-weight: normal; - } -} - -.file-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - color: #FFF; - font-size: em(20px); - font-weight: 600; - z-index: 6; - - .overlay__indent { - background-color: rgba(0, 0, 0, 0.6); - position: relative; - height: 100%; - @include clearfix; - } - - &.center-file-overlay { - .overlay__indent { - margin-left: 220px; - } - } - - &.right-file-overlay { - font-size: em(18px); - .overlay__circle { - width: 300px; - height: 300px; - margin: -150px 0 0 -150px; - } - .overlay__files { - margin: 60px auto 15px; - width: 150px; - } - } - - .overlay__circle { - background: #111; - background: rgba(black, 0.7); - width: 370px; - height: 370px; - margin: -185px 0 0 -185px; - @include border-radius(500px); - position: absolute; - top: 50%; - left: 50%; - pointer-events: none; - } - - .overlay__files { - display: block; - margin: 75px auto 20px; - } - - .overlay__logo { - position: absolute; - left: 50%; - bottom: 30px; - margin-left: -50px; - @include opacity(0.3); - } - - .fa { - display: inline-block; - font-size: 1.1em; - margin-right: 8px; - } -} - -#post-list { - @include flex(1 1 auto); - position: relative; - overflow-y: hidden; - height: 100%; - - .inactive { - display: none; - } - - .post-list-holder-by-time { - background: #fff; - overflow-y: scroll; - width: 100%; - padding: 1em 0 0; - position: absolute; - height: 100%; - -webkit-overflow-scrolling: touch; - &.active { - display: inline; - } - } - - .more-messages-text { - margin: 5px 0 10px; - display: block; - text-align: center; - outline: none; - border: none; - font-size: 13px; - } - .beginning-messages-text { - margin-top: 2px; - margin-bottom: 5px; - display: block; - text-align: center; - color: grey; - } -} - -.post-list__timestamp { - position: absolute; - top: 8px; - left: 50%; - z-index: 50; - width: 120px; - text-align: center; - background: $primary-color; - color: #fff; - @include border-radius(3px); - font-size: 12px; - line-height: 25px; - margin-left: -60px; - -webkit-font-smoothing: initial; - @include single-transition(all, 0.6s, ease); - @include translateY(-45px); - @include opacity(0); - display: none; - - &.scrolling { - @include translateY(0); - @include opacity(0.8); - } -} - -.post-list__arrows { - background-repeat: no-repeat; - width: 40px; - height: 40px; - text-align: center; - fill: #444; - position: absolute; - bottom: 0; - left: 9px; - z-index: 50; - @include opacity(0); - @include single-transition(all, 0.6s); - display: none; - - svg { - color: inherit; - width: 28px; - height: 28px; - } - - &.scrolling { - display: block; - @include opacity(1); - } -} - -.post-create__container { - form { - width: 100%; - padding: 0.5em 14px 0; - margin: 0 auto; - max-width: 1028px; - } - .post-create-body { - position: relative; - padding: 0 0 2px; - .post-body__cell { - vertical-align: top; - position: relative; - &.scroll { - .btn-file { - right: 15px; - } - .custom-textarea { - padding-right: 43px; - } - } - } - .send-button { - display: none; - cursor: pointer; - padding-right: 4px; - width: 45px; - height: 37px; - font-size: 18px; - line-height: 37px; - vertical-align: bottom; - text-align: center; - @include single-transition(all, 0.15s); - &:active { - @include opacity(0.75); - } - } - .custom-textarea { - padding-top: 8px; - padding-right: 28px; - max-height: 162px !important; - line-height: 1.5; - } - .textarea-div { - padding-top: 8px; - padding-right: 30px; - max-height: 163px !important; - overflow: auto; - line-height: 1.5; - } - .btn-file { - right: 0; - position: absolute; - top: 1px; - color: #444; - @include opacity(0.5); - @include single-transition(all, 0.15s); - font-size: 16px; - padding: 7px 9px 6px; - &:hover, &:active { - @include opacity(0.9); - box-shadow: none; - } - } - textarea { - box-shadow: none; - } - } - .post-create-footer { - @include clearfix; - padding: 3px 0 0 0; - font-size: 13px; - .control-label { - font-weight: normal; - margin-bottom: 0; - top: -5px; - position: relative; - } - } - .msg-typing { - display: block; - @include opacity(0.7); - white-space: nowrap; - margin-bottom: 5px; - overflow: hidden; - font-size: 0.95em; - text-overflow: ellipsis; - height: 20px; - } -} - -.post-list__table { - display: table; - table-layout: fixed; - width: 100%; - min-height: 100%; - height: 100%; - .post-list__content { - display: table-cell; - vertical-align: bottom; - .dropdown-menu { - &.bottom { - top: auto; - bottom: 25px; - } - } - } -} - -.post { - word-wrap: break-word; - padding: 8px .5em 0 1em; - position: relative; - max-width: 100%; - @include legacy-pie-clearfix; - - &:hover { - .dropdown, .comment-icon__container, .post__reply, .post__remove { - visibility: visible; - } - .permalink-icon { - visibility: visible; - } - } - - &.post--highlight { - background-color: beige; - } - - p { - margin: 0; - line-height: 1.6em; - font-size: 0.97em; - white-space: pre-wrap; - - &:last-child { - margin-bottom: 0.5em; - } - - } - - span { - - p:last-child { - margin-bottom: 0.5em; - } - - } - - &.post--root { - - .comment-icon__container { - visibility: visible; - } - - } - - &.same--root { - - &.same--user { - padding: 0 .5em 0 1em; - - &:hover { - - .post__time { - @include opacity(0.5); - } - - } - - .post__header { - margin: 0; - height: 0; - - .col__name { - display: none; - } - - .col__reply { - top: 6px; - } - - } - - .post__time { - top: 24px; - } - - .post__time { - font: normal normal normal FontAwesome; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - top: -2px; - left: -7px; - font-size: 11px; - line-height: 37px; - @include opacity(0); - } - - } - - &.post--comment { - - .post__link { - display: none; - } - - .post__img { - img { - display: none; - } - } - - } - - &.post--comment { - .post__body { - border-left: 4px solid #ddd; - } - } - - } - - &.other--root { - - .comment-icon__container { - - &.icon--show { - visibility: visible; - } - - } - - &.post--comment { - - .popover { - - margin-top: 84px; - - > .arrow { - top: 21px !important; - } - } - - .post__header { - - .col__reply { - top: 53px; - } - - } - - } - - } - - .post__content { - margin: 0 auto; - position: relative; - max-width: 1000px; - display: table; - width: 100%; - table-layout: fixed; - - > div { - display: table-cell; - vertical-align: top; - } - - } - - .post__header { - padding: 0; - list-style: none; - margin-bottom: 2px; - - li { - display: inline-block; - vertical-align: top; - } - - .col__name { - margin-right: 7px; - font-weight: 600; - - .user-popover { - max-width: 200px; - @include clearfix; - text-overflow: ellipsis; - white-space: nowrap; - } - - } - - .col__reply { - position: absolute; - right: 0; - top: 30px; - width: 65px; - white-space: nowrap; - } - - .permalink-popover { - min-width: 0; - - .popover-content { - padding: 5px; - } - - .form-control, .btn { - font-size: 13px; - height: 30px; - padding: 0 8px; - line-height: 30px; - } - - } - - } - - .post__img { - width: 46px; - img { - width: 36px; - height: 36px; - vertical-align: inherit; - @include border-radius(50px); - } - } - - .post__embed-container{ - display: block; - max-height: 1000px; - transition: max-height .5s ease; - overflow: hidden; - &[hidden]{ - max-height: 0; - } - } - - .dropdown { - display: inline-block; - visibility: hidden; - margin-right: 5px; - top: -1px; - - .dropdown-menu { - right: 0; - left: auto; - min-width: 130px; - padding: 2px 0; - - li { - display: block; - - } - - a { - padding: 5px 15px; - } - - } - - } - - .post__dropdown { - &:after { - content: '[...]'; - top: -1px; - position: relative; - } - } - - .post__remove { - font-family: 'Open Sans', sans-serif; - position: relative; - display: inline-block; - vertical-align: top; - right: 15px; - top: -5px; - font-size: 20px; - width: 20px; - height: 20px; - line-height: 20px; - font-weight: 600; - visibility: hidden; - color: inherit; - @include opacity(0.5); - text-decoration: none; - - &:hover { - @include opacity(0.8); - } - - } - - .post__body { - word-wrap: break-word; - padding: 0.2em 0.5em; - @include legacy-pie-clearfix; - width: calc(100% - 75px); - - p { - margin: 0 0 0.4em; - } - - p + p { - margin-top: 1.4em; - } - - li { - > p { - margin-top: 10px; - } - } - - img { - max-height: 400px; - } - - ul, ol { - margin-bottom: 0.4em; - - p { - margin-bottom: 0; - } - li ul, li ol { - padding: 0 0 0 20px - } - - li.list-item--task-list ul, li.list-item--task-list ol { - margin-left: 20px; - } - - li.list-item--task-list ul { - padding-left: 0; - } - - li:not(.list-item--task-list) li.list-item--task-list, li:not(.list-item--task-list) li.list-item--task-list ~ li { - margin-left: -20px; - } - - li input[type="checkbox"]:disabled { - vertical-align: top; - cursor: default; - } - } - - ul li.list-item--task-list, ul li.list-item--task-list ~ li { - list-style-type: none; - } - - ul li.list-item--task-list ~ li:not(.list-item--task-list) { - text-indent: 3px; - - &:before { - content: "⦁"; - margin-right: 8px; - } - } - } - - .post__link { - margin: 2px 0 5px; - font-size: 13px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .post__embed-visibility { - cursor: pointer; - font: normal normal normal 14px/1 FontAwesome; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - margin: 5px 0 10px; - display: inline-block; - - &:hover{ - text-decoration: none; - } - - &:before { - content: "\f065"; - font-size: 14px; - } - - &[data-expanded="true"]:before{ - content: "\f066"; - } - } - - .post__time{ - font-size: 0.9em; - } - - .post__time, &.post--system .post__body { - @include opacity(0.6); - } - - .post-loading-gif { - height:10px; - width:10px; - margin-top:6px; - } - - .post-fail { - color: #D58A8A; - } - - .post-waiting { - color: #999; - } - - .permalink-icon { - display: inline-block; - color: $primary-color; - visibility: hidden; - } - - .post__reply { - display: inline-block; - margin-right: 6px; - visibility: hidden; - svg { - width: 18px; - top: 3px; - fill: inherit; - position: relative; - } - } - - .comment-icon__container { - fill: $primary-color; - display: inline-block; - visibility: hidden; - - &:focus { - outline: none; - } - - &.icon--visible { - visibility: visible; - } - - svg { - height: 17px; - width: 17px; - } - - .comment-icon { - display: inline-block; - top: 2px; - position: relative; - margin-right: 3px; - fill: inherit; - } - - path { - fill: inherit; - } - - } - - .web-embed-data { - padding: 2px 0 0 10px; - background: #f9f9f9; - background: rgba(0, 0, 0, 0.05); - @include border-radius(2px); - height: 50px; - overflow: hidden; - text-overflow: ellipsis; - .embed-title { - margin: 3px 0 1px; - color: #555; - font-weight: 600; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .embed-description { - margin: 0; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - color: #888; - } - .embed-link { - display: none; - } - } -} - -.bot-indicator { - font-family: inherit; - font-size: 11px; - padding: 2px 4px; - border-radius: 2px; - font-weight: 600; - margin: 0 0 0 -4px; -} - -.attachment { - .attachment__content { - border-width: 1px; - border-style: solid; - border-radius: 4px; - padding: 2px 5px; - margin: 0 0 5px 0; - } - .attachment__thumb-pretext { - border: 0 none; - background: transparent; - } - .attachment__container { - border-left-width: 4px; - border-left-style: solid; - padding: 2px 0 2px 10px; - &.attachment__container--good { - border-left-color: #00C100; - } - &.attachment__container--warning { - border-left-color: #DEDE01; - } - &.attachment__container--danger { - border-left-color: #E40303; - } - } - .attachment__body { - float: left; - width: 80%; - padding-right: 5px; - overflow-x: auto; - overflow-y: hidden; - &.attachment__body--no_thumb { - width: 100%; - } - } - .attachment__text p:last-of-type { - display: inline-block; - } - .attachment__thumb-pretext { - margin-left: 5px; - } - .attachment__title { - margin: 5px 0; - padding: 0; - line-height: 16px; - height: 22px; - font-size: 16px; - a { - font-size: 16px; - } - } - .attachment__author-icon { - @include border-radius(50px); - margin-right: 5px; - width: 14px; - height: 14px; - } - .attachment__image { - max-width: 100%; - margin-bottom: 1em; - } - .attachment__thumb-container { - width: 20%; - float: right; - img { - max-height: 75px; - max-width: 100%; - } - } - .attachment___fields { - width: 100%; - .attachment___field-caption { - font-weight: 700; - } - .attachment___field p { - margin: 0; - } - } -} - -.permalink-text { - overflow: hidden; -} - -.permalink-popover { - min-width: 320px; - margin-left: 50px !important; -} diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss deleted file mode 100644 index 5df6fdc01..000000000 --- a/web/sass-files/sass/partials/_post_right.scss +++ /dev/null @@ -1,159 +0,0 @@ -@charset "UTF-8"; - -.post-right__container { - @include display-flex; - @include flex-direction(column); - height: 100%; - - .post-right-root-message { - padding: 1em 1em 0; - } - - .post-right-comments-container { - position: relative; - - .post { - - &:first-child { - padding-top: 15px; - } - - } - - } - - - .help_format_text { - bottom: -63px; - right: auto; - } - - .post { - - &.post--root { - padding-bottom: 1.2em; - border-bottom: 1px solid #ddd; - - .post__body { - background: transparent !important; - } - - } - - .post__header { - - .col__reply { - top: 0; - text-align: right; - } - - } - - .post__body { - width: 100%; - } - - } - - hr { - margin-bottom: 0; - border: none; - } - - .post-create__container { - width: 100%; - margin-top: 10px; - .textarea-wrapper { - min-height: 100px; - } - .btn { - margin-bottom: 10px; - } - .custom-textarea { - min-height: 100px; - } - .msg-typing { - @include opacity(0.7); - float: left; - margin-top: 3px; - font-size: 13px; - line-height: 20px; - min-width: 1px; - display: block; - height: 20px; - max-width: 230px; - } - .post-create-footer { - width: 100%; - padding: 5px 0 10px; - } - .post-right-comments-upload-in-progress { - padding: 6px 0; - color: #a8adb7; - margin-right: 10px; - } - } - -} -.post-right-header { - font-size: 1em; - text-transform: uppercase; - color: #999; - font-weight: 400; - color: #888; - height: 39px; - padding: 10px 10px 0 15px; - border-bottom: $border-gray; -} - -.post-right-root-container { - padding: 5px 10px; - border-bottom: $border-gray; -} - -.post-right-root-container { - ul { - padding-left: 0; - margin-bottom: 2px; - } -} - -.post-right-channel__name { - font-weight: 600; - margin: 0 0 10px 0; -} - -.post-right-root-container li { - display: inline; - list-style-type: none; - padding-right: 3px; -} - -.post-right-root-time { - color: #a8adb7; -} - -.post-right-create-comment-container { - padding: 5px; - margin-bottom: 18px; - position: absolute; - bottom: 0; - left: 0; - width: 100%; -} - -.post-right__scroll { - position: relative; - overflow: auto; - -webkit-overflow-scrolling: touch; - @include flex(1 1 auto); - - .preview-container { - margin-top: 5px; - } - -} - -.post-right-comment-time { - color: #a8adb7; -} diff --git a/web/sass-files/sass/partials/_print.scss b/web/sass-files/sass/partials/_print.scss Binary files differdeleted file mode 100644 index 143ec2915..000000000 --- a/web/sass-files/sass/partials/_print.scss +++ /dev/null diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss deleted file mode 100644 index aa398e916..000000000 --- a/web/sass-files/sass/partials/_search.scss +++ /dev/null @@ -1,160 +0,0 @@ -@charset "UTF-8"; - -#channel-header .search-bar__container { - padding: 0 9px 0 3px; -} -.search-bar__container { - padding: 12px 8px 0 0; - @include flex(0 0 56px); - .sidebar--right.move--left & { - padding-right: 42px; - } -} -.search__clear { - display: none; - position: absolute; - right: 0; - line-height: 45px; - margin-right: 13px; - @include single-transition(all, 0.2s, linear); - @include translateX(60px); - z-index: 5; - cursor: pointer; -} - -.search-item-snippet { - @include clearfix; - text-overflow: ellipsis; -} - -.sidebar__collapse { - cursor: pointer; - z-index: 5; - fill: #FFF; - position: absolute; - left: 0; - font-size: 35px; - width: 49px; - @include single-transition(all, 0.2s, linear); - @include translateX(0px); - text-align: center; - padding-left: 1px; - line-height: 40px; - display: none; -} -.search-item-snippet { - ul, ol { - padding-left: 20px; - } -} -.sidebar__search-icon { - position: absolute; - top: 15px; - margin-left: 10px; - font-size: 14px; - @include opacity(0.5); - display: none; - color: #777; -} -.search__form { - .search-bar__container & { - margin: 0; - border: 1px solid #DDD; - @include border-radius(2px); - width: 300px; - } - .sidebar--right & { - width: 100%; - } - .search-bar { - height: 40px; - padding-right: 30px; - box-shadow: none; - .search-bar__container & { - height: 30px; - border: none; - } - } - .glyphicon-refresh-animate { - top: 27px; - position: absolute; - right: 27px; - color: #999; - .search-bar__container & { - right: 7px; - top: 8px; - } - } -} - -.search-items-container { - position: relative; - overflow: auto; - -webkit-overflow-scrolling: touch; - @include flex(1 1 auto); - height: calc(100% - 56px); - padding-top: 10px; -} - -.search-results-header { - font-size: 1em; - text-transform: uppercase; - color: #999; - font-weight: 400; - color: #888; - height: 44px; - line-height: 44px; - padding: 0 10px 0 10px; - border-bottom: $border-gray; -} - -.search-item__container { - - .post { - padding: 0 1em 1em; - margin: 0; - - &:first-child { - border: none; - } - - .search-channel__name { - font-weight: 600; - margin: 0 0 10px 0; - } - } - -} - -.search-item__jump { - position: absolute; - right: 0; - top: 0px; - font-size: 13px; - @include opacity(0.8); - - &:hover { - @include opacity(1); - } - -} - -.search-item__comment { - position: absolute; - right: 0; - margin-right: 35px; - top: 0; -} - -.search-item-time { - @include opacity(0.7); - font-size: 0.9em; -} - -.search-results-none { - padding: 10px; -} - -.search-highlight { - background-color: #FFF2BB; -}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_statistics.scss b/web/sass-files/sass/partials/_statistics.scss deleted file mode 100644 index f86740270..000000000 --- a/web/sass-files/sass/partials/_statistics.scss +++ /dev/null @@ -1,87 +0,0 @@ -@charset "UTF-8"; - -.team_statistics { - .total-count { - margin: 1em 0; - text-align: center; - background: #fff; - border: 1px solid #ddd; - width: 100%; - @include border-radius(3px); - - .title { - font-weight: 400; - padding: 7px 10px; - border-bottom: 1px solid #ddd; - text-align: left; - font-size: 13px; - - .fa { - float: right; - margin: 0px 0 0; - color: #555; - font-size: 16px; - } - - } - - .content { - font-size: 30px; - font-weight: 600; - color: #555; - padding: 0.3em 0 0.35em; - overflow: auto; - } - - } - - .total-count--day { - width: 760px; - height: 275px; - border: 1px solid #ddd; - padding: 5px 10px 10px 10px; - margin: 10px 10px 10px 10px; - background: #fff; - clear: both; - - > div { - font-size: 18px; - font-weight: 300; - } - } - - .recent-active-users { - - table { - width: 100%; - table-layout: fixed; - } - - .content { - max-height: 400px; - overflow: auto; - padding: 0; - } - - tr { - &:first-child { - td { - border-top: none; - } - } - td { - font-weight: 400; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 13px; - border-left: 1px solid #ddd; - border-top: 1px solid #ddd; - padding: 5px 5px 6px; - @include clearfix; - &:first-child { - border-left: none; - } - } - } - } -} diff --git a/web/sass-files/sass/partials/_suggestion_list.scss b/web/sass-files/sass/partials/_suggestion_list.scss deleted file mode 100644 index 28c113c6d..000000000 --- a/web/sass-files/sass/partials/_suggestion_list.scss +++ /dev/null @@ -1,67 +0,0 @@ -@charset "UTF-8"; - -.suggestion-list { - width: 100%; - z-index: 100; - @extend %popover-box-shadow; -} - -.suggestion-list--top { - position: absolute; -} - -.suggestion-content { - width: 100%; - max-height: 292px; - background-color: #fff; - border: $border-gray; - overflow-x: hidden; - overflow-y: scroll; -} - -.suggestion-content--top { - position: absolute; - bottom: 0; -} - -.suggestion--selected { - // set by theme code -} - -.command-name { - position: relative; - width: 100%; - line-height: 24px; - padding: 5px 10px 8px; - z-index: 101; - font-size: 0.95em; - border-bottom: 1px solid #ddd; - - .command__desc { - margin-left: 5px; - @include opacity(0.5); - line-height: normal; - } -} - -.command-desc { - color: #a7a8ab; -} - -.emoticon-suggestion { - @include clearfix; - width: 100%; - height: 30px; - cursor: pointer; - font-size: 13px; - line-height: 30px; -} - -.emoticon-suggestion__image { - width: 20px; - height: 20px; - margin: 6px 6px 0 5px; - padding: 0; - text-align: center; - vertical-align: top; -} diff --git a/web/sass-files/sass/partials/_tooltips.scss b/web/sass-files/sass/partials/_tooltips.scss deleted file mode 100644 index c2de3c590..000000000 --- a/web/sass-files/sass/partials/_tooltips.scss +++ /dev/null @@ -1,7 +0,0 @@ -@charset "UTF-8"; - -#recentMentionsTooltip { - .tooltip-arrow { - margin-left: 10px; - } -}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_variables.scss b/web/sass-files/sass/partials/_variables.scss deleted file mode 100644 index 514be2e8b..000000000 --- a/web/sass-files/sass/partials/_variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -@charset "UTF-8"; - -@function em($pixels, $context: 14px) { - @return #{$pixels/$context}em -} - -// Color Variables -$primary-color: #2389D7; -$primary-color--hover: darken(#2389D7, 5%); -$body-bg: #e9e9e9; -$header-bg: #f9f9f9; -$border-gray: 1px solid #ddd; - -%popover-box-shadow { - @include box-shadow(rgba(black, 0.175) 1px -3px 12px); -} diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss deleted file mode 100644 index 43f30ce84..000000000 --- a/web/sass-files/sass/partials/_videos.scss +++ /dev/null @@ -1,66 +0,0 @@ -@charset "UTF-8"; - -.video-div { - position:relative; - max-width: 480px; - margin-bottom: 8px; - .video-thumbnail { - max-width: 100%; - height: auto; - } - .block { - background-color:rgba(0,0,0,0.5); - border-radius:10px; - position:absolute; - top: 50%; - left: 50%; - margin-top: -100px; - width: 200px; - margin: -75px 0 0 -100px; - height: 150px; - } -} - -.video-type { - @include opacity(0.8); - font-size:15px; - margin:0px; - padding:0px; -} - -.video-title { - font-size:15px; - margin-top:3px; -} -.play-button { - width:100px; - height:100px; - position:absolute; - top:26px; - right:51px; - border:4px solid; - border-color:rgba(255,255,255,0.4); - border-radius:14px; -} -.play-button span { - position:absolute; - top:10px; - left:20px; - width:0; - height:0; - border-top:36px solid transparent; - border-bottom:36px solid transparent; - border-left:60px solid rgba(255,255,255,0.4); -} - -.img-div { - -moz-force-broken-image-icon: 1; - position:relative; - max-width: 450px; - max-height: 500px; - margin-bottom: 8px; - border-radius:5px; - &.placeholder { - height: 500px; - } -} diff --git a/web/sass-files/sass/partials/_welcome.scss b/web/sass-files/sass/partials/_welcome.scss deleted file mode 100644 index 0be43d29c..000000000 --- a/web/sass-files/sass/partials/_welcome.scss +++ /dev/null @@ -1,15 +0,0 @@ -@charset "UTF-8"; - -.welcome-info { - max-width: 550px; - margin-top: 50px; - margin-left: 25px; - h1 { - font-size: 200%; - margin-bottom: 20px; - } - p { - font-size: 125%; - margin-top: 12px; - } -}
\ No newline at end of file diff --git a/web/sass-files/sass/responsive/_desktop.scss b/web/sass-files/sass/responsive/_desktop.scss new file mode 100644 index 000000000..dcabb807f --- /dev/null +++ b/web/sass-files/sass/responsive/_desktop.scss @@ -0,0 +1,65 @@ +@charset 'UTF-8'; + +@media screen and (max-width: 1800px) { + .inner-wrap { + &.move--left { + .date-separator, + .new-separator { + &.hovered--comment { + &:before, + &:after { + background: none; + } + } + } + } + } +} + +@media screen and (max-width: 1440px) { + .date-separator, + .new-separator { + &.hovered--comment { + &:before, + &:after { + background: none !important; + } + } + } +} + +@media screen and (max-width: 1140px) { + .tip-overlay { + &.tip-overlay--chat { + margin: -10px 0 0 -10px; + .arrow { + right: 15px; + left: auto; + } + } + } + .inner-wrap { + &.move--left { + .file-overlay { + font-size: em(18px); + + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } + } + } + } +} + +@media (min-width: 992px) { + .modal-lg { + width: 700px; + } +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/responsive/_mobile.scss index 06ce17041..a452cb420 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/responsive/_mobile.scss @@ -1,103 +1,18 @@ -@charset "UTF-8"; - -@media screen and (max-width: 1800px) { - .inner__wrap { - &.move--left { - .date-separator, .new-separator { - &.hovered--comment { - &:before, &:after { - background: none; - } - } - } - } - } -} -@media screen and (max-width: 1440px) { - .date-separator, .new-separator { - &.hovered--comment { - &:before, &:after { - background: none !important; - } - } - } -} - -@media screen and (max-width: 1140px) { - .tip-overlay { - &.tip-overlay--chat { - margin: -10px 0 0 -10px; - .arrow { - right: 15px; - left: auto; - } - } - } - .inner__wrap { - &.move--left { - .file-overlay { - font-size: em(18px); - .overlay__circle { - width: 300px; - height: 300px; - margin: -150px 0 0 -150px; - } - .overlay__files { - margin: 60px auto 15px; - width: 150px; - } - } - } - } -} - -@media screen and (max-width: 960px) { - - .sidebar--right { - z-index: 5; - @include translateX(100%); - @include single-transition(all, 0.5s, ease); - - &.move--left { - @include translateX(0); - - .search-bar__container { - padding-right: 8px; - } - - } - - } - - .inner__wrap { - - &.move--left { - margin-right: 0; - - .channel-header__links { - position: relative; - right: auto; - top: auto; - } - - } - - } - -} +@charset 'UTF-8'; @media screen and (max-width: 768px) { - .signup-team__container { font-size: 1em; } - .date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after { + .date-separator.hovered--before:after, + .date-separator.hovered--after:before, + .new-separator.hovered--after:before, + .new-separator.hovered--before:after { background: none !important; } .post { - .post__dropdown { line-height: 9px; text-decoration: none; @@ -111,7 +26,6 @@ content: '...'; top: -3px; } - } .comment-icon__container { @@ -121,11 +35,9 @@ &.icon--show { display: inline-block; } - } .post-list__content & { - &:hover { background: transparent; } @@ -133,10 +45,10 @@ .comment-icon__container { visibility: visible; } - } - .dropdown, .post__reply { + .dropdown, + .post__reply { visibility: visible; } @@ -151,19 +63,15 @@ svg { top: 1px; } - } &.other--root .post__reply { - &.post__reply--hide { visibility: hidden; } - } .post__header { - .col__reply { width: 65px; } @@ -174,21 +82,15 @@ .user-popover { max-width: 130px; } - } - } &.same--root { - &.same--user { - .post__time { display: none; } - } - } .post__img { @@ -199,7 +101,6 @@ height: 32px; } } - } .post-image__column { @@ -208,7 +109,8 @@ } .textarea-wrapper { - .textbox-preview-link, .textbox-help-link { + .textbox-preview-link, + .textbox-help-link { display: none; } } @@ -217,13 +119,16 @@ min-height: 100px; } } + .img-div { max-width: 100%; } + .tip-div { left: 15px; right: auto; } + .tip-overlay { &.tip-overlay--chat { margin-left: 10px; @@ -232,8 +137,10 @@ } } } + .file-details__container { display: block; + .file-details__preview { display: block; width: 100%; @@ -245,14 +152,17 @@ height: 64px; } } + .file-details { width: 100%; height: auto; } } + .search-help-popover.visible { visibility: hidden; } + .modal-direct-channels { .member-count { float: none; @@ -260,76 +170,95 @@ display: block; } } + .file-overlay { font-size: em(18px); + &.center-file-overlay { .overlay__indent { margin-left: 0; } } + .overlay__circle { width: 300px; height: 300px; margin: -150px 0 0 -150px; } + .overlay__files { margin: 60px auto 15px; width: 150px; } } - .date-separator, .new-separator { + + .date-separator, + .new-separator { &.hovered--after { &:before { background: none; } } + &.hovered--before { &:after { background: none; } } } + .post-list__timestamp { display: block; } + .signup-team__container { padding: 30px 0; margin-bottom: 30px; - font-size: 0.9em; + font-size: .9em; + .signup-team__name { font-size: 2em; } + .btn.btn-full { padding-left: 10px; } + .btn { - .icon, .fa { + .icon, + .fa { margin-right: 6px; } } } + .row--invite { .col-sm-6 { padding: 0; } } + .modal { .info__label { text-align: left; padding-bottom: 5px; } + .modal-header { .modal-action { margin-top: 10px; } + button.close { font-weight: normal; font-size: 27px; } + .modal-title { float: none; max-width: 90%; } + .btn { &.btn-primary { display: block; @@ -339,58 +268,71 @@ } } } + .settings-modal { &.display--content { .modal-header { display: none; } + .settings-table { display: block; + .settings-content { &.minimize-settings { display: block; } + .section-min:hover { background: none; } + .no-padding--left { padding-left: 15px; } } + .settings-links { display: none; } + .modal-header { display: block; position: absolute; top: 0; width: 100%; z-index: 5; + .modal-title { width: 100%; text-align: center; } } + .user-settings { .tab-header { display: none; } + .divider-dark.first { display: none; } } } } + .settings-table { padding: 0; .nav { - &.position--top { - top: auto; - } position: relative; top: auto; width: 100%; + + &.position--top { + top: auto; + } } + .settings-content { .section-edit { position: absolute; @@ -401,6 +343,7 @@ display: inline-block; } } + &.minimize-settings { padding: 0; display: none; @@ -408,10 +351,12 @@ padding: 70px 20px 30px; } } + .section-min:hover { background: none !important; } } + .nav { > li { > a { @@ -419,6 +364,7 @@ font-size: 1.1em; line-height: 2.7; color: #555; + .glyphicon { margin-left: 7px; } @@ -428,28 +374,36 @@ } } } + .post-create__container { .post-right__container & { padding: 0 1em; + .msg-typing { display: none; } } + form { - padding: 0.5em 0; + padding: .5em 0; } + .post-create-footer { padding: 0 1em; + .msg-typing { display: none; } + .control-label { top: 0; } } + .post-create-body { display: table; width: 100%; + .post-body__cell { display: table-cell; padding-left: 45px; @@ -457,6 +411,7 @@ padding-left: 0; } } + .app__content & { .btn-file { width: 45px; @@ -467,70 +422,85 @@ top: auto; } } + .send-button { display: table-cell; } } } - .preview-container { + + .file-preview__container { margin: 5px 0 0; - .preview-div { - margin-top: 0; + } + + .file-preview { + margin-top: 0; + } + + .file-preview__remove { + width: 28px; + height: 28px; + left: auto; + right: 0; + top: 0; + background: #444; + background: rgba(#000, .5); + text-align: center; + + &:after { + display: none; } - .remove-preview { - width: 28px; - height: 28px; - left: auto; - right: 0; - top: 0; - background: #444; - background: rgba(#000, 0.5); - text-align: center; - &:after { - display: none; - } - i { - line-height: 29px; - top: auto; - right: auto; - position: relative; - font-size: 16px; - } + + i { + line-height: 29px; + top: auto; + right: auto; + position: relative; + font-size: 16px; } } + #navbar { .navbar-default { .navbar-header { float: none; margin: 0 -15px; + .dropdown__icon { - background: url("../images/dropdown-icon.png"); + background: url('../images/dropdown-icon.png'); width: 4px; height: 16px; @include background-size(100% 100%); display: inline-block; } } + .navbar-toggle { display: block; } + .navbar-brand { white-space: nowrap; } } } + body { &.white { - .inner__wrap { - >.row.content { + .inner-wrap { + > .row.content { margin-bottom: -185px; } } } } - .footer, .footer-pane, .footer-push { + + .footer, + .footer-pane, + .footer-push { height: 187px; } + .footer-pane { .footer-link { padding: 0; @@ -542,23 +512,28 @@ } } } + .search__clear { display: block; } + .search-bar__container { padding: 0; @include flex(0 0 44px); - background: $primary-color; + background: $color--primary; color: #fff; + &.focused { .sidebar__collapse { @include translateX(-45px); } + .search__form { @include translateX(-45px); padding-left: 55px; padding-right: 24px; } + .search__clear { @include translateX(0px); } @@ -569,16 +544,19 @@ padding: 7px 20px 0 49px; height: 45px; position: relative; - @include single-transition(all, 0.2s, linear); + @include single-transition(all, .2s, linear); + .glyphicon-refresh-animate { right: 33px; top: 15px; - color: #aaa; + color: #fff; + color: rgba(255,255,255,.5); } + .form-control { border: none; padding: 0 10px 0 31px; - background: rgba(black, 0.2); + background: rgba(black, .2); @include border-radius(3px); color: #444; background: #fff; @@ -586,35 +564,42 @@ } } .sidebar--menu { - @include single-transition(transform, 0.5s, ease); + @include single-transition(transform, .5s, ease); @include translate3d(290px, 0, 0); width: 290px; border: none; display: block; + &.move--left { @include translate3d(0, 0, 0); } } + .sidebar--left { - @include single-transition(transform, 0.5s, ease); + @include single-transition(transform, .5s, ease); @include translate3d(-290px, 0, 0); width: 290px; border: none; &.sidebar--padded { padding-top: 0; } + &.move--right { @include translate3d(0, 0, 0); } + > div { padding-bottom: 70px; } + .nav-pills__unread-indicator-bottom { bottom: 10px; } + .badge { top: 13px; } + .team__header { @include clearfix; pointer-events: none; @@ -630,21 +615,24 @@ .navbar-right { display: none; } - } + .search__form { display: block; } + .nav { li { &.dropdown.open { padding-bottom: 25px; + ul { clear: both; - background: #FFF; + background: #fff; border-radius: 3px; top: 5px; position: relative; + li { a { line-height: 30px; @@ -652,83 +640,101 @@ } } } + h4 { margin: 16px 0 8px; } + > a { font-size: 15px; margin: 0; line-height: 2.5; - &:hover, &:focus { + + &:hover, + &:focus { background: transparent; } + &.has-close { .btn-close { width: 40px; text-align: center; right: 0; display: block; - @include opacity(0.5); + @include opacity(.5); } } } } } } + .sidebar--right { width: 100%; right: 0; @include translate3d(100%, 0, 0); z-index: 5; + &.move--left { @include translate3d(0, 0, 0); } - .sidebar__collapse, .sidebar__search-icon { + + .sidebar__collapse, + .sidebar__search-icon { display: block; } + .sidebar--right__close { display: none; } + .sidebar-right__body { height: calc(100% - 44px); } } + .search-items-container { height: calc(100% - 44px); } - .inner__wrap { - @include single-transition(all, 0.5s, ease); + + .inner-wrap { + @include single-transition(all, .5s, ease); + &.move--right { @include translate3d(290px, 0, 0); + &:before { z-index: 9999; - content: ""; + content: ''; width: 100%; height: 100%; left: -15px; top: 0; position: absolute; - background: rgba(0, 0, 0, 0.4); + background: rgba(0, 0, 0, .4); } } + &.move--left-small { @include translate3d(-290px, 0, 0); &:before { z-index: 9999; - content: ""; + content: ''; width: 100%; height: 100%; right: -15px; top: 0; position: absolute; - background: rgba(0, 0, 0, 0.4); + background: rgba(0, 0, 0, .4); } } + &.move--left { margin: 0; @include translate3d(-100%, 0, 0); } } + .modal { .modal-image { .image-wrapper { @@ -736,15 +742,18 @@ font-size: 12px; min-width: 250px; } + .modal-close { @include opacity(1); } } + .modal-button-bar { @include opacity(1); } } } + .app__content { padding-top: 45px; margin: 0; @@ -756,7 +765,6 @@ } } - .channel__wrap { .row { &.header { @@ -769,18 +777,22 @@ padding: 9px 21px 10px 10px !important; } - .post-image__column .post__image .file-playback-controls.stop, .image-wrapper > a .file-playback-controls.stop { + .post-image__column .post-image .file-playback__controls.stop, + .image-wrapper > a .file-playback__controls.stop { @include opacity(1); } } + @media screen and (max-width: 640px) { .access-history__table { > div { display: block; } + .access__report { margin: 0 0 15px 15px; } + .access__date { div { margin-bottom: 15px; @@ -791,21 +803,22 @@ > div { display: block; } + .activity-log__report { width: 100%; } + .activity-log__action { text-align: left; margin-top: 10px; } } } + @media screen and (max-width: 480px) { .modal { .settings-modal { - .settings-table { - .security-links { margin-bottom: 10px; display: block; @@ -813,21 +826,20 @@ &:last-child { margin-bottom: 0; } - } - } - } } .tip-overlay.tip-overlay--sidebar { min-height: 350px; } + .modal { .modal-body { max-height: 70%; } + .settings-modal { &.display--content { .modal-body { @@ -836,29 +848,36 @@ } } } + .member-div { padding: 8px 0; - .member-drop, .member-role { + + .member-drop, + .member-role { position: relative; margin: 0px 0 0 44px; padding: 5px 0; top: 0; right: 0; } - .open>.dropdown-menu { + + .open > .dropdown-menu { left: 0; right: auto; } } + .sidebar--left { @include translate3d(-260px, 0, 0); width: 260px; } - .inner__wrap { + + .inner-wrap { &.move--right { @include translate3d(260px, 0, 0); } } + .modal { .modal-image { .modal-button-bar { @@ -869,24 +888,12 @@ } } - -@media (min-width: 992px){ - .modal-lg { - width: 700px; - } -} - -@media screen and (min-width: 768px) { - .second-bar { - display: none; - } -} - @media screen and (max-height: 640px) { .signup-team__container { padding: 30px 0; margin-bottom: 30px; - font-size: 0.9em; + font-size: .9em; + .signup-team__name { font-size: 2em; } diff --git a/web/sass-files/sass/responsive/_module.scss b/web/sass-files/sass/responsive/_module.scss new file mode 100644 index 000000000..a799c145e --- /dev/null +++ b/web/sass-files/sass/responsive/_module.scss @@ -0,0 +1,4 @@ +@charset 'UTF-8'; +@import 'desktop'; +@import 'tablet'; +@import 'mobile'; diff --git a/web/sass-files/sass/responsive/_tablet.scss b/web/sass-files/sass/responsive/_tablet.scss new file mode 100644 index 000000000..14641cfa5 --- /dev/null +++ b/web/sass-files/sass/responsive/_tablet.scss @@ -0,0 +1,35 @@ +@charset 'UTF-8'; + +@media screen and (max-width: 960px) { + .sidebar--right { + z-index: 5; + @include translateX(100%); + @include single-transition(all, .5s, ease); + + &.move--left { + @include translateX(0); + + .search-bar__container { + padding-right: 8px; + } + } + } + + .inner-wrap { + &.move--left { + margin-right: 0; + + .channel-header__links { + position: relative; + right: auto; + top: auto; + } + } + } +} + +@media screen and (min-width: 768px) { + .second-bar { + display: none; + } +}
\ No newline at end of file diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index 7bf3574d2..4a49e439e 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -5,55 +5,14 @@ * Import this file using the following HTML or equivalent: * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ -// Base Css @import "compass/utilities"; @import "compass/css3"; -@import "partials/variables"; -@import "partials/perfect-scrollbar"; -@import "partials/font-awesome"; -@import "partials/base"; -@import "partials/colorpicker"; -// Channel Css -@import "partials/headers"; -@import "partials/footer"; -@import "partials/content"; -@import "partials/popover"; -@import "partials/post"; -@import "partials/post_right"; -@import "partials/navbar"; -@import "partials/search"; -@import "partials/sidebar--left"; -@import "partials/sidebar--right"; -@import "partials/sidebar--menu"; -@import "partials/admin-console"; -@import "partials/signup"; -@import "partials/files"; -@import "partials/videos"; -@import "partials/settings"; -@import "partials/modal"; -@import "partials/forms"; -@import "partials/mentions"; -@import "partials/error"; -@import "partials/error-bar"; -@import "partials/loading"; -@import "partials/get-link"; -@import "partials/markdown"; -@import "partials/tutorial"; -@import "partials/statistics"; -@import "partials/suggestion_list"; - -// Elements -@import "partials/tooltips"; - -// Responsive Css -@import "partials/responsive"; - -// Docs Css -@import "partials/docs"; - -// Standalone Css -@import "partials/oauth"; - -// Print -@import "partials/print";
\ No newline at end of file +// styles.scss +@import 'vendors/module'; +@import 'utils/module'; +@import 'base/module'; +@import 'pages/module'; +@import 'components/module'; +@import 'layout/module'; +@import 'responsive/module';
\ No newline at end of file diff --git a/web/sass-files/sass/utils/_animations.scss b/web/sass-files/sass/utils/_animations.scss new file mode 100644 index 000000000..767e30847 --- /dev/null +++ b/web/sass-files/sass/utils/_animations.scss @@ -0,0 +1,19 @@ +@charset 'UTF-8'; + +@-webkit-keyframes spin2 { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + } +} + +@keyframes spin { + from { + transform: scale(1) rotate(0deg); + } + to { + transform: scale(1) rotate(360deg); + } +} diff --git a/web/sass-files/sass/utils/_functions.scss b/web/sass-files/sass/utils/_functions.scss new file mode 100644 index 000000000..9013920fa --- /dev/null +++ b/web/sass-files/sass/utils/_functions.scss @@ -0,0 +1,9 @@ +@charset "UTF-8"; + +@function em($pixels, $context: 14px) { + @return #{$pixels/$context}em +} + +%popover-box-shadow { + @include box-shadow(rgba(black, .175) 1px -3px 12px); +}
\ No newline at end of file diff --git a/web/sass-files/sass/utils/_mixins.scss b/web/sass-files/sass/utils/_mixins.scss new file mode 100644 index 000000000..28723e1a5 --- /dev/null +++ b/web/sass-files/sass/utils/_mixins.scss @@ -0,0 +1,8 @@ +@charset 'UTF-8'; + +@mixin file-icon($path) { + background: #fff url($path); + background-position: center; + background-repeat: no-repeat; + @include background-size(60px auto); +} diff --git a/web/sass-files/sass/utils/_module.scss b/web/sass-files/sass/utils/_module.scss new file mode 100644 index 000000000..e7f0c0c46 --- /dev/null +++ b/web/sass-files/sass/utils/_module.scss @@ -0,0 +1,5 @@ +// Only for combining all the files in this folder +@import 'variables'; +@import 'animations'; +@import 'functions'; +@import 'mixins'; diff --git a/web/sass-files/sass/utils/_variables.scss b/web/sass-files/sass/utils/_variables.scss new file mode 100644 index 000000000..065c37a17 --- /dev/null +++ b/web/sass-files/sass/utils/_variables.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// Color Variables +$color--primary: rgb(35, 137, 215); +$color--primary--hover: darken($color--primary, 10%); +$bg--gray: rgb(245, 245, 245); +$bg--white: rgb(255, 255, 255); + +// Page Variables +$border-gray: 1px solid #ddd; + +// Random variables +$border-rad: 1px; diff --git a/web/sass-files/sass/vendors/_colorpicker.scss b/web/sass-files/sass/vendors/_colorpicker.scss new file mode 100644 index 000000000..291145e80 --- /dev/null +++ b/web/sass-files/sass/vendors/_colorpicker.scss @@ -0,0 +1,253 @@ +@charset 'UTF-8'; + +/*! + * Bootstrap Colorpicker + * http://mjolnic.github.io/bootstrap-colorpicker/ + * + * Originally written by (c) 2012 Stefan Petre + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0.txt + * + */ + +.colorpicker-saturation { + float: left; + width: 100px; + height: 100px; + cursor: crosshair; + background-image: url('../images/bootstrap-colorpicker/saturation.png'); +} + +.colorpicker-saturation i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 5px; + height: 5px; + margin: -4px 0 0 -4px; + border: 1px solid #000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.colorpicker-saturation i b { + display: block; + width: 5px; + height: 5px; + border: 1px solid #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.colorpicker-hue, +.colorpicker-alpha { + float: left; + width: 15px; + height: 100px; + margin-bottom: 4px; + margin-left: 4px; + cursor: row-resize; +} + +.colorpicker-hue i, +.colorpicker-alpha i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: 1px; + margin-top: -1px; + background: #000; + border-top: 1px solid #fff; +} + +.colorpicker-hue { + background-image: url('../images/bootstrap-colorpicker/hue.png'); +} + +.colorpicker-alpha { + display: none; + background-image: url('../images/bootstrap-colorpicker/alpha.png'); +} + +.colorpicker-saturation, +.colorpicker-hue, +.colorpicker-alpha { + background-size: contain; +} + +.colorpicker { + top: 0; + left: 0; + z-index: 2500; + min-width: 130px; + padding: 4px; + margin-top: 1px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + *zoom: 1; +} + +.colorpicker:before, +.colorpicker:after { + display: table; + line-height: 0; + content: ''; +} + +.colorpicker:after { + clear: both; +} + +.colorpicker:before { + position: absolute; + top: -7px; + left: 6px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, .2); + content: ''; +} + +.colorpicker:after { + position: absolute; + top: -6px; + left: 7px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + border-left: 6px solid transparent; + content: ''; +} + +.colorpicker div { + position: relative; +} + +.colorpicker.colorpicker-with-alpha { + min-width: 140px; +} + +.colorpicker.colorpicker-with-alpha .colorpicker-alpha { + display: block; +} + +.colorpicker-color { + height: 10px; + margin-top: 5px; + clear: both; + background-image: url('../images/bootstrap-colorpicker/alpha.png'); + background-position: 0 100%; +} + +.colorpicker-color div { + height: 10px; +} + +.colorpicker-selectors { + display: none; + height: 10px; + margin-top: 5px; + clear: both; +} + +.colorpicker-selectors i { + float: left; + width: 10px; + height: 10px; + cursor: pointer; +} + +.colorpicker-selectors i + i { + margin-left: 3px; +} + +.colorpicker-element .input-group-addon i, +.colorpicker-element .add-on i { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: text-top; + cursor: pointer; +} + +.colorpicker.colorpicker-inline { + position: relative; + z-index: auto; + display: inline-block; + float: none; +} + +.colorpicker.colorpicker-horizontal { + width: 110px; + height: auto; + min-width: 110px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-saturation { + margin-bottom: 4px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-color { + width: 100px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue, +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + float: left; + width: 100px; + height: 15px; + margin-bottom: 4px; + margin-left: 0; + cursor: col-resize; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue i, +.colorpicker.colorpicker-horizontal .colorpicker-alpha i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 1px; + height: 15px; + margin-top: 0; + background: #fff; + border: none; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue { + background-image: url('../images/bootstrap-colorpicker/hue-horizontal.png'); +} + +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + background-image: url('../images/bootstrap-colorpicker/alpha-horizontal.png'); +} + +.colorpicker.colorpicker-hidden { + display: none; +} + +.colorpicker.colorpicker-visible { + display: block; +} + +.colorpicker-inline.colorpicker-visible { + display: inline-block; +} + +.colorpicker-right:before { + right: 6px; + left: auto; +} + +.colorpicker-right:after { + right: 7px; + left: auto; +} diff --git a/web/sass-files/sass/partials/_font-awesome.scss b/web/sass-files/sass/vendors/_font-awesome.scss index 74580a7e8..49ab318cd 100644 --- a/web/sass-files/sass/partials/_font-awesome.scss +++ b/web/sass-files/sass/vendors/_font-awesome.scss @@ -1,4 +1,4 @@ -@charset "UTF-8"; +@charset 'UTF-8'; /*! * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome @@ -7,1797 +7,1797 @@ /* FONT PATH * -------------------------- */ @font-face { - font-family: 'FontAwesome'; - src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); - src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'FontAwesome'; + src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); + src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); + font-weight: normal; + font-style: normal; } .fa { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - transform: translate(0, 0); + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transform: translate(0, 0); } /* makes the font 33% larger relative to the icon container */ .fa-lg { - font-size: 1.33333333em; - line-height: 0.75em; - vertical-align: -15%; + font-size: 1.33333333em; + line-height: .75em; + vertical-align: -15%; } .fa-2x { - font-size: 2em; + font-size: 2em; } .fa-3x { - font-size: 3em; + font-size: 3em; } .fa-4x { - font-size: 4em; + font-size: 4em; } .fa-5x { - font-size: 5em; + font-size: 5em; } .fa-fw { - width: 1.28571429em; - text-align: center; + width: 1.28571429em; + text-align: center; } .fa-ul { - padding-left: 0; - margin-left: 2.14285714em; - list-style-type: none; + padding-left: 0; + margin-left: 2.14285714em; + list-style-type: none; } .fa-ul > li { - position: relative; + position: relative; } .fa-li { - position: absolute; - left: -2.14285714em; - width: 2.14285714em; - top: 0.14285714em; - text-align: center; + position: absolute; + left: -2.14285714em; + width: 2.14285714em; + top: .14285714em; + text-align: center; } .fa-li.fa-lg { - left: -1.85714286em; + left: -1.85714286em; } .fa-border { - padding: .2em .25em .15em; - border: solid 0.08em #eeeeee; - border-radius: .1em; + padding: .2em .25em .15em; + border: solid .08em #eee; + border-radius: .1em; } .pull-right { - float: right; + float: right; } .pull-left { - float: left; + float: left; } .fa.pull-left { - margin-right: .3em; + margin-right: .3em; } .fa.pull-right { - margin-left: .3em; + margin-left: .3em; } .fa-spin { - -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; } .fa-pulse { - -webkit-animation: fa-spin 1s infinite steps(8); - animation: fa-spin 1s infinite steps(8); + -webkit-animation: fa-spin 1s infinite steps(8); + animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } } @keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } } .fa-rotate-90 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } .fa-rotate-180 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } .fa-rotate-270 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } .fa-flip-horizontal { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); - -webkit-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); } .fa-flip-vertical { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); - -webkit-transform: scale(1, -1); - -ms-transform: scale(1, -1); - transform: scale(1, -1); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { - filter: none; + filter: none; } .fa-stack { - position: relative; - display: inline-block; - width: 2em; - height: 2em; - line-height: 2em; - vertical-align: middle; + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { - position: absolute; - left: 0; - width: 100%; - text-align: center; + position: absolute; + left: 0; + width: 100%; + text-align: center; } .fa-stack-1x { - line-height: inherit; + line-height: inherit; } .fa-stack-2x { - font-size: 2em; + font-size: 2em; } .fa-inverse { - color: #ffffff; + color: #fff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-glass:before { - content: "\f000"; + content: '\f000'; } .fa-music:before { - content: "\f001"; + content: '\f001'; } .fa-search:before { - content: "\f002"; + content: '\f002'; } .fa-envelope-o:before { - content: "\f003"; + content: '\f003'; } .fa-heart:before { - content: "\f004"; + content: '\f004'; } .fa-star:before { - content: "\f005"; + content: '\f005'; } .fa-star-o:before { - content: "\f006"; + content: '\f006'; } .fa-user:before { - content: "\f007"; + content: '\f007'; } .fa-film:before { - content: "\f008"; + content: '\f008'; } .fa-th-large:before { - content: "\f009"; + content: '\f009'; } .fa-th:before { - content: "\f00a"; + content: '\f00a'; } .fa-th-list:before { - content: "\f00b"; + content: '\f00b'; } .fa-check:before { - content: "\f00c"; + content: '\f00c'; } .fa-remove:before, .fa-close:before, .fa-times:before { - content: "\f00d"; + content: '\f00d'; } .fa-search-plus:before { - content: "\f00e"; + content: '\f00e'; } .fa-search-minus:before { - content: "\f010"; + content: '\f010'; } .fa-power-off:before { - content: "\f011"; + content: '\f011'; } .fa-signal:before { - content: "\f012"; + content: '\f012'; } .fa-gear:before, .fa-cog:before { - content: "\f013"; + content: '\f013'; } .fa-trash-o:before { - content: "\f014"; + content: '\f014'; } .fa-home:before { - content: "\f015"; + content: '\f015'; } .fa-file-o:before { - content: "\f016"; + content: '\f016'; } .fa-clock-o:before { - content: "\f017"; + content: '\f017'; } .fa-road:before { - content: "\f018"; + content: '\f018'; } .fa-download:before { - content: "\f019"; + content: '\f019'; } .fa-arrow-circle-o-down:before { - content: "\f01a"; + content: '\f01a'; } .fa-arrow-circle-o-up:before { - content: "\f01b"; + content: '\f01b'; } .fa-inbox:before { - content: "\f01c"; + content: '\f01c'; } .fa-play-circle-o:before { - content: "\f01d"; + content: '\f01d'; } .fa-rotate-right:before, .fa-repeat:before { - content: "\f01e"; + content: '\f01e'; } .fa-refresh:before { - content: "\f021"; + content: '\f021'; } .fa-list-alt:before { - content: "\f022"; + content: '\f022'; } .fa-lock:before { - content: "\f023"; + content: '\f023'; } .fa-flag:before { - content: "\f024"; + content: '\f024'; } .fa-headphones:before { - content: "\f025"; + content: '\f025'; } .fa-volume-off:before { - content: "\f026"; + content: '\f026'; } .fa-volume-down:before { - content: "\f027"; + content: '\f027'; } .fa-volume-up:before { - content: "\f028"; + content: '\f028'; } .fa-qrcode:before { - content: "\f029"; + content: '\f029'; } .fa-barcode:before { - content: "\f02a"; + content: '\f02a'; } .fa-tag:before { - content: "\f02b"; + content: '\f02b'; } .fa-tags:before { - content: "\f02c"; + content: '\f02c'; } .fa-book:before { - content: "\f02d"; + content: '\f02d'; } .fa-bookmark:before { - content: "\f02e"; + content: '\f02e'; } .fa-print:before { - content: "\f02f"; + content: '\f02f'; } .fa-camera:before { - content: "\f030"; + content: '\f030'; } .fa-font:before { - content: "\f031"; + content: '\f031'; } .fa-bold:before { - content: "\f032"; + content: '\f032'; } .fa-italic:before { - content: "\f033"; + content: '\f033'; } .fa-text-height:before { - content: "\f034"; + content: '\f034'; } .fa-text-width:before { - content: "\f035"; + content: '\f035'; } .fa-align-left:before { - content: "\f036"; + content: '\f036'; } .fa-align-center:before { - content: "\f037"; + content: '\f037'; } .fa-align-right:before { - content: "\f038"; + content: '\f038'; } .fa-align-justify:before { - content: "\f039"; + content: '\f039'; } .fa-list:before { - content: "\f03a"; + content: '\f03a'; } .fa-dedent:before, .fa-outdent:before { - content: "\f03b"; + content: '\f03b'; } .fa-indent:before { - content: "\f03c"; + content: '\f03c'; } .fa-video-camera:before { - content: "\f03d"; + content: '\f03d'; } .fa-photo:before, .fa-image:before, .fa-picture-o:before { - content: "\f03e"; + content: '\f03e'; } .fa-pencil:before { - content: "\f040"; + content: '\f040'; } .fa-map-marker:before { - content: "\f041"; + content: '\f041'; } .fa-adjust:before { - content: "\f042"; + content: '\f042'; } .fa-tint:before { - content: "\f043"; + content: '\f043'; } .fa-edit:before, .fa-pencil-square-o:before { - content: "\f044"; + content: '\f044'; } .fa-share-square-o:before { - content: "\f045"; + content: '\f045'; } .fa-check-square-o:before { - content: "\f046"; + content: '\f046'; } .fa-arrows:before { - content: "\f047"; + content: '\f047'; } .fa-step-backward:before { - content: "\f048"; + content: '\f048'; } .fa-fast-backward:before { - content: "\f049"; + content: '\f049'; } .fa-backward:before { - content: "\f04a"; + content: '\f04a'; } .fa-play:before { - content: "\f04b"; + content: '\f04b'; } .fa-pause:before { - content: "\f04c"; + content: '\f04c'; } .fa-stop:before { - content: "\f04d"; + content: '\f04d'; } .fa-forward:before { - content: "\f04e"; + content: '\f04e'; } .fa-fast-forward:before { - content: "\f050"; + content: '\f050'; } .fa-step-forward:before { - content: "\f051"; + content: '\f051'; } .fa-eject:before { - content: "\f052"; + content: '\f052'; } .fa-chevron-left:before { - content: "\f053"; + content: '\f053'; } .fa-chevron-right:before { - content: "\f054"; + content: '\f054'; } .fa-plus-circle:before { - content: "\f055"; + content: '\f055'; } .fa-minus-circle:before { - content: "\f056"; + content: '\f056'; } .fa-times-circle:before { - content: "\f057"; + content: '\f057'; } .fa-check-circle:before { - content: "\f058"; + content: '\f058'; } .fa-question-circle:before { - content: "\f059"; + content: '\f059'; } .fa-info-circle:before { - content: "\f05a"; + content: '\f05a'; } .fa-crosshairs:before { - content: "\f05b"; + content: '\f05b'; } .fa-times-circle-o:before { - content: "\f05c"; + content: '\f05c'; } .fa-check-circle-o:before { - content: "\f05d"; + content: '\f05d'; } .fa-ban:before { - content: "\f05e"; + content: '\f05e'; } .fa-arrow-left:before { - content: "\f060"; + content: '\f060'; } .fa-arrow-right:before { - content: "\f061"; + content: '\f061'; } .fa-arrow-up:before { - content: "\f062"; + content: '\f062'; } .fa-arrow-down:before { - content: "\f063"; + content: '\f063'; } .fa-mail-forward:before, .fa-share:before { - content: "\f064"; + content: '\f064'; } .fa-expand:before { - content: "\f065"; + content: '\f065'; } .fa-compress:before { - content: "\f066"; + content: '\f066'; } .fa-plus:before { - content: "\f067"; + content: '\f067'; } .fa-minus:before { - content: "\f068"; + content: '\f068'; } .fa-asterisk:before { - content: "\f069"; + content: '\f069'; } .fa-exclamation-circle:before { - content: "\f06a"; + content: '\f06a'; } .fa-gift:before { - content: "\f06b"; + content: '\f06b'; } .fa-leaf:before { - content: "\f06c"; + content: '\f06c'; } .fa-fire:before { - content: "\f06d"; + content: '\f06d'; } .fa-eye:before { - content: "\f06e"; + content: '\f06e'; } .fa-eye-slash:before { - content: "\f070"; + content: '\f070'; } .fa-warning:before, .fa-exclamation-triangle:before { - content: "\f071"; + content: '\f071'; } .fa-plane:before { - content: "\f072"; + content: '\f072'; } .fa-calendar:before { - content: "\f073"; + content: '\f073'; } .fa-random:before { - content: "\f074"; + content: '\f074'; } .fa-comment:before { - content: "\f075"; + content: '\f075'; } .fa-magnet:before { - content: "\f076"; + content: '\f076'; } .fa-chevron-up:before { - content: "\f077"; + content: '\f077'; } .fa-chevron-down:before { - content: "\f078"; + content: '\f078'; } .fa-retweet:before { - content: "\f079"; + content: '\f079'; } .fa-shopping-cart:before { - content: "\f07a"; + content: '\f07a'; } .fa-folder:before { - content: "\f07b"; + content: '\f07b'; } .fa-folder-open:before { - content: "\f07c"; + content: '\f07c'; } .fa-arrows-v:before { - content: "\f07d"; + content: '\f07d'; } .fa-arrows-h:before { - content: "\f07e"; + content: '\f07e'; } .fa-bar-chart-o:before, .fa-bar-chart:before { - content: "\f080"; + content: '\f080'; } .fa-twitter-square:before { - content: "\f081"; + content: '\f081'; } .fa-facebook-square:before { - content: "\f082"; + content: '\f082'; } .fa-camera-retro:before { - content: "\f083"; + content: '\f083'; } .fa-key:before { - content: "\f084"; + content: '\f084'; } .fa-gears:before, .fa-cogs:before { - content: "\f085"; + content: '\f085'; } .fa-comments:before { - content: "\f086"; + content: '\f086'; } .fa-thumbs-o-up:before { - content: "\f087"; + content: '\f087'; } .fa-thumbs-o-down:before { - content: "\f088"; + content: '\f088'; } .fa-star-half:before { - content: "\f089"; + content: '\f089'; } .fa-heart-o:before { - content: "\f08a"; + content: '\f08a'; } .fa-sign-out:before { - content: "\f08b"; + content: '\f08b'; } .fa-linkedin-square:before { - content: "\f08c"; + content: '\f08c'; } .fa-thumb-tack:before { - content: "\f08d"; + content: '\f08d'; } .fa-external-link:before { - content: "\f08e"; + content: '\f08e'; } .fa-sign-in:before { - content: "\f090"; + content: '\f090'; } .fa-trophy:before { - content: "\f091"; + content: '\f091'; } .fa-github-square:before { - content: "\f092"; + content: '\f092'; } .fa-upload:before { - content: "\f093"; + content: '\f093'; } .fa-lemon-o:before { - content: "\f094"; + content: '\f094'; } .fa-phone:before { - content: "\f095"; + content: '\f095'; } .fa-square-o:before { - content: "\f096"; + content: '\f096'; } .fa-bookmark-o:before { - content: "\f097"; + content: '\f097'; } .fa-phone-square:before { - content: "\f098"; + content: '\f098'; } .fa-twitter:before { - content: "\f099"; + content: '\f099'; } .fa-facebook-f:before, .fa-facebook:before { - content: "\f09a"; + content: '\f09a'; } .fa-github:before { - content: "\f09b"; + content: '\f09b'; } .fa-unlock:before { - content: "\f09c"; + content: '\f09c'; } .fa-credit-card:before { - content: "\f09d"; + content: '\f09d'; } .fa-rss:before { - content: "\f09e"; + content: '\f09e'; } .fa-hdd-o:before { - content: "\f0a0"; + content: '\f0a0'; } .fa-bullhorn:before { - content: "\f0a1"; + content: '\f0a1'; } .fa-bell:before { - content: "\f0f3"; + content: '\f0f3'; } .fa-certificate:before { - content: "\f0a3"; + content: '\f0a3'; } .fa-hand-o-right:before { - content: "\f0a4"; + content: '\f0a4'; } .fa-hand-o-left:before { - content: "\f0a5"; + content: '\f0a5'; } .fa-hand-o-up:before { - content: "\f0a6"; + content: '\f0a6'; } .fa-hand-o-down:before { - content: "\f0a7"; + content: '\f0a7'; } .fa-arrow-circle-left:before { - content: "\f0a8"; + content: '\f0a8'; } .fa-arrow-circle-right:before { - content: "\f0a9"; + content: '\f0a9'; } .fa-arrow-circle-up:before { - content: "\f0aa"; + content: '\f0aa'; } .fa-arrow-circle-down:before { - content: "\f0ab"; + content: '\f0ab'; } .fa-globe:before { - content: "\f0ac"; + content: '\f0ac'; } .fa-wrench:before { - content: "\f0ad"; + content: '\f0ad'; } .fa-tasks:before { - content: "\f0ae"; + content: '\f0ae'; } .fa-filter:before { - content: "\f0b0"; + content: '\f0b0'; } .fa-briefcase:before { - content: "\f0b1"; + content: '\f0b1'; } .fa-arrows-alt:before { - content: "\f0b2"; + content: '\f0b2'; } .fa-group:before, .fa-users:before { - content: "\f0c0"; + content: '\f0c0'; } .fa-chain:before, .fa-link:before { - content: "\f0c1"; + content: '\f0c1'; } .fa-cloud:before { - content: "\f0c2"; + content: '\f0c2'; } .fa-flask:before { - content: "\f0c3"; + content: '\f0c3'; } .fa-cut:before, .fa-scissors:before { - content: "\f0c4"; + content: '\f0c4'; } .fa-copy:before, .fa-files-o:before { - content: "\f0c5"; + content: '\f0c5'; } .fa-paperclip:before { - content: "\f0c6"; + content: '\f0c6'; } .fa-save:before, .fa-floppy-o:before { - content: "\f0c7"; + content: '\f0c7'; } .fa-square:before { - content: "\f0c8"; + content: '\f0c8'; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { - content: "\f0c9"; + content: '\f0c9'; } .fa-list-ul:before { - content: "\f0ca"; + content: '\f0ca'; } .fa-list-ol:before { - content: "\f0cb"; + content: '\f0cb'; } .fa-strikethrough:before { - content: "\f0cc"; + content: '\f0cc'; } .fa-underline:before { - content: "\f0cd"; + content: '\f0cd'; } .fa-table:before { - content: "\f0ce"; + content: '\f0ce'; } .fa-magic:before { - content: "\f0d0"; + content: '\f0d0'; } .fa-truck:before { - content: "\f0d1"; + content: '\f0d1'; } .fa-pinterest:before { - content: "\f0d2"; + content: '\f0d2'; } .fa-pinterest-square:before { - content: "\f0d3"; + content: '\f0d3'; } .fa-google-plus-square:before { - content: "\f0d4"; + content: '\f0d4'; } .fa-google-plus:before { - content: "\f0d5"; + content: '\f0d5'; } .fa-money:before { - content: "\f0d6"; + content: '\f0d6'; } .fa-caret-down:before { - content: "\f0d7"; + content: '\f0d7'; } .fa-caret-up:before { - content: "\f0d8"; + content: '\f0d8'; } .fa-caret-left:before { - content: "\f0d9"; + content: '\f0d9'; } .fa-caret-right:before { - content: "\f0da"; + content: '\f0da'; } .fa-columns:before { - content: "\f0db"; + content: '\f0db'; } .fa-unsorted:before, .fa-sort:before { - content: "\f0dc"; + content: '\f0dc'; } .fa-sort-down:before, .fa-sort-desc:before { - content: "\f0dd"; + content: '\f0dd'; } .fa-sort-up:before, .fa-sort-asc:before { - content: "\f0de"; + content: '\f0de'; } .fa-envelope:before { - content: "\f0e0"; + content: '\f0e0'; } .fa-linkedin:before { - content: "\f0e1"; + content: '\f0e1'; } .fa-rotate-left:before, .fa-undo:before { - content: "\f0e2"; + content: '\f0e2'; } .fa-legal:before, .fa-gavel:before { - content: "\f0e3"; + content: '\f0e3'; } .fa-dashboard:before, .fa-tachometer:before { - content: "\f0e4"; + content: '\f0e4'; } .fa-comment-o:before { - content: "\f0e5"; + content: '\f0e5'; } .fa-comments-o:before { - content: "\f0e6"; + content: '\f0e6'; } .fa-flash:before, .fa-bolt:before { - content: "\f0e7"; + content: '\f0e7'; } .fa-sitemap:before { - content: "\f0e8"; + content: '\f0e8'; } .fa-umbrella:before { - content: "\f0e9"; + content: '\f0e9'; } .fa-paste:before, .fa-clipboard:before { - content: "\f0ea"; + content: '\f0ea'; } .fa-lightbulb-o:before { - content: "\f0eb"; + content: '\f0eb'; } .fa-exchange:before { - content: "\f0ec"; + content: '\f0ec'; } .fa-cloud-download:before { - content: "\f0ed"; + content: '\f0ed'; } .fa-cloud-upload:before { - content: "\f0ee"; + content: '\f0ee'; } .fa-user-md:before { - content: "\f0f0"; + content: '\f0f0'; } .fa-stethoscope:before { - content: "\f0f1"; + content: '\f0f1'; } .fa-suitcase:before { - content: "\f0f2"; + content: '\f0f2'; } .fa-bell-o:before { - content: "\f0a2"; + content: '\f0a2'; } .fa-coffee:before { - content: "\f0f4"; + content: '\f0f4'; } .fa-cutlery:before { - content: "\f0f5"; + content: '\f0f5'; } .fa-file-text-o:before { - content: "\f0f6"; + content: '\f0f6'; } .fa-building-o:before { - content: "\f0f7"; + content: '\f0f7'; } .fa-hospital-o:before { - content: "\f0f8"; + content: '\f0f8'; } .fa-ambulance:before { - content: "\f0f9"; + content: '\f0f9'; } .fa-medkit:before { - content: "\f0fa"; + content: '\f0fa'; } .fa-fighter-jet:before { - content: "\f0fb"; + content: '\f0fb'; } .fa-beer:before { - content: "\f0fc"; + content: '\f0fc'; } .fa-h-square:before { - content: "\f0fd"; + content: '\f0fd'; } .fa-plus-square:before { - content: "\f0fe"; + content: '\f0fe'; } .fa-angle-double-left:before { - content: "\f100"; + content: '\f100'; } .fa-angle-double-right:before { - content: "\f101"; + content: '\f101'; } .fa-angle-double-up:before { - content: "\f102"; + content: '\f102'; } .fa-angle-double-down:before { - content: "\f103"; + content: '\f103'; } .fa-angle-left:before { - content: "\f104"; + content: '\f104'; } .fa-angle-right:before { - content: "\f105"; + content: '\f105'; } .fa-angle-up:before { - content: "\f106"; + content: '\f106'; } .fa-angle-down:before { - content: "\f107"; + content: '\f107'; } .fa-desktop:before { - content: "\f108"; + content: '\f108'; } .fa-laptop:before { - content: "\f109"; + content: '\f109'; } .fa-tablet:before { - content: "\f10a"; + content: '\f10a'; } .fa-mobile-phone:before, .fa-mobile:before { - content: "\f10b"; + content: '\f10b'; } .fa-circle-o:before { - content: "\f10c"; + content: '\f10c'; } .fa-quote-left:before { - content: "\f10d"; + content: '\f10d'; } .fa-quote-right:before { - content: "\f10e"; + content: '\f10e'; } .fa-spinner:before { - content: "\f110"; + content: '\f110'; } .fa-circle:before { - content: "\f111"; + content: '\f111'; } .fa-mail-reply:before, .fa-reply:before { - content: "\f112"; + content: '\f112'; } .fa-github-alt:before { - content: "\f113"; + content: '\f113'; } .fa-folder-o:before { - content: "\f114"; + content: '\f114'; } .fa-folder-open-o:before { - content: "\f115"; + content: '\f115'; } .fa-smile-o:before { - content: "\f118"; + content: '\f118'; } .fa-frown-o:before { - content: "\f119"; + content: '\f119'; } .fa-meh-o:before { - content: "\f11a"; + content: '\f11a'; } .fa-gamepad:before { - content: "\f11b"; + content: '\f11b'; } .fa-keyboard-o:before { - content: "\f11c"; + content: '\f11c'; } .fa-flag-o:before { - content: "\f11d"; + content: '\f11d'; } .fa-flag-checkered:before { - content: "\f11e"; + content: '\f11e'; } .fa-terminal:before { - content: "\f120"; + content: '\f120'; } .fa-code:before { - content: "\f121"; + content: '\f121'; } .fa-mail-reply-all:before, .fa-reply-all:before { - content: "\f122"; + content: '\f122'; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { - content: "\f123"; + content: '\f123'; } .fa-location-arrow:before { - content: "\f124"; + content: '\f124'; } .fa-crop:before { - content: "\f125"; + content: '\f125'; } .fa-code-fork:before { - content: "\f126"; + content: '\f126'; } .fa-unlink:before, .fa-chain-broken:before { - content: "\f127"; + content: '\f127'; } .fa-question:before { - content: "\f128"; + content: '\f128'; } .fa-info:before { - content: "\f129"; + content: '\f129'; } .fa-exclamation:before { - content: "\f12a"; + content: '\f12a'; } .fa-superscript:before { - content: "\f12b"; + content: '\f12b'; } .fa-subscript:before { - content: "\f12c"; + content: '\f12c'; } .fa-eraser:before { - content: "\f12d"; + content: '\f12d'; } .fa-puzzle-piece:before { - content: "\f12e"; + content: '\f12e'; } .fa-microphone:before { - content: "\f130"; + content: '\f130'; } .fa-microphone-slash:before { - content: "\f131"; + content: '\f131'; } .fa-shield:before { - content: "\f132"; + content: '\f132'; } .fa-calendar-o:before { - content: "\f133"; + content: '\f133'; } .fa-fire-extinguisher:before { - content: "\f134"; + content: '\f134'; } .fa-rocket:before { - content: "\f135"; + content: '\f135'; } .fa-maxcdn:before { - content: "\f136"; + content: '\f136'; } .fa-chevron-circle-left:before { - content: "\f137"; + content: '\f137'; } .fa-chevron-circle-right:before { - content: "\f138"; + content: '\f138'; } .fa-chevron-circle-up:before { - content: "\f139"; + content: '\f139'; } .fa-chevron-circle-down:before { - content: "\f13a"; + content: '\f13a'; } .fa-html5:before { - content: "\f13b"; + content: '\f13b'; } .fa-css3:before { - content: "\f13c"; + content: '\f13c'; } .fa-anchor:before { - content: "\f13d"; + content: '\f13d'; } .fa-unlock-alt:before { - content: "\f13e"; + content: '\f13e'; } .fa-bullseye:before { - content: "\f140"; + content: '\f140'; } .fa-ellipsis-h:before { - content: "\f141"; + content: '\f141'; } .fa-ellipsis-v:before { - content: "\f142"; + content: '\f142'; } .fa-rss-square:before { - content: "\f143"; + content: '\f143'; } .fa-play-circle:before { - content: "\f144"; + content: '\f144'; } .fa-ticket:before { - content: "\f145"; + content: '\f145'; } .fa-minus-square:before { - content: "\f146"; + content: '\f146'; } .fa-minus-square-o:before { - content: "\f147"; + content: '\f147'; } .fa-level-up:before { - content: "\f148"; + content: '\f148'; } .fa-level-down:before { - content: "\f149"; + content: '\f149'; } .fa-check-square:before { - content: "\f14a"; + content: '\f14a'; } .fa-pencil-square:before { - content: "\f14b"; + content: '\f14b'; } .fa-external-link-square:before { - content: "\f14c"; + content: '\f14c'; } .fa-share-square:before { - content: "\f14d"; + content: '\f14d'; } .fa-compass:before { - content: "\f14e"; + content: '\f14e'; } .fa-toggle-down:before, .fa-caret-square-o-down:before { - content: "\f150"; + content: '\f150'; } .fa-toggle-up:before, .fa-caret-square-o-up:before { - content: "\f151"; + content: '\f151'; } .fa-toggle-right:before, .fa-caret-square-o-right:before { - content: "\f152"; + content: '\f152'; } .fa-euro:before, .fa-eur:before { - content: "\f153"; + content: '\f153'; } .fa-gbp:before { - content: "\f154"; + content: '\f154'; } .fa-dollar:before, .fa-usd:before { - content: "\f155"; + content: '\f155'; } .fa-rupee:before, .fa-inr:before { - content: "\f156"; + content: '\f156'; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { - content: "\f157"; + content: '\f157'; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { - content: "\f158"; + content: '\f158'; } .fa-won:before, .fa-krw:before { - content: "\f159"; + content: '\f159'; } .fa-bitcoin:before, .fa-btc:before { - content: "\f15a"; + content: '\f15a'; } .fa-file:before { - content: "\f15b"; + content: '\f15b'; } .fa-file-text:before { - content: "\f15c"; + content: '\f15c'; } .fa-sort-alpha-asc:before { - content: "\f15d"; + content: '\f15d'; } .fa-sort-alpha-desc:before { - content: "\f15e"; + content: '\f15e'; } .fa-sort-amount-asc:before { - content: "\f160"; + content: '\f160'; } .fa-sort-amount-desc:before { - content: "\f161"; + content: '\f161'; } .fa-sort-numeric-asc:before { - content: "\f162"; + content: '\f162'; } .fa-sort-numeric-desc:before { - content: "\f163"; + content: '\f163'; } .fa-thumbs-up:before { - content: "\f164"; + content: '\f164'; } .fa-thumbs-down:before { - content: "\f165"; + content: '\f165'; } .fa-youtube-square:before { - content: "\f166"; + content: '\f166'; } .fa-youtube:before { - content: "\f167"; + content: '\f167'; } .fa-xing:before { - content: "\f168"; + content: '\f168'; } .fa-xing-square:before { - content: "\f169"; + content: '\f169'; } .fa-youtube-play:before { - content: "\f16a"; + content: '\f16a'; } .fa-dropbox:before { - content: "\f16b"; + content: '\f16b'; } .fa-stack-overflow:before { - content: "\f16c"; + content: '\f16c'; } .fa-instagram:before { - content: "\f16d"; + content: '\f16d'; } .fa-flickr:before { - content: "\f16e"; + content: '\f16e'; } .fa-adn:before { - content: "\f170"; + content: '\f170'; } .fa-bitbucket:before { - content: "\f171"; + content: '\f171'; } .fa-bitbucket-square:before { - content: "\f172"; + content: '\f172'; } .fa-tumblr:before { - content: "\f173"; + content: '\f173'; } .fa-tumblr-square:before { - content: "\f174"; + content: '\f174'; } .fa-long-arrow-down:before { - content: "\f175"; + content: '\f175'; } .fa-long-arrow-up:before { - content: "\f176"; + content: '\f176'; } .fa-long-arrow-left:before { - content: "\f177"; + content: '\f177'; } .fa-long-arrow-right:before { - content: "\f178"; + content: '\f178'; } .fa-apple:before { - content: "\f179"; + content: '\f179'; } .fa-windows:before { - content: "\f17a"; + content: '\f17a'; } .fa-android:before { - content: "\f17b"; + content: '\f17b'; } .fa-linux:before { - content: "\f17c"; + content: '\f17c'; } .fa-dribbble:before { - content: "\f17d"; + content: '\f17d'; } .fa-skype:before { - content: "\f17e"; + content: '\f17e'; } .fa-foursquare:before { - content: "\f180"; + content: '\f180'; } .fa-trello:before { - content: "\f181"; + content: '\f181'; } .fa-female:before { - content: "\f182"; + content: '\f182'; } .fa-male:before { - content: "\f183"; + content: '\f183'; } .fa-gittip:before, .fa-gratipay:before { - content: "\f184"; + content: '\f184'; } .fa-sun-o:before { - content: "\f185"; + content: '\f185'; } .fa-moon-o:before { - content: "\f186"; + content: '\f186'; } .fa-archive:before { - content: "\f187"; + content: '\f187'; } .fa-bug:before { - content: "\f188"; + content: '\f188'; } .fa-vk:before { - content: "\f189"; + content: '\f189'; } .fa-weibo:before { - content: "\f18a"; + content: '\f18a'; } .fa-renren:before { - content: "\f18b"; + content: '\f18b'; } .fa-pagelines:before { - content: "\f18c"; + content: '\f18c'; } .fa-stack-exchange:before { - content: "\f18d"; + content: '\f18d'; } .fa-arrow-circle-o-right:before { - content: "\f18e"; + content: '\f18e'; } .fa-arrow-circle-o-left:before { - content: "\f190"; + content: '\f190'; } .fa-toggle-left:before, .fa-caret-square-o-left:before { - content: "\f191"; + content: '\f191'; } .fa-dot-circle-o:before { - content: "\f192"; + content: '\f192'; } .fa-wheelchair:before { - content: "\f193"; + content: '\f193'; } .fa-vimeo-square:before { - content: "\f194"; + content: '\f194'; } .fa-turkish-lira:before, .fa-try:before { - content: "\f195"; + content: '\f195'; } .fa-plus-square-o:before { - content: "\f196"; + content: '\f196'; } .fa-space-shuttle:before { - content: "\f197"; + content: '\f197'; } .fa-slack:before { - content: "\f198"; + content: '\f198'; } .fa-envelope-square:before { - content: "\f199"; + content: '\f199'; } .fa-wordpress:before { - content: "\f19a"; + content: '\f19a'; } .fa-openid:before { - content: "\f19b"; + content: '\f19b'; } .fa-institution:before, .fa-bank:before, .fa-university:before { - content: "\f19c"; + content: '\f19c'; } .fa-mortar-board:before, .fa-graduation-cap:before { - content: "\f19d"; + content: '\f19d'; } .fa-yahoo:before { - content: "\f19e"; + content: '\f19e'; } .fa-google:before { - content: "\f1a0"; + content: '\f1a0'; } .fa-reddit:before { - content: "\f1a1"; + content: '\f1a1'; } .fa-reddit-square:before { - content: "\f1a2"; + content: '\f1a2'; } .fa-stumbleupon-circle:before { - content: "\f1a3"; + content: '\f1a3'; } .fa-stumbleupon:before { - content: "\f1a4"; + content: '\f1a4'; } .fa-delicious:before { - content: "\f1a5"; + content: '\f1a5'; } .fa-digg:before { - content: "\f1a6"; + content: '\f1a6'; } .fa-pied-piper:before { - content: "\f1a7"; + content: '\f1a7'; } .fa-pied-piper-alt:before { - content: "\f1a8"; + content: '\f1a8'; } .fa-drupal:before { - content: "\f1a9"; + content: '\f1a9'; } .fa-joomla:before { - content: "\f1aa"; + content: '\f1aa'; } .fa-language:before { - content: "\f1ab"; + content: '\f1ab'; } .fa-fax:before { - content: "\f1ac"; + content: '\f1ac'; } .fa-building:before { - content: "\f1ad"; + content: '\f1ad'; } .fa-child:before { - content: "\f1ae"; + content: '\f1ae'; } .fa-paw:before { - content: "\f1b0"; + content: '\f1b0'; } .fa-spoon:before { - content: "\f1b1"; + content: '\f1b1'; } .fa-cube:before { - content: "\f1b2"; + content: '\f1b2'; } .fa-cubes:before { - content: "\f1b3"; + content: '\f1b3'; } .fa-behance:before { - content: "\f1b4"; + content: '\f1b4'; } .fa-behance-square:before { - content: "\f1b5"; + content: '\f1b5'; } .fa-steam:before { - content: "\f1b6"; + content: '\f1b6'; } .fa-steam-square:before { - content: "\f1b7"; + content: '\f1b7'; } .fa-recycle:before { - content: "\f1b8"; + content: '\f1b8'; } .fa-automobile:before, .fa-car:before { - content: "\f1b9"; + content: '\f1b9'; } .fa-cab:before, .fa-taxi:before { - content: "\f1ba"; + content: '\f1ba'; } .fa-tree:before { - content: "\f1bb"; + content: '\f1bb'; } .fa-spotify:before { - content: "\f1bc"; + content: '\f1bc'; } .fa-deviantart:before { - content: "\f1bd"; + content: '\f1bd'; } .fa-soundcloud:before { - content: "\f1be"; + content: '\f1be'; } .fa-database:before { - content: "\f1c0"; + content: '\f1c0'; } .fa-file-pdf-o:before { - content: "\f1c1"; + content: '\f1c1'; } .fa-file-word-o:before { - content: "\f1c2"; + content: '\f1c2'; } .fa-file-excel-o:before { - content: "\f1c3"; + content: '\f1c3'; } .fa-file-powerpoint-o:before { - content: "\f1c4"; + content: '\f1c4'; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { - content: "\f1c5"; + content: '\f1c5'; } .fa-file-zip-o:before, .fa-file-archive-o:before { - content: "\f1c6"; + content: '\f1c6'; } .fa-file-sound-o:before, .fa-file-audio-o:before { - content: "\f1c7"; + content: '\f1c7'; } .fa-file-movie-o:before, .fa-file-video-o:before { - content: "\f1c8"; + content: '\f1c8'; } .fa-file-code-o:before { - content: "\f1c9"; + content: '\f1c9'; } .fa-vine:before { - content: "\f1ca"; + content: '\f1ca'; } .fa-codepen:before { - content: "\f1cb"; + content: '\f1cb'; } .fa-jsfiddle:before { - content: "\f1cc"; + content: '\f1cc'; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { - content: "\f1cd"; + content: '\f1cd'; } .fa-circle-o-notch:before { - content: "\f1ce"; + content: '\f1ce'; } .fa-ra:before, .fa-rebel:before { - content: "\f1d0"; + content: '\f1d0'; } .fa-ge:before, .fa-empire:before { - content: "\f1d1"; + content: '\f1d1'; } .fa-git-square:before { - content: "\f1d2"; + content: '\f1d2'; } .fa-git:before { - content: "\f1d3"; + content: '\f1d3'; } .fa-hacker-news:before { - content: "\f1d4"; + content: '\f1d4'; } .fa-tencent-weibo:before { - content: "\f1d5"; + content: '\f1d5'; } .fa-qq:before { - content: "\f1d6"; + content: '\f1d6'; } .fa-wechat:before, .fa-weixin:before { - content: "\f1d7"; + content: '\f1d7'; } .fa-send:before, .fa-paper-plane:before { - content: "\f1d8"; + content: '\f1d8'; } .fa-send-o:before, .fa-paper-plane-o:before { - content: "\f1d9"; + content: '\f1d9'; } .fa-history:before { - content: "\f1da"; + content: '\f1da'; } .fa-genderless:before, .fa-circle-thin:before { - content: "\f1db"; + content: '\f1db'; } .fa-header:before { - content: "\f1dc"; + content: '\f1dc'; } .fa-paragraph:before { - content: "\f1dd"; + content: '\f1dd'; } .fa-sliders:before { - content: "\f1de"; + content: '\f1de'; } .fa-share-alt:before { - content: "\f1e0"; + content: '\f1e0'; } .fa-share-alt-square:before { - content: "\f1e1"; + content: '\f1e1'; } .fa-bomb:before { - content: "\f1e2"; + content: '\f1e2'; } .fa-soccer-ball-o:before, .fa-futbol-o:before { - content: "\f1e3"; + content: '\f1e3'; } .fa-tty:before { - content: "\f1e4"; + content: '\f1e4'; } .fa-binoculars:before { - content: "\f1e5"; + content: '\f1e5'; } .fa-plug:before { - content: "\f1e6"; + content: '\f1e6'; } .fa-slideshare:before { - content: "\f1e7"; + content: '\f1e7'; } .fa-twitch:before { - content: "\f1e8"; + content: '\f1e8'; } .fa-yelp:before { - content: "\f1e9"; + content: '\f1e9'; } .fa-newspaper-o:before { - content: "\f1ea"; + content: '\f1ea'; } .fa-wifi:before { - content: "\f1eb"; + content: '\f1eb'; } .fa-calculator:before { - content: "\f1ec"; + content: '\f1ec'; } .fa-paypal:before { - content: "\f1ed"; + content: '\f1ed'; } .fa-google-wallet:before { - content: "\f1ee"; + content: '\f1ee'; } .fa-cc-visa:before { - content: "\f1f0"; + content: '\f1f0'; } .fa-cc-mastercard:before { - content: "\f1f1"; + content: '\f1f1'; } .fa-cc-discover:before { - content: "\f1f2"; + content: '\f1f2'; } .fa-cc-amex:before { - content: "\f1f3"; + content: '\f1f3'; } .fa-cc-paypal:before { - content: "\f1f4"; + content: '\f1f4'; } .fa-cc-stripe:before { - content: "\f1f5"; + content: '\f1f5'; } .fa-bell-slash:before { - content: "\f1f6"; + content: '\f1f6'; } .fa-bell-slash-o:before { - content: "\f1f7"; + content: '\f1f7'; } .fa-trash:before { - content: "\f1f8"; + content: '\f1f8'; } .fa-copyright:before { - content: "\f1f9"; + content: '\f1f9'; } .fa-at:before { - content: "\f1fa"; + content: '\f1fa'; } .fa-eyedropper:before { - content: "\f1fb"; + content: '\f1fb'; } .fa-paint-brush:before { - content: "\f1fc"; + content: '\f1fc'; } .fa-birthday-cake:before { - content: "\f1fd"; + content: '\f1fd'; } .fa-area-chart:before { - content: "\f1fe"; + content: '\f1fe'; } .fa-pie-chart:before { - content: "\f200"; + content: '\f200'; } .fa-line-chart:before { - content: "\f201"; + content: '\f201'; } .fa-lastfm:before { - content: "\f202"; + content: '\f202'; } .fa-lastfm-square:before { - content: "\f203"; + content: '\f203'; } .fa-toggle-off:before { - content: "\f204"; + content: '\f204'; } .fa-toggle-on:before { - content: "\f205"; + content: '\f205'; } .fa-bicycle:before { - content: "\f206"; + content: '\f206'; } .fa-bus:before { - content: "\f207"; + content: '\f207'; } .fa-ioxhost:before { - content: "\f208"; + content: '\f208'; } .fa-angellist:before { - content: "\f209"; + content: '\f209'; } .fa-cc:before { - content: "\f20a"; + content: '\f20a'; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { - content: "\f20b"; + content: '\f20b'; } .fa-meanpath:before { - content: "\f20c"; + content: '\f20c'; } .fa-buysellads:before { - content: "\f20d"; + content: '\f20d'; } .fa-connectdevelop:before { - content: "\f20e"; + content: '\f20e'; } .fa-dashcube:before { - content: "\f210"; + content: '\f210'; } .fa-forumbee:before { - content: "\f211"; + content: '\f211'; } .fa-leanpub:before { - content: "\f212"; + content: '\f212'; } .fa-sellsy:before { - content: "\f213"; + content: '\f213'; } .fa-shirtsinbulk:before { - content: "\f214"; + content: '\f214'; } .fa-simplybuilt:before { - content: "\f215"; + content: '\f215'; } .fa-skyatlas:before { - content: "\f216"; + content: '\f216'; } .fa-cart-plus:before { - content: "\f217"; + content: '\f217'; } .fa-cart-arrow-down:before { - content: "\f218"; + content: '\f218'; } .fa-diamond:before { - content: "\f219"; + content: '\f219'; } .fa-ship:before { - content: "\f21a"; + content: '\f21a'; } .fa-user-secret:before { - content: "\f21b"; + content: '\f21b'; } .fa-motorcycle:before { - content: "\f21c"; + content: '\f21c'; } .fa-street-view:before { - content: "\f21d"; + content: '\f21d'; } .fa-heartbeat:before { - content: "\f21e"; + content: '\f21e'; } .fa-venus:before { - content: "\f221"; + content: '\f221'; } .fa-mars:before { - content: "\f222"; + content: '\f222'; } .fa-mercury:before { - content: "\f223"; + content: '\f223'; } .fa-transgender:before { - content: "\f224"; + content: '\f224'; } .fa-transgender-alt:before { - content: "\f225"; + content: '\f225'; } .fa-venus-double:before { - content: "\f226"; + content: '\f226'; } .fa-mars-double:before { - content: "\f227"; + content: '\f227'; } .fa-venus-mars:before { - content: "\f228"; + content: '\f228'; } .fa-mars-stroke:before { - content: "\f229"; + content: '\f229'; } .fa-mars-stroke-v:before { - content: "\f22a"; + content: '\f22a'; } .fa-mars-stroke-h:before { - content: "\f22b"; + content: '\f22b'; } .fa-neuter:before { - content: "\f22c"; + content: '\f22c'; } .fa-facebook-official:before { - content: "\f230"; + content: '\f230'; } .fa-pinterest-p:before { - content: "\f231"; + content: '\f231'; } .fa-whatsapp:before { - content: "\f232"; + content: '\f232'; } .fa-server:before { - content: "\f233"; + content: '\f233'; } .fa-user-plus:before { - content: "\f234"; + content: '\f234'; } .fa-user-times:before { - content: "\f235"; + content: '\f235'; } .fa-hotel:before, .fa-bed:before { - content: "\f236"; + content: '\f236'; } .fa-viacoin:before { - content: "\f237"; + content: '\f237'; } .fa-train:before { - content: "\f238"; + content: '\f238'; } .fa-subway:before { - content: "\f239"; + content: '\f239'; } .fa-medium:before { - content: "\f23a"; + content: '\f23a'; } diff --git a/web/sass-files/sass/vendors/_module.scss b/web/sass-files/sass/vendors/_module.scss new file mode 100644 index 000000000..ed8a124a2 --- /dev/null +++ b/web/sass-files/sass/vendors/_module.scss @@ -0,0 +1,4 @@ +// Only for combining all the files in this folder +@import 'perfect-scrollbar'; +@import 'font-awesome'; +@import 'colorpicker'; diff --git a/web/sass-files/sass/vendors/_perfect-scrollbar.scss b/web/sass-files/sass/vendors/_perfect-scrollbar.scss new file mode 100755 index 000000000..212a22687 --- /dev/null +++ b/web/sass-files/sass/vendors/_perfect-scrollbar.scss @@ -0,0 +1,141 @@ +@charset 'UTF-8'; + +.ps-container { + overflow: hidden !important; +} +.ps-container.ps-active-x > .ps-scrollbar-x-rail, +.ps-container.ps-active-y > .ps-scrollbar-y-rail { + display: block; +} + +.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { + background-color: #999; +} +.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { + background-color: #999; +} +.ps-container > .ps-scrollbar-x-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + opacity: 0; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; + filter: alpha(opacity=0); + -webkit-transition: background-color .2s linear, opacity .2s linear; + -moz-transition: background-color .2s linear, opacity .2s linear; + -o-transition: background-color .2s linear, opacity .2s linear; + transition: background-color .2s linear, opacity .2s linear; + bottom: 3px; + /* there must be 'bottom' for ps-scrollbar-x-rail */ + height: 8px; +} +.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { + position: absolute; + /* please don't change 'position' */ + background-color: #aaa; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + -webkit-transition: background-color .2s linear; + -moz-transition: background-color .2s linear; + -o-transition: background-color .2s linear; + transition: background-color .2s linear; + bottom: 0; + /* there must be 'bottom' for ps-scrollbar-x */ + height: 8px; +} +.ps-container > .ps-scrollbar-y-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + opacity: 0; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; + filter: alpha(opacity=0); + -webkit-transition: background-color .2s linear, opacity .2s linear; + -moz-transition: background-color .2s linear, opacity .2s linear; + -o-transition: background-color .2s linear, opacity .2s linear; + transition: background-color .2s linear, opacity .2s linear; + right: 3px; + /* there must be 'right' for ps-scrollbar-y-rail */ + width: 8px; +} +.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { + position: absolute; + /* please don't change 'position' */ + background-color: #aaa; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + -webkit-transition: background-color .2s linear; + -moz-transition: background-color .2s linear; + -o-transition: background-color .2s linear; + transition: background-color .2s linear; + right: 0; + /* there must be 'right' for ps-scrollbar-y */ + width: 8px; +} + +.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { + background-color: #999; +} +.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { + background-color: #999; +} +.ps-container:hover > .ps-scrollbar-x-rail, +.ps-container:hover > .ps-scrollbar-y-rail { + opacity: .6; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'; + filter: alpha(opacity=60); +} +.ps-container:hover > .ps-scrollbar-x-rail:hover { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { + background-color: #999; +} +.ps-container:hover > .ps-scrollbar-y-rail:hover { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { + background-color: #999; +} |