Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

biings-ds

Package Overview
Dependencies
Maintainers
2
Versions
412
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

biings-ds - npm Package Compare versions

Comparing version 1.11.1 to 1.12.0

docs/_sidebar.md

28

docs/avatar.md

@@ -12,9 +12,7 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Avatar</h1>

```
<div class="avatar">
<div class="has-background-grey-light">JD</div>
</div>
<span>John Doe</span>
```
<div class="avatar">
<div class="has-background-grey-light">JD</div>
</div>
<span>John Doe</span>
<br>

@@ -42,15 +40,13 @@

Avatars can nest an image to act as a person's photo.
<hr class="is-small">
<div class="box is-well is-relaxed is-marginless">
<div class="avatar is-large"><img src="https://www.gravatar.com/avatar/7c8b112654185af6614a3df144135b0d?size=100&d=blank"></div><span class="subtitle is-5">**Aamir Khan**</span>
<div class="avatar is-large"><img src="https://www.gravatar.com/avatar/7c8b112654185af6614a3df144135b0d?size=100&d=blank"></div><span class="subtitle is-5"><strong>Aamir Khan</strong></span>
</div>
```
<div class="avatar is-large">
<img src="https://www.gravatar.com/avatar/aamir.gif">
</div>
<span class="subtitle is-5">Aamir Khan</span>
```
<div class="avatar is-large">
<img src="https://www.gravatar.com/avatar/aamir.gif">
</div>
<span class="subtitle is-5">Aamir Khan</span>
<hr class="is-large is-visible">

@@ -66,3 +62,3 @@

<div class="avatar is-status-green is-large"><img src="https://www.gravatar.com/avatar/ded2d271be31a09049209089b50cb882?s=200&d=blank&r=g"></div>
<span class="subtitle is-5">**Tom** is online</span>
<span class="subtitle is-5"><strong>Tom</strong> is online</span>
</div>

@@ -69,0 +65,0 @@

@@ -14,8 +14,5 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Box</h1>

```
<div class="box is-floating">
<!-- Boxed content.. -->
</div>
```
<div class="box is-floating">
<!-- Boxed content.. -->
</div>
<hr class="is-large is-visible">

@@ -30,21 +27,21 @@

<div class="box">
<div class="subtitle has-text-grey-dark is-6">**Box** &nbsp; ( default )</div>
<div class="subtitle has-text-grey-dark is-6"><strong>Box</strong> &nbsp; ( default )</div>
</div>
<div class="box is-bordered">
<div class="subtitle has-text-grey-dark is-6">**Bordered**</div>
<div class="subtitle has-text-grey-dark is-6"><strong>Bordered</strong></div>
</div>
<div class="box is-well">
<div class="subtitle has-text-grey-dark is-6">**Well**</div>
<div class="subtitle has-text-grey-dark is-6"><strong>Well</strong></div>
</div>
<div class="box is-white">
<div class="subtitle has-text-grey-dark is-6">**White**</div>
<div class="subtitle has-text-grey-dark is-6"><strong>White</strong></div>
</div>
<div class="box is-raised">
<div class="subtitle has-text-grey-dark is-6">**Raised**</div>
<div class="subtitle has-text-grey-dark is-6"><strong>Raised</strong></div>
</div>
<div class="box is-floating">
<div class="subtitle has-text-grey-dark is-6">**Floating**</div>
<div class="subtitle has-text-grey-dark is-6"><strong>Floating</strong></div>
</div>
<div class="box is-popping">
<div class="subtitle has-text-grey-dark is-6">**Popping**</div>
<div class="subtitle has-text-grey-dark is-6"><strong>Popping</strong></div>
</div>

@@ -60,9 +57,9 @@ </div>

<ul class="list">
<li>`hover-to-box`</li>
<li>`hover-to-bordered`</li>
<li>`hover-to-well`</li>
<li>`hover-to-white`</li>
<li>`hover-to-raised`</li>
<li>`hover-to-floating`</li>
<li>`hover-to-popping`</li>
<li><code>hover-to-box</code></li>
<li><code>hover-to-bordered</code></li>
<li><code>hover-to-well</code></li>
<li><code>hover-to-white</code></li>
<li><code>hover-to-raised</code></li>
<li><code>hover-to-floating</code></li>
<li><code>hover-to-popping</code></li>
</ul>

@@ -76,8 +73,5 @@

```
<div class="box is-well hover-to-popping">
•••
</div>
```
<div class="box is-well hover-to-popping">
•••
</div>
<hr class="is-large is-visible">

@@ -111,4 +105,2 @@

</div>
<hr class="is-large is-visible">

@@ -115,0 +107,0 @@

@@ -22,13 +22,13 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Button</h1>

