From a7656023bb668d88b44835e2b3d2de7294f89bd0 Mon Sep 17 00:00:00 2001
From: Salvador Melo <salmelo16@gmail.com>
Date: Tue, 6 Nov 2018 03:34:52 -0500
Subject: [PATCH] rest of knacks

---
 Scion2e/scion2e.css  | 26 +++++++++++---
 Scion2e/scion2e.html | 81 ++++++++++++++++++++++++--------------------
 2 files changed, 66 insertions(+), 41 deletions(-)

diff --git a/Scion2e/scion2e.css b/Scion2e/scion2e.css
index 7d3ee7cc55..bae4e7d9cd 100644
--- a/Scion2e/scion2e.css
+++ b/Scion2e/scion2e.css
@@ -26,7 +26,6 @@
 .charsheet input[type=radio]+span {
     cursor: pointer;
     display: inline-block;
-    transition: all .2s, opacity 0s;
     width: 0;
 }
 
@@ -121,7 +120,8 @@ input[type="radio"].sheet-normal,
 input[type="checkbox"].sheet-normal,
 .sheet-settings-checkbox input,
 input[type="radio"].sheet-solo,
-.sheet-dropdown input
+.sheet-dropdown input,
+input[type="checkbox"].sheet-expander
 {
     position: relative;
     opacity: 0.0;
@@ -289,17 +289,35 @@ table.sheet-attribute-table th {
 }
 
 /*fake dropdown*/
-.sheet-dropdown input[type="checkbox"] + span::after{
+.sheet-dropdown input[type="checkbox"] + span::after,
+{
     content: "▾";
     text-align: right;
     margin-left: .3em;
     opacity: 0.5;
 }
 
-.sheet-dropdown input[type="checkbox"]:checked + span::after{
+.sheet-dropdown input[type="checkbox"]:checked + span::after,
+{
     opacity: 1;
 }
 
+input[type="checkbox"].sheet-expander,
+input[type="checkbox"].sheet-expander + span::after 
+{
+    line-height: 2;
+}
+
+input[type="checkbox"].sheet-expander + span::after {
+    content: "▼";
+    position: relative;
+    left: -13px;
+}
+
+input[type="checkbox"].sheet-expander:checked + span::after {
+    content: "▲";
+}
+
 .sheet-dropdown {
     position: relative;
     border: 1px solid #ccc;
diff --git a/Scion2e/scion2e.html b/Scion2e/scion2e.html
index 461ba9f3a5..d116701cc7 100644
--- a/Scion2e/scion2e.html
+++ b/Scion2e/scion2e.html
@@ -387,44 +387,51 @@
         <fieldset class="repeating_knacks">
             <div class="sheet-flex-container">
                 <input type=text name="attr_knack_name" placeholder="Knack Name">
-                <select name="knack_skill">
-                    <option value="" selected disabled>Knack Skill</option>
-                    <option value="@{academics}">Academics</option>
-                    <option value="@{athletics}">Athletics</option>
-                    <option value="@{closecombat}">Close Combat</option>
-                    <option value="@{culture}">Culture</option>
-                    <option value="@{empathy}">Empathy</option>
-                    <option value="@{firearms}">Firearms</option>
-                    <option value="@{integrity}">Integrity</option>
-                    <option value="@{leadership}">Leadership</option>
-                    <option value="@{medicine}">Medicine</option>
-                    <option value="@{occult}">Occult</option>
-                    <option value="@{persuasion}">Persuasion</option>
-                    <option value="@{pilot}">Pilot</option>
-                    <option value="@{science}">Science</option>
-                    <option value="@{subterfuge}">Subterfuge</option>
-                    <option value="@{survival}">Survival</option>
-                    <option value="@{technology}">Technology</option>                        
-                </select>
-                <div class="dropdown">
-                    <label><input type="checkbox" name="attr_knack_calling_drop" value="1"><span name="attr_knack_calling">Calling</span></label>
-                    <input type="hidden" class="hider" name="attr_knack_calling_drop" value="0">
-                    <div>   
-                        <label><input type="radio" name="attr_knack_calling_choice" value="calling1_name"><span name="attr_knack_calling1"></span></label>
-                        <label><input type="radio" name="attr_knack_calling_choice" value="calling2_name"><span name="attr_knack_calling2"></span></label>
-                        <label><input type="radio" name="attr_knack_calling_choice" value="calling3_name"><span name="attr_knack_calling3"></span></label>
-                        <label><input type="radio" name="attr_knack_calling_choice" value="guide"><span>Guide</span></label>
-                    </div>
-                </div>
-                <input type="hidden" name="attr_knack_calling_choice" >
-                <select class="knack-guide-rating" name="attr_knack_guide_rating">
-                    <option>1</option>
-                    <option>2</option>
-                    <option>3</option>
-                    <option>4</option>
-                    <option>5</option>
-                </select>   
                 <button type="roll"></button>
+                <input type="checkbox" class="expander" name="attr_knack_expand" value="1"><span></span>
+            </div>
+            <input type="hidden" class="hider" value="0" name="attr_knack_expand">
+            <div>
+                <div class="sheet-flex-container">
+                    <div class="dropdown">
+                        <label><input type="checkbox" name="attr_knack_calling_drop" value="1"><span name="attr_knack_calling">Calling</span></label>
+                        <input type="hidden" class="hider" name="attr_knack_calling_drop" value="0">
+                        <div>   
+                            <label><input type="radio" name="attr_knack_calling_choice" value="calling1_name"><span name="attr_knack_calling1"></span></label>
+                            <label><input type="radio" name="attr_knack_calling_choice" value="calling2_name"><span name="attr_knack_calling2"></span></label>
+                            <label><input type="radio" name="attr_knack_calling_choice" value="calling3_name"><span name="attr_knack_calling3"></span></label>
+                            <label><input type="radio" name="attr_knack_calling_choice" value="guide"><span>Guide</span></label>
+                        </div>
+                    </div>
+                    <input type="hidden" name="attr_knack_calling_choice" >
+                    <select class="knack-guide-rating" name="attr_knack_guide_rating">
+                        <option>1</option>
+                        <option>2</option>
+                        <option>3</option>
+                        <option>4</option>
+                        <option>5</option>
+                    </select>
+                    <select name="knack_skill">
+                        <option value="" selected disabled>Knack Skill</option>
+                        <option value="@{academics}">Academics</option>
+                        <option value="@{athletics}">Athletics</option>
+                        <option value="@{closecombat}">Close Combat</option>
+                        <option value="@{culture}">Culture</option>
+                        <option value="@{empathy}">Empathy</option>
+                        <option value="@{firearms}">Firearms</option>
+                        <option value="@{integrity}">Integrity</option>
+                        <option value="@{leadership}">Leadership</option>
+                        <option value="@{medicine}">Medicine</option>
+                        <option value="@{occult}">Occult</option>
+                        <option value="@{persuasion}">Persuasion</option>
+                        <option value="@{pilot}">Pilot</option>
+                        <option value="@{science}">Science</option>
+                        <option value="@{subterfuge}">Subterfuge</option>
+                        <option value="@{survival}">Survival</option>
+                        <option value="@{technology}">Technology</option>                        
+                    </select>
+                </div>  
+                <textarea name="attr_knack_description"></textarea>
             </div>
         </fieldset>
     </div>