Merge pull request #2 from arbolitoloco/controls

Controls
arbolitoloco · Dec 3, 2020 · 53d86d9 · 53d86d9
2 parents 35d6a19 + 388b68e
commit 53d86d9
Show file tree

Hide file tree

Showing 4 changed files with 223 additions and 57 deletions.
diff --git a/helpers.css b/helpers.css
@@ -227,42 +227,6 @@
   font-size: 4em;
 }
 
-.font-hairline {
-  font-weight: 100;
-}
-
-.font-thin {
-  font-weight: 200;
-}
-
-.font-light {
-  font-weight: 300;
-}
-
-.font-normal {
-  font-weight: 400;
-}
-
-.font-medium {
-  font-weight: 500;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-.font-extrabold {
-  font-weight: 800;
-}
-
-.font-black {
-  font-weight: 900;
-}
-
 .italic {
   font-style: italic;
 }

diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=7">
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="helpers.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
   <title>Symbiota Label Format Generator Prototype</title>
 </head>
@@ -16,12 +17,28 @@ <h1>Symbiota Label Format Generator Prototype</h1>
   <main>
     <div id="fields" class="container">
       <h2>Available fields</h2>
-      <div draggable="true" class="draggable">Column</div>
+      <!-- <div draggable="true" class="draggable">Column</div> -->
     </div>
     <div id="build">
       <h2>Drag and drop here</h2>
       <div id="controls">
-        <button class='control' data-func="font-bold" disabled="true">B</button><button class='control' data-func="italic" disabled="true">I</button>
+        <!-- <button class='control' data-func="font-bold" disabled="true">B</button><button class='control' data-func="italic" disabled="true">I</button><button class='control' data-func="underline" disabled="true">U</button><button class='control' data-func="uppercase"
+          disabled="true">uppercase</button> -->
+        <!-- <div class="dropdown">
+          <select class="control" name="font-size" id="text" disabled="true">
+              <option value="">Font Size</option>
+              <option value="text-xs">X-Small</option>
+              <option value="text-sm">Small</option>
+              <option value="text-base">Normal</option>
+              <option value="text-lg">Large</option>
+              <option value="text-xl">X-Large</option>
+              <option value="text-2xl">2X-Large</option>
+              <option value="text-3xl">3X-Large</option>
+              <option value="text-4xl">4X-Large</option>
+              <option value="text-5xl">5X-Large</option>
+              <option value="text-6xl">6X-Large</option>
+            </select>
+        </div> -->
       </div>
       <div id="build-label">
         <div id="label-header" class="container">