working on the editor

src/lib/components/Field.svelte

@@ -1,22 +1,25 @@
-<div class="field">
-  {#if label}
-    <label>{label}</label>
-  {/if}
+<div class="field label small" class:suffix>
   <slot>
-    <input type="text" {placeholder} bind:value on:change />
+    <input type="text" bind:value on:change />
   </slot>
+  {#if label}
+    <label class:active={!!value}>{label}</label>
+  {/if}
 </div>
 
 <script>
   export let label = "";
-  export let value = "";
+  export let value = true;
   export let placeholder = label;
+
+  export let suffix = false;
 </script>
 
 <style>
   div {
     font-family: var(--main-font-family);
   }
+  /*
   div > :global(*) {
     margin-left: 1em;
   }
@@ -29,4 +32,8 @@
     font-family: Dosis;
     color: var(--indigo-dye);
   }
+  */
+  .field {
+    margin-bottom: 0px;
+  }
 </style>

src/lib/components/ShipEdit/Identification.svelte

@@ -1,12 +1,14 @@
 <div class="identification-row">
   <div>
     <Field label="ship class" bind:value={shipClass} />
-    <Field label="ship type">
+    <Field suffix>
       <select bind:value={shipType}>
         {#each shipTypes as name (name)}
           <option>{name}</option>
         {/each}
       </select>
+      <label class="active">ship type</label>
+      <i>arrow_drop_down</i>
     </Field>
   </div>
   <ShipCost {...reqs} />

src/lib/components/ShipEdit/Identification/ShipCost.svelte

@@ -1,7 +1,6 @@
 <div class="mass">
   <Field label="ship tonnage">
-    <input class="short" bind:value={mass} type="number" min="10" max="300" />
-    <img class="mass_symbol" src="{base}/mass.svg" alt="mass" />
+    <input bind:value={mass} type="number" min="10" max="300" />
 
     <div class="note" class:warning={!withinBudget}>
       {#if withinBudget}
@@ -54,10 +53,6 @@
     grid-column: span 3;
     justify-content: space-around;
   }
-  input {
-    width: 5em;
-    display: inline !important;
-  }
   .mass_symbol {
     width: 0.75em;
     display: inline-block;

src/lib/components/ShipEdit/Propulsion/Engine.svelte

@@ -2,7 +2,7 @@
   <div>
     <Field label="thrust rating">
       <input
-        class="short"
+        class="engine"
         type="number"
         bind:value={rating}
         min="0"
@@ -29,28 +29,11 @@
 </script>
 
 <style>
+  input.engine {
+    width: 9em;
+  }
   div {
     display: flex;
     align-items: end;
   }
-  label {
-    font-family: var(--main-font-family);
-    margin-left: 2em;
-  }
-  input[type="number"] {
-    width: 5em;
-  }
-  input {
-    margin-bottom: 0px !important;
-  }
-  input:not([type="checkbox"]) {
-    border: 0px;
-    border-bottom: 1px solid var(--indigo-dye);
-    border-radius: 0px;
-    height: calc(
-      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1
-    );
-    padding: 0 0.5rem;
-    text-align: center;
-  }
 </style>

src/lib/style/index.css

@@ -62,52 +62,6 @@ input.short {
     color: rgb(0, 80, 160);
   }
 
-  label {
-    display: block;
-  }
-
-  input,
-  button,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0.4em;
-    margin: 0 0 0.5em 0;
-    box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 2px;
-  }
-
-  input:disabled {
-    color: #ccc;
-  }
-
-  input[type="range"] {
-    height: 0;
-  }
-
-  /* input, */
-  /* select { */
-  /*   border: 0px; */
-  /*   border-bottom: 1px solid var(--indigo-dye); */
-  /* } */
-
-  input:focus,
-  select:focus {
-    border: 1px solid var(--indigo-dye);
-  }
-
-  input:not([type="checkbox"]):not([type="radio"]) {
-    border: 0px;
-    border-bottom: 1px solid var(--indigo-dye);
-    border-radius: 0px;
-    height: calc(
-      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1
-    );
-    padding: 0 0.5rem;
-    text-align: center;
-  }
 
 h1 { font-size: var(--font-scale-15); }
 h2 { font-size: var(--font-scale-14); }