diff options
Diffstat (limited to 'web/sass-files')
25 files changed, 4865 insertions, 0 deletions
diff --git a/web/sass-files/config.rb b/web/sass-files/config.rb new file mode 100644 index 000000000..6cc11a67f --- /dev/null +++ b/web/sass-files/config.rb @@ -0,0 +1,20 @@ +require 'compass/import-once/activate' +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "../static/css" +sass_dir = "sass" +images_dir = "../static/img" +javascripts_dir = "../static/js" +fonts_dir = "../static/fonts" + +output_style = :compressed + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +line_comments = false +color_output = false + +preferred_syntax = :scss diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss new file mode 100644 index 000000000..5808aeb44 --- /dev/null +++ b/web/sass-files/sass/partials/_base.scss @@ -0,0 +1,154 @@ +html, body { + height: 100%; +} + +body { + font-family: 'Lato', sans-serif; + -webkit-font-smoothing: antialiased; + background: #e9e9e9; + position: relative; + height: 100%; + &.white { + background: #fff; + .inner__wrap { + height: 100%; + } + .row.content { + min-height: 100%; + height: auto !important; + height: 100%; + margin-bottom: -89px; + } + } + > .container-fluid { + @include clearfix; + position: relative; + } +} + +a { + word-break: break-word; +} + +a.theme { + color: $primary-color; +} + +div.theme { + background-color: $primary-color; +} + +.nopadding { + padding: 0; + margin: 0; +} + +.form-control { + @include border-radius(2px); +} + +.form-group { + &.form-group--small { + margin-bottom: 10px; + } +} + +.error-panel { + max-width: 275px; + position: absolute; + right: 10px; + top: 40px; + z-index: 100; +} + +.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; +} + +.command-box { + position:absolute; + background-color:#fff; + width:100%; + border:1px solid #ddd; + bottom: 38; +} + +.command-name { + position: relative; + width: 100%; + background-color: #fff; + height: 37px; + line-height: 37px; + padding: 2px 10px 2px 5px; + z-index: 101; +} + +.command-name:hover { + background-color:#e8eaed; +} + +.command-desc { + color: #a7a8ab; +} + +@-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);} +} + +.black-bg { + background-color: black !important; +} + +#error_bar { + background-color: #0099FF; + text-align:center; + position: relative; + color: #fff; + position: fixed; + top: 0; + width: 100%; + z-index: 9999; + + .error-bar { + padding: 5px 30px; + } + + .error-close { + position: absolute; + right: 0; + top: 0; + color: #FFF; + font-size: 20px; + font-weight: bold; + text-decoration: none; + padding: 0 10px; + } +} + +.invite { + width: 90%; +} + diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss new file mode 100644 index 000000000..c8c205047 --- /dev/null +++ b/web/sass-files/sass/partials/_content.scss @@ -0,0 +1,63 @@ +.inner__wrap { + @include single-transition(transform, 0.5s, ease); + &.move--left { + margin-right: 400px; + .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; + .channel__wrap & { + padding-top: 0; + } +} +#post-create { + background: #fff; + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} +.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; +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_error.scss b/web/sass-files/sass/partials/_error.scss new file mode 100644 index 000000000..ecdcc62d9 --- /dev/null +++ b/web/sass-files/sass/partials/_error.scss @@ -0,0 +1,29 @@ +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 new file mode 100644 index 000000000..b01d2e157 --- /dev/null +++ b/web/sass-files/sass/partials/_files.scss @@ -0,0 +1,144 @@ +.preview-container { + position: relative; + width: 100%; + max-height: 110px; + height: 110px; + white-space: nowrap; + overflow: auto; + .preview-div { + display: inline-block; + width: 120px; + height: 100px; + margin: 7px 10px 0 0; + vertical-align: top; + position: relative; + border: 1px solid #DDD; + &.custom-file { + width: 85px; + height: 100px; + } + &:hover .remove-preview:after { + @include opacity(1); + } + .spinner { + position:absolute; + top:50%; + left:50%; + margin-left: -16px; + margin-top: -16px; + width:32px; + height:32px; + } + } + .preview-img { + width:100%; + height: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; + } + } +} + +.image-comment { + background-position:left top; + background-repeat:no-repeat; + width:300px; + height:300px; +} +.file-icon { + width: 100%; + height: 100%; + &.audio { + background: url("../images/icons/audio.png"); + @include background-size(100% 100%); + } + &.video { + background: url("../images/icons/video.png"); + @include background-size(100% 100%); + } + &.ppt { + background: url("../images/icons/ppt.png"); + @include background-size(100% 100%); + } + &.generic { + background: url("../images/icons/generic.png"); + @include background-size(100% 100%); + } + &.code { + background: url("../images/icons/code.png"); + @include background-size(100% 100%); + } + &.excel { + background: url("../images/icons/excel.png"); + @include background-size(100% 100%); + } + &.word { + background: url("../images/icons/word.png"); + @include background-size(100% 100%); + } + &.pdf { + background: url("../images/icons/pdf.png"); + @include background-size(100% 100%); + } + &.patch { + background: url("../images/icons/patch.png"); + @include background-size(100% 100%); + } + &.image { + background: url("../images/icons/image.png"); + @include background-size(100% 100%); + } +} +.post-image__column { + position: relative; + width: 120px; + height: 100px; + float: left; + margin: 0 1em 1em 0; + &.custom-file { + width: 85px; + height: 100px; + } + .post__load { + height: 100%; + width: 100%; + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + } + .post__image { + height: 100%; + width: 100%; + border: 1px solid #E2E2E2; + background-color: #FFF; + background-repeat: no-repeat; + } + a { + text-decoration: none; + color: grey; + } +} diff --git a/web/sass-files/sass/partials/_font-awesome.scss b/web/sass-files/sass/partials/_font-awesome.scss new file mode 100644 index 000000000..2dcdc2207 --- /dev/null +++ b/web/sass-files/sass/partials/_font-awesome.scss @@ -0,0 +1,1801 @@ +/*! + * 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 new file mode 100644 index 000000000..239dd92c1 --- /dev/null +++ b/web/sass-files/sass/partials/_footer.scss @@ -0,0 +1,23 @@ +.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/_headers.scss b/web/sass-files/sass/partials/_headers.scss new file mode 100644 index 000000000..89bbaef2b --- /dev/null +++ b/web/sass-files/sass/partials/_headers.scss @@ -0,0 +1,215 @@ +.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; + color: #888; + margin-top: 2px; + } + &.popover { + white-space: normal; + } + } +} + +.channel-intro { + padding-bottom:5px; + margin: 0 1em 35px; + border-bottom: 1px solid lightgrey; + .intro-links { + margin: 0.5em 1.5em 0 0; + display: inline-block; + .fa { + margin-right: 5px; + } + } + .channel-intro-profile { + margin-top:5px; + margin-left: 63px; + } + .channel-intro-img { + float:left; + } + .channel-intro-title { + font-weight:bold; + } + .channel-intro-text { + margin-top:35px; + } +} + +// Team Header in Sidebar +.sidebar--left, .sidebar--menu { + .team__header { + padding: 0 15px 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 { + float: right; + background: none !important; + padding: 2px; + &.dropdown-toggle { + line-height: 1.8; + font-size: 1em; + color: #fff; + } + } + } + } + } +} + +#navbar { + .navbar-default { + .navbar-toggle { + &.menu-toggle { + padding: 0 1em; + } + } + } +} + +.channel-header { + width:100%; + border-left: none; + font-size: 14px; + line-height: 50px; + #member_popover { + width: 45px; + color: #999; + + } + &.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; + } +} diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss new file mode 100644 index 000000000..11cd4e9e4 --- /dev/null +++ b/web/sass-files/sass/partials/_mentions.scss @@ -0,0 +1,55 @@ +.mention { + color: #fff; + background: $primary-color; + position: relative; + z-index: 10; + padding-bottom: 1px; + @include border-radius(3px); + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.mentions--top { + position: absolute; + z-index:99999; + .mentions-box { + position:absolute; + background-color:#fff; + border:1px solid #ddd; + overflow:scroll; + bottom:0; + } +} + +.mentions-name { + position:relative; + width:100%; + background-color:#fff; + height:37px; + padding:2px; + z-index:101; +} + +.mentions-name:hover { + background-color:#e8eaed; +} + +.mentions-text { + font-color:black; +} + +.mention-img { + margin-right:10px; + height:32px; + width:32px; + border-radius: 10%; +} + +.mention-highlight { + background-color:#fff2bb; +} + +.mention-link { + color:$primary-color; +} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss new file mode 100644 index 000000000..43dbdc077 --- /dev/null +++ b/web/sass-files/sass/partials/_modal.scss @@ -0,0 +1,248 @@ +.modal { + &.image_modal { + .modal-backdrop.in { + @include opacity(0.7); + } + } + .remove__member { + float: right; + } + .modal-dialog { + max-width: 95%; + margin-left: auto; + margin-right: auto; + } + .modal-body { + max-height: 75%; + overflow: 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: none; + min-height: 56px; + @include clearfix; + .modal-title { + float: left; + } + .modal-action { + padding: 0; + margin: 0; + } + button.close { + margin-top: 0; + color: #fff; + @include opacity(1); + z-index: 5; + position: relative; + } + .btn { + margin-right: 10px; + &.btn-primary { + float: right; + margin-top: -4px; + position: relative; + i { + margin-right: 5px; + } + } + } + } + .no-channel-message { + text-align: center; + padding: 2em 1em; + .primary-message { + font-size: 1.2em; + } + .secondary-message { + font-size: 1.25em; + color: #888; + 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: 5px 10px; + } + } + .more-channel-table { + margin: 0; + table-layout: fixed; + p { + font-size: 0.9em; + overflow: hidden; + text-overflow: ellipsis; + color: #999; + margin: 5px 0; + } + .more-channel-name { + color: #444; + font-weight: bold; + font-size: 0.95em; + } + tbody { + > tr { + &:first-child { + td { + border: none; + } + } + td { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + &.td--action { + width: 70px; + vertical-align: middle; + } + } + } + } + } + .modal-image { + position:relative; + width:100%; + margin: 0 auto; + .image-wrapper { + padding: 4px; + background: #FFF; + position: relative; + max-width: 80%; + min-height: 280px; + min-width: 280px; + @include border-radius(4px); + display: table; + margin: 0 auto; + &:hover .modal-close { + @include opacity(1); + } + &.default { + width: 100%; + height: 80%; + } + .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); + cursor: pointer; + z-index: 9999; + } + > a { + display: table-cell; + vertical-align: middle; + } + img { + max-width: 100%; + max-height: 100%; + } + } + .image-content { + box-shadow: none; + background: rgba(0, 0, 0, 0); + width: 100%; + height: 100%; + padding: 0; + border: none; + display: table; + } + .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:0px; + left:0px; + right:0px; + background-color:rgba(0, 0, 0, 0.8); + @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; + margin: 4px; + &.footer--show { + @include opacity(1); + } + .image-links { + a, span { + float: right; + } + } + .text { + vertical-align:middle; + bottom:0; + color:white; + margin-left:5px; + } + } + } +} diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss new file mode 100644 index 000000000..62864afb7 --- /dev/null +++ b/web/sass-files/sass/partials/_navbar.scss @@ -0,0 +1,101 @@ +#navbar{ + input { + margin: 0px 5px 0px 2px; + } + .navbar-default { + position: absolute; + border: none; + min-height: 50px; + background: $primary-color; + .navbar-nav { + > li { + > a { + height: 50px; + padding: 0 1.3em; + i { + line-height: 50px; + } + } + } + } + .navbar-toggle { + float: left; + border-color: transparent; + border-radius: 0; + margin: 0; + padding: 0 10px; + line-height: 50px; + height: 50px; + z-index: 5; + .icon-bar { + background: #fff; + width: 21px; + } + &:hover, &:active, &:focus { + background: inherit; + } + } + .navbar-brand { + padding: 0 0.5em; + height: 50px; + line-height: 50px; + float: none; + font-size: 16px; + .heading { + margin-right: 3px; + 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; + right: -5px; + top: -5px; + z-index: 100; +} diff --git a/web/sass-files/sass/partials/_perfect-scrollbar.scss b/web/sass-files/sass/partials/_perfect-scrollbar.scss new file mode 100755 index 000000000..f253d0792 --- /dev/null +++ b/web/sass-files/sass/partials/_perfect-scrollbar.scss @@ -0,0 +1,120 @@ +.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 { + pointer-events: none; } + .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 { + pointer-events: none; } + .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/_post.scss b/web/sass-files/sass/partials/_post.scss new file mode 100644 index 000000000..6da516cf9 --- /dev/null +++ b/web/sass-files/sass/partials/_post.scss @@ -0,0 +1,380 @@ +.custom-textarea { + white-space:pre-wrap; + word-wrap:break-word; + background:transparent; + border:1px solid #ccc !important; + position:absolute; + top:0px; + height:auto; + resize: none; + line-height:20px; + min-height:36px; +} + +.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; + min-height:37px; +} + +#post-list { + .new-seperator { + text-align: center; + padding: 1em 0; + .new-seperator__hr { + border-color: #FFAF53; + margin: 0; + } + .new-seperator__text { + margin-top: -11px; + color: #FF8800; + background: #FFF; + display: inline-block; + padding: 0 1em; + font-weight: normal; + } + } + .date-seperator { + text-align: center; + margin: 1em 0; + height: 0; + &.hovered--after { + margin-bottom: 0; + padding-bottom: 1em; + background: #f6f6f6; + } + &.hovered--before { + margin-top: 0; + padding-top: 1em; + background: #f6f6f6; + } + .date-seperator__hr { + border-color: #ccc; + margin: 0; + } + .date-seperator__text { + margin-top: -13px; + line-height: 24px; + color: #555; + background: #FFF; + display: inline-block; + padding: 0 1em; + font-weight: 900; + @include border-radius(50px); + } + } + .post-list-holder-by-time { + background: #fff; + overflow-y: scroll; + width: 100%; + padding: 1em 0 0; + position: relative; + } + .post-list__table { + display: table; + table-layout: fixed; + width: 100%; + min-height: 100%; + .post-list__content { + display: table-cell; + vertical-align: bottom; + } + } + .more-messages-text { + margin-top: 2px; + margin-bottom: 5px; + display: block; + text-align: center; + outline: none; + border: none; + } + .beginning-messages-text { + margin-top: 2px; + margin-bottom: 5px; + display: block; + text-align: center; + color: grey; + } +} +.post-create__container { + form { + width: 100%; + padding: 0 1em; + margin: 0; + } + .post-create-body { + max-width: 850px; + padding: 0 0 2px; + position: relative; + .custom-textarea { + padding-top: 8px; + padding-right: 28px; + max-height: 160px; + overflow: auto; + line-height: 1.5; + } + .textarea-div { + padding-top: 8px; + padding-right: 30px; + max-height: 160px; + overflow: auto; + line-height: 1.5; + } + .btn-file { + right: 0; + position: absolute; + top: 1px; + color: #999; + @include single-transition(all, 0.15s); + font-size: 16px; + padding: 9px; + &:hover, &:active { + color: #444; + box-shadow: none; + } + } + textarea { + border: none; + box-shadow: none; + } + } + .post-create-footer { + @include clearfix; + padding: 0; + .msg-typing { + min-height: 20px; + line-height: 18px; + display: inline-block; + font-size: 13px; + color: #777; + } + } +} + +.post { + word-wrap: break-word; + padding: 0.4em 1em; + position: relative; + max-width: 100%; + @include legacy-pie-clearfix; + &:hover { + .post-header .post-header-col.post-header__reply { + .dropdown, .comment-icon__container { + @include opacity(1); + } + } + background: #f6f6f6; + } + &.post--comment { + &.other--root { + .post-comment { + border-left: 4px solid #EEE; + margin-left: 30px; + padding: 2px 0 2px 10px; + } + } + } + &.same--root { + .comment-icon__container { + @include opacity(0); + } + div.post-profile-img__container { + .post-profile-img { + visibility: hidden; + } + } + .post__content { + padding: 0; + } + .post-body { + border-left: 4px solid #EEE; + width: 570px; + margin-left: 30px; + padding-left: 10px; + .post-link { + display: none; + } + } + } + &.post--last { + .post-header { + .post-header-col.post-header__reply { + .dropdown-menu { + top: auto; + bottom: 25px; + } + } + } + } + .post-create-footer { + padding: 0; + } + p { + margin: 0 0 5px; + white-space: pre-wrap; + } + .comment-icon__container { + fill: $primary-color; + .comment-icon { + display: inline-block; + top: 3px; + position: relative; + margin-right: 3px; + fill: inherit; + } + path { + fill: inherit; + } + } + > div { + &.post-profile-img__container { + float: left; + .post-profile-img { + margin-right: 10px; + @include border-radius(3px); + } + } + &.post__content { + padding-left: 46px; + max-width: 100%; + @include legacy-pie-clearfix; + } + } + .post-image__columns { + @include legacy-pie-clearfix; + margin-top: 1em; + } + .post-info--hidden { + display: none; + } + .post-body { + max-width: 100%; + width: 600px; + float: left; + word-wrap: break-word; + .post-link { + @include clearfix; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; + } + } + .create-reply-form-wrap { + width: 100%; + margin-top: 5px; + form { + padding: 0; + } + .comment-btn { + display: none; + } + } + .post-header { + list-style-type: none; + margin: 0 0 1px; + padding-left: 0px; + &.post-header-post { + width: 200px; + text-align: right; + float: left; + padding-right: 15px; + } + &.post-info { + .post-profile-time { + width: 100px; + display: inline-block; + margin-left: 50px; + } + } + .post-header-col { + vertical-align: top; + display: inline-block; + margin-right: 10px; + &.post-header__reply { + min-width: 70px; + .dropdown-menu { + right: 0; + left: auto; + } + .dropdown { + min-width: 18px; + margin-right: 7px; + display: inline-block; + @include opacity(0); + } + } + } + .post-profile-time { + color: #a8adb7; + } + } + .post-comment { + } + .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: bold; + 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; + } + } + .msg-typing { + margin-top: 2px; + margin-left: 5px; + color: #a8adb7; + } + .post-grey { + color:lightgrey; + } + .post-reply { + clear: both; + width: 100%; + word-break: break-word; + .btn-file { + width: 40px; + } + } +} diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss new file mode 100644 index 000000000..972aef29b --- /dev/null +++ b/web/sass-files/sass/partials/_post_right.scss @@ -0,0 +1,77 @@ +.post-right__container { + + .post-right-root-message { + padding: 1em 1em 0; + } + + .post-right-comments-container { + position: relative; + padding: 0; + } + + .post { + &.post--root { + padding: 1em; + hr { + border-color: #DDD; + margin: 1em 0 0 0; + } + } + } + + .post-create__container { + .custom-textarea { + min-height: 100px; + } + } + +} +.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-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; +} + +.post-right-comment-time { + color: #a8adb7; +} diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss new file mode 100644 index 000000000..bed2f6324 --- /dev/null +++ b/web/sass-files/sass/partials/_responsive.scss @@ -0,0 +1,637 @@ +@media screen and (max-width: 1800px) { + .inner__wrap { + &.move--left { + .post { + &.post--comment { + &.other--root { + .post-comment { + margin-left: 0; + } + } + } + &.same--root { + margin-left: 60px; + padding-left: 10px; + border-left: 4px solid #EEE; + div.post-profile-img__container { + .post-profile-img { + display: none; + } + } + .post__content { + width: 825px; + } + .post-body { + padding-left: 0; + border: none; + margin: 0; + } + } + .post__content { + width: 920px; + } + .post-header { + &.post-header-post { + width: auto; + float: none; + text-align: left; + padding-right: 0; + } + &.post-info { + display: none; + float: none; + } + .post-header-col { + &.post-header__reply { + float: right; + text-align: right; + .reply-link { + margin-right: 0; + } + .dropdown { + margin-left: 10px; + } + } + } + .post-info--hidden { + display: inline; + .post-info { + display: inline; + .post-profile-time { + margin: 0; + } + } + } + } + .post-body { + float: none; + width: 750px; + } + } + } + } +} +@media screen and (max-width: 1440px) { + .post-create__container { + .post-create-body { + max-width: 810px; + } + } + .post { + &.post--comment { + &.other--root { + .post-comment { + margin-left: 0; + } + } + } + &.same--root { + margin-left: 60px; + padding-left: 10px; + border-left: 4px solid #EEE; + div.post-profile-img__container { + .post-profile-img { + display: none; + } + } + .post__content { + width: 825px; + } + .post-body { + padding-left: 0; + border: none; + margin: 0; + } + } + .post__content { + width: 880px; + } + .post-header { + &.post-header-post { + width: auto; + float: none; + text-align: left; + padding-right: 0; + } + &.post-info { + display: none; + float: none; + } + .post-header-col { + &.post-header__reply { + float: right; + margin: 0; + } + } + .post-info--hidden { + display: inline; + .post-info { + display: inline; + .post-profile-time { + width: auto; + margin: 0; + } + } + } + } + .post-body { + float: none; + width: 750px; + } + } +} + +@media screen and (max-width: 1140px) { + .post { + .post__content { + width: 100%; + } + .post-header { + .post-header-col { + &.post-header__reply { + .reply-link { + margin-right: 0; + } + .dropdown { + margin-left: 10px; + } + } + } + } + } +} + +@media screen and (max-width: 960px) { + .post { + &:hover { + .post-header .post-header-col.post-header__reply { + .comment-icon__container__hide { + @include opacity(0); + } + } + } + .post-header .post-header-col.post-header__reply { + .comment-icon__container__hide { + @include opacity(0); + } + .dropdown { + @include opacity(1); + } + .comment-icon__container__show { + @include opacity(1); + } + } + } + .signup-team__container { + font-size: 1em; + } + .post { + .post-header { + .post-header-col { + &.post-header__reply { + text-align: right; + display: inline-block; + } + } + } + } +} + +@media screen and (min-width: 768px) { + .second-bar { + display: none; + } +} + +@media screen and (max-width: 768px) { + #post-list { + .date-seperator { + &.hovered--after { + background: none; + } + &.hovered--before { + background: none; + } + } + } + .post { + &.same--root { + margin-left: 25px; + } + &:hover { + background: none; + } + } + .signup-team__container { + padding: 30px 0; + margin-bottom: 30px; + font-size: 0.9em; + .signup-team__name { + font-size: 2em; + } + } + .modal { + .modal-header { + padding-left: 20px; + padding-right: 20px; + .modal-action { + margin-top: 10px; + } + button.close { + width: 35px; + height: 32px; + margin: -5px -10px 0; + } + .modal-title { + float: none; + } + .btn { + &.btn-primary { + margin: 8px 0 0 -10px; + float: none; + } + } + } + } + .settings-modal { + &.display--content { + .modal-header { + display: none; + } + .settings-table { + display: block; + .settings-content { + display: block; + .section-edit { + text-align: left; + } + } + .settings-links { + display: none; + } + .modal-header { + display: block; + position: fixed; + width: 100%; + z-index: 5; + } + .user-settings { + .tab-header { + display: none; + } + .divider-dark.first { + display: none; + } + } + } + } + .settings-table { + .settings-content { + padding: 0; + display: none; + .user-settings { + padding: 70px 20px 30px; + } + } + .settings-links { + background: #fff; + } + .nav { + > li { + > a { + border-top: 1px solid #ddd; + font-size: 1.1em; + line-height: 2.7; + color: #555; + .glyphicon { + margin-left: 7px; + } + } + &.active, &:hover { + a { + color: #555; + background: #fff; + } + } + } + } + } + } + #post-create { + .post-create-body { + padding-bottom: 10px; + } + .post-create-footer .msg-typing { + display: none; + } + } + .preview-container { + .preview-div { + margin-top: 0; + } + .remove-preview { + width: 50px; + height: 50px; + left: 50%; + top: 50%; + background: #444; + margin: -25px 0 0 -25px; + @include border-radius(50px); + text-align: center; + &:after { + display: none; + } + i { + line-height: 50px; + top: auto; + right: auto; + position: relative; + font-size: 28px; + } + } + } + #navbar { + .navbar-default { + .navbar-header { + 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; + } + } + } + #user_settings { + border-right: none; + } + body { + &.white { + .row.content { + margin-bottom: -185px; + } + } + } + .footer, .footer-pane, .footer-push { + height: 185px; + } + .footer-pane { + .footer-link { + padding: 0; + width: 100%; + text-align: right; + line-height: 1.7; + &.copyright { + width: 100%; + } + } + } + .search-bar__container { + padding: 10px 8px 13px; + background: $primary-color; + color: #fff; + .search__form { + border: none; + padding: 0 10px 0 30px; + .form-control { + background: none; + color: #fff; + border-bottom: 1px solid #fff; + border-bottom: 1px solid rgba(#fff, 0.7); + border-radius: 0; + padding: 0 0 0 23px; + } + ::-webkit-input-placeholder { + color: #fff; + } + + :-moz-placeholder { /* Firefox 18- */ + color: #fff; + } + + ::-moz-placeholder { /* Firefox 19+ */ + color: #fff; + } + + :-ms-input-placeholder { + color: #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: 105px; + } + .team__header { + display: none; + @include clearfix; + } + .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; + } + } + } + } + } + .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; + } + } + .inner__wrap { + &.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 { + padding-bottom: 40px; + .modal-close { + @include opacity(1); + } + } + .modal-button-bar { + @include opacity(1); + } + } + } + .app__content { + padding-top: 50px; + margin: 0; + .channel__wrap & { + padding-top: 50px; + } + .channel-header { + display: none; + } + } + + + .channel__wrap { + .row { + &.header { + display: block; + } + } + } + + .post { + .post-profile-img__container { + display: none; + } + &.post--comment { + &.other--root { + .post-comment { + margin-left: 11px; + } + } + } + > div { + &.post__content { + padding: 0; + } + } + } + + .post-comments { + padding: 9px 21px 10px 10px !important; + } +} +@media screen and (max-width: 480px) { + .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; + } + } + } +} diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss new file mode 100644 index 000000000..ca5d25720 --- /dev/null +++ b/web/sass-files/sass/partials/_search.scss @@ -0,0 +1,95 @@ +.search-bar__container { + padding: 8px 8px 8px 0; +} +.sidebar__collapse { + width: 20px; + height: 30px; + position: absolute; + top: 10px; + left: 6px; + cursor: pointer; + background: url("../images/arrow-left.png") center no-repeat; + @include background-size(10px 15px); + z-index: 5; + display: none; +} +.sidebar__search-icon { + position: absolute; + left: 40px; + top: 18px; + @include opacity(0.8); + display: none; +} +.search__form { + .search-bar__container & { + margin: 0; + border: 1px solid #DDD; + @include border-radius(2px); + width: 300px; + } + .sidebar--right & { + width: 100%; + } + .search-bar-box { + height: 40px; + border: 1px solid #ddd; + 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; +} + +.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 { + border-top: $border-gray; + padding: 10px 1em; + margin: 0; + cursor: pointer; + &:first-child { + border: none; + } + .search-channel__name { + font-weight: bold; + margin: 0 0 10px 0; + } +} + +.search-item-time { + color: #a8adb7; +} + +.search-results-none { + padding: 10px; +} + +.search-highlight.theme, .search-highlight { + background-color: #FFF2BB; +} diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss new file mode 100644 index 000000000..dbaab8b58 --- /dev/null +++ b/web/sass-files/sass/partials/_settings.scss @@ -0,0 +1,222 @@ +.user-settings { + background: #fff; + min-height:300px; +} + +.settings-modal { + width:800px; + max-width: 100%; + .modal-back { + width: 8px; + height: 13px; + background: url("../images/arrow-left.png"); + @include background-size(100% 100%); + margin-right: 10px; + display: inline-block; + cursor: pointer; + } + .modal-body { + padding: 0; + } + li { + list-style: none; + } + .settings-table { + display: table; + width: 100%; + > div { + display: table-cell; + vertical-align: top; + } + .settings-links { + width: 180px; + background: #FAFAFA; + border-right: 1px solid #DDD; + } + .settings-content { + padding: 0px 20px 30px; + .modal-header { + display: none; + } + .section-min { + padding: 1em 0; + margin-bottom: 0; + @include clearfix; + } + + .section-max { + background: #f2f2f2; + padding: 1em 0; + margin-bottom: 0; + @include clearfix; + .section-title { + margin-bottom: 10px; + } + } + + .section-title { + margin-bottom: 5px; + font-weight: bold; + } + + .section-edit { + text-align: right; + margin-bottom: 5px; + } + + .section-describe { + color:grey; + } + + .divider-dark { + border-bottom:1px solid #aaaaaa; + } + + .divider-light { + border-bottom:1px solid lightgrey; + } + + .setting-list { + padding: 0; + list-style-type:none; + } + + .mentions-input { + margin-top: 10px; + } + + .setting-list-item { + margin-top:7px; + .has-error { + color: #a94442; + } + .control-label { + color: #555; + } + hr { + border-color: #ccc; + } + } + + + } + } + .nav-pills { + > li { + margin: 0; + a { + border-radius: 0; + color: #777; + } + .glyphicon { + width: 25px; + top: 2px; + } + &:hover { + a { + background: #E6F2FA; + } + } + &.active { + a { + color: #111; + background-color: #E1E1E1; + } + } + } + } + h3 { + font-size: em(20px); + } +} + +#user_settings { + padding: 0 0.5em; + border-right: 1px solid #ddd; + max-width: 800px; +} + +.channel-settings { + padding: 0 10px; +} + +.tab-header { + margin-bottom:1em; +} + +.setting-name { + color:grey; + font-weight:500; +} + +.profile-img { + width:158px; + max-height:128px; +} + +.sel-btn { + margin-right:5px; +} + +.member-list-holder { + background-color:#fff; +} + +.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(3px); + margin-right: 8px; + } + .member-name { + font-weight:500; + display: block; + } + + .member-email { + color:darkgrey; + display: block; + } + + .member-role, .member-drop { + position:absolute; + right:15px; + top:13px; + color:#414142; + } +} + +.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; +} diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss new file mode 100644 index 000000000..b1dd470d2 --- /dev/null +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -0,0 +1,95 @@ +.sidebar--left { + position: absolute; + width: 220px; + left: 0; + height: 100%; + border-right: $border-gray; + padding: 0 0 2em 0; + background: #fafafa; + &.sidebar--padded { + padding-top: 44px; + } + .search__form { + margin: 0; + padding: 1em 1em 0; + display: none; + } + > div { + height: 100%; + position: absolute; + padding-bottom: 70px; + width: 100%; + } + .badge { + background-color: $primary-color; + } + .status { + position:relative; + top:1px; + margin-right: 3px; + .online--icon { + fill: #7DBE00; + } + } + .nav-pills__container { + height: 100%; + position: relative; + overflow: auto; + } + .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; + color: #999; + &.unread-title { + color: #333; + font-weight: bold; + } + &:hover, &:focus { + background: #e6f2fa; + } + } + &.active { + a, a:hover, a:focus { + color: #111; + background-color: #e1e1e1; + border-radius: 0; + } + } + } + } + .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; + } + } +} diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/partials/_sidebar--menu.scss new file mode 100644 index 000000000..4366b1a6c --- /dev/null +++ b/web/sass-files/sass/partials/_sidebar--menu.scss @@ -0,0 +1,66 @@ +.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: #444; + line-height: 40px; + padding: 0 15px; + .glyphicon { + width: 25px; + } + } + } + } +} diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss new file mode 100644 index 000000000..d6000a515 --- /dev/null +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -0,0 +1,83 @@ +.sidebar--right { + position: absolute; + width: 400px; + height: 100%; + right: 0px; + padding: 0 0 2em 0; + background: #fff; + @include single-transition(transform, 0.5s, ease); + right: -320px; + &.move--left { + right: 0; + } + .sidebar-right__body { + border-left: $border-gray; + border-top: $border-gray; + } + .post { + .post-header { + .post-header-col { + &.post-header__reply { + text-align: right; + float: right; + } + } + } + } + .post-create__container { + .post-create-footer { + padding-top: 10px; + } + } + .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; + background: url("../images/closeSidebar.png"); + @include background-size(100% 100%); + opacity: 0.5; + float: right; + outline: none; + border: none; + @include single-transition(all, 0.2s, ease-in); + &:hover, &:active { + opacity: 0.8; + } + } + .sidebar--right__header { + font-size: 1em; + text-transform: uppercase; + color: #444; + height: 44px; + padding: 0 1em; + line-height: 44px; + background: #F5F5F5; + border-bottom: $border-gray; + } + .sidebar--right__subheader { + font-size: 1em; + text-transform: uppercase; + color: #999; + font-weight: 400; + color: #888; + height: 44px; + line-height: 44px; + padding: 0 1em; + } +} + +.sidebar-right-container { + height: 100%; +} diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss new file mode 100644 index 000000000..11ccc0fc9 --- /dev/null +++ b/web/sass-files/sass/partials/_signup.scss @@ -0,0 +1,115 @@ +.signup-header { + width:100%; + line-height: 33px; + padding: 0 1em 0.2em; + background: #EEE; +} +.signup-team__container { + padding: 100px 0px 50px 0px; + max-width: 340px; + margin: 0 auto; + font-size: 1.1em; + position: relative; + h1, h2, h3, h4, h5, h6, p { + line-height: 1.3; + } + h2 { + font-weight: 600; + margin-bottom: 0.5em; + letter-spacing: -0.5px; + font-size: em(30px); + } + h3 { + font-weight: 600; + margin: 0 0 1.3em 0; + font-size: 1.4em; + } + h4 { + font-size: em(18px); + font-weight: 600; + margin-bottom: 1em; + } + p { + color: #555; + line-height: 1.5; + margin-bottom: 1em; + .black, &.black { + color: #000; + } + } + form { + margin-bottom: 0.8em; + } + .external-link { + position: absolute; + bottom: 0; + left: 0; + } + .signup-team__name { + font-size: 2.2em; + font-weight: 600; + text-transform: uppercase; + } + .signup-team__subdomain { + font-size: 1.5em; + padding-left: 1em; + } + .form-control { + height: em(38px); + } + .btn { + padding: em(7px) em(15px); + font-weight: 600; + font-size: em(13px); + &.btn-default { + color: #444; + } + .glyphicon { + &.glyphicon-ok, &.glyphicon-refresh { + margin-right: 0.3em; + left: -5px; + font-size: 0.9em; + } + &.glyphicon-chevron-right { + margin-left: 0.3em; + font-size: 0.8em; + right: -2px; + top: 0px; + } + &.glyphicon-chevron-left { + margin-right: 0.3em; + font-size: 0.8em; + left: -2px; + top: 0px; + } + } + } + .has-error { + .control-label { + margin-top: 5px; + } + } + .reset-form { + @include border-radius(3px); + position: relative; + font-size: 0.95em; + p { + color: inherit; + } + } +} + +.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: 700; +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_variables.scss b/web/sass-files/sass/partials/_variables.scss new file mode 100644 index 000000000..eb1f3eef3 --- /dev/null +++ b/web/sass-files/sass/partials/_variables.scss @@ -0,0 +1,16 @@ +@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; + +// Animation +.glyphicon-refresh-animate { + -animation: spin .7s infinite linear; + -webkit-animation: spin2 .7s infinite linear; +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss new file mode 100644 index 000000000..de18aa08a --- /dev/null +++ b/web/sass-files/sass/partials/_videos.scss @@ -0,0 +1,59 @@ +.video-div { + position:relative; + max-width: 480px; + .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 { + color:grey; + font-size:15px; + font-weight:200; + margin:0px; + padding:0px; +} + +.video-uploader { + font-size:15px; + margin-top:3px; + margin-bottom: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); +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_welcome.scss b/web/sass-files/sass/partials/_welcome.scss new file mode 100644 index 000000000..7f2354a36 --- /dev/null +++ b/web/sass-files/sass/partials/_welcome.scss @@ -0,0 +1,13 @@ +.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/styles.scss b/web/sass-files/sass/styles.scss new file mode 100644 index 000000000..8446f1c01 --- /dev/null +++ b/web/sass-files/sass/styles.scss @@ -0,0 +1,34 @@ +/* Welcome to Compass. + * In this file you should write your main styles. (or centralize your imports) + * Import this file using the following HTML or equivalent: + * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ + +// Base Css +@import "compass/utilities"; +@import "compass/css3"; +@import "partials/variables"; +@import "partials/perfect-scrollbar"; +@import "partials/font-awesome"; +@import "partials/base"; + +// Channel Css +@import "partials/headers"; +@import "partials/footer"; +@import "partials/content"; +@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/signup"; +@import "partials/files"; +@import "partials/videos"; +@import "partials/settings"; +@import "partials/modal"; +@import "partials/mentions"; +@import "partials/error"; + +// Responsive Css +@import "partials/responsive"; |