mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix #861
This commit is contained in:
Jeremy Thomas
parent
1ca8378bb9
commit
fccdedc66b
@ -4,6 +4,7 @@
|
||||
|
||||
### Issues closed
|
||||
|
||||
* Fix #861 Box in hero as text and background white
|
||||
* Fix #852 charset and version number
|
||||
* Fix #856 JavaScript `nav-burger` example
|
||||
* Fix #821 Notification strong color
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "bulma",
|
||||
"version": "0.4.2",
|
||||
"version": "0.4.3",
|
||||
"homepage": "http://bulma.io",
|
||||
"authors": [
|
||||
"jgthms <bbxdesign@gmail.com>"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
align-items: stretch
|
||||
box-shadow: 0 1px 2px rgba($black, 0.1)
|
||||
box-shadow: $card-header-shadow
|
||||
display: flex
|
||||
|
||||
.card-header-title
|
||||
align-items: center
|
||||
color: $text-strong
|
||||
color: $card-header
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
font-weight: $weight-bold
|
||||
font-weight: $card-header-weight
|
||||
padding: 0.75rem
|
||||
|
||||
.card-header-icon
|
||||
@ -26,7 +43,7 @@
|
||||
padding: 1.5rem
|
||||
|
||||
.card-footer
|
||||
border-top: 1px solid $border
|
||||
border-top: 1px solid $card-footer-border
|
||||
align-items: stretch
|
||||
display: flex
|
||||
|
||||
@ -39,13 +56,10 @@
|
||||
justify-content: center
|
||||
padding: 0.75rem
|
||||
&:not(:last-child)
|
||||
border-right: 1px solid $border
|
||||
border-right: 1px solid $card-footer-border
|
||||
|
||||
// Combinations
|
||||
|
||||
.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)
|
||||
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
|
||||
+block
|
||||
background-color: $white
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
background-color: $box-background
|
||||
border-radius: $box-radius
|
||||
box-shadow: $box-shadow
|
||||
color: $box
|
||||
display: block
|
||||
padding: 1.25rem
|
||||
|
||||
a.box
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
|
||||
box-shadow: $box-link-hover-shadow
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
|
||||
box-shadow: $box-link-active-shadow
|
||||
|
||||
Loading…
Reference in New Issue
Block a user