diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-03-15 14:05:05 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-03-15 14:05:05 -0400 |
commit | 3745204097b2f03cd5f3fc1292ea62fb4f931232 (patch) | |
tree | 3380ee0fd2341dac1814aed8cf851bfe274a21a7 /web/sass-files/sass/layout | |
parent | bf7ae0711743926cfbb031675cc3320d7a942465 (diff) | |
parent | 7d79a916dd58d51989d35721060cfca6dce1baca (diff) | |
download | chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.gz chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.bz2 chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.zip |
Merge pull request #2429 from asaadmahmoodspin/ui-improvements
PLT-963 - Improving scss structure
Diffstat (limited to 'web/sass-files/sass/layout')
-rw-r--r-- | web/sass-files/sass/layout/_content.scss | 85 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_footer.scss | 30 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_forms.scss | 66 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_headers.scss | 370 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_markdown.scss | 116 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_module.scss | 13 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_navigation.scss | 137 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_post-right.scss | 155 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_post.scss | 997 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_sidebar-left.scss | 197 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_sidebar-menu.scss | 72 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_sidebar-right.scss | 129 | ||||
-rw-r--r-- | web/sass-files/sass/layout/_webhooks.scss | 37 |
13 files changed, 2404 insertions, 0 deletions
diff --git a/web/sass-files/sass/layout/_content.scss b/web/sass-files/sass/layout/_content.scss new file mode 100644 index 000000000..71bef0d7f --- /dev/null +++ b/web/sass-files/sass/layout/_content.scss @@ -0,0 +1,85 @@ +@charset 'UTF-8'; + +.inner-wrap { + &.move--left { + .search-bar__container { + display: none; + } + } + + &.move--right { + .search-bar__container { + display: none; + } + } +} + +.app__content { + height: 100%; + padding-top: 50px; + margin-left: 220px; + position: relative; + background: #fff; + @include display-flex; + @include flex-direction(column); + + .channel__wrap & { + padding-top: 0; + } +} +#post-create { + @include flex(0 0 auto); + background: #fff; + width: 100%; + z-index: 3; +} + +#archive-link-home { + @include flex(0 0 auto); + cursor: pointer; + padding: 10px 20px; + font-size: 13px; + + .fa { + font-size: 11px; + @include opacity(.7); + } + + a { + color: inherit; + } +} + +.post-list { + .new-messages-hr { + margin-top: 5px; + margin-bottom: 0px; + border: 0; + border-top: 1px solid #f80; + } + + .new-messages-text { + margin-top: 2px; + margin-bottom: 5px; + color: #f80; + text-align: center; + } +} + +.new-messages-hr { + margin-top: 5px; + margin-bottom: 0px; + border: 0; + border-top: 1px solid #f80; +} + +.new-messages-text { + margin-top: 2px; + margin-bottom: 5px; + color: #f80; + text-align: center; +} + +.delete-message-text { + margin-top: 10px; +} diff --git a/web/sass-files/sass/layout/_footer.scss b/web/sass-files/sass/layout/_footer.scss new file mode 100644 index 000000000..5624e6376 --- /dev/null +++ b/web/sass-files/sass/layout/_footer.scss @@ -0,0 +1,30 @@ +@charset 'UTF-8'; + +.footer-pane { + 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; + } +} + +.footer, +.footer-pane, +.footer-push { + height: 89px; +} + + diff --git a/web/sass-files/sass/layout/_forms.scss b/web/sass-files/sass/layout/_forms.scss new file mode 100644 index 000000000..1f51603cc --- /dev/null +++ b/web/sass-files/sass/layout/_forms.scss @@ -0,0 +1,66 @@ +@charset 'UTF-8'; + +.form-horizontal { + .modal-intro { + margin: -10px 0 30px; + } + + .form__label { + text-align: left; + padding-right: 3px; + font-weight: 600; + font-size: 1.1em; + + &.light { + font-weight: normal; + color: #999; + font-size: 1.05em; + font-style: italic; + padding-top: 2px; + } + } + + .input__help { + color: inherit; + margin: 10px 0 0 10px; + word-break: break-word; + @include opacity(.8); + + &.dark { + @include opacity(1); + } + + &.error { + color: #a94442; + } + } + + .form-control { + font-weight: normal; + } + + .form-group { + margin-bottom: 25px; + + &.less { + margin-bottom: 10px; + } + } +} + +.help-block { + font-size: .95em; + margin: 10px 0 0; + color: #999; +} + +.disabled-input { + background-color: #ddd !important; +} + +.form-group { + &.form-group--small { + margin-bottom: 10px; + } +} + diff --git a/web/sass-files/sass/layout/_headers.scss b/web/sass-files/sass/layout/_headers.scss new file mode 100644 index 000000000..0a6b9f920 --- /dev/null +++ b/web/sass-files/sass/layout/_headers.scss @@ -0,0 +1,370 @@ +@charset 'UTF-8'; + +#channel-header { + @include flex(0 0 56px); +} + +.row { + &.header { + position: relative; + + .channel__wrap & { + display: none; + } + } +} + +.header-dropdown__icon { + font-size: 11px; + color: inherit; + top: 3px; +} + +.channel-header__info { + display: table; + table-layout: fixed; + width: 100%; + + > div { + display: block; + white-space: nowrap; + word-break: break-word; + + &.dropdown { + max-width: 100%; + padding-right: 1em; + float: left; + + .header-dropdown__icon { + color: #777; + } + + a { + text-decoration: none; + } + + .modal { + white-space: normal; + } + } + + &.description { + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; + max-height: 45px; + .markdown-inline-img { + max-height: 45px; + } + } + + &.popover { + white-space: normal; + } + } +} + +.channel-intro { + margin: 0 auto 35px; + padding: 0 1em 5px; + max-width: 1000px; + border-bottom: 1px solid lightgrey; + + .intro-links { + margin: 0 1.5em 10px 0; + display: inline-block; + + .fa { + margin-right: 5px; + } + } + + .channel-intro-profile { + margin-top: 5px; + margin-left: 63px; + } + + .channel-intro-img { + float: left; + img { + @include border-radius(100px); + } + } + + .channel-intro__title { + font-weight: 600; + font-size: 20px; + margin-bottom: 15px; + } + + .channel-intro__content { + background: #f7f7f7; + padding: 10px 15px; + @include border-radius(3px); + } + .channel-intro-text { + margin-top: 35px; + } +} + +// Team Header in Sidebar +.sidebar--left, +.sidebar--menu { + .team__header { + position: relative; + padding: 9px 10px; + @include legacy-pie-clearfix; + + &:before { + @include single-transition(all, .05s, linear); + content: ''; + background: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + } + + &:hover { + &:before { + background: rgba(black, .1); + } + + .user__name { + color: #fff; + } + + .navbar-right { + .dropdown-toggle { + @include opacity(1); + } + } + } + + .navbar-right { + font-size: .85em; + position: absolute; + top: 10px; + right: 22px; + z-index: 5; + + .dropdown-toggle { + @include single-transition(all, .1s, linear); + padding: 10px; + @include opacity(.8); + } + + .dropdown-menu { + li a { + padding: 3px 20px; + text-overflow: ellipsis; + overflow: hidden; + } + } + + .dropdown__icon { + fill: #fff; + } + } + + .settings__link a:hover, + a:visited, + a:link, + a:active { + text-decoration: none; + } + + .user__picture { + width: 36px; + height: 36px; + float: left; + @include border-radius(36px); + margin-right: 6px; + } + + .header__info { + color: #fff; + @include clearfix; + padding-left: 2px; + z-index: 1; + position: relative; + } + + .team__name, + .user__name { + display: block; + font-weight: 600; + font-size: 16px; + max-width: 85%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-decoration: none; + } + + .team__name { + line-height: 22px; + margin-top: -2px; + float: left; + } + + .user__name { + @include single-transition(all, .1s, linear); + font-size: 14px; + line-height: 18px; + font-weight: 400; + color: #eee; + color: rgba(#fff, .8); + } + + > .nav { + > li { + > a { + float: right; + background: none !important; + padding: 2px; + + &.dropdown-toggle { + line-height: 1.8; + font-size: 1em; + color: #fff; + } + } + } + } + } + .search__clear { + display: none; + } +} + +#navbar { + .navbar-default { + .navbar-toggle { + &.menu-toggle { + padding: 0 1em; + } + } + } +} + +.channel-header { + width: 100%; + border-left: none; + font-size: 14px; + line-height: 56px; + + #member_popover { + width: 50px; + color: #999; + cursor: pointer; + + .fa { + margin-left: 4px; + font-size: 16px; + } + } + + &.alt { + margin: 0; + th { + font-weight: normal !important; + } + td { + border: none; + } + } + + th { + text-align: center; + &:first-child { + text-align: left !important; + border-left: none; + width: 100%; + padding-left: 1em; + } + &:last-child { + width: 8.9%; + } + } + + td { + padding: 5px 25px 5px !important; + font-size: 13px; + text-align: center !important; + &:first-child { + text-align: left !important; + } + } + + .heading { + margin: 0; + color: #555; + font-size: 1.3em; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + display: inline-block; + vertical-align: middle; + margin-right: 4px; + } + + .caret { + margin-top: 3px; + } + + .more { + color: #81848b; + display: inline-block; + vertical-align: top; + text-transform: capitalize; + font-size: 13px; + } + + .disabled { + color: #999; + } +} + +.channel-header__navbar { + font-size: 16px; + + .heading { + margin-right: 3px; + } + + .header-dropdown__icon { + top: 1px; + } +} + +.channel-header__links { + font-family: 'Open Sans', sans-serif; + height: 30px; + width: 24px; + line-height: 26px; + margin-right: 9px; + font-size: 22px; + + .channel__wrap.move--left & { + position: absolute; + right: -400px; + top: 14px; + } + + > a { + color: inherit; + text-decoration: none; + @include opacity(.6); + @include single-transition(all, .1s, ease-in); + + &:hover { + @include opacity(1); + } + &:focus { + color: inherit; + } + } +} diff --git a/web/sass-files/sass/layout/_markdown.scss b/web/sass-files/sass/layout/_markdown.scss new file mode 100644 index 000000000..307060ac3 --- /dev/null +++ b/web/sass-files/sass/layout/_markdown.scss @@ -0,0 +1,116 @@ +@charset 'UTF-8'; + +.markdown__heading { + font-weight: 700; + line-height: 1.5; +} + +.markdown__paragraph-inline { + display: inline; + + + .markdown__paragraph-inline { + margin-left: 4px; + } +} + +#post-list { + .markdown-inline-img { + -moz-force-broken-image-icon: 1; + max-height: 500px; + height: 500px; + } +} + +.post-body--code { + position: relative; + + pre { + margin-bottom: 0; + word-break: normal; + overflow: auto; + word-wrap: normal; + } +} + +.post-body--code__language { + -webkit-transform: translate3d(0,0,0); + position: absolute; + top: 0; + right: 0; + color: #fff; + background: #21586d; + padding: 4px 10px 5px 10px; + font-size: 13px; + opacity: .7; + z-index: 5; +} + +.post__body { + hr { + height: 4px; + padding: 0; + margin: 15px 0 16px; + background-color: #e7e7e7; + border: 0 none; + @include opacity(.2); + } + + code { + white-space: pre; + } + + .codespan__pre-wrap { + code { + white-space: pre-wrap; + } + } +} + +.markdown__table { + background: #fff; + margin: 5px 0 10px; + + th, + td { + padding: 6px 13px; + border: 1px solid #ddd; + } + + tbody tr { + background: #fff; + + &:nth-child(2n) { + background-color: #f8f8f8; + } + } +} +blockquote { + border: none; + position: relative; + font-size: 16px; + padding: 10px 10px 10px 38px; + margin-bottom: 0; + + &:before { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; + text-decoration: inherit; + content: '\f10d'; + left: 8px; + top: 5px; + position: absolute; + font-size: 20px; + @include opacity(.6); + } +} +pre { + border: none; + margin: 5px 0; + color: inherit; +} +code { + background: #fff; + color: inherit; +} diff --git a/web/sass-files/sass/layout/_module.scss b/web/sass-files/sass/layout/_module.scss new file mode 100644 index 000000000..39ab2c6f8 --- /dev/null +++ b/web/sass-files/sass/layout/_module.scss @@ -0,0 +1,13 @@ +// Only for combining all the files in this folder +@import 'content'; +@import 'footer'; +@import 'forms'; +@import 'headers'; +@import 'markdown'; +@import 'navigation'; +@import 'post'; +@import 'post-right'; +@import 'sidebar-left'; +@import 'sidebar-menu'; +@import 'sidebar-right'; +@import 'webhooks'; diff --git a/web/sass-files/sass/layout/_navigation.scss b/web/sass-files/sass/layout/_navigation.scss new file mode 100644 index 000000000..65c62cb17 --- /dev/null +++ b/web/sass-files/sass/layout/_navigation.scss @@ -0,0 +1,137 @@ +@charset 'UTF-8'; + +.nav > li > a:focus, +.nav > li > a:hover { + background: transparent; +} + +#navbar { + input { + margin: 0px 5px 0px 2px; + } + + .navbar-default { + position: absolute; + border: none; + min-height: 45px; + background: $color--primary; + + .navbar-nav { + > li { + > a { + height: 45px; + padding: 0 1.3em; + + i { + line-height: 45px; + } + } + } + } + + .navbar-toggle { + width: 43px; + float: left; + border-color: transparent; + border-radius: 0; + margin: 0; + padding: 0 10px; + line-height: 48px; + height: 44px; + z-index: 5; + fill: #fff; + + .icon-bar { + background: #fff; + width: 21px; + } + + .glyphicon-search { + top: -1px; + } + + .icon--white { + color: #fff; + } + + &:hover, + &:active, + &:focus { + background: inherit; + } + } + + .navbar-brand { + padding: 0 .5em; + height: 45px; + line-height: 45px; + float: none; + font-size: 16px; + + .heading { + margin-right: 3px; + font-weight: 600; + color: #fff; + } + + .header-dropdown__icon { + top: 1px; + } + + .dropdown-toggle { + color: #fff; + } + + .description { + display: inline-block; + margin-right: .5em; + color: #fff; + + &.info-popover { + width: 19px; + height: 19px; + background: url('../images/info__icon.png'); + @include background-size(100% 100%); + vertical-align: middle; + top: -1px; + position: relative; + cursor: pointer; + } + } + } + } + + .sidebar-channel { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + span { + white-space: nowrap; + margin-left: 2px; + } + } + + .channel-create-btn { + margin-right: 15px; + } + + .more-channel-table { + width: 100%; + border: 1px solid #dbdbdc; + td { + padding: 7px; + } + button { + width: 110px; + } + } +} + +.badge-notify { + background: red; + position: absolute; + left: 4px; + top: 3px; + z-index: 100; +} diff --git a/web/sass-files/sass/layout/_post-right.scss b/web/sass-files/sass/layout/_post-right.scss new file mode 100644 index 000000000..595577564 --- /dev/null +++ b/web/sass-files/sass/layout/_post-right.scss @@ -0,0 +1,155 @@ +@charset 'UTF-8'; + +.post-right__container { + @include display-flex; + @include flex-direction(column); + height: 100%; + + .post-right-root-message { + padding: 1em 1em 0; + } + + .post-right-comments-container { + position: relative; + + .post { + &:first-child { + padding-top: 15px; + } + } + } + + + .help_format_text { + bottom: -63px; + right: auto; + } + + .post { + &.post--root { + padding-bottom: 1.2em; + border-bottom: 1px solid #ddd; + + .post__body { + background: transparent !important; + } + } + + .post__header { + .col__reply { + top: 0; + text-align: right; + } + } + + .post__body { + width: 100%; + } + } + + hr { + margin-bottom: 0; + border: none; + } + + .post-create__container { + width: 100%; + margin-top: 10px; + + .textarea-wrapper { + min-height: 100px; + } + + .btn { + margin-bottom: 10px; + } + + .custom-textarea { + min-height: 100px; + } + + .msg-typing { + @include opacity(.7); + float: left; + margin-top: 3px; + font-size: 13px; + line-height: 20px; + min-width: 1px; + display: block; + height: 20px; + max-width: 230px; + } + + .post-create-footer { + width: 100%; + padding: 5px 0 10px; + } + + .post-right-comments-upload-in-progress { + padding: 6px 0; + color: #a8adb7; + margin-right: 10px; + } + } +} +.post-right-header { + font-size: 1em; + text-transform: uppercase; + color: #999; + font-weight: 400; + color: #888; + height: 39px; + padding: 10px 10px 0 15px; + border-bottom: $border-gray; +} + +.post-right-root-container { + padding: 5px 10px; + border-bottom: $border-gray; +} + +.post-right-root-container { + ul { + padding-left: 0; + margin-bottom: 2px; + } +} + +.post-right-channel__name { + font-weight: 600; + margin: 0 0 10px 0; +} + +.post-right-root-container li { + display: inline; + list-style-type: none; + padding-right: 3px; +} + +.post-right-root-time { + color: #a8adb7; +} + +.post-right-create-comment-container { + padding: 5px; + margin-bottom: 18px; + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} + +.post-right__scroll { + position: relative; + overflow: auto; + -webkit-overflow-scrolling: touch; + @include flex(1 1 auto); + + .file-preview__container { + margin-top: 5px; + } +} + +.post-right-comment-time { + color: #a8adb7; +} diff --git a/web/sass-files/sass/layout/_post.scss b/web/sass-files/sass/layout/_post.scss new file mode 100644 index 000000000..ce055035d --- /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/layout/_sidebar-left.scss b/web/sass-files/sass/layout/_sidebar-left.scss new file mode 100644 index 000000000..ece054a15 --- /dev/null +++ b/web/sass-files/sass/layout/_sidebar-left.scss @@ -0,0 +1,197 @@ +@charset 'UTF-8'; + +.sidebar--left { + position: absolute; + width: 220px; + left: 0; + height: 100%; + border-right: $border-gray; + background: #fafafa; + z-index: 5; + + &.sidebar--padded { + padding-top: 44px; + } + .dropdown-menu { + max-height: 400px; + overflow-x: hidden; + overflow-y: auto; + max-width: 200px; + width: 200px; + } + .search__form { + margin: 0; + padding: 1em 1em 0; + display: none; + } + .badge { + background-color: $color--primary; + position: absolute; + right: 10px; + top: 5px; + } + .status { + position: relative; + top: 1px; + margin-right: 6px; + width: 12px; + display: inline-block; + svg { + max-height: 14px; + } + i, + path, + ellipse { + @include opacity(.5); + &.online--icon, + &.away--icon { + @include opacity(1); + } + } + .fa-lock { + margin-left: 1px; + } + .fa-globe { + top: -1px; + position: relative; + } + } + .nav-pills__container { + height: calc(100% - 80px); + position: relative; + overflow: auto; + -webkit-overflow-scrolling: touch; + } + + .nav-pills__unread-indicator { + position: absolute; + left: 0; + right: 0; + width: 72%; + color: #fff; + background: #2389d7; + @include border-radius(50px); + margin: 0 auto; + padding: 3px 0 4px; + font-size: 13.5px; + text-align: center; + z-index: 1; + } + + .nav-pills__unread-indicator-top { + top: 66px; + } + .nav-pills__unread-indicator-bottom { + bottom: 20px; + } + + .nav { + &.nav-stacked { + > li + li { + margin: 0; + } + } + li { + > h4 { + font-size: 1em; + text-transform: uppercase; + margin: 1.1em 0 .5em; + font-weight: 400; + color: #aaa; + letter-spacing: -.3px; + padding: 0 10px 0 15px; + } + > a { + padding: 3px 10px 3px 25px; + line-height: 1.5; + border-radius: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + &.has-badge { + padding-right: 30px; + } + &.has-close { + padding-right: 30px; + &:hover { + .btn-close { + display: block; + @include opacity(.8); + } + } + .btn-close { + font-family: 'Open Sans', sans-serif; + position: absolute; + right: 15px; + top: -1px; + font-size: 20px; + font-weight: 600; + @include opacity(0); + display: none; + &:hover { + @include opacity(1); + } + } + } + &.nav-more { + text-decoration: underline; + } + &.unread-title { + font-weight: 600; + } + } + &.active { + a { + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #000; + } + } + a, + a:hover, + a:focus { + background-color: rgba(black, .1); + border-radius: 0; + font-weight: 400; + position: relative; + } + } + } + } + .modal-title { + line-height: 2em; + } + + .add-channel-btn { + float: right; + outline: none; + margin: -2px 0 0 0; + color: #aaa; + padding: 0 5px; + text-decoration: none; + font-size: 22px; + line-height: 18px; + font-weight: 700; + &:hover { + color: #666; + } + } +} + +.channel-loading-gif { + height: 15px; + width: 15px; + margin-top: 2px; +} + +.join-channel-loading-gif { + margin-top: 5px; + margin-left: 10px; + height: 25px; + width: 25px; +} diff --git a/web/sass-files/sass/layout/_sidebar-menu.scss b/web/sass-files/sass/layout/_sidebar-menu.scss new file mode 100644 index 000000000..167b24ba0 --- /dev/null +++ b/web/sass-files/sass/layout/_sidebar-menu.scss @@ -0,0 +1,72 @@ +@charset 'UTF-8'; + +.sidebar--menu { + position: absolute; + width: 220px; + right: 0; + height: 100%; + border-right: $border-gray; + padding: 0 0 2em 0; + background: #fafafa; + display: none; + .nav-pills__container { + padding-top: 5px; + } + .team__header { + display: none; + padding: 0 15px; + @include legacy-pie-clearfix; + a { + color: #fff; + } + .navbar-right { + font-size: .85em; + margin: 16px -5px 0; + .dropdown-toggle { + padding: 0 10px; + } + .dropdown-menu { + li a { + padding: 3 20px; + color: #555; + } + } + .dropdown__icon { + background: url('../images/dropdown-icon.png'); + width: 4px; + height: 16px; + @include background-size(100% 100%); + display: inline-block; + } + } + .team__name { + float: left; + line-height: 50px; + font-weight: 600; + font-size: 1.2em; + max-width: 80%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-decoration: none; + } + } + .nav { + > li { + > a { + font-size: 15px; + background: none !important; + color: inherit; + line-height: 40px; + padding: 0 15px; + .fa, + .glyphicon { + width: 25px; + text-align: center; + left: -5px; + position: relative; + } + } + } + } +} diff --git a/web/sass-files/sass/layout/_sidebar-right.scss b/web/sass-files/sass/layout/_sidebar-right.scss new file mode 100644 index 000000000..e1a7d7641 --- /dev/null +++ b/web/sass-files/sass/layout/_sidebar-right.scss @@ -0,0 +1,129 @@ +@charset 'UTF-8'; + +.sidebar--right { + position: fixed; + width: 400px; + height: 100%; + right: 0px; + padding: 0; + background: #fff; + @include translateX(400px); + + .post-body { + img { + max-height: 200px; + } + } + + .post { + .post__header { + .col__name { + .user-popover { + max-width: 130px; + } + } + } + } + + .sidebar--right__content { + height: 100%; + @include display-flex; + @include flex-direction(column); + } + + .sidebar--right__back { + color: inherit; + @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; + border-top: $border-gray; + @include display-flex; + @include flex-direction(column); + height: calc(100% - 56px); + @include border-radius(2px 0 0 0); + } + + .sidebar__overlay { + width: 100%; + height: 100%; + background-color: yellow; + @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: .5; + font-size: 22px; + line-height: 0; + background: none; + float: right; + outline: none; + border: none; + @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; + color: inherit; + height: 44px; + padding: 0 1em; + line-height: 44px; + @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(.7); + padding: 10px 0 0 30px; + } + + li { + font-size: .95em; + padding-bottom: 10px; + } + } + + .suggestion-list__content { + max-height: 120px; + } +} + +.sidebar-right-container { + height: 100%; +} diff --git a/web/sass-files/sass/layout/_webhooks.scss b/web/sass-files/sass/layout/_webhooks.scss new file mode 100644 index 000000000..d6e367218 --- /dev/null +++ b/web/sass-files/sass/layout/_webhooks.scss @@ -0,0 +1,37 @@ +@charset 'UTF-8'; + +.webhooks__container { + 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; + top: 8px; + width: 30px; + height: 30px; + font-size: 22px; + font-weight: bold; + text-align: center; + text-decoration: none; + color: #e05f5d; + } + + .webhook__url { + padding-right: 20px; + } +} |