<td><br>For controls, like Dropdowns</td>
<td>`button`</td>
<td><code>button</code></td>
</tr>
<tr>
<td class="has-text-centered"><br><div class="button is-primary">Primary</div><br><br></td>
<td><br>For primary actions, like **Save**</td>
<td>`button is-primary`</td>
<td><br>For primary actions, like <strong>Save</strong></td>
<td><code>button is-primary</code></td>
</tr>
<tr>
<td class="has-text-centered"><br><div class="button is-secondary">Secondary</div><br><br></td>
<td><br>For secondary actions, like **Cancel**</td>
<td>`is-secondary`</td>
<td><br>For secondary actions, like <strong>Cancel</strong></td>
<td><code>is-secondary</code></td>
</tr>

@@ -38,3 +38,3 @@ <tr>

<td><br>For primary dangerous actions</td>
<td>`button is-danger`</td>
<td><code>button is-danger</code></td>
</tr>

@@ -44,3 +44,3 @@ <tr>

<td><br>For texts behaving like a button.</td>
<td>`is-text`</td>
<td><code>is-text</code></td>
</tr>

@@ -50,3 +50,3 @@ <tr>

<td><br>Loading state.</td>
<td>`is-loading`</td>
<td><code>is-loading</code></td>
</tr>

@@ -56,3 +56,3 @@ <tr>

