From 261950590fb6d252e8619ef5cfb62c8371950a39 Mon Sep 17 00:00:00 2001
From: Chung-Min Cheng <min427@gmail.com>
Date: Thu, 28 Jul 2016 12:17:01 +0900
Subject: [PATCH] doc(guide/Animations): Integrates the styles

Currently the css file used here containing 2 the same "sample-show-hide"
classes so would like to move them together  Also, inline styles are used in 2
elements so integrated them with this as well. This increases the height of
doc a little bit.

No related issues :).
---
 docs/content/guide/animations.ngdoc | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/content/guide/animations.ngdoc b/docs/content/guide/animations.ngdoc
index 411a7bd3412b..084d7b1d7fab 100644
--- a/docs/content/guide/animations.ngdoc
+++ b/docs/content/guide/animations.ngdoc
@@ -27,18 +27,24 @@ Below is a quick example of animations being enabled for `ngShow` and `ngHide`:
   <file name="index.html">
     <div ng-init="checked=true">
       <label>
-        <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
+        <input type="checkbox" class="checkbox-element" ng-model="checked"> Is Visible...
       </label>
-      <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
+      <div class="visable-area sample-show-hide" ng-show="checked">
         Visible...
       </div>
     </div>
   </file>
   <file name="animations.css">
-    .sample-show-hide {
+    .checkbox-element {
+      float: left;
+      margin-right: 10px;
+    }
+
+    .visable-area {
       padding: 10px;
       border: 1px solid black;
-      background: white;
+      background-color: white;
+      clear: both;
     }
 
     .sample-show-hide {