Merge pull request #73 from StemboltHQ/add_csslint

Add scss_lint gem

Gemfile

@@ -67,3 +67,5 @@ end
 gem "font-awesome-rails"
 
 gem 'timecop'
+
+gem 'scss_lint', require: false

Gemfile.lock

@@ -167,6 +167,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    scss_lint (0.53.0)
+      rake (>= 0.9, < 13)
+      sass (~> 3.4.20)
     simplecov (0.14.0)
       docile (~> 1.1.0)
       json (>= 1.8, < 3)
@@ -228,6 +231,7 @@ DEPENDENCIES
   rspec-rails (~> 3.5)
   rubocop
   sass-rails (~> 5.0)
+  scss_lint
   simplecov
   simplecov-rcov
   spring

app/assets/stylesheets/application.scss

@@ -1,24 +1,22 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
+// This is a manifest file that'll be compiled into application.css, which will include all the files
+// listed below.
+//
+// Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+// or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+//
+// You're free to add application-wide styles to this file and they'll appear at the bottom of the
+// compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+// files in this directory. Styles in this file should be added after the last require_* statement.
+// It is generally better to create a new file per style scope.
+//
 
- *= require tether
- *= require font-awesome
- *= require_tree .
- *= require_self
- */
+//= require tether
+//= require font-awesome
+//= require_tree .
+//= require_self
 
-@import "bootstrap";
-@import "font-awesome";
-@import "session-access";
-@import "user-bar";
-@import "bets/display-bet";
+@import 'bootstrap';
+@import 'font-awesome';
+@import 'session-access';
+@import 'user-bar';
+@import 'bets/display-bet';

app/assets/stylesheets/bets/display-bet.scss

@@ -1,11 +1,16 @@
-.display-bet{
-  .card-header{
-    background-color: #292b2c;
+$white-colour: #fff;
+$display-bet-colour: #292b2c;
+
+.display-bet {
+  .card-header {
+    background-color: $display-bet-colour;
   }
-  .card-header-text{
-    color: white;
+
+  .card-header-text {
+    color: $white-colour;
   }
-  .btn-full-width{
+
+  .btn-full-width {
     width: 100%;
   }
 }

app/assets/stylesheets/bets/resolve-bet.scss

@@ -0,0 +1,3 @@
+.resolve-bet-btn {
+  width: 100%;
+}

app/assets/stylesheets/bets/view-all-bets.scss

@@ -1,5 +1,5 @@
-.view-all-bets{
-  .view-button-text{
-    font-size: 0.8em;
+.view-all-bets {
+  .view-button-text {
+    font-size: .8em;
   }
 }

app/assets/stylesheets/session-access.scss

@@ -1,13 +1,15 @@
-.sess-label{
-  width: 35%;
+.sess-label {
   float: left;
+  width: 35%;
 }
-.sess-input-field{
-  width: 65%;
-  height: 35px;
+
+.sess-input-field {
   float: left;
-}
-.sess-button{
+  height: 35px;
   width: 65%;
+}
+
+.sess-button {
   margin: auto 0 auto 35%;
+  width: 65%;
 }

app/assets/stylesheets/user-bar.scss

@@ -1,5 +1,5 @@
-.user-bar{
-  img{
+.user-bar {
+  img {
     width: 50px;
   }
 }