Adds input addon items to CSS and Vue packages.

agnosticui-css/demo-globals.css

@@ -14,6 +14,7 @@
 @import "headernav.css";
 @import "headernavitem.css";
 @import "input.css";
+@import "inputaddonitem.css";
 @import "progress.css";
 
 body {

agnosticui-css/index.html

@@ -27,14 +27,20 @@ <h1>Please open each individual component's page</h1>
       <a href="/button.html">Button</a>
     </li>
     <li>
-      <a href="/progress.html">Progress</a>
+      <a href="/card.html">Card</a></p>
     </li>
     <li>
-      <a href="/card.html">Card</a></p>
+      <a href="/flexboxgrid.html">Flexbox Grid</a>
     </li>
     <li>
       <a href="/header.html">Header</a></p>
     </li>
+    <li>
+      <a href="/input.html">Input</a>
+    </li>
+    <li>
+      <a href="/progress.html">Progress</a>
+    </li>
   </ul>
 </body>
 

agnosticui-css/input.css

@@ -267,40 +267,22 @@ borders that visually conflict. */
   cursor: not-allowed;
 }
 
-
-/*
-* Input addons e.g. icons inside the input
-*/
-.input-has-left-addon,
-.input-has-right-addon,
-.input-addon-container {
-  /* Maybe I should have defined another css prop for addon adjustments but trying
-  to avoid any extra variable explosion there--will need to keep an eye on this */
-  --addon-padding: calc(var(--agnosticui-input-side-padding) * 1.5);
-}
+/**
+ * Input "has addon"
+ */
 
 .input-addon-container {
   display: flex;
   position: relative;
   width: 100%;
 }
-.input-addon-container .input {
-  flex: 1;
-}
-
-.input-addon-container .input-addon-right,
-.input-addon-container .input-addon-left {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.input-addon-container .input-addon-left {
-  left: var(--addon-padding);
-}
 
-.input-addon-container .input-addon-right {
-  right: var(--addon-padding);
+.input-has-left-addon,
+.input-has-right-addon {
+  /* Maybe I should have defined another css prop for addon adjustments but trying
+  to avoid any extra variable explosion there--will need to keep an eye on this */
+  --addon-padding: calc(var(--agnosticui-input-side-padding) * 1.5);
+  flex: 1;
 }
 
 .input-has-left-addon  {

agnosticui-css/inputaddonitem.css

@@ -0,0 +1,20 @@
+/*
+* Input addons e.g. icons inside the input
+*/
+.input-addon-right,
+.input-addon-left {
+  /* Maybe I should have defined another css prop for addon adjustments but trying
+  to avoid any extra variable explosion there--will need to keep an eye on this */
+  --addon-padding: calc(var(--agnosticui-input-side-padding) * 1.5);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.input-addon-left {
+  left: var(--addon-padding);
+}
+
+.input-addon-right {
+  right: var(--addon-padding);
+}

agnosticui-vue/copystyles.js

@@ -82,3 +82,8 @@ css = fs.readFileSync('../agnosticui-css/input.css', 'utf8');
 const inputVue = fs.readFileSync('./src/stories/Input.vue', 'utf8');
 const inputSynchronized = inputVue.replace(styleRegex, `<style module>\n${css}\n</style>`);
 fs.writeFileSync('./src/stories/Input.vue', inputSynchronized, 'utf8');
+
+css = fs.readFileSync('../agnosticui-css/inputaddonitem.css', 'utf8');
+const inputAddonItemVue = fs.readFileSync('./src/stories/InputAddonItem.vue', 'utf8');
+const inputAddonItemSynchronized = inputAddonItemVue.replace(styleRegex, `<style module>\n${css}\n</style>`);
+fs.writeFileSync('./src/stories/InputAddonItem.vue', inputAddonItemSynchronized, 'utf8');