socialnetworknews-web

commit 379e0ed96431aec10fe070b3cad735a061fe23c9
parent 89d6a9287cd8a74ff56dc2b5024565ec2a242b34
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sun, 25 Mar 2018 18:56:22 +0200

Move ribbon to the other side (to top-right)

Diffstat:
M
src/app/tweet-list/tweet-list.component.html
 | 
2
+-
M
src/app/tweet-list/tweet-list.component.scss
 | 
26
+++++++++++++++++++++++++-

2 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,7 +1,7 @@
 <spinner spinner="spinner"></spinner>
 <div fxLayout fxLayout.xs="column" fxLayoutGap="10px" fxLayoutGap.xs="0" fxLayoutAlign="start" *ngFor="let row of data" class="gridHack">
   <mat-card *ngFor="let item of row">
-    <div class="ribbon ribbon-top-left" *ngIf="item.retweet" style="max-width: 22rem">
+    <div class="ribbon ribbon-top-right" *ngIf="item.retweet" style="max-width: 22rem">
       <span>
         <i class="fa fa-retweet"></i>
       </span>
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -48,7 +48,7 @@
   display: block;
 }
 
-/* The ribbons by https://codepen.io/nxworld/pen/oLdoWb*/
+/* The ribbons by https://codepen.io/nxworld/pen/oLdoWb */
 /* common */
 .ribbon {
   width: 150px;
@@ -103,6 +103,30 @@
   transform: rotate(-45deg);
 }
 
+/* top right*/
+.ribbon-top-right {
+  top: -10px;
+  right: -10px;
+}
+.ribbon-top-right::before,
+.ribbon-top-right::after {
+  border-top-color: transparent;
+  border-right-color: transparent;
+}
+.ribbon-top-right::before {
+  top: 0;
+  left: 0;
+}
+.ribbon-top-right::after {
+  bottom: 0;
+  right: 0;
+}
+.ribbon-top-right span {
+  left: -25px;
+  top: 30px;
+  transform: rotate(45deg);
+}
+
 .mat-card-image:first-child {
   margin-top: 0 !important;
 }