library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix desktop container

Browse Source
This commit is contained in:
Jeremy Thomas 2017-07-24 12:54:00 +02:00
parent 28d22d97df
commit d28556d8dd
4 changed files with 100 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3429,16 +3429,20 @@ input[type="submit"].button {
.container {
margin: 0 auto;
max-width: 960px;
position: relative;
width: 960px;
}
.container.is-fluid {
margin-left: 24px;
margin-right: 24px;
max-width: none;
width: auto;
@media screen and (min-width: 1008px) {
.container {
max-width: 960px;
width: 960px;
}
.container.is-fluid {
margin-left: 24px;
margin-right: 24px;
max-width: none;
width: auto;
}
}
@media screen and (max-width: 1199px) {
@ -3782,6 +3786,11 @@ input[type="submit"].button {
display: block;
}
.dropdown.is-right .dropdown-menu {
left: auto;
right: 0;
}
.dropdown-menu {
display: none;
left: 0;

72
docs/documentation/components/dropdown.html
View File

@ -127,6 +127,46 @@ doc-subtab: dropdown
</div>
{% endcapture %}
{% capture dropdown_left_example %}
<div class="dropdown is-active">
<div class="dropdown-trigger">
<a class="button is-info">
<span>Left aligned</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>The dropdown is <strong>left-aligned</strong> by default.</p>
</div>
</div>
</div>
</div>
{% endcapture %}
{% capture dropdown_right_example %}
<div class="dropdown is-right is-active">
<div class="dropdown-trigger">
<a class="button is-info">
<span>Right aligned</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
</div>
</div>
</div>
</div>
{% endcapture %}
{% include subnav-components.html %}
<section class="section">
@ -246,5 +286,37 @@ doc-subtab: dropdown
{% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
</div>
</div>
<hr>
<h3 class="title">
Right aligned
</h3>
<div class="content">
<p>
You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
</p>
</div>
<div class="columns">
<div class="column is-half">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
{{dropdown_left_example}}
</div>
</div>
<div class="level-right">
<div class="level-item">
{{dropdown_right_example}}
</div>
</div>
</div>
</div>
<div class="column is-half">
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
</div>
</div>
</div>
</section>

4
sass/components/dropdown.sass
View File

@ -21,6 +21,10 @@ $dropdown-divider-background: $border !default
&.is-hoverable:hover
.dropdown-menu
display: block
&.is-right
.dropdown-menu
left: auto
right: 0
.dropdown-menu
display: none

15
sass/elements/other.sass
View File

@ -3,14 +3,15 @@
.container
margin: 0 auto
max-width: $desktop - (2 * $gap)
position: relative
width: $desktop - (2 * $gap)
&.is-fluid
margin-left: $gap
margin-right: $gap
max-width: none
width: auto
+desktop
max-width: $desktop - (2 * $gap)
width: $desktop - (2 * $gap)
&.is-fluid
margin-left: $gap
margin-right: $gap
max-width: none
width: auto
+until($widescreen)
&.is-widescreen
max-width: $widescreen - (2 * $gap)