mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 10:14:29 -07:00
Fix #861
This commit is contained in:
Jeremy Thomas
@@ -45,8 +45,10 @@
|
||||
code
|
||||
padding: 1.25em 1.5em
|
||||
|
||||
#navbarJsExample .highlight pre
|
||||
max-height: none
|
||||
.highlight-full,
|
||||
#navbarJsExample
|
||||
.highlight pre
|
||||
max-height: none
|
||||
|
||||
$structure: $danger
|
||||
$structure-invert: $danger-invert
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -4,6 +4,90 @@ doc-tab: components
|
||||
doc-subtab: card
|
||||
---
|
||||
|
||||
{% capture card_example %}
|
||||
<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>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture card_header_example %}
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<a class="card-header-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-angle-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<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>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item">Save</a>
|
||||
<a class="card-footer-item">Edit</a>
|
||||
<a class="card-footer-item">Delete</a>
|
||||
</footer>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture card_title_example %}
|
||||
<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>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
@@ -51,123 +135,36 @@ doc-subtab: card
|
||||
|
||||
<hr>
|
||||
|
||||
{% capture card_example %}
|
||||
<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 class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_example}}
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-4">John Smith</p>
|
||||
<p class="subtitle is-6">@johnsmith</p>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_example}}{% endhighlight %}
|
||||
</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>
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_header_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_header_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{card_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
{% capture card_header_example %}
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<a class="card-header-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-angle-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<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 class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_title_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_title_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item">Save</a>
|
||||
<a class="card-footer-item">Edit</a>
|
||||
<a class="card-footer-item">Delete</a>
|
||||
</footer>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_header_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{card_header_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
{% capture card_title_example %}
|
||||
<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>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_title_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{card_title_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -6,26 +6,6 @@ doc-subtab: box
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Box</h1>
|
||||
<h2 class="subtitle">
|
||||
A white <strong>box</strong> to contain other elements
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
|
||||
<br>
|
||||
For example, you can include a media object:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture box_example %}
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
@@ -60,14 +40,32 @@ doc-subtab: box
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Box</h1>
|
||||
<h2 class="subtitle">
|
||||
A white <strong>box</strong> to contain other elements
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
|
||||
<br>
|
||||
For example, you can include a media object:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
{{box_example}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{box_example}}
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{box_example}}{% endhighlight %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user