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 level on mobile

Browse Source
This commit is contained in:
Jeremy Thomas 2017-03-12 16:25:41 +00:00
parent 6ac14c316f
commit 136b886609
6 changed files with 72 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -3,6 +3,9 @@
## 0.3.3 ## 0.3.3
* Remove monospace named fonts * Remove monospace named fonts
* Remove icon spacing logic
* Split icon container dimensions and icon size
* Fix delete button by using pixels instead of (r)em
## 0.3.2 ## 0.3.2

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

@ -1253,7 +1253,7 @@ a.box:active {
.button.is-small { .button.is-small {
border-radius: 2px; border-radius: 2px;
font-size: 0.75rem; font-size: 0.85rem;
} }
.button.is-medium { .button.is-medium {
@ -1438,7 +1438,7 @@ a.box:active {
} }
.content.is-small { .content.is-small {
font-size: 0.75rem; font-size: 0.85rem;
} }
.content.is-medium { .content.is-medium {
@ -1590,7 +1590,7 @@ a.box:active {
.input.is-small, .input.is-small,
.textarea.is-small { .textarea.is-small {
border-radius: 2px; border-radius: 2px;
font-size: 0.75rem; font-size: 0.85rem;
} }
.input.is-medium, .input.is-medium,
@ -1768,7 +1768,7 @@ a.box:active {
.select.is-small { .select.is-small {
border-radius: 2px; border-radius: 2px;
font-size: 0.75rem; font-size: 0.85rem;
} }
.select.is-medium { .select.is-medium {
@ -1799,7 +1799,7 @@ a.box:active {
.help { .help {
display: block; display: block;
font-size: 0.75rem; font-size: 0.85rem;
margin-top: 5px; margin-top: 5px;
} }
@ -1961,7 +1961,7 @@ a.box:active {
} }
.control.has-icon .input.is-small + .icon { .control.has-icon .input.is-small + .icon {
font-size: 0.75rem; font-size: 0.85rem;
} }
.control.has-icon .input.is-medium + .icon { .control.has-icon .input.is-medium + .icon {
@ -2339,7 +2339,7 @@ a.box:active {
} }
.progress.is-small { .progress.is-small {
height: 0.75rem; height: 0.85rem;
} }
.progress.is-medium { .progress.is-medium {
@ -2426,7 +2426,7 @@ a.box:active {
border-radius: 290486px; border-radius: 290486px;
color: #4a4a4a; color: #4a4a4a;
display: inline-flex; display: inline-flex;
font-size: 0.75rem; font-size: 0.85rem;
height: 2em; height: 2em;
justify-content: center; justify-content: center;
line-height: 1.5; line-height: 1.5;
@ -2642,13 +2642,11 @@ a.box:active {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-size: 1rem; font-size: 1rem;
height: 0px; height: 20px;
outline: none; outline: none;
position: relative; position: relative;
transform: rotate(45deg);
transform-origin: center center;
vertical-align: top; vertical-align: top;
width: 0px; width: 20px;
} }
.delete:before, .delete:after { .delete:before, .delete:after {
@ -2658,7 +2656,8 @@ a.box:active {
left: 50%; left: 50%;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform-origin: center center;
} }
.delete:before { .delete:before {
@ -2680,18 +2679,18 @@ a.box:active {
} }
.delete.is-small { .delete.is-small {
height: 0px; height: 16px;
width: 0px; width: 16px;
} }
.delete.is-medium { .delete.is-medium {
height: 0px; height: 24px;
width: 0px; width: 24px;
} }
.delete.is-large { .delete.is-large {
height: 2px; height: 32px;
width: 2px; width: 32px;
} }
.fa { .fa {
@ -2907,11 +2906,20 @@ a.box:active {
display: flex; display: flex;
} }
.level.is-mobile > .level-item:not(:last-child) { .level.is-mobile .level-left,
.level.is-mobile .level-right {
display: flex;
}
.level.is-mobile .level-left + .level-right {
margin-top: 0;
}
.level.is-mobile .level-item:not(:last-child) {
margin-bottom: 0; margin-bottom: 0;
} }
.level.is-mobile > .level-item:not(.is-narrow) { .level.is-mobile .level-item:not(.is-narrow) {
flex-grow: 1; flex-grow: 1;
} }
@ -3267,13 +3275,11 @@ a.box:active {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-size: 1rem; font-size: 1rem;
height: 0px; height: 20px;
outline: none; outline: none;
position: relative; position: relative;
transform: rotate(45deg);
transform-origin: center center;
vertical-align: top; vertical-align: top;
width: 0px; width: 20px;
background: none; background: none;
height: 40px; height: 40px;
position: fixed; position: fixed;
@ -3289,7 +3295,8 @@ a.box:active {
left: 50%; left: 50%;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform-origin: center center;
} }
.modal-close:before { .modal-close:before {
@ -3311,18 +3318,18 @@ a.box:active {
} }
.modal-close.is-small { .modal-close.is-small {
height: 0px; height: 16px;
width: 0px; width: 16px;
} }
.modal-close.is-medium { .modal-close.is-medium {
height: 0px; height: 24px;
width: 0px; width: 24px;
} }
.modal-close.is-large { .modal-close.is-large {
height: 2px; height: 32px;
width: 2px; width: 32px;
} }
.modal-card { .modal-card {
@ -4067,7 +4074,7 @@ label.panel-block:hover {
} }
.tabs.is-small { .tabs.is-small {
font-size: 0.75rem; font-size: 0.85rem;
} }
.tabs.is-medium { .tabs.is-medium {
@ -6184,7 +6191,7 @@ svg {
#carbonads .carbon-poweredby { #carbonads .carbon-poweredby {
bottom: 0; bottom: 0;
color: #7a7a7a; color: #7a7a7a;
font-size: 0.75rem; font-size: 0.85rem;
left: 160px; left: 160px;
line-height: 20px; line-height: 20px;
padding: 0 15px 10px 0; padding: 0 15px 10px 0;

48
docs/documentation/elements/box.html
View File

@ -26,42 +26,7 @@ doc-subtab: box
</div> </div>
</div> </div>
<div class="column is-8"> {% capture box_example %}
<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">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fa fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-heart"></i></span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
</div>
{% highlight html %}
<div class="box"> <div class="box">
<article class="media"> <article class="media">
<div class="media-left"> <div class="media-left">
@ -77,7 +42,7 @@ doc-subtab: box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</p> </p>
</div> </div>
<nav class="level"> <nav class="level is-mobile">
<div class="level-left"> <div class="level-left">
<a class="level-item"> <a class="level-item">
<span class="icon is-small"><i class="fa fa-reply"></i></span> <span class="icon is-small"><i class="fa fa-reply"></i></span>
@ -93,6 +58,15 @@ doc-subtab: box
</div> </div>
</article> </article>
</div> </div>
{% endcapture %}
<div class="column is-8">
{{box_example}}
</div>
</div>
{% highlight html %}
{{box_example}}
{% endhighlight %} {% endhighlight %}
</div> </div>

7
sass/components/level.sass
View File

@ -54,7 +54,12 @@
// Modifiers // Modifiers
&.is-mobile &.is-mobile
display: flex display: flex
& > .level-item .level-left,
.level-right
display: flex
.level-left + .level-right
margin-top: 0
.level-item
&:not(:last-child) &:not(:last-child)
margin-bottom: 0 margin-bottom: 0
&:not(.is-narrow) &:not(.is-narrow)

26
sass/utilities/mixins.sass
View File

@ -28,11 +28,6 @@
top: 50% top: 50%
=delete =delete
// We need even pixel dimensions to ensure the delete cross can be perfectly centered
$dimension-small: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-small)) * 1px
$dimension-normal: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-normal)) * 1px
$dimension-medium: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-medium)) * 1px
$dimension-large: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-large)) * 1px
+unselectable +unselectable
-moz-appearance: none -moz-appearance: none
-webkit-appearance: none -webkit-appearance: none
@ -42,13 +37,11 @@
cursor: pointer cursor: pointer
display: inline-block display: inline-block
font-size: $size-normal font-size: $size-normal
height: $dimension-normal height: 20px
outline: none outline: none
position: relative position: relative
transform: rotate(45deg)
transform-origin: center center
vertical-align: top vertical-align: top
width: $dimension-normal width: 20px
&:before, &:before,
&:after &:after
background-color: $white background-color: $white
@ -57,7 +50,8 @@
left: 50% left: 50%
position: absolute position: absolute
top: 50% top: 50%
transform: translateX(-50%) translateY(-50%) transform: translateX(-50%) translateY(-50%) rotate(45deg)
transform-origin: center center
&:before &:before
height: 2px height: 2px
width: 50% width: 50%
@ -71,14 +65,14 @@
background-color: rgba($black, 0.4) background-color: rgba($black, 0.4)
// Sizes // Sizes
&.is-small &.is-small
height: $dimension-small height: 16px
width: $dimension-small width: 16px
&.is-medium &.is-medium
height: $dimension-medium height: 24px
width: $dimension-medium width: 24px
&.is-large &.is-large
height: $dimension-large height: 32px
width: $dimension-large width: 32px
=fa($size, $dimensions) =fa($size, $dimensions)
display: inline-block display: inline-block

2
sass/utilities/variables.sass
View File

@ -35,7 +35,7 @@ $size-3: 2rem !default
$size-4: 1.5rem !default $size-4: 1.5rem !default
$size-5: 1.25rem !default $size-5: 1.25rem !default
$size-6: 1rem !default $size-6: 1rem !default
$size-7: 0.75rem !default $size-7: 0.85rem !default
$weight-light: 300 !default $weight-light: 300 !default
$weight-normal: 400 !default $weight-normal: 400 !default