socialnetworknews-web

commit 3101a3d368e5262bc47cc60928e0858ead2a6385
parent 1d8e8f1dccbbfcf319eea699256d5a7a1fb7b8c5
Author: MTRNord <mtrnord1@gmail.com>
Date:   Thu, 15 Mar 2018 12:16:09 +0100

Try fixing the Ribbons

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

3 files changed, 52 insertions(+), 56 deletions(-)
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -2,8 +2,10 @@
   <article *ngFor="let item of data">
     <!--<a href="{{item.tweet_link}}">-->
       <!--Retweet Badge-->
-      <div class="card-ribbon card-ribbon-top card-ribbon-left tblue" *ngIf="item.retweet == true" style="max-width: 22rem">
-        <i class="fa fa-retweet"></i>
+      <div class="ribbon ribbon-top-left tblue" *ngIf="item.retweet == true" style="max-width: 22rem">
+        <span>
+          <i class="fa fa-retweet"></i>
+        </span>
       </div>
       <div>
         <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -23,7 +23,7 @@
   display: block;
 }
 
-.grid > article > div {
+.grid > article > div > not(.card-ribbon){
   position: relative;
   display: inline-block;
   /* if you need ie6/7 support */
diff --git a/src/styles.scss b/src/styles.scss
@@ -128,35 +128,58 @@ html { overflow:auto; }
 }
 */
 
-/* The ribbons by https://codepen.io/eode9/pen/twkKm*/
-
-.card-ribbon-bottom.card-ribbon-right, .card-ribbon-top.card-ribbon-left {
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
+/* The ribbons by https://codepen.io/nxworld/pen/oLdoWb*/
+/* common */
+.ribbon {
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+  position: relative;
 }
-
-.card-ribbon-left {
-  left: -70px;
+.ribbon::before,
+.ribbon::after {
+  position: absolute;
+  z-index: -1;
+  content: '';
+  display: block;
+  border: 5px solid #2980b9;
 }
-
-.card-ribbon-top {
-  top: 20px;
+.ribbon span {
+  position: absolute;
+  display: block;
+  width: 225px;
+  padding: 15px 0;
+  background-color: #3498db;
+  box-shadow: 0 5px 10px rgba(0,0,0,.1);
+  color: #fff;
+  font: 700 18px/1 'Lato', sans-serif;
+  text-shadow: 0 1px 1px rgba(0,0,0,.2);
+  text-transform: uppercase;
+  text-align: center;
 }
 
-.card-ribbon:after {
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
+/* top left*/
+.ribbon-top-left {
+  top: -10px;
+  left: -10px;
 }
-
-.card-ribbon {
-  width: 200px;
-  padding: 2px 5px;
-  position: absolute;
-  text-align: center;
-  font-size: 12px;
-  z-index: 99;
+.ribbon-top-left::before,
+.ribbon-top-left::after {
+  border-top-color: transparent;
+  border-left-color: transparent;
+}
+.ribbon-top-left::before {
+  top: 0;
+  right: 0;
+}
+.ribbon-top-left::after {
+  bottom: 0;
+  left: 0;
+}
+.ribbon-top-left span {
+  right: -25px;
+  top: 30px;
+  transform: rotate(-45deg);
 }
 
 .tblue {
@@ -170,32 +193,3 @@ html { overflow:auto; }
 .indigo {
   background-color: #3f51b5 !important;
 }
-
-.testimonial-card .card-up {
-  overflow: hidden;
-  height: 120px;
-  border-radius: .3rem .3rem 0 0;
-}
-
-.testimonial-card .avatar {
-  border-radius: 50%;
-  height: 120px;
-  width: 120px;
-  margin: -65px auto 0;
-  overflow: hidden;
-  border: 5px solid #fff;
-}
-
-.testimonial-card .avatar img {
-  width: 100%;
-}
-
-.testimonial-card .card-body {
-  text-align: center;
-}
-
-.middle {
-  display: inline-block;
-  margin-left: 50%;
-  transform: translateX(-50%);
-}