From d8bd57901e33a7057e26e782e295099ffcc0da89 Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Wed, 6 Sep 2017 23:04:13 -0700 Subject: Removing webapp --- webapp/sass/layout/_content.scss | 95 -- webapp/sass/layout/_footer.scss | 30 - webapp/sass/layout/_forms.scss | 93 -- webapp/sass/layout/_headers.scss | 534 ----------- webapp/sass/layout/_markdown.scss | 223 ----- webapp/sass/layout/_module.scss | 14 - webapp/sass/layout/_navigation.scss | 190 ---- webapp/sass/layout/_post-right.scss | 156 --- webapp/sass/layout/_post.scss | 1642 -------------------------------- webapp/sass/layout/_sidebar-left.scss | 372 -------- webapp/sass/layout/_sidebar-menu.scss | 95 -- webapp/sass/layout/_sidebar-right.scss | 291 ------ webapp/sass/layout/_team-sidebar.scss | 124 --- webapp/sass/layout/_webhooks.scss | 303 ------ 14 files changed, 4162 deletions(-) delete mode 100644 webapp/sass/layout/_content.scss delete mode 100644 webapp/sass/layout/_footer.scss delete mode 100644 webapp/sass/layout/_forms.scss delete mode 100644 webapp/sass/layout/_headers.scss delete mode 100644 webapp/sass/layout/_markdown.scss delete mode 100644 webapp/sass/layout/_module.scss delete mode 100644 webapp/sass/layout/_navigation.scss delete mode 100644 webapp/sass/layout/_post-right.scss delete mode 100644 webapp/sass/layout/_post.scss delete mode 100644 webapp/sass/layout/_sidebar-left.scss delete mode 100644 webapp/sass/layout/_sidebar-menu.scss delete mode 100644 webapp/sass/layout/_sidebar-right.scss delete mode 100644 webapp/sass/layout/_team-sidebar.scss delete mode 100644 webapp/sass/layout/_webhooks.scss (limited to 'webapp/sass/layout') diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss deleted file mode 100644 index 7bf6c08ad..000000000 --- a/webapp/sass/layout/_content.scss +++ /dev/null @@ -1,95 +0,0 @@ -@charset 'UTF-8'; - -.inner-wrap { - &.move--left, - &.webrtc--show { - .search-bar__container { - display: none; - } - - .search-btns { - display: none; - } - - .header-list__right { - // the negative margin-right is used - // to prevent the icons in the header from - // moving to the left when the RHS is open - // - // the below z-index is used to ensure the icons - // stays on the top and don't get hidden by the - // search's input block - float: right; - padding-right: 0px !important; - position: relative; - z-index: 6; - } - } - - &.move--right { - .search-bar__container { - display: none; - } - - .search-btns { - display: none; - } - - .header-list__right { - // the negative margin-right is used - // to prevent the icons in the header from - // moving to the left when the RHS is open - // - // the below z-index is used to ensure the icons - // stays on the top and don't get hidden by the - // search's input block - float: right; - margin-right: -18px; - padding-right: 0px !important; - position: relative; - z-index: 6; - } - } -} - -.app__content { - @include display-flex; - @include flex-direction(column); - background: $white; - height: 100%; - margin-left: 220px; - padding-top: 50px; - position: relative; - - .channel__wrap & { - padding-top: 0; - } -} - -#archive-link-home { - @include flex(0 0 auto); - cursor: pointer; - font-size: 13px; - - .fa { - @include opacity(.7); - font-size: 11px; - } - - a { - color: inherit; - display: block; - padding: 10px 20px; - width: 100%; - } -} - -.delete-message-text { - margin-top: 10px; -} - -.col-sm-auto { - padding-left: 15px; - padding-right: 15px; -} - diff --git a/webapp/sass/layout/_footer.scss b/webapp/sass/layout/_footer.scss deleted file mode 100644 index 36fdbd55b..000000000 --- a/webapp/sass/layout/_footer.scss +++ /dev/null @@ -1,30 +0,0 @@ -@charset 'UTF-8'; - -.footer-pane { - background: $bg--gray; - padding-bottom: 1em; - - .footer-link { - padding: 0 1.5em; - - &.copyright { - color: $dark-gray; - padding-right: 0; - } - } - - .footer-site-name { - font-size: 14px; - font-weight: bold; - padding: 1.5em 0 1em; - text-transform: uppercase; - } -} - -.footer, -.footer-pane, -.footer-push { - height: 89px; -} - - diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss deleted file mode 100644 index a49acf3e3..000000000 --- a/webapp/sass/layout/_forms.scss +++ /dev/null @@ -1,93 +0,0 @@ -@charset 'UTF-8'; - -.radio, -.checkbox { - &.margin-bottom--none { - margin-bottom: 0; - } -} - -.form-horizontal { - .modal-intro { - margin: -10px 0 30px; - } - - .form__label { - font-size: 1.1em; - font-weight: 600; - padding-right: 3px; - text-align: left; - - &.light { - @include opacity(.6); - font-size: 1.05em; - font-style: italic; - font-weight: normal; - padding-top: 2px; - } - } - - .input__help { - @include opacity(.8); - color: inherit; - margin: 10px 0 0 0; - word-break: break-word; - - &.dark { - @include opacity(1); - } - - &.error { - color: darken($red, 20%); - } - } - - .form-control { - font-weight: normal; - } - - .form-group { - margin-bottom: 25px; - - &.less { - margin-bottom: 10px; - } - } -} - -.help-block { - color: $dark-gray; - font-size: .95em; - margin: 10px 0 0; -} - -.form-group { - &.form-group--small { - margin-bottom: 10px; - } -} - -.has-error { - .help-block, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline { - color: $red; - } - - .form__label { - &.control-label { - color: inherit !important; - } - } - - &.radio, - &.checkbox, - &.radio-inline, - &.checkbox-inline { - label { - color: $red; - } - } -} diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss deleted file mode 100644 index 4b7348d7b..000000000 --- a/webapp/sass/layout/_headers.scss +++ /dev/null @@ -1,534 +0,0 @@ -@charset 'UTF-8'; - -.channel-header { - @include flex(0 0 70px); - border-bottom: 1px solid; - font-size: 14px; - position: relative; - width: 100%; - z-index: 9; - - .flex-parent { - display: flex; - } - - .flex-child { - &:first-child { - flex: 1; - min-width: 0; - padding-left: 20px; - } - - .markdown__paragraph-inline { - overflow: hidden; - text-overflow: ellipsis; - width: calc(100% - 50px); - } - } - - .channel-header__icon { - @include border-radius(50%); - border: 1px solid; - cursor: pointer; - height: 37px; - line-height: 36px; - margin: 16px 10px 0 0; - min-width: 30px; - text-align: center; - width: 37px; - - &.wide { - @include border-radius(37px); - padding: 0; - white-space: nowrap; - width: auto; - - > div { - padding: 0 13px 0 15px; - } - } - - .icon__text { - font-weight: 600; - margin-right: 9px; - } - - a { - display: block; - } - - .fa { - font-size: 19px; - } - - & + div { - display: none; - } - - .icon { - position: relative; - } - - .icon__pin, - .icon__members { - top: 2px; - } - - .icon__mentions { - top: 5px; - } - - .icon__flag { - top: 3px; - } - } - - .move--left & { - .icon--hidden { - display: none; - } - } - - &.alt { - margin: 0; - - th { - font-weight: normal; - vertical-align: top; - - &.header-list__right { - padding-right: 4px; - white-space: nowrap; - } - } - - td { - border: none; - } - } - - .heading { - display: inline-block; - font-size: 17px; - font-weight: 400; - margin: 0 4px 0 0; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; - } - - .caret { - margin-top: 3px; - } - - .more { - color: #81848b; - display: inline-block; - font-size: 13px; - text-transform: capitalize; - vertical-align: top; - } - - .disabled { - color: #999999; - } -} - -.row { - &.header { - position: relative; - - .channel__wrap & { - display: none; - } - } -} - -.header-dropdown__icon { - color: inherit; - font-size: 21px; - margin-left: 1px; - position: relative; - top: 2px; -} - -.channel-header__info { - margin-top: 12px; - white-space: nowrap; - .header-dropdown__icon { - color: $dark-gray; - } - .channel-header__title { - > a { - display: inline-block; - text-decoration: none; - width: calc(100% - 65px); - } - - .modal { - white-space: normal; - } - } - - .channel-header__description { - height: 19px; - margin-top: 3px; - margin-bottom: 13px; - overflow: hidden; - position: relative; - text-overflow: ellipsis; - width: calc(100% - 18px); - - .markdown__heading { - font-size: 1em; - margin: 0; - } - - &.light { - @include opacity(.6); - color: inherit; - - &:hover, - &:focus { - color: inherit; - } - } - - .markdown-inline-img { - max-height: 45px; - } - } - - .status { - width: 18px; - - svg { - max-height: 20px; - width: 16px; - } - } -} - -.channel-intro { - margin: 0 auto 10px; - padding: 0 15px; - - &.channel-intro--centered { - max-width: 1020px; - } - - .intro-links { - display: inline-block; - margin: 0 1.5em 10px 0; - - .fa { - margin-right: 5px; - } - } - - .channel-intro-profile { - margin-top: 5px; - - .user-popover { - max-width: calc(100% - 100px); - overflow: hidden; - text-overflow: ellipsis; - } - } - - .channel-intro-img { - .status-wrapper { - height: 50px; - margin: 0 10px 10px 0; - } - - img { - @include border-radius(100px); - } - } - - .channel-intro__title { - font-size: 20px; - font-weight: 600; - margin-bottom: 15px; - } - - .channel-intro__content { - @include border-radius(3px); - background: $bg--gray; - padding: 10px 15px; - } -} - -// Team Header in Sidebar -.sidebar--left, -.sidebar--menu, -.admin-sidebar { - - .divider { - border-top: 1px solid transparent; - margin: 0.5em 0; - - & + .divider { - display: none; - } - } - - .team__header { - @include legacy-pie-clearfix; - @include display-flex(); - @include flex-direction(row-reverse); - padding: 16px 40px 12px 12px; - position: relative; - - &:before { - @include single-transition(all, .05s, linear); - background: none; - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } - - &:hover { - &:before { - @include alpha-property(background, $black, .1); - } - - .user__name { - color: $white; - } - - .sidebar-header-dropdown { - .sidebar-header-dropdown__toggle { - @include opacity(1); - } - } - - .navbar-right { - .dropdown-toggle { - @include opacity(1); - } - } - } - - a { - text-decoration: none; - @include flex-grow(1); - } - - .sidebar-header-dropdown, - .admin-navbar-dropdown { - font-size: .85em; - height: 100%; - left: 0; - margin-right: -22px; - position: absolute; - right: 22px; - top: 0; - - li { - width: 100%; - } - - .sidebar-header-dropdown__toggle, - .admin-navbar-dropdown__toggle { - @include opacity(.8); - @include single-transition(all, .1s, linear); - background: none; - color: $white; - display: block; - font-size: 1em; - height: 100%; - left: 0; - line-height: 1.8; - padding: 10px; - width: 100%; - } - - .dropdown-menu { - margin-right: 10px; - margin-top: 4px; - width: 199px; - - a { - overflow: hidden; - padding: 3px 20px; - text-overflow: ellipsis; - } - } - - .sidebar-header-dropdown__icon, - .admin-navbar-dropdown__icon { - border-radius: 36px; - fill: $white; - float: right; - height: 36px; - line-height: 36px; - position: relative; - right: -3px; - text-align: center; - top: 7px; - width: 36px; - } - } - - .user__picture { - @include border-radius(36px); - float: left; - height: 36px; - width: 36px; - } - - .header__info { - @include clearfix; - @include flex-grow(1); - color: $white; - padding-left: 8px; - position: relative; - } - - .team__name, - .user__name { - display: block; - font-size: 14px; - font-weight: 600; - max-width: 100%; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - } - - .team__name { - line-height: 22px; - } - - .user__name { - @include single-transition(all, .1s, linear); - @include alpha-property(color, $white, .8); - font-size: 14px; - font-weight: 400; - line-height: 18px; - } - } - - .search__clear { - display: none; - } -} - -#navbar { - .navbar-default { - .navbar-toggle { - &.menu-toggle { - padding: 0 1em; - } - } - } -} - -.channel-header__navbar { - font-size: 16px; - - .heading { - margin-right: 3px; - } - - .header-dropdown__icon { - top: 1px; - } -} - -.channel-header__favorites { - @include opacity(.5); - float: left; - height: 20px; - margin: 0 8px 0 0; - padding-top: 3px; - position: relative; - z-index: 1; - - &.inactive { - color: inherit; - - &:active { - color: inherit; - } - } - - &.active { - @include opacity(1); - } - - i { - font-size: 17px; - } -} - -.app__body { - - .channel-header__links { - display: inline-block; - font-family: 'Open Sans', sans-serif; - font-size: 22px; - height: 30px; - line-height: 26px; - margin-right: 1px; - text-align: center; - width: 30px; - - th { - &:last-child { - div { - margin-right: 10px; - } - } - } - - .channel__wrap.move--left &, - .channel__wrap.webrtc--show & { - position: absolute; - right: -400px; - top: 14px; - } - - .icon__flag { - svg { - height: 19px; - position: relative; - top: 2px; - width: 19px; - } - } - - > a { - @include opacity(.6); - @include single-transition(all, .1s, ease-in); - color: inherit; - text-decoration: none; - - &:hover { - @include opacity(0.7); - } - - &:focus { - color: inherit; - } - - &.active { - color: $primary-color; - @include opacity(1); - - .icon { - fill: $primary-color; - } - } - } - } - -} diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss deleted file mode 100644 index d15c00b1a..000000000 --- a/webapp/sass/layout/_markdown.scss +++ /dev/null @@ -1,223 +0,0 @@ -@charset 'UTF-8'; - -h1 { - font-size: 28px; -} - -h2 { - font-size: 25px; -} - -h3 { - font-size: 22px; -} - -h4 { - font-size: 19px; -} - -h5 { - font-size: 15px; -} - -h6 { - font-size: 1em; -} - -.markdown__link { -} - -.markdown__heading { - font-weight: 700; - line-height: 1.5; - margin: 10px 0; - - &:first-child { - margin: 5px 0 10px; - } - - .emoticon { - min-height: 1.5em; - min-width: 1.5em; - vertical-align: top; - } -} - -.markdown__paragraph-inline { - display: inline; - - + .markdown__paragraph-inline { - margin-left: 4px; - } -} - -#post-list { - .markdown-inline-img { - -moz-force-broken-image-icon: 1; - margin: 5px 0; - max-height: 500px; - } -} - -.post-code { - overflow-x: auto; - overflow-y: hidden; - position: relative; - - code { - border: 1px solid rgba(221,221,221,1); - border-radius: .25em; - display: block; - font-size: 13px; - margin: 5px 0; - overflow-x: auto; - padding: 6.5px; - text-align: left; - white-space: pre; - } - - td { - padding: 0 .5em; - vertical-align: top; - } - - &:hover .post-code__language { - @include opacity(1); - } - - &--wrap code { - white-space: pre-wrap; - } - - .hljs { - position: relative; - visibility: visible; - } -} - -.post-code__language { - @include opacity(0); - @include transition(opacity, .6s); - @include unselectable; - background: #21586d; - border-radius: 0 0 0 2px; - color: $white; - padding: 4px 10px 5px; - position: absolute; - right: 0; - top: 5px; - z-index: 5; -} - -.post-code__lineno { - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - -webkit-user-select: none; - border-right: 1px solid #aaa; - color: #aaa; - margin-right: .5em; - text-align: right; - user-select: none; -} - -.post-code__search-highlighting { - color: transparent; - right: 6.5px; - left: 6.5px; - pointer-events: none; - position: absolute; - @include user-select(none); -} - -.post__body { - hr { - @include opacity(.2); - background-color: #e7e7e7; - border: 0 none; - height: 4px; - margin: 15px 0 16px; - padding: 0; - } - - .codespan__pre-wrap { - code { - white-space: pre-wrap; - } - } -} - -.markdown__table { - background: $white; - margin: 5px 0 10px; - - th, - td { - border: 1px solid #ddd; - padding: 6px 13px; - } - - tbody tr { - background: $white; - - &:nth-child(2n) { - background-color: #f8f8f8; - } - } -} - -blockquote { - border: none; - font-size: 16px; - margin-bottom: 0; - padding: 10px 10px 10px 38px; - position: relative; - - &:before { - @include opacity(.6); - content: '\f10d'; - display: inline-block; - font-family: FontAwesome; - font-size: 20px; - font-style: normal; - font-weight: normal; - left: 8px; - position: absolute; - text-decoration: inherit; - top: 5px; - } -} - -pre { - color: inherit; - margin: 5px 0; - padding: 0; -} - -code { - background: $white; - color: inherit; -} - -.help { - code { - background: rgba(51,51,51,0.1); - } - - .hljs { - background: #f8f8f8; - color: #333; - display: block; - overflow-x: auto; - padding: 0.5em; - } - - .container { - margin-bottom: 40px; - } - - .links { - font-size: 1.2em; - margin-top: 30px; - } -} diff --git a/webapp/sass/layout/_module.scss b/webapp/sass/layout/_module.scss deleted file mode 100644 index bdaa12acb..000000000 --- a/webapp/sass/layout/_module.scss +++ /dev/null @@ -1,14 +0,0 @@ -// 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 'team-sidebar'; -@import 'webhooks'; diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss deleted file mode 100644 index c04a7a570..000000000 --- a/webapp/sass/layout/_navigation.scss +++ /dev/null @@ -1,190 +0,0 @@ -@charset 'UTF-8'; - -.nav > li > a:focus, -.nav > li > a:hover { - background: transparent; -} - -.nav-tabs { - margin-bottom: 10px; - - > li { - margin-right: 5px; - - > a { - border-bottom-color: transparent !important; - padding: 7px 15px; - - .small { - @include opacity(.8); - margin-left: 4px; - } - } - } -} - -#navbar { - input { - margin: 0 5px 0 2px; - } - - .navbar-default { - background: $primary-color; - border: none; - min-height: 50px; - position: absolute; - - .navbar-nav { - > li { - > a { - height: 50px; - padding: 0 1.3em; - - i { - line-height: 50px; - } - } - } - } - - .navbar-toggle { - border-color: transparent; - border-radius: 0; - fill: $white; - float: left; - height: 50px; - line-height: 48px; - margin: 0; - padding: 0 10px; - width: 50px; - z-index: 5; - - &.navbar-right__icon { - @include border-radius(50px); - height: 32px; - line-height: 0; - margin: 9px 10px 0 0; - padding: 0; - width: 32px; - } - - &.menu-toggle { - margin-right: 16px; - } - - .icon-bar { - background: $white; - width: 21px; - } - - .icon__search { - svg { - left: -1px; - position: relative; - width: 17px; - } - } - - .icon--white { - color: $white; - } - - &:hover, - &:active, - &:focus { - background: inherit; - } - } - - .navbar-brand { - float: none; - font-size: 16px; - height: 50px; - line-height: 50px; - padding: 0 .5em; - - .heading { - display: inline-block; - font-weight: 600; - line-height: 50px; - margin-right: 5px; - max-width: calc(100% - 200px); - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - } - - .header-dropdown__icon { - margin-left: 0; - top: -1px; - } - - .dropdown-toggle { - color: $white; - } - - .description { - color: $white; - display: inline-block; - margin-right: 1em; - - &.info-popover { - @include border-radius(50px); - cursor: pointer; - height: 32px; - line-height: 32px; - margin: 9px 10px 0 0; - position: relative; - text-align: center; - vertical-align: top; - width: 32px; - - &:hover { - background: transparent; - } - - svg { - position: relative; - top: 5px; - } - } - } - } - } - - .sidebar-name { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - span { - margin-left: 2px; - white-space: nowrap; - } - } - - .channel-create-btn { - margin-right: 15px; - } - - .more-channel-table { - border: 1px solid #dbdbdc; - width: 100%; - - td { - padding: 7px; - } - - button { - width: 110px; - } - } -} - -.badge-notify { - background: $red; - left: 4px; - position: absolute; - top: 3px; - z-index: 100; -} diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss deleted file mode 100644 index fefb58092..000000000 --- a/webapp/sass/layout/_post-right.scss +++ /dev/null @@ -1,156 +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; - } - - - .help_format_text { - bottom: -63px; - right: auto; - } - - .post { - &.post--root { - border-bottom: 1px solid #ddd; - padding-bottom: 1em; - - .post__body { - background: transparent !important; - } - } - - .post__header { - .col__reply { - background: transparent !important; - border: none !important; - right: 5px; - text-align: right; - top: -3px; - } - } - - .post__body { - width: 100%; - } - } - - hr { - border: none; - } - - .date-separator { - hr { - border-top: 1px solid #eee; - } - } - - .post-create__container { - width: 100%; - - .btn { - margin-bottom: 10px; - - &.disabled { - background: grey !important; - border-color: transparent !important; - } - } - - .custom-textarea { - min-height: 100px; - } - - .msg-typing { - @include opacity(.7); - display: block; - float: left; - font-size: 13px; - height: 20px; - line-height: 20px; - margin-top: 3px; - max-width: 230px; - min-width: 1px; - } - - .post-right-comments-upload-in-progress { - @include opacity(.7); - margin-right: 10px; - padding: 6px 0; - } - - .emoji-picker { - position: absolute; - top: -361px; - right: 0px; - } - } -} - -.post-right-header { - border-bottom: $border-gray; - color: #999; - font-size: 1em; - font-weight: 400; - height: 39px; - padding: 10px 10px 0 15px; - text-transform: uppercase; -} - -.post-right-root-container { - border-bottom: $border-gray; - padding: 5px 10px; - - ul { - margin-bottom: 2px; - padding-left: 0; - } -} - -.post-right-channel__name { - font-weight: 600; - margin: 0 0 15px; -} - -.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 { - bottom: 0; - left: 0; - margin-bottom: 18px; - padding: 5px; - position: absolute; - width: 100%; -} - -.post-right__scroll { - -webkit-overflow-scrolling: touch; - @include flex(1 1 auto); - padding-top: 10px; - position: relative; - - .file-preview__container { - margin-top: 5px; - } -} - -.post-right-comment-time { - color: #a8adb7; -} diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss deleted file mode 100644 index 54807f01f..000000000 --- a/webapp/sass/layout/_post.scss +++ /dev/null @@ -1,1642 +0,0 @@ -@charset 'UTF-8'; - -.custom-textarea { - background: transparent; - border: 1px solid #cccccc; - height: 100%; - line-height: 20px; - min-height: 36px; - overflow-x: hidden; - resize: none; - white-space: pre-wrap; - word-wrap: break-word; - - &:focus { - border-color: #cccccc; - box-shadow: none; - } - - &.bad-connection { - background: #ffffac !important; - color: #d04444 !important; - } -} - -.textarea-wrapper { - min-height: 37px; - position: relative; - - .textbox-preview-area { - box-shadow: none; - left: 0; - position: absolute; - top: 0; - white-space: normal; - z-index: 2; - } - - .help__text { - bottom: -23px; - cursor: pointer; - font-size: 13px; - position: absolute; - right: 0; - text-align: right; - z-index: 3; - } - - .textbox-preview-link { - margin-right: 8px; - } -} - -.help__format-text { - @include opacity(0); - @include single-transition(all, .5s, ease, .5s); - display: inline-block; - font-size: .85em; - margin-right: 10px; - vertical-align: bottom; - white-space: nowrap; - - b, - i, - span { - margin: 0 2px; - position: relative; - top: -1px; - } - - b { - @include opacity(.9); - } - - code { - background: transparent; - padding: 0; - } - - .textbox-preview-link { - cursor: pointer; - font-size: 13px; - margin-left: 15px; - } -} - -.date-separator, -.new-separator { - height: 2em; - margin: 0; - position: relative; - text-align: center; - z-index: 0; - - &:before, - &:after { - content: ''; - display: none; - height: 1em; - left: 0; - position: absolute; - width: 100%; - } - - &:before { - bottom: 0; - } - - &:after { - top: 0; - } - - &.hovered--after { - &:before { - background: #f5f5f5; - display: block; - } - } - - &.hovered--before { - &:after { - background: #f5f5f5; - display: block; - } - } - - .separator__hr { - border-color: #cccccc; - margin: 0; - position: relative; - top: 1em; - z-index: 5; - } - - .separator__text { - @include border-radius(50px); - background: #ffffff; - color: #555555; - display: inline-block; - font-size: 13px; - font-weight: 700; - line-height: 2em; - padding: 0 1em; - position: relative; - z-index: 5; - } -} - -.new-separator { - .separator__hr { - border-color: #ffaf53; - } - - .separator__text { - color: #ff8800; - font-weight: normal; - } -} - -.file-overlay { - color: $white; - font-size: em(20px); - font-weight: 600; - height: 100%; - left: 0; - pointer-events: none; - position: absolute; - text-align: center; - top: 0; - width: 100%; - z-index: 11; - - .overlay__indent { - @include clearfix; - @include alpha-property(background-color, $black, .6); - height: 100%; - position: relative; - } - - &.center-file-overlay { - } - - &.right-file-overlay { - font-size: em(18px); - - .overlay__circle { - height: 300px; - margin: -150px 0 0 -150px; - width: 300px; - } - - .overlay__files { - margin: 60px auto 15px; - width: 150px; - } - } - - .overlay__circle { - @include border-radius(500px); - @include alpha-property(background, $black, .7); - height: 370px; - left: 50%; - margin: -185px 0 0 -185px; - pointer-events: none; - position: absolute; - top: 50%; - width: 370px; - } - - .overlay__files { - display: block; - margin: 75px auto 20px; - } - - .overlay__logo { - @include opacity(.3); - bottom: 30px; - left: 50%; - margin-left: -50px; - position: absolute; - } - - .fa { - display: inline-block; - font-size: 1.1em; - margin-right: 8px; - } -} - -#post-list { - @include flex(1 1 auto); - height: 100%; - overflow-y: hidden; - position: relative; - - .inactive { - display: none; - } - - .post-list__loading { - @include opacity(.5); - font-size: .9em; - font-style: italic; - padding: 1em 0; - text-align: center; - - i { - margin-right: 2px; - } - - &.post-list__loading-search { - cursor: pointer; - - &:hover { - text-decoration: underline; - } - } - } - - .post-list-holder-by-time { - -webkit-overflow-scrolling: touch; - height: 100%; - overflow-y: scroll; - padding: 1em 0 .5em; - position: absolute; - width: 100%; - - &.active { - display: inline; - } - } - - .more-messages-text { - border: none; - display: block; - font-size: 13px; - margin: 5px 0 10px; - outline: none; - text-align: center; - } - - .new-messages__button { - @include opacity(0); - bottom: 0; - font-size: 13.5px; - left: 0; - margin: 5px auto; - position: absolute; - right: 0; - text-align: center; - visibility: hidden; - z-index: 1; - - .fa { - font-size: 1.2em; - font-weight: bold; - margin-right: .5rem; - position: relative; - top: 1px; - } - - .icon { - margin-left: 5px; - } - - div { - @include border-radius(50px); - cursor: pointer; - display: inline-block; - padding: 4px 20px 3px; - } - - &.visible { - @include opacity(1); - visibility: visible; - } - - &.disabled { - display: none; - } - } -} - -.post-list__timestamp { - @include opacity(0); - @include single-transition(all, .6s, ease); - @include translateY(-45px); - display: none; - left: 0; - position: absolute; - text-align: center; - top: 8px; - width: 100%; - z-index: 50; - - &.scrolling { - @include translateY(0); - @include opacity(.9); - } - - &.rhs { - top: 98px; - } - - > div { - @include border-radius(3px); - @include font-smoothing(initial); - background: $primary-color; - border: 1px solid; - color: $white; - display: inline-block; - font-size: 12px; - line-height: 25px; - padding: 0 8px; - text-align: center; - } -} - -.post-list__arrows { - @include opacity(0); - @include single-transition(all, .6s); - background-repeat: no-repeat; - bottom: 0; - display: none; - fill: #444444; - height: 40px; - left: 9px; - position: absolute; - text-align: center; - width: 40px; - z-index: 50; - - svg { - color: inherit; - height: 28px; - width: 28px; - } - - &.scrolling { - @include opacity(1); - display: block; - } -} - -.post-create__container { - @include flex(0 0 auto); - width: 100%; - z-index: 5; - - label { - font-weight: normal; - } - - form { - margin: 0 auto; - padding: 0 15px 0; - width: 100%; - } - - .center { - max-width: 1028px; - } - - .custom-textarea { - bottom: 0; - max-height: 162px; - overflow: hidden; - padding: 14px 0 14px 20px; - resize: none; - - &:not(.custom-textarea--emoji-picker) { - padding-right: 40px; - } - - &.custom-textarea--emoji-picker { - padding-right: 80px; - } - - &.textbox-preview-area { - overflow-y: auto; - } - } - - .emoji-picker { - position: absolute; - right: 0; - top: -361px; - } - - .scroll { - .post-body__actions { - right: 10px; - } - - .custom-textarea { - -ms-overflow-style: auto; - -webkit-overflow-scrolling: touch; - overflow: auto; - - &:not(.custom-textarea--emoji-picker) { - padding-right: 50px; - } - - &.custom-textarea--emoji-picker { - padding-right: 90px; - } - } - } - - .post-body__actions { - display: flex; - height: 100%; - position: absolute; - right: 0; - top: 0; - - > span { - border-left: 1px solid transparent; - width: 41px; - - &:first-child { - border: none; - } - - > span, - div { - display: block; - height: 49px; - line-height: 49px; - text-align: center; - width: 100%; - } - } - - &:hover, - &:active { - box-shadow: none; - } - - &.btn-file__disabled { - @include opacity(.1); - - &:hover, - &:active { - @include opacity(.1); - } - } - - .icon--emoji { - @include opacity(.5); - @include single-transition(all, .15s); - cursor: pointer; - - &:hover { - @include opacity(.7); - } - - svg { - position: relative; - top: 2px; - } - } - - .icon--attachment { - @include opacity(.4); - @include single-transition(all, .15s); - cursor: pointer; - overflow: hidden; - position: relative; - vertical-align: top; - - &:hover { - @include opacity(.6); - } - - input { - cursor: pointer; - direction: ltr; - filter: alpha(opacity=0); - font-size: 23px; - height: 100%; - margin: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } - - svg { - position: relative; - top: 3px; - } - } - } - - .post-create-body { - padding: 0 0 2px; - position: relative; - - .post-body__cell { - position: relative; - vertical-align: top; - } - - .send-button { - @include single-transition(all, .15s); - border-left: 1px solid transparent; - cursor: pointer; - display: none; - font-size: 17px; - height: 100%; - line-height: 49px; - padding-right: 4px; - text-align: center; - vertical-align: bottom; - width: 45px; - - &:active { - @include opacity(.75); - } - - &.disabled { - i { - color: inherit; - } - } - } - - - .icon--emoji-picker { - @include opacity(.5); - @include single-transition(all, .15s); - cursor: pointer; - - &:hover, - &:active { - @include opacity(.9); - box-shadow: none; - } - - .icon--attachment { - @include opacity(.5); - display: inline-block; - position: relative; - vertical-align: top; - - input { - cursor: pointer; - direction: ltr; - filter: alpha(opacity=0); - font-size: 23px; - height: 100%; - margin: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } - - &:hover { - @include opacity(.9); - } - } - } - - textarea { - box-shadow: none; - } - } - - .post-create-footer { - @include clearfix; - font-size: 13px; - padding: 3px 0 0; - position: relative; - - .post-error { - @include opacity(.55); - display: inline-block; - font-size: .85em; - font-weight: normal; - margin-bottom: 0; - position: absolute; - top: 4px; - } - } - - .msg-typing { - @include opacity(.7); - display: block; - font-size: .95em; - height: 20px; - margin-bottom: 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.post-list__table { - display: table; - height: 100%; - min-height: 350px; - table-layout: fixed; - width: 100%; - - .post-list__content { - display: table-cell; - vertical-align: bottom; - - .dropdown-menu { - &.bottom { - bottom: 19px; - top: auto; - } - } - } -} - -.post { - @include legacy-pie-clearfix; - max-width: 100%; - padding: 8px .5em 0 1em; - position: relative; - word-wrap: break-word; - - &.post--system { - .post__header { - .col__reply { - min-width: 0; - } - } - } - - &:hover { - .dropdown, - .comment-icon__container, - .reacticon, - .reacticon__container, - .flag-icon__container, - .post__reply, - .post__remove { - visibility: visible; - } - - .permalink-icon { - visibility: visible; - } - } - - &.post--hovered { - .dropdown, - .comment-icon__container, - .post__reply, - .post__remove, - .reacticon__container, - .permalink-icon { - visibility: visible; - } - - .post__header { - .col__reply { - z-index: 7; - } - } - - .post__body { - background: transparent !important; - } - } - - &.post--highlight { - background-color: beige; - } - - &.post--hide-controls { - .post__header { - .col__reply { - display: none; - } - } - } - - &.post--compact { - &.post--thread { - .post__header { - padding-top: 3px; - } - } - - &.post--system { - .status { - visibility: hidden; - } - - > div { - margin-bottom: 0; - } - } - - &.same--root { - &.same--user { - .post__header { - height: 0; - } - } - } - - .post__img { - padding-top: 0; - } - - .attachment { - .attachment__body__wrap { - .btn-close { - left: -2px; - } - } - } - - &.post--comment { - .attachment { - .attachment__body__wrap { - .btn-close { - left: -13px; - } - } - } - } - - .status-wrapper { - cursor: auto; - height: 14px; - pointer-events: none; - - .status { - bottom: auto; - height: 13px; - left: -2px; - position: relative; - right: auto; - top: auto; - width: 13px; - } - - svg { - top: 1px; - } - - &:after { - bottom: 0; - } - } - - blockquote { - font-size: 1em; - margin-left: 0; - margin-top: 1.3em; - padding: 3px 0 0 25px; - vertical-align: top; - - &:before { - font-size: 15px; - left: 4px; - top: 2px; - } - } - - .search-item-snippet { - blockquote { - margin-top: 0; - } - } - - .markdown__heading { - clear: both; - font-size: 1em; - margin: 0; - } - - .post__header { - height: 22px; - margin-bottom: 0; - } - - .post__body { - background: transparent !important; - line-height: 1.5; - margin-top: -1px; - padding: 3px 0 0; - - .img-div { - max-height: 150px; - max-width: 150px; - } - - p { - line-height: inherit; - } - - p + p { - margin-bottom: 1em; - margin-top: 1em; - } - - ol, - ul { - clear: both; - padding-left: 20px; - } - - div { - margin-bottom: 0; - } - - .post-image__column { - margin: 3px 0; - } - } - - .post-image__column { - @include border-radius(2px); - font-size: .9em; - height: 26px; - line-height: 25px; - padding: 0 7px; - width: auto; - - .post-image__thumbnail { - display: none; - } - - .post-image__details { - background: transparent; - border: none; - padding: 0; - width: 100%; - - svg { - display: inline-block; - height: 13px; - margin: 5px 4px 0 0; - opacity: .5; - position: relative; - vertical-align: top; - width: 13px; - } - - > div { - display: none; - } - } - - .post-image__name { - @include clearfix; - display: block; - margin: 0; - padding-right: 10px; - text-overflow: ellipsis; - white-space: nowrap; - - i { - font-size: .9em; - margin-right: 5px; - opacity: .5; - } - } - - a { - &:hover { - text-decoration: none; - } - } - } - - .post__img { - padding-top: 1px; - width: 16px; - - img { - display: none; - } - } - } - - .post__img:hover { - cursor: pointer; - } - - .post--fail { - position: relative; - } - - .post--edited { - // If the last paragraph of an edited post is a paragraph, make it inline-block so that the (edited) indicator can be on the same line as it - .post-message__text > p:last-child { - display: inline-block; - width: auto; - } - - .post-edited-indicator { - @include opacity(.6); - font-size: .87em; - } - } - - .emoticon { - vertical-align: top; - } - - p { - font-size: 13.5px; - line-height: 1.6em; - margin: 0; - white-space: pre-wrap; - width: 100%; - word-break: break-word; - } - - .post__header--info { - padding: 0; - } - - &.post--root { - .comment-icon__container { - visibility: visible; - } - } - - &.post--comment { - .post__body { - border-left: 4px solid $gray; - padding-left: 7px; - - &.mention-comment { - border-left: 4px solid $yellow; - border-color: $yellow; - } - } - - .attachment { - .attachment__body__wrap { - .btn-close { - left: -11px; - } - } - } - } - - &.same--root { - &.post--pinned { - h1, - h2 { - &:first-child { - margin-top: 15px; - } - } - - h3, - h4, - h5, - h6 { - &:first-child { - margin-top: 20px; - } - } - } - - &.same--user { - padding: 0 .5em 0 1em; - - &:hover, - &.post--hovered { - .post__time { - @include opacity(.5); - } - } - - .flag-icon__container { - left: 36px; - margin-left: 7px; - position: absolute; - top: 6px; - } - - .post__img { - .status-wrapper { - display: none; - } - - img { - display: none; - } - } - - .post__header { - height: 0; - margin: 0; - - .col__name { - display: none; - } - - .col__reply { - top: -1px; - } - } - } - - &.post--comment { - .post__link { - display: none; - } - - &.same--user { - .post__img { - img { - display: none; - } - } - } - } - } - - &.other--root { - .comment-icon__container { - &.icon--show { - visibility: visible; - } - } - - &.post--comment { - - .popover { - margin-top: 84px; - - > .arrow { - top: 21px !important; - } - } - - .post__header { - .col__reply { - top: -4px; - } - } - } - } - - .post__content { - display: table; - margin: 0 auto; - padding: 0 5px; - position: relative; - table-layout: fixed; - width: 100%; - - > div { - display: table-cell; - vertical-align: top; - } - } - - .center { - max-width: 1000px; - } - - .post__header { - margin-bottom: 2px; - padding: 0; - - > div { - display: inline-block; - vertical-align: top; - } - - .col__name { - font-weight: 600; - margin-right: 7px; - - .user-popover { - @include clearfix; - max-width: 200px; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; - } - - .colon { - display: none; - font-weight: 900; - margin-left: 2px; - } - } - - .col__reply { - border: 1px solid transparent; - border-radius: 2px; - min-width: 70px; - padding: 2px 5px; - position: absolute; - right: 0; - top: -4px; - white-space: nowrap; - z-index: 6; - } - - .col__remove { - position: absolute; - right: 10px; - } - - .permalink-popover { - min-width: 0; - - .popover-content { - padding: 5px; - } - - .form-control, - .btn { - font-size: 13px; - height: 30px; - line-height: 30px; - padding: 0 8px; - } - } - } - - .post__img { - padding-right: 10px; - text-align: right; - width: 53px; - - .icon { - svg { - height: 32px; - width: 32px; - } - } - - path { - fill: inherit; - } - - img { - @include border-radius(50px); - height: 32px; - vertical-align: inherit; - width: 32px; - max-width:none; - } - } - - .post__embed-container { - @include single-transition(max-height, .5, ease); - display: block; - max-height: 1000px; - overflow: hidden; - - &[hidden] { - max-height: 0; - } - } - - .dropdown { - display: inline-block; - top: -1px; - vertical-align: middle; - visibility: hidden; - - .dropdown-menu { - left: auto; - min-width: 130px; - padding: 2px 0; - right: 0; - top: 20px; - - li { - display: block; - } - - a { - padding: 5px 15px; - } - } - } - - .post__dropdown { - vertical-align: middle; - - &:after { - content: '[...]'; - font-family: 'Open Sans', sans-serif; - position: relative; - top: -1px; - } - } - - .post__remove { - @include opacity(.5); - color: inherit; - display: inline-block; - float: right; - font-family: 'Open Sans', sans-serif; - font-size: 20px; - font-weight: 600; - height: 20px; - line-height: 20px; - position: relative; - right: -10px; - text-decoration: none; - vertical-align: top; - visibility: hidden; - width: 20px; - - &:hover { - @include opacity(.8); - } - } - - .post__body { - @include legacy-pie-clearfix; - padding: .2em .5em; - width: 100%; - word-wrap: break-word; - - div { - } - - p + p { - margin: 0.5em 0 0; - } - - img { - max-height: 400px; - } - - ul, - ol { - font-size: 13.5px; - margin-bottom: .11em; - margin-top: 3px; - padding-left: 20px; - - p { - margin-bottom: 0; - } - - li { - ul, - ol { - font-size: 1em; - margin: 0; - 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 { - cursor: default; - vertical-align: top; - } - } - - 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: '\2022'; - margin-right: 8px; - } - } - - ul + p, - ol + p { - margin-top: .6em; - } - - p + ul, - p + ol { - margin-top: .6em; - } - - .pending-post-actions { - background: alpha-color($black, .7); - color: $white; - font-size: .9em; - padding: 5px 7px; - position: absolute; - right: 0; - top: 0; - z-index: 100; - - a { - color: $white; - } - } - - .post-reaction-list { - min-height: 30px; - } - - .post-reaction { - @include user-select(none); - @include border-radius(3px); - border: 1px solid $primary-color; - cursor: pointer; - display: inline-block; - font-size: 11px; - height: 23px; - margin-bottom: 5px; - margin-right: 5px; - padding: 0 4px 0 3px; - - .post-reaction__emoji { - margin: 2px 3px 0 0; - max-height: 16px; - max-width: 16px; - vertical-align: middle; - } - - .post-reaction__count { - line-height: 10px; - position: relative; - top: 3px; - } - - &--current-user { - .post-reaction__count { - font-weight: 600; - } - } - } - } - - .post__link { - font-size: 13px; - margin: 2px 0 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - a { - font-weight: bold; - } - } - - .post__embed-visibility { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - cursor: pointer; - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - margin: 0; - text-rendering: auto; - - &.pull-left { - margin: 5px 5px 0 0; - } - - &:hover { - text-decoration: none; - } - - &:before { - content: '\f065'; - font-size: 14px; - } - - &[data-expanded='true']:before { - content: '\f066'; - } - } - - .post__visibility { - @include opacity(.6); - font-size: .9em; - padding: 8px; - } - - .post__time { - @include opacity(.6); - font-size: .9em; - } - - .post__permalink { - color: inherit; - - &:hover, - &:focus { - color: inherit; - } - - &:focus { - text-decoration: none; - } - - &:hover { - text-decoration: underline; - } - } - - .post-loading-gif { - height: 10px; - margin-top: 6px; - width: 10px; - } - - .post-fail { - color: #d58a8a; - } - - .post-waiting { - color: #999999; - } - - .permalink-icon { - color: $primary-color; - display: inline-block; - visibility: hidden; - } - - .post__reply { - display: inline-block; - margin-right: 6px; - visibility: hidden; - - svg { - fill: inherit; - position: relative; - top: 3px; - width: 18px; - } - } - - .comment-icon__container { - display: inline-block; - fill: $primary-color; - position: relative; - top: 1px; - visibility: hidden; - - &:focus { - outline: none; - } - - &.icon--visible { - visibility: visible; - } - - svg { - height: 17px; - width: 17px; - } - - .comment-count { - margin-left: 2px; - } - - .comment-icon { - display: inline-block; - fill: inherit; - margin: 0 1px 0 5px; - position: relative; - top: 1px; - vertical-align: top; - } - - path { - fill: inherit; - } - } - - .reacticon__container { - display: inline-block; - fill: $primary-color; - font-size: 16px; - margin-left: 5px; - vertical-align: top; - visibility: hidden; - - svg { - height: 14px; - position: relative; - top: 1px; - width: 14px; - } - } - - .flag-icon__container { - display: inline-block; - height: 15px; - margin-left: 7px; - position: relative; - top: 2px; - vertical-align: top; - visibility: hidden; - - &.visible { - visibility: visible; - } - - svg { - width: 12px; - } - - path { - fill: inherit; - } - - .fa-star-o { - @include opacity(.8); - } - - &:focus { - outline: none; - } - - &.icon--visible { - visibility: visible; - } - - } - - .web-embed-data { - @include border-radius(2px); - @include alpha-property(background, $black, 0.05); - height: 50px; - overflow: hidden; - padding: 2px 0 0 10px; - text-overflow: ellipsis; - - .embed-title { - color: #555555; - font-weight: 600; - margin: 3px 0 1px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .embed-description { - color: #888888; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .embed-link { - display: none; - } - } -} - -.bot-indicator, -.post__pinned-badge { - border-radius: 2px; - font-family: inherit; - font-size: 10px; - font-weight: 600; - padding: 1px 4px; -} - -.bot-indicator { - margin: 2px 10px 0 -4px; -} - -.post__pinned-badge { - margin-left: 7px; - position: relative; - top: -1px; -} - -.permalink-text { - overflow: hidden; -} - -.permalink-popover { - margin-left: 50px !important; - min-width: 320px; -} diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss deleted file mode 100644 index 515f87a87..000000000 --- a/webapp/sass/layout/_sidebar-left.scss +++ /dev/null @@ -1,372 +0,0 @@ -@charset 'UTF-8'; - -.sidebar--left { - border-right: $border-gray; - height: 100%; - left: 0; - position: fixed; - width: 220px; - z-index: 5; - - .error-bar--fixed & { - height: calc(100% - 22px); - } - - &.sidebar--padded { - padding-top: 44px; - } - - .sidebar-item { - .icon { - display: inline-block; - margin: 0 7px 0 1px; - position: relative; - text-align: left; - vertical-align: top; - width: 15px; - } - - .icon__lock { - top: 2px; - } - - .icon__globe { - top: 1px; - } - } - - .sidebar-item__name { - display: inline-block; - max-width: 160px; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - } - - .sidebar__divider { - color: $white; - font-size: .9em; - height: 20px; - line-height: 20px; - margin: 5px 0 6px; - position: relative; - z-index: 0; - - &:before { - background: $light-gray; - content: ''; - height: 1px; - position: absolute; - top: 10px; - width: 100%; - } - - .sidebar__divider__text { - background: $primary-color; - float: right; - padding: 0 10px; - position: relative; - z-index: 1; - } - } - - .sidebar__switcher { - bottom: 0; - display: block; - padding-bottom: 0; - position: absolute; - width: 100%; - - button { - @include single-transition(all, .15s, ease-in); - display: block; - font-weight: 600; - height: 45px; - line-height: 40px; - padding: 0; - text-decoration: none; - width: 100%; - - > span { - display: inline-block; - position: relative; - vertical-align: middle; - z-index: 5; - } - - .icon { - display: none; - margin-right: 15px; - - svg { - position: relative; - top: 7px; - } - } - - &:hover { - span { - @include opacity(1); - } - } - } - - .switch__shortcut { - margin-left: 4px; - } - } - - .dropdown-menu { - max-height: 80vh; - max-width: 200px; - overflow-x: hidden; - overflow-y: auto; - width: 200px; - } - - .search__form { - display: none; - margin: 0; - padding: 1em 1em 0; - } - - .badge { - @include border-radius(100px); - font-size: 11px; - height: 16px; - line-height: 16px; - min-width: 18px; - padding: 0 5px; - position: absolute; - right: 15px; - top: 8px; - } - - .nav-pills__container { - -webkit-overflow-scrolling: touch; - height: calc(100% - 115px); - overflow: auto; - position: relative; - } - - .nav-pills__unread-indicator { - @include border-radius(50px); - font-size: 13.5px; - left: 15px; - margin: 0 auto; - padding: 4px 0 3px; - position: fixed; - text-align: center; - width: 190px; - z-index: 1; - - .icon { - margin-left: 5px; - } - } - - .nav-pills__unread-indicator-top { - top: 80px; - - .icon { - svg { - @include transform(rotate(180deg)); - } - } - } - - .nav-pills__unread-indicator-bottom { - bottom: 60px; - } - - .nav { - &.nav-stacked { - > li + li { - margin: 0; - } - } - - li { - > h4 { - font-size: 1em; - font-weight: 600; - margin: 1.5em 0 .7em; - padding: 0 12px 0 17px; - text-transform: uppercase; - } - - .divider { - & + .divider { - display: none; - } - } - - > a { - border-radius: 0; - line-height: 1.5; - outline: none; - overflow: hidden; - padding: 5px 0 5px 17px; - text-overflow: ellipsis; - white-space: nowrap; - - .icon { - &.icon__globe, - &.icon__lock { - @include opacity(.5); - } - } - - &.has-badge { - .sidebar-item__name { - max-width: 142px; - } - } - - &.has-close { - &:hover { - .sidebar-item__name { - max-width: 152px; - } - - .btn-close { - @include opacity(.8); - display: block; - } - } - - .btn-close { - @include opacity(0); - display: none; - font-family: 'Open Sans', sans-serif; - font-size: 21px; - font-weight: 600; - position: absolute; - right: 15px; - top: 0px; - - &:hover { - @include opacity(1); - } - } - } - - &.unread-title { - font-weight: 600; - } - - } - - &.active { - a { - &:before { - background: $black; - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 3px; - } - } - - .icon { - &.icon__globe, - &.icon__lock { - @include opacity(.7); - } - } - - a, - a:hover, - a:focus { - @include alpha-property(background-color, $black, .1); - border-radius: 0; - font-weight: 400; - position: relative; - - &.unread-title { - font-weight: 600; - } - } - } - } - } - - .modal-title { - line-height: 2em; - } - - .add-channel-btn { - float: right; - font-size: 1.9em; - font-weight: 700; - line-height: 18px; - margin: -2px 0 0 0; - outline: none; - padding: 0 5px; - text-decoration: none; - - &:hover { - color: #666666; - } - } - - .status-wrapper { - height: 36px; - width: 36px; - - .status { - bottom: -4px; - height: 18px; - right: -5px; - width: 18px; - - &.status-edit { - .fa { - top: 4px; - } - } - - .fa { - position: relative; - top: 2px; - } - - .icon__container { - &:after { - border-radius: 20px; - content: ''; - height: 10px; - left: 4px; - position: absolute; - top: 4px; - width: 10px; - } - } - - svg { - height: 13px; - left: 3px; - max-height: initial; - position: relative; - top: 3px; - width: 13px; - z-index: 1; - } - } - } -} - -.channel-loading-gif { - height: 15px; - margin-top: 2px; - width: 15px; -} - -.join-channel-loading-gif { - height: 25px; - margin-left: 10px; - margin-top: 5px; - width: 25px; -} diff --git a/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss deleted file mode 100644 index b4d4f15fd..000000000 --- a/webapp/sass/layout/_sidebar-menu.scss +++ /dev/null @@ -1,95 +0,0 @@ -@charset 'UTF-8'; - -.sidebar--menu { - -webkit-overflow-scrolling: touch; - background: #fafafa; - border-right: $border-gray; - display: none; - height: 100%; - overflow: auto; - padding: 0 0 2em; - position: absolute; - right: 0; - width: 220px; - - .nav-pills__container { - padding-top: 5px; - } - - .team__header { - @include legacy-pie-clearfix; - display: none; - padding: 0 15px; - - a { - color: $white; - } - - .navbar-right { - font-size: .85em; - margin: 16px -5px 0; - - .dropdown-toggle { - padding: 0 10px; - } - - .dropdown-menu { - li a { - color: #555; - padding: 3 20px; - } - } - - .dropdown__icon { - @include background-size(100% 100%); - display: inline-block; - height: 16px; - width: 4px; - } - } - - .team__name { - float: left; - font-size: 1.2em; - font-weight: 600; - line-height: 50px; - max-width: 80%; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .nav { - > li { - > a { - background: none !important; - color: inherit; - font-size: 15px; - line-height: 40px; - padding: 0 15px; - - svg { - fill-opacity: 0.85; - position: relative; - top: 4px; - width: 18px; - } - - .icon { - display: inline-block; - left: -5px; - position: relative; - text-align: center; - width: 25px; - } - - .mentions { - font-size: 17px; - font-weight: bold; - } - } - } - } -} diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss deleted file mode 100644 index bf1cef606..000000000 --- a/webapp/sass/layout/_sidebar-right.scss +++ /dev/null @@ -1,291 +0,0 @@ -@charset 'UTF-8'; - -.sidebar--right { - @include translateX(400px); - background: $white; - height: 100%; - padding: 0; - position: fixed; - right: 0; - width: 400px; - z-index: 8; - - .error-bar--fixed & { - height: calc(100% - 22px); - } - - &.webrtc { - z-index: 5; - } - - &.sidebar--right--expanded { - z-index: 10; - } - - .sidebar--right__bg { - @include single-transition(background-color, .5s, ease); - background-color: alpha-color($black, 0); - height: 100%; - position: absolute; - top: 0; - visibility: hidden; - width: 300%; - } - - &.move--left, - &.webrtc--show { - .sidebar--right__bg { - left: -100%; - } - } - - .sidebar-right__table { - display: table; - - > div:not(.sidebar-collapse__container) { - display: table-cell; - - &:last-child { - .channel-header__icon { - margin-right: 10px; - } - } - } - - .search-form__container { - padding-right: 10px; - width: 100%; - } - } - - .post-body { - img { - max-height: 200px; - } - } - - .post { - &.post--compact { - .post__pinned-badge { - margin: 0 0 0 5px; - } - } - - .post__content { - padding: 0 10px 0 0; - } - - .post__header { - .col__name { - .user-popover { - max-width: 120px; - } - } - - .flag-icon__container { - z-index: 5; - } - } - } - - .post-create__container { - form { - padding: .5em 15px 0; - } - - .post-create-footer { - @include clearfix; - clear: both; - font-size: 13px; - overflow: visible; - position: relative; - - .post-error { - @include opacity(.55); - display: inline-block; - font-size: .85em; - font-weight: normal; - margin-bottom: 0; - position: absolute; - top: -25px; - } - } - } - - .help__format-text { - display: none; - } - - .sidebar--right__content { - @include display-flex; - @include flex-direction(column); - height: 100%; - } - - .sidebar--right__back { - @include single-transition(all, .2s, ease-in); - @include opacity(.5); - color: inherit; - display: inline-block; - font-size: 26px; - margin-left: -14px; - text-align: center; - vertical-align: top; - width: 30px; - - &:hover, - &:active { - color: inherit; - opacity: .8; - } - - i { - position: relative; - top: -2px; - } - } - - .sidebar-right__body { - @include display-flex; - @include flex(1 1 auto); - @include flex-direction(column); - border-left: $border-gray; - height: calc(100% - 56px); - } - - .sidebar__overlay { - @include opacity(.1); - background-color: $yellow; - height: 100%; - pointer-events: none; - position: absolute; - width: 100%; - z-index: 5; - } - - .input-group { - word-break: break-word; - } - - .sidebar--right__buttons { - float: right; - } - - .sidebar--right__close { - @include single-transition(all, .2s, ease-in); - background: none; - border: none; - font-size: 20px; - height: 22px; - line-height: 0; - margin: 11px 0 0; - opacity: .5; - outline: none; - padding: 0; - width: 30px; - - &:hover, - &:active { - opacity: .8; - } - - i { - position: relative; - } - } - - .sidebar--right__expand { - @extend .sidebar--right__close; - font-size: 17px; - - i { - top: -2px; - } - - .fa-compress { - display: none; - } - } - - .sidebar--right__title { - @include clearfix; - padding-left: 15px; - } - - .sidebar--right__header { - @include flex(0 0 44px); - border-bottom: 1px solid; - color: inherit; - font-size: 1em; - height: 44px; - line-height: 44px; - overflow: hidden; - padding: 0 5px 0 0; - text-transform: uppercase; - } - - .sidebar--right__loading { - @include opacity(.7); - text-align: center; - - .fa { - margin-right: 5px; - } - } - - .sidebar--right__subheader { - font-size: 1em; - padding: .5em 1em 0; - - h4 { - font-size: 1em; - } - - ul { - @include opacity(.7); - padding: 10px 0 0 30px; - } - - li { - font-size: .95em; - padding-bottom: 10px; - } - - .usage__icon { - @include opacity(.9); - margin: 0 3px; - position: relative; - top: 3px; - } - } - - .suggestion-list__content { - max-height: 120px; - } -} - -.sidebar-right-container { - height: 100%; -} - -.sidebar-collapse__container { - display: none; -} - -.sidebar-collapse { - @include single-transition(all, .2s, linear); - @include translateX(0); - cursor: pointer; - font-size: 16px; - height: 48px; - line-height: 0; - padding-left: 1px; - text-align: center; - width: 50px; - z-index: 5; - - .fa { - position: relative; - top: 18px; - } -} diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss deleted file mode 100644 index f44454eb7..000000000 --- a/webapp/sass/layout/_team-sidebar.scss +++ /dev/null @@ -1,124 +0,0 @@ -.multi-teams { - .team-sidebar { - height: 100%; - left: 0; - position: fixed; - text-align: center; - width: 65px; - z-index: 5; - - .team-wrapper { - -webkit-overflow-scrolling: touch; - background-color: alpha-color($black, .2); - height: 100%; - overflow: auto; - padding-top: 15px; - - .team-container { - display: table; - margin-bottom: 10px; - position: relative; - text-align: center; - width: 100%; - - a { - display: block; - margin-left: 11px; - text-decoration: none; - &:hover .team-btn { - border-color: white; - } - } - - .team-btn { - @include border-radius(2px); - background-color: alpha-color($black, .3); - border: 1px solid alpha-color($white, .2); - display: table-cell; - font-size: 12px; - font-weight: bold; - padding: 4px 5px; - position: relative; - text-align: center; - vertical-align: top; - width: 40px; - - .team-btn__initials { - text-align: left; - } - - .team-btn__content { - bottom: 4px; - font-size: 8.5px; - font-weight: normal; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 31px; - } - - .badge { - font-size: 10px; - position: absolute; - right: -6px; - top: -3px; - } - - &.team-btn__add { - height: 39px; - vertical-align: middle; - } - } - - &.active { - .team-btn { - background-color: transparent; - border-color: $white; - } - } - - &.active:before { - background: $black; - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 5px; - } - - &.unread:before { - background: $black; - border-radius: 50%; - content: ''; - height: 5px; - left: 0; - position: absolute; - top: 18px; - width: 5px; - } - - a.team-disabled { - @include opacity(.5); - cursor: not-allowed; - } - } - - .team-container a:hover { - text-decoration: none; - } - } - } - - .sidebar--left { - left: 65px; - - .nav-pills__unread-indicator { - left: 80px; - } - } - - .app__content { - margin-left: 285px; - } -} diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss deleted file mode 100644 index ed3e2555a..000000000 --- a/webapp/sass/layout/_webhooks.scss +++ /dev/null @@ -1,303 +0,0 @@ -@charset 'UTF-8'; - -.webhooks__container { - @include border-radius(3px); - @include alpha-property(background, $black, .1); - border: 1px solid; - margin-top: 10px; - padding: 0 13px 15px; -} - -.webhook__item { - font-size: 13px; - position: relative; - - &:last-child { - .divider-light:last-child { - display: none; - } - } - - .webhook__remove { - color: #e05f5d; - font-size: 22px; - font-weight: bold; - height: 30px; - position: absolute; - right: -7px; - text-align: center; - text-decoration: none; - top: 8px; - width: 30px; - } - - .webhook__url { - padding-right: 20px; - } -} - -.post { - &.post--comment { - .attachment { - .attachment__body__wrap { - .btn-close { - left: -11px; - } - } - } - } - - .attachment { - margin-left: -20px; - position: relative; - - &:hover { - .attachment__body__wrap { - .btn-close { - visibility: visible; - } - } - } - - &.attachment--opengraph { - max-width: 800px; - } - - .attachment__content { - border-radius: 4px; - border-style: solid; - border-width: 1px; - margin: 5px 0 5px 20px; - padding: 2px 5px; - } - - .attachment__thumb-pretext { - background: transparent; - border: none; - margin-left: 25px; - } - - .attachment__container { - border-left-style: solid; - border-left-width: 4px; - padding: 10px; - - &.attachment__container--good { - border-left-color: #00c100; - } - - &.attachment__container--warning { - border-left-color: #dede01; - } - - &.attachment__container--danger { - border-left-color: #e40303; - } - - &.attachment__container--opengraph { - border-left-color: transparent; - border-left-style: none; - display: table; - margin: 0; - padding-bottom: 13px; - padding-left: 5px; - table-layout: fixed; - width: 100%; - - div { - margin: 0; - } - } - - .sitename { - color: #A3A3A3; - } - } - - .attachment__body__wrap { - &.attachment__body__wrap--opengraph { - display: table-cell; - vertical-align: top; - width: 100%; - } - - .btn-close { - @include opacity(.4); - background: transparent; - border: none; - color: inherit; - font-size: 21px; - font-weight: 500; - height: 20px; - left: -7px; - line-height: 20px; - outline: none; - padding: 0; - position: absolute; - text-align: center; - text-decoration: none; - text-shadow: none; - visibility: hidden; - width: 20px; - z-index: 5; - - span { - font-family: 'Open Sans', sans-serif; - line-height: 10px; - } - - &:hover { - @include opacity(.9); - } - } - - &:hover { - .btn-close { - visibility: visible; - } - } - } - - .attachment__body { - float: left; - overflow-x: auto; - overflow-y: hidden; - padding-right: 5px; - width: 80%; - - &.attachment__body--no_thumb { - width: 100%; - } - - &.attachment__body--opengraph { - float: none; - padding-right: 0; - width: 100%; - word-wrap: break-word; - } - } - - .attachment__text p:last-of-type { - display: inline-block; - } - - .attachment__image__container--openraph { - display: table-cell; - padding-left: 15px; - padding-top: 3px; - vertical-align: top; - width: 95px; - } - - .attachment__image { - margin-bottom: 1em; - max-height: 300px; - max-width: 500px; - - &.attachment__image--openraph { - margin-bottom: 0; - max-height: 80px; - max-width: 100%; - - &.loading { - height: 80px; - } - - &.large_image { - border-radius: 3px; - margin-top: 10px; - max-height: 200px; - max-width: 400px; - width: 100%; - - &.loading { - height: 150px; - } - } - } - } - - .attachment__author-name { - @include opacity(.6); - } - - .attachment__title { - font-size: 14px; - font-weight: 600; - height: 22px; - line-height: 18px; - margin: 5px 0; - padding: 0; - - &.has-link { - color: #2f81b7; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &.attachment__title--opengraph { - height: auto; - word-wrap: break-word; - - &.is-url { - word-break: break-all; - } - } - } - - .attachment-link-more { - display: inline-block; - font-size: .9em; - margin: 5px 0; - } - - .attachment__author-icon { - @include border-radius(50px); - height: 14px; - margin-right: 5px; - width: 14px; - } - - .attachment__thumb-container { - float: right; - text-align: right; - width: 80px; - - img { - max-height: 75px; - max-width: 100%; - } - } - - .attachment-fields { - width: 100%; - - .attachment-field__caption { - font-weight: 600; - padding-top: .7em; - } - - .attachment-field { - p { - margin: 0; - } - } - } - - .attachment-actions { - margin-top: 9px; - - button { - @include border-radius(3px); - outline: 0; - margin: 8px 8px 0 0; - border-width: 1px; - border-style: solid; - height: 30px; - font-size: 13px; - font-weight: 700; - } - } - } -} -- cgit v1.2.3-1-g7c22