diff options
Diffstat (limited to 'webapp/sass/layout')
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 5 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 194 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 8 |
3 files changed, 110 insertions, 97 deletions
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 1442a8de8..fefb58092 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -82,11 +82,6 @@ min-width: 1px; } - .post-create-footer { - padding: 5px 0 30px; - width: 100%; - } - .post-right-comments-upload-in-progress { @include opacity(.7); margin-right: 10px; diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 1857462e6..245ff062f 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -258,10 +258,9 @@ .post-list-holder-by-time { -webkit-overflow-scrolling: touch; - background: #ffffff; height: 100%; overflow-y: scroll; - padding: 1em 0 0; + padding: 1em 0 .5em; position: absolute; width: 100%; @@ -385,7 +384,7 @@ .post-create__container { @include flex(0 0 auto); width: 100%; - z-index: 9; + z-index: 5; label { font-weight: normal; @@ -393,7 +392,7 @@ form { margin: 0 auto; - padding: .5em 15px 0; + padding: 0 15px 0; width: 100%; } @@ -404,16 +403,16 @@ .custom-textarea { bottom: 0; max-height: 162px; - padding-top: 8px; overflow: hidden; + padding: 14px 0 14px 20px; resize: none; &:not(.custom-textarea--emoji-picker) { - padding-right: 35px; + padding-right: 40px; } &.custom-textarea--emoji-picker { - padding-right: 60px; + padding-right: 80px; } &.textbox-preview-area { @@ -423,26 +422,113 @@ .emoji-picker { position: absolute; + right: 0; top: -361px; - right: 0px; } - .post-create.scroll { - .btn-file { + .scroll { + .post-body__actions { right: 10px; } .custom-textarea { -ms-overflow-style: auto; - overflow: auto; -webkit-overflow-scrolling: touch; + overflow: auto; &:not(.custom-textarea--emoji-picker) { - padding-right: 43px; + padding-right: 50px; } &.custom-textarea--emoji-picker { - padding-right: 60px; + padding-right: 90px; + } + } + } + + .post-body__actions { + display: flex; + height: 100%; + position: absolute; + right: 0; + top: 0; + + > span { + border-left: 1px solid transparent; + width: 41px; + + &:first-child { + border: none; + } + + > span, + div { + display: block; + height: 49px; + line-height: 49px; + text-align: center; + width: 100%; + } + } + + &:hover, + &:active { + box-shadow: none; + } + + &.btn-file__disabled { + @include opacity(.1); + + &:hover, + &:active { + @include opacity(.1); + } + } + + .icon--emoji { + @include opacity(.5); + @include single-transition(all, .15s); + cursor: pointer; + + &:hover { + @include opacity(.7); + } + + svg { + position: relative; + top: 2px; + } + } + + .icon--attachment { + @include opacity(.4); + @include single-transition(all, .15s); + cursor: pointer; + overflow: hidden; + position: relative; + vertical-align: top; + + &:hover { + @include opacity(.6); + } + + input { + cursor: pointer; + direction: ltr; + filter: alpha(opacity=0); + font-size: 23px; + height: 100%; + margin: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + } + + svg { + position: relative; + top: 3px; } } } @@ -477,69 +563,11 @@ } } - .btn-file { - @include single-transition(all, .15s); - font-size: 16px; - padding: 8px 9px 4px; - position: absolute; - right: 0; - top: 0; - z-index: 5; - - svg { - height: 18px; - width: 18px; - } - - &:hover, - &:active { - box-shadow: none; - } - - &.btn-file__disabled { - @include opacity(.1); - - &:hover, - &:active { - @include opacity(.1); - } - } - - .icon--attachment { - @include opacity(.5); - display: inline-block; - position: relative; - vertical-align: top; - - input { - cursor: pointer; - direction: ltr; - filter: alpha(opacity=0); - font-size: 23px; - height: 100%; - margin: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } - - &:hover { - @include opacity(.9); - } - } - } - .icon--emoji-picker { @include opacity(.5); @include single-transition(all, .15s); cursor: pointer; - font-size: 19px; - margin-left: 7px; - position: relative; - vertical-align: top; &:hover, &:active { @@ -573,23 +601,6 @@ } } - - .icon--emoji-picker { - @include opacity(.5); - @include single-transition(all, .15s); - cursor: pointer; - font-size: 19px; - margin-left: 7px; - position: relative; - vertical-align: top; - - &:hover, - &:active { - @include opacity(.9); - box-shadow: none; - } - } - textarea { box-shadow: none; } @@ -1524,6 +1535,13 @@ margin-left: 5px; vertical-align: top; visibility: hidden; + + svg { + height: 14px; + position: relative; + top: 1px; + width: 14px; + } } .flag-icon__container { diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index 73654923f..bf1cef606 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -95,17 +95,17 @@ .post-create-footer { @include clearfix; + clear: both; font-size: 13px; overflow: visible; position: relative; - clear: both; .post-error { - font-weight: normal; - margin-bottom: 0; + @include opacity(.55); display: inline-block; font-size: .85em; - @include opacity(.55); + font-weight: normal; + margin-bottom: 0; position: absolute; top: -25px; } |