summaryrefslogtreecommitdiffstats
path: root/webapp/sass/layout
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass/layout')
-rw-r--r--webapp/sass/layout/_content.scss95
-rw-r--r--webapp/sass/layout/_footer.scss30
-rw-r--r--webapp/sass/layout/_forms.scss93
-rw-r--r--webapp/sass/layout/_headers.scss534
-rw-r--r--webapp/sass/layout/_markdown.scss223
-rw-r--r--webapp/sass/layout/_module.scss14
-rw-r--r--webapp/sass/layout/_navigation.scss190
-rw-r--r--webapp/sass/layout/_post-right.scss156
-rw-r--r--webapp/sass/layout/_post.scss1642
-rw-r--r--webapp/sass/layout/_sidebar-left.scss372
-rw-r--r--webapp/sass/layout/_sidebar-menu.scss95
-rw-r--r--webapp/sass/layout/_sidebar-right.scss291
-rw-r--r--webapp/sass/layout/_team-sidebar.scss124
-rw-r--r--webapp/sass/layout/_webhooks.scss303
14 files changed, 0 insertions, 4162 deletions
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;
- }
- }
- }
-}