PRC-1035: Add scss to highlight application retire date.

bcgov · Feb 25, 2019 · 377f5dc · 377f5dc
1 parent 0d9dbfb
commit 377f5dc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/app/applications/details-panel/details-panel.component.html b/src/app/applications/details-panel/details-panel.component.html
@@ -34,7 +34,7 @@ <h2 class="title">Crown Land File: &nbsp; #{{(application && application['clFile
             <strong>{{application.appStatus}}</strong>
           </div>
         </div>
-        <div class="status-msg" *ngIf="application['retireDate']">
+        <div class="status-msg status-highlight" *ngIf="application['retireDate']">
           This application will be available on this site until {{application['retireDate'] | date:'longDate'}}. <br> It will continue to be available on <a href="http://a100.gov.bc.ca/pub/pls/gator/gator$queryforms.search_ip_by_file_number" title="To find information about this application after the specified date, visit GATOR" target="_blank">GATOR</a>.
         </div>
       </section>
@@ -144,4 +144,4 @@ <h5>Legal Description</h5>
 
     </div>
   </div>
-</div>
+</div>
diff --git a/src/app/applications/details-panel/details-panel.component.scss b/src/app/applications/details-panel/details-panel.component.scss
@@ -44,7 +44,7 @@ section {
   background: #fff;
 }
 
-.applicant-name, 
+.applicant-name,
 .application-purpose {
   letter-spacing: -0.02rem;
   line-height: 1.5rem;
@@ -79,6 +79,17 @@ section {
 
 .status-msg {
   margin-top: 0.6rem;
+
+  &.status-highlight {
+    position: relative;
+    padding: 0 0.25rem;
+    margin-bottom: 0;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    color: #004085;
+    background-color: #cce5ff;
+    border-color: #b8daff;
+  }
 }
 
 .commenting-open {
@@ -173,4 +184,4 @@ section {
 
 .shapefile-list__id {
   margin-bottom: 0.5rem;
-}
+}