biings-ds - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

docs/doc-color.md

@@ -11,5 +11,5 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Color</h1>
 <div class="columns is-multiline">
-    <div class="column is-3"><div class="notification has-background-primary"><br></div><span>primary</span><br>**Biings Violet**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#715EB8</span></div>
-    <div class="column is-3"><div class="notification has-background-light"><br></div><span>light</span><br>**Biings White**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#F9F8FC</span></div>
-    <div class="column is-3"><div class="notification has-background-dark"><br></div><span>dark</span><br>**Biings Black**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#363244</span></div>
+    <div class="column is-3"><div class="notification has-background-primary"><br></div><span>primary</span><br>**Biings Violet**<br><span class="subtitle is-6 has-text-monospace">#715EB8</span></div>
+    <div class="column is-3"><div class="notification has-background-light"><br></div><span>light</span><br>**Biings White**<br><span class="subtitle is-6 has-text-monospace">#F9F8FC</span></div>
+    <div class="column is-3"><div class="notification has-background-dark"><br></div><span>dark</span><br>**Biings Black**<br><span class="subtitle is-6 has-text-monospace">#363244</span></div>
 </div>
@@ -22,30 +22,30 @@
 <div class="columns is-multiline">
-    <div class="column is-3"><div class="notification has-background-cyan"><br></div><span>cyan</span><br>**Viking**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#78C0E0</span></div>
-    <div class="column is-3"><div class="notification has-background-blue"><br></div><span>blue</span><br>**Indigo**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#5A7BC9</span></div>
-    <div class="column is-3"><div class="notification has-background-purple"><br></div><span>purple</span><br>**Blue Marguerite**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#735BCC</span></div>
-    <div class="column is-3"><div class="notification has-background-red"><br></div><span>red</span><br>**Froly**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#EF626C</span></div>
+    <div class="column is-3"><div class="notification has-background-cyan"><br></div><span>cyan</span><br>**Viking**<br><span class="subtitle is-6 has-text-monospace">#78C0E0</span></div>
+    <div class="column is-3"><div class="notification has-background-blue"><br></div><span>blue</span><br>**Indigo**<br><span class="subtitle is-6 has-text-monospace">#5A7BC9</span></div>
+    <div class="column is-3"><div class="notification has-background-purple"><br></div><span>purple</span><br>**Blue Marguerite**<br><span class="subtitle is-6 has-text-monospace">#735BCC</span></div>
+    <div class="column is-3"><div class="notification has-background-red"><br></div><span>red</span><br>**Froly**<br><span class="subtitle is-6 has-text-monospace">#EF626C</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-turquoise"><br></div><span>turquoise</span><br>**Bermuda**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#5DD9C1</span></div>
-    <div class="column is-3"><div class="notification has-background-green"><br></div><span>green</span><br>**Emerald**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#5bcc72</span></div>
-    <div class="column is-3"><div class="notification has-background-yellow"><br></div><span>yellow</span><br>**Casablanca**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#ffc15e</span></div>
-    <div class="column is-3"><div class="notification has-background-orange"><br></div><span>orange</span><br>**Carrot Orange**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#FF9505</span></div>
+    <div class="column is-3"><div class="notification has-background-turquoise"><br></div><span>turquoise</span><br>**Bermuda**<br><span class="subtitle is-6 has-text-monospace">#5DD9C1</span></div>
+    <div class="column is-3"><div class="notification has-background-green"><br></div><span>green</span><br>**Emerald**<br><span class="subtitle is-6 has-text-monospace">#5bcc72</span></div>
+    <div class="column is-3"><div class="notification has-background-yellow"><br></div><span>yellow</span><br>**Casablanca**<br><span class="subtitle is-6 has-text-monospace">#ffc15e</span></div>
+    <div class="column is-3"><div class="notification has-background-orange"><br></div><span>orange</span><br>**Carrot Orange**<br><span class="subtitle is-6 has-text-monospace">#FF9505</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-pink"><br></div><span>pink</span><br>**Fuchsia Pink**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#cc5bb5</span></div>
-    <div class="column is-3"><div class="notification has-background-light"><br></div><span>name</span><br>** **<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#000000</span></div>
-    <div class="column is-3"><div class="notification has-background-light"><br></div><span>name</span><br>** **<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#000000</span></div>
-    <div class="column is-3"><div class="notification has-background-light"><br></div><span>name</span><br>** **<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#000000</span></div>
+    <div class="column is-3"><div class="notification has-background-pink"><br></div><span>pink</span><br>**Fuchsia Pink**<br><span class="subtitle is-6 has-text-monospace">#cc5bb5</span></div>
+    <div class="column is-3"><div class="notification has-background-white"><br></div><span> </span><br>** **<br><span class="subtitle is-6 has-text-monospace"></span></div>
+    <div class="column is-3"><div class="notification has-background-white"><br></div><span> </span><br>** **<br><span class="subtitle is-6 has-text-monospace"></span></div>
+    <div class="column is-3"><div class="notification has-background-white"><br></div><span> </span><br>** **<br><span class="subtitle is-6 has-text-monospace"></span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-white" style="box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);"><br></div><span>white</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#FFFFFF</span></div>
-    <div class="column is-3"><div class="notification has-background-white-bis"><br></div><span>white-bis</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#F9F8FC</span></div>
-    <div class="column is-3"><div class="notification has-background-white-ter"><br></div><span>white-ter</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#F6F5FA</span></div>
-    <div class="column is-3"><div class="notification has-background-grey-lighter"><br></div><span>grey-lighter</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#E9E8EC</span></div>
+    <div class="column is-3"><div class="notification has-background-white" style="box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);"><br></div><span>white</span><br><span class="subtitle is-6 has-text-monospace">#FFFFFF</span></div>
+    <div class="column is-3"><div class="notification has-background-white-bis"><br></div><span>white-bis</span><br><span class="subtitle is-6 has-text-monospace">#F9F8FC</span></div>
+    <div class="column is-3"><div class="notification has-background-white-ter"><br></div><span>white-ter</span><br><span class="subtitle is-6 has-text-monospace">#F6F5FA</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-lighter"><br></div><span>grey-lighter</span><br><span class="subtitle is-6 has-text-monospace">#E9E8EC</span></div>
     <div class="column is-12"></div>    
