diff options
Diffstat (limited to 'webapp/sass/components')
-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 |
7 files changed, 128 insertions, 64 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; } } |