diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-03-17 08:36:53 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-03-17 08:36:53 -0400 |
commit | be07d634645ac1f095f7d4bec182a604075c6138 (patch) | |
tree | 8d2f59791d2d418b93e4fff227fef2405be7dfd0 /webapp/sass/components | |
parent | cba59d4eb6ef0f65304bc72339c676ebfd653e2b (diff) | |
parent | 64321f88f358e23489559d675b9194f856c0175c (diff) | |
download | chat-be07d634645ac1f095f7d4bec182a604075c6138.tar.gz chat-be07d634645ac1f095f7d4bec182a604075c6138.tar.bz2 chat-be07d634645ac1f095f7d4bec182a604075c6138.zip |
Merge pull request #2448 from asaadmahmoodspin/ui-improvements
Updating sass lint stuff with other scss improvements
Diffstat (limited to 'webapp/sass/components')
-rw-r--r-- | webapp/sass/components/_alerts.scss | 6 | ||||
-rw-r--r-- | webapp/sass/components/_buttons.scss | 8 | ||||
-rw-r--r-- | webapp/sass/components/_emoticons.scss | 12 | ||||
-rw-r--r-- | webapp/sass/components/_error-bar.scss | 23 | ||||
-rw-r--r-- | webapp/sass/components/_files.scss | 154 | ||||
-rw-r--r-- | webapp/sass/components/_inputs.scss | 21 | ||||
-rw-r--r-- | webapp/sass/components/_links.scss | 17 | ||||
-rw-r--r-- | webapp/sass/components/_mentions.scss | 38 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 257 | ||||
-rw-r--r-- | webapp/sass/components/_oauth.scss | 14 | ||||
-rw-r--r-- | webapp/sass/components/_popover.scss | 99 | ||||
-rw-r--r-- | webapp/sass/components/_scrollbar.scss | 29 | ||||
-rw-r--r-- | webapp/sass/components/_search.scss | 107 | ||||
-rw-r--r-- | webapp/sass/components/_suggestion-list.scss | 20 | ||||
-rw-r--r-- | webapp/sass/components/_tooltip.scss | 4 | ||||
-rw-r--r-- | webapp/sass/components/_tutorial.scss | 115 | ||||
-rw-r--r-- | webapp/sass/components/_videos.scss | 61 |
17 files changed, 506 insertions, 479 deletions
diff --git a/webapp/sass/components/_alerts.scss b/webapp/sass/components/_alerts.scss index 49ca3e8af..cb4c9c9e1 100644 --- a/webapp/sass/components/_alerts.scss +++ b/webapp/sass/components/_alerts.scss @@ -1,13 +1,13 @@ @charset 'UTF-8'; .alert { - padding: 8px 12px; @include border-radius($border-rad); + padding: 8px 12px; } .alert--confirm { display: inline-block; float: left; - padding: 4px 10px; margin: 1px 0 0 10px; -}
\ No newline at end of file + padding: 4px 10px; +} diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss index bb8efbb14..efef11ce9 100644 --- a/webapp/sass/components/_buttons.scss +++ b/webapp/sass/components/_buttons.scss @@ -5,19 +5,19 @@ @include border-radius($border-rad); &.btn-primary { + background: $primary-color; border-color: transparent; - background: $color--primary; &:hover, &:focus, &:active { - background: $color--primary--hover; + background: $primary-color--hover; } } &.btn-inactive { + background: $light-gray; border-color: transparent; - background: #707070; - color: #fff; + color: $white; } } diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index 661b25d94..80a800863 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -1,27 +1,27 @@ @charset 'UTF-8'; .emoticon { - width: 1.5em; - height: 1.5em; + background-size: contain; display: inline-block; + height: 1.5em; margin-bottom: .25em; - background-size: contain; + width: 1.5em; } .emoticon-suggestion { @include clearfix; - width: 100%; - height: 30px; cursor: pointer; font-size: 13px; + height: 30px; line-height: 30px; + width: 100%; } .emoticon-suggestion__image { - width: 20px; height: 20px; margin: 6px 6px 0 5px; padding: 0; text-align: center; vertical-align: top; + width: 20px; } diff --git a/webapp/sass/components/_error-bar.scss b/webapp/sass/components/_error-bar.scss index 2b74a33ae..cda7d25bd 100644 --- a/webapp/sass/components/_error-bar.scss +++ b/webapp/sass/components/_error-bar.scss @@ -1,29 +1,28 @@ @charset 'UTF-8'; .error-bar { - background-color: #09f; - text-align: center; - position: relative; - color: #fff; + background-color: darken($primary-color, 5%); + color: $white; + padding: 5px 30px; position: absolute; + text-align: center; top: 0; width: 100%; z-index: 9999; - padding: 5px 30px; &__close { - position: absolute; - right: 0; - top: 0; - color: #fff; + color: $white; + font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; - text-decoration: none; padding: 0 10px; - font-family: 'Open Sans', sans-serif; + position: absolute; + right: 0; + text-decoration: none; + top: 0; &:hover { - color: #fff; + color: $white; text-decoration: none; } } diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss index b9e2b5f7d..b854312c1 100644 --- a/webapp/sass/components/_files.scss +++ b/webapp/sass/components/_files.scss @@ -1,27 +1,31 @@ @charset 'UTF-8'; .file-preview__container { - position: relative; + height: 100px; margin: 1px 0 10px; - width: 100%; max-height: 100px; - height: 100px; - white-space: nowrap; overflow-x: auto; overflow-y: hidden; + position: relative; + white-space: nowrap; + width: 100%; } .file-preview { + @include clearfix; + border: 1px solid $light-gray; display: inline-block; - width: 120px; height: 100px; margin: 0 0 0 10px; position: relative; - border: 1px solid #ddd; - @include clearfix; + width: 120px; - &:hover .file-preview__remove:after { - @include opacity(1); + &:hover { + .file-preview__remove { + &:after { + @include opacity(1); + } + } } &:first-child { @@ -29,13 +33,13 @@ } .spinner { - position: absolute; - top: 50%; + height: 32px; left: 50%; margin-left: -16px; margin-top: -16px; + position: absolute; + top: 50%; width: 32px; - height: 32px; } } @@ -46,14 +50,15 @@ } .file-preview__remove { - position: absolute; - width: 100%; height: 100%; left: 0; + position: absolute; top: 0; + width: 100%; &:after { - background: rgba(0, 0, 0, .4); + @include opacity(0); + @include alpha-property(background, $black, .4); content: ''; height: 100%; left: 0; @@ -61,33 +66,31 @@ position: absolute; top: 0; width: 100%; - @include opacity(0); } i { - top: 5px; - right: 5px; - position: absolute; - color: #fff; + color: $white; cursor: pointer; - z-index: 5; opacity: inherit; - text-shadow: 0 0px 3px #444; - text-shadow: 0 0px 3px rgba(0, 0, 0, .7); + position: absolute; + right: 5px; + text-shadow: 0 0 3px alpha-color($black, .7); + top: 5px; + z-index: 5; } } .image-comment { background-position: left top; background-repeat: no-repeat; - width: 300px; height: 300px; + width: 300px; } .file-icon { - width: 100%; height: 100%; + width: 100%; &.audio { @include file-icon('../images/icons/audio.png'); @@ -131,36 +134,30 @@ } .post-image__column { - position: relative; - width: 240px; - height: 100px; + border: 1px solid alpha-color($black, .2); float: left; + height: 100px; margin: 5px 10px 5px 0; - border: 1px solid lightgrey; - - a { - text-decoration: none; - color: grey; - } + position: relative; + width: 240px; } .post-image__load { + background-position: center; + background-repeat: no-repeat; + background-size: 20px 20px; 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-color: $white; background-repeat: no-repeat; + height: 100%; overflow: hidden; position: relative; text-align: center; + width: 100%; &.small { background-position: center; @@ -170,60 +167,59 @@ background-position: top left; } - .spinner.file__loading { - position: absolute; - left: 50%; - margin-left: -16px; - top: 50%; - margin-top: -16px; + .spinner { + .file__loading { + left: 50%; + margin-left: -16px; + margin-top: -16px; + position: absolute; + top: 50%; + } } .file__loaded { max-width: initial; + &.landscape, &.quadrat { height: 100px; } + &.portrait { width: 120px; } } - - &:hover .file-playback__controls.stop { - @include opacity(1); - } } .post-image__thumbnail { + @include cursor(zoom-in); float: left; - width: 50%; height: 100%; - cursor: zoom-in; - cursor: -webkit-zoom-in; + width: 50%; } .post-image__details { - float: left; @include clearfix; - word-break: break-word; - width: 50%; - height: 100%; - background: white; - border-left: 1px solid #ddd; + background: $white; + border-left: 1px solid $light-gray; + color: alpha-color($black, .8); + float: left; font-size: 13px; + height: 100%; padding: 7px; - color: #333; + width: 50%; + word-break: break-word; .post-image__name { - margin-bottom: 3px; display: block; + margin-bottom: 3px; } .post-image__download { + @include opacity(.7); + cursor: pointer; display: inline-block; padding-right: 7px; - cursor: pointer; - @include opacity(.7); } .post-image__type { @@ -231,57 +227,55 @@ } .post-image__size { - margin-left: 4px; @include opacity(.6); + margin-left: 4px; } } .file-details__container { @include display-flex; - display: -ms-flexbox; .file-details { - width: 320px; height: 270px; padding: 14px; text-align: left; vertical-align: top; + width: 320px; .file-details__name { - color: #333; + color: alpha-color($black, .9); font-size: 16px; } .file-details__info { - color: grey; + color: alpha-color($black, .5); } } + .file-details__preview { - width: 320px; + border-right: 1px solid $light-gray; height: 270px; - border-right: 1px solid #ddd; vertical-align: center; + width: 320px; // helper to center the image icon in the preview window .file-details__preview-helper { - height: 100%; display: inline-block; + height: 100%; vertical-align: middle; } } } .file-playback__controls { - position: absolute; - right: 5px; + @include single-transition(opacity, .6s); bottom: 0; - font-size: 22px; cursor: pointer; - z-index: 2; - -webkit-transition: opacity .6s; - -moz-transition: opacity .6s; - -o-transition: opacity .6s; + font-size: 22px; + position: absolute; + right: 5px; transition: opacity .6s; + z-index: 2; &.stop { @include opacity(0); @@ -289,6 +283,6 @@ } .view-image__loading { - background: black; + background: $black; min-height: 100px; } diff --git a/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss index 5e3311182..42ab56128 100644 --- a/webapp/sass/components/_inputs.scss +++ b/webapp/sass/components/_inputs.scss @@ -15,12 +15,21 @@ &.no-resize { resize: none; } + + &[disabled], + [readonly] { + @include alpha-property(background, $white, .1); + color: inherit; + cursor: auto; + } } -.form-control[disabled], -.form-control[readonly], -fieldset[disabled] .form-control { - cursor: auto; - background: rgba(#fff, .1); - color: inherit; +fieldset { + &[disabled] { + .form-control { + @include alpha-property(background, $white, .1); + color: inherit; + cursor: auto; + } + } } diff --git a/webapp/sass/components/_links.scss b/webapp/sass/components/_links.scss index f31008b4f..3d7472670 100644 --- a/webapp/sass/components/_links.scss +++ b/webapp/sass/components/_links.scss @@ -1,23 +1,22 @@ @charset 'UTF-8'; a { + color: $primary-color; cursor: pointer; text-decoration: none; word-break: break-word; - color: $color--primary; -} -a:focus, -a:hover { - color: $color--primary--hover; + &:hover, + &:focus { + color: $primary-color--hover; + } } -.text-danger, -a.text-danger { - color: #e05f5d; +.text-danger { + color: desaturate($red, 20%); &:hover, &:focus { - color: #e05f5d; + color: desaturate($red, 20%); } } diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index 98efc599d..98ae7d320 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -1,24 +1,24 @@ @charset 'UTF-8'; .mention { - color: #fff; - background: $color--primary; + @include border-radius(3px); + background: $primary-color; + color: $white; + padding-bottom: 2px; position: relative; z-index: 10; - padding-bottom: 2px; - @include border-radius(3px); } .mentions__name { - position: relative; - width: 100%; + cursor: pointer; + font-size: 13px; height: 36px; - padding: 2px; - z-index: 101; line-height: 36px; - font-size: 13px; - cursor: pointer; + padding: 2px; + position: relative; white-space: nowrap; + width: 100%; + z-index: 101; .mention-align { @include clearfix; @@ -28,29 +28,29 @@ } .mention__image { - margin-right: 6px; - height: 32px; - width: 32px; - line-height: 36px; + @include border-radius(32px); display: block; font-size: 20px; + height: 32px; + line-height: 36px; + margin-right: 6px; text-align: center; - @include border-radius(32px); + width: 32px; .mention--align { + display: inline-block; max-width: 80%; overflow: hidden; - display: inline-block; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } } .mention__fullname { - color: grey; + color: $dark-gray; padding-left: 10px; } .mention--highlight { - background-color: #fff2bb; + background-color: $yellow; } diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index a8e8a99f7..601aa33ab 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -1,12 +1,24 @@ @charset 'UTF-8'; -#channel_members_modal .modal-body { - min-height: 110px; +.browser--ie { + .modal { + .modal-dialog { + @include translateY(0); + } + } } .modal-body { - padding: 20px 15px; overflow: auto; + padding: 20px 15px; + + .edit-modal-body { + overflow: visible; + + .suggestion-list__content { + max-height: 150px; + } + } } .more-table { @@ -15,27 +27,23 @@ } .modal { + color: alpha-color($black, .9); width: 100%; - color: #333; - body.browser--IE & { - .modal-dialog { - @include translateY(0); - } - } - - &.image_modal { - .modal-backdrop.in { - @include opacity(.7); + &.modal-image { + .modal-backdrop { + &.in { + @include opacity(.7); + } } } .custom-textarea { + border-color: $light-gray; color: inherit; - border-color: #ccc; &:focus { - border-color: #ccc; + border-color: $light-gray; box-shadow: none; } } @@ -44,15 +52,15 @@ font-size: 13px; &.btn-default { - border: none; background: transparent; + border: none; } } .info__label { font-weight: 600; - text-align: right; padding-right: 0; + text-align: right; } .team-member-list { @@ -60,21 +68,21 @@ } .remove__member { + color: $dark-gray; float: right; - color: #999; font-size: 20px; line-height: 0; padding: 6px; &:hover { - color: #e56565; + color: $red; } } .modal-dialog { - max-width: 95%; margin-left: auto; margin-right: auto; + max-width: 95%; } .modal-push-down { @@ -82,51 +90,51 @@ } .modal-next-bar { + height: 100%; position: absolute; - top: 0px; right: 0; - height: 100%; + top: 0; } .modal-header { - border-radius: 0; - background: $color--primary; - color: #fff; - padding: 15px 15px 11px; - border: 1px solid #ddd; - min-height: 56px; + @include border-radius(0); @include clearfix; + background: $primary-color; + border: 1px solid $light-gray; + color: $white; + min-height: 56px; + padding: 15px 15px 11px; .modal-title { + color: $bg--gray; float: left; font-size: 17px; line-height: 27px; - color: #f4f4f4; .name { + color: $white; font-weight: 600; - color: #fff; } } .modal-action { - padding: 0; margin: 0; + padding: 0; } - button.close { - color: #fff; + .close { @include opacity(1); - z-index: 5; - width: 30px; + @include single-transition(all, .25s, ease-in); + color: $white; height: 30px; line-height: 30px; - @include single-transition(all, .25s, ease-in); position: absolute; right: 10px; + width: 30px; + z-index: 5; &:hover { - background: rgba(0, 0, 0, .1); + @include alpha-property(background, $black, .1); } span { @@ -149,8 +157,8 @@ } .no-channel-message { - text-align: center; padding: 2em 1em; + text-align: center; .primary-message { font-size: 1.25em; @@ -168,46 +176,46 @@ } .modal-chevron-icon { - top: 50%; font-size: 120%; + top: 50%; } .modal-prev-bar { - position: absolute; - top: 0px; - left: 0; height: 100%; + left: 0; + position: absolute; + top: 0; } - &#more_channels { + &.more-channel__modal { .modal-body { padding: 0; } } .modal-image { - position: relative; - width: 100%; height: 100%; margin: 0 auto; max-width: 100%; + position: relative; + width: 100%; .modal-body { @include clearfix; - height: 100%; display: table; + height: 100%; + max-height: 100%; table-layout: fixed; width: 100%; - max-height: 100%; } - .image-wrapper { - position: relative; - max-width: 90%; + .modal-image__wrapper { @include border-radius(3px); display: table-cell; - vertical-align: middle; + max-width: 90%; + position: relative; text-align: center; + vertical-align: middle; width: 100%; &:hover { @@ -215,33 +223,31 @@ } &.default { - width: 100%; height: 80%; + width: 100%; } audio, canvas, progress, video { - max-width: 100%; - height: auto; display: block; + height: auto; + max-width: 100%; } .modal-close { - background: url('../images/close.png') no-repeat; + @include single-transition(opacity, .6s); @include background-size(100% 100%); - width: 37px; + @include opacity(0); + background-image: url('../images/close.png'); + cursor: pointer; 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; + width: 37px; z-index: 9999; &.modal-close--show { @@ -250,99 +256,95 @@ } > div { + background: $white; + display: inline-block; 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%; + max-width: 100%; } - .spinner.file__loading { - z-index: 2; - position: absolute; - left: 50%; - margin-left: -16px; - top: 50%; - margin-top: -16px; + .spinner { + .file__loading { + left: 50%; + margin-left: -16px; + margin-top: -16px; + position: absolute; + top: 50%; + z-index: 2; + } } } .modal-content { + background: alpha-color($black, 0); + border: none; box-shadow: none; - background: rgba(0, 0, 0, 0); - width: 100%; height: 100%; padding: 0; - border: none; + width: 100%; } - .image-body { - vertical-align: middle; + .modal-image__body { display: table-cell; - text-align: center; height: 100%; + overflow: visible; padding: 0; position: relative; - overflow: visible; + text-align: center; + vertical-align: middle; } .image-control { - width: 50px; - height: 45px; + background: url('../images/prev.png') left no-repeat; float: left; - background: url(../images/prev.png) left no-repeat; - top: 50%; - position: relative; + height: 45px; margin-top: -23px; + position: relative; + top: 50%; + width: 50px; + &.image-next { + background: url('../images/next.png') left no-repeat; float: right; - background: url(../images/next.png) left no-repeat; } } .loader-image { - position: absolute; - top: 0; bottom: 0; left: 0; - right: 0; margin: auto; + position: absolute; + right: 0; + top: 0; } .loader-percent { - position: absolute; - top: 55px; bottom: 0; + color: $dark-gray; + height: 20px; left: 0; - right: 0; margin: auto; - color: grey; - height: 20px; + position: absolute; + right: 0; + top: 55px; } .modal-button-bar { - position: absolute; - bottom: -40px; - left: 0px; - right: 0px; - background-color: #222; + @include single-transition(opacity, .6s); @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; + background-color: $black; + bottom: -40px; + left: 0; line-height: 40px; padding: 0 10px; + position: absolute; + right: 0; &.footer--show { @include opacity(1); @@ -356,10 +358,10 @@ } .text { - vertical-align: middle; bottom: 0; - color: white; + color: $white; margin-left: 5px; + vertical-align: middle; } .public-link { @@ -376,11 +378,12 @@ } .row--invite { - margin-right: 40px; @include clearfix; + margin-right: 40px; .col-sm-6 { padding: 0 0 0 15px; + &:first-child { padding-left: 0; } @@ -389,26 +392,26 @@ .more-modal { .user-list { - overflow-y: auto; - overflow-x: hidden; margin-top: 10px; + overflow-x: hidden; + overflow-y: auto; position: relative; } .modal-body { - padding: 10px 0 20px; overflow-x: hidden; + padding: 10px 0 20px; } .filter-row { - margin: 10px 0; @include clearfix; + margin: 10px 0; } .member-count { - margin-top: 5px; - float: right; @include opacity(.8); + float: right; + margin-top: 5px; } .more-purpose { @@ -416,21 +419,13 @@ } } -.modal-body.edit-modal-body { - overflow: visible; - - .suggestion-list__content { - max-height: 150px; - } -} - .more-modal__list { - overflow: auto; display: flex; flex-direction: column; + overflow: auto; .popover & { - font-size: 0.95em; + font-size: .95em; .more-modal__row { padding: 5px 10px; @@ -442,9 +437,9 @@ } .more-modal__image { + @include border-radius(60px); flex-grow: 0; flex-shrink: 0; - @include border-radius(60px); margin-right: 8px; } @@ -462,33 +457,33 @@ } .more-modal__name { - font-weight: 600; font-size: .95em; - white-space: nowrap; + font-weight: 600; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .more-modal__description { @include opacity(.7); display: block; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .more-modal__row { + border-bottom: 1px solid; display: flex; padding: 8px 15px; - border-bottom: 1px solid; } p { + @include opacity(.8); font-size: .9em; + margin: 5px 0; overflow: hidden; text-overflow: ellipsis; - @include opacity(.8); - margin: 5px 0; } } diff --git a/webapp/sass/components/_oauth.scss b/webapp/sass/components/_oauth.scss index cd8382a5c..04840457c 100644 --- a/webapp/sass/components/_oauth.scss +++ b/webapp/sass/components/_oauth.scss @@ -1,18 +1,18 @@ @charset 'UTF-8'; .prompt { - background: #fff; - border: 1px solid #ddd; - padding: 1em 2em 0; + background: $white; + border: 1px solid $light-gray; margin: 50px auto; max-width: 90%; + padding: 1em 2em 0; width: 600px; .prompt__heading { + display: table; font-size: em(20px); line-height: normal; margin: 1em 0; - display: table; width: 100%; > div { @@ -26,13 +26,13 @@ } .prompt__allow { - margin: 1em 0; font-size: em(24px); + margin: 1em 0; } .prompt__buttons { - text-align: right; - border-top: 1px solid #ddd; + border-top: 1px solid $dark-gray; padding: 1.5em 0; + text-align: right; } } diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index de66b67a7..0b2769f77 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -3,32 +3,38 @@ .popover { @include border-radius($border-rad); - color: #333; + color: lighten($black, 25%); &.bottom, &.right, &.top, &.left { - > .arrow:after { - border-color: transparent; + > .arrow { + &:after { + border-color: transparent; + } } } .popover-title { - background: rgba(black, .05); + background: alpha-color($black, .05); padding: 8px 10px; } .popover-content { - p:last-child { - margin-bottom: 5px; + p { + &:last-child { + margin-bottom: 5px; + } } } } -.channel-header__info .popover-content { - max-height: 250px; - overflow: auto; +.channel-header__info { + .popover-content { + max-height: 250px; + overflow: auto; + } } .user-popover { @@ -36,32 +42,35 @@ display: inline-block; } -.code-popover .popover-content { - padding: 5px; +.code-popover { + .popover-content { + padding: 5px; + } } .user-popover__image { - margin: 0 0 10px; @include border-radius(128px); + margin: 0 0 10px; } .user-popover__email { + display: block; 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); + max-width: none; + top: 36px; + visibility: hidden; + width: 100%; &.autocomplete { display: block; + .popover-content { padding: 10px; position: relative; @@ -69,65 +78,68 @@ } .search-autocomplete__divider { - margin: 10px 0 5px; line-height: 21px; + margin: 10px 0 5px; position: relative; + &:first-child { margin-top: 5px; } - span { + + > span { + background: $white; display: inline-block; padding-right: 10px; - background: #fff; - z-index: 5; position: relative; + z-index: 5; } + &:before { + @include opacity(.2); + background: $dark-gray; content: ''; - position: absolute; - width: 100%; height: 1px; - background: #ddd; - top: 10px; left: 0; - @include opacity(.2); + position: absolute; + top: 10px; + width: 100%; } } .search-autocomplete__item { + @include border-radius(2px); cursor: pointer; - padding: 6px 8px; margin: 3px 0 0 5px; - @include border-radius(2px); - white-space: nowrap; overflow: hidden; + padding: 6px 8px; text-overflow: ellipsis; + white-space: nowrap; &:hover { - background: rgba(black, .1); + background: alpha-color($black, .1); } &.selected { - background: rgba(black, .2); + background: alpha-color($black, .2); } .fa { - margin-right: 5px; @include opacity(.5); + margin-right: 5px; } .profile-img { - margin-top: -1px; height: 16px; margin-right: 6px; + margin-top: -1px; width: 16px; } } &.bottom > .arrow { - top: -18px; border-width: 9px; left: 30px; + top: -18px; } .popover-content { @@ -142,9 +154,11 @@ ul { padding-left: 17px; + span { @include opacity(.8); } + strong, b { @include opacity(1); @@ -156,25 +170,28 @@ } &.visible { - visibility: visible; @include opacity(1); + visibility: visible; } } -#member-list-popover { +.member-list__popover { max-width: initial; + .popover-content { - position: relative; + max-height: 350px; padding: 0; + position: relative; width: 260px; - max-height: 350px; + .text-nowrap { + font-size: 13px; + line-height: 26px; + overflow: hidden; padding: 6px 10px; width: 100%; - overflow: hidden; - line-height: 26px; - font-size: 13px; } + .more__name { margin-left: 6px; max-width: 140px; diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss index 4ecb38b1f..0bb0e7e21 100644 --- a/webapp/sass/components/_scrollbar.scss +++ b/webapp/sass/components/_scrollbar.scss @@ -1,28 +1,25 @@ @charset 'UTF-8'; -::-webkit-scrollbar -{ - width: 8px; /* for vertical scrollbars */ - height: 8px; /* for horizontal scrollbars */ +::-webkit-scrollbar { + height: 8px; // for horizontal scrollbars + width: 8px; // for vertical scrollbars } -::-webkit-scrollbar-track -{ - background: rgba(0, 0, 0, 0.1); +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, .1); } -::-webkit-scrollbar-thumb -{ +::-webkit-scrollbar-thumb { @include border-radius($border-rad * 2); - background: rgba(0, 0, 0, 0.4); + background: rgba(0, 0, 0, .4); } -body{ - scrollbar-face-color: rgba(0, 0, 0, 0.1); - scrollbar-shadow-color: #2D2C4D; - scrollbar-highlight-color:#7D7E94; +body { scrollbar-3dlight-color: #7D7E94; - scrollbar-darkshadow-color: #2D2C4D; - scrollbar-track-color: rgba(0, 0, 0, 0.1); scrollbar-arrow-color: #C1C1D1; + scrollbar-darkshadow-color: #2D2C4D; + scrollbar-face-color: rgba(0, 0, 0, .1); + scrollbar-highlight-color: #7D7E94; + scrollbar-shadow-color: #2D2C4D; + scrollbar-track-color: rgba(0, 0, 0, .1); }
\ No newline at end of file diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index faf0b8177..499c4fad4 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -1,15 +1,19 @@ @charset 'UTF-8'; -#channel-header .search-bar__container { - padding: 0 9px 0 3px; +.channel-header { + .search-bar__container { + padding: 0 9px 0 3px; + } } .search-bar__container { - padding: 12px 8px 0 0; @include flex(0 0 56px); + padding: 12px 8px 0 0; - .sidebar--right.move--left & { - padding-right: 42px; + .sidebar--right { + &.move--left & { + padding-right: 42px; + } } } @@ -18,62 +22,60 @@ } .search__clear { + @include single-transition(all, .2s, linear); + @include translateX(60px); + cursor: pointer; display: none; - position: absolute; - right: 0; line-height: 45px; margin-right: 13px; - @include single-transition(all, .2s, linear); - @include translateX(60px); + position: absolute; + right: 0; z-index: 5; - cursor: pointer; } .search-item-snippet { @include clearfix; text-overflow: ellipsis; + + ul, + ol { + padding-left: 20px; + } } .sidebar__collapse { + @include single-transition(all, .2s, linear); + @include translateX(0); cursor: pointer; - z-index: 5; - fill: #fff; - position: absolute; - left: 0; + display: none; + fill: $white; font-size: 35px; - width: 49px; - @include single-transition(all, .2s, linear); - @include translateX(0px); - text-align: center; - padding-left: 1px; + left: 0; line-height: 40px; - display: none; -} - -.search-item-snippet { - ul, - ol { - padding-left: 20px; - } + padding-left: 1px; + position: absolute; + text-align: center; + width: 49px; + z-index: 5; } .sidebar__search-icon { - position: absolute; - top: 15px; - margin-left: 10px; - font-size: 14px; @include opacity(.5); + color: $dark-gray; display: none; - color: #777; + font-size: 14px; + margin-left: 10px; + position: absolute; + top: 15px; } .search__form { position: relative; .search-bar__container & { - margin: 0; - border: 1px solid #ddd; @include border-radius(2px); + border: 1px solid $light-gray; + margin: 0; width: 300px; } @@ -82,21 +84,21 @@ } .search-bar { + box-shadow: none; height: 40px; padding-right: 30px; - box-shadow: none; .search-bar__container & { - height: 30px; border: none; + height: 30px; } } .glyphicon-refresh-animate { - top: 27px; + color: $dark-gray; position: absolute; right: 27px; - color: #999; + top: 27px; .search-bar__container & { right: 7px; @@ -106,30 +108,29 @@ } .search-items-container { - position: relative; - overflow: auto; - -webkit-overflow-scrolling: touch; @include flex(1 1 auto); + -webkit-overflow-scrolling: touch; height: calc(100% - 56px); + overflow: auto; padding-top: 10px; + position: relative; } .search-results-header { + border-bottom: $border-gray; + color: #999999; 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; + padding: 0 10px; + text-transform: uppercase; } .search-item__container { .post { - padding: 0 1em 1em; margin: 0; + padding: 0 1em 1em; &:first-child { border: none; @@ -137,17 +138,17 @@ .search-channel__name { font-weight: 600; - margin: 0 0 10px 0; + margin: 0 0 10px; } } } .search-item__jump { + @include opacity(.8); + font-size: 13px; position: absolute; right: 0; - top: 0px; - font-size: 13px; - @include opacity(.8); + top: 0; &:hover { @include opacity(1); @@ -155,9 +156,9 @@ } .search-item__comment { + margin-right: 35px; position: absolute; right: 0; - margin-right: 35px; top: 0; } @@ -171,5 +172,5 @@ } .search-highlight { - background-color: #fff2bb; + background-color: $yellow; } diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss index 125a3cf32..0100026ca 100644 --- a/webapp/sass/components/_suggestion-list.scss +++ b/webapp/sass/components/_suggestion-list.scss @@ -1,9 +1,9 @@ @charset 'UTF-8'; .suggestion-list { + @extend %popover-box-shadow; width: 100%; z-index: 100; - @extend %popover-box-shadow; } .suggestion-list--top { @@ -11,31 +11,31 @@ } .suggestion-list__content { - width: 100%; - max-height: 292px; - background-color: #fff; + background-color: $white; border: $border-gray; + max-height: 292px; overflow-x: hidden; overflow-y: scroll; + width: 100%; .command { - position: relative; - width: 100%; + border-bottom: 1px solid $light-gray; + font-size: .95em; line-height: 24px; padding: 5px 10px 8px; + position: relative; + width: 100%; z-index: 101; - font-size: .95em; - border-bottom: 1px solid #ddd; .command__desc { - margin-left: 5px; @include opacity(.5); line-height: normal; + margin-left: 5px; } } } .suggestion-list__content--top { - position: absolute; bottom: 0; + position: absolute; } diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss index 44c10edb9..5e71e3a7b 100644 --- a/webapp/sass/components/_tooltip.scss +++ b/webapp/sass/components/_tooltip.scss @@ -2,9 +2,9 @@ .tooltip { .tooltip-inner { - word-break: break-word; font-size: 13px; - padding: 3px 10px 4px; font-weight: 500; + padding: 3px 10px 4px; + word-break: break-word; } } diff --git a/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss index f15919009..6545d7764 100644 --- a/webapp/sass/components/_tutorial.scss +++ b/webapp/sass/components/_tutorial.scss @@ -1,72 +1,76 @@ @charset 'UTF-8'; .tip-backdrop { - background: rgba(black, .5); + background: alpha-color($black, .5); + height: 100%; + left: 0; 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); + background-color: $white; + max-width: 90%; padding: 20px; + position: absolute; + width: 350px; z-index: 1000; .arrow { + border-color: transparent; + border-style: solid; border-width: 10px; - position: absolute; display: block; - width: 0; height: 0; - border-color: transparent; - border-style: solid; + position: absolute; + width: 0; } &.tip-overlay--sidebar { - max-width: 75%; margin: 50px 0 0 10px; + max-width: 75%; min-height: 330px; + .tutorial__footer { - position: absolute; - width: 100%; bottom: 20px; left: 0; padding: 0 20px; + position: absolute; + width: 100%; } + .arrow { - top: 80px; + border-left-width: 0; + border-right-color: $white; left: -10px; margin-top: -10px; - border-left-width: 0; - border-right-color: #fff; + top: 80px; } } &.tip-overlay--header { margin: 10px 0 0 10px; + .arrow { - top: 15px; - left: -10px; border-left-width: 0; - border-right-color: #fff; + border-right-color: $white; + left: -10px; + top: 15px; } } &.tip-overlay--chat { margin-top: -10px; + .arrow { - left: 50%; - margin-left: -10px; border-bottom-width: 0; - border-top-color: #fff; + border-top-color: $white; bottom: -10px; + left: 50%; + margin-left: -10px; } } @@ -86,18 +90,18 @@ } .btn { - background: #ccc; - color: #fff; @include border-radius(3px); + background: alpha-color($black, .3); border: none; + color: $white; margin: 10px 0; &:hover, &:active, &:focus { - color: #fff; + background: alpha-color($black, .4); border: none; - background: #bbb; + color: $white; } } @@ -110,81 +114,88 @@ } .tutorial__circles { - margin: 1.5em 0px -1.7em -4px; + margin: 1.5em 0 -1.7em -4px; .circle { - width: 7px; height: 7px; margin: 0 4px; + width: 7px; } } } .tip-button { - z-index: 998; + cursor: pointer; + position: relative; right: -10px; top: -10px; - position: relative; - cursor: pointer; + z-index: 998; } .tip-div { position: absolute; - top: 0px; - right: 0px; + right: 0; + top: 0; &.tip-overlay--header { - top: 21px; right: 2px; + top: 21px; + .tip-button { @include opacity(.8); } } &.tip-overlay--sidebar { - left: 0; @include opacity(.8); + left: 0; top: -9px; } } .tutorial-steps__container { - text-align: center; - width: 100%; display: table; height: 100%; + text-align: center; + width: 100%; + .tutorial__content { display: table-cell; - vertical-align: middle; - padding-bottom: 100px; padding: 20px 40px 40px; + vertical-align: middle; + .tutorial__steps { - position: relative; + display: inline-block; + margin-bottom: 50px; max-width: 310px; min-height: 370px; - margin-bottom: 50px; + position: relative; text-align: left; - display: inline-block; } } + .tutorial__footer { - position: absolute; bottom: 0; + position: absolute; } + h1 { font-size: em(40px); - margin: -20px 0 30px; font-weight: 600; + margin: -20px 0 30px; } + h3 { font-size: em(24px); - margin-bottom: 30px; font-weight: 600; + margin-bottom: 30px; } + .tutorial__circles { - position: absolute; bottom: 40px; + position: absolute; } + .tutorial-skip { margin-left: 13px; } @@ -192,17 +203,19 @@ .tutorial__circles { margin: 2em 0; + .circle { - width: 9px; - height: 9px; @include border-radius(9px); @include opacity(.2); - background: #000; + background: $black; display: inline-block; + height: 9px; margin: 0 5px; + width: 9px; + &.active { - background: $color--primary; @include opacity(1); + background: $primary-color; } } } diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss index 91db750bd..e009e6538 100644 --- a/webapp/sass/components/_videos.scss +++ b/webapp/sass/components/_videos.scss @@ -1,65 +1,68 @@ @charset 'UTF-8'; .video-div { - position: relative; - max-width: 480px; margin-bottom: 8px; + max-width: 480px; + position: relative; + .video-thumbnail { - max-width: 100%; height: auto; + max-width: 100%; } + .block { - background-color: rgba(0,0,0,.5); + background-color: alpha-color($black, .5); border-radius: 10px; + height: 150px; + left: 50%; + margin: -75px 0 0 -100px; 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; + margin: 0; + padding: 0; } .video-title { font-size: 15px; margin-top: 3px; } + .play-button { - width: 100px; + @include border-radius(14px); + border: 4px solid alpha-color($white, .4); 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); + top: 26px; + width: 100px; + + span { + border-bottom: 36px solid transparent; + border-left: 60px solid alpha-color($white, .4); + border-top: 36px solid transparent; + height: 0; + left: 20px; + position: absolute; + top: 10px; + width: 0; + } } .img-div { -moz-force-broken-image-icon: 1; - position: relative; - max-width: 450px; - max-height: 500px; - margin-bottom: 8px; border-radius: 5px; + margin-bottom: 8px; + max-height: 500px; + max-width: 450px; + position: relative; + &.placeholder { height: 500px; } |