Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 11:54:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Change default font size

Browse Source
This commit is contained in:
Jeremy Thomas
2017-03-13 12:05:02 +00:00
parent d2d9515dfa
commit b93c3789b6
14 changed files with 110 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_layouts/post.html
View File

@@ -17,6 +17,7 @@ route: blog
<h1 class="title is-2">
{{ page.title }}
</h1>
<hr>
<div class="content is-medium">
{{ content }}
</div>

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

@@ -95,7 +95,7 @@ th {
html {
background-color: white;
font-size: 14px;
font-size: 16px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: 300px;
@@ -582,11 +582,11 @@ a.box:active {
font-size: 1rem;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.425em;
line-height: 1.25;
padding-bottom: 0.5em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.325em;
padding-top: 0.5em;
position: relative;
vertical-align: top;
-webkit-touch-callout: none;
@@ -624,11 +624,11 @@ a.box:active {
.button .icon:first-child:not(:last-child) {
margin-left: calc(-0.375em - 1px);
margin-right: 0.375em;
margin-right: 0.1875em;
}
.button .icon:last-child:not(:first-child) {
margin-left: 0.375em;
margin-left: 0.1875em;
margin-right: calc(-0.375em - 1px);
}
@@ -1253,7 +1253,7 @@ a.box:active {
.button.is-small {
border-radius: 2px;
font-size: 0.85rem;
font-size: 0.75rem;
}
.button.is-medium {
@@ -1297,8 +1297,11 @@ a.box:active {
position: absolute !important;
}
button.button {
button.button,
input[type="submit"].button {
line-height: 1;
padding-bottom: 0.4em;
padding-top: 0.35em;
}
.content {
@@ -1442,7 +1445,7 @@ button.button {
}
.content.is-small {
font-size: 0.85rem;
font-size: 0.75rem;
}
.content.is-medium {
@@ -1465,11 +1468,11 @@ button.button {
font-size: 1rem;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.425em;
line-height: 1.25;
padding-bottom: 0.5em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.325em;
padding-top: 0.5em;
position: relative;
vertical-align: top;
background-color: white;
@@ -1594,7 +1597,7 @@ button.button {
.input.is-small,
.textarea.is-small {
border-radius: 2px;
font-size: 0.85rem;
font-size: 0.75rem;
}
.input.is-medium,
@@ -1702,11 +1705,11 @@ button.button {
font-size: 1rem;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.425em;
line-height: 1.25;
padding-bottom: 0.5em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.325em;
padding-top: 0.5em;
position: relative;
vertical-align: top;
background-color: white;
@@ -1772,7 +1775,7 @@ button.button {
.select.is-small {
border-radius: 2px;
font-size: 0.85rem;
font-size: 0.75rem;
}
.select.is-medium {
@@ -1803,7 +1806,7 @@ button.button {
.help {
display: block;
font-size: 0.85rem;
font-size: 0.75rem;
margin-top: 0.25rem;
}
@@ -1843,7 +1846,6 @@ button.button {
color: #ff3860;
}
input[type="submit"].input,
.select select {
line-height: 1;
}
@@ -1998,7 +2000,7 @@ input[type="submit"].input,
}
.control.has-icon .input.is-small + .icon {
font-size: 0.85rem;
font-size: 0.75rem;
}
.control.has-icon .input.is-medium + .icon {
@@ -2335,7 +2337,7 @@ input[type="submit"].input,
}
.progress.is-small {
height: 0.85rem;
height: 0.75rem;
}
.progress.is-medium {
@@ -2422,7 +2424,7 @@ input[type="submit"].input,
border-radius: 290486px;
color: #4a4a4a;
display: inline-flex;
font-size: 0.85rem;
font-size: 0.75rem;
height: 2em;
justify-content: center;
line-height: 1.5;
@@ -2537,11 +2539,11 @@ input[type="submit"].input,
}
.title.is-1 {
font-size: 3.5rem;
font-size: 3rem;
}
.title.is-2 {
font-size: 2.75rem;
font-size: 2.5rem;
}
.title.is-3 {
@@ -2576,11 +2578,11 @@ input[type="submit"].input,
}
.subtitle.is-1 {
font-size: 3.5rem;
font-size: 3rem;
}
.subtitle.is-2 {
font-size: 2.75rem;
font-size: 2.5rem;
}
.subtitle.is-3 {
@@ -3400,9 +3402,9 @@ input[type="submit"].input,
.nav-toggle {
cursor: pointer;
display: block;
height: 3.5rem;
height: 3.25rem;
position: relative;
width: 3.5rem;
width: 3.25rem;
}
.nav-toggle span {
@@ -3467,6 +3469,7 @@ input[type="submit"].input,
flex-shrink: 0;
font-size: 1rem;
justify-content: center;
line-height: 1.5;
padding: 0.5rem 0.75rem;
}
@@ -3516,10 +3519,10 @@ a.nav-item.is-active {
a.nav-item.is-tab {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
padding-bottom: calc(0.5rem - 1px);
padding-bottom: calc(0.75rem - 1px);
padding-left: 1rem;
padding-right: 1rem;
padding-top: calc(0.5rem - 1px);
padding-top: calc(0.75rem - 1px);
}
.nav-item a.is-tab:hover,
@@ -3532,7 +3535,7 @@ a.nav-item.is-tab:hover {
a.nav-item.is-tab.is-active {
border-bottom: 3px solid #00d1b2;
color: #00d1b2;
padding-bottom: calc(0.5rem - 3px);
padding-bottom: calc(0.75rem - 3px);
}
@media screen and (min-width: 1000px) {
@@ -3607,7 +3610,7 @@ a.nav-item.is-tab.is-active {
align-items: stretch;
background-color: white;
display: flex;
min-height: 3.5rem;
min-height: 3.25rem;
position: relative;
text-align: center;
z-index: 2;
@@ -3616,7 +3619,7 @@ a.nav-item.is-tab.is-active {
.nav > .container {
align-items: stretch;
display: flex;
min-height: 3.5rem;
min-height: 3.25rem;
width: 100%;
}
@@ -3646,11 +3649,11 @@ a.nav-item.is-tab.is-active {
font-size: 1rem;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.425em;
line-height: 1.25;
padding-bottom: 0.5em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.325em;
padding-top: 0.5em;
position: relative;
vertical-align: top;
-webkit-touch-callout: none;
@@ -3695,7 +3698,7 @@ a.nav-item.is-tab.is-active {
.pagination-next,
.pagination-link {
border: 1px solid #dbdbdb;
min-width: 2.5em;
min-width: 2.25em;
}
.pagination-previous:hover,
@@ -4070,7 +4073,7 @@ label.panel-block:hover {
}
.tabs.is-small {
font-size: 0.85rem;
font-size: 0.75rem;
}
.tabs.is-medium {
@@ -6134,7 +6137,7 @@ svg {
#carbon {
max-width: 340px;
min-height: 130px;
min-height: 150px;
padding: 0;
position: relative;
}
@@ -6187,7 +6190,7 @@ svg {
#carbonads .carbon-poweredby {
bottom: 0;
color: #7a7a7a;
font-size: 0.85rem;
font-size: 0.75rem;
left: 160px;
line-height: 20px;
padding: 0 15px 10px 0;

26
docs/documentation/components/media-object.html
View File

@@ -105,13 +105,15 @@ doc-subtab: media-object
</p>
</figure>
<div class="media-content">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
<div class="field">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
</div>
<nav class="level">
<div class="level-left">
<div class="level-item">
<a class="button is-info">Post comment</a>
<a class="button is-info">Submit</a>
</div>
</div>
<div class="level-right">
@@ -210,12 +212,16 @@ doc-subtab: media-object
</p>
</figure>
<div class="media-content">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
<p class="control">
<button class="button">Post comment</button>
</p>
<div class="field">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
</div>
<div class="field">
<p class="control">
<button class="button">Post comment</button>
</p>
</div>
</div>
</article>
{% endcapture %}

2
docs/documentation/components/modal.html
View File

@@ -55,7 +55,7 @@ doc-subtab: modal
No JavaScript
</div>
<div class="message-body">
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
</div>
</div>

42
docs/documentation/elements/button.html
View File

@@ -354,16 +354,16 @@ doc-subtab: button
{% capture button_only_icon_example %}
<p class="field">
<a class="button is-small">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="field">
<a class="button">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button">
<span class="icon">
@@ -373,9 +373,9 @@ doc-subtab: button
</p>
<p class="field">
<a class="button is-medium">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon">
@@ -383,16 +383,16 @@ doc-subtab: button
</span>
</a>
<a class="button is-medium">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="field">
<a class="button is-large">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon">
@@ -400,14 +400,14 @@ doc-subtab: button
</span>
</a>
<a class="button is-large">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon is-large">
<i class="fa fa-header"></i>
</span>
<span class="icon is-large">
<i class="fa fa-header"></i>
</span>
</a>
</p>
{% endcapture %}

2
docs/sass/global.sass
View File

@@ -6,7 +6,7 @@ $carbon-space: 15px
#carbon
max-width: 340px
min-height: 100px + ($carbon-space * 2)
min-height: 120px + ($carbon-space * 2)
padding: 0
position: relative
&:hover