mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Fix level on mobile
This commit is contained in:
Jeremy Thomas
parent
6ac14c316f
commit
136b886609
@ -3,6 +3,9 @@
|
||||
## 0.3.3
|
||||
|
||||
* 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
|
||||
|
||||
|
||||
@ -1253,7 +1253,7 @@ a.box:active {
|
||||
|
||||
.button.is-small {
|
||||
border-radius: 2px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.button.is-medium {
|
||||
@ -1438,7 +1438,7 @@ a.box:active {
|
||||
}
|
||||
|
||||
.content.is-small {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.content.is-medium {
|
||||
@ -1590,7 +1590,7 @@ a.box:active {
|
||||
.input.is-small,
|
||||
.textarea.is-small {
|
||||
border-radius: 2px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.input.is-medium,
|
||||
@ -1768,7 +1768,7 @@ a.box:active {
|
||||
|
||||
.select.is-small {
|
||||
border-radius: 2px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.select.is-medium {
|
||||
@ -1799,7 +1799,7 @@ a.box:active {
|
||||
|
||||
.help {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@ -1961,7 +1961,7 @@ a.box:active {
|
||||
}
|
||||
|
||||
.control.has-icon .input.is-small + .icon {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.control.has-icon .input.is-medium + .icon {
|
||||
@ -2339,7 +2339,7 @@ a.box:active {
|
||||
}
|
||||
|
||||
.progress.is-small {
|
||||
height: 0.75rem;
|
||||
height: 0.85rem;
|
||||
}
|
||||
|
||||
.progress.is-medium {
|
||||
@ -2426,7 +2426,7 @@ a.box:active {
|
||||
border-radius: 290486px;
|
||||
color: #4a4a4a;
|
||||
display: inline-flex;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
line-height: 1.5;
|
||||
@ -2642,13 +2642,11 @@ a.box:active {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
height: 0px;
|
||||
height: 20px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: center center;
|
||||
vertical-align: top;
|
||||
width: 0px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.delete:before, .delete:after {
|
||||
@ -2658,7 +2656,8 @@ a.box:active {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.delete:before {
|
||||
@ -2680,18 +2679,18 @@ a.box:active {
|
||||
}
|
||||
|
||||
.delete.is-small {
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.delete.is-medium {
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.delete.is-large {
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
@ -2907,11 +2906,20 @@ a.box:active {
|
||||
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;
|
||||
}
|
||||
|
||||
.level.is-mobile > .level-item:not(.is-narrow) {
|
||||
.level.is-mobile .level-item:not(.is-narrow) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@ -3267,13 +3275,11 @@ a.box:active {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
height: 0px;
|
||||
height: 20px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: center center;
|
||||
vertical-align: top;
|
||||
width: 0px;
|
||||
width: 20px;
|
||||
background: none;
|
||||
height: 40px;
|
||||
position: fixed;
|
||||
@ -3289,7 +3295,8 @@ a.box:active {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.modal-close:before {
|
||||
@ -3311,18 +3318,18 @@ a.box:active {
|
||||
}
|
||||
|
||||
.modal-close.is-small {
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.modal-close.is-medium {
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.modal-close.is-large {
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
@ -4067,7 +4074,7 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
.tabs.is-small {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tabs.is-medium {
|
||||
@ -6184,7 +6191,7 @@ svg {
|
||||
#carbonads .carbon-poweredby {
|
||||
bottom: 0;
|
||||
color: #7a7a7a;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
left: 160px;
|
||||
line-height: 20px;
|
||||
padding: 0 15px 10px 0;
|
||||
|
||||
@ -26,42 +26,7 @@ doc-subtab: box
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<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 %}
|
||||
{% capture box_example %}
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fa fa-reply"></i></span>
|
||||
@ -93,6 +58,15 @@ doc-subtab: box
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="column is-8">
|
||||
{{box_example}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{box_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -54,7 +54,12 @@
|
||||
// Modifiers
|
||||
&.is-mobile
|
||||
display: flex
|
||||
& > .level-item
|
||||
.level-left,
|
||||
.level-right
|
||||
display: flex
|
||||
.level-left + .level-right
|
||||
margin-top: 0
|
||||
.level-item
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
&:not(.is-narrow)
|
||||
|
||||
@ -28,11 +28,6 @@
|
||||
top: 50%
|
||||
|
||||
=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
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
@ -42,13 +37,11 @@
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-size: $size-normal
|
||||
height: $dimension-normal
|
||||
height: 20px
|
||||
outline: none
|
||||
position: relative
|
||||
transform: rotate(45deg)
|
||||
transform-origin: center center
|
||||
vertical-align: top
|
||||
width: $dimension-normal
|
||||
width: 20px
|
||||
&:before,
|
||||
&:after
|
||||
background-color: $white
|
||||
@ -57,7 +50,8 @@
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateX(-50%) translateY(-50%)
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
||||
transform-origin: center center
|
||||
&:before
|
||||
height: 2px
|
||||
width: 50%
|
||||
@ -71,14 +65,14 @@
|
||||
background-color: rgba($black, 0.4)
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: $dimension-small
|
||||
width: $dimension-small
|
||||
height: 16px
|
||||
width: 16px
|
||||
&.is-medium
|
||||
height: $dimension-medium
|
||||
width: $dimension-medium
|
||||
height: 24px
|
||||
width: 24px
|
||||
&.is-large
|
||||
height: $dimension-large
|
||||
width: $dimension-large
|
||||
height: 32px
|
||||
width: 32px
|
||||
|
||||
=fa($size, $dimensions)
|
||||
display: inline-block
|
||||
|
||||
@ -35,7 +35,7 @@ $size-3: 2rem !default
|
||||
$size-4: 1.5rem !default
|
||||
$size-5: 1.25rem !default
|
||||
$size-6: 1rem !default
|
||||
$size-7: 0.75rem !default
|
||||
$size-7: 0.85rem !default
|
||||
|
||||
$weight-light: 300 !default
|
||||
$weight-normal: 400 !default
|
||||
|
||||
Loading…
Reference in New Issue
Block a user