mirror of
https://github.com/jgthms/bulma
synced 2026-03-21 04:34:30 -07:00
Fix #861
This commit is contained in:
Jeremy Thomas
@@ -4,6 +4,7 @@
|
|||||||
|
|
||||||
### Issues closed
|
### Issues closed
|
||||||
|
|
||||||
|
* Fix #861 Box in hero as text and background white
|
||||||
* Fix #852 charset and version number
|
* Fix #852 charset and version number
|
||||||
* Fix #856 JavaScript `nav-burger` example
|
* Fix #856 JavaScript `nav-burger` example
|
||||||
* Fix #821 Notification strong color
|
* Fix #821 Notification strong color
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "bulma",
|
"name": "bulma",
|
||||||
"version": "0.4.2",
|
"version": "0.4.3",
|
||||||
"homepage": "http://bulma.io",
|
"homepage": "http://bulma.io",
|
||||||
"authors": [
|
"authors": [
|
||||||
"jgthms <bbxdesign@gmail.com>"
|
"jgthms <bbxdesign@gmail.com>"
|
||||||
|
|||||||
@@ -45,8 +45,10 @@
|
|||||||
code
|
code
|
||||||
padding: 1.25em 1.5em
|
padding: 1.25em 1.5em
|
||||||
|
|
||||||
#navbarJsExample .highlight pre
|
.highlight-full,
|
||||||
max-height: none
|
#navbarJsExample
|
||||||
|
.highlight pre
|
||||||
|
max-height: none
|
||||||
|
|
||||||
$structure: $danger
|
$structure: $danger
|
||||||
$structure-invert: $danger-invert
|
$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
|
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 %}
|
{% include subnav-components.html %}
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
@@ -51,123 +135,36 @@ doc-subtab: card
|
|||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
{% capture card_example %}
|
<div class="columns">
|
||||||
<div class="card">
|
<div class="column is-one-third">
|
||||||
<div class="card-image">
|
{{card_example}}
|
||||||
<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>
|
||||||
<div class="media-content">
|
<div class="column highlight-full">
|
||||||
<p class="title is-4">John Smith</p>
|
{% highlight html %}{{card_example}}{% endhighlight %}
|
||||||
<p class="subtitle is-6">@johnsmith</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<hr>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
||||||
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
|
<div class="columns">
|
||||||
<a>#css</a> <a>#responsive</a>
|
<div class="column is-one-third">
|
||||||
<br>
|
{{card_header_example}}
|
||||||
<small>11:09 PM - 1 Jan 2016</small>
|
</div>
|
||||||
|
<div class="column highlight-full">
|
||||||
|
{% highlight html %}{{card_header_example}}{% endhighlight %}
|
||||||
|
</div>
|
||||||
</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>
|
<hr>
|
||||||
|
|
||||||
{% capture card_header_example %}
|
<div class="columns">
|
||||||
<div class="card">
|
<div class="column is-one-third">
|
||||||
<header class="card-header">
|
{{card_title_example}}
|
||||||
<p class="card-header-title">
|
</div>
|
||||||
Component
|
<div class="column highlight-full">
|
||||||
</p>
|
{% highlight html %}{{card_title_example}}{% endhighlight %}
|
||||||
<a class="card-header-icon">
|
</div>
|
||||||
<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>
|
||||||
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -6,26 +6,6 @@ doc-subtab: box
|
|||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% 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 %}
|
{% capture box_example %}
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<article class="media">
|
<article class="media">
|
||||||
@@ -60,14 +40,32 @@ doc-subtab: box
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% 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">
|
<div class="column is-8">
|
||||||
{{box_example}}
|
{{box_example}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}
|
{% highlight html %}{{box_example}}{% endhighlight %}
|
||||||
{{box_example}}
|
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1,14 +1,31 @@
|
|||||||
|
$card: $text !default
|
||||||
|
$card-background: $white !default
|
||||||
|
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||||
|
|
||||||
|
$card-header: $text-strong !default
|
||||||
|
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
|
||||||
|
$card-header-weight: $weight-bold !default
|
||||||
|
|
||||||
|
$card-footer-border: $border !default
|
||||||
|
|
||||||
|
.card
|
||||||
|
background-color: $card-background
|
||||||
|
box-shadow: $card-shadow
|
||||||
|
color: $card
|
||||||
|
max-width: 100%
|
||||||
|
position: relative
|
||||||
|
|
||||||
.card-header
|
.card-header
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
box-shadow: 0 1px 2px rgba($black, 0.1)
|
box-shadow: $card-header-shadow
|
||||||
display: flex
|
display: flex
|
||||||
|
|
||||||
.card-header-title
|
.card-header-title
|
||||||
align-items: center
|
align-items: center
|
||||||
color: $text-strong
|
color: $card-header
|
||||||
display: flex
|
display: flex
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
font-weight: $weight-bold
|
font-weight: $card-header-weight
|
||||||
padding: 0.75rem
|
padding: 0.75rem
|
||||||
|
|
||||||
.card-header-icon
|
.card-header-icon
|
||||||
@@ -26,7 +43,7 @@
|
|||||||
padding: 1.5rem
|
padding: 1.5rem
|
||||||
|
|
||||||
.card-footer
|
.card-footer
|
||||||
border-top: 1px solid $border
|
border-top: 1px solid $card-footer-border
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
display: flex
|
display: flex
|
||||||
|
|
||||||
@@ -39,13 +56,10 @@
|
|||||||
justify-content: center
|
justify-content: center
|
||||||
padding: 0.75rem
|
padding: 0.75rem
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
border-right: 1px solid $border
|
border-right: 1px solid $card-footer-border
|
||||||
|
|
||||||
|
// Combinations
|
||||||
|
|
||||||
.card
|
.card
|
||||||
background-color: $white
|
|
||||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
|
||||||
color: $text
|
|
||||||
max-width: 100%
|
|
||||||
position: relative
|
|
||||||
.media:not(:last-child)
|
.media:not(:last-child)
|
||||||
margin-bottom: 0.75rem
|
margin-bottom: 0.75rem
|
||||||
|
|||||||
@@ -1,14 +1,23 @@
|
|||||||
|
$box: $text !default
|
||||||
|
$box-background: $white !default
|
||||||
|
$box-radius: $radius-large !default
|
||||||
|
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||||
|
|
||||||
|
$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
|
||||||
|
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
|
||||||
|
|
||||||
.box
|
.box
|
||||||
+block
|
+block
|
||||||
background-color: $white
|
background-color: $box-background
|
||||||
border-radius: $radius-large
|
border-radius: $box-radius
|
||||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
box-shadow: $box-shadow
|
||||||
|
color: $box
|
||||||
display: block
|
display: block
|
||||||
padding: 1.25rem
|
padding: 1.25rem
|
||||||
|
|
||||||
a.box
|
a.box
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus
|
&:focus
|
||||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
|
box-shadow: $box-link-hover-shadow
|
||||||
&:active
|
&:active
|
||||||
box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
|
box-shadow: $box-link-active-shadow
|
||||||
|
|||||||
Reference in New Issue
Block a user