summaryrefslogtreecommitdiffstats
path: root/web/sass-files/sass/layout
diff options
context:
space:
mode:
Diffstat (limited to 'web/sass-files/sass/layout')
-rw-r--r--web/sass-files/sass/layout/_content.scss85
-rw-r--r--web/sass-files/sass/layout/_footer.scss30
-rw-r--r--web/sass-files/sass/layout/_forms.scss66
-rw-r--r--web/sass-files/sass/layout/_headers.scss370
-rw-r--r--web/sass-files/sass/layout/_markdown.scss116
-rw-r--r--web/sass-files/sass/layout/_module.scss13
-rw-r--r--web/sass-files/sass/layout/_navigation.scss137
-rw-r--r--web/sass-files/sass/layout/_post-right.scss155
-rw-r--r--web/sass-files/sass/layout/_post.scss997
-rw-r--r--web/sass-files/sass/layout/_sidebar-left.scss197
-rw-r--r--web/sass-files/sass/layout/_sidebar-menu.scss72
-rw-r--r--web/sass-files/sass/layout/_sidebar-right.scss129
-rw-r--r--web/sass-files/sass/layout/_webhooks.scss37
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;
+ }
+}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-30 23:10:04 +0000