library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-12-12 13:28:30 +00:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -1,6 +1,9 @@
# Bulma Changelog # Bulma Changelog
## 0.3.3 ## 0.4
* **Default font-size is 16px**
* **New `.field` element ; `.control` repurposed**
* Remove monospace named fonts * Remove monospace named fonts
* Remove icon spacing logic * Remove icon spacing logic

1
docs/_layouts/post.html
View File

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

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

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

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

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

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

@ -55,7 +55,7 @@ doc-subtab: modal
No JavaScript No JavaScript
</div> </div>
<div class="message-body"> <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>
</div> </div>

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

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

2
docs/sass/global.sass
View File

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

9
sass/components/nav.sass
View File

@ -1,4 +1,4 @@
$nav-height: 3.5rem !default $nav-height: 3.25rem !default
// Components // Components
@ -15,6 +15,7 @@ $nav-height: 3.5rem !default
flex-shrink: 0 flex-shrink: 0
font-size: $size-normal font-size: $size-normal
justify-content: center justify-content: center
line-height: 1.5
padding: 0.5rem 0.75rem padding: 0.5rem 0.75rem
a a
flex-grow: 1 flex-grow: 1
@ -43,17 +44,17 @@ a.nav-item
&.is-tab &.is-tab
border-bottom: 1px solid transparent border-bottom: 1px solid transparent
border-top: 1px solid transparent border-top: 1px solid transparent
padding-bottom: calc(0.5rem - 1px) padding-bottom: calc(0.75rem - 1px)
padding-left: 1rem padding-left: 1rem
padding-right: 1rem padding-right: 1rem
padding-top: calc(0.5rem - 1px) padding-top: calc(0.75rem - 1px)
&:hover &:hover
border-bottom-color: $primary border-bottom-color: $primary
border-top-color: transparent border-top-color: transparent
&.is-active &.is-active
border-bottom: 3px solid $primary border-bottom: 3px solid $primary
color: $primary color: $primary
padding-bottom: calc(0.5rem - 3px) padding-bottom: calc(0.75rem - 3px)
// Responsiveness // Responsiveness
+desktop +desktop
&.is-brand &.is-brand

2
sass/components/pagination.sass
View File

@ -46,7 +46,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination-next, .pagination-next,
.pagination-link .pagination-link
border: 1px solid $pagination-border border: 1px solid $pagination-border
min-width: 2.5em min-width: 2.25em
&:hover &:hover
border-color: $pagination-hover-border border-color: $pagination-hover-border
color: $pagination-hover color: $pagination-hover

10
sass/elements/button.sass
View File

@ -45,9 +45,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
width: 1.5em width: 1.5em
&:first-child:not(:last-child) &:first-child:not(:last-child)
margin-left: calc(-0.375em - 1px) margin-left: calc(-0.375em - 1px)
margin-right: 0.375em margin-right: 0.1875em
&:last-child:not(:first-child) &:last-child:not(:first-child)
margin-left: 0.375em margin-left: 0.1875em
margin-right: calc(-0.375em - 1px) margin-right: calc(-0.375em - 1px)
&:first-child:last-child &:first-child:last-child
margin-left: calc(-0.375em - 1px) margin-left: calc(-0.375em - 1px)
@ -154,5 +154,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
+center(1em) +center(1em)
position: absolute !important position: absolute !important
button.button // Adjustment for vertical spacing
button.button,
input[type="submit"].button
line-height: 1 line-height: 1
padding-bottom: 0.4em
padding-top: 0.35em

1
sass/elements/form.sass
View File

@ -158,7 +158,6 @@ $input-radius: $radius !default
&.is-#{$name} &.is-#{$name}
color: $color color: $color
input[type="submit"].input,
.select select .select select
line-height: 1 line-height: 1

6
sass/utilities/controls.sass
View File

@ -12,11 +12,11 @@ $control-radius-small: $radius-small !default
font-size: $size-normal font-size: $size-normal
height: 2.25em height: 2.25em
justify-content: flex-start justify-content: flex-start
line-height: 1.5 line-height: 1.25
padding-bottom: 0.425em padding-bottom: 0.5em
padding-left: 0.625em padding-left: 0.625em
padding-right: 0.625em padding-right: 0.625em
padding-top: 0.325em padding-top: 0.5em
position: relative position: relative
vertical-align: top vertical-align: top
// States // States

3
sass/utilities/mixins.sass
View File

@ -167,10 +167,13 @@
// Responsiveness // Responsiveness
$tablet: 769px !default $tablet: 769px !default
// 960px container + 40px // 960px container + 40px
$desktop: 1000px !default $desktop: 1000px !default
// 1152px container + 40 // 1152px container + 40
$widescreen: 1192px !default $widescreen: 1192px !default
// 960 and 1152 have been chosen because // 960 and 1152 have been chosen because
// they are divisible by both 12 and 16 // they are divisible by both 12 and 16

8
sass/utilities/variables.sass
View File

@ -29,13 +29,13 @@ $red: hsl(348, 100%, 61%) !default
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
$family-monospace: monospace !default $family-monospace: monospace !default
$size-1: 3.5rem !default $size-1: 3rem !default
$size-2: 2.75rem !default $size-2: 2.5rem !default
$size-3: 2rem !default $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.85rem !default $size-7: 0.75rem !default
$weight-light: 300 !default $weight-light: 300 !default
$weight-normal: 400 !default $weight-normal: 400 !default
@ -44,7 +44,7 @@ $weight-bold: 700 !default
// Body // Body
$body-background: $white !default $body-background: $white !default
$body-size: 14px !default $body-size: 16px !default
// Miscellaneous // Miscellaneous
$easing: ease-out !default $easing: ease-out !default