remove inline styles

Author: nearbycoder

client/app/styles/main.scss

@@ -1,6 +1,47 @@
 
 // bower:scss
 // endbower
+  #mainquestion {
+    font-size: 30px;
+  }
+  #mainq {
+    font-size:20px;
+  }
+  .mainoptions {
+    font-size:20px;
+    margin:0 5px;
+    padding:0 0 15px 0;
+  }
+  .card {
+    padding-bottom: 20px;
+  }
+  .progress {
+    height:30px;
+  }
+  .determinate {
+    height:30px;
+  }
+  .question {
+    font-size:20px;
+    position:absolute;
+    left:10px;
+    z-index:100;
+    width: 100px;
+  }
+  #mainquestionlabel {
+    font-size: 20px;
+  }
+  .card-action {
+    margin-left:25px;
+    margin-right:25px;
+  }
+  .questions {
+    font-size:20px;
+    margin:10px;
+  }
+  #pieChart {
+    padding: 20px;
+  }
   @media only screen and (max-device-width: 480px) {
     body {
       font-size: 14px;

client/app/views/main.html

@@ -3,16 +3,16 @@
     <div class="card blue darken-3">
       <div class="card-content white-text">
           <div class="input-field col s12 m12 l12">
-          <input id="mainquestion" ng-model="title" type="text" class="validate" style="font-size:20px">
-          <label for="mainquestion" id="mainquestionlabel" style="font-size:20px">Type your questions or options here</label>
+          <input id="mainq" ng-model="title" type="text" class="validate">
+          <label for="mainq" id="mainquestionlabel">Type your questions or options here</label>
         </div>
         <div class="input-field col s12 m12 l12" ng-repeat="option in options">
           <input id="option1" ng-model="option.name" ng-focus="addOption()" type="text" class="validate">
           <label ng-class="{active:option.name}" for="option{{$index + 1}}">Option {{$index + 1}}</label>
         </div>
         <div style="clear:both"></div>
       </div>
-      <div class="card-action" style="margin-left:25px;margin-right:25px;">
+      <div class="card-action">
         <p>
           <input type="checkbox" ng-model="multiple" id="multiple" />
           <label for="multiple" class='red-text text-lighten-5'>Allow multiple poll choices?</label>

client/app/views/results.html

@@ -1,24 +1,24 @@
  <div class="row">
   <div class="col s12 m12 l12">
-    <div class="card blue darken-3" style="padding-bottom: 20px;">
+    <div class="card blue darken-3">
       <div class="card-content white-text">
         <div class="col s12 m12 l12">
-          <p style="font-size:30px" id="mainquestion">{{title}}</p>
+          <p id="mainquestion">{{title}}</p>
         </div>
         <div class="col s6 m6 l6">
           <div class="col s12 m12 l12" ng-repeat="option in options">
-            <p style="font-size:20px;margin:0px 5px;padding:0px 0 15px 0;">
-            <label for="test{{$index}}" style="font-size:20px" class='red-text text-lighten-5 questions'>{{option.name}}</label>
-            <div class="progress" style="height:30px;background-color:{{option.highlight}}">
-                <div class="determinate" style="background-color:{{option.color}} ;width: {{option.percent}};height:30px;">
-                  <p class="questions" style="font-size:20px;position:absolute;left:10px;z-index:100;width: 100px">Votes: {{option.votes}}</p>
+            <p class="mainoptions">
+            <label for="test{{$index}}" class='red-text text-lighten-5 questions'>{{option.name}}</label>
+            <div class="progress" style="background-color:{{option.highlight}}">
+                <div class="determinate" style="background-color:{{option.color}} ;width: {{option.percent}};">
+                  <p class="question">Votes: {{option.votes}}</p>
                 </div>
             </div>
             </p>
           </div>
         </div>
         <div class="col s6 m6 l6">
-          <canvas id="pieChart" width="100" height="100" style="padding: 20px;"></canvas>
+          <canvas id="pieChart" width="100" height="100"></canvas>
         </div>
         <div style="clear:both"></div>
       </div>

client/app/views/vote.html

@@ -3,17 +3,17 @@
     <div class="card blue darken-3">
       <div class="card-content white-text">
           <div class="col s12 m12 l12">
-          <p style="font-size:30px" id="mainquestion">{{title}}</p>
+          <p id="mainquestion">{{title}}</p>
         </div>
         <div class="col s12 m12 l12" ng-repeat="option in options">
           <p>
           <input ng-model="option.checked" ng-click="updateSelection($index, options)" type="checkbox" id="test{{$index}}" />
-          <label for="test{{$index}}" style="font-size:20px;margin:10px" class='red-text text-lighten-5 questions'>{{option.name}}</label>
+          <label for="test{{$index}}" class='red-text text-lighten-5 questions'>{{option.name}}</label>
           </p>
         </div>
         <div style="clear:both"></div>
       </div>
-      <div class="card-action" style="margin-left:25px;margin-right:25px;">
+      <div class="card-action">
         <a ng-click="vote(options)" class="waves-effect waves-light btn red lighten-2 red-text text-lighten-5">Submit Vote</a>
       </div>
     </div>