diff options
author | Clement Ho <ClemMakesApps@gmail.com> | 2017-05-23 12:36:41 -0500 |
---|---|---|
committer | Clement Ho <ClemMakesApps@gmail.com> | 2017-06-06 10:39:23 -0500 |
commit | 7b533ef7f140450783485b01cdf0434b77a9f90e (patch) | |
tree | 16c4bb003c74c02e858ef835602e87e5709b327d /app/assets/stylesheets/pages/notes.scss | |
parent | d07e85e1033f8026f155c6171cb3ebcd6b93d9ed (diff) | |
download | gitlab-ce-7b533ef7f140450783485b01cdf0434b77a9f90e.tar.gz |
Change from double click to single click to open dropdownch-test-2
Diffstat (limited to 'app/assets/stylesheets/pages/notes.scss')
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 137 |
1 files changed, 80 insertions, 57 deletions
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 4b15fc2bd82..f956e3757bf 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -14,24 +14,11 @@ ul.notes { margin: 0; padding: 0; - .timeline-icon { - float: left; - - svg { - width: 16px; - height: 16px; - fill: $gray-darkest; - position: absolute; - left: 0; - top: 16px; - } - } - .timeline-content { margin-left: 55px; &.timeline-content-form { - @media (max-width: $screen-sm-max) { + @include notes-media('max', $screen-sm-max) { margin-left: 0; } } @@ -43,7 +30,11 @@ ul.notes { } .discussion-body { - padding-top: 15px; + padding-top: 8px; + + .panel { + margin-bottom: 0; + } } .discussion { @@ -52,20 +43,22 @@ ul.notes { position: relative; } - .note { + > li { + padding: $gl-padding $gl-btn-padding; display: block; position: relative; border-bottom: 1px solid $white-normal; + &:last-child { + // Override `.timeline > li:last-child { border-bottom: none; }` + border-bottom: 1px solid $white-normal; + } + &.being-posted { pointer-events: none; opacity: 0.5; .dummy-avatar { - display: inline-block; - height: 40px; - width: 40px; - border-radius: 50%; background-color: $kdb-border; border: 1px solid darken($kdb-border, 25%); } @@ -78,11 +71,7 @@ ul.notes { &.note-discussion { &.timeline-entry { - padding: 14px 10px; - } - - .system-note { - padding: 0; + padding: $gl-padding 10px; } } @@ -125,13 +114,13 @@ ul.notes { .note-awards { .js-awards-block { - margin-bottom: 16px; + margin-top: 16px; } } .note-header { - @media (max-width: $screen-xs-min) { + @include notes-media('max', $screen-xs-min) { .inline { display: block; } @@ -160,14 +149,14 @@ ul.notes { .system-note { font-size: 14px; - padding: 0; + padding-left: 0; clear: both; - @media (min-width: $screen-sm-min) { + @include notes-media('min', $screen-sm-min) { margin-left: 65px; } - .note-header { + .note-header-info { padding-bottom: 0; } @@ -197,11 +186,22 @@ ul.notes { } } - .timeline-content { - padding: 14px 10px; + .timeline-icon { + float: left; - @media (min-width: $screen-sm-min) { - margin-left: 20px; + svg { + width: 16px; + height: 16px; + fill: $gray-darkest; + position: absolute; + left: 0; + top: 2px; + } + } + + .timeline-content { + @include notes-media('min', $screen-sm-min) { + margin-left: 30px; } } @@ -370,20 +370,30 @@ ul.notes { display: flex; justify-content: space-between; - @media (max-width: $screen-xs-max) { + @include notes-media('max', $screen-xs-max) { flex-flow: row wrap; } } .note-header-info { min-width: 0; - padding-bottom: 5px; + padding-bottom: 8px; +} + +.system-note .note-header-info { + padding-bottom: 0; +} + +.note-header-author-name { + @include notes-media('max', $screen-xs-max) { + display: none; + } } .note-headline-light { display: inline; - @media (max-width: $screen-xs-min) { + @include notes-media('max', $screen-xs-min) { display: block; } } @@ -425,7 +435,7 @@ ul.notes { margin-left: 10px; color: $gray-darkest; - @media (max-width: $screen-xs-max) { + @include notes-media('max', $screen-xs-max) { float: none; margin-left: 0; } @@ -436,7 +446,7 @@ ul.notes { } .discussion-actions { - @media (max-width: $screen-md-max) { + @include notes-media('max', $screen-md-max) { float: none; margin-left: 0; @@ -450,7 +460,7 @@ ul.notes { display: inline; line-height: 20px; - @media (min-width: $screen-sm-min) { + @include notes-media('min', $screen-sm-min) { margin-left: 10px; line-height: 24px; } @@ -540,13 +550,13 @@ ul.notes { position: relative; top: -2px; display: inline-block; - padding-left: 4px; - padding-right: 4px; + padding-left: 7px; + padding-right: 7px; color: $notes-role-color; font-size: 12px; line-height: 20px; border: 1px solid $border-color; - border-radius: $border-radius-base; + border-radius: $label-border-radius; } @@ -582,6 +592,22 @@ ul.notes { } } +.discussion-body, +.diff-file { + .notes .note { + padding-left: $gl-padding; + padding-right: $gl-padding; + + &.system-note { + padding-left: 0; + + @media (min-width: $screen-sm-min) { + margin-left: 70px; + } + } + } +} + .diff-file { .is-over { .add-diff-note { @@ -591,17 +617,11 @@ ul.notes { } .disabled-comment { - margin-left: -$gl-padding-top; - margin-right: -$gl-padding-top; background-color: $gray-light; border-radius: $border-radius-base; border: 1px solid $border-gray-normal; color: $note-disabled-comment-color; - line-height: 200px; - - .disabled-comment-text { - line-height: normal; - } + padding: 90px 0; a { color: $gl-link-color; @@ -609,7 +629,7 @@ ul.notes { } .line-resolve-all-container { - @media (min-width: $screen-sm-min) { + @include notes-media('min', $screen-sm-min) { margin-right: 0; padding-left: $gl-padding; } @@ -651,7 +671,7 @@ ul.notes { .line-resolve-all { vertical-align: middle; display: inline-block; - padding: 6px 10px; + padding: 5px 10px 6px; background-color: $gray-light; border: 1px solid $border-color; border-radius: $border-radius-default; @@ -664,6 +684,10 @@ ul.notes { .line-resolve-btn { margin-right: 5px; + + svg { + vertical-align: middle; + } } } @@ -700,6 +724,10 @@ ul.notes { } } +.line-resolve-text { + vertical-align: middle; +} + .discussion-next-btn { svg { margin: 0; @@ -716,11 +744,6 @@ ul.notes { // Merge request notes in diffs .diff-file { - // Diff is side by side - .notes_content.parallel .note-header .note-headline-light { - display: block; - position: relative; - } // Diff is inline .notes_content .note-header .note-headline-light { display: inline-block; |