diff options
Diffstat (limited to 'app/assets/stylesheets/pages/note_form.scss')
-rw-r--r-- | app/assets/stylesheets/pages/note_form.scss | 76 |
1 files changed, 49 insertions, 27 deletions
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 322363d7f4b..0c9d151e3cd 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -48,7 +48,7 @@ .common-note-form { .md-area { - border: 1px solid $border-color; + border: 1px solid $gray-400; border-radius: $border-radius-large; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; @@ -65,19 +65,41 @@ } } - // Disable inner focus - textarea:focus { - @include gl-shadow-none; + &:hover, + &:focus-within { + @include gl-shadow-md; } - } - .comment-warning-wrapper:focus-within { - @include gl-focus; - } -} + &:hover { + border: 1px solid $gray-500; + } -.md-area:focus-within { - @include gl-focus; + &:focus-within { + border: 1px solid $gray-900; + } + + // Add focus + .zen-backdrop:not(.fullscreen) textarea { + width: calc(100% - 4px); + margin: 2px; + padding-left: calc(#{$gl-spacing-scale-5} - 2px); + + .gl-dark & { + width: calc(100% - 6px); + margin: 2px 3px; + padding-left: calc(#{$gl-spacing-scale-5} - 3px); + } + + &:focus { + @include gl-focus; + } + } + + .note-textarea-rounded-bottom { + border-bottom-left-radius: calc(#{$border-radius-large} - 1px); + border-bottom-right-radius: calc(#{$border-radius-large} - 1px); + } + } } .md-header { @@ -217,6 +239,7 @@ table { .md-area { background-color: $white; + @include gl-rounded-base; } } @@ -245,24 +268,21 @@ table { .diff-file, .commit-diff { .discussion-reply-holder { - background-color: $gray-light; border-radius: 0 0 $gl-border-radius-base $gl-border-radius-base; - padding: $gl-padding; + padding: 0 $gl-padding $gl-padding-12 $gl-padding; border-top: 1px solid $gray-50; + .new-note { - background-color: $gray-light; border-top: 1px solid $gray-50; } &.is-replying { - padding-bottom: $gl-padding; - background-color: $white; + padding-top: $gl-padding-12; } &.internal-note, &.internal-note.is-replying { - background-color: $orange-50; + padding-top: $gl-padding-12 !important; } .user-avatar-link { @@ -273,6 +293,11 @@ table { } } +.diff-td > .content > .discussion-reply-holder { + padding-top: $gl-padding-12; + @include gl-bg-gray-10; +} + .discussion-with-resolve-btn { @include media-breakpoint-up(sm) { display: flex; @@ -307,13 +332,19 @@ table { resize: none; padding: $gl-padding-8 $gl-padding-12; line-height: 1; - border: 1px solid $border-color; + border: 1px solid $gray-200; background-color: $white; overflow: hidden; + transition: border-color ease-in-out 0.15s, + box-shadow ease-in-out 0.15s; @include media-breakpoint-down(xs) { margin-bottom: $gl-padding-8; } + + &:hover { + border: 1px solid $gray-500; + } } } @@ -348,10 +379,6 @@ table { .toolbar-text { font-size: 14px; line-height: $gl-spacing-scale-7; - - @include media-breakpoint-up(md) { - float: left; - } } .note-form-actions { @@ -438,9 +465,4 @@ table { .comment-warning-wrapper { transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - - .md-area { - border: 0; - box-shadow: none; - } } |