mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add index customized
This commit is contained in:
Jeremy Thomas
parent
abaf686b25
commit
69899e57f5
@ -18,6 +18,9 @@
|
||||
{% if page.mdi %}
|
||||
<link rel="stylesheet" href="{{ site.data.icons.mdi }}">
|
||||
{% endif %}
|
||||
{% if page.route == 'index' %}
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
|
||||
{% endif %}
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/{{ site.docs_file }}.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
|
||||
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
|
||||
|
||||
@ -2,52 +2,83 @@
|
||||
|
||||
<section class="bd-easy section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<header class="bd-index-header bd-is-left">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ customize_link.path }}">
|
||||
So <strong>quick</strong> to customize
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Simply set your own Sass variables before importing Bulma
|
||||
</h4>
|
||||
</header>
|
||||
<header class="bd-index-header">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ customize_link.path }}">
|
||||
So <strong>quick</strong> to customize
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Simply set your own Sass variables before importing Bulma
|
||||
</h4>
|
||||
</header>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="highlight-full">
|
||||
{% highlight scss %}{% include snippets/customized.html %}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button</code>
|
||||
<div class="column is-6">
|
||||
<div class="bd-index-custom bd-is-before">
|
||||
<p class="bd-index-custom-title">Before</p>
|
||||
<div class="bd-index-custom-example">
|
||||
<h1 class="title">
|
||||
Bulma
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
|
||||
</p>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-link">Link</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="button">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary</code>
|
||||
|
||||
<div class="bd-index-custom bd-is-after">
|
||||
<p class="bd-index-custom-title">After</p>
|
||||
<div class="bd-index-custom-example">
|
||||
<h1 class="title">
|
||||
Bulma
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
|
||||
</p>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-link">Link</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="button is-primary">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary is-large</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary is-large">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary is-large is-loading</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary is-large is-loading">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<section class="hero is-fullheight is-primary">
|
||||
{% assign hero_link = site.data.links.by_id['layout-hero'] %}
|
||||
|
||||
<section class="bd-index-fullscreen hero is-fullheight is-light">
|
||||
<div class="hero-head">
|
||||
<div class="container">
|
||||
<div class="tabs is-centered">
|
||||
@ -10,16 +12,17 @@
|
||||
</div>
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-arrows-alt-v"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/layout/hero/">
|
||||
Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Include any content you want, it's always centered</h4>
|
||||
<div class="container">
|
||||
<header class="bd-index-header">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ hero_link.path }}">
|
||||
<strong>Fullscreen</strong> vertical centering
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Include any content you want, it's always centered
|
||||
</h4>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
25
docs/_includes/snippets/customized.html
Normal file
25
docs/_includes/snippets/customized.html
Normal file
@ -0,0 +1,25 @@
|
||||
// Import a Google Font
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
|
||||
|
||||
// Set your brand colors
|
||||
$purple: #8A4D76;
|
||||
$pink: #FA7C91;
|
||||
$brown: #757763;
|
||||
$beige-light: #D0D1CD;
|
||||
$beige-lighter: #EFF0EB;
|
||||
|
||||
// Update Bulma's global variables
|
||||
$family-sans-serif: "Nunito", serif;
|
||||
$grey-dark: $brown;
|
||||
$grey-light: $beige-light;
|
||||
$primary: $purple;
|
||||
$link: $pink;
|
||||
|
||||
// Update some of Bulma's component variables
|
||||
$control-border-width: 2px;
|
||||
$input-background-color: $beige-lighter;
|
||||
$input-border-color: transparent;
|
||||
$input-shadow: none;
|
||||
|
||||
// Import the rest of Bulma
|
||||
@import "../bulma";
|
||||
638
docs/_includes/test/features.html
Normal file
638
docs/_includes/test/features.html
Normal file
@ -0,0 +1,638 @@
|
||||
{% capture form %}
|
||||
<div class="field">
|
||||
<label class="label">Form label</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Textarea"></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
Checkbox
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="question">
|
||||
Radio
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="question">
|
||||
Buttons
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<a class="button is-link">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture box %}
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-reply"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-heart"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button %}
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control"><a class="button">Button</a></div>
|
||||
<div class="control"><a class="button is-white">White</a></div>
|
||||
<div class="control"><a class="button is-light">Light</a></div>
|
||||
<div class="control"><a class="button is-dark">Dark</a></div>
|
||||
<div class="control"><a class="button is-black">Black</a></div>
|
||||
<div class="control"><a class="button is-text">Text</a></div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control"><a class="button is-primary">Primary</a></div>
|
||||
<div class="control"><a class="button is-link">Link</a></div>
|
||||
<div class="control"><a class="button is-info">Info</a></div>
|
||||
<div class="control"><a class="button is-success">Success</a></div>
|
||||
<div class="control"><a class="button is-warning">Warning</a></div>
|
||||
<div class="control"><a class="button is-danger">Danger</a></div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture notification %}
|
||||
<div class="notification is-primary">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <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. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture progress %}
|
||||
<progress class="progress is-primary" value="30" max="100">30%</progress>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags %}
|
||||
<span class="tag is-black">Black</span>
|
||||
<span class="tag is-dark">Dark</span>
|
||||
<span class="tag is-light">Light</span>
|
||||
<span class="tag is-white">White</span>
|
||||
<span class="tag is-primary">Primary</span>
|
||||
<span class="tag is-link">Link</span>
|
||||
<span class="tag is-info">Info</span>
|
||||
<span class="tag is-success">Success</span>
|
||||
<span class="tag is-warning">Warning</span>
|
||||
<span class="tag is-danger">Danger</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture cards %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<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="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>#css</a> <a>#responsive</a>
|
||||
<br>
|
||||
<small>11:09 PM - 1 Jan 2016</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-half">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Jeff Atwood
|
||||
</p>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<span>
|
||||
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
|
||||
</span>
|
||||
</p>
|
||||
<p class="card-footer-item">
|
||||
<span>
|
||||
Share on <a href="#">Facebook</a>
|
||||
</span>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown %}
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<a class="button">
|
||||
<span>Dropdown button</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-content">
|
||||
<a class="dropdown-item">
|
||||
Dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item is-active">
|
||||
Active dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
Other item
|
||||
</a>
|
||||
<hr class="dropdown-divider">
|
||||
<a class="dropdown-item">
|
||||
With a divider
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message %}
|
||||
<article class="message is-primary">
|
||||
<div class="message-header">
|
||||
<p>Primary</p>
|
||||
<button class="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>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination %}
|
||||
<nav class="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link is-current">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link">86</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture panel %}
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">
|
||||
Repositories
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input is-small" type="text" placeholder="Search">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-search"></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"></i>
|
||||
</span>
|
||||
bulma
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
marksheet
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
minireset.css
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
jgthms.github.io
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-code-branch"></i>
|
||||
</span>
|
||||
daniellowtw/infBoard
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-code-branch"></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>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs %}
|
||||
<div class="tabs is-boxed">
|
||||
<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>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture media %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{ site.url }}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-reply"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-heart"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture menu %}
|
||||
<aside 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>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<h4 class="title is-4"><strong>Elements</strong></h4>
|
||||
</div>
|
||||
<div class="column is-10">
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ form }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/elements/box/">
|
||||
Box
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ box }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/elements/button/">
|
||||
Button
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ button }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/elements/notification/">
|
||||
Notification
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ notification }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/elements/progress/">
|
||||
Progress bar
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ progress }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/elements/tag/">
|
||||
Tags
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ tags }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<h4 class="title is-4"><strong>Components</strong></h4>
|
||||
</div>
|
||||
<div class="column is-10">
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ cards }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/components/dropdown/">
|
||||
Dropdown
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9" style="height: 16rem;">
|
||||
{{ dropdown }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/components/message/">
|
||||
Message
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ pagination }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/components/tabs/">
|
||||
Tabs
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ tabs }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/layout/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
{{ media }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4 bd-feature-title">
|
||||
<a href="{{ site.url }}/documentation/components/menu/">
|
||||
Menu
|
||||
</a>
|
||||
and
|
||||
<a href="{{ site.url }}/documentation/components/panel/">
|
||||
Panel
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ menu }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{{ panel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
31
docs/_includes/test/from-to.html
Normal file
31
docs/_includes/test/from-to.html
Normal file
@ -0,0 +1,31 @@
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="bd-fromto">
|
||||
<h1 class="title">
|
||||
Bulma
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
|
||||
</p>
|
||||
<div class="field">
|
||||
<label class="label">Form label</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-link">Link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -15,12 +15,71 @@
|
||||
strong
|
||||
color: $primary
|
||||
.subtitle
|
||||
color: $grey-light
|
||||
color: $grey-light !important
|
||||
strong
|
||||
color: currentColor
|
||||
&.bd-is-left
|
||||
text-align: left
|
||||
|
||||
// Customize
|
||||
|
||||
.bd-index-custom-title
|
||||
color: $grey-light
|
||||
|
||||
.bd-index-custom-example
|
||||
padding: 1rem
|
||||
.subtitle
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.bd-index-custom.bd-is-after
|
||||
color: $brown
|
||||
font-family: "Nunito", serif
|
||||
margin-top: 0.5rem
|
||||
a
|
||||
color: $pink
|
||||
&:hover
|
||||
color: #363636
|
||||
.subtitle
|
||||
color: $brown
|
||||
.input,
|
||||
.select select
|
||||
background-color: $beige-lighter
|
||||
border-color: transparent
|
||||
border-width: 2px
|
||||
box-shadow: none
|
||||
font-family: "Nunito", serif
|
||||
&:hover
|
||||
border-color: $beige-light
|
||||
&:focus
|
||||
border-color: $pink
|
||||
box-shadow: 0 0 0 0.125em rgba($pink, 0.25)
|
||||
.select
|
||||
&:not(.is-multiple):not(:hover)
|
||||
&::after
|
||||
border-color: $pink
|
||||
.button
|
||||
&.is-primary
|
||||
background-color: $mauve
|
||||
color: $white
|
||||
&:hover
|
||||
background-color: darken($mauve, 2.5%)
|
||||
&:active
|
||||
background-color: darken($mauve, 5%)
|
||||
&.is-link
|
||||
background-color: $pink
|
||||
color: $white
|
||||
&:hover
|
||||
background-color: darken($pink, 2.5%)
|
||||
&:active
|
||||
background-color: darken($pink, 5%)
|
||||
|
||||
// Fullscreen
|
||||
|
||||
.bd-index-fullscreen
|
||||
.tabs
|
||||
a
|
||||
color: $grey-light !important
|
||||
|
||||
// Columns
|
||||
|
||||
#grid
|
||||
|
||||
@ -12,6 +12,12 @@ $bleeding-red: #CA1F26
|
||||
$star: #FFD257
|
||||
$rss: #f26522
|
||||
|
||||
$mauve: #8A4D76;
|
||||
$pink: #FA7C91;
|
||||
$brown: #757763;
|
||||
$beige-light: #D0D1CD;
|
||||
$beige-lighter: #EFF0EB;
|
||||
|
||||
$carbon-width: 300px
|
||||
$carbon-height: 100px
|
||||
$main-spacing: 3rem
|
||||
|
||||
@ -10121,7 +10121,7 @@ svg {
|
||||
}
|
||||
|
||||
.bd-index-header .subtitle {
|
||||
color: #b5b5b5;
|
||||
color: #b5b5b5 !important;
|
||||
}
|
||||
|
||||
.bd-index-header .subtitle strong {
|
||||
@ -10132,6 +10132,90 @@ svg {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bd-index-custom-title {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
|
||||
.bd-index-custom-example {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.bd-index-custom-example .subtitle {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after {
|
||||
color: #757763;
|
||||
font-family: "Nunito", serif;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after a {
|
||||
color: #FA7C91;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after a:hover {
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .subtitle {
|
||||
color: #757763;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .input,
|
||||
.bd-index-custom.bd-is-after .select select {
|
||||
background-color: #EFF0EB;
|
||||
border-color: transparent;
|
||||
border-width: 2px;
|
||||
box-shadow: none;
|
||||
font-family: "Nunito", serif;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .input:hover,
|
||||
.bd-index-custom.bd-is-after .select select:hover {
|
||||
border-color: #D0D1CD;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .input:focus,
|
||||
.bd-index-custom.bd-is-after .select select:focus {
|
||||
border-color: #FA7C91;
|
||||
box-shadow: 0 0 0 0.125em rgba(250, 124, 145, 0.25);
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .select:not(.is-multiple):not(:hover)::after {
|
||||
border-color: #FA7C91;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .button.is-primary {
|
||||
background-color: #8A4D76;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .button.is-primary:hover {
|
||||
background-color: #82486f;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .button.is-primary:active {
|
||||
background-color: #7a4468;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .button.is-link {
|
||||
background-color: #FA7C91;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .button.is-link:hover {
|
||||
background-color: #fa7087;
|
||||
}
|
||||
|
||||
.bd-index-custom.bd-is-after .button.is-link:active {
|
||||
background-color: #f9637c;
|
||||
}
|
||||
|
||||
.bd-index-fullscreen .tabs a {
|
||||
color: #b5b5b5 !important;
|
||||
}
|
||||
|
||||
#grid .notification {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
22
docs/test.html
Normal file
22
docs/test.html
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bulma test page</title>
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/bulma-test.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
|
||||
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% include global/navbar.html %}
|
||||
{% include test/from-to.html %}
|
||||
{% include test/features.html %}
|
||||
<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
|
||||
<script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -41,8 +41,7 @@
|
||||
"docs-sass": "node-sass --output-style expanded docs/bulma-docs.sass docs/css/bulma-docs.css",
|
||||
"start": "npm run build-sass -- --watch",
|
||||
"start-docs": "npm run docs-sass -- --watch",
|
||||
"start-test": "npm run test-sass -- --watch",
|
||||
"test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css",
|
||||
"start-test": "npm run test-scss -- --watch",
|
||||
"test-scss": "node-sass --output-style expanded docs/bulma-test.scss docs/css/bulma-test.css"
|
||||
},
|
||||
"files": [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user