<td><br>Disabled or non-interactive state.</td>
<td>`disabled` attribute</td>
<td><code>disabled` attribute</td>
</tr>

@@ -59,0 +59,0 @@ </tbody>

@@ -39,3 +39,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Checkbox</h1>

</label>
<br>

@@ -42,0 +41,0 @@

@@ -1,2 +0,2 @@

<h6 class="subtitle is-5 has-text-grey">Style</h6><h1 class="title is-1 has-text-weight-bold">Color</h1>
<h6 class="subtitle is-5 has-text-grey">Style</h6><h1 class="title is-1 has-text-weight-bold">Colors</h1>
<p class="subtitle is-5"><span class="has-text-weight-semibold">Color</span> brings a design to life. It is used to express emotion and tone, as well as place emphasis and create associations. Color should always be used in meaningful ways in order to create patterns and visual cues.</p>

@@ -13,9 +13,9 @@

<div class="columns is-multiline">
<div class="column is-3"><div class="has-background-primary"><br><br></div><span>**primary**</span><br><span class="has-text-grey-dark is-monospace">#715EB8</span></div>
<div class="column is-3"><div class="has-background-light"><br><br></div><span>**light**</span><br><span class="has-text-grey-dark is-monospace">#F9F8FC</span></div>
<div class="column is-3"><div class="has-background-dark"><br><br></div><span>**dark**</span><br><span class="has-text-grey-dark is-monospace">#403D4B</span></div>
<div class="column is-3"><div class="has-background-primary"><br><br></div><span><strong>primary</strong></span><br><span class="has-text-grey-dark is-monospace">#715EB8</span></div>
<div class="column is-3"><div class="has-background-light" style="border:1px solid #EDECF0;"><br><br></div><span><strong>light</strong></span><br><span class="has-text-grey-dark is-monospace">#F9F8FC</span></div>
<div class="column is-3"><div class="has-background-dark"><br><br></div><span><strong>dark</strong></span><br><span class="has-text-grey-dark is-monospace">#403D4B</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-pilot"><br><br></div><span>**pilot** / velvet</span><br><span class="has-text-grey-dark is-monospace">#A05CB7</span></div>
<div class="column is-3"><div class="has-background-care"><br><br></div><span>**care** / sky</span><br><span class="has-text-grey-dark is-monospace">#71C7D6</span></div>
<div class="column is-3"><div class="has-background-claim"><br><br></div><span>**claim** / fire</span><br><span class="has-text-grey-dark is-monospace">#F89465</span></div>
<div class="column is-3"><div class="has-background-pilot"><br><br></div><span><strong>pilot</strong> / velvet</span><br><span class="has-text-grey-dark is-monospace">#A05CB7</span></div>
<div class="column is-3"><div class="has-background-care"><br><br></div><span><strong>care</strong> / sky</span><br><span class="has-text-grey-dark is-monospace">#71C7D6</span></div>
<div class="column is-3"><div class="has-background-claim"><br><br></div><span><strong>claim</strong> / fire</span><br><span class="has-text-grey-dark is-monospace">#F89465</span></div>
</div>

@@ -30,15 +30,15 @@

<div class="columns is-multiline">
<div class="column is-3"><div class="has-background-white-ter"><br><br></div><span>**white-ter**</span><br><span class="has-text-grey-dark is-monospace">#F6F5FA</span></div>
<div class="column is-3"><div class="has-background-white-bis"><br><br></div><span>**white-bis**</span><br><span class="has-text-grey-dark is-monospace">#F9F8FC</span></div>
<div class="column is-3"><div class="has-background-white"><br><br></div><span>**white**</span><br><span class="has-text-grey-dark is-monospace">#FFFFFF</span></div>
<div class="column is-3"><div class="has-background-white-ter" style="border:1px solid #EDECF0;"><br><br></div><span><strong>white-ter</strong></span><br><span class="has-text-grey-dark is-monospace">#F6F5FA</span></div>
<div class="column is-3"><div class="has-background-white-bis" style="border:1px solid #EDECF0;"><br><br></div><span><strong>white-bis</strong></span><br><span class="has-text-grey-dark is-monospace">#F9F8FC</span></div>
<div class="column is-3"><div class="has-background-white"><br><br></div><span><strong>white</strong></span><br><span class="has-text-grey-dark is-monospace">#FFFFFF</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-grey-dark"><br><br></div><span>**grey-dark**</span><br><span class="has-text-grey-dark is-monospace">#8B85A0</span></div>
<div class="column is-3"><div class="has-background-grey"><br><br></div><span>**grey**</span><br><span class="has-text-grey-dark is-monospace">#B4B0C2</span></div>
<div class="column is-3"><div class="has-background-grey-light"><br><br></div><span>**grey-light**</span><br><span class="has-text-grey-dark is-monospace">#D3D1DB</span></div>
<div class="column is-3"><div class="has-background-grey-lighter"><br><br></div><span>**grey-lighter**</span><br><span class="has-text-grey-dark is-monospace">#EDECF0</span></div>
<div class="column is-3"><div class="has-background-grey-dark"><br><br></div><span><strong>grey-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#8B85A0</span></div>
<div class="column is-3"><div class="has-background-grey"><br><br></div><span><strong>grey</strong></span><br><span class="has-text-grey-dark is-monospace">#B4B0C2</span></div>
<div class="column is-3"><div class="has-background-grey-light"><br><br></div><span><strong>grey-light</strong></span><br><span class="has-text-grey-dark is-monospace">#D3D1DB</span></div>
<div class="column is-3"><div class="has-background-grey-lighter"><br><br></div><span><strong>grey-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#EDECF0</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-black"><br><br></div><span>**black**</span><br><span class="has-text-grey-dark is-monospace">#15141B</span></div>
<div class="column is-3"><div class="has-background-black-bis"><br><br></div><span>**black-bis**</span><br><span class="has-text-grey-dark is-monospace">#302D3D</span></div>
<div class="column is-3"><div class="has-background-black-ter"><br><br></div><span>**black-ter**</span><br><span class="has-text-grey-dark is-monospace">#403D4B</span></div>
<div class="column is-3"><div class="has-background-grey-darker"><br><br></div><span>**grey-darker**</span><br><span class="has-text-grey-dark is-monospace">#6D6881</span></div>
<div class="column is-3"><div class="has-background-black"><br><br></div><span><strong>black</strong></span><br><span class="has-text-grey-dark is-monospace">#15141B</span></div>
<div class="column is-3"><div class="has-background-black-bis"><br><br></div><span><strong>black-bis</strong></span><br><span class="has-text-grey-dark is-monospace">#302D3D</span></div>
<div class="column is-3"><div class="has-background-black-ter"><br><br></div><span><strong>black-ter</strong></span><br><span class="has-text-grey-dark is-monospace">#403D4B</span></div>
<div class="column is-3"><div class="has-background-grey-darker"><br><br></div><span><strong>grey-darker</strong></span><br><span class="has-text-grey-dark is-monospace">#6D6881</span></div>
</div>

@@ -53,46 +53,46 @@

<div class="columns is-multiline">
<div class="column is-3"><div class="has-background-cyan-dark"><br><br></div><span>**cyan-dark**</span><br><span class="has-text-grey-dark is-monospace">#5A90A8</span></div>
<div class="column is-3"><div class="has-background-cyan"><br><br></div><span>**cyan** / Viking</span><br><span class="has-text-grey-dark is-monospace">#78C0E0</span></div>
<div class="column is-3"><div class="has-background-cyan-light"><br><br></div><span>**cyan-light**</span><br><span class="has-text-grey-dark is-monospace">#A1D3E9</span></div>
<div class="column is-3"><div class="has-background-cyan-lighter"><br><br></div><span>**cyan-lighter**</span><br><span class="has-text-grey-dark is-monospace">#C9E6F3</span></div>
<div class="column is-3"><div class="has-background-cyan-dark"><br><br></div><span><strong>cyan-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#5A90A8</span></div>
<div class="column is-3"><div class="has-background-cyan"><br><br></div><span><strong>cyan</strong> / Viking</span><br><span class="has-text-grey-dark is-monospace">#78C0E0</span></div>
<div class="column is-3"><div class="has-background-cyan-light"><br><br></div><span><strong>cyan-light</strong></span><br><span class="has-text-grey-dark is-monospace">#A1D3E9</span></div>
<div class="column is-3"><div class="has-background-cyan-lighter"><br><br></div><span><strong>cyan-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#C9E6F3</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-blue-dark"><br><br></div><span>**blue-dark**</span><br><span class="has-text-grey-dark is-monospace">#445C97</span></div>
<div class="column is-3"><div class="has-background-blue"><br><br></div><span>**blue** / Indigo</span><br><span class="has-text-grey-dark is-monospace">#5A7BC9</span></div>
<div class="column is-3"><div class="has-background-blue-light"><br><br></div><span>**blue-light**</span><br><span class="has-text-grey-dark is-monospace">#8CA3D9</span></div>
<div class="column is-3"><div class="has-background-blue-lighter"><br><br></div><span>**blue-lighter**</span><br><span class="has-text-grey-dark is-monospace">#BDCAE9</span></div>
<div class="column is-3"><div class="has-background-blue-dark"><br><br></div><span><strong>blue-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#445C97</span></div>
<div class="column is-3"><div class="has-background-blue"><br><br></div><span><strong>blue</strong> / Indigo</span><br><span class="has-text-grey-dark is-monospace">#5A7BC9</span></div>
<div class="column is-3"><div class="has-background-blue-light"><br><br></div><span><strong>blue-light</strong></span><br><span class="has-text-grey-dark is-monospace">#8CA3D9</span></div>
<div class="column is-3"><div class="has-background-blue-lighter"><br><br></div><span><strong>blue-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#BDCAE9</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-purple-dark"><br><br></div><span>**purple-dark**</span><br><span class="has-text-grey-dark is-monospace">#564499</span></div>
<div class="column is-3"><div class="has-background-purple"><br><br></div><span>**purple** / Marguerite</span><br><span class="has-text-grey-dark is-monospace">#735BCC</span></div>
<div class="column is-3"><div class="has-background-purple-light"><br><br></div><span>**purple-light**</span><br><span class="has-text-grey-dark is-monospace">#9D8CDB</span></div>
<div class="column is-3"><div class="has-background-purple-lighter"><br><br></div><span>**purple-lighter**</span><br><span class="has-text-grey-dark is-monospace">#C7BDEB</span></div>
<div class="column is-3"><div class="has-background-purple-dark"><br><br></div><span><strong>purple-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#564499</span></div>
<div class="column is-3"><div class="has-background-purple"><br><br></div><span><strong>purple</strong> / Marguerite</span><br><span class="has-text-grey-dark is-monospace">#735BCC</span></div>
<div class="column is-3"><div class="has-background-purple-light"><br><br></div><span><strong>purple-light</strong></span><br><span class="has-text-grey-dark is-monospace">#9D8CDB</span></div>
<div class="column is-3"><div class="has-background-purple-lighter"><br><br></div><span><strong>purple-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#C7BDEB</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-pink-dark"><br><br></div><span>**pink-dark**</span><br><span class="has-text-grey-dark is-monospace">#9D468B</span></div>
<div class="column is-3"><div class="has-background-pink"><br><br></div><span>**pink** / Fuchsia</span><br><span class="has-text-grey-dark is-monospace">#CC5BB5</span></div>
<div class="column is-3"><div class="has-background-pink-light"><br><br></div><span>**pink-light**</span><br><span class="has-text-grey-dark is-monospace">#DB8CCB</span></div>
<div class="column is-3"><div class="has-background-pink-lighter"><br><br></div><span>**pink-lighter**</span><br><span class="has-text-grey-dark is-monospace">#EBBDE1</span></div>
<div class="column is-3"><div class="has-background-pink-dark"><br><br></div><span><strong>pink-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#9D468B</span></div>
<div class="column is-3"><div class="has-background-pink"><br><br></div><span><strong>pink</strong> / Fuchsia</span><br><span class="has-text-grey-dark is-monospace">#CC5BB5</span></div>
<div class="column is-3"><div class="has-background-pink-light"><br><br></div><span><strong>pink-light</strong></span><br><span class="has-text-grey-dark is-monospace">#DB8CCB</span></div>
<div class="column is-3"><div class="has-background-pink-lighter"><br><br></div><span><strong>pink-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#EBBDE1</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-red-dark"><br><br></div><span>**red-dark**</span><br><span class="has-text-grey-dark is-monospace">#BF4E56</span></div>
<div class="column is-3"><div class="has-background-red"><br><br></div><span>**red** / Froly</span><br><span class="has-text-grey-dark is-monospace">#EF626C</span></div>
<div class="column is-3"><div class="has-background-red-light"><br><br></div><span>**red-light**</span><br><span class="has-text-grey-dark is-monospace">#F49198</span></div>
<div class="column is-3"><div class="has-background-red-lighter"><br><br></div><span>**red-lighter**</span><br><span class="has-text-grey-dark is-monospace">#F9C0C4</span></div>
<div class="column is-3"><div class="has-background-red-dark"><br><br></div><span><strong>red-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#BF4E56</span></div>
<div class="column is-3"><div class="has-background-red"><br><br></div><span><strong>red</strong> / Froly</span><br><span class="has-text-grey-dark is-monospace">#EF626C</span></div>
<div class="column is-3"><div class="has-background-red-light"><br><br></div><span><strong>red-light</strong></span><br><span class="has-text-grey-dark is-monospace">#F49198</span></div>
<div class="column is-3"><div class="has-background-red-lighter"><br><br></div><span><strong>red-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#F9C0C4</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-orange-dark"><br><br></div><span>**orange-dark**</span><br><span class="has-text-grey-dark is-monospace">#D97F04</span></div>
<div class="column is-3"><div class="has-background-orange"><br><br></div><span>**orange** / Carrot</span><br><span class="has-text-grey-dark is-monospace">#FF9505</span></div>
<div class="column is-3"><div class="has-background-orange-light"><br><br></div><span>**orange-light**</span><br><span class="has-text-grey-dark is-monospace">#FFB550</span></div>
<div class="column is-3"><div class="has-background-orange-lighter"><br><br></div><span>**orange-lighter**</span><br><span class="has-text-grey-dark is-monospace">#FFD59B</span></div>
<div class="column is-3"><div class="has-background-orange-dark"><br><br></div><span><strong>orange-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#D97F04</span></div>
<div class="column is-3"><div class="has-background-orange"><br><br></div><span><strong>orange</strong> / Carrot</span><br><span class="has-text-grey-dark is-monospace">#FF9505</span></div>
<div class="column is-3"><div class="has-background-orange-light"><br><br></div><span><strong>orange-light</strong></span><br><span class="has-text-grey-dark is-monospace">#FFB550</span></div>
<div class="column is-3"><div class="has-background-orange-lighter"><br><br></div><span><strong>orange-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#FFD59B</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-yellow-dark"><br><br></div><span>**yellow-dark**</span><br><span class="has-text-grey-dark is-monospace">#DEA244</span></div>
<div class="column is-3"><div class="has-background-yellow"><br><br></div><span>**yellow** / Casablanca</span><br><span class="has-text-grey-dark is-monospace">#FFC15E</span></div>
<div class="column is-3"><div class="has-background-yellow-light"><br><br></div><span>**yellow-light**</span><br><span class="has-text-grey-dark is-monospace">#FFD48E</span></div>
<div class="column is-3"><div class="has-background-yellow-lighter"><br><br></div><span>**yellow-lighter**</span><br><span class="has-text-grey-dark is-monospace">#FFE6BF</span></div>
<div class="column is-3"><div class="has-background-yellow-dark"><br><br></div><span><strong>yellow-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#DEA244</span></div>
<div class="column is-3"><div class="has-background-yellow"><br><br></div><span><strong>yellow</strong> / Casablanca</span><br><span class="has-text-grey-dark is-monospace">#FFC15E</span></div>
<div class="column is-3"><div class="has-background-yellow-light"><br><br></div><span><strong>yellow-light</strong></span><br><span class="has-text-grey-dark is-monospace">#FFD48E</span></div>
<div class="column is-3"><div class="has-background-yellow-lighter"><br><br></div><span><strong>yellow-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#FFE6BF</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-turquoise-dark"><br><br></div><span>**turquoise-dark**</span><br><span class="has-text-grey-dark is-monospace">#46A391</span></div>
<div class="column is-3"><div class="has-background-turquoise"><br><br></div><span>**turquoise** / Bermuda</span><br><span class="has-text-grey-dark is-monospace">#5DD9C1</span></div>
<div class="column is-3"><div class="has-background-turquoise-light"><br><br></div><span>**turquoise-light**</span><br><span class="has-text-grey-dark is-monospace">#8EE4D4</span></div>
<div class="column is-3"><div class="has-background-turquoise-lighter"><br><br></div><span>**turquoise-lighter**</span><br><span class="has-text-grey-dark is-monospace">#BEF0E6</span></div>
<div class="column is-3"><div class="has-background-turquoise-dark"><br><br></div><span><strong>turquoise-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#46A391</span></div>
<div class="column is-3"><div class="has-background-turquoise"><br><br></div><span><strong>turquoise</strong> / Bermuda</span><br><span class="has-text-grey-dark is-monospace">#5DD9C1</span></div>
<div class="column is-3"><div class="has-background-turquoise-light"><br><br></div><span><strong>turquoise-light</strong></span><br><span class="has-text-grey-dark is-monospace">#8EE4D4</span></div>
<div class="column is-3"><div class="has-background-turquoise-lighter"><br><br></div><span><strong>turquoise-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#BEF0E6</span></div>
<div class="column is-12"></div>
<div class="column is-3"><div class="has-background-green-dark"><br><br></div><span>**green-dark**</span><br><span class="has-text-grey-dark is-monospace">#449956</span></div>
<div class="column is-3"><div class="has-background-green"><br><br></div><span>**green** / Emerald</span><br><span class="has-text-grey-dark is-monospace">#5BCC72</span></div>
<div class="column is-3"><div class="has-background-green-light"><br><br></div><span>**green-light**</span><br><span class="has-text-grey-dark is-monospace">#8CDB9C</span></div>
<div class="column is-3"><div class="has-background-green-lighter"><br><br></div><span>**green-lighter**</span><br><span class="has-text-grey-dark is-monospace">#BDEBC7</span></div>
<div class="column is-3"><div class="has-background-green-dark"><br><br></div><span><strong>green-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#449956</span></div>
<div class="column is-3"><div class="has-background-green"><br><br></div><span><strong>green</strong> / Emerald</span><br><span class="has-text-grey-dark is-monospace">#5BCC72</span></div>
<div class="column is-3"><div class="has-background-green-light"><br><br></div><span><strong>green-light</strong></span><br><span class="has-text-grey-dark is-monospace">#8CDB9C</span></div>
<div class="column is-3"><div class="has-background-green-lighter"><br><br></div><span><strong>green-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#BDEBC7</span></div>
</div>

@@ -108,9 +108,9 @@

<div class="column is-12"><div class="has-background-gradient-1"><br><br></div></div>
<div class="column is-12">**gradient–1**<span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Primary</span> &nbsp;→&nbsp; <span class="is-monospace">Pink</span></span></div>
<div class="column is-12"><strong>gradient–1</strong><span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Primary</span> &nbsp;→&nbsp; <span class="is-monospace">Pink</span></span></div>
<div class="column is-12"><br></div>
<div class="column is-12"><div class="has-background-gradient-2"><br><br></div></div>
<div class="column is-12">**gradient–2** <span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Cyan</span> &nbsp;→&nbsp; <span class="is-monospace">Turquoise</span></span></div>
<div class="column is-12"><strong>gradient–2</strong><span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Cyan</span> &nbsp;→&nbsp; <span class="is-monospace">Turquoise</span></span></div>
<div class="column is-12"><br></div>
<div class="column is-12"><div class="has-background-gradient-3"><br><br></div></div>
<div class="column is-12">**gradient–3** <span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Red</span> &nbsp;→&nbsp; <span class="is-monospace">Yellow</span></span></div>
<div class="column is-12"><strong>gradient–3</strong><span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Red</span> &nbsp;→&nbsp; <span class="is-monospace">Yellow</span></span></div>
</div>

@@ -132,5 +132,5 @@

<tbody>
<tr><td>Background</td><td>`has-background-[color]`</td></tr>
<tr><td>Text <sup class="has-text-red">( i )</sup></td><td>`has-text-[color]`</td></tr>
<tr><td>Icon <sup class="has-text-red">( i )</sup></td><td>`has-fill-[color]`</td></tr>
<tr><td>Background</td><td><code>has-background-[color]</code></td></tr>
<tr><td>Text <sup class="has-text-red">( i )</sup></td><td><code>has-text-[color]</code></td></tr>
<tr><td>Icon <sup class="has-text-red">( i )</sup></td><td><code>has-fill-[color]</code></td></tr>
</tbody>

@@ -149,16 +149,13 @@ </table>

```css
.your-selector
{
color: var(--color-primary);
}
.your-selector
{
color: var(--color-primary);
}
.your-has-gradient-1
{
background: linear-gradient(25deg, var(--color-primary) -30%, var(--color-pink) 130%);
}
```
.your-has-gradient-1
{
background: linear-gradient(25deg, var(--color-primary) -30%, var(--color-pink) 130%);
}
<hr>
<hr class="is-large">
<div class="box is-large is-popping has-background-gradient-1">

@@ -165,0 +162,0 @@ <h4 class="title is-4 has-text-white">Slack Sidebar Theme</h4>

@@ -30,22 +30,20 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1">Dropdown</h1>

</div>
```html
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<div class="button">Default Dropdown</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item">This works</a>
<a class="dropdown-item">Without</a>
<a class="dropdown-item is-active">Any</a>
<hr class="dropdown-divider">
<a class="dropdown-item">
<span class="is-size-7 has-text-grey">Stuff here</span>
<br>Javascript
</a>
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<div class="button">Default Dropdown</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item">This works</a>
<a class="dropdown-item">Without</a>
<a class="dropdown-item is-active">Any</a>
<hr class="dropdown-divider">
<a class="dropdown-item">
<span class="is-size-7 has-text-grey">Stuff here</span>
<br>Javascript
</a>
</div>
</div>
</div>
</div>
```
<hr class="is-visible is-large">

@@ -151,3 +149,2 @@

</div>
<a id="selectlist"></a>

@@ -198,3 +195,2 @@ <hr class="is-visible is-large">

</div>
<br>

@@ -201,0 +197,0 @@

@@ -32,2 +32,3 @@ <h6 class="subtitle is-5 has-text-grey">Style</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1>

<div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#help"></use></svg></div>help</div>
<div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#inbox"></use></svg></div>inbox</div>
<div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#key"></use></svg></div>key</div>

@@ -34,0 +35,0 @@ <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#legal-proof"></use></svg></div>legal-proof</div>

@@ -17,2 +17,3 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Illustration</h1>

<div class="column is-4 box"><img src="media/illustrations/vacant-duo.svg" width="180"><div class="subtitle is-6">Vacant</div></div>
</div>

@@ -28,2 +29,3 @@

<div class="columns is-multiline has-text-centered">
<div class="column is-4 box"><img src="media/illustrations/biings-symbol.svg" width="180"><div class="subtitle is-6">Biings</div></div>
<div class="column is-4 box"><img src="media/illustrations/people.svg" width="180"><div class="subtitle is-6">People</div></div>

@@ -30,0 +32,0 @@ <div class="column is-4 box"><img src="media/illustrations/bubbles.svg" width="180"><div class="subtitle is-6">Bubbles</div></div>

@@ -17,4 +17,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Input</h1>

<input class="input is-medium is-danger" type="text" placeholder="..">
<hr class="is-visible is-large">

@@ -45,3 +43,2 @@

</form>
!> A field's Label should always have a `for="..."` attribute corresponding to the field ID it is refering to.

@@ -48,0 +45,0 @@

@@ -8,16 +8,93 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Layout</h1>

<h2 class="title is-4">Columns</h2>
Columns are used to structure content horizontally. Biings DS uses a responsive fluid system that automatically scales up to 12 columns.
<hr class="is-small">
<div class="box is-well is-marginless is-relaxed">
<div class="columns has-text-white has-text-centered">
<div class="column">
<div class="message has-background-orange-light has-text-weight-semibold"><br>First<br><br></div>
</div>
<div class="column">
<div class="message has-background-pink-light has-text-weight-semibold"><br>Second<br><br></div>
</div>
<div class="column">
<div class="message has-background-turquoise has-text-weight-semibold"><br>Third<br><br></div>
</div>
<div class="column">
<div class="message has-background-cyan has-text-weight-semibold"><br>Fourth<br><br></div>
</div>
</div>
</div>
<div class="columns">
<div class="column">First</div>
<div class="column">Second</div>
<div class="column">Third</div>
<div class="column">Fourth</div>
</div>
<br>
<div class="box is-bordered">
More possibilities on &nbsp;→&nbsp; <a href="https://bulma.io/documentation/columns/" target="blank">Bulma / <strong>Columns</strong></a>
</div>
<hr class="is-large is-visible">
<h2 class="title is-4">Level</h2>
Use **Level items** when you need to vertically center elements on one line.
<hr class="is-small">
<div class="box is-well is-marginless is-relaxed">
<div class="level has-text-white">
<div class="level-left">
<div class="level-item"><div class="message has-background-red has-text-weight-semibold"><br>&nbsp; &nbsp; Item 1 &nbsp; &nbsp;<br><br></div></div>
<div class="level-item"><div class="message has-background-red-light has-text-weight-semibold"><br>&nbsp; &nbsp; Item 2 &nbsp; &nbsp;<br><br></div></div>
<div class="level-item"><div class="message has-background-red-lighter has-text-weight-semibold"><br>&nbsp; &nbsp; Item 3 &nbsp; &nbsp;<br><br></div></div>
</div>
<div class="level-right">
<div class="level-item"><div class="message has-background-green-light has-text-weight-semibold"><br>&nbsp; &nbsp; Item 4 &nbsp; &nbsp;<br><br></div></div>
<div class="level-item"><div class="message has-background-green has-text-weight-semibold"><br>&nbsp; &nbsp; Item 5 &nbsp; &nbsp;<br><br></div></div>
</div>
</div>
</div>
<div class="level">
<div class="level-left">
<div class="level-item">Item 1</div>
<div class="level-item">Item 2</div>
<div class="level-item">Item 3</div>
</div>
<div class="level-right">
<div class="level-item">Item 4</div>
<div class="level-item">Item 5</div>
</div>
</div>
<br>
<div class="box is-bordered">
More possibilities on &nbsp;→&nbsp; <a href="https://bulma.io/documentation/layout/level/" target="blank">Bulma / <strong>Level</strong></a>
</div>
<hr class="is-large is-visible">
<h2 class="title is-4">Content Layout</h2>
<div class="columns has-text-centered">
<div class="column is-4"><img src="media/layout_1.png"><a href="#/layout?id=basic">Basic</a></div>
<div class="column is-4"><img src="media/layout_2.png"><a href="#/layout?id=tabs">with Tabs</a></div>
<div class="column is-4"><img src="media/layout_3.png"><a href="#/layout?id=menu">with Side menu</a></div>
<div class="column is-4"><img src="media/layout_2.png"><a href="#/layout?id=page">Page</a></div>
<div class="column is-4"><img src="media/layout_3.png"><a href="#/layout?id=menu">Page with Menu</a></div>
</div>
!> Layout is used only in a Biings Desktop or Tablet app.
!> **Content Layout** is used only in a Biings Desktop or Tablet app.
<hr class="is-small">
<a id="basic"></a>
<hr class="is-large is-visible">
<h2 class="title is-4">Basic</h2>
<h2 class="title is-5">Basic</h2>
Both `.page-header` and `.page-content` are optional. They are used <u>together or not at all</u>.
A **Basic** layout has no margin or padding and allows the content to stretch and fill the entire stage.

@@ -30,17 +107,15 @@ <hr class="is-small">

<div class="nav">...</div>
<div class="content">
<div class="page">
<div class="page-header">...</div> // optional
<div class="page-content">...</div> // optional
</div>
...
</div>
</div>
<a id="page"></a>
<hr>
<a id="tabs"></a>
<hr class="is-large is-visible">
<h2 class="title is-5">Page</h2>
<h2 class="title is-4">With Tabs</h2>
A **Page layout** has responsive padded content. Add `.is-centered` for fixed width centered content.
The page header acts as a menu with tabs.<br>Neither `.page-header` or `.page-content` should be used with tabs.
<hr class="is-small">

@@ -52,13 +127,15 @@

<div class="nav">...</div>
<div class="content">
<div class="tabs-menu">...</div>
<div class="page">...</div>
<div class="page">
...
</div>
</div>
</div>
<a id="menu"></a>
<hr class="is-large is-visible">
<h2 class="title is-4">With Side-menu</h2>
Same as the basic layout but with a side menu on the left.
<hr>
<h2 class="title is-5">Page with Menu</h2>
Similar to the Page layout with an additional **Side-menu** for quick navigation.

@@ -71,3 +148,4 @@ <hr class="is-small">

<div class="nav">...</div>
<div class="content">
<div class="content has-side-menu">
<div class="side-menu">

@@ -80,6 +158,3 @@ ...

</div>
</div>
<hr>
?> Build any kind of page by combining <strong>Layout</strong> with → <a href="#/column">**Columns**</a>

@@ -23,3 +23,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1">Loader</h1>

<div class="loader is-huge">
<br>

@@ -26,0 +25,0 @@

@@ -27,3 +27,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Menu</h1>

</div>
<br>

@@ -30,0 +29,0 @@

@@ -38,3 +38,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Message</h1>

</div>
<br>

@@ -95,3 +94,2 @@

</div>
<br>

@@ -98,0 +96,0 @@

@@ -29,3 +29,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Modal</h1>

</div>
<br>

@@ -80,3 +79,2 @@

</div>
<hr class="is-large is-visible">

@@ -83,0 +81,0 @@

@@ -37,3 +37,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Radio button</h1>

</label>
<br>

@@ -40,0 +39,0 @@

@@ -13,3 +13,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Skeleton</h1>

<div class="has-skeleton"></div>
<hr class="is-large is-visible">

@@ -16,0 +15,0 @@

@@ -13,3 +13,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Spacer</h1>

<hr class="is-visible">
<br>

@@ -16,0 +15,0 @@

@@ -8,3 +8,3 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Table</h1>

<div class="box has-background-white is-relaxed is-marginless">
<div class="box is-well is-relaxed is-marginless">
<table class="table">

@@ -32,3 +32,3 @@ <thead>

</tr>
<tr class="has-background-white-ter">
<tr class="has-background-grey-lighter">
<td>Line 3</td>

@@ -73,3 +73,2 @@ <td>this</td>

</table>
<br>

@@ -76,0 +75,0 @@

@@ -27,3 +27,2 @@ <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Tabs</h1>

</div>
<hr class="is-visible is-large">

@@ -46,3 +45,3 @@

<div class="box is-white is-large has-text-grey-dark">
Boxed content<br>_Use Javascript for the tab switching behaviour._
Boxed content<br><i>Use Javascript for the tab switching behaviour.</i>
</div>

@@ -61,3 +60,2 @@

</div>
<hr>

@@ -64,0 +62,0 @@

@@ -12,4 +12,4 @@ <h6 class="subtitle is-5 has-text-grey">Style</h6><h1 class="title is-1 has-text-weight-bold">Typography</h1>

<li>For maximum legibility Biings DS uses <strong>Averta</strong> as its main font family</li>
<li>Use different font weights classes to emphasize or differentiate content hierarchy:<br>from `has-text-weight-light` / `normal` / `semibold` / `bold`</li>
<li>When a Monospace font is required use the <strong class="has-text-monospace">Roboto Mono</strong> font (use `is-monospace`)</li>
<li>Use different font weights classes to emphasize or differentiate content hierarchy:<br>from <code>has-text-weight-light</code> / <code>normal</code> / <code>semibold</code> / <code>bold</code></li>
<li>When a Monospace font is required use the <strong class="has-text-monospace">Roboto Mono</strong> font (use <code>is-monospace</code>)</li>
</ul>

@@ -16,0 +16,0 @@

{
"name": "biings-ds",
"version": "1.11.1",
"version": "1.12.0",
"description": "Biings Design System",

@@ -5,0 +5,0 @@ "main": "build/bds.css",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc