diff --git a/app/assets/javascripts/discourse/components/post-gap.js.es6 b/app/assets/javascripts/discourse/components/post-gap.js.es6 index 38e40fa44..a9c5f8bd6 100644 --- a/app/assets/javascripts/discourse/components/post-gap.js.es6 +++ b/app/assets/javascripts/discourse/components/post-gap.js.es6 @@ -1,5 +1,6 @@ export default Ember.Component.extend({ classNameBindings: [':gap', 'gap::hidden'], + classNameBindings: [':gap', ':jagged-border', 'gap::hidden'], initGaps: function(){ this.set('loading', false); diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 3eadaf2d1..058febcb6 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -716,6 +716,34 @@ $topic-avatar-width: 45px; cursor: pointer; text-align: center; width: calc(#{$topic-avatar-width} + #{$topic-body-width} + 2 * #{$topic-body-width-padding}); + + &.jagged-border { + background-image: + linear-gradient( + 135deg, + $secondary 50%, rgba(255,255,255,0) 50% + ), + linear-gradient( + -135deg, + $secondary 50%, rgba(255,255,255,0) 50% + ), + linear-gradient( + 45deg, + $secondary 50%, rgba(255,255,255,0) 50% + ), + linear-gradient( + -45deg, + $secondary 50%, rgba(255,255,255,0) 50% + ); + background-position: + top center, top center, + bottom center, bottom center; + background-size: .9em .9em; + background-repeat: repeat-x; + padding: 20px 0; + margin-bottom: 20px; + } + } .time-gap {