- f
@@ -10,11 +10,11 @@
{% if category_id == 'overview' %}
- Concepts
+ Guides
{% elsif category_id == 'columns' %}
- Library
+ CSS Library
{% endif %}
diff --git a/docs/_includes/components/logos-item.html b/docs/_includes/components/logos-item.html
new file mode 100644
index 00000000..b55bcb68
--- /dev/null
+++ b/docs/_includes/components/logos-item.html
@@ -0,0 +1,23 @@
+
+
+
+
+
- {% include elements/anchor.html name="Variables" %}
+ {% include elements/anchor.html name=anchor_name %}
diff --git a/docs/_includes/elements/anchor.html b/docs/_includes/elements/anchor.html
index d6e6eab3..0fc7b7b9 100644
--- a/docs/_includes/elements/anchor.html
+++ b/docs/_includes/elements/anchor.html
@@ -5,4 +5,9 @@
#
+ {% if include.tag %}
+
+ {{ include.tag }}
+
+ {% endif %}
diff --git a/docs/_includes/elements/sponsor-item.html b/docs/_includes/elements/sponsor-item.html
index 1b69f806..0f210b18 100644
--- a/docs/_includes/elements/sponsor-item.html
+++ b/docs/_includes/elements/sponsor-item.html
@@ -9,9 +9,6 @@
class="bd-sponsor-item {{ include.classname }}"
href="{{ sponsor.url }}"
target="_blank"
-{% unless sponsor.follow or sponsor.noopener %}
-rel="nofollow"
-{% endunless %}
{% if sponsor.noopener %}
rel="noopener"
{% endif %}
diff --git a/docs/_includes/elements/tw.html b/docs/_includes/elements/tw.html
index 3f9251e8..a81d45d8 100644
--- a/docs/_includes/elements/tw.html
+++ b/docs/_includes/elements/tw.html
@@ -1,7 +1,10 @@
{% assign tweet = site.data.love.tweets_by_id[include.tweet_id] %}
{% assign twUrl = "https://twitter.com/" | append: tweet.username | append: "/status/" | append: tweet.id %}
-
+
-
+
@@ -64,14 +64,14 @@
-
-
-
-
-
+
+
+ Name
+ Fixed size
+ Responsive size (resize window to see in action)
+ Code
+
+
+
+ {% for size in sizes %}
+{% capture responsive_code %}
+
+ {{ size | capitalize }}
+
+{% endcapture %}
+
+ {{ size | capitalize }}
+
+
+ {{ size | capitalize }}
+
+
+
+ {{ responsive_code }}
+
+
+ {% highlight html %}{{ responsive_code }}{% endhighlight %}
+
+
+ {% endfor %}
+
+
\ No newline at end of file
diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index 7c776fac..60566e7a 100644
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -1,26 +1,26 @@
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
// Search
const setSearchToggle = () => {
- const icon = document.getElementById('searchIcon');
- const search = document.getElementById('search');
- const input = document.getElementById('algoliaSearch');
+ const icon = document.getElementById("searchIcon");
+ const search = document.getElementById("search");
+ const input = document.getElementById("algoliaSearch");
if (!icon) {
return;
}
- icon.addEventListener('click', (event) => {
- search.classList.toggle('bd-is-visible');
+ icon.addEventListener("click", (event) => {
+ search.classList.toggle("bd-is-visible");
- if (search.classList.contains('bd-is-visible')) {
+ if (search.classList.contains("bd-is-visible")) {
algoliaSearch.focus();
}
});
- window.addEventListener('keydown', (event) => {
- if (event.key === 'Escape') {
- return search.classList.remove('bd-is-visible');
+ window.addEventListener("keydown", (event) => {
+ if (event.key === "Escape") {
+ return search.classList.remove("bd-is-visible");
}
});
};
@@ -30,7 +30,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Navbar
const setNavbarVisibility = () => {
- const navbar = document.getElementById('navbar');
+ const navbar = document.getElementById("navbar");
if (!navbar) {
return;
@@ -38,11 +38,11 @@ document.addEventListener('DOMContentLoaded', () => {
const cs = getComputedStyle(navbar);
const paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
- const brand = navbar.querySelector('.navbar-brand');
- const end = navbar.querySelector('.navbar-end');
- const search = navbar.querySelector('.bd-search');
- const original = document.getElementById('navbarStartOriginal');
- const clone = document.getElementById('navbarStartClone');
+ const brand = navbar.querySelector(".navbar-brand");
+ const end = navbar.querySelector(".navbar-end");
+ const search = navbar.querySelector(".bd-search");
+ const original = document.getElementById("navbarStartOriginal");
+ const clone = document.getElementById("navbarStartClone");
const rest =
navbar.clientWidth -
@@ -53,16 +53,16 @@ document.addEventListener('DOMContentLoaded', () => {
const space = original.clientWidth;
const all = document.querySelectorAll(
- '#navbarStartClone > .bd-navbar-item'
+ "#navbarStartClone > .bd-navbar-item"
);
const base = document.querySelectorAll(
- '#navbarStartClone > .bd-navbar-item-base'
+ "#navbarStartClone > .bd-navbar-item-base"
);
const more = document.querySelectorAll(
- '#navbarStartOriginal > .bd-navbar-item-more'
+ "#navbarStartOriginal > .bd-navbar-item-more"
);
const dropdown = document.querySelectorAll(
- '#navbarStartOriginal .bd-navbar-dropdown > .navbar-item'
+ "#navbarStartOriginal .bd-navbar-dropdown > .navbar-item"
);
let count = 0;
@@ -86,17 +86,17 @@ document.addEventListener('DOMContentLoaded', () => {
if (howManyMore > 0) {
for (let i = 0; i < howManyMore; i++) {
- more[i].classList.add('bd-is-visible');
- dropdown[i].classList.add('bd-is-hidden');
+ more[i].classList.add("bd-is-visible");
+ dropdown[i].classList.add("bd-is-hidden");
}
}
for (let j = howManyMore; j < more.length; j++) {
- more[j].classList.remove('bd-is-visible');
+ more[j].classList.remove("bd-is-visible");
}
for (let k = howManyMore; k < dropdown.length; k++) {
- dropdown[k].classList.remove('bd-is-hidden');
+ dropdown[k].classList.remove("bd-is-hidden");
}
};
@@ -104,35 +104,35 @@ document.addEventListener('DOMContentLoaded', () => {
// Cookies
- const cookieBookModalName = 'bulma_closed_book_modal';
+ const cookieBookModalName = "bulma_closed_book_modal";
const cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
// Dropdowns
- const $dropdowns = getAll('.dropdown:not(.is-hoverable)');
+ const $dropdowns = getAll(".dropdown:not(.is-hoverable)");
if ($dropdowns.length > 0) {
$dropdowns.forEach(($el) => {
- $el.addEventListener('click', (event) => {
+ $el.addEventListener("click", (event) => {
event.stopPropagation();
- $el.classList.toggle('is-active');
+ $el.classList.toggle("is-active");
});
});
- document.addEventListener('click', (event) => {
+ document.addEventListener("click", (event) => {
closeDropdowns();
});
}
function closeDropdowns() {
$dropdowns.forEach(($el) => {
- $el.classList.remove('is-active');
+ $el.classList.remove("is-active");
});
}
// Toggles
- const $burgers = getAll('.navbar-burger');
+ const $burgers = getAll(".navbar-burger");
if ($burgers.length > 0) {
$burgers.forEach(($el) => {
@@ -140,11 +140,11 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
- $el.addEventListener('click', () => {
+ $el.addEventListener("click", () => {
const target = $el.dataset.target;
const $target = document.getElementById(target);
- $el.classList.toggle('is-active');
- $target.classList.toggle('is-active');
+ $el.classList.toggle("is-active");
+ $target.classList.toggle("is-active");
});
});
}
@@ -152,15 +152,15 @@ document.addEventListener('DOMContentLoaded', () => {
// Modals
const rootEl = document.documentElement;
- const $modals = getAll('.modal');
- const $modalButtons = getAll('.modal-button');
+ const $modals = getAll(".modal");
+ const $modalButtons = getAll(".modal-button");
const $modalCloses = getAll(
- '.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'
+ ".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button"
);
if ($modalButtons.length > 0) {
$modalButtons.forEach(($el) => {
- $el.addEventListener('click', () => {
+ $el.addEventListener("click", () => {
const target = $el.dataset.target;
openModal(target);
});
@@ -169,7 +169,7 @@ document.addEventListener('DOMContentLoaded', () => {
if ($modalCloses.length > 0) {
$modalCloses.forEach(($el) => {
- $el.addEventListener('click', () => {
+ $el.addEventListener("click", () => {
closeModals();
});
});
@@ -177,18 +177,18 @@ document.addEventListener('DOMContentLoaded', () => {
function openModal(target) {
const $target = document.getElementById(target);
- rootEl.classList.add('is-clipped');
- $target.classList.add('is-active');
+ rootEl.classList.add("is-clipped");
+ $target.classList.add("is-active");
}
function closeModals() {
- rootEl.classList.remove('is-clipped');
+ rootEl.classList.remove("is-clipped");
$modals.forEach(($el) => {
- $el.classList.remove('is-active');
+ $el.classList.remove("is-active");
});
}
- document.addEventListener('keydown', (event) => {
+ document.addEventListener("keydown", (event) => {
const e = event || window.event;
if (e.keyCode === 27) {
@@ -199,7 +199,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Clipboard
- const $highlights = getAll('.highlight');
+ const $highlights = getAll(".highlight");
let itemsProcessed = 0;
if ($highlights.length > 0) {
@@ -207,19 +207,19 @@ document.addEventListener('DOMContentLoaded', () => {
const copyEl = 'Copy ';
const expandEl =
'Expand ';
- $el.insertAdjacentHTML('beforeend', copyEl);
+ $el.insertAdjacentHTML("beforeend", copyEl);
const $parent = $el.parentNode;
- if ($parent && $parent.classList.contains('bd-is-more')) {
+ if ($parent && $parent.classList.contains("bd-is-more")) {
const showEl =
'Show code {% if page.fulltitle %}{{ page.fulltitle | markdownify | strip_html }}{% else %}{% if page.title %}{{ page.title | markdownify | strip_html }} | {% endif %}{{ site.data.meta.title | markdownify | strip_html }}{% endif %}
+
+ {{ page.title }}
+
+
diff --git a/docs/assets/Bulma Icon White.png b/docs/assets/Bulma Icon White.png
new file mode 100644
index 00000000..5ac14a65
Binary files /dev/null and b/docs/assets/Bulma Icon White.png differ
diff --git a/docs/assets/Bulma Icon White.svg b/docs/assets/Bulma Icon White.svg
new file mode 100644
index 00000000..a57afaa2
--- /dev/null
+++ b/docs/assets/Bulma Icon White.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/docs/assets/Bulma Icon.png b/docs/assets/Bulma Icon.png
new file mode 100644
index 00000000..aa433994
Binary files /dev/null and b/docs/assets/Bulma Icon.png differ
diff --git a/docs/assets/Bulma Icon.svg b/docs/assets/Bulma Icon.svg
new file mode 100644
index 00000000..6562c62d
--- /dev/null
+++ b/docs/assets/Bulma Icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/docs/assets/Bulma Logo Black.png b/docs/assets/Bulma Logo Black.png
new file mode 100644
index 00000000..e45fdc00
Binary files /dev/null and b/docs/assets/Bulma Logo Black.png differ
diff --git a/docs/assets/Bulma Logo Black.svg b/docs/assets/Bulma Logo Black.svg
new file mode 100644
index 00000000..89d36207
--- /dev/null
+++ b/docs/assets/Bulma Logo Black.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/docs/assets/Bulma Logo White.png b/docs/assets/Bulma Logo White.png
new file mode 100644
index 00000000..1e52da1e
Binary files /dev/null and b/docs/assets/Bulma Logo White.png differ
diff --git a/docs/assets/Bulma Logo White.svg b/docs/assets/Bulma Logo White.svg
new file mode 100644
index 00000000..43a87040
--- /dev/null
+++ b/docs/assets/Bulma Logo White.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/docs/assets/Bulma Logo.png b/docs/assets/Bulma Logo.png
new file mode 100644
index 00000000..4b13dd15
Binary files /dev/null and b/docs/assets/Bulma Logo.png differ
diff --git a/docs/assets/Bulma Logo.svg b/docs/assets/Bulma Logo.svg
new file mode 100644
index 00000000..f8435f56
--- /dev/null
+++ b/docs/assets/Bulma Logo.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/docs/assets/Bulma Wordmark White.png b/docs/assets/Bulma Wordmark White.png
new file mode 100644
index 00000000..86db030d
Binary files /dev/null and b/docs/assets/Bulma Wordmark White.png differ
diff --git a/docs/assets/Bulma Wordmark White.svg b/docs/assets/Bulma Wordmark White.svg
new file mode 100644
index 00000000..6201d1f3
--- /dev/null
+++ b/docs/assets/Bulma Wordmark White.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/docs/assets/Bulma Wordmark.png b/docs/assets/Bulma Wordmark.png
new file mode 100644
index 00000000..505f3384
Binary files /dev/null and b/docs/assets/Bulma Wordmark.png differ
diff --git a/docs/assets/Bulma Wordmark.svg b/docs/assets/Bulma Wordmark.svg
new file mode 100644
index 00000000..c0a5323d
--- /dev/null
+++ b/docs/assets/Bulma Wordmark.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/docs/brand.html b/docs/brand.html
new file mode 100644
index 00000000..81d1ee80
--- /dev/null
+++ b/docs/brand.html
@@ -0,0 +1,109 @@
+---
+title: "Brand assets of Bulma"
+layout: default
+route: brand
+breadcrumb:
+ - home
+ - brand
+---
+
+{% include global/navbar.html id="Brand" %}
+
+{%
+ include components/hero.html
+ color="primary"
+ icon="fas fa-medal"
+ title="The Bulma **Brand**"
+ subtitle="Download the official Bulma logo"
+%}
+
+
+
+
+ Icon
+
+
+ {%
+ include components/logos-item.html
+ asset="Bulma Icon"
+ %}
+
+ {%
+ include components/logos-item.html
+ unsplash="fxvpCFZgTe4"
+ asset="Bulma Icon Black"
+ %}
+
+ {%
+ include components/logos-item.html
+ unsplash="4TKFpJPnyU8"
+ asset="Bulma Icon White"
+ %}
+
+
+ Wordmark
+
+
+ {%
+ include components/logos-item.html
+ asset="Bulma Wordmark"
+ %}
+
+ {%
+ include components/logos-item.html
+ unsplash="KjWMGF0PYuE"
+ asset="Bulma Wordmark"
+ %}
+
+ {%
+ include components/logos-item.html
+ unsplash="qsnfSvCdec4"
+ asset="Bulma Wordmark White"
+ %}
+
+
+ Logo
+
+
+ {%
+ include components/logos-item.html
+ asset="Bulma Logo"
+ %}
+
+ {%
+ include components/logos-item.html
+ unsplash="8tA3ZSY9Iic"
+ asset="Bulma Logo Black"
+ %}
+
+ {%
+ include components/logos-item.html
+ unsplash="RMypptC8-B0"
+ asset="Bulma Logo White"
+ %}
+
+
+ Color
+
+
+
+
+
+
+
+
RGB
+
rgb(0, 209, 178)
+
Copy
+
+
+
HSL
+
hsl(171, 100%, 41%)
+
Copy
+
+
+
+
node-sass sass article
+
+figure
+
+
+hgroup
+
+body
+button
+optgroup
+select
+
+code
+precode
+Link strong >
+small
+span
+strong
+fieldset
+
+
+
diff --git a/docs/cyp/components/breadcrumb.html b/docs/cyp/components/breadcrumb.html
new file mode 100644
index 00000000..16d03aef
--- /dev/null
+++ b/docs/cyp/components/breadcrumb.html
@@ -0,0 +1,61 @@
+---
+layout: cypress
+title: Components/Breadcrumb
+---
+
+{% capture content %}
+ Bulma Documentation Components Breadcrumb
+
+
+
+
+
+
+
+
+
+
+
+{% for size in site.data.sizes %}
+
+
+
+{% endfor %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/cyp/components/card.html b/docs/cyp/components/card.html
new file mode 100644
index 00000000..73f65349
--- /dev/null
+++ b/docs/cyp/components/card.html
@@ -0,0 +1,75 @@
+---
+layout: cypress
+title: Components/Card
+---
+
+{% capture header %}
+
+{% endcapture %}
+
+{% capture content %}
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus nec iaculis mauris.
@bulmaio .
+
#css #responsive
+
+
11:09 PM - 1 Jan 2016
+
+
+
+
+
+
+ {{ image }}
+ {{ content }}
+ {{ footer }}
+
+
+
+ {{ content }}
+ {{ content }}
+
+
+
+
+
+ Dropdown button
+
+
+
+
+{% endcapture %}
+
+{% capture dropdownMenu %}
+
+{% endcapture %}
+
+
+ {{ dropdownTrigger }}
+ {{ dropdownMenu }}
+
+
+
+ {{ dropdownTrigger }}
+ {{ dropdownMenu }}
+
diff --git a/docs/cyp/components/menu.html b/docs/cyp/components/menu.html
new file mode 100644
index 00000000..298b1400
--- /dev/null
+++ b/docs/cyp/components/menu.html
@@ -0,0 +1,44 @@
+---
+layout: cypress
+title: Components/Menu
+---
+
+
diff --git a/docs/cyp/components/message.html b/docs/cyp/components/message.html
new file mode 100644
index 00000000..d329bab1
--- /dev/null
+++ b/docs/cyp/components/message.html
@@ -0,0 +1,46 @@
+---
+layout: cypress
+title: Components/Message
+---
+
+{% capture messageHeader %}
+
+{% endcapture %}
+
+{% capture messageBody %}
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi , tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus , in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+ {{ messageHeader }}
+ {{ messageBody }}
+
+
+
+
+{% for size in site.data.sizes %}
+
+ {{ messageHeader }}
+ {{ messageBody }}
+
+{% endfor %}
+
+{% for color in site.data.colors.justColors %}
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi , tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus , in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+{% endfor %}
diff --git a/docs/cyp/components/modal.html b/docs/cyp/components/modal.html
new file mode 100644
index 00000000..fd7dbef2
--- /dev/null
+++ b/docs/cyp/components/modal.html
@@ -0,0 +1,48 @@
+---
+layout: cypress
+title: Components/Modal
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ content }}
+
+
+
+
+ {{ content }}
+
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+{% for color in site.data.colors.justColors %}
+
+
+
+
+
+{% endfor %}
diff --git a/docs/cyp/components/pagination.html b/docs/cyp/components/pagination.html
new file mode 100644
index 00000000..d4857065
--- /dev/null
+++ b/docs/cyp/components/pagination.html
@@ -0,0 +1,70 @@
+---
+layout: cypress
+title: Components/Pagination
+---
+
+{% capture content %}
+
+
+
+{% endcapture %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/cyp/components/panel.html b/docs/cyp/components/panel.html
new file mode 100644
index 00000000..e91a964b
--- /dev/null
+++ b/docs/cyp/components/panel.html
@@ -0,0 +1,80 @@
+---
+layout: cypress
+title: Components/Panel
+---
+
+{% capture content %}
+
+ Repositories
+
+
+
+ All
+ Public
+ Private
+ Sources
+ Forks
+
+
+
+
+ bulma
+
+
+
+
+ marksheet
+
+
+
+
+ minireset.css
+
+
+
+
+ jgthms.github.io
+
+
+
+
+ daniellowtw/infboard
+
+
+
+
+ mojs
+
+
+
+
+
+ Reset all filters
+
+
+{% endcapture %}
+
+
+ {{ content }}
+
+
+{% for color in site.data.colors.justColors %}
+
+ {{ content }}
+
+{% endfor %}
diff --git a/docs/cyp/components/tabs.html b/docs/cyp/components/tabs.html
new file mode 100644
index 00000000..ccda2f77
--- /dev/null
+++ b/docs/cyp/components/tabs.html
@@ -0,0 +1,190 @@
+---
+layout: cypress
+title: Components/Tabs
+---
+
+{% capture content_text %}
+
+{% endcapture %}
+
+{% capture content_icons %}
+
+{% endcapture %}
+
+
+
+
+ {{ content_text }}
+
+
+
+ {{ content_text }}
+
+
+
+ {{ content_text }}
+
+
+
+ {{ content_text }}
+
+
+
+ {{ content_text }}
+
+
+
+ {{ content_text }}
+
+
+
+ {{ content_icons }}
+
+
+
+ {{ content_icons }}
+
+
+
+
+
+
+
+ {{ content_icons }}
+
+
+
+ {{ content_icons }}
+
+
+
+ {{ content_icons }}
+
+
+
diff --git a/docs/cyp/elements/box.html b/docs/cyp/elements/box.html
new file mode 100644
index 00000000..faea6ba1
--- /dev/null
+++ b/docs/cyp/elements/box.html
@@ -0,0 +1,8 @@
+---
+layout: cypress
+title: Elements/Box
+---
+
+
+ I'm in a box.
+
diff --git a/docs/cyp/elements/button.html b/docs/cyp/elements/button.html
new file mode 100644
index 00000000..d3d798a0
--- /dev/null
+++ b/docs/cyp/elements/button.html
@@ -0,0 +1,66 @@
+---
+layout: cypress
+title: Elements/Button
+---
+
+
+
+ Button
+
+
+
+ Hover
+
+
+
+ Focus
+
+
+
+ Active
+
+
+
+{% for color in site.data.colors.justColors %}
+
+
+ {{ color | capitalize }}
+
+
+
+ Hover
+
+
+
+ Focus
+
+
+
+ Active
+
+
+
+
+
+ Outlined
+
+
+
+ Hover
+
+
+
+ Inverted
+
+
+
+ Inverted Outlined
+
+
+
+
+
+ Light
+
+
+{% endfor %}
diff --git a/docs/cyp/elements/container.html b/docs/cyp/elements/container.html
new file mode 100644
index 00000000..15b40c45
--- /dev/null
+++ b/docs/cyp/elements/container.html
@@ -0,0 +1,28 @@
+---
+layout: cypress
+title: Elements/Container
+---
+
+
+ I'm a container
+
+
+
+ I'm a max desktop container
+
+
+
+ I'm a max widescreen container
+
+
+
+ I'm a widescreen container
+
+
+
+ I'm a fullhd container
+
+
+
+ I'm a fluid container
+
diff --git a/docs/cyp/elements/content.html b/docs/cyp/elements/content.html
new file mode 100644
index 00000000..943d24fb
--- /dev/null
+++ b/docs/cyp/elements/content.html
@@ -0,0 +1,96 @@
+---
+layout: cypress
+title: Elements/Content
+---
+
+
+
Hello World
+
Lorem ipsum[1] script works as well!
+
Second level
+
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
+
+ In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+ Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+ Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+ Ut non enim metus.
+
+
Third level
+
Quisque ante lacus, malesuada ac auctor vitae, congue non ante . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
+
+ Donec blandit a lorem id convallis.
+ Cras gravida arcu at diam gravida gravida.
+ Integer in volutpat libero.
+ Donec a diam tellus.
+ Aenean nec tortor orci.
+ Quisque aliquam cursus urna, non bibendum massa viverra eget.
+ Vivamus maximus ultricies pulvinar.
+
+
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
+
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
+
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.
+
+ Web
+ The part of the Internet that contains websites and web pages
+ HTML
+ A markup language for creating web pages
+ CSS
+ A technology to make HTML look better
+
+
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.
+
Fourth level
+
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.
+
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello World</title>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
+ </body>
+</html>
+
+
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
+
+
+
+ One
+ Two
+
+
+
+
+ Three
+ Four
+
+
+ Five
+ Six
+
+
+ Seven
+ Eight
+
+
+ Nine
+ Ten
+
+
+ Eleven
+ Twelve
+
+
+
+
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
+
Fifth level
+
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
+
+
+ Figure 1: Some beautiful placeholders
+
+
+
Sixth level
+
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
diff --git a/docs/cyp/elements/image.html b/docs/cyp/elements/image.html
new file mode 100644
index 00000000..1c98c998
--- /dev/null
+++ b/docs/cyp/elements/image.html
@@ -0,0 +1,57 @@
+---
+layout: cypress
+title: Elements/Image
+dimensions:
+- 16
+- 24
+- 32
+- 48
+- 64
+- 96
+- 128
+ratios:
+- square
+- 1by1
+- 5by4
+- 4by3
+- 3by2
+- 5by3
+- 16by9
+- 2by1
+- 3by1
+- 4by5
+- 3by4
+- 2by3
+- 3by5
+- 9by16
+- 1by2
+- 1by3
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor.
Pellentesque risus mi , tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur.
+
+
+ Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor.
Pellentesque risus mi , tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur.
+
+
+ Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor.
Pellentesque risus mi , tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur.
+
+
+
+
15%
+
30%
+
45%
+
60%
+
+
+ {% for j in (1..10) %}
+ {{ j }}
+ {% endfor %}
+
+
+
+ {% for i in (1..5) %}
+
+ {% for j in (1..10) %}
+ {{ j | times: i }}
+ {% endfor %}
+
+ {% endfor %}
+
+ {% for j in (1..10) %}
+ {{ j }}
+ {% endfor %}
+
+
+{% endcapture %}
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/cyp/elements/tag.html b/docs/cyp/elements/tag.html
new file mode 100644
index 00000000..819630e9
--- /dev/null
+++ b/docs/cyp/elements/tag.html
@@ -0,0 +1,74 @@
+---
+layout: cypress
+title: Elements/Tag
+---
+
+
+
+ Tag
+
+
+
+ Rounded
+
+
+
+
+
+ Normal
+
+
+
+ Medium
+
+
+
+ Large
+
+
+
+
+ Tag
+ Tag
+ Tag
+
+
+
+ Tag
+ Tag
+ Tag
+
+
+
+ Tag
+ Tag
+ Tag
+
+
+
+ Tag
+ Tag
+ Tag
+
+
+
+ Tag
+ Tag
+ Tag
+
+
+
+ {% for color in site.data.colors.justColors %}
+
+ {{ color | capitalize }}
+
+ {% endfor %}
+
+
+
+ {% for color in site.data.colors.justColors %}
+
+ {{ color | capitalize }}
+
+ {% endfor %}
+
diff --git a/docs/cyp/elements/title.html b/docs/cyp/elements/title.html
new file mode 100644
index 00000000..2fa714ee
--- /dev/null
+++ b/docs/cyp/elements/title.html
@@ -0,0 +1,24 @@
+---
+layout: cypress
+title: Elements/Title
+---
+
+
+ Title strong
+
+
+{% for i in (1..7) %}
+
+ Title size {{ i }}
+
+{% endfor %}
+
+
+ Subtitle strong
+
+
+{% for i in (1..7) %}
+
+ Subtitle size {{ i }}
+
+{% endfor %}
diff --git a/docs/cyp/form/checkbox-radio.html b/docs/cyp/form/checkbox-radio.html
new file mode 100644
index 00000000..cad3a9af
--- /dev/null
+++ b/docs/cyp/form/checkbox-radio.html
@@ -0,0 +1,29 @@
+---
+layout: cypress
+title: Form/Checkbox Radio
+---
+
+
+ terms and conditions
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/cyp/form/file.html b/docs/cyp/form/file.html
new file mode 100644
index 00000000..403c84a0
--- /dev/null
+++ b/docs/cyp/form/file.html
@@ -0,0 +1,71 @@
+---
+layout: cypress
+title: Form/File
+---
+
+{% capture content %}
+
+
+
+
+
+ Choose a file…
+
+
+
+{% endcapture %}
+
+{% capture content_with_name %}
+
+
+
+
+
+ Choose a file…
+
+
+
+ Screen Shot 2017-07-29 at 15.54.25.png
+
+
+{% endcapture %}
+
+
+ {{ content }}
+
+
+{% for color in site.data.colors.justColors %}
+
+ {{ content }}
+
+{% endfor %}
+
+{% for size in site.data.sizes %}
+
+ {{ content }}
+
+{% endfor %}
+
+
+ {{ content_with_name }}
+
+
+
+ {{ content_with_name }}
+
+
+
+ {{ content_with_name }}
+
+
+
+ {{ content_with_name }}
+
+
+
+ {{ content_with_name }}
+
diff --git a/docs/cyp/form/input-textarea.html b/docs/cyp/form/input-textarea.html
new file mode 100644
index 00000000..dceb9ba8
--- /dev/null
+++ b/docs/cyp/form/input-textarea.html
@@ -0,0 +1,26 @@
+---
+layout: cypress
+title: Form/Input Textarea
+---
+
+Argentina
+ Bolivia
+ Brazil
+ Chile
+ Colombia
+ Ecuador
+ Guyana
+ Paraguay
+ Peru
+ Suriname
+ Uruguay
+ Venezuela
+{% endcapture %}
+
+
+
+ {{ options }}
+
+
+
+{% for color in site.data.colors.justColors %}
+
+
+ {{ options }}
+
+
+{% endfor %}
+
+{% for size in site.data.sizes %}
+
+
+ {{ options }}
+
+
+{% endfor %}
+
+
+
+ {{ options }}
+
+
+
+
+
+ {{ options }}
+
+
diff --git a/docs/cyp/form/tools.html b/docs/cyp/form/tools.html
new file mode 100644
index 00000000..50f36355
--- /dev/null
+++ b/docs/cyp/form/tools.html
@@ -0,0 +1,150 @@
+---
+layout: cypress
+title: Form/Tools
+---
+
+{% capture content %}
+
+
+
+{% endcapture %}
+
+
+ Form label
+
+
+{% for size in site.data.sizes %}
+
+ {{ size | capitalize }} form label
+
+{% endfor %}
+
+This username is available
+
+{% for color in site.data.colors.justColors %}
+ This username is available
+{% endfor %}
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+ {{ content }}
+
+
+
+
+{% for size in site.data.sizes %}
+
+ {{ size | capitalize }} field label
+
+{% endfor %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Last element
diff --git a/docs/cyp/grid/columns.html b/docs/cyp/grid/columns.html
new file mode 100644
index 00000000..99e9fbff
--- /dev/null
+++ b/docs/cyp/grid/columns.html
@@ -0,0 +1,179 @@
+---
+layout: cypress
+title: Grid/Columns
+screens:
+- mobile
+- tablet
+- desktop
+- widescreen
+- fullhd
+widths:
+- three-quarters
+- two-thirds
+- half
+- one-third
+- one-quarter
+- one-fifth
+- two-fifths
+- three-fifths
+- four-fifths
+---
+
+{% capture columns %}
+
+ First column
+
+
+ Second column
+
+
+ Third column
+
+
+ Fourth column
+
+{% endcapture %}
+
+{% capture twelve_columns %}
+ {% for i in (1..12) %}
+
+ Column {{ i }}
+
+ {% endfor %}
+{% endcapture %}
+
+{% capture special_columns %}
+
+ Column narrow
+
+
+
+ Column full
+
+
+ {% for width in page.widths %}
+
+ Column {{ width }}
+
+
+
+ Column {{ width }}
+
+ {% endfor %}
+
+ {% for i in (1..12) %}
+
+ Column {{ i }}
+
+ {% endfor %}
+{% endcapture %}
+
+
+ {{ columns }}
+
+
+
+
+
+
+
+ {{ columns }}
+
+
+
+ {{ columns }}
+
+
+
+
+
+ {{ columns }}
+
+
+
+ {{ columns }}
+
+
+
+
+
+ {{ twelve_columns }}
+
+
+
+ {{ twelve_columns }}
+
+
+
+ {{ twelve_columns }}
+
+
+
+
+ Column narrow
+
+
+
+ Column full
+
+
+ {% for width in page.widths %}
+
+ Column {{ width }}
+
+
+
+ Column {{ width }}
+
+ {% endfor %}
+
+ {% for i in (1..12) %}
+
+ Column {{ i }}
+
+
+
+ Column {{ i }}
+
+ {% endfor %}
+
+
+ Column narrow
+
+
+
+ Column full
+
+
+ {% for width in page.widths %}
+
+ Column {{ width }}
+
+
+
+ Column {{ width }}
+
+ {% endfor %}
+
+ {% for i in (1..12) %}
+
+ Column {{ i }}
+
+
+
+ Column {{ i }}
+
+ {% endfor %}
+
+
+
+
+ Vertical...
+ Top tile
+
+
+
+ ...tiles
+ Bottom tile
+
+
+
+
+
+ Middle tile
+
+ With an image
+
+
+
+
+
+
+
+
+ Wide tile
+ Aligned with the right tile
+
+
+
+
+
+
+
+
+
Tall tile
+
With even more content
+
+
+
+
+
+ {{ content }}
+
+
+
+
+
+ {% for i in (1..12) %}
+
+ Tile {{ i }}
+
+ {% endfor %}
+
+
+ Hero title
+
+
+ Hero subtitle
+
+
+
+
+
diff --git a/docs/cyp/layout/level.html b/docs/cyp/layout/level.html
new file mode 100644
index 00000000..2d44a6a8
--- /dev/null
+++ b/docs/cyp/layout/level.html
@@ -0,0 +1,63 @@
+---
+layout: cypress
+title: Components/Level
+---
+
+
+
+
+
+
+
+
+
+
+
+
+ Search
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/cyp/layout/media.html b/docs/cyp/layout/media.html
new file mode 100644
index 00000000..b4667dbb
--- /dev/null
+++ b/docs/cyp/layout/media.html
@@ -0,0 +1,108 @@
+---
+layout: cypress
+title: Components/Media
+---
+
+
+
+
+
+
+
+
+
+
+ John Smith @johnsmith 31m
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Barbara Middleton
+ Like · Reply · 3 hrs
+
+
+
+
+
+
+
+
+
+
+
+ Sean Brown
+ Like · Reply · 2 hrs
+
+
+
+ Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
+
+
+
+ Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
+
+
+
+
+
+
+
+
+
+
+
+
+ Kayli Eunice
+ Like · Reply · 2 hrs
+
+
+
diff --git a/docs/cyp/layout/section.html b/docs/cyp/layout/section.html
new file mode 100644
index 00000000..11b473bb
--- /dev/null
+++ b/docs/cyp/layout/section.html
@@ -0,0 +1,8 @@
+---
+layout: cypress
+title: Layout/Section
+---
+
+
+
+
diff --git a/docs/cypress.json b/docs/cypress.json
new file mode 100644
index 00000000..93444479
--- /dev/null
+++ b/docs/cypress.json
@@ -0,0 +1,120 @@
+{
+ "projectId": "tnstsp",
+ "env": {
+ "black": "rgb(10, 10, 10)",
+ "black-bis": "rgb(18, 18, 18)",
+ "black-ter": "rgb(36, 36, 36)",
+ "grey-darker": "rgb(54, 54, 54)",
+ "grey-dark": "rgb(74, 74, 74)",
+ "grey": "rgb(122, 122, 122)",
+ "grey-light": "rgb(181, 181, 181)",
+ "grey-lighter": "rgb(219, 219, 219)",
+ "grey-lightest": "rgb(237, 237, 237)",
+ "white-ter": "rgb(245, 245, 245)",
+ "white-bis": "rgb(250, 250, 250)",
+ "white": "rgb(255, 255, 255)",
+
+ "transparent": "rgba(0, 0, 0, 0)",
+ "black-transparent": "rgba(0, 0, 0, 0.7)",
+
+ "orange": "rgb(255, 71, 15)",
+ "yellow": "rgb(255, 224, 138)",
+ "green": "rgb(72, 199, 142)",
+ "turquoise": "rgb(0, 209, 178)",
+ "cyan": "rgb(62, 142, 208)",
+ "blue": "rgb(72, 95, 199)",
+ "purple": "rgb(184, 107, 255)",
+ "red": "rgb(241, 70, 104)",
+
+ "color-names": ["primary", "link", "info", "success", "warning", "danger"],
+
+ "primary": "rgb(0, 209, 178)",
+ "primary-invert": "rgb(255, 255, 255)",
+ "primary-light": "rgb(235, 255, 252)",
+ "primary-dark": "rgb(0, 148, 126)",
+
+ "link": "rgb(72, 95, 199)",
+ "link-invert": "rgb(255, 255, 255)",
+ "link-light": "rgb(239, 241, 250)",
+ "link-dark": "rgb(56, 80, 183)",
+
+ "info": "rgb(62, 142, 208)",
+ "info-invert": "rgb(255, 255, 255)",
+ "info-light": "rgb(239, 245, 251)",
+ "info-dark": "rgb(41, 111, 168)",
+
+ "success": "rgb(72, 199, 142)",
+ "success-invert": "rgb(255, 255, 255)",
+ "success-light": "rgb(239, 250, 245)",
+ "success-dark": "rgb(37, 121, 83)",
+
+ "warning": "rgb(255, 224, 138)",
+ "warning-invert": "rgba(0, 0, 0, 0.7)",
+ "warning-light": "rgb(255, 250, 235)",
+ "warning-dark": "rgb(148, 108, 0)",
+
+ "danger": "rgb(241, 70, 104)",
+ "danger-invert": "rgb(255, 255, 255)",
+ "danger-light": "rgb(254, 236, 240)",
+ "danger-dark": "rgb(204, 15, 53)",
+
+ "scheme-main": "rgb(255, 255, 255)",
+ "scheme-main-bis": "rgb(250, 250, 250)",
+ "scheme-main-ter": "rgb(245, 245, 245)",
+ "border": "rgb(219, 219, 219)",
+ "border-hover": "rgb(181, 181, 181)",
+ "text": "rgb(74, 74, 74)",
+ "text-strong": "rgb(54, 54, 54)",
+ "text-light": "rgb(122, 122, 122)",
+ "text-invert": "rgb(255, 255, 255)",
+
+ "code": "rgb(218, 16, 57)",
+
+ "control-radius": "4px",
+ "control-radius-small": "2px",
+ "control-border-width": "1px",
+ "control-height": "40px",
+ "control-line-height": "24px",
+ "control-padding-vertical": "7px",
+ "control-padding-horizontal": "11px",
+
+ "input-shadow": "rgba(10, 10, 10, 0.05) 0px 1px 2px 0px inset",
+
+ "size-small": "12px",
+ "size-normal": "16px",
+ "size-medium": "20px",
+ "size-large": "24px",
+
+ "weight-light": "300",
+ "weight-normal": "400",
+ "weight-medium": "500",
+ "weight-semibold": "600",
+ "weight-bold": "700",
+
+ "family-code": "monospace",
+
+ "viewports": {
+ "mobile": [320, 480],
+ "tablet": [769, 640],
+ "desktop": [1024, 800],
+ "widescreen": [1216, 900],
+ "fullhd": [1408, 1200]
+ },
+
+ "sizes": {
+ "1": 48,
+ "2": 40,
+ "3": 32,
+ "4": 24,
+ "5": 20,
+ "6": 16,
+ "7": 12,
+ "small": 12,
+ "normal": 16,
+ "medium": 20,
+ "large": 24
+ },
+
+ "just-sizes": ["small", "normal", "medium", "large"]
+ }
+}
diff --git a/docs/cypress/.gitignore b/docs/cypress/.gitignore
new file mode 100644
index 00000000..733b5fd6
--- /dev/null
+++ b/docs/cypress/.gitignore
@@ -0,0 +1,2 @@
+/screenshots
+/videos
diff --git a/docs/cypress/fixtures/example.json b/docs/cypress/fixtures/example.json
new file mode 100644
index 00000000..02e42543
--- /dev/null
+++ b/docs/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+ "name": "Using fixtures to represent data",
+ "email": "hello@cypress.io",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/docs/cypress/integration/.gitignore b/docs/cypress/integration/.gitignore
new file mode 100644
index 00000000..3a00336a
--- /dev/null
+++ b/docs/cypress/integration/.gitignore
@@ -0,0 +1,2 @@
+1-getting-started
+2-advanced-examples
diff --git a/docs/cypress/integration/base/generic.spec.js b/docs/cypress/integration/base/generic.spec.js
new file mode 100644
index 00000000..254b8266
--- /dev/null
+++ b/docs/cypress/integration/base/generic.spec.js
@@ -0,0 +1,147 @@
+import { familyPrimary } from "../utils";
+
+describe("Base/Generic", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/base/generic/");
+ });
+
+ it("has a correct html", () => {
+ cy.get("html").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
+ expect(cs.fontSize).to.equal("16px");
+ expect(cs.minWidth).to.equal("300px");
+ expect(cs.overflowX).to.equal("hidden");
+ expect(cs.overflowY).to.equal("scroll");
+ expect(cs.textRendering).to.equal("optimizelegibility");
+ expect(cs.textSizeAdjust).to.equal("100%");
+ expect(cs.webkitFontSmoothing).to.equal("antialiased");
+ });
+ });
+
+ it("has correct HTML5 elements", () => {
+ cy.get("article, aside, figure, footer, header, hgroup, section").then(
+ ($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ }
+ );
+ });
+
+ it("has correct form elements", () => {
+ cy.get("body, button, input, optgroup, select, textarea").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontFamily).to.contains("-apple-system");
+ expect(cs.fontFamily).to.contains("Helvetica");
+ expect(cs.fontFamily).to.contains("Arial");
+ expect(cs.fontFamily).to.contains("sans-serif");
+ });
+ });
+
+ it("has correct monospace elements", () => {
+ cy.get("pre, code").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontFamily).to.equal(Cypress.env("family-code"));
+ expect(cs.webkitFontSmoothing).to.equal("auto");
+ });
+ });
+
+ it("has a correct body", () => {
+ cy.get("body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.fontFamily).to.contains("-apple-system");
+ expect(cs.fontFamily).to.contains("Helvetica");
+ expect(cs.fontFamily).to.contains("Arial");
+ expect(cs.fontFamily).to.contains("sans-serif");
+ expect(cs.fontSize).to.equal("16px");
+ expect(cs.fontWeight).to.equal("400");
+ expect(cs.lineHeight).to.equal("24px");
+ });
+ });
+
+ it("has a correct a", () => {
+ cy.get("a").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("link"));
+ expect(cs.cursor).to.equal("pointer");
+ expect(cs.textDecorationLine).to.equal("none");
+ });
+ });
+
+ it("has a correct code", () => {
+ cy.get("code").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.color).to.equal(Cypress.env("code"));
+ });
+ });
+
+ it("has a correct hr", () => {
+ cy.get("hr").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.borderStyle).to.equal("none");
+ expect(cs.display).to.equal("block");
+ expect(cs.height).to.equal("2px");
+ expect(cs.margin).to.equal("24px 0px");
+ });
+ });
+
+ it("has a correct img", () => {
+ cy.get("img").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("28px");
+ expect(cs.width).to.equal("112px");
+ });
+ });
+
+ it("has a correct checkbox", () => {
+ cy.get("input[type='checkbox']").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.verticalAlign).to.equal("baseline");
+ });
+ });
+
+ it("has a correct radio", () => {
+ cy.get("input[type='radio']").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.verticalAlign).to.equal("baseline");
+ });
+ });
+
+ it("has a correct small", () => {
+ cy.get("small").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("14px");
+ });
+ });
+
+ it("has a correct fieldset", () => {
+ cy.get("fieldset").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderStyle).to.equal("none");
+ });
+ });
+
+ it("has a correct pre", () => {
+ cy.get("pre").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.fontSize).to.equal("14px");
+ expect(cs.overflowX).to.equal("auto");
+ expect(cs.padding).to.equal("20px 24px");
+ expect(cs.whiteSpace).to.equal("pre");
+ expect(cs.wordWrap).to.equal("normal");
+ });
+
+ cy.get("pre code").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.fontSize).to.equal("14px");
+ expect(cs.padding).to.equal("0px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/breadcrumb.spec.js b/docs/cypress/integration/components/breadcrumb.spec.js
new file mode 100644
index 00000000..e935b2fa
--- /dev/null
+++ b/docs/cypress/integration/components/breadcrumb.spec.js
@@ -0,0 +1,98 @@
+describe("Components/Breadcrumb", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/breadcrumb/");
+ });
+
+ it("has a Breadcrumb", () => {
+ cy.get(".breadcrumb").should("exist");
+ });
+
+ it("has a correct Breadcrumb", () => {
+ cy.get("#breadcrumb").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ });
+
+ cy.get("#breadcrumb li:nth-child(2) a").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("link"));
+ expect(cs.padding).to.equal("0px 12px");
+ });
+
+ cy.get("#breadcrumb li.is-active a").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.padding).to.equal("0px 12px");
+ });
+ });
+
+ it("has correct Breadcrumb alignments", () => {
+ cy.get("#breadcrumb-centered ul").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("center");
+ });
+
+ cy.get("#breadcrumb-right ul").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("flex-end");
+ });
+ });
+
+ it("has correct Breadcrumb sizes", () => {
+ cy.get("#breadcrumb-small").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes").small}px`);
+ });
+
+ cy.get("#breadcrumb-normal").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes").normal}px`);
+ });
+
+ cy.get("#breadcrumb-medium").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes").medium}px`);
+ });
+
+ cy.get("#breadcrumb-large").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes").large}px`);
+ });
+ });
+
+ it("has correct Breadcrumb separators", () => {
+ cy.get("#breadcrumb li:nth-child(2)").then(($) => {
+ const content = window
+ .getComputedStyle($[0], "before")
+ .getPropertyValue("content");
+ expect(content).to.equal('"/"');
+ });
+
+ cy.get("#breadcrumb-arrow li:nth-child(2)").then(($) => {
+ const content = window
+ .getComputedStyle($[0], "before")
+ .getPropertyValue("content");
+ expect(content).to.equal('"→"');
+ });
+
+ cy.get("#breadcrumb-bullet li:nth-child(2)").then(($) => {
+ const content = window
+ .getComputedStyle($[0], "before")
+ .getPropertyValue("content");
+ expect(content).to.equal('"•"');
+ });
+
+ cy.get("#breadcrumb-dot li:nth-child(2)").then(($) => {
+ const content = window
+ .getComputedStyle($[0], "before")
+ .getPropertyValue("content");
+ expect(content).to.equal('"·"');
+ });
+
+ cy.get("#breadcrumb-succeeds li:nth-child(2)").then(($) => {
+ const content = window
+ .getComputedStyle($[0], "before")
+ .getPropertyValue("content");
+ expect(content).to.equal('"≻"');
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/card.spec.js b/docs/cypress/integration/components/card.spec.js
new file mode 100644
index 00000000..30fba429
--- /dev/null
+++ b/docs/cypress/integration/components/card.spec.js
@@ -0,0 +1,76 @@
+describe("Components/Card", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/card/");
+ });
+
+ it("has a Card", () => {
+ cy.get(".card").should("exist");
+ });
+
+ it("has a correct Card", () => {
+ cy.get("#card").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.boxShadow).to.equal(
+ "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px"
+ );
+ });
+ });
+
+ it("has correct Card Item border-radius", () => {
+ cy.get("#card-only-content > .card-content:first-child").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderTopLeftRadius).to.equal("4px");
+ expect(cs.borderTopRightRadius).to.equal("4px");
+ });
+
+ cy.get("#card-only-content > .card-content:last-child").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomLeftRadius).to.equal("4px");
+ expect(cs.borderBottomRightRadius).to.equal("4px");
+ });
+ });
+
+ it("has correct Card Header", () => {
+ cy.get("#card-header-content > .card-header").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+ expect(cs.boxShadow).to.equal("rgba(10, 10, 10, 0.1) 0px 2px 4px 0px");
+ });
+
+ cy.get("#card-header-content .card-header-title").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.fontWeight).to.equal("700");
+ expect(cs.padding).to.equal("12px 16px");
+ });
+
+ cy.get("#card-header-content .card-header-icon").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("12px 16px");
+ });
+ });
+
+ it("has correct Card Content", () => {
+ cy.get("#card .card-content").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("24px");
+ });
+ });
+
+ it("has correct Card Footer", () => {
+ cy.get("#card .card-footer").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+ expect(cs.borderTopColor).to.equal(Cypress.env("grey-lightest"));
+ expect(cs.borderTopStyle).to.equal("solid");
+ expect(cs.borderTopWidth).to.equal("1px");
+ });
+
+ cy.get("#card .card-footer-item").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("12px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/dropdown.spec.js b/docs/cypress/integration/components/dropdown.spec.js
new file mode 100644
index 00000000..f9963ea9
--- /dev/null
+++ b/docs/cypress/integration/components/dropdown.spec.js
@@ -0,0 +1,64 @@
+describe("Components/Dropdown", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/dropdown/");
+ });
+
+ it("has a Dropdown", () => {
+ cy.get(".dropdown").should("exist");
+ });
+
+ it("has a correct Dropdown Content", () => {
+ cy.get("#dropdown .dropdown-content").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+ expect(cs.borderRadius).to.equal("4px");
+ expect(cs.boxShadow).to.equal(
+ "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px"
+ );
+ expect(cs.paddingBottom).to.equal("8px");
+ expect(cs.paddingTop).to.equal("8px");
+ });
+ });
+
+ it("has a correct Dropdown Menu", () => {
+ cy.get("#dropdown .dropdown-menu").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("none");
+ expect(cs.paddingTop).to.equal("4px");
+ expect(cs.position).to.equal("absolute");
+ expect(cs.zIndex).to.equal("20");
+ });
+
+ cy.get("#dropdown-active .dropdown-menu").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ });
+ });
+
+ it("has a correct Dropdown Item", () => {
+ cy.get("#dropdown .dropdown-item").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.display).to.equal("block");
+ });
+
+ cy.get("#dropdown a.dropdown-item").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("100%");
+ });
+
+ cy.get("#dropdown a.dropdown-item.is-active").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("link"));
+ expect(cs.color).to.equal(Cypress.env("link-invert"));
+ });
+ });
+
+ it("has a correct Dropdown Divider", () => {
+ cy.get("#dropdown .dropdown-divider").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("grey-lightest"));
+ expect(cs.height).to.equal("1px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/level.spec.js b/docs/cypress/integration/components/level.spec.js
new file mode 100644
index 00000000..f7d3c72b
--- /dev/null
+++ b/docs/cypress/integration/components/level.spec.js
@@ -0,0 +1,50 @@
+describe("Layout/Level", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/layout/level/");
+ });
+
+ it("has a Level", () => {
+ cy.get(".level").should("exist");
+ });
+
+ it("has a correct Level", () => {
+ cy.get("#level").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.display).to.equal("flex");
+ });
+ });
+
+ it("has a correct Level Item", () => {
+ cy.get("#level .level-item").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.display).to.equal("flex");
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ });
+
+ cy.get("#level-centered .level-item .title").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("0px");
+ });
+ });
+
+ it("has correct Level Left and Right", () => {
+ cy.get("#level .level-left").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.justifyContent).to.equal("flex-start");
+ });
+
+ cy.get("#level .level-right").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.justifyContent).to.equal("flex-end");
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/media.spec.js b/docs/cypress/integration/components/media.spec.js
new file mode 100644
index 00000000..27eb33a1
--- /dev/null
+++ b/docs/cypress/integration/components/media.spec.js
@@ -0,0 +1,52 @@
+describe("Components/Media", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/layout/media/");
+ });
+
+ it("has a Media", () => {
+ cy.get(".media").should("exist");
+ });
+
+ it("has a correct Media", () => {
+ cy.get("#media").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("flex-start");
+ expect(cs.display).to.equal("flex");
+ });
+ });
+
+ it("has a correct nested Media", () => {
+ cy.get("#media-nested .media-content .media + .media").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderTopColor).to.equal("rgba(219, 219, 219, 0.5)");
+ expect(cs.borderTopStyle).to.equal("solid");
+ expect(cs.borderTopWidth).to.equal("1px");
+ expect(cs.marginTop).to.equal("8px");
+ expect(cs.paddingTop).to.equal("8px");
+ });
+ });
+
+ it("has a correct Media Content", () => {
+ cy.get("#media .media-content").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("1");
+ });
+ });
+
+ it("has correct Media Left and Right", () => {
+ cy.get("#media .media-left").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.marginRight).to.equal("16px");
+ });
+
+ cy.get("#media .media-right").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.marginLeft).to.equal("16px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/menu.spec.js b/docs/cypress/integration/components/menu.spec.js
new file mode 100644
index 00000000..6707a08c
--- /dev/null
+++ b/docs/cypress/integration/components/menu.spec.js
@@ -0,0 +1,68 @@
+describe("Components/Menu", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/menu/");
+ });
+
+ it("has a Menu", () => {
+ cy.get(".menu").should("exist");
+ });
+
+ it("has a correct Menu", () => {
+ cy.get("#menu").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("16px");
+ });
+ });
+
+ it("has a correct Menu List", () => {
+ cy.get("#menu .menu-list").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.lineHeight).to.equal("20px");
+ });
+
+ cy.get("#menu .menu-list a").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderRadius).to.equal("2px");
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.display).to.equal("block");
+ expect(cs.padding).to.equal("8px 12px");
+ });
+
+ cy.get("#menu .menu-list a.is-active").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("link"));
+ expect(cs.color).to.equal(Cypress.env("link-invert"));
+ });
+ });
+
+ it("has a correct nested Menu List", () => {
+ cy.get("#menu .menu-list ul").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderLeftColor).to.equal(Cypress.env("border"));
+ expect(cs.borderLeftStyle).to.equal("solid");
+ expect(cs.borderLeftWidth).to.equal("1px");
+ expect(cs.margin).to.equal("12px");
+ expect(cs.paddingLeft).to.equal("12px");
+ });
+ });
+
+ it("has a correct Menu Label", () => {
+ cy.get("#menu .menu-label").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-light"));
+ expect(cs.fontSize).to.equal("12px");
+ expect(cs.letterSpacing).to.equal("1.2px");
+ expect(cs.textTransform).to.equal("uppercase");
+ });
+
+ cy.get("#menu .menu-label:not(:first-child)").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginTop).to.equal("12px");
+ });
+
+ cy.get("#menu .menu-label:not(:last-child)").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("12px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/message.spec.js b/docs/cypress/integration/components/message.spec.js
new file mode 100644
index 00000000..78b70ce0
--- /dev/null
+++ b/docs/cypress/integration/components/message.spec.js
@@ -0,0 +1,74 @@
+describe("Components/Message", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/message/");
+ });
+
+ it("has a Message", () => {
+ cy.get(".message").should("exist");
+ });
+
+ it("has a correct Message", () => {
+ cy.get("#message").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.borderRadius).to.equal("4px");
+ expect(cs.fontSize).to.equal("16px");
+ });
+ });
+
+ it(`has a correct Message Header`, () => {
+ cy.get("#message .message-header").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("text"));
+ expect(cs.color).to.equal(Cypress.env("text-invert"));
+ expect(cs.display).to.equal("flex");
+ expect(cs.fontWeight).to.equal("700");
+ expect(cs.padding).to.equal("12px 16px");
+ });
+ });
+
+ it(`has a correct Message Body`, () => {
+ cy.get("#message-no-header .message-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(Cypress.env("border"));
+ expect(cs.borderRadius).to.equal("4px");
+ expect(cs.borderWidth).to.equal("0px 0px 0px 4px");
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.padding).to.equal("20px 24px");
+ });
+
+ cy.get("#message .message-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderTopLeftRadius).to.equal("0px");
+ expect(cs.borderTopRightRadius).to.equal("0px");
+ expect(cs.borderWidth).to.equal("0px");
+ });
+ });
+
+ it(`has correct color Messages`, () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#message-${name}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(lightColor);
+ });
+
+ cy.get(`#message-${name} .message-header`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#message-${name} .message-body`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(baseColor);
+ expect(cs.color).to.equal(darkColor);
+ });
+ }
+ });
+});
diff --git a/docs/cypress/integration/components/modal.spec.js b/docs/cypress/integration/components/modal.spec.js
new file mode 100644
index 00000000..f9d82cfa
--- /dev/null
+++ b/docs/cypress/integration/components/modal.spec.js
@@ -0,0 +1,95 @@
+describe("Components/Modal", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/modal/");
+ });
+
+ it("has a Modal", () => {
+ cy.get(".modal").should("exist");
+ });
+
+ it("has a correct Modal", () => {
+ cy.get("#modal").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("none");
+ expect(cs.flexDirection).to.equal("column");
+ expect(cs.overflow).to.equal("hidden");
+ expect(cs.position).to.equal("fixed");
+ expect(cs.zIndex).to.equal("40");
+ });
+
+ cy.get("#modal-active").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+ });
+
+ it("has a correct Modal Background", () => {
+ cy.get("#modal .modal-background").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal("rgba(10, 10, 10, 0.86)");
+ expect(cs.position).to.equal("absolute");
+ });
+ });
+
+ it("has a correct Modal Content", () => {
+ cy.get("#modal .modal-content").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.margin).to.equal("0px auto");
+ expect(cs.width).to.equal("640px");
+ });
+ });
+
+ it("has a correct Modal Card", () => {
+ cy.get("#modal-card .modal-card").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+
+ cy.get("#modal-card .modal-card-head, #modal-card .modal-card-foot").then(
+ ($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.display).to.equal("flex");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.padding).to.equal("20px");
+ expect(cs.position).to.equal("relative");
+ }
+ );
+
+ cy.get("#modal-card .modal-card-head").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
+ expect(cs.borderBottomStyle).to.equal("solid");
+ expect(cs.borderBottomWidth).to.equal("1px");
+ expect(cs.borderTopLeftRadius).to.equal("6px");
+ expect(cs.borderTopRightRadius).to.equal("6px");
+ });
+
+ cy.get("#modal-card .modal-card-foot").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderTopColor).to.equal(Cypress.env("border"));
+ expect(cs.borderTopStyle).to.equal("solid");
+ expect(cs.borderTopWidth).to.equal("1px");
+ expect(cs.borderBottomLeftRadius).to.equal("6px");
+ expect(cs.borderBottomRightRadius).to.equal("6px");
+ });
+
+ cy.get("#modal-card .modal-card-title").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.fontSize).to.equal("24px");
+ expect(cs.lineHeight).to.equal("24px");
+ });
+
+ cy.get("#modal-card .modal-card-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("1");
+ expect(cs.overflow).to.equal("auto");
+ expect(cs.padding).to.equal("20px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/navbar.spec.js b/docs/cypress/integration/components/navbar.spec.js
new file mode 100644
index 00000000..3f118661
--- /dev/null
+++ b/docs/cypress/integration/components/navbar.spec.js
@@ -0,0 +1,257 @@
+import { setMobile, setDesktop } from "../utils";
+
+describe("Components/Navbar", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
+ });
+
+ it("has a Navbar", () => {
+ cy.get(".navbar").should("exist");
+ });
+
+ it("has a correct Navbar", () => {
+ cy.get("#navbar").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+ expect(cs.minHeight).to.equal("52px");
+ expect(cs.position).to.equal("relative");
+ expect(cs.zIndex).to.equal("30");
+ });
+ });
+
+ it(`has correct color Navbars`, () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#navbar-${name}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#navbar-${name} .navbar-burger`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(invertColor);
+ });
+ }
+ });
+
+ it("has a correct Navbar Shadow", () => {
+ cy.get("#navbar-has-shadow").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.boxShadow).to.equal(
+ `${Cypress.env("white-ter")} 0px 2px 0px 0px`
+ );
+ });
+ });
+
+ it("has correct fixed Navbar", () => {
+ cy.get("#navbar-is-fixed-top").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.position).to.equal("fixed");
+ expect(cs.top).to.equal("0px");
+ expect(cs.zIndex).to.equal("30");
+ });
+
+ cy.get("#navbar-is-fixed-bottom").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.bottom).to.equal("0px");
+ expect(cs.position).to.equal("fixed");
+ expect(cs.zIndex).to.equal("30");
+ });
+ });
+
+ it("has a correct Navbar Item", () => {
+ cy.get("#navbar .navbar-start .navbar-item").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.lineHeight).to.equal("24px");
+ expect(cs.padding).to.equal("8px 12px");
+ });
+
+ cy.get("#navbar .navbar-start .navbar-item.has-dropdown").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("0px");
+ });
+ });
+
+ it("has a correct Navbar Link", () => {
+ cy.get("#navbar .navbar-link").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.paddingRight).to.equal("40px");
+ });
+ });
+
+ it("has a correct Navbar Drodpown", () => {
+ cy.get("#navbar .navbar-dropdown").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("14px");
+ expect(cs.paddingBottom).to.equal("8px");
+ expect(cs.paddingTop).to.equal("8px");
+ });
+
+ cy.get("#navbar .navbar-dropdown .navbar-item").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.paddingLeft).to.equal("24px");
+ expect(cs.paddingRight).to.equal("24px");
+ });
+ });
+
+ it("has a correct Navbar Divider", () => {
+ cy.get("#navbar .navbar-divider").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.height).to.equal("2px");
+ expect(cs.margin).to.equal("8px 0px");
+ });
+ });
+
+ it("has a correct Navbar Brand", () => {
+ cy.get("#navbar .navbar-brand").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("stretch");
+ expect(cs.display).to.equal("flex");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.minHeight).to.equal("52px");
+ });
+ });
+});
+
+// Mobile
+describe("Components/Navbar Mobile", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
+ setMobile();
+ });
+
+ it("has a Navbar", () => {
+ cy.get(".navbar").should("exist");
+ });
+
+ it("has a correct Navbar Container", () => {
+ cy.get("#navbar-container > .container").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ });
+ });
+
+ it("has a correct Navbar Item", () => {
+ cy.get("#navbar .navbar-start .navbar-item").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ });
+ });
+
+ it("has a correct active Navbar Item", () => {
+ cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-bis"));
+ });
+ });
+
+ it("has a correct Navbar Burger", () => {
+ cy.get("#navbar .navbar-burger").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.appearance).to.equal("none");
+ });
+ });
+
+ it("has a correct Navbar Menu", () => {
+ cy.get("#navbar .navbar-menu").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("none");
+ });
+ });
+
+ it("has a correct Navbar Divider", () => {
+ cy.get("#navbar .navbar-divider").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("none");
+ });
+ });
+});
+
+// Desktop
+describe("Components/Navbar Desktop", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
+ setDesktop();
+ });
+
+ it("has a Navbar", () => {
+ cy.get(".navbar").should("exist");
+ });
+
+ it("has a correct Navbar Container", () => {
+ cy.get("#navbar-container > .container").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+ });
+
+ it("has a correct Navbar Item", () => {
+ cy.get("#navbar .navbar-start .navbar-item").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+ });
+
+ it("has a correct active Navbar Item", () => {
+ cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+ });
+ });
+
+ it("has a correct Navbar Burger", () => {
+ cy.get("#navbar .navbar-burger").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.appearance).to.equal("none");
+ expect(cs.display).to.equal("none");
+ expect(cs.margin).to.equal("0px 0px 0px auto");
+ });
+ });
+
+ it("has a correct Navbar Menu", () => {
+ cy.get("#navbar .navbar-menu").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+ });
+
+ it("has a correct Navbar Divider", () => {
+ cy.get("#navbar .navbar-divider").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ });
+ });
+
+ it(`has correct color Navbars`, () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#navbar-${name} .navbar-link`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#navbar-${name} .navbar-dropdown a.navbar-item.is-active`).then(
+ ($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.color).to.equal(invertColor);
+ }
+ );
+ }
+ });
+});
diff --git a/docs/cypress/integration/components/pagination.spec.js b/docs/cypress/integration/components/pagination.spec.js
new file mode 100644
index 00000000..506a4cf1
--- /dev/null
+++ b/docs/cypress/integration/components/pagination.spec.js
@@ -0,0 +1,185 @@
+import { setMobile, setTablet } from "../utils";
+
+describe("Components/Pagination", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
+ });
+
+ it("has a Pagination", () => {
+ cy.get(".pagination").should("exist");
+ });
+
+ it("has a correct Pagination", () => {
+ cy.get("#pagination").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.display).to.equal("flex");
+ expect(cs.textAlign).to.equal("center");
+ });
+ });
+
+ it("has a correct Pagination", () => {
+ cy.get(
+ "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
+ ).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("16px");
+ expect(cs.justifyContent).to.equal("center");
+ expect(cs.paddingLeft).to.equal("12px");
+ expect(cs.paddingRight).to.equal("12px");
+ expect(cs.textAlign).to.equal("center");
+ });
+
+ cy.get(
+ "#pagination .pagination-previous:not(.is-disabled),#pagination .pagination-next:not(.is-disabled),#pagination .pagination-link:not(.is-current)"
+ ).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(Cypress.env("border"));
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.minWidth).to.equal("40px");
+ });
+
+ cy.get("#pagination .pagination-previous.is-disabled").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("border"));
+ expect(cs.borderColor).to.equal(Cypress.env("border"));
+ expect(cs.boxShadow).to.equal("none");
+ expect(cs.color).to.equal(Cypress.env("text-light"));
+ expect(cs.opacity).to.equal("0.5");
+ });
+
+ cy.get("#pagination .pagination-link.is-current").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("link"));
+ expect(cs.borderColor).to.equal(Cypress.env("link"));
+ expect(cs.color).to.equal(Cypress.env("link-invert"));
+ });
+
+ cy.get(
+ "#pagination .pagination-previous:not(.is-disabled),#pagination .pagination-next:not(.is-disabled)"
+ ).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.paddingLeft).to.equal("12px");
+ expect(cs.paddingRight).to.equal("12px");
+ expect(cs.whiteSpace).to.equal("nowrap");
+ });
+
+ cy.get("#pagination .pagination-ellipsis").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("grey-light"));
+ expect(cs.pointerEvents).to.equal("none");
+ });
+
+ cy.get("#pagination .pagination-list").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexWrap).to.equal("wrap");
+ });
+ });
+});
+
+// Mobile
+describe("Components/Pagination Mobile", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
+ setMobile();
+ });
+
+ it("has a correct Pagination", () => {
+ cy.get("#pagination").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexWrap).to.equal("wrap");
+ expect(cs.justifyContent).to.equal("center");
+ });
+
+ cy.get(
+ "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-list li"
+ ).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("1");
+ });
+
+ cy.get(
+ "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
+ ).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.margin).to.equal("4px");
+ });
+ });
+});
+
+// Tablet
+describe("Components/Navbar Tablet", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
+ setTablet();
+ });
+
+ it("has a correct Pagination", () => {
+ cy.get("#pagination .pagination-list").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("0px");
+ expect(cs.marginTop).to.equal("0px");
+ });
+
+ cy.get("#pagination .pagination-list").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("1");
+ expect(cs.justifyContent).to.equal("flex-start");
+ expect(cs.order).to.equal("1");
+ });
+
+ cy.get(
+ "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
+ ).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("0px");
+ expect(cs.marginTop).to.equal("0px");
+ });
+
+ cy.get("#pagination .pagination-previous").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.order).to.equal("2");
+ });
+
+ cy.get("#pagination .pagination-next").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.order).to.equal("3");
+ });
+ });
+
+ it("has a correct Pagination alignments", () => {
+ cy.get("#pagination-centered .pagination-previous").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.order).to.equal("1");
+ });
+
+ cy.get("#pagination-centered .pagination-list").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("center");
+ expect(cs.order).to.equal("2");
+ });
+
+ cy.get("#pagination-centered .pagination-next").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.order).to.equal("3");
+ });
+
+ cy.get("#pagination-right .pagination-previous").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.order).to.equal("1");
+ });
+
+ cy.get("#pagination-right .pagination-list").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("flex-end");
+ expect(cs.order).to.equal("3");
+ });
+
+ cy.get("#pagination-right .pagination-next").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.order).to.equal("2");
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/panel.spec.js b/docs/cypress/integration/components/panel.spec.js
new file mode 100644
index 00000000..97035fac
--- /dev/null
+++ b/docs/cypress/integration/components/panel.spec.js
@@ -0,0 +1,124 @@
+describe("Components/Panel", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/panel/");
+ });
+
+ it("has a Panel", () => {
+ cy.get(".panel").should("exist");
+ });
+
+ it("has a correct Panel", () => {
+ cy.get("#panel").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderRadius).to.equal("6px");
+ expect(cs.boxShadow).to.equal(
+ "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px"
+ );
+ expect(cs.fontSize).to.equal("16px");
+ });
+ });
+
+ it("has a correct Panel colors", () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#panel-${name} .panel-heading`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#panel-${name} .panel-tabs a.is-active`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomColor).to.equal(baseColor);
+ });
+
+ cy.get(`#panel-${name} .panel-block.is-active .panel-icon`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(baseColor);
+ });
+ }
+ });
+
+ it("has a correct Panel Heading", () => {
+ cy.get("#panel .panel-heading").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("grey-lightest"));
+ expect(cs.borderRadius).to.equal("6px 6px 0px 0px");
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.fontSize).to.equal("20px");
+ expect(cs.fontWeight).to.equal("700");
+ expect(cs.lineHeight).to.equal("25px");
+ expect(cs.padding).to.equal("15px 20px");
+ });
+ });
+
+ it("has correct Panel Tabs", () => {
+ cy.get("#panel .panel-tabs").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("flex-end");
+ expect(cs.display).to.equal("flex");
+ expect(cs.fontSize).to.equal("14px");
+ expect(cs.justifyContent).to.equal("center");
+ });
+
+ cy.get("#panel .panel-tabs a:not(.is-active)").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
+ expect(cs.borderBottomStyle).to.equal("solid");
+ expect(cs.borderBottomWidth).to.equal("1px");
+ expect(cs.marginBottom).to.equal("-1px");
+ expect(cs.padding).to.equal("7px");
+ });
+
+ cy.get("#panel .panel-tabs a.is-active").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomColor).to.equal(Cypress.env("grey-dark"));
+ expect(cs.color).to.equal(Cypress.env("grey-darker"));
+ });
+ });
+
+ it("has correct Panel Block", () => {
+ cy.get("#panel .panel-block").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.display).to.equal("flex");
+ expect(cs.justifyContent).to.equal("flex-start");
+ expect(cs.padding).to.equal("8px 12px");
+ });
+
+ cy.get("#panel .panel-block.is-wrapped").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexWrap).to.equal("wrap");
+ });
+
+ cy.get("#panel .panel-block.is-active").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderLeftColor).to.equal(Cypress.env("link"));
+ expect(cs.color).to.equal(Cypress.env("grey-darker"));
+ });
+
+ cy.get("#panel .panel-block.is-active .panel-icon").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("link"));
+ });
+
+ cy.get("#panel .panel-block:last-child").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomLeftRadius).to.equal("6px");
+ expect(cs.borderBottomRightRadius).to.equal("6px");
+ });
+ });
+
+ it("has correct Panel Icon", () => {
+ cy.get("#panel .panel-block:not(.is-active) .panel-icon").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-light"));
+ });
+ });
+});
diff --git a/docs/cypress/integration/components/tabs.spec.js b/docs/cypress/integration/components/tabs.spec.js
new file mode 100644
index 00000000..f3466bdc
--- /dev/null
+++ b/docs/cypress/integration/components/tabs.spec.js
@@ -0,0 +1,103 @@
+describe("Components/Tabs", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/components/tabs/");
+ });
+
+ it("has a Tabs", () => {
+ cy.get(".tabs").should("exist");
+ });
+
+ it("has a correct Tabs", () => {
+ cy.get("#tabs").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("stretch");
+ expect(cs.display).to.equal("flex");
+ expect(cs.fontSize).to.equal("16px");
+ expect(cs.justifyContent).to.equal("space-between");
+ expect(cs.whiteSpace).to.equal("nowrap");
+ });
+
+ cy.get("#tabs li:not(.is-active) a").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
+ expect(cs.borderBottomStyle).to.equal("solid");
+ expect(cs.borderBottomWidth).to.equal("1px");
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.display).to.equal("flex");
+ expect(cs.justifyContent).to.equal("center");
+ expect(cs.marginBottom).to.equal("-1px");
+ expect(cs.padding).to.equal("8px 16px");
+ expect(cs.verticalAlign).to.equal("top");
+ });
+
+ cy.get("#tabs li.is-active a").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomColor).to.equal(Cypress.env("link"));
+ expect(cs.color).to.equal(Cypress.env("link"));
+ });
+
+ cy.get("#tabs ul").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
+ expect(cs.borderBottomStyle).to.equal("solid");
+ expect(cs.borderBottomWidth).to.equal("1px");
+ expect(cs.display).to.equal("flex");
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.justifyContent).to.equal("flex-start");
+ });
+ });
+
+ it("has a correct Tabs alignments", () => {
+ cy.get("#tabs-centered ul").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("center");
+ });
+
+ cy.get("#tabs-right ul").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("flex-end");
+ });
+ });
+
+ it("has a correct Tabs lists alignments", () => {
+ cy.get("#tabs-lists ul.is-left").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.paddingRight).to.equal("12px");
+ });
+
+ cy.get("#tabs-lists ul.is-center").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flex).to.equal("0 0 auto");
+ expect(cs.justifyContent).to.equal("center");
+ expect(cs.paddingLeft).to.equal("12px");
+ expect(cs.paddingRight).to.equal("12px");
+ });
+
+ cy.get("#tabs-lists ul.is-right").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("flex-end");
+ expect(cs.paddingLeft).to.equal("12px");
+ });
+ });
+
+ it("has a correct boxed Tabs", () => {
+ cy.get("#tabs-boxed li:not(.is-active) a").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(Cypress.env("transparent"));
+ expect(cs.borderRadius).to.equal("4px 4px 0px 0px");
+ });
+
+ cy.get("#tabs-boxed li.is-active a").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
+ expect(cs.borderColor).to.equal(
+ `${Cypress.env("border")} ${Cypress.env("border")} ${Cypress.env(
+ "transparent"
+ )}`
+ );
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/box.spec.js b/docs/cypress/integration/elements/box.spec.js
new file mode 100644
index 00000000..d1c7c16b
--- /dev/null
+++ b/docs/cypress/integration/elements/box.spec.js
@@ -0,0 +1,22 @@
+describe("Elements/Box", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/box/");
+ });
+
+ it("has a Box element", () => {
+ cy.get(".box").should("exist");
+ });
+
+ it("has a correct Box", () => {
+ cy.get(".box").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
+ expect(cs.borderRadius).to.equal("6px");
+ expect(cs.boxShadow).to.equal(
+ "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px"
+ );
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.padding).to.equal("20px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/button.spec.js b/docs/cypress/integration/elements/button.spec.js
new file mode 100644
index 00000000..80228664
--- /dev/null
+++ b/docs/cypress/integration/elements/button.spec.js
@@ -0,0 +1,124 @@
+describe("Elements/Button", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/button/");
+ });
+
+ it("has a Button", () => {
+ cy.get(".button").should("exist");
+ });
+
+ it("has a correct Button", () => {
+ cy.get("#button-default").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+ expect(cs.borderColor).to.equal(Cypress.env("grey-lighter"));
+ expect(cs.borderRadius).to.equal("4px");
+ expect(cs.color).to.equal(Cypress.env("grey-darker"));
+ expect(cs.height).to.equal("40px");
+ expect(cs.lineHeight).to.equal("24px");
+ expect(cs.padding).to.equal("7px 16px");
+ });
+ });
+
+ // States
+ it("has a correct hover Button", () => {
+ cy.get("#button-hover").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+ expect(cs.borderColor).to.equal(Cypress.env("grey-light"));
+ expect(cs.borderRadius).to.equal("4px");
+ expect(cs.color).to.equal(Cypress.env("grey-darker"));
+ expect(cs.height).to.equal("40px");
+ expect(cs.lineHeight).to.equal("24px");
+ expect(cs.padding).to.equal("7px 16px");
+ });
+ });
+
+ it("has a correct focus Button", () => {
+ cy.get("#button-focus").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+ expect(cs.borderColor).to.equal(Cypress.env("blue"));
+ expect(cs.borderRadius).to.equal("4px");
+ expect(cs.boxShadow).to.equal(
+ `rgba${Cypress.env("blue").slice(3, -1)}, 0.25) 0px 0px 0px 2px`
+ );
+ expect(cs.color).to.equal(Cypress.env("grey-darker"));
+ expect(cs.height).to.equal("40px");
+ expect(cs.lineHeight).to.equal("24px");
+ expect(cs.padding).to.equal("7px 16px");
+ });
+ });
+
+ // Colors
+ it(`has correct color Buttons`, () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#button-${name}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.borderColor).to.equal(Cypress.env("transparent"));
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#button-${name}-hover`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(Cypress.env("transparent"));
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#button-${name}-focus`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.boxShadow).to.equal(
+ `rgba${baseColor.slice(3, -1)}, 0.25) 0px 0px 0px 2px`
+ );
+ expect(cs.borderColor).to.equal(Cypress.env("transparent"));
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#button-${name}-active`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(Cypress.env("transparent"));
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#button-${name}-inverted`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(invertColor);
+ expect(cs.color).to.equal(baseColor);
+ });
+
+ cy.get(`#button-${name}-outlined`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+ expect(cs.borderColor).to.equal(baseColor);
+ expect(cs.color).to.equal(baseColor);
+ });
+
+ cy.get(`#button-${name}-outlined-hover`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.borderColor).to.equal(baseColor);
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#button-${name}-inverted-outlined`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+ expect(cs.borderColor).to.equal(invertColor);
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#button-${name}-light`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(lightColor);
+ expect(cs.color).to.equal(darkColor);
+ });
+ }
+ });
+});
diff --git a/docs/cypress/integration/elements/container.spec.js b/docs/cypress/integration/elements/container.spec.js
new file mode 100644
index 00000000..89168e05
--- /dev/null
+++ b/docs/cypress/integration/elements/container.spec.js
@@ -0,0 +1,159 @@
+import { setMobile, setDesktop, setWidescreen, setFullHD } from "../utils";
+
+describe("Elements/Container", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/container/");
+ });
+
+ it("has a Container element", () => {
+ cy.get("#container").should("exist");
+ });
+
+ it("has fullwidth mobile Containers", () => {
+ setMobile();
+
+ let viewport;
+
+ cy.document()
+ .then((doc) => {
+ return doc.documentElement.getBoundingClientRect();
+ })
+ .then((rect) => {
+ viewport = rect;
+ });
+
+ cy.get("#container").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal(`${viewport.width}px`);
+ });
+
+ cy.get("#container-fluid").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal(`${viewport.width}px`);
+ });
+
+ cy.get("#container-max-desktop").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal(`${viewport.width}px`);
+ });
+
+ cy.get("#container-max-widescreen").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal(`${viewport.width}px`);
+ });
+ });
+
+ it("has centered desktop Containers", () => {
+ setDesktop();
+
+ let viewport;
+
+ cy.document()
+ .then((doc) => {
+ return doc.documentElement.getBoundingClientRect();
+ })
+ .then((rect) => {
+ viewport = rect;
+ });
+
+ cy.get("#container").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("960px");
+ });
+
+ cy.get("#container-widescreen").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal(`${viewport.width}px`);
+ });
+
+ cy.get("#container-fullhd").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal(`${viewport.width}px`);
+ });
+ });
+
+ it("has centered widescreen Containers", () => {
+ setWidescreen();
+
+ let viewport;
+
+ cy.document()
+ .then((doc) => {
+ return doc.documentElement.getBoundingClientRect();
+ })
+ .then((rect) => {
+ viewport = rect;
+ });
+
+ cy.get("#container").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("1152px");
+ });
+
+ cy.get("#container-max-desktop").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("960px");
+ });
+
+ cy.get("#container-widescreen").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("1152px");
+ });
+
+ cy.get("#container-fullhd").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal(`${viewport.width}px`);
+ });
+ });
+
+ it("has centered fullhd Containers", () => {
+ setFullHD();
+
+ cy.get("#container").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("1344px");
+ });
+
+ cy.get("#container-max-desktop").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("960px");
+ });
+
+ cy.get("#container-max-widescreen").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("1152px");
+ });
+
+ cy.get("#container-widescreen").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("1344px");
+ });
+
+ cy.get("#container-fullhd").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("1344px");
+ });
+ });
+
+ it("has a fullwidth fluid Container", () => {
+ cy.viewport(
+ Cypress.env("viewports").fullhd[0],
+ Cypress.env("viewports").fullhd[1]
+ );
+
+ let viewport;
+
+ cy.document()
+ .then((doc) => {
+ return doc.documentElement.getBoundingClientRect();
+ })
+ .then((rect) => {
+ viewport = rect;
+ });
+
+ cy.get("#container-fluid").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal(`${viewport.width}px`);
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/content.spec.js b/docs/cypress/integration/elements/content.spec.js
new file mode 100644
index 00000000..15644300
--- /dev/null
+++ b/docs/cypress/integration/elements/content.spec.js
@@ -0,0 +1,68 @@
+describe("Elements/Content", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/content/");
+ });
+
+ it("has a Content element", () => {
+ cy.get(".content").should("exist");
+ });
+
+ it("has correct headings", () => {
+ cy.get(".content h1").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("32px");
+ });
+
+ cy.get(".content h2").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("28px");
+ });
+
+ cy.get(".content h3").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("24px");
+ });
+
+ cy.get(".content h4").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("20px");
+ });
+
+ cy.get(".content h5").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("18px");
+ });
+
+ cy.get(".content h6").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("16px");
+ });
+ });
+
+ it("has a correct blockquote", () => {
+ cy.get(".content blockquote").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.padding).to.equal("20px 24px");
+ });
+ });
+
+ it("has correct lists", () => {
+ cy.get(".content ol li").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.listStyleType).to.equal("decimal");
+ });
+
+ cy.get(".content ul li").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.listStyleType).to.equal("disc");
+ });
+ });
+
+ it("has a correct pre", () => {
+ cy.get(".content pre").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("17.5px 21px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/icon.spec.js b/docs/cypress/integration/elements/icon.spec.js
new file mode 100644
index 00000000..3b6923fd
--- /dev/null
+++ b/docs/cypress/integration/elements/icon.spec.js
@@ -0,0 +1,60 @@
+describe("Elements/Icon", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/icon/");
+ });
+
+ it("has a .icon element", () => {
+ cy.get(".icon").should("exist");
+ });
+
+ it("has a correct Icon element", () => {
+ cy.get("#icon").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("24px");
+ expect(cs.width).to.equal("24px");
+ });
+ });
+
+ it("has correct Icon sizes", () => {
+ cy.get("#icon-small").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("16px");
+ expect(cs.width).to.equal("16px");
+ });
+
+ cy.get("#icon-normal").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("24px");
+ expect(cs.width).to.equal("24px");
+ });
+
+ cy.get("#icon-medium").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("32px");
+ expect(cs.width).to.equal("32px");
+ });
+
+ cy.get("#icon-large").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("48px");
+ expect(cs.width).to.equal("48px");
+ });
+ });
+
+ it("has correct Icon Text elements", () => {
+ cy.get("#icon-text").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("inline-flex");
+ });
+
+ cy.get("#icon-text > .icon").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginRight).to.equal("4px");
+ });
+
+ cy.get("#icon-text-div").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/image.spec.js b/docs/cypress/integration/elements/image.spec.js
new file mode 100644
index 00000000..d3e8be5c
--- /dev/null
+++ b/docs/cypress/integration/elements/image.spec.js
@@ -0,0 +1,63 @@
+describe("Elements/Image", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/image/");
+ });
+
+ it("has a Image", () => {
+ cy.get(".image").should("exist");
+ });
+
+ it("has a correct Image", () => {
+ cy.get("#image").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("128px");
+ expect(cs.width).to.equal("128px");
+ });
+ });
+
+ it("has a correct rounded Image", () => {
+ cy.get("#image-rounded img").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderRadius).to.equal("9999px");
+ });
+ });
+
+ it("has a correct Image dimensions", () => {
+ [16, 24, 32, 48, 64, 96, 128].forEach((dimension) => {
+ cy.get(`#image-${dimension}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal(`${dimension}px`);
+ expect(cs.width).to.equal(`${dimension}px`);
+ });
+ });
+ });
+
+ it("has correct Image ratios", () => {
+ [
+ ["1by1", 1],
+ ["5by4", 0.8],
+ ["4by3", 0.75],
+ ["3by2", 0.6666],
+ ["5by3", 0.6],
+ ["16by9", 0.5625],
+ ["2by1", 0.5],
+ ["3by1", 0.3333],
+ ["4by5", 1.25],
+ ["3by4", 1.3333],
+ ["2by3", 1.5],
+ ["3by5", 1.6666],
+ ["9by16", 1.7777],
+ ["1by2", 2],
+ ["1by3", 3],
+ ].forEach((ratio) => {
+ cy.get(`#image-${ratio[0]} img`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ const height = cs.height.substring(0, cs.height.length - 2);
+ expect(`${Math.round(height)}px`).to.equal(
+ `${Math.round(100 * ratio[1])}px`
+ );
+ expect(cs.width).to.equal("100px");
+ });
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/notification.spec.js b/docs/cypress/integration/elements/notification.spec.js
new file mode 100644
index 00000000..6ea467f5
--- /dev/null
+++ b/docs/cypress/integration/elements/notification.spec.js
@@ -0,0 +1,40 @@
+describe("Elements/Notification", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/notification/");
+ });
+
+ it("has a Notification element", () => {
+ cy.get("#notification").should("exist");
+ });
+
+ it("has a correct Notification", () => {
+ cy.get("#notification").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.borderRadius).to.equal("4px");
+ expect(cs.padding).to.equal("20px 40px 20px 24px");
+ });
+ });
+
+ it(`has correct color Notifications`, () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#notification-${name}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#notification-${name}-light`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(lightColor);
+ expect(cs.color).to.equal(darkColor);
+ });
+ }
+ });
+});
diff --git a/docs/cypress/integration/elements/other.spec.js b/docs/cypress/integration/elements/other.spec.js
new file mode 100644
index 00000000..6aef89e1
--- /dev/null
+++ b/docs/cypress/integration/elements/other.spec.js
@@ -0,0 +1,126 @@
+describe("Elements/Other", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/other/");
+ });
+
+ it("has a Block element", () => {
+ cy.get(".block").should("exist");
+ });
+
+ it("has a correct Block", () => {
+ cy.get("#block").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("24px");
+ });
+ });
+
+ it("has a Delete element", () => {
+ cy.get(".delete").should("exist");
+ });
+
+ it("has a correct Delete", () => {
+ cy.get("#delete").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal("rgba(10, 10, 10, 0.2)");
+ expect(cs.borderColor).to.equal(Cypress.env("grey-dark"));
+ expect(cs.borderStyle).to.equal("none");
+ expect(cs.borderRadius).to.equal("9999px");
+ expect(cs.borderWidth).to.equal("0px");
+ expect(cs.cursor).to.equal("pointer");
+ expect(cs.display).to.equal("inline-block");
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.fontSize).to.equal("0px");
+ expect(cs.height).to.equal("20px");
+ expect(cs.maxHeight).to.equal("20px");
+ expect(cs.maxWidth).to.equal("20px");
+ expect(cs.minHeight).to.equal("20px");
+ expect(cs.minWidth).to.equal("20px");
+ expect(cs.outlineColor).to.equal(Cypress.env("grey-dark"));
+ expect(cs.outlineStyle).to.equal("none");
+ expect(cs.outlineWidth).to.equal("0px");
+ expect(cs.pointerEvents).to.equal("auto");
+ expect(cs.position).to.equal("relative");
+ expect(cs.verticalAlign).to.equal("top");
+ expect(cs.width).to.equal("20px");
+
+ const before = window.getComputedStyle($[0], "before");
+ expect(before.backgroundColor).to.equal(Cypress.env("scheme-main"));
+ expect(before.content).to.equal('""');
+ expect(before.display).to.equal("block");
+ expect(before.height).to.equal("2px");
+ expect(before.left).to.equal("10px");
+ expect(before.position).to.equal("absolute");
+ expect(before.top).to.equal("10px");
+ expect(before.width).to.equal("10px");
+
+ const after = window.getComputedStyle($[0], "after");
+ expect(after.backgroundColor).to.equal(Cypress.env("scheme-main"));
+ expect(after.content).to.equal('""');
+ expect(after.display).to.equal("block");
+ expect(after.height).to.equal("10px");
+ expect(after.left).to.equal("10px");
+ expect(after.position).to.equal("absolute");
+ expect(after.top).to.equal("10px");
+ expect(after.width).to.equal("2px");
+ });
+ });
+
+ it("has a correct small Delete", () => {
+ cy.get("#delete-small").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("16px");
+ expect(cs.maxHeight).to.equal("16px");
+ expect(cs.maxWidth).to.equal("16px");
+ expect(cs.minHeight).to.equal("16px");
+ expect(cs.minWidth).to.equal("16px");
+ expect(cs.width).to.equal("16px");
+ });
+ });
+
+ it("has a correct medium Delete", () => {
+ cy.get("#delete-medium").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("24px");
+ expect(cs.maxHeight).to.equal("24px");
+ expect(cs.maxWidth).to.equal("24px");
+ expect(cs.minHeight).to.equal("24px");
+ expect(cs.minWidth).to.equal("24px");
+ expect(cs.width).to.equal("24px");
+ });
+ });
+
+ it("has a correct large Delete", () => {
+ cy.get("#delete-large").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("32px");
+ expect(cs.maxHeight).to.equal("32px");
+ expect(cs.maxWidth).to.equal("32px");
+ expect(cs.minHeight).to.equal("32px");
+ expect(cs.minWidth).to.equal("32px");
+ expect(cs.width).to.equal("32px");
+ });
+ });
+
+ it("has a correct Loader", () => {
+ cy.get("#loader").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.animationDuration).to.equal("0.5s");
+ expect(cs.animationIterationCount).to.equal("infinite");
+ expect(cs.animationName).to.equal("spinAround");
+ expect(cs.animationTimingFunction).to.equal("linear");
+ expect(cs.borderBottomColor).to.equal(Cypress.env("grey-lighter"));
+ expect(cs.borderLeftColor).to.equal(Cypress.env("grey-lighter"));
+ expect(cs.borderRightColor).to.equal(Cypress.env("transparent"));
+ expect(cs.borderTopColor).to.equal(Cypress.env("transparent"));
+ expect(cs.borderRadius).to.equal("9999px");
+ expect(cs.borderStyle).to.equal("solid");
+ expect(cs.borderWidth).to.equal("2px");
+ expect(cs.content).to.equal('""');
+ expect(cs.display).to.equal("block");
+ expect(cs.height).to.equal("16px");
+ expect(cs.position).to.equal("relative");
+ expect(cs.width).to.equal("16px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/progress.spec.js b/docs/cypress/integration/elements/progress.spec.js
new file mode 100644
index 00000000..7e475149
--- /dev/null
+++ b/docs/cypress/integration/elements/progress.spec.js
@@ -0,0 +1,38 @@
+describe("Elements/Progress", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/progress/");
+ });
+
+ it("has a Progress element", () => {
+ cy.get("#progress").should("exist");
+ });
+
+ it("has a correct Progress", () => {
+ cy.get("#progress").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal(`${Cypress.env("sizes").normal}px`);
+ });
+ });
+
+ it("has correct Progress sizes", () => {
+ cy.get("#progress-small").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal(`${Cypress.env("sizes").small}px`);
+ });
+
+ cy.get("#progress-normal").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal(`${Cypress.env("sizes").normal}px`);
+ });
+
+ cy.get("#progress-medium").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal(`${Cypress.env("sizes").medium}px`);
+ });
+
+ cy.get("#progress-large").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal(`${Cypress.env("sizes").large}px`);
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/table.spec.js b/docs/cypress/integration/elements/table.spec.js
new file mode 100644
index 00000000..a4ae23b3
--- /dev/null
+++ b/docs/cypress/integration/elements/table.spec.js
@@ -0,0 +1,53 @@
+describe("Elements/Table", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/table/");
+ });
+
+ it("has a Table element", () => {
+ cy.get("#table").should("exist");
+ });
+
+ it("has a correct Table", () => {
+ cy.get("#table").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ });
+
+ cy.get("#table tr.is-selected").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("primary"));
+ expect(cs.color).to.equal(Cypress.env("primary-invert"));
+ });
+ });
+
+ it("has a correct bordered Table", () => {
+ cy.get("#table-bordered th, #table-bordered td").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderWidth).to.equal("1px");
+ });
+ });
+
+ it("has a correct striped Table", () => {
+ cy.get("#table-striped tbody tr:not(.is-selected):nth-child(even)").then(
+ ($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-bis"));
+ }
+ );
+ });
+
+ it("has a correct narrow Table", () => {
+ cy.get("#table-narrow th, #table-narrow td").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("4px 8px");
+ });
+ });
+
+ it("has a correct fullwidth Table", () => {
+ cy.get("#table-fullwidth").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.width).to.equal("800px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/tag.spec.js b/docs/cypress/integration/elements/tag.spec.js
new file mode 100644
index 00000000..403ff809
--- /dev/null
+++ b/docs/cypress/integration/elements/tag.spec.js
@@ -0,0 +1,107 @@
+describe("Elements/Tag", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/tag/");
+ });
+
+ it("has a Tag", () => {
+ cy.get(".tag").should("exist");
+ });
+
+ it("has a correct Tag", () => {
+ cy.get("#tag").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.borderRadius).to.equal("4px");
+ expect(cs.color).to.equal(Cypress.env("grey-dark"));
+ expect(cs.fontSize).to.equal("12px");
+ expect(cs.height).to.equal("24px");
+ expect(cs.padding).to.equal("0px 9px");
+ });
+
+ cy.get("#tag-rounded").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderRadius).to.equal("9999px");
+ });
+ });
+
+ it("has a correct Tag sizes", () => {
+ cy.get("#tag-normal").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("12px");
+ expect(cs.height).to.equal("24px");
+ });
+
+ cy.get("#tag-medium").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("16px");
+ expect(cs.height).to.equal("32px");
+ });
+
+ cy.get("#tag-large").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("20px");
+ expect(cs.height).to.equal("40px");
+ });
+ });
+
+ // Colors
+ it(`has correct color Tags`, () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#tag-${name}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.color).to.equal(invertColor);
+ });
+
+ cy.get(`#tag-${name}-light`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(lightColor);
+ expect(cs.color).to.equal(darkColor);
+ });
+ }
+ });
+
+ it("has correct Tags containers", () => {
+ cy.get("#tags").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+
+ cy.get("#tags .tag").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("8px");
+ });
+
+ cy.get("#tags-medium .tag").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("16px");
+ });
+
+ cy.get("#tags-large .tag").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("20px");
+ });
+
+ cy.get("#tags-centered").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("center");
+ });
+
+ cy.get("#tags-right").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("flex-end");
+ });
+
+ cy.get("#tags-addons .tag:nth-child(2)").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderRadius).to.equal("0px");
+ expect(cs.marginRight).to.equal("0px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/elements/title.spec.js b/docs/cypress/integration/elements/title.spec.js
new file mode 100644
index 00000000..39a236bb
--- /dev/null
+++ b/docs/cypress/integration/elements/title.spec.js
@@ -0,0 +1,63 @@
+describe("Elements/Title", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/elements/title/");
+ });
+
+ it("has a Title", () => {
+ cy.get(".title").should("exist");
+ });
+
+ it("has a correct Title", () => {
+ cy.get("#title").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes")["3"]}px`);
+ expect(cs.fontWeight).to.equal("600");
+ expect(cs.lineHeight).to.equal(`${Cypress.env("sizes")["3"] * 1.125}px`);
+ });
+
+ cy.get("#title strong").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.fontWeight).to.equal("600");
+ });
+ });
+
+ it("has correct Title sizes", () => {
+ for (let i = 1; i <= 7; i++) {
+ cy.get(`#title-${i}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[i]}px`);
+ });
+ }
+ });
+
+ it("has a Subtitle", () => {
+ cy.get(".subtitle").should("exist");
+ });
+
+ it("has a correct Subtitle", () => {
+ cy.get("#subtitle").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes")["5"]}px`);
+ expect(cs.fontWeight).to.equal("400");
+ expect(cs.lineHeight).to.equal(`${Cypress.env("sizes")["5"] * 1.25}px`);
+ });
+
+ cy.get("#subtitle strong").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.fontWeight).to.equal("600");
+ });
+ });
+
+ it("has correct Subtitle sizes", () => {
+ for (let i = 1; i <= 7; i++) {
+ cy.get(`#subtitle-${i}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[i]}px`);
+ });
+ }
+ });
+});
diff --git a/docs/cypress/integration/form/checkbox-radio.spec.js b/docs/cypress/integration/form/checkbox-radio.spec.js
new file mode 100644
index 00000000..02db00da
--- /dev/null
+++ b/docs/cypress/integration/form/checkbox-radio.spec.js
@@ -0,0 +1,77 @@
+describe("Form/Checkbox", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/checkbox-radio/");
+ });
+
+ it("has a Checkbox", () => {
+ cy.get(".checkbox").should("exist");
+ });
+
+ it("has a correct Checkbox", () => {
+ cy.get("#checkbox").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.cursor).to.equal("pointer");
+ expect(cs.display).to.equal("inline-block");
+ expect(cs.lineHeight).to.equal("20px");
+ expect(cs.position).to.equal("relative");
+ });
+
+ cy.get("#checkbox input").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.cursor).to.equal("pointer");
+ });
+ });
+
+ it("has a correct disabled Checkbox", () => {
+ cy.get("#checkbox-disabled").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-light"));
+ expect(cs.cursor).to.equal("not-allowed");
+ });
+
+ cy.get("#checkbox-disabled input").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.cursor).to.equal("not-allowed");
+ });
+ });
+});
+
+describe("Form/Radio", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/checkbox-radio/");
+ });
+
+ it("has a Radio", () => {
+ cy.get(".radio").should("exist");
+ });
+
+ it("has a correct Radio", () => {
+ cy.get("#radio .radio").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.cursor).to.equal("pointer");
+ expect(cs.display).to.equal("inline-block");
+ expect(cs.lineHeight).to.equal("20px");
+ expect(cs.position).to.equal("relative");
+ });
+
+ cy.get("#radio input").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.cursor).to.equal("pointer");
+ });
+ });
+
+ it("has a correct disabled Radio", () => {
+ cy.get("#radio .radio[disabled]").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-light"));
+ expect(cs.cursor).to.equal("not-allowed");
+ });
+ });
+
+ it("has correct Radio spacing", () => {
+ cy.get("#radio .radio + .radio").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginLeft).to.equal("8px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/form/file.spec.js b/docs/cypress/integration/form/file.spec.js
new file mode 100644
index 00000000..1cfdbfd8
--- /dev/null
+++ b/docs/cypress/integration/form/file.spec.js
@@ -0,0 +1,156 @@
+describe("Form/File", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/file/");
+ });
+
+ it("has a File", () => {
+ cy.get(".file").should("exist");
+ });
+
+ it("has a correct File", () => {
+ cy.get("#file").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ expect(cs.justifyContent).to.equal("flex-start");
+ expect(cs.position).to.equal("relative");
+ });
+
+ cy.get("#file .file-input").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.opacity).to.equal("0");
+ expect(cs.position).to.equal("absolute");
+ });
+
+ cy.get("#file .file-cta, #file .file-name").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(Cypress.env("border"));
+ expect(cs.borderRadius).to.equal("4px");
+ });
+
+ cy.get("#file .file-cta").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main-ter"));
+ expect(cs.color).to.equal(Cypress.env("text"));
+ });
+
+ cy.get("#file .file-icon").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.display).to.equal("flex");
+ expect(cs.height).to.equal("16px");
+ expect(cs.justifyContent).to.equal("center");
+ expect(cs.width).to.equal("16px");
+ });
+ });
+
+ it(`has correct color File`, () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#file-${name} .file-cta`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.color).to.equal(invertColor);
+ });
+ }
+ });
+
+ it("has correct File sizes", () => {
+ cy.get("#file-small").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes").small}px`);
+ });
+
+ cy.get("#file-normal").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes").normal}px`);
+ });
+
+ cy.get("#file-medium").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes").medium}px`);
+ });
+
+ cy.get("#file-large").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes").large}px`);
+ });
+ });
+
+ it("has correct File With Name", () => {
+ cy.get("#file-with-name .file-cta").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomRightRadius).to.equal("0px");
+ expect(cs.borderTopRightRadius).to.equal("0px");
+ });
+
+ cy.get("#file-with-name .file-name").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(Cypress.env("border"));
+ expect(cs.borderStyle).to.equal("solid");
+ expect(cs.borderWidth).to.equal("1px 1px 1px 0px");
+ expect(cs.borderBottomLeftRadius).to.equal("0px");
+ expect(cs.borderTopLeftRadius).to.equal("0px");
+ expect(cs.display).to.equal("block");
+ expect(cs.overflow).to.equal("hidden");
+ });
+ });
+
+ it("has correct File Boxed", () => {
+ cy.get("#file-boxed .file-label").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexDirection).to.equal("column");
+ });
+
+ cy.get("#file-boxed .file-cta").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexDirection).to.equal("column");
+ expect(cs.padding).to.equal("16px 48px");
+ });
+
+ cy.get("#file-boxed .file-name").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderWidth).to.equal("0px 1px 1px");
+ });
+ });
+
+ it("has correct File Centered", () => {
+ cy.get("#file-centered").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("center");
+ });
+ });
+
+ it("has correct File Right", () => {
+ cy.get("#file-right").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("flex-end");
+ });
+
+ cy.get("#file-right .file-cta").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomLeftRadius).to.equal("0px");
+ expect(cs.borderTopLeftRadius).to.equal("0px");
+ });
+
+ cy.get("#file-right .file-name").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderBottomRightRadius).to.equal("0px");
+ expect(cs.borderTopRightRadius).to.equal("0px");
+ expect(cs.borderWidth).to.equal("1px 0px 1px 1px");
+ expect(cs.order).to.equal("-1");
+ });
+ });
+
+ it("has correct File fullwidth", () => {
+ cy.get("#file-fullwidth .file-name").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.maxWidth).to.equal("none");
+ });
+ });
+});
diff --git a/docs/cypress/integration/form/input-textarea.spec.js b/docs/cypress/integration/form/input-textarea.spec.js
new file mode 100644
index 00000000..087f4936
--- /dev/null
+++ b/docs/cypress/integration/form/input-textarea.spec.js
@@ -0,0 +1,153 @@
+describe("Form/Input", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/input-textarea/");
+ });
+
+ it("has a Input", () => {
+ cy.get(".input").should("exist");
+ });
+
+ it("has a correct Input", () => {
+ cy.get("#input").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.borderStyle).to.equal("solid");
+ expect(cs.borderWidth).to.equal("1px");
+ expect(cs.borderRadius).to.equal(Cypress.env("control-radius"));
+ expect(cs.boxShadow).to.equal(Cypress.env("input-shadow"));
+ expect(cs.display).to.equal("inline-flex");
+ expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
+ expect(cs.height).to.equal(Cypress.env("control-height"));
+ expect(cs.justifyContent).to.equal("flex-start");
+ expect(cs.lineHeight).to.equal(Cypress.env("control-line-height"));
+ expect(cs.paddingBottom).to.equal(
+ Cypress.env("control-padding-vertical")
+ );
+ expect(cs.paddingLeft).to.equal(
+ Cypress.env("control-padding-horizontal")
+ );
+ expect(cs.paddingRight).to.equal(
+ Cypress.env("control-padding-horizontal")
+ );
+ expect(cs.paddingTop).to.equal(Cypress.env("control-padding-vertical"));
+ expect(cs.position).to.equal("relative");
+ expect(cs.verticalAlign).to.equal("top");
+ });
+ });
+
+ it(`has correct color Input`, () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#input-${name}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(baseColor);
+ });
+ }
+ });
+
+ it("has correct Input sizes", () => {
+ for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
+ const size = Cypress.env("just-sizes")[i];
+
+ cy.get(`#input-${size}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
+ });
+ }
+ });
+
+ it("has a correct fullwidth Input", () => {
+ let viewport;
+
+ cy.document()
+ .then((doc) => {
+ return doc.documentElement.getBoundingClientRect();
+ })
+ .then((rect) => {
+ viewport = rect;
+ });
+
+ cy.get("#input-fullwidth").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ expect(cs.width).to.equal(`${viewport.width}px`);
+ });
+ });
+
+ it("has a correct fullwidth Input", () => {
+ cy.get("#input-inline").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("inline");
+ });
+ });
+
+ it("has a correct rounded Input", () => {
+ cy.get("#input-rounded").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderRadius).to.equal("9999px");
+ expect(cs.paddingLeft).to.equal("17px");
+ expect(cs.paddingRight).to.equal("17px");
+ });
+ });
+
+ it("has a correct static Input", () => {
+ cy.get("#input-static").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+ expect(cs.borderColor).to.equal(Cypress.env("transparent"));
+ expect(cs.boxShadow).to.equal("none");
+ expect(cs.paddingLeft).to.equal("0px");
+ expect(cs.paddingRight).to.equal("0px");
+ });
+ });
+});
+
+describe("Form/Textarea", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/input-textarea/");
+ });
+
+ it("has a Textarea", () => {
+ cy.get(".textarea").should("exist");
+ });
+
+ it("has a correct Textarea", () => {
+ cy.get("#textarea").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.borderStyle).to.equal("solid");
+ expect(cs.borderWidth).to.equal("1px");
+ expect(cs.borderRadius).to.equal(Cypress.env("control-radius"));
+ expect(cs.boxShadow).to.equal(Cypress.env("input-shadow"));
+ expect(cs.display).to.equal("block");
+ expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
+ expect(cs.justifyContent).to.equal("flex-start");
+ expect(cs.lineHeight).to.equal(Cypress.env("control-line-height"));
+ expect(cs.paddingBottom).to.equal(
+ Cypress.env("control-padding-horizontal")
+ );
+ expect(cs.paddingLeft).to.equal(
+ Cypress.env("control-padding-horizontal")
+ );
+ expect(cs.paddingRight).to.equal(
+ Cypress.env("control-padding-horizontal")
+ );
+ expect(cs.paddingTop).to.equal(Cypress.env("control-padding-horizontal"));
+ expect(cs.position).to.equal("relative");
+ expect(cs.resize).to.equal("vertical");
+ expect(cs.verticalAlign).to.equal("top");
+ });
+ });
+
+ it("has a correct Textarea fixed", () => {
+ cy.get("#textarea-fixed").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.resize).to.equal("none");
+ });
+ });
+});
diff --git a/docs/cypress/integration/form/select.spec.js b/docs/cypress/integration/form/select.spec.js
new file mode 100644
index 00000000..22b7c111
--- /dev/null
+++ b/docs/cypress/integration/form/select.spec.js
@@ -0,0 +1,86 @@
+describe("Form/Select", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/select/");
+ });
+
+ it("has a Select", () => {
+ cy.get(".select").should("exist");
+ });
+
+ it("has a correct Select", () => {
+ cy.get("#select").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("inline-block");
+ expect(cs.height).to.equal(Cypress.env("control-height"));
+ expect(cs.maxWidth).to.equal("100%");
+ expect(cs.position).to.equal("relative");
+ expect(cs.verticalAlign).to.equal("top");
+
+ const after = window.getComputedStyle($[0], "after");
+ expect(after.borderColor).to.equal(Cypress.env("link"));
+ });
+
+ cy.get("#select select").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.cursor).to.equal("pointer");
+ expect(cs.display).to.equal("block");
+ expect(cs.fontSize).to.equal("16px");
+ expect(cs.height).to.equal(Cypress.env("control-height"));
+ expect(cs.maxWidth).to.equal("100%");
+ });
+ });
+
+ it(`has correct color Select`, () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#select-${name}`).then(($) => {
+ const after = window.getComputedStyle($[0], "after");
+ expect(after.borderColor).to.equal(baseColor);
+ });
+
+ cy.get(`#select-${name} select`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderColor).to.equal(baseColor);
+ });
+ }
+ });
+
+ it("has correct Select sizes", () => {
+ for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
+ const size = Cypress.env("just-sizes")[i];
+
+ cy.get(`#select-${size}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
+ });
+ }
+ });
+
+ it("has a correct Select multiple", () => {
+ cy.get("#select-multiple").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.not.equal(Cypress.env("control-height"));
+ });
+
+ cy.get("#select-multiple select").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.cursor).to.equal("pointer");
+ expect(cs.display).to.equal("block");
+ expect(cs.fontSize).to.equal("16px");
+ expect(cs.height).to.not.equal(Cypress.env("control-height"));
+ expect(cs.maxWidth).to.equal("100%");
+ });
+ });
+
+ it("has a correct Select disabled", () => {
+ cy.get("#select-disabled").then(($) => {
+ const after = window.getComputedStyle($[0], "after");
+ expect(after.borderColor).to.equal(Cypress.env("text-light"));
+ });
+ });
+});
diff --git a/docs/cypress/integration/form/tools.spec.js b/docs/cypress/integration/form/tools.spec.js
new file mode 100644
index 00000000..0a6c7449
--- /dev/null
+++ b/docs/cypress/integration/form/tools.spec.js
@@ -0,0 +1,316 @@
+import { setDesktop } from "../utils";
+
+describe("Form/Label", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+ });
+
+ it("has a Label", () => {
+ cy.get(".label").should("exist");
+ });
+
+ it("has a correct Label", () => {
+ cy.get("#label").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text-strong"));
+ expect(cs.display).to.equal("block");
+ expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
+ expect(cs.fontWeight).to.equal(Cypress.env("weight-bold"));
+ });
+ });
+
+
+ it("has correct Label sizes", () => {
+ for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
+ const size = Cypress.env("just-sizes")[i];
+
+ cy.get(`#label-${size}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
+ });
+ }
+ });
+});
+
+describe("Form/Help", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+ });
+
+ it("has a Help", () => {
+ cy.get(".help").should("exist");
+ });
+
+ it("has a correct Help", () => {
+ cy.get("#help").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ expect(cs.fontSize).to.equal(Cypress.env("size-small"));
+ expect(cs.marginTop).to.equal("4px");
+ });
+ });
+
+
+ it("has correct Help colors", () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#help-${name}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(baseColor);
+ });
+ }
+ });
+});
+
+describe("Form/Field", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+ setDesktop();
+ });
+
+ it("has a Field", () => {
+ cy.get(".field").should("exist");
+ });
+
+ it("has a correct Field", () => {
+ cy.get("#field").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("12px");
+ });
+ });
+
+ it("has a correct Field with addons", () => {
+ cy.get("#field-has-addons").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ expect(cs.justifyContent).to.equal("flex-start");
+ });
+ });
+
+ it("has a correct Field with addons centered", () => {
+ cy.get("#field-has-addons-centered").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("center");
+ });
+ });
+
+ it("has a correct Field with addons right", () => {
+ cy.get("#field-has-addons-right").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("flex-end");
+ });
+ });
+
+ it("has a correct Field with addons fullwidth .control", () => {
+ cy.get("#field-has-addons-fullwidth .control").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("0");
+ });
+ });
+
+ it("has a correct Field grouped", () => {
+ cy.get("#field-is-grouped").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ expect(cs.justifyContent).to.equal("flex-start");
+ });
+ });
+
+ it("has a correct Field grouped centered", () => {
+ cy.get("#field-is-grouped-centered").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("center");
+ });
+ });
+
+ it("has a correct Field grouped right", () => {
+ cy.get("#field-is-grouped-right").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("flex-end");
+ });
+ });
+
+ it("has a correct Field grouped multiline", () => {
+ cy.get("#field-is-grouped-multiline").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexWrap).to.equal("wrap");
+ });
+ });
+
+ it("has a correct Field horizontal", () => {
+ cy.get("#field-is-horizontal").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+ });
+});
+
+describe("Form/Field Label", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+ setDesktop();
+ });
+
+ it("has a Field Label", () => {
+ cy.get(".field-label").should("exist");
+ });
+
+ it("has a correct Field Label", () => {
+ cy.get("#field-label").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexBasis).to.equal("0px");
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.textAlign).to.equal("right");
+ });
+
+ cy.get("#field-label .label").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("16px");
+ });
+ });
+
+ it("has correct Field Label sizes", () => {
+ for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
+ const size = Cypress.env("just-sizes")[i];
+
+ cy.get(`#field-label-${size}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ const sizeValue = Cypress.env("sizes")[size];
+ expect(cs.fontSize).to.equal(`${sizeValue}px`);
+ expect(cs.paddingTop).to.equal(`${sizeValue * 0.375}px`);
+ });
+ }
+ });
+});
+
+describe("Form/Field Body", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+ setDesktop();
+ });
+
+ it("has a Field Body", () => {
+ cy.get(".field-body").should("exist");
+ });
+
+ it("has a correct Field Body", () => {
+ cy.get("#field-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ expect(cs.flexBasis).to.equal("0px");
+ expect(cs.flexGrow).to.equal("5");
+ expect(cs.flexShrink).to.equal("1");
+ });
+
+ cy.get("#field-body .field").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("0px");
+ });
+
+ cy.get("#field-body > .field").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexShrink).to.equal("1");
+ });
+
+ cy.get("#field-body .field .field").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("0px");
+ });
+ });
+});
+
+describe("Form/Control", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+ setDesktop();
+ });
+
+ it("has a Control", () => {
+ cy.get(".control").should("exist");
+ });
+
+ it("has a correct Control", () => {
+ cy.get("#control").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.boxSizing).to.equal("border-box");
+ expect(cs.clear).to.equal("both");
+ expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
+ expect(cs.position).to.equal("relative");
+ expect(cs.textAlign).to.equal("start");
+ });
+ });
+
+ it("has a correct Control with icons left", () => {
+ cy.get("#control-has-icons-left .icon").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("grey-lighter"));
+ expect(cs.height).to.equal(Cypress.env("control-height"));
+ expect(cs.left).to.equal("0px");
+ expect(cs.pointerEvents).to.equal("none");
+ expect(cs.position).to.equal("absolute");
+ expect(cs.top).to.equal("0px");
+ expect(cs.width).to.equal(Cypress.env("control-height"));
+ expect(cs.zIndex).to.equal("4");
+ });
+ });
+
+ it("has a correct Control with icons right", () => {
+ cy.get("#control-has-icons-right .icon").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("grey-lighter"));
+ expect(cs.height).to.equal(Cypress.env("control-height"));
+ expect(cs.pointerEvents).to.equal("none");
+ expect(cs.position).to.equal("absolute");
+ expect(cs.right).to.equal("0px");
+ expect(cs.top).to.equal("0px");
+ expect(cs.width).to.equal(Cypress.env("control-height"));
+ expect(cs.zIndex).to.equal("4");
+ });
+ });
+
+ it("has a correct loading Control", () => {
+ cy.get("#control-loading").then(($) => {
+ const after = window.getComputedStyle($[0], "after");
+ expect(after.animationDuration).to.equal("0.5s");
+ expect(after.animationIterationCount).to.equal("infinite");
+ expect(after.animationName).to.equal("spinAround");
+ expect(after.animationTimingFunction).to.equal("linear");
+ expect(after.borderBottomColor).to.equal(Cypress.env("grey-lighter"));
+ expect(after.borderLeftColor).to.equal(Cypress.env("grey-lighter"));
+ expect(after.borderRightColor).to.equal(Cypress.env("transparent"));
+ expect(after.borderTopColor).to.equal(Cypress.env("transparent"));
+ expect(after.borderRadius).to.equal("9999px");
+ expect(after.borderStyle).to.equal("solid");
+ expect(after.borderWidth).to.equal("2px");
+ expect(after.content).to.equal('""');
+ expect(after.display).to.equal("block");
+ expect(after.height).to.equal("16px");
+ expect(after.position).to.equal("absolute");
+ expect(after.top).to.equal(`${0.625 * 16}px`);
+ expect(after.width).to.equal("16px");
+ expect(after.zIndex).to.equal("4");
+ });
+
+ cy.get("#control-loading-small").then(($) => {
+ const after = window.getComputedStyle($[0], "after");
+ expect(after.fontSize).to.equal(Cypress.env("size-small"));
+ });
+
+ cy.get("#control-loading-medium").then(($) => {
+ const after = window.getComputedStyle($[0], "after");
+ expect(after.fontSize).to.equal(Cypress.env("size-medium"));
+ });
+
+ cy.get("#control-loading-large").then(($) => {
+ const after = window.getComputedStyle($[0], "after");
+ expect(after.fontSize).to.equal(Cypress.env("size-large"));
+ });
+ });
+});
diff --git a/docs/cypress/integration/grid/columns.spec.js b/docs/cypress/integration/grid/columns.spec.js
new file mode 100644
index 00000000..8b8d2758
--- /dev/null
+++ b/docs/cypress/integration/grid/columns.spec.js
@@ -0,0 +1,242 @@
+import {
+ setMobile,
+ setTablet,
+ setDesktop,
+ setWidescreen,
+ setFullHD,
+} from "../utils";
+
+const SCREENS = [
+ ["-mobile", setMobile],
+ ["-tablet", setTablet],
+ ["-desktop", setDesktop],
+ ["-widescreen", setWidescreen],
+ ["-fullhd", setFullHD],
+];
+
+const WIDTHS = [
+ ["three-quarters", 0.75],
+ ["two-thirds", 0.6666],
+ ["half", 0.5],
+ ["one-third", 0.3333],
+ ["one-quarter", 0.25],
+ ["one-fifth", 0.2],
+ ["two-fifths", 0.4],
+ ["three-fifths", 0.6],
+ ["four-fifths", 0.8],
+];
+
+describe("Grid/Columns", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/grid/columns/");
+ setDesktop();
+ });
+
+ it("has Columns", () => {
+ cy.get(".columns").should("exist");
+ });
+
+ it("has correct Columns", () => {
+ cy.get("#columns").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ expect(cs.marginBottom).to.equal("12px");
+ expect(cs.marginLeft).to.equal("-12px");
+ expect(cs.marginRight).to.equal("-12px");
+ expect(cs.marginTop).to.equal("-12px");
+ });
+ });
+
+ it("has correct last Columns", () => {
+ cy.get("#columns-last").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("-12px");
+ });
+ });
+
+ it("has correct centered Columns", () => {
+ cy.get("#columns-centered").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.justifyContent).to.equal("center");
+ });
+ });
+
+ it("has correct gapless Columns", () => {
+ cy.get("#columns-gapless").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("24px");
+ expect(cs.marginLeft).to.equal("0px");
+ expect(cs.marginRight).to.equal("0px");
+ expect(cs.marginTop).to.equal("0px");
+ });
+
+ cy.get("#columns-gapless .column").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.margin).to.equal("0px");
+ expect(cs.padding).to.equal("0px");
+ });
+ });
+
+ it("has correct gapless last Columns", () => {
+ cy.get("#columns-gapless-last").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("0px");
+ });
+ });
+
+ it("has correct multiline Columns", () => {
+ cy.get("#columns-multiline").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexWrap).to.equal("wrap");
+ });
+ });
+
+ it("has correct vcentered Columns", () => {
+ cy.get("#columns-vcentered").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ });
+ });
+
+ // Responsiveness
+
+ it("has correct mobile Columns", () => {
+ setMobile();
+
+ cy.get("#columns-mobile").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+
+ setDesktop();
+
+ cy.get("#columns-mobile").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+ });
+
+ it("has correct desktop Columns", () => {
+ setMobile();
+
+ cy.get("#columns-desktop").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ });
+
+ setTablet();
+
+ cy.get("#columns-desktop").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ });
+
+ setDesktop();
+
+ cy.get("#columns-desktop").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ });
+ });
+});
+
+describe("Grid/Column", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/grid/columns/");
+ setTablet();
+ });
+
+ it("has a Column", () => {
+ cy.get(".column").should("exist");
+ });
+
+ it("has a correct Column", () => {
+ cy.get("#columns .column").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ expect(cs.flexBasis).to.equal("0px");
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("1");
+ expect(cs.padding).to.equal("12px");
+ });
+ });
+
+ it("has a correct Column sizes", () => {
+ SCREENS.forEach((screen) => {
+ const suffix = screen[0];
+ const fn = screen[1];
+
+ fn();
+
+ cy.get(`#columns-special${suffix}`).then(($) => {
+ const columnsWidth = $[0].clientWidth;
+
+ const $full = $.find(`.column.is-full${suffix}`);
+ const csfull = window.getComputedStyle($full[0]);
+ const actualFullWidth = csfull.width.substring(
+ 0,
+ csfull.width.length - 2
+ );
+ expect(csfull.flexBasis).to.equal("auto");
+ expect(csfull.flexGrow).to.equal("0");
+ expect(csfull.flexShrink).to.equal("0");
+ expect(`${Math.round(actualFullWidth)}px`).to.equal(
+ `${Math.round(columnsWidth)}px`
+ );
+
+ const $narrow = $.find(`.column.is-narrow${suffix}`);
+ const csnarrow = window.getComputedStyle($narrow[0]);
+ expect(csnarrow.flexBasis).to.equal("auto");
+ expect(csnarrow.flexGrow).to.equal("0");
+ expect(csnarrow.flexShrink).to.equal("0");
+
+ WIDTHS.forEach((width) => {
+ const name = width[0];
+ const factor = width[1];
+
+ const $1 = $.find(`.column.is-${name}${suffix}`);
+ const cs1 = window.getComputedStyle($1[0]);
+ const actualWidth = cs1.width.substring(0, cs1.width.length - 2);
+ expect(cs1.flexBasis).to.equal("auto");
+ expect(cs1.flexGrow).to.equal("0");
+ expect(cs1.flexShrink).to.equal("0");
+ expect(`${Math.round(actualWidth)}px`).to.equal(
+ `${Math.round(factor * columnsWidth)}px`
+ );
+
+ const $2 = $.find(`.column.is-offset-${name}${suffix}`);
+ const cs2 = window.getComputedStyle($2[0]);
+ const actualMarginLeft = cs2.marginLeft.substring(
+ 0,
+ cs2.marginLeft.length - 2
+ );
+ expect(`${Math.round(actualMarginLeft)}px`).to.equal(
+ `${Math.round(factor * columnsWidth)}px`
+ );
+
+ for (let i = 1; i <= 12; i++) {
+ const $3 = $.find(`.column.is-${i}${suffix}`);
+ const cs3 = window.getComputedStyle($3[0]);
+ const actualWidth = cs3.width.substring(0, cs3.width.length - 2);
+ expect(cs3.flexBasis).to.equal("auto");
+ expect(cs3.flexGrow).to.equal("0");
+ expect(cs3.flexShrink).to.equal("0");
+ expect(`${Math.round(actualWidth)}px`).to.equal(
+ `${Math.round((i / 12) * columnsWidth)}px`
+ );
+
+ const $4 = $.find(`.column.is-offset-${i}${suffix}`);
+ const cs4 = window.getComputedStyle($4[0]);
+ const actualMarginLeft = cs4.marginLeft.substring(
+ 0,
+ cs4.marginLeft.length - 2
+ );
+ expect(`${Math.round(actualMarginLeft)}px`).to.equal(
+ `${Math.round((i / 12) * columnsWidth)}px`
+ );
+ }
+ });
+ });
+ });
+ });
+});
diff --git a/docs/cypress/integration/grid/tiles.spec.js b/docs/cypress/integration/grid/tiles.spec.js
new file mode 100644
index 00000000..72b48c14
--- /dev/null
+++ b/docs/cypress/integration/grid/tiles.spec.js
@@ -0,0 +1,96 @@
+import {
+ setMobile,
+ setTablet,
+ setDesktop,
+ setWidescreen,
+ setFullHD,
+} from "../utils";
+
+describe("Grid/Tiles", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/grid/tiles/");
+ setDesktop();
+ });
+
+ it("has a Tile", () => {
+ cy.get(".tile").should("exist");
+ });
+
+ it("has a correct Tile", () => {
+ cy.get("#tile").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("stretch");
+ expect(cs.display).to.equal("flex");
+ expect(cs.flexBasis).to.equal("0px");
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("1");
+ expect(cs.minHeight).to.equal("min-content");
+ });
+ });
+
+ it("has a correct ancestor Tile", () => {
+ cy.get("#tile-ancestor").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("12px");
+ expect(cs.marginLeft).to.equal("-12px");
+ expect(cs.marginRight).to.equal("-12px");
+ expect(cs.marginTop).to.equal("-12px");
+ });
+ });
+
+ it("has a correct last ancestor Tile", () => {
+ cy.get("#tile-ancestor-last").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("-12px");
+ expect(cs.marginLeft).to.equal("-12px");
+ expect(cs.marginRight).to.equal("-12px");
+ expect(cs.marginTop).to.equal("-12px");
+ });
+ });
+
+ it("has a correct parent Tile", () => {
+ cy.get("#tile-parent").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("12px");
+ });
+ });
+
+ it("has a correct vertical Tile", () => {
+ cy.get("#tile-vertical").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexDirection).to.equal("column");
+ });
+ });
+
+ it("has a correct child Tile", () => {
+ cy.get("#tile-child").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("0px");
+ expect(cs.marginLeft).to.equal("0px");
+ expect(cs.marginRight).to.equal("0px");
+ expect(cs.marginTop).to.equal("0px");
+ });
+ });
+
+ it("has a correct vertical child Tile", () => {
+ cy.get("#tile-vertical-child").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.marginBottom).to.equal("24px");
+ });
+ });
+
+ it("has a correct Tile sizes", () => {
+ for (let i = 1; i <= 12; i++) {
+ cy.get(`#tile-${i}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ const actualWidth = cs.width.substring(0, cs.width.length - 2);
+ expect(cs.flexBasis).to.equal("auto");
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ expect(`${Math.round(actualWidth)}px`).to.equal(
+ `${Math.round((i / 12) * 1000)}px`
+ );
+ });
+ }
+ });
+});
diff --git a/docs/cypress/integration/layout/footer.spec.js b/docs/cypress/integration/layout/footer.spec.js
new file mode 100644
index 00000000..82614bf3
--- /dev/null
+++ b/docs/cypress/integration/layout/footer.spec.js
@@ -0,0 +1,17 @@
+describe("Layout/Footer", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/layout/footer/");
+ });
+
+ it("has a Footer", () => {
+ cy.get(".footer").should("exist");
+ });
+
+ it("has a correct Footer", () => {
+ cy.get("#footer").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main-bis"));
+ expect(cs.padding).to.equal("48px 24px 96px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/layout/hero.spec.js b/docs/cypress/integration/layout/hero.spec.js
new file mode 100644
index 00000000..6784fc10
--- /dev/null
+++ b/docs/cypress/integration/layout/hero.spec.js
@@ -0,0 +1,150 @@
+import { setMobile, setDesktop } from "../utils";
+
+describe("Layout/Hero", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/layout/hero/");
+ setDesktop();
+ });
+
+ it("has a Hero", () => {
+ cy.get(".hero").should("exist");
+ });
+
+ it("has a correct Hero", () => {
+ cy.get("#hero").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("stretch");
+ expect(cs.display).to.equal("flex");
+ expect(cs.flexDirection).to.equal("column");
+ expect(cs.justifyContent).to.equal("space-between");
+ });
+ });
+
+ it("has a correct Hero colors", () => {
+ for (let i = 0; i < Cypress.env("color-names").length; i++) {
+ const name = Cypress.env("color-names")[i];
+ const baseColor = Cypress.env(name);
+ const invertColor = Cypress.env(`${name}-invert`);
+ const lightColor = Cypress.env(`${name}-light`);
+ const darkColor = Cypress.env(`${name}-dark`);
+
+ cy.get(`#hero-${name}`).then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(baseColor);
+ expect(cs.color).to.equal(invertColor);
+ });
+ }
+ });
+
+ it("has a correct small Hero", () => {
+ cy.get("#hero-small .hero-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("24px");
+ });
+ });
+
+ it("has a correct medium Hero", () => {
+ cy.get("#hero-medium .hero-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("144px 72px");
+ });
+ });
+
+ it("has a correct large Hero", () => {
+ cy.get("#hero-large .hero-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("288px 96px");
+ });
+ });
+
+ it("has a correct halfheight Hero", () => {
+ cy.get("#hero-halfheight").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.minHeight).to.equal(`${Cypress.env("viewports").desktop[1] / 2}px`);
+ });
+
+ cy.get("#hero-halfheight .hero-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.display).to.equal("flex");
+ });
+ });
+
+ it("has a correct fullheight Hero", () => {
+ cy.get("#hero-fullheight").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.minHeight).to.equal(`${Cypress.env("viewports").desktop[1]}px`);
+ });
+
+ cy.get("#hero-fullheight .hero-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.alignItems).to.equal("center");
+ expect(cs.display).to.equal("flex");
+ });
+ });
+
+ it("has a correct Hero with container", () => {
+ cy.get("#hero-with-container > .container").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("1");
+ });
+ });
+
+ it("has a Hero Buttons", () => {
+ cy.get(".hero-buttons").should("exist");
+ });
+
+ it("has a correct Hero Buttons", () => {
+ cy.get("#hero-buttons").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("flex");
+ expect(cs.justifyContent).to.equal("center");
+ expect(cs.marginTop).to.equal("24px");
+ });
+ });
+
+ it("has a Hero Head", () => {
+ cy.get(".hero-head").should("exist");
+ });
+
+ it("has a correct Hero Head", () => {
+ cy.get("#hero-head").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ });
+ });
+
+ it("has a Hero Foot", () => {
+ cy.get(".hero-foot").should("exist");
+ });
+
+ it("has a correct Hero Foot", () => {
+ cy.get("#hero-foot").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("0");
+ expect(cs.flexShrink).to.equal("0");
+ });
+ });
+
+ it("has a Hero Body", () => {
+ cy.get(".hero-body").should("exist");
+ });
+
+ it("has a correct Hero Body", () => {
+ cy.get("#hero-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.flexGrow).to.equal("1");
+ expect(cs.flexShrink).to.equal("0");
+ expect(cs.padding).to.equal("48px");
+ });
+
+ setMobile();
+
+ cy.get("#hero-body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("48px 24px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/layout/section.spec.js b/docs/cypress/integration/layout/section.spec.js
new file mode 100644
index 00000000..7cce873d
--- /dev/null
+++ b/docs/cypress/integration/layout/section.spec.js
@@ -0,0 +1,40 @@
+import { setMobile, setDesktop } from "../utils";
+
+describe("Layout/Section", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/layout/section/");
+ setDesktop();
+ });
+
+ it("has a Section", () => {
+ cy.get(".section").should("exist");
+ });
+
+ it("has a correct Section", () => {
+ cy.get("#section").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("48px");
+ });
+
+ setMobile();
+
+ cy.get("#section").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("48px 24px");
+ });
+ });
+
+ it("has a correct medium Section", () => {
+ cy.get("#section-medium").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("144px 72px");
+ });
+ });
+
+ it("has a correct large Section", () => {
+ cy.get("#section-large").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.padding).to.equal("288px 96px");
+ });
+ });
+});
diff --git a/docs/cypress/integration/utils.js b/docs/cypress/integration/utils.js
new file mode 100644
index 00000000..d00e749d
--- /dev/null
+++ b/docs/cypress/integration/utils.js
@@ -0,0 +1,36 @@
+export const setMobile = () => {
+ cy.viewport(
+ Cypress.env("viewports").mobile[0],
+ Cypress.env("viewports").mobile[1]
+ );
+};
+
+export const setTablet = () => {
+ cy.viewport(
+ Cypress.env("viewports").tablet[0],
+ Cypress.env("viewports").tablet[1]
+ );
+};
+
+export const setDesktop = () => {
+ cy.viewport(
+ Cypress.env("viewports").desktop[0],
+ Cypress.env("viewports").desktop[1]
+ );
+};
+
+export const setWidescreen = () => {
+ cy.viewport(
+ Cypress.env("viewports").widescreen[0],
+ Cypress.env("viewports").widescreen[1]
+ );
+};
+
+export const setFullHD = () => {
+ cy.viewport(
+ Cypress.env("viewports").fullhd[0],
+ Cypress.env("viewports").fullhd[1]
+ );
+};
+
+export const familyPrimary = 'system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
diff --git a/docs/cypress/plugins/index.js b/docs/cypress/plugins/index.js
new file mode 100644
index 00000000..59b2bab6
--- /dev/null
+++ b/docs/cypress/plugins/index.js
@@ -0,0 +1,22 @@
+///
+ Open JS example modal
+
+{% endcapture %}
+
+{% capture modal_js_trigger_bulma %}
+
+ Open JS example modal
+
+{% endcapture %}
+
+{% capture modal_js_code %}
+document.addEventListener('DOMContentLoaded', () => {
+ // Functions to open and close a modal
+ function openModal($el) {
+ $el.classList.add('is-active');
+ }
+
+ function closeModal($el) {
+ $el.classList.remove('is-active');
+ }
+
+ function closeAllModals() {
+ (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+ closeModal($modal);
+ });
+ }
+
+ // Add a click event on buttons to open a specific modal
+ (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+ const modal = $trigger.dataset.target;
+ const $target = document.getElementById(modal);
+
+ $trigger.addEventListener('click', () => {
+ openModal($target);
+ });
+ });
+
+ // Add a click event on various child elements to close the parent modal
+ (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+ const $target = $close.closest('.modal');
+
+ $close.addEventListener('click', () => {
+ closeModal($target);
+ });
+ });
+
+ // Add a keyboard event to close all modals
+ document.addEventListener('keydown', (event) => {
+ const e = event || window.event;
+
+ if (e.keyCode === 27) { // Escape key
+ closeAllModals();
+ }
+ });
+});
+{% endcapture %}
+
@@ -91,10 +165,10 @@ meta:
- Bulma does
not include any JavaScript interaction. You will have to implement the class toggle yourself.
+ Bulma does not include any JavaScript. However, this documentation provides a
JS implementation example that you are free to use.
@@ -122,6 +196,86 @@ meta:
{% highlight html %}{{ modal_card }}{% endhighlight %}
+
+ The Bulma package does not come with any JavaScript . Here is however an implementation example, which sets the click handlers for custom elements, in vanilla JavaScript.
+
+
+
+ There are 3 parts to this implementation:
+
+
+
+
+ add the HTML for the modal (this modal is hidden by default)
+
+
+ add the HTML for a button to trigger the modal (you can style this button however you want)
+
+
+ add the JS code to add the click event on the trigger to open the modal
+
+
+
+
1. Add the HTML for the modal
+
+
+ At the end of your page, before the closing </body> tag, at the following HTML snippet:
+
+
+
+ The id attribute's value must be unique .
+
+
+
2. Add the HTML for the trigger
+
+
+ Somewhere on your page, add the following HTML button:
+
+
+ {{ modal_js_trigger }}
+
+
+{% highlight html %}{{ modal_js_trigger }}{% endhighlight %}
+
+
+
+ You can style it however you want, as long as it has the js-modal-trigger CSS class and the appropriate data-target value. For example, you can add the button is-primary Bulma classes:
+
+
+ {{ modal_js_trigger_bulma }}
+
+
+
+
3. Add the JS for the trigger
+
+
+ In a script element (or in a seperate .js file), add the following JS code:
+
+
+
+ As long as you can toggle the is-active modifier class on the modal element, you can choose how you want to implement it.
+
+
@@ -224,3 +378,9 @@ meta:
+
+{{ modal_js_html }}
+
+
diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index efae333b..f2e64941 100644
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -565,24 +565,20 @@ document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
- // Check if there are any navbar burgers
- if ($navbarBurgers.length > 0) {
+ // Add a click event on each of them
+ $navbarBurgers.forEach( el => {
+ el.addEventListener('click', () => {
- // Add a click event on each of them
- $navbarBurgers.forEach( el => {
- el.addEventListener('click', () => {
+ // Get the target from the "data-target" attribute
+ const target = el.dataset.target;
+ const $target = document.getElementById(target);
- // Get the target from the "data-target" attribute
- const target = el.dataset.target;
- const $target = document.getElementById(target);
+ // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+ el.classList.toggle('is-active');
+ $target.classList.toggle('is-active');
- // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
- el.classList.toggle('is-active');
- $target.classList.toggle('is-active');
-
- });
});
- }
+ });
});
{% endcapture %}
diff --git a/docs/documentation/elements/block.html b/docs/documentation/elements/block.html
index 6d8778c1..c24f4138 100644
--- a/docs/documentation/elements/block.html
+++ b/docs/documentation/elements/block.html
@@ -214,7 +214,7 @@ meta:
- This prevents the last sibling to add unnecessary space at the bottom.
+ This prevents the last sibling from adding unnecessary space at the bottom.
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index ee9ce2a5..a0e8d077 100644
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -609,6 +609,43 @@ meta:
{% include elements/snippet.html content=buttons_small_normal_sizes_example %}
+
+
+
+ Name
+ Fixed size
+ Responsive (resize window to see in action)
+
+
+
+
+{% include elements/anchor.html name="Responsive sizes" %}
+
+{% include elements/new-tag.html version="0.9.4" %}
+
+
+
+ If you want different button sizes for each breakpoint, you can use Bulma's responsive buttons. Simply append the is-responsive modifier:
+
+
+
+ You can customise the sizes by overwriting the $button-responsive-sizes Sass variable.
+
+
- The Bulma package does not come with any JavaScript . Here is however an implementation example, which sets the click handler for Bulma delete all on the page, in vanilla JavaScript.
+ The Bulma package does not come with any JavaScript . Here is however an implementation example, which sets the click handler for Bulma delete elements, anywhere on the page, in vanilla JavaScript.
{% highlight html %}{{ notification_js_html }}{% endhighlight %}
diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index 7444b71a..d8696933 100644
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -833,7 +833,7 @@ variables_keys:
- To maintain the design evenly balanced, Bulma provides a very useful control container with which you can wrap the form controls.
+ To maintain an evenly balanced design, Bulma provides a very useful control container with which you can wrap the form controls.
form , use the field class as a container , to keep the spacing consistent.
@@ -1095,6 +1095,7 @@ variables_keys:
{% include elements/snippet.html content=disabled_fields_example %}
{% include components/variables.html
+ anchor_name='Control variables'
type='element'
variables_keys=page.variables_control_keys
custom_message=custom_message
@@ -1103,6 +1104,7 @@ variables_keys:
%}
{% include components/variables.html
+ anchor_name='Form variables'
type='element'
variables_keys=page.variables_keys
folder='elements'
diff --git a/docs/documentation/helpers/typography-helpers.html b/docs/documentation/helpers/typography-helpers.html
index 982892d8..87a62514 100644
--- a/docs/documentation/helpers/typography-helpers.html
+++ b/docs/documentation/helpers/typography-helpers.html
@@ -320,7 +320,7 @@ breadcrumb:
is-capitalizedTransforms the first character of each word to uppercase
+ Transforms the first character of each word to Uppercase
is-lowercase
is-uppercaseTransforms all characters to uppercase
+ Transforms all characters to UPPERCASE
is-italicTransforms all characters to italic
+ Transforms all characters to italic
{% include elements/new-tag.html version="0.9.3" %}is-underlined
- Underlines the textUnderlines the text
diff --git a/docs/documentation/utilities/control-mixins.html b/docs/documentation/utilities/control-mixins.html
index 1fab7cc1..8d7a1d7c 100644
--- a/docs/documentation/utilities/control-mixins.html
+++ b/docs/documentation/utilities/control-mixins.html
@@ -60,7 +60,7 @@ breadcrumb:
- Controls have a default font size of $size-normal also come in 3 additional sizes , which can be accessed via 3 additional mixins:
+ Controls have a default font size of $size-normal and also come in 3 additional sizes , which can be accessed via 3 additional mixins:
diff --git a/docs/images/amis/boostlikes.png b/docs/images/amis/boostlikes.png
new file mode 100644
index 00000000..51a7f853
Binary files /dev/null and b/docs/images/amis/boostlikes.png differ
diff --git a/docs/images/amis/boostlikes@2x.png b/docs/images/amis/boostlikes@2x.png
new file mode 100644
index 00000000..362a82aa
Binary files /dev/null and b/docs/images/amis/boostlikes@2x.png differ
diff --git a/docs/images/amis/casinoshunter.png b/docs/images/amis/casinoshunter.png
new file mode 100644
index 00000000..aae2c21a
Binary files /dev/null and b/docs/images/amis/casinoshunter.png differ
diff --git a/docs/images/amis/casinoshunter@2x.png b/docs/images/amis/casinoshunter@2x.png
new file mode 100644
index 00000000..56b5474f
Binary files /dev/null and b/docs/images/amis/casinoshunter@2x.png differ
diff --git a/docs/images/amis/casinozondercruks.png b/docs/images/amis/casinozondercruks.png
new file mode 100644
index 00000000..803baddd
Binary files /dev/null and b/docs/images/amis/casinozondercruks.png differ
diff --git a/docs/images/amis/casinozondercruks@2x.png b/docs/images/amis/casinozondercruks@2x.png
new file mode 100644
index 00000000..ad64f448
Binary files /dev/null and b/docs/images/amis/casinozondercruks@2x.png differ
diff --git a/docs/images/amis/cusl.png b/docs/images/amis/cusl.png
new file mode 100644
index 00000000..76dfe657
Binary files /dev/null and b/docs/images/amis/cusl.png differ
diff --git a/docs/images/amis/cusl@2x.png b/docs/images/amis/cusl@2x.png
new file mode 100644
index 00000000..76dfe657
Binary files /dev/null and b/docs/images/amis/cusl@2x.png differ
diff --git a/docs/images/amis/flyclipart.png b/docs/images/amis/flyclipart.png
new file mode 100644
index 00000000..a47d0ebc
Binary files /dev/null and b/docs/images/amis/flyclipart.png differ
diff --git a/docs/images/amis/flyclipart@2x.png b/docs/images/amis/flyclipart@2x.png
new file mode 100644
index 00000000..592e50d5
Binary files /dev/null and b/docs/images/amis/flyclipart@2x.png differ
diff --git a/docs/images/amis/jrop.png b/docs/images/amis/jrop.png
new file mode 100644
index 00000000..9119e669
Binary files /dev/null and b/docs/images/amis/jrop.png differ
diff --git a/docs/images/amis/jrop@2x.png b/docs/images/amis/jrop@2x.png
new file mode 100644
index 00000000..53f9daf1
Binary files /dev/null and b/docs/images/amis/jrop@2x.png differ
diff --git a/docs/images/amis/listcasino.png b/docs/images/amis/listcasino.png
new file mode 100644
index 00000000..a76702cf
Binary files /dev/null and b/docs/images/amis/listcasino.png differ
diff --git a/docs/images/amis/listcasino@2x.png b/docs/images/amis/listcasino@2x.png
new file mode 100644
index 00000000..c8093f77
Binary files /dev/null and b/docs/images/amis/listcasino@2x.png differ
diff --git a/docs/images/amis/newbitcoincasinos.png b/docs/images/amis/newbitcoincasinos.png
new file mode 100644
index 00000000..2c777e91
Binary files /dev/null and b/docs/images/amis/newbitcoincasinos.png differ
diff --git a/docs/images/amis/newbitcoincasinos@2x.png b/docs/images/amis/newbitcoincasinos@2x.png
new file mode 100644
index 00000000..c30e54f4
Binary files /dev/null and b/docs/images/amis/newbitcoincasinos@2x.png differ
diff --git a/docs/images/amis/newbitcoincasinos@2x.png.sb-aeee954e-cnJVUJ b/docs/images/amis/newbitcoincasinos@2x.png.sb-aeee954e-cnJVUJ
new file mode 100644
index 00000000..869b6e00
Binary files /dev/null and b/docs/images/amis/newbitcoincasinos@2x.png.sb-aeee954e-cnJVUJ differ
diff --git a/docs/images/amis/nycjackets.png b/docs/images/amis/nycjackets.png
new file mode 100644
index 00000000..af7d861c
Binary files /dev/null and b/docs/images/amis/nycjackets.png differ
diff --git a/docs/images/amis/nycjackets@2x.png b/docs/images/amis/nycjackets@2x.png
new file mode 100644
index 00000000..c90b3413
Binary files /dev/null and b/docs/images/amis/nycjackets@2x.png differ
diff --git a/docs/images/amis/papersowl.png b/docs/images/amis/papersowl.png
index aa2fd551..1cbf4b7f 100644
Binary files a/docs/images/amis/papersowl.png and b/docs/images/amis/papersowl.png differ
diff --git a/docs/images/amis/papersowl@2x.png b/docs/images/amis/papersowl@2x.png
index 686c2145..d5af20ee 100644
Binary files a/docs/images/amis/papersowl@2x.png and b/docs/images/amis/papersowl@2x.png differ
diff --git a/docs/images/amis/pmibet.png b/docs/images/amis/pmibet.png
index eda8b9f6..55326580 100644
Binary files a/docs/images/amis/pmibet.png and b/docs/images/amis/pmibet.png differ
diff --git a/docs/images/amis/pmibet@2x.png b/docs/images/amis/pmibet@2x.png
index 2f9d25fd..55326580 100644
Binary files a/docs/images/amis/pmibet@2x.png and b/docs/images/amis/pmibet@2x.png differ
diff --git a/docs/images/amis/qberror.png b/docs/images/amis/qberror.png
new file mode 100644
index 00000000..2b0c3f9e
Binary files /dev/null and b/docs/images/amis/qberror.png differ
diff --git a/docs/images/amis/qberror@2x.png b/docs/images/amis/qberror@2x.png
new file mode 100644
index 00000000..2b0c3f9e
Binary files /dev/null and b/docs/images/amis/qberror@2x.png differ
diff --git a/docs/images/amis/realcasinoscanada.png b/docs/images/amis/realcasinoscanada.png
new file mode 100644
index 00000000..69b1ada4
Binary files /dev/null and b/docs/images/amis/realcasinoscanada.png differ
diff --git a/docs/images/amis/realcasinoscanada@2x.png b/docs/images/amis/realcasinoscanada@2x.png
new file mode 100644
index 00000000..d3df842f
Binary files /dev/null and b/docs/images/amis/realcasinoscanada@2x.png differ
diff --git a/docs/images/amis/slotsempire.png b/docs/images/amis/slotsempire.png
new file mode 100644
index 00000000..c0dc1c5f
Binary files /dev/null and b/docs/images/amis/slotsempire.png differ
diff --git a/docs/images/amis/slotsempire@2x.png b/docs/images/amis/slotsempire@2x.png
new file mode 100644
index 00000000..0f5568a2
Binary files /dev/null and b/docs/images/amis/slotsempire@2x.png differ
diff --git a/docs/images/amis/theleathercity.png b/docs/images/amis/theleathercity.png
new file mode 100644
index 00000000..36e310e9
Binary files /dev/null and b/docs/images/amis/theleathercity.png differ
diff --git a/docs/images/amis/theleathercity@2x.png b/docs/images/amis/theleathercity@2x.png
new file mode 100644
index 00000000..e7fc3f09
Binary files /dev/null and b/docs/images/amis/theleathercity@2x.png differ
diff --git a/docs/images/amis/xoo.png b/docs/images/amis/xoo.png
new file mode 100644
index 00000000..afea2f8d
Binary files /dev/null and b/docs/images/amis/xoo.png differ
diff --git a/docs/images/amis/xoo@2x.png b/docs/images/amis/xoo@2x.png
new file mode 100644
index 00000000..c0b0d585
Binary files /dev/null and b/docs/images/amis/xoo@2x.png differ
diff --git a/docs/images/placeholders/1x1.png b/docs/images/placeholders/1x1.png
new file mode 100644
index 00000000..1914264c
Binary files /dev/null and b/docs/images/placeholders/1x1.png differ
diff --git a/docs/lib/main.js b/docs/lib/main.js
index de796acd..5ab6c143 100644
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -1,28 +1,28 @@
-'use strict';
+"use strict";
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener("DOMContentLoaded", function () {
// Search
var setSearchToggle = function setSearchToggle() {
- var icon = document.getElementById('searchIcon');
- var search = document.getElementById('search');
- var input = document.getElementById('algoliaSearch');
+ var icon = document.getElementById("searchIcon");
+ var search = document.getElementById("search");
+ var input = document.getElementById("algoliaSearch");
if (!icon) {
return;
}
- icon.addEventListener('click', function (event) {
- search.classList.toggle('bd-is-visible');
+ icon.addEventListener("click", function (event) {
+ search.classList.toggle("bd-is-visible");
- if (search.classList.contains('bd-is-visible')) {
+ if (search.classList.contains("bd-is-visible")) {
algoliaSearch.focus();
}
});
- window.addEventListener('keydown', function (event) {
- if (event.key === 'Escape') {
- return search.classList.remove('bd-is-visible');
+ window.addEventListener("keydown", function (event) {
+ if (event.key === "Escape") {
+ return search.classList.remove("bd-is-visible");
}
});
};
@@ -32,7 +32,7 @@ document.addEventListener('DOMContentLoaded', function () {
// Navbar
var setNavbarVisibility = function setNavbarVisibility() {
- var navbar = document.getElementById('navbar');
+ var navbar = document.getElementById("navbar");
if (!navbar) {
return;
@@ -40,19 +40,19 @@ document.addEventListener('DOMContentLoaded', function () {
var cs = getComputedStyle(navbar);
var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
- var brand = navbar.querySelector('.navbar-brand');
- var end = navbar.querySelector('.navbar-end');
- var search = navbar.querySelector('.bd-search');
- var original = document.getElementById('navbarStartOriginal');
- var clone = document.getElementById('navbarStartClone');
+ var brand = navbar.querySelector(".navbar-brand");
+ var end = navbar.querySelector(".navbar-end");
+ var search = navbar.querySelector(".bd-search");
+ var original = document.getElementById("navbarStartOriginal");
+ var clone = document.getElementById("navbarStartClone");
var rest = navbar.clientWidth - paddingX - brand.clientWidth - end.clientWidth - search.clientWidth;
var space = original.clientWidth;
- var all = document.querySelectorAll('#navbarStartClone > .bd-navbar-item');
- var base = document.querySelectorAll('#navbarStartClone > .bd-navbar-item-base');
- var more = document.querySelectorAll('#navbarStartOriginal > .bd-navbar-item-more');
- var dropdown = document.querySelectorAll('#navbarStartOriginal .bd-navbar-dropdown > .navbar-item');
+ var all = document.querySelectorAll("#navbarStartClone > .bd-navbar-item");
+ var base = document.querySelectorAll("#navbarStartClone > .bd-navbar-item-base");
+ var more = document.querySelectorAll("#navbarStartOriginal > .bd-navbar-item-more");
+ var dropdown = document.querySelectorAll("#navbarStartOriginal .bd-navbar-dropdown > .navbar-item");
var count = 0;
var totalWidth = 0;
@@ -96,17 +96,17 @@ document.addEventListener('DOMContentLoaded', function () {
if (howManyMore > 0) {
for (var i = 0; i < howManyMore; i++) {
- more[i].classList.add('bd-is-visible');
- dropdown[i].classList.add('bd-is-hidden');
+ more[i].classList.add("bd-is-visible");
+ dropdown[i].classList.add("bd-is-hidden");
}
}
for (var j = howManyMore; j < more.length; j++) {
- more[j].classList.remove('bd-is-visible');
+ more[j].classList.remove("bd-is-visible");
}
for (var k = howManyMore; k < dropdown.length; k++) {
- dropdown[k].classList.remove('bd-is-hidden');
+ dropdown[k].classList.remove("bd-is-hidden");
}
};
@@ -114,35 +114,35 @@ document.addEventListener('DOMContentLoaded', function () {
// Cookies
- var cookieBookModalName = 'bulma_closed_book_modal';
+ var cookieBookModalName = "bulma_closed_book_modal";
var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
// Dropdowns
- var $dropdowns = getAll('.dropdown:not(.is-hoverable)');
+ var $dropdowns = getAll(".dropdown:not(.is-hoverable)");
if ($dropdowns.length > 0) {
$dropdowns.forEach(function ($el) {
- $el.addEventListener('click', function (event) {
+ $el.addEventListener("click", function (event) {
event.stopPropagation();
- $el.classList.toggle('is-active');
+ $el.classList.toggle("is-active");
});
});
- document.addEventListener('click', function (event) {
+ document.addEventListener("click", function (event) {
closeDropdowns();
});
}
function closeDropdowns() {
$dropdowns.forEach(function ($el) {
- $el.classList.remove('is-active');
+ $el.classList.remove("is-active");
});
}
// Toggles
- var $burgers = getAll('.navbar-burger');
+ var $burgers = getAll(".navbar-burger");
if ($burgers.length > 0) {
$burgers.forEach(function ($el) {
@@ -150,11 +150,11 @@ document.addEventListener('DOMContentLoaded', function () {
return;
}
- $el.addEventListener('click', function () {
+ $el.addEventListener("click", function () {
var target = $el.dataset.target;
var $target = document.getElementById(target);
- $el.classList.toggle('is-active');
- $target.classList.toggle('is-active');
+ $el.classList.toggle("is-active");
+ $target.classList.toggle("is-active");
});
});
}
@@ -162,13 +162,13 @@ document.addEventListener('DOMContentLoaded', function () {
// Modals
var rootEl = document.documentElement;
- var $modals = getAll('.modal');
- var $modalButtons = getAll('.modal-button');
- var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
+ var $modals = getAll(".modal");
+ var $modalButtons = getAll(".modal-button");
+ var $modalCloses = getAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button");
if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) {
- $el.addEventListener('click', function () {
+ $el.addEventListener("click", function () {
var target = $el.dataset.target;
openModal(target);
});
@@ -177,7 +177,7 @@ document.addEventListener('DOMContentLoaded', function () {
if ($modalCloses.length > 0) {
$modalCloses.forEach(function ($el) {
- $el.addEventListener('click', function () {
+ $el.addEventListener("click", function () {
closeModals();
});
});
@@ -185,18 +185,18 @@ document.addEventListener('DOMContentLoaded', function () {
function openModal(target) {
var $target = document.getElementById(target);
- rootEl.classList.add('is-clipped');
- $target.classList.add('is-active');
+ rootEl.classList.add("is-clipped");
+ $target.classList.add("is-active");
}
function closeModals() {
- rootEl.classList.remove('is-clipped');
+ rootEl.classList.remove("is-clipped");
$modals.forEach(function ($el) {
- $el.classList.remove('is-active');
+ $el.classList.remove("is-active");
});
}
- document.addEventListener('keydown', function (event) {
+ document.addEventListener("keydown", function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
@@ -207,22 +207,22 @@ document.addEventListener('DOMContentLoaded', function () {
// Clipboard
- var $highlights = getAll('.highlight');
+ var $highlights = getAll(".highlight");
var itemsProcessed = 0;
if ($highlights.length > 0) {
$highlights.forEach(function ($el) {
var copyEl = 'Copy ';
var expandEl = 'Expand ';
- $el.insertAdjacentHTML('beforeend', copyEl);
+ $el.insertAdjacentHTML("beforeend", copyEl);
var $parent = $el.parentNode;
- if ($parent && $parent.classList.contains('bd-is-more')) {
+ if ($parent && $parent.classList.contains("bd-is-more")) {
var showEl = 'Show code
+
+
+
+
+ Sort by
+ Date
+ Likes
+
+
+
+