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

Fix container

Browse Source
This commit is contained in:
Jeremy Thomas 2016-12-23 13:59:26 +00:00
parent 8a45f3b8d0
commit 82e7672458
5 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -251,13 +251,13 @@ table th {
}
}
@media screen and (min-width: 1000px) and (max-width: 1239px) {
@media screen and (min-width: 1000px) and (max-width: 1191px) {
.is-block-desktop-only {
display: block !important;
}
}
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1192px) {
.is-block-widescreen {
display: block !important;
}
@ -297,13 +297,13 @@ table th {
}
}
@media screen and (min-width: 1000px) and (max-width: 1239px) {
@media screen and (min-width: 1000px) and (max-width: 1191px) {
.is-flex-desktop-only {
display: flex !important;
}
}
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1192px) {
.is-flex-widescreen {
display: flex !important;
}
@ -343,13 +343,13 @@ table th {
}
}
@media screen and (min-width: 1000px) and (max-width: 1239px) {
@media screen and (min-width: 1000px) and (max-width: 1191px) {
.is-inline-desktop-only {
display: inline !important;
}
}
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1192px) {
.is-inline-widescreen {
display: inline !important;
}
@ -389,13 +389,13 @@ table th {
}
}
@media screen and (min-width: 1000px) and (max-width: 1239px) {
@media screen and (min-width: 1000px) and (max-width: 1191px) {
.is-inline-block-desktop-only {
display: inline-block !important;
}
}
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1192px) {
.is-inline-block-widescreen {
display: inline-block !important;
}
@ -435,13 +435,13 @@ table th {
}
}
@media screen and (min-width: 1000px) and (max-width: 1239px) {
@media screen and (min-width: 1000px) and (max-width: 1191px) {
.is-inline-flex-desktop-only {
display: inline-flex !important;
}
}
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1192px) {
.is-inline-flex-widescreen {
display: inline-flex !important;
}
@ -519,13 +519,13 @@ table th {
}
}
@media screen and (min-width: 1000px) and (max-width: 1239px) {
@media screen and (min-width: 1000px) and (max-width: 1191px) {
.is-hidden-desktop-only {
display: none !important;
}
}
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1192px) {
.is-hidden-widescreen {
display: none !important;
}
@ -2700,7 +2700,7 @@ a.box:active {
.title .tag,
.subtitle .tag {
vertical-align: bottom;
vertical-align: middle;
}
.title {
@ -2799,14 +2799,14 @@ a.box:active {
max-width: 960px;
}
.container.is-fluid {
margin: 0 1.5rem;
margin: 0 20px;
max-width: none;
}
}
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1192px) {
.container {
max-width: 1200px;
max-width: 1152px;
}
}
@ -4815,7 +4815,7 @@ label.panel-block:hover {
}
}
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1192px) {
.column.is-narrow-widescreen {
flex: none;
}
@ -5175,7 +5175,7 @@ label.panel-block:hover {
padding: 3rem 1.5rem;
}
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1192px) {
.hero-body {
padding-left: 0;
padding-right: 0;

6
docs/documentation/layout/container.html
View File

@ -23,8 +23,10 @@ doc-subtab: container
<li><code>.section</code></li>
<li><code>.footer</code></li>
</ul>
<p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>1.5rem</strong> on both the left and right sides.</p>
<p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
<p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
<p>On <strong>desktop</strong> (>= 1000px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
<p>On <strong>widescreen</strong> (>= 1192px), the container will have a maximum width of <strong>1152px</strong>.</p>
<p>The values <strong>960</strong> and <strong>1152</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
</div>
</div>

6
sass/elements/other.sass
View File

@ -5,13 +5,13 @@
position: relative
+desktop
margin: 0 auto
max-width: $desktop - 40px
max-width: $desktop - 40px // 960px
// Modifiers
&.is-fluid
margin: 0 1.5rem
margin: 0 20px
max-width: none
+widescreen
max-width: $widescreen - 40px
max-width: $widescreen - 40px // 1152px
.delete
+delete

2
sass/elements/title.sass
View File

@ -18,7 +18,7 @@ $subtitle-weight: $weight-light !default
strong
font-weight: $title-weight-bold
.tag
vertical-align: bottom
vertical-align: middle
.title
color: $title

6
sass/utilities/mixins.sass
View File

@ -185,8 +185,10 @@
// Responsiveness
$tablet: 769px !default
$desktop: 1000px !default
$widescreen: 1240px !default
$desktop: 1000px !default // 960px container + 40px
$widescreen: 1192px !default // 1152px container + 40
// 960 and 1152 have been chosen because
// they are divisible by both 12 and 16
=from($device)
@media screen and (min-width: $device)