diff options
Diffstat (limited to 'webapp/sass')
60 files changed, 9205 insertions, 0 deletions
diff --git a/webapp/sass/base/_module.scss b/webapp/sass/base/_module.scss new file mode 100644 index 000000000..987b9200b --- /dev/null +++ b/webapp/sass/base/_module.scss @@ -0,0 +1,3 @@ +// Only for combining all the files in this folder +@import 'typography'; +@import 'structure'; diff --git a/webapp/sass/base/_structure.scss b/webapp/sass/base/_structure.scss new file mode 100644 index 000000000..56888f8dc --- /dev/null +++ b/webapp/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/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss new file mode 100644 index 000000000..676a2c405 --- /dev/null +++ b/webapp/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/webapp/sass/components/_alerts.scss b/webapp/sass/components/_alerts.scss new file mode 100644 index 000000000..49ca3e8af --- /dev/null +++ b/webapp/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/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss new file mode 100644 index 000000000..bb8efbb14 --- /dev/null +++ b/webapp/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/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss new file mode 100644 index 000000000..f48e12c87 --- /dev/null +++ b/webapp/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/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss new file mode 100644 index 000000000..661b25d94 --- /dev/null +++ b/webapp/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/webapp/sass/components/_error-bar.scss b/webapp/sass/components/_error-bar.scss new file mode 100644 index 000000000..2b74a33ae --- /dev/null +++ b/webapp/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/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss new file mode 100644 index 000000000..b9e2b5f7d --- /dev/null +++ b/webapp/sass/components/_files.scss @@ -0,0 +1,294 @@ +@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; + background-image: url('~images/load.gif'); +} + +.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/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss new file mode 100644 index 000000000..5e3311182 --- /dev/null +++ b/webapp/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/webapp/sass/components/_links.scss b/webapp/sass/components/_links.scss new file mode 100644 index 000000000..f31008b4f --- /dev/null +++ b/webapp/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/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss new file mode 100644 index 000000000..98efc599d --- /dev/null +++ b/webapp/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/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss new file mode 100644 index 000000000..a8e8a99f7 --- /dev/null +++ b/webapp/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/webapp/sass/components/_module.scss b/webapp/sass/components/_module.scss new file mode 100644 index 000000000..24488df96 --- /dev/null +++ b/webapp/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/webapp/sass/components/_oauth.scss b/webapp/sass/components/_oauth.scss new file mode 100644 index 000000000..cd8382a5c --- /dev/null +++ b/webapp/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/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss new file mode 100644 index 000000000..de66b67a7 --- /dev/null +++ b/webapp/sass/components/_popover.scss @@ -0,0 +1,185 @@ +@charset 'UTF-8'; +@import 'compass/css3/transition'; + +.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/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss new file mode 100644 index 000000000..4ecb38b1f --- /dev/null +++ b/webapp/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/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss new file mode 100644 index 000000000..faf0b8177 --- /dev/null +++ b/webapp/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/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss new file mode 100644 index 000000000..125a3cf32 --- /dev/null +++ b/webapp/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/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss new file mode 100644 index 000000000..44c10edb9 --- /dev/null +++ b/webapp/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/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss new file mode 100644 index 000000000..f15919009 --- /dev/null +++ b/webapp/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/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss new file mode 100644 index 000000000..91db750bd --- /dev/null +++ b/webapp/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/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss new file mode 100644 index 000000000..71bef0d7f --- /dev/null +++ b/webapp/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/webapp/sass/layout/_footer.scss b/webapp/sass/layout/_footer.scss new file mode 100644 index 000000000..5624e6376 --- /dev/null +++ b/webapp/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/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss new file mode 100644 index 000000000..1f51603cc --- /dev/null +++ b/webapp/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/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss new file mode 100644 index 000000000..0a6b9f920 --- /dev/null +++ b/webapp/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/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss new file mode 100644 index 000000000..307060ac3 --- /dev/null +++ b/webapp/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/webapp/sass/layout/_module.scss b/webapp/sass/layout/_module.scss new file mode 100644 index 000000000..39ab2c6f8 --- /dev/null +++ b/webapp/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/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss new file mode 100644 index 000000000..65c62cb17 --- /dev/null +++ b/webapp/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/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss new file mode 100644 index 000000000..595577564 --- /dev/null +++ b/webapp/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/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss new file mode 100644 index 000000000..ce055035d --- /dev/null +++ b/webapp/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/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss new file mode 100644 index 000000000..ece054a15 --- /dev/null +++ b/webapp/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/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss new file mode 100644 index 000000000..9438491f9 --- /dev/null +++ b/webapp/sass/layout/_sidebar-menu.scss @@ -0,0 +1,71 @@ +@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 { + 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/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss new file mode 100644 index 000000000..e1a7d7641 --- /dev/null +++ b/webapp/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/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss new file mode 100644 index 000000000..d6e367218 --- /dev/null +++ b/webapp/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/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss new file mode 100644 index 000000000..dcabb807f --- /dev/null +++ b/webapp/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/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss new file mode 100644 index 000000000..4a1397143 --- /dev/null +++ b/webapp/sass/responsive/_mobile.scss @@ -0,0 +1,900 @@ +@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 { + 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/webapp/sass/responsive/_module.scss b/webapp/sass/responsive/_module.scss new file mode 100644 index 000000000..a799c145e --- /dev/null +++ b/webapp/sass/responsive/_module.scss @@ -0,0 +1,4 @@ +@charset 'UTF-8'; +@import 'desktop'; +@import 'tablet'; +@import 'mobile'; diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss new file mode 100644 index 000000000..14641cfa5 --- /dev/null +++ b/webapp/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/webapp/sass/routes/_access-history.scss b/webapp/sass/routes/_access-history.scss new file mode 100644 index 000000000..7ede7b085 --- /dev/null +++ b/webapp/sass/routes/_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/webapp/sass/routes/_activity-log.scss b/webapp/sass/routes/_activity-log.scss new file mode 100644 index 000000000..6e8d0a925 --- /dev/null +++ b/webapp/sass/routes/_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/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss new file mode 100644 index 000000000..f83ce487e --- /dev/null +++ b/webapp/sass/routes/_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/webapp/sass/routes/_docs.scss b/webapp/sass/routes/_docs.scss new file mode 100644 index 000000000..24e96772b --- /dev/null +++ b/webapp/sass/routes/_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/webapp/sass/routes/_error-page.scss b/webapp/sass/routes/_error-page.scss new file mode 100644 index 000000000..8cd0716ca --- /dev/null +++ b/webapp/sass/routes/_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/webapp/sass/routes/_loading.scss b/webapp/sass/routes/_loading.scss new file mode 100644 index 000000000..8d6552957 --- /dev/null +++ b/webapp/sass/routes/_loading.scss @@ -0,0 +1,50 @@ +@charset 'UTF-8'; + +@import "compass/css3/animation"; + +.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/webapp/sass/routes/_module.scss b/webapp/sass/routes/_module.scss new file mode 100644 index 000000000..48c1af1d9 --- /dev/null +++ b/webapp/sass/routes/_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/webapp/sass/routes/_print.scss b/webapp/sass/routes/_print.scss new file mode 100644 index 000000000..e7380e21c --- /dev/null +++ b/webapp/sass/routes/_print.scss @@ -0,0 +1,122 @@ +@charset 'UTF-8'; + +@media print { + * { + background: transparent !important; + color: black !important; + text-shadow: none !important; + } + + .post-list__content, + .post-list__table, + .app__content { + display: block; + } + + a:not(.mention-link), + a:not(.mention-link):visited { + text-decoration: underline; + } + + a[href^=http]:after { + content: ' <' attr(href) '> '; + } + + tr, + img, + pre, + blockquote, + code, + .post, + .date-separator { + page-break-inside: avoid; + } + + .post__header { + page-break-after: avoid; + } + + thead { + display: table-header-group; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + #sidebar-left, + #sidebar-right, + #channel-header, + #post-create, + #post-list .more-messages-text, + .post .post__header .col__reply, + .post .post__content > div.post__img, + .attachment__content, + .post__body .img-div, + .post-image__thumbnail, + .post.post--system, + #archive-link-home, + .channel-intro { + display: none; + } + + #post-list, + #channel_view, + #post-list .post-list-holder-by-time { + overflow: visible; + overflow-y: visible; + } + + #app-content { + margin-left: 0; + } + + #channel_view .inner-wrap.move--left { + margin-right: 0; + } + + .post-image__columns > div:first-child:before { + content: 'Attachments:'; + display: block; + font-weight: bold; + } + + .post-image__column { + width: inherit; + display: inline; + height: inherit; + background: transparent; + border-color: transparent; + border: 0 none; + } + + .post-image__details { + width: 100%; + border: 0 none; + + .post-image__name:before { + content: '['; + } + + .post-image__name:after { + content: ': ' attr(href) ']'; + } + + .post-image__name + div { + display: none; + } + } + + + .date-separator .separator__hr, + .new-separator .separator__hr { + top: 1.7em; + } +} diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss new file mode 100644 index 000000000..3c735be3c --- /dev/null +++ b/webapp/sass/routes/_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/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss new file mode 100644 index 000000000..53c59c222 --- /dev/null +++ b/webapp/sass/routes/_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/webapp/sass/routes/_statistics.scss b/webapp/sass/routes/_statistics.scss new file mode 100644 index 000000000..b48c137c3 --- /dev/null +++ b/webapp/sass/routes/_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/webapp/sass/styles.scss b/webapp/sass/styles.scss new file mode 100644 index 000000000..88c098f18 --- /dev/null +++ b/webapp/sass/styles.scss @@ -0,0 +1,18 @@ +@charset "UTF-8"; + +/* 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" /> */ + +@import "compass/utilities"; +@import "compass/css3"; + +// styles.scss +@import 'vendors/module'; +@import 'utils/module'; +@import 'base/module'; +@import 'routes/module'; +@import 'components/module'; +@import 'layout/module'; +@import 'responsive/module';
\ No newline at end of file diff --git a/webapp/sass/utils/_animations.scss b/webapp/sass/utils/_animations.scss new file mode 100644 index 000000000..767e30847 --- /dev/null +++ b/webapp/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/webapp/sass/utils/_functions.scss b/webapp/sass/utils/_functions.scss new file mode 100644 index 000000000..9013920fa --- /dev/null +++ b/webapp/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/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss new file mode 100644 index 000000000..28723e1a5 --- /dev/null +++ b/webapp/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/webapp/sass/utils/_module.scss b/webapp/sass/utils/_module.scss new file mode 100644 index 000000000..e7f0c0c46 --- /dev/null +++ b/webapp/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/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss new file mode 100644 index 000000000..065c37a17 --- /dev/null +++ b/webapp/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/webapp/sass/vendors/_colorpicker.scss b/webapp/sass/vendors/_colorpicker.scss new file mode 100644 index 000000000..291145e80 --- /dev/null +++ b/webapp/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/webapp/sass/vendors/_font-awesome.scss b/webapp/sass/vendors/_font-awesome.scss new file mode 100644 index 000000000..49ab318cd --- /dev/null +++ b/webapp/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/webapp/sass/vendors/_module.scss b/webapp/sass/vendors/_module.scss new file mode 100644 index 000000000..ed8a124a2 --- /dev/null +++ b/webapp/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/webapp/sass/vendors/_perfect-scrollbar.scss b/webapp/sass/vendors/_perfect-scrollbar.scss new file mode 100755 index 000000000..212a22687 --- /dev/null +++ b/webapp/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; +} |