From 901178e48bd74d4f4bfc28e4258162e2cd7f83ae Mon Sep 17 00:00:00 2001
From: Peter Golm <golm.peter@gmail.com>
Date: Tue, 4 Jul 2017 07:32:04 +0200
Subject: [PATCH] Change styling of deprecated operation header

---
 lib/components/Operation/operation.html |  5 +----
 lib/components/Operation/operation.scss | 14 +++++++++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/lib/components/Operation/operation.html b/lib/components/Operation/operation.html
index 28a5592d..67bf8133 100644
--- a/lib/components/Operation/operation.html
+++ b/lib/components/Operation/operation.html
@@ -1,13 +1,10 @@
 <div class="operation" *ngIf="operation">
   <div class="operation-content">
-    <h2 class="operation-header sharable-header">
+    <h2 class="operation-header sharable-header" [ngClass]="{deprecated: operation.deprecated}">
         <a class="share-link" href="#{{operation.anchor}}"></a>{{operation.summary}}
     </h2>
     <endpoint-link *ngIf="pathInMiddlePanel"
       [verb]="operation.verb" [path]="operation.path"> </endpoint-link>
-    <div class="operation-deprecated" *ngIf="operation.deprecated">
-        Warning: Deprecated
-    </div>
     <div class="operation-tags" *ngIf="operation.info.tags.length">
         <a *ngFor="let tag of operation.info.tags" attr.href="#tag/{{tag}}"> {{tag}} </a>
     </div>
diff --git a/lib/components/Operation/operation.scss b/lib/components/Operation/operation.scss
index 4c63abe2..f1e02b67 100644
--- a/lib/components/Operation/operation.scss
+++ b/lib/components/Operation/operation.scss
@@ -16,10 +16,18 @@
 
 .operation-header {
   margin-bottom: calc(1em - 6px);
-}
 
-.operation-deprecated {
-  font-weight: bold;
+  &.deprecated {
+    &:after {
+      content: 'Deprecated';
+      color: $black;
+      background: $yellow;
+      padding: 3px 10px;
+      text-transform: uppercase;
+      display: inline-block;
+      margin: 0;
+    }
+  }
 }
 
 .operation-tags {