From e214aae719c10953c4c3a7949c9bd02d6983b045 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 14 Mar 2016 22:35:57 +0500 Subject: PLT-963 - Improving scss structure --- web/sass-files/sass/base/_module.scss | 3 + web/sass-files/sass/base/_structure.scss | 57 + web/sass-files/sass/base/_typography.scss | 27 + web/sass-files/sass/components/_alerts.scss | 13 + web/sass-files/sass/components/_buttons.scss | 23 + web/sass-files/sass/components/_dropdown.scss | 16 + web/sass-files/sass/components/_emoticons.scss | 27 + web/sass-files/sass/components/_error-bar.scss | 30 + web/sass-files/sass/components/_files.scss | 293 ++++ web/sass-files/sass/components/_inputs.scss | 26 + web/sass-files/sass/components/_links.scss | 23 + web/sass-files/sass/components/_mentions.scss | 56 + web/sass-files/sass/components/_modal.scss | 508 ++++++ web/sass-files/sass/components/_module.scss | 19 + web/sass-files/sass/components/_oauth.scss | 38 + web/sass-files/sass/components/_popover.scss | 184 ++ web/sass-files/sass/components/_scrollbar.scss | 28 + web/sass-files/sass/components/_search.scss | 175 ++ .../sass/components/_suggestion-list.scss | 41 + web/sass-files/sass/components/_tooltip.scss | 10 + web/sass-files/sass/components/_tutorial.scss | 208 +++ web/sass-files/sass/components/_videos.scss | 66 + web/sass-files/sass/layout/_content.scss | 85 + web/sass-files/sass/layout/_footer.scss | 30 + web/sass-files/sass/layout/_forms.scss | 66 + web/sass-files/sass/layout/_headers.scss | 370 ++++ web/sass-files/sass/layout/_markdown.scss | 116 ++ web/sass-files/sass/layout/_module.scss | 13 + web/sass-files/sass/layout/_navigation.scss | 137 ++ web/sass-files/sass/layout/_post-right.scss | 155 ++ web/sass-files/sass/layout/_post.scss | 997 +++++++++++ web/sass-files/sass/layout/_sidebar-left.scss | 197 +++ web/sass-files/sass/layout/_sidebar-menu.scss | 72 + web/sass-files/sass/layout/_sidebar-right.scss | 129 ++ web/sass-files/sass/layout/_webhooks.scss | 37 + web/sass-files/sass/pages/_access-history.scss | 32 + web/sass-files/sass/pages/_activity-log.scss | 64 + web/sass-files/sass/pages/_admin-console.scss | 343 ++++ web/sass-files/sass/pages/_docs.scss | 19 + web/sass-files/sass/pages/_error-page.scss | 35 + web/sass-files/sass/pages/_loading.scss | 48 + web/sass-files/sass/pages/_module.scss | 11 + web/sass-files/sass/pages/_print.scss | Bin 0 -> 4392 bytes web/sass-files/sass/pages/_settings.scss | 451 +++++ web/sass-files/sass/pages/_signup.scss | 440 +++++ web/sass-files/sass/pages/_statistics.scss | 85 + web/sass-files/sass/partials/_access-history.scss | 27 - web/sass-files/sass/partials/_activity-log.scss | 53 - web/sass-files/sass/partials/_admin-console.scss | 261 --- web/sass-files/sass/partials/_base.scss | 256 --- web/sass-files/sass/partials/_colorpicker.scss | 253 --- web/sass-files/sass/partials/_content.scss | 82 - web/sass-files/sass/partials/_docs.scss | 19 - web/sass-files/sass/partials/_error-bar.scss | 28 - web/sass-files/sass/partials/_error.scss | 31 - web/sass-files/sass/partials/_files.scss | 264 --- web/sass-files/sass/partials/_font-awesome.scss | 1803 -------------------- web/sass-files/sass/partials/_footer.scss | 25 - web/sass-files/sass/partials/_forms.scss | 51 - web/sass-files/sass/partials/_get-link.scss | 8 - web/sass-files/sass/partials/_headers.scss | 320 ---- web/sass-files/sass/partials/_loading.scss | 42 - web/sass-files/sass/partials/_markdown.scss | 106 -- web/sass-files/sass/partials/_mentions.scss | 61 - web/sass-files/sass/partials/_modal.scss | 489 ------ web/sass-files/sass/partials/_navbar.scss | 112 -- web/sass-files/sass/partials/_oauth.scss | 33 - .../sass/partials/_perfect-scrollbar.scss | 122 -- web/sass-files/sass/partials/_popover.scss | 158 -- web/sass-files/sass/partials/_post.scss | 1013 ----------- web/sass-files/sass/partials/_post_right.scss | 159 -- web/sass-files/sass/partials/_print.scss | Bin 3604 -> 0 bytes web/sass-files/sass/partials/_responsive.scss | 894 ---------- web/sass-files/sass/partials/_search.scss | 160 -- web/sass-files/sass/partials/_settings.scss | 455 ----- web/sass-files/sass/partials/_sidebar--left.scss | 193 --- web/sass-files/sass/partials/_sidebar--menu.scss | 71 - web/sass-files/sass/partials/_sidebar--right.scss | 124 -- web/sass-files/sass/partials/_signup.scss | 390 ----- web/sass-files/sass/partials/_statistics.scss | 87 - web/sass-files/sass/partials/_suggestion_list.scss | 67 - web/sass-files/sass/partials/_tooltips.scss | 7 - web/sass-files/sass/partials/_tutorial.scss | 212 --- web/sass-files/sass/partials/_variables.scss | 16 - web/sass-files/sass/partials/_videos.scss | 66 - web/sass-files/sass/partials/_webhooks.scss | 33 - web/sass-files/sass/partials/_welcome.scss | 15 - web/sass-files/sass/responsive/_desktop.scss | 65 + web/sass-files/sass/responsive/_mobile.scss | 901 ++++++++++ web/sass-files/sass/responsive/_module.scss | 4 + web/sass-files/sass/responsive/_tablet.scss | 35 + web/sass-files/sass/styles.scss | 57 +- web/sass-files/sass/utils/_animations.scss | 19 + web/sass-files/sass/utils/_functions.scss | 9 + web/sass-files/sass/utils/_mixins.scss | 8 + web/sass-files/sass/utils/_module.scss | 5 + web/sass-files/sass/utils/_variables.scss | 13 + web/sass-files/sass/vendors/_colorpicker.scss | 253 +++ web/sass-files/sass/vendors/_font-awesome.scss | 1803 ++++++++++++++++++++ web/sass-files/sass/vendors/_module.scss | 4 + .../sass/vendors/_perfect-scrollbar.scss | 141 ++ 101 files changed, 9071 insertions(+), 8615 deletions(-) create mode 100644 web/sass-files/sass/base/_module.scss create mode 100644 web/sass-files/sass/base/_structure.scss create mode 100644 web/sass-files/sass/base/_typography.scss create mode 100644 web/sass-files/sass/components/_alerts.scss create mode 100644 web/sass-files/sass/components/_buttons.scss create mode 100644 web/sass-files/sass/components/_dropdown.scss create mode 100644 web/sass-files/sass/components/_emoticons.scss create mode 100644 web/sass-files/sass/components/_error-bar.scss create mode 100644 web/sass-files/sass/components/_files.scss create mode 100644 web/sass-files/sass/components/_inputs.scss create mode 100644 web/sass-files/sass/components/_links.scss create mode 100644 web/sass-files/sass/components/_mentions.scss create mode 100644 web/sass-files/sass/components/_modal.scss create mode 100644 web/sass-files/sass/components/_module.scss create mode 100644 web/sass-files/sass/components/_oauth.scss create mode 100644 web/sass-files/sass/components/_popover.scss create mode 100644 web/sass-files/sass/components/_scrollbar.scss create mode 100644 web/sass-files/sass/components/_search.scss create mode 100644 web/sass-files/sass/components/_suggestion-list.scss create mode 100644 web/sass-files/sass/components/_tooltip.scss create mode 100644 web/sass-files/sass/components/_tutorial.scss create mode 100644 web/sass-files/sass/components/_videos.scss create mode 100644 web/sass-files/sass/layout/_content.scss create mode 100644 web/sass-files/sass/layout/_footer.scss create mode 100644 web/sass-files/sass/layout/_forms.scss create mode 100644 web/sass-files/sass/layout/_headers.scss create mode 100644 web/sass-files/sass/layout/_markdown.scss create mode 100644 web/sass-files/sass/layout/_module.scss create mode 100644 web/sass-files/sass/layout/_navigation.scss create mode 100644 web/sass-files/sass/layout/_post-right.scss create mode 100644 web/sass-files/sass/layout/_post.scss create mode 100644 web/sass-files/sass/layout/_sidebar-left.scss create mode 100644 web/sass-files/sass/layout/_sidebar-menu.scss create mode 100644 web/sass-files/sass/layout/_sidebar-right.scss create mode 100644 web/sass-files/sass/layout/_webhooks.scss create mode 100644 web/sass-files/sass/pages/_access-history.scss create mode 100644 web/sass-files/sass/pages/_activity-log.scss create mode 100644 web/sass-files/sass/pages/_admin-console.scss create mode 100644 web/sass-files/sass/pages/_docs.scss create mode 100644 web/sass-files/sass/pages/_error-page.scss create mode 100644 web/sass-files/sass/pages/_loading.scss create mode 100644 web/sass-files/sass/pages/_module.scss create mode 100644 web/sass-files/sass/pages/_print.scss create mode 100644 web/sass-files/sass/pages/_settings.scss create mode 100644 web/sass-files/sass/pages/_signup.scss create mode 100644 web/sass-files/sass/pages/_statistics.scss delete mode 100644 web/sass-files/sass/partials/_access-history.scss delete mode 100644 web/sass-files/sass/partials/_activity-log.scss delete mode 100644 web/sass-files/sass/partials/_admin-console.scss delete mode 100644 web/sass-files/sass/partials/_base.scss delete mode 100644 web/sass-files/sass/partials/_colorpicker.scss delete mode 100644 web/sass-files/sass/partials/_content.scss delete mode 100644 web/sass-files/sass/partials/_docs.scss delete mode 100644 web/sass-files/sass/partials/_error-bar.scss delete mode 100644 web/sass-files/sass/partials/_error.scss delete mode 100644 web/sass-files/sass/partials/_files.scss delete mode 100644 web/sass-files/sass/partials/_font-awesome.scss delete mode 100644 web/sass-files/sass/partials/_footer.scss delete mode 100644 web/sass-files/sass/partials/_forms.scss delete mode 100644 web/sass-files/sass/partials/_get-link.scss delete mode 100644 web/sass-files/sass/partials/_headers.scss delete mode 100644 web/sass-files/sass/partials/_loading.scss delete mode 100644 web/sass-files/sass/partials/_markdown.scss delete mode 100644 web/sass-files/sass/partials/_mentions.scss delete mode 100644 web/sass-files/sass/partials/_modal.scss delete mode 100644 web/sass-files/sass/partials/_navbar.scss delete mode 100644 web/sass-files/sass/partials/_oauth.scss delete mode 100755 web/sass-files/sass/partials/_perfect-scrollbar.scss delete mode 100644 web/sass-files/sass/partials/_popover.scss delete mode 100644 web/sass-files/sass/partials/_post.scss delete mode 100644 web/sass-files/sass/partials/_post_right.scss delete mode 100644 web/sass-files/sass/partials/_print.scss delete mode 100644 web/sass-files/sass/partials/_responsive.scss delete mode 100644 web/sass-files/sass/partials/_search.scss delete mode 100644 web/sass-files/sass/partials/_settings.scss delete mode 100644 web/sass-files/sass/partials/_sidebar--left.scss delete mode 100644 web/sass-files/sass/partials/_sidebar--menu.scss delete mode 100644 web/sass-files/sass/partials/_sidebar--right.scss delete mode 100644 web/sass-files/sass/partials/_signup.scss delete mode 100644 web/sass-files/sass/partials/_statistics.scss delete mode 100644 web/sass-files/sass/partials/_suggestion_list.scss delete mode 100644 web/sass-files/sass/partials/_tooltips.scss delete mode 100644 web/sass-files/sass/partials/_tutorial.scss delete mode 100644 web/sass-files/sass/partials/_variables.scss delete mode 100644 web/sass-files/sass/partials/_videos.scss delete mode 100644 web/sass-files/sass/partials/_webhooks.scss delete mode 100644 web/sass-files/sass/partials/_welcome.scss create mode 100644 web/sass-files/sass/responsive/_desktop.scss create mode 100644 web/sass-files/sass/responsive/_mobile.scss create mode 100644 web/sass-files/sass/responsive/_module.scss create mode 100644 web/sass-files/sass/responsive/_tablet.scss create mode 100644 web/sass-files/sass/utils/_animations.scss create mode 100644 web/sass-files/sass/utils/_functions.scss create mode 100644 web/sass-files/sass/utils/_mixins.scss create mode 100644 web/sass-files/sass/utils/_module.scss create mode 100644 web/sass-files/sass/utils/_variables.scss create mode 100644 web/sass-files/sass/vendors/_colorpicker.scss create mode 100644 web/sass-files/sass/vendors/_font-awesome.scss create mode 100644 web/sass-files/sass/vendors/_module.scss create mode 100755 web/sass-files/sass/vendors/_perfect-scrollbar.scss (limited to 'web/sass-files/sass') diff --git a/web/sass-files/sass/base/_module.scss b/web/sass-files/sass/base/_module.scss new file mode 100644 index 000000000..987b9200b --- /dev/null +++ b/web/sass-files/sass/base/_module.scss @@ -0,0 +1,3 @@ +// Only for combining all the files in this folder +@import 'typography'; +@import 'structure'; diff --git a/web/sass-files/sass/base/_structure.scss b/web/sass-files/sass/base/_structure.scss new file mode 100644 index 000000000..56888f8dc --- /dev/null +++ b/web/sass-files/sass/base/_structure.scss @@ -0,0 +1,57 @@ +@charset 'UTF-8'; + +html, +body { + height: 100%; +} + +body { + width: 100%; + height: 100%; + background: $bg--gray; + position: relative; + + &.sticky { + background: $bg--white; + + > .container-fluid { + overflow: auto; + } + + .inner-wrap { + > .row.content { + min-height: 100%; + margin-bottom: -89px; + } + } + } +} + +.inner-wrap { + height: 100%; + + > .row.main { + height: 100%; + position: relative; + } +} + +.container-fluid { + @include legacy-pie-clearfix; + height: 100%; + position: relative; +} + +.channel-view { + @include clearfix; + height: 100%; + position: relative; +} + +img { + max-width: 100%; + + &.rounded { + @include border-radius(100%); + } +} diff --git a/web/sass-files/sass/base/_typography.scss b/web/sass-files/sass/base/_typography.scss new file mode 100644 index 000000000..676a2c405 --- /dev/null +++ b/web/sass-files/sass/base/_typography.scss @@ -0,0 +1,27 @@ +@charset 'UTF-8'; + +b, +strong { + font-weight: 600; +} + +a { + cursor: pointer; + text-decoration: none; + word-break: break-word; + color: $color--primary; +} + +a:focus, +a:hover { + color: $color--primary--hover; +} + +body { + font-family: 'Open Sans', sans-serif; + -webkit-font-smoothing: antialiased; +} + +.word-break--all { + word-break: break-all; +} diff --git a/web/sass-files/sass/components/_alerts.scss b/web/sass-files/sass/components/_alerts.scss new file mode 100644 index 000000000..49ca3e8af --- /dev/null +++ b/web/sass-files/sass/components/_alerts.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +.alert { + padding: 8px 12px; + @include border-radius($border-rad); +} + +.alert--confirm { + display: inline-block; + float: left; + padding: 4px 10px; + margin: 1px 0 0 10px; +} \ No newline at end of file diff --git a/web/sass-files/sass/components/_buttons.scss b/web/sass-files/sass/components/_buttons.scss new file mode 100644 index 000000000..bb8efbb14 --- /dev/null +++ b/web/sass-files/sass/components/_buttons.scss @@ -0,0 +1,23 @@ +@charset 'UTF-8'; + +.btn { + @include single-transition(all, .25s, ease-in); + @include border-radius($border-rad); + + &.btn-primary { + border-color: transparent; + background: $color--primary; + + &:hover, + &:focus, + &:active { + background: $color--primary--hover; + } + } + + &.btn-inactive { + border-color: transparent; + background: #707070; + color: #fff; + } +} diff --git a/web/sass-files/sass/components/_dropdown.scss b/web/sass-files/sass/components/_dropdown.scss new file mode 100644 index 000000000..f48e12c87 --- /dev/null +++ b/web/sass-files/sass/components/_dropdown.scss @@ -0,0 +1,16 @@ +@charset 'UTF-8'; + +.dropdown-menu { + .divider { + @include opacity(.15); + } + + > li > a { + color: inherit; + + &:focus, + &:hover { + color: inherit; + } + } +} diff --git a/web/sass-files/sass/components/_emoticons.scss b/web/sass-files/sass/components/_emoticons.scss new file mode 100644 index 000000000..661b25d94 --- /dev/null +++ b/web/sass-files/sass/components/_emoticons.scss @@ -0,0 +1,27 @@ +@charset 'UTF-8'; + +.emoticon { + width: 1.5em; + height: 1.5em; + display: inline-block; + margin-bottom: .25em; + background-size: contain; +} + +.emoticon-suggestion { + @include clearfix; + width: 100%; + height: 30px; + cursor: pointer; + font-size: 13px; + line-height: 30px; +} + +.emoticon-suggestion__image { + width: 20px; + height: 20px; + margin: 6px 6px 0 5px; + padding: 0; + text-align: center; + vertical-align: top; +} diff --git a/web/sass-files/sass/components/_error-bar.scss b/web/sass-files/sass/components/_error-bar.scss new file mode 100644 index 000000000..2b74a33ae --- /dev/null +++ b/web/sass-files/sass/components/_error-bar.scss @@ -0,0 +1,30 @@ +@charset 'UTF-8'; + +.error-bar { + background-color: #09f; + text-align: center; + position: relative; + color: #fff; + position: absolute; + top: 0; + width: 100%; + z-index: 9999; + padding: 5px 30px; + + &__close { + position: absolute; + right: 0; + top: 0; + color: #fff; + font-size: 20px; + font-weight: 600; + text-decoration: none; + padding: 0 10px; + font-family: 'Open Sans', sans-serif; + + &:hover { + color: #fff; + text-decoration: none; + } + } +} diff --git a/web/sass-files/sass/components/_files.scss b/web/sass-files/sass/components/_files.scss new file mode 100644 index 000000000..17ffb206f --- /dev/null +++ b/web/sass-files/sass/components/_files.scss @@ -0,0 +1,293 @@ +@charset 'UTF-8'; + +.file-preview__container { + position: relative; + margin: 1px 0 10px; + width: 100%; + max-height: 100px; + height: 100px; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} + +.file-preview { + display: inline-block; + width: 120px; + height: 100px; + margin: 0 0 0 10px; + position: relative; + border: 1px solid #ddd; + @include clearfix; + + &:hover .file-preview__remove:after { + @include opacity(1); + } + + &:first-child { + margin-left: 0; + } + + .spinner { + position: absolute; + top: 50%; + left: 50%; + margin-left: -16px; + margin-top: -16px; + width: 32px; + height: 32px; + } +} + +.file-preview__image { + display: block; + height: auto; + max-width: 100%; +} + +.file-preview__remove { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + + &:after { + background: rgba(0, 0, 0, .4); + content: ''; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; + @include opacity(0); + } + + i { + top: 5px; + right: 5px; + position: absolute; + color: #fff; + cursor: pointer; + z-index: 5; + opacity: inherit; + text-shadow: 0 0px 3px #444; + text-shadow: 0 0px 3px rgba(0, 0, 0, .7); + } +} + +.image-comment { + background-position: left top; + background-repeat: no-repeat; + width: 300px; + height: 300px; +} + + +.file-icon { + width: 100%; + height: 100%; + + &.audio { + @include file-icon('../images/icons/audio.png'); + } + + &.video { + @include file-icon('../images/icons/video.png'); + } + + &.ppt { + @include file-icon('../images/icons/ppt.png'); + } + + &.generic { + @include file-icon('../images/icons/generic.png'); + } + + &.code { + @include file-icon('../images/icons/code.png'); + } + + &.excel { + @include file-icon('../images/icons/excel.png'); + } + + &.word { + @include file-icon('../images/icons/word.png'); + } + + &.pdf { + @include file-icon('../images/icons/pdf.png'); + } + + &.patch { + @include file-icon('../images/icons/patch.png'); + } + + &.image { + @include file-icon('../images/icons/image.png'); + } +} + +.post-image__column { + position: relative; + width: 240px; + height: 100px; + float: left; + margin: 5px 10px 5px 0; + border: 1px solid lightgrey; + + a { + text-decoration: none; + color: grey; + } +} + +.post-image__load { + height: 100%; + width: 100%; + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; +} + +.post-image { + width: 100%; + height: 100%; + background-color: #fff; + background-repeat: no-repeat; + overflow: hidden; + position: relative; + text-align: center; + + &.small { + background-position: center; + } + + &.normal { + background-position: top left; + } + + .spinner.file__loading { + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } + + .file__loaded { + max-width: initial; + &.landscape, + &.quadrat { + height: 100px; + } + &.portrait { + width: 120px; + } + } + + &:hover .file-playback__controls.stop { + @include opacity(1); + } +} + +.post-image__thumbnail { + float: left; + width: 50%; + height: 100%; + cursor: zoom-in; + cursor: -webkit-zoom-in; +} + +.post-image__details { + float: left; + @include clearfix; + word-break: break-word; + width: 50%; + height: 100%; + background: white; + border-left: 1px solid #ddd; + font-size: 13px; + padding: 7px; + color: #333; + + .post-image__name { + margin-bottom: 3px; + display: block; + } + + .post-image__download { + display: inline-block; + padding-right: 7px; + cursor: pointer; + @include opacity(.7); + } + + .post-image__type { + @include opacity(.6); + } + + .post-image__size { + margin-left: 4px; + @include opacity(.6); + } +} + +.file-details__container { + @include display-flex; + display: -ms-flexbox; + + .file-details { + width: 320px; + height: 270px; + padding: 14px; + text-align: left; + vertical-align: top; + + .file-details__name { + color: #333; + font-size: 16px; + } + + .file-details__info { + color: grey; + } + } + .file-details__preview { + width: 320px; + height: 270px; + border-right: 1px solid #ddd; + vertical-align: center; + + // helper to center the image icon in the preview window + .file-details__preview-helper { + height: 100%; + display: inline-block; + vertical-align: middle; + } + } +} + +.file-playback__controls { + position: absolute; + right: 5px; + bottom: 0; + font-size: 22px; + cursor: pointer; + z-index: 2; + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + transition: opacity .6s; + + &.stop { + @include opacity(0); + } +} + +.view-image__loading { + background: black; + min-height: 100px; +} diff --git a/web/sass-files/sass/components/_inputs.scss b/web/sass-files/sass/components/_inputs.scss new file mode 100644 index 000000000..5e3311182 --- /dev/null +++ b/web/sass-files/sass/components/_inputs.scss @@ -0,0 +1,26 @@ +@charset 'UTF-8'; + +.form-control { + @include border-radius($border-rad); + + &:focus { + @include box-shadow(none); + } + + &.no-padding { + line-height: 32px; + padding: 0; + } + + &.no-resize { + resize: none; + } +} + +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + cursor: auto; + background: rgba(#fff, .1); + color: inherit; +} diff --git a/web/sass-files/sass/components/_links.scss b/web/sass-files/sass/components/_links.scss new file mode 100644 index 000000000..f31008b4f --- /dev/null +++ b/web/sass-files/sass/components/_links.scss @@ -0,0 +1,23 @@ +@charset 'UTF-8'; + +a { + cursor: pointer; + text-decoration: none; + word-break: break-word; + color: $color--primary; +} + +a:focus, +a:hover { + color: $color--primary--hover; +} + +.text-danger, +a.text-danger { + color: #e05f5d; + + &:hover, + &:focus { + color: #e05f5d; + } +} diff --git a/web/sass-files/sass/components/_mentions.scss b/web/sass-files/sass/components/_mentions.scss new file mode 100644 index 000000000..98efc599d --- /dev/null +++ b/web/sass-files/sass/components/_mentions.scss @@ -0,0 +1,56 @@ +@charset 'UTF-8'; + +.mention { + color: #fff; + background: $color--primary; + position: relative; + z-index: 10; + padding-bottom: 2px; + @include border-radius(3px); +} + +.mentions__name { + position: relative; + width: 100%; + height: 36px; + padding: 2px; + z-index: 101; + line-height: 36px; + font-size: 13px; + cursor: pointer; + white-space: nowrap; + + .mention-align { + @include clearfix; + text-overflow: ellipsis; + width: calc(100% - 50px); + } +} + +.mention__image { + margin-right: 6px; + height: 32px; + width: 32px; + line-height: 36px; + display: block; + font-size: 20px; + text-align: center; + @include border-radius(32px); + + .mention--align { + max-width: 80%; + overflow: hidden; + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + } +} + +.mention__fullname { + color: grey; + padding-left: 10px; +} + +.mention--highlight { + background-color: #fff2bb; +} diff --git a/web/sass-files/sass/components/_modal.scss b/web/sass-files/sass/components/_modal.scss new file mode 100644 index 000000000..a8e8a99f7 --- /dev/null +++ b/web/sass-files/sass/components/_modal.scss @@ -0,0 +1,508 @@ +@charset 'UTF-8'; + +#channel_members_modal .modal-body { + min-height: 110px; +} + +.modal-body { + padding: 20px 15px; + overflow: auto; +} + +.more-table { + margin: 0; + table-layout: fixed; +} + +.modal { + width: 100%; + color: #333; + + body.browser--IE & { + .modal-dialog { + @include translateY(0); + } + } + + &.image_modal { + .modal-backdrop.in { + @include opacity(.7); + } + } + + .custom-textarea { + color: inherit; + border-color: #ccc; + + &:focus { + border-color: #ccc; + box-shadow: none; + } + } + + .btn { + font-size: 13px; + + &.btn-default { + border: none; + background: transparent; + } + } + + .info__label { + font-weight: 600; + text-align: right; + padding-right: 0; + } + + .team-member-list { + width: 100%; + } + + .remove__member { + float: right; + color: #999; + font-size: 20px; + line-height: 0; + padding: 6px; + + &:hover { + color: #e56565; + } + } + + .modal-dialog { + max-width: 95%; + margin-left: auto; + margin-right: auto; + } + + .modal-push-down { + margin-top: 5%; + } + + .modal-next-bar { + position: absolute; + top: 0px; + right: 0; + height: 100%; + } + + .modal-header { + border-radius: 0; + background: $color--primary; + color: #fff; + padding: 15px 15px 11px; + border: 1px solid #ddd; + min-height: 56px; + @include clearfix; + + .modal-title { + float: left; + font-size: 17px; + line-height: 27px; + color: #f4f4f4; + + .name { + font-weight: 600; + color: #fff; + } + } + + .modal-action { + padding: 0; + margin: 0; + } + + button.close { + color: #fff; + @include opacity(1); + z-index: 5; + width: 30px; + height: 30px; + line-height: 30px; + @include single-transition(all, .25s, ease-in); + position: absolute; + right: 10px; + + &:hover { + background: rgba(0, 0, 0, .1); + } + + span { + font-family: 'Open Sans', sans-serif; + line-height: 10px; + } + } + + .btn { + &.btn-primary { + float: right; + margin: -4px 25px 0 0; + position: relative; + + i { + margin-right: 5px; + } + } + } + } + + .no-channel-message { + text-align: center; + padding: 2em 1em; + + .primary-message { + font-size: 1.25em; + } + + .secondary-message { + @include opacity(.8); + margin: 1em 0 0; + } + } + + .modal-content { + border-radius: 0; + box-shadow: none; + } + + .modal-chevron-icon { + top: 50%; + font-size: 120%; + } + + .modal-prev-bar { + position: absolute; + top: 0px; + left: 0; + height: 100%; + } + + &#more_channels { + .modal-body { + padding: 0; + } + } + + .modal-image { + position: relative; + width: 100%; + height: 100%; + margin: 0 auto; + max-width: 100%; + + .modal-body { + @include clearfix; + height: 100%; + display: table; + table-layout: fixed; + width: 100%; + max-height: 100%; + } + + .image-wrapper { + position: relative; + max-width: 90%; + @include border-radius(3px); + display: table-cell; + vertical-align: middle; + text-align: center; + width: 100%; + + &:hover { + @include border-radius(3px 3px 0 0); + } + + &.default { + width: 100%; + height: 80%; + } + + audio, + canvas, + progress, + video { + max-width: 100%; + height: auto; + display: block; + } + + .modal-close { + background: url('../images/close.png') no-repeat; + @include background-size(100% 100%); + width: 37px; + height: 37px; + position: absolute; + right: -13px; + top: -13px; + @include opacity(0); + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + transition: opacity .6s; + cursor: pointer; + z-index: 9999; + + &.modal-close--show { + @include opacity(1); + } + } + + > div { + min-height: 100px; + min-width: 320px; + background: #fff; + display: inline-block; + position: relative; + + &:hover .file-playback__controls.stop { + @include opacity(1); + } + } + + img { + max-width: 100%; + max-height: 100%; + } + + .spinner.file__loading { + z-index: 2; + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } + } + + .modal-content { + box-shadow: none; + background: rgba(0, 0, 0, 0); + width: 100%; + height: 100%; + padding: 0; + border: none; + } + + .image-body { + vertical-align: middle; + display: table-cell; + text-align: center; + height: 100%; + padding: 0; + position: relative; + overflow: visible; + } + + .image-control { + width: 50px; + height: 45px; + float: left; + background: url(../images/prev.png) left no-repeat; + top: 50%; + position: relative; + margin-top: -23px; + &.image-next { + float: right; + background: url(../images/next.png) left no-repeat; + } + } + + .loader-image { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .loader-percent { + position: absolute; + top: 55px; + bottom: 0; + left: 0; + right: 0; + margin: auto; + color: grey; + height: 20px; + } + + .modal-button-bar { + position: absolute; + bottom: -40px; + left: 0px; + right: 0px; + background-color: #222; + @include border-radius(0 0 3px 3px); + @include opacity(0); + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + transition: opacity .6s; + line-height: 40px; + padding: 0 10px; + + &.footer--show { + @include opacity(1); + } + + .image-links { + a, + span { + float: right; + } + } + + .text { + vertical-align: middle; + bottom: 0; + color: white; + margin-left: 5px; + } + + .public-link { + margin-right: 5px; + } + } + } +} + + +// Invite New Member +.invite { + margin-right: 40px; +} + +.row--invite { + margin-right: 40px; + @include clearfix; + + .col-sm-6 { + padding: 0 0 0 15px; + &:first-child { + padding-left: 0; + } + } +} + +.more-modal { + .user-list { + overflow-y: auto; + overflow-x: hidden; + margin-top: 10px; + position: relative; + } + + .modal-body { + padding: 10px 0 20px; + overflow-x: hidden; + } + + .filter-row { + margin: 10px 0; + @include clearfix; + } + + .member-count { + margin-top: 5px; + float: right; + @include opacity(.8); + } + + .more-purpose { + @include opacity(.7); + } +} + +.modal-body.edit-modal-body { + overflow: visible; + + .suggestion-list__content { + max-height: 150px; + } +} + +.more-modal__list { + overflow: auto; + display: flex; + flex-direction: column; + + .popover & { + font-size: 0.95em; + + .more-modal__row { + padding: 5px 10px; + } + + .more-modal__name { + font-weight: normal; + } + } + + .more-modal__image { + flex-grow: 0; + flex-shrink: 0; + @include border-radius(60px); + margin-right: 8px; + } + + .more-modal__details { + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; + } + + .more-modal__actions { + flex-grow: 0; + flex-shrink: 0; + padding-left: 20px; + } + + .more-modal__name { + font-weight: 600; + font-size: .95em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .more-modal__description { + @include opacity(.7); + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .more-modal__row { + display: flex; + padding: 8px 15px; + border-bottom: 1px solid; + } + + p { + font-size: .9em; + overflow: hidden; + text-overflow: ellipsis; + @include opacity(.8); + margin: 5px 0; + } +} + +.filtered-user-list { + display: flex; + flex-direction: column; + + .filter-row { + flex-grow: 0; + flex-shrink: 0; + } + + .user-list { + flex-grow: 1; + flex-shrink: 1; + } +} diff --git a/web/sass-files/sass/components/_module.scss b/web/sass-files/sass/components/_module.scss new file mode 100644 index 000000000..24488df96 --- /dev/null +++ b/web/sass-files/sass/components/_module.scss @@ -0,0 +1,19 @@ +// Only for combining all the files in this folder +@import 'alerts'; +@import 'buttons'; +@import 'dropdown'; +@import 'emoticons'; +@import 'error-bar'; +@import 'files'; +@import 'inputs'; +@import 'links'; +@import 'mentions'; +@import 'modal'; +@import 'oauth'; +@import 'popover'; +@import 'scrollbar'; +@import 'search'; +@import 'suggestion-list'; +@import 'tooltip'; +@import 'tutorial'; +@import 'videos'; diff --git a/web/sass-files/sass/components/_oauth.scss b/web/sass-files/sass/components/_oauth.scss new file mode 100644 index 000000000..cd8382a5c --- /dev/null +++ b/web/sass-files/sass/components/_oauth.scss @@ -0,0 +1,38 @@ +@charset 'UTF-8'; + +.prompt { + background: #fff; + border: 1px solid #ddd; + padding: 1em 2em 0; + margin: 50px auto; + max-width: 90%; + width: 600px; + + .prompt__heading { + font-size: em(20px); + line-height: normal; + margin: 1em 0; + display: table; + width: 100%; + + > div { + display: table-cell; + vertical-align: top; + } + + img { + margin-right: 15px; + } + } + + .prompt__allow { + margin: 1em 0; + font-size: em(24px); + } + + .prompt__buttons { + text-align: right; + border-top: 1px solid #ddd; + padding: 1.5em 0; + } +} diff --git a/web/sass-files/sass/components/_popover.scss b/web/sass-files/sass/components/_popover.scss new file mode 100644 index 000000000..588a71946 --- /dev/null +++ b/web/sass-files/sass/components/_popover.scss @@ -0,0 +1,184 @@ +@charset 'UTF-8'; + +.popover { + @include border-radius($border-rad); + color: #333; + + &.bottom, + &.right, + &.top, + &.left { + > .arrow:after { + border-color: transparent; + } + } + + .popover-title { + background: rgba(black, .05); + padding: 8px 10px; + } + + .popover-content { + p:last-child { + margin-bottom: 5px; + } + } +} + +.channel-header__info .popover-content { + max-height: 250px; + overflow: auto; +} + +.user-popover { + cursor: pointer; + display: inline-block; +} + +.code-popover .popover-content { + padding: 5px; +} + +.user-popover__image { + margin: 0 0 10px; + @include border-radius(128px); +} + +.user-popover__email { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +.search-help-popover { + visibility: hidden; + max-width: none; + width: 100%; + top: 36px; + @include single-transition(opacity, .3s, ease-in); + font-size: em(13px); + + &.autocomplete { + display: block; + .popover-content { + padding: 10px; + position: relative; + } + } + + .search-autocomplete__divider { + margin: 10px 0 5px; + line-height: 21px; + position: relative; + &:first-child { + margin-top: 5px; + } + span { + display: inline-block; + padding-right: 10px; + background: #fff; + z-index: 5; + position: relative; + } + &:before { + content: ''; + position: absolute; + width: 100%; + height: 1px; + background: #ddd; + top: 10px; + left: 0; + @include opacity(.2); + } + } + + .search-autocomplete__item { + cursor: pointer; + padding: 6px 8px; + margin: 3px 0 0 5px; + @include border-radius(2px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + background: rgba(black, .1); + } + + &.selected { + background: rgba(black, .2); + } + + .fa { + margin-right: 5px; + @include opacity(.5); + } + + .profile-img { + margin-top: -1px; + height: 16px; + margin-right: 6px; + width: 16px; + } + } + + &.bottom > .arrow { + top: -18px; + border-width: 9px; + left: 30px; + } + + .popover-content { + max-height: 500px; + overflow: auto; + padding: 3px 13px; + } + + h4 { + font-size: 1em; + } + + ul { + padding-left: 17px; + span { + @include opacity(.8); + } + strong, + b { + @include opacity(1); + } + } + + .tooltip-inner { + max-width: 100%; + } + + &.visible { + visibility: visible; + @include opacity(1); + } +} + +#member-list-popover { + max-width: initial; + .popover-content { + position: relative; + padding: 0; + width: 260px; + max-height: 350px; + .text-nowrap { + padding: 6px 10px; + width: 100%; + overflow: hidden; + line-height: 26px; + font-size: 13px; + } + .more__name { + margin-left: 6px; + max-width: 140px; + overflow: hidden; + text-overflow: ellipsis; + } + } +} diff --git a/web/sass-files/sass/components/_scrollbar.scss b/web/sass-files/sass/components/_scrollbar.scss new file mode 100644 index 000000000..4ecb38b1f --- /dev/null +++ b/web/sass-files/sass/components/_scrollbar.scss @@ -0,0 +1,28 @@ +@charset 'UTF-8'; + +::-webkit-scrollbar +{ + width: 8px; /* for vertical scrollbars */ + height: 8px; /* for horizontal scrollbars */ +} + +::-webkit-scrollbar-track +{ + background: rgba(0, 0, 0, 0.1); +} + +::-webkit-scrollbar-thumb +{ + @include border-radius($border-rad * 2); + background: rgba(0, 0, 0, 0.4); +} + +body{ + scrollbar-face-color: rgba(0, 0, 0, 0.1); + scrollbar-shadow-color: #2D2C4D; + scrollbar-highlight-color:#7D7E94; + scrollbar-3dlight-color: #7D7E94; + scrollbar-darkshadow-color: #2D2C4D; + scrollbar-track-color: rgba(0, 0, 0, 0.1); + scrollbar-arrow-color: #C1C1D1; +} \ No newline at end of file diff --git a/web/sass-files/sass/components/_search.scss b/web/sass-files/sass/components/_search.scss new file mode 100644 index 000000000..faf0b8177 --- /dev/null +++ b/web/sass-files/sass/components/_search.scss @@ -0,0 +1,175 @@ +@charset 'UTF-8'; + +#channel-header .search-bar__container { + padding: 0 9px 0 3px; +} + +.search-bar__container { + padding: 12px 8px 0 0; + @include flex(0 0 56px); + + .sidebar--right.move--left & { + padding-right: 42px; + } +} + +.glyphicon-refresh-animate { + @include animation(spin .7s infinite linear); +} + +.search__clear { + display: none; + position: absolute; + right: 0; + line-height: 45px; + margin-right: 13px; + @include single-transition(all, .2s, linear); + @include translateX(60px); + z-index: 5; + cursor: pointer; +} + +.search-item-snippet { + @include clearfix; + text-overflow: ellipsis; +} + +.sidebar__collapse { + cursor: pointer; + z-index: 5; + fill: #fff; + position: absolute; + left: 0; + font-size: 35px; + width: 49px; + @include single-transition(all, .2s, linear); + @include translateX(0px); + text-align: center; + padding-left: 1px; + line-height: 40px; + display: none; +} + +.search-item-snippet { + ul, + ol { + padding-left: 20px; + } +} + +.sidebar__search-icon { + position: absolute; + top: 15px; + margin-left: 10px; + font-size: 14px; + @include opacity(.5); + display: none; + color: #777; +} + +.search__form { + position: relative; + + .search-bar__container & { + margin: 0; + border: 1px solid #ddd; + @include border-radius(2px); + width: 300px; + } + + .sidebar--right & { + width: 100%; + } + + .search-bar { + height: 40px; + padding-right: 30px; + box-shadow: none; + + .search-bar__container & { + height: 30px; + border: none; + } + } + + .glyphicon-refresh-animate { + top: 27px; + position: absolute; + right: 27px; + color: #999; + + .search-bar__container & { + right: 7px; + top: 8px; + } + } +} + +.search-items-container { + position: relative; + overflow: auto; + -webkit-overflow-scrolling: touch; + @include flex(1 1 auto); + height: calc(100% - 56px); + padding-top: 10px; +} + +.search-results-header { + font-size: 1em; + text-transform: uppercase; + color: #999; + font-weight: 400; + color: #888; + height: 44px; + line-height: 44px; + padding: 0 10px 0 10px; + border-bottom: $border-gray; +} + +.search-item__container { + .post { + padding: 0 1em 1em; + margin: 0; + + &:first-child { + border: none; + } + + .search-channel__name { + font-weight: 600; + margin: 0 0 10px 0; + } + } +} + +.search-item__jump { + position: absolute; + right: 0; + top: 0px; + font-size: 13px; + @include opacity(.8); + + &:hover { + @include opacity(1); + } +} + +.search-item__comment { + position: absolute; + right: 0; + margin-right: 35px; + top: 0; +} + +.search-item-time { + @include opacity(.7); + font-size: .9em; +} + +.search-results-none { + padding: 10px; +} + +.search-highlight { + background-color: #fff2bb; +} diff --git a/web/sass-files/sass/components/_suggestion-list.scss b/web/sass-files/sass/components/_suggestion-list.scss new file mode 100644 index 000000000..125a3cf32 --- /dev/null +++ b/web/sass-files/sass/components/_suggestion-list.scss @@ -0,0 +1,41 @@ +@charset 'UTF-8'; + +.suggestion-list { + width: 100%; + z-index: 100; + @extend %popover-box-shadow; +} + +.suggestion-list--top { + position: absolute; +} + +.suggestion-list__content { + width: 100%; + max-height: 292px; + background-color: #fff; + border: $border-gray; + overflow-x: hidden; + overflow-y: scroll; + + .command { + position: relative; + width: 100%; + line-height: 24px; + padding: 5px 10px 8px; + z-index: 101; + font-size: .95em; + border-bottom: 1px solid #ddd; + + .command__desc { + margin-left: 5px; + @include opacity(.5); + line-height: normal; + } + } +} + +.suggestion-list__content--top { + position: absolute; + bottom: 0; +} diff --git a/web/sass-files/sass/components/_tooltip.scss b/web/sass-files/sass/components/_tooltip.scss new file mode 100644 index 000000000..44c10edb9 --- /dev/null +++ b/web/sass-files/sass/components/_tooltip.scss @@ -0,0 +1,10 @@ +@charset 'UTF-8'; + +.tooltip { + .tooltip-inner { + word-break: break-word; + font-size: 13px; + padding: 3px 10px 4px; + font-weight: 500; + } +} diff --git a/web/sass-files/sass/components/_tutorial.scss b/web/sass-files/sass/components/_tutorial.scss new file mode 100644 index 000000000..f15919009 --- /dev/null +++ b/web/sass-files/sass/components/_tutorial.scss @@ -0,0 +1,208 @@ +@charset 'UTF-8'; + +.tip-backdrop { + background: rgba(black, .5); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 999; +} + +.tip-overlay { + width: 350px; + max-width: 90%; + position: absolute; + background-color: #fff; + @include border-radius(3px); + padding: 20px; + z-index: 1000; + + .arrow { + border-width: 10px; + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + &.tip-overlay--sidebar { + max-width: 75%; + margin: 50px 0 0 10px; + min-height: 330px; + .tutorial__footer { + position: absolute; + width: 100%; + bottom: 20px; + left: 0; + padding: 0 20px; + } + .arrow { + top: 80px; + left: -10px; + margin-top: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--header { + margin: 10px 0 0 10px; + .arrow { + top: 15px; + left: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--chat { + margin-top: -10px; + .arrow { + left: 50%; + margin-left: -10px; + border-bottom-width: 0; + border-top-color: #fff; + bottom: -10px; + } + } + + h4 { + font-size: em(16px); + font-weight: 600; + margin: 5px 0 15px; + } + + p { + font-size: 13px; + line-height: 1.6; + + strong { + font-weight: 600; + } + } + + .btn { + background: #ccc; + color: #fff; + @include border-radius(3px); + border: none; + margin: 10px 0; + + &:hover, + &:active, + &:focus { + color: #fff; + border: none; + background: #bbb; + } + } + + .tip-opt { + font-size: 12px; + + span { + @include opacity(.9); + } + } + + .tutorial__circles { + margin: 1.5em 0px -1.7em -4px; + + .circle { + width: 7px; + height: 7px; + margin: 0 4px; + } + } +} + +.tip-button { + z-index: 998; + right: -10px; + top: -10px; + position: relative; + cursor: pointer; +} + +.tip-div { + position: absolute; + top: 0px; + right: 0px; + + &.tip-overlay--header { + top: 21px; + right: 2px; + .tip-button { + @include opacity(.8); + } + } + + &.tip-overlay--sidebar { + left: 0; + @include opacity(.8); + top: -9px; + } +} + +.tutorial-steps__container { + text-align: center; + width: 100%; + display: table; + height: 100%; + .tutorial__content { + display: table-cell; + vertical-align: middle; + padding-bottom: 100px; + padding: 20px 40px 40px; + .tutorial__steps { + position: relative; + max-width: 310px; + min-height: 370px; + margin-bottom: 50px; + text-align: left; + display: inline-block; + } + } + .tutorial__footer { + position: absolute; + bottom: 0; + } + h1 { + font-size: em(40px); + margin: -20px 0 30px; + font-weight: 600; + } + h3 { + font-size: em(24px); + margin-bottom: 30px; + font-weight: 600; + } + .tutorial__circles { + position: absolute; + bottom: 40px; + } + .tutorial-skip { + margin-left: 13px; + } +} + +.tutorial__circles { + margin: 2em 0; + .circle { + width: 9px; + height: 9px; + @include border-radius(9px); + @include opacity(.2); + background: #000; + display: inline-block; + margin: 0 5px; + &.active { + background: $color--primary; + @include opacity(1); + } + } +} diff --git a/web/sass-files/sass/components/_videos.scss b/web/sass-files/sass/components/_videos.scss new file mode 100644 index 000000000..91db750bd --- /dev/null +++ b/web/sass-files/sass/components/_videos.scss @@ -0,0 +1,66 @@ +@charset 'UTF-8'; + +.video-div { + position: relative; + max-width: 480px; + margin-bottom: 8px; + .video-thumbnail { + max-width: 100%; + height: auto; + } + .block { + background-color: rgba(0,0,0,.5); + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + margin-top: -100px; + width: 200px; + margin: -75px 0 0 -100px; + height: 150px; + } +} + +.video-type { + @include opacity(.8); + font-size: 15px; + margin: 0px; + padding: 0px; +} + +.video-title { + font-size: 15px; + margin-top: 3px; +} +.play-button { + width: 100px; + height: 100px; + position: absolute; + top: 26px; + right: 51px; + border: 4px solid; + border-color: rgba(255,255,255,.4); + border-radius: 14px; +} +.play-button span { + position: absolute; + top: 10px; + left: 20px; + width: 0; + height: 0; + border-top: 36px solid transparent; + border-bottom: 36px solid transparent; + border-left: 60px solid rgba(255,255,255,.4); +} + +.img-div { + -moz-force-broken-image-icon: 1; + position: relative; + max-width: 450px; + max-height: 500px; + margin-bottom: 8px; + border-radius: 5px; + &.placeholder { + height: 500px; + } +} diff --git a/web/sass-files/sass/layout/_content.scss b/web/sass-files/sass/layout/_content.scss new file mode 100644 index 000000000..71bef0d7f --- /dev/null +++ b/web/sass-files/sass/layout/_content.scss @@ -0,0 +1,85 @@ +@charset 'UTF-8'; + +.inner-wrap { + &.move--left { + .search-bar__container { + display: none; + } + } + + &.move--right { + .search-bar__container { + display: none; + } + } +} + +.app__content { + height: 100%; + padding-top: 50px; + margin-left: 220px; + position: relative; + background: #fff; + @include display-flex; + @include flex-direction(column); + + .channel__wrap & { + padding-top: 0; + } +} +#post-create { + @include flex(0 0 auto); + background: #fff; + width: 100%; + z-index: 3; +} + +#archive-link-home { + @include flex(0 0 auto); + cursor: pointer; + padding: 10px 20px; + font-size: 13px; + + .fa { + font-size: 11px; + @include opacity(.7); + } + + a { + color: inherit; + } +} + +.post-list { + .new-messages-hr { + margin-top: 5px; + margin-bottom: 0px; + border: 0; + border-top: 1px solid #f80; + } + + .new-messages-text { + margin-top: 2px; + margin-bottom: 5px; + color: #f80; + text-align: center; + } +} + +.new-messages-hr { + margin-top: 5px; + margin-bottom: 0px; + border: 0; + border-top: 1px solid #f80; +} + +.new-messages-text { + margin-top: 2px; + margin-bottom: 5px; + color: #f80; + text-align: center; +} + +.delete-message-text { + margin-top: 10px; +} diff --git a/web/sass-files/sass/layout/_footer.scss b/web/sass-files/sass/layout/_footer.scss new file mode 100644 index 000000000..5624e6376 --- /dev/null +++ b/web/sass-files/sass/layout/_footer.scss @@ -0,0 +1,30 @@ +@charset 'UTF-8'; + +.footer-pane { + background: #eee; + padding-bottom: 1em; + + .footer-link { + padding: 0 1.5em; + + &.copyright { + color: #999; + padding-right: 0; + } + } + + .footer-site-name { + padding: 1.5em 0 1em; + font-size: 14px; + font-weight: bold; + text-transform: uppercase; + } +} + +.footer, +.footer-pane, +.footer-push { + height: 89px; +} + + diff --git a/web/sass-files/sass/layout/_forms.scss b/web/sass-files/sass/layout/_forms.scss new file mode 100644 index 000000000..1f51603cc --- /dev/null +++ b/web/sass-files/sass/layout/_forms.scss @@ -0,0 +1,66 @@ +@charset 'UTF-8'; + +.form-horizontal { + .modal-intro { + margin: -10px 0 30px; + } + + .form__label { + text-align: left; + padding-right: 3px; + font-weight: 600; + font-size: 1.1em; + + &.light { + font-weight: normal; + color: #999; + font-size: 1.05em; + font-style: italic; + padding-top: 2px; + } + } + + .input__help { + color: inherit; + margin: 10px 0 0 10px; + word-break: break-word; + @include opacity(.8); + + &.dark { + @include opacity(1); + } + + &.error { + color: #a94442; + } + } + + .form-control { + font-weight: normal; + } + + .form-group { + margin-bottom: 25px; + + &.less { + margin-bottom: 10px; + } + } +} + +.help-block { + font-size: .95em; + margin: 10px 0 0; + color: #999; +} + +.disabled-input { + background-color: #ddd !important; +} + +.form-group { + &.form-group--small { + margin-bottom: 10px; + } +} + diff --git a/web/sass-files/sass/layout/_headers.scss b/web/sass-files/sass/layout/_headers.scss new file mode 100644 index 000000000..0a6b9f920 --- /dev/null +++ b/web/sass-files/sass/layout/_headers.scss @@ -0,0 +1,370 @@ +@charset 'UTF-8'; + +#channel-header { + @include flex(0 0 56px); +} + +.row { + &.header { + position: relative; + + .channel__wrap & { + display: none; + } + } +} + +.header-dropdown__icon { + font-size: 11px; + color: inherit; + top: 3px; +} + +.channel-header__info { + display: table; + table-layout: fixed; + width: 100%; + + > div { + display: block; + white-space: nowrap; + word-break: break-word; + + &.dropdown { + max-width: 100%; + padding-right: 1em; + float: left; + + .header-dropdown__icon { + color: #777; + } + + a { + text-decoration: none; + } + + .modal { + white-space: normal; + } + } + + &.description { + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; + max-height: 45px; + .markdown-inline-img { + max-height: 45px; + } + } + + &.popover { + white-space: normal; + } + } +} + +.channel-intro { + margin: 0 auto 35px; + padding: 0 1em 5px; + max-width: 1000px; + border-bottom: 1px solid lightgrey; + + .intro-links { + margin: 0 1.5em 10px 0; + display: inline-block; + + .fa { + margin-right: 5px; + } + } + + .channel-intro-profile { + margin-top: 5px; + margin-left: 63px; + } + + .channel-intro-img { + float: left; + img { + @include border-radius(100px); + } + } + + .channel-intro__title { + font-weight: 600; + font-size: 20px; + margin-bottom: 15px; + } + + .channel-intro__content { + background: #f7f7f7; + padding: 10px 15px; + @include border-radius(3px); + } + .channel-intro-text { + margin-top: 35px; + } +} + +// Team Header in Sidebar +.sidebar--left, +.sidebar--menu { + .team__header { + position: relative; + padding: 9px 10px; + @include legacy-pie-clearfix; + + &:before { + @include single-transition(all, .05s, linear); + content: ''; + background: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + } + + &:hover { + &:before { + background: rgba(black, .1); + } + + .user__name { + color: #fff; + } + + .navbar-right { + .dropdown-toggle { + @include opacity(1); + } + } + } + + .navbar-right { + font-size: .85em; + position: absolute; + top: 10px; + right: 22px; + z-index: 5; + + .dropdown-toggle { + @include single-transition(all, .1s, linear); + padding: 10px; + @include opacity(.8); + } + + .dropdown-menu { + li a { + padding: 3px 20px; + text-overflow: ellipsis; + overflow: hidden; + } + } + + .dropdown__icon { + fill: #fff; + } + } + + .settings__link a:hover, + a:visited, + a:link, + a:active { + text-decoration: none; + } + + .user__picture { + width: 36px; + height: 36px; + float: left; + @include border-radius(36px); + margin-right: 6px; + } + + .header__info { + color: #fff; + @include clearfix; + padding-left: 2px; + z-index: 1; + position: relative; + } + + .team__name, + .user__name { + display: block; + font-weight: 600; + font-size: 16px; + max-width: 85%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-decoration: none; + } + + .team__name { + line-height: 22px; + margin-top: -2px; + float: left; + } + + .user__name { + @include single-transition(all, .1s, linear); + font-size: 14px; + line-height: 18px; + font-weight: 400; + color: #eee; + color: rgba(#fff, .8); + } + + > .nav { + > li { + > a { + float: right; + background: none !important; + padding: 2px; + + &.dropdown-toggle { + line-height: 1.8; + font-size: 1em; + color: #fff; + } + } + } + } + } + .search__clear { + display: none; + } +} + +#navbar { + .navbar-default { + .navbar-toggle { + &.menu-toggle { + padding: 0 1em; + } + } + } +} + +.channel-header { + width: 100%; + border-left: none; + font-size: 14px; + line-height: 56px; + + #member_popover { + width: 50px; + color: #999; + cursor: pointer; + + .fa { + margin-left: 4px; + font-size: 16px; + } + } + + &.alt { + margin: 0; + th { + font-weight: normal !important; + } + td { + border: none; + } + } + + th { + text-align: center; + &:first-child { + text-align: left !important; + border-left: none; + width: 100%; + padding-left: 1em; + } + &:last-child { + width: 8.9%; + } + } + + td { + padding: 5px 25px 5px !important; + font-size: 13px; + text-align: center !important; + &:first-child { + text-align: left !important; + } + } + + .heading { + margin: 0; + color: #555; + font-size: 1.3em; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + display: inline-block; + vertical-align: middle; + margin-right: 4px; + } + + .caret { + margin-top: 3px; + } + + .more { + color: #81848b; + display: inline-block; + vertical-align: top; + text-transform: capitalize; + font-size: 13px; + } + + .disabled { + color: #999; + } +} + +.channel-header__navbar { + font-size: 16px; + + .heading { + margin-right: 3px; + } + + .header-dropdown__icon { + top: 1px; + } +} + +.channel-header__links { + font-family: 'Open Sans', sans-serif; + height: 30px; + width: 24px; + line-height: 26px; + margin-right: 9px; + font-size: 22px; + + .channel__wrap.move--left & { + position: absolute; + right: -400px; + top: 14px; + } + + > a { + color: inherit; + text-decoration: none; + @include opacity(.6); + @include single-transition(all, .1s, ease-in); + + &:hover { + @include opacity(1); + } + &:focus { + color: inherit; + } + } +} diff --git a/web/sass-files/sass/layout/_markdown.scss b/web/sass-files/sass/layout/_markdown.scss new file mode 100644 index 000000000..307060ac3 --- /dev/null +++ b/web/sass-files/sass/layout/_markdown.scss @@ -0,0 +1,116 @@ +@charset 'UTF-8'; + +.markdown__heading { + font-weight: 700; + line-height: 1.5; +} + +.markdown__paragraph-inline { + display: inline; + + + .markdown__paragraph-inline { + margin-left: 4px; + } +} + +#post-list { + .markdown-inline-img { + -moz-force-broken-image-icon: 1; + max-height: 500px; + height: 500px; + } +} + +.post-body--code { + position: relative; + + pre { + margin-bottom: 0; + word-break: normal; + overflow: auto; + word-wrap: normal; + } +} + +.post-body--code__language { + -webkit-transform: translate3d(0,0,0); + position: absolute; + top: 0; + right: 0; + color: #fff; + background: #21586d; + padding: 4px 10px 5px 10px; + font-size: 13px; + opacity: .7; + z-index: 5; +} + +.post__body { + hr { + height: 4px; + padding: 0; + margin: 15px 0 16px; + background-color: #e7e7e7; + border: 0 none; + @include opacity(.2); + } + + code { + white-space: pre; + } + + .codespan__pre-wrap { + code { + white-space: pre-wrap; + } + } +} + +.markdown__table { + background: #fff; + margin: 5px 0 10px; + + th, + td { + padding: 6px 13px; + border: 1px solid #ddd; + } + + tbody tr { + background: #fff; + + &:nth-child(2n) { + background-color: #f8f8f8; + } + } +} +blockquote { + border: none; + position: relative; + font-size: 16px; + padding: 10px 10px 10px 38px; + margin-bottom: 0; + + &:before { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; + text-decoration: inherit; + content: '\f10d'; + left: 8px; + top: 5px; + position: absolute; + font-size: 20px; + @include opacity(.6); + } +} +pre { + border: none; + margin: 5px 0; + color: inherit; +} +code { + background: #fff; + color: inherit; +} diff --git a/web/sass-files/sass/layout/_module.scss b/web/sass-files/sass/layout/_module.scss new file mode 100644 index 000000000..39ab2c6f8 --- /dev/null +++ b/web/sass-files/sass/layout/_module.scss @@ -0,0 +1,13 @@ +// Only for combining all the files in this folder +@import 'content'; +@import 'footer'; +@import 'forms'; +@import 'headers'; +@import 'markdown'; +@import 'navigation'; +@import 'post'; +@import 'post-right'; +@import 'sidebar-left'; +@import 'sidebar-menu'; +@import 'sidebar-right'; +@import 'webhooks'; diff --git a/web/sass-files/sass/layout/_navigation.scss b/web/sass-files/sass/layout/_navigation.scss new file mode 100644 index 000000000..65c62cb17 --- /dev/null +++ b/web/sass-files/sass/layout/_navigation.scss @@ -0,0 +1,137 @@ +@charset 'UTF-8'; + +.nav > li > a:focus, +.nav > li > a:hover { + background: transparent; +} + +#navbar { + input { + margin: 0px 5px 0px 2px; + } + + .navbar-default { + position: absolute; + border: none; + min-height: 45px; + background: $color--primary; + + .navbar-nav { + > li { + > a { + height: 45px; + padding: 0 1.3em; + + i { + line-height: 45px; + } + } + } + } + + .navbar-toggle { + width: 43px; + float: left; + border-color: transparent; + border-radius: 0; + margin: 0; + padding: 0 10px; + line-height: 48px; + height: 44px; + z-index: 5; + fill: #fff; + + .icon-bar { + background: #fff; + width: 21px; + } + + .glyphicon-search { + top: -1px; + } + + .icon--white { + color: #fff; + } + + &:hover, + &:active, + &:focus { + background: inherit; + } + } + + .navbar-brand { + padding: 0 .5em; + height: 45px; + line-height: 45px; + float: none; + font-size: 16px; + + .heading { + margin-right: 3px; + font-weight: 600; + color: #fff; + } + + .header-dropdown__icon { + top: 1px; + } + + .dropdown-toggle { + color: #fff; + } + + .description { + display: inline-block; + margin-right: .5em; + color: #fff; + + &.info-popover { + width: 19px; + height: 19px; + background: url('../images/info__icon.png'); + @include background-size(100% 100%); + vertical-align: middle; + top: -1px; + position: relative; + cursor: pointer; + } + } + } + } + + .sidebar-channel { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + span { + white-space: nowrap; + margin-left: 2px; + } + } + + .channel-create-btn { + margin-right: 15px; + } + + .more-channel-table { + width: 100%; + border: 1px solid #dbdbdc; + td { + padding: 7px; + } + button { + width: 110px; + } + } +} + +.badge-notify { + background: red; + position: absolute; + left: 4px; + top: 3px; + z-index: 100; +} diff --git a/web/sass-files/sass/layout/_post-right.scss b/web/sass-files/sass/layout/_post-right.scss new file mode 100644 index 000000000..595577564 --- /dev/null +++ b/web/sass-files/sass/layout/_post-right.scss @@ -0,0 +1,155 @@ +@charset 'UTF-8'; + +.post-right__container { + @include display-flex; + @include flex-direction(column); + height: 100%; + + .post-right-root-message { + padding: 1em 1em 0; + } + + .post-right-comments-container { + position: relative; + + .post { + &:first-child { + padding-top: 15px; + } + } + } + + + .help_format_text { + bottom: -63px; + right: auto; + } + + .post { + &.post--root { + padding-bottom: 1.2em; + border-bottom: 1px solid #ddd; + + .post__body { + background: transparent !important; + } + } + + .post__header { + .col__reply { + top: 0; + text-align: right; + } + } + + .post__body { + width: 100%; + } + } + + hr { + margin-bottom: 0; + border: none; + } + + .post-create__container { + width: 100%; + margin-top: 10px; + + .textarea-wrapper { + min-height: 100px; + } + + .btn { + margin-bottom: 10px; + } + + .custom-textarea { + min-height: 100px; + } + + .msg-typing { + @include opacity(.7); + float: left; + margin-top: 3px; + font-size: 13px; + line-height: 20px; + min-width: 1px; + display: block; + height: 20px; + max-width: 230px; + } + + .post-create-footer { + width: 100%; + padding: 5px 0 10px; + } + + .post-right-comments-upload-in-progress { + padding: 6px 0; + color: #a8adb7; + margin-right: 10px; + } + } +} +.post-right-header { + font-size: 1em; + text-transform: uppercase; + color: #999; + font-weight: 400; + color: #888; + height: 39px; + padding: 10px 10px 0 15px; + border-bottom: $border-gray; +} + +.post-right-root-container { + padding: 5px 10px; + border-bottom: $border-gray; +} + +.post-right-root-container { + ul { + padding-left: 0; + margin-bottom: 2px; + } +} + +.post-right-channel__name { + font-weight: 600; + margin: 0 0 10px 0; +} + +.post-right-root-container li { + display: inline; + list-style-type: none; + padding-right: 3px; +} + +.post-right-root-time { + color: #a8adb7; +} + +.post-right-create-comment-container { + padding: 5px; + margin-bottom: 18px; + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} + +.post-right__scroll { + position: relative; + overflow: auto; + -webkit-overflow-scrolling: touch; + @include flex(1 1 auto); + + .file-preview__container { + margin-top: 5px; + } +} + +.post-right-comment-time { + color: #a8adb7; +} diff --git a/web/sass-files/sass/layout/_post.scss b/web/sass-files/sass/layout/_post.scss new file mode 100644 index 000000000..22c905aa6 --- /dev/null +++ b/web/sass-files/sass/layout/_post.scss @@ -0,0 +1,997 @@ +@charset 'UTF-8'; + +.custom-textarea { + white-space: pre-wrap; + word-wrap: break-word; + background: transparent; + border: 1px solid #ccc; + position: absolute; + top: 0px; + height: auto; + resize: none; + line-height: 20px; + min-height: 36px; + overflow-x: hidden; + &:focus { + border-color: #ccc; + box-shadow: none; + } +} + +.bad-connection { + background: #ffffac !important; + color: #d04444 !important; +} + +.textarea-div { + white-space: pre-wrap; + word-wrap: normal; + color: rgba(0,0,0,0); + position: absolute; + top: 0px; + word-break: break-word; + left: 1px; + line-height: 20px; + min-height: 36px; + height: auto; + border: 0; +} + +body.ios { + .textarea-div { + padding: 7px 17px 7px 15px; + -webkit-overflow-scrolling: auto; + } +} + +.textarea-div::-webkit-scrollbar { + display: none; +} + +.textarea-wrapper { + position: relative; + .textbox-preview-area { + position: absolute; + z-index: 2; + top: 0; + left: 0; + box-shadow: none; + white-space: normal; + } + .help__text { + right: 0; + position: absolute; + z-index: 3; + bottom: -23px; + font-size: 13px; + cursor: pointer; + } + .textbox-preview-link { + margin-right: 8px; + } + min-height: 36px; +} + +.help_format_text { + display: none !important; + position: absolute; + bottom: -23px; + left: 0px; + overflow: hidden; + text-overflow: ellipsis; + font-size: .85em; + @include opacity(0); + @include single-transition(all .2s ease); + + b, + i, + code { + margin-right: 3px; + } + .textbox-preview-link { + font-size: 13px; + cursor: pointer; + margin-left: 15px; + } +} + +.date-separator, +.new-separator { + text-align: center; + height: 2em; + margin: 0; + position: relative; + z-index: 0; + &:before, + &:after { + content: ''; + height: 1em; + position: absolute; + left: 0; + width: 100%; + display: none; + } + &:before { + bottom: 0; + } + &:after { + top: 0; + } + &.hovered--after { + &:before { + background: #f5f5f5; + display: block; + } + } + &.hovered--before { + &:after { + background: #f5f5f5; + display: block; + } + } + .separator__hr { + border-color: #ccc; + margin: 0; + position: relative; + z-index: 5; + top: 1em; + } + .separator__text { + line-height: 2em; + color: #555; + background: #fff; + display: inline-block; + padding: 0 1em; + font-weight: 700; + @include border-radius(50px); + position: relative; + z-index: 5; + font-size: 13px; + } +} +.new-separator { + .separator__hr { + border-color: #ffaf53; + } + .separator__text { + color: #f80; + font-weight: normal; + } +} + +.file-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: #fff; + font-size: em(20px); + font-weight: 600; + z-index: 6; + + .overlay__indent { + background-color: rgba(0, 0, 0, .6); + position: relative; + height: 100%; + @include clearfix; + } + + &.center-file-overlay { + .overlay__indent { + margin-left: 220px; + } + } + + &.right-file-overlay { + font-size: em(18px); + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } + } + + .overlay__circle { + background: #111; + background: rgba(black, .7); + width: 370px; + height: 370px; + margin: -185px 0 0 -185px; + @include border-radius(500px); + position: absolute; + top: 50%; + left: 50%; + pointer-events: none; + } + + .overlay__files { + display: block; + margin: 75px auto 20px; + } + + .overlay__logo { + position: absolute; + left: 50%; + bottom: 30px; + margin-left: -50px; + @include opacity(.3); + } + + .fa { + display: inline-block; + font-size: 1.1em; + margin-right: 8px; + } +} + +#post-list { + @include flex(1 1 auto); + position: relative; + overflow-y: hidden; + height: 100%; + + .inactive { + display: none; + } + + .post-list-holder-by-time { + background: #fff; + overflow-y: scroll; + width: 100%; + padding: 1em 0 0; + position: absolute; + height: 100%; + -webkit-overflow-scrolling: touch; + &.active { + display: inline; + } + } + + .more-messages-text { + margin: 5px 0 10px; + display: block; + text-align: center; + outline: none; + border: none; + font-size: 13px; + } + .beginning-messages-text { + margin-top: 2px; + margin-bottom: 5px; + display: block; + text-align: center; + color: grey; + } +} + +.post-list__timestamp { + position: absolute; + top: 8px; + left: 50%; + z-index: 50; + width: 120px; + text-align: center; + background: $color--primary; + color: #fff; + @include border-radius(3px); + font-size: 12px; + line-height: 25px; + margin-left: -60px; + -webkit-font-smoothing: initial; + @include single-transition(all, .6s, ease); + @include translateY(-45px); + @include opacity(0); + display: none; + + &.scrolling { + @include translateY(0); + @include opacity(.8); + } +} + +.post-list__arrows { + background-repeat: no-repeat; + width: 40px; + height: 40px; + text-align: center; + fill: #444; + position: absolute; + bottom: 0; + left: 9px; + z-index: 50; + @include opacity(0); + @include single-transition(all, .6s); + display: none; + + svg { + color: inherit; + width: 28px; + height: 28px; + } + + &.scrolling { + display: block; + @include opacity(1); + } +} + +.post-create__container { + form { + width: 100%; + padding: .5em 14px 0; + margin: 0 auto; + max-width: 1028px; + } + .post-create-body { + position: relative; + padding: 0 0 2px; + .post-body__cell { + vertical-align: top; + position: relative; + &.scroll { + .btn-file { + right: 15px; + } + .custom-textarea { + padding-right: 43px; + } + } + } + .send-button { + display: none; + cursor: pointer; + padding-right: 4px; + width: 45px; + height: 37px; + font-size: 18px; + line-height: 37px; + vertical-align: bottom; + text-align: center; + @include single-transition(all, .15s); + &:active { + @include opacity(.75); + } + } + .custom-textarea { + padding-top: 8px; + padding-right: 28px; + max-height: 162px !important; + line-height: 1.5; + } + .textarea-div { + padding-top: 8px; + padding-right: 30px; + max-height: 163px !important; + overflow: auto; + line-height: 1.5; + } + .btn-file { + right: 0; + position: absolute; + top: 1px; + color: #444; + @include opacity(.5); + @include single-transition(all, .15s); + font-size: 16px; + padding: 7px 9px 6px; + &:hover, + &:active { + @include opacity(.9); + box-shadow: none; + } + } + textarea { + box-shadow: none; + } + } + .post-create-footer { + @include clearfix; + padding: 3px 0 0 0; + font-size: 13px; + .control-label { + font-weight: normal; + margin-bottom: 0; + top: -5px; + position: relative; + } + } + .msg-typing { + display: block; + @include opacity(.7); + white-space: nowrap; + margin-bottom: 5px; + overflow: hidden; + font-size: .95em; + text-overflow: ellipsis; + height: 20px; + } +} + +.post-list__table { + display: table; + table-layout: fixed; + width: 100%; + min-height: 100%; + height: 100%; + .post-list__content { + display: table-cell; + vertical-align: bottom; + .dropdown-menu { + &.bottom { + top: auto; + bottom: 25px; + } + } + } +} + +.post { + word-wrap: break-word; + padding: 8px .5em 0 1em; + position: relative; + max-width: 100%; + @include legacy-pie-clearfix; + + &:hover { + .dropdown, + .comment-icon__container, + .post__reply, + .post__remove { + visibility: visible; + } + .permalink-icon { + visibility: visible; + } + } + + &.post--highlight { + background-color: beige; + } + + p { + margin: 0; + line-height: 1.6em; + font-size: .97em; + white-space: pre-wrap; + + &:last-child { + margin-bottom: .5em; + } + } + + span { + p:last-child { + margin-bottom: .5em; + } + } + + &.post--root { + .comment-icon__container { + visibility: visible; + } + } + + &.same--root { + &.same--user { + padding: 0 .5em 0 1em; + + &:hover { + .post__time { + @include opacity(.5); + } + } + + .post__header { + margin: 0; + height: 0; + + .col__name { + display: none; + } + + .col__reply { + top: 6px; + } + } + + .post__time { + top: 24px; + } + + .post__time { + font: normal normal normal FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + top: -2px; + left: -7px; + font-size: 11px; + line-height: 37px; + @include opacity(0); + } + } + + &.post--comment { + .post__link { + display: none; + } + + .post__img { + img { + display: none; + } + } + } + + &.post--comment { + .post__body { + border-left: 4px solid #ddd; + } + } + } + + &.other--root { + .comment-icon__container { + &.icon--show { + visibility: visible; + } + } + + &.post--comment { + .popover { + margin-top: 84px; + + > .arrow { + top: 21px !important; + } + } + + .post__header { + .col__reply { + top: 53px; + } + } + } + } + + .post__content { + margin: 0 auto; + position: relative; + max-width: 1000px; + display: table; + width: 100%; + table-layout: fixed; + + > div { + display: table-cell; + vertical-align: top; + } + } + + .post__header { + padding: 0; + list-style: none; + margin-bottom: 2px; + + li { + display: inline-block; + vertical-align: top; + } + + .col__name { + margin-right: 7px; + font-weight: 600; + + .user-popover { + max-width: 200px; + @include clearfix; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .col__reply { + position: absolute; + right: 0; + top: 30px; + width: 65px; + white-space: nowrap; + } + + .permalink-popover { + min-width: 0; + + .popover-content { + padding: 5px; + } + + .form-control, + .btn { + font-size: 13px; + height: 30px; + padding: 0 8px; + line-height: 30px; + } + } + } + + .post__img { + width: 46px; + img { + width: 36px; + height: 36px; + vertical-align: inherit; + @include border-radius(50px); + } + } + + .post__embed-container { + display: block; + max-height: 1000px; + transition: max-height .5s ease; + overflow: hidden; + &[hidden] { + max-height: 0; + } + } + + .dropdown { + display: inline-block; + visibility: hidden; + margin-right: 5px; + top: -1px; + + .dropdown-menu { + right: 0; + left: auto; + min-width: 130px; + padding: 2px 0; + + li { + display: block; + } + + a { + padding: 5px 15px; + } + } + } + + .post__dropdown { + &:after { + content: '[...]'; + top: -1px; + position: relative; + } + } + + .post__remove { + font-family: 'Open Sans', sans-serif; + position: relative; + display: inline-block; + vertical-align: top; + right: 15px; + top: -5px; + font-size: 20px; + width: 20px; + height: 20px; + line-height: 20px; + font-weight: 600; + visibility: hidden; + color: inherit; + @include opacity(.5); + text-decoration: none; + + &:hover { + @include opacity(.8); + } + } + + .post__body { + word-wrap: break-word; + padding: .2em .5em; + @include legacy-pie-clearfix; + width: calc(100% - 75px); + + p { + margin: 0 0 .4em; + } + + p + p { + margin-top: 1.4em; + } + + li { + > p { + margin-top: 10px; + } + } + + img { + max-height: 400px; + } + + ul, + ol { + margin-bottom: .4em; + + p { + margin-bottom: 0; + } + li ul, + li ol { + padding: 0 0 0 20px; + } + + li.list-item--task-list ul, + li.list-item--task-list ol { + margin-left: 20px; + } + + li.list-item--task-list ul { + padding-left: 0; + } + + li:not(.list-item--task-list) li.list-item--task-list, + li:not(.list-item--task-list) li.list-item--task-list ~ li { + margin-left: -20px; + } + + li input[type='checkbox']:disabled { + vertical-align: top; + cursor: default; + } + } + + ul li.list-item--task-list, + ul li.list-item--task-list ~ li { + list-style-type: none; + } + + ul li.list-item--task-list ~ li:not(.list-item--task-list) { + text-indent: 3px; + + &:before { + content: '⦁'; + margin-right: 8px; + } + } + } + + .post__link { + margin: 2px 0 5px; + font-size: 13px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .post__embed-visibility { + cursor: pointer; + font: normal normal normal 14px/1 FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 5px 0 10px; + display: inline-block; + + &:hover { + text-decoration: none; + } + + &:before { + content: '\f065'; + font-size: 14px; + } + + &[data-expanded='true']:before { + content: '\f066'; + } + } + + .post__time { + font-size: .9em; + } + + .post__time, + &.post--system .post__body { + @include opacity(.6); + } + + .post-loading-gif { + height: 10px; + width: 10px; + margin-top: 6px; + } + + .post-fail { + color: #d58a8a; + } + + .post-waiting { + color: #999; + } + + .permalink-icon { + display: inline-block; + color: $color--primary; + visibility: hidden; + } + + .post__reply { + display: inline-block; + margin-right: 6px; + visibility: hidden; + svg { + width: 18px; + top: 3px; + fill: inherit; + position: relative; + } + } + + .comment-icon__container { + fill: $color--primary; + display: inline-block; + visibility: hidden; + + &:focus { + outline: none; + } + + &.icon--visible { + visibility: visible; + } + + svg { + height: 17px; + width: 17px; + } + + .comment-icon { + display: inline-block; + top: 2px; + position: relative; + margin-right: 3px; + fill: inherit; + } + + path { + fill: inherit; + } + } + + .web-embed-data { + padding: 2px 0 0 10px; + background: #f9f9f9; + background: rgba(0, 0, 0, .05); + @include border-radius(2px); + height: 50px; + overflow: hidden; + text-overflow: ellipsis; + .embed-title { + margin: 3px 0 1px; + color: #555; + font-weight: 600; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .embed-description { + margin: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + color: #888; + } + .embed-link { + display: none; + } + } +} + +.bot-indicator { + font-family: inherit; + font-size: 11px; + padding: 2px 4px; + border-radius: 2px; + font-weight: 600; + margin: 0 0 0 -4px; +} + +.attachment { + .attachment__content { + border-width: 1px; + border-style: solid; + border-radius: 4px; + padding: 2px 5px; + margin: 0 0 5px 0; + } + .attachment__thumb-pretext { + border: 0 none; + background: transparent; + } + .attachment__container { + border-left-width: 4px; + border-left-style: solid; + padding: 2px 0 2px 10px; + &.attachment__container--good { + border-left-color: #00c100; + } + &.attachment__container--warning { + border-left-color: #dede01; + } + &.attachment__container--danger { + border-left-color: #e40303; + } + } + .attachment__body { + float: left; + width: 80%; + padding-right: 5px; + overflow-x: auto; + overflow-y: hidden; + &.attachment__body--no_thumb { + width: 100%; + } + } + .attachment__text p:last-of-type { + display: inline-block; + } + .attachment__thumb-pretext { + margin-left: 5px; + } + .attachment__title { + margin: 5px 0; + padding: 0; + line-height: 16px; + height: 22px; + font-size: 16px; + a { + font-size: 16px; + } + } + .attachment__author-icon { + @include border-radius(50px); + margin-right: 5px; + width: 14px; + height: 14px; + } + .attachment__image { + max-width: 100%; + margin-bottom: 1em; + } + .attachment__thumb-container { + width: 20%; + float: right; + img { + max-height: 75px; + max-width: 100%; + } + } + .attachment___fields { + width: 100%; + .attachment___field-caption { + font-weight: 700; + } + .attachment___field p { + margin: 0; + } + } +} + +.permalink-text { + overflow: hidden; +} + +.permalink-popover { + min-width: 320px; + margin-left: 50px !important; +} diff --git a/web/sass-files/sass/layout/_sidebar-left.scss b/web/sass-files/sass/layout/_sidebar-left.scss new file mode 100644 index 000000000..ece054a15 --- /dev/null +++ b/web/sass-files/sass/layout/_sidebar-left.scss @@ -0,0 +1,197 @@ +@charset 'UTF-8'; + +.sidebar--left { + position: absolute; + width: 220px; + left: 0; + height: 100%; + border-right: $border-gray; + background: #fafafa; + z-index: 5; + + &.sidebar--padded { + padding-top: 44px; + } + .dropdown-menu { + max-height: 400px; + overflow-x: hidden; + overflow-y: auto; + max-width: 200px; + width: 200px; + } + .search__form { + margin: 0; + padding: 1em 1em 0; + display: none; + } + .badge { + background-color: $color--primary; + position: absolute; + right: 10px; + top: 5px; + } + .status { + position: relative; + top: 1px; + margin-right: 6px; + width: 12px; + display: inline-block; + svg { + max-height: 14px; + } + i, + path, + ellipse { + @include opacity(.5); + &.online--icon, + &.away--icon { + @include opacity(1); + } + } + .fa-lock { + margin-left: 1px; + } + .fa-globe { + top: -1px; + position: relative; + } + } + .nav-pills__container { + height: calc(100% - 80px); + position: relative; + overflow: auto; + -webkit-overflow-scrolling: touch; + } + + .nav-pills__unread-indicator { + position: absolute; + left: 0; + right: 0; + width: 72%; + color: #fff; + background: #2389d7; + @include border-radius(50px); + margin: 0 auto; + padding: 3px 0 4px; + font-size: 13.5px; + text-align: center; + z-index: 1; + } + + .nav-pills__unread-indicator-top { + top: 66px; + } + .nav-pills__unread-indicator-bottom { + bottom: 20px; + } + + .nav { + &.nav-stacked { + > li + li { + margin: 0; + } + } + li { + > h4 { + font-size: 1em; + text-transform: uppercase; + margin: 1.1em 0 .5em; + font-weight: 400; + color: #aaa; + letter-spacing: -.3px; + padding: 0 10px 0 15px; + } + > a { + padding: 3px 10px 3px 25px; + line-height: 1.5; + border-radius: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + &.has-badge { + padding-right: 30px; + } + &.has-close { + padding-right: 30px; + &:hover { + .btn-close { + display: block; + @include opacity(.8); + } + } + .btn-close { + font-family: 'Open Sans', sans-serif; + position: absolute; + right: 15px; + top: -1px; + font-size: 20px; + font-weight: 600; + @include opacity(0); + display: none; + &:hover { + @include opacity(1); + } + } + } + &.nav-more { + text-decoration: underline; + } + &.unread-title { + font-weight: 600; + } + } + &.active { + a { + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #000; + } + } + a, + a:hover, + a:focus { + background-color: rgba(black, .1); + border-radius: 0; + font-weight: 400; + position: relative; + } + } + } + } + .modal-title { + line-height: 2em; + } + + .add-channel-btn { + float: right; + outline: none; + margin: -2px 0 0 0; + color: #aaa; + padding: 0 5px; + text-decoration: none; + font-size: 22px; + line-height: 18px; + font-weight: 700; + &:hover { + color: #666; + } + } +} + +.channel-loading-gif { + height: 15px; + width: 15px; + margin-top: 2px; +} + +.join-channel-loading-gif { + margin-top: 5px; + margin-left: 10px; + height: 25px; + width: 25px; +} diff --git a/web/sass-files/sass/layout/_sidebar-menu.scss b/web/sass-files/sass/layout/_sidebar-menu.scss new file mode 100644 index 000000000..167b24ba0 --- /dev/null +++ b/web/sass-files/sass/layout/_sidebar-menu.scss @@ -0,0 +1,72 @@ +@charset 'UTF-8'; + +.sidebar--menu { + position: absolute; + width: 220px; + right: 0; + height: 100%; + border-right: $border-gray; + padding: 0 0 2em 0; + background: #fafafa; + display: none; + .nav-pills__container { + padding-top: 5px; + } + .team__header { + display: none; + padding: 0 15px; + @include legacy-pie-clearfix; + a { + color: #fff; + } + .navbar-right { + font-size: .85em; + margin: 16px -5px 0; + .dropdown-toggle { + padding: 0 10px; + } + .dropdown-menu { + li a { + padding: 3 20px; + color: #555; + } + } + .dropdown__icon { + background: url('../images/dropdown-icon.png'); + width: 4px; + height: 16px; + @include background-size(100% 100%); + display: inline-block; + } + } + .team__name { + float: left; + line-height: 50px; + font-weight: 600; + font-size: 1.2em; + max-width: 80%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-decoration: none; + } + } + .nav { + > li { + > a { + font-size: 15px; + background: none !important; + color: inherit; + line-height: 40px; + padding: 0 15px; + .fa, + .glyphicon { + width: 25px; + text-align: center; + left: -5px; + position: relative; + } + } + } + } +} diff --git a/web/sass-files/sass/layout/_sidebar-right.scss b/web/sass-files/sass/layout/_sidebar-right.scss new file mode 100644 index 000000000..e1a7d7641 --- /dev/null +++ b/web/sass-files/sass/layout/_sidebar-right.scss @@ -0,0 +1,129 @@ +@charset 'UTF-8'; + +.sidebar--right { + position: fixed; + width: 400px; + height: 100%; + right: 0px; + padding: 0; + background: #fff; + @include translateX(400px); + + .post-body { + img { + max-height: 200px; + } + } + + .post { + .post__header { + .col__name { + .user-popover { + max-width: 130px; + } + } + } + } + + .sidebar--right__content { + height: 100%; + @include display-flex; + @include flex-direction(column); + } + + .sidebar--right__back { + color: inherit; + @include opacity(.8); + width: 30px; + text-align: center; + margin: 0 0 0 -14px; + font-size: 13px; + display: inline-block; + } + + .sidebar-right__body { + @include flex(1 1 auto); + border-left: $border-gray; + border-top: $border-gray; + @include display-flex; + @include flex-direction(column); + height: calc(100% - 56px); + @include border-radius(2px 0 0 0); + } + + .sidebar__overlay { + width: 100%; + height: 100%; + background-color: yellow; + @include opacity(.1); + position: absolute; + z-index: 5; + pointer-events: none; + } + + .input-group { + word-break: break-word; + } + + .sidebar--right__close { + margin: 11px 0 0 0; + width: 22px; + height: 22px; + opacity: .5; + font-size: 22px; + line-height: 0; + background: none; + float: right; + outline: none; + border: none; + @include single-transition(all, .2s, ease-in); + + &:hover, + &:active { + opacity: .8; + } + + i { + position: relative; + top: -2px; + } + } + + .sidebar--right__header { + font-size: 1em; + text-transform: uppercase; + color: inherit; + height: 44px; + padding: 0 1em; + line-height: 44px; + @include flex(0 0 44px); + border-bottom: $border-gray; + } + + .sidebar--right__subheader { + font-size: 1em; + padding: 1em 1em 0; + + h4 { + font-size: 1em; + } + + ul { + @include opacity(.7); + padding: 10px 0 0 30px; + } + + li { + font-size: .95em; + padding-bottom: 10px; + } + } + + .suggestion-list__content { + max-height: 120px; + } +} + +.sidebar-right-container { + height: 100%; +} diff --git a/web/sass-files/sass/layout/_webhooks.scss b/web/sass-files/sass/layout/_webhooks.scss new file mode 100644 index 000000000..d6e367218 --- /dev/null +++ b/web/sass-files/sass/layout/_webhooks.scss @@ -0,0 +1,37 @@ +@charset 'UTF-8'; + +.webhooks__container { + background: rgba(black, .1); + border: 1px solid; + @include border-radius(3px); + padding: 0 13px 15px; + margin-top: 10px; +} + +.webhook__item { + font-size: 13px; + position: relative; + + &:last-child { + .divider-light:last-child { + display: none; + } + } + + .webhook__remove { + position: absolute; + right: -7px; + top: 8px; + width: 30px; + height: 30px; + font-size: 22px; + font-weight: bold; + text-align: center; + text-decoration: none; + color: #e05f5d; + } + + .webhook__url { + padding-right: 20px; + } +} diff --git a/web/sass-files/sass/pages/_access-history.scss b/web/sass-files/sass/pages/_access-history.scss new file mode 100644 index 000000000..7ede7b085 --- /dev/null +++ b/web/sass-files/sass/pages/_access-history.scss @@ -0,0 +1,32 @@ +@charset 'UTF-8'; + +.access-history__table { + display: table; + width: 100%; + padding-top: 15px; + line-height: 1.6; + + &:first-child { + padding: 0; + } + + > div { + display: table-cell; + vertical-align: top; + } + + .access__date { + font-weight: 600; + font-size: 15px; + width: 190px; + } + + .access__report { + border-bottom: 1px solid #ddd; + padding-bottom: 15px; + } + + .report__info { + @include opacity(.8); + } +} diff --git a/web/sass-files/sass/pages/_activity-log.scss b/web/sass-files/sass/pages/_activity-log.scss new file mode 100644 index 000000000..6e8d0a925 --- /dev/null +++ b/web/sass-files/sass/pages/_activity-log.scss @@ -0,0 +1,64 @@ +@charset 'UTF-8'; + +@keyframes highlight { + from { + background: rgba(yellow, .5); + } + to { + background: none; + } +} + +.animation--highlight { + &:before { + content: ''; + animation: highlight 1.5s ease; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.activity-log__table { + display: table; + width: 100%; + line-height: 1.8; + border-top: 1px solid #ddd; + padding: 15px 0; + + &:first-child { + padding-top: 0; + border: none; + } + + > div { + display: table-cell; + vertical-align: top; + } + + .activity-log__report { + width: 80%; + } + + .activity-log__action { + text-align: right; + } + + .report__platform { + font-size: 15px; + font-weight: 600; + .fa { + margin-right: 6px; + } + } + + .report__info { + @include opacity(.8); + } +} + +.session-help-text { + padding: 0 0 20px; +} diff --git a/web/sass-files/sass/pages/_admin-console.scss b/web/sass-files/sass/pages/_admin-console.scss new file mode 100644 index 000000000..f83ce487e --- /dev/null +++ b/web/sass-files/sass/pages/_admin-console.scss @@ -0,0 +1,343 @@ +@charset 'UTF-8'; + +.admin-controller { + > div { + height: 100%; + } + + .inner-wrap { + position: absolute; + width: 100%; + } + + .row { + margin: 0; + } + + h3 { + font-weight: 600; + border-bottom: 1px solid #ddd; + padding-bottom: .5em; + margin: 1em 0; + } + + .table { + background: #fff; + } + + .form-control { + background-color: #fff; + border: 1px solid #ccc; + color: #555; + + &:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + } + } + + .btn { + color: #333; + + &.btn-primary { + background: #2389d7; + + &:hover, + &:focus, + &:active { + background: #1c6dab; + } + } + } + + .dropdown-menu { + background: #fff; + border: 1px solid rgba(0,0,0,.15); + color: inherit; + } + + .sidebar--left { + &.sidebar--collapsable { + background: #333; + + .team__header { + background: transparent; + margin-bottom: 5px; + } + + .nav { + li { + padding: 0; + @include opacity(1); + + .icon { + width: 17px; + } + + > a { + &:hover, + &.active, + &:focus { + background-color: #eaeaea; + } + } + + > h4 { + background: #333; + padding: 10px 10px; + margin: 1px 0 0; + + .menu-icon--right { + top: 6px; + right: 12px; + } + } + } + + .menu-icon--right { + position: absolute; + right: 10px; + top: 3px; + font-size: 18px; + font-weight: 600; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + + .fa { + font-size: 13px; + right: -2px; + position: relative; + color: #fff; + } + } + + &.nav__sub-menu { + background: #111; + -webkit-font-smoothing: auto; + + &.padded { + padding: 5px 0; + } + + li { + > a { + font-size: 13px; + padding: 5px 35px 5px 15px; + background: transparent; + color: #bbb; + + &:hover { + color: lighten($color--primary, 10); + } + + &.active { + color: #fff; + font-weight: 600; + } + } + + .nav-more { + font-size: 13px; + padding: 5px 15px; + background: transparent; + color: #bbb; + display: block; + cursor: pointer; + &:hover { + color: lighten($color--primary, 10); + } + } + } + } + + &.nav__inner-menu { + li { + > a { + padding-left: 20px; + } + } + } + } + } + } + + .log__panel { + overflow: scroll; + width: 100%; + height: 800px; + border: 1px solid #ddd; + margin-top: 10px; + padding: 5px; + background-color: white; + } + + .app__content { + color: #333; + + &.admin { + overflow: auto; + background-color: #f1f1f1; + padding: 0 20px 20px; + min-height: 600px; + } + + .wrapper--fixed { + max-width: 800px; + } + + .form-horizontal { + margin-top: 40px; + + .control-label { + text-align: left; + padding-right: 0; + font-weight: 600; + } + + .form-group { + margin-bottom: 25px; + } + + .file__upload { + position: relative; + margin: 0 10px 10px 0; + display: inline-block; + + input { + position: absolute; + @include opacity(0); + width: 100%; + height: 100%; + z-index: 5; + top: 0; + left: 0; + } + } + + .help-text { + &.no-margin { + margin: 0; + } + + ul, + ol { + padding-left: 23px; + } + + margin: 10px 0 0 15px; + color: #777; + + .help-link { + margin-right: 5px; + } + + .btn { + font-size: 13px; + } + } + + .alert { + display: inline-block; + padding: 5px 7px; + margin: 1em 0 0; + top: 1px; + position: relative; + + .fa { + margin-right: 5px; + } + } + } + + .banner { + background: #fff; + border: 1px solid #ddd; + padding: .7em 1.5em; + font-size: .95em; + margin: 2em 0; + + .banner__heading { + font-size: 1.5em; + } + + .banner__content { + width: 80%; + } + + &.warning { + background: #e60000; + } + } + + .popover { + border-radius: 3px; + width: 100%; + font-size: .95em; + } + + .panel { + border: none; + background-color: transparent; + } + + .panel-default { + > .panel-heading { + padding: 10px 0; + background-color: transparent; + } + + .panel-body { + padding: 30px 0 10px; + } + } + + .panel-group { + margin-bottom: 50px; + } + + .panel-title { + font-size: 24px; + line-height: 1.5; + + a { + text-decoration: none; + display: block; + @include clearfix; + + &.collapsed { + .fa-minus { + display: none; + } + + .fa-plus { + display: inline-block; + } + } + + .fa { + font-size: 18px; + float: right; + margin-top: 8px; + color: #aaa; + } + + .fa-plus { + display: none; + } + } + } + } + + .member-list-holder { + .member-role, + .member-drop { + position: absolute; + right: 15px; + top: 8px; + } + } +} diff --git a/web/sass-files/sass/pages/_docs.scss b/web/sass-files/sass/pages/_docs.scss new file mode 100644 index 000000000..24e96772b --- /dev/null +++ b/web/sass-files/sass/pages/_docs.scss @@ -0,0 +1,19 @@ +@charset 'UTF-8'; + +.docs__page { + line-height: 1.7; + padding-bottom: 20px; + + > div { + width: 1170px; + margin: 0 auto; + padding: 0 15px; + max-width: 100%; + } + + h1.markdown__heading { + border-bottom: 1px solid #ddd; + padding-bottom: 1rem; + margin: 1em 0 1em; + } +} diff --git a/web/sass-files/sass/pages/_error-page.scss b/web/sass-files/sass/pages/_error-page.scss new file mode 100644 index 000000000..8cd0716ca --- /dev/null +++ b/web/sass-files/sass/pages/_error-page.scss @@ -0,0 +1,35 @@ +@charset 'UTF-8'; + +body { + &.error { + .container-fluid { + display: table; + height: 90%; + } + + .error__container { + max-width: 800px; + margin: 0 auto; + display: table-cell; + vertical-align: top; + padding: 5em 0; + text-align: left; + color: #555; + } + + .error__icon { + font-size: 4em; + color: #ccc; + } + + h2 { + font-weight: 600; + font-size: 1.5em; + margin: .8em 0 .5em; + } + + p { + font-size: 1.2em; + } + } +} diff --git a/web/sass-files/sass/pages/_loading.scss b/web/sass-files/sass/pages/_loading.scss new file mode 100644 index 000000000..5e4e7359a --- /dev/null +++ b/web/sass-files/sass/pages/_loading.scss @@ -0,0 +1,48 @@ +@charset 'UTF-8'; + +.loading-screen { + display: table; + width: 100%; + height: 100%; + padding: 60px; + text-align: center; + + .loading__content { + display: table-cell; + vertical-align: middle; + font-size: 0; + + h3 { + font-size: 16px; + font-weight: 400; + margin: 0 .2em 0; + display: inline-block; + } + + .round { + background-color: #444; + width: 4px; + height: 4px; + display: inline-block; + margin: 0 2px; + opacity: .1; + @include border-radius(10px); + @include animation(move .75s infinite linear); + } + + @for $i from 1 through 3 { + .round-#{$i} { + @include animation-delay(.2s*$i); + } + } + + @include keyframes(move) { + from { + opacity: 1; + } + to { + opacity: .1; + } + } + } +} diff --git a/web/sass-files/sass/pages/_module.scss b/web/sass-files/sass/pages/_module.scss new file mode 100644 index 000000000..48c1af1d9 --- /dev/null +++ b/web/sass-files/sass/pages/_module.scss @@ -0,0 +1,11 @@ +// Only for combining all the files in this folder +@import 'access-history'; +@import 'activity-log'; +@import 'admin-console'; +@import 'docs'; +@import 'error-page'; +@import 'loading'; +@import 'print'; +@import 'settings'; +@import 'signup'; +@import 'statistics'; diff --git a/web/sass-files/sass/pages/_print.scss b/web/sass-files/sass/pages/_print.scss new file mode 100644 index 000000000..1c2ef9c0f Binary files /dev/null and b/web/sass-files/sass/pages/_print.scss differ diff --git a/web/sass-files/sass/pages/_settings.scss b/web/sass-files/sass/pages/_settings.scss new file mode 100644 index 000000000..3c735be3c --- /dev/null +++ b/web/sass-files/sass/pages/_settings.scss @@ -0,0 +1,451 @@ +@charset 'UTF-8'; + +.user-settings { + min-height: 300px; + .table-responsive { + max-width: 560px; + max-height: 300px; + } +} + +.modal { + .settings-modal { + width: 800px; + .modal-back { + width: 50px; + height: 40px; + top: 12px; + font-size: 27px; + font-weight: normal; + line-height: 32px; + position: absolute; + left: 0; + text-align: center; + .fa { + line-height: inherit; + position: absolute; + width: 100%; + height: 100%; + left: 0; + } + } + .modal-body { + padding: 0; + margin: 0 auto; + min-height: calc(100% - 62px); + } + li { + list-style: none; + } + label { + font-weight: 600; + } + + .no-padding--left { + padding-left: 0; + } + .padding-top { + padding-top: 7px; + &.x2 { + padding-top: 14px; + } + &.x3 { + padding-top: 21px; + } + } + .padding-bottom { + padding-bottom: 7px; + &.x2 { + padding-bottom: 14px; + } + &.x3 { + padding-bottom: 21px; + } + .control-label { + font-weight: 600; + &.text-left { + text-align: left; + } + } + } + .profile-img { + width: 128px; + height: 128px; + } + .settings-table { + max-width: 1000px; + margin: 0 auto; + display: table; + table-layout: fixed; + width: 100%; + > div { + display: table-cell; + vertical-align: top; + } + .nav { + position: fixed; + width: 179px; + &.position--top { + top: 57px; + } + } + .security-links { + margin-right: 20px; + .fa { + margin-right: 6px; + } + } + .settings-links { + width: 180px; + } + .settings-content { + padding: 0px 20px 30px; + .modal-header { + display: none; + } + .section-min { + padding: 1em 0; + margin-bottom: 0; + cursor: pointer; + position: relative; + @include clearfix; + &:hover { + background: #f9f9f9; + } + &:hover .fa { + display: inline-block; + } + &:hover .section-edit { + text-decoration: underline; + } + } + + .section-max { + background: rgba(black, .05); + padding: 1em 0 1.3em; + margin-bottom: 0; + @include clearfix; + .section-title { + margin-bottom: 10px; + } + } + + .appearance-section { + .theme-group { + .input-group-addon { + padding: 4px 5px; + width: 40px; + } + img { + border: 1px solid rgba(black, .15); + width: 29px; + } + } + .group--code { + select { + padding-right: 25px; + } + select::-ms-expand { + display: none; + } + &:before { + pointer-events: none; + position: absolute; + top: 11px; + right: 50px; + z-index: 5; + content: '\f0d7'; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + select { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + } + } + .premade-themes { + margin-bottom: 10px; + .theme-label { + font-weight: 400; + margin-top: 5px; + } + img { + border: 3px solid transparent; + } + .active { + img { + border-color: $color--primary; + } + } + } + + .theme-elements { + padding-left: 15px; + + .element { + margin-right: 10px; + + &:nth-child(2n) { + margin-right: 0; + } + } + } + + .theme-elements__header { + margin: 10px 20px 0px 0; + border-bottom: 1px solid #ccc; + padding: 5px 0 10px; + font-size: em(13.5px); + font-weight: 600; + cursor: pointer; + + .fa-minus { + display: none; + } + + &.open { + .fa-minus { + display: inline-block; + } + .fa-plus { + display: none; + } + } + + .header__icon { + float: right; + @include opacity(.5); + } + } + + .theme-elements__body { + padding-top: 5px; + display: none; + @include legacy-pie-clearfix; + background: rgba(255, 255, 255, .05); + padding: 20px 0 0 20px; + margin: 0 20px 0 0; + @include border-radius(0 0 3px 3px); + } + + .custom-label { + white-space: nowrap; + font-weight: normal; + font-size: 12px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 0; + } + .input-group-addon { + background: transparent; + } + .radio { + label { + font-weight: 600; + } + } + } + + .section-title { + margin-bottom: 5px; + font-weight: 600; + padding-right: 50px; + } + + .section-edit { + text-align: right; + margin-bottom: 5px; + .fa { + margin-right: 5px; + font-size: 12px; + @include opacity(.5); + display: none; + &.fa-chevron-down { + top: -1px; + margin-right: 0; + position: relative; + } + } + } + + .section-describe { + @include opacity(.7); + white-space: pre; + @include clearfix; + text-overflow: ellipsis; + } + + .divider-dark { + border-bottom: 1px solid #aaa; + } + + .divider-light { + border-bottom: 1px solid lightgrey; + } + + .setting-list { + padding: 0; + list-style-type: none; + } + + .setting-list__hint { + margin-top: 20px; + } + + .mentions-input { + margin-top: 10px; + } + + .setting-list-item { + margin-top: 7px; + } + .has-error { + color: #a94442; + } + + .file-status { + font-size: 13px; + margin-top: 8px; + color: #555; + } + + .confirm-import { + padding: 4px 10px; + margin: 10px 0; + } + } + } + } + .nav-pills { + > li { + margin: 0; + a { + padding: 8px 5px 8px 15px; + border-radius: 0; + color: #777; + } + .glyphicon { + width: 25px; + top: 2px; + } + &:hover { + a { + background-color: rgba(black, .1); + } + } + &.active { + a { + color: #111; + background-color: #e1e1e1; + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #000; + } + } + a, + a:hover, + a:focus { + background-color: rgba(black, .1); + border-radius: 0; + font-weight: 400; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + h3 { + font-size: em(20px); + } +} + +.channel-settings { + padding: 0 10px; +} + +.tab-header { + margin-bottom: 1em; +} + +.setting-name { + color: grey; + font-weight: 500; +} + +.sel-btn { + margin-right: 5px; +} + +.member-div { + border-bottom: 1px solid lightgrey; + position: relative; + padding: 2px; + margin: 0; + width: 100%; + &:first-child { + border-top: 1px solid lightgrey; + } + .post-profile-img { + @include border-radius(50px); + margin-right: 8px; + } +} + +.member-role, +.member-drop { + .fa { + margin-right: 5px; + @include opacity(.5); + font-size: 12px; + } + + .member-menu { + top: -50%; + right: 110%; + } +} + +.member-invite { + position: absolute; + right: 10px; + top: 7px; +} + +.member-menu { + right: 0px; + left: auto; +} + +.member-list { + width: 100%; + overflow-x: visible; +} + +.member-page { + padding-top: 50px; +} + +.active-border { + border: 1px solid red; +} + +.color-btn { + margin: 4px; +} + +.no-resize { + resize: none; +} diff --git a/web/sass-files/sass/pages/_signup.scss b/web/sass-files/sass/pages/_signup.scss new file mode 100644 index 000000000..53c59c222 --- /dev/null +++ b/web/sass-files/sass/pages/_signup.scss @@ -0,0 +1,440 @@ +@charset 'UTF-8'; + +.signup-header { + width: 100%; + line-height: 33px; + padding: 0 1em .2em; + background: $bg--gray; + + .fa { + margin-right: 5px; + } +} +.signup-team__container { + padding: 100px 0px 50px 0px; + max-width: 380px; + margin: 0 auto; + position: relative; + + &.padding--less { + padding-top: 50px; + } + + .form-control:focus { + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)); + } + + h1, + h2, + h3, + h4, + h5, + h6, + p { + line-height: 1.3; + } + + h1 { + font-weight: 600; + } + + h2 { + font-weight: 600; + margin-bottom: .8em; + letter-spacing: -.5px; + font-size: em(30px); + } + + h3 { + font-weight: 600; + margin: 0 0 1.3em 0; + font-size: 1.5em; + } + + h4 { + font-size: em(20px); + font-weight: 600; + margin-bottom: 1em; + } + + h5 { + font-size: em(16px); + } + + hr { + margin: 2em 0; + } + + p { + color: #555; + line-height: 1.5; + margin-bottom: 1em; + } + + .input-group { + &.input-group--limit { + table-layout: fixed; + width: 100%; + + .tooltip-inner { + word-wrap: break-word; + } + + .form-control { + text-align: left; + display: table-cell; + width: 100%; + } + + .input-group-addon { + text-align: left; + width: 50%; + display: table-cell; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + .inner__content { + padding: 0 1rem; + margin: 30px 0 20px; + } + + .block--gray { + background: #f2f2f2; + display: inline-block; + padding: .85em 1.2em; + font-weight: 600; + @include border-radius(3px); + } + + form { + margin-bottom: .8em; + } + + .signup-team-confirm__container { + padding: 100px 0px 100px 0px; + } + + .signup-team-logo { + display: none; + width: 210px; + margin: 0 0 2em 0; + } + + .signup-team-login { + padding-bottom: 10px; + font-weight: 600; + } + + .signup-team__name { + margin: .5em 0 0; + font-size: 2.2em; + font-weight: 600; + padding-left: 1rem; + } + + .signup-team__subdomain { + margin: .2em 0 1.2em; + font-size: 1.5em; + padding-left: 1rem; + font-weight: 300; + text-transform: uppercase; + } + + .form-control { + height: em(38px); + } + + .or__container { + height: 1px; + background: #ddd; + text-align: left; + margin: 2em 0; + + span { + width: 40px; + top: -10px; + position: relative; + font-size: 1.14286em; + line-height: 20px; + font-weight: 600; + background: #fff; + display: inline-block; + text-align: center; + } + } + + ul { + margin-bottom: 0; + padding-left: 18px; + } + + .signup__email-container { + margin-left: 1rem; + } + + .btn { + font-size: 1em; + padding: em(7px) em(15px); + font-weight: 600; + margin-right: 5px; + + .fa { + font-size: 17px; + margin-right: 8px; + } + + .icon { + width: 18px; + height: 18px; + margin-right: 8px; + @include background-size(100% 100%); + display: inline-block; + } + + &.btn-custom-login { + display: block; + min-width: 200px; + width: 200px; + padding: 0 1em; + margin: 1em 1rem; + height: 40px; + line-height: 34px; + color: #fff; + @include border-radius(2px); + + &.gitlab { + background: #548; + + &:hover { + background: darken(#548, 10%); + } + + span { + vertical-align: middle; + } + + .icon { + background-image: url('../images/gitlabLogo.png'); + } + } + + &.google { + background: #dd4b39; + + &:hover { + background: darken(#dd4b39, 10%); + } + + span { + vertical-align: middle; + } + + .icon { + background-image: url('../images/googleLogo.png'); + } + } + + &.ldap { + background: #dd4b39; + + &:hover { + background: darken(#dd4b39, 10%); + } + + span { + vertical-align: middle; + } + } + + &.email { + background: #2389d7; + + &:hover { + background: darken(#2389d7, 10%); + } + + span { + vertical-align: middle; + } + } + + &.btn-full { + width: 100%; + text-align: left; + padding-left: 35px; + } + } + + &.btn-default { + color: #444; + } + + .glyphicon { + &.glyphicon-ok, + &.glyphicon-refresh { + margin-right: .5em; + left: -2px; + font-size: .9em; + } + + &.glyphicon-chevron-right { + font-size: .8em; + right: -2px; + top: 0px; + } + + &.glyphicon-chevron-left { + font-size: .8em; + left: -2px; + top: 0px; + } + } + } + + .has-error { + .control-label { + background: #f2f2f2; + padding: .7em 1em; + @include border-radius(3px); + margin: 1em 0 0; + font-size: 14px; + font-weight: normal; + color: #999; + width: 100%; + + &:before { + @extend .fa; + content: '\f071'; + margin-right: 4px; + color: #aaa; + } + } + } + + .reset-form { + @include border-radius(3px); + position: relative; + font-size: .95em; + p { + color: inherit; + } + } + + // Modifier Styles + h1, + h2, + h3, + h4, + h5, + h6 { + &.margin--top-none { + margin-top: 0; + } + + &.margin--bottom-none { + margin-bottom: 0; + } + + &.margin--less { + margin-bottom: .3em; + } + + &.sub-heading { + font-weight: 400; + margin-bottom: 0; + } + + &.color--light { + font-weight: 300; + } + } + + p { + &.margin--extra { + margin-bottom: 1.5em; + } + + &.margin--less { + margin-bottom: .3em; + } + + .black, + &.black { + color: #000; + } + } + + .color--light { + color: #777; + } + + .margin--extra { + margin-top: 3em; + } + + .margin--extra-2x { + margin-top: 6em; + } +} + +.signup-team-all { + margin: 0 0 20px; + border: 1px solid #ddd; + @include border-radius(2px); + .signup-team-dir { + background: #fafafa; + border-top: 1px solid #d5d5d5; + + &:first-child { + border: none; + } + + a { + color: inherit; + display: block; + padding: 0 15px; + line-height: 3.5em; + height: 3.5em; + font-size: 1.1em; + } + } + + .signup-team-dir__name { + white-space: nowrap; + float: left; + overflow: hidden; + text-overflow: ellipsis; + width: 90%; + } + + .signup-team-dir__arrow { + float: right; + font-size: .9em; + color: #999; + line-height: 3.5em; + } +} + + +.authorize-box { + margin: 100px auto; + width: 500px; + height: 280px; + border: 1px solid black; +} + +.authorize-inner { + padding: 20px; +} + +.authorize-btn { + margin-right: 6px; +} + +.verify_panel { + margin: 60px auto auto auto; + max-width: 380px; +} diff --git a/web/sass-files/sass/pages/_statistics.scss b/web/sass-files/sass/pages/_statistics.scss new file mode 100644 index 000000000..b48c137c3 --- /dev/null +++ b/web/sass-files/sass/pages/_statistics.scss @@ -0,0 +1,85 @@ +@charset 'UTF-8'; + +.team_statistics { + .total-count { + margin: 1em 0; + text-align: center; + background: #fff; + border: 1px solid #ddd; + width: 100%; + @include border-radius(3px); + + .title { + font-weight: 400; + padding: 7px 10px; + border-bottom: 1px solid #ddd; + text-align: left; + font-size: 13px; + + .fa { + float: right; + margin: 0px 0 0; + color: #555; + font-size: 16px; + } + } + + .content { + font-size: 30px; + font-weight: 600; + color: #555; + padding: .3em 0 .35em; + overflow: auto; + } + } + + .total-count--day { + width: 760px; + height: 275px; + border: 1px solid #ddd; + padding: 5px 10px 10px 10px; + margin: 10px 10px 10px 10px; + background: #fff; + clear: both; + + > div { + font-size: 18px; + font-weight: 300; + } + } + + .recent-active-users { + table { + width: 100%; + table-layout: fixed; + } + + .content { + max-height: 400px; + overflow: auto; + padding: 0; + } + + tr { + &:first-child { + td { + border-top: none; + } + } + + td { + font-weight: 400; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 13px; + border-left: 1px solid #ddd; + border-top: 1px solid #ddd; + padding: 5px 5px 6px; + @include clearfix; + &:first-child { + border-left: none; + } + } + } + } +} diff --git a/web/sass-files/sass/partials/_access-history.scss b/web/sass-files/sass/partials/_access-history.scss deleted file mode 100644 index dcb5f3c5f..000000000 --- a/web/sass-files/sass/partials/_access-history.scss +++ /dev/null @@ -1,27 +0,0 @@ -@charset "UTF-8"; - -.access-history__table { - display: table; - width: 100%; - padding-top: 15px; - line-height: 1.6; - &:first-child { - padding: 0; - } - > div { - display: table-cell; - vertical-align: top; - } - .access__date { - font-weight: 600; - font-size: 15px; - width: 190px; - } - .access__report { - border-bottom: 1px solid #ddd; - padding-bottom: 15px; - } - .report__info { - @include opacity(0.8); - } -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/partials/_activity-log.scss deleted file mode 100644 index df5869b4c..000000000 --- a/web/sass-files/sass/partials/_activity-log.scss +++ /dev/null @@ -1,53 +0,0 @@ -@charset "UTF-8"; - -@keyframes highlight { - from { background: rgba(yellow, 0.5);} - to { background: none;} -} - -.animation--highlight { - &:before { - content: ''; - animation: highlight 1.5s ease; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} - -.activity-log__table { - display: table; - width: 100%; - line-height: 1.8; - border-top: 1px solid #DDD; - padding: 15px 0; - &:first-child { - padding-top: 0; - border: none; - } - > div { - display: table-cell; - vertical-align: top; - } - .activity-log__report { - width: 80%; - } - .activity-log__action { - text-align: right; - } - .report__platform { - font-size: 15px; - font-weight: 600; - .fa { - margin-right: 6px; - } - } - .report__info { - @include opacity(0.8); - } -} -.session-help-text { - padding: 0 0 20px; -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss deleted file mode 100644 index 76081710f..000000000 --- a/web/sass-files/sass/partials/_admin-console.scss +++ /dev/null @@ -1,261 +0,0 @@ -@charset "UTF-8"; - -#admin_controller { - > div { - height: 100%; - } - - .inner__wrap { - position: absolute; - width: 100%; - } - - .row { - margin: 0; - } - - h3 { - font-weight: 600; - border-bottom: 1px solid #ddd; - padding-bottom: 0.5em; - margin: 1em 0; - } - - .table { - background: #fff; - } - - .sidebar--left { - &.sidebar--collapsable { - background: #333; - .team__header { - background: transparent; - margin-bottom: 5px; - } - .nav { - li { - padding: 0; - @include opacity(1); - .icon { - width: 17px; - } - > a { - &:hover, &.active, &:focus { - background-color: #EAEAEA; - } - } - > h4 { - background: #333; - padding: 10px 10px; - margin: 1px 0 0; - .menu-icon--right { - top: 6px; - right: 12px; - } - } - } - .menu-icon--right { - position: absolute; - right: 10px; - top: 3px; - font-size: 18px; - font-weight: 600; - width: 20px; - height: 20px; - line-height: 20px; - text-align: center; - .fa { - font-size: 13px; - right: -2px; - position: relative; - color: #fff; - } - } - &.nav__sub-menu { - background: #111; - -webkit-font-smoothing: auto; - &.padded { - padding: 5px 0; - } - li { - > a { - font-size: 13px; - padding: 5px 35px 5px 15px; - background: transparent; - color: #bbb; - &:hover { - color: lighten($primary-color, 10); - } - &.active { - color: #fff; - font-weight: 600; - } - } - .nav-more { - font-size: 13px; - padding: 5px 15px; - background: transparent; - color: #bbb; - display: block; - cursor: pointer; - &:hover { - color: lighten($primary-color, 10); - } - } - } - } - &.nav__inner-menu { - li { - > a { - padding-left: 20px; - } - } - } - } - } - } - - .log__panel { - overflow: scroll; - width: 100%; - height: 800px; - border: 1px solid #ddd; - margin-top: 10px; - padding: 5px; - background-color: white; - } - - .app__content { - &.admin { - overflow: auto; - background-color: #f1f1f1; - padding: 0 20px 20px; - min-height: 600px; - } - .wrapper--fixed { - max-width: 800px; - } - .form-horizontal { - margin-top: 40px; - .control-label { - text-align: left; - padding-right: 0; - font-weight: 600; - } - .form-group { - margin-bottom: 25px; - } - .file__upload { - position: relative; - margin: 0 10px 10px 0; - display: inline-block; - input { - position: absolute; - @include opacity(0); - width: 100%; - height: 100%; - z-index: 5; - top: 0; - left: 0; - } - } - .help-text { - &.no-margin { - margin: 0; - } - ul, ol { - padding-left: 23px; - } - margin: 10px 0 0 15px; - color: #777; - .help-link { - margin-right: 5px; - } - .btn { - font-size: 13px; - } - } - .alert { - display: inline-block; - padding: 5px 7px; - margin: 1em 0 0; - top: 1px; - position: relative; - .fa { - margin-right: 5px; - } - } - } - .banner { - background: #fff; - border: 1px solid #ddd; - padding: 0.7em 1.5em; - font-size: 0.95em; - margin: 2em 0; - .banner__heading { - font-size: 1.5em; - } - .banner__content { - width: 80%; - } - &.warning { - background: #e60000; - } - } - .popover { - border-radius: 3px; - width: 100%; - font-size: 0.95em; - } - .panel { - border: none; - background-color: transparent; - } - .panel-default { - > .panel-heading { - padding: 10px 0; - background-color: transparent; - } - .panel-body { - padding: 30px 0 10px; - } - } - .panel-group { - margin-bottom: 50px; - } - .panel-title { - font-size: 24px; - line-height: 1.5; - a { - text-decoration: none; - display: block; - @include clearfix; - &.collapsed { - .fa-minus { - display: none; - } - .fa-plus { - display: inline-block; - } - } - .fa { - font-size: 18px; - float: right; - margin-top: 8px; - color: #aaa; - } - .fa-plus { - display: none; - } - } - } - } - - .member-list-holder { - .member-role, .member-drop { - position: absolute; - right: 15px; - top: 8px; - } - } -} diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss deleted file mode 100644 index 4dcf0ff85..000000000 --- a/web/sass-files/sass/partials/_base.scss +++ /dev/null @@ -1,256 +0,0 @@ -@charset "UTF-8"; - -html, body { - height: 100%; -} - -body { - font-family: 'Open Sans', sans-serif; - -webkit-font-smoothing: antialiased; - background: $body-bg; - position: relative; - width: 100%; - height: 100%; - &.white { - background: #fff; - > .container-fluid { - overflow: auto; - } - .inner__wrap { - > .row.content { - min-height: 100%; - margin-bottom: -89px; - } - } - } -} - -b, strong { - font-weight: 600; -} - -.inner__wrap { - height: 100%; - > .row.main { - height: 100%; - position: relative; - } -} - -.container-fluid { - @include legacy-pie-clearfix; - height: 100%; - position: relative; -} - -.channel-view { - @include clearfix; - height: 100%; - position: relative; -} - -img { - max-width: 100%; - height: auto; - &.rounded { - @include border-radius(100%); - } -} - -.popover { - @include border-radius(3px); - color: #333; - &.bottom, &.right, &.top, &.left { - >.arrow:after { - border-color: transparent; - } - } - .popover-title { - background: rgba(black, 0.05); - } - .popover-content { - p:last-child { - margin-bottom: 5px; - } - } -} - -.dropdown-menu { - .divider { - @include opacity(0.15); - } - > li > a { - color: inherit; - &:focus, &:hover { - color: inherit; - } - } -} - -.word-break--all { - word-break: break-all; -} - -a { - word-break: break-word; - color: $primary-color; - cursor: pointer; -} - -a:focus, a:hover { - color: $primary-color; -} - -.tooltip { - .tooltip-inner { - word-break: break-word; - font-size: 13px; - padding: 3px 10px 4px; - font-weight: 500; - } -} - -.nopadding { - padding: 0; - margin: 0; -} - -.text-danger, a.text-danger { - color: #E05F5D; - &:hover, &:focus { - color: #E05F5D; - } -} - -.btn { - &.btn-danger { - color: #fff; - &:hover, &:active, &:focus { - color: #fff; - } - } -} - -.form-control { - @include border-radius(2px); - &:focus { - @include box-shadow(none); - } - &.no-padding { - line-height: 32px; - padding: 0; - } - &.no-resize { - resize: none; - } -} - -.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - cursor: auto; - background: rgba(#fff, 0.1); - color: inherit; -} - -.form-group { - &.form-group--small { - margin-bottom: 10px; - } -} - -.error-panel { - max-width: 275px; - position: absolute; - right: 10px; - top: 40px; - z-index: 100; -} - -.nav>li>a:focus, .nav>li>a:hover { - background: transparent; -} - -.btn { - @include single-transition(all, 0.25s, ease-in); - @include border-radius(1px); - &.btn-primary { - border-color: transparent; - background: $primary-color; - &:hover, &:focus, &:active { - background: $primary-color--hover; - } - } - &.btn-inactive { - border-color: transparent; - background: #707070; - color: #fff; - } -} - -.relative-div { - position:relative; -} - -@-webkit-keyframes spin2 { - from { -webkit-transform: rotate(0deg);} - to { -webkit-transform: rotate(360deg);} -} - -@keyframes spin { - from { transform: scale(1) rotate(0deg);} - to { transform: scale(1) rotate(360deg);} -} - -.glyphicon-refresh-animate { - @include animation(spin .7s infinite linear); -} - -.black-bg { - background-color: black !important; -} - -.white-bg { - background-color: white !important; -} - -.alert { - padding: 8px 12px; - @include border-radius(2px); -} - -.emoji { - width: 1.5em; - height: 1.5em; - display: inline-block; - margin-bottom: 0.25em; - background-size: contain; -} - - -// Scrollbar Css - -::-webkit-scrollbar -{ - width: 8px; /* for vertical scrollbars */ - height: 8px; /* for horizontal scrollbars */ -} - -::-webkit-scrollbar-track -{ - background: rgba(0, 0, 0, 0.1); -} - -::-webkit-scrollbar-thumb -{ - @include border-radius(5px); - background: rgba(0, 0, 0, 0.4); -} - -body{ - scrollbar-face-color: rgba(0, 0, 0, 0.1); - scrollbar-shadow-color: #2D2C4D; - scrollbar-highlight-color:#7D7E94; - scrollbar-3dlight-color: #7D7E94; - scrollbar-darkshadow-color: #2D2C4D; - scrollbar-track-color: rgba(0, 0, 0, 0.1); - scrollbar-arrow-color: #C1C1D1; -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_colorpicker.scss b/web/sass-files/sass/partials/_colorpicker.scss deleted file mode 100644 index 7c79844ae..000000000 --- a/web/sass-files/sass/partials/_colorpicker.scss +++ /dev/null @@ -1,253 +0,0 @@ -@charset "UTF-8"; - -/*! - * Bootstrap Colorpicker - * http://mjolnic.github.io/bootstrap-colorpicker/ - * - * Originally written by (c) 2012 Stefan Petre - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0.txt - * - */ - -.colorpicker-saturation { - float: left; - width: 100px; - height: 100px; - cursor: crosshair; - background-image: url("../images/bootstrap-colorpicker/saturation.png"); -} - -.colorpicker-saturation i { - position: absolute; - top: 0; - left: 0; - display: block; - width: 5px; - height: 5px; - margin: -4px 0 0 -4px; - border: 1px solid #000; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} - -.colorpicker-saturation i b { - display: block; - width: 5px; - height: 5px; - border: 1px solid #fff; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} - -.colorpicker-hue, -.colorpicker-alpha { - float: left; - width: 15px; - height: 100px; - margin-bottom: 4px; - margin-left: 4px; - cursor: row-resize; -} - -.colorpicker-hue i, -.colorpicker-alpha i { - position: absolute; - top: 0; - left: 0; - display: block; - width: 100%; - height: 1px; - margin-top: -1px; - background: #000; - border-top: 1px solid #fff; -} - -.colorpicker-hue { - background-image: url("../images/bootstrap-colorpicker/hue.png"); -} - -.colorpicker-alpha { - display: none; - background-image: url("../images/bootstrap-colorpicker/alpha.png"); -} - -.colorpicker-saturation, -.colorpicker-hue, -.colorpicker-alpha { - background-size: contain; -} - -.colorpicker { - top: 0; - left: 0; - z-index: 2500; - min-width: 130px; - padding: 4px; - margin-top: 1px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - *zoom: 1; -} - -.colorpicker:before, -.colorpicker:after { - display: table; - line-height: 0; - content: ""; -} - -.colorpicker:after { - clear: both; -} - -.colorpicker:before { - position: absolute; - top: -7px; - left: 6px; - display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-left: 7px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; -} - -.colorpicker:after { - position: absolute; - top: -6px; - left: 7px; - display: inline-block; - border-right: 6px solid transparent; - border-bottom: 6px solid #ffffff; - border-left: 6px solid transparent; - content: ''; -} - -.colorpicker div { - position: relative; -} - -.colorpicker.colorpicker-with-alpha { - min-width: 140px; -} - -.colorpicker.colorpicker-with-alpha .colorpicker-alpha { - display: block; -} - -.colorpicker-color { - height: 10px; - margin-top: 5px; - clear: both; - background-image: url("../images/bootstrap-colorpicker/alpha.png"); - background-position: 0 100%; -} - -.colorpicker-color div { - height: 10px; -} - -.colorpicker-selectors { - display: none; - height: 10px; - margin-top: 5px; - clear: both; -} - -.colorpicker-selectors i { - float: left; - width: 10px; - height: 10px; - cursor: pointer; -} - -.colorpicker-selectors i + i { - margin-left: 3px; -} - -.colorpicker-element .input-group-addon i, -.colorpicker-element .add-on i { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: text-top; - cursor: pointer; -} - -.colorpicker.colorpicker-inline { - position: relative; - z-index: auto; - display: inline-block; - float: none; -} - -.colorpicker.colorpicker-horizontal { - width: 110px; - height: auto; - min-width: 110px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-saturation { - margin-bottom: 4px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-color { - width: 100px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-hue, -.colorpicker.colorpicker-horizontal .colorpicker-alpha { - float: left; - width: 100px; - height: 15px; - margin-bottom: 4px; - margin-left: 0; - cursor: col-resize; -} - -.colorpicker.colorpicker-horizontal .colorpicker-hue i, -.colorpicker.colorpicker-horizontal .colorpicker-alpha i { - position: absolute; - top: 0; - left: 0; - display: block; - width: 1px; - height: 15px; - margin-top: 0; - background: #ffffff; - border: none; -} - -.colorpicker.colorpicker-horizontal .colorpicker-hue { - background-image: url("../images/bootstrap-colorpicker/hue-horizontal.png"); -} - -.colorpicker.colorpicker-horizontal .colorpicker-alpha { - background-image: url("../images/bootstrap-colorpicker/alpha-horizontal.png"); -} - -.colorpicker.colorpicker-hidden { - display: none; -} - -.colorpicker.colorpicker-visible { - display: block; -} - -.colorpicker-inline.colorpicker-visible { - display: inline-block; -} - -.colorpicker-right:before { - right: 6px; - left: auto; -} - -.colorpicker-right:after { - right: 7px; - left: auto; -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss deleted file mode 100644 index fb2355da7..000000000 --- a/web/sass-files/sass/partials/_content.scss +++ /dev/null @@ -1,82 +0,0 @@ -@charset "UTF-8"; - -.inner__wrap { - &.move--left { - .search-bar__container { - display: none; - } - } - &.move--right { - .search-bar__container { - display: none; - } - } -} -.app__content { - height: 100%; - padding-top: 50px; - margin-left: 220px; - position: relative; - background: #fff; - @include display-flex; - @include flex-direction(column); - .channel__wrap & { - padding-top: 0; - } -} -#post-create { - @include flex(0 0 auto); - background: #fff; - width: 100%; - z-index: 3; -} - -#archive-link-home { - @include flex(0 0 auto); - cursor: pointer; - padding: 10px 20px; - font-size: 13px; - - .fa { - font-size: 11px; - @include opacity(0.7); - } - - a { - color: inherit; - } - -} - -.post-list { - .new-messages-hr { - margin-top: 5px; - margin-bottom: 0px; - border: 0; - border-top: 1px solid #FF8800; - } - - .new-messages-text { - margin-top: 2px; - margin-bottom: 5px; - color: #FF8800; - text-align: center; - } -} -.new-messages-hr { - margin-top: 5px; - margin-bottom: 0px; - border: 0; - border-top: 1px solid #FF8800; -} - -.new-messages-text { - margin-top: 2px; - margin-bottom: 5px; - color: #FF8800; - text-align: center; -} - -.delete-message-text { - margin-top: 10px; -} diff --git a/web/sass-files/sass/partials/_docs.scss b/web/sass-files/sass/partials/_docs.scss deleted file mode 100644 index f4e7cc314..000000000 --- a/web/sass-files/sass/partials/_docs.scss +++ /dev/null @@ -1,19 +0,0 @@ -@charset "UTF-8"; - -.docs__page { - line-height: 1.7; - padding-bottom: 20px; - - > div { - width: 1170px; - margin: 0 auto; - padding: 0 15px; - max-width: 100%; - } - - h1.markdown__heading { - border-bottom: 1px solid #ddd; - padding-bottom: 1rem; - margin: 1em 0 1em; - } -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_error-bar.scss b/web/sass-files/sass/partials/_error-bar.scss deleted file mode 100644 index 0bfcbe0be..000000000 --- a/web/sass-files/sass/partials/_error-bar.scss +++ /dev/null @@ -1,28 +0,0 @@ -@charset "UTF-8"; - -.error-bar { - background-color: #0099FF; - text-align:center; - position: relative; - color: #fff; - position: absolute; - top: 0; - width: 100%; - z-index: 9999; - padding: 5px 30px; - &__close { - position: absolute; - right: 0; - top: 0; - color: #FFF; - font-size: 20px; - font-weight: 600; - text-decoration: none; - padding: 0 10px; - font-family: 'Open Sans', sans-serif; - &:hover { - color: #FFF; - text-decoration: none; - } - } -} diff --git a/web/sass-files/sass/partials/_error.scss b/web/sass-files/sass/partials/_error.scss deleted file mode 100644 index e09a751d2..000000000 --- a/web/sass-files/sass/partials/_error.scss +++ /dev/null @@ -1,31 +0,0 @@ -@charset "UTF-8"; - -body { - &.error { - .container-fluid { - display: table; - height: 90%; - } - .error__container { - max-width: 800px; - margin: 0 auto; - display: table-cell; - vertical-align: top; - padding: 5em 0; - text-align: left; - color: #555; - } - .error__icon { - font-size: 4em; - color: #CCC; - } - h2 { - font-weight: 600; - font-size: 1.5em; - margin: 0.8em 0 0.5em; - } - p { - font-size: 1.2em; - } - } -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss deleted file mode 100644 index 62e067437..000000000 --- a/web/sass-files/sass/partials/_files.scss +++ /dev/null @@ -1,264 +0,0 @@ -@charset "UTF-8"; - -.preview-container { - position: relative; - margin: 1px 0 10px; - width: 100%; - max-height: 100px; - height: 100px; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - .preview-div { - display: inline-block; - width: 120px; - height: 100px; - margin: 0 0 0 5px; - vertical-align: top; - position: relative; - border: 1px solid #DDD; - @include clearfix; - &:hover .remove-preview:after { - @include opacity(1); - } - &:first-child { - margin-left: 0; - } - .spinner { - position:absolute; - top:50%; - left:50%; - margin-left: -16px; - margin-top: -16px; - width:32px; - height:32px; - } - } - .preview-img { - display: block; - height: auto; - max-width: 100%; - } - .remove-preview { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - &:after { - background: rgba(0, 0, 0, 0.4); - content: ''; - height: 100%; - left: 0; - opacity: 0; - position: absolute; - top: 0; - width: 100%; - @include opacity(0); - } - i { - top: 5px; - right: 5px; - position: absolute; - color: #fff; - cursor: pointer; - z-index: 5; - opacity: inherit; - text-shadow: 0 0px 3px #444; - text-shadow: 0 0px 3px rgba(0, 0, 0, 0.7); - } - } -} - -.image-comment { - background-position:left top; - background-repeat:no-repeat; - width:300px; - height:300px; -} - -@mixin file-icon($path) { - background: #fff url($path); - background-position: center; - background-repeat: no-repeat; - @include background-size(60px auto); -} -.file-icon { - width: 100%; - height: 100%; - &.audio { - @include file-icon("../images/icons/audio.png"); - } - &.video { - @include file-icon("../images/icons/video.png"); - } - &.ppt { - @include file-icon("../images/icons/ppt.png"); - } - &.generic { - @include file-icon("../images/icons/generic.png"); - } - &.code { - @include file-icon("../images/icons/code.png"); - } - &.excel { - @include file-icon("../images/icons/excel.png"); - } - &.word { - @include file-icon("../images/icons/word.png"); - } - &.pdf { - @include file-icon("../images/icons/pdf.png"); - } - &.patch { - @include file-icon("../images/icons/patch.png"); - } - &.image { - @include file-icon("../images/icons/image.png"); - } -} -.post-image__column { - position: relative; - width: 240px; - height: 100px; - float: left; - margin: 5px 10px 5px 0; - border: 1px solid lightgrey; - .post__load { - height: 100%; - width: 100%; - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - } - .post__image { - width: 100%; - height: 100%; - background-color: #FFF; - background-repeat: no-repeat; - overflow: hidden; - position: relative; - text-align: center; - &.small { - background-position: center; - } - &.normal { - background-position: top left; - } - .spinner.file__loading { - position: absolute; - left: 50%; - margin-left: -16px; - top: 50%; - margin-top: -16px; - } - .file__loaded { - max-width: initial; - &.landscape, &.quadrat { - height: 100px; - } - &.portrait { - width: 120px; - } - } - &:hover .file-playback-controls.stop { - @include opacity(1); - } - } - .post-image__thumbnail { - float: left; - width: 50%; - height: 100%; - cursor: zoom-in; - cursor: -webkit-zoom-in; - } - .post-image__details { - float: left; - @include clearfix; - word-break: break-word; - width: 50%; - height: 100%; - background: white; - border-left: 1px solid #ddd; - font-size: 13px; - padding: 7px; - color: #333; - .post-image__name { - margin-bottom: 3px; - display: block; - } - .post-image__download { - display: inline-block; - padding-right: 7px; - cursor: pointer; - @include opacity(0.7); - } - .post-image__type { - @include opacity(0.6); - } - .post-image__size { - margin-left: 4px; - @include opacity(0.6); - } - } - a { - text-decoration: none; - color: grey; - } -} - -.file-details__container { - @include display-flex; - display: -ms-flexbox; - - .file-details { - width: 320px; - height: 270px; - padding: 14px; - text-align: left; - vertical-align: top; - - .file-details__name { - color: #333; - font-size: 16px; - } - .file-details__info { - color: grey; - } - } - .file-details__preview { - width: 320px; - height: 270px; - border-right: 1px solid #ddd; - vertical-align: center; - - // helper to center the image icon in the preview window - .file-details__preview-helper { - height: 100%; - display: inline-block; - vertical-align: middle; - } - } -} - -.file-playback-controls { - position: absolute; - right: 5px; - bottom: 0; - font-size: 22px; - cursor: pointer; - z-index: 2; - -webkit-transition: opacity 0.6s; - -moz-transition: opacity 0.6s; - -o-transition: opacity 0.6s; - transition: opacity 0.6s; - - &.stop { - @include opacity(0); - } -} - -.view-image__loading { - background: black; - min-height: 100px; -} diff --git a/web/sass-files/sass/partials/_font-awesome.scss b/web/sass-files/sass/partials/_font-awesome.scss deleted file mode 100644 index 74580a7e8..000000000 --- a/web/sass-files/sass/partials/_font-awesome.scss +++ /dev/null @@ -1,1803 +0,0 @@ -@charset "UTF-8"; - -/*! - * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome - * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) - */ -/* FONT PATH - * -------------------------- */ -@font-face { - font-family: 'FontAwesome'; - src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); - src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); - font-weight: normal; - font-style: normal; -} -.fa { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - transform: translate(0, 0); -} -/* makes the font 33% larger relative to the icon container */ -.fa-lg { - font-size: 1.33333333em; - line-height: 0.75em; - vertical-align: -15%; -} -.fa-2x { - font-size: 2em; -} -.fa-3x { - font-size: 3em; -} -.fa-4x { - font-size: 4em; -} -.fa-5x { - font-size: 5em; -} -.fa-fw { - width: 1.28571429em; - text-align: center; -} -.fa-ul { - padding-left: 0; - margin-left: 2.14285714em; - list-style-type: none; -} -.fa-ul > li { - position: relative; -} -.fa-li { - position: absolute; - left: -2.14285714em; - width: 2.14285714em; - top: 0.14285714em; - text-align: center; -} -.fa-li.fa-lg { - left: -1.85714286em; -} -.fa-border { - padding: .2em .25em .15em; - border: solid 0.08em #eeeeee; - border-radius: .1em; -} -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.fa.pull-left { - margin-right: .3em; -} -.fa.pull-right { - margin-left: .3em; -} -.fa-spin { - -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; -} -.fa-pulse { - -webkit-animation: fa-spin 1s infinite steps(8); - animation: fa-spin 1s infinite steps(8); -} -@-webkit-keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -@keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -.fa-rotate-90 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} -.fa-rotate-180 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} -.fa-rotate-270 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); -} -.fa-flip-horizontal { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); - -webkit-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); -} -.fa-flip-vertical { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); - -webkit-transform: scale(1, -1); - -ms-transform: scale(1, -1); - transform: scale(1, -1); -} -:root .fa-rotate-90, -:root .fa-rotate-180, -:root .fa-rotate-270, -:root .fa-flip-horizontal, -:root .fa-flip-vertical { - filter: none; -} -.fa-stack { - position: relative; - display: inline-block; - width: 2em; - height: 2em; - line-height: 2em; - vertical-align: middle; -} -.fa-stack-1x, -.fa-stack-2x { - position: absolute; - left: 0; - width: 100%; - text-align: center; -} -.fa-stack-1x { - line-height: inherit; -} -.fa-stack-2x { - font-size: 2em; -} -.fa-inverse { - color: #ffffff; -} -/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen - readers do not read off random characters that represent icons */ -.fa-glass:before { - content: "\f000"; -} -.fa-music:before { - content: "\f001"; -} -.fa-search:before { - content: "\f002"; -} -.fa-envelope-o:before { - content: "\f003"; -} -.fa-heart:before { - content: "\f004"; -} -.fa-star:before { - content: "\f005"; -} -.fa-star-o:before { - content: "\f006"; -} -.fa-user:before { - content: "\f007"; -} -.fa-film:before { - content: "\f008"; -} -.fa-th-large:before { - content: "\f009"; -} -.fa-th:before { - content: "\f00a"; -} -.fa-th-list:before { - content: "\f00b"; -} -.fa-check:before { - content: "\f00c"; -} -.fa-remove:before, -.fa-close:before, -.fa-times:before { - content: "\f00d"; -} -.fa-search-plus:before { - content: "\f00e"; -} -.fa-search-minus:before { - content: "\f010"; -} -.fa-power-off:before { - content: "\f011"; -} -.fa-signal:before { - content: "\f012"; -} -.fa-gear:before, -.fa-cog:before { - content: "\f013"; -} -.fa-trash-o:before { - content: "\f014"; -} -.fa-home:before { - content: "\f015"; -} -.fa-file-o:before { - content: "\f016"; -} -.fa-clock-o:before { - content: "\f017"; -} -.fa-road:before { - content: "\f018"; -} -.fa-download:before { - content: "\f019"; -} -.fa-arrow-circle-o-down:before { - content: "\f01a"; -} -.fa-arrow-circle-o-up:before { - content: "\f01b"; -} -.fa-inbox:before { - content: "\f01c"; -} -.fa-play-circle-o:before { - content: "\f01d"; -} -.fa-rotate-right:before, -.fa-repeat:before { - content: "\f01e"; -} -.fa-refresh:before { - content: "\f021"; -} -.fa-list-alt:before { - content: "\f022"; -} -.fa-lock:before { - content: "\f023"; -} -.fa-flag:before { - content: "\f024"; -} -.fa-headphones:before { - content: "\f025"; -} -.fa-volume-off:before { - content: "\f026"; -} -.fa-volume-down:before { - content: "\f027"; -} -.fa-volume-up:before { - content: "\f028"; -} -.fa-qrcode:before { - content: "\f029"; -} -.fa-barcode:before { - content: "\f02a"; -} -.fa-tag:before { - content: "\f02b"; -} -.fa-tags:before { - content: "\f02c"; -} -.fa-book:before { - content: "\f02d"; -} -.fa-bookmark:before { - content: "\f02e"; -} -.fa-print:before { - content: "\f02f"; -} -.fa-camera:before { - content: "\f030"; -} -.fa-font:before { - content: "\f031"; -} -.fa-bold:before { - content: "\f032"; -} -.fa-italic:before { - content: "\f033"; -} -.fa-text-height:before { - content: "\f034"; -} -.fa-text-width:before { - content: "\f035"; -} -.fa-align-left:before { - content: "\f036"; -} -.fa-align-center:before { - content: "\f037"; -} -.fa-align-right:before { - content: "\f038"; -} -.fa-align-justify:before { - content: "\f039"; -} -.fa-list:before { - content: "\f03a"; -} -.fa-dedent:before, -.fa-outdent:before { - content: "\f03b"; -} -.fa-indent:before { - content: "\f03c"; -} -.fa-video-camera:before { - content: "\f03d"; -} -.fa-photo:before, -.fa-image:before, -.fa-picture-o:before { - content: "\f03e"; -} -.fa-pencil:before { - content: "\f040"; -} -.fa-map-marker:before { - content: "\f041"; -} -.fa-adjust:before { - content: "\f042"; -} -.fa-tint:before { - content: "\f043"; -} -.fa-edit:before, -.fa-pencil-square-o:before { - content: "\f044"; -} -.fa-share-square-o:before { - content: "\f045"; -} -.fa-check-square-o:before { - content: "\f046"; -} -.fa-arrows:before { - content: "\f047"; -} -.fa-step-backward:before { - content: "\f048"; -} -.fa-fast-backward:before { - content: "\f049"; -} -.fa-backward:before { - content: "\f04a"; -} -.fa-play:before { - content: "\f04b"; -} -.fa-pause:before { - content: "\f04c"; -} -.fa-stop:before { - content: "\f04d"; -} -.fa-forward:before { - content: "\f04e"; -} -.fa-fast-forward:before { - content: "\f050"; -} -.fa-step-forward:before { - content: "\f051"; -} -.fa-eject:before { - content: "\f052"; -} -.fa-chevron-left:before { - content: "\f053"; -} -.fa-chevron-right:before { - content: "\f054"; -} -.fa-plus-circle:before { - content: "\f055"; -} -.fa-minus-circle:before { - content: "\f056"; -} -.fa-times-circle:before { - content: "\f057"; -} -.fa-check-circle:before { - content: "\f058"; -} -.fa-question-circle:before { - content: "\f059"; -} -.fa-info-circle:before { - content: "\f05a"; -} -.fa-crosshairs:before { - content: "\f05b"; -} -.fa-times-circle-o:before { - content: "\f05c"; -} -.fa-check-circle-o:before { - content: "\f05d"; -} -.fa-ban:before { - content: "\f05e"; -} -.fa-arrow-left:before { - content: "\f060"; -} -.fa-arrow-right:before { - content: "\f061"; -} -.fa-arrow-up:before { - content: "\f062"; -} -.fa-arrow-down:before { - content: "\f063"; -} -.fa-mail-forward:before, -.fa-share:before { - content: "\f064"; -} -.fa-expand:before { - content: "\f065"; -} -.fa-compress:before { - content: "\f066"; -} -.fa-plus:before { - content: "\f067"; -} -.fa-minus:before { - content: "\f068"; -} -.fa-asterisk:before { - content: "\f069"; -} -.fa-exclamation-circle:before { - content: "\f06a"; -} -.fa-gift:before { - content: "\f06b"; -} -.fa-leaf:before { - content: "\f06c"; -} -.fa-fire:before { - content: "\f06d"; -} -.fa-eye:before { - content: "\f06e"; -} -.fa-eye-slash:before { - content: "\f070"; -} -.fa-warning:before, -.fa-exclamation-triangle:before { - content: "\f071"; -} -.fa-plane:before { - content: "\f072"; -} -.fa-calendar:before { - content: "\f073"; -} -.fa-random:before { - content: "\f074"; -} -.fa-comment:before { - content: "\f075"; -} -.fa-magnet:before { - content: "\f076"; -} -.fa-chevron-up:before { - content: "\f077"; -} -.fa-chevron-down:before { - content: "\f078"; -} -.fa-retweet:before { - content: "\f079"; -} -.fa-shopping-cart:before { - content: "\f07a"; -} -.fa-folder:before { - content: "\f07b"; -} -.fa-folder-open:before { - content: "\f07c"; -} -.fa-arrows-v:before { - content: "\f07d"; -} -.fa-arrows-h:before { - content: "\f07e"; -} -.fa-bar-chart-o:before, -.fa-bar-chart:before { - content: "\f080"; -} -.fa-twitter-square:before { - content: "\f081"; -} -.fa-facebook-square:before { - content: "\f082"; -} -.fa-camera-retro:before { - content: "\f083"; -} -.fa-key:before { - content: "\f084"; -} -.fa-gears:before, -.fa-cogs:before { - content: "\f085"; -} -.fa-comments:before { - content: "\f086"; -} -.fa-thumbs-o-up:before { - content: "\f087"; -} -.fa-thumbs-o-down:before { - content: "\f088"; -} -.fa-star-half:before { - content: "\f089"; -} -.fa-heart-o:before { - content: "\f08a"; -} -.fa-sign-out:before { - content: "\f08b"; -} -.fa-linkedin-square:before { - content: "\f08c"; -} -.fa-thumb-tack:before { - content: "\f08d"; -} -.fa-external-link:before { - content: "\f08e"; -} -.fa-sign-in:before { - content: "\f090"; -} -.fa-trophy:before { - content: "\f091"; -} -.fa-github-square:before { - content: "\f092"; -} -.fa-upload:before { - content: "\f093"; -} -.fa-lemon-o:before { - content: "\f094"; -} -.fa-phone:before { - content: "\f095"; -} -.fa-square-o:before { - content: "\f096"; -} -.fa-bookmark-o:before { - content: "\f097"; -} -.fa-phone-square:before { - content: "\f098"; -} -.fa-twitter:before { - content: "\f099"; -} -.fa-facebook-f:before, -.fa-facebook:before { - content: "\f09a"; -} -.fa-github:before { - content: "\f09b"; -} -.fa-unlock:before { - content: "\f09c"; -} -.fa-credit-card:before { - content: "\f09d"; -} -.fa-rss:before { - content: "\f09e"; -} -.fa-hdd-o:before { - content: "\f0a0"; -} -.fa-bullhorn:before { - content: "\f0a1"; -} -.fa-bell:before { - content: "\f0f3"; -} -.fa-certificate:before { - content: "\f0a3"; -} -.fa-hand-o-right:before { - content: "\f0a4"; -} -.fa-hand-o-left:before { - content: "\f0a5"; -} -.fa-hand-o-up:before { - content: "\f0a6"; -} -.fa-hand-o-down:before { - content: "\f0a7"; -} -.fa-arrow-circle-left:before { - content: "\f0a8"; -} -.fa-arrow-circle-right:before { - content: "\f0a9"; -} -.fa-arrow-circle-up:before { - content: "\f0aa"; -} -.fa-arrow-circle-down:before { - content: "\f0ab"; -} -.fa-globe:before { - content: "\f0ac"; -} -.fa-wrench:before { - content: "\f0ad"; -} -.fa-tasks:before { - content: "\f0ae"; -} -.fa-filter:before { - content: "\f0b0"; -} -.fa-briefcase:before { - content: "\f0b1"; -} -.fa-arrows-alt:before { - content: "\f0b2"; -} -.fa-group:before, -.fa-users:before { - content: "\f0c0"; -} -.fa-chain:before, -.fa-link:before { - content: "\f0c1"; -} -.fa-cloud:before { - content: "\f0c2"; -} -.fa-flask:before { - content: "\f0c3"; -} -.fa-cut:before, -.fa-scissors:before { - content: "\f0c4"; -} -.fa-copy:before, -.fa-files-o:before { - content: "\f0c5"; -} -.fa-paperclip:before { - content: "\f0c6"; -} -.fa-save:before, -.fa-floppy-o:before { - content: "\f0c7"; -} -.fa-square:before { - content: "\f0c8"; -} -.fa-navicon:before, -.fa-reorder:before, -.fa-bars:before { - content: "\f0c9"; -} -.fa-list-ul:before { - content: "\f0ca"; -} -.fa-list-ol:before { - content: "\f0cb"; -} -.fa-strikethrough:before { - content: "\f0cc"; -} -.fa-underline:before { - content: "\f0cd"; -} -.fa-table:before { - content: "\f0ce"; -} -.fa-magic:before { - content: "\f0d0"; -} -.fa-truck:before { - content: "\f0d1"; -} -.fa-pinterest:before { - content: "\f0d2"; -} -.fa-pinterest-square:before { - content: "\f0d3"; -} -.fa-google-plus-square:before { - content: "\f0d4"; -} -.fa-google-plus:before { - content: "\f0d5"; -} -.fa-money:before { - content: "\f0d6"; -} -.fa-caret-down:before { - content: "\f0d7"; -} -.fa-caret-up:before { - content: "\f0d8"; -} -.fa-caret-left:before { - content: "\f0d9"; -} -.fa-caret-right:before { - content: "\f0da"; -} -.fa-columns:before { - content: "\f0db"; -} -.fa-unsorted:before, -.fa-sort:before { - content: "\f0dc"; -} -.fa-sort-down:before, -.fa-sort-desc:before { - content: "\f0dd"; -} -.fa-sort-up:before, -.fa-sort-asc:before { - content: "\f0de"; -} -.fa-envelope:before { - content: "\f0e0"; -} -.fa-linkedin:before { - content: "\f0e1"; -} -.fa-rotate-left:before, -.fa-undo:before { - content: "\f0e2"; -} -.fa-legal:before, -.fa-gavel:before { - content: "\f0e3"; -} -.fa-dashboard:before, -.fa-tachometer:before { - content: "\f0e4"; -} -.fa-comment-o:before { - content: "\f0e5"; -} -.fa-comments-o:before { - content: "\f0e6"; -} -.fa-flash:before, -.fa-bolt:before { - content: "\f0e7"; -} -.fa-sitemap:before { - content: "\f0e8"; -} -.fa-umbrella:before { - content: "\f0e9"; -} -.fa-paste:before, -.fa-clipboard:before { - content: "\f0ea"; -} -.fa-lightbulb-o:before { - content: "\f0eb"; -} -.fa-exchange:before { - content: "\f0ec"; -} -.fa-cloud-download:before { - content: "\f0ed"; -} -.fa-cloud-upload:before { - content: "\f0ee"; -} -.fa-user-md:before { - content: "\f0f0"; -} -.fa-stethoscope:before { - content: "\f0f1"; -} -.fa-suitcase:before { - content: "\f0f2"; -} -.fa-bell-o:before { - content: "\f0a2"; -} -.fa-coffee:before { - content: "\f0f4"; -} -.fa-cutlery:before { - content: "\f0f5"; -} -.fa-file-text-o:before { - content: "\f0f6"; -} -.fa-building-o:before { - content: "\f0f7"; -} -.fa-hospital-o:before { - content: "\f0f8"; -} -.fa-ambulance:before { - content: "\f0f9"; -} -.fa-medkit:before { - content: "\f0fa"; -} -.fa-fighter-jet:before { - content: "\f0fb"; -} -.fa-beer:before { - content: "\f0fc"; -} -.fa-h-square:before { - content: "\f0fd"; -} -.fa-plus-square:before { - content: "\f0fe"; -} -.fa-angle-double-left:before { - content: "\f100"; -} -.fa-angle-double-right:before { - content: "\f101"; -} -.fa-angle-double-up:before { - content: "\f102"; -} -.fa-angle-double-down:before { - content: "\f103"; -} -.fa-angle-left:before { - content: "\f104"; -} -.fa-angle-right:before { - content: "\f105"; -} -.fa-angle-up:before { - content: "\f106"; -} -.fa-angle-down:before { - content: "\f107"; -} -.fa-desktop:before { - content: "\f108"; -} -.fa-laptop:before { - content: "\f109"; -} -.fa-tablet:before { - content: "\f10a"; -} -.fa-mobile-phone:before, -.fa-mobile:before { - content: "\f10b"; -} -.fa-circle-o:before { - content: "\f10c"; -} -.fa-quote-left:before { - content: "\f10d"; -} -.fa-quote-right:before { - content: "\f10e"; -} -.fa-spinner:before { - content: "\f110"; -} -.fa-circle:before { - content: "\f111"; -} -.fa-mail-reply:before, -.fa-reply:before { - content: "\f112"; -} -.fa-github-alt:before { - content: "\f113"; -} -.fa-folder-o:before { - content: "\f114"; -} -.fa-folder-open-o:before { - content: "\f115"; -} -.fa-smile-o:before { - content: "\f118"; -} -.fa-frown-o:before { - content: "\f119"; -} -.fa-meh-o:before { - content: "\f11a"; -} -.fa-gamepad:before { - content: "\f11b"; -} -.fa-keyboard-o:before { - content: "\f11c"; -} -.fa-flag-o:before { - content: "\f11d"; -} -.fa-flag-checkered:before { - content: "\f11e"; -} -.fa-terminal:before { - content: "\f120"; -} -.fa-code:before { - content: "\f121"; -} -.fa-mail-reply-all:before, -.fa-reply-all:before { - content: "\f122"; -} -.fa-star-half-empty:before, -.fa-star-half-full:before, -.fa-star-half-o:before { - content: "\f123"; -} -.fa-location-arrow:before { - content: "\f124"; -} -.fa-crop:before { - content: "\f125"; -} -.fa-code-fork:before { - content: "\f126"; -} -.fa-unlink:before, -.fa-chain-broken:before { - content: "\f127"; -} -.fa-question:before { - content: "\f128"; -} -.fa-info:before { - content: "\f129"; -} -.fa-exclamation:before { - content: "\f12a"; -} -.fa-superscript:before { - content: "\f12b"; -} -.fa-subscript:before { - content: "\f12c"; -} -.fa-eraser:before { - content: "\f12d"; -} -.fa-puzzle-piece:before { - content: "\f12e"; -} -.fa-microphone:before { - content: "\f130"; -} -.fa-microphone-slash:before { - content: "\f131"; -} -.fa-shield:before { - content: "\f132"; -} -.fa-calendar-o:before { - content: "\f133"; -} -.fa-fire-extinguisher:before { - content: "\f134"; -} -.fa-rocket:before { - content: "\f135"; -} -.fa-maxcdn:before { - content: "\f136"; -} -.fa-chevron-circle-left:before { - content: "\f137"; -} -.fa-chevron-circle-right:before { - content: "\f138"; -} -.fa-chevron-circle-up:before { - content: "\f139"; -} -.fa-chevron-circle-down:before { - content: "\f13a"; -} -.fa-html5:before { - content: "\f13b"; -} -.fa-css3:before { - content: "\f13c"; -} -.fa-anchor:before { - content: "\f13d"; -} -.fa-unlock-alt:before { - content: "\f13e"; -} -.fa-bullseye:before { - content: "\f140"; -} -.fa-ellipsis-h:before { - content: "\f141"; -} -.fa-ellipsis-v:before { - content: "\f142"; -} -.fa-rss-square:before { - content: "\f143"; -} -.fa-play-circle:before { - content: "\f144"; -} -.fa-ticket:before { - content: "\f145"; -} -.fa-minus-square:before { - content: "\f146"; -} -.fa-minus-square-o:before { - content: "\f147"; -} -.fa-level-up:before { - content: "\f148"; -} -.fa-level-down:before { - content: "\f149"; -} -.fa-check-square:before { - content: "\f14a"; -} -.fa-pencil-square:before { - content: "\f14b"; -} -.fa-external-link-square:before { - content: "\f14c"; -} -.fa-share-square:before { - content: "\f14d"; -} -.fa-compass:before { - content: "\f14e"; -} -.fa-toggle-down:before, -.fa-caret-square-o-down:before { - content: "\f150"; -} -.fa-toggle-up:before, -.fa-caret-square-o-up:before { - content: "\f151"; -} -.fa-toggle-right:before, -.fa-caret-square-o-right:before { - content: "\f152"; -} -.fa-euro:before, -.fa-eur:before { - content: "\f153"; -} -.fa-gbp:before { - content: "\f154"; -} -.fa-dollar:before, -.fa-usd:before { - content: "\f155"; -} -.fa-rupee:before, -.fa-inr:before { - content: "\f156"; -} -.fa-cny:before, -.fa-rmb:before, -.fa-yen:before, -.fa-jpy:before { - content: "\f157"; -} -.fa-ruble:before, -.fa-rouble:before, -.fa-rub:before { - content: "\f158"; -} -.fa-won:before, -.fa-krw:before { - content: "\f159"; -} -.fa-bitcoin:before, -.fa-btc:before { - content: "\f15a"; -} -.fa-file:before { - content: "\f15b"; -} -.fa-file-text:before { - content: "\f15c"; -} -.fa-sort-alpha-asc:before { - content: "\f15d"; -} -.fa-sort-alpha-desc:before { - content: "\f15e"; -} -.fa-sort-amount-asc:before { - content: "\f160"; -} -.fa-sort-amount-desc:before { - content: "\f161"; -} -.fa-sort-numeric-asc:before { - content: "\f162"; -} -.fa-sort-numeric-desc:before { - content: "\f163"; -} -.fa-thumbs-up:before { - content: "\f164"; -} -.fa-thumbs-down:before { - content: "\f165"; -} -.fa-youtube-square:before { - content: "\f166"; -} -.fa-youtube:before { - content: "\f167"; -} -.fa-xing:before { - content: "\f168"; -} -.fa-xing-square:before { - content: "\f169"; -} -.fa-youtube-play:before { - content: "\f16a"; -} -.fa-dropbox:before { - content: "\f16b"; -} -.fa-stack-overflow:before { - content: "\f16c"; -} -.fa-instagram:before { - content: "\f16d"; -} -.fa-flickr:before { - content: "\f16e"; -} -.fa-adn:before { - content: "\f170"; -} -.fa-bitbucket:before { - content: "\f171"; -} -.fa-bitbucket-square:before { - content: "\f172"; -} -.fa-tumblr:before { - content: "\f173"; -} -.fa-tumblr-square:before { - content: "\f174"; -} -.fa-long-arrow-down:before { - content: "\f175"; -} -.fa-long-arrow-up:before { - content: "\f176"; -} -.fa-long-arrow-left:before { - content: "\f177"; -} -.fa-long-arrow-right:before { - content: "\f178"; -} -.fa-apple:before { - content: "\f179"; -} -.fa-windows:before { - content: "\f17a"; -} -.fa-android:before { - content: "\f17b"; -} -.fa-linux:before { - content: "\f17c"; -} -.fa-dribbble:before { - content: "\f17d"; -} -.fa-skype:before { - content: "\f17e"; -} -.fa-foursquare:before { - content: "\f180"; -} -.fa-trello:before { - content: "\f181"; -} -.fa-female:before { - content: "\f182"; -} -.fa-male:before { - content: "\f183"; -} -.fa-gittip:before, -.fa-gratipay:before { - content: "\f184"; -} -.fa-sun-o:before { - content: "\f185"; -} -.fa-moon-o:before { - content: "\f186"; -} -.fa-archive:before { - content: "\f187"; -} -.fa-bug:before { - content: "\f188"; -} -.fa-vk:before { - content: "\f189"; -} -.fa-weibo:before { - content: "\f18a"; -} -.fa-renren:before { - content: "\f18b"; -} -.fa-pagelines:before { - content: "\f18c"; -} -.fa-stack-exchange:before { - content: "\f18d"; -} -.fa-arrow-circle-o-right:before { - content: "\f18e"; -} -.fa-arrow-circle-o-left:before { - content: "\f190"; -} -.fa-toggle-left:before, -.fa-caret-square-o-left:before { - content: "\f191"; -} -.fa-dot-circle-o:before { - content: "\f192"; -} -.fa-wheelchair:before { - content: "\f193"; -} -.fa-vimeo-square:before { - content: "\f194"; -} -.fa-turkish-lira:before, -.fa-try:before { - content: "\f195"; -} -.fa-plus-square-o:before { - content: "\f196"; -} -.fa-space-shuttle:before { - content: "\f197"; -} -.fa-slack:before { - content: "\f198"; -} -.fa-envelope-square:before { - content: "\f199"; -} -.fa-wordpress:before { - content: "\f19a"; -} -.fa-openid:before { - content: "\f19b"; -} -.fa-institution:before, -.fa-bank:before, -.fa-university:before { - content: "\f19c"; -} -.fa-mortar-board:before, -.fa-graduation-cap:before { - content: "\f19d"; -} -.fa-yahoo:before { - content: "\f19e"; -} -.fa-google:before { - content: "\f1a0"; -} -.fa-reddit:before { - content: "\f1a1"; -} -.fa-reddit-square:before { - content: "\f1a2"; -} -.fa-stumbleupon-circle:before { - content: "\f1a3"; -} -.fa-stumbleupon:before { - content: "\f1a4"; -} -.fa-delicious:before { - content: "\f1a5"; -} -.fa-digg:before { - content: "\f1a6"; -} -.fa-pied-piper:before { - content: "\f1a7"; -} -.fa-pied-piper-alt:before { - content: "\f1a8"; -} -.fa-drupal:before { - content: "\f1a9"; -} -.fa-joomla:before { - content: "\f1aa"; -} -.fa-language:before { - content: "\f1ab"; -} -.fa-fax:before { - content: "\f1ac"; -} -.fa-building:before { - content: "\f1ad"; -} -.fa-child:before { - content: "\f1ae"; -} -.fa-paw:before { - content: "\f1b0"; -} -.fa-spoon:before { - content: "\f1b1"; -} -.fa-cube:before { - content: "\f1b2"; -} -.fa-cubes:before { - content: "\f1b3"; -} -.fa-behance:before { - content: "\f1b4"; -} -.fa-behance-square:before { - content: "\f1b5"; -} -.fa-steam:before { - content: "\f1b6"; -} -.fa-steam-square:before { - content: "\f1b7"; -} -.fa-recycle:before { - content: "\f1b8"; -} -.fa-automobile:before, -.fa-car:before { - content: "\f1b9"; -} -.fa-cab:before, -.fa-taxi:before { - content: "\f1ba"; -} -.fa-tree:before { - content: "\f1bb"; -} -.fa-spotify:before { - content: "\f1bc"; -} -.fa-deviantart:before { - content: "\f1bd"; -} -.fa-soundcloud:before { - content: "\f1be"; -} -.fa-database:before { - content: "\f1c0"; -} -.fa-file-pdf-o:before { - content: "\f1c1"; -} -.fa-file-word-o:before { - content: "\f1c2"; -} -.fa-file-excel-o:before { - content: "\f1c3"; -} -.fa-file-powerpoint-o:before { - content: "\f1c4"; -} -.fa-file-photo-o:before, -.fa-file-picture-o:before, -.fa-file-image-o:before { - content: "\f1c5"; -} -.fa-file-zip-o:before, -.fa-file-archive-o:before { - content: "\f1c6"; -} -.fa-file-sound-o:before, -.fa-file-audio-o:before { - content: "\f1c7"; -} -.fa-file-movie-o:before, -.fa-file-video-o:before { - content: "\f1c8"; -} -.fa-file-code-o:before { - content: "\f1c9"; -} -.fa-vine:before { - content: "\f1ca"; -} -.fa-codepen:before { - content: "\f1cb"; -} -.fa-jsfiddle:before { - content: "\f1cc"; -} -.fa-life-bouy:before, -.fa-life-buoy:before, -.fa-life-saver:before, -.fa-support:before, -.fa-life-ring:before { - content: "\f1cd"; -} -.fa-circle-o-notch:before { - content: "\f1ce"; -} -.fa-ra:before, -.fa-rebel:before { - content: "\f1d0"; -} -.fa-ge:before, -.fa-empire:before { - content: "\f1d1"; -} -.fa-git-square:before { - content: "\f1d2"; -} -.fa-git:before { - content: "\f1d3"; -} -.fa-hacker-news:before { - content: "\f1d4"; -} -.fa-tencent-weibo:before { - content: "\f1d5"; -} -.fa-qq:before { - content: "\f1d6"; -} -.fa-wechat:before, -.fa-weixin:before { - content: "\f1d7"; -} -.fa-send:before, -.fa-paper-plane:before { - content: "\f1d8"; -} -.fa-send-o:before, -.fa-paper-plane-o:before { - content: "\f1d9"; -} -.fa-history:before { - content: "\f1da"; -} -.fa-genderless:before, -.fa-circle-thin:before { - content: "\f1db"; -} -.fa-header:before { - content: "\f1dc"; -} -.fa-paragraph:before { - content: "\f1dd"; -} -.fa-sliders:before { - content: "\f1de"; -} -.fa-share-alt:before { - content: "\f1e0"; -} -.fa-share-alt-square:before { - content: "\f1e1"; -} -.fa-bomb:before { - content: "\f1e2"; -} -.fa-soccer-ball-o:before, -.fa-futbol-o:before { - content: "\f1e3"; -} -.fa-tty:before { - content: "\f1e4"; -} -.fa-binoculars:before { - content: "\f1e5"; -} -.fa-plug:before { - content: "\f1e6"; -} -.fa-slideshare:before { - content: "\f1e7"; -} -.fa-twitch:before { - content: "\f1e8"; -} -.fa-yelp:before { - content: "\f1e9"; -} -.fa-newspaper-o:before { - content: "\f1ea"; -} -.fa-wifi:before { - content: "\f1eb"; -} -.fa-calculator:before { - content: "\f1ec"; -} -.fa-paypal:before { - content: "\f1ed"; -} -.fa-google-wallet:before { - content: "\f1ee"; -} -.fa-cc-visa:before { - content: "\f1f0"; -} -.fa-cc-mastercard:before { - content: "\f1f1"; -} -.fa-cc-discover:before { - content: "\f1f2"; -} -.fa-cc-amex:before { - content: "\f1f3"; -} -.fa-cc-paypal:before { - content: "\f1f4"; -} -.fa-cc-stripe:before { - content: "\f1f5"; -} -.fa-bell-slash:before { - content: "\f1f6"; -} -.fa-bell-slash-o:before { - content: "\f1f7"; -} -.fa-trash:before { - content: "\f1f8"; -} -.fa-copyright:before { - content: "\f1f9"; -} -.fa-at:before { - content: "\f1fa"; -} -.fa-eyedropper:before { - content: "\f1fb"; -} -.fa-paint-brush:before { - content: "\f1fc"; -} -.fa-birthday-cake:before { - content: "\f1fd"; -} -.fa-area-chart:before { - content: "\f1fe"; -} -.fa-pie-chart:before { - content: "\f200"; -} -.fa-line-chart:before { - content: "\f201"; -} -.fa-lastfm:before { - content: "\f202"; -} -.fa-lastfm-square:before { - content: "\f203"; -} -.fa-toggle-off:before { - content: "\f204"; -} -.fa-toggle-on:before { - content: "\f205"; -} -.fa-bicycle:before { - content: "\f206"; -} -.fa-bus:before { - content: "\f207"; -} -.fa-ioxhost:before { - content: "\f208"; -} -.fa-angellist:before { - content: "\f209"; -} -.fa-cc:before { - content: "\f20a"; -} -.fa-shekel:before, -.fa-sheqel:before, -.fa-ils:before { - content: "\f20b"; -} -.fa-meanpath:before { - content: "\f20c"; -} -.fa-buysellads:before { - content: "\f20d"; -} -.fa-connectdevelop:before { - content: "\f20e"; -} -.fa-dashcube:before { - content: "\f210"; -} -.fa-forumbee:before { - content: "\f211"; -} -.fa-leanpub:before { - content: "\f212"; -} -.fa-sellsy:before { - content: "\f213"; -} -.fa-shirtsinbulk:before { - content: "\f214"; -} -.fa-simplybuilt:before { - content: "\f215"; -} -.fa-skyatlas:before { - content: "\f216"; -} -.fa-cart-plus:before { - content: "\f217"; -} -.fa-cart-arrow-down:before { - content: "\f218"; -} -.fa-diamond:before { - content: "\f219"; -} -.fa-ship:before { - content: "\f21a"; -} -.fa-user-secret:before { - content: "\f21b"; -} -.fa-motorcycle:before { - content: "\f21c"; -} -.fa-street-view:before { - content: "\f21d"; -} -.fa-heartbeat:before { - content: "\f21e"; -} -.fa-venus:before { - content: "\f221"; -} -.fa-mars:before { - content: "\f222"; -} -.fa-mercury:before { - content: "\f223"; -} -.fa-transgender:before { - content: "\f224"; -} -.fa-transgender-alt:before { - content: "\f225"; -} -.fa-venus-double:before { - content: "\f226"; -} -.fa-mars-double:before { - content: "\f227"; -} -.fa-venus-mars:before { - content: "\f228"; -} -.fa-mars-stroke:before { - content: "\f229"; -} -.fa-mars-stroke-v:before { - content: "\f22a"; -} -.fa-mars-stroke-h:before { - content: "\f22b"; -} -.fa-neuter:before { - content: "\f22c"; -} -.fa-facebook-official:before { - content: "\f230"; -} -.fa-pinterest-p:before { - content: "\f231"; -} -.fa-whatsapp:before { - content: "\f232"; -} -.fa-server:before { - content: "\f233"; -} -.fa-user-plus:before { - content: "\f234"; -} -.fa-user-times:before { - content: "\f235"; -} -.fa-hotel:before, -.fa-bed:before { - content: "\f236"; -} -.fa-viacoin:before { - content: "\f237"; -} -.fa-train:before { - content: "\f238"; -} -.fa-subway:before { - content: "\f239"; -} -.fa-medium:before { - content: "\f23a"; -} diff --git a/web/sass-files/sass/partials/_footer.scss b/web/sass-files/sass/partials/_footer.scss deleted file mode 100644 index deed14d67..000000000 --- a/web/sass-files/sass/partials/_footer.scss +++ /dev/null @@ -1,25 +0,0 @@ -@charset "UTF-8"; - -.footer-pane { - background: #eee; - padding-bottom: 1em; - .footer-link { - padding: 0 1.5em; - &.copyright { - color: #999; - padding-right: 0; - } - } - .footer-site-name { - padding: 1.5em 0 1em; - font-size:14px; - font-weight:bold; - text-transform:uppercase; - } -} - -.footer, .footer-pane, .footer-push { - height: 89px; -} - - diff --git a/web/sass-files/sass/partials/_forms.scss b/web/sass-files/sass/partials/_forms.scss deleted file mode 100644 index a2d6eaf99..000000000 --- a/web/sass-files/sass/partials/_forms.scss +++ /dev/null @@ -1,51 +0,0 @@ -@charset "UTF-8"; - -.form-horizontal { - .modal-intro { - margin: -10px 0 30px; - } - .form__label { - text-align: left; - padding-right: 3px; - font-weight: 600; - font-size: 1.1em; - &.light { - font-weight: normal; - color: #999; - font-size: 1.05em; - font-style: italic; - padding-top: 2px; - } - } - .input__help { - color: inherit; - margin: 10px 0 0 10px; - word-break: break-word; - @include opacity(0.8); - &.dark { - @include opacity(1); - } - &.error { - color: #a94442; - } - } - .form-control { - font-weight: normal; - } - .form-group { - margin-bottom: 25px; - &.less { - margin-bottom: 10px; - } - } -} - -.help-block { - font-size: 0.95em; - margin: 10px 0 0; - color: #999; -} - -.disabled-input { - background-color: #dddddd !important; -} diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss deleted file mode 100644 index d4365d1e6..000000000 --- a/web/sass-files/sass/partials/_get-link.scss +++ /dev/null @@ -1,8 +0,0 @@ -@charset "UTF-8"; - -.copy-link-confirm { - display: inline-block; - float: left; - padding: 4px 10px; - margin: 1px 0 0 10px; -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss deleted file mode 100644 index 93cb04198..000000000 --- a/web/sass-files/sass/partials/_headers.scss +++ /dev/null @@ -1,320 +0,0 @@ -@charset "UTF-8"; - -#channel-header { - @include flex(0 0 56px); -} -.row { - &.header { - position: relative; - .channel__wrap & { - display: none; - } - } -} - -.header-dropdown__icon { - font-size: 11px; - color: inherit; - top: 3px; -} -.channel-header__info { - display: table; - table-layout: fixed; - width: 100%; - > div { - display: block; - white-space: nowrap; - word-break: break-word; - &.dropdown { - max-width: 100%; - padding-right: 1em; - float: left; - .header-dropdown__icon { - color: #777; - } - a { - text-decoration: none; - } - .modal { - white-space: normal; - } - } - &.description { - overflow: hidden; - text-overflow: ellipsis; - margin-top: 2px; - max-height: 45px; - .markdown-inline-img { - max-height: 45px - } - } - &.popover { - white-space: normal; - } - } - -} - -.channel-intro { - margin: 0 auto 35px; - padding: 0 1em 5px; - max-width: 1000px; - border-bottom: 1px solid lightgrey; - .intro-links { - margin: 0 1.5em 10px 0; - display: inline-block; - .fa { - margin-right: 5px; - } - } - .channel-intro-profile { - margin-top:5px; - margin-left: 63px; - } - .channel-intro-img { - float:left; - img { - @include border-radius(100px); - } - } - .channel-intro__title { - font-weight:600; - font-size: 20px; - margin-bottom: 15px; - } - .channel-intro__content { - background: #f7f7f7; - padding: 10px 15px; - @include border-radius(3px); - } - .channel-intro-text { - margin-top:35px; - } -} - -// Team Header in Sidebar -.sidebar--left, .sidebar--menu { - .team__header { - position: relative; - padding: 9px 10px; - @include legacy-pie-clearfix; - &:before { - @include single-transition(all, 0.05s, linear); - content: ""; - background: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; - } - &:hover { - &:before { - background: rgba(black, 0.1); - } - .user__name { - color: #fff; - } - .navbar-right { - .dropdown-toggle { - @include opacity(1); - } - } - } - .navbar-right { - font-size: 0.85em; - position: absolute; - top: 10px; - right: 22px; - z-index: 5; - .dropdown-toggle { - @include single-transition(all, 0.1s, linear); - padding: 10px; - @include opacity(0.8); - } - .dropdown-menu { - li a { - padding: 3px 20px; - text-overflow: ellipsis; - overflow: hidden; - } - } - .dropdown__icon { - fill: #fff; - } - } - .settings__link a:hover, a:visited, a:link, a:active { - text-decoration: none; - } - .user__picture { - width: 36px; - height: 36px; - float: left; - @include border-radius(36px); - margin-right: 6px; - } - .header__info { - color: #fff; - @include clearfix; - padding-left: 2px; - z-index: 1; - position: relative; - } - .team__name, .user__name { - display: block; - font-weight: 600; - font-size: 16px; - max-width: 85%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-decoration: none; - } - .team__name { - line-height: 22px; - margin-top: -2px; - float: left; - } - .user__name { - @include single-transition(all, 0.1s, linear); - font-size: 14px; - line-height: 18px; - font-weight: 400; - color: #eee; - color: rgba(#fff, 0.8); - } - > .nav { - > li { - > a { - float: right; - background: none !important; - padding: 2px; - &.dropdown-toggle { - line-height: 1.8; - font-size: 1em; - color: #fff; - } - } - } - } - } - .search__clear { - display: none; - } -} - -#navbar { - .navbar-default { - .navbar-toggle { - &.menu-toggle { - padding: 0 1em; - } - } - } -} - -.channel-header { - width:100%; - border-left: none; - font-size: 14px; - line-height: 56px; - #member_popover { - width: 50px; - color: #999; - cursor: pointer; - .fa { - margin-left: 4px; - font-size: 16px; - } - } - &.alt { - margin: 0; - th { - font-weight: normal !important; - } - td { - border: none; - } - } - th { - text-align: center; - &:first-child { - text-align: left !important; - border-left: none; - width: 100%; - padding-left: 1em; - } - &:last-child { - width: 8.9%; - } - } - td { - padding: 5px 25px 5px !important; - font-size: 13px; - text-align: center !important; - &:first-child { - text-align: left !important; - } - } - .heading { - margin: 0; - color: #555; - font-size: 1.3em; - font-weight: 600; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - display: inline-block; - vertical-align: middle; - margin-right: 4px; - } - .caret { - margin-top: 3px; - } - .more { - color: #81848b; - display: inline-block; - vertical-align: top; - text-transform: capitalize; - font-size: 13px; - } - .disabled { - color: #999; - } -} - -.channel-header__navbar { - font-size: 16px; - .heading { - margin-right: 3px; - } - .header-dropdown__icon { - top: 1px; - } -} - -.channel-header__links { - font-family: 'Open Sans', sans-serif; - height: 30px; - width: 24px; - line-height: 26px; - margin-right: 9px; - font-size: 22px; - .channel__wrap.move--left & { - position: absolute; - right: -400px; - top: 14px; - } - > a { - color: inherit; - text-decoration: none; - @include opacity(0.6); - @include single-transition(all, 0.1s, ease-in); - &:hover { - @include opacity(1); - } - &:focus { - color: inherit; - } - } -} diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss deleted file mode 100644 index e9863ddbd..000000000 --- a/web/sass-files/sass/partials/_loading.scss +++ /dev/null @@ -1,42 +0,0 @@ -@charset "UTF-8"; - -.loading-screen { - display: table; - width: 100%; - height: 100%; - padding: 60px; - text-align: center; - .loading__content { - display: table-cell; - vertical-align: middle; - font-size: 0; - h3 { - font-size: 16px; - font-weight: 400; - margin: 0 0.2em 0; - display: inline-block; - } - - .round { - background-color: #444; - width: 4px; - height: 4px; - display: inline-block; - margin: 0 2px; - opacity: 0.1; - @include border-radius(10px); - @include animation(move 0.75s infinite linear); - } - - @for $i from 1 through 3 { - .round-#{$i} { - @include animation-delay(.2s*$i); - } - } - - @include keyframes(move) { - from { opacity: 1; } - to { opacity: 0.1; } - } - } -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss deleted file mode 100644 index f34b5ec19..000000000 --- a/web/sass-files/sass/partials/_markdown.scss +++ /dev/null @@ -1,106 +0,0 @@ -@charset "UTF-8"; - -.markdown__heading { - font-weight: 700; - line-height: 1.5; -} -.markdown__paragraph-inline { - display: inline; - + .markdown__paragraph-inline { - margin-left: 4px; - } -} -#post-list { - .markdown-inline-img { - -moz-force-broken-image-icon: 1; - max-height: 500px; - height: 500px; - } -} - -.post-body--code { - position: relative; - - pre { - margin-bottom: 0; - word-break: normal; - overflow: auto; - word-wrap: normal; - } - -} - -.post-body--code__language { - -webkit-transform: translate3d(0,0,0); - position: absolute; - top: 0; - right: 0; - color: #fff; - background: #21586D; - padding: 4px 10px 5px 10px; - font-size: 13px; - opacity: 0.7; - z-index: 5; -} - -.post__body { - hr { - height: 4px; - padding: 0; - margin: 15px 0 16px; - background-color: #e7e7e7; - border: 0 none; - @include opacity(0.2); - } - code { - white-space: pre; - } - .codespan__pre-wrap { - code { - white-space: pre-wrap; - } - } -} -.markdown__table { - background: #fff; - margin: 5px 0 10px; - th, td { - padding: 6px 13px; - border: 1px solid #ddd; - } - tbody tr { - background: #fff; - &:nth-child(2n) { - background-color: #f8f8f8; - } - } -} -blockquote { - border: none; - position: relative; - font-size: 16px; - padding: 10px 10px 10px 38px; - margin-bottom: 0; - &:before { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - content: "\f10d"; - left: 8px; - top: 5px; - position: absolute; - font-size: 20px; - @include opacity(0.6); - } -} -pre { - border: none; - margin: 5px 0; - color: inherit; -} -code { - background: #fff; - color: inherit; -} diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss deleted file mode 100644 index aa654e9e8..000000000 --- a/web/sass-files/sass/partials/_mentions.scss +++ /dev/null @@ -1,61 +0,0 @@ -@charset "UTF-8"; - -.mention { - color: #fff; - background: $primary-color; - position: relative; - z-index: 10; - padding-bottom: 2px; - @include border-radius(3px); -} - -.mentions-name { - position:relative; - width:100%; - height:36px; - padding:2px; - z-index:101; - line-height: 36px; - font-size: 13px; - cursor: pointer; - white-space: nowrap; - - .mention-align { - @include clearfix; - text-overflow: ellipsis; - width: calc(100% - 50px); - } -} - -.mentions-text { - font-color:black; -} - -.mention-img { - margin-right: 6px; - height: 32px; - width: 32px; - line-height: 36px; - display: block; - font-size: 20px; - text-align: center; - @include border-radius(32px); - - .mention-align { - max-width: 80%; - overflow: hidden; - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - } - -} - -.mention-fullname { - color: grey; - padding-left: 10px; -} - -.mention-highlight { - background-color:#fff2bb; -} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss deleted file mode 100644 index 5b02652af..000000000 --- a/web/sass-files/sass/partials/_modal.scss +++ /dev/null @@ -1,489 +0,0 @@ -@charset "UTF-8"; - -#channel_members_modal .modal-body { - min-height: 110px; -} -.modal-body { - padding: 20px 15px; - overflow: auto; -} -.more-table { - margin: 0; - table-layout: fixed; - p { - font-size: 0.9em; - overflow: hidden; - text-overflow: ellipsis; - @include opacity(0.8); - margin: 5px 0; - } - .profile-img { - -moz-border-radius: 50px; - -webkit-border-radius: 50px; - border-radius: 50px; - margin-right: 8px; - } - .more-row { - display: flex; - - .more-details { - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - } - .more-actions { - flex-grow: 0; - flex-shrink: 0; - } - } - .more-name { - font-weight: 600; - font-size: 0.95em; - white-space: nowrap; - } - .more-description { - @include opacity(0.7); - display: block; - white-space: nowrap; - } - tbody { - > tr { - &:hover td { - background: #f7f7f7; - } - &:first-child { - td { - border: none; - } - } - td { - width: 100%; - @include legacy-pie-clearfix; - text-overflow: ellipsis; - padding: 8px 15px; - &.padding--equal { - padding: 8px; - } - } - } - } -} -.modal { - width: 100%; - color: #333; - body.browser--IE & { - .modal-dialog { - @include translateY(0); - } - } - &.image_modal { - .modal-backdrop.in { - @include opacity(0.7); - } - } - .custom-textarea { - color: inherit; - border-color: #ccc; - &:focus { - border-color: #ccc; - box-shadow: none; - } - } - .btn { - font-size: 13px; - &.btn-default { - border: none; - background: transparent; - } - } - .info__label { - font-weight: 600; - text-align: right; - padding-right: 0; - } - .team-member-list { - width: 100%; - } - .remove__member { - float: right; - color: #999; - font-size: 20px; - line-height: 0; - padding: 6px; - &:hover { - color: #E56565; - } - } - .modal-dialog { - max-width: 95%; - margin-left: auto; - margin-right: auto; - } - .modal-push-down { - margin-top: 5%; - } - .modal-next-bar { - position:absolute; - top:0px; - right:0; - height:100%; - } - .modal-header { - border-radius: 0; - background: $primary-color; - color: #FFF; - padding: 15px 15px 11px; - border: 1px solid #ddd; - min-height: 56px; - @include clearfix; - .modal-title { - float: left; - font-size: 17px; - line-height: 27px; - color: #f4f4f4; - .name { - font-weight: 600; - color: #fff; - } - } - .modal-action { - padding: 0; - margin: 0; - } - button.close { - color: #fff; - @include opacity(1); - z-index: 5; - width: 30px; - height: 30px; - line-height: 30px; - @include single-transition(all, 0.25s, ease-in); - position: absolute; - right: 10px; - &:hover { - background: rgba(0, 0, 0, 0.1); - } - span { - font-family: 'Open Sans', sans-serif; - line-height: 10px; - } - } - .btn { - &.btn-primary { - float: right; - margin: -4px 25px 0 0; - position: relative; - i { - margin-right: 5px; - } - } - } - } - .no-channel-message { - text-align: center; - padding: 2em 1em; - .primary-message { - font-size: 1.25em; - } - .secondary-message { - @include opacity(0.8); - margin: 1em 0 0; - } - } - .modal-content { - border-radius: 0; - box-shadow: none; - } - .modal-chevron-icon { - top:50%; - font-size:120%; - } - .modal-prev-bar { - position:absolute; - top:0px; - left:0; - height:100%; - } - &#more_channels { - .modal-body { - padding: 0; - } - } - .modal-image { - position:relative; - width:100%; - height: 100%; - margin: 0 auto; - max-width: 100%; - - .modal-body { - @include clearfix; - height: 100%; - display: table; - table-layout: fixed; - width: 100%; - max-height: 100%; - } - - .image-wrapper { - position: relative; - max-width: 90%; - @include border-radius(3px); - display: table-cell; - vertical-align: middle; - text-align: center; - width: 100%; - - &:hover { - @include border-radius(3px 3px 0 0); - } - - &.default { - width: 100%; - height: 80%; - } - - audio, canvas, progress, video { - max-width: 100%; - height: auto; - display: block; - } - - .modal-close { - background: url("../images/close.png") no-repeat; - @include background-size(100% 100%); - width: 37px; - height: 37px; - position: absolute; - right: -13px; - top: -13px; - @include opacity(0); - -webkit-transition: opacity 0.6s; - -moz-transition: opacity 0.6s; - -o-transition: opacity 0.6s; - transition: opacity 0.6s; - cursor: pointer; - z-index: 9999; - - &.modal-close--show { - @include opacity(1); - } - - } - - > div { - min-height: 100px; - min-width: 320px; - background: #FFF; - display: inline-block; - position: relative; - - &:hover .file-playback-controls.stop { - @include opacity(1); - } - - } - - img { - max-width: 100%; - max-height: 100%; - } - - .spinner.file__loading { - z-index: 2; - position: absolute; - left: 50%; - margin-left: -16px; - top: 50%; - margin-top: -16px; - } - } - .modal-content{ - box-shadow: none; - background: rgba(0, 0, 0, 0); - width: 100%; - height: 100%; - padding: 0; - border: none; - } - .image-body { - vertical-align: middle; - display: table-cell; - text-align: center; - height: 100%; - padding: 0; - position: relative; - overflow: visible; - } - .image-control { - width: 50px; - height: 45px; - float: left; - background: url(../images/prev.png) left no-repeat; - top: 50%; - position: relative; - margin-top: -23px; - &.image-next { - float: right; - background: url(../images/next.png) left no-repeat; - } - } - .loader-image { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - } - .loader-percent { - position: absolute; - top: 55px; - bottom: 0; - left: 0; - right: 0; - margin: auto; - color:grey; - height:20px; - } - .modal-button-bar { - position:absolute; - bottom:-40px; - left:0px; - right:0px; - background-color: #222; - @include border-radius(0 0 3px 3px); - @include opacity(0); - -webkit-transition: opacity 0.6s; - -moz-transition: opacity 0.6s; - -o-transition: opacity 0.6s; - transition: opacity 0.6s; - line-height: 40px; - padding: 0 10px; - &.footer--show { - @include opacity(1); - } - .image-links { - a, span { - float: right; - } - } - .text { - vertical-align:middle; - bottom:0; - color:white; - margin-left:5px; - } - .public-link { - margin-right: 5px; - } - } - } -} - - -// Invite New Member -.invite { - margin-right: 40px; -} - -.row--invite { - margin-right: 40px; - @include clearfix; - .col-sm-6 { - padding: 0 0 0 15px; - &:first-child { - padding-left: 0; - } - } -} - -.more-modal { - - .user-list { - overflow-y: auto; - overflow-x: hidden; - margin-top: 10px; - position: relative; - } - - .table { - margin-top: 10px; - } - - .modal-body { - padding: 10px 0 20px; - overflow-x: hidden; - } - - .filter-row { - margin-top: 10px; - @include clearfix; - } - - .member-count { - margin-top: 5px; - float: right; - @include opacity(0.8); - } - - .more-purpose { - @include opacity(0.7); - } -} - -.modal-body.edit-modal-body { - overflow: visible; - - .suggestion-content { - max-height: 150px; - } -} - -.user-list { - display: flex; - flex-direction: column; - - .profile-img { - width: 38px; - height: 38px; - flex-grow: 0; - flex-shrink: 0; - } - - .user-list-item__details { - flex-grow: 1; - flex-shrink: 1; - overflow:hidden; - text-overflow: ellipsis; - - .more-name { - white-space: nowrap; - } - - .more-description { - white-space: nowrap; - } - } - - .user-list-item__actions { - flex-grow: 0; - flex-shrink: 0; - } -} - -.filtered-user-list { - display: flex; - flex-direction: column; - - .filter-row { - flex-grow: 0; - flex-shrink: 0; - } - - .user-list { - flex-grow: 1; - flex-shrink: 1; - } -} diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss deleted file mode 100644 index 28ab61ec1..000000000 --- a/web/sass-files/sass/partials/_navbar.scss +++ /dev/null @@ -1,112 +0,0 @@ -@charset "UTF-8"; - -#navbar{ - input { - margin: 0px 5px 0px 2px; - } - .navbar-default { - position: absolute; - border: none; - min-height: 45px; - background: $primary-color; - .navbar-nav { - > li { - > a { - height: 45px; - padding: 0 1.3em; - i { - line-height: 45px; - } - } - } - } - .navbar-toggle { - width: 43px; - float: left; - border-color: transparent; - border-radius: 0; - margin: 0; - padding: 0 10px; - line-height: 48px; - height: 44px; - z-index: 5; - fill: #fff; - .icon-bar { - background: #fff; - width: 21px; - } - .glyphicon-search { - top: -1px; - } - .icon--white { - color: #fff; - } - &:hover, &:active, &:focus { - background: inherit; - } - } - .navbar-brand { - padding: 0 0.5em; - height: 45px; - line-height: 45px; - float: none; - font-size: 16px; - .heading { - margin-right: 3px; - font-weight: 600; - color: #fff; - } - .header-dropdown__icon { - top: 1px; - } - .dropdown-toggle { - color: #fff; - } - .description { - display: inline-block; - margin-right: 0.5em; - color: #fff; - &.info-popover { - width: 19px; - height: 19px; - background: url("../images/info__icon.png"); - @include background-size(100% 100%); - vertical-align: middle; - top: -1px; - position: relative; - cursor: pointer; - } - } - } - } - .sidebar-channel { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - span { - white-space: nowrap; - margin-left: 2px; - } - } - .channel-create-btn { - margin-right: 15px; - } - .more-channel-table { - width: 100%; - border: 1px solid #dbdbdc; - td { - padding: 7px; - } - button { - width: 110px; - } - } -} - -.badge-notify { - background: red; - position: absolute; - left: 4px; - top: 3px; - z-index: 100; -} diff --git a/web/sass-files/sass/partials/_oauth.scss b/web/sass-files/sass/partials/_oauth.scss deleted file mode 100644 index 2bd9a0de5..000000000 --- a/web/sass-files/sass/partials/_oauth.scss +++ /dev/null @@ -1,33 +0,0 @@ -@charset "UTF-8"; - -.oauth-prompt { - background: #fff; - border: 1px solid #ddd; - padding: 1em 2em 0; - margin: 50px auto; - max-width: 90%; - width: 600px; - .prompt__heading { - font-size: em(20px); - line-height: normal; - margin: 1em 0; - display: table; - width: 100%; - > div { - display: table-cell; - vertical-align: top; - } - img { - margin-right: 15px; - } - } - .prompt__allow { - margin: 1em 0; - font-size: em(24px); - } - .prompt__buttons { - text-align: right; - border-top: 1px solid #ddd; - padding: 1.5em 0; - } -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_perfect-scrollbar.scss b/web/sass-files/sass/partials/_perfect-scrollbar.scss deleted file mode 100755 index 0e0967d81..000000000 --- a/web/sass-files/sass/partials/_perfect-scrollbar.scss +++ /dev/null @@ -1,122 +0,0 @@ -@charset "UTF-8"; - -.ps-container { - overflow: hidden !important; } - .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail { - display: block; } - .ps-container.ps-in-scrolling { - } - .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { - background-color: #999; } - .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { - background-color: #999; } - .ps-container > .ps-scrollbar-x-rail { - display: none; - position: absolute; - /* please don't change 'position' */ - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - -webkit-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - -o-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; - bottom: 3px; - /* there must be 'bottom' for ps-scrollbar-x-rail */ - height: 8px; } - .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { - position: absolute; - /* please don't change 'position' */ - background-color: #aaa; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - -webkit-transition: background-color .2s linear; - -moz-transition: background-color .2s linear; - -o-transition: background-color .2s linear; - transition: background-color .2s linear; - bottom: 0; - /* there must be 'bottom' for ps-scrollbar-x */ - height: 8px; } - .ps-container > .ps-scrollbar-y-rail { - display: none; - position: absolute; - /* please don't change 'position' */ - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - -webkit-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - -o-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; - right: 3px; - /* there must be 'right' for ps-scrollbar-y-rail */ - width: 8px; } - .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { - position: absolute; - /* please don't change 'position' */ - background-color: #aaa; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - -webkit-transition: background-color .2s linear; - -moz-transition: background-color .2s linear; - -o-transition: background-color .2s linear; - transition: background-color .2s linear; - right: 0; - /* there must be 'right' for ps-scrollbar-y */ - width: 8px; } - .ps-container:hover.ps-in-scrolling { - } - .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { - background-color: #999; } - .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { - background-color: #999; } - .ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail { - opacity: 0.6; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; - filter: alpha(opacity=60); } - .ps-container:hover > .ps-scrollbar-x-rail:hover { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { - background-color: #999; } - .ps-container:hover > .ps-scrollbar-y-rail:hover { - background-color: #eee; - opacity: 0.9; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity=90); } - .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { - background-color: #999; } diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss deleted file mode 100644 index bf762d2c9..000000000 --- a/web/sass-files/sass/partials/_popover.scss +++ /dev/null @@ -1,158 +0,0 @@ -@charset "UTF-8"; - -.channel-header__info .popover-content { - max-height: 250px; - overflow: auto; -} - -.user-popover { - cursor: pointer; - display: inline-block; -} - -.code-popover .popover-content { - padding: 5px; -} - -.user-popover__image { - margin: 0 0 10px; - @include border-radius(128px); -} - -.user-popover__email { - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - display: block; -} - -.search-help-popover { - visibility: hidden; - max-width: none; - width: 100%; - top: 36px; - @include single-transition(opacity, 0.3s, ease-in); - font-size: em(13px); - - &.autocomplete { - display: block; - .popover-content { - padding: 10px; - position: relative; - } - } - - .search-autocomplete__divider { - margin: 10px 0 5px; - line-height: 21px; - position: relative; - &:first-child { - margin-top: 5px; - } - span { - display: inline-block; - padding-right: 10px; - background: #fff; - z-index: 5; - position: relative; - } - &:before { - content: ""; - position: absolute; - width: 100%; - height: 1px; - background: #ddd; - top: 10px; - left: 0; - @include opacity(0.2); - } - } - - .search-autocomplete__item { - cursor: pointer; - padding: 6px 8px; - margin: 3px 0 0 5px; - @include border-radius(2px); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover { - background: rgba(black, 0.1); - } - - &.selected { - background: rgba(black, 0.2); - } - - .fa { - margin-right: 5px; - @include opacity(0.5); - } - - .profile-img { - margin-top: -1px; - height: 16px; - margin-right: 6px; - width: 16px; - } - } - - &.bottom > .arrow { - top: -18px; - border-width: 9px; - left: 30px; - } - - .popover-content { - max-height: 500px; - overflow: auto; - padding: 3px 13px; - } - - h4 { - font-size: 1em; - } - - ul { - padding-left: 17px; - span { - @include opacity(0.8); - } - strong, b { - @include opacity(1); - } - } - - .tooltip-inner { - max-width: 100%; - } - - &.visible { - visibility: visible; - @include opacity(1); - } -} - -#member-list-popover { - max-width: initial; - .popover-content { - position: relative; - padding: 0; - width: 260px; - max-height: 350px; - .text-nowrap { - padding: 6px 10px; - width: 100%; - overflow: hidden; - line-height: 26px; - font-size: 13px; - } - .more-name { - margin-left: 6px; - max-width: 140px; - overflow: hidden; - text-overflow: ellipsis; - } - } -} diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss deleted file mode 100644 index 209f8e27f..000000000 --- a/web/sass-files/sass/partials/_post.scss +++ /dev/null @@ -1,1013 +0,0 @@ -@charset "UTF-8"; - -.custom-textarea { - white-space:pre-wrap; - word-wrap:break-word; - background:transparent; - border:1px solid #ccc; - position:absolute; - top:0px; - height:auto; - resize: none; - line-height:20px; - min-height:36px; - overflow-x: hidden; - &:focus { - border-color: #ccc; - box-shadow: none; - } -} - -.bad-connection { - background: #ffffac !important; - color: #D04444 !important; -} - -.textarea-div { - white-space:pre-wrap; - word-wrap:normal; - color:rgba(0,0,0,0); - position:absolute; - top:0px; - word-break: break-word; - left:1px; - line-height:20px; - min-height:36px; - height:auto; - border:0; -} - -body.ios { - .textarea-div { - padding: 7px 17px 7px 15px; - -webkit-overflow-scrolling: auto; - } -} - -.textarea-div::-webkit-scrollbar { - display:none; -} - -.textarea-wrapper { - position:relative; - .textbox-preview-area { - position: absolute; - z-index: 2; - top: 0; - left: 0; - box-shadow: none; - white-space: normal; - } - .help__text { - right: 0; - position: absolute; - z-index: 3; - bottom: -23px; - font-size: 13px; - cursor: pointer; - } - .textbox-preview-link { - margin-right: 8px; - } - min-height:36px; -} - -.help_format_text { - display: none !important; - position: absolute; - bottom: -23px; - left: 0px; - overflow: hidden; - text-overflow: ellipsis; - font-size: 0.85em; - @include opacity(0); - @include single-transition(all 0.2s ease); - - b, i, code { - margin-right: 3px; - } - .textbox-preview-link{ - font-size: 13px; - cursor: pointer; - margin-left: 15px; - } -} - -.date-separator, .new-separator { - text-align: center; - height: 2em; - margin: 0; - position: relative; - z-index: 0; - &:before, &:after { - content: ""; - height: 1em; - position: absolute; - left: 0; - width: 100%; - display: none; - } - &:before { - bottom: 0; - } - &:after { - top: 0; - } - &.hovered--after { - &:before { - background: #f5f5f5; - display: block; - } - } - &.hovered--before { - &:after { - background: #f5f5f5; - display: block; - } - } - .separator__hr { - border-color: #ccc; - margin: 0; - position: relative; - z-index: 5; - top: 1em; - } - .separator__text { - line-height: 2em; - color: #555; - background: #FFF; - display: inline-block; - padding: 0 1em; - font-weight: 700; - @include border-radius(50px); - position: relative; - z-index: 5; - font-size: 13px; - } -} -.new-separator { - .separator__hr { - border-color: #FFAF53; - } - .separator__text { - color: #F80; - font-weight: normal; - } -} - -.file-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - color: #FFF; - font-size: em(20px); - font-weight: 600; - z-index: 6; - - .overlay__indent { - background-color: rgba(0, 0, 0, 0.6); - position: relative; - height: 100%; - @include clearfix; - } - - &.center-file-overlay { - .overlay__indent { - margin-left: 220px; - } - } - - &.right-file-overlay { - font-size: em(18px); - .overlay__circle { - width: 300px; - height: 300px; - margin: -150px 0 0 -150px; - } - .overlay__files { - margin: 60px auto 15px; - width: 150px; - } - } - - .overlay__circle { - background: #111; - background: rgba(black, 0.7); - width: 370px; - height: 370px; - margin: -185px 0 0 -185px; - @include border-radius(500px); - position: absolute; - top: 50%; - left: 50%; - pointer-events: none; - } - - .overlay__files { - display: block; - margin: 75px auto 20px; - } - - .overlay__logo { - position: absolute; - left: 50%; - bottom: 30px; - margin-left: -50px; - @include opacity(0.3); - } - - .fa { - display: inline-block; - font-size: 1.1em; - margin-right: 8px; - } -} - -#post-list { - @include flex(1 1 auto); - position: relative; - overflow-y: hidden; - height: 100%; - - .inactive { - display: none; - } - - .post-list-holder-by-time { - background: #fff; - overflow-y: scroll; - width: 100%; - padding: 1em 0 0; - position: absolute; - height: 100%; - -webkit-overflow-scrolling: touch; - &.active { - display: inline; - } - } - - .more-messages-text { - margin: 5px 0 10px; - display: block; - text-align: center; - outline: none; - border: none; - font-size: 13px; - } - .beginning-messages-text { - margin-top: 2px; - margin-bottom: 5px; - display: block; - text-align: center; - color: grey; - } -} - -.post-list__timestamp { - position: absolute; - top: 8px; - left: 50%; - z-index: 50; - width: 120px; - text-align: center; - background: $primary-color; - color: #fff; - @include border-radius(3px); - font-size: 12px; - line-height: 25px; - margin-left: -60px; - -webkit-font-smoothing: initial; - @include single-transition(all, 0.6s, ease); - @include translateY(-45px); - @include opacity(0); - display: none; - - &.scrolling { - @include translateY(0); - @include opacity(0.8); - } -} - -.post-list__arrows { - background-repeat: no-repeat; - width: 40px; - height: 40px; - text-align: center; - fill: #444; - position: absolute; - bottom: 0; - left: 9px; - z-index: 50; - @include opacity(0); - @include single-transition(all, 0.6s); - display: none; - - svg { - color: inherit; - width: 28px; - height: 28px; - } - - &.scrolling { - display: block; - @include opacity(1); - } -} - -.post-create__container { - form { - width: 100%; - padding: 0.5em 14px 0; - margin: 0 auto; - max-width: 1028px; - } - .post-create-body { - position: relative; - padding: 0 0 2px; - .post-body__cell { - vertical-align: top; - position: relative; - &.scroll { - .btn-file { - right: 15px; - } - .custom-textarea { - padding-right: 43px; - } - } - } - .send-button { - display: none; - cursor: pointer; - padding-right: 4px; - width: 45px; - height: 37px; - font-size: 18px; - line-height: 37px; - vertical-align: bottom; - text-align: center; - @include single-transition(all, 0.15s); - &:active { - @include opacity(0.75); - } - } - .custom-textarea { - padding-top: 8px; - padding-right: 28px; - max-height: 162px !important; - line-height: 1.5; - } - .textarea-div { - padding-top: 8px; - padding-right: 30px; - max-height: 163px !important; - overflow: auto; - line-height: 1.5; - } - .btn-file { - right: 0; - position: absolute; - top: 1px; - color: #444; - @include opacity(0.5); - @include single-transition(all, 0.15s); - font-size: 16px; - padding: 7px 9px 6px; - &:hover, &:active { - @include opacity(0.9); - box-shadow: none; - } - } - textarea { - box-shadow: none; - } - } - .post-create-footer { - @include clearfix; - padding: 3px 0 0 0; - font-size: 13px; - .control-label { - font-weight: normal; - margin-bottom: 0; - top: -5px; - position: relative; - } - } - .msg-typing { - display: block; - @include opacity(0.7); - white-space: nowrap; - margin-bottom: 5px; - overflow: hidden; - font-size: 0.95em; - text-overflow: ellipsis; - height: 20px; - } -} - -.post-list__table { - display: table; - table-layout: fixed; - width: 100%; - min-height: 100%; - height: 100%; - .post-list__content { - display: table-cell; - vertical-align: bottom; - .dropdown-menu { - &.bottom { - top: auto; - bottom: 25px; - } - } - } -} - -.post { - word-wrap: break-word; - padding: 8px .5em 0 1em; - position: relative; - max-width: 100%; - @include legacy-pie-clearfix; - - &:hover { - .dropdown, .comment-icon__container, .post__reply, .post__remove { - visibility: visible; - } - .permalink-icon { - visibility: visible; - } - } - - &.post--highlight { - background-color: beige; - } - - p { - margin: 0; - line-height: 1.6em; - font-size: 0.97em; - white-space: pre-wrap; - - &:last-child { - margin-bottom: 0.5em; - } - - } - - span { - - p:last-child { - margin-bottom: 0.5em; - } - - } - - &.post--root { - - .comment-icon__container { - visibility: visible; - } - - } - - &.same--root { - - &.same--user { - padding: 0 .5em 0 1em; - - &:hover { - - .post__time { - @include opacity(0.5); - } - - } - - .post__header { - margin: 0; - height: 0; - - .col__name { - display: none; - } - - .col__reply { - top: 6px; - } - - } - - .post__time { - top: 24px; - } - - .post__time { - font: normal normal normal FontAwesome; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - top: -2px; - left: -7px; - font-size: 11px; - line-height: 37px; - @include opacity(0); - } - - } - - &.post--comment { - - .post__link { - display: none; - } - - .post__img { - img { - display: none; - } - } - - } - - &.post--comment { - .post__body { - border-left: 4px solid #ddd; - } - } - - } - - &.other--root { - - .comment-icon__container { - - &.icon--show { - visibility: visible; - } - - } - - &.post--comment { - - .popover { - - margin-top: 84px; - - > .arrow { - top: 21px !important; - } - } - - .post__header { - - .col__reply { - top: 53px; - } - - } - - } - - } - - .post__content { - margin: 0 auto; - position: relative; - max-width: 1000px; - display: table; - width: 100%; - table-layout: fixed; - - > div { - display: table-cell; - vertical-align: top; - } - - } - - .post__header { - padding: 0; - list-style: none; - margin-bottom: 2px; - - li { - display: inline-block; - vertical-align: top; - } - - .col__name { - margin-right: 7px; - font-weight: 600; - - .user-popover { - max-width: 200px; - @include clearfix; - text-overflow: ellipsis; - white-space: nowrap; - } - - } - - .col__reply { - position: absolute; - right: 0; - top: 30px; - width: 65px; - white-space: nowrap; - } - - .permalink-popover { - min-width: 0; - - .popover-content { - padding: 5px; - } - - .form-control, .btn { - font-size: 13px; - height: 30px; - padding: 0 8px; - line-height: 30px; - } - - } - - } - - .post__img { - width: 46px; - img { - width: 36px; - height: 36px; - vertical-align: inherit; - @include border-radius(50px); - } - } - - .post__embed-container{ - display: block; - max-height: 1000px; - transition: max-height .5s ease; - overflow: hidden; - &[hidden]{ - max-height: 0; - } - } - - .dropdown { - display: inline-block; - visibility: hidden; - margin-right: 5px; - top: -1px; - - .dropdown-menu { - right: 0; - left: auto; - min-width: 130px; - padding: 2px 0; - - li { - display: block; - - } - - a { - padding: 5px 15px; - } - - } - - } - - .post__dropdown { - &:after { - content: '[...]'; - top: -1px; - position: relative; - } - } - - .post__remove { - font-family: 'Open Sans', sans-serif; - position: relative; - display: inline-block; - vertical-align: top; - right: 15px; - top: -5px; - font-size: 20px; - width: 20px; - height: 20px; - line-height: 20px; - font-weight: 600; - visibility: hidden; - color: inherit; - @include opacity(0.5); - text-decoration: none; - - &:hover { - @include opacity(0.8); - } - - } - - .post__body { - word-wrap: break-word; - padding: 0.2em 0.5em; - @include legacy-pie-clearfix; - width: calc(100% - 75px); - - p { - margin: 0 0 0.4em; - } - - p + p { - margin-top: 1.4em; - } - - li { - > p { - margin-top: 10px; - } - } - - img { - max-height: 400px; - } - - ul, ol { - margin-bottom: 0.4em; - - p { - margin-bottom: 0; - } - li ul, li ol { - padding: 0 0 0 20px - } - - li.list-item--task-list ul, li.list-item--task-list ol { - margin-left: 20px; - } - - li.list-item--task-list ul { - padding-left: 0; - } - - li:not(.list-item--task-list) li.list-item--task-list, li:not(.list-item--task-list) li.list-item--task-list ~ li { - margin-left: -20px; - } - - li input[type="checkbox"]:disabled { - vertical-align: top; - cursor: default; - } - } - - ul li.list-item--task-list, ul li.list-item--task-list ~ li { - list-style-type: none; - } - - ul li.list-item--task-list ~ li:not(.list-item--task-list) { - text-indent: 3px; - - &:before { - content: "⦁"; - margin-right: 8px; - } - } - } - - .post__link { - margin: 2px 0 5px; - font-size: 13px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .post__embed-visibility { - cursor: pointer; - font: normal normal normal 14px/1 FontAwesome; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - margin: 5px 0 10px; - display: inline-block; - - &:hover{ - text-decoration: none; - } - - &:before { - content: "\f065"; - font-size: 14px; - } - - &[data-expanded="true"]:before{ - content: "\f066"; - } - } - - .post__time{ - font-size: 0.9em; - } - - .post__time, &.post--system .post__body { - @include opacity(0.6); - } - - .post-loading-gif { - height:10px; - width:10px; - margin-top:6px; - } - - .post-fail { - color: #D58A8A; - } - - .post-waiting { - color: #999; - } - - .permalink-icon { - display: inline-block; - color: $primary-color; - visibility: hidden; - } - - .post__reply { - display: inline-block; - margin-right: 6px; - visibility: hidden; - svg { - width: 18px; - top: 3px; - fill: inherit; - position: relative; - } - } - - .comment-icon__container { - fill: $primary-color; - display: inline-block; - visibility: hidden; - - &:focus { - outline: none; - } - - &.icon--visible { - visibility: visible; - } - - svg { - height: 17px; - width: 17px; - } - - .comment-icon { - display: inline-block; - top: 2px; - position: relative; - margin-right: 3px; - fill: inherit; - } - - path { - fill: inherit; - } - - } - - .web-embed-data { - padding: 2px 0 0 10px; - background: #f9f9f9; - background: rgba(0, 0, 0, 0.05); - @include border-radius(2px); - height: 50px; - overflow: hidden; - text-overflow: ellipsis; - .embed-title { - margin: 3px 0 1px; - color: #555; - font-weight: 600; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .embed-description { - margin: 0; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - color: #888; - } - .embed-link { - display: none; - } - } -} - -.bot-indicator { - font-family: inherit; - font-size: 11px; - padding: 2px 4px; - border-radius: 2px; - font-weight: 600; - margin: 0 0 0 -4px; -} - -.attachment { - .attachment__content { - border-width: 1px; - border-style: solid; - border-radius: 4px; - padding: 2px 5px; - margin: 0 0 5px 0; - } - .attachment__thumb-pretext { - border: 0 none; - background: transparent; - } - .attachment__container { - border-left-width: 4px; - border-left-style: solid; - padding: 2px 0 2px 10px; - &.attachment__container--good { - border-left-color: #00C100; - } - &.attachment__container--warning { - border-left-color: #DEDE01; - } - &.attachment__container--danger { - border-left-color: #E40303; - } - } - .attachment__body { - float: left; - width: 80%; - padding-right: 5px; - overflow-x: auto; - overflow-y: hidden; - &.attachment__body--no_thumb { - width: 100%; - } - } - .attachment__text p:last-of-type { - display: inline-block; - } - .attachment__thumb-pretext { - margin-left: 5px; - } - .attachment__title { - margin: 5px 0; - padding: 0; - line-height: 16px; - height: 22px; - font-size: 16px; - a { - font-size: 16px; - } - } - .attachment__author-icon { - @include border-radius(50px); - margin-right: 5px; - width: 14px; - height: 14px; - } - .attachment__image { - max-width: 100%; - margin-bottom: 1em; - } - .attachment__thumb-container { - width: 20%; - float: right; - img { - max-height: 75px; - max-width: 100%; - } - } - .attachment___fields { - width: 100%; - .attachment___field-caption { - font-weight: 700; - } - .attachment___field p { - margin: 0; - } - } -} - -.permalink-text { - overflow: hidden; -} - -.permalink-popover { - min-width: 320px; - margin-left: 50px !important; -} diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss deleted file mode 100644 index 5df6fdc01..000000000 --- a/web/sass-files/sass/partials/_post_right.scss +++ /dev/null @@ -1,159 +0,0 @@ -@charset "UTF-8"; - -.post-right__container { - @include display-flex; - @include flex-direction(column); - height: 100%; - - .post-right-root-message { - padding: 1em 1em 0; - } - - .post-right-comments-container { - position: relative; - - .post { - - &:first-child { - padding-top: 15px; - } - - } - - } - - - .help_format_text { - bottom: -63px; - right: auto; - } - - .post { - - &.post--root { - padding-bottom: 1.2em; - border-bottom: 1px solid #ddd; - - .post__body { - background: transparent !important; - } - - } - - .post__header { - - .col__reply { - top: 0; - text-align: right; - } - - } - - .post__body { - width: 100%; - } - - } - - hr { - margin-bottom: 0; - border: none; - } - - .post-create__container { - width: 100%; - margin-top: 10px; - .textarea-wrapper { - min-height: 100px; - } - .btn { - margin-bottom: 10px; - } - .custom-textarea { - min-height: 100px; - } - .msg-typing { - @include opacity(0.7); - float: left; - margin-top: 3px; - font-size: 13px; - line-height: 20px; - min-width: 1px; - display: block; - height: 20px; - max-width: 230px; - } - .post-create-footer { - width: 100%; - padding: 5px 0 10px; - } - .post-right-comments-upload-in-progress { - padding: 6px 0; - color: #a8adb7; - margin-right: 10px; - } - } - -} -.post-right-header { - font-size: 1em; - text-transform: uppercase; - color: #999; - font-weight: 400; - color: #888; - height: 39px; - padding: 10px 10px 0 15px; - border-bottom: $border-gray; -} - -.post-right-root-container { - padding: 5px 10px; - border-bottom: $border-gray; -} - -.post-right-root-container { - ul { - padding-left: 0; - margin-bottom: 2px; - } -} - -.post-right-channel__name { - font-weight: 600; - margin: 0 0 10px 0; -} - -.post-right-root-container li { - display: inline; - list-style-type: none; - padding-right: 3px; -} - -.post-right-root-time { - color: #a8adb7; -} - -.post-right-create-comment-container { - padding: 5px; - margin-bottom: 18px; - position: absolute; - bottom: 0; - left: 0; - width: 100%; -} - -.post-right__scroll { - position: relative; - overflow: auto; - -webkit-overflow-scrolling: touch; - @include flex(1 1 auto); - - .preview-container { - margin-top: 5px; - } - -} - -.post-right-comment-time { - color: #a8adb7; -} diff --git a/web/sass-files/sass/partials/_print.scss b/web/sass-files/sass/partials/_print.scss deleted file mode 100644 index 143ec2915..000000000 Binary files a/web/sass-files/sass/partials/_print.scss and /dev/null differ diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss deleted file mode 100644 index 06ce17041..000000000 --- a/web/sass-files/sass/partials/_responsive.scss +++ /dev/null @@ -1,894 +0,0 @@ -@charset "UTF-8"; - -@media screen and (max-width: 1800px) { - .inner__wrap { - &.move--left { - .date-separator, .new-separator { - &.hovered--comment { - &:before, &:after { - background: none; - } - } - } - } - } -} -@media screen and (max-width: 1440px) { - .date-separator, .new-separator { - &.hovered--comment { - &:before, &:after { - background: none !important; - } - } - } -} - -@media screen and (max-width: 1140px) { - .tip-overlay { - &.tip-overlay--chat { - margin: -10px 0 0 -10px; - .arrow { - right: 15px; - left: auto; - } - } - } - .inner__wrap { - &.move--left { - .file-overlay { - font-size: em(18px); - .overlay__circle { - width: 300px; - height: 300px; - margin: -150px 0 0 -150px; - } - .overlay__files { - margin: 60px auto 15px; - width: 150px; - } - } - } - } -} - -@media screen and (max-width: 960px) { - - .sidebar--right { - z-index: 5; - @include translateX(100%); - @include single-transition(all, 0.5s, ease); - - &.move--left { - @include translateX(0); - - .search-bar__container { - padding-right: 8px; - } - - } - - } - - .inner__wrap { - - &.move--left { - margin-right: 0; - - .channel-header__links { - position: relative; - right: auto; - top: auto; - } - - } - - } - -} - -@media screen and (max-width: 768px) { - - .signup-team__container { - font-size: 1em; - } - - .date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after { - background: none !important; - } - - .post { - - .post__dropdown { - line-height: 9px; - text-decoration: none; - width: 20px; - display: inline-block; - text-align: center; - height: 20px; - - &:after { - font-size: 20px; - content: '...'; - top: -3px; - } - - } - - .comment-icon__container { - visibility: visible; - display: none; - - &.icon--show { - display: inline-block; - } - - } - - .post-list__content & { - - &:hover { - background: transparent; - } - - .comment-icon__container { - visibility: visible; - } - - } - - .dropdown, .post__reply { - visibility: visible; - } - - .post__body { - width: calc(100% - 75px); - } - - .post__reply { - margin-right: 20px; - float: right; - - svg { - top: 1px; - } - - } - - &.other--root .post__reply { - - &.post__reply--hide { - visibility: hidden; - } - - } - - .post__header { - - .col__reply { - width: 65px; - } - - .col__name { - pointer-events: none; - - .user-popover { - max-width: 130px; - } - - } - - } - - &.same--root { - - &.same--user { - - .post__time { - display: none; - } - - } - - } - - .post__img { - width: 40px; - - img { - width: 32px; - height: 32px; - } - } - - } - - .post-image__column { - width: 200px; - height: 95px; - } - - .textarea-wrapper { - .textbox-preview-link, .textbox-help-link { - display: none; - } - } - .form-control { - &.min-height { - min-height: 100px; - } - } - .img-div { - max-width: 100%; - } - .tip-div { - left: 15px; - right: auto; - } - .tip-overlay { - &.tip-overlay--chat { - margin-left: 10px; - .arrow { - left: 32px; - } - } - } - .file-details__container { - display: block; - .file-details__preview { - display: block; - width: 100%; - height: 150px; - border-right: none; - border-bottom: 1px solid #ddd; - img { - width: 64px; - height: 64px; - } - } - .file-details { - width: 100%; - height: auto; - } - } - .search-help-popover.visible { - visibility: hidden; - } - .modal-direct-channels { - .member-count { - float: none; - margin-top: 10px; - display: block; - } - } - .file-overlay { - font-size: em(18px); - &.center-file-overlay { - .overlay__indent { - margin-left: 0; - } - } - .overlay__circle { - width: 300px; - height: 300px; - margin: -150px 0 0 -150px; - } - .overlay__files { - margin: 60px auto 15px; - width: 150px; - } - } - .date-separator, .new-separator { - &.hovered--after { - &:before { - background: none; - } - } - &.hovered--before { - &:after { - background: none; - } - } - } - .post-list__timestamp { - display: block; - } - .signup-team__container { - padding: 30px 0; - margin-bottom: 30px; - font-size: 0.9em; - .signup-team__name { - font-size: 2em; - } - .btn.btn-full { - padding-left: 10px; - } - .btn { - .icon, .fa { - margin-right: 6px; - } - } - } - .row--invite { - .col-sm-6 { - padding: 0; - } - } - .modal { - .info__label { - text-align: left; - padding-bottom: 5px; - } - .modal-header { - .modal-action { - margin-top: 10px; - } - button.close { - font-weight: normal; - font-size: 27px; - } - .modal-title { - float: none; - max-width: 90%; - } - .btn { - &.btn-primary { - display: block; - margin: 10px 0 6px; - width: 100%; - float: none; - } - } - } - .settings-modal { - &.display--content { - .modal-header { - display: none; - } - .settings-table { - display: block; - .settings-content { - &.minimize-settings { - display: block; - } - .section-min:hover { - background: none; - } - .no-padding--left { - padding-left: 15px; - } - } - .settings-links { - display: none; - } - .modal-header { - display: block; - position: absolute; - top: 0; - width: 100%; - z-index: 5; - .modal-title { - width: 100%; - text-align: center; - } - } - .user-settings { - .tab-header { - display: none; - } - .divider-dark.first { - display: none; - } - } - } - } - .settings-table { - padding: 0; - .nav { - &.position--top { - top: auto; - } - position: relative; - top: auto; - width: 100%; - } - .settings-content { - .section-edit { - position: absolute; - top: 14px; - right: 0; - padding-right: 0; - .fa { - display: inline-block; - } - } - &.minimize-settings { - padding: 0; - display: none; - .user-settings { - padding: 70px 20px 30px; - } - } - .section-min:hover { - background: none !important; - } - } - .nav { - > li { - > a { - border-top: 1px solid #ddd; - font-size: 1.1em; - line-height: 2.7; - color: #555; - .glyphicon { - margin-left: 7px; - } - } - } - } - } - } - } - .post-create__container { - .post-right__container & { - padding: 0 1em; - .msg-typing { - display: none; - } - } - form { - padding: 0.5em 0; - } - .post-create-footer { - padding: 0 1em; - .msg-typing { - display: none; - } - .control-label { - top: 0; - } - } - .post-create-body { - display: table; - width: 100%; - .post-body__cell { - display: table-cell; - padding-left: 45px; - .sidebar--right & { - padding-left: 0; - } - } - .app__content & { - .btn-file { - width: 45px; - padding: 0; - line-height: 36px; - bottom: -2px; - left: 0; - top: auto; - } - } - .send-button { - display: table-cell; - } - } - } - .preview-container { - margin: 5px 0 0; - .preview-div { - margin-top: 0; - } - .remove-preview { - width: 28px; - height: 28px; - left: auto; - right: 0; - top: 0; - background: #444; - background: rgba(#000, 0.5); - text-align: center; - &:after { - display: none; - } - i { - line-height: 29px; - top: auto; - right: auto; - position: relative; - font-size: 16px; - } - } - } - #navbar { - .navbar-default { - .navbar-header { - float: none; - margin: 0 -15px; - .dropdown__icon { - background: url("../images/dropdown-icon.png"); - width: 4px; - height: 16px; - @include background-size(100% 100%); - display: inline-block; - } - } - .navbar-toggle { - display: block; - } - .navbar-brand { - white-space: nowrap; - } - } - } - body { - &.white { - .inner__wrap { - >.row.content { - margin-bottom: -185px; - } - } - } - } - .footer, .footer-pane, .footer-push { - height: 187px; - } - .footer-pane { - .footer-link { - padding: 0; - width: 100%; - text-align: right; - line-height: 1.7; - &.copyright { - width: 100%; - } - } - } - .search__clear { - display: block; - } - .search-bar__container { - padding: 0; - @include flex(0 0 44px); - background: $primary-color; - color: #fff; - &.focused { - .sidebar__collapse { - @include translateX(-45px); - } - .search__form { - @include translateX(-45px); - padding-left: 55px; - padding-right: 24px; - } - .search__clear { - @include translateX(0px); - } - } - .search__form { - border: none; - @include translateX(0px); - padding: 7px 20px 0 49px; - height: 45px; - position: relative; - @include single-transition(all, 0.2s, linear); - .glyphicon-refresh-animate { - right: 33px; - top: 15px; - color: #aaa; - } - .form-control { - border: none; - padding: 0 10px 0 31px; - background: rgba(black, 0.2); - @include border-radius(3px); - color: #444; - background: #fff; - } - } - } - .sidebar--menu { - @include single-transition(transform, 0.5s, ease); - @include translate3d(290px, 0, 0); - width: 290px; - border: none; - display: block; - &.move--left { - @include translate3d(0, 0, 0); - } - } - .sidebar--left { - @include single-transition(transform, 0.5s, ease); - @include translate3d(-290px, 0, 0); - width: 290px; - border: none; - &.sidebar--padded { - padding-top: 0; - } - &.move--right { - @include translate3d(0, 0, 0); - } - > div { - padding-bottom: 70px; - } - .nav-pills__unread-indicator-bottom { - bottom: 10px; - } - .badge { - top: 13px; - } - .team__header { - @include clearfix; - pointer-events: none; - - .user__name { - display: none; - } - - .team__name { - margin: 10px 0; - } - - .navbar-right { - display: none; - } - - } - .search__form { - display: block; - } - .nav { - li { - &.dropdown.open { - padding-bottom: 25px; - ul { - clear: both; - background: #FFF; - border-radius: 3px; - top: 5px; - position: relative; - li { - a { - line-height: 30px; - } - } - } - } - h4 { - margin: 16px 0 8px; - } - > a { - font-size: 15px; - margin: 0; - line-height: 2.5; - &:hover, &:focus { - background: transparent; - } - &.has-close { - .btn-close { - width: 40px; - text-align: center; - right: 0; - display: block; - @include opacity(0.5); - } - } - } - } - } - } - .sidebar--right { - width: 100%; - right: 0; - @include translate3d(100%, 0, 0); - z-index: 5; - &.move--left { - @include translate3d(0, 0, 0); - } - .sidebar__collapse, .sidebar__search-icon { - display: block; - } - .sidebar--right__close { - display: none; - } - .sidebar-right__body { - height: calc(100% - 44px); - } - } - .search-items-container { - height: calc(100% - 44px); - } - .inner__wrap { - @include single-transition(all, 0.5s, ease); - &.move--right { - @include translate3d(290px, 0, 0); - &:before { - z-index: 9999; - content: ""; - width: 100%; - height: 100%; - left: -15px; - top: 0; - position: absolute; - background: rgba(0, 0, 0, 0.4); - } - } - &.move--left-small { - @include translate3d(-290px, 0, 0); - &:before { - z-index: 9999; - content: ""; - width: 100%; - height: 100%; - right: -15px; - top: 0; - position: absolute; - background: rgba(0, 0, 0, 0.4); - } - } - &.move--left { - margin: 0; - @include translate3d(-100%, 0, 0); - } - } - .modal { - .modal-image { - .image-wrapper { - > div { - font-size: 12px; - min-width: 250px; - } - .modal-close { - @include opacity(1); - } - } - .modal-button-bar { - @include opacity(1); - } - } - } - .app__content { - padding-top: 45px; - margin: 0; - .channel__wrap & { - padding-top: 45px; - } - #channel-header { - display: none; - } - } - - - .channel__wrap { - .row { - &.header { - display: block; - } - } - } - - .post-comments { - padding: 9px 21px 10px 10px !important; - } - - .post-image__column .post__image .file-playback-controls.stop, .image-wrapper > a .file-playback-controls.stop { - @include opacity(1); - } -} -@media screen and (max-width: 640px) { - .access-history__table { - > div { - display: block; - } - .access__report { - margin: 0 0 15px 15px; - } - .access__date { - div { - margin-bottom: 15px; - } - } - } - .activity-log__table { - > div { - display: block; - } - .activity-log__report { - width: 100%; - } - .activity-log__action { - text-align: left; - margin-top: 10px; - } - } -} -@media screen and (max-width: 480px) { - .modal { - .settings-modal { - - .settings-table { - - .security-links { - margin-bottom: 10px; - display: block; - - &:last-child { - margin-bottom: 0; - } - - } - - } - - } - } - - .tip-overlay.tip-overlay--sidebar { - min-height: 350px; - } - .modal { - .modal-body { - max-height: 70%; - } - .settings-modal { - &.display--content { - .modal-body { - max-height: 90%; - } - } - } - } - .member-div { - padding: 8px 0; - .member-drop, .member-role { - position: relative; - margin: 0px 0 0 44px; - padding: 5px 0; - top: 0; - right: 0; - } - .open>.dropdown-menu { - left: 0; - right: auto; - } - } - .sidebar--left { - @include translate3d(-260px, 0, 0); - width: 260px; - } - .inner__wrap { - &.move--right { - @include translate3d(260px, 0, 0); - } - } - .modal { - .modal-image { - .modal-button-bar { - line-height: 30px; - padding: 5px; - } - } - } -} - - -@media (min-width: 992px){ - .modal-lg { - width: 700px; - } -} - -@media screen and (min-width: 768px) { - .second-bar { - display: none; - } -} - -@media screen and (max-height: 640px) { - .signup-team__container { - padding: 30px 0; - margin-bottom: 30px; - font-size: 0.9em; - .signup-team__name { - font-size: 2em; - } - } -} diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss deleted file mode 100644 index aa398e916..000000000 --- a/web/sass-files/sass/partials/_search.scss +++ /dev/null @@ -1,160 +0,0 @@ -@charset "UTF-8"; - -#channel-header .search-bar__container { - padding: 0 9px 0 3px; -} -.search-bar__container { - padding: 12px 8px 0 0; - @include flex(0 0 56px); - .sidebar--right.move--left & { - padding-right: 42px; - } -} -.search__clear { - display: none; - position: absolute; - right: 0; - line-height: 45px; - margin-right: 13px; - @include single-transition(all, 0.2s, linear); - @include translateX(60px); - z-index: 5; - cursor: pointer; -} - -.search-item-snippet { - @include clearfix; - text-overflow: ellipsis; -} - -.sidebar__collapse { - cursor: pointer; - z-index: 5; - fill: #FFF; - position: absolute; - left: 0; - font-size: 35px; - width: 49px; - @include single-transition(all, 0.2s, linear); - @include translateX(0px); - text-align: center; - padding-left: 1px; - line-height: 40px; - display: none; -} -.search-item-snippet { - ul, ol { - padding-left: 20px; - } -} -.sidebar__search-icon { - position: absolute; - top: 15px; - margin-left: 10px; - font-size: 14px; - @include opacity(0.5); - display: none; - color: #777; -} -.search__form { - .search-bar__container & { - margin: 0; - border: 1px solid #DDD; - @include border-radius(2px); - width: 300px; - } - .sidebar--right & { - width: 100%; - } - .search-bar { - height: 40px; - padding-right: 30px; - box-shadow: none; - .search-bar__container & { - height: 30px; - border: none; - } - } - .glyphicon-refresh-animate { - top: 27px; - position: absolute; - right: 27px; - color: #999; - .search-bar__container & { - right: 7px; - top: 8px; - } - } -} - -.search-items-container { - position: relative; - overflow: auto; - -webkit-overflow-scrolling: touch; - @include flex(1 1 auto); - height: calc(100% - 56px); - padding-top: 10px; -} - -.search-results-header { - font-size: 1em; - text-transform: uppercase; - color: #999; - font-weight: 400; - color: #888; - height: 44px; - line-height: 44px; - padding: 0 10px 0 10px; - border-bottom: $border-gray; -} - -.search-item__container { - - .post { - padding: 0 1em 1em; - margin: 0; - - &:first-child { - border: none; - } - - .search-channel__name { - font-weight: 600; - margin: 0 0 10px 0; - } - } - -} - -.search-item__jump { - position: absolute; - right: 0; - top: 0px; - font-size: 13px; - @include opacity(0.8); - - &:hover { - @include opacity(1); - } - -} - -.search-item__comment { - position: absolute; - right: 0; - margin-right: 35px; - top: 0; -} - -.search-item-time { - @include opacity(0.7); - font-size: 0.9em; -} - -.search-results-none { - padding: 10px; -} - -.search-highlight { - background-color: #FFF2BB; -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss deleted file mode 100644 index 6574dd927..000000000 --- a/web/sass-files/sass/partials/_settings.scss +++ /dev/null @@ -1,455 +0,0 @@ -@charset "UTF-8"; - -@import "access-history"; -@import "activity-log"; -@import "webhooks"; - -.user-settings { - min-height:300px; - .table-responsive { - max-width: 560px; - max-height: 300px; - } -} - -.modal { - .settings-modal { - width: 800px; - .modal-back { - width: 50px; - height: 40px; - top: 12px; - font-size: 27px; - font-weight: normal; - line-height: 32px; - position: absolute; - left: 0; - text-align: center; - .fa { - line-height: inherit; - position: absolute; - width: 100%; - height: 100%; - left: 0; - } - } - .modal-body { - padding: 0; - margin: 0 auto; - min-height: calc(100% - 62px); - } - li { - list-style: none; - } - label { - font-weight: 600; - } - - .no-padding--left { - padding-left: 0; - } - .padding-top { - padding-top: 7px; - &.x2 { - padding-top: 14px; - } - &.x3 { - padding-top: 21px; - } - } - .padding-bottom { - padding-bottom: 7px; - &.x2 { - padding-bottom: 14px; - } - &.x3 { - padding-bottom: 21px; - } - .control-label { - font-weight: 600; - &.text-left { - text-align: left; - } - } - } - .profile-img { - width: 128px; - height: 128px; - } - .settings-table { - max-width: 1000px; - margin: 0 auto; - display: table; - table-layout: fixed; - width: 100%; - > div { - display: table-cell; - vertical-align: top; - } - .nav { - position: fixed; - width: 179px; - &.position--top { - top: 57px; - } - } - .security-links { - margin-right: 20px; - .fa { - margin-right: 6px; - } - } - .settings-links { - width: 180px; - } - .settings-content { - padding: 0px 20px 30px; - .modal-header { - display: none; - } - .section-min { - padding: 1em 0; - margin-bottom: 0; - cursor: pointer; - position: relative; - @include clearfix; - &:hover { - background: #f9f9f9; - } - &:hover .fa { - display: inline-block; - } - &:hover .section-edit { - text-decoration: underline; - } - } - - .section-max { - background: rgba(black, 0.05); - padding: 1em 0 1.3em; - margin-bottom: 0; - @include clearfix; - .section-title { - margin-bottom: 10px; - } - } - - .appearance-section { - .theme-group { - .input-group-addon { - padding: 4px 5px; - width: 40px; - } - img { - border: 1px solid rgba(black, 0.15); - width: 29px; - } - } - .group--code { - select { - padding-right: 25px; - } - select::-ms-expand { - display: none; - } - &:before { - pointer-events: none; - position: absolute; - top: 11px; - right: 50px; - z-index: 5; - content: "\f0d7"; - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - select { - -moz-appearance:none; - -webkit-appearance:none; - appearance:none; - } - } - .premade-themes { - margin-bottom: 10px; - .theme-label { - font-weight: 400; - margin-top: 5px; - } - img { - border: 3px solid transparent; - } - .active { - img { - border-color: $primary-color; - } - } - } - - .theme-elements { - padding-left:15px; - - .element { - margin-right:10px; - - &:nth-child(2n) { - margin-right: 0; - } - - } - } - - .theme-elements__header { - margin: 10px 20px 0px 0; - border-bottom: 1px solid #ccc; - padding: 5px 0 10px; - font-size: em(13.5px); - font-weight: 600; - cursor: pointer; - - .fa-minus { - display: none; - } - - &.open { - .fa-minus { - display: inline-block; - } - .fa-plus { - display: none; - } - } - - .header__icon { - float: right; - @include opacity(0.5); - } - - } - - .theme-elements__body { - padding-top: 5px; - display: none; - @include legacy-pie-clearfix; - background: rgba(255, 255, 255, 0.05); - padding: 20px 0 0 20px; - margin: 0 20px 0 0; - @include border-radius(0 0 3px 3px); - } - - .custom-label { - white-space: nowrap; - font-weight: normal; - font-size: 12px; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 0; - } - .input-group-addon { - background: transparent; - } - .radio { - label { - font-weight: 600; - } - } - } - - .section-title { - margin-bottom: 5px; - font-weight: 600; - padding-right: 50px; - } - - .section-edit { - text-align: right; - margin-bottom: 5px; - .fa { - margin-right: 5px; - font-size: 12px; - @include opacity(0.5); - display: none; - &.fa-chevron-down { - top: -1px; - margin-right: 0; - position: relative; - } - } - } - - .section-describe { - @include opacity(0.7); - white-space:pre; - @include clearfix; - text-overflow: ellipsis; - } - - .divider-dark { - border-bottom:1px solid #aaaaaa; - } - - .divider-light { - border-bottom:1px solid lightgrey; - } - - .setting-list { - padding: 0; - list-style-type:none; - } - - .setting-list__hint { - margin-top: 20px; - } - - .mentions-input { - margin-top: 10px; - } - - .setting-list-item { - margin-top:7px; - } - .has-error { - color: #a94442; - } - - .file-status { - font-size: 13px; - margin-top: 8px; - color: #555; - } - - .confirm-import { - padding: 4px 10px; - margin: 10px 0; - } - - } - } - } - .nav-pills { - > li { - margin: 0; - a { - padding: 8px 5px 8px 15px; - border-radius: 0; - color: #777; - } - .glyphicon { - width: 25px; - top: 2px; - } - &:hover { - a { - background-color: rgba(black, 0.1); - } - } - &.active { - a { - color: #111; - background-color: #E1E1E1; - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 5px; - height: 100%; - background: #000; - } - } - a, a:hover, a:focus { - background-color: rgba(black, 0.1); - border-radius: 0; - font-weight: 400; - position: relative; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - } - h3 { - font-size: em(20px); - } -} - -.channel-settings { - padding: 0 10px; -} - -.tab-header { - margin-bottom:1em; -} - -.setting-name { - color:grey; - font-weight:500; -} - -.sel-btn { - margin-right:5px; -} - -.member-div { - border-bottom:1px solid lightgrey; - position:relative; - padding:2px; - margin: 0; - width:100%; - &:first-child { - border-top:1px solid lightgrey; - } - .post-profile-img { - @include border-radius(50px); - margin-right: 8px; - } -} - -.member-role, .member-drop { - .fa { - margin-right: 5px; - @include opacity(0.5); - font-size: 12px; - } - - .member-menu { - top: -50%; - right: 110%; - } -} - -.member-invite { - position:absolute; - right:10px; - top:7px; -} - -.member-menu { - right:0px; - left:auto; -} - -.member-list { - width:100%; - overflow-x:visible; -} - -.member-page { - padding-top:50px; -} - -.active-border { - border:1px solid red; -} - -.color-btn { - margin:4px; -} - -.no-resize { - resize:none; -} diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss deleted file mode 100644 index 44681291c..000000000 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ /dev/null @@ -1,193 +0,0 @@ -@charset "UTF-8"; - -.sidebar--left { - position: absolute; - width: 220px; - left: 0; - height: 100%; - border-right: $border-gray; - padding: 0 0 2em 0; - background: #fafafa; - z-index: 5; - &.sidebar--padded { - padding-top: 44px; - } - .dropdown-menu { - max-height: 400px; - overflow-x: hidden; - overflow-y: auto; - max-width: 200px; - width: 200px; - } - .search__form { - margin: 0; - padding: 1em 1em 0; - display: none; - } - .badge { - background-color: $primary-color; - position: absolute; - right: 10px; - top: 5px; - } - .status { - position:relative; - top:1px; - margin-right: 6px; - width: 12px; - display: inline-block; - svg { - max-height: 14px; - } - i, path, ellipse { - @include opacity(0.5); - &.online--icon, &.away--icon { - @include opacity(1); - } - } - .fa-lock { - margin-left: 1px; - } - .fa-globe { - top: -1px; - position: relative; - } - } - .nav-pills__container { - height: 100%; - position: relative; - overflow: auto; - -webkit-overflow-scrolling: touch; - } - - .nav-pills__unread-indicator { - position: absolute; - left: 0; - right: 0; - width: 72%; - color: #fff; - background: #2389D7; - @include border-radius(50px); - margin: 0 auto; - padding: 3px 0 4px; - font-size: 13.5px; - text-align: center; - z-index: 1; - } - - .nav-pills__unread-indicator-top { - top: 66px; - } - .nav-pills__unread-indicator-bottom { - bottom: 20px; - } - - .nav { - &.nav-stacked { - > li+li { - margin: 0; - } - } - li { - > h4 { - font-size: 1em; - text-transform: uppercase; - margin: 1.1em 0 0.5em; - font-weight: 400; - color: #AAA; - letter-spacing: -0.3px; - padding: 0 10px 0 15px; - } - > a { - padding: 3px 10px 3px 25px; - line-height: 1.5; - border-radius: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - &.has-badge { - padding-right: 30px; - } - &.has-close { - padding-right: 30px; - &:hover { - .btn-close { - display: block; - @include opacity(0.8); - } - } - .btn-close { - font-family: 'Open Sans', sans-serif; - position: absolute; - right: 15px; - top: -1px; - font-size: 20px; - font-weight: 600; - @include opacity(0); - display: none; - &:hover { - @include opacity(1); - } - } - } - &.nav-more { - text-decoration: underline; - } - &.unread-title { - font-weight: 600; - } - } - &.active { - a { - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 5px; - height: 100%; - background: #000; - } - } - a, a:hover, a:focus { - background-color: rgba(black, 0.1); - border-radius: 0; - font-weight: 400; - position: relative; - } - } - } - } - .modal-title { - line-height: 2em; - } - - .add-channel-btn { - float: right; - outline: none; - margin: -2px 0 0 0; - color: #AAA; - padding: 0 5px; - text-decoration: none; - font-size: 22px; - line-height: 18px; - font-weight: 700; - &:hover { - color: #666; - } - } -} - -.channel-loading-gif { - height: 15px; - width: 15px; - margin-top: 2px; -} - -.join-channel-loading-gif { - margin-top: 5px; - margin-left: 10px; - height: 25px; - width: 25px; - -} diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/partials/_sidebar--menu.scss deleted file mode 100644 index 443b7dbb0..000000000 --- a/web/sass-files/sass/partials/_sidebar--menu.scss +++ /dev/null @@ -1,71 +0,0 @@ -@charset "UTF-8"; - -.sidebar--menu { - position: absolute; - width: 220px; - right: 0; - height: 100%; - border-right: $border-gray; - padding: 0 0 2em 0; - background: #fafafa; - display: none; - .nav-pills__container { - padding-top: 5px; - } - .team__header { - display: none; - padding: 0 15px; - @include legacy-pie-clearfix; - a { - color: #fff; - } - .navbar-right { - font-size: 0.85em; - margin: 16px -5px 0; - .dropdown-toggle { - padding: 0 10px; - } - .dropdown-menu { - li a { - padding: 3 20px; - color: #555; - } - } - .dropdown__icon { - background: url("../images/dropdown-icon.png"); - width: 4px; - height: 16px; - @include background-size(100% 100%); - display: inline-block; - } - } - .team__name { - float: left; - line-height: 50px; - font-weight: 600; - font-size: 1.2em; - max-width: 80%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-decoration: none; - } - } - .nav { - > li { - > a { - font-size: 15px; - background: none !important; - color: inherit; - line-height: 40px; - padding: 0 15px; - .fa ,.glyphicon { - width: 25px; - text-align: center; - left: -5px; - position: relative; - } - } - } - } -} diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss deleted file mode 100644 index aaa6f4c92..000000000 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ /dev/null @@ -1,124 +0,0 @@ -@charset "UTF-8"; - -.sidebar--right { - position: fixed; - width: 400px; - height: 100%; - right: 0px; - padding: 0; - background: #fff; - @include translateX(400px); - .post-body { - - img { - max-height: 200px; - } - - } - - .post { - - .post__header { - - .col__name { - - .user-popover { - max-width: 130px; - } - - } - - } - - } - - .sidebar--right__content { - height: 100%; - @include display-flex; - @include flex-direction(column); - } - - .sidebar--right__back { - color: inherit; - @include opacity(0.8); - width: 30px; - text-align: center; - margin: 0 0 0 -14px; - font-size: 13px; - display: inline-block; - } - .sidebar-right__body { - @include flex(1 1 auto); - border-left: $border-gray; - border-top: $border-gray; - @include display-flex; - @include flex-direction(column); - height: calc(100% - 56px); - @include border-radius(2px 0 0 0); - } - .sidebar__overlay { - width: 100%; - height: 100%; - background-color: yellow; - @include opacity(0.1); - position: absolute; - z-index: 5; - pointer-events: none; - } - .input-group { - word-break: break-word; - } - .sidebar--right__close { - margin: 11px 0 0 0; - width: 22px; - height: 22px; - opacity: 0.5; - font-size: 22px; - line-height: 0; - background: none; - float: right; - outline: none; - border: none; - @include single-transition(all, 0.2s, ease-in); - &:hover, &:active { - opacity: 0.8; - } - i { - position: relative; - top: -2px; - } - } - .sidebar--right__header { - font-size: 1em; - text-transform: uppercase; - color: inherit; - height: 44px; - padding: 0 1em; - line-height: 44px; - @include flex(0 0 44px); - border-bottom: $border-gray; - } - .sidebar--right__subheader { - font-size: 1em; - padding: 1em 1em 0; - h4 { - font-size: 1em; - } - ul { - @include opacity(0.7); - padding: 10px 0 0 30px; - } - li { - font-size: 0.95em; - padding-bottom: 10px; - } - } - - .suggestion-content { - max-height: 120px; - } -} - -.sidebar-right-container { - height: 100%; -} diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss deleted file mode 100644 index 6d396d21c..000000000 --- a/web/sass-files/sass/partials/_signup.scss +++ /dev/null @@ -1,390 +0,0 @@ -@charset "UTF-8"; - -.signup-header { - width:100%; - line-height: 33px; - padding: 0 1em 0.2em; - background: #EEE; - - .fa { - margin-right: 5px; - } - -} -.signup-team__container { - padding: 100px 0px 50px 0px; - max-width: 380px; - margin: 0 auto; - position: relative; - &.padding--less { - padding-top: 50px; - } - .form-control:focus { - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)); - } - - h1, h2, h3, h4, h5, h6, p { - line-height: 1.3; - } - - h1 { - font-weight: 600; - } - - h2 { - font-weight: 600; - margin-bottom: 0.8em; - letter-spacing: -0.5px; - font-size: em(30px); - } - - h3 { - font-weight: 600; - margin: 0 0 1.3em 0; - font-size: 1.5em; - } - - h4 { - font-size: em(20px); - font-weight: 600; - margin-bottom: 1em; - } - - h5 { - font-size: em(16px); - } - - hr { - margin: 2em 0; - } - - p { - color: #555; - line-height: 1.5; - margin-bottom: 1em; - } - - .input-group { - &.input-group--limit { - table-layout: fixed; - width: 100%; - .tooltip-inner { - word-wrap: break-word; - } - .form-control { - text-align: left; - display: table-cell; - width: 100%; - } - .input-group-addon { - text-align: left; - width: 50%; - display: table-cell; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - .inner__content { - padding: 0 1rem; - margin: 30px 0 20px; - } - - .block--gray { - background: #f2f2f2; - display: inline-block; - padding: 0.85em 1.2em; - font-weight: 600; - @include border-radius(3px); - } - - form { - margin-bottom: 0.8em; - } - - .signup-team-confirm__container { - padding: 100px 0px 100px 0px; - } - - .signup-team-logo { - display: none; - width: 210px; - margin: 0 0 2em 0; - } - - .signup-team-login { - padding-bottom: 10px; - font-weight: 600; - } - - .signup-team__name { - margin: 0.5em 0 0; - font-size: 2.2em; - font-weight: 600; - padding-left: 1rem; - } - - .signup-team__subdomain { - margin: 0.2em 0 1.2em; - font-size: 1.5em; - padding-left: 1rem; - font-weight: 300; - text-transform: uppercase; - } - - .form-control { - height: em(38px); - } - - .or__container { - height: 1px; - background: #dddddd; - text-align: left; - margin: 2em 0; - span { - width: 40px; - top: -10px; - position: relative; - font-size: 1.14286em; - line-height: 20px; - font-weight: 600; - background: #fff; - display: inline-block; - text-align: center; - } - } - - ul { - margin-bottom: 0; - padding-left: 18px; - } - - .signup__email-container { - margin-left: 1rem; - } - - .btn { - font-size: 1em; - padding: em(7px) em(15px); - font-weight: 600; - margin-right: 5px; - .fa { - font-size: 17px; - margin-right: 8px; - } - .icon { - width: 18px; - height: 18px; - margin-right: 8px; - @include background-size(100% 100%); - display: inline-block; - } - &.btn-custom-login { - display: block; - min-width: 200px; - width: 200px; - padding: 0 1em; - margin: 1em 1rem; - height: 40px; - line-height: 34px; - color: #fff; - @include border-radius(2px); - &.gitlab { - background: #554488; - &:hover { - background: darken(#554488, 10%); - } - span { - vertical-align: middle; - } - .icon { - background-image: url("../images/gitlabLogo.png"); - } - } - &.google { - background: #dd4b39; - &:hover { - background: darken(#dd4b39, 10%); - } - span { - vertical-align: middle; - } - .icon { - background-image: url("../images/googleLogo.png"); - } - } - &.ldap { - background: #dd4b39; - &:hover { - background: darken(#dd4b39, 10%); - } - span { - vertical-align: middle; - } - } - &.email { - background: #2389D7; - &:hover { - background: darken(#2389D7, 10%); - } - span { - vertical-align: middle; - } - } - &.btn-full { - width: 100%; - text-align: left; - padding-left: 35px; - } - } - &.btn-default { - color: #444; - } - .glyphicon { - &.glyphicon-ok, &.glyphicon-refresh { - margin-right: 0.5em; - left: -2px; - font-size: 0.9em; - } - &.glyphicon-chevron-right { - font-size: 0.8em; - right: -2px; - top: 0px; - } - &.glyphicon-chevron-left { - font-size: 0.8em; - left: -2px; - top: 0px; - } - } - } - - .has-error { - .control-label { - background: #f2f2f2; - padding: 0.7em 1em; - @include border-radius(3px); - margin: 1em 0 0; - font-size: 14px; - font-weight: normal; - color: #999; - width: 100%; - &:before { - @extend .fa; - content: "\f071"; - margin-right: 4px; - color: #aaa; - } - } - } - - .reset-form { - @include border-radius(3px); - position: relative; - font-size: 0.95em; - p { - color: inherit; - } - } - - // Modifier Styles - h1, h2, h3, h4, h5, h6 { - &.margin--top-none { - margin-top: 0; - } - &.margin--bottom-none { - margin-bottom: 0; - } - &.margin--less { - margin-bottom: 0.3em; - } - &.sub-heading { - font-weight: 400; - margin-bottom: 0; - } - &.color--light { - font-weight: 300; - } - } - - p { - &.margin--extra { - margin-bottom: 1.5em; - } - &.margin--less { - margin-bottom: 0.3em; - } - .black, &.black { - color: #000; - } - } - - .color--light { - color: #777; - } - - .margin--extra { - margin-top: 3em; - } - - .margin--extra-2x { - margin-top: 6em; - } - -} - -.signup-team-all { - margin: 0 0 20px; - border: 1px solid #ddd; - @include border-radius(2px); - .signup-team-dir { - background: #fafafa; - border-top: 1px solid #d5d5d5; - &:first-child { - border: none; - } - a { - color: inherit; - display: block; - padding: 0 15px; - line-height: 3.5em; - height: 3.5em; - font-size: 1.1em; - } - } - .signup-team-dir__name { - white-space: nowrap; - float: left; - overflow: hidden; - text-overflow: ellipsis; - width: 90%; - } - .signup-team-dir__arrow { - float: right; - font-size: 0.9em; - color: #999; - line-height: 3.5em; - } -} - - -.authorize-box { - margin: 100px auto; - width:500px; - height:280px; - border: 1px solid black; -} - -.authorize-inner { - padding: 20px; -} - -.authorize-btn { - margin-right: 6px; -} - -.verify_panel { - margin: 60px auto auto auto; - max-width: 380px; -} diff --git a/web/sass-files/sass/partials/_statistics.scss b/web/sass-files/sass/partials/_statistics.scss deleted file mode 100644 index f86740270..000000000 --- a/web/sass-files/sass/partials/_statistics.scss +++ /dev/null @@ -1,87 +0,0 @@ -@charset "UTF-8"; - -.team_statistics { - .total-count { - margin: 1em 0; - text-align: center; - background: #fff; - border: 1px solid #ddd; - width: 100%; - @include border-radius(3px); - - .title { - font-weight: 400; - padding: 7px 10px; - border-bottom: 1px solid #ddd; - text-align: left; - font-size: 13px; - - .fa { - float: right; - margin: 0px 0 0; - color: #555; - font-size: 16px; - } - - } - - .content { - font-size: 30px; - font-weight: 600; - color: #555; - padding: 0.3em 0 0.35em; - overflow: auto; - } - - } - - .total-count--day { - width: 760px; - height: 275px; - border: 1px solid #ddd; - padding: 5px 10px 10px 10px; - margin: 10px 10px 10px 10px; - background: #fff; - clear: both; - - > div { - font-size: 18px; - font-weight: 300; - } - } - - .recent-active-users { - - table { - width: 100%; - table-layout: fixed; - } - - .content { - max-height: 400px; - overflow: auto; - padding: 0; - } - - tr { - &:first-child { - td { - border-top: none; - } - } - td { - font-weight: 400; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 13px; - border-left: 1px solid #ddd; - border-top: 1px solid #ddd; - padding: 5px 5px 6px; - @include clearfix; - &:first-child { - border-left: none; - } - } - } - } -} diff --git a/web/sass-files/sass/partials/_suggestion_list.scss b/web/sass-files/sass/partials/_suggestion_list.scss deleted file mode 100644 index 28c113c6d..000000000 --- a/web/sass-files/sass/partials/_suggestion_list.scss +++ /dev/null @@ -1,67 +0,0 @@ -@charset "UTF-8"; - -.suggestion-list { - width: 100%; - z-index: 100; - @extend %popover-box-shadow; -} - -.suggestion-list--top { - position: absolute; -} - -.suggestion-content { - width: 100%; - max-height: 292px; - background-color: #fff; - border: $border-gray; - overflow-x: hidden; - overflow-y: scroll; -} - -.suggestion-content--top { - position: absolute; - bottom: 0; -} - -.suggestion--selected { - // set by theme code -} - -.command-name { - position: relative; - width: 100%; - line-height: 24px; - padding: 5px 10px 8px; - z-index: 101; - font-size: 0.95em; - border-bottom: 1px solid #ddd; - - .command__desc { - margin-left: 5px; - @include opacity(0.5); - line-height: normal; - } -} - -.command-desc { - color: #a7a8ab; -} - -.emoticon-suggestion { - @include clearfix; - width: 100%; - height: 30px; - cursor: pointer; - font-size: 13px; - line-height: 30px; -} - -.emoticon-suggestion__image { - width: 20px; - height: 20px; - margin: 6px 6px 0 5px; - padding: 0; - text-align: center; - vertical-align: top; -} diff --git a/web/sass-files/sass/partials/_tooltips.scss b/web/sass-files/sass/partials/_tooltips.scss deleted file mode 100644 index c2de3c590..000000000 --- a/web/sass-files/sass/partials/_tooltips.scss +++ /dev/null @@ -1,7 +0,0 @@ -@charset "UTF-8"; - -#recentMentionsTooltip { - .tooltip-arrow { - margin-left: 10px; - } -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss deleted file mode 100644 index b21a2b7c3..000000000 --- a/web/sass-files/sass/partials/_tutorial.scss +++ /dev/null @@ -1,212 +0,0 @@ -@charset "UTF-8"; - -.tip-backdrop { - background: rgba(black, 0.5); - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 999; -} - -.tip-overlay { - width: 350px; - max-width: 90%; - position:absolute; - background-color: #fff; - @include border-radius(3px); - padding: 20px; - z-index: 1000; - - .arrow { - border-width: 10px; - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - - &.tip-overlay--sidebar { - max-width: 75%; - margin: 50px 0 0 10px; - min-height: 330px; - .tutorial__footer { - position: absolute; - width: 100%; - bottom: 20px; - left: 0; - padding: 0 20px; - } - .arrow { - top: 80px; - left: -10px; - margin-top: -10px; - border-left-width: 0; - border-right-color: #fff; - } - } - - &.tip-overlay--header { - margin: 10px 0 0 10px; - .arrow { - top: 15px; - left: -10px; - border-left-width: 0; - border-right-color: #fff; - } - } - - &.tip-overlay--chat { - margin-top: -10px; - .arrow { - left: 50%; - margin-left: -10px; - border-bottom-width: 0; - border-top-color: #fff; - bottom: -10px; - } - } - - h4 { - font-size: em(16px); - font-weight: 600; - margin: 5px 0 15px; - } - - p { - font-size: 13px; - line-height: 1.6; - - strong { - font-weight: 600; - } - - } - - .btn { - background: #cccccc; - color: #fff; - @include border-radius(3px); - border: none; - margin: 10px 0; - - &:hover, &:active, &:focus { - color: #fff; - border: none; - background: #bbb; - } - - } - - .tip-opt { - font-size: 12px; - - span { - @include opacity(0.9); - } - - } - - .tutorial__circles { - margin: 1.5em 0px -1.7em -4px; - - .circle { - width: 7px; - height: 7px; - margin: 0 4px; - } - - } - -} - -.tip-button { - z-index: 998; - right: -10px; - top: -10px; - position: relative; - cursor: pointer; -} - -.tip-div { - position:absolute; - top:0px; - right:0px; - - &.tip-overlay--header { - top: 21px; - right: 2px; - .tip-button { - @include opacity(0.8); - } - } - - &.tip-overlay--sidebar { - left: 0; - @include opacity(0.8); - top: -9px; - } - -} - -.tutorial-steps__container { - text-align: center; - width: 100%; - display: table; - height: 100%; - .tutorial__content { - display: table-cell; - vertical-align: middle; - padding-bottom: 100px; - padding: 20px 40px 40px; - .tutorial__steps { - position: relative; - max-width: 310px; - min-height: 370px; - margin-bottom: 50px; - text-align: left; - display: inline-block; - } - } - .tutorial__footer { - position: absolute; - bottom: 0; - } - h1 { - font-size: em(40px); - margin: -20px 0 30px; - font-weight: 600; - } - h3 { - font-size: em(24px); - margin-bottom: 30px; - font-weight: 600; - } - .tutorial__circles { - position: absolute; - bottom: 40px; - } - .tutorial-skip { - margin-left: 13px; - } -} - -.tutorial__circles { - margin: 2em 0; - .circle { - width: 9px; - height: 9px; - @include border-radius(9px); - @include opacity(0.2); - background: #000; - display: inline-block; - margin: 0 5px; - &.active { - background: $primary-color; - @include opacity(1); - } - } -} diff --git a/web/sass-files/sass/partials/_variables.scss b/web/sass-files/sass/partials/_variables.scss deleted file mode 100644 index 514be2e8b..000000000 --- a/web/sass-files/sass/partials/_variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -@charset "UTF-8"; - -@function em($pixels, $context: 14px) { - @return #{$pixels/$context}em -} - -// Color Variables -$primary-color: #2389D7; -$primary-color--hover: darken(#2389D7, 5%); -$body-bg: #e9e9e9; -$header-bg: #f9f9f9; -$border-gray: 1px solid #ddd; - -%popover-box-shadow { - @include box-shadow(rgba(black, 0.175) 1px -3px 12px); -} diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss deleted file mode 100644 index 43f30ce84..000000000 --- a/web/sass-files/sass/partials/_videos.scss +++ /dev/null @@ -1,66 +0,0 @@ -@charset "UTF-8"; - -.video-div { - position:relative; - max-width: 480px; - margin-bottom: 8px; - .video-thumbnail { - max-width: 100%; - height: auto; - } - .block { - background-color:rgba(0,0,0,0.5); - border-radius:10px; - position:absolute; - top: 50%; - left: 50%; - margin-top: -100px; - width: 200px; - margin: -75px 0 0 -100px; - height: 150px; - } -} - -.video-type { - @include opacity(0.8); - font-size:15px; - margin:0px; - padding:0px; -} - -.video-title { - font-size:15px; - margin-top:3px; -} -.play-button { - width:100px; - height:100px; - position:absolute; - top:26px; - right:51px; - border:4px solid; - border-color:rgba(255,255,255,0.4); - border-radius:14px; -} -.play-button span { - position:absolute; - top:10px; - left:20px; - width:0; - height:0; - border-top:36px solid transparent; - border-bottom:36px solid transparent; - border-left:60px solid rgba(255,255,255,0.4); -} - -.img-div { - -moz-force-broken-image-icon: 1; - position:relative; - max-width: 450px; - max-height: 500px; - margin-bottom: 8px; - border-radius:5px; - &.placeholder { - height: 500px; - } -} diff --git a/web/sass-files/sass/partials/_webhooks.scss b/web/sass-files/sass/partials/_webhooks.scss deleted file mode 100644 index 4b0215a9e..000000000 --- a/web/sass-files/sass/partials/_webhooks.scss +++ /dev/null @@ -1,33 +0,0 @@ -@charset "UTF-8"; - -.webhooks__container { - background: rgba(black, 0.1); - border: 1px solid; - @include border-radius(3px); - padding: 0 13px 15px; - margin-top: 10px; -} -.webhook__item { - font-size: 13px; - position: relative; - &:last-child { - .divider-light:last-child { - display: none; - } - } - .webhook__remove { - position: absolute; - right: -7px; - top: 8px; - width: 30px; - height: 30px; - font-size: 22px; - font-weight: bold; - text-align: center; - text-decoration: none; - color: #E05F5D; - } - .webhook__url { - padding-right: 20px; - } -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_welcome.scss b/web/sass-files/sass/partials/_welcome.scss deleted file mode 100644 index 0be43d29c..000000000 --- a/web/sass-files/sass/partials/_welcome.scss +++ /dev/null @@ -1,15 +0,0 @@ -@charset "UTF-8"; - -.welcome-info { - max-width: 550px; - margin-top: 50px; - margin-left: 25px; - h1 { - font-size: 200%; - margin-bottom: 20px; - } - p { - font-size: 125%; - margin-top: 12px; - } -} \ No newline at end of file diff --git a/web/sass-files/sass/responsive/_desktop.scss b/web/sass-files/sass/responsive/_desktop.scss new file mode 100644 index 000000000..dcabb807f --- /dev/null +++ b/web/sass-files/sass/responsive/_desktop.scss @@ -0,0 +1,65 @@ +@charset 'UTF-8'; + +@media screen and (max-width: 1800px) { + .inner-wrap { + &.move--left { + .date-separator, + .new-separator { + &.hovered--comment { + &:before, + &:after { + background: none; + } + } + } + } + } +} + +@media screen and (max-width: 1440px) { + .date-separator, + .new-separator { + &.hovered--comment { + &:before, + &:after { + background: none !important; + } + } + } +} + +@media screen and (max-width: 1140px) { + .tip-overlay { + &.tip-overlay--chat { + margin: -10px 0 0 -10px; + .arrow { + right: 15px; + left: auto; + } + } + } + .inner-wrap { + &.move--left { + .file-overlay { + font-size: em(18px); + + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } + } + } + } +} + +@media (min-width: 992px) { + .modal-lg { + width: 700px; + } +} \ No newline at end of file diff --git a/web/sass-files/sass/responsive/_mobile.scss b/web/sass-files/sass/responsive/_mobile.scss new file mode 100644 index 000000000..a452cb420 --- /dev/null +++ b/web/sass-files/sass/responsive/_mobile.scss @@ -0,0 +1,901 @@ +@charset 'UTF-8'; + +@media screen and (max-width: 768px) { + .signup-team__container { + font-size: 1em; + } + + .date-separator.hovered--before:after, + .date-separator.hovered--after:before, + .new-separator.hovered--after:before, + .new-separator.hovered--before:after { + background: none !important; + } + + .post { + .post__dropdown { + line-height: 9px; + text-decoration: none; + width: 20px; + display: inline-block; + text-align: center; + height: 20px; + + &:after { + font-size: 20px; + content: '...'; + top: -3px; + } + } + + .comment-icon__container { + visibility: visible; + display: none; + + &.icon--show { + display: inline-block; + } + } + + .post-list__content & { + &:hover { + background: transparent; + } + + .comment-icon__container { + visibility: visible; + } + } + + .dropdown, + .post__reply { + visibility: visible; + } + + .post__body { + width: calc(100% - 75px); + } + + .post__reply { + margin-right: 20px; + float: right; + + svg { + top: 1px; + } + } + + &.other--root .post__reply { + &.post__reply--hide { + visibility: hidden; + } + } + + .post__header { + .col__reply { + width: 65px; + } + + .col__name { + pointer-events: none; + + .user-popover { + max-width: 130px; + } + } + } + + &.same--root { + &.same--user { + .post__time { + display: none; + } + } + } + + .post__img { + width: 40px; + + img { + width: 32px; + height: 32px; + } + } + } + + .post-image__column { + width: 200px; + height: 95px; + } + + .textarea-wrapper { + .textbox-preview-link, + .textbox-help-link { + display: none; + } + } + .form-control { + &.min-height { + min-height: 100px; + } + } + + .img-div { + max-width: 100%; + } + + .tip-div { + left: 15px; + right: auto; + } + + .tip-overlay { + &.tip-overlay--chat { + margin-left: 10px; + .arrow { + left: 32px; + } + } + } + + .file-details__container { + display: block; + + .file-details__preview { + display: block; + width: 100%; + height: 150px; + border-right: none; + border-bottom: 1px solid #ddd; + img { + width: 64px; + height: 64px; + } + } + + .file-details { + width: 100%; + height: auto; + } + } + + .search-help-popover.visible { + visibility: hidden; + } + + .modal-direct-channels { + .member-count { + float: none; + margin-top: 10px; + display: block; + } + } + + .file-overlay { + font-size: em(18px); + + &.center-file-overlay { + .overlay__indent { + margin-left: 0; + } + } + + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } + } + + .date-separator, + .new-separator { + &.hovered--after { + &:before { + background: none; + } + } + + &.hovered--before { + &:after { + background: none; + } + } + } + + .post-list__timestamp { + display: block; + } + + .signup-team__container { + padding: 30px 0; + margin-bottom: 30px; + font-size: .9em; + + .signup-team__name { + font-size: 2em; + } + + .btn.btn-full { + padding-left: 10px; + } + + .btn { + .icon, + .fa { + margin-right: 6px; + } + } + } + + .row--invite { + .col-sm-6 { + padding: 0; + } + } + + .modal { + .info__label { + text-align: left; + padding-bottom: 5px; + } + + .modal-header { + .modal-action { + margin-top: 10px; + } + + button.close { + font-weight: normal; + font-size: 27px; + } + + .modal-title { + float: none; + max-width: 90%; + } + + .btn { + &.btn-primary { + display: block; + margin: 10px 0 6px; + width: 100%; + float: none; + } + } + } + + .settings-modal { + &.display--content { + .modal-header { + display: none; + } + + .settings-table { + display: block; + + .settings-content { + &.minimize-settings { + display: block; + } + + .section-min:hover { + background: none; + } + + .no-padding--left { + padding-left: 15px; + } + } + + .settings-links { + display: none; + } + + .modal-header { + display: block; + position: absolute; + top: 0; + width: 100%; + z-index: 5; + + .modal-title { + width: 100%; + text-align: center; + } + } + + .user-settings { + .tab-header { + display: none; + } + + .divider-dark.first { + display: none; + } + } + } + } + + .settings-table { + padding: 0; + .nav { + position: relative; + top: auto; + width: 100%; + + &.position--top { + top: auto; + } + } + + .settings-content { + .section-edit { + position: absolute; + top: 14px; + right: 0; + padding-right: 0; + .fa { + display: inline-block; + } + } + + &.minimize-settings { + padding: 0; + display: none; + .user-settings { + padding: 70px 20px 30px; + } + } + + .section-min:hover { + background: none !important; + } + } + + .nav { + > li { + > a { + border-top: 1px solid #ddd; + font-size: 1.1em; + line-height: 2.7; + color: #555; + + .glyphicon { + margin-left: 7px; + } + } + } + } + } + } + } + + .post-create__container { + .post-right__container & { + padding: 0 1em; + + .msg-typing { + display: none; + } + } + + form { + padding: .5em 0; + } + + .post-create-footer { + padding: 0 1em; + + .msg-typing { + display: none; + } + + .control-label { + top: 0; + } + } + + .post-create-body { + display: table; + width: 100%; + + .post-body__cell { + display: table-cell; + padding-left: 45px; + .sidebar--right & { + padding-left: 0; + } + } + + .app__content & { + .btn-file { + width: 45px; + padding: 0; + line-height: 36px; + bottom: -2px; + left: 0; + top: auto; + } + } + + .send-button { + display: table-cell; + } + } + } + + .file-preview__container { + margin: 5px 0 0; + } + + .file-preview { + margin-top: 0; + } + + .file-preview__remove { + width: 28px; + height: 28px; + left: auto; + right: 0; + top: 0; + background: #444; + background: rgba(#000, .5); + text-align: center; + + &:after { + display: none; + } + + i { + line-height: 29px; + top: auto; + right: auto; + position: relative; + font-size: 16px; + } + } + + #navbar { + .navbar-default { + .navbar-header { + float: none; + margin: 0 -15px; + + .dropdown__icon { + background: url('../images/dropdown-icon.png'); + width: 4px; + height: 16px; + @include background-size(100% 100%); + display: inline-block; + } + } + + .navbar-toggle { + display: block; + } + + .navbar-brand { + white-space: nowrap; + } + } + } + + body { + &.white { + .inner-wrap { + > .row.content { + margin-bottom: -185px; + } + } + } + } + + .footer, + .footer-pane, + .footer-push { + height: 187px; + } + + .footer-pane { + .footer-link { + padding: 0; + width: 100%; + text-align: right; + line-height: 1.7; + &.copyright { + width: 100%; + } + } + } + + .search__clear { + display: block; + } + + .search-bar__container { + padding: 0; + @include flex(0 0 44px); + background: $color--primary; + color: #fff; + + &.focused { + .sidebar__collapse { + @include translateX(-45px); + } + + .search__form { + @include translateX(-45px); + padding-left: 55px; + padding-right: 24px; + } + + .search__clear { + @include translateX(0px); + } + } + .search__form { + border: none; + @include translateX(0px); + padding: 7px 20px 0 49px; + height: 45px; + position: relative; + @include single-transition(all, .2s, linear); + + .glyphicon-refresh-animate { + right: 33px; + top: 15px; + color: #fff; + color: rgba(255,255,255,.5); + } + + .form-control { + border: none; + padding: 0 10px 0 31px; + background: rgba(black, .2); + @include border-radius(3px); + color: #444; + background: #fff; + } + } + } + .sidebar--menu { + @include single-transition(transform, .5s, ease); + @include translate3d(290px, 0, 0); + width: 290px; + border: none; + display: block; + + &.move--left { + @include translate3d(0, 0, 0); + } + } + + .sidebar--left { + @include single-transition(transform, .5s, ease); + @include translate3d(-290px, 0, 0); + width: 290px; + border: none; + &.sidebar--padded { + padding-top: 0; + } + + &.move--right { + @include translate3d(0, 0, 0); + } + + > div { + padding-bottom: 70px; + } + + .nav-pills__unread-indicator-bottom { + bottom: 10px; + } + + .badge { + top: 13px; + } + + .team__header { + @include clearfix; + pointer-events: none; + + .user__name { + display: none; + } + + .team__name { + margin: 10px 0; + } + + .navbar-right { + display: none; + } + } + + .search__form { + display: block; + } + + .nav { + li { + &.dropdown.open { + padding-bottom: 25px; + + ul { + clear: both; + background: #fff; + border-radius: 3px; + top: 5px; + position: relative; + + li { + a { + line-height: 30px; + } + } + } + } + + h4 { + margin: 16px 0 8px; + } + + > a { + font-size: 15px; + margin: 0; + line-height: 2.5; + + &:hover, + &:focus { + background: transparent; + } + + &.has-close { + .btn-close { + width: 40px; + text-align: center; + right: 0; + display: block; + @include opacity(.5); + } + } + } + } + } + } + + .sidebar--right { + width: 100%; + right: 0; + @include translate3d(100%, 0, 0); + z-index: 5; + + &.move--left { + @include translate3d(0, 0, 0); + } + + .sidebar__collapse, + .sidebar__search-icon { + display: block; + } + + .sidebar--right__close { + display: none; + } + + .sidebar-right__body { + height: calc(100% - 44px); + } + } + + .search-items-container { + height: calc(100% - 44px); + } + + .inner-wrap { + @include single-transition(all, .5s, ease); + + &.move--right { + @include translate3d(290px, 0, 0); + + &:before { + z-index: 9999; + content: ''; + width: 100%; + height: 100%; + left: -15px; + top: 0; + position: absolute; + background: rgba(0, 0, 0, .4); + } + } + + &.move--left-small { + @include translate3d(-290px, 0, 0); + &:before { + z-index: 9999; + content: ''; + width: 100%; + height: 100%; + right: -15px; + top: 0; + position: absolute; + background: rgba(0, 0, 0, .4); + } + } + + &.move--left { + margin: 0; + @include translate3d(-100%, 0, 0); + } + } + + .modal { + .modal-image { + .image-wrapper { + > div { + font-size: 12px; + min-width: 250px; + } + + .modal-close { + @include opacity(1); + } + } + + .modal-button-bar { + @include opacity(1); + } + } + } + + .app__content { + padding-top: 45px; + margin: 0; + .channel__wrap & { + padding-top: 45px; + } + #channel-header { + display: none; + } + } + + .channel__wrap { + .row { + &.header { + display: block; + } + } + } + + .post-comments { + padding: 9px 21px 10px 10px !important; + } + + .post-image__column .post-image .file-playback__controls.stop, + .image-wrapper > a .file-playback__controls.stop { + @include opacity(1); + } +} + +@media screen and (max-width: 640px) { + .access-history__table { + > div { + display: block; + } + + .access__report { + margin: 0 0 15px 15px; + } + + .access__date { + div { + margin-bottom: 15px; + } + } + } + .activity-log__table { + > div { + display: block; + } + + .activity-log__report { + width: 100%; + } + + .activity-log__action { + text-align: left; + margin-top: 10px; + } + } +} + +@media screen and (max-width: 480px) { + .modal { + .settings-modal { + .settings-table { + .security-links { + margin-bottom: 10px; + display: block; + + &:last-child { + margin-bottom: 0; + } + } + } + } + } + + .tip-overlay.tip-overlay--sidebar { + min-height: 350px; + } + + .modal { + .modal-body { + max-height: 70%; + } + + .settings-modal { + &.display--content { + .modal-body { + max-height: 90%; + } + } + } + } + + .member-div { + padding: 8px 0; + + .member-drop, + .member-role { + position: relative; + margin: 0px 0 0 44px; + padding: 5px 0; + top: 0; + right: 0; + } + + .open > .dropdown-menu { + left: 0; + right: auto; + } + } + + .sidebar--left { + @include translate3d(-260px, 0, 0); + width: 260px; + } + + .inner-wrap { + &.move--right { + @include translate3d(260px, 0, 0); + } + } + + .modal { + .modal-image { + .modal-button-bar { + line-height: 30px; + padding: 5px; + } + } + } +} + +@media screen and (max-height: 640px) { + .signup-team__container { + padding: 30px 0; + margin-bottom: 30px; + font-size: .9em; + + .signup-team__name { + font-size: 2em; + } + } +} diff --git a/web/sass-files/sass/responsive/_module.scss b/web/sass-files/sass/responsive/_module.scss new file mode 100644 index 000000000..a799c145e --- /dev/null +++ b/web/sass-files/sass/responsive/_module.scss @@ -0,0 +1,4 @@ +@charset 'UTF-8'; +@import 'desktop'; +@import 'tablet'; +@import 'mobile'; diff --git a/web/sass-files/sass/responsive/_tablet.scss b/web/sass-files/sass/responsive/_tablet.scss new file mode 100644 index 000000000..14641cfa5 --- /dev/null +++ b/web/sass-files/sass/responsive/_tablet.scss @@ -0,0 +1,35 @@ +@charset 'UTF-8'; + +@media screen and (max-width: 960px) { + .sidebar--right { + z-index: 5; + @include translateX(100%); + @include single-transition(all, .5s, ease); + + &.move--left { + @include translateX(0); + + .search-bar__container { + padding-right: 8px; + } + } + } + + .inner-wrap { + &.move--left { + margin-right: 0; + + .channel-header__links { + position: relative; + right: auto; + top: auto; + } + } + } +} + +@media screen and (min-width: 768px) { + .second-bar { + display: none; + } +} \ No newline at end of file diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index 7bf3574d2..4a49e439e 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -5,55 +5,14 @@ * Import this file using the following HTML or equivalent: * */ -// Base Css @import "compass/utilities"; @import "compass/css3"; -@import "partials/variables"; -@import "partials/perfect-scrollbar"; -@import "partials/font-awesome"; -@import "partials/base"; -@import "partials/colorpicker"; -// Channel Css -@import "partials/headers"; -@import "partials/footer"; -@import "partials/content"; -@import "partials/popover"; -@import "partials/post"; -@import "partials/post_right"; -@import "partials/navbar"; -@import "partials/search"; -@import "partials/sidebar--left"; -@import "partials/sidebar--right"; -@import "partials/sidebar--menu"; -@import "partials/admin-console"; -@import "partials/signup"; -@import "partials/files"; -@import "partials/videos"; -@import "partials/settings"; -@import "partials/modal"; -@import "partials/forms"; -@import "partials/mentions"; -@import "partials/error"; -@import "partials/error-bar"; -@import "partials/loading"; -@import "partials/get-link"; -@import "partials/markdown"; -@import "partials/tutorial"; -@import "partials/statistics"; -@import "partials/suggestion_list"; - -// Elements -@import "partials/tooltips"; - -// Responsive Css -@import "partials/responsive"; - -// Docs Css -@import "partials/docs"; - -// Standalone Css -@import "partials/oauth"; - -// Print -@import "partials/print"; \ No newline at end of file +// styles.scss +@import 'vendors/module'; +@import 'utils/module'; +@import 'base/module'; +@import 'pages/module'; +@import 'components/module'; +@import 'layout/module'; +@import 'responsive/module'; \ No newline at end of file diff --git a/web/sass-files/sass/utils/_animations.scss b/web/sass-files/sass/utils/_animations.scss new file mode 100644 index 000000000..767e30847 --- /dev/null +++ b/web/sass-files/sass/utils/_animations.scss @@ -0,0 +1,19 @@ +@charset 'UTF-8'; + +@-webkit-keyframes spin2 { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + } +} + +@keyframes spin { + from { + transform: scale(1) rotate(0deg); + } + to { + transform: scale(1) rotate(360deg); + } +} diff --git a/web/sass-files/sass/utils/_functions.scss b/web/sass-files/sass/utils/_functions.scss new file mode 100644 index 000000000..9013920fa --- /dev/null +++ b/web/sass-files/sass/utils/_functions.scss @@ -0,0 +1,9 @@ +@charset "UTF-8"; + +@function em($pixels, $context: 14px) { + @return #{$pixels/$context}em +} + +%popover-box-shadow { + @include box-shadow(rgba(black, .175) 1px -3px 12px); +} \ No newline at end of file diff --git a/web/sass-files/sass/utils/_mixins.scss b/web/sass-files/sass/utils/_mixins.scss new file mode 100644 index 000000000..28723e1a5 --- /dev/null +++ b/web/sass-files/sass/utils/_mixins.scss @@ -0,0 +1,8 @@ +@charset 'UTF-8'; + +@mixin file-icon($path) { + background: #fff url($path); + background-position: center; + background-repeat: no-repeat; + @include background-size(60px auto); +} diff --git a/web/sass-files/sass/utils/_module.scss b/web/sass-files/sass/utils/_module.scss new file mode 100644 index 000000000..e7f0c0c46 --- /dev/null +++ b/web/sass-files/sass/utils/_module.scss @@ -0,0 +1,5 @@ +// Only for combining all the files in this folder +@import 'variables'; +@import 'animations'; +@import 'functions'; +@import 'mixins'; diff --git a/web/sass-files/sass/utils/_variables.scss b/web/sass-files/sass/utils/_variables.scss new file mode 100644 index 000000000..065c37a17 --- /dev/null +++ b/web/sass-files/sass/utils/_variables.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// Color Variables +$color--primary: rgb(35, 137, 215); +$color--primary--hover: darken($color--primary, 10%); +$bg--gray: rgb(245, 245, 245); +$bg--white: rgb(255, 255, 255); + +// Page Variables +$border-gray: 1px solid #ddd; + +// Random variables +$border-rad: 1px; diff --git a/web/sass-files/sass/vendors/_colorpicker.scss b/web/sass-files/sass/vendors/_colorpicker.scss new file mode 100644 index 000000000..291145e80 --- /dev/null +++ b/web/sass-files/sass/vendors/_colorpicker.scss @@ -0,0 +1,253 @@ +@charset 'UTF-8'; + +/*! + * Bootstrap Colorpicker + * http://mjolnic.github.io/bootstrap-colorpicker/ + * + * Originally written by (c) 2012 Stefan Petre + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0.txt + * + */ + +.colorpicker-saturation { + float: left; + width: 100px; + height: 100px; + cursor: crosshair; + background-image: url('../images/bootstrap-colorpicker/saturation.png'); +} + +.colorpicker-saturation i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 5px; + height: 5px; + margin: -4px 0 0 -4px; + border: 1px solid #000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.colorpicker-saturation i b { + display: block; + width: 5px; + height: 5px; + border: 1px solid #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.colorpicker-hue, +.colorpicker-alpha { + float: left; + width: 15px; + height: 100px; + margin-bottom: 4px; + margin-left: 4px; + cursor: row-resize; +} + +.colorpicker-hue i, +.colorpicker-alpha i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: 1px; + margin-top: -1px; + background: #000; + border-top: 1px solid #fff; +} + +.colorpicker-hue { + background-image: url('../images/bootstrap-colorpicker/hue.png'); +} + +.colorpicker-alpha { + display: none; + background-image: url('../images/bootstrap-colorpicker/alpha.png'); +} + +.colorpicker-saturation, +.colorpicker-hue, +.colorpicker-alpha { + background-size: contain; +} + +.colorpicker { + top: 0; + left: 0; + z-index: 2500; + min-width: 130px; + padding: 4px; + margin-top: 1px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + *zoom: 1; +} + +.colorpicker:before, +.colorpicker:after { + display: table; + line-height: 0; + content: ''; +} + +.colorpicker:after { + clear: both; +} + +.colorpicker:before { + position: absolute; + top: -7px; + left: 6px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, .2); + content: ''; +} + +.colorpicker:after { + position: absolute; + top: -6px; + left: 7px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + border-left: 6px solid transparent; + content: ''; +} + +.colorpicker div { + position: relative; +} + +.colorpicker.colorpicker-with-alpha { + min-width: 140px; +} + +.colorpicker.colorpicker-with-alpha .colorpicker-alpha { + display: block; +} + +.colorpicker-color { + height: 10px; + margin-top: 5px; + clear: both; + background-image: url('../images/bootstrap-colorpicker/alpha.png'); + background-position: 0 100%; +} + +.colorpicker-color div { + height: 10px; +} + +.colorpicker-selectors { + display: none; + height: 10px; + margin-top: 5px; + clear: both; +} + +.colorpicker-selectors i { + float: left; + width: 10px; + height: 10px; + cursor: pointer; +} + +.colorpicker-selectors i + i { + margin-left: 3px; +} + +.colorpicker-element .input-group-addon i, +.colorpicker-element .add-on i { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: text-top; + cursor: pointer; +} + +.colorpicker.colorpicker-inline { + position: relative; + z-index: auto; + display: inline-block; + float: none; +} + +.colorpicker.colorpicker-horizontal { + width: 110px; + height: auto; + min-width: 110px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-saturation { + margin-bottom: 4px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-color { + width: 100px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue, +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + float: left; + width: 100px; + height: 15px; + margin-bottom: 4px; + margin-left: 0; + cursor: col-resize; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue i, +.colorpicker.colorpicker-horizontal .colorpicker-alpha i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 1px; + height: 15px; + margin-top: 0; + background: #fff; + border: none; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue { + background-image: url('../images/bootstrap-colorpicker/hue-horizontal.png'); +} + +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + background-image: url('../images/bootstrap-colorpicker/alpha-horizontal.png'); +} + +.colorpicker.colorpicker-hidden { + display: none; +} + +.colorpicker.colorpicker-visible { + display: block; +} + +.colorpicker-inline.colorpicker-visible { + display: inline-block; +} + +.colorpicker-right:before { + right: 6px; + left: auto; +} + +.colorpicker-right:after { + right: 7px; + left: auto; +} diff --git a/web/sass-files/sass/vendors/_font-awesome.scss b/web/sass-files/sass/vendors/_font-awesome.scss new file mode 100644 index 000000000..49ab318cd --- /dev/null +++ b/web/sass-files/sass/vendors/_font-awesome.scss @@ -0,0 +1,1803 @@ +@charset 'UTF-8'; + +/*! + * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */ +/* FONT PATH + * -------------------------- */ +@font-face { + font-family: 'FontAwesome'; + src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); + src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); + font-weight: normal; + font-style: normal; +} +.fa { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transform: translate(0, 0); +} +/* makes the font 33% larger relative to the icon container */ +.fa-lg { + font-size: 1.33333333em; + line-height: .75em; + vertical-align: -15%; +} +.fa-2x { + font-size: 2em; +} +.fa-3x { + font-size: 3em; +} +.fa-4x { + font-size: 4em; +} +.fa-5x { + font-size: 5em; +} +.fa-fw { + width: 1.28571429em; + text-align: center; +} +.fa-ul { + padding-left: 0; + margin-left: 2.14285714em; + list-style-type: none; +} +.fa-ul > li { + position: relative; +} +.fa-li { + position: absolute; + left: -2.14285714em; + width: 2.14285714em; + top: .14285714em; + text-align: center; +} +.fa-li.fa-lg { + left: -1.85714286em; +} +.fa-border { + padding: .2em .25em .15em; + border: solid .08em #eee; + border-radius: .1em; +} +.pull-right { + float: right; +} +.pull-left { + float: left; +} +.fa.pull-left { + margin-right: .3em; +} +.fa.pull-right { + margin-left: .3em; +} +.fa-spin { + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; +} +.fa-pulse { + -webkit-animation: fa-spin 1s infinite steps(8); + animation: fa-spin 1s infinite steps(8); +} +@-webkit-keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +.fa-rotate-90 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.fa-rotate-180 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.fa-rotate-270 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +.fa-flip-horizontal { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +.fa-flip-vertical { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +:root .fa-rotate-90, +:root .fa-rotate-180, +:root .fa-rotate-270, +:root .fa-flip-horizontal, +:root .fa-flip-vertical { + filter: none; +} +.fa-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} +.fa-stack-1x, +.fa-stack-2x { + position: absolute; + left: 0; + width: 100%; + text-align: center; +} +.fa-stack-1x { + line-height: inherit; +} +.fa-stack-2x { + font-size: 2em; +} +.fa-inverse { + color: #fff; +} +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen + readers do not read off random characters that represent icons */ +.fa-glass:before { + content: '\f000'; +} +.fa-music:before { + content: '\f001'; +} +.fa-search:before { + content: '\f002'; +} +.fa-envelope-o:before { + content: '\f003'; +} +.fa-heart:before { + content: '\f004'; +} +.fa-star:before { + content: '\f005'; +} +.fa-star-o:before { + content: '\f006'; +} +.fa-user:before { + content: '\f007'; +} +.fa-film:before { + content: '\f008'; +} +.fa-th-large:before { + content: '\f009'; +} +.fa-th:before { + content: '\f00a'; +} +.fa-th-list:before { + content: '\f00b'; +} +.fa-check:before { + content: '\f00c'; +} +.fa-remove:before, +.fa-close:before, +.fa-times:before { + content: '\f00d'; +} +.fa-search-plus:before { + content: '\f00e'; +} +.fa-search-minus:before { + content: '\f010'; +} +.fa-power-off:before { + content: '\f011'; +} +.fa-signal:before { + content: '\f012'; +} +.fa-gear:before, +.fa-cog:before { + content: '\f013'; +} +.fa-trash-o:before { + content: '\f014'; +} +.fa-home:before { + content: '\f015'; +} +.fa-file-o:before { + content: '\f016'; +} +.fa-clock-o:before { + content: '\f017'; +} +.fa-road:before { + content: '\f018'; +} +.fa-download:before { + content: '\f019'; +} +.fa-arrow-circle-o-down:before { + content: '\f01a'; +} +.fa-arrow-circle-o-up:before { + content: '\f01b'; +} +.fa-inbox:before { + content: '\f01c'; +} +.fa-play-circle-o:before { + content: '\f01d'; +} +.fa-rotate-right:before, +.fa-repeat:before { + content: '\f01e'; +} +.fa-refresh:before { + content: '\f021'; +} +.fa-list-alt:before { + content: '\f022'; +} +.fa-lock:before { + content: '\f023'; +} +.fa-flag:before { + content: '\f024'; +} +.fa-headphones:before { + content: '\f025'; +} +.fa-volume-off:before { + content: '\f026'; +} +.fa-volume-down:before { + content: '\f027'; +} +.fa-volume-up:before { + content: '\f028'; +} +.fa-qrcode:before { + content: '\f029'; +} +.fa-barcode:before { + content: '\f02a'; +} +.fa-tag:before { + content: '\f02b'; +} +.fa-tags:before { + content: '\f02c'; +} +.fa-book:before { + content: '\f02d'; +} +.fa-bookmark:before { + content: '\f02e'; +} +.fa-print:before { + content: '\f02f'; +} +.fa-camera:before { + content: '\f030'; +} +.fa-font:before { + content: '\f031'; +} +.fa-bold:before { + content: '\f032'; +} +.fa-italic:before { + content: '\f033'; +} +.fa-text-height:before { + content: '\f034'; +} +.fa-text-width:before { + content: '\f035'; +} +.fa-align-left:before { + content: '\f036'; +} +.fa-align-center:before { + content: '\f037'; +} +.fa-align-right:before { + content: '\f038'; +} +.fa-align-justify:before { + content: '\f039'; +} +.fa-list:before { + content: '\f03a'; +} +.fa-dedent:before, +.fa-outdent:before { + content: '\f03b'; +} +.fa-indent:before { + content: '\f03c'; +} +.fa-video-camera:before { + content: '\f03d'; +} +.fa-photo:before, +.fa-image:before, +.fa-picture-o:before { + content: '\f03e'; +} +.fa-pencil:before { + content: '\f040'; +} +.fa-map-marker:before { + content: '\f041'; +} +.fa-adjust:before { + content: '\f042'; +} +.fa-tint:before { + content: '\f043'; +} +.fa-edit:before, +.fa-pencil-square-o:before { + content: '\f044'; +} +.fa-share-square-o:before { + content: '\f045'; +} +.fa-check-square-o:before { + content: '\f046'; +} +.fa-arrows:before { + content: '\f047'; +} +.fa-step-backward:before { + content: '\f048'; +} +.fa-fast-backward:before { + content: '\f049'; +} +.fa-backward:before { + content: '\f04a'; +} +.fa-play:before { + content: '\f04b'; +} +.fa-pause:before { + content: '\f04c'; +} +.fa-stop:before { + content: '\f04d'; +} +.fa-forward:before { + content: '\f04e'; +} +.fa-fast-forward:before { + content: '\f050'; +} +.fa-step-forward:before { + content: '\f051'; +} +.fa-eject:before { + content: '\f052'; +} +.fa-chevron-left:before { + content: '\f053'; +} +.fa-chevron-right:before { + content: '\f054'; +} +.fa-plus-circle:before { + content: '\f055'; +} +.fa-minus-circle:before { + content: '\f056'; +} +.fa-times-circle:before { + content: '\f057'; +} +.fa-check-circle:before { + content: '\f058'; +} +.fa-question-circle:before { + content: '\f059'; +} +.fa-info-circle:before { + content: '\f05a'; +} +.fa-crosshairs:before { + content: '\f05b'; +} +.fa-times-circle-o:before { + content: '\f05c'; +} +.fa-check-circle-o:before { + content: '\f05d'; +} +.fa-ban:before { + content: '\f05e'; +} +.fa-arrow-left:before { + content: '\f060'; +} +.fa-arrow-right:before { + content: '\f061'; +} +.fa-arrow-up:before { + content: '\f062'; +} +.fa-arrow-down:before { + content: '\f063'; +} +.fa-mail-forward:before, +.fa-share:before { + content: '\f064'; +} +.fa-expand:before { + content: '\f065'; +} +.fa-compress:before { + content: '\f066'; +} +.fa-plus:before { + content: '\f067'; +} +.fa-minus:before { + content: '\f068'; +} +.fa-asterisk:before { + content: '\f069'; +} +.fa-exclamation-circle:before { + content: '\f06a'; +} +.fa-gift:before { + content: '\f06b'; +} +.fa-leaf:before { + content: '\f06c'; +} +.fa-fire:before { + content: '\f06d'; +} +.fa-eye:before { + content: '\f06e'; +} +.fa-eye-slash:before { + content: '\f070'; +} +.fa-warning:before, +.fa-exclamation-triangle:before { + content: '\f071'; +} +.fa-plane:before { + content: '\f072'; +} +.fa-calendar:before { + content: '\f073'; +} +.fa-random:before { + content: '\f074'; +} +.fa-comment:before { + content: '\f075'; +} +.fa-magnet:before { + content: '\f076'; +} +.fa-chevron-up:before { + content: '\f077'; +} +.fa-chevron-down:before { + content: '\f078'; +} +.fa-retweet:before { + content: '\f079'; +} +.fa-shopping-cart:before { + content: '\f07a'; +} +.fa-folder:before { + content: '\f07b'; +} +.fa-folder-open:before { + content: '\f07c'; +} +.fa-arrows-v:before { + content: '\f07d'; +} +.fa-arrows-h:before { + content: '\f07e'; +} +.fa-bar-chart-o:before, +.fa-bar-chart:before { + content: '\f080'; +} +.fa-twitter-square:before { + content: '\f081'; +} +.fa-facebook-square:before { + content: '\f082'; +} +.fa-camera-retro:before { + content: '\f083'; +} +.fa-key:before { + content: '\f084'; +} +.fa-gears:before, +.fa-cogs:before { + content: '\f085'; +} +.fa-comments:before { + content: '\f086'; +} +.fa-thumbs-o-up:before { + content: '\f087'; +} +.fa-thumbs-o-down:before { + content: '\f088'; +} +.fa-star-half:before { + content: '\f089'; +} +.fa-heart-o:before { + content: '\f08a'; +} +.fa-sign-out:before { + content: '\f08b'; +} +.fa-linkedin-square:before { + content: '\f08c'; +} +.fa-thumb-tack:before { + content: '\f08d'; +} +.fa-external-link:before { + content: '\f08e'; +} +.fa-sign-in:before { + content: '\f090'; +} +.fa-trophy:before { + content: '\f091'; +} +.fa-github-square:before { + content: '\f092'; +} +.fa-upload:before { + content: '\f093'; +} +.fa-lemon-o:before { + content: '\f094'; +} +.fa-phone:before { + content: '\f095'; +} +.fa-square-o:before { + content: '\f096'; +} +.fa-bookmark-o:before { + content: '\f097'; +} +.fa-phone-square:before { + content: '\f098'; +} +.fa-twitter:before { + content: '\f099'; +} +.fa-facebook-f:before, +.fa-facebook:before { + content: '\f09a'; +} +.fa-github:before { + content: '\f09b'; +} +.fa-unlock:before { + content: '\f09c'; +} +.fa-credit-card:before { + content: '\f09d'; +} +.fa-rss:before { + content: '\f09e'; +} +.fa-hdd-o:before { + content: '\f0a0'; +} +.fa-bullhorn:before { + content: '\f0a1'; +} +.fa-bell:before { + content: '\f0f3'; +} +.fa-certificate:before { + content: '\f0a3'; +} +.fa-hand-o-right:before { + content: '\f0a4'; +} +.fa-hand-o-left:before { + content: '\f0a5'; +} +.fa-hand-o-up:before { + content: '\f0a6'; +} +.fa-hand-o-down:before { + content: '\f0a7'; +} +.fa-arrow-circle-left:before { + content: '\f0a8'; +} +.fa-arrow-circle-right:before { + content: '\f0a9'; +} +.fa-arrow-circle-up:before { + content: '\f0aa'; +} +.fa-arrow-circle-down:before { + content: '\f0ab'; +} +.fa-globe:before { + content: '\f0ac'; +} +.fa-wrench:before { + content: '\f0ad'; +} +.fa-tasks:before { + content: '\f0ae'; +} +.fa-filter:before { + content: '\f0b0'; +} +.fa-briefcase:before { + content: '\f0b1'; +} +.fa-arrows-alt:before { + content: '\f0b2'; +} +.fa-group:before, +.fa-users:before { + content: '\f0c0'; +} +.fa-chain:before, +.fa-link:before { + content: '\f0c1'; +} +.fa-cloud:before { + content: '\f0c2'; +} +.fa-flask:before { + content: '\f0c3'; +} +.fa-cut:before, +.fa-scissors:before { + content: '\f0c4'; +} +.fa-copy:before, +.fa-files-o:before { + content: '\f0c5'; +} +.fa-paperclip:before { + content: '\f0c6'; +} +.fa-save:before, +.fa-floppy-o:before { + content: '\f0c7'; +} +.fa-square:before { + content: '\f0c8'; +} +.fa-navicon:before, +.fa-reorder:before, +.fa-bars:before { + content: '\f0c9'; +} +.fa-list-ul:before { + content: '\f0ca'; +} +.fa-list-ol:before { + content: '\f0cb'; +} +.fa-strikethrough:before { + content: '\f0cc'; +} +.fa-underline:before { + content: '\f0cd'; +} +.fa-table:before { + content: '\f0ce'; +} +.fa-magic:before { + content: '\f0d0'; +} +.fa-truck:before { + content: '\f0d1'; +} +.fa-pinterest:before { + content: '\f0d2'; +} +.fa-pinterest-square:before { + content: '\f0d3'; +} +.fa-google-plus-square:before { + content: '\f0d4'; +} +.fa-google-plus:before { + content: '\f0d5'; +} +.fa-money:before { + content: '\f0d6'; +} +.fa-caret-down:before { + content: '\f0d7'; +} +.fa-caret-up:before { + content: '\f0d8'; +} +.fa-caret-left:before { + content: '\f0d9'; +} +.fa-caret-right:before { + content: '\f0da'; +} +.fa-columns:before { + content: '\f0db'; +} +.fa-unsorted:before, +.fa-sort:before { + content: '\f0dc'; +} +.fa-sort-down:before, +.fa-sort-desc:before { + content: '\f0dd'; +} +.fa-sort-up:before, +.fa-sort-asc:before { + content: '\f0de'; +} +.fa-envelope:before { + content: '\f0e0'; +} +.fa-linkedin:before { + content: '\f0e1'; +} +.fa-rotate-left:before, +.fa-undo:before { + content: '\f0e2'; +} +.fa-legal:before, +.fa-gavel:before { + content: '\f0e3'; +} +.fa-dashboard:before, +.fa-tachometer:before { + content: '\f0e4'; +} +.fa-comment-o:before { + content: '\f0e5'; +} +.fa-comments-o:before { + content: '\f0e6'; +} +.fa-flash:before, +.fa-bolt:before { + content: '\f0e7'; +} +.fa-sitemap:before { + content: '\f0e8'; +} +.fa-umbrella:before { + content: '\f0e9'; +} +.fa-paste:before, +.fa-clipboard:before { + content: '\f0ea'; +} +.fa-lightbulb-o:before { + content: '\f0eb'; +} +.fa-exchange:before { + content: '\f0ec'; +} +.fa-cloud-download:before { + content: '\f0ed'; +} +.fa-cloud-upload:before { + content: '\f0ee'; +} +.fa-user-md:before { + content: '\f0f0'; +} +.fa-stethoscope:before { + content: '\f0f1'; +} +.fa-suitcase:before { + content: '\f0f2'; +} +.fa-bell-o:before { + content: '\f0a2'; +} +.fa-coffee:before { + content: '\f0f4'; +} +.fa-cutlery:before { + content: '\f0f5'; +} +.fa-file-text-o:before { + content: '\f0f6'; +} +.fa-building-o:before { + content: '\f0f7'; +} +.fa-hospital-o:before { + content: '\f0f8'; +} +.fa-ambulance:before { + content: '\f0f9'; +} +.fa-medkit:before { + content: '\f0fa'; +} +.fa-fighter-jet:before { + content: '\f0fb'; +} +.fa-beer:before { + content: '\f0fc'; +} +.fa-h-square:before { + content: '\f0fd'; +} +.fa-plus-square:before { + content: '\f0fe'; +} +.fa-angle-double-left:before { + content: '\f100'; +} +.fa-angle-double-right:before { + content: '\f101'; +} +.fa-angle-double-up:before { + content: '\f102'; +} +.fa-angle-double-down:before { + content: '\f103'; +} +.fa-angle-left:before { + content: '\f104'; +} +.fa-angle-right:before { + content: '\f105'; +} +.fa-angle-up:before { + content: '\f106'; +} +.fa-angle-down:before { + content: '\f107'; +} +.fa-desktop:before { + content: '\f108'; +} +.fa-laptop:before { + content: '\f109'; +} +.fa-tablet:before { + content: '\f10a'; +} +.fa-mobile-phone:before, +.fa-mobile:before { + content: '\f10b'; +} +.fa-circle-o:before { + content: '\f10c'; +} +.fa-quote-left:before { + content: '\f10d'; +} +.fa-quote-right:before { + content: '\f10e'; +} +.fa-spinner:before { + content: '\f110'; +} +.fa-circle:before { + content: '\f111'; +} +.fa-mail-reply:before, +.fa-reply:before { + content: '\f112'; +} +.fa-github-alt:before { + content: '\f113'; +} +.fa-folder-o:before { + content: '\f114'; +} +.fa-folder-open-o:before { + content: '\f115'; +} +.fa-smile-o:before { + content: '\f118'; +} +.fa-frown-o:before { + content: '\f119'; +} +.fa-meh-o:before { + content: '\f11a'; +} +.fa-gamepad:before { + content: '\f11b'; +} +.fa-keyboard-o:before { + content: '\f11c'; +} +.fa-flag-o:before { + content: '\f11d'; +} +.fa-flag-checkered:before { + content: '\f11e'; +} +.fa-terminal:before { + content: '\f120'; +} +.fa-code:before { + content: '\f121'; +} +.fa-mail-reply-all:before, +.fa-reply-all:before { + content: '\f122'; +} +.fa-star-half-empty:before, +.fa-star-half-full:before, +.fa-star-half-o:before { + content: '\f123'; +} +.fa-location-arrow:before { + content: '\f124'; +} +.fa-crop:before { + content: '\f125'; +} +.fa-code-fork:before { + content: '\f126'; +} +.fa-unlink:before, +.fa-chain-broken:before { + content: '\f127'; +} +.fa-question:before { + content: '\f128'; +} +.fa-info:before { + content: '\f129'; +} +.fa-exclamation:before { + content: '\f12a'; +} +.fa-superscript:before { + content: '\f12b'; +} +.fa-subscript:before { + content: '\f12c'; +} +.fa-eraser:before { + content: '\f12d'; +} +.fa-puzzle-piece:before { + content: '\f12e'; +} +.fa-microphone:before { + content: '\f130'; +} +.fa-microphone-slash:before { + content: '\f131'; +} +.fa-shield:before { + content: '\f132'; +} +.fa-calendar-o:before { + content: '\f133'; +} +.fa-fire-extinguisher:before { + content: '\f134'; +} +.fa-rocket:before { + content: '\f135'; +} +.fa-maxcdn:before { + content: '\f136'; +} +.fa-chevron-circle-left:before { + content: '\f137'; +} +.fa-chevron-circle-right:before { + content: '\f138'; +} +.fa-chevron-circle-up:before { + content: '\f139'; +} +.fa-chevron-circle-down:before { + content: '\f13a'; +} +.fa-html5:before { + content: '\f13b'; +} +.fa-css3:before { + content: '\f13c'; +} +.fa-anchor:before { + content: '\f13d'; +} +.fa-unlock-alt:before { + content: '\f13e'; +} +.fa-bullseye:before { + content: '\f140'; +} +.fa-ellipsis-h:before { + content: '\f141'; +} +.fa-ellipsis-v:before { + content: '\f142'; +} +.fa-rss-square:before { + content: '\f143'; +} +.fa-play-circle:before { + content: '\f144'; +} +.fa-ticket:before { + content: '\f145'; +} +.fa-minus-square:before { + content: '\f146'; +} +.fa-minus-square-o:before { + content: '\f147'; +} +.fa-level-up:before { + content: '\f148'; +} +.fa-level-down:before { + content: '\f149'; +} +.fa-check-square:before { + content: '\f14a'; +} +.fa-pencil-square:before { + content: '\f14b'; +} +.fa-external-link-square:before { + content: '\f14c'; +} +.fa-share-square:before { + content: '\f14d'; +} +.fa-compass:before { + content: '\f14e'; +} +.fa-toggle-down:before, +.fa-caret-square-o-down:before { + content: '\f150'; +} +.fa-toggle-up:before, +.fa-caret-square-o-up:before { + content: '\f151'; +} +.fa-toggle-right:before, +.fa-caret-square-o-right:before { + content: '\f152'; +} +.fa-euro:before, +.fa-eur:before { + content: '\f153'; +} +.fa-gbp:before { + content: '\f154'; +} +.fa-dollar:before, +.fa-usd:before { + content: '\f155'; +} +.fa-rupee:before, +.fa-inr:before { + content: '\f156'; +} +.fa-cny:before, +.fa-rmb:before, +.fa-yen:before, +.fa-jpy:before { + content: '\f157'; +} +.fa-ruble:before, +.fa-rouble:before, +.fa-rub:before { + content: '\f158'; +} +.fa-won:before, +.fa-krw:before { + content: '\f159'; +} +.fa-bitcoin:before, +.fa-btc:before { + content: '\f15a'; +} +.fa-file:before { + content: '\f15b'; +} +.fa-file-text:before { + content: '\f15c'; +} +.fa-sort-alpha-asc:before { + content: '\f15d'; +} +.fa-sort-alpha-desc:before { + content: '\f15e'; +} +.fa-sort-amount-asc:before { + content: '\f160'; +} +.fa-sort-amount-desc:before { + content: '\f161'; +} +.fa-sort-numeric-asc:before { + content: '\f162'; +} +.fa-sort-numeric-desc:before { + content: '\f163'; +} +.fa-thumbs-up:before { + content: '\f164'; +} +.fa-thumbs-down:before { + content: '\f165'; +} +.fa-youtube-square:before { + content: '\f166'; +} +.fa-youtube:before { + content: '\f167'; +} +.fa-xing:before { + content: '\f168'; +} +.fa-xing-square:before { + content: '\f169'; +} +.fa-youtube-play:before { + content: '\f16a'; +} +.fa-dropbox:before { + content: '\f16b'; +} +.fa-stack-overflow:before { + content: '\f16c'; +} +.fa-instagram:before { + content: '\f16d'; +} +.fa-flickr:before { + content: '\f16e'; +} +.fa-adn:before { + content: '\f170'; +} +.fa-bitbucket:before { + content: '\f171'; +} +.fa-bitbucket-square:before { + content: '\f172'; +} +.fa-tumblr:before { + content: '\f173'; +} +.fa-tumblr-square:before { + content: '\f174'; +} +.fa-long-arrow-down:before { + content: '\f175'; +} +.fa-long-arrow-up:before { + content: '\f176'; +} +.fa-long-arrow-left:before { + content: '\f177'; +} +.fa-long-arrow-right:before { + content: '\f178'; +} +.fa-apple:before { + content: '\f179'; +} +.fa-windows:before { + content: '\f17a'; +} +.fa-android:before { + content: '\f17b'; +} +.fa-linux:before { + content: '\f17c'; +} +.fa-dribbble:before { + content: '\f17d'; +} +.fa-skype:before { + content: '\f17e'; +} +.fa-foursquare:before { + content: '\f180'; +} +.fa-trello:before { + content: '\f181'; +} +.fa-female:before { + content: '\f182'; +} +.fa-male:before { + content: '\f183'; +} +.fa-gittip:before, +.fa-gratipay:before { + content: '\f184'; +} +.fa-sun-o:before { + content: '\f185'; +} +.fa-moon-o:before { + content: '\f186'; +} +.fa-archive:before { + content: '\f187'; +} +.fa-bug:before { + content: '\f188'; +} +.fa-vk:before { + content: '\f189'; +} +.fa-weibo:before { + content: '\f18a'; +} +.fa-renren:before { + content: '\f18b'; +} +.fa-pagelines:before { + content: '\f18c'; +} +.fa-stack-exchange:before { + content: '\f18d'; +} +.fa-arrow-circle-o-right:before { + content: '\f18e'; +} +.fa-arrow-circle-o-left:before { + content: '\f190'; +} +.fa-toggle-left:before, +.fa-caret-square-o-left:before { + content: '\f191'; +} +.fa-dot-circle-o:before { + content: '\f192'; +} +.fa-wheelchair:before { + content: '\f193'; +} +.fa-vimeo-square:before { + content: '\f194'; +} +.fa-turkish-lira:before, +.fa-try:before { + content: '\f195'; +} +.fa-plus-square-o:before { + content: '\f196'; +} +.fa-space-shuttle:before { + content: '\f197'; +} +.fa-slack:before { + content: '\f198'; +} +.fa-envelope-square:before { + content: '\f199'; +} +.fa-wordpress:before { + content: '\f19a'; +} +.fa-openid:before { + content: '\f19b'; +} +.fa-institution:before, +.fa-bank:before, +.fa-university:before { + content: '\f19c'; +} +.fa-mortar-board:before, +.fa-graduation-cap:before { + content: '\f19d'; +} +.fa-yahoo:before { + content: '\f19e'; +} +.fa-google:before { + content: '\f1a0'; +} +.fa-reddit:before { + content: '\f1a1'; +} +.fa-reddit-square:before { + content: '\f1a2'; +} +.fa-stumbleupon-circle:before { + content: '\f1a3'; +} +.fa-stumbleupon:before { + content: '\f1a4'; +} +.fa-delicious:before { + content: '\f1a5'; +} +.fa-digg:before { + content: '\f1a6'; +} +.fa-pied-piper:before { + content: '\f1a7'; +} +.fa-pied-piper-alt:before { + content: '\f1a8'; +} +.fa-drupal:before { + content: '\f1a9'; +} +.fa-joomla:before { + content: '\f1aa'; +} +.fa-language:before { + content: '\f1ab'; +} +.fa-fax:before { + content: '\f1ac'; +} +.fa-building:before { + content: '\f1ad'; +} +.fa-child:before { + content: '\f1ae'; +} +.fa-paw:before { + content: '\f1b0'; +} +.fa-spoon:before { + content: '\f1b1'; +} +.fa-cube:before { + content: '\f1b2'; +} +.fa-cubes:before { + content: '\f1b3'; +} +.fa-behance:before { + content: '\f1b4'; +} +.fa-behance-square:before { + content: '\f1b5'; +} +.fa-steam:before { + content: '\f1b6'; +} +.fa-steam-square:before { + content: '\f1b7'; +} +.fa-recycle:before { + content: '\f1b8'; +} +.fa-automobile:before, +.fa-car:before { + content: '\f1b9'; +} +.fa-cab:before, +.fa-taxi:before { + content: '\f1ba'; +} +.fa-tree:before { + content: '\f1bb'; +} +.fa-spotify:before { + content: '\f1bc'; +} +.fa-deviantart:before { + content: '\f1bd'; +} +.fa-soundcloud:before { + content: '\f1be'; +} +.fa-database:before { + content: '\f1c0'; +} +.fa-file-pdf-o:before { + content: '\f1c1'; +} +.fa-file-word-o:before { + content: '\f1c2'; +} +.fa-file-excel-o:before { + content: '\f1c3'; +} +.fa-file-powerpoint-o:before { + content: '\f1c4'; +} +.fa-file-photo-o:before, +.fa-file-picture-o:before, +.fa-file-image-o:before { + content: '\f1c5'; +} +.fa-file-zip-o:before, +.fa-file-archive-o:before { + content: '\f1c6'; +} +.fa-file-sound-o:before, +.fa-file-audio-o:before { + content: '\f1c7'; +} +.fa-file-movie-o:before, +.fa-file-video-o:before { + content: '\f1c8'; +} +.fa-file-code-o:before { + content: '\f1c9'; +} +.fa-vine:before { + content: '\f1ca'; +} +.fa-codepen:before { + content: '\f1cb'; +} +.fa-jsfiddle:before { + content: '\f1cc'; +} +.fa-life-bouy:before, +.fa-life-buoy:before, +.fa-life-saver:before, +.fa-support:before, +.fa-life-ring:before { + content: '\f1cd'; +} +.fa-circle-o-notch:before { + content: '\f1ce'; +} +.fa-ra:before, +.fa-rebel:before { + content: '\f1d0'; +} +.fa-ge:before, +.fa-empire:before { + content: '\f1d1'; +} +.fa-git-square:before { + content: '\f1d2'; +} +.fa-git:before { + content: '\f1d3'; +} +.fa-hacker-news:before { + content: '\f1d4'; +} +.fa-tencent-weibo:before { + content: '\f1d5'; +} +.fa-qq:before { + content: '\f1d6'; +} +.fa-wechat:before, +.fa-weixin:before { + content: '\f1d7'; +} +.fa-send:before, +.fa-paper-plane:before { + content: '\f1d8'; +} +.fa-send-o:before, +.fa-paper-plane-o:before { + content: '\f1d9'; +} +.fa-history:before { + content: '\f1da'; +} +.fa-genderless:before, +.fa-circle-thin:before { + content: '\f1db'; +} +.fa-header:before { + content: '\f1dc'; +} +.fa-paragraph:before { + content: '\f1dd'; +} +.fa-sliders:before { + content: '\f1de'; +} +.fa-share-alt:before { + content: '\f1e0'; +} +.fa-share-alt-square:before { + content: '\f1e1'; +} +.fa-bomb:before { + content: '\f1e2'; +} +.fa-soccer-ball-o:before, +.fa-futbol-o:before { + content: '\f1e3'; +} +.fa-tty:before { + content: '\f1e4'; +} +.fa-binoculars:before { + content: '\f1e5'; +} +.fa-plug:before { + content: '\f1e6'; +} +.fa-slideshare:before { + content: '\f1e7'; +} +.fa-twitch:before { + content: '\f1e8'; +} +.fa-yelp:before { + content: '\f1e9'; +} +.fa-newspaper-o:before { + content: '\f1ea'; +} +.fa-wifi:before { + content: '\f1eb'; +} +.fa-calculator:before { + content: '\f1ec'; +} +.fa-paypal:before { + content: '\f1ed'; +} +.fa-google-wallet:before { + content: '\f1ee'; +} +.fa-cc-visa:before { + content: '\f1f0'; +} +.fa-cc-mastercard:before { + content: '\f1f1'; +} +.fa-cc-discover:before { + content: '\f1f2'; +} +.fa-cc-amex:before { + content: '\f1f3'; +} +.fa-cc-paypal:before { + content: '\f1f4'; +} +.fa-cc-stripe:before { + content: '\f1f5'; +} +.fa-bell-slash:before { + content: '\f1f6'; +} +.fa-bell-slash-o:before { + content: '\f1f7'; +} +.fa-trash:before { + content: '\f1f8'; +} +.fa-copyright:before { + content: '\f1f9'; +} +.fa-at:before { + content: '\f1fa'; +} +.fa-eyedropper:before { + content: '\f1fb'; +} +.fa-paint-brush:before { + content: '\f1fc'; +} +.fa-birthday-cake:before { + content: '\f1fd'; +} +.fa-area-chart:before { + content: '\f1fe'; +} +.fa-pie-chart:before { + content: '\f200'; +} +.fa-line-chart:before { + content: '\f201'; +} +.fa-lastfm:before { + content: '\f202'; +} +.fa-lastfm-square:before { + content: '\f203'; +} +.fa-toggle-off:before { + content: '\f204'; +} +.fa-toggle-on:before { + content: '\f205'; +} +.fa-bicycle:before { + content: '\f206'; +} +.fa-bus:before { + content: '\f207'; +} +.fa-ioxhost:before { + content: '\f208'; +} +.fa-angellist:before { + content: '\f209'; +} +.fa-cc:before { + content: '\f20a'; +} +.fa-shekel:before, +.fa-sheqel:before, +.fa-ils:before { + content: '\f20b'; +} +.fa-meanpath:before { + content: '\f20c'; +} +.fa-buysellads:before { + content: '\f20d'; +} +.fa-connectdevelop:before { + content: '\f20e'; +} +.fa-dashcube:before { + content: '\f210'; +} +.fa-forumbee:before { + content: '\f211'; +} +.fa-leanpub:before { + content: '\f212'; +} +.fa-sellsy:before { + content: '\f213'; +} +.fa-shirtsinbulk:before { + content: '\f214'; +} +.fa-simplybuilt:before { + content: '\f215'; +} +.fa-skyatlas:before { + content: '\f216'; +} +.fa-cart-plus:before { + content: '\f217'; +} +.fa-cart-arrow-down:before { + content: '\f218'; +} +.fa-diamond:before { + content: '\f219'; +} +.fa-ship:before { + content: '\f21a'; +} +.fa-user-secret:before { + content: '\f21b'; +} +.fa-motorcycle:before { + content: '\f21c'; +} +.fa-street-view:before { + content: '\f21d'; +} +.fa-heartbeat:before { + content: '\f21e'; +} +.fa-venus:before { + content: '\f221'; +} +.fa-mars:before { + content: '\f222'; +} +.fa-mercury:before { + content: '\f223'; +} +.fa-transgender:before { + content: '\f224'; +} +.fa-transgender-alt:before { + content: '\f225'; +} +.fa-venus-double:before { + content: '\f226'; +} +.fa-mars-double:before { + content: '\f227'; +} +.fa-venus-mars:before { + content: '\f228'; +} +.fa-mars-stroke:before { + content: '\f229'; +} +.fa-mars-stroke-v:before { + content: '\f22a'; +} +.fa-mars-stroke-h:before { + content: '\f22b'; +} +.fa-neuter:before { + content: '\f22c'; +} +.fa-facebook-official:before { + content: '\f230'; +} +.fa-pinterest-p:before { + content: '\f231'; +} +.fa-whatsapp:before { + content: '\f232'; +} +.fa-server:before { + content: '\f233'; +} +.fa-user-plus:before { + content: '\f234'; +} +.fa-user-times:before { + content: '\f235'; +} +.fa-hotel:before, +.fa-bed:before { + content: '\f236'; +} +.fa-viacoin:before { + content: '\f237'; +} +.fa-train:before { + content: '\f238'; +} +.fa-subway:before { + content: '\f239'; +} +.fa-medium:before { + content: '\f23a'; +} diff --git a/web/sass-files/sass/vendors/_module.scss b/web/sass-files/sass/vendors/_module.scss new file mode 100644 index 000000000..ed8a124a2 --- /dev/null +++ b/web/sass-files/sass/vendors/_module.scss @@ -0,0 +1,4 @@ +// Only for combining all the files in this folder +@import 'perfect-scrollbar'; +@import 'font-awesome'; +@import 'colorpicker'; diff --git a/web/sass-files/sass/vendors/_perfect-scrollbar.scss b/web/sass-files/sass/vendors/_perfect-scrollbar.scss new file mode 100755 index 000000000..212a22687 --- /dev/null +++ b/web/sass-files/sass/vendors/_perfect-scrollbar.scss @@ -0,0 +1,141 @@ +@charset 'UTF-8'; + +.ps-container { + overflow: hidden !important; +} +.ps-container.ps-active-x > .ps-scrollbar-x-rail, +.ps-container.ps-active-y > .ps-scrollbar-y-rail { + display: block; +} + +.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { + background-color: #999; +} +.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { + background-color: #999; +} +.ps-container > .ps-scrollbar-x-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + opacity: 0; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; + filter: alpha(opacity=0); + -webkit-transition: background-color .2s linear, opacity .2s linear; + -moz-transition: background-color .2s linear, opacity .2s linear; + -o-transition: background-color .2s linear, opacity .2s linear; + transition: background-color .2s linear, opacity .2s linear; + bottom: 3px; + /* there must be 'bottom' for ps-scrollbar-x-rail */ + height: 8px; +} +.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { + position: absolute; + /* please don't change 'position' */ + background-color: #aaa; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + -webkit-transition: background-color .2s linear; + -moz-transition: background-color .2s linear; + -o-transition: background-color .2s linear; + transition: background-color .2s linear; + bottom: 0; + /* there must be 'bottom' for ps-scrollbar-x */ + height: 8px; +} +.ps-container > .ps-scrollbar-y-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + opacity: 0; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; + filter: alpha(opacity=0); + -webkit-transition: background-color .2s linear, opacity .2s linear; + -moz-transition: background-color .2s linear, opacity .2s linear; + -o-transition: background-color .2s linear, opacity .2s linear; + transition: background-color .2s linear, opacity .2s linear; + right: 3px; + /* there must be 'right' for ps-scrollbar-y-rail */ + width: 8px; +} +.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { + position: absolute; + /* please don't change 'position' */ + background-color: #aaa; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + -webkit-transition: background-color .2s linear; + -moz-transition: background-color .2s linear; + -o-transition: background-color .2s linear; + transition: background-color .2s linear; + right: 0; + /* there must be 'right' for ps-scrollbar-y */ + width: 8px; +} + +.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { + background-color: #999; +} +.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { + background-color: #999; +} +.ps-container:hover > .ps-scrollbar-x-rail, +.ps-container:hover > .ps-scrollbar-y-rail { + opacity: .6; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'; + filter: alpha(opacity=60); +} +.ps-container:hover > .ps-scrollbar-x-rail:hover { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { + background-color: #999; +} +.ps-container:hover > .ps-scrollbar-y-rail:hover { + background-color: #eee; + opacity: .9; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; + filter: alpha(opacity=90); +} +.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { + background-color: #999; +} -- cgit v1.2.3-1-g7c22