diff options
author | Christopher Speller <crspeller@gmail.com> | 2017-07-18 15:45:23 -0700 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2017-07-18 15:45:23 -0700 |
commit | 97f34e483b0fa8b2a8cfe75b72168cfa38cc9d80 (patch) | |
tree | ec2d68077dd2b12de3173871622f3ec2a2b61d35 /webapp/sass | |
parent | 21a3219b9b1df033635631afa751742bd4c56ea0 (diff) | |
parent | a350f4dc0754e1aeabb64bd712ce05f7c59cfa60 (diff) | |
download | chat-97f34e483b0fa8b2a8cfe75b72168cfa38cc9d80.tar.gz chat-97f34e483b0fa8b2a8cfe75b72168cfa38cc9d80.tar.bz2 chat-97f34e483b0fa8b2a8cfe75b72168cfa38cc9d80.zip |
Merge branch 'release-4.0'
Diffstat (limited to 'webapp/sass')
-rw-r--r-- | webapp/sass/components/_emoticons.scss | 7 | ||||
-rw-r--r-- | webapp/sass/components/_popover.scss | 1 | ||||
-rw-r--r-- | webapp/sass/components/_search.scss | 4 | ||||
-rw-r--r-- | webapp/sass/components/_status-icon.scss | 8 | ||||
-rw-r--r-- | webapp/sass/components/_webrtc.scss | 5 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 31 | ||||
-rw-r--r-- | webapp/sass/layout/_navigation.scss | 2 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 14 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 12 | ||||
-rw-r--r-- | webapp/sass/responsive/_desktop.scss | 10 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 32 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 16 |
12 files changed, 85 insertions, 57 deletions
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index b91630a47..c8fd50226 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -80,6 +80,8 @@ .emoji-picker__search-container { position: relative; + border-top-style: solid; + border-top-width: 1px; .emoji-picker__search-icon { padding-left: 6px; @@ -89,8 +91,7 @@ } .emoji-picker__search { - border-width: 1px 0px 1px 0px; - border-style: solid; + border-width: 0px; padding: 2px 0 2px 25px; width: 100%; height: 25px; @@ -108,6 +109,8 @@ overflow-y: auto; padding: 0px 8px 8px 8px; position: relative; + border-top-style: solid; + border-top-width: 1px; .emoji-picker__category-header { font-size: 12px; diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 46e83f32d..90573c7ec 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -242,6 +242,7 @@ border-top: 1px solid; cursor: pointer; height: 45px; + overflow: hidden; padding: 5px 19px 5px 17px; &:hover { diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index e7fab0290..c9b8d4c02 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -78,8 +78,8 @@ top: 27px; .search-bar__container & { - right: 7px; - top: 8px; + right: 12px; + top: 11px; } } } diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss index 03d9d0705..022cffa69 100644 --- a/webapp/sass/components/_status-icon.scss +++ b/webapp/sass/components/_status-icon.scss @@ -49,14 +49,14 @@ &.status--group { border-radius: 2px; - font-size: 11px; + font-size: 10px; font-weight: 600; - height: 16px; + height: 15px; left: 1px; - line-height: 15px; + line-height: 14px; margin: 0 9px 0 -1px; text-align: center; - top: -1px; + top: -2px; width: 15px; .mentions__name & { diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss index 839f9c8c1..05ef408e2 100644 --- a/webapp/sass/components/_webrtc.scss +++ b/webapp/sass/components/_webrtc.scss @@ -328,9 +328,4 @@ #videos.small { position: relative; } - - .search__form { - margin-left: 5px; - width: calc(100% - 80px); - } } diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index dd8440d19..9a4d6771e 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -128,15 +128,15 @@ white-space: nowrap; .move--left & { - max-width: calc(100vw - 830px); + max-width: calc(100vw - 850px); .multi-teams & { - max-width: calc(100vw - 880px); + max-width: calc(100vw - 905px); } } .multi-teams & { - max-width: calc(100vw - 830px); + max-width: calc(100vw - 850px); } } @@ -195,12 +195,15 @@ .channel-header__description { display: inline-block; - height: 22px; - margin-top: 3px; - max-width: calc(100vw - 730px); + height: 35px; + margin-top: -10px; + max-width: calc(100vw - 740px); overflow: hidden; + padding: 3px 0 0; + position: relative; text-overflow: ellipsis; - white-space: nowrap; + top: 10px; + white-space: pre; word-break: break-word; .markdown__heading { @@ -209,7 +212,7 @@ } .multi-teams & { - max-width: calc(100vw - 780px); + max-width: calc(100vw - 810px); } &.light { @@ -223,7 +226,11 @@ } .move--left & { - max-width: calc(100vw - 780px); + max-width: calc(100vw - 810px); + + .multi-teams & { + max-width: calc(100vw - 860px); + } } .markdown-inline-img { @@ -311,7 +318,7 @@ @include legacy-pie-clearfix; @include display-flex(); @include flex-direction(row-reverse); - padding: 16px 47px 12px 12px; + padding: 16px 40px 12px 12px; position: relative; &:before { @@ -426,9 +433,9 @@ .team__name, .user__name { display: block; - font-size: 16px; + font-size: 14px; font-weight: 600; - max-width: 85%; + max-width: 100%; overflow: hidden; text-decoration: none; text-overflow: ellipsis; diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 09b6534b0..f1bce335c 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -104,13 +104,13 @@ padding: 0 .5em; .heading { - color: $white; display: inline-block; font-weight: 600; line-height: 50px; margin-right: 5px; max-width: calc(100% - 200px); overflow: hidden; + text-overflow: ellipsis; vertical-align: top; } diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index cc0c4920f..4be608803 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -37,7 +37,7 @@ .sidebar-item__name { display: inline-block; - max-width: 167px; + max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; @@ -81,8 +81,8 @@ @include single-transition(all, .15s, ease-in); display: block; font-weight: 600; - height: 50px; - line-height: 50px; + height: 45px; + line-height: 40px; padding: 0; text-decoration: none; width: 100%; @@ -144,7 +144,7 @@ .nav-pills__container { -webkit-overflow-scrolling: touch; - height: calc(100% - 120px); + height: calc(100% - 115px); overflow: auto; position: relative; } @@ -215,6 +215,10 @@ &.has-close { &:hover { + .sidebar-item__name { + max-width: 152px; + } + .btn-close { @include opacity(.8); display: block; @@ -228,7 +232,7 @@ font-size: 21px; font-weight: 600; position: absolute; - right: 18px; + right: 15px; top: 0px; &:hover { diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index 8181ac270..6d31c1606 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -128,7 +128,7 @@ color: inherit; display: inline-block; font-size: 26px; - margin: 0 0 0 -14px; + margin-left: -14px; text-align: center; vertical-align: top; width: 30px; @@ -207,6 +207,11 @@ } } + .sidebar--right__title { + @include clearfix; + padding-left: 15px; + } + .sidebar--right__header { @include flex(0 0 44px); border-bottom: 1px solid; @@ -214,13 +219,14 @@ font-size: 1em; height: 44px; line-height: 44px; - padding: 0 5px 0 15px; + overflow: hidden; + padding: 0 5px 0 0; text-transform: uppercase; } .sidebar--right__subheader { font-size: 1em; - padding: 0.5em 1em 0; + padding: .5em 1em 0; h4 { font-size: 1em; diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index 67ec9e3a7..184b57710 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -91,7 +91,15 @@ max-width: calc(100vw - 800px); .multi-teams & { - max-width: calc(100vw - 750px); + max-width: calc(100vw - 775px); + } + } + } + + .channel-header__info { + .channel-header__description { + .multi-teams & { + max-width: calc(100vw - 730px); } } } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 862c3a59c..8f44a883f 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -781,10 +781,7 @@ .settings-content { .section-edit { - padding-right: 0; - position: absolute; - right: 15px; - top: 14px; + text-align: left; .fa { display: inline-block; @@ -873,16 +870,20 @@ .heading { font-size: 17px; font-weight: 400; - line-height: normal; + line-height: 50px; position: relative; - top: 14px; vertical-align: top; + + .ios & { + line-height: 48px; + } } .header-dropdown__icon { font-size: 12px; + line-height: 50px; margin-left: 5px; - top: 20px; + top: 0; vertical-align: top; } } @@ -1024,9 +1025,8 @@ .icon--refresh { @include opacity(.6); - color: $black; - right: 30px; - top: 15px; + right: 16px; + top: 9px; } .form-control { @@ -1047,8 +1047,8 @@ @include single-transition(transform, .35s, ease); @include translate3d(290px, 0, 0); border: none; - width: 290px; visibility: hidden; + width: 290px; &.visible { display: block; @@ -1078,7 +1078,7 @@ } .nav-pills__container { - height: calc(100% - 60px); + height: calc(100% - 55px); } > div { @@ -1291,10 +1291,10 @@ .app__content { margin: 0; - padding-top: 56px; + padding-top: 50px; .channel__wrap & { - padding-top: 56px; + padding-top: 50px; } #channel-header { @@ -1579,6 +1579,10 @@ } @media screen and (max-width: 480px) { + #user-profile-popover { + left: 50px !important; + } + .post { .img-div { max-width: 100%; diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 8b81f30ca..ef4c2e8e5 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -5,20 +5,20 @@ &.move--left { .channel-header { .heading { - max-width: calc(100vw - 600px); + max-width: calc(100vw - 620px); .multi-teams & { - max-width: calc(100vw - 650px); + max-width: calc(100vw - 670px); } } } .channel-header__info { .channel-header__description { - max-width: calc(100vw - 600px); + max-width: calc(100vw - 620px); .multi-teams & { - max-width: calc(100vw - 650px); + max-width: calc(100vw - 670px); } } } @@ -34,20 +34,20 @@ .channel-header__info { .channel-header__description { - max-width: calc(100vw - 660px); + max-width: calc(100vw - 680px); .multi-teams & { - max-width: calc(100vw - 710px); + max-width: calc(100vw - 730px); } } } .channel-header { .heading { - max-width: calc(100vw - 700px); + max-width: calc(100vw - 720px); .multi-teams & { - max-width: calc(100vw - 750px); + max-width: calc(100vw - 770px); } } } |