diff options
Diffstat (limited to 'webapp/sass')
-rw-r--r-- | webapp/sass/components/_buttons.scss | 2 | ||||
-rw-r--r-- | webapp/sass/components/_inputs.scss | 20 | ||||
-rw-r--r-- | webapp/sass/components/_mentions.scss | 27 | ||||
-rw-r--r-- | webapp/sass/components/_popover.scss | 58 | ||||
-rw-r--r-- | webapp/sass/components/_search.scss | 63 | ||||
-rw-r--r-- | webapp/sass/components/_status-icon.scss | 17 | ||||
-rw-r--r-- | webapp/sass/components/_webrtc.scss | 5 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 230 | ||||
-rw-r--r-- | webapp/sass/layout/_navigation.scss | 59 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 9 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 145 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 46 | ||||
-rw-r--r-- | webapp/sass/responsive/_desktop.scss | 18 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 92 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 45 | ||||
-rw-r--r-- | webapp/sass/routes/_about-modal.scss | 12 | ||||
-rw-r--r-- | webapp/sass/utils/_mixins.scss | 22 |
17 files changed, 596 insertions, 274 deletions
diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss index abf5b772f..c6086e866 100644 --- a/webapp/sass/components/_buttons.scss +++ b/webapp/sass/components/_buttons.scss @@ -1,7 +1,7 @@ @charset 'UTF-8'; .btn { - @include single-transition(all, .25s, ease-in); + @include single-transition(all, .15s, ease-in); @include border-radius($border-rad); &.btn-primary { diff --git a/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss index adf3967e6..857772d7c 100644 --- a/webapp/sass/components/_inputs.scss +++ b/webapp/sass/components/_inputs.scss @@ -45,3 +45,23 @@ input { margin-top: 3px; } } + +::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: inherit; + opacity: 0.5; +} + +::-moz-placeholder { /* Firefox 19+ */ + color: inherit; + opacity: 0.5; +} + +:-ms-input-placeholder { /* IE 10+ */ + color: inherit; + opacity: 0.5; +} + +:-moz-placeholder { /* Firefox 18- */ + color: inherit; + opacity: 0.5; +} diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index cfc12f1ce..37820cbd9 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -36,6 +36,24 @@ width: 100%; z-index: 101; + .icon { + @include opacity(.5); + display: inline-block; + margin: 0 7px 0 0; + position: relative; + text-align: center; + top: 2px; + vertical-align: top; + width: 16px; + + &.icon__globe { + svg { + height: 14px; + width: 14px; + } + } + } + .status { font-size: 15px; text-align: center; @@ -59,11 +77,12 @@ @include border-radius(20px); display: block; font-size: 15px; - height: 20px; - line-height: 20px; - margin-right: 6px; + height: 16px; + line-height: 16px; + margin-right: 7px; + margin-top: 3px; text-align: center; - width: 20px; + width: 16px; .mention--align { display: inline-block; diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 610cdb31d..46e83f32d 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -4,6 +4,7 @@ .popover { @include border-radius($border-rad); color: lighten($black, 25%); + padding: 0; &.bottom, &.right, @@ -220,17 +221,70 @@ .member-list__popover { max-width: initial; + .more-modal__header { + padding: 14px 0; + + .icon { + @include opacity(.8); + margin: 0 38px 0 24px; + position: relative; + top: 2px; + } + + span { + font-weight: 500; + } + } + .more-modal__list { .more-modal__row { - min-height: inherit; + border-bottom: none; + border-top: 1px solid; + cursor: pointer; + height: 45px; + padding: 5px 19px 5px 17px; + + &:hover { + border-left: 3px solid transparent; + padding-left: 14px; + + .more-modal__actions { + @include opacity(1); + } + } + + &.more-modal__row--button { + border-left: none; + height: 40px; + position: relative; + + button { + font-weight: 500; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } + } + + .more-modal__name { + line-height: 33px; + } + + .more-modal__image { + margin: 0; } .more-modal__details { line-height: 32px; + padding-left: 30px; } .more-modal__actions { - line-height: 31px; + @include opacity(0); + line-height: 42px; margin: 0; } } diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index c25915252..e7fab0290 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -1,14 +1,7 @@ @charset 'UTF-8'; -.channel-header { - .search-bar__container { - padding: 0 7px 0 3px; - } -} - .search-bar__container { - @include flex(0 0 56px); - padding: 12px 5px 0 0; + @include flex(0 0 79px); .channel-header__links { .sidebar--right & { @@ -31,30 +24,10 @@ } } -.sidebar__collapse { - @include single-transition(all, .2s, linear); - @include translateX(0); - cursor: pointer; - display: none; - fill: $white; - font-size: 35px; - left: 0; - line-height: 40px; - padding-left: 1px; - position: absolute; - text-align: center; - width: 49px; - z-index: 5; -} - -.sidebar__search-icon { - @include opacity(.5); - color: $dark-gray; - display: none; - font-size: 14px; - margin-left: 10px; +.search__icon { + left: 10px; position: absolute; - top: 15px; + top: 8px; } .sidebar__search-clear { @@ -69,31 +42,33 @@ width: 40px; } +.search-form__container { + +} + .search__form { position: relative; .search-bar__container & { - @include border-radius(2px); + @include border-radius(50px); border: 1px solid $light-gray; - margin: 0; - width: 300px; + margin: 16px 10px 0 0; + width: 229px; } .sidebar--right & { - float: left; - margin-right: 7px; - width: 325px; + width: 100%; } .search-bar { + background: transparent; + border: none; box-shadow: none; - height: 40px; - padding-right: 30px; - - .search-bar__container & { - border: none; - height: 30px; - } + font-size: 14px; + height: 35px; + outline: none; + padding: 0 30px 0 40px; + width: 100%; } .icon--refresh { diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss index 2e1ba61b3..03d9d0705 100644 --- a/webapp/sass/components/_status-icon.scss +++ b/webapp/sass/components/_status-icon.scss @@ -42,10 +42,10 @@ .status { display: inline-block; - margin-right: 6px; + margin: 0 7px 0 1px; position: relative; - top: 1px; - width: 12px; + top: 2px; + width: 15px; &.status--group { border-radius: 2px; @@ -54,18 +54,19 @@ height: 16px; left: 1px; line-height: 15px; - margin-left: -3px; + margin: 0 9px 0 -1px; text-align: center; top: -1px; - width: 16px; + width: 15px; .mentions__name & { - height: 20px; + height: 18px; left: 0; - line-height: 20px; + line-height: 18px; margin-left: 0; + margin-right: 6px; text-align: center; - width: 20px; + width: 17px; } } diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss index c127bc5cc..839f9c8c1 100644 --- a/webapp/sass/components/_webrtc.scss +++ b/webapp/sass/components/_webrtc.scss @@ -2,14 +2,9 @@ .webrtc__header { @include webrtc-button; - float: left; - margin-right: 10px; - position: relative; - top: 13px; svg { position: relative; - width: 20px; } } diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 1386b4169..dd8440d19 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -1,57 +1,82 @@ @charset 'UTF-8'; .channel-header { - @include flex(0 0 57px); - border-left: none; + @include flex(0 0 70px); + border-bottom: 1px solid; font-size: 14px; - line-height: 56px; position: relative; width: 100%; z-index: 9; - .member-popover__trigger, - .pinned-posts-button { + .channel-header__icon { + @include border-radius(50%); + border: 1px solid; cursor: pointer; - display: inline-block; - margin-left: 7px; + height: 37px; + line-height: 36px; + margin: 16px 10px 0 0; min-width: 30px; text-align: center; - white-space: nowrap; + width: 37px; + + &.wide { + @include border-radius(37px); + padding: 0; + white-space: nowrap; + width: auto; + + > div { + padding: 0 13px 0 15px; + } + } + + .icon__text { + font-weight: 600; + margin-right: 9px; + } + + a { + display: block; + } .fa { font-size: 19px; } - } - - .member-popover__container, - .member-popover__trigger { - display: inline; - } - .member-popover__trigger { & + div { display: none; } - } - .member-popover__trigger { - .fa { - margin-left: 4px; + .icon { position: relative; + } + + .icon__pin, + .icon__members { top: 2px; } + + .icon__mentions { + top: 5px; + } + + .icon__flag { + top: 3px; + } } - .pinned-posts-button svg { - position: relative; - top: 5px; + .move--left & { + .icon--hidden { + display: none; + } } &.alt { margin: 0; th { - font-weight: normal !important; + font-weight: normal; + vertical-align: top; &.header-list__right { padding-right: 4px; @@ -69,15 +94,15 @@ &:first-child { border-left: none; - padding-left: 15px; - padding-right: 1em; + padding: 0 0 0 20px; text-align: left !important; width: 100%; } &:last-child { - padding-right: 6px; - width: 8.9%; + .channel-header__icon { + margin-right: 17px; + } } } @@ -93,13 +118,26 @@ .heading { display: inline-block; - font-size: 1.3em; - font-weight: 600; + font-size: 17px; + font-weight: 400; margin: 0 4px 0 0; - max-width: 100%; + max-width: calc(100vw - 780px); overflow: hidden; text-overflow: ellipsis; - vertical-align: middle; + vertical-align: top; + white-space: nowrap; + + .move--left & { + max-width: calc(100vw - 830px); + + .multi-teams & { + max-width: calc(100vw - 880px); + } + } + + .multi-teams & { + max-width: calc(100vw - 830px); + } } .caret { @@ -131,62 +169,74 @@ .header-dropdown__icon { color: inherit; - font-size: 12px; + font-size: 21px; margin-left: 1px; position: relative; - top: 1px; + top: 2px; } .channel-header__info { - display: table; - table-layout: fixed; - width: 100%; + margin-top: 12px; + + .channel-header__title { + .header-dropdown__icon { + color: $dark-gray; + } + + > a { + display: inline-block; + text-decoration: none; + } + + .modal { + white-space: normal; + } + } - > div { - display: block; + .channel-header__description { + display: inline-block; + height: 22px; + margin-top: 3px; + max-width: calc(100vw - 730px); + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; word-break: break-word; - &.dropdown { - float: left; - max-width: 90%; - padding-right: 1em; + .markdown__heading { + font-size: 1em; + margin: 0; + } - .header-dropdown__icon { - color: $dark-gray; - } + .multi-teams & { + max-width: calc(100vw - 780px); + } - a { - text-decoration: none; - } + &.light { + @include opacity(.6); + color: inherit; - .modal { - white-space: normal; + &:hover, + &:focus { + color: inherit; } } - &.description { - margin-top: 2px; - max-height: 45px; - overflow: hidden; - text-overflow: ellipsis; - - .markdown-inline-img { - max-height: 45px; - } + .move--left & { + max-width: calc(100vw - 780px); } - &.popover { - white-space: normal; + .markdown-inline-img { + max-height: 45px; } + } - .status { - width: 18px; + .status { + width: 18px; - svg { - max-height: 20px; - width: 16px; - } + svg { + max-height: 20px; + width: 16px; } } } @@ -261,7 +311,7 @@ @include legacy-pie-clearfix; @include display-flex(); @include flex-direction(row-reverse); - padding: 9px 10px; + padding: 16px 47px 12px 12px; position: relative; &:before { @@ -305,11 +355,12 @@ .sidebar-header-dropdown, .admin-navbar-dropdown { font-size: .85em; + height: 100%; left: 0; - margin-right: -15px; + margin-right: -22px; position: absolute; right: 22px; - top: 10px; + top: 0; li { width: 100%; @@ -323,7 +374,7 @@ color: $white; display: block; font-size: 1em; - height: 40px; + height: 100%; left: 0; line-height: 1.8; padding: 10px; @@ -331,7 +382,7 @@ } .dropdown-menu { - margin-right: 3px; + margin-right: 10px; margin-top: 4px; width: 199px; @@ -344,8 +395,16 @@ .sidebar-header-dropdown__icon, .admin-navbar-dropdown__icon { + border-radius: 36px; fill: $white; float: right; + height: 36px; + line-height: 36px; + position: relative; + right: -3px; + text-align: center; + top: 7px; + width: 36px; } } @@ -377,9 +436,7 @@ } .team__name { - float: left; line-height: 22px; - margin-top: -2px; } .user__name { @@ -419,8 +476,30 @@ } .channel-header__favorites { + @include opacity(.5); float: left; - margin: 1px 10px 0 0; + height: 20px; + margin: 0 8px 0 0; + padding-top: 3px; + position: relative; + z-index: 1; + + &.inactive { + color: inherit; + + &:hover, + &:active { + color: inherit; + } + } + + &.active { + @include opacity(1); + } + + i { + font-size: 17px; + } } .app__body { @@ -476,6 +555,7 @@ &.active { color: $primary-color; @include opacity(1); + .icon { fill: $primary-color; } diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 59b348d9e..09b6534b0 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -31,17 +31,17 @@ .navbar-default { background: $primary-color; border: none; - min-height: 45px; + min-height: 50px; position: absolute; .navbar-nav { > li { > a { - height: 45px; + height: 50px; padding: 0 1.3em; i { - line-height: 45px; + line-height: 50px; } } } @@ -52,22 +52,37 @@ border-radius: 0; fill: $white; float: left; - height: 44px; + height: 50px; line-height: 48px; margin: 0; padding: 0 10px; - width: 43px; + width: 50px; z-index: 5; + &.navbar-right__icon { + @include border-radius(50px); + height: 32px; + line-height: 0; + margin: 9px 10px 0 0; + padding: 0; + width: 32px; + } + + &.menu-toggle { + margin-right: 16px; + } + .icon-bar { background: $white; width: 21px; } - .icon-search { - font-size: 17px; - position: relative; - top: -2px; + .icon__search { + svg { + left: -1px; + position: relative; + width: 17px; + } } .icon--white { @@ -84,15 +99,15 @@ .navbar-brand { float: none; font-size: 16px; - height: 45px; - line-height: 45px; + height: 50px; + line-height: 50px; padding: 0 .5em; .heading { color: $white; display: inline-block; font-weight: 600; - line-height: 47px; + line-height: 50px; margin-right: 5px; max-width: calc(100% - 200px); overflow: hidden; @@ -114,20 +129,26 @@ margin-right: 1em; &.info-popover { - @include background-size(100% 100%); - background-image: url('../images/info__icon.png'); + @include border-radius(50px); cursor: pointer; - height: 19px; + height: 32px; + line-height: 32px; + margin: 9px 10px 0 0; position: relative; - top: 13px; - vertical-align: middle; - width: 19px; + text-align: center; + vertical-align: top; + width: 32px; + + svg { + position: relative; + top: 5px; + } } } } } - .sidebar-channel { + .sidebar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index b8c623e2d..b227d818c 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -1487,16 +1487,21 @@ .flag-icon__container { display: inline-block; - font-size: 12px; + height: 15px; margin-left: 7px; position: relative; - top: 1px; + top: 2px; + vertical-align: top; visibility: hidden; &.visible { visibility: visible; } + svg { + width: 12px; + } + path { fill: inherit; } diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index ed587305a..cc0c4920f 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -16,6 +16,33 @@ padding-top: 44px; } + .sidebar-item { + .icon { + display: inline-block; + margin: 0 7px 0 1px; + position: relative; + text-align: left; + vertical-align: top; + width: 15px; + } + + .icon__lock { + top: 2px; + } + + .icon__globe { + top: 1px; + } + } + + .sidebar-item__name { + display: inline-block; + max-width: 167px; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + } + .sidebar__divider { color: $white; font-size: .9em; @@ -44,7 +71,6 @@ } .sidebar__switcher { - border-top: 1px solid; bottom: 0; display: block; padding-bottom: 0; @@ -54,18 +80,30 @@ button { @include single-transition(all, .15s, ease-in); display: block; - height: 42px; - text-align: center; + font-weight: 600; + height: 50px; + line-height: 50px; + padding: 0; text-decoration: none; width: 100%; > span { - @include single-transition(all, .15s, ease-in); - @include opacity(.6); + display: inline-block; position: relative; + vertical-align: middle; z-index: 5; } + .icon { + display: none; + margin-right: 15px; + + svg { + position: relative; + top: 7px; + } + } + &:hover { span { @include opacity(1); @@ -93,15 +131,20 @@ } .badge { - background-color: $primary-color; + @include border-radius(100px); + font-size: 11px; + height: 16px; + line-height: 16px; + min-width: 18px; + padding: 0 5px; position: absolute; - right: 10px; - top: 5px; + right: 15px; + top: 8px; } .nav-pills__container { -webkit-overflow-scrolling: touch; - height: calc(100% - 99px); + height: calc(100% - 120px); overflow: auto; position: relative; } @@ -119,11 +162,11 @@ } .nav-pills__unread-indicator-top { - top: 66px; + top: 80px; } .nav-pills__unread-indicator-bottom { - bottom: 50px; + bottom: 60px; } .nav { @@ -135,12 +178,10 @@ li { > h4 { - color: #aaaaaa; font-size: 1em; - font-weight: 400; - letter-spacing: -.3px; - margin: 1.1em 0 .5em; - padding: 0 10px 0 15px; + font-weight: 600; + margin: 1.5em 0 .7em; + padding: 0 12px 0 17px; text-transform: uppercase; } @@ -155,17 +196,24 @@ line-height: 1.5; outline: none; overflow: hidden; - padding: 3px 10px 3px 25px; + padding: 5px 0 5px 17px; text-overflow: ellipsis; white-space: nowrap; + .icon { + &.icon__globe, + &.icon__lock { + @include opacity(.5); + } + } + &.has-badge { - padding-right: 30px; + .sidebar-item__name { + max-width: 142px; + } } &.has-close { - padding-right: 30px; - &:hover { .btn-close { @include opacity(.8); @@ -177,11 +225,11 @@ @include opacity(0); display: none; font-family: 'Open Sans', sans-serif; - font-size: 20px; + font-size: 21px; font-weight: 600; position: absolute; - right: 15px; - top: -1px; + right: 18px; + top: 0px; &:hover { @include opacity(1); @@ -204,7 +252,14 @@ left: 0; position: absolute; top: 0; - width: 5px; + width: 3px; + } + } + + .icon { + &.icon__globe, + &.icon__lock { + @include opacity(.7); } } @@ -229,9 +284,8 @@ } .add-channel-btn { - color: #aaaaaa; float: right; - font-size: 22px; + font-size: 1.9em; font-weight: 700; line-height: 18px; margin: -2px 0 0 0; @@ -245,35 +299,46 @@ } .status-wrapper { + height: 36px; + width: 36px; + .status { - bottom: -9px; + bottom: -4px; height: 18px; right: -5px; width: 18px; - svg { - top: 3px; - max-height: 12px; + &.status-edit { + .fa { + top: 4px; + } } - .icon__container { + .fa { position: relative; - top: 3px; + top: 2px; + } + .icon__container { &:after { border-radius: 20px; content: ''; - height: 9px; - left: 5px; + height: 10px; + left: 4px; position: absolute; - top: 2px; - width: 9px; + top: 4px; + width: 10px; } + } - svg { - top: 0; - z-index: 1; - } + svg { + height: 13px; + left: 3px; + max-height: initial; + position: relative; + top: 3px; + width: 13px; + z-index: 1; } } } diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index ab73e075b..8181ac270 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -39,6 +39,25 @@ } } + .sidebar-right__table { + display: table; + + > div:not(.sidebar-collapse__container) { + display: table-cell; + + &:last-child { + .channel-header__icon { + margin-right: 17px; + } + } + } + + .search-form__container { + padding-right: 10px; + width: 100%; + } + } + .post-body { img { max-height: 200px; @@ -131,7 +150,6 @@ @include flex(1 1 auto); @include flex-direction(column); border-left: $border-gray; - border-top: $border-gray; height: calc(100% - 56px); } @@ -191,7 +209,7 @@ .sidebar--right__header { @include flex(0 0 44px); - border-bottom: $border-gray; + border-bottom: 1px solid; color: inherit; font-size: 1em; height: 44px; @@ -222,7 +240,7 @@ @include opacity(.9); margin: 0 3px; position: relative; - top: 1px; + top: 3px; } } @@ -234,3 +252,25 @@ .sidebar-right-container { height: 100%; } + +.sidebar-collapse__container { + display: none; +} + +.sidebar-collapse { + @include single-transition(all, .2s, linear); + @include translateX(0); + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 0; + padding-left: 1px; + text-align: center; + width: 50px; + z-index: 5; + + .fa { + position: relative; + top: 18px; + } +} diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index a96685c87..67ec9e3a7 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -80,22 +80,20 @@ } @media (max-width: 1024px) { - .inner-wrap { - &.move--left { - .channel-header { - .heading { - width: 100px; - } - } - } - } - .channel-header { .search-bar__container { .search__form { width: 150px; } } + + .heading { + max-width: calc(100vw - 800px); + + .multi-teams & { + max-width: calc(100vw - 750px); + } + } } .integration-option { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 24db3821f..862c3a59c 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,12 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .channel-header { + .channel-header__icon { + display: none; + } + } + .member-role .member-menu, .member-drop .member-menu { right: 0; @@ -76,10 +82,10 @@ @include box-shadow(none); background: alpha-color($black, .8); border: none; - height: calc(100% - 40px); + height: calc(100% - 50px); max-width: 100%; position: fixed; - top: 47px; + top: 40px !important; width: 100%; &.in { @@ -865,14 +871,18 @@ white-space: nowrap; .heading { + font-size: 17px; + font-weight: 400; line-height: normal; position: relative; - top: 11px; + top: 14px; vertical-align: top; } .header-dropdown__icon { - top: 18px; + font-size: 12px; + margin-left: 5px; + top: 20px; vertical-align: top; } } @@ -891,12 +901,12 @@ @include translate3d(0, 100%, 0); background: alpha-color($black, .9); display: block; - height: calc(100% - 40px); + height: calc(100% - 48px); left: 0; overflow: auto; padding: 1.4em 0 0; position: fixed; - top: 42px; + top: 48px; visibility: hidden; width: 100%; @@ -981,21 +991,36 @@ } .search-bar__container { - @include flex(0 0 44px); + @include flex(0 0 50px); background: $primary-color; color: $white; padding: 0; + .search-form__container { + padding: 0; + } + .search__form { @include single-transition(all, .2s, linear); @include translateX(0); border: none; - height: 45px; - padding: 7px 20px 0 49px; - position: relative; + margin-top: 9px; width: 100%; - margin-left: 0px; - margin-right: 0px; + + .search-bar { + font-size: 14px; + height: 32px; + padding: 0 40px; + } + + .search__icon { + left: 15px; + top: 7px; + + svg { + width: 17px; + } + } .icon--refresh { @include opacity(.6); @@ -1009,7 +1034,7 @@ background: $white; border: none; color: $dark-gray; - padding: 0 31px 0 31px; + padding: 0 31px; } } @@ -1053,7 +1078,7 @@ } .nav-pills__container { - height: calc(100% - 42px); + height: calc(100% - 60px); } > div { @@ -1110,7 +1135,7 @@ } h4 { - margin: 16px 0 8px; + margin: 2em 0 1.5em; } > a { @@ -1148,10 +1173,10 @@ } .emoji-rhs { - position: relative; display: none; - top: 1px; + position: relative; right: -1px; + top: 1px; } .msg-typing:empty { @@ -1171,27 +1196,32 @@ } } - .sidebar__collapse, - .sidebar__search-icon { - display: block; + .sidebar-collapse__container { + display: table-cell; + vertical-align: top; } .sidebar__search-clear { + @include opacity(1); + color: inherit; display: block; - top: 6px; - height: 30px; - width: 35px; - margin-right: 18px; + height: 32px; + margin-right: 0; + text-align: center; + top: 0; + width: 42px; + &.visible { visibility: visible; } } .sidebar__search-clear-x { - margin-left: 14px; - font-size: 22px; + font-size: 21px; font-weight: 700; - opacity: .7; + line-height: 0; + position: relative; + top: 9px; } .sidebar--right__close { @@ -1199,12 +1229,12 @@ } .sidebar-right__body { - height: calc(100% - 44px); + height: calc(100% - 56px); } } .search-items-container { - height: calc(100% - 44px); + height: calc(100% - 56px); } .inner-wrap { @@ -1261,10 +1291,10 @@ .app__content { margin: 0; - padding-top: 45px; + padding-top: 56px; .channel__wrap & { - padding-top: 45px; + padding-top: 56px; } #channel-header { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 70b5e9b8f..8b81f30ca 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -1,6 +1,30 @@ @charset 'UTF-8'; @media screen and (max-width: 960px) { + .inner-wrap { + &.move--left { + .channel-header { + .heading { + max-width: calc(100vw - 600px); + + .multi-teams & { + max-width: calc(100vw - 650px); + } + } + } + + .channel-header__info { + .channel-header__description { + max-width: calc(100vw - 600px); + + .multi-teams & { + max-width: calc(100vw - 650px); + } + } + } + } + } + .textarea-wrapper { .textbox-preview-link, .textbox-help-link { @@ -8,15 +32,23 @@ } } - .channel-header { - .heading { - max-width: 90px; + .channel-header__info { + .channel-header__description { + max-width: calc(100vw - 660px); + + .multi-teams & { + max-width: calc(100vw - 710px); + } } } - .search__form { - .sidebar--right & { - width: 300px; + .channel-header { + .heading { + max-width: calc(100vw - 700px); + + .multi-teams & { + max-width: calc(100vw - 750px); + } } } @@ -137,7 +169,6 @@ transform: translateX(0) !important; .search-bar__container { - padding-right: 8px; z-index: 5; } } diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss index 46c1676ea..bb583c73a 100644 --- a/webapp/sass/routes/_about-modal.scss +++ b/webapp/sass/routes/_about-modal.scss @@ -25,8 +25,16 @@ font-size: 16px; } - .fa { - margin: 0 4px 0 8px; + .icon { + margin: 0 5px 0 8px; + position: relative; + top: 1px; + + svg { + @include opacity(.8); + height: 14px; + width: 14px; + } } } } diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss index 6a041d6ec..4d2b031e4 100644 --- a/webapp/sass/utils/_mixins.scss +++ b/webapp/sass/utils/_mixins.scss @@ -31,28 +31,8 @@ // Webrtc button @mixin webrtc-button { .webrtc__button { - @include border-radius(50px); - background: $button--ready; - display: block; - height: 33px; - text-align: center; - width: 33px; - - &.on, - &:hover { - background: darken($button--ready, 5%); - } - &.offline { - background: $video-circle-offline; - - &:hover { - background: $video-circle-offline; - } - } - - svg { - fill: $white; + @include opacity(.5); } } } |