diff options
author | =Corey Hulen <corey@hulen.com> | 2015-07-05 09:02:23 -0800 |
---|---|---|
committer | =Corey Hulen <corey@hulen.com> | 2015-07-05 09:02:23 -0800 |
commit | 592d68cf4134b668e3ff962d17f8aa75b1bc055f (patch) | |
tree | 6e743b07487caf5fe350439aefdf0355a7e80d9b /web/sass-files/sass | |
parent | 72bfc1ee2afd2fa4a34186b62f144f8f6c50d693 (diff) | |
parent | 4a3003c0dcf7d642f233493e32b07beed5d08327 (diff) | |
download | chat-592d68cf4134b668e3ff962d17f8aa75b1bc055f.tar.gz chat-592d68cf4134b668e3ff962d17f8aa75b1bc055f.tar.bz2 chat-592d68cf4134b668e3ff962d17f8aa75b1bc055f.zip |
Merge branch 'master' into mm-1391
Diffstat (limited to 'web/sass-files/sass')
-rw-r--r-- | web/sass-files/sass/partials/_base.scss | 22 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_headers.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_loading.scss | 68 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_mentions.scss | 30 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 40 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 16 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 51 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_search.scss | 2 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_settings.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_sidebar--left.scss | 3 | ||||
-rw-r--r-- | web/sass-files/sass/styles.scss | 1 |
11 files changed, 179 insertions, 62 deletions
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 5808aeb44..cf28e44e8 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -3,7 +3,7 @@ html, body { } body { - font-family: 'Lato', sans-serif; + font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; background: #e9e9e9; position: relative; @@ -11,21 +11,29 @@ body { &.white { background: #fff; .inner__wrap { - height: 100%; + > .row.content { + min-height: 100%; + margin-bottom: -89px; + } } - .row.content { - min-height: 100%; - height: auto !important; + } + .inner__wrap { + height: 100%; + > .row.main { height: 100%; - margin-bottom: -89px; } } > .container-fluid { @include clearfix; + height: 100%; position: relative; } } +b, strong { + font-weight: 600; +} + a { word-break: break-word; } @@ -142,7 +150,7 @@ div.theme { top: 0; color: #FFF; font-size: 20px; - font-weight: bold; + font-weight: 600; text-decoration: none; padding: 0 10px; } diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 89bbaef2b..1ec1109a5 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -65,7 +65,7 @@ float:left; } .channel-intro-title { - font-weight:bold; + font-weight:600; } .channel-intro-text { margin-top:35px; @@ -88,7 +88,7 @@ } .dropdown-menu { li a { - padding: 3 20px; + padding: 3px 20px; color: #555; } } diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss new file mode 100644 index 000000000..185a42180 --- /dev/null +++ b/web/sass-files/sass/partials/_loading.scss @@ -0,0 +1,68 @@ +.loading-screen { + display: table; + width: 100%; + height: 100%; + position: absolute; + @include box-sizing(border-box); + text-align: center; + .loading__content { + display: table-cell; + vertical-align: middle; + h3 { + font-weight: 400; + margin: 0 0.2em 0; + display: inline-block; + } + } +} + +.loading-screen { + .loading__content { + .round { + background-color: #444; + width: 4px; + height: 4px; + display: inline-block; + margin: 0 1px; + opacity: 0.1; + @include border-radius(10px); + -moz-animation: move 0.75s infinite linear; + -webkit-animation: move 0.75s infinite linear; + } + + #round_1 { + -moz-animation-delay: .2s; + -webkit-animation-delay: .2s; + } + + #round_2 { + -moz-animation-delay: .4s; + -webkit-animation-delay: .4s; + } + + #round_3 { + -moz-animation-delay: .6s; + -webkit-animation-delay: .6s; + } + + @-moz-keyframes move { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.1; + }; + } + + @-webkit-keyframes move { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.1; + }; + } + } +} diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index 11cd4e9e4..d6e2ab368 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -3,21 +3,19 @@ background: $primary-color; position: relative; z-index: 10; - padding-bottom: 1px; + padding-bottom: 2px; @include border-radius(3px); - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } .mentions--top { position: absolute; - z-index:99999; + z-index: 1060; .mentions-box { position:absolute; background-color:#fff; - border:1px solid #ddd; - overflow:scroll; + border: $border-gray; + overflow-x: hidden; + overflow-y: scroll; bottom:0; } } @@ -29,10 +27,10 @@ height:37px; padding:2px; z-index:101; -} - -.mentions-name:hover { - background-color:#e8eaed; + cursor: pointer; + &:hover { + background-color:#e8eaed; + } } .mentions-text { @@ -46,6 +44,11 @@ border-radius: 10%; } +.mention-fullname { + color: grey; + padding-left: 10px; +} + .mention-highlight { background-color:#fff2bb; } @@ -53,3 +56,8 @@ .mention-link { color:$primary-color; } + +.mention-align { + position:relative; + top:5px; +} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 43dbdc077..971ed0935 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -1,9 +1,17 @@ +.modal-body { + padding: 20px 15px; +} .modal { &.image_modal { .modal-backdrop.in { @include opacity(0.7); } } + .info__label { + font-weight: 600; + text-align: right; + padding-right: 0; + } .remove__member { float: right; } @@ -13,7 +21,6 @@ margin-right: auto; } .modal-body { - max-height: 75%; overflow: auto; } .modal-push-down { @@ -29,7 +36,7 @@ border-radius: 0; background: $primary-color; color: #FFF; - padding: 15px 15px 11px; + padding: 15px 15px 11px; border: none; min-height: 56px; @include clearfix; @@ -41,14 +48,23 @@ margin: 0; } button.close { - margin-top: 0; + margin: -2px -2px 0 0; color: #fff; @include opacity(1); z-index: 5; + width: 30px; + height: 30px; + line-height: 30px; + @include single-transition(all, 0.25s, ease-in); position: relative; + &:hover { + background: rgba(0, 0, 0, 0.1); + } + span { + line-height: 10px; + } } .btn { - margin-right: 10px; &.btn-primary { float: right; margin-top: -4px; @@ -102,7 +118,7 @@ } .more-channel-name { color: #444; - font-weight: bold; + font-weight: 600; font-size: 0.95em; } tbody { @@ -127,17 +143,19 @@ .modal-image { position:relative; width:100%; + height: 100%; margin: 0 auto; .image-wrapper { - padding: 4px; background: #FFF; position: relative; max-width: 80%; - min-height: 280px; min-width: 280px; - @include border-radius(4px); + @include border-radius(3px); display: table; margin: 0 auto; + &:hover { + @include border-radius(3px 3px 0 0); + } &:hover .modal-close { @include opacity(1); } @@ -217,10 +235,11 @@ } .modal-button-bar { position:absolute; - bottom:0px; + bottom:-40px; left:0px; right:0px; - background-color:rgba(0, 0, 0, 0.8); + background-color: #222; + @include border-radius(0 0 3px 3px); @include opacity(0); -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; @@ -228,7 +247,6 @@ transition: opacity 0.6s; line-height: 40px; padding: 0 10px; - margin: 4px; &.footer--show { @include opacity(1); } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 745d50173..769cb1091 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -86,10 +86,11 @@ body.ios { background: #FFF; display: inline-block; padding: 0 1em; - font-weight: 900; + font-weight: 700; @include border-radius(50px); position: relative; z-index: 5; + font-size: 13px; } } .new-separator { @@ -212,6 +213,12 @@ body.ios { } } } + &.current--user { + .post-body { + @include border-radius(0 4px 4px 0); + background: #f5f5f5; + } + } &.same--root { .comment-icon__container { @include opacity(0); @@ -249,6 +256,7 @@ body.ios { } p { margin: 0 0 5px; + font-size: 0.97em; white-space: pre-wrap; } .comment-icon__container { @@ -269,7 +277,7 @@ body.ios { float: left; .post-profile-img { margin-right: 10px; - @include border-radius(3px); + @include border-radius(50px); } } &.post__content { @@ -290,6 +298,8 @@ body.ios { width: 600px; float: left; word-wrap: break-word; + padding: 0.3em 0.5em 0.1em; + margin: -0.3em 0 0; .post-link { @include clearfix; text-overflow: ellipsis; @@ -359,7 +369,7 @@ body.ios { .embed-title { margin: 3px 0 1px; color: #555; - font-weight: bold; + font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index bed2f6324..0037879cf 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -5,7 +5,7 @@ &.post--comment { &.other--root { .post-comment { - margin-left: 0; + margin-left: -7px; } } } @@ -22,11 +22,16 @@ width: 825px; } .post-body { - padding-left: 0; + width: 736px; border: none; margin: 0; } } + .post-body { + float: none; + width: 750px; + margin: 0; + } .post__content { width: 920px; } @@ -63,10 +68,6 @@ } } } - .post-body { - float: none; - width: 750px; - } } } } @@ -81,7 +82,7 @@ &.post--comment { &.other--root { .post-comment { - margin-left: 0; + margin-left: -7px; } } } @@ -89,6 +90,7 @@ margin-left: 60px; padding-left: 10px; border-left: 4px solid #EEE; + margin-bottom: 10px; div.post-profile-img__container { .post-profile-img { display: none; @@ -98,7 +100,7 @@ width: 825px; } .post-body { - padding-left: 0; + width: 736px; border: none; margin: 0; } @@ -135,6 +137,7 @@ } } .post-body { + margin: 0; float: none; width: 750px; } @@ -231,17 +234,14 @@ } } .modal { + .info__label { + text-align: left; + padding-bottom: 5px; + } .modal-header { - padding-left: 20px; - padding-right: 20px; .modal-action { margin-top: 10px; } - button.close { - width: 35px; - height: 32px; - margin: -5px -10px 0; - } .modal-title { float: none; } @@ -261,9 +261,11 @@ .settings-table { display: block; .settings-content { - display: block; - .section-edit { - text-align: left; + &.minimize-settings { + display: block; + .section-edit { + text-align: left; + } } } .settings-links { @@ -287,10 +289,12 @@ } .settings-table { .settings-content { - padding: 0; - display: none; - .user-settings { - padding: 70px 20px 30px; + &.minimize-settings { + padding: 0; + display: none; + .user-settings { + padding: 70px 20px 30px; + } } } .settings-links { @@ -538,7 +542,6 @@ .modal { .modal-image { .image-wrapper { - padding-bottom: 40px; .modal-close { @include opacity(1); } @@ -575,7 +578,7 @@ &.post--comment { &.other--root { .post-comment { - margin-left: 11px; + margin-left: 4px; } } } diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index ca5d25720..8d51d00c0 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -77,7 +77,7 @@ border: none; } .search-channel__name { - font-weight: bold; + font-weight: 600; margin: 0 0 10px 0; } } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index dbaab8b58..af759c650 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -56,7 +56,7 @@ .section-title { margin-bottom: 5px; - font-weight: bold; + font-weight: 600; } .section-edit { @@ -172,7 +172,7 @@ border-top:1px solid lightgrey; } .post-profile-img { - @include border-radius(3px); + @include border-radius(50px); margin-right: 8px; } .member-name { diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index b1dd470d2..89d1ff416 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -59,7 +59,7 @@ color: #999; &.unread-title { color: #333; - font-weight: bold; + font-weight: 600; } &:hover, &:focus { background: #e6f2fa; @@ -70,6 +70,7 @@ color: #111; background-color: #e1e1e1; border-radius: 0; + font-weight: 400; } } } diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index 8446f1c01..9cc26320c 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -29,6 +29,7 @@ @import "partials/modal"; @import "partials/mentions"; @import "partials/error"; +@import "partials/loading"; // Responsive Css @import "partials/responsive"; |