library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix media object

Browse Source
This commit is contained in:
Jeremy Thomas 2016-12-22 19:37:38 +00:00
parent bd6fccef04
commit 7dd8463348
7 changed files with 65 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/css/bulma-docs.css
View File

@ -173,7 +173,7 @@ input[type="radio"] {
}
small {
font-size: 0.75rem;
font-size: 0.8em;
}
span {
@ -2234,7 +2234,6 @@ a.box:active {
text-align: center;
vertical-align: top;
width: 1.5rem;
background: coral;
}
.icon .fa {
@ -3243,6 +3242,9 @@ a.box:active {
.level-item {
align-items: center;
display: flex;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
}
@ -3257,6 +3259,13 @@ a.box:active {
}
}
.level-left,
.level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
.level-left .level-item:not(:last-child),
.level-right .level-item:not(:last-child) {
margin-right: 0.75rem;
@ -3336,19 +3345,21 @@ a.box:active {
.media-left,
.media-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
.media-left {
margin-right: 0.75rem;
margin-right: 1rem;
}
.media-right {
margin-left: 0.75rem;
margin-left: 1rem;
}
.media-content {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
text-align: left;
@ -3361,7 +3372,7 @@ a.box:active {
}
.media .content:not(:last-child) {
margin-bottom: 1rem;
margin-bottom: 0.75rem;
}
.media .media {

8
docs/documentation/components/card.html
View File

@ -17,7 +17,7 @@ doc-subtab: card
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/300x225.png" alt="">
<img src="{{site.url}}/images/placeholders/300x225.png" alt="Image">
</figure>
</div>
<div class="card-content">
@ -35,8 +35,8 @@ doc-subtab: card
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a>#css</a> <a>#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
@ -71,7 +71,7 @@ doc-subtab: card
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<a>@bulmaio</a>. <a>#css</a> <a>#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>

50
docs/documentation/components/level.html
View File

@ -117,20 +117,28 @@ doc-subtab: level
{% capture nav_centered_example %}
<nav class="level">
<div class="level-item has-text-centered">
<p class="heading">Tweets</p>
<p class="title">3,456</p>
<div>
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
</div>
<div class="level-item has-text-centered">
<p class="heading">Following</p>
<p class="title">123</p>
<div>
<p class="heading">Following</p>
<p class="title">123</p>
</div>
</div>
<div class="level-item has-text-centered">
<p class="heading">Followers</p>
<p class="title">456K</p>
<div>
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
</div>
<div class="level-item has-text-centered">
<p class="heading">Likes</p>
<p class="title">789</p>
<div>
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</div>
</nav>
{% endcapture %}
@ -143,7 +151,7 @@ doc-subtab: level
<a class="link is-info">Menu</a>
</p>
<p class="level-item has-text-centered">
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 30px;">
</p>
<p class="level-item has-text-centered">
<a class="link is-info">Reservations</a>
@ -175,20 +183,28 @@ doc-subtab: level
{% capture nav_mobile_example %}
<nav class="level is-mobile">
<div class="level-item has-text-centered">
<p class="heading">Tweets</p>
<p class="title">3,456</p>
<div>
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
</div>
<div class="level-item has-text-centered">
<p class="heading">Following</p>
<p class="title">123</p>
<div>
<p class="heading">Following</p>
<p class="title">123</p>
</div>
</div>
<div class="level-item has-text-centered">
<p class="heading">Followers</p>
<p class="title">456K</p>
<div>
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
</div>
<div class="level-item has-text-centered">
<p class="heading">Likes</p>
<p class="title">789</p>
<div>
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</div>
</nav>
{% endcapture %}

2
sass/base/generic.sass
View File

@ -71,7 +71,7 @@ input[type="radio"]
vertical-align: baseline
small
font-size: $size-small
font-size: 0.8em
span
font-style: inherit

6
sass/components/level.sass
View File

@ -1,6 +1,9 @@
.level-item
align-items: center
display: flex
flex-basis: auto
flex-grow: 0
flex-shrink: 0
justify-content: center
.title,
.subtitle
@ -12,6 +15,9 @@
.level-left,
.level-right
flex-basis: auto
flex-grow: 0
flex-shrink: 0
.level-item
&:not(:last-child)
margin-right: 0.75rem

8
sass/components/media.sass
View File

@ -1,15 +1,17 @@
.media-left,
.media-right
flex-basis: auto
flex-grow: 0
flex-shrink: 0
.media-left
margin-right: 0.75rem
margin-right: 1rem
.media-right
margin-left: 0.75rem
margin-left: 1rem
.media-content
flex-basis: auto
flex-grow: 1
flex-shrink: 1
text-align: left
@ -19,7 +21,7 @@
display: flex
text-align: left
.content:not(:last-child)
margin-bottom: 1rem
margin-bottom: 0.75rem
.media
border-top: 1px solid rgba($border, 0.5)
display: flex

1
sass/elements/icon.sass
View File

@ -1,6 +1,5 @@
.icon
+fa(21px, 1.5rem)
background: coral
.fa
font-size: inherit
line-height: inherit