mirror of
https://github.com/jgthms/bulma
synced 2026-03-21 04:34:30 -07:00
Setup cypress (#3436)
* Setup Cypress tests for box and button * Add container tests * Add Cypress workflow * Use npm install * Update Cypress workflow * Add Jekyll build * Test other action * Test custom setup * Use other ruby action * Test without flag * Move cypress to docs folder * Record runs * Add Content, Icon, Image specs * Add Notification specs * Add Progress and Table specs * Add Tags specs * Add Title specs * Add breadcrumb specs * Add more specs * Add media specs * Add menu specs * Add modal specs * Add navbar specs * Add pagination specs * Add panel specs * Add tabs specs, Add form checkbox radio specs * Add utils * Add file specs * Add input textarea specs * Add select specs * Add form tools specs * Add other elements specs * Add footer and hero specs * Add Hero specs * Add section specs * Add grid specs * Add column sizes specs * Add tiles specs * Add generic specs * Fix generic tests * Make font family test looser * Remove system-ui test * Remove important flag * Fix disabled select color
This commit is contained in:
Jeremy Thomas
61
docs/cyp/components/breadcrumb.html
Normal file
61
docs/cyp/components/breadcrumb.html
Normal file
@@ -0,0 +1,61 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Breadcrumb
|
||||
---
|
||||
|
||||
{% capture content %}
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
{% endcapture %}
|
||||
|
||||
<nav id="breadcrumb" class="breadcrumb">
|
||||
<ul>
|
||||
{{ content }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav id="breadcrumb-centered" class="breadcrumb is-centered">
|
||||
<ul>
|
||||
{{ content }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav id="breadcrumb-right" class="breadcrumb is-right">
|
||||
<ul>
|
||||
{{ content }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
<nav id="breadcrumb-{{ size }}" class="breadcrumb is-{{ size }}">
|
||||
<ul>
|
||||
{{ content }}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endfor %}
|
||||
|
||||
<nav id="breadcrumb-arrow" class="breadcrumb has-arrow-separator">
|
||||
<ul>
|
||||
{{ content }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav id="breadcrumb-bullet" class="breadcrumb has-bullet-separator">
|
||||
<ul>
|
||||
{{ content }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav id="breadcrumb-dot" class="breadcrumb has-dot-separator">
|
||||
<ul>
|
||||
{{ content }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav id="breadcrumb-succeeds" class="breadcrumb has-succeeds-separator">
|
||||
<ul>
|
||||
{{ content }}
|
||||
</ul>
|
||||
</nav>
|
||||
75
docs/cyp/components/card.html
Normal file
75
docs/cyp/components/card.html
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Card
|
||||
---
|
||||
|
||||
{% capture header %}
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</header>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture content %}
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-4">John Smith</p>
|
||||
<p class="subtitle is-6">@johnsmith</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
|
||||
<a href="#">#css</a> <a href="#">#responsive</a>
|
||||
<br>
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture image %}
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture footer %}
|
||||
<footer class="card-footer">
|
||||
<a href="#" class="card-footer-item">Save</a>
|
||||
<a href="#" class="card-footer-item">Edit</a>
|
||||
<a href="#" class="card-footer-item">Delete</a>
|
||||
</footer>
|
||||
{% endcapture %}
|
||||
|
||||
<div style="width: 480px; margin: 2rem auto;">
|
||||
<div id="card" class="card">
|
||||
{{ image }}
|
||||
{{ content }}
|
||||
{{ footer }}
|
||||
</div>
|
||||
|
||||
<div id="card-only-content" class="card">
|
||||
{{ content }}
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<div id="card-header-content" class="card">
|
||||
{{ header }}
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
51
docs/cyp/components/dropdown.html
Normal file
51
docs/cyp/components/dropdown.html
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Dropdown
|
||||
---
|
||||
|
||||
{% capture dropdownTrigger %}
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
|
||||
<span>Dropdown button</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdownMenu %}
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-content">
|
||||
<a href="#" class="dropdown-item">
|
||||
Dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<a href="#" class="dropdown-item is-active">
|
||||
Active dropdown item
|
||||
</a>
|
||||
<div class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
</div>
|
||||
<a href="#" class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<hr class="dropdown-divider">
|
||||
<a href="#" class="dropdown-item">
|
||||
With a divider
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div id="dropdown" class="dropdown">
|
||||
{{ dropdownTrigger }}
|
||||
{{ dropdownMenu }}
|
||||
</div>
|
||||
|
||||
<div id="dropdown-active" class="dropdown is-active">
|
||||
{{ dropdownTrigger }}
|
||||
{{ dropdownMenu }}
|
||||
</div>
|
||||
44
docs/cyp/components/menu.html
Normal file
44
docs/cyp/components/menu.html
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Menu
|
||||
---
|
||||
|
||||
<aside id="menu" class="menu">
|
||||
<p class="menu-label">
|
||||
General
|
||||
</p>
|
||||
|
||||
<ul class="menu-list">
|
||||
<li><a>Dashboard</a></li>
|
||||
<li><a>Customers</a></li>
|
||||
</ul>
|
||||
|
||||
<p class="menu-label">
|
||||
Administration
|
||||
</p>
|
||||
|
||||
<ul class="menu-list">
|
||||
<li><a>Team Settings</a></li>
|
||||
<li>
|
||||
<a class="is-active">Manage Your Team</a>
|
||||
<ul>
|
||||
<li><a>Members</a></li>
|
||||
<li><a>Plugins</a></li>
|
||||
<li><a>Add a member</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a>Invitations</a></li>
|
||||
<li><a>Cloud Storage Environment Settings</a></li>
|
||||
<li><a>Authentication</a></li>
|
||||
</ul>
|
||||
|
||||
<p class="menu-label">
|
||||
Transactions
|
||||
</p>
|
||||
|
||||
<ul class="menu-list">
|
||||
<li><a>Payments</a></li>
|
||||
<li><a>Transfers</a></li>
|
||||
<li><a>Balance</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
46
docs/cyp/components/message.html
Normal file
46
docs/cyp/components/message.html
Normal file
@@ -0,0 +1,46 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Message
|
||||
---
|
||||
|
||||
{% capture messageHeader %}
|
||||
<div class="message-header">
|
||||
<p>Hello World</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture messageBody %}
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<article id="message" class="message">
|
||||
{{ messageHeader }}
|
||||
{{ messageBody }}
|
||||
</article>
|
||||
|
||||
<article id="message-no-header" class="message">
|
||||
{{ messageBody }}
|
||||
</article>
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
<article id="message-{{ size }}" class="message is-{{ size }}">
|
||||
{{ messageHeader }}
|
||||
{{ messageBody }}
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<article id="message-{{ color }}" class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
<p>{{ color | capitalize }}</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
48
docs/cyp/components/modal.html
Normal file
48
docs/cyp/components/modal.html
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Modal
|
||||
---
|
||||
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-card" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Modal title</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
|
||||
<section class="modal-card-body">
|
||||
<!-- Content ... -->
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-active" class="modal is-active">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
168
docs/cyp/components/navbar.html
Normal file
168
docs/cyp/components/navbar.html
Normal file
@@ -0,0 +1,168 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Navbar
|
||||
---
|
||||
|
||||
{% capture content %}
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-burger">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item">
|
||||
Home
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-active">
|
||||
Documentation
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link">
|
||||
More
|
||||
</a>
|
||||
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item">
|
||||
About
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Jobs
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Contact
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item">
|
||||
Report an issue
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a class="button is-light">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<nav id="navbar" class="navbar">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
<nav id="navbar-container" class="navbar">
|
||||
<div class="container">
|
||||
{{ content }}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav id="navbar-has-shadow" class="navbar has-shadow">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
<nav id="navbar-is-fixed-top" class="navbar is-fixed-top">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
<nav id="navbar-is-fixed-bottom" class="navbar is-fixed-bottom">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<nav id="navbar-{{ color }}" class="navbar is-{{ color }}">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
{% if include.light %}
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
{% else %}
|
||||
<img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="navbar-burger" data-target="navMenuColor{{ color }}-example">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuColor{{ color }}-example" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
Columns
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span>
|
||||
Tweet
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endfor %}
|
||||
70
docs/cyp/components/pagination.html
Normal file
70
docs/cyp/components/pagination.html
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Pagination
|
||||
---
|
||||
|
||||
{% capture content %}
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
{% endcapture %}
|
||||
|
||||
<nav id="pagination" class="pagination">
|
||||
<a class="pagination-previous is-disabled" title="This is the first page">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 1">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 45">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 47">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav id="pagination-centered" class="pagination is-centered">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
<nav id="pagination-right" class="pagination is-right">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
<nav id="pagination-rounded" class="pagination is-rounded">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
<nav id="pagination-small" class="pagination is-small">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
<nav id="pagination-medium" class="pagination is-medium">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
<nav id="pagination-large" class="pagination is-large">
|
||||
{{ content }}
|
||||
</nav>
|
||||
80
docs/cyp/components/panel.html
Normal file
80
docs/cyp/components/panel.html
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Panel
|
||||
---
|
||||
|
||||
{% capture content %}
|
||||
<p class="panel-heading">
|
||||
Repositories
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input" type="text" placeholder="Search">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
<a>Private</a>
|
||||
<a>Sources</a>
|
||||
<a>Forks</a>
|
||||
</p>
|
||||
<a class="panel-block is-active">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
bulma
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
marksheet
|
||||
</a>
|
||||
<a class="panel-block is-wrapped">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
minireset.css
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
jgthms.github.io
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
||||
</span>
|
||||
daniellowtw/infboard
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
||||
</span>
|
||||
mojs
|
||||
</a>
|
||||
<label class="panel-block">
|
||||
<input type="checkbox">
|
||||
remember me
|
||||
</label>
|
||||
<div class="panel-block">
|
||||
<button class="button is-link is-outlined is-fullwidth">
|
||||
Reset all filters
|
||||
</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<nav id="panel" class="panel">
|
||||
{{ content }}
|
||||
</nav>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<nav id="panel-{{ color }}" class="panel is-{{ color }}">
|
||||
{{ content }}
|
||||
</nav>
|
||||
{% endfor %}
|
||||
190
docs/cyp/components/tabs.html
Normal file
190
docs/cyp/components/tabs.html
Normal file
@@ -0,0 +1,190 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Tabs
|
||||
---
|
||||
|
||||
{% capture content_text %}
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture content_icons %}
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcapture %}
|
||||
|
||||
<div id="tabs-lists" class="tabs">
|
||||
<ul class="is-left">
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="is-center">
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="is-right">
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="tabs" class="tabs">
|
||||
{{ content_text }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-centered" class="tabs is-centered">
|
||||
{{ content_text }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-right" class="tabs is-right">
|
||||
{{ content_text }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-small" class="tabs is-small">
|
||||
{{ content_text }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-medium" class="tabs is-medium">
|
||||
{{ content_text }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-large" class="tabs is-large">
|
||||
{{ content_text }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-boxed" class="tabs is-boxed">
|
||||
{{ content_icons }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-toggle" class="tabs is-toggle">
|
||||
{{ content_icons }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-toggle-rounded" class="tabs is-toggle is-toggle-rounded">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="tabs-fullwidth" class="tabs is-fullwidth">
|
||||
<ul>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
|
||||
<span>Up</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span>Right</span>
|
||||
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="tabs-centered-boxed" class="tabs is-centered is-boxed">
|
||||
{{ content_icons }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-toggle-fullwidth" class="tabs is-toggle is-fullwidth">
|
||||
{{ content_icons }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-centered-boxed-medium" class="tabs is-centered is-boxed is-medium">
|
||||
{{ content_icons }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-toggle-fullwidth-large" class="tabs is-toggle is-fullwidth is-large">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
Reference in New Issue
Block a user