closes #18

index.html

@@ -14,10 +14,10 @@
         padding: 0;
         /*box-sizing: inherit;*/
 /*        font: inherit;*/
-        text-decoration: inherit;
-        text-align: inherit;
-        color: inherit;
-        background: transparent;
+        /*text-decoration: inherit;*/
+        /*text-align: inherit;*/
+        /*color: inherit;*/
+        /*background: transparent;*/
       }
       /*pass window height (w/o scroll bars) down to react app, note can't use vh because that includes scroll bars and mobile browser footer, etc so doesn't give viewable area*/
       html, body { height: 100%; }

package.json

@@ -43,7 +43,7 @@
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.0",
     "eslint-plugin-react": "^7.0.0",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "extract-text-webpack-plugin": "^1.x",
     "node-sass": "^4.x",
     "sass-loader": "^4.x",
     "style-loader": "^0.20.2",

src/components/collection/Search.js

@@ -100,7 +100,7 @@ export default class SearchForm extends React.Component {
           <br />
           <label>Name: <input type="text" ref={(input) => this.stones.name = input} /></label>
           <br />
-          <label>Text: <input type="text" ref={(input) => this.stones.text = input} /></label>
+          <label>Text: &nbsp;&nbsp;&nbsp;<input type="text" ref={(input) => this.stones.text = input} /></label>
           <br />
           <div>
             <label>Subtypes | Initiative:<br />

src/css/collection.css

@@ -115,12 +115,13 @@
 
 .Collapsible {
     margin-bottom: 10px;
+    width: 250px;
 }
 
 .Collapsible__trigger {
     background-color: #333;
-    width: 250px;
-    display: inline-block;
+    display: block;
+    position: relative;
     padding-top: 5px;
     padding-bottom: 5px;
     text-indent: 5px;
@@ -129,3 +130,24 @@
 .Collapsible__trigger:hover {
     background-color: red;
 }
+
+.Collapsible__trigger:after {
+    content: '^';
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: block;
+    transition: transform 400ms;
+}
+
+.Collapsible__trigger.is-open:after {
+    transform: rotateZ(180deg);
+    right: 5px;
+    top: 5px;
+}
+
+
+.Collapsible__trigger.is-disabled {
+    opacity: 0.5;
+    background-color: grey;
+}