-    <div class="column is-3"><div class="notification has-background-grey-light"><br></div><span>grey-light</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#DAD9DF</span></div>
-    <div class="column is-3"><div class="notification has-background-grey"><br></div><span>grey</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#CBC9D3</span></div>
-    <div class="column is-3"><div class="notification has-background-grey-dark"><br></div><span>grey-dark</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#474259</span></div>
-    <div class="column is-3"><div class="notification has-background-grey-darker"><br></div><span>grey-darker</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#363244</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-light"><br></div><span>grey-light</span><br><span class="subtitle is-6 has-text-monospace">#DAD9DF</span></div>
+    <div class="column is-3"><div class="notification has-background-grey"><br></div><span>grey</span><br><span class="subtitle is-6 has-text-monospace">#CBC9D3</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-dark"><br></div><span>grey-dark</span><br><span class="subtitle is-6 has-text-monospace">#474259</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-darker"><br></div><span>grey-darker</span><br><span class="subtitle is-6 has-text-monospace">#363244</span></div>
     <div class="column is-12"><br></div>
-    <div class="column is-3"><div class="notification has-background-black-ter"><br></div><span>black-ter</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#302D3D</span></div>
-    <div class="column is-3"><div class="notification has-background-black-bis"><br></div><span>black-bis</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#25222F</span></div>
-    <div class="column is-3"><div class="notification has-background-black"><br></div><span>black</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#15141B</span></div>
+    <div class="column is-3"><div class="notification has-background-black-ter"><br></div><span>black-ter</span><br><span class="subtitle is-6 has-text-monospace">#302D3D</span></div>
+    <div class="column is-3"><div class="notification has-background-black-bis"><br></div><span>black-bis</span><br><span class="subtitle is-6 has-text-monospace">#25222F</span></div>
+    <div class="column is-3"><div class="notification has-background-black"><br></div><span>black</span><br><span class="subtitle is-6 has-text-monospace">#15141B</span></div>
 </div>
@@ -81,3 +81,3 @@
     <div class="column is-12"><div class="notification has-gradient-1"><br></div></div>
-    <div class="column is-12"><br>**Gradient–1**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#915DBB</span> &nbsp;→&nbsp; <span class="subtitle is-6 has-text-grey-dark has-text-monospace">#626CB7</span></div>
+    <div class="column is-12"><br>**Gradient–1**<br><span class="subtitle is-6 has-text-monospace">#915DBB</span> &nbsp;→&nbsp; <span class="subtitle is-6 has-text-monospace">#626CB7</span></div>
 </div>
@@ -84,0 +84,0 @@

docs/doc-inputs.md

@@ -1,1 +0,48 @@
-<h1 class="title has-text-grey">Work in progress..</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Input</h1>
+<p class="subtitle is-5"><span class="has-text-weight-semibold">Input fields</span> enable users to provide information.</p>
+
+<hr class="is-visible is-large">
+
+<form class="box is-well is-relaxed is-marginless" spellcheck="false">
+    <input class="input is-small" type="tel" placeholder="Small input">
+    <hr class="is-small">
+    <input class="input" type="tel" placeholder="Normal input">
+    <hr class="is-small">
+    <input class="input is-medium" type="email" placeholder="Medium input">
+</form>
+
+    <input class="input is-medium is-radiusless" type="text" placeholder="..">
+
+
+<hr class="is-visible is-large">
+
+<h2 class="title is-4">Form fields</h2>
+
+<form class="box is-well is-relaxed is-marginless" spellcheck="false">
+    <div class="field">
+        <label for="demofield" class="label">With a label</label>
+        <input id="demofield" class="input is-radiusless" type="text" placeholder="Radiusless input">
+    </div>
+    <div class="field">
+        <label class="label">Textarea</label>
+        <textarea class="textarea" placeholder="For looong text inputs.."></textarea>
+    </div>
+</form>
+
+    <form action="">
+        <div class="field">
+            <label class="label">Label</label>
+            <input class="input is-radiusless" type="text">
+        </div>
+        <div class="field">
+            <label class="label">Textarea</label>
+            <textarea class="textarea" placeholder="..."></textarea>
+        </div>
+    </form>
+
+
+<hr class="is-large">
+
+<div class="box is-bordered">
+    More options on &nbsp;→&nbsp; <a href="https://bulma.io/documentation/form/input/" target="blank">Bulma / <strong>Input</strong></a>
+</div>

package.json

 {
   "name": "biings-ds",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Biings Design System",
@@ -5,0 +5,0 @@ "main": "build/bds.css",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10288087

increased by0.03%

Lines of code

6078

increased by0.43%

No dependency changes