diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx
index 4c4f21f08b..6dca391d0e 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 (
-
+
-
+
diff --git a/web/react/components/admin_console/team_users.jsx b/web/react/components/admin_console/team_users.jsx
index 256576f9b5..708907ddb7 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'
>
-
+
{memberList}
diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx
index 7d6cfb5c38..722da922ab 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 (
-
- {channels.map(this.createChannelRow)}
-
-
+
| + |
-
+ |
+ {channels.map(this.createChannelRow)}
+
);
} else {
moreChannels = (
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 974f026d0c..8382cb47aa 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 7af293e778..cf3effcd5e 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 (
-
+
} "${matchText}")
`,
+ value: ``,
originalText: fullMatch
});
diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx
index a930e9ecef..552d93facb 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: `${alias}`,
+ value: `${alias}`,
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: `${mention}`,
+ value: `${mention}`,
originalText: mention
});
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 88777164b8..360d1f4a5e 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 0000000000..987b9200bf
--- /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 0000000000..56888f8dcd
--- /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 0000000000..676a2c4058
--- /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 0000000000..49ca3e8aff
--- /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 0000000000..bb8efbb149
--- /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 0000000000..f48e12c873
--- /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 0000000000..661b25d94d
--- /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
similarity index 79%
rename from web/sass-files/sass/partials/_error-bar.scss
rename to web/sass-files/sass/components/_error-bar.scss
index 0bfcbe0be6..2b74a33ae0 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 0000000000..17ffb206fa
--- /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 0000000000..5e33111824
--- /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 0000000000..f31008b4f8
--- /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 0000000000..98efc599d5
--- /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 0000000000..a8e8a99f78
--- /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 0000000000..24488df962
--- /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 0000000000..cd8382a5ca
--- /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
similarity index 72%
rename from web/sass-files/sass/partials/_popover.scss
rename to web/sass-files/sass/components/_popover.scss
index bf762d2c9c..588a71946f 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 0000000000..4ecb38b1fd
--- /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 0000000000..faf0b81772
--- /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 0000000000..125a3cf329
--- /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 0000000000..44c10edb94
--- /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
similarity index 90%
rename from web/sass-files/sass/partials/_tutorial.scss
rename to web/sass-files/sass/components/_tutorial.scss
index b21a2b7c36..f159190090 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 0000000000..91db750bd3
--- /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 0000000000..71bef0d7fd
--- /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
similarity index 56%
rename from web/sass-files/sass/partials/_footer.scss
rename to web/sass-files/sass/layout/_footer.scss
index deed14d67f..5624e63762 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 0000000000..1f51603cc6
--- /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 0000000000..0a6b9f920a
--- /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 0000000000..307060ac37
--- /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 0000000000..39ab2c6f88
--- /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 0000000000..65c62cb17d
--- /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 0000000000..595577564d
--- /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 0000000000..ce055035de
--- /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
similarity index 86%
rename from web/sass-files/sass/partials/_sidebar--left.scss
rename to web/sass-files/sass/layout/_sidebar-left.scss
index 44681291c4..ece054a15a 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
similarity index 90%
rename from web/sass-files/sass/partials/_sidebar--menu.scss
rename to web/sass-files/sass/layout/_sidebar-menu.scss
index 443b7dbb0a..167b24ba00 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
similarity index 87%
rename from web/sass-files/sass/partials/_sidebar--right.scss
rename to web/sass-files/sass/layout/_sidebar-right.scss
index aaa6f4c925..e1a7d76410 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
similarity index 88%
rename from web/sass-files/sass/partials/_webhooks.scss
rename to web/sass-files/sass/layout/_webhooks.scss
index 4b0215a9eb..d6e3672185 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/_base.scss b/web/sass-files/sass/partials/_base.scss
deleted file mode 100644
index 4dcf0ff85c..0000000000
--- 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 7c79844ae8..0000000000
--- 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 fb2355da75..0000000000
--- 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 f4e7cc3145..0000000000
--- 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 e09a751d25..0000000000
--- 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 62e067437e..0000000000
--- 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 a2d6eaf991..0000000000
--- 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 d4365d1e6c..0000000000
--- 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 93cb04198b..0000000000
--- 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 e9863ddbd0..0000000000
--- 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 f34b5ec197..0000000000
--- 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 aa654e9e88..0000000000
--- 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 5b02652af1..0000000000
--- 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 28ab61ec18..0000000000
--- 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 2bd9a0de58..0000000000
--- 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 0e0967d81b..0000000000
--- 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 209f8e27f5..0000000000
--- 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 5df6fdc018..0000000000
--- 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
deleted file mode 100644
index 143ec29156..0000000000
Binary files a/web/sass-files/sass/partials/_print.scss and /dev/null differ
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
deleted file mode 100644
index aa398e9160..0000000000
--- 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 f867402706..0000000000
--- 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 28c113c6d8..0000000000
--- 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 c2de3c5908..0000000000
--- 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 514be2e8b3..0000000000
--- 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 43f30ce84c..0000000000
--- 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 0be43d29c1..0000000000
--- 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 0000000000..dcabb807f1
--- /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
similarity index 81%
rename from web/sass-files/sass/partials/_responsive.scss
rename to web/sass-files/sass/responsive/_mobile.scss
index 06ce17041f..a452cb4208 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 0000000000..a799c145e3
--- /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 0000000000..14641cfa5e
--- /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/partials/_access-history.scss b/web/sass-files/sass/routes/_access-history.scss
similarity index 89%
rename from web/sass-files/sass/partials/_access-history.scss
rename to web/sass-files/sass/routes/_access-history.scss
index dcb5f3c5fc..7ede7b0859 100644
--- a/web/sass-files/sass/partials/_access-history.scss
+++ b/web/sass-files/sass/routes/_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/routes/_activity-log.scss
similarity index 81%
rename from web/sass-files/sass/partials/_activity-log.scss
rename to web/sass-files/sass/routes/_activity-log.scss
index df5869b4cf..6e8d0a9256 100644
--- a/web/sass-files/sass/partials/_activity-log.scss
+++ b/web/sass-files/sass/routes/_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/routes/_admin-console.scss
similarity index 83%
rename from web/sass-files/sass/partials/_admin-console.scss
rename to web/sass-files/sass/routes/_admin-console.scss
index 76081710fd..f83ce487e6 100644
--- a/web/sass-files/sass/partials/_admin-console.scss
+++ b/web/sass-files/sass/routes/_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/routes/_docs.scss b/web/sass-files/sass/routes/_docs.scss
new file mode 100644
index 0000000000..24e96772b3
--- /dev/null
+++ b/web/sass-files/sass/routes/_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/routes/_error-page.scss b/web/sass-files/sass/routes/_error-page.scss
new file mode 100644
index 0000000000..8cd0716caa
--- /dev/null
+++ b/web/sass-files/sass/routes/_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/routes/_loading.scss b/web/sass-files/sass/routes/_loading.scss
new file mode 100644
index 0000000000..5e4e7359ad
--- /dev/null
+++ b/web/sass-files/sass/routes/_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/routes/_module.scss b/web/sass-files/sass/routes/_module.scss
new file mode 100644
index 0000000000..48c1af1d9d
--- /dev/null
+++ b/web/sass-files/sass/routes/_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/routes/_print.scss b/web/sass-files/sass/routes/_print.scss
new file mode 100644
index 0000000000..1c2ef9c0f4
Binary files /dev/null and b/web/sass-files/sass/routes/_print.scss differ
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/routes/_settings.scss
similarity index 86%
rename from web/sass-files/sass/partials/_settings.scss
rename to web/sass-files/sass/routes/_settings.scss
index 6574dd9274..3c735be3c3 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/routes/_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/routes/_signup.scss
similarity index 85%
rename from web/sass-files/sass/partials/_signup.scss
rename to web/sass-files/sass/routes/_signup.scss
index 6d396d21cf..53c59c222e 100644
--- a/web/sass-files/sass/partials/_signup.scss
+++ b/web/sass-files/sass/routes/_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/routes/_statistics.scss b/web/sass-files/sass/routes/_statistics.scss
new file mode 100644
index 0000000000..b48c137c38
--- /dev/null
+++ b/web/sass-files/sass/routes/_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/styles.scss b/web/sass-files/sass/styles.scss
index 7bf3574d25..88c098f18a 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:
* */
-// 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 'routes/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 0000000000..767e30847b
--- /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 0000000000..9013920fa5
--- /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 0000000000..28723e1a5f
--- /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 0000000000..e7f0c0c468
--- /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 0000000000..065c37a171
--- /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 0000000000..291145e809
--- /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
similarity index 51%
rename from web/sass-files/sass/partials/_font-awesome.scss
rename to web/sass-files/sass/vendors/_font-awesome.scss
index 74580a7e81..49ab318cdd 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 0000000000..ed8a124a2e
--- /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 0000000000..212a226874
--- /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;
+}
{this.props.children}
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 1943fb4097..8f6948ee44 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(
- ');
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 (
diff --git a/web/react/components/suggestion/at_mention_provider.jsx b/web/react/components/suggestion/at_mention_provider.jsx
index c5bd13c267..b53b351d9d 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 = ;
+ icon = ;
} else if (item.username === 'channel') {
username = 'channel';
description = (
@@ -33,19 +33,19 @@ class AtMentionSuggestion extends React.Component {
defaultMessage='Notifies everyone in the channel'
/>
);
- icon = ;
+ icon = ;
} else {
username = item.username;
description = Utils.getFullName(item);
icon = (
{icon}
-
+
diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx
index eaf8b5069b..3afd0e8405 100644
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -164,7 +164,7 @@ class SearchBar extends React.Component {
{name}
{button}
@@ -185,7 +185,7 @@ export default class PopoverListMembers extends React.Component {
title={title}
id='member-list-popover'
>
- {popoverHtml}
+ {popoverHtml}
+
-
-
-
+
-
- {content}
-
-
+
-
+ 
+
-
+
+
);
}
diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx
index 18cce3bded..bed798b3e8 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: `
{'@' + username}
-
+
{description}
diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx
index 21d6d0e0e1..fffb2df076 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 ccebeb990b..0f59071792 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 {
{items}
diff --git a/web/react/components/user_list.jsx b/web/react/components/user_list.jsx
index 39453a8270..783d552dc6 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 = (
-
+
);
}
return (
-
+ {content}
+
);
}
}
diff --git a/web/react/components/user_list_row.jsx b/web/react/components/user_list_row.jsx
index 1ca40687f3..8c664ba822 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 (
-
-
-
-
- {name}
-
-
- {user.email}
-
+
+ {name}
-
- {buttons}
+
+ {user.email}
-
+ {buttons}
+
+