From 0f0e7ae75ec069b954de168cc34b9ea57b154d40 Mon Sep 17 00:00:00 2001
From: Mark Moser <mark.moser@perficient.com>
Date: Wed, 3 May 2017 13:22:22 -0500
Subject: [PATCH] css: starting quiz styles

---
 app/assets/stylesheets/application.scss       |  2 ++
 .../stylesheets/elements/_form-question.scss  | 18 +++++++++++
 .../stylesheets/generic/_typography.scss      |  5 ++-
 app/assets/stylesheets/settings/_mixins.scss  |  9 ++++++
 app/views/quiz/question.html.erb              |  7 ++---
 app/views/styleguide.html.erb                 | 31 -------------------
 6 files changed, 33 insertions(+), 39 deletions(-)
 create mode 100644 app/assets/stylesheets/elements/_form-question.scss
 create mode 100644 app/assets/stylesheets/settings/_mixins.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 9218486..cabaa4b 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -14,6 +14,7 @@
 
 @import 'settings/variables';
 @import 'settings/fonts';
+@import 'settings/mixins';
 
 /*= require normalize-css/normalize */
 @import 'settings/reset';
@@ -23,5 +24,6 @@
 @import 'elements/body';
 @import 'elements/progressbar';
 @import 'elements/header';
+@import 'elements/form-question';
 
 // @import 'objects/';
diff --git a/app/assets/stylesheets/elements/_form-question.scss b/app/assets/stylesheets/elements/_form-question.scss
new file mode 100644
index 0000000..dad7f4a
--- /dev/null
+++ b/app/assets/stylesheets/elements/_form-question.scss
@@ -0,0 +1,18 @@
+.form-question {
+
+  textarea {
+    display: block;
+    margin-top: 1em;
+    border: 0;
+    border-bottom: 1px solid;
+    padding: 1em 0.5em;
+    width: 100%;
+    line-height: 1.5;
+    font-size: 1em;
+    box-sizing: border-box;
+  }
+
+  div {
+    margin: $gutter 0;
+  }
+}
diff --git a/app/assets/stylesheets/generic/_typography.scss b/app/assets/stylesheets/generic/_typography.scss
index b2dbc89..d3923e6 100644
--- a/app/assets/stylesheets/generic/_typography.scss
+++ b/app/assets/stylesheets/generic/_typography.scss
@@ -1,5 +1,5 @@
 body {
-  font-family: $primary-font-face;
+  @include primary-font;
   font-size: 1em;
 }
 
@@ -9,7 +9,6 @@ h3,
 h4,
 h5,
 h6 {
+  @include heading-font;
   margin: 0 0 $gutter;
-  font-family: $heading-font-face;
-  font-weight: 100;
 }
diff --git a/app/assets/stylesheets/settings/_mixins.scss b/app/assets/stylesheets/settings/_mixins.scss
new file mode 100644
index 0000000..786ca31
--- /dev/null
+++ b/app/assets/stylesheets/settings/_mixins.scss
@@ -0,0 +1,9 @@
+@mixin primary-font {
+  font-family: $primary-font-face;
+  font-weight: 300;
+}
+
+@mixin heading-font {
+  font-family: $heading-font-face;
+  font-weight: 100;
+}
diff --git a/app/views/quiz/question.html.erb b/app/views/quiz/question.html.erb
index 35920e3..c4538bf 100644
--- a/app/views/quiz/question.html.erb
+++ b/app/views/quiz/question.html.erb
@@ -5,14 +5,11 @@
   content_for :progress, @status.progress.to_s
 %>
 
-<%= form_for(@answer, url: post_answer_path(@answer.id), html:{method: :post, id: 'answer-form', data: {qid: @question.question_id}}) do |form| %>
-
+<%= form_for(@answer, url: post_answer_path(@answer.id), html:{method: :post, class: 'form-question', data: {qid: @question.question_id}}) do |form| %>
   <h1><%= @question.question %></h1>
 
   <% if @question.attachment.present? %>
-    <figure>
-      <%= image_tag @question.attachment%>
-    </figure>
+    <figure><%= image_tag @question.attachment%></figure>
   <% end %>
 
   <%= render partial: @question.input_type, locals: {question: @question, form: form, answer: @answer } %>
diff --git a/app/views/styleguide.html.erb b/app/views/styleguide.html.erb
index 5594fe8..01670ab 100644
--- a/app/views/styleguide.html.erb
+++ b/app/views/styleguide.html.erb
@@ -23,37 +23,6 @@
 
   <hr>
 
-  <h1>Font Families</h1>
-
-  <h2>HalisR</h2>
-  <div id="halisr">
-    <p id="primary-100">HalisR-100</p>
-    <p id="primary-200">HalisR-200</p>
-    <p id="primary-300">HalisR-300</p>
-    <p id="primary-400">HalisR-400</p>
-    <p id="primary-500">HalisR-500</p>
-    <p id="primary-600">HalisR-600</p>
-    <p id="primary-700">HalisR-700</p>
-    <p id="primary-800">HalisR-800</p>
-    <p id="primary-900">HalisR-900</p>
-  </div>
-
-  <h2>Lato</h2>
-  <div id="lato">
-    <p id="secondary-100">Lato-100</p>
-    <p id="secondary-300">Lato-300</p>
-    <p id="secondary-500">Lato-500</p>
-    <p id="secondary-700">Lato-700</p>
-    <p id="secondary-900">Lato-900</p>
-    <p id="secondary-100-i">Lato-Italic-100</p>
-    <p id="secondary-300-i">Lato-Italic-300</p>
-    <p id="secondary-500-i">Lato-Italic-500</p>
-    <p id="secondary-700-i">Lato-Italic-700</p>
-    <p id="secondary-900-i">Lato-Italic-900</p>
-  </div>
-
-  <hr>
-
   <h1>Paragraph</h1>
 
   <p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>